@charset "UTF-8";

/* ============================================================
   道具箪笥（ツール一覧）
   漆を塗った木の箪笥 / 和紙の貼り紙 / 真鍮の取っ手
   ============================================================ */
:root{
  color-scheme:dark;

  --room:   #1D1814;  /* 部屋（ページの地） */
  --frame:  #120E0B;  /* 箪笥の枠 */
  --wood:   #2C231D;  /* 引き出しの面 */
  --paper:  #E7DECB;  /* 貼り紙・説明の紙 */
  --paper-2:#DDD2BC;
  --ink:    #2A211B;  /* 紙の上の文字 */
  --ink-2:  #66574A;
  --text:   #E6DED1;  /* 暗い地の上の文字 */
  --dust:   #A2937F;  /* 補助の文字 */
  --brass:  #B8925A;  /* 金具 */
  --line:   rgba(230,222,209,.12);

  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic Antique", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* 木目（横に流れる筋） */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.28' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .88  0 0 0 0 .74  .16 0 0 0 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
html:has(.sheet[open]){ overflow:hidden; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1100px 700px at 72% -8%, rgba(184,146,90,.08), transparent 62%),
    var(--room);
  color:var(--text);
  font-family:var(--gothic);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  line-break:strict;
}
p,dd,li{ text-wrap:pretty; }
@supports (word-break:auto-phrase){
  p,dt,dd,li,h1,h2,h3,.label,.catch{ word-break:auto-phrase; }
}
h1,h2,h3,p,dl,dd,ul{ margin:0; padding:0; }
ul{ list-style:none; }
a{ color:inherit; }
button,input{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ============================================================
   上の帯・全体の配置
   ============================================================ */
.topbar{
  width:min(100% - 64px, 1160px);
  margin:0 auto;
  padding:22px 0 0;
}
.back{
  font-size:.8125rem;
  color:var(--dust);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}
.back:hover{ color:var(--text); border-bottom-color:var(--brass); }

.layout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:64px;
  width:min(100% - 64px, 1160px);
  margin:0 auto;
  padding:48px 0 88px;
}

/* ============================================================
   縦書きの題字
   ============================================================ */
.title-col{
  position:sticky;
  top:48px;
  align-self:start;
  writing-mode:vertical-rl;
}
.title{
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(3.25rem, 5.2vw, 4.5rem);
  line-height:1.1;
  letter-spacing:.14em;
  color:var(--text);
}
.title rt{
  font-family:var(--gothic);
  font-weight:500;
  font-size:.2em;
  letter-spacing:.3em;
  color:var(--dust);
}
.subtitle{
  margin-block-start:20px;
  padding-inline-start:6.5em;
  font-size:.9375rem;
  line-height:2;
  letter-spacing:.2em;
  color:var(--dust);
}
/* 縦書きの中の「AI」を横向きに寝かせず、1文字分に収める */
.tcy{ text-combine-upright:all; letter-spacing:0; }

/* ============================================================
   絞り込み・検索
   ============================================================ */
.lead{
  font-size:.9375rem;
  color:var(--dust);
}
.controls{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px 40px;
  margin-top:22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.filters{ display:flex; flex-wrap:wrap; gap:4px 26px; }
.filter{
  display:inline-flex;
  align-items:baseline;
  gap:.45em;
  padding:6px 0 5px;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--dust);
  font-weight:500;
  font-size:.9375rem;
  cursor:pointer;
}
.filter:hover{ color:var(--text); }
.filter[aria-pressed="true"]{ color:var(--text); border-bottom-color:var(--brass); }
.filter-n{ font-family:var(--mincho); font-size:.8125rem; color:var(--dust); }

.search input{
  width:15em;
  padding:6px 2px 5px;
  background:transparent;
  border:0;
  border-bottom:2px solid var(--line);
  border-radius:0;
  font-size:.9375rem;
  color:var(--text);
  -webkit-appearance:none;
  appearance:none;
}
.search input::placeholder{ color:var(--dust); opacity:.8; }
.search input:focus{ outline:none; border-bottom-color:var(--brass); }

.result{
  margin:14px 0 18px;
  font-size:.8125rem;
  color:var(--dust);
}

/* ============================================================
   箪笥
   ============================================================ */
.chest{
  padding:14px;
  background:var(--frame);
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,236,210,.03),
    0 40px 70px -40px rgba(0,0,0,.9);
}
.tier + .tier{ margin-top:18px; }

/* 段の名札 */
.tier-plate{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:4px 4px 12px;
  font-weight:400;
}
.tier-name{
  font-family:var(--mincho);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.3em;
  color:var(--text);
}
.tier-note{ font-size:.75rem; color:var(--dust); }
.tier-plate::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(230,222,209,.08);
  transform:translateY(-.3em);
}

.drawers{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:10px;
}

/* 引き出し1つ */
.drawer{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  min-height:224px;
  padding:40px 20px 20px;
  background:var(--grain), var(--wood);
  border:0;
  border-radius:2px;
  text-align:center;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,236,210,.07),
    inset 0 -3px 0 rgba(0,0,0,.35),
    0 1px 0 rgba(0,0,0,.6);
  transition:transform .22s ease, box-shadow .22s ease;
}
.drawers > :nth-child(3n+2){ background-position:-160px -70px, 0 0; }
.drawers > :nth-child(3n){ background-position:-320px -140px, 0 0; }

.drawer:not(.is-empty):hover,
.drawer:not(.is-empty):focus-visible{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,236,210,.09),
    inset 0 -3px 0 rgba(0,0,0,.35),
    0 14px 22px -10px rgba(0,0,0,.8);
}

/* 和紙の貼り紙（ツール名） */
.label{
  width:100%;
  max-width:15em;
  padding:13px 14px 12px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mincho);
  font-weight:700;
  font-size:1.0625rem;
  line-height:1.55;
  letter-spacing:.06em;
  outline:1px solid rgba(42,33,27,.32);
  outline-offset:-5px;
  box-shadow:0 1px 2px rgba(0,0,0,.45);
  text-wrap:balance;
}
.catch{
  max-width:17em;
  text-wrap:balance;
  font-size:.8125rem;
  line-height:1.8;
  color:var(--dust);
}
.status{
  position:absolute;
  top:12px;
  right:14px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.6875rem;
  line-height:1;
  letter-spacing:.08em;
  color:var(--dust);
}
.status::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--brass);
}
.status.is-quiet::before{ background:transparent; box-shadow:inset 0 0 0 1px var(--dust); }

/* 真鍮の取っ手 */
.pull{
  position:relative;
  width:46px;
  height:20px;
  margin-top:auto;
  flex-shrink:0;
}
.pull::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:6px;
  border-radius:3px;
  background:linear-gradient(#CDA970, #8C6A3C);
  box-shadow:0 1px 1px rgba(0,0,0,.5);
}
.pull::after{
  content:"";
  position:absolute;
  left:50%; top:3px;
  width:26px; height:14px;
  transform:translateX(-50%);
  border:2px solid var(--brass);
  border-top:0;
  border-radius:0 0 14px 14px;
}

/* まだ何も入っていない引き出し */
.drawer.is-empty{
  cursor:default;
  opacity:.42;
  box-shadow:inset 0 1px 0 rgba(255,236,210,.04), inset 0 -3px 0 rgba(0,0,0,.35);
}

/* 見つからないとき */
.empty{
  padding:48px 24px;
  text-align:center;
  font-size:.9375rem;
  color:var(--dust);
}
.empty-reset{
  margin-top:18px;
  padding:.6em 1.4em;
  background:none;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--text);
  font-size:.875rem;
  cursor:pointer;
}
.empty-reset:hover{ border-color:var(--brass); }

.foot{
  margin-top:40px;
  font-size:.8125rem;
  color:var(--dust);
}
.foot a{ color:var(--text); text-decoration:none; border-bottom:1px solid var(--brass); }

/* ============================================================
   引き出しの中身（右から出てくる説明の紙）
   ============================================================ */
.sheet{
  width:min(100%, 580px);
  max-width:100%;
  height:100dvh;
  max-height:100dvh;
  margin:0 0 0 auto;
  padding:0;
  border:0;
  background:var(--paper);
  color:var(--ink);
  box-shadow:-30px 0 60px rgba(0,0,0,.55);
}
.sheet::backdrop{
  background:rgba(12,9,7,.62);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.sheet[open]{ animation:sheet-in .34s cubic-bezier(.2,.75,.25,1); }
.sheet.is-closing{ animation:sheet-out .22s ease-in forwards; }
@keyframes sheet-in{ from{ transform:translateX(48px); opacity:0; } }
@keyframes sheet-out{ to{ transform:translateX(48px); opacity:0; } }

.sheet-inner{
  height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 48px 64px;
}
.sheet-bar{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  justify-content:flex-end;
  margin:0 -48px;
  padding:18px 24px 10px;
  background:linear-gradient(var(--paper) 70%, rgba(231,222,203,0));
}
.sheet-close{
  padding:.45em 1.2em;
  background:none;
  border:1px solid rgba(42,33,27,.3);
  border-radius:2px;
  font-size:.8125rem;
  color:var(--ink);
  cursor:pointer;
}
.sheet-close:hover{ border-color:var(--ink); }
.sheet :focus-visible{ outline-color:var(--ink); }

.sheet-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 18px;
  font-size:.8125rem;
  color:var(--ink-2);
}
.sheet-status{ display:inline-flex; align-items:center; gap:6px; }
.sheet-status::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:#8C6A3C;
}
.sheet-status.is-quiet::before{ background:transparent; box-shadow:inset 0 0 0 1px var(--ink-2); }

.sheet-name{
  margin-top:10px;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(1.5rem, 4vw, 1.875rem);
  line-height:1.5;
  letter-spacing:.04em;
}
.sheet-catch{
  margin-top:8px;
  font-weight:500;
  font-size:1rem;
  line-height:1.85;
}

.sheet-term{
  margin-top:28px;
  padding:16px 20px 18px;
  background:var(--paper-2);
  border-left:3px solid var(--brass);
}
.sheet-term h3{
  font-family:var(--mincho);
  font-weight:700;
  font-size:.9375rem;
  line-height:1.7;
}
.sheet-term p{
  margin-top:4px;
  font-size:.875rem;
  line-height:1.95;
}

.sheet-rows{ margin-top:28px; border-top:1px solid rgba(42,33,27,.16); }
.sheet-row{
  padding:18px 0 20px;
  border-bottom:1px solid rgba(42,33,27,.16);
}
.sheet-row dt{
  font-family:var(--mincho);
  font-weight:700;
  font-size:.9375rem;
  line-height:1.7;
}
.sheet-row dd p{
  margin-top:6px;
  font-size:.9375rem;
  line-height:2;
}
.dash-list{ margin-top:8px; }
.dash-list li{
  position:relative;
  padding:2px 0 2px 22px;
  font-size:.9375rem;
  line-height:1.9;
  color:var(--ink-2);
}
.dash-list li::before{
  content:"";
  position:absolute;
  left:2px; top:1.02em;
  width:10px; height:1px;
  background:var(--ink-2);
}

.sheet-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.sheet-tags li{
  padding:.3em .9em;
  border:1px solid rgba(42,33,27,.22);
  border-radius:2px;
  font-size:.75rem;
  line-height:1.7;
  color:var(--ink-2);
}
.sheet-open{
  display:inline-block;
  margin-top:30px;
  padding:.85em 2.2em;
  background:var(--wood);
  border-radius:2px;
  color:var(--paper);
  font-family:var(--mincho);
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
}
.sheet-open:hover{ background:var(--frame); }

/* ============================================================
   タブレット
   ============================================================ */
@media (max-width:900px){
  .layout{ gap:40px; }
  .subtitle{ padding-inline-start:4.2em; }
}

/* ============================================================
   スマートフォン
   ============================================================ */
@media (max-width:720px){
  .topbar,.layout{ width:min(100% - 32px, 1160px); }
  .topbar{ padding-top:16px; }
  .layout{ grid-template-columns:minmax(0,1fr); gap:28px; padding:28px 0 64px; }

  .title-col{
    position:static;
    writing-mode:horizontal-tb;
  }
  .title{ font-size:2.75rem; letter-spacing:.1em; line-height:1.5; }
  .title rt{ font-size:.26em; letter-spacing:.2em; }
  .subtitle{ margin-block-start:8px; padding-inline-start:0; font-size:.875rem; letter-spacing:.08em; line-height:1.9; }
  .subtitle .tcy{ text-combine-upright:none; }
  .subtitle br{ display:none; }

  .controls{ flex-direction:column; align-items:stretch; }
  .filters{ gap:4px 22px; }
  .search input{ width:100%; }

  .chest{ padding:8px; }
  .tier + .tier{ margin-top:14px; }
  .tier-plate{ flex-wrap:wrap; gap:2px 12px; margin:6px 6px 10px; }
  .tier-plate::after{ display:none; }
  .drawers{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
  .drawer{ min-height:196px; padding:34px 8px 14px; gap:10px; }
  .label{ padding:10px 6px 9px; font-size:.875rem; letter-spacing:0; outline-offset:-4px; }
  .catch{ font-size:.75rem; line-height:1.7; }
  .status{ top:10px; right:10px; }
  .pull{ width:38px; }
  .pull::after{ width:22px; height:12px; }

  .sheet-inner{ padding:0 22px 48px; }
  .sheet-bar{ margin:0 -22px; padding:14px 14px 8px; }
}

/* ============================================================
   動きを減らす設定にしている方には、動きを出さない
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .drawer{ transition:none; }
  .drawer:not(.is-empty):hover,
  .drawer:not(.is-empty):focus-visible{ transform:none; }
  .sheet[open],.sheet.is-closing{ animation:none; }
}

/* 説明の下のボタン（複数並ぶとき用） */
.sheet-acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.sheet-acts .sheet-open{ margin-top:0; }