/**
* 팔자연구소 — 공통 헤더/내비 타이포·모바일 정렬
* 각 HTML의 끝에서 이 파일을 마지막으로 로드하세요.
*/
html {
/* 스크롤바 유무에 따른 가로 밀림 완화 (지원 브라우저) */
scrollbar-gutter: stable;
}
:root {
--font-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
/* ── UI 크롬: 산세리프 한 가족 (로고 텍스트·뱃지·링크·메뉴) ── */
.site-top,
.site-top button,
.site-top a,
.site-top .plan-badge,
.program-nav,
.program-nav-inner,
.program-nav a,
.program-nav span.program-nav-current {
font-family: var(--font-ui);
}
.topbar-logo,
.topbar-title {
font-family: var(--font-ui);
}
/* 탑바 오른쪽: 한 줄 안에서 수직 가운데 정렬 */
.site-top .topbar-right {
align-items: center;
}
/* 로그아웃·대시보드: 버튼/링크 박스·베이스라인 통일 (font:inherit 제거 효과) */
.site-top .back-btn {
display: inline-flex;
align-items: center;
line-height: 1.25;
}
.site-top .topbar-auth-btn.topbar-auth-link {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.25;
color: var(--deep-brown, #4a3520);
display: inline-flex;
align-items: center;
}
.site-top .topbar-auth-btn.topbar-auth-link:hover {
color: var(--ink, #2c1f0e);
}
/* 히어로 안 폼/버튼은 본문 명조와 섞이지 않게 UI 폰트로 통일 */
.hero .hero-tag,
.hero .hero-desc,
.hero .input-label,
.hero .input-field,
.hero .input-field::placeholder,
.hero .analyze-btn,
.hero .hero-tab,
.hero .hero-tabs,
.hero .input-wrap .input-label,
.hero .input-wrap .input-field,
.hero .input-wrap .analyze-btn,
.hero .input-section-title,
.hero .name-field,
.hero .name-field::placeholder,
.hero .energy-chip,
.hero .gender-btn,
.hero .birth-label,
.hero .birth-solar-note,
.hero .birth-field,
.hero .birth-field::placeholder,
.hero .birth-btn {
font-family: var(--font-ui);
}
/* 소울하모니: 상단 입력 패널(히어로 역할) */
.brand .brand-badge,
.brand .brand-sub,
.brand .brand-line,
.brand .brand-line span,
.input-panel .card-label,
.input-panel .field label,
.input-panel .field input,
.input-panel .field input::placeholder,
.input-panel .field-hint,
.cta-wrap .cta-btn,
.cta-wrap .error-text {
font-family: var(--font-ui);
}
/* 요금제 히어로 토글 */
.hero .billing-toggle,
.hero .toggle-btn,
.hero .save-badge {
font-family: var(--font-ui);
}
/* 상담사 허브: 폼·본문 라벨은 UI 폰트 */
.hub-intro p,
.client-form label,
.client-form input,
.client-form textarea,
.client-search-input,
.client-search-input::placeholder {
font-family: var(--font-ui);
}
/* 상단 인쇄/PDF: 타로 등 버튼 없는 페이지와 탑바 높이 차 완화 */
.site-top .counselor-bar-btn {
min-height: 28px;
padding: 4px 10px;
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.2;
box-sizing: border-box;
}
.site-top .plan-badge,
.site-top .topbar-auth-link,
.site-top .topbar-auth-btn {
line-height: 1.2;
}
/* ── 프로그램 메뉴 줄·탑바 좌우: 페이지별(12·14·16·20px) 차이 제거 ── */
@media (max-width: 900px) {
.site-top .topbar {
padding: 8px 16px;
}
.site-top .program-nav {
padding: 0 16px;
}
.site-top .program-nav-inner {
gap: 6px 12px;
font-size: 11px;
padding: 6px 0 8px;
}
}
@media (max-width: 560px) {
.site-top .topbar-sep,
.site-top .topbar-title {
display: none;
}
}
/* ── 모바일: 상단 액션 한 블록으로 정돈 ── */
@media (max-width: 700px) {
.site-top .topbar {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.site-top .topbar-left {
width: 100%;
min-width: 0;
flex: 0 0 auto;
}
.site-top .topbar-right {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px 12px;
row-gap: 10px;
width: 100%;
}
.site-top .topbar-right > .plan-badge,
.site-top .topbar-right > #plan-badge {
order: 1;
}
.site-top .topbar-right > [data-topbar-auth-guest] {
order: 2;
margin-left: auto;
}
.site-top .topbar-right > .topbar-export-cluster,
.site-top .topbar-right > .topbar-export-btns {
order: 3;
flex: 1 1 100%;
width: 100%;
justify-content: stretch;
}
.site-top .topbar-export-cluster .topbar-export-btns {
width: 100%;
display: flex;
gap: 8px;
}
.site-top .topbar-export-btns .counselor-bar-btn {
flex: 1 1 0;
min-width: 0;
min-height: 36px;
}
.site-top .topbar-right > .back-btn {
order: 4;
flex: 0 0 auto;
justify-content: flex-end;
min-height: 0;
}
.site-top .topbar-right > [data-topbar-auth-user] {
order: 5;
flex: 0 0 auto;
display: inline-flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px 12px;
}
}