/* ts.css — イントロダクションページ(gm/index.html)専用のスタイル。
   grid.cssをベースにしているが、このページはチャット画面ではなく1カラムの読み物なので
   グリッドレイアウト(.layout / .top / .talk-left …)は一切持ち込まない。
   grid.cssから引き継ぐのは「配色トークン・フォント・見出しの作り・マテリアルの質感」だけ。 */

/* ===== 配色トークン(grid.cssと同じ値。意味がずれないよう定義もそのまま引用する) ===== */
:root {
    /* #2c6a5e = 深緑寄りのティール(色相168)。アクセント色 #3366cc(色相220)と50度以上離れている。
       ここではルビ(<rt>)の色として使い、本文より一段落ちた情報であることを示す */
    --text-secondary: #2c6a5e;
    /* リンク色。ボタン・フォーカスリングと同じアクセント色 */
    --text-link: #3366cc;
    /* 本文の下に敷く白のヴェール。grid.cssの --card-bg は 0.6 だが、
       この濃さだと背景写真がほぼ見えなくなる(特にナロー幅でカードが画面いっぱいになるとき)。
       写真を残しつつ本文のコントラストを確保する妥協点として 0.45 にしている */
    --veil: rgba(255, 255, 255, 0.45);
    /* ページ全体の下地。grid.cssのbodyと同じ色 */
    --page-bg: #e1dddd;
}

/* ===== 下地と背景画像 =====
   背景画像はページ全体の最背面に置きたいので、ルート要素(html)の擬似要素に付ける。
   body::beforeでも今の指定なら同じ結果になるが、その場合の重なり順は
   「bodyがスタッキングコンテキストを作っていないこと」に依存する。
   将来bodyにopacity/transform/filter等が付いた瞬間に画像がヴェールの手前へ飛び出すため、
   最初からルート側に置いて重なり順を確定させておく。 */
html {
    /* htmlに背景色を持たせることでbodyの背景がキャンバスへ伝播しなくなり、
       body側を「カード」として描画できるようになる(伝播したままだとカードが消える) */
    background-color: var(--page-bg);
}
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("https://up.dungeon.tokyo/files/7/upload4.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 彩度を落とし明度を上げて主張を弱める。filterは擬似要素にのみ掛かるので
       本文テキストの色・コントラストには影響しない。
       saturate → 色味を抑える / brightness → 下地の明るさに馴染ませる / opacity → 全体の存在感を下げる */
    filter: saturate(0.2) brightness(1.3);
    opacity: 0.22;
}

/* ===== 本文カラム =====
   grid.cssの.layoutが持っていた「中央寄せ・角丸・影」は引き継ぎ、グリッドだけを外す。
   幅1080pxは、grid.cssの1280pxレイアウトにおける.top(本文領域)の実効幅≒1082pxに合わせたもの。
   チャット画面から遷移してきたときに文章の折り返し位置が変わらない */
body {
    max-width: 1080px;
    margin: 16px auto;
    padding: 24px 20px;
    box-sizing: border-box;

    /* 半透明の白を1枚挟んで文字のコントラストを稼ぐ。
       .right(サイドバー)のような backdrop-filter: blur() はここでは使わない。
       ぼかすと背景写真のディテールが完全に溶けて「画像を入れた」意味が無くなるため */
    background: var(--veil);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: #1d1d1f;
    /* このページは<br>で改行を作る地の文が続くため、行間はチャットより広めに取る */
    line-height: 1.7;
}

/* ===== 見出し =====
   grid.cssと同じ「ウェイトと負トラッキング・タイトなリーディングで作る」方針。
   marginだけはこのページ用に調整(節の区切りをはっきりさせる) */
h2, h3 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
h2 {
    margin: 2em 0 0.6em;
}
/* 最初の見出しだけは上の余白を詰める(カード上端との間が開きすぎるため) */
h2:first-child {
    margin-top: 0;
}

/* ===== リンク ===== */
a {
    color: var(--text-link);
}

/* ===== 本文中の画像(ダンジョン/プレイスのイメージ) =====
   原寸(774px等)のままだとスマートフォンの幅でカラムからはみ出し、
   ページ全体に横スクロールが出る。必ず枠に収める。
   height:auto は max-width で縮んだときに縦横比を保つため */
img {
    max-width: 100%;
    height: auto;
}

/* ===== ルビ =====
   「穴(ダンジョン)」「異物(レリック)」などの当て字ルビ。
   既定のままだと親文字と同じ色で目に付きすぎるので、二次色に落として主張を弱める */
rt {
    font-size: 0.5em;
    color: var(--text-secondary);
    /* 親文字より上に十分な間隔を取らないと、行間1.7でも前の行と接触して見える */
    line-height: 1.2;
}

/* ===== お問い合わせフォーム(gm/ts/index.php) =====
   ラベルの中に入力欄を入れる構造(<label>説明<input></label>)なので、
   labelをblockにして中身を縦積みにする */
.contact-form {
    max-width: 40em;
    margin: 1em 0;
}
.contact-form label {
    display: block;
    margin-bottom: 1em;
}
.contact-form input[type="text"],
.contact-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.3em;
    padding: 8px 10px;
    /* 背景写真の上に置くので、入力欄は不透明にして文字の読みやすさを確保する */
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    /* 入力欄はブラウザ既定フォントに戻ってしまうので明示的に継承させる */
    font-family: inherit;
    font-size: 16px; /* iOSで16px未満だとフォーカス時に画面が拡大される */
    color: inherit;
}
.contact-form textarea {
    resize: vertical;
    line-height: 1.5;
}
.contact-form input[type="text"]:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--text-link);
    outline-offset: 1px;
}
.contact-form button {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    background: var(--text-link);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.contact-form button:active {
    /* 押した感触。grid.cssのボタンと同じ語彙(transform: scale(0.97)) */
    transform: scale(0.97);
}

/* 送信完了メッセージ・入力エラー。色だけでなく左の縦線でも区別できるようにする
   (色覚特性によらず両者を見分けられるように) */
.contact-flash,
.contact-error {
    margin: 0.6em 0;
    padding: 8px 12px;
    border-left: 4px solid;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.7);
}
.contact-flash {
    border-left-color: var(--text-secondary);
    color: var(--text-secondary);
}
.contact-error {
    border-left-color: #c0392b;
    color: #c0392b;
}

/* ===== ナロー用 =====
   grid.cssの分岐点(1200px)に合わせる。画面いっぱいまで使い、角丸と外側余白を落として
   モバイルで本文の表示面積を稼ぐ */
@media (max-width: 1200px) {
    body {
        margin: 0;
        padding: 16px 14px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}