{"id":8,"date":"2026-05-02T07:47:09","date_gmt":"2026-05-02T07:47:09","guid":{"rendered":"https:\/\/aunstrology.com\/?page_id=8"},"modified":"2026-05-02T16:19:48","modified_gmt":"2026-05-02T16:19:48","slug":"home","status":"publish","type":"page","link":"https:\/\/aunstrology.com\/","title":{"rendered":"home"},"content":{"rendered":"    \n    <div id=\"aunstrology-calculator-root\"><\/div>\n\n    <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\" crossorigin><\/script>\n    <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\" crossorigin><\/script>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Shippori+Mincho:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    fontFamily: {\n                        sans: ['\"Shippori Mincho\"', 'serif'],\n                        serif: ['\"Shippori Mincho\"', 'serif'],\n                        mono: ['\"Cormorant Garamond\"', 'serif'],\n                    }\n                }\n            }\n        }\n    <\/script>\n\n    <style>\n        #aunstrology-calculator-root {\n            font-family: 'Shippori Mincho', serif;\n            word-break: auto-phrase;\n        }\n        \n        .h-svh {\n            height: 100vh;\n            height: 100svh;\n        }\n\n        @keyframes fadeInUp {\n            from { opacity: 0; transform: translateY(15px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        .animate-first-view {\n            animation: fadeInUp 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\n        }\n\n        @keyframes flashScreen {\n            0% { opacity: 0; background-color: #fff; }\n            30% { opacity: 1; background-color: #fff; }\n            100% { opacity: 0; background-color: #fff; }\n        }\n        .animate-flash-screen {\n            animation: flashScreen 0.8s ease-out forwards;\n        }\n\n        \/* \u30e2\u30fc\u30c0\u30eb\u5185\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u3092\u975e\u8868\u793a\u306b\u3059\u308b\uff08\u898b\u305f\u76ee\u3092\u30b9\u30c3\u30ad\u30ea\u3055\u305b\u308b\u305f\u3081\uff09 *\/\n        .hide-scrollbar::-webkit-scrollbar {\n            display: none;\n        }\n        .hide-scrollbar {\n            -ms-overflow-style: none;\n            scrollbar-width: none;\n        }\n    <\/style>\n\n    <script>\nconst {\n  useState,\n  useEffect,\n  useRef\n} = React;\nconst BG_IMAGE_URL = \"https:\/\/aunstrology.com\/wp-content\/uploads\/2026\/05\/aunstrology-paper-bg1.png\";\nfunction ScrollFadeIn({\n  children,\n  className = \"\"\n}) {\n  const domRef = useRef();\n  const [isVisible, setIsVisible] = useState(false);\n  useEffect(() => {\n    const observer = new IntersectionObserver(entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          setIsVisible(true);\n          observer.unobserve(domRef.current);\n        }\n      });\n    }, {\n      rootMargin: \"0px 0px -10% 0px\",\n      threshold: 0\n    });\n    if (domRef.current) {\n      observer.observe(domRef.current);\n    }\n    return () => {\n      if (domRef.current) observer.unobserve(domRef.current);\n    };\n  }, []);\n  return React.createElement(\"div\", {\n    ref: domRef,\n    className: `transition-all duration-[1500ms] ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'} ${className}`\n  }, children);\n}\nconst formatJP = text => {\n  if (!text) return null;\n  const regex = \/([\\u3040-\\u309F\\u30A0-\\u30FF\u30fc\u3001\u3002]+)\/;\n  const parts = text.split(regex);\n  return parts.map((part, i) => {\n    if (\/^[\\u3040-\\u309F\\u30A0-\\u30FF\u30fc\u3001\u3002]+$\/.test(part)) {\n      return React.createElement(\"span\", {\n        key: i,\n        className: \"text-[1.2em]\"\n      }, part);\n    }\n    return React.createElement(\"span\", {\n      key: i,\n      className: \"text-[1.5em]\"\n    }, part);\n  });\n};\nconst alphaNum = {\n  A: 1,\n  B: 2,\n  C: 3,\n  D: 4,\n  E: 5,\n  F: 6,\n  G: 7,\n  H: 8,\n  I: 9,\n  J: 1,\n  K: 2,\n  L: 3,\n  M: 4,\n  N: 5,\n  O: 6,\n  P: 7,\n  Q: 8,\n  R: 9,\n  S: 1,\n  T: 2,\n  U: 3,\n  V: 4,\n  W: 5,\n  X: 6,\n  Y: 7,\n  Z: 8\n};\nconst vowels = ['A', 'I', 'U', 'E', 'O'];\nconst romajiMap = {\n  '\u30a2': 'A',\n  '\u30a4': 'I',\n  '\u30a6': 'U',\n  '\u30a8': 'E',\n  '\u30aa': 'O',\n  '\u30ab': 'KA',\n  '\u30ad': 'KI',\n  '\u30af': 'KU',\n  '\u30b1': 'KE',\n  '\u30b3': 'KO',\n  '\u30ac': 'GA',\n  '\u30ae': 'GI',\n  '\u30b0': 'GU',\n  '\u30b2': 'GE',\n  '\u30b4': 'GO',\n  '\u30b5': 'SA',\n  '\u30b7': 'SHI',\n  '\u30b9': 'SU',\n  '\u30bb': 'SE',\n  '\u30bd': 'SO',\n  '\u30b6': 'ZA',\n  '\u30b8': 'JI',\n  '\u30ba': 'ZU',\n  '\u30bc': 'ZE',\n  '\u30be': 'ZO',\n  '\u30bf': 'TA',\n  '\u30c1': 'CHI',\n  '\u30c4': 'TSU',\n  '\u30c6': 'TE',\n  '\u30c8': 'TO',\n  '\u30c0': 'DA',\n  '\u30c2': 'JI',\n  '\u30c5': 'ZU',\n  '\u30c7': 'DE',\n  '\u30c9': 'DO',\n  '\u30ca': 'NA',\n  '\u30cb': 'NI',\n  '\u30cc': 'NU',\n  '\u30cd': 'NE',\n  '\u30ce': 'NO',\n  '\u30cf': 'HA',\n  '\u30d2': 'HI',\n  '\u30d5': 'FU',\n  '\u30d8': 'HE',\n  '\u30db': 'HO',\n  '\u30d0': 'BA',\n  '\u30d3': 'BI',\n  '\u30d6': 'BU',\n  '\u30d9': 'BE',\n  '\u30dc': 'BO',\n  '\u30d1': 'PA',\n  '\u30d4': 'PI',\n  '\u30d7': 'PU',\n  '\u30da': 'PE',\n  '\u30dd': 'PO',\n  '\u30de': 'MA',\n  '\u30df': 'MI',\n  '\u30e0': 'MU',\n  '\u30e1': 'ME',\n  '\u30e2': 'MO',\n  '\u30e4': 'YA',\n  '\u30e6': 'YU',\n  '\u30e8': 'YO',\n  '\u30e9': 'RA',\n  '\u30ea': 'RI',\n  '\u30eb': 'RU',\n  '\u30ec': 'RE',\n  '\u30ed': 'RO',\n  '\u30ef': 'WA',\n  '\u30f2': 'O',\n  '\u30f3': 'N',\n  '\u30ad\u30e3': 'KYA',\n  '\u30ad\u30e5': 'KYU',\n  '\u30ad\u30e7': 'KYO',\n  '\u30ae\u30e3': 'GYA',\n  '\u30ae\u30e5': 'GYU',\n  '\u30ae\u30e7': 'GYO',\n  '\u30b7\u30e3': 'SHA',\n  '\u30b7\u30e5': 'SHU',\n  '\u30b7\u30e7': 'SHO',\n  '\u30b8\u30e3': 'JA',\n  '\u30b8\u30e5': 'JU',\n  '\u30b8\u30e7': 'JO',\n  '\u30c1\u30e3': 'CHA',\n  '\u30c1\u30e5': 'CHU',\n  '\u30c1\u30e7': 'CHO',\n  '\u30cb\u30e3': 'NYA',\n  '\u30cb\u30e5': 'NYU',\n  '\u30cb\u30e7': 'NYO',\n  '\u30d2\u30e3': 'HYA',\n  '\u30d2\u30e5': 'HYU',\n  '\u30d2\u30e7': 'HYO',\n  '\u30d3\u30e3': 'BYA',\n  '\u30d3\u30e5': 'BYU',\n  '\u30d3\u30e7': 'BYO',\n  '\u30d4\u30e3': 'PYA',\n  '\u30d4\u30e5': 'PYU',\n  '\u30d4\u30e7': 'PYO',\n  '\u30df\u30e3': 'MYA',\n  '\u30df\u30e5': 'MYU',\n  '\u30df\u30e7': 'MYO',\n  '\u30ea\u30e3': 'RYA',\n  '\u30ea\u30e5': 'RYU',\n  '\u30ea\u30e7': 'RYO'\n};\nconst hiraganaToKatakana = str => {\n  return str.replace(\/[\\u3041-\\u3096]\/g, match => String.fromCharCode(match.charCodeAt(0) + 0x60));\n};\nconst convertToRomaji = kanaStr => {\n  let normalized = hiraganaToKatakana(kanaStr).replace(\/\\s+\/g, '');\n  let result = '';\n  let i = 0;\n  while (i < normalized.length) {\n    let char2 = normalized.substring(i, i + 2);\n    let char1 = normalized.substring(i, i + 1);\n    if (romajiMap[char2]) {\n      result += romajiMap[char2];\n      i += 2;\n    } else if (romajiMap[char1]) {\n      result += romajiMap[char1];\n      i += 1;\n    } else if (char1 === '\u30c3') {\n      result += '\u30c3';\n      i += 1;\n    } else if (char1 === '\u30fc') {\n      i += 1;\n    } else {\n      i += 1;\n    }\n  }\n  let step1Result = '';\n  for (let j = 0; j < result.length; j++) {\n    if (result[j] === 'N' && result[j + 1] && ['B', 'P', 'M'].includes(result[j + 1])) {\n      step1Result += 'M';\n    } else if (result[j] === '\u30c3') {\n      if (result[j + 1]) {\n        if (result.substring(j + 1, j + 3) === 'CH') {\n          step1Result += 'T';\n        } else {\n          step1Result += result[j + 1];\n        }\n      }\n    } else {\n      step1Result += result[j];\n    }\n  }\n  let finalResult = step1Result;\n  finalResult = finalResult.replace(\/MATSUURA\/g, '\\x01\\x02\\x03');\n  finalResult = finalResult.replace(\/KOUCHIWA\/g, '\\x04\\x05\\x06');\n  finalResult = finalResult.replace(\/INOUE\/g, '\\x07\\x08\\x09');\n  finalResult = finalResult.replace(\/OU\/g, 'O');\n  finalResult = finalResult.replace(\/UU\/g, 'U');\n  if (finalResult.endsWith('OO')) {\n    let head = finalResult.slice(0, -2);\n    head = head.replace(\/OO\/g, 'O');\n    finalResult = head + 'OO';\n  } else {\n    finalResult = finalResult.replace(\/OO\/g, 'O');\n  }\n  let step2Result = '';\n  for (let i = 0; i < finalResult.length; i++) {\n    if (finalResult[i] === 'N' && finalResult[i + 1] && ['B', 'P', 'M'].includes(finalResult[i + 1])) {\n      step2Result += 'M';\n    } else {\n      step2Result += finalResult[i];\n    }\n  }\n  let step3Result = step2Result;\n  step3Result = step3Result.replace(\/\\x01\\x02\\x03\/g, 'MATSUURA');\n  step3Result = step3Result.replace(\/\\x04\\x05\\x06\/g, 'KOUCHIWA');\n  step3Result = step3Result.replace(\/\\x07\\x08\\x09\/g, 'INOUE');\n  return step3Result;\n};\nconst reduceNumber = numStr => {\n  let current = String(numStr).replace(\/[^0-9]\/g, '');\n  if (!current) return {\n    final: 0,\n    display: '0'\n  };\n  let steps = [current];\n  while (current.length > 1) {\n    let sum = 0;\n    for (let char of current) {\n      sum += parseInt(char, 10);\n    }\n    current = sum.toString();\n    steps.push(current);\n  }\n  let finalNum = parseInt(current, 10);\n  let display = current;\n  if (steps.length > 1) {\n    let last = steps[steps.length - 1];\n    let prev = steps[steps.length - 2];\n    if (prev.length > 1 && last !== prev) {\n      display = `${prev}\/${last}`;\n    }\n  }\n  return {\n    final: finalNum,\n    display\n  };\n};\nfunction App() {\n  const resultRef = useRef(null);\n  const exportRef = useRef(null);\n  const [birthDate, setBirthDate] = useState('');\n  const [lastNameKana, setLastNameKana] = useState('');\n  const [firstNameKana, setFirstNameKana] = useState('');\n  const [lastNameRomaji, setLastNameRomaji] = useState('');\n  const [firstNameRomaji, setFirstNameRomaji] = useState('');\n  const [results, setResults] = useState(null);\n  const [isExporting, setIsExporting] = useState(false);\n  const [isFlashing, setIsFlashing] = useState(false);\n  const [modalImage, setModalImage] = useState(null);\n  const handleLastNameKanaChange = e => {\n    const val = e.target.value;\n    setLastNameKana(val);\n    setLastNameRomaji(convertToRomaji(val));\n  };\n  const handleFirstNameKanaChange = e => {\n    const val = e.target.value;\n    setFirstNameKana(val);\n    setFirstNameRomaji(convertToRomaji(val));\n  };\n  const calculate = () => {\n    if (birthDate.length !== 8 || !lastNameRomaji || !firstNameRomaji) return;\n    setIsFlashing(true);\n    setTimeout(() => {\n      const yearStr = birthDate.slice(0, 4);\n      const monthStr = birthDate.slice(4, 6);\n      const dayStr = birthDate.slice(6, 8);\n      const fullDateSumStr = yearStr + monthStr + dayStr;\n      const pathNumber = reduceNumber(fullDateSumStr);\n      const oriNumber = reduceNumber(monthStr + dayStr);\n      const baseMonth = reduceNumber(monthStr).final;\n      const baseDay = reduceNumber(dayStr).final;\n      const baseYear = reduceNumber(yearStr).final;\n      const romajiLast = lastNameRomaji.toUpperCase().replace(\/[^A-Z]\/g, '');\n      const romajiFirst = firstNameRomaji.toUpperCase().replace(\/[^A-Z]\/g, '');\n      const fullNameRomaji = romajiLast + romajiFirst;\n      let totalSum = 0;\n      let vowelSum = 0;\n      let consonantSum = 0;\n      let karmaList = {\n        1: 0,\n        2: 0,\n        3: 0,\n        4: 0,\n        5: 0,\n        6: 0,\n        7: 0,\n        8: 0,\n        9: 0\n      };\n      for (let char of fullNameRomaji) {\n        const num = alphaNum[char];\n        if (num) {\n          totalSum += num;\n          karmaList[num]++;\n          if (vowels.includes(char)) {\n            vowelSum += num;\n          } else {\n            consonantSum += num;\n          }\n        }\n      }\n      const expression = reduceNumber(totalSum);\n      const soulUrge = reduceNumber(vowelSum);\n      const personality = reduceNumber(consonantSum);\n      const maturity = reduceNumber(pathNumber.final + expression.final);\n      const mind = karmaList[1] + karmaList[8];\n      const emotion = karmaList[2] + karmaList[3] + karmaList[6];\n      const body = karmaList[4] + karmaList[5];\n      const intuition = karmaList[7] + karmaList[9];\n      const p1 = reduceNumber(baseMonth + baseDay).final;\n      const p2 = reduceNumber(baseDay + baseYear).final;\n      const p3 = reduceNumber(p1 + p2).final;\n      const p4 = reduceNumber(baseMonth + baseYear).final;\n      const c1 = reduceNumber(Math.abs(baseMonth - baseDay)).final;\n      const c2 = reduceNumber(Math.abs(baseDay - baseYear)).final;\n      const c3 = reduceNumber(Math.abs(c1 - c2)).final;\n      const c4 = reduceNumber(Math.abs(baseMonth - baseYear)).final;\n      const peak1End = 36 - pathNumber.final;\n      const peak2Start = peak1End + 1;\n      const peak2End = peak2Start + 8;\n      const peak3Start = peak2End + 1;\n      const peak3End = peak3Start + 8;\n      const peak4Start = peak3End + 1;\n      const formattedBirthDate = `${yearStr}\u5e74 ${monthStr.replace(\/^0\/, '')}\u6708 ${dayStr.replace(\/^0\/, '')}\u65e5`;\n      const currentYear = new Date().getFullYear();\n      const currentYearNum = reduceNumber(currentYear).final;\n      const personalYear = reduceNumber(oriNumber.final + currentYearNum).final;\n      setResults({\n        pathNumber,\n        oriNumber,\n        baseMonth,\n        baseDay,\n        baseYear,\n        romajiLast,\n        romajiFirst,\n        expression,\n        soulUrge,\n        personality,\n        maturity,\n        karmaList,\n        mind,\n        emotion,\n        body,\n        intuition,\n        peaks: {\n          p1,\n          p2,\n          p3,\n          p4,\n          ages: [`0\u301c${peak1End}\u624d`, `${peak2Start}\u301c${peak2End}\u624d`, `${peak3Start}\u301c${peak3End}\u624d`, `${peak4Start}\u624d\u4ee5\u964d`]\n        },\n        challenges: {\n          c1,\n          c2,\n          c3,\n          c4\n        },\n        calculationDate: formattedBirthDate,\n        personalYearData: {\n          currentYear: currentYear,\n          currentYearNum: currentYearNum,\n          conditions: oriNumber.final,\n          result: personalYear\n        }\n      });\n      setTimeout(() => {\n        const resultEl = document.getElementById('result-area');\n        if (resultEl) {\n          const y = resultEl.getBoundingClientRect().top + window.pageYOffset - 50;\n          window.scrollTo({\n            top: y,\n            behavior: 'smooth'\n          });\n        }\n      }, 50);\n    }, 200);\n    setTimeout(() => {\n      setIsFlashing(false);\n    }, 800);\n  };\n  const handleShareImage = async () => {\n    if (!exportRef.current || !window.html2canvas) {\n      alert(\"\u8aad\u307f\u8fbc\u307f\u4e2d\u3067\u3059\u3002\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002\");\n      return;\n    }\n    setIsExporting(true);\n    try {\n      await new Promise(resolve => setTimeout(resolve, 500));\n      const canvas = await window.html2canvas(exportRef.current, {\n        scale: 2,\n        backgroundColor: null,\n        useCORS: true,\n        allowTaint: true,\n        logging: false\n      });\n      const isMobile = \/iPhone|iPad|iPod|Android\/i.test(navigator.userAgent);\n      const isInAppBrowser = \/Instagram|Line|FBAN|FBAV\/i.test(navigator.userAgent);\n      if (isInAppBrowser) {\n        const dataUrl = canvas.toDataURL('image\/png');\n        setModalImage(dataUrl);\n        setIsExporting(false);\n        return;\n      }\n      canvas.toBlob(async blob => {\n        if (!blob) throw new Error(\"\u753b\u50cf\u30c7\u30fc\u30bf\u306e\u751f\u6210\u306b\u5931\u6557\u3057\u307e\u3057\u305f\");\n        const filename = `AUNSTROLOGY_${results.romajiLast}_${results.romajiFirst}.png`;\n        const file = new File([blob], filename, {\n          type: 'image\/png'\n        });\n        if (isMobile && navigator.canShare && navigator.canShare({\n          files: [file]\n        })) {\n          try {\n            await navigator.share({\n              files: [file],\n              title: 'AUNSTROLOGY CHART'\n            });\n            setTimeout(() => {\n              alert('\u5b8c\u4e86\u3057\u307e\u3057\u305f');\n            }, 500);\n          } catch (e) {\n            console.log('\u5171\u6709\u304c\u30ad\u30e3\u30f3\u30bb\u30eb\u3055\u308c\u307e\u3057\u305f', e);\n          }\n        } else {\n          const link = document.createElement('a');\n          link.download = filename;\n          link.href = URL.createObjectURL(blob);\n          document.body.appendChild(link);\n          link.click();\n          document.body.removeChild(link);\n          setTimeout(() => {\n            alert('\u4fdd\u5b58\u3057\u307e\u3057\u305f');\n          }, 300);\n        }\n        setIsExporting(false);\n      }, 'image\/png');\n    } catch (error) {\n      console.error('\u753b\u50cf\u306e\u751f\u6210\u306b\u5931\u6557\u3057\u307e\u3057\u305f', error);\n      alert('\u753b\u50cf\u306e\u751f\u6210\u51e6\u7406\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002');\n      setIsExporting(false);\n    }\n  };\n  return React.createElement(\"div\", {\n    className: \"text-white font-serif selection:bg-white\/30 selection:text-white relative\"\n  }, modalImage && React.createElement(\"div\", {\n    className: \"fixed inset-0 z-[99999] flex flex-col items-center justify-center bg-black\/95 p-4 md:p-8 backdrop-blur-sm\"\n  }, React.createElement(\"p\", {\n    className: \"text-white mb-6 text-center font-bold tracking-widest leading-loose text-[0.9em] md:text-[1.1em]\"\n  }, \"\u30a4\u30f3\u30b9\u30bf\u30b0\u30e9\u30e0\u7b49\u306e\u30a2\u30d7\u30ea\u5185\u30d6\u30e9\u30a6\u30b6\u3067\u306f\", React.createElement(\"br\", {\n    className: \"block md:hidden\"\n  }), \"\u76f4\u63a5\u4fdd\u5b58\u304c\u3067\u304d\u307e\u305b\u3093\u3002\", React.createElement(\"br\", null), \"\u4e0b\u306e\u753b\u50cf\u3092\", React.createElement(\"span\", {\n    className: \"text-[#bda465] mx-1\"\n  }, \"\u9577\u62bc\u3057\"), \"\u3057\u3066\u4fdd\u5b58\u3057\u3066\u304f\u3060\u3055\u3044\u3002\"), React.createElement(\"div\", {\n    className: \"relative w-full max-w-[450px] max-h-[65vh] overflow-y-auto shadow-[0_0_40px_rgba(255,255,255,0.2)] rounded-sm hide-scrollbar\"\n  }, React.createElement(\"img\", {\n    src: modalImage,\n    alt: \"AUNSTROLOGY CHART\",\n    className: \"w-full h-auto block\"\n  })), React.createElement(\"button\", {\n    onClick: () => setModalImage(null),\n    className: \"mt-8 px-10 py-4 border border-white text-white font-bold tracking-[0.2em] hover:bg-white hover:text-black transition-colors\"\n  }, \"\u9589\u3058\u308b\")), React.createElement(\"header\", {\n    className: \"sticky top-0 w-full h-svh flex flex-col items-center justify-center animate-first-view opacity-0 -z-10 bg-black\/40 backdrop-blur-sm\"\n  }, React.createElement(\"h1\", {\n    className: \"text-3xl md:text-5xl tracking-[0.1em] md:tracking-[0.2em] font-light text-white text-center leading-relaxed font-mono px-4\"\n  }, \"AUNSTROLOGY\", React.createElement(\"br\", {\n    className: \"md:hidden\"\n  }), \" CALCULATOR\"), React.createElement(\"div\", {\n    className: \"w-px h-24 bg-gradient-to-b from-white\/80 to-transparent mt-12 animate-pulse\"\n  })), React.createElement(\"main\", {\n    className: \"relative z-10 bg-black\/40 backdrop-blur-xl w-full pt-32 pb-32 shadow-[0_-20px_50px_rgba(0,0,0,0.7)] border-t border-white\/10\"\n  }, React.createElement(\"div\", {\n    className: \"max-w-3xl mx-auto px-4 md:px-6 space-y-32\"\n  }, React.createElement(\"section\", {\n    className: \"text-center tracking-[0.05em] md:tracking-[0.1em] leading-[2.5]\"\n  }, React.createElement(\"div\", {\n    className: \"text-white space-y-24\"\n  }, React.createElement(ScrollFadeIn, null, React.createElement(\"p\", null, formatJP(\"AUNSTROLOGY\u3068\u306f\"), React.createElement(\"br\", null), formatJP(\"\u3042\u306a\u305f\u304c\u5730\u7403\u306b\u751f\u307e\u308c\u308b\u3068\u304d\u306b\"), React.createElement(\"br\", null), formatJP(\"\u63cf\u3044\u3066\u304d\u305f\u3068\u3044\u308f\u308c\u308b\"))), React.createElement(ScrollFadeIn, null, React.createElement(\"p\", {\n    className: \"font-serif text-white\"\n  }, formatJP('\"\u9b42\u306e\u5730\u56f3\"'))), React.createElement(ScrollFadeIn, null, React.createElement(\"p\", null, formatJP(\"\u3053\u306e\u5730\u56f3\u306f\"), React.createElement(\"br\", null), formatJP(\"\u3042\u306a\u305f\u306e\u4eca\u4e16\u306e\u9b42\u306e\u58f0\u3092\u805e\u304d\"), React.createElement(\"br\", null), formatJP(\"\u81ea\u5206\u3092\u7406\u89e3\u3059\u308b\u52a9\u3051\u3068\u306a\u308b\u3088\u3046\u306b\"), React.createElement(\"br\", null), formatJP(\"\u30cf\u30a4\u30e4\u30fc\u30bb\u30eb\u30d5\u304c\u7528\u610f\u3057\u3066\u304f\u308c\u305f\"), React.createElement(\"br\", null), formatJP(\"\u30ac\u30a4\u30c0\u30f3\u30b9\u3067\u3059\u3002\"))), React.createElement(ScrollFadeIn, null, React.createElement(\"p\", null, formatJP(\"\u81ea\u5206\u306b\u611b\u3068\u6148\u60b2\u3092\u4e0e\u3048\"), React.createElement(\"br\", null), formatJP(\"\u4eba\u751f\u306b\u5b66\u3073\u3068\u30d2\u30fc\u30ea\u30f3\u30b0\u3092\"), React.createElement(\"br\", null), formatJP(\"\u4e0e\u3048\u3066\u304f\u308c\u307e\u3059\u3002\"))), React.createElement(ScrollFadeIn, null, React.createElement(\"p\", null, formatJP(\"\u6570\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u306f\"), React.createElement(\"br\", null), formatJP(\"\u3042\u306a\u305f\u306e\u5b58\u5728\u305d\u306e\u3082\u306e\u306e\u6e90\u3078\u611b\u3092\u6ce8\u3050\u884c\u70ba\u3002\"))), React.createElement(ScrollFadeIn, null, React.createElement(\"p\", null, formatJP(\"\u6570\u306e\u795e\u79d8\u306b\u3075\u308c\u308b\u3068\u304d\"), React.createElement(\"br\", null), formatJP(\"\u3042\u306a\u305f\u306f\u3042\u306a\u305f\u306e\u4eba\u751f\"), React.createElement(\"br\", null), formatJP(\"\u305d\u3057\u3066\u9b42\u305d\u306e\u3082\u306e\u306e\u795e\u79d8\u306b\u89e6\u308c\u3066\u3044\u304f\u3067\u3057\u3087\u3046\u3002\"))), React.createElement(ScrollFadeIn, null, React.createElement(\"p\", null, formatJP(\"\u3042\u306a\u305f\u306e\u624d\u80fd\u3092\u958b\u304f\u9375\u3002\"))), React.createElement(ScrollFadeIn, null, React.createElement(\"p\", null, formatJP(\"\u305d\u3057\u3066\u3042\u306a\u305f\u306e\"), React.createElement(\"br\", null), formatJP(\"\u9b42\u306e\u60c5\u71b1\u3078\u306e\u6249\u3092\u958b\u304f\"), React.createElement(\"br\", null), formatJP(\"AUNSTROLOGY\u306e\u65c5\u306b\"), React.createElement(\"br\", null), formatJP(\"\u51fa\u304b\u3051\u307e\u3057\u3087\u3046\u3002\"))))), React.createElement(ScrollFadeIn, null, React.createElement(\"div\", {\n    className: \"flex justify-center\"\n  }, React.createElement(\"div\", {\n    className: \"w-12 h-px bg-white\/50\"\n  }))), React.createElement(ScrollFadeIn, null, React.createElement(\"section\", {\n    className: \"bg-white\/10 p-6 md:p-12 shadow-sm border border-white\/30 rounded-sm\"\n  }, React.createElement(\"div\", {\n    className: \"text-center text-[1.5em] tracking-[0.1em] mb-10 text-white font-bold\"\n  }, \"CHART CALCULATION\"), React.createElement(\"div\", {\n    className: \"space-y-8\"\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"span\", {\n    className: \"text-[1.2em] text-white\/70 tracking-widest mb-3 font-bold\"\n  }, \"\u203b\u51fa\u751f\u5c4a\u3067\u63d0\u51fa\u3055\u308c\u3066\u3044\u308b\u5185\u5bb9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\"), React.createElement(\"label\", {\n    className: \"text-[1.2em] tracking-[0.1em] text-white\/80 mb-3 font-bold\"\n  }, \"\u751f\u5e74\u6708\u65e5\"), React.createElement(\"input\", {\n    type: \"text\",\n    value: birthDate,\n    onChange: e => setBirthDate(e.target.value.replace(\/[^0-9]\/g, '').slice(0, 8)),\n    placeholder: \"\u4f8b\uff1a19830412\",\n    className: \"w-full max-w-xs p-3 bg-transparent border-b border-white\/50 focus:border-white outline-none text-center transition-colors font-mono text-white text-[1.5em] tracking-widest\"\n  }), React.createElement(\"span\", {\n    className: \"text-[0.9em] text-white\/70 mt-3 tracking-widest\"\n  }, \"\u203b\u897f\u66a68\u6841\u3067\u5165\u529b\uff08\u4f8b\uff1a19830412\uff09\")), React.createElement(\"div\", {\n    className: \"grid grid-cols-1 md:grid-cols-2 gap-8 pt-4\"\n  }, React.createElement(\"div\", {\n    className: \"space-y-4\"\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"label\", {\n    className: \"text-[1.2em] tracking-[0.1em] text-white\/80 mb-2 font-bold\"\n  }, \"\u59d3 (\u30ab\u30bf\u30ab\u30ca)\"), React.createElement(\"input\", {\n    type: \"text\",\n    value: lastNameKana,\n    onChange: handleLastNameKanaChange,\n    className: \"w-full p-2 bg-transparent border-b border-white\/50 focus:border-white outline-none text-center transition-colors text-white text-[1.2em]\"\n  })), React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"label\", {\n    className: \"text-[1.2em] tracking-[0.1em] text-white\/80 mb-2 font-bold\"\n  }, \"\u540d (\u30ab\u30bf\u30ab\u30ca)\"), React.createElement(\"input\", {\n    type: \"text\",\n    value: firstNameKana,\n    onChange: handleFirstNameKanaChange,\n    className: \"w-full p-2 bg-transparent border-b border-white\/50 focus:border-white outline-none text-center transition-colors text-white text-[1.2em]\"\n  }))), React.createElement(\"div\", {\n    className: \"space-y-4\"\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"label\", {\n    className: \"text-[1.2em] tracking-[0.1em] text-white\/80 mb-2 font-bold\"\n  }, \"\u59d3 (\u30ed\u30fc\u30de\u5b57)\"), React.createElement(\"input\", {\n    type: \"text\",\n    value: lastNameRomaji,\n    onChange: e => setLastNameRomaji(e.target.value.toUpperCase()),\n    className: \"w-full p-2 bg-transparent border-b border-white\/50 focus:border-white outline-none text-center transition-colors font-mono uppercase tracking-wider text-white text-[1.2em]\"\n  })), React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"label\", {\n    className: \"text-[1.2em] tracking-[0.1em] text-white\/80 mb-2 font-bold\"\n  }, \"\u540d (\u30ed\u30fc\u30de\u5b57)\"), React.createElement(\"input\", {\n    type: \"text\",\n    value: firstNameRomaji,\n    onChange: e => setFirstNameRomaji(e.target.value.toUpperCase()),\n    className: \"w-full p-2 bg-transparent border-b border-white\/50 focus:border-white outline-none text-center transition-colors font-mono uppercase tracking-wider text-white text-[1.2em]\"\n  })))), React.createElement(\"div\", {\n    className: \"text-center mt-6\"\n  }, React.createElement(\"span\", {\n    className: \"text-[0.9em] text-white\/70 tracking-widest\"\n  }, \"\u203b\u30ab\u30bf\u30ab\u30ca\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u82f1\u8a9e\u306f\u81ea\u52d5\u5165\u529b\u3067\u3059\u3002\")), React.createElement(\"div\", {\n    className: \"pt-8 flex justify-center\"\n  }, React.createElement(\"button\", {\n    onClick: calculate,\n    disabled: birthDate.length !== 8 || !lastNameRomaji || !firstNameRomaji,\n    className: \"px-12 py-4 bg-white text-black tracking-[0.2em] text-[1.2em] hover:bg-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-bold\"\n  }, \"\u8a08\u7b97\u3059\u308b\"))))), results && React.createElement(\"div\", {\n    id: \"result-area\",\n    className: \"w-full animate-first-view opacity-0 mt-16 px-2 md:px-0\"\n  }, React.createElement(\"div\", {\n    className: \"w-full max-w-4xl mx-auto bg-[#fff8dc] shadow-2xl p-6 md:p-16 flex flex-col items-center text-[#333333] font-serif\"\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center w-full mb-8 mt-4\"\n  }, React.createElement(\"div\", {\n    className: \"text-[2.2em] md:text-[2.6em] tracking-[0.1em] font-bold text-[#333333] text-center font-mono leading-tight mb-4\"\n  }, \"BLUEPRINT\", React.createElement(\"br\", null), \"OF THE SOUL\"), React.createElement(\"div\", {\n    className: \"text-[1.2em] md:text-[1.3em] tracking-[0.6em] mb-8 text-[#333333] font-bold border-b border-[#333333] pb-2 px-6 text-center\"\n  }, \"\u9b42\u306e\u5730\u56f3\"), React.createElement(\"div\", {\n    className: \"text-[1.4em] md:text-[1.6em] tracking-[0.4em] mb-4 text-[#333333] font-bold mt-2 text-center\"\n  }, results.romajiLast, \" \", results.romajiFirst, \" \", React.createElement(\"span\", {\n    className: \"text-[0.6em] tracking-normal font-bold\"\n  }, \"\u69d8\")), React.createElement(\"div\", {\n    className: \"text-[0.9em] md:text-[1em] tracking-[0.3em] text-[#333333] font-bold opacity-90 text-center\"\n  }, results.calculationDate, \" \u751f\u307e\u308c\")), React.createElement(\"div\", {\n    className: \"w-full mb-12\"\n  }, React.createElement(\"div\", {\n    className: \"flex items-center justify-center mb-6 opacity-60\"\n  }, React.createElement(\"div\", {\n    className: \"w-2 h-2 rotate-45 bg-[#333333] shrink-0\"\n  })), React.createElement(\"div\", {\n    className: \"grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-8\"\n  }, React.createElement(NumberItemLight, {\n    label: \"\u8ecc\u9053\u6570\",\n    value: results.pathNumber.display,\n    description: React.createElement(React.Fragment, null, \"\u4eca\u4e16\u306e\u5927\u5207\u306a\u6570\u3002\", React.createElement(\"br\", null), \"\u4eba\u751f\u306e\u610f\u56f3\u3092\u6307\u3057\u3057\u3081\u3059\u30a8\u30c3\u30bb\u30f3\u30b9\u3002\", React.createElement(\"br\", null), \"\u4eba\u751f\u306e\u80cc\u666f\u3068\u547d\u306e\u4f7f\u3044\u65b9\u306e\u9053\u3002\")\n  }), React.createElement(NumberItemLight, {\n    label: \"\u6761\u4ef6\u4ed8\u3051(\u624d\u80fd\u6570)\",\n    value: results.oriNumber.final,\n    description: React.createElement(React.Fragment, null, \"\u5b89\u5168\u3092\u3048\u308b\u305f\u3081\u306b\u751f\u5b58\u306e\u305f\u3081\u306b\", React.createElement(\"br\", null), \"\u8eab\u306b\u3064\u3051\u305f\u6761\u4ef6\u3065\u3051\u3089\u308c\u305f\u30d1\u30bf\u30fc\u30f3\u3002\", React.createElement(\"br\", null), \"\u6570\u3068\u5411\u304d\u5408\u3046\u3053\u3068\u3067\u624d\u80fd\u306e\u7a2e\u3068\u306a\u308b\u3002\")\n  }), React.createElement(NumberItemLight, {\n    label: \"\u9b42\u306e\u885d\u52d5\u6570\",\n    value: results.soulUrge.display,\n    description: React.createElement(React.Fragment, null, \"\u4eba\u751f\u3092\u52d5\u6a5f\u3065\u3051\u308b\u6700\u3082\u5f37\u3044\u61a7\u308c\u3068\u885d\u52d5\u3092\u8868\u3059\u3002\", React.createElement(\"br\", null), \"\u81ea\u5206\u3068\u3044\u3046\u5b58\u5728\u306e\u6df1\u3044\u5834\u6240\u304b\u3089\u304f\u308b\u4eca\u4e16\u306e\u9b42\u306e\u671b\u307f\u3002\")\n  }), React.createElement(NumberItemLight, {\n    label: \"\u8868\u73fe\u6570\",\n    value: results.expression.display,\n    description: React.createElement(React.Fragment, null, \"\u4ed5\u4e8b\u3084\u884c\u70ba\u3092\u901a\u3058\u3066\u3001\u4e16\u754c\u306b\u5dee\u3057\u51fa\u3059\u30ae\u30d5\u30c8\u3068\u624d\u80fd\u3002\", React.createElement(\"br\", null), \"\u884c\u52d5\u306e\u610f\u56f3\u3002\")\n  }), React.createElement(NumberItemLight, {\n    label: \"\u4eba\u683c\u6570\",\n    value: results.personality.display,\n    description: React.createElement(React.Fragment, null, \"\u4e16\u754c\u306b\u898b\u305b\u308b\", React.createElement(\"br\", null), \"\u30da\u30eb\u30bd\u30ca\u3002\", React.createElement(\"br\", null), \"\u4ed6\u8005\u304b\u3089\u898b\u3048\u308b\u3042\u306a\u305f\u306e\u30a8\u30cd\u30eb\u30ae\u30fc\u3002\"),\n    underline: true\n  }), React.createElement(NumberItemLight, {\n    label: \"\u6210\u719f\u6570\",\n    value: results.maturity.display,\n    description: React.createElement(React.Fragment, null, \"36\u6b73\u9803\u304b\u3089\u82b1\u958b\u304f\u5b66\u3073\u306e\u7d50\u6676\u3002\", React.createElement(\"br\", null), \"\u5f8c\u534a\u751f\u3092\u5fdc\u63f4\u3057\u3001\u30dd\u30b8\u30c6\u30a3\u30d6\u306a\u529b\u3092\u4e0e\u3048\u3066\u304f\u308c\u308b\u6570\u3002\"),\n    underline: true\n  }))), React.createElement(\"div\", {\n    className: \"w-full mb-12\"\n  }, React.createElement(SectionHeader, {\n    title: \"LIFE CYCLES\"\n  }), React.createElement(\"div\", {\n    className: \"relative w-full max-w-[360px] mx-auto mt-12 mb-12\",\n    style: {\n      aspectRatio: '360 \/ 860'\n    }\n  }, React.createElement(\"svg\", {\n    className: \"absolute inset-0 w-full h-full pointer-events-none z-0\",\n    viewBox: \"0 0 360 860\",\n    preserveAspectRatio: \"none\",\n    xmlns: \"http:\/\/www.w3.org\/2000\/svg\"\n  }, React.createElement(\"path\", {\n    d: \"M 40 430 Q 110 190 180 430\",\n    fill: \"none\",\n    stroke: \"#333333\",\n    strokeWidth: \"1\",\n    strokeOpacity: \"0.4\"\n  }), React.createElement(\"path\", {\n    d: \"M 180 430 Q 250 190 320 430\",\n    fill: \"none\",\n    stroke: \"#333333\",\n    strokeWidth: \"1\",\n    strokeOpacity: \"0.4\"\n  }), React.createElement(\"path\", {\n    d: \"M 110 310 Q 180 30 250 310\",\n    fill: \"none\",\n    stroke: \"#333333\",\n    strokeWidth: \"1\",\n    strokeOpacity: \"0.4\"\n  }), React.createElement(\"path\", {\n    d: \"M 40 430 Q 180 -370 320 430\",\n    fill: \"none\",\n    stroke: \"#333333\",\n    strokeWidth: \"1\",\n    strokeOpacity: \"0.4\"\n  }), React.createElement(\"path\", {\n    d: \"M 40 430 Q 110 670 180 430\",\n    fill: \"none\",\n    stroke: \"#333333\",\n    strokeWidth: \"1\",\n    strokeOpacity: \"0.4\",\n    strokeDasharray: \"4 4\"\n  }), React.createElement(\"path\", {\n    d: \"M 180 430 Q 250 670 320 430\",\n    fill: \"none\",\n    stroke: \"#333333\",\n    strokeWidth: \"1\",\n    strokeOpacity: \"0.4\",\n    strokeDasharray: \"4 4\"\n  }), React.createElement(\"path\", {\n    d: \"M 110 550 Q 180 830 250 550\",\n    fill: \"none\",\n    stroke: \"#333333\",\n    strokeWidth: \"1\",\n    strokeOpacity: \"0.4\",\n    strokeDasharray: \"4 4\"\n  }), React.createElement(\"path\", {\n    d: \"M 40 430 Q 180 1230 320 430\",\n    fill: \"none\",\n    stroke: \"#333333\",\n    strokeWidth: \"1\",\n    strokeOpacity: \"0.4\",\n    strokeDasharray: \"4 4\"\n  })), React.createElement(\"div\", {\n    className: \"absolute w-full flex justify-center items-center z-0\",\n    style: {\n      top: '50%',\n      left: 0,\n      transform: 'translateY(-50%)'\n    }\n  }, React.createElement(\"div\", {\n    className: \"w-[77.7%] h-px bg-[#333333] opacity-20\"\n  })), React.createElement(WebCycleNode, {\n    label: \"\u7b2c4\u30d4\u30fc\u30af\",\n    value: results.peaks.p4,\n    age: results.peaks.ages[3],\n    isPeak: true,\n    className: \"absolute transform -translate-x-1\/2 -translate-y-1\/2\",\n    style: {\n      left: '50%',\n      top: '3.48%'\n    }\n  }), React.createElement(WebCycleNode, {\n    label: \"\u7b2c3\u30d4\u30fc\u30af\",\n    value: results.peaks.p3,\n    age: results.peaks.ages[2],\n    isPeak: true,\n    className: \"absolute transform -translate-x-1\/2 -translate-y-1\/2\",\n    style: {\n      left: '50%',\n      top: '19.76%'\n    }\n  }), React.createElement(WebCycleNode, {\n    label: \"\u7b2c1\u30d4\u30fc\u30af\",\n    value: results.peaks.p1,\n    age: results.peaks.ages[0],\n    isPeak: true,\n    className: \"absolute transform -translate-x-1\/2 -translate-y-1\/2\",\n    style: {\n      left: '30.55%',\n      top: '36.04%'\n    }\n  }), React.createElement(WebCycleNode, {\n    label: \"\u7b2c2\u30d4\u30fc\u30af\",\n    value: results.peaks.p2,\n    age: results.peaks.ages[1],\n    isPeak: true,\n    className: \"absolute transform -translate-x-1\/2 -translate-y-1\/2\",\n    style: {\n      left: '69.44%',\n      top: '36.04%'\n    }\n  }), React.createElement(WebCycleNode, {\n    label: \"\u7b2c1\u30c1\u30e3\u30ec\u30f3\u30b8\",\n    value: results.challenges.c1,\n    className: \"absolute transform -translate-x-1\/2 -translate-y-1\/2\",\n    style: {\n      left: '30.55%',\n      top: '63.95%'\n    }\n  }), React.createElement(WebCycleNode, {\n    label: \"\u7b2c2\u30c1\u30e3\u30ec\u30f3\u30b8\",\n    value: results.challenges.c2,\n    className: \"absolute transform -translate-x-1\/2 -translate-y-1\/2\",\n    style: {\n      left: '69.44%',\n      top: '63.95%'\n    }\n  }), React.createElement(WebCycleNode, {\n    label: \"\u7b2c3\u30c1\u30e3\u30ec\u30f3\u30b8\",\n    value: results.challenges.c3,\n    className: \"absolute transform -translate-x-1\/2 -translate-y-1\/2\",\n    style: {\n      left: '50%',\n      top: '80.23%'\n    }\n  }), React.createElement(WebCycleNode, {\n    label: \"\u7b2c4\u30c1\u30e3\u30ec\u30f3\u30b8\",\n    value: results.challenges.c4,\n    className: \"absolute transform -translate-x-1\/2 -translate-y-1\/2\",\n    style: {\n      left: '50%',\n      top: '96.51%'\n    }\n  })), React.createElement(\"div\", {\n    className: \"mt-12 text-center text-[1.1em] text-[#333333]\/90 leading-loose p-6 md:p-8 border border-[#333333]\/20 bg-white\/40 mx-auto max-w-2xl tracking-[0.05em] md:tracking-[0.1em] font-bold text-balance shadow-sm\"\n  }, \"\u4eba\u751f\u306f\u30d4\u30fc\u30af\u306e\u6570\u306b\u3088\u3063\u3066\u5f69\u3089\u308c\u3001\u30c1\u30e3\u30ec\u30f3\u30b8\u306e\u6570\u3092\u901a\u3057\u3066\u305d\u306e\u5b66\u3073\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002\", React.createElement(\"br\", {\n    className: \"hidden md:block\"\n  }), \"\u5e74\u9f62\u533a\u5206\u306f\uff0836 - \u8ecc\u9053\u6570\uff09\u3092\u7b2c1\u30d4\u30fc\u30af\u306e\u7d42\u70b9\u3068\u3057\u3066\u5404\u30d4\u30fc\u30af9\u5e74\u3054\u3068\u306b\u9032\u3093\u3067\u3044\u304d\u307e\u3059\u3002\")), React.createElement(\"div\", {\n    className: \"w-full mb-10 mt-16\"\n  }, React.createElement(SectionHeader, {\n    title: \"TEMPERAMENT\"\n  }), React.createElement(\"div\", {\n    className: \"w-full md:w-[90%] mx-auto grid grid-cols-1 md:grid-cols-4 text-center mt-6\"\n  }, React.createElement(QualityCol, {\n    title: \"\u7cbe\u795e\",\n    value: results.mind,\n    borderClass: \"border-b border-[#333333]\/30 md:border-b-0 md:border-r\"\n  }), React.createElement(QualityCol, {\n    title: \"\u611f\u60c5\",\n    value: results.emotion,\n    borderClass: \"border-b border-[#333333]\/30 md:border-b-0 md:border-r\"\n  }), React.createElement(QualityCol, {\n    title: \"\u8089\u4f53\",\n    value: results.body,\n    borderClass: \"border-b border-[#333333]\/30 md:border-b-0 md:border-r\"\n  }), React.createElement(QualityCol, {\n    title: \"\u76f4\u611f\",\n    value: results.intuition,\n    borderClass: \"\"\n  }))), React.createElement(\"div\", {\n    className: \"w-full mb-8\"\n  }, React.createElement(SectionHeader, {\n    title: \"PERSONAL YEAR\"\n  }), React.createElement(\"div\", {\n    className: \"flex items-end justify-center gap-6 md:gap-12 mt-6\"\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"span\", {\n    className: \"text-[0.8em] md:text-[1em] tracking-[0.4em] mb-4 text-[#333333] font-bold\"\n  }, \"\u6761\u4ef6\u4ed8\u3051\"), React.createElement(\"span\", {\n    className: \"text-[2.2em] md:text-[2.6em] font-mono text-[#333333] leading-none transform -translate-y-1\"\n  }, results.personalYearData.conditions)), React.createElement(\"div\", {\n    className: \"text-[1.5em] md:text-[1.8em] pb-1 text-[#333333] opacity-60 transform -translate-y-1\"\n  }, \"+\"), React.createElement(\"div\", {\n    className: \"flex flex-col items-center relative\"\n  }, React.createElement(\"span\", {\n    className: \"text-[0.8em] md:text-[1em] tracking-[0.4em] mb-4 text-[#333333] font-bold\"\n  }, \"\u4eca\u5e74\u306e\u6570\"), React.createElement(\"span\", {\n    className: \"text-[2.2em] md:text-[2.6em] font-mono text-[#333333] leading-none transform -translate-y-1\"\n  }, results.personalYearData.currentYearNum), React.createElement(\"span\", {\n    className: \"text-[0.55em] md:text-[0.6em] absolute -bottom-6 md:-bottom-7 text-[#333333] font-bold opacity-70 tracking-widest whitespace-nowrap\"\n  }, results.personalYearData.currentYear, \"\u5e74\")), React.createElement(\"div\", {\n    className: \"text-[1.5em] md:text-[1.8em] pb-1 text-[#333333] opacity-60 transform -translate-y-1\"\n  }, \"=\"), React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"span\", {\n    className: \"text-[0.8em] md:text-[1em] tracking-[0.4em] mb-4 text-[#333333] font-bold\"\n  }, \"\u500b\u4eba\u5e74\"), React.createElement(\"span\", {\n    className: \"text-[2.2em] md:text-[2.6em] font-mono text-[#333333] leading-none transform -translate-y-1\"\n  }, results.personalYearData.result))))), React.createElement(\"div\", {\n    className: \"flex justify-center pt-8 pb-12\"\n  }, React.createElement(\"button\", {\n    onClick: handleShareImage,\n    disabled: isExporting,\n    className: \"flex items-center gap-3 px-8 py-4 border border-white text-white tracking-[0.1em] text-sm hover:bg-white hover:text-black transition-colors disabled:opacity-50 font-bold\"\n  }, isExporting ? '\u753b\u50cf\u3092\u751f\u6210\u4e2d...' : '\u30c1\u30e3\u30fc\u30c8\u7d50\u679c\u3092\u5171\u6709\u30fb\u4fdd\u5b58', React.createElement(\"svg\", {\n    className: \"w-5 h-5\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    viewBox: \"0 0 24 24\",\n    xmlns: \"http:\/\/www.w3.org\/2000\/svg\"\n  }, React.createElement(\"path\", {\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    strokeWidth: 2,\n    d: \"M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z\"\n  }))))), results && React.createElement(\"div\", {\n    style: {\n      position: 'fixed',\n      left: '200vw',\n      top: '0',\n      zIndex: -9999\n    }\n  }, React.createElement(\"div\", {\n    ref: exportRef,\n    className: \"relative font-serif flex flex-col items-center justify-start overflow-hidden\",\n    style: {\n      width: '1080px',\n      height: '1350px',\n      letterSpacing: '0.1em',\n      fontSize: '16px',\n      backgroundColor: '#f4f1e1'\n    }\n  }, React.createElement(\"img\", {\n    src: BG_IMAGE_URL,\n    crossOrigin: \"anonymous\",\n    style: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      height: '100%',\n      zIndex: 0,\n      objectFit: 'fill'\n    },\n    alt: \"bg\"\n  }), React.createElement(\"div\", {\n    className: \"relative z-10 w-full h-full flex flex-col items-center justify-start\",\n    style: {\n      padding: '30px 125px 110px 125px'\n    }\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center justify-between relative shadow-2xl w-full h-full\",\n    style: {\n      backgroundColor: '#fff8dc',\n      padding: '20px 40px 30px 40px',\n      color: '#333333'\n    }\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center w-full mb-5\"\n  }, \" \", React.createElement(\"div\", {\n    className: \"text-[3.2em] tracking-[0.1em] font-bold text-[#333333] text-center font-mono leading-tight mb-2\"\n  }, \"BLUEPRINT\", React.createElement(\"br\", null), \"OF THE SOUL\"), React.createElement(\"div\", {\n    className: \"text-[1.2em] tracking-[0.6em] mb-4 text-[#333333] font-bold border-b border-[#333333] pb-2 px-10\"\n  }, \"\u9b42\u306e\u5730\u56f3\"), React.createElement(\"div\", {\n    className: \"text-[1.6em] tracking-[0.4em] mb-2 text-[#333333] font-bold mt-2\"\n  }, results.romajiLast, \" \", results.romajiFirst, \" \", React.createElement(\"span\", {\n    className: \"text-[0.6em] tracking-normal font-bold\"\n  }, \"\u69d8\")), React.createElement(\"div\", {\n    className: \"text-[0.9em] tracking-[0.3em] text-[#333333] font-bold opacity-90\"\n  }, results.calculationDate, \" \u751f\u307e\u308c\")), React.createElement(\"div\", {\n    className: \"w-full flex flex-col w-[90%] mx-auto mb-5\"\n  }, \" \", React.createElement(\"div\", {\n    className: \"flex items-center justify-center mb-2 opacity-60\"\n  }, React.createElement(\"div\", {\n    className: \"w-2.5 h-2.5 rotate-45 bg-[#333333] shrink-0\"\n  })), React.createElement(ExportCoreRow, {\n    label1: \"\u8ecc\u9053\u6570\",\n    val1: results.pathNumber.display,\n    label2: \"\u6761\u4ef6\u4ed8\u3051\",\n    val2: results.oriNumber.final\n  }), React.createElement(ExportCoreRow, {\n    label1: \"\u9b42\u306e\u885d\u52d5\u6570\",\n    val1: results.soulUrge.display,\n    label2: \"\u8868\u73fe\u6570\",\n    val2: results.expression.display\n  }), React.createElement(ExportCoreRow, {\n    label1: \"\u4eba\u683c\u6570\",\n    val1: results.personality.display,\n    label2: \"\u6210\u719f\u6570\",\n    val2: results.maturity.display,\n    noBorder: true,\n    underline: true\n  }), \" \"), React.createElement(\"div\", {\n    className: \"w-full w-[95%] mx-auto mb-5\"\n  }, \" \", React.createElement(SectionHeader, {\n    title: \"PEAKS & CHALLENGES\"\n  }), React.createElement(\"div\", {\n    className: \"w-full grid grid-cols-4 text-center mt-2\"\n  }, React.createElement(ExportCycleCol, {\n    title: \"\u7b2c\uff11\u30d4\u30fc\u30af\",\n    age: results.peaks.ages[0],\n    p: results.peaks.p1,\n    c: results.challenges.c1,\n    borderClass: \"border-r border-[#333333]\/30\"\n  }), React.createElement(ExportCycleCol, {\n    title: \"\u7b2c\uff12\u30d4\u30fc\u30af\",\n    age: results.peaks.ages[1],\n    p: results.peaks.p2,\n    c: results.challenges.c2,\n    borderClass: \"border-r border-[#333333]\/30\"\n  }), React.createElement(ExportCycleCol, {\n    title: \"\u7b2c\uff13\u30d4\u30fc\u30af\",\n    age: results.peaks.ages[2],\n    p: results.peaks.p3,\n    c: results.challenges.c3,\n    borderClass: \"border-r border-[#333333]\/30\"\n  }), React.createElement(ExportCycleCol, {\n    title: \"\u7b2c\uff14\u30d4\u30fc\u30af\",\n    age: results.peaks.ages[3],\n    p: results.peaks.p4,\n    c: results.challenges.c4,\n    borderClass: \"\"\n  }))), React.createElement(\"div\", {\n    className: \"w-full w-[90%] mx-auto mb-5\"\n  }, \" \", React.createElement(SectionHeader, {\n    title: \"TEMPERAMENT\"\n  }), React.createElement(\"div\", {\n    className: \"w-full grid grid-cols-4 text-center mt-2\"\n  }, React.createElement(ExportQualityCol, {\n    title: \"\u7cbe\u795e\",\n    value: results.mind,\n    borderClass: \"border-r border-[#333333]\/30\"\n  }), React.createElement(ExportQualityCol, {\n    title: \"\u611f\u60c5\",\n    value: results.emotion,\n    borderClass: \"border-r border-[#333333]\/30\"\n  }), React.createElement(ExportQualityCol, {\n    title: \"\u8089\u4f53\",\n    value: results.body,\n    borderClass: \"border-r border-[#333333]\/30\"\n  }), React.createElement(ExportQualityCol, {\n    title: \"\u76f4\u611f\",\n    value: results.intuition,\n    borderClass: \"\"\n  }))), React.createElement(\"div\", {\n    className: \"w-full w-[90%] mx-auto mb-5\"\n  }, \" \", React.createElement(SectionHeader, {\n    title: \"PERSONAL YEAR\"\n  }), React.createElement(\"div\", {\n    className: \"flex items-end justify-center gap-12 mt-2\"\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"span\", {\n    className: \"text-[0.8em] tracking-[0.4em] mb-4 text-[#333333] font-bold\"\n  }, \"\u6761\u4ef6\u4ed8\u3051\"), React.createElement(\"span\", {\n    className: \"text-[2.6em] font-mono text-[#333333] leading-none transform -translate-y-1\"\n  }, results.personalYearData.conditions)), React.createElement(\"div\", {\n    className: \"text-[1.8em] pb-1 text-[#333333] opacity-60 transform -translate-y-1\"\n  }, \"+\"), React.createElement(\"div\", {\n    className: \"flex flex-col items-center relative\"\n  }, React.createElement(\"span\", {\n    className: \"text-[0.8em] tracking-[0.4em] mb-4 text-[#333333] font-bold\"\n  }, \"\u4eca\u5e74\u306e\u6570\"), React.createElement(\"span\", {\n    className: \"text-[2.6em] font-mono text-[#333333] leading-none transform -translate-y-1\"\n  }, results.personalYearData.currentYearNum), React.createElement(\"span\", {\n    className: \"text-[0.6em] absolute -bottom-7 text-[#333333] font-bold opacity-70 tracking-widest\"\n  }, results.personalYearData.currentYear, \"\u5e74\")), React.createElement(\"div\", {\n    className: \"text-[1.8em] pb-1 text-[#333333] opacity-60 transform -translate-y-1\"\n  }, \"=\"), React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"span\", {\n    className: \"text-[0.8em] tracking-[0.4em] mb-4 text-[#333333] font-bold\"\n  }, \"\u500b\u4eba\u5e74\"), React.createElement(\"span\", {\n    className: \"text-[2.6em] font-mono text-[#333333] leading-none transform -translate-y-1\"\n  }, results.personalYearData.result)))), React.createElement(\"div\", {\n    className: \"text-[0.7em] tracking-[0.8em] text-[#333333] opacity-40 font-bold mt-auto mb-2\"\n  }, \"A U N S T R O L O G Y\"))))))), isFlashing && React.createElement(\"div\", {\n    className: \"fixed inset-0 z-[9999] pointer-events-none animate-flash-screen\"\n  }));\n}\nfunction NumberItemLight({\n  label,\n  value,\n  description,\n  underline\n}) {\n  const baseClass = \"flex flex-col items-center text-center h-full\";\n  const underlineClass = underline ? \"border-b border-[#333333] pb-4\" : \"\";\n  return React.createElement(\"div\", {\n    className: `${baseClass} ${underlineClass}`\n  }, React.createElement(\"span\", {\n    className: \"text-[1.5em] tracking-[0.1em] mb-4 text-[#333333] font-bold\"\n  }, label), React.createElement(\"div\", {\n    className: \"text-[2.8em] font-light font-mono pb-1 px-6 mb-4 text-[#333333] relative -top-3\"\n  }, value), description && React.createElement(\"div\", {\n    className: \"text-[1.3em] leading-loose tracking-[0.05em] md:tracking-widest inline-block text-center text-[#333333]\/90 text-balance\"\n  }, description));\n}\nfunction WebCycleNode({\n  label,\n  value,\n  age,\n  isPeak,\n  className,\n  style\n}) {\n  const borderClass = isPeak ? 'border-[#333333]' : 'border-[#333333]\/50';\n  return React.createElement(\"div\", {\n    className: `flex flex-col items-center z-10 ${className || ''}`,\n    style: style\n  }, age && React.createElement(\"span\", {\n    className: \"text-[0.9em] tracking-widest mb-1.5 whitespace-nowrap text-[#333333] font-bold\"\n  }, age), React.createElement(\"div\", {\n    className: `w-14 h-14 flex items-center justify-center text-[1.6em] font-mono border rounded-full relative bg-[#fff8dc] ${borderClass}`\n  }, React.createElement(\"span\", {\n    className: \"relative -top-0.5\"\n  }, value)), React.createElement(\"span\", {\n    className: \"text-[0.9em] tracking-[0.1em] mt-1.5 whitespace-nowrap text-[#333333] font-bold\"\n  }, label));\n}\nfunction CycleCol({\n  title,\n  age,\n  p,\n  c,\n  borderClass\n}) {\n  return React.createElement(\"div\", {\n    className: `flex flex-col items-center py-4 md:py-2 ${borderClass}`\n  }, React.createElement(\"span\", {\n    className: \"text-[1.1em] md:text-[0.9em] tracking-[0.2em] mb-2 text-[#333333] font-bold\"\n  }, title), React.createElement(\"span\", {\n    className: \"text-[0.9em] md:text-[0.7em] text-[#333333] opacity-90 font-bold mb-6 tracking-widest\"\n  }, age), React.createElement(\"div\", {\n    className: \"flex w-full justify-center gap-8\"\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"span\", {\n    className: \"text-[1.2em] md:text-[1.1em] text-[#333333] opacity-70 font-bold mb-1 font-mono\"\n  }, \"P\"), React.createElement(\"span\", {\n    className: \"text-[2.4em] md:text-[2em] font-mono text-[#333333] leading-none relative -top-3\"\n  }, p)), React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"span\", {\n    className: \"text-[1.2em] md:text-[1.1em] text-[#333333] opacity-70 font-bold mb-1 font-mono\"\n  }, \"C\"), React.createElement(\"span\", {\n    className: \"text-[2.4em] md:text-[2em] font-mono text-[#333333] leading-none relative -top-3\"\n  }, c))));\n}\nfunction QualityCol({\n  title,\n  value,\n  borderClass\n}) {\n  return React.createElement(\"div\", {\n    className: `flex flex-col items-center justify-center py-4 md:py-2 ${borderClass}`\n  }, React.createElement(\"span\", {\n    className: \"text-[1.2em] md:text-[1em] tracking-[0.4em] mb-6 text-[#333333] font-bold\"\n  }, title), React.createElement(\"span\", {\n    className: \"text-[2.6em] md:text-[2.2em] font-mono text-[#333333] leading-none relative -top-3\"\n  }, value));\n}\nfunction SectionHeader({\n  title\n}) {\n  return React.createElement(\"div\", {\n    className: \"flex items-center justify-center gap-6\"\n  }, React.createElement(\"div\", {\n    className: \"w-2 h-2 rotate-45 bg-[#333333] opacity-60\"\n  }), React.createElement(\"div\", {\n    className: \"text-[1em] tracking-[0.3em] text-[#333333] font-bold uppercase\"\n  }, title), React.createElement(\"div\", {\n    className: \"w-2 h-2 rotate-45 bg-[#333333] opacity-60\"\n  }));\n}\nfunction ExportCoreRow({\n  label1,\n  val1,\n  label2,\n  val2,\n  noBorder,\n  underline\n}) {\n  const borderClass = noBorder ? '' : 'border-b border-[#333333]\/30';\n  const underlineClass = underline ? 'border-b border-[#333333]' : '';\n  return React.createElement(\"div\", {\n    className: `flex justify-between items-center pb-4 pt-5 ${borderClass} ${underlineClass}`\n  }, React.createElement(\"div\", {\n    className: \"flex justify-between items-center w-[46%] relative\"\n  }, \" \", React.createElement(\"span\", {\n    className: \"text-[1.2em] tracking-[0.2em] text-[#333333] font-bold\"\n  }, label1), React.createElement(\"span\", {\n    className: \"text-[2.6em] font-mono text-[#333333] leading-none relative -top-3 transform -translate-y-2\"\n  }, val1), \" \"), React.createElement(\"div\", {\n    className: \"flex justify-between items-center w-[46%] relative\"\n  }, \" \", React.createElement(\"span\", {\n    className: \"text-[1.2em] tracking-[0.2em] text-[#333333] font-bold\"\n  }, label2), React.createElement(\"span\", {\n    className: \"text-[2.6em] font-mono text-[#333333] leading-none relative -top-3 transform -translate-y-2\"\n  }, val2), \" \"));\n}\nfunction ExportCycleCol({\n  title,\n  age,\n  p,\n  c,\n  borderClass\n}) {\n  return React.createElement(\"div\", {\n    className: `flex flex-col items-center pt-2 pb-2 ${borderClass}`\n  }, React.createElement(\"span\", {\n    className: \"text-[0.9em] tracking-[0.2em] mb-2 text-[#333333] font-bold\"\n  }, title), React.createElement(\"span\", {\n    className: \"text-[0.7em] text-[#333333] opacity-90 font-bold mb-6 tracking-widest\"\n  }, age), React.createElement(\"div\", {\n    className: \"flex w-full justify-center gap-8\"\n  }, React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"span\", {\n    className: \"text-[1.1em] text-[#333333] opacity-70 font-bold mb-1 font-mono\"\n  }, \"P\"), React.createElement(\"span\", {\n    className: \"text-[2em] font-mono text-[#333333] leading-none relative -top-3\"\n  }, p)), React.createElement(\"div\", {\n    className: \"flex flex-col items-center\"\n  }, React.createElement(\"span\", {\n    className: \"text-[1.1em] text-[#333333] opacity-70 font-bold mb-1 font-mono\"\n  }, \"C\"), React.createElement(\"span\", {\n    className: \"text-[2em] font-mono text-[#333333] leading-none relative -top-3\"\n  }, c))));\n}\nfunction ExportQualityCol({\n  title,\n  value,\n  borderClass\n}) {\n  return React.createElement(\"div\", {\n    className: `flex flex-col items-center justify-center py-2 ${borderClass}`\n  }, React.createElement(\"span\", {\n    className: \"text-[1em] tracking-[0.4em] mb-6 text-[#333333] font-bold\"\n  }, title), React.createElement(\"span\", {\n    className: \"text-[2.2em] font-mono text-[#333333] leading-none relative -top-3\"\n  }, value));\n}\nconst rootElement = document.getElementById('aunstrology-calculator-root');\nif (rootElement) {\n  const root = ReactDOM.createRoot(rootElement);\n  root.render(React.createElement(App, null));\n}    <\/script>\n    \n\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aunstrology.com\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aunstrology.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aunstrology.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aunstrology.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aunstrology.com\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":2,"href":"https:\/\/aunstrology.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/aunstrology.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/aunstrology.com\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}