/* ============================================
   基本デザイン
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
    --primary: #4caf50;
    --primary-dark: #45a049;
    --bg: #fafafa;
    --card: #fff;
    --border: #ddd;
    --text: #333;
    --muted: #666;
    --shadow:
        0 4px 12px rgba(0,0,0,0.15),
        0 2px 4px rgba(0,0,0,0.10);
}

body {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 2rem;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

input, button, select {
    font-family: 'Open Sans', sans-serif;
}

code {
    font-family: 'Open Sans', monospace;
}

/* ============================================
   Header + Language Dropdown
============================================ */
.header {
    position: relative;
    margin-bottom: 1.5rem;
}

.header h1 {
    margin: 0;
    font-size: 1.8rem;
    text-align: center;
    color: var(--text);
}

.lang-dropdown {
    position: absolute;
    top: 0;
    right: 0;
}

.lang-dropdown select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

/* ============================================
   Cards / Form
============================================ */
/* ============================================
   Form + Zodiac Chart（PCでは横並び）
============================================ */
.form-section {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}

/* カード幅の最適化（右側のチャートが詰まらないように） */
.form-section .card.narrow-card {
    width: 380px;
}

/* モバイルでは縦並びにする */
@media (max-width: 900px) {
    .form-section {
        flex-direction: column;
        align-items: stretch;
    }

    .form-section .card.narrow-card {
        width: auto;
        max-width: 420px;
	}
	
	  /* persona 全体は縦方向に余裕をもたせる */
	.persona-layout {
	flex-direction: column;
	align-items: center;
	}

	/* 左カード（十字）を中央に */
	.persona-left {
	margin: 0 auto;
	padding: 1.2rem;
	}

	/* 十字レイアウトは維持するが、少し縮める */
	.star-chart {
	position: relative;
	width: 460px;      /* ← 550px → 460px に縮小 */
	height: 500px;     /* 比率維持 */
	}

	/* 星カードも少しだけ縮小 */
	.star {
	width: 120px;
	}

	.tarot-icon {
	width: 52px;
	}
}

.card {
    background: var(--card);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.narrow-card {
    margin: 0 auto;
}

label {
    display: block;
    margin: 1rem 0 0.5rem;
    font-weight: 600;
}

input[type="text"], input[type="date"], select {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-sizing: border-box;
}

/* ============================================
   Mystic Purple Button（占いアプリ専用）
============================================ */
button[type="submit"] {
    margin-top: 1.5rem;
    padding: 0.8rem;
    width: 100%;
    border: none;
    border-radius: 8px;

    background: #6B40E0;        /* 神秘紫 */
    color: #ffffff;             /* 白文字（既にOK） */
    font-weight: 700;
    font-size: 1rem;

    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow:
        0 4px 10px rgba(124, 77, 255, 0.35),
        0 2px 4px rgba(0,0,0,0.08);
}

button[type="submit"]:hover {
    background: #5A2FCC;        /* 少し深い神秘紫 */
    box-shadow:
        0 6px 14px rgba(124, 77, 255, 0.45),
        0 2px 6px rgba(0,0,0,0.10);
    transform: translateY(-1px);
}

button[type="submit"]:active {
    transform: translateY(1px);
    box-shadow:
        0 3px 6px rgba(124, 77, 255, 0.30),
        0 1px 3px rgba(0,0,0,0.10);
}

.error-message {
    color: red;
    font-weight: bold;
}

/* ============================================
   干支テーブル（共通）
============================================ */
table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: var(--shadow);
    margin: 1.5rem 0;
}

th, td {
    border: 1px solid #ccc;
    padding: 0.8rem;
    text-align: center;
}

/* ============================================
   干支テーブル（列幅を均一にする）
============================================ */
#zodiac-chart table {
    table-layout: fixed;  /* 均等幅の決め手 */
    width: 100%;
}

#zodiac-chart th,
#zodiac-chart td {
    width: 33%;           /* 3列均等 */
    white-space: normal;  /* スペースでは改行OK（イタリア語対応） */
    word-break: keep-all; /* 単語途中での折返し禁止（Monatssäule対応） */
    overflow-wrap: break-word; /* スペースで折り返しOK */
}

/* ============================================
   干支カードの横幅（PC表示の最終調整）
============================================ */
#zodiac-chart.card {
    width: 400px;     /* PCで綺麗に収まる最適幅 */
    max-width: 100%;  /* モバイルでは縮む */
    margin: 0 auto;   /* 中央寄せ */
}

#zodiac-chart h3 {
    text-align: center;
}

/* ============================================
   生年月日＆性別（横並び）
============================================ */
.row-inline {
    display: flex;
    gap: 32px;
    align-items: flex-end;
}

.row-inline .field-block:first-child { flex: 2; min-width: 160px; }
.row-inline .field-block:last-child  { flex: 1; min-width: 110px; }

#birth_datetime {
    height: 38px;
}

#timezone {
    width: 66% !important;
}

.timezone-note {
    display: block;
    margin-top: 6px;
}

/* ============================================
   十大主星（左：十字レイアウト）
============================================ */
.star-chart {
    position: relative;
    width: 550px;
    height: 580px;
}

.star-label {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--muted);
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

.star {
    position: absolute;
    width: 145px;
    aspect-ratio: 1/1;
    border-radius: 12px;
    box-shadow: var(--shadow);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

.star.north { top: 5%; left: 50%; transform: translateX(-50%); }
.star.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.star.west { top: 50%; left: 18%; transform: translate(-50%, -50%); }
.star.east { top: 50%; right: 18%; transform: translate(50%, -50%); }
.star.south { top: 81%; left: 50%; transform: translate(-50%, -50%); }

.tarot-icon {
    width: 60px;
    margin-bottom: 6px;
}

/* ============================================
   十大主星（右：初年/中年/壮年）
============================================ */
.persona-layout {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.persona-left {
    background: white;
    padding: 1.6rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.persona-right {
    background: white;
    padding: 1.6rem 2.4rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    max-width: 520px;
}

.persona-title {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    font-style: italic;
    opacity: 0.75;
}

/* ============================================
   黄金比デザイン：Stage Cards（初年/中年/壮年）
=============================================== */

/* カード本体 */
.stage-card {
    padding: 1.3rem 1.4rem;
    border-radius: 14px;
    box-shadow: var(--shadow);
    background: #fff;
}

/* ===== 1) タイトル (Era) ===== */
.stage-header {
    font-weight: 700;
    font-size: 0.95rem;          /* 大きすぎない（心理的に柔らかい） */
    margin-bottom: 0.3rem;
    text-align: center;
}

/* ステージタイトル（初年・中年・壮年） */
.stage-header .era {
    font-size: 1.35rem;       /* 大きすぎないけど一番目立つ */
    font-weight: 700;         /* しっかりした太字 */
    color: #333;              /* 深めのグレーで品よく */
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.5px;    /* 少しだけ気品を出す */
}

/* ===== 2) サブタイトル (junida) ===== */
/* Path 名など、最も伝えたい言葉 */
.stage-header .junida {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

/* ===== 3) alias（補足） ===== */
.junida-alias-small {
    display: block;
    text-align: center;
    margin-top: 2px;
    font-style: italic;
    opacity: 0.65;
    font-size: 0.92rem;
    line-height: 1.2;
}

/* ===== 4) 本編（persona 内容） ===== */
.stage-body {
    margin-top: 0.8rem;          /* タイトル → 本編の黄金距離 */
}

.stage-item {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}

.stage-item .dir {
    width: 5rem;
    font-style: italic;
    color: var(--muted);
    font-size: 0.9rem;
}

.stage-item .name {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
}

/* ============================================
   五行アイコン
============================================ */
.star-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.star-icon {
    font-size: 1.4em;
    margin-bottom: 4px;
}

.star-icon.attr-tree::before  { content: "🌳"; }
.star-icon.attr-vine::before  { content: "🌿"; }
.star-icon.attr-sun::before   { content: "☀️"; }
.star-icon.attr-light::before { content: "⚡"; }
.star-icon.attr-mount::before { content: "⛰️"; }
.star-icon.attr-field::before { content: "🌾"; }
.star-icon.attr-steel::before { content: "⚔️"; }
.star-icon.attr-jewel::before { content: "💎"; }
.star-icon.attr-sea::before   { content: "🌊"; }
.star-icon.attr-dew::before   { content: "💧"; }

/* ============================================
   天界五序 & 地界六序（JS → CSS移行）
============================================ */
.tenkai-card-title,
.chikai-card-title {
    font-size: 18px;
    margin-bottom: 10px;
    font-style: italic;
    opacity: 0.6;
}

.tenkai-card-main,
.chikai-card-main {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0;
}

.chikai-sabbatica {
    font-size: 17px;
    font-style: italic;
    line-height: 1.6;
    margin-top: 12px;
}

.chikai-divider {
    margin: 12px 0;
}

/* ============================================
   Mobile（～700px）
============================================ */
@media (max-width: 700px) {
  /* ===== 全体余白をスマホ用に ===== */
  body {
    padding: 1rem;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  /* ===== Header ===== */
  .header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .header h1 {
    font-size: 1.3rem;
  }

  .lang-dropdown {
    position: static;
    align-self: flex-end;
  }

  /* ===== persona 全体 ===== */
  .persona-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    justify-content: flex-start !important;
  }

  /* ===== 左カード全体 ===== */
  .persona-left {
    width: 100%;
    max-width: none;
    padding: 0.4rem 0rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow);
  }

  /* ===== star-chart：縦並び ===== */
  .star-chart {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .star {
    position: static !important;
    width: auto;
    max-width: 200px;
	margin: 0 auto;
	padding: 0.4rem;
	margin-bottom: 0.8rem;
  }

  .tarot-icon {
    width: 40px;
    margin-bottom: 4px;
    max-width: 100%;
    height: auto;
  }

  .star-label {
    font-size: 0.65rem;
    word-break: break-word;
    white-space: normal;
  }

  .star.north  { order: 1; }
  .star.east   { order: 2; }
  .star.center { order: 3; }
  .star.south  { order: 4; }
  .star.west   { order: 5; }
  
  .persona-right {
    padding: 1.2rem 1.6rem;
    max-width: 100%;
  }
  .persona-title {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 1.0rem;
  }

  /* 追加: 重なり防止のためのリセット */
  .star.north,
  .star.center,
  .star.west,
  .star.east,
  .star.south {
    top: auto;
    left: auto;
    right: auto;
    transform: none;   /* ← 最重要 */
  }
}

@media (max-width: 480px) {

	.form-section .card.narrow-card {
		width: 280px;
		padding: 0.8rem 1rem;   /* 上下 / 左右 */
	}

	.row-inline {
		gap: 12px;
	}

	.row-inline .field-block:first-child { flex: 2; min-width: 150px; }

	#zodiac-chart.card {
		width: 280px;
		max-width: 100%;
		margin: 0 auto;
		padding: 0.8rem 1rem;   /* 上下 / 左右 */
	}

	#zodiac-chart table {
		font-size: 0.9rem;
	}

}

/* ============================================
   Sabbatica（天界五序・地界六序）
============================================ */
.tenkai-card,
.chikai-card {
    max-width: 380px;        /* 適度に広く、折り返しにくい */
    margin: 0 auto 24px;
    padding: 24px;
}

/* タイトルは中央揃え */
.tenkai-card-title,
.chikai-card-title {
    text-align: center;
    font-style: italic;
    opacity: 0.7;
    margin-bottom: 10px;
}

/* メイン（象徴名）は中央揃え */
.tenkai-card-main,
.chikai-card-main {
    text-align: center;
    font-weight: 700;
    margin-bottom: 12px;
}

/* 区切り線 — カード幅いっぱいに引かない */
.chikai-divider {
    width: 85%;            /* ここが黄金比のポイント */
    margin: 12px auto;
    opacity: 0.4;
}

/* Sabbatica（文章）は左揃えで読みやすく */
.chikai-sabbatica {
    text-align: left;
    font-style: italic;
    line-height: 1.5;
    padding: 0 6px;        /* 適度に余白を入れて読みやすさUP */
}

/* ============================================
   戻るボタン
============================================ */
.back-button-container {
    margin-bottom: 1rem;
}

.back-button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: #f5f5f5;
    color: #666;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border: 1px solid #ddd;
}

.back-button:hover {
    background: #e8e8e8;
    color: #333;
}

/* ============================================
   タイトルリンク（オーソドックスなスタイル）
============================================ */
.title-link {
    color: #0066cc;
    text-decoration: underline;
}

.title-link:visited {
    color: #551a8b;
}

.title-link:hover {
    color: #0044aa;
}