@charset "UTF-8";
/* ============================================================
   한국AI융합학회 홈페이지 - 회원 화면 스타일
   ------------------------------------------------------------
   작성일 : 2026-08-31
   대상   : /WEB-INF/jsp/kaics/member/**

   [설계 의도]
   시안 CSS(style.css / sub.css)는 수정하지 않는다는 방침에 따라,
   회원 화면에서만 쓰는 규칙을 이 파일에 모은다.
   색상·글꼴은 시안의 CSS 변수(--c-primary 등)를 그대로 이어받는다.
   ============================================================ */

/* ---------- 가입 절차 표시 ---------- */
.join-step { display: flex; gap: 8px; margin-bottom: 30px; }
.join-step li {
  flex: 1; padding: 14px 8px; text-align: center;
  border: 1px solid #dde2e8; border-radius: 3px;
  background: #f7f9fb; color: var(--c-gray); font-size: .9375rem;
}
.join-step li strong { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: 4px; }
.join-step li.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.join-step li.on strong { color: #fff; }

/* ---------- 안내 문구 상자 ---------- */
.info-box {
  padding: 20px 24px; margin-bottom: 24px;
  background: #f3f7fc; border: 1px solid #d6e4f5; border-radius: 3px;
  font-size: .9375rem; line-height: 1.75;
}
.info-box strong { color: var(--c-primary); }
.info-box ol, .info-box ul { margin: 10px 0 0 18px; }
.info-box li { list-style: decimal; margin-bottom: 4px; }
.info-box ul li { list-style: disc; }

.alert-box {
  padding: 12px 16px; margin-bottom: 20px; border-radius: 3px;
  font-size: .9375rem;
}
.alert-box.is-error { background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0; }
.alert-box.is-info { background: #eaf1ff; color: #2560c4; border: 1px solid #c3d8fb; }
.alert-box.is-ok { background: #eaf7ee; color: #1f7a3d; border: 1px solid #bfe3ca; }
.alert-box a { text-decoration: underline; }

/* 읽기 전용 입력칸은 수정할 수 없다는 것이 보이도록 흐리게 둔다 */
.login-wrap input[readonly] { background: #f4f6f9; color: #68707e; }

/* ---------- 약관 ---------- */
.terms-block { margin-bottom: 24px; }
.terms-block h4 { font-size: 1rem; margin-bottom: 8px; }
.terms-body {
  height: 180px; overflow-y: auto; padding: 16px;
  border: 1px solid #dde2e8; background: #fbfcfd;
  font-size: .875rem; line-height: 1.8; color: #4a5160;
}
.terms-body h5 { margin: 12px 0 4px; font-size: .9375rem; color: #1a2533; }
.terms-body h5:first-child { margin-top: 0; }
/* 동의 체크박스를 왼쪽에 둔다.
   오른쪽에 두면 시안의 고정 퀵메뉴(.side-quick)가 1280px 안팎의 화면에서
   체크박스를 덮어 필수 동의를 클릭하지 못하는 문제가 생긴다. */
.terms-agree { margin-top: 10px; text-align: left; }
.terms-agree label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.terms-all {
  padding: 16px 20px; margin-bottom: 24px;
  border: 2px solid var(--c-primary); border-radius: 3px; background: #f3f7fc;
}
.terms-all label { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.req-mark { color: #d0453c; }
.opt-mark { color: var(--c-gray); }

/* ---------- 입력 양식 ---------- */
.form-table { width: 100%; border-top: 2px solid #1a2533; }
.form-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.form-table th, .form-table td {
  padding: 14px 16px; border-bottom: 1px solid #e5e9ee;
  font-size: .9375rem; vertical-align: middle; text-align: left;
}
.form-table th { width: 20%; background: #f7f9fb; font-weight: 600; }
.form-table .req { color: #d0453c; margin-left: 2px; }
.form-table input[type="text"],
.form-table input[type="password"],
.form-table input[type="email"],
.form-table select {
  height: 42px; padding: 0 12px; border: 1px solid #d3d9e2; border-radius: 3px;
  font-size: .9375rem; font-family: inherit; background: #fff;
}
.form-table input:focus, .form-table select:focus {
  outline: none; border-color: var(--c-primary);
}
.form-table .w-full { width: 100%; }
.form-table .w-half { width: 60%; max-width: 320px; }
.form-table .w-short { width: 40%; max-width: 180px; }
.form-help { margin-top: 6px; font-size: .8125rem; color: var(--c-gray); }
.form-check-group { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.form-check-group label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.input-with-btn { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.check-result { font-size: .8125rem; margin-top: 6px; }
.check-result.is-ok { color: #1f7a3d; }
.check-result.is-ng { color: #d0453c; }

/* 오류가 발생한 입력칸을 눈에 띄게 한다 */
.form-table .is-error input,
.form-table .is-error select { border-color: #d0453c; background: #fffafa; }

/* ---------- 버튼 ---------- */
.form-btns { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.btn-sub {
  height: 42px; padding: 0 18px; border-radius: 3px; cursor: pointer;
  border: 1px solid #d3d9e2; background: #fff; color: #3a4150;
  font-size: .875rem; font-family: inherit; white-space: nowrap;
}
.btn-sub:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ---------- 로그인 ---------- */
.login-wrap { max-width: 420px; margin: 0 auto; padding: 10px 0 20px; }
.login-wrap .login-field { margin-bottom: 12px; }
.login-wrap label { display: block; margin-bottom: 5px; font-size: .875rem; color: #4a5160; }
.login-wrap input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid #d3d9e2; border-radius: 3px; font-size: 1rem; font-family: inherit;
}
.login-wrap input:focus { outline: none; border-color: var(--c-primary); }
.btn-login-member {
  width: 100%; height: 50px; margin-top: 12px;
  background: var(--c-primary); color: #fff; border: 0; border-radius: 3px;
  font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.btn-login-member:hover { filter: brightness(.92); }
.login-links { display: flex; justify-content: center; gap: 14px; margin-top: 18px; font-size: .875rem; }
.login-links a { color: var(--c-gray); }
.login-links a:hover { color: var(--c-primary); text-decoration: underline; }
.login-notice { margin-top: 24px; }

/* ---------- 아이디 · 비밀번호 찾기 (MB-008 · MB-009, 2026-10-31) ---------- */
.find-account-sent { max-width: 860px; margin: 0 auto 18px; }
.find-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 860px; margin: 0 auto; }
.find-account-card.login-wrap { max-width: none; margin: 0; padding: 22px 22px 24px; border: 1px solid #e1e5eb; border-radius: 6px; background: #fff; }
.find-account-card h4 { margin: 0 0 6px; font-size: 1.125rem; }
.find-account-card .form-help { margin: 0 0 14px; }
.find-account-notice { max-width: 860px; margin: 24px auto 0; }
a.btn-login-member { display: flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 768px) {
  .find-account-grid { grid-template-columns: 1fr; }
}

/* ---------- 가입 완료 ---------- */
.complete-box { text-align: center; padding: 40px 20px 10px; }
.complete-box .done-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: 1.75rem; margin-bottom: 18px;
}
.complete-box h3 { font-size: 1.5rem; margin-bottom: 10px; }
.complete-box .done-id { font-size: 1rem; color: var(--c-gray); }
.complete-box .done-id strong { color: var(--c-primary); }
.grade-badge {
  display: inline-block; padding: 4px 14px; border-radius: 14px;
  background: #eaf1ff; color: #2560c4; font-size: .875rem; font-weight: 600;
}

/* ---------- 메인(간이) 최신글 목록 ---------- */
.main-list { border-top: 1px solid #e5e9ee; margin-bottom: 8px; }
.main-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid #eef1f5; font-size: .9375rem;
}
.main-list li a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-list li a:hover { color: var(--c-primary); text-decoration: underline; }
.main-list li .date { color: var(--c-gray); font-size: .8125rem; white-space: nowrap; }
.main-list li.no-data { justify-content: center; color: var(--c-gray); padding: 30px 0; }
.main-more { text-align: right; margin-bottom: 26px; font-size: .875rem; }
.main-more a { color: var(--c-gray); }
.main-more a:hover { color: var(--c-primary); text-decoration: underline; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 768px) {
  .join-step { flex-wrap: wrap; }
  .join-step li { flex: 1 1 45%; font-size: .8125rem; }

  .form-table, .form-table tbody, .form-table tr, .form-table th, .form-table td {
    display: block; width: 100%;
  }
  .form-table th { border-bottom: 0; padding-bottom: 4px; }
  .form-table td { padding-top: 4px; }
  .form-table .w-half, .form-table .w-short { width: 100%; max-width: none; }
  .form-table input[type="text"],
  .form-table input[type="password"],
  .form-table input[type="email"],
  .form-table select { width: 100%; }
  .input-with-btn { flex-direction: column; align-items: stretch; }
  .btn-sub { width: 100%; }
  .form-btns { flex-direction: column; }
}

/* ============================================================
   FS-06 회비 납부 화면 전용 스타일
   시안 CSS(style / sub / board)는 수정하지 않고 여기에 덧붙인다.
   ============================================================ */

/* 중간 제목. 화면을 단계별로 끈어 보여 준다 */
.sub-tit {
  margin: 30px 0 12px; padding-left: 12px;
  font-size: 1.0625rem; font-weight: 700; color: var(--c-primary);
  border-left: 4px solid var(--c-primary);
}
.sub-tit:first-of-type { margin-top: 10px; }

/* 입금 계좌 안내 */
.account-box {
  border: 1px solid var(--c-line); border-radius: 4px;
  background: var(--c-bg); padding: 18px 20px;
}
.account-box dl { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.account-box dt {
  flex: 0 0 80px; font-weight: 700; color: var(--c-gray); font-size: .9375rem;
}
.account-box dd { margin: 0; font-size: .9375rem; }
.account-no {
  font-size: 1.125rem; letter-spacing: .5px; color: var(--c-primary);
  margin-right: 8px;
}

/* 등급 선택 카드. 크게 만들어 휴대기기에서도 누르기 쉽게 한다 */
.fee-choice-group { display: flex; flex-wrap: wrap; gap: 10px; }
.fee-choice {
  display: flex; align-items: center; gap: 8px;
  min-width: 190px; padding: 12px 14px;
  border: 1px solid var(--c-line); border-radius: 4px;
  background: #fff; cursor: pointer;
}
.fee-choice:hover { border-color: var(--c-point); }
.fee-choice:has(input:checked) {
  border-color: var(--c-primary); background: #eef4fb; box-shadow: inset 0 0 0 1px var(--c-primary);
}
.fee-choice-name { font-weight: 700; }
.fee-choice-amount { margin-left: auto; color: var(--c-accent); font-weight: 700; }

/* 납부 상태 표시 */
.pay-status { font-weight: 700; }
.pay-status.is-done { color: var(--c-primary); }
.pay-status.is-wait { color: var(--c-accent); }

/* 체크박스와 설명을 한 줄로 둔다 */
.check-inline {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 16px; cursor: pointer;
}
.check-inline input { width: auto; }

/* 표 안의 긴 문장은 왼쪽 정렬이 읽기 쉽다 */
.td-left { text-align: left; }

/* 목록 안의 버튼 폼이 줄을 바꾸지 않게 한다 */
.inline-form { display: inline; }

.sub-text { font-size: .8125rem; color: var(--c-gray); }

@media (max-width: 768px) {
  .fee-choice { min-width: 0; width: 100%; }
  .account-box dl { flex-direction: column; align-items: flex-start; gap: 2px; }
  .account-box dt { flex: none; }
}

/* ============================================================
   약관 · 방침 화면 (/etc/**)
   ============================================================ */

/* 약관 본문. 관리자가 HTML 로 작성하므로 기본 태그에 모두 서식을 준다 */
.terms-view {
  border: 1px solid var(--c-line); border-radius: 4px;
  padding: 28px 30px; background: #fff; line-height: 1.75;
}
.terms-view h3 {
  margin: 24px 0 8px; font-size: 1rem; font-weight: 700; color: var(--c-primary);
}
.terms-view h3:first-child { margin-top: 0; }
.terms-view p { margin: 0 0 10px; font-size: .9375rem; }
.terms-view ul { margin: 0 0 12px; padding-left: 18px; }
.terms-view li { margin-bottom: 4px; font-size: .9375rem; list-style: disc; }

/* 초안 안내. 확정 문구가 아니라는 것을 눈에 띄게 알린다 */
.terms-view .terms-draft-note,
.terms-body .terms-draft-note {
  margin-top: 20px; padding-top: 12px; border-top: 1px dashed var(--c-line);
  color: var(--c-accent); font-size: .8125rem;
}

/* 버전 표시. 동의 이력에 남는 값이다 */
.terms-ver {
  margin-left: 6px; padding: 1px 7px; border-radius: 9px;
  background: var(--c-bg); color: var(--c-gray);
  font-size: .75rem; font-weight: 400;
}

/* 가입 화면의 약관 상자 안에서도 같은 본문을 쓴다 */
.terms-body h3 {
  margin: 14px 0 6px; font-size: .9375rem; font-weight: 700; color: var(--c-primary);
}
.terms-body h3:first-child { margin-top: 0; }
.terms-body ul { margin: 0 0 10px; padding-left: 18px; }
.terms-body li { list-style: disc; }

@media (max-width: 768px) {
  .terms-view { padding: 18px 16px; }
}

/* ============================================================
   학회소개 화면 (/intro/**)
   ============================================================ */

/* 본문. 관리자가 HTML 로 작성하므로 기본 태그에 모두 서식을 준다 */
.page-body { line-height: 1.8; }
.page-body h3 {
  margin: 28px 0 10px; padding-left: 11px;
  font-size: 1.0625rem; font-weight: 700; color: var(--c-primary);
  border-left: 4px solid var(--c-primary);
}
.page-body h3:first-child { margin-top: 0; }
.page-body p { margin: 0 0 12px; font-size: .9375rem; }
.page-body ul { margin: 0 0 14px; padding-left: 18px; }
.page-body li { margin-bottom: 5px; font-size: .9375rem; list-style: disc; }
.page-body table {
  width: 100%; margin: 0 0 18px; border-top: 2px solid var(--c-primary);
  border-collapse: collapse;
}
.page-body th, .page-body td {
  padding: 11px 14px; border-bottom: 1px solid var(--c-line);
  font-size: .9375rem; text-align: left; vertical-align: top;
}
.page-body th { width: 22%; background: var(--c-bg); font-weight: 700; }

/* 임시 내용 안내. 확정 문안이 아니라는 것을 눈에 띄게 알린다 */
.page-body .page-draft-note,
.page-draft-note {
  margin: 0 0 20px; padding: 12px 15px;
  border: 1px dashed var(--c-accent); border-radius: 4px;
  background: #fff8f6; color: var(--c-accent); font-size: .875rem;
}

/* 회장 인사말 — 사진을 본문 옆에 배치한다 */
.page-with-photo { display: flex; gap: 30px; align-items: flex-start; }
.page-photo { flex: 0 0 240px; }
.page-photo img {
  width: 100%; border: 1px solid var(--c-line); border-radius: 4px;
}
.page-with-photo .page-body { flex: 1; }
.greeting-sign { margin-top: 24px; text-align: right; font-size: 1rem; }

/* 그 밖의 화면 — 대표 이미지를 본문 위에 넣는다 */
.page-image { margin-bottom: 24px; text-align: center; }
.page-image img { max-width: 100%; height: auto; }

/* 조직도 그림이 아직 없을 때 보여 주는 자리 */
.org-chart-placeholder {
  margin-bottom: 24px; padding: 46px 20px;
  border: 1px dashed var(--c-line); border-radius: 4px;
  background: var(--c-bg); text-align: center; color: var(--c-gray);
}
.org-chart-placeholder p { margin: 0 0 6px; font-size: .9375rem; }

/* 임원 명단 */
.officer-term {
  margin-left: 8px; font-size: .875rem; font-weight: 400; color: var(--c-gray);
}
.officer-group {
  margin: 22px 0 8px; font-size: .9375rem; font-weight: 700; color: var(--c-txt);
}

/* 지도 자리. API 연동 전임을 분명히 밝힌다 */
.map-placeholder {
  margin-bottom: 26px; padding: 52px 20px;
  border: 1px dashed var(--c-line); border-radius: 4px;
  background: var(--c-bg); text-align: center;
}
.map-placeholder-title {
  margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--c-primary);
}
.map-placeholder p { margin: 0 0 6px; font-size: .9375rem; color: var(--c-gray); }
.map-links { margin-top: 14px; }
.map-links a {
  display: inline-block; margin: 0 5px; padding: 8px 16px;
  border: 1px solid var(--c-primary); border-radius: 3px;
  color: var(--c-primary); font-size: .875rem;
}
.map-links a:hover { background: var(--c-primary); color: #fff; }

@media (max-width: 768px) {
  .page-with-photo { flex-direction: column; }
  .page-photo { flex: none; width: 60%; margin: 0 auto; }
  .page-body th { width: 32%; }
}

/* ============================================================
   논문지 화면
   ------------------------------------------------------------
   논문 검색과 온라인 투고 시스템은 연결 주소가 등록되면
   단추 하나만 놓인다. 준비 중일 때는 .map-placeholder 를 그대로 쓴는다.
   안내 모양을 한 가지로 맞춰 두면 보는 사람이 덜 헷갈린다.
   ============================================================ */
.link-box {
  margin: 24px 0 8px;
  padding: 28px 20px;
  text-align: center;
  background: var(--c-bg, #f7f9fc);
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 4px;
}
.link-box .sub-text { display: block; margin-top: 12px; }

/* ---------- 마이페이지 사무국 공지 (2026-10-14) ---------- */
.member-notice-list { list-style: none; margin: 0 0 26px; padding: 0; border-top: 2px solid var(--c-primary); }
.member-notice-list li { border-bottom: 1px solid var(--c-line); }
.member-notice-list summary { padding: 14px 6px; cursor: pointer; font-weight: 600; }
.member-notice-list .notice-date { float: right; color: var(--c-gray); font-size: .8125rem; font-weight: 400; }
.member-notice-list .notice-body { padding: 4px 10px 16px; white-space: pre-wrap; line-height: 1.7; color: #3b4552; }

/* ---------- 회원가입 안내문 (2026-10-14) ----------
   관리자가 적은 안내문이다. HTML 을 받지 않으므로 줄바꿈만 살린다. */
.join-notice { white-space: pre-line; }

/* 학회소개 · 논문지 본문에 넣은 사진 · 동영상 (2026-10-14) */
.page-body img, .page-body video { max-width: 100%; height: auto; }
.page-body video { display: block; margin: 10px 0; background: #000; }

/* 회원가입 준비 중 안내 (2026-10-14) */
.join-closed p { margin: 4px 0; }

/* 회원안내 화면의 관리자 편집 문구 (2026-10-14) */
.member-page-content img, .member-page-content video { max-width: 100%; height: auto; }

/* 사이트맵 (2026-10-15) : 주 메뉴(TB_MENU)를 대메뉴별 상자로 */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sitemap-group { padding: 18px 20px; border: 1px solid #dfe4ea; border-top: 3px solid var(--c-primary); background: #fff; }
.sitemap-group h4 { margin: 0 0 10px; font-size: 1.0625rem; }
.sitemap-group h4 a { color: inherit; text-decoration: none; }
.sitemap-group ul { margin: 0; padding: 0; list-style: none; }
.sitemap-group li { padding: 5px 0; border-bottom: 1px dashed #e8ecf1; font-size: .9375rem; }
.sitemap-group li:last-child { border-bottom: 0; }
.sitemap-group li a { color: #3a4150; text-decoration: none; }
.sitemap-group li a:hover { color: var(--c-primary); text-decoration: underline; }
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sitemap-grid { grid-template-columns: 1fr; } }

/* ---------- 회원가입 이메일 인증번호 (2026-10-31) ---------- */
.email-code-row { margin-top: 8px; align-items: center; }
.email-code-timer { font-size: .875rem; color: var(--c-primary); white-space: nowrap; }
/* display:flex 나 inline-block 이 걸린 요소도 hidden 이면 감춘다 (브라우저 기본 규칙보다 앞선다) */
.input-with-btn[hidden], .btn-sub[hidden] { display: none; }

/* 정보수정 : 관리자가 내린 연구분야 (이미 고른 회원에게만 보인다, 2026-10-31) */
.form-check-group .field-stopped { color:#8a94a0; font-size:.85em; }