/* =====================================================================
   '분석용' 말풍선 — 프리미엄(분석) 기능을 가리키는 공용 모양
   ---------------------------------------------------------------------
   [2026-11-01] 사장님: 요금 화면의 둥실거리는 말풍선이 좋으니 다른 곳에도.
   요금 화면·결제 화면·프리미엄 안내 창·옆 메뉴·첫 화면이 모두 이 파일 하나를 쓴다.
   색이나 크기를 바꿀 때는 여기만 고치면 다섯 곳이 함께 바뀐다.

   쓰는 법
     <span class="zc-sticker zc-sticker--corner zc-sticker--bob"><b aria-hidden="true">✦</b>분석용</span>
       · 감싸는 칸에 position:relative 가 있어야 모서리에 붙는다 (.zc-sticker-host)
       · 둥실거리는(--bob) 큰 말풍선은 한 화면에 하나만 — 여러 개가 움직이면 어디에도 눈이 안 간다
     <span class="zc-sticker zc-sticker--mini">…</span>   옆 메뉴처럼 좁은 곳 (움직이지 않음)
     <span class="zc-bubble">왜 틀렸는지까지 알려 드려요</span>   위쪽 꼬리가 달린 연한 말풍선
   ===================================================================== */
.zc-sticker-host { position: relative; }

.zc-sticker {
  display: inline-flex; align-items: center; gap: 6px;
  background: #5d43ea; color: #fff;
  font-weight: 900; font-size: 1.05rem; letter-spacing: .02em; line-height: 1.2;
  border-radius: 999px; padding: 10px 20px;
  border: 3px solid #fff;
  box-shadow: 0 12px 26px rgba(93, 67, 234, .35);
  white-space: nowrap;
  transform: rotate(6deg);
  pointer-events: none;            /* 밑에 있는 버튼·카드를 가리지 않게 */
}
.zc-sticker b { font-size: .9em; color: #ffe08a; font-weight: 900; }

.zc-sticker--corner { position: absolute; top: -30px; right: -6px; z-index: 3; }
.zc-sticker--corner::after {
  content: ""; position: absolute; bottom: -9px; left: 22px; width: 16px; height: 16px;
  background: inherit; border-right: 3px solid #fff; border-bottom: 3px solid #fff;
  transform: rotate(45deg); border-radius: 0 0 5px 0;
}
@media (prefers-reduced-motion: no-preference) {
  .zc-sticker--bob { animation: zc-sticker-bob 2.4s ease-in-out infinite; }
}
@keyframes zc-sticker-bob {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50%      { transform: rotate(6deg) translateY(-5px); }
}
@media (max-width: 640px) {
  .zc-sticker--corner { right: 4px; font-size: .98rem; }
}

.zc-sticker--mini {
  font-size: .8rem; padding: 3px 9px; border-width: 2px; gap: 3px;
  box-shadow: 0 4px 10px rgba(93, 67, 234, .25);
  transform: rotate(-4deg);
}

.zc-bubble {
  position: relative; display: inline-block;
  background: #f1edff; color: #5d43ea;
  font-weight: 700; font-size: .9rem; line-height: 1.4;
  border-radius: 12px; padding: 7px 14px; margin-top: 8px;
  word-break: keep-all;
}
.zc-bubble::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px;
  background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
/* 왼쪽 정렬된 글 아래에 붙일 때 — 꼬리를 왼쪽으로 */
.zc-bubble--left { margin-top: 0; }
.zc-bubble--left::before { left: 24px; }
/* 오른쪽 위에 닫기(×) 단추가 있는 칸(프리미엄 안내 창)은 왼쪽 위에 단다 */
.zc-sticker--corner.zc-sticker--left { right: auto; left: -6px; transform: rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .zc-sticker--left.zc-sticker--bob { animation-name: zc-sticker-bob-left; }
}
@keyframes zc-sticker-bob-left {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-5px); }
}
@media (max-width: 640px) {
  .zc-sticker--corner.zc-sticker--left { left: 4px; right: auto; }
}

/* ── 옆 메뉴: 프리미엄(분석) 기능 옆 작은 말풍선 ──────────────────────
   [2026-11-01] 메뉴 글은 화면마다 HTML 에 따로 적혀 있어(22곳), 글을 고치지 않고 여기서 붙인다.
   AI 선생님 옆에 있던 'AI' 표시(ai-teacher-dashboard.css) 자리를 이 말풍선이 대신한다.
   메뉴는 좁아서 움직이지 않는다. */
.nav-item[data-nav-key="ai-teacher"]::after,
.nav-item[data-nav-key="forecast"]::after {
  content: "✦분석";
  flex: none;
  margin-left: auto;
  margin-right: -3px;                /* 메뉴 칸 오른쪽 여백으로 살짝 — 이름이 1~2px 모자라 잘리던 것 */
  display: inline-flex; align-items: center;
  background: #5d43ea; color: #fff;
  font-size: .8rem; font-weight: 900; line-height: 1.2; letter-spacing: -.03em;
  border-radius: 999px; padding: 2px 4px;   /* 메뉴 이름이 잘리지 않게 작게 (실제 메뉴 폭에서 재 봄) */
  box-shadow: 0 4px 10px rgba(93, 67, 234, .25);
  transform: rotate(-4deg);
  white-space: nowrap;
  -webkit-text-fill-color: #fff;   /* 일부 화면은 메뉴 글자를 그라데이션(투명 글자)으로 칠한다 */
}
/* 잠긴 메뉴: 자물쇠와 말풍선을 따로 달면 메뉴 이름이 '합격 예…' 로 잘린다.
   말풍선 하나에 '🔒분석' 으로 합치고, 따로 붙는 자물쇠(.nav-lock)는 감춘다. */
.nav-item.is-locked[data-nav-key="ai-teacher"]::after,
.nav-item.is-locked[data-nav-key="forecast"]::after { content: "🔒분석"; margin-left: -4px; }  /* 🔒 가 ✦ 보다 넓어 이름과의 틈을 좁힌다 */
.nav-item.is-locked[data-nav-key="ai-teacher"] .nav-lock,
.nav-item.is-locked[data-nav-key="forecast"] .nav-lock { display: none; }

/* [2026-11-01] 합격 예측 리포트 메뉴에는 responsive-sidebar.js 가 'BETA' 딱지를 따로 붙인다.
   BETA + 분석 말풍선이 함께 있으면 메뉴 이름이 '합' 한 글자만 남았다(사장님 제보).
   메뉴 칸에는 딱지 하나만 들어간다. 베타라는 표시는 합격 예측 화면 안에도 있으므로
   메뉴에서는 '분석' 말풍선만 남기고 BETA 는 감춘다. (BETA 딱지는 인라인 style 이라 !important) */
.nav-item[data-nav-key="forecast"] .nav-beta-badge { display: none !important; }