@charset "UTF-8";
/* =====================================================================
 * 파일: app-ui.css
 * 경로: /home/library/marc/public_html/assets/css/app-ui.css
 * 설명: 회원 화면 여러 곳에서 같이 쓰는 부품 모양
 *       (버튼, 입력칸, 카드, 숫자 표시, 알림 상자)
 *       목업 workspace-shell.css 의 app-button / app-card 등을 옮김
 *
 * [구성]
 * 1) 버튼       .app-button + .app-button-primary / .app-button-white
 * 2) 입력칸     .app-field (이름표 + 입력칸 묶음), .app-input
 * 3) 카드       .app-card, .app-card-title, .app-card-body
 * 4) 작은 표시  .app-section-mark(제목 앞 막대), .app-count(숫자), .app-subtle(흐린 글자)
 * 5) 알림 상자  .app-msg + .app-msg-error
 *
 * [주의]
 * - 레이아웃 app.php, login.php 둘 다 이 파일을 불러옴 (로그인 화면도 같은 버튼)
 * - 색·모서리는 app-base.css 이름표만 씀
 * - 한 화면에서만 쓰는 모양은 여기 말고 그 화면 css 에 (예: member-login.css)
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1) 버튼
 * --------------------------------------------------------------------- */
.app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

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

/* 주 버튼 (청록 바탕) */
.app-button-primary {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

.app-button-primary:hover {
    filter: brightness(.93);
}

/* 보조 버튼 (흰 바탕) */
.app-button-white {
    background: var(--app-panel);
    border-color: var(--app-line);
    color: var(--app-muted);
}

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

/* ---------------------------------------------------------------------
 * 2) 입력칸
 * --------------------------------------------------------------------- */
.app-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-muted);
}

.app-input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: #f7f9fc;
    color: var(--app-ink);
    font-size: 14px;
}

.app-input:focus {
    outline: none;
    border-color: var(--app-accent);
    background: var(--app-panel);
}

/* ---------------------------------------------------------------------
 * 3) 카드
 * --------------------------------------------------------------------- */
.app-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-panel);
}

.app-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 50px;
    padding: 13px 18px;
    border-bottom: 1px solid #e9edf3;
}

.app-card-title > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.app-card-title h2 {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.app-card-body {
    padding: 18px;
}

/* ---------------------------------------------------------------------
 * 4) 작은 표시
 * --------------------------------------------------------------------- */
/* 카드 제목 앞 세로 막대 */
.app-section-mark {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--app-accent);
}

/* 숫자 표시 (목록 건수 등) */
.app-count {
    padding: 2px 6px;
    border-radius: var(--app-radius-sm);
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-family: var(--app-mono);
    font-size: 11px;
    font-weight: 700;
}

/* 흐린 작은 글자 */
.app-subtle {
    font-size: 11px;
    color: var(--app-muted);
}

/* ---------------------------------------------------------------------
 * 5) 알림 상자
 * --------------------------------------------------------------------- */
.app-msg {
    padding: 10px 12px;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-accent-soft);
    font-size: 13px;
}

.app-msg-error {
    border-color: #f0cfc8;
    background: var(--app-danger-soft);
    color: var(--app-danger);
}