/* cs_menu.css — 상담창 카드 메뉴. 두 사이트가 같은 파일을 쓴다(각 사이트 액센트 변수를 물려받는다). */
.csm-wrap{position:relative;margin:8px 0 4px}
.csm-track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 6px;scrollbar-width:none;-ms-overflow-style:none;
}
.csm-track::-webkit-scrollbar{display:none;width:0;height:0}

.csm-card{
  flex:0 0 86%;max-width:300px;scroll-snap-align:center;
  background:color-mix(in srgb, var(--csm-fg, #fff) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--csm-fg, #fff) 12%, transparent);
  border-radius:14px;padding:14px 13px 12px;
}
.csm-t{font-size:14px;font-weight:700;line-height:1.4;margin-bottom:3px}
.csm-d{font-size:12.5px;line-height:1.5;opacity:.62;margin-bottom:11px}

.csm-b{
  display:block;width:100%;margin-top:7px;padding:11px 10px;
  border-radius:10px;border:1px solid transparent;
  background:color-mix(in srgb, var(--csm-fg, #fff) 9%, transparent);
  color:inherit;font:inherit;font-size:13.5px;font-weight:600;line-height:1.3;
  text-align:center;cursor:pointer;transition:background .14s, border-color .14s;
}
.csm-b:hover{
  background:color-mix(in srgb, var(--csm-acc, var(--acc, var(--mca-acc, #12c27a))) 16%, transparent);
  border-color:color-mix(in srgb, var(--csm-acc, var(--acc, var(--mca-acc, #12c27a))) 42%, transparent);
}
.csm-b:active{transform:translateY(1px)}

.csm-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;padding:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--csm-bg, #0d141c) 88%, transparent);
  border:1px solid color-mix(in srgb, var(--csm-fg, #fff) 16%, transparent);
  color:inherit;opacity:.9;
}
.csm-nav svg{width:15px;height:15px}
.csm-prev{left:-4px}
.csm-next{right:-4px}
.csm-nav:hover{opacity:1;border-color:color-mix(in srgb, var(--csm-acc, var(--acc, var(--mca-acc, #12c27a))) 50%, transparent)}

/* 카드가 뜨기 전 잠깐 도는 표시 */
.csm-load{display:flex;gap:4px;align-items:center;padding:10px 2px}
.csm-load span{
  width:6px;height:6px;border-radius:50%;opacity:.45;
  background:currentColor;animation:csm-bl 1.1s infinite ease-in-out;
}
.csm-load span:nth-child(2){animation-delay:.16s}
.csm-load span:nth-child(3){animation-delay:.32s}
@keyframes csm-bl{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:.85}}

/* 확인 카드(문의 보내기 · 종료) */
.csm-ask .csm-d{opacity:.8;margin-bottom:12px}
.csm-primary{
  background:color-mix(in srgb, var(--csm-acc, var(--acc, var(--mca-acc, #12c27a))) 22%, transparent);
  border-color:color-mix(in srgb, var(--csm-acc, var(--acc, var(--mca-acc, #12c27a))) 55%, transparent);
}

/* 전담 호스트 — 잠긴 안내판 */
.csm-vip{
  border-color:color-mix(in srgb, var(--csm-acc, var(--acc, var(--mca-acc, #12c27a))) 34%, transparent);
  background:color-mix(in srgb, var(--csm-acc, var(--acc, var(--mca-acc, #12c27a))) 7%, transparent);
}
.csm-th{display:flex;align-items:center;gap:7px}
.csm-th svg{width:15px;height:15px;flex:0 0 auto;opacity:.85;
  color:var(--csm-acc, var(--acc, var(--mca-acc, #12c27a)))}
.csm-ben{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:13px;line-height:1.62;opacity:.92}
.csm-bdot{
  flex:0 0 auto;width:5px;height:5px;margin-top:8px;border-radius:50%;
  background:var(--csm-acc, var(--acc, var(--mca-acc, #12c27a)));
}
.csm-note{margin-top:12px;font-size:12px;line-height:1.5;opacity:.55}

@media(max-width:480px){
  .csm-card{flex-basis:88%}
  .csm-b{padding:10px 9px;font-size:13px}
}