@charset "utf-8";

@import url("base.css");

:root {
	/* 안전영역 변수 (iOS는 env값, 그 외는 0) */
	--safe-top:    env(safe-area-inset-top, 0px);
	--safe-right:  env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left:   env(safe-area-inset-left, 0px);

	/* ====== 기본 헤더 높이 ====== */
	--appbar-h: 50px;
	--layout-offset: calc(
		var(--safe-top) + var(--safe-bottom) +
		var(--appbar-h) + var(--fab-h) + (var(--space-md) * 2)
	);

	/* ====== 컬러 시스템 ====== */
	--color-border: #E5E5E5;
	--color-white: #fff;
	--color-primary: #000; /* 블랙 메인 */
	--color-accent: #2B6AFF; /* 포인트 컬러 */
	--color-light: #A2DDFD;
	--color-gray: #A0A0A0;
	--color-muted: #989898;
	--color-text: #222;
	--bg-primary: #EEF5FF;

	/* ========= 간격(Spacing) ========= */
	--space-xxs: 0.4rem;
	--space-xs: 0.8rem;
	--space-sm: 1.2rem;
	--space-md: 1.6rem;
	--space-lg: 2.4rem;
	--space-xl: 3.2rem;
	--space-xxl: 4.0rem;

	/* 버튼 */
	--btn-gradient: linear-gradient(306deg, var(--color-accent) 54.3%, var(--color-light) 109%);
	--btn-info: #EFEFEF;
	--btn-h: 4rem;

	/* ========= 둥근 모서리(Radius) ========= */
	--radius-sm: 0.6rem;
	--radius-md: 1.6rem;
	--radius-lg: 2.0rem;
	--radius-round: 99.9rem;

	/* ========= 그림자(Shadow) ========= */
	--shadow-sm: 0 0.4rem 1.5rem 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 0.4rem 1.5rem 0 rgba(0, 0, 0, 0.10);
	--shadow-lg: 0 0.8rem 0.24rem rgba(0,0,0,0.25);
	--shadow-btn: 0 4px 10px 0 rgba(0, 0, 0, 0.17);

	--fs-xs: 1.2rem;
	--fs-sm: 1.4rem;
	--fs-md: 1.6rem;
	--fs-lg: 1.8rem;
	--fs-xl: 2.4rem;

	/* ====== 뷰포트/레이아웃 ====== */
	--max-width: 720px;

	/* ========= 트랜지션 ========= */
	--tr-fast: 0.2s ease-in-out;
	--tr-slow: 0.6s ease;

	/* == 하단 고정 버튼 == */
	--fab-h: 5.5rem;

	/* ========= 레이어 팝업 ========= */
	--lyr-danger: #FF593F;
}

/* layout */
html,
body { min-height: 100%; min-height: 100svh; }
html { font-size: clamp(10px, 2.7778vw, 16px); }
body { background-repeat:repeat-y; background-position: center center; background-size:cover; background-attachment:fixed; color: var(--color-primary); font-size: 1em; }
:lang(en) body { line-height: 1.3; }
#wrap { display: flex; flex-direction: column;
	min-height: 100dvh;
	margin: 0 auto;
	padding-top: var(--safe-top);
	padding-bottom: var(--safe-bottom);
	padding-right: var(--safe-right);
	padding-left: var(--safe-left);
	box-sizing: border-box;
}

/* 헤더 */
.header { z-index:500; position: fixed; inset: 0 0 auto 0; }
/* safe area: iOS 노치 여백 */
.header .headerWrap {
	display:flex; align-items:center; justify-content:space-between;
	gap:var(--space-xs);
	height: calc(var(--appbar-h) + var(--safe-top));
	padding: calc(var(--safe-top)) var(--space-xxs) 0 var(--space-xxs);
}
.header .headerWrap { font-style: normal; font-weight: 500;  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header .headerWrap .btnBack,
.header .headerWrap .btnHome { flex-shrink: 0; display:inline-flex; justify-content:center; align-items:center; width:44px; height:100%; }
.header .headerWrap .btnBack i,
.header .headerWrap .btnHome i { display: inline-block; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }
.header .headerWrap .btnBack .back { width: 0.8rem; height: 1.4rem; background-image:url(/assets/images/ar/icon_arrow_back.svg); }
.header .headerWrap .btnHome .home { width: 1.5rem; height: 1.5rem; background-image:url(/assets/images/ar/icon_home.svg); }
.header .headerWrap .title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:1.5rem; }
.header .headerWrap .headerActions { flex-shrink:0; display:flex; align-items:center; gap:0.25rem; height:100%; }
.header .headerWrap .languageControl { display:inline-flex; align-items:center; gap:0.35rem; height:100%; color:#fff; font-size:0.75rem; }
.header .headerWrap .languageSelect { min-width:80px; height:100%; padding:0 0.35rem; border:1px solid rgba(255, 255, 255, 0.7); border-radius:4px; background: #fff; color:#000000; font-size:1rem; }

/* layout */
#app { flex-grow: 1; display: grid; grid-template-columns:auto 528px; width: 100%; min-height: 100dvh; max-width: 1133px; margin: 0 auto; }
.gateContent { display: flex; flex-direction: column; justify-content: center; height:calc(100vh - var(--appbar-h)); margin-top:var(--appbar-h); padding:5% 0; color: #fff; line-height: 1.4; font-size:clamp(0.625em, 1.2vw, 1em); box-sizing: border-box; }
.gateContent .title { margin-bottom:2.875rem; font-weight: 900; font-size:2.9375em; }
.gateContent .desc { font-size:1.75em; }
.gateContent .desc2 { margin-top: 1em; font-weight: 700; font-size:1.9375em; line-height: 1.3; }
.gateContent .copyright { margin-top:14.667rem; font-size:0.9375em; line-height: 1.6; text-shadow: 0px 0px 3cqmax #000;-webkit-text-shadow: 0px 0px 33px #000; -moz-text-shadow: 0px 0px 33px #000; -o-text-shadow: 0px 0px 33px #000; -ms-text-shadow: 0px 0px 33px #000; }
:lang(en) .gateContent { font-size: 13px; line-height: 1.3; }

#main { flex-grow: 1; position: relative; width: 100%; max-width:720px; margin: 0 auto; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom:calc(var(--fab-h) + (var(--space-md) * 2)); background:var(--bg-primary); }

@media screen and (max-width:1220px) {
	.gateContent { padding-left: 6%; }
}
@media screen and (max-width:960px) {
	#app { grid-template-columns: 100%; }
	.gateContent { display: none; }
	#main { max-width: none; }
}

/* 하단 고정 버튼 */
.fab { display: flex; gap:0.5rem; justify-content: center;
	z-index:900; position: fixed;
	left: var(--space-md);
	right: var(--space-md);
	bottom:calc(var(--safe-bottom) + var(--space-md));
	max-width:min(660px, 91.667vw);
	margin:0 auto;
	box-sizing: border-box;
}
.pageMain .fab { position: sticky; bottom: calc(var(--safe-bottom) + var(--space-md)); width: calc(100% - (var(--space-md) * 2)); max-width:none; margin:3.5rem auto 0;}
.fab .btn { display: flex; gap:0.5rem; align-items: center; justify-content: center; width: 100%; height: var(--fab-h); border-radius:var(--radius-round); border: 0; color:var(--color-white); font-weight: 700; font-size: 1.5rem; }
.fab .btn.btn-primary { background:var(--btn-gradient); box-shadow: var(--shadow-btn); }
.fab .btn.btn-light { background:var(--color-white); color:var(--color-primary); }
.fab .btn.btn-dark { background:var(--color-primary); }
.fab .btn:disabled { background: #666 !important; }
.fab .ico { display: inline-block; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }
.fab .ico.ar { width: 1.3rem; height: 1.3rem; background-image:url(/assets/images/ar/btn_ar.svg); }
.fab .ico.rotate { width:1.2rem; height:1.2rem; background-image:url(/assets/images/ar/icon_rotate.svg); }
.fab .ico.share { width:1.5rem; height:1.5rem; background-image:url(/assets/images/ar/icon_share.svg); }
.fab .ico.down { width:1.5rem; height:1.5rem; background-image:url(/assets/images/ar/icon_down.svg); }

/* 권한 안내 */
body:has(.allowLayout) { background: #EAEAEA; }
.allowLayout { padding:5rem 3rem 0; }
.allowLayout h2 { margin-bottom: 4.2rem; font-size: 2rem; }
.allowLayout .item { display: flex; flex-direction: column; gap:var(--space-xs); margin-top:3.5rem; }
.allowLayout .item i { display: block; background-repeat: no-repeat; background-position: 0 50%; background-size: contain; }
.allowLayout .item .sensor { height: 4rem; background-image: url(/assets/images/ar/icon_radar.svg); }
.allowLayout .item .location { height: 3.5rem; background-image: url(/assets/images/ar/icon_location.svg); }
.allowLayout .item .camera { height: 3.5rem; background-image: url(/assets/images/ar/icon_camera.svg); }
.allowLayout .item h3 { font-size: var(--fs-lg); }
.allowLayout .item p { font-weight: 500; font-size: 1.3rem; }
.allowLayout .fab .btn { border-radius:var(--radius-sm); background:var(--color-primary); }

/* main */
.pageMain .header { border-bottom: 1px solid var(--color-border); background: var(--color-white); box-shadow: 0 1px 4px var(--shadow-sm); }
.pageMain #main { padding-bottom:var(--space-md); background-color: #fff; }
/* ar 포토필터 버튼 */
.btnArFilter { background: var(--color-primary); }
/* main visual swiper */
.mainVisual .visualSwiper { overflow: hidden; position: relative; text-align: center; --page-color: #fff; --page-image: none; background:var(--page-image), var(--page-color); background-position: center top; background-repeat: no-repeat; background-size:contain; transition:background-color .35s ease; }
.mainVisual .visualSwiper .swiper-slide { position: relative; opacity: 0; visibility: hidden; pointer-events: none; }
/* prev/active/next만 노출 */
.mainVisual .visualSwiper .swiper-slide.swiper-slide-prev,
.mainVisual .visualSwiper .swiper-slide.swiper-slide-active,
.mainVisual .visualSwiper .swiper-slide.swiper-slide-next { opacity: 1; visibility: visible; pointer-events: auto; }
.mainVisual .visualSwiper .swiper-slide .card { padding:0 2rem; }
.mainVisual .visualSwiper .swiper-slide .card img{ display:block; margin: 0 auto; }
.mainVisual .visualSwiper .swiper-pagination { display: flex; justify-content: center; align-items: center; position: relative; bottom: auto; margin-top: 0.4rem; }
.mainVisual .visualSwiper .swiper-pagination .swiper-pagination-bullet { opacity: 1; width:0.6rem; height:0.6rem; margin:0 2px; background:#787878; }
.mainVisual .visualSwiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background:var(--color-primary); }
.stampProgress { max-width: 25rem; margin-left: auto; margin-right: auto; padding:0 var(--space-xxs); box-sizing: border-box; }
.stampProgress .stampProgress_track { display:flex; align-items:center; gap:0.3rem; }
.stampProgress .stampProgress_track > span { flex:1; min-height: 0.7rem; border-radius:var(--radius-round); background: var(--color-gray);  transition: background-color .25s ease, transform .25s ease; }
.stampProgress .stampProgress_track > span.on { background:#2B6AFF; }
.stampProgress .stampProgress_track > span.on:first-child { background:var(--btn-gradient); }
.stampProgress .meta { display:flex; align-items:center; justify-content:space-between; margin-top: 0.6rem; }
.stampProgress .label{ font-size: 1.1rem; }
.stampProgress .count{ font-weight:700; font-size:var(--fs-xs); }
.btnCoupon { display: flex; justify-content: center; align-items: center; gap:1rem; width: 25rem; height: 4.5rem; margin:1.2rem auto; border-radius:var(--radius-round); background: linear-gradient(316deg, #4378FC 48.19%, var(--color-light) 95.11%); color: var(--color-white); font-weight: 600; font-size:var(--fs-sm); }
.btnCoupon .arrow { display: inline-block; width:0.6rem; height:1rem; background:url(/assets/images/ar/arrow_right.svg) no-repeat left center; background-size:contain; }
.btnCommentary { display: flex; justify-content: center; align-items: center; gap:var(--space-xs); margin:1.8rem auto 3.2rem; padding:0.7rem 1.5rem; border: 1px solid #F65B2F; border-radius:var(--radius-round); background:#FFF1ED; color:#F65B2F; font-weight:500; font-size:var(--fs-xs); }
.btnCommentary .comment { display: inline-block; width: var(--space-sm); height: var(--space-sm); background:url(/assets/images/ar/btn_commentary.svg) no-repeat left center; background-size:contain; }

/* 내용영역 컨테이너 */
.healingPanel { display: none; }
.healingPanel.is-active { display: block; animation: fadeInUp 0.5s; }
.mainTitle { margin-top:4rem; text-align: center; }
.mainTitle .title{ font-weight: bold; font-size: 2rem; }
.mainTitle .desc { overflow:hidden; margin-top:var(--space-xs); padding:0 var(--space-md); word-break: keep-all; font-size:var(--fs-xs); }
.sectionTitle { margin-top: 3rem; margin-bottom: 1em; font-size:var(--fs-sm); }
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ar 미션 투어 */
.missionTour { margin-top:var(--space-lg); margin-bottom: 4.2rem; padding:0 var(--space-md); }
.missionTour .missionList li { margin:var(--space-xxs); }
.missionTour .missionList .mission { display: flex; align-items: center; gap:1.5rem; padding:var(--space-xs); border-radius:var(--radius-sm); box-shadow: var(--shadow-sm); }
.missionTour .missionList .mission .thumb { flex-shrink: 0; display: block; object-fit: cover; width: 5.5rem; height: 5.5rem; border-radius:var(--radius-round); }
.missionTour .missionList .mission .info { flex-grow: 1; }
.missionTour .missionList .mission .info h3 { color:var(--color-text); font-size: 1.3rem; font-weight: 500; }
:lang(en) .missionTour .missionList .mission .info h3 { letter-spacing: -0.04em; }
.missionTour .missionList .mission .info .desc { color:var(--color-gray); }
.missionTour .missionList .mission .badge { flex-shrink: 0; display:inline-flex; margin-right:var(--space-xs); padding:0.5rem 1rem; border-radius:var(--radius-round); color:var(--color-white); }
.missionTour .missionList .mission[data-state="active"] { opacity: 0.8; }
.missionTour .missionList .mission[data-state="active"] .thumb { filter:grayscale(1); }
.missionTour .missionList .mission[data-state="active"] .info h3 { color:var(--color-gray); }
.missionTour .missionList .mission[data-state="active"] .badge { background:var(--color-muted); }
.missionTour .missionList .mission[data-state="done"] { border: 1px solid var(--color-accent); }
.missionTour .missionList .mission[data-state="done"] .badge { background: linear-gradient(298deg, var(--color-accent) 51.29%, var(--color-light) 114.74%); }

/* 갤러리-pvr, video, audio */
.galleryThumb { padding-left: var(--space-md); }
.galleryThumb h2 { margin-bottom:var(--space-xs); font-size: var(--fs-sm); }
.galleryThumb .gallerySwiper .swiper-slide a,
.galleryThumb .gallerySwiper .swiper-slide button { display: flex; flex-direction:column; width: 100%; }
.galleryThumb .gallerySwiper .swiper-slide .title { margin-top:var(--space-xs); font-weight: 500; font-size: 1.3rem; }
.galleryThumb .gallerySwiper .swiper-slide .thumb { position:relative; padding-top:118.18182%; }
.galleryThumb .gallerySwiper .swiper-slide .thumb.round { overflow: hidden; padding-top: 100%; border-radius:var(--radius-round); }
.galleryThumb .gallerySwiper .swiper-slide .thumb img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.galleryThumb .gallerySwiper .swiper-slide .thumb i { display: inline-block; position:absolute; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }
.galleryThumb .gallerySwiper .swiper-slide .thumb i.vr { top:0.6rem; right:0.6rem; width: 2rem; height: 2rem; background-image: url(/assets/images/ar/icon_vr.svg); }
.galleryThumb .gallerySwiper .swiper-slide .thumb i.audio { top:50%; left: 50%; width:1.7rem; height:1.9rem; background-image: url(/assets/images/ar/icon_play.svg); transform:translate(-50%, -50%); }
.galleryThumb .gallerySwiper .swiper-slide .thumb i.video { top:50%; left: 50%; width: 2.3rem; height: 2.3rem; background-image: url(/assets/images/ar/icon_play_round.svg); transform:translate(-50%, -50%); }

/* 레이어 팝업 */
.lyr { display:grid; place-items:center; z-index:999; position:fixed; inset:0; padding:calc(var(--space-md) + var(--safe-top)) var(--space-md) calc(var(--space-md) + var(--safe-bottom)); }
.lyr.is-hidden { display:none; }
.lyr .lyrDim { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.lyr .lyrPanel { opacity:0; position:relative; width: 100%; max-width:min(71.875vw, 23rem); background:var(--color-white); border-radius:var(--radius-md); box-shadow:0 10px 30px rgba(0,0,0,.2); padding:2.5rem; transform:translateY(var(--space-xs)); animation:lyr-in .18s ease-out forwards; box-sizing: border-box; }
@keyframes lyr-in{to{opacity:1;transform:translateY(0)}}
.lyr .lyrPanel .lyrBody { text-align:center; }
.lyr .lyrPanel .lyrBody  .lyrIcon.danger { display:inline-flex; justify-content: center; align-items: center; width: 3.5rem; height:3.5rem; margin-bottom:var(--space-sm); border-radius:var(--radius-round); background:var(--lyr-danger); color:var(--color-white); font-weight: 900; font-size: 2.1rem; }
.lyr .lyrPanel .lyrBody .title { font-weight: 700; font-size: 1.5rem; }
.lyr .lyrPanel .lyrBody .desc { margin-top:var(--space-xs); font-weight: 500; font-size: 1.1rem; word-break: keep-all; letter-spacing:-0.04em; }
.lyr .lyrPanel .lyrActions { margin-top: var(--space-lg); text-align: center; }
.lyr .lyrPanel .lyrBtn { appearance:none; display:inline-flex; justify-content: center; align-items: center; width:100%; height:var(--btn-h); border-radius:var(--radius-round); border:0; text-align: center; font-weight:700; font-size: 1.3rem; }
.lyr .lyrPanel .btn-info { background:var(--btn-info); }
.lyr .lyrPanel .btn-primary { background:var(--bg-primary); color:#3368F6; }
.lyr .lyrPanel .btn-light { gap:var(--space-xxs); background:var(--color-white); color:var(--color-primary); }
.lyr .lyrPanel .btn-close { width: auto; min-width: 44px; height: auto; padding:var(--space-xs) var(--space-xs) 0; font-weight: 500; font-size: 1.1rem; box-sizing: border-box; }
.lyr .layerClose { display:inline-flex; justify-content: center; align-items: center; position:absolute; bottom:0; left: 0; right: 0; width: 4rem; height: 4rem; margin: 0 auto; border-radius:var(--radius-round); background:rgba(255, 250, 250, 0.80); }
.lyr .layerClose i { display: block; width: 1.8rem; height: 1.8rem; background:url(/assets/images/ar/icon_close.svg) no-repeat center center /contain; }

/* iOS 100vh 이슈 보완 */
@supports (-webkit-touch-callout: none) {
  .lyr { height:100dvh; }
}
@media (prefers-reduced-motion: reduce){
  .lyr .lyrPanel { animation:none;opacity:1;transform:none; }
}

/* 퀴즈 */
#main:has(.quizBody) { background: linear-gradient(180deg, var(--bg-primary) 0%, #FFF 100%); }
.quizLayout { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--layout-offset)); padding:0 var(--space-md); box-sizing: border-box; }
@supports (height: 100dvh) {
  .quizLayout { min-height: calc(100dvh - var(--layout-offset)); }
}
.quizLayout .quizMain { text-align: center; }
.quizLayout .quizMain i { display: block; height: 20.3rem; }
.quizLayout .quizMain i img { max-height: 100%; }
.quizLayout .quizMain .badge { display: inline-flex; align-items: center; margin-top:4.5rem; margin-bottom:var(--space-xs); padding:0.3rem 1rem; border-radius:var(--radius-round); background:var(--color-primary); color:var(--color-white); font-weight: 700; font-size: 1.1rem; }
.quizLayout .quizMain h2 { font-size: 2rem; }
.quizLayout .quizBody .question { margin-bottom:var(--space-lg); }
.quizLayout .quizBody .question .badge { display: flex; flex-direction: column; align-items: center; gap:1rem; }
.quizLayout .quizBody .question .badge span { flex-shrink: 0; display: inline-flex; align-items: center; margin-bottom:var(--space-xxs); height:2.5rem; position: relative; padding:0.1rem 1.5rem; border-radius: var(--radius-round); background: #A9B8DC; color:var(--color-white); font-weight: 700; font-size: 1.3rem; }
.quizLayout .quizBody .question .badge span::after { content:''; position: absolute; left: 50%; bottom: -6px; width: 0; height: 0; border-style: solid; border-width: 6px 3.5px 0px 3.5px; border-color: #A9B8DC transparent transparent transparent; transform: translateX(-50%); }
.quizLayout .quizBody .question .badge img { max-height:8rem; }
.quizLayout .quizBody .question h2 { margin-top:var(--space-md); text-align: center; font-weight: 500; font-size: 2rem; }
.quizLayout .quizChoices { display: grid; gap:var(--space-xxs); }
.quizLayout .quizChoice label { display: block; }
.quizLayout .quizChoice label span {  display: flex; justify-content: space-between; align-items: center; min-height: 5.5rem; width:min(80.793vw, 26.5rem); padding: 1rem var(--space-lg); border-radius:4rem; border: 1px solid #E5E5E5; background:var(--color-white); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); color:var(--color-gray); cursor: pointer; transition:var(--tr-fast); font-weight: 500; font-size: 1.5rem; box-sizing: border-box; }
.quizLayout .quizChoice label span::after {  content: ""; flex-shrink: 0; display: inline-block; width:2rem; height:2rem; margin-left: auto; background-image: url(/assets/images/ar/icon_radio_off.svg); background-repeat: no-repeat; background-size: contain; }
.quizLayout .quizChoice input[type="radio"] { appearance: none; position: absolute; opacity: 0; }
.quizLayout .quizChoice input[type="radio"]:focus + span { outline:2px solid; }
.quizLayout .quizChoice input[type="radio"]:checked + span { border-color:var(--color-accent); color:var(--color-accent); }
.quizLayout .quizChoice input[type="radio"]:checked + span::after { background-image: url(/assets/images/ar/icon_radio_on.svg); }
.quizLayout .btnQuiz { background:var(--color-accent); }
/* 상태별 스타일 */
.lyr[data-layer="quiz_result"] .is-hidden { display: none; }
.lyr[data-layer="quiz_result"] .lyrPanel .lyrBody .title { font-size:var(--fs-lg); }
.lyr[data-layer="quiz_result"] .lyrPanel .lyrBody .desc { font-size:var(--fs-xs); }
.lyrPanel .quizResult .resultIcon { margin:-6rem auto var(--space-md); background: center/contain no-repeat; }
.lyrPanel[data-state="correct"] .quizResult .resultIcon { width: 7.5rem; height: 7.3rem; background-image: url(/assets/images/ar/icon_correct.png); }
.lyrPanel[data-state="wrong"] .quizResult .resultIcon { width: 7.4rem; height: 7.2rem; background-image: url(/assets/images/ar/icon_wrong.png); }
.lyrPanel[data-state="success"] .quizResult .resultIcon { width:11.2rem; height: 6.8rem;background-image: url(/assets/images/ar/icon_success.png); }
.lyrPanel[data-state="success"] .quizResult .title,
.lyrPanel[data-state="complete"] .quizResult .title { color:var(--color-accent);}
.lyrPanel[data-state="complete"] .quizResult .resultIcon { width: 12.2rem; height: 9.2rem; background-image: url(/assets/images/ar/icon_complete.png); }
.lyrPanel[data-state="wrong"] .lyrBtn { background:var(--btn-info); color:var(--color-primary); }
.lyrPanel[data-state="correct"] .btn-close,
.lyrPanel[data-state="wrong"] .btn-close,
.lyrPanel[data-state="success"] .btn-close { display: none; }

/* 시작페이지 */
.introLayout { display: flex; justify-content:center; align-items:center; position: relative; min-height: calc(100vh - var(--layout-offset)); padding:var(--space-md); box-sizing: border-box; }
.introLayout .introBody .ico { margin:0 auto 3.4rem; background-repeat: no-repeat; background-position: center center; background-size: contain; }
.introLayout .introBody:has(.howTo) { padding-bottom:14rem; }
.introLayout .introBody .ico.filter { width:29.4rem; height: 16.3rem; background-image: url(/assets/images/ar/img_photo_filter.png); }
.introLayout .introBody .ico.tower { width:15.7rem; height:27.2rem; background-image: url(/assets/images/ar/icon_tower.png); }
.introLayout .introBody .ico.face { width:23.7rem; height:23.7rem; margin-bottom:6rem; background-image: url(/assets/images/ar/icon_face.png); }
.introLayout .introBody .ico.hwangtae { z-index:0; position: relative; width: 15rem; height: 15rem; margin-bottom:13rem; padding-top: 1rem; }
.introLayout .introBody .ico.hwangtae img { border-radius: var(--radius-round); }
.introLayout .introBody .ico.hwangtae::before { content:''; z-index: -2; position: fixed; top: 0; left:0; width:100%; height:100%; background: url(/assets/images/ar/bg_hwangtae.png) no-repeat center top /contain; }
.introLayout .introBody .ico.hwangtae::after { content:''; z-index: -1; position: absolute; top: 0; left:50%; width: 17rem; height: 22.4rem; background:url(/assets/images/ar/icon_hwangtae.png) no-repeat center top /contain; transform: translateX(-50%); }
.introLayout .introBody .ico img { border-radius:3rem; }

.introLayout .introBody .badge { display: flex; justify-content: center; align-items: center; position: relative; width:6rem; height:2.1rem; margin: 0 auto var(--space-xs); border-radius:var(--radius-round); background:var(--color-primary); color:var(--color-white); font-weight: 700; font-size: 1.1rem; box-sizing: border-box; }
.introLayout .introBody .pageTitle { position: relative; text-align: center; font-size: 2rem; }
.introLayout .introBody .howTo { display:flex; flex-direction: column; align-items: flex-start; gap:1rem; position: absolute; bottom:var(--space-md); left:var(--space-lg); width:calc(100% - (var(--space-lg) * 2)); padding: 1.4rem 2rem; border-radius:var(--radius-md); background: rgba(255, 255, 255, 0.70); box-shadow:var(--shadow-md); font-size: 1.3rem; box-sizing: border-box; }
.introLayout .introBody .howTo .howToList li { display:flex; gap:0.7rem; margin:var(--space-xxs) 0; font-weight: 500; }
.introLayout .introBody .howTo .howToList li span { flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center; width:1.8rem; height: 1.8rem; border-radius:var(--radius-round); background:#F1F3F4; text-align: center; font-weight: 700; font-size: 1rem; }

/* 도착 레이어팝업 */
.lyr[data-layer="lyr_arrive"] .lyrDim { background: rgba(0, 0, 0, 0.50); background-blend-mode: multiply; }
.lyr[data-layer="lyr_arrive"] .lyrPanel { max-width: none; background:transparent; color:var(--color-white); box-shadow: none; }
.lyr[data-layer="lyr_arrive"] .lyrPanel .lyrBody .title { font-weight: 800; font-size: 2.3rem; }
.lyr[data-layer="lyr_arrive"] .lyrPanel .lyrBody .desc { font-weight: 500; font-size: 1.3rem; }
.lyr[data-layer="lyr_arrive"] .lyrPanel .lyrBody .arriveIcon { width: 6rem; height: 8.1rem; margin:var(--space-md) auto var(--space-lg); background:url(/assets/images/ar/icon_arrive.png) no-repeat 50% 50% /contain; }
.lyr[data-layer="lyr_arrive"] .lyrPanel .lyrBtn { max-width:15rem; }

/* 오디오 해설 레이어팝업 */
#lyr_commentary .lyrPanel { position: relative; width:min(78vw, 56rem); max-width:560px; padding:0 0 6.2rem; border-radius: 0; background:transparent; box-shadow: none; }
#lyr_commentary .lyrBody { padding-top:var(--space-lg); border-radius:var(--radius-md); background:var(--color-white); text-align: left; }
#lyr_commentary .lyrBody .title { margin-bottom:1.5rem; text-align: center; font-size:var(--fs-lg); }
#lyr_commentary .lyrBody .desc pre { overflow-y:auto; display: block; max-height:min(83vw, 30rem); padding:0 2rem var(--space-xs); white-space:pre-line; color: #666; font-weight: 500; font-size:var(--fs-xs); word-break: keep-all; }
#lyr_commentary .audioPlayer { display: flex; gap:1.3rem; align-items: center; padding:1rem 1.5rem; box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.25); }
#lyr_commentary .audioPlayer .btnPlay { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; background-image:url(/assets/images/ar/icon_play_bk.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: 1.7rem auto; }
#lyr_commentary .audioPlayer .btnPlay.pause { background-image: url(/assets/images/ar/icon_pause.svg); }
#lyr_commentary .audioPlayer .progress { flex-grow: 1; }
#lyr_commentary .audioPlayer .audioTime { display: flex; justify-content: space-between; margin-top:var(--space-xxs); color:#666; font-weight: 500; font-size: 1rem; }
#lyr_commentary .audioPlayer .audioSeek { -webkit-appearance: none; appearance: none; cursor: pointer; width: 100%; height: 0.5rem; border-radius:var(--radius-sm); background: linear-gradient(to right, #3368F6 0%, #E8F2FE 0%, #E8F2FE 100%); }
#lyr_commentary .audioPlayer .audioSeek:focus { outline: none; }
#lyr_commentary .audioPlayer .audioSeek::-webkit-slider-runnable-track { height: 0.5rem; }
#lyr_commentary .audioPlayer .audioSeek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background-color: transparent; height:0; width:0; }
/*Firefox styles*/
#lyr_commentary .audioPlayer .audioSeek::-moz-range-track { height: 0.5rem; }
#lyr_commentary .audioPlayer .audioSeek::-moz-range-thumb { background-color: transparent; height:0; width:0; }
/*Edge / IE*/
#lyr_commentary .audioPlayer .audioSeek::-ms-track { width: 100%; height: 0.5rem; border-color: transparent; color: transparent; }
#lyr_commentary .audioPlayer .audioSeek::-ms-thumb { background-color: transparent; height:0; width:0; }

/* 게임 팝업 */
.lyr[data-layer="game_alert"] .lyrPanel { display: flex; flex-direction: column; justify-content:flex-end; max-width:min(67vw, 24rem); min-height:17rem; padding-top:4.5rem; box-sizing: border-box; }
.lyr[data-layer="game_alert"] .lyrPanel .lyrBody .title { font-size:var(--fs-lg); }
.lyr[data-layer="game_alert"] .lyrPanel .lyrBody .primary { color:var(--color-accent); }
.lyr[data-layer="game_alert"] .lyrPanel .lyrBody .desc { font-size:var(--fs-xs); }
.lyr[data-layer="game_alert"] .lyrPanel .lyrBody .icon { position: absolute; top: 0; left:50%; width: 7rem; height: 7rem; border-radius: var(--radius-round); border: 1px solid #D9D9D9; box-sizing: border-box; transform: translate(-50%, -50%); }
.lyr[data-layer="game_alert"] .lyrPanel .lyrBody .icon img { object-fit: cover; border-radius: var(--radius-round); }
.lyr[data-layer="game_alert"] .lyrPanel .lyrActions { margin-top:1.4rem; }