/**
 * ═══════════════════════════════════════════════════════════════════════════
 * 연세사주 (Yonsei Saju) - 메인 스타일시트
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * CSS 변수와 전역 스타일을 정의합니다.
 * 
 * @author 반우석
 * @version 2.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS Custom Properties (Variables)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg-page: #f8f5ed;
  --bg-warm: #f0ebe0;
  --bg-card: #fffdf8;
  --bg-card-hover: #faf6ee;
  --bg-input: #f5f0e5;
  --border: #e0d8c8;
  --border-accent: #c9b890;
  --text-primary: #2a2215;
  --text-secondary: #5d5040;
  --text-dim: #9a8a70;
  --accent: #c4960f;
  --accent-dark: #9a7500;
  --accent-light: #d4a93025;
  --accent-glow: #d4a93050;
  --shadow: 0 2px 12px rgba(60,45,15,0.08);
  --shadow-md: 0 4px 20px rgba(60,45,15,0.12);
  --shadow-lg: 0 8px 32px rgba(60,45,15,0.15);
  --shadow-glow: 0 0 20px rgba(196,150,15,0.2);
  --wood: #2d8a4e;
  --fire: #c0392b;
  --earth: #b8860b;
  --metal: #7f8c8d;
  --water: #2874a6;
  --radius: 12px;
  --radius-lg: 16px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: #e8e8e8;
  color: var(--text-primary);
  font-family: 'Noto Sans KR', sans-serif;
  min-height: 100vh; line-height: 1.65;
  font-size: 16px;
  zoom: 1.15;
}
/* Selection 스타일 */
::selection {
  background: rgba(196,150,15,0.3);
  color: var(--text-primary);
}
/* Focus 스타일 전역 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 페이지 전체 래퍼 (황토색 배경 - 중앙 1024px만) */
.page-wrapper {
  width:1024px;
  max-width:1024px;
  margin:0 auto;
  background: linear-gradient(180deg, #f8f5ed 0%, #f0ebe0 50%, #e8e2d5 100%);
  min-height: 100vh;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
}
/* 노이즈 패턴 오버레이 */
.page-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: 0;
}
/* 글로벌 폰트 크기 증가 */
@media (min-width: 768px) { body { font-size: 17px; } }
@media (max-width: 767px) { body { font-size: 15px; } }
.container { width:100%; padding:32px 20px 80px; padding-right:320px; position:relative; z-index:1; }
.main-layout { display:block; }
.main-content { width:100%; }
html, body { min-width:1024px; }
.sidebar { width:300px; position:absolute; top:175px; right:16px; padding:0; background:transparent; z-index:1; }
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.sidebar-card { background:var(--bg-card); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; transition:transform 0.3s ease,box-shadow 0.3s ease; }
.sidebar-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.1); }
.sidebar-header { background:linear-gradient(135deg,#3d4450 0%,#4a5058 100%); padding:12px 16px; border-bottom:2px solid var(--accent); }
.sidebar-header h3 { color:#fff; font-size:0.95rem; margin:0; display:flex; align-items:center; gap:8px; }
.sidebar-body { padding:14px; }
.sidebar-section { margin-bottom:16px; }
.sidebar-section:last-child { margin-bottom:0; }
.sidebar-section-title { font-size:0.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; font-weight:600; }
.today-pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.today-pillar { text-align:center; padding:8px 4px; background:var(--bg-warm); border-radius:6px; }
.today-pillar-label { font-size:0.6rem; color:var(--text-dim); margin-bottom:4px; }
.today-pillar-char { font-family:'Noto Serif KR',serif; font-size:1.1rem; line-height:1.2; }
.today-pillar-char .stem { display:block; }
.today-pillar-char .branch { display:block; }
.ohang-bars { display:flex; flex-direction:column; gap:6px; }
.ohang-bar { display:flex; align-items:center; gap:8px; font-size:0.75rem; }
.ohang-bar-label { width:28px; font-weight:600; }
.ohang-bar-track { flex:1; height:8px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden; }
.ohang-bar-fill { height:100%; border-radius:4px; transition:width 0.5s ease; }
.ohang-bar-fill.wood { background:linear-gradient(90deg,#2d5a2d,#4a8f4a); }
.ohang-bar-fill.fire { background:linear-gradient(90deg,#8b2323,#d44); }
.ohang-bar-fill.earth { background:linear-gradient(90deg,#8b7355,#c9a227); }
.ohang-bar-fill.metal { background:linear-gradient(90deg,#666,#aaa); }
.ohang-bar-fill.water { background:linear-gradient(90deg,#1a3a5c,#2d5aa0); }
.ohang-bar-pct { width:32px; text-align:right; color:var(--text-dim); }
.quick-links { display:flex; flex-direction:column; gap:6px; }
.quick-link { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--bg-warm); border-radius:6px; color:var(--text-primary); text-decoration:none; font-size:0.8rem; transition:all 0.15s; cursor:pointer; border:none; width:100%; text-align:left; font-family:'Noto Sans KR',sans-serif; }
.quick-link:hover { background:var(--accent); color:#fff; }
.quick-link-icon { font-size:1rem; }
.today-fortune-mini { display:flex; flex-direction:column; gap:8px; }
.fortune-mini-item { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.fortune-mini-item:last-child { border-bottom:none; }
.fortune-mini-label { font-size:0.75rem; color:var(--text-secondary); }
.fortune-mini-value { font-size:0.8rem; font-weight:600; }
.fortune-mini-bar { width:60px; height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.fortune-mini-bar-fill { height:100%; background:var(--accent); border-radius:3px; }

/* Sidebar Content Styles */
.sb-summary { text-align:center; }
.sb-ilgan { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.sb-ilgan-char { font-family:'Noto Serif KR',serif; font-size:2rem; font-weight:700; }
.sb-ilgan-hanja { font-family:'Noto Serif KR',serif; font-size:1.2rem; color:var(--text-dim); }
.sb-ilgan-oh { font-size:0.75rem; color:var(--text-secondary); background:var(--bg-warm); padding:2px 8px; border-radius:4px; }
.sb-pillars { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.sb-pillar { background:var(--bg-warm); padding:8px; border-radius:6px; text-align:center; }
.sb-pillar-label { display:block; font-size:0.65rem; color:var(--text-dim); margin-bottom:4px; }
.sb-pillar-val { font-family:'Noto Serif KR',serif; font-size:1rem; }
.sb-oheng-bars { display:flex; flex-direction:column; gap:8px; }
.sb-oheng-row { display:flex; align-items:center; gap:8px; font-size:0.8rem; }
.sb-oheng-label { width:20px; font-weight:700; text-align:center; }
.sb-oheng-track { flex:1; height:10px; background:rgba(255,255,255,0.08); border-radius:5px; overflow:hidden; }
.sb-oheng-fill { height:100%; border-radius:5px; transition:width 0.4s ease; }
.sb-oheng-pct { width:36px; text-align:right; color:var(--text-dim); font-size:0.75rem; }
.sb-yongsin { display:flex; flex-direction:column; gap:10px; }
.sb-yongsin-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px dashed var(--border); }
.sb-yongsin-row:last-child { border-bottom:none; }
.sb-yongsin-label { font-size:0.75rem; color:var(--text-dim); }
.sb-yongsin-val { font-size:0.85rem; font-weight:600; }
.sb-yongsin-val.strong { color:#4a8f4a; }
.sb-yongsin-val.weak { color:#d49a6a; }
.sb-yongsin-val.highlight { color:var(--accent); }
.sb-yongsin-val.dim { color:var(--text-dim); }
.sb-yongsin-val small { font-size:0.7rem; font-weight:400; color:var(--text-dim); }

/* 오늘의 사주 사이드바 */
.sb-today-date { font-size:0.9rem; color:var(--text-secondary); margin-bottom:12px; text-align:center; }
.sb-today-ganji { display:flex; justify-content:center; gap:12px; margin-bottom:12px; }
.sb-ganji-char { font-family:'Noto Serif KR',serif; font-size:1.6rem; font-weight:700; }
.sb-today-oheng { display:flex; justify-content:center; gap:16px; font-size:0.85rem; color:var(--text-dim); }
/* 지금의 사주 - 사주명식 스타일 */
.sb-saju-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0; }
.sb-saju-pillar { text-align:center; background:var(--bg-warm); border-radius:6px; padding:8px 4px; }
.sb-saju-label { font-size:0.7rem; color:var(--text-dim); margin-bottom:4px; }
.sb-saju-stem, .sb-saju-branch { font-family:'Noto Serif KR',serif; font-size:1.2rem; font-weight:700; line-height:1.4; }
.sb-saju-info { font-size:0.68rem; color:var(--text-secondary); margin-top:2px; }

/* 오늘의 기운 사이드바 */
.sb-energy-main { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; }
.sb-energy-icon { font-size:1.5rem; }
.sb-energy-text { font-size:0.9rem; font-weight:600; color:var(--text-primary); }
.sb-energy-tip { font-size:0.78rem; color:var(--text-secondary); text-align:center; margin-bottom:10px; padding:8px; background:var(--bg-warm); border-radius:6px; }
.sb-energy-oheng { display:flex; justify-content:center; gap:16px; font-size:0.72rem; color:var(--text-dim); }

/* 오늘의 운세 사이드바 */
.sb-fortune-badge { text-align:center; font-size:1.1rem; font-weight:700; color:var(--accent); margin-bottom:6px; }
.sb-fortune-title { text-align:center; font-family:'Noto Serif KR',serif; font-size:1rem; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.sb-fortune-desc { text-align:center; font-size:0.8rem; color:var(--text-secondary); margin-bottom:12px; }
.sb-fortune-luck { display:flex; align-items:center; gap:10px; }
.sb-luck-bar-bg { flex:1; height:10px; background:var(--bg-warm); border-radius:5px; overflow:hidden; }
.sb-luck-bar-fill { height:100%; border-radius:5px; transition:width 0.5s; }
.sb-luck-score { font-size:0.85rem; font-weight:700; min-width:45px; text-align:right; }

/* 빠른 링크 */
.quick-links { display:flex; flex-direction:column; gap:8px; }
.quick-link { display:block; padding:10px 12px; background:var(--bg-warm); border-radius:6px; color:var(--text-primary); text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
.quick-link:hover { background:var(--accent); color:#fff; }

/* 푸터 */
.app-footer {
  background:transparent; border-top:1px solid var(--border);
  padding:32px 20px; text-align:center; margin-top:40px;
  position:relative; z-index:1;
}
.footer-content { max-width:700px; margin:0 auto; }
.footer-info {
  display:flex; justify-content:center; align-items:center;
  gap:8px; margin-bottom:20px; flex-wrap:wrap;
  font-size:0.85rem; color:var(--text-secondary);
}
.footer-info a {
  color:var(--text-secondary); text-decoration:none; transition:color 0.2s;
}
.footer-info a:hover { color:var(--accent); text-decoration:underline; }
.footer-divider { color:var(--text-dim); }
.footer-social {
  display:flex; justify-content:center; gap:16px; margin-bottom:16px;
}
.social-link {
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); transition:all 0.2s;
}
.social-link:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.social-link svg { width:20px; height:20px; }
.social-link.naver svg { width:16px; height:16px; }
.footer-copyright {
  font-size:0.8rem; color:var(--text-dim);
}

header {
  text-align:center; margin-bottom:40px; padding:28px 20px 24px;
  background: linear-gradient(135deg, rgba(196,150,15,0.08) 0%, rgba(196,150,15,0.02) 100%);
  border-bottom: 1px solid rgba(196,150,15,0.15);
  position: relative;
}
header::before {
  content: '☰';
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 1.8rem;
  opacity: 0.08;
  color: var(--accent);
}
header::after {
  content: '☷';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 1.8rem;
  opacity: 0.08;
  color: var(--accent);
}
header h1 {
  font-family:'Noto Serif KR',serif; font-size:2.4rem; font-weight:900;
  background: linear-gradient(135deg, #c4960f 0%, #e6b422 50%, #c4960f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing:10px; margin-bottom:0;
  text-shadow: 0 2px 4px rgba(196,150,15,0.1);
  position: relative;
  display: inline-block;
}
header p { color:var(--text-dim); font-size:0.85rem; letter-spacing:4px; margin-top:4px; }

/* 헤더 로그인 버튼 */
.header-auth {
  position:absolute; top:50%; right:60px; transform:translateY(-50%); z-index:10;
}
.btn-login {
  padding:8px 16px; border:1px solid var(--accent); border-radius:20px;
  background:transparent; color:var(--accent); font-size:0.85rem; font-weight:600;
  cursor:pointer; transition:all 0.2s; font-family:'Noto Sans KR',sans-serif;
}
.btn-login:hover { background:var(--accent); color:#fff; }
.user-info {
  display:flex; align-items:center; gap:10px;
}
.user-avatar {
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  border:2px solid var(--accent);
}
.user-name {
  font-size:0.85rem; font-weight:600; color:var(--text-primary);
}
.btn-logout {
  padding:6px 12px; border:1px solid var(--border); border-radius:16px;
  background:transparent; color:var(--text-secondary); font-size:0.75rem;
  cursor:pointer; transition:all 0.2s; font-family:'Noto Sans KR',sans-serif;
}
.btn-logout:hover { background:#e74c3c; color:#fff; border-color:#e74c3c; }

/* 로그인 모달 */
.modal-login-content { max-width:380px; }
.login-desc {
  text-align:center; font-size:0.9rem; color:var(--text-secondary);
  line-height:1.6; margin-bottom:24px;
}
.login-buttons {
  display:flex; flex-direction:column; gap:12px;
}
.btn-social {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:14px 20px; border:none; border-radius:8px;
  font-size:0.95rem; font-weight:600; cursor:pointer;
  transition:all 0.2s; font-family:'Noto Sans KR',sans-serif;
}
.btn-google {
  background:#fff; color:#333; border:1px solid #ddd;
}
.btn-google:hover { background:#f5f5f5; box-shadow:0 2px 8px rgba(0,0,0,0.1); }

/* Input */
.input-section {
  background:linear-gradient(145deg, var(--bg-card) 0%, rgba(255,255,255,0.8) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px 28px;
  margin-bottom:28px; box-shadow:var(--shadow-md);
  position:relative;
  transition:box-shadow 0.3s, transform 0.3s;
}
.input-section:hover {
  box-shadow:var(--shadow-lg);
}
.input-section::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  opacity:0.5;
}
.form-row { display:flex; align-items:flex-end; justify-content:center; gap:12px; flex-wrap:wrap; }
.input-group { display:flex; align-items:center; gap:4px; }
.stepper { display:flex; flex-direction:column; align-items:center; gap:0; }
.stepper input {
  width:68px; padding:10px 6px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:0; color:var(--text-primary); font-family:'Noto Sans KR',sans-serif;
  font-size:1.05rem; text-align:center; -moz-appearance:textfield;
  transition:all 0.2s;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.stepper input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); }
.stepper input::placeholder { color:#ddd4c0; opacity:1; }
.step-btn {
  width:68px; height:24px; background:transparent; border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  user-select:none; transition:all 0.18s ease;
}
.step-btn svg { width:14px; height:8px; stroke:var(--text-dim); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:stroke 0.18s ease,transform 0.18s ease; }
.step-up { border-radius:8px 8px 0 0; border-bottom:none; }
.step-down { border-radius:0 0 8px 8px; border-top:none; }
.step-btn:hover { background:var(--bg-warm); }
.step-btn:hover svg { stroke:var(--accent); transform:scaleY(1.25); }
.step-btn:active { background:var(--accent); }
.step-btn:active svg { stroke:#fff; }
.input-group label { color:var(--text-secondary); font-size:0.85rem; min-width:14px; font-weight:500; }

.gender-toggle { display:flex; gap:0; margin-left:8px; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.gender-btn {
  padding:10px 16px; border:none; background:var(--bg-input);
  color:var(--text-dim); font-size:0.9rem; cursor:pointer;
  font-family:'Noto Sans KR',sans-serif; transition:all 0.15s;
}
.gender-btn.active { background:var(--accent); color:#fff; font-weight:700; }
.gender-btn:not(.active):hover { background:var(--border); }

.btn-calc {
  background:linear-gradient(135deg, var(--accent) 0%, #e6b422 50%, var(--accent) 100%);
  background-size:200% 200%;color:#fff;border:none;padding:14px 32px;border-radius:8px;cursor:pointer;
  font-weight:700;font-size:1rem;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);font-family:'Noto Sans KR',sans-serif;
  box-shadow:0 4px 15px rgba(196,150,15,0.3);position:relative;overflow:hidden;
}
.btn-calc::before {
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.5s;
}
.btn-calc:hover {
  background-position:100% 0;transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(196,150,15,0.4);
}
.btn-calc:hover::before { left:100%; }
.btn-calc:active { transform:translateY(0);box-shadow:0 2px 10px rgba(196,150,15,0.3); }
.calc-btn-row { display:flex; gap:8px; margin-top:12px; width:100%; }
.calc-btn-row .btn-calc { flex:1; margin:0; padding:14px 0; text-align:center; }
.calc-btn-row .btn-save-db { flex:1; margin:0; padding:14px 0; text-align:center; }

/* Results */
#results { display:none; }
#results.show { display:block; animation:fadeUp 0.4s ease-out; }
.results-container { }
.result-section {
  margin-bottom:20px;
  animation:fadeUp 0.5s ease-out both;
}
.result-section:nth-child(1) { animation-delay:0s; }
.result-section:nth-child(2) { animation-delay:0.1s; }
.result-section:nth-child(3) { animation-delay:0.2s; }
.result-section:nth-child(4) { animation-delay:0.3s; }
.result-section:nth-child(5) { animation-delay:0.4s; }
.result-section:last-child { margin-bottom:0; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.info-bar {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; padding:14px 22px; margin-bottom:20px;
  background:linear-gradient(135deg, rgba(196,150,15,0.08) 0%, rgba(196,150,15,0.03) 100%);
  border:1px solid rgba(196,150,15,0.2);
  border-radius:var(--radius); font-size:0.85rem;
  box-shadow:0 2px 8px rgba(196,150,15,0.1);
}
.info-bar .date-info { font-weight:600; }
.info-bar .ganji-info { font-family:'Noto Serif KR',serif; font-weight:700; font-size:1.1rem; letter-spacing:4px; color:var(--text-primary); }

.section-title {
  font-family:'Noto Serif KR',serif; font-size:1.1rem; font-weight:700;
  color:var(--accent); letter-spacing:3px; margin-bottom:14px; padding-left:2px;
  position:relative; display:inline-block;
}
.section-title::after {
  content:''; position:absolute; bottom:-4px; left:0; width:40px; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
  border-radius:2px;
}

/* Pillar Cards */
.pillars-section { margin-bottom:28px; }
.pillars-grid { display:grid; gap:10px; }
.pillar-card {
  background:linear-gradient(180deg, var(--bg-card) 0%, rgba(255,255,255,0.95) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 10px; text-align:center;
  box-shadow:var(--shadow-md); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
}
.pillar-card:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.pillar-card.day-pillar {
  background:linear-gradient(180deg, rgba(196,150,15,0.08) 0%, rgba(196,150,15,0.03) 100%);
  border-color:rgba(196,150,15,0.3);
}
.pillar-card.day-pillar::before {
  content:'日主';position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:0.6rem;padding:2px 8px;
  border-radius:10px;font-weight:700;letter-spacing:1px;
}
.pillar-card.empty-pillar { opacity:0.45; border-style:dashed; }
.pillar-label { font-size:0.8rem; color:var(--text-dim); letter-spacing:2px; margin-bottom:8px; }
.ten-god-stem { font-size:1rem; font-weight:600; color:var(--text-secondary); margin-bottom:6px; min-height:22px; }

.char-block { margin-bottom:2px; }
.char-kr { font-family:'Noto Serif KR',serif; font-size:3rem; font-weight:900; line-height:1; }
.char-cn { font-family:'Noto Serif KR',serif; font-size:2.2rem; font-weight:500; }
.char-sub { font-size:0.75rem; color:var(--text-secondary); margin-bottom:8px; }
.pillar-divider { width:32px; height:1px; margin:6px auto; background:var(--border); }
.ten-god-branch { font-size:0.88rem; font-weight:600; color:var(--text-secondary); margin-bottom:8px; min-height:20px; }
.twelve-stage {
  display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.72rem; font-weight:500;
  background:var(--bg-warm); border:1px solid var(--border); color:var(--text-secondary);
}

.el-wood { color:var(--wood); } .el-fire { color:var(--fire); }
.el-earth { color:var(--earth); } .el-metal { color:var(--metal); } .el-water { color:var(--water); }


/* Analysis */
.analysis-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px; }
.analysis-grid-new { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px; }
.analysis-left-col { display:flex; flex-direction:column; gap:14px; }
.analysis-right-col { display:flex; flex-direction:column; }
.analysis-right-col .analysis-card,
.analysis-right-col .sipsung-card-new { flex:1; display:flex; flex-direction:column; }
.analysis-right-col .sipsung-groups-new { flex:1; }
@media(max-width:640px) { .analysis-grid-new { grid-template-columns:1fr; } }
.analysis-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.oheng-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.oheng-label { min-width:32px; font-weight:700; font-size:0.85rem; }
.oheng-bar-bg { flex:1; height:14px; background:var(--bg-warm); border-radius:7px; overflow:hidden; }
.oheng-bar-fill { height:100%; border-radius:7px; transition:width 0.6s cubic-bezier(.22,1,.36,1); }
.oheng-count { min-width:20px; text-align:right; font-size:0.8rem; color:var(--text-secondary); }
.oheng-tag { display:inline-block; padding:1px 6px; border-radius:4px; font-size:0.7rem; font-weight:600; margin-left:4px; }
.oheng-tag.strong { background:#e8f5e9; color:#2d8a4e; }
.oheng-tag.weak { background:#fce4ec; color:#c0392b; }

/* 지장간 세로 레이아웃 */
.hs-card-vertical { padding:20px; }
.hs-columns { display:flex; gap:12px; justify-content:center; }
.hs-column { flex:1; max-width:120px; text-align:center; background:var(--bg-warm); border-radius:10px; padding:12px 8px; }
.hs-column.hs-empty { opacity:0.5; }
.hs-col-label { font-size:0.78rem; color:var(--text-dim); margin-bottom:6px; font-weight:600; }
.hs-col-branch { font-size:1.5rem; font-weight:700; margin-bottom:10px; }
.hs-branch-hanja { font-size:0.9rem; font-weight:400; margin-left:2px; }
.hs-col-items { display:flex; flex-direction:column; gap:6px; }
.hs-item { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-size:0.75rem; display:flex; align-items:center; justify-content:center; gap:6px; }
.hs-item.hs-item-bon { border-color:var(--accent); }
.hs-item-stem { font-weight:600; }
.hs-item-tg { font-size:0.72rem; color:var(--text-secondary); }
.hs-item-empty { font-size:0.75rem; color:var(--text-dim); padding:10px; }
.hs-label-column { flex:0 0 auto; max-width:50px; min-width:50px; background:transparent; }
.hs-label-column .hs-col-branch { visibility:hidden; }
.hs-type-label { background:transparent; border:none; font-size:0.7rem; color:var(--text-dim); font-weight:600; justify-content:flex-end; padding-right:4px; }
.hs-type-label.hs-item-bon { border:none; }
@media(max-width:480px) { .hs-columns { flex-wrap:wrap; } .hs-column { min-width:80px; } .hs-label-column { min-width:50px; } }

/* Fortune scroll */
.fortune-section { margin-bottom:28px; }
.fortune-scroll {
  display:flex; gap:3px; overflow-x:auto; padding:4px 0 8px; scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:thin;
}
.fortune-scroll::-webkit-scrollbar { height:4px; }
.fortune-scroll::-webkit-scrollbar-thumb { background:var(--border-accent); border-radius:2px; }

.fortune-card {
  min-width:52px; flex-shrink:0; background:var(--bg-card); border:1px solid var(--border);
  border-radius:5px; padding:5px 3px; text-align:center; box-shadow:var(--shadow); transition:all 0.2s;
}
.fortune-card:hover { box-shadow:var(--shadow-lg); }
.fortune-card.clickable { cursor:pointer; transition:transform 0.15s, box-shadow 0.15s; }
.fortune-card.clickable:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.fortune-card.current { border-color:#b8d4e8; border-style:dashed; background:#eef6fb; box-shadow:0 0 6px rgba(184,212,232,0.25); }
.fortune-card.selected { border-color:var(--accent); border-width:2px; background:#fff8e1; box-shadow:0 0 12px var(--accent-glow); }
.fortune-card.current.selected { border-style:solid; border-color:var(--accent); border-width:2px; background:#fff8e1; box-shadow:0 0 12px var(--accent-glow); }
.fortune-card .fc-age { font-size:0.6rem; color:var(--text-dim); margin-bottom:1px; letter-spacing:0; }
.fortune-card .fc-year { font-size:0.55rem; color:var(--text-dim); margin-bottom:2px; }
.fortune-card .fc-stem { font-family:'Noto Serif KR',serif; font-size:1.1rem; font-weight:900; line-height:1; }
.fortune-card .fc-cn { font-size:0.7rem; color:var(--text-dim); }
.fortune-card .fc-branch { font-family:'Noto Serif KR',serif; font-size:1.1rem; font-weight:900; line-height:1; margin-top:1px; }
.fortune-card .fc-divider { width:14px; height:1px; margin:2px auto; background:var(--border); }
.fortune-card .fc-tg-stem { font-size:0.6rem; color:var(--text-secondary); font-weight:500; margin-bottom:1px; min-height:12px; }
.fortune-card .fc-tg { font-size:0.6rem; color:var(--text-secondary); font-weight:500; margin-top:2px; }
.fortune-card .fc-ts { font-size:0.5rem; color:var(--text-dim); margin-top:1px;
  display:inline-block; padding:1px 3px; border-radius:2px;
  background:var(--bg-warm); border:1px solid var(--border);
}

.fortune-direction {
  display:inline-block; padding:2px 10px; border-radius:4px; font-size:0.8rem;
  background:var(--bg-warm); border:1px solid var(--border); color:var(--text-secondary);
  margin-left:8px; font-weight:400; letter-spacing:1px;
}
/* 대운 정보 바 (가독성 개선) */
.daeun-info-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 14px; padding:10px 14px; background:var(--bg-warm); border-radius:8px; }
.daeun-direction { font-weight:700; font-size:0.9rem; padding:4px 10px; border-radius:6px; }
.daeun-direction.forward { background:#e8f5e9; color:#2d8a4e; }
.daeun-direction.reverse { background:#fbe8e8; color:#c0392b; }
.daeun-start { font-size:0.85rem; color:var(--text-primary); font-weight:600; padding:4px 10px; background:var(--bg-card); border-radius:6px; border:1px solid var(--border); }
.daeun-term { font-size:0.85rem; color:var(--text-secondary); padding:4px 10px; background:var(--bg-card); border-radius:6px; border:1px solid var(--border); }
@media(max-width:640px) { .daeun-info-bar { flex-direction:column; align-items:flex-start; } }
.no-gender-msg {
  padding:16px; text-align:center; color:var(--text-dim); font-size:0.9rem;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
}

/* Relations Diagram (합충형파해) */
.relations-section { margin-bottom:24px; }
.relations-diagram {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 8px 10px; box-shadow:var(--shadow);
  overflow-x:auto;
}
.relations-diagram svg { max-width:none !important; display:block; margin:0 auto; }
.rel-legend {
  display:flex; justify-content:center; gap:14px; padding:8px 0 2px;
  font-size:0.72rem; font-weight:600; letter-spacing:1px;
}
.no-relations {
  text-align:center; padding:16px; color:var(--text-muted); font-size:0.9rem;
}

/* Yongsin (용신) */
.yongsin-section { margin-bottom:28px; }
.yongsin-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 24px; box-shadow:var(--shadow);
}
.yongsin-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.strength-badge {
  display:inline-block; padding:4px 14px; border-radius:6px;
  font-size:0.88rem; font-weight:700; letter-spacing:2px;
}
.strength-badge.strong { background:#c0392b12; color:var(--fire); border:1px solid #c0392b30; }
.strength-badge.weak { background:#2874a612; color:var(--water); border:1px solid #2874a630; }
.strength-detail { font-size:0.75rem; color:var(--text-dim); }
.yongsin-grid { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.yongsin-item {
  text-align:center; padding:14px 24px;
  background:var(--bg-warm); border-radius:8px; border:1px solid var(--border);
  min-width:120px;
}
.yongsin-item.primary { border-color:var(--accent); background:#fffbf0; }
.yi-label { font-size:0.7rem; color:var(--text-dim); letter-spacing:2px; margin-bottom:6px; }
.yi-elem { font-size:1.3rem; font-weight:900; font-family:'Noto Serif KR',serif; }
.yi-desc { font-size:0.72rem; color:var(--text-secondary); margin-top:4px; }
.yongsin-tongkwan { margin-top:16px; padding-top:16px; border-top:1px dashed var(--border); text-align:center; }
.yt-label { font-size:0.7rem; color:var(--text-dim); letter-spacing:2px; margin-bottom:4px; }
.yt-value { font-size:1.1rem; font-weight:700; font-family:'Noto Serif KR',serif; }
.yt-desc { font-size:0.72rem; color:var(--text-secondary); margin-top:4px; }

/* Yongsin Cards (용신 카드 형태) */
.yongsin-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.yongsin-card { background:var(--bg-warm); border:1px solid var(--border); border-radius:10px; padding:16px; text-align:center; }
.yongsin-card.empty { opacity:0.7; }
.yongsin-card-type { font-size:0.75rem; color:var(--text-dim); font-weight:600; letter-spacing:1px; margin-bottom:8px; }
.yongsin-card-value { font-size:1.4rem; font-weight:700; font-family:'Noto Serif KR',serif; margin-bottom:6px; }
.yongsin-card-desc { font-size:0.72rem; color:var(--text-secondary); line-height:1.4; }
@media (max-width:480px) {
  .yongsin-cards { grid-template-columns:1fr; }
}

/* 십성 표 */
.sipsung-table { display:flex; flex-direction:column; gap:6px; }
.sipsung-row { display:flex; align-items:center; gap:8px; }
.sipsung-label { min-width:45px; font-size:0.8rem; font-weight:600; color:var(--text-primary); }
.sipsung-bar-bg { flex:1; height:16px; background:#f5efe4; border-radius:5px; overflow:hidden; }
.sipsung-bar-fill { height:100%; background:linear-gradient(90deg, #a89878, #c9a227); border-radius:5px; transition:width 0.3s ease; }
.sipsung-count { min-width:20px; text-align:right; font-size:0.75rem; font-weight:700; color:var(--text-secondary); }

/* 십성 그룹별 표기 */
.sipsung-groups{display:flex;flex-direction:column;gap:12px}
.sipsung-group{background:var(--bg-warm);border-radius:8px;padding:10px 12px}
.sipsung-group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.sipsung-group-name{font-size:0.95rem;font-weight:700}
.sipsung-group-oheng{font-size:0.8rem;font-weight:600;padding:2px 8px;background:rgba(255,255,255,0.6);border-radius:10px}
.sipsung-group-items{font-size:0.8rem;color:var(--text-dim);margin-bottom:6px;letter-spacing:0.5px}
/* 십성 개별 표기 스타일 */
.sipsung-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:640px){.sipsung-list{grid-template-columns:1fr}}
.sipsung-item{background:var(--bg-warm);border-radius:8px;padding:10px 12px}
.sipsung-item-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sipsung-item-name{font-size:1rem;font-weight:700}
.sipsung-item-group{font-size:0.75rem;color:var(--text-dim);padding:2px 6px;background:rgba(0,0,0,0.05);border-radius:4px}
.sipsung-item-oheng{font-size:0.8rem;font-weight:600;margin-left:auto}
.sipsung-pct{display:block;text-align:right;font-size:0.9rem;font-weight:700;margin-top:4px}

/* 오행 세부 */
.oheng-detail { font-size:0.7rem; color:var(--text-secondary); min-width:60px; text-align:right; }

/* ========== 새 오행/십성/합충형파해 디자인 ========== */

/* 섹션 타이틀 (스페이싱) */
.section-title-spaced {
  font-family:'Noto Serif KR',serif;
  font-size:1rem;
  font-weight:600;
  letter-spacing:6px;
  color:#a89878;
  margin-bottom:14px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}

/* 오행 카드 새 디자인 (원래 글씨 스타일 유지) */
.oheng-card-new { background:var(--bg-card); padding:20px; }
.oheng-table-new { display:flex; flex-direction:column; gap:8px; }
.oheng-row-new { display:flex; align-items:center; gap:8px; }
.oheng-label-new { min-width:32px; font-weight:700; font-size:0.85rem; }
.oheng-bar-bg-new { flex:1; height:14px; background:var(--bg-warm); border-radius:7px; overflow:hidden; }
.oheng-bar-fill-new { height:100%; border-radius:7px; transition:width 0.6s cubic-bezier(.22,1,.36,1); }
.oheng-pct-new { min-width:36px; text-align:right; font-size:0.8rem; color:var(--text-secondary); }

/* 오행 세부 적용 */
.oheng-detail-section { margin-top:14px; padding-top:10px; border-top:1px solid var(--border); }
.oheng-detail-title { font-size:0.72rem; color:var(--text-dim); margin-bottom:6px; font-weight:600; }
.oheng-detail-item { font-size:0.7rem; color:var(--text-secondary); margin-bottom:3px; line-height:1.4; }

/* 십성 카드 새 디자인 (원래 글씨 스타일 유지) */
.sipsung-card-new { background:var(--bg-card); padding:20px; }
.sipsung-groups-new { display:flex; flex-direction:column; gap:14px; }
.sipsung-group-new { }
.sipsung-group-header-new { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.sipsung-group-name-new { font-size:0.75rem; font-weight:600; color:var(--text-dim); }
.sipsung-group-oheng-new { font-size:0.75rem; font-weight:600; }
.sipsung-row-new { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.sipsung-name-new { min-width:36px; font-size:0.8rem; font-weight:600; color:var(--text-primary); }
.sipsung-bar-bg-new { flex:1; height:14px; background:var(--bg-warm); border-radius:7px; overflow:hidden; }
.sipsung-bar-fill-new { height:100%; border-radius:7px; transition:width 0.6s cubic-bezier(.22,1,.36,1); }
.sipsung-pct-new { min-width:32px; text-align:right; font-size:0.8rem; color:var(--text-secondary); }

/* 합충형파해 새 디자인 (크게) */
.relation-card-new { background:var(--bg-card); padding:24px 20px; }
.relations-diagram-new { display:flex; flex-direction:column; align-items:center; }
.relations-diagram-new svg { width:100%; max-width:560px; height:auto; min-height:280px; }
.rel-legend-new { display:flex; justify-content:center; gap:16px; margin-top:14px; font-size:0.85rem; font-weight:600; }
.rel-legend-new span { display:flex; align-items:center; gap:4px; }
.no-relations { text-align:center; padding:20px; color:var(--text-dim); font-size:0.9rem; }

/* 데스크톱 스케일업 */
@media (min-width:768px) {
  .section-title-spaced { font-size:1.1rem; letter-spacing:8px; }
  .oheng-label-new { font-size:1rem; min-width:36px; }
  .oheng-bar-bg-new { height:18px; border-radius:9px; }
  .oheng-pct-new { font-size:0.9rem; }
  .sipsung-name-new { font-size:0.9rem; }
  .sipsung-bar-bg-new { height:16px; border-radius:8px; }
  .sipsung-pct-new { font-size:0.85rem; }
  .relations-diagram-new svg { max-width:640px; min-height:320px; }
}

/* DB 저장 버튼 */
.btn-save-db {
  padding:10px 20px; font-size:0.95rem; font-weight:600;
  background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border); border-radius:var(--radius);
  cursor:pointer; transition:all 0.2s;
}
.btn-save-db:hover { background:var(--bg-warm); border-color:var(--accent); }

/* Desktop scale-up */
@media (min-width:768px) {
  body { font-size:17px; }
  .container { width:1024px; max-width:1024px; padding:44px 36px 80px; padding-right:320px; }
  header h1 { font-size:2.8rem; letter-spacing:12px; }
  header p { font-size:0.95rem; letter-spacing:5px; }
  .tab-btn { padding:13px 24px; font-size:1rem; flex:1; }
  .input-section { padding:30px 40px; }
  .stepper input { width:82px; padding:11px 8px; font-size:1.15rem; }
  .step-btn { width:82px; height:28px; }
  .input-group label { font-size:1rem; }
  .gender-btn { padding:11px 20px; font-size:1.05rem; }
  .btn-calc { padding:11px 36px; font-size:1.1rem; }
  .info-bar { padding:16px 28px; font-size:1.05rem; }
  .info-bar .ganji-info { font-size:1.3rem; letter-spacing:6px; }
  .section-title { font-size:1.25rem; letter-spacing:5px; margin-bottom:16px; }
  .pillar-card { padding:24px 16px; }
  .pillar-label { font-size:0.9rem; letter-spacing:3px; margin-bottom:10px; }
  .ten-god-stem { font-size:1.15rem; margin-bottom:8px; min-height:28px; }
  .char-kr { font-size:3.6rem; }
  .char-cn { font-size:2.6rem; }
  .char-sub { font-size:0.88rem; margin-bottom:10px; }
  .pillar-divider { width:44px; margin:10px auto; }
  .ten-god-branch { font-size:1.1rem; margin-bottom:10px; min-height:26px; }
  .twelve-stage { font-size:0.9rem; padding:4px 12px; }
  .analysis-card { padding:28px; }
  .oheng-label { font-size:1.05rem; min-width:40px; }
  .oheng-bar-bg { height:20px; border-radius:10px; }
  .oheng-count { font-size:1rem; }
  .hs-label { font-size:1rem; margin-bottom:6px; }
  .hs-tag { font-size:0.92rem; padding:4px 12px; }
  .hs-tag .hs-type { font-size:0.78rem; }
  .fortune-card { min-width:100px; padding:14px 10px; }
  .fortune-card .fc-age { font-size:0.88rem; }
  .fortune-card .fc-year { font-size:0.78rem; }
  .fortune-card .fc-stem,.fortune-card .fc-branch { font-size:2.0rem; }
  .fortune-card .fc-cn { font-size:1.25rem; }
  .fortune-card .fc-tg-stem,.fortune-card .fc-tg { font-size:1.0rem; }
  .fortune-card .fc-ts { font-size:0.8rem; }
  .fortune-card .fc-divider { margin:6px auto; }
  .fortune-direction { font-size:0.92rem; padding:4px 14px; }
  .no-gender-msg { font-size:1.05rem; }
  .rel-legend { font-size:0.9rem; gap:20px; }
  .yongsin-card { padding:28px 32px; }
  .strength-badge { font-size:1.1rem; padding:6px 20px; }
  .strength-detail { font-size:0.95rem; }
  .yi-label { font-size:0.9rem; }
  .yi-elem { font-size:1.7rem; }
  .yi-desc { font-size:0.92rem; }
  .yongsin-item { padding:18px 32px; min-width:150px; }
  .chatgpt-box textarea { font-size:0.95rem; min-height:380px; }
  .chatgpt-copy { font-size:0.88rem; padding:7px 18px; }
  /* 궁합 desktop */
  .gh-person { padding:28px 24px; }
  .gh-input-group input { width:72px; padding:10px 4px; font-size:1.1rem; }
  .gh-input-group label { font-size:0.82rem; }
  .gh-gender-btn { padding:9px 20px; font-size:0.95rem; }
  .gh-vs { font-size:1.5rem; padding:0 20px; }
  .gh-score-num { font-size:3.8rem; }
  .gh-score-label { font-size:0.95rem; }
  .gh-pillar { min-width:68px; padding:12px 8px; }
  .gh-pillar .gp-label { font-size:0.78rem; }
  .gh-pillar .gp-char { font-size:1.5rem; }
  .gh-pillar .gp-cn { font-size:0.85rem; }
  .gh-pillar .gp-sub { font-size:0.75rem; }
  .gh-side-info { font-size:0.9rem; }
  .compat-card { padding:24px; }
  .cc-title { font-size:1.05rem; }
  .cc-score { font-size:0.92rem; }
  .cc-row { font-size:1rem; line-height:1.8; }
  .cc-tag { font-size:0.88rem; padding:3px 10px; }
  .compat-meter { height:7px; }
  /* DB desktop */
  .db-type-btn { padding:10px 0; font-size:0.92rem; }
  .db-search { padding:11px 16px; font-size:1.05rem; }
  .db-filter-btn { padding:9px 18px; font-size:0.9rem; }
  .db-add-btn { padding:9px 18px; font-size:0.9rem; }
  .db-count { font-size:0.88rem; }
  .db-item { padding:14px 20px; }
  .db-item-name { font-size:1.05rem; }
  .db-item-meta { font-size:0.88rem; }
  .db-item-info { width:22%; }
  .db-item-pillars .sc, .db-item-pillars .bc { font-size:1.15rem; padding:4px 6px; }
  .db-item-daeun .du-s, .db-item-daeun .du-b { font-size:1.15rem; }
  .db-item-daeun .du-tag, .db-item-daeun .du-age { font-size:0.78rem; }
  .db-item-btn { font-size:0.82rem; padding:6px 16px; }
  .db-empty { font-size:1.05rem; }
}

@media (max-width:640px) {
  header h1 { font-size:1.5rem; letter-spacing:4px; }
  .pillars-grid { gap:5px; }
  .pillar-card { padding:12px 5px; }
  .char-kr { font-size:1.5rem; }
  .analysis-grid { grid-template-columns:1fr; }
  .form-row { gap:10px; }
  .stepper input { width:52px; padding:8px 4px; font-size:0.9rem; }
  .step-btn { width:52px; }
  .step-btn svg { width:12px; height:6px; }
  .gender-btn { padding:8px 12px; font-size:0.8rem; }
  .btn-calc { padding:12px 20px; font-size:0.95rem; }
  .btn-save-db { margin-left:0; margin-top:6px; width:100%; }
  .calc-btn-row { flex-direction:column; }
  .calc-btn-row .btn-calc, .calc-btn-row .btn-save-db { width:100%; }
  .btn-share { margin-left:0; margin-top:6px; width:100%; }
  .container { padding:16px 10px 60px; }
  .fortune-card { min-width:68px; padding:8px 5px; }
  .fortune-card .fc-stem,.fortune-card .fc-branch { font-size:1.35rem; }
}
/* 사주BTI 탭 — 밝은 전통 스타일 */
.bti-empty { text-align:center; padding:60px 20px; }
.bti-empty-icon { font-size:3.5rem; margin-bottom:12px; }
.bti-empty-title { font-size:1.5rem; font-weight:700; color:#3a2e22; margin-bottom:8px; font-family:'Noto Serif KR',serif; }
.bti-empty-desc { font-size:0.9rem; color:#5a4a3a; line-height:1.6; }
.bti-wrap { }
.bti-header { text-align:center; margin-bottom:16px; }
.bti-date { font-size:0.95rem; color:#5a4a3a; }
.bti-section-title { font-family:'Noto Serif KR',serif; font-size:1rem; font-weight:700; color:#5a4a3a; margin-bottom:12px; padding-bottom:6px; border-bottom:2px solid #c9a55a; }
/* 한눈에 보기 */
.bti-summary { background:#f5efe4; border:1px solid #d9cdb5; border-radius:14px; padding:16px; margin-bottom:16px; }
.bti-summary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.bti-stat { background:#ece4d4; border-radius:10px; padding:10px 14px; display:flex; flex-direction:column; gap:3px; }
.bti-stat-label { font-size:0.8rem; color:#8a7a6a; font-weight:500; }
.bti-stat-value { font-size:1rem; color:#3a2e22; font-weight:700; }
/* BTI 한눈에 보기 개선 */
.bti-summary-enhanced{padding:14px}
.bti-core-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.bti-core-info.bti-core-compact .bti-core-card{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px}
.bti-core-info.bti-core-compact .bti-core-label{margin-bottom:0;font-size:0.72rem}
.bti-core-info.bti-core-compact .bti-core-value{font-size:1.1rem}
.bti-core-card{background:#fff;border:1px solid #d9cdb5;border-radius:10px;padding:12px 10px;text-align:center}
.bti-core-label{font-size:0.75rem;color:#8a7a6a;margin-bottom:4px}
.bti-core-value{font-size:1.3rem;font-weight:700;color:#3a2e22;font-family:'Noto Serif KR',serif}
.bti-core-sub{font-size:0.72rem;color:#6a5a4a;margin-top:4px}
.bti-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.bti-stat-box{background:#ece4d4;border-radius:8px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.bti-stat-box.strong{background:#e8f5e9;border:1px solid #c8e6c9}
.bti-stat-box.weak{background:#fbe8e8;border:1px solid #f5c6c6}
.bti-stat-box.sipsung{background:#e3f2fd;border:1px solid #bbdefb}
.bti-stat-box .bti-stat-label{font-size:0.72rem;color:#6a5a4a}
.bti-stat-box .bti-stat-value{font-size:1.2rem;font-weight:700;color:#3a2e22}
.bti-stat-pct{font-size:0.7rem;font-weight:500;color:#8a7a6a;margin-top:2px}
.bti-oh-status{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bti-oh-tag{padding:6px 14px;border-radius:20px;font-size:0.85rem;font-weight:500}
.bti-oh-tag.good{background:#e8f5e9;color:#2d8a4e;border:1px solid #c8e6c9}
.bti-oh-tag.bad{background:#fbe8e8;color:#c0392b;border:1px solid #f5c6c6}
@media(max-width:640px){.bti-core-info{grid-template-columns:1fr}.bti-stat-row{grid-template-columns:1fr}}
/* 카드 공통 */
.bti-card { background:#faf6ef; border:1px solid #d9cdb5; border-radius:14px; padding:18px; margin-bottom:16px; }
.bti-card-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bti-card-emoji { font-size:1.8rem; flex-shrink:0; }
.bti-card-name { font-size:1.05rem; color:#3a2e22; font-weight:700; }
.bti-card-sub { font-size:0.82rem; color:#8a7a6a; margin-top:1px; }
.bti-card-desc { font-size:0.88rem; color:#4a3e32; line-height:1.75; margin:0; }
.bti-card-keyword { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.bti-card-keyword span { background:#ece4d4; border:1px solid #d9cdb5; padding:3px 10px; border-radius:20px; font-size:0.76rem; color:#5a4a3a; font-weight:500; }
.bti-tag-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
.bti-tag-item { background:#ece4d4; border-radius:8px; padding:8px 10px; }
.bti-tag-label { display:block; font-size:0.72rem; color:#8a7a6a; margin-bottom:2px; }
.bti-tag-text { font-size:0.82rem; color:#3a2e22; font-weight:500; line-height:1.5; }
.bti-divider { height:1px; background:#d9cdb5; margin:14px 0; }
/* 일간 상세 정보 그리드 */
.bti-detail-grid { display:flex; flex-direction:column; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid #ece4d4; }
.bti-detail-item { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.bti-detail-label { font-size:0.78rem; color:#8a7a6a; font-weight:600; min-width:70px; padding:4px 0; }
.bti-detail-value { font-size:0.85rem; color:#4a3e32; line-height:1.6; flex:1; padding:4px 0; }

/* 고유 개성 박스 */
.bti-unique-box { background:linear-gradient(135deg,#e8f5e9,#f1f8e9); border:1px solid #c8e6c9; border-radius:12px; padding:16px; margin:16px 0; }
.bti-unique-label { display:block; font-size:0.85rem; font-weight:700; color:#388e3c; margin-bottom:10px; }
.bti-unique-text { font-size:0.88rem; color:#2e7d32; line-height:1.75; margin:0; }

/* 고서 해석 박스 */
.bti-classic-box { background:linear-gradient(135deg,#fff8e1,#fff3e0); border:1px solid #ffe0b2; border-radius:12px; padding:16px; margin:16px 0; }
.bti-classic-label { display:block; font-size:0.85rem; font-weight:700; color:#e65100; margin-bottom:10px; }
.bti-classic-text { font-size:0.88rem; color:#bf360c; line-height:1.75; margin:0; font-family:'Noto Serif KR',serif; font-style:italic; }

/* ChatGPT in BTI */
.bti-card-gpt .chatgpt-box { background:#f0ead9; border-color:#d9cdb5; }
.bti-card-gpt .chatgpt-box textarea { color:#3a2e22; }
.bti-gpt-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.bti-gpt-copy { background:#5a4a3a; color:#fff; border:none; border-radius:8px; padding:8px 18px; font-size:0.88rem; font-weight:600; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.bti-gpt-copy:hover { background:#3a2e22; }
.bti-gpt-copy.copied { background:#2d8a4e; }
.bti-gpt-desc { font-size:0.82rem; color:#8a7a6a; line-height:1.6; margin:0 0 12px; }

/* AI에게 물어보기 섹션 */
.bti-card-ai{background:linear-gradient(135deg,#f8f5f0,#f0ebe0);border:1px solid var(--border)}
.bti-ai-desc{font-size:0.85rem;color:var(--text-secondary);line-height:1.6;margin:0 0 16px}
.bti-ai-actions{display:flex;justify-content:center;margin-bottom:12px}
.bti-ai-copy{background:linear-gradient(135deg,#4a5568,#2d3748);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:6px}
.bti-ai-copy:hover{background:linear-gradient(135deg,#2d3748,#1a202c);transform:translateY(-1px)}
.bti-ai-copy.copied{background:#2d8a4e}
.bti-ai-details{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.bti-ai-details summary{padding:12px 16px;cursor:pointer;font-size:0.85rem;font-weight:500;color:var(--text-secondary);list-style:none}
.bti-ai-details summary::before{content:'▶';margin-right:8px;font-size:0.7rem;display:inline-block;transition:transform 0.2s}
.bti-ai-details[open] summary::before{transform:rotate(90deg)}
.bti-ai-details summary:hover{background:var(--bg-warm)}
.bti-ai-details textarea{width:100%;border:none;border-top:1px solid var(--border);padding:12px 16px;font-size:0.8rem;line-height:1.6;background:var(--bg-input);color:var(--text-primary);resize:vertical;font-family:monospace}
.bti-ai-data{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.bti-ai-data textarea{width:100%;border:none;padding:12px 16px;font-size:0.8rem;line-height:1.6;background:var(--bg-input);color:var(--text-primary);resize:vertical;font-family:monospace}

/* 새 공유 섹션 */
.bti-share-card{background:linear-gradient(135deg,#faf8f5,#f5f0e8);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:16px;text-align:center}
.bti-share-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:16px}
.bti-share-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bti-share-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 20px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--text-primary);font-size:0.8rem;font-weight:500;cursor:pointer;transition:all 0.2s;min-width:80px;font-family:'Noto Sans KR',sans-serif}
.bti-share-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.bti-share-icon{font-size:1.4rem}
.bti-share-kakao{border-color:#FEE500}
.bti-share-kakao:hover{background:#FEE500;color:#3C1E1E}
.bti-share-twitter{border-color:#1DA1F2}
.bti-share-twitter:hover{background:#000;color:#fff}
.bti-share-link{border-color:var(--accent)}
.bti-share-link:hover{background:var(--accent);color:#fff}

/* 기존 공유 */
.bti-share-section { text-align:center; margin:24px 0; }
.bti-share-section .btn-share { margin:0; padding:12px 28px; font-size:0.95rem; }

/* ═══ Share Card Styles ═══ */
.share-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9999; display:flex; align-items:center; justify-content:center; flex-direction:column; opacity:0; transition:opacity 0.3s; pointer-events:none; }
.share-overlay.show { opacity:1; pointer-events:auto; }
.share-card-wrap { perspective:1200px; width:300px; height:440px; margin-bottom:20px; cursor:pointer; }
.share-card-inner { position:relative; width:100%; height:100%; transition:transform 0.7s cubic-bezier(0.4,0,0.2,1); transform-style:preserve-3d; }
.share-card-wrap.flipped .share-card-inner { transform:rotateY(180deg); }
.share-card-front, .share-card-back { position:absolute; top:0; left:0; width:100%; height:100%; backface-visibility:hidden; border-radius:16px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,0.4); }
.share-card-back { transform:rotateY(180deg); }
.sc-front { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 24px; position:relative; font-family:'Noto Serif KR','Noto Sans KR',serif; }
.sc-front::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; opacity:0.06; background:repeating-linear-gradient(45deg,transparent,transparent 20px,currentColor 20px,currentColor 20.5px); }
.sc-front .sc-hanja { font-size:3.8rem; font-weight:700; letter-spacing:12px; line-height:1.1; margin-bottom:4px; text-shadow:0 2px 8px rgba(0,0,0,0.15); }
.sc-front .sc-hangul { font-size:1.1rem; letter-spacing:4px; opacity:0.8; margin-bottom:18px; }
.sc-front .sc-animal-emoji { font-size:4.5rem; margin-bottom:16px; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.15)); }
.sc-front .sc-ilju-title { font-size:0.88rem; text-align:center; line-height:1.6; opacity:0.85; max-width:220px; }
.sc-front .sc-divider { width:60px; height:1.5px; margin:14px 0; opacity:0.3; }
.sc-front .sc-brand { position:absolute; bottom:14px; font-size:0.65rem; letter-spacing:2px; opacity:0.4; }
.sc-front .sc-num { position:absolute; bottom:14px; left:18px; font-size:0.7rem; opacity:0.35; font-style:italic; }
.sc-front .sc-element-badge { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; border:1.5px solid rgba(255,255,255,0.3); }
.sc-back { width:100%; height:100%; background:#f9f5ef; display:flex; flex-direction:column; padding:28px 24px; font-family:'Noto Sans KR',sans-serif; }
.sc-back .sc-back-header { text-align:center; margin-bottom:16px; }
.sc-back .sc-back-icon { font-size:1.2rem; color:#8b6914; margin-bottom:4px; }
.sc-back .sc-back-title { font-size:0.82rem; color:#8b6914; font-weight:600; letter-spacing:3px; }
.sc-back .sc-back-section { margin-bottom:12px; }
.sc-back .sc-back-label { font-size:0.68rem; color:#9a8a7a; letter-spacing:1.5px; margin-bottom:5px; font-weight:500; }
.sc-back .sc-back-value { font-size:1rem; color:#3a3020; font-weight:600; line-height:1.5; }
.sc-back .sc-back-sub { font-size:0.78rem; color:#6a5a4a; line-height:1.5; margin-top:3px; }
.sc-back .sc-back-divider { width:100%; height:1px; background:linear-gradient(90deg,transparent,#d4c4a4,transparent); margin:10px 0; }
.sc-back .sc-back-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.sc-back .sc-back-tag { padding:3px 10px; border-radius:12px; font-size:0.72rem; font-weight:500; background:#eee6d6; color:#6a5a3a; }
.sc-back .sc-back-brand { text-align:center; margin-top:auto; padding-top:10px; font-size:0.65rem; color:#b0a090; letter-spacing:2px; }
.sc-back .sc-oheng-bar { display:flex; gap:3px; margin-top:6px; height:22px; border-radius:6px; overflow:hidden; }
.sc-back .sc-oheng-seg { display:flex; align-items:center; justify-content:center; font-size:0.6rem; font-weight:600; color:#fff; min-width:16px; }
.share-btns { display:flex; gap:12px; margin-bottom:12px; }
.share-btn-item { padding:10px 20px; border:none; border-radius:12px; font-size:0.85rem; font-weight:600; cursor:pointer; color:#fff; font-family:'Noto Sans KR',sans-serif; display:flex; align-items:center; gap:6px; transition:transform 0.15s; }
.share-btn-item:hover { transform:scale(1.05); }
.share-btn-save { background:linear-gradient(135deg,#4a6a8c,#5a8ab5); }
.share-btn-close { background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.3); font-size:0.8rem; padding:8px 16px; }
.share-hint { color:rgba(255,255,255,0.6); font-size:0.75rem; margin-bottom:8px; }

/* ═══ 글로벌 사주 계산기 ═══ */
.global-calc{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.global-calc-header{background:var(--bg-warm);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.global-calc-label{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:var(--text-primary);letter-spacing:0.5px;font-weight:600;margin:0;min-width:120px}
.global-calc-label svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2}
.global-calc-label span{opacity:0.6;font-size:0.75rem;font-weight:400;margin-left:4px;color:var(--text-dim)}
.global-calc-center-label{font-size:1.3rem;font-weight:700;color:var(--accent);text-align:center;flex:1;display:flex;align-items:center;justify-content:center;gap:8px}
.person-icon{font-size:1.2rem}
.person-name-input{background:transparent;border:none;border-bottom:2px solid transparent;font-size:1.1rem;font-weight:700;color:var(--accent);text-align:center;width:80px;padding:2px 4px;font-family:'Noto Sans KR',sans-serif;transition:all 0.2s}
.person-name-input:focus{outline:none;border-bottom-color:var(--accent)}
.person-name-input:hover{border-bottom-color:rgba(184,134,11,0.3)}
.global-calc .form-row{justify-content:center}
.global-calc-body{padding:20px;overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s ease}
.gunghap-calc{margin-bottom:16px}
.celeb-picker-tab{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-secondary);cursor:pointer;font-size:0.85rem;transition:all 0.2s}
.celeb-picker-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.celeb-picker-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.celeb-picker-item:hover{background:var(--bg-warm)}
.celeb-picker-item .cpi-name{font-weight:600;color:var(--text-primary)}
.celeb-picker-item .cpi-info{font-size:0.8rem;color:var(--text-dim)}
.celeb-picker-item .cpi-note{font-size:0.75rem;color:var(--text-secondary);margin-left:8px}
.calc-section{display:flex;flex-direction:column;gap:6px;align-items:center}
.calc-section-label{font-size:0.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;font-weight:500}
.calc-divider{width:1px;height:50px;background:linear-gradient(180deg,transparent,var(--border),transparent);margin:0 8px}
@media(max-width:600px){
  .global-calc-header{padding:10px 14px}
  .global-calc-label{font-size:0.8rem}
  .global-calc-label span{display:none}
  .global-calc-body{padding:14px}
  .form-row{flex-direction:column;gap:14px}
  .calc-section{width:100%}
  .calc-section>div{justify-content:center}
  .calc-divider{display:none}
  .calc-btn-row{margin-top:8px}
}
@media(max-width:900px){
  .container{padding-right:20px!important}
  .sidebar{display:none}
  .tab-btn[data-tab="today"]{display:flex!important}
}

/* Tabs */
.tab-nav{display:flex;justify-content:center;margin-bottom:24px;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;background:var(--bg-card);border-radius:12px;padding:4px;box-shadow:inset 0 2px 4px rgba(0,0,0,0.06)}
.tab-nav::-webkit-scrollbar{display:none}
.tab-btn{flex:1;padding:12px 8px;font-size:0.82rem;font-weight:500;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);font-family:'Noto Sans KR',sans-serif;text-align:center;white-space:nowrap;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:8px;position:relative}
.tab-btn .tab-icon{font-size:1.4rem;line-height:1;transition:transform 0.3s}
.tab-btn:first-child{border-radius:8px}
.tab-btn:last-child{border-radius:8px}
.tab-btn+.tab-btn{border-left:none}
.tab-btn.active{background:linear-gradient(135deg, var(--accent) 0%, #e6b422 100%);color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(196,150,15,0.35)}
.tab-btn.active .tab-icon{transform:scale(1.1)}
.tab-btn:not(.active):hover{background:rgba(196,150,15,0.1);color:var(--accent)}
.tab-btn:not(.active):hover .tab-icon{transform:translateY(-2px)}
.tab-panel{display:none}.tab-panel.active{display:block}
/* 연예인 DB */
.db-type-toggle{display:flex;gap:0;margin-bottom:12px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg-input);max-width:320px}
.db-type-btn{flex:1;padding:12px 24px;font-size:0.9rem;font-weight:600;font-family:'Noto Sans KR',sans-serif;cursor:pointer;border:none;background:transparent;color:var(--text-dim);transition:all 0.2s;text-align:center;white-space:nowrap}
.db-type-btn.active{background:var(--accent);color:#fff}
.db-type-btn:not(.active):hover{background:var(--bg-warm);color:var(--text-primary)}
.db-type-btn .db-type-count{font-size:0.72rem;font-weight:400;margin-left:3px;opacity:0.8}
.db-toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.db-search{flex:1;min-width:180px;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;font-size:0.95rem;color:var(--text-primary);font-family:'Noto Sans KR',sans-serif;outline:none;transition:border-color 0.2s}
.db-search:focus{border-color:var(--accent)}
.db-search::placeholder{color:#ccc4b0}
.db-filter-btn{padding:8px 16px;font-size:0.82rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all 0.2s;font-family:'Noto Sans KR',sans-serif;white-space:nowrap}
.db-filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.db-filter-btn:not(.active):hover{background:var(--bg-warm)}
.db-add-btn{padding:8px 16px;font-size:0.82rem;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;font-weight:600;font-family:'Noto Sans KR',sans-serif;transition:all 0.2s;white-space:nowrap}
.db-add-btn:hover{background:#a07508}
.db-admin-btn{padding:8px 10px;font-size:0.82rem;border:1px solid #888;border-radius:6px;background:#f5f5f5;cursor:pointer;transition:all 0.2s}
.db-admin-btn:hover{background:#e0e0e0}
.db-admin-btn.active{background:#4CAF50;color:#fff;border-color:#4CAF50}
.db-count{font-size:0.78rem;color:var(--text-dim);margin-bottom:10px}
.db-list{display:flex;flex-direction:column;gap:6px}
.db-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px 16px;cursor:pointer;transition:all 0.15s}
.db-item:hover{box-shadow:var(--shadow-lg);border-color:var(--border-accent)}
.db-item-main{display:flex;align-items:center;gap:14px}
.db-item-info{width:25%;flex-shrink:0;min-width:90px;overflow:hidden}
.db-item-right{flex-shrink:0;display:flex;align-items:center;gap:10px}
.db-item-name{font-weight:700;font-size:0.95rem}
.db-item-note{font-weight:400;font-size:0.72rem;color:var(--accent);background:var(--bg-warm);padding:1px 7px;border-radius:10px;margin-left:6px;vertical-align:middle}
.db-item-meta{font-size:0.78rem;color:var(--text-dim)}
.db-item-pillars{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:0;font-family:'Noto Serif KR',serif;min-width:160px}
.db-item-pillars .sc{text-align:center;font-weight:700;font-size:1rem;padding:4px 4px;line-height:1.3;border-bottom:1px solid var(--border);white-space:nowrap}
.db-item-pillars .bc{text-align:center;font-weight:700;font-size:1rem;padding:4px 4px;line-height:1.3;white-space:nowrap}
.db-item-pillars .sc.day-hl,.db-item-pillars .bc.day-hl{background:rgba(180,150,80,0.13)}
.db-item-pillars .empty-cell{text-align:center;font-size:0.75rem;color:#ddd4c0;padding:4px 4px;line-height:1.3}
.db-item-daeun{display:grid;grid-template-columns:auto auto;gap:6px 6px;align-items:center;font-family:'Noto Serif KR',serif;border-left:1px dashed var(--border);padding-left:9px}
.db-item-daeun .du-tag{font-size:0.72rem;color:var(--text-dim);font-weight:600}
.db-item-daeun .du-s{font-weight:700;font-size:1rem;line-height:1.3;white-space:nowrap}
.db-item-daeun .du-age{font-size:0.72rem;color:var(--text-dim);font-weight:500}
.db-item-daeun .du-b{font-weight:700;font-size:1rem;line-height:1.3;white-space:nowrap}
.db-sort-wrap{display:flex;flex-direction:column;gap:0;margin-bottom:10px}
.db-sort-chip{display:inline-flex;align-items:center;gap:3px;padding:4px 10px;font-size:0.75rem;border-radius:14px;cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:all 0.15s;border:1px solid var(--border);background:var(--bg-warm);color:var(--text-secondary);user-select:none;white-space:nowrap}
.db-sort-chip:hover{border-color:var(--accent);color:var(--accent)}
.db-sort-chip.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.db-sort-chip.active:hover{background:#a07508}
.db-sort-chip .pri{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,0.3);font-size:0.62rem;font-weight:800;margin-right:1px}
.db-sort-chip .dir{font-size:0.7rem;margin-left:1px}
.db-sort-chip .rm{margin-left:2px;font-size:0.68rem;opacity:0.7;font-weight:700}
.db-sort-chip .rm:hover{opacity:1}
.db-sort-active{display:flex;gap:5px;flex-wrap:wrap;align-items:center;padding:6px 0;font-size:0.75rem;color:var(--text-dim)}
.db-sort-active-label{font-size:0.72rem;color:var(--text-dim);margin-right:2px}
.db-sort-active-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;font-size:0.72rem;border-radius:10px;background:#e8dcc8;color:#6b5a3e;font-weight:600}
.db-filter-rows{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}
.db-filter-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.db-filter-row-label{font-size:0.7rem;color:var(--text-dim);font-weight:600;min-width:32px;flex-shrink:0}
.db-fchip{display:inline-flex;align-items:center;gap:1px;padding:3px 7px;font-size:0.73rem;border-radius:12px;cursor:pointer;font-family:'Noto Serif KR',serif;transition:all 0.15s;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);user-select:none;white-space:nowrap;font-weight:600}
.db-fchip:hover{border-color:var(--accent);color:var(--accent)}
.db-fchip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.db-fchip.on:hover{background:#a07508}
.db-fchip .fhj{opacity:0.7;font-size:0.68rem}
.db-item-actions{display:flex;gap:6px}
.db-item-btn{padding:5px 14px;font-size:0.75rem;border-radius:5px;cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:all 0.15s;font-weight:600}
.db-item-btn.edit{border:1px solid var(--accent);background:#f5e6c0;color:#8a6d1b;font-weight:700}
.db-item-btn.edit:hover{background:var(--accent);color:#fff}
.db-item-btn.del{border:1px solid #e74c3c;background:#fef2f2;color:#c0392b}
.db-item-btn.del:hover{background:#e74c3c;color:#fff}
.db-empty{text-align:center;padding:48px 20px;color:var(--text-dim);font-size:0.95rem}
.db-empty-icon{font-size:2rem;margin-bottom:8px;opacity:0.4}
/* 추가/편집 모달 */
.db-modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.35);z-index:100;align-items:center;justify-content:center}
.db-modal-overlay.show{display:flex}
.db-modal{background:var(--bg-card);border-radius:12px;padding:28px 32px;width:90%;max-width:400px;box-shadow:0 8px 40px rgba(0,0,0,0.2)}
.db-modal h3{font-family:'Noto Serif KR',serif;font-size:1.1rem;font-weight:700;color:var(--accent);margin-bottom:20px}
.db-modal-row{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.db-modal-row label.fl{min-width:52px;font-size:0.82rem;font-weight:600;color:var(--text-secondary);flex-shrink:0}
.db-modal-row input,.db-modal-row select{padding:9px 11px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);font-size:0.88rem;color:var(--text-primary);font-family:'Noto Sans KR',sans-serif;outline:none;transition:border-color 0.2s}
.db-modal-row input:focus,.db-modal-row select:focus{border-color:var(--accent)}
.db-modal-row input::placeholder{color:#ccc4b0}
.db-modal-row .sep{font-size:0.9rem;color:var(--text-dim);flex-shrink:0;text-align:center;width:12px}
.db-modal-row input.f-full{flex:1}
.db-modal-row input.f-year{width:80px;flex:none}
.db-modal-row input.f-md{width:52px;flex:none;text-align:center}
.db-modal-row input.f-hm{width:64px;flex:none;text-align:center}
.db-modal-row select.f-gender{width:64px;flex:none}
.db-modal-sub{font-size:0.7rem;color:var(--text-dim);margin-left:60px;margin-top:-8px;margin-bottom:10px}
.db-modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.db-modal-btns button{padding:9px 24px;border-radius:6px;font-size:0.88rem;cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:all 0.15s}
.db-modal-cancel{border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary)}
.db-modal-cancel:hover{background:var(--bg-warm)}
.db-modal-save{border:none;background:var(--accent);color:#fff;font-weight:700}
.db-modal-save:hover{background:#a07508}
@media(max-width:640px){.db-item{grid-template-columns:1fr;gap:6px}.db-item-actions{justify-content:flex-end}.db-modal{padding:22px 18px;width:95%}.db-modal-row label.fl{min-width:46px;font-size:0.78rem}.db-modal-sub{margin-left:54px}}
/* 궁합 inputs */
.gh-inputs{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-bottom:20px;align-items:start}
.gh-person{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 14px;text-align:center}
.gh-person .section-title{margin-bottom:10px}
.gh-vs{display:flex;align-items:center;justify-content:center;padding:0 8px;font-family:'Noto Serif KR',serif;font-size:1rem;font-weight:900;color:var(--accent)}
.gh-form-row{display:flex;gap:4px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.gh-input-group{display:flex;flex-direction:column;align-items:center}
.gh-input-group input{width:48px;text-align:center;padding:7px 2px;font-size:0.9rem;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:'Noto Sans KR',sans-serif;outline:none;transition:border-color 0.2s}
.gh-input-group input:focus{border-color:var(--accent)}
.gh-input-group input::placeholder{color:#ddd4c0}
.gh-input-group label{font-size:0.65rem;color:var(--text-dim);margin-top:2px}
.gh-gender-row{display:flex;gap:3px;justify-content:center;margin-top:10px}
.gh-gender-btn{padding:6px 14px;font-size:0.78rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all 0.2s;font-family:'Noto Sans KR',sans-serif}
.gh-gender-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.gh-calc-row{text-align:center;margin-bottom:28px}
/* 궁합 results */
.gh-results{opacity:0;transition:opacity 0.3s}.gh-results.show{opacity:1}
.gh-pillars-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-bottom:24px;align-items:start}
.gh-side{text-align:center}
.gh-side .section-title{margin-bottom:4px}
.gh-side-info{font-size:0.68rem;color:var(--text-dim);margin-bottom:6px}
.gh-pillars{display:flex;gap:4px;justify-content:center}
.gh-pillar{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 5px;min-width:52px;text-align:center}
.gh-pillar .gp-label{font-size:0.65rem;color:var(--text-dim);margin-bottom:3px;letter-spacing:0.5px}
.gh-pillar .gp-char{font-family:'Noto Serif KR',serif;font-weight:900;font-size:1.2rem}
.gh-pillar .gp-cn{font-size:0.7rem;font-weight:400;color:#b8a888}
.gh-pillar .gp-div{height:1px;background:var(--border);margin:4px 0}
.gh-pillar .gp-sub{font-size:0.6rem;color:var(--text-dim);margin-top:2px}

/* 궁합 상세 사주명식 */
.gh-pillars-detail{display:flex;gap:5px;justify-content:center}
.gh-pillar-detail{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:10px 6px;min-width:60px;text-align:center}
.gh-pillar-detail.day{border-color:var(--accent);border-width:2px;background:linear-gradient(180deg,#fff8e8,var(--bg-card))}
.gh-pillar-detail.empty{opacity:0.5}
.ghp-label{font-size:0.78rem;color:var(--text-secondary);margin-bottom:5px;font-weight:600}
.ghp-tg{font-size:0.8rem;color:var(--text-dim);margin-bottom:3px;font-weight:500}
.ghp-stem,.ghp-branch{font-family:'Noto Serif KR',serif;line-height:1.2}
.ghp-hanja{display:block;font-size:1.8rem;font-weight:700}
.ghp-hangul{display:block;font-size:0.85rem;font-weight:500;opacity:0.9}
.ghp-yy{font-size:0.72rem;color:var(--text-dim);margin:3px 0}
.ghp-divider{height:1px;background:var(--border);margin:5px 0}
.ghp-tg-branch{font-size:0.75rem;color:var(--text-secondary);margin-top:3px;font-weight:500}
.gh-score-center{text-align:center;padding:16px 0 20px}
.gh-score-num{font-family:'Noto Serif KR',serif;font-size:2.8rem;font-weight:900;line-height:1}
.gh-score-label{font-size:0.75rem;color:var(--text-dim);margin-top:4px}
.compat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.compat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.cc-title{font-family:'Noto Serif KR',serif;font-weight:700;font-size:0.85rem;margin-bottom:8px;display:flex;justify-content:space-between}
.cc-score{font-size:0.75rem;font-weight:700;color:var(--accent)}
.cc-row{font-size:0.8rem;color:var(--text-secondary);margin-bottom:4px;line-height:1.6}
.cc-tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:0.72rem;font-weight:600;margin:1px}
.cc-good{background:#e8f5e9;color:#2d8a4e}.cc-warn{background:#fff3e0;color:#e65100}
.cc-bad{background:#fce4ec;color:#c0392b}.cc-neutral{background:#f0ead9;color:#6e5f49}
.compat-meter{height:5px;background:var(--border);border-radius:3px;margin-top:8px;overflow:hidden}
.compat-meter-fill{height:100%;border-radius:3px;transition:width 0.5s}
@media(max-width:640px){.gh-inputs{grid-template-columns:1fr}.gh-vs{padding:8px 0}.gh-pillars-wrap{grid-template-columns:1fr}.gh-pillars-wrap .gh-vs{padding:6px 0}.compat-grid{grid-template-columns:1fr}.gh-input-group input{width:44px}}
/* 상담 CTA */
.cta-consult{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;margin-top:28px;text-align:center}
.cta-consult-q{font-family:'Noto Serif KR',serif;font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.cta-consult-sub{font-size:0.75rem;color:var(--text-dim);margin-bottom:18px}
.cta-tiers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.cta-tier{border:1px solid var(--border);border-radius:10px;padding:16px 10px 14px;cursor:pointer;transition:all 0.2s;text-decoration:none;display:block;position:relative}
.cta-tier:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,0.06);transform:translateY(-2px)}
.cta-tier-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:0.58rem;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap}
.cta-tier-icon{font-size:1.5rem;margin-bottom:6px}
.cta-tier-name{font-family:'Noto Serif KR',serif;font-weight:700;font-size:0.85rem;color:var(--text-primary);margin-bottom:3px}
.cta-tier-desc{font-size:0.68rem;color:var(--text-dim);line-height:1.4;margin-bottom:8px}
.cta-tier-price{font-weight:700;font-size:0.82rem}
.cta-tier-unit{font-size:0.62rem;color:var(--text-dim);font-weight:400}
.cta-footer{font-size:0.65rem;color:var(--text-dim);margin-top:14px;line-height:1.5}
@media(max-width:640px){.cta-tiers{grid-template-columns:1fr}.cta-tier{padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:0 12px;align-items:center;text-align:left}.cta-tier-badge{position:static;transform:none;grid-column:1/-1;justify-self:start;margin-bottom:6px}.cta-tier-icon{font-size:1.3rem;margin:0;grid-row:span 2}.cta-tier-name{margin:0;font-size:0.82rem}.cta-tier-desc{margin:0;grid-column:2}.cta-tier-price{grid-column:3;grid-row:2/4;text-align:right}}
/* 최고 조합 찾기 */
.bm-banner{text-align:center;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px}
.bm-banner-range{font-family:'Noto Serif KR',serif;font-size:1.5rem;font-weight:900}
.bm-banner-sub{font-size:0.72rem;color:var(--text-dim);margin-top:4px}
.bm-match-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:16px}
.bm-match{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px}
.bm-match-title{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1rem;margin-bottom:4px}
.bm-match-score{font-family:'Noto Serif KR',serif;font-size:2.4rem;font-weight:900;text-align:center;margin:4px 0;line-height:1}
.bm-match-detail{font-size:0.78rem;color:var(--text-secondary);margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bm-detail-chip{background:var(--bg-input);padding:3px 8px;border-radius:5px;font-size:0.72rem}
.bm-distrib{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px}
.bm-distrib-title{font-family:'Noto Serif KR',serif;font-weight:700;font-size:0.92rem;margin-bottom:12px}
.bm-distrib-bars{display:flex;align-items:flex-end;gap:3px;height:80px;padding-top:20px;padding-bottom:22px}
.bm-dbar{flex:1;border-radius:3px 3px 0 0;min-width:0;position:relative;transition:height 0.3s}
.bm-dbar-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:0.5rem;color:var(--text-dim);white-space:nowrap}
.bm-dbar-count{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:0.58rem;color:var(--text-secondary);white-space:nowrap}
.bm-rank{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px}
.bm-rank-title{font-family:'Noto Serif KR',serif;font-weight:700;font-size:0.92rem;margin-bottom:12px}
.bm-rank-list{list-style:none;padding:0;margin:0}
.bm-rank-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:0.82rem}
.bm-rank-item:last-child{border-bottom:none}
.bm-rank-num{font-weight:700;color:var(--accent);min-width:22px;text-align:center;font-size:0.78rem}
.bm-rank-pillar{font-family:'Noto Serif KR',serif;font-weight:700;font-size:0.95rem;min-width:36px}
.bm-rank-el{font-size:0.68rem;color:var(--text-dim);min-width:40px}
.bm-rank-bar-wrap{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.bm-rank-bar{height:100%;border-radius:3px}
.bm-rank-score{font-weight:600;min-width:32px;text-align:right;font-size:0.78rem}
.bm-loading{text-align:center;padding:40px 0;color:var(--text-dim);font-size:0.9rem}
.bm-loading .spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:bmSpin 0.6s linear infinite;margin-right:8px;vertical-align:middle}
@keyframes bmSpin{to{transform:rotate(360deg)}}
.chatgpt-section { margin-bottom:28px; }
.chatgpt-box { position:relative; background:#fafaf7; border:1px solid var(--border); border-radius:12px; padding:16px; }
.chatgpt-box textarea { width:100%; min-height:300px; max-height:600px; background:transparent; border:none; font-family:'Noto Sans KR',monospace; font-size:0.78rem; line-height:1.7; color:var(--text-primary); resize:vertical; outline:none; }
.chatgpt-copy { position:absolute; top:10px; right:10px; background:var(--accent); color:#fff; border:none; border-radius:6px; padding:5px 14px; font-size:0.75rem; cursor:pointer; transition:all 0.2s; }
.chatgpt-copy:hover { background:#c5a028; }
.chatgpt-copy.copied { background:#2d8a4e; }
.db-save-section { margin-top:16px; text-align:center; padding:12px 0 4px; }
.btn-save-db { padding:10px 18px; font-size:0.88rem; font-weight:600; background:linear-gradient(135deg,#4a7c59,#5a9c6a); color:#fff; border:none; border-radius:10px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; box-shadow:0 2px 8px rgba(74,124,89,0.3); transition:all 0.2s; margin-left:6px; }
.btn-save-db:hover { background:linear-gradient(135deg,#3a6c49,#4a8c5a); transform:translateY(-1px); box-shadow:0 4px 12px rgba(74,124,89,0.4); }
.btn-share { padding:10px 18px; font-size:0.88rem; font-weight:600; background:linear-gradient(135deg,#4a6a8c,#5a8ab5); color:#fff; border:none; border-radius:10px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; box-shadow:0 2px 8px rgba(74,106,140,0.3); transition:all 0.2s; margin-left:6px; }
.btn-share:hover { background:linear-gradient(135deg,#3a5a7c,#4a7aa5); transform:translateY(-1px); box-shadow:0 4px 12px rgba(74,106,140,0.4); }
/* 오늘의 운세 */
.today-ganji-card { text-align:center; background:#faf6ef; border:1px solid #d9cdb5; border-radius:16px; padding:28px 20px 20px; margin-bottom:18px; }
.today-ganji-top { margin-bottom:14px; }
.today-ganji-chars { font-family:'Noto Serif KR',serif; font-size:3.2rem; font-weight:900; letter-spacing:8px; line-height:1.2; }
.today-ganji-hanja { font-family:'Noto Serif KR',serif; font-size:1.6rem; font-weight:500; letter-spacing:6px; margin-top:2px; }
.today-ganji-oh { font-size:0.82rem; color:#8a7a6a; margin-top:6px; }
.today-tg-badge { display:inline-block; background:#ece4d4; border:1px solid #d9cdb5; border-radius:20px; padding:6px 18px; font-size:1rem; font-weight:700; color:#3a2e22; margin:10px 0 6px; }
.today-title { font-family:'Noto Serif KR',serif; font-size:1.15rem; color:#5a4a3a; font-weight:600; }

.today-luck-section { background:#faf6ef; border:1px solid #d9cdb5; border-radius:14px; padding:20px; margin-bottom:18px; }
.today-luck-row { display:flex; align-items:center; gap:14px; margin-top:10px; }
.today-luck-bar-bg { flex:1; height:18px; background:#ece4d4; border-radius:9px; overflow:hidden; }
.today-luck-bar-fill { height:100%; border-radius:9px; transition:width 0.8s cubic-bezier(.22,1,.36,1); }
.today-luck-score { font-size:1rem; font-weight:700; white-space:nowrap; min-width:80px; text-align:right; }

.today-category { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid #ece4d4; }
.today-category:last-child { border-bottom:none; }
.today-cat-icon { font-size:1.3rem; flex-shrink:0; margin-top:2px; }
.today-cat-label { font-size:0.85rem; font-weight:700; color:#3a2e22; display:block; margin-bottom:4px; }
.today-cat-text { font-size:0.88rem; color:#5a4a3a; line-height:1.6; margin:0; }

/* Footer */
.site-footer { margin-top:40px; padding:24px 16px 20px; border-top:1px solid rgba(0,0,0,0.12); text-align:center; background:transparent; }
.footer-info { font-size:0.78rem; color:#5a4a3a; line-height:2; }
.footer-sep { margin:0 6px; opacity:0.3; color:#5a4a3a; }
.footer-link { color:#3a2e22; text-decoration:none; font-weight:500; }
.footer-link:hover { color:#8a6a3a; text-decoration:underline; }
.footer-social { display:flex; justify-content:center; gap:12px; margin:16px 0 12px; }
.social-circle { width:38px; height:38px; border-radius:50%; background:#ece4d4; border:1px solid #d9cdb5; display:flex; align-items:center; justify-content:center; color:#5a4a3a; transition:all 0.2s; text-decoration:none; }
.social-circle:hover { background:#c9a55a; color:#fff; border-color:#c9a55a; }
.social-circle svg { width:18px; height:18px; }
.footer-copy { font-size:0.7rem; color:#8a7a6a; }
@media(max-width:640px){
  .footer-info { font-size:0.72rem; }
  .footer-info .footer-sep:nth-of-type(2) { display:none; }
  .footer-info span:nth-of-type(3)::before { content:''; display:block; }
}

/* ═══ Share Flip Card ═══ */
.share-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;transition:opacity 0.3s;pointer-events:none;}
.share-overlay.show{opacity:1;pointer-events:auto;}
.share-card-wrap{perspective:1200px;width:300px;height:440px;margin-bottom:20px;cursor:pointer;}
.share-card-inner{position:relative;width:100%;height:100%;transition:transform 0.7s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d;}
.share-card-wrap.flipped .share-card-inner{transform:rotateY(180deg);}
.share-card-front,.share-card-back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.4);}
.share-card-back{transform:rotateY(180deg);}

/* Front card */
.sc-front{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;position:relative;font-family:'Noto Serif KR','Noto Sans KR',serif;}
.sc-front::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.06;background:repeating-linear-gradient(45deg,transparent,transparent 20px,currentColor 20px,currentColor 20.5px);}
.sc-front .sc-hanja{font-size:3.8rem;font-weight:700;letter-spacing:12px;line-height:1.1;margin-bottom:4px;text-shadow:0 2px 8px rgba(0,0,0,0.15);}
.sc-front .sc-hangul{font-size:1.1rem;letter-spacing:4px;opacity:0.8;margin-bottom:18px;}
.sc-front .sc-animal-emoji{font-size:4.5rem;margin-bottom:16px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.15));}
.sc-front .sc-ilju-title{font-size:0.88rem;text-align:center;line-height:1.6;opacity:0.85;max-width:220px;}
.sc-front .sc-divider{width:60px;height:1.5px;margin:14px 0;opacity:0.3;}
.sc-front .sc-brand{position:absolute;bottom:14px;font-size:0.65rem;letter-spacing:2px;opacity:0.4;}
.sc-front .sc-num{position:absolute;bottom:14px;left:18px;font-size:0.7rem;opacity:0.35;font-style:italic;}
.sc-front .sc-element-badge{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:700;border:1.5px solid rgba(255,255,255,0.3);}

/* Back card */
.sc-back{width:100%;height:100%;background:#f9f5ef;display:flex;flex-direction:column;padding:28px 24px;font-family:'Noto Sans KR',sans-serif;}
.sc-back .sc-back-header{text-align:center;margin-bottom:16px;}
.sc-back .sc-back-icon{font-size:1.2rem;color:#8b6914;margin-bottom:4px;}
.sc-back .sc-back-title{font-size:0.82rem;color:#8b6914;font-weight:600;letter-spacing:3px;}
.sc-back .sc-back-section{margin-bottom:12px;}
.sc-back .sc-back-label{font-size:0.68rem;color:#9a8a7a;letter-spacing:1.5px;margin-bottom:5px;font-weight:500;}
.sc-back .sc-back-value{font-size:1rem;color:#3a3020;font-weight:600;line-height:1.5;}
.sc-back .sc-back-sub{font-size:0.78rem;color:#6a5a4a;line-height:1.5;margin-top:3px;}
.sc-back .sc-back-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,#d4c4a4,transparent);margin:10px 0;}
.sc-back .sc-back-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.sc-back .sc-back-tag{padding:3px 10px;border-radius:12px;font-size:0.72rem;font-weight:500;background:#eee6d6;color:#6a5a3a;}
.sc-back .sc-back-brand{text-align:center;margin-top:auto;padding-top:10px;font-size:0.65rem;color:#b0a090;letter-spacing:2px;}
.sc-back .sc-oheng-bar{display:flex;gap:3px;margin-top:6px;height:22px;border-radius:6px;overflow:hidden;}
.sc-back .sc-oheng-seg{display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:600;color:#fff;min-width:16px;}

/* Share buttons */
.share-btns{display:flex;gap:12px;margin-bottom:12px;}
.share-btn-item{padding:10px 20px;border:none;border-radius:12px;font-size:0.85rem;font-weight:600;cursor:pointer;color:#fff;font-family:'Noto Sans KR',sans-serif;display:flex;align-items:center;gap:6px;transition:transform 0.15s;}
.share-btn-item:hover{transform:scale(1.05);}
.share-btn-save{background:linear-gradient(135deg,#4a6a8c,#5a8ab5);}
.share-btn-kakao{background:#FEE500;color:#3C1E1E;}
.share-btn-insta{background:linear-gradient(135deg,#833AB4,#FD1D1D,#F77737);}
.share-btn-close{background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.3);font-size:0.8rem;padding:8px 16px;}
.share-hint{color:rgba(255,255,255,0.6);font-size:0.75rem;margin-bottom:8px;}

/* ═══ Modal Styles ═══ */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}
.modal.active{display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}
.modal-content{position:relative;background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:400px;width:90%;max-height:90vh;overflow:auto;z-index:1001}
.modal-content.modal-sm{max-width:320px}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-header h3{margin:0;font-size:1.1rem;font-weight:700;color:var(--text-primary)}
.modal-close{background:none;border:none;font-size:1.5rem;color:var(--text-dim);cursor:pointer;padding:0;line-height:1}
.modal-close:hover{color:var(--text-primary)}
.modal-body{padding:20px}
.modal-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.btn-cancel{padding:10px 20px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-secondary);cursor:pointer;font-family:'Noto Sans KR',sans-serif;font-size:0.9rem;transition:all 0.2s}
.btn-cancel:hover{background:var(--bg-warm)}
.btn-confirm{padding:10px 20px;border:none;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;font-family:'Noto Sans KR',sans-serif;font-size:0.9rem;font-weight:600;transition:all 0.2s}
.btn-confirm:hover{background:#a07508}
.btn-confirm.btn-danger{background:#e74c3c}
.btn-confirm.btn-danger:hover{background:#c0392b}

/* ═══ Notification Styles ═══ */
.notification-container{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px}
.notification{padding:14px 20px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;animation:notifSlideIn 0.3s ease}
.notification-error{border-color:#e74c3c;background:#fef2f2}
.notification-success{border-color:#2d8a4e;background:#e8f5e9}
.notification-message{flex:1;font-size:0.9rem;color:var(--text-primary)}
.notification-close{background:none;border:none;font-size:1.2rem;color:var(--text-dim);cursor:pointer;padding:0}
@keyframes notifSlideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ═══ DB Controls ═══ */
/* 인물위키 안내 */
.wiki-notice{background:linear-gradient(135deg,#e3f2fd 0%,#f3e5f5 100%);border-radius:10px;padding:12px 16px;margin-bottom:14px;border:1px solid #e1bee7}
.wiki-notice p{margin:0;font-size:0.85rem;color:#5e35b1}
.wiki-notice-sub{font-size:0.75rem!important;color:#7e57c2!important;margin-top:6px!important;line-height:1.6}
/* 기여자 등급 뱃지 */
.db-rank-badge{font-size:0.7rem;padding:2px 8px;border-radius:10px;color:#fff;font-weight:600;margin-left:6px}
.db-contrib-count{font-size:0.7rem;color:#666;margin-left:6px}
.db-controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;align-items:center}
.db-search-wrapper{position:relative;flex:1;min-width:200px}
.db-search-wrapper input{width:100%;padding:10px 14px 10px 40px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);font-size:0.9rem;color:var(--text-primary);outline:none;transition:border-color 0.2s}
.db-search-wrapper input:focus{border-color:var(--accent)}
.db-search-wrapper .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--text-dim);fill:none;stroke-width:2}
.db-stats{font-size:0.82rem;color:var(--text-dim);margin-bottom:12px}
.db-actions{display:flex;gap:8px}
.btn-db-action{padding:8px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-secondary);cursor:pointer;font-size:0.82rem;font-family:'Noto Sans KR',sans-serif;transition:all 0.2s;display:flex;align-items:center;gap:4px}
.btn-db-action:hover{background:var(--bg-warm);border-color:var(--accent)}
.db-pagination{display:flex;justify-content:center;gap:6px;margin-top:16px}

/* ═══ Gunghap Styles ═══ */
/* 궁합 탭 상단 헤더 (사주 계산기 위에 표시) */
/* 탭별 상단 헤더 카드 */
.tab-top-header{text-align:center;margin-bottom:16px;padding:18px 24px;background:linear-gradient(135deg,#fff8f0,#fef5ec);border:1px solid var(--accent);border-radius:var(--radius)}
.tab-top-header h2{font-family:'Noto Serif KR',serif;font-size:1.3rem;font-weight:700;color:var(--text-primary);margin:0 0 8px}
.tab-top-header p{font-size:0.85rem;color:var(--text-secondary);margin:0;line-height:1.6}
#bti-top-header{background:linear-gradient(135deg,#f0f4ff,#e8f0ff);border-color:#a8b8d8}
#myeongshik-top-header{background:linear-gradient(135deg,#f5f0e8,#efe8dc);border-color:#c8b8a0}
#gunghap-top-header{background:linear-gradient(135deg,#fff5e6,#fef3e8);border-color:var(--accent)}

/* 상대방 계산기 스타일 */
.gunghap-partner-calc{margin-bottom:20px}
.gunghap-partner-calc .global-calc-header{background:linear-gradient(135deg,#e8d8c8 0%,#f0e4d8 100%);border-bottom:2px solid var(--accent)}
.gunghap-partner-calc .person-name-input{color:#c0392b}
.gunghap-partner-calc .person-icon{color:#c0392b}

.gunghap-header{text-align:center;margin-bottom:24px}
.gunghap-header h2{font-family:'Noto Serif KR',serif;font-size:1.3rem;font-weight:700;color:var(--text-primary);margin:0 0 6px}
.gunghap-header p{font-size:0.85rem;color:var(--text-dim);margin:0}
.gunghap-input-area{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.gunghap-person-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.gunghap-partner-card{margin-bottom:20px;max-width:700px;margin-left:auto;margin-right:auto}
.gunghap-person-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.gunghap-person-icon{font-size:1.5rem}
.gunghap-person-title{font-weight:700;font-size:1rem;color:var(--text-primary)}
.gunghap-person-actions{display:flex;gap:6px;min-width:120px;justify-content:flex-end}
.btn-gunghap-action{padding:6px 12px;font-size:0.75rem;font-weight:600;border:1px solid var(--border);border-radius:6px;background:var(--bg-body);color:var(--text-secondary);cursor:pointer;transition:all 0.2s;white-space:nowrap}
.btn-gunghap-action:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* 인물 찾기 버튼 (헤더) */
.gunghap-header-btns{display:flex;gap:8px;position:absolute;right:16px}
.btn-gunghap-celeb-big{padding:10px 18px;font-size:0.9rem;font-weight:700;border:2px solid #c9a227;border-radius:8px;background:linear-gradient(135deg,#c9a227,#b8941f);color:#fff;cursor:pointer;transition:all 0.2s;white-space:nowrap;box-shadow:0 2px 8px rgba(201,162,39,0.3)}
.btn-gunghap-celeb-big:hover{background:linear-gradient(135deg,#d4b032,#c9a227);transform:translateY(-1px);box-shadow:0 4px 12px rgba(201,162,39,0.4)}
/* 인물 찾기 버튼 (강조 스타일) */
.btn-gunghap-celeb-gold{padding:12px 24px;font-size:0.95rem;font-weight:700;border:none;border-radius:10px;background:linear-gradient(135deg, #c9a227 0%, #e6b422 50%, #c9a227 100%);background-size:200% 200%;color:#fff;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:nowrap;box-shadow:0 3px 12px rgba(201,162,39,0.4);position:relative;overflow:hidden}
.btn-gunghap-celeb-gold::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.btn-gunghap-celeb-gold:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 6px 20px rgba(201,162,39,0.5)}
.btn-gunghap-celeb-gold:hover::before{left:100%}
/* 궁합 버튼 행 */
.gunghap-btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-gunghap-calc{flex:1;max-width:260px}
.btn-gunghap-best{flex:1;max-width:260px;background:linear-gradient(135deg, #8b7355 0%, #a08668 50%, #8b7355 100%) !important;background-size:200% 200% !important;border:none !important;color:#fff !important;box-shadow:0 3px 10px rgba(107,90,71,0.35);position:relative;overflow:hidden}
.btn-gunghap-best::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.btn-gunghap-best:hover:not(:disabled){background-position:100% 0 !important;transform:translateY(-2px);box-shadow:0 6px 18px rgba(107,90,71,0.45)}
.btn-gunghap-best:hover:not(:disabled)::before{left:100%}
.gunghap-empty-msg{font-size:0.85rem;color:var(--text-dim);text-align:center;padding:20px 0}
.gunghap-calc-body{background:var(--bg-body);border:1px solid var(--border);border-radius:10px;padding:16px}
.gunghap-form-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.gunghap-calc-section{flex:1;min-width:120px}
.gunghap-section-label{font-size:0.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
@media(max-width:800px){.gunghap-input-area{grid-template-columns:1fr}.gunghap-form-row{flex-direction:column;align-items:stretch}.gunghap-calc-section{min-width:100%}}
.gunghap-action{text-align:center;margin-bottom:24px}
.btn-gunghap-calc{padding:14px 32px;border:none;border-radius:8px;background:var(--accent);color:#fff;font-size:1rem;font-weight:700;cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:all 0.2s;box-shadow:0 4px 15px rgba(201,162,39,0.3)}
.btn-gunghap-calc:hover:not(:disabled){background:#a07508;transform:translateY(-1px)}
.btn-gunghap-calc:disabled{opacity:0.5;cursor:not-allowed}
.btn-best-match{padding:14px 24px;border:2px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent);font-size:1rem;font-weight:700;cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:all 0.2s;margin-left:12px}
.btn-best-match:hover:not(:disabled){background:var(--accent);color:#fff}
.btn-best-match:disabled{opacity:0.5;cursor:not-allowed}
@media(max-width:640px){.gunghap-input-area{grid-template-columns:1fr}}

/* 궁합 결과 추가 스타일 */
.gh-results-wrap{padding:10px 0}
.gh-score-grade{display:inline-block;padding:6px 16px;border-radius:20px;color:#fff;font-weight:700;font-size:0.9rem;margin-top:8px}
.gh-interpretation{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.gh-interpretation p{font-size:0.95rem;line-height:1.7;color:var(--text-primary);margin:8px 0 0}
.gh-advice{background:linear-gradient(135deg,#fff8e1,#f5efe4);border:1px solid var(--accent);border-radius:var(--radius);padding:20px}
.gh-advice ul{margin:10px 0 0;padding-left:20px}
.gh-advice li{font-size:0.9rem;line-height:1.8;color:var(--text-secondary);margin-bottom:4px}
.cc-title{font-weight:700;font-size:0.95rem;color:var(--text-primary);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.cc-content p{font-size:0.88rem;line-height:1.6;color:var(--text-secondary);margin:0 0 6px}
.cc-score{font-size:0.82rem;color:var(--accent);font-weight:600;margin-top:10px;text-align:right}
.gh-person-summary{text-align:center}
.gh-date{font-size:0.9rem;color:var(--text-primary);font-weight:600;margin-bottom:4px}
.gh-gender{font-size:0.8rem;color:var(--text-dim);margin-bottom:8px}
.gh-pillars-mini{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.gh-pillar-mini{background:var(--bg-input);padding:4px 8px;border-radius:4px;font-size:0.85rem;font-weight:600;color:var(--text-primary)}
.gh-gender-group{flex-direction:column}
.gh-gender-btns{display:flex;gap:4px}
.error-msg{background:#fbe8e8;border:1px solid #c0392b;border-radius:8px;padding:20px;color:#c0392b;text-align:center;font-size:0.9rem}

/* 유명인 DB 스타일 (한 줄에 2명) */
.db-list{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
/* 인물 카드 - 정돈된 레이아웃: 인물정보 → 사주명식 → 대운 → 오행 → 십성 */
.db-person-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:all 0.2s;cursor:pointer;display:grid;grid-template-columns:100px 130px 60px 90px 1fr;gap:14px;align-items:center;position:relative;min-height:70px}
.db-person-card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,0.08)}
.db-card-info{min-width:0}
.db-card-saju,.db-card-daeun,.db-card-oheng,.db-card-sipsung{min-height:1px}
.db-person-name{font-weight:700;font-size:0.95rem;color:var(--text-primary);line-height:1.3;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-person-meta{font-size:0.78rem;color:var(--text-secondary)}
.db-person-date{font-size:0.72rem;color:var(--text-dim)}
.db-person-note{font-size:0.68rem;color:var(--accent);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 사주 명식 (한자) - 기존 */
.db-saju-compact{display:flex;flex-direction:column;gap:3px;font-family:'Noto Serif KR',serif}
.db-saju-row{display:flex;gap:3px}
.db-char{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:0.95rem;font-weight:700;border-radius:3px}
.db-char.db-pillar-day{background:rgba(74,144,226,0.12)}
.db-char-empty{color:var(--text-dim);font-size:0.8rem}
/* 사주 명식 (한자) - 크게 */
.db-saju-big{display:flex;flex-direction:column;gap:4px;font-family:'Noto Serif KR',serif}
.db-saju-row-big{display:flex;gap:4px}
.db-char-big{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;font-weight:700;border-radius:4px}
.db-char-big.db-pillar-day-big{background:rgba(184,134,11,0.12);border-radius:4px}
.db-char-big.db-char-empty{color:var(--text-dim);font-size:1rem}
/* 오행 막대그래프 */
.db-bars{display:flex;flex-direction:column;gap:2px}
.db-bar-row{display:flex;align-items:center;gap:4px}
.db-bar-lbl{font-size:0.65rem;width:14px;text-align:right;font-weight:700;flex-shrink:0}
.db-bar-track{flex:1;height:7px;background:var(--bg-warm);border-radius:4px;overflow:hidden;max-width:45px}
.db-bar-fill{height:100%;border-radius:4px}
.db-bar-val{font-size:0.6rem;color:var(--text-dim);width:26px}
/* 십성 그리드 (10개 개별, 2개씩) */
.db-ss-grid{display:flex;flex-direction:column;gap:2px}
.db-ss-pair{display:flex;gap:8px}
.db-ss-item{display:flex;align-items:center;gap:3px;flex:1}
.db-ss-name{font-size:0.6rem;width:24px;color:var(--text-secondary);font-weight:500}
.db-ss-bar{flex:1;height:5px;background:var(--bg-warm);border-radius:3px;overflow:hidden;max-width:35px}
.db-ss-fill{height:100%;border-radius:3px;background:var(--accent)}
.db-ss-pct{font-size:0.55rem;color:var(--text-dim);width:20px}
/* 대운 */
.db-daeun{display:flex;flex-direction:column;align-items:center;gap:2px}
.db-daeun-lbl{font-size:0.62rem;color:var(--text-dim);white-space:nowrap}
.db-daeun-char{font-size:1.1rem;font-weight:700;font-family:'Noto Serif KR',serif}
/* 출처/삭제 */
.db-src{position:absolute;top:4px;right:4px;font-size:0.55rem;color:#aaa;background:#f5f5f5;padding:1px 4px;border-radius:3px}
.btn-db-delete-mini{position:absolute;bottom:4px;right:4px;width:16px;height:16px;border:none;background:#ffebee;color:#c62828;border-radius:50%;font-size:0.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s}
.db-person-card:hover .btn-db-delete-mini{opacity:1}
.db-person-gender{font-size:0.85rem;color:var(--accent);font-weight:600}
.db-person-date{font-size:0.82rem;color:var(--text-secondary);font-weight:500}
.db-person-note{font-size:0.75rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;margin-top:2px}
.db-person-source{font-size:0.7rem;color:#888;margin-top:4px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.db-person-source a{font-size:0.7rem}
.db-contributor{font-size:0.65rem;color:#aaa;background:#f0f0f0;padding:1px 5px;border-radius:3px}
.db-card-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.btn-db-delete{padding:4px 10px;border:1px solid #c0392b;border-radius:4px;background:transparent;color:#c0392b;font-size:0.72rem;cursor:pointer;font-family:'Noto Sans KR',sans-serif}
.btn-db-delete:hover{background:#c0392b;color:#fff}
/* 사주 명식 그리드 (가독성 개선) */
.db-saju-grid{display:flex;flex-direction:column;gap:3px;font-family:'Noto Serif KR',serif}
.db-saju-labels{display:flex;gap:3px;justify-content:center}
.db-saju-labels span{width:42px;text-align:center;font-size:0.7rem;color:var(--text-secondary);font-family:'Noto Sans KR',sans-serif;font-weight:500}
.db-saju-stems,.db-saju-branches{display:flex;gap:3px}
.db-stem-cell,.db-branch-cell{width:42px;background:var(--bg-warm);border:1px solid var(--border);border-radius:4px;padding:4px 3px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px}
.db-hanja{font-size:1rem;font-weight:700;line-height:1.2}
.db-hangul{font-size:0.65rem;line-height:1.1;font-weight:500}
.db-sipsung,.db-yy{font-size:0.58rem;color:var(--text-secondary);font-family:'Noto Sans KR',sans-serif;line-height:1.1;font-weight:500}
/* 대운 박스 (가독성 개선) */
.db-daeun-box{display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,var(--bg-warm),#f5efe5);border:1px solid var(--border);border-radius:6px;padding:6px 10px;min-width:52px}
.db-daeun-label{font-size:0.65rem;color:var(--text-secondary);margin-bottom:3px;font-family:'Noto Sans KR',sans-serif;font-weight:500}
.db-daeun-stem,.db-daeun-branch{font-family:'Noto Serif KR',serif;font-size:1.1rem;font-weight:700;line-height:1.3}
.db-empty{text-align:center;padding:40px 20px;color:var(--text-dim);font-size:0.95rem}

/* DB 페이지네이션 스타일 */
.db-pagination{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.db-pagination-inner{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap}
.db-page-btn{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-secondary);font-size:0.85rem;cursor:pointer;transition:all 0.15s;font-family:'Noto Sans KR',sans-serif}
.db-page-btn:hover:not(.disabled):not(.active){background:var(--bg-warm);border-color:var(--accent);color:var(--text-primary)}
.db-page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.db-page-btn.disabled{opacity:0.4;cursor:not-allowed}
.db-page-ellipsis{padding:0 4px;color:var(--text-dim);font-size:0.85rem}

/* DB 정렬/필터 스타일 */
.db-sort-section{margin-bottom:14px}
/* 인물 추가 버튼 (헤더 우측 상단) */
.btn-add-person-header{padding:10px 20px;font-size:0.9rem;font-weight:700;border:none;border-radius:8px;background:linear-gradient(135deg, #2d8a4e 0%, #3da864 50%, #2d8a4e 100%);background-size:200% 200%;color:#fff;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:nowrap;box-shadow:0 3px 10px rgba(45,138,78,0.35);position:relative;overflow:hidden}
.btn-add-person-header::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.btn-add-person-header:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 6px 18px rgba(45,138,78,0.45)}
.btn-add-person-header:hover::before{left:100%}
.db-sort-chip{padding:4px 12px;border:1px solid var(--border);border-radius:20px;font-size:0.78rem;cursor:pointer;transition:all 0.15s;background:var(--bg-card);color:var(--text-secondary);display:inline-flex;align-items:center;gap:4px}
.db-sort-chip:hover{border-color:var(--accent);color:var(--text-primary)}
.db-sort-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.db-sort-chip .pri{font-size:0.65rem;opacity:0.8}
.db-sort-chip .dir{font-size:0.7rem}
.db-filter-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.db-filter-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.db-filter-row-label{font-size:0.72rem;color:var(--text-dim);font-weight:600;min-width:36px}
.db-fchip{padding:3px 8px;border:1px solid var(--border);border-radius:4px;font-size:0.75rem;cursor:pointer;transition:all 0.15s;background:var(--bg-card);color:var(--text-secondary)}
.db-fchip:hover{border-color:var(--accent)}
.db-fchip.on{background:#d4e8d0;border-color:#5a9a4a;color:#3a6634}
.db-fchip .fhj{font-size:0.65rem;color:var(--text-dim);margin-left:2px}
.db-sort-active{font-size:0.75rem;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.db-sort-active-label{font-weight:600;color:var(--text-secondary)}
.db-sort-active-chip{background:var(--bg-warm);padding:2px 8px;border-radius:4px;font-size:0.72rem}
/* 정렬 칩 2행 레이아웃 */
.db-sort-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.db-sort-row-sub{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border)}
.db-sort-row-sub .db-sort-chip{padding:3px 8px;font-size:0.7rem}
.db-sort-row-label{font-size:0.68rem;color:var(--text-dim);font-weight:600;margin-right:3px}

/* 모달 스타일 */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-content{background:var(--bg-card);border-radius:12px;max-width:460px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,0.2)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--border)}
.modal-header h3{margin:0;font-size:1.1rem;font-weight:700}
.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-dim);line-height:1}
.modal-body{padding:20px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--border)}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:0.82rem;color:var(--text-secondary);margin-bottom:4px}
.form-group input,.form-group select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font-size:0.95rem;font-family:'Noto Sans KR',sans-serif}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent)}
.form-row{display:flex;gap:10px}
.form-row .form-group{flex:1}
.btn-cancel{padding:10px 20px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-secondary);cursor:pointer;font-family:'Noto Sans KR',sans-serif}
.btn-confirm{padding:10px 20px;border:none;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;font-family:'Noto Sans KR',sans-serif}

@media(max-width:640px){.db-list{grid-template-columns:1fr}}

/* ═══ 완전한 궁합 결과 스타일 ═══ */
.gh-score-details{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:20px}
.gh-details-title{font-weight:700;margin-bottom:12px;font-size:0.95rem}
.gh-raw-total{font-weight:400;color:var(--text-dim);font-size:0.82rem}
.gh-score-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:0.88rem}
.gh-score-label{min-width:72px;color:var(--text-secondary)}
.gh-score-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;position:relative}
.gh-bar-fill{position:absolute;height:100%;border-radius:3px;transition:width 0.3s}
.gh-bar-positive{left:0}
.gh-bar-negative{right:0}
.gh-score-value{min-width:40px;text-align:right;font-weight:600}

/* 관계 태그 */
.cc-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:0.75rem;font-weight:500;margin:2px}
.cc-good{background:#e8f5e9;color:#2d8a4e;border:1px solid #2d8a4e}
.cc-bad{background:#fbe8e8;color:#c0392b;border:1px solid #c0392b}
.cc-warn{background:#fff3e0;color:#e67e22;border:1px solid #e67e22}
.cc-neutral{background:var(--bg-input);color:var(--text-dim);border:1px solid var(--border)}

/* 관계 행 */
.gh-rel-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:0.85rem;flex-wrap:wrap}
.gh-rel-pos{min-width:26px;font-weight:600;color:var(--text-secondary)}
.gh-rel-arrow{color:var(--text-dim)}

/* 오행 비교 */
.gh-oheng-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gh-oheng-side{text-align:center}
.gh-oheng-label{font-weight:600;font-size:0.9rem;margin-bottom:12px;color:var(--text-primary)}
.gh-oheng-bars{display:flex;flex-direction:column;gap:6px}
.gh-oheng-bar{display:flex;align-items:center;gap:6px;font-size:0.82rem}
.gh-oh-name{min-width:20px;font-weight:600}
.gh-oh-track{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.gh-oh-fill{display:block;height:100%;border-radius:4px;transition:width 0.3s}
.gh-oh-val{min-width:28px;text-align:right;font-weight:500;color:var(--text-secondary)}
.gh-yongsin{margin-top:10px;font-size:0.82rem;color:var(--text-secondary)}
.gh-oheng-summary{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.gh-oheng-summary p{font-size:0.85rem;color:var(--text-secondary);margin:6px 0}
.gh-warn{color:#e67e22 !important;font-weight:500}

/* 분석 노트 */
.gh-notes{margin-top:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.gh-notes summary{padding:14px 16px;cursor:pointer;font-size:0.9rem;font-weight:600;color:var(--text-secondary)}
.gh-notes summary:hover{background:var(--bg-input)}
.gh-notes-list{padding:0 16px 16px;max-height:300px;overflow-y:auto}
.gh-note{font-size:0.78rem;color:var(--text-dim);padding:4px 0;border-bottom:1px dashed var(--border);font-family:monospace}
.gh-note:last-child{border-bottom:none}

/* 궁합 카드 넓은 버전 */
.compat-card-wide{grid-column:1/-1}

/* 반응형 */
@media(max-width:640px){
  .gh-oheng-wrap{grid-template-columns:1fr}
  .gh-oheng-side{margin-bottom:16px}
  .gh-score-row{flex-wrap:wrap}
  .gh-score-bar{order:3;width:100%;flex:none;margin-top:4px}
}

/* ═══ Best Match 스타일 ═══ */
.bm-loading{text-align:center;padding:40px 20px}
.bm-prog-bar{width:100%;max-width:400px;height:8px;background:var(--border);border-radius:4px;margin:16px auto;overflow:hidden}
.bm-prog-fill{height:100%;background:var(--accent);border-radius:4px;transition:width 0.2s}
.bm-results{padding:10px 0}
.bm-banner{text-align:center;background:linear-gradient(135deg,#f5efe4,#fff8e1);border:1px solid var(--accent);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.bm-banner-range{font-size:2rem;font-weight:700;margin-bottom:8px}
.bm-banner-sub{font-size:0.85rem;color:var(--text-dim)}
.bm-match-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px}
.bm-match{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.bm-match-title{font-size:0.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.bm-match-score{font-size:2.5rem;font-weight:700;text-align:center;margin:12px 0}
.bm-match-detail{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.bm-detail-chip{padding:4px 10px;background:var(--bg-input);border-radius:12px;font-size:0.75rem;color:var(--text-secondary)}
.gp-cn{font-size:0.6rem;color:var(--text-dim);margin-left:2px}
.gp-sub{font-size:0.7rem;color:var(--text-dim);margin-top:4px}
.bm-distrib{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.bm-distrib-title{font-weight:700;margin-bottom:16px;font-size:0.95rem}
.bm-distrib-bars{display:flex;align-items:flex-end;gap:2px;height:120px;padding-bottom:20px;position:relative}
.bm-dbar{flex:1;min-width:10px;border-radius:2px 2px 0 0;position:relative;transition:height 0.3s}
.bm-dbar-count{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:0.6rem;color:var(--text-dim)}
.bm-dbar-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:0.6rem;color:var(--text-dim)}
.bm-rank{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.bm-rank-title{font-weight:700;margin-bottom:16px;font-size:0.95rem}
.bm-rank-list{list-style:none;padding:0;margin:0}
.bm-rank-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.bm-rank-item:last-child{border-bottom:none}
.bm-rank-num{min-width:24px;font-weight:700;color:var(--text-dim);font-size:0.85rem}
.bm-rank-pillar{font-weight:700;font-size:1rem;min-width:40px}
.bm-rank-el{font-size:0.75rem;color:var(--text-dim);min-width:40px}
.bm-rank-bar-wrap{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.bm-rank-bar{height:100%;border-radius:3px;transition:width 0.3s}
.bm-rank-score{min-width:40px;text-align:right;font-weight:600;font-size:0.9rem}

/* ═══ Fortune Interaction 스타일 ═══ */
.fortune-interaction-log{background:var(--bg-warm);border-radius:8px;padding:8px 12px;margin-top:10px;font-size:0.75rem;line-height:1.8;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.fi-log-label{color:var(--text-dim);font-weight:600;margin-right:4px}
.fi-log-item{font-weight:500;white-space:nowrap}
.fi-log-empty{color:var(--text-dim);font-style:italic}

/* ═══ Gunghap Share 스타일 ═══ */
.gunghap-share{display:flex;gap:10px;justify-content:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.btn-share{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;border:none;cursor:pointer;font-size:0.85rem;font-weight:500;transition:all 0.2s}
.btn-share-link{background:#e8e8e8;color:#333}
.btn-share-link:hover{background:#d8d8d8}
.btn-share-kakao{background:#fee500;color:#191919}
.btn-share-kakao:hover{background:#f5dc00}

/* ═══ BTI Share 스타일 ═══ */
.bti-share-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);text-align:center}
.btn-share-card{background:linear-gradient(135deg,#4a5568,#2d3748);color:#fff;padding:12px 24px;border-radius:8px;border:none;cursor:pointer;font-size:0.9rem;font-weight:600;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.btn-share-card:hover:not(:disabled){background:linear-gradient(135deg,#5a6678,#3d4758);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.btn-share-card:disabled{opacity:0.5;cursor:not-allowed}

/* ═══ Share Card Modal 스타일 ═══ */
.share-modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;opacity:0;visibility:hidden;transition:all 0.3s}
.share-modal.active{opacity:1;visibility:visible}
.share-modal-content{background:var(--bg-card);border-radius:16px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.share-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.share-modal-header h3{font-size:1rem;margin:0}
.share-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-dim);line-height:1}
.share-modal-close:hover{color:var(--text-primary)}
.share-modal-body{padding:20px}
.share-modal-actions{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--border)}
.share-modal-actions button{flex:1;padding:12px;border-radius:8px;border:none;cursor:pointer;font-size:0.85rem;font-weight:500;transition:all 0.2s}
.btn-save-card{background:var(--accent);color:#fff}
.btn-save-card:hover{filter:brightness(1.1)}
.btn-close-card{background:var(--bg-input);color:var(--text-primary)}
.btn-close-card:hover{background:var(--border)}

/* ═══ Share Card 스타일 ═══ */
.share-card{perspective:1000px;width:320px;height:420px;margin:0 auto}
.share-card-inner{position:relative;width:100%;height:100%;transition:transform 0.6s;transform-style:preserve-3d;cursor:pointer}
.share-card.flipped .share-card-inner{transform:rotateY(180deg)}
.share-card-front,.share-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.15)}
.share-card-back{transform:rotateY(180deg)}

/* Card Front */
.sc-front{height:100%;display:flex;flex-direction:column;padding:24px;background:linear-gradient(180deg,#fefefe 0%,#f8f5f0 100%)}
.sc-front-header{text-align:center;margin-bottom:20px}
.sc-front-title{font-size:0.75rem;color:var(--text-dim);letter-spacing:2px;margin-bottom:4px}
.sc-front-name{font-size:1.5rem;font-weight:700;color:var(--text-primary)}
.sc-front-birth{font-size:0.8rem;color:var(--text-secondary);margin-top:4px}
.sc-front-pillars{display:flex;justify-content:center;gap:12px;margin:20px 0}
.sc-pillar{text-align:center;padding:12px 16px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.sc-pillar-label{font-size:0.65rem;color:var(--text-dim);margin-bottom:6px}
.sc-pillar-chars{font-family:'Noto Serif KR',serif;font-size:1.3rem;line-height:1.4}
.sc-pillar-chars .stem{display:block}
.sc-pillar-chars .branch{display:block}
.sc-front-ilgan{text-align:center;margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}
.sc-ilgan-main{font-size:0.9rem;font-weight:600;color:var(--text-primary)}
.sc-ilgan-desc{font-size:0.75rem;color:var(--text-secondary);margin-top:4px}
.sc-zodiac{font-size:2rem;margin-bottom:8px}
.sc-footer{text-align:center;margin-top:16px;font-size:0.65rem;color:var(--text-dim)}

/* Card Back */
.sc-back{height:100%;display:flex;flex-direction:column;padding:20px}
.sc-back-header{text-align:center;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:12px}
.sc-back-title{font-size:0.85rem;font-weight:600;color:var(--text-primary)}
.sc-back-name{font-size:0.75rem;color:var(--text-secondary);margin-top:2px}
.sc-oheng{margin-bottom:16px}
.sc-oheng-title{font-size:0.7rem;color:var(--text-dim);margin-bottom:8px}
.sc-oheng-bars{display:flex;flex-direction:column;gap:6px}
.sc-oheng-row{display:flex;align-items:center;gap:6px;font-size:0.75rem}
.sc-oheng-name{width:16px;font-weight:600}
.sc-oheng-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.sc-oheng-fill{height:100%;border-radius:3px}
.sc-oheng-pct{width:28px;text-align:right;font-size:0.7rem;color:var(--text-dim)}
.sc-yongsin{margin-bottom:16px}
.sc-yongsin-title{font-size:0.7rem;color:var(--text-dim);margin-bottom:8px}
.sc-yongsin-row{display:flex;gap:8px;flex-wrap:wrap}
.sc-yongsin-chip{padding:4px 10px;background:var(--bg-input);border-radius:12px;font-size:0.72rem}
.sc-back-footer{margin-top:auto;text-align:center;font-size:0.6rem;color:var(--text-dim)}
.sc-flip-hint{text-align:center;font-size:0.7rem;color:var(--text-dim);margin-top:8px}

/* ═══ Share Card Overlay 스타일 ═══ */
.share-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000;opacity:0;transition:opacity 0.3s;padding:20px}
.share-overlay.show{opacity:1}
.share-hint{color:rgba(255,255,255,0.7);font-size:0.85rem;margin-bottom:16px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0.7}50%{opacity:1}}
.share-card-wrap{width:280px;height:440px;perspective:1000px;cursor:pointer}
.share-card-wrap .share-card-inner{position:relative;width:100%;height:100%;transition:transform 0.6s;transform-style:preserve-3d}
.share-card-wrap.flipped .share-card-inner{transform:rotateY(180deg)}
.share-card-wrap .share-card-front,.share-card-wrap .share-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,0.4)}
.share-card-wrap .share-card-back{transform:rotateY(180deg)}
.share-btns{display:flex;gap:12px;margin-top:20px}
.share-btn-item{padding:12px 24px;border-radius:10px;border:none;cursor:pointer;font-size:0.9rem;font-weight:600;transition:all 0.2s}
.share-btn-save{background:linear-gradient(135deg,#4a8f4a,#2d6a2d);color:#fff}
.share-btn-save:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(45,106,45,0.4)}
.share-btn-close{background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.3)}
.share-btn-close:hover{background:rgba(255,255,255,0.25)}

/* 카드 앞면 스타일 */
.sc-front{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.sc-element-badge{position:absolute;top:16px;right:16px;padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:700}
.sc-hanja{font-family:'Noto Serif KR',serif;font-size:3.5rem;font-weight:700;line-height:1.2;letter-spacing:4px}
.sc-hangul{font-size:1.1rem;margin-top:8px;opacity:0.9}
.sc-divider{width:60px;height:2px;margin:20px 0;opacity:0.5}
.sc-animal-emoji{font-size:3rem;margin:8px 0}
.sc-ilju-title{font-size:1rem;font-weight:600;margin-top:8px}
.sc-num{position:absolute;bottom:40px;font-size:0.75rem;opacity:0.6}
.sc-brand{position:absolute;bottom:16px;font-size:0.7rem;opacity:0.5;letter-spacing:1px}

/* 카드 뒷면 스타일 */
.sc-back{height:100%;display:flex;flex-direction:column;padding:20px;background:linear-gradient(180deg,#2a2a3a 0%,#1a1a2a 100%);color:#fff}
.sc-back-header{text-align:center;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.15);margin-bottom:16px}
.sc-back-icon{font-size:1.2rem;margin-bottom:4px;color:#ffd700}
.sc-back-title{font-size:1rem;font-weight:600}
.sc-back-section{margin-bottom:14px}
.sc-back-label{font-size:0.7rem;color:rgba(255,255,255,0.5);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.sc-back-value{font-size:1rem;font-weight:600}
.sc-back-sub{font-size:0.78rem;color:rgba(255,255,255,0.7);margin-top:4px}
.sc-back-divider{height:1px;background:rgba(255,255,255,0.1);margin:6px 0}
.sc-back-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sc-back-tag{padding:3px 10px;background:rgba(255,255,255,0.1);border-radius:12px;font-size:0.7rem;color:rgba(255,255,255,0.8)}
.sc-back-brand{margin-top:auto;text-align:center;font-size:0.65rem;color:rgba(255,255,255,0.4)}
.sc-oheng-bar{display:flex;border-radius:4px;overflow:hidden;height:20px}
.sc-oheng-seg{display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:600;color:#fff}

/* ═══ DB 로그인 스타일 ═══ */
.db-login-notice{margin-bottom:20px;animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.db-login-box{background:linear-gradient(135deg,#f5efe4,#fff8e1);border:2px solid var(--accent);border-radius:var(--radius);padding:24px;text-align:center}
.db-login-title{font-family:'Noto Serif KR',serif;font-size:1.2rem;font-weight:700;color:var(--text-primary);margin-bottom:12px}
.db-login-box p{font-size:0.9rem;color:var(--text-secondary);margin-bottom:16px;line-height:1.6}
.db-login-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.db-login-input{padding:10px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);font-size:0.9rem;color:var(--text-primary);font-family:'Noto Sans KR',sans-serif;width:140px;outline:none;transition:border-color 0.2s}
.db-login-input:focus{border-color:var(--accent)}
.btn-db-login-submit{padding:10px 20px;border:none;border-radius:6px;background:var(--accent);color:#fff;font-size:0.9rem;font-weight:600;cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:all 0.2s}
.btn-db-login-submit:hover{background:#a07508;transform:translateY(-1px)}
.db-login-info{font-size:0.75rem;color:var(--text-dim);margin-top:8px}
.db-login-info small{display:block}
.db-logged-user{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;padding:10px 16px;background:var(--bg-warm);border-radius:8px}
.db-logged-user-icon{font-size:1.2rem}
.db-logged-user-name{font-weight:600;color:var(--text-primary)}
.btn-db-logout{padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-secondary);font-size:0.8rem;cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:all 0.2s}
.btn-db-logout:hover{background:#c0392b;color:#fff;border-color:#c0392b}

/* ═══ 전역 폰트 크기 증가 (모바일) ═══ */
@media(max-width:767px){
  .section-title{font-size:1.05rem}
  .char-kr{font-size:2.6rem}
  .char-cn{font-size:1.9rem}
  .char-sub{font-size:0.72rem}
  .pillar-label{font-size:0.75rem}
  .ten-god-stem,.ten-god-branch{font-size:0.9rem}
  .fortune-card .fc-stem,.fortune-card .fc-branch{font-size:1.5rem}
  .fortune-card .fc-age{font-size:0.72rem}
  .fortune-card .fc-tg,.fortune-card .fc-tg-stem{font-size:0.78rem}
  .sipsung-item-name,.sipsung-group-name{font-size:0.95rem}
  .sipsung-pct{font-size:0.85rem}
  .analysis-card{padding:16px}
  .bti-card{padding:18px}
  .bti-card-name{font-size:1.3rem}
  .bti-card-desc{font-size:0.9rem;line-height:1.7}
  .db-person-name{font-size:0.95rem}
  .db-person-date{font-size:0.8rem}
  .db-hanja{font-size:0.95rem}
  .daeun-info-bar{padding:8px 12px;font-size:0.85rem}
  .daeun-direction{font-size:0.85rem}
  .daeun-start,.daeun-term{font-size:0.8rem}
}

/* 사이드바는 이제 레이아웃의 일부로 static 배치됨 */

/* ═══ 방명록 (채팅 스타일) ═══ */
.guestbook-chat-container{background:#e5ddd5;border-radius:12px;margin-top:16px;border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;max-width:700px;margin-left:auto;margin-right:auto}
.guestbook-messages{flex:1;min-height:400px;max-height:500px;overflow-y:auto;padding:16px;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="%23e5ddd5" width="200" height="200"/><rect fill="%23d4cdc5" x="0" y="0" width="2" height="2" opacity="0.1"/></svg>')}
.guestbook-messages::-webkit-scrollbar{width:6px}
.guestbook-messages::-webkit-scrollbar-thumb{background:#c5bdb5;border-radius:3px}
.gb-message-item{display:flex;margin-bottom:12px;align-items:flex-end;gap:8px}
.gb-message-item.mine{flex-direction:row-reverse}
.gb-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#c9a227,#a07508);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:0.85rem;flex-shrink:0}
.gb-bubble{max-width:70%;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.1);position:relative}
.gb-message-item.mine .gb-bubble{background:#dcf8c6;border-bottom-right-radius:4px}
.gb-message-item:not(.mine) .gb-bubble{border-bottom-left-radius:4px}
.gb-bubble-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.gb-nickname{font-weight:600;font-size:0.8rem;color:#075e54}
.gb-time{font-size:0.7rem;color:#999}
.gb-text{font-size:0.9rem;line-height:1.5;color:var(--text-primary);word-break:break-word}
.gb-delete-btn{background:none;border:none;font-size:0.7rem;color:#999;cursor:pointer;padding:2px 4px;margin-left:auto}
.gb-delete-btn:hover{color:#e74c3c}
.guestbook-input-area{background:#f0f0f0;padding:12px 16px;border-top:1px solid #ddd}
.gb-login-status{margin-bottom:10px}
.gb-not-logged{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff3e0;padding:10px 14px;border-radius:8px;font-size:0.85rem;color:#e65100}
.gb-login-btn{padding:6px 14px;border:none;border-radius:16px;background:var(--accent);color:#fff;font-size:0.8rem;cursor:pointer;font-weight:500;transition:opacity 0.2s}
.gb-login-btn:hover{opacity:0.9}
.gb-logged{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#e8f5e9;padding:8px 14px;border-radius:8px}
.gb-user-info{display:flex;align-items:center;gap:8px;font-size:0.85rem}
.gb-user-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem}
.gb-user-name{font-weight:600;color:#2e7d32}
.gb-user-provider{font-size:0.75rem;color:#81c784}
.gb-logout-btn{padding:4px 10px;border:1px solid #c8e6c9;border-radius:12px;background:transparent;color:#388e3c;font-size:0.75rem;cursor:pointer;transition:all 0.2s}
.gb-logout-btn:hover{background:#c8e6c9}
.guestbook-input-row{display:flex;gap:8px;margin-bottom:8px}
.guestbook-input-row:last-of-type{margin-bottom:4px}
.gb-input{flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:20px;font-size:0.9rem;font-family:'Noto Sans KR',sans-serif;outline:none;transition:border-color 0.2s}
.gb-input:focus{border-color:var(--accent)}
.gb-input:disabled{background:#e0e0e0;color:#999;cursor:not-allowed}
.gb-message{flex:1}
.gb-provider-badge{font-size:0.65rem;padding:2px 6px;border-radius:8px;font-weight:500;margin-left:4px}
.gb-provider-google{background:#e3f2fd;color:#1976d2}
.gb-provider-kakao{background:#fff9c4;color:#6d4c00}
.gb-provider-naver{background:#e8f5e9;color:#1b5e20}
.gb-my-message .gb-bubble{background:#e3f2fd;border-color:#bbdefb}
.gb-send-btn{width:44px;height:44px;border:none;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0}
.gb-send-btn:hover{background:#a07508;transform:scale(1.05)}
.gb-send-btn:disabled{background:#ccc;cursor:not-allowed}
.guestbook-char-count{text-align:right;font-size:0.75rem;color:#999}
.guestbook-empty{text-align:center;padding:60px 20px;color:#999}
.guestbook-empty-icon{font-size:3rem;margin-bottom:12px;opacity:0.5}
@media(max-width:480px){.gb-nickname,.gb-password{flex:0 0 80px}.guestbook-input-row{flex-wrap:wrap}.gb-message{flex:1 1 100%}}

/* ═══ 가이드 모달 ═══ */
.guide-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}
.guide-modal{background:#fff;border-radius:16px;max-width:700px;max-height:85vh;width:100%;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.guide-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:linear-gradient(135deg,#f8f4ed,#f0ead8);border-bottom:1px solid var(--border)}
.guide-modal-header h2{margin:0;font-family:'Noto Serif KR',serif;font-size:1.3rem;color:var(--text-primary)}
.guide-modal-close{background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--text-dim);padding:0;line-height:1}
.guide-modal-close:hover{color:var(--text-primary)}
.guide-modal-body{padding:24px;overflow-y:auto;max-height:calc(85vh - 80px)}
.guide-intro{background:#f8f5f0;border-radius:8px;padding:14px 16px;margin-bottom:20px;font-size:0.9rem;color:var(--text-secondary);line-height:1.6}

/* 절기 달력 */
.jeolgi-intro{background:#fdf8f3;border-radius:8px;padding:14px 16px;margin-bottom:20px;font-size:0.9rem;line-height:1.6}
.jeolgi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.jeolgi-month{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:12px}
.jeolgi-month-title{font-weight:700;font-size:0.85rem;color:var(--accent);margin-bottom:8px;text-align:center}
.jeolgi-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f0ebe3}
.jeolgi-item:last-child{border-bottom:none}
.jeolgi-name{font-weight:700;font-size:0.85rem;min-width:36px}
.jeolgi-date{font-size:0.75rem;color:var(--text-dim);min-width:50px}
.jeolgi-desc{font-size:0.75rem;color:var(--text-secondary)}

/* 60갑자 표 */
.gapja-intro{background:#f5f0e8;border-radius:8px;padding:14px 16px;margin-bottom:20px;font-size:0.9rem;line-height:1.6}
.gapja-table{overflow-x:auto}
.gapja-table table{width:100%;border-collapse:collapse;font-family:'Noto Serif KR',serif}
.gapja-cell{padding:8px 4px;text-align:center;border:1px solid var(--border);font-size:0.8rem;background:var(--bg-card)}
.gapja-cell:hover{background:var(--accent);color:#fff}

/* 십성 가이드 */
.sipsung-intro{background:#f0f4f8;border-radius:8px;padding:14px 16px;margin-bottom:20px;font-size:0.9rem;line-height:1.6}
.sipsung-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sipsung-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px}
.sipsung-header{font-size:1rem;margin-bottom:4px}
.sipsung-hanja{font-size:0.8rem;color:var(--text-dim)}
.sipsung-group{font-size:0.72rem;color:var(--accent);font-weight:600;margin-bottom:6px}
.sipsung-desc{font-size:0.8rem;color:var(--text-secondary);line-height:1.5}

/* 천간 가이드 */
.cheongan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cheongan-card{padding:14px;border-radius:10px;border:1px solid var(--border)}
.cheongan-card.cheongan-목{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}
.cheongan-card.cheongan-화{background:linear-gradient(135deg,#ffebee,#fce4ec)}
.cheongan-card.cheongan-토{background:linear-gradient(135deg,#fff8e1,#fff3e0)}
.cheongan-card.cheongan-금{background:linear-gradient(135deg,#eceff1,#f5f5f5)}
.cheongan-card.cheongan-수{background:linear-gradient(135deg,#e3f2fd,#e8eaf6)}
.cheongan-main{font-size:1.1rem;margin-bottom:4px}
.cheongan-hanja{font-size:0.85rem;color:var(--text-dim)}
.cheongan-info{font-size:0.75rem;color:var(--text-secondary);margin-bottom:4px}
.cheongan-desc{font-size:0.8rem;color:var(--text-primary);line-height:1.4}

/* 지지 가이드 */
.jiji-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.jiji-card{padding:12px;border-radius:10px;border:1px solid var(--border);text-align:center}
.jiji-card.jiji-목{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}
.jiji-card.jiji-화{background:linear-gradient(135deg,#ffebee,#fce4ec)}
.jiji-card.jiji-토{background:linear-gradient(135deg,#fff8e1,#fff3e0)}
.jiji-card.jiji-금{background:linear-gradient(135deg,#eceff1,#f5f5f5)}
.jiji-card.jiji-수{background:linear-gradient(135deg,#e3f2fd,#e8eaf6)}
.jiji-main{font-size:1.1rem;margin-bottom:4px}
.jiji-hanja{font-size:0.85rem;color:var(--text-dim)}
.jiji-animal{font-size:0.9rem;margin-bottom:4px}
.jiji-info{font-size:0.72rem;color:var(--text-secondary);margin-bottom:2px}
.jiji-time{font-size:0.7rem;color:var(--text-dim)}

/* 음양오행 가이드 */
.oheng-section{margin-bottom:24px}
.oheng-section h3{font-family:'Noto Serif KR',serif;font-size:1rem;margin:0 0 12px;color:var(--text-primary)}
.yy-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.yy-card{padding:14px;border-radius:8px;font-size:0.85rem;line-height:1.5}
.yy-yang{background:linear-gradient(135deg,#fff8e1,#ffecb3);border:1px solid #ffc107}
.yy-eum{background:linear-gradient(135deg,#e8eaf6,#c5cae9);border:1px solid #7986cb}
.oheng-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.oheng-card{padding:14px 8px;border-radius:10px;text-align:center;font-size:0.8rem}
.oheng-card p{margin:6px 0 0;font-size:0.72rem;line-height:1.4;color:var(--text-secondary)}
.oheng-icon{font-size:1.5rem;display:block;margin-bottom:6px}
.oheng-mok{background:linear-gradient(180deg,#c8e6c9,#a5d6a7);border:1px solid #66bb6a}
.oheng-hwa{background:linear-gradient(180deg,#ffcdd2,#ef9a9a);border:1px solid #ef5350}
.oheng-to{background:linear-gradient(180deg,#ffe082,#ffca28);border:1px solid #ffa000}
.oheng-geum{background:linear-gradient(180deg,#e0e0e0,#bdbdbd);border:1px solid #9e9e9e}
.oheng-su{background:linear-gradient(180deg,#bbdefb,#90caf9);border:1px solid #42a5f5}
.relation-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.relation-card{padding:14px;border-radius:8px;font-size:0.85rem;line-height:1.6;text-align:center}
.relation-good{background:#e8f5e9;border:1px solid #66bb6a}
.relation-bad{background:#ffebee;border:1px solid #ef5350}

/* 합충형파 가이드 */
.hapchung-section{margin-bottom:18px}
.hapchung-section h3{font-family:'Noto Serif KR',serif;font-size:0.95rem;margin:0 0 8px;color:var(--text-primary)}
.hapchung-list{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:0.85rem;color:var(--text-secondary);line-height:1.8}

/* 십이운성 가이드 */
.twelve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.twelve-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center}
.twelve-emoji{font-size:1.5rem;margin-bottom:6px}
.twelve-name{font-size:0.9rem;margin-bottom:4px}
.twelve-hanja{font-size:0.75rem;color:var(--text-dim)}
.twelve-desc{font-size:0.72rem;color:var(--text-secondary);line-height:1.4}

/* 모바일 대응 */
@media(max-width:640px){
  .guide-modal{max-height:90vh}
  .guide-modal-body{max-height:calc(90vh - 70px)}
  .jeolgi-grid{grid-template-columns:repeat(2,1fr)}
  .sipsung-grid{grid-template-columns:1fr}
  .cheongan-grid{grid-template-columns:1fr}
  .jiji-grid{grid-template-columns:repeat(2,1fr)}
  .oheng-grid{grid-template-columns:repeat(3,1fr)}
  .twelve-grid{grid-template-columns:repeat(3,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   이용약관 / 개인정보처리방침 모달
   ═══════════════════════════════════════════════════════════════════════════ */
.legal-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.legal-modal.active {
  opacity: 1;
  visibility: visible;
}
.legal-modal-content {
  background: var(--bg-card);
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  position: relative;
}
.legal-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1;
  z-index: 10;
  transition: color 0.2s;
}
.legal-modal-close:hover {
  color: var(--text-primary);
}
.legal-modal-body {
  padding: 32px;
  overflow-y: auto;
  line-height: 1.8;
  color: var(--text-primary);
}
.legal-modal-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.legal-modal-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 12px;
  color: var(--text-primary);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}
.legal-modal-body h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--text-secondary);
}
.legal-modal-body p {
  margin-bottom: 12px;
  font-size: 0.9rem;
}
.legal-modal-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}
.legal-modal-body ol,
.legal-modal-body ul {
  margin: 12px 0;
  padding-left: 24px;
}
.legal-modal-body li {
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.legal-modal-body ol ol,
.legal-modal-body ul ul {
  margin-top: 8px;
}
.legal-modal-body a {
  color: var(--accent);
  text-decoration: none;
}
.legal-modal-body a:hover {
  text-decoration: underline;
}
.legal-date {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.legal-note {
  font-size: 0.82rem;
  color: var(--text-dim);
  background: var(--bg-warm);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 12px 0;
}
.legal-addendum {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

@media(max-width:640px) {
  .legal-modal { padding: 10px; }
  .legal-modal-content { max-height: 90vh; border-radius: 12px; }
  .legal-modal-body { padding: 24px 20px; }
  .legal-modal-body h2 { font-size: 1.3rem; }
  .legal-modal-body h3 { font-size: 1rem; }
  .legal-modal-close { top: 12px; right: 12px; font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   사주 개념 가이드 스타일
═══════════════════════════════════════════════════════════════════════════ */
.saju-section {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.saju-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.saju-section h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}
.saju-section p {
  margin-bottom: 10px;
  line-height: 1.7;
}
.saju-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.saju-pillar {
  background: var(--bg-warm);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  border: 1px solid var(--border);
}
.saju-pillar b {
  color: var(--accent);
}
.saju-pillar small {
  display: block;
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 0.8rem;
}
.saju-ganzi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.saju-gan, .saju-ji {
  background: var(--bg-warm);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  border: 1px solid var(--border);
}
.saju-gan b, .saju-ji b {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.saju-gan small, .saju-ji small {
  display: block;
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 0.8rem;
}
.saju-oheng {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.saju-oheng span {
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}
.oh-mok { background: #2d5a27; color: #a8e6a3; }
.oh-hwa { background: #7a2d2d; color: #ffb3b3; }
.oh-to { background: #6b5a3d; color: #e6d5a8; }
.oh-geum { background: #4a4a5a; color: #d4d4e6; }
.oh-su { background: #2d4a6b; color: #a8c8e6; }
.saju-sipsung {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.saju-sipsung div {
  background: var(--bg-warm);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  border: 1px solid var(--border);
}
.saju-sipsung b {
  color: var(--accent);
}