/* =========================
   AntQuiz Top (FULL)
   - list area redesigned (left3 right7)
   - mobile keeps same layout (no stacking)
========================= */

:root{
  --maroon: #8f373a;
  --maroon2: #8f373a;
  --blue: #45a1cf;
  --line: #e9e9e9;
  --text: #222;
  --muted: #666;
  --muted2:#999;
}

*{ box-sizing: border-box; }

body{
  font-family: "Montserrat","Yu Gothic",sans-serif;
  background:#fff;
  margin:0;
  padding:0;
  height:100%;
  color: var(--text);
}

h1{
  color: var(--maroon);
  margin: 25px auto;
}

/* =========================
   Header
========================= */
.quiz-header{
  padding: 10px 0;
}

.quiz-header-inner{
  width: min(92%, 980px);
  margin: 0 auto;
  display:flex;
  align-items:center;
}

.quiz-site-logo{
  width: 80px;
  height:auto;
}

/* =========================
   Slider
========================= */
.quiz-slider{
  position: relative;
  width: min(92%, 980px);
  margin: 0 auto;
  overflow:hidden;
}

.quiz-slide{
  display:none;
  width:100%;
}
.quiz-slide.active{ display:block; }

.quiz-slide img{
  width:100%;
  display:block;
}

.quiz-slide-nav{
  text-align:center;
  margin-top:10px;
}

.dot{
  height:12px;
  width:12px;
  margin:0 5px;
  background:#ccc;
  border-radius:50%;
  display:inline-block;
  cursor:pointer;
}
.dot.active{ background: var(--maroon2); }

/* arrows */
.slide-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  font-size:48px;
  font-weight:bold;
  color: rgba(255,255,255,0.85);
  background:transparent;
  cursor:pointer;
  z-index:10;
  user-select:none;
  transition: color .2s;
}
.slide-arrow:hover{ color: rgba(0,0,0,0.6); }
.slide-prev{ left:16px; }
.slide-next{ right:16px; }

/* =========================
   Container / Title / Tabs
========================= */
.quiz-list-container{
  width: min(880px);
  margin: 10px auto 0;
  background:#fff;
  padding: 8px 16px 10px;
  border-radius: 10px;
}

.quiz-list-title{
  text-align:center;
  font-size: 28px;
  font-weight: 800;
  padding: 10px 0;
  border-top: 3px solid var(--maroon);
  border-bottom: 2px solid var(--maroon);
  margin: 0 0 10px;
}

.quiz-tabs{
  display:flex;
  justify-content:center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 2px solid var(--maroon);
  margin-bottom: 22px;
}

.tab{
  position: relative;
  flex: 0 1 260px;
  padding: 10px 0;
  background:none;
  border:1px solid var(--muted2);
  color: var(--muted2);
  font-weight:700;
  cursor:pointer;
  transition: all .2s;
  border-radius: 999px;
}

.tab.active{
  background: var(--maroon);
  color:#fff;
  border-color: var(--maroon);
}

/* triangle */
.tab.active::after{
  content:"";
  position:absolute;
  bottom:-12px;
  left:50%;
  transform: translateX(-50%);
  width:0;
  height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:12px solid var(--maroon2);
}

/* =========================
   LIST v2 (Left 3 : Right 7)
========================= */
#quiz-list{
  border-top: 1px solid var(--line);
}

/* row */
#quiz-list .quiz-item{
  display:flex;
  align-items:center;
  gap: 0;
  padding: 0;
  min-height: 110px;
  border-top: 1px solid var(--line);
  background:#fff;
}

/* disabled look */
#quiz-list .quiz-item.disabled{
  background: rgba(0,0,0,0.05);
  opacity: 0.6;
  pointer-events:none;
}

/* left */
#quiz-list .quiz-left{
  flex: 0 0 20%;
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* category row */
#quiz-list .quiz-category-row{
  display:flex;
  align-items:center;
  gap: 8px;
}

/* colored square (keep inline style from JS) */
#quiz-list .quiz-category-box{
  width: 18px;
  height: 18px;
  position: static;     /* kill old absolute */
  border-radius: 0;
  flex: 0 0 auto;
}
#quiz-list .quiz-category-text{
  font-size: 13px;
  color: var(--muted);
  margin:0;
  padding:0;
}

/* month (blue big) */
#quiz-list .quiz-month{
  font-weight: 900;
  color: var(--blue) !important;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .01em;
  font-size: 28px; /* ← 全体を小さめに固定 */
}

/* question count */
#quiz-list .quiz-qcount{
  font-size: 14px;
  color: #333;
  margin-top: -2px;
}

/* right */
#quiz-list .quiz-right{
  flex: 1;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  gap: 16px;
  min-width: 0;
}

/* main text block */
#quiz-list .quiz-main{
  flex: 1;
  min-width: 0;
}

/* title */
#quiz-list .quiz-title{
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* kashima box */
#quiz-list .quiz-info-box{
  display:inline-block;
  border: 1px solid #ddd;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  margin: 0;
}

/* right action area */
#quiz-list .quiz-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 14px;
  width: auto;
}

/* start button (keep colors) */
#quiz-list .quiz-button{
  background: linear-gradient(to right, #07a5d5 0%, #86cce9 100%);
  color:#fff;
  border:none;
  outline:none;
  cursor:pointer;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  min-width: 150px;
}

/* status */
#quiz-list .quiz-status{
  display:flex;
  flex-direction:column;
  align-items:center;
  border-left: 1px solid #ddd;
  padding: 6px 0 6px 14px;
  min-width: 78px;
  font-size: 14px;
  font-weight: bold;
  color: var(--blue);
  margin: 0;
}
#quiz-list .quiz-status img{
  width: 24px;
  height: 24px;
  margin-bottom: 3px;
}

/* =========================
   Footer
========================= */
.quiz-footer{
  background:#f2f2f2;
  padding: 40px 0;
  text-align:center;
  margin-top: 60px;
}

.site-logo-footer{
  width: 80px;
  height:auto;
  opacity:.9;
  transition: opacity .2s;
}
.site-logo-footer:hover{ opacity:1; }

/* =========================
   Popup (keep your design)
========================= */
.quiz-popup-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999;
}

.quiz-popup{
  background:#fff;
  width: min(92%, 800px);
  padding: 30px 20px;
  text-align:left;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.wide-popup{
  max-width: 800px;
  padding: 40px;
  font-weight: bold;
}

.popup-header{
  display:flex;
  justify-content:flex-start;
}

.popup-back-circle{
  border: 1px solid #999;
  border-radius: 999px;
  padding: 6px 16px;
  background:#fff;
  font-size: 14px;
  color:#999;
  cursor:pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.popup-divider{
  border-top: 1px solid #ccc;
  margin: 12px 0;
}

.popup-divider.thin{
  border-top: 2px solid #ccc;
  margin: 8px 0;
}

.popup-divider.thick{
  border-top: 2px solid #ccc;
  margin: 8px 0 30px;
}

.popup-intro{
  margin: 10px 0;
  font-size: 14px;
  color:#444;
}

.popup-subtitle{
  color:#999;
  font-weight: normal;
  font-size: 14px;
  margin: 0;
}
.popup-subtitle.popup-left{ text-align:left; }
.popup-subtitle.popup-center{ text-align:center; }

.popup-title-blue{
  color:#2a7ab9;
  font-size: 18px;
  margin: 6px 0 12px;
}

.popup-red-list{
  list-style:none;
  padding-left:0;
  margin: 10px 0 20px;
}
.popup-red-list li{
  color:#d33;
  font-size: 12px;
}

.popup-username-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 28px;
}
.popup-username-label{
  width: 50%;
  font-size: 14px;
  text-align:right;
  padding-right: 10px;
}
.popup-username-input{
  width: 50%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.popup-username-input:focus{
  outline:none;
  border-color: var(--blue);
  box-shadow: 0 0 3px rgba(69,161,207,0.5);
}

.popup-buttons{
  text-align:center;
  margin-top: 16px;
}

#popup-confirm{
  background: linear-gradient(to right, #45a1cf 0%, #96cae4 100%);
  color:#fff;
  width: 30%;
  min-width: 140px;
  border:none;
  border-radius: 20px;
  font-weight: 800;
  cursor:pointer;
  padding: 10px 18px;
}



@media (max-width: 768px){

  /* 全体をさらにコンパクトに */
  .quiz-header-inner,
  .quiz-slider,
  .quiz-list-container{
    width: min(94%, 980px);
  }

  .quiz-list-container{
    padding: 4px 8px 6px;
  }

  .quiz-list-title{
    font-size: 16px;
    padding: 6px 0;
  }

  .quiz-tabs{
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 12px;
  }

  .tab{
    flex-basis: 48%;
    padding: 7px 0;
    font-size: 11px;
  }

  .tab.active::after{
    bottom: -9px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #b91c3b;
  }

  /* LIST: 2カラム固定のまま超縮小 */
  #quiz-list .quiz-item{
    min-height: 92px;
  }

  #quiz-list .quiz-left{
    flex: 0 0 20%;
    padding: 8px 0px;
    gap: 5px;
  }

  #quiz-list .quiz-category-row{
    gap: 4px;
  }

  #quiz-list .quiz-category-box{
    width: 12px;
    height: 12px;
  }

  #quiz-list .quiz-category-text{
    font-size: 8px;
  }

  /* ←ここが希望：16px */
  #quiz-list .quiz-month{
    font-size: 16px;
    margin-top: 4px;
    font-weight: 800;
    line-height: 1.05;
  }

  #quiz-list .quiz-qcount{
    font-size: 10px;
    margin-top: -2px;
  }

#quiz-list .quiz-right{
  padding: 0px 0px;
  gap: 0px;
}
#quiz-list .quiz-action{
  gap: 6px;
}

  /* タイトルも小さく、崩れにくく */
#quiz-list .quiz-title{
  font-size: 16px;
  line-height: 1.15;
  margin: 0 0 0px;

  white-space: nowrap;      /* ←改行しない */
  overflow: hidden;         /* はみ出た分は隠す */
  text-overflow: ellipsis;  /* …で省略 */
}


  #quiz-list .quiz-info-box{
    font-size: 8px;
    padding: 1px 5px;
  }

  #quiz-list .quiz-action{
    gap: 8px;
  }

#quiz-list .quiz-button{
  min-width: 56px;
  padding: 8px 12px;
  font-size: 9px;
}


  #quiz-list .quiz-status{
    min-width: 46px;
    padding-left: 7px;
    font-size: 9px;
  }

  #quiz-list .quiz-status img{
    width: 16px;
    height: 16px;
  }

  /* Footerも小さく */
  .quiz-footer{
    padding: 22px 0;
    margin-top: 34px;
  }
  .site-logo-footer{
    width: 56px;
  }

  /* popupも小さく */
  .popup-username-label{ display:none; }
  .popup-title-blue{ font-size: 15px; }
  .popup-intro{ font-size: 12px; }
  #popup-confirm{
    width: auto;
    min-width: 110px;
    padding: 8px 14px;
    font-size: 13px;
  }
}


@media (max-width: 768px){

  /* タイトルを絶対1行（強制） */
  #quiz-list .quiz-title{
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
    margin-top: 14px;
  }

  /* タイトル内に br が混ざってたら潰す（JS改行対策） */
  #quiz-list .quiz-title br{
    display: none !important;
  }

  /* 右側の本文エリアを広げる（改行発生を防ぐ） */
  #quiz-list .quiz-left{ flex: 0 0 18% !important; }
  #quiz-list .quiz-main{ min-width: 0 !important; }
  #quiz-list .quiz-right{ gap: 6px !important; }


}


/* =========================
   AntQuiz popup username (SP fix)
========================= */

/* まずはラベルが消されてても出るように強制 */
.popup-username-label{
  display:block !important;
}

/* スマホは「縦積み」＋ input 100% */
@media (max-width: 768px){
  .popup-username-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    height:auto !important;
    overflow:visible !important;
    margin-top:10px;
  }

  .popup-username-label{
    font-size:10px;
    line-height:1.4;
    color:#666;
    text-align:center; /* 好みで left にしてもOK */
  }

  .popup-username-input{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    padding:12px 14px;
    font-size:16px;
    border:1px solid #e2e2e2;
    border-radius:10px;
    text-align:left; /* 好みで left にしてもOK */
  }
}

@media (max-width: 768px){

  /* ✅ row自体をポップアップ内フル幅に */
  .popup-username-row{
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0 0;    /* ← 左寄り防止（autoは不要） */
    min-width: 0;
  }

  /* ✅ ラベルもフル幅＋中央 */
  .popup-username-label{
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    text-align: center;
    margin: 0;
  }

  /* ✅ 入力欄をフル幅 */
  .popup-username-input{
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
  }
}

.quiz-item--notice .quiz-button{
  cursor: not-allowed;
}