:root {
  --bamboo: #1c6a4f;
  --bamboo-deep: #124a37;
  --leaf: #d8ebdc;
  --ground: #eff4ee;
  --paper: #ffffff;
  --ink: #16191a;
  --soft: #4a5550;
  --line: #c9d6cd;
  --sun: #d3202c;
  --sat: #1a4fc4;
  --display: "Black Han Sans", "Gothic A1", sans-serif;
  --body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.75 var(--body);
  word-break: keep-all;
  overflow-wrap: break-word;
}
a { color: var(--bamboo-deep); text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.band :focus-visible { outline-color: #fff; }
.wrap { width: min(100% - 32px, 1120px); margin-inline: auto; }

/* 상단 */
.band { background: var(--bamboo); color: #fff; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding-top: 14px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 400 21px/1.2 var(--display); text-decoration: none; }
.logo svg { width: 32px; height: 32px; }
.nav { display: flex; gap: 2px; margin-inline: -8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; padding: 8px; color: var(--leaf); font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; font-weight: 700; border-bottom-color: #fff; }

/* 도구 영역 */
.bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  grid-template-areas: "head stage" "form stage" "facts stage";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 7vw, 96px);
  padding-block: 32px 56px;
}
.head { grid-area: head; }
.head h1 { font: 400 clamp(38px, 5.4vw, 60px)/1.12 var(--display); letter-spacing: -.01em; }
.head p { max-width: 34em; margin-top: 12px; color: var(--leaf); }

.tool { grid-area: form; margin-top: 26px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fields > .full { grid-column: 1 / -1; }
.field { display: grid; gap: 5px; font-size: 15px; font-weight: 500; }
.field input, .field select {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: 500 18px/1.3 var(--body);
}
.modes { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 2px solid #fff; border-radius: 4px; }
.modes label { display: block; cursor: pointer; }
.modes input { position: absolute; opacity: 0; }
.modes span { display: block; padding: 10px 6px; font-weight: 700; text-align: center; font-size: 16px; }
.modes input:checked + span { background: #fff; color: var(--bamboo-deep); }
.modes input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 9px; min-height: 36px; font-size: 15px; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--bamboo-deep); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button, .copy {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--leaf);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font: 500 15px/1.2 var(--body);
  cursor: pointer;
}
.quick button:hover, .copy:hover { background: var(--bamboo-deep); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.share p { font-size: 15px; color: var(--leaf); overflow-wrap: anywhere; }

.facts { grid-area: facts; margin: 22px 0 0; align-self: start; }
.facts > div:not(.meter) { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid rgb(255 255 255 / .28); }
.facts dt { color: var(--leaf); font-size: 15px; }
.facts dd { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.55; }
.facts .is-next dt, .facts .is-next dd { color: #fff; font-weight: 700; }
.facts .is-next { background: var(--bamboo-deep); margin-inline: -8px; padding-inline: 8px; }
.meter { height: 12px; margin-top: 10px; background: var(--bamboo-deep); }
.meter span { display: block; height: 100%; background: #fff; }

/* 일력: 이 사이트의 얼굴. 빨강과 파랑은 일요일·토요일에만 쓴다. */
.stage { grid-area: stage; position: relative; align-self: start; margin-top: 44px; }
.panda { position: absolute; z-index: 0; top: -43px; right: 34px; width: 104px; height: auto; }
.stack { position: absolute; inset: 0; z-index: 1; }
.stack::before, .stack::after { content: ""; position: absolute; inset: 0; background: #e7ece6; border-radius: 3px; }
.stack::before { transform: translate(5px, 5px); background: #cfdcd2; }
.stack::after { transform: translate(10px, 10px); background: #a7c2b1; z-index: -1; }
.sheet {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 450px;
  padding: 0 0 22px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  container-type: inline-size;
  text-align: center;
}
.sheet::before {
  content: "";
  display: block;
  height: 42px;
  background:
    radial-gradient(circle at 50% 50%, var(--ground) 0 7px, transparent 7.5px) center / 34% 100% repeat-x,
    var(--ink);
}
.sheet-top { margin-top: 16px; padding-inline: 14px; color: var(--soft); font-size: 18px; font-weight: 700; min-height: 32px; overflow-wrap: anywhere; }
.sheet-num {
  margin-block: auto;
  padding-inline: 8px;
  font: 400 min(calc(140cqw / var(--len, 2)), 215px)/1 var(--display);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.sheet-unit { font: 400 30px/1.2 var(--display); min-height: 36px; }
.sheet-foot { margin: 12px 18px 0; padding-top: 12px; border-top: 2px dotted var(--line); font-size: 17px; font-weight: 700; min-height: 44px; }
.sheet[data-tone="sun"] .sheet-num, .sheet[data-tone="sun"] .sheet-unit { color: var(--sun); }
.sheet[data-tone="sat"] .sheet-num, .sheet[data-tone="sat"] .sheet-unit { color: var(--sat); }

.torn { position: absolute; inset: 0; z-index: 3; transform-origin: 8% 0; animation: tear .52s cubic-bezier(.45, .05, .7, .35) forwards; pointer-events: none; }
@keyframes tear {
  0% { transform: none; opacity: 1; }
  30% { transform: rotate(3deg) translateY(4px); opacity: 1; }
  100% { transform: rotate(13deg) translate(30px, 150px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .torn { display: none; } }

/* 본문 */
.article { padding-block: 52px 72px; }
.prose { max-width: 42em; }
.prose h2 { margin: 46px 0 12px; font: 400 clamp(25px, 3.3vw, 31px)/1.3 var(--display); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 26px 0 6px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 1.35em; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; margin-bottom: 18px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.scroller table { margin-bottom: 0; }
.prose th, .prose td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.prose thead th, .prose tbody th { font-weight: 700; }
.scroller { max-height: 460px; margin-bottom: 14px; overflow: auto; border-block: 2px solid var(--ink); background: var(--paper); }
.scroller thead th { position: sticky; top: 0; background: var(--paper); box-shadow: 0 1px 0 var(--ink); }
.plain-page .prose { padding-block: 0; }
.plain-head { padding-block: 26px 40px; }
.plain-head h1 { font: 400 clamp(36px, 5vw, 52px)/1.2 var(--display); }

.others { padding-block: 40px; background: var(--paper); border-top: 1px solid var(--line); }
.others h2 { margin-bottom: 14px; font: 400 25px/1.3 var(--display); }
.others ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.others li { border-top: 1px solid var(--line); }
.others a { display: block; padding: 11px 0; color: var(--ink); text-decoration: none; }
.others a:hover strong { text-decoration: underline; }
.others strong { display: block; font-weight: 700; }
.others span { display: block; color: var(--soft); font-size: 15px; line-height: 1.5; }

footer { padding-block: 26px 36px; background: var(--ink); color: #dfe5e0; font-size: 15px; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 8px; }
footer a { color: #fff; }

@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .bench {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "form" "stage" "facts";
    grid-template-rows: none;
    padding-block: 22px 40px;
  }
  .stage { width: min(100%, 390px); margin: 62px auto 0; }
  .sheet { min-height: 380px; }
  .facts { margin-top: 34px; }
}
@media (max-width: 460px) {
  .nav { flex-wrap: wrap; overflow-x: visible; }
  .prose table { font-size: 15px; }
  .prose th, .prose td { padding: 8px 5px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .field input, .field select { font-size: 17px; }
  .facts > div:not(.meter) { grid-template-columns: 6.3em minmax(0, 1fr); }
}