/* ===== Buttons ===== */
.btn {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--aqua-deep) 0%, var(--aqua) 100%);
  color: #fff;
  font-size: 0.9375rem;     /* was 15px */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(30, 111, 184, .12);
}
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: #fff;
  color: var(--aqua-deep);
  border: 1.5px solid #cfe2f1;
  box-shadow: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.125rem;      /* was 18px */
  color: var(--ink);
}

.topbar-spacer { display: inline-block; width: 32px; }

/* ===== Slider ===== */
input[type="range"].slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(20, 30, 60, .12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--aqua-deep);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(20, 30, 60, .12);
  cursor: pointer;
  /* Pseudo-elements not allowed on native thumb; ensure parent gets enough hit area instead */
}
input[type="range"].slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--aqua-deep);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(20, 30, 60, .12);
  cursor: pointer;
}
input[type="range"].slider::-moz-range-track {
  background: rgba(20, 30, 60, .12);
  height: 4px;
  border-radius: 2px;
}
/* 44px tap target via padding around the slider container */
.slider-wrap {
  padding: 13px 0;          /* 4px track + 13*2 = 30 → +18px thumb = ~44px hit */
  display: block;
}

/* ===== Compare pill (BEFORE/AFTER) =====
   写真上のオーバーレイなので、画面高さに合わせて dvh で縮める。 */
.compare-pill {
  position: absolute;
  top: clamp(8px, 1.8dvh, 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--blur-fallback);
  border-radius: clamp(14px, 3dvh, 20px);
  padding: clamp(2px, 0.5dvh, 4px);
  display: flex;
  gap: clamp(2px, 0.5dvh, 4px);
  font-size: clamp(0.5625rem, 1.4dvh, 0.6875rem);   /* 9px〜11px */
  font-weight: 700;
  color: var(--ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(20, 30, 60, .04);
  z-index: 2;
}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .compare-pill { background: rgba(255, 255, 255, .92); }
}
.compare-pill button {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: clamp(4px, 1.1dvh, 6px) clamp(8px, 2.2dvh, 14px);
  border-radius: clamp(10px, 2.4dvh, 14px);
  color: var(--sub);
  cursor: pointer;
  letter-spacing: .06em;
}
.compare-pill button.on {
  background: linear-gradient(135deg, var(--aqua-deep) 0%, var(--aqua) 100%);
  color: #fff;
}

/* ===== Swatches ===== */
.swatches {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.sw {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e0e6ee, 0 2px 6px rgba(20, 30, 60, .05);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
  padding: 0;
}
.sw.white    { background: url('../images/texture-white.webp')    50% 55%/260% no-repeat #f4faff; }
.sw.lavender { background: url('../images/texture-lavender.webp') 50% 55%/260% no-repeat #fbf6ff; }
.sw.blue     { background: url('../images/texture-blue.webp')     50% 55%/260% no-repeat #f1f6fc; }
.sw.pink     { background: url('../images/texture-pink.webp')     50% 55%/260% no-repeat #fdf3f6; }
.sw.mint     { background: url('../images/texture-mint.webp')     50% 55%/260% no-repeat #f1f9f4; }
.sw.on {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--aqua-deep), 0 4px 10px rgba(30, 111, 184, .12);
}

/* ===== Color name pill =====
   swatch 直下の中央表示。panel の flex-column 内で align-self で中央寄せする。
   全色に同じ太さの border を持たせて、white で 1px 増えてピル高さがズレないようにする。 */
.color-name {
  align-self: center;
  font-size: 0.8125rem;     /* was 13px */
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
}
.color-name.white    { background: rgba(255, 255, 255, .9); color: var(--ink); border-color: rgba(20, 30, 60, .1); }
.color-name.lavender { background: rgba(193, 168, 227, .55); color: #6e4dab; }
.color-name.blue     { background: rgba(148, 194, 237, .6); color: #1f6cc1; }
.color-name.pink     { background: rgba(245, 163, 168, .55); color: #c14e58; }
.color-name.mint     { background: rgba(146, 216, 168, .6); color: #2a8e5a; }

/* ===== Loading overlay ===== */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 999;
  color: var(--ink);
  font-size: 0.8125rem;     /* was 13px */
  font-weight: 600;
}
.loading-overlay[hidden] { display: none; }
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(30, 111, 184, 0.2);
  border-top-color: var(--aqua-deep);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }