/**
 * 운세 화면
 *
 * 타로 테마(themes/tarot.css)의 토큰을 그대로 쓴다 — 한 사이트 안에서
 * 운세만 다른 색을 쓰면 붙여놓은 것처럼 보인다.
 * 이 파일은 tarot.css 다음에 따로 링크되므로 테마 선택자 없이 쓴다.
 */

.fortune-wrap {
    max-width: var(--content-max, 1080px);
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-6);
}

.fortune-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.02em;
}

/* ── 탭 ──────────────────────────────────────────────────────────────────── */
.fortune-tabs {
    display: flex;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
    overflow-x: auto;
}

.fortune-tab {
    flex: 0 0 auto;
    padding: 0.6rem 0.2rem;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-tertiary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.fortune-tab:hover { color: var(--color-text-secondary); }

.fortune-tab.is-active {
    color: var(--color-text-primary);
    border-bottom-color: var(--tarot-lavender);
}

/* ── 입력 폼 ─────────────────────────────────────────────────────────────── */
.fortune-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--tarot-radius, 16px);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.fortune-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}
.fortune-form__row + .fortune-form__row { margin-top: var(--space-3); }

.fortune-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 120px; }
.fortune-field--wide { min-width: 220px; }
.fortune-field--grow { flex: 1 1 220px; }

.fortune-field label {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-semibold);
}

.fortune-form__submit { flex: 0 0 auto; min-width: 150px; }

.fortune-form__note {
    display: flex; align-items: center; gap: 0.35rem;
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

/* ── 기간 ────────────────────────────────────────────────────────────────── */
.fortune-periods {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-bottom: var(--space-4);
}

.fortune-period {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    background: var(--color-surface);
    transition: all var(--transition-fast);
}
.fortune-period:hover { border-color: var(--tarot-lavender); color: var(--tarot-lavender); }
.fortune-period.is-active {
    border-color: var(--tarot-lavender);
    color: var(--tarot-lavender);
    background: var(--color-primary-light);
    font-weight: var(--font-semibold);
}

/* ── 항목 아이콘 줄 ──────────────────────────────────────────────────────── */
.fortune-cats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.fortune-cat {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    background: none; border: 0; cursor: pointer;
    padding: 0.2rem;
    color: var(--color-text-tertiary);
    transition: color var(--transition-fast);
}

.fortune-cat__ico {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--color-border-light, #f0eef8);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.fortune-cat__label { font-size: var(--text-xs); font-weight: var(--font-semibold); }

.fortune-cat:hover { color: var(--color-text-secondary); }
.fortune-cat.is-active { color: var(--tarot-lavender); }
.fortune-cat.is-active .fortune-cat__ico {
    background: var(--color-primary-light);
    color: var(--tarot-lavender);
}

/* ── 본문 ────────────────────────────────────────────────────────────────── */
.fortune-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--tarot-radius, 16px);
    padding: var(--space-5) var(--space-4);
}

.fortune-headline {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin: 0 0 0.2rem;
    letter-spacing: -0.01em;
}
.fortune-headline strong { color: var(--tarot-lavender); }

.fortune-date {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}

.fortune-cat-title {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

.fortune-body p {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.85;
    color: var(--color-text-secondary);
}

/* ── 행운 요소 ───────────────────────────────────────────────────────────── */
.fortune-lucky {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

.fortune-lucky__item { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; }
.fortune-lucky__item .k { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.fortune-lucky__item .v {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: var(--text-base); font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.swatch {
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    display: inline-block; flex: 0 0 auto;
}

.fortune-relation {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
}

/* ── 명식 ────────────────────────────────────────────────────────────────── */
.fortune-saju-mini { margin-top: var(--space-4); }
.fortune-saju-mini > summary {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: 0.4rem 0;
}

.fortune-pillars {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2); margin-top: var(--space-2);
}
.pillar {
    text-align: center; padding: var(--space-3) 0.2rem;
    background: var(--color-background, #faf9ff);
    border-radius: var(--radius-md);
}
.pillar__label { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-bottom: 0.2rem; }
.pillar__value { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text-primary); }
.pillar-note { font-size: var(--text-xs); color: var(--color-text-tertiary); margin: var(--space-2) 0 0; }

.fortune-ohaeng { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: var(--space-3); }
.ohaeng {
    padding: 0.25rem 0.6rem; border-radius: var(--radius-full);
    background: var(--color-primary-light); color: var(--tarot-lavender);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.ohaeng.is-zero { background: var(--color-border-light); color: var(--color-text-tertiary); }

.fortune-saju-link { margin-top: var(--space-3); }

.fortune-related {
    margin-top: var(--space-4); padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--text-sm); color: var(--color-text-tertiary);
}
.fortune-related a { color: var(--tarot-lavender); text-decoration: none; }
.fortune-related a:hover { text-decoration: underline; }

/* ── 생일 없음 / CTA ─────────────────────────────────────────────────────── */
.fortune-empty, .fortune-cta {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--tarot-radius, 16px);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
}
.fortune-empty > svg, .fortune-cta__head > svg { color: var(--tarot-lavender); }

.fortune-empty h2, .fortune-cta h2 {
    font-size: var(--text-xl); font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin: var(--space-3) 0 var(--space-2);
}
.fortune-empty p, .fortune-cta p { margin: 0 0 var(--space-4); line-height: 1.7; }

.fortune-empty__alt { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-tertiary); }
.fortune-empty__alt a { color: var(--tarot-lavender); text-decoration: none; }

.fortune-cta__meta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem;
    margin-bottom: var(--space-4);
}
.fortune-cta__meta span {
    padding: 0.25rem 0.7rem; border-radius: var(--radius-full);
    background: var(--color-primary-light); color: var(--tarot-lavender);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.fortune-cta__points { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-tertiary); }
.fortune-cta__points a { color: var(--tarot-lavender); }
.fortune-cta__error {
    margin-top: var(--space-3); padding: var(--space-3);
    background: var(--color-error-light); color: var(--color-error);
    border-radius: var(--radius-md); font-size: var(--text-sm);
}

/* ── 띠 / 별자리 목록 ────────────────────────────────────────────────────── */
.gsign-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.gsign-card {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--tarot-radius, 16px);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.gsign-card:hover { border-color: var(--tarot-lavender); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gsign-card.is-mine { border-color: var(--tarot-lavender); background: var(--color-primary-light); }

.gsign {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text-primary);
    /* 한자·점성 기호는 본문 폰트에 없을 수 있어 대체 글꼴을 붙인다 */
    font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
                 "Malgun Gothic", "Noto Sans CJK KR", sans-serif;
}
.gsign--lg { width: 68px; height: 68px; font-size: 30px; }

.gsign-card__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.gsign-card__name {
    font-size: var(--text-sm); font-weight: var(--font-bold);
    color: var(--tarot-lavender);
}
.gsign-card__sub { font-weight: 400; color: var(--color-text-tertiary); font-size: var(--text-xs); }
.gsign-card__line {
    font-size: var(--text-sm); color: var(--color-text-secondary);
    line-height: 1.5;
    /* 목록에서는 두 줄까지만 */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.gsign-card__badge {
    position: absolute; top: 0.5rem; right: 0.6rem;
    font-size: 10px; font-weight: var(--font-bold);
    color: var(--tarot-lavender);
}

/* ── 띠/별자리 상세 ──────────────────────────────────────────────────────── */
.fortune-back {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: var(--text-sm); color: var(--color-text-secondary);
    text-decoration: none; margin-bottom: var(--space-3);
}
.fortune-detail__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.fortune-detail__head h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text-primary); }
.gsign__sub { font-size: var(--text-sm); color: var(--color-text-tertiary); }
.fortune-detail__body { margin: 0; font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); }
.fortune-pending { color: var(--color-text-tertiary); }

.fortune-score { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.fortune-score__bar { flex: 1; height: 7px; border-radius: 4px; background: var(--color-border-light); overflow: hidden; }
.fortune-score__bar i { display: block; height: 100%; background: var(--tarot-card-back); }
.fortune-score span { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--tarot-lavender); }

/* ── 포춘쿠키 ────────────────────────────────────────────────────────────── */
.cookie-box {
    background: var(--tarot-hero-bg, #f4f1fd);
    border-radius: var(--tarot-radius, 16px);
    padding: var(--space-6) var(--space-4);
}
.cookie-stage { display: grid; place-items: center; gap: var(--space-4); min-height: 240px; align-content: center; }

.cookie-open {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--tarot-radius, 16px);
    padding: var(--space-6) var(--space-6);
    cursor: pointer;
    color: var(--tarot-lavender);
    font-size: var(--text-base); font-weight: var(--font-semibold);
    transition: all var(--transition-base);
}
.cookie-open:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.cookie-note {
    background: var(--color-surface);
    border-radius: var(--tarot-radius, 16px);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    max-width: 460px;
    box-shadow: var(--shadow-md);
}
.cookie-note__quote { font-size: var(--text-lg); color: var(--color-text-primary); line-height: 1.7; }
.cookie-color { display: inline-flex; align-items: center; gap: 0.3rem; }
.cookie-color strong { color: var(--tarot-lavender); }
.cookie-note__tip { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.cookie-note__meta {
    display: flex; justify-content: center; gap: var(--space-4);
    margin-top: var(--space-4); padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--text-sm); color: var(--color-text-secondary);
}
.cookie-note__basis { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-tertiary); }
.cookie-note__more { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); }
.cookie-note__more a { color: var(--tarot-lavender); }

/* ── 고지 ────────────────────────────────────────────────────────────────── */
.fortune-disclaimer {
    margin: var(--space-5) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-align: center;
    line-height: 1.7;
}

/* ── 반응형 ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fortune-cats { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
    .gsign-grid { grid-template-columns: 1fr; }
    .fortune-pillars { grid-template-columns: repeat(2, 1fr); }
    .fortune-form__submit { width: 100%; }
}

@media (max-width: 480px) {
    .fortune-lucky { grid-template-columns: 1fr; gap: var(--space-3); }
    .fortune-lucky__item { flex-direction: row; justify-content: space-between; }
    .cookie-note__meta { flex-direction: column; gap: var(--space-2); }
}


/* ── 사주 풀이 ───────────────────────────────────────────────────────────── */
.fortune-head-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap;
}
.fortune-lead {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.7;
}

.fortune-pillars--lg .pillar { padding: var(--space-4) 0.2rem; }
.pillar__hanja { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: 0.15rem; }
.pillar__ohaeng { font-size: var(--text-xs); color: var(--tarot-lavender); margin-top: 0.3rem; }

.saju-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3); margin-top: var(--space-4);
    padding-top: var(--space-4); border-top: 1px solid var(--color-border-light);
}
.saju-facts .k { display: block; font-size: var(--text-xs); color: var(--color-text-tertiary); }
.saju-facts .v { display: block; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); }

.saju-section { margin-top: var(--space-3); }
.saju-section p { margin: 0; font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); }


/* ── 궁합 ────────────────────────────────────────────────────────────────── */
.fortune-subtitle {
    font-size: var(--text-base); font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin: var(--space-5) 0 var(--space-3);
}

.fortune-form__title {
    font-size: var(--text-base); font-weight: var(--font-semibold);
    color: var(--color-text-primary); margin: 0 0 var(--space-3);
}

.match-pick-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
    align-items: end;
}
.match-pick { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.match-pick label {
    font-size: var(--text-xs); color: var(--color-text-secondary);
    font-weight: var(--font-semibold);
}
.match-pick__x { padding-bottom: 0.6rem; color: var(--tarot-lavender); }

.match-run-row {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    justify-content: center; margin-top: var(--space-4);
}

.match-pair {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3); align-items: center;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}
.match-who { text-align: center; display: flex; flex-direction: column; gap: 0.2rem; }
.match-who__name { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text-primary); }
.match-who__sub { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.match-score { display: flex; align-items: baseline; gap: 0.15rem; }
.match-score__num {
    font-size: 2.4rem; font-weight: var(--font-bold);
    color: var(--tarot-lavender); line-height: 1;
}
.match-score__unit { font-size: var(--text-sm); color: var(--color-text-tertiary); }

.match-headline {
    text-align: center; margin: var(--space-4) 0 var(--space-3);
    font-size: var(--text-xl); font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.match-basis {
    display: flex; align-items: flex-start; gap: 0.4rem;
    padding: var(--space-3);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--color-text-secondary);
    line-height: 1.7;
}
.match-basis strong { color: var(--tarot-lavender); }

.match-recent { display: flex; flex-direction: column; gap: var(--space-2); }
.match-recent__item {
    display: grid; grid-template-columns: auto auto 1fr; gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--transition-fast);
}
.match-recent__item:hover { border-color: var(--tarot-lavender); }
.match-recent__names { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.match-recent__names span { color: var(--color-text-tertiary); font-weight: 400; }
.match-recent__score { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--tarot-lavender); }
.match-recent__head {
    font-size: var(--text-sm); color: var(--color-text-tertiary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 인물 등록 목록 ──────────────────────────────────────────────────────── */
.people-list { display: flex; flex-direction: column; gap: var(--space-2); }
.people-item {
    display: grid; grid-template-columns: 1fr auto; gap: 0.3rem var(--space-3);
    align-items: center;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.people-item__main { display: flex; align-items: center; gap: 0.5rem; }
.people-item__name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.people-item__tag {
    padding: 0.15rem 0.5rem; border-radius: var(--radius-full);
    background: var(--color-primary-light); color: var(--tarot-lavender);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.people-item__meta {
    grid-column: 1; font-size: var(--text-xs); color: var(--color-text-tertiary);
}
.people-item__act {
    grid-row: 1 / span 2; grid-column: 2;
    display: flex; gap: 0.35rem; align-items: center;
}
.people-item__act form { margin: 0; }

@media (max-width: 640px) {
    .match-pick-row { grid-template-columns: 1fr; }
    .match-pick__x { justify-self: center; padding: 0; }
    .match-pair { grid-template-columns: 1fr; gap: var(--space-2); }
    .match-score { justify-content: center; }
    .match-recent__item { grid-template-columns: 1fr auto; }
    .match-recent__head { grid-column: 1 / -1; white-space: normal; }
}


/* ── 다른 운세로 ─────────────────────────────────────────────────────────── */
.fortune-more {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2); margin-top: var(--space-5);
}
.fortune-more__item {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--tarot-radius, 16px);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}
.fortune-more__item:hover { border-color: var(--tarot-lavender); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fortune-more__item > svg { color: var(--tarot-lavender); margin-bottom: 0.3rem; }
.fortune-more__item .t { font-size: var(--text-base); font-weight: var(--font-semibold); }
.fortune-more__item .d { font-size: var(--text-xs); color: var(--color-text-tertiary); line-height: 1.5; }

@media (max-width: 1024px) { .fortune-more { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .fortune-more { grid-template-columns: 1fr; } }


/* ── 작명 ────────────────────────────────────────────────────────────────── */
.naming-need {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: var(--space-4); padding: var(--space-3);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--color-text-secondary);
}
.naming-need strong { color: var(--tarot-lavender); font-size: var(--text-base); }

.naming-list { display: flex; flex-direction: column; gap: var(--space-3); }

.naming-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--tarot-radius, 16px);
    padding: var(--space-4);
}

.naming-card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap;
}
.naming-card__name {
    font-size: var(--text-2xl); font-weight: var(--font-bold);
    color: var(--color-text-primary); letter-spacing: -0.02em;
}
.naming-card__name .sur { color: var(--color-text-tertiary); font-weight: var(--font-semibold); }
.naming-card__name .hanja {
    margin-left: 0.5rem; font-size: var(--text-base);
    color: var(--color-text-tertiary); font-weight: 400;
}
.naming-card__score {
    font-size: var(--text-sm); font-weight: var(--font-bold);
    color: var(--tarot-lavender);
}

.naming-card__note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm); line-height: 1.8;
    color: var(--color-text-secondary);
}

.naming-chars {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-2); margin-top: var(--space-3);
}
.naming-char {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: var(--space-3);
    background: var(--color-background, #faf9ff);
    border-radius: var(--radius-md);
}
.naming-char .h {
    font-size: var(--text-xl); font-weight: var(--font-bold);
    color: var(--color-text-primary); line-height: 1.2;
}
.naming-char .m { font-size: var(--text-sm); color: var(--color-text-secondary); }
.naming-char .s { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.naming-detail { margin-top: var(--space-3); }
.naming-detail > summary {
    cursor: pointer; font-size: var(--text-xs);
    color: var(--color-text-tertiary); padding: 0.3rem 0;
}

.naming-frames {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2); margin-top: var(--space-2);
}
.frame {
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    padding: var(--space-2) 0.2rem;
    background: var(--color-border-light, #f0eef8);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}
.frame.is-lucky { background: var(--color-success-light, #E3F7F0); }
.frame .k { color: var(--color-text-tertiary); }
.frame .v { font-weight: var(--font-semibold); color: var(--color-text-primary); }
.frame .l { color: var(--tarot-lavender); font-weight: var(--font-bold); }
.frame .d { color: var(--color-text-tertiary); font-size: 10px; text-align: center; }

.naming-sound {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs); color: var(--color-text-tertiary);
}

@media (max-width: 640px) {
    .naming-chars { grid-template-columns: 1fr; }
    .naming-frames { grid-template-columns: repeat(2, 1fr); }
    .naming-card__name { font-size: var(--text-xl); }
}


/* ── PDF 리포트 ──────────────────────────────────────────────────────────── */
.report-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4); padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}
.report-cta__note {
    font-size: var(--text-xs); color: var(--color-text-tertiary);
    flex: 1 1 100%; text-align: center;
}

.cta-bonus {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin: 0 0 var(--space-4) !important;
    padding: 0.4rem 0.9rem;
    background: var(--color-primary-light);
    border-radius: var(--radius-full);
    font-size: var(--text-sm); color: var(--color-text-secondary);
}
.cta-bonus strong { color: var(--tarot-lavender); }


/* ── 상품 상세 ───────────────────────────────────────────────────────────── */
.pd {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--tarot-radius, 16px);
    padding: var(--space-5) var(--space-4);
}

.pd__head { text-align: center; margin-bottom: var(--space-5); }
.pd__title {
    font-size: var(--text-2xl); font-weight: var(--font-bold);
    color: var(--color-text-primary); margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
}
.pd__lead {
    margin: 0; font-size: var(--text-sm); line-height: 1.7;
    color: var(--color-text-secondary);
}

.pd__sub {
    font-size: var(--text-sm); font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

/* 구성 */
.pd__includes { margin-bottom: var(--space-5); }
.pd__grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}
.pd__item {
    display: grid; grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.1rem var(--space-2);
    padding: var(--space-3);
    background: var(--color-background, #faf9ff);
    border-radius: var(--radius-md);
}
.pd__ico {
    grid-row: 1 / span 2;
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--tarot-lavender);
}
.pd__t { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.pd__d { font-size: var(--text-xs); color: var(--color-text-tertiary); line-height: 1.5; }

/* 미리보기 */
.pd__preview { margin-bottom: var(--space-5); }
.pd__shot {
    position: relative; overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-height: 340px;
    background: #fff;
}
.pd__shot img { width: 100%; display: block; }
/* 아래를 흐리게 — 전부 보여주면 결제할 이유가 없다 */
.pd__shot-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%);
    pointer-events: none;
}
.pd__shot-note {
    display: flex; align-items: center; gap: 0.3rem;
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs); color: var(--color-text-tertiary);
}

/* 가격 · 결제 */
.pd__buy {
    text-align: center;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-4);
}
.pd__price { display: flex; align-items: baseline; justify-content: center; gap: 0.2rem; margin-bottom: var(--space-3); }
.pd__price-num {
    font-size: 2rem; font-weight: var(--font-bold);
    color: var(--color-text-primary); line-height: 1;
}
.pd__price-unit { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--tarot-lavender); }
.pd__price-won { margin-left: 0.5rem; font-size: var(--text-sm); color: var(--color-text-tertiary); }

.pd__cta { display: flex; justify-content: center; }
.pd__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-tertiary); }
.pd__note a { color: var(--tarot-lavender); }

/* FAQ */
.pd__q {
    border-bottom: 1px solid var(--color-border-light);
}
.pd__q > summary {
    cursor: pointer; padding: var(--space-3) 0;
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    list-style: none;
    position: relative; padding-right: 1.5rem;
}
.pd__q > summary::-webkit-details-marker { display: none; }
.pd__q > summary::after {
    content: '+'; position: absolute; right: 0.3rem; top: 50%;
    transform: translateY(-50%);
    color: var(--tarot-lavender); font-size: var(--text-lg); font-weight: 400;
}
.pd__q[open] > summary::after { content: '−'; }
.pd__q p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm); line-height: 1.75;
    color: var(--color-text-secondary);
}
.pd__q p strong { color: var(--tarot-lavender); }

@media (max-width: 640px) {
    .pd__grid { grid-template-columns: 1fr; }
    .pd__title { font-size: var(--text-xl); }
}

.pd__need {
    display: flex; align-items: center; gap: 0.4rem;
    padding: var(--space-3);
    margin-bottom: var(--space-5);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--color-text-secondary);
}
.pd__need strong { color: var(--tarot-lavender); font-size: var(--text-base); }

/* ── 띠 표식 — 그림을 앞세우고 한자는 곁들인다 ───────────────────────────── */
.gsign--animal { position: relative; overflow: visible; }
.gsign__art {
    font-size: 26px; line-height: 1;
    /* 컬러 이모지 전용 글꼴을 앞세워 흑백 대체 글리프를 피한다 */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.gsign--lg .gsign__art { font-size: 36px; }
.gsign__han {
    position: absolute; right: -2px; bottom: -2px;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 11px; font-weight: 600;
    color: var(--color-text-secondary);
}
.gsign--lg .gsign__han { width: 25px; height: 25px; font-size: 14px; right: -1px; bottom: -1px; }

/* ── 대시보드: 오늘 무료로 보는 운세 ─────────────────────────────────────── */
.free-today {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--tarot-radius, 16px);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}
.free-today__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-3);
}
.free-today__head h2 {
    margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold);
    color: var(--color-text-primary);
}
.free-today__head a {
    flex: 0 0 auto;
    font-size: var(--text-sm); color: var(--tarot-lavender);
    text-decoration: none; white-space: nowrap;
}
.free-today__head a:hover { text-decoration: underline; }

.free-today__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
}
.free-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-background, #faf9ff);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.free-item:hover { border-color: var(--tarot-lavender); transform: translateY(-2px); }
.free-item__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.free-item__title {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: var(--text-sm); font-weight: var(--font-bold);
    color: var(--color-text-primary);
}
.free-item__score {
    padding: 0.05rem 0.4rem; border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--tarot-lavender);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.free-item__line {
    font-size: var(--text-xs); line-height: 1.5;
    color: var(--color-text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.free-today__note {
    display: flex; align-items: center; gap: 0.3rem;
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs); color: var(--color-text-tertiary);
}
.free-today__empty { text-align: center; padding: var(--space-3) 0; }
.free-today__empty p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm); color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .free-today__grid { grid-template-columns: 1fr; }
}

/* ── 대시보드: 오늘 뽑은 카드 ────────────────────────────────────────────── */
.today-card { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-2) 0 var(--space-1); }
.today-card__art { flex: 0 0 auto; width: 120px; }
.today-card__art .tarot-card { width: 120px; }
.today-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.today-card__name {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text-primary);
}
.today-card__dir {
    padding: 0.1rem 0.5rem; border-radius: 999px;
    background: var(--color-primary-light); color: var(--tarot-lavender);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.today-card__dir.is-rev { background: var(--color-border); color: var(--color-text-secondary); }
.today-card__line {
    margin: 0; font-size: var(--text-sm); line-height: 1.75;
    color: var(--color-text-secondary);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 640px) {
    .today-card { flex-direction: column; align-items: center; text-align: center; }
    .today-card__text { align-items: center; }
}

/* ── 포춘쿠키 여는 연출 ──────────────────────────────────────────────────────
   조각 그림은 한 장이고, 오른쪽은 좌우로 뒤집어 쓴다.                        */
.cookie-art {
    position: relative; display: block;
    width: 190px; height: 118px;
    margin: 0 auto;
}
.ck-piece {
    position: absolute; top: 12px; width: 104px; height: auto;
    transition: transform .65s cubic-bezier(.34,1.25,.5,1);
}
/* 단면은 대각선이라 나란히 두면 위쪽이 벌어진다.
   깊게 겹치고 서로를 향해 살짝 기울여야 닫힌 한 개로 보인다. */
.ck-piece--l { left:  14px; transform: rotate(3deg); }
.ck-piece--r { right: 14px; transform: scaleX(-1) rotate(3deg); }

.ck-slip {
    position: absolute; left: 50%; top: 18px;
    width: 40px; margin-left: -20px;
    opacity: 0; transform: translateY(14px);
    transition: opacity .35s .3s, transform .55s .28s cubic-bezier(.2,1.2,.4,1);
}
.ck-slip svg { width: 100%; height: auto; display: block; }

.ck-crumb { position: absolute; inset: 0; opacity: 0; transition: opacity .3s .35s; }
.ck-crumb i {
    position: absolute; border-radius: 50%; background: #D9A85C;
}
.ck-crumb i:nth-child(1) { left: 26%; bottom: 4px;  width: 6px; height: 6px; }
.ck-crumb i:nth-child(2) { left: 68%; bottom: 1px;  width: 5px; height: 5px; background: #C9954A; }
.ck-crumb i:nth-child(3) { left: 48%; bottom: -4px; width: 4px; height: 4px; background: #E0B672; }

/* 흔들림 — 열기 직전 */
.cookie-open.is-shaking .cookie-art { animation: ckShake .42s ease-in-out; }
@keyframes ckShake {
    0%,100% { transform: rotate(0)     translateX(0); }
    20%     { transform: rotate(-6deg) translateX(-3px); }
    45%     { transform: rotate(5deg)  translateX(3px); }
    70%     { transform: rotate(-4deg) translateX(-2px); }
}

/* 갈라짐 */
.cookie-open.is-cracked .ck-piece--l { transform: translate(-34px, 10px) rotate(-20deg); }
.cookie-open.is-cracked .ck-piece--r { transform: translate( 34px, 10px) rotate( 20deg) scaleX(-1); }
.cookie-open.is-cracked .ck-slip     { opacity: 1; transform: translateY(-14px); }
.cookie-open.is-cracked .ck-crumb    { opacity: 1; }
.cookie-open.is-cracked { cursor: default; }
.cookie-open.is-cracked:hover { transform: none; box-shadow: none; }

.cookie-open__label { transition: opacity .25s; }
.cookie-open.is-cracked .cookie-open__label { opacity: 0; }

/* 쪽지 등장 */
.cookie-note { animation: ckNote .45s cubic-bezier(.2,1,.4,1); }
@keyframes ckNote {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-piece, .ck-slip, .ck-crumb, .cookie-note, .cookie-open__label { transition: none; animation: none; }
    .cookie-open.is-shaking .cookie-art { animation: none; }
}

/* ── 운세 갈래 바로가기 ──────────────────────────────────────────────────────
   칩 한 줄이라 세로 공간을 거의 안 먹는다. 카드로 크게 만들면 정작 운세가 밀린다. */
.fsub {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin: 0 0 var(--space-4);
}
.fsub__item {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    text-decoration: none; white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}
.fsub__item:hover { border-color: var(--tarot-lavender); color: var(--tarot-lavender); }
.fsub__item.is-active {
    background: var(--color-primary-light);
    border-color: var(--tarot-lavender);
    color: var(--tarot-lavender);
}
@media (max-width: 640px) {
    /* 좁은 화면에서는 줄바꿈 대신 옆으로 밀어 본다 */
    .fsub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .fsub::-webkit-scrollbar { display: none; }
}