/* ============================================================
   畳替えシミュレーション 専用スタイル
   ../styles.css のデザイントークンを前提に .sim- 接頭辞で定義
   ============================================================ */

.sim-band{background:var(--paper);padding-block:clamp(40px,6vw,80px) 0;}
.sim-band > .weave--thin{margin-top:clamp(40px,6vw,72px);}
.sim-app{max-width:880px;margin-inline:auto;}

/* ---------- プログレス ---------- */
.sim-progress{margin-bottom:clamp(28px,4vw,44px);}
.sim-progress__bar{height:9px;background:var(--washi-2);border:1px solid var(--line);border-radius:99px;overflow:hidden;}
#simFill{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(45deg, var(--igusa) 0 6px, var(--igusa-deep) 6px 12px);
  transition:width .55s cubic-bezier(.2,.7,.2,1);
}
.sim-progress__dots{
  list-style:none;margin:.8rem 0 0;padding:0;
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--sumi-soft);
}
.sim-progress__dots li{display:flex;flex-direction:column;align-items:center;gap:.45em;flex:1;}
.sim-progress__dots li::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--line);transition:.3s;
}
.sim-progress__dots li.is-done::before{background:var(--igusa);border-color:var(--igusa);}
.sim-progress__dots li.is-current{color:var(--igusa-deep);font-weight:500;}
.sim-progress__dots li.is-current::before{border-color:var(--igusa);box-shadow:0 0 0 3px rgba(107,122,79,.2);}

/* ---------- ステージ・パネル遷移 ---------- */
.sim-stage{min-height:380px;}
.sim-panel{animation:simEnter .45s cubic-bezier(.2,.7,.2,1) both;}
.sim-panel--back{animation-name:simEnterBack;}
.sim-panel--leave{animation:simLeave .2s ease both;}
@keyframes simEnter{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:none;}}
@keyframes simEnterBack{from{opacity:0;transform:translateX(-28px);}to{opacity:1;transform:none;}}
@keyframes simLeave{to{opacity:0;transform:translateX(-16px);}}

.sim-stepno{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--igusa-deep);margin-bottom:1em;
}
.sim-stepno::before{content:"";width:24px;height:1px;background:var(--igusa);}
.sim-title{font-size:clamp(1.45rem,3vw,2rem);font-weight:500;letter-spacing:.05em;}
.sim-lead{margin-top:.8rem;color:var(--sumi-soft);font-size:.96rem;max-width:38em;}

/* ---------- チップ（年数・症状） ---------- */
.sim-group{margin-top:1.9rem;}
.sim-group__label{
  display:block;font-weight:700;font-size:.9rem;letter-spacing:.05em;margin-bottom:.8rem;
}
.sim-group__label small{font-weight:400;color:var(--sumi-soft);font-size:.78rem;margin-left:.4em;}
.sim-chips{display:flex;flex-wrap:wrap;gap:.6rem;}
.sim-chip{
  font-family:var(--font-body);font-size:.92rem;font-weight:500;color:var(--sumi);
  background:var(--washi);border:1.5px solid var(--line);border-radius:99px;
  padding:.62em 1.25em;cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.sim-chip:hover{border-color:var(--igusa-soft);transform:translateY(-2px);}
.sim-chip:active{transform:scale(.97);}
.sim-chip.is-selected{
  background:var(--igusa);border-color:var(--igusa);color:#fff;
  animation:simChipPop .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes simChipPop{50%{transform:scale(1.06);}}

/* ---------- 選択カード ---------- */
.sim-cards{display:grid;gap:14px;margin-top:1.8rem;}
.sim-cards--method{grid-template-columns:repeat(3,1fr);}
.sim-cards--size{grid-template-columns:repeat(4,1fr);}
.sim-cards--omote{grid-template-columns:repeat(4,1fr);}
.sim-cards--heri{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));}

.sim-card{
  position:relative;text-align:left;font-family:var(--font-body);color:var(--sumi);
  background:var(--washi);border:1.5px solid var(--line);border-radius:6px;
  padding:1.15rem 1.1rem 1.2rem;cursor:pointer;
  display:flex;flex-direction:column;gap:.45rem;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sim-card:hover{transform:translateY(-3px);border-color:var(--igusa-soft);box-shadow:0 16px 30px -22px rgba(44,49,39,.55);}
.sim-card:active{transform:translateY(-1px) scale(.99);}
.sim-card.is-selected{border-color:var(--igusa);box-shadow:0 0 0 3px rgba(107,122,79,.16), 0 16px 30px -22px rgba(44,49,39,.5);}
.sim-card::after{
  content:"✓";position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;
  background:var(--igusa);color:#fff;display:grid;place-items:center;
  font-size:.85rem;font-weight:700;box-shadow:0 4px 10px -4px rgba(84,98,61,.8);
  transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sim-card.is-selected::after{transform:scale(1);}

.sim-card__tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--igusa);text-transform:uppercase;}
.sim-card__name{font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:.06em;line-height:1.3;}
.sim-card__desc{font-size:.84rem;color:var(--sumi-soft);line-height:1.7;flex:1;}
.sim-card__sub{font-size:.78rem;color:var(--sumi-soft);font-family:var(--mono);letter-spacing:.04em;}
.sim-card__cycle{
  font-size:.76rem;color:var(--sumi-soft);
  border-top:1px dashed var(--line);padding-top:.7em;margin-top:.2rem;
}
.sim-card__cycle b{font-family:var(--font-display);color:var(--igusa-deep);font-size:.95rem;margin-right:.3em;}

.sim-badge{
  position:absolute;top:-11px;left:12px;
  background:var(--gold);color:#fff;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  padding:.4em .85em;border-radius:2px;box-shadow:0 4px 10px -4px rgba(168,136,78,.7);
}

/* 見立てアドバイス */
.sim-advice{
  margin-top:1.6rem;display:flex;align-items:flex-start;gap:.9em;
  background:rgba(168,136,78,.08);border:1px solid rgba(168,136,78,.4);border-radius:5px;
  padding:.95em 1.2em;
}
.sim-advice__badge{
  flex:none;font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.18em;
  color:#fff;background:var(--gold);border-radius:2px;padding:.35em .7em;margin-top:.15em;
}
.sim-advice p{font-size:.92rem;line-height:1.8;}
.sim-advice b{color:var(--igusa-deep);}

/* 広さカードのサムネイル */
.sim-thumb{display:block;background:var(--washi-2);border-radius:4px;padding:8px;}
.sim-thumb svg{display:block;width:100%;height:64px;}
.sim-thumb--q{
  display:grid;place-items:center;height:80px;
  font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--igusa-soft);
}

/* 色スウォッチ */
.sim-swatch{display:block;height:54px;border-radius:3px;border:1px solid rgba(44,49,39,.14);}
.sim-swatch--heri{height:22px;}

/* ライブミニプレビュー */
.sim-mini{
  margin-top:1.8rem;display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;
  background:var(--washi-2);border:1px solid var(--line);border-radius:6px;
  padding:1rem 1.3rem;
}
.sim-mini__label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;color:var(--igusa-deep);
  writing-mode:vertical-rl;text-transform:uppercase;
}
.sim-mini__fig{flex:1;min-width:180px;max-width:240px;}
.sim-mini__fig svg{display:block;width:100%;filter:drop-shadow(0 8px 14px rgba(44,49,39,.22));}
.sim-mini__note{font-size:.78rem;color:var(--sumi-soft);flex:1;min-width:10em;}

/* 裏返しの説明 */
.sim-explain{
  margin-top:1.8rem;background:var(--washi);border:1.5px solid var(--line);border-radius:6px;
  padding:clamp(18px,3vw,28px);display:grid;grid-template-columns:230px 1fr;gap:1.6rem;align-items:center;
}
.sim-explain p{font-size:.95rem;line-height:1.95;color:var(--sumi);}
.sim-explain b{color:var(--igusa-deep);}
.sim-uradiag{display:block;width:100%;}

/* ---------- 見立て中インタースティシャル ---------- */
.sim-diagnose{text-align:center;padding:4.5rem 1rem;}
.sim-diagnose__mark{
  width:66px;height:66px;border-radius:50%;margin:0 auto 1.4rem;
  background:var(--igusa);color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.8rem;font-weight:700;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
  animation:simPulse 1.15s ease-in-out infinite;
}
@keyframes simPulse{50%{transform:scale(1.1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 0 0 14px rgba(107,122,79,.12);}}
.sim-diagnose p{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.08em;color:var(--sumi);}
.sim-dots{display:inline-flex;gap:5px;margin-left:.5em;vertical-align:baseline;}
.sim-dots i{
  width:5px;height:5px;border-radius:50%;background:var(--igusa);
  animation:simDot 1.1s ease-in-out infinite;
}
.sim-dots i:nth-child(2){animation-delay:.18s;}
.sim-dots i:nth-child(3){animation-delay:.36s;}
@keyframes simDot{30%{transform:translateY(-5px);opacity:.5;}}

/* ---------- 結果：敷き図 ---------- */
.sim-result__badge{
  display:inline-flex;align-items:baseline;gap:.7em;margin-top:1rem;
  font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:.1em;
  color:var(--igusa-deep);
}
.sim-result__badge small{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--sumi-soft);font-weight:400;}

.sim-figure{
  margin-top:1.5rem;background:var(--washi-2);border:1px solid var(--line);border-radius:8px;
  padding:clamp(18px,3.5vw,32px);
}
.sim-room{display:block;max-width:500px;margin:0 auto;filter:drop-shadow(0 20px 30px rgba(44,49,39,.28));}

/* 張り替えワイプ：古い畳がめくれて新しい畳が現れる */
.sim-room .sim-mat__old{
  transform-box:fill-box;transform-origin:100% 50%;
  transition:transform .62s cubic-bezier(.65,.05,.35,1);
}
.sim-room .sim-mat--v .sim-mat__old{transform-origin:50% 100%;}
.sim-room.is-after .sim-mat__old{transform:scaleX(.004);}
.sim-room.is-after .sim-mat--v .sim-mat__old{transform:scaleX(1) scaleY(.004);}
.sim-room.sim-noanim .sim-mat__old{transition:none !important;}

/* 仕上げの光沢の一閃 */
.sim-sheen{opacity:0;pointer-events:none;transform-box:fill-box;}
.sim-room.sheen-run .sim-sheen{animation:simSheen 1.15s ease both;}
@keyframes simSheen{
  0%{opacity:0;transform:translateX(-60%);}
  25%{opacity:1;}
  100%{opacity:0;transform:translateX(60%);}
}

.sim-controls{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;}
.sim-toggle{
  display:inline-flex;border:1.5px solid var(--sumi);border-radius:3px;overflow:hidden;background:var(--paper);
}
.sim-toggle button{
  font-family:var(--font-body);font-size:.85rem;font-weight:700;letter-spacing:.05em;
  padding:.6em 1.3em;background:transparent;border:none;cursor:pointer;color:var(--sumi-soft);
  transition:background .2s ease, color .2s ease;
}
.sim-toggle button.is-on{background:var(--sumi);color:var(--washi);}

.sim-notes{margin:1.3rem 0 0;padding:0;list-style:none;font-size:.84rem;color:var(--sumi-soft);display:flex;flex-direction:column;gap:.3em;}
.sim-notes li::before{content:"※ ";color:var(--gold);}

/* ---------- 結果：まとめ ---------- */
.sim-summary{margin:2.2rem 0 0;border-top:1px solid var(--line);}
.sim-summary__row{
  display:grid;grid-template-columns:140px 1fr auto;gap:1rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--line);
}
.sim-summary__row dt{margin:0;font-weight:700;font-size:.88rem;letter-spacing:.04em;}
.sim-summary__row dd{margin:0;font-size:.96rem;color:var(--sumi-soft);}
.sim-summary__row dd b{color:var(--sumi);font-weight:700;font-family:var(--font-display);letter-spacing:.06em;}
.sim-edit{
  background:none;border:none;cursor:pointer;font-family:var(--font-body);
  color:var(--igusa-deep);font-size:.8rem;font-weight:700;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;white-space:nowrap;
}
.sim-edit:hover{color:var(--igusa);}

/* ---------- 結果：連絡CTA ---------- */
.sim-cta{
  margin-top:2.8rem;position:relative;overflow:hidden;
  background:var(--sumi);color:var(--washi);border-radius:8px;
  padding:clamp(30px,5vw,52px) clamp(20px,4vw,48px);text-align:center;
}
.sim-cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:9px;
  background:repeating-linear-gradient(45deg, var(--igusa) 0 6px, var(--igusa-deep) 6px 12px);
}
.sim-cta__kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--igusa-soft);margin-bottom:1.1em;
}
.sim-cta__kicker::before,.sim-cta__kicker::after{content:"";width:22px;height:1px;background:var(--igusa-soft);}
.sim-cta h3{font-size:clamp(1.4rem,3.4vw,1.9rem);font-weight:500;letter-spacing:.06em;}
.sim-cta p{color:rgba(245,241,230,.75);margin-top:1rem;font-size:.95rem;line-height:2;}
.sim-cta__tel{
  display:inline-block;margin-top:1.4rem;
  font-family:var(--font-display);font-weight:700;letter-spacing:.04em;
  font-size:clamp(2rem,7vw,2.9rem);color:#fff;line-height:1.2;
  transition:opacity .2s ease;
}
.sim-cta__tel:hover{opacity:.85;}
.sim-cta__hours{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  color:rgba(245,241,230,.6);margin-top:.7em;
}
.sim-cta__actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2rem;}
.sim-cta .btn--ghost{color:var(--washi);border-color:rgba(245,241,230,.55);}
.sim-cta .btn--ghost:hover{background:var(--washi);color:var(--sumi);border-color:var(--washi);}
.sim-cta__memo{margin-top:1.6rem;font-size:.8rem;color:rgba(245,241,230,.55);}

/* ---------- ナビ ---------- */
.sim-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.4rem;}
.sim-nav .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}

.sim-noscript{
  margin-top:2rem;text-align:center;background:var(--washi);border:1.5px solid var(--line);
  border-radius:6px;padding:2rem;line-height:2.2;
}
.sim-noscript a{color:var(--igusa-deep);}

/* ---------- レスポンシブ ---------- */
@media (max-width:700px){
  .sim-cards--method{grid-template-columns:1fr;}
  .sim-cards--size{grid-template-columns:repeat(2,1fr);}
  .sim-cards--omote{grid-template-columns:repeat(2,1fr);}
  .sim-explain{grid-template-columns:1fr;}
  .sim-uradiag{max-width:260px;margin-inline:auto;}
  .sim-summary__row{grid-template-columns:96px 1fr auto;gap:.7rem;}
  .sim-progress__dots{font-size:.56rem;}
  .sim-nav{
    position:sticky;bottom:0;z-index:5;margin-top:1.8rem;
    padding-block:.85rem;
    background:linear-gradient(to top, var(--paper) 75%, rgba(251,249,243,0));
  }
  .sim-nav .btn{flex:1;justify-content:center;}
  .sim-cta__actions .btn{width:100%;justify-content:center;}
}

/* ---------- アニメーション抑制 ---------- */
@media (prefers-reduced-motion:reduce){
  .sim-panel,.sim-panel--back,.sim-panel--leave{animation:none;}
  .sim-chip.is-selected{animation:none;}
  .sim-diagnose__mark,.sim-dots i{animation:none;}
  .sim-room .sim-mat__old{transition:opacity .3s ease !important;transform:none !important;}
  .sim-room.is-after .sim-mat__old{opacity:0;}
  .sim-room.sheen-run .sim-sheen{animation:none;}
  #simFill{transition:none;}
}