/* ===============================
   Study-Style16 - base.css
   全ページ共通：色・タイポ・レイアウト基盤
=============================== */

/* --------------------------------
   カラーパレット（春空ライト）
-------------------------------- */
:root{
  --bg1:#e9f7ff;
  --bg2:#e9f7ff;
  --card:#ffffffcc;
  --brand:#73b9ff;        
  --brand-deep:#3f87d9; 
  --accent:#9de6d1;
  --ink:#000000;  
  --muted:#5f6f86;
  --line:rgba(115,185,255,.35);
  --radius:18px;
}

/* --------------------------------
   リセット系
-------------------------------- */
html {
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
}
*, *::before, *::after {
  box-sizing:inherit;
}

body {
  margin:0;
  font-family:"Inter","Noto Sans JP",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg1),var(--bg2)) fixed;
  overflow-x:hidden;
}

/* --------------------------------
   レイアウト基礎
-------------------------------- */
.page {
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.container {
  max-width:960px;
  width:min(100%,960px);
  margin:0 auto;
  padding:18px 16px;
}

.wrap {
  max-width:680px;
  margin:0 auto;
  padding:18px 12px 36px;
}

/* --------------------------------
   カード（全ページ共通の基本カード）
-------------------------------- */
.card {
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  padding:18px;
  box-shadow:var(--shadow-md);
  margin-bottom:18px;
}

/* --------------------------------
   ボタン
-------------------------------- */
.btn {
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:10px 20px;
  font-weight:700;
  font-size:14px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  transition:.15s;
}

.btn.primary {
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;
  box-shadow:0 4px 10px rgba(115,185,255,.35);
}
.btn.primary:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(115,185,255,.45);
}
.btn.primary:active {
  transform:translateY(0) scale(.98);
  box-shadow:0 3px 8px rgba(115,185,255,.35);
}

/* --------------------------------
   見出し・テキスト
-------------------------------- */
.title {
  font-size:22px;
  font-weight:700;
  margin:.2rem 0 .4rem;
}

.subtitle {
  color:var(--muted);
  margin:0 0 .4rem;
}

.small { font-size:12px; }
.muted { color:var(--muted); }
.center { text-align:center; }

/* --------------------------------
   バッジ（共通）
-------------------------------- */
.badge {
  background:var(--brand);
  color:#fff;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* --------------------------------
   フォーム類（confirm/任意回答ページで使う）
-------------------------------- */
.form { display:grid; gap:12px; }

.field {
  background:var(--card);
  border-radius:12px;
  padding:12px;
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
}
.field-label {
  font-weight:700;
  margin-bottom:6px;
  color:var(--ink);
}
.field-input,
.field select,
.field input,
textarea {
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  font-size:15px;
}
textarea {
  min-height:100px;
  resize:vertical;
}

/* --------------------------------
   グリッド
-------------------------------- */
.grid {
  display:grid;
  gap:16px;
}
.grid-cols-2 { grid-template-columns:repeat(2,1fr); }
.grid-cols-3 { grid-template-columns:repeat(3,1fr); }

@media (max-width:720px){
  .grid-cols-2, .grid-cols-3 {
    grid-template-columns:1fr;
  }
}

/* --------------------------------
   フッター
-------------------------------- */
.footer {
  margin-top:auto;
  padding:18px 16px 24px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}