/* ============================================================
   /apps/saju/ — 사주 분석기
   Ink on hanji by day, ink-black night under the moon by night.
   Colour is spent only where a character carries one of the five
   elements (木火土金水); vermilion appears only as a seal (낙관).
   ============================================================ */

/* ---------- 1. Tokens ----------------------------------------- */

:root {
  color-scheme: dark;
  --paper: #111419;
  --bg: #111419;
  --bg-raised: #181c23;
  --bg-inset: #0b0d11;
  --bg-hover: #1d222a;
  --line: #2a2f38;
  --line-strong: #3d434e;
  --fg: #ece6d6;
  --fg-muted: #b9b2a2;
  --fg-faint: #948d7e;
  --accent: #8cc3d3;
  --accent-strong: #a9d6e2;
  --accent-ink: #0b1a1f;
  --accent-soft: rgba(140, 195, 211, 0.12);
  --seal: #e0603f;
  --seal-ink: #111419;
  --wood: #84c49a;
  --fire: #ee8068;
  --earth: #e0ae58;
  --metal: #dcd3bf;
  --water: #8fb0e0;
  --metal-disc: #dcd3bf;
  --on-disc: #111419;
  --on-metal: #111419;
  --ring: #6f6550;
  --orb: #ebe6d4;
  --orb-glow: rgba(235, 230, 212, 0.16);
  --orb-o: 0.9;
  --mount: #9aa6bb;
  --mount-far: 0.13;
  --mount-mid: 0.11;
  --mount-near: 0.07;
  --device-ink: #050608;
  --phone-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(236, 230, 214, 0.05);
  --tex: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27420%27 height=%27420%27%3E%3Cfilter id=%27a%27 x=%270%27 y=%270%27 width=%271%27 height=%271%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.0095%27 numOctaves=%273%27 seed=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.82 0 0 0 0 0.84 0 0 0 0 0.9 1.3 0 0 0 -.5%27/%3E%3C/filter%3E%3Cfilter id=%27b%27 x=%270%27 y=%270%27 width=%271%27 height=%271%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.8%27 numOctaves=%272%27 seed=%279%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.82 0 0 0 0 0.84 0 0 0 0 0.9 0 0 0 1 -.35%27/%3E%3C/filter%3E%3Crect width=%27420%27 height=%27420%27 filter=%27url(%23a)%27 opacity=%270.06%27/%3E%3Crect width=%27420%27 height=%27420%27 filter=%27url(%23b)%27 opacity=%270.04%27/%3E%3Cpath d=%27M0 387Q1 393 -3 399M138 316Q140 307 139 295M343 102Q336 106 325 119M287 197Q296 190 311 184M388 289Q385 285 374 272M156 141Q157 132 165 127M180 124Q192 124 200 116M25 115Q14 108 6 107M382 23Q378 33 371 35M216 70Q209 73 204 78M140 223Q139 218 129 214M362 267Q356 261 349 252M395 167Q394 158 391 153M139 164Q139 154 147 136M33 171Q40 172 38 179M266 61Q251 68 244 67M372 374Q385 362 394 354M4 104Q9 103 12 108M311 206Q312 197 306 193M157 376Q159 386 172 389M268 387Q279 394 297 391M237 285Q234 293 236 299M22 323Q18 307 14 299M46 386Q59 390 63 404M371 362Q389 360 402 360M104 306Q108 299 117 294M373 235Q368 242 359 253M305 178Q312 190 309 192M266 366Q273 360 277 360M209 234Q211 216 213 204%27 fill=%27none%27 stroke=%27rgb(209%2C214%2C230)%27 stroke-opacity=%270.05%27 stroke-width=%27.7%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");

  --f-display: "Song Myung", "Noto Serif KR", "AppleMyungjo", serif;
  --f-body: "Noto Serif KR", "AppleMyungjo", "Batang", serif;
  --wrap: 1180px;
  --brush: cubic-bezier(0.3, 0.6, 0.2, 1);
}

/* hanji by day: the light palette, applied like index.css applies its own */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    /* hanji paper + ink */
    --paper: #f1ebdd;
    --bg: #f1ebdd;
    --bg-raised: #f8f4ea;
    --bg-inset: #e7dfcc;
    --bg-hover: #ebe3d1;
    --line: #d9cfb9;
    --line-strong: #bdb096;
    --fg: #1d1a16;
    --fg-muted: #514a3f;
    --fg-faint: #6b6355;

    /* 쪽빛: the app's teal, deepened to an ink blue */
    --accent: #1c5a6e;
    --accent-strong: #144656;
    --accent-ink: #f8f4ea;
    --accent-soft: rgba(28, 90, 110, 0.1);

    /* 인주 — the seal */
    --seal: #b4301b;
    --seal-ink: #f8f4ea;

    /* five elements, mineral pigments (text-safe on paper) */
    --wood: #2e7149;
    --fire: #b23a25;
    --earth: #8e5c0c;
    --metal: #73684f;
    --water: #253f66;
    --metal-disc: #e6d8b4;
    --on-disc: #f8f4ea;
    --on-metal: #1d1a16;
    --ring: #b89a5a;

    /* landscape */
    --orb: #c4462b;
    --orb-glow: rgba(196, 70, 43, 0);
    --orb-o: 0.62;
    --mount: #2f2a22;
    --mount-far: 0.24;
    --mount-mid: 0.3;
    --mount-near: 0.18;

    --device-ink: #1d1a16;
    --phone-shadow: 0 34px 70px -34px rgba(47, 38, 22, 0.55), 0 14px 30px -18px rgba(47, 38, 22, 0.4);

    --tex: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27420%27 height=%27420%27%3E%3Cfilter id=%27a%27 x=%270%27 y=%270%27 width=%271%27 height=%271%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.0095%27 numOctaves=%273%27 seed=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.36 0 0 0 0 0.3 0 0 0 0 0.22 1.3 0 0 0 -.5%27/%3E%3C/filter%3E%3Cfilter id=%27b%27 x=%270%27 y=%270%27 width=%271%27 height=%271%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.8%27 numOctaves=%272%27 seed=%279%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.36 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 1 -.35%27/%3E%3C/filter%3E%3Crect width=%27420%27 height=%27420%27 filter=%27url(%23a)%27 opacity=%270.13%27/%3E%3Crect width=%27420%27 height=%27420%27 filter=%27url(%23b)%27 opacity=%270.09%27/%3E%3Cpath d=%27M0 387Q1 393 -3 399M138 316Q140 307 139 295M343 102Q336 106 325 119M287 197Q296 190 311 184M388 289Q385 285 374 272M156 141Q157 132 165 127M180 124Q192 124 200 116M25 115Q14 108 6 107M382 23Q378 33 371 35M216 70Q209 73 204 78M140 223Q139 218 129 214M362 267Q356 261 349 252M395 167Q394 158 391 153M139 164Q139 154 147 136M33 171Q40 172 38 179M266 61Q251 68 244 67M372 374Q385 362 394 354M4 104Q9 103 12 108M311 206Q312 197 306 193M157 376Q159 386 172 389M268 387Q279 394 297 391M237 285Q234 293 236 299M22 323Q18 307 14 299M46 386Q59 390 63 404M371 362Q389 360 402 360M104 306Q108 299 117 294M373 235Q368 242 359 253M305 178Q312 190 309 192M266 366Q273 360 277 360M209 234Q211 216 213 204%27 fill=%27none%27 stroke=%27rgb(92%2C77%2C56)%27 stroke-opacity=%270.09%27 stroke-width=%27.7%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  /* hanji paper + ink */
  --paper: #f1ebdd;
  --bg: #f1ebdd;
  --bg-raised: #f8f4ea;
  --bg-inset: #e7dfcc;
  --bg-hover: #ebe3d1;
  --line: #d9cfb9;
  --line-strong: #bdb096;
  --fg: #1d1a16;
  --fg-muted: #514a3f;
  --fg-faint: #6b6355;

  /* 쪽빛: the app's teal, deepened to an ink blue */
  --accent: #1c5a6e;
  --accent-strong: #144656;
  --accent-ink: #f8f4ea;
  --accent-soft: rgba(28, 90, 110, 0.1);

  /* 인주 — the seal */
  --seal: #b4301b;
  --seal-ink: #f8f4ea;

  /* five elements, mineral pigments (text-safe on paper) */
  --wood: #2e7149;
  --fire: #b23a25;
  --earth: #8e5c0c;
  --metal: #73684f;
  --water: #253f66;
  --metal-disc: #e6d8b4;
  --on-disc: #f8f4ea;
  --on-metal: #1d1a16;
  --ring: #b89a5a;

  /* landscape */
  --orb: #c4462b;
  --orb-glow: rgba(196, 70, 43, 0);
  --orb-o: 0.62;
  --mount: #2f2a22;
  --mount-far: 0.24;
  --mount-mid: 0.3;
  --mount-near: 0.18;

  --device-ink: #1d1a16;
  --phone-shadow: 0 34px 70px -34px rgba(47, 38, 22, 0.55), 0 14px 30px -18px rgba(47, 38, 22, 0.4);

  --tex: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27420%27 height=%27420%27%3E%3Cfilter id=%27a%27 x=%270%27 y=%270%27 width=%271%27 height=%271%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.0095%27 numOctaves=%273%27 seed=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.36 0 0 0 0 0.3 0 0 0 0 0.22 1.3 0 0 0 -.5%27/%3E%3C/filter%3E%3Cfilter id=%27b%27 x=%270%27 y=%270%27 width=%271%27 height=%271%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.8%27 numOctaves=%272%27 seed=%279%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.36 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 1 -.35%27/%3E%3C/filter%3E%3Crect width=%27420%27 height=%27420%27 filter=%27url(%23a)%27 opacity=%270.13%27/%3E%3Crect width=%27420%27 height=%27420%27 filter=%27url(%23b)%27 opacity=%270.09%27/%3E%3Cpath d=%27M0 387Q1 393 -3 399M138 316Q140 307 139 295M343 102Q336 106 325 119M287 197Q296 190 311 184M388 289Q385 285 374 272M156 141Q157 132 165 127M180 124Q192 124 200 116M25 115Q14 108 6 107M382 23Q378 33 371 35M216 70Q209 73 204 78M140 223Q139 218 129 214M362 267Q356 261 349 252M395 167Q394 158 391 153M139 164Q139 154 147 136M33 171Q40 172 38 179M266 61Q251 68 244 67M372 374Q385 362 394 354M4 104Q9 103 12 108M311 206Q312 197 306 193M157 376Q159 386 172 389M268 387Q279 394 297 391M237 285Q234 293 236 299M22 323Q18 307 14 299M46 386Q59 390 63 404M371 362Q389 360 402 360M104 306Q108 299 117 294M373 235Q368 242 359 253M305 178Q312 190 309 192M266 366Q273 360 277 360M209 234Q211 216 213 204%27 fill=%27none%27 stroke=%27rgb(92%2C77%2C56)%27 stroke-opacity=%270.09%27 stroke-width=%27.7%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
}

/* ---------- 2. Base ------------------------------------------- */

html {
  background: var(--paper);
}

body.app-saju {
  background-color: var(--paper);
  background-image: var(--tex);
  background-size: 420px 420px;
  overflow-x: hidden;
}

.app-saju main,
.app-saju .app-foot {
  font-family: var(--f-body);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.app-saju main {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--fg);
}

.app-saju main h1,
.app-saju main h2,
.app-saju main h3 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg);
  word-break: keep-all;
}

.app-saju main h2 {
  font-size: clamp(2rem, 1.35rem + 2.3vw, 3.15rem);
  line-height: 1.22;
  margin: 0 0 0.7em;
}

.app-saju main p {
  margin: 0 0 1em;
}

.app-saju ::selection {
  background: var(--fg);
  color: var(--paper);
}

.app-saju :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.app-saju main a:not(.store-badge) {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
}

.app-saju main a:not(.store-badge):hover {
  text-decoration-color: currentColor;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* five-element colour hooks */
[data-el="목"] { --c: var(--wood); --c-disc: var(--wood); --c-on: var(--on-disc); }
[data-el="화"] { --c: var(--fire); --c-disc: var(--fire); --c-on: var(--on-disc); }
[data-el="토"] { --c: var(--earth); --c-disc: var(--earth); --c-on: var(--on-disc); }
[data-el="금"] { --c: var(--metal); --c-disc: var(--metal-disc); --c-on: var(--on-metal); }
[data-el="수"] { --c: var(--water); --c-disc: var(--water); --c-on: var(--on-disc); }

/* vertical hanja title slip (제첨) */
.v-label {
  writing-mode: vertical-rl;
  margin: 0;
  padding: 0.9rem 0.4rem;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.4em;
  color: var(--fg-muted);
  white-space: nowrap;
  align-self: start;
}

/* the seal (낙관): carved characters showing the paper through */
.seal {
  display: inline-grid;
  place-items: center;
  width: var(--seal-size, 3.6rem);
  aspect-ratio: 1;
  background: var(--seal);
  color: var(--seal-ink);
  border-radius: 7% 4% 6% 5%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.seal > span {
  writing-mode: vertical-rl;
  font-family: var(--f-body);
  font-weight: 900;
  font-size: calc(var(--seal-size, 3.6rem) * 0.36);
  line-height: 1.02;
  letter-spacing: 0.02em;
  height: calc(var(--seal-size, 3.6rem) * 0.76);
  display: block;
  text-align: center;
  word-break: break-all;
}

/* ---------- 3. Hero ------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(880px, calc(100svh - var(--nav-h) - var(--statusbar-h)));
  display: grid;
  align-items: center;
}

.hero-orb {
  position: absolute;
  z-index: -1;
  top: -7%;
  left: calc(50% + 1.5rem);
  width: clamp(150px, 19vw, 270px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.16), transparent 58%), var(--orb);
  opacity: var(--orb-o);
  box-shadow: 0 0 90px 30px var(--orb-glow);
  pointer-events: none;
}

.peaks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: clamp(170px, 27vw, 330px);
  pointer-events: none;
}

.stop-far-top { stop-color: var(--mount); stop-opacity: var(--mount-far); }
.stop-mid-top { stop-color: var(--mount); stop-opacity: var(--mount-mid); }
.stop-near-top { stop-color: var(--mount); stop-opacity: var(--mount-near); }
.stop-near-bottom { stop-color: var(--paper); stop-opacity: 1; }
.stop-fade { stop-color: var(--mount); stop-opacity: 0; }

.hero-inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 3.5rem) var(--gutter) clamp(6rem, 11vw, 9rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.eyebrow {
  margin: 0 0 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}

.hero-title {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-bottom: 1.4rem;
}

.hero-icon {
  width: clamp(64px, 7vw, 84px);
  height: auto;
  border-radius: 22%;
  box-shadow: 0 10px 24px -14px rgba(40, 30, 10, 0.55), 0 0 0 1px var(--line);
  flex: none;
}

.app-saju .hero h1 {
  margin: 0;
  font-size: clamp(2.9rem, 1.7rem + 5vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.hero-lede {
  font-size: clamp(1.18rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.75;
  max-width: 24em;
  margin-bottom: 0.9rem !important;
}

.hero-sub {
  color: var(--fg-muted);
  max-width: 30em;
  margin-bottom: 2.2rem !important;
}

.app-saju .store-badge {
  --badge-bg: var(--fg);
  --badge-fg: var(--paper);
  --badge-line: transparent;
  --badge-focus: var(--accent);
}

.hero-note {
  font-size: 0.92rem;
  color: var(--fg-muted);
}

.hero-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
}

.app-saju .app-device {
  --device-frame: var(--device-ink);
  --device-edge: rgba(255, 255, 255, 0.1);
  --device-shadow: var(--phone-shadow);
}

.hero-phone {
  --device-w: clamp(236px, 19vw, 274px);
}

.seal-hero {
  --seal-size: 3.9rem;
  position: absolute;
  z-index: 3;
  left: clamp(-0.5rem, 2vw, 2.5rem);
  top: 14%;
  transform: rotate(-5deg);
}

/* ---------- 4. Section heads ----------------------------------- */

.sec-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  max-width: 48rem;
}

.sec-lede {
  color: var(--fg);
  max-width: 34em;
}

/* ---------- 5. The board: 사주팔자 + 오행 ----------------------- */

.palja {
  padding-block: clamp(5rem, 10vw, 8.5rem) clamp(4rem, 8vw, 7rem);
}

.birth {
  margin: 2.2rem 0 0.5rem;
}

.birth-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field-label {
  font-size: 0.88rem;
  color: var(--fg-muted);
  line-height: 1.4;
}

.birth input[type="date"],
.birth input[type="time"] {
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  color: var(--fg);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  min-width: 10.5rem;
}

.birth input:disabled {
  opacity: 0.45;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  font-size: 0.98rem;
  cursor: pointer;
}

.check input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--fg);
  margin: 0;
}

.brush-btn {
  min-height: 48px;
  padding: 0.6rem 1.5rem;
  border: 0;
  border-radius: 3px;
  background: var(--fg);
  color: var(--paper);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s;
}

.brush-btn:hover {
  transform: translateY(-1px);
  background: var(--accent-strong);
  color: var(--accent-ink);
}

.birth-error {
  min-height: 1.6em;
  margin: 0.6rem 0 0 !important;
  font-size: 0.94rem;
  color: var(--seal);
}

.birth-error:empty {
  min-height: 0;
}

.palja-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.board-wrap {
  --col-w: clamp(62px, 9.2vw, 112px);
  --cell-h: clamp(92px, 12vw, 140px);
  --name-h: 2.4rem;
  --glyph: clamp(2.3rem, 1.2rem + 3.4vw, 4.3rem);
}

.board-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--fg-muted);
  margin-bottom: 1.3rem !important;
  text-align: center;
}

.board-caption-tag {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--seal);
  color: var(--seal);
  border-radius: 2px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.board {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
}

.board-rows {
  display: grid;
  grid-template-rows: var(--name-h) var(--cell-h) var(--cell-h);
  gap: 0.5rem;
  width: 1.7rem;
}

.board-rows span {
  grid-row: auto;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--fg-faint);
  letter-spacing: 0.15em;
}

.board-rows span:first-child {
  grid-row: 2;
}

.board-rows span:last-child {
  grid-row: 3;
}

.board-rows b {
  font-weight: 600;
  color: var(--fg-muted);
}

.pillar {
  display: grid;
  grid-template-rows: var(--name-h) var(--cell-h) var(--cell-h);
  gap: 0.5rem;
  width: var(--col-w);
}

.pillar-name {
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.86rem;
  color: var(--fg-muted);
  line-height: 1;
  align-self: center;
}

.pillar-name .hz {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fg);
}

.glyph-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.2rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-raised);
  color: var(--c, var(--fg));
  font: inherit;
  cursor: pointer;
  transition: opacity 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s, transform 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.glyph-cell:hover {
  border-color: var(--c);
}

.glyph {
  display: block;
  font-family: var(--f-body);
  font-weight: 900;
  font-size: var(--glyph);
  line-height: 1;
  color: var(--c, var(--fg));
}

.reading {
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--c, var(--fg-muted));
  white-space: nowrap;
}

.glyph-cell.is-unknown {
  cursor: default;
  border-style: dashed;
  background: transparent;
}

.glyph-cell.is-unknown .glyph,
.glyph-cell.is-unknown .reading {
  color: var(--fg-faint);
}

.self-seal {
  position: absolute;
  top: -0.55rem;
  right: -0.45rem;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 3px;
  background: var(--seal);
  color: var(--seal-ink);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  transform: rotate(6deg);
}

.board.has-sel .glyph-cell:not(.is-match) {
  opacity: 0.32;
}

.board.has-sel .glyph-cell.is-match {
  border-color: var(--c);
  box-shadow: inset 0 0 0 1px var(--c);
}

.board-readout {
  margin: 1.4rem 0 0 !important;
  text-align: center;
  font-size: 0.98rem;
  color: var(--fg-muted);
}

/* the wheel */

.wheel-wrap {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
}

.wheel {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1;
}

.wheel-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wheel-ring {
  fill: none;
  stroke: var(--ring);
  stroke-width: 1.2;
  opacity: 0.55;
}

.wheel-lines g path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: opacity 0.3s var(--ease), stroke-width 0.3s var(--ease), stroke-dashoffset 1.1s var(--brush);
}

.saeng path {
  stroke: var(--fg-muted);
  stroke-width: 2.2;
  opacity: 0.4;
}

.geuk path {
  stroke: var(--seal);
  stroke-width: 1.5;
  opacity: 0.26;
}

.arrow-saeng { fill: var(--fg); }
.arrow-geuk { fill: var(--seal); }

.wheel.has-sel .wheel-lines g path { opacity: 0.08; }
.wheel.has-sel .saeng path.is-on { opacity: 1; stroke-width: 3; stroke: var(--fg); }
.wheel.has-sel .geuk path.is-on { opacity: 1; stroke-width: 2.4; }

.wheel-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--seal);
  color: var(--seal-ink);
  font-family: var(--f-body);
  font-weight: 900;
  font-size: clamp(1.3rem, 0.8rem + 1.8vw, 1.9rem);
  line-height: 1;
  pointer-events: none;
}

.el {
  position: absolute;
  width: 17.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--ring);
  background: var(--c-disc);
  color: var(--c-on);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.el-wood  { left: 50%;   top: 15%; }
.el-fire  { left: 83.3%; top: 39.2%; }
.el-earth { left: 70.6%; top: 78.3%; }
.el-metal { left: 29.4%; top: 78.3%; }
.el-water { left: 16.7%; top: 39.2%; }

.el-hz {
  font-family: var(--f-body);
  font-weight: 900;
  font-size: clamp(1.25rem, 0.75rem + 1.7vw, 1.85rem);
  line-height: 1;
}

.el-kr {
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 600;
}

.el-count {
  position: absolute;
  top: -8%;
  right: -10%;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--fg);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}

.el.is-empty {
  background: var(--bg-raised);
  color: var(--c);
  border-style: dashed;
  border-color: var(--c);
  box-shadow: none;
}

.el.is-empty .el-count {
  color: var(--fg-faint);
}

.el[aria-pressed="true"] {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--c), 0 10px 22px -12px rgba(0, 0, 0, 0.6);
}

.el:focus-visible {
  outline-offset: 6px;
  border-radius: 50%;
}

.wheel-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  margin: 0 !important;
  font-size: 0.88rem;
  color: var(--fg-muted);
}

.wheel-hint {
  max-width: 24rem;
  margin: 0 !important;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--fg-muted);
}

.lg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.lg::before {
  content: "";
  width: 1.6rem;
  height: 0;
  border-top: 2.5px solid var(--fg-muted);
  border-radius: 2px;
}

.lg-geuk::before {
  border-top: 2px solid var(--seal);
}

.el-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.el-panel-head { grid-column: 1; grid-row: 1; }
.el-panel-gist { grid-column: 1; grid-row: 2; }
.el-rel { grid-column: 2; grid-row: 1 / 3; }

.el-panel-head {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  margin: 0 0 0.35rem !important;
}

.el-panel-hz {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: var(--c, var(--fg));
}

.el-panel-name {
  font-family: var(--f-display);
  font-size: 1.45rem;
  line-height: 1.2;
}

.el-panel-count {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--fg-muted);
}

.el-panel-gist {
  max-width: 24em;
  font-size: 0.98rem;
  color: var(--fg-muted);
  margin-bottom: 0.6rem !important;
}

.el-rel {
  list-style: none;
  margin: 0;
  padding: 0;
}

.el-rel li:first-child {
  border-top: 0;
  padding-top: 0.2rem;
}

.el-rel li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px dotted var(--line-strong);
  font-size: 0.95rem;
  line-height: 1.6;
}

.rel-k {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg-muted);
  font-size: 0.88rem;
}

.rel-k::before {
  content: "";
  flex: none;
  width: 0.9rem;
  border-top: 2.5px solid var(--fg-muted);
}

.rel-geuk .rel-k::before {
  border-top: 2px solid var(--seal);
}

.rel-v b {
  font-weight: 600;
  margin-right: 0.4rem;
}

.palja-note {
  max-width: 52rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0 !important;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--fg-muted);
}

/* ---------- 6. Feature sections -------------------------------- */

.feat {
  padding-block: clamp(3.5rem, 6.5vw, 5.5rem);
}

.feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}

.feat.is-flip .feat-media {
  order: -1;
}

.feat-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

.feat-copy p {
  max-width: 31em;
}

.feat-more {
  color: var(--fg-muted);
}

.feat-media {
  position: relative;
  display: flex;
  justify-content: center;
}

/* phones dissolve into the paper at the bottom, like mist in an ink painting */
.feat-media .app-device {
  --device-w: clamp(230px, 22vw, 290px);
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 98%);
}

.app-device-screen.is-short {
  aspect-ratio: 660 / 1320;
}

.duo {
  min-height: 1px;
  padding-left: clamp(3rem, 8vw, 7rem);
}

.duo .phone-back {
  --device-w: clamp(200px, 18vw, 250px);
  position: absolute;
  left: 0;
  top: -6%;
  transform: rotate(-4deg);
  opacity: 0.94;
}

.duo .phone-front {
  position: relative;
  margin-top: 12%;
}

.points {
  margin: 1.6rem 0 0;
  max-width: 31em;
}

.points div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}

.points div:last-child {
  border-bottom: 1px solid var(--line);
}

.points dt {
  font-family: var(--f-display);
  font-size: 1.1rem;
  line-height: 1.6;
}

.points dd {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* bamboo slips for the smaller features */
.slips {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  column-gap: 2rem;
}

.slips li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.slip-hz {
  grid-row: 1 / 3;
  writing-mode: vertical-rl;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.3em;
  color: var(--fg-muted);
  margin-top: 0.3rem;
  padding-right: 0.85rem;
  border-right: 1px solid var(--line-strong);
}

.slips b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.4;
}

.slips li > span:last-child {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--fg-muted);
}

/* ---------- 7. Trust ------------------------------------------ */

.trust {
  padding-block: clamp(4rem, 8vw, 6.5rem);
  background: var(--bg-inset);
  border-block: 1px solid var(--line);
}

.trust-inner {
  max-width: 46rem;
}

.app-saju .trust h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
}

.trust-list {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.trust-list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.5rem;
  line-height: 1.75;
}

.trust-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.25rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: var(--fg);
  transform: rotate(45deg);
}

.trust-link {
  margin: 0 !important;
}

/* ---------- 8. Closing ---------------------------------------- */

.closing {
  padding-block: clamp(5.5rem, 12vw, 10rem);
  text-align: center;
}

.closing-inner {
  display: grid;
  justify-items: center;
}

.seal-big {
  --seal-size: clamp(4.6rem, 3.6rem + 3vw, 6.2rem);
  margin-bottom: 2rem;
  transform: rotate(-3deg);
}

.closing p {
  color: var(--fg-muted);
  margin-bottom: 2rem !important;
}

.closing .store-badges {
  justify-content: center;
}

/* ---------- 9. Footer ----------------------------------------- */

.app-saju .app-foot {
  --app-measure: var(--wrap);
  color: var(--fg);
}

/* ---------- 10. Motion ---------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .board.is-armed .glyph,
  html.js .board.is-armed .reading,
  html.js .board.is-armed .self-seal {
    opacity: 0;
  }

  html.js .board.is-drawing .glyph {
    -webkit-mask-image: linear-gradient(180deg, #000 47%, transparent 57%);
    mask-image: linear-gradient(180deg, #000 47%, transparent 57%);
    -webkit-mask-size: 100% 220%;
    mask-size: 100% 220%;
    animation: brush-in 0.95s var(--brush) both;
    animation-delay: calc(var(--i, 0) * 120ms);
  }

  html.js .board.is-drawing .reading,
  html.js .board.is-drawing .self-seal {
    animation: ink-fade 0.6s ease-out both;
    animation-delay: calc(var(--i, 0) * 120ms + 520ms);
  }

  html.js .wheel.is-armed .wheel-lines g path {
    stroke-dashoffset: 1;
  }

  html.js .wheel.is-armed .el {
    opacity: 0;
  }

  html.js .wheel.is-drawing .el {
    animation: ink-fade 0.7s ease-out both;
    animation-delay: calc(var(--k, 0) * 90ms + 300ms);
  }

  html.js .wheel.is-drawing .wheel-lines g path {
    stroke-dashoffset: 0;
    transition-delay: 0.9s;
  }
}

@keyframes brush-in {
  from {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    filter: blur(2.5px);
    opacity: 0.35;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes ink-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .glyph-cell,
  .el,
  .brush-btn,
  .wheel-lines g path {
    transition: none;
  }
}

/* ---------- 11. Responsive ------------------------------------ */

@media (max-width: 1020px) {
  .palja-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .el-panel {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
    width: 100%;
    justify-self: center;
  }

  .el-panel-head,
  .el-panel-gist,
  .el-rel {
    grid-column: 1;
    grid-row: auto;
  }

  .el-rel li:first-child {
    border-top: 1px dotted var(--line-strong);
    padding-top: 0.55rem;
  }

  .board-wrap {
    --col-w: clamp(60px, 17vw, 112px);
    --cell-h: clamp(90px, 22vw, 140px);
  }
}

@media (max-width: 860px) {
  .hero {
    min-height: 0;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 2.5rem;
    gap: 3rem;
  }

  .seal-hero {
    left: max(0px, calc(50% - 11rem));
  }

  .feat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .feat.is-flip .feat-media {
    order: 0;
  }

  .duo {
    padding-left: clamp(4.5rem, 22vw, 9rem);
    justify-content: center;
  }

  .duo .phone-back {
    left: max(0px, calc(50% - 13rem));
  }
}

@media (max-width: 560px) {
  .app-saju main {
    font-size: 1rem;
  }

  .sec-head,
  .feat-copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .v-label {
    writing-mode: horizontal-tb;
    justify-self: start;
    padding: 0.4rem 0.7rem;
    letter-spacing: 0.3em;
    font-size: 0.9rem;
  }

  .birth-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .birth input[type="date"],
  .birth input[type="time"] {
    min-width: 0;
    width: 100%;
  }

  .check {
    grid-column: 1 / -1;
  }

  .brush-btn {
    grid-column: 1 / -1;
  }

  .board-rows {
    width: 1.2rem;
  }

  .board-rows span {
    font-size: 0.7rem;
  }

  .board-rows b {
    display: none;
  }

  .reading {
    font-size: 0.74rem;
  }

  .el-rel li,
  .points div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .feat-media .app-device {
    --device-w: min(250px, 68vw);
  }

  .duo {
    padding-left: 4.5rem;
  }

  .duo .phone-front {
    --device-w: min(220px, 58vw);
  }

  .duo .phone-back {
    --device-w: min(190px, 50vw);
    left: max(0px, calc(50% - 9.6rem));
  }

  .el-count {
    min-width: 1.35rem;
    height: 1.35rem;
    font-size: 0.72rem;
  }
}