@charset "utf-8";

/* =========================================================================
   케어매니저 홈 리뉴얼 (PC) — views/main/index.php + views/main/home/*
   시안: 260828_케어매니저 홈페이지 리뉴얼 / 케어매니저-홈-PC.html
   섹션 마크업은 시안의 인라인 스타일을 그대로 쓰고, 여기에는 공통 바탕·hover·애니메이션만 둔다.
   ========================================================================= */

/* common.css의 html, body { overflow-x:hidden } 은 스크롤 고정(sticky) 연출을 깨뜨리므로 clip 으로 바꾼다 */
html.hm-renewal,
html.hm-renewal body {
  overflow-x: clip;
}

html.hm-renewal {
  scroll-behavior: smooth;
}

html.hm-renewal body {
  margin: 0;
  background: #1d1d1d;
}

html.hm-renewal ::selection {
  background: #ff4500;
  color: #fff;
}

[data-root="cm"] {
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 시안 기본 글자 규칙 (common.css 의 h 태그 초기화보다 우선) */
[data-root="cm"] h1,
[data-root="cm"] h2,
[data-root="cm"] h3 {
  font-weight: 700;
  color: inherit;
}

[data-root="cm"] h4,
[data-root="cm"] h5,
[data-root="cm"] h6 {
  font-weight: 600;
  color: inherit;
}

[data-root="cm"] p {
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
}

[data-root="cm"] small {
  font-size: 13px;
  color: #555555;
}

[data-root="cm"] #compare,
[data-root="cm"] #reviews {
  color: #1d1d1d;
}

/* 모바일 시안에서만 쓰는 줄바꿈 (home-renewal-mobile.css 에서 다시 보이게 함) */
.hm-mo-br {
  display: none;
}

/* 헤더·메뉴는 공용 main-header.css */

/* ---------- 시안 hover (인라인 스타일보다 우선해야 해서 !important) ---------- */
.hm-hv-cta:hover {
  background-position: 100% 0 !important;
}

.hm-hv-menu:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: rgba(255, 255, 255, .7) !important;
}

.hm-hv-row:hover {
  background: rgba(255, 255, 255, .07) !important;
}

/* ---------- 애니메이션 ---------- */
@keyframes cmPulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes cmRise { to { transform: none } }
@keyframes cmFadeUp { from { opacity: 0; transform: translateY(38px) } to { opacity: 1; transform: none } }
@keyframes cmSpin { to { transform: rotate(360deg) } }
@keyframes cmTwinkle { 0%, 100% { opacity: .55 } 50% { opacity: .95 } }
@keyframes cmStarDrift { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes cmFlowA { 0%, 100% { transform: translate(-6%, -4%) rotate(-22deg) scale(1) } 50% { transform: translate(10%, 6%) rotate(-6deg) scale(1.22) } }
@keyframes cmFlowB { 0%, 100% { transform: translate(8%, 6%) rotate(16deg) scale(1.1) } 50% { transform: translate(-10%, -8%) rotate(30deg) scale(.94) } }
@keyframes cmFlowC { 0%, 100% { transform: translate(4%, 10%) rotate(8deg) scale(.96) } 50% { transform: translate(-8%, -6%) rotate(-10deg) scale(1.18) } }

/* ---------- 말로 서류 쓰기(home/voice.php) — 듣는 동안 마이크 둘레가 퍼지고 음성 막대가 출렁인다 (2026-11-03) ---------- */
/* 음성 그래프: 평소에도 물결처럼 낮게 일렁이고, 듣는 동안엔 크고 빠르게 출렁인다 */
#voice [data-vbar] { opacity: .55; transform-origin: 50% 50%; animation: hmVoiceIdle 1.3s ease-in-out infinite alternate; transition: opacity .3s ease; }
#voice[data-listening] [data-vbar] { opacity: 1; animation: hmVoiceBar .55s ease-in-out infinite alternate; }
#voice[data-listening] [data-vring] { animation: hmVoiceRing 1.4s ease-out infinite; }
/* 말하는 동안: 배경 주황 빛이 켜지고, 말풍선이 주황으로 빛나고, 로봇 뒤 빛이 커진다 */
#voice[data-listening] [data-vglow] { opacity: 1 !important; }
#voice[data-listening] [data-vcard] { box-shadow: 0 24px 70px rgba(255,69,0,.35) !important; } /* 주황 테두리 선은 없이 번진 빛만 (2026-11-03 사용자) */
#voice[data-listening] [data-vhalo] { opacity: 1 !important; transform: scale(1.18); }
@keyframes hmVoiceIdle { from { transform: scaleY(.22) } to { transform: scaleY(.62) } }
@keyframes hmVoiceBar { from { transform: scaleY(.3) } to { transform: scaleY(1) } }
@keyframes hmVoiceRing { from { opacity: .9; transform: scale(.85) } to { opacity: 0; transform: scale(1.35) } }
@keyframes hmVoiceFloat { 0%, 100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-14px) rotate(2deg) } }
@media (prefers-reduced-motion: reduce) {
  #voice [data-vbg] i, #voice [data-vrobot] > div, #voice [data-vbar] { animation: none !important; }
}

/* ---------- 데스크톱 케봇(home/buddy.php) — 모니터 안 픽셀 케봇 움직임 (2026-10-29) ----------
   걷기: 화면 아래 가장자리를 왼쪽 → 오른쪽으로 걸어가 멈춰 말풍선을 띄우고, 돌아서 되돌아온다(16초 한 바퀴).
   몸만 방향을 바꾸고(hmBuddyFace) 말풍선 · 이름표는 그대로 읽히게 둔다. 다리는 두 박자로 번갈아 든다.
   걷는 케봇은 오른쪽 AI 비서(질문에 답하는 병아리)의 말풍선에 닿기 전(34%)에 멈춘다 */
.hm-buddy-walk { animation: hmBuddyWalk 16s linear infinite; }
.hm-buddy-face { animation: hmBuddyFace 16s steps(1) infinite; }
.hm-buddy-bob { animation: hmBuddyBob .5s steps(1) infinite; }
.hm-buddy-legA, .hm-buddy-legB { transform-box: fill-box; animation: hmBuddyLeg .5s steps(1) infinite; }
.hm-buddy-legB { animation-delay: -.25s; }
.hm-buddy-talk { animation: hmBuddyTalk 16s ease infinite; }
@keyframes hmBuddyWalk { 0% { left: 4% } 38% { left: 34% } 62% { left: 34% } 100% { left: 4% } }
@keyframes hmBuddyFace { 0% { transform: none } 62% { transform: scaleX(-1) } 100% { transform: scaleX(-1) } }
@keyframes hmBuddyBob { 0% { transform: none } 50% { transform: translateY(-4px) } }
@keyframes hmBuddyLeg { 0% { transform: none } 50% { transform: translateY(-1px) } }
@keyframes hmBuddyTalk { 0%, 36% { opacity: 0; transform: translateY(8px) } 40%, 60% { opacity: 1; transform: none } 64%, 100% { opacity: 0; transform: translateY(8px) } }
@media (prefers-reduced-motion: reduce) {
  .hm-buddy-walk, .hm-buddy-face, .hm-buddy-bob, .hm-buddy-legA, .hm-buddy-legB { animation: none; }
  .hm-buddy-walk { left: 30% !important; }
  .hm-buddy-talk { animation: none; opacity: 1; }
}