/*
 * ぐりたび 共通デザイントークン
 *
 * 各画面のtplの<style>より前に読み込む。画面固有のスタイルは従来どおり
 * 各tpl内に置き、色・角丸・影・書体はここのトークン(var)を参照する。
 * 世界観: 和紙(生成り)×墨×朱肉。書体は「判子=明朝」の世界観をUIの
 * 見出し・数字にも通す（本文は可読性優先でゴシックのまま）
 */

/* 見出し・数字用の明朝。iOS等は端末のヒラギノ明朝(local)を優先し、
   明朝を持たない端末(主にAndroid)だけwoff2(OGPカードと同じNoto Serif JP
   SemiBoldサブセット・OFLライセンス文書はfonts/OFL.txt)をダウンロードする */
@font-face {
    font-family: 'TabiSerif';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Hiragino Mincho ProN W6'), local('HiraMinProN-W6'),
         url('../fonts/NotoSerifJP-SemiBold-subset.woff2') format('woff2');
}

:root {
    /* 色: 和紙・墨・朱肉 */
    --tabi-washi-1: #f7f2e7;
    --tabi-washi-2: #efe5d0;
    --tabi-sumi: #4a3f2e;        /* 本文 */
    --tabi-shu: #a03c2e;         /* 朱肉(アクセント・CTA) */
    --tabi-brown: #6b5b43;       /* 見出し茶 */
    --tabi-sand: #6f6049;        /* 補助テキスト（生成り背景でも4.5:1以上） */
    --tabi-faint: #746247;       /* 弱いテキスト・ヒント（小さい文字の可読性を確保） */
    --tabi-card: #fffdf5;        /* カードの生成り */
    --tabi-line: #e8dcc0;        /* カード罫線 */
    --tabi-line-strong: #e0d4b8; /* フォーム罫線 */

    /* 形 */
    --tabi-radius: 14px;
    --tabi-radius-s: 10px;
    --tabi-shadow: 0 2px 8px rgba(120, 90, 40, 0.14);
    --tabi-shadow-s: 0 2px 6px rgba(120, 90, 40, 0.12);

    /* 書体 */
    --tabi-serif: 'TabiSerif', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
    --tabi-gothic: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--tabi-gothic);
    /* 和紙の繊維テクスチャ(シームレスタイル)をグラデにmultiplyで重ねる。
       タイルは「平均=白・繊維の濃淡を3倍」に加工済み(平均輝度253/255)なので、
       multiplyしてもグラデのトークン色はほぼ変わらない。非対応ブラウザでは
       ほぼ白のタイルがそのまま出るだけで可読性は損なわれない。
       画像差し替え時はurlの?v=を上げること(CSSと違いmtime連動がない) */
    background: url('../img/tabi/washi_tile.png?v=2') repeat,
        linear-gradient(160deg, var(--tabi-washi-1) 0%, var(--tabi-washi-2) 100%);
    background-blend-mode: multiply;
    min-height: 100vh;
    color: var(--tabi-sumi);
}

/* 見出し・数字の明朝ユーティリティ */
.tabiSerif { font-family: var(--tabi-serif); }

/* 画面をまたいで使う基本部品。個別tplで同じ見た目を再定義しないための共通形 */
.container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 16px;
}

/* ---- 自前ヘッダー＋ハンバーガーメニュー（2026-08-05採用。旧・下部ドックを置き換え） ---- */
.tabiHeader {
    position: sticky;
    top: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* containerのpadding 16pxを打ち消して全幅にする */
    margin: -16px -16px 6px;
    padding: 8px 4px 8px 16px;
    background: rgba(247, 242, 231, 0.94);
    border-bottom: 1px solid var(--tabi-line-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tabiHeader .brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 12px;
    text-decoration: none;
}
.tabiHeader .brand img {
    display: block;
    width: 132px;
    height: auto;
}
.tabiHeaderActions {
    display: flex;
    align-items: center;
    gap: 2px;
}
/* スタンプ帳の常設ショートカット（メニューに畳むとワンタップで行けなくなるため） */
.headerIconBtn {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--tabi-shu);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.headerIconBtn svg { width: 20px; height: 20px; }
.headerIconBtn img { width: 22px; height: 22px; display: block; }
/* お知らせベル（配信期間中のみJSが表示。未読は右上に朱ドット） */
.newsBell {
    position: relative;
    width: 42px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tabi-brown);
    text-decoration: none;
}
.newsBell svg { width: 22px; height: 22px; }
.newsBellDot {
    position: absolute;
    top: 8px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tabi-shu);
    border: 1.5px solid var(--tabi-washi-1);
}

.menuBtn {
    width: 48px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--tabi-brown);
    cursor: pointer;
}
.menuBtn svg { width: 26px; height: 26px; }

.tabiMenuOverlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(40, 30, 10, 0.45);
    display: none;
}
.tabiMenuOverlay.open { display: block; }
.tabiMenu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(78vw, 300px);
    background: var(--tabi-washi-1);
    border-left: 1px solid var(--tabi-line-strong);
    box-shadow: -6px 0 24px rgba(74, 63, 46, 0.25);
    display: flex;
    flex-direction: column;
    padding: 0 0 calc(16px + env(safe-area-inset-bottom));
}
.tabiMenuHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 6px 12px 20px;
    border-bottom: 1px solid var(--tabi-line-strong);
    font-family: var(--tabi-serif);
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--tabi-sand);
}
.menuClose {
    width: 48px;
    height: 44px;
    border: none;
    background: none;
    color: var(--tabi-sand);
    font-size: 17px;
    cursor: pointer;
}
.tabiMenu a {
    display: block;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: bold;
    color: var(--tabi-sumi);
    text-decoration: none;
    border-bottom: 1px dashed var(--tabi-line);
}

/* フッター: GREEへの導線（8/5決定「フッターにGREE」） */
.tabiFooter {
    margin: 26px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--tabi-line-strong);
    text-align: center;
    font-size: 13px;
}
.tabiFooter a { color: var(--tabi-sand); }
/* GREE共通フッター相当のリンク列（区切り線つき2段・2026-09-08） */
.tabiFooterLinks ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 4px;
    padding: 0;
    font-size: 12px;
}
.tabiFooterLinks li { display: flex; align-items: center; }
.tabiFooterLinks li + li::before {
    content: "";
    width: 1px;
    height: 11px;
    background: var(--tabi-line-strong);
    margin: 0 2px;
}
.tabiFooterLinks a {
    display: inline-block;
    padding: 6px 9px;
    color: var(--tabi-sand);
    text-decoration: none;
}
.tabiFooterHome {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.gurimaruRow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 10px;
}
.gurimaruRow img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    flex-shrink: 0;
}
.gurimaruBubble {
    position: relative;
    flex: 1;
    background: var(--tabi-card);
    border: 1px solid var(--tabi-line-strong);
    border-radius: var(--tabi-radius-s);
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--tabi-sumi);
    box-shadow: var(--tabi-shadow-s);
}
.gurimaruBubble::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 27px;
    width: 12px;
    height: 12px;
    background: var(--tabi-card);
    border-left: 1px solid var(--tabi-line-strong);
    border-bottom: 1px solid var(--tabi-line-strong);
    transform: rotate(45deg);
}

@media (max-width: 360px) {
    .headerIconBtn {
        padding: 0 8px;
    }
    .headerIconBtn span {
        /* 横組みロゴの最小幅160pxと操作領域を両立する */
        display: none;
    }
    .gurimaruRow { gap: 9px; }
    .gurimaruRow img { width: 66px; height: 66px; }
    .gurimaruBubble { padding: 10px 12px; font-size: 13px; }
    .gurimaruBubble::before { top: 23px; }
}

/* dev限定のOGP検証リンク（tabi.ts addOgpDebugLinks が挿入する） */
.ogpDebug {
    margin-top: 6px;
    font-size: 11px;
    color: var(--tabi-faint);
    text-align: right;
}
.ogpDebug a {
    color: var(--tabi-sand);
}

.sourceCredit {
    font-size: 11px;
    line-height: 1.5;
    color: var(--tabi-faint);
    text-align: center;
    margin: 18px 0 8px;
}

/* キーボード操作時だけ、和紙背景でも見失わないフォーカスを出す */
a:focus-visible,
button:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(30, 90, 160, 0.65);
    outline-offset: 2px;
}

/* 現在地マーカー: 顔アイコン＋水色ハローの脈動（2026-08-20）。
   スポットピンは静止しているので、動きの有無で自分の位置だと直感的に分かる */
.tabiSelfMarker { background: transparent; border: none; }
.selfFace {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 34px; height: 34px; display: block;
    filter: drop-shadow(0 1px 2px rgba(20, 40, 80, 0.35));
}
.selfHalo {
    position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
    margin: -17px 0 0 -17px; border-radius: 50%;
    background: rgba(90, 154, 224, 0.35); box-shadow: 0 0 0 2px rgba(30, 90, 160, 0.35) inset;
    -webkit-animation: selfHalo 2s ease-out infinite;
    animation: selfHalo 2s ease-out infinite;
}
/* 旧Android WebView/標準ブラウザ向け（無プレフィックス非対応の環境が現役のため併記） */
@-webkit-keyframes selfHalo {
    0% { -webkit-transform: scale(0.7); opacity: 0.75; }
    70% { opacity: 0; }
    100% { -webkit-transform: scale(2.4); opacity: 0; }
}
@keyframes selfHalo {
    0% { transform: scale(0.7); opacity: 0.75; }
    70% { opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .selfHalo { -webkit-animation: none; animation: none; opacity: 0.5; transform: scale(1.3); }
}

/* 未ログイン時のメニュー（🔒つき項目＋ログインボタン。ぐりたび改修.pdf 2026-09-02） */
.menuLockNote {
    padding: 12px 20px 4px;
    font-size: 11px;
    color: var(--tabi-faint);
}
.menuLock { font-size: 12px; opacity: 0.75; }
.menuLoginRow { padding: 18px 20px 0; }
/* .tabiMenu a の共通装飾（罫線・余白）より優先させるため2クラスで上書き */
.tabiMenu .menuLoginBtn {
    display: block;
    min-height: 48px;
    padding: 13px 0;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-bottom: none;
    border-radius: var(--tabi-radius-s);
    background: var(--tabi-shu);
    color: #fff;
}