/* ========================================================================== 간호 노트 — 토스(Toss) 스타일 디자인 시스템 밝은 회색 배경 · 흰 라운드 카드 · 굵은 타이포 · 토스 블루 · 넉넉한 여백 테마: (JS가 기기설정/수동으로 설정) ========================================================================== */ @font-face{ font-family:"Pretendard"; src:url("fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight:45 920; font-style:normal; font-display:swap; } :root{ --sans:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",-apple-system,system-ui,sans-serif; --title-font:var(--sans); --radius:16px; --radius-sm:12px; --radius-pill:999px; --tap:44px; --maxw:720px; } [data-theme="light"]{ --bg:#F2F4F6; --surface:#FFFFFF; --surface-2:#F9FAFB; --header:#F2F4F6f2; --text:#191F28; --text-2:#4E5968; --text-3:#8B95A1; --text-4:#B0B8C1; --border:#E5E8EB; --divider:#F2F4F6; --accent:#3182F6; --accent-bg:#EFF6FF; --accent-fg:#2272EB; --on-accent:#FFFFFF; --chip:#FFFFFF; --chip-text:#4E5968; --hl-bg:#E1EEFF; --hl-fg:#1B64DA; --pin:#3182F6; --danger:#F04452; --danger-bg:#FDECEE; --danger-fg:#D6323F; --dock-bg:rgba(255,255,255,.5); --dock-bd:rgba(255,255,255,.5); --dock-hl:rgba(255,255,255,.9); --ok-bg:#E7F6EC; --ok-fg:#1B7F3B; --warn-bg:#FFF3DE; --warn-fg:#A05E03; --shadow:0 1px 4px rgba(0,0,0,.03); } [data-theme="dark"]{ --bg:#16171A; --surface:#1E1F24; --surface-2:#232429; --header:#16171Af2; --text:#E9ECEF; --text-2:#B0B8C1; --text-3:#8B95A1; --text-4:#6B7280; --border:#2A2C31; --divider:#212226; --accent:#4593FC; --accent-bg:#132741; --accent-fg:#79ADFF; --on-accent:#FFFFFF; --chip:#232429; --chip-text:#C2C8CF; --hl-bg:#1E3D5F; --hl-fg:#A8CCFF; --pin:#4593FC; --danger:#FF6B78; --danger-bg:#3A1418; --danger-fg:#FF8A94; --dock-bg:rgba(28,29,34,.44); --dock-bd:rgba(255,255,255,.14); --dock-hl:rgba(255,255,255,.08); --ok-bg:#12291A; --ok-fg:#5DD68A; --warn-bg:#332508; --warn-fg:#F5B95A; --shadow:none; } *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; scrollbar-width:none; } *::-webkit-scrollbar{ display:none; width:0; height:0; } /* 앱처럼: 스크롤바 숨김(스크롤은 유지) */ html, body{ touch-action:manipulation; overscroll-behavior:none; } /* 더블탭 확대·당겨서 새로고침 차단 */ /* UI 요소 길게 눌러도 선택 안 되게 — 노트 본문(pre, proc-view 등)은 복사 가능 유지 */ .app-header, .cat-tile, .duty-banner, .back-row, .card-head, .fab, .seg, .badge, .section-label, .tool-grid, .card-actions button{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } /* iOS 상태바 뒤로 비치는 최심층 배경 — JS 로드 전에도 기기 모드와 일치 */ html{ background:#F2F4F6; } @media (prefers-color-scheme: dark){ html{ background:#16171A; } } html[data-theme="light"]{ background:#F2F4F6; } html[data-theme="dark"]{ background:#16171A; } html,body{ margin:0; padding:0; } body{ font-family:var(--sans); background:var(--bg); color:var(--text); font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%; overscroll-behavior-y:none; letter-spacing:-.01em; } .wrap{ max-width:var(--maxw); margin:0 auto; } /* 헤더/검색 */ .app-header{ position:sticky; top:0; z-index:40; background:var(--header); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); padding-top:env(safe-area-inset-top); } .app-header .wrap{ padding:12px 18px 10px; } .brand-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:22px; letter-spacing:-.03em; color:var(--text); } .brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); } .icon-btn{ min-width:var(--tap); min-height:var(--tap); border:none; background:transparent; color:var(--text-2); border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .icon-btn:active{ transform:scale(.92); background:var(--divider); } .search-box{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid transparent; border-radius:14px; padding:0 15px; height:52px; box-shadow:var(--shadow); } .search-box:focus-within{ border-color:var(--accent); } .search-box svg{ flex:none; } .search-box input{ flex:1; border:none; outline:none; background:transparent; color:var(--text); font-size:16px; font-family:inherit; height:100%; letter-spacing:-.01em; } .search-box input::placeholder{ color:var(--text-3); } .search-box .clear{ display:none; color:var(--text-3); } .search-box.has-text .clear{ display:inline-flex; } .alias-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .alias-row:empty{ display:none; } /* 검색 안 할 땐 빈 줄 여백 제거 */ .alias-chip{ font-size:12.5px; font-weight:600; color:var(--accent-fg); background:var(--accent-bg); padding:5px 11px; border-radius:var(--radius-pill); } /* 카테고리 색·아이콘 선택 */ .cat-prev-tile{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow); margin:2px 0 16px; } .cat-prev-tile .cat-ic{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none; } .cat-prev-tile .cat-nm{ font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--text); } .cat-prev-tile .cat-ct{ font-size:12.5px; color:var(--text-3); } .pick-label{ display:block; font-size:13px; font-weight:700; color:var(--text-2); margin:0 0 9px; } .color-row{ display:flex; flex-wrap:wrap; gap:11px; margin-bottom:18px; } .color-sw{ width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; padding:0; position:relative; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); } .color-sw.sel{ box-shadow:0 0 0 3px var(--bg), 0 0 0 5px currentColor; } .color-sw.sel::after{ content:''; position:absolute; inset:0; margin:auto; width:12px; height:7px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) translate(1px,-2px); } .icon-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-bottom:6px; } .icon-opt{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--text-2); cursor:pointer; padding:0; } .icon-opt.sel{ border-color:var(--accent); color:var(--accent); background:var(--accent-bg); border-width:2px; } .icon-opt svg{ width:22px; height:22px; } /* ＋ 추가 메뉴 */ .add-row{ display:flex; align-items:center; gap:14px; width:100%; background:var(--surface); border:none; border-radius:16px; padding:16px; cursor:pointer; box-shadow:var(--shadow); font-family:inherit; text-align:left; margin-bottom:10px; -webkit-user-select:none; user-select:none; } .add-row:active{ transform:scale(.98); } .add-ic{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none; } .add-tx{ display:flex; flex-direction:column; gap:2px; } .add-tx b{ font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--text); } .add-tx span{ font-size:13px; color:var(--text-3); } /* 최근 본 — 제목 위주 한 줄 카드 */ .recent-row{ display:flex; align-items:center; gap:10px; width:100%; background:var(--surface); border:none; border-radius:16px; padding:15px 16px; cursor:pointer; box-shadow:var(--shadow); font-family:inherit; text-align:left; margin-bottom:9px; -webkit-user-select:none; user-select:none; } .recent-row:active{ transform:scale(.98); } .rr-title{ flex:1; min-width:0; font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rr-cat{ flex:none; font-size:12px; font-weight:600; color:var(--text-3); } /* 카테고리 내부 화면의 뒤로 헤더 */ .back-row{ display:flex; align-items:center; gap:8px; width:100%; background:transparent; border:none; padding:6px 2px 12px; cursor:pointer; font-family:inherit; text-align:left; } .back-row svg{ color:var(--text-3); flex:none; } .back-row:active svg{ transform:translateX(-2px); } .bk-title{ font-size:19px; font-weight:700; letter-spacing:-.03em; color:var(--text); } .bk-cnt{ font-size:13.5px; font-weight:600; color:var(--text-3); margin-top:3px; } /* 본문 */ main{ padding:6px 18px 120px; } .section-label{ display:flex; align-items:center; gap:7px; font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.02em; margin:20px 4px 11px; } .section-label:first-child{ margin-top:6px; } .section-label svg{ color:var(--accent); } .result-meta{ font-size:13.5px; font-weight:600; color:var(--text-3); margin:4px 4px 12px; } /* 카테고리 타일 그리드 */ .cat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .cat-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; background:var(--surface); border:none; border-radius:16px; padding:16px 16px 18px; cursor:pointer; box-shadow:var(--shadow); text-align:left; font-family:inherit; } .cat-tile:active{ transform:scale(.97); } .cat-ic{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:none; } .cat-tx{ display:flex; flex-direction:column; gap:3px; } .cat-nm{ font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--text); line-height:1.3; } .cat-ct{ font-size:13px; font-weight:600; color:var(--text-3); } @media (min-width:520px){ .cat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:760px){ .cat-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } } /* 듀티 컨텍스트 배너 */ .duty-banner{ display:flex; align-items:center; gap:12px; width:100%; background:var(--accent-bg); border:none; border-radius:16px; padding:14px 16px; cursor:pointer; font-family:inherit; text-align:left; margin-bottom:4px; } .duty-banner:active{ transform:scale(.98); } .duty-chip{ width:40px; height:40px; border-radius:12px; background:var(--accent); color:#fff; font-size:17px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; } .duty-tx{ flex:1; display:flex; flex-direction:column; gap:1px; } .duty-tx b{ font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--accent-fg); } .duty-tx span{ font-size:12.5px; font-weight:500; color:var(--accent-fg); opacity:.75; } .duty-banner svg{ color:var(--accent-fg); opacity:.6; } /* 도구 타일 (계산기·SBAR) */ .tool-grid{ display:grid; grid-template-columns:1fr; gap:11px; } .tool-note{ font-size:12px; color:var(--text-3); line-height:1.6; margin:14px 2px 0; } /* 계산기 */ .calc-seg{ margin-bottom:16px; } .calc-seg button{ padding:10px 4px; font-size:13.5px; } .calc-form .field{ margin-bottom:12px; } .calc-row{ display:flex; gap:9px; } .calc-row .field{ flex:1; } .calc-result{ background:var(--surface); border-radius:14px; padding:15px 16px; margin-top:6px; } .calc-result .cr-line{ display:flex; align-items:baseline; justify-content:space-between; padding:5px 0; } .calc-result .cr-line + .cr-line{ border-top:1px solid var(--divider); } .cr-label{ font-size:13.5px; font-weight:600; color:var(--text-3); } .cr-value{ font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--accent-fg); } .cr-value small{ font-size:13px; font-weight:600; color:var(--text-3); margin-left:3px; } .calc-band{ margin-top:10px; padding:11px 14px; border-radius:12px; font-size:14.5px; font-weight:700; text-align:center; } .band-low{ background:var(--ok-bg, #E7F6EC); color:var(--ok-fg, #1B7F3B); } .band-mid{ background:var(--warn-bg, #FFF3DE); color:var(--warn-fg, #A05E03); } .band-high{ background:var(--danger-bg); color:var(--danger-fg); } .calc-score-item{ margin-bottom:11px; } .calc-score-item label{ display:block; font-size:13.5px; font-weight:600; color:var(--text-2); margin-bottom:6px; } .calc-score-item select{ width:100%; font-family:inherit; font-size:15px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px; outline:none; } /* SBAR */ .sbar-sec{ display:flex; gap:11px; margin-bottom:14px; } .sbar-sec .grow{ flex:1; min-width:0; } .sbar-sec label{ display:block; font-size:13px; font-weight:700; color:var(--text-2); margin-bottom:6px; } .sbar-sec textarea{ width:100%; font-family:inherit; font-size:15px; line-height:1.55; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:11px 12px; outline:none; resize:vertical; } .sbar-sec textarea:focus{ border-color:var(--accent); background:var(--surface); } .sbar-tag{ width:34px; height:34px; border-radius:10px; color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex:none; margin-top:24px; } .sbar-tag.s{ background:#3182F6; } .sbar-tag.b{ background:#14B8A6; } .sbar-tag.a{ background:#F59E0B; } .sbar-tag.r{ background:#8B5CF6; } /* 고위험 약물 배지 · 브라우즈 미리보기 */ .badge.alert{ background:var(--danger-bg); color:var(--danger-fg); } .badge.ckb{ background:var(--accent-bg); color:var(--accent-fg); } .card-prev{ font-size:13px; line-height:1.5; color:var(--text-3); margin-top:7px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card.open .card-prev{ display:none; } /* 펼치면 본문이 보이므로 미리보기 중복 숨김 */ /* 본문 체크박스 (세션용) */ .ck{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; padding:0; border:2px solid var(--text-4); border-radius:7px; background:var(--surface); cursor:pointer; box-sizing:border-box; } .ck::after{ content:''; width:11px; height:6px; border-left:2.5px solid transparent; border-bottom:2.5px solid transparent; transform:rotate(-45deg) translate(0,-1px); } .ck.on{ background:var(--accent); border-color:var(--accent); } .ck.on::after{ border-left-color:#fff; border-bottom-color:#fff; } .ck:active{ transform:scale(.9); } /* 체크리스트 (줄글 중간 체크박스를 세로 목록으로 분리) */ .ck-list{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:4px 12px; margin:8px 0; } .flow-item.ck-list{ margin:6px 0; } .ck-row{ display:flex; align-items:flex-start; gap:11px; padding:11px 0; cursor:pointer; -webkit-user-select:none; user-select:none; } .ck-row + .ck-row, .ck-tail{ border-top:1px solid var(--divider); } .ck-row .ck{ margin-top:0; } .ck-lb{ flex:1; min-width:0; font-size:14.5px; line-height:1.45; color:var(--text); word-break:break-word; } .ck-row .ck.on + .ck-lb{ color:var(--text-3); text-decoration:line-through; text-decoration-color:var(--text-4); } .ck-tail{ font-size:13.5px; line-height:1.5; color:var(--text-3); padding:9px 0 4px; } .proc-line + .proc-line{ margin-top:1px; } /* 근무 흐름 — 시간대별 가로 보드 (컬럼 스와이프 · 컬럼 안 세로 스크롤 · '지금' 강조) */ .flow-board-wrap{ border-top:1px solid var(--divider); padding-top:12px; } .tl-jump{ display:flex; align-items:center; gap:7px; margin:0 auto 12px; padding:8px 15px; font-size:13px; font-weight:700; color:var(--accent); background:var(--accent-bg); border:none; border-radius:999px; cursor:pointer; box-shadow:var(--shadow); -webkit-user-select:none; user-select:none; } .tl-jump:active{ transform:scale(.96); } .tl-jump-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:tlpulse 1.6s ease-in-out infinite; } @keyframes tlpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } } /* 가로 스크롤 컬럼 트랙 — 카드 좌우 패딩(18px)만큼 밖으로 빼서 화면 끝까지 */ .flow-board{ display:flex; gap:11px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -18px; padding:2px 18px 4px; } .fb-col{ scroll-snap-align:center; scroll-snap-stop:always; flex:0 0 84%; max-width:320px; display:flex; flex-direction:column; background:var(--surface-2); border:1px solid var(--border); border-radius:16px; overflow:hidden; } .fb-col-head{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--divider); } .fb-time{ font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--text); } .fb-now{ font-size:11px; font-weight:800; color:var(--on-accent); background:var(--accent); padding:2px 8px; border-radius:999px; } .fb-col-body{ padding:6px 14px 12px; overflow-y:auto; overscroll-behavior:contain; max-height:46vh; } /* 상태: 지난 시간(흐림) · 지금(파란 강조) · 예정(보통) */ .fb-col.past{ opacity:.66; } .fb-col.now{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); } .fb-col.now .fb-col-head{ background:var(--accent-bg); border-bottom-color:transparent; } .fb-col.now .fb-time{ color:var(--accent); } .flow-item{ font-size:14.5px; line-height:1.6; color:var(--text); padding:4px 0; word-break:break-word; } .flow-item.sub{ font-size:13px; color:var(--text-3); padding:2px 0 2px 30px; } /* 검사·시술 구조화 뷰 */ .proc-view{ border-top:1px solid var(--divider); padding-top:8px; font-size:14.5px; } .proc-phase{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:-.01em; color:var(--accent-fg); background:var(--accent-bg); border-radius:999px; padding:5px 12px; margin:12px 0 4px; } .proc-row{ display:flex; gap:12px; padding:9px 2px; border-bottom:1px solid var(--divider); } .proc-row:last-child{ border-bottom:none; } .proc-k{ flex:none; width:62px; font-size:13px; font-weight:700; color:var(--text-3); padding-top:2px; } .proc-v{ flex:1; min-width:0; line-height:1.65; color:var(--text); word-break:break-word; } .proc-free{ line-height:1.65; color:var(--text-2); padding:6px 2px; } .card{ background:var(--surface); border-radius:var(--radius); margin-bottom:11px; overflow:hidden; box-shadow:var(--shadow); } .card-head{ display:flex; align-items:flex-start; gap:10px; padding:17px 18px; cursor:pointer; } .card-head .grow{ flex:1; min-width:0; } .card-title{ font-family:var(--title-font); font-size:16.5px; font-weight:700; letter-spacing:-.02em; color:var(--text); line-height:1.35; word-break:break-word; } .card-sub{ font-size:13px; color:var(--text-3); margin-top:3px; font-weight:500; } .badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .badge{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); background:var(--divider); color:var(--text-2); } .badge.code{ background:var(--accent-bg); color:var(--accent-fg); font-family:ui-monospace,monospace; letter-spacing:.2px; } .badge.cat{ background:var(--divider); color:var(--text-2); } .card-head .star{ color:var(--text-4); background:none; border:none; padding:0; cursor:pointer; min-width:44px; min-height:44px; margin:-10px -4px -10px 0; display:flex; align-items:center; justify-content:center; } .card-head .star.on{ color:var(--pin); } .card-head .chev{ color:var(--text-4); transition:transform .2s; min-width:34px; min-height:44px; margin:-10px 0; display:flex; align-items:center; justify-content:center; } .card.open .chev{ transform:rotate(180deg); } .card-body{ display:none; padding:0 18px 18px; } .card.open .card-body{ display:block; } .card-body pre{ font-family:var(--sans); white-space:pre-wrap; word-break:break-word; margin:0; font-size:15px; line-height:1.75; color:var(--text-2); border-top:1px solid var(--divider); padding-top:14px; letter-spacing:-.01em; } .card-body .imgs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .card-body .imgs img{ max-width:100%; border-radius:var(--radius-sm); cursor:zoom-in; } .card-actions{ display:flex; gap:8px; margin-top:14px; } .card-actions button{ font-size:14px; font-weight:600; color:var(--text-2); background:var(--divider); border:none; border-radius:10px; padding:9px 15px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .card-actions button:active{ transform:scale(.97); } mark{ background:var(--hl-bg); color:var(--hl-fg); border-radius:4px; padding:0 3px; font-weight:600; } .empty{ text-align:center; color:var(--text-3); padding:70px 20px; font-size:15px; } .empty svg{ width:44px; height:44px; margin-bottom:14px; opacity:.5; } /* FAB */ /* 하단 플로팅 툴바 (글래스모피즘) */ .dock{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:45; max-width:calc(100vw - 28px); display:flex; align-items:center; gap:5px; padding:5px; border-radius:22px; background:var(--dock-bg); border:1px solid var(--dock-bd); box-shadow:0 8px 30px rgba(0,0,0,.18), inset 0 1px 0 var(--dock-hl); backdrop-filter:blur(26px) saturate(200%); -webkit-backdrop-filter:blur(26px) saturate(200%); transition:opacity .2s, transform .2s; } .dock-scroll{ display:flex; align-items:center; gap:3px; overflow-x:auto; scrollbar-width:none; } .dock-scroll::-webkit-scrollbar{ display:none; } .dock-btn{ flex:none; display:flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:none; background:transparent; color:var(--text-2); border-radius:14px; cursor:pointer; -webkit-user-select:none; user-select:none; } .dock-btn:active{ transform:scale(.9); } .dock-btn:hover{ color:var(--accent); background:var(--accent-bg); } .dock-add{ flex:none; width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(49,130,246,.42); } .dock-add:active{ transform:scale(.9); } .dock-add svg{ width:23px; height:23px; } /* 시트·로그인·잠금 열림 + 카테고리·검색 화면에서는 dock 숨김 (메인 전용) */ body:has(.overlay.show) .dock, body:has(.lock-screen.show) .dock, body.subview .dock{ opacity:0; transform:translateX(-50%) translateY(24px); pointer-events:none; } /* 바텀시트 */ /* 오버레이는 '실제 보이는 영역'(--vvh/--vvo, 키보드 제외)에만 그려짐 */ .overlay{ position:fixed; inset:0; top:var(--vvo,0px); bottom:auto; height:var(--vvh,100%); z-index:60; background:rgba(0,0,0,.5); display:none; align-items:flex-end; justify-content:center; } .overlay.show{ display:flex; } /* 시트 최대 높이 = 보이는 영역에서 상단 상태바(safe-area-top)+22px 여백을 뺀 만큼 → 시트가 시계·배터리까지 안 올라감 */ .sheet{ background:var(--bg); width:100%; max-width:var(--maxw); max-height:calc(var(--vvh,100vh) - env(safe-area-inset-top) - 22px); overflow-y:auto; border-radius:24px 24px 0 0; animation:slideUp .26s cubic-bezier(.32,.72,0,1); padding-bottom:env(safe-area-inset-bottom); overscroll-behavior:contain; } .sheet::before{ content:""; display:block; width:38px; height:4px; border-radius:2px; background:var(--border); margin:10px auto 0; } @keyframes slideUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} } .sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px 14px; } .sheet-head h2{ margin:0; font-size:20px; font-weight:700; letter-spacing:-.03em; } .sheet-body{ padding:4px 18px 24px; } .field{ margin-bottom:16px; } .field label{ display:block; font-size:14px; font-weight:600; color:var(--text-2); margin-bottom:8px; } .field input,.field textarea,.field select{ width:100%; font-family:inherit; font-size:16px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px; outline:none; letter-spacing:-.01em; } .field textarea{ min-height:180px; resize:vertical; line-height:1.65; } .field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--accent); background:var(--surface); } .btn{ font-family:inherit; font-size:16px; font-weight:700; border-radius:14px; padding:15px 16px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); letter-spacing:-.02em; box-shadow:var(--shadow); } .btn:active{ transform:scale(.98); } .btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); } .btn.danger{ color:var(--danger); background:var(--surface); border-color:var(--border); } .btn-row{ display:flex; gap:10px; margin-top:4px; } .btn-row .btn{ flex:1; } .opt-group{ margin-bottom:26px; } .opt-group h3{ font-size:14px; font-weight:700; color:var(--text-2); margin:0 0 12px; letter-spacing:-.02em; } .seg{ display:flex; background:var(--divider); border-radius:12px; padding:4px; gap:4px; } .seg button{ flex:1; border:none; background:transparent; color:var(--text-3); padding:11px; font-size:14.5px; font-weight:600; font-family:inherit; cursor:pointer; border-radius:9px; letter-spacing:-.01em; } .seg button.sel{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); } /* 생체인증 잠금 화면 */ .lock-screen{ position:fixed; inset:0; top:var(--vvo,0px); bottom:auto; height:var(--vvh,100%); z-index:100; background:var(--bg); display:none; align-items:center; justify-content:center; padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); overscroll-behavior:none; overflow-y:auto; } .lock-screen.show{ display:flex; } .lock-inner{ width:100%; max-width:320px; text-align:center; } .lock-ic{ width:74px; height:74px; border-radius:24px; background:var(--accent-bg); color:var(--accent-fg); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; } .lock-inner h2{ margin:0 0 6px; font-size:21px; font-weight:700; letter-spacing:-.03em; color:var(--text); } .lock-inner p{ margin:0 0 22px; font-size:14.5px; color:var(--text-3); } .lock-inner .btn{ width:100%; } .lock-pin-row{ display:flex; gap:8px; margin-top:12px; } .lock-pin-row input{ flex:1; font-family:inherit; font-size:16px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px 14px; outline:none; text-align:center; letter-spacing:.2em; } .lock-pin-row input:focus{ border-color:var(--accent); } .lock-pin-row .btn{ width:auto; flex:none; } .lock-msg{ min-height:20px; margin:14px 0 0; font-size:13px; color:var(--danger); } .lightbox{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; padding:16px; } .lightbox.show{ display:flex; } .lightbox img{ max-width:100%; max-height:100%; border-radius:10px; } @media (min-width:760px){ main{ padding:8px 20px 120px; } .overlay{ align-items:center; } .sheet{ border-radius:24px; max-height:min(88vh, calc(var(--vvh,100vh) - 24px)); } .sheet::before{ display:none; } } /* 새 버전 업데이트 토스트 (SW prompt 모드) */ .update-toast{ position:fixed; left:50%; transform:translateX(-50%); top:calc(env(safe-area-inset-top) + 12px); z-index:120; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 24px); white-space:nowrap; padding:9px 10px 9px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.18); font-size:13.5px; font-weight:600; color:var(--text); } .update-toast > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } .update-toast button{ flex:none; border:none; background:var(--accent); color:#fff; font-weight:700; font-size:13px; white-space:nowrap; padding:7px 13px; border-radius:999px; cursor:pointer; } /* 간편 로그인 등록 제안 모달 (confirm 대체) */ .bio-modal-back{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.42); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } .bio-modal{ width:100%; max-width:340px; background:var(--surface); border-radius:22px; padding:26px 22px 20px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3); } .bio-ic{ width:60px; height:60px; margin:0 auto 14px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:var(--accent); background:var(--accent-bg); } .bio-modal h2{ margin:0 0 8px; font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--text); } .bio-modal p{ margin:0 0 20px; font-size:14px; line-height:1.6; color:var(--text-3); } .bio-modal p b{ color:var(--text-2); font-weight:700; } /* 카테고리 관리(⋯) · 기본노트 복원 행 · 작은 버튼 */ .back-wrap{ display:flex; align-items:center; gap:8px; } .back-wrap .back-row{ flex:1; min-width:0; } .back-manage{ flex:none; width:40px; height:40px; border-radius:13px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); display:flex; align-items:center; justify-content:center; cursor:pointer; } .back-manage:active{ transform:scale(.92); } .restore-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--divider); } .restore-row:last-of-type{ border-bottom:none; } .restore-row .rs-title{ flex:1; min-width:0; font-size:13.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .btn-sm{ padding:8px 14px; font-size:13px; border-radius:10px; } .back-add{ color:var(--accent); border-color:var(--accent-bg); background:var(--accent-bg); } /* 전문 입력 양식 (약물·검사시술·근무흐름) */ .proc-form-h{ margin:16px 0 8px; font-size:13px; font-weight:800; color:var(--accent); letter-spacing:-.01em; } .fr-time{ font-family:inherit; font-size:14.5px; font-weight:700; text-align:center; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 8px; outline:none; } .fr-time.bad{ border-color:var(--danger); color:var(--danger); } .fr-time:focus{ border-color:var(--accent); } .fr-del{ flex:none; width:32px; border:none; background:transparent; color:var(--text-4); font-size:20px; cursor:pointer; border-radius:10px; } .fr-del:active{ background:var(--accent-bg); } /* 근무 흐름: 시간대(슬롯) → 항목 구조 에디터 */ .fslot{ background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:12px; margin-bottom:12px; } .fslot-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; } .fslot-head .fr-time{ width:92px; flex:none; } .fslot-label{ flex:1; font-size:12px; font-weight:700; color:var(--text-4); } .fslot-items{ display:flex; flex-direction:column; gap:8px; } .fitem{ display:flex; flex-direction:column; gap:5px; } .fitem-main{ display:flex; align-items:center; gap:9px; } .fitem-ck{ flex:none; width:20px; height:20px; border:2px solid var(--text-4); border-radius:6px; background:var(--surface); } .fitem-text{ flex:1; min-width:0; font-family:inherit; font-size:14.5px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:9px 12px; outline:none; } .fitem-text:focus{ border-color:var(--accent); } .fitem-del{ flex:none; width:28px; border:none; background:transparent; color:var(--text-4); font-size:19px; cursor:pointer; border-radius:9px; } .fitem-del:active{ background:var(--accent-bg); } .fitem-desc{ margin-left:29px; font-family:inherit; font-size:13px; line-height:1.55; color:var(--text-2); background:var(--surface); border:1px dashed var(--border); border-radius:10px; padding:7px 11px; outline:none; resize:vertical; } .fitem-desc:focus{ border-style:solid; border-color:var(--accent); } .fitem-desc::placeholder{ color:var(--text-4); } .fitem-add{ align-self:flex-start; margin-left:29px; border:none; background:transparent; color:var(--accent); font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; padding:4px 2px; } /* 카테고리 페이지 헤더 (← 제목 · 개수 · 액션) */ .page-head{ gap:4px; justify-content:flex-start; } .hd-back{ flex:none; width:36px; height:36px; margin-left:-9px; border:none; background:transparent; color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:11px; } .hd-back:active{ background:var(--accent-bg); transform:scale(.92); } .hd-title{ flex:1; min-width:0; display:flex; align-items:baseline; gap:7px; font-weight:700; font-size:20px; letter-spacing:-.03em; color:var(--text); overflow:hidden; } .hd-title .hd-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hd-cnt{ flex:none; font-size:12.5px; font-weight:600; color:var(--text-4); } .hd-actions{ flex:none; display:flex; gap:2px; } .hd-act{ width:36px; height:36px; border:none; background:transparent; color:var(--text-2); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:11px; } .hd-act:active{ background:var(--accent-bg); transform:scale(.92); } .hd-add{ color:var(--accent); } /* 타임라인 체크 항목 — 가벼운 행 (회색 박스 없이) */ .tl-ck{ display:flex; align-items:flex-start; gap:10px; padding:5px 0; cursor:pointer; -webkit-user-select:none; user-select:none; } .tl-ck .ck{ width:22px; height:22px; margin-top:1px; border-radius:6px; } .tl-ck .ck-lb{ font-size:14.5px; line-height:1.6; } .tl-ck .ck.on + .ck-lb{ color:var(--text-3); text-decoration:line-through; text-decoration-color:var(--text-4); } .tl-ck:active .ck{ transform:scale(.9); } /* 근무 흐름 전용 풀스크린 페이지 */ .work-page{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; background:var(--bg); } .work-head{ flex:none; display:flex; align-items:center; gap:6px; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px; background:var(--header); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--divider); } .work-title{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; } .work-nm{ font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .work-prog{ font-size:12px; font-weight:600; color:var(--accent); } .work-body{ flex:1; min-height:0; padding:12px 18px calc(env(safe-area-inset-bottom) + 14px); } /* 페이지 안에서는 보드·컬럼이 높이를 꽉 채우고, 각 컬럼 본문만 세로 스크롤 */ .work-body .flow-board-wrap{ height:100%; display:flex; flex-direction:column; border-top:none; padding-top:0; } .work-body .flow-board{ flex:1; min-height:0; align-items:stretch; padding-top:4px; padding-bottom:4px; } .work-body .fb-col{ flex:0 0 88%; max-width:380px; } .work-body .fb-col-body{ flex:1; min-height:0; max-height:none; } /* 근무 흐름 카테고리 — 교대(D/E/N) 대시보드 카드 */ .duty-card{ display:flex; align-items:center; gap:14px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:12px; cursor:pointer; box-shadow:var(--shadow); font-family:inherit; text-align:left; -webkit-user-select:none; user-select:none; } .duty-card:active{ transform:scale(.985); } .duty-card.now{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg), var(--shadow); } .dc-chip{ flex:none; width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; letter-spacing:-.02em; color:#fff; background:var(--text-3); } .dc-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; } .dc-top{ display:flex; align-items:center; gap:8px; } .dc-name{ font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--text); } .dc-now{ font-size:11px; font-weight:800; color:var(--on-accent); background:var(--accent); padding:2px 9px; border-radius:999px; } .dc-sub{ font-size:12.5px; color:var(--text-3); font-weight:500; } .dc-prog{ display:flex; align-items:center; gap:9px; margin-top:2px; } .dc-bar{ flex:1; height:6px; border-radius:999px; background:var(--divider); overflow:hidden; } .dc-fill{ display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .3s ease; } .dc-cnt{ flex:none; font-size:12px; font-weight:700; color:var(--text-3); font-variant-numeric:tabular-nums; } .duty-card > svg{ flex:none; color:var(--text-4); } /* 빈 근무 페이지 안내 */ .work-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; height:100%; padding:0 24px; } .work-empty p{ margin:0; font-size:15px; color:var(--text-3); } .work-empty .btn{ min-width:200px; }