/* ============================================================
   個店詳細 /shop/{slug}/(single-nt_shop.php 専用・shs- 名前空間)
   トークンは --ntm-*、カード部品は zukan.css(zkn-)を再利用。
   余白は図鑑より広く=1店の独立した誌面(spec §3)。
   @since 1.22.0
   ============================================================ */

.shs {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

.shs-sec-en {
    display: block;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .95rem;
    letter-spacing: .13em;
    color: var(--ntm-terracotta);
    margin-bottom: 14px;
}
.shs .shs-sec-t {
    font-family: var(--ntm-font-serif);
    font-weight: 500;
    font-size: 1.45rem;
    letter-spacing: .14em;
    color: var(--ntm-indigo);
    margin: 0 0 36px;
}

/* ============================================================
   1. ヒーロー(見開き)
   ============================================================ */
.shs-hero {
    display: grid;
    grid-template-columns: minmax(300px, 430px) 1fr;
    gap: 72px;
    align-items: center;
    padding: 110px 0 96px;
}
/* v1.48.0: 縦長写真は枠に一致して全面、小さなロゴ等は切らず・巨大化させず全体表示。
   余白は同じ写真のぼかし下地(.shs-hero-blur)で埋める＝どんな画像でも破綻しない。
   クリップは内側の .shs-hero-frame に限定（縦書きキャプションは枠外に出るため）。 */
.shs-hero-photo {
    position: relative;
    margin: 0;
}
.shs-hero-frame {
    position: relative;
    display: block;
    aspect-ratio: 640 / 1169;
    overflow: hidden;
    background: var(--ntm-paper-deep);
}
.shs-hero-blur {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--thumb);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.1);
    transform: scale(1.25);
}
.shs-hero-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* 縦書きの小さなエリア名(moments の写真キャプション式) */
.shs-hero-caption {
    position: absolute;
    top: 12px;
    right: -28px;
    writing-mode: vertical-rl;
    font-family: var(--ntm-font-serif);
    font-size: .72rem;
    letter-spacing: .3em;
    color: var(--ntm-slate-soft);
}
.shs-hero-tax {
    font-family: var(--ntm-font-serif);
    font-size: .82rem;
    letter-spacing: .16em;
    margin: 0 0 22px;
}
.shs-hero-tax a {
    color: var(--ntm-terracotta);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ntm-ease);
}
.shs-hero-tax a:hover { border-color: var(--ntm-terracotta); }
.shs-hero-tax .sep { margin: 0 10px; color: var(--ntm-border); }
.shs .shs-hero-name {
    font-family: var(--ntm-font-serif);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    letter-spacing: .12em;
    line-height: 1.6;
    color: var(--ntm-indigo);
    margin: 0 0 30px;
}
.shs-hero-catch {
    font-family: var(--ntm-font-serif);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    line-height: 2.4;
    letter-spacing: .12em;
    color: var(--ntm-slate);
    margin: 0;
}
.shs-hero-line {
    width: min(300px, 70%);
    height: 30px;
    margin-top: 34px;
    display: block;
    overflow: visible;
}
.shs-hero-line path {
    stroke: var(--ntm-sand);
    stroke-width: 1.6;
    fill: none;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}
.shs-reveal.is-inview .shs-hero-line path {
    animation: shsLine 1.6s var(--ntm-ease-out) .5s forwards;
}
@keyframes shsLine { to { stroke-dashoffset: 0; } }

/* ============================================================
   2. 本文
   ============================================================ */
.shs-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0 96px;
    font-family: var(--ntm-font-serif);
    line-height: 2.3;
    letter-spacing: .06em;
    color: var(--ntm-ink);
}
.shs-body p { font-family: var(--ntm-font-serif); line-height: 2.3; }

/* ============================================================
   3. リール
   ============================================================ */
.shs-reel {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 0 96px;
    text-align: center;
}
.shs-reel-embed { display: flex; justify-content: center; }
.shs-reel-embed iframe { max-width: 100%; }
.shs-reel-card {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    border: 1px solid var(--ntm-border);
    color: var(--ntm-indigo);
    text-decoration: none;
    font-family: var(--ntm-font-serif);
    font-size: .92rem;
    letter-spacing: .1em;
    transition: border-color .4s var(--ntm-ease), color .4s var(--ntm-ease);
}
.shs-reel-card:hover { border-color: var(--ntm-terracotta); color: var(--ntm-terracotta); }
.shs-reel-card .arw { transition: transform .5s var(--zkn-ease-bounce, ease); }
.shs-reel-card:hover .arw { transform: translateX(4px); }

/* ============================================================
   4. 店舗情報 + 小型地図
   ============================================================ */
.shs-info {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 0 96px;
}
.shs-info-grid { display: grid; gap: 48px; }
.shs-info-grid.has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.shs-info-list { margin: 0; border-top: 1px solid var(--ntm-hairline); }
.shs-info-list .row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 20px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--ntm-hairline);
}
.shs-info-list dt {
    font-family: var(--ntm-font-serif);
    font-size: .8rem;
    letter-spacing: .2em;
    color: var(--ntm-slate-soft);
    padding-top: 2px;
}
.shs-info-list dd {
    margin: 0;
    font-family: var(--ntm-font-serif);
    font-size: .95rem;
    line-height: 2;
    letter-spacing: .05em;
    color: var(--ntm-ink);
}
.shs-info-list dd a { color: var(--ntm-indigo); text-decoration: none; border-bottom: 1px solid var(--ntm-border); }
.shs-info-list dd a:hover { color: var(--ntm-terracotta); border-color: var(--ntm-terracotta); }
/* コンテナ高は旧 shop.css に依存せず自己完結させる(未読込だと高さ0で地図が消える) */
.shs-info-map .ntm-map-container {
    border: 1px solid var(--ntm-hairline);
    width: 100%;
    height: 320px;
    position: relative;
    z-index: 1;
    background: var(--ntm-paper);
}
.shs-info-maplink {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--ntm-font-serif);
    font-size: .85rem;
    letter-spacing: .12em;
    color: var(--ntm-indigo);
    text-decoration: none;
    border-bottom: 1px solid var(--ntm-border);
    padding-bottom: 4px;
}
.shs-info-maplink:hover { color: var(--ntm-terracotta); border-color: var(--ntm-terracotta); }

/* ============================================================
   5. この店の記事
   ============================================================ */
.shs-articles { padding: 0 0 96px; }
.shs-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.shs-article-card { display: block; text-decoration: none; color: inherit; }
.shs-article-card .thumb { overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 14px; }
.shs-article-card .thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1.2s var(--zkn-ease, ease);
}
.shs-article-card:hover .thumb img { transform: scale(1.05); }
.shs-article-card .date {
    display: block;
    font-family: var(--ntm-font-en);
    font-size: .7rem;
    letter-spacing: .16em;
    color: var(--ntm-slate-soft);
    margin-bottom: 6px;
}
.shs-article-card .title {
    font-family: var(--ntm-font-serif);
    font-weight: 500;
    font-size: .98rem;
    line-height: 1.9;
    letter-spacing: .06em;
    color: var(--ntm-indigo);
}
.shs-article-card:hover .title { color: var(--ntm-terracotta); }

/* ============================================================
   6. 同エリアの店(zkn-card 縮小再利用)
   ============================================================ */
.shs-nearby { padding: 0 0 110px; }
.shs-nearby-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.shs-nearby-grid .zkn-item { margin-top: 0 !important; }
.shs-nearby-grid .zkn-card .zkn-card-title { font-size: 1.02rem; line-height: 1.9; }
.shs-nearby-name {
    display: block;
    margin-top: 12px;
    font-family: var(--ntm-font-sans);
    font-size: .78rem;
    letter-spacing: .1em;
    color: var(--ntm-slate);
}

/* ============================================================
   7-a. 読者向け送客バナー
   ============================================================ */
.shs-cross-wrap { padding: 0 0 110px; }
.shs-cross {
    display: block;
    text-align: center;
    text-decoration: none;
    background: var(--ntm-paper-deep);
    border: 1px solid var(--ntm-hairline);
    padding: 52px 32px;
    transition: border-color .4s var(--ntm-ease);
}
.shs-cross:hover { border-color: var(--ntm-sand); }
.shs-cross-en {
    display: block;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .85rem;
    letter-spacing: .13em;
    color: var(--ntm-terracotta);
    margin-bottom: 12px;
}
.shs-cross-t {
    display: block;
    font-family: var(--ntm-font-serif);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: .12em;
    color: var(--ntm-indigo);
    margin-bottom: 10px;
}
.shs-cross-sub {
    display: block;
    font-family: var(--ntm-font-serif);
    font-size: .85rem;
    letter-spacing: .08em;
    color: var(--ntm-slate);
}
.shs-cross:hover .shs-cross-sub { color: var(--ntm-terracotta); }

/* ============================================================
   8. 前後ナビ
   ============================================================ */
.shs-adjacent {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    border-top: 1px solid var(--ntm-hairline);
    border-bottom: 1px solid var(--ntm-hairline);
    padding: 34px 0;
    margin-bottom: 110px;
}
.shs-adj { text-decoration: none; display: block; min-width: 0; }
.shs-adj.prev { text-align: left; }
.shs-adj.all  { text-align: center; align-self: center; }
.shs-adj.next { text-align: right; grid-column: 3; }
.shs-adj .dir {
    display: block;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .78rem;
    letter-spacing: .12em;
    color: var(--ntm-terracotta);
    margin-bottom: 8px;
}
.shs-adj .name {
    font-family: var(--ntm-font-serif);
    font-size: .95rem;
    letter-spacing: .08em;
    color: var(--ntm-indigo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.shs-adj:hover .name { color: var(--ntm-terracotta); }

/* ============================================================
   7-b. 店舗向けCV(フッター直前・図鑑マップバナーと同族のダーク帯)
   ============================================================ */
.shs-keisai {
    margin: 0 -32px; /* .shs の padding を打ち消して全幅 */
    background: var(--ntm-indigo);
}
.shs-keisai-link {
    display: block;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    padding: 96px 32px;
}
.shs-keisai-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: 14px;
}
.shs-keisai .shs-keisai-t {
    font-family: var(--ntm-font-serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    letter-spacing: .14em;
    color: var(--ntm-paper);
    margin: 0 0 16px;
}
.shs-keisai .shs-keisai-lead {
    font-family: var(--ntm-font-serif);
    font-size: .9rem;
    line-height: 2.2;
    letter-spacing: .06em;
    color: var(--ntm-sand-soft) !important;
    margin: 0 0 28px;
}
.shs-keisai-arw {
    display: inline-block;
    font-family: var(--ntm-font-serif);
    font-size: .92rem;
    letter-spacing: .16em;
    color: var(--ntm-paper);
    border: 1px solid var(--ntm-sand);
    padding: 14px 34px;
    transition: background-color .4s var(--ntm-ease), color .4s var(--ntm-ease);
}
.shs-keisai-link:hover .shs-keisai-arw { background: var(--ntm-sand); color: var(--ntm-indigo); }

/* ============================================================
   リビール(zukan と同トークン)
   ============================================================ */
.ntm-js .shs-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1s var(--ntm-ease-out), transform 1s var(--ntm-ease-out);
}
.ntm-js .shs-reveal.is-inview { opacity: 1; transform: translateY(0); }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
    .shs { padding: 0 20px; }
    .shs-hero {
        grid-template-columns: 1fr;
        gap: 44px;
        padding: 56px 0 64px;
    }
    .shs-hero-photo { max-width: 320px; margin: 0 auto; width: 100%; }
    .shs-hero-caption { right: -22px; }
    .shs-hero-body { text-align: center; }
    .shs-hero-line { margin-left: auto; margin-right: auto; }
    .shs-body, .shs-reel, .shs-info { padding-bottom: 72px; }
    .shs-info-grid.has-map { grid-template-columns: 1fr; }
    .shs-articles-grid, .shs-nearby-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .shs-articles, .shs-nearby, .shs-cross-wrap { padding-bottom: 80px; }
    .shs-adjacent { grid-template-columns: 1fr 1fr; }
    .shs-adj.all { display: none; }
    .shs-adj.next { grid-column: 2; }
    .shs-adjacent { margin-bottom: 80px; }
    .shs-keisai { margin: 0 -20px; }
    .shs-keisai-link { padding: 72px 20px; }
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ntm-js .shs-reveal { opacity: 1; transform: none; transition: none; }
    .shs-hero-line path { animation: none !important; stroke-dashoffset: 0; }
    .shs-article-card .thumb img { transition: none; }
}

/* v1.62.0: 閉店・移転の告知（営業中と誤解させないため最上部に置く） */
.shs-closed-notice {
    max-width: 900px;
    margin: 0 auto clamp(28px, 5vw, 48px);
    padding: clamp(18px, 3vw, 26px) clamp(20px, 4vw, 32px);
    background: var(--ntm-paper-deep);
    border-left: 4px solid var(--ntm-slate);
}
.shs-closed-t {
    margin: 0;
    font-family: var(--ntm-font-serif);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ntm-indigo);
}
.shs-closed-d { font-weight: 400; font-size: .88em; color: var(--ntm-slate); }
.shs-closed-note {
    margin: .8em 0 0;
    font-family: var(--ntm-font-serif);
    font-size: .95rem;
    line-height: 1.9;
    color: var(--ntm-ink);
}
.shs-closed-sub {
    margin: .9em 0 0;
    font-family: var(--ntm-font-sans);
    font-size: .8rem;
    line-height: 1.8;
    color: var(--ntm-slate);
}
.shs-closed-sub a { color: var(--ntm-link); }