@charset "utf-8";

/* ==========================================================================
   Color: Base   (스타일 설정 → 컬러)
   COLOR ONLY — layout lives in css/theme.css. Our components read these vars.
   foreground / background are derived from the primary's hue:
     foreground = hsl(H, 100%, 6.9%)   background = hsl(H, 100%, 99.4%)   (neutral for greys)
     deep = foreground x 0.58 (≈ hsl(H, 100%, 4%)) — darkest shade, for large dark areas (footer)
   ========================================================================== */
:root {
	--web-primary: #34c76a;
	--web-primary-hover: #2bb85f;
	--web-primary-foreground: #00230d;
	--web-primary-deep: #001408;
	--web-background: #fcfffd;
}

body {
	background-color: var(--web-background);
}

/* ---------------------------------------------------------- */
/* Bootstrap "primary" → --web-primary                        */
/* ---------------------------------------------------------- */

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.page-item.active .page-link,
.show > .btn-outline-primary.dropdown-toggle,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
	background-color: var(--web-primary) !important;
	border-color: var(--web-primary) !important;
}

hr.hr::after,
.dropdown-item.active,
.dropdown-item:active,
.bg-primary {
	background-color: var(--web-primary) !important;
}

.border-primary {
	border-color: var(--web-primary) !important;
}

.text-primary,
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
	color: var(--web-primary) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover {
	background-color: var(--web-primary-hover) !important;
	border-color: var(--web-primary-hover) !important;
}

.btn-outline-primary {
	color: var(--web-primary-hover) !important;
	border-color: var(--web-primary-hover) !important;
}

.btn-outline-primary:hover {
	color: #fff !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
	background-color: var(--web-primary-hover) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--web-primary) 50%, transparent) !important;
}