/* =========================================================================== MathLab — 고등학교 공통수학 웹교과서 공유 디자인 시스템 페이지 골격 + 인터랙션 위젯 스타일 + 대단원별 색 테마 사용법: 로 색 지정 =========================================================================== */ :root{ --ml-ink:#0a0e27; --ml-ink-soft:#232a4a; --ml-mut:#5a6179; --ml-paper:#fafbfd; --ml-card:#ffffff; --ml-ok:#059669; --ml-no:#dc2626; --ml-warn:#d97706; --ml-gold:#fbbf24; /* 기본 테마(보라=다항식) — data-unit으로 덮어씀 */ --ml-accent:#7c3aed; --ml-accent-2:#a78bfa; --ml-tint:#faf5ff; --ml-line:#ede9fe; } /* 공통수학1 */ body[data-unit="poly"] {--ml-accent:#7c3aed;--ml-accent-2:#a78bfa;--ml-tint:#faf5ff;--ml-line:#ede9fe} body[data-unit="eq"] {--ml-accent:#0891b2;--ml-accent-2:#22d3ee;--ml-tint:#ecfeff;--ml-line:#cffafe} body[data-unit="count"] {--ml-accent:#ea580c;--ml-accent-2:#fb923c;--ml-tint:#fff7ed;--ml-line:#fed7aa} body[data-unit="matrix"]{--ml-accent:#475569;--ml-accent-2:#94a3b8;--ml-tint:#f8fafc;--ml-line:#e2e8f0} /* 공통수학2 */ body[data-unit="coord"] {--ml-accent:#059669;--ml-accent-2:#34d399;--ml-tint:#ecfdf5;--ml-line:#d1fae5} body[data-unit="set"] {--ml-accent:#e11d48;--ml-accent-2:#fb7185;--ml-tint:#fff1f2;--ml-line:#fecdd3} body[data-unit="func"] {--ml-accent:#4f46e5;--ml-accent-2:#818cf8;--ml-tint:#eef2ff;--ml-line:#e0e7ff} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif; background:var(--ml-paper);color:var(--ml-ink);line-height:1.7;font-feature-settings:"tnum"} h1,h2,h3,h4{font-family:'Nanum Myeongjo','Noto Serif KR',serif;font-weight:800;letter-spacing:-.01em;line-height:1.25} .math,.ml-eq{font-family:'STIX Two Math','Nanum Myeongjo',serif} a{color:var(--ml-accent);text-decoration:none} /* ---------- HERO ---------- */ .ml-hero{position:relative;overflow:hidden;color:#fff;padding:5.5rem 1.5rem 3.5rem; background: radial-gradient(ellipse at 25% 30%,color-mix(in srgb,var(--ml-accent) 55%,transparent),transparent 60%), linear-gradient(135deg,#0a0e27 0%,#161c3f 70%,#0a0e27 100%)} .ml-hero-wrap{max-width:1100px;margin:0 auto;position:relative;z-index:2} .ml-crumb{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.74rem;letter-spacing:.12em;color:#aab4d0;margin-bottom:1.3rem} .ml-crumb a{color:inherit;opacity:.8}.ml-crumb a:hover{opacity:1;color:var(--ml-accent-2)} .ml-crumb .sep{opacity:.4} .ml-kicker{font-family:'STIX Two Math',serif;font-style:italic;color:var(--ml-accent-2);font-size:1.05rem;margin-bottom:.35rem} .ml-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;margin-bottom:.7rem} .ml-hero .ml-latin{font-family:'STIX Two Math',serif;font-style:italic;color:#cfd8ea;font-size:1.05rem;margin-bottom:1rem} .ml-hero .ml-lead{max-width:700px;color:#d2d8ea;font-size:1rem;line-height:1.85} .ml-hero .ml-eqdeco{position:absolute;font-family:'STIX Two Math',serif;font-style:italic;color:#fff;opacity:.06;pointer-events:none;user-select:none} /* ---------- STICKY TOC ---------- */ .ml-toc{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ml-paper) 92%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--ml-line);padding:.65rem 1.5rem} .ml-toc .wrap{max-width:1100px;margin:0 auto;display:flex;gap:1.1rem;overflow-x:auto;font-size:.82rem;font-weight:600} .ml-toc a{color:var(--ml-ink-soft);white-space:nowrap;padding:.2rem 0;border-bottom:2px solid transparent;transition:.2s} .ml-toc a:hover{color:var(--ml-accent);border-bottom-color:var(--ml-accent)} /* ---------- LAYOUT ---------- */ .ml-main{max-width:1100px;margin:0 auto;padding:3rem 1.5rem} .ml-sec{margin-bottom:4rem;scroll-margin-top:4.5rem} .ml-sec-tag{font-family:'STIX Two Math',serif;font-style:italic;font-size:.85rem;letter-spacing:.04em;color:var(--ml-accent);margin-bottom:.3rem} .ml-sec-head{margin-bottom:1.6rem;padding-bottom:.7rem;border-bottom:2px solid var(--ml-accent)} .ml-sec-head h2{font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--ml-ink)} .ml-sec-head .sub{font-family:'STIX Two Math',serif;font-style:italic;color:var(--ml-mut);font-size:1rem;margin-top:.2rem} .ml-lead{color:var(--ml-mut);max-width:760px;margin-bottom:1.4rem} /* ---------- CONCEPT / NOTE / STEPS ---------- */ .ml-concept{background:var(--ml-card);border:1px solid var(--ml-line);border-left:5px solid var(--ml-accent); padding:1.6rem 1.8rem;border-radius:12px;margin-bottom:1.4rem} .ml-concept h3{font-size:1.2rem;color:var(--ml-ink);margin-bottom:.7rem} .ml-def{background:var(--ml-tint);padding:1rem 1.2rem;border-radius:8px;margin:.7rem 0;border-left:3px solid var(--ml-accent)} .ml-note{padding:.7rem 1.1rem;background:#fffbeb;border-left:3px solid var(--ml-gold);font-size:.92rem; color:var(--ml-ink-soft);border-radius:6px;margin-top:.8rem} .ml-steps{display:grid;gap:.85rem;margin-top:1rem} .ml-step{display:flex;gap:1rem;align-items:flex-start;background:var(--ml-paper);border:1px solid var(--ml-line); padding:1rem 1.2rem;border-radius:10px} .ml-step-num{flex-shrink:0;width:2.1rem;height:2.1rem;background:var(--ml-ink);color:var(--ml-gold);border-radius:50%; display:flex;align-items:center;justify-content:center;font-family:'STIX Two Math',serif;font-style:italic;font-weight:700} .ml-step b{display:block;color:var(--ml-ink);margin-bottom:.25rem} .ml-step .calc{margin-top:.35rem;background:var(--ml-tint);color:var(--ml-accent);padding:.35rem .7rem;border-radius:6px;display:inline-block;font-size:.92rem} /* ---------- CARDS ---------- */ .ml-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0} .ml-card{background:var(--ml-card);border:1px solid var(--ml-line);border-top:4px solid var(--ml-accent); border-radius:12px;padding:1.3rem} .ml-card h4{font-size:1rem;margin-bottom:.5rem;color:var(--ml-ink)} .ml-card p{font-size:.88rem;color:var(--ml-mut)} .ml-card .big{font-family:'STIX Two Math',serif;font-style:italic;font-size:1.5rem;color:var(--ml-accent);margin-bottom:.4rem} /* ---------- EXAMPLE / ACCORDION ---------- */ .ml-example{background:var(--ml-card);border:1px solid var(--ml-line);border-top:4px solid var(--ml-accent); border-radius:12px;padding:1.5rem 1.7rem;margin-bottom:1.1rem} .ml-example h4{font-size:1.05rem;color:var(--ml-ink);margin-bottom:.5rem} .ml-example .ex-tag{font-family:'STIX Two Math',serif;font-style:italic;font-size:.8rem;color:var(--ml-accent);margin-bottom:.3rem} .ml-example ol{padding-left:1.3rem;margin-top:.5rem}.ml-example ol li{margin:.35rem 0;font-size:.93rem;color:var(--ml-ink-soft)} details.ml-acc{border:1px solid var(--ml-line);border-radius:10px;padding:.8rem 1.1rem;margin:.7rem 0;background:var(--ml-card)} details.ml-acc summary{cursor:pointer;font-weight:700;color:var(--ml-accent)} details.ml-acc[open] summary{margin-bottom:.5rem} /* =========================================================================== INTERACTIVE LAB 위젯 =========================================================================== */ .ml-lab{background:linear-gradient(135deg,var(--ml-tint),#fff);border:1px solid var(--ml-line); border-radius:16px;padding:1.6rem 1.6rem 1.8rem;margin:1.2rem 0} .ml-lab-head{font-size:1.1rem;font-weight:800;font-family:'Nanum Myeongjo',serif;color:var(--ml-ink);margin-bottom:.3rem} .ml-lab-sub{font-size:.88rem;color:var(--ml-mut);margin-bottom:1rem} .ml-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.2rem;align-items:start} @media(max-width:760px){.ml-stage{grid-template-columns:1fr}} .ml-plane{background:#fff;border:1px solid var(--ml-line);border-radius:12px;padding:.4rem;overflow:hidden} .ml-plane svg{display:block;width:100%;height:auto} .ml-grid{stroke:#eef1f6;stroke-width:1} .ml-axis{stroke:#9aa3b8;stroke-width:1.3} .ml-axis-label{fill:#9aa3b8;font-family:'STIX Two Math',serif;font-style:italic;font-size:13px} .ml-tick{fill:#9aa3b8;font-size:10px;font-family:Pretendard,sans-serif} /* 컨트롤 */ .ml-controls{display:flex;flex-direction:column;gap:.9rem} .ml-slider{display:flex;flex-direction:column;gap:.3rem} .ml-slider .row{display:flex;justify-content:space-between;align-items:baseline} .ml-slider .name{font-family:'STIX Two Math',serif;font-style:italic;font-size:1rem;color:var(--ml-ink)} .ml-slider .val{font-family:Pretendard,sans-serif;font-weight:700;color:var(--ml-accent);font-size:.95rem} input[type=range].ml-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px; background:var(--ml-line);outline:none;cursor:pointer} input[type=range].ml-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px; border-radius:50%;background:var(--ml-accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)} input[type=range].ml-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ml-accent); border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)} .ml-readout{background:#fff;border:1px solid var(--ml-line);border-radius:10px;padding:.9rem 1.1rem;font-size:.95rem;line-height:1.9} .ml-readout .line{padding:.15rem 0;border-bottom:1px dashed var(--ml-line)}.ml-readout .line:last-child{border-bottom:none} .ml-readout .final{margin-top:.5rem;padding-top:.5rem;border-top:2px solid var(--ml-accent);color:var(--ml-accent);font-weight:700} .ml-badge{display:inline-block;padding:.1rem .6rem;border-radius:99px;font-size:.8rem;font-weight:700;color:#fff;background:var(--ml-accent)} .ml-badge.ok{background:var(--ml-ok)}.ml-badge.no{background:var(--ml-no)}.ml-badge.warn{background:var(--ml-warn)} /* 토글 버튼 그룹 */ .ml-toggle{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 1rem} .ml-toggle button{flex:1;min-width:90px;padding:.5rem .8rem;border:1.5px solid var(--ml-line);background:#fff; border-radius:8px;cursor:pointer;font-family:inherit;font-weight:700;font-size:.85rem;color:var(--ml-mut);transition:.15s} .ml-toggle button.active{background:var(--ml-accent);color:#fff;border-color:var(--ml-accent)} .ml-toggle button:hover:not(.active){background:var(--ml-tint)} .ml-btn{background:var(--ml-accent);color:#fff;border:0;padding:.55rem 1.2rem;border-radius:8px;cursor:pointer; font-family:inherit;font-weight:700;font-size:.9rem} .ml-btn:hover{filter:brightness(1.07)} .ml-btn.ghost{background:#fff;color:var(--ml-accent);border:1.5px solid var(--ml-accent)} .ml-btnrow{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem} /* 수직선 */ .ml-numline{background:#fff;border:1px solid var(--ml-line);border-radius:10px;padding:.6rem;margin-top:.4rem} .ml-numline svg{display:block;width:100%;height:auto} /* ---------- QUICK CHECK ---------- */ .ml-quick{display:grid;gap:.9rem} .ml-qc{background:var(--ml-card);border:1px solid var(--ml-line);border-radius:10px;padding:1.1rem 1.3rem} .ml-qc .q{font-size:.96rem;color:var(--ml-ink);margin-bottom:.6rem} .ml-qc .q b{color:var(--ml-accent);font-family:'STIX Two Math',serif;font-style:italic;margin-right:.3rem} .ml-inrow{display:flex;gap:.5rem;flex-wrap:wrap} .ml-inrow input{flex:1;min-width:160px;padding:.5rem .8rem;border:1.5px solid var(--ml-line);border-radius:7px; font-family:Pretendard,sans-serif;font-size:.92rem;background:var(--ml-paper)} .ml-inrow input:focus{outline:none;border-color:var(--ml-accent);background:#fff} .ml-fb{margin-top:.5rem;font-size:.86rem;font-weight:600;display:none} .ml-fb.ok{display:block;color:var(--ml-ok)}.ml-fb.no{display:block;color:var(--ml-no)} .ml-hint{margin-top:.4rem;font-size:.85rem;color:var(--ml-mut)} .ml-hint summary{cursor:pointer;color:var(--ml-accent);font-weight:600} /* ---------- PRACTICE (난이도 탭) ---------- */ .ml-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem;padding-bottom:.7rem;border-bottom:2px solid var(--ml-line)} .ml-tab{padding:.5rem 1.1rem;background:transparent;border:1.5px solid var(--ml-line);border-radius:8px;cursor:pointer; font-size:.85rem;font-weight:700;color:var(--ml-mut);font-family:inherit;transition:.15s} .ml-tab.active{background:var(--ml-accent);color:#fff;border-color:var(--ml-accent)} .ml-tab:hover:not(.active){background:var(--ml-tint)} .ml-panel{display:none;gap:1rem}.ml-panel.active{display:grid} .ml-prac{background:var(--ml-card);border:1px solid var(--ml-line);border-radius:10px;padding:1.2rem 1.4rem} .ml-prac-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem;gap:.5rem} .ml-prac-head .pn{font-family:'STIX Two Math',serif;font-style:italic;font-size:1.15rem;color:var(--ml-accent)} .ml-prac-head .stars{font-size:.82rem;color:var(--ml-accent)} /* ---------- WRAP / FOOTER ---------- */ .ml-wrap-card{background:linear-gradient(135deg,#0a0e27,var(--ml-accent));color:#fff;padding:2.2rem;border-radius:16px; text-align:center;margin-top:2.5rem} .ml-wrap-card h3{color:var(--ml-gold);margin-bottom:.6rem;font-size:1.25rem} .ml-wrap-card p{max-width:600px;margin:0 auto;color:#dbe2f0;line-height:1.85} .ml-wrap-card .quote{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2); font-family:'STIX Two Math',serif;font-style:italic;color:#fff} .ml-footnav{background:#0f1530;color:#e7e5e4;padding:2.4rem 1.5rem 4rem;margin-top:2.5rem} .ml-footnav .wrap{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap} .ml-footnav a{color:var(--ml-gold);padding:.65rem 1.3rem;border:1px solid var(--ml-gold);border-radius:50px;transition:.2s} .ml-footnav a:hover{background:var(--ml-gold);color:#0f1530} @media(max-width:640px){.ml-hero{padding:4rem 1.2rem 2.6rem}.ml-main{padding:2.2rem 1.2rem}.ml-concept{padding:1.3rem}.ml-lab{padding:1.2rem}}