/********************************
root
*******************************/
    :root{
      --brand:#4a70ae;       /* 포인트 색 */
      --brand-2:#2e4c7b;        /* 보조 색 */
      --ink:#1f2330;            /* 본문 색 */
      --muted:#8a93a6;          /* 보조 텍스트 */
      --bg:#fffaf8;             /* 배경 */
      --card:#ffffff;           /* 카드 배경 */
      --border:#c3cad7;         /* 경계선 */
      --radius:16px;
      --header-h:114px;          /* 고정 헤더 높이 */
      --shadow:0 8px 24px rgba(0,0,0,.08);
    }

    /* ===== 모바일 제외 ===== */
    @media (min-width: 981px){

	}



    /* ===== 모바일 하단 탭 ===== */
    @media (max-width: 980px){
    :root{
      --header-h:80px;
	}
}

* {box-sizing:boder-box;}



body,
html {  overflow-x:hidden !important; 
  overflow-y:visible;}

/*====================
body - paging_event
====================*/
.paging_event {    font-family: 'Moneygraphy-Rounded';
background-color:#fffac2; overflow-x:hidden;
background-image:url('img/linebg.png');
background-repeat:repeat;
background-size:23px auto ;
background-position:top left; position:relative; 
}



.paging_event:before {background:url('/daldal/img/bg022.png');
left:-3%; width:26%;  top:130px; height:100vw;}

.paging_event:after {background:url('/daldal/img/bg011.png');
right:-3%; width:27%; top:640px; height:100vw;}

.paging_event:before,
.paging_event:after {
content:''; position:absolute; z-index:-1;
background-position:top left;
background-repeat:no-repeat;
background-size:100% auto;
}






/* 	pad */
	@media (min-width:641px) and (max-width:1023px) {

.paging_event:before {
			left:-50px; width:270px;  top:180px; }
.paging_event:after {
			right:-50px; width:240px; top:290px; }




	 	}

/* 	mobile */
	@media (max-width:640px) {

.paging_event:before {
			left:-70px; width:140px;  top:90px; }
.paging_event:after {
			right:-40px; width:140px; top:310px; }


	 	}













/*====================
site-header
====================*/

    .site-header{position:fixed;top:0; width:100%;
	z-index:50;  display:flex;align-items:center; height:var(--header-h); overflow:hidden;
	justify-content:space-between; backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
    .site-header nav {display:flex; width:100%; gap:0; }
    .site-header nav a {flex:1;  color:#fff;  height:100vh; flex-direction:column;
	background: #7692bf; border-left:1px solid rgba(0,0,0,0.2);
	word-break:keep-all; padding:15px 10px;  font-size:clamp(17px, 2.5vw, 30px);
	align-items: center; display: flex; justify-content: center; text-align:Center;}

    .site-kicker{font-size:.875rem;color:var(--muted)}


    /* 진행바(읽기/스크롤) */
    .progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transform-origin:left;transform:scaleX(0)}


    /* ===== 모바일 제외 ===== */
    @media (min-width: 981px){
    .progress{height:11px;}

	}




    /* ===== 모바일 하단 탭 ===== */
    @media (max-width: 980px){

}





 /* =============== 
	본문 레이아웃
===== ===== =====  */

    /* ===== 모바일 제외 ===== */
    @media (min-width: 981px){

	}




    /* ===== 모바일 하단 탭 ===== */
    @media (max-width: 980px){

}




    #content{ box-sizing:border-box; }
section {padding-bottom:clamp(30px, 2.5vw, 90px);}
	article,
    section{scroll-margin-top:calc(var(--header-h) + 16px);}

			.section h2 img {max-width:700px; width:90%;}
				.section h2 {
				  position: relative;
				  text-align: center;
				  color: #fff;
				  width: 100%;
				   padding:30px 0px;
				}


    /* ===== 모바일 하단 탭 ===== */
    @media (max-width: 980px){
				.section h2 {
				   padding:10px 0px;
				}
}


			/* 	.section h2::before {
				  content: "";
				  position: absolute;
				  inset: 0;  
				  background: url('img/ribbon.png') no-repeat top center;
				  background-size: 660px auto;
				  z-index: -1;   
				}
				
				#s3.section h2::before {
				  filter: hue-rotate(460deg) saturate(2) brightness(1.2) contrast(0.8)
				} */


article {margin-bottom:20px;}









    /* =============== 
	사이드 플로팅 메뉴
	(데스크탑만) =============== */

    .floating-nav{position:fixed;right:20px;top:160px;z-index:60;width:240px; padding:30px 10px;
	background:url('/daldal/img/race_bg.png') no-repeat top left; background-size:100% 100%;}

    .floating-nav header{display:flex;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(180deg,#fff, #fff5);border-bottom:1px solid var(--border)}
    .floating-nav header .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
    .floating-nav header strong{font-size:.95rem}

    .floating-nav nav{max-height:70vh;overflow:auto;padding:6px 8px}
    .floating-nav ul{list-style:none;margin:0;padding:0}

    .floating-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;  
      border-radius:12px;text-decoration:none;color:var(--ink);border:1px solid transparent}
    .floating-nav  li ul li a {font-size:14px;}


    .floating-nav a .idx{display:inline-grid;place-items:center; 
	width:28px;height:28px;border-radius:10px;background:#f38bb9; border-radius:50%;
	border:1px solid var(--border);font-weight:700;font-size:.85rem;color:#fff}
    .floating-nav a:hover{background:#fff;border-color:var(--border)}

    /* 활성 상태 */
    .floating-nav a[aria-current="true"], .floating-nav a.active{
      background:linear-gradient(180deg,#fff,#fff);border-color:var(--brand-2);box-shadow:0 0 0 3px #ffb86b33 inset
    }


    /* 서브 메뉴 */
    .floating-nav .submenu{margin-left:24px;border-left:2px dashed var(--border);padding-left:10px;display:none}
    .floating-nav .submenu a{padding:8px 10px}
    .floating-nav .submenu a .idx{width:22px;height:22px;  color:#fff; background:#7692bf; opacity:0.7; font-weight:600;font-size:.75rem}
    .floating-nav li.expanded > .submenu{display:block}





    /* ===== 모바일 제외 ===== */
    @media (min-width: 981px){

    #content{padding:30px 310px 30px 20px;}

	}


.inner{
  box-sizing: border-box;
  padding:32px;
}

* {word-break:keep-all;}

    /* ===== 모바일 하단 탭 ===== */
    @media (max-width: 980px){
    #content{padding:30px 30px}


      .floating-nav{display:none}
      main{padding-bottom:120px}
      .mobile-tabs{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.06);padding:10px env(safe-area-inset-right) calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left)}
      .mobile-tabs .wrap{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
      .mobile-tabs button{appearance:none;border:1px solid var(--border);background:#fff;border-radius:14px;padding:10px 12px;font-weight:700}
      .mobile-tabs button[aria-current="true"]{border-color:var(--brand-2);box-shadow:0 0 0 3px #ffb86b33 inset}
      .sheet{position:fixed;left:0;right:0;bottom:0;transform:translateY(100%);transition:transform .28s ease;z-index:80;background:#fff;border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:0 -24px 48px rgba(0,0,0,.18);border:1px solid var(--border)}
      .sheet.open{transform:translateY(0)}
      .sheet header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
      .sheet header strong{font-size:1rem}
      .sheet .body{padding:10px 12px;max-height:45vh;overflow:auto}
      .sheet a{display:block;padding:12px;border-radius:12px;color:var(--ink);text-decoration:none;border:1px solid transparent}
      .sheet a + a{margin-top:8px}
      .sheet a[aria-current="true"]{border-color:var(--brand-2);box-shadow:0 0 0 3px #ffb86b33 inset}

.inner{
  padding:12px;
}


    }

    /* 기타 */
    @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} .sheet{transition:none}}












h1, h2, h3, h4, h5, h6 {line-height:1.6;}

/*====================
공통컨텐츠
====================*/


.card h3 { font-size:clamp(36px, 6.5vw, 70px); letter-spacing:-2px; line-height:1.2; padding-top:10px; padding-bottom:10px;  

color:#25b5e1; font-family: 'memomentKkukKkuk';}
#s3 .card h3 {color:#ff63a7;}

.card h6 {font-size:clamp(36px, 4.5vw, 60px);  margin-top:60px;
/* background:url('/daldal/img/pencil.gif') no-repeat top center;
background-size:auto 80px;; */
  font-family: 'memomentKkukKkuk'; }


.card .period {font-size:clamp(20px, 4.5vw, 40px); padding-top:7px; padding-bottom:7px;  margin-bottom:clamp(10px, 4.5vw, 30px);  line-height:1.5; }
 .period span {font-size:clamp(13px, 4.5vw, 30px);  vertical-align:top;}
#s3 .period {color:#ff63a7; }



#s2 .period  {/*border:4px solid #25b5e1; width:fit-content;  */
/* padding-left:clamp(20px, 4.5vw, 60px); 
padding-right:clamp(20px, 4.5vw, 60px);  */
/* margin-left:auto; margin-right:Auto;  border-radius:50px; */ color:#25b5e1;}




.card h4.topdescin { font-size:clamp(20px, 2.5vw, 40px); border-radius:100px; width:fit-content; padding-top:10px; padding-bottom:10px;
padding-left:clamp(27px, 2.5vw, 40px); margin-top:0px;
padding-right:clamp(27px, 2.5vw, 40px);
letter-spacing:clamp(-1px, 2.5vw, -2px); background:none;
margin-left:auto; margin-right:auto; 
 line-height:1.4;   color:#fff; background:#25b5e1; }
#s3 .card h4.topdescin {background:#ff63a7; color:#fff;  }






.card {font-size:clamp(16px, 2.5vw, 27px); line-height:2;}
    .card{background:var(--card);  text-align:Center;
	border-radius:var(--radius);padding:50px 30px}

.ticon img {max-width:350px; width:70%;}
.ticon2 img {max-width:550px; width:95%;}

.indtailbtn {gap:10px 20px; justify-content: center; padding:30px;}
.indtailbtn a {font-size:clamp(23px, 2.5vw, 45px); border-width:4px; color:#fff; line-height:2.5;
border-style:solid; width:100%; max-width:400px;  border-radius:60px;}
.indtailbtn a:nth-child(1) {
  background: #52aeca;
  border-color:#0e85a8;
}
.indtailbtn a:nth-child(2) {
  background: #ff74af;
  border-color:#d95588;
}





.ranking {display:flex; flex-wrap:wrap; gap:30px;  padding:30px; justify-content: center;}


    @media (max-width: 980px){
.ranking { padding:0px;}


	}

.ranking dl{display: flex; width:300px; height:300px;   gap:0px 0px;
background-image:url('/daldal/img/gift.png'); padding-top:110px;
background-repeat:no-repeat;
background-position:top left;
background-size:100% 100%;
box-sizing:border-box;
flex-wrap: wrap;   justify-content: center; align-items: center; flex-direction: column;}

.ranking dl:nth-child(2n) {background-image:url('/daldal/img/gift2.png');}

.ranking dl dt { line-height:1;  font-size:clamp(17px, 2.5vw, 22px); color:#fff; padding:10px 20px; border-radius:70px; background:rgba(114, 137, 157, 0.5);}
.ranking dl dd {font-size:clamp(20px, 2.5vw, 28px); }

.prepare {color:#777; padding:50px 30px; margin-top:30px; background:#f6f6f6; border-radius:40px;}
.prepare p img {max-width:160px; width:35%;}

ul.dot {display:flex; justify-content: center;  width:100%; flex-wrap:wrap; gap:6px 3%; }
ul.dot li {position:relative;  padding-left:20px; color:#666; word-break:keep-all; line-height:1.5; }
ul.dot li:before {content:''; top:46%; left:0; border-radius:50%; position:absolute; width:6px; height:6px; background:#f38bb9;  }


span.mobilebr{display:none}
    @media (max-width: 980px){
ul.dot {justify-content: left;}
span.mobilebr{display:block}

ul.dot li {text-align:left; }


	}


/* ===== Base ===== */
.step {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding-top: 30px;
  margin: 0;
  gap: 20px 80px;
  counter-reset: step;
}

.step li {
  position: relative;
  width: 250px;
  height: 250px;
  line-height: 1.3;
  border-radius: 50%;
  background: #f0f9ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 중앙정렬 보완 */
  word-break: keep-all;
  text-align: center;
  counter-increment: step;
  padding: 15px;
}

/* 번호 동그라미 */
.step li::before {
  content: counter(step);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #4c9ad9;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* 화살표 */
.step li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  opacity: 0.3;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%234c9ad9'><path stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5'/></svg>") no-repeat center;
  background-size: contain;
}

.mbr{ display:none; }

@media (max-width:650px){
  .mbr{
   display:flex; 
    width:100%;
    height:0;
  }
}


/* ===== Tablet down (너비 줄며 원 크기·간격 조정) ===== */
@media (max-width: 900px) {
  .step {
    gap: 20px 40px;
  }
  .step li {
    width: 210px;
    height: 210px;
  }
  .step li:not(:last-child)::after {
    right: -40px;
    width: 32px;
    height: 32px;
  }
}

/* ===== Mobile (세로 스텝 + 화살표 ↓) ===== */
@media (max-width: 650px) {
  .step {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .step li { 
    width: 170px;
    height: 170px;
    margin: 10px 0px 10px 0px ; /* 불필요 여백 제거 */
  }


.step li::before {

  width: 32px;
  height: 32px;
  font-size: 18px;

}




  .step li:not(:last-child)::after {
    margin-top:115px;
	left:50%;
    transform: translateX(-50%) rotate(90deg); 
    width: 24px;
    height: 24px;
  }
}



    /* ===== 모바일 하단 탭 ===== */
    @media (max-width: 980px){
		.card {padding:30px 25px}


	}


    /* ===== 모바일 하단 탭 ===== */
    @media (max-width: 650px){
.ranking dl{ width:220px; height:220px;  padding-top:80px;
}
ul.dot li{padding-left:10px; }

ul.dot li:before {content:''; top:9px; width:4px; height:4px;  }

	}


/*====================
상단 - s1
====================*/

	#s1 {text-align:center; padding-top:var(--header-h);}
	#s1 img {width:90%; max-width:1100px;}