@charset "utf-8";
/* 둥근 한글 서체 — 아동용에서 가장 체감이 큰 부분.
   Jua 는 굵기가 400 하나뿐이라 bold 를 지정하면 브라우저가 합성 볼드를 만들어
   자간이 틀어진다(지침 4). 이 서체를 쓰는 곳은 전부 font-weight:400 으로 고정한다. */
@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");
/* ============================================================
   아동 스킨 — 미취학 아동(PRE) 전용
   지침: 연령대별 스킨 · 애니메이션으로 흥미 유발

   무늬는 전부 CSS 안의 SVG·그라데이션으로 그린다.
   이미지 파일을 추가하지 않으므로 이 파일만 지우면 완전히 원상복구된다.

   되돌리는 방법
   1) quiz.html · report.php 에서 이 파일 <link> 한 줄씩 삭제
   2) assets/js/common.js 의 TARGETS 에서 PRE 를 'kid' 로 되돌림

   다른 대상군에도 적용하려면 common.js 에서 그 대상의 skin 을 'child' 로.
   ============================================================ */

[data-skin="child"]{
  --paper:#FFF7EC;
  --line:#F7E2CD;

  --kid:#FF8A3D;
  --kid-ink:#C2540A;    /* 글자용 — 흰 바탕 대비 4.60:1 (AA 통과) */
  --kid-soft:#FFF0E2;
  --kid-sun:#FFC53D;

  --r-md:20px; --r-lg:28px;
  --fs-skin:1.06;

  /* 바깥 테두리 무늬 — 꽃·구름·별·하트·물방울이 흩뿌려진 한 장 */
  --kid-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23FFC9DC'%3E%3Cellipse cx='42' cy='28' rx='8' ry='11'/%3E%3Cellipse cx='42' cy='52' rx='8' ry='11'/%3E%3Cellipse cx='30' cy='40' rx='11' ry='8'/%3E%3Cellipse cx='54' cy='40' rx='11' ry='8'/%3E%3C/g%3E%3Ccircle cx='42' cy='40' r='7' fill='%23FFDE7A'/%3E%3Cg fill='%23D9EBFF'%3E%3Ccircle cx='150' cy='70' r='13'/%3E%3Ccircle cx='168' cy='64' r='16'/%3E%3Ccircle cx='185' cy='71' r='11'/%3E%3Crect x='140' y='72' width='53' height='12' rx='6'/%3E%3C/g%3E%3Cpath d='M70 150l5.5 12 13 1.6-9.6 9.2 2.6 12.9L70 179l-11.5 6.7 2.6-12.9-9.6-9.2 13-1.6z' fill='%23FFE28A'/%3E%3Cpath d='M186 158c-4-5-12-4-12 3 0 7 12 14 12 14s12-7 12-14c0-7-8-8-12-3z' fill='%23FFD0C4'/%3E%3Ccircle cx='118' cy='20' r='4' fill='%23CFE8D8'/%3E%3Ccircle cx='216' cy='120' r='4.5' fill='%23FFD9A8'/%3E%3Ccircle cx='20' cy='196' r='4' fill='%23D8D2FF'/%3E%3Ccircle cx='120' cy='214' r='5' fill='%23FFCFE0'/%3E%3C/svg%3E");

  /* 문항 번호를 앉힐 조약돌 발자국 — 큰 돌(발바닥) 위에 작은 돌 다섯(발가락).
     숫자는 발바닥 한가운데(cy 26.5)에 오도록 .qi-no 에서 padding-top 으로 맞춘다. */
  --kid-foot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23FFDFB6' stroke='%23EFAE63' stroke-width='1.8'%3E%3Cellipse cx='8.5' cy='10' rx='4.3' ry='5.4' transform='rotate(-20 8.5 10)'/%3E%3Cellipse cx='16.5' cy='6.6' rx='3.5' ry='4.5' transform='rotate(-7 16.5 6.6)'/%3E%3Cellipse cx='23.6' cy='6.4' rx='3.2' ry='4.2' transform='rotate(5 23.6 6.4)'/%3E%3Cellipse cx='29.8' cy='8.2' rx='2.8' ry='3.6' transform='rotate(15 29.8 8.2)'/%3E%3Cellipse cx='34.8' cy='11.4' rx='2.4' ry='3.1' transform='rotate(24 34.8 11.4)'/%3E%3C/g%3E%3Cellipse cx='20' cy='26.5' rx='12.6' ry='11.2' transform='rotate(-6 20 26.5)' fill='%23FFD08F' stroke='%23EFAE63' stroke-width='1.8'/%3E%3C/svg%3E");

  /* 문항 카드 테두리 — 색색의 기울어진 둥근 사각형과 점이 번갈아 도는 액자.
     border-image 로 네 변에 반복(round)해 두르므로 카드 길이가 달라도 맞아떨어진다.
     네 변에 각각 사각형 1 + 점 1 을 넣어, 반복될 때 사각형·점이 고르게 번갈아 나온다. */
  --kid-frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg%3E%3Crect x='-9' y='-9' width='18' height='18' rx='5' fill='%23D9584F' transform='translate(13,13) rotate(-8)'/%3E%3Crect x='-9' y='-9' width='18' height='18' rx='5' fill='%238E6BB5' transform='translate(87,13) rotate(7)'/%3E%3Crect x='-9' y='-9' width='18' height='18' rx='5' fill='%23E07B45' transform='translate(13,87) rotate(6)'/%3E%3Crect x='-9' y='-9' width='18' height='18' rx='5' fill='%2363B36B' transform='translate(87,87) rotate(-7)'/%3E%3Crect x='-9' y='-9' width='18' height='18' rx='5' fill='%23F0C24B' transform='translate(62,13) rotate(-10)'/%3E%3Crect x='-9' y='-9' width='18' height='18' rx='5' fill='%236FC0B8' transform='translate(87,62) rotate(9)'/%3E%3Crect x='-9' y='-9' width='18' height='18' rx='5' fill='%235B8FD4' transform='translate(38,87) rotate(-6)'/%3E%3Crect x='-9' y='-9' width='18' height='18' rx='5' fill='%2363B36B' transform='translate(13,38) rotate(8)'/%3E%3C/g%3E%3Cg fill='%23C0504D'%3E%3Ccircle cx='38' cy='13' r='3.6'/%3E%3Ccircle cx='87' cy='38' r='3.6'/%3E%3Ccircle cx='62' cy='87' r='3.6'/%3E%3Ccircle cx='13' cy='62' r='3.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── 브라우저 테두리 영역 ──────────────────────────
   셸(1080px) 바깥으로 남는 좌우 여백에 무늬가 깔린다. */
[data-skin="child"] body{
  background-color:#EAF4FF;
  background-image:var(--kid-tile);
  background-repeat:repeat;
  background-size:240px 240px;
}
[data-skin="child"] .shell{
  box-shadow:0 0 60px -14px rgba(120,90,60,.35);
}

/* ── 문항 카드 ────────────────────────────────────
   무늬는 바깥 배경과 그림 액자에만 둔다. 카드 안은 비워 글을 읽기 편하게. */
[data-skin="child"] .qitem{
  border:2.5px solid #FFE3CC;
  background-color:#fff;
  box-shadow:0 12px 26px -16px rgba(194,84,10,.4);
}
[data-skin="child"] .qitem.answered.correct{border-color:#A9E3CB}
[data-skin="child"] .qitem.answered.wrong{border-color:#FBC4C4}

/* ── 둥근 서체 — 읽는 글에만 적용한다 ────────────
   숫자·작은 라벨은 Pretendard 로 남겨 또렷함을 지킨다. */
[data-skin="child"] .qi-stem,
[data-skin="child"] .choice .txt,
[data-skin="child"] .oxbtn .cap,
[data-skin="child"] .qi-area,
[data-skin="child"] .ex-body dd,
[data-skin="child"] .appbar-brand .name,
[data-skin="child"] .rp-head h1,
[data-skin="child"] .rp-sec > h2,
[data-skin="child"] .rs-sec-head h2{
  font-family:"Jua","Pretendard","Apple SD Gothic Neo",sans-serif;
  font-weight:400;
  letter-spacing:0;
}
[data-skin="child"] .qi-stem{line-height:1.62}

/* 번호는 조약돌 발자국 배지로.
   padding-top 10px 을 주면 가운데 정렬 기준이 아래로 5px 내려가
   숫자가 발가락이 아니라 발바닥 한가운데에 앉는다.
   글자색 #6B3405 는 발바닥 색 위에서 대비 6.2:1. */
[data-skin="child"] .qi-no{
  width:40px;height:40px;border-radius:0;background:none;
  background-image:var(--kid-foot);
  background-size:contain;background-position:center;background-repeat:no-repeat;
  padding-top:10px;
  color:#6B3405;
  animation:kidPop .6s var(--ease-out) both;
}
[data-skin="child"] .qi-area{
  background:var(--kid-soft);color:var(--kid-ink);
  border:1.5px solid #FBDCC2;
}

/* ── 그림 액자 ────────────────────────────────────
   색색의 둥근 사각형과 점이 번갈아 도는 테두리를 그림 둘레에 두른다.
   background-clip:padding-box 라야 그림 바탕이 액자 안쪽에서 멈추고,
   도형 사이 빈 곳으로 카드 바탕이 비쳐 액자처럼 보인다.
   border-image 를 쓰면 border-radius 가 무시되므로 0 으로 둔다. */
[data-skin="child"] .qi-figure{
  border:18px solid transparent;
  border-image:var(--kid-frame) 26 round;
  border-radius:0;
  background-color:#FFF3E6;
  background-clip:padding-box;
}
[data-skin="child"] .scene-cap{background-color:#FFFBF5}
[data-skin="child"] .scene-play{background:#fff;border-color:#FBDCC2;color:var(--kid-ink)}

/* ── 보기 ─────────────────────────────────────── */
[data-skin="child"] .choice{
  border:2.5px solid #FFE6D2;background:#FFFDFA;
  min-height:64px;
}
[data-skin="child"] .choice .key{
  width:32px;height:32px;border-radius:50%;
  background:var(--kid-soft);color:var(--kid-ink);
}
[data-skin="child"] .choice:hover:not(:disabled){
  border-color:var(--kid);background:#FFF8F2;transform:translateY(-2px);
}
[data-skin="child"] .choice:active:not(:disabled){transform:scale(.98)}

[data-skin="child"] .oxbtn .sym{width:96px;height:96px}
[data-skin="child"] .oxbtn .cap{font-weight:800}

/* ── 해설 ─────────────────────────────────────── */
[data-skin="child"] .qi-explain{background-color:#FFFBF5;border-color:#F6E3CE}
[data-skin="child"] .qi-explain.is-wrong{background-color:#FFF7F7}
[data-skin="child"] .ex-play{border-color:#FBDCC2;color:var(--kid-ink)}

/* ── 헤더 · 하단 독 ───────────────────────────── */
[data-skin="child"] .appbar.solid{background:#FFF7EC}
[data-skin="child"] .qstat{background:#5A3210}
[data-skin="child"] .qs.done .qs-num{color:var(--kid-sun)}
[data-skin="child"] .btn-primary{
  background:linear-gradient(135deg,#FFA45C,#E0670F);
  box-shadow:0 16px 34px -16px rgba(194,84,10,.75);
}

/* ── 결과지 ───────────────────────────────────── */
[data-skin="child"] .rp-head{border-bottom-color:var(--kid-ink)}
[data-skin="child"] .secno{background:var(--kid-ink)}
[data-skin="child"] .omr-n{background:#FFF3E6}

/* ── 움직임 — 흥미 유발(지침 1) ───────────────── */
[data-skin="child"] .qitem{animation:kidIn .5s var(--ease-out) both}
@keyframes kidIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to  {opacity:1;transform:none}
}
[data-skin="child"] .qi-no{animation:kidPop .6s var(--ease-out) both}
@keyframes kidPop{
  0%  {transform:scale(.4) rotate(-18deg)}
  55% {transform:scale(1.18) rotate(6deg)}
  100%{transform:scale(1) rotate(0)}
}
[data-skin="child"] .choice.is-correct{animation:kidYay .55s var(--ease-out)}
@keyframes kidYay{
  0%{transform:scale(1)} 40%{transform:scale(1.04)}
  70%{transform:scale(.99)} 100%{transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  [data-skin="child"] .qitem,
  [data-skin="child"] .qi-no,
  [data-skin="child"] .choice.is-correct{animation:none}
}
@media print{
  [data-skin="child"] body{background-image:none}
}