/* =========================================================
   pages/mountains.css — 100대명산 등정대장 전용
   (탭 .tabs, 프로필 칩 .member-chip, 막대 .meter 는 components.css)
   ========================================================= */

/* 서브헤더 아래 본문 시작 여백 */
:root { --content-top: 50px; }

/* 이 페이지는 좌우 여백 없이 표를 넓게 씀 */
.content-wrap { padding: 0 0 20px; }

/* ---------- 보기 방식 / 편집 모드 ---------- */
.ledger-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.ledger-edit-btn { border: 1px solid #6d4c41; background: var(--color-surface); color: #6d4c41; padding: 9px 18px; border-radius: var(--radius-pill); font-weight: 700; cursor: pointer; }
.ledger-edit-btn:hover, .ledger-edit-btn.is-active { background: #6d4c41; color: #fff; }
.ledger-edit-notice { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.ledger-edit-notice__done { flex-shrink: 0; border: none; background: #5d4037; color: #fff; padding: 7px 14px; border-radius: var(--radius-pill); font-weight: 700; cursor: pointer; }

/* ---------- 검색 / 정렬 / 필터 ---------- */
.climb-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; padding: 15px 20px; background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); }
.climb-filter__search { padding: 9px 12px; width: 280px; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); outline: none; }
.climb-filter__search:focus, .climb-filter__sort:focus { border-color: var(--color-primary); }
.climb-filter__sort { padding: 9px 12px; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface); outline: none; }
.climb-filter__options { display: flex; gap: 15px; font-weight: 500; margin-left: auto; }
.climb-filter__option { cursor: pointer; white-space: nowrap; }

/* ---------- 검색 결과 수 / 총 등정 횟수 ---------- */
.climb-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.climb-summary__result { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.climb-summary__num { color: var(--color-primary); font-weight: 700; }

.total-badge { display: inline-flex; align-items: center; background-color: var(--color-primary); color: #fff; padding: 10px 20px; border-radius: var(--radius-pill); font-size: 1.05rem; font-weight: 700; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); gap: 15px; }
.total-badge__count { background-color: var(--color-primary-dark); padding: 6px 16px; border-radius: 30px; color: #ffd700; font-size: 1.15rem; font-weight: 800; letter-spacing: 1px; }

/* ---------- 산별 보기: 회원 필터 · 범례 ---------- */
.ledger-members { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ledger-members__label { font-weight: 700; color: var(--color-text-sub); white-space: nowrap; font-size: 0.9rem; }
.ledger-members__chips { flex: 1; }
.member-chip--all { padding: 8px 16px; font-weight: 700; cursor: pointer; }
.ledger-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; font-size: 0.82rem; color: var(--color-text-muted); }
.ledger-legend__hint { color: var(--color-text-faint); }

/* ---------- 산별 보기: 표 (PC) — 산 이름 열·회원 머리 고정 ---------- */
.table-scroll { width: 100%; max-height: 72vh; overflow: auto; border: 2px solid var(--color-text); background: var(--color-surface); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border-radius: var(--radius-sm); }

.mountain-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; text-align: center; white-space: nowrap; }
.mountain-table th, .mountain-table td { border-right: 1px solid var(--color-border-input); border-bottom: 1px solid var(--color-border-input); padding: 8px 10px; background: var(--color-surface); }
.mountain-table thead th { position: sticky; top: 0; z-index: 2; background-color: #eaedf1; color: var(--color-text); font-weight: 700; vertical-align: middle; border-bottom: 2px solid #999; }
.mountain-table__name-col { position: sticky; left: 0; z-index: 1; min-width: 120px; text-align: left; box-shadow: 2px 0 0 var(--color-text); }
.mountain-table thead .mountain-table__name-col { z-index: 3; }   /* 왼쪽 위 칸은 둘 다 고정 */
.mountain-table__name { font-weight: 700; color: var(--color-text-strong); }
.mountain-table .mountain-table__left { text-align: left; padding-left: 15px; }
.mountain-table .is-divider { border-right: 2px solid var(--color-text); }

.mountain-table__member { min-width: 70px; }
.mountain-table__role { display: block; font-size: 0.72rem; font-weight: normal; color: var(--color-text-muted); }
.mountain-table__count { display: inline-block; margin-top: 3px; min-width: 24px; padding: 1px 6px; border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 0.75rem; }
.mountain-table__climbers { font-weight: 800; color: var(--color-primary); }
.mountain-table__climbers.is-zero { color: var(--color-border-input); }
.mountain-table .is-focus { background: var(--color-primary-bg); }
.mountain-table thead .is-focus { background: #d1e7dd; }

/* 구분 글자색 */
.mountain-type--common { color: var(--color-text); }
.mountain-type--forest { color: #008800; font-weight: 600; }

/* 기록 표시 (출처별 색) */
.ox-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: none; font-size: 0.8rem; font-weight: 900; cursor: pointer; color: #fff; }
.ox-mark--event { background: var(--color-primary); }
.ox-mark--manual { background: #6d4c41; }
.ox-mark--cert { background: #1e88e5; }
.ox-mark:focus-visible { outline: 3px solid var(--color-accent); }
.ledger-legend .ox-mark { width: 20px; height: 20px; font-size: 0.7rem; cursor: default; }
.ox-empty { color: var(--color-border-input); }

/* 편집 모드 O/X 버튼 */
.ox-toggle { width: 38px; padding: 5px 0; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: #fff; color: var(--color-text-faint); font-weight: 800; cursor: pointer; }
.ox-toggle:hover { border-color: #6d4c41; }
.ox-toggle.is-on { background: var(--color-primary-tint); color: var(--color-primary-hover); border-color: #a5d6a7; }
.ox-toggle:disabled { opacity: 0.5; cursor: wait; }

/* 기록 설명창 (위치는 JS 가 넣음) */
.record-pop { position: fixed; z-index: 1500; width: 240px; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; }
.record-pop__close { position: absolute; top: 6px; right: 10px; border: none; background: none; font-size: 1.3rem; color: var(--color-text-faint); cursor: pointer; }
.record-pop__title { padding-right: 18px; color: var(--color-text-strong); }
.record-pop__line { color: var(--color-text-sub); }
.record-pop__link { margin-top: 4px; color: var(--color-primary); font-weight: 700; }

/* ---------- 산별 보기: 산 카드 (모바일) ---------- */
.mountain-cards { display: none; flex-direction: column; gap: 10px; }
.mountain-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.mountain-card.is-zero { background: var(--color-gray-50); }
.mountain-card__head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 8px; background: none; border: none; text-align: left; cursor: pointer; color: inherit; }
.mountain-card__head:disabled { cursor: default; }
.mountain-card__title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mountain-card__name { font-size: 1.05rem; color: var(--color-text-strong); }
.mountain-card__meta { font-size: 0.8rem; color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mountain-card__count { flex-shrink: 0; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 0.8rem; font-weight: 800; }
.mountain-card.is-zero .mountain-card__count { background: var(--color-border-input); }
.mountain-card__body { padding: 0 16px 14px; }
.mountain-card__avatars { display: flex; align-items: center; gap: 4px; }
.mountain-card__avatars .avatar { margin-right: -10px; border: 2px solid var(--color-surface); }
.mountain-card__more { margin-left: 12px; font-size: 0.8rem; font-weight: 800; color: var(--color-text-muted); }
.mountain-card__names { margin-left: 16px; font-size: 0.82rem; color: var(--color-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mountain-card__none { font-size: 0.85rem; color: var(--color-text-faint); }
.mountain-card__climber { border: none; background: none; padding: 0; cursor: pointer; }
.mountain-card__edit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mountain-card__edit-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }

/* ---------- 회원별 보기 ---------- */
.ledger-picker { margin-bottom: 20px; }
.ledger-profile { display: flex; align-items: center; gap: 20px; padding: 24px; margin-bottom: 25px; background: var(--color-surface); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-panel); }
.ledger-profile__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ledger-profile__name { font-size: 1.3rem; font-weight: 800; color: var(--color-text-strong); }
.ledger-profile__title { font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); margin-left: 4px; }
.ledger-profile__count { font-size: 1rem; color: var(--color-text-sub); display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ledger-profile__count strong { font-size: 2rem; color: var(--color-primary); }
.ledger-profile__percent { font-weight: 800; color: var(--color-primary); }
.ledger-profile__rank { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-text); font-size: 0.8rem; font-weight: 800; }

.ledger-member-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ledger-subtitle { font-size: 1.15rem; font-weight: 800; color: var(--color-text-strong); margin: 25px 0 12px; }
.ledger-member-bar .ledger-subtitle { margin: 0; }
.ledger-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; }

.ledger-region { margin-bottom: 18px; }
.ledger-region__title { font-size: 0.95rem; font-weight: 800; color: var(--color-primary); margin-bottom: 8px; }
.ledger-region__count { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 10px; background: var(--color-gray-100); color: var(--color-text-sub); font-size: 0.78rem; text-align: center; }
.ledger-region--muted .ledger-region__title { color: var(--color-text-faint); }
.ledger-list { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.ledger-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--color-border); }
.ledger-item:last-child { border-bottom: none; }
.ledger-item__name { font-weight: 700; }
.ledger-item__name small { font-weight: 400; color: var(--color-text-faint); margin-left: 4px; }
.ledger-item__date { font-size: 0.85rem; color: var(--color-text-muted); }
.ledger-item__link { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-item__src { font-size: 0.85rem; color: var(--color-text-faint); }
.ledger-list--chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-style: dashed; }
.ledger-chip { padding: 5px 10px; border-radius: var(--radius-pill); background: var(--color-gray-100); color: var(--color-text-muted); font-size: 0.85rem; }
.ledger-empty { color: var(--color-text-faint); }

/* ---------- 모바일 ---------- */
@media screen and (max-width: 768px) {
    :root { --content-top: 25px; }
    .content-wrap { padding: 0 4px 20px; }

    .ledger-top { flex-wrap: wrap; }
    .ledger-top .tabs { flex: 1; }
    .ledger-top .tabs__btn { flex: 1; padding: 9px 10px; }
    .ledger-edit-notice { flex-direction: column; align-items: stretch; }

    .climb-filter { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
    .climb-filter__search { width: 100%; }
    .climb-filter__options { margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .climb-filter__option { font-size: 0.9rem; }

    .climb-summary { flex-direction: column; align-items: flex-start; gap: 12px; }
    .total-badge { width: 100%; justify-content: space-between; }

    /* 회원 필터: 가로로 밀어서 보기 */
    .ledger-members { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ledger-members__chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 6px; }
    .ledger-members__chips .member-chip { flex-shrink: 0; }

    /* 표 대신 카드 */
    .table-scroll { display: none; }
    .mountain-cards { display: flex; }

    .ledger-picker { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
    .ledger-picker .member-chip { flex-shrink: 0; }
    .ledger-profile { padding: 18px; gap: 14px; }
    .ledger-profile .avatar--lg { width: 64px; height: 64px; }
    .ledger-item { grid-template-columns: 1fr auto; gap: 4px 10px; }
    .ledger-item__link, .ledger-item__src { grid-column: 1 / -1; max-width: none; }
}