*{box-sizing:border-box;}

html, body {
	margin: 0;
	padding: 0;
	background-color: #000;
	font-size:16px;
}

img { display:block; width:100%; }

.imagemap {	position:relative; width:100% }
.container { width:100%; max-width:640px; margin:0 auto }

.agree { position: absolute;  top: 81.6%; height: 2.8%; left: 36.09375%; width: 27.8125%; cursor: pointer; }

input, button { margin:0; padding:0; background:none; border:none; }
input:focus { outline: none; }


#username { position: absolute; top: 21.2%; left: 45%; width: 43.5%; height: 2.5%; font-size:20px; }
#phone { position: absolute; top: 25.95%; left: 45%; width: 43.5%; height: 2.5%; font-size:20px; }

.login_submit { position: absolute; top: 89.9%; left: 50%; transform: translateX(-50%); width: 54%; height: 3.6%; cursor: pointer;  opacity: 0;}

@media (max-width: 600px) {
  #username, #phone {
    font-size: 16px;
  }
}


.mission01 { position: absolute; top: 50.7%; left: 41.3%; width: 15.4%; height: 3.2%; cursor: pointer; }
.mission02 { position: absolute; top: 41.1%; left: 17.2%; width: 16.4%; height: 3.2%; cursor: pointer; }
.mission03 { position: absolute; top: 59.3%; left: 43%; width: 15.4%; height: 3.2%; cursor: pointer; }
.mission04 { position: absolute; top: 50.9%; left: 17.2%; width: 15.4%; height: 3.2%; cursor: pointer; }
.mission05 { position: absolute; top: 61%; left: 17.3%; width: 15.4%; height: 3.2%; cursor: pointer; }

.mission01_clamp { position: absolute; top: 39.1%; left: 50%; transform:translateX(-50%); width: 38%; height: auto; }
.mission02_clamp { position: absolute; top: 39.1%; left: 50%; transform:translateX(-50%); width: 38%; height: auto; }
.mission03_clamp { position: absolute; top: 39.1%; left: 50%; transform:translateX(-50%); width: 38%; height: auto; }
.mission04_clamp { position: absolute; top: 39.1%; left: 50%; transform:translateX(-50%); width: 38%; height: auto; }
.mission05_clamp { position: absolute; top: 44.3%; left: 50%; transform:translateX(-50%); width: 38%; height: auto; }

.take_qr01 { position: absolute; top: 39.1%; left: 50%; transform:translateX(-50%); width: 38%; height: 10%; }
.take_qr02 { position: absolute; top: 39.1%; left: 50%; transform:translateX(-50%); width: 38%; height: 10%; }
.take_qr03 { position: absolute; top: 39.1%; left: 50%; transform:translateX(-50%); width: 38%; height: 10%; }
.take_qr04 { position: absolute; top: 39.1%; left: 50%; transform:translateX(-50%); width: 38%; height: 10%; }
.take_qr05 { position: absolute; top: 44.1%; left: 50%; transform:translateX(-50%); width: 38%; height: 10%; }

.gohome { position: absolute; top: 2.8%; left: 86%; width: 9%; height: 3%; cursor: pointer; }

.mission_complete { position:absolute; top:78.2%; width:54%; left:23%; height:3.1%; cursor:pointer; }
.mission_complete_cover { position: absolute; top: 35.4%; width: 83%; left: 10%; height: auto; }

.survey { position:absolute; top:83.1%; width:54%; left:23%; height:3.1%; cursor:pointer; }
.survey_no { position:absolute; top:83.1%; width:54%; left:23%; height:3.1%; cursor:pointer; }

/* 비밀번호 팝업 */
#pwOverlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.6);
	display: none; justify-content: center; align-items: center; z-index: 10000;
}
#pwOverlay .pw-modal {
	background: #fff; padding: 20px; border-radius: 10px; text-align: center;
}
#pwOverlay input {
	font-size: 24px; letter-spacing: 10px; text-align: center;
	width: 120px; padding: 8px; margin-top: 10px;
	border:1px solid #EAEAEA;
}

#pwSubmit {background:red; color:#FFF; padding:5px 10px 5px 10px;border-radius:10px;}
#pwCancel {background:#000; color:#FFF; padding:5px 10px 5px 10px;border-radius:10px;}

.take_qr { position: absolute; top:88.1%; left:50%; transform:translateX(-50%); width:54%; height:3.1%; cursor:pointer; }
.logout { position:absolute; top:93.1%; left:50%; transform:translateX(-50%); width:19%; height:2.1%; cursor:pointer; background:#6d6d6d; color:#FFF; display:flex; justify-content:center; align-items:center; }


.qr-overlay{
	display:none; position:fixed; inset:0; z-index:9999;
	align-items:center; justify-content:center;
	background:rgba(0,0,0,.85);
}
.qr-overlay.is-open{ display:flex; }

.qr-modal{
	position:relative;
	/* 세로 기반 뷰: 기존 비율을 유지하되, 화면 내 최대치로만 표시 */
	width:min(96vw, 720px);
	max-height:92vh;
	aspect-ratio:9/16;
	overflow:hidden;
	border-radius:16px;
	box-shadow:0 10px 40px rgba(0,0,0,.6);
	background:#000;
}

/* ★ 핵심: 크롭 방지 (확대처럼 보이는 cover → contain) */
.qr-modal video{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:contain; /* 확대/크롭 방지 */
}

/* 캔버스는 화면에 안 보이게 유지 */
#qrCanvas{ display:none; }

.qr-ui{ position:absolute; inset:0; pointer-events:none; }

/* 상단 바 */
.qr-topbar{
	position:absolute; top:0; left:0; right:0; height:56px;
	display:flex; align-items:center; justify-content:center; gap:12px;
	background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
	color:#fff; font-size:14px; font-weight:600;
	padding:0 10px;
}

/* 닫기 버튼 */
.qr-close{
	position:absolute; right:10px; top:10px; width:36px; height:36px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:rgba(0,0,0,.45);
	pointer-events:auto; cursor:pointer; color:#fff;
}

/* 중앙 가이드 프레임(정사각) — contain으로 레터박스 생겨도 중앙 정렬 유지됨 */
.qr-frame{
	position:absolute; inset:0; margin:auto;
	width:70%; aspect-ratio:1/1;
	border:3px solid rgba(255,255,255,.9); border-radius:12px;
	/* 바깥 어둡게(가이드 집중) */
	box-shadow:0 0 0 9999px rgba(0,0,0,.35) inset;
}

/* 노치 안전영역 대응 */
@supports(padding:max(0px)){
	.qr-topbar{ padding-top:max(0px, env(safe-area-inset-top)); }
	.qr-close{ top:calc(10px + env(safe-area-inset-top)); }
}


.q01 { position: absolute; top: 13.7%; left: 10%; width: 80%; height: 1.65%; font-size: 20px; padding-left: 5%;}

.q02_radio { display: none; }
.q02_radio:checked + .q02_box { background-color: #007bff; opacity: 0.3; color: white;}
.q02_box { position: absolute; top: 19.6%; width: 40%; height: 1.7%; border: none; text-align: center; line-height: 2%; cursor: pointer; transition: all 0.2s ease; }
.q02_box_left { left: 10%; }
.q02_box_right { left: 50%; }

.q03_radio { display: none; }
.q03_radio:checked + .q03_box { background-color: #007bff; opacity: 0.3; color: white;}
.q03_box { position: absolute; top: 25.6%; width: 40%; height: 1.7%; border: none; text-align: center; line-height: 2%; cursor: pointer; transition: all 0.2s ease; }
.q03_box_left { left: 10%; }
.q03_box_right { left: 50%; }

.q04_radio { display: none; }
.q04_radio:checked + .q04_box { background-color: #007bff; opacity: 0.3; color: white;}
.q04_box { position: absolute; left:10%; width: 80%; height: 1.7%; border: none; text-align: center; line-height: 2%; cursor: pointer; transition: all 0.2s ease; }
.q04_box_01 { top: 30.25%; }
.q04_box_02 { top: 32.45%; }
.q04_box_03 { top: 34.65%; }
.q04_box_04 { top: 36.85%; }
.q04_box_05 { top: 39.05%; }

.q05_radio { display: none; }
.q05_radio:checked + .q05_box { background-color: #007bff; opacity: 0.3; color: white;}
.q05_box { position: absolute; left:10%; width: 80%; height: 1.7%; border: none; text-align: center; line-height: 2%; cursor: pointer; transition: all 0.2s ease; }
.q05_box_01 { top: 43.85%; }
.q05_box_02 { top: 46.05%; }
.q05_box_03 { top: 48.25%; }
.q05_box_04 { top: 50.45%; }

.q06_radio { display: none; }
.q06_radio:checked + .q06_box { background-color: #007bff; opacity: 0.3; color: white; }
.q06_box { position: absolute; left:10%; width: 80%; height: 1.7%; border: none; text-align: center; line-height: 2%; cursor: pointer; transition: all 0.2s ease; }
.q06_box_01 { top: 56.4%; }
.q06_box_02 { top: 58.6%; }
.q06_box_03 { top: 60.8%; }
.q06_box_04 { top: 63%; }
.q06_box_05 { top: 65.4%; }

.q07_radio { display: none; }
.q07_radio:checked + .q07_box { background-color: #007bff; opacity: 0.3; color: white; }
.q07_box { position: absolute; top: 71.6%; width: 40%; height: 1.7%; border: none; text-align: center; line-height: 2%; cursor: pointer; transition: all 0.2s ease; }
.q07_box_left { left: 10%; }
.q07_box_right { left: 50%; }

.q08_radio { display: none; }
.q08_radio:checked + .q08_box { background-color: #007bff; opacity: 0.3; color: white; }
.q08_box { position: absolute; top: 76.1%; width: 40%; height: 1.7%; border: none; text-align: center; line-height: 2%; cursor: pointer; transition: all 0.2s ease; }
.q08_box_left { left: 10%; }
.q08_box_right { left: 50%; }

.q09 { position: absolute; top: 82.1%; left: 10%; width: 80%; height: 1.7%; font-size: 20px; padding-left: 5%;}

.q10_radio { display: none; }
.q10_radio:checked + .q10_box { background-color: #007bff; opacity: 0.3; color: white; }
.q10_box { position: absolute; top: 88.1%; width: 40%; height: 1.7%; border: none; text-align: center; line-height: 2%; cursor: pointer; transition: all 0.2s ease; }
.q10_box_left { left: 10%; }
.q10_box_right { left: 50%; }

.survey_submit { position: absolute; top: 92.25%; left: 50%; transform: translateX(-50%); width: 53.4%; height: 2.5%; cursor: pointer; }

.hashtag { position:absolute; top:70%; left:50%; width:60%; height:16%; cursor:pointer; transform:translateX(-50%); }