@charset "utf-8";
@import "fonts.css";
@import "yullin.css";
/* [2026-08-11] 옛 Font Awesome 5.12.0 @import 삭제 — 화면마다 /vendor/fa7/(7.3.1) 을 직접 싣는다.
   5.12.0 이 뒤에 실리면 .fa 계열 글꼴을 도로 덮어써 새 아이콘이 네모로 깨진다. */
@import "ionicons.min.css";

/* =========================================================
   ✅ login (EASY HACCP)
   - 좌측: 브랜드 + 아이콘 패턴(svg)
   - 우측: 배경이미지(선명) + 로그인폼만 반투명 카드(블러)
   - 우하단: bg_picker(썸네일) 고정
========================================================= */

/* =========================================================
   ✅ Layout Core Fix (중요)
   - 기존 col_6 / float 기반 레이아웃이 남아있으면
     화면 리사이즈 중 “오른쪽/오른쪽하단/좌측으로 밀림 + 흰 여백” 현상이 발생할 수 있음.
   - 아래 규칙으로 float/col을 무력화하고, flex로 “완전 고정”합니다.
========================================================= */

/* box sizing / 가로 스크롤 방지 */
*,
*::before,
*::after{
  box-sizing: border-box;
}

/* login */
html, body {
  height: 100%;
}
body {
  background: #fff;
  font-family:'Pretendard','맑은고딕','Malgun Gothic',sans-serif;
  margin: 0;
  overflow-x: hidden; /* ✅ resize 중 오른쪽 흰 여백/가로 스크롤 방지 */
}

/* 컨테이너 */
.login_contain{
  width: 100%;
  min-height: 100vh;   /* 데스크탑 */
  min-height: 100dvh;  /* 모바일 주소창/키보드 대응 */
  display: flex !important;     /* ✅ 핵심: flex 고정 */
  overflow: hidden;
}

/* 기존 프레임워크(col_6/layout)의 float/width 충돌 방지 */
.login_contain .layout{
  float: none !important;
  margin: 0 !important;
  height: auto !important;
  width: auto !important;       /* ✅ col_6 width(50%) 잔재 무력화 */
  max-width: none !important;
  position: relative;
}

/* 좌/우 패널을 50:50 기준으로 고정(데스크탑) */
.login_contain .left{
  flex: 0 0 50%;
  max-width: 50%;
  position: relative;
}
.login_contain .right{
  flex: 1 1 50%;
  max-width: 50%;

  /* ✅ 리사이즈 시 카드가 밀리지 않게 “정중앙 고정” */
  display: flex;
  align-items: center;      /* 세로 중앙 */
  justify-content: center;  /* 가로 중앙 */

  position: relative; /* right_bg 기준 */
  overflow: hidden;
  background: #fff;

  /* ✅ 카드가 커질 때도 안전 */
  padding: 40px 24px;
}

/* 오른쪽 영역 배경 레이어 */
.login_contain .right .right_bg,
.login_contain .right .right_bg#loginRightBg{
  position: absolute;
  inset: 0;
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

/* ✅ 전체 뿌연 오버레이는 사용하지 않음(배경 선명 유지) */
.login_contain .right .right_bg::after{
  display: none;
}

/* =========================
   ✅ LEFT
========================= */
.login_contain .left{
  padding: 100px 60px 0 60px;
}

.login_contain .top_title{
  position: absolute;
  /* [Phase 39-P FIX1 / 2026-05-11] 좌측 텍스트 위치 조정 - 상단 가까이 */
  top: 24px;       /* 기본값(브라우저 dependant) → 화면 상단 24px 고정 */
  left: 70px;      /* .left padding 과 일치 */
  right: 30px;
  z-index: 1;
}
@media (max-height: 800px){
  .login_contain .top_title{ top: 16px; left: 50px; }
}

.login_contain .top_title .logo_wrap{
  margin-bottom: 15px;
  font-size: 40px;
  color: #fff;
  font-weight: 700;
}

.login_contain .top_title .logo_wrap h1{
  font-size:54px;
  line-height: 1.1;
  font-weight:500;
  padding-right: 60px;
}

.login_contain .top_title .logo_wrap h1 div{
  font-size:54px;
  line-height: 1.1;
  font-weight:800;
}

.login_contain .top_title .logo_wrap span{
  font-size:16px;
  font-weight:500;
}

.login_contain .top_title .logo_wrap img{
  width: 165px;
}

.login_contain .top_title span{
  line-height: 1.5;
  color: #fff;
  font-size:16px;
  font-weight: 500;
}

/* ✅ “간격이 넓어보임” 개선 (좌측 문구/리스트 촘촘) */
.top_title span h3{
  line-height: 1.25;
  margin: 6px 0;
}

/* 좌측 하단 아이콘 패턴(여백 줄이고 위로 올리기) */
/* ============================================================
   [Phase 39-P v4 / 2026-05-11] 패턴 = 원래 스타일 복원 (텍스트는 별도 상위 이동)
   - 원본: bottom:60px + height:700px + size:90% + position:70% 100%
   - 이번 변경: 텍스트는 .top_title 의 top:24px 으로 위로 올렸으므로
     패턴은 원래 그대로 두어도 텍스트와 자연스럽게 분리됨
============================================================ */
.login_contain .bg_img{
  position: absolute;
  width: 100%;
  height: 700px;
  bottom: 60px;
  right: 40px;
  text-align: right;
  padding-left: 70px;
  margin-left: 100px;

  background-image: url(../img/login_bg_p.svg);
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: 70% 100%;

  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.login_contain .bg_img img{
  max-width: 650px;
}

/* 텍스트(.top_title) 가 패턴 위에 떠있도록 */
.login_contain .top_title{ z-index: 1; }

/* =========================
   ✅ LOGIN FORM (카드 스타일)
   - 기존 absolute + translate 방식은 특정 구간(1024~769)에서
     col_6/float 잔재와 충돌해 “밀림/흰여백”이 발생할 수 있음.
   - right를 flex 중앙정렬로 만들고, form은 relative로 둬서 안정화.
========================= */

/* ✅ right 안에서 login_form은 “flex 중앙정렬 대상” */
.login_contain .login_form{
  width: min(520px, 92%);
  max-width: 535px;

  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;      /* ✅ 핵심: translate 기반 위치 제거 */
  margin: 0 !important;

  text-align: left;
  z-index: 2; /* ✅ 배경 위 */
}

/* ✅ 폼만 반투명 카드 + 블러 + 그림자 */
.login_contain .right .login_form{
  background: rgba(255,255,255,0.75);   /* 🔥 투명도 조절 포인트 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-radius: 16px;
  padding: 32px 34px;

  box-shadow: 0 28px 70px rgba(0,0,0,0.22);
}

/* 카드 안 타이틀 */
.login_contain .login_form .title_wrap{
  width: 100%;
  margin-bottom: 50px;
}

.login_contain .login_form .title_wrap img{
  width: 298px;
}

.login_contain .login_form .title_wrap h1{
  font-size: 40px;
  color: #1e2539;
}

.login_contain .login_form .title_wrap span{
  font-size: 20px;
  font-weight: 500;
  color: #313133;
  display: block;
  text-align: left;
  margin-bottom: 5px;
}

.login_contain .login_form .title_wrap h4{
  font-size: 38px;
  font-weight: 600;
  color: #313133;
  display: block;
  text-align: left;
  margin-bottom: 5px;
}

/* form */
.login_contain .login_form .form{
  margin-bottom: 40px;
  position: relative;
}

.login_contain .login_form .form h2{
  font-size: 13px;
  font-weight: 400;
  color: #a1a3b6;
  margin-bottom: 5px;
}

input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

.login_contain .login_form .form input{
  border: 0;
  border-bottom: 1px solid #252525;
  background-color: transparent;
  width: 100%;
  font-size: 15px;
  padding-bottom: 10px;
  padding-left: 0;
  padding-top: 10px;
  margin-bottom: 30px;
  outline: 0;
  border-spacing: 0;
}

.login_contain .login_form .form .pass,
.login_contain .login_form .form .email{
  margin-bottom: 0;
}

.login_contain .login_form form input:focus{
  outline: none;
}

/* password eye */
.login_contain .login_form .pass_box{
  position: relative;
}

.login_contain .login_form .pass_box input{
  padding-right: 42px;
}

.login_contain .login_form .pass_box i{
  position: absolute;
  font-size: 22px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #989db1;
  cursor: pointer;
}

.login_contain .login_form .input_group{
  display: inline-block;
}

.login_contain .login_form .checkbox{
  vertical-align: middle;
  margin-top: 0;
}

.login_contain .login_form .sub_box{
  margin-top: 21px;
}

.login_contain .login_form .sub_box .right_align{
  margin-top: 6px;
}

.login_contain .login_form .sub_box .right_align a{
  text-decoration: none;
  color: #2d2d2d;
}

/* language */
.login_contain .login_form .lang_box{
  position: relative;
  padding-top: 20px;
  margin-bottom: 40px;
  width: 100%;
}

.login_contain .login_form .lang_box #lang_select{
  cursor: pointer;
  padding: 0 13px 0 10px;
  width: 100%;
  height: 35px;
  font-size: 14px;
  color: #9096ab;
  text-align: left;
  border: 1px solid #d7dce5;
  border-radius: 6px;
  box-shadow: 1px 1px 5px 0px rgba(232, 234, 255, 1);
  background: #fff url('../img/icon/icon_down02.png') 97% center no-repeat;
}

.login_contain .login_form .lang_box ul{
  display: none;
  position: absolute;
  z-index: 10;
  margin-top: 5px;
  width: 100%;
  border: 1px solid #d7dce5;
  border-radius: 6px;
  box-shadow: 1px 1px 5px 0px rgba(232, 234, 255, 1);
  background-color: rgba(255,255,255,0.9);
}

.login_contain .login_form .lang_box ul.active{
  display: block;
}

.login_contain .login_form .lang_box ul li{
  border-top: 1px solid #d7dce5;
}

.login_contain .login_form .lang_box ul li:first-child{
  border-top: 0;
}

.login_contain .login_form .lang_box label{
  display: block;
  padding: 0 10px;
  width: 100%;
  line-height: 33px;
  cursor: pointer;
}

.login_contain .login_form .lang_box label .icon{
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
}

.login_contain .login_form .lang_box label[for="lang1"] .icon{ background-image: url('../img/icon/lang_icon01.png'); }
.login_contain .login_form .lang_box label[for="lang2"] .icon{ background-image: url('../img/icon/lang_icon02.png'); }
/* ✅ 오타 수정(점(.) 누락되어 있었음) */
.login_contain .login_form .lang_box label[for="lang3"] .icon{ background-image: url('../img/icon/lang_icon03.png'); }
.login_contain .login_form .lang_box label[for="lang4"] .icon{ background-image: url('../img/icon/lang_icon04.png'); }
.login_contain .login_form .lang_box label[for="lang5"] .icon{ background-image: url('../img/icon/lang_icon05.png'); }
.login_contain .login_form .lang_box label[for="lang6"] .icon{ background-image: url('../img/icon/lang_icon06.png'); }

.login_contain .login_form .lang_box ul li.on,
.login_contain .login_form .lang_box label:hover{
  background-color: #eb485c;
  color: #fff;
  border-radius: 4px;
}

.login_contain .login_form .lang_box ul li.on{
  border-radius: 0;
}

.login_contain .login_form .lang_box label .radiobox{
  display: inline-block;
  float: right;
  width: 12px;
  height: 33px;
}

.login_contain .login_form .lang_box input:checked ~ .radiobox{
  background: url('../img/icon/icon_radio.png') center no-repeat;
}

.login_contain .login_form .lang_box input{
  border: 0;
  width: auto;
  margin: 0;
}

.login_contain .login_form h3{
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #a8abaf;
}

.login_contain .login_form h3 a{
  color: #eb485c;
  text-decoration: underline;
}

/* buttons */
.login_contain .button_group{
  display: flex;
}

.login_contain .sign_btn{
  margin-top: 21px;
  padding: 13px;
  width: 100%;
  text-align: center;
  font-size: 16px; 
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;         /* ✅ 버튼 강조 */
  letter-spacing: 0.5px;    /* ✅ 버튼 강조 */
}

.login_contain .sign_btn.cancel{
  margin-left: 5px;
  background: #fff;
}

/* ax5ui alerts */
.ax-button-wrap button{
  font-size: 12px;
}

.ax5-ui-dialog .ax-dialog-header{
  color: #eb485c;
  background: #e8efff;
}

.ax5-ui-dialog .ax-dialog-body button{
  cursor: pointer;
  padding: 5px 8px 4px 8px;
  vertical-align: middle;
  border: 1px solid #eb485c;
  color: #eb485c;
  background: #fff;
}

/* =========================
   ✅ 기타 컴포넌트
========================= */
.search_box_comp{
  position: relative;
  width: 100%;
}

.input-group-symbol{
  position: absolute;
  font-size: 20px;
  color: #ccc;
  right: 5px;
  top: 20%;
}

.naver_login_img,
.kakao_login_img{
  text-align: center;
}

.naver_login_img img,
.kakao_login_img img{
  width: 80%;
}

.search_box_comp i{
  cursor: pointer;
}

.logo_list{
  margin-top:40px;
}
.logo_list span{
  margin-right: 15px;
}
.logo_list span img{
  width:auto;
  height:35px;
}

.mark_haccp{
  position:absolute;
  top:0;
  right:20px;
}

/* === top_logo 전용 반응형 사이즈 === */
.login_contain .login_form .title_wrap .top_logo{
  line-height: 0;
  margin: 0 0 14px 0;
}

.login_contain .login_form .title_wrap .top_logo img{
  display: block;
  width: clamp(56px, 9vw, 100px);
  height: auto;
  max-width: none;
}

/* 로그인 부제 작은 글씨 */
.login_contain .login_form .title_wrap .subtitle-small{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* =========================
   ✅ 배경 선택 썸네일 (우하단 고정)
========================= */
.bg_picker{
  position: fixed;
  right: 30px;
  bottom: calc(25px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  z-index: 99999;
}

.bg_picker .thumb{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.18);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0.9;
  outline: none;
  padding: 0;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.bg_picker .thumb.active{
  border-color: #2f5fd4;
  transform: scale(1.06);
  opacity: 1;
}

/* =========================
   ✅ Responsive
========================= */
@media (max-width:1450px){
  .login_contain .top_title .logo_wrap h1 div{
    font-size:50%;
  }
}

/* ✅ 핵심 구간(1024~769 포함) 안정화:
   - left는 숨기고 right는 100% 강제
   - col_6/float 잔재로 right가 50%로 남거나, 흰여백이 생기는 문제 차단
*/
@media (max-width:1024px){
  .login_contain .left{
    display: none !important;
  }
  .login_contain .right{
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 40px 24px;
  }

  .login_contain .login_form .title_wrap{ margin-bottom: 30px; }
  .login_contain .login_form .title_wrap img{ width: 85%; }
  .login_contain .login_form .title_wrap h1{ font-size: 25px; }

  .login_contain .sign_btn{ margin-top: 30px; }

  /* ✅ 모바일/태블릿에서 블러 강도 살짝 낮추면 더 선명 */
  .login_contain .right .login_form{
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .login_contain .login_form .title_wrap .top_logo img{ width: 100px; }
}

/* 모바일(≤767) : 썸네일 크기 축소 */
@media (max-width: 767px){
  .bg_picker{
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .bg_picker .thumb{
    width: 38px;
    height: 38px;
  }

  .login_contain .login_form .title_wrap{
    margin-top: 8px;
  }
  .login_contain .login_form .title_wrap .top_logo{
    margin-bottom: 12px;
  }
  .login_contain .login_form .title_wrap .top_logo img{
    width: 100px;
  }
}

/* 모바일(≤600) : 폼 카드 폭/패딩 최적화 + 썸네일 숨김(선택) */
@media (max-width: 600px){
  .login_contain{
    min-height: 100dvh;
  }

  .login_contain .login_form{
    width: min(92vw, 520px);
  }

  .login_form .title_wrap h4{
    font-size: 22px;
  }

  /* 썸네일 배경 선택 버튼은 모바일에서 숨기는 것을 추천 */
  .bg_picker{
    display: none;
  }
}

/* =========================================================
✅ 투명도 조절 가이드
- 아래 값만 바꾸면 “카드 투명도”가 바뀝니다.
  .login_contain .right .login_form{
      background: rgba(255,255,255,0.75);
  }

값     느낌
0.95   거의 흰색(불투명)
0.85   안정적(가독성 좋음)
0.75   배경 더 보임(현재)
0.65   유리 느낌(조심)
0.55↓  너무 투명(가독성 위험)
========================================================= */