/* /assets/css/comment.css（作り直し：normal/overlay 両対応 + WIN専用テキスト位置トークン）
   =========================================================
   fudosha.net comment.css
   - Mini note (comment)
   - 背景: normal(pc/sp svg) / win(png)
   - 文字位置は「通常フロー」と「overlay」で別トークンに分離
   - WINだけ位置調整できる（normalにもWIN専用paddingを持たせる）→minh
   ========================================================= */

/* =========================================================
   0) Global tokens
   ========================================================= */
:root{
  /* Typography */
  --comment-font: "wapuro","tspc98","MOBO", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
  --comment-fs-pc: clamp(calc(16px * var(--pc-ui-scale, 1)), 1.6vw, calc(24px * var(--pc-ui-scale, 1)));
  --comment-fs-sp: clamp(10px, 4.2vw, 11px);
  --comment-fw: 600;
  --comment-lh: 1.35;
  --comment-track: 0.06em;

  --comment-text: var(--text);
  --comment-stroke: transparent;
  --comment-stroke-w: 0px;

  /* Interaction */
  --comment-press-bright: 1.10;
  --comment-dismiss-bright: 1.25;

  /* Layout width */
  --comment-w: var(--bgw);
  --comment-max: var(--max);

  /* Z */
  --comment-z: 1400;

  /* BG assets */
  --comment-bubble-pc: url("/assets/img/bubble-pc.svg");
  --comment-bubble-sp: url("/assets/img/bubble-sp.svg");
  --comment-bubble-win: url("/assets/img/bubble-win.png");

  /* Default bubble */
  --comment-bubble: var(--comment-bubble-pc);

  /* =======================================================
     A) Normal flow（固定ページで #siteComment に居るとき）
     - ここをいじれば、固定ページの見た目が動く
     - WINだけ動かしたい場合は “w” 側を触る
     ======================================================= */

  /* normal（非WIN）padding / min-height */
  --comment-n-pad-t-pc: calc(10px * var(--pc-ui-scale, 1));
  --comment-n-pad-r-pc: calc(10px * var(--pc-ui-scale, 1));
  --comment-n-pad-b-pc: calc(10px * var(--pc-ui-scale, 1));
  --comment-n-pad-l-pc: calc(10px * var(--pc-ui-scale, 1));
  --comment-n-minh-pc: calc(90px * var(--pc-ui-scale, 1));

  --comment-n-pad-t-sp: 8px;
  --comment-n-pad-r-sp: 10px;
  --comment-n-pad-b-sp: 10px;
  --comment-n-pad-l-sp: 10px;
  --comment-n-minh-sp: 48px;

  /* WIN padding / min-height（固定ページの “WIN文字位置” はここ） */
  --comment-w-pad-t-pc: calc(20px * var(--pc-ui-scale, 1));  /* ←WIN文字を下げたいなら増やす */
  --comment-w-pad-r-pc: calc(10px * var(--pc-ui-scale, 1));
  --comment-w-pad-b-pc: calc(10px * var(--pc-ui-scale, 1));
  --comment-w-pad-l-pc: calc(10px * var(--pc-ui-scale, 1));  /* ←WIN文字を右へ/左へはここ */
  --comment-w-minh-pc: calc(30px * var(--pc-ui-scale, 1));   /* ←WIN背景の高さ（固定ページ） */

  --comment-w-pad-t-sp: 25px;
  --comment-w-pad-r-sp: 10px;
  --comment-w-pad-b-sp: 10px;
  --comment-w-pad-l-sp: 10px;
  --comment-w-minh-sp: 50px;

  /* =======================================================
     B) Overlay（トップページで hero に載る mini-note--overlay）
     - WIN文字位置（overlay）はここ
     ======================================================= */

  /* overlay: box geometry */
  --comment-ol-top-pc: 0%;
  --comment-ol-top-sp: 0%;
  --comment-ol-w-pc: 90%;
  --comment-ol-w-sp: 90%;

  /* overlay: aspect ratio（背景の高さはARで決まる） */
  --comment-ol-ar-pc: 8 / 1;
  --comment-ol-ar-sp: 8 / 1;

  /* overlay: text inset（非WIN） */
  --comment-ol-inset-t-pc: 2%;
  --comment-ol-inset-l-pc: 3%;
  --comment-ol-inset-r-pc: 2%;

  --comment-ol-inset-t-sp: 1.5%;
  --comment-ol-inset-l-sp: 3%;
  --comment-ol-inset-r-sp: 2%;

  /* overlay: WIN text inset（トップページWIN文字位置はここ） */
  --comment-ol-inset-t-win-pc: 3.5%;
  --comment-ol-inset-l-win-pc: 3%;
  --comment-ol-inset-r-win-pc: 2%;

  --comment-ol-inset-t-win-sp: 7.5%;
  --comment-ol-inset-l-win-sp: 3%;
  --comment-ol-inset-r-win-sp: 2%;

  /* overlay: WIN aspect ratio（トップページWIN背景の高さはここ） */
  --comment-ol-ar-win-pc: 8 / 0.6;
  --comment-ol-ar-win-sp: 8 / 0.6;

  /* Wobble */
  --comment-float-amp-pc: calc(1.5px * var(--pc-ui-scale, 1));
  --comment-float-amp-sp: 1px;
  --comment-float-dur: 5s;
}

@media (max-width: 767px){
  :root{
    --comment-bubble: var(--comment-bubble-sp);
  }
}

/* WIN bubble state（class or data） */
.mini-note.is-win-bubble,
.mini-note[data-bubble="win"]{
  --comment-bubble: var(--comment-bubble-win);
}

/* =========================================================
   1) Normal flow（固定ページ：#siteComment 配下など）
   - 実際に効くのは .mini-note-inner の padding / min-height
   - ここは WIN 専用トークンで上書きできるようにしてある
   ========================================================= */
.mini-note{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;

  /* normal の既定値を採用（PC） */
  --comment-pad-t: var(--comment-n-pad-t-pc);
  --comment-pad-r: var(--comment-n-pad-r-pc);
  --comment-pad-b: var(--comment-n-pad-b-pc);
  --comment-pad-l: var(--comment-n-pad-l-pc);
  --comment-minh:  var(--comment-n-minh-pc);
}

/* SP: normal の既定値を採用（SP） */
@media (max-width: 767px){
  .mini-note{
    --comment-pad-t: var(--comment-n-pad-t-sp);
    --comment-pad-r: var(--comment-n-pad-r-sp);
    --comment-pad-b: var(--comment-n-pad-b-sp);
    --comment-pad-l: var(--comment-n-pad-l-sp);
    --comment-minh:  var(--comment-n-minh-sp);
  }
}

/* WIN: normal flow の padding/min-height を WIN用に差し替え */
.mini-note.is-win-bubble,
.mini-note[data-bubble="win"]{
  --comment-pad-t: var(--comment-w-pad-t-pc);
  --comment-pad-r: var(--comment-w-pad-r-pc);
  --comment-pad-b: var(--comment-w-pad-b-pc);
  --comment-pad-l: var(--comment-w-pad-l-pc);
  --comment-minh:  var(--comment-w-minh-pc);
}

@media (max-width: 767px){
  .mini-note.is-win-bubble,
  .mini-note[data-bubble="win"]{
    --comment-pad-t: var(--comment-w-pad-t-sp);
    --comment-pad-r: var(--comment-w-pad-r-sp);
    --comment-pad-b: var(--comment-w-pad-b-sp);
    --comment-pad-l: var(--comment-w-pad-l-sp);
    --comment-minh:  var(--comment-w-minh-sp);
  }
}

.mini-note-inner{
  width: var(--comment-w);
  max-width: var(--comment-max);
  margin: 0;

  /* ★固定ページの文字位置（WINだけ含む）はここで決まる */
  padding: var(--comment-pad-t) var(--comment-pad-r) var(--comment-pad-b) var(--comment-pad-l);

  background: var(--comment-bubble) no-repeat left top;
  background-size: 100% 100%;

  min-height: var(--comment-minh);

  box-sizing: border-box;

  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;

  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;

  font-family: var(--comment-font);
  font-weight: var(--comment-fw);
  letter-spacing: var(--comment-track);
  line-height: var(--comment-lh);
  font-size: var(--comment-fs-pc);
  color: var(--comment-text);

  -webkit-text-stroke: var(--comment-stroke-w) var(--comment-stroke);
  text-shadow: none;

  cursor: pointer;
}

.mini-note-inner *{
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 767px){
  .mini-note-inner{
    font-size: var(--comment-fs-sp);
  }
}

.mini-note-text{
  margin: 0;
}

/* =========================================================
   2) Overlay mode（トップページ hero 上）
   - ここでだけ aspect-ratio / inset が使われる
   ========================================================= */
.mini-note.mini-note--overlay{
  /* map tokens -> runtime vars */
  --comment-ol-w: var(--comment-ol-w-pc);
  --comment-ol-top: var(--comment-ol-top-pc);
  --comment-ol-ar: var(--comment-ol-ar-pc);

  --comment-ol-inset-t: var(--comment-ol-inset-t-pc);
  --comment-ol-inset-l: var(--comment-ol-inset-l-pc);
  --comment-ol-inset-r: var(--comment-ol-inset-r-pc);

  --comment-float-amp: var(--comment-float-amp-pc);

  position: absolute;
  left: 0;
  right: 0;
  top: var(--comment-ol-top);
  z-index: var(--comment-z);
  margin: 0;
  padding: 0;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (max-width: 767px){
  .mini-note.mini-note--overlay{
    --comment-ol-w: var(--comment-ol-w-sp);
    --comment-ol-top: var(--comment-ol-top-sp);
    --comment-ol-ar: var(--comment-ol-ar-sp);

    --comment-ol-inset-t: var(--comment-ol-inset-t-sp);
    --comment-ol-inset-l: var(--comment-ol-inset-l-sp);
    --comment-ol-inset-r: var(--comment-ol-inset-r-sp);

    --comment-float-amp: var(--comment-float-amp-sp);
  }
}

/* WIN overlay overrides */
.mini-note.is-win-bubble.mini-note--overlay,
.mini-note[data-bubble="win"].mini-note--overlay{
  --comment-ol-ar: var(--comment-ol-ar-win-pc);

  /* ★トップページ overlay の WIN文字位置はここで決まる */
  --comment-ol-inset-t: var(--comment-ol-inset-t-win-pc);
  --comment-ol-inset-l: var(--comment-ol-inset-l-win-pc);
  --comment-ol-inset-r: var(--comment-ol-inset-r-win-pc);
}

@media (max-width: 767px){
  .mini-note.is-win-bubble.mini-note--overlay,
  .mini-note[data-bubble="win"].mini-note--overlay{
    --comment-ol-ar: var(--comment-ol-ar-win-sp);

    --comment-ol-inset-t: var(--comment-ol-inset-t-win-sp);
    --comment-ol-inset-l: var(--comment-ol-inset-l-win-sp);
    --comment-ol-inset-r: var(--comment-ol-inset-r-win-sp);
  }
}

.mini-note.mini-note--overlay .mini-note-inner{
  width: var(--comment-ol-w);
  max-width: none;
  margin: 0 auto;

  aspect-ratio: var(--comment-ol-ar);
  height: auto;

  display: grid;
  place-items: start stretch;

  position: relative;
  overflow: hidden;

  padding: 0;

  background: var(--comment-bubble) no-repeat left top;
  background-size: 100% 100%;

  cursor: pointer;
}

.mini-note.mini-note--overlay .mini-note-text{
  margin: 0;

  /* ★overlay の文字位置はここ（WINなら上で差し替え済み） */
  padding-top: var(--comment-ol-inset-t);
  padding-left: var(--comment-ol-inset-l);
  padding-right: var(--comment-ol-inset-r);
}

/* =========================================================
   3) Wobble（overlay only）
   ========================================================= */
.mini-note.mini-note--overlay:not(.is-dismiss) .mini-note-inner{
  animation: commentFloat var(--comment-float-dur) ease-in-out infinite;
  will-change: transform;
}

@keyframes commentFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(calc(var(--comment-float-amp) * -1)); }
  100%{ transform: translateY(0); }
}

/* =========================================================
   4) Interaction
   ========================================================= */
.mini-note.is-pressed .mini-note-inner{
  filter: brightness(var(--comment-press-bright));
}

.mini-note.is-dismiss{
  pointer-events: none;
}

.mini-note.is-dismiss .mini-note-inner{
  filter: brightness(var(--comment-dismiss-bright));
  opacity: 0;
  transform: translateY(2px);
  transition: filter var(--motion-comment-filter, 220ms) ease-out,
              opacity var(--motion-ui-fade, 800ms) ease-out,
              transform var(--motion-ui-fade, 800ms) ease-out;
}

@media (prefers-reduced-motion: reduce){
  .mini-note.mini-note--overlay:not(.is-dismiss) .mini-note-inner{
    animation: none;
  }
  .mini-note.is-dismiss .mini-note-inner{
    transition: none;
  }
}