/* CRM 화면 전용 레이아웃. 색·글꼴은 medikit.css 의 --ms-* 토큰만 쓴다. */ /* ── 셸: 아이콘 레일(56) + 하위 메뉴(160) + 본문 ── */ .crm-shell { display: flex; height: 100vh; overflow: hidden; background: var(--ms-gray-100); } .crm-main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; } .crm-side { display: flex; flex: none; flex-direction: column; width: 216px; border-right: 1px solid var(--ms-gray-200); background: var(--ms-white); } .crm-side__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 48px; padding: 0 8px 0 12px; } .crm-tenant { display: flex; align-items: center; gap: 6px; min-width: 0; height: 34px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font-size: 14px; font-weight: 500; } .crm-tenant:hover { background: var(--ms-gray-100); } .crm-tenant__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .crm-side__body { display: flex; flex: 1; min-height: 0; } .crm-rail { display: flex; flex: none; flex-direction: column; align-items: center; gap: 4px; width: 56px; padding: 4px 0 8px; border-right: 1px solid var(--ms-gray-200); } .crm-rail__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 44px; height: 48px; border-radius: 8px; color: var(--ms-gray-700); font-size: 11px; text-decoration: none; } .crm-rail__item:hover { background: var(--ms-gray-100); } .crm-rail__item .ms-icon { color: var(--ms-gray-600); } .crm-rail__item[aria-current="page"] { color: var(--ms-primary); font-weight: 500; } .crm-rail__item[aria-current="page"] .ms-icon { color: var(--ms-primary); } .crm-rail__bottom { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 0 4px; } .crm-rail__link { display: flex; align-items: center; gap: 4px; color: var(--ms-gray-700); font-size: 11px; white-space: nowrap; text-decoration: none; } .crm-submenu { flex: 1; gap: 12px; min-width: 0; padding: 8px 8px 8px 6px; overflow-y: auto; } .crm-submenu__group { padding: 4px 8px; font-size: 10px; font-weight: 600; } .crm-submenu__item { justify-content: space-between; gap: 4px; height: 28px; padding: 0 8px; border-radius: 6px; font-size: 13px; } .crm-star { color: var(--ms-gray-500); font-size: 12px; } .crm-fav-empty { margin: 0; padding: 8px; border-radius: 6px; background: var(--ms-gray-100); line-height: 1.5; } .crm-side__foot { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; border-top: 1px solid var(--ms-gray-200); } .crm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--ms-primary); color: var(--ms-white); font-size: 12px; font-weight: 600; } .crm-side__links { display: flex; gap: 14px; } .crm-side__links a { display: inline-flex; align-items: center; gap: 4px; color: var(--ms-gray-700); font-size: 11px; text-decoration: none; } /* ── 공통 작은 부품 ── */ .crm-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ms-gray-700); font-size: 16px; line-height: 1; } .crm-iconbtn:hover { background: var(--ms-gray-200); } .crm-iconbtn--primary { width: 32px; padding: 0; } .crm-spacer { flex: 1; } .crm-sep { margin: 0 6px; color: var(--ms-gray-400); font-weight: 400; } .crm-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--ms-black); } .crm-link { color: var(--ms-primary); text-decoration: none; } .crm-link:hover { text-decoration: underline; } .crm-linkbtn { color: var(--ms-primary); } .crm-kbd { padding: 1px 6px; border: 1px solid var(--ms-gray-300); border-radius: 4px; color: var(--ms-gray-600); font-size: 11px; white-space: nowrap; } .crm-search { gap: 8px; width: 220px; padding: 0 10px; } .crm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .crm-stage { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; color: var(--ms-white); font-size: 12px; font-weight: 500; white-space: nowrap; } .crm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0; color: var(--ms-gray-600); font-size: 13px; } .crm-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--ms-gray-300); border-radius: 8px; resize: vertical; } .crm-textarea:focus { outline: 0; border-color: var(--ms-primary); } .crm-select-xs { height: 28px; padding: 0 8px; border-radius: 6px; } .crm-select-xs > select { font-size: 12px; } .crm-seg { display: flex; gap: 4px; padding: 2px; border-radius: 999px; background: var(--ms-gray-200); } .crm-seg .ms-chip { height: 28px; padding: 0 10px; font-size: 12px; background: transparent; } .crm-seg .ms-chip[aria-pressed="true"] { background: var(--ms-white); color: var(--ms-black); } /* ── 페이지 머리(topbar) ── */ .crm-page { display: flex; flex: 1; flex-direction: column; min-height: 0; } .crm-topbar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--ms-gray-200); background: var(--ms-white); } .crm-topbar__tools { display: flex; align-items: center; gap: 4px; } .crm-datectl { gap: 2px; } .crm-page__head { flex-direction: row; align-items: center; justify-content: space-between; } /* ── 보드 레이아웃: 왼쪽 패널(150) + 메인 ── */ .crm-board { display: flex; flex: 1; min-height: 0; } .crm-panel { display: flex; flex: none; flex-direction: column; width: 200px; border-right: 1px solid var(--ms-gray-200); background: var(--ms-white); } .crm-board__main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; } .crm-tabs { display: flex; flex: none; gap: 4px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--ms-gray-200); background: var(--ms-white); } .crm-tab { position: relative; height: 100%; padding: 0 10px; border: 0; background: none; color: var(--ms-gray-700); font-size: 13px; } .crm-tab[aria-selected="true"] { color: var(--ms-primary); font-weight: 500; } .crm-tab[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--ms-primary); } /* 공지 */ .crm-notice { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 12px; } .crm-notice__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 8px; white-space: nowrap; } .crm-notice__head .ms-t-heading-sm { font-size: 13px; } .crm-datenav { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; } .crm-datenav .crm-iconbtn { width: 16px; height: 18px; font-size: 13px; } .crm-datenav .ms-t-caption { font-size: 10px; } .crm-notice__body { flex: 1; display: flex; align-items: center; justify-content: center; } .crm-notice__text { margin: 0; align-self: flex-start; width: 100%; white-space: pre-wrap; font-size: 13px; line-height: 1.6; } .crm-notice__foot { display: flex; justify-content: flex-end; } .crm-notice__form { display: flex; flex: 1; flex-direction: column; gap: 8px; } .crm-notice__actions { justify-content: flex-end; } /* 범례 */ .crm-legend { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-top: 1px solid var(--ms-gray-200); } .crm-legend__title { margin-bottom: 2px; font-weight: 500; } .crm-legend__item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ms-gray-700); } /* ── 홈 ── */ .crm-home { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0; overflow: auto; container-type: size; } .crm-home__greet { margin: 0; font-size: 16px; font-weight: 600; color: var(--ms-black); } /* 본문 영역(사이드바 제외)의 가로 70% · 세로 28% */ .crm-home__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 12px; width: 70cqw; height: 28cqh; min-height: 260px; } .crm-home__notice { display: flex; padding: 0; } /* 높이는 오른쪽 버튼 3개 묶음에 맞춰 늘어난다 */ .crm-home__links { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; min-height: 0; } .crm-linkcard { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 0; padding: 14px 16px 14px 20px; color: inherit; text-decoration: none; } .crm-linkcard:hover { border-color: var(--ms-primary-500); } .crm-linkcard > span:first-child { display: flex; flex-direction: column; gap: 2px; } .crm-linkcard__title { font-size: 16px; font-weight: 600; color: var(--ms-black); } .crm-linkcard__sub { font-size: 12px; color: var(--ms-primary); } .crm-chev { color: var(--ms-gray-500); font-size: 18px; } /* ── 예약 그리드 ── */ .crm-grid { display: flex; flex: 1; flex-direction: column; min-height: 0; background: var(--ms-white); } .crm-grid__head { display: flex; flex: none; padding-right: 36px; position: relative; overflow: hidden; border-bottom: 1px solid var(--ms-gray-200); } /* 가로 위치는 본문 스크롤을 따라간다 (app.js) */ .crm-grid__corner { flex: none; width: 64px; } .crm-grid__colhead { flex: none; min-width: 0; padding: 8px 6px; border-left: 1px solid var(--ms-gray-200); line-height: 1.3; } .crm-grid__colhead .ms-t-heading-sm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-grid__expand { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); } .crm-grid__body { position: relative; display: flex; flex: 1; min-height: 0; padding-right: 36px; overflow: auto; } .crm-grid__times { flex: none; width: 64px; } .crm-grid__time { padding: 4px 8px; color: var(--ms-gray-700); font-size: 12px; text-align: right; transform: translateY(-9px); } .crm-grid__col { position: relative; flex: none; min-width: 0; border-left: 1px solid var(--ms-gray-200); } .crm-grid__cell { border-bottom: 1px solid var(--ms-gray-200); } .crm-grid__cell[data-time$=":00"] { border-bottom-style: dashed; } /* 정각 칸 아래는 점선 (30분 칸 아래는 실선) */ .crm-rcard { position: absolute; left: 3px; right: 3px; z-index: 1; padding: 4px 6px; border: 1px solid var(--ms-primary-300); border-radius: 6px; background: var(--ms-primary-100); overflow: hidden; font-size: 12px; } .crm-rcard__name { font-weight: 500; color: var(--ms-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-rcard__no { color: var(--ms-gray-600); font-size: 11px; } .crm-rcard__tags { gap: 4px; margin-top: 3px; } .crm-rcard__tags .ms-badge { height: 18px; padding: 0 6px; font-size: 10px; } .crm-nowline { position: absolute; left: 64px; right: 0; z-index: 2; height: 1px; background: var(--ms-red); pointer-events: none; } .crm-nowline::before { content: ""; position: absolute; left: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ms-red); } /* ── 내원 현황 칸반 ── */ .crm-kanban { display: flex; flex: 1; gap: 8px; min-height: 0; padding: 12px; overflow-x: auto; } .crm-kcol { display: flex; flex: none; flex-direction: column; width: 240px; border-radius: 8px; background: var(--ms-gray-200); } .crm-kcol__head { display: flex; flex: none; align-items: center; gap: 6px; padding: 8px 8px 8px 10px; } .crm-kcol__head .crm-iconbtn { width: 24px; height: 24px; font-size: 13px; } .crm-kcol__body { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; padding: 0 8px 8px; overflow-y: auto; } .crm-vcard { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--ms-gray-200); border-radius: 8px; background: var(--ms-white); } .crm-vcard__head { display: flex; align-items: baseline; gap: 6px; } .crm-vcard__meta { flex-wrap: wrap; gap: 4px; } .crm-vcard__meta .ms-badge { height: 20px; padding: 0 6px; font-size: 10px; } .crm-vcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; } /* ── 시술 현황 ── */ .crm-proc { display: flex; flex: 1; gap: 12px; min-height: 0; padding: 12px; } .crm-proc__lists { display: flex; flex: none; flex-direction: column; gap: 10px; width: 240px; min-height: 0; overflow-y: auto; } .crm-plist { display: flex; flex-direction: column; border-radius: 8px; background: var(--ms-gray-200); } .crm-plist__body { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px; } .crm-plist__body:empty { display: none; } .crm-rooms { display: grid; flex: 1; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 160px; gap: 10px; min-height: 0; overflow-y: auto; align-content: start; } .crm-room { display: flex; flex-direction: column; padding: 0; } .crm-room__head { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--ms-gray-200); } .crm-room__icon { color: var(--ms-gray-500); font-size: 12px; } .crm-room__body { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 8px; } .crm-room.is-occupied { border-color: var(--ms-yellow); } /* ── 고객 목록 ── */ .crm-filter { display: flex; flex-direction: column; gap: 10px; } .crm-filter__title { margin: 0; } .crm-filter__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; } .crm-filter__row .ms-field { width: 150px; } .crm-filter__row .ms-label { font-size: 12px; } .crm-filter__row .ms-input { padding: 0 10px; } .crm-td-empty { white-space: normal; max-width: none; } .ms-table th, .ms-table td { font-size: 13px; } /* ── 토스트 ── */ .crm-toast { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; align-items: flex-start; gap: 10px; width: 300px; padding: 14px 12px 12px 14px; border-radius: 10px; background: var(--ms-gray-800); color: var(--ms-white); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); } .crm-toast .ms-t-caption { color: var(--ms-gray-400); } .crm-toast__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ms-primary); font-size: 12px; font-weight: 700; } .crm-toast__body { display: flex; flex: 1; flex-direction: column; gap: 4px; } .crm-toast__actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; } .crm-toast .ms-btn--text { color: var(--ms-gray-400); } .crm-toast .ms-modal__close { width: 24px; height: 24px; color: var(--ms-gray-500); font-size: 12px; } .crm-toast .ms-modal__close:hover { background: rgba(255, 255, 255, .1); } /* ── 로그인 ── */ .crm-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--ms-gray-100); } .crm-login__card { display: flex; flex-direction: column; gap: 16px; width: 360px; padding: 32px; } .crm-login__title { margin: 0; } /* ── 메뉴 화면 공통 (그리드형 · 목록형 · 폼형) ── */ .crm-page__head--col { flex-direction: column; align-items: stretch; gap: 8px; } .crm-page__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .crm-page__title { display: flex; align-items: center; gap: 10px; } .crm-title-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--ms-gray-700); } .crm-tabs--page { height: 36px; padding: 0; margin-bottom: -16px; border-bottom: 0; background: transparent; } .crm-grid-page { gap: 10px; } .crm-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crm-f { gap: 8px; padding: 0 10px; } .crm-f > input, .crm-f > select { font-size: 13px; } .crm-f > select { padding-right: 0; } .crm-f-date { width: 130px; } .crm-f-range { display: inline-flex; align-items: center; gap: 4px; } .crm-f-tilde { color: var(--ms-gray-600); } .crm-chips { display: inline-flex; gap: 4px; } .crm-chip-sm { height: 32px; padding: 0 10px; font-size: 13px; } .crm-radios { display: inline-flex; gap: 12px; font-size: 13px; } .crm-note { display: flex; align-items: center; gap: 4px; margin: 0; } .crm-note--foot { margin-top: 10px; } .crm-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .crm-summary--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crm-summary__item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; } .crm-summary__value { font-size: 20px; font-weight: 700; color: var(--ms-black); } .crm-status-chips { gap: 6px; } .crm-result-row { display: flex; align-items: center; gap: 6px; } .crm-datagrid { display: flex; min-height: 240px; border: 1px solid var(--ms-gray-200); border-radius: 12px; background: var(--ms-white); overflow: hidden; } .crm-datagrid__scroll { flex: 1; min-width: 0; overflow: auto; } .crm-datagrid__table th, .crm-datagrid__table td { white-space: nowrap; max-width: none; } .crm-datagrid__table th { background: var(--ms-gray-100); color: var(--ms-gray-700); } .crm-datagrid__table tfoot td { position: sticky; bottom: 0; background: var(--ms-gray-100); font-weight: 600; border-top: 1px solid var(--ms-gray-300); } .crm-datagrid__side { display: flex; flex: none; flex-direction: column; align-items: center; gap: 2px; width: 36px; padding-top: 6px; border-left: 1px solid var(--ms-gray-200); background: var(--ms-gray-100); font-size: 11px; color: var(--ms-gray-700); } .crm-empty--page { padding: 48px 0; } .crm-pager { text-align: right; } .crm-listcard { padding: 20px; } .crm-listtable .ms-table td { font-size: 13px; } .crm-col-drag { width: 28px; padding-right: 0 !important; } .crm-drag { color: var(--ms-gray-500); cursor: grab; } .crm-row-actions { white-space: nowrap; } .crm-row-actions .ms-btn { padding: 0 6px; color: var(--ms-primary-600); } .crm-row-actions .crm-danger { color: var(--ms-red); } .crm-td-wrap { white-space: normal !important; max-width: 360px !important; } .crm-right { display: flex; justify-content: flex-end; margin: 0 0 8px; } /* 토글 스위치 */ .crm-switch { position: relative; display: inline-block; width: 34px; height: 18px; border-radius: 999px; background: var(--ms-gray-400); vertical-align: middle; transition: background-color .15s; } .crm-switch__knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ms-white); transition: left .15s; } .crm-switch.is-on { background: var(--ms-primary); } .crm-switch.is-on .crm-switch__knob { left: 18px; } .crm-switch__label { margin-left: 6px; font-size: 12px; color: var(--ms-gray-700); vertical-align: middle; } /* 차트 카드 (대시보드) */ .crm-chart-card .ms-card__head { align-items: flex-start; } .crm-chart-card .ms-t-caption { margin: 2px 0 0; } .crm-chart { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; } .crm-chart svg { width: 100%; max-height: 220px; } .crm-chart--pie svg { width: 200px; } .crm-chart__legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ms-gray-700); } /* 랜딩 (만족도 조사) */ .crm-landing { align-items: center; gap: 32px; padding-top: 48px; } .crm-landing__hero { text-align: center; } .crm-landing__title { margin: 0 0 12px; font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--ms-black); } .crm-landing__actions { justify-content: center; margin-top: 16px; } .crm-landing__cards { display: grid; grid-template-columns: repeat(3, 260px); gap: 16px; } .crm-landing__card { display: flex; flex-direction: column; gap: 8px; } .crm-landing__card h3 { margin: 4px 0 0; } .crm-landing__card p { margin: 0; } .crm-landing__thumb { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 110px; padding: 0 20px; border-radius: 8px; } .crm-landing__thumbline { display: block; width: 40%; height: 8px; border-radius: 4px; } /* 운영 일정 · 달력 */ .crm-optable td { vertical-align: middle; } .crm-legend--row { flex-direction: row; gap: 14px; padding: 0; border: 0; } .crm-cal-nav { margin-bottom: 10px; } .crm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .crm-cal__head { padding: 6px; text-align: center; font-size: 12px; color: var(--ms-gray-700); background: var(--ms-gray-100); border-radius: 6px; } .crm-cal__day { display: flex; flex-direction: column; justify-content: space-between; height: 64px; padding: 6px 8px; border: 1px solid var(--ms-gray-200); border-radius: 6px; font-size: 12px; } .crm-cal__day.is-other { color: var(--ms-gray-500); background: var(--ms-gray-100); } .crm-cal__day.is-today { border-color: var(--ms-primary); } .crm-cal__mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: #52c41a; color: var(--ms-white); } /* 상품 · 2단 레이아웃 */ .crm-product, .crm-twopane { display: flex; gap: 16px; align-items: flex-start; } .crm-product__cats, .crm-twopane__side { display: flex; flex: none; flex-direction: column; gap: 2px; width: 220px; padding: 12px; } .crm-product__catshead { margin-bottom: 6px; } .crm-product__cat { height: 34px; padding: 0 12px; border: 0; background: none; font-size: 14px; text-align: left; cursor: pointer; } .crm-product__main, .crm-twopane__main { flex: 1; min-width: 0; } .crm-twopane__actions { margin-bottom: 8px; } .crm-anchors { display: flex; flex: none; flex-direction: column; gap: 2px; width: 180px; } .crm-anchors .ms-nav__item { height: 36px; font-size: 14px; } /* 폼 */ .crm-form { display: flex; flex-direction: column; gap: 16px; } .crm-form .ms-card { display: flex; flex-direction: column; gap: 16px; } .crm-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .crm-form__full { grid-column: 1 / -1; } .crm-form .ms-label { display: flex; align-items: center; gap: 6px; } .crm-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 140px; height: 100px; border: 1px dashed var(--ms-gray-400); border-radius: 8px; background: var(--ms-gray-100); color: var(--ms-gray-700); font-size: 12px; } .ms-modal--wide { width: 760px; } .ms-modal--wide .ms-modal__body { max-height: 70vh; overflow-y: auto; } .ms-checkbox:checked:disabled { background-color: var(--ms-primary); opacity: .55; cursor: not-allowed; } .crm-select { width: 420px; } .crm-select__list { display: flex; flex-direction: column; gap: 8px; } .crm-select__item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--ms-gray-300); border-radius: 8px; color: inherit; text-decoration: none; } .crm-select__item:hover { border-color: var(--ms-primary); background: var(--ms-primary-100); } /* 사이드바 병원 전환 드롭다운 */ .crm-tenant-wrap { position: relative; min-width: 0; } .crm-tenant-menu { position: absolute; left: 0; top: 100%; z-index: 20; display: none; min-width: 200px; margin: 4px 0 0; padding: 6px; border: 1px solid var(--ms-gray-200); border-radius: 8px; background: var(--ms-white); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); } .crm-tenant-wrap[open] .crm-tenant-menu { display: block; } .crm-tenant-wrap > summary { list-style: none; } .crm-tenant-wrap > summary::-webkit-details-marker { display: none; } .crm-tenant-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; color: inherit; font-size: 13px; text-decoration: none; } .crm-tenant-menu a:hover { background: var(--ms-gray-100); } .crm-tenant-menu a[aria-current="page"] { color: var(--ms-primary); } .crm-perm-indent { margin-left: 4px; color: var(--ms-gray-500); } .crm-select__item.is-disabled { color: var(--ms-gray-600); background: var(--ms-gray-100); cursor: not-allowed; } .crm-select__list { max-height: 60vh; overflow-y: auto; } /* ── admin: 소속 병원 칩 ── */ .crm-pills { display: flex; flex-wrap: wrap; gap: 6px; } .crm-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--ms-gray-300); border-radius: 999px; background: var(--ms-white); color: var(--ms-gray-800); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .15s, background-color .15s; } .crm-pill .ms-icon { width: 14px; height: 14px; color: var(--ms-gray-600); } a.crm-pill:hover { border-color: var(--ms-primary-500); background: var(--ms-primary-100); } a.crm-pill:hover .ms-icon { color: var(--ms-primary); } .crm-pill__name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .crm-pill__role { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--ms-gray-200); color: var(--ms-gray-700); font-size: 11px; } .crm-pill--admin .crm-pill__role { background: var(--ms-purple-100); color: var(--ms-purple); } .crm-pill--system { border-color: var(--ms-red-500); padding-left: 10px; } .crm-pill--system .ms-icon { color: var(--ms-red); } .crm-pill--system .crm-pill__role { background: var(--ms-red-100); color: var(--ms-red); } .crm-pill--empty { padding: 0 10px; border-style: dashed; color: var(--ms-gray-600); } /* ── admin: 병원 코드 칩 ── */ .crm-code { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 2px 0 10px; border-radius: 6px; background: var(--ms-gray-200); } .crm-code__text { margin-right: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ms-gray-800); } .crm-code__btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 4px; background: none; color: var(--ms-gray-600); } .crm-code__btn .ms-icon { width: 14px; height: 14px; } .crm-code__btn:hover { background: var(--ms-white); color: var(--ms-primary); } .crm-code__btn.is-copied { color: var(--ms-primary); } .crm-code__btn.is-copied::after { content: "복사됨"; position: absolute; transform: translateY(-22px); padding: 2px 6px; border-radius: 4px; background: var(--ms-gray-800); color: var(--ms-white); font-size: 11px; } /* ── admin: 계정 사용량 칩 ── */ .crm-usage { display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 6px 0 10px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); color: var(--ms-gray-800); text-decoration: none; transition: border-color .15s, background-color .15s; } .crm-usage:hover { border-color: var(--ms-primary-500); background: var(--ms-primary-100); } .crm-usage__nums { display: inline-flex; align-items: baseline; gap: 3px; font-size: 12px; } .crm-usage__nums strong { font-size: 13px; } .crm-usage__nums span { color: var(--ms-gray-600); } .crm-usage__bar { position: relative; width: 56px; height: 6px; border-radius: 3px; background: var(--ms-gray-200); overflow: hidden; } .crm-usage__bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ms-primary); } .crm-usage.is-warn .crm-usage__bar > span { background: var(--ms-yellow); } .crm-usage.is-full .crm-usage__bar > span { background: var(--ms-red); } .crm-usage.is-full .crm-usage__nums strong { color: var(--ms-red); } .crm-usage__chev { width: 14px; height: 14px; color: var(--ms-gray-500); } /* ── admin: 병원 계정 페이지 ── */ .crm-back { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; height: 26px; padding: 0 10px 0 4px; border-radius: 999px; color: var(--ms-gray-700); font-size: 12px; text-decoration: none; } .crm-back .ms-icon { width: 16px; height: 16px; } .crm-back:hover { background: var(--ms-gray-200); color: var(--ms-gray-800); } .crm-headrow { display: flex; align-items: center; gap: 8px; } .crm-headrow--meta { flex-wrap: wrap; gap: 16px; margin-top: 4px; } .crm-meta { display: inline-flex; align-items: center; gap: 8px; } .crm-meta__label { font-size: 12px; color: var(--ms-gray-600); } .crm-usage--static { cursor: default; } .crm-usage--static:hover { border-color: var(--ms-gray-300); background: var(--ms-white); } .crm-roleseg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--ms-gray-200); } .crm-roleseg__opt { position: relative; cursor: pointer; } .crm-roleseg__opt input { position: absolute; opacity: 0; pointer-events: none; } .crm-roleseg__opt span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; color: var(--ms-gray-700); font-size: 12px; font-weight: 500; transition: background-color .15s, color .15s; } .crm-roleseg__opt:hover span { color: var(--ms-gray-800); } .crm-roleseg__opt input:checked + span { background: var(--ms-white); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); color: var(--ms-gray-800); } .crm-roleseg__opt--hospital_admin input:checked + span { color: var(--ms-purple); } .crm-roleseg__opt input:focus-visible + span { outline: 2px solid var(--ms-primary); outline-offset: 1px; } .crm-roleseg.is-locked { opacity: .6; } .crm-roleseg.is-locked .crm-roleseg__opt { cursor: not-allowed; } /* ── 로그인: 개발용 계정 선택 ── */ .crm-fab { position: fixed; left: 20px; bottom: 20px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--ms-gray-800); color: var(--ms-white); font-size: 14px; font-weight: 500; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); transition: transform .15s, background-color .15s; } .crm-fab:hover { background: var(--ms-black); transform: translateY(-1px); } .crm-fab .ms-icon { width: 18px; height: 18px; } .crm-quick { width: 600px; } .crm-quick .ms-modal__body { max-height: 70vh; } .crm-quick__list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; } .crm-quick__list form { margin: 0; } .crm-quick__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--ms-gray-200); border-radius: 10px; background: var(--ms-white); text-align: left; transition: border-color .15s, background-color .15s; } .crm-quick__item:hover { border-color: var(--ms-primary-500); background: var(--ms-primary-100); } .crm-quick__item .crm-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; font-size: 13px; } .crm-avatar--system { background: var(--ms-red); } .crm-quick__info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; } .crm-quick__name { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ms-black); } .crm-quick__name .ms-muted { font-size: 12px; font-weight: 400; } .crm-quick__go { width: 16px; height: 16px; color: var(--ms-gray-500); } .crm-quick__item:hover .crm-quick__go { color: var(--ms-primary); } /* ── 사이드바 사용자 메뉴 ── */ .crm-profile { position: relative; } .crm-user { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 8px; background: none; text-align: left; } .crm-user:hover, .crm-user[aria-expanded="true"] { background: var(--ms-gray-100); } .crm-user__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .crm-pmenu { position: absolute; left: calc(100% + 8px); bottom: 0; z-index: 50; display: flex; flex-direction: column; width: 224px; padding: 4px; border-radius: 12px; background: var(--ms-white); box-shadow: 0 0 0 1px var(--ms-gray-200), 0 2px 8px rgba(0, 0, 0, .08), 0 8px 16px rgba(0, 0, 0, .08); } .crm-pmenu[hidden] { display: none; } .crm-pmenu form { margin: 0; } .crm-pmenu__item { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 34px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--ms-gray-800); font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; } .crm-pmenu__item:hover, .crm-pmenu__item:focus-visible { background: var(--ms-gray-100); outline: 0; } .crm-pmenu__item .ms-icon { width: 14px; height: 14px; color: var(--ms-gray-600); } .crm-pmenu__sep { height: 1px; margin: 4px 0; background: var(--ms-gray-200); } .crm-pmenu__sub { position: relative; } .crm-pmenu--flyout { display: none; top: -4px; bottom: auto; left: calc(100% + 4px); width: 200px; } .crm-pmenu__sub:hover > .crm-pmenu--flyout, .crm-pmenu__sub:focus-within > .crm-pmenu--flyout { display: flex; } .crm-pmenu__empty { padding: 16px 8px; color: var(--ms-gray-600); font-size: 13px; text-align: center; } .crm-profile-modal { width: 496px; } .crm-profile-modal .ms-modal__body { max-height: 72vh; overflow-y: auto; } .crm-avatar--lg { width: 48px; height: 48px; border-radius: 50%; font-size: 18px; } .crm-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ms-gray-200); } /* ── 섹션 메뉴 고정, 오른쪽만 스크롤 (병원 기본 정보 · 계정 환경 설정) ── */ .crm-body--pinned { overflow: hidden; } .crm-twopane--pinned { flex: 1; min-height: 0; align-items: stretch; } .crm-twopane--pinned .crm-anchors { align-self: flex-start; } .crm-scrollpane { position: relative; min-height: 0; overflow-y: auto; scroll-behavior: smooth; padding-right: 4px; padding-bottom: 40vh; } .crm-field-error { font-size: 12px; color: var(--ms-red); } .crm-upload:disabled { cursor: not-allowed; opacity: .6; } /* ── 사이드바 하단 바로가기 (레일 + 2단계 메뉴 전체 폭) ── */ .crm-side__shortcuts { display: flex; flex: none; flex-direction: column; gap: 2px; padding: 6px 8px; border-top: 1px solid var(--ms-gray-200); } .crm-shortcut { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--ms-gray-700); font-size: 13px; text-decoration: none; } .crm-shortcut:hover { background: var(--ms-gray-100); color: var(--ms-gray-800); } .crm-shortcut .ms-icon { width: 15px; height: 15px; color: var(--ms-gray-600); } /* ── 공지 등록 ── */ .crm-notice__foot { display: flex; align-items: center; gap: 6px; } .crm-notice__form { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; } .crm-notice__input { min-height: 90px; resize: vertical; font-size: 13px; line-height: 1.6; } .crm-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .crm-notice__actions .ms-btn { flex: none; white-space: nowrap; } .crm-notice__body { min-height: 0; overflow-y: auto; align-items: stretch; justify-content: flex-start; flex-direction: column; gap: 8px; } .crm-notice__body > .crm-empty { margin: auto; } .crm-notice__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .crm-notice__item { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 8px 10px; border: 1px solid var(--ms-gray-200); border-radius: 8px; background: var(--ms-gray-100); text-align: left; } .crm-notice__item.is-editable { cursor: pointer; transition: border-color .15s, background-color .15s; } .crm-notice__item.is-editable:hover { border-color: var(--ms-primary-500); background: var(--ms-primary-100); } .crm-notice__item .crm-notice__text { margin: 0; font-size: 13px; color: var(--ms-gray-800); white-space: pre-wrap; overflow-wrap: anywhere; } /* 말줄임 없이 전체 (길면 공지 칸이 스크롤) */ .crm-notice__del { align-self: flex-end; margin-top: 2px; } .crm-notice__list > li { display: flex; flex-direction: column; } .crm-notice__copy { align-self: flex-end; margin-top: 2px; } .crm-notice__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-notice__saved { font-size: 12px; color: var(--ms-primary-600); } /* ── admin: 공지사항 ── */ .crm-notice-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .crm-datebar { display: inline-flex; align-items: center; gap: 4px; } .crm-datebar .crm-iconbtn { text-decoration: none; } .crm-datebar .ms-chip { text-decoration: none; } .crm-notice-summary { margin-bottom: 8px; } .crm-notice-table__text { max-width: 420px !important; white-space: pre-wrap !important; word-break: break-word; } .crm-group-row td { background: var(--ms-gray-100); font-weight: 600; color: var(--ms-gray-800); } /* ── 사이드바 접기: 2단계 메뉴 숨김, 아이콘 레일 폭만 남김 ── */ .crm-side { transition: width .18s ease; } .crm-side.is-collapsed { width: 56px; } .crm-side.is-collapsed .crm-side__head { justify-content: center; padding: 0; } .crm-side.is-collapsed .crm-tenant-wrap, .crm-side.is-collapsed .crm-submenu, .crm-side.is-collapsed .crm-side__label { display: none; } .crm-side.is-collapsed .crm-side__fold svg { transform: scaleX(-1); } .crm-side.is-collapsed .crm-rail { border-right: 0; } .crm-side.is-collapsed .crm-side__shortcuts { align-items: center; padding: 6px 0; } .crm-side.is-collapsed .crm-shortcut { justify-content: center; width: 40px; padding: 0; } .crm-side.is-collapsed .crm-side__foot { align-items: center; padding: 10px 0 12px; } .crm-side.is-collapsed .crm-user { justify-content: center; width: 40px; padding: 4px; } .crm-side.is-collapsed .crm-side__links { flex-direction: column; align-items: center; gap: 10px; } .crm-side.is-collapsed .crm-side__links a { justify-content: center; } .crm-side.is-collapsed .crm-side__links .ms-icon { width: 15px !important; height: 15px !important; } /* 공지 머리: 폭이 모자라면 날짜를 제목 아래 줄로 내려 전부 보이게 한다 */ .crm-notice__head { flex-wrap: wrap; row-gap: 4px; } .crm-notice__head > .ms-t-heading-sm { flex: 0 1 auto; } .crm-notice__head .crm-datenav { flex: 0 0 auto; margin-left: auto; } .crm-panel .crm-notice__head .crm-datenav { flex: 1 0 100%; justify-content: space-between; margin-left: 0; } /* ── 상단 공지사항 버튼: 왼쪽 공지·범례 패널 보이기/숨기기 ── */ .crm-panel[hidden] { display: none; } .crm-panel-toggle.is-on { background: var(--ms-gray-200); color: var(--ms-gray-800); } /* ── admin: 권한 묶음 ── */ .crm-perm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .crm-perm-tabs { height: 36px; padding: 0; border-bottom: 0; background: transparent; } .crm-perm-tabs .crm-tab { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .crm-perm-desc { margin: 2px 0 0; } .crm-perm-table th:first-child, .crm-perm-table td:first-child { width: 40%; } .crm-perm-group { scroll-margin-top: 12px; } .crm-perm-indent--2 { margin-left: 22px; } .crm-perm-saved { margin-bottom: 12px; } /* ── 저장 완료 모달 ── */ .crm-saved-modal { width: 380px; } .crm-saved-modal__body { align-items: center; gap: 12px; padding-top: 8px; text-align: center; } .crm-saved-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ms-primary-100); color: var(--ms-primary); font-size: 22px; font-weight: 700; } .crm-saved-modal__msg { margin: 0; font-size: 15px; font-weight: 500; color: var(--ms-gray-800); white-space: pre-wrap; } /* ── 계정 등록: 기존 사용자 목록 ── */ .crm-member-modal { width: 600px; } .crm-member-modal .ms-modal__body { max-height: 72vh; overflow-y: auto; } .crm-member-section { display: flex; flex-direction: column; gap: 12px; } .crm-member-section[hidden] { display: none; } .crm-candidates { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; } .crm-candidate { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--ms-gray-200); border-radius: 10px; cursor: pointer; } .crm-candidate:hover { border-color: var(--ms-primary-500); background: var(--ms-primary-100); } .crm-candidate:has(input:checked) { border-color: var(--ms-primary); background: var(--ms-primary-100); } .crm-candidate .crm-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; } .crm-candidate__info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; } .crm-candidate__name { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ms-black); } .crm-candidate__name .ms-muted { font-size: 12px; font-weight: 400; } /* 구역 탭 (링크) */ a.crm-tab { display: inline-flex; align-items: center; text-decoration: none; } .crm-tabs__empty { display: inline-flex; align-items: center; gap: 4px; color: var(--ms-gray-600); } /* 고객 수가 유형 · 타겟 국가 연결 */ .crm-card-sub { margin-top: 2px; color: var(--ms-gray-600); } .crm-modal-sm { width: 520px; } .crm-modal-foot--end { justify-content: flex-end; } .crm-country-card { max-width: 720px; margin: 0 auto; } .crm-country-guide { margin: 0 0 12px; padding-left: 18px; color: var(--ms-gray-700); list-style: disc; } .crm-fee-select { width: 160px; } .crm-help { display: inline-flex; vertical-align: middle; color: var(--ms-gray-500); cursor: help; } .crm-country-body { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; } .crm-country-head { margin: 4px 0; font-size: 12px; color: var(--ms-gray-600); } .crm-country-sep { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid var(--ms-gray-200); } .crm-country-list { display: flex; flex-direction: column; } .crm-country-list--rest { flex: 1; min-height: 160px; overflow-y: auto; } .crm-country-item { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 4px 8px; border-radius: 6px; font-size: 14px; } .crm-country-item:hover { background: var(--ms-gray-100); } .crm-country-item .ms-btn { visibility: hidden; } .crm-country-item:hover .ms-btn, .crm-country-item:focus-within .ms-btn { visibility: visible; } /* 직무 권한 */ .crm-col-edit { width: 180px; } .crm-tag { margin: 2px 4px 2px 0; } .crm-tagpick { margin: 0; padding: 0; border: 0; } .crm-tagpick__list { display: flex; flex-wrap: wrap; gap: 6px; } .crm-tagpick__opt input { position: absolute; opacity: 0; pointer-events: none; } .crm-tagpick__opt span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--ms-gray-300); border-radius: 999px; font-size: 13px; color: var(--ms-gray-700); cursor: pointer; } .crm-tagpick__opt input:checked + span { border-color: var(--ms-primary-500); background: var(--ms-primary-100); color: var(--ms-primary); } .crm-tagpick__opt input:focus-visible + span { outline: 2px solid var(--ms-primary-500); outline-offset: 2px; } .crm-modal__head--danger { background: var(--ms-red-100); } .crm-modal__head--danger .ms-modal__title { color: var(--ms-text); } .crm-modal__head--danger span { color: var(--ms-red); } /* IP 제어 */ .crm-ip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; } .crm-ip-warn { margin-bottom: 12px; } .crm-sub { color: var(--ms-gray-600); } .crm-req { color: var(--ms-red); } .crm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .crm-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } /* 마약류 연동 */ .crm-drug { padding: 24px; } .crm-drug__fields { display: flex; flex-direction: column; gap: 14px; } .crm-drug__row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: start; } .crm-drug__label { padding-top: 9px; font-size: 13px; color: var(--ms-gray-700); } .crm-drug__label .crm-req { margin-right: 2px; } .crm-drug__ctl { min-width: 0; } .crm-drug__ctl .ms-input, .crm-drug__ctl .crm-textarea { width: 100%; } .crm-drug__key { gap: 8px; } .crm-drug__save { width: 100%; margin-top: 20px; } .ms-input.is-warn { border-color: var(--ms-yellow); } .ms-input.is-error { border-color: var(--ms-red); } .crm-hint--error { color: var(--ms-red); } @media (max-width: 640px) { .crm-drug__row { grid-template-columns: 1fr; gap: 4px; } .crm-drug__label { padding-top: 0; } } /* 병원 기본 정보 (원본: 한 줄에 한 칸, 섹션 제목만) */ .crm-hi-sec { display: flex; flex-direction: column; gap: 16px; max-width: 560px; padding: 4px 0 32px; } .crm-hi-sec__title { margin: 0; font-size: 16px; font-weight: 600; } .crm-hi-sec .ms-field { display: flex; flex-direction: column; gap: 6px; } .crm-hi-sec .ms-input input:disabled, .crm-hi-sec .ms-input select:disabled { color: var(--ms-gray-600); } .crm-tr { display: flex; flex-direction: column; gap: 6px; } .crm-tr__toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--ms-primary-100); color: var(--ms-primary); font-size: 12px; cursor: pointer; } .crm-tr__toggle[aria-expanded="true"] { background: var(--ms-gray-200); color: var(--ms-text); } .crm-tr__toggle[aria-expanded="true"] .crm-tr__caret { transform: rotate(90deg); } .crm-tr__caret { display: inline-block; transition: transform .15s; } .crm-tr__count { padding: 0 6px; border-radius: 999px; background: #fff; font-size: 11px; } .crm-tr__body { display: flex; flex-direction: column; gap: 8px; margin-left: 12px; padding-left: 12px; border-left: 2px solid var(--ms-gray-200); } .crm-tr__row { display: flex; flex-direction: column; gap: 4px; } .crm-tr__lang { font-size: 12px; color: var(--ms-gray-700); } .crm-tr__line { display: flex; align-items: center; gap: 6px; } .crm-tr__line .ms-input { flex: 1; } .crm-tr__add { position: relative; } .crm-tr__menu { top: 100%; bottom: auto; left: 0; max-height: 260px; overflow-y: auto; } .crm-imgrow { display: flex; gap: 16px; flex-wrap: wrap; } .crm-imgfield { display: flex; flex-direction: column; gap: 6px; } .crm-imgtile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 120px; height: 120px; border: 1px dashed var(--ms-gray-400); border-radius: 8px; background: var(--ms-gray-100); color: var(--ms-gray-600); font-size: 12px; cursor: pointer; overflow: hidden; } .crm-imgtile:hover { border-color: var(--ms-primary); color: var(--ms-primary); } .crm-imgtile:focus-within { outline: 2px solid var(--ms-primary-500); outline-offset: 2px; } .crm-imgtile__plus { font-size: 28px; line-height: 1; } .crm-imgtile.has-img { border-style: solid; background: #fff; cursor: default; } .crm-imgtile.has-img img { width: 100%; height: 100%; object-fit: contain; } .crm-imgtile.is-empty { cursor: default; } .crm-imgtile__del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; cursor: pointer; } .crm-modal__head--warn { background: var(--ms-yellow-100); } .crm-modal__head--warn span { color: var(--ms-yellow); } .crm-tagpick__new { display: flex; gap: 6px; margin-top: 10px; } .crm-tagpick__new .ms-input { flex: 1; } .crm-stack { display: flex; flex-direction: column; gap: 16px; } .crm-colorpick input { position: absolute; opacity: 0; pointer-events: none; } .crm-colorpick span { cursor: pointer; outline-offset: 2px; } .crm-colorpick input:checked + span { outline: 2px solid var(--ms-primary); } .crm-colorpick input:focus-visible + span { outline: 2px dashed var(--ms-primary); } /* 관리 > 상품 */ .crm-product__cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .crm-product__n { font-size: 12px; color: var(--ms-gray-500); } .crm-row-link { cursor: pointer; } .crm-row-link:hover td { background: var(--ms-gray-100); } .crm-row-link:focus-visible { outline: 2px solid var(--ms-primary-500); outline-offset: -2px; } .crm-row-link__title { margin-right: 4px; } .crm-modal-lg { width: 880px; } .crm-pdetail { display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow-y: auto; } .crm-dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; } .crm-dl dt { color: var(--ms-gray-600); } .crm-dl dd { margin: 0; } .crm-pre { white-space: pre-wrap; } .crm-product__main .ms-table-wrap { overflow-x: auto; } .crm-product__main .ms-table { min-width: 1040px; } .crm-product__main .ms-table td { vertical-align: top; } .crm-product__main .ms-table td:nth-child(1) { min-width: 220px; } .crm-product__main .ms-table td:nth-child(2), .crm-product__main .ms-table td:nth-child(3) { white-space: nowrap; } .crm-product__main .ms-table td:nth-child(4) { min-width: 240px; } /* 사이드바 하위 묶음 (관리 > 진료항목) */ .crm-submenu__nest { justify-content: space-between; } .crm-submenu__caret { font-size: 10px; color: var(--ms-gray-500); transform: rotate(-90deg); transition: transform .15s; } .crm-submenu__nest.is-open .crm-submenu__caret { transform: none; } .crm-submenu__item--child { padding-left: 28px; font-size: 13px; } .crm-scrolltable { max-height: calc(100vh - 220px); overflow: auto; } .crm-scrolltable thead th { position: sticky; top: 0; z-index: 1; } /* 사이드바 메뉴 배지 (NEW) */ .crm-submenu__label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .crm-menu-badge { display: inline-flex; align-items: center; height: 16px; padding: 2px 6px; border-radius: 999px; background: var(--ms-primary-100); color: var(--ms-primary); font-size: 10px; font-weight: 500; line-height: 12px; } /* 상품: 원본처럼 오른쪽 위 검색 + 카테고리 드롭다운 */ .crm-product__filters { gap: 8px; } .crm-product__search { width: 280px; padding-right: 4px; } .crm-product__search .crm-iconbtn { flex: none; } .crm-product__catsel { width: 220px; } .crm-product__result { justify-content: space-between; margin-bottom: 8px; } @media (max-width: 720px) { .crm-product__filters { flex-wrap: wrap; } .crm-product__search, .crm-product__catsel { width: 100%; } } /* 상품 등록 (원본: 목록으로 돌아가기 + 상품 기본 정보 카드) */ .crm-pcreate { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; } .crm-pcreate__card { padding: 24px; } .crm-pcreate__fields { display: flex; flex-direction: column; gap: 20px; } .crm-pcreate .ms-field { display: flex; flex-direction: column; gap: 6px; } .crm-pcreate__period { gap: 8px; } .crm-pcreate__opt { align-self: flex-start; } .crm-col-move { width: 72px; } .crm-pcreate .crm-right { align-self: flex-end; } /* 상품 목록: 상품명(상세 보기) · 행 메뉴(수정하기/삭제하기) */ .crm-linkcell { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .crm-linkcell:hover { color: var(--ms-primary); text-decoration: underline; } .crm-col-menu { width: 44px; overflow: visible !important; } .crm-rowmenu { position: relative; } .crm-rowmenu__menu { left: auto; right: 0; top: 100%; bottom: auto; width: 140px; } .crm-pcreate__sep { margin: 0 4px; color: var(--ms-gray-400); } .crm-pcreate__name { font-weight: 400; } .crm-pcreate__options { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; } .crm-pmenu__item.crm-danger { color: var(--ms-red); } .ms-modal .crm-tr__menu { max-height: 200px; } .crm-tr__line textarea { flex: 1; } .crm-tr__img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ms-gray-200); } /* 상품 이미지 */ .crm-pimg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .crm-pimg__preview { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ms-gray-200); } .crm-pimg__del { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ms-gray-700); } .crm-pimg__pick { display: inline-flex; flex-direction: column; gap: 6px; font-size: 12px; } .crm-pimg__file { font-size: 12px; } .crm-tr__line input[type=file] { flex: 1; font-size: 12px; } /* 선불카드 */ .crm-switchbtn { padding: 0; border: 0; background: none; cursor: pointer; } .crm-switchbtn:focus-visible { outline: 2px solid var(--ms-primary-500); outline-offset: 2px; border-radius: 999px; } .crm-prepaid-body { display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow-y: auto; } .crm-prepaid-body .ms-field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; } .crm-unit { flex: none; color: var(--ms-gray-600); font-size: 13px; } .crm-radio { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; } .crm-inline-input { width: 160px; margin-left: 6px; } .crm-tab__n { margin-left: 4px; font-size: 11px; color: var(--ms-gray-500); } .crm-warn-text { color: var(--ms-yellow); } .crm-help-text { border-bottom: 1px dashed var(--ms-gray-400); cursor: help; } /* 자동 메시지 규칙 */ .crm-rule-timing { flex-wrap: wrap; gap: 8px; font-size: 14px; } .crm-rule-step { gap: 8px; } .crm-rule-step .ms-input { flex: 1; } .crm-rule-step__n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ms-gray-200); font-size: 12px; } /* 펜차트 템플릿 */ .crm-col-check { width: 36px; } .crm-chart-preview { max-height: 75vh; overflow: auto; text-align: center; } .crm-chart-preview img { max-width: 100%; height: auto; border: 1px solid var(--ms-gray-200); } .crm-del-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ms-gray-700); } /* 처방 템플릿 */ .crm-rx-list { display: flex; flex-direction: column; border-top: 1px solid var(--ms-gray-200); } .crm-rx { border-bottom: 1px solid var(--ms-gray-200); } .crm-rx__head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px; cursor: pointer; list-style: none; } .crm-rx__head::-webkit-details-marker { display: none; } .crm-rx__head:hover { background: var(--ms-gray-100); } .crm-rx__caret { font-size: 11px; color: var(--ms-gray-500); transition: transform .15s; } .crm-rx[open] .crm-rx__caret { transform: rotate(90deg); } .crm-rx__name { font-size: 14px; font-weight: 500; } .crm-rx__table { margin: 0 0 12px; } .crm-rx__head .crm-row-actions { display: inline-flex; gap: 2px; } .crm-modal-xl { width: 1100px; } .crm-rxrows { display: flex; flex-direction: column; gap: 6px; } .crm-rxrow { display: grid; grid-template-columns: minmax(200px, 3fr) 110px 90px 64px 74px 60px 64px 56px minmax(80px, 1fr) 28px; gap: 6px; align-items: center; } .crm-rxrow .ms-input { height: 36px; padding: 0 8px; } .crm-rxrow .ms-input input, .crm-rxrow .ms-input select { min-width: 0; width: 100%; font-size: 13px; } .crm-rxrow--head { font-size: 11px; color: var(--ms-gray-600); } .crm-rxadd { align-self: flex-start; margin-top: 6px; } @media (max-width: 900px) { .crm-rxrow { grid-template-columns: 1fr 1fr 1fr; } .crm-rxrow--head { display: none; } } .crm-invrow { display: grid; grid-template-columns: minmax(0, 1fr) 180px 44px; gap: 8px; align-items: center; } .crm-invrow--head { padding: 8px 0; border-bottom: 1px solid var(--ms-gray-200); font-size: 12px; font-weight: 500; color: var(--ms-gray-700); } .crm-invrow .ms-input { height: 36px; } .crm-invrow .ms-input input, .crm-invrow .ms-input select { min-width: 0; width: 100%; } .crm-copybtn.is-copied::after { content: " ✓"; } .crm-modal-md { width: 640px; } .crm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .crm-cell-link { cursor: pointer; } tr:hover > .crm-cell-link { color: var(--ms-primary); } .crm-inline-select { width: 150px; border-color: transparent; background: transparent; } .crm-inline-select:hover, .crm-inline-select:focus-within { border-color: var(--ms-gray-300); } .crm-member-photo { display: flex; align-items: center; gap: 12px; } .crm-member-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ms-gray-200); } .crm-op-range { display: inline-flex; align-items: center; gap: 8px; width: 100%; } .crm-op-range .ms-input { flex: 1; min-width: 110px; } .crm-op-tilde { color: var(--ms-gray-500); } .crm-op-day { width: 60px; text-align: center; font-weight: 400; } .crm-col-check { width: 48px; text-align: center; } .crm-op-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; } .crm-opcal { width: 100%; border-collapse: collapse; table-layout: fixed; } .crm-opcal th { padding: 8px 0; font-size: 12px; font-weight: 500; color: var(--ms-gray-700); text-align: center; } .crm-opcal td { height: 40px; text-align: center; vertical-align: middle; border-top: 1px solid var(--ms-gray-100); } .crm-opcal td.is-other, .crm-opcal td.is-past { background: var(--ms-gray-50, #fafafa); } .crm-opcal__num { font-size: 12px; color: var(--ms-gray-400, #bfbfbf); } .crm-opcal__day { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 4px; border: 0; border-radius: 4px; background: var(--c); color: #fff; font-size: 12px; } button.crm-opcal__day { cursor: pointer; } button.crm-opcal__day:hover { filter: brightness(0.92); } .crm-opcal__day.is-today { box-shadow: 0 0 0 2px var(--ms-white), 0 0 0 3px var(--ms-primary); } .crm-op-dl { display: grid; grid-template-columns: 80px 1fr; gap: 8px; margin: 0; font-size: 14px; } .crm-op-dl dt { color: var(--ms-gray-700); } .crm-op-dl dd { margin: 0; } .crm-rg-name { display: inline-flex; align-items: center; gap: 8px; } .crm-link-plain { color: inherit; text-decoration: none; } .crm-link-plain:hover { color: var(--ms-primary); text-decoration: underline; } .crm-rg-basic { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; } .crm-rg-basic__main { display: flex; flex-direction: column; gap: 16px; } .crm-rg-caps td { vertical-align: middle; } .crm-rg-buffer { margin-top: 8px; gap: 8px; } .crm-rg-counts { gap: 6px; margin-bottom: 8px; } .crm-opcal__note { font-size: 10px; color: var(--ms-gray-600); } .crm-rg-prodlist { max-height: 55vh; overflow: auto; border: 1px solid var(--ms-gray-200); border-radius: 8px; } .crm-rg-prod { border-bottom: 1px solid var(--ms-gray-100); } .crm-rg-prod > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; } .crm-rg-prod__name { flex: 1; } .crm-rg-opts { margin: 0; padding: 0 12px 10px 44px; list-style: none; display: grid; gap: 6px; font-size: 13px; } @media (max-width: 900px) { .crm-rg-basic { grid-template-columns: 1fr; } } .crm-switch-input { display: inline-flex; cursor: pointer; } .crm-switch-input input { position: absolute; opacity: 0; width: 1px; height: 1px; } .crm-switch-input input:checked + .crm-switch { background: var(--ms-primary); } .crm-switch-input input:checked + .crm-switch .crm-switch__knob { left: 18px; } .crm-switch-input input:focus-visible + .crm-switch { outline: 2px solid var(--ms-primary); outline-offset: 2px; } .crm-rg-buffer[hidden], [data-rg-times][hidden] { display: none; } .crm-rr { display: flex; flex-direction: column; gap: 12px; } .crm-rr__cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; } .crm-rr__preview { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; } .crm-rr-node { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--ms-gray-200); border-radius: 10px; background: var(--ms-white); } .crm-rr-node--set > .crm-rr-node__body > .crm-rr-children { display: flex; flex-direction: column; gap: 10px; padding-left: 16px; border-left: 2px solid var(--ms-gray-100); } .crm-rr-node--rule { background: var(--ms-gray-50, #fafafa); } .crm-rr-node.is-error { border-color: var(--ms-red); } .crm-rr-node.is-focus { box-shadow: 0 0 0 2px var(--ms-primary-100); } .crm-rr-node__head { display: flex; align-items: center; gap: 8px; } .crm-rr-node__body { display: flex; flex-direction: column; gap: 10px; } .crm-rr-title { flex: 1; } .crm-rr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .crm-rr-field { display: flex; flex-direction: column; gap: 4px; } .crm-rr-label { font-size: 12px; color: var(--ms-gray-700); } .crm-rr-desc { margin: 0; } .crm-rr-conds { display: flex; flex-direction: column; gap: 6px; } .crm-rr-cond { display: grid; grid-template-columns: 120px minmax(0, 1fr) 28px; gap: 8px; align-items: center; } .crm-rr-cond[hidden] { display: none; } .crm-rr-cond__name { font-size: 13px; } .crm-rr-addcond { width: 180px; } .crm-rr-add { gap: 4px; } .crm-rr-empty { margin: 0; } .crm-ms { position: relative; } .crm-ms > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px; } .crm-ms > summary::-webkit-details-marker { display: none; } .crm-ms__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .crm-ms__panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--ms-gray-200); border-radius: 8px; background: var(--ms-white); box-shadow: 0 6px 20px rgb(0 0 0 / 12%); } .crm-ms__list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; } .crm-ms__opt { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; cursor: pointer; } .crm-ms__opt:hover { background: var(--ms-gray-100); } .crm-rr-pv-conds { display: flex; flex-direction: column; gap: 6px; } .crm-rr-pv-conds .crm-rr-cond { grid-template-columns: 90px minmax(0, 1fr) 28px; } .crm-rr-pv-conds select[multiple] { height: auto; } .crm-rr-pv-head { display: flex; align-items: center; justify-content: space-between; } .crm-rr-pv-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; } .crm-rr-pv-list li span { display: block; } .crm-rr-pv-rule { font-size: 12px; color: var(--ms-gray-600); } .crm-switch-btn { padding: 0; border: 0; background: none; cursor: pointer; } .crm-switch-static.is-locked { opacity: .6; } @media (max-width: 1100px) { .crm-rr__cols { grid-template-columns: 1fr; } .crm-rr__preview { position: static; } } .crm-code-tag { display: inline-block; max-width: 80px; padding: 1px 8px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); color: var(--ms-gray-800); font-size: 12px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .crm-code-tag--1 { background: oklch(0.621 0.238 26.074 / .1); color: oklch(0.621 0.238 26.074); border-color: oklch(0.806 0.11 23.178); } .crm-code-tag--2 { background: oklch(0.668 0.211 36.902 / .1); color: oklch(0.668 0.211 36.902); border-color: oklch(0.846 0.093 49.602); } .crm-code-tag--3 { background: oklch(0.744 0.172 58.471 / .1); color: oklch(0.6 0.15 58.471); border-color: oklch(0.894 0.098 79.058); } .crm-code-tag--4 { background: oklch(0.726 0.218 138.487 / .1); color: oklch(0.6 0.2 138.487); border-color: oklch(0.883 0.131 132.549); } .crm-code-tag--5 { background: oklch(0.738 0.124 194.805 / .1); color: oklch(0.6 0.11 194.805); border-color: oklch(0.868 0.093 187.104); } .crm-code-tag--6 { background: oklch(0.599 0.219 259.04 / .1); color: oklch(0.599 0.219 259.04); border-color: oklch(0.819 0.096 247.256); } .crm-code-tag--7 { background: oklch(0.6 0.2 300 / .1); color: oklch(0.55 0.2 300); border-color: oklch(0.83 0.1 300); } .crm-code-tag--8 { background: oklch(0.634 0.235 353.153 / .1); color: oklch(0.634 0.235 353.153); border-color: oklch(0.837 0.106 350.981); } .crm-code-tag--9 { background: oklch(0.552 0.014 285.938 / .1); color: oklch(0.442 0.015 285.786); border-color: oklch(0.871 0.005 286.286); } .crm-code-colors { border: 0; padding: 0; margin: 0; } .crm-code-color { position: relative; cursor: pointer; } .crm-code-color input { position: absolute; opacity: 0; } .crm-code-color input:checked + .crm-code-tag { outline: 2px solid var(--ms-primary); outline-offset: 2px; } .crm-code-color input:focus-visible + .crm-code-tag { outline: 2px dashed var(--ms-primary); outline-offset: 2px; } /* 시술메뉴 */ body.pv { margin: 0; min-height: 100vh; background: var(--ms-gray-100); } .pv-top { display: flex; align-items: center; height: 52px; padding: 0 24px; background: var(--ms-white); border-bottom: 1px solid var(--ms-gray-200); font-weight: 600; } .pv-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; padding: 16px 24px; align-items: start; } .pv-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .pv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: 10px; background: var(--ms-white); } .pv-filters__label { font-size: 12px; color: var(--ms-gray-600); } .pv-select { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); font-size: 13px; } .pv-select span { color: var(--ms-gray-600); } .pv-select select { border: 0; background: transparent; font: inherit; } .pv-switch { margin-left: auto; } .pv-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .pv-cat { padding: 6px 12px; border: 1px solid var(--ms-gray-300); border-radius: 999px; background: var(--ms-white); color: var(--ms-gray-800); font-size: 13px; text-decoration: none; } .pv-cat[aria-current="page"] { border-color: var(--ms-primary); background: var(--ms-primary); color: var(--ms-white); } .pv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .pv-card { justify-content: space-between; } .pv-empty { grid-column: 1 / -1; } .pv-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #f0f0f0; border-radius: 8px; background: var(--ms-white); } .pv-card__body { display: flex; flex-direction: column; gap: 6px; } .pv-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pv-card__title { color: var(--ms-gray-900, #111); font-size: 16px; font-weight: 600; text-decoration: none; } .pv-card__desc { font-size: 13px; color: var(--ms-gray-600); } .pv-card__price strong { font-size: 18px; } .pv-card__price span { font-size: 13px; color: var(--ms-gray-600); } .pv-until { font-size: 12px; color: var(--ms-red); } .pv-empty { padding: 40px; text-align: center; color: var(--ms-gray-600); background: var(--ms-white); border-radius: 8px; } .pv-detail { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 10px; background: var(--ms-white); } .pv-back { position: absolute; top: 18px; left: 12px; font-size: 24px; color: var(--ms-gray-700); text-decoration: none; } .pv-detail__title { margin: 0 0 0 20px; font-size: 20px; } .pv-detail__desc { margin: 0; color: var(--ms-gray-700); line-height: 1.6; } .pv-detail__img { max-width: 100%; border-radius: 8px; } .pv-options { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .pv-option { padding: 16px; border: 1px solid #f0f0f0; border-radius: 8px; } .pv-option__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pv-option__title { font-weight: 600; } .pv-option__desc { margin: 6px 0 0; font-size: 13px; color: var(--ms-gray-600); } .pv-option__price { margin: 8px 0 0; font-size: 13px; } .pv-option__price strong { font-size: 16px; } .pv-caution { padding: 12px 16px; border-radius: 8px; background: var(--ms-gray-100); font-size: 13px; white-space: pre-line; } .pv-cart { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 32px); overflow: auto; padding: 16px; border-radius: 10px; background: var(--ms-white); } .pv-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pv-cart__title { margin: 0; font-size: 16px; } .pv-cart__empty { margin: 24px 0; text-align: center; color: var(--ms-gray-600); font-size: 13px; line-height: 1.8; } .pv-cart__row { display: flex; align-items: center; justify-content: space-between; } .pv-cart__list, .pv-cart__lines, .pv-cart__frequent ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .pv-item { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--ms-gray-200); border-radius: 8px; } .pv-item__head { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14px; } .pv-item__desc, .pv-item__calc { margin: 0; } .pv-item__row { display: flex; align-items: center; gap: 8px; } .pv-qty { display: inline-flex; align-items: center; border: 1px solid var(--ms-gray-300); border-radius: 6px; } .pv-qty button { width: 28px; height: 30px; border: 0; background: none; cursor: pointer; } .pv-qty input { width: 36px; height: 30px; border: 0; text-align: center; } .pv-item__price { flex: 1; } .pv-item__price input { text-align: right; } .pv-item__detail, .pv-cart__totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 13px; } .pv-item__detail dd, .pv-cart__totals dd { margin: 0; text-align: right; } .pv-cart__lines li { display: flex; justify-content: space-between; font-size: 13px; } .pv-cart__final { font-weight: 700; font-size: 15px; } .pv-cart__pay { width: 100%; margin-top: 8px; } .pv-cart__frequent > summary { list-style: none; display: inline-flex; } .pv-cart__frequent > summary::-webkit-details-marker { display: none; } @media (max-width: 640px) { .pv-cards { grid-template-columns: 1fr; } } @media (max-width: 960px) { .pv-body { grid-template-columns: 1fr; padding: 12px 16px; } .pv-cart { position: static; max-height: none; } .pv-switch { margin-left: 0; } } /* 사이드바 즐겨찾기 ☆ (원본: 평소엔 숨고, 줄에 마우스를 올리거나 지금 메뉴일 때 보인다. NEW 배지는 그때 ☆ 로 바뀐다) */ .crm-mrow { position: relative; display: flex; align-items: center; border-radius: 6px; } .crm-mrow > .crm-submenu__item { flex: 1; min-width: 0; padding-right: 30px; } .crm-mrow__slot { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: grid; place-items: center end; min-width: 24px; height: 24px; } .crm-mrow__slot > * { grid-area: 1 / 1; } .crm-mrow__badge { transition: opacity .12s; } .crm-fav { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ms-gray-600); cursor: pointer; opacity: 0; transition: opacity .12s; } .crm-fav:hover { background: rgb(0 0 0 / 5%); } .crm-fav.is-on { color: var(--ms-primary); } .crm-fav__icon { width: 14px; height: 14px; fill: currentColor; } .crm-mrow.is-active .crm-fav, .crm-mrow:focus-within .crm-fav { opacity: 1; } .crm-mrow:focus-within .crm-mrow__badge, .crm-mrow.is-active .crm-mrow__badge { opacity: 0; } @media (hover: hover) and (pointer: fine) { .crm-mrow:hover .crm-fav { opacity: 1; } .crm-mrow:hover .crm-mrow__badge { opacity: 0; } } .is-collapsed .crm-mrow__slot { display: none; } /* 관리 콘솔 > 권한: 단계별 들여쓰기 */ .crm-perm-head th { padding: 10px 12px 6px; background: var(--ms-gray-100); text-align: left; font-size: 13px; font-weight: 600; color: var(--ms-gray-800); } .crm-perm-name { display: inline-flex; align-items: center; gap: 4px; padding-left: calc((var(--d) - 1) * 20px); } .crm-perm-row--0 .crm-perm-name { padding-left: 0; font-weight: 500; } .crm-perm-row--1 .crm-perm-name { font-weight: 500; } .crm-perm-name .crm-perm-indent { margin-left: 0; } /* 접고 펴는 권한 표 */ .crm-tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--ms-gray-300); border-radius: 5px; background: var(--ms-white); color: var(--ms-gray-700); cursor: pointer; flex: none; } .crm-tree-toggle:hover { border-color: var(--ms-primary); color: var(--ms-primary); } .crm-tree-caret { display: inline-block; font-size: 11px; line-height: 1; transition: transform .15s; } .crm-tree-spacer { display: inline-block; width: 22px; flex: none; } tr.is-collapsed .crm-tree-caret { transform: rotate(-90deg); } tr.is-collapsed .crm-tree-toggle { border-color: var(--ms-primary); background: var(--ms-primary); color: var(--ms-white); } tr.is-collapsed > td, tr.is-collapsed > th { background: var(--ms-gray-100); } .crm-perm-head.is-collapsed th { background: var(--ms-gray-200); } .crm-tree-count { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--ms-primary-100); color: var(--ms-primary); font-size: 11px; font-weight: 600; } .crm-perm-name { gap: 6px; } tr[data-node][hidden] { display: none; } /* ── 고객 검색 팝업 ── */ .crm-vsearch { position: relative; } .crm-vsearch__pop { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: 420px; max-height: 70vh; overflow: auto; border: 1px solid var(--ms-gray-200); border-radius: 10px; background: var(--ms-white); box-shadow: 0 10px 28px rgb(0 0 0 / 14%); } .crm-vsearch__list { display: flex; flex-direction: column; } .crm-vsearch__item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--ms-gray-100); color: inherit; text-decoration: none; } .crm-vsearch__item:hover, .crm-vsearch__item:focus { background: var(--ms-gray-100); outline: none; } .crm-vsearch__tags { gap: 4px; } .crm-vsearch__today { color: var(--ms-primary); } .crm-vsearch__empty, .crm-vsearch__recent { margin: 0; padding: 14px; } .crm-vsearch__recent { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; } .crm-vsearch__recent .crm-vsearch__item { padding: 6px 0; border: 0; } .crm-vsearch__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ms-gray-50, #fafafa); } .crm-vsearch__foot kbd { padding: 1px 5px; border: 1px solid var(--ms-gray-300); border-radius: 4px; font-size: 11px; } .crm-vsearch__foot .crm-linkbtn { margin-left: auto; } /* ── 오른쪽 서랍 (dialog) ── */ dialog.crm-drawer { position: fixed; inset: 0 0 0 auto; width: min(760px, 100vw); max-width: none; height: 100vh; max-height: none; margin: 0; border-radius: 0; } .crm-drawer > form { display: flex; flex-direction: column; height: 100%; } .crm-drawer__head { display: flex; align-items: center; gap: 10px; } .crm-drawer__head .ms-modal__title { flex: 1; } .crm-drawer__body { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 14px; background: var(--ms-gray-100); } .crm-dsec { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 10px; background: var(--ms-white); } .crm-dsec__head { display: flex; align-items: center; justify-content: space-between; } .crm-dsec__title { margin: 0; font-size: 15px; } .crm-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .crm-dgrid__full { grid-column: 1 / -1; } .crm-phone { display: grid; grid-template-columns: 150px 1fr; gap: 6px; margin-bottom: 6px; } .crm-radios { flex-wrap: wrap; gap: 14px; } .crm-referrer { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .crm-referrer [hidden] { display: none; } @media (max-width: 720px) { .crm-dgrid, .crm-referrer { grid-template-columns: 1fr; } } /* ── 고객 차트 ── */ body.crm-chart-page { margin: 0; min-height: 100vh; background: var(--ms-gray-100); } .crm-chart__top { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 20px; background: var(--ms-white); border-bottom: 1px solid var(--ms-gray-200); } .crm-chart__top .ms-row { gap: 8px; } .crm-chart__name { margin: 0; font-size: 18px; } .crm-chart { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px 72px; align-items: stretch; gap: 0; height: calc(100vh - 52px); padding: 0; } /* 대시보드 .crm-chart(가운데 정렬)를 덮는다 */ .crm-chart__left, .crm-chart__right { overflow: auto; background: var(--ms-white); border-right: 1px solid var(--ms-gray-200); } .crm-chart__right { border-right: 0; border-left: 1px solid var(--ms-gray-200); padding: 14px; } .crm-chart__center { overflow: auto; padding: 16px; } .crm-chart__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 260px; } .crm-chart__rail { display: flex; flex-direction: column; gap: 4px; padding: 8px 4px; background: var(--ms-white); border-left: 1px solid var(--ms-gray-200); } .crm-rail-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 8px; color: var(--ms-gray-700); font-size: 11px; text-align: center; text-decoration: none; } .crm-rail-btn:hover { background: var(--ms-gray-100); } .crm-rail-btn.is-on { color: var(--ms-primary); background: var(--ms-primary-100); } .crm-rail-btn.is-off { color: var(--ms-gray-400, #bbb); } .crm-cbox { padding: 16px; border-bottom: 1px solid var(--ms-gray-200); } .crm-cbox__title { margin: 0 0 10px; font-size: 14px; } .crm-cinfo { display: grid; grid-template-columns: 96px 1fr; gap: 8px 10px; margin: 0; font-size: 13px; } .crm-cinfo dt { color: var(--ms-gray-600); } .crm-cinfo dd { margin: 0; word-break: break-all; } .crm-cinfo__memo { white-space: pre-line; } .crm-hist { display: flex; flex-direction: column; gap: 10px; } .crm-hist__item { display: grid; grid-template-columns: 70px 1fr; gap: 4px 8px; padding: 12px; border: 1px solid var(--ms-gray-200); border-radius: 10px; color: inherit; text-decoration: none; font-size: 13px; } .crm-hist__item > .crm-hist__head, .crm-hist__item > strong { grid-column: 1 / -1; } .crm-hist__item:hover { border-color: var(--ms-primary-300); } .crm-hist__item.is-current { border-color: var(--ms-primary); box-shadow: 0 0 0 2px var(--ms-primary-100); } .crm-hist__item.is-cancelled { opacity: .6; } .crm-hist__head { justify-content: space-between; } .crm-hist__memo { padding: 6px 8px; border-radius: 6px; background: var(--ms-gray-100); white-space: pre-line; } @media (max-width: 1100px) { .crm-chart { grid-template-columns: 1fr; height: auto; } .crm-chart__rail { flex-direction: row; flex-wrap: wrap; } } /* ── 새로운 예약 ── */ .crm-book { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--ms-white); } .crm-book__head { display: flex; align-items: center; gap: 12px; } .crm-book__title { margin: 0; font-size: 16px; } .crm-book__error { flex: 1; } .crm-book__cols { display: grid; grid-template-columns: 300px 300px minmax(260px, 1fr); gap: 16px; align-items: start; } .crm-book__info, .crm-book__plan { display: flex; flex-direction: column; gap: 12px; } .crm-book__sub { margin: 0; font-size: 14px; } .crm-book__need { margin: 0; } .crm-w100 { width: 100%; } .crm-seg { display: flex; padding: 3px; border-radius: 8px; background: var(--ms-gray-100); } .crm-seg__opt { flex: 1; } .crm-seg__opt input { position: absolute; opacity: 0; } .crm-seg__opt span { display: block; padding: 6px 0; border-radius: 6px; text-align: center; font-size: 13px; cursor: pointer; } .crm-seg__opt input:checked + span { background: var(--ms-white); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); font-weight: 600; } .crm-seg__opt input:focus-visible + span { outline: 2px solid var(--ms-primary); } .crm-mcal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .crm-mcal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; } .crm-mcal__grid th { padding: 4px 0; color: var(--ms-gray-600); font-weight: 400; } .crm-mcal__grid td { padding: 2px; text-align: center; } .crm-mcal__day { width: 30px; height: 28px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: inherit; } .crm-mcal__day:hover:not(:disabled) { background: var(--ms-gray-100); } .crm-mcal__day.is-other { color: var(--ms-gray-400, #bbb); } .crm-mcal__day.is-today { font-weight: 700; color: var(--ms-primary); } .crm-mcal__day.is-selected { background: var(--ms-primary); color: var(--ms-white); } .crm-mcal__day:disabled { color: var(--ms-gray-300); cursor: default; } .crm-book__days { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow: auto; } .crm-book__dayhead { margin-bottom: 6px; font-size: 13px; font-weight: 600; } .crm-book__times { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .crm-tslot input { position: absolute; opacity: 0; } .crm-tslot span { display: block; padding: 7px 0; border: 1px solid var(--ms-gray-300); border-radius: 6px; text-align: center; font-size: 12px; cursor: pointer; } .crm-tslot span:hover { border-color: var(--ms-primary); } .crm-tslot input:checked + span { border-color: var(--ms-primary); background: var(--ms-primary-100); color: var(--ms-primary); font-weight: 600; } .crm-tslot input:focus-visible + span { outline: 2px solid var(--ms-primary); outline-offset: 1px; } .crm-book__direct { display: flex; flex-direction: column; gap: 10px; } .crm-bline { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px; border: 1px solid var(--ms-gray-200); border-radius: 8px; position: relative; } .crm-bline > .crm-iconbtn { position: absolute; top: 6px; right: 6px; } .crm-bline > .ms-input:first-child { margin-right: 30px; } .crm-bprev { border: 1px solid var(--ms-gray-200); border-radius: 10px; overflow: hidden; } .crm-bprev__head { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--ms-gray-200); } .crm-bprev__body { position: relative; max-height: 60vh; overflow: auto; } .crm-bprev__row { position: absolute; left: 0; right: 0; height: 40px; padding: 2px 6px; border-top: 1px solid var(--ms-gray-100); font-size: 11px; color: var(--ms-gray-500); } .crm-bprev__row.is-half { border-top-style: dashed; } .crm-bprev__card { position: absolute; left: 52px; right: 8px; padding: 3px 8px; border: 1px solid var(--ms-gray-300); border-left: 4px solid var(--c, var(--ms-gray-300)); border-radius: 6px; background: var(--ms-white); font-size: 12px; overflow: hidden; } .crm-bprev__card.is-mine { border: 2px dashed var(--ms-primary); background: var(--ms-primary-100); } .crm-req-list { display: flex; flex-wrap: wrap; gap: 6px; } .crm-req-list:empty { display: none; } .crm-req-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--ms-gray-300); border-radius: 999px; font-size: 12px; } .crm-req-chip__x { padding: 0; border: 0; background: none; cursor: pointer; color: var(--ms-gray-600); } @media (max-width: 1280px) { .crm-book__cols { grid-template-columns: 1fr 1fr; } .crm-book__preview { grid-column: 1 / -1; } } /* ── 예약 상세 ── */ .crm-rdetail { display: flex; flex-direction: column; gap: 14px; } .crm-rdetail__top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 12px; background: var(--ms-white); } .crm-rdetail__top .ms-row { gap: 8px; } .crm-rdetail__date { font-size: 16px; } .crm-rdetail__body, .crm-rdetail__req { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--ms-white); } .crm-rdetail__sechead { display: flex; align-items: center; justify-content: space-between; } .crm-rdetail__grid { border: 0; margin: 0; padding: 0; min-width: 0; } .crm-rdetail__main { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .crm-rdetail__main > .ms-field:nth-child(2) { grid-row: span 2; } @media (max-width: 900px) { .crm-rdetail__main { grid-template-columns: 1fr; } } /* ── 예약 현황 카드: 단계 색 띠 ── */ a.crm-rcard { display: block; color: inherit; text-decoration: none; background: var(--ms-white); border-color: var(--ms-gray-300); } a.crm-rcard.has-stage { border-left: 4px solid var(--stage); } a.crm-rcard:hover { border-color: var(--ms-primary); } /* ── 내원 현황 ── */ .crm-kanban { position: relative; } .crm-kcol { width: 280px; transition: width .15s; } .crm-kcol__count { color: var(--ms-gray-700); } .crm-ksort { max-width: 132px; height: 26px; padding: 0 6px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); color: var(--ms-gray-800); font: inherit; font-size: 12px; } .crm-kcol__fold { font-size: 11px; font-weight: 600; letter-spacing: -1px; } .crm-kcol.is-folded { width: 44px; } .crm-kcol.is-folded .crm-kcol__head { flex-direction: column; gap: 8px; padding: 8px 4px; } .crm-kcol.is-folded .crm-kcol__head .crm-stage { height: auto; padding: 8px 4px; writing-mode: vertical-rl; } .crm-kcol.is-folded .crm-ksort, .crm-kcol.is-folded .crm-spacer, .crm-kcol.is-folded .crm-kcol__body { display: none; } .crm-kcol.is-folded .crm-kcol__count { writing-mode: vertical-rl; } .crm-fcard { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--ms-gray-200); border-radius: 8px; background: var(--ms-white); font-size: 12px; cursor: default; } .crm-fcard.is-selected { border-color: var(--ms-primary); box-shadow: 0 0 0 2px var(--ms-primary-100); } .crm-fcard__head { display: flex; align-items: center; gap: 6px; min-width: 0; } .crm-fcard__open { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; color: inherit; text-decoration: none; } .crm-fcard__open strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .crm-fcard__open:hover strong { color: var(--ms-primary-700); text-decoration: underline; } .crm-fcard__openicon { color: var(--ms-gray-600); font-size: 12px; } .crm-fcard__since { white-space: nowrap; } .crm-gtag { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px; font-size: 11px; } .crm-gtag--f { background: var(--ms-red-100); color: var(--ms-red); } .crm-gtag--m { background: var(--ms-primary-100); color: var(--ms-primary-700); } .crm-newmark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ms-yellow-100); color: var(--ms-yellow); font-size: 10px; font-weight: 700; } .crm-fcard__react { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .crm-react { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border: 1px solid var(--ms-gray-300); border-radius: 999px; background: var(--ms-white); font: inherit; font-size: 12px; cursor: pointer; } .crm-react.is-mine { border-color: var(--ms-primary); background: var(--ms-primary-100); } .crm-react--add { color: var(--ms-gray-700); } .crm-react:hover { border-color: var(--ms-primary-500); } .crm-react-pop { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: 272px; max-height: 320px; padding: 10px; overflow: auto; border: 1px solid var(--ms-gray-200); border-radius: 10px; background: var(--ms-white); box-shadow: 0 8px 24px rgb(0 0 0 / .12); } .crm-react-pop[hidden] { display: none; } .crm-react-pop__search { height: 30px; padding: 0 10px; border: 1px solid var(--ms-primary); border-radius: 6px; font: inherit; } .crm-react-pop__title { margin: 0 0 4px; color: var(--ms-gray-700); } .crm-react-pop__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .crm-react-pop__item { height: 30px; border: 0; border-radius: 6px; background: transparent; font-size: 18px; cursor: pointer; } .crm-react-pop__item:hover, .crm-react-pop__item:focus-visible { background: var(--ms-gray-100); } .crm-react-pop__item[hidden], .crm-react-pop__group[hidden] { display: none; } .crm-react-pop__none { margin: 0; text-align: center; } .crm-fcard__info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; } .crm-fcard__info > div { display: grid; grid-template-columns: 52px 1fr; gap: 4px; } .crm-fcard__info > div.is-wide { grid-column: 1 / -1; grid-template-columns: 90px 1fr; } .crm-fcard__info dt { color: var(--ms-gray-600); } .crm-fcard__info dd { margin: 0; } .crm-fcard__ago { display: block; color: var(--ms-gray-600); font-size: 11px; } .crm-fcard__sec { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--ms-gray-200); } .crm-fcard__label { color: var(--ms-gray-600); } .crm-fcard__line { display: flex; gap: 8px; } .crm-fcard__who { display: flex; align-items: center; gap: 4px; } .crm-fcard__memo { padding: 6px 8px; border-radius: 6px; background: var(--ms-gray-100); white-space: pre-line; word-break: break-all; } .crm-fcard__foot { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--ms-gray-200); } .crm-fcard__timer { display: flex; justify-content: flex-end; } .crm-fcard__staff { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .crm-fcard__select { min-width: 0; height: 28px; padding: 0 6px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); font: inherit; font-size: 12px; } .crm-fcard__next { height: 30px; border: 0; border-top: 1px solid var(--ms-gray-200); background: transparent; color: var(--ms-primary-700); font: inherit; font-weight: 600; cursor: pointer; } .crm-fcard__next:hover { background: var(--ms-primary-100); } .crm-avatar--xs { width: 18px; height: 18px; border-radius: 50%; font-size: 10px; } .crm-fcard__who .crm-avatar--xs + .crm-avatar--xs { margin-left: -8px; box-shadow: 0 0 0 2px var(--ms-white); } /* ── 예약 상세: 접수·내원 단계·섹션 ── */ .crm-rdetail { border-top: 3px solid transparent; } .crm-rdetail.is-received { border-top-color: var(--stage); } .crm-rdetail__top { position: sticky; top: -16px; z-index: 5; flex-direction: column; align-items: stretch; gap: 10px; box-shadow: 0 1px 0 var(--ms-gray-200); } .crm-rdetail__titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crm-rdetail__rel { color: var(--ms-primary-700); font-weight: 600; } .crm-rdetail__tabs { display: flex; gap: 14px; margin-left: 12px; } .crm-rdetail__tabs a { color: var(--ms-gray-700); font-weight: 500; text-decoration: none; } .crm-rdetail__tabs a[aria-current="page"] { color: var(--ms-gray-900, #111); font-weight: 700; } .crm-rdetail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crm-stagepick { position: relative; display: inline-flex; align-items: center; } .crm-stagepick__dot { position: absolute; left: 10px; width: 12px; height: 12px; border-radius: 3px; pointer-events: none; } .crm-stagepick__select, .crm-zonepick__label select { height: 34px; padding: 0 10px; border: 1px solid var(--ms-gray-300); border-radius: 8px; background: var(--ms-white); font: inherit; font-size: 13px; } .crm-stagepick__select { min-width: 136px; padding-left: 30px; } .crm-zonepick__label { display: inline-flex; align-items: center; gap: 6px; color: var(--ms-gray-700); font-size: 13px; } .crm-zonepick__label select { min-width: 120px; } .crm-rsec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 120px; } .crm-rsec__title { margin: 0; font-size: 16px; } .crm-rsec--card { padding: 16px; border-radius: 12px; background: var(--ms-white); } .crm-rsec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .crm-rsec__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; } .crm-consult { display: flex; flex-direction: column; gap: 12px; } .crm-consult__titlebar { gap: 12px; } .crm-consult__nums { display: flex; gap: 4px; } .crm-consult__num { min-width: 26px; height: 26px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; cursor: pointer; } .crm-consult__num[aria-selected="true"] { border-color: var(--ms-primary); color: var(--ms-primary-700); font-weight: 600; } .crm-consult__result { min-width: 150px; } .crm-consult__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; padding: 0; border: 0; min-width: 0; } .crm-consult__wide { grid-column: 1 / -1; } .crm-consult__when .ms-input { width: 180px; } .crm-consult__foot { display: flex; justify-content: flex-end; } .crm-chist__who { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 4px; } .crm-chist__who > span { display: flex; flex-direction: column; gap: 4px; } .crm-chist__who .crm-avatar--xs { display: inline-flex; margin-right: 4px; } .crm-consult__foot .crm-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; cursor: pointer; } .crm-consult__foot .crm-linkbtn.crm-danger { color: var(--ms-red); } /* ── 예약 현황 카드 메뉴 · 위쪽 알림 ── */ a.crm-rcard.is-menu { border-color: var(--ms-primary); box-shadow: 0 0 0 2px var(--ms-primary-100); } .crm-cmenu { position: fixed; z-index: 70; display: flex; flex-direction: column; min-width: 184px; padding: 4px; border: 1px solid var(--ms-gray-200); border-radius: 8px; background: var(--ms-white); box-shadow: 0 8px 24px rgb(0 0 0 / .12); } .crm-cmenu[hidden], .crm-cmenu [hidden] { display: none; } .crm-cmenu__item { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ms-gray-800); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; } .crm-cmenu__item:hover:not([disabled]), .crm-cmenu__item:focus-visible { outline: none; background: var(--ms-gray-100); } .crm-cmenu__item[disabled] { color: var(--ms-gray-500); cursor: default; } .crm-cmenu__arrow { margin-left: auto; color: var(--ms-gray-600); } .crm-cmenu__sep { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--ms-gray-200); } .crm-cmenu__sub { position: relative; } .crm-cmenu--sub { position: absolute; top: -4px; left: 100%; display: none; margin-left: 2px; } .crm-cmenu__sub:hover > .crm-cmenu--sub, .crm-cmenu__sub:focus-within > .crm-cmenu--sub, .crm-cmenu__sub.is-open > .crm-cmenu--sub { display: flex; } .crm-cmenu__dot { flex: none; width: 12px; height: 12px; border-radius: 3px; } .crm-cmenu__check { margin-left: auto; color: var(--ms-primary-700); visibility: hidden; } .crm-cmenu__item[aria-checked="true"] .crm-cmenu__check { visibility: visible; } .crm-flash { position: fixed; top: 16px; left: 50%; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; } .crm-flash__item { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; background: var(--ms-white); box-shadow: 0 6px 16px rgb(0 0 0 / .12); color: var(--ms-gray-800); font-size: 13px; animation: crm-flash-in .15s ease-out; } .crm-flash__icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: var(--ms-white); font-size: 10px; font-weight: 700; } .crm-flash__item--success .crm-flash__icon { background: #52c41a; } .crm-flash__item--error .crm-flash__icon { background: var(--ms-red); } @keyframes crm-flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ── 예약 현황 빈 칸: + 카드 (더블클릭 = 새로운 예약) ── */ .crm-grid__cell[data-new-slot] { position: relative; } .crm-grid__cell[data-new-slot]:hover::after, .crm-grid__cell[data-new-slot].is-menu::after { content: "+"; position: absolute; inset: 3px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-gray-100); color: var(--ms-gray-700); font-size: 18px; cursor: pointer; } /* ── 고객 미선택 새로운 예약 · 고객 선택 서랍 ── */ .crm-chart--nocustomer { grid-template-columns: 300px minmax(0, 1fr); } .crm-cbox--pick { display: flex; flex-direction: column; gap: 12px; } .crm-book__nocust { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; color: var(--ms-red); font-size: 13px; } .crm-book__nocust-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ms-red); } dialog.crm-pick { width: min(1100px, 100vw); } .crm-pick__wrap { display: flex; flex-direction: column; height: 100%; } .crm-pick__filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px; padding: 16px; border-radius: 10px; background: var(--ms-gray-100); } .crm-pick__actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; } .crm-pick__no { display: flex; align-items: center; gap: 4px; } .crm-pick__no > span { color: var(--ms-gray-700); font-size: 13px; } .crm-pick__results { flex: 1; overflow: auto; padding: 0 16px 16px; } .crm-pick__row { cursor: pointer; } .crm-pick__row:hover, .crm-pick__row:focus-visible { outline: none; background: var(--ms-primary-100); } @media (max-width: 720px) { .crm-pick__filters { grid-template-columns: 1fr 1fr; } } /* ── 예약 현황 카드 정보 팝업 ── */ .crm-rpop { position: fixed; z-index: 65; display: flex; flex-direction: column; gap: 10px; min-width: 300px; max-width: 360px; padding: 12px 14px; border: 1px solid var(--ms-gray-200); border-radius: 10px; background: var(--ms-white); box-shadow: 0 8px 24px rgb(0 0 0 / .12); font-size: 12px; pointer-events: none; } .crm-rpop[hidden] { display: none; } .crm-rpop__head { display: flex; align-items: baseline; gap: 6px; } .crm-rpop__head strong { font-size: 14px; } .crm-rpop__body { display: grid; grid-template-columns: 90px 1fr; gap: 12px; } .crm-rpop dl { margin: 0; } .crm-rpop dt { color: var(--ms-gray-600); } .crm-rpop dd { margin: 2px 0 8px; color: var(--ms-gray-800); } .crm-rpop__zone { padding-right: 12px; border-right: 1px solid var(--ms-gray-200); } .crm-rpop__tags { display: flex; flex-wrap: wrap; gap: 4px; } .crm-rpop__tag { padding: 1px 6px; border: 1px solid var(--ms-gray-300); border-radius: 4px; } .crm-rpop__tag--new { border-color: var(--ms-yellow); color: var(--ms-yellow); } .crm-grid__colhead, .crm-grid__col { box-sizing: border-box; } /* 머리와 본문 열 너비를 똑같이 나눈다 */ .crm-grid__body { scrollbar-gutter: stable; } .crm-grid__head { scrollbar-gutter: stable; overflow-y: hidden; } /* ── 예약 현황: 지난 시간 · 취소/부도 카드 · 시간 조절 · 이동/추가 모드 ── */ .crm-grid__past { position: absolute; top: 0; left: 0; right: 0; z-index: 0; background: var(--ms-gray-100); pointer-events: none; } .crm-grid__cell { position: relative; z-index: 0; } a.crm-rcard { -webkit-user-drag: none; } a.crm-rcard.is-inactive > *:not(.crm-rcard__edge) { opacity: .3; } a.crm-rcard.is-moving { opacity: .4; border-style: dashed; } a.crm-rcard.is-resizing { z-index: 3; box-shadow: 0 4px 12px rgb(0 0 0 / .15); } a.crm-rcard.is-resizing::after { content: attr(data-preview); position: absolute; right: 4px; bottom: 2px; padding: 0 4px; border-radius: 4px; background: var(--ms-gray-800); color: var(--ms-white); font-size: 10px; } .crm-rcard__edge { position: absolute; left: 0; right: 0; z-index: 2; height: 6px; cursor: ns-resize; touch-action: none; } .crm-rcard__edge--top { top: -2px; } .crm-rcard__edge--bottom { bottom: -2px; } .crm-rcard__edge:hover { background: linear-gradient(var(--ms-primary-300), var(--ms-primary-300)) center / 24px 3px no-repeat; } #grid.is-mode-move .crm-grid__cell[data-new-slot]:hover::after { content: "⤵ 여기로 이동"; font-size: 12px; border-color: var(--ms-primary); background: var(--ms-primary-100); color: var(--ms-primary-700); } #grid.is-mode-add-line .crm-grid__cell[data-new-slot]:hover::after { content: "+ 일정 추가"; font-size: 12px; border-color: var(--ms-primary); background: var(--ms-primary-100); color: var(--ms-primary-700); } #grid.is-mode-add-resv .crm-grid__cell[data-new-slot]:hover::after { content: "+ 예약 추가"; font-size: 12px; border-color: var(--ms-primary); background: var(--ms-primary-100); color: var(--ms-primary-700); } .crm-modebar { position: fixed; bottom: 24px; left: 50%; z-index: 80; display: flex; align-items: center; gap: 24px; padding: 12px 16px; border-radius: 10px; background: var(--ms-gray-800); color: var(--ms-white); box-shadow: 0 8px 24px rgb(0 0 0 / .2); transform: translateX(-50%); font-size: 13px; } .crm-modebar__body { display: flex; flex-direction: column; gap: 4px; } .crm-modebar__sub { color: var(--ms-gray-400, #bbb); font-size: 12px; white-space: pre; } .crm-modebar__stop { color: var(--ms-gray-400, #bbb); } .crm-modehint { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--ms-gray-200); background: var(--ms-primary-100); font-size: 13px; } .crm-modehint__tip { margin-left: auto; color: var(--ms-gray-700); } .crm-zonemenu { min-width: 200px; } .crm-zonemenu__only { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--ms-gray-200); font-size: 12px; color: var(--ms-gray-700); } .crm-zonemenu__only input { position: absolute; opacity: 0; width: 1px; height: 1px; } .crm-zonemenu__only input:checked + .crm-switch { background: var(--ms-primary); } .crm-zonemenu__only input:checked + .crm-switch .crm-switch__knob { left: 18px; } .crm-zonemenu__only input:focus-visible + .crm-switch { outline: 2px solid var(--ms-primary); outline-offset: 2px; } .crm-cmenu__empty { padding: 8px 10px; color: var(--ms-gray-600); font-size: 12px; } .crm-ctime { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--ms-gray-100); font-size: 13px; } .crm-ctime dt { color: var(--ms-gray-600); } .crm-ctime dd { margin: 0; } .crm-cdoc { display: flex; flex-direction: column; gap: 12px; } .crm-cdoc__who { display: flex; align-items: baseline; gap: 8px; } .crm-flash__item { pointer-events: auto; } .crm-flash__action { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--ms-primary-700); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .crm-grid__cell.is-past { border-bottom-color: var(--ms-gray-300); } /* 지난 시간 칸도 경계선이 보이게 (음영보다 진하게) */ .crm-grid__col:has(.crm-grid__past) { border-left-color: var(--ms-gray-300); } .crm-flash[popover] { inset: 16px auto auto 50%; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; } dialog.crm-drawer--stacked { width: min(720px, 100vw); box-shadow: -8px 0 24px rgb(0 0 0 / .15); } .crm-pick__expand { width: 22px; height: 22px; border: 1px solid var(--ms-gray-300); border-radius: 4px; background: var(--ms-white); font: inherit; line-height: 1; cursor: pointer; } .crm-pick__more > td { background: var(--ms-gray-100); } .crm-pick__card { display: flex; flex-direction: column; gap: 10px; padding: 6px 4px; } .crm-pick__card .ms-row { gap: 6px; } .crm-pick__info { grid-template-columns: 96px 1fr 96px 1fr; } .crm-ident-list { margin: 8px 0 0; padding-left: 18px; color: var(--ms-gray-800); } /* ── 예약 현황 카드 (원본 모양): 흰 바탕·회색 테두리, 접수 뒤 왼쪽 6px 단계 색 띠, 이름 / No. / 태그 ── */ a.crm-rcard { padding: 0; border: 1px solid #d9d9d9; border-radius: 4px; background: var(--ms-white); } a.crm-rcard.has-stage { border-left: 1px solid #d9d9d9; } a.crm-rcard:hover { border-color: #bfbfbf; } .crm-rcard__body { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 4px; box-sizing: border-box; overflow: hidden; } a.crm-rcard.has-stage .crm-rcard__body { border-left: 6px solid var(--stage); } a.crm-rcard .crm-rcard__name { overflow: hidden; color: rgba(0, 0, 0, .88); font-size: 14px; font-weight: 700; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; } a.crm-rcard .crm-rcard__no { color: rgba(0, 0, 0, .25); font-size: 12px; line-height: 20px; } a.crm-rcard .crm-rcard__tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; } .crm-rtag { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border: 1px solid #d4d4d8; border-radius: 4px; background: #f4f4f5; color: #52525b; font-size: 12px; font-weight: 500; line-height: 20px; box-sizing: border-box; } .crm-rtag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .crm-rtag--new { border-color: #fde68a; background: #fffbeb; color: #f59e0b; } .crm-rtag--new svg { fill: currentColor; stroke: none; } .crm-rtag--funnel { background: rgba(113, 113, 122, .1); } /* 카드가 짧으면(30분) 태그 줄은 아래에 두고 이름·No. 묶음이 줄어든다 (원본과 같이 No. 가 가려진다) */ .crm-rcard__info { flex: 0 1 auto; min-height: 0; overflow: hidden; } a.crm-rcard .crm-rcard__tags { flex: none; flex-wrap: nowrap; overflow: hidden; } a.crm-rcard .crm-rcard__no { margin-top: 2px; } /* 카드 앞쪽 띠: 모든 카드에 내원 단계 색 (예약 = 회색, 취소·부도 = 진한 회색) */ a.crm-rcard .crm-rcard__body { border-left: 6px solid var(--stage, var(--ms-gray-400)); } /* 카드 끌어 옮기기: 따라다니는 카드 (놓일 칸·시각에 맞춰 붙는다) */ a.crm-rcard[data-drag] { cursor: grab; touch-action: none; } .crm-rcard--ghost { position: fixed !important; z-index: 85; pointer-events: none; opacity: .9; box-shadow: 0 8px 20px rgb(0 0 0 / .2); cursor: grabbing; } .crm-rcard--ghost::after { content: attr(data-preview); position: absolute; right: 4px; bottom: 2px; padding: 0 4px; border-radius: 4px; background: var(--ms-gray-800); color: var(--ms-white); font-size: 10px; } .crm-rcard--ghost.is-nodrop { opacity: .5; } .crm-rcard--ghost.is-nodrop::after { content: none; } /* ── 시간 점유 ── */ .crm-tblock { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 6px; border: 1px solid rgb(0 0 0 / .08); border-radius: 4px; color: var(--ms-gray-800); font: inherit; font-size: 12px; text-align: left; overflow: hidden; cursor: pointer; } .crm-tblock:hover { border-color: rgb(0 0 0 / .25); } .crm-tblock:disabled { cursor: default; } .crm-tblock__memo { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-tblock__who { color: var(--ms-gray-700); font-size: 11px; } dialog.crm-tb { width: min(420px, 100vw); } .crm-tb__body { display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow: auto; } .crm-tb__sec { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--ms-gray-200); min-width: 0; } .crm-tb__legend { display: flex; justify-content: space-between; width: 100%; padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 13px; } .crm-tb__row { display: flex; align-items: center; justify-content: space-between; } .crm-tb__check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .crm-tb__dates, .crm-tb__times { gap: 6px; flex-wrap: wrap; align-items: center; } .crm-tb__weekdays { display: flex; flex-direction: column; gap: 6px; } .crm-tb__wd input { position: absolute; opacity: 0; width: 1px; height: 1px; } .crm-tb__wd span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; border: 1px solid var(--ms-gray-300); border-radius: 6px; font-size: 13px; cursor: pointer; } .crm-tb__wd input:checked + span { border-color: var(--ms-primary); background: var(--ms-primary-100); color: var(--ms-primary-700); font-weight: 600; } .crm-tb__wd input:focus-visible + span { outline: 2px solid var(--ms-primary); outline-offset: 2px; } .crm-tb__colors { display: flex; flex-wrap: wrap; gap: 6px; } .crm-tb__swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid rgb(0 0 0 / .1); border-radius: 6px; cursor: pointer; } .crm-tb__swatch input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .crm-tb__swatch:has(input[type="radio"]:checked) { outline: 2px solid var(--ms-gray-800); outline-offset: 1px; } .crm-tb__swatch:has(input:focus-visible) { outline: 2px solid var(--ms-primary); outline-offset: 1px; } .crm-tb__swatch--custom { background: var(--ms-white); color: var(--ms-gray-700); } .crm-tb__swatch--custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .crm-tb__foot { display: flex; align-items: center; gap: 8px; } dialog.crm-tbpanel { width: min(640px, 100vw); } .crm-tbpanel__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px; } .crm-tbpanel__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .crm-tbpanel__chk { width: 36px; } .crm-tbpanel__dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid rgb(0 0 0 / .1); border-radius: 3px; vertical-align: middle; } /* 예약 이동·시간 점유 이동: 칸 대신 15분 단위 안내 상자 (#move-hint) */ #grid.is-mode-move .crm-grid__cell[data-new-slot]:hover::after { content: none; } .crm-movehint { position: absolute; left: 3px; right: 3px; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; border: 1px dashed var(--ms-primary); border-radius: 6px; background: var(--ms-primary-100); color: var(--ms-primary-700); font-size: 12px; pointer-events: none; } /* ── 예약 카드 정보 팝업 ── */ .crm-rinfo-pop { position: fixed; z-index: 66; width: 300px; max-height: calc(100vh - 16px); overflow: auto; border: 1px solid var(--ms-gray-200); border-radius: 10px; background: var(--ms-white); box-shadow: 0 8px 24px rgb(0 0 0 / .14); } .crm-rinfo-pop[hidden] { display: none; } .crm-rinfo { display: flex; flex-direction: column; font-size: 13px; } .crm-rinfo__head { position: relative; display: flex; align-items: baseline; gap: 6px; padding: 14px 40px 8px 14px; } .crm-rinfo__head strong { font-size: 15px; } .crm-rinfo__close { position: absolute; top: 8px; right: 8px; } .crm-rinfo__zone { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 12px; border-bottom: 1px solid var(--ms-gray-200); color: var(--ms-gray-700); } .crm-rinfo__zone select { min-width: 140px; height: 30px; padding: 0 8px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); font: inherit; } .crm-rinfo__grid { display: grid; grid-template-columns: 76px 1fr; gap: 8px; margin: 0; padding: 12px 14px 4px; } .crm-rinfo__grid dt { color: var(--ms-gray-600); } .crm-rinfo__grid dd { margin: 0; } .crm-rinfo__rel { color: var(--ms-primary-700); } .crm-rinfo__phone { display: flex; align-items: center; gap: 4px; } .crm-rinfo__phone .crm-iconbtn { width: 24px; height: 24px; margin-left: auto; font-size: 12px; } .crm-rinfo__phone .crm-iconbtn + .crm-iconbtn { margin-left: 0; } .crm-rinfo__sec { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; } .crm-rinfo__sec--line { border-top: 1px solid var(--ms-gray-200); margin-top: 4px; padding-top: 12px; } .crm-rinfo__label { color: var(--ms-gray-600); font-size: 12px; } .crm-rinfo__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 8px; border-left: 3px solid var(--ms-gray-300); border-radius: 4px; background: var(--ms-gray-100); font-size: 12px; } .crm-rinfo__line.is-current { border-left-color: var(--ms-primary); background: var(--ms-primary-100); } .crm-rinfo__who { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; } .crm-rinfo__foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--ms-gray-200); background: var(--ms-white); } a.crm-rcard.is-picked { border-color: var(--ms-primary); box-shadow: 0 0 0 2px var(--ms-primary-100); } /* ── 진행할 시술: 카드 요약 · 차트 표 · 시술 현황 · 선택 바 · 시술 추가 서랍 ── */ .crm-fcard__tasks { display: flex; flex-direction: column; gap: 6px; } .crm-fcard__taskhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .crm-tcount { display: inline-flex; flex-wrap: wrap; gap: 6px; color: var(--ms-gray-600); font-size: 11px; } .crm-tcount .is-ready { color: #fa8c16; } .crm-tcount .is-called { color: #1677ff; } .crm-tcount .is-running { color: #389e0d; } .crm-tlist { border: 1px solid var(--ms-gray-200); border-radius: 6px; background: var(--ms-gray-100); } .crm-tlist > summary { display: flex; align-items: center; gap: 4px; padding: 6px 8px; cursor: pointer; list-style: none; } .crm-tlist > summary::after { margin-left: auto; content: "▾"; color: var(--ms-gray-500); } .crm-tlist[open] > summary::after { content: "▴"; } .crm-tlist__first { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .crm-titem { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-top: 1px solid var(--ms-gray-200); background: var(--ms-white); } .crm-titem.is-high { box-shadow: inset 3px 0 0 var(--ms-red); } .crm-titem__head { display: flex; align-items: center; gap: 6px; cursor: pointer; } .crm-titem__head strong { flex: 1; min-width: 0; } .crm-titem__src { color: var(--ms-gray-700); } .crm-titem__grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0; } .crm-titem__grid dt { color: var(--ms-gray-600); } .crm-titem__grid dd { margin: 0; overflow-wrap: anywhere; } .crm-tlist.is-cancelled summary, .crm-tlist.is-cancelled .crm-titem__head strong { color: var(--ms-gray-500); text-decoration: line-through; } .crm-tstatus { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--c); font-size: 12px; font-weight: 600; white-space: nowrap; } .crm-tstatus::before { width: 6px; height: 6px; border-radius: 50%; background: var(--c); content: ""; } .crm-paytag { display: inline-block; padding: 0 4px; border-radius: 4px; background: var(--ms-red-100); color: var(--ms-red); font-size: 11px; font-weight: 600; white-space: nowrap; } .crm-paytag--high { background: var(--ms-yellow-100); color: #ad6800; } .crm-paytag--badge { background: var(--ms-primary-100); color: var(--ms-primary-700); } .crm-fcard__timer { display: flex; align-items: center; gap: 4px; } .crm-timer { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--ms-primary-100); color: var(--ms-primary-700); font-size: 12px; font-variant-numeric: tabular-nums; } .crm-timer.is-over { background: var(--ms-red-100); color: var(--ms-red); } .crm-timer__stop { width: 22px; height: 22px; font-size: 10px; } /* 고객 차트 */ .crm-paywarn { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 8px 12px; border-radius: 6px; background: var(--ms-yellow-100); color: #ad6800; font-size: 13px; } .crm-ttable-wrap { overflow-x: auto; } .crm-ttable { min-width: 1100px; font-size: 13px; } .crm-ttable td { vertical-align: top; } .crm-ttable tr.is-high td:first-child { box-shadow: inset 3px 0 0 var(--ms-red); } .crm-ttable__chk { width: 36px; } .crm-ttable__name { min-width: 200px; } .crm-ttable__name .crm-linkbtn { padding: 0; border: 0; background: none; cursor: pointer; } .crm-tcell { display: block; width: 100%; min-width: 72px; min-height: 28px; padding: 4px 6px; border: 1px dashed transparent; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } button.crm-tcell:hover { border-color: var(--ms-gray-300); background: var(--ms-gray-100); } button.crm-tcell:empty::before { color: var(--ms-gray-400); content: "＋"; } .crm-tcell.is-text { display: -webkit-box; max-width: 180px; overflow: hidden; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .crm-tsign { max-width: 90px; max-height: 32px; border: 1px solid var(--ms-gray-200); border-radius: 4px; background: var(--ms-white); } .crm-tcancel__title { margin: 16px 0 8px; } .crm-tcancel td { color: var(--ms-gray-600); } .crm-tcancel .crm-linkbtn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; } .crm-ordermemo { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; } .crm-right { align-self: flex-end; text-align: right; } /* 칸 고치기 · 호출 · 서명 · 타이머 창 */ .crm-tfield { display: flex; flex-direction: column; gap: 10px; } .crm-tfield__opts { display: flex; flex-direction: column; gap: 6px; } .crm-tfield__opts--scroll { max-height: 260px; overflow-y: auto; } .crm-tfield__dose { display: flex; align-items: center; gap: 6px; } .crm-tfield__list { margin: 0; padding-left: 18px; } .crm-signpad { width: 100%; height: auto; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); touch-action: none; cursor: crosshair; } .crm-tfield .crm-linkbtn { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; } /* 선택 바 */ .crm-taskbar { position: fixed; bottom: 16px; left: 50%; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: calc(100vw - 32px); padding: 8px 12px; border-radius: 10px; background: var(--ms-gray-800); color: var(--ms-white); font-size: 13px; box-shadow: 0 6px 20px rgb(0 0 0 / 25%); transform: translateX(-50%); } dialog.crm-taskbar { inset: auto auto 16px 50%; margin: 0; border: 0; max-height: none; } dialog.crm-taskbar:not([open]) { display: none; } dialog.crm-taskbar::backdrop { background: rgb(0 0 0 / 15%); } dialog.crm-tpop::backdrop { background: transparent; } .crm-taskbar strong { margin-right: 6px; } .crm-taskbar__btn { height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .crm-taskbar__btn:hover:not(:disabled) { background: rgb(255 255 255 / 14%); } .crm-taskbar__btn:disabled { opacity: .4; cursor: default; } .crm-taskbar__btn.is-primary { background: var(--ms-primary); } .crm-taskbar__btn.is-primary:disabled { background: transparent; } /* 시술 시작 전에는 꺼진 버튼으로 (진행중일 때만 켜진다) */ .crm-taskbar__btn.is-danger { color: #ff9c9c; } .crm-taskbar__sep { width: 1px; height: 18px; margin: 0 4px; background: rgb(255 255 255 / 30%); } .crm-taskbar .crm-iconbtn { color: inherit; } /* 시술 현황 */ .crm-proc2 { display: flex; flex: 1; gap: 12px; min-height: 0; padding: 12px; overflow: hidden; } .crm-proc2__lists { display: flex; flex: none; gap: 8px; min-height: 0; } .crm-proc2__lists .crm-kcol { min-height: 0; } .crm-proc2__lists .crm-kcol__body { overflow-y: auto; } .crm-rooms2 { display: grid; flex: 1; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; min-width: 0; min-height: 0; overflow-y: auto; align-content: start; } .crm-room2 { position: relative; display: flex; flex-direction: column; min-height: 180px; border: 1px solid var(--ms-gray-200); border-radius: 8px; background: var(--ms-white); } .crm-room2.is-busy { border-color: var(--ms-gray-300); } .crm-room2__head { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--ms-gray-200); font-size: 13px; } .crm-room2__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 8px; } .crm-room2__empty { display: flex; flex: 1; align-items: center; justify-content: center; color: var(--ms-gray-500); font-size: 12px; } .crm-room2__assign { position: absolute; inset: 40px 8px 8px; border: 2px dashed var(--ms-primary); border-radius: 8px; background: rgb(255 255 255 / 85%); color: var(--ms-primary-700); font: inherit; font-weight: 600; opacity: 0; cursor: pointer; transition: opacity .12s; } .crm-room2:hover .crm-room2__assign, .crm-room2__assign:focus-visible { opacity: 1; } .crm-rpatient { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 6px; background: var(--ms-gray-100); font-size: 12px; } .crm-rpatient__head { display: flex; align-items: baseline; gap: 6px; } .crm-rpatient__head a { color: inherit; text-decoration: none; } .crm-rpart { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-left: 3px solid var(--c, var(--ms-gray-400)); border-radius: 4px; background: var(--ms-white); } .crm-rpart--running { --c: #52c41a; } .crm-rpart--called { --c: #1677ff; } .crm-rpart--ready { --c: #fa8c16; } .crm-rpart__head { display: flex; justify-content: space-between; color: var(--c); font-weight: 600; } .crm-rtask { display: flex; align-items: center; gap: 6px; cursor: pointer; } /* 시술 추가 서랍 */ dialog.crm-tp { width: min(1100px, 100vw); } .crm-tp__wrap { display: flex; flex-direction: column; height: 100%; } .crm-tp__cols { display: flex; flex: 1; gap: 16px; min-height: 0; padding: 16px; overflow: hidden; } .crm-tp__left { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; overflow-y: auto; } .crm-tp__right { display: flex; flex: none; flex-direction: column; gap: 8px; width: 320px; padding-left: 16px; border-left: 1px solid var(--ms-gray-200); overflow-y: auto; } .crm-tp__tabs { flex: none; } .crm-tp__tabs .crm-seg__opt { padding: 6px 0; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; cursor: pointer; } .crm-tp__tabs .crm-seg__opt[aria-selected="true"] { background: var(--ms-white); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); font-weight: 600; } .crm-tp__card { display: flex; flex-direction: column; gap: 10px; } .crm-tp__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crm-tp__q { flex: 1; min-width: 200px; } .crm-tp__table td { vertical-align: top; } .crm-tp__table .crm-linkbtn, .crm-tp__etc .crm-linkbtn, .crm-tp__right .crm-linkbtn { padding: 0; border: 0; background: none; font: inherit; white-space: nowrap; cursor: pointer; } .crm-tp__right .crm-linkbtn:disabled { color: var(--ms-gray-400); cursor: default; } .crm-tp__etc { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .crm-tp__etc li { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--ms-gray-200); } .crm-tp__cart { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .crm-tp__item { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--ms-gray-200); border-radius: 6px; font-size: 13px; } .crm-tp__itemhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .crm-tp__dose { display: flex; align-items: center; gap: 6px; } .crm-tp__dose .ms-input { width: 80px; } @media (max-width: 760px) { .crm-tp__cols { flex-direction: column; overflow-y: auto; } .crm-tp__right { width: auto; padding-left: 0; border-left: 0; } } /* 예약 상세 예약 정보: 날짜 | 예약 담당자 / 예약 일정(전체) / 유입·체크·귀가 | 상담사·예약 메모 */ .crm-rdetail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; } .crm-rdetail__full { grid-column: 1 / -1; } .crm-rdetail__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .crm-rdetail__memo .crm-textarea { min-height: 150px; } .crm-rdetail__full .crm-bline { grid-template-columns: minmax(160px, 2fr) auto minmax(140px, 1fr); align-items: center; padding-right: 40px; } .crm-rdetail__full .crm-bline > .ms-input:first-child { margin-right: 0; } .crm-rdetail__full .crm-bline > .crm-iconbtn { top: 50%; transform: translateY(-50%); } .crm-rxadd--wide { align-self: stretch; width: 100%; height: 34px; margin-top: 6px; border: 1px solid var(--ms-gray-200); border-radius: 6px; background: var(--ms-gray-100); color: var(--ms-gray-700); font: inherit; font-size: 13px; cursor: pointer; } .crm-rxadd--wide:hover { background: var(--ms-gray-200); } .crm-badge-today { background: var(--ms-primary-100); color: var(--ms-primary-700); } .crm-rdetail__req .crm-linkbtn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; } /* 예약 상세 희망 시술 추가 창: 왼쪽 목록 | 오른쪽 추가할 희망 시술 */ .crm-opt-split { display: flex; gap: 16px; } .crm-opt-main { display: flex; flex: 1; flex-direction: column; gap: 14px; min-width: 0; } .crm-opt-split { flex-direction: row; } .crm-opt-cart { display: flex; flex: none; flex-direction: column; gap: 8px; width: 280px; padding-left: 16px; border-left: 1px solid var(--ms-gray-200); } .crm-req-list--col { flex-direction: column; align-items: stretch; } @media (max-width: 900px) { .crm-rdetail__grid { grid-template-columns: 1fr; } .crm-opt-split { flex-direction: column; } .crm-opt-cart { width: auto; padding-left: 0; border-left: 0; } } /* 접수 뒤 예약 상세 바탕: 내원 단계 색을 옅게 */ .crm-rdetail.is-received { padding: 0 12px 12px; border-radius: 0 0 12px 12px; background: color-mix(in srgb, var(--stage) 12%, var(--ms-white)); } /* ── 선택 상자 (app.js selEnhance): 원래 select 는 숨기고 .crm-sel 을 그린다 ── */ select.crm-sel-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .crm-sel { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; outline: 0; user-select: none; } .ms-input > .crm-sel { flex: 1; min-width: 0; height: 100%; font-size: 14px; color: var(--ms-gray-800); } .ms-input:has(> .crm-sel.is-open), .ms-input:has(> .crm-sel:focus-visible) { border-color: var(--ms-primary); box-shadow: 0 0 0 2px var(--ms-primary-100); } .crm-sel:not(.ms-input > .crm-sel) { padding-right: 24px; background: var(--ms-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 12px no-repeat; } .crm-sel:not(.ms-input > .crm-sel).is-open, .crm-sel:not(.ms-input > .crm-sel):focus-visible { border-color: var(--ms-primary); box-shadow: 0 0 0 2px var(--ms-primary-100); } .crm-sel__value { display: inline-flex; flex: 1; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-sel__value.is-ph, .crm-sel.is-open .crm-sel__search::placeholder { color: var(--ms-gray-500); } .crm-sel__search { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; } .crm-sel__clear { display: none; flex: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--ms-gray-400); color: var(--ms-white); font-size: 9px; line-height: 16px; cursor: pointer; } .crm-sel.can-clear:hover .crm-sel__clear { display: inline-block; } .ms-input:has(> .crm-sel.can-clear:hover) > .ms-icon { display: none; } .crm-sel.can-clear:not(.ms-input > .crm-sel):hover { background-image: none; } .crm-sel[aria-disabled="true"] { cursor: not-allowed; color: var(--ms-gray-500); } .ms-input:has(> .crm-sel[aria-disabled="true"]) { background: var(--ms-gray-100); } .crm-sel__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: hsl(var(--h) 60% 60%); color: rgb(0 0 0 / 88%); font-size: 11px; font-weight: 500; } .crm-sel__role { color: var(--ms-gray-500); font-size: 12px; } .crm-sel__sq { flex: none; width: 12px; height: 12px; border-radius: 3px; } .crm-stagepick__select.crm-sel { padding-left: 10px; } .crm-stagepick:has(.crm-sel) .crm-stagepick__dot { display: none; } .crm-selpop { position: fixed; inset: auto; margin: 0; max-width: min(420px, calc(100vw - 16px)); padding: 4px; border: 0; border-radius: 8px; background: var(--ms-white); color: var(--ms-gray-800); font-size: 14px; box-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%); overflow: visible; } .crm-selpop__list { position: relative; max-height: 256px; overflow-y: auto; } .crm-selpop__group { padding: 5px 12px; color: var(--ms-gray-500); font-size: 12px; } .crm-selpop__item { display: flex; align-items: center; gap: 4px; min-height: 32px; padding: 5px 12px; border-radius: 4px; line-height: 22px; cursor: pointer; white-space: nowrap; } .crm-selpop__item.is-grouped { padding-left: 24px; } .crm-selpop__item.is-active { background: rgb(0 0 0 / 4%); } .crm-selpop__item.is-selected { background: var(--ms-primary-100); font-weight: 600; } .crm-selpop__item.is-disabled { color: var(--ms-gray-400); cursor: not-allowed; } .crm-selpop__item.is-danger { justify-content: center; color: var(--ms-red); } .crm-selpop__item .crm-code-tag { font-weight: 400; } .crm-selpop__sep { height: 1px; margin: 4px 0; background: var(--ms-gray-200); } .crm-selpop__none { padding: 12px; color: var(--ms-gray-500); font-size: 13px; text-align: center; } .crm-selpop__foot { display: flex; justify-content: flex-end; padding: 4px 4px 0; } .crm-stagepick__select.crm-sel { min-width: 150px; } /* 현재: / 접수: 구역 — 원본처럼 앞말까지 한 상자 */ .crm-zonepick__label:has(.crm-sel) { position: relative; height: 34px; min-width: 130px; padding: 0 0 0 10px; border: 1px solid var(--ms-gray-300); border-radius: 8px; background: var(--ms-white); gap: 4px; } .crm-zonepick__label:has(.crm-sel.is-open) { border-color: var(--ms-primary); box-shadow: 0 0 0 2px var(--ms-primary-100); } .crm-zonepick__label .crm-sel { flex: 1; height: 100%; padding-left: 0; border: 0; border-radius: 8px; color: var(--ms-gray-800); box-shadow: none !important; } /* ── 상용구 (글 상자 // ) ── */ .crm-snippop { position: fixed; inset: auto; margin: 0; width: 260px; padding: 4px; border: 0; border-radius: 8px; background: var(--ms-white); color: var(--ms-gray-800); font-size: 14px; box-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%); overflow: visible; } .crm-snippop__list { position: relative; max-height: 240px; overflow-y: auto; } .crm-snippop__group { padding: 6px 10px 2px; color: var(--ms-gray-500); font-size: 12px; } .crm-snippop__item { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 10px; border-radius: 4px; cursor: pointer; } .crm-snippop__item.is-active { background: rgb(0 0 0 / 4%); } .crm-snippop__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-snippop__more { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--ms-gray-500); font-size: 14px; cursor: pointer; } .crm-snippop__more:hover { background: var(--ms-gray-200); color: var(--ms-gray-800); } .crm-snippop__none { padding: 8px 10px; color: var(--ms-gray-500); font-size: 13px; } .crm-snippop__new { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 0; border-top: 1px solid var(--ms-gray-200); background: none; color: var(--ms-primary); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .crm-snipmenu { position: absolute; right: 4px; z-index: 2; display: flex; flex-direction: column; min-width: 96px; padding: 4px; border-radius: 8px; background: var(--ms-white); box-shadow: 0 6px 16px rgb(0 0 0 / 12%); } .crm-snipmenu button { padding: 6px 10px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .crm-snipmenu button:hover { background: var(--ms-gray-100); } .crm-snipform .ms-input [data-count-out] { flex: none; } /* 관리 > 템플릿 > 상용구 관리 */ .crm-snip-q { width: 240px; } .crm-snip-table__title { min-width: 140px; font-weight: 600; } .crm-snip-table__body { display: -webkit-box; max-width: 640px; overflow: hidden; color: var(--ms-gray-700); white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* 고객 차트 오른쪽 도구 (QR · 현황에서 보기 · 변경 이력) */ .crm-rdetail__bar { display: flex; align-items: center; gap: 8px; } .crm-rdetail__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; } .crm-tool { width: 32px; height: 32px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); color: var(--ms-gray-700); } .crm-tool svg { width: 16px; height: 16px; } .crm-tool:hover { border-color: var(--ms-primary); color: var(--ms-primary); } .crm-toolmenu { position: relative; } .crm-toolmenu > summary { display: inline-flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; } .crm-toolmenu > summary::-webkit-details-marker { display: none; } .crm-toolmenu[open] > summary { border-color: var(--ms-primary); color: var(--ms-primary); } .crm-toolmenu__panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 150px; padding: 4px; border-radius: 8px; background: var(--ms-white); box-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%); } .crm-toolmenu__panel > * { padding: 6px 12px; border-radius: 4px; color: var(--ms-gray-800); font-size: 13px; text-decoration: none; white-space: nowrap; } .crm-toolmenu__panel > a:hover { background: rgb(0 0 0 / 4%); } .crm-toolmenu__panel > [aria-disabled="true"] { color: var(--ms-gray-400); cursor: not-allowed; } .crm-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; } .crm-qr__img svg { display: block; width: 220px; height: 220px; } .crm-qr__help { color: var(--ms-primary-700); font-size: 13px; text-align: center; } /* 변경 이력 서랍 */ dialog.crm-chlog { width: min(380px, 100vw); } dialog.crm-chlog[open] { display: flex; flex-direction: column; } .crm-chlog__body { flex: 1; min-height: 0; padding: 8px 16px; overflow-y: auto; } .crm-chlog__list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; } .crm-chlog__item { display: flex; gap: 8px; font-size: 13px; } .crm-chlog__icon { flex: none; width: 18px; color: var(--ms-gray-500); } .crm-chlog__head strong { font-weight: 600; } .crm-chlog__time { margin-left: 4px; color: var(--ms-gray-500); font-size: 12px; white-space: nowrap; } .crm-chlog__line { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--ms-gray-700); white-space: pre-wrap; } .crm-chlog__comment { margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--ms-primary-100); white-space: pre-wrap; } .crm-chlog__empty { padding: 24px 0; color: var(--ms-gray-500); text-align: center; } .crm-chlog__form { flex: none !important; height: auto !important; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--ms-gray-200); } .crm-chlog__send { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* 예약현황 ?focus= 로 찾아간 카드 */ .crm-rcard.is-focus { box-shadow: 0 0 0 3px var(--ms-primary); z-index: 4; } /* 변경 이력: 원본처럼 오른쪽에서 밀려 나오고, 닫을 때 밀려 들어간다. 뒤 화면은 어둡게 하지 않는다. */ dialog.crm-chlog { box-shadow: -6px 0 16px rgb(0 0 0 / 8%), -3px 0 6px -4px rgb(0 0 0 / 12%), -9px 0 28px 8px rgb(0 0 0 / 5%); } dialog.crm-chlog[open] { animation: crm-slide-in .3s cubic-bezier(.23, 1, .32, 1); } dialog.crm-chlog.is-closing { animation: crm-slide-out .25s cubic-bezier(.78, .14, .15, .86) forwards; } dialog.crm-chlog::backdrop { background: transparent; } @keyframes crm-slide-in { from { transform: translateX(100%); } to { transform: none; } } @keyframes crm-slide-out { from { transform: none; } to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { dialog.crm-chlog[open], dialog.crm-chlog.is-closing { animation: none; } } /* ── 수납 ── */ .crm-wallet__pp { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--ms-gray-100); font-size: 12px; } .crm-wallet__tk { margin-top: 6px; border: 1px solid var(--ms-gray-200); border-radius: 6px; overflow: hidden; font-size: 12px; } .crm-wallet__tkhead { padding: 6px 8px; background: var(--ms-gray-100); color: var(--ms-gray-700); font-weight: 600; } .crm-wallet__tkrow { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; } .crm-wallet__left { color: var(--ms-primary-700); } /* 수납 카드 */ .crm-paycard { margin-top: 8px; border: 1px solid var(--ms-gray-200); border-radius: 10px; background: var(--ms-white); } .crm-paycard.is-refunded { opacity: .7; } .crm-paycard__sum { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; list-style: none; cursor: pointer; } .crm-paycard__sum::-webkit-details-marker { display: none; } .crm-paycard__main { flex: 1; min-width: 0; } .crm-paycard__amount { margin: 4px 0; font-size: 16px; font-weight: 700; } .crm-paycard__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 12px; } .crm-paycard__meta dt { color: var(--ms-gray-600); } .crm-paycard__meta dd { margin: 0; } .crm-paycard__tools { display: flex; align-items: center; gap: 2px; } .crm-paycard__tools .crm-iconbtn { width: 28px; height: 28px; text-decoration: none; color: var(--ms-gray-700); } .crm-paycard__chev { width: 20px; color: var(--ms-gray-500); text-align: center; transition: transform .15s; } .crm-paycard[open] .crm-paycard__chev { transform: rotate(180deg); } .crm-paycard__body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; border-top: 1px solid var(--ms-gray-200); } .crm-paycard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; } .crm-paycard__sub { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--ms-gray-700); } .crm-paycard__item { padding: 8px 10px; border-radius: 6px; background: var(--ms-gray-100); font-size: 13px; } .crm-paycard__itemhead { display: flex; justify-content: space-between; font-weight: 600; } .crm-paycard__proc { margin-top: 2px; color: var(--ms-gray-600); font-size: 12px; } .crm-paycard__total { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; } .crm-paytxn { font-size: 12px; } .crm-paystatus { padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; } .crm-paystatus--approved { background: #f6ffed; color: #389e0d; } .crm-paystatus--refund { background: var(--ms-red-100); color: var(--ms-red); } .crm-paycard:has([data-pay-approved]:checked) tr[data-txn-status="refund"] { display: none; } /* 수납 추가 (전체 화면) */ dialog.crm-payfull { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border-radius: 0; background: var(--ms-gray-100); } dialog.crm-payfull[open] { display: flex; flex-direction: column; } .crm-payfull__head { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--ms-gray-200); background: var(--ms-white); } .crm-payfull__title { margin: 0; font-size: 16px; font-weight: 700; } .crm-paysteps { display: flex; flex: 1; justify-content: center; gap: 120px; margin: 0; padding: 0; list-style: none; color: var(--ms-gray-500); font-size: 14px; } .crm-paysteps li { display: flex; align-items: center; gap: 8px; } .crm-paysteps li span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ms-gray-200); font-size: 12px; } .crm-paysteps li.is-on { color: var(--ms-gray-800); } .crm-paysteps li.is-on span { background: var(--ms-primary); color: var(--ms-white); } .crm-paysteps li.is-done span { background: var(--ms-primary-100); color: var(--ms-primary-700); } .crm-payfull__body { display: flex; flex: 1; min-height: 0; } .crm-payfull__body[hidden] { display: none; } .crm-payfull__left { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 20px; overflow: hidden; } .crm-pay__items { flex: 1; min-height: 0; overflow: auto; border-radius: 8px; background: var(--ms-white); } .crm-pay__items .crm-scrolltable { max-height: none; } .crm-pay__filters { padding: 10px; border-radius: 8px; background: var(--ms-white); } .crm-payfull__right { display: flex; flex: none; flex-direction: column; gap: 12px; width: 400px; padding: 16px 20px; border-left: 1px solid var(--ms-gray-200); background: var(--ms-white); overflow-y: auto; } .crm-pay__carthead { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--ms-gray-200); } .crm-pay__cart { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .crm-pay__item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--ms-gray-200); border-radius: 8px; font-size: 13px; } .crm-pay__itemhead { display: flex; align-items: center; gap: 6px; } .crm-pay__name { flex: 1; min-width: 0; font-weight: 600; } .crm-pay__itemhead .crm-linkbtn, .crm-pay__price .crm-linkbtn { padding: 0; border: 0; background: none; color: var(--ms-gray-700); font: inherit; font-size: 12px; cursor: pointer; } .crm-pay__proc { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-left: 3px solid var(--ms-gray-300); background: var(--ms-gray-100); font-size: 12px; } .crm-pay__price { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 15px; } .crm-pay__priceinp { width: 140px; height: 30px; gap: 4px; padding: 0 8px; } .crm-pay__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0; } .crm-pay__foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ms-gray-200); } .crm-pay__sum { display: flex; align-items: baseline; justify-content: space-between; } .crm-pay__sum strong { font-size: 20px; } .crm-pay__error { padding: 8px 10px; border-radius: 6px; background: var(--ms-red-100); color: var(--ms-red); font-size: 13px; } /* ② 결제하기 */ .crm-pay2__left { align-items: center; overflow-y: auto; } .crm-pay2__card { width: min(620px, 100%); padding: 14px 16px; border-radius: 10px; background: var(--ms-white); } .crm-pay2__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; } .crm-pay2__row--big { font-size: 15px; font-weight: 700; } .crm-pay2__row.is-sub { color: var(--ms-gray-600); } .crm-pay2__left strong.crm-pay2__left, .crm-pay2__row .crm-pay2__left { color: var(--ms-primary-700); } .crm-pay2__txns { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; } .crm-pay2__txns li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--ms-gray-100); } .crm-pay2__txns li span { flex: 1; min-width: 0; } .crm-pay2__amount { display: flex; gap: 6px; } .crm-pay2__amount .ms-input { flex: 1; } .crm-pay2__amount input { text-align: right; font-size: 16px; } .crm-pay2__won { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--ms-gray-300); border-radius: 8px; background: var(--ms-gray-100); } .crm-pay2__methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .crm-pay2__method { height: 34px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); font: inherit; font-size: 13px; cursor: pointer; } .crm-pay2__method.is-on { border-color: var(--ms-primary); background: var(--ms-primary-100); color: var(--ms-primary-700); font-weight: 600; } .crm-pay2__fields { display: flex; flex-direction: column; gap: 10px; } .crm-pay2__fields [hidden] { display: none !important; } .crm-pay2__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .crm-pay2__full { grid-column: 1 / -1; } .crm-pay2__pp { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--ms-gray-200); border-radius: 8px; cursor: pointer; } .crm-pay2__pp > span { display: flex; flex-direction: column; } .crm-pay2__foot { flex-direction: row; } .crm-pay2__foot [data-pay-do] { flex: 1; } .crm-payqty__body { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 16px; } @media (max-width: 900px) { .crm-payfull__body { flex-direction: column; overflow-y: auto; } .crm-payfull__right { width: auto; border-left: 0; } .crm-paysteps { gap: 24px; } } /* 고객 차트 오른쪽 패널 */ .crm-chart.is-nohist { grid-template-columns: 300px minmax(0, 1fr) 72px; } .crm-panel__head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .crm-panel__head .crm-cbox__title { margin: 0; } .crm-panel__head .crm-iconbtn { text-decoration: none; color: var(--ms-gray-600); } .crm-panel__day { margin: 8px 0 4px; color: var(--ms-gray-600); font-size: 12px; font-weight: 600; } .crm-panel__tabs { margin-bottom: 8px; } .crm-panel__empty { padding: 40px 0; } .crm-phist__amount { grid-column: 1 / -1; font-size: 15px; } .crm-phist__proc { grid-column: 1 / -1; font-size: 13px; } .crm-photo__upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .crm-photo__pick { cursor: pointer; } .crm-photo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; } .crm-photo__item { position: relative; margin: 0; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--ms-gray-100); } .crm-photo__item img { display: block; width: 100%; height: 100%; object-fit: cover; } .crm-photo__item form { position: absolute; top: 4px; right: 4px; } .crm-photo__del { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; font-size: 11px; cursor: pointer; opacity: 0; } .crm-photo__item:hover .crm-photo__del, .crm-photo__del:focus-visible { opacity: 1; } .crm-photo__resv .crm-photo__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } /* 작업 (원본: 작업명 · 작업 메모 · 담당자, 고른 줄 파랗게, 완료는 취소선) */ .crm-wtable { min-width: 0; } .crm-wtable tr.is-picked td { background: var(--ms-primary-100); } .crm-wtable tr.is-done .crm-wtable__name { color: var(--ms-gray-500); text-decoration: line-through; } .crm-wtable__memo { white-space: pre-wrap; color: var(--ms-gray-700); } .crm-wtable__cancelhead { margin-top: 16px; } .crm-wcancel { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; padding: 0 0 0 8px; list-style: none; font-size: 13px; } .crm-workbar { gap: 6px; padding: 8px 14px; background: #0b1729; } .crm-workbar .crm-taskbar__btn.is-link { color: #69b1ff; } .crm-workbar .crm-taskbar__btn.is-danger { color: #ff7875; } .crm-workpop { position: absolute; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 8px; width: 300px; padding: 12px; border-radius: 8px; background: var(--ms-white); color: var(--ms-gray-800); box-shadow: 0 6px 16px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%); } .crm-workpop__head { display: flex; align-items: center; justify-content: space-between; } .crm-workpop__head .crm-iconbtn { color: var(--ms-gray-600); } .crm-workpop__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .crm-workpop__list { max-height: 260px; overflow-y: auto; } .crm-workpop__person { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px; border-radius: 4px; font-size: 13px; cursor: pointer; } .crm-workpop__person:hover { background: rgb(0 0 0 / 4%); } .crm-workpop__person[hidden] { display: none; } .crm-workpop:not(:has([data-work-multi]:checked)) .crm-workpop__person input { position: absolute; opacity: 0; pointer-events: none; } .crm-workpop__person:has(input:checked) { background: var(--ms-primary-100); font-weight: 600; } .crm-workpop--cancel { width: 280px; gap: 2px; padding: 4px; } .crm-workpop__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .crm-workpop__opt:hover { background: rgb(0 0 0 / 4%); } /* ── 기타 > 사진 · 펜차트 ── */ .crm-phbox { margin-top: 10px; padding: 12px; border: 1px solid var(--ms-gray-200); border-radius: 10px; } .crm-phbox__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; } .crm-phtool { height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--ms-gray-800); font: inherit; font-size: 13px; cursor: pointer; } .crm-phtool:hover:not(:disabled) { background: var(--ms-gray-100); } .crm-phtool:disabled { color: var(--ms-gray-400); cursor: default; } .crm-phtool.crm-danger:not(:disabled) { color: var(--ms-red); } .crm-phbox__bar .crm-toolmenu > summary.ms-btn { display: inline-flex; align-items: center; list-style: none; } .crm-phbox__all, .crm-phgroup__head { display: flex; align-items: center; gap: 6px; margin: 8px 0 6px; font-size: 13px; cursor: pointer; } .crm-phgroup__head { font-weight: 600; } .crm-phgroup__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } .crm-phitem { position: relative; margin: 0; aspect-ratio: 4 / 3; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--ms-gray-100); cursor: pointer; } .crm-phitem img { display: block; width: 100%; height: 100%; object-fit: cover; } .crm-phitem.is-picked { border-color: var(--ms-primary); } .crm-phitem__tag { position: absolute; top: 4px; right: 4px; padding: 0 5px; border-radius: 4px; background: var(--ms-white); font-size: 10px; } .crm-phitem__check { position: absolute; top: 4px; left: 4px; display: none; width: 18px; height: 18px; border-radius: 4px; background: var(--ms-primary); color: #fff; font-size: 12px; line-height: 18px; text-align: center; } .crm-phitem.is-picked .crm-phitem__check { display: block; } .crm-phitem__zoom { position: absolute; right: 4px; bottom: 4px; display: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: rgb(0 0 0 / 55%); color: #fff; cursor: pointer; } .crm-phitem:hover .crm-phitem__zoom, .crm-phitem.is-picked .crm-phitem__zoom { display: block; } .crm-phup__thumbs { display: flex; flex-wrap: wrap; gap: 6px; } .crm-phup__thumbs img { width: 64px; height: 48px; border-radius: 4px; object-fit: cover; } .crm-penmenu .crm-penpick { right: 0; width: 320px; gap: 8px; padding: 10px; } .crm-penpick__tabs { overflow-x: auto; } .crm-penpick__list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; } .crm-penpick__row { display: flex; align-items: center; gap: 6px; padding: 6px 4px; font-size: 13px; cursor: pointer; } .crm-penpick__row[hidden] { display: none; } .crm-penpick__foot { display: flex; justify-content: flex-end; } /* 모아보기 */ .crm-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #111; color: #fff; } .crm-viewer__top { display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: var(--ms-white); color: var(--ms-gray-800); } .crm-viewer__lay { height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--ms-gray-100); font: inherit; font-size: 12px; cursor: pointer; } .crm-viewer__lay.is-on { background: var(--ms-primary-100); color: var(--ms-primary-700); font-weight: 600; } .crm-viewer__x { width: 32px; height: 32px; border: 0; background: none; font-size: 18px; cursor: pointer; } .crm-viewer__body { display: flex; flex: 1; min-height: 0; } .crm-viewer__side { display: flex; flex: none; flex-direction: column; gap: 6px; width: 120px; padding: 8px; background: var(--ms-white); color: var(--ms-gray-700); overflow-y: auto; } .crm-viewer__thumb { padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; } .crm-viewer__thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; } .crm-viewer__grid { display: grid; flex: 1; gap: 4px; min-width: 0; padding: 4px; } .crm-viewer__slot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; border: 2px solid transparent; background: #000; } .crm-viewer__slot.is-active { border-color: var(--ms-primary); } .crm-viewer__slot img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .15s; } .crm-viewer__meta { position: absolute; left: 8px; bottom: 8px; padding: 6px 8px; border-radius: 6px; background: rgb(0 0 0 / 60%); font-size: 12px; } .crm-viewer__tools { position: absolute; bottom: 24px; left: 50%; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: rgb(40 50 70 / 85%); transform: translateX(-50%); } .crm-viewer__tools button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: #fff; font-size: 15px; cursor: pointer; } .crm-viewer__tools button:hover { background: rgb(255 255 255 / 15%); } .crm-viewer__tools span { min-width: 40px; font-size: 12px; } /* 펜차트 편집기 (새 창) */ body.crm-pen { display: flex; flex-direction: column; height: 100vh; margin: 0; background: var(--ms-gray-200); } .crm-pen__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ms-white); border-bottom: 1px solid var(--ms-gray-300); } .crm-pen__tools { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; } .crm-pen__color { width: 24px; height: 24px; border: 2px solid var(--ms-white); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--ms-gray-300); cursor: pointer; } .crm-pen__color.is-on { box-shadow: 0 0 0 2px var(--ms-primary); } .crm-pen__width { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); cursor: pointer; } .crm-pen__width span { width: 14px; height: var(--w); border-radius: 4px; background: var(--ms-gray-800); } .crm-pen__width.is-on, [data-pen-eraser].is-on { border-color: var(--ms-primary); background: var(--ms-primary-100); } .crm-pen__sep { width: 1px; height: 20px; background: var(--ms-gray-300); } .crm-pen__stage { display: flex; flex: 1; align-items: flex-start; justify-content: center; padding: 16px; overflow: auto; } .crm-pen__canvas { max-width: 100%; background: #fff; box-shadow: 0 2px 12px rgb(0 0 0 / 15%); touch-action: none; cursor: crosshair; } .crm-pen__msg { position: fixed; top: 70px; left: 50%; padding: 10px 16px; border-radius: 8px; background: var(--ms-gray-800); color: #fff; transform: translateX(-50%); } /* 처방전 */ .crm-rxlist__drugs { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } dialog.crm-rxfull { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border-radius: 0; background: var(--ms-white); } dialog.crm-rxfull[open] { display: flex; flex-direction: column; } .crm-rxfull .crm-payfull__head { gap: 10px; } .crm-rxfull .crm-payfull__head .crm-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; } .crm-rxfull__body { display: flex; flex: 1; gap: 24px; min-height: 0; padding: 16px 20px; overflow: hidden; } .crm-rxform { display: flex; flex: 1; flex-direction: column; gap: 14px; min-width: 0; overflow-y: auto; } .crm-rxform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .crm-rxform__kind { width: 100px; flex: none; } .crm-rxitems td { vertical-align: middle; } .crm-rxitems .ms-input--s { width: 64px; height: 30px; padding: 0 8px; } .crm-rxitems td:nth-child(5) .ms-input--s { width: 140px; } .crm-rxitems__name { min-width: 200px; font-size: 13px; } .crm-rxitems .crm-linkbtn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; } .crm-rxadd { position: relative; } .crm-rxadd > .crm-linkbtn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; } .crm-rxpick { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; width: 340px; padding: 10px; border-radius: 8px; background: var(--ms-white); box-shadow: 0 6px 16px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%); } .crm-rxpick[hidden] { display: none; } .crm-rxpick__tabs .crm-seg__opt { padding: 6px 0; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; cursor: pointer; } .crm-rxpick__tabs .crm-seg__opt[aria-selected="true"] { background: var(--ms-white); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); font-weight: 600; } .crm-rxpick__list { max-height: 240px; margin: 0; padding: 0; overflow-y: auto; list-style: none; } .crm-rxpick__list button { width: 100%; padding: 7px 8px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .crm-rxpick__list button:hover { background: rgb(0 0 0 / 4%); } .crm-rxpick__none { padding: 8px; font-size: 13px; } .crm-rxpaper { flex: none; width: 520px; padding: 18px; border: 1px solid var(--ms-gray-400); background: #fff; font-size: 11px; overflow-y: auto; } .crm-rxpaper__title { margin: 0 0 8px; font-size: 20px; letter-spacing: 12px; text-align: center; } .crm-rxpaper__ins { display: flex; gap: 10px; } .crm-rxpaper__no { margin: 4px 0 6px; text-align: right; } .crm-rxpaper__t { width: 100%; margin-bottom: 6px; border-collapse: collapse; } .crm-rxpaper__t th, .crm-rxpaper__t td { height: 20px; padding: 2px 4px; border: 1px solid #555; } .crm-rxpaper__t th { background: #f2f2f2; font-weight: 600; } .crm-rxpaper__drugs td:not(:first-child) { width: 56px; text-align: center; } .crm-rxpaper__foot, .crm-rxpaper__disp { display: flex; gap: 12px; padding: 4px; border: 1px solid #555; margin-bottom: 6px; } @media (max-width: 1100px) { .crm-rxfull__body { flex-direction: column; overflow-y: auto; } .crm-rxpaper { width: auto; } } /* 사진 목록: 출처 묶음도 가로로 이어서 (넘치면 다음 줄) */ .crm-phgroups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; } .crm-phgroup__grid { display: flex; flex-wrap: wrap; gap: 8px; } .crm-phgroup .crm-phitem { flex: none; width: 120px; } /* ── 고객 차트 왼쪽: 초진설문 메뉴 · 고객 상세 정보 보기 · 선불카드 관리하기 ── */ .crm-cbox__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .crm-cbox__head .crm-cbox__title { margin: 0; } .crm-cbox__btn { width: 100%; margin-top: 12px; } .crm-survey-dd { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; white-space: nowrap; } .crm-survey-dd .crm-toolmenu__panel { left: auto; right: 0; min-width: 150px; white-space: nowrap; } .crm-survey-dd .crm-toolmenu__head { padding: 6px 10px 2px; font-size: 11px; color: var(--ms-gray-500); } .crm-ok-text { color: var(--ms-green, #2f9e44); } .crm-svr__sec { margin-top: 16px; } .crm-svr__title { margin: 0 0 8px; font-size: 14px; } .crm-svr .crm-cinfo { grid-template-columns: 180px 1fr; } /* ── 초진설문 (고객 화면, 휴대폰 기준) ── */ .crm-sv { margin: 0; background: var(--ms-white); color: var(--ms-gray-900, #111); } .crm-sv__wrap { max-width: 480px; margin: 0 auto; padding: 10px 24px 40px; } .crm-sv__bar { display: flex; align-items: center; gap: 8px; min-height: 40px; } .crm-sv__back { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; } .crm-sv__who { color: var(--ms-gray-500); font-size: 14px; } .crm-sv__lang { margin-left: auto; width: auto; } .crm-sv__title { margin: 12px 0 6px; font-size: 26px; font-weight: 700; } .crm-sv__desc { margin: 0 0 32px; color: var(--ms-gray-500); font-size: 15px; line-height: 1.5; } .crm-sv__section { margin: 0 0 20px; font-size: 16px; } .crm-sv__q { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .crm-sv__label { font-size: 15px; font-weight: 600; } .crm-sv__err { order: 9; color: var(--ms-red, #e5484d); font-size: 13px; } .crm-sv__err:empty { display: none; } .crm-sv__q.is-error .ms-input { border-color: var(--ms-red, #e5484d); } .crm-sv__q .ms-input { height: 48px; font-size: 15px; } .crm-sv__opts { display: flex; flex-direction: column; gap: 14px; } .crm-sv__opt { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; } .crm-sv__phone { display: grid; grid-template-columns: 120px 1fr; } .crm-sv__phone .crm-sv__dial { border-radius: 8px 0 0 8px; background: var(--ms-gray-50, #f7f7f8); } .crm-sv__phone .ms-input + .ms-input { border-left: 0; border-radius: 0 8px 8px 0; } .crm-sv__next { width: 100%; height: 52px; font-size: 16px; margin-top: 8px; } .crm-sv__end { padding-top: 120px; text-align: center; } .crm-sv__check { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ms-primary); color: #fff; font-size: 28px; } .crm-sv__sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 480px; margin: 0 auto; padding: 28px 24px 24px; border: 0; border-radius: 20px 20px 0 0; } .crm-sv__sheet::backdrop { background: rgb(0 0 0 / 45%); } .crm-sv__sheet-title { margin: 0 0 20px; font-size: 19px; } .crm-sv__terms { display: flex; align-items: center; justify-content: space-between; } .crm-sv__more { border: 0; background: none; font-size: 22px; color: var(--ms-gray-500); cursor: pointer; } .crm-sv__terms-text { margin: 8px 0 0; padding: 12px; border-radius: 8px; background: var(--ms-gray-50, #f7f7f8); color: var(--ms-gray-600); font-size: 13px; line-height: 1.6; } .crm-sv__sheet .crm-sv__next { margin-top: 24px; } /* ── 잔여 선불카드 정보 서랍 (선불카드 관리하기) ── */ dialog.crm-ppd { width: min(1000px, 100vw); display: flex; flex-direction: column; padding: 0; } dialog.crm-ppd:not([open]) { display: none; } .crm-ppd__body { flex: 1; display: grid; grid-template-columns: 340px 1fr; min-height: 0; } .crm-ppd__list { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-right: 1px solid var(--ms-gray-200); overflow: auto; } .crm-ppd__detail { padding: 16px 20px; background: var(--ms-gray-50, #f7f7f8); overflow: auto; display: flex; flex-direction: column; gap: 14px; } .crm-ppd__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; border-radius: 8px; background: var(--ms-gray-50, #f7f7f8); } .crm-ppd__sum > div { display: flex; flex-direction: column; gap: 4px; } .crm-ppd__sum strong { font-size: 16px; } .crm-ppd__sum--detail { background: var(--ms-gray-100, #efeff1); } .crm-ppd__sum small { font-size: 11px; font-weight: 400; } .crm-ppd__tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 8px; background: var(--ms-gray-100, #efeff1); } .crm-ppd__tab { height: 28px; border: 0; border-radius: 6px; background: transparent; font-size: 12px; color: var(--ms-gray-600); cursor: pointer; } .crm-ppd__tab.is-on { background: var(--ms-white); color: var(--ms-black); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); } .crm-ppd__card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 8px; background: none; text-align: left; cursor: pointer; } .crm-ppd__card:hover { background: var(--ms-gray-50, #f7f7f8); } .crm-ppd__card.is-on { border-color: var(--ms-primary); } .crm-ppd__radio { flex: none; width: 14px; height: 14px; border: 1px solid var(--ms-gray-300); border-radius: 50%; } .crm-ppd__card.is-on .crm-ppd__radio { border: 4px solid var(--ms-primary); } .crm-ppd__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 32px; border: 1px solid var(--ms-gray-200); border-radius: 6px; background: var(--ms-gray-50, #f7f7f8); } .crm-ppd__cardtext { display: flex; flex-direction: column; gap: 2px; font-size: 12px; } .crm-ppd__cardtext strong { font-size: 13px; } .crm-ppd__new { align-self: flex-end; color: var(--ms-primary); } .crm-ppd__dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .crm-ppd__name { margin: 0 0 4px; font-size: 16px; } .crm-ppd__box { padding: 14px 16px; border-radius: 8px; background: var(--ms-white); } .crm-ppd__boxhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .crm-ppd__boxhead h4 { margin: 0; font-size: 13px; } .crm-ppd__boxhead .ms-btn--text { color: var(--ms-primary); } .crm-ppd__sharer { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ms-gray-200); font-size: 13px; } .crm-ppd__sname { flex: 1; } .crm-ppd__plus { color: var(--ms-primary); } .crm-ppd__minus { color: var(--ms-red, #e5484d); } .crm-ppd__none { display: flex; flex: 1; align-items: center; justify-content: center; } .crm-ppf__body { display: flex; flex-direction: column; gap: 14px; } .crm-ppf__card { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--ms-gray-200); } .crm-ppf__amount input { text-align: right; } .crm-ppf__unit { padding-left: 8px; border-left: 1px solid var(--ms-gray-200); } .crm-ppf__won { align-self: flex-end; color: var(--ms-primary); } .crm-ppf__won:empty { display: none; } .crm-ppf__period .ms-btn.is-on { border-color: var(--ms-primary); color: var(--ms-primary); background: var(--ms-white); } .crm-ppf__period .ms-input { flex: 1; } .crm-sv__endbtns { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; } .crm-sv__endbtns .crm-sv__next { display: inline-flex; align-items: center; justify-content: center; margin: 0; } /* ── 운영 > 내원 현황 (#kanban): 원본 치수 — 열 가로 400px 고정(가로 스크롤), 흰 열 머리, 구역별 카드 ── */ .crm-board--flow .crm-panel { width: 255px; } #kanban { gap: 8px; padding: 8px; } #kanban .crm-kcol { flex: 0 0 400px; width: 400px; min-width: 400px; overflow: hidden; background: rgb(0 0 0 / 2%); } #kanban .crm-kcol.is-folded { flex-basis: 50px; width: 50px; min-width: 50px; } #kanban .crm-kcol__head { height: 64px; padding: 16px; gap: 8px; border-bottom: 1px solid #f0f0f0; background: var(--ms-white); } #kanban .crm-kcol.is-folded .crm-kcol__head { height: auto; padding: 12px 4px; border-bottom: 0; background: transparent; } #kanban .crm-kcol__head .crm-stage { height: 22px; font-size: 14px; font-weight: 700; } #kanban .crm-kcol__count { font-size: 14px; color: rgb(0 0 0 / 45%); } #kanban .crm-ksort { height: 32px; font-size: 12px; } #kanban .crm-kcol__head .crm-kcol__fold { width: 32px; height: 32px; border: 1px solid #d9d9d9; border-radius: 6px; background: var(--ms-white); } #kanban .crm-kcol__body { padding: 8px 8px 96px; } #kanban .crm-fcard { flex: none; gap: 0; padding: 0; overflow: hidden; border-color: #f0f0f0; } #kanban .crm-fcard.is-selected { border-color: var(--ms-primary); box-shadow: 0 0 0 1px var(--ms-primary); } #kanban .crm-fcard > * { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; } #kanban .crm-fcard > :last-child { border-bottom: 0; } #kanban .crm-fcard__head { gap: 8px; background: #fafafa; } #kanban .crm-fcard__open strong { font-weight: 600; } #kanban .crm-fcard__since { color: rgb(255 77 79); font-size: 12px; } #kanban .crm-gtag { height: 22px; padding: 0 8px; border: 1px solid #e4e4e7; background: #f4f4f5; color: #52525b; font-size: 12px; font-weight: 500; } #kanban .crm-newmark { width: auto; height: 22px; padding: 0 8px; border: 1px solid #fcd480; border-radius: 4px; background: #fff8e6; color: #b7791f; } #kanban .crm-fcard__react { padding: 4px 16px; } #kanban .crm-fcard__sec { padding-top: 12px; border-top: 0; } #kanban .crm-fcard__foot { gap: 0; padding: 0; border-top: 0; } #kanban .crm-fcard__timer { padding: 8px 16px; } #kanban .crm-fcard__staff { padding: 8px 12px; border-top: 1px solid #f0f0f0; } #kanban .crm-fcard__next { display: none; height: 32px; font-size: 14px; font-weight: 400; color: var(--stage, var(--ms-primary-700)); } #kanban .crm-fcard.is-selected .crm-fcard__next { display: block; } #kanban .crm-kcol.is-folded .crm-kcol__head { flex-direction: column; gap: 8px; } #kanban .crm-kcol.is-folded .crm-kcol__head .crm-stage { height: auto; padding: 8px 2px; font-size: 12px; } /* 내원 현황 카드: 머리 태그(국기·성별·신규·고객분류 첫 글자), 수가 유형 고객(초록 머리), 10분 안(회색 경과 시간), 진행할 작업, 타이머 */ .crm-fcard__tags { display: inline-flex; align-items: center; gap: 4px; } .crm-gtag--flag { padding: 0 6px; font-size: 13px; } .crm-ctag { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 8px; border: 1px solid; border-radius: 4px; font-size: 12px; font-weight: 500; } #kanban .crm-fcard.is-feetype .crm-fcard__head { background: oklch(0.988 0.025 128.75); } /* 정상가가 아닌 고객 수가 유형 */ #kanban .crm-fcard.is-fresh .crm-fcard__since { color: rgb(0 0 0 / 45%); } .crm-fcard__works summary { cursor: pointer; } .crm-fcard__timer { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .crm-tbtn, .crm-trun, .crm-thist { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--ms-gray-300); border-radius: 6px; background: var(--ms-white); color: var(--ms-black); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; } .crm-trun { border-color: var(--ms-primary); color: var(--ms-primary-700); } .crm-trun.is-over { border-color: rgb(255 77 79); color: rgb(255 77 79); } .crm-thist { position: relative; cursor: default; } .crm-thist__pop { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; display: none; flex-direction: column; gap: 8px; width: 260px; padding: 12px 14px; border-radius: 8px; background: var(--ms-white); box-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%); font-weight: 400; text-align: left; cursor: default; } .crm-thist:hover .crm-thist__pop, .crm-thist:focus-within .crm-thist__pop { display: flex; } .crm-thist__pop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; } .crm-thist__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--ms-gray-200); } .crm-thist__del { color: var(--ms-red, #e5484d); } .crm-thist__row { display: grid; grid-template-columns: 80px 1fr; gap: 8px; } #kanban .crm-kcol, #kanban .crm-fcard { overflow: visible; } #kanban .crm-fcard__head { border-radius: 8px 8px 0 0; } /* 타이머 창 (카드 옆에 뜨는 dialog[data-tpop]) */ dialog.crm-tpop { position: fixed; inset: auto; z-index: 60; width: 418px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); margin: 0; padding: 0; overflow: auto; border: 0; border-radius: 8px; background: var(--ms-white); box-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%); } .crm-tpop__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; } .crm-tpop__title { margin: 0; font-size: 14px; font-weight: 600; } .crm-tpop__who { display: flex; align-items: baseline; gap: 6px; padding: 14px 16px 0; font-size: 13px; } .crm-tpop__set { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid #f0f0f0; } .crm-tpop__presets { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; } .crm-tpop__presets > span { display: contents; } .crm-tpop__chip { height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--ms-gray-100, #f4f4f5); font: inherit; font-size: 12px; cursor: pointer; } .crm-tpop__chip.is-on { background: var(--ms-primary-100); color: var(--ms-primary-700); } .crm-tpop__clock { display: flex; align-items: center; gap: 16px; } .crm-tpop__step { width: 32px; height: 32px; border: 1px solid #d9d9d9; border-radius: 6px; background: var(--ms-white); font-size: 18px; cursor: pointer; } .crm-tpop__time { width: 120px; border: 0; background: none; font: inherit; font-size: 32px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .crm-tpop__time:focus { outline: 2px solid var(--ms-primary-100); border-radius: 6px; } .crm-tpop__quick { display: flex; gap: 6px; } .crm-tpop__quick .is-on { border-color: var(--ms-primary); background: var(--ms-primary-100); color: var(--ms-primary-700); } .crm-tpop__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .crm-tpop__table { max-height: 260px; overflow: auto; } .crm-tpop__table td, .crm-tpop__table th { font-size: 12px; } .crm-tpop__chk { width: 32px; } .crm-tpop__group td { background: var(--ms-gray-50, #f7f7f8); font-weight: 600; } .crm-tpop__room td { padding-left: 40px; color: var(--ms-gray-600); } .crm-tpop__empty { display: flex; align-items: center; justify-content: center; min-height: 160px; border: 1px solid #f0f0f0; border-radius: 8px; color: var(--ms-gray-500); font-size: 12px; } .crm-tpop__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #f0f0f0; } .crm-tpop__foot--between { justify-content: space-between; padding: 12px 0 0; } .crm-tpop__presetedit { display: flex; flex-direction: column; gap: 10px; padding: 16px; } .crm-tpop__prows { display: flex; flex-direction: column; gap: 8px; } .crm-tpop__prow { display: grid; grid-template-columns: 1fr 96px 28px; align-items: center; gap: 8px; } .crm-tpop__pmin input { text-align: right; } .crm-tpop__bar { height: 4px; background: var(--ms-gray-100, #f4f4f5); } .crm-tpop__bar span { display: block; height: 100%; background: var(--ms-primary); transition: width .3s linear; } .crm-tpop--run.is-over .crm-tpop__bar span { background: rgb(255 77 79); } .crm-tpop__run { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; } .crm-tpop__runtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .crm-tpop__count { color: var(--ms-primary-700); font-size: 22px; font-variant-numeric: tabular-nums; } .crm-tpop--run.is-over .crm-tpop__count, .crm-tpop--run.is-over [data-trun-elapsed] { color: rgb(255 77 79); } .crm-tpop__info { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 0; padding: 14px 16px 0; font-size: 12px; } .crm-tpop__info dt { color: var(--ms-gray-500); } .crm-tpop__info dd { margin: 0; } .crm-tpop__items { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; } .crm-tpop__items ul { margin: 0; padding: 8px 12px; border-radius: 6px; background: var(--ms-gray-50, #f7f7f8); list-style: none; font-size: 12px; } .crm-tpop__items li { padding: 2px 0 2px 8px; border-left: 2px solid var(--ms-gray-300); } .crm-tpop__cancel { color: rgb(255 77 79); } /* 상태 변경에 필요한 칸 강조 (app.js crm:focus) */ @keyframes crm-attn { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 77 79 / 0%); } 20%, 70% { box-shadow: 0 0 0 3px rgb(255 77 79 / 45%); } } .crm-attn { border-color: rgb(255 77 79) !important; animation: crm-attn 1.2s ease-in-out 2; } /* 확인창 (원본 모양): 왼쪽 경고 아이콘 + 굵은 제목, 아래 내용, 오른쪽 아래 버튼 — 머리줄·구분선 없음 */ dialog.crm-confirm { width: 416px; max-width: calc(100vw - 32px); padding: 20px 24px; border-radius: 8px; } .crm-confirm__body { display: flex; gap: 12px; } .crm-confirm__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #faad14; color: #fff; font-size: 14px; font-weight: 700; } .crm-confirm__main { flex: 1; min-width: 0; } .crm-confirm__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.5; } .crm-confirm__content { color: rgb(0 0 0 / 88%); font-size: 14px; line-height: 1.57; } .crm-confirm__content p { margin: 0; } .crm-confirm__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .crm-stc { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding-left: 20px; } .crm-stc__opt { display: grid; grid-template-columns: 56px 1fr; gap: 8px; margin-top: 2px; font-size: 12px; } /* 내원 현황 열 머리 정렬 칸: 글자를 조금 작게, 칸은 조금 넓게 (가장 긴 '귀가 희망 시각 빠른 순'까지 다 보이게) */ #kanban .crm-sel.crm-ksort { flex: none; width: 176px; min-width: 176px; font-size: 12px; } #kanban .crm-sel.crm-ksort .crm-sel__value { overflow: visible; text-overflow: clip; } .crm-btn-solid-danger { border-color: rgb(255 77 79); background: rgb(255 77 79); color: #fff; } .crm-btn-solid-danger:hover { background: rgb(255 120 117); } dialog.crm-confirm--wide { width: 520px; } tr.crm-attn > td { background: rgb(255 77 79 / 8%); } .crm-tcell.is-off { color: var(--ms-gray-400, #a1a1aa); cursor: not-allowed; } /* 담당자·집도의 선택 창 (원본 모양): 여러 명 선택 — 왼쪽 목록 + 오른쪽 '선택됨', 482px */ dialog.crm-ppick { width: 240px; } dialog.crm-ppick.is-multi { width: 482px; } .crm-ppick .crm-tpop__head { padding: 12px 14px; } .crm-ppick__wrap { display: flex; height: 360px; } .crm-ppick__left { display: flex; flex-direction: column; flex: 0 0 240px; min-width: 0; } .crm-ppick__search { margin: 10px 12px 6px; } .crm-ppick__list { flex: 1; overflow-y: auto; padding: 0 4px 8px; } .crm-ppick__group { display: flex; flex-direction: column; } .crm-ppick__group.is-empty { display: none; } .crm-ppick__gtitle { padding: 8px 8px 4px; color: var(--ms-gray-500); font-size: 11px; } .crm-ppick__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .crm-ppick__item:hover { background: var(--ms-gray-50, #f7f7f8); } .crm-ppick__item.is-on { background: rgb(230 244 255); } .crm-ppick__item.is-on .crm-ppick__name { color: var(--ms-primary-700); font-weight: 600; } .crm-ppick__item[hidden] { display: none; } .crm-ppick__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: hsl(var(--hue) 55% 55%); color: #fff; font-size: 11px; font-weight: 600; } .crm-ppick__name { white-space: nowrap; } .crm-ppick__role { overflow: hidden; color: var(--ms-gray-500); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .crm-ppick__none { padding: 16px; color: var(--ms-gray-500); font-size: 12px; text-align: center; } .crm-ppick__right { flex: 1; min-width: 0; padding: 8px 4px; overflow-y: auto; border-left: 1px solid #f0f0f0; background: var(--ms-gray-50, #fafafa); } .crm-ppick__right [data-ppick-chosen] { display: flex; flex-direction: column; padding: 0 4px; } .crm-ppick__right .ms-t-caption { padding: 8px; } .crm-ppick__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid #f0f0f0; } /* 마취·우선순위·방 선택 창 */ dialog.crm-cpick { width: 200px; } .crm-cpick__list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; padding: 4px; } .crm-cpick__foot { justify-content: flex-end; } dialog.crm-taskbar:focus, dialog.crm-taskbar:focus-visible { outline: none; } .crm-ttable tr.is-done .crm-ttable__name strong { color: var(--ms-gray-500); text-decoration: line-through; } /* 완료된 시술 (원본) */ .crm-taskbar__btn[hidden], .crm-taskbar__sep[hidden] { display: none; }