/* /study/* 공개 학습 페이지 공통 스타일 — 헤더·푸터·흑백(mono) 토글.
   페이지별 본문(.study-main 안쪽)은 각 페이지가 자체 CSS로 꾸민다.
   색·글꼴은 공개 사이트 디자인 토큰(사이트 개편 2·3차)과 같은 값 — 크림 바탕·흰 카드·#E6E0D4 테두리·네이비 강조·
   주 버튼 코랄. 오행 타일 색(--el-*)·정답/오답 색(--study-correct/wrong-*)은 기능 색이라 그대로 둔다. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
  --study-bg: #F7F3EC;
  --study-text: #2B2B2B;
  --study-muted: #6B6B6B;
  --study-border: #E6E0D4;
  --study-card-bg: #fff;
  --study-accent: #1F2A44;
  --study-accent-text: #fff;
  --study-primary: #F26B4E; /* 주 버튼(다음 문제·확인·원국 불러오기) — 흑백에서는 검정 */
  --study-primary-hover: #E35B3E;
  --study-title: #1F2A44;
  --study-sans: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --study-serif: 'Noto Serif KR', 'Batang', '바탕', serif;
  --study-correct-bg: #e4f8ec;
  --study-correct-text: #1a7a3c;
  --study-wrong-bg: #fdecec;
  --study-wrong-text: #b23a3a;
}

:root[data-theme="mono"] {
  --study-bg: #fff;
  --study-text: #111;
  --study-muted: #666;
  --study-border: #bbb;
  --study-card-bg: #fff;
  --study-accent: #111;
  --study-accent-text: #fff;
  --study-primary: #111;
  --study-primary-hover: #000;
  --study-title: #111;
  --study-correct-bg: #fff;
  --study-correct-text: #111;
  --study-wrong-bg: #fff;
  --study-wrong-text: #111;
}

/* ── 오행 파스텔(간지 타일용) — /admin/manse 모바일 만세력과 동일 배색 ── */
:root {
  --el-mok: #d7edd0;
  --el-hwa: #fbdfe4;
  --el-to: #faf0c8;
  --el-geum: #FAFAF7; /* 만세력(manse-wonguk.css의 --mx-geum 기본값)과 같은 값 */
  --el-geum-line: #cfd0d4;
  --el-su: #B8BCC4;
  --study-tile-font: -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; }

body.study-body {
  margin: 0;
  background: var(--study-bg);
  color: var(--study-text);
  font-family: var(--study-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.study-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--study-border);
}

.study-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.study-header-back {
  font-size: 12px;
  color: var(--study-muted);
  text-decoration: none;
  border: 1px solid var(--study-border);
  border-radius: 6px;
  padding: 3px 8px;
}
.study-header-back:hover { background: var(--study-border); }

.study-header-brand {
  font-size: 12.5px;
  color: var(--study-muted);
  letter-spacing: 0.02em;
}

.study-theme-toggle {
  background: none;
  border: 1px solid var(--study-border);
  color: var(--study-text);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.study-theme-toggle:hover { background: var(--study-border); }

.study-main {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}

.study-footer {
  text-align: center;
  padding: 14px 16px;
  border-top: 1px solid var(--study-border);
  font-size: 13px;
}

.study-footer a {
  color: var(--study-accent);
  text-decoration: none;
  font-weight: 600;
}
.study-footer a:hover { text-decoration: underline; }

@media (max-width: 360px) {
  .study-main { padding: 12px; }
  .study-header { padding: 8px 12px; }
}

/* ── 간지 타일(원광만세력식) — /admin/manse 모바일 만세력의 타일 스타일을 공유.
   페이지는 .study-tile에 오행 클래스(el-mok 등)만 얹고, 글꼴은 고딕 고정, 흑백은
   html[data-theme]로 전역 제어한다. ── */
.study-tile-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.study-tile-label { font-size: 11px; font-weight: 700; color: var(--study-muted); }
.study-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  padding: 12px 10px;
  border: 1px solid var(--study-border);
  border-radius: 10px;
  background: var(--study-card-bg);
}
.study-tile-han { font-size: 30px; font-weight: 700; line-height: 1; color: #000; font-family: var(--study-tile-font); }
.study-tile-kor { font-size: 12px; color: #555; font-family: var(--study-tile-font); }

.study-tile.el-mok  { background: var(--el-mok); }
.study-tile.el-hwa  { background: var(--el-hwa); }
.study-tile.el-to   { background: var(--el-to); }
.study-tile.el-geum { background: var(--el-geum); border-color: var(--el-geum-line); }
.study-tile.el-su   { background: var(--el-su); }

/* 흑백 모드: 유채색 0, 타일 배경 흰색 + 검은 테두리로만 구분(학습표 원칙) */
:root[data-theme="mono"] .study-tile {
  background: #fff;
  border: 2px solid #000;
}
:root[data-theme="mono"] .study-tile-kor { color: #000; }

@media (max-width: 360px) {
  .study-tile { min-width: 48px; padding: 8px 6px; gap: 1px; }
  .study-tile-han { font-size: 22px; }
  .study-tile-kor { font-size: 10px; }
}

/* ── "설정 먼저" 안내 띠(/study-setup-banner.js) — 제목 아래. 설정을 한 번 바꾸면 .study-setup-small로 한 줄만 남는다. ── */
.study-setup-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--study-accent);
  border-radius: 10px;
  background: #FBF8F2;
  color: var(--study-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.study-setup-banner:hover { filter: brightness(0.97); }
.study-setup-banner.study-setup-small {
  width: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--study-muted);
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: underline;
}
:root[data-theme="mono"] .study-setup-banner { background: #f2f2f2; color: #111; border: 2px solid #111; }
:root[data-theme="mono"] .study-setup-banner.study-setup-small { background: none; border: none; color: var(--study-muted); }

/* ── 사이트 톤 통일(사이트 개편 3차) — 연습 다섯 곳·허브 공통. 페이지 CSS보다 뒤에서 이기도록 선택자를 한 단계 높인다.
   기능 색(오행 타일·정답/오답·관계 짝 색)은 건드리지 않는다. ── */
body.study-body .study-header { background: var(--study-bg); padding: 12px 16px; }
body.study-body .study-header-brand { font-family: var(--study-serif); font-weight: 600; font-size: 15px; color: var(--study-title); letter-spacing: .01em; }
body.study-body .study-header-back,
body.study-body .study-theme-toggle {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px;
  border: 1.5px solid var(--study-accent); background: transparent; color: var(--study-accent); font-size: 13.5px; font-weight: 700; text-decoration: none;
}
body.study-body .study-header-back:hover,
body.study-body .study-theme-toggle:hover { background: rgba(31, 42, 68, .05); }
body.study-body .study-main { max-width: 520px; padding: 20px 16px 32px; }
body.study-body .study-footer { padding: 20px 16px; font-size: 14.5px; background: var(--study-bg); }
body.study-body .study-footer a { color: var(--study-primary); font-weight: 700; }
/* 연습 화면 제목(페이지 이름 줄) — 세리프 네이비 */
body.study-body .ss-title, body.study-body .hc-title, body.study-body .wg-title {
  font-family: var(--study-serif); font-weight: 600; font-size: 20px; color: var(--study-title); margin: 4px 0 14px;
}

/* 설정 패널 — 공개 페이지 카드(흰 바탕·1px 테두리·14px) */
body.study-body .ss-settings, body.study-body .hc-settings, body.study-body .wg-settings {
  background: var(--study-card-bg); border: 1px solid var(--study-border); border-radius: 14px; padding: 14px 16px;
}
body.study-body .wg-settings summary { font-size: 14px; font-weight: 700; color: var(--study-title); }
body.study-body .ss-settings select, body.study-body .hc-settings select, body.study-body .wg-settings-body select, body.study-body .hub-settings select {
  height: 40px; padding: 0 10px; font-size: 14.5px; border: 1px solid var(--study-border); border-radius: 10px; background: #fff; color: var(--study-text); font-family: inherit;
}
body.study-body select:focus, body.study-body input:focus, body.study-body textarea:focus { outline: none; border-color: var(--study-accent); box-shadow: 0 0 0 3px rgba(31, 42, 68, .12); }
body.study-body input[type="checkbox"], body.study-body input[type="radio"] { accent-color: var(--study-accent); }
body.study-body .hc-group, body.study-body .ss-help-body, body.study-body .hc-help-body, body.study-body .ss-hint-panel, body.study-body .hc-hint-panel,
body.study-body .wg-principle, body.study-body .w2-note, body.study-body .wg-pad { border-radius: 12px; }

/* 문제 카드 */
body.study-body .ss-card, body.study-body .hc-card { border-radius: 14px; }

/* 주 버튼(코랄 바탕 흰 글, 48px·10px) — 다음 문제·확인·불러오기. 흑백에서는 검정. */
body.study-body .ss-next-btn, body.study-body .hc-next-btn:not(.hc-next-small), body.study-body .hc-confirm-btn, body.study-body .wg-btn-primary {
  min-height: 48px; padding: 0 20px; border-radius: 10px; border: 1.5px solid var(--study-primary);
  background: var(--study-primary); color: #fff; font-size: 16px; font-weight: 700; font-family: inherit;
}
body.study-body .ss-next-btn:hover, body.study-body .hc-next-btn:not(.hc-next-small):hover, body.study-body .hc-confirm-btn:hover, body.study-body .wg-btn-primary:hover {
  opacity: 1; background: var(--study-primary-hover); border-color: var(--study-primary-hover);
}
body.study-body .ss-next-btn[hidden], body.study-body .hc-next-btn[hidden], body.study-body .hc-confirm-btn[hidden], body.study-body .wg-btn[hidden] { display: none; }

/* 보조 버튼(투명 바탕 네이비 테두리) — 도움말·힌트·다시 풀기·일반 동작 버튼 */
body.study-body .ss-help-toggle, body.study-body .hc-help-toggle, body.study-body .ss-hint-toggle, body.study-body .hc-hint-toggle,
body.study-body .hc-retry-btn, body.study-body .hc-next-btn.hc-next-small, body.study-body .wg-btn:not(.wg-btn-primary) {
  min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--study-accent);
  background: transparent; color: var(--study-accent); font-size: 14px; font-weight: 700; font-family: inherit;
}
body.study-body .ss-help-toggle:hover, body.study-body .hc-help-toggle:hover, body.study-body .ss-hint-toggle:hover, body.study-body .hc-hint-toggle:hover,
body.study-body .hc-retry-btn:hover, body.study-body .hc-next-btn.hc-next-small:hover, body.study-body .wg-btn:not(.wg-btn-primary):hover { background: rgba(31, 42, 68, .05); }

/* 고르기 버튼(답·탭·관계 종류) — 흰 카드, 고른 것 = 네이비 바탕 흰 글(이미 --study-accent) */
body.study-body .ss-answer-btn, body.study-body .hc-answer-btn, body.study-body .wg-tab, body.study-body .w2-kind, body.study-body .w3-dae-btn, body.study-body .wg-pad-btn, body.study-body .wg-stem-btn {
  border-radius: 10px; font-family: inherit;
}
body.study-body .ss-answer-btn:hover, body.study-body .hc-answer-btn:hover { border-color: var(--study-accent); }