/*
Theme Name: 整体マップ
Description: 「整体・もみほぐしマップ（Seitai Navi）」プラグイン専用テーマ。地図を主役にしたトップページ、店舗・エリア・知識記事のレイアウトを含みます。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Author: HARO VN
Text Domain: seitai-map
*/

:root {
  --sv-paper: #f3f6f4;
  --sv-card: #ffffff;
  --sv-ink: #1e3a5f;
  --sv-text: #2b3a4a;
  --sv-muted: #627384;
  --sv-line: #cbd8d6;
  --sv-primary: #3a8fa3;
  --sv-primary-dark: #2b6f80;
  --sv-soft: #dceae7;
  --sv-mark: #e8a93b;
  --sv-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --sv-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --sv-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sv-wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--sv-paper); color: var(--sv-text);
  font-family: var(--sv-sans); font-size: 16px; line-height: 1.8; font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--sv-primary-dark); }
a:hover { color: var(--sv-ink); }
:focus-visible { outline: 3px solid var(--sv-mark); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--sv-round); color: var(--sv-ink); line-height: 1.45; font-weight: 700; }
.sv-wrap { max-width: var(--sv-wrap); margin: 0 auto; padding: 0 20px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.sv-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 9999; background: #fff; padding: 8px 12px; clip: auto; width: auto; height: auto; }

/* ヘッダー */
.sv-header { position: sticky; top: 0; z-index: 1100; background: rgba(243, 246, 244, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sv-line); }
.admin-bar .sv-header { top: 32px; }
.sv-header__in { display: flex; align-items: center; gap: 24px; height: 64px; }
.sv-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sv-ink); }
.sv-logo svg { flex: 0 0 auto; }
.sv-logo__name { font-family: var(--sv-round); font-weight: 700; font-size: 19px; letter-spacing: .02em; line-height: 1.2; }
.sv-logo__name small { display: block; font-family: var(--sv-sans); font-weight: 400; font-size: 11px; color: var(--sv-muted); letter-spacing: 0; }
.sv-nav { margin-left: auto; }
.sv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.sv-nav a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--sv-ink); font-weight: 500; font-size: 15px; }
.sv-nav a:hover, .sv-nav .current-menu-item > a, .sv-nav .current_page_item > a { background: var(--sv-soft); }
.sv-near-link { display: inline-flex; align-items: center; gap: 6px; }
.sv-menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--sv-line); border-radius: 8px; padding: 8px 10px; color: var(--sv-ink); font: inherit; font-size: 14px; cursor: pointer; }

/* トップ：縦書きの見出し＋地図 */
.sv-hero { padding: 36px 0 12px; }
.sv-hero__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.sv-hero__copy { display: flex; flex-direction: row-reverse; gap: 18px; padding-top: 6px; }
.sv-hero__title {
  writing-mode: vertical-rl; text-orientation: mixed; margin: 0;
  font-family: var(--sv-mincho); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.35; letter-spacing: .14em;
  color: var(--sv-ink); max-height: 600px;
}
.sv-hero__lead {
  writing-mode: vertical-rl; margin: 0; font-size: 14px; line-height: 2.1; letter-spacing: .08em; color: var(--sv-muted);
  max-height: 520px; margin-top: 3.2em;
}
.sv-hero__lead strong { color: var(--sv-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-hero__map .sn-app { margin: 0; }

/* トップ：検索帯 */
.sv-search { display: flex; gap: 8px; margin: 0 0 14px; max-width: 560px; }
.sv-search input[type="search"] {
  flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--sv-line); border-radius: 10px; font: inherit; font-size: 15px; background: #fff; color: var(--sv-text);
}
.sv-search button { padding: 0 18px; border: 0; border-radius: 10px; background: var(--sv-primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.sv-search button:hover { background: var(--sv-primary-dark); }

/* セクション */
.sv-section { padding: 64px 0; }
.sv-section + .sv-section { border-top: 1px solid var(--sv-line); }
.sv-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sv-section__head h2 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); }
.sv-section__head p { margin: 0; color: var(--sv-muted); font-size: 14px; }

/* 種類から探す：定義リスト型 */
.sv-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0 40px; margin: 0; }
.sv-genre { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--sv-line); text-decoration: none; color: var(--sv-text); }
.sv-genre__icon { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; background: var(--sv-soft); display: grid; place-items: center; color: var(--sv-ink); }
.sv-genre__name { font-family: var(--sv-round); font-weight: 700; font-size: 17px; color: var(--sv-ink); }
.sv-genre__desc { grid-column: 2; font-size: 13px; color: var(--sv-muted); line-height: 1.6; }
.sv-genre__count { grid-row: 1 / span 2; grid-column: 3; font-size: 13px; color: var(--sv-muted); font-variant-numeric: tabular-nums; }
.sv-genre:hover .sv-genre__name { text-decoration: underline; text-underline-offset: 4px; }

/* 知識ライブラリ（トップの抜粋） */
.sv-know { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.sv-know__intro p { font-family: var(--sv-mincho); font-size: 17px; line-height: 2; color: var(--sv-text); margin: 0 0 18px; }
.sv-know__list { list-style: none; margin: 0; padding: 0; }
.sv-know__list li { border-bottom: 1px solid var(--sv-line); }
.sv-know__list a { display: block; padding: 14px 0; text-decoration: none; }
.sv-know__list b { display: block; font-family: var(--sv-mincho); font-size: 17px; font-weight: 600; color: var(--sv-ink); line-height: 1.6; }
.sv-know__list span { font-size: 12px; color: var(--sv-muted); }
.sv-know__list a:hover b { text-decoration: underline; text-underline-offset: 4px; }

/* 汎用ページ */
.sv-main { min-height: 50vh; }
.sv-page { max-width: 760px; margin: 0 auto; padding: 40px 20px 72px; }
.sv-page--wide { max-width: var(--sv-wrap); }
.sv-page__title { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 8px; }
.sv-page__lead { color: var(--sv-muted); margin: 0 0 32px; }
.sv-entry > * + * { margin-top: 1.2em; }
.sv-entry h2 { font-size: 22px; margin-top: 2.2em; }
.sv-entry h3 { font-size: 18px; margin-top: 1.8em; }
.sv-entry table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.sv-entry th, .sv-entry td { border-bottom: 1px solid var(--sv-line); padding: 10px 8px; text-align: left; vertical-align: top; }
.sv-entry thead th { border-bottom: 2px solid var(--sv-ink); color: var(--sv-ink); white-space: nowrap; }

/* 知識記事：明朝の本文、左に目次 */
.sv-article { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 56px; justify-content: center; padding: 40px 20px 80px; }
.sv-article__topics { font-size: 13px; margin: 0 0 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.sv-article__topics a { text-decoration: none; padding: 1px 10px; border-radius: 4px; background: var(--sv-soft); color: var(--sv-ink); }
.sv-article__title { font-family: var(--sv-mincho); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.5; margin: 0 0 12px; letter-spacing: .02em; }
.sv-article__lead { color: var(--sv-muted); margin: 0 0 36px; font-size: 15px; }
.sv-article .sv-entry { font-family: var(--sv-mincho); font-size: 17.5px; line-height: 2.05; color: #22303e; }
.sv-article .sv-entry h2 { font-family: var(--sv-round); font-size: 23px; padding-top: 1.1em; border-top: 1px solid var(--sv-line); }
.sv-article .sv-entry h3 { font-family: var(--sv-round); font-size: 18px; }
.sv-article .sv-entry table { font-family: var(--sv-sans); font-size: 14px; line-height: 1.7; }
.sv-article .sv-entry ul, .sv-article .sv-entry ol { padding-left: 1.4em; }
.sv-article .sv-entry li + li { margin-top: .4em; }
.sv-article .sv-entry h2 + ul:last-child, .sv-article .sv-entry h2:last-of-type + ul { font-size: 14px; line-height: 1.8; font-family: var(--sv-sans); }
.sv-article .sv-entry .sn-page { font-family: var(--sv-sans); font-size: 15px; }
.sv-toc { position: sticky; top: 96px; align-self: start; font-size: 13px; }
.sv-toc b { display: block; color: var(--sv-ink); font-family: var(--sv-round); margin-bottom: 8px; }
.sv-toc ol { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--sv-line); }
.sv-toc li { margin: 0; }
.sv-toc a { display: block; padding: 5px 0; color: var(--sv-muted); text-decoration: none; line-height: 1.5; }
.sv-toc a:hover, .sv-toc a.is-on { color: var(--sv-ink); }
.sv-toc a.is-on { font-weight: 700; }

/* 投稿一覧（汎用） */
.sv-posts { list-style: none; margin: 0; padding: 0; }
.sv-posts li { border-bottom: 1px solid var(--sv-line); }
.sv-posts a { display: block; padding: 16px 0; text-decoration: none; }
.sv-posts b { display: block; font-size: 17px; color: var(--sv-ink); }
.sv-posts span { font-size: 13px; color: var(--sv-muted); }
.sv-results h2 { font-size: 18px; margin: 32px 0 8px; }

/* フッター */
.sv-footer { background: var(--sv-ink); color: #c9d6e2; margin-top: 0; padding: 48px 0 28px; font-size: 14px; }
.sv-footer a { color: #fff; }
.sv-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.sv-footer .sv-logo { color: #fff; }
.sv-footer .sv-logo__name small { color: #9fb3c6; }
.sv-footer ul { list-style: none; margin: 0; padding: 0; }
.sv-footer li { margin: 0 0 8px; }
.sv-footer h2 { color: #fff; font-size: 14px; margin: 0 0 12px; }
.sv-footer__note { margin: 14px 0 0; color: #9fb3c6; font-size: 12px; line-height: 1.8; }
.sv-footer__bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 11px; color: #9fb3c6; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
  .sv-hero__grid { grid-template-columns: 1fr; gap: 12px; }
  .sv-hero__copy { flex-direction: column; gap: 6px; padding: 0; }
  .sv-hero__title, .sv-hero__lead { writing-mode: horizontal-tb; max-height: none; letter-spacing: .04em; margin: 0; }
  .sv-hero__title { font-size: clamp(26px, 6.6vw, 34px); }
  .sv-know { grid-template-columns: 1fr; }
  .sv-article { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; }
  .sv-toc { position: static; margin: 0 0 28px; padding: 14px 16px; background: #fff; border-radius: 12px; border: 1px solid var(--sv-line); }
  .sv-article__main { order: 2; }
  .sv-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .sv-menu-btn { display: inline-flex; }
  .sv-nav { position: absolute; left: 0; right: 0; top: 64px; background: var(--sv-paper); border-bottom: 1px solid var(--sv-line); display: none; padding: 8px 12px 14px; }
  .sv-nav.is-open { display: block; }
  .sv-nav ul { flex-direction: column; }
  .sv-section { padding: 44px 0; }
  .sv-genres { grid-template-columns: 1fr; }
}
@media (max-width: 782px) { .admin-bar .sv-header { top: 46px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }