:root {
    /* === 和色（明るめ） === */
    --bg: #190E08;          /* 淡墨：背景 少し明るく */
    --fg: #F7F3EB;          /* 胡粉 */
    --muted: #C1B8AE;       /* 柔らかい灰みベージュ */
    --card: #262522;        /* 黒鳶：パネル色 */
    --accent: #BA3F3F;      /* 紅殻 */
    --accent-soft: rgba(186,63,63,0.25);
  
    --radius: 16px;
    --shadow: 0 6px 22px rgba(186,63,63,.23);
    --gap: 14px;
  }
  
  
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", Helvetica, Arial;
  }
  
  /* -----------------------------------
     Header
  ----------------------------------- */
  header{
    position:sticky; top:0; z-index:5;
    backdrop-filter: blur(10px);
    background: linear-gradient(
        180deg,
        rgba(26,26,24,0.9),
        rgba(26,26,24,0.65)
    );
    border-bottom: 1px solid rgba(183,40,46,0.25);
  }
  
  .wrap{
    max-width:1200px; margin:0 auto;
    padding:12px 18px;
  }
  
  .toolbar{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  }
  
  h1{
    font-size:clamp(18px, 2.6vw, 28px);
    margin:0 8px 0 0;
    color:var(--fg);
    letter-spacing:0.03em;
  }
  
  .spacer{flex:1}
  
  /* -----------------------------------
     Button
  ----------------------------------- */
  .btn{
    appearance:none;
    border:1px solid rgba(183,40,46,0.4);
    background:var(--card);
    color:var(--fg);
    padding:10px 14px;
    border-radius:12px;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:transform .08s ease, opacity .2s, background .25s;
  }
  .btn:hover{
    background: rgba(183,40,46,0.25);
  }
  .btn:active{
    transform: translateY(1px) scale(.99);
  }
  .btn[disabled]{
    opacity:.5; pointer-events:none;
  }
  
  /* -----------------------------------
     Slider container
  ----------------------------------- */
  .field{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px;
    background:var(--card);
    border:1px solid rgba(183,40,46,0.3);
    border-radius:12px;
  }
  .field label{
    font-size:13px; color:var(--muted);
  }
  

  
  /* -----------------------------------
     Tile
  ----------------------------------- */
  .tile{
    break-inside: avoid;
    margin-bottom: var(--gap);
    position:relative;
    border-radius: var(--radius);
    overflow:hidden;
    background: var(--card);
    border:1px solid rgba(183,40,46,0.22);
    box-shadow: var(--shadow);
  }
  
  .tile img{
    width:100%; height:auto; display:block;
    object-fit:cover;
    opacity:0;
    transform: scale(1.02);
    transition: opacity .5s ease, transform .5s ease, filter .4s ease;
  }
  .tile.loaded img{
    opacity:1;
    transform:none;
  }
  
  .tile figcaption{
    position:absolute;
    inset:auto 0 0 0;
    color:var(--fg);
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(26,26,24,.7));
    padding: 40px 14px 12px;
    font-size:14px;
    opacity:0;
    transition:opacity .25s;
  }
  .tile:hover figcaption{ opacity:1; }
  
  /* -----------------------------------
     badge（playing UIを既に和風化）
  ----------------------------------- */
  .badge{
    position:absolute; top:8px; right:8px;
    width:34px; height:34px;
    border-radius:50%;
    background:var(--accent-soft);
    border:1px solid var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(6px);
  }
  .badge::before{
    content:"◯";
    font-size:16px;
    color:var(--fg);
  }
  .tile.playing .badge::before{
    content:"●";
  }
  
  /* -----------------------------------
     和の波 / pulse
  ----------------------------------- */
  .tile.playing{
    animation:washin 2.4s ease-in-out infinite;
    border-color:rgba(183,40,46,0.6);
  }
  @keyframes washin{
    0%{ box-shadow:0 0 4px 1px var(--accent-soft); }
    50%{ box-shadow:0 0 16px 6px rgba(183,40,46,0.45); }
    100%{ box-shadow:0 0 4px 1px var(--accent-soft); }
  }
  
  .wave{
    position:absolute;
    top:46px; right:14px;
    width:22px; height:14px;
    display:none; gap:3px;
  }
  .tile.playing .wave{
    display:flex;
  }
  
  .wave span{
    flex:1;
    background:var(--fg);
    opacity:.65;
    animation:take 1.6s ease-in-out infinite;
    border-radius:1px;
  }
  .wave span:nth-child(2){ animation-delay:.2s }
  .wave span:nth-child(3){ animation-delay:.4s }
  
  @keyframes take{
    0%,100%{ transform:scaleY(.4); }
    50%{ transform:scaleY(.9); }
  }
  
  /* -----------------------------------
     footer
  ----------------------------------- */
  footer{
    color:var(--muted);
    text-align:center;
    padding:20px 0 40px;
    border-top:1px solid rgba(183,40,46,0.2);
  }
  
  
 /* --------------------------------
   playing UI 
-------------------------------- */

/* 再生中：写真をほんのり墨で落とす */
.tile.playing img{
    filter: brightness(0.85) contrast(1.05);
  }
  
  /* badge を「茜色の円相」に */
  .badge{
    position:absolute;
    top:8px; right:8px;
    width:34px; height:34px;
    border-radius:50%;
    background:rgba(183,40,46,0.35);   /* 茜・透明感 */
    border:1px solid rgba(183,40,46,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(4px);
  }
  
  /* ▶ → ■ の代わりに、墨の● / ◯ に */
  .badge::before{
    content:"◯";      /* idle */
    font-size:16px;
    color: #EEE6D6;   /* 生成 */
    line-height:1;
  }
  .tile.playing .badge::before{
    content:"●";      /* playing */
    color:#EEE6D6;
  }
  
  /* 枠線を淡い茜に滲ませる */
  .tile.playing{
    animation:washin 2.4s ease-in-out infinite;
    box-shadow:0 0 12px 4px rgba(183,40,46,0.25);
    border-color:rgba(183,40,46,0.6);
  }
  @keyframes washin{
    0%{ box-shadow:0 0 4px 1px rgba(183,40,46,0.20);}
    50%{ box-shadow:0 0 16px 6px rgba(183,40,46,0.45);}
    100%{ box-shadow:0 0 4px 1px rgba(183,40,46,0.20);}
  }
  
  /* 「竹」のような静かな波形 */
  .wave{
    position:absolute;
    top:46px; right:14px;
    width:22px; height:14px;
    display:none; gap:3px;
  }
  .wave span{
    flex:1;
    background:#EEE6D6;   /* 生成色 */
    opacity:.65;
    animation:take 1.6s ease-in-out infinite;
    border-radius:1px;
  }
  .wave span:nth-child(2){ animation-delay:.2s }
  .wave span:nth-child(3){ animation-delay:.4s }
  
  @keyframes take{
    0%,100%{ transform:scaleY(.4); }
    50%{ transform:scaleY(.9); }
  }
  
  /* 再生中はキャプションを少し浮かせる */
  .tile.playing figcaption{
    opacity:1;
    background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5));
  }

  /* -----------------------------------
   Masonry（常に2列）
----------------------------------- */
.masonry {
  column-gap: var(--gap);
  column-count: 2 !important;
}

/* スマホでも2列のままにするなら以下も追加 */
@media(max-width:480px){
  .masonry {
    column-count: 1 !important;
  }
}

/* ==========================
   写真拡大用ライトボックス
========================== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-inner {
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  background: rgba(20,20,18,0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lightbox-image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: calc(var(--radius) - 4px);
  object-fit: contain;
}

.lightbox-caption {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}



/* Leaflet map custom */
.leaflet-map {
  width: 90%;
  height: 450px;
  margin: 20px auto; 
  margin-top: 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* map.html 専用のマップサイズ */
#big-map {
  width: 90%;
  max-width: 900px;
  height: 600px;
  margin: 20px auto;
}

@media (max-width: 600px) {
  #big-map {
    width: 100%;
    height: 400px;
  }
}




/* ------------------------------------
   Leaflet Popup Custom (神社カード)
------------------------------------ */
.popup-card {
  width: 140px;
  text-align: center;
}

.popup-thumb {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.popup-title {
  margin-top: 6px;
  font-size: 13px;
  color: var(--fg);
  letter-spacing: .03em;
}

/* popup カード全体 */
.popup-card {
  width: 150px;
  text-align: center;
  padding: 4px 0;
}

/* クリックできるブロック全体 */
.popup-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* サムネ */
.popup-thumb {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-bottom: 6px;
  cursor: pointer;
}

/* 神社名（下に表示） */
.popup-name {
  font-size: 13px;
  color: #111;
  letter-spacing: .05em;
  font-weight: 600;
}

/* ------------------------------------
   Leaflet Popup を和紙風デザインに変更
------------------------------------ */

/* ポップアップの外枠（標準の白枠を非表示にする） */
.leaflet-popup-content-wrapper {
  background: #faf7f2;                  /* 和紙のような薄いベージュ */
  border: 2px solid rgba(0,0,0,.18);    /* ほのかに墨っぽい枠 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  padding: 10px;
  backdrop-filter: blur(1px);
}

/* ポップアップの先端（三角） */
.leaflet-popup-tip {
  background: #faf7f2;
  border: 2px solid rgba(0,0,0,.18);
}

/* ポップアップ内の余白調整 */
.leaflet-popup-content {
  margin: 0;
  padding: 0;
}

/* カード全体 */
.popup-card {
  width: 160px;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 画像（和風の角丸） */
.popup-thumb {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  margin-bottom: 6px;
}

/* 神社名（色も和風に） */
.popup-name {
  font-size: 13px;
  color: #5a4a2f;          /* 和風の茶色 */
  font-weight: 600;
  letter-spacing: .06em;
}

/* -------------------------
      About セクション
-------------------------- */
/* About セクション全体 */
.about-section {
  width: 100%;
  padding: 60px 0;
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

/* 半透明の和紙パネル（角丸） */
.about-panel {
  background: rgba(255, 255, 255, 0.65);   /* ← 白の半透明 */
  backdrop-filter: blur(4px);              /* ← ぼかし効果（和紙っぽい） */
  border-radius: 20px;                     /* ← 角丸 */
  padding: 40px 30px;
  width: 90%;
  max-width: 900px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);  /* ← ふんわり影 */
}

/* 中のテキストエリア */
.about-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* タイトル */
.about-title {
  font-size: 28px;
  color: #3a2f22;
  letter-spacing: .08em;
  margin-bottom: 20px;
  border-left: 6px solid #000000;
  padding-left: 12px;
}

/* テキスト */
.about-text {
  font-size: 16px;
  color: #4b4235;
  line-height: 1.9;
  margin-bottom: 20px;
}

/* 署名 */
.about-sign {
  text-align: right;
  color: #5a4d3a;
  font-size: 14px;
  margin-top: 40px;
}

.nav-links a {
  color: var(--fg);
  text-decoration: none;
  margin-left: 20px;
  font-size: 15px;
  opacity: .85;
  transition: opacity .2s;
}

.nav-links a:hover {
  opacity: 1;
}