/* ===================================================================
   layout.css — 공통 레이아웃 (헤더 / 좌측 메뉴 / 컨텐츠 틀)
   테마 컬러는 아래 3색 변수를 기준으로 한다. (신규 CSS 작성 시 이 변수를 사용할 것)
   =================================================================== */
:root {
    --color-primary: #2563eb;   /* 포인트 블루 */
    --color-white:   #ffffff;
    --color-dark:    #1e293b;   /* 다크 네이비 (블랙 대체) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Malgun Gothic', sans-serif; min-height: 100vh; background: var(--color-white); }
.wrap { display: flex; flex-direction: column; min-height: 100vh; }

/* 헤더 */
.header { display: flex; align-items: center; justify-content: space-between;
          height: 56px; padding: 0 20px 0 0; background: var(--color-white);
          border-bottom: 1px solid rgba(30, 41, 59, 0.1); }
.header-left { display: flex; align-items: center; gap: 12px; height: 100%; }
.header-logo { display: flex; align-items: center; }
.header-logo img { display: block; }
.header-right { display: flex; align-items: center; gap: 12px; }
.btn-menu-toggle { height: 100%; padding: 0 18px; font-size: 18px; color: rgba(30, 41, 59, 0.4);
                   background: transparent; border: none; border-right: 1px solid rgba(30, 41, 59, 0.1);
                   cursor: pointer; transition: background 0.15s, color 0.15s; }
.btn-menu-toggle:hover { background: rgba(37, 99, 235, 0.08); color: var(--color-primary); }
/* 메뉴 온 상태 : 블루 배경 + 흰 아이콘 (오프 상태는 회색 아이콘) */
.btn-menu-toggle.menu-on { background: var(--color-primary); color: var(--color-white); }
.btn-menu-toggle.menu-on:hover { background: rgba(37, 99, 235, 0.85); color: var(--color-white); }
.header-user { font-size: 14px; color: var(--color-dark); }
.btn-header { padding: 6px 12px; font-size: 13px; color: var(--color-dark); background: var(--color-white);
              border: 1px solid rgba(30, 41, 59, 0.3); border-radius: 6px; cursor: pointer; }
.btn-header:hover { background: rgba(30, 41, 59, 0.06); }
.btn-logout { display: inline-flex; align-items: center; gap: 6px;
              background: var(--color-dark); color: var(--color-white); font-weight: 700;
              border-color: var(--color-dark); }
.btn-logout:hover { background: rgba(30, 41, 59, 0.85); }

/* 본문 : 좌측 메뉴 + 컨텐츠 */
.container { display: flex; flex: 1; }
.side-menu { width: 200px; flex-shrink: 0; background: var(--color-dark); padding: 16px 0; }
.side-menu.menu-off { display: none; }
.side-menu ul { list-style: none; }
.side-menu a { display: block; padding: 10px 20px; font-size: 14px;
               color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.side-menu a:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-white); }
.side-menu a.active { background: var(--color-primary); color: var(--color-white); }
/* 최상단 단일 메뉴 (메인화면·마이페이지 등 하위 메뉴가 없는 항목) */
.side-menu a.menu-top-link { padding: 10px 20px; font-size: 14px; font-weight: 700;
                             color: var(--color-white); }
/* 메뉴 그룹 (상위 메뉴 + 하위 메뉴) */
.menu-group-title { display: flex; align-items: center; justify-content: space-between;
                    width: 100%; padding: 10px 20px; font-size: 14px; font-weight: 700; text-align: left;
                    color: var(--color-white); background: transparent; border: none; cursor: pointer; }
.menu-group-title:hover { background: rgba(255, 255, 255, 0.12); }
.menu-arrow { font-size: 11px; transition: transform 0.15s; }
.menu-group:not(.open) .menu-arrow { transform: rotate(-90deg); }
.menu-group:not(.open) .sub-menu { display: none; }
.sub-menu a { padding-left: 34px; }
.content { flex: 1; min-width: 0; padding: 20px; overflow-x: hidden; } /* min-width:0 → 넓은 컨텐츠(디자이너 등)로 인한 가로 스크롤 방지 */

/* 모바일 전체 화면 메뉴가 열려 있는 동안 본문 스크롤 잠금 (layout.jsp 에서 토글) */
html.scroll-lock, html.scroll-lock body { overflow: hidden; }

/* ===== 모바일 반응형 (768px 이하) ===== */
@media (max-width: 768px) {
    .header { padding-right: 12px; }
    .header-left { gap: 8px; }
    .btn-menu-toggle { padding: 0 14px; }
    .header-logo img { height: 26px; }
    .header-right { gap: 8px; }
    .header-user { font-size: 13px; }
    .btn-header { padding: 6px 10px; font-size: 12px; }

    /* 메뉴 : 기본은 숨김(layout.jsp 스크립트가 '닫힘'으로 시작),
       켜면 헤더 아래 화면 전체를 꽉 채운다 */
    .side-menu { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 900;
                 width: 100%; overflow-y: auto; padding: 8px 0; }
    /* 전체 화면 메뉴에 맞춘 큼직한 터치 타깃 */
    .side-menu .menu-group-title { padding: 16px 24px; font-size: 16px; }
    .side-menu a { padding: 15px 24px; font-size: 15px; }
    .side-menu a.menu-top-link { padding: 16px 24px; font-size: 16px; }
    .side-menu .sub-menu a { padding-left: 40px; }

    .content { padding: 12px; }
}