/* 사이트 공통 (숲속 그림책): 색 토큰, 글 페이지 상단바·이전/다음(eli5- 접두사), 메인 페이지(.home) */
:root {
  --site-bg: #FBF6EA;
  --site-paper: #FFFDF7;
  --site-ink: #3A2E26;
  --site-muted: #6E6052;
  --site-line: #E9DFCB;
  --site-sky: #DCEEF5;
  --site-hill: #A9CFA0;
  --site-grass: #6E9F7A;
  --site-tree: #5E8F6B;
  --site-trunk: #9C7552;
  --site-sun: #FBD57A;
  --site-robot: #F2B544;
  --site-cheek: #E8846B;
  --site-cta: #3F7A55;
  --site-cta-ink: #FFFDF7;
  --site-f-display: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --site-f-body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --site-bg: #1E2620; --site-paper: #27322A; --site-ink: #F3EEDF; --site-muted: #B9B29E; --site-line: #3A473D;
  --site-sky: #22394A; --site-hill: #3E5E46; --site-grass: #2F4A37; --site-tree: #4E7A5B; --site-trunk: #7A5C40;
  --site-sun: #F2DFA0; --site-robot: #F2B544; --site-cheek: #E8846B; --site-cta: #8CCB9C; --site-cta-ink: #1E2620;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --site-bg: #1E2620; --site-paper: #27322A; --site-ink: #F3EEDF; --site-muted: #B9B29E; --site-line: #3A473D;
  --site-sky: #22394A; --site-hill: #3E5E46; --site-grass: #2F4A37; --site-tree: #4E7A5B; --site-trunk: #7A5C40;
  --site-sun: #F2DFA0; --site-robot: #F2B544; --site-cheek: #E8846B; --site-cta: #8CCB9C; --site-cta-ink: #1E2620;
  color-scheme: dark }

/* 편마다 색: --c 글자, --c-soft 바탕, --c-main 그림 */
.t-basics   { --c: #2F5E40; --c-soft: #E3EFE2; --c-main: #A9CFA0; }
.t-practice { --c: #7A5408; --c-soft: #FCEBC4; --c-main: #F2B544; }
.t-advanced { --c: #9A3E28; --c-soft: #F9DED6; --c-main: #E8846B; }
.t-appendix { --c: #2A5F82; --c-soft: #DCEEF5; --c-main: #9CC9E3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-basics   { --c: #A8DDB5; --c-soft: #2C4434; --c-main: #6E9F7A; }
  :root:not([data-theme="light"]) .t-practice { --c: #F5D27A; --c-soft: #4A3A15; --c-main: #D9A030; }
  :root:not([data-theme="light"]) .t-advanced { --c: #F5B4A2; --c-soft: #4A2C24; --c-main: #C9654A; }
  :root:not([data-theme="light"]) .t-appendix { --c: #A8D3EE; --c-soft: #22394A; --c-main: #5E9BC2; } }
:root[data-theme="dark"] .t-basics   { --c: #A8DDB5; --c-soft: #2C4434; --c-main: #6E9F7A; }
:root[data-theme="dark"] .t-practice { --c: #F5D27A; --c-soft: #4A3A15; --c-main: #D9A030; }
:root[data-theme="dark"] .t-advanced { --c: #F5B4A2; --c-soft: #4A2C24; --c-main: #C9654A; }
:root[data-theme="dark"] .t-appendix { --c: #A8D3EE; --c-soft: #22394A; --c-main: #5E9BC2; }

.eli5-chip { display: inline-block; padding: 4px 14px; border-radius: 999px; font-family: var(--site-f-display); font-size: 15px; background: var(--c-soft); color: var(--c); }

/* ---------- 글 페이지의 상단바와 이전/다음 ---------- */
.eli5-bar, .eli5-pager { font-family: var(--site-f-body); font-size: 15px; line-height: 1.4; color: var(--site-ink); box-sizing: border-box; }
.eli5-bar *, .eli5-pager * { box-sizing: border-box; }
.eli5-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--site-paper); border-bottom: 3px solid var(--site-line);
}
.eli5-bar-in {
  max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  padding: 12px max(16px, env(safe-area-inset-left, 0px));
}
.eli5-bar a { color: inherit; text-decoration: none; }
.eli5-home { font-family: var(--site-f-display); font-size: 20px; }
.eli5-home:hover { color: var(--site-cta); }
.eli5-dots { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.eli5-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--site-line); }
.eli5-dots span.on { background: var(--c-main); }
.eli5-dots span.now { background: var(--c); }
.eli5-pager {
  max-width: 1000px; margin: 0 auto; padding: 24px 16px 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.eli5-pager a {
  display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; border-radius: 24px;
  background: var(--site-paper); box-shadow: 0 0 0 3px var(--site-line) inset; color: var(--site-ink); text-decoration: none;
}
.eli5-pager a.eli5-next { text-align: right; grid-column: 2; background: var(--site-cta); color: var(--site-cta-ink); box-shadow: none; }
.eli5-pager a:hover { transform: translateY(-2px); }
.eli5-pager a { transition: transform .15s; }
.eli5-pager small { font-size: 14px; opacity: .85; }
.eli5-pager strong { font-family: var(--site-f-display); font-weight: 400; font-size: 21px; }
@media (max-width: 560px) {
  .eli5-pager { grid-template-columns: 1fr; }
  .eli5-pager a.eli5-next { grid-column: auto; }
  .eli5-dots span { width: 9px; height: 9px; }
}

/* ---------- 메인 페이지 ---------- */
body.home { margin: 0; background: var(--site-bg); color: var(--site-ink); font-family: var(--site-f-body); font-size: 18px; line-height: 1.65; }
.home a { color: inherit; text-decoration: none; }
.home h1, .home h2, .home h3 { font-family: var(--site-f-display); font-weight: 400; margin: 0; line-height: 1.2; text-wrap: balance; }
.home p { margin: 0; }
.home .in { max-width: 1180px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); box-sizing: border-box; }
.home .muted { color: var(--site-muted); }

.home .top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-block: 20px; }
.home .logo { display: flex; align-items: center; gap: 10px; font-family: var(--site-f-display); font-size: 24px; }
.home .logo svg { width: 40px; height: 40px; flex: none; }
.home .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.home .logo .brand { font-size: 26px; color: var(--site-cta); }
.home .logo .sub { font-family: var(--site-f-body); font-size: 13px; color: var(--site-muted); }
.home .menu { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.home .pill { font-family: var(--site-f-display); padding: 8px 16px; border-radius: 999px; background: var(--c-soft); color: var(--c); }
.home .btn { font-family: var(--site-f-display); font-size: 19px; padding: 12px 24px; border-radius: 999px; min-height: 48px; box-sizing: border-box; display: inline-flex; align-items: center; }
.home .btn.main { background: var(--site-cta); color: var(--site-cta-ink); }
.home .btn.sub { background: var(--site-paper); box-shadow: 0 0 0 3px var(--site-line) inset; }
.home .btn:hover { transform: translateY(-2px); }
.home .btn { transition: transform .15s; }

.home .hero { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-block: 32px 56px; }
.home .hero-text { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.home .hero-text .tag { align-self: flex-start; }
.home .hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.18; }
.home .hero h1 em { font-style: normal; color: var(--site-cta); }
.home .hero .lead { font-size: 20px; color: var(--site-muted); max-width: 28em; }
.home .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home .hero-pic { flex: 1 1 380px; min-width: 0; }
.home .hero-pic svg { width: 100%; height: auto; display: block; }

.home .oneline { background: var(--site-paper); border-radius: 36px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 0 0 3px var(--site-line) inset; display: flex; flex-direction: column; gap: 22px; }
.home .oneline h2 { font-size: clamp(26px, 4vw, 40px); }
.home .oneline h2 em { font-style: normal; color: var(--site-cta); }
.home .compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.home .compare > div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.home .compare svg { width: 160px; height: auto; }
.home .compare b { font-family: var(--site-f-display); font-weight: 400; font-size: 22px; }
.home .compare .arrow { font-family: var(--site-f-display); font-size: 40px; color: var(--site-line); }

.home .section { padding-block: 72px 0; display: flex; flex-direction: column; gap: 28px; }
.home .section > h2 { font-size: clamp(30px, 4vw, 44px); text-align: center; }
.home .tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.home .track { background: var(--site-paper); border-radius: 32px; padding: 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 0 0 3px var(--c-soft) inset; scroll-margin-top: 16px; }
.home .track .pic { height: 150px; border-radius: 24px; background: var(--c-soft); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.home .track .pic svg { width: 200px; height: 140px; }
.home .track-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home .track-head h3 { font-size: 30px; color: var(--c); }
.home .track-head span { font-size: 15px; color: var(--site-muted); }
.home .track ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.home .track li a, .home .track li .soon { display: flex; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 14px; font-size: 16px; }
.home .track li a:hover { background: var(--c-soft); }
.home .track li .no { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--c-soft); color: var(--c); font-family: var(--site-f-display); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.home .track li .soon { color: var(--site-muted); }
.home .appendix { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; background: var(--c-soft); border-radius: 28px; padding: 20px 26px; }
.home .appendix b { font-family: var(--site-f-display); font-weight: 400; font-size: 22px; color: var(--c); }
.home .appendix a { font-family: var(--site-f-display); font-size: 19px; }
.home .appendix a:hover { color: var(--c); }

.home .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.home .steps > div { background: var(--c-soft); border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.home .steps .n { font-family: var(--site-f-display); font-size: 44px; line-height: 1; color: var(--c); }
.home .steps b { font-family: var(--site-f-display); font-weight: 400; font-size: 24px; }
.home .steps span { font-size: 16px; color: var(--site-muted); }

.home .foot { margin-top: 80px; background: var(--site-grass); color: #FFFDF7; }
.home .foot svg { display: block; width: 100%; height: 40px; background: var(--site-bg); }
.home .foot .in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 16px 40px; font-size: 15px; }
.home .foot b { font-family: var(--site-f-display); font-weight: 400; font-size: 20px; }

@media (max-width: 640px) {
  .home .compare { grid-template-columns: 1fr; }
  .home .compare .arrow { transform: rotate(90deg); }
}