:root {
  --ramie: #edefe6;
  --ink: #1a1410;
  --ink-soft: #5a5347;
  --red-thread: #b8322c;
  --blue-thread: #24468a;
  --gold: #8a6a2f;
  --line: #c9ccbd;
  --batang: "Gowun Batang", "Noto Serif KR", serif;
  --dodum: "Gowun Dodum", "Apple SD Gothic Neo", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ramie);
  color: var(--ink);
  font: 1.0625rem/1.7 var(--dodum);
  word-break: keep-all;
  overflow-x: clip;
}
main { max-width: 40rem; margin: 0 auto; padding: 0 1rem 4rem; }
h1, h2, h3 { font-family: var(--batang); font-weight: 700; line-height: 1.25; margin: 0; }
a { color: var(--blue-thread); }

.hero { padding-top: 2rem; }
.brand { margin: 0 0 2.5rem; font: 700 1.125rem var(--batang); color: var(--red-thread); }
h1 { font-size: clamp(2.75rem, 12.5vw, 4.5rem); letter-spacing: -0.03em; line-height: 1.12; }

.threads {
  display: block;
  width: calc(100vw - 0px);
  max-width: none;
  height: 90px;
  margin: 1.5rem 0 1.5rem calc(50% - 50vw);
}
.threads path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; animation: draw 1.4s ease-out both; }
.threads .red { stroke: var(--red-thread); }
.threads .blue { stroke: var(--blue-thread); animation-delay: 0.15s; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

label { display: block; }
#birth-form > label { font-weight: 700; margin: 1rem 0 0.4rem; }
#birth-form > label:first-child { margin-top: 0; }
#birth-form > button { width: 100%; margin-top: 1rem; }
select,
input:not([type]), input[inputmode], input[type="email"] {
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  font: 1.25rem var(--batang);
  color: var(--ink);
  background: #f8f9f3;
  border: 2px solid var(--ink);
  border-radius: 2px;
}
input[type="email"], select { font: 1.0625rem var(--dodum); }
input[type="email"] { margin-top: 0.25rem; }
input::placeholder { color: #807a6c; }

button, .button {
  display: inline-block;
  padding: 0.8rem 1.1rem;
  font: 700 1.0625rem var(--dodum);
  color: #fff;
  background: var(--red-thread);
  border: 2px solid var(--red-thread);
  border-radius: 2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
button:active, .button:active { transform: translateY(1px); }
button.secondary { color: var(--ink); background: transparent; border-color: var(--ink); font-weight: 400; margin-top: 1.5rem; }
.button.is-disabled { background: var(--line); border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--blue-thread); outline-offset: 2px; }

.error { min-height: 1.5em; margin: 0.4rem 0 0; color: var(--red-thread); font-weight: 700; }
.note { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.9375rem; }
.fine { margin-top: 1.5rem; color: var(--ink-soft); font-size: 0.875rem; }

#results { margin-top: 3.5rem; }
#results h2 { font-size: 1.75rem; }

/* 왼쪽의 실 두 가닥: 두 실의 간격이 곧 100점과의 거리다. */
#rank-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.rank { position: relative; padding: 0 0 2rem 3.25rem; min-height: 6rem; }
.rank-threads { position: absolute; left: 0; top: 0; width: 2.5rem; height: 100%; overflow: visible; }
.rank-threads line { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.rank-threads .red { stroke: var(--red-thread); }
.rank-threads .blue { stroke: var(--blue-thread); }

.rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.rank-date { font: 700 1.3125rem/1.3 var(--batang); }
.rank-date small { display: block; font: 0.9375rem var(--dodum); color: var(--ink-soft); }
.rank-score { font: 700 2.25rem/1 var(--batang); letter-spacing: -0.02em; white-space: nowrap; }
.rank-score small { font-size: 0.5em; font-weight: 400; margin-left: 0.1em; }
.rank:first-child .rank-score { color: var(--red-thread); font-size: 3rem; }
.rank-line { margin: 0.5rem 0 0; font: 700 1.0625rem/1.5 var(--batang); }
.rank-close { margin: 0.2rem 0 0; }
/* 상대 사주의 오행 개수: 막대 길이가 개수다. */
.elements { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; margin: 0.6rem 0; padding: 0; font-size: 0.8125rem; color: var(--ink-soft); }
.elements li { padding-top: 0.3rem; background: linear-gradient(var(--ink), var(--ink)) top left / calc(var(--count) * 33.33%) 3px no-repeat, linear-gradient(var(--line), var(--line)) top left / 100% 3px no-repeat; }
.elements .is-empty { color: #807a6c; }
.rank-same { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.875rem; }

details { margin-top: 0.5rem; }
summary { cursor: pointer; color: var(--blue-thread); padding: 0.25rem 0; }
details dl { margin: 0.5rem 0 0; }
details dt { font: 700 1rem var(--batang); margin-top: 0.85rem; }
details dd { margin: 0.15rem 0 0; }

#paywall { margin-top: 0.5rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
#paywall h3 { font-size: 1.5rem; }
#paywall p { margin: 0.5rem 0; }
.check { margin: 0.9rem 0; font-size: 0.9375rem; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start; }
.check input { margin-top: 0.4rem; width: 1.1rem; height: 1.1rem; accent-color: var(--red-thread); }
#pay-link { display: block; }

#survey { margin-top: 4rem; padding-top: 2rem; border-top: 2px solid var(--ink); }
#survey h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
fieldset { border: 0; margin: 1.5rem 0 0; padding: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 0.25rem; }
fieldset label { padding: 0.5rem 0; display: flex; gap: 0.6rem; align-items: center; }
fieldset input { width: 1.15rem; height: 1.15rem; accent-color: var(--blue-thread); }
#email-block { margin-top: 1.5rem; }
#survey-form > button { margin-top: 1.5rem; width: 100%; }
#survey-message { min-height: 1.5em; margin: 0.75rem 0 0; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .threads path { animation: none; }
}