/* 「fnny에 물어보기」 문의 챗봇 — /ask.js 가 FAB·패널을 붙인다. 랜딩·가격·만들기·블로그·마이가 같이 쓴다.
   접두사 ask- 는 다른 스타일시트 어디에도 없다. 안에서 footer·nav·small 같은 요소 선택자를 쓰지 않는다.
   색은 전부 토큰. 크롬(버튼·말풍선)은 --accent/--on-accent 무채색 — 브랜드 그라디언트는 페이지 CTA 몫이고,
   tokengo.css 가 "브랜드는 한 화면에 두 번 이상 두지 않는다"고 못박았다.
   랜딩은 자기 :root 에 --shadow-l·--ease·--brand 가 있고 다른 화면은 tokengo.css 뿐이라 폴백을 같이 적는다.
   패널은 <dialog> 다: 웹에서는 show()(떠 있는 창), 앱 웹뷰에서는 showModal() — 셸이 탭 iframe 의
   dialog:modal 을 보고 탭바를 치운다(shell.js syncTabModal). 그래서 UA dialog 기본값을 여기서 지운다. */
.ask-fab,.ask-panel,.ask-panel *{box-sizing:border-box;}
.ask-fab,.ask-panel{
  --ask-shadow:var(--shadow-l,0 22px 48px -22px rgba(20,22,40,.38));
  --ask-ease:var(--ease,cubic-bezier(.16,1,.3,1));
  --ask-brand:var(--brand,#F12E82);
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
:root[data-theme="dark"] :is(.ask-fab,.ask-panel){--ask-shadow:var(--shadow-l,0 22px 50px -20px rgba(0,0,0,.75));}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.ask-fab,.ask-panel){--ask-shadow:var(--shadow-l,0 22px 50px -20px rgba(0,0,0,.75));}}

/* FAB 이 마지막 줄(사업자 정보)을 덮지 않게. 랜딩은 자기 footer 에 같은 여백을 둔다. */
body:has(.ask-fab:not([hidden])) .site-foot{padding-bottom:calc(96px + env(safe-area-inset-bottom));}

.ask-fab{position:fixed;right:20px;bottom:20px;z-index:55;display:inline-flex;align-items:center;gap:9px;
  height:52px;padding:0 20px 0 17px;border:0;border-radius:999px;cursor:pointer;font-size:15px;font-weight:700;line-height:1;
  background:var(--accent);color:var(--on-accent);box-shadow:var(--ask-shadow);
  transition:transform .16s var(--ask-ease),box-shadow .3s var(--ask-ease);}
.ask-fab[hidden]{display:none;}
.ask-fab:hover{transform:translateY(-2px);}
.ask-fab:active{transform:scale(.97);}
.ask-fab svg{width:21px;height:21px;flex:none;}
.ask-fab:focus-visible{outline:2px solid var(--ask-brand);outline-offset:3px;}

/* 작은 FAB (만들기) — 아이콘만. 하단 고정 탭(.mtabs)·레일 시트·딤(z 35~40) 아래에 깔린다. */
.ask-fab.ask-sm{width:44px;height:44px;padding:0;justify-content:center;gap:0;z-index:34;}
.ask-fab.ask-sm>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.ask-fab.ask-sm svg{width:20px;height:20px;}
@media (max-width:1099px){   /* 만들기 하단 탭(.mtabs, 약 64px) 위로 올린다 */
  .ask-fab.ask-sm{right:14px;bottom:calc(84px + var(--safe-bottom,env(safe-area-inset-bottom)));}
}
@media (min-width:1100px){   /* 데스크톱 만들기: 오른쪽 스티키 레일이 화면 끝(-20px)까지 내려오면 FAB 과 겹친다 — 레일을 FAB 위에서 끊는다 */
  body:has(.ask-fab.ask-sm:not([hidden])) .grid.create>.rail{max-height:calc(100vh - var(--sticky-top,72px) - 76px);}
}
/* 만들기 레일 시트(테마·참여자 설정…)가 열려 있으면 숨긴다 — 시트는 편집 화면 쌓임 맥락 안이라 z-index 로는 못 덮는다 */
body:has(.rail.sheet) .ask-fab.ask-sm{display:none;}

.ask-panel{position:fixed;inset:auto 20px 20px auto;margin:0;padding:0;z-index:56;width:384px;max-width:calc(100vw - 40px);
  height:min(600px,calc(100dvh - 120px));max-height:none;display:flex;flex-direction:column;overflow:hidden;outline:0;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:var(--ask-shadow);
  font-size:14px;line-height:1.5;animation:askIn .26s var(--ask-ease);}
.ask-panel:not([open]){display:none;}
.ask-panel::backdrop{background:color-mix(in srgb,#000 40%,transparent);}
@keyframes askIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.ask-panel :focus-visible{outline:2px solid var(--ask-brand);outline-offset:2px;}
.ask-panel a{text-decoration:none;}
.ask-panel :is(h3,p){margin:0;}

.ask-bar{flex:none;display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line);}
.ask-bar>img{height:17px;width:auto;display:block;flex:none;}
.ask-who{flex:1;min-width:0;line-height:1.3;}
.ask-who>b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;}
.ask-who>span{display:block;font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;}
.ask-ico{all:unset;box-sizing:border-box;display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:10px;color:var(--muted);cursor:pointer;transition:background .2s,color .2s;}
.ask-ico:hover{background:var(--sunken);color:var(--ink);}
.ask-ico svg{width:17px;height:17px;}

.ask-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 16px 8px;overscroll-behavior:contain;}
.ask-intro[hidden]{display:none;}
.ask-intro h3{font-size:19px;font-weight:800;line-height:1.32;letter-spacing:-.02em;}
.ask-intro>p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--ink-2);}
.ask-sugs{margin-top:16px;border-top:1px solid var(--line);}
.ask-sug{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:13px 2px;
  border-bottom:1px solid var(--line);cursor:pointer;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink);
  transition:color .2s;}
.ask-sug>span{flex:1;min-width:0;word-break:keep-all;overflow-wrap:anywhere;}
.ask-sug>svg{width:15px;height:15px;flex:none;color:var(--muted);transition:transform .2s var(--ask-ease),color .2s;}
.ask-sug:hover{color:var(--ask-brand);}
.ask-sug:hover>svg{color:var(--ask-brand);transform:translateX(3px);}

.ask-log{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.ask-log:not(:empty){padding-top:2px;}
.ask-msg{max-width:88%;padding:10px 13px;border-radius:15px;font-size:14px;line-height:1.62;
  word-break:keep-all;overflow-wrap:anywhere;}
.ask-msg.ask-me{align-self:flex-end;background:var(--accent);color:var(--on-accent);font-weight:600;border-bottom-right-radius:6px;}
.ask-msg.ask-bot{background:var(--sunken);color:var(--ink);border-bottom-left-radius:6px;}
.ask-msg strong{font-weight:800;}

/* 말풍선 모션 — 뜰 때 아래에서 올라오고, 답은 어절 단위로 이어서 켜진다.
   켜지기 전 어절도 자리를 차지한다(opacity 만 0) — 글자가 늘면서 말풍선 폭이 덜컥거리지 않게. */
.ask-msg,.ask-chips{animation:askUp var(--t-press,150ms) var(--ask-ease);}
@keyframes askUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ask-hold{display:none!important;}            /* 차례를 기다리는 말풍선·칩 — DOM 순서는 이미 잡아 둔다 */
.ask-w{opacity:0;transition:opacity var(--t-press,150ms) var(--ask-ease);}
.ask-w.on{opacity:1;}
.ask-typing{display:flex;align-items:center;gap:5px;padding:15px 14px;}
.ask-typing>span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:askDot 1.1s var(--ask-ease) infinite;}
.ask-typing>span:nth-child(2){animation-delay:.15s;}
.ask-typing>span:nth-child(3){animation-delay:.3s;}
@keyframes askDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

.ask-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%;}
.ask-chips>span{width:100%;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.01em;}
.ask-chip{all:unset;box-sizing:border-box;max-width:100%;padding:7px 12px;border-radius:999px;cursor:pointer;
  font-size:12.5px;font-weight:600;line-height:1.4;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);
  word-break:keep-all;overflow-wrap:anywhere;transition:background .2s,color .2s;}
.ask-chip:hover{background:var(--sunken);color:var(--ink);}

.ask-form{flex:none;display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-top:1px solid var(--line);}
.ask-in{flex:1;min-width:0;height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--sunken);color:var(--ink);font:inherit;font-size:14px;outline:0;transition:border-color .2s;}
.ask-in:focus{border-color:var(--line-strong);}
.ask-in::placeholder{color:var(--muted);}
.ask-send{all:unset;box-sizing:border-box;display:grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:999px;background:var(--accent);color:var(--on-accent);cursor:pointer;transition:transform .16s var(--ask-ease);}
.ask-send:active{transform:scale(.94);}
.ask-send svg{width:18px;height:18px;}

.ask-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 12px;}
.ask-foot>span{min-width:0;font-size:11px;line-height:1.4;color:var(--muted);}
.ask-mail{display:inline-flex;align-items:center;height:28px;padding:0 12px;flex:none;border-radius:999px;
  font-size:12px;font-weight:700;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s;}
.ask-mail:hover{background:var(--sunken);}
.ask-log .ask-mail{margin-top:-2px;}
/* 두 번째 「모르겠다」 — 같은 말을 되풀이하는 대신 담당자 버튼을 눈에 띄게 한다 */
.ask-mail.ask-mail-go{height:32px;padding:0 14px;font-size:12.5px;background:var(--accent);color:var(--on-accent);box-shadow:none;}
.ask-mail.ask-mail-go:hover{background:var(--accent-pressed);}

@media (max-width:560px){
  .ask-fab:not(.ask-sm){right:14px;bottom:14px;height:48px;padding:0 16px 0 14px;font-size:14px;}
  /* 전체화면. 높이·상단은 visualViewport 를 따라간다 — 키보드가 올라와도 입력창이 가리지 않는다 */
  .ask-panel{left:0;right:0;top:var(--ask-top,0px);bottom:auto;width:100%;max-width:100%;
    height:var(--ask-vh,100dvh);border:0;border-radius:0;}
  .ask-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
}

/* 인쇄(관리 화면 QR 포스터)에 FAB·패널이 찍히지 않게 */
@media print{#ask-root{display:none!important;}}

@media (prefers-reduced-motion:reduce){
  :is(.ask-fab,.ask-panel),.ask-panel *{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important;}
}