/* =========================================================================
   bubble.css — 휘스쿨 말풍선 + 출처 배지 (시험 공용)
   -------------------------------------------------------------------------
   ⚠️ **레이아웃 규칙이 하나도 없습니다.** .wrap · main · section 을 건드리지
      않습니다. 그래야 랜딩처럼 자체 스타일을 가진 페이지에 얹어도 화면이
      틀어지지 않습니다. 실제로 랜딩에 learn.css 를 통째로 얹었다가
      본문 폭이 1120 → 1060 으로 줄어드는 걸 보고 갈라놨습니다.

   짝: js/bubble.js · js/sources-core.js
   토익 · JLPT 로 가져갈 때 이 세 파일을 같이 가져가면 그대로 동작합니다.
   ========================================================================= */

/* =========================================================================
   ① 말풍선 — 로고가 직접 말하는 UI
   -------------------------------------------------------------------------
   요구사항이 명확했습니다: **각진 사각형 금지.**
   그래서 border-radius 를 네 모서리 다르게 줍니다. 똑같이 주면 알약이 되고,
   알약은 여전히 "UI 컴포넌트" 로 보입니다. 살짝 흐트러져야 말풍선이 됩니다.
   ========================================================================= */
.wbub {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 460px;
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2,.9,.3,1.4);
  pointer-events: none;
}
.wbub.on { opacity: 1; transform: none; pointer-events: auto; }

.wbub--anchored { margin: 18px 0 4px; }
.wbub--float {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
}

/* 로고 — 말하는 주체. 동그랗게 감싸서 캐릭터처럼 보이게 합니다. */
.wbub-face {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(16,20,24,.10);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wbub-logo { width: 32px; height: auto; }

/* 본체 — 모서리를 일부러 비대칭으로 둡니다.
   왼쪽 아래만 작게 = 로고 쪽으로 말꼬리가 향하는 느낌 */
.wbub-body {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px 24px 24px 6px;
  padding: 16px 38px 15px 18px;
  box-shadow: 0 8px 26px rgba(16,20,24,.10);
}
/* 말꼬리 — 삼각형이 아니라 작은 원 두 개. 훨씬 부드럽습니다. */
.wbub-body::before,
.wbub-body::after {
  content: ""; position: absolute; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
}
.wbub-body::before { left: -7px;  bottom: 12px; width: 11px; height: 11px; }
.wbub-body::after  { left: -13px; bottom: 5px;  width: 6px;  height: 6px;  }

.wbub-text {
  font-size: 14.5px; line-height: 1.72; color: var(--ink);
  letter-spacing: -.01em; margin: 0;
}
.wbub-emoji { font-size: 15px; }

.wbub-x {
  position: absolute; top: 8px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 19px; line-height: 1; color: #9aa3b0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.wbub-x:hover { background: var(--faint, #f6f7f9); color: var(--ink); }

.wbub-src { display: block; margin-top: 11px; }

/* 어두운 배경 위에 놓일 때 */
.sec-dark .wbub-body { background: #161b22; border-color: #2a323d; }
.sec-dark .wbub-body::before, .sec-dark .wbub-body::after { background: #161b22; border-color: #2a323d; }
.sec-dark .wbub-text { color: #e7eaf0; }

@media (max-width: 640px) {
  .wbub--float { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wbub { transition: opacity .01s; transform: none; }
}

/* =========================================================================
   ② 출처 배지 — 세 등급이 **다르게 생겨야** 합니다
   -------------------------------------------------------------------------
   색만 다르고 모양이 같으면 학생 눈에는 전부 "출처 있음" 으로 뭉갭니다.
   공식 = 꽉 찬 점 / 전문가 = 반쯤 / 후기 = 빈 점 + 점선 테두리.
   ========================================================================= */
.src {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: .01em; line-height: 1.5;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
}
.src-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.src-tier { font-weight: 700; }
.src-meta { color: var(--ink-soft); }
.src-link {
  color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.src-link:hover { opacity: .65; }

/* 공식 — 꽉 찬 점, 실선 */
.src--official { border-color: #c3d0ea; background: #f4f7fd; }
.src--official .src-dot { background: var(--blue); }
.src--official .src-tier { color: var(--blue); }

/* 전문가 — 반쯤 찬 점 */
.src--expert { border-color: #d9d2bf; background: #fbf9f3; }
.src--expert .src-dot { background: linear-gradient(90deg, #b58a2e 50%, transparent 50%); border: 1px solid #b58a2e; }
.src--expert .src-tier { color: #8a6a22; }

/* 후기 — 빈 점 + 점선. "공식 아님" 이 한눈에 보여야 합니다. */
.src--community { border-style: dashed; border-color: #cfd4dd; background: #fafbfc; }
.src--community .src-dot { background: transparent; border: 1.5px solid #6b7280; }
.src--community .src-tier { color: #4b5563; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 출처 고지 문장 — 배지만으로는 부족한 자리에 */
.src-note {
  font-size: 12.5px; line-height: 1.7; color: var(--ink-soft);
  padding: 11px 14px; border-radius: 14px; background: #f6f7f9;
  border: 1px dashed #d7dbe2; margin-top: 12px;
}
.src-note b { color: var(--ink); font-weight: 600; }


/* 말풍선 안의 행동 링크. <a href> 입니다 — 뒤로 가기가 동작해야 합니다.
   ⚠️ 이 파일에는 레이아웃 규칙을 넣지 마세요(랜딩 폭이 줄어든 적이 있습니다).
      아래는 말풍선 안쪽에만 적용되는 규칙입니다. */
.wbub-cta{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;
  text-decoration:none;color:var(--blue,#2b4ea2)}
.wbub-cta:hover{text-decoration:underline}

/* 코치 버튼. 말풍선(.wbub--anchored)이 이 버튼 옆에 붙습니다. */
.coach-fab{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;
  border-radius:999px;border:1px solid var(--line,#e2e5e9);background:#fff;
  box-shadow:0 10px 28px rgba(10,14,20,.16);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.coach-fab img{width:34px;height:34px;object-fit:contain}
.coach-fab:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.coach-fab:hover{transform:none}}
@media (max-width:560px){.coach-fab{right:14px;bottom:14px;width:50px;height:50px}}

/* 코치 말풍선 — 버튼 바로 위. .wbub--float 의 bottom 만 밀어 올립니다.
   ⚠️ 버튼이 position:fixed 라 말풍선을 형제로 끼워 넣으면(anchor) 문서 맨
      아래에 놓여 화면 밖으로 나갑니다. 반드시 float 로 띄우세요. */
.wbub--coach{bottom:92px;max-width:min(360px,calc(100vw - 44px))}
@media (max-width:560px){.wbub--coach{bottom:76px;right:14px}}