/* polish-1017：サイト全体の「仕上げ」の層（配置は変えない。色・影・動き・手ざわりだけ）
   元は CareManaMikata_Source/polish_1017.css。patch_polish_1017.py が assets/polish.css に置き、全ページの </head> の前で読む。
   決まり：幅・高さ・余白・並び・文字の大きさは触らない（transform・opacity・影・色・transition だけ）。 */
:root{
  --pl-ease:cubic-bezier(.2,.75,.25,1);
  --pl-dur:.22s;
  --pl-sh-rest:0 1px 2px rgba(69,40,46,.05),0 3px 10px -4px rgba(69,40,46,.08);
  --pl-sh-lift:0 2px 4px rgba(69,40,46,.05),0 14px 30px -10px rgba(140,58,77,.24);
  --pl-sh-lift-g:0 2px 4px rgba(47,102,80,.06),0 14px 30px -10px rgba(47,102,80,.26);
  --pl-sh-btn:0 1px 0 rgba(255,255,255,.18) inset,0 8px 18px -8px rgba(69,40,46,.42);
}

/* 文字の描き方・選んだ文字の色・スクロールバーの色・リンクの下線 */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scrollbar-color:#dcbcc3 transparent;-webkit-tap-highlight-color:transparent}
::selection{background:#f5d2da;color:#47222c}
a{text-underline-offset:.22em;text-decoration-thickness:from-font}

/* ページの移り変わりを、ふわっと（対応しているブラウザだけ。読み込みは待たせない） */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:var(--pl-ease)}
}

/* ヘッダー：下へ読み進めたら、薄い影で浮かせる（polish.js が html に pl-scrolled を付ける） */
.site-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(69,40,46,.09),rgba(69,40,46,0));opacity:0;transition:opacity .3s var(--pl-ease)}
.pl-scrolled .site-header::after{opacity:1}

/* TOPのヒーロー：うすい方眼と、やわらかい光（絵や文字の位置は変えない） */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 88% 18%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),
    radial-gradient(40% 50% at 8% 92%,rgba(234,149,64,.10),rgba(234,149,64,0) 70%),
    linear-gradient(rgba(168,70,92,.045) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(168,70,92,.045) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.hero-bubble{box-shadow:0 1px 2px rgba(69,40,46,.05),0 18px 40px -16px rgba(140,58,77,.28)}

/* 動きの決まり：押せるものは、同じ速さ・同じ曲線で応える */
:is(.btn,.today-btn,.tp-cards a,.tt-card,.tt-go,.opsbox-item,.stampline,.stampbox-btn,.sharebtn,.grow-go-btn,.hb-cta,.tocbox-btn,
    .memocard-btn,.homeapp-btn,.pick2-card,.as-open,a.an-card,.an-chips button,.scene-nav2 a,.kh-card,.sd-vote,.sd-donelink,
    .phrase-card,.card,.copy,.tool-card,.tag,.chip){
  transition:translate var(--pl-dur) var(--pl-ease),scale var(--pl-dur) var(--pl-ease),transform var(--pl-dur) var(--pl-ease),box-shadow var(--pl-dur) var(--pl-ease),border-color var(--pl-dur) var(--pl-ease),
             background-color var(--pl-dur) var(--pl-ease),color var(--pl-dur) var(--pl-ease),opacity var(--pl-dur) var(--pl-ease)}
:is(.tp-cards a,.tt-card,.today-btn,.kh-card,.opsbox-item) :is(svg,img){transition:scale .35s var(--pl-ease),rotate .35s var(--pl-ease)}

@media (hover:hover) and (pointer:fine){
  /* 1枚で押すカード：少し持ち上がる（translate を使う：入場の動きの transform と重ならない） */
  html :is(.today-btn,.tp-cards a,.tt-card,.opsbox-item,.stampline,a.an-card,.kh-card,.pick2-card):hover{transform:none;translate:0 -3px;box-shadow:var(--pl-sh-lift)}
  html :is(.tt-card.tt-gm,.today-btn):hover{box-shadow:var(--pl-sh-lift-g)}
  html :is(.tp-cards a,.tt-card,.today-btn,.kh-card,.opsbox-item):hover :is(svg,img){scale:1.06;rotate:-2deg}
  /* 色のついたボタン：少し浮いて、影が落ちる */
  html :is(.btn,.stampbox-btn,.grow-go-btn,.hb-cta,.tocbox-btn,.memocard-btn):hover{transform:none;translate:0 -2px;box-shadow:var(--pl-sh-btn);opacity:1}
  html .sharebtn:hover{translate:0 -2px;opacity:1;filter:saturate(1.1) brightness(1.04)}
  /* 道具の大きなカード：持ち上げず、影だけ深く */
  html .tool-card:hover{box-shadow:0 2px 4px rgba(69,40,46,.04),0 20px 44px -22px rgba(69,40,46,.30)}
}
/* 押した瞬間：沈む（指でもマウスでも） */
html :is(.btn,.stampbox-btn,.grow-go-btn,.hb-cta,.tocbox-btn,.memocard-btn,.sharebtn,.copy,.sd-vote,.homeapp-btn,.an-chips button):active{translate:0 1px;scale:.98;transition-duration:.06s}
html :is(.today-btn,.tp-cards a,.tt-card,.opsbox-item,.stampline,a.an-card,.kh-card,.scene-nav2 a):active{translate:0 0;scale:.985;transition-duration:.06s}

/* 下へ読み進めたときに、そっと現れる（polish.js が付ける。JS が動かないときは、最初から見えている） */
.pl-rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--pl-ease),transform .6s var(--pl-ease);transition-delay:var(--pl-d,0s)}
.pl-rv.pl-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
  .pl-rv{opacity:1;transform:none}
  html :is(.today-btn,.tp-cards a,.tt-card,.opsbox-item,.stampline,a.an-card,.kh-card,.pick2-card,.btn,.sharebtn):is(:hover,:active){translate:none;scale:none}
}
@media print{.pl-rv{opacity:1!important;transform:none!important}.hero::before,.site-header::after{display:none}}