/* 공통 간격·줄바꿈 보정(2026-11-09 사용자 지시·QA).
 * 실제 브라우저 측정(scripts/ui/spacing_audit.js)으로 찾은 "간격 없이 붙은 UI"와 원치 않는 줄바꿈을 고친다.
 * 원칙: 4px 배수 간격, 독립된 버튼·입력·알림 상자 사이는 가로·세로 모두 최소 8px.
 * 색은 넣지 않는다(색은 ui-foundation.css·ui-buttons.css 토큰). */

/* 1. 줄바꿈: 한국어는 어절 단위로만 끊는다(‘차감됩니 / 다.’ 방지, QA DS-06).
 *    break-word 는 최소 폭 계산에 끼지 않아 표 열이 글자 단위로 쪼개지지 않는다. */
body { word-break: keep-all; overflow-wrap: break-word; }
:is(pre, code, kbd, samp, textarea, input) { word-break: normal; }
/* 제목은 줄 길이를 고르게 나눠 한 단어만 다음 줄로 떨어지지 않게 한다(QA HOME-10 ‘…에이픽 / AI.’). */
:is(h1, h2, h3) { text-wrap: balance; }

/* 2. 모달이 열려 스크롤바가 사라질 때 화면이 옆으로 튀지 않게 자리를 남긴다(QA HDR-07). */
html { scrollbar-gutter: stable; }

/* 3. 버튼 바로 뒤에 붙는 안내·오류 상자, 또는 안내 상자 바로 뒤의 버튼(예: ‘관리자 화면 열기’ 버튼 아래 OTP 안내).
 *    형제끼리 바로 이어질 때만 위 간격 8px 을 준다. 이미 간격이 있는 화면(flex·grid gap)은 규칙이 더 구체적이라 그대로다. */
:is(button, .ui-btn, a[class*="btn"], a[class*="button"], input[type="submit"], input[type="button"])
	+ :is([role="alert"], [role="status"]:not(:empty), .ui-inline-error, [class*="-error"], [class*="-alert"], [class*="-notice"], [class*="-warning"], [class*="-message"], [class*="-hint"], [class*="__error"], [class*="__notice"], [class*="__message"]) {
	margin-top: 8px;
}
:is([role="alert"], .ui-inline-error, [class*="-error"], [class*="-alert"], [class*="-notice"], [class*="-warning"], [class*="__error"], [class*="__notice"])
	+ :is(button, .ui-btn, a[class*="btn"], a[class*="button"], input[type="submit"]) {
	margin-top: 8px;
}

/* 4. 줄바꿈된 버튼 묶음: 두 번째 줄 버튼이 윗줄에 붙지 않게 세로 간격도 준다. */
.subpage-info-right, .btn-area, .button-area, .btn-group, .btn-wrap, .home-actions, .component-charge__btn-group {
	row-gap: 8px;
}
.subpage-info-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: 8px; }
.subpage-info-right > :is(.component-button, .component-button-small) { margin: 0; }

/* 5. 문의 답변 화면: 상용 문구 버튼 줄과 댓글 입력 상자가 붙어 있었다. */
.inquiry-macro-actions { margin-bottom: 12px; }

/* 6. 가입 퍼널 조회 폼: 버튼이 날짜 입력 아래로 내려가면서 간격 없이 붙었다. */
#funnel-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
#funnel-form label { display: grid; gap: 4px; min-width: 0; }
#funnel-form button { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0 20px; }

/* 7. 버튼 글자는 한 줄을 지킨다. 화살표·아이콘과 글자도 같은 줄 가운데에 둔다. */
.home-btn, .label-button, .catalog-chip, .catalog-btn, .catalog-more { white-space: nowrap; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }

/* 9. 마이페이지 탭: 1,369px 에서 ‘회원탈퇴’ 하나만 둘째 줄 가운데로 떨어졌고, 모바일은 2열 5줄로 첫 화면 절반을 차지했다(QA MY-01·RES-04).
 *    한 줄을 지키고 넘치면 가로로 밀어 본다. */
.my_page .sub-head .tab-menu { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
@media (max-width: 720px) {
	/* 모바일 헤더(약 134px) 아래로 100px 넘게 비어 있었다. 탭이 헤더 바로 아래 16px 에서 시작하게 줄인다. */
	section.my_page.sub-area { padding-top: 32px; }
}
.my_page .sub-head .tab-menu > button { flex: 1 0 auto; width: auto; min-width: max-content; padding-left: 16px; padding-right: 16px; white-space: nowrap; }

/* 10. 메인 비디아 구역: 버튼 바로 아래 텍스트 링크가 4px 로 붙어 있었다(QA HOME-08). */
.home-video-link { margin-top: 16px; }

/* 11. 운영 화면 제목 옆에 설명문이 같은 줄로 붙던 곳(QA ADM-12 ‘자동결제 계정 조회자동결제가…’). 설명은 제목 아래 블록으로 둔다. */
.subpage-info-left:has(> .subpage__title + p) { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.subpage-info-left > .subpage__title + p { margin: 0; line-height: 1.6; }

/* 12. 운영 화면 구역 카드 사이 간격이 0이던 곳(QA ADM-14). */
.ops-dashboard > .ops-panel + .ops-panel, .ops-dashboard > section + section { margin-top: 24px; }

/* 13. 메인 구글 검색 카드: 렌즈 버튼·입력 예시가 두 줄로 깨지고 링크 하나만 가운데 줄에 떨어졌다(QA HOME-07). */
.google-visual-bar span, .google-visual-lens span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.google-search-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 16px; }

/* 8. 숫자와 단위는 함께 다닌다(‘53,001 / P’ 방지, QA RES-04). */
:is(.user-coin, .my-page-kpi, .hd-wallet, .ops-metric, .ops-kpi) :is(strong, b, em, span) { white-space: nowrap; }