@import url('./design-system.css');  /* ⭐ 디자인 단일 기준 — 전 페이지 통일 (여기 1곳서만 수정) */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   사주8 공통 UI — floating + 햄버거 + drawer
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 공통 변수 (페이지에 정의 없으면 fallback) */
:root{
  --ui-accent: var(--accent, var(--gold, #5b4b8a));
  --ui-accent-soft: var(--accent-soft, var(--pearl-gold, #8b7fa8));
  --ui-accent-bg: var(--accent-bg, rgba(91,75,138,0.1));
  --ui-ink: var(--ink, #020520);
  --ui-slate: var(--slate, var(--ink-mid, #374151));
  --ui-ash: var(--ash, var(--ink-mute, #696a72));
  --ui-bg: var(--canvas, var(--bg-deep, #fcfcfc));
  --ui-card: var(--card-bg, var(--bg-soft, #ffffff));
  --ui-line: var(--line, #e0ddd6);
}

/* ━━━━━━━━━ 햄버거 버튼 (topbar 우측) ━━━━━━━━━ */
.ui-hamburger{
  background:transparent;border:1px solid var(--ui-ink);
  width:36px;height:36px;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ui-ink);cursor:pointer;font-size:16px;
  transition:background .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.ui-hamburger:hover{background:var(--ui-ink);color:#fff;}

/* ━━━━━━━━━ floating 우하단 버튼 (맨위, 뒤로) ━━━━━━━━━ */
.ui-floats{
  position:fixed;right:18px;bottom:24px;
  display:flex;flex-direction:column;gap:8px;
  z-index:200;pointer-events:none;
}
.ui-float-btn{
  pointer-events:auto;
  width:44px;height:44px;border-radius:9999px;
  background:var(--ui-card);border:1px solid var(--ui-line);
  color:var(--ui-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  box-shadow:rgba(91,75,138,0.12) 0 6px 20px -8px,
             rgba(0,0,0,0.06) 0 2px 8px -2px;
  transition:transform .15s, box-shadow .15s, opacity .25s;
  -webkit-tap-highlight-color:transparent;
}
.ui-float-btn:hover{
  transform:translateY(-2px);
  box-shadow:rgba(91,75,138,0.2) 0 10px 28px -10px;
  color:var(--ui-accent);border-color:var(--ui-accent-soft);
}
.ui-float-btn:active{transform:scale(0.94);}
.ui-float-btn.up{opacity:0;pointer-events:none;}
.ui-float-btn.up.visible{opacity:1;pointer-events:auto;}

/* ━━━━━━━━━ drawer overlay ━━━━━━━━━ */
.ui-drawer-overlay{
  position:fixed;inset:0;
  background:rgba(20,20,30,0.4);backdrop-filter:blur(4px);
  z-index:998;opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.ui-drawer-overlay.open{opacity:1;pointer-events:auto;}

/* ━━━━━━━━━ drawer (우측) ━━━━━━━━━ */
.ui-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(340px, 88vw);
  background:var(--ui-bg);
  z-index:999;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(0.4,0,0.2,1);
  display:flex;flex-direction:column;
  box-shadow:rgba(0,0,0,0.15) -10px 0 40px -10px;
}
.ui-drawer.open{transform:translateX(0);}

.ui-drawer-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--ui-line);
}
.ui-drawer-title{
  font-size:16px;font-weight:700;letter-spacing:-0.3px;
  color:var(--ui-ink);
}
.ui-drawer-title .num{color:var(--ui-accent);}
.ui-drawer-close{
  background:transparent;border:none;color:var(--ui-ash);
  font-size:22px;cursor:pointer;width:32px;height:32px;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.ui-drawer-close:hover{background:var(--ui-card);}

.ui-drawer-body{
  flex:1;overflow-y:auto;padding:8px 0 24px;
}

/* drawer 섹션 */
.ui-drawer-section{
  padding:14px 20px;
  border-bottom:1px solid var(--ui-line);
}
.ui-drawer-section:last-child{border-bottom:none;}
.ui-drawer-section-h{
  font-size:11px;color:var(--ui-ash);
  letter-spacing:0.06em;font-weight:600;
  text-transform:uppercase;margin-bottom:10px;
}

/* drawer 메뉴 아이템 */
.ui-drawer-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;cursor:pointer;
  text-decoration:none;color:var(--ui-ink);
  transition:background .15s;
  font-size:14px;font-weight:500;
  border:none;background:transparent;width:100%;text-align:left;
}
.ui-drawer-item:hover{background:var(--ui-card);}
.ui-drawer-item .icon{font-size:18px;width:24px;text-align:center;}
.ui-drawer-item .sub{font-size:12px;color:var(--ui-ash);margin-left:auto;}

/* drawer 사주 카드 — 미니멀 (디자인 중복 방지) */
.ui-drawer-person{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;cursor:pointer;
  transition:background .15s;
}
.ui-drawer-person:hover{background:var(--ui-card);}
.ui-drawer-person.active{background:transparent;}
.ui-drawer-person .avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--ui-card);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  flex-shrink:0;
}
.ui-drawer-person.active .avatar{
  background:var(--ui-accent-bg);
  color:var(--ui-accent);
}
.ui-drawer-person-info{flex:1;min-width:0;}
.ui-drawer-person-name{
  font-size:14px;font-weight:600;color:var(--ui-ink);
  letter-spacing:-0.2px;
  display:flex;align-items:center;gap:6px;
}
.ui-drawer-person.active .ui-drawer-person-name::after{
  content:'✓';color:var(--ui-accent);font-size:12px;font-weight:700;
}
.ui-drawer-person-name .rel{
  font-size:10px;color:var(--ui-ash);
  font-weight:500;
}
.ui-drawer-person-meta{
  font-size:11px;color:var(--ui-ash);margin-top:1px;
}

/* drawer 안 "+ 사주 정보 추가" 버튼 */
.ui-drawer-add{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:12px;
  background:var(--ui-accent-bg);
  color:var(--ui-accent);
  font-size:14px;font-weight:600;cursor:pointer;
  text-decoration:none;
  border:1.5px dashed var(--ui-accent-soft);
  transition:background .15s, border-style .15s;
}
.ui-drawer-add:hover{
  background:var(--ui-accent);color:#fff;
  border-style:solid;
}
.ui-drawer-add .plus{font-size:18px;line-height:1;}

/* footer 약관/개인정보 링크 (자동 주입) */
.ui-footer-links{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--ui-line);
  font-size:11px;color:var(--ui-ash);
  letter-spacing:0.02em;text-align:center;
}
.ui-footer-links a{
  color:var(--ui-ash);text-decoration:none;
  font-family:'Inter','Pretendard',sans-serif;font-style:normal;
}
.ui-footer-links a:hover{color:var(--ui-accent);text-decoration:underline;}
.ui-footer-links .sep{margin:0 6px;opacity:0.5;}

@media(max-width:380px){
  .ui-floats{right:14px;bottom:18px;}
  .ui-float-btn{width:40px;height:40px;}
}