/*
  공통 스타일 시트 (common.css)
  - 모든 시트에서 공통으로 사용하는 레이아웃/컴포넌트 스타일을 정의합니다.
  - Toast UI Grid 및 Date Picker 등 라이브러리 CSS(tui-*.css)는 절대 수정하지 않습니다.
  - 시트별 개별 스타일은 각 시트 전용 CSS 파일(예: plan.css, purchase.css 등)에 작성합니다.
 */

:root {
    --bg: #f5f7fb;
    --fg: #222;
    --muted: #667085;
    --primary: #2f6fed;
    --primary-soft: #eef4ff;
    --border: #e3e8f0;
    --border-strong: #c8d1dd;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.06);
}

@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/PretendardVariable.woff2') format('woff2');
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    /* 페이지 전체: 가로 스크롤은 숨기고, 세로 스크롤은 필요 시 표시 */
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 26%),
        linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);
    color: var(--fg);
    font-family: "Pretendard Variable", "Malgun Gothic", sans-serif;
}

/* 전역 폰트 통일: 입력/버튼/그리드까지 Pretendard 적용 */
button, input, select, textarea {
    font-family: "Pretendard Variable", "Malgun Gothic", sans-serif;
}

/* tui-grid.css의 기본 폰트 지정(Arial, Dotum)을 공통 CSS에서 오버라이드 */
.tui-grid-container,
.tui-grid-container * {
    font-family: "Pretendard Variable", "Malgun Gothic", sans-serif !important;
}

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    padding: 4px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.app-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 2px 10px;
    border: 1px solid rgba(227, 232, 240, 0.92);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.96) 100%);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.app-title-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(47, 111, 237, 0.06) 0%, transparent 36%);
    pointer-events: none;
}

.app-title-wrap h1 {
    margin: 0;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    font-size: 21px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #24324a;
}

.app-logo {
    width: 104px;
    height: 39px;
    object-fit: contain;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.app-header .app-logout-btn {
    min-width: 94px;
    height: 32px;
    padding: 4px 14px;
    border-radius: 9px;
    border-color: #d6dbee;
    background: linear-gradient(180deg, #ffffff 0%, #edf3ff 100%);
    color: #2f6fed;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(47, 111, 237, 0.10);
}

.app-header .app-logout-btn:hover {
    border-color: #bfd0ea;
    background: linear-gradient(180deg, #ffffff 0%, #e6efff 100%);
    color: #2459c9;
}


.content {
    flex: 1;
    /* 상단 여백 축소: 헤더-툴바 간 간격 과다 및 조기 세로 스크롤 발생 완화 */
    padding: 4px 16px 0 16px;
    /* 페이지 스크롤을 허용해야 가로 스크롤바 영역이 탭 위에 노출됨 */
    overflow: visible;
}

/* 시트 영역: 기본 비표시, active 시 표시 */
.sheet {
    display: none;
}

.sheet.active {
    display: block;
}

/* Grid를 감싸는 래퍼: 높이 자동
   - 요약(공지) 행을 포함해 그리드 실제 높이에 맞춰 확장되도록 함 */
.grid-wrap {
    width: 100%;
    height: auto;
    position: relative;
}

/* 하단 안내 박스(.grid-notice)는 정책 변경으로 제거되었습니다. */

/* 탭 내비게이션 */
.tabs {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.05);
    z-index: 3000; /* 모든 표 헤더보다 위에서 겹침을 차단 */
}

.tab-btn {
    appearance: none;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #344054;
    padding: 8px 36px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.tab-btn[aria-selected="true"], .tab-btn.active {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
    background: linear-gradient(180deg, #ffffff 0%, var(--primary-soft) 100%);
    box-shadow: 0 8px 18px rgba(47, 111, 237, 0.12);
}

.tab-btn:hover {
    border-color: #bfd0ea;
    background: #ffffff;
    color: #1d2939;
    transform: translateY(-1px);
}

/* Toast UI Grid 공존 시 약간의 여백 */
/* 주의: height: auto 설정은 Toast UI Grid의 bodyHeight 옵션을 무시하므로 제거함 */

/* 하단 요약(공지) 행을 하나의 병합 셀처럼 보이게 하는 스타일 (자금계획/구매자금에만 적용) */
/* - 첫 번째 요약 셀의 내용(span.notice-merge)을 가로 전체로 확장 */
/* - 나머지 요약 셀은 테두리/내용을 숨겨 시각적으로 병합 효과 */

/* 포커스 outline 정리(접근성 유지) */
.tab-btn:focus {
    outline: 2px solid rgba(31, 122, 236, .35);
    outline-offset: 2px;
}

/* 주말 날짜 강조 (Toast Grid 커스텀 렌더러 weekend-date 클래스 사용) */
.weekend-date {
    color: #d32f2f;
    font-weight: 600;
}

/* 행 상태 색상(row-manual/row-missing 등)이 있어도 날짜 휴일색은 유지 */
.tui-grid-cell .weekend-date {
    color: #d32f2f !important;
}


/* 요약행 공통 스타일 */
/* - 합계 영역 우측 정렬 + 가독성을 위한 굵기 */
.tui-grid-summary-area .tui-grid-cell {
    text-align: right;
    font-weight: 600;
}

/* 금액 컬럼 공통 숫자 가독성 강화
   - 대상: 우측 정렬 컬럼(현재 각 시트 금액 컬럼에 align:'right' 적용)
   - 효과: 숫자 폭 고정(tabular), 표준 숫자 형태(lining), 줄바꿈 방지 */
.tui-grid-body-area .tui-grid-cell[style*="text-align: right"] .tui-grid-cell-content,
.tui-grid-summary-area .tui-grid-cell .tui-grid-cell-content {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    white-space: nowrap;
}

/* 월계/누계(또는 월계) 강조 행 공통 스타일
   - sum-month-row: 1번/4번 시트에서 공통 사용
   - sum-ytd-row는 1번 시트(plan.css) 전용으로 유지 */
.tui-grid-row.sum-month-row .tui-grid-cell {
    background: #f4f7ff; /* 연한 파란 배경 */
    font-weight: 600;
}