/* ask-manager 참가자·좌장 공용 스타일. 바닐라 CSS, 외부 라이브러리 없음. */

:root{
  --brand-1:#2c3580;
  --brand-2:#4a56c0;
  --ink:#1c2033;
  --muted:#7a8195;
  --line:#e7e9f2;
  --bg:#f4f5fa;
  --card:#ffffff;
  --soft:#f6f7fc;
  --radius:20px;
  --shadow:0 10px 30px rgba(28,32,90,.10);
  --shadow-sm:0 4px 14px rgba(28,32,90,.07);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
}
h1,h2{margin:0;}
button{font-family:inherit;}

/* ============================================================
 * 참가자 화면
 * ============================================================ */
.qa-topbanner{display:block;width:100%;line-height:0;}
.qa-topbanner img{width:100%;max-height:220px;object-fit:cover;display:block;}

.qa-wrap{
  max-width:520px;
  margin:0 auto;
  padding:18px 16px 80px;
}

.qa-title{
  margin:18px 0;
  padding:20px 22px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color:#fff;
  text-align:center;
  box-shadow:var(--shadow);
}
.qa-title h1{
  font-size:21px;
  font-weight:700;
  line-height:1.35;
}

.qa-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:18px 16px;
  margin-bottom:18px;
}
.qa-closed{text-align:center;color:var(--muted);font-size:15px;padding:32px 16px;}

.qa-field{margin-bottom:14px;}
.qa-field-row{display:flex;gap:10px;margin-bottom:14px;}
.qa-field-row .qa-input{flex:1 1 50%;}

.qa-label{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--brand-1);
  text-transform:uppercase;
  margin:2px 2px 6px;
}

.qa-select,
.qa-input,
.qa-textarea{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:13px;
  background:var(--soft);
  color:var(--ink);
  font-size:15px;
  padding:13px 14px;
  font-family:inherit;
  -webkit-appearance:none;
  appearance:none;
}
.qa-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237a8195' stroke-width='1.5' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
.qa-textarea{resize:vertical;min-height:150px;line-height:1.55;}
.qa-select:focus,
.qa-input:focus,
.qa-textarea:focus{
  outline:none;
  border-color:var(--brand-2);
  background:#fff;
  box-shadow:0 0 0 4px rgba(74,86,192,.13);
}

.qa-subtitle{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

.qa-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--ink);
  margin-bottom:14px;
  cursor:pointer;
}

.qa-captcha{display:flex;justify-content:center;margin:14px 0;}

.qa-submit{
  width:100%;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color:#fff;
  font-size:16px;
  font-weight:700;
  letter-spacing:.3px;
  padding:15px;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(44,53,128,.28);
}
.qa-submit:disabled{opacity:.6;cursor:default;}

.qa-mylist-title{
  font-size:16px;
  font-weight:700;
  margin:22px 2px 10px;
  color:var(--ink);
}
.qa-empty{color:var(--muted);font-size:14px;padding:8px 2px;}

.qa-mycard{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  margin:10px 0;
  box-shadow:0 3px 10px rgba(28,32,90,.05);
}
.qa-answered{color:#2c5982;font-size:13px;margin:0 0 6px;font-weight:600;}
.qa-mycard-head{font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600;}
.qa-mycard-time{color:#aab0c2;font-size:12px;margin-left:6px;}
.qa-mycard-body{font-size:15px;color:var(--ink);line-height:1.5;word-break:break-word;}
.qa-mycard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.qa-mycard-name{font-size:13px;color:var(--muted);}
.qa-del-btn{
  border:1.5px solid #e2586b;
  background:#fff;
  color:#e2586b;
  border-radius:9px;
  padding:5px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

@media (max-width:480px){
  .qa-wrap{padding:14px 12px 80px;}
  .qa-title h1{font-size:19px;}
  .qa-topbanner img{max-height:170px;}
}