/* ==========================================================================
   WPSaju Engine — 사주팔자 계산기 UI 스타일  v1.1.0  (Phase 5: 궁합 추가)
   ========================================================================== */

/* ── CSS 변수 (테마 컬러) ────────────────────────────────────────────────── */
.wpsaju-wrap {
    --saju-navy:       #1B3A6B;
    --saju-gold:       #C9A84C;
    --saju-gold-bg:    #FDF6E3;
    --saju-bg:         #F5F7FB;
    --saju-card:       #FFFFFF;
    --saju-border:     #DDE3EE;
    --saju-text:       #2C3E50;
    --saju-muted:      #8492A6;
    --saju-radius:     12px;
    --saju-shadow:     0 2px 16px rgba(27,58,107,.10);
    --saju-shadow-sm:  0 1px 6px  rgba(27,58,107,.08);
    /* 오행 컬러 */
    --el-목: #276749;
    --el-화: #C53030;
    --el-토: #B7791F;
    --el-금: #718096;
    --el-수: #2B6CB0;
    /* 궁합 컬러 */
    --gh-pink:    #E53E8A;
    --gh-pink-bg: #FFF0F6;
    --gh-blue:    #2B6CB0;
    --gh-blue-bg: #EBF4FF;
}

/* ── 래퍼 ────────────────────────────────────────────────────────────────── */
.wpsaju-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 16px 56px;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: var(--saju-text);
    line-height: 1.65;
    font-size: 15px;
}

.wpsaju-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--saju-navy);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--saju-gold);
}

/* ── 입력 폼 카드 ────────────────────────────────────────────────────────── */
.wpsaju-form {
    background: var(--saju-card);
    border: 1px solid var(--saju-border);
    border-radius: var(--saju-radius);
    padding: 28px 32px;
    box-shadow: var(--saju-shadow);
    margin-bottom: 28px;
}

.wpsaju-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 18px 20px;
    margin-bottom: 24px;
}

.wpsaju-field--full { grid-column: 1 / -1; }

.wpsaju-field > label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--saju-navy);
    margin-bottom: 6px;
}

.wpsaju-req  { color: #E53E3E; margin-left: 2px; }
.wpsaju-hint { font-weight: 400; color: var(--saju-muted); font-size: .76rem; }

.wpsaju-field input[type="number"],
.wpsaju-field select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--saju-border);
    border-radius: 8px;
    font-size: .92rem;
    color: var(--saju-text);
    background: var(--saju-bg);
    transition: border-color .18s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.wpsaju-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238492A6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.wpsaju-field input[type="number"]:focus,
.wpsaju-field select:focus {
    outline: none;
    border-color: var(--saju-navy);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(27,58,107,.12);
}

.wpsaju-radio-group { display: flex; gap: 18px; padding-top: 6px; }
.wpsaju-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .9rem; font-weight: 500; }
.wpsaju-radio input[type="radio"] { accent-color: var(--saju-navy); }
.wpsaju-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .85rem; color: var(--saju-muted); }
.wpsaju-toggle input[type="checkbox"] { accent-color: var(--saju-navy); }

/* ── 버튼 ────────────────────────────────────────────────────────────────── */
.wpsaju-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--saju-navy) 0%, #2a52a0 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: .03em;
    transition: opacity .2s, transform .12s;
    box-shadow: 0 3px 12px rgba(27,58,107,.35);
}
.wpsaju-btn:hover    { opacity: .92; }
.wpsaju-btn:active   { transform: scale(.99); }
.wpsaju-btn:disabled { opacity: .55; cursor: not-allowed; }

/* 궁합 버튼 핑크 */
.wpsaju-btn--gunghap {
    background: linear-gradient(135deg, #C2185B 0%, var(--gh-pink) 100%);
    box-shadow: 0 3px 12px rgba(229,62,138,.35);
}

/* ── 결과 공통 ───────────────────────────────────────────────────────────── */
.wpsaju-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--saju-navy);
    margin: 32px 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.wpsaju-meta-text { font-size: .85rem; color: var(--saju-muted); margin: 0 0 12px; }

.wpsaju-error {
    background: #FFF5F5;
    border: 1px solid #FC8181;
    border-radius: 8px;
    padding: 14px 18px;
    color: #C53030;
    font-size: .9rem;
    margin-bottom: 16px;
}

.wpsaju-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--saju-radius);
    box-shadow: var(--saju-shadow-sm);
}

/* ── 사주 4기둥 테이블 ───────────────────────────────────────────────────── */
.wpsaju-pillars-table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    table-layout: fixed;
}

.wpsaju-pillars-table thead tr { background: var(--saju-navy); color: #fff; }
.wpsaju-pillars-table thead th {
    padding: 13px 10px;
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.45;
}
.wpsaju-pillars-table thead th.col-label { width: 72px; }

.wpsaju-pillars-table tbody tr:nth-child(odd)  { background: var(--saju-bg); }
.wpsaju-pillars-table tbody tr:nth-child(even) { background: var(--saju-card); }

.wpsaju-pillars-table td {
    padding: 10px 8px;
    text-align: center;
    font-size: 1rem;
    border-bottom: 1px solid var(--saju-border);
    vertical-align: middle;
}

.row-label {
    font-size: .72rem;
    color: var(--saju-muted);
    font-weight: 700;
    line-height: 1.45;
    background: #EDF0F7 !important;
    border-right: 1px solid var(--saju-border);
}

.day-col { background: var(--saju-gold-bg) !important; font-weight: 700; }

.row-glyph td:not(.row-label) {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
    padding: 14px 8px;
}

.row-ss td { font-size: .77rem; color: var(--saju-muted); padding: 6px 8px; }
.muted { color: var(--saju-muted); }

/* ── 오행 색상 ───────────────────────────────────────────────────────────── */
.el-목 { color: var(--el-목); }
.el-화 { color: var(--el-화); }
.el-토 { color: var(--el-토); }
.el-금 { color: var(--el-금); }
.el-수 { color: var(--el-수); }

/* ── 범례 ────────────────────────────────────────────────────────────────── */
.wpsaju-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; font-size: .79rem; font-weight: 700; }

/* ── 대운 테이블 ─────────────────────────────────────────────────────────── */
.wpsaju-daewun-table { width: 100%; min-width: 500px; border-collapse: collapse; }
.wpsaju-daewun-table thead tr { background: #2a52a0; color: #fff; }
.wpsaju-daewun-table thead th { padding: 10px 14px; font-size: .8rem; font-weight: 600; text-align: center; white-space: nowrap; }
.wpsaju-daewun-table tbody tr:nth-child(odd)  { background: var(--saju-bg); }
.wpsaju-daewun-table tbody tr:nth-child(even) { background: var(--saju-card); }
.wpsaju-daewun-table tbody tr:hover { background: var(--saju-gold-bg); }
.wpsaju-daewun-table tbody td { padding: 9px 14px; text-align: center; font-size: .88rem; border-bottom: 1px solid var(--saju-border); white-space: nowrap; }
.dw-num   { font-weight: 700; color: var(--saju-navy); }
.dw-ko    { font-size: 1.05rem; font-weight: 700; }
.dw-hanja { font-size: .78rem; color: var(--saju-muted); display: block; }

/* ── 오늘의 일진 ─────────────────────────────────────────────────────────── */
.wpsaju-today-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--saju-border);
    border: 1px solid var(--saju-border);
    border-radius: var(--saju-radius);
    overflow: hidden;
    box-shadow: var(--saju-shadow-sm);
}

.wpsaju-today-item {
    flex: 1;
    min-width: 90px;
    background: var(--saju-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 12px;
    gap: 5px;
}

.wpsaju-today-item .today-label { font-size: .72rem; font-weight: 700; color: var(--saju-muted); letter-spacing: .05em; }
.wpsaju-today-item .today-ko    { font-size: 1.35rem; font-weight: 800; color: var(--saju-navy); }
.wpsaju-today-item .today-hanja { font-size: .78rem; color: var(--saju-muted); }

/* ── 반응형 ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wpsaju-form          { padding: 22px 18px; }
    .wpsaju-form-grid     { grid-template-columns: 1fr 1fr; }
    .wpsaju-title         { font-size: 1.3rem; }
    .row-glyph td:not(.row-label) { font-size: 1.25rem; }
}

/* ==========================================================================
   사주풀이 해석 카드
   ========================================================================== */
.wpsaju-interp-card {
    background: var(--saju-card);
    border: 1px solid var(--saju-border);
    border-radius: var(--saju-radius);
    padding: 22px 24px;
    margin-bottom: 16px;
    box-shadow: var(--saju-shadow-sm);
    position: relative;
    overflow: hidden;
}

.wpsaju-interp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    border-radius: var(--saju-radius) 0 0 var(--saju-radius);
}

.wpsaju-interp-card--personality::before { background: var(--el-목); }
.wpsaju-interp-card--today::before       { background: var(--el-화); }
.wpsaju-interp-card--yearly::before      { background: var(--saju-navy); }
.wpsaju-interp-card--personality { background: #F0FFF4; }
.wpsaju-interp-card--today       { background: #FFF5F5; }
.wpsaju-interp-card--yearly      { background: #EBF4FF; }

.wpsaju-interp-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-left: 8px;
}

.wpsaju-interp-card__icon  { font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.wpsaju-interp-card__type  { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--saju-muted); margin-bottom: 3px; }
.wpsaju-interp-card__title { font-size: .98rem; font-weight: 700; color: var(--saju-navy); line-height: 1.4; }

.wpsaju-interp-card__summary {
    font-size: .92rem;
    font-weight: 700;
    color: var(--saju-text);
    margin: 0 0 10px;
    padding-left: 8px;
    border-left: 3px solid var(--saju-gold);
    line-height: 1.6;
}

.wpsaju-interp-card__body {
    font-size: .88rem;
    color: var(--saju-text);
    line-height: 1.85;
    margin: 0;
    padding-left: 8px;
    opacity: .88;
}

@media (max-width: 640px) {
    .wpsaju-interp-card        { padding: 18px 16px; }
    .wpsaju-interp-card__icon  { font-size: 1.3rem; }
    .wpsaju-interp-card__title { font-size: .92rem; }
}

/* ==========================================================================
   Phase 6 — 오행 레이더 차트 + 신살 배지
   ========================================================================== */
.wpsaju-elements-section,
.wpsaju-shinsal-section { margin-top: 28px; }

.wpsaju-elements-layout {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    background: var(--saju-card);
    border: 1px solid var(--saju-border);
    border-radius: var(--saju-radius);
    padding: 24px 28px;
    box-shadow: var(--saju-shadow-sm);
}

.wpsaju-radar-wrap { flex: 0 0 240px; max-width: 240px; }
.wpsaju-radar-wrap canvas { width: 100% !important; height: auto !important; }

.wpsaju-elements-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 10px; }
.wpsaju-el-bar { display: flex; align-items: center; gap: 8px; }
.wpsaju-el-label { font-size: .8rem; font-weight: 700; width: 72px; flex-shrink: 0; }
.wpsaju-el-track { flex: 1; height: 10px; background: var(--saju-bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--saju-border); }
.wpsaju-el-fill  { height: 100%; border-radius: 99px; width: 0; transition: width .6s ease; }
.wpsaju-el-count { font-size: .82rem; font-weight: 700; color: var(--saju-navy); width: 18px; text-align: right; flex-shrink: 0; }
.el-bg-목 { background: var(--el-목); }
.el-bg-화 { background: var(--el-화); }
.el-bg-토 { background: var(--el-토); }
.el-bg-금 { background: var(--el-금); }
.el-bg-수 { background: var(--el-수); }

.wpsaju-shinsal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.wpsaju-shinsal-none { font-size: .88rem; color: var(--saju-muted); padding: 16px 0; margin: 0; }

.wpsaju-shinsal-badge {
    border-radius: var(--saju-radius);
    padding: 16px 18px;
    border: 1.5px solid var(--saju-border);
    transition: transform .15s, box-shadow .15s;
    position: relative;
    overflow: hidden;
}

.wpsaju-shinsal-badge--active {
    background: linear-gradient(135deg, #FFFBEB 0%, #FDF6E3 100%);
    border-color: var(--saju-gold);
    box-shadow: 0 2px 12px rgba(201,168,76,.20);
}

.wpsaju-shinsal-badge--active:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,76,.28); }

.wpsaju-shinsal-badge--active::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--saju-gold);
    border-radius: var(--saju-radius) 0 0 var(--saju-radius);
}

.wpsaju-shinsal-badge--inactive { background: var(--saju-bg); opacity: .55; }

.wpsaju-shinsal-badge__top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.wpsaju-shinsal-badge__emoji { font-size: 1.4rem; line-height: 1; }
.wpsaju-shinsal-badge__name  { font-size: 1rem; font-weight: 800; color: var(--saju-navy); }
.wpsaju-shinsal-badge__hanja { font-size: .72rem; color: var(--saju-muted); font-weight: 400; }

.wpsaju-shinsal-badge__tag {
    margin-left: auto;
    font-size: .68rem; font-weight: 700;
    background: var(--saju-gold); color: #fff;
    padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}
.wpsaju-shinsal-badge__tag--off { background: var(--saju-border); color: var(--saju-muted); }

.wpsaju-shinsal-badge__summary { font-size: .82rem; font-weight: 700; color: var(--saju-text); margin: 0 0 6px; line-height: 1.55; }
.wpsaju-shinsal-badge__detail  { font-size: .79rem; color: var(--saju-muted); margin: 0; line-height: 1.7; }

@media (max-width: 640px) {
    .wpsaju-elements-layout { flex-direction: column; padding: 18px 16px; gap: 20px; }
    .wpsaju-radar-wrap      { flex: none; max-width: 200px; margin: 0 auto; }
    .wpsaju-shinsal-grid    { grid-template-columns: 1fr; }
    .wpsaju-el-label        { width: 60px; font-size: .74rem; }
}

/* ==========================================================================
   Phase 7 — 인생 흐름 그래프 / 길흉 달력 / 카카오 공유
   ========================================================================== */
.wpsaju-flow-card {
    background: var(--saju-card);
    border: 1px solid var(--saju-border);
    border-radius: var(--saju-radius);
    padding: 22px 24px;
    box-shadow: var(--saju-shadow-sm);
}

.wpsaju-flow-meta { font-size: .85rem; color: var(--saju-muted); margin-bottom: 14px; }
.wpsaju-flow-meta strong { color: var(--saju-navy); font-size: .95rem; }
.wpsaju-flow-chart-wrap { position: relative; height: 220px; margin-bottom: 18px; }

.wpsaju-flow-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.wpsaju-flow-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: .73rem; font-weight: 700; border: 1.5px solid transparent; }
.wpsaju-flow-chip--good    { background: #F0FFF4; border-color: #38A169; color: #276749; }
.wpsaju-flow-chip--neutral { background: #FFFFF0; border-color: #D69E2E; color: #975A16; }
.wpsaju-flow-chip--bad     { background: #FFF5F5; border-color: #E53E3E; color: #9B2C2C; }
.wpsaju-flow-chip .chip-age    { font-weight: 800; }
.wpsaju-flow-chip .chip-pillar { opacity: .75; }
.wpsaju-flow-chip .chip-label  { font-size: .68rem; }

.wpsaju-calendar-card { background: var(--saju-card); border: 1px solid var(--saju-border); border-radius: var(--saju-radius); padding: 20px 20px 16px; box-shadow: var(--saju-shadow-sm); }
.wpsaju-calendar-month { font-size: 1rem; font-weight: 700; color: var(--saju-navy); margin-bottom: 12px; text-align: center; }
.wpsaju-calendar-dow-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.wpsaju-calendar-dow-header span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--saju-muted); padding: 4px 0; }
.wpsaju-calendar-dow-header span:first-child { color: #C53030; }
.wpsaju-calendar-dow-header span:last-child  { color: #2B6CB0; }
.wpsaju-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.wpsaju-cal-cell {
    border-radius: 8px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: default;
    border: 1.5px solid transparent;
    transition: transform .12s, box-shadow .12s;
    min-height: 68px;
}
.wpsaju-cal-cell:hover:not(.wpsaju-cal-cell--blank) { transform: scale(1.05); box-shadow: 0 3px 10px rgba(0,0,0,0.12); z-index: 1; position: relative; }
.wpsaju-cal-cell--blank   { background: transparent; border-color: transparent; }
.wpsaju-cal-cell--good    { background: #F0FFF4; border-color: #9AE6B4; }
.wpsaju-cal-cell--neutral { background: #FFFFF0; border-color: #FAF089; }
.wpsaju-cal-cell--bad     { background: #FFF5F5; border-color: #FEB2B2; }
.wpsaju-cal-cell.is-today { box-shadow: 0 0 0 2px var(--saju-navy); }
.wpsaju-cal-cell.is-sun .cal-day-num { color: #C53030; }
.wpsaju-cal-cell.is-sat .cal-day-num { color: #2B6CB0; }

.cal-day-num   { font-size: .85rem; font-weight: 800; color: var(--saju-navy); line-height: 1; }
.cal-pillar    { font-size: .62rem; color: var(--saju-muted); letter-spacing: -.01em; }
.cal-emoji     { font-size: .9rem; line-height: 1; }
.cal-label-text { font-size: .58rem; font-weight: 700; color: var(--saju-muted); }

.wpsaju-calendar-legend { display: flex; justify-content: center; gap: 18px; margin-top: 14px; font-size: .78rem; color: var(--saju-muted); font-weight: 600; }
.cal-good    { color: #276749; }
.cal-neutral { color: #975A16; }
.cal-bad     { color: #9B2C2C; }

#wpsaju-share-wrap { margin-top: 32px; text-align: center; }

.wpsaju-kakao-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: #FEE500; color: #191600;
    font-size: 1rem; font-weight: 800; padding: 15px 32px;
    border: none; border-radius: 12px; cursor: pointer;
    letter-spacing: .02em; box-shadow: 0 4px 16px rgba(254,229,0,.55);
    transition: opacity .18s, transform .12s, box-shadow .18s; font-family: inherit;
}
.wpsaju-kakao-btn:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(254,229,0,.60); }
.wpsaju-kakao-btn:active { transform: scale(.98) translateY(0); }
.wpsaju-kakao-icon { width: 22px; height: 22px; fill: #191600; flex-shrink: 0; }

.wpsaju-share-toast {
    position: fixed; bottom: 28px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(27,58,107,0.94); color: #fff;
    padding: 13px 24px; border-radius: 10px;
    font-size: .88rem; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 9999; box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}
.wpsaju-share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
    .wpsaju-flow-card     { padding: 16px 14px; }
    .wpsaju-flow-chart-wrap { height: 180px; }
    .wpsaju-flow-chip     { font-size: .68rem; padding: 3px 8px; }
    .wpsaju-calendar-card { padding: 14px 10px 12px; }
    .wpsaju-cal-cell      { min-height: 56px; padding: 4px 2px; }
    .cal-day-num          { font-size: .78rem; }
    .cal-pillar           { font-size: .55rem; }
    .cal-emoji            { font-size: .78rem; }
    .cal-label-text       { display: none; }
    .wpsaju-kakao-btn     { font-size: .9rem; padding: 13px 22px; }
    .wpsaju-share-toast   { font-size: .8rem; white-space: normal; text-align: center; max-width: 88vw; }
}

/* ==========================================================================
   Phase 8 — AI 사주 도사 챗봇 (공통 — 개인 + 커플)
   ========================================================================== */
#wpsaju-chatbot-wrap,
#wpsaju-couple-chatbot-wrap { margin-top: 32px; }

.wpsaju-chat-toggle {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient( 135deg, #1B3A6B 0%, #2C5282 100% );
    color: #fff; border: none; border-radius: var(--saju-radius);
    padding: 16px 22px; font-size: 1rem; font-weight: 800; font-family: inherit;
    cursor: pointer; letter-spacing: .02em;
    box-shadow: 0 4px 16px rgba(27,58,107,.30);
    transition: opacity .18s, transform .12s; text-align: left;
}
.wpsaju-chat-toggle:hover  { opacity: .92; transform: translateY(-1px); }
.wpsaju-chat-toggle:active { transform: scale(.99); }

/* 커플 챗봇 — 핑크 */
.wpsaju-chat-toggle--couple {
    background: linear-gradient( 135deg, #97144d 0%, var(--gh-pink) 100% );
    box-shadow: 0 4px 16px rgba(229,62,138,.30);
}

.wpsaju-chat-toggle__icon  { font-size: 1.4rem; flex-shrink: 0; }
.wpsaju-chat-toggle__text  { flex: 1; }
.wpsaju-chat-toggle__arrow { font-size: .78rem; transition: transform .25s; flex-shrink: 0; }
.wpsaju-chat-toggle[aria-expanded="true"] .wpsaju-chat-toggle__arrow { transform: rotate(180deg); }

.wpsaju-chat-panel {
    background: #F0F2F5;
    border: 1px solid var(--saju-border);
    border-top: none;
    border-radius: 0 0 var(--saju-radius) var(--saju-radius);
    overflow: hidden;
    display: flex; flex-direction: column; gap: 0;
}

.wpsaju-chat-messages {
    padding: 18px 16px 10px;
    height: 380px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
    scroll-behavior: smooth;
}
.wpsaju-chat-messages::-webkit-scrollbar       { width: 4px; }
.wpsaju-chat-messages::-webkit-scrollbar-track { background: transparent; }
.wpsaju-chat-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }

.wpsaju-chat-bubble {
    display: flex; align-items: flex-end; gap: 8px;
    max-width: 85%;
    animation: chatBubbleIn .2s ease;
}

@keyframes chatBubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wpsaju-chat-bubble--ai { align-self: flex-start; }

.bubble-avatar { font-size: 1.5rem; flex-shrink: 0; line-height: 1; margin-bottom: 2px; }

.wpsaju-chat-bubble--ai .bubble-body {
    background: #fff;
    border-radius: 4px 18px 18px 18px;
    padding: 11px 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
    max-width: 100%;
}

.wpsaju-chat-bubble--user { align-self: flex-end; flex-direction: row-reverse; }

.bubble-body--user {
    background: #FEE500;
    border-radius: 18px 4px 18px 18px;
    padding: 11px 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
    max-width: 100%;
    text-align: right;
}

.bubble-text {
    font-size: .9rem; line-height: 1.65; color: #1A1A1A;
    margin: 0 0 4px; word-break: break-word; white-space: pre-line;
}
.bubble-body--user .bubble-text { color: #191600; }
.bubble-time { font-size: .65rem; color: #9AA5B4; display: block; }
.bubble-body--user .bubble-time { text-align: right; }
.wpsaju-chat-bubble--error .bubble-text { color: #C53030; }

.wpsaju-chat-loading { display: flex; align-items: center; gap: 8px; padding: 4px 16px 10px; }
.chat-loading-avatar { font-size: 1.4rem; flex-shrink: 0; }
.chat-loading-dots { display: flex; gap: 4px; align-items: center; background: #fff; padding: 10px 14px; border-radius: 4px 18px 18px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.chat-loading-dots span { display: block; width: 7px; height: 7px; background: #A0AEC0; border-radius: 50%; animation: chatDotBounce 1.2s infinite ease-in-out; }
.chat-loading-dots span:nth-child(2) { animation-delay: .2s; }
.chat-loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes chatDotBounce { 0%, 80%, 100% { transform: scale(0.8); opacity: .5; } 40% { transform: scale(1.1); opacity: 1; } }
.chat-loading-text { font-size: .78rem; color: #718096; font-style: italic; }

.wpsaju-chat-input-wrap {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 14px 12px;
    background: #fff; border-top: 1px solid var(--saju-border);
}

.wpsaju-chat-input {
    flex: 1; border: 1.5px solid var(--saju-border); border-radius: 20px;
    padding: 10px 16px; font-size: .9rem; font-family: inherit;
    resize: none; line-height: 1.5; color: var(--saju-text); background: #F8F9FA;
    transition: border-color .15s, box-shadow .15s; outline: none;
    max-height: 120px; overflow-y: auto;
}
.wpsaju-chat-input:focus { border-color: #1B3A6B; box-shadow: 0 0 0 3px rgba(27,58,107,.12); background: #fff; }
.wpsaju-chat-input::placeholder { color: #A0AEC0; font-size: .85rem; }

.wpsaju-chat-send {
    width: 42px; height: 42px; border-radius: 50%;
    background: #1B3A6B; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: background .15s, transform .1s;
}
.wpsaju-chat-send:hover   { background: #2C5282; transform: scale(1.06); }
.wpsaju-chat-send:active  { transform: scale(.95); }
.wpsaju-chat-send:disabled { background: #CBD5E0; cursor: not-allowed; transform: none; }
.wpsaju-chat-send svg { width: 18px; height: 18px; color: #fff; stroke: #fff; }

/* 커플 챗봇 전송 버튼 — 핑크 */
.wpsaju-chat-send--couple { background: var(--gh-pink); }
.wpsaju-chat-send--couple:hover { background: #C2185B; }

.wpsaju-chat-hint { font-size: .72rem; color: #A0AEC0; text-align: center; margin: 0; padding: 4px 14px 10px; background: #fff; }

@media (max-width: 640px) {
    .wpsaju-chat-toggle   { font-size: .9rem; padding: 14px 16px; }
    .wpsaju-chat-messages { height: 300px; padding: 14px 12px 8px; }
    .wpsaju-chat-bubble   { max-width: 92%; }
    .bubble-text          { font-size: .85rem; }
    .wpsaju-chat-input    { font-size: .85rem; padding: 9px 13px; }
    .wpsaju-chat-send     { width: 38px; height: 38px; }
    .wpsaju-chat-send svg { width: 16px; height: 16px; }
    .chat-loading-text    { display: none; }
}

/* ==========================================================================
   Phase 5 — 궁합 전용 스타일
   ========================================================================== */

/* ── 궁합 페이지 설명 ────────────────────────────────────────────────────── */
.wpsaju-gunghap-desc {
    font-size: .9rem;
    color: var(--saju-muted);
    margin: -12px 0 24px;
    line-height: 1.7;
}

/* ── 인물 섹션 카드 ─────────────────────────────────────────────────────── */
.wpsaju-person-section {
    background: var(--saju-bg);
    border: 1.5px solid var(--saju-border);
    border-radius: var(--saju-radius);
    padding: 20px 24px 24px;
    margin-bottom: 8px;
}

.wpsaju-person-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.wpsaju-person-header--a { border-left: 4px solid var(--gh-blue); padding-left: 10px; }
.wpsaju-person-header--b { border-left: 4px solid var(--gh-pink); padding-left: 10px; }

.wpsaju-person-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--gh-blue-bg);
    color: var(--gh-blue);
    font-size: .85rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 99px;
    border: 1.5px solid var(--gh-blue);
    flex-shrink: 0;
}

.wpsaju-person-badge--b {
    background: var(--gh-pink-bg);
    color: var(--gh-pink);
    border-color: var(--gh-pink);
}

.wpsaju-label-input {
    flex: 1;
    min-width: 0;
    max-width: 240px;
    padding: 7px 14px;
    border: 1.5px solid var(--saju-border);
    border-radius: 8px;
    font-size: .88rem;
    color: var(--saju-text);
    background: #fff;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.wpsaju-label-input:focus { border-color: var(--saju-navy); box-shadow: 0 0 0 3px rgba(27,58,107,.10); }
.wpsaju-label-input::placeholder { color: #A0AEC0; }

/* ── 하트 구분선 ─────────────────────────────────────────────────────────── */
.wpsaju-gunghap-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
    position: relative;
}

.wpsaju-gunghap-divider::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--saju-border), transparent);
}

.wpsaju-gunghap-heart {
    background: #fff;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 12px;
    position: relative;
    animation: heartbeat 1.8s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.22); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.14); }
    70%       { transform: scale(1); }
}

/* ── 궁합 결과 영역 ─────────────────────────────────────────────────────── */
.wpsaju-gunghap-result { margin-top: 24px; }

/* ── 점수 히어로 ─────────────────────────────────────────────────────────── */
.wpsaju-gunghap-score-hero {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #fff9fc 0%, #ffeef7 100%);
    border: 2px solid #F9A8D4;
    border-radius: 20px;
    padding: 32px 36px;
    margin-bottom: 24px;
    box-shadow: 0 4px 24px rgba(229,62,138,.12);
}

/* SVG 링 */
.wpsaju-score-ring-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.wpsaju-score-ring {
    width: 160px;
    height: 160px;
    transform: rotate(-90deg);
}

.ring-bg {
    fill: none;
    stroke: #F3E8FF;
    stroke-width: 14;
}

.ring-fill {
    fill: none;
    stroke: var(--gh-pink);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-dasharray: 427;
    stroke-dashoffset: 427;
    transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}

.wpsaju-score-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.wpsaju-score-num {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--gh-pink);
    line-height: 1;
    letter-spacing: -.02em;
}

.wpsaju-score-unit {
    font-size: 1rem;
    font-weight: 700;
    color: var(--saju-muted);
}

/* 점수 오른쪽 */
.wpsaju-score-right { flex: 1; min-width: 200px; }

.wpsaju-score-grade {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--gh-pink);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}

.wpsaju-score-comment {
    font-size: .92rem;
    color: var(--saju-text);
    line-height: 1.75;
    margin: 0 0 20px;
}

/* 세부 점수 바 */
.wpsaju-score-sub-bars { display: flex; flex-direction: column; gap: 10px; }

.wpsaju-sub-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpsaju-sub-bar-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--saju-muted);
    width: 48px;
    flex-shrink: 0;
}

.wpsaju-sub-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,.08);
    border-radius: 99px;
    overflow: hidden;
}

.wpsaju-sub-bar-fill {
    height: 100%;
    border-radius: 99px;
    width: 0;
    transition: width .9s cubic-bezier(.4,0,.2,1) .3s;
}

.wpsaju-sub-bar-fill--skin  { background: linear-gradient(90deg, #667eea, #764ba2); }
.wpsaju-sub-bar-fill--inner { background: linear-gradient(90deg, var(--gh-pink), #F97316); }

.wpsaju-sub-bar-val {
    font-size: .82rem;
    font-weight: 800;
    color: var(--saju-navy);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .wpsaju-gunghap-score-hero { gap: 20px; padding: 22px 20px; }
    .wpsaju-score-ring-wrap    { width: 130px; height: 130px; }
    .wpsaju-score-ring         { width: 130px; height: 130px; }
    .wpsaju-score-num          { font-size: 2.2rem; }
    .wpsaju-score-grade        { font-size: 1.1rem; }
}

/* ── 궁합 카드 (겉/속) ───────────────────────────────────────────────────── */
.wpsaju-compat-card {
    background: var(--saju-card);
    border: 1px solid var(--saju-border);
    border-radius: var(--saju-radius);
    padding: 22px 24px;
    margin-bottom: 16px;
    box-shadow: var(--saju-shadow-sm);
    position: relative;
    overflow: hidden;
}

.wpsaju-compat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    border-radius: var(--saju-radius) 0 0 var(--saju-radius);
}

.wpsaju-compat-card--skin { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); }
.wpsaju-compat-card--skin::before { background: #7C3AED; }
.wpsaju-compat-card--inner { background: linear-gradient(135deg, #fff9fc 0%, #fce7f3 100%); }
.wpsaju-compat-card--inner::before { background: var(--gh-pink); }

.wpsaju-compat-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-left: 8px;
}

.wpsaju-compat-card__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }

.wpsaju-compat-card__type  { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--saju-muted); margin-bottom: 3px; }
.wpsaju-compat-card__title { font-size: .95rem; font-weight: 700; color: var(--saju-navy); }

.wpsaju-compat-card__score-badge {
    margin-left: auto;
    flex-shrink: 0;
    background: #7C3AED;
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 99px;
    white-space: nowrap;
}

.wpsaju-compat-card__score-badge--inner { background: var(--gh-pink); }

.wpsaju-compat-card__summary {
    font-size: .9rem;
    font-weight: 600;
    color: var(--saju-text);
    line-height: 1.7;
    margin: 0 0 16px;
    padding-left: 8px;
    border-left: 3px solid var(--saju-gold);
}

/* ── 관계 태그 (겉/속 궁합 내부) ────────────────────────────────────────── */
.wpsaju-compat-rels {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wpsaju-rel-tag {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 10px;
    padding: 12px 14px;
}

/* 관계 종류별 왼쪽 색상 바 */
.wpsaju-rel-tag--hap    { border-left: 3px solid #E53E8A; }
.wpsaju-rel-tag--saeng  { border-left: 3px solid #38A169; }
.wpsaju-rel-tag--chung  { border-left: 3px solid #E53E3E; }
.wpsaju-rel-tag--geuk   { border-left: 3px solid #D69E2E; }
.wpsaju-rel-tag--wonjin { border-left: 3px solid #9F7AEA; }
.wpsaju-rel-tag--yukhap { border-left: 3px solid var(--gh-pink); }
.wpsaju-rel-tag--samhap { border-left: 3px solid #3182CE; }
.wpsaju-rel-tag--neutral { border-left: 3px solid #A0AEC0; }

.rel-tag-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }

.rel-tag-body { display: flex; flex-direction: column; gap: 3px; }

.rel-tag-label {
    font-size: .78rem;
    font-weight: 800;
    color: var(--saju-navy);
    letter-spacing: .02em;
}

.rel-tag-detail {
    font-size: .82rem;
    color: var(--saju-text);
    line-height: 1.65;
    margin: 0;
    opacity: .85;
}

/* ── 조화 팁 카드 ────────────────────────────────────────────────────────── */
.wpsaju-tips-card {
    background: linear-gradient(135deg, #FFFBEB 0%, #FDF6E3 100%);
    border: 1.5px solid var(--saju-gold);
    border-radius: var(--saju-radius);
    padding: 22px 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(201,168,76,.12);
}

.wpsaju-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wpsaju-tips-item {
    font-size: .9rem;
    color: var(--saju-text);
    line-height: 1.75;
    padding: 10px 14px 10px 16px;
    background: rgba(255,255,255,.6);
    border-radius: 8px;
    border-left: 3px solid var(--saju-gold);
}

/* ── 궁합 반응형 ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wpsaju-person-section   { padding: 16px 16px 20px; }
    .wpsaju-person-header    { gap: 8px; }
    .wpsaju-label-input      { max-width: 160px; }
    .wpsaju-compat-card      { padding: 16px 16px; }
    .wpsaju-rel-tag          { flex-wrap: wrap; }
    .wpsaju-tips-card        { padding: 16px 16px; }
}

/* ==========================================================================
   Phase 9 — 6대 테마 숏코드 스타일
   ========================================================================== */

/* ── 테마 공통: 상단 테마 뱃지 ─────────────────────────────────────────── */
.wpsaju-wrap[data-mode]::before {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 12px;
}

/* 재물운 */
.wpsaju-wrap[data-mode="wealth"] { --theme-color: #D4A017; --theme-bg: #FFFBEB; }
.wpsaju-wrap[data-mode="wealth"]::before {
    content: "💰 재물운 분석";
    background: #FEF3C7;
    color: #92400E;
}
.wpsaju-theme--wealth .wpsaju-flow-card { border-top: 3px solid var(--theme-color, #D4A017); }

/* 연애운 */
.wpsaju-wrap[data-mode="love"] { --theme-color: #E53E8A; --theme-bg: #FFF0F5; }
.wpsaju-wrap[data-mode="love"]::before {
    content: "💕 연애운 분석";
    background: #FFE4EF;
    color: #9B174D;
}
.wpsaju-theme--love .wpsaju-shinsal-badge--active { border-color: var(--theme-color, #E53E8A); }

/* 사주 MBTI */
.wpsaju-wrap[data-mode="character"] { --theme-color: #6B48FF; --theme-bg: #F3F0FF; }
.wpsaju-wrap[data-mode="character"]::before {
    content: "🔮 사주 MBTI";
    background: #EDE9FE;
    color: #4C1D95;
}
.wpsaju-theme--character .wpsaju-radar-wrap { transform: scale(1.05); }

/* 오늘의 운세 */
.wpsaju-wrap[data-mode="today"] { --theme-color: #F6AD55; --theme-bg: #FFFAF0; }
.wpsaju-wrap[data-mode="today"]::before {
    content: "☀️ 오늘의 운세";
    background: #FEEBC8;
    color: #7B341E;
}
.wpsaju-theme--today .wpsaju-calendar-card { border-top: 3px solid var(--theme-color, #F6AD55); }

/* 신년 운세 */
.wpsaju-wrap[data-mode="newyear"] { --theme-color: #E53E3E; --theme-bg: #FFF5F5; }
.wpsaju-wrap[data-mode="newyear"]::before {
    content: "🎆 신년 운세";
    background: #FED7D7;
    color: #742A2A;
}
.wpsaju-theme--newyear .wpsaju-flow-card { border-top: 3px solid var(--theme-color, #E53E3E); }

/* 띠별 오늘의 운세 */
.wpsaju-wrap[data-mode="zodiac_today"] { --theme-color: #38A169; --theme-bg: #F0FFF4; }
.wpsaju-wrap[data-mode="zodiac_today"]::before {
    content: "🐾 띠별 오늘의 운세";
    background: #C6F6D5;
    color: #22543D;
}

/* ── 테마별 챗봇 아이콘 텍스트 ─────────────────────────────────────────── */
.wpsaju-wrap[data-mode="wealth"]       .wpsaju-chat-toggle__text::before { content: "💰 "; }
.wpsaju-wrap[data-mode="love"]         .wpsaju-chat-toggle__text::before { content: "💕 "; }
.wpsaju-wrap[data-mode="character"]    .wpsaju-chat-toggle__text::before { content: "🔮 "; }
.wpsaju-wrap[data-mode="today"]        .wpsaju-chat-toggle__text::before { content: "☀️ "; }
.wpsaju-wrap[data-mode="newyear"]      .wpsaju-chat-toggle__text::before { content: "🎆 "; }
.wpsaju-wrap[data-mode="zodiac_today"] .wpsaju-chat-toggle__text::before { content: "🐾 "; }

/* ── zodiac_today: 년주 셀 강조 (JS outline 보완) ──────────────────────── */
.wpsaju-theme--zodiac_today #c-yb,
.wpsaju-theme--zodiac_today #c-ys {
    background: rgba(56, 161, 105, .10);
    font-weight: 700;
}

/* ==========================================================================
   Phase 10-1: 12지신 띠별 오늘의 운세 UI
   ========================================================================== */

/* ── 소개 문구 ──────────────────────────────────────────────────────────── */
.wpsaju-zodiac-intro {
    text-align: center;
    color: var(--saju-muted, #718096);
    font-size: .95rem;
    margin: 0 0 24px;
}
.wpsaju-zodiac-intro strong {
    color: var(--saju-navy, #1B3A6B);
}

/* ── 12지신 버튼 그리드 ──────────────────────────────────────────────────── */
.wpsaju-zodiac-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}
@media (max-width: 640px) {
    .wpsaju-zodiac-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
@media (max-width: 380px) {
    .wpsaju-zodiac-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ── 개별 버튼 ─────────────────────────────────────────────────────────── */
.wpsaju-zodiac-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 6px 12px;
    background: #fff;
    border: 2px solid #E2E8F0;
    border-radius: 14px;
    cursor: pointer;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    outline: none;
    position: relative;
    overflow: hidden;
}
.wpsaju-zodiac-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(56,161,105,.08), rgba(27,58,107,.06));
    opacity: 0;
    transition: opacity .22s;
}
.wpsaju-zodiac-btn:hover {
    border-color: #38A169;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(56,161,105,.20);
}
.wpsaju-zodiac-btn:hover::before { opacity: 1; }
.wpsaju-zodiac-btn:focus-visible {
    outline: 3px solid #38A169;
    outline-offset: 2px;
}
.wpsaju-zodiac-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(56,161,105,.15);
}

/* 선택된 상태 */
.wpsaju-zodiac-btn.is-selected {
    border-color: #38A169;
    background: linear-gradient(135deg, #F0FFF4, #C6F6D5);
    box-shadow: 0 6px 18px rgba(56,161,105,.28);
    transform: translateY(-2px);
}
.wpsaju-zodiac-btn.is-selected::after {
    content: '✔';
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: .6rem;
    color: #38A169;
    font-weight: 800;
}

/* 버튼 내부 텍스트 */
.zodiac-btn__emoji { font-size: 2rem; line-height: 1; }
.zodiac-btn__name  { font-size: .8rem; font-weight: 700; color: var(--saju-navy, #1B3A6B); }
.zodiac-btn__hanja { font-size: .68rem; color: var(--saju-muted, #718096); }

@media (max-width: 480px) {
    .zodiac-btn__emoji { font-size: 1.6rem; }
    .zodiac-btn__name  { font-size: .72rem; }
    .zodiac-btn__hanja { display: none; }
}

/* ── 로딩 스피너 ─────────────────────────────────────────────────────────── */
.wpsaju-zodiac-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--saju-muted, #718096);
    font-size: .9rem;
}
.zodiac-loading-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #C6F6D5;
    border-top-color: #38A169;
    border-radius: 50%;
    animation: zodiac-spin .7s linear infinite;
}
@keyframes zodiac-spin { to { transform: rotate(360deg); } }

/* ── 결과 컨테이너 ───────────────────────────────────────────────────────── */
.wpsaju-zodiac-result { margin-top: 8px; }

/* ── 운세 카드 ─────────────────────────────────────────────────────────── */
.wpsaju-zodiac-card {
    border-radius: 18px;
    border: 2px solid #E2E8F0;
    padding: 24px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    animation: zodiac-fade-in .35s ease;
}
@keyframes zodiac-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wpsaju-zodiac-card--good    { border-color: #68D391; background: linear-gradient(160deg, #F0FFF4 0%, #fff 60%); }
.wpsaju-zodiac-card--bad     { border-color: #FC8181; background: linear-gradient(160deg, #FFF5F5 0%, #fff 60%); }
.wpsaju-zodiac-card--neutral { border-color: #F6E05E; background: linear-gradient(160deg, #FFFFF0 0%, #fff 60%); }
.wpsaju-zodiac-card--caution { border-color: #F6AD55; background: linear-gradient(160deg, #FFFAF0 0%, #fff 60%); }

/* 카드 헤더 */
.zodiac-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.zodiac-card-animal {
    display: flex;
    align-items: center;
    gap: 14px;
}
.zodiac-card-emoji { font-size: 2.8rem; line-height: 1; }
.zodiac-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--saju-navy, #1B3A6B);
    margin: 0 0 4px;
}
.zodiac-card-title strong { color: #38A169; }
.zodiac-card-date {
    font-size: .78rem;
    color: var(--saju-muted, #718096);
    margin: 0;
}

/* 길흉 뱃지 */
.zodiac-grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.zodiac-grade-badge--good    { background: #C6F6D5; color: #22543D; }
.zodiac-grade-badge--bad     { background: #FED7D7; color: #742A2A; }
.zodiac-grade-badge--neutral { background: #FEFCBF; color: #744210; }
.zodiac-grade-badge--caution { background: #FEEBC8; color: #7B341E; }

/* 점수 바 */
.zodiac-score-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.zodiac-score-label {
    font-size: .78rem;
    color: var(--saju-muted, #718096);
    white-space: nowrap;
    flex-shrink: 0;
}
.zodiac-score-track {
    flex: 1;
    height: 10px;
    background: #EDF2F7;
    border-radius: 999px;
    overflow: hidden;
}
.zodiac-score-bar {
    height: 100%;
    border-radius: 999px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.zodiac-score-bar--good    { background: linear-gradient(90deg, #48BB78, #38A169); }
.zodiac-score-bar--bad     { background: linear-gradient(90deg, #FC8181, #E53E3E); }
.zodiac-score-bar--neutral { background: linear-gradient(90deg, #F6E05E, #D69E2E); }
.zodiac-score-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--saju-navy, #1B3A6B);
    white-space: nowrap;
    min-width: 48px;
    text-align: right;
}
.zodiac-score-unit { font-size: .78rem; font-weight: 400; }

/* 요약 문구 */
.zodiac-card-summary {
    font-size: .95rem;
    line-height: 1.7;
    color: #2D3748;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: rgba(0,0,0,.03);
    border-radius: 10px;
    border-left: 3px solid #38A169;
}
.wpsaju-zodiac-card--bad     .zodiac-card-summary { border-left-color: #E53E3E; }
.wpsaju-zodiac-card--neutral .zodiac-card-summary { border-left-color: #D69E2E; }
.wpsaju-zodiac-card--caution .zodiac-card-summary { border-left-color: #E68D42; }

/* 조언 박스 */
.zodiac-advice-box {
    background: #F7FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.zodiac-advice-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--saju-navy, #1B3A6B);
    margin: 0 0 8px;
}
.zodiac-advice-text {
    font-size: .9rem;
    line-height: 1.75;
    color: #4A5568;
    margin: 0;
}

/* 행운 키워드 */
.zodiac-lucky-section { margin-top: 4px; }
.zodiac-lucky-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--saju-navy, #1B3A6B);
    margin: 0 0 10px;
}
.zodiac-lucky-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zodiac-lucky-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #EDF2F7;
    border-radius: 999px;
    font-size: .8rem;
}
.zodiac-lucky-key {
    color: var(--saju-muted, #718096);
    font-weight: 600;
}
.zodiac-lucky-val {
    color: var(--saju-navy, #1B3A6B);
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
   Phase 10-2: 사주 MBTI 퍼스널리티 카드
   ══════════════════════════════════════════════════════════════════ */

/* 오행별 테마 변수 */
.wpsaju-mbti-card.elem-wood  { --mbti-from: #1a7a4a; --mbti-to: #2ecc71; --mbti-accent: #27ae60; --mbti-light: #eafaf1; }
.wpsaju-mbti-card.elem-fire  { --mbti-from: #c0392b; --mbti-to: #e74c3c; --mbti-accent: #e74c3c; --mbti-light: #fdf0f0; }
.wpsaju-mbti-card.elem-earth { --mbti-from: #7d6608; --mbti-to: #d4ac0d; --mbti-accent: #d4ac0d; --mbti-light: #fef9e7; }
.wpsaju-mbti-card.elem-metal { --mbti-from: #4a4a6a; --mbti-to: #8e8ea0; --mbti-accent: #5d5d80; --mbti-light: #f2f2f7; }
.wpsaju-mbti-card.elem-water { --mbti-from: #154360; --mbti-to: #2980b9; --mbti-accent: #2471a3; --mbti-light: #eaf4fb; }

/* 기본 카드 */
.wpsaju-mbti-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    font-family: var(--saju-font, 'Noto Sans KR', sans-serif);
}

/* 상단 그라데이션 헤더 영역 */
.wpsaju-mbti-card::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 220px;
    background: linear-gradient(145deg, var(--mbti-from) 0%, var(--mbti-to) 100%);
}

/* 헤더 콘텐츠를 ::before 위에 절대 배치 */
.wpsaju-mbti-badge {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.4);
    white-space: nowrap;
}

.wpsaju-mbti-nickname {
    position: absolute;
    top: 62px;
    left: 0; right: 0;
    text-align: center;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.3;
    padding: 0 20px;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.wpsaju-mbti-type-code {
    position: absolute;
    top: 145px;
    left: 0; right: 0;
    text-align: center;
    color: rgba(255,255,255,.75);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.wpsaju-mbti-summary {
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,.95);
    color: var(--mbti-from);
    font-size: .9rem;
    font-weight: 700;
    padding: 7px 22px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* 하단 흰색 컨텐츠 영역 */
.wpsaju-mbti-card > .wpsaju-mbti-grid,
.wpsaju-mbti-card > .wpsaju-mbti-match-row,
.wpsaju-mbti-card > .wpsaju-mbti-tip,
.wpsaju-mbti-card > .wpsaju-mbti-share-btn {
    background: #fff;
    position: relative;
}

.wpsaju-mbti-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 20px 20px 0;
    background: #fff;
}

.wpsaju-mbti-box {
    padding: 16px;
    border-radius: 16px;
    margin: 0 5px;
}

.strength-box  { background: var(--mbti-light); border: 1.5px solid var(--mbti-accent); }
.weakness-box  { background: #fff8f8; border: 1.5px solid #f0a0a0; }

.wpsaju-mbti-box-title {
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #333;
    letter-spacing: -.01em;
}

.wpsaju-mbti-box ul {
    list-style: none;
    margin: 0; padding: 0;
}

.wpsaju-mbti-box ul li {
    font-size: .82rem;
    color: #444;
    line-height: 1.5;
    padding: 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.wpsaju-mbti-bullet {
    color: var(--mbti-accent);
    font-size: .7rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.weakness-box .wpsaju-mbti-bullet { color: #e74c3c; }

/* 궁합 행 */
.wpsaju-mbti-match-row {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
}

.wpsaju-mbti-match {
    flex: 1;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.wpsaju-mbti-match.best  { background: #eafaf1; border: 1.5px solid #27ae60; }
.wpsaju-mbti-match.worst { background: #fdf0f0; border: 1.5px solid #e74c3c; }

.match-label {
    font-size: .72rem;
    font-weight: 700;
    color: #666;
}

.match-type {
    font-size: .95rem;
    font-weight: 900;
    color: #222;
}

/* 팁 박스 */
.wpsaju-mbti-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 20px 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--mbti-light) 0%, #fff 100%);
    border-left: 4px solid var(--mbti-accent);
    border-radius: 0 12px 12px 0;
}

.tip-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

.tip-text {
    font-size: .85rem;
    font-weight: 600;
    color: #333;
    line-height: 1.6;
}

/* 공유 버튼 */
.wpsaju-mbti-share-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    padding: 14px;
    background: linear-gradient(135deg, var(--mbti-from) 0%, var(--mbti-to) 100%);
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    letter-spacing: -.01em;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    transition: transform .15s, box-shadow .15s;
}

.wpsaju-mbti-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
}

/* 모바일 대응 */
@media (max-width: 480px) {
    .wpsaju-mbti-card::before  { padding-top: 240px; }
    .wpsaju-mbti-nickname      { font-size: 1.4rem; top: 58px; }
    .wpsaju-mbti-type-code     { top: 158px; }
    .wpsaju-mbti-summary       { top: 185px; font-size: .82rem; }
    .wpsaju-mbti-grid          { grid-template-columns: 1fr; padding: 16px 14px 0; }
    .wpsaju-mbti-box           { margin: 0 0 10px; }
    .wpsaju-mbti-match-row     { flex-direction: column; gap: 8px; }
}