/* ─────────────────────────────────────────────────────────────────────────────
   메이플 테마 (2026-10, 미리보기 갈래)

   공통 이름 포털의 «옷». 학원마다 바뀌는 것(대표 색 --brand · 로고 · 마스코트)은
   그대로 두고, 그 밖의 바탕 · 글자색 · 모서리 · 그림자 · 장식만 따뜻한 메이플 결로
   바꿉니다. 이 파일 하나를 빼면 예전 모습으로 돌아갑니다(모든 화면이 style.css /
   teacher.css 다음에 이 파일을 읽습니다).

   크기와 여백은 건드리지 않습니다 -- 가로 태블릿(893×534)에서 활동 화면이 한 장에
   들어가도록 줄여 둔 규칙들이 그대로 살아 있어야 합니다. 바꾸는 것은 색 · 모서리 ·
   그림자 · 글자 굵기 · 배경 장식뿐입니다.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* 종이 같은 크림 바탕, 갈색이 도는 글자 -- 회색 «앱» 에서 따뜻한 «교실» 로 */
  --bg: #fbf7f1;
  --tint: #f7f1e8;
  --card: #ffffff;
  --ink: #2a2420;
  --ink-soft: #6e645b;
  --line: #ece4d8;
  --line-soft: #f3ede4;
  --line-strong: #ddd2c3;
  --radius: 18px;
  --r-sm: 12px;
  --r-lg: 24px;
  /* 카드 안의 판(보기 · 할 일 줄 · 방 타일 · 코스 한 줄 · 새 도장 띠)은 모두 16px.
     메이플은 .choice · .ms · .room .tile 을 16 으로 두었는데, 시험 화면의 보기(.card.play .choice)
     · 코스 줄 · 새 도장 띠는 style.css 의 14 가 이겨서 같은 화면 안에서 14 와 16 이 섞였습니다. */
  --r-md: 16px;
  /* 올렸을 때의 테두리 -- 푸른 회색(#b9c0c9) 대신 크림에 맞는 갈색 회색 */
  --line-hover: #cbbfae;
  --shadow: 0 1px 2px rgba(90, 55, 20, .05), 0 8px 22px -12px rgba(90, 55, 20, .16);
  --shadow-lift: 0 10px 30px -12px rgba(90, 55, 20, .28);
  --maple-orange: #f2994a;
  --maple-leaf: #3f9a6b;
  /* 메이플 잎 한 장 (장식용, 색은 mask 로 칠합니다) */
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l1.7 3.9 3.2-1.4-.7 3.7 3.7-.5-2 3.2 3.6 1.6-3.9 2 1.1 3.1-3.7-.9-1.1 3.3-2.2-2.6v5.6h-1.8v-5.6l-2.2 2.6-1.1-3.3-3.7.9 1.1-3.1-3.9-2 3.6-1.6-2-3.2 3.7.5-.7-3.7 3.2 1.4z'/%3E%3C/svg%3E");
}

/* ---- 바탕: 위쪽에 대표 색과 단풍 주황이 아주 옅게 번집니다 ---- */
body {
  background:
    radial-gradient(1100px 420px at 8% -12%, rgba(var(--brand-rgb), .08), transparent 62%),
    radial-gradient(900px 380px at 100% -6%, rgba(242, 153, 74, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
}

/* ---- 머리글: 크림 유리, 학원 이름 앞에 잎 한 장 ---- */
header.bar {
  background: rgba(251, 247, 241, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
header.bar .brand .wm b { color: var(--brand); }
header.bar .brand .wm { position: relative; }
header.bar .brand .wm::before {
  content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 6px; flex: none;
  background: var(--brand); -webkit-mask: var(--leaf) center / contain no-repeat; mask: var(--leaf) center / contain no-repeat;
  align-self: center; transform: rotate(-12deg);
}
header.bar .who { background: #fff; border-color: var(--line); }

/* ---- 카드: 둥글게, 따뜻한 그림자, 얇은 테두리 ---- */
.card, .room, .todaycard, .stat, .subcard, .sheet-panel {
  border: 1px solid var(--line);
}
.card, .room, .todaycard { box-shadow: var(--shadow); }
h2 { font-weight: 800; letter-spacing: -0.03em; }
h3 { font-weight: 800; }

/* ---- 단추: 알약 모양. 대표 단추는 위가 살짝 밝은 결 ---- */
button { border-radius: 999px; }
button:where(:not([class]), .wide:not(.ghost)) {
  background: linear-gradient(180deg, var(--brand-lift), var(--brand-btn));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px -6px rgba(var(--brand-rgb), .7);
}
/* :hover 는 마우스 화면에서만 -- 태블릿은 손가락 뗀 자리에 남아, 그 자리에 뜬 다음 화면의 대표 단추
   («눌러서 말하기» 등)가 진한 색으로 칠해져 있었습니다(style.css 의 button:hover 와 같은 까닭). */
@media (hover: hover) {
  button:where(:not([class]), .wide:not(.ghost)):hover { background: var(--brand-dark); }
}
button.ghost { background: #fff; border-color: var(--line-strong); }
button.mini { border-radius: 999px; border-color: var(--line-strong); }
button.mini.solid { background: var(--brand-btn); }
a.go { border-radius: 999px; background: linear-gradient(180deg, var(--brand-lift), var(--brand-btn));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 18px -8px rgba(var(--brand-rgb), .75); }
@media (hover: hover) { a.go:hover { background: var(--brand-dark); } }
/* «다 했어요» 초록 단추(.go.done)는 위 두 줄의 대표색 그림자 · 올렸을 때 대표색을 그대로 받아,
   초록 단추 밑에 분홍 빛이 번지고 마우스를 올리면 분홍으로 바뀌었습니다. 초록 한 집안으로. */
a.go.done, a.go.done:hover { background: var(--ok);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 18px -8px rgba(39, 122, 78, .6); }

/* ---- 고르는 것들: 알약 받침 ---- */
/* 받침은 16px -- 999px(알약)로 하면 칩이 두세 줄로 접히는 폰에서 둥근 덩어리가 됩니다 */
.chips, .bubble-row { border-radius: 16px; background: var(--tint); border-color: var(--line); }
.chips .chip, .bubble { border-radius: 999px; }
.chips .chip.on, .bubble.on { color: var(--brand-ink); box-shadow: 0 1px 2px rgba(90, 55, 20, .10), 0 0 0 1px var(--line); }
/* 고르는 칩에 마우스를 올렸을 때의 옅은 칠. style.css 는 푸른 검정(16, 24, 40)이라 크림 받침 위에서
   혼자 차가운 회색으로 떴습니다. 같은 세기(.05)로 갈색 기운만 바꿉니다. */
.chips .chip:not(.on):hover, .bubble:not(.on):hover { background: rgba(90, 55, 20, .06); }
.choice { border-radius: 16px; border-color: var(--line); }
/* 마우스가 있는 화면에서만(style.css 와 같은 까닭: 터치에서는 :hover 가 남습니다).
   고른 보기(.picked)는 올려도 분홍 그대로 -- 예전에는 이 줄이 .picked 의 분홍을 덮어서
   아이가 방금 고른 것이 거의 안 보였습니다. */
@media (hover: hover) {
  .choice:hover { border-color: var(--line-strong); background: #fffdfa; }
  .choice.picked:hover { background: var(--brand-soft); border-color: var(--brand); }
}
.daygrid .day { border-radius: 12px; }

/* ---- 입력 칸 ---- */
input, select, textarea { border-radius: 12px; border-color: var(--line-strong); background: #fff; }
input:hover, select:hover { border-color: var(--line-hover); }

/* ---- 표 ---- */
th { background: var(--tint); color: var(--ink-soft); }
tbody tr:hover > td { background: #fffaf3; }
.tbl { border-color: var(--line); }

/* ---- 알림 줄 ---- */
.msg.info { background: #fff6ec; border-color: #f6dcc0; color: #8a4b12; }
.msg.info.hw-banner { background: rgba(var(--brand-rgb), .07); border-color: rgba(var(--brand-rgb), .25); color: var(--brand-ink); }

/* ══════════════════ 아이 화면 ══════════════════ */

/* 오늘의 공부: 오른쪽 위 모서리에 단풍잎 세 장이 떨어집니다 */
.todaycard { overflow: hidden; background: linear-gradient(180deg, #fffaf4, #fff 46%); }
.todaycard::after {
  content: ''; position: absolute; right: -14px; top: -18px; width: 150px; height: 120px; pointer-events: none;
  background:
    var(--maple-orange);
  -webkit-mask: var(--leaf) 92px 14px / 44px 44px no-repeat, var(--leaf) 54px 52px / 26px 26px no-repeat, var(--leaf) 112px 70px / 20px 20px no-repeat;
  mask: var(--leaf) 92px 14px / 44px 44px no-repeat, var(--leaf) 54px 52px / 26px 26px no-repeat, var(--leaf) 112px 70px / 20px 20px no-repeat;
  opacity: .16; transform: rotate(14deg);
}
.today-t b { font-weight: 800; }
.ms { border-radius: 16px; border-color: var(--line); background: #fff; }
.ms.done, .ms[data-done="1"] { background: #f3faf5; }

/* 방(단어 · 듣기 · 읽기): 흰 카드, 위에 방 색 띠 */
.room { border-radius: var(--r-lg); background: #fff; }
.room .tile { border-radius: 16px; border: 1px solid var(--line); background: #fffdfa; }
.room .tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.tile .icon-chip, .icon-chip { border-radius: 14px; }

/* 결과 화면의 점수 */
.score .n { letter-spacing: -0.04em; }

/* 숙제 줄 · 다음 할 것 */
.hw-row.next { background: rgba(var(--brand-rgb), .06); }

/* 로그인: 왼쪽 큰 이름 밑에 잎이 흩날립니다 */
.login-side { position: relative; }
.login-brand .wm b { color: var(--brand); }

/* 아래 탭 막대(폰) */
.tabbar { background: rgba(255, 252, 247, .94); border-top-color: var(--line); }

/* ══════════════════ 선생님 화면 ══════════════════ */

/* 왼쪽 메뉴: 고른 줄은 흰 카드 + 대표 색 막대 */
.tnav button.active {
  background: #fff; box-shadow: var(--shadow); border-color: var(--line);
  position: relative;
}
@media (min-width: 861px) {
.tnav button.active::before {
  content: ''; display: block; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
  background: var(--brand);
}
}
.tnav button.active svg { color: var(--brand); }
/* 화면 갈래(.subnav: 숙제 | 채점 같은 밑줄 탭)는 빼 둡니다. 여기서 함께 칠했더니 밑줄 한 줄짜리 줄에
   흰 바탕 · 둥근 모서리만 얹혀, 아래 테두리만 있는 반쪽 상자로 보였습니다(teacher.css 의 .subnav). */
.sectabs:not(.subnav) { background: rgba(255, 255, 255, .6); border-color: var(--line); border-radius: 16px; }
.sectabs:not(.subnav) .sectab { border-radius: 999px; }
.sectabs:not(.subnav) .sectab.on { box-shadow: 0 1px 2px rgba(90, 55, 20, .10), 0 0 0 1px var(--line); }
.stat { background: #fffdfa; }
.td-todo .td-n { border-radius: 12px; }
.sheet { background: rgba(42, 30, 20, .36); }
.sheet-head { background: #fffaf4; }

/* 로그인(가로 태블릿): 왼쪽 학원 이름 둘레에 단풍잎이 흩날립니다 */
@media (min-width: 760px) and (max-height: 820px) {
  body:has(#loginCard) .login-side { position: relative; }
  body:has(#loginCard) .login-side::before {
    content: ''; position: absolute; inset: -40px -10px; pointer-events: none; z-index: -1;
    background: var(--maple-orange); opacity: .14;
    -webkit-mask: var(--leaf) 8% 12% / 46px 46px no-repeat, var(--leaf) 86% 4% / 30px 30px no-repeat,
      var(--leaf) 92% 78% / 52px 52px no-repeat, var(--leaf) 4% 88% / 26px 26px no-repeat, var(--leaf) 60% 96% / 20px 20px no-repeat;
    mask: var(--leaf) 8% 12% / 46px 46px no-repeat, var(--leaf) 86% 4% / 30px 30px no-repeat,
      var(--leaf) 92% 78% / 52px 52px no-repeat, var(--leaf) 4% 88% / 26px 26px no-repeat, var(--leaf) 60% 96% / 20px 20px no-repeat;
  }
}