/* ========== Screen Reader Only (Accessibility/SEO) ========== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========== Reset & CSS Variables ========== */
:root {
    --bg-dark: #0c0f1a;
    --bg-card: #141825;
    --bg-card-hover: #1a1f30;
    --bg-sidebar: #0e1120;
    --bg-input: #161b2e;
    --bg-glass: rgba(14, 17, 32, 0.88);
    --gold: #6c5ce7;
    --gold-light: #a29bfe;
    --gold-dim: #5a4fcf;
    --gold-glow: rgba(108, 92, 231, 0.15);
    --accent-gradient: linear-gradient(135deg, #6c5ce7, #00cec9);
    --text: #e8eaf6;
    --text-dim: #9ba3bf;
    --text-muted: #636e88;
    --accent-red: #ff6b6b;
    --accent-blue: #74b9ff;
    --accent-green: #55efc4;
    --border: #1e2235;
    --border-light: #2a2f45;
    --radius: 12px;
    --radius-sm: 8px;
    --sidebar-width: 260px;
    --header-height: 60px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
    --shadow-gold: 0 4px 24px rgba(108,92,231,0.2);
    /* Alias variables (compatibility) */
    --text-primary: #e8eaf6;
    --text-secondary: #9ba3bf;
    --bg: #0c0f1a;
    --card-bg: #141825;
    --card-border: #1e2235;
    --text-light: #a29bfe;
    --text-sub: #9ba3bf;
    --text-main: #e8eaf6;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 입력 필드는 선택 허용 */
input, textarea, select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* 이미지 드래그 방지 */
img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* ========== 모바일 상단 헤더 ========== */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(12, 15, 26, 0.85);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border-bottom: 1px solid rgba(108,92,231,0.1);
    z-index: 150;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    padding-top: env(safe-area-inset-top, 0);
}

.mobile-header .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}

/* Header logo image */
.header-logo {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

/* Mobile header icon spin */
.header-yinyang-spin {
    width: 24px;
    height: 24px;
    animation: spin 20s linear infinite;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Home page logo image */
.home-logo {
    height: 70px;
    width: auto;
    filter: brightness(0) invert(1);
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
}

.yinyang-icon {
    width: 28px;
    height: 28px;
    animation: yinyangSpin 20s linear infinite;
    filter: drop-shadow(0 0 8px rgba(108,92,231,0.3));
}

@keyframes yinyangSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    padding: 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.menu-toggle:active {
    background: rgba(255,255,255,0.08);
}

/* 햄버거 아이콘 */
.hamburger-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: opacity var(--transition);
}

.menu-toggle.active .hamburger-icon {
    opacity: 0.6;
}

/* ========== 오버레이 ========== */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 190;
    opacity: 0;
    transition: opacity var(--transition);
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ========== 사이드바 ========== */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    transition: transform var(--transition);
    overflow: hidden;
}

.sidebar-header {
    padding: 32px 24px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}

/* 사이드바 브랜드 (로고 + 음양) */
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

/* Sidebar logo image */
.sidebar-logo {
    height: 50px;
    width: auto;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

/* 사이드바 음양 회전 */
.sidebar-yinyang-spin {
    width: 36px;
    height: 36px;
    animation: spin 12s linear infinite;
    flex-shrink: 0;
}

/* 사이드바 음양 로고 (레거시) */
.sidebar-yinyang {
    margin-bottom: 14px;
}

.yinyang-lg {
    width: 44px;
    height: 44px;
}

.sidebar-header h1 {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    color: var(--text);
    letter-spacing: 2px;
    font-weight: 800;
}

.sidebar-subtitle {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-dim);
    font-size: 0.78rem;
    margin-top: 8px;
    letter-spacing: 0.5px;
}

.nav-menu {
    list-style: none;
    padding: 6px 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.nav-item {
    padding: 10px 24px;
    cursor: pointer;
    transition: all var(--transition);
    border-left: 3px solid transparent;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    min-height: 44px;
    letter-spacing: 0.2px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0 8px 8px 0;
    margin-right: 12px;
}

.nav-item a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.nav-item:hover {
    background: rgba(108,92,231,0.06);
    color: var(--text);
}

.nav-item:active {
    background: rgba(108,92,231,0.1);
}

.nav-item.active {
    background: rgba(108,92,231,0.08);
    border-left-color: var(--gold);
    color: #ffffff;
    font-weight: 600;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: linear-gradient(180deg, #6c5ce7, #00cec9);
    border-radius: 12px;
}

.nav-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

img.nav-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    vertical-align: middle;
}

.nav-item.active .nav-icon {
    opacity: 1;
}

.sidebar-footer {
    padding: 16px;
    text-align: center;
    border-top: 1px solid rgba(108,92,231,0.08);
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    margin-bottom: 10px;
}
.footer-links a {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold-dim);
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: var(--gold-light);
    text-decoration: underline;
}

/* ========== 메인 콘텐츠 ========== */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 40px 48px;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: calc(var(--sidebar-width) + 960px);
}

.page { display: none; }
.page.active { display: block; animation: fadeIn 0.4s ease; }

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

/* ========== 페이지 헤더 ========== */
.page-header {
    margin-bottom: 32px;
    text-align: center;
}

.page-header h1 {
    font-size: 1.6rem;
    color: var(--text);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.page-header .hanja {
    font-size: 0.85rem;
    color: var(--gold-dim);
    margin-left: 8px;
    font-weight: 400;
    letter-spacing: 2px;
}

.page-desc {
    color: var(--text-dim);
    margin-top: 8px;
    font-size: 0.85rem;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 1px;
}

/* ========== 서비스 소개 콘텐츠 ========== */
.service-intro {
    margin-bottom: 24px;
    padding: 22px 26px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    line-height: 1.9;
    position: relative;
}
.service-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #6c5ce7, #00cec9);
    border-radius: 12px 0 0 12px;
    pointer-events: none;
}
.service-intro h3 {
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 14px 0;
    letter-spacing: 2px;
}
.service-intro h4 {
    color: var(--gold-light);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 18px 0 10px 0;
    letter-spacing: 1px;
}
.service-intro p {
    color: var(--text-dim);
    font-size: 0.88rem;
    margin: 8px 0;
    word-break: keep-all;
    text-indent: 1em;
}
.service-intro ul {
    margin: 10px 0 10px 20px;
    padding: 0;
    list-style: none;
}
.service-intro ul li {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.85;
    margin: 6px 0;
    padding-left: 14px;
    position: relative;
}
.service-intro ul li::before {
    content: '';
    position: absolute;
    left: 0;
    color: var(--gold-dim);
    font-size: 0.5rem;
    top: 4px;
}
.service-intro ul li strong {
    color: var(--gold-light);
    font-weight: 600;
}

/* ========== 카드 ========== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 24px;
    transition: all var(--transition);
    position: relative;
    backdrop-filter: blur(10px);
}

.card:hover {
    border-color: var(--border-light);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

/* ========== 홈 (메인 메뉴 그리드) ========== */
.home-category {
    margin-bottom: 32px;
}
.home-category-title {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.home-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.home-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 12px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-decoration: none;
    color: var(--text);
    min-height: 100px;
}
.home-menu-item:hover {
    background: var(--bg-card-hover);
    border-color: rgba(108,92,231,0.3);
    box-shadow: 0 8px 32px rgba(108,92,231,0.12), 0 4px 16px rgba(0,0,0,0.2);
    transform: translateY(-4px) scale(1.02);
}
.home-menu-item:active {
    transform: translateY(0) scale(0.98);
}
.home-menu-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    margin-bottom: 10px;
}
.home-menu-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.5px;
    line-height: 1.3;
}
.home-menu-item:hover .home-menu-label {
    color: var(--gold-light);
}
.home-badge-new {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #6c5ce7, #00cec9);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.home-badge-hot {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 8px;
    line-height: 1;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 4px rgba(249,115,22,0.4);
    animation: hotPulse 2s ease-in-out infinite;
}
@keyframes hotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.08); }
}
/* 사이드바 배지 */
.nav-badge-new {
    display: inline-block;
    background: var(--accent-red);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.2;
}
.nav-badge-hot {
    display: inline-block;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

/* ========== 폼 ========== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
    align-items: end;
}

.form-group label {
    display: block;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-bottom: 6px;
    font-weight: 400;
    letter-spacing: 1px;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="number"] {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-input);
    border: 1px solid rgba(108,92,231,0.08);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all var(--transition);
    appearance: none;
    -webkit-appearance: none;
    min-height: 44px;
}

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8194' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: rgba(108,92,231,0.5);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.12), 0 0 20px rgba(108,92,231,0.08);
    background: var(--bg-card);
}

.astro-city-custom {
    margin-top: 8px;
}

.radio-group {
    display: flex;
    gap: 4px;
    padding-top: 2px;
}

.radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.92rem;
    padding: 8px 18px;
    border: 1px solid rgba(108,92,231,0.1);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    flex: 1;
    min-height: 44px;
    letter-spacing: 2px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.radio-label:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-glow);
    color: var(--gold);
}

.radio-label input[type="radio"] {
    accent-color: var(--gold);
    width: 16px;
    height: 16px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    accent-color: var(--gold);
    width: 16px;
    height: 16px;
}

.form-submit {
    display: flex;
    align-items: flex-end;
}

.btn-primary {
    width: 100%;
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    letter-spacing: 0.5px;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 6px 24px rgba(108,92,231,0.35);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-secondary {
    width: 100%;
    padding: 11px 24px;
    background: transparent;
    color: var(--gold);
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: var(--radius-sm);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition);
    min-height: 44px;
    letter-spacing: 2px;
    -webkit-tap-highlight-color: transparent;
}

.btn-secondary:hover {
    background: rgba(108,92,231,0.08);
    border-color: var(--gold);
}

.btn-secondary:active {
    transform: scale(0.98);
}

/* ========== 궁합 폼 ========== */
.form-dual .person-block {
    margin-bottom: 20px;
}

.form-dual .person-block h3 {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    color: var(--gold);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(108,92,231,0.1);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
}

.person-divider {
    text-align: center;
    padding: 8px 0;
    font-size: 1.3rem;
    color: var(--accent-red);
    opacity: 0.7;
}

/* ========== 결과 영역 ========== */
.result-area {
    margin-top: 8px;
}

.result-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    margin-bottom: 24px;
    animation: fadeIn 0.5s ease;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

/* Clean top accent line */
.result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, #6c5ce7, #00cec9);
    border-radius: 0 0 2px 2px;
    pointer-events: none;
}

/* No bottom decoration */
.result-card::after {
    content: '';
    display: none;
}

.result-card h3 {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold);
    font-size: 1.15rem;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(108,92,231,0.15);
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
}

/* 제목 아래 장식선 */
.result-card h3::after {
    content: '';
    display: block;
    color: rgba(108,92,231,0.2);
    font-size: 0.5rem;
    letter-spacing: 6px;
    margin-top: 10px;
    text-align: center;
}

/* ========== 사주 테이블 ========== */
.saju-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.saju-table th,
.saju-table td {
    padding: 14px 8px;
    text-align: center;
    border: 1px solid rgba(108,92,231,0.12);
    font-size: 0.92rem;
}

.saju-table th {
    background: rgba(108,92,231,0.06);
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 2px;
}

.saju-table .label-cell {
    background: rgba(108,92,231,0.03);
    color: var(--gold-dim);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    width: 60px;
    letter-spacing: 1px;
}

.saju-char {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    display: block;
    margin-bottom: 3px;
    text-shadow: 0 0 12px rgba(108,92,231,0.15);
}

.saju-kr {
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* 오행 색상 */
.saju-master-card,
.saju-summary-card,
.traditional-board,
.saju-calendar-board {
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(108,92,231,0.12), transparent 28%),
        linear-gradient(180deg, rgba(20,24,37,0.96), rgba(12,15,26,0.98));
    border: 1px solid rgba(108,92,231,0.2);
}

.saju-calendar-board::before,
.saju-master-card::before,
.traditional-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(162,155,254,0.05), transparent 35%),
        linear-gradient(315deg, rgba(108,92,231,0.04), transparent 45%);
    pointer-events: none;
}

.calendar-meta-grid,
.saju-summary-grid,
.traditional-hero-grid,
.strength-summary,
.relation-groups {
    display: grid;
    gap: 14px;
}

.calendar-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calendar-meta-card {
    position: relative;
    padding: 18px 18px 16px;
    border: 1px solid rgba(108,92,231,0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(108,92,231,0.03));
    border-radius: 12px;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.calendar-meta-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(162,155,254,0.08);
    pointer-events: none;
}

.calendar-meta-label,
.calendar-term-kicker,
.traditional-panel-kicker,
.napeum-kicker,
.relation-group-title,
.saju-table-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--gold-dim);
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.calendar-meta-card strong,
.calendar-term-card strong,
.traditional-panel-main,
.napeum-main {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold-light);
    font-size: 1.05rem;
    line-height: 1.35;
}

.calendar-meta-card small,
.calendar-term-card small,
.traditional-panel-sub,
.traditional-panel-note,
.napeum-sub,
.napeum-ganji,
.relation-text,
.hidden-stem-meta span,
.saju-summary-item small {
    color: var(--text-dim);
    line-height: 1.55;
}

.calendar-term-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.calendar-term-card {
    padding: 18px 18px 16px;
    border-radius: 12px;
    border: 1px solid rgba(108,92,231,0.16);
    background: rgba(14,17,32,0.82);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-term-card.is-next {
    background: linear-gradient(180deg, rgba(108,92,231,0.08), rgba(14,17,32,0.9));
}

.calendar-term-time {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
}

.calendar-chip-row,
.traditional-chip-row,
.traditional-strength-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.calendar-chip-row {
    margin-top: 16px;
}

.calendar-note,
.traditional-chip,
.traditional-strength-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(108,92,231,0.18);
    background: rgba(108,92,231,0.06);
    color: var(--gold-light);
    font-size: 0.78rem;
    letter-spacing: 0.4px;
}

.calendar-note.is-warning,
.traditional-chip.is-title {
    background: rgba(108,92,231,0.14);
    color: var(--gold);
    font-weight: 700;
}

.saju-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.saju-pillar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 272px;
    padding: 18px 18px 16px;
    border-radius: 16px;
    border: 1px solid rgba(108,92,231,0.2);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(12,15,26,0.96)),
        radial-gradient(circle at top, rgba(108,92,231,0.08), transparent 45%);
    box-shadow: inset 0 1px 0 rgba(162,155,254,0.06);
}

.saju-pillar-card.is-empty {
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(14,17,32,0.95));
}

.saju-pillar-head,
.hidden-stem-head,
.relation-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.saju-pillar-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--gold-light);
    font-size: 0.98rem;
    font-weight: 700;
}

.saju-pillar-title span {
    color: var(--gold-dim);
    font-size: 0.74rem;
    letter-spacing: 2px;
}

.saju-pillar-napeum {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(108,92,231,0.1);
    color: var(--gold);
    font-size: 0.72rem;
}

.saju-pillar-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.saju-pillar-symbol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.saju-pillar-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, rgba(108,92,231,0.22), transparent);
}

.saju-pillar-meta {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.saju-pillar-meta-row,
.strength-summary-item,
.saju-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.saju-pillar-meta-row span,
.strength-summary-item span,
.saju-summary-item .label {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.saju-pillar-meta-row strong,
.strength-summary-item strong,
.saju-summary-item strong,
.relation-head strong {
    color: var(--text);
    font-size: 0.92rem;
}

.saju-pillar-empty,
.hidden-stem-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    border-radius: 12px;
    border: 1px dashed rgba(108,92,231,0.18);
    color: var(--text-dim);
    font-size: 0.86rem;
    background: rgba(255,255,255,0.02);
    text-align: center;
}

.saju-table-shell {
    border-radius: 16px;
    border: 1px solid rgba(108,92,231,0.18);
    background: rgba(12,15,26,0.72);
    overflow: hidden;
}

.saju-table-title {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(108,92,231,0.12);
    background: rgba(108,92,231,0.05);
}

.saju-table {
    margin-bottom: 0;
}

.saju-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.saju-summary-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px;
    min-height: 112px;
    border-radius: 12px;
    border: 1px solid rgba(108,92,231,0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(108,92,231,0.02));
}

.traditional-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 16px;
}

.traditional-panel,
.strength-board,
.relation-group,
.napeum-card,
.hidden-stem-card {
    border-radius: 14px;
    border: 1px solid rgba(108,92,231,0.16);
    background: rgba(14,17,32,0.86);
}

.traditional-panel {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.traditional-panel-main {
    font-size: 1.18rem;
}

.traditional-panel-copy,
.strength-copy,
.relation-between {
    color: var(--text);
    line-height: 1.72;
    margin: 0;
}

.traditional-section {
    margin-top: 18px;
}

.traditional-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
}

.traditional-section-title::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    box-shadow: 0 0 10px rgba(108,92,231,0.25);
}

.hidden-stems-grid,
.napeum-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hidden-stem-card,
.napeum-card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hidden-stem-card.is-empty,
.napeum-card.is-empty {
    justify-content: center;
}

.hidden-stem-branch {
    color: var(--gold-dim);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
}

.hidden-stem-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(108,92,231,0.08);
}

.hidden-stem-row:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.hidden-stem-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 8px;
    background: rgba(108,92,231,0.09);
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
}

.hidden-stem-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hidden-stem-gan {
    align-self: flex-start;
}

.hidden-stem-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
}

.strength-board {
    padding: 18px;
}

.strength-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.strength-summary-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}

.weighted-ohang-list {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.weighted-ohang-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 46px;
    gap: 10px;
    align-items: center;
}

.weighted-ohang-label,
.weighted-ohang-value {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
}

.weighted-ohang-track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(108,92,231,0.08);
}

.weighted-ohang-fill {
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 0 12px rgba(108,92,231,0.16);
}

.weighted-ohang-fill.bg-wood { background: linear-gradient(90deg, rgba(74,150,74,0.82), rgba(106,171,106,0.96)); }
.weighted-ohang-fill.bg-fire { background: linear-gradient(90deg, rgba(214,67,67,0.82), rgba(239,68,68,0.96)); }
.weighted-ohang-fill.bg-earth { background: linear-gradient(90deg, rgba(177,133,33,0.82), rgba(108,92,231,0.96)); }
.weighted-ohang-fill.bg-metal { background: linear-gradient(90deg, rgba(144,153,165,0.82), rgba(192,199,208,0.96)); }
.weighted-ohang-fill.bg-water { background: linear-gradient(90deg, rgba(42,100,201,0.82), rgba(59,130,246,0.96)); }

.napeum-card {
    text-align: center;
}

.napeum-main {
    font-size: 1.2rem;
}

.relation-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.relation-group {
    padding: 16px;
}

.relation-group-title {
    margin-bottom: 12px;
}

.relation-card {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(108,92,231,0.08);
}

.relation-card + .relation-card {
    margin-top: 10px;
}

.relation-head span {
    color: var(--gold-dim);
    font-size: 0.76rem;
}

@media (max-width: 1100px) {
    .calendar-meta-grid,
    .saju-summary-grid,
    .strength-summary,
    .relation-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .traditional-hero-grid {
        grid-template-columns: 1fr;
    }

    .hidden-stems-grid,
    .napeum-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .saju-master-card,
    .saju-summary-card,
    .traditional-board,
    .saju-calendar-board {
        padding: 22px 18px;
    }

    .saju-pillars-grid,
    .calendar-term-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-meta-grid,
    .saju-summary-grid,
    .strength-summary,
    .relation-groups,
    .hidden-stems-grid,
    .napeum-grid {
        grid-template-columns: 1fr;
    }

    .saju-table-shell {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .saju-table {
        min-width: 540px;
    }
}

@media (max-width: 480px) {
    .calendar-term-grid,
    .saju-pillars-grid {
        grid-template-columns: 1fr;
    }

    .calendar-meta-card,
    .saju-pillar-card,
    .traditional-panel,
    .strength-board,
    .hidden-stem-card,
    .napeum-card,
    .relation-group {
        padding: 14px;
    }

    .weighted-ohang-row {
        grid-template-columns: 72px minmax(0, 1fr) 38px;
    }

    .saju-char,
    .oh-chip.saju-char {
        font-size: 1.35rem;
    }

    /* ── 원국 상세표: 모바일 최적화 ── */
    .saju-table {
        min-width: 0;
        width: 100%;
    }

    .saju-table th,
    .saju-table td {
        padding: 6px 3px;
        font-size: 0.72rem;
    }

    .saju-table th {
        font-size: 0.68rem;
        letter-spacing: 0.5px;
    }

    .saju-table .label-cell {
        font-size: 0.62rem;
        width: 38px;
        letter-spacing: 0;
        padding: 6px 2px;
    }

    .saju-table .saju-char {
        font-size: 1rem;
        margin-bottom: 1px;
    }

    .saju-table .saju-kr {
        font-size: 0.6rem;
        letter-spacing: 0;
    }

    .saju-table-title {
        padding: 10px 12px;
        font-size: 0.68rem;
    }
}

.ohang-wood { color: #6aab6a; }
.ohang-fire { color: #ef4444; }
.ohang-earth { color: #6c5ce7; }
.ohang-metal { color: #c0c7d0; }
.ohang-water { color: #3b82f6; }

.bg-wood { background: rgba(106,171,106,0.12); }
.bg-fire { background: rgba(239,68,68,0.12); }
.bg-earth { background: rgba(108,92,231,0.12); }
.bg-metal { background: rgba(192,199,208,0.12); }
.bg-water { background: rgba(59,130,246,0.12); }

/* ========== 오행 차트 ========== */
.ohang-chart {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    align-items: flex-end;
    height: 120px;
}

.ohang-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.ohang-bar-fill {
    width: 100%;
    max-width: 60px;
    border-radius: 6px 6px 0 0;
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 4px;
}

.ohang-bar-label {
    font-size: 0.78rem;
    color: var(--text-dim);
}

.ohang-bar-count {
    font-size: 0.85rem;
    font-weight: 700;
}

/* ========== 대운 테이블 ========== */
.daewoon-wrap {
    overflow-x: auto;
    margin: 15px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.daewoon-table {
    border-collapse: collapse;
    white-space: nowrap;
}

.daewoon-table th,
.daewoon-table td {
    padding: 10px 14px;
    text-align: center;
    border: 1px solid rgba(108,92,231,0.1);
    font-size: 0.88rem;
}

.daewoon-table th {
    background: rgba(108,92,231,0.04);
    color: var(--gold-dim);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 1px;
}

.daewoon-table .dw-char {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(108,92,231,0.1);
}

/* ========== 용신 분석 카드 ========== */
.yongsin-card {
    border: 1px solid rgba(108,92,231,0.35);
}
.yongsin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.yongsin-daymaster {
    display: flex;
    align-items: center;
    gap: 8px;
}
.yongsin-label {
    color: var(--text-dim);
    font-size: 0.85rem;
}
.yongsin-value {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
}
.yongsin-state {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1rem;
}
.yongsin-state.state-strong {
    background: rgba(220,80,60,0.15);
    color: #ff6b6b;
    border: 1px solid rgba(220,80,60,0.3);
}
.yongsin-state.state-weak {
    background: rgba(70,130,220,0.15);
    color: #5b9bd5;
    border: 1px solid rgba(70,130,220,0.3);
}
.yongsin-state.state-neutral {
    background: rgba(108,92,231,0.15);
    color: #6c5ce7;
    border: 1px solid rgba(108,92,231,0.3);
}
.yongsin-score {
    font-size: 0.85rem;
    opacity: 0.8;
}
.yongsin-desc {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin: 0 0 16px;
}
.yongsin-elements {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}
.yongsin-el-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.yongsin-el-label {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.yongsin-el-label.yongsin-good {
    background: rgba(108,92,231,0.25);
    color: #6c5ce7;
}
.yongsin-el-label.yongsin-hee {
    background: rgba(100,180,100,0.2);
    color: #6ab46a;
}
.yongsin-el-label.yongsin-bad {
    background: rgba(180,80,80,0.2);
    color: #c06060;
}
.yongsin-evidence {
    margin-bottom: 12px;
}
.yongsin-ev-title {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}
.yongsin-evidence ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.yongsin-evidence li {
    font-size: 0.85rem;
    color: var(--text-sub);
    padding: 3px 0 3px 14px;
    position: relative;
}
.yongsin-evidence li::before {
    content: '·';
    position: absolute;
    left: 2px;
    color: var(--text-dim);
}
.yongsin-method {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 8px 0 0;
    opacity: 0.6;
}

/* 용신 활용 가이드 */
.yongsin-guide {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.yongsin-guide h4 {
    font-size: 1rem;
    color: var(--gold);
    margin: 0 0 12px;
}
.yongsin-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.yongsin-guide-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
}
.yongsin-guide-icon { font-size: 1.1rem; }
.yongsin-guide-label {
    color: var(--text-dim);
    white-space: nowrap;
}
.yongsin-guide-val {
    color: var(--text);
    font-weight: 500;
    margin-left: auto;
}
@media (max-width: 480px) {
    .yongsin-guide-grid { grid-template-columns: 1fr; }
}

/* ========== 현재 대운 요약 카드 ========== */
.current-daewoon-card {
    background: linear-gradient(135deg, rgba(108,92,231,0.12) 0%, rgba(108,92,231,0.04) 100%);
    border: 1px solid rgba(108,92,231,0.35);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.current-dw-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.current-dw-label {
    background: var(--gold);
    color: #0c0f1a;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}
.current-dw-ganji {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(108,92,231,0.3);
}
.current-dw-sipsin {
    font-size: 0.85rem;
    color: var(--text-dim);
}
.current-dw-period {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.current-dw-progress-wrap {
    width: 100%;
}
.current-dw-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.current-dw-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #00cec9);
    border-radius: 4px;
    transition: width 1s ease-out;
    box-shadow: 0 0 8px rgba(108,92,231,0.4);
}
.current-dw-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 4px;
}

/* ========== 대운 테이블 현재 대운 하이라이트 ========== */
.daewoon-table .dw-current {
    background: rgba(108,92,231,0.12) !important;
    border-bottom: 2px solid var(--gold) !important;
    position: relative;
}
.daewoon-table thead .dw-current {
    color: var(--gold) !important;
    font-weight: 700;
}

/* ========== 오행색 칩 ========== */
.oh-chip {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    line-height: 1;
}
.oh-chip.saju-char {
    font-size: 1.6rem;
    padding: 6px 8px;
    margin-bottom: 3px;
    text-shadow: none;
}
.oh-chip.dw-gan, .oh-chip.dw-ji {
    font-size: 1.1rem;
    padding: 4px 5px;
}
.ohang-목 { background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.35); }
.ohang-화 { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.35); }
.ohang-토 { background: rgba(234,179,8,0.12); color: #eab308; border-color: rgba(234,179,8,0.3); }
.ohang-금 { background: rgba(209,213,219,0.1); color: #d1d5db; border-color: rgba(209,213,219,0.4); }
.ohang-수 { background: rgba(59,130,246,0.15); color: #3b82f6; border-color: rgba(59,130,246,0.35); }

/* ========== 해설 영역 ========== */
.haesul-block {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(108,92,231,0.08);
}

.haesul-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.haesul-block h4 {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold);
    font-size: 0.95rem;
    margin-bottom: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding-left: 12px;
    border-left: 2px solid rgba(108,92,231,0.4);
}

.haesul-text {
    color: var(--text);
    line-height: 2;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-break: keep-all;
    text-indent: 0.5em;
}

/* ========== 명리 심층 해석 (interp) ========== */
.interp-master-card {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(108,92,231,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 100%, rgba(108,92,231,0.05) 0%, transparent 50%),
        linear-gradient(180deg, #0e1120 0%, #0c0f1a 40%, #0e1120 100%);
}

.interp-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(108,92,231,0.1);
}

.interp-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.interp-section-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding-left: 14px;
    border-left: 3px solid var(--gold);
    letter-spacing: 1px;
    line-height: 1.4;
}

.interp-block {
    margin-bottom: 16px;
    padding: 16px 18px;
    background: rgba(108,92,231,0.03);
    border: 1px solid rgba(108,92,231,0.08);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.interp-block:last-child {
    margin-bottom: 0;
}

.interp-block:hover {
    background: rgba(108,92,231,0.06);
}

.interp-cat-label {
    display: inline-block;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-light);
    background: rgba(108,92,231,0.1);
    border: 1px solid rgba(108,92,231,0.2);
    padding: 3px 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.interp-text {
    color: var(--text);
    line-height: 2;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-break: keep-all;
    text-indent: 0.5em;
}

@media (max-width: 768px) {
    .interp-master-card {
        padding: 20px 16px;
    }
    .interp-section {
        margin-bottom: 20px;
        padding-bottom: 18px;
    }
    .interp-section-title {
        font-size: 0.92rem;
        padding-left: 10px;
    }
    .interp-block {
        padding: 12px 14px;
        margin-bottom: 12px;
    }
    .interp-text {
        font-size: 0.85rem;
        line-height: 1.9;
    }
}

@media (max-width: 480px) {
    .interp-master-card {
        padding: 16px 12px;
    }
    .interp-section {
        margin-bottom: 16px;
        padding-bottom: 14px;
    }
    .interp-section-title {
        font-size: 0.88rem;
        padding-left: 8px;
        border-left-width: 2px;
    }
    .interp-block {
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .interp-cat-label {
        font-size: 0.8rem;
        padding: 2px 10px;
    }
    .interp-text {
        font-size: 0.82rem;
        line-height: 1.85;
        text-indent: 0;
    }
}

/* ========== 신살 / 운성 태그 ========== */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.tag {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(108,92,231,0.06);
    border: 1px solid rgba(108,92,231,0.2);
    border-radius: 12px;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    color: var(--gold-light);
    letter-spacing: 1px;
    transition: all var(--transition);
}
.tag-positive {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.3);
    color: #22c55e;
}
.tag-negative {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: #ef4444;
}

/* ========== 궁합 점수 ========== */
.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--gold-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 24px auto;
    box-shadow:
        0 0 30px rgba(108,92,231,0.12),
        inset 0 0 20px rgba(108,92,231,0.06);
    position: relative;
}

.score-circle::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(108,92,231,0.15);
}

.score-number {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 16px rgba(108,92,231,0.2);
}

.score-label {
    font-size: 0.78rem;
    color: var(--text-dim);
}

.gunghab-hero-card {
    overflow: hidden;
}

.gunghab-hero-layout {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.gunghab-score-wrap {
    display: flex;
    justify-content: center;
}

.gunghab-score-wrap .score-circle {
    margin: 0;
}

.gunghab-hero-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gunghab-hero-summary {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
}

.gunghab-core-tags {
    margin: 0;
}

.gunghab-summary-grid,
.gunghab-section-grid {
    display: grid;
    gap: 14px;
}

.gunghab-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gunghab-summary-card {
    padding: 16px 16px 14px;
    border: 1px solid rgba(108,92,231,0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(14,17,32,0.9));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 104px;
}

.gunghab-summary-card.is-positive,
.gunghab-section-card.is-positive {
    border-color: rgba(74,222,128,0.28);
    box-shadow: inset 0 0 0 1px rgba(74,222,128,0.08);
}

.gunghab-summary-card.is-caution,
.gunghab-section-card.is-caution {
    border-color: rgba(248,113,113,0.28);
    box-shadow: inset 0 0 0 1px rgba(248,113,113,0.08);
}

.gunghab-summary-label,
.gunghab-section-title {
    color: var(--gold-dim);
    font-size: 0.72rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.gunghab-summary-card strong,
.gunghab-section-headline {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold-light);
    line-height: 1.6;
}

.gunghab-note {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(108,92,231,0.14);
    background: rgba(108,92,231,0.05);
}

.gunghab-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gunghab-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(108,92,231,0.18);
    background: rgba(108,92,231,0.06);
    color: var(--gold-light);
    font-size: 0.82rem;
    line-height: 1.4;
}

.gunghab-chip.is-positive {
    border-color: rgba(74,222,128,0.3);
    background: rgba(74,222,128,0.1);
    color: #8ef0ab;
}

.gunghab-chip.is-caution {
    border-color: rgba(248,113,113,0.3);
    background: rgba(248,113,113,0.1);
    color: #ff9f9f;
}

.gunghab-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
}

.gunghab-section-card {
    min-height: 100%;
}

.gunghab-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.gunghab-section-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(108,92,231,0.18);
    background: rgba(108,92,231,0.08);
    color: var(--gold-light);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
}

.gunghab-section-headline {
    margin-bottom: 10px;
    font-size: 1rem;
}

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

.gunghab-list li {
    position: relative;
    padding-left: 16px;
    color: var(--text-dim);
    line-height: 1.75;
}

.gunghab-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(108,92,231,0.65);
    box-shadow: 0 0 10px rgba(108,92,231,0.2);
}

@media (max-width: 900px) {
    .gunghab-hero-layout,
    .gunghab-section-grid,
    .gunghab-summary-grid {
        grid-template-columns: 1fr;
    }

    .gunghab-score-wrap {
        justify-content: flex-start;
    }
}

/* ========== 토정비결 괘 (기존 호환) ========== */
.gwae-display {
    display: flex;
    gap: 28px;
    justify-content: center;
    margin: 24px 0;
}

.gwae-item { text-align: center; }

.gwae-num {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 16px rgba(108,92,231,0.2);
}

.gwae-name {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 6px;
    letter-spacing: 2px;
}

/* ========== 토정비결 확장 ========== */
.tojeong-card {
    border: 1px solid rgba(108,92,231,0.25);
    background:
        radial-gradient(circle at top, rgba(108,92,231,0.08), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    overflow: hidden;
}
.tojeong-header {
    text-align: center;
    margin-bottom: 18px;
}
.tojeong-header h3 {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold);
    font-size: 1.4rem;
}
.tojeong-name {
    color: var(--text-sub);
    font-size: 1rem;
    margin: 4px 0 0;
}
.tojeong-lunar-info {
    color: var(--text-dim);
    font-size: 0.82rem;
    margin: 4px 0 0;
    opacity: 0.7;
}
.tojeong-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.tojeong-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(108,92,231,0.2);
    background: rgba(108,92,231,0.08);
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
}
.tojeong-note-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}
.tojeong-note-card {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(108,92,231,0.2);
    background: rgba(255,255,255,0.025);
    color: var(--text-sub);
    line-height: 1.7;
}
.tojeong-note-muted {
    color: var(--text-dim);
}
.tojeong-input-note {
    grid-column: span 2;
}
.form-help-box {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(108,92,231,0.18);
    background: rgba(108,92,231,0.06);
    color: var(--text-sub);
    line-height: 1.6;
    font-size: 0.9rem;
}

.tojeong-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.tojeong-meta-card {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.025);
    min-height: 120px;
}
.tojeong-meta-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 1.4px;
    margin-bottom: 10px;
}
.tojeong-meta-card strong {
    display: block;
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    margin-bottom: 8px;
}
.tojeong-meta-card p {
    margin: 0;
    color: var(--text-sub);
    font-size: 0.86rem;
    line-height: 1.6;
}

.tojeong-gwae-area {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 20px 0 14px;
    flex-wrap: wrap;
}
.tojeong-gwae-card {
    flex: 1;
    min-width: 180px;
    max-width: 240px;
    text-align: center;
    padding: 18px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
}
.tojeong-gwae-sang {
    border-color: rgba(108,92,231,0.35);
    background: rgba(108,92,231,0.06);
}
.tojeong-gwae-symbol {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(108,92,231,0.3);
}
.tojeong-gwae-num {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--gold);
    margin-bottom: 6px;
}
.tojeong-gwae-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}
.tojeong-gwae-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.tojeong-gwae-name {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}
.tojeong-gwae-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
}
.tojeong-gwae-basis {
    font-size: 0.72rem;
    color: var(--text-dim);
    opacity: 0.7;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.tojeong-code {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-dim);
    opacity: 0.75;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.tojeong-formula {
    margin-bottom: 24px;
}
.tojeong-formula-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.tojeong-formula-card {
    padding: 18px 16px;
    border-radius: 14px;
    border: 1px solid rgba(108,92,231,0.16);
    background: rgba(255,255,255,0.03);
}
.tojeong-formula-kicker {
    display: block;
    color: var(--text-dim);
    font-size: 0.72rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.tojeong-formula-main {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.tojeong-formula-note {
    color: var(--text-sub);
    font-size: 0.84rem;
    line-height: 1.6;
    min-height: 42px;
}
.tojeong-formula-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.tojeong-formula-meta span {
    color: var(--text-dim);
    font-size: 0.75rem;
    line-height: 1.5;
}
.tojeong-formula-meta strong {
    color: var(--gold);
    font-size: 0.84rem;
    white-space: nowrap;
}
.tojeong-formula-footnote {
    margin: 14px 4px 0;
    color: var(--text-dim);
    font-size: 0.82rem;
    line-height: 1.7;
}
.tojeong-summary {
    margin-bottom: 24px;
}
.tojeong-section-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold);
    font-size: 1.1rem;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(108,92,231,0.2);
}
.tojeong-summary-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-sub);
}

.tojeong-monthly-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tojeong-toggle-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s;
    display: inline-block;
}
.tojeong-toggle-arrow.rotated {
    transform: rotate(-90deg);
}
.tojeong-monthly-grid.collapsed {
    display: none;
}
.tojeong-monthly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.tojeong-month-card {
    padding: 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
}
.tojeong-month-card.tojeong-month-current {
    border-color: rgba(108,92,231,0.45);
    background: rgba(108,92,231,0.08);
    box-shadow: 0 0 12px rgba(108,92,231,0.1);
}
.tojeong-month-num {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 6px;
}
.tojeong-month-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.65rem;
    background: rgba(108,92,231,0.25);
    color: var(--gold);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.tojeong-month-label {
    color: var(--text-sub);
    font-size: 0.82rem;
    margin-bottom: 6px;
}
.tojeong-month-meta {
    color: var(--text-dim);
    font-size: 0.75rem;
    line-height: 1.6;
    margin-bottom: 8px;
}
.tojeong-month-text {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-sub);
}
.tojeong-month-empty {
    color: var(--text-dim);
    font-style: italic;
}

@media (max-width: 768px) {
    .tojeong-input-note {
        grid-column: span 1;
    }
    .tojeong-meta-grid,
    .tojeong-formula-grid {
        grid-template-columns: 1fr;
    }
    .tojeong-gwae-area {
        flex-direction: column;
        align-items: center;
    }
    .tojeong-gwae-card {
        max-width: 100%;
        width: 100%;
    }
    .tojeong-monthly-grid {
        grid-template-columns: 1fr;
    }
    .tojeong-formula-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========== 로딩 ========== */
.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(7,8,15,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active { display: flex; }

.loading-spinner { text-align: center; }

.spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(108,92,231,0.15);
    border-top-color: #6c5ce7;
    border-right-color: #00cec9;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-spinner p {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold-dim);
    font-size: 0.88rem;
    letter-spacing: 2px;
}

/* ========== 에러 메시지 ========== */
.error-msg {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    color: #f87171;
    margin: 10px 0;
    font-size: 0.9rem;
}

/* ========== 스크롤바 ========== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(108,92,231,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(108,92,231,0.4); }

/* ========== 결과 텍스트 블록 ========== */
.result-text-block {
    background:
        linear-gradient(135deg, rgba(108,92,231,0.03) 0%, transparent 50%, rgba(108,92,231,0.02) 100%);
    border: 1px solid rgba(108,92,231,0.1);
    border-radius: 12px;
    padding: 24px 22px;
    margin: 16px 0;
    line-height: 2;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-break: keep-all;
    position: relative;
}

.result-text-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold-dim) 0%, transparent 100%);
    border-radius: 12px;
}

/* ========== 공망 ========== */
.gongmang-display {
    display: flex;
    gap: 12px;
    margin: 12px 0;
}

.gongmang-char {
    padding: 10px 20px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 12px;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #f87171;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(239,68,68,0.15);
}

/* ========== 택일 결과 ========== */
.taekil-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 10px 0;
}

.taekil-item {
    padding: 14px;
    background: rgba(108,92,231,0.02);
    border: 1px solid rgba(108,92,231,0.1);
    border-radius: 12px;
    text-align: center;
}

.taekil-item.good {
    border-color: rgba(34,197,94,0.25);
    background: rgba(34,197,94,0.04);
}

.taekil-item.bad {
    border-color: rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.04);
}

.taekil-item .label {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.taekil-item .value {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    margin-top: 6px;
    font-weight: 700;
}


/* ========== 하단 네비게이션 (모바일) ========== */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(12, 15, 26, 0.85);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border-top: 1px solid var(--border);
    z-index: 150;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 4px;
    min-width: 56px;
    min-height: 48px;
    border-radius: 0;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    letter-spacing: 1px;
}

.bottom-nav-item::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, #6c5ce7, #00cec9);
    border-radius: 12px;
    transition: transform var(--transition);
}

.bottom-nav-item.active {
    color: #ffffff;
}

.bottom-nav-item.active::before {
    transform: translateX(-50%) scaleX(1);
}

.bottom-nav-icon {
    width: 23px;
    height: 23px;
    flex-shrink: 0;
    stroke-width: 2.2;
}

img.bottom-nav-icon {
    object-fit: contain;
    border-radius: 4px;
}

.bottom-nav-item:active {
    transform: scale(0.92);
}

.bottom-nav-item span {
    letter-spacing: -0.02em;
    font-weight: 400;
}

.bottom-nav-item.active span {
    font-weight: 500;
}

/* ==========================================================
   반응형: 태블릿 (769px ~ 1024px)
   ========================================================== */
@media (max-width: 1024px) {
    .main-content {
        padding: 36px 32px;
    }
    .home-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ==========================================================
   반응형: 모바일 (768px 이하)
   ========================================================== */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 280px;
    }

    .service-intro {
        padding: 18px 20px;
        margin-bottom: 18px;
    }
    .service-intro h3 { font-size: 0.95rem; }
    .service-intro p, .service-intro ul li { font-size: 0.85rem; }

    .home-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .home-menu-item {
        padding: 20px 10px 16px;
        min-height: 90px;
    }
    .home-menu-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 8px;
    }
    .home-menu-label {
        font-size: 0.8rem;
    }
    .home-category {
        margin-bottom: 24px;
    }
    .home-category-title {
        font-size: 0.88rem;
    }

    /* 모바일 헤더 표시 */
    .mobile-header {
        display: flex;
    }

    .menu-toggle {
        display: flex;
    }

    /* 사이드바 드로어 */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        width: var(--sidebar-width);
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    /* 하단 네비게이션 표시 */
    .bottom-nav {
        display: flex;
    }

    /* 메인 콘텐츠 */
    .main-content {
        margin-left: 0;
        padding: 20px 16px;
        padding-top: calc(var(--header-height) + 16px + env(safe-area-inset-top, 0));
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
        max-width: 100%;
    }

    /* 페이지 헤더 */
    .page-header {
        margin-bottom: 20px;
    }

    .page-header h1 {
        font-size: 1.35rem;
    }

    .page-header .hanja {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        font-size: 0.82rem;
    }

    /* 카드 */
    .card {
        padding: 20px 16px;
        border-radius: var(--radius-sm);
    }

    .result-card {
        padding: 22px 16px;
        border-radius: 12px;
    }

    /* 폼 그리드: 2열 */
    .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    /* 이름 필드는 full width */
    .form-group:has(input[name="name"]),
    .form-group:has(input[name="name1"]),
    .form-group:has(input[name="name2"]),
    .form-group:has(input[name="lastName"]),
    .form-group.form-submit {
        grid-column: 1 / -1;
    }

    /* 성별 라디오 full width */
    .form-group:has(.radio-group) {
        grid-column: 1 / -1;
    }

    .radio-group {
        gap: 8px;
    }

    .radio-label {
        padding: 10px 16px;
    }

    /* 버튼 터치 최적화 */
    .btn-primary {
        padding: 14px 24px;
        font-size: 1rem;
        min-height: 52px;
    }

    /* 사주 테이블 */
    .saju-char {
        font-size: 1.25rem;
    }

    .saju-table th,
    .saju-table td {
        padding: 10px 6px;
        font-size: 0.85rem;
    }

    .saju-table .label-cell {
        font-size: 0.72rem;
        width: 48px;
    }

    /* 택일 그리드 */
    .taekil-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* 결과 텍스트 */
    .result-text-block {
        padding: 16px;
        font-size: 0.88rem;
    }

    .haesul-text {
        font-size: 0.88rem;
        line-height: 1.8;
    }

    /* 궁합 폼 */
    .person-divider {
        padding: 4px 0;
        font-size: 1.3rem;
    }

    .form-dual .person-block h3 {
        font-size: 0.9rem;
    }

    /* 대운 테이블 */
    .daewoon-table th,
    .daewoon-table td {
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .daewoon-table .dw-char {
        font-size: 1rem;
    }

    /* 오행 차트 */
    .ohang-chart {
        height: 100px;
    }

    /* 궁합 점수 */
    .score-circle {
        width: 100px;
        height: 100px;
    }

    .score-number {
        font-size: 2rem;
    }
}


/* ==========================================================
   반응형: 소형 모바일 (480px 이하)
   ========================================================== */
@media (max-width: 480px) {
    .main-content {
        padding: 14px 12px;
        padding-top: calc(var(--header-height) + 12px + env(safe-area-inset-top, 0));
    }

    .service-intro {
        padding: 14px 16px;
        margin-bottom: 14px;
    }
    .service-intro h3 { font-size: 0.9rem; }
    .service-intro p, .service-intro ul li { font-size: 0.82rem; }
    .service-intro ul { margin-left: 16px; }

    .home-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .home-menu-item {
        padding: 16px 8px 14px;
        min-height: 80px;
    }
    .home-menu-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 6px;
    }
    .home-menu-label {
        font-size: 0.75rem;
    }

    .page-header h1 {
        font-size: 1.2rem;
    }

    /* 폼 1열 */
    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        padding: 16px 14px;
    }

    .result-card {
        padding: 16px 14px;
    }

    .saju-char {
        font-size: 1.1rem;
    }

    .saju-table th,
    .saju-table td {
        padding: 8px 4px;
        font-size: 0.8rem;
    }

    .ohang-chart {
        height: 80px;
        gap: 8px;
    }

    .taekil-grid {
        grid-template-columns: 1fr;
    }

    .gwae-display {
        gap: 16px;
    }

    .gwae-num {
        font-size: 1.6rem;
    }
}


/* ==========================================================
   반응형: 대형 데스크탑 (1400px+)
   ========================================================== */
@media (min-width: 1400px) {
    .main-content {
        padding: 48px 64px;
    }
}

/* ========== 접근성 & 유틸리티 ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* 포커스 표시 (키보드 접근성) */
:focus-visible {
    outline: 2px solid rgba(108,92,231,0.6);
    outline-offset: 2px;
}

/* 터치 기기에서 포커스 표시 제거 */
@media (hover: none) {
    :focus:not(:focus-visible) {
        outline: none;
    }
}

/* ========== 타로 카드 ========== */
.tarot-cards-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0;
}

.tarot-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 160px;
    animation: tarotReveal 0.6s ease both;
}

.tarot-card-wrap:nth-child(2) { animation-delay: 0.15s; }
.tarot-card-wrap:nth-child(3) { animation-delay: 0.3s; }
.tarot-card-wrap:nth-child(4) { animation-delay: 0.45s; }
.tarot-card-wrap:nth-child(5) { animation-delay: 0.6s; }

@keyframes tarotReveal {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tarot-position-label {
    font-size: 0.78rem;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
}

.tarot-card-inner {
    width: 140px;
    height: 240px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--gold-dim);
    box-shadow: 0 4px 20px rgba(108,92,231,0.15);
    transition: all var(--transition);
    position: relative;
}

.tarot-card-inner:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 24px rgba(108,92,231,0.35);
    transform: translateY(-4px);
}

.tarot-card-reversed {
    border-color: var(--accent-red);
}

.tarot-card-reversed .tarot-card-img {
    transform: rotate(180deg);
}

.tarot-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========== 타로 3D 카드 뒤집기 ========== */
.tarot-flip-card {
    width: 140px;
    height: 240px;
    perspective: 1000px;
    cursor: pointer;
}

.tarot-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
}

.tarot-flip-card.flipped .tarot-flip-inner {
    transform: rotateY(0deg);
}

.tarot-flip-front,
.tarot-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--gold-dim);
    box-shadow: 0 4px 20px rgba(108,92,231,0.15);
}

.tarot-flip-front {
    transform: rotateY(0deg);
}

.tarot-flip-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tarot-flip-back {
    transform: rotateY(180deg);
    background: linear-gradient(145deg, #0e1120 0%, #0c0f1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--gold);
}

.tarot-flip-back::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    opacity: 0.6;
}

.tarot-flip-back::after {
    content: '\2726';
    font-size: 3rem;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(108,92,231,0.4);
    animation: tarotGlow 2s ease-in-out infinite alternate;
}

@keyframes tarotGlow {
    from { text-shadow: 0 0 10px rgba(108,92,231,0.3); opacity: 0.7; }
    to { text-shadow: 0 0 30px rgba(108,92,231,0.7); opacity: 1; }
}

.tarot-flip-card.flipped .tarot-flip-front {
    border-color: var(--gold);
    box-shadow: 0 8px 32px rgba(108,92,231,0.25);
}

.tarot-flip-card.flipped:hover .tarot-flip-inner {
    transform: rotateY(0deg) translateY(-6px);
    filter: drop-shadow(0 12px 24px rgba(108,92,231,0.3));
}

.tarot-flip-card.tarot-card-reversed .tarot-flip-front img {
    transform: rotate(180deg);
}

.tarot-flip-card.tarot-card-reversed .tarot-flip-front {
    border-color: var(--accent-red);
}

/* 카드별 뒤집기 딜레이 */
.tarot-card-wrap:nth-child(1) .tarot-flip-card { --flip-delay: 0.3s; }
.tarot-card-wrap:nth-child(2) .tarot-flip-card { --flip-delay: 0.6s; }
.tarot-card-wrap:nth-child(3) .tarot-flip-card { --flip-delay: 0.9s; }
.tarot-card-wrap:nth-child(4) .tarot-flip-card { --flip-delay: 1.2s; }
.tarot-card-wrap:nth-child(5) .tarot-flip-card { --flip-delay: 1.5s; }

/* 구형 브라우저 대응 */
@supports not (transform-style: preserve-3d) {
    .tarot-flip-inner { transform: none !important; }
    .tarot-flip-back { display: none; }
    .tarot-flip-front { transform: none; position: static; }
}

/* 모바일 반응형 */
@media (max-width: 480px) {
    .tarot-flip-card {
        width: 100px;
        height: 172px;
    }
    .tarot-flip-back::after {
        font-size: 2rem;
    }
}

.tarot-card-name {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 700;
    text-align: center;
}

.tarot-card-dir {
    font-size: 0.75rem;
    padding: 3px 12px;
    border-radius: 12px;
    font-weight: 600;
}

.tarot-dir-upright {
    color: #4ade80;
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.4);
}

.tarot-dir-reversed {
    color: #f87171;
    background: rgba(248,113,113,0.15);
    border: 1px solid rgba(248,113,113,0.4);
}

.tarot-focus-reading {
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(138,79,255,0.08), rgba(108,92,231,0.08));
    border-left: 3px solid var(--accent, #8a4fff);
    border-radius: 0 10px 10px 0;
}

.tarot-focus-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent, #8a4fff);
    margin-bottom: 6px;
    letter-spacing: 0.03em;
}

.tarot-focus-reading .haesul-text {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.8;
}

.tarot-detail-block {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.tarot-detail-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.tarot-detail-block h4 {
    color: var(--gold);
    font-size: 0.95rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.tarot-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

/* ========== 타로 카드 선택 UI ========== */
.tarot-pick-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 12px 0 20px;
}

.tarot-pick-badge {
    background: var(--gold);
    color: #0a0a12;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.tarot-pick-position {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.tarot-pick-position strong {
    color: var(--gold-light);
}

/* 선택 슬롯 */
.tarot-selected-slots {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 24px;
}

.tarot-slot {
    text-align: center;
}

.tarot-slot-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.tarot-slot-card {
    width: 50px;
    height: 72px;
    border: 2px dashed var(--border-light);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: all var(--transition);
}

.tarot-slot-filled .tarot-slot-card {
    border-color: var(--gold);
    border-style: solid;
    background: rgba(108,92,231,0.1);
    color: var(--gold);
}

/* 셔플된 카드 덱 그리드 */
.tarot-deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
}

.tarot-deck-card {
    aspect-ratio: 2/3;
    cursor: pointer;
    perspective: 600px;
    transition: transform 0.2s ease;
}

.tarot-deck-card:hover:not(.tarot-deck-card-selected) {
    transform: translateY(-4px);
}

.tarot-deck-card:active:not(.tarot-deck-card-selected) {
    transform: scale(0.95);
}

.tarot-deck-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.tarot-deck-card-back {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #141825 0%, #1e2235 30%, #141825 50%, #1e2235 70%, #141825 100%);
    border: 1.5px solid var(--gold-dim);
    border-radius: 6px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.tarot-deck-card-back::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: 4px;
}

.tarot-deck-card-back::after {
    content: '★';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    color: rgba(108,92,231,0.4);
}

.tarot-deck-card-selected {
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s ease;
}

/* 모바일 타로 카드 반응형 */
@media (max-width: 768px) {
    .tarot-card-inner {
        width: 110px;
        height: 190px;
    }

    .tarot-flip-card {
        width: 110px;
        height: 190px;
    }

    .tarot-cards-container {
        gap: 12px;
    }

    .tarot-card-name {
        font-size: 0.8rem;
    }

    .tarot-deck-grid {
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
        gap: 5px;
    }

    .tarot-selected-slots {
        gap: 10px;
    }

    .tarot-slot-card {
        width: 42px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .tarot-card-inner {
        width: 90px;
        height: 155px;
        border-radius: 8px;
    }

    .tarot-flip-card {
        width: 90px;
        height: 155px;
    }

    .tarot-flip-back::after {
        font-size: 1.8rem;
    }

    .tarot-cards-container {
        gap: 8px;
    }

    .tarot-card-name {
        font-size: 0.75rem;
    }

    .tarot-position-label {
        font-size: 0.7rem;
    }

    .tarot-deck-grid {
        grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
        gap: 4px;
    }

    .tarot-slot-card {
        width: 36px;
        height: 52px;
        font-size: 1rem;
    }

    .tarot-deck-card-back::after {
        font-size: 0.75rem;
    }
}

/* ========== 타로 확장 스타일 ========== */

/* 스프레드 정보 헤더 */
.tarot-spread-info {
    text-align: center;
    border-bottom: 2px solid var(--gold-dim);
}
.tarot-spread-info h3 .hanja {
    font-size: 0.8em;
    color: var(--text-dim);
}
.tarot-spread-desc {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-top: 8px;
}

/* 스프레드 위치 가이드 */
.tarot-positions-guide {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    text-align: left;
}
.tarot-pos-item {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.85rem;
    line-height: 1.4;
}
.tarot-pos-label {
    color: var(--gold);
    font-weight: 600;
    white-space: nowrap;
    min-width: 50px;
}
.tarot-pos-label::after {
    content: ':';
}
.tarot-pos-desc {
    color: var(--text-dim);
}

/* 위치별 해석 블록 */
.tarot-position-reading {
    background: rgba(108, 92, 231, 0.06);
    border-left: 3px solid var(--gold-dim);
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tarot-position-reading .tarot-focus-label {
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 6px;
}

/* 카드 조합 블록 */
.tarot-combination-block {
    margin-bottom: 18px;
    padding: 16px;
    background: rgba(108, 92, 231, 0.04);
    border: 1px solid rgba(108, 92, 231, 0.15);
    border-radius: var(--radius-sm);
}
.tarot-combination-block:last-child {
    margin-bottom: 0;
}
.tarot-combination-block h4 {
    color: var(--gold-light);
    font-size: 0.95rem;
    margin-bottom: 8px;
    font-weight: 500;
}
.tarot-combo-advice {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(108, 92, 231, 0.1);
    color: var(--text-dim);
    font-size: 0.9rem;
}
.tarot-combo-advice strong {
    color: var(--gold);
}

/* 켈틱 크로스 10장 레이아웃 */
.tarot-celtic-cross {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 16px;
    justify-items: center;
    max-width: 600px;
    margin: 0 auto;
}
/* 현재 (0) - 중앙 */
.tarot-celtic-pos-0 { grid-column: 2; grid-row: 2; }
/* 장애물 (1) - 현재 위 가로 */
.tarot-celtic-pos-1 { grid-column: 2; grid-row: 1; }
/* 과거 (2) - 왼쪽 */
.tarot-celtic-pos-2 { grid-column: 1; grid-row: 2; }
/* 미래 (3) - 오른쪽 */
.tarot-celtic-pos-3 { grid-column: 3; grid-row: 2; }
/* 자아 (4) - 아래 */
.tarot-celtic-pos-4 { grid-column: 2; grid-row: 3; }
/* 환경 (5) - 오른쪽 열 위 */
.tarot-celtic-pos-5 { grid-column: 4; grid-row: 1; }
/* 희망과 두려움 (6) - 오른쪽 열 2 */
.tarot-celtic-pos-6 { grid-column: 4; grid-row: 2; }
/* 외부 조언 (7) - 오른쪽 열 3 */
.tarot-celtic-pos-7 { grid-column: 4; grid-row: 3; }
/* 숨겨진 영향 (8) - 왼쪽 위 */
.tarot-celtic-pos-8 { grid-column: 1; grid-row: 1; }
/* 최종 결과 (9) - 왼쪽 아래 */
.tarot-celtic-pos-9 { grid-column: 1; grid-row: 3; }

@media (max-width: 768px) {
    .tarot-celtic-cross {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        max-width: 100%;
    }
    .tarot-combination-block {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .tarot-celtic-cross {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    /* 모바일에서는 3열로 재배치 */
    .tarot-celtic-pos-0 { grid-column: 2; grid-row: 2; }
    .tarot-celtic-pos-1 { grid-column: 2; grid-row: 1; }
    .tarot-celtic-pos-2 { grid-column: 1; grid-row: 2; }
    .tarot-celtic-pos-3 { grid-column: 3; grid-row: 2; }
    .tarot-celtic-pos-4 { grid-column: 2; grid-row: 3; }
    .tarot-celtic-pos-5 { grid-column: 1; grid-row: 4; }
    .tarot-celtic-pos-6 { grid-column: 2; grid-row: 4; }
    .tarot-celtic-pos-7 { grid-column: 3; grid-row: 4; }
    .tarot-celtic-pos-8 { grid-column: 1; grid-row: 1; }
    .tarot-celtic-pos-9 { grid-column: 3; grid-row: 3; }
}

/* 성명학 안내문 */
.form-grid > p[style] {
    grid-column: 1 / -1;
}

/* ========== 개인정보 안심 메시지 ========== */
.privacy-notice {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--radius-sm);
    color: #4ade80;
    font-size: 0.82rem;
    line-height: 1.5;
}
.privacy-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
}

/* ========== 정책 페이지 ========== */
.policy-content h3 {
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    margin: 28px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.policy-content h3:first-child {
    margin-top: 0;
}
.policy-content p {
    color: var(--text);
    line-height: 1.8;
    margin: 8px 0;
    font-size: 0.92rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.policy-content ul {
    margin: 8px 0 8px 20px;
    padding: 0;
}
.policy-content ul li {
    color: var(--text);
    line-height: 1.8;
    margin: 4px 0;
    font-size: 0.92rem;
    word-break: keep-all;
}
.policy-content a {
    color: var(--gold-light);
    text-decoration: underline;
}
.policy-content a:hover {
    color: var(--gold);
}
.policy-date {
    color: var(--text-dim) !important;
    font-size: 0.82rem !important;
    margin-bottom: 16px !important;
}
.contact-info {
    background: rgba(108, 92, 231, 0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin: 12px 0;
}
.contact-info p {
    margin: 6px 0;
}

/* 모바일 푸터 (사이드바 없을 때 메인 하단에 표시) */
.main-footer {
    display: none;
    padding: 24px 16px;
    text-align: center;
    border-top: 1px solid var(--border);
    margin-top: 40px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.main-footer .footer-links {
    margin-bottom: 10px;
}

/* 정책 페이지 & 푸터 모바일 반응형 */
@media (max-width: 768px) {
    .policy-content h3 {
        font-size: 0.95rem;
        margin: 20px 0 8px;
    }
    .policy-content p,
    .policy-content ul li {
        font-size: 0.88rem;
        line-height: 1.75;
    }
    .contact-info {
        padding: 16px;
    }
    .footer-links {
        gap: 6px 12px;
    }
    .footer-links a {
        font-size: 0.72rem;
    }
    .main-footer {
        display: block;
        margin-top: 24px;
        padding: 20px 12px;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .policy-content h3 {
        font-size: 0.9rem;
        margin: 16px 0 6px;
    }
    .policy-content p,
    .policy-content ul li {
        font-size: 0.84rem;
    }
    .policy-content ul {
        margin-left: 16px;
    }
    .contact-info {
        padding: 14px 12px;
    }
    .footer-links {
        flex-direction: column;
        gap: 8px;
    }
    .footer-links a {
        font-size: 0.75rem;
    }
}

/* ========== 오늘의 띠운세 ========== */
.ddi-today-date {
    text-align: center;
    font-size: 1.15rem;
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin-bottom: 24px;
    letter-spacing: 2px;
}

.ddi-today-loading {
    text-align: center;
    padding: 60px 20px;
}

.ddi-today-loading .loading-sub {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-top: 8px;
}

.ddi-today-error {
    text-align: center;
    padding: 40px 20px;
}

.ddi-today-error p {
    color: var(--text);
    margin-bottom: 8px;
}

.ddi-today-error .btn {
    margin-top: 16px;
}

/* 12띠 그리드 */
.ddi-today-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.ddi-animal-card {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(108,92,231,0.05) 0%, transparent 60%),
        linear-gradient(180deg, #0e1120 0%, #0e1120 100%);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.ddi-animal-card:hover {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(108,92,231,0.1) 0%, transparent 60%),
        linear-gradient(180deg, #161510 0%, #12100c 100%);
    border-color: rgba(108,92,231,0.3);
    box-shadow: 0 4px 20px rgba(108,92,231,0.08);
    transform: translateY(-2px);
}

.ddi-animal-card:active {
    transform: translateY(0);
}

.ddi-card-image {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ddi-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.ddi-card-name {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.ddi-card-score {
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 6px;
}

.ddi-card-score.score-great { color: #f59e0b; text-shadow: 0 0 12px rgba(245,158,11,0.4); }
.ddi-card-score.score-good { color: #22c55e; }
.ddi-card-score.score-mid { color: var(--text-dim); }
.ddi-card-score.score-low { color: var(--accent-red); }

.ddi-card-summary {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 상세 운세 */
.ddi-today-detail {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(108,92,231,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(108,92,231,0.04) 0%, transparent 50%),
        linear-gradient(180deg, #0e1120 0%, #0c0f1a 40%, #0e1120 100%);
    border: 1px solid rgba(108,92,231,0.18);
    border-radius: 12px;
    padding: 28px 24px;
    margin-top: 8px;
    position: relative;
    box-shadow:
        inset 0 0 60px rgba(108,92,231,0.03),
        0 2px 20px rgba(0,0,0,0.4);
}
.ddi-today-detail::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(108,92,231,0.1);
    border-radius: 10px;
    pointer-events: none;
}
.ddi-today-detail::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 0.55rem;
    color: rgba(108,92,231,0.35);
    background: #0e1120;
    padding: 0 8px;
}

.ddi-detail-back {
    background: none;
    border: 1px solid var(--border-light);
    color: var(--text-dim);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    margin-bottom: 20px;
    transition: var(--transition);
}

.ddi-detail-back:hover {
    border-color: var(--gold-dim);
    color: var(--gold);
}

.ddi-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(108,92,231,0.15);
}

.ddi-detail-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ddi-detail-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.ddi-detail-meta {
    flex: 1;
}

.ddi-detail-name {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.3rem;
    color: var(--gold);
    margin-bottom: 4px;
}

.ddi-detail-years {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.ddi-detail-score-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.ddi-detail-score {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
}

.ddi-detail-score span {
    font-size: 1rem;
    font-weight: 400;
}

.ddi-detail-score.score-great { color: #f59e0b; text-shadow: 0 0 20px rgba(245,158,11,0.3); }
.ddi-detail-score.score-good { color: #22c55e; }
.ddi-detail-score.score-mid { color: var(--text-dim); }
.ddi-detail-score.score-low { color: var(--accent-red); }

.ddi-detail-score-label {
    font-size: 0.9rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
}

.ddi-detail-score-label.score-great { background: rgba(245,158,11,0.15); color: #f59e0b; }
.ddi-detail-score-label.score-good { background: rgba(34,197,94,0.15); color: #22c55e; }
.ddi-detail-score-label.score-mid { background: rgba(168,158,142,0.1); color: var(--text-dim); }
.ddi-detail-score-label.score-low { background: rgba(196,90,74,0.15); color: var(--accent-red); }

.ddi-detail-summary {
    font-size: 0.95rem;
    color: var(--text);
    font-style: italic;
    line-height: 1.5;
}

/* 카테고리 운세 */
/* 년도별 운세 */
.ddi-year-fortunes {
    background: rgba(108,92,231,0.04);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-left: 3px solid rgba(108,92,231,0.3);
}

.ddi-year-fortunes-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 12px;
}

.ddi-year-fortune-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ddi-year-fortune-row:last-child {
    border-bottom: none;
}

.ddi-year-label {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-light);
    min-width: 75px;
}

.ddi-year-text {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.5;
}

.ddi-detail-cats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.ddi-cat-item {
    background: rgba(108,92,231,0.03);
    border: 1px solid rgba(108,92,231,0.12);
    border-radius: 12px;
    padding: 16px 18px;
    position: relative;
    border-left: 3px solid rgba(108,92,231,0.25);
}

.ddi-cat-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ddi-cat-icon {
    font-size: 1.1rem;
}

.ddi-cat-text {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.7;
}

/* 행운 태그 */
.ddi-detail-footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ddi-lucky-tag {
    display: inline-block;
    background: rgba(108,92,231,0.08);
    border: 1px solid var(--gold-dim);
    color: var(--gold-light);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
}

/* 오늘의 조언 */
.ddi-detail-advice {
    background: linear-gradient(135deg, rgba(108,92,231,0.06), rgba(108,92,231,0.02));
    border: 1px solid rgba(108,92,231,0.2);
    border-radius: 12px;
    padding: 16px 20px;
    border-left: 3px solid rgba(108,92,231,0.35);
}

.ddi-advice-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
}

.ddi-advice-text {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.7;
}

/* 공유하기 */
.ddi-share-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.ddi-share-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 12px;
    text-align: center;
}

.ddi-share-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ddi-share-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ddi-share-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.ddi-share-btn:active {
    transform: scale(0.95);
}

.ddi-share-kakao {
    background: #FEE500;
}

.ddi-share-facebook {
    background: #1877F2;
}

.ddi-share-twitter {
    background: #000;
    border: 1px solid rgba(255,255,255,0.2);
}

.ddi-share-band {
    background: #06CF5E;
}

.ddi-share-copy {
    background: #555;
}

.ddi-share-native {
    background: rgba(108,92,231,0.4);
    border: 1px solid var(--gold-dim);
}

.ddi-share-download {
    background: #8B5CF6;
}

.ddi-overview-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.ddi-overview-actions .ddi-share-title {
    text-align: center;
    margin-bottom: 12px;
}

/* 뷰 토글 버튼 */
.ddi-view-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
}

.ddi-toggle-btn {
    padding: 10px 24px;
    border: 1px solid var(--gold-dim);
    background: transparent;
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ddi-toggle-btn:first-child {
    border-radius: 8px 0 0 8px;
}

.ddi-toggle-btn:last-child {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

.ddi-toggle-btn.active {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}

.ddi-toggle-btn:hover:not(.active) {
    background: rgba(108,92,231,0.1);
    color: var(--gold-light);
}

/* 종합보기 */
.ddi-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.ddi-overview-card {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(108,92,231,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(108,92,231,0.04) 0%, transparent 50%),
        linear-gradient(180deg, #0e1120 0%, #0c0f1a 40%, #0e1120 100%);
    border: 1px solid rgba(108,92,231,0.18);
    border-radius: 12px;
    padding: 20px 18px;
    position: relative;
    box-shadow:
        inset 0 0 40px rgba(108,92,231,0.03),
        0 2px 16px rgba(0,0,0,0.4);
}
.ddi-overview-card::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(108,92,231,0.08);
    border-radius: 10px;
    pointer-events: none;
}

.ddi-overview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(108,92,231,0.15);
}

.ddi-overview-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.ddi-overview-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ddi-overview-name {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-light);
}

.ddi-overview-score {
    font-size: 0.9rem;
    font-weight: 700;
}

.ddi-overview-years {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ddi-overview-year-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.6;
}

.ddi-overview-year-label {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold-light);
    min-width: 38px;
}

.ddi-overview-year-text {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .ddi-overview-grid {
        grid-template-columns: 1fr;
    }
    .ddi-toggle-btn {
        padding: 8px 18px;
        font-size: 0.85rem;
    }
}

/* 복사 토스트 */
.ddi-copy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(108,92,231,0.95);
    color: #000;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.ddi-copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 오늘의 띠운세 반응형 */
@media (max-width: 1024px) {
    .ddi-today-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ddi-today-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .ddi-card-image {
        width: 60px;
        height: 60px;
    }
    .ddi-card-score {
        font-size: 1.1rem;
    }
    .ddi-detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ddi-detail-image {
        width: 100px;
        height: 100px;
    }
    .ddi-detail-score-wrap {
        justify-content: center;
    }
    .ddi-today-detail {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .ddi-today-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .ddi-animal-card {
        padding: 12px 8px;
    }
    .ddi-card-image {
        width: 50px;
        height: 50px;
    }
    .ddi-card-name {
        font-size: 0.9rem;
    }
    .ddi-card-score {
        font-size: 1rem;
    }
    .ddi-card-summary {
        font-size: 0.75rem;
    }
    .ddi-detail-score {
        font-size: 1.8rem;
    }
    .ddi-detail-name {
        font-size: 1.1rem;
    }
    .ddi-detail-footer {
        flex-direction: column;
        gap: 8px;
    }
}

/* ========== 관상 (Gwansang) ========== */
.gwansang-upload-card {
    padding: 0;
}
.gwansang-dropzone {
    border: 2px dashed rgba(108, 92, 231, 0.4);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(108, 92, 231, 0.03);
}
.gwansang-dropzone.dragover {
    border-color: var(--gold);
    background: rgba(108, 92, 231, 0.08);
    transform: scale(1.01);
}
.gwansang-dropzone-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.gwansang-dropzone-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.gwansang-upload-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.gwansang-upload-btn,
.gwansang-camera-btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 2px;
    min-height: 48px;
}
.gwansang-upload-btn {
    background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%);
    background-size: 200% 200%;
    color: #0c0f1a;
}
.gwansang-upload-btn:hover {
    background-position: 100% 50%;
    box-shadow: 0 6px 24px rgba(108,92,231,0.35);
    transform: translateY(-1px);
}
.gwansang-camera-btn {
    background: rgba(108, 92, 231, 0.10);
    color: var(--gold);
    border: 1px solid rgba(108, 92, 231, 0.3);
}
.gwansang-camera-btn:hover {
    background: rgba(108, 92, 231, 0.20);
    transform: translateY(-1px);
}
.gwansang-dropzone-notice {
    margin-top: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* 미리보기 */
.gwansang-preview {
    text-align: center;
    margin-top: 20px;
}
.gwansang-preview-wrapper {
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(108, 92, 231, 0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.gwansang-preview-wrapper canvas {
    display: block;
    max-width: 100%;
}
.gwansang-preview-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    justify-content: center;
}
.gwansang-analyze-btn {
    padding: 13px 32px;
    background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%);
    background-size: 200% 200%;
    color: #0c0f1a;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.3px;
    transition: all 0.3s;
    min-height: 48px;
}
.gwansang-analyze-btn:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(108,92,231,0.35);
}
.gwansang-reset-btn {
    padding: 14px 24px;
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s;
}
.gwansang-reset-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary);
}

/* 로딩 */
.gwansang-loading {
    text-align: center;
    padding: 60px 20px;
}

/* 결과 */
.gwansang-result {
    margin-top: 24px;
}
.gwansang-overall {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(108, 92, 231, 0.05));
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 16px;
    padding: 30px 24px;
    text-align: center;
    margin-bottom: 24px;
}
.gwansang-overall-grade {
    font-size: 1.2rem;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.gwansang-overall-score {
    font-size: 3rem;
    font-weight: 900;
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gwansang-overall-score span {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.7;
}
.gwansang-overall-desc {
    margin-top: 16px;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* 부위별 카드 */
.gwansang-parts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.gwansang-part-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
}
.gwansang-part-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.gwansang-part-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 92, 231, 0.1);
    border-radius: 10px;
    flex-shrink: 0;
}
.gwansang-part-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gwansang-part-title strong {
    font-size: 0.95rem;
    color: var(--text-primary);
}
.gwansang-part-shape {
    font-size: 0.82rem;
    color: var(--gold);
}
.gwansang-part-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}
.gwansang-part-bar {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}
.gwansang-part-bar-fill {
    height: 100%;
    border-radius: 3px;
    width: 0;
    transition: width 0.8s ease;
}
.gwansang-part-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* 하단 버튼 */
/* 공유 결과 배너 */
.shared-result-banner {
    background: linear-gradient(135deg, #141825, #1a1f30);
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    color: #a29bfe;
    margin-bottom: 16px;
}
.shared-result-banner a {
    color: #6c5ce7;
    text-decoration: underline;
    font-weight: 600;
}

.gwansang-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.gwansang-share-btn,
.gwansang-download-btn,
.gwansang-retry-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.3s;
}
.gwansang-share-btn {
    background: var(--gold);
    color: #000;
}
.gwansang-share-btn:hover {
    background: #a29bfe;
}
.gwansang-download-btn {
    background: #8B5CF6;
    color: #fff;
}
.gwansang-download-btn:hover {
    background: #7c3aed;
}
.gwansang-retry-btn {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.15);
}
.gwansang-retry-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary);
}

/* 면책고지 */
.gwansang-disclaimer {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: 8px;
}
.gwansang-disclaimer p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* 관상 반응형 */
@media (max-width: 600px) {
    .gwansang-dropzone {
        padding: 30px 16px;
    }
    .gwansang-dropzone-icon {
        font-size: 2.5rem;
    }
    .gwansang-upload-buttons {
        flex-direction: column;
        align-items: center;
    }
    .gwansang-upload-btn,
    .gwansang-camera-btn {
        width: 80%;
        text-align: center;
    }
    .gwansang-overall-score {
        font-size: 2.5rem;
    }
    .gwansang-part-header {
        flex-wrap: wrap;
    }
    .gwansang-preview-actions {
        flex-direction: column;
        align-items: center;
    }
    .gwansang-analyze-btn,
    .gwansang-reset-btn {
        width: 80%;
    }
    .gwansang-actions {
        flex-direction: column;
        align-items: center;
    }
    .gwansang-share-btn,
    .gwansang-download-btn,
    .gwansang-retry-btn {
        width: 80%;
        text-align: center;
    }
    .gwansang-highlights {
        grid-template-columns: 1fr !important;
    }
    .gwansang-adj-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 사진 신뢰도 */
.gwansang-confidence {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}
.gwansang-confidence-trusted {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #66bb6a;
}
.gwansang-confidence-usable {
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.3);
    color: #6c5ce7;
}
.gwansang-confidence-reference {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    color: #ffa726;
}
.gwansang-confidence-blocked {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #ef5350;
}
.gwansang-confidence-score {
    font-weight: 700;
    font-size: 15px;
}
.gwansang-confidence-label {
    font-size: 0.9em;
    opacity: 0.9;
}

/* 분석 차단 */
.gwansang-blocked {
    text-align: center;
    padding: 40px 20px;
    color: #ccc;
}
.gwansang-blocked-icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.gwansang-blocked p {
    font-size: 16px;
    margin-bottom: 8px;
}
.gwansang-blocked-tips {
    font-size: 13px;
    color: #999;
}

/* 강점 / 주의 */
.gwansang-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.gwansang-strengths,
.gwansang-cautions {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}
.gwansang-strengths h4,
.gwansang-cautions h4 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #e8eaf6;
}
.gwansang-strengths ul,
.gwansang-cautions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gwansang-strengths li,
.gwansang-cautions li {
    font-size: 13px;
    color: #bbb;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.gwansang-strengths li:last-child,
.gwansang-cautions li:last-child {
    border-bottom: none;
}

/* 수동 보정 */
.gwansang-manual-adj {
    background: rgba(108, 92, 231, 0.05);
    border: 1px solid rgba(108, 92, 231, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}
.gwansang-manual-adj h4 {
    font-size: 15px;
    color: #6c5ce7;
    margin-bottom: 6px;
}
.gwansang-adj-desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 14px;
}
.gwansang-adj-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.gwansang-adj-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.gwansang-adj-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.gwansang-adj-label {
    flex: 1;
}
.gwansang-adj-select {
    background: rgba(255, 255, 255, 0.08);
    color: #6c5ce7;
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    min-width: 52px;
    text-align: center;
}
.gwansang-adj-apply-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #6c5ce7, #5a4fcf);
    color: #0c0f1a;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}
.gwansang-adj-apply-btn:hover {
    opacity: 0.9;
}
.gwansang-adj-apply-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ========== 손금 (Songeum) ========== */
.songeum-upload-card {
    padding: 0;
}
.songeum-dropzone {
    border: 2px dashed rgba(108, 92, 231, 0.4);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(108, 92, 231, 0.03);
}
.songeum-dropzone.dragover {
    border-color: var(--gold);
    background: rgba(108, 92, 231, 0.08);
    transform: scale(1.01);
}
.songeum-dropzone-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.songeum-dropzone-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.songeum-upload-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.songeum-upload-btn,
.songeum-camera-btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 2px;
    min-height: 48px;
}
.songeum-upload-btn {
    background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%);
    background-size: 200% 200%;
    color: #0c0f1a;
}
.songeum-upload-btn:hover {
    background-position: 100% 50%;
    box-shadow: 0 6px 24px rgba(108,92,231,0.35);
    transform: translateY(-1px);
}
.songeum-camera-btn {
    background: rgba(108, 92, 231, 0.10);
    color: var(--gold);
    border: 1px solid rgba(108, 92, 231, 0.3);
}
.songeum-camera-btn:hover {
    background: rgba(108, 92, 231, 0.20);
    transform: translateY(-1px);
}
.songeum-dropzone-notice {
    margin-top: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* 미리보기 */
.songeum-preview {
    text-align: center;
    margin-top: 20px;
}
.songeum-preview-wrapper {
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(108, 92, 231, 0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.songeum-preview-wrapper canvas {
    display: block;
    max-width: 100%;
}
.songeum-preview-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    justify-content: center;
}
.songeum-analyze-btn {
    padding: 13px 32px;
    background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%);
    background-size: 200% 200%;
    color: #0c0f1a;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.3px;
    transition: all 0.3s;
    min-height: 48px;
}
.songeum-analyze-btn:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(108,92,231,0.35);
}
.songeum-reset-btn {
    padding: 14px 24px;
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s;
}
.songeum-reset-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary);
}

/* 로딩 */
.songeum-loading {
    text-align: center;
    padding: 60px 20px;
}

/* 결과 */
.songeum-result {
    margin-top: 24px;
}
.songeum-overall {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(108, 92, 231, 0.05));
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 16px;
    padding: 30px 24px;
    text-align: center;
    margin-bottom: 24px;
}
.songeum-overall-grade {
    font-size: 1.2rem;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.songeum-overall-score {
    font-size: 3rem;
    font-weight: 900;
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.songeum-overall-score span {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.7;
}
.songeum-overall-desc {
    margin-top: 16px;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* 부위별 카드 */
.songeum-parts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.songeum-part-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
}
.songeum-part-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.songeum-part-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 92, 231, 0.1);
    border-radius: 10px;
    flex-shrink: 0;
}
.songeum-part-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.songeum-part-title strong {
    font-size: 0.95rem;
    color: var(--text-primary);
}
.songeum-part-shape {
    font-size: 0.82rem;
    color: var(--gold);
}
.songeum-part-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}
.songeum-part-bar {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}
.songeum-part-bar-fill {
    height: 100%;
    border-radius: 3px;
    width: 0;
    transition: width 0.8s ease;
}
.songeum-part-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ====== 첫인상 분석 ====== */
.impression-result {
    padding: 24px;
}
.impression-hero {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.impression-type-primary,
.impression-type-secondary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 16px;
    flex: 1;
    min-width: 200px;
}
.impression-type-primary {
    background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(108,92,231,0.05));
    border: 1px solid rgba(108,92,231,0.3);
}
.impression-type-secondary {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
}
.impression-type-emoji { font-size: 2.5rem; }
.impression-type-emoji-sm { font-size: 1.8rem; }
.impression-type-info { display: flex; flex-direction: column; gap: 2px; }
.impression-type-overline { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.impression-type-name { font-size: 1.25rem; color: var(--gold); font-weight: 700; }
.impression-type-name-sm { font-size: 1.05rem; color: var(--text); font-weight: 600; }
.impression-type-score { font-size: 0.85rem; color: var(--text-secondary); }

.impression-combo {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 20px;
}
.impression-combo h4 { margin: 0 0 8px; color: var(--gold); font-size: 1.05rem; }
.impression-combo p { margin: 0; color: var(--text); line-height: 1.7; font-size: 0.92rem; }

.impression-average {
    text-align: center;
    margin-bottom: 24px;
}
.impression-avg-score {
    font-size: 3rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}
.impression-avg-score span { font-size: 1rem; font-weight: 400; color: var(--text-dim); }
.impression-average p { margin: 8px 0 0; color: var(--text-secondary); font-size: 0.88rem; }

.impression-radar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}
.impression-radar-wrap canvas {
    max-width: 380px;
    width: 100%;
    height: auto;
}

.impression-axes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.impression-axis-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 18px;
}
.impression-axis-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.impression-axis-icon { font-size: 1.2rem; }
.impression-axis-label { font-weight: 600; color: var(--text); flex: 1; }
.impression-axis-score { font-weight: 700; color: var(--gold); font-size: 1.05rem; }

.impression-axis-bar-bg {
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}
.impression-axis-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.impression-axis-desc {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.impression-manual {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}
.impression-manual h4 { margin: 0 0 6px; color: var(--gold); }
.impression-manual-desc { margin: 0 0 14px; font-size: 0.82rem; color: var(--text-dim); }
.impression-manual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.impression-manual-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.impression-manual-item label { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.impression-manual-hint { font-size: 0.75rem; color: var(--text-dim); }
.impression-manual-item select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    color: var(--text);
    font-size: 0.85rem;
}
.impression-manual-apply {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(108,92,231,0.3);
    background: rgba(108,92,231,0.1);
    color: var(--gold);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.impression-manual-apply:hover { background: rgba(108,92,231,0.2); }

.impression-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .impression-hero { flex-direction: column; }
    .impression-manual-grid { grid-template-columns: 1fr; }
    .impression-actions { flex-direction: column; align-items: center; }
}

/* 손금 분석 이미지 */
.songeum-palm-image {
    margin-bottom: 24px;
    text-align: center;
}
.songeum-palm-image h4 {
    font-size: 15px;
    color: #e8eaf6;
    margin-bottom: 12px;
}
.songeum-palm-canvas-wrap {
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(108, 92, 231, 0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    margin-bottom: 12px;
}
.songeum-palm-canvas-wrap canvas {
    display: block;
    max-width: 100%;
    height: auto;
}
.songeum-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.songeum-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #bbb;
}
.songeum-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

/* 하단 버튼 */
.songeum-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.songeum-share-btn,
.songeum-download-btn,
.songeum-retry-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.3s;
}
.songeum-share-btn {
    background: var(--gold);
    color: #000;
}
.songeum-share-btn:hover {
    background: #a29bfe;
}
.songeum-download-btn {
    background: #8B5CF6;
    color: #fff;
}
.songeum-download-btn:hover {
    background: #7c3aed;
}
.songeum-retry-btn {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.15);
}
.songeum-retry-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary);
}

/* 면책고지 */
.songeum-disclaimer {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: 8px;
}
.songeum-disclaimer p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* 사진 신뢰도 */
.songeum-confidence {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}
.songeum-confidence-trusted {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #66bb6a;
}
.songeum-confidence-usable {
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.3);
    color: #6c5ce7;
}
.songeum-confidence-reference {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    color: #ffa726;
}
.songeum-confidence-blocked {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #ef5350;
}
.songeum-confidence-score {
    font-weight: 700;
    font-size: 15px;
}
.songeum-confidence-label {
    font-size: 0.9em;
    opacity: 0.9;
}

/* 분석 차단 */
.songeum-blocked {
    text-align: center;
    padding: 40px 20px;
    color: #ccc;
}
.songeum-blocked-icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.songeum-blocked p {
    font-size: 16px;
    margin-bottom: 8px;
}
.songeum-blocked-tips {
    font-size: 13px;
    color: #999;
}

/* 강점 / 주의 */
.songeum-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.songeum-strengths,
.songeum-cautions {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}
.songeum-strengths h4,
.songeum-cautions h4 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #e8eaf6;
}
.songeum-strengths ul,
.songeum-cautions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.songeum-strengths li,
.songeum-cautions li {
    font-size: 13px;
    color: #bbb;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.songeum-strengths li:last-child,
.songeum-cautions li:last-child {
    border-bottom: none;
}

/* 수동 보정 */
.songeum-manual-adj {
    background: rgba(108, 92, 231, 0.05);
    border: 1px solid rgba(108, 92, 231, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}
.songeum-manual-adj h4 {
    font-size: 15px;
    color: #6c5ce7;
    margin-bottom: 6px;
}
.songeum-adj-desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 14px;
}
.songeum-adj-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.songeum-adj-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.songeum-adj-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.songeum-adj-label {
    flex: 1;
}
.songeum-adj-select {
    background: rgba(255, 255, 255, 0.08);
    color: #6c5ce7;
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    min-width: 52px;
    text-align: center;
}
.songeum-adj-apply-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #6c5ce7, #5a4fcf);
    color: #0c0f1a;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}
.songeum-adj-apply-btn:hover {
    opacity: 0.9;
}
.songeum-adj-apply-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 손금 반응형 */
@media (max-width: 600px) {
    .songeum-dropzone {
        padding: 30px 16px;
    }
    .songeum-dropzone-icon {
        font-size: 2.5rem;
    }
    .songeum-upload-buttons {
        flex-direction: column;
        align-items: center;
    }
    .songeum-upload-btn,
    .songeum-camera-btn {
        width: 80%;
        text-align: center;
    }
    .songeum-overall-score {
        font-size: 2.5rem;
    }
    .songeum-part-header {
        flex-wrap: wrap;
    }
    .songeum-preview-actions {
        flex-direction: column;
        align-items: center;
    }
    .songeum-analyze-btn,
    .songeum-reset-btn {
        width: 80%;
    }
    .songeum-actions {
        flex-direction: column;
        align-items: center;
    }
    .songeum-share-btn,
    .songeum-download-btn,
    .songeum-retry-btn {
        width: 80%;
        text-align: center;
    }
    .songeum-highlights {
        grid-template-columns: 1fr !important;
    }
    .songeum-adj-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========== 가족 닮은꼴 (Family Face Match) ========== */
.family-upload-card {
    padding: 0;
    overflow: hidden;
}
.family-upload-header {
    padding: 24px 24px 0;
    text-align: center;
}
.family-upload-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 6px;
}
.family-upload-sub {
    font-size: 0.85rem;
    color: var(--text-dim);
}
.family-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px 24px;
}
.family-upload-slot {
    display: flex;
    flex-direction: column;
}
.family-slot-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 0 2px;
}
.family-slot-icon {
    font-size: 1.2rem;
}
.family-slot-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}
.family-slot-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}
.family-slot-badge-required {
    background: rgba(108, 92, 231, 0.2);
    color: var(--gold);
    border: 1px solid rgba(108, 92, 231, 0.3);
}
.family-slot-badge-optional {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* 드롭존 */
.family-dropzone {
    border: 2px dashed rgba(108, 92, 231, 0.3);
    border-radius: var(--radius);
    padding: 28px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.03) 0%, rgba(108, 92, 231, 0.01) 100%);
}
.family-dropzone:hover {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.08) 0%, rgba(108, 92, 231, 0.03) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.1);
}
.family-dropzone.dragover {
    border-color: var(--gold);
    background: rgba(108, 92, 231, 0.12);
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
}
.family-drop-inner {
    text-align: center;
}
.family-drop-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(108, 92, 231, 0.12);
    border: 1px solid rgba(108, 92, 231, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    color: var(--gold);
    transition: all 0.3s;
}
.family-dropzone:hover .family-drop-circle {
    background: rgba(108, 92, 231, 0.2);
    transform: scale(1.08);
}
.family-drop-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}
.family-drop-formats {
    font-size: 0.72rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
}
/* 미리보기 */
.family-preview {
    text-align: center;
}
.family-preview-wrapper {
    position: relative;
    display: inline-block;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--gold);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.15);
}
.family-preview-wrapper canvas {
    display: block;
    border-radius: calc(var(--radius) - 2px);
}
.family-preview-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.family-preview-check {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.family-remove-btn {
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.family-remove-btn:hover {
    background: rgba(244, 67, 54, 0.15);
    border-color: rgba(244, 67, 54, 0.3);
    color: #ef5350;
}
/* 팁 */
.family-upload-tips {
    display: flex;
    gap: 16px;
    padding: 0 24px 16px;
    flex-wrap: wrap;
}
.family-tip {
    font-size: 0.78rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 14px;
    border-radius: 8px;
    flex: 1;
    min-width: 200px;
}
.family-tip span {
    font-size: 1rem;
}
/* 분석 버튼 */
.family-analyze-wrap {
    padding: 0 24px 24px;
    text-align: center;
}
.family-analyze-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 48px;
    background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%);
    background-size: 200% 200%;
    color: #0c0f1a;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.3px;
    min-height: 48px;
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3);
    letter-spacing: 0.5px;
}
.family-analyze-btn:hover:not(:disabled) {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(108,92,231,0.35);
}
.family-analyze-btn:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}
.family-btn-icon {
    font-size: 1.15rem;
}
/* 로딩 */
.family-loading {
    display: none;
    text-align: center;
    padding: 48px 20px;
}
.family-loading-inner {
    max-width: 320px;
    margin: 0 auto;
}
.family-loading-anim {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}
.family-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--gold);
    opacity: 0;
    animation: familyPulse 2s ease-out infinite;
}
.family-pulse-ring.delay1 { animation-delay: 0.5s; }
.family-pulse-ring.delay2 { animation-delay: 1s; }
@keyframes familyPulse {
    0% { transform: scale(0.5); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}
.family-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    animation: familyBob 1.5s ease-in-out infinite;
}
@keyframes familyBob {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -58%); }
}
.family-loading-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}
.family-progress {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}
.family-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #a29bfe, var(--gold));
    background-size: 200% 100%;
    border-radius: 8px;
    width: 0%;
    transition: width 0.5s ease;
    animation: familyShimmer 2s linear infinite;
}
@keyframes familyShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.family-loading-sub {
    font-size: 0.82rem;
    color: var(--text-dim);
}
/* 결과 */
.family-result {
    display: none;
    margin-top: 16px;
    animation: fadeIn 0.6s ease;
}
.family-result-inner {
    padding: 0;
}
/* 판정 */
.family-verdict {
    text-align: center;
    padding: 32px 24px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(108, 92, 231, 0.03));
    border-radius: var(--radius);
    border: 1px solid rgba(108, 92, 231, 0.2);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.family-verdict::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(108, 92, 231, 0.1) 0%, transparent 70%);
    pointer-events: none;
}
.verdict-emoji {
    font-size: 3.5rem;
    margin-bottom: 12px;
    animation: familyBob 2s ease-in-out infinite;
    text-align: center;
}
.verdict-icon {
    height: 70px;
    width: auto;
    display: block;
    margin: 0 auto;
}
.verdict-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 1px;
}
/* 비교 카드 */
.family-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.family-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.family-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.card-emoji {
    font-size: 2.2rem;
    margin-bottom: 4px;
}
.card-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.card-score {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.score-circle {
    position: relative;
    width: 110px;
    height: 110px;
}
.score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.score-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 7;
}
.score-fill {
    fill: none;
    stroke: var(--gold);
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s ease;
    filter: drop-shadow(0 0 6px rgba(108, 92, 231, 0.4));
}
.score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
}
.card-comment {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-top: 6px;
    padding: 6px 12px;
    background: rgba(108, 92, 231, 0.06);
    border-radius: 20px;
    display: inline-block;
}
/* 비율 바 */
.family-ratio {
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.ratio-title {
    font-size: 0.88rem;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}
.ratio-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.ratio-bar {
    display: flex;
    height: 28px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.ratio-fill-mom {
    background: linear-gradient(90deg, #ec407a, #f48fb1);
    transition: width 1.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ratio-fill-dad {
    background: linear-gradient(90deg, #42a5f5, #1e88e5);
    transition: width 1.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* 해석 */
.family-interpretation {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.06), rgba(108, 92, 231, 0.02));
    border-radius: var(--radius);
    padding: 24px;
    font-size: 0.92rem;
    line-height: 1.9;
    color: var(--text-secondary);
    margin-bottom: 24px;
    border-left: 3px solid var(--gold);
    position: relative;
}
.family-interpretation::before {
    content: '\201C';
    position: absolute;
    top: 12px;
    left: 14px;
    font-size: 2.5rem;
    color: rgba(108, 92, 231, 0.15);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1;
}
.family-interpretation small {
    display: block;
    margin-top: 14px;
    color: var(--text-dim);
    font-size: 0.78rem;
}
/* 액션 버튼 */
.family-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.family-share-btn,
.family-retry-btn {
    padding: 12px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.family-share-btn {
    background: var(--gold);
    color: #1a1a1a;
    border-color: var(--gold);
}
.family-share-btn:hover {
    background: #a29bfe;
    transform: translateY(-1px);
}
.family-retry-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
.family-retry-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
/* 면책 */
.family-disclaimer {
    margin-top: 24px;
    text-align: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius);
}
.family-disclaimer p {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.6;
}
/* 사진 신뢰도 배지 */
.family-confidence-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.family-conf-badge {
    font-size: 0.78rem;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 600;
}
.family-conf-trusted {
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.3);
}
.family-conf-usable {
    background: rgba(108, 92, 231, 0.12);
    color: var(--gold);
    border: 1px solid rgba(108, 92, 231, 0.3);
}
.family-conf-reference {
    background: rgba(255, 152, 0, 0.12);
    color: #ffa726;
    border: 1px solid rgba(255, 152, 0, 0.3);
}
.verdict-sub {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-top: 8px;
}
/* 부위별 비교 */
.family-feature-section {
    margin-bottom: 24px;
}
.family-feature-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    margin-bottom: 16px;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 1px;
}
.family-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}
.family-feature-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.family-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.feature-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.feature-card-emoji {
    font-size: 1.3rem;
}
.feature-card-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.feature-card-verdict {
    font-size: 0.82rem;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 10px;
    padding: 3px 10px;
    background: rgba(108, 92, 231, 0.08);
    border-radius: 12px;
    display: inline-block;
}
.feature-card-score {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 10px;
}
.feature-card-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.feature-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.feature-bar-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    width: 32px;
    flex-shrink: 0;
    text-align: right;
}
.feature-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.feature-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease;
    min-width: 2px;
}
.feature-bar-pct {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    width: 36px;
    text-align: right;
}
/* 가족 닮은꼴 반응형 */
@media (max-width: 600px) {
    .family-upload-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    .family-dropzone {
        min-height: 160px;
        padding: 24px 12px;
    }
    .family-upload-tips {
        flex-direction: column;
        padding: 0 16px 16px;
        gap: 8px;
    }
    .family-tip {
        min-width: unset;
    }
    .family-analyze-btn {
        width: 85%;
        justify-content: center;
    }
    .verdict-text {
        font-size: 1.15rem;
    }
    .family-cards {
        grid-template-columns: 1fr;
    }
    .family-actions {
        flex-direction: column;
        align-items: center;
    }
    .family-share-btn,
    .family-retry-btn {
        width: 80%;
        justify-content: center;
    }
}

/* ========== 커플 얼굴 궁합 (Couple Compatibility) ========== */
.couple-info-card { margin-bottom: 20px; }
.couple-info-title { font-size: 1.05rem; font-weight: 700; color: #ec407a; margin-bottom: 8px; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.couple-info-text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; }
.couple-upload-card { overflow: hidden; }
.couple-upload-header { text-align: center; padding: 24px 20px 8px; }
.couple-upload-title { font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1.15rem; font-weight: 700; color: #ec407a; margin-bottom: 6px; }
.couple-upload-sub { font-size: 0.88rem; color: var(--text-secondary); }
.couple-upload-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; padding: 20px 24px; align-items: start; }
.couple-heart-connector { font-size: 2rem; display: flex; align-items: center; justify-content: center; padding-top: 60px; animation: coupleHeartBeat 1.5s ease-in-out infinite; }
@keyframes coupleHeartBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.couple-upload-slot { text-align: center; }
.couple-slot-header { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; font-size: 0.92rem; font-weight: 600; color: var(--text-primary); }
.couple-slot-icon { font-size: 1.1rem; }
.couple-slot-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; background: rgba(236, 64, 122, 0.15); color: #ec407a; font-weight: 700; }
.couple-dropzone { border: 2px dashed rgba(236, 64, 122, 0.3); border-radius: var(--radius); min-height: 200px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; background: rgba(236, 64, 122, 0.03); }
.couple-dropzone:hover, .couple-dropzone.dragover { border-color: #ec407a; background: rgba(236, 64, 122, 0.08); transform: translateY(-2px); }
.couple-drop-inner { text-align: center; padding: 20px 12px; }
.couple-drop-circle { width: 56px; height: 56px; border-radius: 50%; background: rgba(236, 64, 122, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #ec407a; }
.couple-drop-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.couple-drop-formats { font-size: 0.72rem; color: var(--text-dim); }
.couple-preview { text-align: center; }
.couple-preview-wrapper { position: relative; display: inline-block; border-radius: var(--radius); overflow: hidden; border: 2px solid rgba(236, 64, 122, 0.3); }
.couple-canvas { display: block; max-width: 200px; max-height: 200px; }
.couple-preview-overlay { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(76, 175, 80, 0.85); display: flex; align-items: center; justify-content: center; }
.couple-preview-check { color: #fff; font-size: 14px; font-weight: bold; }
.couple-remove-btn { margin-top: 8px; background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 8px 16px; min-height: 44px; font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s; }
.couple-remove-btn:hover { border-color: #ec407a; color: #ec407a; }
.couple-upload-tips { display: flex; gap: 16px; padding: 8px 24px 16px; justify-content: center; flex-wrap: wrap; }
.couple-tip { font-size: 0.8rem; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }
.couple-analyze-wrap { text-align: center; padding: 8px 24px 24px; }
.couple-analyze-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 40px; font-size: 1rem; font-weight: 700; color: #0c0f1a; background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%); background-size: 200% 200%; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.3s; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0.3px; min-height: 48px; }
.couple-analyze-btn:hover:not(:disabled) { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(108,92,231,0.35); }
.couple-analyze-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
/* 커플 로딩 */
.couple-loading { text-align: center; padding: 60px 20px; }
.couple-loading-inner { max-width: 300px; margin: 0 auto; }
.couple-loading-anim { position: relative; width: 100px; height: 100px; margin: 0 auto 24px; }
.couple-pulse-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(236, 64, 122, 0.3); animation: couplePulse 2s ease-out infinite; }
.couple-pulse-ring.delay1 { animation-delay: 0.5s; }
.couple-pulse-ring.delay2 { animation-delay: 1s; }
@keyframes couplePulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.couple-loading-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; animation: coupleHeartBeat 1.5s ease-in-out infinite; }
.couple-loading-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.couple-progress { width: 100%; height: 4px; background: var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.couple-progress-fill { height: 100%; background: linear-gradient(90deg, #ec407a, #e91e63); border-radius: 12px; width: 0%; transition: width 0.5s ease; }
.couple-loading-sub { font-size: 0.8rem; color: var(--text-dim); }
/* 커플 결과 */
.couple-result { margin-bottom: 24px; }
.couple-result-inner { animation: fadeIn 0.6s ease; }
.couple-verdict { text-align: center; padding: 36px 24px; background: linear-gradient(135deg, rgba(236, 64, 122, 0.12), rgba(233, 30, 99, 0.03)); border-radius: var(--radius); border: 1px solid rgba(236, 64, 122, 0.2); margin-bottom: 24px; position: relative; overflow: hidden; }
.couple-grade-emoji { font-size: 2.5rem; margin-bottom: 8px; display: block; }
.couple-grade-name { font-size: 1.6rem; font-weight: 700; color: #ec407a; margin-bottom: 4px; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.couple-score-big { font-size: 3.5rem; font-weight: 800; color: var(--gold); font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.1; }
.couple-score-big small { font-size: 1.2rem; font-weight: 400; color: var(--text-secondary); }
.couple-grade-desc { font-size: 0.95rem; color: var(--text-secondary); margin-top: 8px; }
/* 카테고리 그리드 */
.couple-cat-title { font-size: 1rem; font-weight: 700; color: var(--gold); text-align: center; margin-bottom: 16px; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 1px; }
.couple-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.couple-category-card { background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
.couple-category-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.couple-cat-emoji { font-size: 1.8rem; margin-bottom: 8px; display: block; }
.couple-cat-label { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.couple-cat-desc { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 12px; }
.couple-cat-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.couple-cat-bar-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }
.couple-cat-percent { font-size: 1.1rem; font-weight: 700; color: #ec407a; }
/* 해석 */
.couple-interpretation { background: linear-gradient(135deg, rgba(236, 64, 122, 0.06), rgba(233, 30, 99, 0.02)); border: 1px solid rgba(236, 64, 122, 0.15); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.8; }
.couple-interpretation::before { content: '💕 궁합 해석'; display: block; font-weight: 700; color: #ec407a; margin-bottom: 10px; font-size: 0.95rem; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
/* 액션 버튼 */
.couple-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.couple-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-size: 0.95rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #ec407a, #e91e63); border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s; }
.couple-share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(236, 64, 122, 0.3); }
.couple-retry-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.3s; }
.couple-retry-btn:hover { border-color: var(--gold); color: var(--gold); }
.couple-disclaimer { margin-top: 24px; text-align: center; padding: 16px 20px; background: rgba(255, 255, 255, 0.02); border-radius: var(--radius); }
.couple-disclaimer p { font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; }
/* 커플 신뢰도 배지 */
.couple-conf-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.couple-conf-badge { font-size: 0.78rem; padding: 4px 14px; border-radius: 20px; font-weight: 600; }
.couple-conf-trusted { background: rgba(76, 175, 80, 0.15); color: #66bb6a; border: 1px solid rgba(76, 175, 80, 0.3); }
.couple-conf-usable { background: rgba(108, 92, 231, 0.12); color: var(--gold); border: 1px solid rgba(108, 92, 231, 0.3); }
.couple-conf-reference { background: rgba(255, 152, 0, 0.12); color: #ffa726; border: 1px solid rgba(255, 152, 0, 0.3); }
/* 홈 메뉴 이모지 아이콘 */
.home-menu-emoji { font-size: 2.2rem; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
/* 커플 반응형 */
@media (max-width: 600px) {
    .couple-upload-grid { grid-template-columns: 1fr; gap: 8px; }
    .couple-heart-connector { padding: 4px 0; font-size: 1.5rem; }
    .couple-dropzone { min-height: 160px; padding: 24px 12px; }
    .couple-upload-tips { flex-direction: column; padding: 0 16px 16px; gap: 8px; }
    .couple-analyze-btn { width: 85%; justify-content: center; }
    .couple-category-grid { grid-template-columns: repeat(2, 1fr); }
    .couple-actions { flex-direction: column; align-items: center; }
    .couple-share-btn, .couple-retry-btn { width: 80%; justify-content: center; }
}

/* ========== 얼굴 밸런스 (Balance) ========== */
.balance-upload-card { padding: 0; }
.balance-dropzone { border: 2px dashed rgba(38, 166, 154, 0.4); border-radius: 12px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s; background: rgba(38, 166, 154, 0.03); }
.balance-dropzone.dragover { border-color: #26a69a; background: rgba(38, 166, 154, 0.08); transform: scale(1.01); }
.balance-dropzone-icon { font-size: 3rem; margin-bottom: 12px; }
.balance-dropzone-text { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }
.balance-upload-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.balance-upload-btn, .balance-camera-btn { display: inline-block; padding: 13px 24px; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: all 0.3s; border: none; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 2px; min-height: 48px; }
.balance-upload-btn { background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%); background-size: 200% 200%; color: #0c0f1a; }
.balance-upload-btn:hover { background-position: 100% 50%; box-shadow: 0 6px 24px rgba(108,92,231,0.35); transform: translateY(-1px); }
.balance-camera-btn { background: rgba(108, 92, 231, 0.10); color: var(--gold); border: 1px solid rgba(108, 92, 231, 0.3); }
.balance-camera-btn:hover { background: rgba(108, 92, 231, 0.20); transform: translateY(-1px); }
.balance-dropzone-notice { margin-top: 16px; font-size: 0.78rem; color: var(--text-muted); }
/* 밸런스 미리보기 */
.balance-preview { text-align: center; margin-top: 20px; }
.balance-preview-wrapper { display: inline-block; border-radius: 12px; overflow: hidden; border: 2px solid rgba(38, 166, 154, 0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.balance-preview-wrapper canvas { display: block; max-width: 100%; }
.balance-preview-actions { margin-top: 16px; display: flex; gap: 12px; justify-content: center; }
.balance-analyze-btn { padding: 13px 32px; background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%); background-size: 200% 200%; color: #0c0f1a; border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700; cursor: pointer; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0.3px; transition: all 0.3s; min-height: 48px; }
.balance-analyze-btn:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(108,92,231,0.35); }
.balance-reset-btn { padding: 14px 24px; background: rgba(255,255,255,0.08); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; font-size: 0.95rem; cursor: pointer; font-family: inherit; transition: all 0.3s; }
.balance-reset-btn:hover { background: rgba(255,255,255,0.15); color: var(--text-primary); }
/* 밸런스 로딩 */
.balance-loading { text-align: center; padding: 60px 20px; }
/* 밸런스 결과 */
.balance-result { margin-top: 24px; }
.balance-result-inner { animation: fadeIn 0.6s ease; }
.balance-verdict { text-align: center; padding: 36px 24px; background: linear-gradient(135deg, rgba(38, 166, 154, 0.12), rgba(0, 137, 123, 0.03)); border-radius: var(--radius); border: 1px solid rgba(38, 166, 154, 0.2); margin-bottom: 24px; position: relative; overflow: hidden; }
.balance-grade-emoji { font-size: 2.5rem; margin-bottom: 8px; display: block; }
.balance-grade-name { font-size: 1.6rem; font-weight: 700; color: #26a69a; margin-bottom: 4px; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.balance-score-big { font-size: 3.5rem; font-weight: 800; color: var(--gold); font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.1; }
.balance-score-big small { font-size: 1.2rem; font-weight: 400; color: var(--text-secondary); }
.balance-grade-desc { font-size: 0.95rem; color: var(--text-secondary); margin-top: 8px; }
/* 밸런스 레이더 차트 */
.balance-section-title { font-size: 1rem; font-weight: 700; color: var(--gold); text-align: center; margin-bottom: 16px; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 1px; }
.balance-radar-wrap { text-align: center; margin-bottom: 24px; }
.balance-radar-wrap svg { max-width: 360px; width: 100%; }
/* 밸런스 미러 비교 */
.balance-mirror-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.balance-mirror-item { text-align: center; }
.balance-mirror-item canvas { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.balance-mirror-label { font-size: 0.82rem; color: var(--text-secondary); margin-top: 6px; font-weight: 600; }
/* 밸런스 카테고리 카드 */
.balance-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.balance-category-card { background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
.balance-category-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.balance-cat-emoji { font-size: 1.8rem; margin-bottom: 8px; display: block; }
.balance-cat-label { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.balance-cat-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 6px; margin-top: 10px; }
.balance-cat-bar-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }
.balance-cat-score { font-size: 1.1rem; font-weight: 700; color: #26a69a; margin-bottom: 6px; }
.balance-cat-direction { font-size: 0.75rem; color: var(--text-dim); line-height: 1.4; min-height: 1.4em; }
.balance-cat-direction .dir-icon { font-weight: 700; }
/* 밸런스 비대칭 요약 */
.balance-asymmetry-summary { background: linear-gradient(135deg, rgba(38, 166, 154, 0.06), rgba(0, 137, 123, 0.02)); border: 1px solid rgba(38, 166, 154, 0.15); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; text-align: center; }
.balance-asymmetry-title { font-weight: 700; color: #26a69a; margin-bottom: 10px; font-size: 0.95rem; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.balance-asymmetry-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.8; }
/* 밸런스 해석 */
.balance-interpretation { background: linear-gradient(135deg, rgba(38, 166, 154, 0.06), rgba(0, 137, 123, 0.02)); border: 1px solid rgba(38, 166, 154, 0.15); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.8; }
.balance-interpretation::before { content: '🪞 밸런스 해석'; display: block; font-weight: 700; color: #26a69a; margin-bottom: 10px; font-size: 0.95rem; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
/* 밸런스 액션 버튼 */
.balance-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.balance-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-size: 0.95rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #26a69a, #00897b); border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s; font-family: inherit; }
.balance-share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(38, 166, 154, 0.3); }
.balance-retry-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.3s; font-family: inherit; }
.balance-retry-btn:hover { border-color: var(--gold); color: var(--gold); }
/* 밸런스 면책 */
.balance-disclaimer { margin-top: 24px; text-align: center; padding: 16px 20px; background: rgba(255, 255, 255, 0.02); border-radius: var(--radius); }
.balance-disclaimer p { font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; }
/* 밸런스 반응형 */
@media (max-width: 600px) {
    .balance-dropzone { padding: 30px 16px; }
    .balance-dropzone-icon { font-size: 2.5rem; }
    .balance-upload-buttons { flex-direction: column; align-items: center; }
    .balance-mirror-grid { grid-template-columns: 1fr; gap: 16px; }
    .balance-category-grid { grid-template-columns: repeat(2, 1fr); }
    .balance-actions { flex-direction: column; align-items: center; }
    .balance-share-btn, .balance-retry-btn { width: 80%; justify-content: center; }
    .balance-radar-wrap svg { max-width: 280px; }
}

/* ========== 분석된 얼굴 이미지 (공용: 전생/동물상 등) ========== */
.analyzed-face-section { text-align: center; margin-bottom: 24px; }
.analyzed-face-label { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 10px; letter-spacing: 0.5px; }
.analyzed-face-wrapper {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(108, 92, 231, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(108, 92, 231, 0.1);
    width: 200px; height: 200px;
}
.analyzed-face-img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) {
    .analyzed-face-wrapper { width: 160px; height: 160px; }
}

/* ========== 전생테스트 (War) ========== */
.war-upload-card { padding: 0; }
.war-dropzone { border: 2px dashed rgba(108, 92, 231, 0.4); border-radius: 12px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s; background: rgba(108, 92, 231, 0.03); }
.war-dropzone.dragover { border-color: #5a4fcf; background: rgba(108, 92, 231, 0.08); transform: scale(1.01); }
.war-dropzone-icon { font-size: 3rem; margin-bottom: 12px; }
.war-dropzone-text { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }
.war-upload-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.war-upload-btn, .war-camera-btn { display: inline-block; padding: 13px 24px; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: all 0.3s; border: none; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 2px; min-height: 48px; }
.war-upload-btn { background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%); background-size: 200% 200%; color: #0c0f1a; }
.war-upload-btn:hover { background-position: 100% 50%; box-shadow: 0 6px 24px rgba(108,92,231,0.35); transform: translateY(-1px); }
.war-camera-btn { background: rgba(108, 92, 231, 0.10); color: var(--gold); border: 1px solid rgba(108, 92, 231, 0.3); }
.war-camera-btn:hover { background: rgba(108, 92, 231, 0.20); transform: translateY(-1px); }
.war-dropzone-notice { margin-top: 16px; font-size: 0.78rem; color: var(--text-muted); }
/* 전생 미리보기 */
.war-preview { text-align: center; margin-top: 20px; }
.war-preview-wrapper { display: inline-block; border-radius: 12px; overflow: hidden; border: 2px solid rgba(108, 92, 231, 0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.war-preview-wrapper canvas { display: block; max-width: 100%; }
.war-preview-actions { margin-top: 16px; display: flex; gap: 12px; justify-content: center; }
.war-analyze-btn { padding: 13px 32px; background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%); background-size: 200% 200%; color: #0c0f1a; border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700; cursor: pointer; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0.3px; transition: all 0.3s; min-height: 48px; }
.war-analyze-btn:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(108,92,231,0.35); }
.war-reset-btn { padding: 14px 24px; background: rgba(255,255,255,0.08); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; font-size: 0.95rem; cursor: pointer; font-family: inherit; transition: all 0.3s; }
.war-reset-btn:hover { background: rgba(255,255,255,0.15); color: var(--text-primary); }
/* 전생 로딩 */
.war-loading { text-align: center; padding: 60px 20px; }
/* 전생 퀴즈 */
.war-quiz { max-width: 500px; margin: 0 auto; }
.war-quiz-progress { width: 100%; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
.war-quiz-progress-bar { height: 100%; background: linear-gradient(90deg, #5a4fcf, #a29bfe); border-radius: 3px; transition: width 0.4s ease; width: 0%; }
.war-quiz-counter { text-align: center; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 20px; font-weight: 600; }
.war-quiz-question { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); text-align: center; margin-bottom: 24px; line-height: 1.6; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.war-quiz-answers { display: flex; flex-direction: column; gap: 10px; }
.war-quiz-answer-btn { padding: 14px 20px; background: rgba(108, 92, 231, 0.06); border: 1px solid rgba(108, 92, 231, 0.2); border-radius: 10px; color: var(--text-secondary); font-size: 0.95rem; cursor: pointer; transition: all 0.3s; font-family: inherit; text-align: left; line-height: 1.5; }
.war-quiz-answer-btn:hover { background: rgba(108, 92, 231, 0.15); border-color: #5a4fcf; color: var(--text-primary); transform: translateX(4px); }
.war-quiz-answer-btn.selected { background: rgba(108, 92, 231, 0.2); border-color: #5a4fcf; color: #a29bfe; }
/* 전생 결과 */
.war-result-header { text-align: center; margin-bottom: 24px; }
.war-result-image { width: 180px; height: auto; margin: 0 auto 16px; display: block; filter: drop-shadow(0 4px 20px rgba(108, 92, 231, 0.3)); }
.war-result-subtitle { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 8px; }
.war-result-name { font-size: 1.8rem; font-weight: 700; color: #a29bfe; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin-bottom: 4px; }
.war-result-role { font-size: 1rem; color: #5a4fcf; font-weight: 600; margin-bottom: 16px; }
.war-result-desc { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.8; text-align: center; padding: 0 10px; margin-bottom: 28px; }
/* 능력치 바 */
.war-traits { margin-bottom: 28px; }
.war-traits-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); text-align: center; margin-bottom: 16px; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.war-trait-item { margin-bottom: 14px; }
.war-trait-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.war-trait-name { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); }
.war-trait-value { font-size: 0.88rem; font-weight: 700; }
.war-trait-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.war-trait-bar-fill { height: 100%; border-radius: 4px; transition: width 1.2s ease; }
.war-trait-leadership .war-trait-value, .war-trait-leadership .war-trait-bar-fill { color: #ef5350; background: linear-gradient(90deg, #ef5350, #e53935); }
.war-trait-strategy .war-trait-value, .war-trait-strategy .war-trait-bar-fill { color: #42a5f5; background: linear-gradient(90deg, #42a5f5, #1e88e5); }
.war-trait-courage .war-trait-value, .war-trait-courage .war-trait-bar-fill { color: #ffa726; background: linear-gradient(90deg, #ffa726, #f57c00); }
.war-trait-creativity .war-trait-value, .war-trait-creativity .war-trait-bar-fill { color: #ab47bc; background: linear-gradient(90deg, #ab47bc, #8e24aa); }
.war-trait-empathy .war-trait-value, .war-trait-empathy .war-trait-bar-fill { color: #66bb6a; background: linear-gradient(90deg, #66bb6a, #43a047); }
/* value 텍스트는 background 불필요, color만 */
.war-trait-leadership .war-trait-value { background: none; }
.war-trait-strategy .war-trait-value { background: none; }
.war-trait-courage .war-trait-value { background: none; }
.war-trait-creativity .war-trait-value { background: none; }
.war-trait-empathy .war-trait-value { background: none; }
/* 아군 카드 */
.war-ally { margin-bottom: 28px; text-align: center; }
.war-ally-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.war-ally-card { display: inline-flex; align-items: center; gap: 16px; background: rgba(108, 92, 231, 0.06); border: 1px solid rgba(108, 92, 231, 0.2); border-radius: 12px; padding: 16px 24px; }
.war-ally-image { width: 64px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.war-ally-info { text-align: left; }
.war-ally-name { font-size: 1rem; font-weight: 700; color: #a29bfe; }
.war-ally-role { font-size: 0.82rem; color: var(--text-dim); margin-top: 2px; }
/* 액션 버튼 */
.war-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.war-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-size: 0.95rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5a4fcf, #a29bfe); border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s; font-family: inherit; }
.war-share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108, 92, 231, 0.3); }
.war-retry-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.3s; font-family: inherit; }
.war-retry-btn:hover { border-color: var(--gold); color: var(--gold); }
/* 면책 */
.war-disclaimer { margin-top: 24px; text-align: center; padding: 16px 20px; background: rgba(255, 255, 255, 0.02); border-radius: var(--radius); }
.war-disclaimer p { font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; }
/* 전생 반응형 */
@media (max-width: 600px) {
    .war-dropzone { padding: 30px 16px; }
    .war-dropzone-icon { font-size: 2.5rem; }
    .war-upload-buttons { flex-direction: column; align-items: center; }
    .war-result-image { width: 140px; }
    .war-result-name { font-size: 1.5rem; }
    .war-actions { flex-direction: column; align-items: center; }
    .war-share-btn, .war-retry-btn { width: 80%; justify-content: center; }
    .war-ally-card { flex-direction: column; text-align: center; }
    .war-ally-info { text-align: center; }
}

/* ========== 동물상 테스트 (Animal Face) ========== */
.animal-dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s; background: var(--bg-card); }
.animal-dropzone.dragover { border-color: #f59e0b; background: rgba(245,158,11,0.06); }
.animal-dropzone-icon { font-size: 3rem; margin-bottom: 12px; }
.animal-dropzone-text { color: var(--text-dim); margin-bottom: 16px; line-height: 1.5; }
.animal-upload-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.animal-upload-btn, .animal-camera-btn { display: inline-flex; align-items: center; gap: 6px; padding: 13px 24px; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 700; cursor: pointer; border: none; transition: all 0.3s; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 2px; min-height: 48px; }
.animal-upload-btn { background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%); background-size: 200% 200%; color: #0c0f1a; }
.animal-camera-btn { background: rgba(108, 92, 231, 0.10); color: var(--gold); border: 1px solid rgba(108, 92, 231, 0.3); }
.animal-upload-btn:hover { background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(108,92,231,0.35); }
.animal-camera-btn:hover { background: rgba(108, 92, 231, 0.20); transform: translateY(-1px); }
.animal-dropzone-notice { font-size: 0.78rem; color: var(--text-dim); margin-top: 16px; }
.animal-preview { text-align: center; }
.animal-preview-wrapper { display: inline-block; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border); margin-bottom: 16px; }
.animal-preview-wrapper canvas { max-width: 100%; height: auto; display: block; }
.animal-preview-actions { display: flex; gap: 12px; justify-content: center; }
.animal-analyze-btn { padding: 13px 28px; background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%); background-size: 200% 200%; color: #0c0f1a; border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700; cursor: pointer; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0.3px; transition: all 0.3s; min-height: 48px; }
.animal-analyze-btn:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(108,92,231,0.35); }
.animal-reset-btn { padding: 12px 20px; background: var(--bg-card); color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.animal-reset-btn:hover { border-color: #f59e0b; }
.animal-loading { text-align: center; padding: 60px 20px; }
/* result */
.animal-result-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 20px; text-align: center; }
.animal-result-image { width: 180px; height: auto; margin: 0 auto 16px; display: block; filter: drop-shadow(0 4px 12px rgba(245,158,11,0.25)); }
.animal-result-label { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 4px; }
.animal-result-name { font-size: 2rem; font-weight: 800; color: #f59e0b; margin-bottom: 4px; }
.animal-result-subtitle { font-size: 1.1rem; color: var(--text); margin-bottom: 16px; font-weight: 600; }
.animal-result-desc { font-size: 0.95rem; color: var(--text-dim); line-height: 1.7; max-width: 480px; margin: 0 auto 24px; }
/* match % bar */
.animal-match-section { margin: 24px 0; }
.animal-match-title { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 12px; }
.animal-match-bar-bg { background: rgba(255,255,255,0.06); border-radius: 20px; height: 28px; position: relative; overflow: hidden; }
.animal-match-bar-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, #f59e0b, #ef4444); display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font-size: 0.85rem; font-weight: 700; color: #fff; transition: width 1.2s ease; }
/* trait radar */
.animal-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; max-width: 420px; margin-left: auto; margin-right: auto; }
.animal-trait-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.animal-trait-label { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; }
.animal-trait-bar-bg { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.animal-trait-bar-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
.animal-trait-bar-fill.t-cute { background: #f472b6; }
.animal-trait-bar-fill.t-fierce { background: #ef4444; }
.animal-trait-bar-fill.t-elegant { background: #a78bfa; }
.animal-trait-bar-fill.t-friendly { background: #34d399; }
.animal-trait-bar-fill.t-mysterious { background: #60a5fa; }
.animal-trait-bar-fill.t-charisma { background: #fbbf24; }
.animal-trait-value { font-size: 0.78rem; color: var(--text-dim); margin-top: 3px; text-align: right; }
/* top 3 */
.animal-top3 { margin: 24px 0; }
.animal-top3-title { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 12px; text-align: center; }
.animal-top3-list { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.animal-top3-item { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 12px; width: 100px; }
.animal-top3-item.rank-1 { border-color: #f59e0b; background: rgba(245,158,11,0.08); }
.animal-top3-rank { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 4px; font-weight: 700; }
.animal-top3-img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 6px; }
.animal-top3-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.animal-top3-pct { font-size: 0.75rem; color: #f59e0b; }
/* actions */
.animal-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.animal-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; }
.animal-share-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(245,158,11,0.3); }
.animal-retry-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; }
.animal-retry-btn:hover { border-color: #f59e0b; }
.animal-disclaimer { margin-top: 24px; text-align: center; padding: 16px 20px; background: rgba(255, 255, 255, 0.02); border-radius: var(--radius); }
.animal-disclaimer p { font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; }
/* animal responsive */
@media (max-width: 600px) {
    .animal-dropzone { padding: 30px 16px; }
    .animal-dropzone-icon { font-size: 2.5rem; }
    .animal-upload-buttons { flex-direction: column; align-items: center; }
    .animal-result-image { width: 140px; }
    .animal-result-name { font-size: 1.5rem; }
    .animal-actions { flex-direction: column; align-items: center; }
    .animal-share-btn, .animal-retry-btn { width: 80%; justify-content: center; }
    .animal-traits { grid-template-columns: 1fr; }
    .animal-top3-list { flex-direction: column; align-items: center; }
}

/* ========== 오늘의 운세 (Today Fortune) ========== */
.tf-header {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 20px;
    margin-bottom: 20px;
}
.tf-date {
    font-size: 1.1rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.tf-ganji {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.tf-ganji-text {
    font-size: 1.3rem;
    color: var(--text);
    font-weight: 600;
}
.tf-ganji-ohang {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}
.tf-ohang-목 { background: rgba(34,197,94,0.15); color: #22c55e; }
.tf-ohang-화 { background: rgba(239,68,68,0.15); color: #ef4444; }
.tf-ohang-토 { background: rgba(234,179,8,0.15); color: #eab308; }
.tf-ohang-금 { background: rgba(200,200,220,0.15); color: #c8c8dc; }
.tf-ohang-수 { background: rgba(59,130,246,0.15); color: #3b82f6; }

.tf-score-wrap {
    margin: 16px 0;
}
.tf-score {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
}
.tf-score .tf-score-unit {
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: 2px;
}
.tf-score.score-great { color: #f59e0b; text-shadow: 0 0 20px rgba(245,158,11,0.4); }
.tf-score.score-good { color: #22c55e; }
.tf-score.score-mid { color: var(--text-dim); }
.tf-score.score-low { color: var(--accent-red); }

.tf-summary {
    font-size: 1.1rem;
    color: var(--gold-light);
    font-style: italic;
    margin-top: 8px;
}

/* 십신 카드 */
.tf-sipsin-card {
    border-left: 3px solid var(--gold);
}
.tf-sipsin-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.tf-sipsin-badge {
    display: inline-block;
    background: var(--gold);
    color: #000;
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 700;
}
.tf-sipsin-hanja {
    color: var(--text-dim);
    font-size: 0.9rem;
}
.tf-sipsin-label {
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
}
.tf-sipsin-desc {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}
.tf-my-saju {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.tf-my-label {
    color: var(--text-dim);
    font-size: 0.85rem;
}
.tf-my-ilgan {
    color: var(--gold);
    font-weight: 700;
    font-size: 0.95rem;
}
.tf-my-arrow {
    color: var(--text-dim);
}
.tf-my-sipsin {
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
}

/* 충/합 관계 */
.tf-interaction-card h3 {
    margin-bottom: 12px;
}
.tf-ix-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
}
.tf-ix-chung {
    background: rgba(196,90,74,0.1);
    border-left: 3px solid var(--accent-red);
}
.tf-ix-hap {
    background: rgba(90,154,90,0.1);
    border-left: 3px solid var(--accent-green);
}
.tf-ix-label {
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}
.tf-ix-desc {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 카테고리 카드 */
.tf-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.tf-cat-card {
    margin-bottom: 16px;
}
.tf-cat-overall {
    border-top: 2px solid var(--gold);
}
.tf-cat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.tf-cat-icon {
    font-size: 1.2rem;
}
.tf-cat-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.tf-cat-score {
    margin-left: auto;
    font-weight: 700;
    font-size: 0.95rem;
}
.tf-cat-text {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}
.tf-cat-interaction {
    color: var(--accent-red);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 10px 0 0;
    padding: 8px 12px;
    background: rgba(196,90,74,0.08);
    border-radius: 6px;
}
.tf-cat-detail {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(108,92,231,0.05);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 8px;
}
.tf-cat-detail-label {
    font-size: 0.8rem;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tf-cat-detail p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* 조언 카드 */
.tf-advice-card {
    border-left: 3px solid var(--accent-blue);
}
.tf-advice-card h3 {
    color: var(--accent-blue);
    margin-bottom: 10px;
}
.tf-advice-card p {
    color: var(--text-dim);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* 행운 카드 */
.tf-lucky-card h3 {
    margin-bottom: 14px;
}
.tf-lucky-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.tf-lucky-item {
    text-align: center;
    padding: 12px 8px;
    background: rgba(108,92,231,0.06);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 8px;
}
.tf-lucky-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.tf-lucky-value {
    display: block;
    font-size: 1.1rem;
    color: var(--gold);
    font-weight: 700;
}

.tf-name-card {
    text-align: center;
    margin-bottom: 16px;
}
.tf-name-card p {
    margin: 0;
    font-size: 1.18rem;
    color: var(--gold-light);
}
.tf-header-strong {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 30px 28px;
    background:
        radial-gradient(circle at top right, rgba(108,92,231,0.14), transparent 36%),
        linear-gradient(145deg, rgba(20,24,37,0.96), rgba(16,20,32,0.98));
}
.tf-header-strong::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(108,92,231,0.08), transparent);
    opacity: 0.7;
    pointer-events: none;
}
.tf-header-topline,
.tf-header-main,
.tf-overview-grid,
.tf-flow-grid,
.tf-rel-grid {
    position: relative;
    z-index: 1;
}
.tf-header-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.tf-trad-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(108,92,231,0.12);
    border: 1px solid rgba(108,92,231,0.28);
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.tf-header-strong .tf-date {
    margin-bottom: 0;
}
.tf-header-strong .tf-ganji {
    justify-content: flex-start;
    margin-bottom: 18px;
}
.tf-header-main {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}
.tf-header-copy {
    min-width: 0;
}
.tf-header-title {
    font-size: 0.88rem;
    color: var(--text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.tf-header-strong .tf-summary {
    margin: 0;
    font-style: normal;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--text);
}
.tf-daily-sipsin-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.tf-sipsin-copy {
    color: var(--text-dim);
    font-size: 0.93rem;
    line-height: 1.6;
}
.tf-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.tf-overview-card {
    min-height: 132px;
    background: linear-gradient(180deg, rgba(20,24,37,0.95), rgba(16,20,32,0.98));
}
.tf-overview-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.tf-overview-value {
    font-size: 1.16rem;
    color: var(--gold-light);
    font-weight: 700;
    line-height: 1.45;
}
.tf-overview-sub {
    margin-top: 8px;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.88rem;
}
.tf-tone-good {
    border-color: rgba(82, 184, 118, 0.35);
    box-shadow: inset 0 0 0 1px rgba(82, 184, 118, 0.08);
}
.tf-tone-warn {
    border-color: rgba(196, 90, 74, 0.35);
    box-shadow: inset 0 0 0 1px rgba(196, 90, 74, 0.06);
}
.tf-tone-neutral {
    border-color: rgba(108,92,231,0.2);
}
.tf-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.tf-card-title-row h3 {
    margin: 0;
}
.tf-card-meta {
    color: var(--text-dim);
    font-size: 0.86rem;
}
.tf-flow-card {
    margin-bottom: 18px;
}
.tf-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.tf-flow-pill {
    padding: 16px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(108,92,231,0.1);
}
.tf-flow-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.tf-flow-ganji {
    color: var(--gold-light);
    font-size: 1.08rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.tf-flow-sipsin {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 0.93rem;
    font-weight: 600;
}
.tf-flow-divider {
    color: rgba(255,255,255,0.25);
}
.tf-flow-ohang {
    margin-top: 10px;
    color: var(--text-dim);
    font-size: 0.84rem;
}
.tf-rel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.tf-rel-card {
    padding: 20px 20px 18px;
}
.tf-rel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.tf-rel-title-wrap {
    min-width: 0;
}
.tf-rel-title {
    color: var(--gold);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.tf-rel-headline {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
}
.tf-rel-score {
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.92rem;
    font-weight: 800;
}
.tf-rel-summary {
    color: var(--text-dim);
    line-height: 1.7;
    margin: 0 0 12px;
}
.tf-rel-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}
.tf-rel-list li {
    position: relative;
    padding-left: 14px;
    color: var(--text-dim);
    line-height: 1.65;
    font-size: 0.92rem;
}
.tf-rel-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
}
.tf-cat-compact {
    min-height: 100%;
}
.tf-cat-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(108,92,231,0.12);
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* ========== 로또 번호 스타일 ========== */
.lotto-sets-card h3 { margin-bottom: 16px; }
.lotto-set {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lotto-set:last-child { border-bottom: none; }
.lotto-set-label {
    width: 24px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dim);
    text-align: center;
    flex-shrink: 0;
}
.lotto-ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 0.88rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.15);
}
.lb-yellow { background: linear-gradient(135deg, #fbc531, #e1a100); }
.lb-blue   { background: linear-gradient(135deg, #4a90d9, #2f6cb5); }
.lb-red    { background: linear-gradient(135deg, #e84118, #c23616); }
.lb-gray   { background: linear-gradient(135deg, #7f8fa6, #596275); }
.lb-green  { background: linear-gradient(135deg, #44bd32, #2d8521); }

@media (max-width: 380px) {
    .lotto-ball { width: 32px; height: 32px; font-size: 0.78rem; }
    .lotto-set { gap: 5px; }
}

/* 반응형 */
@media (max-width: 768px) {
    .tf-header-main,
    .tf-overview-grid,
    .tf-flow-grid,
    .tf-rel-grid {
        grid-template-columns: 1fr;
    }
    .tf-cat-grid {
        grid-template-columns: 1fr;
    }
    .tf-lucky-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tf-score {
        font-size: 2.6rem;
    }
    .tf-summary {
        font-size: 1rem;
    }
    .tf-my-saju {
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .tf-header {
        padding: 24px 16px;
    }
    .tf-header-strong {
        padding: 24px 18px;
    }
    .tf-header-topline {
        align-items: flex-start;
    }
    .tf-daily-sipsin-line {
        gap: 8px;
    }
    .tf-ganji-text {
        font-size: 1.1rem;
    }
    .tf-sipsin-header {
        flex-wrap: wrap;
    }
}

/* ========== 주간 운세 (Weekly Fortune) ========== */
.wf-header {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 20px;
    margin-bottom: 20px;
}
.wf-week-label {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.wf-week-range {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin-bottom: 16px;
}
.wf-keywords {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.wf-keyword-badge {
    display: inline-block;
    background: rgba(108,92,231,0.12);
    color: var(--gold);
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(108,92,231,0.25);
}

.wf-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}

.wf-overview-card {
    background:
        radial-gradient(circle at top right, rgba(108,92,231,0.12), transparent 48%),
        linear-gradient(180deg, rgba(108,92,231,0.08), rgba(108,92,231,0.02));
    border: 1px solid rgba(108,92,231,0.16);
    border-radius: 14px;
    padding: 16px 18px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wf-overview-card.is-good {
    border-color: rgba(90,154,90,0.35);
    box-shadow: inset 0 0 0 1px rgba(90,154,90,0.12);
}

.wf-overview-card.is-warn {
    border-color: rgba(196,90,74,0.35);
    box-shadow: inset 0 0 0 1px rgba(196,90,74,0.12);
}

.wf-overview-label {
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.wf-overview-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gold-light);
    line-height: 1.35;
}

.wf-overview-sub {
    font-size: 0.84rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.wf-section-heading {
    margin-bottom: 14px;
}

.wf-section-heading h3 {
    color: var(--gold);
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.wf-section-heading p {
    margin: 0;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.92rem;
}

.wf-axis-section {
    margin-bottom: 24px;
}

.wf-axis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wf-axis-card {
    border-radius: 12px;
    border: 1px solid rgba(108,92,231,0.14);
    background:
        linear-gradient(180deg, rgba(20,24,37,0.96), rgba(16,20,32,0.96)),
        radial-gradient(circle at top right, rgba(108,92,231,0.14), transparent 52%);
    padding: 16px 16px 14px;
}

.wf-axis-card.is-good {
    border-color: rgba(90,154,90,0.32);
}

.wf-axis-card.is-warn {
    border-color: rgba(196,90,74,0.32);
}

.wf-axis-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.wf-axis-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-light);
}

.wf-axis-score {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}

.wf-axis-headline {
    margin: 0 0 12px;
    color: var(--text);
    line-height: 1.6;
    font-size: 0.92rem;
}

.wf-axis-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-dim);
    line-height: 1.7;
    font-size: 0.86rem;
}

/* 일별 타임라인 */
.wf-daily-section {
    margin-bottom: 24px;
}
.wf-daily-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.wf-day-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 12px;
    text-align: left;
    transition: border-color 0.2s;
}
.wf-day-card:hover {
    border-color: var(--gold-dim);
}
.wf-day-best {
    border-color: var(--accent-green);
    background: rgba(90,154,90,0.06);
}
.wf-day-caution {
    border-color: var(--accent-red);
    background: rgba(196,90,74,0.06);
}
.wf-day-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.wf-day-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.wf-day-date {
    font-size: 0.75rem;
    color: var(--text-dim);
}
.wf-day-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.wf-badge-best {
    background: var(--accent-green);
    color: #fff;
}
.wf-badge-caution {
    background: var(--accent-red);
    color: #fff;
}
.wf-day-ganji {
    font-size: 0.9rem;
    color: var(--gold-light);
    font-weight: 600;
    margin-bottom: 6px;
}
.wf-day-score {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.wf-day-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    margin-bottom: 6px;
}
.wf-day-tag {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(108,92,231,0.1);
    color: var(--gold);
    border: 1px solid rgba(108,92,231,0.2);
}
.wf-day-text {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 10px 0 0;
    text-align: left;
}
.wf-day-summary {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.6;
    margin: 8px 0 0;
}
.wf-day-flow {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(108,92,231,0.06);
    border: 1px solid rgba(108,92,231,0.14);
    color: var(--gold-light);
    font-size: 0.8rem;
    line-height: 1.5;
}
.wf-day-insight {
    margin-top: 8px;
    color: var(--text-dim);
    font-size: 0.78rem;
    line-height: 1.55;
}
.wf-day-insight strong {
    color: var(--gold);
    font-weight: 700;
}
.wf-day-insight.is-caution strong {
    color: #d88d7f;
}
.wf-day-note {
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 10px 0 0;
    text-align: left;
}

/* 배경 카드 */
.wf-background-card h3 {
    color: var(--gold);
    margin-bottom: 14px;
}
.wf-bg-section {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: rgba(108,92,231,0.05);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 8px;
}
.wf-bg-section:last-child {
    margin-bottom: 0;
}
.wf-bg-label {
    font-size: 0.8rem;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.wf-bg-section p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* 주간 운세 반응형 */
@media (max-width: 1024px) {
    .wf-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wf-axis-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .wf-daily-timeline {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .wf-overview-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .wf-daily-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .wf-daily-timeline {
        grid-template-columns: repeat(1, 1fr);
    }
    .wf-header {
        padding: 24px 16px;
    }
    .wf-week-label {
        font-size: 1.2rem;
    }
}

/* ========== 월간 운세 (Monthly Fortune) ========== */
.mf-header {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 20px;
    margin-bottom: 20px;
}
.mf-month-label {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.mf-month-range {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin-bottom: 16px;
}
.mf-keywords {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.mf-keyword-badge {
    display: inline-block;
    background: rgba(108,92,231,0.12);
    color: var(--gold);
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(108,92,231,0.25);
}

/* 달력 그리드 */
.mf-calendar-section {
    margin-bottom: 24px;
}
.mf-calendar-section h3 {
    color: var(--gold);
    margin-bottom: 14px;
    font-size: 1.1rem;
}
.mf-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.mf-calendar-header {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dim);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.mf-hdr-sun { color: var(--accent-red); }
.mf-hdr-sat { color: #5b8dd9; }
.mf-day-empty {
    min-height: 1px;
}
.mf-day-cell {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 4px;
    text-align: center;
    cursor: default;
    transition: border-color 0.2s;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.mf-day-cell:hover {
    border-color: var(--gold-dim);
}
.mf-day-best {
    border-color: var(--accent-green);
    background: rgba(90,154,90,0.08);
}
.mf-day-caution {
    border-color: var(--accent-red);
    background: rgba(196,90,74,0.08);
}
.mf-cell-sun .mf-day-number { color: var(--accent-red); }
.mf-cell-sat .mf-day-number { color: #5b8dd9; }
.mf-day-number {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.mf-day-ganji {
    font-size: 0.75rem;
    color: var(--gold-light);
    font-weight: 600;
}
.mf-day-score {
    font-size: 0.85rem;
    font-weight: 800;
}
.mf-badge-best {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--accent-green);
    color: #fff;
    margin-top: 2px;
}
.mf-badge-caution {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--accent-red);
    color: #fff;
    margin-top: 2px;
}

/* Best/주의 요약 (2열) */
.mf-best-caution-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.mf-summary-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
}
.mf-summary-box h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.mf-summary-best h4 {
    color: var(--accent-green);
}
.mf-summary-caution h4 {
    color: var(--accent-red);
}
.mf-marked-day {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mf-marked-day:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.mf-marked-date {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-right: 8px;
}
.mf-marked-score {
    font-size: 0.85rem;
    font-weight: 800;
}
.mf-marked-reason {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 4px 0 0;
}

/* 절기 구간 */
.mf-phase-section {
    margin-bottom: 20px;
}
.mf-phase-section h3 {
    color: var(--gold);
    margin-bottom: 14px;
    font-size: 1.1rem;
}
.mf-phase-card {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: rgba(108,92,231,0.04);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 8px;
}
.mf-phase-card:last-child {
    margin-bottom: 0;
}
.mf-phase-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
}
.mf-phase-item {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 6px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.mf-phase-item:last-child {
    margin-bottom: 0;
}
.mf-phase-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gold);
    background: rgba(108,92,231,0.1);
    padding: 1px 8px;
    border-radius: 8px;
    border: 1px solid rgba(108,92,231,0.2);
    margin-right: 6px;
}

/* 배경 카드 */
.mf-background-card h3 {
    color: var(--gold);
    margin-bottom: 14px;
}
.mf-bg-section {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: rgba(108,92,231,0.05);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 8px;
}
.mf-bg-section:last-child {
    margin-bottom: 0;
}
.mf-bg-label {
    font-size: 0.8rem;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.mf-bg-section p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* 월간 운세 반응형 */
@media (max-width: 768px) {
    .mf-calendar-grid {
        gap: 4px;
    }
    .mf-day-cell {
        padding: 6px 2px;
        min-height: 65px;
    }
    .mf-day-number {
        font-size: 0.85rem;
    }
    .mf-day-ganji {
        font-size: 0.65rem;
    }
    .mf-day-score {
        font-size: 0.75rem;
    }
    .mf-best-caution-summary {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .mf-header {
        padding: 24px 16px;
    }
    .mf-month-label {
        font-size: 1.2rem;
    }
    .mf-calendar-grid {
        gap: 2px;
    }
    .mf-day-cell {
        padding: 4px 1px;
        min-height: 55px;
    }
    .mf-day-ganji {
        display: none;
    }
    .mf-day-number {
        font-size: 0.8rem;
    }
    .mf-day-score {
        font-size: 0.7rem;
    }
    .mf-badge-best, .mf-badge-caution {
        font-size: 0.5rem;
        padding: 0 4px;
    }
}

/* ========== 연간 운세 (Yearly Fortune) ========== */
.yf-header {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 20px;
    margin-bottom: 20px;
}
.yf-year-label {
    font-size: 1.6rem;
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.yf-year-range {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.yf-keywords {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.yf-keyword-badge {
    display: inline-block;
    background: rgba(108,92,231,0.12);
    color: var(--gold);
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 12개월 그리드 */
.yf-month-section h3 {
    color: var(--gold);
    margin-bottom: 16px;
    font-size: 1.1rem;
}
.yf-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: stretch;
}
.yf-month-cell {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 0;
}
.yf-month-cell:hover {
    border-color: var(--gold-dim);
    transform: translateY(-2px);
}
.yf-month-best {
    border-color: var(--accent-green);
    background: rgba(90,154,90,0.06);
}
.yf-month-best:hover {
    border-color: var(--accent-green);
}
.yf-month-caution {
    border-color: var(--accent-red);
    background: rgba(196,90,74,0.06);
}
.yf-month-caution:hover {
    border-color: var(--accent-red);
}
.yf-month-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 1px;
}
.yf-month-score {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
.yf-month-summary {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.4;
    word-break: keep-all;
    max-height: none;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: anywhere;
}
.yf-month-meta {
    font-size: 0.68rem;
    color: var(--gold-dim);
    line-height: 1.45;
    letter-spacing: 0.2px;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.yf-month-keywords {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.yf-kw-mini {
    font-size: 0.65rem;
    color: var(--gold-dim);
    background: rgba(108,92,231,0.08);
    padding: 1px 6px;
    border-radius: 8px;
}
.yf-badge-best {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--accent-green);
    color: #fff;
    margin-top: 2px;
}
.yf-badge-caution {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--accent-red);
    color: #fff;
    margin-top: 2px;
}

/* Best/주의 월 요약 (2열) */
.yf-best-caution-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.yf-summary-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
}
.yf-summary-box h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.yf-summary-best h4 {
    color: var(--accent-green);
}
.yf-summary-caution h4 {
    color: var(--accent-red);
}
.yf-marked-month {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.yf-marked-month:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.yf-marked-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-right: 8px;
}
.yf-marked-score {
    font-size: 0.85rem;
    font-weight: 800;
}
.yf-marked-reason {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 4px 0 0;
}

/* 상반기/하반기 비교 카드 */
.yf-halfyear-card h3 {
    color: var(--gold);
    margin-bottom: 16px;
    font-size: 1.1rem;
}
.yf-halfyear-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.yf-half-box {
    background: rgba(108,92,231,0.04);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
}
.yf-half-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.yf-half-score {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
}
.yf-half-summary {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.6;
    word-break: keep-all;
    margin: 0;
}

/* 배경 카드 */
.yf-background-card h3 {
    color: var(--gold);
    margin-bottom: 14px;
}
.yf-bg-section {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: rgba(108,92,231,0.05);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 8px;
}
.yf-bg-section:last-child {
    margin-bottom: 0;
}
.yf-bg-label {
    font-size: 0.8rem;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.yf-bg-section p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* 연간 운세 반응형 */
@media (max-width: 768px) {
    .yf-month-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 8px;
    }
    .yf-month-cell {
        padding: 12px 8px;
    }
    .yf-month-score {
        font-size: 1.3rem;
    }
    .yf-month-summary {
        font-size: 0.7rem;
    }
    .yf-month-meta {
        font-size: 0.63rem;
    }
    .yf-best-caution-summary {
        grid-template-columns: 1fr;
    }
    .yf-halfyear-grid {
        grid-template-columns: 1fr;
    }
    .yf-half-score {
        font-size: 2rem;
    }
}
@media (max-width: 480px) {
    .yf-header {
        padding: 24px 16px;
    }
    .yf-year-label {
        font-size: 1.3rem;
    }
    .yf-month-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .yf-month-cell {
        padding: 10px 6px;
    }
    .yf-month-score {
        font-size: 1.2rem;
    }
    .yf-month-summary {
        display: block;
        font-size: 0.74rem;
        line-height: 1.45;
    }
    .yf-month-meta {
        font-size: 0.6rem;
    }
    .yf-kw-mini {
        font-size: 0.6rem;
    }
    .yf-keyword-badge {
        font-size: 0.72rem;
        padding: 3px 10px;
    }
    .yf-badge-best, .yf-badge-caution {
        font-size: 0.55rem;
        padding: 1px 6px;
    }
}

/* ========== 옛 속설 이야기 ========== */

/* 날짜 구분선 */
.misin-date-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 20px;
}
.misin-date-separator:first-child {
    margin-top: 0;
}
.misin-date-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.misin-date-text {
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    white-space: nowrap;
    letter-spacing: 1px;
}

/* 피드 컨테이너 */
.misin-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 카드 */
.misin-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.misin-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--gold-dim);
    box-shadow: 0 6px 24px rgba(108,92,231,0.35);
    transform: translateY(-2px);
}

.misin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.misin-card-category {
    font-size: 0.8rem;
    color: var(--gold);
    background: rgba(108,92,231,0.08);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(108,92,231,0.15);
}
.misin-badge-new {
    background: var(--accent-red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    letter-spacing: 1px;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.misin-card-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
}
.misin-card-excerpt {
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.65;
    margin-bottom: 12px;
    word-break: keep-all;
}
.misin-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.misin-card-element {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.misin-card-element.element-wood  { background: rgba(76,175,80,0.12); color: #66bb6a; border: 1px solid rgba(76,175,80,0.2); }
.misin-card-element.element-fire  { background: rgba(244,67,54,0.12); color: #ef5350; border: 1px solid rgba(244,67,54,0.2); }
.misin-card-element.element-earth { background: rgba(108,92,231,0.12); color: var(--gold); border: 1px solid rgba(108,92,231,0.2); }
.misin-card-element.element-metal { background: rgba(189,189,189,0.12); color: #bdbdbd; border: 1px solid rgba(189,189,189,0.2); }
.misin-card-element.element-water { background: rgba(33,150,243,0.12); color: #42a5f5; border: 1px solid rgba(33,150,243,0.2); }

.misin-card-read {
    font-size: 0.8rem;
    color: var(--gold-dim);
    transition: color 0.2s;
}
.misin-card:hover .misin-card-read {
    color: var(--gold);
}

/* 상세보기 — 옛 서적 스타일 */
.misin-detail {
    animation: fadeIn 0.5s ease;
}
.misin-detail-content {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(108,92,231,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(108,92,231,0.04) 0%, transparent 50%),
        linear-gradient(180deg, #0e1120 0%, #0c0f1a 40%, #0e1120 100%);
    border: 1px solid rgba(108,92,231,0.18);
    border-radius: 12px;
    padding: 36px 30px;
    margin-top: 12px;
    position: relative;
    box-shadow:
        inset 0 0 60px rgba(108,92,231,0.03),
        0 2px 20px rgba(0,0,0,0.4);
}
/* 고서 안쪽 테두리 */
.misin-detail-content::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(108,92,231,0.1);
    border-radius: 10px;
    pointer-events: none;
}
/* 상단 장식 */
.misin-detail-content::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 0.55rem;
    color: rgba(108,92,231,0.35);
    background: #0e1120;
    padding: 0 8px;
}
.misin-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.misin-detail-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--gold-light);
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(108,92,231,0.15);
    line-height: 1.5;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
}
.misin-detail-title::after {
    content: '';
    display: block;
    color: rgba(108,92,231,0.2);
    font-size: 0.5rem;
    letter-spacing: 6px;
    margin-top: 12px;
    text-align: center;
}
.misin-detail-body {
    background:
        linear-gradient(135deg, rgba(108,92,231,0.03) 0%, transparent 50%, rgba(108,92,231,0.02) 100%);
    border: 1px solid rgba(108,92,231,0.1);
    border-radius: 12px;
    padding: 28px 24px;
    margin-bottom: 24px;
    font-size: 1rem;
    color: var(--text);
    line-height: 2;
    word-break: keep-all;
    text-indent: 1em;
    position: relative;
}
.misin-detail-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold-dim) 0%, transparent 100%);
    border-radius: 12px;
}
.misin-detail-section {
    background:
        linear-gradient(135deg, rgba(108,92,231,0.04) 0%, transparent 60%),
        rgba(14,17,32,0.5);
    border: 1px solid rgba(108,92,231,0.12);
    border-radius: 12px;
    padding: 22px 22px;
    margin-bottom: 16px;
    position: relative;
}
.misin-detail-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    border-radius: 12px;
}
.misin-detail-section:nth-of-type(1)::before {
    background: linear-gradient(180deg, rgba(33,150,243,0.5) 0%, transparent 100%);
}
.misin-detail-section:nth-of-type(2)::before {
    background: linear-gradient(180deg, rgba(76,175,80,0.5) 0%, transparent 100%);
}
.misin-section-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(108,92,231,0.08);
}
.misin-detail-section p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.85;
    word-break: keep-all;
}

/* 프로필 이미지 */
.misin-profile {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(108,92,231,0.3);
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.misin-profile-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(108,92,231,0.35);
    object-fit: cover;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}
.misin-intro-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.misin-intro-profile-name {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold-light);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.misin-intro-profile-sub {
    color: var(--text-dim);
    font-size: 0.78rem;
    margin-top: 2px;
}

/* 카드 내 프로필 */
.misin-card-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.misin-card-text {
    flex: 1;
    min-width: 0;
}

/* 상세페이지 프로필 */
.misin-detail-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.misin-detail-profile-info {
    display: flex;
    flex-direction: column;
}
.misin-detail-profile-name {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold-light);
    font-size: 0.9rem;
    font-weight: 700;
}
.misin-detail-profile-date {
    color: var(--text-dim);
    font-size: 0.78rem;
    margin-top: 3px;
}

/* 더 보기 버튼 */
.misin-load-more {
    text-align: center;
    padding: 24px 0 40px;
}

/* btn-gold 스타일 */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 36px;
    background: linear-gradient(135deg, rgba(108,92,231,0.08) 0%, rgba(108,92,231,0.15) 100%);
    color: var(--gold);
    border: 1px solid rgba(108,92,231,0.3);
    border-radius: var(--radius);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.btn-gold::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(108,92,231,0.1), transparent);
    transition: left 0.5s ease;
}
.btn-gold:hover {
    background: linear-gradient(135deg, rgba(108,92,231,0.15) 0%, rgba(108,92,231,0.25) 100%);
    border-color: rgba(108,92,231,0.5);
    color: var(--gold-light);
    box-shadow: 0 0 20px rgba(108,92,231,0.15), var(--shadow-gold);
    transform: translateY(-1px);
}
.btn-gold:hover::before {
    left: 100%;
}
.btn-gold:active {
    transform: translateY(0) scale(0.98);
}

/* 카드 링크 스타일 (개별 URL) */
.misin-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 면책조항 */
.misin-disclaimer {
    margin-top: 24px;
    padding: 16px 12px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.3);
    border-top: 1px solid rgba(108,92,231,0.08);
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.5px;
    font-style: italic;
}

/* 뒤로가기 링크 (a 태그) */
.ddi-detail-back {
    display: inline-block;
    text-decoration: none;
    color: var(--gold-dim);
    font-size: 0.9rem;
    padding: 8px 0;
    margin-bottom: 8px;
    transition: color 0.2s;
}
.ddi-detail-back:hover {
    color: var(--gold);
}

/* 반응형 */
@media (max-width: 640px) {
    .misin-card { padding: 16px; }
    .misin-card-title { font-size: 1rem; }
    .misin-card-excerpt { font-size: 0.85rem; }
    .misin-detail-content { padding: 24px 18px; }
    .misin-detail-title { font-size: 1.15rem; letter-spacing: 1px; }
    .misin-detail-body { font-size: 0.95rem; line-height: 1.85; padding: 22px 18px; }
    .misin-date-text { font-size: 0.82rem; }
    .misin-profile { width: 44px; height: 44px; }
    .misin-profile-lg { width: 56px; height: 56px; }
    .misin-card-body { gap: 12px; }
    .btn-gold { padding: 12px 28px; font-size: 0.85rem; }
}

/* ========== 꿈해몽 ========== */

/* 날짜 구분선 */
.dream-date-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 20px;
}
.dream-date-separator:first-child {
    margin-top: 0;
}
.dream-date-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.dream-date-text {
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    white-space: nowrap;
    letter-spacing: 1px;
}

/* 피드 컨테이너 */
.dream-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 카드 */
.dream-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.dream-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--gold-dim);
    box-shadow: 0 6px 24px rgba(108,92,231,0.35);
    transform: translateY(-2px);
}

.dream-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.dream-card-category {
    font-size: 0.8rem;
    color: var(--gold);
    background: rgba(108,92,231,0.08);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(108,92,231,0.15);
}
.dream-badge-new {
    background: var(--accent-red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    letter-spacing: 1px;
    animation: pulse 2s infinite;
}

.dream-card-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
}
.dream-card-excerpt {
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.65;
    margin-bottom: 12px;
    word-break: keep-all;
}
.dream-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dream-card-luck {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.dream-card-luck.luck-길몽 { background: rgba(76,175,80,0.12); color: #66bb6a; border: 1px solid rgba(76,175,80,0.2); }
.dream-card-luck.luck-흉몽 { background: rgba(244,67,54,0.12); color: #ef5350; border: 1px solid rgba(244,67,54,0.2); }
.dream-card-luck.luck-보통 { background: rgba(108,92,231,0.12); color: var(--gold); border: 1px solid rgba(108,92,231,0.2); }

.dream-card-read {
    font-size: 0.8rem;
    color: var(--gold-dim);
    transition: color 0.2s;
}
.dream-card:hover .dream-card-read {
    color: var(--gold);
}

/* 상세보기 */
.dream-detail-content {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(100,80,200,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(100,80,200,0.04) 0%, transparent 50%),
        linear-gradient(180deg, #0e1120 0%, #0c0f1a 40%, #0e1120 100%);
    border: 1px solid rgba(108,92,231,0.18);
    border-radius: 12px;
    padding: 36px 30px;
    margin-top: 12px;
    position: relative;
    box-shadow:
        inset 0 0 60px rgba(108,92,231,0.03),
        0 2px 20px rgba(0,0,0,0.4);
}
.dream-detail-content::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(108,92,231,0.1);
    border-radius: 10px;
    pointer-events: none;
}
.dream-detail-content::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 0.7rem;
    color: rgba(108,92,231,0.35);
    background: #0e1120;
    padding: 0 8px;
}
.dream-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.dream-detail-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--gold-light);
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(108,92,231,0.15);
    line-height: 1.5;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
}
.dream-detail-title::after {
    content: '';
    display: block;
    color: rgba(108,92,231,0.2);
    font-size: 0.5rem;
    letter-spacing: 6px;
    margin-top: 12px;
    text-align: center;
}
.dream-detail-body {
    background:
        linear-gradient(135deg, rgba(108,92,231,0.03) 0%, transparent 50%, rgba(108,92,231,0.02) 100%);
    border: 1px solid rgba(108,92,231,0.1);
    border-radius: 12px;
    padding: 28px 24px;
    margin-bottom: 24px;
    font-size: 1rem;
    color: var(--text);
    line-height: 2;
    word-break: keep-all;
    text-indent: 1em;
    position: relative;
}
.dream-detail-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold-dim) 0%, transparent 100%);
    border-radius: 12px;
}
.dream-detail-section {
    background:
        linear-gradient(135deg, rgba(108,92,231,0.04) 0%, transparent 60%),
        rgba(14,17,32,0.5);
    border: 1px solid rgba(108,92,231,0.12);
    border-radius: 12px;
    padding: 22px 22px;
    margin-bottom: 16px;
    position: relative;
}
.dream-detail-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    border-radius: 12px;
}
.dream-detail-section:nth-of-type(1)::before {
    background: linear-gradient(180deg, rgba(120,80,220,0.5) 0%, transparent 100%);
}
.dream-detail-section:nth-of-type(2)::before {
    background: linear-gradient(180deg, rgba(76,175,80,0.5) 0%, transparent 100%);
}
.dream-section-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(108,92,231,0.08);
}
.dream-detail-section p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.85;
    word-break: keep-all;
}

/* 프로필 이미지 */
.dream-profile {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(108,92,231,0.3);
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.dream-profile-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(108,92,231,0.35);
    object-fit: cover;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}

/* 카드 내 프로필 */
.dream-card-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.dream-card-text {
    flex: 1;
    min-width: 0;
}

/* 상세페이지 프로필 */
.dream-detail-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.dream-detail-profile-info {
    display: flex;
    flex-direction: column;
}
.dream-detail-profile-name {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gold-light);
    font-size: 0.9rem;
    font-weight: 700;
}
.dream-detail-profile-date {
    color: var(--text-dim);
    font-size: 0.78rem;
    margin-top: 3px;
}

/* 더 보기 버튼 */
.dream-load-more {
    text-align: center;
    padding: 24px 0 40px;
}

/* 카드 링크 스타일 */
.dream-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 꿈 검색 */
.dream-search-box {
    margin-bottom: 24px;
}
.dream-search-inner {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.3s;
}
.dream-search-inner:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(108,92,231,0.15);
}
.dream-search-icon {
    padding: 0 12px 0 16px;
    font-size: 1.1rem;
    color: var(--gold-dim);
    flex-shrink: 0;
}
.dream-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 0.95rem;
    padding: 14px 8px;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dream-search-input::placeholder {
    color: var(--text-dim);
    font-size: 0.88rem;
}
.dream-search-btn {
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(108,92,231,0.15) 0%, rgba(108,92,231,0.25) 100%);
    color: var(--gold);
    border: none;
    border-left: 1px solid rgba(108,92,231,0.2);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.dream-search-btn:hover {
    background: linear-gradient(135deg, rgba(108,92,231,0.25) 0%, rgba(108,92,231,0.4) 100%);
    color: var(--gold-light);
}
.dream-search-status {
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--text-dim);
    padding: 8px 0;
}
.dream-search-status strong {
    color: var(--gold);
}
.dream-search-clear {
    background: none;
    border: 1px solid rgba(108,92,231,0.25);
    color: var(--gold-dim);
    font-size: 0.8rem;
    padding: 3px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s;
}
.dream-search-clear:hover {
    background: rgba(108,92,231,0.1);
    color: var(--gold);
}

@media (max-width: 640px) {
    .dream-search-input { font-size: 0.88rem; padding: 12px 8px; }
    .dream-search-btn { padding: 12px 16px; font-size: 0.82rem; }
    .dream-search-input::placeholder { font-size: 0.8rem; }
}

/* 면책조항 */
.dream-disclaimer {
    margin-top: 24px;
    padding: 16px 12px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.3);
    border-top: 1px solid rgba(108,92,231,0.08);
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.5px;
    font-style: italic;
}

/* 반응형 */
@media (max-width: 640px) {
    .dream-card { padding: 16px; }
    .dream-card-title { font-size: 1rem; }
    .dream-card-excerpt { font-size: 0.85rem; }
    .dream-detail-content { padding: 24px 18px; }
    .dream-detail-title { font-size: 1.15rem; letter-spacing: 1px; }
    .dream-detail-body { font-size: 0.95rem; line-height: 1.85; padding: 22px 18px; }
    .dream-date-text { font-size: 0.82rem; }
    .dream-profile { width: 44px; height: 44px; }
    .dream-profile-lg { width: 56px; height: 56px; }
    .dream-card-body { gap: 12px; }
}

/* ========== 팝업 공지 ========== */
.hs-notice-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overscroll-behavior: contain;
}
.hs-notice-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.hs-notice-popup {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 380px;
}
.hs-notice-box {
    background:
        linear-gradient(135deg, rgba(108,92,231,0.06) 0%, transparent 40%),
        linear-gradient(180deg, #1a1f30 0%, #161b2e 100%);
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: 16px;
    max-width: 380px;
    width: 100%;
    overflow: hidden;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.6),
        0 0 40px rgba(108,92,231,0.08),
        inset 0 1px 0 rgba(108,92,231,0.1);
    transform: scale(0.9) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    will-change: transform;
    scrollbar-width: thin;
    scrollbar-color: rgba(108,92,231,0.25) transparent;
}
.hs-notice-overlay.active .hs-notice-box {
    transform: scale(1) translateY(0);
}
.hs-notice-image {
    width: 100%;
    overflow: hidden;
    min-height: 60px;
    background: #161b2e;
}
.hs-notice-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 300px;
}
.hs-notice-image a {
    display: block;
}
.hs-notice-title {
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    padding: 18px 22px 0;
    line-height: 1.4;
}
.hs-notice-content {
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.7;
    padding: 12px 22px 0;
    word-break: keep-all;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(108,92,231,0.25) transparent;
}
.hs-notice-link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 8px 22px 0;
    color: var(--gold);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(108,92,231,0.3);
    padding: 8px 0;
    transition: color 0.2s;
}
.hs-notice-link-btn:hover {
    color: var(--gold-light);
}
.hs-notice-btns {
    display: flex;
    border-top: 1px solid rgba(108,92,231,0.12);
    margin-top: 18px;
}
.hs-notice-btn {
    flex: 1;
    padding: 14px 0;
    min-height: 44px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    line-height: 1.2;
}
.hs-notice-btn.dismiss {
    background: transparent;
    color: var(--text-dim);
    border-right: 1px solid rgba(108,92,231,0.12);
}
.hs-notice-btn.dismiss:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}
.hs-notice-btn.close {
    background: transparent;
    color: var(--gold);
}
.hs-notice-btn.close:hover {
    background: rgba(108,92,231,0.08);
}
/* 태블릿 */
@media (max-width: 768px) {
    .hs-notice-popup { max-width: 360px; }
    .hs-notice-box { max-width: 360px; }
    .hs-notice-title { font-size: 1rem; padding: 16px 20px 0; }
    .hs-notice-content { padding: 10px 20px 0; max-height: 180px; }
}
/* 모바일 */
@media (max-width: 480px) {
    .hs-notice-overlay { padding: 16px; }
    .hs-notice-popup { max-width: 320px; }
    .hs-notice-box { max-width: 320px; max-height: calc(100vh - 32px); }
    .hs-notice-title { font-size: 0.95rem; padding: 14px 18px 0; }
    .hs-notice-content { font-size: 0.82rem; padding: 10px 18px 0; max-height: 150px; }
    .hs-notice-image img { max-height: 240px; }
    .hs-notice-link-btn { margin: 6px 18px 0; }
}
/* 초소형 화면 */
@media (max-width: 360px) {
    .hs-notice-overlay { padding: 10px; }
    .hs-notice-popup { max-width: 300px; }
    .hs-notice-box { max-width: 300px; max-height: calc(100vh - 20px); }
    .hs-notice-title { font-size: 0.9rem; padding: 12px 14px 0; }
    .hs-notice-content { font-size: 0.78rem; padding: 8px 14px 0; max-height: 120px; }
    .hs-notice-btn { font-size: 0.78rem; padding: 12px 0; }
    .hs-notice-image img { max-height: 200px; }
}
/* 접근성: 모션 축소 선호 */
@media (prefers-reduced-motion: reduce) {
    .hs-notice-overlay { transition: none; }
    .hs-notice-box { transition: none; transform: none; }
}

/* ========== 커스텀 모달 (HelloWebTools 테마) ========== */
.hs-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.hs-modal-overlay.active {
    opacity: 1;
}
.hs-modal {
    background:
        linear-gradient(135deg, rgba(108,92,231,0.06) 0%, transparent 40%),
        linear-gradient(180deg, #1a1f30 0%, #12110e 100%);
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: 16px;
    padding: 32px 28px 24px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.6),
        0 0 40px rgba(108,92,231,0.08),
        inset 0 1px 0 rgba(108,92,231,0.1);
    transform: scale(0.9) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.hs-modal-overlay.active .hs-modal {
    transform: scale(1) translateY(0);
}
.hs-modal::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    border: 1px solid rgba(108,92,231,0.06);
    border-radius: 13px;
    pointer-events: none;
}
.hs-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 1.5rem;
}
.hs-modal-icon.success {
    background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(108,92,231,0.08));
    border: 1px solid rgba(108,92,231,0.3);
    box-shadow: 0 0 20px rgba(108,92,231,0.1);
}
.hs-modal-icon.error {
    background: linear-gradient(135deg, rgba(244,67,54,0.15), rgba(244,67,54,0.08));
    border: 1px solid rgba(244,67,54,0.3);
    box-shadow: 0 0 20px rgba(244,67,54,0.1);
}
.hs-modal-icon.info {
    background: linear-gradient(135deg, rgba(33,150,243,0.15), rgba(33,150,243,0.08));
    border: 1px solid rgba(33,150,243,0.3);
    box-shadow: 0 0 20px rgba(33,150,243,0.1);
}
.hs-modal-icon.warning {
    background: linear-gradient(135deg, rgba(255,152,0,0.15), rgba(255,152,0,0.08));
    border: 1px solid rgba(255,152,0,0.3);
    box-shadow: 0 0 20px rgba(255,152,0,0.1);
}
.hs-modal-icon.copy {
    background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(108,92,231,0.08));
    border: 1px solid rgba(108,92,231,0.3);
    box-shadow: 0 0 20px rgba(108,92,231,0.1);
}
.hs-modal-msg {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 24px;
    word-break: keep-all;
    white-space: pre-line;
}
.hs-modal-btn {
    display: inline-block;
    min-width: 120px;
    padding: 11px 32px;
    background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-light) 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: #0c0f1a;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.hs-modal-btn:hover {
    background-position: 100% 50%;
    box-shadow: 0 4px 16px rgba(108,92,231,0.3);
}
.hs-modal-btn:active {
    transform: scale(0.96);
}
.hs-modal-btn.secondary {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid rgba(255,255,255,0.12);
    margin-right: 10px;
}
.hs-modal-btn.secondary:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    box-shadow: none;
}
.hs-modal-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
@media (max-width: 640px) {
    .hs-modal { padding: 28px 22px 20px; max-width: 300px; }
    .hs-modal-msg { font-size: 0.9rem; }
    .hs-modal-btn { padding: 10px 24px; font-size: 0.85rem; }
}

/* ========== 광고 슬롯 ========== */
.ad-slot {
    margin: 16px 0;
    text-align: center;
    overflow: hidden;
    min-height: 90px;
    contain: layout style;
}
.ad-slot-top { margin-bottom: 20px; }
.ad-slot-middle { margin-top: 20px; }
.ad-slot-bottom { margin-top: 24px; margin-bottom: 8px; }
.ad-slot-sidebar { margin-top: 16px; }
.ad-slot:empty { min-height: 0; margin: 0; display: none; }
.ad-slot-result {
    margin: 20px 0;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.nav-ad-slot {
    padding: 16px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 8px;
}
.nav-ad-slot .ad-slot {
    min-height: 50px;
    margin: 0;
}

/* ========== IMA SDK 동영상 광고 오버레이 ========== */
.ima-ad-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.95);
    justify-content: center;
    align-items: center;
}
.ima-ad-overlay.active {
    display: flex;
}
.ima-ad-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.ima-ad-element {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.ima-content-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}
.ima-ad-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 100001;
    background: rgba(0,0,0,0.6);
    border: none;
    color: #fff;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s;
}
.ima-ad-close:hover {
    background: rgba(255,255,255,0.2);
}
@media (max-width: 680px) {
    .ima-ad-container {
        max-width: 100%;
        border-radius: 0;
    }
}

/* ========== [2단계] 분석 로딩 화면 ========== */
.analysis-loading {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 1100;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.analysis-loading.active {
    display: flex;
    opacity: 1;
}

/* 상단/하단 배너 광고 */
.analysis-ad-banner {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.analysis-ad-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.analysis-ad-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.analysis-ad-placeholder-bar {
    width: 100%;
    height: 90px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
}
.analysis-ad-placeholder-bar span {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.12);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 중앙: 음양 애니메이션 + 메시지 */
.analysis-loading-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    text-align: center;
    gap: 16px;
}
.analysis-yinyang {
    width: 72px;
    height: 72px;
    animation: spin 3s linear infinite;
    opacity: 0.9;
}
.analysis-yinyang svg {
    width: 100%;
    height: 100%;
}
.analysis-loading-msg {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.analysis-loading-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
}
.analysis-step {
    color: rgba(255, 255, 255, 0.25);
    transition: color 0.3s ease;
}
.analysis-step.active {
    color: var(--gold);
    font-weight: 600;
}
.analysis-step.done {
    color: rgba(255, 255, 255, 0.5);
}
.analysis-step-dot {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.7rem;
}
.analysis-loading-center .analysis-progress-bar {
    width: 200px;
    max-width: 80%;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}
.analysis-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), #00cec9);
    border-radius: 12px;
    transition: width 0.3s linear;
}
.analysis-progress-text {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

/* 리워드 광고 버튼 스타일 */
.reward-ad-btn .reward-btn-icon {
    font-size: 0.7em;
    margin-right: 4px;
    opacity: 0.8;
}

@media (max-width: 480px) {
    .analysis-loading-msg { font-size: 0.95rem; }
    .analysis-yinyang { width: 60px; height: 60px; }
}

/* ===== 서양 점성술 (Premium) ===== */
.astro-chart-card { text-align: center; }
.astro-glow-title {
    background: linear-gradient(90deg, #a29bfe, #a29bfe, #a29bfe);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.3em;
}
.astro-meta {
    color: #9ba3bf; font-size: 0.88em; margin: -4px 0 16px;
}
.astro-natal-svg-wrap {
    max-width: 480px; margin: 0 auto; padding: 10px;
}
.natal-chart-svg { width: 100%; height: auto; }
.astro-big3 {
    display: flex; justify-content: center; gap: 16px;
    margin: 20px 0; flex-wrap: wrap;
}
.astro-big3-item {
    display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(145deg, #0e1120 0%, #141825 50%, #161b2e 100%);
    border: 1px solid #1e2235; border-radius: 18px;
    padding: 20px 26px; min-width: 105px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.astro-big3-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.astro-big3-icon { font-size: 2.6em; margin-bottom: 8px; }
.astro-icon-big3 { width: 52px; height: 52px; margin-bottom: 8px; object-fit: contain; }
.astro-icon-sm { width: 20px; height: 20px; vertical-align: middle; object-fit: contain; margin-right: 2px; }
.astro-icon-xs { width: 16px; height: 16px; vertical-align: middle; object-fit: contain; margin-right: 1px; }
.astro-big3-label {
    font-size: 0.75em; color: #9ba3bf; margin-bottom: 4px;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.astro-big3-sign { font-size: 1.15em; font-weight: 700; }
.astro-big3-desc {
    font-size: 0.7em; color: #636e88; margin-top: 6px;
    text-align: center; line-height: 1.3;
}
.astro-table-wrap { overflow-x: auto; }
.astro-planet-table {
    width: 100%; border-collapse: collapse; margin-top: 12px;
}
.astro-planet-table th,
.astro-planet-table td {
    padding: 10px 10px; text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.9em;
}
.astro-planet-table th {
    color: #636e88; font-weight: 600; font-size: 0.8em;
    text-transform: uppercase; letter-spacing: 0.5px;
    background: rgba(255,255,255,0.02);
}
.astro-planet-table td:first-child { text-align: left; font-weight: 600; }
.astro-planet-table tr:hover { background: rgba(255,255,255,0.03); }
.astro-deg { font-family: 'Courier New', monospace; font-size: 0.85em; color: #9ba3bf; }
.astro-retro {
    display: inline-block; color: #e57373; font-weight: 700;
    font-size: 0.85em; animation: retroPulse 2s infinite;
}
@keyframes retroPulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
/* 원소 & 양식 분포 */
.astro-distribution { display: flex; gap: 24px; flex-wrap: wrap; }
.astro-dist-section { flex: 1; min-width: 200px; }
.astro-dist-section h4 { color: #a29bfe; font-size: 0.95em; margin-bottom: 12px; }
.astro-bars { display: flex; flex-direction: column; gap: 8px; }
.astro-bar-row { display: flex; align-items: center; gap: 10px; }
.astro-bar-label { min-width: 75px; font-size: 0.82em; color: #aaa; }
.astro-bar-track {
    flex: 1; height: 10px; background: rgba(255,255,255,0.06);
    border-radius: 5px; overflow: hidden;
}
.astro-bar-fill {
    height: 100%; border-radius: 5px;
    transition: width 0.8s ease-out;
}
.astro-bar-count { min-width: 20px; text-align: right; font-size: 0.85em; color: #9ba3bf; font-weight: 600; }
/* 섹션 */
.astro-section {
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.astro-section:last-child { border-bottom: none; margin-bottom: 0; }
.astro-section h4 {
    color: #a29bfe; font-size: 1.05em; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.astro-text { line-height: 1.8; color: #ccc; font-size: 0.93em; }
.astro-subtitle { color: #9ba3bf; font-size: 0.88em; margin-bottom: 12px; font-style: italic; }
.astro-dignity {
    font-size: 0.78em; color: #a29bfe; background: rgba(240,198,116,0.12);
    padding: 2px 10px; border-radius: 10px;
}
.astro-house-area {
    font-size: 0.78em; color: #90caf9; background: rgba(144,202,249,0.12);
    padding: 2px 10px; border-radius: 10px; margin-left: 6px;
}
.astro-harmony {
    font-size: 0.78em; color: #81c784; background: rgba(129,199,132,0.12);
    padding: 2px 10px; border-radius: 10px;
}
.astro-tension {
    font-size: 0.78em; color: #e57373; background: rgba(229,115,115,0.12);
    padding: 2px 10px; border-radius: 10px;
}
.astro-neutral {
    font-size: 0.78em; color: #90caf9; background: rgba(144,202,249,0.12);
    padding: 2px 10px; border-radius: 10px;
}
/* Aspect 그리드 (DB 없을 때) */
.astro-aspect-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.astro-aspect-item {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 8px 14px; font-size: 0.88em;
}

/* ========== 트랜짓 운세 (Transit Forecast) ========== */
.astro-forecast-card {
    border: 1px solid rgba(232,213,183,0.15);
    background: linear-gradient(135deg, rgba(26,26,62,0.8), rgba(13,13,26,0.9));
}
.astro-forecast-tabs {
    display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap;
}
.astro-forecast-tab {
    flex: 1; min-width: 70px; padding: 10px 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; color: var(--text-dim); font-size: 0.9rem;
    cursor: pointer; transition: all 0.25s; text-align: center;
}
.astro-forecast-tab:hover {
    background: rgba(255,255,255,0.08); color: var(--text);
}
.astro-forecast-tab.active {
    background: rgba(232,213,183,0.12); border-color: rgba(232,213,183,0.4);
    color: #a29bfe; font-weight: 600;
    box-shadow: 0 0 12px rgba(232,213,183,0.15);
}
/* 잠긴 탭 스타일 */
.astro-forecast-tab.locked {
    position: relative;
    opacity: 0.65;
}
.astro-forecast-tab.locked:hover {
    opacity: 0.85;
}
.tab-lock-icon {
    font-size: 0.7rem;
    vertical-align: middle;
    margin-left: 2px;
}
/* 확인/취소 모달 버튼 그룹 */
.hs-modal-btn-group {
    display: flex; gap: 10px; justify-content: center; margin-top: 16px;
}
.hs-modal-btn-yes {
    flex: 1; max-width: 120px; padding: 10px 0;
    background: linear-gradient(135deg, #a29bfe, #5a4fcf);
    color: #0c0f1a; font-weight: 700; font-size: 0.95rem;
    border: none; border-radius: 8px; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.hs-modal-btn-yes:hover {
    transform: scale(1.04);
    box-shadow: 0 2px 12px rgba(232,213,183,0.3);
}
.hs-modal-btn-no {
    flex: 1; max-width: 120px; padding: 10px 0;
    background: rgba(255,255,255,0.06);
    color: var(--text-dim); font-weight: 600; font-size: 0.95rem;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; cursor: pointer;
    transition: background 0.15s;
}
.hs-modal-btn-no:hover {
    background: rgba(255,255,255,0.12);
}
.astro-forecast-body {
    min-height: 120px;
}
.astro-forecast-loading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 40px 0; color: var(--text-dim); font-size: 0.95rem;
}
.loading-spinner-sm {
    width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.1);
    border-top-color: #a29bfe; border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.astro-forecast-placeholder {
    text-align: center; padding: 40px 0; color: var(--text-dim); font-size: 0.9rem;
}
.astro-forecast-error {
    text-align: center; padding: 30px 0; color: #f87171; font-size: 0.9rem;
}
/* 데이터 부족 상태 */
.astro-forecast-insufficient {
    text-align: center; padding: 36px 20px; margin: 16px 0;
    background: rgba(251, 191, 36, 0.06);
    border: 1px dashed rgba(251, 191, 36, 0.25);
    border-radius: 12px;
}
.astro-forecast-insufficient .insufficient-icon {
    font-size: 2.8rem; margin-bottom: 12px;
}
.astro-forecast-insufficient .insufficient-title {
    font-size: 1.1rem; font-weight: 700; color: var(--text-main);
    margin-bottom: 8px;
}
.astro-forecast-insufficient .insufficient-desc {
    font-size: 0.85rem; color: var(--text-dim); margin-bottom: 10px;
}
.astro-forecast-insufficient .insufficient-hint {
    font-size: 0.82rem; color: var(--text-dim); opacity: 0.75;
    line-height: 1.5;
}
/* 트랜짓 기준 날짜 표시 */
.astro-forecast-date-info {
    text-align: center; font-size: 0.78rem; color: var(--text-dim);
    opacity: 0.6; margin-bottom: 8px;
}

/* ── 생시 미입력 경고 배너 ── */
.astro-unknown-time-warn {
    background: rgba(251, 146, 60, 0.08);
    border: 1px solid rgba(251, 146, 60, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.unknown-time-badge {
    flex-shrink: 0;
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
.unknown-time-text {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.55;
}
.unknown-time-text strong {
    color: #fb923c;
}

/* 근사치 뱃지 (인라인) */
.astro-approx-badge {
    display: inline-block;
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;
}

/* 근사치 경고 알림 (섹션 내) */
.astro-approx-notice {
    background: rgba(251, 146, 60, 0.06);
    border: 1px dashed rgba(251, 146, 60, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #fb923c;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* 근사치 섹션 (테두리 표시) */
.astro-approx-section {
    border-color: rgba(251, 146, 60, 0.2) !important;
}

/* Big3 근사치 디밍 */
.astro-big3-item.astro-approx-dim {
    opacity: 0.7;
    position: relative;
}
.astro-big3-item.astro-approx-dim::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(251, 146, 60, 0.35);
    border-radius: inherit;
    pointer-events: none;
}

/* 종합 점수 원형 */
.astro-forecast-total {
    text-align: center; margin: 20px 0 24px;
}
.astro-forecast-total-label {
    font-size: 1.05rem; color: var(--text-dim); margin-bottom: 12px;
}
.astro-forecast-score-circle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 120px; height: 120px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.1);
    background: radial-gradient(circle, rgba(255,255,255,0.05), transparent);
    position: relative;
}
.astro-forecast-score-circle.score-high {
    border-color: rgba(74,222,128,0.5);
    box-shadow: 0 0 30px rgba(74,222,128,0.15);
}
.astro-forecast-score-circle.score-mid {
    border-color: rgba(251,191,36,0.5);
    box-shadow: 0 0 30px rgba(251,191,36,0.15);
}
.astro-forecast-score-circle.score-low {
    border-color: rgba(248,113,113,0.5);
    box-shadow: 0 0 30px rgba(248,113,113,0.15);
}
.score-emoji { font-size: 1.4rem; line-height: 1; }
.score-number { font-size: 2rem; font-weight: 700; color: #a29bfe; line-height: 1.1; }
.score-unit { font-size: 0.8rem; color: var(--text-dim); }

/* 카테고리 점수 바 */
.astro-forecast-categories {
    display: flex; flex-direction: column; gap: 10px; margin: 16px 0;
}
.astro-forecast-cat-row {
    display: flex; align-items: center; gap: 10px;
}
.cat-icon { width: 20px; text-align: center; font-size: 1rem; }
.cat-label { width: 50px; font-size: 0.88rem; color: var(--text-dim); }
.cat-bar-track {
    flex: 1; height: 8px; background: rgba(255,255,255,0.06);
    border-radius: 4px; overflow: hidden;
}
.cat-bar-fill {
    height: 100%; border-radius: 4px;
    transition: width 0.8s ease-out;
}
.cat-bar-fill.bar-high { opacity: 0.9; }
.cat-bar-fill.bar-mid { opacity: 0.7; }
.cat-bar-fill.bar-low { opacity: 0.5; }
.cat-score {
    width: 30px; text-align: right; font-size: 0.88rem; font-weight: 600; color: var(--text);
}

/* 카테고리별 운세 메시지 */
.astro-forecast-messages {
    display: flex; flex-direction: column; gap: 12px; margin: 20px 0;
}
.astro-forecast-msg {
    padding: 14px 18px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.astro-forecast-msg h4 {
    margin: 0 0 8px; font-size: 0.95rem; color: var(--text);
}
.astro-forecast-msg p {
    margin: 0; font-size: 0.9rem; color: var(--text-dim); line-height: 1.65;
}
.astro-forecast-msg.tone-positive {
    border-color: rgba(74,222,128,0.15); background: rgba(74,222,128,0.03);
}
.astro-forecast-msg.tone-cautious {
    border-color: rgba(251,191,36,0.12); background: rgba(251,191,36,0.02);
}

/* 주요 천체 이벤트 */
.astro-forecast-highlights {
    margin: 20px 0;
}
.astro-forecast-highlights h4 {
    font-size: 1rem; color: #a29bfe; margin: 0 0 12px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.astro-highlight-item {
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.astro-highlight-item:last-child { border-bottom: none; }
.highlight-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    font-size: 0.92rem; margin-bottom: 6px;
}
.highlight-kw {
    font-size: 0.78rem; color: var(--text-dim); background: rgba(255,255,255,0.05);
    padding: 2px 8px; border-radius: 8px; margin-left: 4px;
}
.highlight-text {
    font-size: 0.88rem; color: var(--text-dim); line-height: 1.6;
}

/* 트랜짓 행성 섹션 */
.astro-forecast-section {
    margin: 20px 0;
}
.astro-forecast-section h4 {
    font-size: 1rem; color: #a29bfe; margin: 0 0 12px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.astro-transit-item {
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.astro-transit-item:last-child { border-bottom: none; }
.transit-item-header {
    font-size: 0.92rem; color: var(--text); margin-bottom: 6px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.transit-item-text {
    font-size: 0.88rem; color: var(--text-dim); line-height: 1.6;
}
.transit-kw {
    font-size: 0.75rem; color: var(--text-dim); background: rgba(255,255,255,0.05);
    padding: 2px 8px; border-radius: 8px;
}
.astro-transit-signs {
    display: flex; flex-direction: column; gap: 10px;
}
.astro-transit-sign-item {
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.92rem;
}
.astro-transit-sign-item:last-child { border-bottom: none; }
@media (max-width: 480px) {
    .astro-big3 { gap: 10px; }
    .astro-big3-item { padding: 14px 16px; min-width: 90px; }
    .astro-big3-icon { font-size: 2em; }
    .astro-icon-big3 { width: 40px; height: 40px; }
    .astro-distribution { flex-direction: column; gap: 16px; }
    .astro-natal-svg-wrap { padding: 4px; }
    .astro-glow-title { font-size: 1.15em; }
}

/* ========== 인쇄 시 광고 숨김 ========== */
@media print {
    .ad-slot,
    .ad-slot-top,
    .ad-slot-middle,
    .ad-slot-bottom,
    .ad-slot-sidebar,
    .ad-slot-result,
    .wing-ad,
    .nav-ad-slot,
    .analysis-loading,
    .analysis-ad-banner { display: none !important; }
}

/* ========== 날개(사이드) 광고 ========== */
.wing-ad {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: none;
    max-width: 200px;
    overflow: hidden;
}
.wing-ad-left {
    left: 10px;
}
.wing-ad-right {
    right: 10px;
}

/* 1200px 이상에서만 날개 광고 표시 */
@media (min-width: 1200px) {
    .wing-ad {
        display: block;
    }
}

/* 콘텐츠와 겹치지 않도록 여유폭 확보 */
@media (min-width: 1400px) {
    .wing-ad-left {
        left: calc((100vw - 1000px) / 2 - 180px);
    }
    .wing-ad-right {
        right: calc((100vw - 1000px) / 2 - 180px);
    }
}

/* ========== 한자 선택기 (성명학) ========== */
.hanja-char-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.hanja-char-slot {
    flex: 1;
    min-width: 80px;
    max-width: 120px;
    text-align: center;
    position: relative;
}
.hanja-char-slot label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.hanja-hangul-input {
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 10px 4px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.hanja-hangul-input:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(108,92,231,0.2);
}
.hanja-slot-result {
    margin-top: 6px;
    min-height: 40px;
}
.hanja-slot-result .hanja-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(108,92,231,0.15);
    border: 1px solid rgba(108,92,231,0.4);
    border-radius: 8px;
    padding: 4px 8px;
    color: var(--gold);
    cursor: default;
}
.hanja-chip-char {
    font-size: 1.4rem;
    font-weight: 700;
}
.hanja-chip-info {
    font-size: 0.7rem;
    color: var(--text-dim);
}
.hanja-chip-remove {
    cursor: pointer;
    font-size: 1rem;
    color: #e57373;
    line-height: 1;
    margin-left: 2px;
}
.hanja-chip-remove:hover { color: #ef5350; }

/* 글자 추가 버튼 슬롯 */
.hanja-add-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    max-width: 56px;
    padding-top: 18px;
}
.hanja-add-slot button {
    width: 44px;
    height: 44px;
    border: 2px dashed rgba(108,92,231,0.4);
    border-radius: 8px;
    background: transparent;
    color: var(--gold);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hanja-add-slot button:hover {
    background: rgba(108,92,231,0.1);
    border-color: var(--gold);
}
.hanja-add-slot.is-disabled button,
.hanja-add-slot button:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
.hanja-add-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-top: 4px;
}

/* 동적 추가 슬롯 삭제 버튼 */
.hanja-slot-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #e57373;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.hanja-slot-remove:hover { background: #ef5350; }

/* 한자 후보 피커 */
.hanja-picker {
    display: none;
    margin-top: 4px;
    margin-bottom: 12px;
    background: var(--card-bg);
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: 10px;
    padding: 12px;
    max-height: 280px;
    overflow-y: auto;
}
.hanja-picker-label {
    font-size: 0.88rem;
    color: var(--text-dim);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hanja-picker-label strong { color: var(--gold); font-size: 1.05rem; }
.hanja-picker-empty {
    text-align: center;
    color: #e57373;
    padding: 16px;
    font-size: 0.9rem;
}
.hanja-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
}
.hanja-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 4px;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text);
}
.hanja-btn:hover {
    background: rgba(108,92,231,0.2);
    border-color: rgba(108,92,231,0.5);
    transform: scale(1.05);
}
.hanja-btn-char {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}
.hanja-btn-def {
    font-size: 0.7rem;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* 한자 피커 스크롤바 */
.hanja-picker::-webkit-scrollbar { width: 6px; }
.hanja-picker::-webkit-scrollbar-track { background: transparent; }
.hanja-picker::-webkit-scrollbar-thumb { background: rgba(108,92,231,0.4); border-radius: 3px; }

@media (max-width: 600px) {
    .hanja-char-slot { min-width: 68px; max-width: 100px; }
    .hanja-hangul-input { font-size: 1.1rem; padding: 8px 2px; }
    .hanja-picker-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
    .hanja-btn { padding: 6px 2px; }
    .hanja-btn-char { font-size: 1.2rem; }
    .hanja-add-slot { min-width: 48px; max-width: 48px; }
    .hanja-add-slot button { width: 38px; height: 38px; font-size: 1.3rem; }
}

.sm-birth-toggle,
.sm-birth-grid {
    grid-column: 1 / -1;
}
.sm-birth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(108,92,231,0.12);
    background: rgba(255,255,255,0.03);
}
.sm-birth-note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-dim);
    font-size: 0.82rem;
    line-height: 1.7;
}

/* ========== 성명학 오행 결과 테이블 ========== */
.sm-result-card {
    background:
        radial-gradient(circle at top, rgba(108,92,231,0.08), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.sm-name {
    font-size: 1.35rem;
    text-align: center;
    margin: 15px 0 10px;
    color: var(--gold);
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sm-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 10px 0 14px;
}
.sm-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(108,92,231,0.18);
    background: rgba(108,92,231,0.08);
    color: var(--gold);
    font-size: 0.76rem;
}
.sm-note {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(108,92,231,0.18);
    background: rgba(255,255,255,0.03);
    color: var(--text-sub);
    line-height: 1.7;
}
.sm-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.sm-summary-card {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.025);
}
.sm-summary-card.is-good {
    border-color: rgba(90,154,90,0.35);
    background: rgba(90,154,90,0.08);
}
.sm-summary-card.is-warn {
    border-color: rgba(196,90,74,0.35);
    background: rgba(196,90,74,0.08);
}
.sm-summary-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.sm-summary-card strong {
    display: block;
    color: var(--gold);
    margin-bottom: 8px;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sm-summary-card p,
.sm-summary-text {
    margin: 0;
    color: var(--text-sub);
    line-height: 1.7;
    font-size: 0.88rem;
}
.sm-ohang-table th {
    font-size: 0.82rem;
    line-height: 1.3;
    padding: 8px 4px;
}
.sm-ohang-table .th-sub {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-dim);
    display: block;
}
.sm-ohang-table td {
    padding: 10px 4px;
    vertical-align: middle;
    text-align: center;
}
.sm-char-cell {
    font-size: 1.4rem;
    font-weight: 700;
}
.sm-char-meaning {
    text-align: left !important;
    font-size: 0.86rem;
    color: var(--text-sub);
}
.sm-yinyang-badge {
    display: inline-block;
    min-width: 34px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}
.sm-yinyang-yang {
    background: rgba(108,92,231,0.14);
    color: var(--gold);
    border: 1px solid rgba(108,92,231,0.28);
}
.sm-yinyang-yin {
    background: rgba(143,170,255,0.12);
    color: #a9bcff;
    border: 1px solid rgba(143,170,255,0.25);
}
.sm-yinyang-none {
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    border: 1px solid rgba(255,255,255,0.08);
}
.sm-namechar-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}
.sm-namechar-badge.is-good {
    background: rgba(90,154,90,0.14);
    color: #8ed18e;
    border: 1px solid rgba(90,154,90,0.28);
}
.sm-namechar-badge.is-warn {
    background: rgba(196,90,74,0.12);
    color: #f3a596;
    border: 1px solid rgba(196,90,74,0.25);
}
.sm-namechar-badge.is-neutral {
    background: rgba(255,255,255,0.05);
    color: var(--text-sub);
    border: 1px solid rgba(255,255,255,0.08);
}
.ohang-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.ohang-none {
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    border: 1px solid rgba(255,255,255,0.08);
}
.sm-ohang-legend {
    margin-top: 14px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}
.sm-legend-item {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 2px;
}
.sm-legend-item strong {
    color: var(--gold);
}
.sm-legend-note {
    font-size: 0.72rem;
    color: var(--text-dim);
    opacity: 0.7;
    margin-top: 6px;
    font-style: italic;
}
.sm-formula-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.sm-formula-card {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(108,92,231,0.16);
    background: rgba(255,255,255,0.025);
}
.sm-formula-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.sm-formula-card strong {
    display: block;
    color: var(--gold);
    margin-bottom: 8px;
}
.sm-formula-meta {
    color: var(--text-sub);
    font-size: 0.82rem;
    line-height: 1.6;
}
.sm-flow-list {
    display: grid;
    gap: 10px;
}
.sm-flow-item {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.025);
}
.sm-flow-item.is-warn {
    border-color: rgba(196,90,74,0.28);
    background: rgba(196,90,74,0.08);
}
.sm-flow-item.is-good {
    border-color: rgba(90,154,90,0.3);
    background: rgba(90,154,90,0.08);
}
.sm-flow-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 6px;
}
.sm-reference-block {
    opacity: 0.92;
}

@media (max-width: 600px) {
    .sm-summary-grid,
    .sm-formula-grid {
        grid-template-columns: 1fr;
    }

    /* ── 오행 테이블 모바일 스크롤 처리 ── */
    .sm-result-card {
        overflow-x: hidden;
    }
    .sm-ohang-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -2px;
        margin-right: -2px;
    }
    .sm-ohang-table thead,
    .sm-ohang-table tbody {
        display: table;
        min-width: 100%;
    }
    .sm-ohang-table th {
        font-size: 0.68rem;
        padding: 6px 2px;
        white-space: nowrap;
    }
    .sm-ohang-table .th-sub { font-size: 0.58rem; }
    .sm-ohang-table td {
        padding: 6px 3px;
        font-size: 0.74rem;
    }
    .sm-char-cell { font-size: 1rem; white-space: nowrap; }
    .sm-char-meaning {
        font-size: 0.72rem;
        min-width: 48px;
        max-width: 70px;
        word-break: keep-all;
    }
    .ohang-badge { font-size: 0.64rem; padding: 2px 4px; white-space: nowrap; }
    .sm-yinyang-badge { font-size: 0.64rem; min-width: 28px; padding: 2px 5px; white-space: nowrap; }
    .sm-namechar-badge { font-size: 0.62rem; padding: 2px 5px; white-space: nowrap; }
    /* 10열 이상 테이블은 최소 너비 확보 */
    .sm-ohang-table:has(th:nth-child(5)) thead,
    .sm-ohang-table:has(th:nth-child(5)) tbody {
        min-width: 580px;
    }

    .sm-ohang-legend { padding: 8px; }
    .sm-legend-item { font-size: 0.7rem; }
    .sm-flow-head {
        flex-direction: column;
    }
}

/* 수비학 영문이름 미리보기 */
#numerology-name-preview {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
.nmp-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-right: 4px;
}
.nmp-badge {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, #483d8b, #6a5acd);
    color: #fff;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.nmp-warn {
    font-size: 0.75rem;
    color: var(--accent-red);
    margin-left: 4px;
}

/* ========== 기문둔갑 구궁판 ========== */
.gimun-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}
.gimun-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: rgba(108,92,231,0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.gimun-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-bottom: 3px;
}
.gimun-value {
    font-size: 0.9rem;
    color: var(--gold);
    font-weight: 600;
}
.gimun-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    max-width: 520px;
    margin: 0 auto;
}
.gimun-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    min-height: 100px;
}
.gimun-cell-good {
    border-color: rgba(90,154,90,0.5);
    background: rgba(90,154,90,0.06);
}
.gimun-cell-great {
    border-color: rgba(90,154,90,0.8);
    background: rgba(90,154,90,0.12);
    box-shadow: 0 0 8px rgba(90,154,90,0.2);
}
.gimun-cell-bad {
    border-color: rgba(196,90,74,0.5);
    background: rgba(196,90,74,0.06);
}
.gimun-cell-terrible {
    border-color: rgba(196,90,74,0.8);
    background: rgba(196,90,74,0.12);
    box-shadow: 0 0 8px rgba(196,90,74,0.2);
}
.gimun-cell-center {
    border-color: var(--gold-dim);
    background: rgba(108,92,231,0.08);
}
.gimun-cell-header {
    font-size: 0.68rem;
    color: var(--text-dim);
    margin-bottom: 4px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 3px;
}
.gimun-deity {
    font-size: 0.72rem;
    color: var(--accent-blue);
    margin-bottom: 2px;
}
.gimun-gans {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 3px 0;
    letter-spacing: 1px;
}
.gimun-tian {
    color: var(--gold-light);
}
.gimun-slash {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.9rem;
    margin: 0 1px;
}
.gimun-di {
    color: var(--text-dim);
}
.gimun-extra {
    font-size: 0.66rem;
    line-height: 1.35;
    color: var(--text-dim);
    margin-top: 2px;
    text-align: center;
}
.gimun-extra-gan {
    color: rgba(217, 195, 125, 0.92);
}
.gimun-extra-star {
    color: rgba(165, 201, 255, 0.92);
}
.gimun-star {
    font-size: 0.75rem;
    color: var(--gold);
    margin-bottom: 1px;
}
.gimun-door {
    font-size: 0.78rem;
    color: var(--text);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 12px;
    background: rgba(108,92,231,0.1);
}
.gimun-verdict-row {
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: var(--radius);
    font-size: 0.88rem;
}
.gimun-verdict-row.gimun-good {
    background: rgba(90,154,90,0.08);
    border-left: 3px solid var(--accent-green);
}
.gimun-verdict-row.gimun-bad {
    background: rgba(196,90,74,0.08);
    border-left: 3px solid var(--accent-red);
}
.gimun-badge {
    font-weight: 700;
    margin-right: 4px;
}
.gimun-dir-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: var(--radius);
    background: rgba(90,154,90,0.05);
}
.gimun-dir-row.gimun-dir-bad {
    background: rgba(196,90,74,0.05);
}
.gimun-dir-rank {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: var(--bg-dark);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.gimun-dir-name {
    font-weight: 600;
    color: var(--gold-light);
    min-width: 70px;
}
.gimun-dir-detail {
    color: var(--text-dim);
    font-size: 0.85rem;
}
.gimun-purpose-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.gimun-purpose-btn {
    padding: 8px 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--transition);
}
.gimun-purpose-btn:hover {
    border-color: var(--gold-dim);
    background: rgba(108,92,231,0.08);
}
.gimun-purpose-btn.gimun-purpose-active {
    border-color: var(--gold);
    background: rgba(108,92,231,0.15);
    color: var(--gold-light);
    font-weight: 600;
}
@media (max-width: 600px) {
    .gimun-grid { gap: 2px; }
    .gimun-cell { padding: 5px 2px; min-height: 80px; }
    .gimun-gans { font-size: 1rem; }
    .gimun-info-grid { grid-template-columns: repeat(2, 1fr); }
    .gimun-purpose-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========== jamicolo / Zi Wei Dou Shu ========== */
.jamicolo-result {
    padding: 24px;
    border: 1px solid rgba(108, 92, 231, 0.2);
    border-radius: 24px;
    background:
        radial-gradient(circle at top, rgba(108, 92, 231, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(19, 17, 12, 0.98), rgba(14, 17, 32, 0.96));
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}

.jamicolo-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.jamicolo-overline {
    display: inline-block;
    margin-bottom: 6px;
    color: rgba(108, 92, 231, 0.72);
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.jamicolo-name {
    margin: 8px 0 0;
    color: var(--text-dim);
    font-size: 0.96rem;
}

.jamicolo-warning-bar {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(224, 168, 0, 0.32);
    border-radius: 14px;
    background: rgba(224, 168, 0, 0.08);
    color: #f0c96a;
    line-height: 1.6;
}

.jamicolo-warning-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.jamicolo-warning-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(108, 92, 231, 0.24);
    border-radius: 999px;
    background: rgba(108, 92, 231, 0.08);
    color: var(--text-dim);
    font-size: 0.82rem;
}

.jamicolo-hero {
    padding: 18px;
    border: 1px solid rgba(108, 92, 231, 0.16);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(32, 28, 20, 0.85), rgba(21, 20, 16, 0.72));
}

.jamicolo-core-star-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.jamicolo-core-star {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid rgba(108, 92, 231, 0.28);
    border-radius: 999px;
    background: rgba(108, 92, 231, 0.08);
    color: var(--gold);
    font-weight: 600;
}

.jamicolo-summary {
    margin: 0;
    color: var(--text);
    line-height: 1.78;
}

.jamicolo-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.jamicolo-highlight-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 122px;
    padding: 16px;
    border: 1px solid rgba(108, 92, 231, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(43, 35, 23, 0.74), rgba(22, 21, 16, 0.92));
    overflow: visible;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.jamicolo-highlight-label,
.jamicolo-center-label {
    color: rgba(108, 92, 231, 0.76);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jamicolo-highlight-value,
.jamicolo-center-value {
    color: #fff5d5;
    font-size: 1.12rem;
    line-height: 1.3;
}

.jamicolo-highlight-sub,
.jamicolo-center-sub {
    color: var(--text-dim);
    font-size: 0.84rem;
    line-height: 1.55;
}

.jamicolo-domain-section,
.jamicolo-core-detail-section,
.jamicolo-detail-section {
    margin-top: 18px;
}

.jamicolo-domain-grid,
.jamicolo-core-detail-grid,
.jamicolo-detail-grid {
    display: grid;
    gap: 14px;
}

.jamicolo-domain-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.jamicolo-domain-card,
.jamicolo-core-detail-card,
.jamicolo-palace-card {
    border: 1px solid rgba(108, 92, 231, 0.15);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(27, 25, 19, 0.92), rgba(15, 15, 12, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.04);
}

.jamicolo-domain-card {
    padding: 16px;
    overflow: visible;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.jamicolo-domain-card h4,
.jamicolo-core-detail-card h4,
.jamicolo-palace-card h4,
.jamicolo-info-block h5 {
    margin: 0;
    color: var(--gold);
}

.jamicolo-domain-card p,
.jamicolo-core-detail-card p,
.jamicolo-palace-summary,
.jamicolo-info-block p,
.jamicolo-info-item p {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
}

.jamicolo-evidence-row,
.jamicolo-palace-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.jamicolo-inline-badge,
.jamicolo-mini-badge,
.jamicolo-transform,
.jamicolo-info-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    white-space: nowrap;
}

.jamicolo-inline-badge {
    padding: 5px 11px;
    border: 1px solid rgba(108, 92, 231, 0.18);
    background: rgba(108, 92, 231, 0.08);
    color: var(--text-dim);
    font-size: 0.78rem;
}

.jamicolo-board-section {
    margin-top: 20px;
}

.jamicolo-board-frame {
    overflow-x: auto;
    padding-bottom: 6px;
}

.jamicolo-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(184px, 1fr));
    grid-template-rows: repeat(4, minmax(182px, auto));
    gap: 10px;
    min-width: 940px;
}

.jamicolo-board-cell,
.jamicolo-board-center {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(108, 92, 231, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(28, 25, 18, 0.96), rgba(17, 16, 13, 0.98));
}

.jamicolo-board-cell::before,
.jamicolo-board-center::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.06), transparent 42%);
}

.jamicolo-board-cell {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 12px 10px;
    min-height: 188px;
    aspect-ratio: auto;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.jamicolo-board-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.jamicolo-board-cell.is-active {
    border-color: rgba(108, 92, 231, 0.56);
    box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.28), 0 24px 42px rgba(0, 0, 0, 0.28);
    background: linear-gradient(180deg, rgba(42, 34, 22, 0.98), rgba(22, 20, 15, 0.99));
}

.jamicolo-board-cell.is-related {
    box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.12), 0 16px 28px rgba(0, 0, 0, 0.18);
}

.jamicolo-board-cell.is-opposite {
    border-color: rgba(109, 164, 255, 0.34);
    background: linear-gradient(180deg, rgba(23, 28, 39, 0.98), rgba(15, 17, 22, 0.99));
}

.jamicolo-board-cell.is-triad {
    border-color: rgba(98, 176, 138, 0.34);
    background: linear-gradient(180deg, rgba(24, 31, 25, 0.98), rgba(15, 19, 16, 0.99));
}

.jamicolo-board-cell.is-empty-major {
    border-style: dashed;
    background: linear-gradient(180deg, rgba(20, 19, 15, 0.98), rgba(13, 13, 10, 1));
}

.jamicolo-board-cell.is-good {
    border-color: rgba(109, 183, 122, 0.26);
}

.jamicolo-board-cell.is-warn {
    border-color: rgba(208, 95, 74, 0.26);
}

.jamicolo-board-top,
.jamicolo-palace-card-head,
.jamicolo-info-item-head,
.jamicolo-core-detail-head,
.jamicolo-center-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.jamicolo-board-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.jamicolo-board-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.jamicolo-board-ganzhi,
.jamicolo-palace-card-meta {
    color: rgba(255, 245, 213, 0.9);
    font-size: 0.88rem;
}

.jamicolo-board-kor,
.jamicolo-palace-card-desc {
    color: var(--text-dim);
    font-size: 0.74rem;
}

.jamicolo-board-title {
    margin: 0;
    color: rgba(108, 92, 231, 0.9);
    font-size: 0.84rem;
    letter-spacing: 0.04em;
}

.jamicolo-board-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.jamicolo-mini-badge {
    padding: 3px 8px;
    border: 1px solid rgba(108, 92, 231, 0.18);
    background: rgba(108, 92, 231, 0.1);
    color: #f6df9a;
    font-size: 0.72rem;
    font-weight: 700;
}

.jamicolo-mini-badge.is-life {
    border-color: rgba(108, 92, 231, 0.34);
}

.jamicolo-mini-badge.is-body {
    border-color: rgba(134, 176, 255, 0.32);
    color: #bfd5ff;
}

.jamicolo-star-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jamicolo-star-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.77rem;
    line-height: 1.2;
}

.jamicolo-star-chip.is-major {
    border: 1px solid rgba(108, 92, 231, 0.26);
    background: rgba(108, 92, 231, 0.1);
    color: #fff4d1;
}

.jamicolo-star-chip.is-assistant {
    border: 1px solid rgba(109, 183, 122, 0.22);
    background: rgba(109, 183, 122, 0.08);
    color: #d6f0d9;
}

.jamicolo-star-chip.is-malefic {
    border: 1px solid rgba(208, 95, 74, 0.24);
    background: rgba(208, 95, 74, 0.09);
    color: #ffd9d2;
}

.jamicolo-star-chip.is-misc {
    border: 1px solid rgba(116, 128, 173, 0.18);
    background: rgba(116, 128, 173, 0.08);
    color: #d8dcf3;
}

.jamicolo-dot {
    margin: 0 4px;
    color: rgba(108, 92, 231, 0.4);
}

.jamicolo-board-core {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.jamicolo-board-major-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.jamicolo-board-major-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    color: #fff3d4;
    text-align: center;
}

.jamicolo-board-major-star strong {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.15;
}

.jamicolo-board-major-star.is-primary strong {
    font-size: 1.24rem;
    color: #fff8e8;
}

.jamicolo-board-major-extra {
    color: rgba(108, 92, 231, 0.76);
    font-size: 0.75rem;
}

.jamicolo-board-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.jamicolo-board-empty strong {
    color: rgba(255, 245, 213, 0.52);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
}

.jamicolo-board-empty span {
    color: rgba(201, 194, 175, 0.56);
    font-size: 0.7rem;
    line-height: 1.5;
}

.jamicolo-board-tracks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jamicolo-board-track {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 18px;
    padding: 3px 7px;
    border-radius: 10px;
    font-size: 0.71rem;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.02);
}

.jamicolo-board-track-label {
    flex: 0 0 auto;
    color: rgba(108, 92, 231, 0.72);
}

.jamicolo-board-track-values {
    color: var(--text);
}

.jamicolo-board-track.is-assistant .jamicolo-board-track-values {
    color: #bfecc8;
}

.jamicolo-board-track.is-malefic .jamicolo-board-track-values {
    color: #ffb7aa;
}

.jamicolo-board-track.is-assistant {
    background: linear-gradient(90deg, rgba(74, 145, 112, 0.16), rgba(255, 255, 255, 0.02));
}

.jamicolo-board-track.is-assistant .jamicolo-board-track-label {
    color: #84d5aa;
}

.jamicolo-board-track.is-malefic {
    background: linear-gradient(90deg, rgba(168, 79, 63, 0.18), rgba(255, 255, 255, 0.02));
}

.jamicolo-board-track.is-malefic .jamicolo-board-track-label {
    color: #ff9f8f;
}

.jamicolo-board-misc-summary {
    color: rgba(188, 187, 177, 0.62);
    font-size: 0.7rem;
}

.jamicolo-board-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.jamicolo-board-age {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 10px;
    background: rgba(108, 92, 231, 0.07);
}

.jamicolo-board-age span {
    color: rgba(108, 92, 231, 0.72);
    font-size: 0.66rem;
}

.jamicolo-board-age strong {
    color: var(--text);
    font-size: 0.72rem;
}

.jamicolo-board-center {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: space-between;
    padding: 18px;
    background:
        radial-gradient(circle at center, rgba(108, 92, 231, 0.12), transparent 64%),
        linear-gradient(180deg, rgba(34, 29, 20, 0.98), rgba(19, 18, 14, 1));
}

.jamicolo-center-header.is-dashboard {
    align-items: flex-start;
    justify-content: flex-start;
}

.jamicolo-center-title {
    color: rgba(108, 92, 231, 0.78);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.jamicolo-center-identity {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jamicolo-center-identity-main {
    color: #fff6d9;
    font-size: 1.62rem;
    line-height: 1.15;
}

.jamicolo-center-identity-sub {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.jamicolo-center-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jamicolo-center-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid rgba(108, 92, 231, 0.18);
    border-radius: 999px;
    background: rgba(108, 92, 231, 0.07);
    color: #f5e7ba;
    font-size: 0.82rem;
}

.jamicolo-focus-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(108, 92, 231, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(108, 92, 231, 0.04));
}

.jamicolo-focus-overline {
    color: rgba(108, 92, 231, 0.72);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.jamicolo-focus-name {
    color: #fff5d6;
    font-size: 1.16rem;
}

.jamicolo-focus-summary,
.jamicolo-focus-meta {
    margin: 0;
    color: var(--text);
    line-height: 1.65;
    font-size: 0.9rem;
}

.jamicolo-focus-meta {
    color: var(--text-dim);
    font-size: 0.82rem;
}

.jamicolo-focus-stars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jamicolo-center-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.jamicolo-center-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(108, 92, 231, 0.14);
    border-radius: 14px;
    background: rgba(108, 92, 231, 0.06);
}

.jamicolo-transform-board {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(108, 92, 231, 0.12);
}

.jamicolo-transform-board-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.jamicolo-transform-board-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.jamicolo-transform-set {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
}

.jamicolo-transform {
    min-width: 38px;
    padding: 4px 8px;
    border: 1px solid rgba(108, 92, 231, 0.18);
    background: rgba(108, 92, 231, 0.1);
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 700;
}

.jamicolo-transform-set.is-compact .jamicolo-transform {
    min-width: 0;
    padding: 2px 6px;
    font-size: 0.66rem;
}

.jamicolo-transform.is-lok {
    border-color: rgba(138, 211, 121, 0.3);
    color: #b9f1aa;
}

.jamicolo-transform.is-gwon {
    border-color: rgba(255, 190, 98, 0.3);
    color: #ffd796;
}

.jamicolo-transform.is-gwa {
    border-color: rgba(131, 188, 255, 0.3);
    color: #c5dfff;
}

.jamicolo-transform.is-gi {
    border-color: rgba(224, 94, 94, 0.32);
    color: #ffb8b1;
}

.jamicolo-core-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jamicolo-core-detail-card {
    padding: 18px;
}

.jamicolo-core-detail-meaning {
    color: #fff0c3;
    font-weight: 600;
}

.jamicolo-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jamicolo-section-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.jamicolo-section-head p {
    margin: 0;
    color: var(--text-dim);
    line-height: 1.6;
}

.jamicolo-palace-card {
    padding: 18px;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    scroll-margin-top: 24px;
}

.jamicolo-palace-card.is-active {
    border-color: rgba(108, 92, 231, 0.48);
    box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.24), 0 18px 34px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.jamicolo-palace-card.is-related {
    box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.1), 0 12px 24px rgba(0, 0, 0, 0.16);
}

.jamicolo-palace-card.is-opposite {
    border-color: rgba(109, 164, 255, 0.28);
    background: linear-gradient(180deg, rgba(24, 28, 39, 0.92), rgba(15, 15, 12, 0.96));
}

.jamicolo-palace-card.is-triad {
    border-color: rgba(98, 176, 138, 0.28);
    background: linear-gradient(180deg, rgba(24, 31, 25, 0.92), rgba(15, 15, 12, 0.96));
}

.jamicolo-palace-summary {
    margin: 12px 0 0;
}

.jamicolo-palace-star-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.jamicolo-star-section {
    padding: 12px;
    border: 1px solid rgba(108, 92, 231, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
}

.jamicolo-star-section-label {
    margin-bottom: 8px;
    color: rgba(108, 92, 231, 0.76);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jamicolo-info-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(108, 92, 231, 0.04);
}

.jamicolo-info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(108, 92, 231, 0.1);
}

.jamicolo-info-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.jamicolo-info-tag {
    padding: 2px 8px;
    border: 1px solid rgba(108, 92, 231, 0.18);
    background: rgba(108, 92, 231, 0.08);
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 700;
}

.jamicolo-info-tag.is-warn {
    border-color: rgba(208, 95, 74, 0.22);
    background: rgba(208, 95, 74, 0.08);
    color: #ffc8bf;
}

.jamicolo-question-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text);
    line-height: 1.7;
}

.jamicolo-blocked {
    padding: 22px;
    border: 1px solid rgba(108, 92, 231, 0.2);
    border-radius: 18px;
    background: rgba(108, 92, 231, 0.04);
    color: var(--text);
    text-align: center;
    line-height: 1.7;
}

@media (max-width: 1200px) {
    .jamicolo-highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jamicolo-domain-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .jamicolo-core-detail-grid,
    .jamicolo-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .jamicolo-result {
        padding: 18px;
        border-radius: 20px;
    }

    .jamicolo-highlight-grid,
    .jamicolo-domain-grid,
    .jamicolo-core-detail-grid,
    .jamicolo-detail-grid,
    .jamicolo-palace-star-grid,
    .jamicolo-center-grid,
    .jamicolo-transform-board-list {
        grid-template-columns: 1fr;
    }

    .jamicolo-board {
        min-width: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .jamicolo-board-cell {
        min-height: 160px;
        padding: 10px;
    }

    .jamicolo-board-ganzhi {
        font-size: 0.82rem;
    }

    .jamicolo-board-title {
        font-size: 0.78rem;
    }

    .jamicolo-star-chip {
        font-size: 0.72rem;
        padding: 3px 7px;
    }

    .jamicolo-mini-badge {
        font-size: 0.66rem;
        padding: 2px 6px;
    }

    .jamicolo-board-center {
        padding: 14px;
    }

    .jamicolo-center-identity-main {
        font-size: 1.36rem;
    }
}

@media (max-width: 560px) {
    .jamicolo-result {
        padding: 12px;
        border-radius: 16px;
    }

    .jamicolo-result-header,
    .jamicolo-palace-card-head,
    .jamicolo-info-item-head,
    .jamicolo-core-detail-head,
    .jamicolo-center-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .jamicolo-core-star {
        font-size: 0.82rem;
    }

    /* ── 명반 보드: 모바일 반응형 ── */
    .jamicolo-board-frame {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .jamicolo-board {
        min-width: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(100px, auto));
        gap: 4px;
    }

    .jamicolo-board-cell {
        padding: 6px 5px;
        min-height: auto;
        gap: 4px;
        border-radius: 10px;
    }

    /* 셀 헤더: 세로 배치로 전환 */
    .jamicolo-board .jamicolo-board-top {
        flex-direction: column;
        gap: 2px;
    }

    .jamicolo-board .jamicolo-board-top-right {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 3px;
    }

    .jamicolo-board .jamicolo-board-meta {
        gap: 1px;
    }

    .jamicolo-board .jamicolo-board-ganzhi {
        font-size: 0.62rem;
    }

    .jamicolo-board .jamicolo-board-kor {
        font-size: 0.56rem;
    }

    .jamicolo-board .jamicolo-board-title {
        font-size: 0.68rem;
        letter-spacing: 0;
    }

    .jamicolo-board .jamicolo-board-badges {
        gap: 2px;
    }

    .jamicolo-board .jamicolo-mini-badge {
        font-size: 0.54rem;
        padding: 1px 4px;
    }

    /* 별 칩 축소 */
    .jamicolo-board .jamicolo-star-list {
        gap: 2px;
    }

    .jamicolo-board .jamicolo-star-chip {
        font-size: 0.58rem;
        padding: 2px 5px;
        gap: 2px;
    }

    /* 별 코어 영역 */
    .jamicolo-board .jamicolo-board-core {
        min-height: 30px;
    }

    .jamicolo-board .jamicolo-board-major-star strong {
        font-size: 0.78rem;
    }

    .jamicolo-board .jamicolo-board-major-star.is-primary strong {
        font-size: 0.88rem;
    }

    .jamicolo-board .jamicolo-board-major-extra {
        font-size: 0.58rem;
    }

    /* 트랙 (길성·살성 등) */
    .jamicolo-board .jamicolo-board-track {
        padding: 2px 4px;
        font-size: 0.58rem;
        gap: 3px;
        min-height: 14px;
        border-radius: 6px;
    }

    .jamicolo-board .jamicolo-board-misc-summary {
        font-size: 0.56rem;
    }

    /* 하단 대운 */
    .jamicolo-board .jamicolo-board-bottom {
        gap: 3px;
        padding-top: 4px;
    }

    .jamicolo-board .jamicolo-board-age {
        padding: 2px 4px;
        gap: 2px;
        border-radius: 6px;
    }

    .jamicolo-board .jamicolo-board-age span {
        font-size: 0.52rem;
    }

    .jamicolo-board .jamicolo-board-age strong {
        font-size: 0.58rem;
    }

    /* 중앙 영역 */
    .jamicolo-board-center {
        padding: 8px;
        gap: 6px;
        border-radius: 10px;
    }

    .jamicolo-center-identity-main {
        font-size: 0.88rem;
    }

    .jamicolo-center-identity-sub {
        font-size: 0.62rem;
    }

    .jamicolo-center-pill-row {
        gap: 3px;
    }

    .jamicolo-center-pill {
        font-size: 0.58rem;
        padding: 3px 6px;
    }

    .jamicolo-focus-panel {
        padding: 6px;
        border-radius: 10px;
        gap: 4px;
    }

    .jamicolo-focus-overline {
        font-size: 0.58rem;
    }

    .jamicolo-focus-name {
        font-size: 0.82rem;
    }

    .jamicolo-focus-summary {
        font-size: 0.7rem;
        line-height: 1.5;
    }

    .jamicolo-focus-meta {
        font-size: 0.62rem;
        line-height: 1.45;
    }

    .jamicolo-focus-stars {
        gap: 4px;
    }

    .jamicolo-center-grid {
        gap: 4px;
        margin-top: 6px;
    }

    .jamicolo-center-item {
        padding: 6px;
        gap: 3px;
        border-radius: 8px;
    }

    .jamicolo-center-label {
        font-size: 0.58rem;
    }

    .jamicolo-center-value {
        font-size: 0.78rem;
    }

    .jamicolo-center-sub {
        font-size: 0.6rem;
    }

    .jamicolo-transform-board {
        margin-top: 8px;
        padding-top: 6px;
    }

    .jamicolo-transform-board-list {
        gap: 4px;
    }

    .jamicolo-transform-board-item {
        padding: 6px;
        gap: 4px;
        border-radius: 8px;
    }

    /* 기타 카드 라운딩 */
    .jamicolo-highlight-card,
    .jamicolo-domain-card,
    .jamicolo-core-detail-card,
    .jamicolo-palace-card {
        border-radius: 14px;
    }

    /* 히어로 섹션 */
    .jamicolo-hero {
        padding: 12px;
        border-radius: 14px;
    }

    .jamicolo-summary {
        font-size: 0.88rem;
        line-height: 1.65;
    }

    /* 도메인/상세 카드 컴팩트 */
    .jamicolo-domain-card {
        padding: 12px;
    }

    .jamicolo-core-detail-card,
    .jamicolo-palace-card {
        padding: 14px;
    }

    .jamicolo-palace-star-grid {
        gap: 8px;
    }

    .jamicolo-star-section {
        padding: 8px;
        border-radius: 10px;
    }
}