/* ==================================================
   무료체험 신청 (price/join.html 전용 : .join-step02 범위)
   기본 레이아웃은 기존 helpu.css 표 형식(관리자 정보 / 회사 정보)을 그대로 사용하고,
   아래 항목만 추가 : 이메일 한 칸 입력, 약관 동의, 신규 고객 프로모션
   ================================================== */

/* 이메일 : 아이디 @ 도메인 한 칸 입력 + 도메인 드롭다운 */
.join-step02 .j2-ev-line{display:flex; align-items:center; gap:4px; max-width:560px;}
.join-step02 .j2-ev-box{position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center; height:35px; border:solid 1px #cccccc; background:#fff; box-sizing:border-box;}
.join-step02 .j2-ev-box:focus-within{border-color:#2a969d;}
.join-step02 .join-form-row .j2-ev-box input#email1,
.join-step02 .join-form-row .j2-ev-box input#email2{flex:1 1 0; width:auto; min-width:0; height:100%; padding:0 8px; border:0; background:transparent; outline:0; box-shadow:none; font-size:14px; color:#333;}
.join-step02 .j2-ev-box input::placeholder{color:#aaa;}
.join-step02 .join-form-row span.j2-ev-at{display:inline; flex:0 0 auto; padding:0 2px; font-size:14px; line-height:1; color:#888;}
.join-step02 .j2-ev-domain{position:relative; flex:1 1 0; min-width:0; display:flex; align-items:center; height:100%; cursor:pointer;}
.join-step02 .j2-ev-domain input{cursor:pointer;}
.join-step02 .j2-ev-domain.is-typing input{cursor:text;}
.join-step02 .j2-ev-arrow{flex:0 0 30px; height:100%; padding:0; border:0; background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; cursor:pointer;}
.join-step02 .j2-ev-domain.open .j2-ev-arrow{transform:rotate(180deg);}
.join-step02 .j2-ev-list{display:none; position:absolute; z-index:20; top:calc(100% + 2px); right:-1px; left:0; min-width:150px; margin:0; padding:4px 0; list-style:none; background:#fff; border:solid 1px #cccccc; box-shadow:0 6px 16px rgba(0,0,0,.1);}
.join-step02 .j2-ev-domain.open .j2-ev-list{display:block;}
.join-step02 .j2-ev-list li{padding:8px 12px; font-size:14px; color:#333; cursor:pointer; list-style:none;}
.join-step02 .j2-ev-list li:hover, .join-step02 .j2-ev-list li.on{background:#eef7f7; color:#2a969d;}
.join-step02 .j2-ev-list li.direct{margin-top:4px; border-top:solid 1px #eeeeee; color:#666;}
.join-step02 .j2-ev-line .btn-join-form{flex:0 0 auto; height:35px; margin:0 0 0 2px; white-space:nowrap;}

/* 약관 동의 */
.join-step02 .join-agree-wrap{margin:10px 0; padding:10px 20px; border:solid 1px #d1d1d1; border-radius:10px; background:#fff; font-size:13px;}
.join-step02 .join-agree-wrap .agree-row{display:flex; align-items:center; gap:8px; min-height:28px; padding:1px 0;}
.join-step02 .join-agree-wrap .agree-row.all{margin-bottom:4px; padding-bottom:6px; border-bottom:solid 1px #e7ebec;}
.join-step02 .join-agree-wrap .agree-row input{width:16px; height:16px; margin:0; accent-color:#2a969d; cursor:pointer;}
.join-step02 .join-agree-wrap .agree-row label{color:#526367; line-height:1.4; cursor:pointer;}
.join-step02 .join-agree-wrap .agree-row.all label{color:#2a969d; font-weight:bold;}
.join-step02 .join-agree-wrap .btn-agree-view{margin-left:4px; padding:0; border:0; background:none; color:#2a969d; font-family:inherit; font-size:12px; font-weight:bold; cursor:pointer;}

/* 약관 원문 모달 */
.agree-modal{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10000;}
.agree-modal .agree-modal-box{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:640px; max-height:70vh; background:#fff; border-radius:6px; box-shadow:0 4px 20px rgba(0,0,0,0.25); display:flex; flex-direction:column;}
.agree-modal .agree-modal-head{position:relative; padding:16px 48px 16px 20px; border-bottom:solid 1px #e5e5e5; font-size:16px; font-weight:bold; color:#333;}
.agree-modal .agree-modal-close{position:absolute; top:10px; right:12px; width:32px; height:32px; background:none; border:0; font-size:24px; line-height:32px; color:#666; cursor:pointer;}
.agree-modal .agree-modal-body{padding:16px 20px; overflow-y:auto; font-size:12px; line-height:1.6; color:#555; white-space:pre-wrap; word-break:break-all;}

/* 신규 고객 프로모션 팝업 (세로형 / 좌측 중앙 플로팅, 클래스 hup- 네임스페이스) */
.hup{position:fixed; left:24px; top:50%; transform:translateY(-50%);
	width:290px; z-index:79; border-radius:18px; overflow:hidden;
	font-family:"Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
	color:#16262c; isolation:isolate; text-align:left;
	background-color:#fff; border:1px solid #d7e3e1;
	box-shadow:0 22px 52px rgba(14,46,50,.22), 0 4px 12px rgba(14,46,50,.10);
	animation:hupIn .42s cubic-bezier(.22,.9,.3,1) both;}
.hup *{box-sizing:border-box;}
@keyframes hupIn{from{opacity:0; transform:translateY(calc(-50% + 12px));} to{opacity:1; transform:translateY(-50%);}}
@keyframes hupInTop{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.hup{animation:none;}}
/* 화면이 낮을 때 : 세로 중앙에 두면 사이트 고정 헤더(98px) 뒤로 숨으므로 헤더 아래에 고정 */
@media (max-height:620px){.hup{top:106px; transform:none; animation-name:hupInTop;}}
@media print{.hup{display:none;}}

.hup .hup-x{position:absolute; width:32px; height:32px; top:12px; right:12px; z-index:3;
	padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer;
	color:rgba(255,255,255,.78); font-family:inherit; font-size:19px; line-height:32px; text-align:center;
	transition:background-color .15s,color .15s;}
.hup .hup-x:hover{background-color:rgba(255,255,255,.16); color:#fff;}
.hup a:focus-visible,.hup button:focus-visible,.hup label:focus-within{outline:2px solid #2a969d; outline-offset:2px; border-radius:6px;}
.hup .hup-x:focus-visible{outline-color:#fff;}

.hup-head{padding:16px 24px 15px; background-color:#116a71;}
.hup-body{padding:18px 24px 16px;}
.hup-badge{display:inline-flex; align-items:center; height:25px; padding:0 11px 0 9px;
	border-radius:13px; background-color:#e8f4f4;
	font-size:11.5px; font-weight:700; letter-spacing:-.02em; color:#1b7d83;}
.hup-badge svg{width:14px; height:14px; margin-right:5px; flex:none; fill:currentColor;}
.hup .hup-h{margin:10px 0 0; padding:0; font-size:20px; font-weight:700; line-height:1.25; letter-spacing:-.055em; color:#fff;}
.hup .hup-sub{margin:6px 0 0; padding:0; font-size:14px; font-weight:400; line-height:1.3; letter-spacing:-.025em; color:rgba(255,255,255,.82);}
.hup .hup-sub b{font-weight:700; color:#fff;}

.hup-opt{display:flex; align-items:center; padding:13px 16px; border-radius:12px; border:1px solid #e4ebea; background-color:#f7fafa;}
.hup-opt .ic{flex:none; width:38px; height:38px; margin-right:13px; border-radius:19px; background-color:#e3f1f1; color:#2a969d; display:flex; align-items:center; justify-content:center;}
.hup-opt .ic svg{display:block; width:20px; height:20px;}
.hup-opt .tx{min-width:0;}
.hup-opt .lb{display:block; font-size:11px; font-weight:600; letter-spacing:.02em; color:#8c9ca0;}
.hup-opt .vl{display:block; margin-top:2px; font-size:19px; font-weight:700; line-height:1.25; letter-spacing:-.05em; color:#16262c;}
.hup-opt .vl em{font-style:normal; font-size:15px; font-weight:600; color:#3d5158;}
.hup-or{display:flex; align-items:center; height:30px;}
.hup-or:before,.hup-or:after{content:''; flex:1 1 0; height:1px; background-color:#e7eeed;}
.hup-or span{flex:none; height:22px; margin:0 10px; padding:0 11px; border-radius:11px; background-color:#e8f4f4; color:#1b7d83; font-size:11px; font-weight:700; letter-spacing:-.03em; line-height:22px;}
.hup .hup-note{margin:16px 0 0; padding:0; font-size:11.5px; line-height:1.5; letter-spacing:-.03em; color:#8c9ca0;}

.hup-tel{display:flex; align-items:center; height:46px; padding:0 24px; border-top:1px solid #eef3f2; color:inherit; text-decoration:none; transition:background-color .15s;}
.hup-tel:hover{background-color:#f7fafa;}
.hup-tel .ph{flex:none; width:26px; height:26px; margin-right:10px; border-radius:13px; background-color:#e8f4f4; display:flex; align-items:center; justify-content:center;}
.hup-tel .ph svg{width:14px; height:14px; fill:#1b7d83;}
.hup-tel .lb{flex:none; font-size:12px; font-weight:600; letter-spacing:-.035em; color:#8c9ca0;}
.hup-tel .dv{flex:none; width:1px; height:14px; margin:0 9px; background-color:#e2e9e8;}
.hup-tel .no{flex:1 1 auto; min-width:0; font-size:16px; font-weight:700; letter-spacing:-.03em; color:#16262c; white-space:nowrap;}
.hup-tel .ar{flex:none; width:16px; height:16px; color:#b4c2c5;}
.hup-tel .ar svg{display:block; width:100%; height:100%;}

.hup-foot{display:flex; justify-content:space-between; align-items:center; height:32px; padding:0 24px; background-color:#f7fafa; border-top:1px solid #eef3f2;}
.hup-foot label{display:flex; align-items:center; margin:0; cursor:pointer; font-size:11px; letter-spacing:-.03em; color:#8c9ca0;}
.hup-foot label input{width:12px; height:12px; margin:0 6px 0 0; accent-color:#2a969d;}
.hup-foot button{padding:0; border:0; background:none; cursor:pointer; font-family:inherit; font-size:11px; letter-spacing:-.03em; color:#8c9ca0;}
.hup-foot button:hover{color:#16262c;}

@media (max-width: 960px){
	.join-step02 .j2-ev-line{max-width:none;}
}
@media (max-width: 720px){
	.join-step02 .j2-ev-line{flex-wrap:wrap;}
	.join-step02 .j2-ev-box{flex-basis:100%;}
	.join-step02 .j2-ev-line .btn-join-form{flex:1 1 100%; margin:4px 0 0;}
	.join-step02 .join-agree-wrap{padding:12px 14px;}
	/* 프로모션 팝업 : 모바일은 하단에 좌우 꽉 차게 */
	.hup{top:auto; right:10px; bottom:10px; left:10px; width:auto; transform:none; animation-name:hupInTop;}
	.hup-head{padding:16px 18px 15px;}
	.hup-body{padding:14px 18px 12px;}
	.hup-tel,.hup-foot{padding:0 18px;}
}