/* 2026-10-08 campusmate (그록 봇): 유학정보 CampusMate 홍보 카드 (광고 아님). templates_blog/_cd_campusmate.html + /page/js/cd_campusmate.js
   - hub  : /studyabroad 허브, 예전 SECTION B 자리 (본문 열 안, 광고 레일과 멀리)
   - rail : 유학정보 글 ≥1560px 에서만 왼쪽 빈 여백 sticky 176px (본문과 24px 간격, 오른쪽 160x600 광고 레일 반대편)
   - inline: 1559px 이하, 본문 앞부분 작은 카드 (위아래 32px 여백, 중간 광고와 최소 2블록 떨어짐)
   - 움직임: 떠다니는 이모지 · CTA hover lift + shine · 스크롤 등장 — prefers-reduced-motion 이면 모두 끔
   - 모든 크기 고정/콘텐츠 흐름 그대로 → 레이아웃 이동 없음 (등장 효과는 opacity/transform 만) */
.cmate{--cm-a:#4f46e5;--cm-b:#7c3aed;--cm-c:#ec4899;position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(135deg,var(--cm-a) 0%,var(--cm-b) 52%,var(--cm-c) 100%);border-radius:22px;
  box-shadow:0 18px 40px -22px rgba(79,70,229,.65);font-family:inherit;letter-spacing:-.01em;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.cmate::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.22),transparent 55%),radial-gradient(80% 70% at 0% 100%,rgba(255,255,255,.12),transparent 60%)}
.cmate.is-pre{opacity:0;transform:translateY(18px)}
.cmate.is-pre.is-in{opacity:1;transform:none}
.cmate p{margin:0}
.cmate__eye{font-size:.7rem;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.82)}
.cmate__h{font-weight:800;letter-spacing:-.03em;line-height:1.3;color:#fff}
.cmate__s{line-height:1.6;color:rgba(255,255,255,.92);word-break:keep-all}
.cmate__cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:#4338ca!important;font-weight:800;font-size:.95rem;
  text-decoration:none!important;white-space:nowrap;box-shadow:0 8px 20px -10px rgba(15,23,42,.55);
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease}
.cmate__cta::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(124,58,237,.18),transparent);transform:skewX(-18deg)}
.cmate__cta:hover,.cmate__cta:focus-visible{transform:translateY(-3px);box-shadow:0 14px 28px -12px rgba(15,23,42,.6);background:#f8f7ff}
.cmate__cta:hover::before,.cmate__cta:focus-visible::before{left:120%;transition:left .7s ease}
.cmate__cta:focus-visible{outline:3px solid #fde68a;outline-offset:3px}
.cmate__fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cmate__f{position:absolute;font-size:22px;line-height:1;opacity:.85;filter:drop-shadow(0 4px 8px rgba(15,23,42,.18));animation:cmate-float 6s ease-in-out infinite}
@keyframes cmate-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(6deg)}}
@keyframes cmate-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* hub (SECTION B 자리) */
.stu-sec--cmate{margin-top:8px}
.cmate--hub{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:20px;padding:32px 32px;min-height:220px}
.cmate--hub .cmate__eye{margin-bottom:10px}
.cmate--hub .cmate__h{margin:0 0 10px;font-size:clamp(1.35rem,2.6vw,1.8rem)}
.cmate--hub .cmate__s{margin-bottom:20px;font-size:1rem;max-width:30rem}
.cmate__chat{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cmate__bub{display:inline-block;padding:10px 14px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.95);color:#312e81;
  font-size:.9rem;font-weight:700;box-shadow:0 10px 22px -14px rgba(15,23,42,.6);animation:cmate-float 7s ease-in-out infinite}
.cmate__bub--b{align-self:flex-end;border-radius:18px 18px 6px 18px;background:#fef3c7;color:#78350f;animation-delay:-2.3s}
.cmate__bub--c{margin-left:18px;animation-delay:-4.6s}
.cmate--hub .cmate__f--1{top:14px;right:46%;animation-delay:-1s}
.cmate--hub .cmate__f--2{bottom:16px;right:40%;font-size:20px;animation-delay:-3s}
.cmate--hub .cmate__f--3{top:18px;right:20px;font-size:26px;animation-delay:-2s}
.cmate--hub .cmate__f--4{bottom:18px;right:24px;animation-delay:-4s}
.cmate--hub .cmate__f--5{top:50%;right:3%;font-size:18px;animation-delay:-5s}
.cmate--hub .cmate__f--6{bottom:12px;left:42%;font-size:18px;opacity:.6;animation-delay:-2.6s}
@media (max-width:700px){
  .cmate--hub{grid-template-columns:1fr;padding:24px 20px 22px;gap:16px;min-height:0}
  .cmate--hub .cmate__chat{flex-direction:row;flex-wrap:wrap;gap:8px}
  .cmate--hub .cmate__bub{font-size:.82rem;padding:8px 12px}
  .cmate--hub .cmate__bub--b{align-self:auto}
  .cmate--hub .cmate__bub--c{margin-left:0}
  .cmate--hub .cmate__f--1,.cmate--hub .cmate__f--2,.cmate--hub .cmate__f--6{display:none}
  .cmate--hub .cmate__cta{width:100%}
}

/* post: 왼쪽 sticky 세로 배너 (넓은 데스크톱만) */
.cmate-rail{display:none}
@media (min-width:1560px){
  body.sec--study .blog-area{position:relative}
  .blog-area > .cmate-rail{display:block;position:absolute;top:16px;bottom:64px;right:calc(100% + 4px);width:176px;z-index:1}
  .cmate-rail__stick{position:-webkit-sticky;position:sticky;top:133px}
  .blog-area .cmate--inline{display:none}
}
.cmate--rail{padding:44px 16px 18px;text-align:left;animation:cmate-pop .6s .15s both}
.cmate--rail .cmate__eye{margin-bottom:8px;font-size:.66rem}
.cmate--rail .cmate__h{margin:0 0 10px;font-size:1.06rem}
.cmate--rail .cmate__s{margin:0 0 16px;font-size:.84rem}
.cmate--rail .cmate__cta{display:flex;width:100%;padding:0 10px;font-size:.84rem;min-height:42px}
.cmate--rail .cmate__f--1{top:12px;left:14px;animation-delay:-1s}
.cmate--rail .cmate__f--2{top:10px;left:58px;font-size:20px;animation-delay:-3s}
.cmate--rail .cmate__f--3{top:14px;right:16px;animation-delay:-2s}
.cmate--rail .cmate__f--4{bottom:66px;right:10px;font-size:18px;opacity:.5;animation-delay:-4s}

/* post: 좁은 화면 인라인 카드 */
.blog-content .cmate--inline,.blog-article .cmate--inline{margin:32px 0;clear:both}
.cmate--inline{display:flex;align-items:center;gap:14px;padding:18px 18px;border-radius:18px}
.cmate__ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);font-size:26px;line-height:1}
.cmate__txt{min-width:0;flex:1}
.cmate--inline .cmate__h{margin:0 0 4px;font-size:1.02rem}
.cmate--inline .cmate__s{margin:0 0 12px;font-size:.88rem;line-height:1.55}
.cmate--inline .cmate__cta{min-height:40px;padding:0 16px;font-size:.86rem}
.cmate--inline .cmate__f--1{top:10px;right:14px;font-size:18px;opacity:.55;animation-delay:-1s}
.cmate--inline .cmate__f--2{bottom:10px;right:44px;font-size:16px;opacity:.45;animation-delay:-3s}
.cmate--inline .cmate__f--3{top:40%;right:10px;font-size:18px;opacity:.5;animation-delay:-2s}
@media (max-width:420px){.cmate--inline{align-items:flex-start;padding:16px}.cmate__ic{width:44px;height:44px;font-size:22px;border-radius:14px}}
.blog-content .cmate p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.blog-content .cmate .cmate__h{font-size:1.02rem;line-height:1.3;color:#fff;margin:0 0 4px}
.blog-content .cmate .cmate__s{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.92);margin:0 0 12px}

@media (prefers-reduced-motion:reduce){
  .cmate,.cmate__cta,.cmate__cta::before{transition:none!important}
  .cmate.is-pre{opacity:1;transform:none}
  .cmate__f,.cmate__bub,.cmate--rail{animation:none!important}
  .cmate__cta:hover,.cmate__cta:focus-visible{transform:none}
  .cmate__cta:hover::before{left:-60%}
}
@media print{.cmate,.cmate-rail{display:none!important}}
/* cmate2: 사이트 공통 h2 밑줄/여백 제거, 작은 화면에서 이모지가 글자와 겹치지 않게 */
.cmate .cmate__h{border:0!important;padding:0!important;background:none}
.cmate .cmate__h::after,.cmate .cmate__h::before{display:none!important}
.cmate--inline .cmate__txt{padding-right:18px}
@media (max-width:700px){.cmate--hub .cmate__f--5{display:none}.cmate--hub .cmate__f--3{top:12px;right:12px}}
@media (max-width:520px){.cmate--inline .cmate__f--1{top:auto;bottom:12px;right:12px}.cmate--inline .cmate__f--3{display:none}.cmate--inline .cmate__txt{padding-right:0}}