/* =====================================================================
   마이페이지 머리(제목 + 탭) — 네 탭이 함께 쓰는 한 장
   ---------------------------------------------------------------------
   [2026-10-07] 왜 다시 만들었나
     예전 머리는 제목(최대 48px)·부제·큰 보라 버튼이 그림자 있는 큰 카드에 들어
     있고, 그 밑에 탭 줄이 따로 떠 있었다. 화면에서 가장 큰 글자가 '계정 관리'
     같은 탭 이름이라, 정작 봐야 할 내용이 아래로 밀렸다.
     → 제목은 한 줄로 줄이고, 탭을 같은 카드 안 아래쪽에 붙였다.
       그림자 없이 1px 테두리만 쓴다(마이페이지 다른 카드와 같은 규칙).

   mypage-redesign.css 에 같은 대상을 !important 로 덮어 둔 규칙이 여러 겹
   쌓여 있어서, 여기서는 '.mypage-head-card' 안으로 범위를 좁혀 확실히 이긴다.
   (그 옛 규칙을 지우면 다른 탭 작업과 부딪혀서 이번에는 두었다.)
   ===================================================================== */

body .mypage-page .mypage-head-card{
  width:100%;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #ECECF3;
  border-radius:16px;
  box-shadow:none;
  overflow:hidden;
  min-width:0;
}

/* ── 제목 줄 ─────────────────────────────────────────────────────── */
body .mypage-page .mypage-head-card .my-clean-header{
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin:0!important;
  padding:14px 22px 10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  min-height:0!important;
}
body .mypage-page .mypage-head-card .my-clean-header::before,
body .mypage-page .mypage-head-card .my-clean-header::after{display:none!important;}
body .mypage-page .mypage-head-card .my-clean-header > div:first-child{flex:1 1 auto!important;width:auto!important;min-width:0!important;padding:0!important;}

body .mypage-page .mypage-head-card .my-clean-header .portal-kicker{
  margin:0 0 4px!important;
  color:#6C5CE7!important;
  font-size:.7rem!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
  text-transform:uppercase;
  line-height:1.3!important;
}
body .mypage-page .mypage-head-card .my-clean-header h1{
  margin:0!important;
  padding:0!important;
  color:#111827!important;
  font-size:1.34rem!important;
  font-weight:800!important;
  letter-spacing:-.045em!important;
  line-height:1.24!important;
  word-break:keep-all!important;
}
body .mypage-page .mypage-head-card .my-clean-header p:not(.portal-kicker){
  margin:3px 0 0!important;
  color:#667085!important;
  font-size:.815rem!important;
  font-weight:400!important;
  line-height:1.45!important;
  word-break:keep-all;
}

/* 오른쪽 '내 공부방 바로가기' — 핵심 행동이 아니라 작게, 테두리만 */
body .mypage-page .mypage-head-card .portal-topbar-actions{
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  align-self:flex-start!important;
}
body .mypage-page .mypage-head-card .portal-topbar-actions .portal-btn{
  min-width:0!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 14px!important;
  border:1px solid #E2E5EE!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#4B5563!important;
  font-size:.8rem!important;
  font-weight:700!important;
  letter-spacing:-.02em;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
body .mypage-page .mypage-head-card .portal-topbar-actions .portal-btn:hover{
  border-color:#D5D0FF!important;
  background:#FBFAFF!important;
  color:#5A4BD4!important;
  transform:none!important;
}

/* ── 탭 줄 (카드 아래쪽에 붙는다) ───────────────────────────────────── */
body .mypage-page .mypage-head-card .mypage-tabs-bar{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:2px!important;
  margin:0!important;
  padding:0 12px!important;
  border:0!important;
  border-top:1px solid #F0F1F6!important;
  background:transparent!important;
  overflow-x:auto;
  scrollbar-width:none;
}
body .mypage-page .mypage-head-card .mypage-tabs-bar::-webkit-scrollbar{display:none;}
body .mypage-page .mypage-head-card .mypage-tabs-bar button{
  position:relative;
  flex:0 0 auto;
  min-height:42px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#8A91A0!important;
  font-size:.855rem!important;
  font-weight:700!important;
  letter-spacing:-.03em!important;
  white-space:nowrap;
  transition:color .14s ease;
}
body .mypage-page .mypage-head-card .mypage-tabs-bar button:hover{color:#5F677A!important;}
body .mypage-page .mypage-head-card .mypage-tabs-bar button.active{color:#4C3FD6!important;}
body .mypage-page .mypage-head-card .mypage-tabs-bar button.active::after{
  content:""!important;
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  bottom:0!important;
  height:2px!important;
  border-radius:2px!important;
  background:#6C5CE7!important;
}
body .mypage-page .mypage-head-card .mypage-tabs-bar button:focus-visible{
  outline:3px solid rgba(91,75,232,.32);
  outline-offset:-3px;
}

/* ── 좁은 화면 ───────────────────────────────────────────────────── */
@media (max-width:640px){
  body .mypage-page .mypage-head-card .my-clean-header{
    flex-direction:column!important;
    gap:10px!important;
    padding:14px 16px 10px!important;
  }
  body .mypage-page .mypage-head-card .portal-topbar-actions{width:100%!important;}
  body .mypage-page .mypage-head-card .portal-topbar-actions .portal-btn{width:100%!important;}
  /* 누를 자리는 손가락 폭(44px)을 지킨다 */
  body .mypage-page .mypage-head-card .portal-topbar-actions .portal-btn{
    height:44px!important;
    min-height:44px!important;
  }
}
/* 휴대폰에서는 탭을 같은 폭으로 나눠 '크레딧 관리' 가 밖으로 잘리지 않게 한다
   (2026-10-04 에 고친 것을 새 머리에서도 지킨다). 글이 길면 낱말 단위로 접는다.
   [2026-11-02] '공부시간' 탭이 더해져 다섯 칸. */
@media (max-width:560px){
  body .mypage-page .mypage-head-card .mypage-tabs-bar{
    display:grid!important;
    grid-template-columns:repeat(5, minmax(0, 1fr))!important;
    padding:0 6px!important;
    overflow:visible;
  }
  body .mypage-page .mypage-head-card .mypage-tabs-bar button{
    min-width:0!important;
    min-height:44px!important;
    padding:6px 4px!important;
    font-size:.82rem!important;
    line-height:1.25!important;
    text-align:center!important;
    white-space:normal;
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
  }
  body .mypage-page .mypage-head-card .mypage-tabs-bar button.active::after{left:8px!important;right:8px!important;}
}

@media (prefers-reduced-motion: reduce){
  body .mypage-page .mypage-head-card *{transition:none!important;animation:none!important;}
}