/* =========================================================
teum insure — 공통 컴포넌트
tokens.css 의 변수만 사용한다. 색·크기 직접 입력 금지.
목차 (절 번호는 문서 참조에 쓰이므로 바꾸지 말고 뒤에 더한다)
1 버튼 2 카드 3 뱃지 · 칩 4 폼
5 표 6 탭 7 모달 8 토스트
9 빈 상태 10 그리드 · 배치 11 KPI 12 섹션 제목
13 목록 14 페이지 머리 15 공지 띠 16 접이식 패널
17 보험사 타일 18 퀵 액션 카드 19 달력 20 도구 카드
21 외부 링크 레일 22 오늘 · 일정 23 보조 클래스 24 목록 페이지 공통
25 목록 카드 26 표 보조 27 입력 보조 28 막대 그래프
29 사이드패널 30 계산 방식 31 인쇄 조각 32 보장 지도(.radar)
33 홈 "오늘" 34 챙길 고객 줄 35 도구 컴팩트 36 즐겨찾기 칩
37 설정 페이지 38 인쇄 머리말 39 고객파일 저장 모달
40 날짜 한 줄 폼 70 캘린더 연동
절 번호는 더해진 순서가 아니라 갈래별로 묶여 있다. 파일 안 실제 순서는
1~40 → 70 → 80~85 → 60 → 100~105 → 110~113 → 90~94 다.
80 헤더 백업 상태 81 백업 알림 띠 82 오늘 한 줄 기록
83 첫 실행 안내 84 단축키 도움말 85 설정 백업 절 보조
60 가져오기 위저드(tools/import.html)
100 페이지 머리 3버튼 101 고객 고르기(여러 명) 102 목록 행 보조 버튼
103 되돌리기 띠 104 직업 예시표 105 고객 불러오기 띠
110 카테고리 아코디언 111 접는 보조 섹션 112 개인 메모 113 인쇄물 페이지
90 도구 그룹 목록 91 사이드바 소제목 92 좁은 화면 접기 줄
93 일괄 문구 버튼 94 문자 문구 모달
========================================================= */
/* ---------------------------------------------------------
1. 버튼
.btn + .btn--primary | .btn--secondary | .btn--ghost | .btn--accent
크기: .btn--sm / .btn--lg, 폭: .btn--block
--------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
height: 36px;
padding: 0 var(--sp-4);
border: 1px solid transparent;
border-radius: var(--r-sm);
background: none;
font-size: var(--fs-md);
font-weight: var(--fw-medium);
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { text-decoration: none; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }
.btn--primary {
background: var(--c-primary);
border-color: var(--c-primary);
color: var(--c-ink-invert);
}
.btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn--primary:active { background: var(--c-primary-press); border-color: var(--c-primary-press); }
.btn--secondary {
background: var(--c-surface);
border-color: var(--c-line-strong);
color: var(--c-ink);
}
.btn--secondary:hover { background: var(--c-bg); border-color: var(--c-ink-3); }
.btn--ghost {
background: transparent;
color: var(--c-ink-2);
}
.btn--ghost:hover { background: var(--c-bg-sunken); color: var(--c-ink); }
.btn--accent {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-ink-invert);
}
.btn--accent:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn--sm { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sm); gap: var(--sp-1); }
.btn--sm svg { width: 14px; height: 14px; }
.btn--lg { height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }
/* 아이콘만 있는 정사각 버튼 */
.btn--icon { width: 36px; padding: 0; }
.btn--icon.btn--sm { width: 28px; }
/* ---------------------------------------------------------
2. 카드
--------------------------------------------------------- */
.card {
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--sh-1);
}
.card--flat { box-shadow: none; }
.card--tint { background: var(--c-primary-tint); border-color: var(--c-primary-line); box-shadow: none; }
.card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--c-line);
}
.card__title {
margin: 0;
font-size: var(--fs-base);
font-weight: var(--fw-semi);
}
.card__body { padding: var(--sp-5); }
.card__body--tight { padding: var(--sp-4); }
.card__foot {
padding: var(--sp-3) var(--sp-5);
border-top: 1px solid var(--c-line);
background: var(--c-surface-hover);
border-radius: 0 0 var(--r-md) var(--r-md);
}
/* 카드 전체가 링크인 경우 */
.card--link {
display: block;
color: inherit;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.card--link:hover {
border-color: var(--c-primary-line);
box-shadow: var(--sh-2);
text-decoration: none;
}
/* ---------------------------------------------------------
3. 뱃지 · 칩
--------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
height: 20px;
padding: 0 var(--sp-2);
border-radius: var(--r-sm);
background: var(--c-bg-sunken);
color: var(--c-ink-2);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
line-height: 1;
white-space: nowrap; /* 좁은 화면에서 두 줄로 쪼개지지 않게 */
}
.badge--accent { background: var(--c-accent-tint); color: var(--c-accent-ink); }
.badge--primary { background: var(--c-primary-tint); color: var(--c-primary-ink); }
.badge--ok { background: var(--c-ok-tint); color: var(--c-ok); }
.badge--danger { background: var(--c-danger-tint); color: var(--c-danger); }
.badge--dot::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
height: 32px;
padding: 0 var(--sp-3);
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
background: var(--c-surface);
color: var(--c-ink-2);
font-size: var(--fs-md);
cursor: pointer;
transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--c-line-strong); color: var(--c-ink); text-decoration: none; }
.chip--active,
.chip[aria-pressed="true"] {
background: var(--c-primary-tint);
border-color: var(--c-primary-line);
color: var(--c-primary-ink);
font-weight: var(--fw-medium);
}
.chip svg { width: 14px; height: 14px; }
/* ---------------------------------------------------------
4. 폼
.field(라벨+컨트롤 한 벌) / .form-row(가로 배치) / .form-grid(2열)
--------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.label {
font-size: var(--fs-md);
font-weight: var(--fw-medium);
color: var(--c-ink);
}
.label .req { color: var(--c-danger); margin-left: 2px; }
.hint { font-size: var(--fs-sm); color: var(--c-ink-3); }
.error-text { font-size: var(--fs-sm); color: var(--c-danger); }
.input, .select, .textarea {
width: 100%;
min-height: 36px;
padding: 7px var(--sp-3);
border: 1px solid var(--c-line-strong);
border-radius: var(--r-sm);
background: var(--c-surface);
font-size: var(--fs-md);
line-height: 1.4;
color: var(--c-ink);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-ink-3); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-tint);
}
.input:disabled, .select:disabled, .textarea:disabled {
background: var(--c-bg-sunken);
color: var(--c-ink-3);
cursor: not-allowed;
}
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-snug); }
.select {
appearance: none;
-webkit-appearance: none;
padding-right: var(--sp-7);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--sp-3) center;
}
/* ---- 브라우저 기본 부품 통일 (날짜 · 시간 · 숫자 · 파일 · 체크 · 라디오) ----
높이·보더·포커스 링을 .input 과 같게 맞추고, 다크 모드에서도 밝은 판으로 그린다. */
.input, .select, .textarea,
input[type="checkbox"], input[type="radio"], input[type="file"] { color-scheme: light; }
/* 날짜·시간: 기본 높이가 글꼴에 따라 들쭉날쭉해 값과 달력 아이콘이 따로 논다 */
.input[type="date"],
.input[type="time"],
.input[type="month"] {
padding-right: var(--sp-2);
font-variant-numeric: tabular-nums;
line-height: 1.4;
}
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator,
.input[type="month"]::-webkit-calendar-picker-indicator {
width: 16px; height: 16px;
padding: 3px;
margin-left: var(--sp-1);
border-radius: var(--r-sm);
opacity: .55;
cursor: pointer;
}
.input[type="date"]::-webkit-calendar-picker-indicator:hover,
.input[type="time"]::-webkit-calendar-picker-indicator:hover,
.input[type="month"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
background: var(--c-bg-sunken);
}
/* 날짜칸이 남는 폭만큼 늘어나면 허전하다 — 값이 들어갈 만큼만 */
.input--date { width: auto; min-width: 168px; max-width: 100%; }
/* 숫자: 위아래 화살표가 값과 겹치지 않게 */
.input[type="number"] { -moz-appearance: textfield; }
.input[type="number"]::-webkit-inner-spin-button { height: 24px; margin-left: var(--sp-1); }
/* 파일: "파일 선택" 버튼이 운영체제 기본 모양으로 튀어나오는 것을 막는다 */
.input[type="file"] {
padding: 5px var(--sp-2) 5px 5px;
cursor: pointer;
color: var(--c-ink-2);
font-size: var(--fs-sm);
}
.input[type="file"]::file-selector-button {
height: 26px;
margin-right: var(--sp-3);
padding: 0 var(--sp-3);
border: 1px solid var(--c-line-strong);
border-radius: var(--r-sm);
background: var(--c-surface);
color: var(--c-ink);
font: inherit;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
transition: background-color var(--t-fast), border-color var(--t-fast);
}
.input[type="file"]:hover::file-selector-button { background: var(--c-bg); border-color: var(--c-ink-3); }
/* 체크박스·라디오 — 크기·강조색을 한 벌로 */
input[type="checkbox"], input[type="radio"] {
width: 16px; height: 16px;
flex: none;
margin: 0;
accent-color: var(--c-primary);
cursor: pointer;
}
/* 체크박스·라디오 한 줄 */
.check {
display: inline-flex;
/* 설명이 붙어 두 줄이 되면 네모가 가운데로 내려가 제목과 어긋난다 — 첫 줄에 맞춘다 */
align-items: flex-start;
gap: var(--sp-2);
font-size: var(--fs-md);
line-height: var(--lh-snug);
cursor: pointer;
}
.check input { margin-top: 2px; }
/* 폼 행 레이아웃 */
.form-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--sp-3);
}
.form-row > .field { flex: 1 1 180px; min-width: 0; }
.form-row > .field--narrow { flex: 0 1 120px; }
/* 넓은 화면에서 두 칸으로만 두면 "3" 한 글자를 넣는 칸이 600px 까지 늘어나 허전하다.
칸 수를 폭에 맞춰 늘리되(auto-fill), 칸 하나가 너무 넓어지지 않게 잡는다.
모달(720px)·좁은 화면에서는 지금까지처럼 2칸·1칸이 된다. */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--sp-4) var(--sp-5);
}
.form-grid > .field--full { grid-column: 1 / -1; }
.form-actions {
display: flex;
gap: var(--sp-2);
justify-content: flex-end;
padding-top: var(--sp-4);
margin-top: var(--sp-5);
border-top: 1px solid var(--c-line);
}
/* ---------------------------------------------------------
5. 표
--------------------------------------------------------- */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
background: var(--c-surface);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-md);
}
.table th, .table td {
padding: var(--sp-3) var(--sp-4);
text-align: left;
border-bottom: 1px solid var(--c-line-soft);
vertical-align: middle;
}
.table thead th {
background: var(--c-bg-sunken);
color: var(--c-ink-2);
font-size: var(--fs-sm);
font-weight: var(--fw-semi);
white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--c-surface-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .shrink { width: 1%; white-space: nowrap; }
.table--compact th, .table--compact td { padding: var(--sp-2) var(--sp-3); }
/* ---------------------------------------------------------
6. 탭
--------------------------------------------------------- */
.tabs {
display: flex;
gap: var(--sp-1);
border-bottom: 1px solid var(--c-line);
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
position: relative;
padding: var(--sp-3) var(--sp-4);
border: none;
background: none;
color: var(--c-ink-2);
font-size: var(--fs-md);
font-weight: var(--fw-medium);
white-space: nowrap;
cursor: pointer;
}
.tab:hover { color: var(--c-ink); text-decoration: none; }
.tab[aria-selected="true"] { color: var(--c-primary); }
.tab[aria-selected="true"]::after {
content: "";
position: absolute;
left: var(--sp-3); right: var(--sp-3); bottom: -1px;
height: 2px;
background: var(--c-primary);
border-radius: 2px 2px 0 0;
}
.tab-panel[hidden] { display: none; }
/* ---------------------------------------------------------
7. 모달
--------------------------------------------------------- */
.modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-5);
background: var(--c-overlay);
}
.modal[hidden] { display: none; }
.modal__dialog {
width: 100%;
max-width: 520px;
max-height: calc(100vh - var(--sp-8));
display: flex;
flex-direction: column;
background: var(--c-surface);
border-radius: var(--r-lg);
box-shadow: var(--sh-pop);
overflow: hidden;
}
.modal__dialog--wide { max-width: 760px; }
.modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--c-line);
}
.modal__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.modal__body { padding: var(--sp-5); overflow-y: auto; }
.modal__foot {
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-5);
border-top: 1px solid var(--c-line);
background: var(--c-surface-hover);
}
/* ---------------------------------------------------------
8. 토스트
--------------------------------------------------------- */
.toast-stack {
position: fixed;
left: 50%;
bottom: var(--sp-6);
transform: translateX(-50%);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--sp-2);
align-items: center;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: var(--sp-2);
max-width: 90vw;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-sm);
background: var(--c-ink);
color: var(--c-ink-invert);
font-size: var(--fs-md);
box-shadow: var(--sh-pop);
animation: toast-in 160ms ease-out;
}
.toast--ok { background: var(--c-ok); }
.toast--danger { background: var(--c-danger); }
.toast.is-out { animation: toast-out 160ms ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
/* ---------------------------------------------------------
9. 빈 상태
--------------------------------------------------------- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-8) var(--sp-5);
text-align: center;
color: var(--c-ink-3);
}
.empty-state svg { width: 28px; height: 28px; color: var(--c-line-strong); }
.empty-state__title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.empty-state__desc { font-size: var(--fs-sm); max-width: 46ch; }
.empty-state .btn { margin-top: var(--sp-2); }
.empty-state--inline { padding: var(--sp-6) var(--sp-4); }
/* ---------------------------------------------------------
10. 그리드 · 배치 유틸
--------------------------------------------------------- */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--sp-4);
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--narrow { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--sm { gap: var(--sp-2); }
.stack--lg { gap: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cluster--between { justify-content: space-between; }
.divider { height: 1px; background: var(--c-line); border: 0; margin: var(--sp-5) 0; }
/* ---------------------------------------------------------
11. KPI
--------------------------------------------------------- */
.kpi {
display: flex;
flex-direction: column;
gap: 2px; /* 숫자에 견줘 카드가 커 보이지 않게 줄 사이를 좁힌다 */
padding: var(--sp-3) var(--sp-4);
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r-md);
}
.kpi__label { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-snug); }
.kpi__value {
font-size: var(--fs-3xl);
font-weight: var(--fw-semi);
line-height: 1.1;
letter-spacing: -0.02em;
}
.kpi__value .unit { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-ink-2); margin-left: 2px; }
.kpi__delta { font-size: var(--fs-sm); color: var(--c-ink-3); line-height: var(--lh-snug); }
.kpi__delta--up { color: var(--c-ok); }
.kpi__delta--down { color: var(--c-danger); }
/* ---------------------------------------------------------
12. 섹션 제목
--------------------------------------------------------- */
.section { margin-bottom: var(--sp-8); }
.section:last-child { margin-bottom: 0; }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-4);
margin-bottom: var(--sp-4);
}
.section-title {
font-size: var(--fs-xl);
font-weight: var(--fw-semi);
letter-spacing: -0.015em;
}
.section-desc {
margin-top: var(--sp-1);
margin-bottom: 0;
font-size: var(--fs-md);
color: var(--c-ink-2);
}
.section-link { font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap; }
/* ---------------------------------------------------------
13. 목록 (일정·링크 등 반복 행)
--------------------------------------------------------- */
.list { display: flex; flex-direction: column; }
.list__item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--c-line-soft);
color: inherit;
}
.list__item:last-child { border-bottom: none; }
/* 한 줄짜리 짧은 항목(서류 이름·주소)만 담을 때 — 줄 사이가 너무 벌어지지 않게 */
.list--tight .list__item { padding: var(--sp-2) 0; gap: var(--sp-2); }
a.list__item:hover { text-decoration: none; }
a.list__item:hover .list__title { color: var(--c-primary); }
.list__time {
flex: none;
width: 46px;
font-size: var(--fs-sm);
font-weight: var(--fw-semi);
color: var(--c-accent-ink);
font-variant-numeric: tabular-nums;
}
.list__main { min-width: 0; flex: 1; }
.list__title {
font-size: var(--fs-md);
font-weight: var(--fw-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list__meta { font-size: var(--fs-sm); color: var(--c-ink-3); }
/* ---------------------------------------------------------
14. 페이지 머리 (도구 페이지 공통)
--------------------------------------------------------- */
.page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-5);
padding-bottom: var(--sp-5);
margin-bottom: var(--sp-6);
border-bottom: 1px solid var(--c-line);
}
.page-head__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.page-head__desc { margin: var(--sp-2) 0 0; font-size: var(--fs-base); color: var(--c-ink-2); max-width: 62ch; }
.page-head__actions { display: flex; gap: var(--sp-2); flex: none; }
@media (max-width: 768px) {
.page-head { flex-direction: column; gap: var(--sp-4); }
.page-head__actions { width: 100%; }
.page-head__actions .btn { flex: 1; }
.form-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ---------------------------------------------------------
15. 공지 · 안내 띠
--------------------------------------------------------- */
.notice {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--c-primary-line);
border-radius: var(--r-md);
background: var(--c-primary-tint);
color: var(--c-primary-ink);
font-size: var(--fs-md);
}
.notice svg { width: 18px; height: 18px; flex: none; }
.notice__text { min-width: 0; flex: 1; }
.notice__text strong { font-weight: var(--fw-semi); }
.notice .btn { flex: none; }
.notice--accent {
border-color: var(--c-accent-line);
background: var(--c-accent-tint);
color: var(--c-accent-ink);
}
/* ---------------------------------------------------------
16. 접이식 패널 (보험사 전산 등)
--------------------------------------------------------- */
.disclosure { overflow: hidden; }
.disclosure__toggle {
display: flex;
align-items: center;
gap: var(--sp-3);
width: 100%;
padding: var(--sp-4) var(--sp-5);
border: 0;
background: none;
text-align: left;
cursor: pointer;
}
.disclosure__toggle:hover { background: var(--c-surface-hover); }
.disclosure__title { font-size: var(--fs-base); font-weight: var(--fw-semi); }
.disclosure__meta { font-size: var(--fs-sm); color: var(--c-ink-3); }
.disclosure__chevron {
margin-left: auto;
width: 18px; height: 18px;
color: var(--c-ink-3);
transition: transform var(--t-base);
}
.disclosure__toggle[aria-expanded="true"] .disclosure__chevron { transform: rotate(180deg); }
.disclosure__panel {
padding: var(--sp-4) var(--sp-5) var(--sp-5);
border-top: 1px solid var(--c-line);
}
.disclosure__panel[hidden] { display: none; }
/* ---------------------------------------------------------
17. 보험사 전산 타일
--------------------------------------------------------- */
.insurer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: var(--sp-2);
}
.insurer {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
background: var(--c-surface);
color: var(--c-ink);
font-size: var(--fs-md);
font-weight: var(--fw-medium);
transition: border-color var(--t-fast), background-color var(--t-fast);
}
.insurer:hover { border-color: var(--c-primary); background: var(--c-primary-tint); text-decoration: none; }
.insurer__initial {
display: grid;
place-items: center;
flex: none;
width: 28px; height: 28px;
border-radius: var(--r-sm);
background: var(--c-bg-sunken);
color: var(--c-ink-2);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
}
.insurer:hover .insurer__initial { background: var(--c-surface); color: var(--c-primary); }
.insurer__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------------------------------------------------------
18. 퀵 액션 카드
--------------------------------------------------------- */
.quick {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--sh-1);
color: inherit;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.quick:hover { border-color: var(--c-primary-line); box-shadow: var(--sh-2); text-decoration: none; }
.quick__icon {
display: grid;
place-items: center;
flex: none;
width: 40px; height: 40px;
border-radius: var(--r-sm);
background: var(--c-primary-tint);
color: var(--c-primary);
}
.quick__icon svg { width: 20px; height: 20px; }
.quick--accent .quick__icon { background: var(--c-accent-tint); color: var(--c-accent); }
.quick__body { min-width: 0; }
.quick__title { font-size: var(--fs-base); font-weight: var(--fw-semi); }
.quick__desc { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-snug); }
/* ---------------------------------------------------------
19. 달력
--------------------------------------------------------- */
.cal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
}
.cal__month { font-size: var(--fs-base); font-weight: var(--fw-semi); }
.cal__nav { display: flex; gap: var(--sp-1); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal__dow {
padding-bottom: var(--sp-2);
text-align: center;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--c-ink-3);
}
.cal__dow--sun { color: var(--c-danger); }
.cal__day {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 0 8px;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: none;
color: var(--c-ink);
font-size: var(--fs-md);
line-height: 1;
cursor: pointer;
transition: background-color var(--t-fast), border-color var(--t-fast);
}
.cal__day:hover { background: var(--c-bg-sunken); }
.cal__day--out { color: var(--c-ink-3); opacity: .5; }
.cal__day--sun { color: var(--c-danger); }
.cal__day--today {
border-color: var(--c-primary);
color: var(--c-primary-ink);
font-weight: var(--fw-bold);
}
.cal__day--selected {
background: var(--c-primary);
border-color: var(--c-primary);
color: var(--c-ink-invert);
font-weight: var(--fw-semi);
}
.cal__day--selected:hover { background: var(--c-primary-hover); }
.cal__dot {
position: absolute;
bottom: 7px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--c-accent-bright);
}
.cal__day--selected .cal__dot { background: var(--c-ink-invert); }
.cal__legend {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid var(--c-line-soft);
font-size: var(--fs-sm);
color: var(--c-ink-3);
}
.cal__legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cal__legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent-bright); }
.cal__legend i.ring {
width: 12px; height: 12px;
background: none;
border: 1px solid var(--c-primary);
border-radius: 4px;
}
/* ---------------------------------------------------------
20. 도구 카드
--------------------------------------------------------- */
.tool-card {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-5) var(--sp-5);
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--sh-1);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tool-card:hover { border-color: var(--c-primary-line); box-shadow: var(--sh-2); }
.tool-card__head { display: flex; align-items: center; gap: var(--sp-3); }
.tool-card__icon {
display: grid;
place-items: center;
flex: none;
width: 32px; height: 32px;
border-radius: var(--r-sm);
background: var(--c-primary-tint);
color: var(--c-primary);
}
.tool-card__icon svg { width: 18px; height: 18px; }
.tool-card__name { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: -0.01em; }
.tool-card__desc {
flex: 1;
font-size: var(--fs-md);
color: var(--c-ink-2);
line-height: var(--lh-snug);
}
.tool-card__foot { margin-top: var(--sp-2); }
/* ---------------------------------------------------------
21. 외부 링크 레일
--------------------------------------------------------- */
.rail-card + .rail-card { margin-top: var(--sp-4); }
.rail-card__title {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-5) 0;
font-size: var(--fs-md);
font-weight: var(--fw-semi);
}
.rail-card__title svg { width: 16px; height: 16px; color: var(--c-ink-3); }
.rail-card__desc {
padding: var(--sp-1) var(--sp-5) 0;
margin-bottom: var(--sp-2);
font-size: var(--fs-sm);
color: var(--c-ink-3);
line-height: var(--lh-snug);
}
.rail-card__list { padding: 0 var(--sp-2) var(--sp-3); }
.rail-link {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-sm);
color: var(--c-ink-2);
font-size: var(--fs-md);
}
.rail-link:hover { background: var(--c-bg-sunken); color: var(--c-ink); text-decoration: none; }
.rail-link__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-link svg.ext { margin-left: auto; width: 13px; height: 13px; color: var(--c-ink-3); flex: none; }
/* ---------------------------------------------------------
22. 오늘 · 일정 배치
--------------------------------------------------------- */
.today-date { display: flex; align-items: baseline; gap: var(--sp-2); }
.today-date__day {
font-size: var(--fs-3xl);
font-weight: var(--fw-bold);
letter-spacing: -0.03em;
line-height: 1;
}
.today-date__rest { font-size: var(--fs-md); color: var(--c-ink-2); }
.sched-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
gap: var(--sp-4);
align-items: start;
}
/* ---------------------------------------------------------
23. 보조 클래스 (인라인 스타일 대신 쓴다)
--------------------------------------------------------- */
.quick__title, .quick__desc, .rail-link__name,
.list__title, .list__meta { display: block; }
.cluster--center { justify-content: center; }
.disclosure__filters { margin-bottom: var(--sp-4); }
.disclosure__note { margin-top: var(--sp-3); }
.rail-foot { margin-top: var(--sp-4); }
/* 목록 행이 버튼일 때 */
.list__item--btn {
width: 100%;
border-width: 0 0 1px;
border-style: solid;
border-color: var(--c-line-soft);
background: none;
text-align: left;
font: inherit;
cursor: pointer;
}
.list__item--btn:hover .list__title { color: var(--c-primary); }
.list__item--btn:last-child { border-bottom-width: 0; }
/* 도구 카드 안의 p 는 여백을 카드 gap 에 맡긴다 */
.tool-card__head, .tool-card__desc { margin: 0; }
.tool-card__foot { margin: var(--sp-2) 0 0; }
/* 접힘 상태에서 보여주는 최근 사용 줄 */
.disclosure__recent {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
padding: 0 var(--sp-5) var(--sp-4);
}
.disclosure__recent-label { font-size: var(--fs-sm); color: var(--c-ink-3); }
/* ---------------------------------------------------------
24. 목록 페이지 공통 — 필터 줄 · 건수 · 태그 · 앵커
(사이트 디렉토리 · 자료실 · 고객관리가 같이 쓴다)
--------------------------------------------------------- */
.filter-bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--sp-3);
}
/* 목록 페이지에서 페이지 머리와 칩 줄 사이에 놓일 때의 위아래 여백 */
.filter-bar--block { margin: var(--sp-4) 0 var(--sp-5); }
/* 검색칸이 남는 폭을 전부 먹으면(1000px 짜리 검색창) 줄이 허전해 보인다 */
.filter-bar__grow { flex: 1 1 220px; min-width: 0; max-width: 520px; }
.filter-bar__fix { flex: 0 1 160px; }
/* 카드 안에 홀로 놓이는 큰 입력칸 — 폭을 읽기 좋은 만큼만 */
.field--cap { max-width: 520px; }
.filter-chips { margin-top: var(--sp-3); }
.chip-row { margin-bottom: var(--sp-5); }
@media (max-width: 768px) {
.filter-bar__fix { flex-basis: 100%; }
}
/* 섹션 머리 오른쪽 건수(기본) / 카드·표 아래 보조 안내(--below) */
.count-note { font-size: var(--fs-md); color: var(--c-ink-3); white-space: nowrap; }
.count-note--below { margin-top: var(--sp-3); font-size: var(--fs-sm); white-space: normal; }
/* 태그 — 누르면 그 말로 검색된다 */
.tag-btn {
height: 20px;
padding: 0 var(--sp-2);
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
background: var(--c-surface);
color: var(--c-ink-3);
font-size: var(--fs-xs);
line-height: 1;
cursor: pointer;
}
.tag-btn:hover { border-color: var(--c-line-strong); color: var(--c-ink-2); }
/* 즐겨찾기 별 — 켜면 채워진다 */
.fav-btn { color: var(--c-ink-3); flex: none; }
.fav-btn:hover { color: var(--c-accent); }
.fav-btn[aria-pressed="true"] { color: var(--c-accent); }
.fav-btn[aria-pressed="true"] svg { fill: var(--c-accent-bright); }
/* #해시로 들어올 때 고정 헤더에 가리지 않게 */
.anchor { scroll-margin-top: calc(var(--h-header) + var(--sp-6)); }
/* 줄바꿈 막기 */
.nowrap { white-space: nowrap; }
/* ---------------------------------------------------------
25. 목록 카드 (.card 와 함께 쓴다)
사이트 디렉토리의 링크 카드 · 자료실의 자료 카드 공통 뼈대
--------------------------------------------------------- */
.entry-card {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.entry-card:hover { border-color: var(--c-primary-line); box-shadow: var(--sh-2); }
.entry-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-2);
}
.entry-card__name {
margin: 0;
min-width: 0;
font-size: var(--fs-base);
font-weight: var(--fw-semi);
line-height: var(--lh-snug);
}
.entry-card__name a { color: var(--c-ink); }
.entry-card__name a:hover { color: var(--c-primary); text-decoration: none; }
.entry-card__ext { display: inline-block; margin-left: var(--sp-1); color: var(--c-ink-3); }
.entry-card__summary {
flex: 1;
margin: 0;
font-size: var(--fs-md);
line-height: var(--lh-snug);
color: var(--c-ink-2);
}
/* 뱃지 줄 · 태그 줄 */
.entry-card__meta,
.entry-card__tags {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
margin: 0;
}
.entry-card__source {
display: flex;
align-items: center;
gap: var(--sp-1);
margin: 0;
font-size: var(--fs-sm);
color: var(--c-ink-3);
}
.entry-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
margin: var(--sp-1) 0 0;
}
.entry-card__foot--line { padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
.entry-card__date { font-size: var(--fs-xs); color: var(--c-ink-3); }
/* 주소를 확인하지 못한 곳 · 아직 링크가 없는 자료 — 회색으로 눌러 둔다 */
.entry-card--muted { background: var(--c-bg); box-shadow: none; }
.entry-card--muted .entry-card__name { color: var(--c-ink-2); }
.entry-card--muted .entry-card__name a { color: var(--c-ink-3); }
.entry-card--muted .entry-card__summary { color: var(--c-ink-3); }
/* 카드에 적는 확인일 */
.entry-card__checked { font-size: var(--fs-xs); color: var(--c-ink-3); }
/* ---------------------------------------------------------
26. 표 보조 — 최소 너비 · 줄바꿈 · 칸 안 둘째 줄
가로 스크롤은 .table-wrap 이 맡는다.
--------------------------------------------------------- */
.table--min-xs { min-width: 360px; }
.table--min-sm { min-width: 440px; }
.table--min-md { min-width: 660px; }
.table--min-lg { min-width: 760px; }
.table--min-xl { min-width: 860px; }
.table--nowrap th, .table--nowrap td { white-space: nowrap; }
/* 남는 폭을 가져갈 칸 하나를 정해 준다 (이름 칸처럼).
나머지 칸에 .shrink 를 주면 내용만큼만 차지하고, 늘어나는 건 이 칸이 맡는다.
→ 넓은 화면에서 연락처·생년월일 칸만 넓어지고 이름 칸이 좁아지는 것을 막는다. */
.table__grow { width: 100%; }
/* 머리글에 붙이는 설명(마우스를 올리면 뜬다) — 점선만 남기고 밑줄은 지운다 */
.table th abbr[title] {
text-decoration: none;
border-bottom: 1px dotted var(--c-line-strong);
cursor: help;
}
.table--nowrap .table__grow,
.table--nowrap .table__grow .cell-sub { white-space: normal; }
/* 표 칸 안의 둘째 줄 (메모·나이·상대날짜) */
.cell-sub {
display: block;
margin-top: 2px;
max-width: 22ch;
font-size: var(--fs-xs);
color: var(--c-ink-3);
font-weight: var(--fw-normal);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 메모처럼 긴 둘째 줄 — 한 줄로 자르지 말고 두 줄까지 보여준다 */
.cell-sub--2line {
max-width: none;
white-space: normal;
line-height: var(--lh-snug);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 표·목록 안에서 상세를 여는 링크형 버튼 */
.link-btn {
border: 0; padding: 0; background: none;
font: inherit; color: var(--c-primary); font-weight: var(--fw-medium);
text-align: left; cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
/* 이름-값 목록 */
.dl {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: var(--sp-2) var(--sp-4);
margin: 0;
font-size: var(--fs-md);
}
.dl dt { color: var(--c-ink-3); }
.dl dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
/* 남은 날짜 큰 숫자 */
.dday { display: flex; align-items: baseline; gap: var(--sp-2); }
.dday__num { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1; }
.dday__rest { font-size: var(--fs-md); color: var(--c-ink-2); }
.dday--over .dday__num { color: var(--c-danger); }
.dday--near .dday__num { color: var(--c-accent); }
@media (max-width: 560px) {
.dl { grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); }
}
/* ---------------------------------------------------------
27. 입력 보조 — 단위 붙은 입력 · 표 안 작은 입력
--------------------------------------------------------- */
.input-unit { display: flex; align-items: center; gap: var(--sp-2); }
.input-unit .input { min-width: 0; flex: 1; }
.input-unit__unit { flex: none; font-size: var(--fs-sm); color: var(--c-ink-3); }
.mini-input {
height: 32px;
min-width: 8ch; /* "50,000" 여섯 자리가 잘리지 않는 최소 폭 */
padding: 0 var(--sp-2);
text-align: right;
font-variant-numeric: tabular-nums;
}
.mini-input--name { text-align: left; min-width: 13ch; } /* 한글 6자("뇌혈관 질환")가 들어가는 최소 폭 */
/* ---------------------------------------------------------
28. 막대 그래프 (계산·분석 도구 공통)
폭은 JS 가 --bar 변수로만 넣는다.
.bar-inline = 막대 + 퍼센트 숫자를 표 칸에 한 줄로 앉힐 때
--------------------------------------------------------- */
.bar {
display: block;
position: relative;
height: 8px;
min-width: 64px;
border-radius: var(--r-pill);
background: var(--c-bg-sunken);
overflow: hidden;
}
.bar__fill {
position: absolute;
top: 0; bottom: 0; left: 0;
width: var(--bar, 0%);
border-radius: var(--r-pill);
background: var(--c-primary);
}
.bar__fill--soft { background: var(--c-ink-3); }
.bar__fill--accent { background: var(--c-accent-bright); }
.bar__fill--ok { background: var(--c-ok); }
.bar-row { display: flex; flex-direction: column; gap: var(--sp-2); }
.bar-row__head {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
font-size: var(--fs-sm);
}
.bar-row__name { font-weight: var(--fw-medium); color: var(--c-ink); }
.bar-row__value { font-variant-numeric: tabular-nums; color: var(--c-ink-2); }
.bar-row + .bar-row { padding-top: var(--sp-4); border-top: 1px solid var(--c-line-soft); }
.bar-stack { display: flex; flex-direction: column; gap: var(--sp-2); }
.bar-inline { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.bar-inline .bar { flex: 1 1 auto; min-width: 48px; }
.bar-inline__num {
flex: none;
min-width: 4ch;
text-align: right;
font-size: var(--fs-xs);
color: var(--c-ink-3);
font-variant-numeric: tabular-nums;
}
.bar-legend {
display: flex; flex-wrap: wrap; gap: var(--sp-4);
font-size: var(--fs-sm); color: var(--c-ink-2);
}
.bar-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.bar-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c-primary); }
.bar-legend i.soft { background: var(--c-ink-3); }
.bar-legend i.accent { background: var(--c-accent-bright); }
/* ---------------------------------------------------------
29. 우측 사이드패널 (목록에서 상세를 옆으로 여는 곳)
--------------------------------------------------------- */
.sidepanel { position: fixed; inset: 0; z-index: var(--z-modal); }
.sidepanel__scrim { position: absolute; inset: 0; background: var(--c-overlay); border: 0; width: 100%; }
.sidepanel__body {
position: absolute; top: 0; right: 0; bottom: 0;
display: flex; flex-direction: column;
width: min(520px, 100%);
background: var(--c-surface);
border-left: 1px solid var(--c-line);
box-shadow: var(--sh-pop);
}
.sidepanel__head {
display: flex; align-items: flex-start; gap: var(--sp-3);
padding: var(--sp-5);
border-bottom: 1px solid var(--c-line);
}
.sidepanel__head > div:first-child { flex: 1; min-width: 0; }
.sidepanel__title { display: block; font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.sidepanel__meta { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-3); }
.sidepanel__tabs { padding: 0 var(--sp-5); }
.sidepanel__scroll { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.sidepanel__foot {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
padding: var(--sp-4) var(--sp-5);
border-top: 1px solid var(--c-line);
}
.sidepanel__foot .btn--danger-text { margin-left: auto; color: var(--c-danger); }
@media (max-width: 560px) {
.sidepanel__body { width: 100%; }
}
@media print {
.sidepanel { display: none !important; }
}
/* ---------------------------------------------------------
30. 계산 방식 설명 · 한계 문구 · 출처 링크 줄
--------------------------------------------------------- */
.method-body {
display: flex; flex-direction: column; gap: var(--sp-3);
font-size: var(--fs-md); color: var(--c-ink-2);
}
.method-body strong { color: var(--c-ink); font-weight: var(--fw-semi); }
.method-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.method-list li { padding-left: var(--sp-4); position: relative; }
.method-list li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 5px; height: 5px; border-radius: 50%; background: var(--c-line-strong);
}
.disclaimer { font-size: var(--fs-sm); color: var(--c-ink-3); }
.source-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* ---------------------------------------------------------
31. 인쇄 전용 조각 · 인쇄 압축
.print-head / .print-foot / .print-only 는 화면에서 숨는다.
를 붙이면 카드·섹션 여백을
한 단계 조여 A4 한 장에 담는다. 페이지별로 더 조일 때는
같은 특이도(.print-tight X)로 덮어쓴다.
--------------------------------------------------------- */
.print-head, .print-foot, .print-only { display: none; }
@media print {
.print-head, .print-foot, .print-only { display: block; }
.print-head {
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--c-line-strong);
}
.print-head h1 { font-size: var(--fs-xl); }
.print-foot { margin-top: var(--sp-3); }
.print-foot .disclaimer { font-size: var(--fs-xs); line-height: var(--lh-snug); }
/* A4 인쇄 폭(≈700px)은 768 브레이크포인트보다 좁아 2열 폼이 1열로 무너진다.
768px 규칙(4절)보다 뒤에 있어야 이긴다. */
.form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
/* 최소 너비를 걷어야 표가 종이 폭에 맞는다 */
.table--min-xs, .table--min-sm, .table--min-md,
.table--min-lg, .table--min-xl { min-width: 0; }
.table-wrap { overflow: visible; }
.print-tight .page-head { display: none !important; }
.print-tight .field { gap: var(--sp-1); }
.print-tight .hint { display: none; }
.print-tight .card { box-shadow: none; border-color: var(--c-line-strong); break-inside: avoid; }
.print-tight .section { margin-bottom: var(--sp-4); break-inside: avoid; }
.print-tight .section-head { margin-bottom: var(--sp-2); }
.print-tight .section-title { font-size: var(--fs-base); }
.print-tight .card__head { padding: var(--sp-2) var(--sp-4); }
.print-tight .card__body { padding: var(--sp-3) var(--sp-4); }
.print-tight .card__body--tight { padding: 0; }
.print-tight .card__foot { padding: var(--sp-2) var(--sp-4); }
.print-tight .table--compact th,
.print-tight .table--compact td { padding: 3px var(--sp-3); font-size: var(--fs-sm); }
.print-tight .kpi { padding: var(--sp-3); }
.print-tight .bar-row + .bar-row { padding-top: var(--sp-2); }
}
/* ---------------------------------------------------------
32. 보장 지도 (.radar) — 방사형 지도 + 좁은 화면용 가로 막대 지도
보장분석이 쓰는 부품. SVG 안에서도 색은 토큰 변수로만 쓴다
(인라인 fill/stroke 금지). 비율은 JS 가 --bar / --mark 변수로 넣는다.
세 겹의 뜻: 현재 = 회색 실선, 권장 = 인디고 점선, 리모델링 후 = 강조색 면.
--------------------------------------------------------- */
.radar { display: block; width: 100%; height: auto; }
.radar__ring { fill: none; stroke: var(--c-line-soft); stroke-width: 1; }
.radar__ring--edge { stroke: var(--c-line); }
.radar__spoke { stroke: var(--c-line); stroke-width: 1; }
.radar__layer { stroke-linejoin: round; stroke-linecap: round; }
.radar__layer--cur { fill: var(--c-ink-3); fill-opacity: .09; stroke: var(--c-ink-3); stroke-width: 1.6; }
.radar__layer--rec { fill: none; stroke: var(--c-primary); stroke-width: 1.5; stroke-dasharray: 6 4; }
.radar__layer--after { fill: var(--c-accent-bright); fill-opacity: .18; stroke: var(--c-accent); stroke-width: 2; }
.radar__dot--cur { fill: var(--c-ink-3); }
.radar__dot--after { fill: var(--c-accent); }
.radar__name { fill: var(--c-ink); font-size: 13px; font-weight: var(--fw-semi); }
.radar__amount { fill: var(--c-ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.radar__flag { fill: var(--c-accent-ink); font-size: 10.5px; font-weight: var(--fw-bold); }
.radar__flag--fixed { fill: var(--c-ok); }
/* 인쇄·좁은 폭에서 SVG 가 축소되면 글자가 같이 작아지므로 한 단계 키운다 */
.radar--tight .radar__name { font-size: 19px; }
.radar--tight .radar__amount { font-size: 15px; }
.radar--tight .radar__flag { font-size: 14px; }
.radar-legend {
display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
font-size: var(--fs-sm); color: var(--c-ink-2);
}
.radar-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.radar-legend i { width: 16px; height: 3px; border-radius: 2px; background: var(--c-ink-3); flex: none; }
.radar-legend i.rec { height: 0; background: none; border-top: 2px dashed var(--c-primary); }
.radar-legend i.after { background: var(--c-accent-bright); }
/* 부족한 곳 문장 — 지도를 읽어 주는 자리 */
.radar-gaps { display: flex; flex-direction: column; gap: var(--sp-2); }
.radar-gaps__item {
display: flex; gap: var(--sp-2); align-items: baseline;
font-size: var(--fs-md); color: var(--c-ink);
}
.radar-gaps__rank {
flex: none; min-width: 1.4em;
color: var(--c-ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.radar-gaps__text strong { font-weight: var(--fw-semi); }
.radar-gaps__fixed { color: var(--c-ok); font-size: var(--fs-sm); font-weight: var(--fw-semi); white-space: nowrap; }
.radar-gaps__none { font-size: var(--fs-md); color: var(--c-ink-2); }
/* 400px 이하에서 방사형 대신 쓰는 가로 막대 지도 (같은 데이터) */
.radar-bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.radar-bar { display: flex; flex-direction: column; gap: var(--sp-1); }
.radar-bar__head {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
font-size: var(--fs-sm);
}
.radar-bar__name { font-weight: var(--fw-medium); color: var(--c-ink); }
.radar-bar__flag { margin-left: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-accent-ink); }
.radar-bar__flag--fixed { color: var(--c-ok); }
.radar-bar__val { color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.radar-bar__track {
position: relative; height: 20px;
border-radius: var(--r-sm); background: var(--c-bg-sunken); overflow: hidden;
}
.radar-bar__fill {
position: absolute; left: 0; width: var(--bar, 0%); height: 6px;
border-radius: var(--r-pill); background: var(--c-ink-3);
}
.radar-bar__fill--cur { top: 3px; }
.radar-bar__fill--after { bottom: 3px; background: var(--c-accent-bright); }
.radar-bar__mark {
position: absolute; top: 0; bottom: 0; left: var(--mark, 78%);
width: 0; border-left: 2px dashed var(--c-primary);
}
@media print {
.radar__layer, .radar__dot--cur, .radar__dot--after,
.radar__ring, .radar__spoke {
print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
}
/* ---------------------------------------------------------
33. 홈 "오늘" 영역 — 카드가 아니라 문장과 숫자로 여는 자리
숫자 4개는 누르면 아래 목록으로 데려가는 버튼이다.
--------------------------------------------------------- */
.today { margin-bottom: var(--sp-7); }
.today__date { margin: 0; font-size: var(--fs-md); color: var(--c-ink-3); }
.today__line {
margin: var(--sp-2) 0 0;
max-width: 30ch;
font-size: calc(var(--fs-3xl) * 1.05);
font-weight: var(--fw-bold);
letter-spacing: -0.035em;
line-height: 1.2;
}
.today__sub { margin: var(--sp-3) 0 0; max-width: 56ch; font-size: var(--fs-base); color: var(--c-ink-2); }
.today__stats {
display: flex;
margin-top: var(--sp-6);
border-top: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
}
.statbtn {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
border: 0;
background: none;
font: inherit;
text-align: left;
color: inherit;
cursor: pointer;
}
.statbtn + .statbtn { padding-left: var(--sp-5); border-left: 1px solid var(--c-line); }
.statbtn__num {
font-size: calc(var(--fs-3xl) * 1.35);
font-weight: var(--fw-bold);
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
.statbtn__num .unit {
margin-left: 2px;
font-size: var(--fs-base);
font-weight: var(--fw-medium);
letter-spacing: 0;
color: var(--c-ink-2);
}
.statbtn__label { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.statbtn__sub { font-size: var(--fs-xs); color: var(--c-ink-3); }
.statbtn:hover .statbtn__label { color: var(--c-primary); }
.statbtn--zero .statbtn__num { color: var(--c-line-strong); }
.statbtn--near .statbtn__num { color: var(--c-accent); }
.statbtn--over .statbtn__num { color: var(--c-danger); }
@media (max-width: 768px) {
.today__line { font-size: var(--fs-2xl); max-width: none; }
.today__stats { flex-wrap: wrap; }
.statbtn { flex: 1 1 45%; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }
.statbtn:nth-child(odd) { padding-left: 0; border-left: 0; }
.statbtn:nth-child(n+3) { border-top: 1px solid var(--c-line); }
.statbtn__num { font-size: var(--fs-3xl); }
}
/* ---------------------------------------------------------
34. 지금 챙길 고객 한 줄
D-day · 이름 · 사유 뱃지 · 바로 액션
--------------------------------------------------------- */
.care-row {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-3) var(--sp-5);
border-bottom: 1px solid var(--c-line-soft);
}
.care-row:last-child { border-bottom: 0; }
.care-row__dday {
flex: none;
width: 56px;
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
letter-spacing: -0.02em;
color: var(--c-ink-2);
font-variant-numeric: tabular-nums;
}
.care-row__dday--near { color: var(--c-accent); }
.care-row__dday--today { color: var(--c-danger); }
.care-row__dday--none { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-3); }
/* 큰 D-day 가 어느 사유의 것인지 — 사유가 둘 이상일 때만 붙는다(UX_AUDIT P2-4) */
.care-row__ddaywhy {
display: block;
margin-top: 1px;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
letter-spacing: 0;
color: var(--c-ink-3);
word-break: keep-all;
}
.care-row__main { flex: 1 1 auto; min-width: 0; }
.care-row__name { display: block; font-size: var(--fs-base); font-weight: var(--fw-semi); }
/* 사유는 한 덩어리(뱃지 + 그 사유의 날짜·D-day)씩, 한 줄에 하나씩 놓는다.
사유가 둘 이상인 고객이 흔해서, 옆으로 이어 붙이면 어느 날짜가 어느 사유인지 엉킨다. */
.care-row__why { margin-top: 2px; flex-direction: column; align-items: flex-start; gap: 2px; }
.care-row__reason { display: inline-flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.care-row__note {
min-width: 0;
font-size: var(--fs-sm);
color: var(--c-ink-3);
font-variant-numeric: tabular-nums;
}
.care-row__acts { display: flex; flex: none; gap: var(--sp-1); }
@media (max-width: 768px) {
.care-row {
flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); gap: var(--sp-2) var(--sp-3);
align-items: flex-start; /* 사유가 여러 줄이어도 D-day 는 늘 맨 윗줄에 선다 */
}
.care-row__dday { width: 48px; }
/* 기본 폭 0 — 사유가 길어도 이름 칸이 통째로 아랫줄로 밀리지 않고 글이 안에서 접힌다 */
.care-row__main { flex: 1 1 0; }
.care-row__acts { width: 100%; }
.care-row__acts .btn { flex: 1; }
}
/* ---------------------------------------------------------
35. 도구 컴팩트 목록 (카드 그리드 대신 한 줄 링크)
--------------------------------------------------------- */
.toollist {
display: grid;
/* 한 줄이 좁으면 설명이 "…" 로 잘린다 — 넓은 화면에서도 두 칸까지만 나눈다 */
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 0 var(--sp-7);
}
.toollink {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-1);
border-bottom: 1px solid var(--c-line-soft);
color: var(--c-ink);
}
.toollink:hover { text-decoration: none; }
.toollink:hover .toollink__name { color: var(--c-primary); }
.toollink svg { color: var(--c-ink-3); }
.toollink:hover svg { color: var(--c-primary); }
.toollink__body {
display: flex;
flex: 1 1 auto;
align-items: baseline;
gap: var(--sp-3);
min-width: 0;
}
.toollink__name { flex: none; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.toollink__desc {
min-width: 0;
font-size: var(--fs-sm);
color: var(--c-ink-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 좁은 화면에서는 한 줄에 못 담아 설명이 잘린다 — 이름 아래로 내려 두 줄까지 보여준다 */
@media (max-width: 768px) {
.toollist { grid-template-columns: 1fr; }
.toollink { align-items: flex-start; }
.toollink svg { margin-top: 2px; }
.toollink__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toollink__desc { white-space: normal; line-height: var(--lh-snug); }
}
/* ---------------------------------------------------------
36. 즐겨찾기 칩 (이름 링크 + 별 토글 한 덩이)
--------------------------------------------------------- */
.favchip {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 var(--sp-1) 0 var(--sp-3);
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
background: var(--c-surface);
}
.favchip:hover { border-color: var(--c-primary-line); }
.favchip__link { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink); }
.favchip__link:hover { color: var(--c-primary); text-decoration: none; }
.favchip .fav-btn { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; }
.favchip .fav-btn svg { width: 14px; height: 14px; }
/* 카드 본문 아래에 접이식이 붙을 때의 구분선 */
.card__body + .disclosure { border-top: 1px solid var(--c-line); }
/* 전산 타일 안의 별 — 타일은 링크라서 별만 따로 띄운다 */
.insurer-cell { position: relative; display: flex; }
.insurer-cell .insurer { flex: 1 1 auto; min-width: 0; overflow: hidden; padding-right: var(--sp-7); }
.insurer-cell .fav-btn {
position: absolute;
right: 2px; top: 50%;
transform: translateY(-50%);
width: 26px; height: 26px;
padding: 0;
display: grid; place-items: center;
}
.insurer-cell .fav-btn svg { width: 14px; height: 14px; }
/* ---------------------------------------------------------
37. 설정 페이지 — 저장 용량 줄 · 위험한 동작 버튼
--------------------------------------------------------- */
/* 지우기처럼 되돌릴 수 없는 동작 — 글자만 빨갛게 */
.btn--danger-text { color: var(--c-danger); }
.usage { display: flex; flex-direction: column; gap: var(--sp-2); }
.usage__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-md); }
.usage__key { color: var(--c-ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage__size { flex: none; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------
38. 인쇄 머리말 보조 줄 (shell.js 의 hub.printHead 가 채운다)
--------------------------------------------------------- */
@media print {
.print-head__sub { margin: var(--sp-1) 0 0; font-size: var(--fs-md); color: var(--c-ink-2); }
.print-head__meta { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--c-ink-3); }
}
/* ---------------------------------------------------------
39. 고객 파일 저장 모달 (customer-link.js 가 그린다)
고객 고르는 목록 + 권유 근거 한 줄
--------------------------------------------------------- */
.pick-list { max-height: 220px; overflow: auto; }
.pick-list__item {
width: 100%;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.pick-list__item:hover .list__title { color: var(--c-primary); }
.pick-list__item[aria-pressed="true"] { background: var(--c-primary-tint); }
/* ---------------------------------------------------------
40. 날짜 한 줄 폼 (레이블 - 입력 - 결과)
고객관리 "보수교육 이수 기한" 처럼 날짜 하나를 넣으면 결과가 옆에 붙는 자리.
.filter-bar 로 만들면 결과 줄 수에 따라 입력칸과 아래위가 어긋난다.
--------------------------------------------------------- */
.date-form {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--sp-3) var(--sp-6);
}
.date-form__field { flex: none; gap: var(--sp-1); }
.date-form__result { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
/* 결과 첫 줄: "다음 기한 …" 과 D-day 를 같은 밑줄에 놓는다 */
.date-form__line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sp-2) var(--sp-4);
min-width: 0;
}
@media (max-width: 760px) {
.date-form { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
/* ---------------------------------------------------------
70. 캘린더 연동 (assets/js/calendar-sync.js)
일정 한 줄 옆의 "G" 링크 · 카드 머리의 내보내기 버튼 · 설정 "연동" 절
--------------------------------------------------------- */
/* 목록 행이 버튼이라 안에 링크를 넣을 수 없을 때, 행과 링크를 한 줄로 묶는 껍데기 */
.list__row {
display: flex;
align-items: center;
gap: var(--sp-2);
border-bottom: 1px solid var(--c-line-soft);
}
.list__row:last-child { border-bottom: none; }
.list__row > .list__item,
.list__row > .list__item--btn { flex: 1; min-width: 0; border-bottom: none; }
/* 일정 한 건을 구글 캘린더로 넘기는 작은 링크 */
.gcal-link {
display: inline-grid;
place-items: center;
flex: none;
width: 28px; height: 28px;
border-radius: var(--r-sm);
color: var(--c-ink-3);
}
.gcal-link:hover { background: var(--c-primary-tint); color: var(--c-primary); text-decoration: none; }
.gcal-link svg { width: 16px; height: 16px; }
/* 카드 머리의 뱃지 + 내보내기 버튼 한 덩이.
버튼 글자가 길어 좁은 화면에서는 제목 아랫줄로 내려간다(--wrap 이 그 자리를 만든다) */
.card__head--wrap { flex-wrap: wrap; row-gap: var(--sp-2); }
.cal-export { gap: var(--sp-2); min-width: 0; }
.cal-export .btn { white-space: nowrap; }
/* 설정 "연동" 절 */
.calsync__row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--sp-3);
}
.calsync__row .field { flex: 1 1 260px; min-width: 0; }
.calsync__state {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2) var(--sp-3);
}
/* 다섯 단계 — 번호를 보여 준다(리셋이 목록 표식을 지워 둔다) */
.calsync__steps { margin: 0; padding-left: var(--sp-5); list-style: decimal; }
.calsync__steps li { margin-bottom: var(--sp-2); color: var(--c-ink-2); font-size: var(--fs-sm); }
.calsync__steps li:last-child { margin-bottom: 0; }
/* 주소·권한 이름은 눈에 띄게만 한다 — 글꼴은 본문 그대로(모노스페이스 금지) */
.calsync code {
padding: 0 var(--sp-1);
border-radius: 3px;
background: var(--c-bg-sunken);
font-family: inherit;
font-size: inherit;
word-break: break-all;
}
@media (max-width: 768px) {
.cal-export { flex: 1 1 100%; justify-content: flex-start; }
.calsync__row .field { flex-basis: 100%; }
}
/* =========================================================
80~85절 — 혼자 쓰는 도구(1인 최적화)에서 더해진 부품
80 헤더 백업 상태 81 백업 알림 띠 82 오늘 한 줄 기록
83 첫 실행 안내 84 단축키 도움말 85 설정 백업 절 보조
========================================================= */
/* ---------------------------------------------------------
80. 헤더 오른쪽 보조 버튼 (백업 상태 · 설정)
백업이 밀리면 점이 켜진다. 색은 강조색 하나만 쓴다.
--------------------------------------------------------- */
.app-hdr-btn { position: relative; }
.app-hdr-dot {
position: absolute;
top: 6px;
right: 6px;
width: 7px;
height: 7px;
border: 1.5px solid var(--c-surface);
border-radius: var(--r-pill);
background: var(--c-accent-bright);
}
.app-hdr-dot[hidden] { display: none; }
/* ---------------------------------------------------------
81. 백업 알림 띠 (홈 맨 위, 닫을 수 있는 한 줄)
카드가 아니라 얇은 띠다 — 본문을 밀어내되 눈을 뺏지 않는다.
--------------------------------------------------------- */
.backup-bar {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--c-accent-line);
border-radius: var(--r-sm);
background: var(--c-accent-tint);
color: var(--c-accent-ink);
font-size: var(--fs-sm);
}
.backup-bar[hidden] { display: none; }
.backup-bar__icon { display: flex; flex: none; color: var(--c-accent); }
.backup-bar__text { flex: 1 1 auto; min-width: 0; line-height: var(--lh-snug); }
.backup-bar__acts { display: flex; flex: none; gap: var(--sp-2); }
@media (max-width: 768px) {
.backup-bar { flex-wrap: wrap; }
.backup-bar__text { flex-basis: calc(100% - 44px); }
.backup-bar__acts { flex: 1 1 auto; }
.backup-bar__acts .btn { flex: 1 1 auto; }
}
/* ---------------------------------------------------------
82. 오늘 한 줄 기록 (홈 "오늘" 아래)
통화·방문을 잊기 전에 한 줄로 적는 자리.
--------------------------------------------------------- */
.quicknote {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-4);
}
.quicknote__field { flex: 1 1 auto; min-width: 0; }
.quicknote__input { width: 100%; }
.quicknote__list {
margin: var(--sp-2) 0 0;
padding: 0;
list-style: none;
}
.quicknote__list[hidden] { display: none; }
.quicknote__row {
display: flex;
gap: var(--sp-2);
padding: var(--sp-1) 0;
color: var(--c-ink-2);
font-size: var(--fs-sm);
}
.quicknote__who {
margin-left: var(--sp-2);
padding: 0 var(--sp-2);
border-radius: var(--r-pill);
background: var(--c-primary-tint);
color: var(--c-primary-ink);
font-size: var(--fs-xs);
}
.quicknote__time {
flex: none;
width: 46px;
color: var(--c-ink-3);
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------
83. 첫 실행 안내 (onboarding.js)
모달 위에 단계 점 · 보험사 고르기 칩 · 세 갈래 선택.
--------------------------------------------------------- */
.onb__dialog { max-width: 620px; }
.onb-head { align-items: flex-start; }
.onb-step { margin-top: 2px; color: var(--c-ink-3); font-size: var(--fs-sm); }
.onb-dots { display: flex; gap: var(--sp-1); margin-left: auto; margin-right: var(--sp-2); }
.onb-dot {
width: 7px;
height: 7px;
border-radius: var(--r-pill);
background: var(--c-line-strong);
}
.onb-dot.is-done { background: var(--c-primary-line); }
.onb-dot.is-on { background: var(--c-primary); }
.onb-body { min-height: 260px; }
.onb-lead { color: var(--c-ink-2); font-size: var(--fs-base); line-height: var(--lh-normal); }
.onb-picks {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
max-height: 210px;
padding: var(--sp-1);
overflow-y: auto;
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
background: var(--c-bg);
}
.onb-choices { display: flex; flex-direction: column; gap: var(--sp-2); }
.onb-choice {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--c-line-strong);
border-radius: var(--r-md);
background: var(--c-surface);
text-align: left;
cursor: pointer;
}
.onb-choice:hover { border-color: var(--c-ink-3); background: var(--c-surface-hover); }
.onb-choice[aria-pressed="true"] {
border-color: var(--c-primary);
background: var(--c-primary-tint);
}
.onb-choice__icon { display: flex; flex: none; margin-top: 2px; color: var(--c-primary); }
.onb-choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onb-choice__name { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--c-ink); }
.onb-choice__desc { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-snug); }
.onb-warn { align-items: flex-start; }
.onb-warn__icon { display: flex; flex: none; margin-top: 1px; }
.onb-foot { justify-content: space-between; }
.onb-foot__right { display: flex; gap: var(--sp-2); }
@media (max-width: 768px) {
.onb-dots { display: none; }
.onb-body { min-height: 0; }
}
/* ---------------------------------------------------------
84. 단축키 도움말 (? 로 연다 · shell.js 4-4)
--------------------------------------------------------- */
.modal__dialog--sm { max-width: 420px; }
.kbd-list { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.kbd-list dt { display: flex; gap: var(--sp-1); }
.kbd-list dd { margin: 0; color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 var(--sp-2);
border: 1px solid var(--c-line-strong);
border-bottom-width: 2px;
border-radius: var(--r-sm);
background: var(--c-bg);
color: var(--c-ink-2);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
}
/* ---------------------------------------------------------
85. 설정 "백업" 절 보조 — 알림 주기 줄 · 줄 안에 놓는 입력
--------------------------------------------------------- */
.backup-cycle { gap: var(--sp-4); }
.backup-cycle__title { display: block; font-weight: var(--fw-semi); color: var(--c-ink); }
.backup-cycle__desc {
display: block;
margin-top: 2px;
color: var(--c-ink-2);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
}
.field--inline {
flex: none;
flex-direction: row;
align-items: center;
gap: var(--sp-2);
}
.field--inline .label { margin: 0; white-space: nowrap; }
.field--inline .select { width: auto; }
@media (max-width: 768px) {
.backup-cycle { flex-direction: column; align-items: stretch; }
.field--inline { justify-content: space-between; }
}
/* =========================================================
60. 가져오기 위저드 (tools/import.html)
단계 표시 · 파일 놓는 자리 · 열 매핑 표 · 결과 요약
========================================================= */
/* --- 단계 표시 --- */
.steps { margin-bottom: var(--sp-6); }
.steps__list {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin: 0;
padding: 0;
list-style: none;
}
.steps__item {
display: flex;
align-items: center;
gap: var(--sp-2);
flex: 1 1 140px;
min-width: 0;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
background: var(--c-surface);
color: var(--c-ink-3);
font-size: var(--fs-sm);
}
.steps__num {
display: grid;
place-items: center;
width: 22px;
height: 22px;
flex: none;
border-radius: var(--r-pill);
background: var(--c-bg-sunken);
color: var(--c-ink-3);
font-size: var(--fs-xs);
font-weight: var(--fw-semi);
}
.steps__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps__item--done { color: var(--c-ink-2); border-color: var(--c-primary-line); }
.steps__item--done .steps__num { background: var(--c-primary-tint); color: var(--c-primary-ink); }
.steps__item--now {
border-color: var(--c-primary);
background: var(--c-primary-tint);
color: var(--c-primary-ink);
font-weight: var(--fw-semi);
}
.steps__item--now .steps__num { background: var(--c-primary); color: var(--c-ink-invert); }
/* --- 파일 놓는 자리 --- */
.dropzone {
display: grid;
place-items: center;
gap: var(--sp-2);
padding: var(--sp-8) var(--sp-5);
border: 2px dashed var(--c-line-strong);
border-radius: var(--r-md);
background: var(--c-bg-sunken);
text-align: center;
}
.dropzone__title { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-semi); }
.dropzone__desc { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.dropzone__icon { color: var(--c-ink-3); }
.dropzone--over { border-color: var(--c-primary); background: var(--c-primary-tint); }
.dropzone--filled { border-style: solid; border-color: var(--c-primary-line); background: var(--c-surface); }
/* 고른 파일 요약 */
.filecard {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
border: 1px solid var(--c-primary-line);
border-radius: var(--r-sm);
background: var(--c-primary-tint);
}
.filecard__icon { color: var(--c-primary-ink); flex: none; }
.filecard__main { min-width: 0; flex: 1; }
.filecard__name { display: block; font-size: var(--fs-md); font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.filecard__meta { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
/* --- 열 매핑 표 --- */
.maprow__head { font-weight: var(--fw-semi); }
.maprow__sample {
display: block;
color: var(--c-ink-3);
font-size: var(--fs-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
.maprow--off .maprow__head { color: var(--c-ink-3); font-weight: var(--fw-normal); }
.maprow__select { min-width: 190px; }
/* --- 미리보기 줄 상태 --- */
.rowflags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.preview-row--bad { background: var(--c-danger-tint); }
/* --- 결과 요약 --- */
.result {
display: grid;
gap: var(--sp-3);
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.result__item {
padding: var(--sp-4);
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
background: var(--c-surface);
text-align: center;
}
.result__num { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.1; }
.result__label { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
.result__item--ok .result__num { color: var(--c-ok); }
.result__item--warn .result__num { color: var(--c-accent); }
/* --- 아래 이동 줄 --- */
.wizard-nav {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-6);
padding-top: var(--sp-5);
border-top: 1px solid var(--c-line);
}
.wizard-nav__spacer { flex: 1; }
@media (max-width: 768px) {
.steps__item { flex-basis: 100%; }
.wizard-nav { flex-wrap: wrap; }
.wizard-nav .btn { flex: 1 1 140px; }
.wizard-nav__spacer { display: none; }
/* 좁은 화면에서는 예시 값 칸을 접는다 — 고르는 칸이 가로 스크롤 뒤로 숨으면 안 된다 */
.map-table .mapcol-sample { display: none; }
.map-table.table--min-md { min-width: 0; }
.maprow__select { min-width: 0; width: 100%; }
}
/* =========================================================
100~105절 — 2차 UX 반영(V2)에서 더해진 부품
100 페이지 머리 3버튼 줄 101 고객 고르기 모달(여러 명)
102 목록 행 보조 버튼 103 되돌리기 띠(휴지통)
104 직업 예시표 105 고객 불러오기 띠
========================================================= */
/* ---------------------------------------------------------
100. 페이지 머리 — 버튼이 셋 이상이거나 아래에 한 줄 설명이 붙을 때
(고객관리: 가져오기 / 내려받기 / 고객 추가 + "CSV·엑셀에서 열립니다")
--------------------------------------------------------- */
.page-head__actions--wrap { flex-wrap: wrap; justify-content: flex-end; }
/* 제목 아래 한 줄 — 버튼 이름만으로는 뜻이 갈리는 자리(가져오기·내려받기)에 쓴다 */
.page-head__hint {
margin: var(--sp-2) 0 0;
max-width: 62ch;
font-size: var(--fs-sm);
color: var(--c-ink-3);
}
/* ---------------------------------------------------------
101. 고객 고르기 모달 — 여러 명을 고를 때(보험나이 계산기)
한 명만 고르는 목록은 39절 .pick-list 를 그대로 쓴다.
--------------------------------------------------------- */
.pick-list--multi { max-height: 320px; }
.pick-list__mark {
flex: none;
display: inline-grid;
place-items: center;
width: 20px; height: 20px;
border: 1px solid var(--c-line-strong);
/* 네모난 체크 상자로 보여야 "여러 개 고를 수 있다"는 뜻이 된다(둥글면 라디오로 읽힌다) */
border-radius: calc(var(--r-sm) / 2);
color: transparent;
}
.pick-list__item[aria-pressed="true"] .pick-list__mark {
border-color: var(--c-primary);
background: var(--c-primary);
color: var(--c-ink-invert);
}
.pick-list__mark svg { width: 14px; height: 14px; }
.pick-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2) var(--sp-3);
}
.pick-bar__count { font-size: var(--fs-sm); color: var(--c-ink-2); }
/* ---------------------------------------------------------
102. 목록 행 오른쪽 보조 버튼 (문자 문구 등)
70절 .gcal-link 와 같은 크기라 일정 행에서 나란히 선다.
--------------------------------------------------------- */
.row-act {
display: inline-grid;
place-items: center;
flex: none;
width: 28px; height: 28px;
padding: 0;
border: 0;
border-radius: var(--r-sm);
background: none;
color: var(--c-ink-3);
cursor: pointer;
}
.row-act:hover { background: var(--c-primary-tint); color: var(--c-primary); }
.row-act svg { width: 16px; height: 16px; }
/* ---------------------------------------------------------
103. 되돌리기 띠 — 지운 직후 아래에 잠깐 뜬다(휴지통 30일 보관)
토스트와 같은 자리를 쓰되 버튼이 있어 눌러야 하므로 따로 둔다.
--------------------------------------------------------- */
.undo-bar {
position: fixed;
left: 50%;
bottom: var(--sp-6);
transform: translateX(-50%);
z-index: var(--z-toast);
display: flex;
align-items: center;
gap: var(--sp-4);
max-width: 92vw;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-sm);
background: var(--c-ink);
color: var(--c-ink-invert);
font-size: var(--fs-md);
box-shadow: var(--sh-pop);
}
.undo-bar__text { min-width: 0; }
.undo-bar .btn--secondary {
background: none;
border-color: var(--c-ink-invert);
color: var(--c-ink-invert);
}
.undo-bar .btn--secondary:hover { background: rgba(255, 255, 255, .14); }
@media print { .undo-bar { display: none; } }
/* ---------------------------------------------------------
104. 직업별 상해위험등급 예시표 (고객관리 "상해위험등급이란" 서랍)
--------------------------------------------------------- */
.risk-jobs { margin-top: var(--sp-3); }
.risk-jobs__grade {
display: flex;
align-items: baseline;
gap: var(--sp-2);
margin-bottom: var(--sp-1);
}
.risk-jobs__list {
margin: 0 0 var(--sp-4);
font-size: var(--fs-sm);
color: var(--c-ink-2);
line-height: 1.7;
}
.risk-jobs__list:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------
105. 고객 불러오기 띠 (보장 지도 상단)
--------------------------------------------------------- */
.notice__acts { display: flex; flex: none; gap: var(--sp-2); }
@media (max-width: 768px) {
.notice { flex-wrap: wrap; }
.notice__acts { flex: 1 1 100%; }
}
/* ---------------------------------------------------------
110. 좁은 화면 카테고리 아코디언
(사이트 디렉토리 · 자료실 — 폰에서 목록이 20화면씩 흐르는 것을 막는다)
PC 는 지금처럼 카드가 전부 펼쳐진다. 폰에서만 JS 가 카드를
분야별 서랍에 나눠 담고, 연 서랍의 카드만 화면에 붙인다.
--------------------------------------------------------- */
.cat-acc {
border: 1px solid var(--c-line);
border-radius: var(--r-md);
background: var(--c-surface);
margin-bottom: var(--sp-2);
overflow: hidden;
}
.cat-acc__toggle {
display: flex;
align-items: center;
gap: var(--sp-3);
width: 100%;
padding: var(--sp-4) var(--sp-4);
border: 0;
background: none;
text-align: left;
cursor: pointer;
}
.cat-acc__toggle:hover { background: var(--c-surface-hover); }
.cat-acc__name { font-size: var(--fs-base); font-weight: var(--fw-semi); }
.cat-acc__count { font-size: var(--fs-sm); color: var(--c-ink-3); }
.cat-acc__chevron {
margin-left: auto;
display: inline-flex;
color: var(--c-ink-3);
transition: transform var(--t-base);
}
.cat-acc__toggle[aria-expanded="true"] .cat-acc__chevron { transform: rotate(180deg); }
.cat-acc__panel {
padding: 0 var(--sp-3) var(--sp-4);
border-top: 1px solid var(--c-line);
}
.cat-acc__panel[hidden] { display: none; }
/* 서랍을 쓰는 동안에는 목록 전체를 감싼 그리드 간격을 서랍이 대신 맡는다 */
.grid--acc { display: block; }
/* 목록 맨 위 안내 — "분야를 눌러 펼치세요" */
.acc-hint { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-3); }
/* ---------------------------------------------------------
111. 접는 보조 섹션 (해외 참고용처럼 기본으로 닫아 두는 묶음)
--------------------------------------------------------- */
.fold-toggle {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.fold-toggle .fold-toggle__chevron { display: inline-flex; transition: transform var(--t-base); }
.fold-toggle[aria-expanded="true"] .fold-toggle__chevron { transform: rotate(180deg); }
/* ---------------------------------------------------------
112. 개인 메모 (넣고 싶은 사이트·자료를 스스로 적어 두는 칸)
혼자 쓰는 도구라 "알려주기" 메일 대신 내 메모를 둔다.
--------------------------------------------------------- */
.memo__area {
width: 100%;
min-height: 96px;
padding: var(--sp-3);
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
background: var(--c-surface);
color: var(--c-ink);
font: inherit;
font-size: var(--fs-md);
line-height: var(--lh-normal);
resize: vertical;
}
.memo__area:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.memo__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.memo__state { font-size: var(--fs-xs); color: var(--c-ink-3); }
/* ---------------------------------------------------------
113. 인쇄물 페이지 (site/docs/*.html — 상담 중 펴는 A4 한 장)
화면에서는 읽기 좋은 폭, 인쇄에서는 A4 한 장에 들어가도록 줄인다.
--------------------------------------------------------- */
.sheet { max-width: 900px; }
.sheet__lead { margin: 0 0 var(--sp-4); font-size: var(--fs-md); color: var(--c-ink-2); }
.sheet__grid {
display: grid;
gap: var(--sp-3);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.sheet__block {
min-width: 0;
padding: var(--sp-4);
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
background: var(--c-surface);
}
.sheet__block h3 {
margin: 0 0 var(--sp-2);
font-size: var(--fs-md);
font-weight: var(--fw-semi);
}
.sheet__block p, .sheet__block li { font-size: var(--fs-md); line-height: var(--lh-snug); }
.sheet__block ul, .sheet__block ol { margin: 0; padding-left: 1.1em; }
.sheet__block li + li { margin-top: var(--sp-1); }
.sheet__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
margin-right: var(--sp-2);
border-radius: var(--r-pill);
background: var(--c-primary-tint);
color: var(--c-primary);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
.sheet__say {
margin: var(--sp-2) 0 0;
padding: var(--sp-2) var(--sp-3);
border-left: 3px solid var(--c-primary-line);
background: var(--c-bg);
font-size: var(--fs-md);
line-height: var(--lh-snug);
}
.sheet__src { font-size: var(--fs-xs); color: var(--c-ink-3); line-height: var(--lh-snug); }
.sheet__src a { color: var(--c-ink-3); }
/* 고령 고객용 — 크게 인쇄하기와 짝이 되는 큰 글씨 모드 */
.sheet--large .sheet__block p,
.sheet--large .sheet__block li,
.sheet--large .sheet__say { font-size: var(--fs-lg); line-height: var(--lh-normal); }
.sheet--large .sheet__block h3 { font-size: var(--fs-xl); }
@media print {
/* A4 한 장 — 화면 여백과 그림자를 걷어내고 글자를 한 단계 줄인다 */
.sheet { max-width: none; }
.sheet__grid { gap: 2mm; grid-template-columns: 1fr 1fr; }
.sheet__block { padding: 2mm 2.5mm; break-inside: avoid; box-shadow: none; }
.sheet__block p, .sheet__block li { font-size: 8.6pt; line-height: 1.32; }
.sheet__block h3 { font-size: 9.4pt; margin-bottom: 1mm; }
.sheet__say { margin-top: 1mm; padding: 1mm 2mm; font-size: 8.4pt; line-height: 1.3; }
.sheet__lead { margin-bottom: 1.5mm; font-size: 8.6pt; }
.sheet__src { margin-top: 1.5mm; font-size: 6.8pt; line-height: 1.3; }
/* 큰 글씨 인쇄물 — 고객이 읽을 만큼 크되 A4 한 장은 넘기지 않는 크기 */
.sheet--large .sheet__block p,
.sheet--large .sheet__block li,
.sheet--large .sheet__say { font-size: 10pt; line-height: 1.38; }
.sheet--large .sheet__block h3 { font-size: 11.5pt; }
.sheet--large .sheet__block li + li { margin-top: 0.8mm; }
}
/* =========================================================
90~95절 — 4차 UX 반영에서 더해진 부품 (정본 docs/qa/UX_AUDIT.md)
90 도구 그룹 목록 91 사이드바 소제목 92 좁은 화면 접기 줄
93 챙길 고객 일괄 버튼 94 문자 문구 모달
========================================================= */
/* ---------------------------------------------------------
90. 도구 그룹 목록 (홈 · 업무 빈도순 5그룹)
그룹 한 덩이가 통째로 움직인다 — 넓으면 나란히, 좁으면 쌓인다.
순서·소제목의 정본은 nav.json 의 subgroup.
--------------------------------------------------------- */
.toollist--grouped {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--sp-6) var(--sp-7);
align-items: start;
}
.toolgroup { min-width: 0; }
/* 그룹으로 나누면 한 칸이 좁아져 설명이 "…" 로 잘린다 — 이름 아래로 내려 두 줄까지 보여준다 */
.toollist--grouped .toollink { align-items: flex-start; }
.toollist--grouped .toollink > svg { margin-top: 2px; }
.toollist--grouped .toollink__body { flex-direction: column; align-items: flex-start; gap: 2px; }
.toollist--grouped .toollink__desc { white-space: normal; line-height: var(--lh-snug); }
.toolgroup__sub {
margin: 0 0 var(--sp-1);
font-size: var(--fs-xs);
font-weight: var(--fw-semi);
color: var(--c-ink-3);
}
/* "매일" 세 개는 큰 줄 — 이름을 키우고 설명을 아래로 내린다 */
.toollink--lg { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.toollink--lg .toollink__body { flex-direction: column; align-items: flex-start; gap: 2px; }
.toollink--lg .toollink__name { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.toollink--lg .toollink__desc { white-space: normal; line-height: var(--lh-snug); }
.toollink--lg svg { align-self: flex-start; margin-top: 3px; }
/* ---------------------------------------------------------
91. 사이드바 소제목 (도구 그룹 안의 작은 머리글)
--------------------------------------------------------- */
.nav-sub__label {
padding: var(--sp-3) var(--sp-3) var(--sp-1);
font-size: var(--fs-xs);
color: var(--c-ink-3);
}
.nav-group__label + .nav-sub__label { padding-top: 0; }
/* ---------------------------------------------------------
92. 좁은 화면 접기 줄 (홈 달력 · 외부 서비스 레일)
버튼은 폰에서만 보인다. 켜고 끄는 것은 index.html 이 한다.
--------------------------------------------------------- */
.cal-toggle-row { margin-bottom: var(--sp-4); }
.rail-fold-row { margin: 0 0 var(--sp-4); }
.rail-fold-row .btn { flex: 1 1 auto; }
/* ---------------------------------------------------------
93. 챙길 고객 일괄 버튼 (오늘 생일 여러 명 문구 한 번에)
--------------------------------------------------------- */
.care-bulk { margin: calc(var(--sp-5) * -1) 0 var(--sp-5); }
.care-bulk .hint { margin: 0; }
/* ---------------------------------------------------------
94. 문자·카톡 문구 모달 (message-templates.js)
종류 탭 → 편집 가능한 문구 → 글자수 → 복사 · 문자 앱
--------------------------------------------------------- */
.msg-who {
margin: 0 0 var(--sp-3);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--c-ink-2);
}
.msg-people { margin-bottom: var(--sp-3); }
.msg-tabs { margin-bottom: var(--sp-4); }
.msg-field { margin-bottom: var(--sp-2); }
.msg-text { min-height: 190px; line-height: var(--lh-normal); }
.msg-count { margin: 0 0 var(--sp-3); }
.msg-ad { margin-bottom: var(--sp-3); }
.msg-warn { margin: 0 0 var(--sp-3); color: var(--c-accent-ink); }
.msg-guide { margin-bottom: 0; }
.msg-foot { flex-wrap: wrap; }
.msg-foot .msg-kakao { flex: 1 1 100%; margin: 0 0 var(--sp-2); }
/* 연락처가 없으면 문자 앱을 열 수 없다 — 누를 수 없게 하고 이유를 이름으로 말한다 */
.msg-foot .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
/* 복사 폴백용 숨은 입력칸 — 화면 밖으로만 보낸다(display:none 이면 선택이 안 된다) */
.msg-clip { position: fixed; top: -200px; left: -200px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 560px) {
.msg-foot .btn { flex: 1 1 auto; }
/* 탭 다섯 개가 한 줄에 다 보이도록 좁힌다(가로로 숨으면 "안부"를 못 찾는다) */
.msg-tabs .tab { padding-left: var(--sp-2); padding-right: var(--sp-2); font-size: var(--fs-sm); }
.msg-tabs .tab[aria-selected="true"]::after { left: var(--sp-1); right: var(--sp-1); }
.msg-text { min-height: 160px; }
}