/*
Theme Name: Astra Child Law Office
Theme URI: https://anyonecompany.kr/
Description: 법무사 홈페이지용 Astra 자식테마. Astra 기본 타이포/버튼/컨테이너 스타일을 무력화해 Elementor 전역 설정이 디자인 정본이 되게 한다.
Author: ANYONE Company
Template: astra
Version: 0.1.0
Text Domain: astra-child-lawoffice
*/

/*
  리셋 원칙
  ---------
  Astra는 제목, 버튼, 컨테이너 폭에 자체 CSS를 주입한다. 그대로 두면
  Elementor 전역 설정(클라이언트가 만지는 유일한 지점)이 Astra에 덮인다.
  이 파일에는 "Astra 값을 비우는" 규칙만 둔다. 디자인 값은 넣지 않는다.
  디자인 값의 정본은 Elementor 전역 설정이다.
*/

/* 1. 제목 — Astra가 h1~h6에 넣는 크기/자간/색을 Elementor 위젯 값이 이기게 한다 */
.elementor-widget-heading .elementor-heading-title {
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}

/* 2. 버튼 — Astra .ast-button 스타일이 Elementor 버튼을 덮지 않게 한다 */
.elementor-button,
.elementor-button-wrapper .elementor-button {
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.elementor-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* 3. 컨테이너 폭 — Astra 기본 제약 해제. 폭은 Elementor 컨테이너가 정한다 */
.ast-container,
.site-content .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* 4. 전체폭 템플릿에서 Astra가 남기는 상하 여백 제거 */
.elementor-template-full-width .site-content,
.elementor-template-full-width .ast-container {
	margin: 0;
	padding: 0;
}

/* 5. 본문 마지막 문단 여백 — 섹션 간격은 Elementor가 제어한다 */
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   버튼 6스타일 (시안 O/Button, node 75:15)
   --------------------------------------------------------------------------
   사용법: Elementor 버튼 위젯 > 고급 > CSS 클래스에 `lo-btn lo-btn--primary` 입력.
   색은 전부 Elementor 전역 색 변수를 참조한다. 클라이언트가 전역 색을 바꾸면
   버튼도 따라 바뀐다. hover 상태는 시안에 없어 전역 색 기반으로 구현자가 정했다.
   ========================================================================== */

.lo-btn.lo-btn .elementor-button,
.lo-btn.lo-btn.elementor-button {
	white-space: nowrap;
	border-radius: 8px;
	font-family: 'Pretendard', sans-serif;
	line-height: normal;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-style: solid;
	border-width: 0;
}

/* Primary — 주 CTA */
.lo-btn--primary.lo-btn--primary .elementor-button,
.lo-btn--primary.lo-btn--primary.elementor-button {
	background-color: var(--e-global-color-primary);
	color: #fff;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.375px;
}

.lo-btn--primary.lo-btn--primary .elementor-button:hover,
.lo-btn--primary.lo-btn--primary.elementor-button:hover {
	background-color: var(--e-global-color-secondary);
	color: #fff;
}

/* Submit — 폼 제출. 시안은 잉크색(text/title) 배경 */
.lo-btn--submit.lo-btn--submit .elementor-button,
.lo-btn--submit.lo-btn--submit.elementor-button,
.lo-btn--submit.lo-btn--submit input[type="submit"] {
	background-color: var(--e-global-color-text);
	color: #fff;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.4px;
	border-radius: 8px;
	border: 0;
	font-family: 'Pretendard', sans-serif;
}

.lo-btn--submit.lo-btn--submit .elementor-button:hover,
.lo-btn--submit.lo-btn--submit.elementor-button:hover,
.lo-btn--submit.lo-btn--submit input[type="submit"]:hover {
	background-color: var(--e-global-color-primary);
	color: #fff;
}

/* HeroGlass — 어두운 히어로 배경 위 반투명 버튼 */
.lo-btn--heroglass.lo-btn--heroglass .elementor-button,
.lo-btn--heroglass.lo-btn--heroglass.elementor-button {
	background-color: rgba(255, 255, 255, 0.08);
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0.25);
	color: #fff;
	padding: 16px 30px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.425px;
}

.lo-btn--heroglass.lo-btn--heroglass .elementor-button:hover,
.lo-btn--heroglass.lo-btn--heroglass.elementor-button:hover {
	background-color: rgba(255, 255, 255, 0.16);
	color: #fff;
}

/* Outline — 보조 동작 */
.lo-btn--outline.lo-btn--outline .elementor-button,
.lo-btn--outline.lo-btn--outline.elementor-button {
	background-color: var(--e-global-color-surface_card);
	border-width: 1px;
	border-color: var(--e-global-color-border_subtle);
	color: var(--e-global-color-text);
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.375px;
}

.lo-btn--outline.lo-btn--outline .elementor-button:hover,
.lo-btn--outline.lo-btn--outline.elementor-button:hover {
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-primary);
}

/* Naver — 네이버 채널 */
.lo-btn--naver.lo-btn--naver .elementor-button,
.lo-btn--naver.lo-btn--naver.elementor-button {
	background-color: var(--e-global-color-channel_naver);
	color: #fff;
	padding: 13px 22px;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -0.3625px;
}

/* Kakao — 카카오 채널. 카카오 브랜드 지정 텍스트색이라 토큰화하지 않는다 */
.lo-btn--kakao.lo-btn--kakao .elementor-button,
.lo-btn--kakao.lo-btn--kakao.elementor-button {
	background-color: var(--e-global-color-channel_kakao);
	color: #3c1e1e;
	padding: 13px 22px;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -0.3625px;
}

.lo-btn--naver.lo-btn--naver .elementor-button:hover,
.lo-btn--naver.lo-btn--naver.elementor-button:hover,
.lo-btn--kakao.lo-btn--kakao .elementor-button:hover,
.lo-btn--kakao.lo-btn--kakao.elementor-button:hover {
	filter: brightness(0.94);
}

/* 헤더 CTA — 시안 76:27 은 Outline 과 달리 테두리·글자 모두 브랜드색 */
.lo-btn--header-cta.lo-btn--header-cta .elementor-button {
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-primary);
}

.lo-btn--header-cta.lo-btn--header-cta .elementor-button:hover {
	background-color: var(--e-global-color-primary);
	color: #fff;
}

/* ==========================================================================
   Gold Label (시안 O/Gold Label, node 97:927 · 84:33)
   --------------------------------------------------------------------------
   시안은 채운 알약 배지가 아니라 accent 색 좌측 3px 바 + 같은 색 텍스트다.
   배경을 채우면 갈색 덩어리로 읽혀 시안과 어긋난다.
   배경을 칠하지 않으므로 밝은 배경(97:927)과 다크 히어로(84:33) 양쪽에서 동일하다.
   Figma 단일 공용 컴포넌트라 페이지별 네이티브 복제 대신 이 클래스가 정본이다.
   셀렉터를 위젯 타입(.elementor-widget-text-editor)에 스코프하면 heading 위젯인
   홈 Hero 가 클래스를 못 써서 네이티브로 우회하게 된다. 자기중복으로 특이도
   (0,2,0)만 확보해 위젯 타입과 무관하게 건다 — 단독 클래스면 Astra 에 진다.
   사용법: 텍스트/heading 위젯 안에 <span class="lo-gold-label">문구</span>.
   ========================================================================== */

.lo-gold-label.lo-gold-label {
	display: flex;
	width: fit-content;
	align-items: center;
	padding: 2px 0 2px 12px;
	border-left: 3px solid var(--e-global-color-accent, #DFB249);
	border-radius: 0;
	background-color: transparent;
	color: var(--e-global-color-accent, #DFB249);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.3px;
	/* 선언이 없으면 킷 Body 타이포 1.7 을 상속해 15×1.7=25.5 → 라벨 31.2px 로 부푼다.
	   시안 96:865 는 22px. 클래스를 채택하는 모든 페이지에 영향이라 규칙에 박는다. */
	line-height: 1.2;
}

/* ==========================================================================
   헤더 로고 (시안 O/Header, node 76:2)
   ========================================================================== */

.lo-logo .elementor-heading-title,
.lo-logo__tagline .elementor-heading-title {
	white-space: nowrap;
}

/* ==========================================================================
   Floating 버튼 (시안 O/Floating, node 77:34)
   전역 고정. 자식테마가 wp_footer 에 출력한다.
   ========================================================================== */

.lo-floating {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lo-floating__btn {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: 'Pretendard', sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 14px;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	transition: transform .18s ease;
}

.lo-floating__btn:hover {
	transform: translateY(-2px);
}

.lo-floating__btn--consult {
	background-color: var(--e-global-color-primary);
	color: #fff;
}

.lo-floating__btn--kakao {
	background-color: var(--e-global-color-channel_kakao);
	color: #3c1e1e;
}

/* ------------------------------------------------------------------
   푸터 (HFE 템플릿 post 28 / 시안 77:2)
   Elementor 텍스트 위젯 안의 a 는 Astra 링크색을 물려받으므로 끊어준다.
   ------------------------------------------------------------------ */
.ehf-footer a {
	color: inherit;
	text-decoration: none;
}

.ehf-footer a:hover {
	color: var(--e-global-color-primary);
}

.ehf-footer .lo-foot-extlinks a {
	text-decoration: underline;
}

/* 로고 "사무소" 는 시안(76:6)에서 상호와 다른 톤 — title 색 + 700 */
.lo-logo .lo-logo__suffix {
	color: var(--e-global-color-text);
	font-weight: 700;
}

/* HFE 메뉴 ul 은 flex-wrap:wrap 이 기본이라 폭이 0.5px만 모자라도 항목이 접힌다.
   단 데스크톱 전용 — 태블릿 이하는 HFE 드롭다운(햄버거)이 담당한다. */
@media (min-width: 1025px) {
	.ehf-header .hfe-nav-menu {
		flex-wrap: nowrap;
	}
}

/* 메뉴 언더라인 포인터: 시안 76:11 은 2px + radius 1px. HFE 는 두께 컨트롤이 없다. */
.ehf-header .hfe-nav-menu.hfe-nav-menu a.hfe-menu-item.hfe-menu-item:before,
.ehf-header .hfe-nav-menu.hfe-nav-menu a.hfe-menu-item.hfe-menu-item:after {
	height: 2px;
	border-radius: 1px;
}

/* 헤더 반응형: Elementor 컨테이너 자식은 기본 width:100% 라 좁은 폭에서
   로고 블록이 한 줄을 다 먹고 토글·CTA 가 아래로 밀린다. 내용 폭으로 되돌린다. */
@media (max-width: 1024px) {
	.ehf-header .e-con-inner > .e-con,
	.ehf-header .elementor-widget-navigation-menu {
		width: auto;
		max-width: max-content;
	}

	/* 로고만 좌측, 토글·CTA 는 우측 그룹으로 붙인다 (space-between 3분할 방지). */
	.ehf-header .elementor-widget-navigation-menu {
		margin-left: auto;
	}

	/* 닫힌 드롭다운이 static 이라 폭(≈372px)을 그대로 차지해 헤더가 3줄로 깨진다.
	   헤더 아래로 띄워 토글만 자리를 차지하게 한다. */
	.ehf-header .elementor-widget-navigation-menu .hfe-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		z-index: 99;
		background-color: var(--e-global-color-surface_card);
		border-bottom: 1px solid var(--e-global-color-border_subtle);
	}
}

/* ------------------------------------------------------------------
   상담 폼 (Contact Form 7 / 시안 O/Consult Form 78:2)
   ------------------------------------------------------------------ */
.wpcf7 .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 16px;
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.04);
	font-family: 'Pretendard', sans-serif;
}

/* Astra 가 폼 직계 자식(p/div)에 붙이는 기본 하단 마진 1.2em 이 위 flex gap 에
   누적돼 폼 높이가 시안(89:306, 547px)보다 약 187px 늘어난다. 간격은 gap 이 정본이다.
   Astra 요소 선택자를 넘기려고 form 태그를 섞어 특이도를 올린다. */
.wpcf7 form.wpcf7-form > p,
.wpcf7 form.wpcf7-form > div,
.wpcf7 form.wpcf7-form > fieldset {
	margin-top: 0;
	margin-bottom: 0;
}

.lo-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lo-form__label {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.3375px;
	color: var(--e-global-color-text);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

/* Astra 가 input 에 자체 padding 을 넣어 아래 값이 무시된다(실측 12px 16px).
   form 태그를 섞어 특이도를 올려야 시안 값 12/14 가 적용된다. */
.wpcf7 form.wpcf7-form input[type="text"],
.wpcf7 form.wpcf7-form input[type="tel"],
.wpcf7 form.wpcf7-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14.5px;
	letter-spacing: -0.3625px;
	color: var(--e-global-color-text);
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 8px;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--e-global-color-text_caption);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--e-global-color-primary);
}

.wpcf7 textarea {
	min-height: 96px;
	resize: vertical;
}

/* 라디오: 가로 배치 + 시안 간격 18px */
.wpcf7 .wpcf7-radio {
	display: flex;
	gap: 18px;
}

.wpcf7 .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	letter-spacing: -0.35px;
	color: var(--e-global-color-text_body);
	cursor: pointer;
}

.wpcf7 .wpcf7-list-item input[type="radio"] {
	width: 15px;
	height: 15px;
	accent-color: var(--e-global-color-primary);
	margin: 0;
}

.lo-form__consent {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	letter-spacing: -0.3125px;
	color: var(--e-global-color-text_body);
}

.lo-form__consent .wpcf7-acceptance .wpcf7-list-item label {
	font-size: 12.5px;
	letter-spacing: -0.3125px;
}

.lo-form__consent input[type="checkbox"] {
	width: 15px;
	height: 15px;
	accent-color: var(--e-global-color-primary);
	margin: 0;
}

.lo-form__consent a {
	flex-shrink: 0;
	white-space: nowrap;
	font-weight: 500;
	color: var(--e-global-color-primary);
	text-decoration: underline;
}

/* 좁은 폼 컬럼(상담 신청 페이지 420px)에서는 동의문과 링크가 한 줄에 다 안 들어간다.
   링크를 줄이지 말고 줄을 바꾸게 한다 — 링크가 두 줄로 쪼개지면 읽기 어렵다. */
.lo-form__consent {
	flex-wrap: wrap;
	row-gap: 4px;
}

/* 제출 버튼은 큐 02 의 Submit 스타일을 쓰되 폼 안에서는 전폭 + 시안 15.5px */
.wpcf7 input[type="submit"].lo-btn {
	width: 100%;
	padding: 14px;
	font-size: 15.5px;
	letter-spacing: -0.3875px;
	cursor: pointer;
}

.lo-form__note {
	margin: 0;
	font-size: 12px;
	letter-spacing: -0.3px;
	text-align: center;
	color: var(--e-global-color-text_caption);
}

/* CF7 기본 응답 메시지 */
.wpcf7 .wpcf7-response-output {
	margin: 0;
	padding: 12px 14px;
	font-size: 13.5px;
	border-radius: 8px;
	border-color: var(--e-global-color-border_subtle);
}

/* CF7 는 wpautop 으로 <p>/<br> 을 끼워 넣는다. 간격은 flex gap 이 담당한다. */
.wpcf7 .lo-form__field p,
.wpcf7 .lo-form__consent p {
	margin: 0;
}

.wpcf7 .lo-form__field br,
.wpcf7 .lo-form__consent br {
	display: none;
}

/* CF7 submit 은 클래스가 input 자체에 붙는다 (큐 02 셀렉터는 자손형만 있었다). */
.wpcf7 input[type="submit"].lo-btn--submit,
.wpcf7 input[type="submit"].lo-btn--submit:hover {
	background-color: var(--e-global-color-text);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
}

/* 시안 상담 내용 높이(pb 56 + pt 12 기준) */
.wpcf7 textarea {
	height: 96px;
	min-height: 96px;
}

/* wpautop 의 <p> 가 동의줄 flex 를 끊는다. */
.wpcf7 .lo-form__consent p {
	display: contents;
}

/* ------------------------------------------------------------------
   페이지 타이틀 (시안 O/Page Title 76:29) — Elementor 저장 템플릿과 짝
   ------------------------------------------------------------------ */
.lo-crumb {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lo-crumb a {
	color: var(--e-global-color-text_caption);
	text-decoration: none;
}

.lo-crumb__sep {
	font-size: 12px;
	color: var(--e-global-color-text_caption);
}

.lo-crumb__current {
	font-size: 13.5px;
	letter-spacing: -0.3375px;
	color: var(--e-global-color-text_body);
}

/* ------------------------------------------------------------------
   상환금 계산기 (커스텀 위젯 lo_repayment_calc / 시안 O-08 96:869)
   ------------------------------------------------------------------ */
.lo-calc {
	display: flex;
	gap: 36px;
	align-items: flex-start;
	padding: 40px;
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
	font-family: 'Pretendard', sans-serif;
}

.lo-calc__inputs {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.lo-calc__field {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lo-calc__field-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.lo-calc__label {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--e-global-color-text);
}

.lo-calc__amount {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.lo-calc .lo-calc__number-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	padding: 8px 16px;
	background-color: var(--e-global-color-surface_card);
	border: 1.5px solid var(--e-global-color-primary);
	border-radius: 10px;
}

/* Astra 가 input[type=text] 에 height:40px 를 박아 시안 37px 박스가 58px 로 부푼다.
   요소 선택자로 특이도를 올려 시안 값(내용 높이 18px)으로 되돌린다. */
.lo-calc input.lo-calc__number {
	width: 100%;
	height: 18px;
	line-height: 18px;
	padding: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 800;
	text-align: center;
	color: var(--e-global-color-primary);
	background: none;
	border: 0;
}

.lo-calc input.lo-calc__number:focus {
	outline: none;
	box-shadow: none;
}

.lo-calc__unit {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.375px;
	color: var(--e-global-color-text);
}

/* 시안 슬라이더: 트랙 8px(#e3e5eb) + primary 채움 + 22px 원형 thumb.
   input[type=range] 은 채움 스타일이 없어 --lo-fill 로 그라데이션을 잘라 쓴다. */
.lo-calc__slider {
	display: flex;
	align-items: center;
	height: 22px;
}

.lo-calc__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	margin: 0;
	border-radius: 4px;
	background: linear-gradient(
		to right,
		var(--e-global-color-primary) 0 var(--lo-fill, 0%),
		#e3e5eb var(--lo-fill, 0%) 100%
	);
	cursor: pointer;
}

.lo-calc__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--e-global-color-primary);
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.lo-calc__range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--e-global-color-primary);
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.lo-calc__range-caption {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	letter-spacing: -0.325px;
	color: var(--e-global-color-text_caption);
}

.lo-calc__household {
	display: flex;
	gap: 10px;
}

.lo-calc button.lo-calc__household-btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 13px 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.375px;
	color: var(--e-global-color-text_body);
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 10px;
	cursor: pointer;
}

.lo-calc button.lo-calc__household-btn.is-active {
	font-weight: 700;
	color: #fff;
	background-color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
}

/* 분석 패널 */
.lo-calc__panel {
	flex: 0 0 400px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	background-color: var(--e-global-color-bg_muted);
	border-radius: 12px;
}

.lo-calc .lo-calc__panel-title {
	margin: 0;
	font-size: 20px;
	line-height: 24px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--e-global-color-text);
}

.lo-calc__panel-rule {
	display: block;
	height: 2px;
	background-color: var(--e-global-color-primary);
}

.lo-calc__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--e-global-color-border_subtle);
}

.lo-calc__row-label {
	font-size: 14.5px;
	line-height: 17px;
	letter-spacing: -0.3625px;
	color: var(--e-global-color-text_body);
}

.lo-calc__row-value {
	font-size: 17px;
	line-height: 20px;
	font-weight: 800;
	color: var(--e-global-color-text);
	white-space: nowrap;
}

.lo-calc__row-value--success {
	color: var(--e-global-color-state_success);
}

.lo-calc__row-value--primary {
	color: var(--e-global-color-primary);
}

.lo-calc__gauge {
	height: 8px;
	border-radius: 4px;
	background-color: #e0e3e8;
	overflow: hidden;
}

.lo-calc__gauge-fill {
	display: block;
	height: 100%;
	width: 0;
	background-image: linear-gradient(
		to right,
		var(--e-global-color-primary),
		var(--e-global-color-state_success)
	);
	transition: width .2s ease;
}

.lo-calc__monthly {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 0;
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 12px;
}

.lo-calc__monthly-label {
	font-size: 14.5px;
	line-height: 17px;
	font-weight: 500;
	letter-spacing: -0.3625px;
	color: var(--e-global-color-text_body);
}

.lo-calc__monthly-value {
	font-size: 34px;
	line-height: 41px;
	font-weight: 800;
	color: var(--e-global-color-primary);
}

.lo-calc .lo-calc__disclaimer {
	margin: 0;
	font-size: 12.5px;
	line-height: 19px;
	letter-spacing: -0.3125px;
	color: var(--e-global-color-text_caption);
}

@media (max-width: 1024px) {
	.lo-calc {
		flex-direction: column;
		padding: 28px;
	}

	.lo-calc__panel {
		flex: 1 1 auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.lo-calc__field-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.lo-calc__household {
		flex-wrap: wrap;
	}

	.lo-calc__household-btn {
		flex: 1 1 calc(50% - 5px);
	}
}

/* .lo-btn 이 <a> 자체에 붙는 경우(커스텀 위젯 CTA 등).
   Elementor 버튼 위젯은 래퍼에 클래스가 붙어 자손 셀렉터로 잡히지만,
   직접 마크업한 앵커는 여기서 잡아야 한다. */
a.lo-btn.lo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-family: 'Pretendard', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.375px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}

a.lo-btn.lo-btn--primary {
	color: #fff;
	background-color: var(--e-global-color-primary);
}

a.lo-btn.lo-btn--primary:hover {
	background-color: var(--e-global-color-secondary);
	color: #fff;
}

/* ------------------------------------------------------------------
   셀프진단 (커스텀 위젯 lo_self_check / 시안 O-09 97:897)
   ------------------------------------------------------------------ */
.lo-check {
	max-width: 720px;
	margin: 0 auto;
	font-family: 'Pretendard', sans-serif;
}

.lo-check__card {
	display: none;
	padding: 36px;
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
}

/* 시안 97:932 — 카드 내부는 22px 균일 간격 */
.lo-check__card.is-active {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.lo-check__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.lo-check__count {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -0.3625px;
	color: var(--e-global-color-primary);
}

.lo-check__progress {
	height: 6px;
	margin: 0;
	border-radius: 3px;
	background-color: var(--e-global-color-border_subtle);
	overflow: hidden;
}

.lo-check__progress-fill {
	display: block;
	height: 100%;
	border-radius: 3px;
	background-color: var(--e-global-color-primary);
}

.lo-check .lo-check__question-text {
	margin: 0;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.575px;
	color: var(--e-global-color-text);
}

.lo-check__options {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* 시안 97:939 — 라벨 좌 / 힌트 우, 한 줄. 화살표 없음 */
.lo-check button.lo-check__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 24px;
	font-family: inherit;
	text-align: left;
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.lo-check button.lo-check__option:hover,
.lo-check button.lo-check__option.is-selected {
	border-color: var(--e-global-color-primary);
	background-color: var(--e-global-color-primary);
}

.lo-check__option-label {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--e-global-color-text);
}

.lo-check__option-hint {
	flex-shrink: 0;
	font-size: 13px;
	letter-spacing: -0.325px;
	text-align: right;
	color: var(--e-global-color-text_caption);
}

.lo-check button.lo-check__option:hover .lo-check__option-label,
.lo-check button.lo-check__option.is-selected .lo-check__option-label {
	color: #fff;
}

.lo-check button.lo-check__option:hover .lo-check__option-hint,
.lo-check button.lo-check__option.is-selected .lo-check__option-hint {
	color: rgba(255, 255, 255, 0.75);
}

.lo-check button.lo-check__back,
.lo-check button.lo-check__restart {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 13.5px;
	letter-spacing: -0.3375px;
	color: var(--e-global-color-text_caption);
	background: none;
	border: 0;
	cursor: pointer;
}

.lo-check button.lo-check__restart {
	display: block;
	margin: 0 auto;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.35px;
	text-decoration: underline;
}

/* 결과 카드 — 시안 97:949 (padding 40/40/36, 자식 간격 16, 가운데 정렬) */
.lo-check__result.is-active {
	align-items: center;
	gap: 16px;
	padding: 40px 40px 36px;
	text-align: center;
}

.lo-check__result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--e-global-color-primary);
	background-color: rgba(79, 70, 229, 0.1);
	border-radius: 999px;
}

.lo-check .lo-check__result-eyebrow {
	margin: 0;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: -0.3625px;
	color: var(--e-global-color-text_caption);
}

.lo-check .lo-check__result-title {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.75px;
	color: var(--e-global-color-primary);
}

.lo-check .lo-check__result-reason {
	margin: 0;
	max-width: 640px;
	font-size: 15.5px;
	line-height: 26px;
	letter-spacing: -0.3875px;
	color: var(--e-global-color-text_body);
}

/* 참고 사항 — 시안 97:955 는 amber 가 아니라 bg_muted 패널 + 경고 텍스트만 빨강 */
.lo-check__warnings {
	width: 100%;
	margin: 0;
	padding: 16px 20px;
	text-align: center;
	background-color: var(--e-global-color-bg_muted);
	border: 0;
	border-radius: 10px;
}

.lo-check .lo-check__warnings-title {
	margin: 0 0 6px;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -0.3625px;
	color: var(--e-global-color-text);
}

/* Astra 의 요소 선택자(ul)가 클래스를 이기므로 특이도를 올린다 */
.lo-check .lo-check__warnings ul.lo-check__warnings-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: -0.35px;
	color: var(--e-global-color-state_error, #e03131);
}

.lo-check__warnings-list li {
	list-style: none;
}

/* 시안 97:958 — 내용 폭 버튼 2개를 가운데 정렬 (grid 1fr/1fr 아님) */
.lo-check__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* 결과 버튼은 <a class="lo-btn"> 라서 .elementor-button 전제인 공용 규칙이 안 걸린다.
   시안 O/Button 값(75:3 / 75:10)을 위젯 범위에서 직접 적용한다. */
.lo-check .lo-check__actions .lo-btn {
	display: inline-flex;
	align-items: center;
	font-family: inherit;
	font-size: 15px;
	line-height: normal;
	white-space: nowrap;
	border-radius: 8px;
	border: 1px solid transparent;
	text-decoration: none;
}

.lo-check .lo-check__actions .lo-btn--primary {
	padding: 12px 22px;
	font-weight: 700;
	letter-spacing: -0.375px;
	color: #fff;
	background-color: var(--e-global-color-primary);
}

.lo-check .lo-check__actions .lo-btn--outline {
	padding: 11px 18px;
	font-weight: 600;
	letter-spacing: -0.375px;
	color: var(--e-global-color-text);
	background-color: var(--e-global-color-surface_card);
	border-color: var(--e-global-color-border_subtle);
}

.lo-check .lo-check__interpretation {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--e-global-color-text_caption);
}

.lo-check .lo-check__disclaimer {
	margin: 24px 0 0;
	font-size: 12.5px;
	line-height: 1.7;
	text-align: center;
	color: var(--e-global-color-text_caption);
}

@media (max-width: 767px) {
	.lo-check__card {
		padding: 24px 20px;
	}

	.lo-check__result.is-active {
		padding: 32px 20px 28px;
	}

	.lo-check__actions {
		width: 100%;
		flex-direction: column;
	}

	.lo-check .lo-check__actions .lo-btn {
		justify-content: center;
	}

	/* 좁은 폭에서는 라벨/힌트가 겹치지 않게 두 줄로 */
	.lo-check button.lo-check__option {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.lo-check__option-hint {
		text-align: left;
	}
}

/* ------------------------------------------------------------------
   성공사례 카드 (커스텀 위젯 lo_story_loop / 시안 O/Story Card 80:2)
   ------------------------------------------------------------------ */
.lo-stories {
	display: grid;
	gap: 24px;
	font-family: 'Pretendard', sans-serif;
}

.lo-story {
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.lo-stories a.lo-story__link,
.lo-stories a.lo-story__link:hover {
	text-decoration: none;
}

.lo-stories a.lo-story__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.lo-story__top {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 18px;
}

.lo-story__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.lo-story__chip {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.3px;
	color: #fff;
	background-color: var(--e-global-color-text);
	border-radius: 6px;
}

.lo-story__date {
	font-size: 13px;
	letter-spacing: -0.325px;
	color: var(--e-global-color-text_caption);
}

/* 시안 카드는 408px 고정이라 제목 2줄(25×2) · 발췌 2줄(21×2) 영역이 항상 예약된다.
   원문은 자르지 않고 표시만 클램프해 카드 높이를 글 길이와 무관하게 고정한다. */
.lo-stories .lo-story__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	min-height: 50px;
	font-size: 17px;
	font-weight: 700;
	line-height: 25px;
	letter-spacing: -0.425px;
	color: var(--e-global-color-text);
}

.lo-stories .lo-story__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	height: 42px;
	font-size: 13.5px;
	line-height: 21px;
	letter-spacing: -0.3375px;
	color: var(--e-global-color-text_body);
}

.lo-story__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	line-height: normal;
	margin-top: auto;
}

.lo-story__byline {
	font-size: 12.5px;
	letter-spacing: -0.3125px;
	color: var(--e-global-color-text_caption);
}

.lo-story__more {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.325px;
	color: var(--e-global-color-primary);
}

/* 썸네일은 카드 하단. 시안은 210px 고정 + 미지정 시 플레이스홀더.
   제목·발췌 길이가 카드마다 달라도 썸네일이 카드 바닥에 붙도록 margin-top:auto 로
   남는 높이를 텍스트 블록 아래로 밀어낸다(시안은 전 카드 썸네일 하단 정렬). */
.lo-story__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 210px;
	margin-top: auto;
	height: 210px;
	background-color: var(--e-global-color-bg_muted);
	overflow: hidden;
}

.lo-story__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lo-story__thumb-placeholder {
	font-size: 12px;
	letter-spacing: -0.3px;
	color: var(--e-global-color-text_caption);
}

.lo-story:hover {
	border-color: var(--e-global-color-primary);
}

.lo-stories__empty {
	padding: 40px 0;
	text-align: center;
	color: var(--e-global-color-text_caption);
}

.lo-stories__more {
	margin-top: 32px;
	text-align: center;
}

/* 캐러셀 모드 — 가로 스크롤 + 좌우 화살표 + 도트 (시안 O-01 Stories 86:53)
   시안은 1200 폭 안에서 48px 원형 화살표가 트랙 양옆에 붙고, 카드 트랙은
   좌 68px / 우 68px 만큼 안으로 들어간다. */
.lo-stories__viewport {
	position: relative;
}

/* 화살표 자리(68px)를 padding 으로 주면 그 영역도 스크롤 컨테이너 안이라
   다음 카드가 거기까지 비쳐 잘린 채로 보인다. margin 으로 빼면 컨테이너 경계가
   곧 3장의 끝이라 넘치는 카드가 정확히 잘려 안 보인다. */
.lo-stories__viewport .lo-stories--carousel {
	margin-inline: 68px;
}

.lo-stories__viewport button.lo-stories__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	letter-spacing: -0.45px;
	color: var(--e-global-color-text_body);
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.lo-stories__viewport button.lo-stories__arrow--prev {
	left: 0;
}

.lo-stories__viewport button.lo-stories__arrow--next {
	right: 0;
}

/* 모바일은 스와이프로 넘긴다. 화살표를 두면 카드 폭을 잡아먹는다. */
@media (max-width: 767px) {
	.lo-stories__viewport .lo-stories--carousel {
		margin-inline: 0;
	}

	.lo-stories__viewport button.lo-stories__arrow {
		display: none;
	}

	/* 좁은 폭에서 3분할하면 카드가 100px 대로 뭉개진다. 스와이프 1장씩.
	   아래 기본 폭 규칙이 파일 뒤쪽이라 같은 특이도로는 진다. */
	.lo-stories__viewport .lo-stories--carousel .lo-story {
		flex-basis: 100%;
	}
}

.lo-stories--carousel {
	display: flex;
	gap: 20px;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.lo-stories--carousel::-webkit-scrollbar {
	display: none;
}

/* 폭을 고정하면 뷰포트에 따라 다음 카드가 걸쳐 잘려 보인다.
   한 화면에 정확히 3장(간격 20 × 2)이 들어가도록 폭을 계산한다.
   여기서 100% 는 패딩을 제외한 트랙 내부 폭이다. */
.lo-stories--carousel .lo-story {
	flex: 0 0 calc((100% - 40px) / 3);
	scroll-snap-align: start;
}

/* 태블릿에서 3분할하면 카드가 171px 로 눌린다. 2장씩.
   모바일 1장 규칙이 이 블록보다 파일 앞쪽이라 같은 특이도로는 지므로 범위로 끊는다. */
@media (min-width: 768px) and (max-width: 991px) {
	.lo-stories__viewport .lo-stories--carousel .lo-story {
		flex-basis: calc((100% - 20px) / 2);
	}
}

.lo-stories__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.lo-stories__dots button.lo-stories__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--e-global-color-border_subtle);
	cursor: pointer;
}

.lo-stories__dots button.lo-stories__dot.is-active {
	background-color: var(--e-global-color-primary);
}

/* 아카이브 헤드 — 검색 + 분류 탭 (시안 O-05 archive-head 92:546)
   시안은 좌우 배치가 아니라 중앙 정렬 세로 스택이다: 520px 알약 검색바 아래
   분류 탭이 가운데로 깔린다. */
.lo-stories__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-bottom: 64px;
}

/* 검색 폼 자체가 시안의 알약(520px)이다. 입력과 버튼은 그 안에 얹는다 */
.lo-stories__search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 520px;
	max-width: 100%;
	padding: 4px 8px 4px 22px;
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.lo-stories__search-icon {
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1;
	color: var(--e-global-color-text_caption);
}

.lo-stories__search.lo-stories__search input[type="search"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding: 11px 0;
	font-family: 'Pretendard', sans-serif;
	font-size: 14.5px;
	letter-spacing: -0.3625px;
	color: var(--e-global-color-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: none;
}

.lo-stories__search.lo-stories__search input[type="search"]::placeholder {
	color: var(--e-global-color-text_caption);
}

.lo-stories__search button[type="submit"] {
	flex: 0 0 auto;
	padding: 9px 18px;
	font-family: 'Pretendard', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background-color: var(--e-global-color-primary);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.lo-stories__filter {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.lo-stories__filter a.lo-stories__tab {
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.35px;
	color: var(--e-global-color-text_body);
	text-decoration: none;
	background-color: var(--e-global-color-surface_card);
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 8px;
}

.lo-stories__filter a.lo-stories__tab.is-active {
	font-weight: 700;
	color: #fff;
	background-color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
}

/* 페이지네이션 (시안 O-05) */
.lo-stories__pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.lo-stories__pagination.lo-stories__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	font-size: 14px;
	text-align: center;
	color: var(--e-global-color-text_body);
	text-decoration: none;
	border: 1px solid var(--e-global-color-border_subtle);
	border-radius: 8px;
}

.lo-stories__pagination.lo-stories__pagination .page-numbers.current {
	color: #fff;
	background-color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
}

/* ------------------------------------------------------------------
   아이콘 배경 도형 가운데 정렬
   Elementor 기본 .elementor-icon 은 inline-block + padding 이라
   SVG 가 콘텐츠 박스 좌상단에 붙는다(48px 박스에 20px 아이콘 → 좌/상 10, 우/하 18).
   flex 로 중심 정렬. 전 페이지 icon / icon-box 공통.
   ------------------------------------------------------------------ */
.elementor-icon.elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   모바일 최적화 (767px 이하)
   시안에 모바일 프레임이 없어 데스크톱 값을 그대로 쓰고 있었다.
   타이포 축소는 Elementor 킷/위젯 모바일 값으로 처리하고, 여기서는
   마크업이 인라인이라 위젯 컨트롤로 못 잡는 것만 다룬다.
   ========================================================================== */
@media (max-width: 767px) {
	/* 터치 타겟 44px. 푸터 링크는 text-editor 안 인라인 <a> 라
	   위젯 패딩 컨트롤이 링크가 아니라 문단에 걸려 높이가 16px 에 머문다. */
	.elementor-28 .elementor-widget-text-editor a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* 아코디언 헤더 38px → 44px. 레거시 위젯이라 높이 컨트롤이 없다. */
	.elementor-accordion .elementor-tab-title {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* iOS 사파리는 16px 미만 입력에 포커스하면 화면을 확대하고 되돌리지 않는다.
	   폼 이탈의 흔한 원인이라 시안 값(14.5)보다 접근성을 우선한다. */
	.wpcf7 form.wpcf7-form input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
	.wpcf7 form.wpcf7-form textarea,
	.wpcf7 form.wpcf7-form select,
	.lo-calc input.lo-calc__number,
	.lo-stories__search.lo-stories__search input[type='search'] {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	/* 날짜·시간 입력은 wpcf7-form-control-wrap 래퍼 안에 있어 위 규칙과 특이도가
	   같은 테마 규칙에 진다. 래퍼를 섞어 한 단계 올린다. */
	.wpcf7 form.wpcf7-form .wpcf7-form-control-wrap input:not([type='hidden']):not([type='checkbox']):not([type='radio']) {
		font-size: 16px;
	}

	/* 버튼류 최소 44px. 시안 값(패딩 12/22)이면 42px 로 2px 모자란다. */
	.elementor-button,
	.lo-stories__search button[type='submit'],
	.lo-check button.lo-check__option {
		min-height: 44px;
	}

	/* 캐러셀 도트는 8px 라 손가락으로 못 누른다.
	   보이는 크기는 유지한 채 패딩으로 타겟만 키운다(background-clip 으로 점만 칠함). */
	.lo-stories__dots button.lo-stories__dot {
		padding: 18px 8px;
		background-clip: content-box;
	}

	.lo-stories__dots {
		margin-block: -18px;
	}
}

@media (max-width: 767px) {
	/* 아코디언은 탭 전체(div)가 44px 이지만 실제 링크(<a>)는 38px 라
	   스크린리더·키보드 포커스 영역이 작다. 링크가 탭을 꽉 채우게 한다. */
	.elementor-accordion .elementor-tab-title a {
		display: flex;
		align-items: center;
		min-height: 44px;
		width: 100%;
	}

	/* 도트는 height:8px 가 걸려 있고 box-sizing 이 border-box 라
	   패딩을 줘도 타겟이 안 커진다. 이 규칙에서만 content-box 로 되돌린다. */
	.lo-stories__dots button.lo-stories__dot {
		box-sizing: content-box;
	}
}