/* =====================================================================
   마이페이지 · 계정 관리 탭 (#my-plan)
   ---------------------------------------------------------------------
   [2026-10-07] 바꿀 수 있는 것과 없는 것이 한눈에 갈리게 다시 정리했다.
     ① 계정 요약       누구인지 한 덩어리 (좌우로 벌리지 않는다)
     ② 기본 정보       읽기 전용 2열 표 — 단추가 없다
     ③ 개인 설정·보안   행 오른쪽 같은 자리에 같은 이름('변경')의 단추
   그룹 사이에만 옅은 선을 두고, 그룹 안은 여백으로 나눈다. 그림자는 쓰지 않는다.

   그리는 곳: assets/js/learning-portal.js 의 renderAccountSettings()
   옛 '.account-*' 규칙(mypage-redesign.css)과 섞이지 않게 새 이름 '.acct-*' 를 쓰고,
   모두 #my-plan 안으로 범위를 좁혔다.
   ===================================================================== */

/* ── 탭 카드 ────────────────────────────────────────────────────────── */
#my-plan .account-only-card{
  padding:0!important;
  border:1px solid #ECECF3!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:none!important;
  overflow:hidden;
}
#my-plan .account-only-card > .portal-card-head{display:none!important;}

#my-plan .acct-root{
  padding:20px 22px 22px;
  color:#344054;
  letter-spacing:-.02em;
  word-break:keep-all;
}
#my-plan .acct-root [hidden]{display:none!important;}

/* ── ① 계정 요약 ───────────────────────────────────────────────────── */
#my-plan .acct-me{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border:1px solid #F2F3F7;
  border-radius:14px;
  background:#FAFAFC;
}
#my-plan .acct-me-av{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:999px;
  background:#6C5CE7;
  color:#fff;
  font-size:1.14rem;
  font-weight:800;
}
#my-plan .acct-me-copy{min-width:0;}
#my-plan .acct-me-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
#my-plan .acct-me-name strong{color:#111827;font-size:1.224rem;font-weight:800;letter-spacing:-.04em;}
#my-plan .acct-me-mail{margin:3px 0 0;color:#667085;font-size:.96rem;overflow-wrap:anywhere;}

/* ── 칩: 권한(속성)과 상태(지금 값)의 모양을 다르게 ─────────────────── */
#my-plan .acct-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:22px;
  padding:0 9px;
  border-radius:999px;
  font-size:.864rem;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
}
#my-plan .acct-chip.role{border:1px solid #C9D2E4;background:#fff;color:#001E5C;}
#my-plan .acct-chip.state{border:1px solid #C6EBD6;background:#ECFDF3;color:#067647;}
#my-plan .acct-chip.state::before,
#my-plan .acct-chip.wait::before{content:"";width:5px;height:5px;border-radius:999px;background:currentColor;}
#my-plan .acct-chip.wait{border:1px solid #F3DFB0;background:#FFF8E8;color:#8A5A00;}
#my-plan .acct-chip.ro{border:1px solid #E7EAF1;background:#F7F8FB;color:#667085;font-weight:700;}

/* ── 그룹 ──────────────────────────────────────────────────────────── */
#my-plan .acct-group{margin-top:20px;}
#my-plan .acct-group + .acct-group{padding-top:18px;border-top:1px solid #F0F1F6;}
#my-plan .acct-gh{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 11px;}
#my-plan .acct-gh h2{margin:0;color:#111827!important;font-size:1.116rem!important;font-weight:800;letter-spacing:-.035em;line-height:1.4;}
#my-plan .acct-gh-sub{margin-left:auto;color:#98A2B3;font-size:.912rem;font-weight:400;}

/* ── ② 기본 정보 (읽기 전용) ───────────────────────────────────────── */
#my-plan .acct-ro-wrap{
  padding:15px 18px;
  border:1px solid #F2F3F7;
  border-radius:14px;
  background:#FAFAFC;
}
#my-plan .acct-ro{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:34px;
  row-gap:14px;
  margin:0;
}
#my-plan .acct-cell{min-width:0;}
#my-plan .acct-cell dt{margin:0 0 3px;color:#9AA2B1;font-size:.894rem;font-weight:700;letter-spacing:-.01em;}
#my-plan .acct-cell dd{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:0;
  color:#4A5162;
  font-size:1.074rem;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.4;
  overflow-wrap:anywhere;
}
#my-plan .acct-help{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:0;
  padding-top:12px;
  color:#8A91A0;
  font-size:.93rem;
  line-height:1.5;
}
#my-plan .acct-help i{flex:0 0 auto;font-style:normal;opacity:.7;}
#my-plan .acct-help b{color:#667085;font-weight:700;}

/* ── ③ 편집 행 ─────────────────────────────────────────────────────── */
#my-plan .acct-grid{display:grid;}
#my-plan .acct-grid.g1{grid-template-columns:minmax(0,1fr);}
#my-plan .acct-grid.g1 > .acct-row{max-width:700px;}
#my-plan .acct-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:2px;align-items:start;}
#my-plan .acct-row{
  display:grid;
  grid-template-columns:82px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:36px;
  min-width:0;
}
#my-plan .acct-grid.g2 .acct-row{grid-template-columns:72px minmax(0,1fr) auto;gap:12px;}
#my-plan .acct-row-label{color:#6B7280;font-size:.96rem;font-weight:700;letter-spacing:-.02em;transition:color .14s ease;}
#my-plan .acct-row.is-editing .acct-row-label{color:#B6BCC8;}
#my-plan .acct-row-val{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
  color:#344054;
  font-size:1.062rem;
  font-weight:700;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
#my-plan .acct-row-val .is-empty{color:#98A2B3;font-weight:500;}
#my-plan .acct-row-acts{display:flex;align-items:center;gap:4px;}
#my-plan .acct-dots{color:#6B7280;font-size:1.14rem;letter-spacing:.12em;}
#my-plan .acct-saved{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#067647;
  font-size:.9rem;
  font-weight:700;
  animation:acctSavedIn .2s ease;
}
/* 이미 보이는 상태에서 살짝 떠오르기만 한다 (투명에서 시작하지 않는다 —
   뒤에 숨은 탭에서 애니메이션이 멈추면 글이 안 보이게 남는다) */
@keyframes acctSavedIn{from{transform:translateY(3px);}to{transform:none;}}

/* 편집 칸 — 라벨 칸은 그대로 두고 값 자리부터 끝까지만 쓴다 (자리가 튀지 않게) */
#my-plan .acct-edit{grid-column:2 / -1;display:grid;gap:8px;min-width:0;padding:5px 0 10px;}
#my-plan .acct-edit-main{display:grid;gap:6px;min-width:0;max-width:520px;}
#my-plan .acct-edit-main.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;}
#my-plan .acct-edit-main.two > div{display:grid;gap:6px;min-width:0;}
#my-plan .acct-edit-label{color:#667085;font-size:.9rem;font-weight:700;}
#my-plan .acct-edit-inline{display:flex;gap:8px;min-width:0;}
#my-plan .acct-edit-inline .acct-input{flex:1 1 auto;}
#my-plan .acct-edit-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
#my-plan .acct-edit-hint{color:#B6BCC8;font-size:.864rem;font-weight:500;}

#my-plan .acct-input{
  width:100%;
  min-width:0;
  height:38px;
  padding:0 12px;
  border:1px solid #E2E5EE;
  border-radius:10px;
  background:#fff;
  color:#111827;
  font-family:inherit;
  font-size:1.044rem!important;   /* 공용 규칙이 입력칸·단추 글자를 1rem!important 로 묶어서 이겨야 한다 */
  font-weight:600;
  letter-spacing:-.03em;
  transition:border-color .2s ease,box-shadow .2s ease;
}
#my-plan .acct-input::placeholder{color:#B6BCC8;font-weight:500;}
#my-plan .acct-input:focus{outline:none;border-color:#6C5CE7;box-shadow:0 0 0 3px rgba(108,92,231,.12);}
#my-plan .acct-edit:has(.acct-msg.error) .acct-input{border-color:#E8B4AE;box-shadow:0 0 0 3px rgba(180,35,24,.08);}
#my-plan .acct-edit:has(.acct-msg.error) .acct-input:focus{border-color:#B42318;}

#my-plan .acct-msg{margin:0;color:#8A91A0;font-size:.918rem;font-weight:500;line-height:1.5;}
#my-plan .acct-msg:empty{display:none;}
#my-plan .acct-msg b{color:#5A4BD4;font-weight:700;}
#my-plan .acct-msg.error{color:#B42318;font-weight:700;}
#my-plan .acct-msg.success{color:#067647;font-weight:700;}
#my-plan .acct-msg.error b,#my-plan .acct-msg.success b{color:inherit;}

/* ── 단추 ───────────────────────────────────────────────────────────── */
#my-plan .acct-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  min-width:52px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#5A4BD4;
  font-family:inherit;
  font-size:.954rem!important;
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
#my-plan .acct-btn:hover{background:#F0EDFF;border-color:#D5D0FF;}
#my-plan .acct-btn:focus-visible{outline:3px solid rgba(91,75,232,.32);outline-offset:2px;}
#my-plan .acct-btn.quiet{color:#4B5563;}
#my-plan .acct-btn.quiet:hover{background:#F4F5F8;border-color:#E7EAF1;color:#1F2937;}
#my-plan .acct-btn.bordered{border-color:#E2E5EE;background:#fff;}
#my-plan .acct-btn.line{flex:0 0 auto;height:38px;border-color:#D5D0FF;background:#fff;}
#my-plan .acct-btn.line:hover{background:#FBFAFF;border-color:#6C5CE7;}
#my-plan .acct-btn.solid{background:#6C5CE7;border-color:#6C5CE7;color:#fff;}
#my-plan .acct-btn.solid:hover{background:#5A4BD4;border-color:#5A4BD4;}
#my-plan .acct-btn.text{min-width:0;height:30px;padding:0 8px;color:#8A91A0;font-size:.906rem!important;}
#my-plan .acct-btn.text:hover{background:transparent;border-color:transparent;color:#5A4BD4;}
#my-plan .acct-btn:disabled{opacity:.55;cursor:not-allowed;}

/* ── 로그아웃 ───────────────────────────────────────────────────────── */
#my-plan .acct-leave{
  margin-top:20px;
  padding:15px 18px 16px;
  border:1px solid #F2F3F7;
  border-radius:14px;
  background:#FAFAFC;
}
#my-plan .acct-leave .acct-gh{margin-bottom:6px;}
#my-plan .acct-leave p{margin:0 0 10px;color:#8A91A0;font-size:.93rem;line-height:1.55;}
#my-plan .acct-acts{display:flex;flex-wrap:wrap;gap:6px;}

/* ── 아래 문의 줄 ──────────────────────────────────────────────────── */
#my-plan .acct-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 0;
  color:#98A2B3;
  font-size:.912rem;
  text-align:center;
}
#my-plan .acct-foot a{color:#5A4BD4;font-weight:700;text-decoration:none;}
#my-plan .acct-foot a:hover{text-decoration:underline;}
#my-plan .acct-foot a:focus-visible{outline:3px solid rgba(91,75,232,.32);outline-offset:2px;border-radius:4px;}
#my-plan .acct-foot .sep{color:#DCE0E8;}

/* ── 반응형 ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  #my-plan .acct-grid.g2,
  #my-plan .acct-ro{grid-template-columns:minmax(0,1fr);}
  #my-plan .acct-grid.g2 .acct-row{grid-template-columns:82px minmax(0,1fr) auto;gap:14px;}
}
@media (max-width:640px){
  #my-plan .acct-root{padding:16px 15px 18px;}
  #my-plan .acct-me{align-items:flex-start;padding:14px;}
  #my-plan .acct-gh-sub{margin-left:0;flex-basis:100%;}
  #my-plan .acct-row,
  #my-plan .acct-grid.g2 .acct-row{grid-template-columns:64px minmax(0,1fr) auto;gap:10px;}
  /* 좁으면 편집 칸은 행 전체 폭을 쓴다 */
  #my-plan .acct-edit{grid-column:1 / -1;}
  #my-plan .acct-edit-main.two{grid-template-columns:minmax(0,1fr);}
  /* 손가락으로 누르는 자리는 44px 을 지킨다 */
  #my-plan .acct-btn,
  #my-plan .acct-btn.line{height:44px;padding:0 14px;}
  #my-plan .acct-btn.text{height:36px;}
  #my-plan .acct-input{height:44px;font-size:1.2rem!important;}   /* 16px 밑이면 아이폰이 화면을 확대한다 */
  #my-plan .acct-edit-hint{display:none;}
}

@media (prefers-reduced-motion: reduce){
  #my-plan .acct-root *{animation:none!important;transition:none!important;}
}