/* 뚜벅수학·뚜벅한자와 같은 느낌으로 맞춘 공통 스킨 (2026-11-04). 색·글꼴·폭·둥글기만 조정하고 구조는 그대로 둬요. */
@font-face{font-family:'Pretendard Variable';src:url('/assets/fonts/PretendardVariable-sub.woff2') format('woff2');font-style:normal;font-weight:45 920;font-display:swap}
:root{--green:#0d604d;--deep:#084d3c;--ink:#173129;--muted:#52655d;--line:#dce8df;--bg:#fcfcf9;--mint:#e8f1eb;--font:'Pretendard Variable','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;font-family:var(--font)}
body,button,input,select,textarea{font-family:var(--font)}
h1,h2,h3,.brand strong,.grade-buttons a,.picker-print{font-family:Jua,'Noto Sans KR','Malgun Gothic',sans-serif}
.button{border-radius:10px}
.button.primary{background:var(--green);border-color:transparent}
.search-panel{border-radius:16px;padding:14px 16px;border-color:var(--line)}
.site-header{border-radius:19px;padding-top:8px;padding-bottom:8px;min-height:112px;border-bottom-color:#c8e8b5}
.hero{border-radius:22px;background:linear-gradient(135deg,#0c5745 2%,#0a664f 100%)}
.series-hero h1{font-size:39px}
.side-grade,.side-group summary{line-height:1.3}
.side-group summary strong,.side-group summary span{font-weight:800}
.side-grade{border-left:3px solid #bcd5c8;border-radius:7px;padding:8px}
.side-grade.grade-age3{background:#e1f5fa;border-left-color:#25a5c3}.side-grade.grade-age4{background:#fff2de;border-left-color:#cc8a32}.side-grade.grade-age5{background:#f9e7ee;border-left-color:#c64d78}
.side-grade.grade-g1{background:#f9e9e7;border-left-color:#e46a59}.side-grade.grade-g2{background:#fdeddc;border-left-color:#de8a36}.side-grade.grade-g3{background:#e8f5e7;border-left-color:#5aab67}
.side-grade.grade-g4{background:#e7f0f9;border-left-color:#5095d0}.side-grade.grade-g5{background:#edebfa;border-left-color:#8578cb}.side-grade.grade-g6{background:#f5e7f8;border-left-color:#ac66b9}
.side-grade[aria-current="page"]{box-shadow:inset 0 0 0 1px #96c4aa}
@media(min-width:901px){
 .site-header{max-width:1140px}
 .layout{max-width:1190px;padding:20px 25px 56px;grid-template-columns:220px minmax(0,1fr);gap:28px}
 .site-footer{max-width:1190px;padding-left:25px;padding-right:25px}
}

/* 하단 영역: 뚜벅수학과 같은 틀 */
.site-footer.mathfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin:42px auto 0;padding:22px 25px 95px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.9;color:var(--muted)}
.site-footer.mathfoot>div{flex:1 1 420px;max-width:720px}
.site-footer.mathfoot b{font-size:15px;font-weight:600;color:var(--green)}
.site-footer.mathfoot a{text-decoration:none;color:var(--green)}
.site-footer.mathfoot .fnav{display:flex;flex-wrap:wrap;gap:2px 14px;margin:8px 0 6px}
.site-footer.mathfoot .fnav a{font-size:14.5px;font-weight:700}
.site-footer.mathfoot .fnav a:hover,.site-footer.mathfoot .priv a:hover{text-decoration:underline}
.site-footer.mathfoot .priv{opacity:.85;text-wrap:balance;word-break:keep-all}
.site-footer.mathfoot .priv a{text-decoration:underline}
.site-footer.mathfoot .fbtn{flex:0 0 auto;align-self:flex-start;padding:11px 18px;border-radius:12px;box-shadow:0 0 0 1.5px var(--green);background:#fff;color:var(--green);font-weight:700;font-size:14px;line-height:1.5}
.site-footer.mathfoot .adm-link{flex-basis:100%;margin-top:2px;font-size:12px;color:var(--muted);opacity:.65}
.site-footer.mathfoot .adm-link:hover{opacity:1;text-decoration:underline}
@media(max-width:700px){.site-footer.mathfoot{display:block;padding:22px 17px 95px}.site-footer.mathfoot .fbtn{display:inline-block;margin-top:12px}.site-footer.mathfoot .adm-link{display:block;margin-top:8px}}
@media print{.site-footer.mathfoot{display:none!important}}

/* 뚜벅수학과 같은 화면 폭·색·버튼 */
@media(min-width:901px){html body .site-header{max-width:1320px}html body .layout{max-width:1320px;padding-left:0;padding-right:0;grid-template-columns:190px minmax(0,1fr);gap:28px}html body .site-footer.mathfoot{max-width:1320px;padding-left:0;padding-right:0}}
html body .site-header{background:linear-gradient(#fff8dc 0%,#f2f8da 55%,#ddefc6 100%);border-radius:18px}
html body .series-hero{background:linear-gradient(130deg,#104c3c 0%,#0c614b 100%);border:1px solid #d8ead7;border-radius:22px;box-shadow:0 12px 34px rgba(14,75,54,.13);padding:40px 46px}
html body .search-panel .search-line{position:relative;border:0;padding:0;background:none;display:block}
html body .search-panel .search-line input{width:100%;box-sizing:border-box;height:48px;min-height:48px;border:2px solid #b9ddc6;border-radius:12px;background:#fbfefa;color:#123c30;padding:10px 92px 10px 14px;font-size:17px}
html body .search-panel .search-line input:focus{outline:0;border-color:#0d604d}
html body .search-panel .search-line .button{position:absolute;right:6px;top:6px;min-height:36px;height:36px;padding:0 16px;border-radius:9px}
html body .grade-picker{padding:22px 24px}
html body .grade-buttons{grid-template-columns:34px repeat(3,minmax(0,1fr));gap:9px 8px;align-items:center}
html body .grade-buttons .gl{font-size:12px;color:var(--muted);font-weight:600}
html body .grade-buttons .gl-pre{grid-row:1;grid-column:1}
html body .grade-buttons .gl-ele{grid-row:2/4;grid-column:1}
html body .grade-buttons a,html body .grade-buttons a:first-child{grid-column:auto;height:48px;min-height:48px;padding:0 5px;border:0;border-radius:13px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--gb);color:var(--gc);box-shadow:inset 0 -4px 0 var(--gc),0 0 0 1px var(--gc)}
html body .grade-buttons a:hover{outline:0;filter:brightness(.97)}
html body .grade-buttons .grade-age3{--gb:#e3f3f7;--gc:#0e7490}
html body .grade-buttons .grade-age4{--gb:#fbf1dc;--gc:#a16207}
html body .grade-buttons .grade-age5{--gb:#fbe6ef;--gc:#be185d}
html body .grade-buttons .grade-g1{--gb:#fbe8e5;--gc:#c0392b}
html body .grade-buttons .grade-g2{--gb:#fcebd9;--gc:#b45309}
html body .grade-buttons .grade-g3{--gb:#e4f2e5;--gc:#2e7d32}
html body .grade-buttons .grade-g4{--gb:#e2eef9;--gc:#1d6fb8}
html body .grade-buttons .grade-g5{--gb:#e8e7f7;--gc:#4f46b5}
html body .grade-buttons .grade-g6{--gb:#f2e6f5;--gc:#8e3a9e}
/* 뚜벅수학·뚜벅한자와 같은 틀(큰 화면 951px~): 바깥 1320, 머리글 125, 왼쪽 메뉴 180, 간격 38 */
@media(min-width:951px){html body .site-header{max-width:1320px;min-height:125px;padding:8px 14px 8px 10px;margin-left:auto;margin-right:auto;box-sizing:border-box}html body .layout{max-width:1320px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;grid-template-columns:180px minmax(0,1fr);gap:38px;box-sizing:border-box}html body .site-footer.mathfoot{max-width:1320px}}
/* 큰 화면(951px~) 첫 화면 초록 영역을 한 화면에 (수학·한자 기준): 여백 30, 제목 36, 설명 15.5, 학년 버튼 38 */
@media(min-width:951px){html body .hero.series-hero{min-height:0;padding:30px 34px;align-items:center}html body .hero.series-hero h1{font-size:36px;line-height:1.2;margin:12px 0}html body .hero.series-hero .hero-lede{font-size:15.5px;line-height:1.5}html body .hero.series-hero .series-facts{margin:14px 0}html body .hero.series-hero .grade-picker{margin-top:14px;padding:14px 20px}html body .hero.series-hero .grade-picker p{margin-bottom:8px}html body .grade-buttons{gap:8px}html body .grade-buttons a,html body .grade-buttons a:first-child{height:38px;min-height:38px}html body .grade-picker .picker-print{height:30px;min-height:30px;margin-top:8px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}}
/* 뚜벅수학처럼: 뚜벅이는 흰 카드 없이 초록 위에, 아래엔 뾰족한 풀과 꽃 */
html body .hero.series-hero{background:linear-gradient(130deg,#104c3c 0%,#0c614b 100%);border-radius:22px}
html body .series-hero .hero-figure{background:none;box-shadow:none;border-radius:0;position:relative;color:#fff}
html body .hero-figure>img{mix-blend-mode:normal;position:relative;z-index:1;filter:drop-shadow(0 6px 8px #00000030)}
html body .hero-figure figcaption b{display:block;color:#ffe98a;font-size:22px;font-weight:800;line-height:1.2}
html body .hero-figure figcaption span{display:block;color:#dce8df;font-size:12px;margin-top:2px}
@media(min-width:951px){
html body .hero.series-hero{padding:30px 34px}
html body .series-hero .hero-figure{padding:0 0 8px;display:block}
html body .series-hero .hero-figure::before{content:"";position:absolute;left:50%;bottom:44px;width:330px;height:72px;transform:translateX(-50%);background:url('/assets/hero-grass.svg') center bottom/100% 100% no-repeat;z-index:0}
html body .hero-figure>img{width:300px;max-width:100%;height:auto;margin:0 auto -22px}
html body .hero.series-hero h1{font-size:40px}
html body .hero.series-hero .hero-kicker{font-size:13px;font-weight:500;color:#e4ece5}
html body .hero.series-hero .hero-lede{font-weight:450;color:#dce8df}
html body .hero.series-hero .series-facts{font-size:13px;color:#dce8df}
html body .hero.series-hero .series-facts b{font-size:14px;font-weight:900;color:#fff}
html body .hero.series-hero .grade-picker h2{font-size:18px}
html body .hero.series-hero .grade-picker p{font-size:12px}
html body .grade-buttons a,html body .grade-buttons a:first-child{font-size:14px}
}
@media(min-width:951px){html body .hero-figure figcaption{margin-top:14px;position:relative;z-index:2}html body .series-hero .hero-figure::before{bottom:58px}}
@media(min-width:951px){html body .hero-figure>img{width:340px}html body .series-hero .hero-figure::before{width:370px;bottom:60px}}
@media(max-width:950px){html body .series-hero .hero-figure::before{content:"";position:absolute;left:50%;bottom:48px;width:min(100%,260px);height:52px;transform:translateX(-50%);background:url('/assets/hero-grass.svg') center bottom/100% 100% no-repeat;z-index:0}html body .hero-figure>img{margin-bottom:-14px}}
html body .hero-figure figcaption{position:relative;z-index:2}
@media(max-width:950px){html body .series-hero .hero-figure::before{left:10px;transform:none;bottom:10px;width:140px;height:34px}html body .hero-figure>img{margin-bottom:0}}
@media(max-width:560px){html body .series-hero .hero-figure::before{left:8px;width:114px;height:30px;bottom:12px}}
/* 머리글 로고 뚜벅이: 배경 없이 풀 위에 앉힘 */
html body .brand{position:relative}
html body .brand img{mix-blend-mode:normal;position:relative;z-index:1;filter:drop-shadow(0 3px 3px #00000022)}
html body .brand::before{content:"";position:absolute;left:-2px;bottom:6px;width:100px;height:26px;background:url('/assets/hero-grass.svg') center bottom/100% 100% no-repeat;z-index:0}
@media(max-width:560px){html body .brand::before{width:66px;height:18px;bottom:8px}}
/* 글씨 크기·글꼴을 뚜벅수학·한자와 같게 */
@media(min-width:951px){
html body .brand strong{font-size:42px;line-height:42px}
html body .brand small{font-size:12px;font-weight:700;color:#2c6b3f;background:#fff;padding:5px 11px;border-radius:99px;line-height:12px}
html body .series a.si{font-size:13px;font-weight:700}
html body .sidebar #side-nav>a,html body .sidebar .side-group summary span{font-size:15px;font-weight:700;color:#173129;line-height:19.5px}
html body .sidebar #side-nav small{font-size:12px;font-weight:500;color:#52655d;line-height:19.2px;display:block}
html body .sidebar .side-grade strong{font-size:14px}
html body .sidebar .side-grade small{font-size:12px}
html body .sidebar .side-note b{font-size:13px}
html body .sidebar .side-note p{font-size:12px}
html body .search-panel label{font-size:15px;font-weight:800;color:#145a43}
html body .hero.series-hero .hero-lede{font-weight:450}
html body .hero-figure figcaption span{font-size:12px}
}
html body .hero.series-hero .grade-picker h2{font-family:'Pretendard Variable','Noto Sans KR',sans-serif;font-size:18px;font-weight:700;color:#52655d;display:inline;line-height:28.8px;margin:0}
html body .hero.series-hero .grade-picker>p{display:inline;margin:0 0 0 8px;font-size:12px;font-weight:400;color:#5f7067;line-height:19px}
html body .hero.series-hero .grade-picker .grade-buttons{margin-top:12px}
html body .grade-buttons .gl{font-size:13px;font-weight:700;color:#64746b}
html body .grade-buttons a,html body .grade-buttons a:first-child{font-family:'Pretendard Variable','Noto Sans KR',sans-serif;font-size:14px;font-weight:700}
html body .grade-picker .picker-print{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;height:42px;min-height:42px;margin-top:12px;padding:0 15px;border-radius:4px;background:#0d604d;color:#fff;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;font-size:14px;font-weight:700;text-decoration:none}

/* 공유 버튼 */
.site-footer .share-btn{margin:4px 0 8px;padding:8px 14px;border:1.5px solid var(--green);border-radius:10px;background:#fff;color:var(--green);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.site-footer .share-btn:hover{background:#f3faf6}