/* ======================================================
   THEME VARIABLES (jangsite 공통 팔레트)
====================================================== */

:root {
    /* Layout */
    --bg-main:       #f7f5f0;
    --bg-panel:      #ffffff;
    --bg-soft:       #f0ede6;

    /* Brand */
    --bg-deep:       #1e3a5f;
    --primary:       #1e3a5f;
    --primary-hover: #152d4a;
    --accent:        #c9a84c;
    --accent-light:  #e8d48a;
    --accent-deep:   #a07828;

    /* Text */
    --text-main:     #1a1a1a;
    --text-muted:    #7a7467;
    --text-light:    #b0a896;
    --text-on-dark:  #f0ede6;

    /* Border */
    --border:        #ddd8ce;
    --border-gold:   rgba(201,168,76,0.35);

    /* Shadow */
    --shadow-sm:     0 2px 8px rgba(26,26,46,0.07);
    --shadow-md:     0 8px 28px rgba(26,26,46,0.10);

    /* Fonts */
    --font-serif:    'Noto Serif KR', Georgia, serif;
    --font-sans:     'Noto Sans KR', system-ui, sans-serif;

    /* List-detail layout (resolution, clan 등 공통) */
    --list-detail-aside-bg: #f0ede6;
    --list-detail-main-bg:  var(--bg-main);
}

/* ======================================================
   LIST-DETAIL LAYOUT (공통)
   resolution, clan 등 좌측 목록 + 우측 상세 페이지
====================================================== */

.list-detail-page .site-main {
    padding: 1rem 0 0 0;
    min-height: 0;
}

.list-detail-page .list-detail-aside {
    background: var(--list-detail-aside-bg);
    display: flex;
    flex-direction: column;
    padding: 5px;
    min-width: 0;
    overflow-x: hidden;
}

.list-detail-page .list-detail-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 5px 5px 5px;
    background: var(--list-detail-main-bg);
}

.list-detail-page .list-detail-header {
    padding: 0.75rem;
    background: var(--list-detail-aside-bg);
    border-bottom: 1px solid var(--primary);
}

.list-detail-page .list-detail-header h1 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.list-detail-page .list-detail-list {
    padding: 0.75rem;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
}

.list-detail-page .list-detail-item {
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: var(--bg-panel);
    margin-bottom: 0.5rem;
    transition: border-color 0.15s, background-color 0.15s;
    min-width: 0;
    overflow: hidden;
}
.list-detail-page .list-detail-item .fw-bold,
.list-detail-page .list-detail-item .text-muted,
.list-detail-page .list-detail-item a {
    overflow-wrap: break-word;
    word-break: break-word;
}

.list-detail-page .list-detail-item:hover {
    border-color: var(--accent);
}

.list-detail-page .list-detail-item.active {
    border-color: var(--accent);
    background: var(--accent-light); /* 활성 카드: 브랜드 골드 톤 */
    box-shadow: 0 0 0 2px rgba(201,168,76,0.45);
}

/* 리스트 어사이드(왼쪽)에서 선택된 카드: 더 진한 골드 톤으로 강조 */
.list-detail-page .list-detail-aside .list-detail-item.active {
    background: var(--accent-light);
}

@media (max-width: 767.98px) {
    /* 모바일: 리스트 높이 신축, 단일 스크롤(바디만), 디테일이 리스트 바로 아래 */
    .list-detail-page .page-content-wide > .row {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
        overflow-x: hidden;
    }
    .list-detail-page .page-content-wide .list-detail-aside,
    .list-detail-page .page-content-wide .list-detail-main {
        max-width: 100%;
    }
    .list-detail-page .list-detail-aside {
        order: 1;
        border-right: none;
        border-bottom: 1px solid var(--primary);
        flex-shrink: 0;
        min-height: 0;
    }
    .list-detail-page .list-detail-main {
        order: 2;
        flex-shrink: 0;
    }
    .list-detail-page .list-detail-list {
        overflow-y: visible;
        flex: none;
    }
    .list-detail-page .site-main {
        padding-bottom: 1.5rem;
    }

    .has-detail .list-detail-aside { display: none; }
    .has-detail .list-detail-main { display: block; width: 100%; }

    /* 모바일 리스트 항목 축소 (폰트 크기는 유지) */
    .list-detail-page .list-detail-item {
        padding: 0.5rem 0.65rem;
        margin-bottom: 0.35rem;
        border-radius: 6px;
    }
}

/* Clan 탭: 굵은 폰트, 색상 구분 */
.clan-page .list-detail-header .nav-tabs .nav-link {
    font-weight: 700;
    color: var(--text-muted);
    border-color: transparent;
}
.clan-page .list-detail-header .nav-tabs .nav-link:hover {
    color: var(--text-main);
    border-color: transparent;
}
.clan-page .list-detail-header .nav-tabs .nav-link.active {
    color: var(--primary);
    background: transparent;
    border-color: var(--border);
    border-bottom-color: var(--list-detail-aside-bg);
}

/* Board 탭: 공지 / QnA (clan 탭과 동일 스타일) */
.board-page .list-detail-header .nav-tabs .nav-link {
    font-weight: 700;
    color: var(--text-muted);
    border-color: transparent;
}
.board-page .list-detail-header .nav-tabs .nav-link:hover {
    color: var(--text-main);
    border-color: transparent;
}
.board-page .list-detail-header .nav-tabs .nav-link.active {
    color: var(--primary);
    background: transparent;
    border-color: var(--border);
    border-bottom-color: var(--list-detail-aside-bg);
}

/* Tree person finder 탭 (clan/board와 동일 스타일) */
.tree-finder .nav-tabs .nav-link {
    font-weight: 700;
    color: var(--text-muted);
    border-color: transparent;
}
.tree-finder .nav-tabs .nav-link:hover {
    color: var(--text-main);
    border-color: transparent;
}
.tree-finder .nav-tabs .nav-link.active {
    color: var(--primary);
    background: transparent;
    border-color: var(--border);
    border-bottom-color: var(--list-detail-aside-bg);
}

/* Tree person finder 리스트 (clan/board와 동일 룩, 사이드바용 약간 축소) */
.tree-finder .list-detail-list {
    padding: 0.5rem 0;
    min-height: 0;
}
.tree-finder .list-detail-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-panel);
    margin-bottom: 0.5rem;
    transition: border-color 0.15s, background-color 0.15s;
    cursor: pointer;
}
.tree-finder .list-detail-item:hover {
    border-color: #adb5bd;
}
.tree-finder .list-detail-item:last-child {
    margin-bottom: 0;
}

.board-scope {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #7a1f2b;
    /* 버건디 */ }
/* ======================================================
   GLOBAL RESET
====================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    overflow-x: hidden; /* 헤더 와이드 때문에 생기는 가로 스크롤 숨김 */
}

/* iOS 사파리: html에 overflow-x: hidden이 걸리면 position: fixed 요소가
   화면에 고정되지 않고 문서와 함께 스크롤된다. clip은 스크롤 컨테이너를 만들지
   않으므로 같은 가로 클리핑을 하면서 fixed를 유지한다. */
@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

body {
    margin: 0 auto;
    font-family: var(--font-sans);
    background: var(--bg-main);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1440px;
}


/* ======================================================
   GLOBAL LINK STYLE
====================================================== */

a {
    color: var(--primary);
    text-decoration: none;
    transition: 0.2s ease;
}

a:hover {
    opacity: 0.85;
}


/* ======================================================
   HEADER (dark + gold accent)
====================================================== */

.site-header {
    background: var(--bg-deep);
    color: var(--text-on-dark);
    border-bottom: 1px solid rgba(201,168,76,0.25);
    padding: 0;
    margin-top: 0;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent) 20%,
        var(--accent-light) 50%,
        var(--accent) 80%,
        transparent 100%
    );
}

.header-inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.header-logo-img {
    height: 70px;  /* 46px + 20% */
    width: auto;
    display: block;
}
.header-logo-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-light);
}

.header-center {
    flex: 1;
    min-width: 0;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-left a {
    font-size: 1.08rem;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color .2s, background .2s;
}
.nav-left a:hover {
    background: rgba(201,168,76,0.08);
}
.nav-link-indicator {
    color: var(--accent);
    font-size: .55rem;
    vertical-align: super;
    margin-left: 2px;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.site-header a {
    color: rgba(240,237,230,.75);
    font-weight: 500;
    text-decoration: none;
}

.site-header a:hover {
    color: var(--accent-light);
}

.user-name {
    font-weight: 600;
    color: rgba(240,237,230,.8);
}

.nav-logout-form {
    display: inline;
}
.nav-logout-btn {
    background: none;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 6px;
    color: rgba(240,237,230,.75);
    font-size: 0.9rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.nav-logout-btn:hover {
    border-color: var(--accent);
    color: var(--accent-light);
    background: rgba(201,168,76,0.08);
}

.nav-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: rgba(201,168,76,0.08);
}

/* 모바일 햄버거 버튼 */
.header-menu-btn {
    display: none;
    flex-shrink: 0;
    padding: 10px;
    margin: -10px 0 -10px -10px;
    background: none;
    border: none;
    color: var(--accent-light);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.header-menu-icon {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

/* 모바일 드롭다운 메뉴 */
.header-dropdown {
    display: none;
    background: var(--bg-deep);
    border-top: 1px solid rgba(201,168,76,0.25);
}
.header-dropdown.is-open {
    display: block !important;
}
.header-dropdown-inner {
    padding: 16px 24px 20px;
}
.header-dropdown-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.header-dropdown-section a,
.header-dropdown-link {
    display: block;
    padding: 9px 12px;
    border-radius: 7px;
    color: rgba(240,237,230,.75);
    font-size: .92rem;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background .18s, color .18s;
}
.header-dropdown-section a:hover,
.header-dropdown-link:hover {
    background: rgba(201,168,76,0.1);
    color: var(--accent-light);
}
.header-dropdown-divider {
    height: 1px;
    background: rgba(201,168,76,0.2);
    margin: 10px 0;
}
.header-dropdown-mypage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}
.header-dropdown-mypage:hover {
    color: var(--accent-light);
}
.header-dropdown-mypage-icon { font-size: 1.1em; }
.header-dropdown-mypage-name { font-weight: 600; }

/* ======================================================
   MAIN LAYOUT
====================================================== */

.site-main {
    flex: 1;
    display: block;
    min-height: 0;
    min-width: 0;
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
}
/* overflow-x: hidden은 sticky 기준을 바꿔 사이드 메뉴가 붙지 않게 만든다.
   clip은 스크롤 컨테이너를 만들지 않으므로 sticky를 유지한다. */
@supports (overflow-x: clip) {
    .site-main {
        overflow-x: clip;
    }
}
.side-panel {
    background: var(--bg-soft);
    border-right: 1px solid var(--border); }

/* ======================================================
   CARD / PANEL STYLE
====================================================== */

.card,
.side-panel,
.detail-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.card:hover {
    box-shadow: var(--shadow-md);
    transition: 0.2s ease;
}

/* 리스트-디테일 메인: 첫 카드 위 여백 제거 (메인이 아래로 처지는 느낌 방지) */
.list-detail-main > .card:first-child {
    margin-top: 0;
}

/* ======================================================
   BUTTON OVERRIDE (Bootstrap 확장)
====================================================== */

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(30,58,95,0.18);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 4px 10px rgba(30,58,95,0.25);
}
/* ======================================================
        tab
====================================================== */
.tab {
    padding: 6px 14px;
    border-radius: 8px;
    color: var(--text-muted);
    transition: 0.2s ease;
}

.tab.active {
    background: var(--primary);
    color: white; }
/* ======================================================
   NOTIFICATION
====================================================== */

.noti-wrap {
    position: relative;
    display: inline-block;
}

.noti-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    padding-right: 4px; /* 뱃지가 겹쳐질 여유 공간 */
}

.noti-badge {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    border-radius: 999px;
    padding: 2px 6px;
    position: absolute;
    top: -3px;
    right: -3px;
}

.noti-dropdown {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    width: 260px;
    /* 알림 드롭다운: 더 또렷한 흰색 카드 + 골드 보더 */
    background: var(--primary);
    border: 1px solid rgba(201,168,76,0.45);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 10px 0;
    z-index: 2000;
    color: var(--accent-light);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.noti-item {
    display: block;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-on-dark); /* 네이비 드롭다운 위에서 읽히도록 */
    text-decoration: none;
    font-size: 13px;
}

.noti-item:hover {
    background: var(--primary-hover);
    color: var(--text-on-dark);
}

/* 투표 대기: 헤더 알림 드롭다운 맨 위 */
.noti-pending-item {
    display: block;
    min-height: 44px;
    margin: 4px 8px 8px;
    padding: 12px 12px 12px 14px;
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--bg-panel);
    color: var(--text-main);
    text-decoration: none;
}

.noti-pending-item:hover {
    background: var(--bg-soft);
    color: var(--text-main);
}

.noti-pending-title {
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.noti-pending-resolution {
    color: var(--text-main);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.noti-pending-deadline {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.4;
}

.noti-empty {
    padding: 10px 12px;
    color: var(--text-on-dark);
    font-size: 13px;
    opacity: .75;
}

.dot {
    color: #ef4444;
    margin-right: 6px;
}

/* ======================================================
   Django messages (로그인/로그아웃 등 토스트 알림)
   - 헤더 아래에 표시, 모바일에서 겹침 방지
====================================================== */
#django-messages {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    z-index: 3000;
    max-width: 360px;
    margin-left: auto;
    margin-right: 0;
    pointer-events: none;
}
#django-messages .alert {
    pointer-events: auto;
    background: #ffffff;
    color: var(--primary);
    border-radius: 10px;
    border: 1px solid rgba(201,168,76,0.35);
    box-shadow: var(--shadow-sm);
    font-size: 0.875rem;
    overflow-wrap: break-word;
    word-break: break-word;
    animation: django-toast-in 0.35s ease-out;
}
#django-messages .alert + .alert {
    margin-top: 8px;
}
@keyframes django-toast-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (min-width: 768px) {
    #django-messages {
        left: auto;
        right: 12px;
        max-width: 360px;
    }
}

/* ======================================================
   FOOTER (헤더와 동일 다크 톤 + 골드 악센트)
====================================================== */

.site-footer {
    background: var(--bg-deep) !important;
    color: rgba(240,237,230,.65) !important;
    border-top: 1px solid rgba(201,168,76,0.25);
    padding: 20px 0 18px;
    font-size: .8rem;
    position: relative;
    margin-top: auto; /* 콘텐츠가 짧을 때 푸터를 항상 화면 하단에 붙임 */
    flex-shrink: 0;
}
/* 헤더 border-bottom과 동일: 1px 실선 + 2px 골드 그라디언트 */
.site-footer::before {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent) 20%,
        var(--accent-light) 50%,
        var(--accent) 80%,
        transparent 100%
    );
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.site-footer > .container {
    max-width: 1440px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: hidden;
}
.site-footer p,
.site-footer .d-inline-flex {
    overflow-wrap: break-word;
    word-break: break-word;
}
.site-footer p,
.site-footer li,
.site-footer strong,
.site-footer span {
    color: rgba(240,237,230,.65) !important;
}
.site-footer a {
    color: rgba(240,237,230,.65) !important;
    transition: color .2s;
}
.site-footer a:hover {
    color: var(--accent-light) !important;
}
.site-footer .btn-link {
    color: rgba(240,237,230,.65) !important;
    font-size: .78rem;
}
.site-footer .btn-link:hover {
    color: var(--accent-light) !important;
}
.site-footer .border-muted,
.site-footer .border-start {
    border-color: rgba(201,168,76,.25) !important;
}

/* ======================================================
   HEADER / FOOTER RESPONSIVE
====================================================== */

@media (max-width: 767.98px) {
    .header-inner {
        padding: 0 16px;
        height: 56px;
    }
    .header-left .nav-left {
        display: none !important;
    }
    .header-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        order: -1;
        color: var(--accent-light) !important;
    }
    .header-center {
        display: none;
    }
    .header-logo-img {
        height: 32px;
        max-height: 32px;
    }
    .header-logo-text {
        font-size: .88rem;
    }
    .header-dropdown {
        display: none !important;
    }
    .header-dropdown.is-open {
        display: block !important;
    }
    .nav-right {
        gap: 8px;
    }
    .noti-dropdown {
        position: fixed;
        top: 62px;
        right: 10px;
        left: 10px;
        width: auto;
    }
}
/* ======================================================
   마이페이지 하단 고정 탭 (로그인 사용자, 정해진 경로에서만)
   현재 탭은 청록 강조색. PC에서도 아래에 고정하고 가운데 정렬.
====================================================== */
.mypage-tabs-spacer {
    height: 80px;
}

.mypage-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    max-width: 640px;
    height: 64px;
    margin: 0 auto;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-sizing: border-box;
    overflow-x: hidden;
    /* iOS에서 고정 요소가 스크롤에 끌려가지 않도록 별도 레이어로 승격 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.mypage-tabs .mypage-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    text-decoration: none;
    color: #4b5563;
    box-sizing: border-box;
}

.mypage-tabs .mypage-menu-icon {
    position: relative;
    display: block;
    font-size: 20px;
    line-height: 1.1;
}

.mypage-tabs .mypage-menu-label {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

.mypage-tabs .mypage-tab.active {
    color: #0f766e;
    font-weight: 700;
}

.mypage-tabs .mypage-menu-dot {
    position: absolute;
    top: -2px;
    right: -6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
}

/* ======================================================
   마이페이지 PC 사이드 메뉴 (부트스트랩 격자 안에서만 쓰인다)
====================================================== */
.mypage-side-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    box-sizing: border-box;
}

.mypage-side-title {
    margin: 0 0 10px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #6b7280;
}

.mypage-side-card .list-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mypage-side-card .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 12px;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #374151;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}

.mypage-side-card .list-group-item:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.mypage-side-card .list-group-item.active {
    background: #f0fdfa;
    color: #0f766e;
    border-left-color: #0f766e;
    font-weight: 700;
}

.mypage-side-card .mypage-menu-icon {
    position: relative;
    display: inline-block;
    width: 24px;
    text-align: center;
    font-size: 20px;
    line-height: 1.1;
}

.mypage-side-card .mypage-menu-label {
    flex: 1 1 auto;
    white-space: nowrap;
}

.mypage-side-card .mypage-menu-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
}

/* 폰·태블릿: 격자 여백이 본문 여백에 더해지지 않게 칸 여백만 제거(각 화면 래퍼 여백은 그대로) */
@media (max-width: 991.98px) {
    .mypage-col {
        padding-left: 0;
        padding-right: 0;
    }
}

/* 격자 안에서는 각 화면 래퍼의 가로 여백을 빼서 이중 여백을 만들지 않는다 */
@media (min-width: 992px) {
    .mypage-col > .page-content-wide,
    .mypage-col > .page-content-wrap,
    .mypage-col .home-hero > .page-content-wrap,
    .mypage-col > .mypage-home,
    .mypage-col > .family-page {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ======================================================
   인물 패널: 입력이 필요한 버튼 강조 (전화번호 추가 / 졸년·졸일 입력)
   값이 비어 있어 입력이 필요할 때만 이 클래스를 붙인다.
====================================================== */
.person-panel-actions .person-panel-cta,
.person-panel-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #b45309 !important;
    border-radius: 8px;
    background: #f59e0b !important;
    color: #1f2937 !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.person-panel-actions .person-panel-cta:hover,
.person-panel-actions .person-panel-cta:focus,
.person-panel-cta:hover,
.person-panel-cta:focus {
    background: #d97706 !important;
    border-color: #92400e !important;
    color: #111827 !important;
}

/* 인물 패널: 수정 / 자식·형제·배우자 추가 (청록) */
.person-panel-actions .person-panel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #0f766e;
    border-radius: 8px;
    background: #ffffff;
    color: #0f766e;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.person-panel-actions .person-panel-action:hover,
.person-panel-actions .person-panel-action:focus {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

/* 패널 버튼 묶음 간격(페이지 인라인 스타일이 제거되는 내가족 화면 보완) */
.person-panel-actions .action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ======================================================
   관리자 화면(회원관리/문서함/가족 연락처): 표 위 도구 칸 묶음
   왼쪽 사이드 카드·하단 탭은 마이페이지와 같은 클래스를 그대로 쓴다.
   기존 .list-detail-aside 자리를 대신해 카드가 위에서부터 쌓인다.
   .manage-wrap은 container-fluid 대신 쓰는 래퍼다. main.css의
   `.site-main > .container-fluid { overflow-x: auto }`에 걸리면
   래퍼가 스크롤 컨테이너가 되어 안쪽 사이드 카드의 sticky가 깨진다.
===================================================== */
.manage-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.manage-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;
}

.manage-toolbar .list-detail-header {
    flex: 1 1 220px;
    max-width: 360px;
    min-width: 0;
    padding: 0.75rem;
    background: var(--list-detail-aside-bg);
    border: 1px solid var(--primary);
    border-radius: 8px;
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    .manage-toolbar .list-detail-header {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* 격자 안에서 각 화면 래퍼의 가로 여백이 이중으로 더해지지 않게(마이페이지와 같은 값) */
@media (max-width: 991.98px) {
    .manage-col {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    .manage-col > .page-content-wide {
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================================
   Person panel (shared overlay) - common sizing
   ========================================================= */
#person-panel {
  position: absolute;
  display: none;
  z-index: 9999;
  pointer-events: auto;
}

#person-panel.person-panel-center.person-panel-open {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  background: rgba(0,0,0,0.3);
}

@media (max-width: 767.98px) {
  #person-panel.person-panel-open {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    background: rgba(0,0,0,0.3);
  }
}

.person-panel {
  width: 360px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #111827;
  overflow: hidden;
}

#person-panel.person-panel-open .person-panel {
  max-height: 88vh;
  overflow-y: auto;
}

.person-panel-header {
  position: relative;
  padding: 14px 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.person-panel-header .hanja {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
}

.person-panel-header .panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}

.person-panel-header .panel-close:hover {
  background: #e5e7eb;
  color: #111827;
}

.person-panel-body {
  flex: 0 0 auto;
  padding: 12px 14px;
  overflow: visible;
  background: #ffffff;
  max-height: calc(88vh - 120px);
  overflow-y: auto;
}

.person-panel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.person-panel-table th {
  width: 90px;
  padding: 8px 8px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  font-weight: 500;
  color: #6b7280;
}

.person-panel-table td {
  padding: 8px 8px;
  word-break: break-word;
  color: #111827;
}

.person-panel-actions {
  flex: 0 0 auto;
  padding: 8px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.person-panel-actions button {
  font-size: 15px;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
}

.person-panel-actions button:hover {
  background: #f3f4f6;
}

.person-panel-actions button.danger {
  border-color: #ef4444;
  color: #b91c1c;
}

.person-panel-actions button.danger:hover {
  background: #fee2e2;
}

@media (max-width: 767.98px) {
  #person-panel.person-panel-open .person-panel {
    width: 100%;
    max-width: min(420px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
  }
}

/* =========================================================
   Person panel - linked account block (shared)
   ========================================================= */
.person-panel-linked-account {
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.person-panel-linked-account__row {
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.person-panel-linked-account__row:last-child {
  margin-bottom: 0;
}

.person-panel-linked-account__name {
  font-weight: 700;
  color: #111827;
}

.person-panel-linked-account__meta,
.person-panel-linked-account__date {
  font-size: inherit;
}

.person-panel-linked-account .badge {
  font-size: 13px;
}

/* =========================================================
   Person panel - actions block (shared)
   ========================================================= */
.person-panel-actions {
  padding: 12px 16px;
}

.person-panel-actions .action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 관리자 미연결 패널: 회원·후보 같은 모양의 카드 (핵심: 이름/생년월일/아버지) */
.pf-link-member-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  min-width: 0;
}
.pf-link-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.pf-link-row > * { word-break: keep-all; }
.pf-link-big {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.pf-link-father {
  font-size: 16px;
  line-height: 1.3;
}
.pf-link-contact {
  font-size: 14px;
  color: #6b7280;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.pf-link-label {
  font-size: 13px;
  color: #6b7280;
}
.pf-link-muted { color: #9ca3af; }
.pf-link-warn {
  font-size: 13px;
  color: #b45309;
  margin: 2px 0 8px;
}
.pf-link-candidates { margin-bottom: .75rem; }
.pf-link-candidates-title { margin-bottom: 6px; }
.pf-link-candidates .list-group {
  max-height: 240px;
  overflow-y: auto;
  border-radius: 10px;
}
.person-panel--link-account .list-group-item {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-link-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pf-link-chips .pf-link-father {
  font-size: 16px;
  word-break: keep-all;
}
.pf-chip {
  display: inline-block;
  font-size: 13px;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pf-chip--ok { background: #d1f4e0; color: #14603c; border-color: #b7e6cc; }
.pf-chip--match { background: #d1e7ff; color: #0b4ba0; border-color: #b6d8f8; }
.pf-chip--father { background: #d1e7ff; color: #0b4ba0; border-color: #b6d8f8; }
.pf-chip--muted { background: #e9ecef; color: #495057; border-color: #dee2e6; }
/* 생년월일 비교 칩: 노랑(같은 해·2년 이내) / 빨강(3년 이상) */
.pf-chip--warn { background: #fff3cd; color: #8a5a00; border-color: #f3dfa0; }
.pf-chip--danger { background: #fde2e1; color: #a12622; border-color: #f5c2c0; }
/* 선택(검정) 상태에서도 칩이 읽히게 */
.person-panel--link-account .list-group-item.active { background: #212529; border-color: #212529; color: #fff; }
.person-panel--link-account .list-group-item.active .pf-chip--ok { background: #14603c; color: #fff; border-color: rgba(255,255,255,.7); }
.person-panel--link-account .list-group-item.active .pf-chip--match,
.person-panel--link-account .list-group-item.active .pf-chip--father { background: #0b4ba0; color: #fff; border-color: rgba(255,255,255,.7); }
.person-panel--link-account .list-group-item.active .pf-chip--muted { background: #495057; color: #fff; border-color: rgba(255,255,255,.7); }
.pf-link-hr { margin: 10px 0; }
.pf-link-connect {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
}
.pf-link-card-gap { margin-top: 2px; }
/* (구 소셜 표 방식 삭제 — 5칸 표 대신 회원 카드) */
.pf-link-search { margin-top: .5rem; }
.pf-link-search #ap-results { max-height: 220px; overflow: auto; }

/* 연결 계정 패널: 소셜·족보 생년월일 비교 줄 (360px에서도 날짜가 끊기지 않게) */
.person-panel-linked-account__row--birth {
  align-items: flex-start;
  gap: 8px;
}
.person-panel-birth-compare__label {
  flex: 0 0 auto;
  font-weight: 700;
  color: #374151;
}
.person-panel-birth-compare {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.person-panel-birth-compare__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.person-panel-birth-compare__social,
.person-panel-birth-compare__genealogy {
  white-space: nowrap;
}
.person-panel-birth-compare__date {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.person-panel-birth-compare__sep {
  color: #9ca3af;
}
.person-panel-birth-compare__none {
  color: #9ca3af;
  font-weight: 400;
}

/* =========================================================
   소셜 가입 확인 화면: 약관 동의 상자
   ========================================================= */
.terms-box {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.terms-box > * + * {
  border-top: 1px solid #dee2e6;
}
.terms-box__all,
.terms-box__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px;
}
.terms-box__all {
  min-height: 56px;
}
.terms-box__check {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  margin: 0;
  border: 2px solid var(--primary);
  border-radius: 6px;
  background: #fff center / 18px 18px no-repeat;
  cursor: pointer;
}
.terms-box__check:checked {
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4.9'/%3E%3C/svg%3E");
}
.terms-box__check:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.terms-box__all-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
}
.terms-box__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  line-height: 1.35;
  color: var(--text-main);
  cursor: pointer;
}
.terms-box__req {
  color: #dc3545;
}
.terms-box__toggle {
  flex: 0 0 auto;
  height: 44px;
  min-width: 64px;
  padding: 0 12px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.terms-box__toggle:hover {
  background: #f8f9fa;
}
.terms-box__body {
  max-height: 260px;
  overflow-y: auto;
  padding: 12px 16px;
  background: #f8f9fa;
  font-size: 14px;
  line-height: 1.6;
}
.terms-box__body[hidden] {
  display: none;
}
.terms-box__body h5 {
  font-size: 15px;
  margin: 14px 0 6px;
}
.terms-box__body > :first-child {
  margin-top: 0;
}
.terms-box__item.is-invalid {
  background: #fff5f5;
  box-shadow: inset 3px 0 0 #dc3545;
}
.terms-box__item.is-invalid .terms-box__label {
  color: #a12622;
}