/* Mobile-first Pink & Blue theme */
:root{
  --rekoi-pink:#ff67a3;
  --rekoi-blue:#5aa9ff;
  --rekoi-bg:#ffffff;
  --rekoi-text:#1a1a1a;
  --rekoi-border:#e9e9ee;
  --tap-min:48px;
}

#rekoi-app{max-width:720px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--rekoi-text);font-size:20px;-webkit-tap-highlight-color:transparent}
#rekoi-form{margin:12px 0;background:linear-gradient(135deg, rgba(255,103,163,.08), rgba(90,169,255,.08));padding:16px;border-radius:14px;border:1px solid var(--rekoi-border)}
.rekoi-grid{display:grid;grid-template-columns:1fr;gap:12px} /* 1カラムを基本に */
#rekoi-form label{display:block;line-height:1.25}
#rekoi-form label.rekoi-tight br{line-height:0;display:block;margin:0;padding:0}
#rekoi-form label.rekoi-tight input{margin-top:0}
#rekoi-form input,#rekoi-form select{width:100%;min-height:var(--tap-min);padding:12px;border:1px solid var(--rekoi-border);border-radius:12px;background:#fff}
#rekoi-form select{appearance:none;background-image:linear-gradient(45deg,var(--rekoi-blue),var(--rekoi-pink));background-clip:text;color:transparent}
#rekoi-form .rekoi-consent{display:flex;align-items:center;gap:8px}
#rekoi-form .rekoi-consent input{width:20px;height:20px}

.rekoi-sticky{position:sticky;bottom:calc(env(safe-area-inset-bottom) + 8px);padding:8px 0 0 0;background:transparent}
.rekoi-btn{width:100%;min-height:56px;padding:12px 16px;border:none;border-radius:999px;cursor:pointer;font-weight:800;background:linear-gradient(45deg,var(--rekoi-pink),var(--rekoi-blue));color:#fff;box-shadow:0 8px 28px rgba(255,103,163,.25)}
.rekoi-btn:active{transform:translateY(1px)}

.rekoi-result{margin-top:16px}
.rekoi-box{border:1px solid var(--rekoi-border);padding:18px;border-radius:16px;background:var(--rekoi-bg)}
.rekoi-score{font-size:56px;font-weight:900;line-height:1;margin-bottom:4px;letter-spacing:-.02em;background:linear-gradient(45deg,var(--rekoi-pink),var(--rekoi-blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.rekoi-label{opacity:.85;margin-bottom:10px}
.rekoi-msg{margin:0 0 8px 0}
.rekoi-meta{list-style:none;padding:0;margin:10px 0 0 0;display:grid;grid-template-columns:1fr;gap:6px}
.rekoi-tip{margin-top:10px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg, rgba(255,103,163,.08), rgba(90,169,255,.08))}
.rekoi-loading{padding:20px;text-align:center;border:1px dashed var(--rekoi-border);border-radius:12px;background:#fff}

/* Larger screens: 2カラムに戻す */
@media (min-width: 768px){
  .rekoi-grid{grid-template-columns:1fr 1fr}
  .rekoi-meta{grid-template-columns:1fr 1fr}
}

/* 超小型端末は字詰めを少し下げる */
@media (max-width: 360px){
  #rekoi-app{font-size:18px}
}

/* 低視力向けコントラストオプション（任意） */
@media (prefers-contrast: more){
  #rekoi-form,#rekoi-result .rekoi-box{border-color:#bbb}
  .rekoi-btn{box-shadow:none}
}

/* 動きに弱い方向けの配慮 */
@media (prefers-reduced-motion: reduce){
  .rekoi-btn,.rekoi-score{transition:none}
}