@charset "UTF-8";
/* =====================================================================
 * 파일: app-shell.css
 * 경로: /home/library/marc/public_html/assets/css/app-shell.css
 * 설명: 회원 화면 공통 틀 모양 (views/layout/app.php 와 짝)
 *       목업 workspace-shell.css 에서 틀 부분만 옮김 (도서관리 체험 화면 뺌)
 *
 * [구성]
 * 1) 전체 틀 (.app : 상단 / 가운데 / 상태 줄)
 * 2) 상단 (.app-topbar : 로고, 서비스 탭, 회원 이름, 로그아웃)
 * 3) 가운데 (.app-body : 왼쪽 메뉴 + 본문)
 * 4) 왼쪽 메뉴 (.app-sidebar)
 * 5) 본문 (.app-main, .app-content, .app-heading)
 * 6) 상태 줄 (.app-statusbar)
 *
 * [주의]
 * - 색은 app-base.css 의 이름표만 씀 (여기서 색 값 직접 안 적음)
 * - 화면 전체 높이를 틀이 차지하고, 본문(.app-main)만 스크롤
 *   → 위·왼쪽 메뉴·상태 줄은 항상 보임
 * - 본문 폭 최대 1600px (개발 화면과 같게, 바꾸지 말 것)
 * - 머리글은 목업의 두 줄(큰 제목 + 경로 줄)을 한 줄로 합침 (세로 공간 확보)
 * - 모바일 화면은 아직 안 함 (업무용 PC 기준)
 * ===================================================================== */

:root {
    --app-topbar-h:     60px;     /* 상단 높이 */
    --app-statusbar-h:  28px;     /* 상태 줄 높이 */
    --app-sidebar-w:   210px;     /* 왼쪽 메뉴 폭 */
    --app-content-max: 1600px;    /* 본문 최대 폭 */
}

/* ---------------------------------------------------------------------
 * 1) 전체 틀
 * --------------------------------------------------------------------- */
body.app-page {
    overflow: hidden;             /* 페이지 전체 스크롤 막고 본문만 스크롤 */
}

.app {
    height: 100vh;
    height: 100dvh;               /* 지원 브라우저는 실제 보이는 높이 */
    display: grid;
    grid-template-rows: var(--app-topbar-h) minmax(0, 1fr) var(--app-statusbar-h);
}

/* ---------------------------------------------------------------------
 * 2) 상단
 * --------------------------------------------------------------------- */
.app-topbar {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 24px;
    background: var(--app-panel);
    border-bottom: 1px solid var(--app-line);
}

.app-logo {
    display: flex;
    align-items: center;
    width: calc(var(--app-sidebar-w) - 48px);   /* 로고 끝을 왼쪽 메뉴 폭에 맞춤 */
    flex-shrink: 0;
}

.app-logo img {
    display: block;
    width: 110px;
    height: auto;
}

/* 서비스 탭 (MARC / 도서관리) */
.app-service-switch {
    align-self: stretch;
    display: flex;
    gap: 24px;
}

.app-service-switch a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 3px;
    border-bottom: 3px solid transparent;
    color: var(--app-muted);
    font-weight: 600;
    white-space: nowrap;
}

.app-service-switch a[aria-current="page"] {
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
}

/* 오른쪽 (회원 이름, 로그아웃) */
.app-topbar-end {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    font-size: 13px;
    white-space: nowrap;
}

.app-member-name {
    color: var(--app-ink);
    font-weight: 600;
}

.app-logout {
    margin: 0;
}

.app-logout button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-panel);
    color: var(--app-muted);
    font-size: 12px;
}

.app-logout button:hover {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

.app-logout .icon {
    width: 15px;
    height: 15px;
}

/* ---------------------------------------------------------------------
 * 3) 가운데 (왼쪽 메뉴 + 본문)
 * --------------------------------------------------------------------- */
.app-body {
    min-height: 0;
    display: grid;
    grid-template-columns: var(--app-sidebar-w) minmax(0, 1fr);
}

/* ---------------------------------------------------------------------
 * 4) 왼쪽 메뉴
 * --------------------------------------------------------------------- */
.app-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: 24px 13px 18px;
    background: var(--app-side-bg);
    color: var(--app-side-text);
}

/* 서비스 이름 (MARC Studio) */
.app-product {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 9px 26px;
}

.app-product-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #48777b;
    border-radius: var(--app-radius);
    background: #20515a;
    color: #b1ece5;
}

.app-product-icon .icon {
    width: 20px;
    height: 20px;
}

.app-product strong {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.app-product span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--app-side-sub);
}

/* 메뉴 묶음 이름 (WORK  작업) */
.app-nav-section {
    display: flex;
    justify-content: space-between;
    margin: 18px 12px 8px;
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--app-side-sub);
}

.app-nav-section:first-child {
    margin-top: 0;
}

.app-nav-section span {
    letter-spacing: 0;
}

.app-navigation {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 메뉴 한 줄 */
.app-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--app-radius);
    color: var(--app-side-text);
    font-size: 13px;
}

a.app-nav-item:hover {
    background: var(--app-side-hover);
    color: #fff;
}

/* 지금 화면 */
.app-nav-item[aria-current="page"],
.app-nav-item[aria-current="page"]:hover {
    background: var(--app-side-on-bg);
    color: var(--app-side-on-text);
    font-weight: 700;
}

/* 준비 중 (ready=false) : 흐리게, 안 눌림 */
.app-nav-item.is-wait {
    opacity: .45;
    cursor: default;
}

.app-nav-item small {
    margin-left: auto;
    font-size: 10px;
}

/* ---------------------------------------------------------------------
 * 5) 본문
 * --------------------------------------------------------------------- */
.app-main {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
}

.app-content {
    max-width: var(--app-content-max);
    padding: 22px 28px 28px;
}

/* 머리글 한 줄 (제목 + 설명) */
.app-heading {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 18px;
}

.app-heading h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.app-heading p {
    font-size: 13px;
    color: var(--app-muted);
}

/* ---------------------------------------------------------------------
 * 6) 상태 줄
 * --------------------------------------------------------------------- */
.app-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 21px;
    border-top: 1px solid var(--app-line);
    background: #e8edf5;
    color: var(--app-muted);
    font-size: 11px;
}

.app-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: #61b9a3;
    vertical-align: middle;
}