/* ===================================================================
   PROFILE ASK LIST — Grid Style (Hard lock: card fixed, text-only shift)
   =================================================================== */

#profile .about-text .ask-list.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
  grid-auto-rows:minmax(56px, auto);
}

#profile .about-text .ask-list.grid li{
  position: relative;
  display:flex; align-items:center; gap:10px;
  box-sizing:border-box;
  min-height:56px;
  padding:14px 16px;
  background:#414244;
  color:#fff;

  /* 시각만 강조: 레이아웃 고정 */
  border:2px solid #e7e7e7;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);

  /* 카드 이동 차단 */
  transform:none !important;
  translate: none !important;
  margin-top:0 !important;
  top:0 !important;
  animation:none !important;

  /* hover 시에도 transform 적용 안 함 */
  transition: border-color .25s ease, box-shadow .25s ease;
}

#profile .about-text .ask-list.grid li:hover{
  /* 테두리 두께 유지, 박스섀도우도 동일 → '박스가 떠오르는' 착시 제거 */
  border-color:#e7e7e7;
  box-shadow:0 2px 10px rgba(0,0,0,.04), inset 0 0 0 2px #e53935; /* 빨간 아웃라인만 추가 */
}

/* 첫번째 그리드 박스 - 세로 빨간 테두리 두께 2배 */
#profile .about-text .ask-list.grid li:first-child {
  position: relative;
}
#profile .about-text .ask-list.grid li:first-child::before,
#profile .about-text .ask-list.grid li:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;               /* 기존 2px → 두 배 굵기 */
  background: #e53935;      /* 빨간색 */
}
#profile .about-text .ask-list.grid li:first-child::before { left: 0; }
#profile .about-text .ask-list.grid li:first-child::after { right: 0; }

/* 텍스트만 살짝 위로 (번호 .num 제외) */
#profile .about-text .ask-list.grid li > :not(.num){
  transition: transform .35s ease;
  will-change: transform;
}
#profile .about-text .ask-list.grid li:hover > :not(.num){
  transform: translateY(-6px);
}

/* 번호 뱃지는 고정 */
#profile .about-text .ask-list.grid li .num{
  font:700 12px/1.2 ui-monospace,Menlo,Consolas,monospace;
  color:#8f8f8f; background:#f5f5f5; border-radius:6px;
  padding:6px 8px; letter-spacing:.06em;
  flex:0 0 auto;
}

/* PC: 2칸. 내용 폭에 따라 잘림 방지용 minmax(0,1fr) 사용 */
@media (min-width:768px){
  #profile .about-text .ask-list.grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px;
  }
  #profile .about-text .ask-list.grid li{ font-size:clamp(14px,1vw,18px); }
}

/* 모바일 폰트 스케일 */
@media (max-width:767.9px){
  #profile .about-text .ask-list.grid li{ font-size:clamp(13px,3.2vw,16px); }

  /* 첫번째 항목만 +2pt */
  #profile .about-text .ask-list.grid li:first-child {
    font-size: calc(1em + 2pt);
  }
}

/* ========== Mobile-only ask-list ticker: 카드 이동 금지 유지 ========== */
@media (max-width: 767.9px){
  #profile .about-text .ask-viewport-mobile{ overflow:hidden; display:block; }
  #profile .about-text .ask-list.grid{
    margin:0 !important; padding:0 !important; list-style:none !important;
    will-change: transform; transition: transform .6s ease;
  }
  #profile .about-text .ask-list.grid li{
    min-height:48px;
  }
  #profile .about-text .ask-list.grid li.active{
    /* 카드 이동 금지 + 빨간 강조는 inset outline로만 */
    box-shadow:0 2px 10px rgba(0,0,0,.04), inset 0 0 0 2px #e53935 !important;
    border-color:#e7e7e7 !important;
    font-weight:800; font-size:1.1em;
  }
}


/* ===========================================================
   Mobile: bar appears AFTER the roll finishes
   - Start delay: 0.3s
   - Animation duration: 0.5s
   =========================================================== */
@media (max-width: 767.9px){
  #profile .about-text .ask-list.grid li{
    position: relative;
    overflow: hidden;
  }
  #profile .about-text .ask-list.grid li::after{
    content: "";
    position: absolute;
    top: 0; right: 0; height: 100%;
    width: 0;
    background: #e53935;
    pointer-events: none;
    transform-origin: right center;
  }
  #profile .about-text .ask-list.grid li.active::after{
    animation: asklistMobileBarIn 0.5s ease forwards;
    animation-delay: 0.3s; /* shorter delay */
  }

  @keyframes asklistMobileBarIn{
    from{ width: 0; }
    to{   width: 39%; }
  }
}