/* spot.css — スポット詳細ページの共通スタイル
   ここで定義したスタイルは spot.html (静的) と spot.php (fallback) の両方で参照される。
   1019 ファイルへの埋め込みを廃止し、CSS の更新を 1 ファイルだけで完結させる。 */

:root {
  --paper:        #F1E8D0; --paper-2: #E8DCBC; --paper-3: #DFD0A8;
  --ink:          #141414; --ink-2:   #2B2A26; --ink-dim: #4a4540; --ink-faint: #8a8075;
  --blue:         #1B3A5C; --blue-bright: #2C5C8A;
  --red:          #E04A2E; --red-deep: #B83820;
  --yellow:       #F2B742;
  --rule:         #1B3A5C; --rule-thin: rgba(27,58,92,0.35);
  --accent-red-bg:#fde8dc;
  --ff-display:   "Shippori Mincho B1","Noto Serif JP",serif;
  --ff-body:      "Zen Kaku Gothic New","Hiragino Sans",system-ui,sans-serif;
  --ff-mono:      "Space Mono","Menlo",monospace;
  --ff-en:        "EB Garamond",Georgia,serif;
  --ease:         cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html,body {
  background: var(--paper); color: var(--ink);
  font-family: var(--ff-body); line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1; overflow-x: hidden;
  max-width: 100vw; width: 100%;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='8'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.55; mix-blend-mode: multiply;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 12% 8%,rgba(224,74,46,0.05),transparent 38%),
              radial-gradient(circle at 88% 92%,rgba(27,58,92,0.07),transparent 42%);
}
header,main,footer,.announce { position: relative; z-index: 3; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
a:hover { color: var(--red); }
/* crop marks */
.crop { position: fixed; width: 24px; height: 24px; pointer-events: none; z-index: 50; opacity: 0.6; }
.crop::before,.crop::after { content: ""; position: absolute; background: var(--blue); }
.crop::before { width: 1.5px; height: 100%; left: 50%; transform: translateX(-50%); }
.crop::after  { height: 1.5px; width: 100%; top: 50%; transform: translateY(-50%); }
.crop.tl{top:10px;left:10px;} .crop.tr{top:10px;right:10px;}
.crop.bl{bottom:10px;left:10px;} .crop.br{bottom:10px;right:10px;}
@media(max-width:700px){.crop{display:none;}}
/* announce */
.announce { background: var(--ink); color: var(--paper); font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.18em; padding: 0.5rem 0; overflow: hidden; }
.announce-track { display: flex; gap: 3rem; white-space: nowrap; animation: marquee 40s linear infinite; width: max-content; }
.announce-track span { display: inline-flex; align-items: center; gap: 0.55rem; }
.announce-track .dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; flex-shrink: 0; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* masthead */
.masthead { position: sticky; top: 0; z-index: 30; background: rgba(241,232,208,0.94); backdrop-filter: blur(6px); border-bottom: 1.5px solid var(--ink); padding: 0.7rem 1.25rem; }
.masthead-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; max-width: 1280px; margin: 0 auto; }
.brand-mark { width: 38px; height: 38px; border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--blue); flex-shrink: 0; display: block; overflow: hidden; text-decoration: none; }
.brand-mark img { width: 100%; height: 100%; display: block; }
.title .brand-en { display: block; font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--blue); margin-bottom: 1px; }
.title .brand-ja { display: block; font-family: var(--ff-display); font-size: 1.05rem; font-weight: 700; }
.title .brand-ja a { text-decoration: none; color: inherit; }
.back-link { font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--blue); text-decoration: none; border: 1.5px solid var(--blue); padding: 0.3rem 0.85rem; white-space: nowrap; transition: background 0.15s; }
.back-link:hover { background: var(--blue); color: var(--paper); }
/* container */
.container { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; position: relative; z-index: 3; }
/* article nav */
.article-nav { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; border-top: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue); margin-bottom: 2.5rem; flex-wrap: wrap; gap: 0.5rem; }
.article-nav .back-btn { border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--blue); padding: 0.45rem 1.2rem; font-size: 0.88rem; font-family: var(--ff-mono); letter-spacing: 0.1em; color: var(--ink); text-decoration: none; display: inline-block; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.article-nav .back-btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--blue); color: var(--ink); }
.article-nav .issue-ref { font-family: var(--ff-mono); font-size: 0.72rem; color: var(--blue); letter-spacing: 0.15em; }
/* article body */
#article-body { max-width: 820px; margin: 0 auto; }
.article-hero {
  margin: 0 1.25rem 1.5rem;
  aspect-ratio: 16 / 8;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 3px solid var(--blue); }
.article-header .face { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.75rem; color: var(--blue); display: inline-flex; align-items: center; gap: 0.5rem; }
.article-header .face::before { content: ""; display: inline-block; width: 20px; height: 2px; background: var(--blue); }
.article-header h1 { font-family: var(--ff-display); font-size: clamp(1.7rem,4vw,2.55rem); font-weight: 400; line-height: 1.3; letter-spacing: 0.03em; margin: 0.3rem 0 0.85rem; color: var(--ink); }
.article-header .sub-headline { font-size: 1rem; color: var(--ink); padding: 0.85rem 1.15rem; background: var(--paper-2); border-left: 5px solid var(--blue); line-height: 1.85; margin-bottom: 1rem; text-align: justify; }
.article-header .byline { display: flex; flex-wrap: wrap; gap: 0.85rem; font-family: var(--ff-mono); font-size: 0.72rem; color: var(--ink-dim); letter-spacing: 0.08em; align-items: baseline; }
.article-header .byline .loc { font-weight: 700; color: var(--blue); }
.article-header .byline .no { margin-left: auto; color: var(--ink-faint); letter-spacing: 0.1em; }
/* drop cap */
#article-body .detail .summary { font-size: 1rem; line-height: 1.9; }
#article-body .detail .summary::first-letter { float: left; font-family: var(--ff-display); font-size: 3.2rem; line-height: 0.9; padding: 0.3rem 0.5rem 0 0; color: var(--blue); font-weight: 400; }
/* detail sections */
.detail section { margin-bottom: 1.75rem; }
.detail .sec-head { font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue); padding-bottom: 0.4rem; margin-bottom: 0.85rem; border-bottom: 1.5px solid var(--blue); display: flex; align-items: center; gap: 0.5rem; }
.detail .sec-head::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--red); flex-shrink: 0; }
.detail p { font-size: 1rem; line-height: 1.9; color: var(--ink); text-align: justify; }
.detail .summary { font-size: 1rem; color: var(--ink); padding: 0 0 0.5rem; border-bottom: 1.5px dashed var(--rule-thin); margin-bottom: 1.5rem; }
/* timeline */
.timeline { list-style: none; padding: 0; border-top: 1px solid var(--rule-thin); }
.timeline li { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--rule-thin); font-size: 0.95rem; }
.timeline .year { font-family: var(--ff-mono); color: var(--blue); font-weight: 700; letter-spacing: 0.04em; }
.timeline .event { color: var(--ink); }
@media(max-width:600px){.timeline li{grid-template-columns:1fr;gap:0.15rem;}}
/* phenomena */
.phenomena { list-style: none; padding: 0; column-count: 1; }
@media(min-width:680px){.phenomena{column-count:2;column-gap:2.5rem;}}
.phenomena li { padding: 0.3rem 0 0.3rem 1.4rem; position: relative; color: var(--ink); font-size: 0.96rem; break-inside: avoid; }
.phenomena li::before { content: "▸"; position: absolute; left: 0.1rem; top: 0.3rem; color: var(--blue); font-size: 0.9rem; }
/* testimonies */
.testimonies { display: grid; gap: 1rem; }
.testimony { background: var(--paper-2); border: 1.5px solid var(--ink); border-left: 4px solid var(--blue); box-shadow: 3px 3px 0 var(--blue); padding: 0.95rem 1.1rem; }
.testimony .t-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--rule-thin); }
.testimony .t-type { color: var(--ink); font-weight: 700; letter-spacing: 0.04em; }
.testimony .t-type::before { content: "◉ "; color: var(--blue); }
.testimony .t-source { color: var(--ink-dim); font-family: var(--ff-mono); font-size: 0.7rem; }
.testimony .t-source::before { content: "出典 "; color: var(--blue); font-size: 0.68rem; opacity: 0.7; }
.testimony .t-content { color: var(--ink); font-size: 0.95rem; line-height: 1.9; text-align: justify; }
/* location kv */
.kv { display: grid; grid-template-columns: 7rem 1fr; gap: 0.55rem 1rem; font-size: 0.95rem; background: var(--paper-2); border: 1.5px solid var(--blue); padding: 0.85rem 1.1rem; }
.kv dt { color: var(--blue); font-family: var(--ff-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; }
.kv dt::after { content: "："; }
.kv dd { color: var(--ink); }
@media(max-width:600px){.kv{grid-template-columns:1fr;gap:0.1rem;padding:0.75rem 0.85rem;}.kv dt{margin-top:0.45rem;}}
/* folklore */
.folklore-lists { display: grid; gap: 0.55rem; }
.folklore-lists .fl-label { color: var(--blue); font-family: var(--ff-mono); font-size: 0.78rem; letter-spacing: 0.1em; margin-right: 0.5rem; }
.folklore-lists .fl-label::after { content: "："; }
/* sources */
.sources-list { list-style: none; padding: 0; border-top: 1px solid var(--rule-thin); }
.sources-list li { padding: 0.5rem 0.35rem; border-bottom: 1px solid var(--rule-thin); font-size: 0.92rem; }
.sources-list .s-type { color: var(--blue); font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.1em; margin-right: 0.6rem; }
.sources-list .s-type::before{content:"【";} .sources-list .s-type::after{content:"】";}
.sources-list .s-meta { color: var(--ink-dim); font-family: var(--ff-mono); font-size: 0.78rem; margin-left: 0.4rem; }
/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tags .tag { background: var(--paper); color: var(--blue); border: 1.5px solid var(--blue); padding: 0.15rem 0.65rem; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.06em; }
/* warnings */
.warnings { background: rgba(242,183,66,0.2); border: 1.5px solid var(--red); border-left: 6px solid var(--red); box-shadow: 3px 3px 0 var(--red); padding: 0.85rem 1.1rem; color: var(--ink); font-size: 0.95rem; }
.warnings .w-title { font-family: var(--ff-mono); font-weight: 700; color: var(--red); margin-bottom: 0.4rem; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; }
.warnings ul { list-style: none; padding: 0; }
.warnings li { padding: 0.15rem 0 0.15rem 1.3rem; position: relative; }
.warnings li::before { content: "▸"; position: absolute; left: 0.1rem; top: 0.2rem; color: var(--red); font-size: 0.85rem; }
/* updated */
.updated { color: var(--ink-faint); font-family: var(--ff-mono); font-size: 0.68rem; text-align: right; margin-top: 0.75rem; letter-spacing: 0.1em; }
/* prev/next */
.article-nav-bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: stretch; margin-top: 3rem; padding-top: 1rem; border-top: 1.5px solid var(--blue); }
.article-nav-bottom a,.article-nav-bottom .center-btn { border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--blue); padding: 0.75rem 1rem; font-size: 0.88rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--ink); text-align: left; text-decoration: none; display: block; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.article-nav-bottom a:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--blue); color: var(--ink); }
.article-nav-bottom .next { text-align: right; }
.article-nav-bottom .center-btn { text-align: center; letter-spacing: 0.12em; padding: 0.75rem 1.5rem; }
.article-nav-bottom .disabled { color: var(--ink-faint); opacity: 0.45; box-shadow: none; pointer-events: none; }
.article-nav-bottom .label { display: block; font-family: var(--ff-mono); font-size: 0.68rem; color: var(--blue); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.25rem; }
.article-nav-bottom .name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; letter-spacing: 0.02em; }
@media(max-width:600px){.article-nav-bottom{grid-template-columns:1fr;}}
/* related */
.related-section { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.related-head { font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.28em; color: var(--blue); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.related-head::after { content: ""; flex: 1; height: 1px; background: var(--rule-thin); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 1rem; }
.related-card { background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 0.8rem 0.9rem; display: block; text-decoration: none; color: var(--ink); transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease); }
.related-card:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.related-card .rc-cat { font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--blue); margin-bottom: 0.35rem; }
.related-card .rc-name { font-family: var(--ff-display); font-size: 0.95rem; line-height: 1.4; margin-bottom: 0.4rem; }
.related-card .rc-loc { font-family: var(--ff-mono); font-size: 0.65rem; color: var(--ink-faint); }
.related-card .rc-lead { font-size: 0.8rem; color: var(--ink-dim); line-height: 1.7; margin-top: 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* media gallery */
.media-gallery { margin-bottom: 2rem; }
.media-gallery-head { font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; color: var(--blue); padding-bottom: 0.4rem; margin-bottom: 0.85rem; border-bottom: 1.5px solid var(--blue); display: flex; align-items: center; gap: 0.5rem; }
.media-gallery-head::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--red); flex-shrink: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 0.75rem; }
.gallery-item { position: relative; }
.gallery-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1.5px solid var(--ink); display: block; background: var(--paper-2); }
.gallery-video { width: 100%; aspect-ratio: 16/9; border: 1.5px solid var(--ink); display: block; background: var(--ink); }
.gallery-caption { font-family: var(--ff-mono); font-size: 0.68rem; color: var(--ink-faint); margin-top: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.06em; }
/* sensitive banner */
.sensitive-banner {
  background: #1f1410;
  color: #f8e6d2;
  border: 1.5px solid var(--red);
  border-left: 6px solid var(--red);
  padding: 1rem 1.25rem;
  margin: 1.25rem auto 0;
  max-width: 820px;
  font-family: var(--ff-body);
  font-size: 0.92rem;
  line-height: 1.7;
  position: relative;
  z-index: 3;
}
.sensitive-banner strong { color: var(--yellow); display: block; margin-bottom: 0.4rem; font-size: 1rem; }
.sensitive-banner .hotline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed rgba(248,230,210,0.3); }
.sensitive-banner .hotline span { font-family: var(--ff-mono); font-size: 0.82rem; }
.sensitive-banner .hotline b { color: var(--yellow); }
.sensitive-banner .more { display: block; margin-top: 0.5rem; font-size: 0.82rem; color: rgba(248,230,210,0.75); }
.sensitive-banner a { color: var(--yellow); }
@media (max-width: 600px) {
  .sensitive-banner { margin-left: 0.5rem; margin-right: 0.5rem; max-width: none; }
}

/* dynamic placeholders (loading state) */
.related-loading,.nav-loading {
  font-family: var(--ff-mono); font-size: 0.72rem; color: var(--ink-faint);
  letter-spacing: 0.12em; padding: 1.5rem 0; text-align: center;
}
#article-nav-bottom { min-height: 80px; }
#related-slot { min-height: 200px; }

/* footer */
footer { background: var(--ink); color: var(--paper); margin: 2.5rem 0 0; padding: 1.5rem 1.25rem; text-align: center; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.12em; position: relative; z-index: 3; overflow: hidden; }
footer::before { content: "HAUNTED · 心霊 · GHOST · 怪異 · SPIRITS · 霊場 · CURSED · HAUNTED · 心霊 · GHOST"; position: absolute; left: -20px; top: -10px; font-family: var(--ff-en); font-weight: 800; font-size: clamp(3rem,8vw,6rem); letter-spacing: -0.03em; color: var(--blue); opacity: 0.5; white-space: nowrap; pointer-events: none; animation: footdrift 40s linear infinite; }
@keyframes footdrift { from{transform:translateX(0)} to{transform:translateX(-35%)} }
footer>*{position:relative;z-index:1;}
footer .version { font-weight: 700; color: var(--yellow); letter-spacing: 0.18em; }
footer .disclaimer { margin-top: 0.35rem; color: rgba(241,232,208,0.55); }
footer .foot-nav { margin-top: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
footer .foot-nav a { color: rgba(241,232,208,0.6); font-size: 0.68rem; text-decoration: none; letter-spacing: 0.14em; }
footer .foot-nav a:hover { color: var(--yellow); }
::selection{background:var(--blue);color:var(--paper);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--paper-2);}
::-webkit-scrollbar-thumb{background:var(--blue);}