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

:root{
  --paper:#F5F6F4;      /* 진료실 벽 톤의 바탕 */
  --sheet:#FFFFFF;
  --ink:#17212B;
  --ink2:#5C6873;
  --ink3:#98A3AD;
  --rule:#D9DEE3;
  --rule2:#EEF1F3;
  --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}
html{-webkit-text-size-adjust:100%}
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:15px;margin:0;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.top h1 .logo{color:var(--blue)}
.top .nav{margin-left:auto;display:flex;gap:2px}
.top .nav a{font-size:13px;font-weight:500;padding:6px 10px;border-radius:6px;color:var(--ink2)}
.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)}
.wrap{max-width:1280px;margin:0 auto;padding:20px 20px 90px}
.wrap.narrow{max-width:760px}

/* ── 날짜 스탬프 (시트 헤더) ── */
.sheet-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.stamp{display:flex;align-items:center;gap:6px}
.stamp .d{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;font-family:var(--mono)}
.stamp .w{font-size:15px;color:var(--ink2);font-weight:500;margin-left:4px;padding-top:10px}
.stamp input[type=date]{font-family:var(--mono);font-size:14px;padding:6px 8px;width:auto;border-color:transparent;background:transparent;color:var(--ink3)}
.stamp input[type=date]:hover{border-color:var(--rule);background:#fff}
.sum{font-size:13px;color:var(--ink2);padding-bottom:6px}
.sum b{color:var(--ink);font-family:var(--mono)}
.sum .done{color:var(--green)}
.tools{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;padding-bottom:2px}

/* ── 버튼 ── */
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;min-width:1240px} /* 좁은 창은 가로 스크롤 — 환자 상태 열 최소 300px 보장 */
table.roster th{position:sticky;top:0;z-index:5;background:#F9FAFB;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--ink2);text-transform:uppercase;padding:9px 12px;border-bottom:1px solid var(--rule)}
table.roster td{vertical-align:top;padding:12px 12px 13px;border-bottom:1px solid var(--rule2);font-size:13.5px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
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:180px}
col.c-cond{width:auto}
col.c-act{width:210px}
col.c-do{width:120px}

.seq{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink);line-height:1.1}
.seq small{display:block;font-size:10.5px;color:var(--ink3);font-family:var(--font);font-weight:600;letter-spacing:.04em;margin-top:3px}
tr.done .seq{color:var(--green)}
tr.done .seq small{color:var(--green)}

.pname{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pname .re{font-size:11.5px;font-weight:600;color:var(--ink3);margin-left:3px}
.pmeta{color:var(--ink2);font-size:12.5px;margin-top:1px}
.pmeta .mono{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.hs{color:var(--red);font-size:12.5px;font-weight:600;margin-top:4px;line-height:1.4}

.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:4px;background:var(--rule2);color:var(--ink2);vertical-align:1px;white-space:nowrap}
.badge.g1,.badge.g2{background:var(--green-bg);color:var(--green)}
.badge.g3{background:var(--amber-bg);color:var(--amber)}
.badge.g4,.badge.g5{background:var(--red-bg);color:var(--red)}
.badge.imp{background:var(--red-bg);color:var(--red)}
.badge.ok{background:var(--green-bg);color:var(--green)}

.addr{font-weight:500}
.addr2{color:var(--ink2);font-size:13px}
.code{font-family:var(--mono);font-size:12px;background:var(--rule2);padding:1px 6px;border-radius:4px;color:var(--ink);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);padding:2px 7px;border-radius:4px;font-size:12.5px;margin-top:4px;line-height:1.4}
.memo.sched{background:var(--blue-bg);color:var(--blue)}

.tel div{padding:1px 0;line-height:1.45}
.tel a{color:var(--ink);font-family:var(--mono);font-size:12.5px;font-weight:500}
.tel a.pri{background:var(--mark);padding:0 4px;border-radius:3px;font-weight:600}
.tel .who{color:var(--ink2);font-size:12.5px;margin-left:4px}
.tel .note{color:var(--ink3);font-size:11.5px;display:block;margin-left:2px}

.pre,.note{white-space:pre-wrap;font-size:13px;line-height:1.5}
.note{margin-top:4px}
.pre.small{font-size:12.5px;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(--blue);text-transform:uppercase}
.act.important .pre{color:var(--red);font-weight:500}
.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}

.chips{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 4px}
.chip{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--blue-bg);color:var(--blue);border:1px solid transparent;line-height:1.5}
.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:12.5px}
.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)}

/* ── 카드·폼 ── */
.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:13px;margin:0 0 6px;font-weight:700;letter-spacing:.04em;color:var(--ink2);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=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:15px;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:1fr 1.2fr auto;gap:6px;margin-bottom:6px;align-items:center}
.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:13.5px;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:12.5px;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:15px}
@media(min-width:700px){.modal{align-items:center}.dlg{border-radius:12px}}

/* ── 달력 ── */
.dlg.cal{max-width:420px}
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cal-head b{font-size:16px;min-width:110px;text-align:center}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11.5px;color:var(--ink3);font-weight:700;margin-bottom:4px}
.cal-week span:first-child{color:var(--red)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-d{height:52px;padding:4px 0 0;border:1px solid transparent;border-radius:8px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;font-weight:500;color:var(--ink)}
.cal-d.pad{pointer-events:none}
.cal-d:hover{background:var(--rule2)}
.cal-d .n{font-size:14px;line-height:1.2}
.cal-d .c{font-size:10.5px;font-weight:700;padding:0 5px;border-radius:8px;background:var(--rule2);color:var(--ink2)}
.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.today .n{text-decoration:underline;text-underline-offset:3px}
.cal-d.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cal-legend{display:flex;gap:14px;margin-top:12px;font-size:12px;color:var(--ink2)}
.cal-legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.cal-legend .sw.done{background:var(--green-bg);border:1px solid var(--green)}
.cal-legend .sw.plan{background:var(--blue-bg);border:1px solid var(--blue)}
.cal-legend .sw.sel{border:1.5px solid var(--ink)}

/* ── 모바일: 표를 행 카드로 ── */
@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:12.5px}
  .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:10.5px;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}
  .do{flex-direction:row;flex-wrap:wrap;padding-bottom:8px}
  .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}
}

@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 .grip{cursor:grab;color:var(--ink3);font-size:18px;padding:0 4px;touch-action:none;user-select:none;-webkit-user-select:none;line-height:1}
.drag-item .grip:active{cursor:grabbing}
.drag-item.dragging{background:var(--blue-bg);outline:1px solid var(--blue);border-radius: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}}