/* =========================================================
 * kcontact.css  ?  kcontact 共通スタイル
 * 対象: templates/form.html, confirm.html, thanks.html
 * 使い方:
 *   <link rel="stylesheet" href="assets/kcontact.css">
 *   <body class="kc-form"> / <body class="kc-confirm"> / <body class="kc-thanks">
 * ======================================================= */

/* ---------- CSS Variables (Theme) ---------- */
:root{
  --bg:#f7f8fb; --card:#fff; --text:#222;
  --muted:#6b7280; --accent:#2563eb; --danger:#c00;
  --bd:#e5e7eb; --radius:14px; --shadow:0 6px 20px rgba(0,0,0,.06);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
}
img{ max-width:100%; height:auto; display:block; }

/* ---------- Layout ---------- */
.kc-wrap{ max-width:900px; margin:40px auto; padding:10px 16px 40px 16px; }
.kc-card{ background:var(--card); border:1px solid var(--bd); border-radius:var(--radius); box-shadow:var(--shadow); }
.kc-header{ padding:28px 28px 0; }
.kc-header h1{ margin:0 0 8px; font-size:28px; text-align: center;}
.kc-header p{ margin:0 0 50px 0; color:var(--muted); font-size:15px; text-align: center;}
.kc-section{ padding:0 28px 28px; }
.kc-muted{ color:var(--muted); }

/* ---------- Grid ---------- */
.kc-grid{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.kc-grid-full{ grid-column:1/-1; }
@media (max-width:768px){ .kc-grid{ grid-template-columns:1fr; } }

/* ---------- Fields ---------- */
.kc-field{ display:flex; flex-direction:column; }
.kc-field label{ font-weight:600; margin-bottom:6px; }
.kc-field small.kc-help{ color:var(--muted); }

.kc-field input,
.kc-field select,
.kc-field textarea{
  width:100%; border:1px solid var(--bd); border-radius:10px;
  padding:12px 14px; font-size:16px; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.kc-field input:focus,
.kc-field select:focus,
.kc-field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.kc-error{ color:var(--danger); font-size:13px; margin-top:6px; }

/* ---------- File Inputs (Form) ---------- */
.kc-fileset{ border:1px dashed var(--bd); padding:14px; border-radius:12px; background:#fafafa; }
.kc-file-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:10px; background:#fff; border:1px solid var(--bd); margin-bottom:8px;
}
.kc-file-row .kc-file-label{ font-weight:600; }
.kc-file-row .kc-pick{
  border:1px solid var(--accent); background:#fff; color:var(--accent);
  border-radius:999px; padding:6px 12px; cursor:pointer; font-weight:600;
}
.kc-file-row .kc-pick:hover{ background:rgba(37,99,235,.06); }
.kc-unset{ color:var(--muted); }
.kc-file-row a.kc-remove{ margin-left:6px; color:#ef4444; text-decoration:none; }
.kc-file-row a.kc-remove:hover{ text-decoration:underline; }

/* ---------- Buttons ---------- */
.kc-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:24px;}
.kc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; padding:10px 18px; border:1px solid var(--bd);
  background:#fff; cursor:pointer; text-decoration:none; color:var(--text);
}
.kc-btn:hover{ filter:brightness(1.03); }
.kc-btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- Confirm page specifics ---------- */
.kc-row{
  display:grid; grid-template-columns:160px 1fr; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--bd);
}
.kc-row:last-child{ border-bottom:none; }
.kc-dt{ color:#111; font-weight:600; }
.kc-dd{ color:#222; }
.kc-pre{ white-space:pre-wrap; }
.kc-files ul{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:10px; }
.kc-thumb img{ max-width:160px; max-height:160px; border:1px solid var(--bd); border-radius:10px; }

/* ---------- Thanks page specifics ---------- */
.kc-thanks-card{ padding:28px; }
.kc-status{ display:flex; gap:10px; margin:16px 0 0; flex-wrap:wrap; }
.kc-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-size:13px; border:1px solid var(--bd); background:#fff;
}
.kc-ok{ border-color:#16a34a; color:#16a34a; }
.kc-ng{ border-color:#dc2626; color:#dc2626; }

/* ---------- Utility ---------- */
.kc-visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

.kc-index{
  text-align: right;
	padding: 0 20px 20px 0;
}