:root{
  color-scheme:light;
  --paper:#F6F1E8; --card:#FCFAF5; --ink:#2A2420; --sub:#74685E; --line:#DED4C4;
  --acc:#2E5E5B; --acc-ink:#FFFFFF; --ok:#3B6B45; --warn:#9A5B12; --ng:#A23B2E;
  --serif:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;
  word-break:auto-phrase;overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acc)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.wrap{max-width:960px;margin:0 auto;padding:0 18px 56px}

/* ---- masthead ---- */
.masthead{padding:34px 0 16px;border-bottom:3px double var(--ink);margin-bottom:20px}
.title{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(30px,7.4vw,46px);letter-spacing:.14em;line-height:1.3}
.title a{color:inherit;text-decoration:none}
.lead{margin:6px 0 0;color:var(--sub);font-size:14px}

/* ---- search / filters ---- */
.search{width:100%;padding:12px 16px;border:1px solid var(--ink);border-radius:999px;background:var(--card);font-size:16px}
.search::placeholder{color:#9A8E82}
.fbox{margin:14px 0 0}
.fsum{cursor:pointer;list-style:none;display:inline-block;padding:6px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px}
.fsum::-webkit-details-marker{display:none}
.fsum::before{content:"▸ "}
.fbox[open] > .fsum::before{content:"▾ "}
.filters{margin:14px 0 4px;display:grid;gap:10px}
.frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flabel{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--sub);min-width:4.2em}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:3px 13px;font-size:14px;line-height:1.7}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);flex:none}
.rowtab{min-width:40px;justify-content:center;padding:3px 10px;font-family:var(--serif);font-weight:700}
.count{margin:14px 0 10px;color:var(--sub);font-size:14px}

/* ---- stone grid ---- */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.stone{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 14px 16px;border:1px solid var(--line);
  background:var(--card);border-radius:14px;text-decoration:none;color:inherit;transition:border-color .15s ease, transform .15s ease}
.stone:hover{border-color:var(--ink)}
.sw{--sw:#CFC8BC;flex:none;width:64px;height:64px;border-radius:50%;margin-bottom:6px;
  background:
    radial-gradient(circle at 31% 25%, rgba(255,255,255,.9) 0 7%, rgba(255,255,255,0) 34%),
    linear-gradient(160deg, rgba(255,255,255,0) 35%, rgba(0,0,0,.24) 100%),
    var(--sw);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), 0 2px 6px rgba(60,40,20,.18)}
.sw.lg{width:84px;height:84px;margin:0}
.sw.sm{width:44px;height:44px;margin:0}
.stone .nm{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.4;overflow-wrap:anywhere;max-width:100%}
.stone .kn{font-size:11px;color:var(--sub);line-height:1.4}
.stone .tg{font-size:13px;color:var(--sub);line-height:1.6;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stone.stub{opacity:.55;border-style:dashed}
.stone.stub .sw{background:none;box-shadow:inset 0 0 0 1px var(--line);border:1px dashed #B9AE9F}
.empty{padding:30px 0;color:var(--sub)}

/* ---- detail plate ---- */
.back{display:inline-block;margin:0 0 14px;font-size:14px}
.plate{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 20px}
.phead{display:flex;gap:18px;align-items:center}
.phead > div{min-width:0}
.pname{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(28px,7vw,38px);line-height:1.3;letter-spacing:.05em}
.pkana{margin:2px 0 0;color:var(--sub);font-size:14px}
.ptag{margin:16px 0 0;font-family:var(--serif);font-size:18px;line-height:1.7}
.themes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.theme{font-size:13px;border:1px solid var(--ink);border-radius:999px;padding:0 12px}
.sec{margin-top:26px}
.sec h2{margin:0 0 8px;font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:.06em;
  display:flex;align-items:center;gap:12px}
.sec h2::after{content:"";flex:1;height:1px;background:var(--line)}
.dl{display:grid;grid-template-columns:5.6em 1fr;gap:4px 14px;margin:0}
.dl dt{color:var(--sub);font-size:14px}
.dl dd{margin:0}
.meaning{margin:0}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{padding:1px 12px;border-radius:8px;font-size:14px;border:1px solid currentColor;background:var(--card)}
.badge.ok{color:var(--ok)} .badge.warn{color:var(--warn)} .badge.ng{color:var(--ng)}
.carenote{margin:8px 0 0;font-size:15px}
.pairs{display:flex;flex-wrap:wrap;gap:10px}
.pairs a{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 6px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);text-decoration:none;color:inherit}
.pairs a:hover{border-color:var(--ink)}
.draft{display:inline-block;margin-left:8px;font-size:12px;border:1px dashed var(--warn);color:var(--warn);border-radius:6px;padding:0 8px;vertical-align:middle;font-family:var(--sans);letter-spacing:0}
.notice{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--sub);font-size:13px;line-height:1.8}

/* ---- product page ---- */
.item-title{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(26px,6.4vw,36px);line-height:1.4;letter-spacing:.05em}
.item-note{margin:6px 0 0;color:var(--sub)}
.iblock{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 18px}
.ihead{display:flex;gap:14px;align-items:center}
.iname{margin:0;font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.4}
.iname a{color:inherit;text-decoration:none}
.itag{margin:0;color:var(--sub);font-size:14px}
.iblock p{margin:12px 0 0}
.iblock .badges{margin-top:12px}
.more{display:inline-block;margin-top:12px;font-size:14px}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}
@media (max-width:420px){
  .plate{padding:20px 16px}
  .dl{grid-template-columns:4.8em 1fr}
}