/* binmastyle.css */

/* 기본 리셋 및 전역 스타일 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 색상 변수 정의 */
  --primary-color: navy;
  --secondary-color: midnightblue;
  --accent-color: #ff6347;
  --text-color: #333333;
  --light-bg: #fdfcf9;
  --border-color: #ccc;
  
  /* 폰트 크기 변수 */
  --font-small: 0.875rem;
  --font-medium: 1rem;
  --font-large: 1.25rem;
  --font-xlarge: 1.5rem;
  
  /* 간격 변수 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

body {
  font-family: 'Noto Serif KR', serif;
  line-height: 1.8;
  color: var(--text-color);
  background-color: var(--light-bg);
}

/* 그리드 레이아웃 */

.grid-container {
  display: grid;
  grid-template-areas: 
    'header'
    'nav'
    'main_txt'
	'book_img'
	'agreements'
	'input_box'
    'footer';
  gap: 10px;
  background-color: white;
  padding: 10px;
}

.grid-container > div {
  padding: 10px;
}

.refer{
	padding-top: 20px;
	padding-left: 80px;
}

.sentence{
	padding-left: 40px;
}

.header {
  grid-area: header;
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: var(--spacing-md);
  font-size: var(--font-xlarge);
  border-radius: 8px;
}

.main_txt {
  grid-area: main_txt;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2.2em;
  text-align: center;
  color: #444;
}

span{
	display: inline !important; /* 강제로 인라인 요소로 설정 */
    font-weight: bold;         /* 굵기 유지 */
}

a {
  font-weight: bold;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

/* ==========================================================
   .ymdt를 drop down으로 만들기 위해
   ========================================================== */
   
/* 생년월일 전체 컨테이너 */
.ymdt {
    margin-bottom: 15px;
}

/* 년/월/일 select창들을 감싸는 내부 정렬 박스 */
.ymdt-select-container {
    display: flex;
    justify-content: center;
    gap: 8px; /* select 상자들 사이의 간격 */
    max-width: 450px;
    margin: 0 auto;
}

/* 년, 월, 일 각각의 select 박스 스타일 */
.ymdt-select-container select {
    flex: 1; /* 부모 너비를 공평하게 나누어 가짐 */
    height: 45px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background-color: #ffffff;
    font-family: 'Noto Serif KR', serif;
    font-size: 15px;
    text-align: center;
    text-align-last: center; /* 드롭다운 내 글자 중앙 정렬 */
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    cursor: pointer;
}

.book_img {
	grid-area: book_img;
	display: block;
	margin: 0 auto;
	text-align: center;
}

/* 수정 후 
.change {
	display: block;
	margin: 0 auto;
	text-align: left;
}
*/

/* 수정 후 */
.change {
	display: block;
	margin: var(--spacing-sm) 0; /* 위아래 마진만 살짝 지정 */
	text-align: left;
	padding-left: 40px;          /* ★ 이 값을 조절하여 이미지를 원하는 만큼 안쪽으로 당깁니다 */
}

.agreements{
	grid-area: agreements;
	display: none;
	padding: var(--spacing-lg);
	background-color: var(--light-bg);
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.agreement-container {
    max-width: 600px;
    margin: 0 auto;
	text-align: center;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.agreement-item {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    background: #fff;
}

.policy{
	padding-left: 20px;
}

.view-agreement-btn {
    background-color: #2196F3;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
}

.view-agreement-btn:hover {
    background-color: #0b7dda;
}

.agreement-choice {
    display: flex;
	justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.all-agreement {
    margin: 20px 0;
    padding: 10px;
    background: #eef5ff;
    border-radius: 5px;
    font-weight: bold;
}

.hidden {
    display: none;
}

#next-step {
    margin-top: 20px;
    padding: 15px;
    background: #e7f7e7;
    border-radius: 5px;
    text-align: center;
}

#continue-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#continue-btn:hover {
    background: #45a049;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;//
    background-color: rgba(0,0,0,0.4);
	text-align: left;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
    text-decoration: none;
}

.modal-text {
    max-height: 400px;
    overflow-y: auto;
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #eee;
    background: #f9f9f9;
}

.modal-agreement {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.agreement-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.agree-btn, .disagree-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.agree-btn {
    background-color: #4CAF50;
    color: white;
}

.disagree-btn {
    background-color: #f44336;
    color: white;
}

.agree_modals{
	display: none;
	padding: var(--spacing-lg);
	background-color: var(--light-bg);
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.input_box{
	grid-area: input_box;
	display: none;
	
	background-color: white;
	padding: var(--spacing-lg);
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	max-width: 500px;
	margin: 0 auto;
}

.input_box label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: bold;
  color: var(--primary-color);
  font-size: var(--font-medium);
}

.input_box input[type="text"] {
  width: calc(100% - 20px);  /*Adjust for padding*/
  padding: 10px;
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: var(--font-medium);
}

.input_box .ymdt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.input_box .ymdt label {
  flex-basis: 30%;
  margin-bottom: 0;
}

.input_box .ymdt input {
  flex-basis: 20%;
  margin-right: var(--spacing-sm);
}

.input_box .ymdt input:last-child {
  margin-right: 0;
}

.select_time {
  margin-bottom: var(--spacing-md);
}

.select_time select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: var(--font-medium);
  background-color: white;
  appearance: none; /* 기본 select 박스 스타일 제거 */
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2C197.4L159.3%2C69.7c-4.7-4.7-12.3-4.7-17%2C0L5.4%2C197.4c-4.7%2C4.7-4.7%2C12.3%2C0%2C17l19.7%2C19.7c4.7%2C4.7%2C12.3%2C4.7%2C17%2C0l113.8-113.8L245.3%2C234.1c4.7%2C4.7%2C12.3%2C4.7%2C17%2C0l19.7-19.7C291.7%2C209.7%2C291.7%2C202.1%2C287%2C197.4z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 12px auto;
}

/* ==========================================================
   [PC 웹 & 기본 공통] 라디오 버튼 가로 정렬 및 간격 조정
   ========================================================== */

/* 성별 및 양력/음력 라디오 박스 전체 그룹 */
.gender-radio, .ls-radio {
    display: block;
    text-align: center !important; /* 기본적으로 가로 중앙 정렬 */
    margin-top: 15px;
    margin-bottom: 20px;
}

/* "성별", "양력/음력" 이라는 메인 타이틀 라벨 (위아래 block 배치) */
.gender-radio > label:first-child, 
.ls-radio > label:first-child {
    display: block !important;
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
}

/* 🚨 [PC 핵심] 남, 여 글자를 가로로 배치하고 오른쪽 동그라미와의 간격 설정 */
.gender-radio label[for], 
.ls-radio label[for] {
    display: inline-block !important; /* 세로로 깨지지 않고 가로로 나열 */
    font-size: 16px;
    vertical-align: middle;
    margin-right: 6px !important;     /* '남' 글자와 '남 동그라미' 사이의 미세한 간격 */
}

/* 🚨 [PC 핵심] 라디오 동그라미를 가로로 배치하고 다음 글자와의 간격 확보 */
.gender-radio input[type="radio"], 
.ls-radio input[type="radio"] {
    display: inline-block !important; /* 가로 배열 유지 */
    vertical-align: middle;
    cursor: pointer;
    
    /* 중요: 내 동그라미(남 동그라미)가 끝난 후 다음 글자(여)가 오기 전 가로 여백을 시원하게 벌립니다 */
    margin-right: 35px !important;     
}

/* 가장 마지막 동그라미(여성 동그라미, 음력 동그라미)는 우측 여백을 제거하여 완벽한 화면 중앙 정렬 보장 */
.gender-radio input[type="radio"]:last-of-type,
.ls-radio input[type="radio"]:last-of-type {
    margin-right: 0 !important;
}

/* 카카오페이 결제 버튼 스타일 */
.payment-section {
    margin-top: var(--spacing-md);
    text-align: center;
}

.pay-button {
    background-color: #FEE500; /* KakaoPay yellow */
    color: #3C1E1E; /* Dark brown for text */
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: var(--font-medium);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    display: inline-block;
    width: 100%;
    max-width: 300px; /* 필요에 따라 조절 */
    margin-bottom: var(--spacing-sm);
}

.pay-button:hover {
    background-color: #FAD100; /* 호버 시 약간 더 어두운 노란색 */
    transform: translateY(-2px);
}

.pay-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.payment-message {
    margin-top: var(--spacing-sm);
    font-size: var(--font-small);
    color: #555;
    min-height: 20px; /* 레이아웃 이동 방지 */
}

.footer {
  grid-area: footer;
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: var(--spacing-md);
  font-size: var(--font-small);
  border-radius: 8px;
}

.footer_text {
  line-height: 1.5;
}


/* ==========================================================
   안드로이드 앱(웹뷰) 전용 스타일 
   ========================================================== */

/* 앱으로 접속했을 때 레이아웃 왜곡 방지 및 여백 최적화 */
body.is-app .grid-container {
    margin: 0 auto !important;
    padding: 10px !important;
    width: 100% !important;
    overflow-x: hidden; /* 가로 스크롤 절대 발생 방지 */
}

/* 🚨 [핵심 수정] 앱 환경에서 오른쪽 밀림의 원인인 고정 패딩을 완전히 초기화 */
body.is-app .refer {
    padding-top: 15px !important;
    padding-left: 0 !important;   /* 80px 밀리던 현상 제거 */
    padding-right: 0 !important;
    width: 100% !important;
}

body.is-app .sentence {
    padding-left: 15px !important;  /* 스마트폰 화면 양옆에 최소한의 여백만 부여 */
    padding-right: 15px !important;
    width: 100% !important;
}

/* 모바일 앱 환경에서 본문 및 제목 글자 중앙 정렬 및 줄바꿈 최적화 */
body.is-app h2, 
body.is-app h3, 
body.is-app p, 
body.is-app div {
    text-align: center !important;
    word-break: keep-all; /* 단어 단위로 예쁘게 줄바꿈 */
}

/* 인용구(주역 괘사) 박스도 앱 화면에 맞게 여백 조정 */
body.is-app blockquote {
    margin: 15px 10px !important;
    padding: 10px !important;
}

/* ==========================================================
   안드로이드 앱(웹뷰) 전용 스타일 - 괘 이미지 가운데 정렬
   ========================================================== */

/* 괘 이미지를 감싸는 .change 레이아웃을 완전히 가운데 정렬 */
body.is-app .change {
    display: flex !important;
    justify-content: center !important; /* 가로축 가운데 정렬 */
    align-items: center !important;
    text-align: center !important;
    padding-left: 0 !important;         /* 기존 PC용 padding-left 40px 해제 */
    margin: var(--spacing-sm) auto !important;
}

/* 이미지 자체의 정렬 속성 보정 */
body.is-app .change img#book {
    display: inline-block !important;
    margin: 0 auto !important;
}

/* ==========================================================
   반응형 디자인 조정 (모바일 및 태블릿)
   ========================================================== */

/* 1. 태블릿 및 가로 모드 모바일 (화면 너비 1024px 이하) */
/* 모바일 환경 (화면 너비 600px 이하) */
/* ==========================================================
   반응형 디자인 조정 (스마트폰 모바일 환경 - 600px 이하)
   ========================================================== */
/* ==========================================================
   반응형 디자인 조정 (최신 트렌드 컴팩트 모바일 환경 - 600px 이하)
   ========================================================== */
@media (max-width: 600px) {
    /* 본문 및 텍스트 섹션 */
    .main_txt, .refer, .sentence {
        text-align: center !important;
        padding-left: 0 !important;
        word-break: keep-all;
        line-height: 1.6;
        font-size: 15px; /* 본문 글씨 크기도 스마트폰에 맞게 살짝 조절 */
    }
  
    /* 입력 폼 전체 박스 (좌우 여백 최적화) */
    .input_box {
        padding: 0 20px;
        font-size: 14px;
        text-align: center !important;
    }
  
    /* 콤팩트한 입력 상자의 타이틀 라벨 (이름, 생년월일, 태어난 시 등) */
    .input_box label {
        font-size: 13px;             /* 15px -> 13px로 축소하여 트렌디한 서브라벨 구현 */
        font-weight: 700;
        color: #666;                 /* 은은하고 세련된 그레이 */
        text-align: center !important;
        display: block;
        margin-top: 14px;            /* 위쪽 간격을 18px에서 14px로 좁힘 */
        margin-bottom: 6px;          /* 라벨과 입력창 사이 간격을 6px로 밀착 */
        letter-spacing: -0.3px;
        float: none !important; 
        clear: both !important;
    }

    /* ------------------------------------------------------
       입력창 / 드롭다운 박스 슬림화 및 글자 크기 조정 (최신 앱 스타일)
       ------------------------------------------------------ */
       
    /* 1. 닉네임 입력란 */
    .input_box input[type="text"] {
        width: 100% !important;
        max-width: 300px;            /* 전체적인 폼 폭을 320px에서 300px로 줄여 여유감 확보 */
        height: 42px;                /* 45px -> 42px로 슬림화하여 세련되게 변경 */
        text-align: center !important;
        margin: 0 auto 6px auto;     /* 다음 요소와의 간격을 6px로 최적화 */
        display: block;
        padding: 0 12px;
        border: 1px solid #e2e8f0;    /* 최신 UI에서 선호하는 부드러운 블루그레이 선 */
        border-radius: 10px;          /* 박스가 작아졌으므로 곡률도 12px에서 10px로 조절 */
        background-color: #ffffff;
        font-size: 14px;             /* 15px -> 14px로 변경하여 깔끔한 비율 유지 */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); /* 그림자도 더 가볍고 투명하게 */
        outline: none;
        float: none !important;
        position: relative !important;
        clear: both !important;
    }

    /* 2. 생년월일 전체 감싸는 박스 */
    .input_box .ymdt {
        width: 100% !important;
        max-width: 300px;
        height: auto !important;
        margin: 0 auto 6px auto;
        display: block;
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        float: none !important;
        position: relative !important;
        clear: both !important;
    }

    /* 2-1. [드롭다운 버전] 년/월/일 가로 정렬 컨테이너 */
    .ymdt-select-container {
        width: 100%;
        max-width: 300px;
        display: flex !important;    /* 가로 나란히 배치 */
        gap: 5px;                    /* 박스 간 간격을 5px로 촘촘하게 */
        margin: 0 auto;
    }

    /* 2-2. [드롭다운 버전] 년/월/일 개별 select 박스 스타일 */
    .ymdt-select-container select {
        flex: 1;
        height: 42px;                /* 높이 42px 통일 */
        font-size: 14px;            /* 글자 크기 14px 통일 */
        padding: 0 4px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background-color: #ffffff;
        text-align: center !important;
        text-align-last: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        outline: none;
        -webkit-appearance: none;    /* 투박한 시스템 화살표 제거 */
        -moz-appearance: none;
        appearance: none;
    }

    /* 3. 태어난 시간/분 선택 감싸는 박스 */
    .select_time {
        width: 100% !important;
        max-width: 300px;
        height: auto !important;
        margin: 0 auto 6px auto;
        display: block;
        float: none !important;
        position: relative !important;
        clear: both !important;
    }

    /* 4. 태어난 시간 및 분 선택 드롭다운 (select 태그) */
    .select_time select {
        width: 100% !important;
        max-width: 300px;
        height: 42px;                /* 높이 42px 통일 */
        text-align: center !important;
        text-align-last: center;
        padding: 0 16px;
        margin: 0 auto 6px auto;     /* 시/분 드롭다운 사이 간격을 10px에서 6px로 축소 */
        display: block;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background-color: #ffffff;
        font-size: 14px;             /* 글자 크기 14px 통일 */
        color: #333;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        float: none !important;
        position: relative !important;
    }

    /* ------------------------------------------------------
       라디오 버튼 및 결제 버튼 콤팩트화
       ------------------------------------------------------ */

    /* 라디오 버튼 타이틀과 내장 간격 최적화 */
    .gender-radio, .ls-radio {
        margin-top: 12px;            /* 15px -> 12px */
        margin-bottom: 14px;         /* 20px -> 14px */
    }
    .gender-radio label[for], .ls-radio label[for] {
        font-size: 14px;             /* 라디오 라벨 16px -> 14px */
        margin-right: 6px !important;
    }
    .gender-radio input[type="radio"], .ls-radio input[type="radio"] {
        transform: scale(1.05);      /* 과하게 컸던 라디오 버튼 크기 비율 조정 */
        margin-right: 28px !important;/* 터치 반경을 유지하되 가로 폭에 맞게 마진 최적화 */
    }

    /* 5. 결제하기 / 진행하기 버튼 */
    .pay-button {
        width: 100% !important;
        max-width: 300px;
        height: 46px;                /* 버튼 높이도 50px에서 46px로 스마트하게 조정 */
        margin: 20px auto 0 auto;    /* 상단 마진을 24px에서 20px로 단축 */
        display: block;
        text-align: center !important;
        font-size: 15px;             /* 버튼 폰트 16px -> 15px */
        font-weight: bold;
        color: #ffffff;
        background-color: var(--primary-color);
        border: none;
        border-radius: 10px;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        float: none !important;
        position: relative !important;
        clear: both !important;
    }
}