/* 계정 화면(로그인·회원가입·내 정보·글쓰기).
   색·서체·모서리·간격은 전부 site-v2.css 의 토큰을 쓴다 — 이 파일에 새 팔레트를 만들지 않는다.
   지면(--canvas)은 옅은 하늘, 그 위에 흰 판(--panel) 하나를 올린 구성이다. */

.authpage {
  background: var(--canvas);
  padding: clamp(36px, 6vw, 76px) 20px clamp(56px, 8vw, 96px);
  min-height: 58vh;
}
.authcard {
  max-width: 452px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 40px);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--r) * 1.5);
  box-shadow: 0 1px 2px rgba(8, 59, 96, .04), 0 12px 32px -14px rgba(8, 59, 96, .18);
}
.authcard--wide { max-width: 760px; }

.authcard__kicker { margin: 0; font: 600 11.5px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.authcard__h { margin: 10px 0 6px; font: 800 clamp(22px, 3vw, 27px)/1.25 var(--kser); letter-spacing: -.03em; color: var(--ink); }
.authcard__sub { margin: 0 0 26px; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* 재원생·강사용 문 — 홈페이지 계정과 헷갈리지 않게 판을 나눠 둔다. */
.authcard__lms { margin-top: 26px; padding: 16px 17px; background: var(--canvas-2); border: 1px solid var(--line-soft); border-radius: var(--r); }
.authcard__lms b { display: block; font-size: 13.5px; color: var(--ink); }
.authcard__lms p { margin: 5px 0 10px; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.authcard__lms a { font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: none; }
.authcard__lms a:hover { color: var(--brand-2); text-decoration: underline; }

/* 입력 */
.fld { margin-bottom: 15px; }
.fld > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.fld .opt { margin-left: 4px; font-weight: 500; color: var(--muted-2); }
.fld input, .fld textarea, .fld select {
  width: 100%; box-sizing: border-box; padding: 12px 13px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
.fld input:focus, .fld textarea:focus, .fld select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.fld .hint { margin: 6px 0 0; font-size: 12px; color: var(--muted-2); }

.agree-box {
  margin: 18px 0 12px; padding: 13px 14px; max-height: 128px; overflow-y: auto;
  font-size: 12px; line-height: 1.75; color: var(--muted);
  background: var(--canvas-2); border: 1px solid var(--line-soft); border-radius: var(--r);
}
.agree { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.agree input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--brand); }

/* 단추 */
.authbtn {
  display: inline-block; width: 100%; box-sizing: border-box; padding: 13px 16px;
  font: 700 15px/1.35 var(--sans); color: #fff; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--navy); border: 1px solid var(--navy); border-radius: var(--r);
  transition: background .15s, border-color .15s;
}
.authbtn:hover { background: var(--brand-2); border-color: var(--brand-2); }
.authbtn:disabled { background: var(--muted-2); border-color: var(--muted-2); cursor: default; }
.authbtn.ghost { color: var(--brand); background: var(--panel); border-color: var(--line); }
.authbtn.ghost:hover { background: var(--tint); border-color: var(--brand); }
.authbtn.danger { color: #96131b; background: var(--panel); border-color: #f0c4c7; }
.authbtn.danger:hover { background: #fdf1f2; border-color: #e39aa0; }

.auth-msg { margin: 0 0 16px; padding: 11px 13px; font-size: 13px; line-height: 1.6; border-radius: var(--r); }
.auth-msg.err { color: #96131b; background: #fdf1f2; border: 1px solid #f4ced1; }
.auth-msg.ok { color: #14562f; background: #eefaf1; border: 1px solid #c5e8d1; }
.auth-msg[hidden] { display: none; }

.auth-foot { margin: 20px 0 0; padding-top: 18px; font-size: 13px; color: var(--muted); text-align: center; border-top: 1px solid var(--line-soft); }
.auth-foot a { color: var(--brand); font-weight: 700; }

/* 내 정보 */
.acct-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.acct-row dt { color: var(--muted); }
.acct-row dd { margin: 0; font-weight: 700; color: var(--ink); }
.acct-actions { display: flex; gap: 10px; margin-top: 24px; }
.acct-actions .authbtn { flex: 1; }
.rolechip { display: inline-block; padding: 3px 9px; font-size: 11.5px; font-weight: 700; border-radius: 999px; }
.rolechip.member { color: var(--ink-2); background: var(--tint); }
.rolechip.staff { color: var(--brand-2); background: var(--brand-soft); }
.rolechip.admin { color: #96131b; background: #fdeaec; }

.cmsbox { margin-top: 26px; padding: 18px; background: var(--canvas-2); border: 1px solid var(--line-soft); border-radius: var(--r); }
.cmsbox h2 { margin: 0 0 5px; font-size: 15px; font-weight: 800; color: var(--ink); }
.cmsbox p { margin: 0 0 13px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.cmsgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cmsgrid a { padding: 11px 12px; font-size: 13px; font-weight: 700; color: var(--brand); text-align: center; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.cmsgrid a:hover { border-color: var(--brand); background: var(--tint); }

/* 글쓰기 */
.wr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.wr-grid .fld { margin-bottom: 0; }
.wbody { min-height: 320px; font-family: inherit; line-height: 1.75; resize: vertical; }
.wr-actions { display: flex; gap: 10px; margin-top: 22px; }
.wr-actions .authbtn { flex: 1; }
.upshelf { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.upshelf img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line-soft); }

/* 머리말의 로그인 자리 — 내비의 다른 항목과 같은 크기·간격을 지킨다. */
.navbar__auth { display: inline-flex; align-items: center; gap: 6px; }
.navbar__auth a, .navbar__auth button {
  font: 700 13px/1 var(--sans); color: var(--ink-2); text-decoration: none; cursor: pointer;
  padding: 8px 11px; background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  transition: color .15s, border-color .15s, background .15s;
}
.navbar__auth a:hover, .navbar__auth button:hover { color: var(--brand); border-color: var(--brand); background: var(--tint); }
@media (max-width: 900px) { .navbar__auth { display: none; } }

/* 게시판 위의 관리 도구 막대 */
.boardadmin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1180px; margin: 18px auto 0; padding: 0 20px; }
.boardadmin__new { padding: 9px 15px; font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none; background: var(--navy); border-radius: var(--r); }
.boardadmin__new:hover { background: var(--brand-2); }
.boardadmin__note { font-size: 12px; color: var(--muted-2); }

@media (max-width: 640px) {
  .wr-grid { grid-template-columns: 1fr; gap: 0; }
  .wr-grid .fld { margin-bottom: 15px; }
  .acct-actions, .wr-actions { flex-direction: column; }
}

/* 모바일 시트 안의 계정 자리 — 손전화에서는 머리말이 접히므로 여기가 유일한 통로다. */
.msauth { display: flex; gap: 8px; margin: 14px 0 0; }
.msauth:empty { display: none; }
.msauth a, .msauth button {
  flex: 1; padding: 13px 12px; font: 700 14px/1 var(--sans); color: var(--ink-2); text-align: center;
  text-decoration: none; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.msauth a:hover, .msauth button:hover { color: var(--brand); border-color: var(--brand); }

/* 관계자용 '＋ 새 글 쓰기' 줄이 떠 있는 머리말(navbar) 뒤로 깔려 글자가 가려졌다.
   실측 결과 폰만이 아니라 320~1440 전 구간에서 겹친다 — 1440 에서도 알약 왼쪽 끝이
   안내 문구('관계자·관리자 전용입니다.')를 물고 있었다. 폭을 가리지 말고 머리말 높이만큼 내린다.
   이 줄은 관계자에게만 보이므로(hidden) 일반 방문자 화면에는 아무 영향이 없다. */
.boardadmin { margin-top: calc(var(--navh, 58px) + 20px); }