/* ═══════════════════════════════════════════════════════════
   복덕방 아줌마 캐릭터 — 배치 전용 레이어

   assets/ajumma.svg에 <symbol>로 정의된 표정을 <use>로 꺼내 쓴다.
   :root 토큰은 재정의하지 않는다 — 캐릭터 색은 SVG 안에서
   var(--ink)/var(--seal)/var(--ajumma-skin) 로 이미 팔레트를
   따라가므로 여기서는 크기·위치·말풍선만 담당한다.

   index.html의 다른 스타일시트 <link> 전부(특히 bokdukbang.css)
   뒤에 로드한다.
   ═══════════════════════════════════════════════════════════ */

/* ── 첫 화면(01장) 상단 — 사이트 얼굴 ─────────────────────── */
.ajumma-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.ajumma-hero__art {
  width: clamp(64px, 9vw, 96px);
  height: clamp(64px, 9vw, 96px);
  flex: none;
}

/* 말풍선 — CSS 삼각 꼬리는 border 트릭으로 그린다 */
.ajumma-say {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--body);
  font-size: .92rem;
  line-height: 1.6;
  padding: .7rem 1rem;
  max-width: 46ch;
}
.ajumma-say::after {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 9px solid var(--paper-2);
}

@media (max-width: 560px) {
  .ajumma-hero { flex-wrap: wrap; }
  .ajumma-say::after { display: none; }
}

/* ── 조언 블록 안의 작은 얼굴 ──────────────────────────────── */
.firstact { position: relative; }
.firstact .ajumma-icon {
  position: absolute;
  top: .6rem;
  right: .7rem;
  width: 40px;
  height: 40px;
  opacity: .92;
}

/* 「흔한 실수」 장 머리 — 주의 표정, 제목 옆에 작게 */
.p-miss-icon-wrap { display: flex; align-items: flex-start; gap: .75rem; }
#p-miss .panel__head { position: relative; }
#p-miss .ajumma-icon--warn {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
}

@media (max-width: 560px) {
  #p-miss .ajumma-icon--warn { position: static; display: block; margin-bottom: .6rem; }
  .firstact .ajumma-icon { position: static; display: block; margin: 0 0 .5rem auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ajumma-hero__art, .ajumma-icon { animation: none !important; transition: none !important; }
}