/* =========================================================
   components.css — 여러 페이지에서 재사용하는 부품
   클래스 규칙(BEM 간소화):
     .블록            예) .card, .btn, .pagination
     .블록__요소       예) .card__title   (블록 안의 부품)
     .블록--변형       예) .btn--submit   (같은 블록의 다른 모양)
     .is-상태         예) .is-active, .is-open (JS가 붙였다 뗌)

   목차
   1. 버튼 .btn            2. 패널(흰 박스) .panel
   3. 폼 .form             4. 사진 업로드 .upload-box
   5. 에디터 .editor       6. 모달 .modal / .mountain-option
   7. 안내 박스 .desc-box  8. 검색창 .search-bar
   9. 게시판 상단 .board-actions / .list-header
   10. 카드 .card-grid / .card   11. 태그·뱃지 .tag / .badge
   12. 페이지네이션 .pagination  13. 상세 하단 버튼 .post-actions
   14. 댓글 .comment-box
   ── 2단계(권한·공통 UI)에서 추가 ──
   15. 대화상자 .dialog (확인·알림·입력·로그인 안내)   16. 토스트 .toast
   17. 권한 안내 .auth-guard      18. 빈 상태·로딩·에러 .state-box
   19. 프로필 사진 .avatar        20. 알림 박스 .notice-box
   ========================================================= */


/* =========================================================
   1. 버튼 .btn
   .btn 은 공통 성질만, 모양은 변형 클래스(--)가 정합니다.
   예) <a class="btn btn--write">  <button class="btn btn--submit">
   ※ 지금은 게시판마다 버튼 모양이 조금씩 달라서 변형이 많습니다.
     디자인을 통일하면 변형 수를 줄일 수 있습니다(제안 목록 참고).
   ========================================================= */
.btn {
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* 검색 버튼 (어두운 회색) */
.btn--search { background-color: var(--color-dark); color: var(--color-text-inverse); border: none; padding: 10px 20px; border-radius: var(--radius-md); transition: background 0.3s; }
.btn--search:hover { background-color: var(--color-darker); }

/* 글쓰기 버튼 (초록, 살짝 떠오름) */
.btn--write { background-color: var(--color-primary); color: var(--color-text-inverse); padding: 10px 25px; border-radius: var(--radius-md); display: inline-flex; align-items: center; gap: 8px; transition: transform 0.2s, background 0.3s; }
.btn--write:hover { background-color: var(--color-primary-dark); transform: translateY(-2px); }

/* 폼 하단: 취소 / 등록 */
.btn--cancel { background-color: var(--color-gray-100); color: var(--color-text-sub); border: 1px solid var(--color-border-input); padding: 12px 30px; border-radius: var(--radius-md); font-size: 1rem; transition: background 0.2s; }
.btn--cancel:hover { background-color: var(--color-gray-200); }
.btn--submit { background-color: var(--color-primary); color: var(--color-text-inverse); border: none; padding: 12px 35px; border-radius: var(--radius-md); font-size: 1rem; transition: background 0.2s, transform 0.2s; }
.btn--submit:hover { background-color: var(--color-primary-dark); transform: translateY(-2px); }

/* 위험한 동작 확인 (빨강, 예: 삭제·탈퇴·초기화) */
.btn--danger { background-color: var(--color-danger); color: var(--color-text-inverse); border: none; padding: 12px 35px; border-radius: var(--radius-md); font-size: 1rem; transition: background 0.2s; }
.btn--danger:hover { background-color: #c62828; }

/* 입력칸 옆 보조 버튼 (예: 100대 명산 검색) */
.btn--picker { margin: 0; padding: 0 20px; white-space: nowrap; background-color: var(--color-dark); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); }

/* 상세페이지: 목록 / 수정 / 삭제 */
.btn--list, .btn--edit, .btn--delete { padding: 10px 25px; border-radius: var(--radius-md); font-size: 0.95rem; transition: background 0.2s; }
.btn--list { background: var(--color-dark); color: var(--color-text-inverse); border: none; }
.btn--list:hover { background: var(--color-darker); }
.btn--edit { background: var(--color-gray-100); color: var(--color-text); border: 1px solid var(--color-border-input); margin-right: 8px; }
.btn--edit:hover { background: var(--color-gray-200); }
.btn--delete { background: var(--color-surface); color: var(--color-danger); border: 1px solid var(--color-danger); }
.btn--delete:hover { background: var(--color-danger-bg); }

/* 댓글 등록 */
.btn--comment { background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-lg); padding: 0 25px; transition: background 0.2s; }
.btn--comment:hover { background: var(--color-primary-dark); }

/* 목록 안의 작은 선택 버튼 (모달 '선택') */
.btn--select { background: var(--color-primary); color: var(--color-text-inverse); border: none; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; }
.btn--select:hover { background: var(--color-primary-dark); }

/* 작은 크기 (자유게시판 상단) */
.btn--search-sm { background: var(--color-dark); color: var(--color-text-inverse); border: none; padding: 8px 15px; border-radius: var(--radius-sm); }
.btn--search-sm:hover { background: var(--color-text-sub); }
.btn--write-sm { background: var(--color-primary); color: var(--color-text-inverse); padding: 9px 20px; border-radius: var(--radius-sm); font-size: 0.95rem; display: inline-block; transition: background 0.2s; }
.btn--write-sm:hover { background: var(--color-primary-dark); }

/* 흰 바탕 + 테두리 버튼 (자유게시판 상세 하단) */
.btn--outline { background: var(--color-surface); border: 1px solid var(--color-border-input); color: var(--color-text); padding: 10px 25px; border-radius: var(--radius-md); transition: all 0.2s; }
.btn--outline:hover { background: var(--color-gray-100); border-color: #bbb; }
.btn--outline-info, .btn--outline-danger { background: var(--color-surface); border: 1px solid; padding: 10px 20px; border-radius: var(--radius-md); transition: all 0.2s; }
.btn--outline-info { color: #1e88e5; border-color: #1e88e5; }
.btn--outline-info:hover { background: #e3f2fd; }
.btn--outline-danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn--outline-danger:hover { background: var(--color-danger-bg); }

/* 서브헤더의 공유/인쇄 버튼 */
.btn--util {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-sub);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn--util:hover { background-color: var(--color-bg); border-color: #bbb; color: var(--color-text); }


/* =========================================================
   2. 패널 .panel — 흰색 둥근 박스 (글쓰기 폼, 상세 본문)
   ========================================================= */
.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-panel);
}
.panel--write { padding: 40px; }
.panel--detail { padding: 50px; }
.panel--flush { overflow: hidden; }  /* 안쪽 여백 없이, 내용이 둥근 모서리에 맞게 잘림 */


/* =========================================================
   3. 폼 .form
   ========================================================= */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
.form__group { margin-bottom: 25px; }
.form__label { display: block; font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.form__req { color: var(--color-danger); margin-left: 4px; }
.form__inline { display: flex; gap: 10px; }   /* 입력칸 + 버튼 가로 배치 */

.form__control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form__control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1); }
.form__control--clickable { background-color: var(--color-gray-50); cursor: pointer; } /* 읽기전용 + 클릭하면 팝업 */
.form__control--readonly { background-color: var(--color-gray-50); }                    /* 읽기전용 (회색) */
.form__group--narrow { max-width: 300px; }
.form__help { margin-top: 6px; font-size: 0.85rem; color: var(--color-text-faint); }

.form__actions { display: flex; justify-content: center; gap: 15px; margin-top: 40px; padding-top: 25px; border-top: 1px solid var(--color-border); }


/* =========================================================
   4. 사진 업로드 .upload-box
   ========================================================= */
.upload-box {
    border: 2px dashed var(--color-border-input);
    border-radius: var(--radius-lg);
    padding: 25px;
    text-align: center;
    background: #fdfdfd;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    position: relative;
}
.upload-box:hover { border-color: var(--color-primary); background-color: var(--color-primary-bg); }
.upload-box__text { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; }

.upload-preview { display: none; margin-top: 15px; text-align: center; }
.upload-preview.is-visible { display: block; }
.upload-preview__img { max-width: 320px; max-height: 180px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border-light); }


/* =========================================================
   5. 에디터 .editor (Quill 이 들어가는 칸)
   ※ quill.snow.css 를 이 파일보다 "먼저" 불러와야 아래 높이가 적용됩니다.
   ========================================================= */
.editor { height: 350px; font-size: 1rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.editor--tall { height: 400px; }


/* =========================================================
   6. 모달 .modal  (HTML은 js/components/mountain-modal.js 가 만듦)
   ========================================================= */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 9999;
    display: none; justify-content: center; align-items: center;
}
.modal.is-open { display: flex; }
.modal__dialog {
    background: var(--color-surface);
    width: 90%;
    max-width: 500px;
    height: 600px;       /* 결과가 적어도 항상 같은 높이 */
    max-height: 80vh;    /* 세로가 짧은 화면에서는 화면 높이의 80% */
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}
.modal__header { padding: 20px; background: var(--color-primary); color: var(--color-text-inverse); display: flex; justify-content: space-between; align-items: center; }
.modal__title { margin: 0; font-size: 1.2rem; font-weight: bold; }
.modal__close { background: none; border: none; color: var(--color-text-inverse); font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 0; }
.modal__search { padding: 15px; border-bottom: 1px solid var(--color-border); background: var(--color-gray-50); }
.modal__search-input { width: 100%; padding: 12px; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); font-size: 1rem; outline: none; }
.modal__search-input:focus { border-color: var(--color-primary); }
.modal__list { padding: 0; margin: 0; list-style: none; overflow-y: auto; flex-grow: 1; }
.modal__empty { padding: 30px; text-align: center; color: var(--color-text-faint); }

/* 모달 안의 산 한 줄 */
.mountain-option { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--color-border); transition: background 0.2s; }
.mountain-option:hover { background: var(--color-primary-bg); }
.mountain-option__info { display: flex; flex-direction: column; gap: 6px; }
.mountain-option__name { font-weight: 800; font-size: 1.1rem; color: var(--color-text); }
.mountain-option__desc { font-size: 0.85rem; color: var(--color-text-muted); }


/* =========================================================
   7. 안내 박스 .desc-box (게시판 맨 위 설명)
   ========================================================= */
.desc-box {
    background-color: var(--color-primary-bg);
    border-left: 5px solid var(--color-primary);
    padding: 25px 30px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin-bottom: 25px;
}
.desc-box__title { margin: 0 0 10px 0; font-size: 1.25rem; color: var(--color-primary); font-weight: 800; }
.desc-box__text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--color-text-sub); }
/* 자유게시판용: 테두리 4px, 네 모서리 둥글게, 제목 조금 작게 */
.desc-box--compact { padding: 25px; border-left-width: 4px; border-radius: var(--radius-lg); margin-bottom: 30px; }
.desc-box--compact .desc-box__title { font-size: 1.2rem; font-weight: 900; }


/* =========================================================
   8. 검색창 .search-bar
   ========================================================= */
.search-bar {
    background: var(--color-gray-50);
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.search-bar__select,
.search-bar__input { padding: 10px 15px; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); outline: none; font-size: 0.95rem; }
.search-bar__input { width: 300px; }


/* =========================================================
   9. 게시판 상단: 글쓰기 줄 / 총 건수 + 정렬 줄
   ========================================================= */
.board-actions { display: flex; justify-content: flex-end; margin-bottom: 30px; }

.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid var(--color-text); }
.list-header__count { font-size: 1.1rem; color: var(--color-text); }
.list-header__count strong { color: var(--color-primary); }
.list-header__sort { padding: 6px 12px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); font-size: 0.9rem; outline: none; }


/* =========================================================
   10. 카드 목록 .card-grid / .card (등산인증 게시판)
   ========================================================= */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; }
.card-grid__empty { grid-column: 1 / -1; text-align: center; padding: 60px; color: var(--color-text-faint); font-size: 1.1rem; }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    display: block;
    color: inherit;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1); }
.card__thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: var(--color-gray-100); overflow: hidden; }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.card:hover .card__img { transform: scale(1.05); }
.card__body { padding: 18px; }
.card__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;          /* 두 줄 넘으면 … 처리 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card__info { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 12px; }
.card__stats { display: flex; gap: 12px; font-size: 0.85rem; color: var(--color-text-faint); border-top: 1px solid var(--color-gray-100); padding-top: 12px; }
.card__stat { display: flex; align-items: center; gap: 4px; }


/* =========================================================
   11. 태그 .tag / 뱃지 .badge
   ========================================================= */
/* 산 이름 태그 (초록) */
.tag { display: inline-block; background: var(--color-primary-tint); color: var(--color-primary-hover); font-size: 0.75rem; font-weight: bold; padding: 4px 8px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.tag--done { background: #e3f2fd; color: #1565c0; margin-left: 4px; }   /* 등정 반영된 인증글 */
.tag--pin { background: var(--color-alert); color: #fff; margin-left: 6px; } /* 공지 */
.tag--lg { font-size: 0.9rem; font-weight: 800; padding: 6px 12px; border-radius: var(--radius-md); margin-bottom: 15px; }

/* NEW 뱃지 */
.badge { display: inline-block; color: var(--color-text-inverse); font-weight: bold; }
.badge--pin { background: var(--color-alert); }   /* 카드 사진 위 "📌 공지" (badge--corner 와 함께) */
.card--pinned { border: 2px solid var(--color-alert); }
.badge--corner { position: absolute; top: 10px; right: 10px; background: var(--color-danger); font-size: 0.75rem; padding: 4px 8px; border-radius: var(--radius-sm); z-index: 2; }  /* 카드 사진 오른쪽 위 "NEW" */
.badge--inline { background-color: var(--color-alert); font-size: 0.7rem; padding: 2px 6px; border-radius: var(--radius-sm); margin-left: 6px; vertical-align: middle; } /* 제목 옆 "N" */
.badge--round { background: var(--color-danger); font-size: 0.7rem; font-weight: normal; padding: 2px 6px; border-radius: 12px; margin-left: 6px; vertical-align: middle; } /* 자유게시판 둥근 "N" */


/* =========================================================
   12. 페이지네이션 .pagination (HTML은 board-list.js 가 만듦)
   ========================================================= */
.pagination { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; }
.pagination__link { display: block; padding: 8px 14px; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); color: var(--color-text); font-weight: 500; transition: background 0.2s, color 0.2s; }
.pagination__link:hover { background: var(--color-gray-100); }
.pagination__item.is-active .pagination__link { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }

/* 자유게시판용: 간격 좁게, hover 시 초록 테두리 */
.pagination--soft { align-items: center; margin: 40px 0 20px 0; gap: 5px; }
.pagination--soft .pagination__link { color: var(--color-text-sub); font-size: 0.95rem; font-weight: 400; transition: all 0.2s; }
.pagination--soft .pagination__link:hover { background-color: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary); }
.pagination--soft .pagination__item.is-active .pagination__link { background-color: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); font-weight: bold; }


/* =========================================================
   13. 상세페이지 하단 버튼 줄 .post-actions (목록 | 수정·삭제)
   ========================================================= */
.post-actions { display: flex; justify-content: space-between; margin-bottom: 50px; }


/* =========================================================
   14. 댓글 .comment-box
   ========================================================= */
.comment-box { background: var(--color-gray-50); border-radius: var(--radius-xl); padding: 30px; }
.comment-box__title { font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; color: var(--color-text-strong); }
.comment-box__count { color: var(--color-primary); }

.comment-form { display: flex; gap: 10px; margin-bottom: 30px; }
.comment-form__input { flex-grow: 1; padding: 15px; border: 1px solid var(--color-border-input); border-radius: var(--radius-lg); resize: none; height: 80px; font-size: 0.95rem; outline: none; }
.comment-form__input:focus { border-color: var(--color-primary); }

.comment-list { list-style: none; padding: 0; margin: 0; }
.comment { padding: 20px 0; border-bottom: 1px solid var(--color-gray-200); }
.comment:last-child { border-bottom: none; padding-bottom: 0; }
.comment__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.comment__meta { display: flex; align-items: center; gap: 10px; }
.comment__author { font-weight: 700; color: var(--color-text); }
.comment__date { font-size: 0.85rem; color: var(--color-text-faint); }
.comment__text { font-size: 0.95rem; color: #444; line-height: 1.5; }
.comment__delete { background: none; border: none; color: #aaa; font-size: 0.85rem; cursor: pointer; padding: 0; transition: color 0.2s; }
.comment__delete:hover { color: var(--color-danger); text-decoration: underline; }


/* =========================================================
   15. 대화상자 .dialog (HTML은 js/ui.js 가 만듦)
   확인·알림·입력·"로그인이 필요합니다"를 모두 이 모양으로 띄웁니다.
   ※ 6번 .modal 은 목록이 들어가는 큰 팝업(명산 선택)용, .dialog 는 짧은 안내용
   ========================================================= */
.dialog {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    padding: 20px;
    animation: dialogFade 0.15s ease-out;
}
@keyframes dialogFade { from { opacity: 0; } to { opacity: 1; } }
body.is-dialog-open { overflow: hidden; }

.dialog__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border-top: 5px solid var(--color-primary);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    padding: 30px 28px 24px;
}
.dialog__close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--color-text-faint); cursor: pointer; }
.dialog__close:hover { color: var(--color-text); }
.dialog__title { font-size: 1.25rem; font-weight: 800; color: var(--color-text-strong); margin-bottom: 12px; padding-right: 24px; }
.dialog__message { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-sub); }
.dialog__body { margin-top: 15px; }
.dialog__error { margin-top: 6px; font-size: 0.85rem; color: var(--color-danger); }
.dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.dialog__btn { padding: 10px 22px; font-size: 0.95rem; text-align: center; }


/* =========================================================
   16. 토스트 .toast (잠깐 떴다 사라지는 알림, js/ui.js 가 만듦)
   ========================================================= */
.toast-stack {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
.toast {
    background: #263238;
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s, transform 0.25s;
    text-align: center;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--success { background: var(--color-primary); }
.toast--error { background: var(--color-danger); }


/* =========================================================
   17. 권한 안내 .auth-guard (댓글창 자리에 대신 나오는 안내문)
   ========================================================= */
.auth-guard {
    margin-bottom: 30px;
    padding: 22px;
    border: 1px dashed var(--color-border-input);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.auth-guard__link { display: inline-block; margin-left: 8px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-text-inverse); font-weight: 700; font-size: 0.9rem; }
.auth-guard__link:hover { background: var(--color-primary-dark); }


/* =========================================================
   18. 빈 상태 · 로딩 · 에러 .state-box (MDS.ui.stateHtml() 이 만듦)
   ========================================================= */
.state-box { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; text-align: center; color: var(--color-text-faint); }
.state-box__icon { font-size: 2.5rem; }
.state-box__text { font-size: 1rem; line-height: 1.6; }
.state-box--error { color: var(--color-danger); }
.state-box__spinner { width: 32px; height: 32px; border: 3px solid var(--color-gray-200); border-top-color: var(--color-primary); border-radius: 50%; animation: stateSpin 0.8s linear infinite; }
@keyframes stateSpin { to { transform: rotate(360deg); } }


/* =========================================================
   19. 프로필 사진 .avatar (MDS.ui.avatarHtml() 이 만듦 — 사진이 없으면 이름 첫 글자)
   ========================================================= */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--color-gray-100); border: 1px solid var(--color-border); }
.avatar--sm { width: 32px; height: 32px; font-size: 0.85rem; }
.avatar--md { width: 44px; height: 44px; font-size: 1rem; }
.avatar--lg { width: 96px; height: 96px; font-size: 2rem; }
.avatar--initial { background: var(--color-primary-tint); color: var(--color-primary); font-weight: 800; }


/* =========================================================
   20. 알림 박스 .notice-box (폼 위·아래에 놓는 한 줄 안내)
   ========================================================= */
.notice-box { padding: 14px 16px; border-radius: var(--radius-md); font-size: 0.92rem; line-height: 1.5; background: var(--color-primary-bg); color: var(--color-text-sub); border: 1px solid var(--color-primary-tint); }
.notice-box--error { background: var(--color-danger-bg); color: #b71c1c; border-color: #ffcdd2; }
.notice-box--warn { background: #fff8e1; color: #5d4037; border-color: #ffe082; }


/* =========================================================
   ── 3단계(산행·등정대장·캘린더)에서 추가 ──
   21. 프로필 칩 .member-chip     22. 상태 꼬리표 .status-pill
   23. 탭(보기 전환) .tabs         24. 인원·진행률 막대 .meter
   25. 에디터 대체 입력칸 / 댓글 보충
   ========================================================= */

/* 21. 프로필 칩 (MDS.MemberChip.html 이 만듦) — 사진 + 이름 (+ 작은 직함) */
.member-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: 0.9rem;
    color: var(--color-text);
    max-width: 100%;
}
button.member-chip { cursor: pointer; transition: border-color 0.2s, background 0.2s; }
button.member-chip:hover { border-color: var(--color-primary); }
.member-chip.is-active { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary); font-weight: 700; }
.member-chip__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; text-align: left; }
.member-chip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.member-chip__sub { font-size: 0.75rem; color: var(--color-text-faint); font-weight: 400; white-space: nowrap; }
.member-chip__badge { display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-text-inverse); font-size: 0.68rem; font-weight: 700; vertical-align: 1px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* 22. 상태 꼬리표 (MDS.ClimbView.statusPill 이 만듦) */
.status-pill { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 800; color: var(--color-text-inverse); white-space: nowrap; }
.status-pill--open { background: var(--color-primary); }
.status-pill--hurry { background: #f57c00; }
.status-pill--closed { background: #757575; }
.status-pill--result { background: #6d4c41; }
.status-pill--done { background: #37474f; }
.status-pill--cancelled { background: var(--color-surface); color: var(--color-danger); border: 1px solid var(--color-danger); }

/* 23. 탭 (보기 전환: 산별/회원별, 달력/목록 …) */
.tabs { display: inline-flex; max-width: 100%; overflow-x: auto; gap: 4px; padding: 4px; background: var(--color-gray-100); border-radius: var(--radius-pill); }
.tabs__btn { border: none; background: none; padding: 9px 18px; border-radius: var(--radius-pill); font-size: 0.95rem; font-weight: 700; color: var(--color-text-sub); cursor: pointer; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.tabs__btn.is-active { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }

/* 24. 인원·진행률 막대 (MDS.ClimbView.meterHtml — 길이는 JS 가 넣음) */
.meter { width: 100%; height: 8px; background: var(--color-gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.meter__fill { height: 100%; width: 0; background: var(--color-primary); border-radius: var(--radius-sm); transition: width 0.5s ease-in-out; }
.meter--hurry .meter__fill { background: #f57c00; }
.meter--muted .meter__fill { background: #9e9e9e; }
.meter--lg { height: 12px; }

/* 25. 에디터를 못 불러왔을 때의 기본 입력칸 / 댓글 보충 */
.editor--fallback { border: 1px solid var(--color-border-input); border-radius: var(--radius-md); }
.editor__fallback { width: 100%; height: 100%; border: none; padding: 15px; font-size: 1rem; line-height: 1.6; resize: none; outline: none; border-radius: var(--radius-md); }
.comment--empty { color: var(--color-text-faint); text-align: center; padding: 30px 0; }
.comment__meta .avatar { width: 28px; height: 28px; font-size: 0.8rem; }


/* =========================================================
   ── 4단계(마이페이지·관리자)에서 추가 ──
   26. 왼쪽 메뉴 + 본문 틀 .side-layout / .side-nav    27. 숫자 카드 .stat-card
   28. 섹션 카드 .section-card                        29. 목록 줄 .data-list / .data-row
   30. 선택 삭제 줄 .select-bar                       31. 작은 버튼 .btn--sm
   ========================================================= */

/* 26. 왼쪽 메뉴 + 본문 (모바일: 메뉴가 위쪽 가로 탭으로) */
.side-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: start; }   /* minmax(0,…): 안의 가로 스크롤 목록이 화면을 넓히지 않게 */
.side-layout__main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.side-nav { min-width: 0; position: sticky; top: calc(var(--header-height) + 20px); background: var(--color-surface); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: 14px; box-shadow: var(--shadow-panel); }
.side-nav__title { font-size: 0.82rem; font-weight: 800; color: var(--color-text-faint); padding: 4px 10px 10px; }
.side-nav__list { display: flex; flex-direction: column; gap: 2px; }
.side-nav__link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-md); font-weight: 600; color: var(--color-text-sub); white-space: nowrap; transition: background 0.15s; }
.side-nav__link:hover { background: var(--color-gray-50); color: var(--color-primary); }
.side-nav__link.is-current { background: var(--color-primary); color: var(--color-text-inverse); }
.side-nav__badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 11px; background: var(--color-alert); color: #fff; font-size: 0.75rem; font-weight: 800; text-align: center; }

/* 27. 숫자 카드 (대시보드·요약) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--color-surface); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-panel); color: inherit; }
a.stat-card:hover { border-color: var(--color-primary); }
.stat-card__label { font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); }
.stat-card__value { font-size: 1.9rem; font-weight: 900; color: var(--color-text-strong); line-height: 1.1; }
.stat-card__value small { font-size: 0.95rem; font-weight: 600; color: var(--color-text-faint); }
.stat-card__sub { font-size: 0.8rem; color: var(--color-text-faint); }
.stat-card--alert { border-color: #ffcdd2; background: #fff8f8; }
.stat-card--alert .stat-card__value { color: var(--color-danger); }

/* 28. 섹션 카드 (제목 + 내용이 들어가는 흰 박스) */
.section-card { background: var(--color-surface); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-panel); padding: 24px; min-width: 0; }
.section-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.section-card__title { font-size: 1.15rem; font-weight: 800; color: var(--color-text-strong); }
.section-card__more { font-size: 0.88rem; font-weight: 700; color: var(--color-primary); }
.section-card__desc { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 14px; }

/* 29. 목록 줄 (내 글·회원·게시물 관리 등) */
.data-list { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.data-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); min-width: 0; }
.data-row:last-child { border-bottom: none; }
.data-row.is-muted { opacity: 0.6; }
.data-row__check { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.data-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.data-row__title { font-weight: 700; color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.data-row__title:hover { color: var(--color-primary); }
.data-row__meta { font-size: 0.82rem; color: var(--color-text-faint); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.data-row__actions { display: flex; gap: 6px; flex-shrink: 0; }
.data-row__tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-gray-100); color: var(--color-text-sub); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.data-row__tag--cert { background: var(--color-primary-tint); color: var(--color-primary); }
.data-row__tag--free { background: #e3f2fd; color: #1565c0; }
.data-row__tag--climb { background: #fff3e0; color: #e65100; }
.data-row__tag--pin { background: var(--color-alert); color: #fff; }

/* 30. 선택 삭제 줄 (전체 선택 + 선택 삭제 버튼) */
.select-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.9rem; }
.select-bar__all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }

/* 31. 작은 버튼 (목록 줄 안) — 색은 기존 변형과 함께: class="btn btn--sm btn--delete" */
.btn--sm { padding: 6px 12px; font-size: 0.82rem; border-radius: var(--radius-sm); white-space: nowrap; }
.btn--ghost { background: var(--color-surface); color: var(--color-text-sub); border: 1px solid var(--color-border-input); }
.btn--ghost:hover { background: var(--color-gray-100); }
.btn--primary-sm { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); }
.btn--primary-sm:hover { background: var(--color-primary-dark); }


/* =========================================================
   반응형
   ========================================================= */
@media screen and (max-width: 1024px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
    .panel--write { padding: 25px 15px; }
    .panel--detail { padding: 20px; }

    .form__row { grid-template-columns: 1fr; }

    .desc-box { padding: 20px; }
    .desc-box--compact { padding: 15px; }

    .search-bar { flex-direction: column; padding: 16px; }
    .search-bar__select, .search-bar__input, .search-bar .btn { width: 100%; }

    .card-grid { grid-template-columns: 1fr; gap: 16px; }

    .post-actions { flex-direction: column-reverse; gap: 15px; }
    .post-actions__group { display: flex; flex-direction: column; gap: 8px; }
    .post-actions .btn--edit, .post-actions .btn--delete { margin: 0; text-align: center; }
    .post-actions .btn--list { text-align: center; }

    .comment-form { flex-direction: column; }
    .btn--comment { padding: 15px; }

    /* 대화상자: 버튼을 꽉 차게 (엄지로 누르기 쉽게) */
    .dialog { align-items: flex-end; padding: 0; }
    .dialog__box { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 26px 20px 20px; }
    .dialog__actions { flex-direction: row; }
    .dialog__btn { flex: 1; }
    .toast-stack { bottom: 80px; } /* 권한 스위처와 겹치지 않게 */

    /* 마이페이지·관리자: 왼쪽 메뉴 → 위쪽 가로 탭 */
    .side-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .side-nav { position: static; padding: 6px; border-radius: var(--radius-lg); }
    .side-nav__title { display: none; }
    .side-nav__list { flex-direction: row; overflow-x: auto; gap: 4px; }
    .side-nav__link { padding: 9px 12px; font-size: 0.9rem; }
    .side-nav__badge { margin-left: 4px; }
    .section-card { padding: 18px 14px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card__value { font-size: 1.5rem; }
    .data-row { flex-wrap: wrap; padding: 12px; }
    .data-row__actions { width: 100%; justify-content: flex-end; }
}