/* ============================================================
Relatus Lab 공용 컴포넌트 스타일
------------------------------------------------------------
랜딩과 4개 테스트가 함께 쓰는, 값까지 완전히 동일한 규칙만 모았습니다.
색·간격은 전부 CSS 변수(var(--…))를 참조하므로, 실제 색감은
각 페이지 CSS의 :root 변수 블록이 결정합니다.
▸ 사용법: 페이지 에서 폰트 다음, 페이지 CSS 이전에 로드
▸ 여기 있는 규칙을 고치면 모든 페이지가 함께 바뀝니다.
한 테스트만 다르게 하려면 그 테스트의 style.css에서 같은
셀렉터로 덮어쓰세요 (나중에 로드되므로 이깁니다).
▸ 컴포넌트 목록
.theme-toggle 우상단 테마 전환 버튼 (_theme.js와 세트)
.screen 화면 전환 단위 (.on으로 표시, fade 애니메이션)
.hero 인트로 타이틀 블록
.badges .badge 인트로 뱃지 줄
.btn 기본 CTA는 페이지별, :active/.ghost/연속 간격은 공용
.top .qcount 퀴즈 상단(이전 버튼+카운터)
.bar i 진행 바 채움
.quiz-target 퀴즈 안내 스트립
.opts .opt 선택지 버튼 (기본 모양은 페이지별, hover/active 공용)
.card h3 결과 카드 소제목
.traits 결과 특징 리스트
.advice-foot 조언 카드 각주
.toast.show 토스트 표시 상태
============================================================ */
.theme-toggle {
position: fixed;
top: 14px;
right: 14px;
z-index: 20;
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
font-family: inherit;
background: var(--card);
border: 1px solid var(--line);
color: var(--ink);
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
transition: transform .12s ease, border-color .12s ease;
}
.theme-toggle:hover {
border-color: var(--accent)
}
.theme-toggle:active {
transform: scale(.92)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent
}
html, body {
height: 100%
}
.screen {
display: none;
animation: fade .35s ease
}
.screen.on {
display: block
}
@keyframes fade {
from {
opacity: 0;
transform: translateY(10px)
}
to {
opacity: 1;
transform: none
}
}
.hero h1 {
font-size: 30px;
line-height: 1.35;
font-weight: 800;
margin-bottom: 16px;
word-break: keep-all
}
.hero h1 em {
font-style: normal;
color: var(--accent)
}
.hero p {
color: var(--sub);
font-size: 15px;
line-height: 1.7;
margin-bottom: 10px;
word-break: keep-all
}
.badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 22px 0 30px
}
.badge b {
color: var(--ink);
font-weight: 700
}
.btn:active {
transform: scale(.97)
}
.btn.ghost {
background: var(--card);
box-shadow: none;
border: 1px solid var(--line);
color: var(--ink);
font-weight: 700
}
.btn+.btn {
margin-top: 12px
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px
}
.qcount {
font-size: 13px;
color: var(--sub);
font-variant-numeric: tabular-nums
}
.bar i {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), var(--accent2));
border-radius: 99px;
transition: width .3s ease
}
.quiz-target {
font-size: 12.5px;
color: var(--sub);
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 9px 12px;
margin-bottom: 16px;
word-break: keep-all
}
.quiz-target b {
color: var(--accent)
}
.opts {
display: flex;
flex-direction: column;
gap: 10px
}
.opt:active {
transform: scale(.98)
}
.opt:hover {
border-color: var(--accent)
}
.group-tag span {
font-size: 12.5px;
color: var(--sub);
border: 1px solid var(--line);
padding: 6px 12px;
border-radius: 99px
}
.card h3 {
font-size: 14px;
color: var(--accent);
margin-bottom: 14px;
letter-spacing: .02em
}
.traits {
list-style: none
}
.traits li:last-child {
border-bottom: 0
}
.advice-foot {
font-size: 12.5px !important;
color: var(--mut) !important;
line-height: 1.7;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line)
}
.advice-foot b {
color: var(--sub)
}
.toast.show {
opacity: 1;
transform: translateX(-50%)
}
/* ---------- 광고 슬롯 (공용) ---------- */
.ad-slot {
margin: 26px 0;
display: flex;
justify-content: center;
overflow: hidden;
}
.ad-slot:empty { display: none }
/* 광고가 채워지지 않으면 자리를 차지하지 않게 */
.ad-slot ins.kakao_ad_area:not([style*="inline"]) { display: none !important }