/* ============================================================
   店舗図鑑 /zukan/(page-zukan.php 専用・zkn- 名前空間)
   Phase 4 承認済プロトタイプの移植。トークンは base.css の --ntm-* を継承。
   参考 Moments of HAYAMA(構造・演出のみ)。
   @since 1.17.0
   ============================================================ */

:root {
    /* moments 由来イージング(本ページ専用。既存 --ntm-ease-* とは別名で共存) */
    --zkn-ease: cubic-bezier(.5, 1, .89, 1);
    --zkn-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

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

/* ============================================================
   1. タイトルセクション
   ============================================================ */
.zkn-title {
    max-width: 1280px; margin: 0 auto;
    padding: 96px 32px 56px;
    text-align: center;
}
.zkn-title-en {
    display: block;
    font-family: var(--ntm-font-en-italic); font-style: italic; font-weight: 400;
    font-size: 1.05rem; letter-spacing: .13em;
    color: var(--ntm-terracotta);
    margin-bottom: 18px;
}
.zkn-title .zkn-title-jp {
    font-family: var(--ntm-font-serif); font-weight: 500;
    font-size: clamp(2.4rem, 5.5vw, 3.4rem);
    letter-spacing: .18em; text-indent: .18em;
    color: var(--ntm-indigo);
    line-height: 1.4;
    margin: 0;
}
.zkn-title .zkn-title-lead {
    max-width: 560px; margin: 28px auto 0;
    font-family: var(--ntm-font-serif);
    font-size: .92rem; letter-spacing: .08em; line-height: 2.2;
    color: var(--ntm-slate);
}
/* ストローク描画の飾り線(山型) */
.zkn-title-stroke { margin: 36px auto 0; width: 220px; height: 24px; overflow: visible; display: block; }
.zkn-title-stroke path {
    stroke: var(--ntm-terracotta); stroke-width: 1.4; fill: none;
    stroke-dasharray: 2000; stroke-dashoffset: 2000;
}
.ntm-js .is-inview .zkn-title-stroke path {
    animation: zkn-stroke 1.8s var(--zkn-ease) .3s forwards;
}
@keyframes zkn-stroke { to { stroke-dashoffset: 0; } }

/* ============================================================
   2. カテゴリタブ(サーバーサイドフィルタ・<a>)
   ============================================================ */
.zkn-tabs {
    max-width: 1280px; margin: 0 auto;
    padding: 0 32px 64px;
}
.zkn-tabs-list {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
/* Phase 5 指摘④: 選択/非選択のコントラスト強化。
   非選択 = ゴースト(hairline 罫線・slate 文字)、
   選択(aria-current="page" = 現在ページ) = indigo 塗り + paper 文字 + weight 700 + 浅い影。 */
.zkn-tab {
    display: inline-block; text-align: center; text-decoration: none;
    border: 1px solid var(--ntm-hairline);
    border-radius: 999px;
    padding: 10px 30px;
    font-family: var(--ntm-font-serif); font-size: .88rem; font-weight: 500;
    letter-spacing: .14em; text-indent: .07em;
    color: var(--ntm-slate);
    transition: color .4s var(--zkn-ease), border-color .4s var(--zkn-ease),
                background-color .4s var(--zkn-ease), box-shadow .4s var(--zkn-ease);
}
.zkn-tab .en {
    display: block; font-family: var(--ntm-font-en-italic); font-style: italic;
    font-size: .68rem; letter-spacing: .1em; color: var(--ntm-slate-soft);
    transition: color .4s var(--zkn-ease);
}
.zkn-tab:hover { border-color: var(--ntm-indigo); color: var(--ntm-indigo); }
.zkn-tab.is-active,
.zkn-tab[aria-current="page"] {
    background: var(--ntm-indigo); border-color: var(--ntm-indigo);
    color: var(--ntm-paper);
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(31, 42, 68, .18);
}
.zkn-tab.is-active .en,
.zkn-tab[aria-current="page"] .en { color: var(--ntm-sand); }

/* v1.21.0 motion-spec §4: 章見出しの配置(コンポーネント本体は components.css) */
.zkn-ch-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 56px;
}
@media (max-width: 768px) {
    .zkn-ch-wrap { margin-bottom: 40px; }
}

/* ============================================================
   3. カードグリッド
   ============================================================ */
.zkn-grid-wrap {
    max-width: 1280px; margin: 0 auto;
    padding: 0 32px 140px;
}
.zkn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 48px;
    row-gap: 96px;
    list-style: none; margin: 0; padding: 0;
}
/* v1.50.0: 雁行は"静かな段差"に抑える（大きすぎる段差＝散らかって見える）。 */
.zkn-item:nth-child(3n + 2) { margin-top: 28px; }
.zkn-item:nth-child(3n)     { margin-top: 56px; }
.zkn-item { min-width: 0; }

/* パララックス(transform のみ = CLS ゼロ) */
.zkn-item-inner { display: block; will-change: transform; }

.zkn-card { display: block; text-decoration: none; color: inherit; }
.zkn-card-thumb {
    position: relative; overflow: hidden;
    background: var(--ntm-paper-deep);
}
/* Phase 5 指摘①: 640/1169 比率の厳守。
   aspect-ratio は外部CSS(min/max-height 等)に負けて縦圧縮することがあるため、
   ::before の padding-top 比率ボックスで全ビューポート幅において比率を保証する
   (サムネ/プレースホルダーは absolute inset:0 なので高さに追従)。 */
/* v1.50.0: 極端に縦長(640/1169)だと正方形ロゴが枠に埋もれて雑に見えるため、
   落ち着いた 3:4 に変更。中身の実寸で cover/contain を出し分ける（PHPが付与）。 */
.zkn-card-thumb::before {
    content: "";
    display: block;
    padding-top: calc(4 / 3 * 100%); /* 3:4 縦カード */
}
.zkn-card-thumb .zkn-thumb-img {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; display: block;
    transition: transform 1.2s var(--zkn-ease);
}
/* 縦写真(リール)＝枠全面。ポスターの迫力を保つ */
.zkn-card-thumb .zkn-thumb-img.is-cover { object-fit: cover; }
/* ロゴ・正方形・横長＝切らず中央に、清潔な地色で。ぼかしの смеみは使わない。
   枠いっぱいに広げず内側に余白を持たせて"見せる"（雑さの解消）。 */
.zkn-card-thumb .zkn-thumb-img.is-logo {
    object-fit: contain;
    padding: 14%;
    background: var(--ntm-snow);
}
.zkn-card:hover .zkn-thumb-img,
.zkn-card:focus-visible .zkn-thumb-img { transform: scale(1.05); }
/* サムネ未設定プレースホルダー(トークン内グラデーション) */
.zkn-card-thumb .ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    transition: transform 1.2s var(--zkn-ease);
}
.zkn-card:hover .zkn-card-thumb .ph,
.zkn-card:focus-visible .zkn-card-thumb .ph { transform: scale(1.05); }
.zkn-card-thumb .ph-num {
    font-family: var(--ntm-font-en-italic); font-style: italic;
    font-size: 3.6rem; letter-spacing: .04em;
    opacity: .5;
}
.zkn-card-thumb .ph-label {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    font-family: var(--ntm-font-en); font-size: .6rem; font-weight: 500;
    letter-spacing: .22em; white-space: nowrap; opacity: .55;
}
.ph-a { background: linear-gradient(160deg, var(--ntm-paper-deep), var(--ntm-sand-soft)); color: var(--ntm-terracotta-deep); }
.ph-b { background: linear-gradient(160deg, var(--ntm-indigo), var(--ntm-indigo-deep)); color: var(--ntm-sand-soft); }
.ph-c { background: linear-gradient(160deg, var(--ntm-sand), var(--ntm-sand-soft)); color: var(--ntm-indigo); }
.ph-d { background: linear-gradient(160deg, var(--ntm-terracotta), var(--ntm-terracotta-deep)); color: var(--ntm-paper); }

.zkn-card-cat {
    display: block; margin-top: 24px;
    font-family: var(--ntm-font-en-italic); font-style: italic;
    font-size: .82rem; letter-spacing: .12em;
    color: var(--ntm-terracotta);
}
/* Phase 5 指摘③: 情報ブロックの縦余白拡大(タイトル上 10→20px) */
.zkn-card .zkn-card-title {
    margin: 20px 0 0;
    font-family: var(--ntm-font-serif); font-weight: 500;
    font-size: 1.28rem; line-height: 1.9; letter-spacing: .1em;
    color: var(--ntm-indigo);
    display: block;
    position: relative;
    /* v1.51.0: 紹介文の長短でカード高さが変わらないよう、常に2行分の高さに統一。 */
    min-height: calc(1.9em * 2);
}
/* 紹介文は2行にクランプ（溢れは…／全文は個店ページ）。下線SVGは枠外に出るので
   クランプは内側の span に限定する。 */
.zkn-card .zkn-card-title-t {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
/* hover ストローク下線描画 */
.zkn-card .zkn-card-title svg {
    position: absolute; left: 0; bottom: -8px;
    width: 100%; height: 6px; overflow: visible;
}
.zkn-card .zkn-card-title svg path {
    stroke: var(--ntm-terracotta); stroke-width: 1.2; fill: none;
    stroke-dasharray: 2000; stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.1s var(--zkn-ease);
}
.zkn-card:hover .zkn-card-title svg path,
.zkn-card:focus-visible .zkn-card-title svg path { stroke-dashoffset: 0; }

/* Phase 5 指摘③: タイトル下も +10px(下線描画ぶんの bottom:-8px と干渉しない余白) */
.zkn-card-foot {
    margin-top: 30px;
    display: flex; align-items: center; gap: 14px;
}
/* 矢印ボタン(c-rect_arw 相当) */
.zkn-arw {
    flex: none;
    width: 46px; height: 46px;
    border: 1px solid var(--ntm-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--ntm-indigo);
    transition: background-color .5s var(--zkn-ease), color .5s var(--zkn-ease),
                border-color .5s var(--zkn-ease);
}
.zkn-arw svg { transition: transform .6s var(--zkn-ease-bounce); }
.zkn-card:hover .zkn-arw {
    background: var(--ntm-indigo); border-color: var(--ntm-indigo);
    color: var(--ntm-paper);
}
.zkn-card:hover .zkn-arw svg { transform: translateX(5px); }
.zkn-card-shop {
    font-family: var(--ntm-font-sans); font-size: .78rem; font-weight: 500;
    letter-spacing: .1em; color: var(--ntm-slate);
    line-height: 1.6;
}
.zkn-card-shop .area {
    display: block; font-size: .68rem; color: var(--ntm-slate-soft);
    letter-spacing: .14em;
}

/* リビール(JS 有効時のみ初期非表示) */
.ntm-js .zkn-reveal {
    opacity: 0; transform: translateY(36px);
    transition: opacity 1s var(--zkn-ease), transform 1s var(--zkn-ease);
}
.ntm-js .zkn-reveal.is-inview { opacity: 1; transform: translateY(0); }

/* ============================================================
   4. ページネーション
   ============================================================ */
.zkn-pager { margin-top: 96px; }
.zkn-pager .page-numbers {
    display: flex; justify-content: center; align-items: center;
    gap: 6px; flex-wrap: wrap;
    list-style: none; margin: 0; padding: 0;
}
.zkn-pager .page-numbers li { margin: 0; }
.zkn-pager a.page-numbers,
.zkn-pager span.page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 46px; padding: 0 14px;
    border: 1px solid var(--ntm-border);
    font-family: var(--ntm-font-en); font-size: .85rem; letter-spacing: .08em;
    color: var(--ntm-slate); text-decoration: none;
    transition: background-color .4s var(--zkn-ease), color .4s var(--zkn-ease),
                border-color .4s var(--zkn-ease);
}
.zkn-pager a.page-numbers:hover { border-color: var(--ntm-indigo); color: var(--ntm-indigo); }
.zkn-pager span.page-numbers.current {
    background: var(--ntm-indigo); border-color: var(--ntm-indigo);
    color: var(--ntm-paper);
}
.zkn-pager span.page-numbers.dots { border: 0; }

/* ============================================================
   5. 空状態(店舗ゼロ)
   ============================================================ */
.zkn-empty {
    max-width: 560px; margin: 0 auto;
    padding: 48px 0 24px;
    text-align: center;
}
.zkn-empty .zkn-empty-en {
    font-family: var(--ntm-font-en-italic); font-style: italic;
    font-size: 1.05rem; letter-spacing: .13em;
    color: var(--ntm-terracotta);
    margin: 0 0 16px;
}
.zkn-empty .zkn-empty-text {
    font-family: var(--ntm-font-serif);
    font-size: .95rem; letter-spacing: .08em; line-height: 2.3;
    color: var(--ntm-slate);
    margin: 0 0 28px;
}
.zkn-empty-back {
    display: inline-block;
    font-family: var(--ntm-font-serif); font-size: .9rem; letter-spacing: .14em;
    color: var(--ntm-indigo); text-decoration: none;
    border-bottom: 1px solid var(--ntm-border);
    padding-bottom: 6px;
    transition: color .4s var(--zkn-ease), border-color .4s var(--zkn-ease);
}
.zkn-empty-back:hover { color: var(--ntm-terracotta); border-color: var(--ntm-terracotta); }

/* ============================================================
   6. エリアマップ導線バナー
   ============================================================ */
.zkn-map {
    background: var(--ntm-indigo);
    color: var(--ntm-paper);
    overflow: hidden;
}
.zkn-map-link {
    max-width: 1280px; margin: 0 auto;
    padding: 100px 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 48px;
    text-decoration: none; color: inherit;
}
.zkn-map-pin { flex: none; width: 84px; height: 84px; }
.zkn-map-pin path, .zkn-map-pin circle {
    stroke: var(--ntm-sand); stroke-width: 1.4; fill: none;
    stroke-dasharray: 2000; stroke-dashoffset: 2000;
}
.ntm-js .is-inview .zkn-map-pin path,
.ntm-js .is-inview .zkn-map-pin circle {
    animation: zkn-stroke 2s var(--zkn-ease) .2s forwards;
}
.zkn-map-body { flex: 1; }
.zkn-map-en {
    display: block; font-family: var(--ntm-font-en-italic); font-style: italic;
    font-size: .95rem; letter-spacing: .13em; color: var(--ntm-sand);
    margin-bottom: 12px;
}
.zkn-map .zkn-map-title {
    font-family: var(--ntm-font-serif); font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: .14em; line-height: 1.7;
    color: var(--ntm-paper);
    margin: 0;
}
.zkn-map .zkn-map-lead {
    margin: 14px 0 0; font-family: var(--ntm-font-serif);
    font-size: .88rem; letter-spacing: .06em;
    color: var(--ntm-sand-soft); line-height: 2.1;
}
.zkn-map-arw {
    flex: none;
    display: flex; align-items: center; gap: 16px;
    font-family: var(--ntm-font-serif); font-size: .95rem;
    letter-spacing: .16em; color: var(--ntm-paper);
}
.zkn-map-arw .box {
    width: 56px; height: 56px;
    border: 1px solid var(--ntm-sand);
    display: flex; align-items: center; justify-content: center;
    color: var(--ntm-sand);
    transition: background-color .5s var(--zkn-ease), color .5s var(--zkn-ease);
}
.zkn-map-arw .box svg { transition: transform .6s var(--zkn-ease-bounce); }
.zkn-map-link:hover .zkn-map-arw .box {
    background: var(--ntm-sand); color: var(--ntm-indigo);
}
.zkn-map-link:hover .zkn-map-arw .box svg { transform: translateX(5px); }

/* ============================================================
   7. レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
    .zkn-grid { column-gap: 32px; row-gap: 72px; }
    .zkn-item:nth-child(3n + 2) { margin-top: 20px; }
    .zkn-item:nth-child(3n)     { margin-top: 40px; }
}
@media (max-width: 768px) {
    .zkn-title { padding: 64px 20px 40px; }
    .zkn-tabs { padding: 0 20px 48px; }
    .zkn-tab { padding: 8px 20px; font-size: .8rem; }

    .zkn-grid-wrap { padding: 0 20px 96px; }
    .zkn-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 18px; row-gap: 64px;
    }
    /* SP: 2 カラムの互い違い(Phase 5 指摘②: オフセットを約半分に縮小) */
    .zkn-item { margin-top: 0 !important; }
    .zkn-item:nth-child(2n) { margin-top: 32px !important; }
    .zkn-card .zkn-card-title { font-size: 1.02rem; letter-spacing: .06em; }
    .zkn-arw { width: 38px; height: 38px; }
    .zkn-card-foot { gap: 10px; }
    .zkn-pager { margin-top: 64px; }

    .zkn-map-link {
        flex-direction: column; align-items: flex-start;
        padding: 72px 20px; gap: 32px;
    }
    .zkn-map-pin { width: 64px; height: 64px; }
}

/* ============================================================
   8. prefers-reduced-motion(全アニメ無効化 + 最終状態表示)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .zkn-title-stroke path,
    .zkn-card-title svg path,
    .zkn-map-pin path, .zkn-map-pin circle {
        animation: none !important;
        transition: none !important;
        stroke-dashoffset: 0 !important;
    }
    .ntm-js .zkn-reveal { opacity: 1; transform: none; transition: none; }
    .zkn-item-inner { transform: none !important; }
    .zkn-card-thumb .zkn-thumb-img,
    .zkn-card-thumb .ph,
    .zkn-arw svg, .zkn-map-arw .box svg { transition: none !important; }
}

/* ============================================================
   v1.35.0: カテゴリ一覧(/shop-cat/{slug}/)の写真は切り抜かない
   店主のポートレート・ロゴが切れないよう contain。枠は縦長のまま揃える。
   ============================================================ */
.ntm-sc-thumb {
    background: var(--ntm-paper-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ntm-sc-thumb .ntm-sc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 全体表示(見切れゼロ) */
    display: block;
    transition: transform 1.2s var(--zkn-ease);
}
.zkn-card:hover .ntm-sc-img { transform: scale(1.04); }
.ntm-sc-wrap { padding-top: 0; }
@media (prefers-reduced-motion: reduce) {
    .ntm-sc-thumb .ntm-sc-img { transition: none; }
}