@charset "utf-8";

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/PretendardVariable.woff2') format('woff2');
}

/*
 * CareBridge design tokens
 * Figma 완료 페이지(96:4842)의 반복 색상, 선, 그림자, 모서리,
 * 간격과 타이포 값을 한 곳에서 관리한다.
 */
:root {
	/* Brand */
	--cb-color-primary: #6688ff;
	--cb-color-primary-hover: #5378f7;
	--cb-color-primary-hover: #6688ff;
	--cb-color-primary-strong: #3d51ff;
	--cb-color-primary-text: #4e76ff;
	--cb-color-primary-soft: #f5f6ff;
	--cb-color-primary-label: #ebeeff;

	/* Semantic */
	--cb-color-error: #ed1313;
	--cb-color-agreement: #ff7c33;
	--cb-color-partner: #ff6738;
	--cb-color-partner-soft: rgba(255, 103, 56, 0.1);
	--cb-color-discount: #008939;
	--cb-color-discount-soft: rgba(0, 137, 57, 0.1);

	/* Neutral */
	--cb-color-text: #131313;
	--cb-color-text-checkbox: #111111;
	--cb-color-text-strong: #272a33;
	--cb-color-text-body: #454545;
	--cb-color-text-secondary-strong: #48484a;
	--cb-color-text-secondary: #5a5a5a;
	--cb-color-text-muted: #828387;
	--cb-color-placeholder: #8e8e8e;
	--cb-color-disabled-text: #bbbec2;
	--cb-color-disabled-surface: #f6f6f6;
	--cb-color-divider: #bbbbbb;
	--cb-color-icon-muted: #cacdcf;
	--cb-color-button-subtle: #ecedee;
	--cb-color-border: #e3e3e4;
	--cb-color-border-subtle: rgba(0, 0, 0, 0.08);
	--cb-color-black: #000000;
	--cb-color-white: #ffffff;
	--cb-color-surface: #ffffff;
	--cb-color-page: #f7f7f8;
	--cb-color-container: #F5F6FF;

	/* Border */
	--cb-border-width: 1px;
	--cb-border-style: solid;
	--cb-border-default: var(--cb-border-width) var(--cb-border-style) var(--cb-color-border);
	--cb-border-primary: var(--cb-border-width) var(--cb-border-style) var(--cb-color-primary);
	--cb-border-error: var(--cb-border-width) var(--cb-border-style) var(--cb-color-error);
	--cb-border-subtle: var(--cb-border-width) var(--cb-border-style) var(--cb-color-border-subtle);

	/* Radius */
	--cb-radius-2: 2px;
	--cb-radius-4: 4px;
	--cb-radius-6: 6px;
	--cb-radius-8: 8px;
	--cb-radius-12: 12px;
	--cb-radius-pill: 999px;

	/* Shadow */
	--cb-shadow-container: 0 0 8px rgba(0, 0, 0, 0.04);
	--cb-shadow-card: 0 3px 16px rgba(0, 0, 0, 0.02);
	--cb-shadow-panel: 0 0 16px rgba(0, 0, 0, 0.04), 0 3px 16px rgba(0, 0, 0, 0.02);
	--cb-shadow-banner: 0 2px 10px rgba(0, 0, 0, 0.12);

	/* Spacing */
	--cb-space-3: 3px;
	--cb-space-4: 4px;
	--cb-space-5: 5px;
	--cb-space-6: 6px;
	--cb-space-7: 7px;
	--cb-space-8: 8px;
	--cb-space-9: 9px;
	--cb-space-10: 10px;
	--cb-space-12: 12px;
	--cb-space-16: 16px;
	--cb-space-17: 17px;
	--cb-space-18: 18px;
	--cb-space-20: 20px;
	--cb-space-22: 22px;
	--cb-space-24: 24px;
	--cb-space-30: 30px;
	--cb-space-32: 32px;
	--cb-space-35: 35px;
	--cb-space-36: 36px;

	/* Typography */
	--cb-font-family: 'Pretendard', system-ui;
	--cb-font-size-10: 10px;
	--cb-font-size-11: 11px;
	--cb-font-size-12: 12px;
	--cb-font-size-13: 13px;
	--cb-font-size-14: 14px;
	--cb-font-size-15: 15px;
	--cb-font-size-16: 16px;
	--cb-font-size-20: 20px;
	--cb-font-size-21: 21px;
	--cb-font-size-24: 24px;
	--cb-font-size-28: 28px;
	--cb-font-size-32: 32px;

	/* Layout and controls */
	--cb-layout-max-width: 600px;
	--cb-header-height: 48px;
	--cb-control-height-sm: 32px;
	--cb-control-height-md: 38px;
	--cb-input-height: 39px;
	--cb-checkbox-size: 18px;
	--cb-card-height: 100px;
	--cb-card-height-sm: 80px;
}

.carebridge-main,
.carebridge-main button,
.carebridge-main input,
.carebridge-main textarea,
.carebridge-main select,
.carebridge-main table {
	font-family: var(--cb-font-family);
}

/* Reusable UI primitives */
.cb-card {
	border-radius: var(--cb-radius-12);
	background: var(--cb-color-surface);
	box-shadow: var(--cb-shadow-panel);
}

.cb-field {
	display: block;
	width: 100%;
	height: var(--cb-input-height);
	padding: 0 var(--cb-space-10);
	border: var(--cb-border-default);
	border-radius: var(--cb-radius-4);
	background: var(--cb-color-surface);
	font-size: var(--cb-font-size-14);
	color: var(--cb-color-text);
}

.cb-field::placeholder {
	color: var(--cb-color-placeholder);
	opacity: 1;
}

.cb-field.is-error {
	border: var(--cb-border-error);
}

.cb-field:focus {
	outline: none;
	border: var(--cb-border-default);
	background: var(--cb-color-primary-soft);
}

.cb-field:disabled {
	border: var(--cb-border-default);
	background: var(--cb-color-disabled-surface);
}

/*
 * Chrome 비밀번호 관리자/자동완성의 기본 배경색을 제거한다.
 * 자동입력 후에도 일반 입력 필드와 같은 흰색 상태를 유지한다.
 */
.cb-field:-webkit-autofill,
.cb-field:-webkit-autofill:hover {
	-webkit-text-fill-color: var(--cb-color-text);
	-webkit-box-shadow: 0 0 0 1000px var(--cb-color-surface) inset;
	box-shadow: 0 0 0 1000px var(--cb-color-surface) inset;
	transition: background-color 9999s ease-out 0s;
}

.cb-field:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--cb-color-primary-soft) inset;
	box-shadow: 0 0 0 1000px var(--cb-color-primary-soft) inset;
}

.cb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--cb-control-height-md);
	padding: 0 var(--cb-space-20);
	border: var(--cb-border-primary);
	border-radius: var(--cb-radius-4);
	font-size: var(--cb-font-size-15);
	font-weight: 600;
}

.cb-button--primary {
	background: var(--cb-color-primary);
	color: var(--cb-color-white);
}

.cb-button:not(:disabled):not(.cb-button--disabled):not(.cb-button--outline):hover {
	border-color: var(--cb-color-primary-hover);
	background: var(--cb-color-primary-hover);
}

.cb-button--outline {
	background: var(--cb-color-surface);
	color: var(--cb-color-primary);
}

.cb-button--disabled {
	border-color: var(--cb-color-border);
	background: var(--cb-color-border);
	color: var(--cb-color-disabled-text);
}

.cb-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--cb-space-4) var(--cb-space-12);
	border-radius: var(--cb-radius-pill);
	font-size: var(--cb-font-size-13);
}

.cb-divider {
	border: 0;
	border-top: var(--cb-border-subtle);
}