/* /meeting/assets/style.css */

/* =========================
   Base
========================= */
:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --text:#222;
  --muted:#667085;
  --line:#e6e8ee;
  --accent:#1f6feb;     /* 青：素材投稿の雰囲気寄せ */
  --accent2:#0b5ed7;
  --danger:#d93025;
  --ok:#0f9d58;

  --radius:12px;
  --shadow:0 8px 24px rgba(16,24,40,.08);
  --shadow2:0 2px 10px rgba(16,24,40,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: 980px;              /* ちょい広め：素材投稿寄せ */
  margin: 26px auto;
  padding: 0 16px;
}

/* =========================
   Page Header (optional)
========================= */
/* もしページ上部にタイトルバーを置きたくなったら使えます
   <div class="page-titlebar"><div class="container">...</div></div>
*/
.page-titlebar{
  background:#111827;
  color:#fff;
  padding: 14px 0;
  box-shadow: var(--shadow2);
}
.page-titlebar .title{
  font-size: 16px;
  font-weight: 700;
  letter-spacing:.02em;
}
.page-titlebar .subtitle{
  font-size: 12px;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}

/* =========================
   Card / Section
========================= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}

.header h1{
  font-size: 18px;
  margin:0;
  font-weight: 800;
}

.event-meta{
  font-size: 16px;
  color: var(--muted);
  margin-top: 6px;
}

/* 素材投稿っぽい区切り線 */
.hr{
  height:1px;
  background:var(--line);
  margin: 14px 0;
}

/* =========================
   Form layout (top/menu風)
========================= */
.grid{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 10px 18px;
  padding: 12px 0;
  border-top: 1px dashed var(--line);
}
.grid:first-of-type{ border-top:none; }

label.key{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding-top: 10px;
}

/* input/select/textarea */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  width:100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  background:#fff;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

select{
  padding: 11px 38px 11px 12px;
  appearance:none;
  background:
    linear-gradient(45deg, transparent 50%, #98a2b3 50%),
    linear-gradient(135deg, #98a2b3 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
}

textarea{
  min-height: 100px;
  resize: vertical;
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(31,111,235,.7);
  box-shadow: 0 0 0 4px rgba(31,111,235,.12);
}

/* 2カラム入力（姓・名など）を見た目よくする用 */
.row-flex{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.row-flex > .col{
  flex:1;
  min-width: 180px;
}

/* radio/checkbox 行 */
.radio-row, .check-row{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  align-items:center;
  padding-top: 6px;
}

.check-row label, .radio-row label{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:#fff;
}

input[type="checkbox"], input[type="radio"]{
  transform: translateY(1px);
}

/* “その他”入力欄の枠 */
.subbox{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafbff;
}

/* 小さめ注釈 */
.small{
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* =========================
   Buttons (素材投稿風)
========================= */
.actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding-top: 16px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background:#fff;
  color: var(--text);
  cursor:pointer;
  font-weight:700;
  font-size: 14px;
  min-height: 40px;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn:hover{
  box-shadow: var(--shadow2);
  transform: translateY(-1px);
}

.btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}
.btn.primary:hover{
  background: var(--accent2);
  border-color: var(--accent2);
}

.btn.danger{
  color: var(--danger);
  border-color: rgba(217,48,37,.35);
  background: rgba(217,48,37,.04);
}

/* スマホはボタン縦積みも見やすく */
@media (max-width: 520px){
  .actions{
    flex-direction:column;
  }
  .btn{
    width:100%;
  }
}

/* =========================
   Errors / Notices
========================= */
.error-box{
  border: 1px solid rgba(217,48,37,.28);
  background: rgba(217,48,37,.06);
  color: var(--danger);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  font-size: 13px;
}

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

/* 完了ページの成功メッセージ用（使いたければ） */
.success-box{
  border: 1px solid rgba(15,157,88,.28);
  background: rgba(15,157,88,.06);
  color: #0b7a46;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  font-size: 13px;
}

/* =========================
   Confirm page view tweaks
========================= */
/* confirm.php の “値表示” を読みやすくする */
.value-text{
  padding-top: 10px;
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}

/* =========================
   Responsive (1カラム化)
========================= */
@media (max-width: 820px){
  .grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  label.key{
    padding-top: 0;
    font-size: 12px;
  }
  .card{ padding: 16px; }
  .container{ margin: 16px auto; }
}

/* さらに小さい端末 */
@media (max-width: 420px){
  .header h1{ font-size: 16px; }
  input, select, textarea{ font-size: 14px; }
}

/* =========================
   Common Header
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(16,24,40,.05);
}

.site-header__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.brand__logo{
  width: 42px;          /* ロゴ小さめでOK */
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #fff;
}

.brand__text{
  min-width: 0;
}

.brand__title{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__title h2{
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.brand__sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header__right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-chip{
  text-align: right;
  line-height: 1.1;
}

.admin-chip__name{
  font-size: 12px;
  font-weight: 800;
}

.admin-chip__email{
  font-size: 11px;
  color: var(--muted);
}

/* small button variation */
.btn--sm{
  padding: 8px 12px;
  min-height: 34px;
  border-radius: 10px;
  font-size: 13px;
}

/* mobile */
@media (max-width: 640px){
  .admin-chip{ display:none; } /* スマホは右側をスッキリ */
  .brand__sub{ display:none; } /* サブタイトルも省略 */
  .brand__logo{ width: 38px; height: 38px; }
}

/* =========================
   Public header (参加登録側)
========================= */

.site-header--public .brand__logo{
  width: 64px;      /* ← 大きく */
  height: 64px;
  border-radius: 14px;
}

.site-header--public .brand__title{
  font-size: 18px;
  font-weight: 900;
}

.site-header--public .site-header__inner{
  padding: 14px 18px;
}

/* スマホ */
@media (max-width: 640px){
  .site-header--public .brand__logo{
    width: 52px;
    height: 52px;
  }
}

/* form controls (public/admin 共通で使える) */
.form-control{
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  outline: none;
  transition: box-shadow .15s, border-color .15s;
}
.form-control:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

/* =========================
   Login Page
========================= */
.login-page{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
  /* background: linear-gradient(135deg, #fbcfe8, #f472b6); */
  font-family: system-ui, -apple-system, sans-serif;
}
.login-wrap{
  width:100%;
  padding:20px;
}
.login-card{
  max-width:420px;
  margin:0 auto;
  background:#fff;
  padding:32px 28px;
  border-radius:16px;
  box-shadow: 0 10px 25px rgba(236, 72, 153, 0.12);
  text-align:center;
}
.login-logo img{
  width:180px;
  margin-bottom:12px;
}
.login-card h1{
  font-size:20px;
  margin-bottom:20px;
  font-weight:700;
}

/* フォーム */
.login-card form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ボタンをピンク寄りに */
.login-card .btn.primary{
  background:#ec4899;
  border-color:#ec4899;
}

.login-card .btn.primary:hover{
  background:#db2777;
  border-color:#db2777;
}

.login-footer{
  margin-top:16px;
  font-size:12px;
  color:#888;
}