/* 웹진(카드뉴스) 공통 스타일: 모바일 우선, 최대 폭 780px 고정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #e5e5e5; /* 780px보다 화면이 넓을 때 좌우 여백 색 */
}

.webzine {
    max-width: 780px;   /* 콘텐츠 최대 가로 폭 */
    margin: 0 auto;      /* 화면이 넓으면 가운데 정렬 */
    background: #fff;
}

/* 이미지 사이 틈이 생기지 않도록: 원본 그대로, 가로폭에 맞춰서만 축소 */
.webzine img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------------------------------------------------------
   퀴즈 영역: 10.png 배경(제목/흰 문제박스만 있음) 위에
   탭 이미지 1장 + O/X 이미지 + 투명 클릭 영역을 고정 좌표(%)로 얹습니다.
--------------------------------------------------------- */
.quiz-stage {
    position: relative;
}

/* 탭 이미지(tab_01~03 중 1장) 자리 - 클릭은 안 되고 그림만 보여줌 */
.quiz-tab-visual {
    position: absolute;
    top: 31.5%;
    left: 5.5%;
    width: 89.5%;
    height: 7%;
    pointer-events: none;
}
.quiz-tab-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 문항 탭(Quiz1/2/3) 클릭 영역: 탭 이미지 위에 투명하게 겹침 */
.quiz-tab-hit {
    position: absolute;
    top: 31.5%;
    width: 29%;
    height: 7%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
#region-tab1 { left: 5.5%; }
#region-tab2 { left: 35%; }
#region-tab3 { left: 66%; }

/* 문제 내용(+ 해설 즉시공개 시 해설) 표시: 흰 박스 자리에 가로/세로 가운데 정렬.
   내용이 박스보다 길어지면(해설까지 붙어서) 박스 밖으로 넘치지 않고 안에서 스크롤됩니다. */
.quiz-question {
    position: absolute;
    top: 44.5%;
    left: 10%;
    width: 80%;
    height: 31%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center; /* 넘칠 땐 위에서부터 보이도록(내용이 가려지지 않게) */
    overflow-y: auto;
    text-align: center;
    line-height: 1.4;
    padding: 4px 6px;
}
.quiz-question-content {
    font-weight: 700;
    color: #15305c;
    font-size: clamp(13px, 4.1vw, 28px); /* 문항별 font_size가 있으면 자바스크립트가 인라인 스타일로 덮어씀 */
    white-space: pre-line; /* 관리자가 입력한 줄바꿈(엔터)을 그대로 보여줌 */
}

/* 해설 즉시공개: 문제 아래 구분선 + 해설 텍스트만 (정답/오답 여부는 표시하지 않음) */
.quiz-explanation {
    width: 100%;
}
.quiz-explain-divider {
    border: none;
    border-top: 1px solid rgba(21, 48, 92, 0.25);
    margin: 6px 0;
}
.quiz-explanation-text {
    font-weight: 500;
    color: #185FA5;
    font-size: clamp(11px, 3.4vw, 22px);
}

/* O / X 버튼: o_off/on, x_off/on 이미지를 그대로 담는 자리 */
.quiz-ox-btn {
    position: absolute;
    top: 80%;
    width: 42%;
    height: 10%;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.quiz-o-btn { left: 6%; }
.quiz-x-btn { left: 52%; }
.quiz-ox-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ---------------------------------------------------------
   개인정보 입력 영역: 12.png 배경(입력칸/체크박스/제출버튼이 이미 그려져 있음) 위에
   실제 입력칸/체크/버튼을 확정 좌표(%)로 얹습니다.
--------------------------------------------------------- */
.pi-stage {
    position: relative;
}

.pi-input {
    position: absolute;
    border: none;
    background: transparent; /* 배경의 흰 입력칸이 그대로 보이도록 */
    font-family: inherit;
    font-size: clamp(12px, 3.6vw, 18px);
    color: #15305c;
    text-align: center;
    padding: 0 4px;
}
.pi-input:focus {
    outline: none;
}

#input-name  { top: 5.5%; left: 17%;   width: 30%;   height: 4.5%; }
#input-empno { top: 5.5%; left: 64%;   width: 30.5%; height: 4.5%; }
#input-phone1 { top: 11%; left: 25.5%; width: 19%;   height: 4.5%; }
#input-phone2 { top: 11%; left: 50.5%; width: 19%;   height: 4.5%; }
#input-phone3 { top: 11%; left: 75.5%; width: 19%;   height: 4.5%; }

.pi-check-btn, .pi-submit-btn {
    position: absolute;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.pi-check-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#region-agree    { top: 75.5%; left: 5%;    width: 6.5%; height: 4%; }
#region-disagree { top: 75.5%; left: 31.5%; width: 7.5%; height: 4%; }

/* 정답 제출 버튼: <img> 대신 CSS 배경 이미지로 처리 (길게 눌러도 "이미지 저장" 메뉴가
   뜨지 않도록). 배경 이미지는 --pi-submit-off/--pi-submit-on 값을 템플릿에서 넣어줍니다. */
#region-submit {
    top: 87%;
    left: 24.5%;
    width: 51%;
    height: 8%;
    background-image: var(--pi-submit-off);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-touch-callout: none; /* iOS 길게 누르기 메뉴 방지 */
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation; /* 더블탭 확대 등 불필요한 터치 제스처 방지 */
}
#region-submit:hover,
#region-submit:active {
    background-image: var(--pi-submit-on);
}