.haeun-launcher-host{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(78px + env(safe-area-inset-bottom));z-index:80;font-family:inherit}
.haeun-launcher{display:flex;align-items:center;justify-content:center;min-width:190px;min-height:48px;padding:11px 18px;border:0;border-radius:999px;background:#0e7a4d;color:#fff;box-shadow:0 8px 26px rgba(14,122,77,.34);font-family:inherit;font-size:16px;font-weight:900;line-height:1.35;cursor:pointer;gap:9px}
/* 🔴 0923 외부 피드백 — 「눌러도 되는 것」이 안 보였다. 빨강은 바로 위 상담전화 칸과 같은 색이라
   묻혔고, 누를 수 있다는 신호도 없었다. 색을 갈라 세우고 왼쪽에 화살표를 붙인다. */
.haeun-launcher .haeun-cue{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border-radius:999px;background:rgba(255,255,255,.22);font-size:13px;font-weight:900;line-height:1}
@media (prefers-reduced-motion:no-preference){
  .haeun-launcher .haeun-cue{animation:haeun-nudge 1.8s ease-in-out infinite}
  @keyframes haeun-nudge{0%,70%,100%{transform:translateX(0)}35%{transform:translateX(3px)}}
}
.haeun-launcher:focus-visible,.haeun-close:focus-visible{outline:3px solid #17191d;outline-offset:3px}
.haeun-panel{position:absolute;right:0;bottom:58px;width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 156px - env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #d9dadd;border-radius:18px;box-shadow:0 16px 48px rgba(16,18,22,.28)}
.haeun-panel[hidden]{display:none}
.haeun-panel-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:8px 10px 8px 16px;background:#17191d;color:#fff}
.haeun-panel-bar strong{font-size:16px}
.haeun-close{min-width:60px;min-height:44px;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:transparent;color:#fff;font-family:inherit;font-size:16px;font-weight:800;line-height:1;cursor:pointer}
.haeun-connecting{margin:0;padding:22px;font-size:16px;line-height:1.55}
.haeun{background:#fff;border:1px solid #d9dadd;border-radius:18px;box-shadow:0 12px 35px rgba(16,18,22,.08);overflow:hidden;scroll-margin:16px 0 calc(84px + env(safe-area-inset-bottom))}
.haeun *{box-sizing:border-box}
.haeun button,.haeun textarea{font:inherit}
.haeun-head{padding:20px 20px 16px;border-bottom:1px solid #d9dadd}
.haeun-head p{margin:0 0 5px;color:#d2271f;font-size:13px;font-weight:900;letter-spacing:.08em}
.haeun-head h2{margin:0;font-size:23px}
.haeun-head small{display:block;margin-top:8px;color:#62666d;font-size:16px;line-height:1.5}
.haeun-disabled{padding:20px}
.haeun-disabled p{margin:0 0 16px;line-height:1.6}
.haeun-links{display:grid;gap:10px}
.haeun-links a,.haeun-action{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;border:1px solid #d9dadd;border-radius:12px;background:#fff;color:#17191d;font-weight:800;text-decoration:none;text-align:center}
.haeun-links a:first-child,.haeun-action.primary{border-color:#d2271f;color:#d2271f}
.haeun-chat{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.haeun-log{margin:0;padding:18px;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.haeun-msg{max-width:88%;padding:12px 14px;border-radius:14px;line-height:1.55;white-space:pre-wrap}
.haeun-msg.assistant{align-self:flex-start;background:#f5f3ef;border-bottom-left-radius:4px}
.haeun-msg.user{align-self:flex-end;background:#17191d;color:#fff;border-bottom-right-radius:4px}
.haeun-msg.status{max-width:100%;align-self:stretch;background:#fff4e6;border:1px solid #e7bf84;color:#5b3b10;font-size:16px;scroll-margin:16px 0 calc(84px + env(safe-area-inset-bottom))}
.haeun-form{border-top:1px solid #d9dadd;padding:14px;background:#fff;flex:0 0 auto;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.haeun-form textarea{display:block;width:100%;min-height:78px;max-height:150px;resize:vertical;border:1px solid #aeb1b6;border-radius:12px;padding:12px 13px;font-size:16px;line-height:1.45;color:#17191d}
.haeun-form textarea:focus{outline:3px solid rgba(210,39,31,.18);border-color:#d2271f}
.haeun-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.haeun-send{min-width:104px;min-height:48px;border:0;border-radius:12px;padding:10px 17px;background:#d2271f;color:#fff;font-weight:900}
.haeun-send:disabled{background:#777b81;cursor:not-allowed}
.haeun-note{flex:1;margin:0;color:#62666d;font-size:16px;line-height:1.45}
.haeun-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;scroll-margin:16px 0 calc(84px + env(safe-area-inset-bottom))}
.haeun-actions .haeun-action{flex:1 1 150px;min-height:44px;font-size:16px;scroll-margin:16px 0 calc(84px + env(safe-area-inset-bottom))}
.haeun-action.button{cursor:pointer}
@media(max-width:380px){.haeun-head,.haeun-disabled{padding-left:15px;padding-right:15px}.haeun-log{padding:14px}.haeun-row{align-items:stretch;flex-direction:column}.haeun-send{width:100%}.haeun-form{padding:11px}.haeun-form textarea{min-height:58px}.haeun-stage{max-height:20vh}}

/* 위젯 뿌리도 세로 흐름에 참여해야 **메시지만** 늘어난다.
   이게 없으면 패널이 통째로 길어져 입력칸이 화면 밖으로 밀린다. */
.haeun{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.haeun-panel-bar{flex:0 0 auto}
.haeun-head{flex:0 0 auto}

/* 🎬 하은 영상 — 콜통에서 쓰던 자산 그대로. 창을 열기 전에는 안 받는다(preload=none). */
.haeun-stage{position:relative;flex:0 1 auto;aspect-ratio:16/9;max-height:26vh;min-height:0;overflow:hidden;background:#0f1114;line-height:0}
.haeun-still{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.haeun-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:transparent;opacity:0;transition:opacity .28s ease}
.haeun-video.is-playing{opacity:1}
/* 🔴 좁은 화면에서 **줄어드는 쪽은 영상**이고, 메시지 칸은 이만큼은 남는다.
   그렇게 안 하면 고정 부분(제목+영상+입력)이 패널보다 커져 입력칸이 화면 밖으로 잘린다. */
.haeun-log{min-height:104px}
/* 🔴 좁거나 낮은 화면에서 제일 크게 자리를 먹던 것이 **머리말 덩어리**였다(360px 에서 202px).
   거기서 줄일 것은 장식이지 입력칸이 아니다 — 부제와 여백부터 접는다. */
@media(max-width:400px),(max-height:700px){
  .haeun-head{padding:13px 16px 11px}
  .haeun-head h2{font-size:18px;line-height:1.3}
  .haeun-head small{display:none}
}
@media(max-height:560px){
  .haeun-head{padding:9px 16px}
  .haeun-head p{display:none}
  .haeun-head h2{font-size:16px}
  .haeun-log{min-height:72px}
  .haeun-form textarea{min-height:48px}
  .haeun-note{display:none}
}
/* 키보드가 거의 화면을 덮은 상태 — 남길 것은 **입력칸과 최근 몇 줄**뿐이다.
   여기서 머리말을 붙들고 있으면 정작 쓰려던 칸이 밖으로 밀린다. */
@media(max-height:470px){
  .haeun-head{display:none}
  .haeun-log{min-height:44px;padding:10px 14px}
  .haeun-form{padding:9px}
  .haeun-form textarea{min-height:40px}
  .haeun-row{gap:8px}
}

/* 키보드가 올라와 화면이 낮아지면 영상을 접는다 — 그때 필요한 건 입력칸이다 */
@media(max-height:620px){.haeun-stage{max-height:18vh}}
@media(max-height:520px){.haeun-stage{display:none}}
/* 움직임을 불편해하는 분에게는 멈춰서 보여 준다 */
@media(prefers-reduced-motion:reduce){.haeun-video{display:none}}

/* 🔴 0921 대표 #11235 「모바일에서 긴 글은 잘리고 자판 올라오면 하단도 잘려」
   원인: iOS 는 자판이 올라와도 **레이아웃 뷰포트가 그대로**여서 `100dvh`·`max-height` 높이 질의가
   아예 걸리지 않는다(위의 max-height 규칙들이 폰에서 안 먹는 이유). 그래서 패널 아래가 자판에 덮인다.
   고침: 실제로 보이는 높이(`visualViewport`)를 스크립트가 재서 패널 크기를 직접 정하고,
   높이별 규칙은 미디어 질의 대신 **클래스**로도 걸어 둔다(질의가 안 걸리는 환경 대비). */
.haeun-panel.is-vvfit{max-height:none}
.haeun-panel.is-short .haeun-head{padding:13px 16px 11px}
.haeun-panel.is-short .haeun-head h2{font-size:18px;line-height:1.3}
.haeun-panel.is-short .haeun-head small{display:none}
.haeun-panel.is-shorter .haeun-stage{max-height:18vh}
.haeun-panel.is-veryshort .haeun-head{padding:9px 16px}
.haeun-panel.is-veryshort .haeun-head p{display:none}
.haeun-panel.is-veryshort .haeun-head h2{font-size:16px}
.haeun-panel.is-veryshort .haeun-log{min-height:72px}
.haeun-panel.is-veryshort .haeun-form textarea{min-height:48px}
.haeun-panel.is-veryshort .haeun-note{display:none}
.haeun-panel.is-nostage .haeun-stage{display:none}
.haeun-panel.is-tiny .haeun-head{display:none}
.haeun-panel.is-tiny .haeun-log{min-height:44px;padding:10px 14px}
.haeun-panel.is-tiny .haeun-form{padding:9px}
.haeun-panel.is-tiny .haeun-form textarea{min-height:40px}
.haeun-panel.is-tiny .haeun-row{gap:8px}
/* 긴 답도 잘리지 않게 — 말풍선은 줄바꿈하고, 넘치는 쪽은 **기록 칸이 스스로 스크롤**한다. */
.haeun-msg{overflow-wrap:anywhere;word-break:break-word}
.haeun-log{flex:1 1 auto;min-height:0}

/* 🔴 0921 대표 #11243 — 기다리는 동안 점 세 개(콜통 유나 말풍선과 같은 방식) */
.haeun-msg.haeun-typing{padding:14px;min-width:64px}
.haeun-dots{display:inline-flex;gap:5px;align-items:center}
.haeun-dots i{width:7px;height:7px;border-radius:50%;background:#a0a4ab;display:inline-block;animation:haeunDot 1.3s ease-in-out infinite}
.haeun-dots i:nth-child(2){animation-delay:.18s}
.haeun-dots i:nth-child(3){animation-delay:.36s}
@keyframes haeunDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.haeun-dots i{animation:none;opacity:.6}}

/* 🔴 0922 대표 #11339 두 가지
   (1) 「긴 문장을 말하면 영상 칸이 아주 미세하게 위로 밀려 올라간다」
       원인: 영상 칸이 `flex:0 1 auto` 라 **줄어들 수 있는 칸**이었다. 글이 길어질수록 flex 가
       영상 칸을 조금씩 깎아 화면이 야금야금 움직인다(사람 눈엔 「밀려 올라간다」로 보인다).
       고침: 영상 칸의 높이를 **먼저 못 박고**(줄지 않는다), 늘고 주는 쪽은 **기록 칸 하나만**.
   (2) 「PC 에서 긴 답이 한눈에 안 들어온다」 → 넓은 화면에서 모달을 **세로로 늘린다**. */
.haeun-stage{flex:0 0 auto}                 /* 줄어들지 않는다 — 이 한 줄이 밀림의 뿌리 */
.haeun-log{flex:1 1 auto;min-height:0}      /* 늘고 주는 것은 기록 칸만 */

@media (min-width:900px){
  .haeun-panel{
    width:min(560px,calc(100vw - 48px));
    /* 세로를 키운다 — 전화 막대·여백만 남기고 화면을 쓴다 */
    max-height:calc(100dvh - 104px - env(safe-area-inset-bottom));
    height:min(820px,calc(100dvh - 104px - env(safe-area-inset-bottom)));
  }
  /* 🔴 세로를 늘려도 **기록 칸이 커져야** 한눈에 들어온다 — 영상·입력칸이 다 먹으면 늘린 보람이 없다.
     넓은 화면에서는 영상을 조금 줄이고 입력칸도 낮춰 **읽는 자리**를 가장 크게 준다. */
  .haeun-stage{max-height:200px}
  .haeun-form{padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
  .haeun-form textarea{min-height:56px;max-height:120px}
  .haeun-row{margin-top:8px}
  .haeun-note{font-size:15px}
  /* 🔴 min-height 로 밀어붙이면 남는 자리가 모자랄 때 **위 칸들이 밀려 올라간다**(0922 실측 77px).
     기록 칸은 남는 자리를 받게만 두고, 자리는 영상·입력칸을 줄여서 만든다. */
  .haeun-log{padding:20px;font-size:17px}
  .haeun-msg{max-width:82%}
}
@media (min-width:1280px){
  .haeun-panel{width:min(620px,calc(100vw - 64px))}
}

/* 🔴 0922 대표 #11344 「하은이 얼굴 짤린다 PC」
   원인: 영상은 3:2(672×448)인데 넓은 화면의 영상 칸은 620×200 으로 **훨씬 납작**하다.
   `object-fit:cover` 는 남는 위아래를 **똑같이** 잘라내므로(위 106px·아래 106px) 머리 윗부분이 날아간다.
   고침: 잘라내는 창을 **위쪽으로 올린다** — 아래(책상)를 더 버리고 얼굴을 남긴다. */
.haeun-still,.haeun-video{object-position:center 26%}
@media (min-width:900px){
  .haeun-still,.haeun-video{object-position:center 20%}
  .haeun-stage{max-height:240px}     /* 얼굴이 들어갈 만큼만 되돌린다(읽는 칸은 그대로 크게) */
}

/* 🔴 0922 대표 #11354 「사진이 위아래가 여전히 좀 잘려서 아쉽다」
   원인은 자르는 위치가 아니라 **칸의 모양**이었다. 원본은 832×576(약 1.44:1)인데
   칸은 620×240(2.58:1)처럼 납작해서, `cover` 는 넘치는 위아래를 반드시 잘라낸다.
   위치를 아무리 옮겨도 「덜 잘릴」 뿐 안 잘리게는 못 한다.
   고침: 칸을 **원본 비율(3:2)** 로 두고 `contain` 으로 **한 장을 통째로** 보여 준다.
   넓은 화면에서는 칸을 가운데로 모아, 읽는 자리를 뺏지 않으면서 얼굴이 다 보이게. */
.haeun-stage{aspect-ratio:3/2;background:#0f1114;display:flex;align-items:center;justify-content:center}
.haeun-still,.haeun-video{object-fit:contain;object-position:center}
@media (min-width:900px){
  /* 자르지 않으려면 칸이 3:2 여야 하고, 3:2 는 세로를 많이 먹는다.
     그래서 넓은 화면에서는 **칸을 조금 좁혀** 높이를 낮추고(380×253), 모달 자체를 조금 더 키워
     읽는 자리를 되돌려 준다. 얼굴은 다 보이고 글도 한눈에 들어오는 지점. */
  .haeun-stage{width:min(100%,380px);margin:0 auto;max-height:260px}
  .haeun-panel{
    max-height:calc(100dvh - 72px - env(safe-area-inset-bottom));
    height:min(880px,calc(100dvh - 72px - env(safe-area-inset-bottom)));
  }
  .haeun-head{padding:14px 20px 12px}
  .haeun-head small{margin-top:6px;font-size:15px}
}
@media (max-width:899px){
  /* 🔴 46vw 로 조였더니 폰에서 양옆에 검은 띠가 생겼다(칸이 3:2 보다 납작해져 contain 이 줄인 것).
     폰은 화면 폭이 곧 칸 폭이라 **3:2 그대로** 두는 게 제일 크게 보인다. */
  /* 🔴 3:2 는 세로를 많이 먹는다 — 화면이 낮은 폰(360×640)에서는 기록 칸이 49px 까지 쪼그라들었다(실측).
     그래서 **화면 높이의 34% 를 넘지 않게** 묶는다. 넘는 폰에서는 양옆에 얇은 띠가 생기지만
     위아래는 여전히 안 잘린다(대표 #11354 가 아쉬워한 건 위아래다). */
  .haeun-stage{max-height:min(72vw,300px,34vh)}
}

/* 🔴 0922 실측 — 360×640 폰에서 기록 칸이 58px 였다. 범인은 영상이 아니라 **입력 덩어리 210px** 였다
   (좁은 폭 규칙이 단추를 아래로 내려 세로로 쌓는다 + 안내문 두 줄).
   화면이 낮으면(is-short) 입력칸을 낮추고, 단추를 옆으로 되돌리고, 안내문은 접는다. */
.haeun-panel.is-short .haeun-form textarea{min-height:52px}
.haeun-panel.is-short .haeun-row{flex-direction:row;align-items:center}
.haeun-panel.is-short .haeun-note{display:none}
.haeun-panel.is-short .haeun-send{width:auto}

/* 🔴 0922 대표 #11358 — 영상 옆(넓은 화면)·아래(폰)의 빈자리에 「지금 할 수 있는 두 가지」.
   채팅이 느리거나 답답한 분에게 길을 하나 더 준다. 모델이 죽어도 이 둘은 살아 있다. */
.haeun-band{flex:0 0 auto;display:flex;align-items:stretch;gap:10px;background:#f5f3ef;
            border-bottom:1px solid #d9dadd;padding:10px}
.haeun-band .haeun-stage{flex:1 1 auto;border-radius:12px;overflow:hidden;width:auto;margin:0;max-height:none}
.haeun-quick{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:8px;width:170px}
.haeun-quick-btn{display:flex;align-items:center;justify-content:center;text-align:center;
                 min-height:48px;padding:8px 12px;border:1px solid #d9dadd;border-radius:12px;
                 background:#fff;color:#17191d;font-weight:800;font-size:16px;line-height:1.3;text-decoration:none}
.haeun-quick-btn.primary{background:#d2271f;border-color:#d2271f;color:#fff}
.haeun-quick-btn:focus-visible{outline:3px solid #17191d;outline-offset:2px}
/* 좁은 화면: 영상 아래에 두 개 나란히 */
@media (max-width:719px){
  .haeun-band{flex-direction:column;gap:8px;padding:8px}
  .haeun-quick{flex-direction:row;width:auto}
  .haeun-quick-btn{flex:1 1 0;min-height:46px}
}
/* 화면이 아주 낮으면 영상만 접고 단추는 남긴다 — 그때가 오히려 단추가 필요한 때다 */
.haeun-panel.is-nostage .haeun-band{padding:8px}
.haeun-panel.is-tiny .haeun-quick-btn{min-height:42px;font-size:15px}

/* 넓은 화면: 단추가 옆에 서면서 영상이 조금 커졌다 — 읽는 자리를 되돌린다 */
@media (min-width:900px){.haeun-band .haeun-stage{max-height:240px}}
@media (max-width:719px){.haeun-band .haeun-stage{max-height:min(66vw,260px,32vh)}}

/* 낮은 화면에서는 단추 줄도 몸집을 줄인다 — 자판이 올라온 아주 낮은 상태에서는 접는다.
   그때 필요한 건 쓰던 글과 입력칸이다(단추는 창을 닫으면 페이지에 그대로 있다). */
.haeun-panel.is-short .haeun-band{padding:6px;gap:6px}
.haeun-panel.is-short .haeun-quick-btn{min-height:40px;font-size:15px}
.haeun-panel.is-short .haeun-band .haeun-stage{max-height:26vh}
.haeun-panel.is-tiny .haeun-quick{display:none}

/* 0928 동의 카드 */
.haeun-consent{flex-direction:column;align-items:stretch;background:#fff8ee;border:1px solid #e7bf84;border-radius:12px;padding:12px}
.haeun-consent-text{margin:0 0 4px;font-size:15px;line-height:1.55;color:#3d2a10}
.haeun-consent-meta{margin:0 0 8px;font-size:12px;color:#8a7a5a}
.haeun-consent-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.haeun-consent-input{flex:1 1 140px;min-height:44px;padding:8px 10px;border:1px solid #d9c9a8;border-radius:8px;font-size:16px}
.haeun-consent-btns{display:flex;flex-wrap:wrap;gap:8px}



/* 360/390/430 — 패널 폭 336~406px: 입력·버튼을 한 줄씩 */
@media(max-width:430px){.haeun-consent{padding:10px}.haeun-consent-row{flex-direction:column}.haeun-consent-input{flex:1 1 auto;width:100%}.haeun-consent-btns{flex-direction:column}.haeun-consent-btns .haeun-action{width:100%;text-align:center;min-height:46px}}

/* 🔴 0929 클팀장 — 단추가 150px 로 늘어났던 자리.
   .haeun-action 이 flex:1 1 150px 인데 카드의 단추 상자는 flex-direction:column 이라
   그 150px 이 **너비가 아니라 높이**가 된다(원래는 가로 배치용 너비 기준이었다).
   실측: 카드 742→437 · 단추 150→48 (360/390/430 동일). min-height:46 은 원래 지켜지고 있었다. */
.haeun-consent-btns .haeun-action{flex:0 0 auto;}

/* 0929 칠퍼스 — 카드의 [동의하고 남기기]가 속 빈 빨간 테두리였다. 충돌이 아니라 **채움 규칙이 없던 것**:
   .haeun-action.primary(28줄)는 원래 테두리형(빨간 테두리+빨간 글씨)이고, 채워진 빨강은 다른 클래스 .haeun-quick-btn.primary(215줄)의 것이다.
   카드 안에서만 채운다(다른 자리의 primary 는 그대로). 선택자 (0,3,0) > (0,2,0). */
.haeun-consent-btns .haeun-action.primary{background:#d2271f;border-color:#d2271f;color:#fff}
.haeun-consent-btns .haeun-action.primary:hover{background:#b81f18;border-color:#b81f18}

/* haeun_consent_fold_1003: keep agree button in first viewport */
/*
  Cause (measured, live CSS):
  - .haeun-consent card height ~437–461px + textarea ~72–78px in .haeun-form
  - .haeun-form has no scroll; #haeun-panel overflow:hidden clips the bottom
  - primary button bottom ~963 (390×844) / ~888 (360×640)
  - dialogue 1/5/10 lines did NOT change tops (log crushed); length is not the driver
  Fix: dock form as flex child with min-height:0 + scroll; hide typing row while card open;
  sticky action row; on narrow screens put actions in 2-col so all three fit.
  Copy/version/button labels untouched.
*/
#haeun-panel:has(.haeun-consent) #haeun-widget{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;
}
/* card-in-log: log holds the card — grow log, shrink form (composer hidden) */
#haeun-panel:has(.haeun-consent) .haeun-log{
  flex:1 1 auto;
  max-height:none;
  min-height:0;
}
#haeun-panel:has(.haeun-consent) .haeun-stage,
#haeun-panel:has(.haeun-consent) .haeun-band{
  max-height:16vh;
}
#haeun-panel:has(.haeun-consent) .haeun-form{
  flex:0 0 auto;
  min-height:0;
  max-height:none;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* Phone field lives on the card — hide the chat composer while consent is open */
#haeun-panel:has(.haeun-consent) .haeun-form textarea,
#haeun-panel:has(.haeun-consent) .haeun-form .haeun-row,
#haeun-panel:has(.haeun-consent) .haeun-form .haeun-note{
  display:none !important;
}
/* Card is also .haeun-actions (flex-wrap). Force a column dock so sticky/wrap
   cannot shove .haeun-consent-btns to the right of the card (remeasured:
   card right≈366, btns left≈363 on 390 — vertical-only fully check was true). */
.haeun-consent{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  flex:0 0 auto; /* in-log: natural height; log scrolls */
  list-style:none;
  min-height:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:visible;
  margin:0;
}
#haeun-panel:has(.haeun-consent) .haeun-consent-text{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
#haeun-panel:has(.haeun-consent) .haeun-consent-meta,
#haeun-panel:has(.haeun-consent) .haeun-consent-row{
  flex:0 0 auto;
}
.haeun-consent-btns{
  /* sticky was the horizontal escape — keep buttons in normal flow at card foot */
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:5;
  flex:0 0 auto;
  align-self:stretch;
  width:100% !important;
  max-width:100%;
  box-sizing:border-box;
  margin-top:auto;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-top:8px;
  padding-bottom:4px;
  background:#fff8ee;
  box-shadow:0 -10px 14px -10px rgba(61,42,16,.2);
}
/* Override the mobile column stack so 동의/괜찮아요 share a row (전화 full width under).
   Use grid — flex 50% + long labels was overflowing the card width. */
@media (max-width:430px){
  #haeun-panel:has(.haeun-consent) .haeun-consent-btns{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100% !important;
    max-width:100%;
  }
  #haeun-panel:has(.haeun-consent) .haeun-consent-btns .haeun-action{
    width:auto !important;
    min-width:0;
    max-width:100%;
    min-height:46px;
    text-align:center;
    box-sizing:border-box;
    flex:none !important; /* kill .haeun-actions .haeun-action{flex:1 1 150px} */
  }
  #haeun-panel:has(.haeun-consent) .haeun-consent-btns a.haeun-action{
    grid-column:1 / -1;
  }
}
@media (max-height:700px){
  #haeun-panel:has(.haeun-consent) .haeun-head small,
  #haeun-panel:has(.haeun-consent) .haeun-head p{display:none}
  .haeun-consent{padding:8px}
  .haeun-consent-text{font-size:14px;line-height:1.45}
  .haeun-consent-input{min-height:40px;padding:7px 9px}
}
@media (max-height:640px){
  #haeun-panel:has(.haeun-consent) .haeun-log{flex:1 1 auto; max-height:none; min-height:0}
  #haeun-panel:has(.haeun-consent) .haeun-stage,
  #haeun-panel:has(.haeun-consent) .haeun-band{display:none}
  .haeun-consent-text{font-size:13px}
  .haeun-consent-meta{margin-bottom:4px}
  .haeun-consent-input{min-height:36px}
  #haeun-panel:has(.haeun-consent) .haeun-consent-btns .haeun-action{min-height:42px;font-size:15px}
}

/* haeun_consent_fold_1003: band #11358 on narrow + consent */
/*
  Boss intent #11358: put 지원서/전화 in the LEFT-RIGHT gap of 3:2 video on WIDE screens.
  Measured: side-by-side from width>=720px; at <=719px band goes COLUMN and buttons
  sit BELOW the photo (eating vertical space ~32–44% of panel).
  Existing fold: is-nostage (vvH<520) hides stage, KEEPS buttons (comment: 그때 단추가 필요).
               is-tiny (vvH<470) does display:none on .haeun-quick — buttons vanish.
  Consent open does NOT change vvH, so neither class fires; photo still costs ~37% on 390.
  Fix (do NOT remove buttons): when consent is open on narrow, reuse is-nostage intent —
  hide stage only; keep .haeun-quick reachable. While consent is up, override is-tiny hide.
*/
@media (max-width:719px){
  #haeun-panel:has(.haeun-consent) .haeun-stage{
    display:none !important;
  }
  /* Tall phone, no keyboard: keep #11358 quick reachable (override is-tiny hide). */
  #haeun-panel:has(.haeun-consent):not(.is-short) .haeun-band{
    padding:8px;
    gap:8px;
  }
  #haeun-panel:has(.haeun-consent):not(.is-short) .haeun-quick{
    display:flex !important;
    flex-direction:row;
    width:auto;
  }
  #haeun-panel:has(.haeun-consent):not(.is-short) .haeun-quick-btn{
    flex:1 1 0;
    min-height:44px;
  }
}


/* haeun_keyboard_1003: consent + keyboard (fitPanel is-short / vv~500)
   Guest moment: phone field focused → vv shrinks → agree was T602 with H500 (below fold).
   Decision #11358: while consent is open AND short, HIDE quick/band — agree/decline/call
   are the conversion path; page tel: + launcher remain; after decline/dismiss, quick returns.
   Class-based (is-short) so real iOS keyboard works; max-height media alone does not.
*/
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-head{
  display:none !important;
}
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-band,
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-quick{
  display:none !important;
}
/* Do NOT display:none messages — that resets log scrollTop when keyboard dismisses
   and leaves the card below the fold until the guest scrolls. */
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-consent-meta{
  display:none !important;
}
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-consent{
  padding:8px;
  overflow:visible; /* allow sticky btns against .haeun-log scrollport */
}
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-consent-text{
  font-size:13px;
  line-height:1.35;
  max-height:3.9em;
  overflow:auto;
  margin-bottom:4px;
}
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-consent-row{
  gap:4px;
  margin-bottom:4px;
}
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-consent-input{
  min-height:36px;
  padding:6px 8px;
  font-size:16px; /* iOS zoom guard */
}
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-consent-btns{
  /* Stick to the visible bottom of .haeun-log while typing; column flex (not wrap)
     avoids the earlier horizontal escape from sticky+wrap. */
  position:sticky !important;
  bottom:0 !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  max-width:100%;
  align-self:stretch;
  box-sizing:border-box;
  margin-top:6px;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-top:6px;
  padding-bottom:4px;
  background:#fff8ee;
  box-shadow:0 -10px 14px -10px rgba(61,42,16,.25);
  z-index:6;
}
#haeun-panel.is-vvfit.is-short:has(.haeun-consent) .haeun-consent-btns .haeun-action{
  min-height:44px;
  font-size:15px;
}

/* Landscape short (fitPanel does not run when width>560): grow panel, keep call in view */
@media (orientation:landscape) and (max-height:500px){
  #haeun-panel:has(.haeun-consent){
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    top:8px !important;
    bottom:8px !important;
    width:auto !important;
    max-height:none !important;
    height:auto !important;
  }
  #haeun-panel:has(.haeun-consent) .haeun-head{display:none !important;}
  #haeun-panel:has(.haeun-consent) .haeun-band,
  #haeun-panel:has(.haeun-consent) .haeun-stage,
  #haeun-panel:has(.haeun-consent) .haeun-quick{display:none !important;}
  #haeun-panel:has(.haeun-consent) .haeun-log > .haeun-msg{display:none !important;}
  #haeun-panel:has(.haeun-consent) .haeun-consent-meta{display:none !important;}
  #haeun-panel:has(.haeun-consent) .haeun-consent-text{
    font-size:13px; line-height:1.35; max-height:3.2em; overflow:auto;
  }
  #haeun-panel:has(.haeun-consent) .haeun-consent-input{min-height:34px; padding:5px 8px;}
  #haeun-panel:has(.haeun-consent) .haeun-consent-btns .haeun-action{min-height:40px; font-size:14px;}
}

/* 1013 readability: reserve the visible viewport for conversation first.
   Copy stays 16px; only media/chrome folds as usable height falls. */
.haeun-panel.is-vvfit{min-height:0}
.haeun-panel.is-short .haeun-band .haeun-stage{display:none !important}
.haeun-panel.is-short .haeun-log{min-height:96px}
.haeun-panel.is-shorter .haeun-band{display:none !important}
.haeun-panel.is-shorter .haeun-log{min-height:72px}
.haeun-panel.is-veryshort .haeun-head{display:none}
.haeun-panel.is-tiny .haeun-log{min-height:44px}

/* The generic landscape path now uses visualViewport too. Keep the close
   control and composer fixed; the log is the only scrolling region. */
.haeun-panel.is-vvfit.is-tiny{border-radius:10px}
.haeun-panel.is-vvfit.is-tiny .haeun-panel-bar{min-height:48px;padding-block:2px}
.haeun-panel.is-vvfit.is-tiny .haeun-form{padding:7px}
.haeun-panel.is-vvfit.is-tiny .haeun-form textarea{min-height:40px;max-height:64px}
.haeun-panel.is-vvfit.is-tiny .haeun-row{margin-top:6px}

/* 1013 v2: use the same compact chrome on every fitted phone. The old
   max-width:400 boundary made 412x915 show less conversation than 390x844. */
.haeun-panel.is-vvfit .haeun-head{padding:13px 16px 11px}
.haeun-panel.is-vvfit .haeun-head h2{font-size:18px;line-height:1.3}
.haeun-panel.is-vvfit .haeun-head small{display:none}
.haeun-panel.is-vvfit:not(.is-short) .haeun-band .haeun-stage{
  max-height:min(66vw,220px,26vh)
}

/* At a 250px keyboard viewport, stack no second input row: the 44px input
   and 44px send control share one row, leaving at least three text lines. */
.haeun-panel.is-vvfit.is-tiny:not(:has(.haeun-consent)) .haeun-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:6px;
  padding:5px;
}
.haeun-panel.is-vvfit.is-tiny:not(:has(.haeun-consent)) .haeun-form textarea{
  min-height:44px;
  height:44px;
  max-height:44px;
}
.haeun-panel.is-vvfit.is-tiny:not(:has(.haeun-consent)) .haeun-row{
  margin:0;
  gap:0;
}
.haeun-panel.is-vvfit.is-tiny:not(:has(.haeun-consent)) .haeun-send{
  min-width:88px;
  width:auto;
  min-height:44px;
}