/* リヴリー ウィッシュ数図鑑 — 図鑑(index.html)と静的ページの共通スタイル */
:root{
  --bg:#f7f1e6;          /* 生成りの地 */
  --dot:#e8dcc6;         /* 地の水玉 */
  --card:#fffdf8;
  --ink:#2b2622;
  --sub:#7a6d5d;
  --faint:#a0917c;
  --line:#e3d7c2;
  --line2:#e9dfcd;
  --accent:#1f6b63;      /* 深緑。リンクと選択中のタブ */
  --wish:#c8611f;        /* ウィッシュ数の数字 */
  --wish-icon:#e0742a;
  --tile:#f4efe3;        /* 小さな面 */
  --tile-on:#efe5d3;     /* 選択中のナビ */
  --sr:#e0a12a;
  --r:#9aa38f;
  --w:1240px;
  --round:20px;
  --maru:"Zen Maru Gothic",system-ui,sans-serif;
  --heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-9.2A4 4 0 0 1 12 8a4 4 0 0 1 7 2.8C19 15.6 12 20 12 20Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:22px 22px;
  color:var(--ink);
  font:15px/1.7 "Zen Kaku Gothic New",system-ui,sans-serif;
  padding-bottom:64px;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:#e0742a}
::selection{background:#ffd9a8}

/* ---- ヘッダー ---- */
.head{position:sticky;top:0;z-index:20;
  backdrop-filter:blur(10px);background:rgba(247,241,230,.92);
  border-bottom:1px solid var(--line)}
.head-in{max-width:var(--w);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto;
  font-family:var(--maru);font-weight:900;font-size:18px;
  letter-spacing:.02em;line-height:1.2;color:var(--ink);white-space:nowrap}
.logo:hover{color:var(--ink)}
.logo::before{content:"";width:34px;height:34px;border-radius:11px;flex:none;
  background:var(--accent) center/18px 18px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f1e6' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-9.2A4 4 0 0 1 12 8a4 4 0 0 1 7 2.8C19 15.6 12 20 12 20Z'/%3E%3C/svg%3E")}
.logo em{font-style:normal;color:var(--accent)}
.head-note{color:var(--faint);font-size:12px;white-space:nowrap}
.head-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.head-nav a{font-size:13px;font-weight:700;color:var(--sub);
  padding:8px 14px;border-radius:12px;white-space:nowrap}
.head-nav a:hover{background:var(--tile-on);color:var(--ink)}
.head-nav a[aria-current]{background:var(--tile-on);color:var(--ink)}

/* ---- トップの見出し ---- */
.intro{max-width:var(--w);margin:0 auto;padding:22px 20px 4px}
.intro h1{font-family:var(--maru);font-weight:900;font-size:26px;margin:0 0 8px;line-height:1.25}
.intro p{margin:0;font-size:13.5px;color:var(--sub);line-height:1.8;max-width:64em}
.intro strong{color:var(--ink)}

/* ---- ページ下部の説明 ---- */
.about-site{max-width:var(--w);margin:30px auto 0;padding:0 20px;
  font-size:13px;color:var(--sub)}
.about-site h2{font-family:var(--maru);font-weight:900;font-size:17px;
  color:var(--ink);margin:0 0 10px}
.about-site p{background:var(--card);border:1px solid var(--line2);border-radius:16px;
  padding:14px 18px;margin:0 0 8px;line-height:1.9}
.about-site strong{color:var(--ink)}

/* ---- タブ ---- */
/* 画面が広いときは折り返して全部見せる。横スクロールにすると、
   PCではスクロールバーを消しているぶん動かす手段が無く、
   7個目から先のタブ(Islandは19個ある)が選べなくなる。 */
.tabs{max-width:var(--w);margin:0 auto;padding:6px 20px;display:flex;gap:8px;
  flex-wrap:wrap}
@media(max-width:760px){   /* 狭いときは指で流せるので1行のまま */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
}
.tabs:empty{display:none}
.tabs button{flex:0 0 auto;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  white-space:nowrap;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--sub)}
.tabs button:hover{border-color:var(--accent)}
.tabs button[aria-selected=true]{border-color:var(--accent);
  background:var(--accent);color:var(--card)}
.tabs-main{margin-top:12px}
.tabs-main button{font-size:14px}

/* ---- 検索・並べ替え ---- */
.bar{max-width:var(--w);margin:12px auto 0;padding:0 20px}
.bar-in{background:var(--card);border:1px solid var(--line);border-radius:var(--round);
  padding:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bar input,.bar select{font:inherit;border:none;background:var(--tile);
  border-radius:13px;padding:12px 14px;color:var(--ink);outline:none}
.bar input{flex:1 1 240px;min-width:0;font-size:14px}
.bar select{font-size:13px;font-weight:700;cursor:pointer}
.count{font-size:13px;color:var(--sub);margin-left:auto;padding-right:6px}

/* ---- カード ---- */
.grid{max-width:var(--w);margin:20px auto;padding:0 20px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line2);border-radius:var(--round);
  overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
  text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px);border-color:#d8c9ae;color:inherit;
  box-shadow:0 14px 26px -16px rgba(43,38,34,.4)}
/* 正方形の枠に画像を敷き込む。枠の中に普通に置くと、縦長の画像
   (例 104x160)が aspect-ratio を押し広げてカードの高さがばらつく。
   絶対配置にすれば枠の大きさは画像に左右されない。 */
.card .thumb{position:relative;aspect-ratio:1/1;background:var(--tile);overflow:hidden}
.card img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block}
.badge{position:absolute;top:8px;left:8px;z-index:1;
  font-family:var(--maru);font-weight:900;font-size:10px;letter-spacing:.06em;
  color:var(--card);padding:3px 9px;border-radius:999px}
.badge.sr{background:var(--sr)} .badge.r{background:var(--r)}
.card .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .nm{font-size:12.5px;font-weight:700;line-height:1.5}
.card .ws{margin-top:auto;display:flex;align-items:center;gap:5px;
  border-top:1px dashed var(--line);padding-top:8px;
  font-family:var(--maru);font-weight:900;font-size:17px;color:var(--wish);
  font-variant-numeric:tabular-nums;line-height:1}
.card .ws::before{content:"";width:13px;height:13px;flex:none;
  background:var(--wish-icon);
  -webkit-mask:var(--heart) center/contain no-repeat;
  mask:var(--heart) center/contain no-repeat}

.filters{max-width:var(--w);margin:14px auto -6px;padding:0 20px;
  display:flex;gap:8px;flex-wrap:wrap}
.filters[hidden]{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;
  border:1px solid var(--wish-icon);background:#fdf0e3;color:var(--wish)}
.chip span{font-size:15px;line-height:1;opacity:.7}
.chip:hover{background:#f9e3cd}
.chip-all{border-color:var(--line);background:var(--card);color:var(--sub)}

.more{text-align:center;color:var(--faint);font-size:12px;padding:10px 0 40px;min-height:24px}

/* ---- 詳細パネル(図鑑側) ---- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;padding:16px}
.modal-bg{position:absolute;inset:0;background:rgba(43,38,34,.55)}
.modal-box{position:relative;background:var(--card);border-radius:26px;padding:26px;
  max-width:430px;width:100%;max-height:86vh;overflow:auto;text-align:center}
.modal-x{position:absolute;top:10px;right:12px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--faint);cursor:pointer}
#m-img{width:220px;height:220px;object-fit:contain}
#m-name{font-family:var(--maru);font-weight:900;font-size:19px;margin:6px 0 2px}
.m-meta{color:var(--faint);font-size:12px;margin:0;display:flex;gap:8px;justify-content:center}
.m-wish{margin:12px 0;font-family:var(--maru);font-weight:900;font-size:30px;
  color:var(--wish);font-variant-numeric:tabular-nums;line-height:1.1}
.m-wish small{display:block;font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:11px;color:var(--faint);font-weight:400;letter-spacing:.08em}
.m-desc{text-align:left;font-size:13.5px;border-top:1px dashed var(--line);padding-top:14px}
.m-sale{text-align:left;font-size:12px;color:var(--sub);margin:0}
.m-sale dt{font-weight:700;color:var(--faint);margin-top:6px}
.m-sale dd{margin:0}
.m-link{text-align:right;font-size:12px;margin:14px 0 0;font-weight:700}

/* ---- フッター ---- */
.foot{max-width:var(--w);margin:40px auto 0;padding:20px 20px 0;
  color:var(--faint);font-size:11.5px;border-top:1px solid var(--line)}
.foot p{margin:4px 0}
.foot .notice{margin-bottom:10px}

/* 読み上げ専用(画面には出さないがHTMLには残す) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:760px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  .card .ws{font-size:15px}
  .card .nm{font-size:12px}
  .count{margin-left:0}
  .head-in{padding:10px 16px}
  .logo{font-size:16px}
  .tabs,.bar,.grid,.intro,.about-site{padding-left:16px;padding-right:16px}
  .intro h1{font-size:21px}
}

/* ---- favorites (shared by list page and static pages) ---- */
.fav-n:not(:empty){display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:999px;
  background:#e2557a;color:#fff;font-size:11px;line-height:18px;text-align:center}
.fav-btn{display:inline-flex;align-items:center;gap:6px;margin:6px 0 4px;padding:7px 14px;
  border:1.5px solid #e2557a;border-radius:999px;background:#fff;color:#c73e63;
  font:700 13px/1 inherit;cursor:pointer}
.fav-btn .fav-ic::before{content:"♡";font-size:16px}
.fav-btn.on{background:#e2557a;color:#fff}
.fav-btn.on .fav-ic::before{content:"♥"}
.fav-mini{position:absolute;top:6px;right:6px;z-index:2;width:30px;height:30px;padding:0;border:0;
  border-radius:50%;background:rgba(255,255,255,.88);color:#c73e63;font-size:16px;line-height:30px;
  cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.fav-mini::before{content:"♡"}
.fav-mini.on{background:#e2557a;color:#fff}
.fav-mini.on::before{content:"♥"}
.fav-only{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:#c73e63;white-space:nowrap}
.fav-toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,20px);opacity:0;
  max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;background:#2b2622;color:#fff;
  font-size:14px;line-height:1.6;text-align:center;pointer-events:none;transition:.25s}
.fav-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.fav-toast a{color:#ffd6e2;text-decoration:underline}