/* ===== Base layout ===== */
html, body { height: 100%; overflow: hidden; }
:root { --hdr: 8vh; --ftr: 64px; }

/* Scroll area */
#app-scroll{
  position: fixed; top: var(--hdr); bottom: var(--ftr); left: 0; right: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none;
}
@media (hover: hover) and (pointer: fine){ #app-scroll::-webkit-scrollbar{ width: 0; } }

/* Page background */
body{
  margin: 0; font-weight: normal; -webkit-tap-highlight-color: transparent;
  background: url("https://safeean.club/wordpress/ai/kidbg.png") no-repeat center center fixed !important;
  background-size: 85% auto !important; background-position: center center; background-repeat: no-repeat;
  background-color: #f0f4f8; padding: 1rem;
}

/* Buttons */
button{
  background:#ffffff02; color:#007aff; padding:.45rem 1rem; border-radius:18px; border:1px solid #007aff;
  cursor:pointer; font-size:.9rem; font-weight:500;
}
button:hover{ background:#e6f0ff; }
.ai-button{ color:#5BADFF !important; }
.ai-button{ background:#e6f4ff; border:1px solid #b0d4f1; border-radius:20px; padding:6px 14px; font-size:.85rem; margin:4px; }
.ai-button:hover{ background:#d4eaff; }

/* Chat container spacing */
#chat-container{ padding-top:5vh; background:transparent !important; padding-bottom:calc(var(--ftr) + 24px); }

/* ===== Header pulse dots ===== */
.ai-pulse-dots{ display:inline-flex; gap:6px; align-items:center; }
.ai-pulse-dots .dot{
  width:8px; height:8px; border-radius:9999px; background:#5BADFF; opacity:.7;
  animation: ai-breathe 1.4s ease-in-out infinite;
}
.ai-pulse-dots .dot:nth-child(2){ animation-delay:.15s; }
.ai-pulse-dots .dot:nth-child(3){ animation-delay:.3s; }
@keyframes ai-breathe{
  0%,100%{ transform:translateY(0) scale(1); opacity:.6; }
  50%    { transform:translateY(-2px) scale(1.15); opacity:1; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ai-pulse-dots .dot{ animation:none; }
  #ai-progress{ transition:none; }
}

/* ===== Typing caret (optional) ===== */
.msg-typing-caret::after{
  content:""; display:inline-block; width:1px; height:1em; background:#073B4C;
  margin-left:2px; vertical-align:-2px; animation: caret-blink .9s steps(1) infinite;
}
@keyframes caret-blink{ 50%{ opacity:0; } }

/* Preserve line breaks / avoid ugly word breaks */
.bubble-text{ white-space: pre-wrap; word-break: keep-all; }

/* ===== Post indicator ===== */
.ai-post-indicator{
  display:flex; align-items:center; gap:10px; margin-top:10px; color:#4b5563; font-size:.95rem;
  opacity:0; transform:translateY(4px) scale(.98); animation: ai-ind-in .45s ease forwards;
}
.ai-post-icon{
  width:28px; height:28px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  background:#eef5ff; border:1px solid #d6e7ff; font-size:16px; user-select:none; animation: ai-icon-pop 1.2s ease-in-out infinite;
}
.ai-post-text{ transition: opacity .6s ease; }

@keyframes ai-ind-in{ to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes ai-ind-out{ to{ opacity:0; transform:translateY(4px) scale(.96); } }
@keyframes ai-icon-pop{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

@media (prefers-reduced-motion: reduce){
  .ai-post-indicator{ animation:none; opacity:1; transform:none; }
  .ai-post-icon{ animation:none; }
  .ai-post-text{ transition:none; }
}

/* ===== Chat bubble micro motions ===== */
.chat-bubble{ will-change: transform; }
.buzz-in{ animation: chat-buzz-in .34s ease-out 1; }
@keyframes chat-buzz-in{
  0%{ transform: translate3d(0,0,0) rotate(0); }
  20%{ transform: translateX(-0.6px) rotate(-0.2deg); }
  40%{ transform: translateX(0.9px)  rotate(0.2deg); }
  60%{ transform: translateX(-0.8px) rotate(-0.2deg); }
  80%{ transform: translateX(0.5px)  rotate(0.15deg); }
  100%{ transform: translateX(0)     rotate(0); }
}
.buzz-tiny{ animation: chat-buzz-tiny .2s ease-in-out 1; }
@keyframes chat-buzz-tiny{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-0.8px); }
  75%{ transform:translateX(0.8px); }
}

/* Direction origin */
.ai-bubble{ transform-origin: 0% 50%; }
.me-bubble{ transform-origin: 100% 50%; }

@media (prefers-reduced-motion: reduce){
  .buzz-in,.buzz-tiny{ animation:none !important; }
}

/* ===== Summary box fallback (Tailwind 미사용 시 대비) ===== */
.summary-box{
  background:#fff; border:1px solid #007aff; border-radius:12px; padding:12px;
  margin-top:8px; font-size:.9rem; line-height:1.6;
}


#qr-overlay{
  position: fixed;
  inset: 0;
  display: none;                 /* 열 때 JS에서 'flex'로 변경 */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  padding: 16px;
  box-sizing: border-box;
  /* iOS 안전영역 대응(있으면 사용) */
  padding: max(16px, env(safe-area-inset-top))
           max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
}

/* 모달 카드 */
#qr-card{
  position: relative;            
  width: min(92vw, 420px);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  margin: 0 auto;
}

#qr-card h3{ margin:0 0 12px; color:#073B4C; }

/* 닫기 버튼을 카드 우상단에 고정 */
#qr-close{position: absolute;top: 10px;right: 14px;background: transparent;border: 0;font-size: 26px;cursor: pointer;color: #64748B;}
#qr-canvas{ display:block; margin:12px auto; }
#qr-countdown{ color:#0ea5e9; font-weight:600; margin-top:4px; font-size:12px; }
.qr-url-box{margin-top:10px; font-size:12px; color:#475569; word-break:break-all;background:#F1F5F9; padding:8px; border-radius:8px;}


/*단계 내용*/
.step-indicator { width: 100%;margin-top: 10px;}
.step-meter{position: relative;display: flex;align-items: center;gap: 10px;padding: 6px 10px;background: #5dadff;border-radius: 999px;}
.step-track{flex: 1 1 auto;height: 14px; background: #4a89c6; border-radius: 999px;overflow: hidden;position: relative;}
.step-fill{height: 100%;background: #b7de2d;border-radius: 999px;transition: width .25s ease;}
.step-count{flex: 0 0 auto;font-weight: 700;color: #ffffff;font-size: 14px;letter-spacing: .02em;}


/*나이 스크롤*/
/* 공통 품질 세팅 */
.wheel, .wheel-item {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* 래퍼 */
.wheel-wrap{
  position: relative;
  width: min(420px, 92vw);
  margin: 8px auto 10px;
}

/* 스크롤 영역 */
.wheel{
  position: relative;
  height: calc(var(--item-h) * 3); /* ex: 44px * 5 */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  padding: calc((var(--item-h) * 2) / 2) 0; /* 위아래 1줄 공간 */


  /* 상하 페이드(텍스트는 또렷, 가장자리는 부드럽게) */
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,1.00) 18%,
      rgba(0,0,0,1.00) 82%,
      rgba(0,0,0,0.00) 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,1.00) 18%,
      rgba(0,0,0,1.00) 82%,
      rgba(0,0,0,0.00) 100%);

  /* 레이어를 고정해 sub-pixel 흔들림 줄이기 */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 항목(정수 라인에 중앙정렬) */
.wheel-item{
  height: var(--item-h);                /* ex: 44px (정수) */
  line-height: var(--item-h);           /* 텍스트가 정확히 중앙 라인에 오도록 */
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #8c919a;
  scroll-snap-align: center;
  user-select: none;
}

/* 선택 항목(가독성 강조) */
.wheel-item.is-active{
  color: #111827;
}

/* 중앙 하이라이트(정수 좌표 배치) */
.wheel-center{
  pointer-events: none;
  position: absolute;
  left: 10px;
  right: 10px;
  /* JS에서 height/top을 지정하므로 여기선 transform 사용 금지 */
  border-radius: 12px;
  /* 아주 옅은 하이라이트 + 선명한 파란 라인 */
  background: rgba(47,157,223,.10);
  box-shadow:
    0 0 0 2px #2f9ddf inset,      /* 파란 외곽선 */
    0 0 0 1px rgba(255,255,255,.8) inset; /* 하얀 안쪽선으로 선명도 */
}

/* 상/하단 블러 마스크는 제거 (텍스트 흐릿 이슈 방지) */
.wheel-mask{ display:none !important; }

/* 확인 버튼 */
.wheel-ok{
  display:block;
  width:min(420px, 92vw);
  margin: 12px auto 0;
  background:#8fa7c3;
  border-radius: 999px;
  font-weight:800;
  padding: 12px 18px;
  color:#fff;
  font-size:18px;
}


/* 알레르기 캡슐 그리드 */
.allergy-grid{
  width:min(500px, 100%);
  margin: 6px auto 10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 11px;
  padding: 0 6px;
}

@media (max-width: 980px){
  .allergy-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .allergy-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* 캡슐 버튼 */
.pill{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px 9px;
  border-radius: 999px;
  border: 0;
  background:#ffffff;
  color:#1f2937;
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
  box-shadow:
    0 2px 0 rgba(0,0,0,.06),
    0 10px 20px rgba(0,0,0,.06);
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .15s ease;
}
.pill:hover{ transform: translateY(-1px); }
.pill:active{ transform: translateY(0); }

/* 선택 상태 */
.pill[aria-pressed="true"]{
  background:#1e73ff;
  color:#fff;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 8px 18px rgba(30,115,255,.28);
}

/* 포커스 링(접근성) */
.pill:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(30,115,255,.35),
    0 2px 0 rgba(0,0,0,.06),
    0 10px 20px rgba(0,0,0,.06);
}

/* 확인 버튼 톤 맞추기 */
.pill-ok{
  display:block;
  width:min(420px, 92vw);
  margin: 14px auto 0;
  background:#8fa7c3;
  border-radius:999px;
  font-weight:800;
  padding:12px 12px;
  color:#fff;
  font-size:12px;
}