:root { --blue:#0638d7; --bg:#f4f5f8; --line:#e5e7eb; --text:#16191f; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; background:var(--bg); color:var(--text); }
body { min-height:100vh; }
button,input { font:inherit; }
button { cursor:pointer; }
#app { max-width:520px; min-height:100vh; margin:auto; background:#fff; padding-bottom:88px; }
.topbar { position:sticky; top:0; z-index:20; height:58px; background:var(--blue); color:white; display:grid; grid-template-columns:56px 1fr 56px; align-items:center; padding-top:env(safe-area-inset-top); }
.title { text-align:center; font-weight:700; }
.iconbtn { border:0; background:transparent; color:white; font-size:24px; height:100%; }
.page { display:none; min-height:calc(100vh - 140px); background:var(--bg); }
.page.active { display:block; }
.hero { height:255px; padding:22px; background:linear-gradient(135deg,#fff,#eef3ff); }
.hero-top { display:flex; justify-content:space-between; font-size:38px; opacity:.55; }
.tagline { text-align:center; color:#6b7280; margin:12px 0 8px; font-size:13px; }
.brand { display:flex; align-items:center; justify-content:center; gap:5px; font-size:25px; white-space:nowrap; }
.brand b { color:var(--blue); }
.me { width:58px; height:58px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:900; }
.clock-row { margin-top:28px; display:flex; justify-content:space-between; color:#6b7280; }
.two-card { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.card { border:0; text-align:left; min-height:150px; padding:18px; background:white; position:relative; }
.card h3 { margin:0 0 10px; }
.card p { margin:0; color:#6b7280; font-size:13px; }
.bigicon { position:absolute; right:18px; bottom:18px; font-size:32px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); background:var(--line); gap:1px; margin-top:1px; }
.grid button { min-height:116px; border:0; background:white; font-weight:600; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; }
.grid span { font-size:26px; color:var(--blue); }
.notice { margin-top:14px; padding:18px; background:white; }
.notice div { display:flex; justify-content:space-between; }
.notice small { color:#9ca3af; }
.pagehead { background:var(--blue); color:#fff; padding:16px; text-align:center; }
.pagehead h2 { margin:0; font-size:18px; }
.monthbar { display:grid; grid-template-columns:50px 1fr 50px; align-items:center; text-align:center; padding:12px; background:white; }
.monthbar button { border:0; background:transparent; font-size:28px; }
.table { background:white; }
.tr { display:grid; grid-template-columns:1.2fr 1fr 1fr .8fr; align-items:center; min-height:48px; border-bottom:1px solid #eee; padding:0 12px; font-size:14px; }
.th { color:#6b7280; font-weight:600; background:#f8f8f8; }
.tr span:not(:first-child) { text-align:center; }
.status-holiday { color:#ef4444; }
.status-leave { color:var(--blue); }
.statwrap,.settings { padding:16px; display:grid; gap:14px; }
.statcard { background:white; border-radius:16px; padding:18px; display:flex; gap:14px; align-items:center; }
.statcard>span { font-size:28px; }
.statcard div { display:flex; flex-direction:column; gap:6px; }
.statcard small { color:#6b7280; }
.statcard strong { font-size:22px; }
.settings label { background:white; padding:14px; border-radius:14px; display:grid; gap:8px; }
.settings input[type="text"], .settings input[type="number"], .settings input:not([type]) { width:100%; border:1px solid #ddd; border-radius:10px; padding:12px; }
.settingrow { background:white; padding:16px; border-radius:14px; display:flex; justify-content:space-between; }
.settings button { border:0; padding:14px; border-radius:12px; background:white; }
.settings .primary { background:var(--blue); color:white; }
.settings .danger { color:#dc2626; }
.tabs { position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:min(520px,100%); display:grid; grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.96); border-top:1px solid #ddd; padding-bottom:env(safe-area-inset-bottom); z-index:30; }
.tabs button { border:0; background:transparent; padding:10px 4px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; color:#6b7280; }
.tabs button.active { color:var(--blue); }
.tabs span { font-size:12px; }
dialog { border:0; border-radius:18px; max-width:320px; width:calc(100% - 40px); }
dialog::backdrop { background:rgba(0,0,0,.35); }
dialog menu { display:flex; justify-content:flex-end; padding:0; margin:20px 0 0; }
dialog button { border:0; border-radius:10px; padding:10px 18px; background:var(--blue); color:white; }