/* ══════════════════════════════════════════════════════════════════════════
케어바다 화면 공통 결 — v3
바탕 = 자료/목업/20260813/_공통-v3.css (2026-08-13 결 · 2026-08-16 글자크기)
옮긴 날 = 2026-08-27
── 이 파일을 쓰는 법 ──────────────────────────────────────────────
화면에서 이렇게 부릅니다.
그리고 v3 결로 바꿀 덩어리를 class="v3" 로 감쌉니다.
… 여기 안쪽만 새 결이 됩니다 …
⛔ 감싸지 않으면 아무 일도 일어나지 않습니다. 일부러 그렇게 만들었습니다.
까닭은 바로 아래.
── 그냥 옮기면 안 되는 까닭 셋 (2026-08-27 실제 파일을 세어 확인) ──
1. 이름이 겹칩니다. 지금 화면 여덟 개가 이미 쓰고 있는 이름을 세어 보니
btn 162곳 · row 91곳 · card 83곳 · title 54곳 · agree 23곳 · box 23곳.
목업 CSS 를 그대로 얹으면 이 자리들이 전부 딸려 바뀝니다.
→ 그래서 모든 줄을 .v3 안쪽으로만 걸었습니다. 밖은 손도 못 댑니다.
2. 색 이름도 겹칩니다. 출퇴근 화면이 :root 에 --blue --ink --line --bg 를
이미 쓰고 있고, 목업은 같은 이름에 다른 색을 넣습니다.
→ 그래서 v3 색은 전부 --v3- 를 붙였고, :root 가 아니라 .v3 에 얹습니다.
3. 글꼴은 이름만 적으면 안 불러와집니다. 목업은 Pretendard 를 바깥
CDN 에서 받아 썼는데, 진짜 화면에는 그 줄이 없습니다.
→ 지금은 서버에 이미 있는 SUIT 를 먼저 씁니다. (아래 '글꼴' 칸 참고)
── 목업에서 뺀 것 ────────────────────────────────────────────────
목업 전용 껍데기는 안 가져왔습니다 — 폰 틀(.phone .punch .statusbar),
화면 늘어놓기(.cells .cell .wrap), 머리말(.head .badges), 설명칸(.cap2 .memo),
footer. 진짜 화면에는 쓸 데가 없습니다.
── 글자 크기 자 (목업에서 그대로 옮김) ───────────────────────────
쓰는 분이 40~60대 간병인이고 병원에서 급하게 폰으로 봅니다.
26px 화면 제목
17px 묶음 제목 · 단추 글자 (17.5는 큰 단추)
16px ⭐ 본문 바닥 — 목록·값·입력·알림·동의처럼 읽어야 하는 글자
15px 보조 설명
14px 라벨 · 상태 알약 (읽는 글이 아니라 이름표)
⛔ 16px 아래로 본문을 내리지 마세요.
⛔ 누르는 곳은 44×44px 바닥.
⭐ 색만으로 알리지 마세요 — 아이콘이나 글자를 같이 두세요.
── 고칠 때 ───────────────────────────────────────────────────────
/static/ 은 7일 캐시에 immutable 이 걸려 있습니다(nginx).
이 파일을 고치면 화면 쪽 ?v= 날짜도 같이 올려야 바뀐 것이 보입니다.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. 글꼴 ───────────────────────────────────────────────────────────────
SUIT = 이미 서버에 있고 지금 화면들이 쓰는 글꼴입니다(624KB, /static/fonts/).
목업은 Pretendard 로 그렸습니다. 그 글꼴로 가려면 파일을 서버에 받아 두고
아래 @font-face 를 하나 더 넣은 뒤 --v3-font 의 맨 앞만 바꾸면 됩니다. */
@font-face{
font-family:'SUIT';
src:url('/static/fonts/SUIT-Variable.woff2') format('woff2-variations');
font-weight:100 900; font-style:normal; font-display:swap;
}
/* ── 2. 색과 자 ──────────────────────────────────────────────────────────── */
.v3{
--v3-navy:#1e3a8a; --v3-blue:#3b82f6; --v3-aqua:#0891b2;
--v3-go:#047857; --v3-stop:#be3125; --v3-hold:#8a5a00;
--v3-ink:#0f172a; --v3-ink2:#334155; --v3-mute:#5b6b7c;
--v3-line:#dbe4ee; --v3-bg:#f8fafc; --v3-fill:#eef3f9;
--v3-fill-go:#e4f3ec; --v3-fill-stop:#fceceb;
--v3-fill-hold:#faf1e0; --v3-fill-blue:#e8f0fd;
--v3-font:'SUIT','Pretendard Variable',Pretendard,-apple-system,
'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
}
/* ── 3. 바탕 ─────────────────────────────────────────────────────────────── */
.v3{
font-family:var(--v3-font);
color:var(--v3-ink);
font-size:16px;
line-height:1.6;
letter-spacing:-.01em;
-webkit-font-smoothing:antialiased;
}
.v3,.v3 *{box-sizing:border-box}
/* ⚠️ 없으면 한글이 낱말 한가운데서 쪼개집니다('간병일 / 지').
overflow-wrap 을 같이 둡니다 — keep-all 만 두면 띄어쓰기 없는 긴 글자가 칸 밖으로 나갑니다. */
.v3,.v3 *{word-break:keep-all;overflow-wrap:break-word}
/* 단추·입력칸은 글꼴을 물려받지 않습니다 — 빠뜨리면 여기만 시스템 글꼴로 남습니다 */
.v3 button,.v3 input,.v3 select,.v3 textarea{font-family:inherit}
/* 화면 한 판 · 안쪽 여백 (목업의 .screen .pad 자리) */
.v3-page{background:var(--v3-bg);display:flex;flex-direction:column;min-height:0}
.v3-pad{padding:6px 20px 18px;flex:1}
/* ── 4. 제목 ─────────────────────────────────────────────────────────────── */
.v3 .title{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1.24;margin:4px 0}
.v3 .title .sm{display:block;font-size:16px;font-weight:600;color:var(--v3-mute);margin-bottom:4px}
.v3 .lede{font-size:16px;color:var(--v3-mute);margin:0 0 20px;line-height:1.6}
.v3 .lede b{color:var(--v3-ink2);font-weight:700}
/* ── 5. 몇 단계 중 몇 번째 ───────────────────────────────────────────────── */
.v3 .steps{display:flex;gap:5px;margin:10px 0 14px}
.v3 .steps i{flex:1;height:5px;border-radius:99px;background:#d5dfea;display:block}
.v3 .steps i.on{background:var(--v3-navy)}
.v3 .stepno{font-size:14px;font-weight:800;color:var(--v3-navy);letter-spacing:.02em}
/* ── 6. 입력칸 ───────────────────────────────────────────────────────────── */
.v3 .fld{margin-bottom:15px}
.v3 .fld label{display:block;font-size:16px;font-weight:800;color:var(--v3-ink2);margin-bottom:6px}
.v3 .fld label .req{color:var(--v3-stop);margin-left:3px}
.v3 .box{width:100%;border:1.5px solid var(--v3-line);border-radius:13px;padding:15px 14px;
font-size:16px;line-height:1.4;color:var(--v3-ink);background:#fff;min-height:54px}
/* 목업처럼 글자만 얹어 둔 칸(진짜 입력칸이 아닌 것) */
.v3 div.box{display:flex;align-items:center;color:#93a2ae;font-weight:700}
.v3 div.box.filled{color:var(--v3-ink)}
.v3 .box.area{min-height:88px;align-items:flex-start}
/* 진짜 입력칸 */
.v3 input.box,.v3 select.box,.v3 textarea.box{-webkit-appearance:none;appearance:none;font-weight:700}
.v3 .box::placeholder{color:#93a2ae;font-weight:400}
.v3 .box:focus{outline:2px solid var(--v3-navy);outline-offset:-2px;border-color:var(--v3-navy)}
.v3 .box:disabled{background:var(--v3-fill);color:#93a2ae}
.v3 .row{display:flex;gap:8px}
.v3 .row .box{flex:1;width:auto}
.v3 .row .mini{flex:0 0 auto;background:var(--v3-navy);color:#fff;border:none;border-radius:13px;
padding:0 16px;font-size:16px;font-weight:800;white-space:nowrap;
display:flex;align-items:center;min-height:54px;cursor:pointer}
.v3 .hint{font-size:15px;color:var(--v3-mute);margin-top:6px;line-height:1.55}
/* ── 7. 고르는 알약 ──────────────────────────────────────────────────────── */
.v3 .chips{display:flex;flex-wrap:wrap;gap:7px}
.v3 .chip{border:1.5px solid var(--v3-line);background:#fff;border-radius:999px;padding:9px 14px;
font-size:16px;font-weight:700;color:var(--v3-ink2);min-height:44px;
display:flex;align-items:center;cursor:pointer}
.v3 .chip.on{background:var(--v3-fill-go);border-color:#9ed3ba;color:var(--v3-go)}
.v3 .chip.on::before{content:'✓';font-weight:900;margin-right:5px}
/* ── 8. 둘 중 하나 고르기 ────────────────────────────────────────────────── */
.v3 .pick{display:flex;gap:9px;margin-bottom:15px}
.v3 .pick .p{flex:1;border:1.5px solid var(--v3-line);border-radius:15px;background:#fff;
padding:15px 13px;text-align:center;cursor:pointer;min-height:44px}
.v3 .pick .p .nm{font-size:17px;font-weight:800;letter-spacing:-.025em}
.v3 .pick .p .sb{font-size:15px;color:var(--v3-mute);margin-top:2px}
.v3 .pick .p.on{border-color:var(--v3-navy);border-width:2.5px;background:var(--v3-fill-blue)}
.v3 .pick .p.on .nm{color:var(--v3-navy)}
/* ── 9. 동의 줄 ──────────────────────────────────────────────────────────── */
.v3 .agree{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--v3-line);
padding:14px 2px;font-size:16px;font-weight:600;min-height:44px}
.v3 .agree:last-child{border-bottom:none}
.v3 .chk{width:24px;height:24px;border-radius:7px;background:var(--v3-navy);color:#fff;flex:0 0 24px;
display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900}
.v3 .chk.off{background:#fff;border:2px solid #c3cfdb}
.v3 .agree .more{margin-left:auto;font-size:15px;color:var(--v3-navy);font-weight:700}
.v3 .agree.all{background:var(--v3-fill-blue);border-radius:14px;padding:15px 14px;border-bottom:none;
margin-bottom:6px;font-weight:800;font-size:17px}
/* ── 10. 카드·목록 ───────────────────────────────────────────────────────── */
.v3 .card{background:#fff;border:1px solid var(--v3-line);border-radius:16px;
padding:15px 16px;margin-bottom:13px}
.v3 .card .ct{font-size:17px;font-weight:800;margin-bottom:9px;letter-spacing:-.025em}
.v3 .kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:16px;
color:var(--v3-ink2);border-bottom:1px solid var(--v3-line)}
.v3 .kv:last-child{border-bottom:none}
/* ⛔ 왼쪽 이름표는 접지 않습니다 — 값이 길면 이름표 칸이 눌려 '간병 / 시간' 으로
두 줄이 됐습니다(계약서 계약사항에서 실제로 그랬습니다). 이름표는 짧은 말이라
안 접어도 넘치지 않습니다. */
.v3 .kv>span:first-child{white-space:nowrap;flex:0 0 auto}
.v3 .kv b{font-weight:800;color:var(--v3-ink);text-align:right}
.v3 .kv.big{padding:13px 0}
.v3 .kv.big b{font-size:21px;letter-spacing:-.03em}
.v3 .list{margin-bottom:16px}
.v3 .list .lt{font-size:14px;font-weight:800;color:var(--v3-mute);margin-bottom:6px}
.v3 .list .li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;
border-bottom:1px solid var(--v3-line);font-size:16px;color:var(--v3-ink2)}
.v3 .list .li:last-child{border-bottom:none}
.v3 .list .li b{font-weight:800;color:var(--v3-ink)}
/* ── 11. 알림 줄 ─────────────────────────────────────────────────────────── */
.v3 .msg{display:flex;gap:10px;border-radius:15px;padding:14px 15px;font-size:16px;line-height:1.6;
margin-bottom:16px;background:var(--v3-fill-blue);color:#15357e}
.v3 .msg svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px}
.v3 .msg b{font-weight:800}
.v3 .msg.warn{background:var(--v3-fill-stop);color:#8d251b}
.v3 .msg.hold{background:var(--v3-fill-hold);color:#6b4600}
.v3 .msg.ok{background:var(--v3-fill-go);color:#04543c}
/* ── 12. 상태 알약 ───────────────────────────────────────────────────────── */
.v3 .pill{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:800;
padding:4px 11px;border-radius:999px;background:var(--v3-fill-blue);color:var(--v3-navy)}
.v3 .pill svg{width:14px;height:14px}
.v3 .pill.ok{background:var(--v3-fill-go);color:var(--v3-go)}
.v3 .pill.warn{background:var(--v3-fill-hold);color:var(--v3-hold)}
.v3 .pill.bad{background:var(--v3-fill-stop);color:var(--v3-stop)}
/* ── 13. 달력 ────────────────────────────────────────────────────────────── */
.v3 .cal{background:#fff;border:1px solid var(--v3-line);border-radius:16px;padding:14px;margin-bottom:14px}
.v3 .cal .ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.v3 .cal .ch b{font-size:17px;font-weight:800}
.v3 .cal .ch span{color:var(--v3-mute);font-weight:800;font-size:17px;padding:0 8px}
.v3 .cal .wk,.v3 .cal .gr{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.v3 .cal .wk div{text-align:center;font-size:14px;font-weight:700;color:var(--v3-mute);padding-bottom:4px}
.v3 .cal .gr div{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
font-size:15px;font-weight:700;border-radius:9px;color:var(--v3-ink2)}
.v3 .cal .gr div.care{background:var(--v3-fill-go);color:var(--v3-go);font-weight:800}
.v3 .cal .gr div.off{background:var(--v3-fill);color:#9aa8b5}
/* ⛔ pick 이 두 뜻으로 쓰입니다 — '둘 중 하나 고르기'(위 7번)와 '달력에서 고른 날'.
위 .v3 .pick 이 margin-bottom:15px 와 gap 을 걸어 놓아서, 안 되돌리면
고른 날 한 칸이 부풀어 달력 마지막 줄이 카드 밖으로 넘칩니다(견본에서 실제로 그랬습니다). */
.v3 .cal .gr div.pick{background:var(--v3-navy);color:#fff;margin:0;gap:0}
.v3 .cal .gr div.dim{color:#c3cfdb}
/* ── 14. 서명 ────────────────────────────────────────────────────────────── */
.v3 .sign{border:2px dashed #b9c6d3;border-radius:15px;background:#fff;height:130px;
display:flex;align-items:center;justify-content:center;color:#9aa8b5;font-size:16px;
margin-bottom:8px;position:relative}
.v3 .sign.done{border-style:solid;border-color:var(--v3-go);background:var(--v3-fill-go);
color:var(--v3-go);font-size:32px;font-family:'Gungsuh','Batang',serif;font-weight:700}
/* ── 15. 단추 · 하단 고정 ────────────────────────────────────────────────── */
.v3 .dock{flex:0 0 auto;background:var(--v3-bg);padding:12px 20px;border-top:1px solid var(--v3-line)}
.v3 .btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:60px;
border-radius:16px;font-size:17.5px;font-weight:800;letter-spacing:-.025em;
background:var(--v3-navy);color:#fff;border:none;padding:14px;font-family:inherit;cursor:pointer;
transition:opacity .15s ease;text-decoration:none}
.v3 .btn:active{opacity:.82}
.v3 .btn:focus-visible{outline:3px solid var(--v3-aqua);outline-offset:2px}
.v3 .btn svg{width:22px;height:22px;flex:0 0 22px}
.v3 .btn.go{background:var(--v3-go)}
.v3 .btn.stop{background:var(--v3-stop)}
.v3 .btn.hold{background:var(--v3-hold)}
.v3 .btn.line{background:#fff;color:var(--v3-ink2);border:1.5px solid var(--v3-line);
min-height:50px;font-size:17px;font-weight:700}
.v3 .btn.quiet{background:transparent;color:var(--v3-ink2);min-height:46px;font-size:16px;font-weight:700}
.v3 .btn.off{background:#dfe6ed;color:#94a3b8}
.v3 .btn:disabled{background:#dfe6ed;color:#94a3b8;cursor:default}
.v3 .btn+.btn{margin-top:8px}
.v3 .btn .u{display:block;font-size:14px;font-weight:600;opacity:.88;margin-top:2px}
.v3 .two{display:flex;gap:9px}
.v3 .two .btn{margin:0}
/* ── 16. 바텀시트 ────────────────────────────────────────────────────────── */
.v3 .veil{position:absolute;inset:0;background:rgba(15,23,42,.45);z-index:8}
.v3 .sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;
padding:10px 20px 20px;z-index:9}
.v3 .sheet .grip{width:38px;height:4px;border-radius:99px;background:#cbd5e1;margin:0 auto 15px}
.v3 .sheet .st{font-size:21px;font-weight:800;letter-spacing:-.035em;margin-bottom:7px}
.v3 .sheet .sd{font-size:16px;color:var(--v3-ink2);line-height:1.62;margin-bottom:18px}
.v3 .sheet .sd b{font-weight:800;color:var(--v3-ink)}
/* ── 17. 다 됐습니다 ─────────────────────────────────────────────────────── */
.v3 .done-mark{width:74px;height:74px;border-radius:50%;background:var(--v3-fill-go);color:var(--v3-go);
display:flex;align-items:center;justify-content:center;margin:26px auto 16px}
.v3 .done-mark svg{width:38px;height:38px}
/* ── 18. 폰 폭 ───────────────────────────────────────────────────────────── */
@media (max-width:760px){
.v3-pad{padding:6px 14px 18px}
.v3 .dock{padding:12px 14px}
}