/* 재미 운세 모음: 바이오리듬·탄생석·전생운·계절운·생년월일 운·행운 숫자 (/palja/{biorhythm,birthstone,pastlife,season,birth-number,lucky}/) */
.fn { display: flex; flex-direction: column; gap: 16px; }
.fn .pm-card + .pm-card { margin-top: 0; }
.fn-note { margin: 0; padding: 12px 16px; border-radius: var(--pm-r-card); background: var(--pm-info-bg); color: var(--pm-info-ink); font-size: 14.5px; line-height: 1.65; word-break: keep-all; }
.fn-note--warm { background: var(--pm-soft); color: var(--pm-ink); }
.fn-form { display: flex; flex-direction: column; gap: 4px; }
.fn-form--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; }
.fn-form--row .pm-field { flex: 1 1 180px; margin: 0 0 8px; }
.fn-go { flex: 0 0 auto; min-width: 120px; min-height: 44px; margin-bottom: 8px; }
.fn-cta-t { margin: 0 0 12px; line-height: 1.7; word-break: keep-all; }
.fn .pm-field input[type="date"] { min-height: 44px; }
.fn-small { font-size: 13.5px; color: var(--pm-sub-text); }
.fn-foot { text-align: center; }

/* ---- 바이오리듬 ---- */
.fn-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.fn-step { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.fn-bio-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fn-grid { stroke: var(--pm-line); stroke-width: 1; }
.fn-ax0 { stroke: var(--pm-sub); stroke-width: 1.5; }
.fn-tick { font: 600 12px/1 var(--pm-font-body); fill: var(--pm-sub-text); }
.fn-today { stroke: var(--pm-ink); stroke-width: 1.5; stroke-dasharray: 3 4; }
.fn-line { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fn-line--physical { stroke: #e0654a; }
.fn-line--emotional { stroke: #4f74c9; stroke-dasharray: 9 5; }
.fn-line--intellectual { stroke: #4e9c3d; stroke-dasharray: 2 5; }
.fn-dot { stroke: var(--pm-cream); stroke-width: 2.5; }
.fn-dot--physical { fill: #e0654a; }
.fn-dot--emotional { fill: #4f74c9; }
.fn-dot--intellectual { fill: #4e9c3d; }
.fn-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; padding: 0; list-style: none; font-size: 14.5px; }
.fn-legend small { color: var(--pm-sub-text); }
.fn-key { display: inline-block; width: 26px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 4px solid; }
.fn-key--physical { border-color: #e0654a; }
.fn-key--emotional { border-color: #4f74c9; border-top-style: dashed; }
.fn-key--intellectual { border-color: #4e9c3d; border-top-style: dotted; }
.fn-days { margin-left: 8px; font-size: 13px; color: var(--pm-sub-text); font-weight: 400; }
.fn-rows { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.fn-row { padding-bottom: 18px; border-bottom: 1px dashed var(--pm-line); }
.fn-row:last-child { padding-bottom: 0; border-bottom: 0; }
.fn-row-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.fn-row-n { font-family: var(--pm-font-head); font-weight: 400; font-size: 20px; }
.fn-row-w { flex: 1; color: var(--pm-sub-text); font-size: 13.5px; }
.fn-row-v { font-family: var(--pm-font-head); font-size: 22px; color: var(--pm-fire-deep); }
.fn-row-v small { margin-left: 2px; font-size: 12px; color: var(--pm-sub-text); }
.fn-mid { position: relative; height: 12px; border-radius: var(--pm-r-pill); background: var(--pm-soft); overflow: hidden; }
.fn-mid::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--pm-sub); opacity: .5; }
.fn-mid-bar { position: absolute; left: 50%; top: 0; height: 100%; background: var(--pm-wood); border-radius: 0 var(--pm-r-pill) var(--pm-r-pill) 0; }
.fn-mid-bar.is-neg { left: auto; right: 50%; background: var(--pm-water); border-radius: var(--pm-r-pill) 0 0 var(--pm-r-pill); }
.fn-row-s { margin: 8px 0 4px; font-size: 14.5px; }
.fn-row-s small { color: var(--pm-sub-text); font-size: 12.5px; }
.fn-row-t { margin: 0; font-size: 15.5px; line-height: 1.7; word-break: keep-all; }

/* ---- 탄생석 ---- */
.fn-gem-card { text-align: center; }
.fn-gem-card .pm-eyebrow { margin-bottom: 4px; }
.fn-gem-stage { display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; margin: 8px auto; border-radius: 50%; background: var(--pm-soft); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gem, #ffd) 28%, #fff) 0, rgba(255, 255, 255, 0) 72%); }
.fn-gem { display: block; flex: none; overflow: visible; }
.fn-gem--big { width: 132px; height: 132px; filter: drop-shadow(0 8px 8px rgba(80, 50, 30, .18)); animation: fn-bob 3.4s ease-in-out infinite; }
.fn-gem--sm { width: 56px; height: 56px; }
.fn-gem-name { margin: 4px 0 2px; font-family: var(--pm-font-head); font-weight: 400; font-size: 26px; }
.fn-gem-word { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--pm-sub-text); font-size: 14.5px; }
.fn-dotc { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pm-cream); box-shadow: 0 0 0 1px var(--pm-line); }
.fn-gem-text { margin: 0 0 10px; font-size: 15.5px; line-height: 1.75; word-break: keep-all; text-align: left; }
.fn-yong-line { margin: 0; font-size: 15.5px; line-height: 1.6; }
.fn-gems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fn-gems--el { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.fn-gem-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 10px 4px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-card); background: var(--pm-cream); color: var(--pm-ink); text-decoration: none; text-align: center; box-sizing: border-box; height: 100%; }
a.fn-gem-tile:hover { background: var(--pm-soft); }
.fn-gem-tile b { font-family: var(--pm-font-head); font-weight: 400; font-size: 16px; }
.fn-gem-tile small { color: var(--pm-sub-text); font-size: 12.5px; }
.fn-gem-tile.is-on { border-color: var(--pm-fire); background: var(--pm-soft); }
.fn-gem-tile:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }
@media (min-width: 640px) { .fn-gems { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- 전생운 ---- */
.fn-story { text-align: center; }
.fn-seal { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 0 auto 8px; border-radius: 22px; background: #e7584b; color: #fff; font-family: var(--pm-font-head); font-size: 34px; line-height: 1; transform: rotate(-4deg); box-shadow: 0 6px 0 rgba(140, 40, 30, .22); outline: 3px dashed rgba(255, 255, 255, .55); outline-offset: -9px; }
.fn-story--wood .fn-seal { background: #4f9a58; }
.fn-story--fire .fn-seal { background: #d8473a; }
.fn-story--earth .fn-seal { background: #b8801c; }
.fn-story--metal .fn-seal { background: #6d7684; }
.fn-story--water .fn-seal { background: #4f74c9; }
.fn-story-day { margin: 0; color: var(--pm-sub-text); font-size: 14.5px; }
.fn-story-role { margin: 2px 0 10px; font-family: var(--pm-font-head); font-weight: 400; font-size: 28px; line-height: 1.3; }
.fn-story-tx { margin: 0 0 10px; padding: 14px 16px; border-radius: var(--pm-r-card); background: var(--pm-soft); font-size: 16px; line-height: 1.8; text-align: left; word-break: keep-all; }
.fn-story-trace { margin: 0 0 8px; color: var(--pm-fire-deep); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.fn-nav.pm-card { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 14px 16px; }
.fn-60 { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fn-60-a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-input); background: var(--pm-cream); color: var(--pm-ink); text-decoration: none; font-size: 15px; }
.fn-60-a:hover { background: var(--pm-soft); }
.fn-60-a.is-on { background: var(--pm-wood); border-color: var(--pm-wood); font-weight: 700; }
.fn-60-a:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }

/* ---- 계절운 ---- */
.fn-season { overflow: hidden; }
.fn-season-art { margin: 0 0 14px; line-height: 0; }
.fn-season-svg { display: block; width: 100%; max-width: 460px; height: auto; aspect-ratio: 320 / 150; margin: 0 auto; border-radius: var(--pm-r-card); }
.fn-season-t { margin: 4px 0 8px; font-family: var(--pm-font-head); font-weight: 400; font-size: 26px; line-height: 1.3; }
.fn-season-tx { margin: 0 0 10px; font-size: 16px; line-height: 1.8; word-break: keep-all; }
.fn-weather { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 10px; padding: 0; list-style: none; }
.fn-wx { padding: 14px 16px; border-radius: var(--pm-r-card); background: var(--pm-soft); }
.fn-wx p { margin: 6px 0 0; font-size: 15px; line-height: 1.7; word-break: keep-all; }
.fn-wx-k { display: inline-block; padding: 2px 10px; border-radius: var(--pm-r-pill); background: var(--pm-cream); color: var(--pm-sub-text); font-size: 12.5px; font-weight: 700; }
.fn-wx-v { display: block; margin-top: 6px; font-family: var(--pm-font-head); font-weight: 400; font-size: 20px; }
.fn-wx--warm { background: #fde3d8; }
.fn-wx--cool { background: #e3edfa; }
.fn-wx--even { background: #eaf5e1; }
.fn-wx--h-dry { background: #fbeccd; }
.fn-wx--h-wet { background: #dff0f4; }
.fn-wx--h-even { background: #eaf5e1; }

/* ---- 생년월일 운 ---- */
.fn-num-card { text-align: center; }
.fn-calc { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 0 0 12px; color: var(--pm-sub-text); font-size: 14px; line-height: 1.6; }
.fn-calc b { color: var(--pm-ink); font-size: 16px; }
.fn-num-badge { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; margin: 0 auto 8px; border-radius: 50%; background: var(--pm-earth); box-shadow: 0 6px 0 rgba(160, 110, 20, .22); font-family: var(--pm-font-head); font-size: 56px; line-height: 1; color: var(--pm-ink); animation: fn-bob 3.4s ease-in-out infinite; }
.is-master .fn-num-badge { background: linear-gradient(135deg, #ffe38a, #f4b7d0 55%, #b9c9f5); }
.fn-num-word { margin: 0; color: var(--pm-sub-text); font-size: 14.5px; }
.fn-num-title { margin: 2px 0 10px; font-family: var(--pm-font-head); font-weight: 400; font-size: 26px; line-height: 1.3; }
.fn-num-tx { margin: 0 0 12px; padding: 14px 16px; border-radius: var(--pm-r-card); background: var(--pm-soft); font-size: 16px; line-height: 1.8; text-align: left; word-break: keep-all; }
.fn-tips { margin: 0 0 12px; padding: 0; list-style: none; text-align: left; }
.fn-tips li { position: relative; margin: 0 0 6px; padding-left: 24px; font-size: 15px; line-height: 1.7; word-break: keep-all; }
.fn-tips li::before { content: "\273F"; position: absolute; left: 2px; color: var(--pm-fire-deep); }
.fn-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fn-nums-a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 8px 4px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-card); background: var(--pm-cream); color: var(--pm-ink); text-decoration: none; text-align: center; box-sizing: border-box; height: 100%; }
.fn-nums-a:hover { background: var(--pm-soft); }
.fn-nums-a b { font-family: var(--pm-font-head); font-weight: 400; font-size: 22px; }
.fn-nums-a small { color: var(--pm-sub-text); font-size: 12px; }
.fn-nums-a.is-on { border-color: var(--pm-fire); background: var(--pm-soft); }
.fn-nums-a.is-master { border-style: dashed; }
.fn-nums-a:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }

/* ---- 행운의 숫자 ---- */
.fn-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 12px; padding: 0; list-style: none; }
.fn-ball { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tint, var(--pm-soft)); border: 2px solid rgba(67, 53, 45, .18); box-shadow: 0 4px 0 rgba(67, 53, 45, .12); font-family: var(--pm-font-head); font-size: 22px; color: var(--pm-ink); }
.fn-ball--lg { width: 72px; height: 72px; font-size: 34px; }
.fn-lk-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0 0 8px; font-size: 15px; }
.fn-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pm-cream); box-shadow: 0 0 0 1px var(--pm-line); }
.fn-lk-mood { margin: 0 0 12px; text-align: center; font-family: var(--pm-font-head); font-size: 17px; line-height: 1.6; word-break: keep-all; }

@keyframes fn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .fn-gem--big, .fn-num-badge { animation: none; } }
@media (max-width: 420px) {
  .fn .pm-card { padding-left: 16px; padding-right: 16px; }
  .fn-ball--lg { width: 64px; height: 64px; font-size: 30px; }
}

/* 바이오리듬 3D 물결(공용 ritual3d). 영역과 버튼은 WebGL 이 되고 JS 가 열어야만 보인다. 서버가 그린 SVG 그래프·오늘의 박자 카드가 정본이다. */
.bw3[hidden], .bw3-gl[hidden], .bw3-cap[hidden], .bw3-ctl [hidden], .bw3 .pm-help[hidden] { display: none !important; }
.bw3 { margin: 4px 0 8px; text-align: center; }
.bw3-gl { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 9 / 4; border-radius: var(--pm-r-card); overflow: hidden;
  background: linear-gradient(180deg, #e6f1fb 0%, #fdf6e8 100%); box-shadow: inset 0 0 0 1px rgba(60, 100, 150, .22); touch-action: pan-y; cursor: ew-resize; }
@media (max-width: 480px) { .bw3-gl { aspect-ratio: 7 / 4; } }
.bw3-gl canvas { display: block; width: 100%; height: 100%; }
.bw3-cap { margin: 10px auto 0; max-width: 640px; }
.bw3-date { margin: 0; font-size: 17px; color: var(--pm-ink); }
.bw3-date b { font-family: var(--pm-font-head); font-weight: 400; font-size: 21px; }
.bw3-date small { font-size: 13.5px; color: var(--pm-sub-text); }
.bw3-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 15px; }
.bw3-chip { display: inline-flex; align-items: center; gap: 6px; }
.bw3-chip b { font-variant-numeric: tabular-nums; }
.bw3-ico { display: inline-block; width: 14px; height: 14px; background: currentColor; }
.bw3-ico--physical { color: #e0654a; border-radius: 50%; }
.bw3-ico--emotional { color: #4f74c9; border-radius: 4px; }
.bw3-ico--intellectual { color: #4e9c3d; transform: rotate(45deg) scale(.85); }
.bw3-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 0; }
.bw3-ctl .pm-btn { min-height: 44px; }