/* ============================================================================
   static/css/style.css

   【このファイルは何をしているの?】
   ページの「見た目(色・余白・大きさ・配置など)」を決めているファイルです。

   CSS(シーエスエス)は、HTMLで作った骨組みに対して
   「ここは紫色にして」「ここは真ん中に寄せて」「ここは大きな文字にして」
   といった "お化粧" をしていく言語です。

   HTML側では、たとえば
     <h1>タイトル</h1>
   のように書くだけで、「これは "h1" というタグですよ」としか
   分かりませんが、このCSSファイルの中に

     h1 { color: gold; }

   のように書くことで、「h1というタグは、金色の文字にしてね」という
   お化粧のルールを、HTMLとは別の場所にまとめて管理できます。
   ============================================================================ */

/* --------------------------------------------------------------------------
   ":root" は「ページ全体」を指す特別な場所です。
   ここに "--好きな名前" という形で色などの値を登録しておくと、
   CSSの中の色々な場所から "var(--好きな名前)" という書き方で
   使い回せるようになります(プログラムでいう「変数」と同じ考え方です)。

   こうしておくと、たとえば後で「テーマカラーを紫から青に変えたい」と
   思ったときも、ここの1行を直すだけで、ページ全体の色が変わります。
-------------------------------------------------------------------------- */
:root {
    --color-bg: #12101c;              /* ページ全体の背景色(夜空をイメージした濃い紺紫) */
    --color-bg-panel: #1c1930;        /* フォームなど、箱に見せたい部分の背景色 */
    --color-bg-panel-alt: #241f3d;    /* テーブルの縞模様などに使う、少し明るい背景色 */
    --color-border: #3a3560;          /* 枠線の色 */
    --color-text: #f2eefc;            /* 基本の文字色(白に近いうすい紫) */
    --color-text-muted: #b3a9d6;      /* 補足文などの、少し薄い文字色 */
    --color-accent: #d9b64c;          /* 金色。見出しやボタンなど、目立たせたい部分 */
    --color-accent-strong: #f0cf6b;   /* 金色の、ボタンのホバー(マウスを乗せたとき)用 */
    --color-harmonious: #6fb1e0;      /* 調和的なアスペクト(トライン・セクスタイル)の色 */
    --color-tense: #e07a7a;           /* 緊張系のアスペクト(スクエア・オポジション)の色 */
    --color-neutral: #b79ee0;         /* 中立のアスペクト(合)の色 */
    --color-error: #ff8a8a;           /* エラーメッセージの色 */
    --color-on-accent: #1c1930;       /* 金色のボタンの上に載せる、濃い文字色 */

    --color-header-bg: rgba(18, 32, 92, 0.62);  /* ヘッダーとフッターの背景色。透過したネイビーブルー */
    --color-header-text: #f2eefc;     /* ヘッダーの文字色。白に近いうすい紫(サイト名と「いま開いているページ」を除く) */
    --color-header-accent: #f0d68f;   /* ヘッダーの中の明るい金色。サイト名と、いま開いているページ(文字と下線)だけに使う */
    --color-header-line: rgba(214, 180, 104, 0.35);  /* ヘッダーとフッターの中の、区切り線やボタンの枠線の色 */

    --max-content-width: 880px;
    --border-radius: 12px;
}

/* --------------------------------------------------------------------------
   "*" は「すべての要素」を意味します。
   ブラウザは、何も指定しなくても要素の周りに少しの余白(マージン)を
   自動でつけてしまうことがあり、それがデザインを崩す原因になりがちなので、
   最初に "余計な余白は0にリセットする" のが、Web制作の定番の習慣です。
-------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;

    /* 本文が短いページでも、フッターが画面の一番下に来るようにします。
       (main が余った高さを埋めます。下の "main" のルールを参照) */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   全ページ共通の骨組み(templates/base.html)

   "main" は、ヘッダーとフッターの間の余った高さを埋めます。
   ".container" は、本文を中央に寄せて、横幅が広くなりすぎないようにする
   入れ物です。
-------------------------------------------------------------------------- */
main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 16px 56px;
}

/* 暗い背景の上でも読めるように、リンクは金色にします。 */
a {
    color: var(--color-accent);
}

a:hover {
    color: var(--color-accent-strong);
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* 画面には表示しないけれど、画面の読み上げソフトには読ませたい文字 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* キーボードだけで操作する人が、メニューを飛ばして本文へ移動するためのリンク。
   普通は画面の外に隠れていて、キーボードで選んだときだけ現れます。 */
.skip-link {
    position: absolute;
    top: -60px;
    left: 8px;
    z-index: 100;
    padding: 8px 14px;
    border-radius: 0 0 8px 8px;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: bold;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* --------------------------------------------------------------------------
   ヘッダー(サイト名とメニュー)

   パソコンでは、サイト名の下にメニューを中央寄せで横に並べます。
   スマートフォン(画面の幅が720px以下)では、サイト名の横に
   ハンバーガーボタンを置き、メニューはボタンを押したときだけ開きます
   (ファイルの一番下の @media を参照)。
-------------------------------------------------------------------------- */
/* 背景は半透明のネイビーブルーです。 */
.site-header {
    background-color: var(--color-header-bg);
    border-bottom: 1px solid var(--color-header-line);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* キーボードで選んだときの枠は、ネイビーの背景の上で見える、明るい金色にします。 */
.site-header a:focus-visible,
.site-header button:focus-visible {
    outline-color: var(--color-accent-strong);
}

/* パソコン表示では、左にサイト名、右にメニューを並べた1段のヘッダーです。
   幅が足りないときは、メニューがサイト名の下へ折り返します。 */
.site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 16px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 6px 16px;
}

.site-title {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

/* サイト名は、ネイビーの背景の上で読めるように、明るい金色です。 */
.site-title a {
    color: var(--color-header-accent);
    text-decoration: none;
}


.site-nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 8px;
}

/* メニューの項目は、すべて太字です。 */
.site-nav-list a {
    display: block;
    padding: 6px 10px;
    font-weight: bold;
    color: var(--color-header-text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

/* マウスを乗せたときは、文字はそのまま、下線だけ金色にして「押せる」ことを示します。 */
.site-nav-list a:hover {
    color: var(--color-header-text);
    border-bottom-color: var(--color-accent);
}

/* いま開いているページのメニュー項目(金色の文字と、金色の下線) */
.site-nav-list a.is-current {
    color: var(--color-header-accent);
    border-bottom-color: var(--color-header-accent);
}

/* ハンバーガーボタンは、スマートフォン用の表示のときだけ出します。 */
.nav-toggle {
    display: none;
}

/* --------------------------------------------------------------------------
   ホームの大きな月の写真(ヒーロー)
   写真の上に、下へ向かって濃くなる暗い膜(グラデーション)を重ねて、
   下の方に置いた文字が読みやすいようにしています。
-------------------------------------------------------------------------- */
.hero {
    /* main の余った高さを写真が埋めるので、フッターの上に空白の帯ができません。 */
    flex: 1 0 auto;
    min-height: 68vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-image:
        linear-gradient(to bottom, rgba(18, 16, 28, 0) 40%, rgba(18, 16, 28, 0.9) 100%),
        url("../images/moon-dusk.jpg");
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
}

.hero-text {
    max-width: 640px;
    padding: 40px 16px 56px;
    text-align: center;
    font-size: 1.1rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   ページの見出し部分(Documents / Natal chart / About / 404 で共通)
-------------------------------------------------------------------------- */
.page-header {
    width: 100%;
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 40px 16px 24px;
    text-align: center;
}

.page-header h1 {
    color: var(--color-accent);
    font-size: 2rem;
    letter-spacing: 0.05em;
}

.page-subtitle {
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   本文を載せる「箱(パネル)」と、文章の読みやすさの調整
-------------------------------------------------------------------------- */
.panel {
    background-color: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 24px;
}

.panel + .panel {
    margin-top: 24px;
}

.prose h2 {
    color: var(--color-accent);
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.prose h3 {
    color: var(--color-text);
    font-size: 1.05rem;
    margin: 20px 0 8px;
}

.prose h2 + p,
.prose h3 + p {
    margin-top: 0;
}

.prose.legal h2 {
    margin-top: 28px;
}

.prose.legal ul {
    margin: 8px 0 0 24px;
}

.prose.legal li + li {
    margin-top: 8px;
}

.prose.legal a {
    color: var(--color-accent);
}

.prose p + p {
    margin-top: 12px;
}

/* 金色のリンクボタン(Documents と 404 で使います) */
.button {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.button:hover {
    background-color: var(--color-accent-strong);
    color: var(--color-on-accent);
}

.button-secondary {
    background-color: transparent;
    color: var(--color-accent);
}

.button-secondary:hover {
    background-color: rgba(217, 182, 76, 0.12);
    color: var(--color-accent-strong);
}

/* --------------------------------------------------------------------------
   Documents ページ(本の紹介)
-------------------------------------------------------------------------- */
.document-panel {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.book-cover-link {
    /* 本文が長くて .document-text が伸びても、表紙画像側を
       縮めさせず、パネルの高さの方で吸収させます。 */
    flex-shrink: 0;
}

.book-cover {
    display: block;
    width: 212px;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* The Lunar Codex の表紙は元画像が200x300pxなので、
   .book-cover の共通幅(212px)を使わず、原寸で表示します。 */
.book-cover-native {
    width: 200px;
}

.document-text p + p {
    margin-top: 10px;
}

.document-text .button {
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   About ページ
-------------------------------------------------------------------------- */
.about-photo {
    margin-bottom: 24px;
}

.about-photo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

/* メールアドレスの画像は、透明な背景に黒い文字なので、
   暗い背景の上では見えません。明るい下地を敷いて読めるようにしています。 */
.contact-address {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    background-color: var(--color-text);
    line-height: 0;
}

.contact-address img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   字幕の見方(Subtitles)ページ
   スクリーンショットは横幅500pxで表示するので、ページ全体の幅もそれに合わせて
   せまくしています。(500px + 箱の左右の余白)
-------------------------------------------------------------------------- */
.howto-width {
    max-width: 596px;
}

.howto-channel a {
    display: block;
    line-height: 0;
}

.howto-channel img {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.howto-channel a:hover img,
.howto-channel a:focus-visible img {
    border-color: var(--color-accent);
}

.howto-steps {
    list-style: none;
    counter-reset: howto;
    margin-top: 24px;
}

.howto-step {
    counter-increment: howto;
    margin-bottom: 20px;
    padding: 18px;
    background-color: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.howto-step-text {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 1.05rem;
}

.howto-step-text::before {
    content: counter(howto);
    flex: 0 0 auto;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: bold;
    line-height: 2em;
    text-align: center;
}

.howto-figure img {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* 「For PC」「For Smartphones」の見出し */
.howto-platform {
    margin-top: 40px;
    color: var(--color-accent);
    font-size: 1.5rem;
    text-align: center;
}

.howto-platform + .howto-steps {
    margin-top: 16px;
}

/* 手順の文章が「見出し(太字)+説明」の2段になるときの書式 */
.howto-step-body strong {
    display: block;
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   404 ページ
-------------------------------------------------------------------------- */
.not-found .button {
    margin: 8px 8px 0 0;
}

/* --------------------------------------------------------------------------
   入力フォーム
-------------------------------------------------------------------------- */
.input-section {
    background-color: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 24px;
}

.form-row {
    margin-bottom: 20px;
}

.form-row-inline {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.form-row-inline > div {
    flex: 1;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
    color: var(--color-text);
}

.required {
    color: var(--color-tense);
    font-size: 0.8em;
    font-weight: normal;
    border: 1px solid var(--color-tense);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 4px;
}

input[type="text"],
input[type="time"],
input[type="number"],
select {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 1rem;
}

textarea {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

input[readonly] {
    color: var(--color-text-muted);
}

/* 選択欄(Birth Date の Month / Day)。
   ブラウザ標準の「▼」の矢印は、暗い背景では見えにくいので、自前の矢印に置き換えます。 */
select {
    padding-right: 36px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b3a9d6' d='M1.4 0 6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* 何も選んでいない選択欄は、入力欄の「Year」と同じように、薄い色で表示します。 */
select.is-empty {
    color: #757575;
}

/* 開いた選択肢の一覧の色(暗い背景に、明るい文字) */
select option {
    background-color: var(--color-bg-panel);
    color: var(--color-text);
}

/* Birth Date の Year / Month / Day の3つの欄を、1行に並べます。 */
.date-fields {
    display: grid;
    grid-template-columns: 1fr 1.7fr 1fr;
    gap: 12px;
}

/* Birth Time の「時 : 分」の2つの欄を、1行に並べます。 */
.time-fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

/* 「I don't know.」とチェックボックスを、チェックボックスが左、文字が右の順に並べます。 */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-weight: normal;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.field-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.field-hint-warning {
    color: var(--color-accent);
}

/* 出生地の検索候補(オートコンプリートのドロップダウン) */
.place-search-wrapper {
    position: relative;
}

.place-suggestions {
    list-style: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--color-bg-panel-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
}

.place-suggestions li {
    padding: 10px 12px;
    cursor: pointer;
}

.place-suggestions li:hover,
.place-suggestions li.is-active {
    background-color: var(--color-border);
}

.place-preview-map {
    margin-top: 10px;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

button[type="submit"] {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
    font-weight: bold;
    color: #1c1930;
    background-color: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

button[type="submit"]:hover {
    background-color: var(--color-accent-strong);
}

button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Contactページ用。無効なボタンは、はっきりグレーにします。 */
#contact-submit:disabled {
    background-color: #6b6880;
    color: #d0cde0;
    opacity: 1;
}

.field-error {
    margin-top: 6px;
    color: var(--color-error);
    font-size: 0.9rem;
}

/* ハニーポット欄は、画面の外に追い出して人間には見えなくします(display:noneだと、賢いボットに気づかれるため)。 */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-status {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    color: var(--color-accent);
    text-align: center;
}

.contact-privacy {
    margin-top: 16px;
}

.loading-indicator {
    margin-top: 16px;
    text-align: center;
    color: var(--color-text-muted);
}

.error-message {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--color-error);
    border-radius: 8px;
    color: var(--color-error);
    background-color: rgba(255, 138, 138, 0.08);
}

/* --------------------------------------------------------------------------
   結果表示エリア
-------------------------------------------------------------------------- */
.result-section {
    margin-top: 32px;
    background-color: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 24px;
}

.result-section h2 {
    color: var(--color-accent);
    margin-bottom: 8px;
}

.result-summary {
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.chart-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.chart-wrapper svg {
    width: 100%;
    max-width: 560px;
    height: auto;
}

.result-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.result-table-block h3 {
    color: var(--color-accent);
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
}

.data-table tbody tr:nth-child(odd) {
    background-color: var(--color-bg-panel-alt);
}

.retrograde-mark {
    color: var(--color-tense);
    font-weight: bold;
}

.aspects-list {
    list-style: none;
    font-size: 0.92rem;
}

.aspects-list li {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.aspect-badge {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aspect-badge.nature-harmonious { background-color: var(--color-harmonious); }
.aspect-badge.nature-tense { background-color: var(--color-tense); }
.aspect-badge.nature-neutral { background-color: var(--color-neutral); }

/* --------------------------------------------------------------------------
   Documents ページの購入ガイド(How to Get the PDF with Translation feature)
-------------------------------------------------------------------------- */
.guide-pointer {
    margin-top: 12px;
    font-size: 0.9rem;
}

.guide-pointer a {
    color: var(--color-accent);
}

.purchase-guide {
    margin-top: 24px;
}

/* 見出しを <summary> の中に入れて、クリックで開閉できるようにします。 */
.purchase-guide summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.purchase-guide summary::-webkit-details-marker {
    display: none;
}

.purchase-guide summary::before {
    content: "\25B8";
    color: var(--color-accent);
    transition: transform 0.15s ease-in-out;
}

.purchase-guide details[open] > summary::before {
    transform: rotate(90deg);
}

.purchase-guide summary h2 {
    margin-bottom: 0;
}

.purchase-guide details[open] > summary {
    margin-bottom: 16px;
}

.guide-steps {
    margin: 20px 0 0 24px;
}

.guide-steps > li {
    margin-top: 28px;
}

.guide-steps > li::marker {
    color: var(--color-accent);
    font-weight: bold;
}

.guide-steps h3 {
    color: var(--color-text);
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.guide-figure {
    margin-top: 14px;
}

.guide-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

/* 最後の画像: 縮小表示 ⇄ 原寸表示。原寸は画面より広いとき、横にスクロールできます。 */
.zoom-viewport {
    overflow-x: auto;
}

.zoom-toggle {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.guide-figure-zoom .zoom-toggle img {
    width: 340px;
    max-width: 100%;
}

.guide-figure-zoom.is-zoomed .zoom-toggle {
    cursor: zoom-out;
}

.guide-figure-zoom.is-zoomed .zoom-toggle img {
    width: 762px;
    max-width: none;
}

/* --------------------------------------------------------------------------
   フッター
-------------------------------------------------------------------------- */
.site-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--color-header-line);
    background-color: var(--color-header-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.site-footer p {
    /* body の line-height (1.7) は段落向けなので、フッターの短い1行の
       キャプションには行間が広すぎるため、詰め気味の値に上書きします。 */
    line-height: 1.3;
}

.site-footer p + p {
    margin-top: 2px;
}

.site-footer a {
    color: var(--color-header-text);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-header-accent);
}

.site-footer-links a {
    margin: 0 8px;
}

.site-footer-note {
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   スマートフォンなど、画面の幅が狭い場合の調整
   "@media" は「こういう画面のときだけ、このルールを使ってね」という
   条件分岐です。ここでは「画面の幅が600px以下のとき」を指定しています。
-------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .page-header {
        padding-top: 28px;
    }

    .page-header h1 {
        font-size: 1.5rem;
    }

    .panel,
    .input-section,
    .result-section {
        padding: 16px;
    }

    .form-row-inline {
        flex-direction: column;
        gap: 12px;
    }

    .date-fields {
        gap: 8px;
    }

    /* Documents ページは、表紙の画像を上、文章を下に縦に並べます。 */
    .document-panel {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .hero {
        min-height: 60vh;
    }

    .hero-text {
        padding-bottom: 40px;
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------
   ハンバーガーメニュー(画面の幅が720px以下のとき)

   ".js" は、JavaScriptが使えるブラウザでだけ <html> につく目印です
   (templates/base.html を参照)。目印があるときだけメニューを隠して、
   ハンバーガーボタンで開け閉めします。JavaScriptが使えないときは、
   メニューが縦に並んだまま常に表示されるので、ページ移動ができます。
-------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .site-header-inner {
        display: block;
        position: relative;
        padding: 12px 16px;
        text-align: left;
    }

    .site-brand {
        padding-right: 56px;
    }

    .site-title {
        font-size: 1.4rem;
    }

    .site-nav {
        margin-top: 8px;
    }

    .site-nav-list {
        flex-direction: column;
        gap: 0;
    }

    .site-nav-list a {
        padding: 12px 8px;
        border-top: 1px solid var(--color-header-line);
        border-bottom: 2px solid transparent;
    }

    /* いま開いているページは、パソコンのときと同じ、金色の文字と金色の下線です。 */
    .site-nav-list a.is-current {
        border-bottom-color: var(--color-header-accent);
    }

    .js .site-nav {
        display: none;
    }

    .js .site-nav.is-open {
        display: block;
    }

    .js .nav-toggle {
        position: absolute;
        top: 12px;
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--color-header-line);
        border-radius: 8px;
        background-color: transparent;
        cursor: pointer;
    }

    /* 三本線は、1本の線(本体)と、その上下の線(::before / ::after)で描いています。 */
    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background-color: var(--color-header-text);
        transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    }

    .nav-toggle-bars {
        position: relative;
    }

    .nav-toggle-bars::before,
    .nav-toggle-bars::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .nav-toggle-bars::before {
        top: -7px;
    }

    .nav-toggle-bars::after {
        top: 7px;
    }

    /* メニューが開いているときは、三本線をバツ印(×)に変えます。 */
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars {
        background-color: transparent;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
        top: 0;
        transform: rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
        top: 0;
        transform: rotate(-45deg);
    }
}

/* --------------------------------------------------------------------------
   Print ボタン(画面での見た目)
-------------------------------------------------------------------------- */
.print-actions {
    margin-top: 28px;
    text-align: center;
}

.print-actions .field-hint {
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   印刷用のデザイン(Natal Chart の結果だけを、A4縦・2枚に収めます)
   1枚目: 見出し・生まれた日時の説明・ホイール図
   2枚目: 4つの表(天体・アングル・ハウス・アスペクト)
   インクを節約し読みやすくするため、白地に黒文字で印刷します。
-------------------------------------------------------------------------- */
@page {
    size: A4 portrait;
    margin: 12mm;
}

@media print {
    /* 結果以外(ヘッダー・入力フォーム・フッターなど)は紙に出しません。 */
    .skip-link,
    .site-header,
    .site-footer,
    main .page-header,
    main .container > :not(#result-section),
    .print-actions {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
        color: #000 !important;
        display: block;
        min-height: 0;
        font-size: 10pt;
        line-height: 1.4;
    }

    main .container {
        max-width: none;
        padding: 0;
    }

    .result-section {
        display: block;
        margin: 0;
        padding: 0;
        background: #fff;
        border: 0;
        border-radius: 0;
        color: #000;
    }

    .result-section[hidden] {
        display: none !important;
    }

    .result-section h2,
    .result-table-block h3 {
        color: #000;
    }

    .result-section h2 {
        font-size: 18pt;
        text-align: center;
    }

    .result-summary {
        color: #333;
        font-size: 9pt;
        margin-bottom: 8mm;
    }

    /* 1枚目: ホイール図。暗い配色を、白地で見やすい配色に反転させます。 */
    .chart-wrapper {
        margin-bottom: 0;
        break-after: page;
        page-break-after: always;
    }

    .chart-wrapper svg {
        width: 100%;
        max-width: 165mm;
        filter: invert(1) hue-rotate(180deg);
    }

    /* 2枚目: 表を2列に並べて、1枚に収めます。 */
    .result-tables {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6mm;
        align-items: start;
    }

    .result-table-block {
        break-inside: avoid;
    }

    .result-table-block:nth-child(4) {
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    .result-table-block h3 {
        font-size: 10.5pt;
        margin-bottom: 2mm;
    }

    .data-table,
    .aspects-list {
        font-size: 8.5pt;
    }

    .data-table th,
    .data-table td,
    .aspects-list li {
        padding: 1.2mm 1.5mm;
        border-bottom: 0.3mm solid #bbb;
        color: #000;
    }

    .data-table tbody tr:nth-child(odd) {
        background-color: #f2f2f2;
    }

    .retrograde-mark {
        color: #b00020;
    }

    .aspect-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Videos ページ(templates/videos.html)

   ・上段は「初めての方におすすめ」の3本、下段はジャンルで絞り込める全動画の一覧です。
   ・パソコンでは、サムネイルを左、タイトルと解説を右に並べた横長の行にします。
   ・スマートフォン(720px以下)では、サムネイルを上、文字を下に縦に並べます。
   ・".js" の付いたルールは、JavaScriptが使えるときだけ有効です(static/js/videos.js が動くとき)。
-------------------------------------------------------------------------- */
.videos-width {
    max-width: 1040px;
}

.page-header.videos-width .page-subtitle {
    max-width: 700px;
    margin: 12px auto 0;
}

.video-section + .video-section {
    margin-top: 56px;
}

.video-section h2 {
    color: var(--color-accent);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.video-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 24px;
}

.video-count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* サムネイル(16:9)。動画の再生時間は、画像の右下に重ねて表示します。 */
.video-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-bg-panel-alt);
}

.video-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.82);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* ---- おすすめの3本 ---- */
.video-picks {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.video-pick {
    /* 読み上げ専用の隠し文字(.visually-hidden)が、カードの外へはみ出して
       ページ全体を横に広げないよう、カードを位置の基準にします。 */
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text);
    text-decoration: none;
}

.video-pick:hover,
.video-pick:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.video-pick-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 18px;
}

.video-genre {
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: bold;
}

.video-pick-title {
    font-weight: bold;
    line-height: 1.5;
}

/* ---- ジャンルの絞り込みボタン(JavaScriptが使えるときだけ表示) ---- */
.video-filter {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.js .video-filter {
    display: flex;
}

.video-filter-button {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background-color: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.video-filter-button:hover {
    border-color: var(--color-accent);
}

.video-filter-button[aria-pressed="true"] {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
}

/* ---- 動画の一覧(パソコン:横長の行) ---- */
.video-list {
    list-style: none;
}

.video-item {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 24px 0;
    border-top: 1px solid var(--color-border);
}

.video-item:last-child {
    border-bottom: 1px solid var(--color-border);
}

/* "hidden" を付けた動画は、上の display:flex に負けずに隠します。 */
.video-item[hidden],
.video-more[hidden],
.video-show-more[hidden] {
    display: none;
}

.video-item .video-thumb {
    flex: 0 0 320px;
    border-radius: 10px;
}

.video-body {
    flex: 1 1 0;
    min-width: 0;
}

.video-title {
    font-size: 1.15rem;
    line-height: 1.5;
}

.video-title a {
    color: var(--color-text);
    text-decoration: none;
}

.video-title a:hover,
.video-title a:focus-visible {
    color: var(--color-accent-strong);
    text-decoration: underline;
}

.video-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.video-genre-tag {
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-accent);
}

/* 解説。JavaScriptが使えるときは、3行ぶんの高さで切って、"more" で全文を開きます。 */
.video-desc {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.7;
}

.video-desc p + p {
    margin-top: 0.8em;
}

.js .video-desc:not(.is-open) {
    max-height: calc(1.7em * 3);
    overflow: hidden;
}

/* 切れている解説は、最後の行をうっすら消して、続きがあることを示します。 */
.js .video-desc.is-clipped:not(.is-open) {
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
    mask-image: linear-gradient(to bottom, #000 65%, transparent);
}

.video-more {
    min-height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-accent);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

.video-more:hover {
    color: var(--color-accent-strong);
    text-decoration: underline;
}

.video-show-more {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background-color: var(--color-bg-panel);
    color: var(--color-text);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

.video-show-more:hover {
    border-color: var(--color-accent);
}

/* ---- スマートフォン(720px以下) ---- */
@media (max-width: 720px) {
    .video-section + .video-section {
        margin-top: 40px;
    }

    .video-section h2 {
        font-size: 1.25rem;
        margin-bottom: 14px;
    }

    /* おすすめの3本は、横にスクロールして見ます。 */
    .video-picks {
        display: flex;
        gap: 14px;
        padding-bottom: 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .video-picks li {
        flex: 0 0 260px;
        scroll-snap-align: start;
    }

    .video-pick-title {
        font-size: 0.95rem;
    }

    /* 絞り込みボタンも、横にスクロールします。 */
    .video-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .video-filter-button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* 動画は、サムネイルを上、文字を下に縦に並べます。 */
    .video-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 20px 0;
    }

    .video-item .video-thumb {
        flex: none;
        width: 100%;
    }

    .video-title {
        font-size: 1rem;
    }

    .video-meta {
        font-size: 0.8rem;
    }

    .video-desc {
        font-size: 0.9rem;
    }
}

/* --------------------------------------------------------------------------
   About ページの自己紹介動画(Video 0)

   Videos ページの一覧と同じ形の動画カードを、枠つきの箱にして、
   Official Links の中で目立たせます。
-------------------------------------------------------------------------- */
.video-item.video-feature {
    margin: 12px 0 8px;
    padding: 16px;
    background-color: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

/* About ページの本文の中でも、動画のタイトルは Videos ページと同じ見た目にします。 */
.video-feature .video-title {
    margin-top: 0;
    color: var(--color-text);
}

@media (max-width: 720px) {
    .video-item.video-feature {
        padding: 12px;
    }
}

/* --------------------------------------------------------------------------
   About ページの Official Links(公式サイトなどの、長いURLのリンク)

   長いURLが画面の幅からはみ出して、スマートフォンで横にスクロールできてしまうのを防ぎます。
   ・どの画面でも、はみ出す場合はURLの途中で折り返します(overflow-wrap)。
   ・スマートフォンでは、URLを項目名の下の行に分けて表示します。
-------------------------------------------------------------------------- */
.official-link {
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .official-link {
        display: block;
    }
}