/* 돌봄케어 공용 테마
 * 색·글꼴·사이드바·행동 색을 여기서만 정한다. 화면마다 색을 따로 고치지 않는다.
 * Tailwind 기본 색(emerald, gray)을 덮어써서 기존 화면도 같은 톤으로 바뀐다.
 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
    --paper: #F4F6F2;      /* 바탕 */
    --sheet: #FFFFFF;      /* 내용 면 */
    --ink: #1E2B26;        /* 본문, 사이드바 */
    --ink-soft: #55645D;   /* 보조 글자 */
    --line: #D9E0DA;       /* 구분선 */
    --sage: #6F8F7E;       /* 보조 강조 */
    --persimmon: #B5532F;  /* 행동 색 (버튼, 중요 표시) */
    --persimmon-hover: #9A4425;
    --seal: #A8432A;       /* 도장(인장) 색 */
    --rule: #E4EAE1;       /* 일지 줄 (글을 방해하지 않을 만큼 옅게) */
}

/* 사이드바 아이콘 (도장 테두리 + 사물): 글자색을 따른다 */
.side-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; }
.side-icon svg { display: block; }

/* 제목 옆 그림 (art.js ART.draw): 글자 높이에 맞춘 40px, 제목과 한 줄에 놓는다 */
.sec-ico { display: inline-flex; flex: 0 0 auto; vertical-align: middle; width: 40px; height: 40px; margin-right: 12px; }
.sec-ico svg { width: 40px; height: 40px; display: block; }

/* 장면 그림 (art.js): 가로폭에 맞춰 줄어들고, 최대 480px */
.art-scene { width: 100%; max-width: 480px; height: auto; display: block; }
.page-scene { margin-bottom: 24px; }
/* 사이드바 없는 주 영역(main)은 이미 안쪽 여백이 있으므로 장면을 카드와 같은 왼쪽선에 맞춘다 */
.main-layout > .page-scene { padding: 24px 24px 0; margin-bottom: 0; }

/* 선 그림 (art.js) 공통 크기 */
.art { width: 96px; height: auto; display: block; margin-bottom: 8px; }

/* 도장: 확인과 완료의 표시. 칸 안에 한 글자를 넣는다 */
.seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--seal);
    border-radius: 4px;
    color: var(--seal);
    font-family: 'Gowun Batang', serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    background: #FFF;
}
.seal.filled { background: var(--seal); color: #FFF; }
.seal.empty { border-color: var(--sage); color: var(--sage); background: transparent; }

/* 자체 스타일(design-system.css)을 쓰는 화면도 같은 색과 글꼴을 쓰도록 변수를 맞춘다 */
:root {
    --primary: #B5532F;
    --primary-dark: #9A4425;
    --primary-light: #F6E4DC;
    --secondary: #6F8F7E;
    --secondary-dark: #55645D;
    --secondary-light: #E8F0EA;
    --danger: #A8432A;
    --danger-light: #FBEDE7;
    --text-primary: #1E2B26;
    --text-secondary: #55645D;
    --text-tertiary: #6F7C75;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F4F6F2;
    --bg-tertiary: #EEF2EE;
    --border: #D9E0DA;
    --border-dark: #C5CFC8;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
    --font-family: 'Noto Sans KR', system-ui, sans-serif;
}

/* 일지 용지: 옅은 가로줄 (여백과 줄로 읽히는 기록 면) */
html, body {
    background-color: var(--paper) !important;
    background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--rule) 35px 36px) !important;
    background-attachment: local;
    color: var(--ink);
    font-family: 'Noto Sans KR', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2 {
    font-family: 'Gowun Batang', 'Noto Serif KR', serif;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* 사이드바: 그라데이션 대신 단색 */
aside {
    background: var(--ink) !important;
    border-right: 1px solid #142019;
}
aside .text-gray-400, aside .text-gray-300 { color: #A9B8B0 !important; }

/* 사이드바 메뉴 (menu.js가 만드는 항목) */
.side-brand { border-bottom-color: #2F3F38 !important; }
.side-sub { color: #A9B8B0 !important; }
.side-item { color: #D5DED9 !important; border-radius: 6px !important; }
.side-item:hover { background: #2A3A33 !important; color: #fff !important; }
.side-item.active { background: var(--persimmon) !important; color: #fff !important; }

/* 행동 색: 기존 초록 버튼 계열을 감색으로 통일 */
.bg-emerald-600, .bg-emerald-500 { background-color: var(--persimmon) !important; }
.hover\:bg-emerald-700:hover, .hover\:bg-emerald-600:hover { background-color: var(--persimmon-hover) !important; }
.text-emerald-600, .text-emerald-700 { color: var(--persimmon) !important; }
.focus\:ring-emerald-500:focus { --tw-ring-color: var(--persimmon) !important; }

/* 그라데이션 장식 제거: 요약 카드는 같은 면 위에 선으로만 구분한다 */
main [class*="bg-gradient-to"] {
    background-image: none !important;
    background-color: var(--sheet) !important;
}
.border-blue-200, .border-amber-200, .border-emerald-200, .border-purple-200, .border-red-200 { border-color: var(--line) !important; }
/* 화면 안에 직접 적힌 초록색(인라인 스타일, 예전 강조색)도 같은 행동색으로 바꾼다 */
[style*="#10b981"], [style*="#059669"], [style*="#34d399"], [style*="#047857"] {
    background-color: var(--persimmon) !important;
    border-color: var(--persimmon) !important;
}
[style*="color: #10b981"], [style*="color:#10b981"], [style*="color: #059669"], [style*="color:#059669"] {
    color: var(--persimmon) !important;
}
/* 주황 강조도 같은 행동색으로 모은다 (강조색은 하나) */
.text-orange-500, .text-orange-600, .text-orange-700, [style*="#f97316"], [style*="#ea580c"] { color: var(--persimmon) !important; }
.bg-orange-500, .bg-orange-600 { background-color: var(--persimmon) !important; }
.bg-emerald-50, .bg-emerald-100 { background-color: #EEF4EF !important; }
.bg-amber-50 { background-color: #F7F1E6 !important; }
.text-emerald-800, .text-emerald-900, .text-emerald-700 { color: var(--ink) !important; }
.border-emerald-200, .border-emerald-300, .border-emerald-500 { border-color: var(--line) !important; }

/* 빨간 글자는 오류·경고 표시로 남긴다 */
.text-blue-900, .text-amber-900, .text-emerald-900, .text-purple-900 { color: var(--ink) !important; }
.text-blue-600, .text-amber-600, .text-purple-600 { color: var(--ink-soft) !important; }
.text-blue-500, .text-amber-500, .text-emerald-500, .text-purple-500 { color: var(--ink-soft) !important; }

/* 내용 면: 그림자 없이 선으로 구분 */
.bg-white { background-color: var(--sheet) !important; }
.shadow-sm, .shadow, .shadow-md, .shadow-lg { box-shadow: none !important; }
.rounded-lg, .rounded-xl { border-radius: 6px !important; }
.border-gray-200, .border-gray-100 { border-color: var(--line) !important; }

/* 키보드 포커스는 항상 보이게 */
:focus-visible {
    outline: 2px solid var(--persimmon);
    outline-offset: 2px;
}

/* 휴대폰(900px 이하): 사이드바를 아래쪽 메뉴 줄로 바꾸고, 본문은 전체 폭을 쓴다 */
@media (max-width: 900px) {
    /* 하단 메뉴는 menu.js가 만드는 탭바(#mtabbar)를 쓴다. 예전 가로 스크롤 방식 사이드바는 숨긴다 */
    aside { display: none !important; }
    aside {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        z-index: 50;
        border-right: none;
        border-top: 1px solid #142019;
    }
    aside > div:first-child { display: none !important; }
    aside nav {
        display: flex;
        overflow-x: auto;
        padding: 6px 4px !important;
        gap: 2px;
    }
    .side-item {
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        min-width: 64px;
        padding: 6px 4px !important;
        font-size: 11px !important;
        text-align: center;
        gap: 2px !important;
    }
    .side-item .side-icon { font-size: 18px; }
    .side-item[style*="margin-top"] { margin-top: 0 !important; }
    /* 이음로직 크레딧(사이드바 맨 아래 고정 링크)은 데스크톱 세로 사이드바 전용 - 하단
       아이콘 줄에 그대로 두면 메뉴 아이콘 아래 글자 줄이 하나 더 붙어서 하단바가
       두 겹으로 보이고 자리만 차지한다. 모바일에서는 숨긴다. */
    #sideCredit { display: none !important; }
    /* 대시보드 등 일부 페이지는 메뉴를 "대상자 및 인력 관리"처럼 그룹 제목으로 나눠서
       보여주는데(side-group-label), 하단 아이콘 줄(aside nav가 flex row로 바뀜)에서는
       이 글자 제목들이 아이콘 사이사이에 그대로 끼어들어가 줄이 들쭉날쭉해진다.
       모바일 하단바에서는 아이콘만 보이면 되므로 그룹 제목은 숨긴다. */
    .side-group-label { display: none !important; }
    main { margin-left: 0 !important; }
    main > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px !important;
    }
    main h1 { font-size: 24px !important; }
    main > div:nth-child(2), #dashboardContent { padding: 16px !important; }
    body { padding-bottom: 84px; }
    /* 요약 카드(네 칸)는 두 칸으로, 입력 항목(세 칸)은 한 칸으로 쌓는다 */
    .md\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
    .md\:grid-cols-3 { grid-template-columns: 1fr !important; }
    table { display: block; overflow-x: auto; }
    th, td { white-space: nowrap; min-width: 88px; }
    /* 짧은 버튼(이전·다음 등)은 글자가 줄바꿈되지 않게 */
    button, .btn { white-space: nowrap; }
    /* 달력처럼 칸이 많은 격자는 칸 사이 여백을 줄인다 */
    [class*="grid-cols-7"] { gap: 2px !important; }
}

/* ===== 휴대폰 공통 보정 (토스·카카오·Material/HIG 모바일 관례) =====
   - 가로로 삐져나가는 요소가 있으면 모바일 브라우저가 페이지 전체를 축소해 버리므로 넘침을 막는다
   - 입력칸은 16px 이상(iOS는 16px 미만이면 터치 때 화면을 확대함), 터치 대상은 최소 44px
   - 상단바는 제목 한 줄 + 사용자 영역 한 줄로 정리하고, 날짜·직책·경로(breadcrumb)는 숨긴다 */
@media (max-width: 900px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .main-layout { margin-left: 0 !important; min-width: 0; width: 100%; }
    .main-layout > *, .content, .content > * { min-width: 0; max-width: 100%; }
    .topbar { flex-wrap: wrap !important; gap: 8px !important; padding: 12px 16px !important; }
    .topbar-title { flex: 1 1 100%; min-width: 0; }
    .topbar-title h1 { font-size: 20px !important; white-space: normal; word-break: keep-all; }
    .breadcrumb, .date-chip, .user-role { display: none !important; }
    .user-menu { flex: 1 1 100%; justify-content: flex-end; gap: 10px !important; min-width: 0; }
    .user-info { text-align: right; min-width: 0; }
    .user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
    .logout-btn { padding: 8px 12px !important; min-height: 40px; white-space: nowrap; }
    #userAvatar { width: 36px !important; height: 36px !important; }
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
    input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
    button, .btn, .side-item { min-height: 40px; }
    img, svg, video, canvas { max-width: 100%; }
    .content { padding: 16px !important; }
    /* 1fr(=minmax(auto,1fr))은 안쪽 내용 최소폭만큼 칸이 늘어나므로 minmax(0,1fr)로 고정 */
    .layout-grid, .layout-grid2, .vr-layout, .pa-row { grid-template-columns: minmax(0, 1fr) !important; }
    .layout-grid > *, .layout-grid2 > *, .vr-layout > *, .pa-row > * { min-width: 0; }
    .pa-card { overflow-x: auto; }
    /* 카드 안 긴 글자는 줄바꿈 (한글은 단어 단위) */
    p, li, span, div { overflow-wrap: anywhere; word-break: keep-all; }
    /* 상단 사용자 이름·역할은 한 글자씩 쪼개지지 않게 */
    #userName, #userRole { white-space: nowrap; overflow-wrap: normal; }
}

/* ===== 휴대폰: 표를 한 줄 한 줄 카드로 (옆으로 밀어서 보지 않게). 머리글 글자는 menu.js가 data-label로 넣어 준다 ===== */
@media (max-width: 700px) {
    table.m-cards { display: block; overflow-x: visible; width: 100%; }
    table.m-cards thead { display: none; }
    table.m-cards tbody { display: block; }
    table.m-cards tr { display: block; margin: 0 0 12px; padding: 4px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
    table.m-cards td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; width: auto; min-width: 0; padding: 9px 0 !important; border: 0 !important; border-bottom: 1px solid #f1f5f9 !important; white-space: normal; text-align: right; }
    table.m-cards td:last-child { border-bottom: 0 !important; }
    table.m-cards td[data-label]::before { content: attr(data-label); flex: 0 0 auto; max-width: 42%; color: #64748b; font-size: 12px; font-weight: 600; text-align: left; }
    table.m-cards td[data-label=""]::before { display: none; }
    table.m-cards td[colspan] { display: block; text-align: center; }
    /* 칸에 직접 적힌 너비(width:140px 등)가 카드에서는 줄 전체 폭을 막지 않게 한다 */
    table.m-cards td { width: auto !important; max-width: none !important; }
    table.m-cards tr.unread { border-left: 4px solid #0F8B80; }
    table.m-cards tr.unread td:first-child { box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}