/* ====================================================================== An's Physics Lectures — shared stylesheet ---------------------------------------------------------------------- Use in any lecture-note page by adding, in this order, inside : Page skeleton this stylesheet expects:
... An's Physics Lectures · Mechanics

지금 강의의 주제

리드 문단...

본문 문단...

...
...
FIG. 1 — 설명
STEP 01 · 소제목

큰 소제목

1.1 하위 소제목

문단...

라벨 · \(\vec{a}(t)\)

$$\vec{a}(t) = (0,\ -g)$$

보충 설명...

라벨

내용...

라벨

내용...

Result · 라벨

제목

$$...$$

부연 설명...

Font policy: Korean text → Nanum Gothic; English/Latin text → Times New Roman; math → KaTeX's own bundled fonts (already Computer-Modern-style by default, no override needed). The body's default stack is Korean- first (Nanum Gothic, falls back to Times for glyphs it lacks). Any element that is pure/mostly English (brand name, STEP/FIG labels, footer) is set Times-first with Nanum Gothic as fallback instead — see the rules below tagged "English-first". ====================================================================== */ body { font-family: 'Nanum Gothic', 'Times New Roman', Times, serif; background: #f5f6f8; margin: 0; color: #222; line-height: 1.7; } .en{ font-family: 'Times New Roman', Times, 'Nanum Gothic', serif; } /* utility: force English-first on any element */ * { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; } /* ── header ── */ header.page-head{ background:linear-gradient(155deg,#152540 0%,#213863 58%,#2B4C7E 100%); color:#fff; padding:56px 28px 64px; } header.page-head .header-inner{ max-width:756px; margin:0 auto; position:relative; text-align:center; } header.page-head .brand-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; margin-bottom:20px; } header.page-head .brand-icon{ color:#7FA8E0; flex-shrink:0; } header.page-head .brand-badge{ display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(159,179,214,.32); } header.page-head .brand-badge a{ font-family:'Times New Roman', Times, serif; /* English-first */ font-size:15px; font-weight:700; letter-spacing:-.005em; color:#fff; text-decoration:none; } header.page-head .brand-badge a:hover{ text-decoration:underline; } header.page-head .brand-sep{ color:#5E7CA8; font-weight:700; font-size:15px; } header.page-head .brand-category{ font-family:'Times New Roman', Times, serif; /* English-first */ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#9FB3D6; } header.page-head h1{ font-size:clamp(22px,3.8vw,34px);font-weight:800;margin:0 0 14px;letter-spacing:-.01em;color:#fff; } header.page-head .katex{ color:#fff; } header.page-head p{margin:0;color:#C7D4E8;font-size:15.5px;line-height:1.7;} header.page-head p.justify{ text-align:justify; text-align-last:left; } header.page-head p b{color:#fff;font-weight:700;} header.page-head p .katex{ color:#C7D4E8; } /* ── stage / container ── */ .stage{ display:flex; justify-content:center; padding:28px 20px 60px; } .container.lecture{ background:#fff; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.1); border:1px solid #e0e0e0; max-width:860px; width:100%; padding:44px 52px; } /* ── figures (diagrams) ── */ .figure{ margin:28px 0; } .figure .stage-box{ position:relative; width:100%; background:#fafbfc; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; } /* Per-figure size dial: each .stage-box can set --ratio (0-100, default 100) as an inline style, e.g. style="--ratio:70;", to shrink just that image to that percent of the panel's width. The panel itself stays full width; only the image (and therefore the panel's height, which follows it) gets smaller. Set the number directly in each lecture's own HTML, not here. */ .figure .stage-box svg, .figure .stage-box img{ display:block; height:auto; margin:0 auto; width: calc(var(--ratio, 100) * 1%); } /* ── inline/floating figure variant (wraps alongside body text instead of sitting as a full-width standalone panel) ── Per-figure size dial: set --fig-w as an inline style on the
itself, e.g. style="--fig-w:220px;" (any CSS length works, incl. %). Defaults to 180px when not set. The image just fills its box, so it scales proportionally (aspect ratio is preserved via height:auto). */ .figure.fig-float{ float:right; width:var(--fig-w, 180px); margin:4px 0 20px 28px; } .figure.fig-float .stage-box img{ width:100%; } @media (max-width:640px){ .figure.fig-float{ float:none; width:min(var(--fig-w, 180px), 60%); margin:20px auto; } } /* clearfix: keep a floated figure from bleeding past its own section into the next section's heading */ section.step::after{ content:""; display:table; clear:both; } .mlabel{ position:absolute; transform:translate(-50%,-50%); font-size:13px; line-height:1; white-space:nowrap; pointer-events:none; } .mlabel .katex{ font-size:1.05em; } figcaption{ font-size:12.5px; color:#666; margin-top:10px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; } figcaption .tag{ font-family:'Times New Roman', Times, serif; color:#0078d4; font-weight:700; } /* English-first */ .legend{ display:flex; flex-wrap:wrap; gap:12px 20px; margin:12px 2px 0; font-size:12.5px; color:#555; } .legend .sw{ display:inline-flex; align-items:center; gap:7px; } .legend .ln{ width:16px; height:3px; display:inline-block; border-radius:2px; } /* Apply to any SVG that should draw itself in on page load */ .draw-in{ stroke-dasharray:1300; stroke-dashoffset:1300; animation:draw-in-anim 1.8s cubic-bezier(.4,.1,.2,1) .2s forwards; } @media (prefers-reduced-motion:reduce){ .draw-in{ animation:none; stroke-dashoffset:0; } } @keyframes draw-in-anim{ to{ stroke-dashoffset:0; } } /* ── step sections ── */ section.step{ margin:46px 0; } section.step:first-of-type{ margin-top:8px; } .step-eyebrow{ font-family:'Times New Roman', Times, 'Nanum Gothic', serif; /* English-first, Hangul falls back */ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#0078d4; margin-bottom:8px; } section.step h2{ font-size:21px; font-weight:800; color:#111; margin:0 0 20px; padding-bottom:10px; border-bottom:2px solid #0078d4; } h3.sub{ font-size:14.5px; font-weight:700; color:#222; margin:28px 0 10px; } p{ margin:0 0 14px; font-size:15px; color:#444; } p.dense{ max-width:none; } /* overflow:hidden forms a new block formatting context, which forces the box to shrink beside a float instead of spanning full width underneath it (the default for plain blocks) — without it, a centered equation's line box can end up wide enough to visually cross into the float. */ p.eq-center{ text-align:center; margin:20px 0; overflow:hidden; } /* ── equation cards ── */ .eq-card{ background:#fafbfc; border:1px solid #e0e0e0; border-radius:8px; padding:18px 20px; margin:14px 0; overflow:hidden; } /* Optional numbered-equation row, textbook-style: the equation stays centered on the card (as a normal .eq always is), and a "···(1)" tail sits pinned to the right margin, vertically centered on the equation. Wrap the equation as
...
...(1)
for equations referenced again later in the text — the reference can then say 식 (1) instead of a vague "위 식". New, single-purpose classes (eq-row/eq-tail/eq-dots/eq-num): only this lecture page uses them, so they can't affect any other page's styling. */ .eq-card .eq-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:8px; } .eq-card .eq-row .eq{ grid-column:2; margin:0; } .eq-card .eq-row .eq-tail{ grid-column:3; justify-self:end; white-space:nowrap; display:flex; align-items:baseline; gap:5px; } .eq-card .eq-row .eq-dots{ color:#000; font-weight:700; letter-spacing:1px; } .eq-num{ color:#7c3aed; font-weight:700; font-size:13.5px; } .eq-card .eq-label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#0078d4; margin:0 0 10px; } /* KaTeX inside an uppercase/letter-spaced label must reset both, or its glyphs render mis-shapen and mis-kerned (e.g. vec-a looks like vec-A). */ .eq-card .eq-label .katex, .eq-card .eq-label .katex *{ text-transform:none; letter-spacing:normal; font-weight:normal; } .eq-card .eq-label .katex{ font-size:15px; vertical-align:-0.05em; } .eq-card .eq-note{ font-size:13px; color:#666; margin:12px 0 0; } .eq{ overflow-x:auto; padding:2px 0; } .eq.small .katex{ font-size:0.95em; } .eq-card-flex{ display:flex; align-items:center; gap:20px; } .eq-card-flex .eq-card-body{ flex:1 1 auto; min-width:0; } /* Image sits to the right; dial its size per-instance with an inline style="--img-w:NNpx;" on .eq-card-img (default 130px). */ .eq-card-flex .eq-card-img{ flex:0 0 auto; width:var(--img-w, 130px); } .eq-card-flex .eq-card-img img{ display:block; width:100%; height:auto; } @media (max-width: 640px){ .eq-card-flex{ flex-wrap:wrap; } .eq-card-flex .eq-card-img{ width:min(var(--img-w, 130px), 100px); } } /* ── figure placeholder (text-only stand-in for a diagram not yet drawn) ── */ .fig-placeholder{ background:#fafbfc; border:1px dashed #c7ccd6; border-radius:8px; padding:14px 18px; margin:18px 0; font-size:14px; color:#555; } .fig-placeholder .fig-placeholder-label{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a93a6; margin:0 0 8px; } .fig-placeholder p{ margin:0; color:inherit; } /* ── note / tip boxes ── */ /* overflow:hidden forms a new block formatting context, same fix as .eq-card above — without it a box placed after a float spans full width underneath the float instead of shrinking beside it. */ .note-box, .tip-box{ border-radius:8px; padding:14px 18px; margin:18px 0; font-size:14px; overflow:hidden; } .note-box{ background:#eef5ff; border:1px solid #cfe3fb; color:#1c3b63; } .tip-box{ background:#fff4ec; border:1px solid #f7d9c4; color:#5a3418; } .note-box .lbl, .tip-box .lbl{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; } .note-box .lbl{ color:#0078d4; } .tip-box .lbl{ color:#e05a2b; } /* Same fix as .eq-card .eq-label: KaTeX inside an uppercase/letter-spaced label must reset both, or its glyphs render mis-shapen and mis-kerned. */ .note-box .lbl .katex, .note-box .lbl .katex *, .tip-box .lbl .katex, .tip-box .lbl .katex *{ text-transform:none; letter-spacing:normal; font-weight:normal; } .note-box .lbl .katex, .tip-box .lbl .katex{ font-size:15px; vertical-align:-0.05em; } .note-box p, .tip-box p{ margin:0; color:inherit; } /* Scroll only the display-math block itself, not the whole paragraph — sharing one scroll box with the surrounding text left blank space to the right of the (narrower, wrapped) text whenever the equation was wide. */ .note-box p .katex-display, .tip-box p .katex-display{ overflow-x:auto; overflow-y:hidden; padding:2px 0; } /* ── toggle box (collapsible "why" panel, uses native
/) ── */ details.toggle-box{ background:#fdecec; border:1px solid #f3c6c6; border-radius:8px; margin:18px 0; overflow:hidden; color:#6b2020; } details.toggle-box summary{ cursor:pointer; list-style:none; padding:14px 20px; font-weight:700; font-size:14.5px; color:#cc3333; user-select:none; } details.toggle-box summary::-webkit-details-marker{ display:none; } details.toggle-box summary::marker{ display:none; content:""; } details.toggle-box summary::before{ content:"▸"; display:inline-block; font-size:12px; color:#cc3333; transition:transform .18s ease; margin-right:10px; vertical-align:middle; } details.toggle-box[open] summary{ border-bottom:1px solid #f3c6c6; } details.toggle-box[open] summary::before{ transform:rotate(90deg); } details.toggle-box .toggle-body{ padding:14px 20px 18px; font-size:14.5px; color:inherit; } details.toggle-box .toggle-body p{ margin:0 0 12px; color:inherit; } details.toggle-box .toggle-body p:last-child{ margin-bottom:0; } /* alt color variant (non-red), for lecture pages whose palette already uses red/orange elsewhere — e.g. thermodynamics notes */ details.toggle-box.alt{ background:#eafaf6; border:1px solid #bfe8dc; color:#155e4f; } details.toggle-box.alt summary{ color:#0f8a6c; } details.toggle-box.alt summary::before{ color:#0f8a6c; } details.toggle-box.alt[open] summary{ border-bottom:1px solid #bfe8dc; } /* ── result card ── */ .result-card{ background:linear-gradient(135deg,#152540,#2B4C7E); color:#fff; border-radius:12px; padding:32px 34px; margin:44px 0 4px; } .result-card .stamp{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9FB3D6; margin-bottom:12px; font-weight:700; } .result-card h3{ color:#fff; font-size:18px; margin:0 0 16px; } .result-card .eq{ color:#fff; } .result-card .eq .katex{ color:#fff !important; } .result-card p{ color:#C7D4E8; margin-top:14px; font-size:14px; } /* ── highlight (형광펜) ── */ mark.hl{ background:#fff2a8; color:inherit; padding:0 1px; } /* ── footer ── */ footer.copyright{ font-family:'Times New Roman', Times, serif; margin:0 20px 26px; font-size:11.5px; color:#9AA2B1; text-align:center; } /* English-first */ footer.copyright .copyright-link{ color:#9AA2B1; text-decoration:underline; text-underline-offset:2px; } footer.copyright .copyright-link:hover{ color:#0078d4; } /* ── responsive ── */ @media (max-width: 960px){ header.page-head{ padding:36px 20px 40px; } .stage{ padding:16px; } } @media (max-width: 640px){ header.page-head p{ font-size:14px; } .container.lecture{ padding:28px 22px; } section.step h2{ font-size:19px; } .mlabel{ font-size:11.5px; } }