/* ============================================================ Soft Cosmic — 사주 & 점법 도서관 다크 그라디언트 + 글래스모피즘 + 별 반짝임 ============================================================ */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap'); :root { /* 배경 — 마이페이지 다크톤과 통일 */ --bg-start: #111112; --bg-mid: #0f0f10; --bg-end: #0d0d0e; --bg-glow: rgba(129, 65, 190, 0.18); /* 메인 컬러 */ --purple: #7C4DBC; --purple-light: #9d6ed0; --purple-soft: #b189db; --pink: #E8A0BF; --pink-soft: #f3c2d6; --gold: #F5D76E; --gold-soft: #f8e49a; /* 텍스트 */ --text: #f7f2ea; --text-soft: rgba(247, 242, 234, 0.86); --text-dim: rgba(247, 242, 234, 0.66); --text-mute: rgba(247, 242, 234, 0.46); /* 카드/보더 (글래스모피즘) */ --card-bg: rgba(255, 255, 255, 0.05); --card-bg-strong: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.12); --card-border-strong: rgba(232, 160, 191, 0.35); /* 의미 컬러 */ --error: #FF8FA3; --reversed: #E8A0BF; --good: #9DE0AD; /* 호환용 이전 변수 매핑 (JS 또는 잔여 코드 호환) */ --bg: var(--bg-start); --bg-card: var(--card-bg); --bg-card-soft: var(--card-bg-strong); --accent: var(--purple); --accent-soft: var(--pink); --border: var(--card-border); /* 그라디언트 프리셋 */ --grad-button: linear-gradient(135deg, #7C4DBC 0%, #E8A0BF 100%); --grad-button-hover: linear-gradient(135deg, #8d5fd0 0%, #f0b6cd 100%); --grad-card-hover: linear-gradient(135deg, rgba(124,77,188,0.18), rgba(232,160,191,0.12)); } /* theme.js가 에 theme-dark를 먼저 붙여 페이지 이동 시 배경 깜빡임을 막는다. */ html.theme-dark { color-scheme: dark; background: radial-gradient(circle at 76% 0%, var(--bg-glow), transparent 30%), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%); } html.theme-dark body { background: radial-gradient(circle at 76% 0%, var(--bg-glow), transparent 30%), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%); color: #f7f2ea; } html.theme-light { color-scheme: light; } body.light-theme { /* 밝은 테마 호환 클래스 */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: radial-gradient(circle at 76% 0%, var(--bg-glow), transparent 30%), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%); background-color: var(--bg-start); } body { font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif; color: var(--text); min-height: 100vh; line-height: 1.7; background: radial-gradient(circle at 76% 0%, var(--bg-glow), transparent 30%), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%); background-attachment: scroll; position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 별 반짝임 배경 (CSS 별 + twinkle 애니메이션) ── */ body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-repeat: repeat; background-size: 320px 320px; } body::before { background-image: radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,0.85), transparent 50%), radial-gradient(1px 1px at 80px 120px, rgba(245,215,110,0.7), transparent 50%), radial-gradient(1.5px 1.5px at 180px 60px, rgba(232,160,191,0.8), transparent 50%), radial-gradient(1px 1px at 240px 220px, rgba(255,255,255,0.6), transparent 50%), radial-gradient(1.5px 1.5px at 60px 260px, rgba(177,137,219,0.85), transparent 50%), radial-gradient(1px 1px at 290px 90px, rgba(255,255,255,0.7), transparent 50%); animation: twinkle 5s ease-in-out infinite; } body::after { background-image: radial-gradient(1px 1px at 50px 80px, rgba(255,255,255,0.55), transparent 50%), radial-gradient(1.5px 1.5px at 140px 200px, rgba(245,215,110,0.55), transparent 50%), radial-gradient(1px 1px at 220px 40px, rgba(255,255,255,0.45), transparent 50%), radial-gradient(1px 1px at 300px 280px, rgba(232,160,191,0.5), transparent 50%), radial-gradient(1.5px 1.5px at 100px 160px, rgba(255,255,255,0.4), transparent 50%); background-size: 360px 360px; background-position: 40px 20px; animation: twinkle 7s ease-in-out infinite reverse; } @keyframes twinkle { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } /* 본문이 별 위로 올라오도록 */ main, nav, footer, .site-nav, .site-footer { position: relative; z-index: 1; } /* ============================================================ 레이아웃 ============================================================ */ .container { max-width: 720px; margin: 0 auto; padding: 24px 18px 80px; } /* ── 상단 네비게이션 ── */ .site-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: rgba(15, 10, 30, 0.55); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0; } /* nav 직접 자식 nav-logo (내부 페이지) — 메인과 동일한 max-width/margin 적용 */ .site-nav > .nav-logo { display: flex; max-width: 720px; margin: 0 auto; padding: 14px 0; } .site-nav-inner { max-width: 720px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 52px; } .site-nav-inner .site-logo { min-width: 0; flex: 1 1 auto; } .site-nav-inner #auth-nav-area { margin-left: 0 !important; flex: 0 0 auto; } .site-nav-inner .language-selector { position: relative; transform: none; flex: 0 0 auto; margin-left: auto; margin-right: 4px; } .site-nav:not(:has(.site-nav-inner)) .language-selector { position: absolute; top: 50%; right: max(16px, calc((100vw - 720px) / 2)); transform: translateY(-50%); } .language-selector { position: relative; z-index: 80; display: inline-flex; align-items: center; justify-content: center; align-self: center; height: 38px; min-height: 38px; margin-top: 0; } .site-nav:not(:has(.site-nav-inner)) .language-selector { position: absolute; top: 50%; right: max(16px, calc((100vw - 720px) / 2)); transform: translateY(-50%); } .site-nav:not(:has(.site-nav-inner)) #auth-nav-area { position: absolute; top: 50%; right: max(76px, calc((100vw - 720px) / 2 + 60px)); width: auto !important; margin-left: 0 !important; transform: translateY(-50%); z-index: 79; } .language-select { appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(201,168,245,0.35); outline: 0; background: rgba(255,255,255,0.05); color: #e8d5ff; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; width: 52px; margin: 0; height: 100%; padding: 0; border-radius: 20px; text-align: center; box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s, transform 0.15s; } .language-current { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; line-height: 1; } .language-selector::after { content: none; } .language-select:hover, .language-selector.open .language-select { background: rgba(124,77,188,0.25); border-color: rgba(201,168,245,0.7); } .language-menu { display: none; position: absolute; top: calc(100% + 8px); left: 50%; right: auto; transform: translateX(-50%); width: 92px; max-width: 92px; padding: 6px; border: 1px solid rgba(201,168,245,0.32); border-radius: 16px; background: linear-gradient(180deg, rgba(30,16,64,0.98), rgba(15,10,30,0.98)); box-shadow: 0 18px 38px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; } .language-selector.open .language-menu { display: grid; gap: 3px; } .language-option { width: 100%; border: 0; border-radius: 11px; background: transparent; color: rgba(248,241,255,0.88); padding: 9px 13px; margin: 0; font-size: 13px; font-weight: 700; line-height: 1; text-align: center; cursor: pointer; } .language-option:hover, .language-option.active { background: linear-gradient(135deg, rgba(124,77,188,0.78), rgba(232,160,191,0.26)); color: #fff; } @media (max-width: 520px) { .site-nav-inner { padding: 9px 10px; gap: 4px; min-height: 58px; } .site-nav-inner .site-logo { gap: 7px; } .site-nav-inner .logo-icon-img { width: 34px; height: 34px; border-radius: 10px; } .site-nav-inner .logo-title { font-size: 14px; max-width: 118px; overflow: hidden; text-overflow: ellipsis; } .site-nav-inner .logo-sub { font-size: 8px; letter-spacing: 0.14em; } .site-nav > .nav-logo { padding-left: 14px; padding-right: 112px; } .site-nav:not(:has(.site-nav-inner)) .language-selector { right: 10px; } .language-selector { height: 34px; min-height: 34px; align-self: center; } .site-nav-inner .language-selector { margin-left: auto; margin-right: 3px; } .language-select { width: 46px; height: 100%; padding: 0; font-size: 12px; } .language-menu { top: calc(100% + 8px); left: 50%; right: auto; transform: translateX(-50%); width: 84px; max-width: 84px; } .language-option { padding: 9px 10px; font-size: 12px; } } .site-logo, .nav-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; position: relative; padding: 14px 0; } /* 아이콘 래퍼 */ .site-logo .logo-icon, .nav-logo .logo-icon { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #7C4DBC 0%, #E8A0BF 100%); display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 0 12px rgba(124,77,188,0.55), 0 0 24px rgba(232,160,191,0.2); flex-shrink: 0; transition: box-shadow 0.25s, transform 0.25s; } /* 로고 이미지 아이콘 */ .site-logo .logo-icon-img, .nav-logo .logo-icon-img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 12px rgba(200,134,10,0.35), 0 0 20px rgba(180,100,200,0.2); transition: box-shadow 0.25s, transform 0.25s; } .site-logo:hover .logo-icon-img, .nav-logo:hover .logo-icon-img { box-shadow: 0 4px 20px rgba(200,134,10,0.55), 0 0 32px rgba(180,100,200,0.35); transform: scale(1.08) rotate(-4deg); } /* 텍스트 영역 */ .site-logo .logo-text, .nav-logo .logo-text { display: flex; flex-direction: column; gap: 0px; line-height: 1; } .site-logo .logo-title, .nav-logo .logo-title { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; background: linear-gradient(135deg, #f3c2d6 0%, #b189db 50%, #F5D76E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; } .site-logo .logo-sub, .nav-logo .logo-sub { font-size: 9px; font-weight: 500; letter-spacing: 0.18em; color: rgba(240,235,248,0.38); text-transform: uppercase; white-space: nowrap; margin-top: 2px; } /* 호버 */ .site-logo:hover .logo-icon, .nav-logo:hover .logo-icon { box-shadow: 0 0 20px rgba(124,77,188,0.8), 0 0 40px rgba(232,160,191,0.35); transform: scale(1.08) rotate(-4deg); } .site-logo:hover .logo-title, .nav-logo:hover .logo-title { background: linear-gradient(135deg, #F5D76E 0%, #E8A0BF 50%, #b189db 100%); -webkit-background-clip: text; background-clip: text; } /* 구버전 호환 */ .site-logo .logo-mark { display: none; } .site-nav-links { display: flex; align-items: center; gap: 18px; } .site-nav-links a { font-size: 13px; color: var(--text-soft); text-decoration: none; letter-spacing: 0.02em; transition: color 0.15s; } .site-nav-links a:hover { color: var(--pink); } @media (max-width: 480px) { .site-nav-links { gap: 12px; } .site-nav-links a { font-size: 12px; } } /* ── 푸터 ── */ .site-footer { max-width: 720px; margin: 40px auto 0; padding: 28px 18px 36px; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: var(--text-mute); line-height: 1.7; } .site-footer .footer-row { display: flex; justify-content: center; gap: 10px 14px; margin-bottom: 8px; flex-wrap: wrap; } .site-footer .footer-legal-row { gap: 8px 12px; margin-top: 6px; } .site-footer .footer-row a { color: var(--text-dim); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 2px; white-space: nowrap; } .site-footer .footer-row a:hover { color: var(--pink); } .site-footer .footer-copy { opacity: 0.92; color: rgba(240, 235, 248, 0.68); } @media (max-width: 420px) { .site-footer { padding-left: 14px; padding-right: 14px; } .site-footer .footer-row { gap: 8px 10px; } .site-footer .footer-row a { min-height: 34px; font-size: 12px; } } /* ============================================================ 타이포그래피 / 헤더 ============================================================ */ header { text-align: center; margin-bottom: 28px; padding-top: 8px; } h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; background: linear-gradient(135deg, var(--pink) 0%, var(--gold) 60%, var(--purple-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.25; } h2 { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--pink); letter-spacing: 0.01em; } h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 8px; } .tagline { margin: 0; color: var(--text-soft); font-size: 14px; font-weight: 500; } .page-guide { margin: 12px auto 0; font-size: 13px; color: var(--text-dim); line-height: 1.7; max-width: 480px; } /* ============================================================ 카드 — 글래스모피즘 ============================================================ */ .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 22px 20px; margin-bottom: 18px; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05); } .free-area { border-color: var(--card-border-strong); background: linear-gradient(135deg, rgba(232,160,191,0.10), rgba(124,77,188,0.10)); box-shadow: 0 4px 28px rgba(232,160,191,0.18), inset 0 1px 0 rgba(255,255,255,0.08); } /* QA 20260611: hidden 상태가 카드/flex/grid 스타일보다 항상 우선되게 고정한다. */ [hidden], .hidden, .loading-card[hidden], .result-card[hidden], #loading-section[hidden], #result-section[hidden], #again-btn[hidden] { display: none !important; } /* ============================================================ 폼 요소 ============================================================ */ label { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 10px; letter-spacing: 0.01em; font-weight: 500; } .fatemy-form-normalized { display: grid; gap: 16px; } .fatemy-form-normalized label:not(.cal-toggle-option):not(.radio-item):not(.radio-label) { font-weight: 800; color: var(--text-soft); } .fatemy-form-normalized .gender-row, .fatemy-form-normalized .date-picker, .fatemy-form-normalized .calendar-toggle, .fatemy-form-normalized .radio-grid { margin-top: 6px; } input[type="text"], input[type="email"], input[type="date"], input[type="time"], input[type="file"], select, textarea { width: 100%; background: rgba(255,255,255,0.06); color: var(--text); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 16px; font-family: inherit; font-size: 15px; outline: none; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="date"]::placeholder, input[type="time"]::placeholder, textarea::placeholder { color: var(--text-mute); } input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="file"]:focus, select:focus, textarea:focus { border-color: var(--purple-light); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 4px rgba(124,77,188,0.18); } input[type="date"] { color-scheme: dark; } textarea { resize: vertical; } /* 20260609: 데스크톱 브라우저 native select dropdown은 흰 팝업으로 열릴 수 있어 option 글자를 어둡게 고정한다. */ select option, select optgroup { color: #17131f !important; background: #fffaf7 !important; -webkit-text-fill-color: #17131f !important; } select option:checked, select option:hover, select option:focus { color: #111827 !important; background: #e6d7ff !important; -webkit-text-fill-color: #111827 !important; } /* 고블린사주 공통 입력 폼 리듬: 라벨은 바로 아래 입력칸에 붙이고, 다음 항목과만 여백을 둔다. */ .card .form-group, .input-card .form-group, .input-page.card .form-group, .adult-input-card .form-group { margin: 0 0 16px; } .card .form-group:last-child, .input-card .form-group:last-child, .input-page.card .form-group:last-child, .adult-input-card .form-group:last-child { margin-bottom: 0; } .card .form-group > label, .input-card .form-group > label, .input-page.card .form-group > label, .adult-input-card .form-group > label { margin: 0 0 7px; color: var(--text-soft); font-weight: 700; } .card > label:not(.cal-toggle-option):not(.radio-item), .input-card > label:not(.cal-toggle-option):not(.radio-item), .input-page.card > label:not(.cal-toggle-option):not(.radio-item), .adult-input-card > label:not(.cal-toggle-option):not(.radio-item) { margin: 16px 0 7px !important; color: var(--text-soft); font-weight: 700; } .card > h2 + label:not(.cal-toggle-option):not(.radio-item), .input-card > h2 + label:not(.cal-toggle-option):not(.radio-item), .input-page.card > h2 + label:not(.cal-toggle-option):not(.radio-item), .adult-input-card > h2 + label:not(.cal-toggle-option):not(.radio-item), .card > label:first-child:not(.cal-toggle-option):not(.radio-item), .input-card > label:first-child:not(.cal-toggle-option):not(.radio-item), .input-page.card > label:first-child:not(.cal-toggle-option):not(.radio-item), .adult-input-card > label:first-child:not(.cal-toggle-option):not(.radio-item) { margin-top: 0 !important; } .card label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .card label:not(.cal-toggle-option):not(.radio-item):has(> select), .card label:not(.cal-toggle-option):not(.radio-item):has(> textarea), .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> select), .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> textarea) { display: grid; gap: 7px; margin: 0 0 16px !important; } .card label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])) > input, .card label:not(.cal-toggle-option):not(.radio-item):has(> select) > select, .card label:not(.cal-toggle-option):not(.radio-item):has(> textarea) > textarea, .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])) > input, .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> select) > select, .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> textarea) > textarea { margin-top: 0 !important; } .form-group .form-hint, .form-group .hint { margin-top: 7px; } .pet-type-other { margin-top: 10px; } .form-hint { margin: 8px 2px 0; color: var(--text-mute); font-size: 12px; line-height: 1.5; } .optional-label { color: var(--text-mute); font-weight: 500; font-size: 12px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--purple-light); margin-right: 6px; } /* ============================================================ 버튼 — 그라디언트 + glow hover ============================================================ */ button { margin-top: 16px; width: 100%; padding: 16px 22px; background: var(--grad-button); color: #fff; border: none; border-radius: 14px; font-family: inherit; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s; box-shadow: 0 4px 16px rgba(124,77,188,0.35), inset 0 1px 0 rgba(255,255,255,0.18); } button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(232,160,191,0.5), 0 0 32px rgba(124,77,188,0.4), inset 0 1px 0 rgba(255,255,255,0.25); background: var(--grad-button-hover); } button:active:not(:disabled) { transform: translateY(0); } button:disabled { opacity: 0.45; cursor: not-allowed; } .error { margin-top: 12px; color: var(--error); font-size: 13px; font-weight: 500; } /* 작은/보조 버튼 (다시 보기 등) */ .actions { text-align: center; margin-top: 8px; } .actions button { max-width: 240px; margin: 0 auto; background: transparent; color: var(--pink-soft); border: 1.5px solid rgba(232,160,191,0.4); box-shadow: none; font-weight: 700; } .actions button:hover:not(:disabled) { background: rgba(232,160,191,0.10); border-color: var(--pink); box-shadow: 0 0 16px rgba(232,160,191,0.25); transform: translateY(-1px); } /* ============================================================ 로딩 — 별 모양 회전 ============================================================ */ .drawing-text { text-align: center; color: var(--text-soft); font-size: 14px; margin: 0; letter-spacing: 0.01em; } .star-spinner { width: 56px; height: 56px; margin: 0 auto 14px; display: block; color: var(--gold); filter: drop-shadow(0 0 12px rgba(245,215,110,0.55)); animation: starSpin 2.2s linear infinite, starPulse 1.4s ease-in-out infinite; } @keyframes starSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes starPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ============================================================ 뒤로가기 / 작은 링크 ============================================================ */ .back-link { display: inline-block; font-size: 13px; color: var(--text-dim); text-decoration: none; margin-bottom: 14px; transition: color 0.15s; } .back-link:hover { color: var(--pink); } /* ============================================================ 메인 페이지 — 카드 그리드 ============================================================ */ .home-header { text-align: center; margin-bottom: 36px; padding: 16px 0 8px; animation: heroFadeIn 0.8s ease; } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .home-header h1 { font-size: 30px; margin-bottom: 10px; } .choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; } .choice-grid-five { grid-template-columns: repeat(3, 1fr); } .choice-grid-two { grid-template-columns: 1fr 1fr; } .choice-card { position: relative; display: block; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; padding: 26px 18px 22px; text-align: center; text-decoration: none; color: inherit; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.25s, border-color 0.25s, background 0.25s; overflow: hidden; } .choice-card::before { content: ''; position: absolute; inset: 0; background: var(--grad-card-hover); opacity: 0; transition: opacity 0.25s; pointer-events: none; } .choice-card:hover { transform: translateY(-6px); border-color: var(--card-border-strong); box-shadow: 0 12px 32px rgba(124,77,188,0.3), 0 0 24px rgba(232,160,191,0.18); } .choice-card:hover::before { opacity: 1; } .choice-card > * { position: relative; z-index: 1; } .choice-symbol { font-size: 28px; color: var(--gold); letter-spacing: 0.18em; margin-bottom: 14px; text-shadow: 0 0 14px rgba(245,215,110,0.45); } .choice-card h2 { font-size: 18px; margin: 0 0 8px; color: var(--text); font-weight: 800; } .choice-when { font-size: 12px; color: var(--pink); margin: 0 0 8px; line-height: 1.55; } .choice-desc { font-size: 13px; color: var(--text-soft); margin: 0 0 10px; line-height: 1.65; } .choice-note { font-size: 11px; color: var(--text-dim); margin: 0 0 4px; } .choice-origin { font-size: 11px; color: var(--purple-soft); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); letter-spacing: 0.04em; } /* 무료 체험 뱃지 */ .choice-badge { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg, var(--gold), #f0b85a); color: #2a1a05; font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 999px; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(245,215,110,0.4); } /* 사주 카드 강조 */ .choice-card-featured { border-color: rgba(245,215,110,0.35); background: linear-gradient(135deg, rgba(245,215,110,0.06), rgba(232,160,191,0.08)); } .choice-card-featured:hover { border-color: var(--gold); box-shadow: 0 12px 36px rgba(245,215,110,0.25), 0 0 28px rgba(232,160,191,0.22); } /* 섹션 구분선 */ .section-divider { display: flex; align-items: center; margin: 10px 0 18px; gap: 14px; } .section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,160,191,0.4), transparent); } .section-divider-label { font-size: 12px; font-weight: 700; color: var(--pink); letter-spacing: 0.12em; white-space: nowrap; text-transform: uppercase; } /* 소셜 프루프 */ .social-proof { margin: 36px 0 0; padding: 0 16px; } .social-proof-stats { display: flex; justify-content: center; align-items: center; gap: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; } .social-proof-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; padding: 20px 12px; transition: background 0.2s; } .social-proof-stat:hover { background: rgba(124,77,188,0.08); } .social-proof-divider { width: 1px; height: 48px; background: rgba(255,255,255,0.08); flex-shrink: 0; } .social-proof-icon { font-size: 20px; line-height: 1; margin-bottom: 2px; } .social-proof-num { font-size: 26px; font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--gold), var(--pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; white-space: nowrap; } .social-proof-unit { font-size: 13px; font-weight: 700; letter-spacing: 0; } .social-proof-label { font-size: 11px; color: var(--text-dim); letter-spacing: 0.03em; white-space: nowrap; } .social-proof-text { margin: 8px 0 0; font-size: 12px; color: var(--text-soft); line-height: 1.6; } .home-footer { text-align: center; font-size: 12px; color: rgba(31,23,41,0.74); margin-top: 28px; line-height: 1.7; } /* 홈 밝은 모드 하단 영역 가독성 보강 */ .home-page .social-proof-stats { background: rgba(255,255,255,0.74); border-color: rgba(124,77,188,0.12); box-shadow: 0 12px 30px rgba(31,23,41,0.06); } .home-page .social-proof-divider { background: rgba(31,23,41,0.08); } .home-page .social-proof-label { color: rgba(31,23,41,0.66); } .home-page .site-footer, .home-page .site-footer .footer-copy, .home-page .site-footer .footer-row a { color: rgba(31,23,41,0.72); opacity: 1; } @media (max-width: 780px) { .choice-grid-five { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .container { padding: 16px 14px 60px; } .home-header h1 { font-size: 26px; } .choice-grid { gap: 12px; } .choice-card { padding: 22px 14px 18px; } .choice-symbol { font-size: 24px; } .choice-card h2 { font-size: 16px; } .social-proof-stat { padding: 16px 6px; } .social-proof-num { font-size: 22px; } .social-proof-icon { font-size: 17px; } .social-proof-label { font-size: 10px; } } @media (max-width: 380px) { .choice-grid-five { grid-template-columns: 1fr; } } /* ============================================================ 생년월일 입력 (date-picker) — 더 큰 탭 영역 ============================================================ */ .date-picker { display: flex; gap: 6px; align-items: center; } .date-picker select { flex: 1; min-width: 0; padding: 14px 26px 14px 10px; text-align: center; text-align-last: center; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(232,160,191,0.7) 50%), linear-gradient(135deg, rgba(232,160,191,0.7) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .date-picker .dp-year { flex: 1.4; } .date-picker .dp-month { flex: 0.85; } .date-picker .dp-day { flex: 0.85; } .date-picker .dp-unit { font-size: 12px; color: var(--text-dim); flex-shrink: 0; margin: 0 2px 0 -2px; } .upload-preview { display: block; width: min(100%, 320px); max-height: 360px; object-fit: contain; margin-top: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.28); box-shadow: 0 16px 34px rgba(0,0,0,0.28); } .upload-preview[hidden] { display: none !important; } .custom-upload-field { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .visually-hidden-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .upload-select-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.18); background: linear-gradient(135deg, rgba(232,160,191,0.26), rgba(255,255,255,0.08)); color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; box-shadow: 0 12px 26px rgba(0,0,0,0.18); } .upload-select-button:focus-visible { outline: 2px solid rgba(232,160,191,0.8); outline-offset: 3px; } .upload-status { flex: 1 1 180px; min-width: 0; color: var(--text-dim); font-size: 13px; line-height: 1.45; word-break: break-word; } input[type="file"]:not(.visually-hidden-file) { width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.07); color: var(--text); } @media (max-width: 480px) { .custom-upload-field { flex-direction: column; align-items: stretch; } .upload-select-button { width: 100%; min-height: 50px; } .upload-status { width: 100%; } } .hint { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-dim); } .field-error { margin: 8px 0 0; color: #ff9eb5; font-size: 13px; } .hour-picker { margin-top: 12px; } .time-picker { display: flex; gap: 6px; align-items: center; } .birth-profile-extra { margin-top: 14px; } .birth-profile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 12px; padding: 13px 16px; border: 1.5px solid rgba(232,160,191,0.26); border-radius: 14px; background: rgba(255,255,255,0.055); color: var(--text); font-weight: 700; font-size: 0.95rem; cursor: pointer; } .birth-profile-toggle::after { content: '⌄'; margin-left: 8px; color: var(--rose); font-size: 1rem; line-height: 1; } .birth-profile-toggle[aria-expanded="true"]::after { content: '⌃'; } .birth-profile-optional-hint { margin: 8px 0 0; color: var(--text-dim); font-size: 0.84rem; line-height: 1.5; } .birth-profile-extra.is-collapsible { padding: 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.035); } .birth-profile-extra[hidden] { display: none !important; } .birth-profile-extra .compact-group { margin-top: 12px; } .birth-profile-extra .leap-option { margin-top: 8px; display: inline-flex; } .birth-profile-extra .birth-time-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .birth-profile-extra .birth-time-header > label:first-child { margin: 0; } .birth-profile-extra .unknown-time { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 34px; margin: 0; padding: 8px 12px; border: 1px solid rgba(232,160,191,0.25); border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--text-soft); font-size: 0.82rem; cursor: pointer; white-space: nowrap; } .birth-profile-extra .unknown-time:has(input:checked) { border-color: var(--rose); background: rgba(232,160,191,0.16); color: var(--text); font-weight: 700; } .birth-profile-extra .birth-time-group.is-time-unknown .time-picker { display: none; } .birth-profile-extra .birth-time-group.is-time-unknown .input-hint { color: var(--rose); } .birth-profile-extra .input-hint { margin: 8px 0 0; color: var(--text-dim); font-size: 0.82rem; } .time-select-wrap { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; } .time-picker select { flex: 1; min-width: 0; padding: 14px 26px 14px 10px; text-align: center; text-align-last: center; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(232,160,191,0.7) 50%), linear-gradient(135deg, rgba(232,160,191,0.7) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; background-color: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 12px; color: var(--text); } /* 라디오 토글 (양력/음력, 성별) */ .cal-toggle { display: flex; gap: 8px; margin-bottom: 14px; } .cal-toggle-option { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08); border-radius: 10px; font-size: 14px; color: var(--text-soft); cursor: pointer; margin-bottom: 0; transition: border-color 0.15s, background 0.15s, color 0.15s; } .cal-toggle-option:has(input:checked) { border-color: var(--purple-light); background: rgba(124,77,188,0.18); color: var(--text); font-weight: 600; } .cal-toggle-option input[type="radio"] { margin-right: 4px; } @media (max-width: 480px) { .birth-profile-toggle { width: 100%; min-height: 48px; } .birth-profile-extra .birth-time-header { align-items: stretch; flex-direction: column; gap: 8px; } .birth-profile-extra .unknown-time { width: 100%; justify-content: flex-start; } .birth-profile-extra .time-picker { gap: 8px; } } .note { margin-top: 14px; font-size: 12px; color: var(--text-dim); line-height: 1.6; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 10px; border-left: 2px solid rgba(232,160,191,0.4); } /* ============================================================ 룬 점 — 카드 뽑기 & 결과 ============================================================ */ .drawing-stage { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .tarot-seven-drawing-stage { max-width: 620px; margin-left: auto; margin-right: auto; } .rune-back { width: 72px; height: 110px; background-image: url('/assets/tarot/cards/card-back.webp?v=20260811-rws-deck1'); background-size: cover; background-position: center; background-color: #1a0f3a; border: 1.5px solid rgba(245,215,110,0.62); border-radius: 10px; box-shadow: 0 0 16px rgba(124,77,188,0.4), inset 0 1px 0 rgba(255,255,255,0.06); animation: flip 1.4s ease-in-out infinite; } .rune-back:nth-child(2) { animation-delay: 0.15s; } .rune-back:nth-child(3) { animation-delay: 0.30s; } .rune-back:nth-child(4) { animation-delay: 0.45s; } .rune-back:nth-child(5) { animation-delay: 0.60s; } .rune-back:nth-child(6) { animation-delay: 0.75s; } .rune-back:nth-child(7) { animation-delay: 0.90s; } .rune-flipping { width: 72px; height: 110px; border-radius: 10px; animation: runeFlipOut 0.4s ease forwards; } @keyframes runeFlipOut { 0% { transform: rotateY(0deg); opacity: 1; } 100% { transform: rotateY(90deg); opacity: 0.3; } } .rune-stone { width: 72px; min-width: 72px; height: 110px; background: radial-gradient(ellipse at 40% 30%, #4a3a78, #2a1a55 60%, #1a0f3a); border: 1.5px solid rgba(245,215,110,0.5); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; flex-shrink: 0; box-sizing: border-box; } .stone-symbol { font-size: 24px; color: #F5D76E; text-shadow: 0 0 10px rgba(245,215,110,0.8); line-height: 1; display: block; text-align: center; } .stone-symbol.stone-reversed { transform: rotate(180deg); } .stone-name { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.85); text-align: center; width: 100%; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .stone-dir { font-size: 9px; font-weight: 700; border-radius: 99px; padding: 1px 5px; background: rgba(126,232,162,0.15); color: #7ee8a2; display: block; } .stone-dir.stone-dir-rev { background: rgba(255,120,120,0.15); color: #ff9090; } .input-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; padding: 12px 14px; background: rgba(15, 10, 30, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; } .input-nav .nav-btn { min-width: 90px; } .input-nav .nav-btn.submit-btn { min-width: 140px; } .input-counter { font-size: 14px; color: var(--text); font-weight: 700; } @media (max-width: 540px) { .input-dot label { display: none; } .input-indicator { padding: 10px 8px; } .input-line { margin-bottom: 0; } } /* ============================================================ 사주 페이지 ============================================================ */ .saju-stage { display: flex; justify-content: center; gap: 14px; margin-bottom: 20px; } .saju-pillar-back { width: 50px; height: 100px; background: linear-gradient(180deg, #3a2a68, #1f1140); border: 1.5px solid var(--gold); border-radius: 6px; box-shadow: 0 0 16px rgba(245,215,110,0.3); animation: pillar-pulse 1.6s ease-in-out infinite; } .saju-pillar-back:nth-child(2) { animation-delay: 0.12s; } .saju-pillar-back:nth-child(3) { animation-delay: 0.24s; } .saju-pillar-back:nth-child(4) { animation-delay: 0.36s; } @keyframes pillar-pulse { 0%, 100% { transform: scaleY(1); opacity: 0.6; } 50% { transform: scaleY(1.05); opacity: 1; } } .paid-report-loading { text-align: center; padding: 28px 24px; border-color: rgba(245,215,110,0.34); background: radial-gradient(circle at 50% 0%, rgba(245,215,110,0.14), transparent 34%), rgba(255,255,255,0.04); } .paid-loading-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 12px; margin-bottom: 14px; border-radius: 999px; border: 1px solid rgba(245,215,110,0.42); background: rgba(245,215,110,0.10); color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; } .paid-loading-title { margin: 0 0 12px; font-size: clamp(22px, 5.6vw, 30px); line-height: 1.2; color: var(--text); } .paid-loading-desc, .paid-loading-guide { margin: 0 auto; max-width: 560px; color: var(--text-soft); font-size: 15px; line-height: 1.72; word-break: keep-all; overflow-wrap: anywhere; } .paid-loading-guide { margin-top: 12px; color: var(--text-dim); } .paid-loading-guide strong { color: var(--gold); font-weight: 800; } .paid-loading-steps { display: grid; gap: 10px; max-width: 520px; margin: 22px auto 0; padding: 0; list-style: none; text-align: left; } .paid-loading-steps li { position: relative; display: flex; align-items: center; min-height: 44px; padding: 12px 14px 12px 42px; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; background: rgba(255,255,255,0.045); color: var(--text-soft); font-size: 14px; font-weight: 700; line-height: 1.45; animation: paid-step-pulse 4.8s ease-in-out infinite; animation-delay: calc(var(--step-index) * 1.2s); } .paid-loading-steps li::before { content: ''; position: absolute; left: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 6px rgba(232,160,191,0.12), 0 0 14px rgba(232,160,191,0.42); } @keyframes paid-step-pulse { 0%, 72%, 100% { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.045); transform: translateY(0); } 12%, 28% { border-color: rgba(245,215,110,0.42); background: rgba(245,215,110,0.10); transform: translateY(-1px); } } .birth-info { font-size: 13px; color: var(--text-dim); margin: 0 0 16px; text-align: center; } .saju-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; } .saju-grid:has(.saju-pillar:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } .saju-pillar { background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 10px; padding: 14px 8px; text-align: center; } .saju-pillar.day-pillar { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink) inset, 0 0 18px rgba(232,160,191,0.18); background: rgba(232,160,191,0.06); } .pillar-label { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; letter-spacing: 0.04em; } .pillar-chinese { font-size: 22px; color: var(--text); font-weight: 700; line-height: 1.1; } .pillar-korean { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; } .pillar-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin: 3px 0; padding: 0 4px; } .pillar-gan-zhi { font-weight: 600; color: var(--text-soft); } .pillar-gan-zhi small { color: var(--text-dim); font-weight: 400; } .pillar-element { color: var(--text-soft); font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,0.06); } .pillar-animal { margin-top: 8px; font-size: 11px; color: var(--text-dim); } .day-gan-callout { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, rgba(245,215,110,0.10), rgba(232,160,191,0.08)); border: 1px solid rgba(245,215,110,0.35); border-radius: 12px; margin-bottom: 18px; } .dgc-label { font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; } .dgc-value { font-size: 22px; color: var(--gold); font-weight: 700; text-shadow: 0 0 12px rgba(245,215,110,0.3); } .dgc-element { margin-left: auto; padding: 4px 12px; border-radius: 12px; font-size: 12px; color: #fff; font-weight: 700; } .elements-title { font-size: 13px; color: var(--text-dim); margin: 12px 0 8px; letter-spacing: 0.04em; } .elements-bar { display: flex; flex-direction: column; gap: 6px; } .element-row { display: grid; grid-template-columns: 28px 1fr 28px; gap: 10px; align-items: center; font-size: 12px; } .element-name { color: var(--text-soft); text-align: center; } .element-track { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; } .element-fill { height: 100%; transition: width 0.5s ease; } .element-count { text-align: right; color: var(--text-dim); } /* ── 사주 분석 ── */ .analysis-guide { padding: 14px 16px; margin: 0 0 12px; border: 1px solid rgba(245,215,110,0.26); border-radius: 14px; background: linear-gradient(135deg, rgba(245,215,110,0.10), rgba(124,77,188,0.10)); } .analysis-guide-title { font-size: 14px; font-weight: 800; color: var(--gold); margin-bottom: 6px; } .analysis-guide-desc { font-size: 13px; line-height: 1.7; color: var(--text-soft); margin-bottom: 12px; } .analysis-guide-desc strong { color: var(--text); } .analysis-term-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .analysis-term { display: block; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); } .analysis-term b { display: block; color: var(--pink); font-size: 12px; margin-bottom: 3px; } .analysis-term em { display: block; font-style: normal; font-size: 12px; line-height: 1.55; color: var(--text-dim); } .analysis-callout { padding: 12px 16px; background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 12px; margin-bottom: 10px; font-size: 14px; line-height: 1.7; color: var(--text-soft); } .analysis-callout strong { color: var(--pink); } .analysis-callout.yongshin { border-color: rgba(245,215,110,0.4); background: linear-gradient(135deg, rgba(245,215,110,0.08), rgba(232,160,191,0.05)); } .analysis-reason { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.10); font-size: 12px; color: var(--text-dim); } .easy-label { font-size: 11px; color: var(--gold-soft); letter-spacing: 0.06em; font-weight: 800; margin-bottom: 2px; } .easy-meaning { margin-top: 5px; font-size: 13px; color: var(--text-soft); line-height: 1.65; } .analysis-sub-title { font-size: 14px; color: var(--pink); margin: 16px 0 8px; letter-spacing: 0.04em; font-weight: 700; } .interactions-list, .stars-list { display: flex; flex-direction: column; gap: 8px; } .interaction-tag, .star-tag { padding: 10px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--text-soft); } .int-type { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 10px; background: rgba(124,77,188,0.22); color: var(--purple-soft); margin-right: 4px; } .int-type-good { background: rgba(157,224,173,0.18); color: var(--good); } .int-type-bad { background: rgba(232,160,191,0.20); color: var(--pink); } .int-pos, .star-pos { font-size: 11px; color: var(--text-soft); } .int-desc, .star-desc { font-size: 12px; color: var(--text-soft); } .int-reason, .relation-factor-reason { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(245, 215, 110, 0.08); border: 1px solid rgba(245, 215, 110, 0.16); color: var(--text); font-size: 12px; line-height: 1.65; } .int-reason span, .relation-factor-reason span { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(245, 215, 110, 0.16); color: var(--gold-soft); font-size: 10px; font-weight: 800; } .relation-factor-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; } .relation-factor-item { padding: 10px 12px; border: 1px solid var(--card-border); border-radius: 12px; background: rgba(255, 255, 255, 0.035); } .relation-factor-main { color: var(--text); font-size: 13px; font-weight: 800; line-height: 1.55; } .relation-factor-desc { margin-top: 4px; color: var(--text-soft); font-size: 12px; line-height: 1.6; } .twelve-list { display: flex; flex-wrap: wrap; gap: 8px; } .twelve-tag { display: inline-block; padding: 6px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 10px; font-size: 13px; color: var(--text-soft); } .pillar-sipsin { font-size: 10px; color: var(--gold-soft); padding: 2px 6px; border-radius: 8px; background: rgba(245,215,110,0.16); margin: 2px auto 4px; display: inline-block; letter-spacing: 0.02em; } .pillar-sipsin-zhi { font-size: 9px; color: var(--text-dim); margin: 1px 0 4px; } /* 대운 */ .daeun-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-top: 12px; } .daeun-card { background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 6px; text-align: center; } .daeun-age { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; } .daeun-ganzhi { font-size: 16px; color: var(--text); font-weight: 700; } .daeun-korean { font-size: 11px; color: var(--text-dim); margin: 2px 0; } .daeun-elements { font-size: 10px; font-weight: 600; } .daeun-elements span { margin: 0 2px; } .daeun-current { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink) inset, 0 0 14px rgba(232,160,191,0.25); background: rgba(232,160,191,0.08); } @media (max-width: 540px) { .saju-grid { grid-template-columns: repeat(2, 1fr); } .daeun-grid { grid-template-columns: repeat(3, 1fr); } .analysis-callout { padding: 10px 12px; font-size: 13px; } .analysis-guide { padding: 12px; } .analysis-term-grid { grid-template-columns: 1fr; } .interaction-tag, .star-tag { padding: 8px 10px; font-size: 12px; } .twelve-list { gap: 6px; } .twelve-tag { padding: 5px 8px; font-size: 12px; } .months-grid { grid-template-columns: repeat(3, 1fr); } } .saju-sections { display: flex; flex-direction: column; gap: 16px; } .saju-section { position: relative; padding: 0; overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-left: 3px solid var(--purple-light); } .saju-section .section-title { font-size: 16px; color: #fff; background: linear-gradient(90deg, var(--purple), var(--pink)); margin: 0; padding: 12px 20px; border-bottom: none; letter-spacing: 0.04em; font-weight: 700; } .saju-section .section-body { padding: 20px 20px 16px; white-space: pre-wrap; font-size: 15px; line-height: 1.9; color: var(--text-soft); } .section-easy-summary { margin: 0 20px 22px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(245,215,110,0.28); background: linear-gradient(135deg, rgba(245,215,110,0.13), rgba(232,160,191,0.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .section-easy-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--gold); } .section-easy-label::before { content: '💡'; font-size: 13px; } .section-easy-text { white-space: pre-wrap; font-size: 14px; line-height: 1.75; color: var(--text); } .section-easy-text .kw { color: var(--gold); font-weight: 800; } .compat-score-card { margin-top: 18px; padding: 16px 18px; text-align: center; border: 1px solid rgba(245,215,110,0.20); border-radius: 18px; background: linear-gradient(135deg, rgba(245,215,110,0.08), rgba(232,160,191,0.08)); } .compat-score-label { margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--gold-soft); } .compat-score-value { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 0; color: var(--text); line-height: 1.35; letter-spacing: -0.02em; } .compat-score-range { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px; background: rgba(245,215,110,0.16); border: 1px solid rgba(245,215,110,0.28); color: var(--gold); font-size: 20px; font-weight: 900; white-space: nowrap; } .compat-score-copy { max-width: 420px; color: var(--text); font-size: 18px; font-weight: 800; word-break: keep-all; } .compat-score-value--band { align-items: center; justify-content: center; gap: 8px; } .compat-score-value--band .compat-score-range { padding: 5px 10px; font-size: 15px; letter-spacing: -0.01em; } .compat-score-value--band .compat-score-copy { max-width: min(100%, 360px); font-size: clamp(15px, 2.6vw, 17px); line-height: 1.48; font-weight: 850; } .compat-score-value--number .compat-score-range { font-size: 28px; } .compat-score-value--number .compat-score-copy { color: var(--text-soft); font-size: 16px; } .compat-score-value--band, .compat-score-value--number { display: grid; grid-template-columns: minmax(116px, 148px) minmax(0, 1fr); align-items: center; gap: 16px; text-align: left; } .compat-score-orb { --score-pct: inherit; width: clamp(112px, 24vw, 148px); aspect-ratio: 0.86; margin: 0 auto; border-radius: 48% / 56%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: radial-gradient(circle at 50% 52%, rgba(38,25,46,0.96) 0 54%, transparent 55%), conic-gradient(from -90deg, var(--gold) var(--score-pct, 72%), rgba(255,255,255,0.12) 0); box-shadow: 0 18px 34px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(245,215,110,0.22); } .compat-score-num { color: #fff7df; font-size: clamp(24px, 5vw, 36px); font-weight: 950; letter-spacing: -0.06em; } .compat-score-value--band .compat-score-num { max-width: 90px; font-size: clamp(15px, 2.9vw, 20px); letter-spacing: -0.04em; line-height: 1.15; text-align: center; } .compat-score-denom { color: rgba(255,255,255,0.66); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; } .compat-score-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; } .compat-score-headline { color: var(--gold); font-size: 14px; letter-spacing: 0.04em; } .compat-score-value--number .compat-score-copy, .compat-score-value--band .compat-score-copy { max-width: none; font-size: clamp(14px, 2.4vw, 16px); line-height: 1.65; font-weight: 750; color: var(--text); } .compat-mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .compat-metric-pill { --metric-pct: 70%; min-height: 46px; padding: 9px 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(245,215,110,0.30) var(--metric-pct), rgba(255,255,255,0.06) 0), rgba(255,255,255,0.04); border: 1px solid rgba(245,215,110,0.20); display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); } .compat-metric-pill.risk { background: linear-gradient(90deg, rgba(232,160,191,0.28) var(--metric-pct), rgba(255,255,255,0.06) 0), rgba(255,255,255,0.04); border-color: rgba(232,160,191,0.24); } .compat-metric-pill b { font-size: 12px; font-weight: 900; } .compat-metric-pill i { font-style: normal; font-size: 13px; font-weight: 950; } .compat-reason-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 2px; } .compat-reason-card { position: relative; min-width: 0; padding: 36px 13px 14px; border-radius: 16px; border: 1px solid rgba(245,215,110,0.18); background: linear-gradient(145deg, rgba(245,215,110,0.10), rgba(232,160,191,0.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .compat-reason-card p { margin: 0; font-size: 14px; line-height: 1.74; word-break: keep-all; } .compat-reason-no { position: absolute; top: 10px; left: 12px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: #2a1530; font-size: 12px; font-weight: 950; } .compat-digest-card { position: relative; overflow: hidden; border-color: rgba(245,215,110,0.28); background: radial-gradient(circle at 16% 10%, rgba(245,215,110,0.16), transparent 34%), radial-gradient(circle at 88% 8%, rgba(232,160,191,0.16), transparent 30%), linear-gradient(145deg, rgba(31,21,43,0.96), rgba(21,17,31,0.96)); } .compat-digest-card::before { content: ''; position: absolute; inset: -40% -20% auto; height: 150px; background: linear-gradient(90deg, transparent, rgba(245,215,110,0.12), transparent); pointer-events: none; } .compat-digest-head { position: relative; margin-bottom: 14px; } .compat-digest-kicker { display: inline-flex; margin-bottom: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(245,215,110,0.14); color: var(--gold); font-size: 12px; font-weight: 950; letter-spacing: 0.08em; } .compat-digest-head p { margin: 9px 0 0; color: var(--text-soft); font-size: 14px; line-height: 1.6; } .compat-bridge-visual { position: relative; display: grid; grid-template-columns: 86px minmax(0, 1fr) 86px; gap: 12px; align-items: center; margin: 16px 0; padding: 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.055); } .compat-person-node { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid rgba(245,215,110,0.24); background: radial-gradient(circle at 50% 35%, rgba(245,215,110,0.20), rgba(255,255,255,0.055)); box-shadow: 0 14px 30px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.10); } .compat-person-node--you { border-color: rgba(232,160,191,0.30); background: radial-gradient(circle at 50% 35%, rgba(232,160,191,0.22), rgba(255,255,255,0.055)); } .compat-person-node b { color: #fff7df; font-size: 22px; font-weight: 950; } .compat-person-node span { color: rgba(255,255,255,0.70); font-size: 12px; font-weight: 850; } .compat-bridge-line { position: relative; min-height: 72px; display: grid; place-items: center; text-align: center; color: #fff; } .compat-bridge-line::before, .compat-bridge-line i { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 10px; transform: translateY(-50%); border-radius: 999px; } .compat-bridge-line::before { background: rgba(255,255,255,0.10); } .compat-bridge-line i { right: auto; width: var(--bridge-pct, 74%); background: linear-gradient(90deg, var(--gold), var(--pink)); box-shadow: 0 0 24px rgba(245,215,110,0.20); } .compat-bridge-line strong, .compat-bridge-line span { position: relative; z-index: 1; display: inline-flex; padding: 2px 8px; border-radius: 999px; background: rgba(26,18,34,0.82); } .compat-bridge-line strong { color: var(--gold); font-size: 28px; font-weight: 950; line-height: 1; } .compat-bridge-line span { margin-top: 4px; color: rgba(255,255,255,0.76); font-size: 12px; font-weight: 850; } .compat-signal-grid, .compat-digest-list, .compat-action-board, .compat-mini-bar-board, .compat-section-visual--timeline > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .compat-signal-card { min-width: 0; padding: 13px; border-radius: 18px; border: 1px solid rgba(245,215,110,0.18); background: rgba(255,255,255,0.06); text-align: center; } .compat-signal-card--risk { border-color: rgba(232,160,191,0.26); } .compat-signal-ring { width: 68px; aspect-ratio: 1; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle, rgba(31,21,43,0.96) 0 55%, transparent 56%), conic-gradient(from -90deg, var(--gold) var(--signal-pct), rgba(255,255,255,0.13) 0); } .compat-signal-card--risk .compat-signal-ring { background: radial-gradient(circle, rgba(31,21,43,0.96) 0 55%, transparent 56%), conic-gradient(from -90deg, var(--pink) var(--signal-pct), rgba(255,255,255,0.13) 0); } .compat-signal-ring strong { color: #fff7df; font-size: 20px; font-weight: 950; line-height: 1; } .compat-signal-ring span { color: rgba(255,255,255,0.64); font-size: 10px; font-weight: 850; } .compat-signal-card > b { display: block; color: var(--gold); font-size: 14px; font-weight: 950; } .compat-signal-card p { margin: 5px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.45; } .compat-timeline-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; } .compat-time-chip { min-width: 0; padding: 10px 11px; border-radius: 15px; border: 1px solid rgba(245,215,110,0.18); background: linear-gradient(135deg, rgba(245,215,110,0.10), rgba(255,255,255,0.04)); } .compat-time-chip--caution { border-color: rgba(232,160,191,0.26); background: linear-gradient(135deg, rgba(232,160,191,0.12), rgba(255,255,255,0.04)); } .compat-time-chip b { display: block; margin-bottom: 4px; color: var(--gold); font-size: 12px; font-weight: 950; } .compat-time-chip span, .compat-time-chip em { color: var(--text-soft); font-size: 12px; font-style: normal; line-height: 1.45; } .compat-digest-list { margin-top: 12px; } .compat-digest-list article, .compat-action-board article { min-width: 0; padding: 12px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); } .compat-digest-list b, .compat-action-board b { display: block; margin-bottom: 6px; color: var(--gold); font-size: 12px; font-weight: 950; } .compat-digest-list span, .compat-action-board span { color: var(--text-soft); font-size: 13px; line-height: 1.58; } .compat-action-board { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 14px; } .compat-action-board article.danger { border-color: rgba(232,160,191,0.25); } .compat-section-visual { margin: 0 0 14px; } .compat-section-visual--timeline { padding: 13px; border-radius: 17px; border: 1px solid rgba(245,215,110,0.18); background: rgba(255,255,255,0.045); } .compat-section-visual--timeline > b { display: block; margin-bottom: 10px; color: var(--gold); font-size: 13px; font-weight: 950; } .compat-mini-bar-board { grid-template-columns: 1fr; margin-bottom: 14px; } .compat-bar { --bar-pct: 70%; display: grid; grid-template-columns: 96px minmax(0, 1fr) 34px; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 13px; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,215,110,0.16); } .compat-bar::before { content: ''; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--gold) var(--bar-pct), rgba(255,255,255,0.10) 0); } .compat-bar--risk::before { background: linear-gradient(90deg, var(--pink) var(--bar-pct), rgba(255,255,255,0.10) 0); } .compat-bar b { order: -1; color: var(--text); font-size: 12px; font-weight: 900; } .compat-bar i { color: var(--gold); font-size: 12px; font-style: normal; font-weight: 950; text-align: right; } html.theme-light .compat-digest-card { background: radial-gradient(circle at 16% 10%, rgba(184,145,95,0.16), transparent 34%), radial-gradient(circle at 88% 8%, rgba(232,160,191,0.16), transparent 30%), linear-gradient(145deg, #fffaf0, #fff7fb); } html.theme-light .compat-person-node b, html.theme-light .compat-bridge-line { color: var(--text); } html.theme-light .compat-person-node span, html.theme-light .compat-signal-ring span { color: var(--text-muted); } html.theme-light .compat-bridge-line strong, html.theme-light .compat-bridge-line span { background: rgba(255,250,240,0.90); } html.theme-light .compat-signal-ring { background: radial-gradient(circle, #fffaf0 0 55%, transparent 56%), conic-gradient(from -90deg, var(--gold) var(--signal-pct), rgba(184,145,95,0.14) 0); } html.theme-light .compat-signal-card--risk .compat-signal-ring { background: radial-gradient(circle, #fffaf0 0 55%, transparent 56%), conic-gradient(from -90deg, var(--pink) var(--signal-pct), rgba(184,145,95,0.14) 0); } .saju-section .section-body p { margin: 0 0 14px; word-break: keep-all; } .saju-section .section-body p:last-child { margin-bottom: 0; } .compat-paid-answer-panel { border-color: rgba(245,215,110,0.36); background: radial-gradient(circle at 15% 0%, rgba(245,215,110,0.16), transparent 34%), linear-gradient(145deg, rgba(34,23,49,0.98), rgba(23,16,34,0.96)); } .compat-unlock-value-panel { border-color: rgba(245,215,110,0.34); background: radial-gradient(circle at 12% 0%, rgba(245,215,110,0.15), transparent 34%), radial-gradient(circle at 92% 8%, rgba(232,160,191,0.14), transparent 32%), linear-gradient(145deg, rgba(33,22,47,0.98), rgba(20,15,31,0.96)); } .compat-paid-head span { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(245,215,110,0.13); border: 1px solid rgba(245,215,110,0.26); color: var(--gold); font-size: 11px; font-weight: 950; letter-spacing: 0.08em; } .compat-paid-head p { margin: 8px 0 0; color: var(--text-soft); line-height: 1.6; } .compat-answer-grid, .compat-money-value-grid, .compat-unlock-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 15px; } .compat-answer-grid article, .compat-money-value-grid span, .compat-unlock-value-grid article { min-width: 0; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 15px; background: rgba(255,255,255,0.055); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .compat-unlock-value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .compat-unlock-value-grid article.is-paid { border-color: rgba(245,215,110,0.24); background: linear-gradient(180deg, rgba(245,215,110,0.10), rgba(255,255,255,0.045)); } .compat-unlock-value-grid i, .compat-unlock-value-grid b, .compat-unlock-value-grid strong, .compat-unlock-value-grid span { display: block; word-break: keep-all; } .compat-unlock-value-grid i { width: fit-content; margin-bottom: 9px; padding: 3px 8px; border-radius: 999px; background: rgba(232,160,191,0.14); color: var(--pink); font-size: 10px; font-style: normal; font-weight: 950; letter-spacing: 0.05em; } .compat-unlock-value-grid article.is-paid i { background: rgba(245,215,110,0.15); color: var(--gold); } .compat-unlock-value-grid b { color: var(--gold); font-size: 12px; font-weight: 950; } .compat-unlock-value-grid strong { margin: 6px 0; color: #fff7df; font-size: 14px; font-weight: 950; line-height: 1.45; } .compat-unlock-value-grid span { color: var(--text-soft); font-size: 12.5px; line-height: 1.5; } .compat-answer-grid article b, .compat-money-value-grid b { display: block; margin-bottom: 7px; color: var(--gold); font-size: 12px; font-weight: 950; } .compat-answer-grid article strong { display: block; margin-bottom: 7px; color: #fff7df; font-size: 22px; font-weight: 950; } .compat-answer-grid article.risk strong { color: var(--pink); } .compat-answer-grid article span, .compat-money-value-grid span { color: var(--text-soft); font-size: 13px; line-height: 1.55; } .compat-money-value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .compat-followup-card { border-color: rgba(232,160,191,0.34); background: radial-gradient(circle at 88% 12%, rgba(232,160,191,0.16), transparent 30%), linear-gradient(145deg, rgba(31,20,45,0.98), rgba(20,15,31,0.96)); } .question-credit-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; margin: 14px 0; border: 1px solid rgba(245,215,110,0.22); border-radius: 16px; background: rgba(245,215,110,0.08); } .question-credit-status span { color: var(--text-soft); font-weight: 800; } .question-credit-status strong { color: var(--gold); font-size: 20px; font-weight: 950; } .compat-followup-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .compat-followup-chip { border: 1px solid rgba(232,160,191,0.28); border-radius: 999px; padding: 8px 11px; background: rgba(255,255,255,0.055); color: var(--text); font-size: 12px; font-weight: 850; cursor: pointer; } .compat-followup-chip:hover { border-color: rgba(245,215,110,0.52); color: var(--gold); } .compat-question-ladder { border-color: rgba(232,160,191,0.34); background: radial-gradient(circle at 12% 0%, rgba(232,160,191,0.15), transparent 32%), radial-gradient(circle at 92% 18%, rgba(245,215,110,0.12), transparent 30%), linear-gradient(145deg, rgba(31,20,45,0.98), rgba(18,14,29,0.96)); } .compat-question-ladder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 15px; } .compat-question-ladder-step { min-width: 0; text-align: left; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 14px; background: rgba(255,255,255,0.055); color: var(--text); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); } .compat-question-ladder-step:hover { border-color: rgba(245,215,110,0.44); transform: translateY(-1px); } .compat-question-ladder-step i { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-bottom: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--gold)); color: #2a1530; font-size: 11px; font-style: normal; font-weight: 950; } .compat-question-ladder-step b { display: block; margin-bottom: 6px; color: var(--gold); font-size: 12px; font-weight: 950; } .compat-question-ladder-step span { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 900; line-height: 1.45; word-break: keep-all; } .compat-question-ladder-step em { display: block; color: var(--text-soft); font-size: 12px; font-style: normal; line-height: 1.5; word-break: keep-all; } .compat-mobile-summary-rail { display: none; border-color: rgba(232,160,191,0.32); background: radial-gradient(circle at 15% 0%, rgba(245,215,110,0.12), transparent 32%), linear-gradient(145deg, rgba(31,20,45,0.98), rgba(18,14,29,0.96)); } .compat-mobile-rail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 14px; } .compat-mobile-rail-grid article { min-width: 0; padding: 12px 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.055); } .compat-mobile-rail-grid b, .compat-mobile-rail-grid strong, .compat-mobile-rail-grid span { display: block; word-break: keep-all; } .compat-mobile-rail-grid b { color: var(--pink); font-size: 11px; font-weight: 950; letter-spacing: 0.04em; } .compat-mobile-rail-grid strong { margin: 4px 0; color: var(--gold); font-size: 16px; font-weight: 950; line-height: 1.25; } .compat-mobile-rail-grid span { color: var(--text-soft); font-size: 12px; line-height: 1.45; } .compat-mobile-jump-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .compat-mobile-jump-grid button { min-width: 0; min-height: 38px; border: 1px solid rgba(245,215,110,0.24); border-radius: 999px; background: rgba(245,215,110,0.08); color: #fff7df; font-size: 12px; font-weight: 950; word-break: keep-all; cursor: pointer; } .compat-mobile-jump-grid button:active { transform: translateY(1px); } .compat-evidence-checklist { border-color: rgba(245,215,110,0.30); background: radial-gradient(circle at 10% 0%, rgba(245,215,110,0.13), transparent 34%), radial-gradient(circle at 92% 6%, rgba(232,160,191,0.12), transparent 30%), linear-gradient(145deg, rgba(30,21,42,0.97), rgba(18,14,28,0.96)); } .compat-evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 15px; } .compat-evidence-grid article { min-width: 0; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.052); } .compat-evidence-grid article.is-on { border-color: rgba(245,215,110,0.34); background: linear-gradient(180deg, rgba(245,215,110,0.10), rgba(255,255,255,0.045)); } .compat-evidence-grid i { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-bottom: 9px; border-radius: 50%; background: rgba(232,160,191,0.16); color: var(--pink); font-size: 12px; font-style: normal; font-weight: 950; } .compat-evidence-grid article.is-on i { background: linear-gradient(135deg, var(--gold), var(--pink)); color: #2a1530; } .compat-evidence-grid b, .compat-evidence-grid strong, .compat-evidence-grid span { display: block; word-break: keep-all; } .compat-evidence-grid b { color: var(--gold); font-size: 13px; font-weight: 950; } .compat-evidence-grid strong { margin: 5px 0 7px; color: #fff7df; font-size: 13.5px; font-weight: 950; } .compat-evidence-grid span { color: var(--text-soft); font-size: 12.5px; line-height: 1.55; } .compat-evidence-next { margin: 13px 0 0; padding: 11px 12px; border-radius: 14px; border: 1px solid rgba(245,215,110,0.18); background: rgba(245,215,110,0.07); color: var(--text-soft); font-size: 13px; font-weight: 850; line-height: 1.55; } html.theme-light .compat-paid-answer-panel, html.theme-light .compat-followup-card { background: linear-gradient(145deg, #fffaf0, #fff4e3); } html.theme-light .compat-answer-grid article, html.theme-light .compat-money-value-grid span, html.theme-light .compat-unlock-value-grid article, html.theme-light .question-credit-status, html.theme-light .compat-followup-chip, html.theme-light .compat-mobile-rail-grid article, html.theme-light .compat-mobile-jump-grid button, html.theme-light .compat-evidence-grid article, html.theme-light .compat-decision-fork-step, html.theme-light .compat-question-ladder-step { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.22); } html.theme-light .compat-answer-grid article strong { color: var(--purple); } .compat-reader-needs-panel, .compat-matrix-panel, .compat-decision-fork-panel, .compat-date-planner, .compat-action-calendar, .compat-script-clinic { border-color: rgba(245,215,110,0.24); background: radial-gradient(circle at 88% 0%, rgba(245,215,110,0.12), transparent 32%), linear-gradient(145deg, rgba(31,21,43,0.92), rgba(23,17,33,0.94)); } .compat-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 16px; } .compat-topic-grid article { min-width: 0; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.055); } .compat-topic-grid i { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--pink)); color: #2a1530; font-style: normal; font-size: 12px; font-weight: 950; } .compat-topic-grid b { display: block; margin-bottom: 5px; color: var(--gold); font-size: 14px; font-weight: 950; } .compat-topic-grid span { color: var(--text-soft); font-size: 12.5px; line-height: 1.5; } .compat-3d-map-panel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: center; overflow: hidden; border-color: rgba(232,160,191,0.30); background: radial-gradient(circle at 72% 50%, rgba(232,160,191,0.18), transparent 36%), radial-gradient(circle at 18% 10%, rgba(245,215,110,0.15), transparent 30%), linear-gradient(145deg, rgba(29,20,43,0.98), rgba(16,13,24,0.98)); } .compat-3d-copy span { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(232,160,191,0.14); color: var(--pink); font-size: 11px; font-weight: 950; letter-spacing: 0.08em; } .compat-3d-copy p { color: var(--text-soft); line-height: 1.65; } .compat-orbit-stage { position: relative; height: 260px; perspective: 760px; transform-style: preserve-3d; display: grid; place-items: center; } .compat-orbit { position: absolute; inset: 38px 22px; border-radius: 50%; transform: rotateX(64deg) rotateZ(-12deg); border: 2px solid rgba(245,215,110,0.34); box-shadow: 0 0 34px rgba(245,215,110,0.13), inset 0 0 26px rgba(245,215,110,0.08); } .compat-orbit--gold::before, .compat-orbit--pink::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px rgba(245,215,110,0.65); left: calc(var(--compat-score, 74%) - 8px); top: -8px; } .compat-orbit--pink { inset: 58px 46px; transform: rotateX(64deg) rotateZ(32deg); border-color: rgba(232,160,191,0.38); box-shadow: 0 0 34px rgba(232,160,191,0.14), inset 0 0 26px rgba(232,160,191,0.08); } .compat-orbit--pink::before { left: calc(var(--compat-risk, 52%) - 8px); background: var(--pink); box-shadow: 0 0 18px rgba(232,160,191,0.65); } .compat-orb-core { position: relative; z-index: 2; width: 120px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 35% 28%, #fff7df, var(--gold) 36%, rgba(86,50,97,0.95) 72%); color: #2a1530; box-shadow: 0 24px 52px rgba(0,0,0,0.28), inset -14px -18px 28px rgba(42,21,48,0.26); } .compat-orb-core strong { font-size: 34px; font-weight: 950; line-height: 1; } .compat-orb-core span { font-size: 11px; font-weight: 950; } .compat-orb-dot { position: absolute; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); color: #fff7df; font-size: 12px; font-weight: 950; } .compat-orb-dot--me { left: 24px; bottom: 42px; } .compat-orb-dot--you { right: 26px; top: 44px; background: rgba(232,160,191,0.16); } .compat-matrix-table { display: grid; gap: 8px; margin-top: 16px; } .compat-matrix-row { display: grid; grid-template-columns: 92px 130px minmax(0, 1fr) minmax(110px, 0.8fr); gap: 10px; align-items: center; padding: 11px 12px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.052); } .compat-matrix-head { background: rgba(245,215,110,0.10); color: var(--gold); font-size: 12px; font-weight: 950; } .compat-matrix-row b { color: var(--gold); font-size: 13px; } .compat-matrix-row span, .compat-matrix-row strong { color: var(--text-soft); font-size: 12.5px; line-height: 1.45; } .compat-matrix-row strong { color: var(--text); font-weight: 900; } .compat-matrix-meter { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; } .compat-matrix-meter i { display: block; width: var(--meter, 70%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--pink)); } .compat-matrix-meter em { position: absolute; right: 0; top: -19px; color: var(--gold); font-size: 11px; font-style: normal; font-weight: 950; } .compat-decision-fork-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .compat-decision-fork-step { position: relative; min-width: 0; padding: 16px 14px 15px 46px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .compat-decision-fork-step i { position: absolute; left: 14px; top: 16px; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(245,215,110,0.16); color: var(--gold); font-size: 11px; font-style: normal; font-weight: 950; } .compat-decision-fork-step--1 i { background: rgba(232,160,191,0.16); color: var(--pink); } .compat-decision-fork-step--2 i { background: linear-gradient(135deg, var(--gold), var(--pink)); color: #2a1530; } .compat-decision-fork-step b, .compat-decision-fork-step strong, .compat-decision-fork-step span { display: block; word-break: keep-all; } .compat-decision-fork-step b { color: var(--pink); font-size: 12px; font-weight: 950; } .compat-decision-fork-step strong { margin: 5px 0 7px; color: var(--gold); font-size: 16px; line-height: 1.35; } .compat-decision-fork-step span { color: var(--text-soft); font-size: 12.5px; line-height: 1.6; } .compat-date-planner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .compat-date-planner-card { min-width: 0; padding: 15px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .compat-date-planner-card i { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 9px; border-radius: 50%; background: rgba(245,215,110,0.16); color: var(--gold); font-size: 11px; font-style: normal; font-weight: 950; } .compat-date-planner-card--1 i, .compat-date-planner-card--3 i { background: linear-gradient(135deg, var(--gold), var(--pink)); color: #2a1530; } .compat-date-planner-card b, .compat-date-planner-card strong, .compat-date-planner-card span { display: block; word-break: keep-all; } .compat-date-planner-card b { color: var(--pink); font-size: 12px; font-weight: 950; } .compat-date-planner-card strong { margin: 6px 0 8px; color: var(--gold); font-size: 15px; line-height: 1.35; } .compat-date-planner-card span { color: var(--text-soft); font-size: 12.5px; line-height: 1.58; } .compat-calendar-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .compat-calendar-step { position: relative; min-width: 0; padding: 16px 14px 15px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .compat-calendar-step::after { content: ''; position: absolute; left: 32px; right: -18px; top: 29px; height: 2px; background: linear-gradient(90deg, rgba(245,215,110,0.52), rgba(232,160,191,0.08)); z-index: 0; } .compat-calendar-step:last-child::after { display: none; } .compat-calendar-step i { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--pink)); color: #2a1530; font-style: normal; font-size: 12px; font-weight: 950; } .compat-calendar-step b { display: block; margin-bottom: 5px; color: var(--pink); font-size: 12px; font-weight: 950; } .compat-calendar-step strong { display: block; margin-bottom: 8px; color: var(--gold); font-size: 15px; line-height: 1.35; } .compat-calendar-step span { display: block; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; word-break: keep-all; } .compat-script-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .compat-script-card { min-width: 0; padding: 15px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .compat-script-card b, .compat-script-card strong, .compat-script-card span { display: block; word-break: keep-all; } .compat-script-card b { color: var(--pink); font-size: 12px; font-weight: 950; } .compat-script-card strong { margin: 7px 0 9px; color: var(--gold); font-size: 14px; line-height: 1.45; } .compat-script-card span { color: var(--text-soft); font-size: 12.5px; line-height: 1.58; } .compat-script-card--1 { border-color: rgba(232,160,191,0.28); background: rgba(232,160,191,0.075); } .compat-script-card--2 { border-color: rgba(245,215,110,0.25); } .compat-script-card--3 { border-color: rgba(245,215,110,0.34); background: rgba(245,215,110,0.075); } .compat-commitment-gauge { border-color: rgba(245,215,110,0.30); background: radial-gradient(circle at 12% 8%, rgba(245,215,110,0.14), transparent 32%), radial-gradient(circle at 88% 0%, rgba(232,160,191,0.14), transparent 30%), linear-gradient(145deg, rgba(30,21,42,0.97), rgba(18,14,28,0.96)); } .compat-commitment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .compat-commitment-card { min-width: 0; padding: 15px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .compat-commitment-card b, .compat-commitment-card p { display: block; word-break: keep-all; } .compat-commitment-card b { color: var(--gold); font-size: 14px; font-weight: 950; } .compat-commitment-card span { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; align-items: center; margin: 11px 0 10px; } .compat-commitment-card span i { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, var(--gold) 0 var(--commitment), rgba(255,255,255,0.11) var(--commitment) 100%); } .compat-commitment-card--1 span i { background: linear-gradient(90deg, var(--pink) 0 var(--commitment), rgba(255,255,255,0.11) var(--commitment) 100%); } .compat-commitment-card span em { color: #fff7df; font-size: 12px; font-style: normal; font-weight: 950; text-align: right; } .compat-commitment-card p { margin: 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.58; } .compat-commitment-tip { margin: 13px 0 0; padding: 12px 13px; border-radius: 16px; border: 1px solid rgba(245,215,110,0.20); background: rgba(245,215,110,0.075); color: var(--text-soft); font-size: 13px; line-height: 1.58; word-break: keep-all; } .compat-commitment-tip b { margin-right: 8px; color: var(--gold); font-weight: 950; } .compat-feeling-radar { background: radial-gradient(circle at 18% 10%, rgba(232,160,191,0.16), transparent 34%), linear-gradient(145deg, rgba(255,255,255,0.068), rgba(245,215,110,0.045)); } .compat-feeling-radar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .compat-feeling-radar-grid article { padding: 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; background: rgba(255,255,255,0.055); } .compat-feeling-radar-grid article div { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; } .compat-feeling-radar-grid b { color: #fff7df; font-size: 14px; font-weight: 950; } .compat-feeling-radar-grid strong { color: var(--gold); font-size: 20px; font-weight: 950; } .compat-feeling-radar-grid span { display: block; height: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.10); } .compat-feeling-radar-grid span i { display: block; width: var(--feeling, 72%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--gold)); } .compat-feeling-radar-grid p { margin: 9px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; word-break: keep-all; } .compat-scenario-simulator { border-color: rgba(245,215,110,0.28); background: radial-gradient(circle at 14% 0%, rgba(245,215,110,0.14), transparent 32%), radial-gradient(circle at 90% 8%, rgba(232,160,191,0.14), transparent 30%), linear-gradient(145deg, rgba(30,21,42,0.97), rgba(18,14,28,0.96)); } .compat-scenario-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .compat-scenario-card { min-width: 0; padding: 15px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .compat-scenario-card i { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; background: rgba(232,160,191,0.16); color: var(--pink); font-size: 12px; font-style: normal; font-weight: 950; } .compat-scenario-card--1 i, .compat-scenario-card--2 i { background: linear-gradient(135deg, var(--gold), var(--pink)); color: #2a1530; } .compat-scenario-card b, .compat-scenario-card strong, .compat-scenario-card span { display: block; word-break: keep-all; } .compat-scenario-card b { color: var(--pink); font-size: 12px; font-weight: 950; } .compat-scenario-card strong { margin: 6px 0 8px; color: var(--gold); font-size: 15px; line-height: 1.35; } .compat-scenario-card span { color: var(--text-soft); font-size: 12.5px; line-height: 1.6; } .compat-risk-heatmap-panel { border-color: rgba(232,160,191,0.26); background: radial-gradient(circle at 18% 8%, rgba(232,160,191,0.16), transparent 30%), linear-gradient(145deg, rgba(28,20,39,0.97), rgba(15,12,24,0.96)); } .compat-risk-heatmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .compat-risk-heatmap article { min-width: 0; padding: 15px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .compat-risk-heatmap b, .compat-risk-heatmap strong, .compat-risk-heatmap p { display: block; word-break: keep-all; } .compat-risk-heatmap b { color: var(--pink); font-size: 12px; font-weight: 950; } .compat-risk-heatmap strong { margin: 5px 0 10px; color: var(--gold); font-size: 15px; line-height: 1.35; } .compat-risk-heatmap span { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 8px; align-items: center; margin-bottom: 10px; } .compat-risk-heatmap span i { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, rgba(245,215,110,0.92) 0 var(--risk), rgba(255,255,255,0.11) var(--risk) 100%); } .compat-risk-heatmap span em { color: #fff7df; font-size: 12px; font-style: normal; font-weight: 950; text-align: right; } .compat-risk-heatmap p { margin: 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.58; } html.theme-light .compat-feeling-radar-grid article { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.20); } html.theme-light .compat-feeling-radar-grid b { color: var(--text); } html.theme-light .compat-feeling-radar-grid span { background: rgba(184,145,95,0.14); } html.theme-light .compat-scenario-card { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.20); } html.theme-light .compat-commitment-card { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.20); } html.theme-light .compat-commitment-card span em { color: var(--text); } html.theme-light .compat-risk-heatmap article { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.20); } html.theme-light .compat-risk-heatmap span em { color: var(--text); } html.theme-light .compat-calendar-step { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.20); } html.theme-light .compat-date-planner-card { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.20); } html.theme-light .compat-script-card { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.20); } html.theme-light .compat-script-card--1 { border-color: rgba(232,160,191,0.28); } html.theme-light .compat-calendar-step::after { background: linear-gradient(90deg, rgba(184,145,95,0.34), rgba(232,160,191,0.10)); } html.theme-light .compat-reader-needs-panel, html.theme-light .compat-matrix-panel, html.theme-light .compat-3d-map-panel, html.theme-light .compat-question-ladder, html.theme-light .compat-feeling-radar, html.theme-light .compat-commitment-gauge, html.theme-light .compat-scenario-simulator, html.theme-light .compat-risk-heatmap-panel, html.theme-light .compat-decision-fork-panel, html.theme-light .compat-date-planner, html.theme-light .compat-action-calendar, html.theme-light .compat-script-clinic { background: linear-gradient(145deg, #fffaf0, #fff7fb); } html.theme-light .compat-topic-grid article, html.theme-light .compat-matrix-row { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.20); } html.theme-light .compat-orb-dot { color: var(--text); background: rgba(184,145,95,0.12); } @media (max-width: 640px) { .compat-score-value--band, .compat-score-value--number { grid-template-columns: 1fr; text-align: center; } .compat-score-side { align-items: stretch; } .compat-mini-metrics, .compat-reason-grid, .compat-signal-grid, .compat-digest-list, .compat-mobile-rail-grid, .compat-timeline-strip, .compat-answer-grid, .compat-money-value-grid, .compat-unlock-value-grid, .compat-topic-grid, .compat-question-ladder-grid, .compat-decision-fork-grid, .compat-date-planner-grid, .compat-evidence-grid, .compat-feeling-radar-grid, .compat-commitment-grid, .compat-scenario-grid, .compat-risk-heatmap, .compat-calendar-grid, .compat-script-grid, .compat-section-visual--timeline > div { grid-template-columns: 1fr; } .compat-3d-map-panel { grid-template-columns: 1fr; } .compat-orbit-stage { height: 220px; } .compat-calendar-step::after { left: 29px; right: auto; top: 42px; bottom: -18px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(245,215,110,0.52), rgba(232,160,191,0.08)); } .compat-matrix-row { grid-template-columns: 1fr; gap: 6px; } .compat-bridge-visual { grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 8px; padding: 12px; } .compat-person-node b { font-size: 17px; } .compat-bridge-line strong { font-size: 22px; } .compat-action-board { grid-template-columns: 1fr; } .compat-bar { grid-template-columns: 82px minmax(0, 1fr) 30px; } .compat-score-card { padding: 16px 14px; } .compat-mobile-summary-rail { display: block; } .compat-mobile-rail-grid article { display: grid; grid-template-columns: 42px minmax(76px, 0.7fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 11px 12px; } .compat-mobile-rail-grid strong { margin: 0; } .compat-mobile-jump-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .compat-reason-card p { font-size: 13.5px; } } .saju-section.first-section { border-left-color: var(--pink); } .saju-section.first-section .section-title { background: linear-gradient(90deg, var(--pink), var(--gold)); color: #2a1530; } /* 키워드 강조 */ .section-body .kw { background: linear-gradient(180deg, transparent 60%, rgba(245,215,110,0.35) 60%); font-weight: 700; color: var(--text); padding: 0 2px; } /* ============================================================ 재회 사주 리포트 ============================================================ */ .form-section-title { font-size: 14px; color: var(--pink); margin: 12px 0 10px; letter-spacing: 0.06em; font-weight: 700; } .form-divider { border: none; border-top: 1px dashed var(--card-border); margin: 24px 0 18px; } .reunion-stage { display: flex; justify-content: center; align-items: center; gap: 24px; margin-bottom: 20px; height: 80px; } .reunion-orb { width: 32px; height: 32px; border-radius: 50%; animation: reunion-orbit 1.6s ease-in-out infinite; } .reunion-orb-1 { background: radial-gradient(circle, var(--gold-soft), var(--gold)); box-shadow: 0 0 18px rgba(245,215,110,0.6); } .reunion-orb-2 { background: radial-gradient(circle, var(--pink-soft), var(--purple)); box-shadow: 0 0 18px rgba(232,160,191,0.6); animation-delay: 0.4s; } @keyframes reunion-orbit { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } } .reunion-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-bottom: 18px; } .reunion-side { background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 12px; padding: 16px; text-align: center; } .reunion-label { font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; margin-bottom: 10px; } .reunion-saju { font-size: 18px; color: var(--text); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 10px; } .reunion-dayGan { font-size: 13px; color: var(--text-soft); } .reunion-dayGan .dayGan-element { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 10px; font-size: 11px; color: #fff; font-weight: 700; } .reunion-arrow { display: flex; align-items: center; font-size: 24px; color: var(--pink); } .relation-callout { padding: 16px 18px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; } .relation-svg { color: rgba(255,255,255,0.86); } .relation-type { font-size: 16px; color: var(--pink); font-weight: 700; margin-bottom: 6px; } .relation-desc { font-size: 14px; color: var(--text-soft); line-height: 1.7; } .months-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .month-card { background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 6px; text-align: center; } .month-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; } .month-ganzhi { font-size: 16px; color: var(--text); font-weight: 700; line-height: 1.2; } .month-korean { font-size: 11px; color: var(--text-dim); margin: 4px 0; } .month-element { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; color: #fff; font-weight: 700; } .reunion-flow-score-card { margin: 18px 0 22px; padding: 20px; border-radius: 22px; border: 1px solid rgba(245,215,110,0.22); background: linear-gradient(145deg, rgba(38,29,44,0.94), rgba(23,20,31,0.94)); box-shadow: 0 18px 42px rgba(0,0,0,0.24); overflow: hidden; } .reunion-flow-score-head { margin-bottom: 14px; } .reunion-flow-score-kicker { margin: 0 0 6px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } .reunion-flow-score-head h3 { margin: 0 0 8px; color: var(--text); font-size: 21px; letter-spacing: -0.04em; } .reunion-flow-score-head p:not(.reunion-flow-score-kicker) { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.65; } .reunion-flow-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .reunion-flow-score-item { min-width: 0; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.055); text-align: center; } .reunion-flow-score-item.risk-soft { border-color: rgba(224,122,95,0.20); background: rgba(224,122,95,0.075); } .reunion-flow-score-top { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-width: 0; text-align: center; } .reunion-flow-score-label { color: var(--text-soft); font-size: 13px; font-weight: 800; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; } .reunion-flow-score-value { flex: 0 0 auto; display: inline-flex; align-items: baseline; justify-content: center; min-width: 74px; color: var(--gold); font-size: 28px; line-height: 1; letter-spacing: -0.04em; text-align: center; } .reunion-flow-score-value em { margin-left: 2px; color: var(--text-dim); font-size: 12px; font-style: normal; line-height: 1; } .reunion-flow-score-bar { height: 7px; margin: 12px 0 10px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; } .reunion-flow-score-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--pink)); } .reunion-flow-score-item.risk-soft .reunion-flow-score-bar span { background: linear-gradient(90deg, #d4a85a, #e07a5f); } .reunion-flow-score-desc { margin: 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; } @media (max-width: 760px) { .reunion-flow-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .reunion-pair { grid-template-columns: 1fr; } .reunion-arrow { justify-content: center; transform: rotate(90deg); margin: 4px auto; } .months-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 390px) { .reunion-flow-score-card { padding: 16px; } .reunion-flow-score-grid { grid-template-columns: 1fr; } .reunion-flow-score-value { font-size: 26px; } } html.theme-light .reunion-flow-score-card { background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,248,243,0.94)); border-color: rgba(176,125,72,0.22); box-shadow: 0 16px 36px rgba(83,55,80,0.10); } html.theme-light .reunion-flow-score-item { background: rgba(255,255,255,0.72); border-color: rgba(124,77,188,0.14); } html.theme-light .reunion-flow-score-item.risk-soft { background: rgba(224,122,95,0.08); border-color: rgba(224,122,95,0.20); } html.theme-light .reunion-flow-score-bar { background: rgba(31,23,41,0.10); } html.theme-light .reunion-flow-score-value em { color: rgba(31,23,41,0.62); } html.theme-light .compat-score-card { background: linear-gradient(135deg, rgba(255,248,231,0.96), rgba(255,240,246,0.94)); border-color: rgba(176,125,72,0.24); } html.theme-light .compat-score-range { background: rgba(176,125,72,0.12); border-color: rgba(176,125,72,0.22); color: #8a6100; } html.theme-light .compat-score-copy { color: rgba(31,23,41,0.88); } /* 오행 분포 차트 영역 */ .elements-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; } .elements-chart { max-width: 260px; margin: 0 auto; } @media (max-width: 540px) { .elements-wrap { grid-template-columns: 1fr; gap: 12px; } } .reunion-chart-guide { margin: 10px 0 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(245,215,110,0.24); background: linear-gradient(135deg, rgba(245,215,110,0.10), rgba(232,160,191,0.07)); color: var(--text-soft); font-size: 13px; line-height: 1.65; } .reunion-chart-guide strong { display: block; margin-bottom: 4px; color: var(--gold); font-weight: 800; } .reunion-chart-guide span { display: block; } .reunion-radar-wrap { max-width: 380px; min-height: 380px; margin: 12px auto 8px; padding: 18px; border: 1px solid rgba(245,215,110,0.28); border-radius: 18px; background: rgba(18,13,29,0.92); box-shadow: inset 0 0 0 1px rgba(247,242,234,0.04), 0 14px 34px rgba(0,0,0,0.18); } .reunion-radar-wrap canvas { display: block; width: 100% !important; height: auto !important; } .radar-legend { display: flex; justify-content: center; gap: 24px; margin-bottom: 6px; font-size: 13px; color: var(--text-soft); } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .legend-dot.user-dot { background: var(--gold); } .legend-dot.partner-dot { background: var(--pink); } .months-flow-wrap { height: 120px; margin: 8px 0 16px; } .card-sub { margin: -6px 0 14px; font-size: 13px; color: var(--text-dim); } .relation-diagram { margin-top: 14px; text-align: center; } .relation-svg { width: 100%; max-width: 340px; height: auto; } /* ============================================================ 결과 5단계 페이지 ============================================================ */ /* 입력 단계 인디케이터 (재회 사주 등) */ .input-indicator { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 22px; padding: 14px 8px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .input-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .input-dot span { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--text-dim); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; transition: all 0.2s; } .input-dot label { font-size: 11px; color: var(--text-dim); letter-spacing: 0.02em; text-align: center; white-space: nowrap; margin-bottom: 0; } .input-dot.active span { background: var(--grad-button); color: #fff; box-shadow: 0 0 0 4px rgba(124,77,188,0.25); } .input-dot.active label { color: var(--pink); font-weight: 700; } .input-dot.done span { background: var(--pink); color: #fff; } .input-line { flex: 1; height: 2px; background: rgba(255,255,255,0.08); margin: 0 4px 18px; min-width: 24px; } .step-indicator { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .step-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; user-select: none; } .step-dot span { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--text-dim); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; transition: all 0.2s; } .step-dot label { font-size: 11px; color: var(--text-dim); cursor: pointer; letter-spacing: 0.02em; text-align: center; white-space: nowrap; margin-bottom: 0; } .step-dot.active span { background: var(--grad-button); color: #fff; box-shadow: 0 0 0 4px rgba(124,77,188,0.25); } .step-dot.active label { color: var(--pink); font-weight: 700; } .step-dot.done span { background: var(--pink); color: #fff; } .step-dot.done label { color: var(--text); } .step-line { flex: 1; height: 2px; background: rgba(255,255,255,0.08); margin: 0 4px 18px; } .step-page { animation: stepFadeIn 0.25s ease; } @keyframes stepFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .step-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .nav-btn { background: var(--grad-button); color: #fff; border: none; border-radius: 10px; padding: 11px 18px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s; min-width: 90px; width: auto; margin: 0; box-shadow: 0 4px 14px rgba(124,77,188,0.3); } .nav-btn:hover:not(:disabled) { opacity: 0.94; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,160,191,0.4); } .nav-btn:disabled { background: rgba(255,255,255,0.12); color: rgba(240,235,248,0.68); cursor: not-allowed; box-shadow: none; } .step-counter { font-size: 14px; color: var(--text-soft); font-weight: 600; } /* 재회 사주 다단계 입력 카드 가독성 보정 */ .reunion-input-shell .input-page.card { background: radial-gradient(circle at top left, rgba(124, 77, 188, 0.18), transparent 46%), linear-gradient(180deg, rgba(30, 16, 64, 0.96), rgba(15, 10, 30, 0.94)); border-color: rgba(245, 215, 110, 0.18); color: var(--text); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); } .reunion-input-shell .input-page.card label, .reunion-input-shell .input-page-title { color: var(--text); } .reunion-input-shell .input-page.card input, .reunion-input-shell .input-page.card textarea, .reunion-input-shell .input-page.card select { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: var(--text); } .reunion-input-shell .input-page.card input::placeholder, .reunion-input-shell .input-page.card textarea::placeholder { color: rgba(216, 208, 236, 0.72); } .reunion-input-shell .input-page.card .cal-toggle-option { color: var(--text-soft); } .question-credit-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(184,145,95,.35); border-radius: 14px; background: rgba(184,145,95,.10); color: var(--text-soft); } .question-credit-status strong { color: var(--gold); font-size: 18px; } .question-pack-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); } .question-pack-title { margin: 0 0 10px; color: var(--text-soft); font-size: 14px; } .question-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .question-pack-btn { border: 1px solid rgba(184,145,95,.35); border-radius: 14px; background: rgba(255,255,255,.05); color: var(--text-main); padding: 12px 10px; cursor: pointer; } .question-pack-btn.best { border-color: rgba(212,168,90,.75); background: linear-gradient(135deg, rgba(184,145,95,.22), rgba(160,64,80,.16)); } .question-pack-btn strong { display: block; margin-top: 4px; color: var(--gold); } @media (max-width: 640px) { .question-pack-grid { grid-template-columns: 1fr; } } .reunion-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .reunion-detail-grid label { margin-top: 0; } @media (max-width: 640px) { .reunion-detail-grid { grid-template-columns: 1fr; } } /* ============================================================ 이메일 수집 ============================================================ */ .email-collect { margin-top: 24px; padding: 26px 22px 22px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(232,160,191,0.18), transparent 70%), var(--card-bg); border: 1px solid var(--card-border-strong); border-radius: 16px; position: relative; overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .email-collect-icon { display: block; width: 46px; height: 36px; margin: 0 auto 12px; color: var(--pink); opacity: 0.85; } .email-collect-title { font-size: 16px; font-weight: 700; color: var(--pink); margin: 0 0 4px; letter-spacing: 0.02em; } .email-collect-desc { font-size: 13px; color: var(--text-dim); margin: 0 0 16px; line-height: 1.5; } .email-collect-field { display: flex; align-items: center; background: rgba(255,255,255,0.06); border: 1.5px solid var(--card-border); border-radius: 12px; padding: 0 4px 0 0; transition: border-color 0.2s, box-shadow 0.2s; } .email-collect-field:focus-within { border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(124,77,188,0.18); } .email-collect-at { flex-shrink: 0; width: 42px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--pink); opacity: 0.75; border-right: 1px solid var(--card-border); margin-right: 2px; } .email-collect-field input[type="email"] { flex: 1; min-width: 0; background: transparent; color: var(--text); border: none; padding: 13px 10px; font-family: inherit; font-size: 15px; outline: none; } .email-collect-field input[type="email"]::placeholder { color: var(--text-mute); } .email-collect-foot { margin: 12px 0 0; font-size: 11px; color: var(--text-mute); line-height: 1.5; } .email-collect--result { margin-top: 20px; } .email-collect-btn { display: inline-block; margin-top: 14px; padding: 12px 32px; width: auto; background: var(--grad-button); color: #fff; border: none; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(124,77,188,0.35); } .email-collect-btn:hover:not(:disabled) { opacity: 0.94; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,160,191,0.45); } .email-collect-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* ============================================================ 추가 질문 채팅 ============================================================ */ .followup-card h2 { margin-bottom: 6px; } .followup-chat { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .chat-bubble { padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.75; max-width: 88%; white-space: pre-wrap; word-break: break-word; } .chat-q { align-self: flex-end; background: var(--grad-button); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 2px 12px rgba(124,77,188,0.3); } .chat-a { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--card-border); color: var(--text-soft); border-bottom-left-radius: 4px; } .chat-loading { color: var(--text-dim); font-style: italic; } .chat-error { color: var(--error); } .followup-input-wrap { display: flex; gap: 8px; align-items: flex-end; } .followup-input-wrap textarea { flex: 1; min-height: 44px; resize: none; } .followup-send-btn { flex-shrink: 0; padding: 12px 18px; width: auto; background: var(--grad-button); color: #fff; border: none; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s; margin: 0; box-shadow: 0 4px 14px rgba(124,77,188,0.3); } .followup-send-btn:hover:not(:disabled) { opacity: 0.94; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,160,191,0.4); } .followup-send-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } @media (max-width: 540px) { .step-dot label { display: none; } .step-indicator { padding: 12px 4px; } } /* ============================================================ 스크롤 페이드인 ============================================================ */ .fade-in-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ 모바일 최적화 (375px 우선) ============================================================ */ @media (max-width: 480px) { h1 { font-size: 23px; } h2 { font-size: 16px; } .card { padding: 18px 16px; border-radius: 14px; } .saju-section .section-body { padding: 16px 16px 12px; font-size: 14.5px; } .section-easy-summary { margin: 0 16px 18px; padding: 12px 13px; } .section-easy-text { font-size: 13.5px; } .saju-section .section-title { padding: 11px 16px; font-size: 15px; } button { padding: 15px 18px; font-size: 15px; } input[type="text"], input[type="email"], input[type="date"], select, textarea { padding: 13px 14px; font-size: 15px; } .interpretation-text { font-size: 14.5px; } .relation-callout { padding: 14px 14px; } .relation-type { font-size: 15px; } .relation-desc { font-size: 13.5px; } } /* 작은 폰 (320~374px) */ @media (max-width: 374px) { .container { padding: 14px 12px 56px; } h1 { font-size: 21px; } .choice-symbol { font-size: 22px; } .saju-grid { grid-template-columns: repeat(2, 1fr); } .date-picker { gap: 4px; } .date-picker .dp-unit { font-size: 11px; } } /* ============================================================ 캐릭터 이미지 — Floating / Glow / 별빛 파티클 / Tilt ============================================================ */ @keyframes floating { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-18px); } } @keyframes glowPulse { 0%, 100% { filter: drop-shadow(0 0 20px rgba(124, 77, 188, 0.5)) drop-shadow(0 0 40px rgba(232, 160, 191, 0.3)); } 50% { filter: drop-shadow(0 0 35px rgba(124, 77, 188, 0.9)) drop-shadow(0 0 60px rgba(232, 160, 191, 0.6)); } } @keyframes starTwinkle { 0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(180deg); } } .choice-card:hover .page-character { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; margin: 0 auto 16px; display: block; } @media (max-width: 480px) { .page-character { width: 140px; height: 140px; } } /* ============================================================ 히어로 섹션 (전면 리뉴얼) ============================================================ */ .hero-section { position: relative; min-height: 60vh; overflow: hidden; text-align: center; display: flex; align-items: center; justify-content: center; margin: 0 -14px 28px; border-radius: 28px; isolation: isolate; } .hero-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; z-index: 0; border-radius: inherit; pointer-events: none; } .hero-video-bg.loaded { opacity: 0.8; } .hero-inner { position: relative; z-index: 1; } .hero-section .hero-title { font-size: 34px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.25; margin: 14px 0 12px; background: linear-gradient(135deg, #FFF6E6 0%, #F8E49A 35%, #F3C2D6 70%, #C9A8FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.65)) drop-shadow(0 4px 24px rgba(245, 215, 110, 0.25)); } .hero-subtitle { font-size: 14px; color: var(--text-soft); margin: 0 auto 22px; max-width: 420px; line-height: 1.6; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6); } .hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: linear-gradient(135deg, #7C4DBC 0%, #E8A0BF 60%, #F5D76E 110%); color: #1a0e35; font-weight: 800; font-size: 15px; text-decoration: none; letter-spacing: -0.005em; box-shadow: 0 12px 30px rgba(124, 77, 188, 0.45), 0 0 24px rgba(232, 160, 191, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; } .hero-cta::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: ctaShine 3s ease-in-out infinite; } @keyframes ctaShine { 0% { left: -120%; } 60% { left: 130%; } 100% { left: 130%; } } .hero-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(124, 77, 188, 0.6), 0 0 36px rgba(232, 160, 191, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .hero-cta-arrow { display: inline-block; transition: transform 0.2s ease; } .hero-cta:hover .hero-cta-arrow { transform: translateX(4px); } .hero-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 18px; font-size: 12px; color: var(--text-dim); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); } .hero-meta-item { white-space: nowrap; } .hero-meta-dot { opacity: 0.5; } /* ============================================================ 카드 강화 — Lottie 포함, 글래스모피즘 + ============================================================ */ .choice-card { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 6px 18px rgba(15, 10, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07); } .choice-card:hover { border-color: rgba(245, 215, 110, 0.5); box-shadow: 0 18px 42px rgba(124, 77, 188, 0.4), 0 0 30px rgba(232, 160, 191, 0.28), 0 0 0 1px rgba(245, 215, 110, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .choice-card-featured { background: linear-gradient(180deg, rgba(245, 215, 110, 0.10), rgba(232, 160, 191, 0.06)), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border-color: rgba(245, 215, 110, 0.4); } @media (max-width: 480px) { .hero-section { margin: 4px -10px 20px; padding: 18px 14px 18px; border-radius: 22px; min-height: calc(100svh - 58px) !important; height: calc(100svh - 58px) !important; max-height: 760px; box-sizing: border-box; } .hero-inner { max-width: 100%; } .hero-title { font-size: 26px; margin: 10px 0 10px; } .hero-subtitle { font-size: 13px; max-width: 300px; margin-bottom: 18px; line-height: 1.45; } .hero-cta { padding: 12px 22px; font-size: 14px; max-width: 88vw; white-space: nowrap; } .hero-meta { gap: 5px 8px; margin-top: 16px; font-size: 12px; } } @media (max-width: 374px) { .hero-title { font-size: 22px; } } .page-header-wrap { position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 24px; min-height: 280px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 76% 0%, var(--bg-glow), transparent 30%), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%); } .page-header-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 0.5s ease; } .page-header-video.loaded { opacity: 0.7; } .page-header-content { position: relative; z-index: 1; text-align: center; padding: 40px 20px; background: linear-gradient(to bottom, rgba(15,10,30,0.3), rgba(15,10,30,0.7)); width: 100%; } .card-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; z-index: 0; border-radius: inherit; pointer-events: none; } .choice-card { position: relative; overflow: hidden; } .choice-card > *:not(.card-video-bg) { position: relative; z-index: 1; } /* hero-section 상단 동영상 overflow 버그 수정 */ .hero-section { isolation: isolate; } /* 모바일 대응 */ @media (max-width: 480px) { } /* ── 모바일 히어로 overflow 버그 수정 ── */ .container { overflow-x: hidden; } .hero-section { overflow: hidden; isolation: isolate; } .hero-section .hero-video-bg { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; } /* ── 카드 이미지 크게, 텍스트 간결하게 ── */ /* 텍스트 간결하게: 필요없는 항목 숨김 */ .choice-badge { font-size: 11px; padding: 3px 10px; } /* 모바일에서 카드 2열 유지 */ @media (max-width: 480px) { .choice-grid-two { grid-template-columns: 1fr 1fr; gap: 10px; } .choice-grid-five { grid-template-columns: 1fr 1fr; gap: 10px; } } /* ── 카드: 동영상 상단 + 텍스트 하단 분리 ── */ .choice-card { display: flex; flex-direction: column; overflow: hidden; padding: 0 !important; position: relative; } .card-video-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; flex-shrink: 0; border-radius: 12px 12px 0 0; position: relative; background: var(--bg-card-soft); } .card-video { width: 100%; height: 100%; object-fit: cover; display: block; } .card-body { padding: 14px 16px 16px; background: var(--bg-card); border-radius: 0 0 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .card-body h2 { font-size: 17px; margin: 0 0 2px; color: var(--accent-soft); font-weight: 700; } .card-body .choice-badge { position: static; display: inline-block; align-self: flex-start; font-size: 11px; padding: 2px 8px; margin-bottom: 4px; } .card-body .choice-when { font-size: 12px; color: var(--text); margin: 0; line-height: 1.5; font-style: italic; } .card-body .choice-desc { font-size: 12px; color: var(--text-dim); margin: 0; line-height: 1.5; } .card-body .choice-origin { font-size: 11px; color: var(--text-dim); opacity: 0.7; margin: 4px 0 0; } .card-body .choice-note { display: none; } /* 모바일 */ @media (max-width: 600px) { .card-video-wrap { aspect-ratio: 16/9; } .card-body { padding: 12px 14px; } .card-body h2 { font-size: 15px; } } /* ── 카테고리 섹션 ── */ .cat-section { margin-bottom: 48px; } .cat-header { padding: 0 4px 16px; } .cat-tag { display: inline-block; background: rgba(232,160,191,0.15); color: #E8A0BF; border: 1px solid rgba(232,160,191,0.3); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; letter-spacing: 0.05em; } .cat-title { font-size: 22px; font-weight: 800; color: var(--text); margin: 0 0 6px; line-height: 1.3; } .cat-sub { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.6; } /* 캐러셀 공통 */ .carousel-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 0 38px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; } .carousel-track::-webkit-scrollbar { display: none; width: 0; height: 0; } .carousel-card { flex: 0 0 55vw; max-width: 180px; scroll-snap-align: start; border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 3/4; display: block; text-decoration: none; box-shadow: 0 8px 32px rgba(0,0,0,0.45); transition: transform 0.2s ease; background: radial-gradient(circle at 76% 0%, var(--bg-glow), transparent 30%), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%); } .carousel-card-featured { flex: 0 0 63vw; max-width: 198px; } .carousel-card:hover { transform: translateY(-4px); } .carousel-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; transition: opacity 0.4s ease; } .carousel-video.loaded { opacity: 1; } .carousel-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; padding: 48px 18px 20px; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 70%, transparent 100%); } .carousel-badge { display: inline-block; background: rgba(245,215,110,0.2); color: #F5D76E; border: 1px solid rgba(245,215,110,0.4); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-bottom: 7px; letter-spacing: 0.03em; } .carousel-card-featured .carousel-badge { background: rgba(232,160,191,0.25); color: #E8A0BF; border-color: rgba(232,160,191,0.5); } .carousel-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 5px; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } .carousel-desc { font-size: 12px; color: rgba(255,255,255,0.8); margin: 0; line-height: 1.5; } @media (min-width: 600px) { .carousel-card { flex: 0 0 180px; } .carousel-card-featured { flex: 0 0 198px; } .cat-title { font-size: 26px; } } /* ── 캐러셀 화살표 버튼 ── */ .carousel-wrap { position: relative; } .carousel-btn { display: none; /* 모바일에선 숨김 */ } @media (min-width: 768px) { .carousel-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: clamp(86px, 14.4vw, 96px); /* 이미지 영역 중앙 기준 — 텍스트 높이 영향 없음 */ z-index: 20; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(30, 10, 60, 0.82); backdrop-filter: blur(8px); color: #e8c8ff; font-size: 20px; line-height: 36px; margin: 0; padding: 0; cursor: pointer; transition: opacity 0.2s, background 0.2s; box-shadow: 0 2px 16px rgba(0,0,0,0.5); opacity: 0.7; pointer-events: auto; /* transform 속성 일절 사용 안 함 */ } .carousel-btn:hover { background: rgba(120, 40, 180, 0.92); opacity: 1; } .carousel-btn.carousel-btn-hidden { opacity: 0; pointer-events: none; } .carousel-btn-left { left: 8px; } .carousel-btn-right { right: 8px; } } /* ── 풀이 결과 가독성 스타일 ─────────────────────────────── */ .intro-text { font-size: 1rem; line-height: 1.72; color: rgba(255,255,255,0.92); margin-bottom: 1rem; font-style: normal; opacity: 1; } .interpretation-text { font-size: 0.97rem; line-height: 1.78; color: rgba(255,255,255,0.88); word-break: keep-all; overflow-wrap: break-word; } /* AI 상세풀이 카드 섹션: 과한 보라/핑크 바 대신 프리미엄 다크 리포트 카드 */ .interpretation-text .reading-section-card { position: relative; overflow: hidden; margin: 0 0 18px; border-radius: 20px; border: 1px solid rgba(232,160,191,0.16); background: radial-gradient(circle at 14% 0%, rgba(232,160,191,0.12), transparent 34%), linear-gradient(145deg, rgba(24,18,38,0.92), rgba(17,14,28,0.98)); box-shadow: 0 16px 40px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.045); } .interpretation-text .reading-section-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, rgba(245,215,110,0.82), rgba(232,160,191,0.74), rgba(124,77,188,0.45)); } .interpretation-text .reading-section-card:first-child::before { background: linear-gradient(180deg, rgba(245,215,110,0.9), rgba(232,160,191,0.82)); } .interpretation-text .reading-section-body { padding: 4px 18px 18px; } /* 단락 */ .interpretation-text .r-para { margin-bottom: 0.86rem; padding: 0; } .interpretation-text > .r-para { margin: 0 0 14px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(232,160,191,0.13); background: rgba(255,255,255,0.04); } .interpretation-text .r-para:last-child, .interpretation-text .reading-section-body .r-para:last-child { margin-bottom: 0; } /* ## 소제목 — 카드 제목 */ .interpretation-text .r-heading { font-size: 0.98rem; font-weight: 780; color: #f6e9ff; margin: 0; padding: 16px 18px 12px; background: transparent; border-left: none; border-radius: 0; letter-spacing: -0.02em; display: block; text-shadow: 0 0 18px rgba(232,160,191,0.24); } .interpretation-text > .r-heading { margin: 0 0 12px; border-radius: 16px; border: 1px solid rgba(232,160,191,0.15); background: rgba(255,255,255,0.045); } /* 강조(**bold**): 별표는 JS에서 제거하고, 모바일에서 튀지 않는 얇은 금빛 강조만 사용 */ .r-bold, .interpretation-text .r-bold, .section-body .r-bold, .section-body .kw { font-weight: 750; color: #f2d58f; background: linear-gradient(180deg, transparent 68%, rgba(245,215,110,0.18) 68%); padding: 0 1px; border-radius: 2px; text-shadow: 0 0 14px rgba(245,215,110,0.12); } /* 구분선(---) */ .interpretation-text .r-divider { border: none; border-top: 1px solid rgba(255,255,255,0.09); margin: 1.2rem 0; } /* 모바일 */ @media (max-width: 480px) { .intro-text { font-size: 0.96rem; line-height: 1.66; } .compat-score-card { padding: 14px 12px; } .compat-score-range { font-size: 18px; } .compat-score-value--band .compat-score-range { font-size: 14px; } .compat-score-copy { max-width: 100%; font-size: 16px; } .compat-score-value--band .compat-score-copy { font-size: 15px; line-height: 1.5; } .interpretation-text { font-size: 0.91rem; line-height: 1.68; } .interpretation-text .reading-section-card { border-radius: 18px; margin-bottom: 15px; } .interpretation-text .r-heading { font-size: 0.92rem; padding: 14px 15px 9px; } .interpretation-text .reading-section-body { padding: 3px 15px 15px; } .interpretation-text > .r-para { padding: 14px 15px; } } /* ── 사주 무료 미리보기 압축 ── */ .preview-compact-section { overflow: hidden; } .question-answer-card { padding: 18px 18px 16px; border-left-color: var(--pink); background: linear-gradient(145deg, rgba(31,18,58,0.94), rgba(19,12,38,0.96)); } .question-answer-card .answer-label { display: inline-flex; margin: 0 0 10px; padding: 6px 10px; border-radius: 999px; background: rgba(245,215,110,0.14); color: #f4d7a1; font-size: 12px; font-weight: 900; letter-spacing: -0.01em; } .question-answer-card h2 { margin: 0 0 10px; color: #fff7e9; font-size: 20px; line-height: 1.28; letter-spacing: -0.045em; word-break: keep-all; } .question-answer-card .answer-summary { margin: 0 0 12px; color: rgba(255,255,255,0.86); font-size: 15px; line-height: 1.58; word-break: keep-all; } .answer-bullets { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .answer-bullets li { display: grid; gap: 4px; padding: 10px 11px; border-radius: 13px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.08); } .answer-bullets b { color: #f4d7a1; font-size: 12px; } .answer-bullets span { color: rgba(255,255,255,0.76); font-size: 13.5px; line-height: 1.42; word-break: keep-all; } html.theme-light .question-answer-card { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(251,247,255,0.96)); } html.theme-light .question-answer-card .answer-label, html.theme-light .answer-bullets b { color: #6f4aa2; } html.theme-light .question-answer-card h2 { color: #19131f; } html.theme-light .question-answer-card .answer-summary, html.theme-light .answer-bullets span { color: rgba(31,23,41,0.76); } html.theme-light .answer-bullets li { background: rgba(124,77,188,0.055); border-color: rgba(124,77,188,0.14); } .preview-compact-section .section-title { margin-bottom: 0; } .preview-answer-card { margin: 16px 18px 12px; padding: 16px 16px 15px; border-radius: 18px; background: linear-gradient(135deg, rgba(245,215,110,0.18), rgba(232,160,191,0.12)); border: 1px solid rgba(245,215,110,0.25); } .preview-answer-label { display: block; margin-bottom: 7px; color: #f4d7a1; font-size: 12px; font-weight: 800; letter-spacing: -0.01em; } .preview-answer-card strong { display: block; color: var(--text); font-size: 16px; line-height: 1.55; word-break: keep-all; } .preview-core-bullets { display: grid; gap: 8px; margin: 0 18px 14px; padding: 0; list-style: none; } .preview-core-bullets li, .preview-unlock-note { display: grid; gap: 5px; padding: 12px 13px; border-radius: 14px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.08); } .preview-core-bullets b, .preview-unlock-note b { color: #f4d7a1; font-size: 12px; } .preview-core-bullets span, .preview-unlock-note span { color: var(--text-soft); font-size: 14px; line-height: 1.55; word-break: keep-all; } .preview-unlock-note { margin: 0 18px 18px; } .preview-detail-fold { margin: 12px 0 0; border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; background: rgba(255,255,255,0.035); overflow: hidden; } .preview-detail-fold summary { cursor: pointer; padding: 14px 16px; color: #f4d7a1; font-weight: 800; list-style-position: inside; } .preview-detail-fold .section-body { padding: 0 16px 16px; } html.theme-light .preview-answer-label, html.theme-light .preview-core-bullets b, html.theme-light .preview-unlock-note b, html.theme-light .preview-detail-fold summary { color: #6f4aa2; } html.theme-light .preview-core-bullets li, html.theme-light .preview-unlock-note, html.theme-light .preview-detail-fold { background: rgba(124,77,188,0.055); border-color: rgba(124,77,188,0.14); } html.theme-light .preview-answer-card strong { color: #19131f; } /* ── 결제 잠금 오버레이 ── */ #lock-overlay { margin: 20px 0 22px; display: flex; justify-content: center; } .lock-box { background: linear-gradient(145deg, rgba(18, 10, 28, 0.98), rgba(36, 19, 50, 0.96)); border: 1.5px solid rgba(244, 215, 161, 0.72); border-radius: 20px; padding: 34px 28px 30px; text-align: center; max-width: 420px; width: 100%; backdrop-filter: blur(8px); box-shadow: 0 18px 50px rgba(11, 7, 18, 0.38), inset 0 1px 0 rgba(255,255,255,0.08); } .lock-icon { font-size: 40px; margin-bottom: 12px; } .lock-title { font-size: 18px; font-weight: 800; color: #fffaf0; margin: 0 0 10px; } .lock-desc { font-size: 14px; color: rgba(255,250,240,0.86); line-height: 1.7; margin: 0 0 16px; } .lock-evidence { display: grid; gap: 6px; margin: 14px 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); color: rgba(255,255,255,0.78); font-size: 12px; line-height: 1.55; text-align: left; } .lock-evidence strong { color: #f4d7a1; font-size: 12px; } .lock-section-list { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; text-align: left; } .lock-section-list li { position: relative; padding: 9px 11px 9px 28px; border-radius: 12px; background: rgba(255,255,255,0.085); color: rgba(255,250,240,0.9); font-size: 13px; line-height: 1.45; } .lock-section-list li::before { content: '✓'; position: absolute; left: 11px; top: 9px; color: #f4d7a1; font-weight: 800; } .lock-pay-btn { display: inline-block; background: linear-gradient(135deg, #7C4DBC, #E8A0BF); color: #fff; border: none; border-radius: 50px; padding: 14px 32px; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 6px 24px rgba(124,77,188,0.45); width: 100%; margin-bottom: 12px; } .lock-pay-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(124,77,188,0.6); } .lock-note { font-size: 12px; color: rgba(255,250,240,0.64); margin: 0; } html.theme-light .lock-box { background: linear-gradient(145deg, rgba(18, 10, 28, 0.98), rgba(36, 19, 50, 0.96)); border-color: rgba(244, 215, 161, 0.76); } html.theme-light .lock-title { color: #fffaf0; } html.theme-light .lock-desc, html.theme-light .lock-section-list li, html.theme-light .lock-note { color: rgba(255,250,240,0.86); } html.theme-light .lock-note { color: rgba(255,250,240,0.64); } html.theme-light .lock-evidence strong { color: #f4d7a1; } /* ============================================================ 룬 결과 섹션 ============================================================ */ .rune-result-wrap { display: flex; flex-direction: column; gap: 0; padding-bottom: 40px; } .rune-result-wrap[hidden] { display: none !important; } /* 섹션 블록 */ .rune-section-block { background: var(--card-bg, rgba(20,12,45,0.82)); border: 1px solid var(--card-border, rgba(124,77,188,0.22)); border-radius: 18px; padding: 22px 20px; margin-bottom: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .rune-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); } .rune-section-icon { font-size: 16px; color: #F5D76E; line-height: 1; flex-shrink: 0; } .rune-section-label { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.88); margin: 0; } .rune-intro-body { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.9); line-height: 1.75; margin: 0; } /* ── 룬 카드 그리드 ── */ .runes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .rune-card { background: linear-gradient(175deg, #1c1044 0%, #100930 100%); border: 1px solid rgba(124,77,188,0.35); border-radius: 16px; padding: 18px 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.3); cursor: default; } /* 상단 퍼플 글로우 라인 */ .rune-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(124,77,188,0.8), transparent); } .rune-card:hover { transform: translateY(-5px); border-color: rgba(245,215,110,0.4); box-shadow: 0 12px 32px rgba(124,77,188,0.4); } /* 포지션 라벨 */ .rune-card-pos { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: #E8A0BF; background: rgba(232,160,191,0.12); border: 1px solid rgba(232,160,191,0.25); border-radius: 99px; padding: 3px 10px; margin-bottom: 14px; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 룬 심볼 원 */ .rune-card-stone { width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(ellipse at 38% 30%, #3a2b6e, #1a0e44 70%); border: 1.5px solid rgba(245,215,110,0.5); box-shadow: 0 0 0 5px rgba(124,77,188,0.12), 0 0 20px rgba(124,77,188,0.4); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; flex-shrink: 0; transition: box-shadow 0.22s ease, border-color 0.22s ease; } .rune-card:hover .rune-card-stone { border-color: rgba(245,215,110,0.8); box-shadow: 0 0 0 5px rgba(245,215,110,0.1), 0 0 28px rgba(245,215,110,0.35); } .rune-card-sym { font-size: 32px; line-height: 1; color: #F5D76E; text-shadow: 0 0 8px rgba(245,215,110,0.9), 0 0 20px rgba(245,215,110,0.4); } .rune-card-sym--rev { display: inline-block; transform: rotate(180deg); } /* 이름 */ .rune-card-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; text-align: center; letter-spacing: 0.02em; } .rune-card-korean { font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 10px; text-align: center; } /* 방향 뱃지 */ .rune-card-dir { font-size: 10px; font-weight: 700; border-radius: 99px; padding: 3px 10px; margin-bottom: 12px; } .rune-card-dir.is-up { background: rgba(126,232,162,0.12); color: #7ee8a2; border: 1px solid rgba(126,232,162,0.25); } .rune-card-dir.is-rev { background: rgba(255,110,110,0.12); color: #ff9090; border: 1px solid rgba(255,110,110,0.25); } /* 키워드 */ .rune-card-keywords { font-size: 11px; color: rgba(255,255,255,0.45); text-align: center; line-height: 1.6; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); width: 100%; } /* ── 모바일: 3열 → 1열 세로 ── */ @media (max-width: 560px) { .runes-grid { grid-template-columns: 1fr; gap: 10px; } /* 모바일: 심볼 왼쪽 + 텍스트 오른쪽 가로 레이아웃 */ .rune-card { flex-direction: row; align-items: flex-start; padding: 14px 14px 12px; gap: 14px; flex-wrap: wrap; } /* 포지션 라벨: 전체 너비 차지 */ .rune-card-pos { width: 100%; margin-bottom: 8px; order: -1; text-align: left; } /* 심볼 원: 고정 크기 왼쪽 */ .rune-card-stone { width: 56px; height: 56px; flex-shrink: 0; margin-bottom: 0; order: 1; } .rune-card-sym { font-size: 26px; } /* 나머지 텍스트: 오른쪽에 세로로 */ .rune-card-name, .rune-card-korean, .rune-card-dir { text-align: left; order: 2; flex-basis: calc(100% - 70px); } .rune-card-name { font-size: 15px; margin-bottom: 2px; width: calc(100% - 70px); } .rune-card-korean { font-size: 12px; margin-bottom: 4px; width: calc(100% - 70px); } .rune-card-dir { margin-bottom: 0; width: calc(100% - 70px); } /* 키워드: 심볼 아래 전체 너비 */ .rune-card-keywords { order: 3; width: 100%; text-align: left; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 8px; margin-top: 6px; font-size: 11px; } } /* ============================================================ 노른 결과 룬 카드 — 텍스트 나열 대신 시각 카드형 UI ============================================================ */ .norn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .norn-card { position: relative; overflow: hidden; min-height: 270px; padding: 18px 16px 16px; border-radius: 20px; background: radial-gradient(circle at 50% 18%, rgba(245, 215, 110, 0.16), transparent 27%), linear-gradient(160deg, rgba(43, 22, 86, 0.95), rgba(18, 9, 48, 0.96)); border: 1px solid rgba(232, 160, 191, 0.24); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .norn-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0 34%, rgba(255, 255, 255, 0.07) 42%, transparent 52%), radial-gradient(circle at 15% 85%, rgba(124, 77, 188, 0.22), transparent 30%); pointer-events: none; } .norn-card::after { content: ''; position: absolute; top: 14px; bottom: 14px; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(245, 215, 110, 0.34), transparent); opacity: 0.45; pointer-events: none; } .norn-card:hover { transform: translateY(-5px); border-color: rgba(245, 215, 110, 0.45); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 30px rgba(124, 77, 188, 0.22); } .norn-card-top, .norn-rune-title, .norn-card .orientation, .norn-card .keywords, .norn-divider { position: relative; z-index: 1; } .norn-card-top { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .norn-orb { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.35), transparent 18%), radial-gradient(circle, rgba(52, 34, 96, 0.98), rgba(16, 8, 44, 0.98)); border: 1.5px solid rgba(245, 215, 110, 0.6); box-shadow: 0 0 0 7px rgba(124, 77, 188, 0.16), 0 0 26px rgba(245, 215, 110, 0.24), inset 0 0 18px rgba(0, 0, 0, 0.35); } .norn-orb.is-reversed .norn-rune-symbol { transform: rotate(180deg); } .norn-rune-symbol { display: inline-block; color: #F5D76E; font-size: 42px; line-height: 1; text-shadow: 0 0 10px rgba(245, 215, 110, 0.9), 0 0 24px rgba(245, 215, 110, 0.38); } .norn-time { display: flex; flex-direction: column; gap: 5px; align-items: center; } .norn-name { color: #E8A0BF; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; } .norn-en { color: rgba(255, 255, 255, 0.62); font-size: 12px; font-weight: 700; } .norn-phase { color: rgba(255, 255, 255, 0.72); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(232, 160, 191, 0.10); border: 1px solid rgba(232, 160, 191, 0.16); } .norn-divider { width: 100%; height: 1px; margin: 16px 0 14px; background: linear-gradient(90deg, transparent, rgba(245, 215, 110, 0.32), transparent); } .norn-rune-title { display: flex; align-items: baseline; justify-content: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; } .norn-card .rune-name { color: #fff; font-size: 17px; font-weight: 900; letter-spacing: 0.02em; } .norn-card .rune-korean { color: rgba(255, 255, 255, 0.58); font-size: 13px; font-weight: 700; } .norn-card .orientation { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 900; margin-bottom: 13px; } .norn-card .orientation.upright { color: #7ee8a2; background: rgba(126, 232, 162, 0.12); border: 1px solid rgba(126, 232, 162, 0.26); } .norn-card .orientation.reversed { color: #ffb0b0; background: rgba(255, 110, 110, 0.12); border: 1px solid rgba(255, 110, 110, 0.27); } .norn-card .keywords { width: 100%; color: rgba(255, 255, 255, 0.74); font-size: 12px; font-weight: 650; line-height: 1.55; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.075); } .tarot-result-card { gap: 14px; padding: 16px; justify-content: flex-start; } .tarot-result-card::after { display: none; } .tarot-card-visual, .tarot-card-body { position: relative; z-index: 1; } .tarot-card-visual { width: min(100%, 178px); aspect-ratio: 2 / 3; border-radius: 17px; overflow: hidden; background: rgba(15, 8, 38, 0.72); border: 1px solid rgba(245, 215, 110, 0.28); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34), 0 0 18px rgba(245, 215, 110, 0.10); } .tarot-card-image { display: block; width: 100%; height: 100%; object-fit: cover; } .tarot-generated-card { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 15px 11px; color: #fff7de; background: radial-gradient(circle at 50% 35%, rgba(245, 215, 110, 0.18), transparent 38%), linear-gradient(160deg, rgba(36, 19, 78, 0.98), rgba(10, 20, 38, 0.98)); } .tarot-generated-card::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(245, 215, 110, 0.48); border-radius: 12px; pointer-events: none; } .tarot-generated-card::after { content: ''; position: absolute; inset: 15px; border: 1px solid rgba(232, 160, 191, 0.22); border-radius: 9px; pointer-events: none; } .tarot-suit-earth { background: radial-gradient(circle at 50% 35%, rgba(245, 215, 110, 0.22), transparent 38%), linear-gradient(160deg, #173729, #10162d); } .tarot-suit-water { background: radial-gradient(circle at 50% 35%, rgba(127, 203, 255, 0.20), transparent 38%), linear-gradient(160deg, #17314d, #111637); } .tarot-suit-air { background: radial-gradient(circle at 50% 35%, rgba(216, 224, 255, 0.18), transparent 38%), linear-gradient(160deg, #202948, #101229); } .tarot-suit-fire { background: radial-gradient(circle at 50% 35%, rgba(255, 169, 96, 0.22), transparent 38%), linear-gradient(160deg, #4b2518, #17102c); } .tarot-suit-major { background: radial-gradient(circle at 50% 35%, rgba(232, 160, 191, 0.22), transparent 38%), linear-gradient(160deg, #2c1858, #10162d); } .tarot-card-frame { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .tarot-card-corner { position: absolute; z-index: 2; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #2b184c; background: #f5d76e; font-size: 11px; font-weight: 950; box-shadow: 0 0 10px rgba(245, 215, 110, 0.28); } .tarot-card-corner.top { top: 13px; left: 13px; } .tarot-card-corner.bottom { right: 13px; bottom: 13px; transform: rotate(180deg); } .tarot-symbol-grid { width: min(100%, 116px); min-height: 134px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; justify-items: center; gap: 9px 18px; } .tarot-symbol-grid span, .tarot-symbol-center span { display: inline-flex; align-items: center; justify-content: center; color: #f5d76e; font-size: 26px; line-height: 1; text-shadow: 0 2px 10px rgba(245, 215, 110, 0.28); } .tarot-symbol-grid[data-count="1"] { grid-template-columns: 1fr; } .tarot-symbol-grid[data-count="3"], .tarot-symbol-grid[data-count="5"], .tarot-symbol-grid[data-count="7"], .tarot-symbol-grid[data-count="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tarot-symbol-grid[data-count="10"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 22px; } .tarot-symbol-grid[data-count="10"] span { font-size: 22px; } .tarot-symbol-center { display: flex; min-height: 132px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .tarot-symbol-center span { width: 66px; height: 66px; border-radius: 999px; border: 1px solid rgba(245, 215, 110, 0.42); background: rgba(245, 215, 110, 0.08); font-size: 34px; font-weight: 950; } .tarot-symbol-center small, .tarot-generated-name { color: rgba(255, 247, 222, 0.82); font-size: 11px; font-weight: 900; letter-spacing: -0.02em; text-align: center; } .tarot-generated-name { max-width: 92%; min-height: 16px; } .tarot-card-body { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; } .tarot-card-name { color: #fff7de; font-size: 17px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.25; margin: 10px 0 4px; overflow-wrap: anywhere; } .tarot-card-orientation { margin-top: 9px; } .tarot-card-meaning { margin-top: 0; } /* ============================================================ 레노르망 카드 — 텍스트 나열 대신 실제 카드 흐름처럼 보이게 표시 ============================================================ */ .drawn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; } .lenormand-card-visual { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .lenormand-card-face { position: relative; min-height: 176px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; overflow: hidden; background: radial-gradient(circle at 50% 18%, rgba(245, 215, 110, 0.22), transparent 30%), linear-gradient(160deg, rgba(45, 25, 86, 0.96), rgba(20, 10, 48, 0.98)); border: 1px solid rgba(245, 215, 110, 0.28); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .lenormand-card-face::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(232, 160, 191, 0.30); border-radius: 14px; pointer-events: none; } .lenormand-card-corner { position: absolute; top: 14px; left: 14px; color: #f5d76e; font-weight: 900; font-size: 13px; } .lenormand-card-symbol { position: relative; z-index: 1; color: #fff7de; font-size: 28px; font-weight: 950; letter-spacing: -0.04em; text-align: center; } .lenormand-card-keyword { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.72); font-size: 13px; font-weight: 800; text-align: center; } .lenormand-card-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .lenormand-card-copy .card-position, .lenormand-card-copy .card-number, .lenormand-card-copy .card-name, .lenormand-card-copy .card-meaning { display: block; } .lenormand-card-copy .card-position { color: #e8a0bf; font-size: 13px; font-weight: 900; } .lenormand-card-copy .card-number { color: rgba(245, 215, 110, 0.86); font-size: 12px; font-weight: 900; } .lenormand-card-copy .card-name { color: var(--text-main); font-size: 15px; font-weight: 900; overflow-wrap: anywhere; } .lenormand-card-copy .card-meaning { color: var(--text-muted); font-size: 13px; line-height: 1.55; } html.theme-light .lenormand-card-face { background: radial-gradient(circle at 50% 18%, rgba(184, 126, 44, 0.16), transparent 31%), linear-gradient(160deg, rgba(255, 252, 244, 0.98), rgba(246, 234, 217, 0.98)); border-color: rgba(178, 122, 44, 0.25); box-shadow: 0 14px 28px rgba(109, 70, 23, 0.12); } html.theme-light .lenormand-card-symbol { color: #3a254f; } html.theme-light .lenormand-card-keyword { color: rgba(58, 37, 79, 0.68); } html.theme-light .tarot-result-card { background: radial-gradient(circle at 50% 18%, rgba(184, 126, 44, 0.11), transparent 29%), linear-gradient(160deg, rgba(255, 252, 244, 0.96), rgba(247, 238, 224, 0.98)); border-color: rgba(178, 122, 44, 0.23); } html.theme-light .tarot-card-visual { background: rgba(255, 250, 240, 0.92); border-color: rgba(178, 122, 44, 0.28); box-shadow: 0 14px 28px rgba(109, 70, 23, 0.14); } html.theme-light .tarot-generated-card { color: #3a254f; background: radial-gradient(circle at 50% 35%, rgba(184, 126, 44, 0.16), transparent 38%), linear-gradient(160deg, rgba(255, 252, 244, 0.98), rgba(246, 234, 217, 0.98)); } html.theme-light .tarot-symbol-grid span, html.theme-light .tarot-symbol-center span { color: #b27a2c; } html.theme-light .tarot-generated-name, html.theme-light .tarot-symbol-center small { color: rgba(58, 37, 79, 0.72); } html.theme-light .tarot-card-name { color: #3a254f; } html.theme-light .tarot-result-card .rune-korean, html.theme-light .tarot-result-card .keywords { color: rgba(46, 30, 66, 0.72); } @media (max-width: 720px) { .norn-grid { grid-template-columns: 1fr; gap: 12px; } .norn-card { min-height: 0; padding: 16px 15px; align-items: stretch; } .norn-card-top { flex-direction: row; text-align: left; align-items: center; } .tarot-result-card { display: grid; grid-template-columns: minmax(98px, 124px) minmax(0, 1fr); align-items: center; text-align: left; gap: 14px; } .tarot-card-visual { width: 100%; } .tarot-card-body { align-items: flex-start; } .tarot-card-name { margin-top: 8px; font-size: 16px; } .tarot-card-meaning { text-align: left; } .drawn-cards { grid-template-columns: 1fr; } .lenormand-card-visual { display: grid; grid-template-columns: minmax(96px, 118px) minmax(0, 1fr); align-items: center; gap: 14px; } .lenormand-card-face { min-height: 152px; padding: 16px 12px; } .lenormand-card-symbol { font-size: 23px; } .norn-orb { width: 68px; height: 68px; flex: 0 0 68px; } .norn-rune-symbol { font-size: 34px; } .norn-time { align-items: flex-start; } } /* ── Kabbalah result visibility ── */ .kabbalah-result-card { position: relative; overflow: hidden; border-color: rgba(245, 215, 110, 0.24); background: radial-gradient(circle at 18% 18%, rgba(245,215,110,0.10), transparent 28%), radial-gradient(circle at 82% 12%, rgba(232,160,191,0.12), transparent 30%), linear-gradient(135deg, rgba(32,18,62,0.96), rgba(23,12,48,0.96)); } .kab-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .kab-result-head h2 { margin: 4px 0 6px; } .eyebrow { margin: 0; color: var(--gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .kab-result-sub { margin: 0; color: rgba(255,255,255,0.68); line-height: 1.65; font-size: 0.95rem; } .kab-visual-layout { display: grid; grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.28fr); gap: 20px; align-items: stretch; } .kab-tree-figure { margin: 0; min-height: 360px; border: 1px solid rgba(245,215,110,0.20); border-radius: 22px; overflow: hidden; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 35px rgba(245,215,110,0.08), 0 18px 45px rgba(0,0,0,0.24); } .kab-tree-figure img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; } .kab-pair { display: grid; grid-template-columns: 1fr; gap: 14px; } .kab-side { position: relative; padding: 20px 20px 18px; border: 1px solid rgba(255,255,255,0.13); border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)); box-shadow: 0 14px 34px rgba(0,0,0,0.18); } .kab-side::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 20px 0 0 20px; background: linear-gradient(180deg, var(--gold), var(--pink)); } .kab-label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; margin-bottom: 10px; border-radius: 999px; background: rgba(245,215,110,0.12); color: var(--gold); font-size: 0.78rem; font-weight: 800; } .kab-hebrew { float: right; width: 58px; height: 58px; display: grid; place-items: center; margin-left: 14px; border-radius: 50%; color: var(--gold); font-size: 1.8rem; font-weight: 800; background: radial-gradient(circle, rgba(245,215,110,0.20), rgba(124,77,188,0.13)); border: 1px solid rgba(245,215,110,0.26); box-shadow: 0 0 24px rgba(245,215,110,0.16); } .kab-name { color: #fff; font-size: 1.28rem; font-weight: 850; letter-spacing: -0.01em; margin: 2px 0 5px; } .kab-korean { color: #e8c8ff; font-size: 0.98rem; font-weight: 750; margin-bottom: 9px; } .kab-number { display: inline-flex; align-items: center; margin: 3px 0 12px; padding: 6px 10px; border-radius: 10px; background: rgba(124,77,188,0.26); color: rgba(255,255,255,0.88); font-size: 0.88rem; font-weight: 800; } .kab-meaning { clear: both; color: rgba(255,255,255,0.78); line-height: 1.75; font-size: 0.95rem; } .kabbalah-result-card + .card .interpretation-text .r-heading { background: linear-gradient(90deg, rgba(245,215,110,0.16), rgba(232,160,191,0.08)); border-left-color: var(--gold); color: var(--gold); } .kabbalah-result-card + .card .interpretation-text .r-para { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06); } @media (max-width: 760px) { .kab-visual-layout { grid-template-columns: 1fr; } .kab-tree-figure { min-height: 300px; max-height: 420px; } .kab-tree-figure img { min-height: 300px; max-height: 420px; } .kab-side { padding: 18px 16px 16px; } .kab-hebrew { width: 50px; height: 50px; font-size: 1.55rem; } } /* ── Yukhyo coin toss + hexagram visibility restore ── */ .yukhyo-drawing-card { position: relative; overflow: hidden; min-height: 420px; display: grid; place-items: center; gap: 12px; border-color: rgba(245, 215, 110, 0.24); background: radial-gradient(circle at 50% 12%, rgba(245,215,110,0.14), transparent 28%), radial-gradient(circle at 20% 82%, rgba(232,160,191,0.12), transparent 30%), linear-gradient(145deg, rgba(34,18,67,0.98), rgba(18,9,43,0.98)); } .yukhyo-drawing-card::before { content: '☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷'; position: absolute; inset: 28px 0 auto; text-align: center; color: rgba(245,215,110,0.10); font-size: clamp(1.2rem, 4vw, 2.4rem); letter-spacing: 0.35em; pointer-events: none; } .toss-area { position: relative; width: min(460px, 86vw); height: 210px; display: grid; place-items: center; perspective: 900px; } .toss-coins { position: absolute; inset: 10px 0 auto; height: 130px; display: flex; justify-content: center; gap: 24px; z-index: 2; } .toss-coin { position: relative; width: 62px; height: 62px; transform-style: preserve-3d; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.35)); transition: transform 0.45s ease, opacity 0.25s ease; } .tc-front, .tc-back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,0.32); font-weight: 900; color: #2b1a0d; backface-visibility: hidden; } .tc-front { background: radial-gradient(circle at 35% 28%, #fff8c8 0 15%, #f5d76e 42%, #b87824 100%); } .tc-back { transform: rotateY(180deg); background: radial-gradient(circle at 35% 28%, #ffe9f3 0 15%, #e8a0bf 45%, #8c3d66 100%); } .toss-coin.tc-show-back { transform: rotateY(180deg); } .toss-coin.tc-flying:nth-child(1) { animation: coinFlyA 1.1s cubic-bezier(.2,.8,.2,1) both; } .toss-coin.tc-flying:nth-child(2) { animation: coinFlyB 1.1s cubic-bezier(.2,.8,.2,1) both; } .toss-coin.tc-flying:nth-child(3) { animation: coinFlyC 1.1s cubic-bezier(.2,.8,.2,1) both; } .toss-coin.tc-landed:nth-child(1) { transform: translate(-42px, 74px) rotateY(0deg) rotateZ(-10deg); } .toss-coin.tc-landed:nth-child(2) { transform: translate(0, 82px) rotateY(0deg) rotateZ(8deg); } .toss-coin.tc-landed:nth-child(3) { transform: translate(42px, 74px) rotateY(0deg) rotateZ(13deg); } .toss-coin.tc-landed.tc-show-back:nth-child(1) { transform: translate(-42px, 74px) rotateY(180deg) rotateZ(-10deg); } .toss-coin.tc-landed.tc-show-back:nth-child(2) { transform: translate(0, 82px) rotateY(180deg) rotateZ(8deg); } .toss-coin.tc-landed.tc-show-back:nth-child(3) { transform: translate(42px, 74px) rotateY(180deg) rotateZ(13deg); } .toss-hand { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 4.3rem; z-index: 3; filter: drop-shadow(0 12px 26px rgba(0,0,0,0.42)); } .toss-hand.toss-throw { animation: handThrow 1.05s cubic-bezier(.2,.8,.2,1) both; } .toss-result { min-height: 28px; padding: 6px 14px; border-radius: 999px; color: var(--gold); font-weight: 850; background: rgba(245,215,110,0.10); border: 1px solid rgba(245,215,110,0.20); } .hex-build { display: flex; flex-direction: column; gap: 8px; width: min(260px, 70vw); min-height: 132px; padding: 12px 16px; border-radius: 18px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); } .hex-build-line { display: flex; align-items: center; justify-content: center; gap: 12px; height: 14px; border-radius: 999px; animation: hexLineIn .35s ease both; } .hex-build-bar { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), #fff0a8); box-shadow: 0 0 14px rgba(245,215,110,0.34); } .hex-build-bar.yang { width: 170px; } .hex-build-bar.yin-l, .hex-build-bar.yin-r { width: 70px; } .hex-build-gap { width: 22px; } .yukhyo-card-head { margin-bottom: 18px; } .yukhyo-card-head h2 { margin: 4px 0 6px; } .yukhyo-card-sub { margin: 0; color: rgba(255,255,255,0.68); line-height: 1.65; } .yukhyo-hex-card { overflow: hidden; border-color: rgba(245,215,110,0.22); background: radial-gradient(circle at 12% 20%, rgba(245,215,110,0.10), transparent 30%), linear-gradient(145deg, rgba(34,18,67,0.96), rgba(20,10,46,0.96)); } .hexagram-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: stretch; } .hexagram-pair.static-only { grid-template-columns: minmax(0, 1fr); } .hexagram-pair.static-only .hexagram-arrow, .hexagram-pair.static-only .hexagram-block:nth-of-type(2) { display: none; } .hexagram-block { padding: 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 38px rgba(0,0,0,0.22); } .hex-label { display: inline-flex; padding: 6px 12px; margin-bottom: 16px; border-radius: 999px; color: var(--gold); font-weight: 850; background: rgba(245,215,110,0.12); border: 1px solid rgba(245,215,110,0.18); } .hex-lines { display: flex; flex-direction: column; gap: 9px; align-items: center; justify-content: center; min-height: 150px; margin: 6px 0 16px; padding: 14px; border-radius: 18px; background: rgba(10,6,24,0.35); } .hex-row { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; width: min(240px, 100%); } .hex-pos { color: rgba(255,255,255,0.58); font-size: 0.78rem; font-weight: 800; } .hex-line { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), #fff0a8); box-shadow: 0 0 13px rgba(245,215,110,0.28); } .hex-line.yin { background: transparent; box-shadow: none; } .hex-line.yin::before, .hex-line.yin::after { content: ''; position: absolute; top: 0; width: 42%; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #e8a0bf, #ffd6e6); box-shadow: 0 0 13px rgba(232,160,191,0.24); } .hex-line.yin::before { left: 0; } .hex-line.yin::after { right: 0; } .hex-line.changing { outline: 2px solid rgba(232,160,191,0.65); outline-offset: 3px; } .hex-info { text-align: center; display: grid; gap: 7px; } .hex-number { color: var(--gold); font-weight: 900; font-size: 0.92rem; } .hex-chinese { color: #fff; font-size: 1.35rem; font-weight: 900; } .hex-fullname { color: #e8c8ff; font-weight: 850; line-height: 1.45; } .hex-summary { color: rgba(255,255,255,0.72); line-height: 1.65; font-size: 0.94rem; } .hexagram-arrow { align-self: center; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); font-size: 1.6rem; font-weight: 900; background: rgba(245,215,110,0.12); border: 1px solid rgba(245,215,110,0.22); } .changing-info { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: rgba(232,160,191,0.08); border: 1px solid rgba(232,160,191,0.16); } .changing-title { color: #ffc8dd; font-weight: 900; margin-bottom: 8px; } .changing-list { margin: 8px 0 0; padding-left: 22px; color: rgba(255,255,255,0.82); line-height: 1.8; } .changing-note { margin: 8px 0 0; color: rgba(255,255,255,0.74); line-height: 1.7; } @keyframes handThrow { 0% { transform: translateX(-50%) translateY(0) scale(1); } 30% { transform: translateX(-50%) translateY(-26px) scale(1.08) rotate(-5deg); } 62% { transform: translateX(-50%) translateY(8px) scale(0.96) rotate(4deg); } 100% { transform: translateX(-50%) translateY(0) scale(1); } } @keyframes coinFlyA { 0% { transform: translate(0, 88px) rotateY(0) scale(.65); opacity: .25; } 58% { transform: translate(-76px, -18px) rotateY(720deg) rotateZ(-20deg) scale(1.05); opacity: 1; } 100% { transform: translate(-42px, 74px) rotateY(1080deg) rotateZ(-10deg); opacity: 1; } } @keyframes coinFlyB { 0% { transform: translate(0, 88px) rotateY(0) scale(.65); opacity: .25; } 58% { transform: translate(0, -36px) rotateY(760deg) rotateZ(18deg) scale(1.07); opacity: 1; } 100% { transform: translate(0, 82px) rotateY(1080deg) rotateZ(8deg); opacity: 1; } } @keyframes coinFlyC { 0% { transform: translate(0, 88px) rotateY(0) scale(.65); opacity: .25; } 58% { transform: translate(76px, -18px) rotateY(700deg) rotateZ(22deg) scale(1.05); opacity: 1; } 100% { transform: translate(42px, 74px) rotateY(1080deg) rotateZ(13deg); opacity: 1; } } @keyframes hexLineIn { from { opacity: 0; transform: translateY(8px) scaleX(.7); } to { opacity: 1; transform: translateY(0) scaleX(1); } } @media (max-width: 760px) { .yukhyo-drawing-card { min-height: 390px; } .toss-area { height: 190px; } .toss-coin { width: 54px; height: 54px; } .toss-coins { gap: 16px; } .toss-hand { font-size: 3.7rem; } .hexagram-pair { grid-template-columns: 1fr; } .hexagram-arrow { margin: 0 auto; transform: rotate(90deg); } .hexagram-block { padding: 18px 14px; } .hex-row { width: min(220px, 100%); grid-template-columns: 34px 1fr; } } /* ============================================================ 홈 UI 간소화 — 모바일 쇼핑몰식: 큰 배너 + 아이콘 메뉴 + 정돈된 카드 ============================================================ */ .home-page { background: #fffaf7; color: #1f1729; } .home-page::before, .home-page::after { display: none; opacity: 0; animation: none; } .home-page .site-nav { background: rgba(255,255,255,0.88); border-bottom: 1px solid rgba(31,23,41,0.07); box-shadow: 0 8px 24px rgba(31,23,41,0.04); } .home-page .container { max-width: 720px; padding: 14px 14px 72px; } .home-page .site-logo .logo-title { background: none; -webkit-text-fill-color: #19131f; color: #19131f; font-size: 17px; letter-spacing: -0.02em; } .home-page .site-logo .logo-sub { color: rgba(31,23,41,0.42); } .home-page .hero-section { min-height: 0 !important; height: auto !important; margin: 0 0 18px !important; padding: 58px 24px 28px !important; border-radius: 26px !important; align-items: flex-end !important; justify-content: flex-start !important; text-align: left; box-shadow: 0 14px 40px rgba(31,23,41,0.14); } .home-page .hero-section::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(15,10,30,0.10), rgba(15,10,30,0.34) 44%, rgba(15,10,30,0.82)); pointer-events: none; } .home-page .hero-video-bg.loaded { opacity: 0.82; } .home-page .hero-inner { width: 100%; max-width: 430px; } .home-page .hero-kicker { display: inline-flex; margin-bottom: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.18); color: #fff7d4; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; backdrop-filter: blur(8px); } .home-page .hero-title { margin: 0 0 10px; font-size: clamp(28px, 8vw, 42px); line-height: 1.14; letter-spacing: -0.045em; background: none; -webkit-text-fill-color: #fff; color: #fff; filter: drop-shadow(0 3px 12px rgba(0,0,0,0.45)); } .home-page .hero-subtitle { max-width: 320px; margin: 0 0 18px; color: rgba(255,255,255,0.86); font-size: 14px; line-height: 1.55; } .home-page .hero-cta { padding: 12px 20px; background: #fff; color: #271733; box-shadow: 0 8px 22px rgba(0,0,0,0.18); } .home-page .hero-cta::before { display: none; } .home-page .hero-meta { justify-content: flex-start; color: rgba(255,255,255,0.72); } .quick-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 30px; padding: 12px 2px 4px; } .quick-menu-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #19131f; text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: -0.04em; } .quick-menu-item span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: rgba(255,255,255,0.86); box-shadow: 0 8px 20px rgba(31,23,41,0.06), inset 0 1px 0 rgba(255,255,255,0.8); font-size: 23px; } .home-page .cat-section { margin-bottom: 34px; } .home-page .cat-header { padding: 0 2px 12px; } .home-page .cat-tag { display: none; } .home-page .cat-title { color: #19131f; font-size: 20px; letter-spacing: -0.04em; margin-bottom: 2px; } .home-page .cat-sub { color: rgba(31,23,41,0.48); font-size: 13px; } .home-page .carousel-track { gap: 14px; margin: 0 -14px; padding: 2px 14px 40px; scroll-padding-left: 14px; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; touch-action: pan-x pan-y; user-select: none; } .home-page .carousel-track.is-dragging { cursor: grabbing; } .home-page .carousel-track.is-free-drag { scroll-snap-type: none; scroll-behavior: auto; } .home-page .carousel-track img { -webkit-user-drag: none; user-drag: none; } .home-page .carousel-track::-webkit-scrollbar { display: none; width: 0; height: 0; } .home-page .carousel-card, .home-page .carousel-card-featured { flex: 0 0 66vw; max-width: 272px; aspect-ratio: auto; display: flex; flex-direction: column; border-radius: 0; overflow: visible; box-shadow: none; background: transparent; } .home-page .carousel-video { position: relative; top: auto; left: auto; z-index: 0; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.18; border-radius: 18px; object-fit: cover; opacity: 1; background: #f3eefa; box-shadow: 0 10px 24px rgba(31,23,41,0.12); } .home-page .carousel-overlay { position: static; z-index: 1; padding: 9px 2px 0; background: transparent; } .home-page .carousel-title { color: #19131f; font-size: 15px; line-height: 1.28; letter-spacing: -0.035em; margin: 0 0 3px; text-shadow: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .home-page .carousel-desc { display: -webkit-box; color: rgba(31,23,41,0.58); font-size: 12px; line-height: 1.35; margin: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .home-page .carousel-card.reunion-card .carousel-title, .home-page .recommended-carousel .rec-slide.reunion-card .rec-title, .home-page .carousel-card.compatibility-card .carousel-title, .home-page .recommended-carousel .rec-slide.compatibility-card .rec-title, .home-page .carousel-card.zodiaccompat-card .carousel-title, .home-page .recommended-carousel .rec-slide.zodiaccompat-card .rec-title, .home-page .carousel-card.tarot-card .carousel-title, .home-page .recommended-carousel .rec-slide.tarot-card .rec-title, .home-page .carousel-card.rune-card .carousel-title, .home-page .recommended-carousel .rec-slide.rune-card .rec-title, .home-page .carousel-card.norn-card .carousel-title, .home-page .recommended-carousel .rec-slide.norn-card .rec-title, .home-page .carousel-card.baby-saju-card .carousel-title, .home-page .carousel-card.child-saju-card .carousel-title, .home-page .carousel-card.naming-card .carousel-title, .home-page .carousel-card.taekil-card .carousel-title, .home-page .carousel-card.pet-saju-card .carousel-title, .home-page .carousel-card.pet-naming-card .carousel-title, .home-page .carousel-card.pet-bond-card .carousel-title, .home-page .carousel-card.self-card .carousel-title, .home-page .carousel-card.premium-card .carousel-title, .home-page .recommended-carousel .rec-slide.self-card .rec-title { display: none; } .home-page .carousel-card.reunion-card .carousel-overlay, .home-page .carousel-card.compatibility-card .carousel-overlay, .home-page .carousel-card.zodiaccompat-card .carousel-overlay, .home-page .carousel-card.tarot-card .carousel-overlay, .home-page .carousel-card.rune-card .carousel-overlay, .home-page .carousel-card.norn-card .carousel-overlay, .home-page .carousel-card.baby-saju-card .carousel-overlay, .home-page .carousel-card.child-saju-card .carousel-overlay, .home-page .carousel-card.naming-card .carousel-overlay, .home-page .carousel-card.taekil-card .carousel-overlay, .home-page .carousel-card.pet-saju-card .carousel-overlay, .home-page .carousel-card.pet-naming-card .carousel-overlay, .home-page .carousel-card.pet-bond-card .carousel-overlay, .home-page .carousel-card.self-card .carousel-overlay, .home-page .carousel-card.premium-card .carousel-overlay { padding-top: 10px; padding-bottom: 0; } .home-page .carousel-card.reunion-card, .home-page .carousel-card-featured.reunion-card, .home-page .carousel-card.compatibility-card, .home-page .carousel-card.zodiaccompat-card, .home-page .carousel-card.tarot-card, .home-page .carousel-card.rune-card, .home-page .carousel-card.norn-card, .home-page .carousel-card.baby-saju-card, .home-page .carousel-card.child-saju-card, .home-page .carousel-card.naming-card, .home-page .carousel-card.taekil-card, .home-page .carousel-card.pet-saju-card, .home-page .carousel-card.pet-naming-card, .home-page .carousel-card.pet-bond-card, .home-page .carousel-card.self-card, .home-page .carousel-card.premium-card { flex-basis: 66vw; max-width: 272px; aspect-ratio: 2 / 3; display: block; padding: 0; min-height: 0; border: 0; align-items: initial; text-align: initial; } .home-page .carousel-card.rune-card::before, .home-page .carousel-card.rune-card::after, .home-page .carousel-card.norn-card::before, .home-page .carousel-card.norn-card::after, .home-page .carousel-card.baby-saju-card::before, .home-page .carousel-card.baby-saju-card::after, .home-page .carousel-card.child-saju-card::before, .home-page .carousel-card.child-saju-card::after, .home-page .carousel-card.naming-card::before, .home-page .carousel-card.naming-card::after, .home-page .carousel-card.taekil-card::before, .home-page .carousel-card.taekil-card::after, .home-page .carousel-card.pet-saju-card::before, .home-page .carousel-card.pet-saju-card::after, .home-page .carousel-card.pet-naming-card::before, .home-page .carousel-card.pet-naming-card::after, .home-page .carousel-card.pet-bond-card::before, .home-page .carousel-card.pet-bond-card::after, .home-page .carousel-card.self-card::before, .home-page .carousel-card.self-card::after, .home-page .carousel-card.premium-card::before, .home-page .carousel-card.premium-card::after { display: none; } .home-page .carousel-card.reunion-card .carousel-video, .home-page .carousel-card.reunion-card .carousel-image, .home-page .carousel-card.compatibility-card .carousel-video, .home-page .carousel-card.compatibility-card .carousel-image, .home-page .carousel-card.zodiaccompat-card .carousel-video, .home-page .carousel-card.zodiaccompat-card .carousel-image, .home-page .carousel-card.tarot-card .carousel-video, .home-page .carousel-card.tarot-card .carousel-image, .home-page .carousel-card.rune-card .carousel-video, .home-page .carousel-card.rune-card .carousel-image, .home-page .carousel-card.norn-card .carousel-video, .home-page .carousel-card.norn-card .carousel-image, .home-page .carousel-card.baby-saju-card .carousel-video, .home-page .carousel-card.baby-saju-card .carousel-image, .home-page .carousel-card.child-saju-card .carousel-video, .home-page .carousel-card.child-saju-card .carousel-image, .home-page .carousel-card.naming-card .carousel-video, .home-page .carousel-card.naming-card .carousel-image, .home-page .carousel-card.taekil-card .carousel-video, .home-page .carousel-card.taekil-card .carousel-image, .home-page .carousel-card.pet-saju-card .carousel-video, .home-page .carousel-card.pet-saju-card .carousel-image, .home-page .carousel-card.pet-naming-card .carousel-video, .home-page .carousel-card.pet-naming-card .carousel-image, .home-page .carousel-card.pet-bond-card .carousel-video, .home-page .carousel-card.pet-bond-card .carousel-image, .home-page .carousel-card.self-card .carousel-video, .home-page .carousel-card.self-card .carousel-image, .home-page .carousel-card.premium-card .carousel-video, .home-page .carousel-card.premium-card .carousel-image { aspect-ratio: 2 / 3; object-fit: contain; background: #130b18; } .home-page .carousel-card.reunion-card .carousel-desc, .home-page .carousel-card.compatibility-card .carousel-desc, .home-page .carousel-card.zodiaccompat-card .carousel-desc, .home-page .carousel-card.tarot-card .carousel-desc, .home-page .carousel-card.rune-card .carousel-desc, .home-page .carousel-card.norn-card .carousel-desc, .home-page .carousel-card.baby-saju-card .carousel-desc, .home-page .carousel-card.child-saju-card .carousel-desc, .home-page .carousel-card.naming-card .carousel-desc, .home-page .carousel-card.taekil-card .carousel-desc, .home-page .carousel-card.pet-saju-card .carousel-desc, .home-page .carousel-card.pet-naming-card .carousel-desc, .home-page .carousel-card.pet-bond-card .carousel-desc, .home-page .carousel-card.self-card .carousel-desc, .home-page .carousel-card.premium-card .carousel-desc { -webkit-line-clamp: 2; } @media (max-width: 480px) { .home-page .site-nav-inner { min-height: 52px; padding: 6px 14px; } .home-page .hero-section { padding: 52px 20px 24px !important; border-radius: 24px !important; } .quick-menu { grid-template-columns: repeat(4, 1fr); gap: 10px 6px; } .quick-menu-item { font-size: 13px; } .quick-menu-item span { width: 50px; height: 50px; border-radius: 17px; } } @media (min-width: 600px) { .home-page .carousel-card, .home-page .carousel-card-featured { flex-basis: clamp(247px, 38vw, 272px); } .home-page .carousel-card.reunion-card, .home-page .carousel-card-featured.reunion-card, .home-page .carousel-card.compatibility-card, .home-page .carousel-card.zodiaccompat-card, .home-page .carousel-card.tarot-card, .home-page .carousel-card.rune-card, .home-page .carousel-card.norn-card, .home-page .carousel-card.baby-saju-card, .home-page .carousel-card.child-saju-card, .home-page .carousel-card.naming-card, .home-page .carousel-card.taekil-card, .home-page .carousel-card.pet-saju-card, .home-page .carousel-card.pet-naming-card, .home-page .carousel-card.pet-bond-card, .home-page .carousel-card.self-card, .home-page .carousel-card.premium-card { flex-basis: clamp(260px, 36vw, 280px); } } /* 홈 상단 추천 사주 자동 캐러셀 */ .home-page .recommended-hero { padding: 0 !important; min-height: 250px !important; background: #140d22 !important; } .home-page .recommended-hero > .hero-video-bg { display: none; } .home-page .recommended-hero::after { display: none !important; } .home-page .recommended-hero .hero-inner { max-width: none; width: 100%; height: 100%; } .recommended-carousel { position: relative; width: 100%; min-height: 250px; overflow: hidden; border-radius: inherit; background: #140d22; } .rec-track { display: flex; width: 500%; min-height: 250px; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .recommended-carousel.rec-index-0 .rec-track { transform: translateX(0); } .recommended-carousel.rec-index-1 .rec-track { transform: translateX(-20%); } .recommended-carousel.rec-index-2 .rec-track { transform: translateX(-40%); } .recommended-carousel.rec-index-3 .rec-track { transform: translateX(-60%); } .recommended-carousel.rec-index-4 .rec-track { transform: translateX(-80%); } .rec-slide { position: relative; flex: 0 0 20%; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 28px 24px 34px; color: #fff; text-decoration: none; overflow: hidden; } .rec-slide::after { display: none; } .rec-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; } .rec-label, .rec-title, .rec-desc, .rec-cta { position: relative; z-index: 2; } .rec-label { display: inline-flex; margin-bottom: 10px; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,0.18); color: #fff3bd; font-size: 12px; font-weight: 900; backdrop-filter: blur(8px); } .rec-title { display: block; max-width: 320px; font-size: clamp(28px, 8vw, 40px); line-height: 1.12; letter-spacing: -0.06em; text-shadow: 0 3px 14px rgba(0,0,0,0.5); } .rec-desc { max-width: 300px; margin-top: 9px; color: rgba(255,255,255,0.84); font-size: 14px; line-height: 1.5; } .rec-cta { margin-top: 18px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.92); color: #241533; font-size: 14px; font-weight: 900; box-shadow: 0 8px 20px rgba(0,0,0,0.18); } .rec-dots { position: absolute; left: 24px; bottom: 14px; z-index: 3; display: flex; gap: 6px; } .rec-dot { width: 6px; height: 6px; min-height: 0; margin: 0; padding: 0; border-radius: 999px; border: 0; background: rgba(255,255,255,0.42); box-shadow: none; } .rec-dot.is-active { width: 18px; background: #fff; } @media (max-width: 480px) { .home-page .recommended-hero { min-height: 236px !important; } .recommended-carousel, .rec-track, .rec-slide { min-height: 236px; } .rec-slide { padding: 24px 20px 32px; } .rec-dots { left: 20px; bottom: 12px; } } /* 예시 이미지처럼: 중앙 큰 카드 + 양옆 다음 카드 일부 노출 */ .home-page .recommended-hero { margin: 14px -14px 8px !important; padding: 0 !important; min-height: 554px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none; overflow: visible; } .home-page .recommended-hero .hero-inner { overflow: visible; } .recommended-carousel { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 554px; border-radius: 0; background: transparent; overflow: visible; } .recommended-carousel::before, .recommended-carousel::after { display: none; } .recommended-carousel .rec-track { width: auto; min-height: 500px; gap: 14px; padding: 0 max(22px, calc((100vw - 330px) / 2)) 54px; background: transparent; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; scroll-behavior: smooth; scrollbar-width: none; transform: none !important; transition: none; } .recommended-carousel .rec-track::-webkit-scrollbar { display: none; } .recommended-carousel .rec-track.rec-jump { scroll-behavior: auto !important; scroll-snap-type: none; } .recommended-carousel.rec-index-0 .rec-track, .recommended-carousel.rec-index-1 .rec-track, .recommended-carousel.rec-index-2 .rec-track, .recommended-carousel.rec-index-3 .rec-track, .recommended-carousel.rec-index-4 .rec-track { transform: none !important; } .recommended-carousel .rec-slide { flex: 0 0 330px; width: 330px; max-width: calc(100vw - 64px); min-height: 495px; aspect-ratio: 2 / 3; border-radius: 24px; scroll-snap-align: center; box-shadow: none; transform: scale(0.965); transition: transform 0.35s ease, opacity 0.35s ease; opacity: 0.9; } .recommended-carousel .rec-slide.is-active { transform: scale(1); opacity: 1; box-shadow: none; } .recommended-carousel .rec-label, .recommended-carousel .rec-desc, .recommended-carousel .rec-cta { display: none; } .recommended-carousel .rec-dots { left: 50%; bottom: 8px; transform: translateX(-50%); gap: 8px; } .recommended-carousel .rec-dot { width: 8px; height: 8px; background: #d6d6dc; } .recommended-carousel .rec-dot.is-active { width: 24px; background: #57ddd9; } @media (max-height: 650px) and (min-width: 481px) { .home-page .recommended-hero { min-height: 448px !important; } .recommended-carousel { min-height: 448px; } .recommended-carousel .rec-track { min-height: 404px; padding: 0 max(22px, calc((100vw - 260px) / 2)) 44px; } .recommended-carousel .rec-slide { flex-basis: 260px; width: 260px; min-height: 390px; max-width: 260px; } } @media (max-width: 480px) { .home-page .recommended-hero { min-height: 486px !important; margin-top: 8px !important; } .recommended-carousel { min-height: 486px; } .recommended-carousel .rec-track { min-height: 444px; padding: 0 max(18px, calc((100vw - min(310px, calc(100vw - 40px))) / 2)) 42px; } .recommended-carousel .rec-slide { flex-basis: min(310px, calc(100vw - 40px)); width: min(310px, calc(100vw - 40px)); max-width: calc(100vw - 40px); min-height: 465px; aspect-ratio: 2 / 3; border-radius: 22px; padding: 22px 18px 34px; } .recommended-carousel .rec-title { font-size: 31px; } .recommended-carousel .rec-desc { display: none; } .recommended-carousel .rec-label { margin-bottom: 8px; padding: 5px 10px; font-size: 11px; } .recommended-carousel .rec-cta { margin-top: 12px; padding: 9px 14px; font-size: 13px; } .recommended-carousel::before, .recommended-carousel::after { display: none; } } /* 홈 모바일 우선 상단 액션 + 하단 탭바 */ .home-page { padding-bottom: calc(78px + env(safe-area-inset-bottom)); } .home-page .site-nav { background: rgba(255,255,255,0.86); border-bottom: 1px solid rgba(31,23,41,0.06); box-shadow: 0 8px 26px rgba(31,23,41,0.05); } .home-page .site-nav-inner { gap: 8px; justify-content: flex-start; } .home-page .site-nav-inner .site-logo { flex: 1 1 auto; } .home-page .site-nav-inner .language-selector { margin-left: 0; margin-right: 0; } .home-theme-toggle { flex: 0 0 auto; width: 34px; height: 34px; min-height: 34px; margin: 0; margin-left: auto; padding: 0; border: 1px solid rgba(201,168,245,0.28); border-radius: 999px; background: rgba(255,255,255,0.82); color: #3a2748; font-size: 0; line-height: 1; display: inline-grid; place-items: center; position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(124,77,188,0.10); cursor: pointer; } .home-theme-toggle::before { content: '🌙'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 15px; line-height: 1; display: block; } body.home-dark .home-theme-toggle::before { content: '☀'; color: #ffd36a; font-size: 17px; } .home-page .language-select { background: rgba(255,255,255,0.82); color: #8a61b5; box-shadow: 0 8px 20px rgba(124,77,188,0.10); min-height: 34px; height: 34px; } .bottom-tabbar { position: fixed; left: 50%; bottom: 0; z-index: 70; width: min(100%, 720px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(31,23,41,0.08); background: rgba(255,255,255,0.94); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 -10px 26px rgba(31,23,41,0.07); } .bottom-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; color: rgba(31,23,41,0.68); text-decoration: none; font-size: 10.5px; font-weight: 800; letter-spacing: -0.03em; } .bottom-tab-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; line-height: 1; filter: grayscale(0.35); } .bottom-tab b { font: inherit; } .bottom-tab.is-active { color: #130d19; } .bottom-tab.is-active .bottom-tab-icon { background: linear-gradient(135deg, #7C4DBC, #E8A0BF); color: #fff; filter: none; box-shadow: 0 8px 18px rgba(124,77,188,0.20); } body.home-dark, html.theme-dark body.home-page, html.theme-dark body.section-hub-page { background: radial-gradient(circle at 76% 0%, var(--bg-glow), transparent 30%), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%); color: #f7f0ff; } body.home-dark::before, body.home-dark::after { opacity: 0.55; } body.home-dark .site-nav, html.theme-dark .site-nav { background: rgba(13,13,14,0.82); border-bottom-color: rgba(255,255,255,0.08); } body.home-dark .site-logo .logo-title, body.home-dark .nav-logo .logo-title, html.theme-dark .site-logo .logo-title, html.theme-dark .nav-logo .logo-title { background: none; -webkit-text-fill-color: #f7f2ea; color: #f7f2ea; text-shadow: 0 0 12px rgba(255,255,255,0.12); } body.home-dark .site-logo .logo-sub, body.home-dark .nav-logo .logo-sub, html.theme-dark .site-logo .logo-sub, html.theme-dark .nav-logo .logo-sub { color: rgba(247,242,234,0.54); } body.home-dark .home-theme-toggle, html.theme-dark .home-theme-toggle, body.home-dark .language-select, html.theme-dark .language-select { background: rgba(255,255,255,0.08); color: #f5eaff; border-color: rgba(201,168,245,0.35); box-shadow: 0 10px 22px rgba(0,0,0,0.18); } body.home-dark .cat-title, html.theme-dark .cat-title, body.home-dark .carousel-title, html.theme-dark .carousel-title, body.home-dark .quick-menu-item, html.theme-dark .quick-menu-item, body.home-dark .bottom-tab.is-active, html.theme-dark .bottom-tab.is-active { color: #f7f0ff; } body.home-dark .cat-sub, html.theme-dark .cat-sub, body.home-dark .carousel-desc, html.theme-dark .carousel-desc { color: rgba(247,240,255,0.62); } body.home-dark .home-footer, html.theme-dark .home-footer { color: rgba(247,240,255,0.58); } body.home-dark .social-proof-stats, html.theme-dark .social-proof-stats { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); box-shadow: none; } body.home-dark .social-proof-divider, html.theme-dark .social-proof-divider { background: rgba(255,255,255,0.08); } body.home-dark .social-proof-label, html.theme-dark .social-proof-label { color: var(--text-dim); } body.home-dark .site-footer, html.theme-dark .site-footer, body.home-dark .site-footer .footer-copy, html.theme-dark .site-footer .footer-copy, body.home-dark .site-footer .footer-row a, html.theme-dark .site-footer .footer-row a { color: rgba(247,240,255,0.48); } body.home-dark .quick-menu-item span, html.theme-dark .quick-menu-item span, body.home-dark .carousel-video, html.theme-dark .carousel-video { background: rgba(255,255,255,0.08); box-shadow: 0 12px 26px rgba(0,0,0,0.28); } body.home-dark .bottom-tabbar, html.theme-dark .bottom-tabbar { background: rgba(13,13,14,0.92); border-top-color: rgba(255,255,255,0.08); } body.home-dark .bottom-tab, html.theme-dark .bottom-tab { color: rgba(247,240,255,0.52); } body.home-dark .bottom-tab.is-active .bottom-tab-icon, html.theme-dark .bottom-tab.is-active .bottom-tab-icon { background: #f5eaff; color: #241533; } html.theme-dark body.section-hub-page .section-hub-tabs a { background: rgba(255,255,255,0.08); color: rgba(247,240,255,0.78); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 28px rgba(0,0,0,0.24); } html.theme-dark body.section-hub-page .section-hub-tabs a.is-active { background: rgba(247,242,234,0.94); color: #201426; } html.theme-dark body.section-hub-page .section-hub-card { background: rgba(255,255,255,0.07); color: #f7f0ff; border-color: rgba(255,255,255,0.10); box-shadow: 0 18px 42px rgba(0,0,0,0.32); } html.theme-dark body.section-hub-page .section-hub-card em { color: rgba(232,206,255,0.68); } html.theme-dark body.section-hub-page .section-hub-card span span { color: rgba(247,240,255,0.62); } html.theme-dark body.section-hub-page .section-hub-hero { background: radial-gradient(circle at 80% 5%, rgba(129,65,190,0.26), transparent 32%), linear-gradient(135deg,#111112,#171118 54%,#27162f); box-shadow: 0 18px 44px rgba(0,0,0,.32); } /* 하단 주요 메뉴는 데스크톱/모바일 모두 유지 — 후기·궁합·홈·보관함·내정보 */ @media (max-width: 767px) { .bottom-tabbar { display: grid; } } /* 19+ adult report rollout */ .home-section.adult-section .section-kicker, .adult-badge { color:#ffb8c8; } .home-section.adult-section .carousel-card.adult-card, .home-page .carousel-card.adult-card { background:#120711; border:0; } .home-page .carousel-card.adult-card::before, .home-page .carousel-card.adult-card::after { display:none!important; } .adult-hub-page .hub-hero, .adult-hero { background:radial-gradient(circle at 76% 0%, var(--bg-glow), transparent 30%), linear-gradient(180deg,var(--bg-start),var(--bg-end)); } .adult-page-header { background:var(--bg-start); position:relative; overflow:hidden; } .adult-badge{display:inline-flex;margin:0 0 10px;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.13);font-size:12px;font-weight:900;letter-spacing:.04em;color:#fff;} .adult-page-header .page-header-content{position:relative;padding-top:52px;} .adult-page-header .back-link{position:absolute;top:14px;left:18px;margin:0;padding:6px 8px;border-radius:999px;background:rgba(18,7,17,.38);backdrop-filter:blur(6px);font-size:12px;line-height:1;color:rgba(255,255,255,.82);z-index:2;} .adult-page-header .adult-badge{display:flex;width:max-content;margin:0 auto 14px;} @media (max-width:480px){.adult-page-header .page-header-content{padding-top:50px;}.adult-page-header .back-link{top:12px;left:14px;font-size:11px;}.adult-page-header .adult-badge{font-size:11px;padding:6px 10px;}} .adult-input-card textarea{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.08);color:inherit;resize:vertical;box-sizing:border-box;} .adult-input-card input[type="date"], .adult-input-card input[type="text"]{width:100%;box-sizing:border-box;} .adult-input-card .gender-row{display:flex;gap:14px;margin:8px 0 16px;} .partner-fields{margin:18px 0 16px;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.055);} .partner-fields h3{margin:0 0 12px;font-size:15px;color:#ffd7df;} .partner-fields label{display:block;margin-bottom:12px;} body.adult-modal-open{position:fixed;width:100%;overflow:hidden;touch-action:none;} body.adult-modal-open > :not(.adult-consent-modal):not(script){pointer-events:none!important;user-select:none;} .adult-consent-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(5,2,8,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overscroll-behavior:contain;} .adult-consent-box{width:min(420px,100%);border-radius:26px;padding:24px;background:linear-gradient(145deg,#201020,#4b1530);color:#fff;box-shadow:0 28px 80px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16);} .adult-consent-box strong{display:block;font-size:22px;letter-spacing:-.04em;margin-bottom:8px;} .adult-consent-box p{margin:0 0 18px;color:rgba(255,255,255,.78);line-height:1.55;} .adult-consent-actions{display:flex;gap:10px;} .adult-consent-actions button{flex:1;border:0;border-radius:999px;padding:13px 14px;font-weight:900;cursor:pointer;} .adult-consent-actions .adult-cancel{background:rgba(255,255,255,.14);color:#fff;} .adult-consent-actions .adult-ok{background:linear-gradient(135deg,#ff4f79,#ffb05e);color:#210711;} .adult-result-card .reading-section{margin:16px 0;padding:18px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);} .adult-result-card .reading-section h3{margin:0 0 10px;letter-spacing:-.04em;} .adult-result-card .reading-section p{line-height:1.75;color:var(--text-muted,#d8cdda);} .home-page .carousel-card.adult-card, .home-page .carousel-card.adult-card .carousel-image, .home-page .carousel-card.adult-card .carousel-video{aspect-ratio:2/3!important;} .home-page .carousel-card.adult-card{padding:0!important;min-height:0!important;display:block!important;overflow:hidden!important;border-radius:18px!important;background:transparent!important;box-shadow:0 18px 45px rgba(35,0,18,.28);} .home-page .carousel-card.adult-card .carousel-image, .home-page .carousel-card.adult-card .carousel-video{display:block!important;width:100%!important;height:auto!important;object-fit:cover!important;border-radius:inherit!important;background:transparent!important;opacity:1!important;} .home-page .carousel-card.adult-card .carousel-overlay{display:none!important;} .adult-hub-page .hub-card{border-radius:20px;overflow:hidden;} .adult-hub-page .hub-card img{border-radius:18px 18px 0 0;} /* Home section title row + view-all links */ .home-page .cat-title-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .home-page .cat-title-row .cat-title{ margin:0; min-width:0; } .home-page .cat-view-all{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0; border-radius:0; background:transparent; border:0; color:#4b4453; text-decoration:none; font-size:12px; font-weight:900; letter-spacing:-.02em; box-shadow:none; } body.home-dark .home-page .cat-view-all, body.home-dark .cat-view-all{ background:transparent; border:0; box-shadow:none; color:rgba(255,255,255,.84); } /* Adult cards: image-only poster + external description, no grey panel */ .home-page .adult-section .carousel-track{ background: transparent !important; box-shadow: none !important; } .home-page .carousel-card.adult-card{ flex: 0 0 66vw !important; max-width: 272px !important; aspect-ratio: auto !important; display: flex !important; flex-direction: column !important; overflow: visible !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .home-page .carousel-card.adult-card .carousel-image, .home-page .carousel-card.adult-card .carousel-video{ width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; object-fit: cover !important; border-radius: 18px !important; background: transparent !important; box-shadow: 0 14px 30px rgba(35,0,18,.18) !important; opacity: 1 !important; } .home-page .carousel-card.adult-card .carousel-overlay{ display: block !important; position: static !important; padding: 9px 2px 0 !important; background: transparent !important; box-shadow: none !important; } .home-page .carousel-card.adult-card .carousel-title{ display: none !important; } .home-page .carousel-card.adult-card .carousel-desc{ display: -webkit-box !important; color: rgba(31,23,41,.58) !important; font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important; overflow: hidden !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; text-shadow: none !important; } /* 20260607-ui-sweep1: common header/result polish */ .site-nav-inner #auth-nav-area { margin-left: auto !important; order: 2; } .site-nav-inner .language-selector { margin-left: 4px !important; order: 3; } .site-nav-inner .site-logo { order: 1; } .home-page .site-nav-inner .home-theme-toggle { order: 2; margin-left: auto; } .home-page .site-nav-inner .language-selector { order: 3; margin-left: 4px !important; } .adult-page-header .page-header-content{ position:relative; padding-top:42px; text-align:center; } .adult-page-header .back-link{ position:static !important; display:inline-flex; align-items:center; justify-content:center; width:max-content; margin:0 auto 14px !important; padding:7px 12px; border-radius:999px; background:rgba(18,7,17,.38); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:12px; line-height:1; color:rgba(255,255,255,.84); } .adult-page-header .adult-badge{display:flex;width:max-content;margin:0 auto 14px;} .input-indicator,.step-indicator{ padding:16px 18px 14px; gap:8px; overflow:visible; } .input-line,.step-line{ margin:0 2px 20px; min-width:18px; } .input-dot span,.step-dot span{ width:30px; height:30px; flex:0 0 30px; } .intro-text:empty::after{ content:'결과를 불러오는 중입니다. 잠시만 기다려 주세요.'; color:var(--text-dim); } @media (max-width:540px){ .input-indicator,.step-indicator{padding:14px 12px 12px;gap:6px;} .input-dot span,.step-dot span{width:28px;height:28px;flex-basis:28px;font-size:13px;} .input-line,.step-line{min-width:10px;margin:0 0 20px;} .input-dot label,.step-dot label{font-size:10px;max-width:58px;white-space:normal;line-height:1.2;} .adult-page-header .page-header-content{padding-top:38px;} } /* 20260607-reunion-resilience1: reunion report readability */ .month-card .month-desc{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08); color:var(--text-dim); font-size:11px; line-height:1.45; word-break:keep-all; } .months-grid .month-card{ min-height:106px; display:flex; flex-direction:column; justify-content:flex-start; } #timing-grid .month-card{ min-height:148px; } .saju-section .section-body{ white-space:pre-line; } .step-page[data-step="3"] .saju-sections:empty::before, .step-page[data-step="4"] .saju-sections:empty::before{ display:block; padding:18px; border:1px solid var(--border); border-radius:16px; color:var(--text-dim); } .step-page[data-step="3"] .saju-sections:empty::before{content:'이별과 현재 흐름을 정리하고 있습니다.';} .step-page[data-step="4"] .saju-sections:empty::before{content:'재회의 흐름과 월별 해석을 정리하고 있습니다.';} .sub-field-label { display: block; margin-top: 12px; } /* Home card taxonomy label: shown above each short description */ .home-page .carousel-badge { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; margin: 0 0 4px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: rgba(31,23,41,0.48); font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.home-dark .home-page .carousel-badge { color: rgba(248,239,225,0.58); } /* 20260609: home card text/tag fit — keep descriptions visible, make taxonomy labels feel like small colored tags */ .home-page .carousel-track { align-items: flex-start; padding-bottom: 54px; scrollbar-width: none; } .home-page .carousel-track.is-free-drag { scroll-snap-type: none; scroll-behavior: auto; } .home-page .carousel-card, .home-page .carousel-card-featured, .home-page .carousel-card.premium-card, .home-page .carousel-card.self-card, .home-page .carousel-card.adult-card, .home-page .carousel-card.reunion-card, .home-page .carousel-card.compatibility-card, .home-page .carousel-card.zodiaccompat-card, .home-page .carousel-card.tarot-card, .home-page .carousel-card.rune-card, .home-page .carousel-card.norn-card, .home-page .carousel-card.baby-saju-card, .home-page .carousel-card.child-saju-card, .home-page .carousel-card.naming-card, .home-page .carousel-card.taekil-card, .home-page .carousel-card.pet-saju-card, .home-page .carousel-card.pet-naming-card, .home-page .carousel-card.pet-bond-card { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } .home-page .carousel-card > .carousel-image, .home-page .carousel-card > .carousel-video, .home-page .carousel-card.premium-card > .carousel-image, .home-page .carousel-card.premium-card > .carousel-video, .home-page .carousel-card.self-card > .carousel-image, .home-page .carousel-card.self-card > .carousel-video, .home-page .carousel-card.adult-card > .carousel-image, .home-page .carousel-card.adult-card > .carousel-video { position: relative !important; inset: auto !important; z-index: 0; display: block; width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; object-fit: contain !important; opacity: 1 !important; border-radius: 18px; background: #130b18; box-shadow: 0 10px 24px rgba(31,23,41,0.14); } .home-page .carousel-card:hover { transform: translateY(-3px); } .home-page .carousel-overlay, .home-page .carousel-card.premium-card .carousel-overlay, .home-page .carousel-card.self-card .carousel-overlay, .home-page .carousel-card.adult-card .carousel-overlay { position: static !important; display: block !important; padding: 10px 2px 0 !important; background: transparent !important; overflow: visible !important; } .home-page .carousel-badge, .home-page .rec-label { display: inline-flex !important; align-items: center; gap: 5px; width: fit-content; max-width: 100%; margin: 0 0 6px; padding: 4px 8px !important; border: 1px solid rgba(154,105,54,0.22) !important; border-radius: 999px !important; background: linear-gradient(135deg, rgba(255,247,226,0.94), rgba(248,225,236,0.86)) !important; box-shadow: 0 5px 12px rgba(136,77,39,0.08) !important; color: rgba(84,55,82,0.72) !important; font-size: 10.5px !important; font-weight: 850 !important; line-height: 1.05 !important; letter-spacing: -0.035em !important; text-shadow: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-page .badge-dot { flex: 0 0 auto; width: 3.5px; height: 3.5px; border-radius: 999px; background: currentColor; opacity: 0.48; margin-top: 0.5px; } .home-page .carousel-desc { display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important; -webkit-box-orient: initial !important; color: rgba(31,23,41,0.66); font-size: 12px; line-height: 1.42; word-break: keep-all; } body.home-dark .home-page .carousel-badge, body.home-dark .home-page .rec-label { color: rgba(248,239,225,0.76) !important; border-color: rgba(245,215,110,0.24) !important; background: linear-gradient(135deg, rgba(61,37,78,0.9), rgba(86,43,74,0.72)) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important; } body.home-dark .home-page .carousel-desc { color: rgba(248,239,225,0.72); } @media (min-width: 600px) { .home-page .carousel-track { padding-bottom: 58px; } } /* 20260609: country/region symbolic colors for home taxonomy pills */ .home-page .carousel-badge.badge-korea, .home-page .rec-label.badge-korea { --badge-ink: #6d2f3f; --badge-border: rgba(197, 54, 72, 0.28); --badge-bg: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,232,236,0.92) 54%, rgba(220,239,255,0.9)); } .home-page .carousel-badge.badge-china, .home-page .rec-label.badge-china { --badge-ink: #7b2c20; --badge-border: rgba(202, 54, 31, 0.3); --badge-bg: linear-gradient(135deg, rgba(255,242,213,0.96), rgba(255,224,206,0.9) 50%, rgba(255,247,190,0.9)); } .home-page .carousel-badge.badge-japan, .home-page .rec-label.badge-japan { --badge-ink: #7a3144; --badge-border: rgba(206, 72, 108, 0.26); --badge-bg: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,232,240,0.92) 58%, rgba(246,246,246,0.95)); } .home-page .carousel-badge.badge-india, .home-page .rec-label.badge-india { --badge-ink: #6a3b8c; --badge-border: rgba(236, 128, 35, 0.28); --badge-bg: linear-gradient(135deg, rgba(255,238,203,0.96), rgba(255,223,150,0.9) 45%, rgba(226,216,255,0.9)); } .home-page .carousel-badge.badge-myanmar, .home-page .rec-label.badge-myanmar { --badge-ink: #6b3f18; --badge-border: rgba(224, 160, 38, 0.32); --badge-bg: linear-gradient(135deg, rgba(255,246,198,0.96), rgba(255,224,128,0.9) 46%, rgba(221,245,214,0.92)); } .home-page .carousel-badge.badge-maya, .home-page .rec-label.badge-maya { --badge-ink: #2f6a62; --badge-border: rgba(35, 156, 137, 0.32); --badge-bg: linear-gradient(135deg, rgba(223,248,239,0.96), rgba(173,229,215,0.9) 45%, rgba(255,225,154,0.88)); } .home-page .carousel-badge.badge-nordic, .home-page .rec-label.badge-nordic { --badge-ink: #385f86; --badge-border: rgba(78, 145, 200, 0.3); --badge-bg: linear-gradient(135deg, rgba(232,247,255,0.96), rgba(205,231,255,0.92) 52%, rgba(235,232,255,0.9)); } .home-page .carousel-badge.badge-europe, .home-page .rec-label.badge-europe { --badge-ink: #4f438e; --badge-border: rgba(112, 87, 184, 0.28); --badge-bg: linear-gradient(135deg, rgba(242,236,255,0.96), rgba(224,214,255,0.9) 50%, rgba(255,231,244,0.9)); } .home-page .carousel-badge.badge-judaic, .home-page .rec-label.badge-judaic { --badge-ink: #315f91; --badge-border: rgba(52, 123, 183, 0.3); --badge-bg: linear-gradient(135deg, rgba(236,249,255,0.98), rgba(210,235,255,0.92) 52%, rgba(245,245,255,0.9)); } .home-page .carousel-badge.badge-babylon, .home-page .rec-label.badge-babylon { --badge-ink: #665023; --badge-border: rgba(185, 139, 39, 0.34); --badge-bg: linear-gradient(135deg, rgba(255,244,205,0.98), rgba(245,219,142,0.9) 48%, rgba(230,221,255,0.88)); } .home-page .carousel-badge.badge-java, .home-page .rec-label.badge-java { --badge-ink: #5d4a2d; --badge-border: rgba(142, 98, 48, 0.28); --badge-bg: linear-gradient(135deg, rgba(255,242,216,0.96), rgba(230,210,174,0.9) 50%, rgba(220,238,220,0.9)); } .home-page .carousel-badge.badge-yoruba, .home-page .rec-label.badge-yoruba { --badge-ink: #6d3f22; --badge-border: rgba(196, 106, 38, 0.3); --badge-bg: linear-gradient(135deg, rgba(255,233,198,0.96), rgba(246,190,113,0.9) 48%, rgba(232,214,174,0.9)); } .home-page .carousel-badge.badge-modern, .home-page .rec-label.badge-modern { --badge-ink: #2f6f78; --badge-border: rgba(48, 168, 178, 0.28); --badge-bg: linear-gradient(135deg, rgba(224,250,250,0.96), rgba(205,239,245,0.9) 52%, rgba(238,232,255,0.9)); } .home-page .carousel-badge.badge-world, .home-page .rec-label.badge-world { --badge-ink: #5b506b; --badge-border: rgba(122, 103, 148, 0.26); --badge-bg: linear-gradient(135deg, rgba(245,241,255,0.96), rgba(234,229,245,0.9) 54%, rgba(255,239,220,0.9)); } .home-page .carousel-badge[class*="badge-"], .home-page .rec-label[class*="badge-"] { color: var(--badge-ink) !important; border-color: var(--badge-border) !important; background: var(--badge-bg) !important; } body.home-dark .home-page .carousel-badge[class*="badge-"], body.home-dark .home-page .rec-label[class*="badge-"] { color: color-mix(in srgb, var(--badge-ink) 35%, #fff 65%) !important; border-color: color-mix(in srgb, var(--badge-border) 55%, rgba(255,255,255,0.18) 45%) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--badge-ink) 34%, #24162f 66%), rgba(40,28,49,0.78)) !important; } /* 20260609: pin recommended carousel taxonomy label to bottom-left */ .home-page .recommended-carousel .rec-label { position: absolute !important; left: 18px !important; bottom: 18px !important; z-index: 6 !important; margin: 0 !important; max-width: calc(100% - 36px) !important; padding: 4px 9px !important; box-shadow: 0 8px 18px rgba(20, 10, 28, 0.22) !important; backdrop-filter: blur(10px); } @media (max-height: 650px) and (min-width: 481px) { .home-page .recommended-carousel .rec-label { left: 14px !important; bottom: 14px !important; } } @media (max-width: 480px) { .home-page .recommended-carousel .rec-label { left: 14px !important; bottom: 14px !important; } } /* 20260609: full light-mode parity for internal pages (saju/rune/report/hub/library). */ html.theme-light { color-scheme: light; background: #fffaf7; } html.theme-light body, html.theme-light body.light-theme, html.theme-light body:not(.home-dark) { --text: #19131f; --text-soft: #3b3043; --text-dim: rgba(31,23,41,0.68); --text-mute: rgba(31,23,41,0.48); --card-bg: rgba(255,255,255,0.88); --card-bg-strong: rgba(255,255,255,0.96); --card-border: rgba(90,55,110,0.12); --card-border-strong: rgba(124,77,188,0.26); background: radial-gradient(circle at 80% 0%, rgba(232,160,191,0.18), transparent 32%), linear-gradient(180deg, #fffaf7 0%, #fff5f0 52%, #f8eef7 100%) !important; background-color: #fffaf7 !important; color: #19131f !important; } html.theme-light body::before, html.theme-light body::after { opacity: 0.22; filter: invert(1) saturate(0.6); } html.theme-light .site-nav { background: rgba(255,250,247,0.86) !important; border-bottom-color: rgba(90,55,110,0.10) !important; box-shadow: 0 8px 26px rgba(31,23,41,0.06); } html.theme-light .site-logo .logo-title, html.theme-light .nav-logo .logo-title { background: none !important; -webkit-text-fill-color: #19131f !important; color: #19131f !important; text-shadow: none !important; } html.theme-light .site-logo .logo-sub, html.theme-light .nav-logo .logo-sub { color: rgba(31,23,41,0.45) !important; } html.theme-light .language-select, html.theme-light .home-theme-toggle, html.theme-light .auth-login-btn, html.theme-light .auth-profile-btn { background: rgba(255,255,255,0.78) !important; color: #2a1e32 !important; border-color: rgba(124,77,188,0.18) !important; box-shadow: 0 8px 18px rgba(31,23,41,0.08) !important; } html.theme-light .language-menu { background: rgba(255,250,247,0.98) !important; border-color: rgba(124,77,188,0.16) !important; box-shadow: 0 18px 38px rgba(31,23,41,0.16) !important; } html.theme-light .language-option { color: #2a1e32 !important; } html.theme-light .language-option:hover, html.theme-light .language-option.active { color: #fff !important; } html.theme-light .page-header, html.theme-light .page-header-wrap, html.theme-light .adult-page-header, html.theme-light .adult-hero, html.theme-light .section-hub-hero { background: radial-gradient(circle at 82% 10%, rgba(245,215,110,0.24), transparent 30%), linear-gradient(135deg, #fff8ee 0%, #fff0f5 54%, #eee4ff 100%) !important; color: #19131f !important; box-shadow: 0 18px 44px rgba(31,23,41,0.10) !important; } html.theme-light .page-header::before, html.theme-light .page-header::after, html.theme-light .section-hub-hero::after { opacity: 0.34 !important; } html.theme-light .page-header h1, html.theme-light .page-header p, html.theme-light .section-hub-hero h1, html.theme-light .section-hub-hero p, html.theme-light .section-hub-kicker { color: #19131f !important; } html.theme-light .section-hub-kicker { background: rgba(255,255,255,0.62) !important; border-color: rgba(124,77,188,0.16) !important; } html.theme-light .back-link { color: rgba(31,23,41,0.62) !important; } html.theme-light .relation-svg { color: rgba(31,23,41,0.18) !important; } html.theme-light .card, html.theme-light .input-page.card, html.theme-light .input-card, html.theme-light .result-card, html.theme-light .adult-input-card, html.theme-light .adult-result-card, html.theme-light .question-card, html.theme-light .fortune-card, html.theme-light .section-hub-card, html.theme-light .library-item, html.theme-light .library-detail, html.theme-light .library-empty, html.theme-light .rune-section-block, html.theme-light .rune-card, html.theme-light .interpretation-text .reading-section-card, html.theme-light .interpretation-text > .r-para, html.theme-light .relation-callout, html.theme-light .section-easy-summary, html.theme-light .saju-section, html.theme-light .adult-result-card .reading-section { background: rgba(255,255,255,0.88) !important; color: #19131f !important; border-color: rgba(90,55,110,0.12) !important; box-shadow: 0 14px 34px rgba(31,23,41,0.10) !important; } html.theme-light .reunion-input-shell .input-page.card { background: radial-gradient(circle at top left, rgba(124,77,188,0.10), transparent 46%), rgba(255,255,255,0.92) !important; } html.theme-light input[type="text"], html.theme-light input[type="email"], html.theme-light input[type="date"], html.theme-light select, html.theme-light textarea { background: rgba(255,255,255,0.94) !important; color: #19131f !important; border-color: rgba(90,55,110,0.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important; } html.theme-light input[type="date"] { color-scheme: light !important; } html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: rgba(31,23,41,0.38) !important; } html.theme-light label, html.theme-light .form-hint, html.theme-light .optional-label, html.theme-light .drawing-text, html.theme-light .intro-text, html.theme-light .card p, html.theme-light .section-body, html.theme-light .interpretation-text, html.theme-light .library-reading, html.theme-light .rune-intro-body, html.theme-light .rune-card-keywords, html.theme-light .section-hub-card span span { color: rgba(31,23,41,0.72) !important; } html.theme-light h1, html.theme-light h2, html.theme-light h3, html.theme-light .card-title, html.theme-light .library-name, html.theme-light .library-detail-title, html.theme-light .rune-card-name, html.theme-light .rune-card-korean, html.theme-light .section-hub-card b, html.theme-light .interpretation-text .r-heading { color: #19131f !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } html.theme-light .lock-box { background: linear-gradient(145deg, rgba(18, 10, 28, 0.98), rgba(36, 19, 50, 0.96)) !important; border-color: rgba(244, 215, 161, 0.76) !important; } html.theme-light .lock-title, html.theme-light .lock-desc, html.theme-light .lock-section-list li, html.theme-light .lock-evidence, html.theme-light .lock-note, html.theme-light .lock-pay-btn, html.theme-light .lock-pay-btn strong { color: rgba(255,250,240,0.9) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } html.theme-light .lock-title { color: #fffaf0 !important; } html.theme-light .lock-desc { color: rgba(255,250,240,0.88) !important; } html.theme-light .lock-section-list li { color: rgba(255,250,240,0.92) !important; } html.theme-light .lock-note { color: rgba(255,250,240,0.72) !important; } html.theme-light .lock-section-list li::before, html.theme-light .lock-evidence strong { color: #f4d7a1 !important; } html.theme-light .r-bold, html.theme-light .interpretation-text .r-bold, html.theme-light .section-body .r-bold, html.theme-light .section-body .kw, html.theme-light .library-badge, html.theme-light .section-hub-card em { color: #7c4dbc !important; } html.theme-light .section-hub-tabs a { background: rgba(255,255,255,0.86) !important; color: #33243e !important; border: 1px solid rgba(90,55,110,0.10) !important; box-shadow: 0 8px 20px rgba(31,23,41,0.08) !important; } html.theme-light .section-hub-tabs a.is-active { background: #25122d !important; color: #fff !important; } html.theme-light .bottom-tabbar { background: rgba(255,250,247,0.94) !important; border-top-color: rgba(90,55,110,0.12) !important; box-shadow: 0 -12px 28px rgba(31,23,41,0.08) !important; } html.theme-light .bottom-tab { color: rgba(31,23,41,0.56) !important; } html.theme-light .bottom-tab.is-active { color: #130d19 !important; } html.theme-light .bottom-tab.is-active .bottom-tab-icon { background: linear-gradient(135deg, #7C4DBC, #E8A0BF) !important; color: #fff !important; } /* 20260609: internal nav must match home nav — logo + theme toggle + language only. */ .site-nav:not(:has(.site-nav-inner)) .home-theme-toggle { position: absolute; top: 50%; right: max(76px, calc((100vw - 720px) / 2 + 60px)); transform: translateY(-50%); margin-left: 0; z-index: 79; } .site-nav-inner .home-theme-toggle { order: 2; margin-left: auto; } .site-nav-inner .language-selector { order: 3; margin-left: 4px !important; } .site-nav #auth-nav-area { display: none !important; } @media (max-width: 520px) { .site-nav:not(:has(.site-nav-inner)) .home-theme-toggle { right: 62px; } .site-nav:not(:has(.site-nav-inner)) .nav-logo { padding-right: 112px; } } /* 20260609: theme-aware text colors across internal pages and story pages. */ html.theme-light body, html.theme-light main, html.theme-light .container { color: #19131f !important; } html.theme-light p, html.theme-light li, html.theme-light dd, html.theme-light small, html.theme-light .tagline, html.theme-light .page-guide, html.theme-light .note, html.theme-light .form-hint, html.theme-light .drawing-text, html.theme-light .intro-text, html.theme-light .result-summary, html.theme-light .card-desc, html.theme-light .hub-card-body span, html.theme-light .section-hub-card span span, html.theme-light .library-meta, html.theme-light .library-reading, html.theme-light .story-hero p, html.theme-light .panel-cta-sub, html.theme-light .cta-note, html.theme-light .scroll-hint { color: rgba(31,23,41,0.72) !important; text-shadow: none !important; } html.theme-light h1, html.theme-light h2, html.theme-light h3, html.theme-light h4, html.theme-light strong, html.theme-light b, html.theme-light label, html.theme-light .story-hero h1, html.theme-light .story-hero h1 em, html.theme-light .panel-title, html.theme-light .card-title, html.theme-light .section-title, html.theme-light .hub-card-body b, html.theme-light .library-title, html.theme-light .library-name { color: #19131f !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } html.theme-light a:not(.cta-btn):not(.fixed-cta-btn):not(.btn-primary):not(.bottom-tab):not(.carousel-card):not(.rec-slide):not(.section-hub-card):not(.hub-card):not(.is-active):not(.back-link), html.theme-light .back-link { color: #5f3f83 !important; } html.theme-light .story-badge, html.theme-light .badge, html.theme-light .pill, html.theme-light .section-hub-kicker { color: #5f3f83 !important; background: rgba(255,255,255,0.70) !important; border-color: rgba(124,77,188,0.18) !important; text-shadow: none !important; } html.theme-light .story-hero, html.theme-light .panel, html.theme-light .story-panel, html.theme-light .cta-panel { color: #19131f !important; } html.theme-light .cta-btn, html.theme-light .fixed-cta-btn, html.theme-light .btn-primary { color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-light .fixed-cta { background: linear-gradient(180deg, rgba(255,250,247,0), rgba(255,250,247,0.94) 46%, rgba(255,250,247,0.98)) !important; } /* 20260609: story hero stays dark in both themes; never apply light-page dark text on dark hero. */ html.theme-light .story-hero .story-badge, html.theme-dark .story-hero .story-badge { color: #f7f2ea !important; background: rgba(255,255,255,0.08) !important; border-color: rgba(247,242,234,0.28) !important; text-shadow: 0 1px 10px rgba(0,0,0,0.28) !important; } html.theme-light .story-hero h1, html.theme-light .story-hero h1 em, html.theme-dark .story-hero h1, html.theme-dark .story-hero h1 em { color: #fffaf0 !important; -webkit-text-fill-color: #fffaf0 !important; background: none !important; text-shadow: 0 2px 18px rgba(0,0,0,0.42) !important; } html.theme-light .story-hero p, html.theme-dark .story-hero p { color: rgba(247,242,234,0.68) !important; text-shadow: 0 1px 10px rgba(0,0,0,0.24) !important; } html.theme-dark body, html.theme-dark main, html.theme-dark .container { color: #f7f2ea !important; } html.theme-dark p, html.theme-dark li, html.theme-dark dd, html.theme-dark small, html.theme-dark .tagline, html.theme-dark .page-guide, html.theme-dark .note, html.theme-dark .form-hint, html.theme-dark .drawing-text, html.theme-dark .intro-text, html.theme-dark .result-summary, html.theme-dark .card-desc, html.theme-dark .hub-card-body span, html.theme-dark .section-hub-card span span, html.theme-dark .library-meta, html.theme-dark .library-reading, html.theme-dark .story-hero p, html.theme-dark .panel-cta-sub, html.theme-dark .cta-note, html.theme-dark .scroll-hint { color: rgba(247,242,234,0.70) !important; } html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark strong, html.theme-dark b, html.theme-dark label, html.theme-dark .story-hero h1, html.theme-dark .story-hero h1 em, html.theme-dark .panel-title, html.theme-dark .card-title, html.theme-dark .section-title, html.theme-dark .hub-card-body b, html.theme-dark .library-title, html.theme-dark .library-name { color: #f7f2ea !important; -webkit-text-fill-color: currentColor !important; } html.theme-dark a:not(.cta-btn):not(.fixed-cta-btn):not(.btn-primary):not(.bottom-tab):not(.carousel-card):not(.rec-slide):not(.section-hub-card):not(.hub-card):not(.is-active):not(.back-link), html.theme-dark .back-link { color: #d8c5ff !important; } html.theme-dark .story-badge, html.theme-dark .badge, html.theme-dark .pill, html.theme-dark .section-hub-kicker { color: #f0e5ff !important; background: rgba(255,255,255,0.08) !important; border-color: rgba(201,168,245,0.28) !important; } html.theme-dark .fixed-cta { background: linear-gradient(180deg, rgba(13,13,14,0), rgba(13,13,14,0.88) 46%, rgba(13,13,14,0.96)) !important; } /* 20260609: dark/image-backed hero blocks must keep light text even when the page theme is light. */ html.theme-light .page-header-wrap, html.theme-dark .page-header-wrap, html.theme-light .page-header.adult-page-header, html.theme-dark .page-header.adult-page-header, html.theme-light .hub-hero, html.theme-dark .hub-hero { color: #fffaf0 !important; } html.theme-light .page-header-wrap .page-header-content, html.theme-dark .page-header-wrap .page-header-content, html.theme-light .page-header.adult-page-header .page-header-content, html.theme-dark .page-header.adult-page-header .page-header-content { background: linear-gradient(to bottom, rgba(15,10,30,0.30), rgba(15,10,30,0.72)) !important; } html.theme-light .page-header-wrap h1, html.theme-light .page-header-wrap h2, html.theme-light .page-header-wrap p, html.theme-light .page-header-wrap .tagline, html.theme-light .page-header-wrap .back-link, html.theme-light .page-header.adult-page-header h1, html.theme-light .page-header.adult-page-header p, html.theme-light .page-header.adult-page-header .adult-badge, html.theme-light .page-header.adult-page-header .back-link, html.theme-light .hub-hero h1, html.theme-light .hub-hero p, html.theme-light .hub-hero .hub-kicker, html.theme-dark .page-header-wrap h1, html.theme-dark .page-header-wrap h2, html.theme-dark .page-header-wrap p, html.theme-dark .page-header-wrap .tagline, html.theme-dark .page-header-wrap .back-link, html.theme-dark .page-header.adult-page-header h1, html.theme-dark .page-header.adult-page-header p, html.theme-dark .page-header.adult-page-header .adult-badge, html.theme-dark .page-header.adult-page-header .back-link, html.theme-dark .hub-hero h1, html.theme-dark .hub-hero p, html.theme-dark .hub-hero .hub-kicker { color: #fffaf0 !important; -webkit-text-fill-color: #fffaf0 !important; text-shadow: 0 2px 14px rgba(0,0,0,0.38) !important; } html.theme-light .page-header-wrap p, html.theme-light .page-header-wrap .tagline, html.theme-light .page-header.adult-page-header p, html.theme-light .hub-hero p, html.theme-dark .page-header-wrap p, html.theme-dark .page-header-wrap .tagline, html.theme-dark .page-header.adult-page-header p, html.theme-dark .hub-hero p { color: rgba(255,250,240,0.76) !important; -webkit-text-fill-color: rgba(255,250,240,0.76) !important; } html.theme-light .page-header-wrap .page-header-content a.back-link, html.theme-light .page-header.adult-page-header .page-header-content a.back-link, html.theme-dark .page-header-wrap .page-header-content a.back-link, html.theme-dark .page-header.adult-page-header .page-header-content a.back-link, html.theme-light .page-header-wrap .back-link, html.theme-light .page-header.adult-page-header .back-link, html.theme-light .hub-hero .hub-kicker, html.theme-dark .page-header-wrap .back-link, html.theme-dark .page-header.adult-page-header .back-link, html.theme-dark .hub-hero .hub-kicker { background: rgba(18,7,24,0.34) !important; border-color: rgba(255,250,240,0.24) !important; color: #fffaf0 !important; -webkit-text-fill-color: #fffaf0 !important; } /* 20260609: keep category tabs readable after global theme text overrides. */ html.theme-light .section-hub-tabs a { color: #33243e !important; } html.theme-light .section-hub-tabs a.is-active, html.theme-light .section-hub-tabs a:first-child { color: #fff !important; } html.theme-dark .section-hub-tabs a { color: rgba(247,242,234,0.74) !important; } html.theme-dark .section-hub-tabs a.is-active, html.theme-dark .section-hub-tabs a:first-child { color: #fff !important; } /* 20260609: quick-menu hub pages use the same spacious two-column layout as section "전체 보기" pages. */ body.hub-page { background: #fffaf7 !important; color: #19131f !important; min-height: 100vh !important; padding-bottom: 86px !important; } body.hub-page .hub-shell { width: min(720px, calc(100% - 32px)) !important; margin: 0 auto !important; padding: 22px 0 56px !important; } body.hub-page .hub-hero { border-radius: 30px !important; padding: 32px 24px !important; margin: 14px 0 16px !important; box-shadow: 0 18px 44px rgba(49,24,62,.18) !important; } body.hub-page .hub-tabs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; overflow: visible !important; padding: 0 !important; margin: 0 0 16px !important; } body.hub-page .hub-tabs a { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 10px 13px !important; background: rgba(255,255,255,.9) !important; } body.hub-page .hub-tabs a.is-active { background: #25122d !important; color: #fff !important; } body.hub-page .hub-section-title { margin: 0 2px 12px !important; font-size: 19px !important; letter-spacing: -.045em !important; } body.hub-page .hub-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } body.hub-page .hub-card { border-radius: 23px !important; background: rgba(255,255,255,.86) !important; box-shadow: 0 12px 30px rgba(31,23,41,.12) !important; overflow: hidden !important; } body.hub-page .hub-card img { width: 100% !important; aspect-ratio: 2 / 3 !important; object-fit: cover !important; } body.hub-page .hub-card-body { display: block !important; padding: 12px 12px 14px !important; } body.hub-page .hub-card b { font-size: 15px !important; line-height: 1.25 !important; letter-spacing: -.04em !important; } body.hub-page .hub-card-body > span { display: block !important; margin-top: 6px !important; color: #7b7280 !important; font-size: 12px !important; line-height: 1.45 !important; word-break: keep-all !important; } html.theme-dark body.hub-page { background: radial-gradient(circle at 76% 0%, var(--bg-glow), transparent 30%), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%) !important; color: #f7f2ea !important; } html.theme-dark body.hub-page .hub-tabs a { background: rgba(255,255,255,0.08) !important; color: rgba(247,242,234,0.78) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.24) !important; } html.theme-dark body.hub-page .hub-tabs a.is-active { background: rgba(247,242,234,0.94) !important; color: #201426 !important; } html.theme-dark body.hub-page .hub-section-title { color: #f7f2ea !important; } html.theme-dark body.hub-page .hub-card { background: rgba(255,255,255,0.07) !important; color: #f7f2ea !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 18px 42px rgba(0,0,0,0.32) !important; } html.theme-dark body.hub-page .hub-card-body > span { color: rgba(247,242,234,0.66) !important; } @media (max-width: 420px) { body.hub-page .hub-shell { width: min(720px, calc(100% - 28px)) !important; } body.hub-page .hub-grid { gap: 12px !important; } body.hub-page .hub-card-body { padding: 10px 10px 12px !important; } } /* 20260609: leftover inline form spacing/field styles made some pages look uneven. Normalize them globally. */ .card > label[style*="margin-top"]:not(.cal-toggle-option):not(.radio-item), .input-card > label[style*="margin-top"]:not(.cal-toggle-option):not(.radio-item), .input-page.card > label[style*="margin-top"]:not(.cal-toggle-option):not(.radio-item), .adult-input-card > label[style*="margin-top"]:not(.cal-toggle-option):not(.radio-item), .card label[style*="margin-top"], .input-card label[style*="margin-top"], .input-page.card label[style*="margin-top"], .adult-input-card label[style*="margin-top"] { margin: 14px 0 7px !important; } .card > label:first-child[style*="margin-top"]:not(.cal-toggle-option):not(.radio-item), .input-card > label:first-child[style*="margin-top"]:not(.cal-toggle-option):not(.radio-item), .input-page.card > label:first-child[style*="margin-top"]:not(.cal-toggle-option):not(.radio-item), .adult-input-card > label:first-child[style*="margin-top"]:not(.cal-toggle-option):not(.radio-item), .card label:first-child[style*="margin-top"], .input-card label:first-child[style*="margin-top"], .input-page.card label:first-child[style*="margin-top"], .adult-input-card label:first-child[style*="margin-top"] { margin-top: 0 !important; } .card select[style*="margin-top"], .input-card select[style*="margin-top"], .input-page.card select[style*="margin-top"], .adult-input-card select[style*="margin-top"], .card textarea[style*="margin-top"], .input-card textarea[style*="margin-top"], .input-page.card textarea[style*="margin-top"], .adult-input-card textarea[style*="margin-top"], .card input[style*="margin-top"], .input-card input[style*="margin-top"], .input-page.card input[style*="margin-top"], .adult-input-card input[style*="margin-top"] { margin-top: 0 !important; } .card select.dp-select[style], .input-card select.dp-select[style], .input-page.card select.dp-select[style], .adult-input-card select.dp-select[style] { width: 100% !important; padding: 14px 16px !important; border-radius: 12px !important; border: 1.5px solid rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.06) !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; } .card .cal-toggle[style*="margin-top"], .input-card .cal-toggle[style*="margin-top"], .input-page.card .cal-toggle[style*="margin-top"], .adult-input-card .cal-toggle[style*="margin-top"] { margin-top: 8px !important; margin-bottom: 16px !important; } html.theme-light .card select.dp-select[style], html.theme-light .input-card select.dp-select[style], html.theme-light .input-page.card select.dp-select[style], html.theme-light .adult-input-card select.dp-select[style] { background: rgba(255,255,255,0.94) !important; border-color: rgba(90,55,110,0.18) !important; color: #19131f !important; -webkit-text-fill-color: #19131f !important; } /* 20260609: final cross-page unification. Keep forms, section headings, result blocks and adult pages visually aligned. */ .card > h2, .input-card > h2, .input-page.card > h2, .adult-input-card > h2, .card > h3, .input-card > h3, .input-page.card > h3, .adult-input-card > h3 { margin: 0 0 14px !important; color: var(--text) !important; line-height: 1.35; } .card > h2:not(:first-child), .input-card > h2:not(:first-child), .input-page.card > h2:not(:first-child), .adult-input-card > h2:not(:first-child), .card > h3:not(:first-child), .input-card > h3:not(:first-child), .input-page.card > h3:not(:first-child), .adult-input-card > h3:not(:first-child) { margin-top: 22px !important; } .card > h2 + p.muted, .input-card > h2 + p.muted, .input-page.card > h2 + p.muted, .adult-input-card > h2 + p.muted, .card > h3 + p.muted, .input-card > h3 + p.muted, .input-page.card > h3 + p.muted, .adult-input-card > h3 + p.muted { margin-top: -4px !important; margin-bottom: 16px !important; } .card > p.muted + label:not(.cal-toggle-option):not(.radio-item), .input-card > p.muted + label:not(.cal-toggle-option):not(.radio-item), .input-page.card > p.muted + label:not(.cal-toggle-option):not(.radio-item), .adult-input-card > p.muted + label:not(.cal-toggle-option):not(.radio-item) { margin-top: 0 !important; } .card > label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .input-card > label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .input-page.card > label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .adult-input-card > label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .card > label:not(.cal-toggle-option):not(.radio-item):has(> select), .input-card > label:not(.cal-toggle-option):not(.radio-item):has(> select), .input-page.card > label:not(.cal-toggle-option):not(.radio-item):has(> select), .adult-input-card > label:not(.cal-toggle-option):not(.radio-item):has(> select), .card > label:not(.cal-toggle-option):not(.radio-item):has(> textarea), .input-card > label:not(.cal-toggle-option):not(.radio-item):has(> textarea), .input-page.card > label:not(.cal-toggle-option):not(.radio-item):has(> textarea), .adult-input-card > label:not(.cal-toggle-option):not(.radio-item):has(> textarea) { display: grid !important; gap: 7px !important; margin: 0 0 16px !important; color: var(--text-soft) !important; font-weight: 700 !important; } .card > label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])):not(:first-child), .input-card > label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])):not(:first-child), .input-page.card > label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])):not(:first-child), .adult-input-card > label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])):not(:first-child), .card > label:not(.cal-toggle-option):not(.radio-item):has(> select):not(:first-child), .input-card > label:not(.cal-toggle-option):not(.radio-item):has(> select):not(:first-child), .input-page.card > label:not(.cal-toggle-option):not(.radio-item):has(> select):not(:first-child), .adult-input-card > label:not(.cal-toggle-option):not(.radio-item):has(> select):not(:first-child), .card > label:not(.cal-toggle-option):not(.radio-item):has(> textarea):not(:first-child), .input-card > label:not(.cal-toggle-option):not(.radio-item):has(> textarea):not(:first-child), .input-page.card > label:not(.cal-toggle-option):not(.radio-item):has(> textarea):not(:first-child), .adult-input-card > label:not(.cal-toggle-option):not(.radio-item):has(> textarea):not(:first-child) { margin-top: 14px !important; } .card > label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .input-card > label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .input-page.card > label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .adult-input-card > label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]) { display: inline-flex !important; align-items: center; gap: 8px; margin: 14px 0 16px !important; } .card hr[style], .input-card hr[style], .input-page.card hr[style], .adult-input-card hr[style] { margin: 22px 0 !important; border: 0 !important; border-top: 1px solid var(--card-border) !important; } .card button[style*="margin-top"], .input-card button[style*="margin-top"], .input-page.card button[style*="margin-top"], .adult-input-card button[style*="margin-top"] { margin-top: 18px !important; } .card > h2 + label:not(.cal-toggle-option):not(.radio-item), .input-card > h2 + label:not(.cal-toggle-option):not(.radio-item), .input-page.card > h2 + label:not(.cal-toggle-option):not(.radio-item), .adult-input-card > h2 + label:not(.cal-toggle-option):not(.radio-item), .card > h3 + label:not(.cal-toggle-option):not(.radio-item), .input-card > h3 + label:not(.cal-toggle-option):not(.radio-item), .input-page.card > h3 + label:not(.cal-toggle-option):not(.radio-item), .adult-input-card > h3 + label:not(.cal-toggle-option):not(.radio-item) { margin-top: 0 !important; } /* keep the first field after explanatory copy attached, not floating away */ .card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .input-card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .input-page.card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .adult-input-card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> input:not([type=radio]):not([type=checkbox])), .card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> select), .input-card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> select), .input-page.card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> select), .adult-input-card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> select), .card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> textarea), .input-card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> textarea), .input-page.card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> textarea), .adult-input-card > p.muted + label:not(.cal-toggle-option):not(.radio-item):has(> textarea) { margin-top: 0 !important; } /* 20260625: 결제 전 입력 항목은 유지하되, 보이는 선택 UI를 /saju 톤으로 통일한다. */ .card .cal-toggle, .input-card .cal-toggle, .input-page.card .cal-toggle, .adult-input-card .cal-toggle, .card .radio-group, .input-card .radio-group, .input-page.card .radio-group, .adult-input-card .radio-group { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 8px 0 16px !important; } .card .radio-group:not(.radio-group--inline), .input-card .radio-group:not(.radio-group--inline), .input-page.card .radio-group:not(.radio-group--inline), .adult-input-card .radio-group:not(.radio-group--inline) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); } .card .cal-toggle-option, .input-card .cal-toggle-option, .input-page.card .cal-toggle-option, .adult-input-card .cal-toggle-option, .card .radio-item, .input-card .radio-item, .input-page.card .radio-item, .adult-input-card .radio-item, .card .radio-label, .input-card .radio-label, .input-page.card .radio-label, .adult-input-card .radio-label { min-height: 46px; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; flex: 1 1 0; padding: 12px 14px; margin: 0 !important; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.12); background: linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.035)); color: var(--text-soft); font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.15s; } .card .radio-group:not(.radio-group--inline) .radio-item, .input-card .radio-group:not(.radio-group--inline) .radio-item, .input-page.card .radio-group:not(.radio-group--inline) .radio-item, .adult-input-card .radio-group:not(.radio-group--inline) .radio-item { flex: 1 1 auto; justify-content: flex-start; text-align: left; } .card .cal-toggle-option:hover, .input-card .cal-toggle-option:hover, .input-page.card .cal-toggle-option:hover, .adult-input-card .cal-toggle-option:hover, .card .radio-item:hover, .input-card .radio-item:hover, .input-page.card .radio-item:hover, .adult-input-card .radio-item:hover, .card .radio-label:hover, .input-card .radio-label:hover, .input-page.card .radio-label:hover, .adult-input-card .radio-label:hover { border-color: rgba(245,215,110,0.44); background: linear-gradient(135deg, rgba(245,215,110,0.12), rgba(232,160,191,0.10)); transform: translateY(-1px); } .card .cal-toggle-option:has(input:checked), .input-card .cal-toggle-option:has(input:checked), .input-page.card .cal-toggle-option:has(input:checked), .adult-input-card .cal-toggle-option:has(input:checked), .card .radio-item:has(input:checked), .input-card .radio-item:has(input:checked), .input-page.card .radio-item:has(input:checked), .adult-input-card .radio-item:has(input:checked), .card .radio-label:has(input:checked), .input-card .radio-label:has(input:checked), .input-page.card .radio-label:has(input:checked), .adult-input-card .radio-label:has(input:checked) { border-color: rgba(245,215,110,0.74); background: linear-gradient(135deg, rgba(124,77,188,0.32), rgba(232,160,191,0.20)); color: var(--text); box-shadow: 0 10px 26px rgba(124,77,188,0.18), inset 0 1px 0 rgba(255,255,255,0.09); } .card .cal-toggle-option input[type="radio"], .input-card .cal-toggle-option input[type="radio"], .input-page.card .cal-toggle-option input[type="radio"], .adult-input-card .cal-toggle-option input[type="radio"], .card .radio-item input[type="radio"], .input-card .radio-item input[type="radio"], .input-page.card .radio-item input[type="radio"], .adult-input-card .radio-item input[type="radio"], .card .radio-label input[type="radio"], .input-card .radio-label input[type="radio"], .input-page.card .radio-label input[type="radio"], .adult-input-card .radio-label input[type="radio"] { flex: 0 0 auto; accent-color: var(--gold); margin: 0; } .card > label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .input-card > label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .input-page.card > label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .adult-input-card > label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .input-card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .input-page.card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]) { width: fit-content; max-width: 100%; min-height: 42px; display: inline-flex !important; align-items: center; gap: 8px; padding: 10px 13px; margin: 10px 0 16px !important; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.045); color: var(--text-soft) !important; font-weight: 700 !important; line-height: 1.35; } .card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]:checked), .input-card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]:checked), .input-page.card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]:checked), .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]:checked) { border-color: rgba(245,215,110,0.62); background: rgba(245,215,110,0.10); color: var(--text) !important; } .card input[type="checkbox"], .input-card input[type="checkbox"], .input-page.card input[type="checkbox"], .adult-input-card input[type="checkbox"] { accent-color: var(--gold); margin: 0; } .card .custom-upload-field, .input-card .custom-upload-field, .input-page.card .custom-upload-field, .adult-input-card .custom-upload-field { width: 100%; padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.045); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .card .upload-select-button, .input-card .upload-select-button, .input-page.card .upload-select-button, .adult-input-card .upload-select-button { flex: 0 0 auto; width: auto; min-width: 148px; margin: 0; background: var(--grad-button); color: #fff; border-color: rgba(245,215,110,0.30); box-shadow: 0 12px 28px rgba(124,77,188,0.24); } .card .upload-status, .input-card .upload-status, .input-page.card .upload-status, .adult-input-card .upload-status { color: var(--text-soft); } html.theme-light body.light-theme .card .cal-toggle-option, html.theme-light body.light-theme .input-card .cal-toggle-option, html.theme-light body.light-theme .input-page.card .cal-toggle-option, html.theme-light body.light-theme .adult-input-card .cal-toggle-option, html.theme-light body.light-theme .card .radio-item, html.theme-light body.light-theme .input-card .radio-item, html.theme-light body.light-theme .input-page.card .radio-item, html.theme-light body.light-theme .adult-input-card .radio-item, html.theme-light body.light-theme .card .radio-label, html.theme-light body.light-theme .input-card .radio-label, html.theme-light body.light-theme .input-page.card .radio-label, html.theme-light body.light-theme .adult-input-card .radio-label { border-color: rgba(124,77,188,0.18); background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(250,244,255,0.82)); color: #3b3043; box-shadow: 0 8px 22px rgba(31,23,41,0.04), inset 0 1px 0 rgba(255,255,255,0.9); } html.theme-light body.light-theme .card .cal-toggle-option:has(input:checked), html.theme-light body.light-theme .input-card .cal-toggle-option:has(input:checked), html.theme-light body.light-theme .input-page.card .cal-toggle-option:has(input:checked), html.theme-light body.light-theme .adult-input-card .cal-toggle-option:has(input:checked), html.theme-light body.light-theme .card .radio-item:has(input:checked), html.theme-light body.light-theme .input-card .radio-item:has(input:checked), html.theme-light body.light-theme .input-page.card .radio-item:has(input:checked), html.theme-light body.light-theme .adult-input-card .radio-item:has(input:checked), html.theme-light body.light-theme .card .radio-label:has(input:checked), html.theme-light body.light-theme .input-card .radio-label:has(input:checked), html.theme-light body.light-theme .input-page.card .radio-label:has(input:checked), html.theme-light body.light-theme .adult-input-card .radio-label:has(input:checked) { border-color: rgba(245,190,78,0.86); background: linear-gradient(135deg, rgba(236,221,255,0.96), rgba(255,220,238,0.90)); color: #2f2239; box-shadow: 0 12px 28px rgba(124,77,188,0.11), 0 0 0 1px rgba(245,215,110,0.18) inset; } html.theme-light body.light-theme .card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), html.theme-light body.light-theme .input-card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), html.theme-light body.light-theme .input-page.card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]), html.theme-light body.light-theme .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]) { border-color: rgba(124,77,188,0.18); background: rgba(255,255,255,0.86); color: #3b3043 !important; } html.theme-light body.light-theme .card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]:checked), html.theme-light body.light-theme .input-card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]:checked), html.theme-light body.light-theme .input-page.card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]:checked), html.theme-light body.light-theme .adult-input-card label:not(.cal-toggle-option):not(.radio-item):has(> input[type=checkbox]:checked) { border-color: rgba(245,190,78,0.78); background: rgba(245,215,110,0.16); color: #2f2239 !important; } html.theme-light body.light-theme .card .custom-upload-field, html.theme-light body.light-theme .input-card .custom-upload-field, html.theme-light body.light-theme .input-page.card .custom-upload-field, html.theme-light body.light-theme .adult-input-card .custom-upload-field { border-color: rgba(124,77,188,0.14); background: rgba(255,255,255,0.74); box-shadow: 0 12px 30px rgba(31,23,41,0.05), inset 0 1px 0 rgba(255,255,255,0.9); } @media (max-width: 480px) { .card .cal-toggle, .input-card .cal-toggle, .input-page.card .cal-toggle, .adult-input-card .cal-toggle, .card .radio-group, .input-card .radio-group, .input-page.card .radio-group, .adult-input-card .radio-group { gap: 7px; } .card .radio-group:not(.radio-group--inline), .input-card .radio-group:not(.radio-group--inline), .input-page.card .radio-group:not(.radio-group--inline), .adult-input-card .radio-group:not(.radio-group--inline) { grid-template-columns: 1fr; } .card .upload-select-button, .input-card .upload-select-button, .input-page.card .upload-select-button, .adult-input-card .upload-select-button, .card .upload-status, .input-card .upload-status, .input-page.card .upload-status, .adult-input-card .upload-status { flex: 1 1 100%; } } #result-section:not(.result-card) { width: 100%; max-width: 720px; margin: 0 auto; } #result-section:not(.result-card) > .card + .card, .result-card > .card + .card { margin-top: 16px; } .adult-report-page .adult-page-header { width: min(720px, calc(100% - 32px)); margin: 18px auto 0; border-radius: 26px; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 22px 60px rgba(0,0,0,0.28); } .adult-report-page .container { padding-top: 18px; } @media (max-width: 520px) { .adult-report-page .adult-page-header { width: calc(100% - 28px); margin-top: 12px; border-radius: 22px; } } /* 20260609: micro visual polish after production sweep — tighten form readability and time rows. */ .page-header-wrap p, .page-header p, .adult-page-header p, .hub-hero p { color: rgba(255,255,255,0.9) !important; text-shadow: 0 2px 10px rgba(0,0,0,0.42); } .hint, .note, .input-hint, .card-sub, .muted { color: color-mix(in srgb, var(--text-soft) 88%, var(--text) 12%) !important; } .birth-profile-extra .birth-time-header { align-items: flex-start; } .birth-profile-extra .unknown-time { flex: 0 0 auto; } .time-picker { gap: 10px !important; } .time-select-wrap { gap: 7px !important; } .time-select-wrap > span, .time-picker > span { flex: 0 0 auto; min-width: 16px; color: var(--text-soft); font-weight: 700; line-height: 1; } .time-picker select { min-height: 48px; } @media (max-width: 520px) { .time-picker { gap: 8px !important; } .time-select-wrap { gap: 6px !important; } } /* 재회 리포트: 끊어 읽는 요약 + 중간 이미지 카드 */ .reunion-visual-break { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 16px; margin: 4px 0 2px; padding: 12px; border: 1px solid rgba(245, 215, 110, 0.24); border-radius: 18px; background: linear-gradient(135deg, rgba(17, 13, 20, 0.94), rgba(68, 31, 50, 0.72)); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26); overflow: hidden; } .reunion-visual-break::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 82% 12%, rgba(245, 215, 110, 0.16), transparent 34%); pointer-events: none; } .reunion-visual-break img { width: 150px; height: 104px; object-fit: cover; border-radius: 14px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34); } .reunion-visual-break figcaption { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; } .reunion-visual-break figcaption span { width: fit-content; padding: 3px 9px; border-radius: 999px; background: rgba(245, 215, 110, 0.14); color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; } .reunion-visual-break figcaption strong { color: #fff7ec; font-family: 'Noto Serif KR', serif; font-size: 18px; line-height: 1.35; } .reunion-visual-break figcaption small { color: rgba(255, 247, 236, 0.78); font-size: 13px; line-height: 1.55; } @media (max-width: 540px) { .reunion-visual-break { grid-template-columns: 1fr; } .reunion-visual-break img { width: 100%; height: 150px; } } /* 사주 명리 리포트: 끊어 읽는 중간 이미지 카드 */ .saju-visual-break { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 16px; margin: 0 20px 18px; padding: 12px; border: 1px solid rgba(245, 215, 110, 0.22); border-radius: 18px; background: linear-gradient(135deg, rgba(14, 13, 16, 0.96), rgba(56, 42, 29, 0.74)); box-shadow: 0 16px 38px rgba(0,0,0,0.24); overflow: hidden; } .saju-visual-break::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 84% 12%, rgba(245, 215, 110, 0.15), transparent 34%); pointer-events: none; } .saju-visual-break img { position: relative; z-index: 1; width: 150px; height: 104px; object-fit: cover; border-radius: 14px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34); } .saju-visual-break figcaption { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; } .saju-visual-break figcaption span { width: fit-content; padding: 3px 9px; border-radius: 999px; background: rgba(245, 215, 110, 0.14); color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; } .saju-visual-break figcaption strong { color: #fff7ec; font-family: 'Noto Serif KR', serif; font-size: 18px; line-height: 1.35; } .saju-visual-break figcaption small { color: rgba(255, 247, 236, 0.78); font-size: 13px; line-height: 1.55; } @media (max-width: 540px) { .saju-visual-break { grid-template-columns: 1fr; margin: 0 16px 16px; } .saju-visual-break img { width: 100%; height: 150px; } } /* 20260610-report-quality2: paid report readability, tone, and dark-mode contrast */ .saju-section { background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.04)); border-color: rgba(245,215,110,0.18); box-shadow: 0 18px 46px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06); } .saju-section .section-title { letter-spacing: -0.01em; line-height: 1.45; } .saju-section .section-body { color: var(--text-soft); font-size: 15.5px; line-height: 1.92; word-break: keep-all; overflow-wrap: anywhere; } .saju-section.tone-strong { border-left-color: #ff8fa3; border-color: rgba(255,143,163,0.30); } .saju-section.tone-strong .section-title { background: linear-gradient(90deg, rgba(255,143,163,0.96), rgba(245,215,110,0.84)); color: #251017; } .saju-section.tone-soft { border-left-color: #9de0ad; border-color: rgba(157,224,173,0.24); } .saju-section.tone-soft .section-title { background: linear-gradient(90deg, rgba(157,224,173,0.22), rgba(245,215,110,0.14)); color: #f7f2ea; } .section-easy-summary { background: linear-gradient(135deg, rgba(245,215,110,0.14), rgba(232,160,191,0.10)); border-color: rgba(245,215,110,0.28); } .section-easy-label { color: #f5d76e; } .month-card, #timing-grid .month-card { background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); border-color: rgba(245,215,110,0.18); } .month-card .month-label, .month-card .month-ganzhi, .month-card .month-korean { color: #f7f2ea; } .month-card .month-desc { color: rgba(247,242,234,0.78); } .reunion-chart-guide { color: rgba(247,242,234,0.82); } .chat-error { color: #ffd9df; border-color: rgba(255,143,163,0.24); background: rgba(255,143,163,0.10); } html.theme-light .saju-section.tone-soft .section-title, html.theme-light .saju-section.tone-strong .section-title { color: #19131f !important; } @media (max-width: 480px) { .saju-section .section-body { font-size: 15px; line-height: 1.86; } .question-answer-card { padding: 14px 14px 13px; border-radius: 18px; } .question-answer-card .answer-label { margin-bottom: 8px; padding: 5px 9px; font-size: 11px; } .question-answer-card h2 { margin-bottom: 8px; font-size: 17px; line-height: 1.24; } .question-answer-card .answer-summary { margin-bottom: 9px; font-size: 14px; line-height: 1.42; } .answer-bullets { gap: 6px; } .answer-bullets li { padding: 8px 9px; } .answer-bullets b { font-size: 11px; } .answer-bullets span { font-size: 12.8px; line-height: 1.34; } .preview-answer-card { margin: 10px 12px 8px; padding: 11px 12px 10px; } .preview-answer-card strong { font-size: 14.5px; line-height: 1.42; } .preview-answer-label { margin-bottom: 5px; font-size: 11px; } .preview-core-bullets { margin: 0 12px 8px; gap: 6px; } .preview-core-bullets li, .preview-unlock-note { padding: 8px 10px; } .preview-core-bullets b, .preview-unlock-note b { font-size: 11px; } .preview-core-bullets span, .preview-unlock-note span { font-size: 13px; line-height: 1.38; } .preview-unlock-note { margin: 0 12px 12px; } #lock-overlay { margin-top: 10px; } .lock-box { padding: 16px 13px 14px; border-radius: 18px; } .lock-icon { display: none; } .lock-title { font-size: 15.5px; line-height: 1.32; } .lock-desc { margin-bottom: 10px; font-size: 12.8px; line-height: 1.45; } .lock-section-list { gap: 6px; margin-bottom: 13px; } .lock-section-list li { padding: 7px 9px 7px 24px; font-size: 12.2px; line-height: 1.32; } .lock-section-list li::before { top: 7px; left: 9px; } .lock-pay-btn { padding: 12px 18px; font-size: 14.5px; } .month-card, #timing-grid .month-card { min-height: 132px; } } /* 20260610-qa-fix1: MCP QA readability sweep — force story/adult overlay copy above global theme overrides. */ html.theme-light .story-hero .story-badge, html.theme-dark .story-hero .story-badge { color: #fffaf0 !important; -webkit-text-fill-color: #fffaf0 !important; background: rgba(8, 4, 20, 0.48) !important; border-color: rgba(255, 250, 240, 0.46) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22) !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55) !important; } html.theme-light .adult-consent-modal, html.theme-dark .adult-consent-modal { background: rgba(5, 2, 8, 0.78) !important; color: #fffaf0 !important; -webkit-text-fill-color: #fffaf0 !important; } html.theme-light .adult-consent-box, html.theme-dark .adult-consent-box { background: linear-gradient(145deg, #170814 0%, #331026 52%, #5a1b38 100%) !important; color: #fffaf0 !important; -webkit-text-fill-color: #fffaf0 !important; border-color: rgba(255, 250, 240, 0.24) !important; box-shadow: 0 30px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.10) !important; } html.theme-light .adult-consent-box strong, html.theme-dark .adult-consent-box strong { color: #fffaf0 !important; -webkit-text-fill-color: #fffaf0 !important; text-shadow: 0 2px 14px rgba(0,0,0,.42) !important; } html.theme-light .adult-consent-box p, html.theme-dark .adult-consent-box p { color: rgba(255, 250, 240, 0.90) !important; -webkit-text-fill-color: rgba(255, 250, 240, 0.90) !important; } html.theme-light .adult-consent-actions .adult-cancel, html.theme-dark .adult-consent-actions .adult-cancel { background: rgba(255, 255, 255, 0.20) !important; color: #fffaf0 !important; -webkit-text-fill-color: #fffaf0 !important; border: 1px solid rgba(255, 250, 240, 0.28) !important; } html.theme-light .adult-consent-actions .adult-ok, html.theme-dark .adult-consent-actions .adult-ok { color: #210711 !important; -webkit-text-fill-color: #210711 !important; box-shadow: 0 12px 26px rgba(255, 79, 121, 0.28) !important; } /* 후기 페이지 */ .reviews-page { background: radial-gradient(circle at 70% 0%, rgba(241,198,120,.18), transparent 28%), linear-gradient(180deg,#fffaf7 0%,#f3edf7 100%); color: #19131f; min-height: 100vh; padding-bottom: 148px; } .reviews-shell { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 128px; } .reviews-hero { position: relative; overflow: hidden; border-radius: 32px; padding: 32px 22px 22px; color: #fff; background: linear-gradient(135deg,#180c22 0%,#321329 52%,#7b273e 100%); box-shadow: 0 18px 44px rgba(49,24,62,.20); } .reviews-hero::after { content:""; position:absolute; inset:auto -50px -70px auto; width:210px; height:210px; border-radius:999px; background:radial-gradient(circle,rgba(255,220,150,.28),transparent 68%); } .reviews-hero > * { position: relative; z-index: 1; } .reviews-kicker { display:inline-flex; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.13); color:#ffe4a8; font-size:12px; font-weight:900; } .reviews-hero h1 { margin: 14px 0 9px; font-size: clamp(30px, 8vw, 44px); line-height: 1.05; letter-spacing: -.06em; color: #fff7e9 !important; -webkit-text-fill-color: #fff7e9 !important; text-shadow: 0 3px 16px rgba(0,0,0,.42); } .reviews-hero p { margin: 0; color: rgba(255,255,255,.86) !important; -webkit-text-fill-color: rgba(255,255,255,.86) !important; font-size: 14px; line-height: 1.62; } .review-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; } .review-stats div { padding:12px 8px; border-radius:18px; background:rgba(255,255,255,.11); text-align:center; } .review-stats b { display:block; font-size:22px; color:#ffe3a4; } .review-stats span { display:block; margin-top:2px; font-size:11px; color:rgba(255,255,255,.72); } .review-filter { display:flex; gap:8px; overflow-x:auto; padding:16px 0 12px; scrollbar-width:none; } .review-filter::-webkit-scrollbar { display:none; } .review-filter a { flex:0 0 auto; padding:10px 13px; border-radius:999px; background:rgba(255,255,255,.88); color:#31213b; text-decoration:none; font-weight:900; font-size:13px; box-shadow:0 8px 20px rgba(31,23,41,.07); } .review-list { display:grid; gap:12px; } .review-card { padding:18px 16px; border-radius:24px; background:rgba(255,255,255,.90); border:1px solid rgba(88,58,112,.08); box-shadow:0 12px 30px rgba(31,23,41,.10); } .review-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; } .review-top span { font-weight:900; color:#25152f; } .review-top strong { color:#c58a22; font-size:13px; letter-spacing:.02em; } .review-card p { margin:0 0 12px; color:rgba(31,23,41,.74); font-size:14px; line-height:1.65; } .review-card a { color:#6e2d55; font-size:13px; font-weight:900; text-decoration:none; } .reviews-cta { margin-top:18px; padding:22px 18px; border-radius:26px; text-align:center; color:#fff; background:linear-gradient(135deg,#281331,#5b2548); box-shadow:0 14px 34px rgba(48,22,56,.18); } .reviews-cta h2 { margin:0 0 8px; font-size:21px; letter-spacing:-.045em; color:#fff7e9 !important; -webkit-text-fill-color:#fff7e9 !important; text-shadow:0 2px 12px rgba(0,0,0,.35); } .reviews-cta p { margin:0 0 15px; color:rgba(255,255,255,.82) !important; -webkit-text-fill-color:rgba(255,255,255,.82) !important; font-size:13px; } .reviews-cta .primary-btn { display:inline-flex; width:auto; min-width:180px; justify-content:center; text-decoration:none; background:#fff7e9 !important; color:#281331 !important; -webkit-text-fill-color:#281331 !important; border:0 !important; box-shadow:0 10px 24px rgba(0,0,0,.18); } html.theme-light .reviews-page .reviews-hero h1, html.theme-dark .reviews-page .reviews-hero h1, html.theme-light .reviews-page .reviews-cta h2, html.theme-dark .reviews-page .reviews-cta h2 { color:#fff7e9 !important; -webkit-text-fill-color:#fff7e9 !important; text-shadow:0 3px 16px rgba(0,0,0,.42) !important; } html.theme-light .reviews-page .reviews-hero p, html.theme-dark .reviews-page .reviews-hero p, html.theme-light .reviews-page .reviews-cta p, html.theme-dark .reviews-page .reviews-cta p { color:rgba(255,255,255,.86) !important; -webkit-text-fill-color:rgba(255,255,255,.86) !important; } html.theme-light .reviews-page .reviews-cta .primary-btn, html.theme-dark .reviews-page .reviews-cta .primary-btn { background:#fff7e9 !important; color:#281331 !important; -webkit-text-fill-color:#281331 !important; } html.theme-dark .reviews-page { background: radial-gradient(circle at 70% 0%, rgba(241,198,120,.12), transparent 28%), linear-gradient(180deg,#111015 0%,#0b0b0d 100%); color:#f7f2ea; } html.theme-dark .review-filter a, html.theme-dark .review-card { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.10); color:#f7f2ea; } html.theme-dark .review-top span { color:#fff7e9; } html.theme-dark .review-card p { color:rgba(255,255,255,.72); } html.theme-dark .review-card a { color:#ffd78e; } html.theme-light .paid-report-loading.card { background: radial-gradient(circle at 50% 0%, rgba(245,185,90,0.20), transparent 34%), rgba(255,255,255,0.92) !important; border-color: rgba(168,110,38,0.20) !important; } html.theme-dark .paid-report-loading.card { background: radial-gradient(circle at 50% 0%, rgba(245,215,110,0.14), transparent 34%), rgba(255,255,255,0.04) !important; border-color: rgba(245,215,110,0.34) !important; } html.theme-light .paid-loading-title, html.theme-dark .paid-loading-title { color: var(--text) !important; -webkit-text-fill-color: currentColor !important; } html.theme-light .paid-loading-desc, html.theme-light .paid-loading-guide { color: rgba(31,23,41,0.74) !important; -webkit-text-fill-color: rgba(31,23,41,0.74) !important; } html.theme-dark .paid-loading-desc, html.theme-dark .paid-loading-guide { color: rgba(247,242,234,0.76) !important; -webkit-text-fill-color: rgba(247,242,234,0.76) !important; } html.theme-light .paid-loading-guide strong, html.theme-dark .paid-loading-guide strong, html.theme-light .paid-loading-badge, html.theme-dark .paid-loading-badge { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } html.theme-light .paid-loading-steps li { background: rgba(255,255,255,0.78) !important; border-color: rgba(90,55,110,0.10) !important; color: rgba(31,23,41,0.82) !important; -webkit-text-fill-color: rgba(31,23,41,0.82) !important; } html.theme-dark .paid-loading-steps li { color: rgba(247,242,234,0.84) !important; -webkit-text-fill-color: rgba(247,242,234,0.84) !important; } @media (max-width: 430px) { .paid-report-loading { padding: 24px 16px; } .paid-loading-desc, .paid-loading-guide { font-size: 14px; line-height: 1.65; } .paid-loading-steps li { min-height: 42px; padding: 11px 12px 11px 38px; font-size: 13px; } .paid-loading-steps li::before { left: 14px; width: 10px; height: 10px; } } @media (min-width: 768px) { .reviews-page .bottom-tabbar { position: static; left: auto; bottom: auto; transform: none; margin: 0 auto; } } @media (max-width: 380px) { .review-stats { grid-template-columns: 1fr; } } /* 20260616: CSS-only readability polish for small text in light/dark themes. */ html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: rgba(31,23,41,0.56) !important; -webkit-text-fill-color: rgba(31,23,41,0.56) !important; opacity: 1 !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder, input::placeholder, textarea::placeholder { color: rgba(247,242,234,0.60) !important; -webkit-text-fill-color: rgba(247,242,234,0.60) !important; opacity: 1 !important; } html.theme-light select:invalid, html.theme-light select.placeholder, html.theme-light .select-placeholder, html.theme-light .form-placeholder { color: rgba(31,23,41,0.58) !important; -webkit-text-fill-color: rgba(31,23,41,0.58) !important; } html.theme-dark select:invalid, html.theme-dark select.placeholder, html.theme-dark .select-placeholder, html.theme-dark .form-placeholder { color: rgba(247,242,234,0.62) !important; -webkit-text-fill-color: rgba(247,242,234,0.62) !important; } .carousel-overlay { background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.34) 72%, transparent 100%); } .carousel-desc { color: rgba(255,255,255,0.88); text-shadow: 0 1px 8px rgba(0,0,0,0.36); } .carousel-badge { background: rgba(245,215,110,0.28); color: #ffe68a; border-color: rgba(245,215,110,0.56); text-shadow: 0 1px 7px rgba(0,0,0,0.32); } .carousel-card-featured .carousel-badge { background: rgba(232,160,191,0.32); color: #ffd3e4; border-color: rgba(232,160,191,0.62); } .home-page .carousel-desc, .home-page .carousel-card.adult-card .carousel-desc { color: rgba(31,23,41,0.72) !important; font-size: 13px !important; line-height: 1.42 !important; text-shadow: none !important; } html.theme-dark .home-page .carousel-desc, body.home-dark .home-page .carousel-desc, html.theme-dark .home-page .carousel-card.adult-card .carousel-desc, body.home-dark .home-page .carousel-card.adult-card .carousel-desc { color: rgba(247,240,255,0.76) !important; } .home-page .carousel-badge { color: #6a4b00 !important; background: rgba(245,215,110,0.72) !important; border-color: rgba(133,94,0,0.22) !important; text-shadow: none !important; } html.theme-dark .home-page .carousel-badge, body.home-dark .home-page .carousel-badge { color: #fff0ad !important; background: rgba(245,215,110,0.22) !important; border-color: rgba(245,215,110,0.50) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.38) !important; } .rec-label { background: rgba(18,7,24,0.44); color: #fff3bd; border: 1px solid rgba(255,243,189,0.28); text-shadow: 0 1px 8px rgba(0,0,0,0.38); } .rec-desc { color: rgba(255,255,255,0.90); text-shadow: 0 1px 9px rgba(0,0,0,0.40); } html.theme-light .page-header p, html.theme-dark .page-header p, html.theme-light .page-header-content p, html.theme-dark .page-header-content p, html.theme-light .adult-hero p, html.theme-dark .adult-hero p, html.theme-light .adult-page-header p, html.theme-dark .adult-page-header p { line-height: 1.68 !important; text-shadow: 0 2px 12px rgba(0,0,0,0.42) !important; } html.theme-light .page-header-wrap p, html.theme-light .page-header-wrap .tagline, html.theme-light .page-header.adult-page-header p, html.theme-light .adult-hero p, html.theme-light .hub-hero p, html.theme-dark .page-header-wrap p, html.theme-dark .page-header-wrap .tagline, html.theme-dark .page-header.adult-page-header p, html.theme-dark .adult-hero p, html.theme-dark .hub-hero p { color: rgba(255,250,240,0.86) !important; -webkit-text-fill-color: rgba(255,250,240,0.86) !important; } html.theme-light .page-header-wrap .page-header-content, html.theme-dark .page-header-wrap .page-header-content, html.theme-light .page-header.adult-page-header .page-header-content, html.theme-dark .page-header.adult-page-header .page-header-content { background: linear-gradient(to bottom, rgba(15,10,30,0.38), rgba(15,10,30,0.78)) !important; } html.theme-light .site-footer .footer-copy, html.theme-light .home-page .site-footer .footer-copy { color: rgba(31,23,41,0.68) !important; opacity: 1 !important; } html.theme-dark .site-footer .footer-copy, body.home-dark .site-footer .footer-copy { color: rgba(247,240,255,0.62) !important; opacity: 1 !important; } .secondary-btn, .adult-consent-actions .adult-cancel { color: rgba(255,250,240,0.92) !important; background: rgba(255,255,255,0.18) !important; border: 1px solid rgba(255,255,255,0.20) !important; } html.theme-light .secondary-btn { color: #3b2546 !important; background: rgba(255,255,255,0.82) !important; border-color: rgba(90,55,110,0.18) !important; } button:disabled, button.disabled, .disabled, .nav-btn:disabled, .email-collect-btn:disabled, .followup-send-btn:disabled { opacity: 0.62 !important; cursor: not-allowed; } html.theme-light button:disabled, html.theme-light button.disabled, html.theme-light .disabled { color: rgba(31,23,41,0.62) !important; -webkit-text-fill-color: rgba(31,23,41,0.62) !important; } html.theme-dark button:disabled, html.theme-dark button.disabled, html.theme-dark .disabled { color: rgba(247,242,234,0.68) !important; -webkit-text-fill-color: rgba(247,242,234,0.68) !important; } @media (max-width: 480px) { .home-page .carousel-desc, .home-page .carousel-card.adult-card .carousel-desc { font-size: 13px !important; line-height: 1.42 !important; } } /* 20260616: final specificity for home taxonomy pills in theme QA. */ html.theme-light .home-page .carousel-badge[class*="badge-"], html.theme-light .home-page .rec-label[class*="badge-"], html.theme-light .home-page .carousel-badge, html.theme-light .home-page .rec-label { color: rgba(63,35,70,0.86) !important; border-color: rgba(90,55,110,0.24) !important; background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,238,226,0.94)) !important; } html.theme-dark .home-page .carousel-badge[class*="badge-"], html.theme-dark .home-page .rec-label[class*="badge-"], body.home-dark .home-page .carousel-badge[class*="badge-"], body.home-dark .home-page .rec-label[class*="badge-"], html.theme-dark .home-page .carousel-badge, html.theme-dark .home-page .rec-label, body.home-dark .home-page .carousel-badge, body.home-dark .home-page .rec-label { color: rgba(255,240,190,0.92) !important; border-color: rgba(245,215,110,0.42) !important; background: linear-gradient(135deg, rgba(54,33,71,0.92), rgba(82,43,73,0.78)) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.34) !important; } /* 20260616: report chart readability tokens for paid/result views. */ :root { --chart-label-light: rgba(31,23,41,0.86); --chart-label-soft-light: rgba(31,23,41,0.74); --chart-grid-light: rgba(31,23,41,0.16); --chart-label-dark: rgba(247,242,234,0.94); --chart-label-soft-dark: rgba(247,242,234,0.78); --chart-grid-dark: rgba(247,242,234,0.18); } html.theme-light { --chart-label: var(--chart-label-light); --chart-label-soft: var(--chart-label-soft-light); --chart-grid: var(--chart-grid-light); } html.theme-dark, body.home-dark { --chart-label: var(--chart-label-dark); --chart-label-soft: var(--chart-label-soft-dark); --chart-grid: var(--chart-grid-dark); } /* Result report cards: keep labels/body readable inside paid report surfaces. */ html.theme-light .result-card, html.theme-light .result-card .card, html.theme-light .saju-section, html.theme-light .adult-result-card, html.theme-light .adult-result-card .reading-section, html.theme-light .analysis-card, html.theme-light .chart-card, html.theme-light .element-chart, html.theme-light .element-distribution, html.theme-light .saju-chart, html.theme-light .radar-chart { color: rgba(31,23,41,0.88) !important; } html.theme-dark .result-card, html.theme-dark .result-card .card, html.theme-dark .saju-section, html.theme-dark .adult-result-card, html.theme-dark .adult-result-card .reading-section, html.theme-dark .analysis-card, html.theme-dark .chart-card, html.theme-dark .element-chart, html.theme-dark .element-distribution, html.theme-dark .saju-chart, html.theme-dark .radar-chart { color: rgba(247,242,234,0.92) !important; } html.theme-light .result-card p, html.theme-light .result-card li, html.theme-light .result-card small, html.theme-light .result-card .birth-info, html.theme-light .result-card .card-sub, html.theme-light .result-card .section-body, html.theme-light .adult-result-card .result-intro, html.theme-light .adult-result-card .reading-section p { color: rgba(31,23,41,0.76) !important; opacity: 1 !important; } html.theme-dark .result-card p, html.theme-dark .result-card li, html.theme-dark .result-card small, html.theme-dark .result-card .birth-info, html.theme-dark .result-card .card-sub, html.theme-dark .result-card .section-body, html.theme-dark .adult-result-card .result-intro, html.theme-dark .adult-result-card .reading-section p { color: rgba(247,242,234,0.80) !important; opacity: 1 !important; } /* Five-elements distribution: DOM bar labels, values, legends, and chart wrappers. */ .elements-title, .element-name, .element-count, .chart-label, .chart-value, .chart-legend, .chart-legend * , .radar-legend, .radar-legend *, .bar-label, .bar-value, .axis-label, .number-label, .tick-label, .legend-label, .element-distribution, .element-distribution *, .elements-bar, .elements-bar * { opacity: 1 !important; } html.theme-light .elements-title, html.theme-light .element-name, html.theme-light .element-count, html.theme-light .chart-label, html.theme-light .chart-value, html.theme-light .chart-legend, html.theme-light .chart-legend *, html.theme-light .radar-legend, html.theme-light .radar-legend *, html.theme-light .bar-label, html.theme-light .bar-value, html.theme-light .axis-label, html.theme-light .number-label, html.theme-light .tick-label, html.theme-light .legend-label, html.theme-light .element-distribution, html.theme-light .elements-bar, html.theme-light .elements-bar * { color: var(--chart-label) !important; -webkit-text-fill-color: var(--chart-label) !important; } html.theme-light .elements-title, html.theme-light .chart-legend, html.theme-light .radar-legend, html.theme-light .element-count, html.theme-light .bar-value { color: var(--chart-label-soft) !important; -webkit-text-fill-color: var(--chart-label-soft) !important; } html.theme-dark .elements-title, html.theme-dark .element-name, html.theme-dark .element-count, html.theme-dark .chart-label, html.theme-dark .chart-value, html.theme-dark .chart-legend, html.theme-dark .chart-legend *, html.theme-dark .radar-legend, html.theme-dark .radar-legend *, html.theme-dark .bar-label, html.theme-dark .bar-value, html.theme-dark .axis-label, html.theme-dark .number-label, html.theme-dark .tick-label, html.theme-dark .legend-label, html.theme-dark .element-distribution, html.theme-dark .elements-bar, html.theme-dark .elements-bar * { color: var(--chart-label) !important; -webkit-text-fill-color: var(--chart-label) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.34) !important; } html.theme-dark .elements-title, html.theme-dark .chart-legend, html.theme-dark .radar-legend, html.theme-dark .element-count, html.theme-dark .bar-value { color: var(--chart-label-soft) !important; -webkit-text-fill-color: var(--chart-label-soft) !important; } html.theme-light .element-track { background: rgba(31,23,41,0.12) !important; box-shadow: inset 0 0 0 1px rgba(31,23,41,0.06) !important; } html.theme-dark .element-track { background: rgba(247,242,234,0.14) !important; box-shadow: inset 0 0 0 1px rgba(247,242,234,0.08) !important; } html.theme-light .elements-chart, html.theme-light .reunion-radar-wrap, html.theme-light .chart-card, html.theme-light .element-chart, html.theme-light .element-distribution, html.theme-light .saju-chart, html.theme-light .radar-chart { background: rgba(255,255,255,0.42) !important; border-color: rgba(31,23,41,0.12) !important; } html.theme-dark .elements-chart, html.theme-dark .reunion-radar-wrap, html.theme-dark .chart-card, html.theme-dark .element-chart, html.theme-dark .element-distribution, html.theme-dark .saju-chart, html.theme-dark .radar-chart { background: rgba(10,7,18,0.30) !important; border-color: rgba(247,242,234,0.14) !important; } .elements-chart, .reunion-radar-wrap, .chart-card, .element-chart, .element-distribution, .saju-chart, .radar-chart { border-radius: 18px; } html.theme-dark .elements-chart canvas, html.theme-dark .reunion-radar-wrap canvas, html.theme-dark canvas#elements-radar, html.theme-dark canvas#elements-compare-radar, html.theme-dark canvas[id*="radar"], html.theme-dark canvas[id*="chart"] { filter: invert(1) hue-rotate(180deg) brightness(1.24) contrast(1.08) saturate(1.06) !important; } html.theme-light .elements-chart canvas, html.theme-light .reunion-radar-wrap canvas, html.theme-light canvas#elements-radar, html.theme-light canvas#elements-compare-radar, html.theme-light canvas[id*="radar"], html.theme-light canvas[id*="chart"] { filter: contrast(1.05) saturate(1.02) !important; } html.theme-light .reunion-radar-wrap { background: #ffffff !important; border-color: rgba(31,23,41,0.18) !important; box-shadow: inset 0 0 0 1px rgba(31,23,41,0.035), 0 14px 34px rgba(31,23,41,0.08) !important; } html.theme-dark .reunion-radar-wrap { background: rgba(18,13,29,0.96) !important; border-color: rgba(245,215,110,0.34) !important; box-shadow: inset 0 0 0 1px rgba(247,242,234,0.06), 0 14px 34px rgba(0,0,0,0.22) !important; } html.theme-light canvas#elements-compare-radar, html.theme-dark canvas#elements-compare-radar { filter: none !important; } /* SVG-based charts/overlays if introduced by any result renderer. */ html.theme-light .result-card svg text, html.theme-light .chart-card svg text, html.theme-light .element-chart svg text, html.theme-light .element-distribution svg text, html.theme-light .saju-chart svg text, html.theme-light .radar-chart svg text { fill: var(--chart-label) !important; stroke: none !important; opacity: 1 !important; } html.theme-dark .result-card svg text, html.theme-dark .chart-card svg text, html.theme-dark .element-chart svg text, html.theme-dark .element-distribution svg text, html.theme-dark .saju-chart svg text, html.theme-dark .radar-chart svg text { fill: var(--chart-label) !important; stroke: none !important; opacity: 1 !important; } html.theme-light .result-card svg line, html.theme-light .result-card svg path.grid, html.theme-light .result-card svg .grid-line, html.theme-light .chart-grid { stroke: var(--chart-grid) !important; opacity: 1 !important; } html.theme-dark .result-card svg line, html.theme-dark .result-card svg path.grid, html.theme-dark .result-card svg .grid-line, html.theme-dark .chart-grid { stroke: var(--chart-grid) !important; opacity: 1 !important; } /* 20260623-conversion-mobile-cta: keep primary CTA closer to first 390px viewport on approved paid routes. */ @media (max-width: 480px) { .page-header-wrap.conversion-mobile-compact { min-height: 176px; margin-bottom: 12px; border-radius: 14px; } .page-header-wrap.conversion-mobile-compact .page-header-content { padding: 22px 14px 18px; } .page-header-wrap.conversion-mobile-compact h1 { font-size: 28px; margin-bottom: 6px; } .page-header-wrap.conversion-mobile-compact .tagline { font-size: 13px; } .page-header-wrap.conversion-mobile-compact .page-guide { margin-top: 8px; font-size: 12px; line-height: 1.45; } .page-header-wrap.conversion-mobile-compact + .card { padding: 16px 14px; margin-bottom: 14px; } .page-header-wrap.conversion-mobile-compact + .card label, .page-header-wrap.conversion-mobile-compact + .card .cal-toggle { margin-bottom: 8px; } .page-header-wrap.conversion-mobile-compact + .card input, .page-header-wrap.conversion-mobile-compact + .card select, .page-header-wrap.conversion-mobile-compact + .card textarea { padding-top: 12px; padding-bottom: 12px; } .page-header-wrap.conversion-mobile-compact + .card .btn-primary { margin-top: 14px; } } /* Reunion paid result readability hardening: chart guide + radar contrast. */ .reunion-chart-guide { background: rgba(245, 215, 110, 0.10); border-color: rgba(245, 215, 110, 0.32); color: rgba(255, 248, 232, 0.92); } .reunion-chart-guide strong { color: #ffe08a; } .reunion-radar-wrap { width: min(100%, 380px); max-width: 380px; padding: 12px; border: 1px solid rgba(245, 215, 110, 0.18); box-sizing: border-box; } html.theme-light .reunion-chart-guide, body.light-theme .reunion-chart-guide { background: rgba(255, 248, 229, 0.96) !important; border-color: rgba(138, 97, 0, 0.28) !important; color: #34243f !important; } html.theme-light .reunion-chart-guide strong, body.light-theme .reunion-chart-guide strong { color: #6f4b00 !important; } html.theme-light .reunion-radar-wrap, body.light-theme .reunion-radar-wrap { background: rgba(255, 255, 255, 0.78) !important; border-color: rgba(48, 35, 64, 0.18) !important; } html.theme-dark .reunion-radar-wrap { background: rgba(10, 7, 18, 0.54) !important; border-color: rgba(255, 224, 138, 0.20) !important; } @media (max-width: 420px) { .reunion-chart-guide { padding: 11px 12px; font-size: 12.5px; } .reunion-radar-wrap { width: 100%; max-width: 100%; padding: 8px; margin: 10px auto 8px; } .reunion-radar-wrap canvas#elements-compare-radar { max-height: 318px; } .radar-legend { gap: 14px; flex-wrap: wrap; } } /* 사원제비 결과 선택 번호 카드 */ .oracle-stick-summary { display: grid; gap: 8px; justify-items: center; padding: 22px 18px; border: 1px solid rgba(212, 168, 90, 0.24); border-radius: 18px; background: linear-gradient(145deg, rgba(255, 249, 235, 0.94), rgba(250, 239, 213, 0.72)); text-align: center; } .oracle-stick-label { font-size: 0.82rem; letter-spacing: 0.16em; color: var(--muted, #8f7758); } .oracle-stick-summary strong { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.6rem, 10vw, 4.8rem); line-height: 1; color: var(--accent, #b8862f); } .oracle-stick-note { color: var(--text-muted, #6f624f); font-size: 0.95rem; } .theme-dark .oracle-stick-summary { background: linear-gradient(145deg, rgba(48, 35, 24, 0.94), rgba(34, 27, 22, 0.78)); } /* 재회 사주 프리미엄 리포트 가독성 개선 */ .reunion-premium-brief { position: relative; overflow: hidden; padding: 22px; border: 1px solid rgba(245,215,110,0.24); background: radial-gradient(circle at 18% 0%, rgba(245,215,110,0.16), transparent 34%), radial-gradient(circle at 82% 12%, rgba(232,160,191,0.14), transparent 36%), linear-gradient(145deg, rgba(33,23,44,0.92), rgba(18,13,26,0.94)); } .reunion-brief-head { margin-bottom: 16px; } .reunion-brief-kicker { display: inline-flex; margin-bottom: 8px; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .10em; } .reunion-brief-head h2 { margin: 0 0 10px; color: var(--text); font-size: 24px; letter-spacing: -0.05em; } .reunion-brief-head p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; } .reunion-brief-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 14px; } .reunion-brief-metric { min-width: 0; padding: 15px 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); } .reunion-brief-metric.risk { background: rgba(224,122,95,0.08); border-color: rgba(224,122,95,0.22); } .reunion-brief-metric span, .reunion-brief-metric em { display: block; color: var(--text-dim); font-size: 12px; font-style: normal; line-height: 1.45; } .reunion-brief-metric strong { display: block; margin: 6px 0 4px; color: var(--gold); font-size: 27px; line-height: 1; letter-spacing: -0.05em; } .reunion-keyword-row, .reunion-section-chip-row { display: flex; flex-wrap: wrap; gap: 7px; } .reunion-keyword-row { margin: 4px 0 16px; } .reunion-keyword-row span, .reunion-section-chip-row span { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(245,215,110,0.24); background: rgba(245,215,110,0.09); color: var(--accent-soft); font-size: 12px; font-weight: 800; line-height: 1.2; } .reunion-brief-columns, .reunion-action-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .reunion-brief-list, .reunion-action-box { padding: 14px 15px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.055); } .reunion-brief-list.do, .reunion-action-box.do { border-color: rgba(126,194,126,0.22); background: rgba(126,194,126,0.075); } .reunion-brief-list.dont, .reunion-action-box.dont { border-color: rgba(224,122,95,0.22); background: rgba(224,122,95,0.075); } .reunion-brief-list strong, .reunion-action-box strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 13px; font-weight: 900; } .reunion-brief-list ul, .reunion-action-box ul { margin: 0; padding-left: 18px; color: var(--text-soft); font-size: 13px; line-height: 1.65; } .reunion-brief-list li + li, .reunion-action-box li + li { margin-top: 4px; } .reunion-section-chip-row { margin: 0 20px 14px; } .reunion-detail-block { margin: 0; border-top: 1px solid rgba(255,255,255,0.08); } .reunion-detail-block summary { cursor: pointer; padding: 15px 20px 0; color: var(--gold); font-size: 13px; font-weight: 900; list-style-position: inside; } .reunion-detail-block[open] summary { margin-bottom: -6px; } .reunion-action-guide { margin: 0 20px 22px; } .reunion-action-box { padding: 13px 14px; } html.theme-light .reunion-premium-brief { background: radial-gradient(circle at 18% 0%, rgba(176,125,72,0.14), transparent 34%), radial-gradient(circle at 82% 12%, rgba(160,64,80,0.08), transparent 36%), linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,249,244,0.96)); border-color: rgba(176,125,72,0.22); } html.theme-light .reunion-brief-metric, html.theme-light .reunion-brief-list, html.theme-light .reunion-action-box { background: rgba(255,255,255,0.72); border-color: rgba(124,77,188,0.13); } html.theme-light .reunion-brief-metric.risk, html.theme-light .reunion-brief-list.dont, html.theme-light .reunion-action-box.dont { background: rgba(224,122,95,0.07); border-color: rgba(224,122,95,0.18); } html.theme-light .reunion-brief-list.do, html.theme-light .reunion-action-box.do { background: rgba(126,194,126,0.08); border-color: rgba(72,144,94,0.18); } html.theme-light .reunion-detail-block { border-top-color: rgba(31,23,41,0.08); } @media (max-width: 640px) { .reunion-premium-brief { padding: 18px; } .reunion-brief-metrics, .reunion-brief-columns, .reunion-action-guide { grid-template-columns: 1fr; } .reunion-brief-head h2 { font-size: 22px; } .reunion-brief-metric strong { font-size: 25px; } } /* ============================================================ 타로 영상 입장 퍼널 — 고블린 재회사주식 오프닝 ============================================================ */ body.tarot-video-mode:not(.tarot-opened) { height: 100svh; overflow: hidden; background: #050205; } body.tarot-video-mode:not(.tarot-opened) > .site-nav, body.tarot-video-mode:not(.tarot-opened) > .container, body.tarot-video-mode:not(.tarot-opened) > .site-footer { display: none !important; } .tarot-opening-stage { position: relative; min-height: 100svh; max-width: 430px; margin: 0 auto; overflow: hidden; background: #050205; color: #fff8ef; box-shadow: 0 0 90px rgba(0,0,0,.58); } .tarot-opening-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .48s ease, visibility .48s ease; background: #050205; } .tarot-opening-scene.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .tarot-opening-media, .tarot-opening-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #000; } .tarot-opening-fallback { z-index: 1; } .tarot-opening-media { z-index: 2; } .tarot-opening-media.is-hidden { display: none; } .tarot-opening-scene::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.06) 55%, rgba(0,0,0,.38)), radial-gradient(circle at 50% 76%, rgba(0,0,0,.16), transparent 48%); pointer-events: none; } .tarot-opening-back, .tarot-opening-sound { appearance: none; position: fixed; top: calc(12px + env(safe-area-inset-top)); z-index: 50; width: 38px !important; min-width: 38px; max-width: 38px; height: 38px !important; min-height: 38px !important; max-height: 38px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 !important; border: 0; border-radius: 999px !important; background: linear-gradient(180deg, rgba(18,9,10,.72), rgba(5,2,3,.58)) !important; color: #fff6e6; text-decoration: none; line-height: 1; overflow: hidden; backdrop-filter: blur(14px); box-shadow: 0 12px 26px rgba(0,0,0,.42), 0 0 18px rgba(255,236,203,.10) !important; } .tarot-opening-back { left: max(12px, calc(50% - 203px)); font: 800 30px/1 Arial, sans-serif; } .tarot-opening-sound { right: max(12px, calc(50% - 203px)); cursor: pointer; } .tarot-opening-sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .tarot-opening-sound svg path:first-child { fill: currentColor; stroke: none; } .tarot-sound-hint { position: absolute; left: 50%; top: 48%; z-index: 7; display: grid; justify-items: center; gap: 26px; color: #fff; text-align: center; text-shadow: 0 3px 16px rgba(0,0,0,.75); pointer-events: none; opacity: 1; transform: translate(-50%, -50%); transition: opacity 1.1s ease, transform 1.1s ease; } .tarot-sound-hint.is-faded { opacity: 0; transform: translate(-50%, -56%); } .tarot-tap-orb { position: relative; width: 44px; height: 44px; border-radius: 999px; border: 2px solid rgba(255,255,255,.86); background: transparent; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 22px rgba(255,255,255,.28); } .tarot-tap-orb::after { content: '☝'; position: absolute; left: 50%; top: 25px; transform: translateX(-50%); color: rgba(255,255,255,.95); font-size: 36px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.62)); } .tarot-sound-hint p { margin: 0; font-size: 13px; font-weight: 900; line-height: 1.35; letter-spacing: -.03em; } .tarot-opening-line { position: absolute; left: 26px; right: 26px; bottom: calc(172px + env(safe-area-inset-bottom)); z-index: 7; padding: 16px 18px; border-radius: 24px; background: linear-gradient(180deg, rgba(8,4,6,.42), rgba(8,4,6,.72)); color: #fffaf2; -webkit-text-fill-color: #fffaf2; font-family: 'Song Myung', serif; font-size: 22px; font-weight: 800; line-height: 1.35; text-align: center; word-break: keep-all; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; text-shadow: 0 4px 18px rgba(0,0,0,.96); pointer-events: none; } .tarot-opening-line.is-visible { opacity: 1; transform: translateY(0); } .tarot-opening-copy { position: absolute; left: 18px; right: 18px; bottom: calc(142px + env(safe-area-inset-bottom)); z-index: 6; padding: 20px 14px 18px; border-radius: 28px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(0,0,0,.24), rgba(0,0,0,.58)); backdrop-filter: blur(2px); text-shadow: 0 4px 18px rgba(0,0,0,.96), 0 0 30px rgba(0,0,0,.82); } .tarot-opening-final-info { opacity: 0; transform: translateY(18px); transition: opacity .7s ease .18s, transform .7s ease .18s; } .tarot-opening-scene.is-active .tarot-opening-final-info { opacity: 1; transform: translateY(0); } .tarot-opening-copy span { display: inline-flex; margin-bottom: 10px; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255,218,148,.34); background: rgba(255,218,148,.12); color: #ffe1a8; font-size: 11px; font-weight: 1000; letter-spacing: .08em; } .tarot-opening-copy h1 { margin: 0; color: #fffaf2 !important; -webkit-text-fill-color: #fffaf2 !important; font-size: clamp(27px, 7.5vw, 38px); line-height: 1.12; letter-spacing: -.07em; word-break: keep-all; } .tarot-opening-copy p { max-width: 330px; margin: 12px auto 0; color: rgba(255,248,239,.92) !important; -webkit-text-fill-color: rgba(255,248,239,.92) !important; font-size: 14px; font-weight: 780; line-height: 1.55; word-break: keep-all; } .tarot-opening-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; justify-items: center; gap: 9px; padding: 10px 18px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(3,1,2,.66) 46%, rgba(3,1,2,.92)); pointer-events: none; } .tarot-opening-progress { display: none; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(0,0,0,.32); } .tarot-opening-progress span { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.34); } .tarot-opening-progress span.is-active { width: 22px; background: #ffe1a8; } .tarot-opening-btn, .tarot-opening-skip { pointer-events: auto; appearance: none; width: min(100%, 324px); border-radius: 22px; cursor: pointer; font: inherit; font-weight: 1000; letter-spacing: -.055em; } .tarot-opening-btn { min-height: 58px; position: relative; padding: 0 54px; border: 1.5px solid rgba(255,255,255,.92); background: rgba(0,0,0,.56); color: #fff !important; font-size: 20px; text-shadow: none; overflow: hidden; box-shadow: 0 16px 42px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.08); } .tarot-opening-btn::after { content: '→'; position: absolute; right: 14px; top: 50%; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 19px; font-weight: 900; line-height: 1; transform: translateY(-50%); padding-bottom: 2px; } .tarot-opening-skip { width: auto; min-height: 22px; padding: 0 4px; border: 0; border-radius: 0; background: transparent; color: rgba(255,248,239,.72); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } body.tarot-opened .tarot-opening-stage { display: none !important; } /* 후폭풍 연구소식 타로 입력폼 */ body.tarot-intake-mode { min-height: 100svh; overflow-x: hidden; background: #050205; } body.tarot-intake-mode > .site-nav, body.tarot-intake-mode .page-header-wrap, body.tarot-intake-mode > .site-footer { display: none !important; } body.tarot-intake-mode > .container { width: min(100%, 430px); min-height: 100svh; margin: 0 auto; padding: 0; background: #050205; } body.tarot-intake-mode .tarot-simple-input-shell { position: relative; min-height: 100svh; margin: 0; padding: calc(22px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; overflow-x: hidden; overflow-y: auto; color: #fff8ef; border: 0; border-radius: 0; background: #050205; box-shadow: 0 0 90px rgba(0,0,0,.58); } body.tarot-intake-mode .tarot-simple-input-shell::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.18) 42%, rgba(0,0,0,.78) 74%, rgba(0,0,0,.94)), url('/images/aftershock-opening/aftershock-03-report.png?v=20260722-tarot-video1') center/cover no-repeat; filter: saturate(.94) brightness(.78); } body.tarot-intake-mode .tarot-input-back { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 14px; z-index: 2; width: 38px; min-width: 38px; height: 38px; min-height: 38px; display: grid; place-items: center; padding: 0 0 3px; border: 0; border-radius: 999px; background: rgba(0,0,0,.42); color: #fff6e6; -webkit-text-fill-color: #fff6e6; font: 800 30px/1 Arial, sans-serif; box-shadow: none; } body.tarot-intake-mode .tarot-simple-input-shell > * { position: relative; z-index: 1; } body.tarot-intake-mode .tarot-simple-input-shell .input-indicator { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 64px; right: 18px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: start; padding: 0; gap: 6px; background: transparent; border: 0; } body.tarot-intake-mode .tarot-simple-input-shell .input-step-status { grid-column: 1 / -1; justify-self: center; margin: 0 0 7px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.42); color: #fff8ef; -webkit-text-fill-color: #fff8ef; font-size: 12px; font-weight: 1000; letter-spacing: -.02em; } body.tarot-intake-mode .tarot-simple-input-shell .input-dot { flex: 0 0 auto; } body.tarot-intake-mode .tarot-simple-input-shell .input-dot span { width: 24px; height: 24px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26); color: rgba(255,255,255,.72); font-size: 12px; } body.tarot-intake-mode .tarot-simple-input-shell .input-dot.active span, body.tarot-intake-mode .tarot-simple-input-shell .input-dot.done span { background: #fff4de; color: #231005; } body.tarot-intake-mode .tarot-simple-input-shell .input-dot label { display: none; } body.tarot-intake-mode .tarot-simple-input-shell .input-line { height: 2px; flex: 1; margin: 11px 0 0; background: rgba(255,255,255,.22); } body.tarot-intake-mode .tarot-simple-input-shell .tarot-simple-input-page.card { margin: 0 0 4px; padding: 18px 14px 16px; border: 1px solid rgba(255,255,255,.10); border-radius: 28px; background: linear-gradient(180deg, rgba(3,1,2,.68), rgba(3,1,2,.42)) !important; box-shadow: 0 18px 42px rgba(0,0,0,.38); backdrop-filter: blur(3px); } body.tarot-intake-mode .tarot-input-eyebrow { margin: 0 0 10px; color: #ffe1a8; font-size: 12px; font-weight: 1000; letter-spacing: .08em; } body.tarot-intake-mode .tarot-simple-input-page .input-page-title { margin: 0 0 10px; color: #fffaf2 !important; -webkit-text-fill-color: #fffaf2 !important; font-size: clamp(30px, 8.2vw, 40px); line-height: 1.08; letter-spacing: -.075em; text-shadow: 0 4px 22px rgba(0,0,0,.95); word-break: keep-all; } body.tarot-intake-mode .tarot-input-helper, body.tarot-intake-mode .tarot-simple-input-page label, body.tarot-intake-mode .tarot-simple-input-page .note { color: rgba(255,248,239,.82) !important; -webkit-text-fill-color: rgba(255,248,239,.82) !important; } body.tarot-intake-mode .tarot-simple-input-page label { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 900; } body.tarot-intake-mode .tarot-focus-panel { display: grid; gap: 12px; margin: 14px 0 4px; } body.tarot-intake-mode .tarot-focus-group { padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(255,255,255,.07); } body.tarot-intake-mode .tarot-focus-label { margin: 0 0 8px; color: #ffe1a8; font-size: 13px; font-weight: 1000; letter-spacing: -.02em; } body.tarot-intake-mode .tarot-focus-options { display: flex; flex-wrap: wrap; gap: 7px; } body.tarot-intake-mode .tarot-focus-chip { min-height: 34px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.20); border-radius: 999px; background: rgba(8,4,4,.48); color: rgba(255,248,239,.86); -webkit-text-fill-color: rgba(255,248,239,.86); font-size: 12px; font-weight: 900; box-shadow: none; } body.tarot-intake-mode .tarot-focus-chip.is-selected { border-color: rgba(255,225,168,.82); background: #fff4de; color: #21100a; -webkit-text-fill-color: #21100a; } body.tarot-intake-mode .tarot-simple-input-page input, body.tarot-intake-mode .tarot-simple-input-page textarea, body.tarot-intake-mode .tarot-simple-input-page select { width: 100%; border: 0 !important; border-radius: 22px !important; background: rgba(255,255,255,.96) !important; color: #1c120f !important; -webkit-text-fill-color: #1c120f !important; box-shadow: 0 16px 34px rgba(0,0,0,.34); } body.tarot-intake-mode .tarot-simple-input-page textarea { min-height: 128px; } body.tarot-intake-mode .tarot-simple-input-page .date-picker { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto; gap: 6px; align-items: center; } body.tarot-intake-mode .tarot-simple-input-page .dp-unit { color: #fff8ef; font-weight: 900; } body.tarot-intake-mode .tarot-simple-input-shell .input-nav { margin: 0; padding: 0; border: 0; background: transparent; gap: 10px; } body.tarot-intake-mode .tarot-simple-input-shell .input-counter { color: rgba(255,248,239,.72); font-weight: 900; } body.tarot-intake-mode .tarot-simple-input-shell .nav-btn { min-height: 54px; border-radius: 18px; font-weight: 1000; } body.tarot-intake-mode .tarot-simple-input-shell .btn-primary { background: #fff4de !important; color: #21100a !important; box-shadow: 0 16px 34px rgba(0,0,0,.38); } body.tarot-intake-mode .tarot-simple-input-shell .error { color: #ffd6d6; text-shadow: 0 2px 10px rgba(0,0,0,.9); } @media (min-width: 720px) { .tarot-opening-stage { border-radius: 0 0 34px 34px; } } @media (max-width: 390px) { .tarot-opening-copy { left: 14px; right: 14px; bottom: calc(132px + env(safe-area-inset-bottom)); } .tarot-opening-btn { padding: 0 48px 0 34px; font-size: 19px; } } @media (prefers-reduced-motion: reduce) { .tarot-opening-media { display: none; } .tarot-opening-scene { transition: none; } } html.theme-light .tarot-opening-copy h1, html.theme-dark .tarot-opening-copy h1 { color: #fffaf2 !important; -webkit-text-fill-color: #fffaf2 !important; text-shadow: 0 4px 18px rgba(0,0,0,.96), 0 0 30px rgba(0,0,0,.82) !important; } html.theme-light .tarot-opening-copy p, html.theme-dark .tarot-opening-copy p { color: rgba(255,248,239,.92) !important; -webkit-text-fill-color: rgba(255,248,239,.92) !important; text-shadow: 0 3px 14px rgba(0,0,0,.92) !important; } /* ============================================================ 사주 유료 리포트 상품성 보강 ============================================================ */ .saju-premium-brief { position: relative; overflow: hidden; padding: 20px; border-radius: 18px; border: 1px solid rgba(245, 215, 110, 0.30); background: radial-gradient(circle at top left, rgba(245, 215, 110, 0.18), transparent 34%), linear-gradient(135deg, rgba(39, 25, 54, 0.96), rgba(28, 22, 38, 0.94)); box-shadow: 0 18px 42px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08); } .saju-brief-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(245, 215, 110, 0.14); color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: 0.08em; } .saju-brief-kicker::before { content: '✦'; } .saju-premium-brief h2 { margin: 0 0 10px; color: #fff; font-size: 21px; letter-spacing: -0.02em; } .saju-brief-summary { margin: 0; color: rgba(255,255,255,0.88); font-size: 15px; line-height: 1.75; } .saju-brief-summary .kw, .saju-section-priority .kw { color: var(--gold); font-weight: 900; } .saju-brief-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; } .saju-brief-metrics span { min-width: 0; padding: 10px 8px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.075); color: #fff; font-size: 13px; font-weight: 800; text-align: center; white-space: normal; } .saju-brief-action-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; } .saju-brief-action-grid > div { min-width: 0; padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); } .saju-brief-action-grid strong { display: block; margin-bottom: 7px; color: var(--gold); font-size: 13px; } .saju-brief-action-grid ul, .saju-action-guide ol { margin: 0; padding-left: 18px; } .saju-brief-action-grid li, .saju-action-guide li { margin: 5px 0; color: rgba(255,255,255,0.82); font-size: 13px; line-height: 1.55; } .saju-section-priority { margin: 16px 18px 10px; padding: 15px 16px; border-radius: 15px; border: 1px solid rgba(245, 215, 110, 0.24); background: linear-gradient(135deg, rgba(245,215,110,0.12), rgba(232,160,191,0.08)); } .saju-section-priority span { display: inline-flex; margin-bottom: 7px; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: 0.07em; } .saju-section-priority strong { display: block; color: var(--text); font-size: 15px; line-height: 1.7; } .saju-section-priority small { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; line-height: 1.5; } .saju-section-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 18px 12px; } .saju-section-chip-row span { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(232,160,191,0.24); background: rgba(232,160,191,0.09); color: var(--text-soft); font-size: 12px; font-weight: 800; } .saju-detail-block { margin: 0 18px 12px; border-radius: 14px; border: 1px solid var(--card-border); background: rgba(255,255,255,0.035); overflow: hidden; } .saju-detail-block summary { cursor: pointer; padding: 12px 14px; color: var(--gold); font-size: 13px; font-weight: 900; list-style-position: inside; } .saju-detail-block .section-body { padding: 4px 14px 16px; } .saju-detail-block .section-body p { margin: 0 0 14px; padding: 0 0 0 11px; border-left: 2px solid rgba(245,215,110,0.20); white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } .saju-detail-block .section-body h3 { margin: 18px 0 9px; padding: 8px 11px; border-radius: 11px; background: rgba(245,215,110,0.10); color: var(--gold); font-size: 13px; line-height: 1.45; font-weight: 900; letter-spacing: -0.01em; } .saju-detail-block .section-body p:first-child, .saju-detail-block .section-body h3:first-child { margin-top: 0; } .saju-detail-block .section-body p:last-child, .saju-detail-block .section-body .section-readable-list:last-child { margin-bottom: 0; } .section-readable-list { margin: 0 0 14px; padding: 12px 14px 12px 31px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); } .section-readable-list li { margin: 6px 0; padding-left: 2px; color: var(--text-soft); line-height: 1.68; word-break: keep-all; overflow-wrap: anywhere; } .saju-action-guide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; margin: 0 18px 18px; } .saju-action-guide > div { min-width: 0; padding: 13px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); } .saju-action-guide b { display: block; margin-bottom: 7px; color: var(--gold); font-size: 13px; } .saju-action-guide li { color: var(--text-soft); } html.theme-light .saju-premium-brief { background: radial-gradient(circle at top left, rgba(184, 145, 95, 0.18), transparent 36%), linear-gradient(135deg, #fffaf0, #fff5f8); border-color: rgba(184,145,95,0.30); box-shadow: 0 16px 34px rgba(92, 65, 30, 0.12); } html.theme-light .saju-premium-brief h2, html.theme-light .saju-brief-summary, html.theme-light .saju-brief-metrics span, html.theme-light .saju-brief-action-grid li { color: var(--text); } html.theme-light .saju-brief-metrics span, html.theme-light .saju-brief-action-grid > div { background: rgba(255,255,255,0.74); border-color: rgba(184,145,95,0.18); } @media (max-width: 560px) { .saju-premium-brief { padding: 17px 15px; } .saju-brief-metrics, .saju-brief-action-grid, .saju-action-guide { grid-template-columns: 1fr; } .saju-section-priority, .saju-section-chip-row, .saju-detail-block, .saju-action-guide { margin-left: 14px; margin-right: 14px; } } /* ============================================================ 사주 리포트 표/차트형 시각화 ============================================================ */ .saju-visual-dashboard { display: grid; grid-template-columns: minmax(108px, 0.72fr) minmax(150px, 1fr) minmax(180px, 1.28fr); gap: 12px; align-items: stretch; margin: 16px 0; } .saju-visual-gauge, .saju-visual-radar, .saju-visual-table { min-width: 0; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .saju-visual-gauge { --gauge-size: 112px; position: relative; display: grid; grid-template-rows: auto auto; place-items: center; padding: 10px 8px 12px; } .saju-visual-gauge svg { grid-area: 1 / 1; width: min(var(--gauge-size), 100%); aspect-ratio: 1; transform: rotate(-90deg); overflow: visible; } .saju-visual-gauge circle { fill: none; stroke-width: 10; stroke-linecap: round; } .saju-visual-gauge .gauge-track { stroke: rgba(255,255,255,0.13); } .saju-visual-gauge .gauge-fill { stroke: url(#noop); stroke: #f5d76e; filter: drop-shadow(0 0 7px rgba(245,215,110,0.26)); transition: stroke-dashoffset .35s ease; } .gauge-center { grid-area: 1 / 1; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2px; line-height: 1; color: #fff; pointer-events: none; } .gauge-center strong { font-size: 28px; line-height: 1; letter-spacing: -0.04em; } .gauge-center span { font-size: 12px; color: rgba(255,255,255,0.72); } .saju-visual-gauge em { grid-area: 2 / 1; margin-top: 2px; color: var(--gold); font-size: 12px; font-style: normal; font-weight: 900; text-align: center; } .saju-visual-radar { display: grid; place-items: center; padding: 8px; } .saju-visual-radar svg { display: block; width: min(170px, 100%); aspect-ratio: 1; overflow: visible; } .radar-ring { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 0.8; } .radar-axis { stroke: rgba(255,255,255,0.10); stroke-width: 0.8; } .radar-fill { fill: rgba(232,160,191,0.30); stroke: #f5d76e; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(232,160,191,0.22)); } .saju-visual-radar text { fill: rgba(255,255,255,0.82); font-size: 7px; font-weight: 800; paint-order: stroke; stroke: rgba(22,16,29,0.72); stroke-width: 2.5px; stroke-linejoin: round; } .saju-visual-table { display: grid; align-content: stretch; overflow: hidden; } .saju-visual-table [role="row"] { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); } .saju-visual-table [role="row"]:last-child { border-bottom: 0; } .saju-visual-table span { color: var(--gold); font-size: 11px; font-weight: 900; white-space: nowrap; } .saju-visual-table strong { min-width: 0; color: rgba(255,255,255,0.88); font-size: 12px; line-height: 1.42; font-weight: 750; overflow-wrap: anywhere; } html.theme-light .saju-visual-gauge, html.theme-light .saju-visual-radar, html.theme-light .saju-visual-table { background: rgba(255,255,255,0.74); border-color: rgba(184,145,95,0.18); } html.theme-light .gauge-center { color: var(--text); } html.theme-light .gauge-center span { color: var(--text-muted); } html.theme-light .saju-visual-gauge .gauge-track { stroke: rgba(184,145,95,0.16); } html.theme-light .radar-ring, html.theme-light .radar-axis { stroke: rgba(84,64,35,0.15); } html.theme-light .saju-visual-radar text { fill: var(--text); stroke: rgba(255,250,240,0.90); } html.theme-light .saju-visual-table [role="row"] { border-bottom-color: rgba(184,145,95,0.14); } html.theme-light .saju-visual-table strong { color: var(--text); } @media (max-width: 720px) { .saju-visual-dashboard { grid-template-columns: 0.8fr 1fr; } .saju-visual-table { grid-column: 1 / -1; } } @media (max-width: 420px) { .saju-visual-dashboard { grid-template-columns: 1fr; } .saju-visual-gauge { --gauge-size: 118px; } .saju-visual-gauge svg { width: min(var(--gauge-size), 100%); } .saju-visual-radar svg { width: min(180px, 82vw); } .saju-visual-table [role="row"] { grid-template-columns: 72px minmax(0, 1fr); } } /* 재물운 리포트 전용: 현금흐름을 결론 먼저 보이게 하는 대시보드 */ .wealth-cashflow-snapshot { border-color: rgba(245,215,110,0.30); background: radial-gradient(circle at 14% 0%, rgba(245,215,110,0.15), transparent 34%), linear-gradient(145deg, rgba(37,28,48,0.95), rgba(17,15,28,0.98)); } .wealth-cashflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 18px 14px; } .wealth-cashflow-grid article { min-width: 0; padding: 13px 12px; border-radius: 16px; border: 1px solid rgba(245,215,110,0.17); background: rgba(255,255,255,0.055); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .wealth-cashflow-grid b, .wealth-money-rule-grid b { display: block; color: var(--gold); font-size: 12px; font-weight: 950; line-height: 1.25; } .wealth-cashflow-grid strong { display: block; margin: 8px 0 6px; color: #fff; font-size: 26px; font-weight: 950; letter-spacing: -0.04em; } .wealth-cashflow-grid strong::after { content: '/100'; margin-left: 2px; color: rgba(255,255,255,0.48); font-size: 11px; font-weight: 800; } .wealth-cashflow-grid article > span { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.11); } .wealth-cashflow-grid article > span i { display: block; width: var(--wealth-pct); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f5d76e, #e8a0bf); } .wealth-cashflow-grid p { margin: 9px 0 0; color: rgba(255,255,255,0.76); font-size: 12px; line-height: 1.45; word-break: keep-all; } .wealth-money-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 18px 18px; } .wealth-money-rule-grid > div { min-width: 0; padding: 13px 14px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.045); } .wealth-money-rule-grid span { display: block; margin-top: 6px; color: rgba(255,255,255,0.78); font-size: 13px; line-height: 1.55; word-break: keep-all; } html.theme-light .wealth-cashflow-snapshot { background: linear-gradient(135deg, #fffaf0, #fff5f8); } html.theme-light .wealth-cashflow-grid article, html.theme-light .wealth-money-rule-grid > div { background: rgba(255,255,255,0.72); border-color: rgba(184,145,95,0.18); } html.theme-light .wealth-cashflow-grid strong, html.theme-light .wealth-cashflow-grid p, html.theme-light .wealth-money-rule-grid span { color: var(--text); } @media (max-width: 760px) { .wealth-cashflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wealth-money-rule-grid { grid-template-columns: 1fr; } } @media (max-width: 420px) { .wealth-cashflow-grid { grid-template-columns: 1fr; margin-left: 14px; margin-right: 14px; } .wealth-money-rule-grid { margin-left: 14px; margin-right: 14px; } } /* 20260626: 전체 점술 입력/결제 UI 가시성 보강 — /saju 기준 CTA, 선택칩, 날짜/시간 필드 통일 */ .card, .input-card, .input-page.card, .adult-input-card, .result-card, .lock-box { overflow-wrap: anywhere; } .card input:not([type="radio"]):not([type="checkbox"]), .card select, .card textarea, .input-card input:not([type="radio"]):not([type="checkbox"]), .input-card select, .input-card textarea, .input-page.card input:not([type="radio"]):not([type="checkbox"]), .input-page.card select, .input-page.card textarea, .adult-input-card input:not([type="radio"]):not([type="checkbox"]), .adult-input-card select, .adult-input-card textarea { min-height: 48px; font-size: 16px; line-height: 1.35; border-width: 1.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.045); } .date-picker, .time-picker { width: 100%; max-width: 100%; min-width: 0; } .date-picker select, .time-picker select { min-height: 48px; font-size: 16px; font-weight: 750; color: var(--text); } .date-picker .dp-unit, .time-select-wrap > span, .time-picker > span { color: var(--text-soft); font-size: 13px; font-weight: 800; } .card .cal-toggle-option, .input-card .cal-toggle-option, .input-page.card .cal-toggle-option, .adult-input-card .cal-toggle-option, .card .radio-item, .input-card .radio-item, .input-page.card .radio-item, .adult-input-card .radio-item, .card .radio-label, .input-card .radio-label, .input-page.card .radio-label, .adult-input-card .radio-label { min-height: 48px; border-width: 1.5px; font-size: 14.5px; color: var(--text); } .card .cal-toggle-option input[type="radio"], .input-card .cal-toggle-option input[type="radio"], .input-page.card .cal-toggle-option input[type="radio"], .adult-input-card .cal-toggle-option input[type="radio"], .card .cal-toggle-option input[type="checkbox"], .input-card .cal-toggle-option input[type="checkbox"], .input-page.card .cal-toggle-option input[type="checkbox"], .adult-input-card .cal-toggle-option input[type="checkbox"], .card .radio-item input[type="radio"], .input-card .radio-item input[type="radio"], .input-page.card .radio-item input[type="radio"], .adult-input-card .radio-item input[type="radio"], .card .radio-label input[type="radio"], .input-card .radio-label input[type="radio"], .input-page.card .radio-label input[type="radio"], .adult-input-card .radio-label input[type="radio"], .card input[type="checkbox"], .input-card input[type="checkbox"], .input-page.card input[type="checkbox"], .adult-input-card input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); } .card .cal-toggle-option:has(input:checked), .input-card .cal-toggle-option:has(input:checked), .input-page.card .cal-toggle-option:has(input:checked), .adult-input-card .cal-toggle-option:has(input:checked), .card .radio-item:has(input:checked), .input-card .radio-item:has(input:checked), .input-page.card .radio-item:has(input:checked), .adult-input-card .radio-item:has(input:checked), .card .radio-label:has(input:checked), .input-card .radio-label:has(input:checked), .input-page.card .radio-label:has(input:checked), .adult-input-card .radio-label:has(input:checked) { border-color: rgba(245,215,110,0.88); background: linear-gradient(135deg, rgba(245,215,110,0.18), rgba(232,160,191,0.20)); box-shadow: 0 12px 30px rgba(124,77,188,0.20), 0 0 0 1px rgba(245,215,110,0.18) inset; } button, .primary-btn, .submit-btn, .draw-btn, #draw-btn, #submit-btn, .lock-pay-btn, .cta-button, .nav-btn.submit-btn { min-height: 52px; border-radius: 16px; font-size: 16px; font-weight: 900; line-height: 1.25; text-shadow: 0 1px 1px rgba(0,0,0,0.18); background: linear-gradient(135deg, #6f3fb2 0%, #c65f96 100%); box-shadow: 0 12px 30px rgba(124,77,188,0.30), inset 0 1px 0 rgba(255,255,255,0.20); } button:hover:not(:disabled), .primary-btn:hover, .submit-btn:hover, .draw-btn:hover, #draw-btn:hover, #submit-btn:hover, .lock-pay-btn:hover, .cta-button:hover, .nav-btn.submit-btn:hover { background: linear-gradient(135deg, #7d4ec4 0%, #d06b9f 100%); box-shadow: 0 14px 38px rgba(198,95,150,0.36), 0 0 30px rgba(124,77,188,0.28), inset 0 1px 0 rgba(255,255,255,0.24); } /* 20260706-language-size-fix: keep the header language selector out of broad form/CTA button rules. */ .language-selector { height: 34px !important; min-height: 34px !important; } .language-selector .language-select { width: 52px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .language-selector .language-option { min-height: auto !important; margin: 0 !important; padding: 9px 13px !important; border-radius: 11px !important; background: transparent; box-shadow: none !important; color: rgba(248,241,255,0.88); font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: none !important; } .language-selector .language-option:hover, .language-selector .language-option.active { background: linear-gradient(135deg, rgba(124,77,188,0.78), rgba(232,160,191,0.26)); color: #fff; box-shadow: none !important; } @media (max-width: 520px) { .language-selector .language-select { width: 46px !important; height: 34px !important; min-height: 34px !important; font-size: 12px !important; } .language-selector .language-option { padding: 9px 10px !important; font-size: 12px !important; } } .lock-box { max-width: 460px; border-width: 2px; } .lock-pay-btn { display: inline-flex; align-items: center; justify-content: center; } .lock-note, .lock-evidence, .preview-unlock-note, .preview-core-bullets, .muted, .hint { line-height: 1.55; } html.theme-light body.light-theme .card .cal-toggle-option, html.theme-light body.light-theme .input-card .cal-toggle-option, html.theme-light body.light-theme .input-page.card .cal-toggle-option, html.theme-light body.light-theme .adult-input-card .cal-toggle-option { color: #2f2239; } @media (max-width: 520px) { .date-picker { display: grid !important; grid-template-columns: minmax(90px, 1.36fr) auto minmax(54px, 0.82fr) auto minmax(54px, 0.82fr) auto; gap: 6px; align-items: center; } .date-picker select { width: 100%; padding: 13px 20px 13px 8px; background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; } .date-picker .dp-unit { margin: 0; min-width: 14px; text-align: center; } .time-picker { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 7px !important; } .time-picker select { width: 100%; padding-left: 8px; padding-right: 22px; } .card .cal-toggle, .input-card .cal-toggle, .input-page.card .cal-toggle, .adult-input-card .cal-toggle { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; } .card .cal-toggle-option, .input-card .cal-toggle-option, .input-page.card .cal-toggle-option, .adult-input-card .cal-toggle-option { min-width: 0; padding: 12px 10px; white-space: normal; } .lock-box { padding: 20px 15px 18px; } } @media (max-width: 380px) { .date-picker { grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.78fr) auto minmax(0, 0.78fr) auto; gap: 4px; } .date-picker select, .time-picker select { font-size: 15px; padding-left: 6px; padding-right: 18px; } .date-picker .dp-unit, .time-picker > span { font-size: 12px; } } /* 20260706-hub-category-unify: keep all category hub pages visually consistent regardless theme state. */ body.hub-page, body.section-hub-page, html.theme-light body.hub-page, html.theme-light body.section-hub-page, html.theme-dark body.hub-page, html.theme-dark body.section-hub-page { background: radial-gradient(circle at 76% 0%, rgba(88, 45, 134, 0.24), transparent 30%), linear-gradient(180deg, #111014 0%, #0f1013 42%, #120f17 100%) !important; background-color: #111014 !important; color: #f7f2ea !important; } body.hub-page .site-nav, body.section-hub-page .site-nav, html.theme-light body.hub-page .site-nav, html.theme-light body.section-hub-page .site-nav, html.theme-dark body.hub-page .site-nav, html.theme-dark body.section-hub-page .site-nav { background: rgba(13, 11, 18, 0.94) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } body.hub-page .site-logo .logo-title, body.section-hub-page .site-logo .logo-title, html.theme-light body.hub-page .site-logo .logo-title, html.theme-light body.section-hub-page .site-logo .logo-title { background: none !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; text-shadow: 0 1px 10px rgba(0,0,0,0.28) !important; } body.hub-page .site-logo .logo-sub, body.section-hub-page .site-logo .logo-sub, html.theme-light body.hub-page .site-logo .logo-sub, html.theme-light body.section-hub-page .site-logo .logo-sub { color: rgba(247, 242, 234, 0.68) !important; -webkit-text-fill-color: rgba(247, 242, 234, 0.68) !important; } body.hub-page .home-theme-toggle, body.section-hub-page .home-theme-toggle, html.theme-light body.hub-page .home-theme-toggle, html.theme-light body.section-hub-page .home-theme-toggle, body.hub-page .language-select, body.section-hub-page .language-select, html.theme-light body.hub-page .language-select, html.theme-light body.section-hub-page .language-select { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(201, 168, 245, 0.38) !important; color: #f7f2ea !important; -webkit-text-fill-color: #f7f2ea !important; box-shadow: none !important; } body.hub-page .hub-tabs, body.section-hub-page .section-hub-tabs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; overflow: visible !important; padding: 0 !important; margin: 0 0 16px !important; } body.hub-page .hub-tabs a, body.section-hub-page .section-hub-tabs a, html.theme-light body.hub-page .hub-tabs a, html.theme-light body.section-hub-page .section-hub-tabs a { display: inline-flex !important; align-items: center !important; gap: 5px !important; flex: 0 0 auto !important; padding: 10px 13px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(247, 242, 234, 0.78) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.24) !important; } body.hub-page .hub-tabs a.is-active, body.section-hub-page .section-hub-tabs a.is-active, html.theme-light body.hub-page .hub-tabs a.is-active, html.theme-light body.section-hub-page .section-hub-tabs a.is-active { background: rgba(247, 242, 234, 0.94) !important; border-color: rgba(247, 242, 234, 0.94) !important; color: #201426 !important; } body.hub-page .hub-section-title, body.section-hub-page .section-hub-title { color: #f7f2ea !important; } body.hub-page .hub-card, body.section-hub-page .section-hub-card, html.theme-light body.hub-page .hub-card, html.theme-light body.section-hub-page .section-hub-card { background: rgba(255,255,255,0.07) !important; color: #f7f2ea !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 18px 42px rgba(0,0,0,0.32) !important; } body.hub-page .hub-card-body > span, body.section-hub-page .section-hub-card span, body.section-hub-page .section-hub-card em, html.theme-light body.hub-page .hub-card-body > span, html.theme-light body.section-hub-page .section-hub-card span, html.theme-light body.section-hub-page .section-hub-card em { color: rgba(247,242,234,0.66) !important; } /* 20260706-header-dark-shell: keep every page on the previous dark home header shell. */ .site-nav, html.theme-light body .site-nav, html.theme-dark body .site-nav, body.hub-page .site-nav, body.section-hub-page .site-nav, html.theme-light body.hub-page .site-nav, html.theme-light body.section-hub-page .site-nav, html.theme-dark body.hub-page .site-nav, html.theme-dark body.section-hub-page .site-nav { min-height: 77px !important; background: rgba(13, 13, 14, 0.82) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important; } .site-nav-inner, .site-nav > .nav-logo { box-sizing: border-box !important; min-height: 77px !important; height: 77px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; } .site-nav-inner { padding-left: 14px !important; padding-right: 14px !important; gap: 6px !important; } .site-nav > .nav-logo { padding-left: 14px !important; padding-right: 118px !important; } .site-nav .site-logo, .site-nav .nav-logo { color: #f7f2ea !important; } html.theme-light body .site-nav .site-logo .logo-title, html.theme-light body .site-nav .nav-logo .logo-title, html.theme-dark body .site-nav .site-logo .logo-title, html.theme-dark body .site-nav .nav-logo .logo-title, .site-nav .site-logo .logo-title, .site-nav .nav-logo .logo-title, body.hub-page .site-logo .logo-title, body.section-hub-page .site-logo .logo-title, html.theme-light body.hub-page .site-logo .logo-title, html.theme-light body.section-hub-page .site-logo .logo-title { background: none !important; color: #f7f2ea !important; -webkit-text-fill-color: #f7f2ea !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.12) !important; } html.theme-light body .site-nav .site-logo .logo-sub, html.theme-light body .site-nav .nav-logo .logo-sub, html.theme-dark body .site-nav .site-logo .logo-sub, html.theme-dark body .site-nav .nav-logo .logo-sub, .site-nav .site-logo .logo-sub, .site-nav .nav-logo .logo-sub, body.hub-page .site-logo .logo-sub, body.section-hub-page .site-logo .logo-sub, html.theme-light body.hub-page .site-logo .logo-sub, html.theme-light body.section-hub-page .site-logo .logo-sub { color: rgba(247, 242, 234, 0.54) !important; -webkit-text-fill-color: rgba(247, 242, 234, 0.54) !important; } .site-nav .logo-icon-img { width: 36px !important; height: 36px !important; border-radius: 10px !important; } html.theme-light body .site-nav .home-theme-toggle, html.theme-light body .site-nav .theme-toggle, html.theme-light body .site-nav [aria-label="다크모드 전환"], html.theme-light body .site-nav .language-select, html.theme-dark body .site-nav .home-theme-toggle, html.theme-dark body .site-nav .theme-toggle, html.theme-dark body .site-nav [aria-label="다크모드 전환"], html.theme-dark body .site-nav .language-select, .site-nav .home-theme-toggle, .site-nav .theme-toggle, .site-nav [aria-label="다크모드 전환"], .site-nav .language-select, body.hub-page .home-theme-toggle, body.section-hub-page .home-theme-toggle, html.theme-light body.hub-page .home-theme-toggle, html.theme-light body.section-hub-page .home-theme-toggle, body.hub-page .language-select, body.section-hub-page .language-select, html.theme-light body.hub-page .language-select, html.theme-light body.section-hub-page .language-select { box-sizing: border-box !important; width: 46px !important; height: 34px !important; min-width: 46px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 !important; margin: 0 !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(201, 168, 245, 0.35) !important; color: #f5eaff !important; -webkit-text-fill-color: #f5eaff !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important; line-height: 1 !important; font-size: 12px !important; font-weight: 800 !important; flex: 0 0 auto !important; } .site-nav .home-theme-toggle, .site-nav .theme-toggle, .site-nav [aria-label="다크모드 전환"] { width: 34px !important; min-width: 34px !important; } .site-nav .language-selector { height: 34px !important; min-height: 34px !important; flex: 0 0 auto !important; } .site-nav-inner .language-selector { margin-left: auto !important; margin-right: 0 !important; } /* 20260706-header-language-align: keep legacy page controls inside the same 720px header shell as the home page. */ .site-nav:not(:has(.site-nav-inner)) .home-theme-toggle.nav-theme-toggle { right: max(68px, calc((100vw - 720px) / 2 + 68px)) !important; } .site-nav:not(:has(.site-nav-inner)) .language-selector { right: max(14px, calc((100vw - 720px) / 2 + 14px)) !important; } .site-nav:not(:has(.site-nav-inner)) #auth-nav-area { right: max(68px, calc((100vw - 720px) / 2 + 68px)) !important; } @media (max-width: 520px) { .site-nav, html.theme-light body .site-nav, html.theme-dark body .site-nav { min-height: 77px !important; } .site-nav-inner, .site-nav > .nav-logo { min-height: 77px !important; height: 77px !important; } .site-nav-inner .logo-title { max-width: 118px !important; } } /* 20260706-design-system-toggle-fix: keep theme toggle round while language stays pill. */ .site-nav .home-theme-toggle.nav-theme-toggle, .site-nav-inner .home-theme-toggle.nav-theme-toggle, body.hub-page .site-nav .home-theme-toggle.nav-theme-toggle, body.section-hub-page .site-nav .home-theme-toggle.nav-theme-toggle, html.theme-light body.hub-page .site-nav .home-theme-toggle.nav-theme-toggle, html.theme-light body.section-hub-page .site-nav .home-theme-toggle.nav-theme-toggle { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; } /* 20260706-header-dark-shell: theme toggle stays round even with theme-specific dark header overrides. */ html.theme-light body .site-nav .home-theme-toggle, html.theme-light body .site-nav .theme-toggle, html.theme-light body .site-nav [aria-label="다크모드 전환"], html.theme-dark body .site-nav .home-theme-toggle, html.theme-dark body .site-nav .theme-toggle, html.theme-dark body .site-nav [aria-label="다크모드 전환"] { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; border-radius: 999px !important; } /* 20260707-lang-shell2: hard-clamp the header language pill on every template. Some product pages use .site-nav > .nav-logo while the home page uses .site-nav-inner; keep the visible control identical even when the surrounding shell differs. */ .site-nav .language-selector, .site-nav-inner .language-selector, .site-nav:not(:has(.site-nav-inner)) .language-selector { height: 34px !important; min-height: 34px !important; max-height: 34px !important; } .site-nav .language-select, .site-nav-inner .language-select, .site-nav:not(:has(.site-nav-inner)) .language-select { width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 !important; font-size: 12px !important; line-height: 1 !important; box-sizing: border-box !important; border-radius: 999px !important; } /* Mobile hub product-card polish: keep artwork recognizable before the fold. */ @media (max-width: 520px) { body.section-hub-page .section-hub-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px 2px !important; scroll-snap-type: x proximity !important; } body.section-hub-page .section-hub-tabs::-webkit-scrollbar { display: none !important; } body.section-hub-page .section-hub-tabs a { scroll-snap-align: start !important; } body.section-hub-page .section-hub-grid { grid-template-columns: 1fr !important; gap: 12px !important; } body.section-hub-page .section-hub-card { display: grid !important; grid-template-columns: minmax(112px, 38%) 1fr !important; min-height: 148px !important; } body.section-hub-page .section-hub-card img { height: 100% !important; min-height: 132px !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; object-position: center 72% !important; } body.section-hub-page .section-hub-card-body { display: flex !important; min-width: 0 !important; flex-direction: column !important; justify-content: center !important; padding: 14px 14px 15px !important; } body.section-hub-page .section-hub-card span span { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } } /* ── 리포트 가시성 엔진 v1: 점수/칩/행동표/타임라인 자동 렌더링 ── */ .intro-text .r-visual-card, .interpretation-text .r-visual-card { margin: 12px 0 14px; padding: 13px; border-radius: 16px; border: 1px solid rgba(245,215,110,0.16); background: linear-gradient(135deg, rgba(245,215,110,0.075), rgba(232,160,191,0.065)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.035); } .intro-text .r-visual-card { margin-top: 12px; } .interpretation-text .reading-section-card--summary { border-color: rgba(245,215,110,0.26); background: radial-gradient(circle at 16% 0%, rgba(245,215,110,0.14), transparent 36%), linear-gradient(145deg, rgba(32,24,42,0.95), rgba(17,14,28,0.98)); } .interpretation-text .reading-section-card--action { border-color: rgba(112,215,183,0.18); } .interpretation-text .reading-section-card--timeline { border-color: rgba(160,190,255,0.18); } .r-score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; } .r-score-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border-radius: 14px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); } .r-score-ring { --score-angle: 252deg; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#f2d58f var(--score-angle), rgba(255,255,255,0.10) 0deg); box-shadow: 0 0 22px rgba(245,215,110,0.12); } .r-score-ring::before { content: ""; position: absolute; } .r-score-ring span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(20,15,31,0.96); color: #ffe8a8; font-size: 17px; font-weight: 900; letter-spacing: -0.04em; } .r-score-meta { display: grid; gap: 2px; min-width: 0; } .r-score-meta b { color: rgba(255,255,255,0.92); font-size: 13px; line-height: 1.28; word-break: keep-all; } .r-score-meta small { color: rgba(255,255,255,0.52); font-size: 11px; } .r-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .r-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border-radius: 999px; color: #ffe6a8; background: rgba(245,215,110,0.12); border: 1px solid rgba(245,215,110,0.19); font-size: 12px; font-weight: 800; line-height: 1.25; } .r-action-grid, .r-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .r-action-item, .r-compare-item { display: grid; gap: 5px; min-width: 0; padding: 11px 12px; border-radius: 14px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); } .r-action-item b, .r-compare-item b { color: #f2d58f; font-size: 12px; line-height: 1.2; } .r-action-item span, .r-compare-item span { color: rgba(255,255,255,0.78); font-size: 13px; line-height: 1.45; word-break: keep-all; } .r-action-item--do { border-color: rgba(112,215,183,0.18); background: rgba(112,215,183,0.055); } .r-action-item--avoid { border-color: rgba(255,132,132,0.18); background: rgba(255,132,132,0.05); } .r-action-item--question { border-color: rgba(160,190,255,0.18); background: rgba(160,190,255,0.05); } .r-action-item--check { border-color: rgba(245,215,110,0.18); background: rgba(245,215,110,0.055); } .r-timeline { display: grid; gap: 0; padding: 8px 12px; } .r-time-step { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 10px 0 10px 15px; border-left: 1px solid rgba(245,215,110,0.24); } .r-time-step::before { content: ""; position: absolute; left: -5px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: #f2d58f; box-shadow: 0 0 0 4px rgba(245,215,110,0.12); } .r-time-step b { color: #ffe6a8; font-size: 12px; line-height: 1.35; } .r-time-step span { color: rgba(255,255,255,0.78); font-size: 13px; line-height: 1.45; word-break: keep-all; } .r-flow-graph { padding: 14px; border-radius: 18px; background: radial-gradient(circle at 8% 0%, rgba(172,103,226,0.24), transparent 34%), linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)); border-color: rgba(245,215,110,0.20); } .r-flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 13px; } .r-flow-head b { color: #ffe6a8; font-size: 13px; font-weight: 950; letter-spacing: 0.04em; } .r-flow-head span { color: rgba(255,255,255,0.62); font-size: 12px; font-weight: 750; text-align: right; } .r-flow-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .r-flow-line::before { content: ""; position: absolute; left: 8%; right: 8%; top: 20px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(172,103,226,0.55), rgba(245,215,110,0.72), rgba(232,160,191,0.58)); opacity: 0.72; } .r-flow-step { position: relative; z-index: 1; min-width: 0; display: grid; grid-template-rows: auto auto 1fr; gap: 7px; padding: 0 10px 12px; border-radius: 15px; background: rgba(16,16,20,0.34); border: 1px solid rgba(255,255,255,0.08); } .r-flow-dot { width: 42px; height: 42px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 180deg, #f5d76e var(--flow-pct), rgba(255,255,255,0.12) 0); box-shadow: 0 8px 18px rgba(0,0,0,0.20), 0 0 18px rgba(245,215,110,0.16); } .r-flow-step--caution .r-flow-dot { background: conic-gradient(from 180deg, #e8a0bf var(--flow-pct), rgba(255,255,255,0.12) 0); } .r-flow-dot i { width: 28px; height: 28px; border-radius: 50%; background: rgba(20,15,31,0.96); border: 1px solid rgba(255,255,255,0.10); } .r-flow-step > b { color: #fff; font-size: 13px; font-weight: 950; text-align: center; } .r-flow-step > span { color: rgba(255,255,255,0.78); font-size: 12.5px; line-height: 1.55; text-align: center; word-break: keep-all; } html.theme-light .intro-text .r-visual-card, html.theme-light .interpretation-text .r-visual-card { background: linear-gradient(135deg, rgba(176,125,72,0.075), rgba(124,77,188,0.055)); border-color: rgba(176,125,72,0.16); } html.theme-light .r-score-item, html.theme-light .r-action-item, html.theme-light .r-compare-item { background: rgba(255,255,255,0.72); border-color: rgba(31,23,41,0.08); } html.theme-light .r-score-ring span { background: #fffaf0; color: #8a6100; } html.theme-light .r-flow-graph { background: radial-gradient(circle at 8% 0%, rgba(172,103,226,0.15), transparent 35%), linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,245,248,0.82)); border-color: rgba(184,145,95,0.18); } html.theme-light .r-flow-step { background: rgba(255,255,255,0.74); border-color: rgba(184,145,95,0.16); } html.theme-light .r-flow-step > b { color: var(--text); } html.theme-light .r-flow-head span, html.theme-light .r-flow-step > span { color: rgba(31,23,41,0.70); } html.theme-light .r-flow-dot i { background: #fffaf0; } html.theme-light .r-score-meta b, html.theme-light .r-action-item span, html.theme-light .r-compare-item span, html.theme-light .r-time-step span { color: rgba(31,23,41,0.76); } html.theme-light .r-chip, html.theme-light .r-action-item b, html.theme-light .r-compare-item b, html.theme-light .r-time-step b { color: #8a6100; } @media (max-width: 480px) { .intro-text .r-visual-card, .interpretation-text .r-visual-card { padding: 10px; border-radius: 14px; } .r-score-grid { grid-template-columns: 1fr; gap: 8px; } .r-score-ring { width: 48px; height: 48px; } .r-score-ring span { width: 38px; height: 38px; font-size: 15px; } .r-action-grid, .r-compare-grid { grid-template-columns: 1fr; } .r-time-step { grid-template-columns: 48px 1fr; gap: 8px; padding-left: 13px; } .r-flow-head { display: block; } .r-flow-head span { display: block; margin-top: 4px; text-align: left; } .r-flow-line { grid-template-columns: 1fr; } .r-flow-line::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; background: linear-gradient(180deg, rgba(172,103,226,0.55), rgba(245,215,110,0.72), rgba(232,160,191,0.58)); } .r-flow-step { grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; text-align: left; } .r-flow-dot { grid-row: 1 / 3; margin: 0; } .r-flow-step > b, .r-flow-step > span { text-align: left; } } /* 재회 사주 P0: 결제 리포트 요약/CTA 강화 */ .reunion-brief-highlight { margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(245,215,110,0.18); background: rgba(245,215,110,0.075); color: var(--text); font-size: 14px; font-weight: 800; line-height: 1.55; word-break: keep-all; } .reunion-followup-cta { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 14px; margin-top: 18px; padding: 16px; border-radius: 20px; border: 1px solid rgba(232,160,191,0.20); background: linear-gradient(135deg, rgba(232,160,191,0.10), rgba(245,215,110,0.075)); } .reunion-followup-cta span { display: inline-flex; margin-bottom: 7px; color: var(--gold-soft); font-size: 12px; font-weight: 900; letter-spacing: 0.08em; } .reunion-followup-cta strong { display: block; color: var(--text); font-size: 18px; line-height: 1.35; letter-spacing: -0.03em; word-break: keep-all; } .reunion-followup-cta p { margin: 7px 0 0; color: var(--text-soft); font-size: 13px; line-height: 1.55; word-break: keep-all; } .reunion-followup-suggestions { display: grid; gap: 8px; align-content: center; } .reunion-followup-chip { width: 100%; min-height: 42px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(245,215,110,0.20); background: rgba(255,255,255,0.055); color: var(--text); font-size: 13px; font-weight: 800; line-height: 1.35; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; } .reunion-followup-chip:hover { transform: translateY(-1px); border-color: rgba(245,215,110,0.42); background: rgba(245,215,110,0.10); } html.theme-light .reunion-brief-highlight { background: rgba(176,125,72,0.08); border-color: rgba(176,125,72,0.18); color: rgba(31,23,41,0.86); } html.theme-light .reunion-followup-cta { background: linear-gradient(135deg, rgba(255,240,246,0.88), rgba(255,248,231,0.92)); border-color: rgba(176,125,72,0.18); } html.theme-light .reunion-followup-chip { background: rgba(255,255,255,0.72); border-color: rgba(176,125,72,0.18); color: rgba(31,23,41,0.82); } html.theme-light .reunion-followup-chip:hover { border-color: rgba(176,125,72,0.36); background: rgba(255,248,231,0.96); } @media (max-width: 640px) { .reunion-followup-cta { grid-template-columns: 1fr; padding: 14px; } .reunion-followup-cta strong { font-size: 16px; } } /* 20260827 Reunion B+ approved paid-report design */ .reunion-bplus-report { --bplus-page: #f6efe6; --bplus-surface: #fffaf2; --bplus-surface-soft: rgba(255,250,242,0.78); --bplus-border: rgba(116,80,54,0.18); --bplus-border-strong: rgba(116,80,54,0.30); --bplus-heading: #2f241d; --bplus-body: #46382f; --bplus-secondary: #6d5a4d; --bplus-muted: #887568; --bplus-accent: #745036; --bplus-accent-soft: rgba(116,80,54,0.10); --bplus-link: #6f462c; width: min(100%, 940px); max-width: 940px; padding: 0 !important; margin: 0 auto 72px; color: var(--bplus-body); overflow: visible; } body.reunion-v2-result-visible > main.container { width: min(100%, 1000px); max-width: 1000px; overflow-x: visible; } body.reunion-v2-result-visible .page-header-wrap { display: none; } body.reunion-v2-result-visible #result-section { display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 auto; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; } .reunion-bplus-report, .reunion-bplus-report * { box-sizing: border-box; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: keep-all; } html.theme-dark .reunion-bplus-report { --bplus-page: #12100e; --bplus-surface: #251e19; --bplus-surface-soft: rgba(37,30,25,0.82); --bplus-border: rgba(224,185,132,0.20); --bplus-border-strong: rgba(224,185,132,0.34); --bplus-heading: #f8ead8; --bplus-body: #eadcc9; --bplus-secondary: #d9c6ae; --bplus-muted: #bea98e; --bplus-accent: #e0b984; --bplus-accent-soft: rgba(224,185,132,0.12); --bplus-link: #f1c98c; } .reunion-bplus-report h1, .reunion-bplus-report h2, .reunion-bplus-report h3 { color: var(--bplus-heading); letter-spacing: -0.035em; } .reunion-bplus-report p, .reunion-bplus-report li, .reunion-bplus-report dd { color: var(--bplus-body); font-size: 16px; line-height: 1.78; } .reunion-bplus-report a { color: var(--bplus-link); } .reunion-bplus-hero, .reunion-bplus-section { box-sizing: border-box; width: 100%; margin: 0 auto 18px; } .reunion-bplus-hero { max-width: 940px; padding: 34px 38px 28px; border: 1px solid var(--bplus-border-strong); border-radius: 30px; background: radial-gradient(circle at 14% 0%, rgba(224,185,132,0.18), transparent 34%), linear-gradient(135deg, var(--bplus-surface), var(--bplus-surface-soft)); box-shadow: 0 22px 60px rgba(58,36,20,0.10); } html.theme-dark .reunion-bplus-hero { box-shadow: 0 28px 70px rgba(0,0,0,0.32); } .reunion-bplus-eyebrow { margin: 0 0 10px; color: var(--bplus-accent) !important; font-size: 13px !important; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; } .reunion-bplus-hero h1 { max-width: 740px; margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; white-space: normal; overflow: visible; overflow-wrap: anywhere; word-break: keep-all; } .reunion-bplus-lead { max-width: 720px; margin: 0 0 22px; color: var(--bplus-secondary) !important; font-size: 17px !important; line-height: 1.72 !important; white-space: normal; overflow: visible; } .reunion-bplus-judgment-surface { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--bplus-border); border-bottom: 1px solid var(--bplus-border); } .reunion-bplus-answer-item { display: grid; grid-template-columns: minmax(124px, 0.28fr) minmax(0, 1fr); gap: 18px; align-items: start; padding: 17px 0; border-bottom: 1px solid var(--bplus-border); } .reunion-bplus-answer-item:last-child { border-bottom: 0; } .reunion-bplus-answer-item span { color: var(--bplus-accent); font-size: 14px; font-weight: 900; line-height: 1.5; } .reunion-bplus-answer-item p { margin: 0; font-size: 17px; font-weight: 760; line-height: 1.68; color: var(--bplus-heading); } .reunion-bplus-note, .reunion-bplus-intro { max-width: 720px; margin-top: 18px; } .reunion-bplus-note { color: var(--bplus-muted) !important; } .reunion-bplus-intro p { color: var(--bplus-secondary); } .reunion-bplus-section { max-width: 740px; padding: 28px 0; border-bottom: 1px solid var(--bplus-border); background: transparent; } .reunion-bplus-section h2 { margin: 0 0 16px; font-size: clamp(23px, 2.6vw, 31px); } .reunion-bplus-section h3 { margin: 22px 0 8px; font-size: 18px; } .reunion-bplus-section p { margin: 0 0 13px; } .reunion-bplus-plain-list { margin: 0; padding-left: 1.15em; } .reunion-bplus-plain-list li { margin: 8px 0; } .reunion-bplus-detail-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bplus-border); } .reunion-bplus-easy { padding: 12px 14px; border-left: 3px solid var(--bplus-accent); background: var(--bplus-accent-soft); color: var(--bplus-secondary) !important; } .reunion-bplus-contact-card { margin: 16px 0 20px; padding: 24px 26px; border: 1px solid var(--bplus-border-strong); border-radius: 24px; background: linear-gradient(135deg, var(--bplus-surface), var(--bplus-surface-soft)); box-shadow: 0 16px 38px rgba(58,36,20,0.08); } html.theme-dark .reunion-bplus-contact-card { box-shadow: 0 22px 48px rgba(0,0,0,0.26); } .reunion-bplus-contact-card dl { margin: 0; width: 100%; } .reunion-bplus-contact-card dl > div { display: grid; grid-template-columns: minmax(120px, 150px) minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--bplus-border); min-width: 0; } .reunion-bplus-contact-card dl > div:first-child { padding-top: 0; } .reunion-bplus-contact-card dl > div:last-child { padding-bottom: 0; border-bottom: 0; } .reunion-bplus-contact-card dt { color: var(--bplus-accent); font-weight: 900; line-height: 1.6; min-width: 0; } .reunion-bplus-contact-card dd { margin: 0; color: var(--bplus-body); min-width: 0; white-space: normal; overflow-wrap: anywhere; } .reunion-bplus-contact-card ul { margin: 0; padding-left: 1.1em; min-width: 0; } .reunion-bplus-contact-card li { min-width: 0; overflow-wrap: anywhere; } .reunion-bplus-response-note { padding: 14px 16px; border: 1px solid var(--bplus-border); border-radius: 18px; background: var(--bplus-accent-soft); color: var(--bplus-secondary); font-size: 16px; line-height: 1.74; } .reunion-bplus-saju-block { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--bplus-border); } .reunion-bplus-connection { display: block; color: var(--bplus-muted); font-size: 14px; line-height: 1.6; } .reunion-bplus-metrics { margin-top: 10px; } .reunion-bplus-metric-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 14px; border-top: 1px solid var(--bplus-border); } .reunion-bplus-metric-item { display: grid; grid-template-columns: 150px 92px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--bplus-border); } .reunion-bplus-metric-item b { color: var(--bplus-heading); font-size: 16px; } .reunion-bplus-metric-level { color: var(--bplus-accent); font-size: 15px; font-weight: 900; } .reunion-bplus-metric-item span:last-child { color: var(--bplus-secondary); font-size: 16px; line-height: 1.65; } .reunion-bplus-score-details { margin-top: 18px; border: 1px solid var(--bplus-border); border-radius: 18px; background: var(--bplus-surface-soft); overflow: hidden; } .reunion-bplus-score-details summary { cursor: pointer; padding: 14px 16px; color: var(--bplus-link); font-weight: 900; list-style-position: inside; } .reunion-bplus-score-details summary:hover { background: var(--bplus-accent-soft); } .reunion-bplus-score-list { padding: 0 16px 14px; } .reunion-bplus-score-row { display: grid; grid-template-columns: 140px 78px minmax(0,1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--bplus-border); } .reunion-bplus-score-row b { color: var(--bplus-heading); } .reunion-bplus-metric-exact { color: var(--bplus-accent); font-size: 15px; } .reunion-bplus-score-row span { color: var(--bplus-secondary); line-height: 1.6; } .reunion-bplus-report .actions button { color: var(--bplus-link); border-color: var(--bplus-border-strong); background: var(--bplus-surface-soft); } .reunion-bplus-report .actions button:hover:not(:disabled) { color: var(--bplus-heading); border-color: var(--bplus-accent); background: var(--bplus-accent-soft); } html.theme-dark .reunion-bplus-report .actions button { color: #f4d4a4; border-color: rgba(241,201,140,0.58); background: rgba(37,30,25,0.62); } html.theme-dark .reunion-bplus-report .actions button:hover:not(:disabled) { color: #fff1dc; border-color: #f1c98c; } @media (min-width: 960px) { .reunion-bplus-report .actions { max-width: 740px; margin-left: auto; margin-right: auto; } } @media (max-width: 760px) { .reunion-bplus-report { width: min(100%, calc(100vw - 28px)); max-width: min(100%, calc(100vw - 28px)); margin-bottom: 48px; } .reunion-bplus-hero { padding: 20px 18px 18px; border-radius: 24px; } .reunion-bplus-hero h1 { font-size: 29px; margin-bottom: 10px; } .reunion-bplus-eyebrow { margin-bottom: 7px; } .reunion-bplus-lead { font-size: 15px !important; line-height: 1.58 !important; margin-bottom: 13px; } .reunion-bplus-answer-item { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; } .reunion-bplus-answer-item span { font-size: 12px; } .reunion-bplus-answer-item p { font-size: 15px; line-height: 1.5; } .reunion-bplus-section { padding: 23px 0; max-width: 100%; } .reunion-bplus-contact-card { padding: 18px 17px; border-radius: 20px; } .reunion-bplus-contact-card dl > div { grid-template-columns: 1fr; gap: 5px; padding: 13px 0; } .reunion-bplus-metric-item { grid-template-columns: 1fr; gap: 5px; padding: 14px 0; } .reunion-bplus-score-row { grid-template-columns: 1fr; gap: 4px; } } .reunion-v5-report { overflow-x: clip; scroll-margin-top: 84px; } .reunion-v5-page { break-inside: avoid; page-break-inside: avoid; } .reunion-v5-dashboard-grid { gap: 0; } .reunion-v5-executive { margin: 14px 0 0; padding: 14px; border: 1px solid var(--bplus-border-strong); border-radius: 20px; background: linear-gradient(135deg, var(--bplus-accent-soft), var(--bplus-surface)); } .reunion-v5-executive h2 { margin: 4px 0 12px; color: var(--bplus-heading); font-size: clamp(19px, 2.4vw, 25px); line-height: 1.3; letter-spacing: -0.03em; } .reunion-v5-executive-cells { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } .reunion-v5-executive article { padding: 10px; border: 1px solid var(--bplus-border); border-radius: 14px; background: var(--bplus-surface-soft); min-width: 0; } .reunion-v5-executive span { display: block; margin-bottom: 4px; color: var(--bplus-muted); font-size: 11px; font-weight: 850; } .reunion-v5-executive strong { display: block; color: var(--bplus-heading); line-height: 1.35; font-size: 13px; overflow-wrap: anywhere; word-break: keep-all; } .reunion-v5-hero-support { margin-top: 10px; border-bottom: 0; } .reunion-v5-hero-support .reunion-bplus-answer-item { padding: 9px 0; grid-template-columns: minmax(104px, .3fr) minmax(0, 1fr); gap: 10px; } .reunion-v5-hero-support .reunion-bplus-answer-item p { font-size: 14px; line-height: 1.45; } .reunion-v5-timing-summary { margin: 10px 0 0 !important; color: var(--bplus-heading) !important; font-size: 13px !important; line-height: 1.5 !important; } .reunion-v5-metric-groups { display: grid; gap: 16px; } .reunion-v5-metric-group { padding: 14px; border: 1px solid var(--bplus-border); border-radius: 18px; background: var(--bplus-surface); } .reunion-v5-metric-group h3 { margin: 0 0 4px; color: var(--bplus-heading); font-size: 17px; } .reunion-v5-metric-group > p { margin: 0 0 12px !important; color: var(--bplus-muted) !important; font-size: 13px !important; line-height: 1.55 !important; } .reunion-v5-evidence-line { display: inline-flex; max-width: 100%; margin: 0 0 11px !important; padding: 7px 10px; border-radius: 999px; background: var(--bplus-accent-soft); color: var(--bplus-heading) !important; font-size: 12px !important; font-weight: 850; overflow-wrap: anywhere; } .reunion-v5-archetype { margin: 12px 0 0 !important; color: var(--bplus-heading) !important; font-weight: 850; } .reunion-v5-archetype strong { color: var(--bplus-accent); } .reunion-v5-card { margin: 22px 0 0; padding: 18px; border: 1px solid var(--bplus-border); border-radius: 22px; background: var(--bplus-surface-soft); box-sizing: border-box; max-width: 100%; } .reunion-v5-card h2 { margin: 0 0 8px; font-size: 21px; } .reunion-v5-muted { margin: 0 0 14px !important; color: var(--bplus-muted) !important; font-size: 14px !important; line-height: 1.6 !important; } .reunion-v5-bar-list { display: grid; gap: 12px; } .reunion-v5-bar-row { display: grid; grid-template-columns: minmax(160px, 0.42fr) minmax(160px, 0.58fr); gap: 10px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--bplus-border); } .reunion-v5-bar-row:first-child { border-top: 0; } .reunion-v5-metric-title span { display: block; color: var(--bplus-heading); font-weight: 850; font-size: 14px; } .reunion-v5-metric-title strong { display: block; margin-top: 4px; color: var(--bplus-accent); font-size: 20px; line-height: 1.18; white-space: nowrap; } .reunion-v5-metric-title em { display: block; margin-top: 3px; font-style: normal; color: var(--bplus-muted); font-size: 12px; } .reunion-v5-bar-row p { grid-column: 1 / -1; margin: 0 !important; color: var(--bplus-secondary) !important; font-size: 13px !important; line-height: 1.55 !important; } .reunion-v5-key-reason b { color: var(--bplus-heading); } .reunion-v5-bar { height: 12px; border-radius: 999px; background: rgba(128,94,58,.16); overflow: hidden; } .reunion-v5-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b98042, #e0b984); } .reunion-v5-gap { margin: 14px 0 0 !important; padding: 12px 14px; border-radius: 16px; background: var(--bplus-accent-soft); color: var(--bplus-heading) !important; font-weight: 750; } .reunion-v5-quadrant { position: relative; height: 260px; border: 1px solid var(--bplus-border-strong); border-radius: 20px; background: linear-gradient(90deg, transparent 49.5%, var(--bplus-border) 49.5%, var(--bplus-border) 50.5%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, var(--bplus-border) 49.5%, var(--bplus-border) 50.5%, transparent 50.5%), radial-gradient(circle at 75% 25%, rgba(224,185,132,.18), transparent 35%); } .reunion-v5-quadrant .q-label { position: absolute; color: var(--bplus-muted); font-size: 12px; font-weight: 850; background: var(--bplus-surface-soft); padding: 3px 6px; border-radius: 999px; } .q-top { top: 8px; left: 50%; transform: translateX(-50%); } .q-bottom { bottom: 8px; left: 50%; transform: translateX(-50%); } .q-left { left: 8px; top: 50%; transform: translateY(-50%); } .q-right { right: 8px; top: 50%; transform: translateY(-50%); } .q-dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #e0b984; border: 3px solid var(--bplus-surface); box-shadow: 0 0 0 4px rgba(224,185,132,.24); transform: translate(-50%,-50%); } .reunion-v5-accessible-summary { margin-top: 12px !important; color: var(--bplus-secondary) !important; } .reunion-v5-factor-details { grid-column: 1 / -1; margin-top: 0; color: var(--bplus-secondary); font-size: 13px; } .reunion-v5-factor-details p { margin: 8px 0 4px !important; } .reunion-v5-factor-details ul { margin: 0 0 8px 18px !important; padding: 0 !important; } .reunion-v5-quadrant .q-zone { position: absolute; color: var(--bplus-secondary); font-size: 12px; font-weight: 800; opacity: .82; } .q-zone-a { right: 18px; top: 44px; } .q-zone-b { right: 18px; bottom: 44px; } .q-zone-c { left: 18px; top: 44px; } .q-zone-d { left: 18px; bottom: 44px; } .reunion-v5-month-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 74px), 1fr)); gap: 10px; align-items: end; min-height: 190px; padding-top: 8px; min-width: 0; max-width: 100%; box-sizing: border-box; } .reunion-v5-month-point { position: relative; min-width: 0; max-width: 100%; box-sizing: border-box; height: 170px; padding: 12px 8px; border: 1px solid var(--bplus-border); border-radius: 18px; background: var(--bplus-surface); display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden; } .reunion-v5-month-point strong { color: var(--bplus-heading); position: relative; z-index: 1; } .reunion-v5-month-point span { color: var(--bplus-accent); font-weight: 900; position: relative; z-index: 1; } .reunion-v5-month-point i { position: absolute; left: 16px; right: 16px; bottom: 42px; min-height: 22%; border-radius: 12px 12px 0 0; background: rgba(174,139,96,.24); } .reunion-v5-month-point.is-favorable, .reunion-v5-month-detail.is-favorable { border-color: rgba(224,185,132,.92); box-shadow: inset 0 0 0 2px rgba(224,185,132,.20); } .reunion-v5-month-point.is-favorable span, .reunion-v5-month-detail.is-favorable header span, .reunion-v5-timing-legend [data-level="유리"] { color: #b68435; } .reunion-v5-month-point.is-favorable i { background: linear-gradient(180deg, rgba(224,185,132,.58), rgba(224,185,132,.28)); } .reunion-v5-month-point.is-neutral, .reunion-v5-month-detail.is-neutral { border-color: rgba(151,131,105,.36); } .reunion-v5-month-point.is-neutral span, .reunion-v5-month-detail.is-neutral header span, .reunion-v5-timing-legend [data-level="보통"] { color: var(--bplus-secondary); } .reunion-v5-month-point.is-neutral i { background: rgba(151,131,105,.22); } .reunion-v5-month-point.is-caution, .reunion-v5-month-detail.is-caution { border-color: rgba(158,96,71,.48); box-shadow: inset 0 0 0 1px rgba(158,96,71,.14); } .reunion-v5-month-point.is-caution span, .reunion-v5-month-detail.is-caution header span, .reunion-v5-timing-legend [data-level="주의"] { color: #9e6047; } .reunion-v5-month-point.is-caution i { background: rgba(158,96,71,.26); } .reunion-v5-month-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; max-width: 1040px; margin-left: auto; margin-right: auto; min-width: 0; width: 100%; box-sizing: border-box; } .reunion-v5-month-detail { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 15px; border: 1px solid var(--bplus-border); border-radius: 18px; background: var(--bplus-surface-soft); } .reunion-v5-month-detail header { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; min-width: 0; color: var(--bplus-heading); font-weight: 850; } .reunion-v5-month-detail header strong { color: var(--bplus-heading); font-size: 16px; min-width: 0; } .reunion-v5-month-detail header span { color: var(--bplus-accent); font-weight: 900; flex: 0 0 auto; } .reunion-v5-month-theme { min-height: 0; } .reunion-v5-month-core { margin-bottom: 10px !important; } .reunion-v5-month-compact { display: grid; gap: 7px; margin: 10px 0 0; } .reunion-v5-month-compact > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .reunion-v5-month-expanded { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bplus-border); } .reunion-v5-month-detail p, .reunion-v5-month-detail dd { color: var(--bplus-secondary) !important; line-height: 1.6 !important; overflow-wrap: anywhere; word-break: keep-all; } .reunion-v5-month-detail dl { display: grid; gap: 9px; margin: 0; } .reunion-v5-month-detail dt { color: var(--bplus-heading); font-weight: 850; font-size: 13px; margin-bottom: 2px; } .reunion-v5-month-detail dd { margin: 0; font-size: 13px; } .reunion-v5-month-detail .reunion-v5-footnote { margin-top: 6px; } .reunion-v5-timing-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .reunion-v5-timing-legend span { padding: 6px 9px; border-radius: 999px; background: var(--bplus-accent-soft); color: var(--bplus-heading); font-size: 12px; font-weight: 800; } @media (min-width: 600px) and (max-width: 1199px) { .reunion-v5-month-detail-grid { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1200px) { .reunion-v5-month-detail-grid { grid-template-columns: minmax(0, 1fr); } } .reunion-v5-final-summary dl { display: grid; gap: 10px; margin: 14px 0 0; } .reunion-v5-final-summary dl > div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bplus-border); } .reunion-v5-final-summary dt { color: var(--bplus-accent); font-weight: 900; } .reunion-v5-final-summary dd { margin: 0; color: var(--bplus-secondary); line-height: 1.6; overflow-wrap: anywhere; word-break: keep-all; } .reunion-v5-footnote { margin: -5px 0 12px; padding: 9px 11px; border-left: 3px solid var(--bplus-accent); background: var(--bplus-accent-soft); color: var(--bplus-secondary); font-size: 13px; line-height: 1.55; } .reunion-v5-metric-dl { display: grid; gap: 10px; margin: 18px 0 0; } .reunion-v5-metric-dl > div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bplus-border); } .reunion-v5-metric-dl dt { color: var(--bplus-accent); font-weight: 900; } .reunion-v5-metric-dl dd { margin: 0; } .reunion-v5-metric-dl strong { color: var(--bplus-heading); } .reunion-v5-metric-dl p { margin: 4px 0 0 !important; } @media (max-width: 760px) { .reunion-v5-card { padding: 14px; border-radius: 18px; } .reunion-v5-executive { margin-top: 12px; padding: 12px; } .reunion-v5-executive-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reunion-v5-hero-support .reunion-bplus-answer-item { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; } .reunion-v5-bar-row { grid-template-columns: 1fr; } .reunion-v5-bar { grid-column: 1 / -1; } .reunion-v5-bar-row p { grid-column: 1 / -1; } .reunion-v5-quadrant { height: 220px; } .reunion-v5-month-chart { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 150px; } .reunion-v5-month-point { height: 138px; } .reunion-v5-month-detail-grid { max-width: 100%; } .reunion-v5-metric-dl > div, .reunion-v5-final-summary dl > div { grid-template-columns: 1fr; gap: 4px; } } @media print { .reunion-v5-report { max-width: 190mm !important; width: 190mm !important; } .reunion-v5-page, .reunion-v5-card { break-inside: auto; page-break-inside: auto; } .reunion-v5-month-point, .reunion-v5-month-detail, .reunion-v5-footnote { break-inside: avoid; page-break-inside: avoid; } .reunion-v5-card { background: #fff8ef !important; border-color: #d7b98f !important; box-shadow: none !important; } .reunion-v5-timeline { break-inside: auto; page-break-inside: auto; } .reunion-v5-month-chart { grid-template-columns: repeat(6, 1fr); min-height: 132px; } .reunion-v5-month-point { height: 118px; padding: 9px 7px; } .reunion-v5-month-point i { bottom: 34px; } .reunion-v5-month-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .reunion-v5-quadrant { height: 210px; } }