@charset "utf-8";

/* glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, .1),
        inset 0 -1px 0 rgba(255, 255, 255, .05),
        inset 0 0 4px 2px rgba(255, 255, 255, .1);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    pointer-events: none;
}
.glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    pointer-events: none;
}
.glass:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, .3),
        inset 0 -1px 0 rgba(255, 255, 255, .15),
        inset 0 0 4px 2px rgba(255, 255, 255, .3);
}

:root {
	--body-width: 480px;
	--header-height: 48px;
	--book-height: calc(100dvh - 140px);
	--color-black: #1A1A1A;
	--color-brand: #44B371;
	--color-orange: #E95D2A;
	--color-book: #FFA54B;
	--color-brown: #7D3D24;
	--color-page-change: #FFA400;
	--color-page-business: #F8D84D;
	--color-page-finance: #FFB4DA;
	--color-page-last: #99D4FF;
}

/* layout */
.hide-scrollbar::-webkit-scrollbar{
    display: none;
}
.hide-scrollbar{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hidden {
	overflow: hidden;
	height: 100%;
}
html {
	background: #4c4c4c;
}
body {
	max-width: var(--body-width);
	width: 100%;
	color: var(--color-black);
	margin: 0 auto;
	background: #FFF3E1;
}

.container {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 0 32px;
	margin: 0;
	overflow: hidden;
}

/* common */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.flex {
	display: flex;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.pb-120{padding-bottom: 120px;}
.pt-84 {padding-top: 84px!important;}
.pt-56 {padding-top: 56px;}
.mb-100{margin-bottom: 100px;}
.mb-80{margin-bottom: 80px;}
.mb-70{margin-bottom: 70px;}
.mb-60{margin-bottom: 60px!important;}
.mb-50{margin-bottom: 50px!important;}
.mb-48{margin-bottom: 48px!important;}
.mb-40{margin-bottom: 40px;}
.mb-36{margin-bottom: 36px;}
.mb-32{margin-bottom: 32px;}
.mb-30{margin-bottom: 30px!important;}
.mb-28{margin-bottom: 28px;}
.mb-20{margin-bottom: 20px!important;}
.mb-16{margin-bottom: 16px!important;}
.mb-14{margin-bottom: 14px;}
.mb-12{margin-bottom: 12px;}
.mb-10{margin-bottom: 10px;}
.mb-8{margin-bottom: 8px;}
.mb-6{margin-bottom: 6px!important;}
.mb-4{margin-bottom: 4px;}
.mt-25 {margin-top: 25px!important;}

.btn{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left:-9px;
	margin-right:-9px;
	width: calc(100% + 18px);
	max-width: calc(100% + 18px);
	height: 50px;
	font-size: 16px;
	font-weight: 600;
    line-height: 25px;
	color: #222;
	border-radius: 60px;
	background: linear-gradient(116deg, #FFD400 21.71%, #FFA400 54%);
	box-shadow: 0 0 20px 0 #FFA023;
}
.section-donation .btn{
	background: linear-gradient(131deg, #FFFC8F 15.91%, #ECEF0C 88.24%);
	box-shadow: 0 0 20px 0 #ECEF0C;
}
#modalFinance1 .btn,
.section-finance .btn{
	background: linear-gradient(93deg, #C7F4FF 5.86%, #0CF 52.82%);
	box-shadow: 0 0 20px 0 #65E0FF;
}
#modalFinance1 .btn {
	padding: 0 30px;
    display: flex;
    width: max-content;
    margin: 0 auto;
}
.back-orange{
	background: var(--color-orange) !important;
}
.back-brand{
	background: var(--color-brand) !important;
}
.color-orange{
	color: var(--color-orange) !important;
}
.color-brand{
	color: var(--color-brand) !important;
}
.font-20{
	font-size: 20px;
}
.font-18{
	font-size: 18px;
}
.font-16{
	font-size: 16px;
}

/* header */
.site-header {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	max-width: var(--body-width);
	width: 100%;
	height: var(--header-height);
	padding: 12px 25px;
	background: var(--color-brand);
	z-index: 100;
}
body.isMainPage .site-header{
	background: transparent;
}
body:not(.isMainPage) .site-header{
	background: #222;
	border-bottom:1px solid #4C4C4C
}
.site-header .logo-wrap{
	display: flex;
	align-items: center;
}
body.isMainPage .site-header .logo-wrap{
	display: none;
}
.site-header .site-title img{
	width: 30px;
    filter: brightness(0) saturate(100%) invert(100%);
}
.site-navigation button{
    display: flex;
    align-items: center;
    column-gap: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
    margin-left: 40px;
}
.site-navigation.open button img{    
    transition: transform 0.36s;
}
.site-navigation.open button img{    
	transform: rotate(180deg);
}
.site-navigation .nav{
	display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: var(--color-brand);
	border-top: 1px solid #fff;
	box-shadow: 0px 10px 10px 2px #20202033;
}
.site-navigation .nav li{
    font-size: 16px;
    color: #fff;
    padding: 6px 95px;
	border-bottom: 1px solid #fff;
}
.site-navigation .nav li.active{
	font-weight: 700;
}
.site-navigation .nav li a{
	display: block;
	padding: 5px 0;
}
.site-header .btn-audio-wrap{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
body:not(.isMainPage) .site-header .btn-audio{
	width: 30px;
	height: 30px;
	min-width: unset;
	min-height: unset;
	border-radius: 50%;
}
body:not(.isMainPage) .site-header .btn-audio-text{
	display: none;
}
body:not(.isMainPage) .site-header .btn-audio-icon{
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}
.isMainPage .site-header{
	justify-content: flex-end;
}
.site-header .btn-audio{
    display: flex;
    width: 13.3333vw;   /* 256px / 1920 */
    height: 2.9167vw;   /* 56px / 1920 */
    min-width: 120px;
    min-height: 36px;
    justify-content: center;
    align-items: center;
    border-radius: 2.9167vw;
    box-sizing: border-box;
}
.site-header .btn-audio .btn-audio-text{
    width: 10.4167vw;   /* 200px / 1920 */
    height: 1.6667vw;   /* 32px / 1920 */
    min-width: 100px;
    min-height: 20px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
body:not(.isMainPage) .site-header .btn-audio-text{
	display: none;
}
.site-header .btn-audio-icon{
	display: none;
}
.site-header #btnBack img{
	width: 12px;
	margin: 0 5px;
}
body:not(.talk-entered) .site-header #btnBack{
	display: none;
}

/* main */
body.isMainPage{
	height: 400svh; /* iOS Safari: svh(주소창 포함 최소 viewport) 기준으로 vh 변화에 의한 떨림 방지 */
	background: #010007; /* safe area 하단 공백 노출 시 오프닝 배경색으로 통일 */
}
.main-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-brand);
    overflow: hidden;	
}
#coverNote{
	position: absolute;
	top: 0;
	left: 0;
	width: 130px;
}
#coverCoffee{
	position: absolute;
	bottom: 12px;
	left: 0;
	width: 105px;
}
#coverPencil{
	position: absolute;
	bottom: 10px;
	right: 0;
	width: 135px;
}
#scrollDown{
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 74px;
	height: auto;
}
.cover-container{
	position: absolute;
	top: calc(50% + 15px);
	left: 50%;
    transform: translate(-50%, -50%) scale(0.87);
	width: calc(var(--book-height) * 0.6017);
    max-width: calc(100% - 40px);
	height: var(--book-height);
	max-height: var(--book-height);
}
.cover-inner{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%) rotate(-9.6deg);
    transform-origin: top center;
    perspective: 1200px;
}
.cover-inner-back{
	display: none;
	position: absolute;
	top: 0;
    left: calc(-1 * calc(calc(100vw - 100%) / 2));
    width: 60px;
    height: 100%;
	background: rgb(217,217,217);
	background: linear-gradient(270deg, rgba(217,217,217,0) 0%, rgba(42,33,33,1) 100%);
	opacity: 0.7;
}
.cover-inner.opened .cover-inner-back{
	display: block;
}
.cover-image-wrap{
	position: relative;
    transform-origin: 1px center;
    transition: transform 0.6s ease-out;
    transform-style: preserve-3d;
}
.cover-image-wrap:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: var(--color-book);
	border: 1px solid #000;
}
.cover-image-wrap:after{
	content: '';
    position: absolute;
	top: 8px;
	left: 8px;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	background: #fff;
	border: 1px solid #000;
}
#coverImage{
    position: relative;
    z-index: 1;
	object-fit: contain;
	backface-visibility: hidden
}
#coverPage{
	position: absolute;
	top: 0;
	left: 1px;
	width: calc(100% - 2px);
	height: 100%;
	background: var(--color-book);
	border: 1px solid #000;
	transition: width 0.6s;
	z-index: -1;
}
#coverPage .page-inner{
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	padding: 27px 32px;
	background: #fff;
	border: 1px solid #000;
    text-align: center;
	overflow: hidden;
}
#coverPage .page-inner > div,
#coverPage .page-inner > button{
	transform: translateY(50px);
	opacity: 0;
}
#pageText1, #pageText2{
	margin-bottom: 30px;
}
#coverPage .page-inner .page-text-img{   
    /* max-height: calc(36.3636% - 35px); */
	margin-left: auto;
	margin-right: auto;
}
#coverPage .page-inner > div:nth-of-type(2) .page-text-img{
    /* max-height: calc(27.2727% - 24px); */
	margin-bottom: 0;
}   
#coverPage .page-inner > button{
    position: absolute;
    bottom: 17px;
    left: calc(50% - 66px);
}

/* talk */
.talk-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - var(--header-height));
	margin-top: var(--header-height);
    background: #fff;
    overflow: hidden;
	opacity: 0;
	transition: all 0.6s;
}
.talk-container.entered{
	opacity: 1;
	z-index: 1;
}
.talk-inner{
    position: absolute;
    bottom: 0;
	left: 0;
    width: 100%;
    height: 100%;
}
.talk-container.show-btn .talk-inner{
	bottom: 120px;
}
.talk-container + .btn-wrap{
    position: fixed;
	bottom: -90px;
    left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 90px;
	max-width: var(--body-width);
	transition: bottom 0.6s;
	z-index: 1;
}
.talk-container:not(.entered) + .btn-wrap{
	display: none;
}
.talk-container.show-btn + .btn-wrap{
	bottom: 0;
}
.talk-container + .btn-wrap .btn{
    position: absolute;
    bottom: 40px;
    left: 16px;
    width: calc(100% - 32px);
}
.talk-info{
    width: 100%;
	margin-top: 24px;
	margin-bottom: 15px;
    text-align: center;
	opacity: 0;
}
.talk-info p{    
	display: inline-block;
	font-size: 12px;
	line-height: 1.6;
	font-weight: 500;
	color: #999999;
	padding: 4px 16px 3px 16px;
	background: #EDEDED;
	border-radius: 20px;
}
.bubble-wrap{
	/* display: none; */
    width: calc(100% - 115px);
    margin-left: 26px;
    margin-right: auto;
	margin-bottom: 20px;
	transform: translateY(50px);
	opacity: 0;
	transition: opacity 0.6s;
}
.bubble-wrap.me{
    margin-left: auto;
    margin-right: 26px;
}
.bubble-wrap.has-heart{
	margin-bottom: 46px;
}
.bubble-wrap.entered{
	/* display: block; */
	opacity: 1;
}
.bubble-wrap:after{
	content: '';
	position: absolute;
	bottom: 0;
    left: -10px;
    display: block;
    width: 23px;
    height: 9px;
	background: url(../images/cover/arrow-1.png) no-repeat center / cover;
}
.bubble-wrap.me:after{
	left: auto;
    right: -7px;
    display: block;
    width: 25px;
    height: 14px;
	background-image: url(../images/cover/arrow-2.png);
}
.bubble-wrap .bubble-title{
    display: flex;
	align-items: center;
    gap: 7px;
	font-size: 14px;
	line-height: 1.6;
	font-weight: 500;
	color: #000;
	margin-bottom: 8px;
}
.bubble-title img{
    width: 34px;
    height: 34px;
    border-radius: 50%;
}
.bubble-wrap .bubble{
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
	background: #4E2C1F;
	border-radius: 14px;
    overflow: hidden;
}
.bubble-wrap.me .bubble{
	color: var(--color-black);
	background: #FFA54B;
}
.bubble-wrap .bubble p{
	position: relative;
	padding: 17px 22px;
}
.heart-wrap{
    position: absolute;
    bottom: -26px;
    left: 13px;
    display: flex;
	align-items: flex-end;
    font-size: 12px;
    font-weight: 500;
	line-height: 1.6;
    color: #999;
	opacity: 0;
	transition: opacity 0.6s;
}
.heart-wrap .heart-img-wrap{
	width: 40px;
    height: 40px;
}
.heart-wrap.clicked{
	opacity: 1;
}
.heart-wrap.clicked .heart-img-wrap{
	animation: heart-beat .6s alternate forwards;
	animation-delay: 0.6s;
}
@keyframes heart-beat {
	0% {
		transform: scale(1, 1);
	}
	50% {
	  	transform: scale(1.3, 1.3);
		filter: none;
	}
	100% {
		transform: scale(1, 1);
		filter: none;
	}
  }

/* opening — 모든 화면 크기에 공통 적용 */
.main-pc{
	width: 100vw;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #010007;
	z-index: 99;
	transition: opacity 1.2s;
	opacity: 1;
	will-change: opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.main-pc.fade-out{
	opacity: 0;
}
.main-pc.hide{
	z-index: -1;
}
@keyframes scrollFloat {
	0%, 100% { transform: translateX(-50%) translateY(0);     }
	50%      { transform: translateX(-50%) translateY(-10px); }
}
#scrollDownPc{
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 5.9375vw;  /* 114px ÷ 1920px */
	height: auto;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 5;
	animation: scrollFloat 2.88s ease-in-out infinite;
}
#scrollDownPc img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#lightstick{
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 39.73vh;  /* 430÷802 × 74.07 */
	height: 74.07vh; /* 800÷1080 × 100 */
	object-fit: contain;
	z-index: 2;
	animation: lightstickFadeIn 0.432s ease forwards;
}
@keyframes lightstickFadeIn{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
@keyframes titleSlideDown {
	from { opacity: 0; transform: translateX(-50%) translateY(-1.85vh); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes titleSlideUp {
	from { opacity: 0; transform: translateX(-50%) translateY(1.85vh); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#titleWrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 74.07vh); /* 280÷1080 × 100 = 25.93vh */
	pointer-events: none;
}
#title_a {
	position: absolute;
	top: 7.87vh;       /* 85px ÷ 1080 × 100 */
	left: 50%;
	transform: translateX(-50%);
	height: 1.85vh;    /* 20px ÷ 1080 × 100 */
	width: auto;
	max-width: none;
	opacity: 0;
	animation: titleSlideDown 0.72s ease 1.872s forwards;
}
#title_b {
	position: absolute;
	top: 12.96vh;      /* 140px ÷ 1080 × 100 | 85+20+35 */
	left: 50%;
	transform: translateX(-50%);
	height: 2.78vh;    /* 30px ÷ 1080 × 100 */
	width: auto;
	max-width: none;
	opacity: 0;
	animation: titleSlideUp 0.72s ease 2.304s forwards;
}
#title_c {
	position: absolute;
	top: 17.59vh;      /* 190px ÷ 1080 × 100 | 140+30+20 */
	left: 50%;
	transform: translateX(-50%);
	height: 3.70vh;    /* 40px ÷ 1080 × 100 */
	width: auto;
	max-width: none;
	opacity: 0;
	animation: titleSlideUp 0.72s ease 2.736s forwards;
}
#lightstick_on{
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 39.73vh;
	height: 74.07vh;
	object-fit: contain;
	z-index: 2;
	opacity: 0;
	animation: lightstickFadeIn 0.72s ease 1.44s forwards;
}
@keyframes auraAppear {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes auraRotate {
	from { transform: translateX(-50%) rotate(0deg); }
	to   { transform: translateX(-50%) rotate(360deg); }
}
#lightstick_aura{
	position: fixed;
	bottom: 21.78vh; /* 19.6 × 74.07÷66.67 */
	left: 50%;
	width: 64.77vh;  /* 58.3 × 74.07÷66.67 */
	height: 64.77vh;
	transform: translateX(-50%) rotate(0deg);
	max-width: none;
	opacity: 0;
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	animation:
		auraAppear 0.72s ease 1.56s forwards,
		auraRotate 11.52s linear 1.56s infinite;
}
@keyframes lssAppear {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes lssTwinkle1 {
	0%   { opacity: 1; }
	30%  { opacity: 0.4; }
	50%  { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes lssTwinkle2 {
	0%   { opacity: 1; }
	60%  { opacity: 0.5; }
	80%  { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes lssTwinkle3 {
	0%   { opacity: 0.6; }
	20%  { opacity: 1; }
	70%  { opacity: 0.4; }
	100% { opacity: 0.6; }
}
#lss_01, #lss_02, #lss_03 {
	position: fixed;
	height: auto;
	max-width: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	mix-blend-mode: screen;
	z-index: 10;
}
#lss_01 {
	left: calc(50% - 13.5vh);
	width: 7.8vh;
	top: 39.6vh;
	animation:
		lssAppear 0.432s ease 2.16s forwards,
		lssTwinkle1 3.024s ease-in-out 2.592s infinite;
}
#lss_02 {
	left: calc(50% + 17.1vh);
	width: 5.4vh;
	top: 45.6vh;
	animation:
		lssAppear 0.432s ease 2.592s forwards,
		lssTwinkle2 2.16s ease-in-out 3.024s infinite;
}
#lss_03 {
	left: calc(50% + 13.4vh);
	width: 7.2vh;
	top: 63.7vh;
	animation:
		lssAppear 0.432s ease 3.024s forwards,
		lssTwinkle3 3.888s ease-in-out 3.456s infinite;
}
.bgv{
	position: fixed;
	bottom: -320px;
	left: 50%;
	transform: translateX(-50%);
	width: 640px;
	height: 640px;
	border-radius: 50%;
	background: radial-gradient(circle, #20002F 0%, #010007 70%, transparent 100%);
	z-index: -1;
}
#laserWrap{
	position: fixed;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
}
@keyframes laserGrow {
	from { height: 0; opacity: 0.3; }
	to   { height: 300vh; opacity: 1; }
}
.laser-ray{
	position: absolute;
	bottom: 0;
	left: -1px;
	width: 2px;
	height: 0;
	background: linear-gradient(to top, rgba(210, 210, 235, 0) 5%, rgba(210, 210, 235, 0.8) 100%);
	transform-origin: bottom center;
	animation: laserGrow 0.576s ease forwards;
}
/* ±80° */
#laserWrap .laser-ray:nth-child(1),
#laserWrap .laser-ray:nth-child(2)  { animation-delay: 0.00s; }
/* ±76.8° */
#laserWrap .laser-ray:nth-child(3),
#laserWrap .laser-ray:nth-child(4)  { animation-delay: 0.048s; }
/* ±73.7° */
#laserWrap .laser-ray:nth-child(5),
#laserWrap .laser-ray:nth-child(6)  { animation-delay: 0.072s; }
/* ±70.5° */
#laserWrap .laser-ray:nth-child(7),
#laserWrap .laser-ray:nth-child(8)  { animation-delay: 0.12s; }
/* ±67.4° */
#laserWrap .laser-ray:nth-child(9),
#laserWrap .laser-ray:nth-child(10) { animation-delay: 0.144s; }
/* ±64.2° */
#laserWrap .laser-ray:nth-child(11),
#laserWrap .laser-ray:nth-child(12) { animation-delay: 0.192s; }
/* ±61.1° */
#laserWrap .laser-ray:nth-child(13),
#laserWrap .laser-ray:nth-child(14) { animation-delay: 0.216s; }
/* ±57.9° */
#laserWrap .laser-ray:nth-child(15),
#laserWrap .laser-ray:nth-child(16) { animation-delay: 0.264s; }
/* ±54.7° */
#laserWrap .laser-ray:nth-child(17),
#laserWrap .laser-ray:nth-child(18) { animation-delay: 0.3s; }
/* ±51.6° */
#laserWrap .laser-ray:nth-child(19),
#laserWrap .laser-ray:nth-child(20) { animation-delay: 0.336s; }
/* ±48.4° */
#laserWrap .laser-ray:nth-child(21),
#laserWrap .laser-ray:nth-child(22) { animation-delay: 0.372s; }
/* ±45.3° */
#laserWrap .laser-ray:nth-child(23),
#laserWrap .laser-ray:nth-child(24) { animation-delay: 0.408s; }
/* ±42.1° */
#laserWrap .laser-ray:nth-child(25),
#laserWrap .laser-ray:nth-child(26) { animation-delay: 0.444s; }
/* ±38.9° */
#laserWrap .laser-ray:nth-child(27),
#laserWrap .laser-ray:nth-child(28) { animation-delay: 0.48s; }
/* ±35.8° */
#laserWrap .laser-ray:nth-child(29),
#laserWrap .laser-ray:nth-child(30) { animation-delay: 0.516s; }
/* ±32.6° */
#laserWrap .laser-ray:nth-child(31),
#laserWrap .laser-ray:nth-child(32) { animation-delay: 0.564s; }
/* ±29.5° */
#laserWrap .laser-ray:nth-child(33),
#laserWrap .laser-ray:nth-child(34) { animation-delay: 0.588s; }
/* ±26.3° */
#laserWrap .laser-ray:nth-child(35),
#laserWrap .laser-ray:nth-child(36) { animation-delay: 0.636s; }
/* ±23.2° */
#laserWrap .laser-ray:nth-child(37),
#laserWrap .laser-ray:nth-child(38) { animation-delay: 0.66s; }
/* ±20° */
#laserWrap .laser-ray:nth-child(39),
#laserWrap .laser-ray:nth-child(40) { animation-delay: 0.708s; }
/* PC transform (전역 기본값) */
#laserWrap .laser-ray:nth-child(1)  { transform: rotate(-82deg);   }
#laserWrap .laser-ray:nth-child(2)  { transform: rotate(82deg);    }
#laserWrap .laser-ray:nth-child(3)  { transform: rotate(-78.8deg); }
#laserWrap .laser-ray:nth-child(4)  { transform: rotate(78.8deg);  }
#laserWrap .laser-ray:nth-child(5)  { transform: rotate(-75.7deg); }
#laserWrap .laser-ray:nth-child(6)  { transform: rotate(75.7deg);  }
#laserWrap .laser-ray:nth-child(7)  { transform: rotate(-72.5deg); }
#laserWrap .laser-ray:nth-child(8)  { transform: rotate(72.5deg);  }
#laserWrap .laser-ray:nth-child(9)  { transform: rotate(-69.4deg); }
#laserWrap .laser-ray:nth-child(10) { transform: rotate(69.4deg);  }
#laserWrap .laser-ray:nth-child(11) { transform: rotate(-66.2deg); }
#laserWrap .laser-ray:nth-child(12) { transform: rotate(66.2deg);  }
#laserWrap .laser-ray:nth-child(13) { transform: rotate(-63.1deg); }
#laserWrap .laser-ray:nth-child(14) { transform: rotate(63.1deg);  }
#laserWrap .laser-ray:nth-child(15) { transform: rotate(-59.9deg); }
#laserWrap .laser-ray:nth-child(16) { transform: rotate(59.9deg);  }
#laserWrap .laser-ray:nth-child(17) { transform: rotate(-56.7deg); }
#laserWrap .laser-ray:nth-child(18) { transform: rotate(56.7deg);  }
#laserWrap .laser-ray:nth-child(19) { transform: rotate(-53.6deg); }
#laserWrap .laser-ray:nth-child(20) { transform: rotate(53.6deg);  }
#laserWrap .laser-ray:nth-child(21) { transform: rotate(-50.4deg); }
#laserWrap .laser-ray:nth-child(22) { transform: rotate(50.4deg);  }
#laserWrap .laser-ray:nth-child(23) { transform: rotate(-47.3deg); }
#laserWrap .laser-ray:nth-child(24) { transform: rotate(47.3deg);  }
#laserWrap .laser-ray:nth-child(25) { transform: rotate(-44.1deg); }
#laserWrap .laser-ray:nth-child(26) { transform: rotate(44.1deg);  }
#laserWrap .laser-ray:nth-child(27) { transform: rotate(-40.9deg); }
#laserWrap .laser-ray:nth-child(28) { transform: rotate(40.9deg);  }
#laserWrap .laser-ray:nth-child(29) { transform: rotate(-37.8deg); }
#laserWrap .laser-ray:nth-child(30) { transform: rotate(37.8deg);  }
#laserWrap .laser-ray:nth-child(31) { transform: rotate(-34.6deg); }
#laserWrap .laser-ray:nth-child(32) { transform: rotate(34.6deg);  }
#laserWrap .laser-ray:nth-child(33) { transform: rotate(-31.5deg); }
#laserWrap .laser-ray:nth-child(34) { transform: rotate(31.5deg);  }
#laserWrap .laser-ray:nth-child(35) { transform: rotate(-28.3deg); }
#laserWrap .laser-ray:nth-child(36) { transform: rotate(28.3deg);  }
#laserWrap .laser-ray:nth-child(37) { transform: rotate(-25.2deg); }
#laserWrap .laser-ray:nth-child(38) { transform: rotate(25.2deg);  }
#laserWrap .laser-ray:nth-child(39) { transform: rotate(-22deg);   }
#laserWrap .laser-ray:nth-child(40) { transform: rotate(22deg);    }
@keyframes starFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes starPulse {
	0%, 100% { opacity: 1;   }
	50%      { opacity: 0.1; }
}
.laser-star {
	position: absolute;
	left: 50%;
	max-width: none;
	opacity: 0;
	pointer-events: none;
	will-change: opacity, transform;
}
@keyframes glowDotFade {
	from { opacity: 0; }
	to   { opacity: .7; }
}
.glow-dot {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
	animation: glowDotFade 0.72s ease forwards;
}
/* 전체 크기 통일 — vw로 뷰포트에 비례해 정사각형 유지 */
#gd1,#gd2,#gd3,#gd4,#gd5,#gd6,#gd7,#gd8,
#gd9,#gd10,#gd11,#gd12,#gd13,#gd14,#gd15,#gd16 { width:6vw; height:6vw; }
#gd6,#gd16 { background: radial-gradient(circle, #4A5B34 0%, transparent 70%); }
#gd1,#gd12 { background: radial-gradient(circle, #4D422F 0%, transparent 70%); }
#gd2,#gd5,#gd11,#gd15 { background: radial-gradient(circle, #483750 0%, transparent 70%); }
#gd3,#gd7,#gd10,#gd13 { background: radial-gradient(circle, #292B13 0%, transparent 70%); }
#gd8,#gd14  { background: radial-gradient(circle, #3F3D2F 0%, transparent 70%); }
#gd4,#gd9 { background: radial-gradient(circle, #142B37 0%, transparent 70%); }
:root {
	--gd-p1-l:  9%; --gd-p1-t: 43%;
	--gd-p2-l: 30%; --gd-p2-t: 17%;
	--gd-p3-l: 24%; --gd-p3-t: 32%;
	--gd-p4-l: 30%; --gd-p4-t: 73%;
	--gd-p5-l: 14%; --gd-p5-t: 60%;
	--gd-p6-l: 15%; --gd-p6-t:  7%;
	--gd-p7-l: 22%; --gd-p7-t: 57%;
	--gd-p8-l:  3%; --gd-p8-t: 59%;
}
#gd4  { left: var(--gd-p4-l); top: var(--gd-p4-t); animation-delay: 1.728s; }
#gd5  { left: var(--gd-p5-l); top: var(--gd-p5-t); animation-delay: 1.8s; }
#gd8  { left: var(--gd-p8-l); top: var(--gd-p8-t); animation-delay: 1.848s; }
#gd7  { left: var(--gd-p7-l); top: var(--gd-p7-t); animation-delay: 1.884s; }
#gd1  { left: var(--gd-p1-l); top: var(--gd-p1-t); animation-delay: 1.944s; }
#gd3  { left: var(--gd-p3-l); top: var(--gd-p3-t); animation-delay: 2.016s; }
#gd2  { left: var(--gd-p2-l); top: var(--gd-p2-t); animation-delay: 2.088s; }
#gd6  { left: var(--gd-p6-l); top: var(--gd-p6-t); animation-delay: 2.16s; }
#gd9  { left: calc(100% - var(--gd-p4-l)); top: var(--gd-p4-t); animation-delay: 1.728s; }
#gd15 { left: calc(100% - var(--gd-p5-l)); top: var(--gd-p5-t); animation-delay: 1.8s; }
#gd14 { left: calc(100% - var(--gd-p8-l)); top: var(--gd-p8-t); animation-delay: 1.848s; }
#gd13 { left: calc(100% - var(--gd-p7-l)); top: var(--gd-p7-t); animation-delay: 1.884s; }
#gd12 { left: calc(100% - var(--gd-p1-l)); top: var(--gd-p1-t); animation-delay: 1.944s; }
#gd10 { left: calc(100% - var(--gd-p3-l)); top: var(--gd-p3-t); animation-delay: 2.016s; }
#gd11 { left: calc(100% - var(--gd-p2-l)); top: var(--gd-p2-t); animation-delay: 2.088s; }
#gd16 { left: calc(100% - var(--gd-p6-l)); top: var(--gd-p6-t); animation-delay: 2.16s; }
#bgLWrap{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 50%;
	z-index: 1;
	overflow: hidden;
}
#bgRWrap{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 50%;
	transform: scaleX(-1);
	z-index: 1;
	overflow: hidden;
}
#bgL,
#bgR{
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}
.light-img{
	position: absolute;
	width: 100%;
	height: auto;
	max-width: none;
}
.light-bg-mo,
.light-mo{
	display: none;
}
#lightG,
#lightG2{
	left: 0;
	bottom: 0;
	opacity: 0;
	animation: lightFadeG 0.72s ease 0.432s forwards;
}
#lightV,
#lightV2{
	left: 0;
	bottom: 0;
	opacity: 0;
	animation: lightFadeV 0.72s ease 0.72s forwards;
}
#lightW,
#lightW2{
	left: 0;
	bottom: 0;
	opacity: 0;
	animation: lightFadeW 0.72s ease 1.008s forwards;
}
@keyframes lightFadeG{
	0%{ opacity: 0; }
	60%{ opacity: 1; }
	100%{ opacity: 0.6; }
}
@keyframes lightFadeV{
	0%{ opacity: 0; }
	60%{ opacity: 1; }
	100%{ opacity: 0.6; }
}
@keyframes lightFadeW{
	0%{ opacity: 0; }
	60%{ opacity: 1; }
	100%{ opacity: 0.6; }
}
body.beforeStart .site-header{
	max-width: 100%;
}
.main-container{
	transition: opacity 2.4s;
}
body.beforeStart .main-container{
	opacity: 0;
}
body:not(.beforeStart) .main-container{
	opacity: 1;
}

/* media */
@media screen and (min-width: 1280px) {
	.hide-on-pc{
		display: none;
	}
	body:not(.beforeStart) .hide-on-mo{
		display: none;
	}
	/* 인트로(isMainPage) PC: 타이틀과 같은 y축 고정 위치 */
	body.isMainPage .site-header .btn-audio-wrap{
		position: absolute;
		right: 180px;
		top: 7.87vh;     /* 85px ÷ 1080 × 100 */
		transform: none;
		margin-left: 0;
	}
	body.beforeStart .cover-container{
		left: calc(50% + 250px);
		width: calc(107vh* 0.6017);
		height: 107vh;
		max-height: 107vh;
		transform: translate(-50%, -50%) scale(1);
	}
	body:not(.beforeStart) .cover-inner{
		transform: translate(-50%, -50%);
	}
	.cover-inner-back{
		left: calc(-1 * calc(calc(1300px - 100%) / 2));
	}
	/* lss 별빛 PC 전용: lightstick_on(39.73vh × 74.07vh, top=25.93vh) 기준 */
	#lss_01 {
		left: calc(50% - 15.0vh);
		top: 32.9vh;
		width: 8.7vh;
	}
	#lss_02 {
		left: calc(50% + 19.0vh);
		top: 39.6vh;
		width: 6.0vh;
	}
	#lss_03 {
		left: calc(50% + 14.9vh);
		top: 59.6vh;
		width: 8.0vh;
	}
}

@media screen and (max-width: 1279px) {
	.hide-on-mo{
		display: none;
	}
	.site-header {
		height: 48px;
		padding: 12px 16px;
	}
	.site-header .logo-wrap a {
		display: block;
		width:24px; 
		height:24px;
	}
	.site-header .site-title img { 
		width:24px
	}
	.site-header .btn-audio-text{
		display: none;
	}
	.site-header .btn-audio-icon{
		display: block;
		width: 18px;
		height: 18px;
		object-fit: contain;
	}
	#scrollDownPc{
		width: 17.80vw; /* 229px × 90÷1158, title_c 90vw 기준 */
		bottom:36px
	}
	.site-header .btn-audio-wrap{
		position: static;
	}
	.site-header .btn-audio{
		width: 30px;
		height: 30px;
		min-width: unset;
		min-height: unset;
		border-radius: 50%;
		padding: 0;
	}
	/* 모바일 titleWrap 구성
	   이미지 원본: title_a=628×40, title_b=860×60, title_c=1158×80
	   title_c=90vw 기준 설계 폭 347px → 1px = 0.2593vw
	   top = 누적 설계px × 0.2593 (pure vw) */
	#title_a{
		top: 20.23vw;  /* 78px × 0.2593 */
		width: 48.8vw; /* 628/1158 × 90 */
		height: auto;
		max-width: none;
	}
	#title_b{
		top: 28.78vw;  /* 111px × 0.2593 */
		width: 66.8vw; /* 860/1158 × 90 */
		height: auto;
		max-width: none;
	}
	#title_c{
		top: 36.82vw;  /* 142px × 0.2593 */
		width: 90vw;
		height: auto;
		max-width: none;
	}
	/* bgWrap 모바일: PC 이미지 숨기고 모바일 이미지 표시 */
	#bgLWrap{
		height: 40dvh; /* vh → dvh: iOS 주소창 변화에 의한 높이 흔들림 방지 */
	}
	#bgRWrap{
		height: 40dvh;
	}
	#bgL,
	#bgR,
	#bgLWrap .light-img,
	#bgRWrap .light-img{
		display: none;
	}
	.light-bg-mo{
		display: block;
		position: absolute;
		width: 100%;
		height: auto;
		max-width: none;
		left: 0;
		bottom: 0;
	}
	.light-mo{
		display: block;
		position: absolute;
		width: 100%;
		height: auto;
		max-width: none;
		left: 0;
		bottom: 0;
		opacity: 0;
		animation: lightMobileFade 0.72s ease 0.432s forwards;
	}
	@keyframes lightMobileFade{
		0%{ opacity: 0; }
		60%{ opacity: 1; }
		100%{ opacity: 0.4; }
	}
	/* 레이저 선 모바일 width + 각도 (1번=7deg, 간격 r=1.1 등비) */
	#laserWrap .laser-ray { width: 1px;background: linear-gradient(to top, rgba(210, 210, 235, 0) 5%, rgba(210, 210, 235, 0.5) 100%); }
	#laserWrap .laser-ray:nth-child(1)  { transform: rotate(-42.7deg); }
	#laserWrap .laser-ray:nth-child(2)  { transform: rotate(42.7deg);  }
	#laserWrap .laser-ray:nth-child(3)  { transform: rotate(-38.8deg); }
	#laserWrap .laser-ray:nth-child(4)  { transform: rotate(38.8deg);  }
	#laserWrap .laser-ray:nth-child(5)  { transform: rotate(-35.3deg); }
	#laserWrap .laser-ray:nth-child(6)  { transform: rotate(35.3deg);  }
	#laserWrap .laser-ray:nth-child(7)  { transform: rotate(-32.1deg); }
	#laserWrap .laser-ray:nth-child(8)  { transform: rotate(32.1deg);  }
	#laserWrap .laser-ray:nth-child(9)  { transform: rotate(-29.2deg); }
	#laserWrap .laser-ray:nth-child(10) { transform: rotate(29.2deg);  }
	#laserWrap .laser-ray:nth-child(11) { transform: rotate(-26.5deg); }
	#laserWrap .laser-ray:nth-child(12) { transform: rotate(26.5deg);  }
	#laserWrap .laser-ray:nth-child(13) { transform: rotate(-24.1deg); }
	#laserWrap .laser-ray:nth-child(14) { transform: rotate(24.1deg);  }
	#laserWrap .laser-ray:nth-child(15) { transform: rotate(-21.9deg); }
	#laserWrap .laser-ray:nth-child(16) { transform: rotate(21.9deg);  }
	#laserWrap .laser-ray:nth-child(17) { transform: rotate(-19.9deg); }
	#laserWrap .laser-ray:nth-child(18) { transform: rotate(19.9deg);  }
	#laserWrap .laser-ray:nth-child(19) { transform: rotate(-18.1deg); }
	#laserWrap .laser-ray:nth-child(20) { transform: rotate(18.1deg);  }
	#laserWrap .laser-ray:nth-child(21) { transform: rotate(-16.4deg); }
	#laserWrap .laser-ray:nth-child(22) { transform: rotate(16.4deg);  }
	#laserWrap .laser-ray:nth-child(23) { transform: rotate(-14.9deg); }
	#laserWrap .laser-ray:nth-child(24) { transform: rotate(14.9deg);  }
	#laserWrap .laser-ray:nth-child(25) { transform: rotate(-13.5deg); }
	#laserWrap .laser-ray:nth-child(26) { transform: rotate(13.5deg);  }
	#laserWrap .laser-ray:nth-child(27) { transform: rotate(-12.3deg); }
	#laserWrap .laser-ray:nth-child(28) { transform: rotate(12.3deg);  }
	#laserWrap .laser-ray:nth-child(29) { transform: rotate(-11.2deg); }
	#laserWrap .laser-ray:nth-child(30) { transform: rotate(11.2deg);  }
	#laserWrap .laser-ray:nth-child(31) { transform: rotate(-10.2deg); }
	#laserWrap .laser-ray:nth-child(32) { transform: rotate(10.2deg);  }
	#laserWrap .laser-ray:nth-child(33) { transform: rotate(-9.3deg);  }
	#laserWrap .laser-ray:nth-child(34) { transform: rotate(9.3deg);   }
	#laserWrap .laser-ray:nth-child(35) { transform: rotate(-8.5deg);  }
	#laserWrap .laser-ray:nth-child(36) { transform: rotate(8.5deg);   }
	#laserWrap .laser-ray:nth-child(37) { transform: rotate(-7.7deg);  }
	#laserWrap .laser-ray:nth-child(38) { transform: rotate(7.7deg);   }
	#laserWrap .laser-ray:nth-child(39) { transform: rotate(-7.0deg);  }
	#laserWrap .laser-ray:nth-child(40) { transform: rotate(7.0deg);   }
	/* glow-dot 모바일 200% */
	#gd1,#gd2,#gd3,#gd4,#gd5,#gd6,#gd7,#gd8,
	#gd9,#gd10,#gd11,#gd12,#gd13,#gd14,#gd15,#gd16 { width: 12vw; height: 12vw; }

	/* iOS Safari vh 버그 대응: dvh(실제 보이는 뷰포트) 사용 | 1:2 비율 */
	#titleWrap {
		height: calc(100% - 66.67dvh);
	}
	#lightstick {
		width: 35.75dvh;  /* 430÷802 × 66.67 */
		height: 66.67dvh;
	}
	#lightstick_on {
		width: 35.75dvh;
		height: 66.67dvh;
	}
	#lightstick_aura {
		bottom: 19.60dvh;
		width: 58.29dvh;
		height: 58.29dvh;
	}
}