/* 듀티핏 공용 색 — 밝은 모드 값은 각 페이지가 쓰던 색 그대로, 화면 모드가 어둡게면(기기 설정 따라 포함) 아래 어두운 값으로 바뀜.
   각 페이지 <style>보다 먼저 불러옴: 페이지가 :root에 같은 이름을 두면 밝은 모드에선 페이지 값이 이김.
   어두운 블록은 html[data-theme="dark"](우선순위가 :root보다 높음)라 어느 페이지에서나 이김.
   공유용 이미지(html2canvas)는 복제본 <html>에 .light-cap을 붙여 다크여도 밝게 찍힘. */
:root{
  color-scheme:light;
  --surface:#FFFFFF; --elev:#FFFFFF; --soft:#F5F7F8; --soft-hover:#EBEEF1; --soft2:#FAFBFC; --soft3:#F7F9FB; --hover:#F0F3F5;
  --line:#EEF1F4; --border:#E3E8EC; --border-strong:#D5DCE2; --dash:#C9D2DA; --border-hover:#B9C3CC;
  --ink:#15202B; --ink2:#3B4652; --muted:#5B6573; --faint:#8A94A0; --faint2:#A0A9B3; --on-ink:#FFFFFF;
  --accent:#0D8573; --accent-ink:#0B6B5D; --accent-hover:#0B6B5D; --accent-tint:#E7F4F1; --accent-soft:#F3FAF8; --accent-line:#CFE6E0;
  --danger:#B42318;
  --some:#E1F2EE; --some-ink:#0B5C50;
  --off-bg:#FFF1E6; --off-ink:#9A3412; --off-ring:#F59E66; --off-line:#F5C9A8; --off-cell:#E6EAEE;
  --sun:#C2410C; --sat:#2563EB; --star:#F5B301;
  --bad-line:#F6D4D4; --bad-soft:#FFF1F1; --bad2:#E5484D;
  --warn-bg:#FFF6E5; --warn-ink:#7A4F00;
  --ok-bg:#DCFCE7; --ok:#15803D;
  --toast:#15202B;
  --rowline:#E3EFEC; --track:#EAEEF2; --track2:#EEF1F5; --gridline:#F0F2F4; --star-off:#D3DAE3; --dot:#DCE2E9;
  --err-bg:#FEF0EE; --err-ink:#B42318;
}
html.light-cap{color-scheme:light;}
/* 어두운 색: theme.js가 고른 모드(기기 설정 따라·밝게·어둡게)에 따라 <html data-theme="dark">를 붙임 */
html[data-theme="dark"]:not(.light-cap){
  color-scheme:dark;
  --bg:#10171E; --surface:#10171E; --elev:#18212A; --soft:#212B35; --soft-hover:#28333E; --soft2:#19222B; --soft3:#19222B; --hover:#1E2832;
  --line:#25303A; --border:#2D3944; --border-strong:#3B4854; --dash:#4A5763; --border-hover:#566371;
  --ink:#E6EBEF; --ink2:#C3CCD4; --muted:#9BA6B1; --faint:#808C97; --faint2:#6E7A86; --on-ink:#10171E;
  --accent:#0D8573; --accent-ink:#5AD3BE; --accent-hover:#0A7465; --danger:#C0392B; --accent-tint:#133A34; --accent-soft:#11302B; --accent-line:#1F5249;
  --some:#173A34; --some-ink:#86E0CE;
  --d-bg:#433409; --d-ink:#FFD66B; --e-bg:#1B2E50; --e-ink:#A3C4FF; --n-bg:#2E2654; --n-ink:#C8B9FF;
  --md-bg:#163A2A; --md-ink:#8ADDB2; --o-bg:#26313B; --o-ink:#A6B1BB;
  --off-bg:#3A2516; --off-ink:#FFB27A; --off-ring:#E08A50; --off-line:#6A4126; --off-cell:#212B35;
  --sun:#FF8A5C; --weekend:#FF8A5C; --sat:#7EA9FF; --star:#F5B301;
  --bad:#FF8378; --bad-bg:#3A1A18; --bad-line:#5A2A26; --bad-soft:#33191A; --bad2:#FF7A72;
  --warn-bg:#3A2D12; --warn-ink:#FFCF70;
  --ok-bg:#163A24; --ok:#5BD48A;
  --toast:#2B3742;
  --rowline:#25303A; --track:#25303A; --track2:#25303A; --gridline:#25303A; --star-off:#3B4854; --dot:#3B4854;
  --err-bg:#3A1A18; --err-ink:#FF6B60;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

/* 누름 효과(모든 페이지 공통): 누르는 순간 바로 살짝 작아지고 어두워짐(어두운 모드는 밝아짐), 손을 떼면 부드럽게 돌아옴.
   아이폰은 theme.js의 빈 touchstart가 있어야 :active가 켜짐. 기본 회색 터치 상자는 끔 */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;}   /* 가로로 돌려도 글자가 커지지 않게 */
/* 누르는 것은 두 번 탭 확대 대기 없이 바로 click(300ms 지연 제거) */
button,a[href],[role=button],.cell,.fc{touch-action:manipulation;}
:where(button,a[href],[role=button]){transition:transform .16s cubic-bezier(.23,1,.32,1),filter .16s cubic-bezier(.23,1,.32,1),opacity .16s cubic-bezier(.23,1,.32,1);}   /* 손을 뗄 때 강한 ease-out 160ms */
button:not(:disabled):active,button.is-pressed:not(:disabled),[role=button]:active,[role=button].is-pressed{transform:scale(.97);filter:brightness(.92);transition-duration:0s;}
html[data-theme="dark"] button:not(:disabled):active,html[data-theme="dark"] button.is-pressed:not(:disabled),html[data-theme="dark"] [role=button]:active,html[data-theme="dark"] [role=button].is-pressed{filter:brightness(1.25);}
a[href]:active,a[href].is-pressed{opacity:.6;transition-duration:0s;}

/* 앱처럼 보이게(모든 페이지)
   · 화면 끝까지 쓰되(viewport-fit=cover) 가로로 돌렸을 때 노치에 글자가 가리지 않게 좌우 여백 — 아래 홈 바 여백은 버튼·시트마다 env()로
   · 누르는 것은 길게 눌러도 글자 선택·링크 메뉴가 안 뜨게(입력칸·본문 글은 그대로 선택)
   · 설치한 앱에서만 맨 위·아래에서 당겨도 고무줄처럼 늘어나지 않게(브라우저에선 당겨서 새로고침 그대로) */
html{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);}
body:not(.flow-mode){padding-bottom:env(safe-area-inset-bottom,0px);}   /* 다른 페이지는 맨 아래 내용이 홈 바에 가리지 않게(근무표 앱 화면은 아래 버튼이 직접 띄움).
   화면 높이에 꽉 맞춘 틀(휴무 맞추기·내 근무표·이름 넣기 .wrap)은 높이에서 이만큼 빼 둬서 한 화면을 넘지 않음 */
button,[role=button],a[href]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
@media (display-mode: standalone){ html,body{overscroll-behavior-y:none;} }
/* 페이지 사이(홈 ↔ 휴무 맞추기·내 근무표 등)를 오갈 때 부드럽게 바뀜 — 지원하는 브라우저만(크롬·최신 사파리), 움직임 줄이기 설정이면 끔 */
@media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto;} }
/* 팝업·시트 닫힘(theme.js가 .is-closing을 붙이고 0.22초 뒤 지움): 바탕은 흐려지고, 휴대폰에선 아래로 내려가고 넓은 화면 가운데 카드는 살짝 작아지며 */
.is-closing{animation:layerOut .2s ease forwards!important;pointer-events:none!important;}
.is-closing>*{animation:sheetOut .22s cubic-bezier(.68,0,1,.28) forwards!important;}   /* 올라온 곡선(.32,.72,0,1)의 거울 */
html.lay-pc .is-closing>*{animation:cardOut .18s ease forwards!important;}
@media (prefers-reduced-motion:reduce){ .is-closing>*{animation:cardFade .18s ease forwards!important;} }
/* 아래 탭바(tabbar.js): 홈 · 휴무 맞추기 · 내 근무표 · 더보기. 화면 사이를 오갈 때 제자리에(view-transition-name).
   탭바가 있는 페이지는 html.has-tb — 본문 아래 여백(--tb)과 화면 높이에 맞춘 틀(.wrap·#flowRoot)·아래 고정 버튼이 탭바 위에 오게 */
html.has-tb{--tb:calc(58px + env(safe-area-inset-bottom,0px));}
.tb{position:fixed;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);bottom:0;z-index:90;display:flex;height:var(--tb);padding-bottom:env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb,var(--elev) 84%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 -1px 0 var(--line);view-transition-name:tabbar;}   /* 반투명 재질: 내용이 밑으로 스크롤돼 비침 */
@media (prefers-reduced-transparency:reduce){ .tb{background:var(--elev);-webkit-backdrop-filter:none;backdrop-filter:none;} }
.tb[hidden]{display:none;}
.tb a,.tb button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:0;margin:0;border:0;background:none;font-family:inherit;font-size:0.75rem;font-weight:700;color:var(--muted);text-decoration:none;letter-spacing:-.01em;}
.tb svg{width:24px;height:24px;}
.tb i{display:flex;} .tb .f{display:none;} .tb .on .o{display:none;} .tb .on .f{display:flex;}   /* 지금 탭은 채운 아이콘 */
.tb .on{color:var(--accent-ink);}
@media (prefers-reduced-motion:no-preference){ .tb .on .f svg{animation:tabPop .3s cubic-bezier(.34,1.56,.64,1);} } @keyframes tabPop{from{transform:scale(.8);}60%{transform:scale(1.12);}to{transform:none;}}
.tb a:active,.tb button:active,.tb a.is-pressed,.tb button.is-pressed{transform:none;filter:none;opacity:1;color:var(--ink2);}
html.has-tb body{padding-bottom:var(--tb)!important;}
html.has-tb .wrap{min-height:calc(100dvh - var(--tb));}
html.has-tb #toastWrap{bottom:calc(16px + var(--tb))!important;}
html.lay-pc .tb{display:none;} html.lay-pc.has-tb{--tb:0px;} html.lay-pc.has-tb body{padding-bottom:env(safe-area-inset-bottom,0px)!important;}
@keyframes layerOut{to{opacity:0;}}
@keyframes sheetOut{to{transform:translateY(100%);}}
@keyframes cardOut{to{opacity:0;transform:scale(.96);}}
@keyframes cardFade{to{opacity:0;}}