@charset "UTF-8";
/* =====================================================================
 * 파일: app-base.css
 * 경로: /home/library/marc/public_html/assets/css/app-base.css
 * 설명: 회원 화면 기본값 (글꼴·색 이름표·아이콘·숨김 등)
 *       목업 site.css 에서 화면 틀에 필요한 것만 추림
 *       app-shell.css, app-ui.css, 각 화면 css 가 모두 이 색 이름표를 씀
 *
 * [구성]
 * 1) 색·모서리 이름표 (:root)  ← 색 바꿀 땐 여기만
 * 2) 기본값 (글꼴, 여백, 링크, 버튼 글꼴)
 * 3) 아이콘 (.icon)
 * 4) 숨김·화면 읽기 전용 (.screen-reader)
 *
 * [주의]
 * - 레이아웃에서 View::css('app-base', true) 로 맨 먼저 불러옴
 * - 글꼴은 PC 기본 글꼴 (따로 받는 글꼴 없음)
 * - 모서리 둥글기는 목업보다 줄임 (Kailey : 버튼이 너무 동글동글한 것 싫어함)
 * - [hidden] 에 !important : 다른 css 가 display 를 줘도 숨김이 이기게
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1) 색·모서리 이름표 (목업의 MARC 청록색 기준)
 * --------------------------------------------------------------------- */
:root {
    /* 주 색 */
    --app-accent:      #167e81;   /* 강조 (켜진 메뉴, 주 버튼) */
    --app-accent-soft: #e9f5f3;   /* 강조 옅은 바탕 */

    /* 글자 */
    --app-ink:   #243047;         /* 본문 글자 */
    --app-muted: #657187;         /* 흐린 글자 (설명) */

    /* 바탕·선 */
    --app-canvas: #f0f3f8;        /* 본문 바탕 */
    --app-panel:  #ffffff;        /* 카드 바탕 */
    --app-line:   #dfe5ef;        /* 선 */

    /* 왼쪽 메뉴 */
    --app-side-bg:        #18263e;
    --app-side-text:      #b7c4db;
    --app-side-sub:       #8698b5;   /* 묶음 이름 */
    --app-side-hover:     #263952;
    --app-side-on-bg:     #e1f1ee;   /* 켜진 메뉴 바탕 */
    --app-side-on-text:   #216b69;

    /* 알림 */
    --app-danger:      #a83d2d;
    --app-danger-soft: #fbeeeb;

    /* 모서리 (목업 6~9px → 줄임) */
    --app-radius-sm: 3px;         /* 버튼, 입력칸 */
    --app-radius:    5px;         /* 카드 */

    /* 글꼴 (PC 기본 글꼴) */
    --app-font: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    --app-mono: Consolas, "Courier New", monospace;
}

/* ---------------------------------------------------------------------
 * 2) 기본값
 * --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--app-canvas);
    color: var(--app-ink);
    font-family: var(--app-font);
    font-size: 14px;
    line-height: 1.5;
    word-break: keep-all;              /* 한글 낱말 중간에서 줄 안 바뀌게 */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

img {
    max-width: 100%;
}

/* 키보드로 이동할 때만 보이는 테두리 */
:focus-visible {
    outline: 3px solid #90a9ff;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * 3) 아이콘 (Icon::svg() 가 만드는 <svg class="icon">)
 *    색은 글자색을 따라감 (currentColor)
 * --------------------------------------------------------------------- */
.icon {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
 * 4) 숨김
 * --------------------------------------------------------------------- */
[hidden] {
    display: none !important;
}

/* 화면엔 안 보이고 화면 읽기 프로그램만 읽음 (입력칸 이름 등) */
.screen-reader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}