/* ═══════════════════════════════════════════════════════════════
   account-ui.css — 메뉴 드로어 프로필 카드 + streak 배지 + 12간지 + 모달
   index.html / favorites.html / portfolio.html 공통 사용
   ═══════════════════════════════════════════════════════════════ */




/* ─── 프로필 카드 + streak 배지 + 모달 ─── */
.md-profile-card{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  background:transparent;border:none;width:100%;
  cursor:pointer;font-family:inherit;text-align:left;
  transition:background .12s;
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box;     /* width:100% 가 padding 포함 — 로그아웃 버튼 삐져나가는 사고 방지 */
  overflow:hidden;           /* 내부 텍스트 (이메일) 폭 초과 시 ellipsis 가능하게 */
}
.md-profile-card:hover{background:var(--bg2)}
.md-profile-actions{
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;gap:4px;
}
.md-profile-edit-icon,
.md-profile-logout-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:7px;
  color:var(--muted);opacity:0.55;
  text-decoration:none;
  transition:opacity .12s,background .12s,color .12s;
  -webkit-tap-highlight-color:transparent;
}
.md-profile-card:hover .md-profile-edit-icon{opacity:1;color:var(--accent)}
.md-profile-logout-icon:hover{opacity:1;color:var(--down);background:var(--bg2)}
.md-profile-logout-icon svg{display:block}
/* ─── 출석 streak 배지 — 배지 자체가 점진적으로 타오르는 효과 (밖으로 번지는 aura 포함) ─── */
.md-streak{
  position:relative;
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:600;letter-spacing:-0.005em;
  padding:2px 8px;border-radius:10px;
  background:#f0f0f2;color:#888;
  border:1px solid #e5e5e8;
  isolation:isolate;
}
.md-streak-text{line-height:1.3;position:relative;z-index:1}
/* 외부 aura (배지 위로 타오르는 불꽃) — base 는 비어있고 tier 별로 활성화.
   inset: top(-) right(-) bottom(+) left(-) — 위로 멀리, 아래는 빠져나가지 않게.
   radial-gradient at 50% 95% — 그라데이션 원점이 aura 의 BOTTOM 에서 시작 → 위로 fade. */
.md-streak::before{
  content:"";position:absolute;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  opacity:0;
}
/* tier 0: 1-2일 — plain, aura 없음 */
.md-streak.tier-0{
  background:#f5f5f7;color:#999;
  border:1px solid #e8e8ec;
}
/* tier 1: 3-7일 — cream + 작은 위쪽 spark */
.md-streak.tier-1{
  background:#fff5e2;color:#a86018;
  border:1px solid #f0d8a8;
}
/* tier 1 (3-7일) — 본격 위쪽 화염 (시작부터 활활) */
.md-streak.tier-1::before{
  opacity:0.7;
  inset:-13px -6px 2px -6px;
  background:radial-gradient(ellipse 90% 110% at 50% 95%,
    rgba(255,200,80,0.55) 0%,
    rgba(255,120,32,0.4) 30%,
    rgba(255,60,16,0.18) 55%,
    transparent 80%);
  filter:blur(4px);
}
/* tier 2: 8-30일 — peach + 살짝 더 큼 */
.md-streak.tier-2{
  background:linear-gradient(135deg,#fff0d0,#ffd890);
  color:#7a3a08;
  border:1px solid #e8a040;
  box-shadow:0 0 4px rgba(255,160,40,0.3);
}
.md-streak.tier-2::before{
  opacity:0.72;
  inset:-15px -6px 2px -6px;
  background:radial-gradient(ellipse 92% 112% at 50% 95%,
    rgba(255,205,85,0.55) 0%,
    rgba(255,124,32,0.42) 30%,
    rgba(255,55,12,0.22) 55%,
    transparent 80%);
  filter:blur(4.5px);
}
/* tier 3: 31-100일 — coral + 또 살짝 */
.md-streak.tier-3{
  background:linear-gradient(135deg,#ffa848,#ff6428);
  color:#fff5e0;
  border:1px solid #d04010;
  box-shadow:0 0 8px rgba(255,80,16,0.5);
  text-shadow:0 1px 1px rgba(120,30,0,0.4);
}
.md-streak.tier-3::before{
  opacity:0.75;
  inset:-18px -8px 2px -8px;
  background:radial-gradient(ellipse 94% 114% at 50% 95%,
    rgba(255,210,90,0.58) 0%,
    rgba(255,128,32,0.46) 28%,
    rgba(255,50,10,0.25) 55%,
    transparent 82%);
  filter:blur(5px);
}
/* tier 4: 101-249일 — 짙은 빨강+금 + 다층 추가 */
.md-streak.tier-4{
  background:linear-gradient(to top,#a02008 0%,#ff5028 50%,#ffc040 100%);
  color:#fff5d8;
  border:1px solid #e0a028;
  box-shadow:0 0 10px rgba(255,96,16,0.65),
             inset 0 -1px 3px rgba(255,200,80,0.25);
  text-shadow:0 1px 1.5px rgba(80,8,0,0.55);
  font-weight:700;
}
.md-streak.tier-4::before{
  opacity:0.78;
  inset:-21px -9px 2px -9px;
  background:
    radial-gradient(ellipse 95% 115% at 50% 95%,
      rgba(255,220,120,0.62) 0%,
      rgba(255,128,32,0.48) 25%,
      rgba(255,40,8,0.28) 50%,
      transparent 82%),
    radial-gradient(ellipse 50% 60% at 50% 80%,
      rgba(255,255,180,0.4) 0%,
      transparent 60%);
  filter:blur(5px);
}
/* tier 5: 250+일 — 무지개 배지 + 흰 별 반짝이 (불 효과 X) */
.md-streak.tier-5{
  background:linear-gradient(110deg,
    #ff5050 0%, #ff9020 16%, #ffd040 32%, #50c050 50%, #3080ff 66%, #8040ff 82%, #ff5080 100%);
  color:#ffffff;
  border:1.5px solid rgba(255,255,255,0.9);
  box-shadow:0 0 6px rgba(255,200,255,0.5),
             0 0 12px rgba(128,100,220,0.35),
             inset 0 0 4px rgba(255,255,255,0.4);
  text-shadow:0 1px 2px rgba(0,0,0,0.55),0 0 3px rgba(0,0,0,0.25);
  font-weight:700;
  letter-spacing:-0.005em;
}
/* 반짝이 — 4-point 별 6개 (위치/크기 다양) */
.md-streak.tier-5::before{
  opacity:1;
  inset:-10px -14px -8px -14px;
  filter:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z' fill='white'/></svg>") 6% 25% / 9px 9px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z' fill='white'/></svg>") 95% 30% / 6px 6px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z' fill='white'/></svg>") 14% 82% / 10px 10px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z' fill='white'/></svg>") 88% 80% / 7px 7px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z' fill='white'/></svg>") 50% 5% / 5px 5px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z' fill='white'/></svg>") 50% 95% / 5px 5px no-repeat;
}
  /* ════════════════════════════════════════════════════════════
     v2 디자인 — 시맨틱 클래스 + 종별 실루엣 + 디테일
     양 / 돼지 / 소 (3개만 시범)
     ════════════════════════════════════════════════════════════ */

  .zodiac-icon.zc {
    display:inline-block;flex-shrink:0;
    width:36px;height:36px;border-radius:10px;
    position:relative;
    overflow:visible;
    transition:transform 0.2s ease;
  }
  .zodiac-icon.zc.lg{width:52px;height:52px;border-radius:14px}
  .zodiac-icon.zc.xl{width:80px;height:80px;border-radius:20px}
  .card:hover .zc { transform:scale(1.06); }

  /* 동물별 카드 배경 (이전 v1 ZODIAC_META 톤 복원) */
  .zc-rat     { background:#EDE5D5; }
  .zc-ox      { background:#F0E0C8; }
  .zc-tiger   { background:#FFE0B8; }
  .zc-rabbit  { background:#FFEAEE; }
  .zc-dragon  { background:#DDF0DE; }
  .zc-snake   { background:#E5EFD8; }
  .zc-horse   { background:#EFE0CC; }
  .zc-sheep   { background:#F8F2E8; }
  .zc-monkey  { background:#F4DCBC; }
  .zc-rooster { background:#FFF3CC; }
  .zc-dog     { background:#F0E8D8; }
  .zc-pig     { background:#FCE0EA; }

  /* 공통 — face 베이스 (전체 작게) */
  .zc .face {
    position:absolute;
    width:64%; height:64%;        /* 78→64 전체 축소 */
    top:24%; left:18%;            /* 카드 중앙으로 */
    border-radius:50%;
    box-sizing:border-box;
  }
  /* 눈 (검정 타원 + 흰 하이라이트 점) */
  .zc .eye {
    position:absolute;
    width:13%;height:16%;
    background:#1a1a1a;
    border-radius:50%;
    top:38%;
    z-index:5;
  }
  .zc .eye-l { left:24%; }
  .zc .eye-r { right:24%; }
  .zc .pupil {
    position:absolute;
    width:35%;height:35%;
    background:#fff;
    border-radius:50%;
    top:15%;left:15%;
  }

  /* ───── 🐑 양 v3 — 머리 위 곱슬 wool crown + face + peach 작은 귀 ───── */
  .zc-sheep .face {
    position:absolute;
    width:58%; height:54%;
    top:36%; left:21%;
    background:#fafafa;
    border:1.5px solid #d4c4a8;
    border-radius:50%;
    box-sizing:border-box;
    z-index:3;
  }
  /* 곱슬 wool — 머리 위 7개 curl (face 위로 솟은 crown) */
  .zc-sheep .wool {
    position:absolute;
    background:#ffffff;
    border:1.5px solid #c8b894;
    border-radius:50%;
    box-sizing:border-box;
    z-index:4;                      /* face 위로 → crown 효과 (face top 살짝 덮음) */
  }
  /* wool 7개 — 모두 face 또는 옆 wool 과 명확히 OVERLAP. 공중 부유 X.
     face 중심 (50,63), 반경 28% 기준. 각 wool 중심 distance 32% 안쪽 → face 와 6%+ 겹침. */
  .zc-sheep .wool-1 { top:20%; left:39%; width:22%; height:22%; }   /* 0° 정수리 (50,31) */
  .zc-sheep .wool-2 { top:24%; left:30%; width:18%; height:18%; }   /* -20° (39,33) */
  .zc-sheep .wool-3 { top:24%; right:30%; width:18%; height:18%; }  /* +20° (61,33) */
  .zc-sheep .wool-4 { top:32%; left:19%; width:17%; height:17%; }   /* -45° (27,40) */
  .zc-sheep .wool-5 { top:32%; right:19%; width:17%; height:17%; }  /* +45° (73,40) */
  .zc-sheep .wool-6 { top:44%; left:14%; width:17%; height:17%; }   /* -65° (22,52) → ear 연결 bridge */
  .zc-sheep .wool-7 { top:44%; right:14%; width:17%; height:17%; }  /* +65° */
  .zc-sheep .wool-neck-l { top:81%; left:32%; width:12%; height:12%; } /* 7시 (목 좌측) */
  .zc-sheep .wool-neck   { top:83%; left:43%; width:14%; height:14%; } /* 6시 목/턱 (face 바닥 걸침) */
  .zc-sheep .wool-neck-r { top:81%; right:32%; width:12%; height:12%; } /* 5시 (목 우측) */
  /* 작은 귀 — 머리 위쪽 -55°/+55° 각도, wool-4 와 wool-6 사이 끼이는 자연스러운 위치 */
  .zc-sheep .ear {
    position:absolute;
    width:12%; height:17%;
    background:#e8c4a0;
    border:1.5px solid #b8946c;
    border-radius:50% 50% 30% 30% / 70% 70% 30% 30%;
    box-sizing:border-box;
    top:36%;                        /* 머리 위쪽으로 (was 53%) */
    z-index:5;                      /* wool 위 → wool 사이로 빠져나옴 */
  }
  .zc-sheep .ear-l { left:14%; transform:rotate(-30deg); }   /* base 머리 쪽, 끝 down-left 로 늘어짐 */
  .zc-sheep .ear-r { right:14%; transform:rotate(30deg); }
  /* 양 눈 */
  .zc-sheep .eye {
    width:10%; height:13%;
    top:54%;
  }
  .zc-sheep .eye-l { left:31%; }
  .zc-sheep .eye-r { right:31%; }
  /* 작은 분홍 코 */
  .zc-sheep .nose {
    position:absolute;
    width:9%; height:7%;
    background:#ffb0b8;
    border-radius:50% 50% 60% 60% / 50% 50% 80% 80%;
    top:70%; left:45.5%;
    z-index:4;
  }

  /* ───── 🐷 돼지 — 큰 분홍 코 (중앙) + 둥근 분홍 귀 + 콧구멍 2개 ───── */
  .zc-pig .face {
    background:#fad0dc;
    border:1.5px solid #e8b8c4;
    box-sizing:border-box;
  }
  .zc-pig .ear {
    position:absolute;
    width:18%;height:22%;
    background:#f8b0c8;
    border:1.5px solid #e8a0b8;
    /* 둥근 삼각형 (위 좁고 아래 넓음) */
    border-radius:50% 50% 30% 30% / 70% 70% 30% 30%;
    box-sizing:border-box;
    top:-4%;
    z-index:1;
  }
  .zc-pig .ear::after {
    /* 안쪽 진한 분홍 — 귓구멍 */
    content:""; position:absolute;
    inset:25% 30% 35% 30%;
    background:#e890a8;
    border-radius:50% 50% 30% 30% / 70% 70% 30% 30%;
  }
  .zc-pig .ear-l { left:18%; transform:rotate(-20deg); }
  .zc-pig .ear-r { right:18%; transform:rotate(20deg); }
  .zc-pig .snout {
    position:absolute;
    width:38%;height:24%;
    background:#f488a8;
    border-radius:50%;
    top:54%;left:31%;
    border:1.5px solid #e0709a;
    box-sizing:border-box;
  }
  .zc-pig .nostril {
    position:absolute;
    width:18%;height:42%;
    background:#a85476;
    border-radius:50%;
    top:30%;
  }
  .zc-pig .nostril-l { left:22%; }
  .zc-pig .nostril-r { right:22%; }

  /* ───── 🐮 소 — 가로 사각형 + 짧은 뿔 + 큰 주둥이 + 콧구멍 ───── */
  .zc-ox .face {
    background:#c49866;
    border-radius: 45% 45% 50% 50% / 55% 55% 50% 50%;
    width:70%; height:62%;        /* 84×74 → 70×62 축소 */
    left:15%; top:25%;
  }
  .zc-ox .horn {
    position:absolute;
    width:10%;height:18%;
    background:linear-gradient(to bottom,#f0dcb8,#c8a878);
    border-radius:60% 60% 30% 30%;
    top:-12%;
    z-index:0;
  }
  .zc-ox .horn-l { left:18%; transform:rotate(-20deg); }
  .zc-ox .horn-r { right:18%; transform:rotate(20deg); }
  .zc-ox .ear {
    position:absolute;
    width:14%;height:14%;
    background:#a87858;
    border-radius:50%;
    top:8%;
  }
  .zc-ox .ear-l { left:5%; transform:rotate(-30deg); }
  .zc-ox .ear-r { right:5%; transform:rotate(30deg); }
  .zc-ox .snout {
    position:absolute;
    width:48%;height:30%;
    background:#f8dcc0;
    border-radius:48% 48% 50% 50% / 50% 50% 60% 60%;
    top:55%;left:26%;
    border:1.5px solid #d4b48c;
    box-sizing:border-box;
  }
  .zc-ox .nostril {
    position:absolute;
    width:14%;height:32%;
    background:#1a1a1a;
    border-radius:50%;
    top:32%;
  }
  .zc-ox .nostril-l { left:22%; }
  .zc-ox .nostril-r { right:22%; }

  /* ───── 🐭 쥐 — 미키마우스 스타일 큰 둥근 귀 + 수염 ───── */
  .zc-rat .face {
    background:#cfd3d8;
    border:1.5px solid #9fa6ad;
    box-sizing:border-box;
  }
  .zc-rat .ear {
    position:absolute;
    width:28%; height:28%;          /* 더 큼 (미키마우스 톤) */
    background:#cfd3d8;
    border:1.5px solid #9fa6ad;
    border-radius:50%;
    box-sizing:border-box;
    top:10%;                        /* face top 24% 와 일부 겹침 → 머리에서 자라남 */
    z-index:0;                      /* face 뒤로 (자연스럽게 솟아남) */
  }
  .zc-rat .ear::after {
    content:""; position:absolute;
    inset:22%;
    background:#ffcdd9;
    border-radius:50%;
  }
  .zc-rat .ear-l { left:10%; transform:rotate(-12deg); }
  .zc-rat .ear-r { right:10%; transform:rotate(12deg); }
  .zc-rat .nose {
    position:absolute;
    width:11%; height:9%;
    background:#ff8fa8;
    border:1.5px solid #d4708a;
    border-radius:50%;
    top:62%; left:44.5%;
    z-index:4;
    box-sizing:border-box;
  }
  /* 수염 — 코 양옆 3가닥씩 (위↗ 중간─ 아래↘ fan 패턴) */
  .zc-rat .whisker {
    position:absolute;
    width:22%; height:0;
    border-top:1.5px solid #6a7280;
    z-index:3;
  }
  .zc-rat .whisker-l1 { left:5%;  top:60%; transform:rotate(12deg);  transform-origin:right center; }  /* 좌 위 ↗ */
  .zc-rat .whisker-l2 { left:5%;  top:65%; }                                                            /* 좌 중 ─ */
  .zc-rat .whisker-l3 { left:5%;  top:70%; transform:rotate(-12deg); transform-origin:right center; }  /* 좌 아래 ↘ */
  .zc-rat .whisker-r1 { right:5%; top:60%; transform:rotate(-12deg); transform-origin:left  center; }  /* 우 위 ↖ (mirror) */
  .zc-rat .whisker-r2 { right:5%; top:65%; }                                                            /* 우 중 ─ */
  .zc-rat .whisker-r3 { right:5%; top:70%; transform:rotate(12deg);  transform-origin:left  center; }  /* 우 아래 ↙ (mirror) */

  /* ───── 🐰 토끼 — 긴 귀지만 카드 안에 들어가도록 ───── */
  .zc-rabbit .face {
    background:#fafafa;
    border:1.5px solid #e8c4d0;
    box-sizing:border-box;
    /* 공통 face 와 동일하게 (전체 축소 적용) */
  }
  .zc-rabbit .ear {
    position:absolute;
    width:13%; height:32%;       /* 50→32 (짧게) */
    background:#fafafa;
    border:1.5px solid #e8c4d0;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    box-sizing:border-box;
    top:2%;                       /* -44→2 (카드 안) */
    z-index:1;
  }
  .zc-rabbit .ear::after {
    content:""; position:absolute;
    inset:18% 25% 18% 25%;
    background:#fce4ec;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  }
  .zc-rabbit .ear-l { left:30%; transform:rotate(-6deg); }
  .zc-rabbit .ear-r { right:30%; transform:rotate(6deg); }
  .zc-rabbit .nose {
    /* Y자 분홍 코 */
    position:absolute;
    width:9%; height:8%;
    background:#ff8898;
    border:1.5px solid #d4708a;
    border-radius:60% 60% 40% 40% / 50% 50% 70% 70%;
    top:55%; left:45.5%;
    z-index:4;
    box-sizing:border-box;
  }
  .zc-rabbit .nose::after {
    content:""; position:absolute;
    width:1.5px; height:80%;
    background:#a87858;
    bottom:-80%; left:50%;
    transform:translateX(-50%);
  }
  /* 수염 — 코 양옆 3가닥씩 (위↗ 중간─ 아래↘ fan 패턴) */
  .zc-rabbit .whisker {
    position:absolute;
    width:24%; height:0;
    border-top:1.5px solid #c8a890;
    z-index:3;
  }
  .zc-rabbit .whisker-l1 { left:3%;  top:53%; transform:rotate(12deg);  transform-origin:right center; }
  .zc-rabbit .whisker-l2 { left:3%;  top:58%; }
  .zc-rabbit .whisker-l3 { left:3%;  top:63%; transform:rotate(-12deg); transform-origin:right center; }
  .zc-rabbit .whisker-r1 { right:3%; top:53%; transform:rotate(-12deg); transform-origin:left  center; }
  .zc-rabbit .whisker-r2 { right:3%; top:58%; }
  .zc-rabbit .whisker-r3 { right:3%; top:63%; transform:rotate(12deg);  transform-origin:left  center; }

  /* ───── 🐶 개 — face 양옆에서 자연스럽게 늘어진 처진 귀 ───── */
  .zc-dog .face {
    background:#d7a86e;
    border:1.5px solid #a87838;
    box-sizing:border-box;
  }
  .zc-dog .ear {
    position:absolute;
    width:20%; height:44%;          /* 더 길게 */
    background:#a87838;
    border:1.5px solid #6a4818;
    /* 위 둥글 (face 붙음), 아래 좁아짐 (귀 끝) */
    border-radius:60% 60% 40% 40% / 70% 70% 30% 30%;
    box-sizing:border-box;
    top:24%;
    z-index:0;
    transform-origin:50% 5%;        /* 위쪽 중심으로 회전 → 자연스러운 처짐 */
  }
  .zc-dog .ear::after {
    content:""; position:absolute;
    inset:18% 28% 25% 28%;
    background:#6a4818;
    border-radius:60% 60% 40% 40% / 70% 70% 30% 30%;
  }
  .zc-dog .ear-l { left:8%; transform:rotate(-30deg); }    /* 더 옆/아래로 처짐 */
  .zc-dog .ear-r { right:8%; transform:rotate(30deg); }
  .zc-dog .nose {
    position:absolute;
    width:14%; height:11%;
    background:#1a1a1a;
    border-radius:50%;
    top:53%; left:43%;
    z-index:4;
  }

  /* ───── 🐯 호랑이 — 진한 주황 + 흰 muzzle + 줄무늬 7개 + 분홍 코 + 수염 ───── */
  .zc-tiger .face {
    background:#ffa838;
    border:1.5px solid #b85800;
    box-sizing:border-box;
  }
  /* 흰 muzzle — 입주변 흰색 패치 */
  .zc-tiger .muzzle {
    position:absolute;
    width:50%; height:34%;
    background:#fff5e0;
    border-radius:50%;
    top:54%; left:25%;
    z-index:3;
  }
  /* 둥근 귀 — 더 크게 + 안쪽 분홍 */
  .zc-tiger .ear {
    position:absolute;
    width:22%; height:24%;
    background:#ffa838;
    border:1.5px solid #b85800;
    border-radius:50%;
    box-sizing:border-box;
    top:-6%;
    z-index:1;
  }
  .zc-tiger .ear::after {
    content:""; position:absolute;
    inset:25%;
    background:#ff8898;
    border-radius:50%;
  }
  .zc-tiger .ear-l { left:9%; transform:rotate(-15deg); }
  .zc-tiger .ear-r { right:9%; transform:rotate(15deg); }
  /* 줄무늬 — oval 형태 (양끝 뾰족), 자연스러운 길이/각도 변화 */
  .zc-tiger .stripe {
    position:absolute;
    background:#1a0a00;
    border-radius:50%;             /* 양끝 둥글 oval */
    z-index:4;
  }
  /* 이마 줄무늬 — 길이/각도 다양 */
  .zc-tiger .stripe-tl { top:14%; left:24%; width:3.5%; height:15%; transform:rotate(15deg); }
  .zc-tiger .stripe-tc { top:10%; left:48.25%; width:3.5%; height:18%; }
  .zc-tiger .stripe-tr { top:14%; right:24%; width:3.5%; height:15%; transform:rotate(-15deg); }
  /* 좌측 볼 줄무늬 2개 — 더 작고 곡선처럼 */
  .zc-tiger .stripe-cl1 { top:40%; left:18%; width:2.5%; height:10%; transform:rotate(25deg); }
  .zc-tiger .stripe-cl2 { top:50%; left:13%; width:2.5%; height:8%; transform:rotate(20deg); }
  /* 우측 볼 줄무늬 2개 */
  .zc-tiger .stripe-cr1 { top:40%; right:18%; width:2.5%; height:10%; transform:rotate(-25deg); }
  .zc-tiger .stripe-cr2 { top:50%; right:13%; width:2.5%; height:8%; transform:rotate(-20deg); }
  /* 분홍 코 (역삼각) */
  .zc-tiger .nose {
    position:absolute;
    width:11%; height:8%;
    background:#ff6080;
    border:1.5px solid #c03050;
    border-radius:50% 50% 60% 60% / 50% 50% 80% 80%;
    top:59%; left:44.5%;
    z-index:5;
    box-sizing:border-box;
  }
  /* 수염 — 양쪽 2가닥씩 (총 4) */
  .zc-tiger .whisker {
    position:absolute;
    width:18%; height:0;
    border-top:1.5px solid #5a2010;
    z-index:4;
  }
  .zc-tiger .whisker-l1 { left:4%; top:64%; transform:rotate(8deg);  transform-origin:right center; }
  .zc-tiger .whisker-l2 { left:4%; top:70%; transform:rotate(-8deg); transform-origin:right center; }
  .zc-tiger .whisker-r1 { right:4%; top:64%; transform:rotate(-8deg); transform-origin:left center; }
  .zc-tiger .whisker-r2 { right:4%; top:70%; transform:rotate(8deg);  transform-origin:left center; }

  /* ───── 🐲 용 — 녹색 + 황금 뿔 + 비늘 점 + 빨간 콧구멍 + 송곳니 + 콧수염 ───── */
  .zc-dragon .face {
    background:#5fc04a;
    border:1.5px solid #2a7820;
    box-sizing:border-box;
  }
  /* 황금 뿔 — 메인 세로 (큼!) + 옆 가지 (ㅏ/ㅓ 모양) + ridge + 하이라이트 */
  .zc-dragon .horn {
    position:absolute;
    width:14%; height:34%;             /* was 10×24 → 더 크게 */
    background:linear-gradient(135deg, #fff8a0 0%, #ffd040 50%, #a06800 100%);
    border:1.5px solid #80540a;
    border-radius:50% 50% 30% 30%;
    box-sizing:border-box;
    top:-22%;                           /* 위로 더 빼냄 */
    z-index:1;
  }
  /* 마디 (horizontal ridges) */
  .zc-dragon .horn::before {
    content:""; position:absolute;
    inset:0;
    background:repeating-linear-gradient(
      to bottom,
      transparent 0%, transparent 25%,
      rgba(80,40,0,0.45) 27%, rgba(80,40,0,0.45) 30%,
      transparent 32%
    );
    border-radius:inherit;
    z-index:1;
  }
  /* 하이라이트 */
  .zc-dragon .horn::after {
    content:""; position:absolute;
    width:32%; height:55%;
    background:rgba(255,255,255,0.55);
    top:8%; left:18%;
    border-radius:50%;
    z-index:2;
  }
  /* 옆 가지 (prong) — 더 크게, ㅏ/ㅓ 의 가지 부분 */
  .zc-dragon .prong {
    position:absolute;
    width:120%; height:42%;            /* was 75×30 → 더 크게 */
    background:linear-gradient(135deg, #fff8a0 0%, #ffd040 50%, #a06800 100%);
    border:1.5px solid #80540a;
    border-radius:50% 30% 30% 50% / 60% 40% 40% 60%;
    box-sizing:border-box;
    top:28%;
    z-index:1;
  }
  .zc-dragon .horn-l .prong { left:-110%; transform:scaleX(-1); }   /* ㅓ — 가지 왼쪽으로 */
  .zc-dragon .horn-r .prong { right:-110%; }                        /* ㅏ — 가지 오른쪽으로 */
  .zc-dragon .horn-l { left:22%; transform:rotate(-20deg); }
  .zc-dragon .horn-r { right:22%; transform:rotate(20deg); }
  /* 큰 눈 + 황금 동공 */
  .zc-dragon .pupil {
    width:38%; height:38%;
    background:#ffd040;
  }
  /* 비늘 — face 양옆 작은 점 4개 */
  .zc-dragon .scale {
    position:absolute;
    width:5%; height:5%;
    background:#3a8a28;
    border-radius:50%;
    z-index:2;
    opacity:0.5;
  }
  .zc-dragon .scale-l1 { top:36%; left:20%; }
  .zc-dragon .scale-l2 { top:48%; left:16%; }
  .zc-dragon .scale-r1 { top:36%; right:20%; }
  .zc-dragon .scale-r2 { top:48%; right:16%; }
  /* 콧등 융기 — 면 위에 살짝 어두운 영역 */
  .zc-dragon .snout {
    position:absolute;
    width:34%; height:20%;
    background:rgba(42,120,32,0.3);
    border-radius:50%;
    top:50%; left:33%;
    z-index:2;
  }
  /* 빨간 콧구멍 */
  .zc-dragon .nostril {
    position:absolute;
    width:6%; height:7%;
    background:#d80000;
    border:1px solid #800000;
    border-radius:50%;
    top:54%;
    z-index:4;
    box-sizing:border-box;
  }
  .zc-dragon .nostril-l { left:38%; }
  .zc-dragon .nostril-r { right:38%; }
  /* 송곳니 — 입에서 작은 흰 삼각 2개 */
  .zc-dragon .fang {
    position:absolute;
    width:0; height:0;
    border-left:2.5% solid transparent;
    border-right:2.5% solid transparent;
    border-top:7% solid #ffffff;
    top:70%;
    z-index:5;
  }
  .zc-dragon .fang-l { left:42%; }
  .zc-dragon .fang-r { right:42%; }
  /* 콧수염 — SVG inline path 로 3차함수 S-curve, 얼굴 뚫으면서 끝부분 살짝 휘어짐 */
  .zc-dragon .mustache {
    position:absolute;
    width:42%; height:24%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'><path d='M 5 10 C 35 5, 35 45, 60 38 C 80 33, 88 18, 95 22' stroke='%23111111' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat;
    background-size:100% 100%;
    top:58%;
    z-index:4;
  }
  .zc-dragon .mustache-l { left:6%; transform:scaleX(-1); }    /* 좌측은 미러 */
  .zc-dragon .mustache-r { right:6%; }
  /* 화난 눈썹 — V자 모양 (좌 \, 우 /) 가운데로 모임 */
  .zc-dragon .brow {
    position:absolute;
    width:17%; height:4%;
    background:#2a1810;
    border-radius:50%;
    z-index:5;
    top:28%;
  }
  .zc-dragon .brow-l { left:16%; transform:rotate(20deg); }
  .zc-dragon .brow-r { right:16%; transform:rotate(-20deg); }
  /* 입 — 누운 3 (ω) 모양 곡선, 뒤집어서 가운데 위로 솟음 */
  .zc-dragon .mouth {
    position:absolute;
    width:26%; height:9%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><path d='M 5 22 C 20 5, 35 5, 50 18 C 65 5, 80 5, 95 22' stroke='%233a2010' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat;
    background-size:100% 100%;
    top:73%;
    left:37%;
    z-index:5;
    transform:scaleY(-1);            /* 뒤집기 */
  }

  /* ───── 🐍 뱀 — 다이아 머리 + 비늘 + 노란 눈 슬릿 + 갈래 혀 ───── */
  .zc-snake .face {
    background:#7ab040;
    border:1.5px solid #4a7020;
    border-radius:45% 45% 50% 50% / 50% 50% 60% 60%;   /* 다이아 (말보다 덜 길쭉) */
    box-sizing:border-box;
  }
  /* 비늘 — 머리 위쪽 점 패턴 7개 */
  .zc-snake .scale {
    position:absolute;
    width:4.5%; height:4%;
    background:#5a8530;
    border-radius:50%;
    z-index:2;
    opacity:0.7;
  }
  .zc-snake .scale-c   { top:24%; left:47.75%; }
  .zc-snake .scale-l1  { top:28%; left:33%; }
  .zc-snake .scale-r1  { top:28%; right:33%; }
  .zc-snake .scale-l2  { top:38%; left:22%; }
  .zc-snake .scale-r2  { top:38%; right:22%; }
  .zc-snake .scale-l3  { top:50%; left:16%; }
  .zc-snake .scale-r3  { top:50%; right:16%; }
  /* 노란 흰자 + 세로 슬릿 동공 — 더 크게 */
  .zc-snake .eye {
    width:17%; height:20%;
    background:#fff088;
    border:1.5px solid #4a7020;
    box-sizing:border-box;
    top:42%;
  }
  .zc-snake .eye-l { left:18%; }
  .zc-snake .eye-r { right:18%; }
  .zc-snake .pupil {
    width:30%; height:85%;
    top:7.5%; left:35%;
    background:#1a1a1a;
    border-radius:50%;
  }
  /* 콧등 — 코 부근 작은 어두운 라인 */
  .zc-snake .nose-bridge {
    position:absolute;
    width:14%; height:2px;
    background:#4a7020;
    border-radius:1px;
    top:64%; left:43%;
    z-index:3;
  }
  /* 갈래 혀 — 더 크게 */
  .zc-snake .tongue {
    position:absolute;
    width:4%; height:18%;
    background:#d80000;
    top:69%; left:48%;
    z-index:5;
  }
  .zc-snake .tongue::before,
  .zc-snake .tongue::after {
    content:""; position:absolute;
    width:100%; height:65%;
    background:#d80000;
    bottom:-40%;
    border-radius:0 0 30% 30%;
  }
  .zc-snake .tongue::before { left:-75%; transform:rotate(-32deg); transform-origin:right top; }
  .zc-snake .tongue::after  { right:-75%; transform:rotate(32deg);  transform-origin:left top; }

  /* ───── 🐴 말 — 길쭉한 갈색 얼굴 + 갈기 + 뾰족 귀 + 흰 콧등 + 콧구멍 2개 ───── */
  .zc-horse .face {
    background:#b8865c;
    border:1.5px solid #6a4818;
    border-radius:45% 45% 55% 55% / 40% 40% 65% 65%;   /* 더 길쭉 */
    width:52%; height:70%;                              /* 좁고 길게 (말 얼굴 비율) */
    top:20%; left:24%;
    box-sizing:border-box;
  }
  /* 갈기 (mane) — 머리 위 어두운 갈색 fluff 3개 */
  .zc-horse .mane {
    position:absolute;
    background:#5a3010;
    border:1.5px solid #2a1808;
    border-radius:50%;
    box-sizing:border-box;
    z-index:1;
  }
  .zc-horse .mane-c { width:34%; height:22%; top:-10%; left:33%; }
  .zc-horse .mane-l { width:22%; height:16%; top:-4%; left:16%; transform:rotate(-15deg); }
  .zc-horse .mane-r { width:22%; height:16%; top:-4%; right:16%; transform:rotate(15deg); }
  /* 뾰족 귀 — 훨씬 크게! */
  .zc-horse .ear {
    position:absolute;
    width:16%; height:30%;            /* was 11×20 → 훨씬 큼 */
    background:#b8865c;
    border:1.5px solid #6a4818;
    border-radius:50% 50% 30% 30% / 80% 80% 20% 20%;
    box-sizing:border-box;
    top:-6%;
    z-index:0;
  }
  .zc-horse .ear::after {
    content:""; position:absolute;
    inset:25%;
    background:#f0c8a0;
    border-radius:50% 50% 30% 30% / 80% 80% 20% 20%;
  }
  .zc-horse .ear-l { left:0%; transform:rotate(-12deg); }
  .zc-horse .ear-r { right:0%; transform:rotate(12deg); }
  /* 흰 콧등 (muzzle) */
  .zc-horse .muzzle {
    position:absolute;
    width:48%; height:36%;
    background:#f0d8b8;
    border-radius:50%;
    top:54%; left:26%;
    z-index:3;
  }
  /* 콧구멍 */
  .zc-horse .nostril {
    position:absolute;
    width:7%; height:9%;
    background:#3a2010;
    border-radius:50%;
    top:64%;
    z-index:5;
  }
  .zc-horse .nostril-l { left:36%; }
  .zc-horse .nostril-r { right:36%; }

  /* ───── 🐵 원숭이 — 갈색 + 큰 옆 귀 + 베이지 inner face + 코 + 입 ───── */
  .zc-monkey .face {
    background:#8b5e3c;
    border:1.5px solid #4a2a10;
    box-sizing:border-box;
  }
  /* 큰 옆 귀 — 더 크게! 양 옆에서 둥글게 */
  .zc-monkey .ear {
    position:absolute;
    width:26%; height:38%;            /* was 18×28 → 훨씬 큼 */
    background:#8b5e3c;
    border:1.5px solid #4a2a10;
    border-radius:50%;
    box-sizing:border-box;
    top:28%;
    z-index:0;
  }
  .zc-monkey .ear::after {
    content:""; position:absolute;
    inset:28%;
    background:#d8a070;
    border-radius:50%;
  }
  .zc-monkey .ear-l { left:-18%; }
  .zc-monkey .ear-r { right:-18%; }
  /* 베이지 inner face — 하트 모양으로 얼굴 안쪽 */
  .zc-monkey .inner-face {
    position:absolute;
    width:62%; height:62%;
    background:#d8a070;
    border-radius:50% 50% 60% 60% / 45% 45% 70% 70%;
    top:32%; left:19%;
    z-index:2;
  }
  /* 검정 코 */
  .zc-monkey .nose {
    position:absolute;
    width:9%; height:6%;
    background:#1a1a1a;
    border-radius:50%;
    top:60%; left:45.5%;
    z-index:5;
  }
  /* 작은 미소 */
  .zc-monkey .mouth {
    position:absolute;
    width:22%; height:9%;
    border-bottom:1.5px solid #3a2010;
    border-radius:0 0 50% 50% / 0 0 100% 100%;
    border-top:none;
    top:68%; left:39%;
    z-index:5;
    box-sizing:border-box;
  }

  /* ───── 🐔 닭 — 노란 + 빨간 볏 3개 + 주황 부리 + 빨간 wattle ───── */
  .zc-rooster .face {
    background:#ffe070;
    border:1.5px solid #c8a020;
    box-sizing:border-box;
  }
  /* 빨간 볏 (crest) — 머리 위 톱니 3개 (가운데 큰) */
  .zc-rooster .crest {
    position:absolute;
    background:#e84444;
    border:1.5px solid #a02020;
    border-radius:50%;
    box-sizing:border-box;
    z-index:1;
  }
  .zc-rooster .crest-1 { width:18%; height:20%; top:-10%; left:24%; }
  .zc-rooster .crest-2 { width:22%; height:26%; top:-16%; left:39%; }   /* 가운데 큰 */
  .zc-rooster .crest-3 { width:18%; height:20%; top:-10%; right:24%; }
  /* 부리 (beak) — 훨씬 크게! 다이아몬드 + 가운데 분리선 */
  .zc-rooster .beak {
    position:absolute;
    width:22%; height:20%;            /* was 14×13 → 훨씬 큼 */
    background:linear-gradient(to bottom, #ff9020 0%, #c87010 100%);
    border:1.5px solid #804008;
    border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
    top:58%; left:39%;
    z-index:5;
    box-sizing:border-box;
  }
  .zc-rooster .beak::after {
    content:""; position:absolute;
    width:100%; height:0;
    border-top:1px solid #804008;
    top:50%; left:0;
  }
  /* wattle (턱 밑 살) */
  .zc-rooster .wattle {
    position:absolute;
    width:18%; height:14%;
    background:#e84444;
    border:1.5px solid #a02020;
    border-radius:50% 50% 60% 60% / 30% 30% 70% 70%;
    top:80%; left:41%;
    z-index:1;
    box-sizing:border-box;
  }

  /* hover 애니메이션 — 귀 살짝 흔들림 */
  .card:hover .zc-pig .ear-l { transform:rotate(-30deg); transition:transform 0.2s; }
  .card:hover .zc-pig .ear-r { transform:rotate(30deg); transition:transform 0.2s; }
  .card:hover .zc-ox .ear-l { transform:rotate(-35deg); transition:transform 0.2s; }
  .card:hover .zc-ox .ear-r { transform:rotate(35deg); transition:transform 0.2s; }
  .card:hover .zc-rabbit .ear-l { transform:rotate(-15deg); transition:transform 0.2s; }
  .card:hover .zc-rabbit .ear-r { transform:rotate(15deg); transition:transform 0.2s; }
  .card:hover .zc-dog .ear-l { transform:rotate(-32deg); transition:transform 0.2s; }
  .card:hover .zc-dog .ear-r { transform:rotate(32deg); transition:transform 0.2s; }
  .card:hover .zc-tiger .ear-l { transform:rotate(-20deg); transition:transform 0.2s; }
  .card:hover .zc-tiger .ear-r { transform:rotate(20deg); transition:transform 0.2s; }

  /* 다크 모드 — 채도 약간 다운 */
  :root:not(.light) .zodiac-icon.zc .face{ filter:brightness(0.92) saturate(0.9); }

.md-profile-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.md-profile-name{
  font-size:16px;font-weight:700;color:var(--text);letter-spacing:-0.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.md-profile-email{
  font-size:12.5px;color:var(--text);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:0.85;
}
.md-profile-tags{
  display:flex;align-items:center;gap:6px;
  margin-top:3px;flex-wrap:wrap;
}
.md-profile-provider{
  display:inline-block;
  font-size:10px;font-weight:700;letter-spacing:0.02em;
  padding:2px 7px;border-radius:4px;
  background:var(--bg2);color:var(--muted);
}
/* provider 별 살짝 컬러 톤 */
.md-profile-provider-google{background:rgba(66,133,244,0.10);color:#3367D6}
.md-profile-provider-kakao{background:#FEE500;color:#191919}
.md-profile-provider-apple{background:#191919;color:#fff}
:root:not(.light) .md-profile-provider-google{background:rgba(66,133,244,0.18);color:#A8C7FA}
/* 로그아웃 버튼 — md-item 톤이지만 색상 빨강 hover. */
.md-item.md-item-logout{
  color:var(--text2);font-size:13px;padding:10px 18px;
  display:flex;align-items:center;gap:10px;
}
.md-item.md-item-logout svg{flex-shrink:0;opacity:0.6}
.md-item.md-item-logout:hover{background:var(--bg2);color:var(--down)}
.md-item.md-item-logout:hover svg{opacity:1}
.md-item.md-item-logout .md-title{font-weight:600}
/* 소셜 로그인 — Google/Kakao/Apple 아이콘 3개 가로 배치. */
.md-social-row{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:6px 14px 12px;
}
.md-social-icon{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--border);background:var(--card);
  cursor:pointer;text-decoration:none;
  transition:transform .12s, border-color .12s, box-shadow .12s;
  font-family:inherit;color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
.md-social-icon:hover{
  transform:translateY(-1px);
  border-color:var(--border2);
  box-shadow:0 3px 8px rgba(0,0,0,0.08);
}
.md-social-icon:active{transform:translateY(0) scale(0.96)}
.md-social-icon svg{display:block}
/* Provider 별 살짝 톤 — 호버 시 강조 */
.md-social-google:hover{border-color:#4285F4}
.md-social-kakao{background:#FEE500;border-color:#FEE500}
.md-social-kakao:hover{background:#FFD600;border-color:#FFD600}
.md-social-apple{background:#000;border-color:#000;color:#fff}
.md-social-apple:hover{border-color:#000}
.md-social-disabled{opacity:0.45;cursor:not-allowed}
.md-social-disabled:hover{
  transform:none;border-color:var(--border);box-shadow:none;
}
.md-social-kakao.md-social-disabled:hover{background:#FEE500;border-color:#FEE500}
.md-social-apple.md-social-disabled:hover{background:#000;border-color:#000}

/* ── 프로필 편집 모달 ─────────────────────────────────────────────────── */
.profile-modal-back{
  display:none;position:fixed;inset:0;z-index:10010;
  background:rgba(0,0,0,0.55);
  align-items:center;justify-content:center;
  padding:20px;
}
.profile-modal-back.open{display:flex}
.profile-modal{
  background:var(--card);border-radius:14px;
  width:100%;max-width:420px;max-height:85vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
}
.profile-modal-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;border-bottom:1px solid var(--border);
}
.profile-modal-hd h2{
  font-size:16px;font-weight:800;color:var(--text);
  margin:0;letter-spacing:-0.015em;
}
.profile-modal-close{
  border:none;background:transparent;cursor:pointer;
  font-size:24px;line-height:1;color:var(--muted);
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s, color .12s;
}
.profile-modal-close:hover{background:var(--bg2);color:var(--text)}
.profile-modal-body{
  padding:18px 20px;overflow-y:auto;
  display:flex;flex-direction:column;gap:18px;
}
.profile-field{display:flex;flex-direction:column;gap:8px}
.profile-field label{
  font-size:12px;font-weight:700;color:var(--text);letter-spacing:-0.005em;
  display:flex;align-items:baseline;gap:6px;
}
.profile-field-hint{
  font-size:10.5px;color:var(--muted);font-weight:500;
}
.profile-field input{
  padding:10px 12px;font-size:14px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--card);color:var(--text);    /* 흰색 — 회색 var(--bg) 보다 밝게 */
  font-family:inherit;letter-spacing:-0.005em;
  transition:border-color .12s;
  width:100%;box-sizing:border-box;
}
.profile-field input:focus{outline:none;border-color:var(--accent)}
/* 닉네임 입력 + cooldown 안내 */
.profile-nick-notice{
  font-size:11.5px;color:var(--text2);
  margin-top:6px;line-height:1.4;
  display:flex;align-items:flex-start;gap:5px;
}
.profile-nick-notice.locked{color:#c83020}
.profile-nick-notice svg{
  flex-shrink:0;margin-top:1px;
  width:13px;height:13px;
}
.profile-field input:disabled{
  background:var(--bg2);color:var(--text2);
  cursor:not-allowed;opacity:0.7;
}
/* 12간지 격자 — 4열 × 3행 */
.zodiac-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.zodiac-cell{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 4px;border:1px solid var(--border);border-radius:10px;
  background:var(--card);color:var(--text);cursor:pointer;    /* 흰색 — 밝게 */
  font-family:inherit;
  transition:transform .1s, border-color .1s, background .1s;
  -webkit-tap-highlight-color:transparent;
}
.zodiac-cell:hover{border-color:var(--border2);background:var(--bg2)}
.zodiac-cell:active{transform:scale(0.96)}
.zodiac-cell.active{
  border-color:var(--accent);
  background:var(--accent-dim);
  box-shadow:0 0 0 2px var(--accent-dim);
}
/* zodiac-cell 안의 아이콘은 _zodiacIconHTML 가 .zodiac-icon 으로 출력 — 별도 스타일 불필요 */
.zodiac-cell-label{
  font-size:11px;font-weight:600;color:var(--text2);
}
.zodiac-cell.active .zodiac-cell-label{color:var(--accent)}
/* 모달 하단 버튼 */
.profile-modal-actions{
  display:flex;gap:8px;padding:14px 20px;
  border-top:1px solid var(--border);
}
.profile-btn{
  flex:1;padding:10px 14px;font-size:13px;font-weight:700;
  border-radius:8px;cursor:pointer;font-family:inherit;
  transition:background .12s, border-color .12s;
}
.profile-btn-cancel{
  background:var(--bg2);border:1px solid var(--border);color:var(--text2);
}
.profile-btn-cancel:hover{background:var(--bg);border-color:var(--border2)}
.profile-btn-save{
  background:var(--accent);border:1px solid var(--accent);color:#fff;
}
.profile-btn-save:hover{filter:brightness(1.05)}
.profile-btn-save:disabled{opacity:0.6;cursor:not-allowed}