/*
Theme Name: Mukashi Album
Theme URI: https://mukashishashin.com/
Description: 大阪府大東市の昔写真アルバム専用テーマ。メディアライブラリの画像をそのままアルバムとして表示します。プラグイン非依存の軽量テーマ。
Author: 株式会社まちんぐ
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mukashi-album
Tags: photography, gallery, dark, one-column, custom-menu
*/

/* ══ トークン ═══════════════════════════════════════ */
:root{
  --sumi:#16140F;        /* 墨・地の色 */
  --sumi-2:#201D16;      /* 面 */
  --sumi-3:#2C2820;      /* 罫・境界 */
  --washi:#EDE5D6;       /* 印画紙の白 */
  --hai:#8E877A;         /* 灰・副次テキスト */
  --ao:#5B8CA8;          /* 青写真アクセント */
  --line:#06C755;        /* LINE ブランドカラー */
  --gutter:6px;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"SFMono-Regular",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--sumi);color:var(--washi);
  font-family:var(--gothic);font-size:15px;line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--ao);outline-offset:3px}
.wrap{max-width:1400px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:99;background:var(--washi);color:var(--sumi);padding:8px 14px}

/* ══ ヘッダー ═══════════════════════════════════════ */
.site-head{position:sticky;top:0;z-index:40;background:rgba(22,20,15,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--sumi-3)}
.site-head .wrap{display:flex;align-items:center;gap:24px;min-height:58px}
.brand{font-family:var(--mincho);font-weight:700;font-size:17px;letter-spacing:.04em;
  text-decoration:none;white-space:nowrap}
.brand span{color:var(--ao)}
.nav{display:flex;gap:20px;margin-left:auto;font-size:13px;list-style:none;margin-block:0;padding:0}
.nav a{text-decoration:none;color:var(--hai);transition:color .2s}
.nav a:hover,.nav .current-menu-item>a{color:var(--washi)}
.head-line{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;text-decoration:none;
  border:1px solid var(--line);color:var(--line);border-radius:2px;padding:5px 13px;transition:.18s;white-space:nowrap}
.head-line:hover{background:var(--line);color:#06301A}
.menu-toggle{display:none;background:none;border:1px solid var(--sumi-3);color:var(--washi);
  border-radius:2px;padding:5px 11px;font-size:12px;cursor:pointer}

/* ══ ヒーロー ═══════════════════════════════════════ */
.hero{position:relative;border-bottom:1px solid var(--sumi-3);overflow:hidden}
.sheet{display:flex;gap:4px;padding:14px 0;width:max-content;animation:drift 90s linear infinite}
.sheet img{width:74px;height:74px;object-fit:cover;filter:grayscale(.15) brightness(.72);flex:0 0 auto}
.hero:hover .sheet{animation-play-state:paused}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,20,15,.25),rgba(22,20,15,.96) 76%)}
.hero-copy{position:relative;z-index:2;margin-top:-46px;padding-bottom:34px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--ao);margin:0 0 10px}
.hero-copy h1{font-family:var(--mincho);font-weight:700;font-size:clamp(27px,4.6vw,50px);
  line-height:1.28;margin:0 0 14px;letter-spacing:.02em}
.hero-copy .lead{max-width:46ch;color:var(--hai);margin:0 0 20px;font-size:14px}
.stats{display:flex;gap:26px;font-family:var(--mono);font-size:12px;color:var(--hai);flex-wrap:wrap}
.stats b{display:block;font-family:var(--mincho);font-size:26px;color:var(--washi);font-weight:500;line-height:1.25}

/* ══ 絞り込みバー ═══════════════════════════════════ */
.filters{position:sticky;top:58px;z-index:30;background:rgba(22,20,15,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--sumi-3);padding:12px 0}
.frow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.frow+.frow{margin-top:9px}
.flabel{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--hai);width:52px;flex:0 0 auto}
.chip{display:inline-block;font-size:12.5px;color:var(--hai);text-decoration:none;
  background:none;border:1px solid var(--sumi-3);border-radius:2px;padding:4px 12px;
  cursor:pointer;transition:.15s;white-space:nowrap;font-family:inherit}
.chip:hover{color:var(--washi);border-color:var(--hai)}
.chip.is-on{background:var(--ao);border-color:var(--ao);color:#101318;font-weight:500}
.chip i{font-family:var(--mono);font-style:normal;font-size:9.5px;margin-left:6px;opacity:.65;vertical-align:1px}
.chip.is-zero{opacity:.42}
.count{font-family:var(--mono);font-size:11px;color:var(--hai);margin-left:10px}
.play{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:inherit;
  font-size:12.5px;color:var(--washi);background:none;border:1px solid var(--washi);
  border-radius:2px;padding:5px 14px;cursor:pointer;transition:.15s}
.play:hover{background:var(--washi);color:var(--sumi)}

/* ══ グリッド ═══════════════════════════════════════ */
.grid{display:grid;gap:var(--gutter);padding:22px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.tile{position:relative;aspect-ratio:1;background:var(--sumi-2);display:block;overflow:hidden;
  border:none;padding:0;cursor:pointer;text-decoration:none;color:inherit}
.tile.is-feat{grid-column:span 2;grid-row:span 2}
.tile img{width:100%;height:100%;object-fit:cover;filter:brightness(.94);
  transition:filter .3s,transform .5s}
.tile:hover img,.tile:focus-visible img{filter:brightness(1.06);transform:scale(1.03)}
.tile::before,.tile::after{content:"";position:absolute;width:17px;height:17px;
  background:var(--washi);opacity:0;transition:opacity .25s;pointer-events:none}
.tile::before{top:0;left:0;clip-path:polygon(0 0,100% 0,0 100%)}
.tile::after{bottom:0;right:0;clip-path:polygon(100% 100%,100% 0,0 100%)}
.tile:hover::before,.tile:hover::after,
.tile:focus-visible::before,.tile:focus-visible::after{opacity:.9}
.cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;text-align:left;
  background:linear-gradient(transparent,rgba(22,20,15,.93));
  opacity:0;transform:translateY(6px);transition:.25s}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
.cap b{display:block;font-weight:500;font-size:12.5px;line-height:1.45}
.cap small{font-family:var(--mono);font-size:10px;color:var(--ao);letter-spacing:.08em}
.empty{padding:70px 0;text-align:center;color:var(--hai);font-size:14px}

.more{display:block;width:max-content;margin:26px auto 0;font-size:13px;text-decoration:none;
  color:var(--washi);background:none;border:1px solid var(--sumi-3);
  padding:11px 40px;border-radius:2px;cursor:pointer;transition:.2s;font-family:inherit}
.more:hover{border-color:var(--ao);color:var(--ao)}
.more[aria-busy="true"]{opacity:.5;pointer-events:none}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:26px;
  font-family:var(--mono);font-size:12px;flex-wrap:wrap}
.pagination .page-numbers{padding:7px 13px;border:1px solid var(--sumi-3);
  border-radius:2px;text-decoration:none;color:var(--hai)}
.pagination .current{background:var(--ao);border-color:var(--ao);color:#101318}

/* ══ 写真提供のお願い（LINE 導線） ═══════════════════ */
.ask{margin-top:64px;border-top:1px solid var(--sumi-3);background:var(--sumi-2)}
.ask .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;padding-top:52px;padding-bottom:52px}
.ask h2{font-family:var(--mincho);font-size:25px;font-weight:700;margin:0 0 14px;letter-spacing:.02em}
.ask p{color:var(--hai);font-size:14px;margin:0 0 22px}
.ask ul{list-style:none;margin:0;padding:0;font-size:13px}
.ask li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--sumi-3)}
.ask li span{font-family:var(--mono);font-size:10px;color:var(--ao);padding-top:4px}
.line-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--line);color:#06301A;font-weight:500;font-size:14px;
  padding:13px 26px;border-radius:3px;transition:.18s}
.line-btn:hover{filter:brightness(1.12)}
.line-btn svg{width:20px;height:20px;flex:0 0 auto}
.line-note{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--hai)}

/* ══ 記事・固定ページ ═══════════════════════════════ */
.page-head{padding:52px 0 26px;border-bottom:1px solid var(--sumi-3)}
.page-head h1{font-family:var(--mincho);font-size:clamp(24px,3.4vw,36px);font-weight:700;margin:0;letter-spacing:.02em}
.page-head .meta{font-family:var(--mono);font-size:11px;color:var(--hai);letter-spacing:.1em;margin:0 0 12px}
.entry{padding:36px 0 20px;font-size:15px}
.entry h2{font-family:var(--mincho);font-size:22px;margin:44px 0 14px;font-weight:700}
.entry h3{font-size:17px;margin:32px 0 10px;font-weight:500}
.entry p{margin:0 0 20px}
.entry a{color:var(--ao)}
.entry img{margin:24px auto}
.entry ul,.entry ol{padding-left:1.3em;margin:0 0 20px}
.entry blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:2px solid var(--ao);color:var(--hai)}
.entry table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
.entry th,.entry td{border:1px solid var(--sumi-3);padding:9px 12px;text-align:left}
.entry th{background:var(--sumi-2);font-weight:500}

/* 添付ファイル単体（写真ページ） */
.photo-stage{background:#0F0E0A;padding:34px 0;border-bottom:1px solid var(--sumi-3);text-align:center}
.photo-stage img{margin:0 auto;max-height:76vh;width:auto;box-shadow:0 0 60px rgba(0,0,0,.65)}
.photo-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;margin:30px 0}
.photo-meta div{background:var(--sumi-2);padding:14px 16px}
.photo-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--hai);margin:0 0 5px}
.photo-meta dd{margin:0;font-size:14px}
.photo-meta a{color:var(--ao);text-decoration:none}
.photo-nav{display:flex;justify-content:space-between;gap:12px;margin:34px 0 10px;font-size:13px}
.photo-nav a{text-decoration:none;color:var(--hai);border:1px solid var(--sumi-3);
  padding:10px 18px;border-radius:2px;transition:.18s}
.photo-nav a:hover{color:var(--washi);border-color:var(--hai)}

/* ══ 検索 ═══════════════════════════════════════════ */
.searchform{display:flex;gap:8px;margin:0}
.searchform input[type=search]{flex:1;background:var(--sumi-2);border:1px solid var(--sumi-3);
  color:var(--washi);padding:9px 13px;border-radius:2px;font-family:inherit;font-size:14px;min-width:0}
.searchform button{background:none;border:1px solid var(--sumi-3);color:var(--washi);
  padding:9px 18px;border-radius:2px;cursor:pointer;font-family:inherit;font-size:13px}
.searchform button:hover{border-color:var(--ao);color:var(--ao)}
.search-panel{display:none;padding:14px 0;border-bottom:1px solid var(--sumi-3);background:var(--sumi-2)}
.search-panel.is-open{display:block}

/* ══ フッター ═══════════════════════════════════════ */
.site-foot{padding:40px 0 48px;border-top:1px solid var(--sumi-3);margin-top:0}
.site-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.site-foot .fnav{display:flex;gap:18px;list-style:none;margin:0;padding:0;font-size:12.5px}
.site-foot a{text-decoration:none;color:var(--hai)}
.site-foot a:hover{color:var(--washi)}
.site-foot .copy{font-family:var(--mono);font-size:11px;color:var(--hai)}

/* ══ ライトボックス ═════════════════════════════════ */
dialog.lb{border:none;padding:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;
  background:var(--sumi);color:var(--washi)}
dialog.lb::backdrop{background:rgba(10,9,6,.96)}
.lb-in{height:100%;display:grid;grid-template-rows:1fr auto;padding:26px 26px 20px}
.lb-stage{display:flex;align-items:center;justify-content:center;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 0 60px rgba(0,0,0,.7)}
.lb-meta{display:flex;align-items:flex-end;gap:24px;padding-top:18px;
  border-top:1px solid var(--sumi-3);margin-top:18px;flex-wrap:wrap}
.lb-meta h3{font-family:var(--mincho);font-size:19px;font-weight:500;margin:0 0 5px}
.lb-meta .m{font-family:var(--mono);font-size:11px;color:var(--hai);letter-spacing:.08em}
.lb-ctrl{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.lb-ctrl button,.lb-ctrl a,.lb-close{font-family:var(--mono);font-size:12px;color:var(--washi);
  background:none;border:1px solid var(--sumi-3);border-radius:2px;padding:7px 15px;
  cursor:pointer;transition:.15s;text-decoration:none}
.lb-ctrl button:hover,.lb-ctrl a:hover,.lb-close:hover{border-color:var(--ao);color:var(--ao)}
.lb-ctrl button[data-on="1"]{background:var(--ao);border-color:var(--ao);color:#101318}
.lb-close{position:absolute;top:20px;right:24px;z-index:5}
.lb-line{border-color:var(--line)!important;color:var(--line)!important}
.lb-line:hover{background:var(--line);color:#06301A!important}

/* ══ レスポンシブ ═══════════════════════════════════ */
@media(max-width:860px){
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--sumi);border-bottom:1px solid var(--sumi-3);padding:8px 20px 16px;display:none}
  .nav.is-open{display:flex}
  .nav li{padding:9px 0;border-bottom:1px solid var(--sumi-3)}
  .menu-toggle{display:block;margin-left:auto}
  .head-line{padding:5px 10px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .flabel{width:100%}
  .play{margin-left:0}
  .ask .wrap{grid-template-columns:1fr;gap:30px}
  .lb-in{padding:18px 14px 14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}