/* ⚔️📘 수학 RPG · 개념 모험 — 배경, 미니맵, 퀘스트 결과 */

body {
  margin: 0;
  padding: 0 16px 60px;
  background: linear-gradient(160deg, #1b0f36, #4b2079 55%, #a13ec4);
  color: #fff;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

h1 { margin: 18px 0 6px; font-size: 32px; text-align: center; text-shadow: 3px 3px 0 rgba(0,0,0,.3); }
.설명 { margin: 0 auto 16px; max-width: 900px; font-size: 16px; text-align: center; color: #f3ddff; line-height: 1.5; }
.설명 a { color: #ffe98a; font-weight: 900; }
.작은글 { margin: 0 0 10px; font-size: 15px; opacity: .92; line-height: 1.5; }
.마을판 h2 { font-size: 21px; }

/* 지역 환영 */
.환영글 { font-size: 18px; line-height: 1.6; margin: 6px 0 12px; }
.장면줄 { display: grid; gap: 8px; margin-bottom: 12px; }
.장면 { padding: 10px 12px; background: rgba(255,255,255,.14); border-radius: 12px; font-size: 16px; font-weight: 700; }
.전투창 .환영글 { color: #2b2140; }
.닫기.링크 { text-decoration: none; display: inline-block; background: #ffe98a; color: #5a4500; box-shadow: 0 4px 0 #c9a817; }

/* 숙련도 */
.숙련줄 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.숙련칸 { padding: 10px; background: rgba(255,255,255,.12); border-radius: 12px; font-size: 15px; }
.숙련칸 b { display: block; margin-bottom: 4px; }
.숙련바 { height: 10px; background: rgba(0,0,0,.3); border-radius: 999px; overflow: hidden; }
.숙련바 span { display: block; height: 100%; background: linear-gradient(90deg,#7ef29b,#2fae63); }
.숙련칸 small { display: block; margin-top: 4px; opacity: .9; }
.숙련칸 a { color: #ffe98a; }

/* 미니맵 (좌표평면) */
.탐험판 .좌표 { color: #ffe98a; }
.미니맵 {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px;
  max-width: 560px; margin: 0 auto 12px; padding: 8px;
  background: rgba(0,0,0,.3); border-radius: 14px;
}
.칸 {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: rgba(255,255,255,.12); border-radius: 8px; position: relative;
}
.칸.축x { background: rgba(255,233,138,.22); }
.칸.축y { background: rgba(126,242,155,.22); }
.칸.축x.축y { background: rgba(255,255,255,.45); }
.칸.축x.축y::after { content: "0"; position: absolute; right: 3px; bottom: 1px; font-size: 10px; color: #2b2140; font-weight: 900; }
.칸.나{ background: #ffe98a; box-shadow: 0 0 0 3px #fff inset; }
@media (max-width: 600px) { .칸 { font-size: 19px; } }

.탐험아래 { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.패드 { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.패드 div { display: flex; gap: 4px; }
.패드 button {
  min-width: 78px; padding: 10px 8px; border: none; border-radius: 10px;
  background: #fff; color: #2b2140; font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #b9a9d8;
}
.탐험메모 { flex: 1; min-width: 200px; padding: 10px 12px; background: rgba(255,255,255,.14); border-radius: 12px; font-size: 15px; font-weight: 700; }

/* 전투 행동 */
.거리줄 { margin: 6px 0; font-size: 16px; font-weight: 800; }
.거리줄 .좋음 { color: #14663a; } .거리줄 .나쁨 { color: #8a2020; }
.행동줄 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.행동 {
  padding: 10px 8px; border: 3px solid #b18ce0; border-radius: 12px; background: #fff; color: #2b2140;
  font-size: 16px; font-weight: 900; cursor: pointer; text-align: center;
}
.행동 small { display: block; font-size: 12px; font-weight: 700; color: #6a5f85; margin-top: 2px; }
.행동:hover { background: #efe6ff; }
.행동:disabled { opacity: .45; cursor: not-allowed; }

/* 문제 상황 + 📜 퀘스트 결과 */
.상황글 { margin: 0 0 8px; font-size: 17px; line-height: 1.55; color: #3d3060; }
.퀘스트결과 {
  margin-top: 12px; padding: 14px; border-radius: 14px;
  background: #fff8e1; border: 3px solid #ffd54f; color: #2b2140;
}
.퀘스트결과.성공 { background: #edffef; border-color: #7ef29b; }
.퀘스트결과.실패 { background: #fff1f1; border-color: #ffb3b3; }
.결과제목 { font-size: 19px; font-weight: 900; margin-bottom: 6px; }
.결과정답 { font-size: 16px; margin-bottom: 8px; }
.풀이줄 { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px dashed rgba(0,0,0,.12); font-size: 16px; line-height: 1.5; }
.단계 {
  flex: none; min-width: 26px; height: 26px; border-radius: 999px; background: #4b2079; color: #fff;
  font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.원리줄 { margin-top: 8px; padding: 8px 10px; background: rgba(75,32,121,.1); border-radius: 10px; font-size: 15px; line-height: 1.5; }
.보상줄 { margin-top: 6px; font-size: 16px; font-weight: 800; }

@media (max-width: 600px) { h1 { font-size: 25px; } }

/* 🇨🇦 한글 밑 영어 줄 */
.영어줄 { margin: -4px 0 10px; font-size: 15px; line-height: 1.5; color: #5b2a86; }
.영어줄.질문 { font-weight: 800; font-size: 16px; margin-top: -6px; }
.듣기 { padding: 2px 8px; border: none; border-radius: 8px; background: #bfe4ff; color: #123a5c; font-size: 13px; font-weight: 800; cursor: pointer; vertical-align: middle; }

/* 🇨🇦 영어 부제 (한글 옆·밑 작은 영어) */
.영제목 { display: block; font-size: 16px; font-weight: 700; opacity: .85; margin-top: 4px; }
.설명 .영어줄 { display: block; margin-top: 6px; font-size: 15px; color: #ffe98a; font-weight: 700; }
small.영, i.영 { font-style: normal; font-weight: 700; font-size: 12px; opacity: .8; }
.탭 small.영 { display: block; font-size: 11px; }
.챕터 small.영, .스테이지 small.영 { display: block; color: #ffe98a; opacity: 1; }
.영어줄 { margin: -2px 0 10px; font-size: 15px; line-height: 1.5; color: #ffe98a; font-weight: 700; }
.전투창 .영어줄, .마을판 .전투창 .영어줄 { color: #5b2a86; }
.출처딱지{display:inline-block;margin:-2px 0 10px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}.출처딱지.뱅크{color:#315f4d;border:1px solid #9ed9c1;background:#e7f8ef}.출처딱지.게임{color:#604783;border:1px solid #d3c2e8;background:#f1eafa}.연결예제{margin-top:10px;padding:12px 14px;color:#3d3060;border:1px solid #d8c8ea;border-radius:12px;background:#fff}.연결예제>p{margin:7px 0;line-height:1.5}.연결예제 ol{margin:8px 0;padding:10px 10px 10px 30px;border-radius:9px;background:#f5f0fb}.연결예제 li{margin:4px 0;line-height:1.45}

/* 🍁 영어 줄 — 어두운 배경에선 노랗게, 흰 창 안에선 보라색 */
.영어줄 { margin: 2px 0 12px; font-size: 16px; font-weight: 800; line-height: 1.5; color: #ffe98a; }
.전투창 .영어줄 { color: #5b2a86; }
small.영, i.영 { font-size: 13px; opacity: .95; color: #ffe98a; }
.전투창 small.영, .전투창 i.영, .장비칸 small.영, .장비칸 i.영, .행동 i.영, .강화버튼 small.영 { color: #5b2a86; }

/* =====================================================================
   👶 아이 눈 기준 손질 (A안) — 글씨 크게 · 색 역할 4개 · 화면 단순하게
   색 역할: 노랑 = 강조/보상, 초록 = 정답/계속, 빨강 = 오답/위험, 파랑 = 누를 수 있는 것
   ===================================================================== */
:root { --강조: #ffe98a; --좋음: #2fae63; --좋음연: #d6ffe0; --나쁨: #e03c3c; --나쁨연: #ffdada; --누름: #2b86d9; --누름연: #e3f2ff; --글: #1f1a33; --글연: #5a5470; }
body { font-size: 18px; line-height: 1.55; }
h1 { font-size: 34px; }
.설명 { font-size: 18px; }
.설명 .영어줄 { font-size: 17px; }
.영제목 { font-size: 18px; }
.마을판 h2 { font-size: 23px; }
.작은글 { font-size: 17px; opacity: 1; }
.영어줄 { font-size: 17px; }

/* 라벨 최소 15px, 본문 18px, 버튼 18~20px */
.상태줄 span, .스테이지 small, .장비칸 p, .행동 small, .탐험메모, .패드 button, .결과정답, .원리줄, .보상줄, .숙련칸, .거리줄 { font-size: 16px !important; }
small.영, i.영 { font-size: 15px; }
.스테이지 { font-size: 18px; }
.장비칸 h3 { font-size: 21px; }
.강화버튼, .닫기 { font-size: 18px; padding: 12px 18px; }
.행동 { font-size: 19px; padding: 12px 10px; }
.보기 { font-size: 20px; padding: 16px 12px; min-height: 60px; }
.상황글 { font-size: 19px; }
.문제글 { font-size: 23px; }
.풀이줄 { font-size: 17px; }
.환영글 { font-size: 18px; }
.장면 { font-size: 17px; }
.전투로그 { font-size: 16px; }
.듣기 { font-size: 16px; padding: 5px 12px; }
.패드 button { min-width: 86px; padding: 12px 8px; }

/* 색 정리 — 보라 계열을 파랑(누름)·네 역할색으로 */
.전투창, .장비칸 { color: var(--글); }
.전투창 .영어줄, .전투창 small.영, .전투창 i.영, .장비칸 small.영, .장비칸 i.영, .행동 i.영 { color: var(--누름); }
.문제박스 { background: #f3f7ff; }
.보기, .행동 { border-color: var(--누름); background: #fff; }
.보기:hover, .행동:hover { background: var(--누름연); }
.보기.정답 { background: var(--좋음연); border-color: var(--좋음); }
.보기.오답 { background: var(--나쁨연); border-color: var(--나쁨); }
.행동 small { color: var(--글연); }
.닫기 { background: var(--누름연); color: #123a5c; box-shadow: 0 4px 0 #9fc6ea; }
.계속 { background: var(--좋음연); color: #14663a; box-shadow: 0 4px 0 #6fcf93; }
.강화버튼 { background: var(--강조); color: #4b3405; box-shadow: 0 3px 0 #d9b84a; }
.강화버튼:disabled { background: #ddd; color: #666; box-shadow: 0 3px 0 #aaa; }
.전투로그 { background: #f3f7ff; color: var(--글); }
.단계 { background: var(--누름); }
.원리줄 { background: var(--누름연); }
.퀘스트결과.성공 .결과제목 { color: #14663a; }
.퀘스트결과.실패 .결과제목 { color: #8a2020; }
.패드 button { box-shadow: 0 3px 0 #9fc6ea; color: #123a5c; }

/* 상태줄 단순화 — 6칸을 줄바꿈 없이 한 줄 핵심으로 */
.상태줄 { gap: 6px; }
.상태줄 span { padding: 8px 12px; }

/* 흰 창 넓히기 — 풀이를 읽는 영역 확보 */
.전투창 { max-width: 760px; padding: 22px 24px; }
.몬그림 { font-size: 72px; }

@media (max-width: 600px) {
  body { font-size: 17px; }
  h1 { font-size: 26px; }
  .문제글 { font-size: 20px; }
  .보기 { font-size: 18px; }
  .전투창 { padding: 16px; }
}