@charset "utf-8";

/* 전체 컨텐츠 길이 */
.content{
    height: 3000px;
}

/* 전체를 감싸고 있는 div에 fixed 부여 함으로 써 content의 길이가 길어져도 dimmed가 배경에 100% 깔릴 수 있게 함 */
.layer_popup{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
/* absolute / margin 을 통한 화면 정중앙 정렬 및 디자인*/
.layer{
    width: 600px;
    height: 480px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-radius: 5px;
    box-shadow: 0 0 10px -4px;
	font-family:Noto Sans KR;
}
/* 전체 글 부분 패딩값 조절 */
.text_area{
    padding: 0px 0px 0;
}
/* 텍스트 부분 스타일 */
.text_area > p{
    font-size: 17px;
    line-height: 1.5;
    text-align: justify;
}
/* 버튼 table로 넓이 조절 */
.btn_area{
    padding: 30px 30px 0px 30px;
    display: table;
    table-layout: fixed;
    width: 100%;
    box-sizing: border-box;
	font-family:Noto Sans KR;
}
/* 버튼 디자인 및 table-cell로 넓이 조절 */
.btn_area > button{
    border: 1px solid;
    padding: 13px 18px;
    color: #fff;
    font-size: 18px;
    background-color: gray;
    box-sizing: border-box;
    display: table-cell;
    width: 45%;
    margin-right: 2.5%;
    cursor: pointer;
    box-shadow: 0px 0px 8px -5px #000;
	font-family:Noto Sans KR;
}
/* twitter 넓이 / 색상 */
.btn_area > .btn_twitter{
    width: 50%;
    background-color: #C0AEC1;
}
/* Dribbble 넓이 / 색상 */
.btn_area > .btn_Dribbble{
    width: 50%;
    background-color: #ff7b89;
    margin: 0;
}
/* 닫기 버튼  디자인 및 위치 조절*/



/* twitter 넓이 / 색상 */
.btn_twitter{
	border: 1px solid;
    padding: 13px 18px;
    color: #fff;
    font-size: 18px;
    background-color: gray;
    box-sizing: border-box;
    display: table-cell;
    width: 45%;
    margin-right: 2.5%;
    cursor: pointer;
    box-shadow: 0px 0px 8px -5px #000;
	font-family:Noto Sans KR;
    background-color: #C0AEC1;
}
/* Dribbble 넓이 / 색상 */
.btn_Dribbble{
	border: 1px solid;
    padding: 13px 18px;
    color: #fff;
    font-size: 18px;
    background-color: gray;
    box-sizing: border-box;
    display: table-cell;
    width: 45%;
    margin-right: 2.5%;
    cursor: pointer;
    box-shadow: 0px 0px 8px -5px #000;
	font-family:Noto Sans KR;
    background-color: #181818;
    margin: 0;
}


.btn_close{
    border: none;
    font-size: 15px;
    width: 80px;
    height: 25px;
    background: transparent;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-weight: bold;
}
/* 딤드 처리 */
.dimmed{
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}


/* =========================
   Mobile Responsive Overrides
   ========================= */
@media (max-width: 640px) {
  /* 전체 팝업 영역: 모바일에서 내부 스크롤 활성화 + 안전 여백 */
  .layer_popup{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }

  /* 팝업 박스: 폭은 뷰포트 기준, 높이는 내용에 맞추되 최대 100dvh-여백 */
  .layer{
    width: min(92vw, 600px);
    height: 600px;                         /* 고정 500px → 내용 기반 */
    max-height: calc(100dvh - 32px);      /* 화면 밖 넘침 방지 */
    margin: 0 auto;                       /* 가로 중앙 정렬 */
    top: 50% !important;
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%);
    border-radius: 12px;                  /* 라운드 살짝 키움 */
    box-shadow: 0 12px 40px rgba(0,0,0,.15);
    overflow: hidden;                     /* 내부 라운드 유지 */
	
  }

  /* iOS 등 안전영역 대응(노치) */
  @supports (padding: max(0px)) {
    .layer{
      max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    }
  }

  /* 텍스트 영역: 좌우 여백 확보, 가독 타이포 스케일 */
  .text_area{
    padding: 0 16px 16px;
  }
  .text_area > p{
    font-size: 14px;    /* 17px → 살짝 축소 */
    line-height: 1.6;
    text-align: left;     /* 모바일에선 좌정렬이 가독 좋음 */
    word-break: keep-all; /* 한글 줄바꿈 품질 보정 */
  }

  /* 버튼 영역: 세로 스택 + 터치 타겟 확대 */
  .btn_area{
    padding: 20px 16px 0 16px; 
    display: block;        /* table → block */
    width: 100%;
  }
  .btn_area > button,
  .btn_twitter,
  .btn_Dribbble{
    display: block;        /* 가로 2분할 → 세로 1열 */
    width: 100%;
    margin: 0 0 12px 0;
    font-size: 14px;
    padding: 14px 16px;
    box-shadow: 0px 4px 12px rgba(0,0,0,.06);
    border-radius: 10px;
  }

  /* 닫기 버튼: 터치 영역 확장 */
  .btn_close{
    top: 6px;
    right: 6px;
    padding: 8px 10px;
    width: auto; height: auto;
    font-size: 14px;
    background: rgba(255,255,255,.6);
    border-radius: 8px;
    backdrop-filter: saturate(150%) blur(6px);
  }

  /* 딤드: 모바일에서도 고정(스크롤과 분리) */
  .dimmed{
    position: fixed;
  }
}

/* 사용자가 ‘애니메이션 최소화’ 설정 시 그림자/모션 완화 (접근성) */
@media (prefers-reduced-motion: reduce) {
  .layer, .btn_area > button, .btn_twitter, .btn_Dribbble { transition: none !important; }
}