/* ===========================================================================
   characters-v13.css — 캐릭터 배치 전용 레이어 (v13)

   styles.css 뒤에 로드된다. v3~v10 동안 styles.css 안에 여덟 겹으로 쌓인
   캐릭터 장식 규칙(.hero-scene / .side-illustration / .heading-art / .ribbon-* …)과
   특이성 싸움을 하지 않으려고, 마크업의 캐릭터 슬롯 클래스를 전부 `cv-*`라는
   새 이름으로 바꿨다. 옛 규칙은 더 이상 어떤 요소에도 매칭되지 않으므로
   캐릭터 배치의 단일 출처는 이 파일 하나다.

   배치 근거는 공식 캐릭터 설정이다 (ROLES-v13.md 참조).
   =========================================================================== */

:root{
  --cv-shadow: drop-shadow(0 6px 5px rgba(60, 96, 124, .16));
  --cv-shadow-soft: drop-shadow(0 4px 4px rgba(60, 96, 124, .12));
}

/* --- 공통: 모든 캐릭터는 투명 PNG를 비율 유지로 담는 빈 상자다 ------------- */
.cv{
  display:block;
  position:relative;
  flex:0 0 auto;
  pointer-events:none;        /* 장식이 클릭을 가로채지 않게 */
  -webkit-user-select:none; user-select:none;
}
.cv > img{
  display:block;
  width:100%; height:100%;
  object-fit:contain;         /* 잘림 금지 — 누끼 실루엣을 통째로 보여준다 */
  object-position:bottom center;
  filter:var(--cv-shadow);
}
.cv-stage{ position:absolute; pointer-events:none; }
.cv-row{ display:flex; align-items:flex-end; }

/* 저사양/모션 민감 사용자: 장식 애니메이션 끄기 */
@media (prefers-reduced-motion: reduce){
  .cv, .cv > img{ animation:none !important; transition:none !important; }
}

/* ===== 1. 상단 브랜드마크 — 테마 주인공(모몽가 / 우사기) ==================== */
.brandmark.cv-brand{
  width:42px; height:42px;
  background:var(--accent-soft, #e8f4ff);
  border-radius:13px;
  overflow:hidden;
  display:block;
  pointer-events:auto;
}
.cv-brand > img{ filter:none; object-position:center; padding:3px; }

/* ===== 2. 사이드바 머리 — 치이카와 · 하치와레 · 반대쪽 주인공 =============== */
/* 공식: 치이카와·하치와레·우사기가 주역 3인. 세 번째 칸에는 테마에서 주인공으로
   쓰이지 않는 쪽(모몽가↔우사기)을 세워 어느 테마에서든 15명 전원이 남는다. */
.cv-sidelead{
  height:104px;
  margin:18px 0 10px;
  justify-content:center;
  gap:0;
  position:relative;
  isolation:isolate;
}
.cv-sidelead::before{                /* 셋을 한 무리로 묶는 바닥 빛 */
  content:""; position:absolute; left:8%; bottom:2px; width:84%; height:46px;
  background:radial-gradient(ellipse at center, var(--accent-soft, #e8f4ff), transparent 72%);
  z-index:0;
}
.cv-sidelead .cv{ z-index:1; }
.cv-s1{ width:86px; height:88px; transform:rotate(-6deg); z-index:3; }
.cv-s2{ width:80px; height:94px; margin-left:-8px; z-index:2; }
.cv-s3{ width:74px; height:84px; margin-left:-6px; transform:rotate(7deg); z-index:1; }

/* ===== 3. 사이드바 쉬어 가기 — 쿠리만쥬 ==================================== */
/* 공식: 말수는 적지만 지친 치이카와와 시험공부하는 시사에게 간식을 차입해 주는
   돌봄 캐릭터. '쉬어 가도 괜찮아요' 문구의 주인으로 가장 맞다. */
.sidebar-break.cv-break{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding-right:4px;
}
.cv-break .break-caption{ flex:1 1 auto; min-width:0; }
.cv-rest{ width:62px; height:68px; transform:rotate(-5deg); }

/* ===== 4. 메인 히어로 — 테마 주인공 + 헌책방 ============================== */
/* 공식: 헌책방(카니쨩)은 헌책을 사고파는 다정한 책벌레이고 모몽가와 친하다.
   '단어장'을 상징하는 자리라 두 테마 모두에서 주인공 옆에 둔다. */
/* .main-hero 는 styles.css 에서 2열 grid 다. 겹침을 만들지 않으려면 absolute 로 띄우지 말고
   두 번째 칸을 그대로 쓴다 — 글자 칸과 그림 칸이 구조적으로 분리된다. */
.cv-hero{
  position:static; inset:auto;
  width:100%; max-width:420px; height:210px;
  justify-self:center;
  display:flex; align-items:flex-end; justify-content:center; gap:0;
}
.cv-hero-lead{ width:56%; height:100%; transform:rotate(4deg); z-index:3; }
.cv-hero-mate{ width:36%; height:60%; margin-left:-6%; transform:rotate(-7deg); z-index:2; }

/* ===== 5. 오늘도 한 단어씩 — 파자마파티즈 4인 ============================= */
/* 공식: 포셰트의 갑옷씨가 손수 만들어 파는 파자마를 입은 4인조. 응원·축하 담당. */
.cv-daily{
  position:relative; z-index:3;
  min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
}
.cv-bubble{
  font-size:11px; font-weight:700; line-height:1.3;
  color:var(--primary-strong, #3f6a86);
  background:rgba(255,255,255,.82);
  border:1px solid var(--accent-border, #cfe3f1);
  border-radius:999px;
  padding:3px 12px;
  white-space:nowrap;
}
/* 그룹 이미지는 가로가 길다(1200x417). 높이를 고정하지 말고 비율대로 늘린다. */
.cv-pajamas{ width:100%; max-width:318px; height:auto; }
.cv-pajamas > img{ height:auto; object-position:center; }

/* ===== 6. 01 단어 가져오기 — 갑옷씨 3인 =================================== */
/* 공식: 노동의 갑옷씨가 그날의 작업을 배정한다. '공부 준비' 안내에 맞춘 배치. */
.cv-scene.cv-prep{
  display:flex; align-items:center; gap:14px;
  margin:4px 0 16px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(100deg, var(--accent-soft, #eef6fc), transparent 92%);
  border:1px solid var(--accent-border, #dfeaf3);
}
.cv-prep > div{ flex:1 1 auto; min-width:0; }
.cv-prep .scene-kicker{ display:block; font-size:11px; font-weight:800; letter-spacing:.2px; color:var(--primary-strong,#3f6a86); margin-bottom:3px; }
.cv-prep p{ margin:0; font-size:12px; line-height:1.5; color:var(--text-muted,#78858f); }
.cv-prep .cv-group{ width:210px; height:auto; }
.cv-prep .cv-group > img{ height:auto; object-position:center; }

/* ===== 7·8. 빠른 시작(치이카와) / 직접 입력(헌책방) ======================= */
/* 공식: 치이카와는 온순하고 겁이 많아 새 일에 조심스럽다 → '샘플로 먼저'.
         헌책방은 책을 모으고 정리한다 → '한 줄씩 모아 단어장'. */
.cv-note{
  display:flex; align-items:center; gap:9px;
  margin:0 0 12px;
  padding:8px 11px;
  border-radius:14px;
  background:var(--accent-soft, #eef6fc);
  border:1px solid var(--accent-border, #dfeaf3);
  font-size:12px; line-height:1.45; color:var(--text-muted,#6f7d87);
}
.cv-note-right{ flex-direction:row-reverse; text-align:right; }
/* .tip-panel 은 padding 이 없고 자식들이 margin:…22px 로 좌우를 잡는다. 그 규칙을 따른다. */
.tip-panel > .cv-note{ margin:16px 22px 4px; }
.cv-note .cv-mini{ width:46px; height:50px; }

/* ===== 9·10·13. 섹션 헤딩 스티커 ========================================== */
/* 02 단어 확인 = 헌책방 + 시사 / 03 퀴즈 = 랏코 / 04 대시보드 = 우사기 */
.page-heading.compact:has(.cv-heading){ padding-right:196px; }
.cv-heading{
  right:18px; bottom:6px;   /* 0 이면 회전된 모서리가 아래 툴바 버튼을 스친다(실측 검출) */
  height:132px;
  display:flex; align-items:flex-end; justify-content:flex-end;
  z-index:0;
}
.cv-heading .cv-h1{ width:112px; height:126px; z-index:2; }
/* 회전은 바운딩 박스를 키워 아래 요소를 침범한다. 기울임 대신 높이차로 변화를 준다. */
.cv-heading .cv-h2{ width:84px; height:88px; margin-left:-14px; z-index:1; }
.page-heading.compact > div:first-child{ position:relative; z-index:1; }

/* 02: 시사는 '자격 시험 공부를 하는 성실한 노력가'라 단어 확인 단계의 동료 */
.cv-review .cv-h1{ width:104px; }

/* ===== 11. 퀴즈 카드 엿보기 — 하치와레 ==================================== */
/* 공식: 마음이 넓고 늘 밝은 면을 보는 긍정왕 → 문제 푸는 동안 옆에서 응원 */
/* .quiz-card 의 overflow 는 styles.css 레이어마다 hidden↔visible 로 뒤집힌다.
   절대배치로 걸치면 어느 폭에서 잘릴지 보장할 수 없으므로, 문제 위 가운데에
   제 자리를 차지하는 블록으로 둔다 — 글자와 겹칠 수 없는 구조다. */
.cv-peek{
  position:static;
  display:block;
  width:76px; height:84px;
  margin:0 auto 16px;
}

/* ===== 12. 퀴즈 결과 — 테마 주인공 ======================================== */
.result-emoji.cv-result{
  width:116px; height:122px;
  background:none; border-radius:0;     /* .result-emoji 의 초록 둥근 상자를 없앤다 */
  display:block;
  margin:0 auto 22px;
  pointer-events:none;
}
.cv-result > img{ filter:var(--cv-shadow); }
.cv-stamp{
  position:absolute; bottom:-8px; right:-4px;
  color:var(--primary-strong,#886bb5); font-size:22px; font-weight:800;
  transform:rotate(9deg);
}

/* ===== 14. 전체 학습자 비교 — 파자마파티즈 4인 ============================ */
.panel.compare-panel{ position:relative; overflow:hidden; padding-top:16px; }
/* 헤더의 칩이 그림 아래로 들어가지 않도록 그림 폭만큼 오른쪽을 비워 둔다(실측으로 겹침 검출됨). */
.compare-panel > .panel-header{ padding-right:196px; }
.cv-compare{
  position:absolute; right:14px; top:10px;
  width:178px; height:62px;
  opacity:.55;
  z-index:0;
}
.cv-compare > img{ object-position:center; }
.compare-panel > *:not(.cv-compare){ position:relative; z-index:1; }

/* ===========================================================================
   반응형 — 좁아질수록 장식을 줄이되, 주인공과 그룹은 끝까지 남긴다.
   원칙: 캐릭터가 글자를 덮지 않는다. 자리가 없으면 숨긴다.
   =========================================================================== */

@media (max-width:1200px){
  .cv-hero{ width:34%; }
  .cv-prep .cv-group{ width:180px; }
  .cv-compare{ width:150px; height:54px; }
  .compare-panel > .panel-header{ padding-right:168px; }
}

@media (max-width:1000px){
  .cv-hero{ height:186px; }
  .page-heading.compact:has(.cv-heading){ padding-right:148px; }
  .cv-heading{ height:104px; right:10px; }
  .cv-heading .cv-h1{ width:88px; height:100px; }
  .cv-heading .cv-h2{ width:64px; height:74px; margin-left:-10px; }
  .cv-pajamas{ max-width:290px; }
  .cv-bubble{ font-size:10px; padding:2px 9px; }
}

@media (max-width:860px){
  /* 860~730px 구간: 헤딩 문단이 두 줄로 늘어나면서 스티커를 스친다(760px 실측 검출).
     이 구간부터 보조 캐릭터를 빼고 주역만 작게 남긴다. */
  .page-heading.compact:has(.cv-heading){ padding-right:118px; }
  .cv-heading{ height:92px; right:8px; }
  .cv-heading .cv-h1{ width:78px; height:88px; }
  .cv-heading .cv-h2{ display:none; }

  /* 사이드바가 접히는 구간: 좁은 폭에서 3인 줄은 과하다 */
  .cv-sidelead{ height:84px; }
  .cv-s1{ width:70px; height:72px; }
  .cv-s2{ width:66px; height:78px; }
  .cv-s3{ width:60px; height:68px; }
  .cv-prep{ flex-direction:column; align-items:stretch; }
  .cv-prep .cv-group{ width:100%; max-width:250px; margin-inline:auto; }
  .cv-note-right{ flex-direction:row; text-align:left; }
}

@media (max-width:730px){
  /* 모바일: styles.css 가 .main-hero 를 1열 grid 로 바꾼다. 그림 칸은 글자 아래로 내려간다. */
  .cv-hero{ max-width:300px; height:146px; }
  .cv-hero-lead{ transform:rotate(3deg); }

  .page-heading.compact:has(.cv-heading){ padding-right:104px; }
  .cv-heading{ height:84px; right:6px; }
  .cv-heading .cv-h1{ width:70px; height:80px; }
  .cv-heading .cv-h2{ display:none; }   /* 둘은 안 들어간다 — 주역만 남긴다 */

  .cv-daily{ padding-right:0; }
  .cv-bubble{ display:none; }
  .cv-pajamas{ max-width:260px; }

  .cv-peek{ width:62px; height:68px; margin-bottom:12px; }

  .cv-compare{ position:static; width:100%; max-width:220px; height:48px; margin:0 auto 10px; opacity:.6; }
  .compare-panel > .panel-header{ padding-right:0; }
  .cv-note .cv-mini{ width:38px; height:42px; }
  .cv-result{ width:96px; height:102px; }
}

@media (max-width:430px){
  .cv-hero{ height:126px; max-width:250px; }
  .cv-prep .cv-group{ width:170px; }
  .cv-pajamas{ max-width:210px; }
}