/* 에듀택스 공개 페이지 공통 UI (로그인 화면 컨셉): 밝은 푸른 배경 + 흰 카드 + 포인트 #4777d9
   사용: cmmPubHeader.jsp / cmmPubFooter.jsp 와 함께 사용. 클래스 접두사 pu_ */

/* ---- 기존 공통 헤더/푸터 숨김 + 레이아웃 초기화 (이 CSS 를 쓰는 페이지 전용) ---- */
html.pu_on #header, html.pu_on #footer { display: none !important; }
/* 스크롤바 유무에 따라 헤더 위치가 페이지마다 달라 보이지 않도록 항상 스크롤바 영역을 확보 */
html.pu_on { overflow-y: scroll; }
html.pu_on, html.pu_on body, html.pu_on #wrap { margin: 0 !important; padding-top: 0 !important; background: #f4f7fd !important; }
html.pu_on #contents { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }

:root {
  --pu-blue: #4777d9;
  --pu-blue-d: #3a64bf;
  --pu-blue-l: #e8f0fe;
  --pu-ink: #1f2a44;
  --pu-text: #333;
  --pu-sub: #5b6578;
  --pu-mute: #8a93a3;
  --pu-line: #e3e9f5;
  --pu-bg: #f4f7fd;
}

.pu_root { display: flex; flex-direction: column; min-height: 100vh; font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; color: var(--pu-text); background: var(--pu-bg); -webkit-font-smoothing: antialiased; letter-spacing: 0; line-height: 1.6; }
.pu_root * { box-sizing: border-box; }
.pu_root a { text-decoration: none; }
.pu_main { flex: 1; width: 100%; }
.pu_wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pu_wrap_s { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---- 헤더 ---- */
.pu_head { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid #e8ecf4; backdrop-filter: blur(6px); }
.pu_head_in { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; height: 72px; margin: 0 auto; padding: 0 24px; }
.pu_logo { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--pu-blue); }
.pu_nav { display: flex; align-items: center; gap: 4px; }
.pu_nav a { padding: 9px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; color: #4b5568; white-space: nowrap; }
.pu_nav a:hover { background: #f1f5fc; color: var(--pu-blue); }
.pu_nav a.on { position: relative; color: var(--pu-blue); background: transparent; }
.pu_nav a.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--pu-blue); }
/* 주요 행동 구분: 가입하기 = 채운 버튼(주 행동), 로그인 = 테두리 버튼(보조) */
.pu_nav a.pu_nav_login { margin-left: 8px; border: 1px solid #c9d6f2; background: #fff; color: var(--pu-blue); }
.pu_nav a.pu_nav_login:hover { background: var(--pu-blue-l); }
.pu_nav a.pu_nav_join { margin-left: 6px; background: var(--pu-blue); color: #fff; }
.pu_nav a.pu_nav_join:hover { background: var(--pu-blue-d); color: #fff; }

/* ---- 페이지 상단(히어로) ---- */
.pu_hero { padding: 56px 0 36px; text-align: center; }
.pu_eyebrow { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--pu-blue); }
.pu_title { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--pu-ink); line-height: 1.3; }
.pu_desc { max-width: 640px; margin: 14px auto 0; font-size: 16px; color: var(--pu-sub); line-height: 1.7; }

/* ---- 카드 / 버튼 / 배지 ---- */
.pu_card { padding: 28px; border: 1px solid var(--pu-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(31, 42, 68, 0.06); }
.pu_grid { display: grid; gap: 20px; }
.pu_btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border: 1px solid #d9dde3; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 700; color: #444; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.pu_btn:hover { background: #f6f9fa; }
.pu_btn.primary { border-color: var(--pu-blue); background: var(--pu-blue); color: #fff; }
.pu_btn.primary:hover { background: var(--pu-blue-d); }
.pu_btn.block { display: flex; width: 100%; }
.pu_badge { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--pu-blue-l); font-size: 12.5px; font-weight: 700; color: #3b6fd8; }
.pu_section { padding: 28px 0 56px; }
.pu_section_title { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--pu-ink); letter-spacing: -0.02em; }
.pu_section_desc { margin: 0 0 22px; font-size: 15px; color: var(--pu-sub); }

/* ---- 폼 ---- */
.pu_field { margin: 0 0 16px; }
.pu_field label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 600; color: #4b5568; }
.pu_field label em { color: #e5484d; font-style: normal; margin-left: 2px; }
.pu_field input[type="text"], .pu_field input[type="email"], .pu_field input[type="tel"], .pu_field input[type="password"], .pu_field select, .pu_field textarea { display: block; width: 100%; padding: 0 16px; border: 1px solid #d9dde3; border-radius: 12px; background: #fff; font-family: inherit; font-size: 15px; color: #222; transition: border-color 0.15s, box-shadow 0.15s; }
.pu_field input[type="text"], .pu_field input[type="email"], .pu_field input[type="tel"], .pu_field input[type="password"], .pu_field select { height: 50px; }
.pu_field textarea { min-height: 160px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.pu_field input::placeholder, .pu_field textarea::placeholder { color: #b4bac6; }
.pu_field input:focus, .pu_field select:focus, .pu_field textarea:focus { outline: 0; border-color: var(--pu-blue); box-shadow: 0 0 0 4px rgba(71, 119, 217, 0.14); }
.pu_field .is_err { border-color: #e5484d !important; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.1) !important; }
.pu_err { margin: 6px 0 0; font-size: 12.5px; color: #e5484d; }

/* ---- 푸터 ---- */
.pu_foot { margin-top: auto; border-top: 1px solid #e8ecf4; background: #fff; }
.pu_foot_in { max-width: 1120px; margin: 0 auto; padding: 26px 24px 30px; text-align: center; }
.pu_foot_links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 12px; }
.pu_foot_links a { font-size: 13px; font-weight: 600; color: #5b6578; }
.pu_foot_links a:hover { color: var(--pu-blue); }
.pu_foot_info { margin: 2px 0; font-size: 12.5px; line-height: 1.6; color: var(--pu-mute); }
.pu_foot_info b { color: #5b6578; }
.pu_copy { display: block; margin-top: 8px; font-size: 12px; color: #b0b7c5; }

@media (max-width: 900px) {
  .pu_head_in { height: auto; flex-direction: column; gap: 6px; padding: 12px 12px 10px; }
  .pu_nav { flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
  .pu_nav a { padding: 7px 10px; font-size: 13.5px; }
  .pu_hero { padding: 36px 0 26px; }
  .pu_title { font-size: 28px; }
  .pu_desc { font-size: 15px; }
  .pu_wrap, .pu_wrap_s { padding: 0 16px; }
  .pu_card { padding: 22px 18px; border-radius: 16px; }
}

/* ---- 공개 페이지 커스텀 드롭다운 (admin-ui.js 의 select 대체 UI) ---- */
.pu_field .aui_sel_btn { height: 50px; padding: 0 16px; border-radius: 12px; font-family: inherit; font-size: 15px; color: #222; }
.pu_field .aui_sel_btn.on, .pu_field .aui_sel_btn:focus { border-color: var(--pu-blue); box-shadow: 0 0 0 4px rgba(71, 119, 217, 0.14); }
.pu_field .aui_sel_native.is_err + .aui_sel_btn { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.1); }
.aui_sel_menu { font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; border-radius: 12px; }
.aui_sel_menu li { padding: 10px 14px; font-size: 14.5px; }