/* ========================================
   Coffee Portal - 画面の土台（レポート画面の作法をサイト共通の色で）

   ・角丸なし／影なし。区切りはヘアライン1本
   ・小見出しは英字＋モノスペース。日本語の補足を右に添える
   ・数値は大きく、単位と補足は小さく
   ・本文は720pxで止める。余白は24px（PCは48px）
   ・切り替えは 780 / 1280。画面幅ではなく「本文の器の幅」で見る
     （左レールと右パネルのぶん、画面幅とはずれるため）

   クラスはすべて pt- で始める（既存の style.css と混ざらないように）。
   見本: docs/redesign-preview.html
   ======================================== */



.pt {
    /* サイトの既存カラーをそのまま借りる（style.css が持ち主） */
    --pt-bg: var(--background-color, #F4F1ED);
    --pt-main: var(--main-color, #931616);
    --pt-key: var(--key-color, #c0ffee);
    --pt-ink: var(--black-color, #252B29);
    --pt-support: var(--support-color, #355E3B);
    --pt-gray: var(--gray-color, #484c4b);
    --pt-border: var(--border-color, #ddd);

    /* 上の色から派生させたもの（新しい色味は足していない） */
    --pt-paper: #FBF9F6;
    --pt-muted: #8A8C88;
    --pt-muted-2: #B4B3AE;
    --pt-rule: #E4E0D9;
    --pt-rule-2: #EDEAE4;
    --pt-accent-bg: #F3E9E9;

    --pt-gutter: 24px;
}

/* 以下はこの土台の中だけに効かせる（サイト共通のヘッダー等には触れない） */
.pt,
.pt *,
.pt *::before,
.pt *::after {
    box-sizing: border-box;
    border-radius: 0;
}

.pt {
    display: flex;
    flex-direction: column;
    /* 中身が短いページでも紙（pt-page）が画面の下まで届くように、
       最低1画面ぶん（固定ヘッダーの下全部）の高さを持つ */
    min-height: calc(100dvh - var(--header-height, 70px));

    background: var(--pt-bg);
    color: var(--pt-ink);
    font-family: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
    letter-spacing: normal;

    /* 中の部品は「本文の器の幅」で切り替える */
    container-type: inline-size;
    container-name: pt-page;
}

/*
   リンクの既定。:where() で強さを持たせないので、後に出てくるクラス指定
   （.pt-btn など）がそのまま勝つ。
*/
.pt :where(a) { color: inherit; text-decoration: none; }

/*
   カーソルが当たっていることは下線ではなく「枠が赤くなる」で見せる。
   共通CSSの a:hover に下線があるので、ここで打ち消す。
*/
.pt a:hover,
.pt a:focus-visible {
    text-decoration: none;
}
.demo__label {
    max-width: 1440px;
    margin: 0 auto 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--pt-main);
}
.demo__frame {
    max-width: 1440px;
    margin: 0 auto;
    border: 1px solid var(--pt-border);
    background: var(--pt-paper);
    overflow: hidden;

}
.demo__note {
    max-width: 1440px;
    margin: 10px auto 0;
    font-size: 12px;
    line-height: 1.9;
    color: var(--pt-gray);
}
.site-header__left { display: flex; align-items: center; gap: 18px; }
.site-header__logo { width: 34px; height: 34px; border-radius: 50%; background: var(--pt-bg); color: var(--pt-main); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; }
.site-header__sub { font-size: 11px; line-height: 1.5; opacity: .85; }
.site-header__right { display: flex; align-items: center; gap: 10px; }
.site-header__btn { padding: 7px 14px; border: 1px solid rgba(244,241,237,.6); font-size: 12px; text-decoration: none; }
.site-header__btn--round { border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 10px; }

/* ---- ページの器 ---- */
/* flex: 1 で親（main.pt）の残り全部に伸びる。720px はあくまで下限 */
.pt-page { display: flex; flex: 1 0 auto; min-height: 720px; background: var(--pt-paper); }
.pt-page__main { flex: 1; min-width: 0; padding-inline: 1rem; }
.pt-page__inner { width: 100%; max-width: calc(720px + var(--pt-gutter) * 2); margin: 0 auto; padding: 0 var(--pt-gutter) 64px; }

/* 右パネルの無い2カラムページ（管理画面など）は、中央を幅いっぱいに使う */
@container pt-page (min-width: 780px) {
    .pt-page:not(:has(.pt-aside)) .pt-page__inner { max-width: none; }
}

/* 右の補助パネル（レポート画面の YOUR CUP と同じ役割） */
.pt-aside {
    display: none;
    width: 320px;
    flex: none;
    /* カラムの境目はサイトの色で1本引く */
    border-left: 1px solid var(--pt-main);
    background: #F7F4F0;
}

/* ---- 見出し ---- */
/* 上端の位置は左レールの見出し（padding-top 26px）と揃える */
.pt-head { padding: 26px 0 0; display: flex; flex-direction: column; gap: 6px; }
.pt-head__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--pt-muted); }
/* word-break: auto-phrase は日本語を文節で折り返す（対応ブラウザのみ。他は無視される） */
.pt-head h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; word-break: auto-phrase; }
.pt-head p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--pt-muted); }

/* 見出しの右に行動ボタンを置く形（店舗詳細の「レポートを書く」など） */
/* ボタンは常に上端（SHOPの行）の右寄せ。狭い幅ではタイトル側が縮んで折り返す */
.pt-head--split { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pt-head__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pt-head__cta { flex: none; margin-top: 2px; white-space: nowrap; }

.pt-section { padding: 36px 0 0; }
.pt-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--pt-rule-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--pt-muted);
}
.pt-section-head__note { font-family: 'Zen Kaku Gothic New', sans-serif; letter-spacing: normal; font-size: 12px; }
.pt-section-head a { color: var(--pt-main); text-decoration: none; font-family: 'Zen Kaku Gothic New', sans-serif; letter-spacing: normal; font-size: 12px; }

/* ---- ボタン ---- */
.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid var(--pt-ink);
    background: var(--pt-ink);
    color: var(--pt-paper);
    font-family: inherit;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.pt-btn--accent { background: var(--pt-main); border-color: var(--pt-main); }
.pt-btn--quiet { background: transparent; border-color: var(--pt-rule); color: var(--pt-gray); }
.pt-btn--small { padding: 8px 14px; font-size: 12px; }

.pt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--pt-rule);
    font-size: 12px;
    color: var(--pt-gray);
    white-space: nowrap;
}
.pt-chip--on,
.pt-chip:has(input:checked) { background: var(--pt-ink); border-color: var(--pt-ink); color: var(--pt-paper); }
/* 押せるチップ（中にチェックボックスを持つもの）だけ枠を赤くする */
.pt-chip:has(input) { cursor: pointer; }
.pt-chip:has(input):hover { border-color: var(--pt-main); }
.pt-chip--flavor { border-color: transparent; color: #FBF9F6; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.pt-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--pt-muted); }

/* 「いま」を示す点。#c0ffee はこの用途にだけ、画面内で数えられる個数だけ使う */
.pt-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pt-key); display: inline-block; }

/* ============ A. ダッシュボード ============ */
.pt-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.pt-stats--4 { grid-template-columns: repeat(4, 1fr); }
.pt-stat { padding: 20px 0; border-bottom: 1px solid var(--pt-rule-2); }
.pt-stat + .pt-stat { border-left: 1px solid var(--pt-rule-2); padding-left: 24px; }
.pt-stat__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--pt-muted); }
.pt-stat__value { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.pt-stat__number { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.pt-stat__unit { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--pt-muted-2); }
.pt-stat__link { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--pt-main); text-decoration: none; }

/* 傾向のまとまりの名前（国／地域・精製・品種） */
.pt-taste-label {
    padding-top: 20px;
    font-size: 12px;
    color: var(--pt-muted);
}

.pt-section-head--sub { margin-top: 30px; }

.pt-taste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; row-gap: 22px; padding-top: 18px; }
.pt-taste__block { display: flex; flex-direction: column; gap: 9px; }
.pt-taste__head { display: flex; align-items: baseline; justify-content: space-between; }
.pt-taste__name { font-size: 14px; color: var(--pt-gray); }
.pt-taste__count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--pt-ink); }
.pt-bar { position: relative; height: 6px; background: var(--pt-rule-2); }
.pt-bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pt-main); }
.pt-bar--support span { background: var(--pt-support); }

.pt-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }

.pt-shop-card { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.pt-shop-card__name { font-size: 17px; font-weight: 700; }
.pt-shop-card__address { font-size: 12px; color: var(--pt-muted); }

/* ============ B. レポート一覧 ============ */
.pt-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 10px; padding-top: 14px; }

/*
   1項目＝ラベル＋入力欄。入力欄だけでは何を選ぶ欄なのか分からないものがあるので、
   ラベルは必ず添える（プレースホルダは選んだあと消えてしまう）。
*/
.pt-filter__cell { display: flex; flex-direction: column; gap: 5px; }
.pt-filter__cell--wide { flex: 1; min-width: 200px; }

/* チップは入力欄と違って、文字ぶんの幅で置く */
.pt-filter__cell > .pt-chip { align-self: flex-start; }

.pt-filter__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--pt-muted);
}

.pt-filter__input,
.pt-filter__select { width: 100%; padding: 10px 12px; border: 1px solid var(--pt-rule); background: var(--pt-paper); font-family: inherit; font-size: 13px; }
.pt-filter__select { color: var(--pt-gray); }

/* 「この条件で見る」などは行の右端へ */
.pt-filter__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* レポート1件＝1枚の紙。方眼の地に、右下がめくれている */
.pt-note {
    --pt-fold: 26px;
    --pt-grid: 16px;

    position: relative;
    display: block;
    margin-top: 12px;
    padding: 18px 20px calc(18px + var(--pt-fold) / 2);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
}

/* 紙そのもの。右下だけ角を落とす */
.pt-note::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: #FFFDFA;
    background-image:
        linear-gradient(to right, rgba(37, 43, 41, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(37, 43, 41, .055) 1px, transparent 1px);
    background-size: var(--pt-grid) var(--pt-grid);
    border: 1px solid var(--pt-rule);
}

/*
   右下の角。四角のまま、対角線で2色に分ける。
   左上側（折り目の側）はサイトの色、右下側は中央カラムの地の色。
*/
.pt-note::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: var(--pt-fold);
    height: var(--pt-fold);
    background: linear-gradient(135deg, var(--pt-main) 0 50%, var(--pt-paper) 50% 100%);
}

.pt-note:hover { --pt-fold: 32px; }
.pt-note:hover::before { background-color: #FFFEFC; }

.pt-note__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* どこで飲んだか（店舗・イベント・自宅）。店舗名の上の小さな見出し */
.pt-note__type {
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--pt-muted);
}

.pt-note__shop { font-size: 17px; font-weight: 700; }
.pt-note__date { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--pt-muted); white-space: nowrap; }
.pt-note__bean { margin-top: 4px; font-size: 13px; color: var(--pt-gray); }
.pt-note__meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pt-note__cups { display: flex; gap: 3px; }
.pt-note__rating { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--pt-ink); }
.pt-note__flavors { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pt-note__draft { padding: 2px 7px; background: var(--pt-accent-bg); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--pt-main); }

/* ============ C. コーヒー情報 ============ */
.pt-news { display: flex; flex-direction: column; }
.pt-news__item { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--pt-rule-2); text-decoration: none; color: inherit; }
.pt-news__title { font-size: 14px; line-height: 1.7; }
.pt-news__excerpt { margin: 4px 0 0; font-size: 12px; line-height: 1.8; color: var(--pt-muted); }
.pt-news__date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--pt-muted-2); white-space: nowrap; }

.pt-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 16px; }
.pt-video__thumb { position: relative; aspect-ratio: 16 / 9; background: #DAD5CD; display: flex; align-items: center; justify-content: center; }
.pt-video__play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--pt-paper); color: var(--pt-paper); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.pt-video__title { margin-top: 8px; font-size: 13px; line-height: 1.7; }
.pt-video__meta { margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--pt-muted-2); }

.pt-articles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; padding-top: 16px; }
.pt-article { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.pt-article__thumb { aspect-ratio: 3 / 2; background: #E2DCD3; }
.pt-article__tags { display: flex; gap: 6px; }
.pt-article__title { font-size: 15px; font-weight: 700; line-height: 1.6; }
.pt-article__excerpt { font-size: 12px; line-height: 1.85; color: var(--pt-muted); }
.pt-article__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 再生の印は写真の上に重ねる。写真は枠を埋める */
.pt-video__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 明るいサムネイルでも白丸が沈まないよう、薄く下地を敷く */
.pt-video__play { position: relative; background: rgba(23, 22, 26, 0.45); }

/* 記事の頭に置く大きな写真 */
.pt-hero { margin: 22px 0 0; }
.pt-hero img { width: 100%; max-height: 420px; object-fit: cover; display: block; }

/*
   記事本文。管理画面が組み立てた HTML をそのまま流すので、
   ここでは見出し・段落・引用といった素の要素に当てる。
*/
.pt-prose { padding-top: 26px; font-size: 15px; line-height: 2; color: var(--pt-ink-2, var(--pt-ink)); }
.pt-prose > :first-child { margin-top: 0; }
.pt-prose p { margin: 0 0 1.4em; }
.pt-prose h2 {
    margin: 2.2em 0 0.8em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pt-main);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.pt-prose h3 { margin: 1.8em 0 0.6em; font-size: 16px; font-weight: 700; }
.pt-prose h4 { margin: 1.5em 0 0.5em; font-size: 14px; font-weight: 700; }
.pt-prose ul, .pt-prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.pt-prose li { margin-bottom: 0.5em; }
.pt-prose blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 18px;
    border-left: 2px solid var(--pt-main);
    color: var(--pt-gray);
}
.pt-prose blockquote p:last-child { margin-bottom: 0; }
.pt-prose pre {
    margin: 1.4em 0;
    padding: 16px;
    overflow-x: auto;
    background: var(--pt-accent-bg);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 1.8;
}
.pt-prose code {
    padding: 2px 5px;
    background: var(--pt-accent-bg);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.9em;
}
.pt-prose pre code { padding: 0; background: none; }
.pt-prose img { max-width: 100%; height: auto; display: block; margin: 1.6em 0; }
.pt-prose figure { margin: 1.8em 0; }
.pt-prose figcaption { margin-top: 8px; font-size: 12px; color: var(--pt-muted); }
.pt-prose a { color: var(--pt-main); }
.pt-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 13px; }
.pt-prose th, .pt-prose td { padding: 8px 10px; border: 1px solid var(--pt-rule-2); text-align: left; }

/* 規約・ポリシー。目次から飛んだとき、見出しが上端に貼りつかないようにする */
.pt-doc h2 { scroll-margin-top: 24px; font-size: 17px; }
.pt-doc ol ul, .pt-doc ul ul { margin: 0.6em 0 0; }

/* ---- 780px以上：右に補助パネル ---- */
@container pt-page (min-width: 780px) {
    /*
       左右のカラムは画面（ヘッダーの下）にぴったり収め、
       長い中身は中央カラムだけがスクロールする。
    */
    .pt-page {
        flex: 1;
        min-height: 0;
    }

    .pt-page__main {
        min-height: 0;

        /*
           中央だけがスクロールする。バーは常に出しておき（auto ではなく scroll）、
           どこまで読んだかが分かるようにサイトの色で塗る。
        */
        overflow-y: scroll;
        scrollbar-gutter: stable;
    }

    .pt-page__main::-webkit-scrollbar {
        width: 10px;
    }

    .pt-page__main::-webkit-scrollbar-track {
        background: var(--pt-accent-bg);
    }

    /* つまみだけは丸く。溝の色で縁取って、細い棒に見えるようにする */
    .pt-page__main::-webkit-scrollbar-thumb {
        background: var(--pt-main);
        border: 2px solid var(--pt-accent-bg);
        border-radius: 999px;
        background-clip: padding-box;
    }

    .pt-page__main::-webkit-scrollbar-thumb:hover {
        background: #7a1212;
        background-clip: padding-box;
    }

    /*
       Firefox 向け。Chrome / Safari でこの2つを指定すると、上の指定より優先されて
       細い自動で隠れるバーに戻ってしまうため、解さないブラウザにだけ渡す。
    */
    @supports not selector(::-webkit-scrollbar) {
        .pt-page__main {
            scrollbar-width: thin;
            scrollbar-color: var(--pt-main) var(--pt-accent-bg);
        }
    }

    .pt-aside {
        display: block;
        min-height: 0;
        overflow-y: auto;
    }
    /* 上端は左レール・中央と同じ高さから始める */
    .pt-aside__inner { padding: 26px 24px; display: flex; flex-direction: column; gap: 22px; }
    .pt-aside__block { display: flex; flex-direction: column; gap: 10px; }
    .pt-aside__row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--pt-rule-2); font-size: 12px; color: var(--pt-gray); }
    .pt-aside__num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--pt-ink); }
}

/* ---- 左の目次（1280px以上で出す） ---- */
.pt-rail {
    display: none;
    width: 240px;
    flex: none;
    flex-direction: column;
    /* カラムの境目はサイトの色で1本引く */
    border-right: 1px solid var(--pt-main);
    background: #F7F4F0;
}

@container pt-page (min-width: 1280px) {
    .pt-page { --pt-gutter: 48px; }

    .pt-rail {
        display: flex;
        min-height: 0;
        overflow-y: auto;
    }
}

.pt-rail__head { padding: 26px 24px 20px; border-bottom: 1px solid var(--pt-rule-2); display: flex; flex-direction: column; gap: 4px; }
.pt-rail__title { font-size: 18px; font-weight: 700; }
.pt-rail__meta { font-size: 12px; color: var(--pt-muted); }
.pt-rail__nav { display: flex; flex-direction: column; padding: 14px 0; }
.pt-rail__link { display: flex; align-items: center; gap: 12px; padding: 11px 24px; border-left: 2px solid transparent; text-decoration: none; font-size: 13px; color: var(--pt-gray); }
.pt-rail__link.is-on { border-left-color: var(--pt-main); background: var(--pt-paper); color: var(--pt-ink); font-weight: 700; }
.pt-rail__num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--pt-muted-2); }
/* 規約のような長い見出しの目次。折り返しても番号が行頭に残る */
.pt-rail--doc .pt-rail__link { align-items: flex-start; padding-block: 9px; line-height: 1.7; }
.pt-rail--doc .pt-rail__num { padding-top: 4px; }

/* ----------------------------------------
   サイト内通知の一覧
   未読は赤い点＋濃い字。既読は静かに沈める。
   ---------------------------------------- */

.pt-notices { display: flex; flex-direction: column; padding-top: 8px; }

.pt-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pt-rule-2);
    color: var(--pt-muted);
    transition: border-color .12s ease, background-color .12s ease;
}

.pt-notice:hover { border-bottom-color: var(--pt-main); background: #FFFDFA; }

.pt-notice__dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--pt-muted-3);
}

.pt-notice.is-unread { color: var(--pt-ink); }
.pt-notice.is-unread .pt-notice__dot { background: var(--pt-main); }

.pt-notice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-notice__title { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.pt-notice.is-unread .pt-notice__title { color: var(--pt-ink); }
.pt-notice__message { font-size: 12px; line-height: 1.8; color: var(--pt-muted); overflow-wrap: anywhere; }

.pt-notice__date {
    flex: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--pt-muted-2);
    white-space: nowrap;
}

/* 未読の数（レール・タブ共通） */
.pt-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pt-main);
    color: var(--pt-paper);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    line-height: 1;
}

.pt-rail__foot { margin-top: auto; padding: 20px 24px 24px; border-top: 1px solid var(--pt-rule-2); display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.pt-rail__foot a { color: var(--pt-main); text-decoration: none; }

/* 送信ボタンだが見た目は文字リンク（確認メールの再送など） */
.pt-rail__action {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--pt-main);
    cursor: pointer;
}

/* ---------------- SP（779px以下） ---------------- */
@container pt-page (max-width: 779px) {
    .pt-page { flex-direction: column; --pt-gutter: 16px; }

    /* 画面が狭いので、外側の余白は器の1本だけにする */
    .pt-page__main { padding-inline: 0; }

    /* 紙の中の余白も少し詰める（文字が端から32pxで始まる） */
    .pt-note { padding: 16px 16px calc(16px + var(--pt-fold) / 2); }

    /* 店名は長くなりがちなので、日付は上に逃がす */
    .pt-note__row { flex-direction: column-reverse; align-items: stretch; gap: 2px; }
    .pt-note__date { text-align: right; }
    .pt-head { padding-top: 26px; padding-bottom: 26px; }
    .pt-head h1 { font-size: 26px; }
    .pt-section { padding-top: 28px; }

    /* 数値は横に3つ。縦に積むと1画面が数字で埋まってしまう */
    .pt-stats { grid-template-columns: repeat(3, 1fr); }
    /* 4つ並ぶものは2×2にする（横に4つは狭すぎる） */
    .pt-stats--4 { grid-template-columns: repeat(2, 1fr); }
    .pt-stats--4 .pt-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .pt-stat { padding: 16px 0; }
    .pt-stat + .pt-stat { border-left: 1px solid var(--pt-rule-2); padding-left: 14px; }
    .pt-stat__number { font-size: 28px; }
    .pt-stat__link { font-size: 11px; }

    .pt-taste, .pt-articles { grid-template-columns: 1fr; }
    .pt-videos { grid-template-columns: 1fr 1fr; gap: 12px; }

    /* 左のレールの代わり。横に流して現在地を示す */
    .pt-tabs {
        display: flex;
        gap: 18px;
        overflow-x: auto;
        padding: 0 var(--pt-gutter);
        border-bottom: 1px solid var(--pt-rule-2);
        scrollbar-width: none;
    }
    .pt-tabs::-webkit-scrollbar { display: none; }
    .pt-tabs a {
        flex: none;
        padding: 14px 0 11px;
        border-bottom: 2px solid transparent;
        font-size: 13px;
        color: var(--pt-muted);
        text-decoration: none;
    }
    .pt-tabs a.is-on { border-bottom-color: var(--pt-main); color: var(--pt-ink); font-weight: 700; }

    /* 絞り込みはボトムシートが担当（SP本文には出さない） */
    .pt-filter { display: none; }

    /* 右の欄は消さずに、本文の後ろへ回す */
    .pt-aside {
        display: block;
        width: auto;
        border-left: none;
        border-top: 1px solid var(--pt-rule-2);
        background: var(--pt-paper);
    }

    /* ただし検索条件の右カラムはSPでは出さない（本文側の畳んだ検索を使う） */
    .pt-aside--search { display: none; }
    .pt-aside__block--search { display: none; }
    .pt-aside__inner { padding: 4px var(--pt-gutter) 40px; display: flex; flex-direction: column; gap: 26px; }
    .pt-aside__block { display: flex; flex-direction: column; gap: 10px; }
    .pt-aside__row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--pt-rule-2); font-size: 13px; color: var(--pt-gray); }
    .pt-aside__num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--pt-ink); }

    /* 主要な操作は指の届く位置に、幅いっぱいで */
    .pt-actions { flex-direction: column; }
    .pt-actions .pt-btn { width: 100%; }
}

/* PC では SP 用のものを出さない */
@container pt-page (min-width: 780px) {
    .pt-tabs { display: none; }
}

/* ----------------------------------------
   お知らせ（保存しました・エラーなど）
   ---------------------------------------- */

.pt-flash {
    width: 100%;
    max-width: calc(720px + var(--pt-gutter) * 2);
    margin: 0 auto;
    padding: 14px var(--pt-gutter);
    background: #EDF1EC;
    font-size: 13px;
    line-height: 1.8;
    color: var(--pt-support);
}

.pt-flash--error {
    background: var(--pt-accent-bg);
    color: var(--pt-main);
}

.pt-flash--info {
    background: #EFEDE8;
    color: var(--pt-gray);
}

.pt-flash--list {
    list-style: none;
}

/* 好みの傾向のひとこと要約（ダッシュボード） */
.pt-taste-headline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--pt-accent-bg);
    border-left: 3px solid var(--pt-main);
}
.pt-taste-headline__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--pt-main);
}
.pt-taste-headline__body {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

/* 真ん中カラムの一番上に置いたとき、上と続けて出るときの間 */
.pt-page__main > .pt-flash { margin-top: 18px; }
.pt-page__main > .pt-flash + .pt-flash { margin-top: 8px; }
.pt-auth .pt-flash { margin-bottom: 14px; }

/* ----------------------------------------
   ページ内の共通パーツ（見本から）
   ---------------------------------------- */

/* 何も無いときの案内 */
.pt-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 28px 0 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--pt-muted);
}

/* ページ送り */
.pt-pager {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 28px 0 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
}

.pt-pager a,
.pt-pager span {
    min-width: 32px;
    padding: 8px 6px;
    border: 1px solid var(--pt-rule);
    text-align: center;
    color: var(--pt-gray);
}

.pt-pager .pt-pager__current {
    background: var(--pt-ink);
    border-color: var(--pt-ink);
    color: var(--pt-paper);
}

.pt-pager .pt-pager__disabled {
    color: var(--pt-muted-2);
    border-color: var(--pt-rule-2);
}

/* ----------------------------------------
   一覧の絞り込み（狭い画面では畳む・JSなし）
   ---------------------------------------- */

.pt-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pt-filter label {
    cursor: pointer;
}

/* 一覧のひとこと（続きは開いてから） */
.pt-note__comment {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.85;
    color: var(--pt-muted);
}

@container pt-page (min-width: 780px) {
    /* 広い画面では畳まない */
    .pt-filter { display: flex; }
}

@container pt-page (max-width: 779px) {
    /* SPの絞り込みはボトムシート（.pt-sheet）が担当。本文側には出さない */
    .pt-filter { display: none; }

    /* ただし右パネル（SPでは本文の後ろに回る）の中のフォームは出す（管理画面用） */
    .pt-aside .pt-filter {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}

/* サムネイルは枠いっぱいに敷く */
.pt-video__thumb img,
.pt-article__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pt-video__thumb { position: relative; }
.pt-video__thumb .pt-video__play { position: absolute; }

/* ----------------------------------------
   店舗一覧

   1件＝1行のかたまり。ロゴがあれば左に置く。
   レポートのような方眼紙は使わない（紙はレポートだけの記号）。
   ---------------------------------------- */

.pt-shops {
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 4px;
}

.pt-shop {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* グリッドの子は最小幅が中身に引っ張られる（nowrap の備考で
       カードごと広がる）ので、列の幅まで縮めてよいと明示する */
    min-width: 0;
    padding: 16px 0;
    /* 1件ごとの区切りが薄くて追いづらかったので、線を1段濃くする */
    border-bottom: 1px solid var(--pt-rule);
}

.pt-shop__logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: #FFFDFA;
    border: 1px solid var(--pt-rule);
    padding: 3px;
}

.pt-shop__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pt-shop__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--pt-ink);
    overflow-wrap: anywhere;
}

.pt-shop__address {
    font-size: 12px;
    color: var(--pt-muted);
    overflow-wrap: anywhere;
}

.pt-shop__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}

.pt-shop__rating {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--pt-ink);
}

.pt-shop__count {
    font-size: 11px;
    color: var(--pt-muted-2);
}

/* 1件の中に操作を並べるとき（担当店舗一覧など） */
.pt-shop__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* リンクになっている店名は、当たったら赤くする */
a.pt-shop__name:hover { color: var(--pt-main); }

/* ---- 店舗一覧の1件（写真つきの新レイアウト） ---- */
.pt-shop--rich { align-items: center; gap: 16px; }

/* 写真。無い店はロゴか頭文字で埋め、空白のままにしない */
.pt-shop__thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border: 1px solid var(--pt-rule);
    background: #FFFDFA;
    /* 行の上下中央ではなく上付きに（margin-bottom: auto が中央揃えに勝つ） */
    margin-bottom: auto;
}

.pt-shop__thumb picture,
.pt-shop__thumb img { display: block; width: 100%; height: 100%; }
.pt-shop__thumb img { object-fit: cover; }
.pt-shop__thumb img.pt-shop__thumb-logo { object-fit: contain; padding: 8px; }

.pt-shop__mono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 26px;
    font-weight: 700;
    color: var(--pt-main);
    background: var(--pt-accent-bg);
}

/* どこの店かを最初に。住所全文より先に県と市区で当たりを付ける。
   右端にはレポート件数（同じ高さで揃える） */
.pt-shop__place {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--pt-muted);
}

.pt-shop__place-note {
    flex: none;
    color: var(--pt-muted-2);
}

/* 今日行けるか・いくらか */
.pt-shop__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--pt-gray);
}

.pt-shop__open { color: var(--pt-main); font-weight: 700; }

/* ----------------------------------------
   イベントカレンダー
   ---------------------------------------- */
.pt-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
}

.pt-month-nav__label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.pt-event {
    padding: 18px 0;
    border-bottom: 1px solid var(--pt-rule);
}

.pt-event__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pt-event__date {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pt-main);
}

.pt-event__name {
    margin: 6px 0 0;
    font-size: 17px;
    font-weight: 700;
    word-break: auto-phrase;
}

.pt-event__name a {
    color: inherit;
}

.pt-event__venue {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--pt-gray);
}

.pt-event__desc {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--pt-gray);
}

.pt-event__links {
    margin: 10px 0 0;
    display: flex;
    gap: 16px;
    font-size: 13px;
}

.pt-event__links a {
    color: var(--pt-main);
}

/* 営業時間の備考。行の残り幅に冒頭だけ出し、あふれた分は … にする */
.pt-shop__facts-note {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pt-muted);
}

/* 評価は右端の定位置。縦に走査できるように揃える */
.pt-shop__score {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 64px;
    padding-left: 14px;
    border-left: 1px solid var(--pt-rule-2);
    align-self: stretch;
    justify-content: center;
}

.pt-shop__score-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--pt-ink);
    line-height: 1;
}

.pt-shop__score-num--none { color: var(--pt-muted-2); font-weight: 400; }

.pt-shop__score-count { font-size: 10px; color: var(--pt-muted-2); }

/* 管理者向け：一覧の中の承認操作の列 */
.pt-shop-approve {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--pt-rule-2);
}

/* 新着マーク */
.pt-chip--new { border-color: var(--pt-main); color: var(--pt-main); font-weight: 700; }

/* よく飲まれている一杯（レポートの集計）。設備チップと区別して1本の帯にする */
.pt-shop__trend {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
    padding: 5px 8px;
    background: var(--pt-accent-bg);
    font-size: 12px;
    color: var(--pt-ink);
    align-self: flex-start;
    max-width: 100%;
}

.pt-shop__trend-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--pt-main);
    font-weight: 700;
}

.pt-shop__trend-body { font-weight: 400; }
.pt-shop__trend-note { font-size: 10px; color: var(--pt-muted); }

@container pt-page (max-width: 779px) {
    /* 狭い画面では写真を少し小さく、評価の区切り線は省く */
    .pt-shop__thumb { width: 60px; height: 60px; }
    .pt-shop__score { border-left: none; padding-left: 0; min-width: 52px; }
    .pt-shop__score-num { font-size: 17px; }
}

/* 広告ユニットのサイズはここで決める。
   CSSで明示した幅・高さに合う広告だけが配信されるので、高さが揺れない */
.pt-ad__unit {
    display: block;
    width: 100%;
    /* 1店舗ぶん（約120px）と同じ高さにして、リストの並びに馴染ませる */
    height: 120px;
}

/* 広告の枠（一覧の途中に挟む） */
.pt-ad {
    margin: 18px 0;
    padding: 14px 0;
    border-top: 1px solid var(--pt-rule-2);
    border-bottom: 1px solid var(--pt-rule-2);
}

/* ----------------------------------------
   クチコミ一覧
   ---------------------------------------- */

.pt-review {
    padding: 18px 0;
    border-bottom: 1px solid var(--pt-rule-2);
}

.pt-review__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pt-review__shop {
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pt-review__date {
    flex: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--pt-muted-2);
    white-space: nowrap;
}

.pt-review__score {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 5段階を5つのマスで示す（星の代わり） */
.pt-meter {
    display: flex;
    gap: 3px;
}

.pt-meter span {
    width: 12px;
    height: 8px;
    background: var(--pt-rule-2);
}

.pt-meter span.is-on {
    background: var(--pt-main);
}

.pt-review__number {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--pt-ink);
}

.pt-review__comment {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--pt-ink-2, var(--pt-gray));
    overflow-wrap: anywhere;
}

.pt-review__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--pt-muted);
}

/* 写真の並び（一覧に添える小さいもの） */
.pt-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pt-thumbs img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 1px solid var(--pt-rule-2);
}

.pt-thumbs__more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border: 1px solid var(--pt-rule-2);
    background: var(--pt-accent-bg);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--pt-muted);
}

.pt-review__details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.pt-review__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.pt-review__helpful {
    padding: 7px 12px;
    border: 1px solid var(--pt-rule);
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    color: var(--pt-gray);
    cursor: pointer;
}

.pt-review__helpful.is-on {
    border-color: var(--pt-support);
    color: var(--pt-support);
}

@container pt-page (min-width: 900px) {
    /* 広い列では店舗を2つ並べる（写真つきの新レイアウトは1列のまま。
       2列にすると右端の評価の区切りが増えて、線だらけに見える） */
    .pt-shops:not(:has(.pt-shop--rich)) {
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
    }
}

/* お気に入りから外す（押し間違えないよう控えめに） */
.pt-shop__action {
    flex: 0 0 auto;
    align-self: center;
}

.pt-shop__remove {
    padding: 6px 10px;
    border: 1px solid var(--pt-rule);
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    color: var(--pt-muted);
    cursor: pointer;
}

.pt-shop__remove:hover {
    border-color: var(--pt-main);
    color: var(--pt-main);
}

/* ----------------------------------------
   詳細ページ（店舗・クチコミ）
   ---------------------------------------- */

/* 項目の一覧（電話・サイトなど） */
.pt-facts {
    margin: 4px 0 0;
}

.pt-fact {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--pt-rule-2);
}

.pt-fact dt {
    width: 76px;
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--pt-muted);
}

.pt-fact dd {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

/* 営業時間 */
/* 短い表は幅を抑える。見出しの罫線も同じ幅で止める */
.pt-section--narrow > .pt-section-head,
.pt-section--narrow > .pt-hours,
.pt-section--narrow > .pt-empty {
    max-width: 320px;
}

.pt-hours {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.pt-hours__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pt-rule-2);
    font-size: 13px;
}

.pt-hours__row.is-today {
    color: var(--pt-main);
}

.pt-hours__day {
    width: 40px;
    flex: 0 0 auto;
    color: var(--pt-muted);
}

/* 曜日より長い見出し（年月など）を並べるとき */
.pt-hours--wide .pt-hours__day {
    width: auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    white-space: nowrap;
}

.pt-hours__row.is-today .pt-hours__day {
    color: var(--pt-main);
}

.pt-hours__time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
}

/* 営業時間の備考（不定休・L.O. など） */
.pt-hours__note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--pt-muted);
    white-space: pre-wrap;
}

/* 地図 */
.pt-map {
    width: 100%;
    height: 280px;
    margin-top: 16px;
    /* 地図はページの中で唯一「外の世界」なので、枠で囲って区切る */
    border: 1px solid var(--pt-main);
    background: #E7E1D6;
}

/* 位置を決める画面では、地図をもう少し大きく取る */
.pt-map--tall { height: 360px; }

/* お店の説明（ブロック形式で描く） */
.pt-desc { white-space: normal; }
.pt-desc strong { font-weight: 700; color: var(--pt-ink); }

/* 説明内の画像は大きくしすぎない（480pxまで）。横は中央に置く */
.pt-desc img {
    max-width: min(480px, 100%);
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--pt-rule-2);
}

/* キャプションも画像に合わせて中央に */
.pt-desc figure { text-align: center; }
.pt-desc figcaption { text-align: center; }

.pt-desc__img {
    display: block;
    max-width: min(480px, 100%);
    margin: 14px auto;
    border: 1px solid var(--pt-rule-2);
}

/* 説明欄の道具箱 */
.pt-desc-tools { display: flex; align-items: center; gap: 8px; }
.pt-desc-tools__state { font-size: 11px; color: var(--pt-muted); }

/* ----------------------------------------
   マップの画面
   中央は地図だけ、右に条件とその結果を積む。
   ---------------------------------------- */

.pt-page--map { min-height: 0; }

/* 地図の列は伸び縮みするだけ。中身をスクロールさせない */
.pt-page--map .pt-page__main {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    overflow: hidden;
}

/* 地図は中央カラムを余さず埋める */
.pt-map-canvas { flex: 1; min-height: 320px; }
.pt-map-canvas #map { width: 100%; height: 100%; }

/* 右カラム。条件が上、結果が下。伸びるのは結果のほう */
.pt-aside--map { background: var(--pt-paper); }
.pt-map-search { padding: 20px 24px 22px; border-bottom: 1px solid var(--pt-main); }
.pt-map-search__actions { padding-top: 16px; }
.pt-map-search__actions .pt-btn { width: 100%; justify-content: center; }

/* 右カラムの中では1項目ずつ縦に積む */
.pt-filter--stack { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 14px; }
.pt-filter--stack .pt-filter__cell { width: 100%; }

/* 選んだ場所の表示 */
.pt-map-picked {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--pt-main);
    background: var(--pt-accent-bg);
    font-size: 12px;
}
.pt-map-picked__label {
    flex: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--pt-main);
}
.pt-map-picked__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-map-picked button { flex: none; padding: 0 2px; border: none; background: none; font-size: 16px; line-height: 1; color: var(--pt-muted); cursor: pointer; }
.pt-map-picked button:hover { color: var(--pt-main); }

/* 結果の並び */
.pt-map-results { position: relative; padding: 0 24px 32px; }
.pt-map-results__head { position: sticky; top: 0; z-index: 2; background: var(--pt-paper); padding-top: 18px; }
.pt-map-empty { padding: 24px 0; font-size: 13px; color: var(--pt-muted); }
.pt-shop--map { cursor: pointer; }
.pt-shop--map:hover { border-bottom-color: var(--pt-main); background: #FFFDFA; }

.pt-map-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    background: rgba(251, 249, 246, 0.7);
    pointer-events: none;
}
.pt-map-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--pt-rule);
    border-top-color: var(--pt-main);
    border-radius: 50%;
    animation: pt-spin 1s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }

/* 狭い画面だけに出る開閉ボタン */
.pt-map-toggle { display: none; }

/* ---- 780px以上：右カラムとして立てる ---- */
@container pt-page (min-width: 780px) {
    .pt-aside--map {
        display: flex;
        flex-direction: column;
        /* 条件と結果を積むので、読みものの欄より少し広く取る */
        width: 360px;
        overflow: hidden;
    }

    /* 条件は上に貼りついたまま、結果だけがスクロールする */
    .pt-map-search { flex: none; }
    .pt-map-results { flex: 1; min-height: 0; overflow-y: auto; }
}

/* ---- 780px以上でも背の低い画面：検索条件を畳めるようにする ----
   高さが足りないと結果リストが数件分しか見えなくなる。
   SPと同じトグル＋0.5秒アニメで畳む（既定は開いた状態） */
@media (min-width: 780px) and (max-height: 770px) {
    .pt-page--map .pt-map-toggle {
        display: block;
        width: 100%;
        padding: 9px 24px;
        border: none;
        border-bottom: 1px solid var(--pt-main);
        background: var(--pt-main);
        color: var(--pt-paper);
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-align: left;
        cursor: pointer;
    }

    .pt-page--map .pt-map-toggle::after { content: '▼'; float: right; transition: transform .2s ease; }
    .pt-page--map .pt-map-toggle.is-open::after { transform: rotate(180deg); }

    .pt-page--map .pt-map-search {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom-width: 0;
        transition: max-height .5s ease-in-out, opacity .5s ease-in-out, padding .5s ease-in-out;
    }

    .pt-page--map .pt-map-search.is-open {
        max-height: 420px;
        opacity: 1;
        padding: 20px 24px 22px;
        border-bottom-width: 1px;
    }
}

/* ---- 780px未満：いまの並びのまま（条件→地図→結果） ---- */
@container pt-page (max-width: 779px) {
    /* 中の3つを直接ならべたいので、器そのものは畳む */
    .pt-aside--map { display: contents; }

    .pt-page--map .pt-tabs { display: none; }

    .pt-map-toggle {
        order: -2;
        display: block;
        width: 100%;
        /* 文字と帯は控えめに（14px/12pxだと主張が強かった） */
        padding: 9px var(--pt-gutter);
        border: none;
        border-bottom: 1px solid var(--pt-main);
        background: var(--pt-main);
        color: var(--pt-paper);
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-align: left;
        cursor: pointer;
    }

    .pt-map-toggle::after { content: '▼'; float: right; transition: transform .2s ease; }
    .pt-map-toggle.is-open::after { transform: rotate(180deg); }

    /*
       押したときだけ開く。display の切替だと一瞬で消えてびっくりするので、
       高さと不透明度を0.5秒かけて畳む・開く（マップ操作で自動的に閉じるときも同じ）
    */
    .pt-map-search {
        order: -1;
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0 var(--pt-gutter);
        border-bottom-width: 0;
        transition: max-height .5s ease-in-out, opacity .5s ease-in-out, padding .5s ease-in-out;
    }

    .pt-map-search.is-open {
        max-height: 420px;   /* 実測339px。近い値にするほど0.5秒がまるごと動きに使われる */
        opacity: 1;
        padding: 4px var(--pt-gutter) 20px;
        border-bottom-width: 1px;
    }

    /*
       一覧の絞り込みはチェックボックスで開くので既定では畳んである。
       ここは Alpine の filterOpen で開くため、その指定を打ち消す。
    */
    .pt-map-search .pt-filter { display: flex; }

    .pt-page--map .pt-page__main { order: 0; flex: none; }

    /* flex-basis を残すと高さが 0 に潰れるので、伸縮をやめてから高さを決める */
    .pt-map-canvas {
        flex: none;
        height: calc((100dvh - var(--header-height, 70px) - 44px) / 2);
        min-height: 0;
    }

    .pt-map-results {
        order: 1;
        height: calc((100dvh - var(--header-height, 70px) - 44px) / 2);
        overflow-y: auto;
        padding: 0 var(--pt-gutter) 24px;
        border-top: 1px solid var(--pt-main);
    }
}

/* いまのロゴと、それを消すためのチェック */
.pt-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pt-logo img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    padding: 6px;
    border: 1px solid var(--pt-rule);
    background: #FFFDFA;
}

/* 曜日ごとの営業時間 */
.pt-hours-edit {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}

.pt-hours-edit__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pt-rule-2);
}

.pt-hours-edit__day {
    flex: 0 0 68px;
    font-size: 13px;
}

.pt-hours-edit__times {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt-hours-edit__dash { color: var(--pt-muted-2); }

.pt-input--time { width: 128px; }

/* 定休日にした行は、時刻を薄くして「効いていない」ことを見せる */
.pt-hours-edit__row:has(input[name$="[closed]"]:checked) .pt-hours-edit__times { opacity: 0.4; }

/* ----------------------------------------
   運営の作業台で使う表
   一覧は行が多いので、罫線は薄く、当たっている行だけ地を変える。
   ---------------------------------------- */

/* 幅の足りない画面では、表だけ横に流す（ページ自体は横に流さない） */
.pt-table-wrap { overflow-x: auto; margin-top: 16px; }

.pt-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 13px;
}

.pt-table th,
.pt-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--pt-rule-2);
    text-align: left;
    vertical-align: top;
}

.pt-table thead th {
    border-bottom: 1px solid var(--pt-main);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--pt-muted);
    white-space: nowrap;
}

.pt-table tbody tr { transition: background-color .12s ease; }
.pt-table tbody tr:hover { background: #FFFDFA; }

.pt-table__id { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--pt-muted-2); }
.pt-table__main { font-weight: 700; overflow-wrap: anywhere; }
.pt-table__sub { margin-top: 4px; font-size: 11px; color: var(--pt-muted); overflow-wrap: anywhere; }
.pt-table__date { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--pt-gray); white-space: nowrap; }
.pt-table__thumb { width: 104px; height: 59px; object-fit: cover; display: block; border: 1px solid var(--pt-rule-2); }

/* スラッグなど、そのまま写す文字 */
.pt-code {
    padding: 2px 6px;
    background: var(--pt-accent-bg);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--pt-gray);
}

/* 行ごとの操作。並びが崩れないよう、右端で1かたまりにする */
.pt-table__ops { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pt-table__ops form { display: inline; }

/* 状態の印（公開中・下書きなど） */
.pt-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--pt-gray);
    white-space: nowrap;
}
.pt-state::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pt-muted-3);
}
.pt-state--on::before { background: var(--pt-main); }

/* 作業台の見出し。右に「新規作成」を置く */
.pt-head__row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pt-head__action { display: flex; align-items: center; gap: 8px; flex: none; }

/* ----------------------------------------
   見方の切り替え（ラジオで開くものを決める。JSは使わない）
   ---------------------------------------- */

.pt-tabset { padding-top: 36px; }

.pt-tabset__bar {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--pt-rule);
}

.pt-tabset__bar label {
    padding: 10px 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 13px;
    color: var(--pt-gray);
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}

.pt-tabset__bar label:hover { color: var(--pt-ink); }

.pt-tabset__panel { display: none; }

/* 選ばれているものだけ開き、見出しに赤い下線を引く */
#view-summary:checked ~ .pt-tabset__bar label[for="view-summary"],
#view-chart:checked ~ .pt-tabset__bar label[for="view-chart"],
#view-region:checked ~ .pt-tabset__bar label[for="view-region"] {
    border-bottom-color: var(--pt-main);
    color: var(--pt-ink);
    font-weight: 700;
}

#view-summary:checked ~ .pt-tabset__panel[data-view="summary"],
#view-chart:checked ~ .pt-tabset__panel[data-view="chart"],
#view-region:checked ~ .pt-tabset__panel[data-view="region"] {
    display: block;
}

/* グラフの入れもの */
.pt-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 18px; }
.pt-chart { padding: 18px; border: 1px solid var(--pt-rule-2); background: var(--pt-paper); }
.pt-chart__title { margin-bottom: 12px; font-size: 12px; color: var(--pt-muted); }

@container pt-page (max-width: 779px) {
    .pt-charts { grid-template-columns: 1fr; }
    .pt-tabset__bar { gap: 16px; overflow-x: auto; }
}

/* その場で1件足すための入力（カテゴリ・タグなど） */
.pt-inline-add { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pt-inline-add .pt-input { flex: 1; min-width: 0; }

/* ----------------------------------------
   記事本文のブロック編集
   1ブロック＝1枚。順を入れ替えられるよう、頭に種類と操作を出す。
   ---------------------------------------- */

.pt-blocks { border: 1px solid var(--pt-rule); background: var(--pt-paper); padding: 16px; }

.pt-block {
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--pt-rule-2);
    background: #FFFDFA;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pt-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pt-block__type {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--pt-muted);
}
.pt-block__ops { display: flex; align-items: center; gap: 6px; }
.pt-block__ops .pt-btn[disabled] { opacity: .35; cursor: default; }
.pt-block__ops .pt-btn[disabled]:hover { transform: none; }

.pt-block__row { display: flex; align-items: center; gap: 8px; }
.pt-block__row .pt-input { flex: 1; min-width: 0; }
.pt-block > .pt-btn { align-self: flex-start; }
.pt-block__level { flex: 0 0 140px; }
.pt-block__preview { max-height: 88px; border: 1px solid var(--pt-rule-2); display: block; }

.pt-blocks__add { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.pt-blocks__add-label {
    margin-right: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--pt-muted);
}

/* 写真のならび（クチコミの画像など） */
.pt-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.pt-photos img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

/* 詳細ページの右の欄にまとめる操作 */
.pt-aside__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pt-aside__actions .pt-btn {
    width: 100%;
}

.pt-aside__actions form {
    display: block;
}

/* 畳んでおく操作（通報・返信の編集など。JSは使わない） */
.pt-disclosure {
    margin-top: 12px;
    border-top: 1px solid var(--pt-rule-2);
    padding-top: 12px;
}

.pt-disclosure > summary {
    font-size: 12px;
    color: var(--pt-muted);
    cursor: pointer;
    list-style: none;
}

.pt-disclosure > summary::-webkit-details-marker {
    display: none;
}

.pt-disclosure > summary::before {
    content: '＋ ';
    color: var(--pt-muted-2);
}

.pt-disclosure[open] > summary::before {
    content: '− ';
}

.pt-disclosure form {
    margin-top: 12px;
}

/* 書き込み欄 */
.pt-textarea {
    width: 100%;
    min-height: 96px;
    padding: 11px 12px;
    border: 1px solid var(--pt-rule);
    background: #FFFDFA;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;
    color: var(--pt-ink);
    resize: vertical;
}

.pt-reply {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 20px;
}

/* この情報の出どころ（INFO BY GOOGLE / INFO BY SHOP） */
.pt-source {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 14px 0 0;
}

.pt-source__by {
    padding: 3px 8px;
    border: 1px solid var(--pt-rule);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--pt-muted);
}

.pt-source__note {
    font-size: 11px;
    line-height: 1.8;
    color: var(--pt-muted-2);
}

/* ----------------------------------------
   フォーム（クチコミ投稿・プロフィール・ログインなど）
   ---------------------------------------- */

.pt-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 18px;
}

.pt-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* display:flex がブラウザ既定の [hidden] に勝ってしまうので、明示して戻す */
.pt-field[hidden] { display: none; }

/* チップを欄に直接置いたときは、文字ぶんの幅で（引き伸ばさない） */
.pt-field > .pt-chip { align-self: flex-start; }

.pt-field__label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--pt-gray);
}

/* 必須の印。※ではなく言葉で置く */
.pt-field__req {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--pt-main);
}

.pt-field__note {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--pt-muted-2);
}

.pt-input,
.pt-select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--pt-rule);
    background: #FFFDFA;
    font-family: inherit;
    font-size: 14px;
    color: var(--pt-ink);
}

.pt-input:focus,
.pt-select:focus,
.pt-textarea:focus {
    border-color: var(--pt-main);
    outline: none;
}

.pt-field__help {
    font-size: 11px;
    line-height: 1.8;
    color: var(--pt-muted);
}

.pt-field__error {
    font-size: 11px;
    line-height: 1.8;
    color: var(--pt-main);
}

.pt-input.is-invalid,
.pt-select.is-invalid,
.pt-textarea.is-invalid {
    border-color: var(--pt-main);
}

/* 2つ並べる欄（狭いときは1列） */
.pt-fields2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 24px;
}

.pt-form__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

/* 5段階の入力。星をやめて、押した1つだけ塗る */
.pt-rate {
    display: flex;
    gap: 4px;
}

.pt-rate input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pt-rate label {
    display: grid;
    place-items: center;
    width: 38px;
    height: 30px;
    border: 1px solid var(--pt-rule);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--pt-muted);
    cursor: pointer;
}

.pt-rate input:checked + label {
    background: var(--pt-main);
    border-color: var(--pt-main);
    color: var(--pt-paper);
}

.pt-rate input:focus-visible + label {
    outline: 1px solid var(--pt-main);
    outline-offset: 2px;
}

/* 写真を選ぶ */
.pt-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px dashed var(--pt-rule);
    font-size: 12px;
    color: var(--pt-muted);
}

/* ----------------------------------------
   ログイン・新規登録（レールもパネルも出さない1枚）
   ---------------------------------------- */

.pt-auth {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 48px var(--pt-gutter) 64px;
}

/* 入力が多い新規登録は少し広く */
.pt-auth--wide { max-width: 640px; }

.pt-auth__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;
}

.pt-auth__foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--pt-rule-2);
    font-size: 12px;
    color: var(--pt-muted);
}

.pt-auth__foot a {
    color: var(--pt-main);
}

/* 「または」の区切り */
.pt-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--pt-muted-2);
}

.pt-divider::before,
.pt-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pt-rule-2);
}

/* ----------------------------------------
   順位つきの一覧（人気エリアなど）
   ---------------------------------------- */

.pt-rank {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.pt-rank__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pt-rule-2);
}

.pt-rank__no {
    width: 26px;
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--pt-muted-2);
}

.pt-rank__name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.pt-rank__bar {
    position: relative;
    width: 120px;
    flex: 0 0 auto;
    height: 4px;
    background: var(--pt-rule-2);
}

.pt-rank__bar span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--pt-main);
}

.pt-rank__count {
    width: 44px;
    flex: 0 0 auto;
    text-align: right;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--pt-ink);
}

@container pt-page (max-width: 779px) {
    .pt-fields2 { grid-template-columns: 1fr; }
    .pt-rank__bar { display: none; }
}

/* ----------------------------------------
   カーソルが当たっているとき

   下線は使わない。枠を赤くする／わずかに浮かせる、で示す。
   ---------------------------------------- */

/* 面のあるもの（1件のかたまり）は枠と地の色で示す */
.pt-shop,
.pt-review,
.pt-news__item,
.pt-rank__item,
.pt-aside__row,
.pt-hours__row,
.pt-fact {
    transition: border-color .12s ease, background-color .12s ease;
}

a.pt-shop:hover,
a.pt-news__item:hover,
a.pt-rank__item:hover,
a.pt-aside__row:hover {
    border-bottom-color: var(--pt-main);
    background: #FFFDFA;
}

/* レポートの紙は、枠そのものを赤くする */
.pt-note::before {
    transition: border-color .12s ease;
}

.pt-note:hover::before {
    border-color: var(--pt-main);
}

/* 写真つきのものは、写真の縁を赤くする */
.pt-article__thumb,
.pt-video__thumb {
    transition: outline-color .12s ease;
    outline: 1px solid transparent;
    outline-offset: -1px;
}

.pt-article:hover .pt-article__thumb,
.pt-video:hover .pt-video__thumb {
    outline-color: var(--pt-main);
}

.pt-article:hover .pt-article__title,
.pt-video:hover .pt-video__title,
a.pt-shop:hover .pt-shop__name,
a.pt-rank__item:hover .pt-rank__name,
.pt-review__shop:hover {
    color: var(--pt-main);
}

/* レールとタブ */
.pt-rail__link {
    transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.pt-rail__link:hover {
    border-left-color: var(--pt-main);
    background: var(--pt-paper);
    color: var(--pt-ink);
}

.pt-tabs a:hover {
    color: var(--pt-ink);
}

/* 文字だけのリンクは色を濃くする */
.pt-section-head a:hover,
.pt-stat__link:hover,
.pt-rail__action:hover,
.pt-auth__foot a:hover {
    color: #7a1212;
}

/* ボタンは少しだけ浮かせる（色は変えない。文字が読みにくくなるため） */
.pt-btn,
.pt-review__helpful,
.pt-shop__remove {
    transition: transform .12s ease, border-color .12s ease;
}

.pt-btn:hover,
.pt-review__helpful:hover,
.pt-shop__remove:hover {
    transform: translateY(-2px);
}

.pt-btn--quiet:hover,
.pt-review__helpful:hover {
    border-color: var(--pt-main);
    color: var(--pt-main);
}

.pt-btn:active,
.pt-review__helpful:active,
.pt-shop__remove:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .pt-btn,
    .pt-review__helpful,
    .pt-shop__remove {
        transition: none;
    }

    .pt-btn:hover,
    .pt-review__helpful:hover,
    .pt-shop__remove:hover {
        transform: none;
    }
}

/* 狭い画面では、5段階の選択を幅いっぱいに広げる（端までは寄せない） */
@container pt-page (max-width: 779px) {
    .pt-rate {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .pt-rate label {
        width: 100%;
        height: 38px;
    }
}

/* ----------------------------------------
   iPhoneのフォーカス時ズームよけ
   フォーム部品が16px未満だと、iOS Safari はフォーカスした瞬間に
   画面ごと拡大してしまう。狭い画面では入力部品を16pxに揃えて防ぐ。
   （viewport の maximum-scale=1 でも防げるが、一部の環境で
   ピンチズームまで殺してしまうため、文字サイズで対処する）
   ---------------------------------------- */
@media (max-width: 780px) {
    /* !important は例外的に使う：各部品のクラス指定（13px等）より
       必ず優先させたい、端末の挙動対策の最終上書きのため */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ----------------------------------------
   iOS Safari の date 入力の幅対策
   iOSでは日付入力が内部部品の固有幅を持ち、width:100% を守らずに
   親からはみ出して横スクロールを起こすことがある（生年月日欄で発生）。
   ネイティブの見た目をやめて普通のテキスト欄として振る舞わせ、
   幅を親に必ず合わせる。
   ---------------------------------------- */
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* appearance を消すと iOS で高さが潰れるので最低値を確保 */
    min-height: 2.6em;
}

/* ----------------------------------------
   マップの初回ガイド（吹き出し）
   ---------------------------------------- */
.pt-guide {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(23, 22, 26, 0.35);
}

.pt-guide__bubble {
    position: fixed;
    z-index: 2;
    width: min(300px, calc(100vw - 24px));
    padding: 14px 16px;
    /* body直下に置くので .pt スコープの変数が届かない。実値で塗る */
    background: #FBF9F6;
    color: #2B2926;
    border: 1px solid #931616;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.pt-guide__no {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #931616;
}

.pt-guide__text {
    margin: 6px 0 12px;
    font-size: 13px;
    line-height: 1.8;
}

.pt-guide__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pt-guide__skip {
    border: none;
    background: none;
    font-size: 12px;
    color: #8B8680;
    cursor: pointer;
}

.pt-guide__next {
    padding: 8px 18px;
    border: none;
    background: #931616;
    color: #FBF9F6;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* 案内している相手を赤枠で囲む */
.pt-guide__ring {
    position: fixed;
    z-index: 1;
    border: 2px solid #931616;
    border-radius: 6px;
    box-shadow: 0 0 0 4px rgba(147, 22, 22, 0.18);
    pointer-events: none;
}


/* ----------------------------------------
   SPの検索ボトムシート（コーヒーが注がれて開く）
   開閉は js/search-sheet.js。注ぎの構造は docs/water-glass.html 参考
   ---------------------------------------- */

/* PCではまるごと出さない（検索は右カラムが担当） */
@media (min-width: 780px) {
    .pt-search-fab, .pt-head__filter-link, .pt-sheet { display: none !important; }
}

/* 左下の虫眼鏡（浮きボタン） */
.pt-search-fab {
    position: fixed;
    left: 16px;
    bottom: 20px;
    z-index: 40;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: var(--pt-main);
    color: #FCFCFB;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(60, 20, 10, .35);
    cursor: pointer;
}

/* 見出し下の「絞り込み」ボタン */
.pt-head__filter-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 8px 14px;
    border: 1px solid var(--pt-main);
    background: none;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--pt-main);
    cursor: pointer;
}

/* シート本体（ネイティブ dialog） */
.pt-sheet {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
}

.pt-sheet::backdrop {
    background: rgba(43, 16, 8, 0);
    transition: background .45s ease;
}
.pt-sheet[open]::backdrop { background: rgba(43, 16, 8, .45); }

.pt-sheet__inner {
    position: relative;
    /* シートの「箱」は動かさない。登場は液面の上昇（pour）が担う */
    background: transparent;
    color: var(--background-color);
    overflow: visible;
}

.pt-sheet__body {
    /* コーヒーの中にフォームが浮かぶイメージ */
    background: linear-gradient(180deg, var(--pt-main), #6B1212);
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
    max-height: 72vh;
    overflow-y: auto;
    /* 液が満ちて覆われた瞬間に、液の下で実体化する（液が引くとき背後が透けない） */
    opacity: 0;
}
.pt-sheet[open] .pt-sheet__body { animation: pt-body-appear 1.3s linear forwards; }
@keyframes pt-body-appear {
    0%   { opacity: 0; }
    30%  { opacity: 0; }
    34%  { opacity: 1; }
    100% { opacity: 1; }
}

.pt-sheet__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 0 2px;
}
.pt-sheet__title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--background-color);
    opacity: .75;
}
.pt-sheet__close {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--background-color);
    opacity: .85;
    cursor: pointer;
    padding: 6px;
}

/* 液中のフォーム部品: 文字・枠は背景色（明るい紙色）で白抜きに */
.pt-sheet .pt-filter__label { color: var(--background-color); opacity: .8; }
.pt-sheet .pt-filter__input,
.pt-sheet .pt-filter__select {
    background: rgba(252, 250, 247, .08);
    border-color: rgba(244, 241, 237, .45);
    color: var(--background-color);
}
.pt-sheet .pt-filter__input::placeholder { color: rgba(244, 241, 237, .5); }
.pt-sheet .pt-filter__select option { color: #2B1008; background: var(--background-color); }
.pt-sheet .pt-chip {
    border-color: rgba(244, 241, 237, .45);
    background: transparent;
    color: var(--background-color);
}
.pt-sheet .pt-chip--on { background: var(--background-color); color: var(--pt-main); }
.pt-sheet .pt-btn {
    border-color: var(--background-color);
    background: var(--background-color);
    color: var(--pt-main);
}
.pt-sheet .pt-btn--quiet { background: transparent; color: var(--background-color); }
.pt-sheet input[type="date"] { color-scheme: dark; }

/* SPでは .pt-filter が非表示のため、シートの中では縦積みで出す */
@media (max-width: 779px) {
    .pt-sheet .pt-filter {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .pt-sheet .pt-filter__actions { display: flex; gap: 8px; margin-left: 0; }
    .pt-sheet .pt-filter__actions .pt-btn { flex: 1; justify-content: center; }
}

/* ── 注がれるコーヒー（水位・傾き・波の3層。1.3sの1回きり） */
.pt-sheet__pour {
    position: absolute;
    /* 上に60px余裕を取り、波がシート上端から顔を出せるようにする */
    inset: -60px 0 0 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
}
.pt-sheet[open] .pt-sheet__pour { animation: pt-pour-fade 1.3s linear forwards; }

/* 【1】水位: 上下移動だけを担当（pour の60px拡張ぶんを戻す） */
.pt-pour__level {
    position: absolute;
    inset: 60px 0 0 0;
    transform: translateY(112%);
}
.pt-sheet[open] .pt-pour__level { animation: pt-pour-fill 1.3s linear forwards; }

/* 【2】傾き: 液面の回転軸（幅も高さも0の点） */
.pt-pour__slosh {
    position: absolute;
    top: 0; left: 50%;
    width: 0; height: 0;
}
.pt-sheet[open] .pt-pour__slosh { animation: pt-pour-slosh 1.3s ease-in-out forwards; }

/* 【3】液本体: 上辺は波の谷。ここから下がベタ塗り */
.pt-pour__body {
    position: absolute;
    top: 0; left: -110vw;
    width: 220vw; height: 220vh;
    background: linear-gradient(180deg, #7E1414 0, #4A0C0C 240px);
}

/* 【4】波: 液本体の上辺から生える山。scaleYで減衰（谷は常に液面と一致） */
.pt-pour__crest {
    position: absolute;
    top: -40px; left: -110vw;
    width: 220vw; height: 40px;
    transform-origin: 50% 100%;
}
.pt-sheet[open] .pt-pour__crest { animation: pt-pour-calm 1.3s ease-in-out forwards; }
.pt-pour__crest svg {
    position: absolute;
    /* 山3つ（1波長=画面幅）を左右に1波長ずつはみ出して置く。
       動かしても波が途切れない */
    left: -100vw;
    bottom: 0;
    width: 300vw;
    height: 40px;
    display: block;
    /* 一方向の流れではなく、左へ寄せて揺り戻す減衰往復（横揺れ） */
    animation: pt-pour-flow .9s ease-in-out forwards;
}

/* 水位: 1本の減速カーブで注ぎ、切れ目なく着水（0.52s） */
@keyframes pt-pour-fill {
    0%   { transform: translateY(112%); animation-timing-function: cubic-bezier(.15,.55,.2,1); }
    40%  { transform: translateY(0%); }
    100% { transform: translateY(0%); }
}
/* 傾き: 右下に流れ込み、振り子のように減衰して水平へ（0.39s） */
@keyframes pt-pour-slosh {
    0%   { transform: rotate(-11deg); }
    4%   { transform: rotate(-11deg); }
    12%  { transform: rotate(5deg); }
    18%  { transform: rotate(-2.5deg); }
    22%  { transform: rotate(-1deg); }
    26%  { transform: rotate(-.3deg); }
    30%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
/* 波の減衰: 注ぎ始めから徐々に収束（0.44sで平ら） */
@keyframes pt-pour-calm {
    0%   { transform: scaleY(1); }
    12%  { transform: scaleY(.75); }
    22%  { transform: scaleY(.45); }
    28%  { transform: scaleY(.2); }
    32%  { transform: scaleY(.07); }
    34%  { transform: scaleY(0); }
    100% { transform: scaleY(0); }
}
/* 波の横揺れ: 左へ寄せて小さく揺り戻して静止 */
@keyframes pt-pour-flow {
    0%   { transform: translateX(0); }
    45%  { transform: translateX(-28vw); }
    75%  { transform: translateX(-23vw); }
    100% { transform: translateX(-24.5vw); }
}
/* 液は波の収束と重ねて早めに引く（検索項目は0.6sで見える） */
@keyframes pt-pour-fade {
    0%   { opacity: 1; }
    24%  { opacity: 1; }
    46%  { opacity: 0; }
    100% { opacity: 0; }
}

/* 閉じるとき: そのまま消さず、下へ沈めてから閉じる */
.pt-sheet.is-closing .pt-sheet__inner {
    animation: pt-sheet-sink .35s cubic-bezier(.5,.1,.75,.4) forwards;
}
@keyframes pt-sheet-sink {
    from { transform: translateY(0); }
    to   { transform: translateY(105%); }
}
.pt-sheet.is-closing::backdrop { background: rgba(43, 16, 8, 0); }

/* 動きを減らす設定の人には演出を出さない */
@media (prefers-reduced-motion: reduce) {
    .pt-sheet.is-closing .pt-sheet__inner { animation: none; }
    .pt-sheet[open] .pt-sheet__body { animation: none; opacity: 1; }
    .pt-sheet[open] .pt-sheet__pour { animation: none; opacity: 0; }
    .pt-sheet[open] .pt-pour__level,
    .pt-sheet[open] .pt-pour__slosh,
    .pt-sheet[open] .pt-pour__crest,
    .pt-pour__crest svg { animation: none; }
}