/* ==========================================================================
   components.css — 버튼 / 배지 / 카드 / 칩 / 필터 / 표 / 폼 / 콜아웃
   ========================================================================== */

/* ── 버튼 ─────────────────────────────────────────── */

.rl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rl-space-2);
	min-height: 40px;
	padding: var(--rl-space-2) var(--rl-space-4);
	border: 1px solid transparent;
	border-radius: var(--rl-radius-md);
	font-size: var(--rl-text-base);
	font-weight: var(--rl-weight-semibold);
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--rl-duration) var(--rl-ease),
		border-color var(--rl-duration) var(--rl-ease),
		color var(--rl-duration) var(--rl-ease),
		transform var(--rl-duration-fast) var(--rl-ease);
}

.rl-btn:active {
	transform: translateY(1px);
}

.rl-btn--primary {
	background: var(--rl-accent);
	color: var(--rl-gray-0);
}

.rl-btn--primary:hover {
	background: var(--rl-accent-hover);
	color: var(--rl-gray-0);
}

.rl-btn--ghost {
	background: var(--rl-bg);
	border-color: var(--rl-border);
	color: var(--rl-text);
}

.rl-btn--ghost:hover {
	background: var(--rl-surface);
	border-color: var(--rl-border-strong);
	color: var(--rl-text-strong);
}

.rl-btn--dark {
	background: var(--rl-inverse);
	color: var(--rl-bg);
}

.rl-btn--sm {
	min-height: 34px;
	padding: var(--rl-space-1) var(--rl-space-3);
	font-size: var(--rl-text-sm);
}

.rl-btn--lg {
	min-height: 50px;
	padding: var(--rl-space-3) var(--rl-space-6);
	font-size: var(--rl-text-md);
}

.rl-btn--full {
	width: 100%;
}

.rl-btn[disabled],
.rl-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ── 배지 (분양 상태) ─────────────────────────────── */

.rl-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--rl-space-2);
	border-radius: var(--rl-radius-sm);
	font-size: var(--rl-text-xs);
	font-weight: var(--rl-weight-semibold);
	letter-spacing: var(--rl-ls-wide);
	background: var(--rl-surface-2);
	color: var(--rl-text-muted);
	white-space: nowrap;
}

.rl-badge--upcoming  { background: var(--rl-status-upcoming-bg);  color: var(--rl-status-upcoming-fg); }
.rl-badge--accepting { background: var(--rl-status-accepting-bg); color: var(--rl-status-accepting-fg); }
.rl-badge--selling   { background: var(--rl-status-selling-bg);   color: var(--rl-status-selling-fg); }
.rl-badge--pickup    { background: var(--rl-status-pickup-bg);    color: var(--rl-status-pickup-fg); }
.rl-badge--closed    { background: var(--rl-status-closed-bg);    color: var(--rl-status-closed-fg); }

/* ── 칩 (필터·분류) ──────────────────────────────── */

.rl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-2);
}

.rl-chips--tabs {
	margin-bottom: var(--rl-space-8);
	padding-bottom: var(--rl-space-3);
	border-bottom: 1px solid var(--rl-border);
	overflow-x: auto;
	flex-wrap: nowrap;
	scrollbar-width: none;
}

.rl-chips--tabs::-webkit-scrollbar {
	display: none;
}

.rl-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-space-1);
	padding: var(--rl-space-2) var(--rl-space-3);
	border: 1px solid var(--rl-border);
	border-radius: var(--rl-radius-round);
	background: var(--rl-bg);
	color: var(--rl-text-muted);
	font-size: var(--rl-text-sm);
	font-weight: var(--rl-weight-medium);
	white-space: nowrap;
	transition: background var(--rl-duration) var(--rl-ease),
		border-color var(--rl-duration) var(--rl-ease),
		color var(--rl-duration) var(--rl-ease);
}

.rl-chip:hover {
	background: var(--rl-surface);
	border-color: var(--rl-border-strong);
	color: var(--rl-text-strong);
}

.rl-chip.is-active {
	background: var(--rl-inverse);
	border-color: var(--rl-inverse);
	color: var(--rl-bg);
}

.rl-chip--muted {
	opacity: 0.55;
}

.rl-chip__count {
	padding: 0 5px;
	border-radius: var(--rl-radius-round);
	background: var(--rl-surface-2);
	color: var(--rl-text-subtle);
	font-size: 0.6875rem;
	font-weight: var(--rl-weight-semibold);
}

.rl-chip.is-active .rl-chip__count {
	background: color-mix(in srgb, var(--rl-bg) 25%, transparent);
	color: var(--rl-bg);
}

.rl-chip--guide { background: var(--rl-green-50); border-color: transparent; color: var(--rl-green-700); }
.rl-chip--news  { background: var(--rl-amber-50); border-color: transparent; color: var(--rl-amber-700); }

/* 태그 (#역세권) */
.rl-tag {
	display: inline-flex;
	padding: 2px var(--rl-space-2);
	border-radius: var(--rl-radius-sm);
	background: var(--rl-surface);
	color: var(--rl-text-subtle);
	font-size: var(--rl-text-xs);
	font-weight: var(--rl-weight-medium);
}

/* 해제 가능한 필터 알약 */
.rl-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-space-2);
	padding: var(--rl-space-1) var(--rl-space-3);
	border-radius: var(--rl-radius-round);
	background: var(--rl-accent-soft);
	color: var(--rl-accent-strong);
	font-size: var(--rl-text-sm);
	font-weight: var(--rl-weight-semibold);
}

.rl-pill:hover {
	background: var(--rl-accent);
	color: var(--rl-gray-0);
}

/* ── 카드 (공통) ──────────────────────────────────── */

.rl-card {
	position: relative;
	background: var(--rl-bg);
	border: 1px solid var(--rl-border);
	border-radius: var(--rl-radius-lg);
	overflow: hidden;
	transition: transform var(--rl-duration) var(--rl-ease),
		box-shadow var(--rl-duration) var(--rl-ease),
		border-color var(--rl-duration) var(--rl-ease);
}

.rl-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--rl-shadow);
	border-color: var(--rl-border-strong);
}

.rl-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

.rl-card__link:hover {
	color: inherit;
}

.rl-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--rl-surface);
	overflow: hidden;
}

.rl-card__media--wide {
	aspect-ratio: 16 / 9;
}

.rl-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--rl-duration-slow) var(--rl-ease-out);
}

.rl-card:hover .rl-card__img {
	transform: scale(1.03);
}

.rl-card__img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rl-surface-2);
	color: var(--rl-text-subtle);
	font-size: var(--rl-text-sm);
}

.rl-card__badge {
	position: absolute;
	top: var(--rl-space-3);
	left: var(--rl-space-3);
	box-shadow: var(--rl-shadow-sm);
}

.rl-card__dday {
	position: absolute;
	top: var(--rl-space-3);
	right: var(--rl-space-3);
	padding: 3px var(--rl-space-2);
	border-radius: var(--rl-radius-sm);
	background: color-mix(in srgb, var(--rl-gray-950) 78%, transparent);
	color: var(--rl-gray-0);
	font-size: var(--rl-text-xs);
	font-weight: var(--rl-weight-bold);
	letter-spacing: var(--rl-ls-wide);
}

.rl-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--rl-space-1);
	flex: 1;
	padding: var(--rl-space-4);
}

.rl-card__region {
	font-size: var(--rl-text-xs);
	color: var(--rl-text-subtle);
	font-weight: var(--rl-weight-medium);
}

.rl-card__title {
	font-size: var(--rl-text-lg);
	font-weight: var(--rl-weight-bold);
	line-height: var(--rl-lh-snug);
	color: var(--rl-text-strong);
	/* 두 줄로 제한 — 카드 높이가 들쭉날쭉하면 그리드가 지저분해진다. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rl-card__builder {
	font-size: var(--rl-text-sm);
	color: var(--rl-text-muted);
}

.rl-card__price {
	margin-top: var(--rl-space-2);
	font-size: var(--rl-text-md);
	font-weight: var(--rl-weight-bold);
	color: var(--rl-accent);
	letter-spacing: -0.01em;
}

.rl-card__excerpt {
	margin-top: var(--rl-space-2);
	font-size: var(--rl-text-base);
	line-height: var(--rl-lh-normal);
	color: var(--rl-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rl-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-4);
	margin-top: auto;
	padding-top: var(--rl-space-4);
	border-top: 1px solid var(--rl-border-subtle);
}

.rl-card__meta-item dt {
	font-size: 0.6875rem;
	color: var(--rl-text-subtle);
	margin-bottom: 1px;
}

.rl-card__meta-item dd {
	margin: 0;
	font-size: var(--rl-text-sm);
	font-weight: var(--rl-weight-semibold);
	color: var(--rl-text);
}

.rl-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-1);
	margin-top: var(--rl-space-3);
}

.rl-card__eyebrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-space-2);
	margin-bottom: var(--rl-space-2);
	font-size: var(--rl-text-xs);
	color: var(--rl-text-subtle);
}

/* 텍스트형 카드 (썸네일 없음) */
.rl-card--text .rl-card__body {
	padding: var(--rl-space-5);
}

/* ── 표 ───────────────────────────────────────────── */

.rl-table {
	border: 1px solid var(--rl-border);
	border-radius: var(--rl-radius);
	overflow: hidden;
	font-size: var(--rl-text-base);
}

.rl-table th,
.rl-table td {
	padding: var(--rl-space-3) var(--rl-space-4);
	border-bottom: 1px solid var(--rl-border-subtle);
	text-align: left;
	vertical-align: top;
}

.rl-table th {
	width: 30%;
	min-width: 100px;
	background: var(--rl-surface);
	color: var(--rl-text-muted);
	font-weight: var(--rl-weight-medium);
	font-size: var(--rl-text-sm);
}

.rl-table td {
	color: var(--rl-text-strong);
	font-weight: var(--rl-weight-medium);
}

.rl-table tr:last-child th,
.rl-table tr:last-child td {
	border-bottom: 0;
}

/* ── 콜아웃 ───────────────────────────────────────── */

.rl-callout {
	display: flex;
	gap: var(--rl-space-3);
	padding: var(--rl-space-4) var(--rl-space-5);
	margin-block: var(--rl-space-6);
	background: var(--rl-surface);
	border: 1px solid var(--rl-border);
	border-radius: var(--rl-radius-md);
}

.rl-callout__icon {
	font-size: 1.125rem;
	line-height: 1.5;
	flex-shrink: 0;
}

.rl-callout__content {
	flex: 1;
	min-width: 0;
	font-size: var(--rl-text-base);
	line-height: var(--rl-lh-normal);
	color: var(--rl-text-muted);
}

.rl-callout__content p + p {
	margin-top: var(--rl-space-2);
}

.rl-callout__content strong {
	color: var(--rl-text-strong);
	font-weight: var(--rl-weight-semibold);
}

.rl-callout__content code {
	padding: 1px 4px;
	border-radius: var(--rl-radius-sm);
	background: var(--rl-surface-2);
}

.rl-callout__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-4);
}

.rl-callout--tip {
	background: var(--rl-accent-faint);
	border-color: var(--rl-accent-soft);
}

.rl-callout--warn {
	background: var(--rl-amber-50);
	border-color: var(--rl-amber-100);
}

.rl-callout--warn .rl-callout__content {
	color: var(--rl-amber-700);
}

.rl-callout--warn .rl-callout__content strong {
	color: var(--rl-amber-700);
}

/* ── 필터바 ───────────────────────────────────────── */

.rl-filterbar {
	display: flex;
	flex-direction: column;
	gap: var(--rl-space-4);
	padding: var(--rl-space-5);
	margin-bottom: var(--rl-space-8);
	background: var(--rl-bg-subtle);
	border: 1px solid var(--rl-border-subtle);
	border-radius: var(--rl-radius-lg);
}

.rl-filterbar__row {
	display: flex;
	align-items: center;
	gap: var(--rl-space-4);
	flex-wrap: wrap;
}

.rl-filterbar__label {
	flex-shrink: 0;
	width: 40px;
	font-size: var(--rl-text-sm);
	font-weight: var(--rl-weight-semibold);
	color: var(--rl-text-subtle);
}

.rl-filterbar__row--tools {
	justify-content: space-between;
	padding-top: var(--rl-space-4);
	border-top: 1px solid var(--rl-border-subtle);
}

.rl-filterbar__selects {
	display: flex;
	gap: var(--rl-space-2);
	flex-wrap: wrap;
}

.rl-filterbar__search {
	display: flex;
	gap: var(--rl-space-2);
	flex: 1;
	min-width: 240px;
	max-width: 420px;
}

.rl-filterbar__active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--rl-space-2);
	padding-top: var(--rl-space-3);
	border-top: 1px dashed var(--rl-border);
}

.rl-filterbar__reset {
	margin-left: var(--rl-space-2);
	font-size: var(--rl-text-sm);
	color: var(--rl-text-subtle);
	text-decoration: underline;
}

/* ── 폼 요소 ──────────────────────────────────────── */

.rl-select,
.rl-form__input,
.rl-searchform input[type="search"],
.rl-filterbar__search input[type="search"],
.rl-hero__search input[type="search"] {
	width: 100%;
	min-height: 40px;
	padding: var(--rl-space-2) var(--rl-space-3);
	background: var(--rl-bg);
	border: 1px solid var(--rl-border);
	border-radius: var(--rl-radius-md);
	color: var(--rl-text);
	font-size: var(--rl-text-base);
	transition: border-color var(--rl-duration) var(--rl-ease),
		box-shadow var(--rl-duration) var(--rl-ease);
}

.rl-select {
	width: auto;
	min-width: 130px;
	padding-right: var(--rl-space-6);
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 14px center, right 9px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.rl-select:focus,
.rl-form__input:focus,
input[type="search"]:focus {
	outline: none;
	border-color: var(--rl-accent);
	box-shadow: 0 0 0 3px var(--rl-accent-soft);
}

.rl-searchform {
	display: flex;
	gap: var(--rl-space-2);
	max-width: 480px;
	margin-block: var(--rl-space-6);
}

/* 상담 폼 */
.rl-form {
	display: flex;
	flex-direction: column;
	gap: var(--rl-space-4);
}

.rl-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--rl-space-2);
}

.rl-form__label {
	font-size: var(--rl-text-sm);
	font-weight: var(--rl-weight-semibold);
	color: var(--rl-text);
}

.rl-form__label span {
	color: var(--rl-red-500);
}

.rl-form__input {
	min-height: 46px;
}

textarea.rl-form__input {
	min-height: auto;
	resize: vertical;
	line-height: var(--rl-lh-normal);
}

/* 허니팟은 화면에서 완전히 감춘다 (display:none 은 일부 봇이 감지하므로 위치로 숨김) */
.rl-form__honey {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rl-form__consent {
	font-size: var(--rl-text-sm);
	color: var(--rl-text-muted);
}

.rl-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--rl-space-2);
	cursor: pointer;
}

.rl-form__status {
	min-height: 1.4em;
	font-size: var(--rl-text-sm);
	font-weight: var(--rl-weight-medium);
	text-align: center;
}

.rl-form__status.is-error {
	color: var(--rl-red-700);
}

.rl-form__status.is-success {
	color: var(--rl-green-700);
}

/* ── 빈 상태 ──────────────────────────────────────── */

.rl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rl-space-3);
	padding: var(--rl-space-16) var(--rl-space-5);
	text-align: center;
	background: var(--rl-bg-subtle);
	border: 1px dashed var(--rl-border);
	border-radius: var(--rl-radius-lg);
}

.rl-empty__code {
	font-size: var(--rl-text-4xl);
	font-weight: var(--rl-weight-bold);
	color: var(--rl-border-strong);
	letter-spacing: 0.05em;
}

.rl-empty__title {
	font-size: var(--rl-text-xl);
	font-weight: var(--rl-weight-bold);
	color: var(--rl-text-strong);
}

.rl-empty__desc {
	max-width: 46ch;
	color: var(--rl-text-muted);
	font-size: var(--rl-text-base);
}

.rl-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-3);
	margin-top: var(--rl-space-2);
}

.rl-empty__regions {
	margin-top: var(--rl-space-6);
}

.rl-empty__regions-label {
	margin-bottom: var(--rl-space-3);
	font-size: var(--rl-text-sm);
	color: var(--rl-text-subtle);
}

.rl-notice {
	padding: var(--rl-space-4);
	background: var(--rl-amber-50);
	border: 1px solid var(--rl-amber-100);
	border-radius: var(--rl-radius);
	color: var(--rl-amber-700);
	font-size: var(--rl-text-base);
}

/* ── 페이지네이션 ─────────────────────────────────── */

.rl-pagination {
	margin-top: var(--rl-space-12);
}

.rl-pagination ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--rl-space-2);
}

.rl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--rl-space-3);
	border: 1px solid var(--rl-border);
	border-radius: var(--rl-radius);
	background: var(--rl-bg);
	color: var(--rl-text-muted);
	font-size: var(--rl-text-base);
	font-weight: var(--rl-weight-medium);
}

.rl-pagination .page-numbers:hover {
	background: var(--rl-surface);
	color: var(--rl-text-strong);
}

.rl-pagination .page-numbers.current {
	background: var(--rl-inverse);
	border-color: var(--rl-inverse);
	color: var(--rl-bg);
}

.rl-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}


/* ══════════════════════════════════════════════════
   카드 색 테마 (Notion 팔레트 방식)
   ══════════════════════════════════════════════════

   Notion 최신 홈은 벤토 카드마다 팔레트를 붙인다
   (<article class="... yellow_palette_theme">).
   같은 원리를 클래스 하나로 옮긴 것 — 이 클래스가 하는 일은
   --rl-c-tint / --rl-c-base / --rl-c-deep 세 변수를 덮어쓰는 것뿐이고,
   실제 카드 스타일(.rl-region-card, .rl-bento__card)은 그 변수만 참조한다.

   덕분에 "무슨 색인가"와 "어떻게 생겼나"가 분리된다.
   새 색을 추가하려면 여기에 3줄만 더하면 된다. */

.rl-theme-blue   { --rl-c-tint: var(--rl-hue-blue-tint);   --rl-c-base: var(--rl-hue-blue-base);   --rl-c-deep: var(--rl-hue-blue-deep); }
.rl-theme-green  { --rl-c-tint: var(--rl-hue-green-tint);  --rl-c-base: var(--rl-hue-green-base);  --rl-c-deep: var(--rl-hue-green-deep); }
.rl-theme-amber  { --rl-c-tint: var(--rl-hue-amber-tint);  --rl-c-base: var(--rl-hue-amber-base);  --rl-c-deep: var(--rl-hue-amber-deep); }
.rl-theme-orange { --rl-c-tint: var(--rl-hue-orange-tint); --rl-c-base: var(--rl-hue-orange-base); --rl-c-deep: var(--rl-hue-orange-deep); }
.rl-theme-red    { --rl-c-tint: var(--rl-hue-red-tint);    --rl-c-base: var(--rl-hue-red-base);    --rl-c-deep: var(--rl-hue-red-deep); }
.rl-theme-pink   { --rl-c-tint: var(--rl-hue-pink-tint);   --rl-c-base: var(--rl-hue-pink-base);   --rl-c-deep: var(--rl-hue-pink-deep); }
.rl-theme-purple { --rl-c-tint: var(--rl-hue-purple-tint); --rl-c-base: var(--rl-hue-purple-base); --rl-c-deep: var(--rl-hue-purple-deep); }
.rl-theme-teal   { --rl-c-tint: var(--rl-hue-teal-tint);   --rl-c-base: var(--rl-hue-teal-base);   --rl-c-deep: var(--rl-hue-teal-deep); }


/* ── eyebrow — 제목 위에 붙는 작은 라벨 ──────────────
   Notion 의 bento_bentoEyebrow 에 대응한다.
   카드가 "무엇에 관한 것인지"를 제목보다 먼저 알려줘서
   훑어볼 때 읽는 속도가 확실히 빨라진다. */

.rl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-space-2);
	font-size: var(--rl-text-xs);
	font-weight: var(--rl-weight-semibold);
	letter-spacing: var(--rl-ls-wide);
	color: var(--rl-c-deep);
	text-transform: none;
}

.rl-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rl-c-base);
	flex: none;
}


/* ── 라이트/다크 토글 버튼 ──────────────────────────
   기본은 라이트다. 해·달 아이콘을 겹쳐두고 현재 테마에 따라
   하나만 보이게 한다 — 버튼 폭이 흔들리지 않아 헤더가 튀지 않는다. */

.rl-theme-toggle {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	background: transparent;
	border: 1px solid var(--rl-border);
	border-radius: var(--rl-radius-round);
	color: var(--rl-text-muted);
	cursor: pointer;
	transition: background var(--rl-duration) var(--rl-ease),
		border-color var(--rl-duration) var(--rl-ease),
		color var(--rl-duration) var(--rl-ease);
}

.rl-theme-toggle:hover {
	background: var(--rl-surface);
	border-color: var(--rl-border-strong);
	color: var(--rl-text);
}

.rl-theme-toggle:focus-visible {
	outline: 2px solid var(--rl-focus-ring);
	outline-offset: 2px;
}

/* 두 아이콘을 같은 칸에 겹쳐 놓는다 */
.rl-theme-toggle__icon {
	grid-area: 1 / 1;
	font-size: 0.95rem;
	line-height: 1;
	transition: opacity var(--rl-duration) var(--rl-ease),
		transform var(--rl-duration) var(--rl-ease-out);
}

/* 라이트일 때: 달을 보여준다 (누르면 어두워지므로) */
.rl-theme-toggle__icon--sun  { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.rl-theme-toggle__icon--moon { opacity: 1; transform: none; }

/* 다크일 때: 해를 보여준다 */
:root[data-theme="dark"] .rl-theme-toggle__icon--sun  { opacity: 1; transform: none; }
:root[data-theme="dark"] .rl-theme-toggle__icon--moon { opacity: 0; transform: rotate(45deg) scale(0.7); }

@media (max-width: 900px) {
	.rl-theme-toggle { display: none; }
}