/* nyw-ai-chat.css — 뉴욕연세치과 AI 상담 채팅 위젯 */
:root{
  --acw-accent:#0a0a0a;
  --acw-accent-dark:#2a2a2a;
  --acw-dark:#0a0a0a;
  --acw-cream:#f5f5f5;
  --acw-border:#e4e4e4;
  --acw-font:'Pretendard','Inter','Noto Sans KR','Noto Sans',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',sans-serif;
}


.acw-launcher-wrap{
  position:fixed;
  right:16px;
  /* ⛔하단 상담바 위에 떠야 한다. 바 높이의 정본은 nyw-touchpoints.css 의 --nyw-fixbar-h 이고
     그 값이 바뀌면 여기도 따라온다(구판은 60px 을 박아 둬 바가 86px 이 되자 8px 겹쳤다). */
  bottom:calc(var(--nyw-fixbar-h, 65px) + 18px);
  z-index:9600;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--acw-font);
  transition:opacity .25s ease, transform .25s ease;
}
.acw-launcher-wrap.acw-hide{ opacity:0; transform:scale(.92); pointer-events:none; }

@media (max-width:760px){
  .acw-launcher-wrap{
    right:14px;
    bottom:calc(58px + env(safe-area-inset-bottom,0px) + 14px);
  }
}

.acw-launcher{
  width:56px;height:56px;border-radius:9999px;border:0;cursor:pointer;
  background:var(--acw-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(10,30,48,.28), 0 2px 8px rgba(10,30,48,.16);
  transition:transform .18s ease, background .18s ease;
}
.acw-launcher:hover{ transform:scale(1.06); background:var(--acw-accent-dark); }
.acw-launcher:active{ transform:scale(.95); }
.acw-launcher svg{ width:25px;height:25px; }

/* 말풍선 */
.acw-bubble{
  position:relative;
  display:flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--acw-border);
  border-radius:9999px;
  padding:9px 8px 9px 13px;
  box-shadow:0 8px 20px rgba(10,30,48,.16);
  overflow:visible;
  animation:none;
}
.acw-bubble__dot{
  width:6px;height:6px;border-radius:9999px;background:#22a06b;flex:0 0 auto;
  animation:acwDot 1.8s ease-in-out 4;
}
.acw-bubble__text{
  font-size:12px;font-weight:600;color:var(--acw-dark);white-space:nowrap;line-height:1;
}
/* ★2026-09-14 실측 — 32px 도 44px 하한 미달이었다. 말풍선 높이(약 30px) 안에 배경까지
   44px 로 키우면 말풍선 밖으로 튀어나와 디자인이 뚱뚱해진다(아이콘·배경은 그대로 32px).
   ::after 로 «보이지 않는 히트박스»만 44x44 로 넓힌다 — 누르는 면만 키운다. */
.acw-bubble__close{
  position:relative;
  width:32px;height:32px;margin:-6px;border-radius:9999px;border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;color:#8a97a3;cursor:pointer;flex:0 0 auto;
}
.acw-bubble__close::after{
  content:''; position:absolute; inset:-6px;
}
.acw-bubble__close:hover{ background:var(--acw-cream); color:var(--acw-dark); }
.acw-bubble__tail{
  position:absolute;right:-4px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;background:#fff;border-right:1px solid var(--acw-border);border-top:1px solid var(--acw-border);
}
.acw-bubble__sheen{ position:absolute;inset:0;border-radius:9999px;overflow:hidden;pointer-events:none; }
.acw-bubble__sheen::before{
  content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:34%;
  background:linear-gradient(100deg, rgba(31,93,151,0) 0%, rgba(31,93,151,.28) 50%, rgba(31,93,151,0) 100%);
  transform:translateX(-160%) skewX(-18deg);
  animation:acwSheen 2.8s ease-in-out 4;
}
.acw-launcher--halo{ animation:acwHalo 2.8s ease-out 4; }

@keyframes acwSheen{
  0%{ transform:translateX(-160%) skewX(-18deg); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateX(320%) skewX(-18deg); opacity:0; }
}
@keyframes acwHalo{
  0%{ box-shadow:0 0 0 0 rgba(31,93,151,.5); }
  70%{ box-shadow:0 0 0 14px rgba(31,93,151,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,93,151,0); }
}
@keyframes acwDot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.35; transform:scale(.75); }
}
@media (prefers-reduced-motion: reduce){
  .acw-bubble__sheen::before, .acw-bubble__dot, .acw-launcher--halo{ animation:none; }
}

/* ⛔2026-09-14 대표 지적 「오른쪽 하단 ai 상담창 다 엉키고」
   말풍선까지 합치면 이 묶음이 182px 이라 본문 오른쪽 끝을 덮는다.
   실측(1512x982 · 전용 크롬 CDP) — 면허 카드 3번의 뒤집기 버튼을 38x48 가렸다.

   본문은 1206px 폭 가운데 정렬이므로 본문 오른쪽 끝은 (W + 1206) / 2 이고
   말풍선 왼쪽은 W - 198 이다. 안 겹치려면 W > 1602 여야 한다.
   그 아래 폭에서는 말풍선을 접고 버튼(56px)만 남긴다 — 버튼만이면 본문에 닿지 않는다.
   ★상담 경로는 그대로다. 버튼은 남고 누르면 같은 창이 열린다.

   ⛔!important 가 필요하다 — js/nyw-ai-chat.js 가 말풍선을 띄울 때
     bubble.style.display = "flex" 를 «인라인»으로 넣어서 보통 규칙으로는 진다.

   ★모바일(760px 이하)도 같다 — 본문이 화면 «전체 폭»이라 말풍선이 항상 본문을 덮는다.
     2026-09-14 실측(375px) — 철학 섹션 리드문 「상담부터 치료, 그리고…」를 가렸다.
     그래서 1602px 이상에서만 띄우고 그 아래는 전부 접는다. 버튼은 그대로 남는다. */
@media (max-width:1601px){
  .acw-bubble{ display:none !important; }
}

/* ── 채팅 패널 ── */
.acw-panel{
  position:fixed;
  right:16px;
  bottom:calc(64px + 20px + 68px);
  z-index:9700;
  width:376px;
  max-width:calc(100vw - 32px);
  height:min(560px, calc(100vh - 160px));
  background:#fff;
  border-radius:4px;
  box-shadow:0 24px 60px rgba(10,30,48,.28), 0 4px 16px rgba(10,30,48,.14);
  display:flex;flex-direction:column;overflow:hidden;
  font-family:var(--acw-font);
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.acw-panel.acw-panel--open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

@media (max-width:760px){
  .acw-panel{
    right:8px;left:8px;width:auto;max-width:none;
    bottom:calc(60px + env(safe-area-inset-bottom,0px) + 12px);
    height:min(72vh, 560px);
  }
}

.acw-panel__head{
  background:var(--acw-dark);color:#fff;
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
}
.acw-panel__head-title{ font-size:14.5px;font-weight:700;letter-spacing:-.01em; }
.acw-panel__head-sub{ font-size:12px;color:rgba(255,255,255,.72);margin-top:2px; }
/* ★2026-09-14 실측 27.4x27.4 — 44px 하한 미달. 배경(디자인)은 그대로 두고
   ::after 히트박스만 44x44 로 넓힌다. */
.acw-panel__close{
  position:relative;
  width:28px;height:28px;border-radius:9999px;border:0;background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
}
.acw-panel__close::after{
  content:''; position:absolute; inset:-8px;
}
.acw-panel__close:hover{ background:rgba(255,255,255,.22); }

.acw-panel__body{
  flex:1 1 auto;overflow-y:auto;padding:14px 14px 6px;
  display:flex;flex-direction:column;gap:10px;background:var(--acw-cream);
}
.acw-msg{ max-width:84%;font-size:13.5px;line-height:1.55;padding:10px 12px;border-radius:14px;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere; }
.acw-msg--assistant{ align-self:flex-start;background:#fff;border:1px solid var(--acw-border);color:#22303c;border-bottom-left-radius:4px; }
.acw-msg--user{ align-self:flex-end;background:var(--acw-accent);color:#fff;border-bottom-right-radius:4px; }
.acw-msg--pending{ align-self:flex-start;color:#8a97a3;font-size:12.5px; }

.acw-quick{ display:flex;flex-wrap:wrap;gap:6px;padding:2px 14px 10px;flex:0 0 auto; }
/* ★2026-09-14 실측 높이 29.4px — 44px 하한 미달. 글자 크기(12px)는 그대로 두고
   위아래 padding 만 늘려 누르는 면을 44px 로 만든다(가로 폭·모양은 그대로). */
.acw-quick__chip{
  border:1px solid var(--acw-border);background:#fff;border-radius:9999px;
  font-size:12px;color:var(--acw-dark);padding:15px 11px;cursor:pointer;white-space:nowrap;
  min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;
}
.acw-quick__chip:hover{ border-color:var(--acw-accent);color:var(--acw-accent); }

.acw-panel__foot{
  flex:0 0 auto;border-top:1px solid var(--acw-border);background:#fff;
  padding:10px 12px;display:flex;flex-direction:column;gap:8px;
}
.acw-inputrow{ display:flex;align-items:center;gap:8px; }
.acw-input{
  flex:1 1 auto;border:1px solid var(--acw-border);border-radius:9999px;
  padding:10px 14px;font-size:13.5px;font-family:inherit;color:var(--acw-dark);outline:none;
}
.acw-input:focus{ border-color:var(--acw-accent); }
/* ★2026-09-14 실측 37.2x37.2 — 44px 하한 미달. 배경 원(디자인)은 그대로 38px 로 두고
   ::after 히트박스만 44x44 로 넓힌다. */
.acw-send{
  position:relative;
  width:38px;height:38px;border-radius:9999px;border:0;background:var(--acw-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
}
.acw-send::after{
  content:''; position:absolute; inset:-3px;
}
.acw-send:disabled{ background:#b9c3cc;cursor:default; }
.acw-send svg{ width:17px;height:17px; }
/* ⛔전화번호가 든 고지문이다 — 10.5px 은 하한 미달이고 대비 #8a97a3 도 얕다. */
.acw-disclaimer{ font-size:12px;color:#6b7885;line-height:1.5; }
.acw-disclaimer a{ color:var(--acw-accent);font-weight:600;text-decoration:none; }

/* AI 응대임을 화면에 표시한다 — 발신자 라벨, 런처 배지 */
.acw-msgwrap{ align-self:flex-start;display:flex;flex-direction:column;gap:3px;max-width:84%; }
.acw-msgwrap .acw-msg{ max-width:100%; }
.acw-msg__who{ font-size:11px;line-height:1.2;color:#5d6b78;letter-spacing:.01em;padding-left:2px; }
.acw-launcher{ position:relative; }
.acw-launcher__ai{
  position:absolute;top:-3px;right:-3px;
  min-width:22px;height:16px;padding:0 5px;border-radius:9999px;
  background:#fff;color:var(--acw-accent);border:1px solid var(--acw-accent);
  font-size:10.5px;font-weight:800;line-height:14px;letter-spacing:.02em;
}