/*
 * 공개 화면(회원사 명단·조직도·에이전트) 전용 스타일 — 관리자 화면 스타일(km_admin.css)에 얹어서 쓴다.
 * 모든 규칙은 .km-public 아래로 한정해 사이트 레이아웃과 충돌하지 않게 한다.
 *
 * 색·테두리 값(--km-*)은 km_admin.css 의 .km-wrap 에도 같은 값이 있다. 여기서 한 번 더 정의하는 이유:
 * km_admin.css 가 어떤 이유로 불러와지지 않아도 카드의 테두리·글자색이 사라지지 않게 하기 위해서다.
 */
.km-public {
    --km-primary: #1565c0;
    --km-primary-dark: #0d4f9c;
    --km-primary-soft: #e8f1fb;
    --km-text: #1f2933;
    --km-muted: #5b6776;
    --km-line: #cbd5e1; /* 흰 배경 위에서도 카드 테두리가 또렷하게 (관리자 화면보다 진하게) */
    --km-surface: #ffffff;
    --km-bg: #f5f7fa;
    --km-radius: 10px;
}

.km-public {
    max-width: 1100px;
}

.km-public .km-head {
    margin-bottom: 14px;
}

/* 명단 안에서 바로 가기 */
.km-public .kp-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.km-public .kp-jump a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--km-line);
    border-radius: 999px;
    background: #fff;
    color: var(--km-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.km-public .kp-jump a:hover {
    border-color: var(--km-primary);
    color: var(--km-primary-dark);
}

.km-public .kp-jump small {
    margin-left: 4px;
    color: var(--km-muted);
    font-weight: 500;
}

/* 명단 안 검색 */
.km-public .kp-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 12px;
}

.km-public .kp-filter .km-input {
    flex: 1 1 260px;
    max-width: 420px;
}

.km-public .kp-count {
    color: var(--km-muted);
    font-size: 0.88rem;
}

.km-public .kp-section {
    margin-bottom: 28px;
    scroll-margin-top: 80px;
}

.km-public .kp-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
    margin: 0 0 10px;
}

.km-public .kp-section-head h2 {
    margin: 0;
    color: var(--km-text);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: none;
}

.km-public .kp-section-head span {
    color: var(--km-muted);
    font-size: 0.88rem;
}

/* 업무 구분 칩 */
.km-public .kp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.km-public .kp-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--km-primary-soft);
    color: var(--km-primary-dark);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.km-public .kp-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.km-public .kp-link {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--km-line);
    border-radius: 6px;
    background: #fff;
    color: var(--km-primary-dark);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.km-public .kp-link:hover {
    border-color: var(--km-primary);
    background: var(--km-primary-soft);
}

.km-public .km-table td.kp-addr {
    min-width: 200px;
}

.km-public .kp-print-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

/* ---------------------------------------------------------------- 조직도 */
.km-public .kp-org-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0 0 18px;
}

.km-public .kp-person {
    width: 148px;
    padding: 14px 8px 12px;
    border: 1px solid var(--km-line);
    border-radius: var(--km-radius);
    background: var(--km-surface);
    text-align: center;
}

.km-public .kp-person.is-lead {
    border-color: var(--km-primary);
    background: var(--km-primary-soft);
}

.km-public .kp-role {
    display: block;
    margin: 0 0 8px;
    color: var(--km-primary-dark);
    font-size: 0.82rem;
    font-weight: 700;
}

.km-public .kp-photo {
    display: block;
    width: 84px;
    height: 108px;
    margin: 0 auto 8px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--km-bg);
}

.km-public .kp-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 108px;
    margin: 0 auto 8px;
    border: 1px dashed #c7cfdb;
    border-radius: 6px;
    background: var(--km-bg);
    color: #9aa5b4;
    font-size: 0.72rem;
}

.km-public .kp-name {
    display: block;
    color: var(--km-text);
    font-size: 1rem;
    font-weight: 700;
}

.km-public .kp-org {
    display: block;
    margin-top: 2px;
    color: var(--km-muted);
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.km-public .kp-advisors .kp-person {
    width: 128px;
}

.km-public .kp-sep {
    height: 1px;
    margin: 6px 0 20px;
    background: var(--km-line);
}

.km-public .kp-refer-photo {
    width: 54px;
    height: 70px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--km-bg);
}

@media (max-width: 575.98px) {
    .km-public .kp-person {
        width: calc(50% - 7px);
    }

    .km-public .kp-advisors .kp-person {
        width: calc(50% - 7px);
    }
}

/* ---------------------------------------------------------------- 인쇄 */
@media print {
    .km-public .kp-jump,
    .km-public .kp-filter,
    .km-public .kp-print-tools,
    .km-public .no-print {
        display: none !important;
    }

    .km-public.km-wrap {
        max-width: none;
        padding: 0;
        font-size: 11px;
    }

    .km-public .km-table th,
    .km-public .km-table td {
        padding: 4px 6px;
        font-size: 10.5px;
    }

    .km-public .km-tablebox {
        border-radius: 0;
    }

    .km-public .kp-section {
        break-inside: auto;
        margin-bottom: 14px;
    }

    .km-public .km-table tr {
        break-inside: avoid;
    }

    .km-public .kp-person,
    .km-public .kp-link {
        break-inside: avoid;
    }
}

/* ================================================================ 회원사 카드 (2026-10-08) */
.km-public [hidden] {
    display: none !important;
}

/* 이 화면 위쪽 배너에 '회원사' 제목이 이미 있어 제목 대신 작은 안내 */
.km-public .kp-intro {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-left: 4px solid var(--km-primary);
    border-radius: 0 var(--km-radius) var(--km-radius) 0;
    background: var(--km-primary-soft);
}

.km-public .kp-intro-title {
    margin: 0;
    color: var(--km-primary-dark);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
}

.km-public .kp-intro-sub {
    margin: 4px 0 0;
    color: var(--km-muted);
    font-size: 0.88rem;
}

.km-public .kp-toolbar {
    margin: 0 0 14px;
}

.km-public .kp-search .km-input {
    max-width: 480px;
}

.km-public .kp-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
}

.km-public .kp-cat {
    padding: 5px 13px;
    border: 1px solid var(--km-line);
    border-radius: 999px;
    background: #fff;
    color: var(--km-text);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.km-public .kp-cat small {
    margin-left: 3px;
    color: var(--km-muted);
    font-weight: 500;
}

.km-public .kp-cat:hover {
    border-color: var(--km-primary);
}

.km-public .kp-cat:focus-visible {
    outline: 3px solid rgba(21, 101, 192, .35);
    outline-offset: 1px;
}

.km-public .kp-cat.is-on {
    border-color: var(--km-primary);
    background: var(--km-primary);
    color: #fff;
}

.km-public .kp-cat.is-on small {
    color: rgba(255, 255, 255, .85);
}

.km-public .kp-toolbar .kp-count {
    min-height: 1.3em;
    margin: 8px 0 0;
}

.km-public .kp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.km-public .kp-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 14px;
    border: 1px solid var(--km-line);
    border-radius: 12px;
    background: var(--km-surface);
    transition: border-color .15s, box-shadow .15s;
}

.km-public .kp-card:hover {
    border-color: #b9cde8;
    box-shadow: 0 3px 12px rgba(21, 101, 192, .10);
}

.km-public .kp-card-name {
    margin: 0;
    color: var(--km-primary-dark);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-transform: none;
}

.km-public .kp-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: 0.9rem;
}

.km-public .kp-info > div {
    display: flex;
    gap: 10px;
}

.km-public .kp-info dt {
    flex: 0 0 2.4em;
    margin: 0;
    color: var(--km-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.km-public .kp-info dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--km-text);
    overflow-wrap: anywhere;
}

.km-public .kp-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}

.km-public .kp-none {
    padding: 36px 8px;
}

@media (max-width: 575.98px) {
    .km-public .kp-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .km-public .kp-intro {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .km-public .kp-intro-sub {
        display: none;
    }

    .km-public .kp-intro-title {
        font-size: 0.98rem;
    }
}

/* 개인회원·자문기구 카드: 회원사 카드보다 작게 */
.km-public .kp-grid-sm {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.km-public .kp-grid-sm .kp-card {
    gap: 6px;
    padding: 13px 14px 12px;
}

.km-public .kp-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.km-public .kp-card-head .km-badge {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .km-public .kp-grid-sm {
        grid-template-columns: 1fr;
    }
}

/* 카드를 흰 배경 위에서 분명하게: 진한 테두리 + 옅은 그림자 */
.km-public .kp-card,
.km-public .kp-person {
    border: 1px solid var(--km-line);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
}

.km-public .kp-card:hover {
    border-color: #8fb0dc;
    box-shadow: 0 4px 14px rgba(21, 101, 192, .14);
}

.km-public .kp-person.is-lead {
    border-color: var(--km-primary);
}

.km-public .km-tablebox {
    border: 1px solid var(--km-line);
}