From c813b99ea341dba3137d991d6b2af1f440361359 Mon Sep 17 00:00:00 2001
From: AWESOMEDEV <admin@awesomedev.dev>
Date: Thu, 23 Jul 2026 13:26:38 +0900
Subject: [PATCH] =?UTF-8?q?fix(helper):=20=ED=95=99=EC=8A=B5=20=EB=8F=84?=
 =?UTF-8?q?=EC=9A=B0=EB=AF=B8=20=EA=B0=80=EB=A1=9C=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=A0=9C=EA=B1=B0=20+=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=ED=8F=B0=20=EC=82=AC=ED=8C=8C=EB=A6=AC=20=EB=8C=80=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 긴 코드 줄이 패널을 넘어 가로 스크롤 생기던 것 → overflow-wrap: anywhere
- 사파리 100vh(주소창 포함) 문제 → 100dvh로, 미지원은 vh 폴백
- 아이폰 홈바만큼 띄우기 → env(safe-area-inset-bottom)
---
 frontend/src/styles/global.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 8466e39..4e44980 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1481,7 +1481,7 @@ inline-code, .icode {
 .helper-fab {
   position: fixed;
   right: 24px;
-  bottom: 24px;
+  bottom: calc(24px + env(safe-area-inset-bottom, 0px));   /* 아이폰 홈바 위로 */
   width: 56px;
   height: 56px;
   border-radius: 50%;
@@ -1500,11 +1500,15 @@ inline-code, .icode {
 .helper-panel {
   position: fixed;
   right: 24px;
-  bottom: 92px;
+  /* 아이폰 홈바(safe-area)만큼 띄운다. env 미지원 브라우저는 fallback 0. */
+  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
   width: 360px;
   max-width: calc(100vw - 32px);
   height: 480px;
+  /* ⚠️ 사파리는 100vh에 주소창 높이가 포함돼 패널이 화면 밖으로 밀린다.
+     dvh(동적 뷰포트)는 실제 보이는 높이라 사파리에서 정확하다. 미지원 브라우저는 vh로 폴백. */
   max-height: calc(100vh - 140px);
+  max-height: calc(100dvh - 140px);
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 16px;
@@ -1531,7 +1535,9 @@ inline-code, .icode {
 }
 .helper-body {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
+  overflow-x: hidden;        /* 가로 스크롤 차단 */
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
@@ -1548,6 +1554,8 @@ inline-code, .icode {
   font-size: 14px;
   line-height: 1.6;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;   /* 긴 코드 줄이 패널을 넘어 가로 스크롤을 만드는 것 방지 */
+  min-width: 0;
   max-width: 85%;
 }
 .helper-user {