/* /brow/ — 施術後シミュレーター専用スタイル (demo.css の変数を利用)
   画像そのものを見る面 (canvas / before-after) だけは明るい台 (--plate) を残し、
   周囲は暗いカードで額装する。それ以外の UI はダーク。 */

/* グリッドトラックが子孫(表など)のmin-content幅で押し広げられるのを防ぐ */
.stage-card, .side { min-width: 0; }
.side { display: flex; flex-direction: column; gap: 18px; }

.stage-card h2 { margin-top: 22px; }
.stage-card h2:first-child { margin-top: 0; }

.input-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.sample-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.filebtn {
  font: inherit; font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 999px;
  background: var(--gold-grad); color: var(--accent-ink); cursor: pointer; display: inline-block;
  transition: box-shadow .25s, transform .25s;
}
.filebtn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(196, 162, 101, .3); }
.filebtn:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 3px; }

.chip.active { background: var(--gold-grad); border-color: transparent; color: var(--accent-ink); font-weight: 700; }

#workArea { margin-top: 4px; }
.hint { font-size: 13px; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }

/* 写真台: 画像を見る面。明るいまま残し、金の枠で額装する */
.canvas-stack {
  position: relative; width: 100%; max-width: 420px; margin: 12px auto 0;
  aspect-ratio: 480 / 600; border-radius: 10px; overflow: hidden; border: 1px solid var(--gold-line);
  background: var(--plate);
}
.canvas-stack canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#overlayCanvas { cursor: crosshair; touch-action: none; }

.ctrl-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin: 12px 0 4px; }
.ctrl-row label { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.ctrl-row select {
  font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--sunken); color: var(--ink);
}
.ctrl-row input[type="range"] { max-width: 130px; accent-color: var(--brand); }

.proc-time { font-size: 13px; color: var(--brand); font-weight: 700; margin: 8px 0 0; }

.tabbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.tab {
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.tab.active { background: var(--gold-grad); border-color: transparent; color: var(--accent-ink); font-weight: 700; }
.tab:hover:not(.active) { border-color: var(--brand); color: var(--brand); }

.table-wrap { overflow-x: auto; margin: 10px 0; -webkit-overflow-scrolling: touch; }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 13px; }
.cmp-table th, .cmp-table td { border: 1px solid var(--line-strong); padding: 9px 11px; text-align: left; color: var(--ink-soft); }
.cmp-table th { background: var(--sunken); color: var(--brand); font-weight: 700; }

#compareSection { margin-top: 22px; }
.compare-wrap {
  position: relative; width: 100%; max-width: 420px; margin: 10px auto 0;
  aspect-ratio: 480 / 600; overflow: hidden; border-radius: 10px; border: 1px solid var(--gold-line);
  background: var(--plate); touch-action: none; cursor: ew-resize;
}
.compare-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.compare-wrap .cmp-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--plate);
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .25); transform: translateX(-1px); pointer-events: none;
}
.cmp-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%;
  background: var(--plate); border: 2px solid var(--brand); box-shadow: 0 1px 4px rgba(17, 17, 19, .35);
  transform: translate(-50%, -50%);
}

@media (max-width: 480px) {
  .canvas-stack, .compare-wrap { max-width: 100%; }
  .ctrl-row { gap: 10px 14px; }
  .ctrl-row input[type="range"] { max-width: 100px; }
}