/* DATASMITH 공통 규격 오버레이 (v2.1.0) — 폰트 통일 + 공통 상단 바 + MOAPET 정렬 토큰 */
:root{--font:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif}
body,button,input,select,textarea,.topbar,.rail,.mobile-bar,.fab,.modal,.sheet,.toast{font-family:var(--font)}
.topbar-in{height:52px}
.tb-title{font-size:14px;font-weight:600}
.tb-btn{border-radius:0}

/* =========================================================
   MOAPET 좌우 정렬 시스템 (v2.1.0)
   · 모든 화면이 하나의 좌우 기준선(--mx-gutter)과 카드 패딩(--mx-card-x/y)을 공유
   · 카드마다 제각각이던 margin/padding 을 토큰으로 통일 — 기능·데이터 변경 없음
   ========================================================= */
:root{
  --mx-gutter:34px;      /* 페이지 콘텐츠 좌우 여백 */
  --mx-card-x:22px;      /* 카드 내부 좌우 패딩 */
  --mx-card-y:20px;      /* 카드 내부 상하 패딩 */
  --mx-gap:12px;         /* 카드·그리드 공통 간격 */
  --mx-ctl:40px;         /* 버튼·입력 기본 높이 */
  --mx-ctl-sm:34px;      /* 보조 컨트롤 높이 */
  --mx-maxw:1012px;      /* 콘텐츠 최대 폭 */
}
@media (max-width:760px){:root{--mx-gutter:20px;--mx-card-x:16px;--mx-card-y:16px}}
@media (max-width:600px){:root{--mx-gutter:16px;--mx-card-x:14px;--mx-card-y:14px}}

/* 1) 콘텐츠 기준선 — 페이지 제목·본문·카드가 같은 왼쪽 선에서 시작 */
.wrap,.topbar-in{max-width:var(--mx-maxw);padding-left:var(--mx-gutter);padding-right:var(--mx-gutter)}
.page-head,.sec-head,.wrap>.card,.dash-grid{margin-left:0;margin-right:0}

/* 2) 카드 내부 패딩 단일화 — card-head 와 card-pad 의 텍스트 시작선 일치 */
.card-pad{padding:var(--mx-card-y) var(--mx-card-x)}
.card-head{padding:14px var(--mx-card-x)}
.led{padding:14px var(--mx-card-x)}
.post{padding:16px var(--mx-card-x)}
.vh-top{padding:var(--mx-card-y) var(--mx-card-x) 16px}
.vax-card{padding:var(--mx-card-y) var(--mx-card-x)}
.pet-hero,.wt-hero,.walk-timer,.label-sheet{padding:var(--mx-card-y) var(--mx-card-x)}
.hero-main{padding:var(--mx-card-y) var(--mx-card-x)}
.hero-side{padding:var(--mx-card-y)}
.tile{padding:14px 16px}
.stat4 .s{padding:14px 16px}
.visit-row{padding:13px var(--mx-card-x)}
.m-head{padding:16px var(--mx-card-x) 14px}
.m-body{padding:16px var(--mx-card-x) 18px}
.m-foot{padding:12px var(--mx-card-x)}
.sheet-head{padding:10px 20px 12px}
.sheet-body{padding:14px 20px 8px}
.sheet-foot{padding:10px 20px calc(14px + env(safe-area-inset-bottom))}

/* 3) 간격 통일 */
.grid2,.grid3,.dash-grid,.stat-tiles{gap:var(--mx-gap)}

/* 4) 모달 이중 거터 제거 — m-head 하단 보더가 모달 전폭을 그리도록 */
.modal{padding:0}

/* 5) 수치·단위 — 숫자 폭 일정(tabular) + 단위는 숫자에 자연스럽게 붙임 */
.num,.mono,.tile .v,.stat4 .v,.snap .s .v,.vh-day,.wt-num,.clock,.code-val,.score-big,.vi-stats b,.care3-v{font-variant-numeric:tabular-nums}
.tile .v small,.stat4 .v small,.snap .s .v small,.wt-num small,.vi-stats small,.score-big small,.care3-v small{margin-left:1px}

/* 6) 버튼·입력 높이 기준 — 같은 행이면 같은 높이 */
.btn{height:var(--mx-ctl)}
.input,.select{min-height:var(--mx-ctl)}
.tb-btn{height:var(--mx-ctl-sm)}
.stepper{height:var(--mx-ctl)}
.stepper button{flex:0 0 36px;width:36px}
.stepper input{flex:1 1 auto;width:auto;min-width:0;text-align:center}
.row .stepper{flex:1 1 auto;min-width:0}
.row .select{min-height:var(--mx-ctl)}

/* 7) 하단 액션 버튼 — 취소/기록하기 같은 높이·균형 잡힌 폭 */
.m-foot .btn,.sheet-foot .btn{flex:1 1 0;min-width:0}

/* 8) 아이콘·텍스트 세로 중앙 정렬 */
.btn,.tb-btn,.chip,.qc,.qbtn,.nav-item,.tb-title,.card-head,.sec-head{align-items:center}
.btn svg,.tb-btn svg,.chip svg,.qc svg{flex:0 0 auto}

/* 9) 오른쪽 액션 버튼 기준 통일 */
.card-head .side{margin-left:auto}
.led .right{align-items:flex-end}

/* 10) 모바일 — 넘침 방지 */
@media (max-width:760px){
  .diff-table{min-width:0}
  .m-foot{flex-wrap:wrap}
}
@media (max-width:600px){
  .wtable,.diff-table{min-width:0}
  .card-head{padding:13px var(--mx-card-x)}
}

/* =========================================================
   MOAPET 공통 Modal 규격 (v2.3.0)
   · 모든 팝업(기록·사료·반려동물·배변/소변/체중/활동/pH/내원·삭제 확인·일괄 수정/삭제·가져오기·공유)
     는 openModal/openSheet → #modalIn/#sheetIn 한 곳을 지나므로 아래 규칙이 전체에 공통 적용됩니다.
   · 모달 바깥 여백(.modal padding:0) ≠ 내부 여백(--mx-modal-*) — 둘을 분리
   · 세로 리듬: 제목 ↔ 설명 ↔ 필드 ↔ footer 간격을 토큰으로 통일
   · 크기 토큰: 기본 560px(일반 기록 폼) / .wide 720px(긴 폼·표) — 페이지별 임의 크기 금지
   ========================================================= */
:root{
  --mx-modal-pad-x:28px;   /* 모달 내부 좌우 여백 */
  --mx-modal-pad-y:20px;   /* 모달 내부 상하 여백 */
  --mx-modal-gap:12px;     /* 기본 세로 간격 */
  --mx-modal-md:560px;     /* 일반 기록 폼 */
  --mx-modal-lg:720px;     /* 긴 폼·데이터 표 */
}
#modalIn .m-head{padding:var(--mx-modal-pad-y) var(--mx-modal-pad-x) 14px}
#modalIn .m-body{padding:18px var(--mx-modal-pad-x) 22px}
#modalIn .m-foot{padding:14px var(--mx-modal-pad-x) calc(14px + env(safe-area-inset-bottom))}
#sheetIn .sheet-head{padding:14px 24px 12px}
#sheetIn .sheet-body{padding:16px 24px 12px}
#sheetIn .sheet-foot{padding:12px 24px calc(16px + env(safe-area-inset-bottom))}
#modalIn .m-head .s{margin-top:6px;line-height:1.6}
#modalIn .m-body label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:0 0 8px;line-height:1.5}
#modalIn .m-body .row{margin-top:14px}
.modal{width:min(var(--mx-modal-md),calc(100vw - 32px))}
.modal.wide{width:min(var(--mx-modal-lg),calc(100vw - 32px))}

/* 모바일(≤600px): 모달을 하단 시트로 — Header(제목) / 스크롤 본문 / 버튼 고정 구조 */
@media (max-width:600px){
  :root{--mx-modal-pad-x:18px;--mx-modal-pad-y:18px}
  .modal{left:0;right:0;bottom:0;top:auto;width:100%;max-width:100vw;transform:translateY(102%);border-radius:14px 14px 0 0;max-height:92dvh}
  .modal.on{transform:translateY(0)}
}

/* ===== MOAPET 로고 — topbar 왼쪽으로 이동 (v2.3.0) =====
   · 로고가 사이드바 내부에 있어 모바일에서 사라지고 좁게 말리던 문제를 구조적으로 해소:
     Header = [모아펫 로고 | 현재 페이지 | 오른쪽 액션], Sidebar = 메뉴 전용 */
.topbar-in .brand{flex-direction:row;align-items:baseline;gap:8px;padding:0;overflow:visible;flex:0 0 auto}
.topbar-in .brand .ko{font-size:19px;letter-spacing:-.04em;white-space:nowrap}
.topbar-in .brand .ko span{color:var(--green-2)}
.topbar-in .brand .en{font-size:9px;letter-spacing:.24em}
.topbar-in .brand .bar{display:none}
.topbar-in .tb-title{padding-left:14px;border-left:1px solid var(--line-2)}
.rail{padding-top:22px}
@media (max-width:760px){
  .topbar-in .tb-title{padding-left:10px}
  .topbar-in .brand .ko{font-size:17px}
}

/* =========================================================
   MOAPET 가독성 개선 (v2.9.0) — 여백 · 배경 대비 · 세로 리듬
   · JS 가 문자열로 만드는 팝업(사료 등록·접종 일괄 등록 등)은 인라인 margin-top:10px 을
     갖고 있어 아래 !important 규칙이 한 곧에서 일괄 정규화합니다. 기능·데이터 변경 없음.
   ========================================================= */
/* 1) 모달/시트 안 세로 리듬 — 필드 그룹 간격 14px, 안내문 행간 1.65 */
#modalIn .m-body .field,#modalIn .m-body .grid2{margin-top:14px !important}
#modalIn .m-body .tiny{margin-top:10px !important;line-height:1.65}
#modalIn .m-body h3{line-height:1.45}
#sheetIn .sheet-body h2{margin:0 0 8px !important;line-height:1.45}
#sheetIn .sheet-body .tiny{line-height:1.65}
/* 2) 배경↔카드 대비 강조: 캔버스 톤을 한 단계 깊게(#F2F3EE→#E9EBE3) + 카드에 은은한 입체 음영.
     카드는 기존 흰색(--card:#FFFFFF) 그대로라 박스가 확실하게 떠 보입니다. */
:root{--paper:#E9EBE3}
.topbar{background:rgba(233,235,227,.92)}
.card,.tile{box-shadow:0 1px 2px rgba(16,25,23,.05),0 10px 24px -18px rgba(16,25,23,.28)}