/* 「아하! 보이는 직관수학」 읽기 교재(단원.html) 공용 스타일 — 2026-07-10
   사용: <link rel="stylesheet" href="../_shared/textbook.css"> + mathfmt 3종. <body data-mf-auto>.
   페이지별 추가 스타일은 각 파일 <style>에 덧붙인다. */
:root{ --ink:#1D1D1B; --soft:#3a332d; --gold:#B8955A; --sea:#2D5A68; --line:#EDE4D6; --ok:#1f7a4d; --okbg:#e7f4ec;
  --sans:'Noto Sans KR','Malgun Gothic',sans-serif; --mye:'Nanum Myeongjo','Noto Serif KR',serif; }
*{box-sizing:border-box;}
body{ margin:0; background:#f4eee4; color:var(--ink); font-family:var(--sans); line-height:1.7; }
.wrap{ max-width:860px; margin:0 auto; padding:0 16px 70px; }
header{ background:linear-gradient(160deg,#12324a,#0d2438); color:#fff; padding:32px 16px 26px; text-align:center; }
header .eye{ color:#ffd166; font-family:var(--mye); font-weight:700; letter-spacing:.06em; font-size:13px; }
header h1{ font-family:var(--mye); font-weight:800; font-size:26px; margin:8px 0 5px; }
header p{ color:#c3caf5; font-size:13px; margin:0; }
.meta{ display:flex; gap:9px; flex-wrap:wrap; margin:20px 0 6px; font-size:12.5px; }
.chip{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 13px; text-decoration:none; color:var(--ink); }
.chip b{ color:var(--sea); } .chip.ok{ background:var(--okbg); border-color:#bfe0cf; } .chip.ok b{ color:var(--ok); }
h2{ font-family:var(--mye); font-size:20px; color:var(--sea); margin:30px 0 10px; padding-bottom:7px; border-bottom:2px solid var(--gold); }
p.body{ font-size:15.5px; color:var(--soft); margin:10px 0; } p.body b{ color:var(--ink); }
.story{ background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:12px; padding:16px 20px; font-size:15.5px; color:var(--soft); } .story b{ color:var(--ink); }
.key{ background:#eef3f5; border:1px solid #bcd4de; border-radius:12px; padding:14px 20px; margin:14px 0; }
.key .big{ font-family:var(--mye); font-size:18px; font-weight:800; color:var(--sea); }
.ex{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px 20px; margin:12px 0; }
.ex .q{ font-family:var(--mye); font-weight:700; font-size:16px; color:var(--ink); } .ex .a{ color:var(--sea); font-weight:700; }
.balloon{ background:#fffbe8; border:2px solid #eac151; border-radius:16px 16px 16px 4px; padding:10px 16px; margin:8px 0 18px 22px; font-size:13.5px; color:#6b5620; position:relative; max-width:92%; }
.balloon::before{ content:"💡 풍선팁"; display:block; font-family:var(--mye); font-weight:800; color:#a3781e; font-size:11.5px; margin-bottom:3px; }
.balloon::after{ content:""; position:absolute; left:-9px; top:12px; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:9px solid #eac151; }
.balloon b{ color:#8a5e12; }
.lab{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:14px 0; box-shadow:0 4px 16px rgba(60,45,20,.07); }
.labwrap{ text-align:center; } .labwrap svg{ width:100%; max-width:480px; height:auto; touch-action:none; }
.ctrl{ display:flex; align-items:center; gap:10px; margin:12px 0 4px; font-size:14.5px; flex-wrap:wrap; justify-content:center; }
.ctrl label{ font-weight:800; color:var(--sea); min-width:72px; }
.ctrl input[type=range]{ flex:1; min-width:140px; max-width:280px; accent-color:var(--sea); }
.ctrl b{ min-width:34px; text-align:center; font-family:var(--mye); font-size:20px; color:var(--gold); }
.segbtns{ display:flex; gap:8px; justify-content:center; margin:12px 0 4px; flex-wrap:wrap; }
.segbtns button{ border:2px solid var(--sea); background:#fff; color:var(--sea); border-radius:999px; padding:8px 18px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; }
.segbtns button.on{ background:var(--sea); color:#fff; }
.labmsg{ text-align:center; font-family:var(--mye); font-weight:800; font-size:19px; color:var(--sea); margin-top:8px; min-height:1.5em; }
.drill{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0; }
@media(max-width:640px){ .drill{ grid-template-columns:1fr; } }
.drill .card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.drill .card .num{ font-family:var(--mye); font-weight:800; color:var(--gold); font-size:12.5px; }
.drill .card .q{ font-family:var(--mye); font-weight:700; font-size:15.5px; color:var(--ink); margin:4px 0 6px; }
.drill .card .tg{ font-size:12px; border:1px solid var(--sea); color:var(--sea); background:#fff; border-radius:999px; padding:3px 11px; cursor:pointer; font-family:inherit; }
.drill .card .sol{ display:none; margin-top:7px; font-size:13.5px; color:var(--ok); font-weight:700; }
.drill .card .sol.show{ display:block; }
details.self{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 18px; margin:10px 0; }
details.self summary{ font-family:var(--mye); font-weight:700; color:var(--ink); cursor:pointer; } details.self .sol{ color:var(--ok); font-weight:700; margin-top:8px; }
.foot{ margin-top:26px; font-size:13px; color:var(--soft); text-align:center; } .foot a{ color:var(--sea); font-weight:700; }
.pbar{ position:fixed; top:12px; right:12px; display:flex; gap:6px; z-index:10; }
.pbar button{ font-size:12px; border:1px solid var(--sea); background:#fff; color:var(--sea); border-radius:999px; padding:6px 12px; cursor:pointer; font-family:inherit; }
.pbar button:hover{ background:#dbeaef; }
@media print{ .pbar,.lab .ctrl,.lab .segbtns{ display:none!important; } .drill .tg{ display:none!important; } .drill .sol{ display:block!important; } @page{ size:A4; margin:8mm; } body{ background:#fff; } header{ background:#0d2438!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
body.eco header{ background:#fff!important; color:#000!important; border-bottom:2px solid #000; }
body.eco *{ background:#fff!important; color:#000!important; border-color:#999!important; box-shadow:none!important; }
