/* =========================
   QUINSEL Deep – Premium Form UI
   scope: #quinsel-l2
   Palette: Navy / Teal / Orange (V4.1統一)
========================= */

/* ===== Base ===== */
#quinsel-l2 { background:#F7F8FA; color:#0f172a; }
.q2-wrap{ max-width:960px; margin:0 auto; padding:40px 24px 100px; }
@media(max-width:768px){ .q2-wrap{ padding:24px 16px 80px; } }

/* ==========================================================
   HERO
========================================================== */
#quinsel-l2 .q2-hero{
  position:relative;
  padding:36px 32px 32px;
  border-radius:20px;
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 40%,#3730a3 100%);
  color:#fff;
  overflow:hidden;
}
#quinsel-l2 .q2-hero::after{
  content:"";position:absolute;top:-40%;right:-10%;
  width:450px;height:450px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.14),transparent 70%);
  pointer-events:none;
}
#quinsel-l2 .q2-hero h1{
  margin:0;
  font-size:clamp(13px,1.8vw,15px);
  letter-spacing:.06em;
  font-weight:700;
  color:rgba(255,255,255,.7);
  position:relative;z-index:1;
}
#quinsel-l2 .q2-hero .main{
  margin-top:10px;
  font-size:clamp(22px,3.5vw,34px);
  font-weight:900;
  line-height:1.25;
  color:#fff;
  position:relative;z-index:1;
}
#quinsel-l2 .q2-hero .sub{
  margin:14px 0 0;
  line-height:1.8;
  font-size:14px;
  color:rgba(255,255,255,.9);
  position:relative;z-index:1;
}

/* pills */
#quinsel-l2 .q2-pill{
  display:inline-flex;gap:8px;flex-wrap:wrap;margin-top:16px;
  position:relative;z-index:1;
}
#quinsel-l2 .q2-pill span{
  display:inline-flex;align-items:center;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  font-size:12px;font-weight:800;
  color:rgba(255,255,255,.92);
}
#quinsel-l2 .q2-pill a{
  color:#fff;text-decoration:underline;font-weight:800;
}

/* note inside hero */
#quinsel-l2 .q2-hero .q2-note{
  color:rgba(255,255,255,.75);
  position:relative;z-index:1;
}

/* ==========================================================
   L1 Bridge (折りたたみ)
========================================================== */
#quinsel-l2 .q-l1-bridge{ margin-top:20px;position:relative;z-index:1; }
#quinsel-l2 .q-l1-bridge__details{
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
#quinsel-l2 .q-l1-bridge__summary{
  cursor:pointer;padding:16px;font-weight:800;
  list-style:none;color:#fff;font-size:14px;
}
#quinsel-l2 .q-l1-bridge__summary::-webkit-details-marker{display:none;}
#quinsel-l2 .q-l1-bridge__hint{
  display:block;font-size:12px;font-weight:400;opacity:.6;margin-top:6px;
}
#quinsel-l2 .q-l1-bridge__body{
  padding:16px;border-top:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.2);
}
#quinsel-l2 .q-l1-bridge__block + .q-l1-bridge__block{ margin-top:14px; }
#quinsel-l2 .q-l1-bridge__label{
  font-size:12px;font-weight:800;opacity:.8;margin-bottom:8px;color:#fff;
}
#quinsel-l2 .q-l1-bridge__chips{
  display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none;
}
#quinsel-l2 .q-l1-bridge__chip{
  padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);font-size:12px;
  background:rgba(255,255,255,.08);color:#fff;
}
#quinsel-l2 .q-l1-bridge__freeword{
  white-space:pre-wrap;padding:12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  font-size:13px;line-height:1.75;color:#fff;
}
#quinsel-l2 .q-l1-bridge__note{
  margin-top:12px;font-size:12px;opacity:.6;color:#fff;
}

/* ==========================================================
   Form Sections — カード + ステップ感
========================================================== */
#quinsel-l2 .q2-section{
  margin-top:28px;
  padding:32px;
  border:1px solid rgba(2,6,23,.06);
  border-radius:24px;
  background:#fff;
  box-shadow:0 2px 16px rgba(0,0,0,.02);
  position:relative;
}
#quinsel-l2 .q2-section h2{
  margin:0 0 6px;
  font-size:20px;
  font-weight:900;
}
#quinsel-l2 .q2-section h3{
  margin:0 0 8px;
  font-size:17px;
  font-weight:900;
}
#quinsel-l2 .q2-note{
  font-size:13px;
  opacity:.55;
  line-height:1.78;
  margin-top:6px;
}

/* grid */
#quinsel-l2 .q2-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:16px;
}
@media(max-width:768px){
  #quinsel-l2 .q2-grid{ grid-template-columns:1fr; gap:16px; }
}

/* ==========================================================
   Form Fields — Premium Styling
========================================================== */
#quinsel-l2 .q2-field{
  display:flex;flex-direction:column;gap:6px;
}
#quinsel-l2 .q2-field label{
  font-weight:800;
  font-size:14px;
  color:#1E293B;
}
#quinsel-l2 .req{
  color:#EF4444;
  font-size:11px;
  font-weight:900;
  margin-left:4px;
}

/* ★ Input / Select / Textarea — モダンで上品 */
#quinsel-l2 .q2-field input[type="text"],
#quinsel-l2 .q2-field input[type="email"],
#quinsel-l2 .q2-field input[type="tel"],
#quinsel-l2 .q2-field input[type="date"],
#quinsel-l2 .q2-field select,
#quinsel-l2 .q2-field textarea{
  border-radius:14px;
  padding:14px 16px;
  border:1.5px solid rgba(2,6,23,.1);
  background:#FAFBFC;
  font-size:14px;
  line-height:1.6;
  color:#0f172a;
  transition:border-color .2s,box-shadow .2s,background .2s;
  -webkit-appearance:none;
  appearance:none;
}
#quinsel-l2 .q2-field input:hover,
#quinsel-l2 .q2-field select:hover,
#quinsel-l2 .q2-field textarea:hover{
  border-color:rgba(2,6,23,.18);
  background:#fff;
}
#quinsel-l2 .q2-field input:focus,
#quinsel-l2 .q2-field select:focus,
#quinsel-l2 .q2-field textarea:focus{
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
  background:#fff;
}
#quinsel-l2 .q2-field textarea{
  min-height:160px;
  resize:vertical;
  line-height:1.85;
}
/* select arrow */
#quinsel-l2 .q2-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}
/* file input */
#quinsel-l2 .q2-field input[type="file"]{
  border-radius:14px;
  padding:12px 16px;
  border:1.5px dashed rgba(2,6,23,.12);
  background:#FAFBFC;
  font-size:13px;
  cursor:pointer;
  transition:border-color .2s;
}
#quinsel-l2 .q2-field input[type="file"]:hover{
  border-color:#6366f1;
}

/* placeholder */
#quinsel-l2 .q2-field input::placeholder,
#quinsel-l2 .q2-field textarea::placeholder{
  color:rgba(15,23,42,.3);
}

/* badge-mini */
#quinsel-l2 .badge-mini{
  display:inline-flex;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.12);
  font-size:11px;
  font-weight:800;
  color:#4f46e5;
}

/* ==========================================================
   Checkbox — カードスタイル
========================================================== */
#quinsel-l2 .q2-check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1.5px solid rgba(2,6,23,.06);
  background:#FAFBFC;
  cursor:pointer;
  transition:border-color .2s,background .2s;
}
#quinsel-l2 .q2-check:hover{
  border-color:rgba(99,102,241,.15);
  background:rgba(99,102,241,.03);
}
#quinsel-l2 .q2-check:has(input:checked){
  border-color:rgba(99,102,241,.2);
  background:rgba(99,102,241,.05);
}
#quinsel-l2 .q2-check input[type="checkbox"]{
  margin-top:3px;
  width:18px;height:18px;
  accent-color:#6366f1;
  flex-shrink:0;
  cursor:pointer;
}
#quinsel-l2 .q2-check span{
  font-size:14px;
  line-height:1.6;
  color:#334155;
}

/* 同意セクションのチェック → 少し違うスタイル */
#quinsel-l2 [aria-label="Consent"] .q2-check{
  background:rgba(242,107,29,.02);
  border-color:rgba(242,107,29,.1);
}
#quinsel-l2 [aria-label="Consent"] .q2-check:hover{
  border-color:rgba(242,107,29,.2);
  background:rgba(242,107,29,.04);
}
#quinsel-l2 [aria-label="Consent"] .q2-check:has(input:checked){
  border-color:rgba(242,107,29,.3);
  background:rgba(242,107,29,.06);
}

/* ==========================================================
   Buttons — V4.1統一パレット
========================================================== */
#quinsel-l2 .q2-btn{
  border:none;
  border-radius:16px;
  padding:16px 24px;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
  transition:transform .15s,box-shadow .25s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#quinsel-l2 .q2-btn:active{ transform:scale(.97); }

/* ★ Primary → オレンジグラデ（旧ブルー廃止） */
#quinsel-l2 .q2-btn.primary{
  background:linear-gradient(135deg,#F26B1D,#E55A0B);
  color:#fff;
  box-shadow:0 4px 16px rgba(242,107,29,.2);
}
#quinsel-l2 .q2-btn.primary:hover{
  box-shadow:0 8px 24px rgba(242,107,29,.3);
}

/* Ghost */
#quinsel-l2 .q2-btn.ghost{
  background:#fff;
  border:1.5px solid rgba(2,6,23,.1);
  color:#0f172a;
  font-size:14px;
}
#quinsel-l2 .q2-btn.ghost:hover{
  background:#F8FAFC;
  border-color:rgba(2,6,23,.18);
}

#quinsel-l2 .q2-actions{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* ==========================================================
   Divider
========================================================== */
#quinsel-l2 .q2-hr{
  height:1px;
  background:rgba(2,6,23,.06);
  margin:24px 0;
  border:none;
}

/* ==========================================================
   Section Visual Rhythm（セクション色分け）
========================================================== */
/* 基本情報 → 上にティールライン */
#quinsel-l2 [aria-label="Basic Info"]{
  border-top:3px solid #6366f1;
}

/* キャリア情報 → 上にブルーライン */
#quinsel-l2 [aria-label="Career Info"]{
  border-top:3px solid #3B82F6;
}

/* MBTI → 上にパープルライン */
#quinsel-l2 [aria-label="MBTI"]{
  border-top:3px solid #8B5CF6;
}

/* 価値観 → 上にアンバーライン */
#quinsel-l2 [aria-label="Values"]{
  border-top:3px solid #F59E0B;
}

/* 引っかかり → 上にレッドライン */
#quinsel-l2 [aria-label="Free Text"]{
  border-top:3px solid #EF4444;
}

/* 同意 → オレンジ微グラデ背景 */
#quinsel-l2 [aria-label="Consent"]{
  border-top:3px solid #F26B1D;
  background:linear-gradient(180deg,rgba(242,107,29,.03),#fff);
}

/* ==========================================================
   「その他」入力 — 初期非表示
========================================================== */
#quinsel-l2 .q2-other-input{
  display:none;
  margin-top:8px;
}
#quinsel-l2 .q2-other-input.is-visible{
  display:block;
}

/* ==========================================================
   同意エラー表示
========================================================== */
#quinsel-l2 .q2-consent-error{
  display:none;
  margin-top:10px;
  padding:12px 16px;
  border-radius:12px;
  background:rgba(239,68,68,.06);
  border:1px solid rgba(239,68,68,.2);
  color:#DC2626;
  font-size:13px;
  font-weight:800;
  line-height:1.6;
}
#quinsel-l2 .q2-consent-error.is-visible{
  display:block;
}

/* ==========================================================
   AI分析中 ローディングオーバーレイ
========================================================== */
#quinsel-l2 .q2-loading{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(11,15,40,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#quinsel-l2 .q2-loading.is-active{
  display:flex;
  align-items:center;
  justify-content:center;
}
#quinsel-l2 .q2-loading__inner{
  text-align:center;
  color:#fff;
  max-width:400px;
  padding:0 24px;
}

/* スピナー */
#quinsel-l2 .q2-spinner{
  width:72px;height:72px;
  margin:0 auto 28px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.12);
  border-top-color:#a5b4fc;
  animation:q2spin 1s linear infinite;
}
@keyframes q2spin{
  to{ transform:rotate(360deg); }
}

/* パルスドット */
#quinsel-l2 .q2-loading__dots{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:20px;
}
#quinsel-l2 .q2-loading__dot{
  width:8px;height:8px;
  border-radius:50%;
  background:#a5b4fc;
  opacity:.3;
  animation:q2pulse 1.4s ease-in-out infinite;
}
#quinsel-l2 .q2-loading__dot:nth-child(2){ animation-delay:.2s; }
#quinsel-l2 .q2-loading__dot:nth-child(3){ animation-delay:.4s; }
@keyframes q2pulse{
  0%,100%{ opacity:.3;transform:scale(.8); }
  50%{ opacity:1;transform:scale(1.1); }
}

#quinsel-l2 .q2-loading__title{
  font-size:20px;
  font-weight:900;
  margin:0 0 10px;
  letter-spacing:.02em;
}
#quinsel-l2 .q2-loading__sub{
  font-size:14px;
  opacity:.6;
  line-height:1.75;
  margin:0;
}
#quinsel-l2 .q2-loading__steps{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
}
#quinsel-l2 .q2-loading__step{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  opacity:.4;
  transition:opacity .6s;
}
#quinsel-l2 .q2-loading__step.is-active{
  opacity:1;
}
#quinsel-l2 .q2-loading__step-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:#a5b4fc;
  flex-shrink:0;
}
#quinsel-l2 .q2-loading__step.is-active .q2-loading__step-dot{
  box-shadow:0 0 0 4px rgba(94,234,212,.2);
}

/* ==========================================================
   Mobile adjustments
========================================================== */
@media(max-width:768px){
  #quinsel-l2 .q2-hero{ padding:26px 20px;border-radius:18px; }
  #quinsel-l2 .q2-section{ padding:24px 20px;border-radius:20px; }
  #quinsel-l2 .q2-btn{ padding:14px 20px;font-size:14px; }
  #quinsel-l2 .q2-check{ padding:10px 12px; }
}