:root {
  --bg: #f7f2e9; --ink: #211f1b; --sub: #6b6459;
  --accent: #8a5638; --accent2: #b8855f; --line: #e4dccd; --card: #ffffff;
  --paper: #fbf7ef; --gold: #c2a266; --seal: #b5402f;
  --font-body: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  --font-serif: 'Gowun Batang', 'Noto Serif KR', serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body);
  background: var(--bg); color: var(--ink); line-height: 1.7; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: var(--font-body); }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }

header.top { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--card); }
.logo { font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; color: var(--accent); text-decoration: none; }
header.top nav a { margin-left: 12px; color: var(--sub); text-decoration: none; font-size: .95rem; }
footer { text-align: center; color: var(--sub); font-size: .8rem; padding: 24px;
  border-top: 1px solid var(--line); }

h1 { font-family: var(--font-serif); font-weight: 700; font-size: 1.7rem; line-height: 1.45; text-wrap: balance; }
h2, h3 { font-family: var(--font-serif); text-wrap: balance; }
.tiny { font-size: .82rem; color: var(--sub); }
.error { color: #b3261e; background: #fdecea; padding: 10px 14px; border-radius: 8px; }

.btn-primary { display: inline-block; background: var(--accent); color: #fff; border: none;
  padding: 12px 26px; border-radius: 999px; font-size: 1rem; font-weight: 700;
  text-decoration: none; cursor: pointer; }
.btn-primary:hover { background: var(--accent2); }
.btn-ghost { display: inline-block; color: var(--accent); border: 1px solid var(--accent);
  padding: 9px 22px; border-radius: 999px; text-decoration: none; }
.btn-sm { background: var(--accent); color: #fff !important; padding: 5px 14px; border-radius: 999px; }

/* 랜딩 */
.hero { text-align: center; padding: 56px 0 40px; }
.hero .sub { color: var(--sub); margin: 16px 0 28px; }
.features { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 14px; }
.card { background: var(--card); border: 1px solid rgba(44,42,38,.05); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(44,42,38,.04), 0 6px 16px rgba(44,42,38,.05); }
.how { margin-top: 44px; text-align: center; }
.how ol { text-align: left; max-width: 460px; margin: 18px auto 26px; }

/* 위저드 */
.wizard { background: var(--card); border: 1px solid rgba(44,42,38,.05); border-radius: 20px; padding: 26px;
  box-shadow: 0 1px 2px rgba(44,42,38,.04), 0 6px 16px rgba(44,42,38,.05); }
.progress { height: 6px; background: var(--line); border-radius: 999px; margin-bottom: 26px; }
.progress .bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.step { display: none; }
.step.active { display: block; }
.step label, .step fieldset { display: block; margin: 16px 0; font-weight: 600; }
.step input[type=date], .step input[type=text], .step select, .step textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; font-weight: 400; }
.step fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.step legend { padding: 0 6px; font-size: .95rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 4px; }
.chk { font-weight: 400 !important; margin: 2px 0 !important; }
.nav { display: flex; justify-content: space-between; margin-top: 26px; }
.nav button { padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 1rem; }
.nav button.btn-primary { background: var(--accent); color: #fff; border: none; }
.nav button.btn-primary:hover { background: var(--accent2); }

/* 로딩 */
.loadbox { text-align: center; padding: 40px 0; }
.spinner { width: 46px; height: 46px; border: 4px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; margin: 0 auto 18px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 리포트 */
.report .oneline { color: var(--sub); font-style: italic; }
.demo-badge { background: #fff6e5; border: 1px solid #f0d9a8; padding: 10px 14px;
  border-radius: 10px; font-size: .88rem; }
.pillars { border-collapse: collapse; width: 100%; text-align: center; }
.pillars th, .pillars td { border: 1px solid var(--line); padding: 8px 6px; }
.pillars .gan, .pillars .zhi { display: block; font-size: 1.25rem; font-weight: 700; }
.pillars .na { color: var(--sub); font-size: .85rem; }
.sec { margin: 18px 0; }
.sec h2 { font-size: 1.12rem; margin: 0 0 8px; color: var(--accent); }
.sec .sep { margin: 0 6px; color: var(--line); }
.actions { text-align: center; margin: 30px 0; }
.disclaimer { text-align: center; margin-top: 30px; }

/* auth / mypage */
.authbox { max-width: 380px; margin: 30px auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.authbox label { display: block; margin: 14px 0; font-weight: 600; }
.authbox input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; }
.mylist .row { display: flex; gap: 12px; align-items: center; margin: 10px 0;
  text-decoration: none; color: var(--ink); }
.mylist .grow { flex: 1; color: var(--sub); }
.badge { background: var(--accent); color: #fff; font-size: .78rem; padding: 3px 10px; border-radius: 999px; }

/* v2.2 — 고민 칩-채움 */
.chip-hint { margin: 14px 0 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: #fffdf9; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: .9rem; cursor: pointer; text-align: left; line-height: 1.5; }
.chip:hover { border-color: var(--accent2); }
.chip.on { border-color: var(--accent); background: #f8efe7; }
.sr { font-weight: 600; }
/* v2.3 — 관계 모드 토글 */
.modes { display: flex; gap: 8px; margin: 14px 0 6px; }
.mode { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 8px; cursor: pointer; background: #fffdf9; font-weight: 600; }
.mode:has(input:checked) { border-color: var(--accent); background: #f8efe7; }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
/* v2.4 — 요약 카드 + 한글 우선 표기 */
.summary-box { background: #f8efe7; border-color: var(--accent2); }
.summary-box h3 { margin: 0 0 8px; }
.summary-box ul { margin: 0; padding-left: 20px; }
.summary-box li { margin: 4px 0; }
.pillars .gan small, .pillars .zhi small { display: block; font-size: .72rem; font-weight: 400; color: var(--sub); }
/* v2.7 — 타이포그래피 (Pretendard 본문 + 고운바탕 명조 포인트) */
.report .sec p { font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.9; text-wrap: pretty; }
.report .oneline { font-family: var(--font-serif); font-size: 1.02rem; }
.summary-box li { font-family: var(--font-serif); line-height: 1.8; }
.hero .sub { font-size: 1.05rem; }
.sec h2 { font-size: 1.15rem; }
.pillars .gan, .pillars .zhi { font-family: var(--font-serif); }

/* v2.6 — 리포트 피드백 위젯 */
.feedback { text-align: center; background: #fffaf3; }
.feedback h3 { margin: 0 0 6px; }
.stars { margin: 6px 0 12px; }
.star { font-size: 1.9rem; background: none; border: none; cursor: pointer; color: #ddd3c2; padding: 2px 4px; }
.star.on { color: #e8a33d; }
.feedback input { width: 100%; max-width: 460px; margin: 0 auto 12px; display: block;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
/* v2.8 — 로딩 단계 표시 */
.stages { list-style: none; padding: 0; margin: 14px auto 10px; max-width: 300px; text-align: left; }
.stages li { padding: 6px 0 6px 30px; position: relative; color: var(--sub); }
.stages li::before { content: '○'; position: absolute; left: 6px; color: var(--line); }
.stages li.active { color: var(--ink); font-weight: 600; }
.stages li.active::before { content: '●'; color: var(--accent2); animation: pulse 1.2s ease-in-out infinite; }
.stages li.done { color: var(--accent); }
.stages li.done::before { content: '✓'; color: var(--accent); }
@keyframes pulse { 50% { opacity: .35; } }

/* v3.0 — UI 폴리시 패스 (ui-skills: make-interfaces-feel-better) */
.btn-primary, .btn-ghost, .nav button, .chip, .mode, .star {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.btn-primary:active, .nav button:active, .chip:active, .mode:active, .btn-ghost:active { transform: scale(0.96); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent2); outline-offset: 2px; }
.mode:has(input:focus-visible) { outline: 2px solid var(--accent2); outline-offset: 2px; }

#elapsed { font-variant-numeric: tabular-nums; display: inline-block; min-width: 2ch; text-align: right; }
.pillars { font-variant-numeric: tabular-nums; }

.star { min-width: 42px; min-height: 42px; padding: 6px; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.report > * { animation: rise .45s cubic-bezier(.2, 0, 0, 1) both; }
.report > *:nth-child(1) { animation-delay: 0ms; }
.report > *:nth-child(2) { animation-delay: 70ms; }
.report > *:nth-child(3) { animation-delay: 140ms; }
.report > *:nth-child(4) { animation-delay: 210ms; }
.report > *:nth-child(5) { animation-delay: 280ms; }
.report > *:nth-child(6) { animation-delay: 350ms; }
.report > *:nth-child(7) { animation-delay: 420ms; }
.report > *:nth-child(8) { animation-delay: 490ms; }
.report > *:nth-child(9) { animation-delay: 560ms; }
.report > *:nth-child(10) { animation-delay: 630ms; }
.report > *:nth-child(n+11) { animation-delay: 700ms; }
@media (prefers-reduced-motion: reduce) { .report > * { animation: none; } }
/* v3.1 — 한국어 줄바꿈(낱자 낙하 방지) + 모바일 레이아웃 */
body { word-break: keep-all; overflow-wrap: break-word; }
.tiny { text-wrap: pretty; }
footer p { max-width: 560px; margin: 4px auto; text-wrap: pretty; }
.disclaimer { max-width: 560px; margin-left: auto; margin-right: auto; }
.score-caption { text-wrap: pretty; }
@media (max-width: 480px) {
  main { padding: 16px 12px 48px; }
  h1 { font-size: 1.42rem; letter-spacing: -0.02em; }
  .hero { padding: 36px 0 26px; }
  .hero .sub { font-size: .98rem; }
  .wizard { padding: 18px 14px; border-radius: 16px; }
  .card { padding: 16px 14px; }
  .report .sec p { font-size: 1rem; line-height: 1.85; }
  .pillars .gan, .pillars .zhi { font-size: 1.05rem; }
  .chip { font-size: .86rem; padding: 7px 12px; }
  header.top { padding: 12px 14px; }
}
/* v3.2 — 궁합 점수 카드 */
.scores h3 { margin: 0 0 12px; }
.score-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.score-label { flex: 0 0 132px; font-weight: 600; font-size: .95rem; }
.score-bar { flex: 1; height: 10px; background: #f0e9dd; border-radius: 999px; overflow: hidden; }
.score-fill { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 999px;
  animation: fillUp .9s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes fillUp { from { width: 0 !important; } }
.score-val { flex: 0 0 34px; text-align: right; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.score-note { margin: 0 0 8px 142px; }
.score-caption { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
@media (max-width: 480px) {
  .score-label { flex-basis: 104px; font-size: .88rem; }
  .score-note { margin-left: 0; }
}
/* v3.4 — 성별 버튼 선택 + 필드 라벨 */
.fieldlabel { font-weight: 600; margin: 16px 0 6px; }
.genders { margin: 0 0 4px; }
.genders .mode { padding: 10px 8px; }
/* v3.5 — 소셜 로그인 버튼 */
.social-login { margin: 6px 0 18px; }
.btn-kakao, .btn-naver { display: block; text-align: center; padding: 12px; border-radius: 10px;
  font-weight: 700; text-decoration: none; margin: 8px 0;
  transition: filter .15s ease, transform .1s ease; }
.btn-kakao:active, .btn-naver:active { transform: scale(0.96); }
.btn-kakao { background: #FEE500; color: #191919; }
.btn-naver { background: #03C75A; color: #fff; }
.btn-kakao:hover, .btn-naver:hover { filter: brightness(.96); }
.n-logo { font-weight: 900; }
.or-line { text-align: center; margin: 14px 0 0; position: relative; }
/* v4.0 — 상세 리포트·결제 */
.detail-cta { text-align: center; background: linear-gradient(180deg, #fdf6ec, #fffaf3); border-color: var(--accent2); }
.detail-cta h3 { margin: 0 0 6px; }
.detail-cta .btn-primary { margin-top: 8px; }
.paybox .price { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; color: var(--accent); text-align: center; margin: 14px 0; }
/* v4.1 — 사업자 정보 푸터 + 약관 페이지 */
.legal-links a { color: var(--sub); text-decoration: underline; }
.biz-info { font-size: .75rem; color: #8d877c; line-height: 1.7; max-width: 640px; margin: 10px auto; }
.legal h1 { margin-bottom: 18px; }
.legal .sec p { font-family: var(--font-body); font-size: .95rem; line-height: 1.8; }
/* v4.2 — 심층 주제 선택 */
.topic-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.topic-item { display: flex; gap: 10px; align-items: flex-start; background: #fffdf9;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; cursor: pointer; text-align: left; }
.topic-item:has(input:checked) { border-color: var(--accent); background: #f8efe7; }
.topic-chosen { background: #f8efe7; border-radius: 10px; padding: 10px 14px; }
/* v4.3 — 실시간 지표 배너 */
.stats { display: flex; justify-content: center; gap: 28px; margin-top: 26px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat strong { font-family: var(--font-serif); font-size: 1.35rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat em { font-style: normal; font-size: .78rem; color: var(--sub); }
/* v4.4 — 하단 영역 리듬 정리 + 공유 버튼 */
.detail-cta { margin-top: 38px; padding: 26px 20px; border-width: 2px; }
.detail-cta h3 { font-size: 1.25rem; }
.feedback { background: transparent; border: none; box-shadow: none; border-radius: 0;
  border-top: 1px dashed var(--line); margin-top: 34px; padding-top: 28px; animation: none; }
.actions { margin-top: 26px; }
.btn-share { display: inline-block; margin-left: 8px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--accent); background: #fff; color: var(--accent); font-weight: 700;
  font-size: .95rem; cursor: pointer; transition: background-color .15s ease, transform .1s ease; }
.btn-share:active { transform: scale(0.96); }
@media (max-width: 480px) {
  .btn-share { margin-left: 0; margin-top: 8px; display: block; width: 100%; }
  .feedback .btn-primary { display: block; width: 100%; }
}

/* v5.1 — 티저 왼쪽 정렬 + 문장 이어지다 흐려지는 표현 */
.detail-cta .cta-sub { line-height: 1.85; }
.detail-cta .teaser, .detail-cta .teaser li, .detail-cta .tz-note { text-align: left; }
.tz-text { display: block; font-family: var(--font-serif); font-size: .92rem;
  color: var(--ink); line-height: 1.7; }
.tz-blur { display: inline; filter: blur(4px); user-select: none; pointer-events: none;
  color: var(--sub); }

/* v5.2 — 티저 라벨 강조 + 핵심만 흐림 */
.tz-label { font-weight: 800; color: var(--ink); font-size: .95rem; }

/* v5.3 — 첫 화면 = 위저드 */
.hero-mini { text-align: center; padding: 18px 0 6px; margin-bottom: 18px; }
.hero-mini h1 { font-size: 1.42rem; margin: 0 0 8px; }
.hero-mini .tiny { margin: 0; }
.wizard + .features { margin-top: 34px; }

/* v5.4 — 첫 화면 재배치: 히어로 → 질문 후크 → 기능 카드 → 위저드 */
.hero-top { padding: 40px 0 8px; }
.qhooks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 34px; }
@media (max-width: 560px) { .qhooks { grid-template-columns: 1fr; } }
.qhook { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 16px; font-size: .92rem; line-height: 1.55; color: var(--ink); cursor: pointer;
  box-shadow: 0 1px 2px rgba(44,42,38,.04); font-family: var(--font-body); }
.qhook:hover { border-color: var(--accent2); background: #fffaf3; }
.qhook strong { display: inline-block; color: var(--accent); margin: 0 8px 0 4px; }
.features { margin-bottom: 34px; gap: 14px; }
.wizard { margin-top: 0; }
.wizard .step h2 { font-size: 1.12rem; margin-top: 4px; }
.wizard { padding: 22px 22px 18px; }
.step label, .step fieldset, .fieldlabel { margin: 13px 0 6px; font-size: .95rem; }
.step input[type=text], .step select, .step textarea { padding: 9px 11px; font-size: .95rem; }
.modes .mode { padding: 10px 6px; font-size: .93rem; }

/* v5.5 — 질문 후크: 말풍선 채팅 스타일 (좌우 교차 + 순차 등장) */
.qhooks { display: flex; flex-direction: column; gap: 11px; max-width: 540px;
  margin: 28px auto 40px; grid-template-columns: none; }
.qhook { width: fit-content; max-width: 86%; border-radius: 20px; padding: 11px 17px;
  font-size: .93rem; box-shadow: 0 2px 6px rgba(44,42,38,.06);
  opacity: 0; animation: qrise .55s ease-out forwards; }
.qhook:nth-child(odd)  { align-self: flex-start; border-bottom-left-radius: 6px; background: #fff; }
.qhook:nth-child(even) { align-self: flex-end;   border-bottom-right-radius: 6px;
  background: #f8efe7; border-color: #eadbc8; }
.qhook strong { display: block; font-size: .8rem; color: var(--accent); margin: 0 0 3px; }
.qhook:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(44,42,38,.1);
  border-color: var(--accent2); transition: all .18s; }
.qhook:nth-child(1) { animation-delay: .05s; } .qhook:nth-child(2) { animation-delay: .22s; }
.qhook:nth-child(3) { animation-delay: .39s; } .qhook:nth-child(4) { animation-delay: .56s; }
.qhook:nth-child(5) { animation-delay: .73s; } .qhook:nth-child(6) { animation-delay: .9s; }
@keyframes qrise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qhook { animation: none; opacity: 1; } }

/* v5.6 — 기능 카드 → 박스 없는 아이콘 띠 (페이지의 박스는 위저드 하나만) */
.feat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px 22px; max-width: 640px; margin: 0 auto 40px; text-align: center;
  padding: 26px 0 30px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.feat .fi { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: #f8efe7; font-size: 1.35rem; margin-bottom: 8px; }
.feat b { display: block; font-size: .95rem; margin-bottom: 3px; }
.feat span:not(.fi) { display: block; font-size: .84rem; color: var(--sub); line-height: 1.55; }

/* v6.0 — 로딩 화면 리디자인 (사주 기둥 맞물림 + 방법론 단계 · palette B 토큰) */
#loading .loadcard { text-align: center; padding: 6px 2px 2px; }
#loading .ld-h { font-family: var(--font-serif); font-weight: 700; font-size: 1.34rem; line-height: 1.5; margin: 0; color: var(--ink); }
#loading .ld-sub { font-size: .86rem; color: var(--sub); margin: 8px 0 0; }
#loading .ld-pillars { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 22px; }
#loading .col { display: flex; flex-direction: column; gap: 8px; align-items: center; }
#loading .who { font-family: var(--font-serif); font-size: .84rem; color: var(--accent); margin-bottom: 2px; }
#loading .cell { position: relative; width: 52px; height: 34px; background: var(--card);
  border: 1px solid var(--line); border-radius: 7px; overflow: hidden; opacity: .22; transform: translateY(6px); }
#loading .cell .st { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
#loading .seam { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 32px; }
#loading .seam .ln { position: absolute; top: 24px; bottom: 8px; width: 1px; border-left: 1px dashed var(--line); }
#loading .knot { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #5a4a25;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: normal;
  font-size: .78rem; z-index: 1; opacity: 0; transform: scale(.6); transition: opacity .7s ease, transform .7s ease; }
#loading .knot.on { opacity: 1; transform: scale(1); }
#loading.active .cell { animation: ldcell .6s ease both; animation-delay: var(--d, 0s); }
@keyframes ldcell { to { opacity: 1; transform: none; } }
#loading .ld-stages { text-align: left; max-width: 264px; margin: 0 auto; display: flex; flex-direction: column; gap: 11px; }
#loading .ld-stage { display: flex; align-items: center; gap: 10px; margin: 0; }
#loading .ld-ic { width: 18px; display: inline-flex; justify-content: center; align-items: center; }
#loading .ld-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #c9bfa9; box-sizing: border-box; display: inline-block; }
#loading .ld-check { display: none; color: var(--accent); font-style: normal; font-weight: 700; }
#loading .ld-stage.done .ld-dot { display: none; }
#loading .ld-stage.done .ld-check { display: inline-flex; }
#loading .ld-stage.active .ld-dot { background: var(--accent); border-color: var(--accent); animation: lddot 1.2s ease-in-out infinite; }
#loading .ld-lbl { font-size: .92rem; color: #9a9286; }
#loading .ld-stage.active .ld-lbl { color: var(--ink); font-weight: 600; }
#loading .ld-stage.done .ld-lbl { color: var(--ink); }
@keyframes lddot { 50% { opacity: .4; } }
#loading .ld-tip { font-size: .84rem; color: var(--sub); min-height: 38px; margin: 20px 6px 0; line-height: 1.6; transition: opacity .35s ease; }
#loading .ld-meta { font-size: .78rem; color: #9a9286; margin: 6px 0 0; }
@media (max-width: 480px) { #loading .cell { width: 46px; height: 30px; } #loading .ld-h { font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) {
  #loading .cell { opacity: 1; transform: none; }
  #loading.active .cell { animation: none; }
  #loading .knot { transition: none; }
  #loading .ld-stage.active .ld-dot { animation: none; }
}

/* v6.1 — Phase A: 라인 아이콘 + 방법론·안심 밴드 */
.qhook strong { display: flex; align-items: center; gap: 6px; }
.qi { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }
.method { max-width: 640px; margin: 0 auto 36px; padding: 24px 4px 22px;
  border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.method-h { font-family: var(--font-serif); font-weight: 700; font-size: 1.06rem; text-align: center; margin: 0 0 18px; color: var(--ink); }
.method-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 18px 22px; }
.ms { text-align: center; }
.ms-ic { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--accent); margin: 0 auto 9px; }
.ms-ic svg { width: 22px; height: 22px; display: block; }
.ms b { display: block; font-size: .95rem; margin-bottom: 3px; color: var(--ink); }
.ms > span:not(.ms-ic) { display: block; font-size: .83rem; color: var(--sub); line-height: 1.55; }
.method-trust { max-width: 560px; margin: 20px auto 0; text-align: center; font-size: .8rem; color: var(--sub); line-height: 1.7; }
.method-trust .lock-ic { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--accent); }
.method-trust .lock-ic svg { width: 13px; height: 13px; }
.method-trust strong { color: var(--ink); font-weight: 600; }
.method-trust a { color: var(--sub); text-decoration: underline; }

/* v6.2 — result 리포트 인라인 라인 아이콘 (이모지 대체) */
.report .ic-in { width: 17px; height: 17px; display: inline-block; vertical-align: -0.22em; margin-right: 6px; color: var(--accent); }
.report .sec h2 .ic-in { width: 20px; height: 20px; vertical-align: -0.24em; }
.report .tz-label .ic-in { width: 14px; height: 14px; vertical-align: -0.18em; margin-right: 4px; }
.report .demo-badge .ic-in { color: #b07d2e; }
.report .btn-primary .ic-in { color: #fff; }

/* v7.0 — 세일즈 랜딩 (히어로 모핑·후크·예시 티저·스크롤 등장) */
html { scroll-behavior: smooth; }
/* 히어로 관계 모핑 */
.hero-morph { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 2px; }
.hm-fig { width: 46px; height: 46px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--accent); animation: hmfp 2.2s ease-in-out infinite; }
.hm-fig.b { animation-delay: 1.1s; }
.hm-fig svg { width: 23px; height: 23px; }
.hm-lnk { width: 32px; height: 32px; border-radius: 50%; background: #f5ead9; border: 1px solid #ead8bd;
  display: flex; align-items: center; justify-content: center; color: var(--accent); transition: opacity .3s ease; }
.hm-lnk svg { width: 17px; height: 17px; }
.hm-label { font-family: var(--font-serif); color: var(--accent); font-size: .85rem; text-align: center;
  transition: opacity .3s ease; min-height: 18px; margin: 2px 0 0; }
@keyframes hmfp { 50% { transform: translateY(-3px); } }
.land-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--accent);
  color: #fff; border: none; border-radius: 999px; padding: 13px 26px; font-size: 1rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, transform .1s ease; }
.land-cta:hover { background: var(--accent2); } .land-cta:active { transform: scale(.97); }
.land-cta svg { width: 18px; height: 18px; }
/* 섹션 라벨 + 금사 라인 */
.land-lab { font-size: .82rem; color: var(--accent); letter-spacing: .03em; margin: 0 0 4px; font-weight: 600; }
.land-labu { width: 22px; height: 2px; background: var(--gold); border-radius: 2px; margin: 0 0 16px; }
/* 후크 */
.hooks { max-width: 560px; margin: 0 auto 40px; padding: 0 4px; }
.hk2 { display: flex; gap: 13px; align-items: center; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.hk2:last-child { border-bottom: none; }
.hk2 .hkn { font-family: var(--font-serif); font-size: .9rem; color: var(--gold); font-weight: 700; min-width: 20px; }
.hk2 .hki { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line);
  color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hk2 .hki svg { width: 18px; height: 18px; }
.hk2 b { display: block; font-size: .95rem; margin-bottom: 2px; }
.hk2 .hkd { display: block; font-size: .83rem; color: var(--sub); line-height: 1.5; }
/* 예시 티저 */
.ez { max-width: 560px; margin: 0 auto 40px; }
.ez-sub { text-align: center; color: var(--sub); font-size: .85rem; margin: 0 0 16px; }
.tzc { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 11px; }
.tzc .tzt { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--accent);
  background: #f5ead9; border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.tzc .tzt svg { width: 13px; height: 13px; }
.tzc .tzl { font-weight: 600; font-size: .92rem; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.tzc .tzl svg { width: 14px; height: 14px; color: var(--gold); flex: 0 0 auto; }
.tzc .tzx { font-family: var(--font-serif); font-size: .88rem; line-height: 1.85; margin: 0; color: var(--ink); }
.tzc .tzb { filter: blur(3.5px); color: var(--sub); user-select: none; }
.ez-foot { text-align: center; color: var(--sub); font-size: .82rem; margin: 14px 0 0; }
/* 스크롤 등장 */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.2,0,0,1), transform .55s cubic-bezier(.2,0,0,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hm-fig { animation: none; } html { scroll-behavior: auto; } }

/* v8.0 — 인트로 영상 히어로 (풀블리드 영상 배경 + HTML 헤드라인) */
html { overflow-x: clip; }
.vhero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: -24px;
  min-height: 86vh; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; background: #17130e; }
.vhero-poster, .vhero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vhero-poster { z-index: 0; }
.vhero-bg { z-index: 1; opacity: 0; transition: opacity .9s ease; }
.vhero-bg.in { opacity: 1; }
.vhero-scrim { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(20,15,10,.55) 0%, rgba(20,15,10,.22) 36%, rgba(20,15,10,.42) 70%, rgba(20,15,10,.8) 100%); }
.vhero-inner { position: relative; z-index: 3; max-width: 680px; padding: 46px 22px; color: #fbf7ef; }
.vhero-eyebrow { font-size: .85rem; color: #f0dcc4; letter-spacing: .05em; margin: 0 0 14px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.vhero h1 { font-family: var(--font-serif); font-weight: 700; font-size: 2.1rem; line-height: 1.42; letter-spacing: -.01em; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.vhero h1 .grad { color: #f0c179; background: linear-gradient(92deg, #f0c179, #d9ad6c 45%, #e7c79a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vhero-sub { font-size: 1.02rem; color: #efe6d6; margin: 16px auto 0; line-height: 1.78; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.vhero-sub strong { color: #f3deba; }
.vhero-tiny { font-size: .85rem; color: #e3d8c6; margin: 14px 0 0; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.vhero-stats { display: flex; gap: 26px; justify-content: center; margin: 22px 0 0; }
.vhero-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.vhero-stats .stat strong { font-size: 1.2rem; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.vhero-stats .stat em { font-size: .76rem; color: #ddd0bd; font-style: normal; }
.vhero-cta-wrap { margin: 26px 0 0; }
.vhero .land-cta { box-shadow: 0 8px 26px rgba(0,0,0,.35); }
.vhero-cue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: #f0e6d6; font-size: .72rem;
  opacity: .85; transition: opacity .4s ease; animation: vbob 1.9s ease-in-out infinite; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.vhero-cue.hide { opacity: 0; pointer-events: none; }
@keyframes vbob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@media (max-width: 600px) { .vhero { min-height: 88vh; } .vhero h1 { font-size: 1.66rem; } .vhero-sub { font-size: .96rem; } .vhero-inner { padding: 38px 20px; } }
@media (prefers-reduced-motion: reduce) { .vhero-bg { transition: none; } .vhero-cue { animation: none; } }

/* v8.1 — 섹션 시각 강화 (스태거 등장·번호 뱃지·오행 순환색·아이콘 부유) */
.reveal.stagger { opacity: 1; transform: none; }
.reveal.stagger > * { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.stagger.in > * { opacity: 1; transform: none; }
.reveal.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.reveal.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.reveal.stagger.in > *:nth-child(3) { transition-delay: .20s; }
.reveal.stagger.in > *:nth-child(4) { transition-delay: .28s; }
.reveal.stagger.in > *:nth-child(5) { transition-delay: .36s; }
.reveal.stagger.in > *:nth-child(6) { transition-delay: .44s; }
.reveal.stagger.in > *:nth-child(7) { transition-delay: .52s; }
/* 메서드 번호 뱃지 */
.method-steps { counter-reset: msn; }
.ms { counter-increment: msn; }
.ms-ic { position: relative; }
.ms-ic::after { content: counter(msn); position: absolute; top: -3px; right: -3px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--gold); color: #fff;
  font-family: var(--font-body); font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center; }
/* 후크 아이콘 오행 순환색 + 부유 */
@keyframes ohcycle {
  0%, 16% { color: #5b8c6a; border-color: #5b8c6a; }
  20%, 36% { color: #c45b48; border-color: #c45b48; }
  40%, 56% { color: #c8a15a; border-color: #c8a15a; }
  60%, 76% { color: #a9a397; border-color: #a9a397; }
  80%, 96% { color: #4a6c8c; border-color: #4a6c8c; }
  100% { color: #5b8c6a; border-color: #5b8c6a; }
}
@keyframes hfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.hk2 .hki { animation: ohcycle 15s linear infinite; }
.hooks .hk2:nth-child(4) .hki { animation-delay: -3s; }
.hooks .hk2:nth-child(5) .hki { animation-delay: -6s; }
.hooks .hk2:nth-child(6) .hki { animation-delay: -9s; }
.hk2 .hki svg { animation: hfloat 3.4s ease-in-out infinite; }
.hooks .hk2:nth-child(4) .hki svg { animation-delay: -.8s; }
.hooks .hk2:nth-child(5) .hki svg { animation-delay: -1.6s; }
.hooks .hk2:nth-child(6) .hki svg { animation-delay: -2.4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal.stagger > * { opacity: 1; transform: none; transition: none; }
  .hk2 .hki, .hk2 .hki svg { animation: none; }
}

/* v9.0 — 글자 강조·위계 (형광펜·큰 헤드라인·CTA 그라데이션·색 포인트) */
.hl { background: linear-gradient(transparent 55%, rgba(194,162,102,.45) 55%, rgba(194,162,102,.45) 92%, transparent 92%); padding: 0 .05em; border-radius: 1px; }
.hl-seal { color: var(--seal); font-weight: 700; }
.land-lab { font-family: var(--font-serif); font-size: 1.46rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; margin: 0 0 9px; }
.method-h { font-size: 1.5rem; }
.land-cta { background: linear-gradient(92deg, var(--accent), var(--accent2)); }
.land-cta:hover { background: linear-gradient(92deg, var(--accent2), var(--accent)); }
@media (max-width: 600px) { .land-lab { font-size: 1.26rem; } .method-h { font-size: 1.3rem; } }

/* v9.1 — 오행 휠 그래픽 */
.ohw { max-width: 560px; margin: 4px auto 40px; text-align: center; }
.ohw-h { text-align: center; }
.ohw-wrap { width: 252px; max-width: 78%; margin: 6px auto 14px; }
.ohw-svg { width: 100%; height: auto; display: block; }
.ohw-cap { color: var(--sub); font-size: .92rem; line-height: 1.7; margin: 0; }
.ohw-cap strong { color: var(--ink); font-weight: 700; }
.ohw-el { transform-box: fill-box; transform-origin: center; animation: ohpulse 4.2s ease-in-out infinite; }
.ohw-el.e2 { animation-delay: .85s; }
.ohw-el.e3 { animation-delay: 1.7s; }
.ohw-el.e4 { animation-delay: 2.55s; }
.ohw-el.e5 { animation-delay: 3.4s; }
@keyframes ohpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ohw-el { animation: none; } }