@charset "utf-8";
/* =========================================================
   변한의원 퍼블 이전 - 로컬 programj05 기반 CSS 충돌 교정
   (기반 CSS 및 okbyun/*.css 다음, 가장 마지막에 로드)
   ========================================================= */

/* 로컬 layout.css 가 #header{display:none} 처리(관리자 navbar용).
   변한의원 GNB 컨테이너(#header)를 복원 */
#header{display:block !important;}

/* 게시판 상세 하단 [목록] 버튼.
   원본은 .readBottom_btn{text-align:center} 로 700px 바를 가운데 정렬하는데,
   programj05 board.css 의 .readBottom_btn dd{float:right} 가 남아 우측으로 밀림.
   (이관한 okbyun/content.css 는 해당 규칙이 빈 블록이라 덮지 못함) */
.readBottom_btn dd{float:none;}
/* board.css 의 height:40px 가 남아 line-height:2.5(=50px) 와 어긋나 '목록' 글자가 아래로 밀림.
   원본은 height 지정이 없어 line-height 가 그대로 높이가 된다 */
.readBottom_btn dd a{height:auto;}

/* 페이징 좌우 화살표.
   Page.indexUserList 가 programj05 아이콘(/img/li_prev_b.png, 32x32)을 마크업에 직접 박아서
   변한의원 원본 화살표(page_prev/next.gif, 39x38)와 다르게 보임.
   Java 공용 클래스를 건드리지 않고 CSS 로 원본 이미지로 교체 */
.programPage a.page_prev img,
.programPage a.page_next img{display:none;}
.programPage a.page_prev,
.programPage a.page_prev:hover{background:url("/img/okbyun/page_prev.gif") no-repeat center center;}
.programPage a.page_next,
.programPage a.page_next:hover{background:url("/img/okbyun/page_next.gif") no-repeat center center;}


/* 회원 페이지 주요 버튼(.login_chk_btn01) 이 검정 배경에 검정 글씨로 나옴.
   변한의원 style.css 의 a{color:#121212} 가 programj05 버튼의 흰색을 덮어써서 글자가 안 보인다.
   (로그인 / 회원가입 '다음' / 회원탈퇴 버튼 해당) */
a.login_chk_btn01, a.login_chk_btn01:hover, a.login_chk_btn01:visited{color:#fff;}


/* 로그인 폼 — programj05 CSS 가 원본 레이아웃을 덮어쓰는 부분 보정
   · a{float:right} 때문에 로그인 버튼이 폭 127px 로 줄고 우측에 붙음 (원본은 전체폭 550px)
   · 전역 스크립트(js/dev.js)가 비밀번호 칸에 눈 아이콘을 추가하는데 원본엔 없다 */
.loginCon li .login_btn,
.findCon li .login_btn,
.secedeCon li .login_btn{float:none; width:100%; box-sizing:border-box; text-align:center;}
.loginCon .password-toggle-icon{display:none;}


/* 회원가입 약관 박스 — 약관 본문이 <font><span style="font-size:18px"> 형태로 저장돼 있는데
   컨테이너 line-height 가 12px 라 글줄이 서로 겹쳐 보인다. (원본은 1.8) */
.login_etc_wrapper .txt_box,
.login_etc_wrapper .txt_box *{line-height:1.8;}

/* .login_wrap : 원본은 content-box 라 width:calc(100%-100px) + padding 100px = 1200px 전체를 쓴다.
   개발은 programj05 전역 reset 의 border-box 가 걸려 총폭이 1100px 로 줄고
   좌/우(로그인폼 / 회원가입·찾기·SNS) 컬럼이 원본보다 좁아진다. */
.login_wrap{box-sizing:content-box;}


/* 게시판 목록 조회수 칸(.date_box.order4.views)이 width:50px+min-width:50px 라
   4자리 조회수 끝자리가 잘린다. board.css 의 고특이성 규칙을 이겨야 해 !important 로 폭 확대.
   (기본 모듈 board.css 12902/9548 보정, 우측 여백 내에서 확장) */
.recruitment_table01 .date_box.order4.views{width:auto !important; min-width:74px !important; overflow:visible !important;}

/* 게시판 목록 작성자 칸(.date_box.order3)이 width:70px + text_ov(말줄임)라
   '변한의원'/'비젠소프트' 가 '변한...' 로 잘린다. 폭 확대 + 말줄임 해제. (기본 모듈 board.css 보정) */
.recruitment_table01 .date_box.order3{width:auto !important; min-width:92px !important; overflow:visible !important;}
.recruitment_table01 .date_box.order3 .text_ov{overflow:visible !important; text-overflow:clip !important; max-width:none !important;}

/* 회원가입 단계(write_step02 / write_step02_two) 하단 [이전][확인] 버튼.
   programj05 기본은 primary=#ea1c5b(핑크)/흑백이 뒤섞여 페이지·상태에 따라 글씨가 안 보이는 경우가 있다.
   변한의원 녹색으로 확실히 고정 (확인=녹색배경+흰글씨 / 이전=흰배경+녹색글씨+녹색테두리). */
.login_submit_btn_box01 .login_chk_btn01{background-color:#619519 !important; color:#fff !important; border:1px solid #619519 !important;}
.login_submit_btn_box01 .login_chk_btn01.type02{background-color:#fff !important; color:#619519 !important; border:1px solid #619519 !important;}

/* ===== 공지사항 목록 가독성 보정 (2026-08-03 고객 게시판 검토 요청 p5) =====
   지적: ① 제목 글씨가 너무 작다 ② 작성자/날짜/조회수 정렬이 이상하다(가운데 정렬) ③ 간격이 좁다
   원인: 제목이 12px 인데 메타(작성자/날짜/조회수)는 20px 라 정보 위계가 뒤집혀 있었고,
         메타 칸이 width:auto 라 조회수 자릿수에 따라 행마다 열 시작 위치가 어긋났다.
   범위: 목록 컨테이너에 board_list_fix 가 붙은 게시판만 (현재 공지사항).
         다른 게시판으로 확대할 때는 해당 index.jsp 목록 div 에 클래스만 추가한다.
   위 order3/order4 규칙이 !important 라 여기서도 !important 로 덮는다.
   모바일(1024px 이하)은 별도 지적 사항이 있어 건드리지 않는다. */
@media all and (min-width:1025px){
	.recruitment_table01.board_list_fix .noice_board_alt_box .tit.text_ov .title_value{font-size:18px;}
	.recruitment_table01.board_list_fix .noice_board_alt_box .date_box{font-size:16px; text-align:center;}
	.recruitment_table01.board_list_fix .date_box.order3{width:140px !important; min-width:140px !important;}
	.recruitment_table01.board_list_fix .date_box.order2{width:140px !important; min-width:140px !important;}
	.recruitment_table01.board_list_fix .date_box.order4.views{width:110px !important; min-width:110px !important; display:flex; align-items:center; justify-content:center; gap:6px;}
}

/* ===== 공지사항 상세 가독성 보정 (2026-08-03 고객 게시판 검토 요청 p6) =====
   지적: ① 제목 글씨가 너무 크다(개발 40px / 원본 18px) ② 이전 페이지 버튼이 너무 작다(12px, 52x22px)
   범위: 상세 컨테이너에 board_read_fix 가 붙은 게시판만 (현재 공지사항).
   버튼 라벨 'Back' -> 다국어 alt.prev(이전/Previous/前へ/上一页) 는 read.jsp 에서 교체.
   모바일(1024px 이하)은 p18 에 별도 지적이 있어 여기서 건드리지 않는다. */
@media all and (min-width:1025px){
	.board_read_fix .recruitment_tit,
	.board_read_fix .recruitment_tit .title_value{font-size:26px;}

	/* 테두리 없는 텍스트 링크 형태 유지 — 글씨 크기와 클릭 높이만 확보 */
	.board_read_fix .prd_back_btn01{
		font-size:16px;
		display:inline-flex;
		align-items:center;
		gap:6px;
		padding:8px 0;
		line-height:1.2;
	}
	.board_read_fix .prd_back_btn01:hover{color:#619519;}
}

/* 상세 본문 동영상 임베드 중앙정렬 (2026-08-03 고객 검토 p10)
   원본 HTML 은 <center><iframe ...></center> 로 가운데 정렬돼 있었는데,
   Function.sanitizeHtml 의 Safelist(relaxed)에 center 태그가 없어 제거되면서 좌측으로 붙었다.
   deprecated 인 center 를 되살리는 대신 CSS 로 정렬한다. */
.board_read_fix .readEdit iframe,
.board_read_fix .content_value iframe{
	display:block;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	/* 2026-08-03 p12: "영상과 글씨가 너무 붙어 있다" — 영상 아래 본문 여백 확보 */
	margin-bottom:32px;
}

/* 자필후기 목록 썸네일 비율 고정 (2026-08-03 고객 검토 p13)
   목록이미지(listfilename)가 348건 전부 비어 있어 index.jsp 에서 본문 첫 이미지를 썸네일로 쓰게 바꿨는데,
   손글씨 스캔은 원본 비율이 제각각이라 카드 높이가 96px~597px 로 들쭉날쭉해졌다.
   비율을 고정하고 상단 기준으로 잘라 성명/증상 표가 보이게 한다. */
.board_thumb_fix .img_box{
	aspect-ratio:3/4;
	overflow:hidden;
}
.board_thumb_fix .img_box img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top center;
}

/* 썸네일 없는 카드가 그리드 stretch 로 늘어나 큰 빈 박스가 되는 것 방지 (p13)
   이미지가 없는 글은 제목+날짜 높이만 차지하게 한다. */
.board_thumb_fix{
	align-items:flex-start;
}

/* ===== 댓글 영역 버튼 색상 통일 (2026-08-03 고객 검토 p26 "댓글 다는 부분도 이상합니다") =====
   레이아웃이 깨진 게 아니라 등록 버튼이 검정, 검색 버튼이 파랑(#4a90d9)이라
   변한의원 초록 톤과 이질적이었다. 검색/로그인 링크 색은 comment.jsp 인라인에서 교체했고,
   등록 버튼은 모듈 CSS 에서 오므로 여기서 덮는다. */
#comment_form input[type="submit"],
form[name^="reply_form"] input[type="submit"]{
	background:#619519 !important;
	border:1px solid #619519 !important;
	color:#fff !important;
}
#comment_form input[type="submit"]:hover,
form[name^="reply_form"] input[type="submit"]:hover{
	background:#527f15 !important;
	border-color:#527f15 !important;
}

/* ===== 모바일(/m 디자인, 뷰포트 640 기준) 글자 크기 보정 =====
   2026-08-03 고객 검토 p18/p19/p20/p26: "로고 크기도 커지고 글자 크기가 몇몇 이상하게 보입니다",
   "제목 글자 크기 너무 큽니다", "제목도 3줄 이상으로 보이면 안될 거 같습니다"
   모바일은 okbyun_shell_css.jsp 에서 viewport width=640 을 쓰므로 여기 px 값은 640 기준이다.
   실제 기기(약 414px)에서는 0.65 배로 축소되어 보인다. */
@media all and (max-width:1024px){
	/* 상세 제목: 40px(실기기 26px) → 30px(실기기 19px) */
	.board_read_fix .recruitment_tit,
	.board_read_fix .recruitment_tit .title_value{
		font-size:30px;
		line-height:1.35;
	}

	/* 목록 제목: 3줄 이상 늘어나지 않도록 2줄로 제한 */
	.board_list_fix .noice_board_alt_box .tit.text_ov .title_value{
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		overflow:hidden;
	}

	/* 본문 이미지가 640 폭을 넘어 잘리는 것 방지 (p26 "잘려서 보입니다") */
	.board_read_fix .content_value img,
	.board_read_fix .readEdit img{
		max-width:100%;
		height:auto;
	}
}

/* ===== 모바일 사이드메뉴 (2026-08-03 고객 검토 p28) =====
   지적: ① 메뉴 스크롤이 끝까지 안 내려가 언론보도 아래 항목을 볼 수 없다 ② 글자가 너무 크다 ③ 공지사항 메뉴가 없다
   원인: /m/css/layout.css:136 의 .menu_body 가 height:100% + overflow:hidden 이라
         내용이 넘치면 잘려버리고, 부모(.menu_wrap)의 overflow-y:scroll 도 스크롤할 내용이 없어 무력화된다.
   (③ 공지사항 메뉴는 /m/leftmenu.jsp 에 직접 추가했다.) */
.leftmenu_box .menu_wrap{
	height:100%;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}
.leftmenu_box .menu_wrap .menu_body{
	height:auto !important;
	overflow:visible !important;
	padding-bottom:40px;   /* 마지막 항목이 하단 고정바에 가리지 않도록 */
}

/* 신규 p6(2026-08-04): "게시판 간격 조정은 못 하는건가요" — 갤러리형 카드 행간이 넓다는 지적.
   .com_prd_box_gallery_total_wrapper 의 flex gap 40px → 24px 로 축소. */
.com_prd_box_gallery_total_wrapper{
	gap:24px !important;
}

/* 신규 p8(2026-08-04): "자필후기 부분 잘려 보이는 것" — 기존 홈페이지에선 잘 보였다는 지적.
   자필후기 348건 중 309건이 본문에 고정폭(width="700" 등)을 쓰고 있어
   본문 컨테이너(1064px)보다 넓으면 오른쪽이 잘린다.
   표/이미지를 컨테이너 폭에 맞추고, 그래도 넘치는 표는 자체 가로 스크롤로 처리한다. */
.board_read_fix .content_value table,
.board_read_fix .readEdit table{
	max-width:100% !important;
	width:auto !important;
	table-layout:auto !important;
}
.board_read_fix .content_value img,
.board_read_fix .readEdit img{
	max-width:100% !important;
	height:auto;
}
.board_read_fix .content_value,
.board_read_fix .readEdit{
	overflow-x:auto;
}

/* ===== alert/confirm 모달 세로 중앙정렬 (2026-08-10) =====
   board.css 의 .alert-modal-container 는 margin:15%(모바일 20%) auto 라 화면 중앙이 아니라
   위로 치우쳐 뜬다("정말 댓글을 삭제하시겠습니까?" 등). 실측 모바일 477px / PC 103px 위.
   ※ 크기(폭/글자)는 건드리지 않는다 — 위치만 보정.
   ※ overlay 의 display 는 alert_modal.jsp 가 인라인(block/none)으로 제어한다.
      CSS 로 그냥 display:flex 를 주면 인라인 none 까지 덮어써 모달이 안 닫히므로,
      인라인 style 에 block 이 들어간 동안에만 매칭되는 속성 선택자를 쓴다.
   ※ container 를 fixed/absolute 로 띄우면 shrink-to-fit 되어 폭이 내용 크기로 줄고,
      box-sizing 이 모바일 셸과 PC 셸에서 달라 width 를 고정하면 어긋난다.
      → flex item 으로 두고 width:100% + board.css 의 max-width 로 기존 폭을 그대로 유지한다. */
#alertModalOverlay[style*="block"]{
	display:flex !important;
	align-items:center;
	justify-content:center;
	/* 기존 margin 좌우 15px 를 대신해 오버레이 패딩으로 여백을 확보한다.
	   (container 는 content-box 라 max-width 만으로는 좌우 여백이 남지 않는다) */
	padding:0 15px;
	box-sizing:border-box;
}
#alertModalOverlay[style*="block"] .alert-modal-container{
	margin:0 !important;
	width:100%;
	max-height:80vh;
	overflow-y:auto;
}