/* 클래버 — 담당 acct 의 화면 CSS(수강생 화면). 클래스 접두어는 .acct- 만. 토큰은 base.css :root 의 var(--…) 만(hex·rgb 직접 금지), 크기는 rem. */
/* 회원가입·약관·완료·아이디/비밀번호 찾기·재설정·로그인 보조·마이페이지(틀·요약·알림)·내 정보·비밀번호·알림 설정·탈퇴·1:1 문의. 휴대폰(390px) 먼저. */

/* ── 공통 ─────────────────────────── */
.acct-2col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 960px) { .acct-2col { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-5); } }
.acct-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.acct-form-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 640px) { .acct-form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acct-actions { justify-content: space-between; }
.acct-msg { display: flex; align-items: flex-start; gap: .375rem; font-size: var(--fs-sm); font-weight: 650; }
.acct-msg.is-ok { color: var(--ok); }
.acct-msg.is-err { color: var(--danger); }
.acct-msg .ic { margin-top: .1875rem; flex: none; }
.acct-ok-txt { display: inline-flex; align-items: center; gap: .25rem; color: var(--ok); }
.acct-select-sm { width: auto; min-width: 8.5rem; }
.acct-dots { display: flex; flex-direction: column; gap: .4rem; color: var(--ink-2); }
.acct-dots li { position: relative; padding-left: .9rem; }
.acct-dots li::before { content: ""; position: absolute; left: 0; top: .65em; width: .3rem; height: .3rem; border-radius: 50%; background: var(--line-strong); }
.acct-alt { display: flex; flex-direction: column; gap: var(--sp-1); }
.acct-alt .btn { justify-content: flex-start; width: 100%; }
.acct-one { margin: 0 auto; max-width: 32rem; }
.acct-state { text-align: center; padding: var(--sp-4) 0; }
.acct-state .ico-box { margin: 0 auto var(--sp-3); }
.acct-state h2 { font-size: var(--fs-h4); }
.acct-state p { margin-top: .375rem; }

/* 값 목록(가입 정보·문의 정보·현재 정보) */
.acct-pv { display: flex; flex-direction: column; }
.acct-pv > div { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: .65rem 0; border-bottom: .0625rem solid var(--line); }
.acct-pv > div:last-child { border-bottom: 0; }
.acct-pv dt { color: var(--ink-3); font-size: var(--fs-sm); flex: none; }
.acct-pv dd { text-align: right; font-weight: 650; overflow-wrap: anywhere; min-width: 0; }

/* ── 회원가입 ─────────────────────── */
.acct-roles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
@media (min-width: 520px) { .acct-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acct-role { position: relative; display: block; cursor: pointer; }
.acct-role input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.acct-role-box { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 4.5rem; padding: .85rem 1rem; border: .09375rem solid var(--line-input); border-radius: var(--r); background: var(--surface); transition: border-color var(--t-short) var(--ease), background-color var(--t-short) var(--ease); }
.acct-role-box b { display: block; }
.acct-role-box small { display: block; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; margin-top: .125rem; }
.acct-role:hover .acct-role-box { border-color: var(--ink-2); }
.acct-role input:checked + .acct-role-box { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 .0625rem var(--accent); }
.acct-role input:checked + .acct-role-box b { color: var(--accent-ink); }
.acct-role input:focus-visible + .acct-role-box { box-shadow: var(--focus); }
.acct-guide { position: sticky; top: calc(var(--header-h) + 1rem); }
@media (max-width: 959px) { .acct-guide { position: static; } }

/* 약관 동의 */
.acct-check-all b { font-size: var(--fs-lg); }
.acct-terms { display: flex; flex-direction: column; gap: var(--sp-2); }
.acct-term { padding: var(--sp-2) 0; border-bottom: .0625rem solid var(--line); }
.acct-term:last-child { border-bottom: 0; }
.acct-term-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.acct-term-row .check { flex: 1 1 16rem; }
.acct-term-doc { margin: var(--sp-1) 0 0 2.1rem; }
.acct-term-doc summary { cursor: pointer; color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 650; min-height: 2.75rem; display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.acct-term-doc .prose { max-height: 16rem; overflow-y: auto; margin-top: var(--sp-2); padding: var(--sp-3); border: .0625rem solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); }
@media (max-width: 640px) {
  .acct-term-row { flex-direction: column; align-items: stretch; }
  .acct-term-row .btn { align-self: flex-start; }
  .acct-term-doc { margin-left: 0; }
}

/* 가입 완료 */
.acct-done { text-align: center; }
.acct-done .ico-box { margin: 0 auto var(--sp-3); }
.acct-done h1 { font-size: var(--fs-h3); }
.acct-done > p { margin-top: .375rem; }
.acct-done-info { max-width: 26rem; margin: var(--sp-4) auto 0; text-align: left; padding: .25rem 1rem; border: .0625rem solid var(--line); border-radius: var(--r); background: var(--surface-3); }
.acct-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); counter-reset: acctn; }
@media (min-width: 720px) { .acct-next { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acct-next li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border: .0625rem solid var(--line); border-radius: var(--r); background: var(--surface); }
.acct-next b { display: block; }
.acct-next small { display: block; color: var(--ink-3); font-size: var(--fs-sm); margin-top: .125rem; }

/* 아이디 찾기 결과 · 로그인 보조 */
.acct-found { padding: var(--sp-4); border: .09375rem solid var(--accent); border-radius: var(--r); background: var(--accent-soft); }
.acct-found .acct-pv > div { border-color: var(--line-strong); }
.acct-found-v { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); margin: .25rem 0 var(--sp-2); overflow-wrap: anywhere; }
.acct-found-v .ic { color: var(--accent-ink); flex: none; }
.acct-login-help { margin-top: 0; }
.acct-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
.acct-facts li { display: flex; flex-direction: column; padding: .75rem .85rem; border: .0625rem solid var(--line); border-radius: var(--r); background: var(--surface); }
.acct-facts .num { font-size: var(--fs-h4); font-weight: 800; color: var(--ink); }
.acct-facts small { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; }

/* 비밀번호 규칙 목록 */
.acct-rules { display: flex; flex-wrap: wrap; gap: .25rem var(--sp-3); font-size: var(--fs-sm); color: var(--ink-3); }
.acct-rule { display: inline-flex; align-items: center; gap: .25rem; }
.acct-rule .acct-r-ok, .acct-rule .acct-r-bad { display: none; }
.acct-rule.is-ok { color: var(--ok); font-weight: 650; }
.acct-rule.is-ok .acct-r-ok { display: inline-block; }
.acct-rule.is-ok .acct-r-off, .acct-rule.is-bad .acct-r-off { display: none; }
.acct-rule.is-bad { color: var(--danger); font-weight: 700; }
.acct-rule.is-bad .acct-r-bad { display: inline-block; }

/* ── 마이페이지 틀 ─────────────────── */
.acct-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) { .acct-shell { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--sp-6); } }
.acct-main { min-width: 0; }
.acct-main > .page-head { padding-top: 0; }
.acct-side-box { background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r); }
.acct-side-sum { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 1rem; cursor: pointer; font-weight: 700; list-style: none; }
.acct-side-sum::-webkit-details-marker { display: none; }
.acct-side-cur { margin-left: auto; color: var(--accent-ink); font-size: var(--fs-sm); }
.acct-side-box[open] .acct-chev { transform: rotate(180deg); }
.acct-side-nav { display: flex; flex-direction: column; padding: var(--sp-2); border-top: .0625rem solid var(--line); }
.acct-side-nav a { display: flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 600; }
.acct-side-nav a .ic { color: var(--ink-3); flex: none; }
.acct-side-nav a:hover { background: var(--surface-3); color: var(--ink); }
.acct-side-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.acct-side-nav a[aria-current="page"] .ic { color: var(--accent-ink); }
.acct-side-nav .acct-side-home { font-weight: 800; }
.acct-side-grp { margin: var(--sp-3) .75rem .25rem; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
@media (min-width: 900px) {
  .acct-side { position: sticky; top: calc(var(--header-h) + 1rem); }
  .acct-side-sum { display: none; }
  .acct-side-nav { border-top: 0; }
}

/* 마이페이지 요약 */
.acct-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; }
.acct-avatar { width: 3.5rem; height: 3.5rem; }
.acct-avatar .ic { width: 1.75rem; height: 1.75rem; }
.acct-profile-name { font-size: var(--fs-h4); }
.acct-profile-act { grid-column: 1 / -1; }
@media (min-width: 720px) { .acct-profile { grid-template-columns: auto minmax(0, 1fr) auto; } .acct-profile-act { grid-column: auto; } }
.acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .acct-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.acct-stats .stat { min-width: 0; }
.acct-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 1100px) { .acct-dash { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.acct-noti { display: flex; flex-direction: column; margin-top: var(--sp-2); }
.acct-noti li + li { border-top: .0625rem solid var(--line); }
.acct-noti-btn { display: grid; grid-template-columns: .5rem minmax(0, 1fr); gap: .25rem var(--sp-3); align-items: center; width: 100%; min-height: 3.25rem; padding: .6rem .25rem; text-align: left; border-radius: var(--r-sm); }
.acct-noti-btn:hover { background: var(--surface-3); }
.acct-noti-dot { width: .5rem; height: .5rem; border-radius: 50%; background: transparent; }
.acct-noti li.is-new .acct-noti-dot { background: var(--accent); }
.acct-noti-t { color: var(--ink-2); }
.acct-noti li.is-new .acct-noti-t { color: var(--ink); font-weight: 700; }
.acct-noti-d { grid-column: 2; font-size: var(--fs-xs); color: var(--ink-3); }
.acct-menu > li { padding: 0; min-height: 0; }
.acct-menu a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic t ch" "ic s ch"; align-items: center; gap: 0 var(--sp-3); width: 100%; min-height: 3.5rem; padding: .55rem 1rem; }
.acct-menu a > .ic:first-child { grid-area: ic; color: var(--accent-ink); }
.acct-menu a > span { grid-area: t; font-weight: 700; }
.acct-menu a > small { grid-area: s; color: var(--ink-3); font-size: var(--fs-xs); }
.acct-menu .acct-chev-r { grid-area: ch; color: var(--ink-3); }
.acct-menu a:hover { background: var(--surface-3); }
.acct-acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
@media (min-width: 640px) { .acct-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .acct-acc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.acct-acc-item { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 3.5rem; padding: .8rem .9rem; border: .0625rem solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); }
.acct-acc-item:hover { border-color: var(--line-strong); background: var(--surface); }
.acct-acc-item > .ic { color: var(--accent-ink); margin-top: .1875rem; flex: none; }
.acct-acc-item b { display: block; }
.acct-acc-item small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }

/* 알림 설정 */
.acct-master { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; background: var(--surface-3); }
.acct-master-t { font-size: var(--fs-lg); }
.acct-master-state { font-weight: 700; color: var(--accent-ink); font-size: var(--fs-sm); }
.acct-switches { display: flex; flex-direction: column; }
.acct-switches li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: .6rem 0; border-bottom: .0625rem solid var(--line); }
.acct-switches li:last-child { border-bottom: 0; }
.acct-switches li > div { min-width: 0; }
.acct-switches b { display: block; }
.acct-switches small { display: block; color: var(--ink-3); font-size: var(--fs-sm); }
.acct-savebar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* 탈퇴 */
.acct-lose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.acct-lose li { display: flex; align-items: flex-start; gap: var(--sp-2); padding: .75rem; border: .0625rem solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); }
.acct-lose b { display: block; font-size: var(--fs-lg); }
.acct-lose small { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.45; }
@media (max-width: 400px) { .acct-lose { grid-template-columns: minmax(0, 1fr); } }

/* ── 1:1 문의 ─────────────────────── */
.acct-toolbar { align-items: flex-end; }
.acct-toolbar .tabs { flex: 1 1 auto; min-width: 0; }
.acct-clip { margin-top: .125rem; overflow-wrap: anywhere; }
.acct-inq-cards { display: none; flex-direction: column; gap: var(--sp-2); }
.acct-inq-cards .card { padding: var(--sp-3) var(--sp-4); }
.acct-inq-title { display: block; margin-top: .375rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .1875rem; min-height: 1.5rem; }
@media (max-width: 720px) {
  .acct-inq-table { display: none; }
  .acct-inq-cards { display: flex; }
}
.acct-file { padding-top: .6rem; }
.acct-agree-box { padding: var(--sp-2) var(--sp-3); border: .0625rem solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); }
.acct-tel { display: inline-flex; align-items: center; gap: .375rem; font-weight: 800; font-size: var(--fs-lg); color: var(--ink); min-height: var(--tap); }
.acct-q { padding: 0; overflow: hidden; }
.acct-q-head { padding: var(--sp-4) var(--sp-5); background: var(--surface-3); border-bottom: .0625rem solid var(--line); }
.acct-q-title { font-size: var(--fs-h4); margin-top: var(--sp-2); }
.acct-q-body { padding: var(--sp-5); line-height: 1.8; color: var(--ink-2); }
.acct-attach { margin: 0 var(--sp-5) var(--sp-5); padding-top: var(--sp-4); border-top: .0625rem solid var(--line); }
.acct-attach-item { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); margin-top: .25rem; padding: 0 .85rem; border: .0625rem solid var(--line); border-radius: var(--r-sm); background: var(--surface); max-width: 100%; overflow-wrap: anywhere; }
.acct-attach-item:hover { border-color: var(--line-strong); }
@media (max-width: 640px) { .acct-q-head, .acct-q-body { padding: var(--sp-4); } .acct-attach { margin: 0 var(--sp-4) var(--sp-4); } }
.acct-wait { display: flex; align-items: flex-start; gap: var(--sp-3); background: var(--surface-3); }
.acct-thread { display: flex; flex-direction: column; gap: var(--sp-3); }
.acct-msg-item { padding: var(--sp-4); border: .0625rem solid var(--line); border-radius: var(--r); background: var(--surface); }
.acct-msg-item.is-admin { background: var(--accent-soft); border-color: var(--accent-soft); }
.acct-msg-item.is-member { margin-left: var(--sp-5); }
@media (max-width: 640px) { .acct-msg-item.is-member { margin-left: var(--sp-3); } }
.acct-msg-who { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.acct-msg-who .ic { color: var(--accent-ink); }
.acct-msg-body { margin-top: var(--sp-2); line-height: 1.75; color: var(--ink-2); }
.acct-info { position: sticky; top: calc(var(--header-h) + 1rem); }
@media (max-width: 959px) { .acct-info { position: static; } }
/* 제목 앞 아이콘 간격(acct 화면 안의 .h-sub) */
.acct-shell .h-sub, .acct-2col .h-sub, .acct-next-wrap .h-sub, .acct-done + .h-sub { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }