/* ==========================================================================
   X API 月額計算機（/tools/x-api-cost/）専用
   site.css のトークン・部品（.page-head .crop .card--feature .card--night .theme-night .btn .chip
   .fold .rows .ph-list .voice の考え方 .more .note）の上に、
   入力（スライダー＋数値欄）・結果パネル（夜色の「電卓」）・内訳の横棒・URL の四角・下の帯だけを足す。
   色と書体は var(--*) だけ。ページ専用のクラスは xc- で始める。
   動かす指定は @media (prefers-reduced-motion:no-preference) の中だけ。
   ========================================================================== */

/* ---------- page head（机の切り抜き＋電卓を持ったちび） ---------- */
.xc-head{padding-block:var(--s-6) var(--s-6)}
.xc-head .page-head__visual{--crop-w:260px}
/* 実験室（/lab/）と同じ机の切り抜きにならないよう、机の上（ノート PC とランプ）に寄せる。ちびも大きめ */
.xc-head .crop--desk{--bs:600%;--bx:61%;--by:64%}
.xc-head__chibi{position:absolute;right:calc(min(100%,var(--crop-w)) - 64px);bottom:-10px;width:auto;height:230px;
  filter:drop-shadow(0 6px 10px rgba(43,33,65,.18))}
@media (max-width:760px){
  .xc-head{padding-block:var(--s-5) var(--s-5)}
  .xc-head .page-head__text{gap:var(--s-3)}
  .xc-head .lead{font-size:var(--t-m)}
}

/* ---------- 計算機のレイアウト ----------
   PC（901px 以上）: 左に入力と実績、右に結果パネル。パネルは画面の高さにかかわらずついてくる
   （低い画面ではパネルの中だけスクロール。液晶はパネルの頭にあるので、いつも見える）。
   1列（900px 以下）: 液晶 → 入力 → 内訳とコピー → 実績。.xc-side と .xc-panel を display:contents にして並べ替える */
.xc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);grid-template-areas:"inputs side" "real side";
  gap:var(--s-6) var(--s-7);align-items:start}
.xc-side{grid-area:side;position:sticky;top:calc(var(--head-h) + var(--s-4))}
.xc-inputs{grid-area:inputs;display:grid;gap:var(--s-5);min-width:0;container:xcin/inline-size}
.xc-real{grid-area:real}
@media (max-width:1080px) and (min-width:901px){
  .xc-layout{grid-template-columns:minmax(0,1fr) minmax(0,23rem);column-gap:var(--s-5)}
}
@media (max-width:900px){
  .xc-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:var(--s-5)}
  .xc-layout>.xc-side,.xc-side>.xc-panel{display:contents}
  .xc-panel__top{order:1}
  .xc-inputs{order:2;grid-area:auto}
  .xc-panel__more{order:3}
  .xc-real{order:4;grid-area:auto}
  /* 下の帯（高さ約 60px）の裏にフォーカスが隠れないように */
  html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* ---------- 結果パネル（夜色の電卓） ---------- */
.xc-panel{display:grid;gap:var(--s-4);padding:var(--s-5) var(--s-5) var(--s-4);border-radius:var(--r-l);box-shadow:var(--sh-2);
  max-block-size:calc(100dvh - var(--head-h) - var(--s-4) * 2);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.xc-panel__top,.xc-panel__more{display:grid;gap:var(--s-3);min-width:0}
.xc-panel__top{position:relative}
.xc-panel__chibi{display:none}
@media (max-width:900px){
  /* 1列では、液晶と内訳がそれぞれ夜色の札になる（色は .xc-panel の theme-night から受け継ぐ） */
  .xc-panel__top,.xc-panel__more{padding:var(--s-5) var(--s-4) var(--s-4);border-radius:var(--r-l);background:var(--paper);color:var(--ink);box-shadow:var(--sh-2)}
}
@media (max-width:760px){
  /* スマホは見出しの絵が出ないので、電卓を持ったちびが液晶の右上からのぞく */
  .xc-panel__top{margin-top:var(--s-6)}
  .xc-panel__chibi{display:block;position:absolute;right:var(--s-3);top:-58px;width:auto;height:104px;pointer-events:none;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
  .xc-panel__h{padding-right:64px}
}
.xc-panel__h{font:700 var(--t-s)/1.4 var(--f-jp);letter-spacing:.06em;color:var(--ink-2)}
.xc-panel__h .num{font-size:1.05em}

/* 液晶: 電卓の画面と同じミント色で、数字を大きく */
.xc-lcd{container-type:inline-size;padding:var(--s-4) var(--s-5) var(--s-3);border-radius:var(--r-m);
  background:color-mix(in srgb,var(--paper) 62%,black);
  box-shadow:inset 0 2px 0 rgba(0,0,0,.28),inset 0 0 0 1px var(--line)}
.xc-total{--len:6;margin:0;color:var(--screen);
  font:400 min(4.75rem,calc(100cqi / (var(--len) * .54))) / 1 var(--f-pixel);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.xc-total .num{letter-spacing:inherit}
.xc-yen{margin-top:var(--s-2);font:700 var(--t-l)/1.3 var(--f-jp);color:var(--ink)}
.xc-yen .num{font-size:var(--t-xl);margin-inline:.1em}
.xc-yen small{font-size:var(--t-s);color:var(--ink-2);margin-left:.15em}
.xc-day{font-size:var(--t-s);color:var(--ink-2);line-height:1.7}
.xc-day .num{color:var(--ink)}
.xc-day__fx{display:block;font-size:var(--t-xs);color:var(--ink-3)}
.xc-day__fx .num{color:inherit}

/* 内訳の横棒 */
.xc-bars__h{margin-top:var(--s-2);font:700 var(--t-xs)/1.4 var(--f-jp);letter-spacing:.06em;color:var(--ink-2)}
.xc-bars{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.xc-bar{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) minmax(4.6em,auto);gap:var(--s-3);align-items:center;
  font-size:var(--t-xs);line-height:1.4}
.xc-bar__name{color:var(--ink-2)}
.xc-bar__track{height:12px;border-radius:var(--r-pill);background:var(--mist);overflow:hidden}
.xc-bar__fill{display:block;height:100%;border-radius:inherit;transform-origin:0 50%;transform:scaleX(var(--w,0));
  background:color-mix(in srgb,var(--lav-ink) 58%,var(--mist))}
.xc-bar__val{text-align:right;font-size:var(--t-s);color:var(--ink)}
.xc-bar.is-url .xc-bar__name{color:var(--pink-ink);font-weight:700}
/* URL 付きだけ明るく、斜線も入れる（色の差だけに頼らない） */
.xc-bar.is-url .xc-bar__fill{background:repeating-linear-gradient(135deg,var(--pink-ink) 0 5px,color-mix(in srgb,var(--pink-ink) 72%,white) 5px 8px)}
.xc-bar.is-url .xc-bar__val{color:var(--pink-ink)}
.xc-bar.is-zero .xc-bar__name,.xc-bar.is-zero .xc-bar__val{color:var(--ink-3)}

.xc-hint{font-size:var(--t-s);line-height:1.7;padding:var(--s-3) var(--s-4);border-radius:var(--r-s);
  background:color-mix(in srgb,var(--pink-ink) 14%,transparent);color:var(--ink)}
.xc-hint .num{color:var(--pink-ink)}
.xc-warn{font-size:var(--t-s);line-height:1.7;padding:var(--s-3) var(--s-4);border-radius:var(--r-s);
  border:1.5px solid var(--pink-ink);color:var(--ink)}

/* 参考：サエラの実績（.voice と同じ並び。入力の後ろの白地の札） */
.xc-real{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s-3);align-items:start;min-width:0;
  padding:var(--s-4) var(--s-5);border-radius:var(--r-m);background:var(--grad-soft)}
.xc-real>img{width:48px;height:48px;border-radius:50%;background:var(--grad-soft);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--rule)}
.xc-real__label{font:700 var(--t-xs)/1.4 var(--f-jp);letter-spacing:.06em;color:var(--pink-ink);margin:0 0 .3em}
.xc-real__body{font-size:var(--t-s);line-height:1.75}
.xc-real__body .num{font-size:1.15em;color:var(--lav-ink);margin-inline:.05em}
.xc-real__more>summary{display:inline-flex;align-items:center;gap:.5em;min-height:44px;cursor:pointer;list-style:none;
  font-size:var(--t-xs);font-weight:700;color:var(--lav-ink)}
.xc-real__more>summary::-webkit-details-marker{display:none}
.xc-real__more>summary::after{content:"";width:9px;height:9px;flex:none;background:currentColor;
  clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%)}
.xc-real__more[open]>summary::after{rotate:45deg}
.xc-real__more>summary:hover{color:var(--pink-ink)}
.xc-real__detail{padding-bottom:var(--s-2)}
.xc-real .more{color:var(--lav-ink)}
.xc-real .more:hover{color:var(--pink-ink)}


.xc-share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.xc-share .btn--ghost{border-color:var(--rule)}
.xc-share .btn--ghost:hover{border-color:var(--ink)}

/* ---------- 入力 ---------- */
.xc-presets{display:grid;gap:var(--s-3)}
.xc-presets__h{font:700 var(--t-s)/1.4 var(--f-jp);color:var(--ink-2)}
.xc-preset[aria-pressed="true"],.xc-preset[aria-pressed="true"]:hover{background:var(--ink);color:var(--paper)}

.xc-group{margin:0;min-width:0;display:grid;gap:var(--s-5)}
.xc-group.card>*+*{margin-top:0}
fieldset.xc-group{padding:var(--s-5) var(--s-5) var(--s-5)}
.xc-group__h{float:left;width:100%;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .6em;
  font:700 var(--t-l)/1.4 var(--f-jp);letter-spacing:.04em}
.xc-group__h .ph{align-self:center;color:var(--pink-ink)}
.xc-group__h small{font:500 var(--t-xs)/1.5 var(--f-jp);color:var(--ink-3);letter-spacing:.03em}
.xc-group__h+*{clear:both}

.xc-field{display:grid;gap:var(--s-1)}
.xc-field+.xc-field{padding-top:var(--s-3);border-top:1px solid var(--rule)}
.xc-field__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 var(--s-3)}
.xc-field__label{font-weight:700;font-size:var(--t-m)}
.xc-field__price{font-size:var(--t-xs);color:var(--ink-3)}
.xc-field__price .num{font-size:var(--t-s);color:var(--ink-2)}
.xc-field.is-url .xc-field__label,.xc-field.is-url .xc-field__price .num{color:var(--pink-ink)}
.xc-field__ctl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);align-items:center}
.xc-field__help{margin-top:var(--s-1)}
@container xcin (max-width:560px){
  .xc-field{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head num" "range range" "help help";column-gap:var(--s-3);align-items:center}
  .xc-field__head{grid-area:head;flex-direction:column;align-items:flex-start;gap:0}
  .xc-field__ctl{display:contents}
  .xc-field .xc-range{grid-area:range}
  .xc-field .xc-numbox{grid-area:num}
  .xc-field__help{grid-area:help}
}

.xc-numbox{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.xc-unit{font-size:var(--t-xs);color:var(--ink-3)}

/* スライダー：入力そのものの高さを44pxに（スタイルガイドのタップ領域チェックは input の箱を測る） */
.xc-range{--fill:0%;--fill-c:var(--lav-ink);-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;
  background:transparent;cursor:pointer;touch-action:pan-y}
.xc-field.is-url .xc-range{--fill-c:var(--pink-ink)}
.xc-range::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--fill-c) var(--fill),var(--rule) var(--fill))}
.xc-range::-moz-range-track{height:8px;border-radius:var(--r-pill);background:var(--rule)}
.xc-range::-moz-range-progress{height:8px;border-radius:var(--r-pill);background:var(--fill-c)}
.xc-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh-1)}
.xc-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh-1)}
.xc-range:focus-visible{outline:none}
.xc-range:focus-visible::-webkit-slider-thumb{outline:3px solid var(--lav-ink);outline-offset:3px}
.xc-range:focus-visible::-moz-range-thumb{outline:3px solid var(--lav-ink);outline-offset:3px}

/* 数値の入力欄：入力欄の角は --r-s。数字は DotGothic16 */
.xc-num{inline-size:5.2em;min-height:44px;padding:.35em .6em;border:1.5px solid var(--rule);border-radius:var(--r-s);
  background:var(--paper);color:var(--ink);font:400 var(--t-l)/1.2 var(--f-pixel);font-variant-numeric:tabular-nums;text-align:right;
  -moz-appearance:textfield}
.xc-num::-webkit-inner-spin-button,.xc-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.xc-num:hover{border-color:var(--lav)}
.xc-num:focus-visible{border-color:var(--lav-ink);outline-offset:1px}

.xc-fx{grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:var(--s-2) var(--s-4);
  padding:var(--s-4) var(--s-5);border-radius:var(--r-m);background:var(--grad-soft)}
.xc-fx .note{min-width:12em}
@media (max-width:520px){
  .xc-fx{grid-template-columns:auto minmax(0,1fr)}
  .xc-fx .note{grid-column:1/-1}
}

@media (max-width:760px){
  fieldset.xc-group{padding:var(--s-4)}
  .xc-group__h{font-size:var(--t-m)}
  .xc-bar{grid-template-columns:minmax(0,1fr) minmax(4.6em,auto);gap:var(--s-1) var(--s-3)}
  .xc-bar__track{grid-column:1/-1;grid-row:2}
}
@media (max-width:399px){
  .xc-num{inline-size:4.6em}
}

/* ---------- 山場: URL 付きは四角13こぶん ---------- */
.xc-coins{margin:0;padding:var(--s-6);border-radius:var(--r-m);border:1px solid var(--rule);background:var(--paper);box-shadow:var(--sh-1)}
.xc-coins__rows{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.xc-coins__row{display:grid;grid-template-columns:minmax(0,13em) minmax(0,max-content) max-content;justify-content:start;gap:var(--s-4);align-items:center}
.xc-coins__name{display:flex;flex-direction:column;font-weight:700;line-height:1.4}
.xc-coins__name .num{font-size:var(--t-s);color:var(--ink-2);font-weight:400}
.xc-coins__bar{display:flex;flex-wrap:wrap;gap:6px}
.xc-coins__bar i{--part:1;display:block;width:calc(28px * var(--part));height:28px;border-radius:4px;background:var(--lav-ink)}
.xc-coins__bar i.is-part{border-radius:4px 0 0 4px}
@media (min-width:1081px){ .xc-coins__bar{gap:8px} .xc-coins__bar i{width:calc(44px * var(--part));height:44px;border-radius:6px} .xc-coins__bar i.is-part{border-radius:6px 0 0 6px} }
.xc-coins__x{font-size:var(--t-s);color:var(--ink-2);white-space:nowrap}
.xc-coins__x .num{font-size:var(--t-xl);color:var(--ink);margin-right:.1em}
.xc-coins__row.is-url .xc-coins__name,.xc-coins__row.is-url .xc-coins__x .num{color:var(--pink-ink)}
.xc-coins__row.is-url .xc-coins__x .num{font-size:var(--t-2xl)}
.xc-coins__row.is-url .xc-coins__bar i{background:var(--pink-ink)}
.xc-coins figcaption{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--rule)}
@media (max-width:760px){
  .xc-coins{padding:var(--s-4)}
  .xc-coins__row{grid-template-columns:minmax(0,1fr) auto;justify-content:stretch;gap:var(--s-2) var(--s-3)}
  .xc-coins__x{text-align:right}
  .xc-coins__bar{grid-column:1/-1;grid-row:2;gap:4px}
  .xc-coins__bar i{width:calc(18px * var(--part));height:22px}
}

/* ---------- 単価表 ---------- */
.xc-prices__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}
.xc-prices__h{font-size:var(--t-l);margin-bottom:var(--s-3)}
.xc-price{--cols:minmax(0,1fr) 12.5rem 4.5rem;--cols-m:minmax(0,1fr) auto}
.xc-price .c-name small{display:block;font:500 var(--t-xs)/1.4 var(--f-jp);color:var(--ink-3)}
.xc-price__en{font-size:var(--t-xs);color:var(--ink-2);letter-spacing:.01em}
.xc-price .row.is-url .c-name,.xc-price .row.is-url .c-num{color:var(--pink-ink)}
.xc-prices__src{margin-top:var(--s-5)}
@media (max-width:1080px){ .xc-prices__grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- 注意書き ---------- */
.xc-notes__wrap>*{max-width:var(--read)}
.xc-notes__list{margin-bottom:var(--s-6)}
.xc-alert{margin-bottom:var(--s-6);padding:var(--s-5);border-radius:var(--r-m);background:var(--blush);border-left:4px solid var(--pink-ink)}
.xc-alert h3{font-size:var(--t-l);color:var(--ink)}
.xc-alert p,.xc-alert ul{margin-top:var(--s-2)}
.xc-alert .note{color:var(--ink-2)}
.xc-src a{overflow-wrap:anywhere}

/* ---------- 1列のときの下の帯（液晶が画面の外に出たときだけ）。液晶が下までついてくる見立て ---------- */
.xc-dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-toc);display:none;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom,0px));
  font-size:var(--t-s);box-shadow:0 -10px 24px -18px rgba(43,33,65,.6)}
.xc-dock__label{font-size:var(--t-xs);color:var(--ink-2);white-space:nowrap}
.xc-dock__lcd{padding:.1em .5em;border-radius:var(--r-s);background:color-mix(in srgb,var(--paper) 62%,black);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.28),inset 0 0 0 1px var(--line)}
.xc-dock__usd{font:400 var(--t-xl)/1.2 var(--f-pixel);color:var(--screen);font-variant-numeric:tabular-nums;white-space:nowrap}
.xc-dock__jpy{white-space:nowrap}
.xc-dock__jpy .num{font-size:var(--t-l)}
/* 内訳の割合を細い1本の積み上げで（URL 付きはピンク） */
.xc-dock__mix{flex:1 1 auto;min-width:40px;display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--mist)}
.xc-dock__mix i{display:block;height:100%;flex:none;width:calc(var(--s,0) * 100%);background:color-mix(in srgb,var(--lav-ink) 58%,var(--mist))}
.xc-dock__mix i+i{box-shadow:inset 1px 0 0 var(--paper)}
.xc-dock__mix i.is-url{background:var(--pink-ink)}
@media (max-width:900px){
  .xc-dock{display:flex;transform:translateY(110%);visibility:hidden}
  .xc-dock.is-on{transform:none;visibility:visible}
}

/* ---------- 動き（操作したときだけ。0.16〜0.32秒、transform と opacity だけ） ---------- */
@media (prefers-reduced-motion:no-preference){
  /* 開いた直後（HTML の初期値 → URL の入力）には動かさない。x-api-cost.mjs が最初の描画のあとに .is-ready を付ける */
  .xcost.is-ready .xc-bar__fill{transition:transform var(--dur-2) var(--ease-out)}
  .xc-dock{transition:transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
  .xc-dock.is-on{transition:transform var(--dur-2) var(--ease-out),visibility 0s}
  .xc-total.is-pop .num{display:inline-block;animation:pop var(--dur-2) var(--ease-spring)}
  .xc-dock__usd.is-pop{display:inline-block;animation:pop var(--dur-2) var(--ease-spring)}
}