*,
*::before,
*::after { box-sizing: border-box; } 

:root { 
 --bg:#ffffff; 
 --fg:#111111; 
 --muted:#6b7280; 
 --primary:#111111; 
 --primary-fg:#ffffff; 
 --surface:#f6f7fb; 
 --border:#e5e7eb; 
 --radius:16px; 
 --shadow:0 8px 24px rgba(0,0,0,0.08); 

 --home-bg-green: #A8C277; /* 홈 그 아래 */
 --default-bg: #F7F5F0; /* 역할 선택 */

  --progress-h: 5px;

 --maxw: 500px; 
 --header-h: 0px; 
 --dock-h: 0px; 
 } 

@font-face { 
 font-family: 'CookieRun'; 
 src: url('assets/fonts/CookieRun-Regular.woff') format('woff'); 
 font-weight: normal; 
 font-style: normal; 
 font-display: swap; 
 } 

* { box-sizing:border-box } 
html,body { 
 margin:0; padding:0; 
 height:100%; 
 overflow-x: hidden; 
 } 
html, body { 
 font-family: "CookieRun", system-ui, -apple-system, "Segoe UI",
 Roboto, "Noto Sans KR", "Apple SD Gothic Neo",
 "Malgun Gothic", sans-serif; 
 font-synthesis-weight: none; 
 text-rendering: optimizeLegibility; 
 } 
body { 
 background-color: var(--default-bg); 
 background-repeat: no-repeat; 
 background-attachment: scroll; /* 모바일 안정성 */
 } 

.page { 
 max-width:var(--maxw, 500px); 
 width:100%; 
 margin:0 auto; 
 min-height:100dvh; 
 position:relative; 
 } 
body[data-view="home"] .page { 
 background: var(--home-bg-green); 
 } 
main { flex:1; } 

.container { width:min(960px, 100%); margin:0 auto; } 
.start-btn { 
 display: flex; 
 justify-content: center; 
 } 
.site-header { 
 position: sticky; top: 0; z-index: 10; /* 이미 있다면 중복 OK */
 background: var(--default-bg); 
 } 
.top-progress { 
 position: absolute; left: 0; right: 0; bottom: 0; 
 width: 100%; /* 헤더(=500px 프레임) 폭에 맞춤 */
 height: 5px; 
 background: var(--default-bg); /* 헤더와 동일한 배경 */
 overflow: hidden; 
 } 
.site-header .header-inner { display: flex; 
 justify-content: center; max-width: var(--maxw); width:100%; margin:0 auto; padding:16px 0; } 
.top-progress .bar { 
 height: 100%; 
 width: 0%; 
 background: #F18D00; /* 진행 색 */
 transition: width .25s ease; 
 } 
.top-progress { transition: height .15s ease; } 
.top-progress[hidden] { display:block; height:0; padding:0; border:0; overflow:hidden; } 
body.is-loading .top-progress { display: none; } 

.logo { height:25px } 

.view { display: none; } 
.view.is-active { 
 display: block; 
 animation: fadeOpacity .24s ease-out; 
 will-change: opacity; 
 } 

.view-hero { 
 position: relative; 
 display: block; 
 min-height: calc(100dvh - var(--header-h)); 
 overflow: hidden; /* 필요 시 */
 }
.view[hidden] { display: none !important; }
.view:not([hidden]) { content-visibility: auto; contain-intrinsic-size: 800px; }

/* 배경 이미지는 hero 상단에 '고정'되지만, hero 높이를 만들지 않음 */
.view-hero > .bg-top { 
 position: absolute; top: 0; left: 50%; 
 transform: translateX(-50%); 
 width: min(100%, var(--maxw, 500px)); /* ✅ 아래 2번 조건과 함께 반응형 */
 max-width: 100%; 
 height: auto; 
 object-fit: cover; 
 z-index: 0; pointer-events: none; 
 } 
.view-overlay { 
 position: absolute; inset: 0; 
 display:flex; 
 flex-direction:column; gap:8px; padding:16px; 
 } 
.view-overlay.center { 
 justify-content: center; align-items: center; text-align: center; 
 } 
.view-content { 
 position: absolute; inset: 0; z-index: 1; 
 display: flex; flex-direction: column; gap: 12px; 
 padding: 16px; 
 } 
/* 정렬 유틸리티: 필요에 따라 .center / .top / .bottom 사용 */
.view-content.center { align-items: center; justify-content: center; text-align: center; } 
.view-content.top { align-items: center; justify-content: flex-start; text-align: center; } 
.view-content.bottom { align-items: center; justify-content: flex-end; text-align: center; } 
.view-content.quiz { 
 position: absolute; top: 0; left: 0; right: 0; 
 bottom: var(--quiz-dock-h, 0px); 
 display: flex; flex-direction: column; 
 align-items: center; justify-content: center; text-align: center; 
 gap: 12px; padding: 16px; 
 } 
#quiz-dock.options { 
 display: grid; grid-template-columns: 1fr; gap: 10px; 
 max-width: var(--maxw, 500px); 
 width: 100%; margin: 16px auto 0; 
 } 

.start-btn { 
 justify-content: center; 
 } 

.dock { 
 position: fixed; 
 left: 50%; 
 transform: translateX(-50%); 
 bottom: 12px; 
 width: min(100dvw, var(--maxw)); 
 padding: 12px 16px; 
 z-index: 1000; 
 } 

.title { margin:16px 0 8px; font-size:clamp(20px,4vw,28px); text-align:center } 
.subtitle { margin:0 0 16px; color:var(--muted); text-align:center } 

.hero { display:flex; justify-content:center; margin:24px 0 } 
.hero img { width:min(680px, 100%); border-radius:var(--radius); box-shadow:var(--shadow) } 


.btn { 
 display:inline-flex; align-items:center; justify-content:center; 
 gap:8px; padding:12px 16px; border-radius:12px; border:1px solid var(--border); 
 background:#fff; color:var(--fg); cursor:pointer; font-weight:600; transition:.2s; 
 min-width:140px; 
 } 
.btn:hover { transform:translateY(-1px) } 
.btn.primary { 
 background:var(--primary); 
 color:var(--primary-fg); 
 border-color:transparent; 
 width: 80%; 
 font-size: clamp(18px, 4vw, 24px); 
 height: 75px; 
 } 
.btn.ghost { background:transparent } 

.actions { display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap } 

#role-title { 
 display: inline-block; 
 max-width: 100%; 
 text-align: center; 
 margin-inline: auto; 
 } 

#role-grid { margin-inline: auto; } 


.role-grid { 
 display:grid; 
 grid-template-columns:repeat(2,minmax(0,1fr)); 
 gap:20px; margin-top:30px
 } 
.role-card { 
 display:flex; align-items:center; justify-content:center; 
 width:100%; 
 aspect-ratio: 1 / 1; /* ✅ 정사각 유지 */
 padding: 20px; /* 현재 설정 유지 */
 border:1px solid var(--border); 
 border-radius: var(--radius); 
 background: var(--surface); 
 box-shadow: var(--shadow); 
 font-weight: 800; 
 font-size: clamp(18px, 6vw, 28px); 
 border:#000 2px solid; 
 user-select:none; cursor:pointer; 
 transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; 
 } 
.role-card:hover { filter: brightness(0.94); transform: translateY(-2px); } 
.role-card:active { filter: brightness(0.88); transform: translateY(0); } 
.role-card:focus-visible { outline:3px solid var(--primary); outline-offset:2px; } 

.role-label { pointer-events:none; } 

.ratio-1x1 { display:none !important; } 

.quiz-header { 
 display:flex; 
 justify-content:center; 
 margin:8px 0 16px; 
 color:var(--muted)
 } 
.quiz-header #progress { 
 font-size: clamp(16px,3.2vw,26px); } 

.quiz-toolbar{
  position: sticky;
  place-items: center;
  pointer-events: none;
  top: calc(var(--progress-h));
  z-index: 20;
  padding: 8px 12px 0;
}
#btn-quiz-back{
  position: relative;
  pointer-events: auto;
}

/* 작은 사이즈의 기본 버튼 */
.btn.btn--sm{
  padding: 6px 12px;
  font-size: 0.92rem;
  line-height: 1.2;

  min-width: 0 !important;
  width: 22%;
  height: 35px;
  border-radius: 17.5px;

  background: #F18D00; 
  color: var(--primary-fg); 
}

@media (max-width: 435px) {
  .btn.btn--sm{
    width: 30%;
    font-size: 0.82rem;
  }
}

.question { 
 font-size:clamp(26px,4vw,36px); 
 text-align:center; 
 text-wrap: balance; 
 word-break: keep-all; 
 line-break: strict; 
 margin:8px 0 16px
 }
.options { display:grid; grid-template-columns:1fr; gap:12px; margin:0 auto; } 
@media (min-width:640px) { 
 .options { grid-template-columns:1fr 1fr } 
 } 
.btn.option { min-height:64px } 

.loading { display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 0 } 
.spinner { width:40px; height:40px; border-radius:50%; border:4px solid var(--border); border-top-color:var(--primary); animation:spin 1s linear infinite } 

.result-figure { display:flex; justify-content:center; margin:12px 0 8px } 
.result-figure img { width:min(460px,100%); border-radius:var(--radius); box-shadow:var(--shadow) } 
.result-desc { color:var(--fg); text-align:center; margin:30px 0 8px; } 
.result-quote { color:var(--muted); text-align:center; margin:4px 0 0; font-style:italic } 

.modal { position:fixed; inset:0; display:none; z-index:50 } 
.modal.is-open { display:grid; place-items:center; } 
.modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.35) } 
.modal__panel { 
 position:absolute; inset:auto 50% 25% 50%; transform:translate(0,0); 
 width:min(960px, 92%); background:#fff; border-radius:16px; box-shadow:var(--shadow); 
 max-height:80vh; overflow:auto
 } 
.modal__header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border) } 
.icon-btn { background:transparent; border:none; font-size:18px; cursor:pointer } 
.icon-btn:hover { 
 background: color-mix(in srgb, #fff 92%, currentColor 8%); 
 border-radius: 8px; 
 } 

.types-grid { display:grid; gap:16px; padding:22px } 
.type-card { border:2px solid var(--border); border-radius:12px; background:var(--surface); display:flex; flex-direction:column; gap:8px } 
.type-card figure { margin:0; border-radius:8px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center } 
.type-card img { width:100%; height:140px; object-fit:contain } 
.type-card .name { font-weight:700; text-align:center; font-size:14px } 
.type-card:hover { 
 box-shadow: 0 12px 32px rgba(0,0,0,0.12); 
 } 

@keyframes fadeOpacity { 
 from { opacity:0 } 
 to { opacity:1 } 
 } 
@keyframes spin { to { transform:rotate(360deg) } 
 } 

/* === [결과 액션 영역] 상단 풀폭 버튼 + 하단 원형 아이콘 버튼 === */
.actions--result { display:grid; gap:14px; justify-items:center; } 
.actions--result .sub-actions { display:flex; gap:12px; justify-content:center; } 

/* 원형 아이콘 버튼 */
.circle-btn { 
 width:52px; height:52px; border-radius:50%; 
 display:inline-flex; align-items:center; justify-content:center; 
 background:#111111; border:1px solid var(--border); box-shadow:var(--shadow); 
 cursor:pointer; transition:transform .15s ease; 
 } 
.circle-btn:hover { transform:translateY(-2px); } 
.circle-btn.primary { background:var(--primary); color:var(--primary-fg); border-color:transparent; } 
.circle-btn.secondary { background: rgb(150, 150, 150); color:var(--primary-fg); border-color:transparent; } 
.circle-btn svg { width:22px; height:22px; fill:currentColor; } 

/* 접근성용 스크린리더 전용 텍스트 */
.sr-only { 
 position:absolute; width:1px; height:1px; padding:0; margin:-1px; 
 overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; 
 } 

/* === [모달] 헤더 고정 + 내부 스크롤 === */
/* 기존 .modal__panel 규칙은 유지하되, 아래 속성으로 '플렉스 열 + 내부 스크롤'만 덮어씁니다. */
.modal__panel { 
 position: relative; 
 inset: auto; 
 width: min(var(--maxw), 92vw); 
 max-height: 80vh; border-radius: 16px; 
 background: #fff; box-shadow: var(--shadow); 
 display:flex; flex-direction:column; overflow:hidden; 
 } 
.modal__header { position:sticky; top:0; z-index:1; background:#fff; padding:5px 16px; border-bottom:1px solid var(--border); } 
.modal__body { overflow:auto; padding: 0 0 16px; } 


#view-home .start-btn { display:flex; justify-content:center; } 

/* 퀴즈: 옵션 두 개를 '세로 쌓기' + 하단 고정 */
#view-quiz .options { 
 display: grid; 
 grid-template-columns: 1fr; /* 항상 세로 하나씩 */
 gap: 10px; 
 } 
#view-quiz .btn.option { 
 min-height: 80px; 
 border:#000 2px solid; 
 font-size: clamp(16px, 4vw, 20px); 
 } 
@media (max-width: 600px) { 
 #view-quiz .btn.option { 
 min-height: 70px; 
 } 
 } 

/* 결과: 상단 풀폭 + 하단 원형 버튼은 기존 구조 유지 */
#view-result .view-hero { min-height: auto; } 
#view-result .view-content.result-flow { 
 position: static; /* absolute → static */
 display: flex; flex-direction: column; gap: 5px; 
 padding: 16px; 
 } 
#view-result .actions--result { 
 display:flex; gap:14px; justify-items:center; 
 } 
#view-result .actions--result .btn.btn-block { 
 width:60%; 
 color: white; 
 background-color: #111111; 
 font-size: clamp(18px, 4vw, 24px); 
 } 

/* 로딩 블록: 배경 위 중앙 정렬 */
.loading-block { 
 display:flex; flex-direction:column; align-items:center; justify-content:center; 
 gap: 10px; 
 } 
.loading-figure img { width: 220px; height: 220px; object-fit: contain; } 
.loading-text { 
 font-weight:700; 
 font-size:clamp(20px,4.5vw,30px); 
 } 

img { max-width: 100%; height: auto; } 

.btn, .circle-btn { 
 transition: transform .15s ease, box-shadow .15s ease,
 filter .15s ease, background-color .15s ease, border-color .15s ease; 
 } 
.btn:hover, .circle-btn:hover { filter: brightness(0.94); } /* 6% 어둡게 */
.btn:active, .circle-btn:active { filter: brightness(0.88); } /* 12% 어둡게 */

/* 프라이머리(배경색 있는 버튼)는 정확히 '더 진한 색'으로 덮어쓰기 */
.btn.primary,
.circle-btn.primary { 
 background: var(--primary); 
 color: var(--primary-fg); 
 border-color: transparent; 
 } 
.btn.primary:hover,
.circle-btn.primary:hover { 
 /* color-mix 지원 브라우저에서 더 진하게 */
 background: color-mix(in srgb, var(--primary) 88%, #000 12%); 
 filter: none; /* 위 brightness 중복 방지 */
 } 
.btn.primary:active,
.circle-btn.primary:active { 
 background: color-mix(in srgb, var(--primary) 80%, #000 20%); 
 filter: none; 
 } 

/* 테두리형(ghost 등)은 배경을 살짝 채우며 어둡게 */
.btn.ghost:hover { 
 background: color-mix(in srgb, #fff 92%, currentColor 8%); 
 border-color: color-mix(in srgb, currentColor 70%, #000 30%); 
 filter: none; 
 } 
.btn.ghost:active { 
 background: color-mix(in srgb, #fff 85%, currentColor 15%); 
 border-color: color-mix(in srgb, currentColor 60%, #000 40%); 
 filter: none; 
 } 
.role-card:hover { 
 background: color-mix(in srgb, #fff 92%, currentColor 8%); 
 box-shadow: 0 12px 32px rgba(0,0,0,0.12); 
 } 

.result-figure img,
.type-card img { 
 display:block; 
 width:100%; 
 height:auto; 
 border-radius: 12px; /* 선택 */
 } 

.btn, .role-card { 
 font-family: 'CookieRun'; 
 } 

.icon-white { color:#fff; display:inline-block; width:24px; height:24px; } 

.save-hint { text-align:center; color:#333; } 
.save-hint__rule { 
 height:1px; margin:12px 0 8px; 
 background: currentColor; opacity:.2; 
 border-radius:1px; 
 } 
.hint { margin:0; font-size:clamp(18px, 4vw, 22px); } 

/* 기본은 둘 다 숨김 → 환경에 맞춰 하나만 표시 */
.hint--desktop, .hint--mobile { display:none; } 

/* 데스크톱(마우스/호버 가능) */
@media (hover:hover) and (pointer:fine) { 
 .hint--desktop { display:block; } 
 } 

/* 모바일(터치/호버 없음) */
@media (hover:none) and (pointer:coarse) { 
 .hint--mobile { display:block; } 
 } 

/* === 우측 상단 토스트 === */
.toast { 
 position: fixed; 
 top: 12px; right: 12px; 
 z-index: 1100; /* dock(1000)보다 위 */
 display: flex; align-items: center; gap: 8px; 
 padding: 8px 12px; 
 background: rgba(0,0,0,0.85); 
 color: #fff; 
 border-radius: 999px; 
 box-shadow: 0 6px 18px rgba(0,0,0,0.2); 
 font-size: 14px; 
 line-height: 1.2; 
 opacity: 0; transform: translateY(-6px); 
 pointer-events: none; 
 transition: opacity .18s ease, transform .18s ease; 
 } 
.toast.is-show { 
 opacity: 1; transform: translateY(0); 
 } 
.toast__icon { font-weight: 800; } 

/* === Heart FX layer === */
.fx-layer { 
 position: fixed; inset: 0; 
 pointer-events: none; /* 클릭 방해 X */
 z-index: 1500; /* toast(1100), dock(1000) 위 */
 } 

/* 개별 하트(이모지/이미지 공통) */
.fx-heart { 
 position: absolute; 
 left: var(--x); top: var(--y); 
 transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--scale, 1)); 
 transform-origin: center; 
 animation: floatHeart var(--dur, 1000ms) ease-out forwards; 
 will-change: transform, opacity; 
 opacity: 0; 
 } 

/* 이모지 하트 기본 크기(폰트로 제어). PNG 전환 시 width/height로 제어 */
.fx-heart.is-emoji { 
 font-size: var(--fontSize, 24px); 
 line-height: 1; 
 } 

/* PNG 하트일 때 */
.fx-heart.is-img img { 
 display:block; 
 width: var(--imgW, 24px); 
 height: auto; 
 } 

/* 위로 올라가며 사라짐 + 좌우 드리프트 + 약간의 회전 */
@keyframes floatHeart { 
 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot,0)) scale(var(--scale,1)); } 
 10% { opacity: 1; } 
 100% { 
 opacity: 0; 
 transform:
 translate(calc(-50% + var(--dx, 0px)), calc(-50% - var(--rise, 180px)))
 rotate(calc(var(--rot,0) + var(--spin, 0deg)))
 scale(calc(var(--scale,1) * 1.1)); 
 } 
 } 

/* 누르고 있는 동안 선택/드래그 방지용 토글 클래스 */
.no-select { 
 user-select: none !important; 
 -webkit-user-select: none !important; 
 } 
.no-drag img, .no-drag a, .no-drag svg { 
 -webkit-user-drag: none !important; 
 user-drag: none !important; /* 일부 브라우저에서 무시되지만 무해 */
 } 

/* (선택) 모바일 탭 하이라이트 제거 */
html, body { -webkit-tap-highlight-color: transparent; } 

/* === 결과 화면: 추천 콘텐츠 섹션 === */
.reco-block { 
 text-align:center; 
 color:#333; 
 padding: 6px 16px 10px; 
 } 

.reco-sep { 
 height:1px; 
 margin:12px auto; 
 width: 86%; 
 background: currentColor; 
 opacity:.25; 
 border-radius:1px; 
 } 
.reco-sep.dotted { 
 height: 2px; 
 opacity:.45; 
 background: repeating-linear-gradient(
 to right,
 currentColor 0 3px,
 transparent 3px 10px
 ); 
 margin-top: 50px; 
 } 

.reco-title { margin:6px 0 2px; font-weight:800; font-size: clamp(18px, 4vw, 22px); } 
.reco-title2 { margin:6px 0 2px; font-weight:800; font-size: clamp(18px, 4vw, 20px); } 
.reco-sub { margin:12px 0 16px; color:#444; font-size: clamp(12px, 3.3vw, 16px); } 
.reco-note { margin:0 0 12px; color:#888; font-size: 12px; } 

.reco-thumb { 
 margin: 8px auto 12px; 
 display: grid; 
 gap: 12px; 
 justify-items: center; 
 cursor: default; 
 } 
.reco-thumb img { 
 width: min(360px, 100%); 
 height: auto; 
 display: block; 
 border-radius: 16px; 
 box-shadow: var(--shadow); 
 } 
.reco-thumb figcaption { 
 font-size: 15px; 
 color:#333; 
 } 
#reco-image[role="button"]{ cursor: pointer; }
#reco-image[role="button"]:hover{ filter: brightness(.96); }
#reco-image[role="button"]:active{ transform: translateY(1px); }
#reco-image[role="button"]:focus-visible{
  outline: 2px solid var(--accent, #1c5ea1);
  outline-offset: 3px;
  border-radius: 8px; /* 시각적 보정 */
}



/* 이미지 버튼(텍스트 없음, 배경이미지 파일만) */
.reco-cta { 
 display:flex; gap:14px; justify-content:center; align-items:center; 
 flex-wrap: wrap; 
 margin-top: 6px; 
 } 
@media (max-width: 500px) { 
 .reco-cta { gap:6px; } 
 .img-btn__label small { font-size: clamp(6px, 2.4vw, 12px); } 
 .img-btn__label strong { font-size: clamp(10px, 3.6vw, 20px); } 
 } 
.img-btn { 
 position: relative; 
 background: none; border: 0; padding: 0; cursor: pointer; 
 overflow: hidden; 
 padding-top: 4px; 
 } 
.img-btn img { 
 display:block; width: min(220px, 44vw); height:auto; 
 transition: filter .18s ease, transform .18s ease; 
 } 
.img-btn:hover img { filter: brightness(0.9); transform: translateY(-1px); } 
.img-btn:active img { filter: brightness(0.82); transform: translateY(0); } 

/* ✅ 라벨: 이미지 위에 중앙 정렬(두 줄) */
.img-btn__label { 
 position: absolute; inset: 0; 
 display: grid; place-content: center; 
 text-align: center; pointer-events: none; 
 font-family: 'CookieRun'; 
 } 
.img-btn__label small { 
 display:block; font-size: clamp(10px, 2.6vw, 12px); opacity:.9; 
 } 
.img-btn__label strong { 
 display:block; margin-top: 2px; font-size: clamp(16px, 4.6vw, 20px); 
 font-weight: 800; 
 } 
/* 라벨이 이미지 색에 묻히지 않도록 살짝 외곽광 */
.img-btn__label small, .img-btn__label strong { 
 color: #1a1a1a; text-shadow: 0 1px 2px rgba(255,255,255,.55); 
 } 


:root { 
 --dock-extra-gap: 16px; 
 } 

#result-dock { 
 bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--dock-extra-gap)); 
 } 

/* 헤더 중앙 정렬(추천-채팅 모드) */
.modal__header.is-center h3 { text-align:center; width:100%; } 

/* 채팅 레이아웃 */
.chat-wrap { display:flex; flex-direction:column; gap:10px; } 
.chat-log { 
 max-height: 60vh; overflow:auto; 
 display:flex; flex-direction:column; gap:10px; 
 padding: 12px; 
 overflow-x: hidden; 
 } 
.msg { 
 max-width: 80%; 
 padding: 10px 12px; 
 border-radius: 14px; 
 line-height: 1.5; 
 word-break: keep-all; 
 white-space: pre-wrap; 
 font-size: 17px;
 } 
.msg.user { align-self:flex-end; background:#FFC37F; border-top-right-radius:4px; } 
.msg.bot { align-self:flex-start; background:white; border: #FFC37F 2px solid; border-top-left-radius:4px; } 

/* 다음 질문 프리뷰(오른쪽 말풍선 + 전송 버튼) */
.msg.prompt { 
 align-self:flex-end; 
 display:flex; /* 텍스트 + 버튼 한 줄 */
 align-items:center; 
 gap:8px; /* 텍스트와 버튼 간격 */
 max-width: 80%; 
 background:#FFC37F; color:#222; border-top-right-radius:4px; 
 } 
.msg.prompt .send-mini { 
 position: static; /* ✅ 기존 absolute 제거 */
 transform: none; /* ✅ 기존 translate 제거 */
 margin-left: 8px; 
 background:#f97316; color:#fff; border:0; border-radius:12px; 
 padding:6px 10px; font-size:12px; cursor:pointer; box-shadow: var(--shadow); 
 } 
.msg.prompt .send-mini:disabled { opacity:.5; cursor:default; } 
p.cta-text {
  margin: 0;
}

/* 타이핑 점점점 */
.typing { opacity:.7; } 
.typing .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#999; margin-inline:2px; animation: b 1s infinite; } 
.typing .dot:nth-child(2) { animation-delay:.15s; } .typing .dot:nth-child(3) { animation-delay:.3s; } 
@keyframes b { 0%,80%,100% { opacity:.3; transform:translateY(0) } 40% { opacity:1; transform:translateY(-3px) } 
 } 

/* CTA 버튼(봇 말풍선 내부) */
.inline-cta { margin-top:6px; display:inline-flex; } 
.inline-cta .btn { 
 background:#16a34a; color:#fff; border:0; border-radius:10px; 
 padding:8px 12px; font-size:14px; 
 } 

 .result-figure img, .reco-thumb img { content-visibility: auto; }