/* ============================================================
   search.css — AI 검색형 홈 (index.html 전용, 이 프로젝트의 메인 진입점)
   ------------------------------------------------------------
   두 가지 모드를 body 클래스로 전환한다:
   - body.ask-landing : 구글식 랜딩 — 가운데 검색 도크 + 하단 중앙 캐릭터
   - body.ask-result  : 결과 모드 — 하단 검색 도크 + 우측 캐릭터 +
                        콘텐츠 스트림(섹션이 하단에서 올라오며 조립)
   색상은 theme.css 변수만 사용한다 (hex 직접 사용 금지 규칙).
   ============================================================ */

/* --- 공통 셸 --- */

body.ask-landing #MainContainer.ask-shell {
  background: linear-gradient(180deg, var(--paper) 0%, var(--brand-tint) 100%);
}

/* --- 정적 SEO 요약 (2026-09 추가, 2026-09 시각적으로 숨김 처리) ---
   #MainContainer는 항상 height:100vh + overflow:hidden으로 뷰포트에 고정되어,
   질문 전까지는 검색창 외에 실제 콘텐츠가 없었다(JS 미실행 크롤러는 물론
   Googlebot처럼 JS를 실행하는 크롤러도 검색창에 직접 타이핑하지 않으므로
   콘텐츠를 볼 수 없었음). 이 문제를 풀기 위해 DOM에는 그대로 남기되(HTML만
   읽는 GPTBot 등은 CSS와 무관하게 그대로 읽어감), 사람 방문자에게는 노출되지
   않도록 시각적으로만 숨긴다(흔히 "sr-only"로 불리는 표준 기법 — display:none과
   달리 접근성 트리에는 남아 스크린리더도 읽을 수 있다). 렌더 크기가 1px×1px로
   줄어 문서 흐름에도 사실상 영향을 주지 않으므로, body 레벨 스크롤로 이 블록이
   보이던 이전 동작(#MainContainer 아래로 스크롤하면 노출)은 더 이상 발생하지
   않는다. */
#seo-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 상단 미니 바 — 전체 네비게이션 스크림(8990)보다 위에 있어야 열린 상태에서도
   토글 버튼을 눌러 닫을 수 있다 */
#ask-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 9000;
  pointer-events: none;
}

.ask-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

#ask-topbar a,
#ask-topbar button {
  pointer-events: auto;
  text-decoration: none;
}

.ask-brand {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--brand);
}

.ask-brand-ai,
.ask-logo-ai {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--paper);
  font-weight: 800;
}

/* --- 음성출력(TTS) On/Off 빠른 토글 — 관리자 패널 "음성" 탭과 같은 설정을 공유 ---
   #ask-nav-toggle과 같은 원형 버튼 스타일, 꺼짐 상태는 톤을 낮춰 구분한다 */
#ask-voice-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

#ask-voice-toggle:hover {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

#ask-voice-toggle.off {
  opacity: 0.5;
}

/* --- 전체 네비게이션 (햄버거) ---
   모바일 GnB 스타일의 토글 애니메이션·드롭다운·스크림 상호작용. 여기서는 화면 이동이
   아니라 항목 클릭 = 추천 질문 버블과 동일하게 handleAsk()로 콘텐츠를 이어 붙인다 */
#ask-nav-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

#ask-nav-toggle:hover {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

#ask-nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transition: transform 0.2s, opacity 0.2s;
}

/* 열림 = 햄버거 → X */
#ask-nav-toggle.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

#ask-nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

#ask-nav-toggle.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* 드롭다운 패널 — 헤더 바로 아래, 전체 폭 */
#ask-nav-menu {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 8995;
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  margin: 0 auto;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 24px var(--brand-shadow);
  padding: 6px 20px;
  animation: ask-nav-drop 0.18s ease-out;
}

@keyframes ask-nav-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ask-nav-item {
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  padding: 14px 4px;
  font-family: var(--font);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.15s;
}

.ask-nav-item:last-child {
  border-bottom-color: transparent;
}

.ask-nav-item:hover {
  color: var(--brand);
}

/* 서비스/제품 아래 서브 항목 묶음 — 부모 항목 바로 아래, 들여쓰기로 계층 표시 */
.ask-nav-children {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  border-bottom: 1px solid var(--line);
}

.ask-nav-children .ask-nav-item--child {
  border-bottom: none;
  padding: 10px 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.ask-nav-children .ask-nav-item--child:last-child {
  padding-bottom: 12px;
}

/* 딤 스크림 — 열림 시 search.js가 body 자식으로 런타임 생성 (헤더 자식이면 안 됨 —
   backdrop-filter 컨테이닝 블록 문제로 뷰포트를 못 덮는다) */
#ask-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 8990;
  background: var(--scrim);
}

/* 메뉴가 열려 있는 동안은 메뉴(+ 스크림)만 보이게 한다.
   캐릭터(z-index 10001)·검색 도크·콘텐츠 스트림(둘 다 9000)은 스크림(8990)보다
   z-index가 높아 가만히 두면 스크림 위로 비쳐 보이므로, z-index 경쟁 대신
   아예 안 보이게 감춘다 (visibility — 레이아웃 유지, 스크롤 위치 보존) */
body.ask-nav-open #AITalkContainer,
body.ask-nav-open #ask-dock,
body.ask-nav-open #AITalk_testTable {
  visibility: hidden;
}

/* --- 검색 도크 --- */

#ask-dock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 32px));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: top 0.45s ease, bottom 0.45s ease;
}

body.ask-landing #ask-dock {
  top: 22vh;
}

/* 결과 화면 하단 고정 바 — 관리자 호출(🔒) + 주소만 남긴 축약형.
   스트림과 함께 스크롤되지 않고 항상 화면 맨 아래에 고정된다.
   #MainContainer(max-width:1280px, margin:0 auto)와 같은 폭으로 맞추고 좌측 정렬 —
   left/right:0으로 뷰포트 전체 폭을 확보한 뒤 max-width+margin:auto로 그 안에서 가운데 배치 */
#ask-footer-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 20px;
  background: var(--footer-bg);
  color: var(--paper);
  font-size: 0.78rem;
  opacity: 0.9;
  text-align: left;
}

body.ask-result #ask-footer-bar {
  display: flex;
}

.ask-footer-text {
  opacity: 0.85;
}

/* 결과 모드 검색 도크 — 하단 고정 바 위에 여백을 두고 뜬다 (너무 붙지 않게) */
body.ask-result #ask-dock {
  top: auto;
  bottom: 60px;
  gap: 0;
}

/* 랜딩 로고/태그라인 — 결과 모드에서는 숨김 */
.ask-hero {
  text-align: center;
}

.ask-logo {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--brand-dark);
}

.ask-tagline {
  margin-top: 10px;
  color: var(--ink);
  opacity: 0.75;
  font-size: 0.98rem;
}

body.ask-result .ask-hero,
body.ask-result #ask-chips {
  display: none;
}

/* 입력창 */
#ask-form {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--paper);
  border: 1.5px solid var(--brand-line);
  border-radius: 999px;
  padding: 8px 10px;
  box-shadow: 0 10px 30px var(--brand-shadow);
  transition: box-shadow 0.2s, border-color 0.2s;
}

#ask-form:focus-within {
  border-color: var(--brand);
  box-shadow: 0 12px 34px var(--brand-shadow-strong);
}

#ask-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 1.05rem;
  color: var(--ink);
  padding: 8px 0;
}

#ask-input::placeholder {
  color: var(--ink);
  opacity: 0.4;
}

#ask-history,
#ask-mic,
#ask-send {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  transition: background 0.2s, transform 0.15s;
}

#ask-history svg {
  width: 20px;
  height: 20px;
}

#ask-history,
#ask-mic {
  background: var(--surface);
  color: var(--ink);
}

#ask-history:hover,
#ask-mic:hover {
  background: var(--brand-tint);
}

/* 음성 인식 중 — 붉은 펄스 */
#ask-mic.on {
  background: var(--alert-tint);
  animation: ask-mic-pulse 1.2s ease-in-out infinite;
}

@keyframes ask-mic-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 var(--alert-soft);
  }

  50% {
    box-shadow: 0 0 0 6px transparent;
  }
}

#ask-send {
  background: var(--brand);
  color: var(--paper);
}

#ask-send:hover {
  background: var(--brand-dark);
  transform: translateX(1px);
}

#ask-send:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

/* 추천 질문 버블 */
#ask-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.ask-chip {
  border: 1px solid var(--brand-line);
  background: var(--paper);
  color: var(--brand-dark);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.ask-chip:hover {
  background: var(--brand-tint);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px var(--brand-shadow);
}

/* --- 콘텐츠 스트림 (결과 모드) --- */

/* 랜딩에서는 hidden 속성으로 숨김. 결과 모드에서 표시되며,
   하단 도크(약 80px)에 가리지 않도록 아래 여백을 크게 준다 */
body.ask-result #AITalk_testTable {
  padding-top: 76px;
  padding-bottom: 240px;
}

/* 캐릭터가 [강조:id]로 섹션을 짚을 때 스크롤 기준점이 되는 라벨 — 위 padding-top(76px)과
   같은 값으로 맞춰, 고정 상단 바(#ask-topbar, 56px)에 가리지 않고 매번 같은 위치에 오게 한다.
   .page-eyebrow도 함께 지정하는 이유: 일반 페이지의 PAGE-HEAD는 SectionStore 인덱싱에서
   제외돼 스트림에 렌더되지 않지만, 5_0_contact(EXCLUDED_PAGES — 동적 폼이라 조각을 통째로
   주입)는 예외적으로 PAGE-HEAD가 그대로 화면에 뜨는 유일한 경우라 renderApplyPage()가 이
   라벨로 스크롤한다(§search.js) — 같은 스크롤 마진이 없으면 상단 바에 가려진다. */
body.ask-result .sec-eyebrow,
body.ask-result .page-eyebrow {
  scroll-margin-top: 76px;
}

/* 섹션 등장 — 하단에서 생성되어 올라오는 연출 (질문마다 스트림을 새로 채움).
   인라인 스타일 금지 규칙에 따라 스태거는 nth-child로 계단식 지연 */
#AITalk_testTable .ask-reveal {
  animation: ask-rise 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

#AITalk_testTable .ask-reveal:nth-child(2) { animation-delay: 0.15s; }
#AITalk_testTable .ask-reveal:nth-child(3) { animation-delay: 0.3s; }
#AITalk_testTable .ask-reveal:nth-child(4) { animation-delay: 0.45s; }
#AITalk_testTable .ask-reveal:nth-child(5) { animation-delay: 0.6s; }
#AITalk_testTable .ask-reveal:nth-child(6) { animation-delay: 0.75s; }
#AITalk_testTable .ask-reveal:nth-child(n+7) { animation-delay: 0.9s; }

/* 추천 버블 바(.ask-more)는 라운드 안에서 항상 3번째 자식(질문 말풍선→콘텐츠 박스→버블 바)으로
   고정돼 있어, 위 스태거 규칙을 그대로 적용하면 콘텐츠가 이미 다 드러난 뒤에도 매번 똑같이
   0.3s+0.65s(≈0.95s)가 추가로 걸린다. 버블 바는 여러 콘텐츠가 순차로 쏟아지는 연출의
   일부가 아니라 콘텐츠 다음에 오는 "다음 행동" UI라 즉시 반응하는 편이 낫다 — 동일
   specificity(ID 1개+클래스 2개)라 소스 순서상 이 규칙이 위 nth-child 규칙을 덮어쓴다. */
#AITalk_testTable .ask-more.ask-reveal {
  animation-delay: 0.05s;
  animation-duration: 0.4s;
}

@keyframes ask-rise {
  from {
    opacity: 0;
    transform: translateY(70px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 프리필터(버블/카드) 매치 전용 생성 연출 — 로컬 매치라 실제로 기다릴 이유는 없지만,
   결과가 순간이동하듯 튀어나오지 않도록 실제 섹션을 미리(투명하게) DOM에 채워 넣어 콘텐츠와
   똑같은 크기의 영역을 처음부터 확보해 두고("영역을 컨텐츠 크기만큼"), 그 위에 스피너를
   띄워 기다리다가, commit 시점(§search.js renderSteps preload/thinkingDelayMs)에 스피너를
   내리고 박스를 즉시 펼친 뒤 안쪽 오브젝트 디졸브·텍스트 타자기 연출(animateGeneratedContent)로
   교체한다. 무료상담 폼(renderApplyPage)도
   같은 클래스를 재사용한다 — 그쪽은 fetch가 끝나야 실제 크기를 알 수 있어 처음엔 이 박스
   자체만 스크롤 대상으로 쓰고, 로드 후 .page-eyebrow로 한 번 더 정확히 맞춘다. */
.ask-gen {
  position: relative;
  scroll-margin-top: 76px; /* .sec-eyebrow/.page-eyebrow를 아직 못 찾는 시점의 근사 스크롤 대상 */
}

/* 콘텐츠가 길면(§ 회사소개서·걸어온 길처럼 카드·타임라인이 많은 페이지) .ask-gen 박스 자체가
   최종 콘텐츠만큼 매우 길어진다 — 스피너를 그 전체 높이 한가운데(inset:0 + center)에 두면
   콘텐츠가 길수록 스피너가 화면 밖 아래로 밀려나고, 이후 실제 섹션이 드러날 때 상단으로
   스크롤(HLT, AITalk.js)하면서 준비 중에 봤던 위치와 전혀 다른 곳으로 튀어 "스크롤이
   어긋난다"는 인상을 준다. 대신 스피너를 상단(실제 섹션 제목이 들어설 자리)에 고정해 두면
   준비 중 스크롤 위치와 완성 후 HLT 스크롤 위치가 처음부터 같아진다(§search.js — 둘 다
   .sec-eyebrow를 targets로 쓴다). */
.ask-gen-spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 6px;
}

.ask-gen.is-generating .ask-gen-spinner {
  display: flex;
}

/* 실제 콘텐츠는 항상 완전한 크기로 존재하되(레이아웃 확보), is-generating 동안은
   clip-path로 완전히 가려 둔다 — display:none/visibility:hidden이 아니라 clip-path를
   쓰는 이유는 그래야 박스 크기(높이)가 즉시 확정돼 스피너가 최종 콘텐츠와 같은 크기의
   영역 안에서 뜨기 때문이다. */
.ask-gen-content {
  clip-path: inset(0 0 100% 0);
  /* commit() 시점에 이 clip-path가 바뀌며 위→아래로 걷히는 커튼처럼 열린다(즉시 펼치던
     이전 방식 대신). --ask-reveal-ms는 search.js가 콘텐츠 높이에 비례해 계산해 인라인으로
     꽂는 값 — 콘텐츠가 길수록 커튼이 걷히는 시간도 길어져야, 안쪽 오브젝트 디졸브·텍스트
     타자기(§search.js animateGeneratedContent, 각 요소의 세로 위치 비율로 지연을 계산해
     이 커튼과 같은 타임라인을 공유한다)가 "커튼이 막 지나간 자리에서 나타나는" 것처럼
     보인다. 박스 따로·요소 따로 두 겹의 연출이 아니라 하나의 위→아래 흐름으로 합친 것. */
  transition: clip-path var(--ask-reveal-ms, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.ask-gen.is-revealing .ask-gen-content {
  clip-path: inset(0 0 0% 0);
}

/* 콘텐츠 오브젝트(이미지·카드류) 등장 — 디졸브. search.js의 animateGeneratedContent()가
   렌더된 섹션 안에서 이미지/카드 단위 요소를 찾아 이 클래스를 붙이고, 요소마다
   animation-delay를 다르게 줘(인라인 style — 정적 마크업이 아니라 매번 동적으로 계산되는
   순서값이라 클래스만으로는 표현 불가) 순차적으로 나타나게 한다. */
.ask-dissolve {
  animation: ask-dissolve-in 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes ask-dissolve-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: scale(0.97);
  }

  60% {
    opacity: 1;
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.ask-preload-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ask-preload-spin 0.8s linear infinite;
  flex: none;
}

.ask-preload-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-muted);
  animation: ask-preload-pulse 1.4s ease-in-out infinite;
}

@keyframes ask-preload-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ask-preload-pulse {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

/* 결과 스트림 안의 섹션 간격은 원본보다 촘촘하게 (조립된 답변 페이지 느낌) */
body.ask-result .intro-container .intro-section {
  margin-bottom: 70px;
}

/* 게시판·폼 페이지(무료상담·문의하기)는 섹션 수가 적고 내용이 짧아 위 70px 간격이
   과함 — 페이지별 섹션 id 프리픽스로만 좁힌다. renderApplyPage()가 조각을 .ask-gen >
   .ask-gen-content로 감싸 주입하므로 실제 부모 경로는
   .intro-container > .ask-round > .ask-gen > .ask-gen-content > .intro-section이고,
   style.css의 ".sample-controls > .intro-section[id^=...]" 형태(직계 자식 선택자)는
   이 경로와 맞지 않아 매칭되지 않는다 — 반드시 이 파일처럼 후손 선택자로 오버라이드할 것. */
body.ask-result .intro-container .intro-section[id^="apply-"],
body.ask-result .intro-container .intro-section[id^="inquiry-"] {
  margin-bottom: 40px;
}

/* 사용자가 물어본 질문 — 스트림에 답변 섹션 바로 위, 좌측 정렬 말풍선으로 표시.
   최초 질문·후속 질문(append) 모두 renderSteps()가 매번 새로 붙인다 */
.ask-question-wrap {
  max-width: 1000px;
  margin: 0 auto 28px auto;
  padding: 0 6px;
  display: flex;
  justify-content: flex-start;
}

.ask-question-bubble {
  max-width: 72%;
  background: var(--ok-tint);
  color: var(--ink);
  border: 1px solid var(--ok);
  font-family: var(--font);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 12px 18px;
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  white-space: pre-wrap;
  word-break: break-word;
}

/* "더 알아보기" — 답변 하단에 붙는 후속 주제 버블 (LLM의 related 제안).
   렌더된 스트림의 항상 마지막 요소 — 후속 질문마다 제거 후 다시 맨 아래에 붙는다 */
.ask-more {
  max-width: 1000px;
  margin: 0 auto 70px auto;
  padding: 20px 6px 0;
  border-top: 1px solid var(--line);
}

.ask-more-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  opacity: 0.6;
  margin-bottom: 12px;
}

.ask-more-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- 캐릭터 배치 --- */

/* 랜딩: 하단 중앙 (style.css 기본 .AITalk_group.center 그대로) */

/* 결과 모드: 검색 도크(하단 중앙)와 겹치지 않도록 우측으로만 이동.
   크기·폰트·패딩 등 말풍선 스타일은 랜딩(첫 페이지)과 동일 — 축소 없음.
   다만 캐릭터가 우측 가장자리에 붙어 있어, 기본값(캐릭터 중앙 기준)대로 두면
   말풍선 절반이 화면 밖으로 잘린다 — 캐릭터 우측 끝에 맞춰 왼쪽으로만
   펼쳐지도록 앵커만 오른쪽으로 바꾼다 (크기·글자 스타일은 그대로) */
body.ask-result .AITalk_group.center {
  left: auto;
  right: 6px;
  transform: none;
}

body.ask-result .AITalk_speech-bubble.AITalk_bubble_top {
  left: auto;
  right: 0;
  transform: none;
  max-width: calc(100vw - 24px);
}

/* 꼬리는 계속 캐릭터 중심 부근을 가리키도록 고정 오프셋 (캐릭터 260px·말풍선 380px 기준) */
body.ask-result .AITalk_bubble_top::after {
  left: auto;
  right: 96px;
}

/* 시선 유도 말풍선(.AITalk_attention, "무엇이든 물어보세요")은 style.css 기본값이
   캐릭터 머리 위(bottom:100%)에 떠 있어, 랜딩에서 검색창/추천질문 버블과 가까워
   얼굴을 가리는 것처럼 보인다 — 이 앱에서만 캐릭터 몸통(상반신) 높이로 내리고
   z-index를 명시적으로 캐릭터보다 위로 둬 얼굴 대신 몸통 쪽에서, 이미지 위에
   또렷이 표시되게 한다. 꼬리도 위쪽(얼굴 방향)을 가리키도록 반전 */
body.ask-landing .AITalk_attention,
body.ask-result .AITalk_attention {
  bottom: auto;
  top: 63%;
  margin-bottom: 0;
  z-index: 95;
}

body.ask-landing .AITalk_attention::after,
body.ask-result .AITalk_attention::after {
  top: -7px;
  bottom: auto;
  margin-top: 0;
}

/* --- 질문 기록 패널 (#ask-history → QaHistoryPanel.js) ---
   모달 셸(.ai-msg-modal-overlay/.ai-settings-modal 등)은 settings.css 재사용,
   기록 항목만 이 앱 전용 클래스로 추가 (.ai-greeting-box와 함께 붙여 배경/여백은 공유) */
.qa-history-item {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  cursor: pointer;
}

.qa-history-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.qa-history-time {
  flex-shrink: 0;
  color: var(--ink);
  opacity: 0.5;
  font-size: 0.78rem;
}

.qa-history-answer {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--ink);
  opacity: 0.8;
  font-size: 0.88rem;
  line-height: 1.5;
  word-break: break-all;
}

/* --- 모바일 --- */

@media (max-width: 768px) {
  body.ask-landing #ask-dock {
    top: 16vh;
  }

  .ask-logo {
    font-size: 2.2rem;
  }

  .ask-tagline {
    font-size: 0.88rem;
  }

  /* 제목 라인 — 스트림이 헤더 아래로 스크롤되므로 불투명 배경을 줘야
     지나가는 콘텐츠가 비쳐 보이지 않고 영역이 확실히 구분된다 */
  #ask-topbar {
    background: var(--paper);
    box-shadow: 0 1px 0 var(--line), 0 4px 12px var(--brand-shadow);
  }
}

/* --- 결과 화면: 캐릭터 축소 + 도크 좌측 배치 ---
   캐릭터(전체 크기 기준 폭 220px, right:6px 고정)와 가운데 정렬 도크(최대
   680px)가 겹치지 않으려면 컨테이너 폭이 대략 680+452=1132px는 돼야 한다
   (실측으로 역산한 값 — 220px 캐릭터 + 680px 도크가 겹치지 않는 최소 폭).
   과거엔 이 블록이 768px에서 끊겨 있어서, 768~1132px 사이(아이패드 등 태블릿
   가로/세로 폭 다수 포함)에서 도크가 데스크톱처럼 가운데 680px로 넓어지며
   우측 캐릭터와 겹치는 사각지대가 있었다 — 1160px(여유 마진 포함)까지
   넓혀서 그 사각지대를 없앤다. */
@media (max-width: 1160px) {
  /* 뷰포트 동적 높이 대응 — 아래 768px 모바일 블록(style.css)에만 있던 100dvh
     보정을 이 구간까지 확장. 100vh는 브라우저 주소창이 접힌 최대 상태 기준으로
     계산되는데, 태블릿 브라우저에서 주소창이 열린 채로 콘텐츠 스트림(내부
     overflow-y:auto 패널)을 스크롤하면 문서 전체가 그 차이만큼 미세하게
     리바운드(고무줄) 스크롤되면서, 같은 문서 흐름에 얹힌 절대 위치 캐릭터
     레이어(#AITalkContainer)가 함께 밀려 하단 고정 위치에서 순간적으로
     들뜨는 것처럼 보이는 원인이었다. 100dvh(동적 뷰포트 단위)는 주소창의
     실제 표시 상태를 반영해 이 리바운드 자체를 없앤다 */
  #MainContainer {
    height: 100vh;
    height: 100dvh;
  }

  /* style.css의 기본 모바일 규칙(max-width:768px)이 폭·높이를 똑같이
     var(--m-char-size)로 !important 강제해 정사각 박스로 만들어 버린다 —
     실제 캐릭터 원본 이미지는 320×600(세로가 긴 인물 사진)이라, 정사각
     박스 안에서 object-fit:contain이 좌우에 큰 여백을 남겨 캐릭터가
     실제보다 작게 보인다. 검색 앱은 이 강제를 취소하고(또는 애초에 그
     강제가 적용되지 않는 769~1160px 구간에서도 동일하게) 원본 비율대로
     높이만 지정 + aspect-ratio로 폭을 자동 계산 — 여백 없이 꽉 차게
     그려지고, 박스 자체도 좁아져 입력창에 폭을 더 내줄 수 있다.
     높이 260px = 기존 175px 대비 50% 확대(태블릿에서 캐릭터가 너무 작다는
     피드백 반영) — 원본 비율 기준 폭은 약 139px(260 × 320/600) */
  body.ask-result .AITalk_character,
  body.ask-result .AITalk_floating {
    width: auto !important;
    height: 260px !important;
    aspect-ratio: 320 / 600 !important;
  }

  /* 도크는 캐릭터가 좁은 폭(위 원본 비율 기준 ~139px)으로 리사이즈되는 이 구간
     내내 우측 캐릭터와 겹치지 않도록 좌측 고정 + 우측 여백을 둔다. max-width는
     1160px에 가까운 폭에서 도크가 데스크톱 기준(680px)보다 과하게 넓어지지
     않도록 캡을 씌운 것 — left/right 기준 자동폭 계산이 이 캡보다 좁을 때는
     기존처럼 그 값을 그대로 쓴다. 우측 여백(162px)은 캐릭터 폭(~139px) +
     여유 마진(~22px, 기존 93px 폭 기준 115px에서 역산한 값)을 그대로 유지해
     커진 캐릭터 폭만큼 늘린 것. 세로 bottom 오프셋(푸터 2줄 대응)은 아래
     600px 전용 블록으로 분리했다 — 601~1160px에서는 주소가 1줄 그대로라
     데스크톱과 같은 bottom 값(도크 60px)을 그대로 쓰면 된다. */
  body.ask-result #ask-dock {
    left: 16px;
    right: 162px;
    width: auto;
    max-width: 680px;
    transform: none;
  }

  /* 말풍선 위치 보정 — style.css의 기본 모바일 규칙(max-width:768px)이
     !important로 말풍선을 항상 캐릭터 중앙 정렬로 강제해 버려서, 우측 정렬을
     의도한 위쪽 결과 모드 규칙(본 파일 463행)이 무력화되고 말풍선이 캐릭터와
     동떨어진 위치에 떠 보인다 — !important로 다시 우측 정렬을 되돌린다.
     (해당 규칙 위치: style.css의 모바일 미디어쿼리 내 ".AITalk_speech-bubble" 묶음.
     768px를 넘는 구간에는 그 강제 규칙 자체가 없어 충돌은 없지만, 이 블록의
     나머지 규칙과 함께 일관되게 묶어둔다) */
  body.ask-result .AITalk_speech-bubble.AITalk_bubble_top {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }

  /* 꼬리는 말풍선이 캐릭터 우측 끝에 고정된 상태를 전제로, 말풍선 우측 끝에서
     캐릭터 중심을 가리키는 지점을 오프셋한다 (데스크톱의 96px은 더 큰 정사각
     캐릭터 기준이라 안 맞음 — 위에서 정한 원본 비율 폭 ~139px 기준으로
     기존 93px 폭 대비 40px 값을 비례 환산한 값(40 × 139/93 ≈ 60), 실측
     오차 있으면 재조정 필요) */
  body.ask-result .AITalk_bubble_top::after {
    right: 60px;
  }

  body.ask-result #AITalk_testTable {
    padding-bottom: 190px;
  }
}

/* --- 좁은 화면 전용(주소 2줄 줄바꿈 대응) ---
   #ask-footer-bar의 주소 텍스트(§index.html #ask-footer-bar)는 실측 결과 약
   540~570px 사이에서 1줄→2줄로 줄바꿈되며 푸터 높이가 44.8px→63.9px로
   커진다. 그 이하 폭에서만 캐릭터/도크를 추가로 띄워야 하는데, 위 1160px
   블록에 함께 있으면 태블릿처럼 주소가 여전히 1줄인 폭까지 불필요하게
   캐릭터가 바닥에서 떠 보이는 문제가 있었다(폰트 렌더링 편차 감안해 600px로
   여유를 둠 — 실측 임계값보다 넉넉히 낮게). 601~1160px 구간은 이 블록이
   적용되지 않아 데스크톱과 동일하게 bottom:0(캐릭터)/60px(도크)를 그대로 쓴다. */
@media (max-width: 600px) {
  body.ask-result .AITalk_group.center {
    bottom: 60px;
  }

  body.ask-result #ask-dock {
    bottom: 78px;
  }
}