@charset "utf-8";

/* =========================================================
   auth.css  —  로그인/회원가입/계정찾기 공통 스타일
   ========================================================= */

/* ---- 변수 ---- */
:root{
  --auth-point:#cd0111;            /* 주요 실행 버튼 */
  --auth-point-dark:#a4010e;
  --auth-point-soft:rgba(205,1,17,.12);
  --auth-bg:#ffffff;               /* 페이지 배경 */
  --auth-text:#222222;
  --auth-text-sub:#7c7f86;
  --auth-line:#e6e7ea;
  --auth-input-bg:#f6f7f8;
  --auth-input-border:#e0e1e6;
  --auth-input-text:#333333;
  --auth-placeholder:#aeb1b8;
  --auth-notice-bg:#f4f5f7;
  --auth-dark-btn:#3a3f48;         /* 중복확인 버튼 */
  --auth-dark-btn-hover:#2c313a;
  --auth-radius:4px;
  --auth-field-h:48px;
  --auth-icon-sub:#666666;    /* modal__close 아이콘 색 (기존 layout.css --color-text-sub 참조값과 동일, 자체 정의로 전환) */
}

/* =========================================================
   레이아웃
   ========================================================= */
html{ scrollbar-gutter: stable; } /* 스크롤바 자리 항상 확보 → 모달 열림/페이지 전환 시 콘텐츠 좌우 밀림 방지 */
.auth-page{display:flex;align-items:flex-start;justify-content:center;padding:var(--auth-gap, 56px) 20px 56px;}
.auth{width:100%;max-width:460px;}
.auth__title{text-align:center;font-size:1.9rem;font-weight:500;letter-spacing:-0.03em;color:#1a1a1a;margin-bottom:34px;font-family: 'NoonnuBasicGothic', sans-serif;}

/* ---- 안내 박스 ---- */
.auth-notice{background:var(--auth-notice-bg);border-radius:var(--auth-radius);padding:18px 20px;margin-bottom:30px;font-size:.8rem;}
.auth-notice strong{display:block;color:var(--auth-point);font-weight:500;}
.auth-notice p{color:var(--auth-text-sub);}

/* =========================================================
   폼 요소
   ========================================================= */
.field{margin-bottom:18px;}
.field > label{display:block;font-size:.92rem;font-weight:700;color:#333;margin-bottom:6px;}
.field input[type="text"],
.field input[type="password"],
.field input[type="email"]{width:100%;height:var(--auth-field-h);padding:0 16px;font-size:.95rem;color:var(--auth-input-text);background:var(--auth-input-bg);border:1px solid var(--auth-input-border);border-radius:var(--auth-radius);outline:none;transition:border-color .15s, box-shadow .15s;}
.field input::placeholder{color:var(--auth-placeholder);}

/* ---- 아이디 + 중복확인 (붙은 형태) ---- */
.input-group{display:flex;}
.input-group input{flex:1;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;}
.btn-dup{flex:0 0 auto;height:var(--auth-field-h);padding:0 20px;font-size:.9rem;font-weight:700;color:#fff;background:var(--auth-dark-btn);border-radius:0 var(--auth-radius) var(--auth-radius) 0;transition:background .15s;}
.btn-dup:hover{background:var(--auth-dark-btn-hover);}

/* =========================================================
   약관 동의
   ========================================================= */
.agree{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.agree:last-of-type{margin-bottom:0;}
.agree label{display:flex;align-items:center;gap:8px;font-size:.84rem;color:#333;cursor:pointer;}
.agree input[type="checkbox"]{width:18px;height:18px;accent-color:var(--auth-point);cursor:pointer;flex:0 0 auto;}
.btn-detail{flex:0 0 auto;padding:4px 8px;font-size:.72rem;color:#555;background:#fff;border:1px solid var(--auth-input-border);border-radius:4px;transition:border-color .15s, color .15s;}
.agree-wrap{margin-bottom:18px;}

/* =========================================================
   버튼 / 링크
   ========================================================= */
.btn-primary{width:100%;height:54px;font-size:1.05rem;font-weight:700;color:#fff;background:var(--auth-point); border-radius:var(--auth-radius);transition:background .15s;margin-top:6px;}
.auth-links{text-align:center;margin-top:22px;font-size:.9rem;color:#6a6d73;}
.auth-links a{color:#6a6d73;transition:color .15s;}
.auth-links .sep{margin:0 12px;color:#d2d3d7;}

.btn-register{width:100%;height:54px;font-size:1.05rem;font-weight:700;color:#fff;background:#2f3961; border-radius:var(--auth-radius);transition:background .15s;margin-top:6px;}
/* =========================================================
   결과 페이지 (아이디/비번 찾기 결과)
   ========================================================= */
.result{text-align:center;padding:10px 0 30px;}
.result__label{color:#555;margin-bottom:12px;font-size:0.9rem;}
.result__id{font-size:1.2rem;font-weight:800;color:var(--auth-point);letter-spacing:-0.02em;}
.result__email{font-size:1.2rem;font-weight:700;color:#1a1a1a;margin-bottom:10px;word-break:break-all;}
.result__desc{color:#7c7f86;font-size:0.9rem;}

/* =========================================================
   모달 (회원가입 약관 자세히보기)
   ========================================================= */
.modal{position:fixed;inset:0;z-index:1000;display:none;}
.modal.is-open{display:block;}
.modal__dim{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.modal__box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 40px);max-width:540px;max-height:65vh;background:#fff;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:modalUp .22s ease;}

@keyframes modalUp{from{opacity:0;transform:translate(-50%,-46%);}to{opacity:1;transform:translate(-50%,-50%);}}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--auth-line);}
.modal__title{font-size:1.12rem;font-weight:700;color:#1a1a1a;}
.modal__close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--auth-icon-sub);background:none;position: relative;top: -5px;}
.modal__close svg{width:24px;height:24px;}
.modal__body{padding:22px;overflow-y:auto;font-size:.8rem;line-height:1.8;color:#555;}
.modal__body h4{font-size:.86rem;color:#222;font-weight:600;margin:16px 0 6px;}
.modal__body h4:first-child{margin-top:0;}
.modal__foot{padding:14px 22px;border-top:1px solid var(--auth-line);}
.modal__foot .btn-primary{height:48px;margin-top:0;font-size:1rem;}
body.modal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}

/* =========================================================
   반응형
   ========================================================= */
/* 태블릿 */
@media (max-width:768px){
  .auth__title{font-size:1.8rem;margin-bottom:30px;}
  /* 폼 요소 */
  .field input[type="text"],
  .field input[type="password"],
  .field input[type="email"]{font-size:16px;}
}

/* 모바일 */
@media (max-width:480px){
  .auth-page{padding:40px 18px;}
  .auth__title{font-size:1.6rem;margin-bottom:26px;}
  :root{--auth-field-h:50px;}
  .btn-primary{height:52px;font-size:1rem;}
  .auth-notice{font-size:.86rem;padding:16px 18px;}
  .btn-dup{padding:0 14px;font-size:.85rem;}
  .result__id{font-size:1.2rem;}
  .result__email{font-size:1.2rem;}
  .modal__box{max-height:60vh;}
}
@media (max-width:340px){
  .agree{flex-wrap:wrap;}
}