/* ============================================================================
   MindFin Components (B2C 개편 0단계)
   tokens.css 의 변수를 사용. 전부 'mf-' 클래스 한정 → 기존 페이지 영향 없음.
   새/개편 페이지는 이 클래스를 사용해 일관된 룩을 얻는다.
   ============================================================================ */

/* ── 페이지 베이스(옵트인): body에 class="mf-page" ── */
.mf-page {
    margin: 0;
    font-family: var(--mf-font);
    font-size: var(--mf-fs-body);
    line-height: var(--mf-lh-body);
    color: var(--mf-text);
    background: var(--mf-bg);
    -webkit-font-smoothing: antialiased;
}
.mf-container { width: 100%; box-sizing: border-box; max-width: var(--mf-container); margin: 0 auto; padding: 0 var(--mf-space-4); }
.mf-container--wide { max-width: var(--mf-container-wide); }

/* ── 타이포 유틸 ── */
.mf-display { font-size: var(--mf-fs-display); line-height: var(--mf-lh-display); font-weight: var(--mf-fw-bold); letter-spacing: -.02em; }
.mf-h1 { font-size: var(--mf-fs-h1); line-height: var(--mf-lh-h1); font-weight: var(--mf-fw-bold); letter-spacing: -.01em; }
.mf-h2 { font-size: var(--mf-fs-h2); line-height: var(--mf-lh-h2); font-weight: var(--mf-fw-bold); }
.mf-h3 { font-size: var(--mf-fs-h3); line-height: var(--mf-lh-h3); font-weight: var(--mf-fw-semibold); }
.mf-sub { color: var(--mf-text-sub); }
.mf-caption { font-size: var(--mf-fs-sm); line-height: var(--mf-lh-sm); color: var(--mf-text-sub); }

/* ── 버튼 ── */
.mf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--mf-space-2);
    font-family: var(--mf-font); font-size: var(--mf-fs-body); font-weight: var(--mf-fw-semibold);
    padding: 12px 20px; border-radius: var(--mf-radius); border: 1px solid transparent;
    cursor: pointer; text-decoration: none; transition: background var(--mf-dur) var(--mf-ease), transform var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease);
    user-select: none; white-space: nowrap;
}
.mf-btn:active { transform: translateY(1px); }
.mf-btn:disabled, .mf-btn[disabled] { opacity: .5; cursor: not-allowed; }
.mf-btn--primary { background: var(--mf-primary); color: var(--mf-text-onbrand); box-shadow: var(--mf-shadow-sm); }
.mf-btn--primary:hover { background: var(--mf-primary-600); }
.mf-btn--accent { background: var(--mf-accent); color: #fff; box-shadow: var(--mf-shadow-sm); }
.mf-btn--accent:hover { background: var(--mf-accent-600); }
.mf-btn--ghost { background: var(--mf-surface); color: var(--mf-gray-700); border-color: var(--mf-border); }
.mf-btn--ghost:hover { background: var(--mf-gray-050); }
.mf-btn--quiet { background: transparent; color: var(--mf-primary); padding: 8px 12px; }
.mf-btn--quiet:hover { background: var(--mf-primary-050); }
.mf-btn--lg { padding: 16px 28px; font-size: 16px; border-radius: var(--mf-radius-lg); }
.mf-btn--sm { padding: 8px 14px; font-size: var(--mf-fs-sm); }
.mf-btn--block { display: flex; width: 100%; }
.mf-btn--pill { border-radius: var(--mf-radius-pill); }

/* ── 카드 ── */
.mf-card {
    background: var(--mf-surface); border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg); padding: var(--mf-space-5); box-shadow: var(--mf-shadow-sm);
}
.mf-card--flat { box-shadow: none; }
.mf-card--pad-lg { padding: var(--mf-space-6); }
.mf-card--brand { background: linear-gradient(180deg, var(--mf-primary-050), #fff); border-color: var(--mf-primary-100); }

/* ── 입력 ── */
.mf-field { display: block; margin-bottom: var(--mf-space-4); }
.mf-label { display: block; font-size: var(--mf-fs-sm); font-weight: var(--mf-fw-medium); color: var(--mf-gray-700); margin-bottom: var(--mf-space-2); }
.mf-input {
    width: 100%; box-sizing: border-box; font-family: var(--mf-font); font-size: var(--mf-fs-body);
    color: var(--mf-text); background: var(--mf-surface);
    padding: 12px 14px; border: 1px solid var(--mf-gray-300); border-radius: var(--mf-radius);
    transition: border-color var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease);
}
.mf-input::placeholder { color: var(--mf-gray-400); }
.mf-input:focus { outline: none; border-color: var(--mf-primary); box-shadow: 0 0 0 3px var(--mf-primary-100); }

/* ── 배지 / 칩 ── */
.mf-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mf-fs-xs); font-weight: var(--mf-fw-semibold); padding: 4px 10px; border-radius: var(--mf-radius-pill); }
.mf-badge--primary { background: var(--mf-primary-050); color: var(--mf-primary-700); }
.mf-badge--accent  { background: var(--mf-accent-050);  color: var(--mf-accent-600); }
.mf-badge--success { background: #DCFCE7; color: #15803D; }
.mf-badge--muted   { background: var(--mf-gray-100); color: var(--mf-gray-600); }
.mf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mf-fs-sm); font-weight: var(--mf-fw-medium); color: var(--mf-gray-700); background: var(--mf-gray-100); padding: 6px 12px; border-radius: var(--mf-radius-pill); }

/* ── 섹션 헤더 ── */
.mf-sec { display: flex; align-items: center; gap: var(--mf-space-3); margin: var(--mf-space-6) 0 var(--mf-space-3); }
.mf-sec__num { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--mf-primary-050); color: var(--mf-primary); font-weight: var(--mf-fw-bold); font-size: var(--mf-fs-sm); }
.mf-sec__title { font-size: var(--mf-fs-h3); font-weight: var(--mf-fw-bold); }

/* ── 상단바 / 네비 ── */
.mf-appbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mf-border); }
.mf-appbar__inner { height: 56px; display: flex; align-items: center; justify-content: space-between; }
/* 뒤로가기 (ui.js가 서브페이지에 자동 주입) — 브랜드 왼쪽 원형 고스트 버튼 */
.mf-back { flex: none; width: 36px; height: 36px; margin-right: 10px; border: 1px solid var(--mf-gray-200); border-radius: 50%; background: #fff; color: var(--mf-gray-700); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s ease, transform .15s ease; }
.mf-back svg { width: 18px; height: 18px; }
.mf-back:hover { background: var(--mf-gray-100); }
.mf-back:active { transform: scale(.92); }
/* back 버튼 주입 시 브랜드가 좌측으로 붙도록 */
.mf-appbar__inner .mf-back + .mf-brand { margin-right: auto; }
.mf-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: var(--mf-fw-bold); font-size: 27px; letter-spacing: .04em; color: var(--mf-primary); text-decoration: none; }
.mf-brand::before { content: ""; display: inline-block; width: 33px; height: 33px; flex: none; background: url('/images/mindfin_logo_blue.png') center / contain no-repeat; }

/* 브랜드 락업 풀 블루 통일 (2026-07-02 골드 폐기):
   기존 페이지의 골드 로고 <img>를 CSS만으로 블루 로고로 교체 +
   로고 이미지 바로 뒤의 MINDFIN 텍스트를 블루로.
   .text-gold 등 그라데이션 클립(-webkit-text-fill-color:transparent)도 덮어쓰도록 강제 */
img[src*="mindfin_new_logo"] { content: url('/images/mindfin_logo_blue.png'); }
img[src*="mindfin_new_logo"] + span {
    color: var(--mf-primary) !important;
    -webkit-text-fill-color: var(--mf-primary) !important;
    background: none !important;
}

/* 한글 어절 단위 줄바꿈 — 어절 중간 끊김("확인하세\n요") 방지 */
.mf-page { word-break: keep-all; overflow-wrap: break-word; }

/* ── 잠금/페이월(미리보기) ── */
.mf-lock { position: relative; overflow: hidden; }
.mf-lock__blur { filter: blur(6px); pointer-events: none; user-select: none; opacity: .5; }
.mf-lock__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(180deg, rgba(255,255,255,0), var(--mf-surface)); pointer-events: none; }

/* ── 캐릭터/결과 카드 (유형 시그니처 색) ── */
/* 사용: <div class="mf-typecard" style="--type:var(--mf-type-5)"> … </div> */
.mf-typecard {
    --type: var(--mf-primary);
    position: relative; border-radius: var(--mf-radius-xl); padding: var(--mf-space-6) var(--mf-space-5);
    color: #fff; overflow: hidden;
    background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--type) 70%, #fff 30%) 0%, var(--type) 55%, color-mix(in srgb, var(--type) 70%, #000 30%) 100%);
    box-shadow: var(--mf-shadow-md);
}
.mf-typecard__eyebrow { font-size: var(--mf-fs-xs); letter-spacing: .14em; text-transform: uppercase; opacity: .9; font-weight: var(--mf-fw-semibold); }
.mf-typecard__title { font-size: 26px; line-height: 1.25; font-weight: var(--mf-fw-bold); margin: 6px 0; letter-spacing: -.01em; }
.mf-typecard__sub { font-size: var(--mf-fs-body); opacity: .92; }
/* 일러스트 폴백: 실제 이미지(images/characters/type_N.png) 없을 때 이모지/번호 표시 */
.mf-typecard__art { width: 96px; height: 96px; border-radius: var(--mf-radius-lg); background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 40px; font-weight: var(--mf-fw-bold); }
.mf-typecard__art img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* ── 유형 색 도트(목록/뱃지용) ── */
.mf-typedot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--type, var(--mf-primary)); }

/* ── 반응형: 데스크톱에서 카드 패딩 키움 ── */
@media (min-width: 768px) {
    .mf-card { padding: var(--mf-space-6); }
}

/* ============================================================================
   Motion & Navigation Layer (2026-07-02 프리미엄 디자인 패스)
   전부 옵트인 클래스 — 기존 페이지 무영향
   ============================================================================ */

/* ── 스크롤 리빌 (js/ui.js가 .is-in 부여) ── */
@media (prefers-reduced-motion: no-preference) {
    .mf-reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
    .mf-reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mf-reveal { opacity: 1; transform: none; }
}

/* ── 버튼 마이크로 인터랙션 (심화) ── */
.mf-btn--accent, .mf-btn--primary { position: relative; overflow: hidden; }
.mf-btn--accent:hover, .mf-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--mf-shadow-md); }
.mf-btn--accent:active, .mf-btn--primary:active { transform: translateY(0) scale(.985); }

/* ── 카드 호버 리프트 (옵트인) ── */
.mf-card--lift { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
.mf-card--lift:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-lg); }

/* ── 앱바: 스크롤 시 유리질 그림자 (js/ui.js가 .is-scrolled 부여) ── */
.mf-appbar { transition: box-shadow .25s ease; }
.mf-appbar.is-scrolled { box-shadow: 0 10px 28px -14px rgba(15,23,42,.16); }
.mf-appbar__nav { display: none; align-items: center; gap: 26px; }
.mf-appbar__nav a { font-size: 14px; font-weight: 600; color: var(--mf-gray-600); text-decoration: none; transition: color .15s ease; }
.mf-appbar__nav a:hover { color: var(--mf-primary); }
@media (min-width: 900px) { .mf-appbar__nav { display: flex; } }

/* ── 모바일 하단 탭바 (앱형 내비, 데스크톱 숨김) ── */
.mf-bottomnav {
    position: fixed; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    display: flex; justify-content: space-around; align-items: flex-end;
    background: rgba(255,255,255,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226,232,240,.9); border-radius: 22px;
    box-shadow: 0 14px 36px -10px rgba(15,23,42,.22);
    padding: 8px 8px calc(8px);
}
.mf-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 600; color: var(--mf-gray-400); text-decoration: none; padding: 4px 0 2px; min-width: 0; }
.mf-bottomnav a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mf-bottomnav a.is-active { color: var(--mf-primary); }
.mf-bottomnav .mf-bottomnav__cta {
    flex: 0 0 58px; width: 58px; height: 58px; margin: -26px 4px 2px; border-radius: 50%;
    display: grid; place-items: center; gap: 0; padding: 0;
    background: linear-gradient(155deg, var(--mf-accent), var(--mf-accent-600)); color: #fff;
    box-shadow: 0 10px 24px -6px rgba(255,107,74,.55), 0 3px 8px rgba(15,23,42,.12);
    border: 3px solid #fff;
    transition: transform .18s cubic-bezier(.2,.7,.2,1);
}
.mf-bottomnav .mf-bottomnav__cta svg { width: 24px; height: 24px; stroke-width: 2.2; }
.mf-bottomnav .mf-bottomnav__cta:active { transform: scale(.92); }
body.has-bottomnav { padding-bottom: 96px; }
.mf-bottomnav__cta { cursor: pointer; font-family: inherit; }
.mf-bottomnav a svg, .mf-bottomnav button svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .mf-bottomnav { display: none; } body.has-bottomnav { padding-bottom: 0; } }