/* KNavi — 하루치 방문 시트. 엑셀 일정표의 구조(열)와 표시 관습(노란 형광펜·빨간 글씨)을 그대로 옮긴다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  --topbar:52px;      /* 상단 바 높이 — 네이티브 앱은 0 */
  --paper:#F5F6F4;      /* 진료실 벽 톤의 바탕 */
  --sheet:#FFFFFF;
  --ink:#17212B;
  --ink2:#5C6873;
  --ink3:#98A3AD;
  --rule:#D9DEE3;
  --rule2:#EEF1F3;
  --map-bg:#E9ECEA;    /* 지도 로딩 전 바탕 */
  /* 구분색 — 동선 구간·군집 등 "여러 개를 구분"할 때 순서대로 돌려 쓴다. 빨강은 넣지 않는다. */
  --s1:#2457C5; --s2:#1E8E62; --s3:#7B3FB8; --s4:#0E7C86;
  --s5:#8A5A2B; --s6:#3B5B8E; --s7:#4F8A10; --s8:#6D28D9;
  --mark:#FFF0A6;       /* 형광펜 — 주 연락처·메모 */
  --mark2:#FFE14D;
  --red:#C8322B;        /* 빨간 글씨 — 중요 */
  --red-bg:#FBECEA;
  --green:#1E8E62;      /* 완료 */
  --green-bg:#E4F4EC;
  --blue:#2457C5;       /* 동작·링크 */
  --blue-bg:#E8EFFC;
  --amber:#A66A00;
  --amber-bg:#FFF4D6;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:"Pretendard Variable",Pretendard,-apple-system,sans-serif; /* 숫자는 같은 서체, tnum 로 정렬 */
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* display:flex 같은 클래스 규칙이 hidden 속성을 덮지 않도록 */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum"}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 상단 바 ── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:0 20px;height:52px;background:var(--sheet);border-bottom:1px solid var(--rule)}
.top h1{font-size:14px;margin:0;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.top h1 .logo{color:var(--blue)}
.top h1 .tag{font-size:12px;font-weight:500;color:var(--ink3);margin-left:10px;padding-left:10px;border-left:1px solid var(--rule);letter-spacing:.01em}
.top .nav{margin-left:auto;display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.top .nav::-webkit-scrollbar{display:none}
.top .nav a{font-size:13px;font-weight:500;padding:6px 10px;border-radius:6px;color:var(--ink2);white-space:nowrap}
.top .nav a:hover{background:var(--rule2);text-decoration:none;color:var(--ink)}
.top .nav a.cur{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
.top .nav .me{font-size:12px;font-weight:600;color:var(--ink);background:var(--rule2);border-radius:14px;padding:5px 11px;margin-left:8px;white-space:nowrap;display:inline-flex;align-items:center}
.top .nav .me:empty{display:none}
.wrap{max-width:1280px;margin:0 auto;padding:20px 20px 90px}
.wrap.narrow{max-width:760px}

/* ── 날짜 스탬프 (시트 헤더) ── */
/* 시트 상단 띠 — 날짜·요약·도구를 흰 카드로 묶어 표와 구분 */
.sheet-head{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-bottom:12px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:14px 18px;box-shadow:0 1px 2px rgba(23,33,43,.04)}
.sheet-head .clinic{flex-basis:100%;font-size:12px;font-weight:600;color:var(--ink2);letter-spacing:.02em;margin:-2px 0 -4px}
.sheet-head .clinic:empty{display:none}
.stamp{display:flex;align-items:center;gap:8px}
.stamp .d{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1;font-family:var(--mono)}
.stamp .w{font-size:14px;color:var(--ink2);font-weight:500;margin-left:2px;padding-top:8px}
.stamp input[type=date]{font-family:var(--mono);font-size:13px;padding:6px 8px;width:auto;border-color:var(--rule);background:#fff;color:var(--ink2);min-height:0;display:inline-block}
.sum{font-size:13px;color:var(--ink2);padding:0;border-left:1px solid var(--rule);padding-left:16px}
.sum b{color:var(--ink);font-family:var(--mono)}
.sum .done{color:var(--green)}
.sum:empty{display:none}
.tools{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

/* ── 버튼 ── */
button,.btn{font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:7px;padding:0 12px;height:34px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .12s,border-color .12s}
button:hover,.btn:hover{background:var(--rule2);text-decoration:none;border-color:#C9D0D6}
button.primary,.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
button.primary:hover,.btn.primary:hover{background:#2B3641}
button.ok{background:var(--green);border-color:var(--green);color:#fff}
button.ok:hover{background:#177753}
button.danger{color:var(--red);border-color:#EBC9C6}
button.danger:hover{background:var(--red-bg)}
button.ghost,.btn.ghost{border-color:transparent;background:transparent;color:var(--blue)}
button.ghost:hover,.btn.ghost:hover{background:var(--blue-bg)}
button.small,.btn.small{height:28px;padding:0 9px;font-size:12px}
button.icon{padding:0 8px}
button:disabled{opacity:.45;cursor:default}
.fab{position:fixed;right:20px;bottom:22px;z-index:15;height:44px;padding:0 18px;font-size:14px;box-shadow:0 8px 22px rgba(23,33,43,.28)}

/* ── 표 (시트) ── */
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(23,33,43,.04)}
.sheet .scroll{overflow-x:auto}
table.roster{width:100%;border-collapse:collapse;table-layout:fixed} /* 가로 스크롤 없음 — 1280px 이하는 카드 배치(아래 미디어 규칙) */
/* 표 머리글은 한 규격 (docs/DESIGN.md 4장) — 명부·시트·약제·군집 시트가 같이 쓴다 */
table.roster th,table.sheet-t th,table.drugs th{position:sticky;top:0;z-index:5;background:var(--sheet);text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--rule);white-space:nowrap}
table.sheet-t td,table.drugs td{font-size:13px;border-bottom:1px solid var(--rule2)}
table.roster td{vertical-align:top;padding:14px 14px 15px;border-bottom:1px solid var(--rule2);font-size:13px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;color:var(--ink)}
table.roster tr:last-child td{border-bottom:none}
table.roster tr:hover td{background:#FBFCFD}
table.roster tr.important td:first-child{box-shadow:inset 4px 0 0 var(--red)}
table.roster tr.done td{background:#FAFCFB}
table.roster tr.done td:first-child{box-shadow:inset 4px 0 0 var(--green)}
col.c-seq{width:52px}
col.c-name{width:170px}
col.c-addr{width:200px}
col.c-tel{width:196px}
col.c-cond{width:auto}
col.c-act{width:200px}
col.c-do{width:120px}

.seq{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--ink2);line-height:1.1}
.seq small{display:block;font-size:11px;color:var(--ink3);font-family:var(--font);font-weight:600;letter-spacing:.04em;margin-top:3px}
tr.done .seq{color:var(--green)}
.seq .seqlk{display:inline-flex;vertical-align:middle;margin-left:3px;color:var(--ink);opacity:.8}
.seq .seqlk svg{fill:currentColor}
tr.done .seq small{color:var(--green)}

/* 이름은 본문보다 한 단 위 */
.pname{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.pname .re{font-size:11px;font-weight:600;color:var(--ink3);margin-left:3px}
.pmeta{color:var(--ink3);font-size:12px;margin-top:2px}
.pmeta .mono{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.hs{color:var(--red);font-size:12px;font-weight:600;margin-top:6px;line-height:1.4}

/* 작은 꼬리표는 .tag 한 벌 (docs/DESIGN.md 4장). .badge 는 예전 이름 — 같은 규격의 별칭. */
.tag,.badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--rule2);color:var(--ink2);vertical-align:1px;white-space:nowrap;line-height:1.45}
.tag.line,.badge.line{background:var(--sheet);border:1px solid var(--rule)}
.tag.blue{background:var(--blue-bg);color:var(--blue)}
.tag.green,.badge.ok,.badge.g1,.badge.g2{background:var(--green-bg);color:var(--green)}
.tag.amber,.badge.g3{background:var(--amber-bg);color:var(--amber)}
.tag.red,.badge.imp,.badge.g4,.badge.g5{background:var(--red-bg);color:var(--red)}
.tag.round{border-radius:20px}

.addr{font-weight:600;color:var(--ink)}
.addr2{color:var(--ink2);font-size:13px;margin-top:1px}
.code{font-family:var(--mono);font-size:12px;background:var(--rule2);padding:1px 6px;border-radius:4px;color:var(--ink2);letter-spacing:.02em}
.mark{background:linear-gradient(transparent 15%,var(--mark) 15%,var(--mark) 88%,transparent 88%);padding:0 3px;border-radius:2px}
.memo{display:inline-block;background:var(--mark);color:var(--ink);font-weight:500;padding:3px 8px;border-radius:4px;font-size:12px;margin-top:6px;line-height:1.45}   /* 현장 메모(초인종·공동현관 등)는 놓치면 안 되므로 형광펜 */
.memo.sched{background:transparent;color:var(--ink2);font-weight:400;padding:0 0 0 9px;border-left:3px solid var(--blue);border-radius:0;display:block}
.park{display:block;margin-top:5px;font-size:12px;line-height:1.45;padding-left:22px;position:relative;overflow-wrap:anywhere}
.park .pk{position:absolute;left:0;top:2px;font-size:11px;font-weight:800;color:#fff;background:#3A6EA5;border-radius:3px;width:16px;height:16px;line-height:16px;text-align:center;font-family:var(--mono)}
.park .pa{color:var(--ink);font-weight:500}
.park .pm{display:block;color:var(--ink2);font-size:12px}

.tel>div{padding:2px 0;line-height:1.45;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.tel a{color:var(--ink);font-family:var(--mono);font-size:13px;font-weight:500;white-space:nowrap;font-feature-settings:"tnum"}
.tel a.pri{font-weight:700;text-decoration:underline;text-decoration-color:var(--mark2);text-decoration-thickness:3px;text-underline-offset:3px}
.tel .who{color:var(--ink3);font-size:12px;white-space:nowrap}
.tel .note{color:var(--ink3);font-size:11px;flex-basis:100%;display:block;margin-left:2px;overflow-wrap:anywhere}

.pre,.note{white-space:pre-wrap;font-size:13px;line-height:1.5}
.note{margin-top:4px}
.pre.small{font-size:12px;color:var(--ink2)}
.cond .today{margin-top:6px;padding-top:6px;border-top:1px dashed var(--rule)}
.cond .today b{font-size:11px;letter-spacing:.06em;color:var(--ink3);text-transform:uppercase;display:block;margin-bottom:2px}
.act.important .pre{color:var(--red);font-weight:600}
.prev{margin-top:6px;font-size:12px;color:var(--ink3);border-top:1px dashed var(--rule);padding-top:5px}
.prev b{color:var(--ink2);font-weight:600}
.pnote{margin-top:6px;font-size:12px;color:var(--ink2);padding-left:9px;border-left:3px solid var(--green);line-height:1.45}
.pnote b{color:var(--green);font-weight:700;font-size:11px;letter-spacing:.04em;margin-right:4px}

.chips{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 4px}
.chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--sheet);color:var(--ink2);border:1px solid var(--rule);line-height:1.45}
.chip.on{background:var(--ink);color:#fff}
.chip.sel{cursor:pointer;background:#fff;border-color:var(--rule);color:var(--ink2)}
.chip.sel:hover{border-color:var(--blue);color:var(--blue)}
.chip.sel.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.do{display:flex;flex-direction:column;gap:5px}
.do .btn,.do button{justify-content:center;height:30px;font-size:12px}
.do button.danger{border-color:transparent;background:none;color:var(--ink3);font-weight:500;height:26px}
.do button.danger:hover{color:var(--red);background:var(--red-bg)}

.empty{text-align:center;color:var(--ink3);padding:48px 16px;font-size:14px;line-height:1.7}
.empty b{color:var(--ink2)}

/* ── 카드·폼 ── */
/* 지도 옆 세로 패널 — 동선 지도·환자 지도 공용 (docs/DESIGN.md 4장) */
.panel{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:12px 14px 14px;margin:0 0 10px}
.panel .pl{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase;margin:0 0 8px}
/* 지도 — Leaflet 내부 층(400~1000)이 모달 위로 올라오지 않게 쌓임 맥락을 만든다 */
#map{height:100%;background:var(--map-bg);position:relative;z-index:0}
.maplay{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - var(--topbar))}
.maplay .side{overflow:auto;background:var(--sheet);border-right:1px solid var(--rule);padding:14px 16px 24px}
.page-title{font-size:21px;font-weight:700;letter-spacing:-.01em;margin:0 0 2px}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:18px 20px;margin-bottom:14px;box-shadow:0 1px 2px rgba(23,33,43,.04)}
.card h2{font-size:11px;margin:0 0 6px;font-weight:700;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.card h2 + .hint{margin-top:-2px;margin-bottom:8px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
label{display:block;font-size:12px;color:var(--ink2);margin:12px 0 5px;font-weight:600}
label:first-child{margin-top:0}
input[type=text],input[type=search],input[type=date],input[type=tel],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;padding:9px 11px;border:1px solid var(--rule);border-radius:7px;font-size:14px;font-family:var(--font);background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
input[readonly]{background:var(--rule2);color:var(--ink2)}
textarea{min-height:90px;resize:vertical;line-height:1.55}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{flex:1;min-width:40px;padding:0 6px;font-family:var(--mono)}
.seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.hint{font-size:12px;color:var(--ink3);margin-top:4px}
.btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}
.contact-row{display:grid;grid-template-columns:104px 1fr 1fr auto;gap:6px;margin-bottom:6px;align-items:center}
.contact-row .cx{grid-column:2/3;display:flex;align-items:center;gap:6px}
.contact-row .cx-fax{grid-column:3/4}
.contact-row .cx>span{font-size:11px;color:var(--ink3);flex:none;width:26px;text-align:right}
.contact-row .cx>input{flex:1;min-width:0}
.contact-row .c-memo{grid-column:1/-1}
.contact-row.one-extra .cx{grid-column:2/-1}
@media(max-width:700px){.contact-row{grid-template-columns:1fr 1fr auto}.contact-row .c-kind{grid-column:1/-1}.contact-row .cx{grid-column:1/-1}}
.contact-row input{font-size:14px;padding:8px 10px}
.contact-row .memo-in{grid-column:1/-1}
.contact-row .c-pri{height:38px}
.contact-row .c-pri.on{background:var(--mark)}

.list-item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--rule2)}
.list-item:last-child{border-bottom:none}
.list-item .grow{flex:1;min-width:0}

/* ── 타임라인 ── */
.tl{border-left:2px solid var(--rule);margin-left:8px;padding-left:16px}
.tl .item{position:relative;margin-bottom:16px}
.tl .item:before{content:"";position:absolute;left:-23px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid #fff;box-shadow:0 0 0 1px var(--rule)}
.tl .item.planned:before{background:#fff}
.tl .d{font-weight:700;font-family:var(--mono);font-size:13px}

/* ── 환자 상단 요약 (visit) ── */
.phead{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px}
.phead .k{font-size:11px;letter-spacing:.06em;color:var(--ink3);text-transform:uppercase;font-weight:700;margin-bottom:4px}
@media(max-width:820px){.phead{grid-template-columns:1fr}}

/* ── 토스트·게이트·시트 ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.toast.show{opacity:1}
.login-gate{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;align-items:center;justify-content:center}
.login-gate[hidden]{display:none!important}
.login-box{width:340px;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:30px 28px;box-shadow:0 20px 50px rgba(23,33,43,.10);display:flex;flex-direction:column}
.lg-brand{font-size:24px;font-weight:700;letter-spacing:-.02em;text-align:center}
.lg-brand span{color:var(--blue)}
.lg-sub{font-size:13px;color:var(--ink3);margin:2px 0 22px;text-align:center}
.login-box input{margin-bottom:10px}
.login-box button{height:40px;justify-content:center;font-size:14px}
.lg-err{color:var(--red);font-size:12px;min-height:16px;margin-bottom:6px}
.modal{position:fixed;inset:0;z-index:60;background:rgba(23,33,43,.45);display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none!important}
.dlg{background:#fff;width:100%;max-width:720px;border-radius:14px 14px 0 0;padding:18px 20px;max-height:85vh;overflow:auto}
.dlg h3{margin:0 0 10px;font-size:14px}
@media(min-width:700px){.modal{align-items:center}.dlg{border-radius:12px}}

/* ── 달력 (시트·다른 날 복사·예약관리·방문 기록 공용) ── */
.dlg.cal{max-width:460px;padding:16px 18px 14px}
.cal-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.cal-head b{font-size:17px;font-weight:700;letter-spacing:-.01em;min-width:118px;text-align:center;font-family:var(--mono)}
.cal-head .icon{width:34px;height:34px;padding:0 0 3px;border-radius:8px;font-size:21px;line-height:1;display:inline-flex;align-items:center;justify-content:center;color:var(--ink2);background:#fff;border:1px solid var(--rule);font-family:var(--mono)}
.cal-head .hint{font-size:11px;line-height:1.3;text-align:right;max-width:46%}
.cal-head .icon:hover{background:var(--rule2);color:var(--ink)}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;letter-spacing:.06em;color:var(--ink3);font-weight:700;padding:0 0 6px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.cal-week span:first-child{color:var(--red)}
.cal-week span:last-child{color:var(--blue)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 4px}
.cal-d{position:relative;height:54px;padding:6px 4px 4px;border:1px solid transparent;border-radius:10px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .12s,border-color .12s}
.cal-d.pad{pointer-events:none}
.cal-d:hover:not([disabled]){background:var(--rule2)}
.cal-d[disabled]{cursor:default}
.cal-d .n{font-size:14px;line-height:1;font-family:var(--mono);font-feature-settings:"tnum";width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.cal-grid .cal-d:nth-child(7n+1) .n{color:var(--red)}
.cal-grid .cal-d:nth-child(7n) .n{color:var(--blue)}
.cal-d .c{font-size:11px;font-weight:700;padding:1px 6px;border-radius:9px;background:var(--rule2);color:var(--ink2);line-height:1.4;white-space:nowrap}
.cal-d.today .n{background:var(--ink);color:#fff!important;font-weight:700}
.cal-d.sel{border-color:var(--ink);background:#fff}
.cal-d.past{opacity:.38}
/* 시트·복사 달력: 그날 전체 상태 */
.cal-d.done{background:var(--green-bg)}
.cal-d.done .c{background:var(--green);color:#fff}
.cal-d.plan{background:var(--blue-bg)}
.cal-d.plan .c{background:var(--blue);color:#fff}
/* 예약관리·방문 기록 달력: 이 환자만 */
.cal-d.rsv{background:var(--blue-bg);border-color:#BFD0F0;font-weight:700}
.cal-d.rsv .c.rsvc{background:var(--blue);color:#fff}
.cal-d.own{background:var(--green-bg);border-color:#BFE3CF}
.cal-d.own .c.ownc{background:var(--green);color:#fff}
.cal-d .c.dim{background:transparent;color:var(--ink3);font-weight:600}
.cal-d.imp .n{box-shadow:0 0 0 2px var(--red)}
.cal-d.has{font-weight:700}
.cal-d.free:hover{background:var(--blue-bg)}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule2);font-size:11px;color:var(--ink2);align-items:center}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-legend .sw{width:12px;height:12px;border-radius:4px;border:1px solid var(--rule);background:#fff}
.cal-legend .sw.done{background:var(--green-bg);border-color:var(--green)}
.cal-legend .sw.plan{background:var(--blue-bg);border-color:var(--blue)}
.cal-legend .sw.sel{border-color:var(--ink)}
.cal-legend .sw.own{background:var(--green-bg);border-color:var(--green)}
.cal-legend .sw.rsv{background:var(--blue-bg);border-color:var(--blue)}
.cal-legend .sw.imp{border:2px solid var(--red)}
.dlg.cal.rs{max-width:880px}
.rs-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}
.rs-right{border-left:1px solid var(--rule);padding-left:18px;display:flex;flex-direction:column;min-height:0}
.rs-mh{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase;margin:0 0 8px}
.rs-month{overflow:auto;max-height:440px;flex:1 1 auto}
.rs-day{padding:8px 8px 9px;border-radius:8px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--rule2)}
.rs-day:last-child{border-bottom:none}
.rs-day:hover{background:var(--rule2)}
.rs-day .rs-dh{display:flex;align-items:center;gap:8px}
.rs-day .dt{font-family:var(--mono);font-weight:700}
.rs-day .cnt{color:var(--ink2);margin-left:auto;font-size:12px}
.rs-day .cnt b{color:var(--ink);font-family:var(--mono)}
.rs-day .rs-names{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.rs-day .rs-names .nm{font-size:12px;padding:2px 8px;border-radius:12px;background:#fff;border:1px solid var(--rule);color:var(--ink)}
.rs-day .rs-names .nm.done{color:var(--ink3);border-style:dashed}
.rs-day .rs-names .nm.me{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.rs-day.past{opacity:.55}
.rs-day.mine{background:var(--blue-bg)}
@media(max-width:760px){.rs-body{grid-template-columns:1fr}.rs-right{border-left:none;border-top:1px solid var(--rule);padding:12px 0 0}.rs-month{max-height:220px}}
.rs-act{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;background:var(--blue-bg);border-radius:10px;font-size:13px}
@media(pointer:coarse){.cal-d{height:58px}}
@media(max-width:400px){.cal-d{height:50px}.cal-d .c{font-size:11px;padding:1px 4px}}

/* ── 태블릿(iPad 세로·가로): 일별 시트(daysheet)만 2단 카드로. 명부·약제·기록표는 일반 표 유지 ── */
@media(min-width:761px) and (max-width:1280px){
  .top h1 span:not(.logo):not(.brand){display:none}
  .sheet.daysheet{background:transparent;border:none;box-shadow:none;overflow:visible}
  .sheet.daysheet .scroll{overflow:visible}
  table.roster.daysheet,table.roster.daysheet tbody{display:block;min-width:0;width:100%}
  table.roster.daysheet thead,table.roster.daysheet colgroup{display:none}
  table.roster.daysheet tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-areas:"name cond" "addr cond" "tel act" "do do";column-gap:18px;background:#fff;border:1px solid var(--rule);border-radius:10px;margin-bottom:10px;padding:8px 0 6px;box-shadow:0 1px 2px rgba(23,33,43,.04);position:relative}
  table.roster.daysheet tr.important{border-left:4px solid var(--red)}
  table.roster.daysheet tr.done{border-left:4px solid var(--green)}
  table.roster.daysheet tr td:first-child{box-shadow:none!important}
  table.roster.daysheet td{display:block;border-bottom:none;padding:6px 16px;min-width:0}
  table.roster.daysheet td[data-l]:before{content:attr(data-l);display:block;font-size:11px;letter-spacing:.06em;color:var(--ink3);font-weight:700;text-transform:uppercase;margin-bottom:1px}
  table.roster.daysheet td.seq-cell{position:absolute;right:14px;top:10px;width:auto;padding:0}
  table.roster.daysheet td.name-cell{grid-area:name;padding-top:10px}
  table.roster.daysheet td:nth-child(3){grid-area:addr}
  table.roster.daysheet td:nth-child(4){grid-area:tel}
  table.roster.daysheet td:nth-child(3),table.roster.daysheet td:nth-child(4){border-top:1px solid var(--rule2);padding-top:8px}
  table.roster.daysheet td:nth-child(5){grid-area:cond;padding-right:64px;border-left:1px solid var(--rule2);padding-top:10px}
  table.roster.daysheet td:nth-child(6){grid-area:act;border-left:1px solid var(--rule2);border-top:1px solid var(--rule2);padding-top:8px}
  table.roster.daysheet td:nth-child(7){grid-area:do;border-top:1px solid var(--rule);margin-top:6px;padding-top:10px}
  .do{flex-direction:row;flex-wrap:wrap;align-items:center}
  .do .btn,.do button{flex:0 0 auto;min-width:110px;height:38px;font-size:13px}
  .do button.danger{margin-left:auto;min-width:0}
}

/* ── 모바일: 표를 행 카드로 ── */
@media(max-width:760px){
  .top{padding:0 12px;gap:8px}
  .top h1 span:not(.logo):not(.brand){display:none}
  .top .nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .top .nav::-webkit-scrollbar{display:none}
  .top .nav a{white-space:nowrap;padding:6px 8px;font-size:12px}
  .stamp{flex-wrap:wrap}
  table.roster td{word-break:normal;overflow-wrap:anywhere}
  .pre,.note,.hs,.addr,.tel .who,.tel .note{overflow-wrap:anywhere;word-break:normal}
  .wrap{padding:12px 10px 90px}
  .sheet-head{gap:10px}
  .stamp .d{font-size:28px}
  .tools{margin-left:0;width:100%}
  .sheet{background:transparent;border:none;box-shadow:none;overflow:visible}
  .sheet .scroll{overflow:visible}
  table.roster,table.roster tbody,table.roster tr,table.roster td{display:block;min-width:0;width:100%}
  table.roster thead,table.roster colgroup{display:none}
  table.roster tr{background:#fff;border:1px solid var(--rule);border-radius:10px;margin-bottom:10px;padding:4px 0;box-shadow:0 1px 2px rgba(23,33,43,.04);position:relative}
  table.roster tr.important{border-left:4px solid var(--red)}
  table.roster tr.done{border-left:4px solid var(--green)}
  table.roster tr td:first-child{box-shadow:none!important}
  table.roster td{border-bottom:none;padding:6px 14px}
  table.roster td[data-l]:before{content:attr(data-l);display:block;font-size:11px;letter-spacing:.06em;color:var(--ink3);font-weight:700;text-transform:uppercase;margin-bottom:1px}
  table.roster td.seq-cell{position:absolute;right:12px;top:8px;width:auto;padding:0}
  table.roster td.name-cell{padding-top:12px;padding-right:60px;padding-bottom:8px}
  table.roster td:nth-child(n+3){border-top:1px solid var(--rule2);padding-top:8px;padding-bottom:8px}
  table.roster td:nth-child(7){border-top:1px solid var(--rule);padding-top:10px}
  .do{flex-direction:row;flex-wrap:wrap;padding-bottom:4px}
  .do .btn,.do button{flex:1 1 30%;min-width:96px;height:38px;font-size:13px}
  .grid2{grid-template-columns:1fr}
  input,textarea,select{font-size:16px}
  .top .nav a:not(#logoutBtn){display:none}
  .top .nav .me{margin-left:0;font-size:12px;padding:4px 9px}
  /* 앱형 레이아웃: 상단 바·하단 탭은 고정, 가운데 내용만 스크롤 → 스크롤 표시선이 하단 탭 위로 지나가지 않는다 */
  html,body{height:100%}
  body{display:flex;flex-direction:column;overflow:hidden}
  .top{position:static;flex:none}
  .wrap{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:28px}
  .maplay{flex:1 1 auto;min-height:0;height:auto}
  nav.bottom-nav{display:flex;position:static;flex:none}
  .modal{align-items:flex-end}
  .dlg{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .do button.danger{flex:1 1 100%;height:32px}
}

/* ── 폰 하단 탭 바 (≤760 에서만 표시) ── */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--rule);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px 0 2px;min-height:50px;color:var(--ink3);text-decoration:none;border-radius:10px;-webkit-tap-highlight-color:transparent;transition:color .12s}
.bottom-nav .ic{width:24px;height:24px;display:block}
.bottom-nav .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav .lb{font-size:11px;font-weight:600;letter-spacing:-.01em;line-height:1}
.bottom-nav a.cur{color:var(--blue)}
.bottom-nav .ic{position:relative;z-index:0}
.bottom-nav a.cur .ic:before{content:"";position:absolute;inset:-3px -12px;background:var(--blue-bg);border-radius:15px;z-index:-1}
.bottom-nav a:active{color:var(--ink)}
.toast{bottom:calc(72px + env(safe-area-inset-bottom))}

/* ── 터치 기기: 누르기 쉬운 크기 ── */
@media(pointer:coarse){
  button,.btn{min-height:40px}
  button.small,.btn.small{min-height:36px;padding:0 12px}
  button.icon.small{min-width:40px}
  .top .nav a{padding:9px 12px}
  .chip.sel{padding:6px 12px;font-size:13px}
  .cal-d{min-height:44px}
  input[type=checkbox]{width:22px;height:22px}
  .tl .item .act a{padding:6px 4px}
  .drag-item .grip{padding:8px 8px}
  a[href^="tel:"]{padding:2px 0;display:inline-block}
}


@media print{
  .top,.tools,.do,.fab,.stamp input,.toast{display:none!important}
  body{background:#fff}
  .wrap{padding:0;max-width:none}
  .sheet{border:none;box-shadow:none}
  table.roster{min-width:0}
  table.roster th{position:static}
}

/* ── 로고 (나비 심볼) ── */
.top h1{display:flex;align-items:center;gap:8px}
.top h1 .logo-img{height:30px;width:auto;display:block;flex:none}
.top h1 .brand{white-space:nowrap}
.lg-logo{height:64px;width:auto;align-self:center;flex:none;display:block;margin:0 auto 10px}

/* ── 순서 편집 드래그 ── */
.drag-item{cursor:grab;user-select:none;-webkit-user-select:none;border-radius:8px;padding:10px 6px;transition:background .12s}
.drag-item:hover{background:var(--rule2)}
.drag-item .grip{display:flex;align-items:center;justify-content:center;width:40px;height:44px;margin:-8px 0;border-radius:8px;color:var(--ink3);touch-action:none;flex:none;background:var(--rule2)}
.drag-item .grip svg{fill:currentColor}
.drag-item .grip:hover{color:var(--ink);background:var(--rule)}
.drag-item .seq{width:30px;font-size:16px}
.drag-item .grow{font-size:14px;font-weight:600}
.drag-item.dragging{background:#fff;box-shadow:0 8px 24px rgba(23,33,43,.22);outline:2px solid var(--blue);position:relative;z-index:5;cursor:grabbing}
.drag-item.dragging .grip{color:var(--blue);background:var(--blue-bg)}
#orderList.drag-on .drag-item:not(.dragging){transition:none}
@media(pointer:coarse){.drag-item .grip{width:48px;height:52px}.drag-item{padding:12px 6px}}

/* ── 지도 다이얼로그 (구글 지도 임베드) ── */
.dlg.mapdlg{max-width:860px;padding:12px 14px 14px;min-width:0;overflow:hidden}
.dlg.mapdlg .row{min-width:0}
.dlg.mapdlg #mapDlgAddr{flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:0}
.dlg.mapdlg iframe{display:block;width:100%;height:min(62vh,560px);border:0;border-radius:8px;margin-top:10px;background:#E9ECEA}
@media(max-width:700px){.dlg.mapdlg{max-height:92vh}.dlg.mapdlg iframe{height:60vh}}

/* ── 상단 로고·이름 = 시트로 가는 링크 ── */
.top h1 .home{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-radius:6px}
.top h1 .home:hover{text-decoration:none;opacity:.8}

/* ── 네이티브 앱(KNaviApp) 안: 메뉴는 앱 툴바가 담당 ── */
.native-app{--topbar:0px}
.native-app .top{display:none!important}
.native-app nav.bottom-nav{display:none!important}
.native-app .wrap{padding-top:12px}
.native-app .maplay{height:100vh}
.native-app .emr-side{top:12px;max-height:calc(100vh - 24px)}
.native-app .emr-side .card{max-height:calc(100vh - 24px)}
@media(max-width:760px){.native-app .wrap{padding-bottom:calc(20px + env(safe-area-inset-bottom))}.native-app .side-fab{bottom:calc(16px + env(safe-area-inset-bottom))}.native-app .toast{bottom:calc(20px + env(safe-area-inset-bottom))}}

/* ── iOS/WebKit 날짜 입력: 고유 폭 때문에 그리드 칸(카드) 밖으로 삐져나오던 것 고정 ── */
.grid2>div{min-width:0}
input[type=date]{display:block;min-width:0;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;min-height:42px;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}

/* ── 목록 페이지(시트·명부·약제): 상단 띠는 고정, 표(환자 목록)만 스크롤 ── */
.wrap.fixedhead{display:flex;flex-direction:column;height:calc(100vh - var(--topbar));padding-bottom:16px;overflow:hidden}
.wrap.fixedhead>.sheet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-bottom:0}
.wrap.fixedhead .sheet .scroll{flex:1 1 auto;min-height:0;overflow:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.wrap.fixedhead .sheet-head,.wrap.fixedhead .dsearch,.wrap.fixedhead .dmeta{flex:none}
@media(max-width:760px){.wrap.fixedhead{height:auto;overflow:hidden;padding-bottom:0}.wrap.fixedhead .sheet .scroll{padding-bottom:calc(16px + env(safe-area-inset-bottom))}}
@media print{.wrap.fixedhead{height:auto;overflow:visible}.wrap.fixedhead .sheet .scroll{overflow:visible!important}}

/* 주민번호 — 청구용. 기본은 가림, '보기' 를 누르면 잠깐 펼친다(열람 기록 남음) */
.rrn{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.rrn .v{letter-spacing:.02em;color:var(--ink2)}
.rrn .v.open{color:var(--ink);font-weight:600;background:var(--amber-bg);padding:1px 6px;border-radius:5px}

/* ── 환자 정보 헤드업 — 목록·지도에서 이름을 누르면 화면 위에 겹쳐 뜬다 ── */
/* 배경을 어둡게 덮지 않는다 — 아래의 지도 팝업·군집 시트가 그대로 보여야 한다 */
.hud{position:fixed;inset:0;z-index:90;background:transparent;pointer-events:none;display:flex;align-items:flex-start;justify-content:flex-end;opacity:0;transition:opacity .16s ease}
.hud .hud-card{pointer-events:auto}
.hud.on{opacity:1}
.hud[hidden]{display:none!important}
.hud-card{background:#fff;width:min(440px,100%);height:100%;display:flex;flex-direction:column;border-left:1px solid var(--rule);box-shadow:-10px 0 36px rgba(23,33,43,.22);transform:translateX(18px);transition:transform .16s ease}
.hud.on .hud-card{transform:none}
.hud-top{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--rule)}
.hud-nm{font-size:21px;font-weight:700;letter-spacing:-.01em}
.hud-meta{font-size:12px;color:var(--ink3);font-family:var(--mono);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hud-x{margin-left:auto;flex:none}
.hud-bd{flex:1;overflow:auto;padding:12px 18px 18px}
.hud-hs{font-size:13px;color:var(--ink2);background:var(--sheet);border-radius:8px;padding:8px 10px;margin-bottom:10px}
.hud-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.hud-tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--sheet);border:1px solid var(--rule);color:var(--ink2);line-height:1.45}
.hud-r{padding:9px 0;border-top:1px solid var(--rule2)}
.hud-r:first-of-type{border-top:none}
.hud-k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);font-weight:700;margin-bottom:3px}
.hud-v{font-size:13px;line-height:1.55}
.hud-v .pre{white-space:pre-wrap}
.hud-act{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--rule);background:var(--sheet)}
.hud-act .btn{flex:1 1 auto;justify-content:center}
@media(max-width:700px){
  .hud{align-items:flex-end;justify-content:center}
  .hud-card{width:100%;height:auto;max-height:88vh;border-radius:14px 14px 0 0;transform:translateY(18px)}
  .hud.on .hud-card{transform:none}
  .hud-act{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* 같은 주소(건물)에 여럿 — 시트·명부에서 함께 방문할 사람을 알아보게 */
.bldg-tag{display:inline-block;margin-top:4px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--blue-bg);color:var(--blue);white-space:nowrap;cursor:help;line-height:1.45}
.addr2 .u{font-family:var(--mono)}

/* 분류 플래그 묶음 — 자동 분류는 점선 테두리로 표시 */
.flags{display:inline-flex;gap:3px;flex-wrap:wrap;vertical-align:middle}
.flags.mined .tag{outline:1px dashed var(--amber);outline-offset:-1px}
.flagpick{display:flex;gap:6px;flex-wrap:wrap}
.flagpick label{display:inline-flex;align-items:center;gap:5px;font-size:13px;padding:6px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);cursor:pointer}
.flagpick label.on{border-color:var(--ink);background:var(--ink);color:#fff}
.flagpick input{display:none}
/* 처치 목록(환자 정보 화면) */
.proclist .pr{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule2);font-size:13px}
.proclist .pr .nm{font-weight:700;min-width:120px}
.proclist .pr .dt{font-family:var(--mono);color:var(--ink2);font-size:12px}
.proclist .pr .dt b{color:var(--ink)}
.proclist .pr.over .dt b{color:var(--red)}
.proclist .pr.off{opacity:.55}
.proclist .pr .sp{margin-left:auto;display:flex;gap:4px}
.evlist .ev{display:grid;grid-template-columns:96px 70px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule2);font-size:13px}
.evlist .ev .d{font-family:var(--mono);color:var(--ink2);font-size:12px}
.evlist .ev .k{font-weight:700}
.evlist .ev .m{color:var(--ink2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}