/* =========================================================
   layout.css — 모든 페이지 공통 "틀"
   헤더(GNB), 프로필 메뉴, 상태 배너, 푸터, 서브페이지 상단(브레드크럼·제목), 본문 컨테이너, 인쇄, 반응형
   (헤더·푸터·서브헤더 HTML은 js/common.js 가 만들어 넣습니다)
   ========================================================= */

/* ---------- 헤더 ---------- */
.site-header {
    background-color: var(--color-surface);
    height: var(--header-height);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}
.site-header__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}
.site-header__logo img { height: 60px; width: 60px; object-fit: cover; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
.site-header__right { display: flex; align-items: center; gap: 20px; }

/* ---------- GNB (메인 메뉴) ---------- */
.gnb { display: flex; flex: 1; justify-content: center; }
.gnb__list { display: flex; gap: 60px; }
.gnb__item { position: relative; padding: 30px 0; }
.gnb__link { font-size: 1.1rem; font-weight: 600; transition: color 0.3s; }
.gnb__item:hover > .gnb__link { color: var(--color-primary); }

/* 지금 보고 있는 메뉴 강조 (D6) */
.gnb__item.is-current > .gnb__link { color: var(--color-primary); box-shadow: inset 0 -3px 0 var(--color-primary); padding-bottom: 6px; }
/* 관리자 메뉴 (관리자에게만 보임) */
.gnb__item--admin > .gnb__link { color: #6d4c41; }
.gnb__item--admin > .gnb__link::before { content: '🛠️ '; }

/* 2차 메뉴 */
.gnb__sub {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    width: 220px;
    text-align: center;
    overflow: hidden;
}
.gnb__item:hover .gnb__sub { display: block; }
.gnb__sub-link { display: block; padding: 15px; font-size: 0.95rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.gnb__sub-link:hover { background-color: var(--color-primary); color: var(--color-text-inverse); }
.gnb__sub-link.is-current { color: var(--color-primary); font-weight: 700; background-color: var(--color-primary-bg); }
.gnb__sub-link.is-current:hover { color: var(--color-text-inverse); background-color: var(--color-primary); }

/* ---------- 헤더 오른쪽: 회원가입 / 로그인 (비회원) ---------- */
.header-auth { display: flex; gap: 8px; align-items: center; }
.header-auth__signup { background-color: var(--color-primary); color: var(--color-text-inverse); padding: 10px 20px; border-radius: 20px; font-weight: 600; transition: 0.3s; white-space: nowrap; }
.header-auth__signup:hover { background-color: var(--color-primary-hover); }
.header-auth__login {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 8px 15px;
    border-radius: var(--radius-pill);
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ---------- 헤더 오른쪽: 프로필 드롭다운 (회원·관리자) ---------- */
.user-menu { position: relative; }
.user-menu__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-pill);
    padding: 4px 12px 4px 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.user-menu__toggle:hover,
.user-menu.is-open .user-menu__toggle { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1); }
.user-menu__arrow { font-size: 0.75rem; color: var(--color-text-faint); transition: transform 0.2s; }
.user-menu.is-open .user-menu__arrow { transform: rotate(180deg); }

.user-menu__panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 1100;
}
.user-menu.is-open .user-menu__panel { display: block; }

.user-menu__profile { padding: 16px; background: var(--color-primary-bg); border-bottom: 1px solid var(--color-border); }
.user-menu__profile-name { font-size: 1rem; color: var(--color-text-strong); }
.user-menu__profile-title { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--color-text-muted); }
.user-menu__tag { display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-text); font-size: 0.7rem; font-weight: 700; vertical-align: middle; }

.user-menu__link {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font-size: 0.95rem;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text);
}
.user-menu__link:last-child { border-bottom: none; }
.user-menu__link:hover { background: var(--color-gray-50); color: var(--color-primary); }
.user-menu__logout { color: var(--color-text-muted); }

/* ---------- 승인대기 · 정지 안내 배너 (common.js 가 <main> 맨 위에 넣음) ---------- */
.status-banner { background: #fff8e1; border-bottom: 1px solid #ffe082; color: #5d4037; font-size: 0.95rem; }
.status-banner--suspended { background: var(--color-danger-bg); border-bottom-color: #ffcdd2; color: #b71c1c; }
.status-banner__inner { max-width: var(--container-width); margin: 0 auto; padding: 12px 24px; line-height: 1.5; }
/* 메인 페이지처럼 .sub-main 이 없을 때: 배너가 헤더 아래 여백을 대신 가짐 */
main:not(.sub-main) > .status-banner { margin-top: var(--header-height); }
main:not(.sub-main) > .status-banner + * { margin-top: 0; }

/* ---------- 권한 확인이 필요한 페이지: 확인 전에는 본문을 숨김 (깜빡임 방지) ---------- */
body[data-auth-page] main { visibility: hidden; }
body[data-auth-page].is-auth-checked main { visibility: visible; }

.hamburger { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 24px; flex-direction: column; justify-content: space-between; }
.hamburger__line { display: block; width: 100%; height: 3px; background-color: var(--color-text); border-radius: 2px; transition: 0.3s; }

/* ---------- 푸터 ---------- */
.site-footer { background-color: #222; color: #ccc; padding: 40px 5%; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; margin-top: auto; width: 100%; }
.site-footer__logo img { height: 50px; width: 50px; border-radius: 50%; object-fit: cover; }
.pwa-install { background-color: var(--color-primary); color: var(--color-text-inverse); border: none; padding: 12px 24px; border-radius: 30px; font-size: 1rem; font-weight: bold; cursor: pointer; display: none; margin: 20px auto; }
.pwa-install.is-visible { display: block; }

/* ---------- 서브페이지 공통 틀 ----------
   <main class="sub-main">
     <div id="sub-header"></div>        ← 브레드크럼 + 제목 (common.js가 채움)
     <section class="sub-content">…</section>
   </main>
*/
.sub-main {
    margin-top: var(--header-height); /* 고정 헤더 높이만큼 띄움 */
}

.sub-header {
    border-bottom: 1px solid #e0e0e0;
    background-color: var(--color-surface);
    padding: 20px 24px;
}
.sub-header__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.sub-header__title-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sub-header__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
}
.sub-header__utils {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 브레드크럼 (홈 > 커뮤니티 > 등산인증 게시판) */
.breadcrumb {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.breadcrumb__link { transition: color 0.3s; }
.breadcrumb__link:hover { color: var(--color-primary); }
.breadcrumb__current { color: var(--color-text); font-weight: 600; }

/* 본문 영역: 위쪽 여백은 페이지마다 --content-top 으로 조절 */
.sub-content {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--content-top) 24px 80px;
    width: 100%;
    background-color: transparent;
}

/* 본문 안쪽 감싸개 (게시판·글쓰기·상세 공통) */
.content-wrap {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px 20px;
}

/* ---------- 인쇄할 때 숨길 영역 ---------- */
@media print {
    .site-header, .site-footer, .breadcrumb, .sub-header__utils, .gnb, .hero, .status-banner {
        display: none !important; /* 인쇄 전용 규칙이라 예외적으로 사용 */
    }
    .sub-main { margin-top: 0; }
    .sub-header { border-bottom: none; padding: 0; }
    body { background-color: #fff; color: #000; }
}

/* ---------- 중간 화면 (관리자 메뉴까지 5개가 들어가도 한 줄에) ---------- */
@media screen and (max-width: 1200px) {
    .gnb__list { gap: 32px; }
}

/* ---------- 모바일 (768px 이하) ---------- */
@media screen and (max-width: 768px) {
    .site-header__inner { padding: 0 16px; }
    .site-header__right { gap: 12px; }

    .gnb { display: none; position: fixed; top: var(--header-height); left: 0; width: 100%; max-height: calc(100vh - var(--header-height)); overflow-y: auto; background: var(--color-surface); flex-direction: column; border-top: 1px solid var(--color-border); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); }
    .gnb.is-open { display: block; }
    .gnb__list { flex-direction: column; gap: 0; }
    .gnb__item { padding: 0; border-bottom: 1px solid var(--color-border); }
    .gnb__link { display: block; padding: 20px 5%; }
    .gnb__item.is-current > .gnb__link { box-shadow: inset 4px 0 0 var(--color-primary); padding-bottom: 20px; }
    .gnb__sub { position: relative; top: 0; left: 0; transform: none; width: 100%; box-shadow: none; background: var(--color-bg); display: block; }
    .gnb__sub-link { padding: 12px 10%; border-bottom: none; }

    /* 비회원 버튼은 작게, 회원은 사진만 */
    .header-auth__signup { padding: 8px 12px; font-size: 0.85rem; }
    .header-auth__login { padding: 7px 10px; font-size: 0.85rem; }
    .user-menu__toggle { padding: 3px; }
    .user-menu__name, .user-menu__arrow { display: none; }
    .user-menu__panel { position: fixed; top: var(--header-height); right: 8px; left: auto; }

    .status-banner__inner { padding: 10px 16px; font-size: 0.88rem; }

    .hamburger { display: flex; }
    .hamburger.is-active .hamburger__line:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
    .hamburger.is-active .hamburger__line:nth-child(2) { opacity: 0; }
    .hamburger.is-active .hamburger__line:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

    .sub-header__title-area { flex-direction: column; align-items: flex-start; gap: 15px; }
    .sub-header__utils { width: 100%; justify-content: flex-end; }
}