/* ===== CSS 변수 정의 (레벨 1) ===== */
:root {
  /* 레이아웃 */
  --header-height: 60px;
  --main-max-width: 1100px;
  --mobile-padding: 12px;
  
  /* Z-index 계층 */
  --z-header: 100;
  --z-modal: 1000;
  
  /* 색상 */
  --color-primary: #3b82f6;
  --color-text-dark: #0f172a;
  --color-text-light: #64748b;
  --color-border: #e2e8f0;
  --color-bg: #f8fafc;
  --color-bg-light: #f1f5f9;
  
  /* 모바일 */
  --mobile-breakpoint: 640px;

  /* Main shopping search composer sizing reference */
  --shopping-composer-width: min(90%, clamp(20rem, 50vw, 56.25rem));
  --shopping-composer-padding-block: clamp(0.5rem, 1.5vw, 0.75rem);
  --shopping-composer-padding-inline: clamp(0.75rem, 2.5vw, 1.5rem);
  --shopping-composer-radius: clamp(1rem, 3vw, 1.75rem);
  --shopping-composer-row-gap: clamp(0.5rem, 1.5vw, 0.875rem);
  --shopping-composer-control-gap: clamp(0.375rem, 1vw, 1.5rem);
  --shopping-composer-left-button-size: clamp(2.5rem, 8vw, 2.8125rem);
  --shopping-composer-right-button-size: clamp(2.5rem, 8vw, 3.125rem);
  --composer-focus-border: #bfdbfe;
  --composer-focus-shadow: 0 clamp(0.25rem, 1vw, 0.5rem) clamp(1rem, 3vw, 1.5rem) rgba(37, 99, 235, 0.08);
}

/* 상태 제어 클래스 */
.show {
  display: block !important;
}

.modal-overlay.show,
.img-preview.show {
  display: flex !important;
}

.hidden {
  display: none !important;
}

/* 초기 숨김 처리 */
#imgPreview,
#filterModal,
#inquiryModal,
#inquiryFormArea,
#fileInput {
  display: none;
}

/* ===== 기본 HTML 요소 (레벨 2) ===== */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  font-family: 'Gowun Dodum', sans-serif;
  background: #fff;
  color: var(--color-text-dark);
}

/* ===== 헤더 (레벨 2) ===== */
.app-header {
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(12px, 2vw, 24px);
}

.header-content {
  width: 100%;
  max-width: var(--main-max-width);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  text-decoration: none;
  color: inherit;
  justify-self: start;
}

.logo-img {
  height: clamp(32px, 4.5vw, 48px);
  width: auto;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slogan {
  font-size: clamp(10px, 1vw, 13px);
  color: var(--color-text-light);
  font-weight: 600;
  display: block;
}

/* ===== 메인 콘텐츠 (레벨 2) ===== */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.landing-view,
.results-view {
  width: 100%;
  max-width: var(--main-max-width);
  margin: 0 auto;
}

.landing-view {
  display: block;
  padding: clamp(20px, 5vh, 60px) clamp(12px, 3vw, 24px);
  text-align: center;
}

.results-view {
  display: none;
  padding: clamp(12px, 3vh, 32px) clamp(12px, 3vw, 24px);
}

/* ===== 상태 관리: 검색 모드 (레벨 3) ===== */
body.search-mode .welcome-section,
body.search-mode .trending-section {
  display: none !important;
}

body.search-mode .landing-view {
  padding: 16px;
  padding-bottom: 0;
}

body.search-mode .results-view {
  display: block !important;
}

/* ===== 랜딩 페이지 콘텐츠 (레벨 4) ===== */
.shopping-identity-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  margin: 0;
  padding: 0.35rem 0.85rem;
  appearance: none;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid #dc2626;
  border-radius: 999rem;
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 0.35rem 0.75rem rgba(239, 68, 68, 0.18);
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.rounded-headline {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #334155;
  margin: clamp(2rem, 6vh, 3.5rem) 0 clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.2;
}

.point-text {
  color: var(--color-primary);
}

.search-wrap {
  width: min(90%, clamp(320px, 50vw, 900px));
  margin: 0 auto;
  position: relative;
}

.search-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2.5vw, 24px);
  border: 2px solid var(--color-border);
  border-radius: clamp(16px, 3vw, 28px);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.search-box:focus-within {
  border-color: var(--composer-focus-border);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.document-ai-composer:focus-within,
.instant-answer-composer:focus-within,
.web-search-form:focus-within,
.loveme-composer:focus-within,
.home-meal-composer:focus-within {
  border-color: var(--composer-focus-border);
  box-shadow: var(--composer-focus-shadow);
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
}

.msg-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  max-height: 160px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  resize: none;
  font-family: inherit;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.img-btn,
.send-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  position: relative;
}

.img-btn:hover {
  color: var(--color-primary);
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
}

.img-btn {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.send-btn:hover {
  color: #fff;
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.send-btn {
  background: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  padding: 8px;
}

.icon-btn.search-help-btn {
  width: clamp(32px, 4vw, 36px);
  height: clamp(32px, 4vw, 36px);
  border-radius: 999px;
  color: var(--color-text-light);
  background: transparent;
  border: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 800;
}

.icon-btn.search-help-btn:hover {
  color: var(--color-primary);
  background: transparent;
}

.search-help-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 32px);
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(8px);
  z-index: var(--z-modal);
}

.search-help-overlay[hidden] {
  display: none;
}

.search-help-dialog {
  width: min(92vw, 42rem);
  max-height: min(84vh, 48rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: clamp(18px, 3vw, 28px);
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.search-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(18px, 4vw, 28px) clamp(18px, 4vw, 32px);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
}

.search-help-title {
  margin: 0;
  color: #1e293b;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.search-help-body {
  overflow-y: auto;
  padding: clamp(16px, 3vw, 28px) clamp(18px, 4vw, 32px);
}

.search-help-section {
  padding: clamp(12px, 2.4vw, 18px) 0;
  border-bottom: 1px solid #f1f5f9;
}

.search-help-section:first-child {
  padding-top: 0;
}

.search-help-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.search-help-section h4 {
  margin: 0 0 clamp(6px, 1.5vw, 10px);
  color: #334155;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 800;
}

.search-help-section p {
  margin: 0 0 clamp(10px, 2vw, 14px);
  color: var(--color-text-light);
  font-size: clamp(13px, 1.8vw, 15px);
  line-height: 1.55;
}

.search-help-examples {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.4vw, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-help-example {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(9px, 2vw, 12px) clamp(12px, 2.4vw, 16px);
  border: 1px solid #dbeafe;
  border-radius: clamp(10px, 2vw, 14px);
  background: #f8fafc;
  color: #1e40af;
  font-family: inherit;
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.search-help-example:hover {
  background: #ecfeff;
  border-color: #99f6e4;
  color: #0f766e;
}

.search-help-footer {
  padding: clamp(14px, 3vw, 22px) clamp(18px, 4vw, 32px);
  border-top: 1px solid var(--color-border);
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
}

.search-help-close {
  border: 0;
  border-radius: 999px;
  padding: clamp(10px, 2vw, 12px) clamp(18px, 4vw, 26px);
  background: linear-gradient(135deg, #2563eb, #0f766e);
  color: #fff;
  font-family: inherit;
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: 800;
  cursor: pointer;
}

.new-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
  letter-spacing: 0.5px;
  animation: pulse-soft 2s infinite;
}

@keyframes pulse-soft {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

.img-preview {
  display: none;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.pv-item {
  position: relative;
  width: 70px;
  height: 70px;
  transition: transform 0.2s ease;
}

.pv-item:hover {
  transform: scale(1.05);
}

.pv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.pv-del {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff5252;
  color: #fff;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.recent-search-box {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: calc(100% + clamp(0rem, 0.6vw, 0.25rem));
  width: 100%;
  margin-top: 0;
  padding: clamp(0.5rem, 1.6vw, 0.75rem);
  border: 1px solid var(--color-border);
  border-radius: clamp(0.625rem, 2vw, 0.875rem);
  background: #fff;
  text-align: left;
  z-index: 40;
}

.recent-search-box.show {
  display: block;
}

.recent-search-list {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vw, 4px);
}

.recent-search-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 8px);
  border: 0;
  background: transparent;
  color: #334155;
  border-radius: clamp(8px, 1.6vw, 10px);
  font-size: clamp(11px, 1.5vw, 13px);
  text-align: left;
  padding: clamp(5px, 1vw, 8px) clamp(8px, 1.5vw, 11px);
  line-height: 1.35;
  cursor: pointer;
}

.recent-search-icon {
  width: clamp(13px, 1.6vw, 15px);
  height: clamp(13px, 1.6vw, 15px);
  color: #94a3b8;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recent-search-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recent-search-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-search-item:hover,
.recent-search-item:focus-visible {
  background: rgba(15, 23, 42, 0.05);
}

.settings-trigger {
  margin-top: 8px;
  width: min(90%, clamp(320px, 50vw, 900px));
  margin: 8px auto 0 auto;
  display: flex;
  justify-content: flex-end;
}

.settings-trigger button,
.settings-trigger .text-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 0;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.settings-trigger button:hover,
.settings-trigger .text-btn:hover {
  color: var(--color-primary);
}

.trending-section {
  margin-top: 32px;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trending-list {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: min(90%, 800px);
}

/* ===== 푸터 (레벨 2) ===== */
.app-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: clamp(16px, 3vw, 40px) clamp(12px, 2vw, 24px);
  text-align: center;
}

.header-container {
  max-width: var(--main-max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/* 검색 모드에서도 헤더 요소 강제 노출 */
.app-header .header-actions {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.ftr-content {
  max-width: var(--main-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
}

.ftr-logo {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-text-dark);
  text-decoration: none;
  letter-spacing: -1px;
}

/* ===== 모달 (레벨 2) ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.modal-content {
  background: #fff;
  border-radius: clamp(16px, 3vw, 32px);
  padding: clamp(16px, 4vw, 40px);
  width: min(94%, 600px);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.close-btn {
  background: var(--color-bg-light);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#msgContainer {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.5vw, 24px);
  width: min(95%, 900px);
  margin: 0 auto;
}

.ai-result {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 16px);
  animation: fadeIn 0.5s ease-out;
}

.ai-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--color-primary);
  font-size: clamp(14px, 1.5vw, 16px);
}

.ai-label .dot {
  background: var(--color-primary);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.ai-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.sort-options {
  display: flex;
  gap: 8px;
}

.sort-btn {
  background: #f1f5f9;
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.2s;
}

.sort-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.page-btn {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
  background: var(--color-bg-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-dark);
}

/* ===== 모바일 반응형 (레벨 5) ===== */
@media (max-width: 640px) {
  :root {
    --header-height: 50px;
    --main-max-width: 100%;
    --mobile-padding: 12px;
  }

  .app-header {
    padding: 0 12px;
  }

  .header-content {
    padding: 0;
  }

  .logo-img {
    height: 32px;
  }

  .slogan {
    font-size: 10px;
    display: block;
  }

  .landing-view {
    padding: 20px 12px;
  }

  .shopping-identity-title {
    font-size: clamp(0.95rem, 4vw, 1.15rem);
  }

  .rounded-headline {
    font-size: clamp(1.45rem, 6vw, 1.6rem);
    margin: clamp(1.5rem, 5vh, 2.25rem) 0 clamp(0.75rem, 3vw, 1rem);
  }

  .search-wrap {
    width: calc(100% - 24px);
    margin: 0 12px;
  }

  .results-view {
    padding: 12px;
  }

  .modal-content {
    padding: 20px;
  }

  .ai-result {
    padding: 12px;
  }

  .general-results-wrap .ai-label-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(6px, 2vw, 10px);
  }

  .general-results-wrap .ai-label-row .ai-label {
    flex: 1 1 clamp(12rem, 65%, 100%);
    min-width: min(100%, 12rem);
    line-height: 1.35;
  }

  .general-results-wrap .ai-label-row .ai-label span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .general-results-wrap .sort-options {
    flex: 0 0 auto;
    justify-content: flex-end;
    max-width: 100%;
    margin-left: auto;
  }

  .general-results-wrap .sort-icon-btn {
    max-width: 100%;
    white-space: nowrap;
  }

  .ftr-content {
    gap: 12px;
  }
}

/* ===== 필터 모달 (레벨 4) ===== */
.filter-modal-content {
  padding: 16px;
  background: #fff;
  font-family: inherit;
}

/* ===== 기존 스타일 유지 (필요한 부분만) ===== */

/* ===== 공통 컴포넌트 (레벨 2) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  font-family: inherit;
  gap: 8px;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-bg-light);
  color: var(--color-text-light);
}

.btn-dark {
  background: var(--color-text-dark);
  color: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.icon-btn:hover {
  color: var(--color-primary);
}

.text-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  transition: color 0.2s;
}

.text-btn:hover {
  color: var(--color-primary);
}

/* ===== 폼 요소 (레벨 2) ===== */
.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-dark);
}

.form-group .sub-label {
  font-size: 11px;
  color: var(--color-text-light);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-input:focus {
  border-color: var(--color-primary);
}

.form-input.sm {
  padding: 9px;
  font-size: 13px;
  border-radius: 8px;
}

.form-select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 12px;
  background: var(--color-bg);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.form-range {
  width: 100%;
  cursor: pointer;
  accent-color: var(--color-primary);
  height: 5px;
}

/* ===== 모달 (레벨 3) ===== */
.modal-box {
  background: #fff;
  border-radius: 24px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.modal-lg {
  max-width: 800px;
}

.modal-header {
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--color-text-dark);
}

.modal-body {
  padding: 32px;
  overflow-y: auto;
}

.action-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.action-row.right {
  justify-content: flex-end;
}

/* ===== 랜딩 뷰 보완 (레벨 4) ===== */
.welcome-section {
  margin-bottom: 20px;
}

.trending-list {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--color-text-light);
  font-size: 14px;
}

/* ===== 필터 패널 (레벨 4) ===== */
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.separator {
  color: var(--color-border);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 8px 0;
}

.check-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text-dark);
  font-weight: 600;
  background: var(--color-bg);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  transition: all 0.2s;
}

.check-btn:hover {
  background: var(--color-bg-light);
}

.filter-footer {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  margin-top: 10px;
}

.slider-group {
  flex: 1;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--color-text-light);
  font-weight: 600;
}

/* 문의게시판 아코디언 */
.inquiry-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

.inquiry-item.is-ad-inquiry {
  border-color: rgba(249, 115, 22, 0.24);
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 65%);
}

.inquiry-item.is-new-inquiry {
  border-color: rgba(37, 99, 235, 0.35);
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 70%);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12), 0 12px 28px rgba(37, 99, 235, 0.08);
  animation: thisoneNewInquiryPulse 1.8s ease-out 1;
}

@keyframes thisoneNewInquiryPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.28), 0 14px 34px rgba(37, 99, 235, 0.12);
  }

  100% {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12), 0 12px 28px rgba(37, 99, 235, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inquiry-item.is-new-inquiry {
    animation: none;
  }
}

.inq-header {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.inq-header:hover {
  background: var(--color-bg-light);
}

.inq-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inq-badge {
  width: 28px;
  height: 28px;
  background: #eff6ff;
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
}

.inq-info {
  display: flex;
  flex-direction: column;
}

.inq-title {
  font-weight: 700;
  color: var(--color-text-dark);
  font-size: 14px;
}


.inq-badge-ad {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  vertical-align: middle;
}

.inq-meta {
  font-size: 11px;
  color: var(--color-text-light);
  margin-top: 2px;
}

.inq-content-area {
  display: none;
  padding: 20px;
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
}

.inq-content-area.show {
  display: block !important;
}

.inq-body {
  text-align: left;
  white-space: normal;
  font-size: clamp(13px, 2.4vw, 14px);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: var(--color-text, #334155);
  margin-bottom: 16px;
}

.inq-body-paragraph {
  margin: 0 0 10px;
}

.inq-body-paragraph:last-child {
  margin-bottom: 0;
}

/* ===== AI 검색 결과 (추가) ===== */
/* 중복 규칙 제거됨: #msgContainer 및 .ai-result는 상단 레벨 4 섹션에서 정의됨 */


.pick-list {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 16px);
  width: 100%;
}

.pick-row-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.pick-row {
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(10px, 1.5vw, 16px);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: all 0.2s;
  align-items: stretch;
}

.pick-row:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.row-thumb {
  flex-shrink: 0;
  width: clamp(80px, 15vw, 120px);
  height: clamp(80px, 15vw, 120px);
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
}

.row-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
}

.row-header {
  width: 100%;
}

.row-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.row-title {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 800;
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.3;
}

.row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.row-badge-item {
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.row-positive-signal-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(2px, 0.5vw, 4px);
  padding: clamp(2px, 0.5vw, 3px) clamp(6px, 1vw, 8px);
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: clamp(10px, 1vw, 11px);
  font-weight: 700;
  line-height: 1.35;
}

.row-review-signal-badge,
.badge-review-signal {
  display: inline-flex;
  align-items: center;
  gap: clamp(2px, 0.5vw, 4px);
  padding: clamp(2px, 0.5vw, 3px) clamp(6px, 1vw, 8px);
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  white-space: nowrap;
  line-height: 1.35;
}

.row-label-badge { background: #eff6ff; color: #2563eb; }
.badge-value { background: #f0fdf4; color: #16a34a; border: 1px solid #dcfce7; }
.badge-trust { background: #fff7ed; color: #ea580c; border: 1px solid #ffedd5; }
.badge-thisone { background: #fef2f2; color: #dc2626; border: 1px solid #fee2e2; }
.badge-default { background: #f1f5f9; color: #64748b; }

.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: clamp(11px, 1vw, 12px);
  color: var(--color-text-light);
}

.row-store-name { font-weight: 700; color: #475569; }

.row-price-area {
  flex-shrink: 0;
  width: clamp(100px, 17vw, 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(6px, 1vw, 10px);
  text-align: right;
}

.row-price {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 900;
  color: #ef4444;
  letter-spacing: -0.5px;
}

.row-price-rental {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(5px, 0.9vw, 8px);
}

.row-price-main {
  display: block;
}

.row-price-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(1px, 0.4vw, 3px);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  color: #64748b;
  letter-spacing: -0.02em;
  line-height: 1.32;
}

.row-contract-line {
  display: block;
  max-width: min(100%, 12em);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.row-cta {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--color-primary);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}


.result-inquiry-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(12px, 2.4vw, 20px);
}

.result-inquiry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 18rem);
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: var(--color-primary);
  border-radius: 999px;
  padding: clamp(10px, 2vw, 14px) clamp(14px, 3vw, 22px);
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}

.result-inquiry-btn:hover {
  border-color: var(--color-primary);
  background: #dbeafe;
}


.status-line {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 12px);
  position: relative;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: clamp(8px, 1.2vw, 12px) clamp(12px, 1.8vw, 16px);
  color: #334155;
  font-size: clamp(12px, 1.1vw, 14px);
}

.thinking-icon {
  color: var(--color-primary);
  font-weight: 800;
  flex-shrink: 0;
  animation: thinkingPulse 1.4s ease-in-out infinite;
}

.status-text {
  flex: 1;
  min-width: 0;
}

.status-line::after {
  content: "";
  position: absolute;
  left: -38%;
  bottom: 0;
  width: 38%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0), rgba(59, 130, 246, 0.85), rgba(59, 130, 246, 0));
  animation: thinkingProgressFlow 1.6s ease-in-out infinite;
}

.fallback-inline-btn {
  border: 1px solid rgba(59, 130, 246, 0.4);
  background: #fff;
  color: var(--color-primary);
  border-radius: 999px;
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 700;
  padding: clamp(4px, 0.9vw, 8px) clamp(8px, 1.2vw, 12px);
  white-space: nowrap;
  cursor: pointer;
}

.fold-box {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 10px 14px;
}

.fold-box > summary {
  cursor: pointer;
  font-size: clamp(12px, 1.1vw, 13px);
  font-weight: 800;
  color: #64748b;
}

.fold-content {
  margin-top: 10px;
  font-size: clamp(12px, 1.05vw, 13px);
  color: #475569;
  line-height: 1.5;
}

/* 제외 상품 리스트 */
.reject-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 16px 20px;
  margin-top: 16px;
  border: 1px solid #f1f5f9;
}

.reject-title {
  font-weight: 800;
  color: #64748b;
  font-size: 13px;
  margin-bottom: 12px;
}

.reject-item {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #94a3b8;
}

/* 반응형 (모바일) - clamp 사용으로 대부분의 하드코딩 제거 */
@media (max-width: 640px) {
  body.search-mode .landing-view {
    width: 100%;
    position: sticky;
    top: var(--header-height);
    z-index: 10;
    background: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .search-wrap {
    width: 95% !important; /* 모바일에서 가로폭 확보 */
    margin: 0 auto;
  }

  .row-title {
    white-space: normal; /* 모바일에서 제품명 줄바꿈 허용 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes thinkingPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes thinkingProgressFlow {
  0% { left: -38%; }
  100% { left: 100%; }
}



/* Legacy progress UI hard-disable */
.live-response,
#liveResponse,
.typing,
.typing-text,
.thinking,
.thinking-card,
.progress-text {
  display: none !important;
}

/* ===== Error states ===== */
.error-state {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 12px);
  color: #475569;
  background: #f8fafc;
  border: 1px solid #dbeafe;
  border-radius: clamp(12px, 2vw, 18px);
  padding: clamp(12px, 2.5vw, 20px);
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.45;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.06);
}

.result-error-state {
  width: 100%;
}

.error-state-center {
  min-height: clamp(140px, 24vw, 240px);
  justify-content: center;
  text-align: center;
}

.error-state-inline {
  justify-content: flex-start;
}

.search-error-state {
  width: min(95%, 900px);
  margin: clamp(8px, 1.8vw, 14px) auto 0;
}

.error-state-icon {
  width: clamp(22px, 4vw, 30px);
  height: clamp(22px, 4vw, 30px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: #2563eb;
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 800;
}

.error-state-message {
  font-weight: 700;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.error-state-aiDelay {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.error-state-apiFail,
.error-state-noResults {
  background: #f8fafc;
}

.error-state-imageFail {
  background: #f0f9ff;
  border-color: #bae6fd;
}

.notice-stack {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 4vw, 32px);
  transform: translateX(-50%);
  width: min(92%, 520px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vw, 12px);
  z-index: var(--z-toast, 9999);
  pointer-events: none;
}

.notice-toast {
  width: 100%;
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 18px);
  border-radius: clamp(10px, 2vw, 14px);
  color: #334155;
  background: #fff;
  border: 1px solid #dbeafe;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 700;
}

.notice-success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.notice-warning { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }

@media (max-width: 640px) {
  .error-state {
    align-items: flex-start;
  }

  .error-state-center {
    min-height: clamp(120px, 42vw, 180px);
  }
}

/* ===== 병렬 검색 분석 진행 영역 ===== */
.analysis-progress-wrap {
  order: 0;
}

.analysis-progress-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 16px);
  width: 100%;
  padding: clamp(12px, 2.4vw, 20px);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: clamp(16px, 3vw, 24px);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(248, 250, 252, 0.96));
}

.analysis-progress-title {
  color: var(--color-primary);
}


.piki-analysis-loader {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 8px);
  width: 100%;
  overflow: hidden;
}

.piki-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(clamp(92px, 18vw, 148px), clamp(108px, 20vw, 172px)) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  min-width: 0;
  padding: clamp(10px, 2vw, 16px);
  border: 1px solid rgba(147, 197, 253, 0.42);
  border-radius: clamp(14px, 2.5vw, 22px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(239, 246, 255, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.piki-source-stack,
.piki-signal-board {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: clamp(6px, 1.4vw, 10px);
  min-width: 0;
}

.piki-source-stack {
  justify-content: flex-end;
}

.piki-signal-board {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.piki-source-card,
.piki-signal-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.08);
}

.piki-source-card {
  border: 1px solid rgba(191, 219, 254, 0.88);
  background: rgba(255, 255, 255, 0.9);
  color: #475569;
  padding: clamp(6px, 1.3vw, 9px) clamp(8px, 1.7vw, 12px);
  font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 800;
  transform-origin: 100% 50%;
  animation: pikiCardInspect 3.6s ease-in-out infinite;
  animation-delay: calc(var(--piki-card-index, 0) * 0.16s);
}

.piki-source-card-toss {
  animation-name: pikiCardInspect, pikiCardTossAway;
  animation-duration: 3.6s, 4.4s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: 0.48s, 1.35s;
}

.piki-signal-chip {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(100%, clamp(116px, 18vw, 172px));
  border: 1px solid rgba(147, 197, 253, 0.7);
  padding: clamp(6px, 1.1vw, 9px) clamp(8px, 1.5vw, 12px);
  font-size: clamp(10px, 1.15vw, 12px);
  font-weight: 900;
  line-height: 1.2;
  white-space: normal;
  animation: pikiSignalSort 2.8s ease-in-out infinite;
}

.piki-signal-main,
.piki-signal-sub {
  display: block;
  min-width: 0;
}

.piki-signal-main {
  font-size: clamp(11px, 1.25vw, 13px);
  letter-spacing: -0.02em;
}

.piki-signal-sub {
  margin-top: clamp(2px, 0.45vw, 4px);
  color: currentColor;
  font-size: clamp(8px, 0.95vw, 10px);
  font-weight: 800;
  line-height: 1.25;
  opacity: 0.72;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.piki-signal-plus {
  background: #ecfdf5;
  color: #047857;
}

.piki-signal-value {
  background: #eff6ff;
  color: #1d4ed8;
  animation-delay: 0.22s;
}

.piki-signal-caution {
  background: #fff7ed;
  color: #c2410c;
  animation-delay: 0.45s;
}

.piki-center-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.8vw, 6px);
  min-width: 0;
  width: 100%;
  justify-self: center;
}

.piki-figure-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, clamp(96px, 18vw, 152px));
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: clamp(18px, 3vw, 28px);
  background: radial-gradient(circle at 50% 38%, rgba(219, 234, 254, 0.96), rgba(239, 246, 255, 0.42) 58%, rgba(255, 255, 255, 0));
  padding: clamp(5px, 1.2vw, 8px);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.piki-figure-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.72);
  outline-offset: clamp(2px, 0.8vw, 4px);
}

.piki-figure-img {
  display: block;
  width: min(100%, clamp(86px, 16vw, 138px));
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(30, 64, 175, 0.16));
  transform-origin: 50% 84%;
  animation: pikiBusyFocus 1.55s ease-in-out infinite;
  will-change: transform;
}

.piki-analysis-loader[data-piki-state="annoyed"] .piki-figure-img,
.piki-figure-btn:hover .piki-figure-img,
.piki-figure-btn:focus-visible .piki-figure-img {
  animation: pikiAnnoyedNod 0.42s ease-in-out 2;
}

.piki-analysis-loader[data-piki-state="throwing"] .piki-figure-img {
  animation: pikiThrowingAlert 0.56s ease-in-out 1;
}

.piki-analysis-loader[data-piki-state="throwing"] .piki-source-card-toss {
  animation: pikiCardTossAway 0.56s ease-in-out 1;
}

.piki-speech {
  position: absolute;
  top: clamp(-4px, -0.6vw, -2px);
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -48%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  border: 1px solid rgba(191, 219, 254, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #2563eb;
  padding: clamp(6px, 1.2vw, 8px) clamp(9px, 1.6vw, 12px);
  font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.piki-analysis-loader[data-piki-state="annoyed"] .piki-speech,
.piki-figure-btn:hover .piki-speech,
.piki-figure-btn:focus-visible .piki-speech {
  opacity: 1;
  transform: translate(-50%, -62%) scale(1);
}

.piki-analysis-loader[data-piki-state="annoyed"] .piki-speech::before,
.piki-figure-btn:hover .piki-speech::before,
.piki-figure-btn:focus-visible .piki-speech::before {
  content: "지금 분석중!";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: inherit;
}

.piki-sweat {
  position: absolute;
  z-index: 1;
  width: clamp(5px, 1vw, 8px);
  height: clamp(8px, 1.5vw, 12px);
  border-radius: 999px 999px 999px 0;
  background: rgba(96, 165, 250, 0.84);
  opacity: 0;
  transform: rotate(-18deg);
  animation: pikiSweatDrop 1.7s ease-in-out infinite;
}

.piki-sweat-a {
  top: 24%;
  right: 16%;
}

.piki-sweat-b {
  top: 34%;
  right: 7%;
  animation-delay: 0.62s;
}

.piki-message-rail {
  position: relative;
  width: min(100%, clamp(112px, 19vw, 184px));
  min-height: clamp(34px, 5vw, 42px);
  overflow: hidden;
  color: #334155;
  font-size: clamp(11px, 1.35vw, 13px);
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.piki-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(38%);
  animation: pikiMessageCycle 12.5s ease-in-out infinite;
  animation-delay: calc(var(--piki-message-index, 0) * 2.5s);
}

@keyframes pikiBusyFocus {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  45% { transform: translateY(clamp(-4px, -0.8vw, -2px)) rotate(1.5deg) scale(1.015); }
  70% { transform: translateY(0) rotate(-0.5deg) scale(0.995); }
}

@keyframes pikiAnnoyedNod {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1.02); }
  28% { transform: translateX(clamp(-3px, -0.7vw, -2px)) rotate(-2deg) scale(1.035); }
  58% { transform: translateX(clamp(2px, 0.6vw, 3px)) rotate(2deg) scale(1.02); }
}

@keyframes pikiThrowingAlert {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  45% { transform: translateY(clamp(-8px, -1.8vw, -4px)) rotate(-6deg) scale(1.04); }
}

@keyframes pikiSweatDrop {
  0%, 34% { opacity: 0; transform: translateY(0) rotate(-18deg) scale(0.84); }
  48% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(clamp(14px, 2.4vw, 22px)) rotate(-18deg) scale(0.5); }
}

@keyframes pikiCardInspect {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.72; }
  28% { transform: translate(clamp(3px, 0.8vw, 6px), clamp(-3px, -0.7vw, -2px)) scale(1.02); opacity: 1; }
  56% { transform: translate(clamp(8px, 1.4vw, 12px), 0) scale(0.985); opacity: 0.9; }
  78% { transform: translate(clamp(2px, 0.5vw, 4px), clamp(2px, 0.5vw, 4px)) scale(1); opacity: 0.86; }
}

@keyframes pikiCardTossAway {
  0%, 58%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.78; }
  70% { transform: translate(clamp(10px, 1.8vw, 16px), clamp(-5px, -1vw, -3px)) rotate(2deg) scale(1.02); opacity: 1; }
  84% { transform: translate(clamp(28px, 4.5vw, 44px), clamp(8px, 1.6vw, 14px)) rotate(10deg) scale(0.9); opacity: 0.26; }
}

@keyframes pikiSignalSort {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 18px rgba(59, 130, 246, 0.08); }
  50% { transform: translateY(clamp(-3px, -0.7vw, -2px)); box-shadow: 0 12px 24px rgba(59, 130, 246, 0.12); }
}

@keyframes pikiMessageCycle {
  0%, 15% { opacity: 0; transform: translateY(38%); }
  20%, 34% { opacity: 1; transform: translateY(0); }
  39%, 100% { opacity: 0; transform: translateY(-38%); }
}

@media (max-width: 640px) {
  .piki-workbench {
    grid-template-columns: minmax(0, 0.78fr) minmax(clamp(76px, 24vw, 98px), clamp(84px, 26vw, 108px)) minmax(0, 0.78fr);
    gap: clamp(5px, 1.8vw, 8px);
    padding: clamp(8px, 2.6vw, 12px);
  }

  .piki-source-stack,
  .piki-signal-board {
    gap: clamp(4px, 1.5vw, 6px);
  }

  .piki-source-card,
  .piki-signal-chip {
    padding: clamp(5px, 1.7vw, 7px) clamp(6px, 2vw, 8px);
    font-size: clamp(10px, 2.7vw, 11px);
  }

  .piki-signal-chip {
    width: 100%;
  }

  .piki-signal-main {
    font-size: clamp(10px, 2.8vw, 11px);
  }

  .piki-signal-sub {
    font-size: clamp(8px, 2.2vw, 9px);
    line-height: 1.2;
  }

  .piki-source-card:nth-child(n + 6) {
    display: none;
  }

  .piki-figure-btn {
    width: min(100%, clamp(78px, 25vw, 104px));
    padding: clamp(3px, 1vw, 5px);
  }

  .piki-figure-img {
    width: min(100%, clamp(70px, 23vw, 94px));
  }

  .piki-speech {
    top: clamp(-2px, -0.4vw, -1px);
    font-size: clamp(10px, 2.7vw, 11px);
    padding: clamp(5px, 1.5vw, 6px) clamp(7px, 2vw, 9px);
  }

  .piki-center-stage {
    gap: clamp(2px, 0.7vw, 4px);
  }

  .piki-message-rail {
    width: min(100%, clamp(86px, 26vw, 112px));
    min-height: clamp(38px, 10vw, 48px);
    font-size: clamp(10px, 2.7vw, 11px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .piki-source-card,
  .piki-source-card-toss,
  .piki-signal-chip,
  .piki-figure-img,
  .piki-sweat,
  .piki-message {
    animation: none !important;
  }

  .piki-message:first-child {
    opacity: 1;
    transform: none;
  }
}


.analysis-ad-slot {
  position: relative;
  width: min(100%, clamp(20rem, 56.875vw, 45.5rem));
  aspect-ratio: 728 / 90;
  align-self: center;
  overflow: hidden;
  border: 0;
  border-radius: clamp(10px, 2vw, 14px);
  background: transparent;
}

.thisone-ad-link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  text-decoration: none;
  cursor: pointer;
}

.thisone-ad-link:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.75);
  outline-offset: 3px;
}

.analysis-ad-slot:focus-within {
  overflow: visible;
}

.thisone-ad-crossfade {
  position: relative;
  width: 100%;
  height: 100%;
}

.thisone-ad-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 0;
  color: transparent;
}

.thisone-ad-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(10px, 2vw, 14px);
}

.thisone-ad-frame-a {
  opacity: 1;
  animation: thisoneAdFadeA 5s ease-in-out forwards;
}

.thisone-ad-frame-b {
  opacity: 0;
  animation: thisoneAdFadeB 5s ease-in-out forwards;
}

@keyframes thisoneAdFadeA {
  0%, 42% {
    opacity: 1;
  }
  70%, 100% {
    opacity: 0;
  }
}

@keyframes thisoneAdFadeB {
  0%, 42% {
    opacity: 0;
  }
  70%, 100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thisone-ad-frame-a,
  .thisone-ad-frame-b {
    animation: none !important;
  }

  .thisone-ad-frame-a {
    opacity: 1;
  }

  .thisone-ad-frame-b {
    opacity: 0;
  }
}

.analysis-failure-message {
  padding: clamp(10px, 2vw, 14px);
  border-radius: clamp(10px, 2vw, 14px);
  background: #fff7ed;
  color: #9a3412;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
}

@media (max-width: 640px) {
  .analysis-ad-slot {
    width: min(100%, clamp(18rem, 82.051vw, 20rem));
    aspect-ratio: 320 / 100;
  }
}
@media (prefers-color-scheme: dark) {
  .row-positive-signal-badge {
    border-color: rgba(45, 212, 191, 0.38);
    background: rgba(20, 184, 166, 0.14);
    color: #99f6e4;
  }

  .row-review-signal-badge,
  .badge-review-signal {
    border-color: rgba(96, 165, 250, 0.42);
    background: rgba(37, 99, 235, 0.16);
    color: #bfdbfe;
  }
}

/* Document AI UI shell */
.document-ai-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  width: var(--shopping-composer-width);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem) 0;
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(1rem, 3vw, 1.5rem);
  background: #f8fafc;
  box-shadow: 0 clamp(0.5rem, 2vw, 1rem) clamp(1.5rem, 5vw, 2.5rem) rgba(37, 99, 235, 0.08);
}

.document-ai-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.document-ai-main-copy,
.document-ai-sub-copy {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}

.document-ai-main-copy {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 600;
}

.document-ai-sub-copy,
.document-ai-privacy p,
.document-ai-upload-copy,
.document-ai-question-label,
.document-ai-placeholder {
  font-size: clamp(0.88rem, 2vw, 1rem);
}

.document-ai-composer {
  display: flex;
  flex-direction: column;
  gap: var(--shopping-composer-row-gap);
  width: 100%;
  padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  border: 0.09375rem solid #bfdbfe;
  border-radius: var(--shopping-composer-radius);
  background: #ffffff;
  box-shadow: var(--composer-focus-shadow);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.document-ai-composer.is-drag-over {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.14);
  transform: translateY(-0.125rem);
}

.document-ai-composer-top {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 0.7rem);
}

.document-ai-composer-bottom,
.document-ai-composer-left-actions,
.document-ai-composer-right-actions {
  display: flex;
  align-items: center;
  gap: var(--shopping-composer-control-gap);
}

.document-ai-composer-bottom {
  justify-content: space-between;
  width: 100%;
  flex-wrap: nowrap;
}

.document-ai-composer-left-actions,
.document-ai-composer-right-actions {
  min-width: 0;
  flex-wrap: nowrap;
}

.document-ai-composer-left-actions {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.document-ai-composer-right-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.document-ai-upload-title {
  color: #1e3a8a;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  font-weight: 700;
}

.document-ai-upload-copy {
  max-width: min(100%, clamp(18rem, 60vw, 32rem));
  color: #475569;
  line-height: 1.55;
}

.document-ai-upload-action,
.document-ai-help-button,
.document-ai-submit {
  border: 0;
  border-radius: 999rem;
  font-size: clamp(0.88rem, 2vw, 1rem);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.document-ai-upload-action,
.document-ai-help-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--shopping-composer-left-button-size);
  block-size: var(--shopping-composer-left-button-size);
  padding: 0;
  border: 0.0625rem solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  line-height: 1;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.document-ai-help-button {
  background: #ffffff;
  color: #2563eb;
}

.document-ai-upload-action:hover,
.document-ai-upload-action:focus-visible,
.document-ai-help-button:hover,
.document-ai-help-button:focus-visible {
  border-color: #60a5fa;
  background: #dbeafe;
  box-shadow: 0 0 0 clamp(0.12rem, 0.5vw, 0.2rem) rgba(37, 99, 235, 0.12);
  outline: none;
}


.document-ai-help-button,
.instant-answer-help-button,
.web-search-help-button,
.loveme-help-button,
.home-meal-help-button {
  margin-left: auto;
  inline-size: var(--shopping-composer-right-button-size);
  block-size: var(--shopping-composer-right-button-size);
}

.document-ai-privacy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.5rem);
  padding: clamp(0.85rem, 2.5vw, 1.1rem);
  border-radius: clamp(0.8rem, 2vw, 1rem);
  background: #ffffff;
  color: #475569;
  text-align: center;
}

.document-ai-privacy strong,
.document-ai-privacy p {
  max-width: min(100%, clamp(18rem, 72vw, 36rem));
}

.document-ai-privacy strong {
  color: #2563eb;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
}

.document-ai-privacy p {
  margin: 0;
  line-height: 1.6;
}

.document-ai-question-label {
  color: #334155;
  font-weight: 700;
}

.document-ai-question {
  width: 100%;
  min-height: clamp(6.6rem, 18vw, 7.5rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: #1e293b;
  font: inherit;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.55;
  resize: none;
}

.document-ai-question:focus {
  outline: none;
}

.document-ai-submit {
  align-self: flex-end;
  padding: clamp(0.75rem, 2vw, 0.95rem) clamp(1.25rem, 4vw, 1.75rem);
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.document-ai-placeholder {
  margin: 0;
  padding: clamp(0.8rem, 2vw, 1rem);
  border-radius: clamp(0.8rem, 2vw, 1rem);
  background: #e0f2fe;
  color: #0f172a;
  line-height: 1.65;
  white-space: pre-line;
}

.document-ai-help-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vw, 0.75rem);
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
}

.document-ai-help-panel[hidden] {
  display: none;
}

.document-ai-help-title {
  margin: 0;
  color: #1d4ed8;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 800;
}

.document-ai-help-examples {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.45rem, 1.2vw, 0.65rem);
}

.document-ai-help-examples button {
  padding: clamp(0.5rem, 1.4vw, 0.65rem) clamp(0.7rem, 2vw, 0.9rem);
  border: 0.0625rem solid #bfdbfe;
  border-radius: 999rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-family: inherit;
  font-size: clamp(0.82rem, 1.8vw, 0.95rem);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
}

.document-ai-help-examples button:hover,
.document-ai-help-examples button:focus-visible {
  border-color: #60a5fa;
  background: #dbeafe;
  outline: none;
}

@media (max-width: 640px) {
  .document-ai-panel {
    width: 95%;
    padding: clamp(0.9rem, 4vw, 1.15rem) 0;
  }

  .document-ai-composer {
    padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  }

  .document-ai-composer-bottom {
    gap: var(--shopping-composer-control-gap);
  }

  .document-ai-submit {
    align-self: auto;
  }
}

/* Document AI entry toolbar */
.document-ai-entry-wrap {
  display: flex;
  justify-content: flex-start;
  width: min(90%, clamp(20rem, 50vw, 56.25rem));
  margin: clamp(0.75rem, 2vw, 1rem) auto 0;
  padding-bottom: clamp(0.65rem, 1.5vw, 0.9rem);
  border-bottom: 0.0625rem solid #e2e8f0;
}

.document-ai-entry-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1vw, 0.65rem);
  width: auto;
  padding: clamp(0.6rem, 1.5vw, 0.75rem) clamp(0.85rem, 2.5vw, 1.1rem);
  border: 0.0625rem solid #bfdbfe;
  border-radius: clamp(0.65rem, 1vw, 0.75rem);
  background: #eff6ff;
  color: #1e3a8a;
  box-shadow: 0 clamp(0.25rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1rem) rgba(37, 99, 235, 0.08);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.document-ai-entry-chip:hover,
.document-ai-entry-chip:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 clamp(0.35rem, 1.5vw, 0.65rem) clamp(1rem, 3vw, 1.5rem) rgba(37, 99, 235, 0.12);
  transform: translateY(-0.0625rem);
  outline: none;
}

.document-ai-entry-label {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 700;
  white-space: nowrap;
}


body.search-mode .document-ai-entry-wrap {
  display: none !important;
}

@media (max-width: 640px) {
  .document-ai-entry-wrap {
    width: 95%;
    margin-top: clamp(0.55rem, 2vw, 0.75rem);
    padding-bottom: clamp(0.55rem, 2vw, 0.75rem);
    justify-content: center;
    gap: clamp(0.45rem, 2vw, 0.7rem);
  }

  .document-ai-entry-chip {
    flex: 1 1 calc((100% - clamp(0.45rem, 2vw, 0.7rem) * 2) / 3);
    min-inline-size: max(28%, 5.75rem);
    min-block-size: clamp(2.5rem, 11vw, 3rem);
    width: auto;
    padding: clamp(0.55rem, 2.4vw, 0.7rem) clamp(0.72rem, 3vw, 0.95rem);
  }
}

/* Instant Answer UI shell */
.document-ai-entry-wrap {
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
  flex-wrap: wrap;
}

.instant-answer-entry-chip {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.instant-answer-entry-chip:hover,
.instant-answer-entry-chip:focus-visible {
  border-color: #fbbf24;
  box-shadow: 0 clamp(0.35rem, 1.5vw, 0.65rem) clamp(1rem, 3vw, 1.5rem) rgba(245, 158, 11, 0.12);
}

.instant-answer-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  width: var(--shopping-composer-width);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem) 0;
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(1rem, 3vw, 1.5rem);
  background: #f8fafc;
  box-shadow: 0 clamp(0.5rem, 2vw, 1rem) clamp(1.5rem, 5vw, 2.5rem) rgba(37, 99, 235, 0.08);
}

.instant-answer-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.instant-answer-main-copy,
.instant-answer-sub-copy,
.instant-answer-status,
.instant-answer-result {
  margin: 0;
  color: #475569;
  line-height: 1.65;
  font-size: clamp(0.88rem, 2vw, 1rem);
}

.instant-answer-main-copy {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 600;
}

.instant-answer-examples {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.5vw, 0.8rem);
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
}

.instant-answer-examples[hidden] {
  display: none;
}

.instant-answer-examples-title {
  color: #1e293b;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 800;
}

.instant-answer-examples-list,
.instant-answer-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.45rem, 1.5vw, 0.7rem);
}

.instant-answer-composer {
  display: flex;
  flex-direction: column;
  gap: var(--shopping-composer-row-gap);
  width: 100%;
  padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  border: 0.0625rem solid #dbeafe;
  border-radius: var(--shopping-composer-radius);
  background: #ffffff;
  box-shadow: 0 clamp(0.35rem, 1vw, 0.55rem) clamp(1rem, 3vw, 1.4rem) rgba(37, 99, 235, 0.08);
}

.instant-answer-composer-top,
.instant-answer-composer-bottom,
.instant-answer-composer-left-actions,
.instant-answer-composer-actions {
  display: flex;
  align-items: center;
  width: 100%;
}

.instant-answer-composer-top {
  min-width: 0;
}

.instant-answer-composer-bottom {
  justify-content: space-between;
  gap: var(--shopping-composer-control-gap);
  flex-wrap: nowrap;
}

.instant-answer-composer-left-actions,
.instant-answer-composer-actions {
  gap: var(--shopping-composer-control-gap);
  width: auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.instant-answer-composer-left-actions {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.instant-answer-composer-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.instant-answer-plus-wrap {
  position: relative;
  flex: 0 0 auto;
}

.instant-answer-plus-button,
.instant-answer-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--shopping-composer-left-button-size);
  block-size: var(--shopping-composer-left-button-size);
  padding: 0;
  border: 0;
  border-radius: 999rem;
  background: #f1f5f9;
  color: #64748b;
  font-family: inherit;
  font-size: clamp(1.45rem, 4vw, 1.8rem);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.instant-answer-help-button {
  border: 0.0625rem solid #bfdbfe;
  background: #ffffff;
  color: #2563eb;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  font-weight: 900;
}

.instant-answer-plus-button:hover,
.instant-answer-plus-button:focus-visible,
.instant-answer-plus-button[aria-expanded="true"],
.instant-answer-help-button:hover,
.instant-answer-help-button:focus-visible,
.instant-answer-help-button[aria-expanded="true"] {
  border-color: #60a5fa;
  background: #eff6ff;
  color: #2563eb;
  outline: none;
}

.instant-answer-example-chip,
.instant-answer-search-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.45rem, 1.5vw, 0.6rem) clamp(0.7rem, 2vw, 0.9rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: 999rem;
  background: #ffffff;
  color: #1e3a8a;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  font-weight: 700;
  cursor: pointer;
}

.instant-answer-example-chip:hover,
.instant-answer-example-chip:focus-visible,
.instant-answer-search-chip:hover,
.instant-answer-search-chip:focus-visible {
  border-color: #60a5fa;
  background: #eff6ff;
  outline: none;
}

.instant-answer-question-label {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.instant-answer-submit {
  flex: 0 0 auto;
  padding: clamp(0.7rem, 2vw, 0.85rem) clamp(1rem, 3vw, 1.35rem);
  border: 0;
  border-radius: 999rem;
  background: #2563eb;
  color: #ffffff;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.instant-answer-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.instant-answer-status.is-loading,
.document-ai-placeholder.is-loading,
.loveme-status.is-loading {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1.5vw, 0.65rem);
  padding: clamp(0.65rem, 1.8vw, 0.85rem) clamp(0.75rem, 2vw, 1rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
  color: #334155;
}

.instant-answer-status-signal,
.ai-tool-source-loading-signal {
  flex: 0 0 auto;
  inline-size: clamp(0.55rem, 1.6vw, 0.7rem);
  block-size: clamp(0.55rem, 1.6vw, 0.7rem);
  border-radius: 999rem;
  background: #2563eb;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.24);
  animation: instant-answer-source-pulse 1.6s ease-in-out infinite;
}

@keyframes instant-answer-source-pulse {
  0%,
  100% {
    opacity: 0.55;
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.2);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 0 clamp(0.2rem, 0.8vw, 0.35rem) rgba(37, 99, 235, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .instant-answer-status-signal,
  .ai-tool-source-loading-signal {
    animation: none;
  }
}

.instant-answer-result {
  padding: clamp(0.9rem, 2vw, 1.1rem);
  border: 0.0625rem solid #e2e8f0;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
  color: #1e293b;
}

.instant-answer-search-chip {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

@media (max-width: 640px) {
  .instant-answer-panel {
    width: 95%;
    padding: clamp(0.9rem, 4vw, 1.15rem) 0;
  }

  .instant-answer-composer {
    gap: var(--shopping-composer-row-gap);
    padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  }

  .instant-answer-composer-bottom,
  .instant-answer-composer-actions {
    gap: var(--shopping-composer-control-gap);
  }

  .instant-answer-submit {
    flex: 0 0 auto;
    width: auto;
    padding-right: clamp(0.75rem, 3vw, 1rem);
    padding-left: clamp(0.75rem, 3vw, 1rem);
  }

  .instant-answer-panel .ai-tool-mic-button,
  .instant-answer-panel .instant-answer-plus-button,
  .instant-answer-panel .instant-answer-help-button,
  .document-ai-panel .ai-tool-mic-button {
    flex: 0 0 auto;
  }
}

/* AI tool mode keeps 해석/즉답 panels separate from the shopping search UI. */
body.ai-tool-mode .landing-view {
  display: none !important;
}

body.ai-tool-mode .results-view {
  display: block !important;
  padding: clamp(1rem, 4vh, 2.5rem) clamp(0.75rem, 3vw, 1.5rem);
}

body.ai-tool-mode #msgContainer {
  width: 100%;
}

.ai-mode-tabs {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 0.45rem);
  width: 100%;
  padding: clamp(0.25rem, 1vw, 0.35rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: 999rem;
  background: #ffffff;
  box-shadow: inset 0 0 0 0.0625rem rgba(219, 234, 254, 0.45);
}

.ai-mode-tab {
  flex: 1 1 0;
  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.45rem, 1.5vw, 0.6rem) clamp(0.45rem, 1.8vw, 0.8rem);
  border: 0.0625rem solid transparent;
  border-radius: 999rem;
  background: transparent;
  color: #64748b;
  font-family: inherit;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.ai-mode-tab:hover,
.ai-mode-tab:focus-visible {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.ai-mode-tab[aria-current="page"] {
  border-color: #60a5fa;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 clamp(0.25rem, 1vw, 0.45rem) clamp(0.65rem, 2vw, 0.95rem) rgba(37, 99, 235, 0.18);
  cursor: default;
}

.ai-mode-tab[aria-current="page"]:hover,
.ai-mode-tab[aria-current="page"]:focus-visible {
  background: #2563eb;
  color: #ffffff;
}


.ai-tool-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--shopping-composer-control-gap);
  width: 100%;
  flex-wrap: nowrap;
}

.ai-tool-mic-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--shopping-composer-right-button-size);
  block-size: var(--shopping-composer-right-button-size);
  padding: 0;
  border: 0.0625rem solid #bfdbfe;
  border-radius: 999rem;
  background: #ffffff;
  color: #1d4ed8;
  font-family: inherit;
  font-size: clamp(0.88rem, 2vw, 1rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ai-tool-mic-icon {
  flex: 0 0 auto;
  inline-size: clamp(1.125rem, 3vw, 1.25rem);
  block-size: clamp(1.125rem, 3vw, 1.25rem);
  color: currentColor;
}

.ai-tool-mic-button:hover,
.ai-tool-mic-button:focus-visible {
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: 0 0 0 clamp(0.12rem, 0.5vw, 0.2rem) rgba(37, 99, 235, 0.12);
  outline: none;
}

.ai-tool-mic-button.is-listening {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1e40af;
  box-shadow: 0 0 0 clamp(0.14rem, 0.6vw, 0.24rem) rgba(37, 99, 235, 0.16);
  transform: translateY(clamp(-0.08rem, -0.2vw, -0.04rem));
}

.ai-tool-mic-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ai-tool-voice-status {
  margin: calc(clamp(0.75rem, 2vw, 1rem) * -0.45) 0 0;
  color: #1d4ed8;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  font-weight: 700;
  line-height: 1.55;
}

/* General web search tool MVP */
.web-search-entry-chip {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #075985;
}

.web-search-entry-chip:hover,
.web-search-entry-chip:focus-visible {
  border-color: #38bdf8;
  box-shadow: 0 clamp(0.35rem, 1.5vw, 0.65rem) clamp(1rem, 3vw, 1.5rem) rgba(14, 165, 233, 0.12);
}

.web-search-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  width: var(--shopping-composer-width);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem) 0;
  border: 0.0625rem solid #bae6fd;
  border-radius: clamp(1rem, 3vw, 1.5rem);
  background: #f8fafc;
  box-shadow: 0 clamp(0.5rem, 2vw, 1rem) clamp(1.5rem, 5vw, 2.5rem) rgba(14, 165, 233, 0.08);
}

.web-search-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.web-search-main-copy,
.web-search-sub-copy,
.web-search-label,
.web-search-status,
.web-search-empty,
.web-search-result-snippet,
.web-search-result-source {
  margin: 0;
  color: #475569;
  line-height: 1.65;
  font-size: clamp(0.88rem, 2vw, 1rem);
}

.web-search-main-copy {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 600;
}

.web-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--shopping-composer-row-gap);
  width: 100%;
  padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  border: 0.0625rem solid #dbeafe;
  border-radius: var(--shopping-composer-radius);
  background: #ffffff;
  box-shadow: 0 clamp(0.35rem, 1vw, 0.55rem) clamp(1rem, 3vw, 1.4rem) rgba(37, 99, 235, 0.08);
}

.web-search-composer-top,
.web-search-composer-bottom,
.web-search-composer-left-actions,
.web-search-composer-actions {
  display: flex;
  align-items: center;
  width: 100%;
}

.web-search-composer-top {
  min-width: 0;
}

.web-search-composer-bottom {
  justify-content: space-between;
  gap: var(--shopping-composer-control-gap);
  flex-wrap: nowrap;
}

.web-search-composer-left-actions,
.web-search-composer-actions {
  gap: var(--shopping-composer-control-gap);
  width: auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.web-search-composer-left-actions {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.web-search-composer-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.web-search-label {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.web-search-input {
  flex: 1;
  min-width: 0;
  padding: clamp(0.7rem, 2vw, 0.9rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1e293b;
  font-family: inherit;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
}

.web-search-input:focus {
  outline: none;
}

.web-search-plus-wrap {
  position: relative;
  flex: 0 0 auto;
}

.web-search-plus-button,
.web-search-help-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--shopping-composer-left-button-size);
  block-size: var(--shopping-composer-left-button-size);
  padding: 0;
  border: 0;
  border-radius: 999rem;
  background: #f1f5f9;
  color: #64748b;
  font-family: inherit;
  font-size: clamp(1.45rem, 4vw, 1.8rem);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.web-search-plus-button:hover,
.web-search-plus-button:focus-visible,
.web-search-help-button:hover,
.web-search-help-button:focus-visible,
.web-search-help-button[aria-expanded="true"] {
  background: #e0f2fe;
  color: #0369a1;
  outline: none;
}

.web-search-help-button {
  border: 0.0625rem solid #bfdbfe;
  background: #ffffff;
  color: #2563eb;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  font-weight: 800;
}

.web-search-plus-button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

/* Keep help controls with the right-side mic/action group while preserving the left + edge. */
.document-ai-help-button,
.instant-answer-help-button,
.web-search-help-button,
.loveme-help-button,
.home-meal-help-button {
  margin-left: auto;
  inline-size: var(--shopping-composer-right-button-size);
  block-size: var(--shopping-composer-right-button-size);
}

.web-search-help-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vw, 0.75rem);
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
}

.web-search-help-panel[hidden] {
  display: none;
}

.web-search-help-title {
  margin: 0;
  color: #0369a1;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 800;
}

.web-search-help-examples {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.45rem, 1.2vw, 0.65rem);
}

.web-search-help-examples button {
  padding: clamp(0.5rem, 1.4vw, 0.65rem) clamp(0.7rem, 2vw, 0.9rem);
  border: 0.0625rem solid #bae6fd;
  border-radius: 999rem;
  background: #f0f9ff;
  color: #075985;
  font-family: inherit;
  font-size: clamp(0.82rem, 1.8vw, 0.95rem);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
}

.web-search-help-examples button:hover,
.web-search-help-examples button:focus-visible {
  border-color: #38bdf8;
  background: #e0f2fe;
  color: #0369a1;
  outline: none;
}

.web-search-submit {
  flex: 0 0 auto;
  padding: clamp(0.7rem, 2vw, 0.85rem) clamp(1rem, 3vw, 1.35rem);
  border: 0;
  border-radius: 999rem;
  background: #0284c7;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 800;
  cursor: pointer;
}

.web-search-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.web-search-results {
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 2vw, 0.9rem);
}

.web-search-result-row {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 1vw, 0.4rem);
  padding: clamp(0.9rem, 2vw, 1.1rem);
  border: 0.0625rem solid #e2e8f0;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
}

.web-search-result-title {
  color: #075985;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  font-weight: 800;
  line-height: 1.45;
  text-decoration: none;
}

.web-search-result-title:hover,
.web-search-result-title:focus-visible {
  color: #0369a1;
  text-decoration: underline;
  outline: none;
}

.web-search-result-source {
  color: #64748b;
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .ai-mode-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.28rem, 1.4vw, 0.45rem);
    padding: clamp(0.28rem, 1.4vw, 0.4rem);
    border-radius: clamp(1rem, 4vw, 1.35rem);
  }

  .ai-mode-tab {
    flex: 1 1 calc((100% - clamp(0.28rem, 1.4vw, 0.45rem) * 2) / 3);
    min-inline-size: max(28%, 5.25rem);
    min-block-size: clamp(2.35rem, 10vw, 2.85rem);
    padding: clamp(0.55rem, 2.3vw, 0.7rem) clamp(0.5rem, 2.4vw, 0.7rem);
    font-size: clamp(0.86rem, 3.5vw, 0.95rem);
  }

  .web-search-panel {
    width: 95%;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 0 clamp(0.9rem, 4vw, 1.15rem);
  }

  .web-search-form {
    gap: var(--shopping-composer-row-gap);
    padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  }

  .web-search-composer-bottom {
    gap: var(--shopping-composer-control-gap);
  }

  .web-search-composer-actions {
    gap: var(--shopping-composer-control-gap);
  }

  .web-search-submit {
    padding-right: clamp(0.75rem, 3vw, 1rem);
    padding-left: clamp(0.75rem, 3vw, 1rem);
  }

  .web-search-form .ai-tool-mic-button,
  .web-search-help-button,
  .loveme-help-button,
  .home-meal-help-button,
  .loveme-panel .ai-tool-mic-button,
  .home-meal-panel .ai-tool-mic-button,
  .document-ai-help-button,
  .instant-answer-help-button {
    inline-size: var(--shopping-composer-right-button-size);
    block-size: var(--shopping-composer-right-button-size);
  }

  .web-search-plus-button,
  .loveme-plus-button,
  .home-meal-plus-button,
  .document-ai-upload-action,
  .instant-answer-plus-button {
    inline-size: var(--shopping-composer-left-button-size);
    block-size: var(--shopping-composer-left-button-size);
  }
}

/* Match AI tool utility icons to the main shopping search composer's clean inline controls. */
.document-ai-upload-action,
.document-ai-help-button,
.instant-answer-plus-button,
.instant-answer-help-button,
.web-search-plus-button,
.web-search-help-button,
.loveme-plus-button,
.home-meal-plus-button,
.loveme-help-button,
.home-meal-help-button,
.loveme-panel .ai-tool-mic-button,
.home-meal-panel .ai-tool-mic-button,
.document-ai-panel .ai-tool-mic-button,
.instant-answer-panel .ai-tool-mic-button,
.web-search-form .ai-tool-mic-button {
  border: 0;
  border-radius: clamp(0.5rem, 1.5vw, 0.875rem);
  background: transparent;
  color: var(--color-text-light);
  box-shadow: none;
  transition: color 160ms ease, transform 160ms ease;
}

.document-ai-upload-action,
.instant-answer-plus-button,
.web-search-plus-button,
.loveme-plus-button,
.home-meal-plus-button {
  color: var(--color-primary);
  font-size: clamp(1.75rem, 4.8vw, 2.1rem);
  font-weight: 900;
}

.document-ai-help-button,
.instant-answer-help-button,
.web-search-help-button,
.loveme-help-button,
.home-meal-help-button {
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 800;
}

.document-ai-upload-action:hover,
.document-ai-upload-action:focus-visible,
.document-ai-help-button:hover,
.document-ai-help-button:focus-visible,
.document-ai-help-button[aria-expanded="true"],
.instant-answer-plus-button:hover,
.instant-answer-plus-button:focus-visible,
.instant-answer-plus-button[aria-expanded="true"],
.instant-answer-help-button:hover,
.instant-answer-help-button:focus-visible,
.instant-answer-help-button[aria-expanded="true"],
.web-search-plus-button:hover,
.web-search-plus-button:focus-visible,
.web-search-plus-button[aria-expanded="true"],
.web-search-help-button:hover,
.web-search-help-button:focus-visible,
.web-search-help-button[aria-expanded="true"],
.loveme-plus-button:hover,
.loveme-plus-button:focus-visible,
.loveme-plus-button[aria-expanded="true"],
.loveme-help-button:hover,
.loveme-help-button:focus-visible,
.loveme-help-button[aria-expanded="true"],
.loveme-panel .ai-tool-mic-button:hover,
.loveme-panel .ai-tool-mic-button:focus-visible,
.document-ai-panel .ai-tool-mic-button:hover,
.document-ai-panel .ai-tool-mic-button:focus-visible,
.instant-answer-panel .ai-tool-mic-button:hover,
.instant-answer-panel .ai-tool-mic-button:focus-visible,
.home-meal-panel .ai-tool-mic-button:hover,
.home-meal-panel .ai-tool-mic-button:focus-visible,
.web-search-form .ai-tool-mic-button:hover,
.web-search-form .ai-tool-mic-button:focus-visible,
.ai-tool-mic-button.is-listening {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
  outline: none;
}

/* Image-based starting point for 디스원 서치 */
.web-search-image-start {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  width: 100%;
  padding: clamp(0.875rem, 2.6vw, 1.25rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(1rem, 3vw, 1.4rem);
  background: linear-gradient(135deg, #f8fbff 0%, #f1f5f9 100%);
}

.web-search-image-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 1vw, 0.4rem);
}

.web-search-image-copy h3,
.web-search-image-copy p,
.web-search-suggestion-title,
.web-search-image-fallback,
.web-search-image-preview-info p,
.web-search-image-action,
.web-search-suggestion-chip,
.web-search-image-remove {
  margin: 0;
  font-size: clamp(0.82rem, 2.4vw, 0.96rem);
}

.web-search-image-copy h3 {
  color: #1e40af;
  font-weight: 750;
}

.web-search-image-copy p,
.web-search-image-preview-info p,
.web-search-image-fallback {
  color: #64748b;
  line-height: 1.55;
}

.web-search-image-actions,
.web-search-suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.6vw, 0.75rem);
}

.web-search-image-action,
.web-search-suggestion-chip,
.web-search-image-remove {
  border: 0.0625rem solid #bfdbfe;
  border-radius: 999rem;
  background: #ffffff;
  color: #1d4ed8;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.web-search-image-action,
.web-search-suggestion-chip {
  padding: clamp(0.58rem, 1.6vw, 0.72rem) clamp(0.8rem, 2.2vw, 1rem);
}

.web-search-image-action:hover,
.web-search-image-action:focus-visible,
.web-search-suggestion-chip:hover,
.web-search-suggestion-chip:focus-visible,
.web-search-image-remove:hover,
.web-search-image-remove:focus-visible {
  background: #eff6ff;
  border-color: #60a5fa;
  color: #1e3a8a;
}

.web-search-image-input {
  display: none;
}

.web-search-image-preview {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1rem);
  width: 100%;
  padding: clamp(0.65rem, 2vw, 0.9rem);
  border: 0.0625rem solid #e2e8f0;
  border-radius: clamp(0.8rem, 2.4vw, 1rem);
  background: #ffffff;
}

.web-search-image-preview[hidden],
.web-search-image-suggestions[hidden] {
  display: none;
}

.web-search-image-preview img {
  flex: 0 0 clamp(4.75rem, 15vw, 6.5rem);
  width: clamp(4.75rem, 15vw, 6.5rem);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: clamp(0.65rem, 2vw, 0.85rem);
  background: #e2e8f0;
}

.web-search-image-preview-info {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.5rem, 1.6vw, 0.75rem);
}

.web-search-image-preview-info p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-search-image-remove {
  flex: 0 0 auto;
  padding: clamp(0.42rem, 1.4vw, 0.55rem) clamp(0.62rem, 1.8vw, 0.8rem);
  color: #475569;
  border-color: #e2e8f0;
}

.web-search-image-suggestions {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 0.7rem);
}

.web-search-suggestion-title {
  color: #334155;
  font-weight: 750;
}

@media (max-width: 640px) {
  .web-search-image-preview {
    align-items: flex-start;
  }

  .web-search-image-preview-info {
    flex-direction: column;
    align-items: flex-start;
  }
}

.loveme-entry-chip {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

.loveme-entry-chip:hover,
.loveme-entry-chip:focus-visible {
  border-color: #fb7185;
  box-shadow: 0 clamp(0.35rem, 1.5vw, 0.65rem) clamp(1rem, 3vw, 1.5rem) rgba(244, 63, 94, 0.12);
}

/* LoveMe styling MVP */
.loveme-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  width: var(--shopping-composer-width);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem) 0;
  border: 0.0625rem solid #e0f2fe;
  border-radius: clamp(1rem, 3vw, 1.5rem);
  background: #f8fafc;
  box-shadow: 0 clamp(0.35rem, 1vw, 0.55rem) clamp(1rem, 3vw, 1.5rem) rgba(37, 99, 235, 0.05);
}

.loveme-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.loveme-main-copy,
.loveme-status,
.loveme-result {
  margin: 0;
  color: #475569;
  line-height: 1.65;
  font-size: clamp(0.88rem, 2vw, 1rem);
}

.loveme-main-copy {
  font-weight: 600;
}

.loveme-composer {
  display: flex;
  flex-direction: column;
  gap: var(--shopping-composer-row-gap);
  width: 100%;
  padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  border: 0.0625rem solid #dbeafe;
  border-radius: var(--shopping-composer-radius);
  background: #ffffff;
  box-shadow: 0 clamp(0.35rem, 1vw, 0.55rem) clamp(1rem, 3vw, 1.4rem) rgba(37, 99, 235, 0.08);
}

.loveme-composer-top,
.loveme-composer-bottom,
.loveme-composer-left-actions,
.loveme-composer-actions {
  display: flex;
  align-items: center;
  width: 100%;
}

.loveme-composer-top {
  min-width: 0;
}

.loveme-composer-bottom {
  justify-content: space-between;
  gap: var(--shopping-composer-control-gap);
  flex-wrap: nowrap;
}

.loveme-composer-left-actions,
.loveme-composer-actions {
  gap: var(--shopping-composer-control-gap);
  width: auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.loveme-composer-left-actions {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.loveme-composer-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.loveme-plus-wrap {
  position: relative;
  flex: 0 0 auto;
}

.loveme-question-label {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.loveme-question {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: auto;
  block-size: auto;
  padding: clamp(0.7rem, 2vw, 0.9rem) 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1e293b;
  font-family: inherit;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  line-height: normal;
  resize: none;
}

.loveme-question:focus {
  outline: none;
}

.loveme-plus-button,
.loveme-help-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--shopping-composer-left-button-size);
  block-size: var(--shopping-composer-left-button-size);
  padding: 0;
  border: 0;
  border-radius: 999rem;
  background: #f1f5f9;
  color: #64748b;
  font-family: inherit;
  font-size: clamp(1.45rem, 4vw, 1.8rem);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.loveme-help-button {
  inline-size: var(--shopping-composer-right-button-size);
  block-size: var(--shopping-composer-right-button-size);
  border: 0.0625rem solid #bfdbfe;
  background: #ffffff;
  color: #2563eb;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  font-weight: 900;
}

.loveme-plus-button:hover,
.loveme-plus-button:focus-visible,
.loveme-plus-button[aria-expanded="true"],
.loveme-help-button:hover,
.loveme-help-button:focus-visible,
.loveme-help-button[aria-expanded="true"] {
  border-color: #60a5fa;
  background: #eff6ff;
  color: #2563eb;
  outline: none;
}

.loveme-help-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vw, 0.75rem);
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
}

.loveme-help-panel[hidden] {
  display: none;
}

.loveme-help-title {
  margin: 0;
  color: #1d4ed8;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 800;
}

.loveme-help-examples {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.45rem, 1.2vw, 0.65rem);
}

.loveme-help-examples button {
  padding: clamp(0.5rem, 1.4vw, 0.65rem) clamp(0.7rem, 2vw, 0.9rem);
  border: 0.0625rem solid #bfdbfe;
  border-radius: 999rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-family: inherit;
  font-size: clamp(0.82rem, 1.8vw, 0.95rem);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
}

.loveme-help-examples button:hover,
.loveme-help-examples button:focus-visible {
  border-color: #60a5fa;
  background: #dbeafe;
  outline: none;
}

.loveme-submit {
  flex: 0 0 auto;
  padding: clamp(0.7rem, 2vw, 0.85rem) clamp(1rem, 3vw, 1.35rem);
  border: 0;
  border-radius: 999rem;
  background: #2563eb;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.loveme-submit:hover,
.loveme-submit:focus-visible {
  background: #1d4ed8;
  outline: none;
}

.loveme-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.loveme-result {
  padding: clamp(0.9rem, 2vw, 1.1rem);
  border: 0.0625rem solid #e2e8f0;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
  color: #1e293b;
}

.loveme-answer-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.5vw, 0.8rem);
}

.loveme-answer-summary,
.loveme-answer-card {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.5rem);
  padding: clamp(0.75rem, 2vw, 0.95rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.8rem, 2vw, 1rem);
  background: #f8fafc;
}

.loveme-answer-summary {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.loveme-answer-card h3,
.loveme-answer-summary h3 {
  margin: 0;
  color: #1d4ed8;
  font-size: clamp(0.92rem, 2vw, 1.05rem);
  font-weight: 850;
  line-height: 1.35;
}

.loveme-answer-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.8vw, 0.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.loveme-answer-list li {
  position: relative;
  padding-left: clamp(0.95rem, 2vw, 1.15rem);
  color: #334155;
  font-size: clamp(0.88rem, 1.8vw, 0.98rem);
  line-height: 1.5;
}

.loveme-answer-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #60a5fa;
  font-weight: 900;
}

.loveme-answer-hair,
.loveme-answer-outfit,
.loveme-answer-color,
.loveme-answer-accessory,
.loveme-answer-makeup,
.loveme-answer-avoid,
.loveme-answer-shopping {
  background: #ffffff;
}

.loveme-answer-shopping {
  border-color: #bae6fd;
  background: #f0f9ff;
}

.loveme-sources {
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.2vw, 0.65rem);
  margin-top: clamp(0.65rem, 1.8vw, 0.9rem);
  padding-top: clamp(0.65rem, 1.8vw, 0.9rem);
  border-top: 0.0625rem solid #e2e8f0;
}

.loveme-sources h3 {
  margin: 0;
  color: #475569;
  font-size: clamp(0.82rem, 1.7vw, 0.92rem);
  font-weight: 800;
  line-height: 1.35;
}

.loveme-source-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.loveme-source-item a {
  display: flex;
  align-items: baseline;
  gap: clamp(0.35rem, 1vw, 0.5rem);
  flex-wrap: wrap;
  min-width: 0;
  color: #1d4ed8;
  font-size: clamp(0.78rem, 1.6vw, 0.88rem);
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.loveme-source-item a:hover,
.loveme-source-item a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.loveme-source-title {
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
  font-weight: 750;
}

.loveme-source-domain {
  flex: 0 1 auto;
  color: #64748b;
  font-size: clamp(0.72rem, 1.5vw, 0.8rem);
}

.loveme-source-note {
  margin: clamp(0.65rem, 1.8vw, 0.9rem) 0 0;
  color: #64748b;
  font-size: clamp(0.78rem, 1.6vw, 0.88rem);
  line-height: 1.45;
}

.loveme-result[hidden],
.loveme-status[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .loveme-panel {
    width: 95%;
    padding: clamp(1rem, 3vw, 1.5rem) 0;
  }

  .loveme-composer {
    gap: var(--shopping-composer-row-gap);
    padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  }

  .loveme-composer-bottom,
  .loveme-composer-actions {
    gap: var(--shopping-composer-control-gap);
  }

  .loveme-submit {
    flex: 0 0 auto;
    padding-right: clamp(0.75rem, 3vw, 1rem);
    padding-left: clamp(0.75rem, 3vw, 1rem);
  }
}


.home-meal-entry-chip {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.home-meal-entry-chip:hover,
.home-meal-entry-chip:focus-visible {
  border-color: #4ade80;
  box-shadow: 0 clamp(0.35rem, 1.5vw, 0.65rem) clamp(1rem, 3vw, 1.5rem) rgba(34, 197, 94, 0.12);
}

/* Home Meal service shell */
.home-meal-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  width: var(--shopping-composer-width);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem) 0;
  border: 0.0625rem solid #dcfce7;
  border-radius: clamp(1rem, 3vw, 1.5rem);
  background: #f8fafc;
  box-shadow: 0 clamp(0.35rem, 1vw, 0.55rem) clamp(1rem, 3vw, 1.5rem) rgba(37, 99, 235, 0.05);
}

.home-meal-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.home-meal-main-copy,
.home-meal-sub-copy,
.home-meal-help-copy,
.home-meal-status {
  margin: 0;
  color: #475569;
  line-height: 1.65;
  font-size: clamp(0.88rem, 2vw, 1rem);
}

.home-meal-main-copy {
  color: #334155;
  font-weight: 600;
}

.home-meal-sub-copy {
  color: #15803d;
  font-weight: 700;
}


.home-meal-sub-tabs {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 0.4rem);
  width: min(100%, clamp(18rem, 56vw, 28rem));
  padding: clamp(0.18rem, 0.8vw, 0.28rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: 999rem;
  background: #eef6ff;
}

.home-meal-sub-tab {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 0.8vw, 0.35rem);
  padding: clamp(0.42rem, 1.4vw, 0.55rem) clamp(0.55rem, 1.8vw, 0.8rem);
  border: 0.0625rem solid transparent;
  border-radius: 999rem;
  background: transparent;
  color: #475569;
  font-family: inherit;
  font-size: clamp(0.82rem, 2vw, 0.94rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.home-meal-sub-tab:hover,
.home-meal-sub-tab:focus-visible {
  color: #2563eb;
  background: rgba(255, 255, 255, 0.72);
  outline: none;
}

.home-meal-sub-tab:focus-visible {
  box-shadow: 0 0 0 clamp(0.12rem, 0.45vw, 0.18rem) rgba(37, 99, 235, 0.16);
}

.home-meal-sub-tab.is-active {
  border-color: #bfdbfe;
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: 0 clamp(0.18rem, 0.8vw, 0.28rem) clamp(0.55rem, 1.8vw, 0.85rem) rgba(37, 99, 235, 0.12);
}

.home-meal-sub-tab-icon {
  font-size: clamp(0.95rem, 2.4vw, 1.08rem);
  line-height: 1;
}

.home-meal-composer-top,
.home-meal-composer-bottom,
.home-meal-composer-left-actions,
.home-meal-composer-actions {
  display: flex;
  align-items: center;
  width: 100%;
}

.home-meal-composer-top {
  min-width: 0;
}

.home-meal-composer-bottom {
  justify-content: space-between;
  gap: var(--shopping-composer-control-gap);
  flex-wrap: nowrap;
}

.home-meal-composer-left-actions,
.home-meal-composer-actions {
  gap: var(--shopping-composer-control-gap);
  width: auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.home-meal-composer-left-actions {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.home-meal-composer-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.home-meal-question-label {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-meal-plus-button,
.home-meal-help-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--shopping-composer-left-button-size);
  block-size: var(--shopping-composer-left-button-size);
  padding: 0;
  border: 0;
  border-radius: 999rem;
  background: #f1f5f9;
  color: #64748b;
  font-family: inherit;
  font-size: clamp(1.45rem, 4vw, 1.8rem);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.home-meal-help-button {
  inline-size: var(--shopping-composer-right-button-size);
  block-size: var(--shopping-composer-right-button-size);
  border: 0.0625rem solid #bfdbfe;
  background: #ffffff;
  color: #2563eb;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  font-weight: 900;
}

.home-meal-help-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vw, 0.75rem);
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 0.0625rem solid #dcfce7;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
}

.home-meal-help-panel[hidden],
.home-meal-status[hidden] {
  display: none;
}

.home-meal-help-title {
  margin: 0;
  color: #15803d;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 800;
}

.home-meal-status {
  padding: clamp(0.9rem, 2vw, 1.1rem);
  border: 0.0625rem solid #dcfce7;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
  color: #1e293b;
}

.home-meal-result[hidden] {
  display: none;
}

.home-meal-result-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  width: 100%;
}


.home-meal-answer {
  padding: clamp(0.9rem, 2vw, 1.1rem);
  border: 0.0625rem solid #dcfce7;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
  color: #1e293b;
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.7;
  white-space: pre-wrap;
}

.home-meal-sources {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.6vw, 0.85rem);
  padding: clamp(0.85rem, 2vw, 1rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #f8fafc;
}

.home-meal-sources h3 {
  margin: 0;
  color: #2563eb;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 800;
}

.home-meal-source-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.4vw, 0.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-meal-source-item {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.8vw, 0.4rem);
}

.home-meal-source-item a {
  display: inline-flex;
  flex-wrap: wrap;
  gap: clamp(0.35rem, 1vw, 0.5rem);
  color: #1e293b;
  font-size: clamp(0.82rem, 1.9vw, 0.92rem);
  font-weight: 800;
  line-height: 1.45;
  text-decoration: none;
}

.home-meal-source-item a:hover,
.home-meal-source-item a:focus-visible {
  color: #2563eb;
  text-decoration: underline;
}

.home-meal-source-domain {
  color: #64748b;
  font-size: clamp(0.74rem, 1.7vw, 0.82rem);
  font-weight: 700;
}

.home-meal-source-item p {
  margin: 0;
  color: #475569;
  font-size: clamp(0.78rem, 1.8vw, 0.88rem);
  line-height: 1.55;
}

.home-meal-pet-pending {
  padding: clamp(0.85rem, 2vw, 1rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
}

.home-meal-ingredient-summary,
.home-meal-menu-row {
  display: flex;
  align-items: stretch;
  gap: clamp(0.75rem, 2vw, 1rem);
  padding: clamp(0.85rem, 2vw, 1rem);
  border: 0.0625rem solid #dcfce7;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
}

.home-meal-ingredient-summary {
  flex-direction: column;
}

.home-meal-menu-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1.8vw, 0.9rem);
}

.home-meal-menu-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.4vw, 0.7rem);
}

.home-meal-menu-main h3,
.home-meal-result-title,
.home-meal-result-copy,
.home-meal-menu-main p,
.home-meal-source-note,
.home-meal-menu-evidence p {
  margin: 0;
}

.home-meal-menu-main h3,
.home-meal-result-title {
  color: #166534;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  font-weight: 800;
  line-height: 1.35;
}

.home-meal-menu-main p,
.home-meal-result-copy,
.home-meal-source-note,
.home-meal-menu-evidence p {
  color: #475569;
  font-size: clamp(0.84rem, 2vw, 0.95rem);
  line-height: 1.6;
}

.home-meal-menu-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.home-meal-result-label,
.home-meal-evidence-badge {
  color: #2563eb;
  font-size: clamp(0.74rem, 1.8vw, 0.82rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.home-meal-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.home-meal-pill,
.home-meal-muted {
  display: inline-flex;
  align-items: center;
  border-radius: 999rem;
  padding: clamp(0.22rem, 0.8vw, 0.32rem) clamp(0.5rem, 1.4vw, 0.7rem);
  font-size: clamp(0.76rem, 1.8vw, 0.86rem);
  line-height: 1.25;
}

.home-meal-pill {
  border: 0.0625rem solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
  font-weight: 700;
}

.home-meal-missing-row .home-meal-pill {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.home-meal-muted {
  border: 0.0625rem solid #dbeafe;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 700;
}

.home-meal-menu-evidence {
  flex: 0 1 min(36%, 18rem);
  min-width: min(38vw, 12rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.2vw, 0.6rem);
  padding: clamp(0.65rem, 1.8vw, 0.85rem);
  border-radius: clamp(0.75rem, 2vw, 0.9rem);
  background: #f8fafc;
}

.home-meal-menu-evidence a {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.8vw, 0.35rem);
  color: #1e293b;
  font-size: clamp(0.78rem, 1.8vw, 0.88rem);
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}

.home-meal-menu-evidence small {
  color: #64748b;
  font-size: clamp(0.72rem, 1.7vw, 0.8rem);
  font-weight: 600;
}

@media (max-width: 640px) {
  .home-meal-menu-row {
    gap: clamp(0.55rem, 2vw, 0.75rem);
  }

  .home-meal-menu-evidence {
    flex-basis: min(38%, 11rem);
    min-width: min(36vw, 9rem);
    padding: clamp(0.55rem, 1.8vw, 0.7rem);
  }
}

@media (max-width: 640px) {
  .home-meal-panel {
    padding: clamp(1rem, 3vw, 1.5rem) 0;
  }

  .home-meal-composer-bottom,
  .home-meal-composer-actions {
    gap: var(--shopping-composer-control-gap);
  }
}

/* Shared AI tool intro copy alignment: 해석 / 즉답 / 서치 / 럽미 / 집밥 */
.document-ai-copy,
.instant-answer-copy,
.web-search-copy,
.loveme-copy,
.home-meal-copy {
  align-items: center;
  width: 100%;
  text-align: center;
}

.document-ai-main-copy,
.instant-answer-main-copy,
.web-search-main-copy,
.loveme-main-copy,
.home-meal-main-copy,
.document-ai-sub-copy,
.instant-answer-sub-copy,
.web-search-sub-copy,
.home-meal-sub-copy {
  text-align: center;
  line-height: 1.65;
}

.document-ai-main-copy,
.instant-answer-main-copy,
.web-search-main-copy,
.loveme-main-copy,
.home-meal-main-copy {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

.document-ai-sub-copy,
.instant-answer-sub-copy,
.web-search-sub-copy,
.home-meal-sub-copy {
  font-size: clamp(0.88rem, 2vw, 1rem);
}


/* Shared compact image UX for every service composer */
.composer-img-preview {
  align-self: flex-start;
  margin-bottom: 0;
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

.composer-img-preview .pv-item {
  width: clamp(3.5rem, 12vw, 4.375rem);
  height: clamp(3.5rem, 12vw, 4.375rem);
}

.composer-plus-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.composer-plus-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + clamp(0.4rem, 1.2vw, 0.6rem));
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.8vw, 0.35rem);
  min-inline-size: max-content;
  padding: clamp(0.35rem, 1vw, 0.5rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.75rem, 2vw, 0.95rem);
  background: #ffffff;
  box-shadow: 0 clamp(0.45rem, 1.4vw, 0.7rem) clamp(1.2rem, 3vw, 1.8rem) rgba(15, 23, 42, 0.14);
}

.composer-plus-menu[hidden] {
  display: none;
}

.composer-plus-menu-item {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1.2vw, 0.6rem);
  width: 100%;
  padding: clamp(0.55rem, 1.6vw, 0.7rem) clamp(0.75rem, 2vw, 0.95rem);
  border: 0;
  border-radius: clamp(0.55rem, 1.5vw, 0.75rem);
  background: transparent;
  color: #1e293b;
  font-family: inherit;
  font-size: clamp(0.88rem, 2vw, 0.98rem);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.composer-plus-menu-item:hover,
.composer-plus-menu-item:focus-visible {
  background: #eff6ff;
  color: #0369a1;
  outline: none;
}

.composer-image-file-input {
  display: none;
}

/* Shared AI tool composer system: 해석 / 즉답 / 서치 / 럽미 / 집밥 */
.ai-tool-composer {
  display: flex;
  flex-direction: column;
  gap: var(--shopping-composer-row-gap);
  width: 100%;
  padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  border: 0.0625rem solid #dbeafe;
  border-radius: var(--shopping-composer-radius);
  background: #ffffff;
  box-shadow: 0 clamp(0.35rem, 1vw, 0.55rem) clamp(1rem, 3vw, 1.4rem) rgba(37, 99, 235, 0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ai-tool-composer:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 clamp(0.35rem, 1vw, 0.55rem) clamp(1rem, 3vw, 1.4rem) rgba(37, 99, 235, 0.08), 0 0 0 clamp(0.12rem, 0.5vw, 0.2rem) rgba(37, 99, 235, 0.12);
}

.ai-tool-input {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.ai-tool-control-row,
.ai-tool-left-controls,
.ai-tool-right-controls {
  display: flex;
  align-items: center;
  gap: var(--shopping-composer-control-gap);
  flex-wrap: nowrap;
  min-width: 0;
}

.ai-tool-control-row {
  justify-content: space-between;
  width: 100%;
}

.ai-tool-left-controls {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.ai-tool-right-controls {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.ai-tool-icon-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: clamp(0.5rem, 1.5vw, 1rem);
  background: transparent;
  color: var(--color-text-light);
  box-shadow: none;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 160ms ease, filter 160ms ease;
}

.ai-tool-plus-button {
  inline-size: var(--shopping-composer-left-button-size);
  block-size: var(--shopping-composer-left-button-size);
  color: #334155;
  font-size: clamp(2.25rem, 4.8vw, 2.5625rem);
  font-weight: 400;
}

.ai-tool-help-button,
.ai-tool-mic-button {
  inline-size: var(--shopping-composer-right-button-size);
  block-size: var(--shopping-composer-right-button-size);
  color: var(--color-text-light);
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  font-weight: 800;
}

.ai-tool-right-controls .ai-tool-help-button {
  margin-left: 0;
}

.ai-tool-icon-button:hover,
.ai-tool-icon-button:focus-visible,
.ai-tool-icon-button[aria-expanded="true"],
.ai-tool-mic-button.is-listening {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
  filter: none;
  outline: none;
}

.ai-tool-action-button {
  flex: 0 0 auto;
  padding: clamp(0.7rem, 2vw, 0.85rem) clamp(1rem, 3vw, 1.35rem);
  border: 0;
  border-radius: 999rem;
  background: #2563eb;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.ai-tool-action-button:hover,
.ai-tool-action-button:focus-visible {
  background: #1d4ed8;
  box-shadow: 0 clamp(0.25rem, 1vw, 0.45rem) clamp(0.65rem, 2vw, 0.95rem) rgba(37, 99, 235, 0.18);
  outline: none;
}

.ai-tool-action-button:disabled,
.ai-tool-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.document-ai-question,
.instant-answer-question,
.loveme-question,
.home-meal-question,
.web-search-input {
  width: 100%;
  min-width: 0;
  padding: clamp(0.7rem, 2vw, 0.9rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1e293b;
  font-family: inherit;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  line-height: 1.55;
  outline: none;
}

.document-ai-question:focus,
.instant-answer-question:focus,
.loveme-question:focus,
.home-meal-question:focus,
.web-search-input:focus {
  outline: none;
}

.document-ai-question {
  min-height: clamp(6.6rem, 18vw, 7.5rem);
  padding: 0;
}

.instant-answer-question,
.loveme-question,
.home-meal-question {
  min-height: auto;
  block-size: auto;
  overflow: hidden;
  resize: none;
}

.document-ai-composer.is-drag-over {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 clamp(0.16rem, 0.7vw, 0.25rem) rgba(37, 99, 235, 0.14);
}

.document-ai-upload-action,
.document-ai-help-button,
.instant-answer-plus-button,
.instant-answer-help-button,
.web-search-plus-button,
.web-search-help-button,
.loveme-plus-button,
.home-meal-plus-button,
.loveme-help-button,
.home-meal-help-button,
.ai-tool-mic-button {
  transform: none;
}

@media (max-width: 640px) {
  .ai-tool-composer {
    gap: var(--shopping-composer-row-gap);
    padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  }

  .ai-tool-control-row,
  .ai-tool-right-controls {
    gap: var(--shopping-composer-control-gap);
  }

  .ai-tool-action-button {
    flex: 0 0 auto;
    width: auto;
    padding-right: clamp(0.75rem, 3vw, 1rem);
    padding-left: clamp(0.75rem, 3vw, 1rem);
  }
}

.ai-tool-right-controls .ai-tool-action-button {
  align-self: center;
}

.document-ai-composer.is-drag-over {
  transform: none;
}