/* ===== 종친햅 페이지 통합 스타일 =====
   (로그인/회원가입/관리자 로그인/대시보드 등 공용)
   재사용 클래스 위주. 많아지면 카테고리별 분리.
*/

/* ============== 공통: 비밀번호 검증 피드백 (실시간) ============== */
.pw-feedback {
    font-size: .9rem;
    margin-top: 4px;
    min-height: 1.3em;
    transition: color .15s;
    line-height: 1.4;
}
.pw-feedback.muted { color: #888; }
.pw-feedback.success { color: var(--bs-success); }
.pw-feedback.error { color: var(--bs-danger); }

/* ============== 공통: 비밀번호 보기 토글 (input 안쪽 우측, 구글 스타일) ============== */
.pw-toggle { position: relative; }
.pw-toggle .form-control { padding-right: 48px; }
.pw-toggle-btn {
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 4;
    transition: background .15s, color .15s;
}
.pw-toggle-btn i { font-size: 18px; }
.pw-toggle-btn:hover { background: rgba(0,0,0,0.06); color: #555; }
.pw-toggle-btn:focus { outline: none; }

/* ============== 공통: 시골집 무드 배경 ============== */
.bg-village-warm {
    background: linear-gradient(180deg, #F5E6D3 0%, #ECD9BC 45%, #C9A876 100%) !important;
}

/* page-login / page-admin-login 공통 */
body.page-login,
body.page-admin-login {
    background: linear-gradient(180deg, #F5E6D3 0%, #ECD9BC 45%, #C9A876 100%) !important;
}
@media (min-width: 768px) {
    body.page-login:not(.is-admin) {
        background: linear-gradient(180deg, #F5E6D3 0%, #ECD9BC 45%, #C9A876 100%) !important;
    }
    body.page-login:not(.is-admin) .content {
        background: transparent !important;
        box-shadow: 0 0 60px rgba(0,0,0,0.08);
    }
}
body.is-admin.page-admin-login .content,
body.is-admin.page-mng .content {
    max-width: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding-top: 0 !important;
    box-shadow: none !important;
}

/* ============== 공통: 한자 워터마크 ============== */
.kanji-watermark {
    position: absolute;
    font-size: 220px;
    color: rgba(13, 27, 42, 0.06);
    font-family: 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ============== 공통: 시골집 히어로 (한옥 마크 + 타이틀 + 슬로건) ============== */
.village-hero { text-align: center; padding: 48px 0 18px; position: relative; z-index: 1; }
.village-hero-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #fff;
    font-size: 38px;
    font-weight: 900;
    font-family: 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
    box-shadow: 0 6px 16px rgba(200, 150, 62, 0.35);
    margin-bottom: 14px;
}
.village-hero-title { font-size: 1.75rem; font-weight: 800; color: var(--navy); letter-spacing: -0.5px; }
.village-hero-sub   { font-size: 1.05rem; color: #6B5640; margin-top: 6px; letter-spacing: 1px; }
.village-hero-badge {
    display: inline-block; margin-top: 10px; padding: 4px 12px;
    border-radius: 999px; background: rgba(13, 27, 42, 0.08);
    color: var(--navy); font-size: .9rem; font-weight: 600;
}
.village-hero-badge.danger { background: rgba(198, 40, 40, 0.12); color: var(--bs-danger); }
.village-hero-badge.gold   { background: rgba(200, 150, 62, 0.16); color: #8a6520; }

/* ============== 공통: 시골집 카드 (입력 폼 컨테이너) ============== */
.village-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(83, 60, 26, 0.18);
    padding: 26px 22px 22px;
    margin-top: 6px;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
}
.village-card.wide { max-width: 560px; }
@media (min-width: 992px) {
    .village-card        { max-width: 520px; padding: 32px 28px 24px; }
    .village-card.wide   { max-width: 640px; padding: 36px 32px 28px; }
}

/* ============== 공통: 페이지 래퍼 (시골집 톤) ============== */
.village-wrap {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.village-wrap .kanji-watermark { top: 40px; right: -30px; }
@media (min-width: 992px) {
    .village-wrap .kanji-watermark { font-size: 320px; right: 12%; top: 60px; }
}

/* ============== 공통: 한옥 실루엣 SVG 컨테이너 ============== */
.village-silhouette {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 0;
    pointer-events: none;
    width: 100%;
}
.village-silhouette svg { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
    body.page-login:not(.is-admin) .village-silhouette {
        left: 50%; transform: translateX(-50%); max-width: 480px;
    }
}

/* ============== 공통: 하단 링크 (한옥 SVG와 겹쳐도 가독) ============== */
.village-bottom {
    text-align: center;
    margin: 18px auto 24px;
    position: relative;
    z-index: 2;
    font-size: 1rem;
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, 0.94);
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(83, 60, 26, 0.12);
    color: #4a3a25;
}
.village-bottom .text-muted { color: #6B5640 !important; }
.village-bottom a, .village-bottom button.btn-link {
    color: var(--navy); font-weight: 700; padding: 0;
}
@media (min-width: 992px) {
    .village-bottom { max-width: 520px; }
}

/* ============== 공통: 진행 인디케이터 ============== */
.flow-progress { margin: -6px 0 18px; }
.flow-progress .progress { height: 6px; background: #ECDDC4; }
.flow-progress .progress-bar { background-color: var(--bs-primary); transition: width .3s; }
.flow-progress-label {
    font-size: .95rem; color: #6B5640;
    margin-top: 6px; text-align: center; font-weight: 600;
}

/* 등록 흐름 카드 토글 */
.flow-view { display: none; }
.flow-view.active { display: block; }

/* 종친회 코드 입력 박스 */
.code-input-box {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 6px;
    height: 76px;
    font-family: 'Menlo', 'Consolas', monospace !important;
}

/* 종친회 확인 카드 (가입 흐름 step2 헤더) */
.clan-confirm {
    background: linear-gradient(135deg, var(--navy), var(--bs-secondary));
    color: #fff; padding: 18px;
    border-radius: 14px; margin-bottom: 16px; text-align: center;
}
.clan-confirm-name   { font-size: 1.25rem; font-weight: 700; }
.clan-confirm-origin { font-size: .95rem; opacity: .85; margin-top: 4px; }
.clan-confirm-check  { font-size: .9rem; color: var(--gold-light); margin-top: 6px; }

/* 카드 안 타이틀/서브 */
.flow-card-title { font-size: 1.4rem; font-weight: 700; color: var(--navy); margin: 4px 0 4px; }
.flow-card-sub   { font-size: 1rem; color: #666; margin-bottom: 16px; }

/* 부친 검색 결과 */
.father-list { max-height: 200px; overflow-y: auto; }

/* ============== 회원가입 (register.php 자체 페이지) ============== */
.reg-progress { padding: 14px 20px 0; }
.reg-progress .progress { height: 6px; background: #E8E8E8; }
.reg-progress .progress-bar { background-color: var(--bs-primary); transition: width .3s; }
.reg-progress-label { font-size: .95rem; color: #666; margin-top: 6px; text-align: center; }
.reg-step { display: none; padding: 8px 20px 32px; }
.reg-step.active { display: block; }
.reg-title { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin: 12px 0 6px; }
.reg-sub   { color: #666; font-size: 1rem; margin-bottom: 18px; }
.code-input {
    text-align: center; font-size: 2rem; font-weight: 700; letter-spacing: 6px;
    height: 76px; font-family: 'Menlo', 'Consolas', monospace !important;
}

/* ============== 관리자 대시보드 (/mng/) ============== */
body.page-mng { background: #F5F2EC !important; }

.mng-shell { display: flex; min-height: 100vh; }

.mng-sidebar {
    width: 240px;
    background: linear-gradient(180deg, var(--navy), var(--bs-secondary));
    color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.mng-sidebar-brand {
    padding: 20px 18px 16px;
    font-size: 1.25rem;
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
}
.mng-sidebar-brand-mark {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}
.mng-sidebar-clan { padding: 14px 18px; font-size: .95rem; opacity: .85; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mng-sidebar-clan strong { color: var(--gold-light); display: block; font-size: 1.05rem; margin-bottom: 2px; }

.mng-nav { flex: 1; padding: 10px 0; }
.mng-nav-section { padding: 12px 18px 6px; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }
.mng-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mng-nav-link:hover, .mng-nav-link.active {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.mng-nav-link i { font-size: 18px; width: 22px; text-align: center; }

.mng-sidebar-foot {
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: .9rem;
}
.mng-sidebar-user { color: rgba(255,255,255,0.7); margin-bottom: 6px; }
.mng-sidebar-logout { color: var(--gold-light); cursor: pointer; }
.mng-sidebar-logout:hover { color: #fff; }

.mng-main { flex: 1; min-width: 0; padding: 24px 28px 48px; }

.mng-page-title { font-size: 1.6rem; font-weight: 800; color: var(--navy); margin: 0 0 4px; }
.mng-page-sub { font-size: 1rem; color: #777; margin-bottom: 22px; }

.mng-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.mng-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 4px solid var(--bs-primary);
}
.mng-stat-card.gold    { border-left-color: var(--gold); }
.mng-stat-card.success { border-left-color: var(--bs-success); }
.mng-stat-card.danger  { border-left-color: var(--bs-danger); }
.mng-stat-label { font-size: .9rem; color: #888; margin-bottom: 6px; }
.mng-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--navy); }

.mng-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.mng-quick-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mng-quick-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); color: inherit; }
.mng-quick-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(13, 27, 42, 0.06);
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.mng-quick-icon.gold { background: rgba(200, 150, 62, 0.12); color: var(--gold); }
.mng-quick-title { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.mng-quick-desc  { font-size: .9rem; color: #777; }

.mng-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}
.mng-card-title { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: 12px; }

.mng-mobile-toggle {
    display: none;
    background: none; border: none;
    color: #fff;
    font-size: 24px;
    padding: 14px 18px;
}

@media (max-width: 768px) {
    .mng-shell { flex-direction: column; }
    .mng-sidebar {
        width: 100%; height: auto; position: relative;
        flex-direction: row; align-items: center; padding: 0;
    }
    .mng-sidebar-brand { border-bottom: none; flex: 1; padding: 14px; font-size: 1.05rem; }
    .mng-sidebar-clan, .mng-sidebar-foot { display: none; }
    .mng-nav { display: none; }
    .mng-sidebar.is-open { flex-direction: column; }
    .mng-sidebar.is-open .mng-nav,
    .mng-sidebar.is-open .mng-sidebar-clan,
    .mng-sidebar.is-open .mng-sidebar-foot { display: block; }
    .mng-main { padding: 16px 14px 40px; }
    .mng-stats { grid-template-columns: repeat(2, 1fr); }
    .mng-quick { grid-template-columns: 1fr; }
    .mng-mobile-toggle { display: inline-flex !important; }
}

/* 종친회 개설 폼 추가 섹션 */
.admin-form-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid #ECDDC4; }
.admin-form-section-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }

/* 가입 코드 강조 출력 */
.code-display {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 6px;
    color: var(--navy);
    font-family: 'Menlo', 'Consolas', monospace;
}