/* 캐릭터 컷 띠 — 전 페이지 공용 (ENGINE-0824-1712-01).
   스크롤 한 화면에 캐릭터 최소 1컷을 세우는 최소 단위다.
   배경은 순백 #FFFFFF, 선은 #EAEAEA, 이름은 포인트 남색 #1B3B6F — 정본 3색만 쓴다.

   ENGINE-0827-1325-01 — 그림칸은 3:4 세로 포스터 비율 고정 + object-fit:contain 이다.
   종전에는 height:100%/min-height 가 aspect-ratio 를 눌러 칸 비율이 그리드 폭에 끌려다녔고
   (PC 0.75 / 모바일 0.56), 원본 비율이 0.399~1.059 로 제각각이라 cover 가 그 차이를 전부
   잘라 냈다 — 정사각 컷은 좌우 19~44%(손·팔·액자), 세로 컷은 상하 47%(머리 위·몸통 아래).
   칸 비율을 고정하고 contain 으로 담으면 어떤 원본이 와도 인물이 통째로 들어온다.
   남는 여백은 카드와 같은 순백이라 눈에 띄지 않는다. */
.char-band{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  align-items:stretch;margin:22px 0;background:#FFFFFF;
  border:1px solid #EAEAEA;border-radius:16px;overflow:hidden;
}
.char-band__img{
  width:100%;height:auto;aspect-ratio:3/4;align-self:start;
  object-fit:contain;object-position:50% 50%;display:block;background:#FFFFFF;
}
/* 좌우 여백 18→13px — 모바일 167px 칸에서 글줄 폭이 131px 뿐이라 마지막 낱말이 1px 모자라
   overflow-wrap 으로 쪼개지고 마침표 한 글자가 제 줄로 떨어졌다(1325-01 실측). */
.char-band__copy{min-width:0;align-self:center;padding:20px 13px;color:#222222;}
.char-band__copy b{
  display:block;margin-bottom:9px;color:#1B3B6F;
  font-size:.72rem;letter-spacing:.14em;font-weight:700;
}
.char-band__copy p{
  margin:0 0 7px;font-family:"Noto Serif KR",Georgia,serif;
  font-size:1.02rem;line-height:1.55;font-weight:700;
  word-break:keep-all;color:#222222;
}
.char-band__copy p:last-child{margin-bottom:0;font-weight:400;font-size:.92rem;color:#555555;}
/* flip 은 order 로 배치 순서를 뒤집는다 = 그리드 자동배치가 카피를 1열에 넣는다.
   그래서 트랙 폭도 같이 뒤집어야 카피 칸이 항상 넓은 쪽(1fr)을 받는다. 이걸 빠뜨려
   360px 에서 flip 밴드만 카피 내용폭 126px < 최장 낱말 132px 이 되어
   overflow-wrap 이 "내려오셨사옵니다." 를 쪼개고 마침표가 제 줄로 떨어졌다(1325-01 실측). */
.char-band--flip{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);}
.char-band--flip .char-band__img{order:2;}
.char-band--flip .char-band__copy{order:1;}
/* 폼 안쪽(가족 블록 등)에 끼우는 작은 컷 — 띠가 커서 입력 흐름을 끊는 자리에만 쓴다. */
.char-band--mini{margin:14px 0;grid-template-columns:96px minmax(0,1fr);}
.char-band--mini.char-band--flip{grid-template-columns:minmax(0,1fr) 96px;}
.char-band--mini .char-band__copy{padding:12px 14px;}
.char-band--mini .char-band__copy p{font-size:.9rem;margin-bottom:0;}

/* 푸터의 서비스/고객센터 열 사이에 끼워도 암시적 좁은 열로 찌그러지지 않게 한다. */
.footer-top > .char-band{grid-column:1/-1;width:100%;}