/* ============================================================
   HONEST — 追加の部品
   ------------------------------------------------------------
   Shitate で作った部品を、この店の配色に合わせて移しました。

   ・スケルトン読み込み（一覧が出るまでの骨組み）
   ・よくある質問（開閉がカクつかない作り）
   ・実績の数字（数え上がる。桁が揺れない）
   ・営業の帯の強化（閉店予告・次の営業日）
   ・横に送る一覧（スマホ向け）

   色は style.css の変数をそのまま使っています。
   新しい色は足していません。
   ============================================================ */


/* ────────────────────────────────────────────
   1. スケルトン読み込み

   ぐるぐる回るアイコンは使いません。
   「待っている」ことしか伝わらないからです。
   出てくる中身と同じ形を先に見せると、
   実際の速度は同じでも、遅く感じにくくなります。
   ──────────────────────────────────────────── */
.sk{
  background:rgba(255,255,255,.055);
  border-radius:6px;
  position:relative;
  overflow:hidden;
}
.sec--paper .sk,
.band--paper .sk{ background:rgba(0,0,0,.055); }

.sk::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(100deg,
    transparent, rgba(255,255,255,.1), transparent);
  transform:translateX(-100%);
  animation:skShine 1.7s cubic-bezier(.4,0,.2,1) infinite;
}
.sec--paper .sk::after,
.band--paper .sk::after{
  background:linear-gradient(100deg,
    transparent, rgba(0,0,0,.055), transparent);
}
/* 同時に光ると安っぽく見えるので、少しずつずらします */
.sk-card:nth-child(2) .sk::after{ animation-delay:.12s; }
.sk-card:nth-child(3) .sk::after{ animation-delay:.24s; }
.sk-card:nth-child(4) .sk::after{ animation-delay:.36s; }
@keyframes skShine{ to{ transform:translateX(100%); } }

.sk-card{
  border:1px solid var(--hair);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.sec--paper .sk-card,
.band--paper .sk-card{
  border-color:var(--ivory-line);
  background:rgba(255,255,255,.5);
}
.sk-thumb{ height:0; padding-top:75%; border-radius:0; }
.sk-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:9px; }
.sk-line{ height:11px; }
.sk-line--sm{ height:8px; }

@media (prefers-reduced-motion: reduce){
  .sk::after{ display:none; }
}


/* ────────────────────────────────────────────
   2. よくある質問

   height を animate すると必ずカクつきます。
   grid-template-rows: 0fr → 1fr で開いています。
   中身の高さを測る必要がなく、どんな長さでも滑らかです。

   <details> を土台にしているので、
   JavaScript が無効でも開閉できます。
   ──────────────────────────────────────────── */
.faq{ display:flex; flex-direction:column; gap:10px; }

.faq details{
  border:1px solid var(--hair);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.025);
}
.sec--paper .faq details,
.band--paper .faq details{
  border-color:var(--ivory-line);
  background:rgba(255,255,255,.55);
}
.faq details[open]{ border-color:rgba(143,191,178,.4); }

.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px;
  font-size:16px; font-weight:700; line-height:1.6;
  cursor:pointer; list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:focus-visible{ outline:2px solid var(--sea); outline-offset:-3px; }

/* ＋ の印。× にせず、45度回すだけにします */
.faq .faq__mark{ position:relative; flex:none; width:14px; height:14px; }
.faq .faq__mark::before,
.faq .faq__mark::after{
  content:"";
  position:absolute; left:0; top:6px;
  width:14px; height:2px; border-radius:1px;
  background:var(--mute);
  transition:transform 320ms cubic-bezier(.3,.9,.3,1);
}
.faq .faq__mark::after{ transform:rotate(90deg); }
.faq details[open] .faq__mark::after{ transform:rotate(0); }
.faq details[open] .faq__mark::before,
.faq details[open] .faq__mark::after{ background:var(--sea); }

.faq__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 320ms cubic-bezier(.3,.9,.3,1);
}
.faq details[open] .faq__panel{ grid-template-rows:1fr; }
.faq__panel > div{ overflow:hidden; min-height:0; }
.faq__panel p{
  margin:0; padding:0 20px 20px;
  font-size:15px; line-height:1.95; color:var(--mute);
}
.sec--paper .faq__panel p,
.band--paper .faq__panel p{ color:var(--ivory-mute); }
.faq__panel a{ color:var(--sea); }

@media (prefers-reduced-motion: reduce){
  .faq__panel,
  .faq .faq__mark::before,
  .faq .faq__mark::after{ transition:none; }
}


/* ────────────────────────────────────────────
   3. 実績の数字

   font-variant-numeric: tabular-nums が肝です。
   等幅数字にしないと、数えている間に横幅が揺れて
   ガタガタ動いて見えます。
   ──────────────────────────────────────────── */
.stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 4vw, 40px);
  text-align:center;
  padding:clamp(28px, 6vw, 52px) 0;
  border-block:1px solid var(--hair);
}
.sec--paper .stats,
.band--paper .stats{ border-block-color:var(--ivory-line); }

.stat__num{
  display:block;
  font-family:var(--display);
  font-size:clamp(30px, 7.5vw, 58px);
  line-height:1;
  letter-spacing:.01em;
  color:var(--gold);
  font-variant-numeric:tabular-nums;   /* ★ 桁の揺れを止めます */
  font-feature-settings:"tnum" 1;
}
.stat__unit{ font-size:.4em; margin-left:.08em; color:var(--mute); }
.stat__label{
  display:block;
  margin-top:9px;
  font-size:11px; letter-spacing:.2em;
  color:var(--mute);
}
.sec--paper .stat__label{ color:var(--ivory-mute); }
.stats__note{
  text-align:center;
  margin:14px 0 0;
  font-size:12px;
  color:var(--mute);
  opacity:.8;
}


/* ────────────────────────────────────────────
   4. 営業の帯（既存の .tod に足すぶん）

   閉店の1時間前に予告を出し、
   閉まっているときは次の営業日を案内します。
   ──────────────────────────────────────────── */
.tod__next{
  flex-basis:100%;
  margin-top:6px;
  font-size:12.5px;
  color:var(--mute);
  letter-spacing:.02em;
}
.tod__next.is-soon{ color:var(--gold-lit); font-weight:700; }

/* 営業中の点を、静かに脈打たせます */
.tod__item.is-open .tod__mark::before{
  content:"";
  display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--line-g);
  margin-right:6px;
  vertical-align:1px;
  animation:todPulse 2s ease-in-out infinite;
}
@keyframes todPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(6,199,85,.45); }
  50%    { box-shadow:0 0 0 5px rgba(6,199,85,0); }
}
@media (prefers-reduced-motion: reduce){
  .tod__item.is-open .tod__mark::before{ animation:none; }
}


/* ────────────────────────────────────────────
   5. 横に送る一覧（スマホ向け）

   ライブラリは使いません。CSSのスナップだけです。
   次のカードを少しはみ出させると、
   「続きがある」がドット表示なしで伝わります。
   ──────────────────────────────────────────── */
@media (max-width: 720px){
  .grid--swipe{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);
    padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .grid--swipe::-webkit-scrollbar{ display:none; }
  .grid--swipe > *{
    flex:0 0 78%;          /* 次が少しはみ出す幅 */
    scroll-snap-align:start;
  }
}


/* ────────────────────────────────────────────
   6. 相談ボタンの光り

   1画面に1つだけ。複数が光ると安っぽくなります。
   ──────────────────────────────────────────── */
.btn--pulse{ position:relative; }
.btn--pulse::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  border-radius:inherit;
  pointer-events:none;
  animation:btnPulse 2.4s ease-in-out infinite;
}
@keyframes btnPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,169,106,.4); }
  50%    { box-shadow:0 0 0 12px rgba(201,169,106,0); }
}
@media (prefers-reduced-motion: reduce){
  .btn--pulse::after{ animation:none; }
}