/* jupa sub-pages — the app's LCD (SKIN_META greengrey): pixel heads, plain body for long reading */
@font-face { font-family: 'Galmuri11'; src: url('/fonts/Galmuri11.woff2') format('woff2'); font-display: swap; }
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #C2CCBB; --ink: #26331F; --mag: #9A2257;
  --text: #26331F; --text-mid: #26331F; --text-dim: #46523F; --border: rgba(38,51,31,0.28);
  --mono: 'Galmuri11', ui-monospace, monospace;
  --sans: Pretendard, -apple-system, 'Apple SD Gothic Neo', system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg); color: var(--ink);
  background-image: radial-gradient(rgba(38,51,31,0.07) 0.8px, transparent 1px); background-size: 4px 4px;
  font-family: var(--sans); font-weight: 400; line-height: 1.8; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
.topnav {
  display: inline-block; margin-bottom: 2.5rem; padding: 6px 12px;
  font-family: var(--mono); font-size: 12px; color: var(--bg); background: var(--ink);
  text-decoration: none; border-radius: 6px; box-shadow: 0 3px 0 rgba(38,51,31,0.35);
}
.topnav:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(38,51,31,0.35); }
h1 {
  font-family: var(--mono); font-weight: 400; font-size: clamp(24px, 5vw, 32px); line-height: 1.35;
  color: var(--ink); margin-bottom: 0.75rem; -webkit-font-smoothing: none;
}
h1::before {
  content: ""; display: block; width: 64px; height: 64px; margin-bottom: 1.25rem;
  background: url('/img/jupa-icon.png') center / cover; border-radius: 15px;
  border: 3px solid var(--ink);
}
.effective { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-bottom: 2rem; }
.intro { font-size: 15px; margin-bottom: 1rem; }
h2 {
  font-family: var(--mono); font-weight: 400; font-size: 17px; color: var(--ink);
  margin: 2.75rem 0 1rem; padding-top: 1.25rem; border-top: 2px dashed var(--border);
  -webkit-font-smoothing: none;
}
h2::before { content: "▸ "; color: var(--mag); }
h3 { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--mag); margin: 1.75rem 0 0.5rem; -webkit-font-smoothing: none; }
p { font-size: 15px; margin-bottom: 0.85rem; }
ul, ol { margin: 0.5rem 0 1rem 1.4rem; }
li { font-size: 15px; margin-bottom: 0.45rem; }
li::marker { color: var(--mag); }
strong { font-weight: 700; color: var(--ink); }
a.inline { color: var(--mag); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 1rem 0 1.5rem; font-size: 14px;
  border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.22);
}
th, td { padding: 0.65rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: 0; }
th { font-family: var(--mono); font-weight: 400; font-size: 12px; background: var(--ink); color: var(--bg); -webkit-font-smoothing: none; }
.contact, .contact-box {
  margin: 1.5rem 0; padding: 1rem 1.25rem; border: 3px solid var(--ink); border-radius: 14px;
  background: rgba(255,255,255,0.3); font-size: 15px;
}
.contact .label { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-bottom: 0.25rem; }
.contact .value { font-size: 17px; font-weight: 700; }
.contact-box a { color: var(--ink); font-weight: 700; }
.addendum { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px dashed var(--border); }
.foot, footer {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 2px dashed var(--border);
  font-family: var(--mono); font-size: 12px; color: var(--text-dim);
}
.foot a, footer a { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--mag); outline-offset: 3px; }
@media (max-width: 640px) { table, th, td { font-size: 13px; } th, td { padding: 0.5rem 0.55rem; } }