/* =====================================================================
   NOAH 2026-11-06「キャンセル・日程変更について」（案内担当）
   文はノアさん本人の文（sources/chat-2026-11-06.md）。言い回しは変えない。
   元に戻すとき：index.html の <link …cancel-2026-11-06.css>・
   <script src="cancel-2026-11-06.js"> と <section id="cancel"> を消すだけ。
   余白は polish-2026-11-05.css の --noah-space-* を使う。
   ===================================================================== */
.cancel-sec{ margin-top: var(--noah-space-4); }
.cancel-box{
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 3px 14px rgba(150,125,90,.08);
}
.cancel-sum{
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: var(--noah-space-2); min-height: 56px; padding: 12px 20px; border-radius: 20px;
  font-family: "Hiragino Mincho ProN","Hiragino Mincho","Yu Mincho",serif;
  font-size: 16px; font-weight: 600; letter-spacing: .05em; line-height: 1.5; color: #5d5043;
}
.cancel-sum::-webkit-details-marker{ display: none; }
.cancel-sum::after{
  content: "＋"; flex: none; font-family: inherit; font-size: 18px; line-height: 1; color: #a07f56;
}
.cancel-box[open] > .cancel-sum::after{ content: "－"; }
.cancel-sum:focus-visible,
.cancel-tab:focus-visible{ outline: 2px solid #a07f56; outline-offset: 2px; }
.cancel-body{ padding: 0 20px 24px; color: var(--ink); font-size: 13.5px; line-height: 1.9; }
.cancel-body p{ margin: 0; }
.cancel-body p + p{ margin-top: var(--noah-space-1); }

/* タブ（JS がないときは出さず、2つとも縦に並べる） */
.cancel-tablist{ display: flex; gap: var(--noah-space-1); margin: 0 0 var(--noah-space-3); }
:root:not(.js) .cancel-tablist{ display: none; }
.cancel-tab{
  flex: 1 1 0; min-width: 0; min-height: 48px; padding: 8px 6px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft);
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.35; cursor: pointer;
}
.cancel-tab[aria-selected="true"]{ border-color: var(--accent); background: #fbf3e7; color: #8f6c3f; }
.cancel-panel[hidden]{ display: none; }
.cancel-panel + .cancel-panel{ margin-top: var(--noah-space-3); }
.cancel-panel:focus-visible{ outline: 2px solid #a07f56; outline-offset: 4px; border-radius: 6px; }

/* 見出し（■ は飾りとして付ける。文字は原文のまま） */
.cancel-h{
  margin: 0 0 var(--noah-space-1); font-family: "Hiragino Mincho ProN","Hiragino Mincho","Yu Mincho",serif;
  font-size: 15.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.5; color: #5d5043;
}
.cancel-h::before{ content: "■"; margin-right: .4em; color: var(--accent); font-size: .8em; }
.cancel-sub{ margin: var(--noah-space-2) 0 var(--noah-space-1); font-size: 13.5px; font-weight: 700; color: #57452f; }
.cancel-list{ list-style: none; margin: 0; padding: 0; }
.cancel-list li{ padding: 7px 0; border-bottom: 1px solid #f7f0e4; }
.cancel-list li:last-child{ border-bottom: none; }
/* タブで切り替えるときは、パネルの見出しを目に見えない形にする（タブが見出しの代わり） */
.cancel-on .cancel-panel > .cancel-h{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.cancel-common{ margin-top: var(--noah-space-4); padding-top: var(--noah-space-3); border-top: 1px dashed var(--line); }
.cancel-common .cancel-sub:first-of-type{ margin-top: var(--noah-space-2); }
.cancel-closing{ margin-top: var(--noah-space-3) !important; }

/* 動きは控えめ設定のときは全部止める。ふつうのときも、ごく弱い表示だけ */
@media (prefers-reduced-motion: no-preference){
  .cancel-box[open] .cancel-body{ animation: cancelIn .28s ease-out; }
  .cancel-tab{ transition: background-color .2s, border-color .2s, color .2s; }
}
@keyframes cancelIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .cancel-box *, .cancel-box{ animation: none !important; transition: none !important; }
}

/* 2026-11-06 FAQ などの「キャンセル・日程変更について」リンク：ブラウザ標準の青をやめ、サイトの茶系にそろえる（このサイトにダークはない） */
a[data-open-cancel]{
  color: #8f6c3f; text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: .25em;
}
a[data-open-cancel]:hover, a[data-open-cancel]:focus-visible{ color: #5d5043; text-decoration-color: currentColor; }
a[data-open-cancel]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }