/* =============================================================
   わんこ着せ替え（kisekae.html）の「体格・仕立て」の欄だけの見た目
   動きは assets/kisekae-body.js。共通の見た目は style.css・kisekae.css。
   ============================================================= */

/* 欄の頭の見出し（00〜04）。右の欄の上に貼りつけ、いまどこかを示す */
.kz-body-nav{
  position:sticky;top:var(--navh);z-index:30;
  display:flex;gap:2px 14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  background:var(--paper);border-bottom:1px solid var(--line);
  margin:0 0 8px;padding:10px 0 8px;
}
.kz-body-nav::-webkit-scrollbar{display:none;}
.kz-body-nav a{flex:0 0 auto;font-size:.8125rem;letter-spacing:.08em;color:var(--ink-mid);padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap;}
.kz-body-nav a span{font-family:var(--latin);font-style:italic;color:var(--ink-soft);margin-right:4px;}
.kz-body-nav a.is-current,.kz-body-nav a:hover{color:var(--accent);border-color:var(--accent);}
.kz-body-nav a.is-current span{color:var(--accent);}
.page-kisekae #calc .q{scroll-margin-top:calc(var(--navh) + 70px);}

/* 03 カスタマイズ：たたんだ見出し */
.kz-custom>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;}
.kz-custom>summary::-webkit-details-marker{display:none;}
/* 見出しが summary の中に入るので、style.css の .q>h3 と同じ形をここで当てる */
.kz-custom>summary h3{display:flex;align-items:baseline;gap:.8em;flex-wrap:wrap;font-family:var(--serif);
  font-size:1.1rem;letter-spacing:.12em;margin:0;grid-column:1;}
.kz-custom>summary h3 .qn{font-family:var(--latin);font-size:1.15rem;color:var(--accent);letter-spacing:.06em;}
.kz-custom-now{grid-column:1;font-size:.75rem;line-height:1.8;color:var(--accent-deep);letter-spacing:.04em;}
.kz-custom-now:empty{display:none;}
.kz-custom-open{grid-column:2;grid-row:1/3;width:28px;height:28px;border:1px solid var(--line);position:relative;}
.kz-custom-open::before,.kz-custom-open::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1px;background:var(--ink);transform:translate(-50%,-50%);}
.kz-custom-open::after{transform:translate(-50%,-50%) rotate(90deg);}
.kz-custom[open] .kz-custom-open::after{display:none;}
.kz-custom[open]>summary{margin-bottom:1em;}
.kz-custom>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

/* 切替の自動選択の説明は、行を分けて読みやすく */
.page-kisekae .kz-auto-note{white-space:pre-line;line-height:1.9;}

/* 採寸の3Dは押したときだけ読む */
.measure-open{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;background:var(--paper);white-space:nowrap;}

@media(max-width:900px){
  .kz-body-nav{gap:2px 12px;padding:8px 0 6px;}
  .kz-body-nav a{font-size:.75rem;}
}