@charset "utf-8"; 

/* 실제 키오스크에서 요소 크기 조정할 때 */
html { 
 font-size: 200%; 
 }

/* btn */
button.btn, a.btn { 
 display: flex; 
 border-radius: 999px; 
 } 

.btn-primary { 
 display: flex; 
 padding: 1.875rem 0.625rem; 
 justify-content: center; 
 align-items: center; 
 border-radius: 6.1875rem; 
 background: #D42A54; 
 } 
.btn-secondary { 

 } 
.btn-outline { 

 } 
.w45 { 
 width: 45rem; 
 } 
/* 시작하기 */
.container.start { 
 width: 100%; 
 height: 100vh; 
 background-image: url(../img/img_intro_bg.png); 
 background-repeat: no-repeat; 
 background-size: contain; 
 background-position: center top; 
 display: flex; 
 justify-content: center; 
 align-items: flex-end; 
 padding-bottom: 15rem; 
 background-color: #000; 
 } 
.container.start .btn { 
 font-family: 'Paperlogy'; 
 font-weight: 700; 
 color: #FFF; 
 font-size: 5rem; 
 font-weight: 700; 
 letter-spacing: -0.2rem; 

 display: flex; 
 width: 45rem; 
 padding: 1.875rem 0.625rem; 
 justify-content: center; 
 align-items: center; 
 gap: 0.625rem; 
 border-radius: 6.1875rem; 
 background: #D42A54; 
 } 
/* 헤더 */
.header { 
 width: 100%; 
 display: flex; 
 height: 7.5rem; 
 padding: 0 3.75rem; 
 flex-direction: column; 
 justify-content: center; 
 align-items: flex-start; 
 gap: 0.625rem; 
 flex-shrink: 0; 
 background: #FFF; 
 box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.05); 
 } 
/* 선택하기 */
.wrap { 
 width: 100%; 
 min-height: 100vh;
 background: #F3F3F3; 
 position: relative; 

 } 
 @media (max-width:1920px){
  .wrap { 
 width: 100%; 
 min-height: auto;
 background: #F3F3F3; 
 position: relative; 
 } 
 }
.container { 
 padding: 0 3.75rem; 
 } 
.headline .chip-today { 
 width: 16.4rem; 
 height: 12.45rem; 
 flex-shrink: 0; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 background: url(../img/img_today.png) no-repeat center center; 
 background-size: contain; 
 } 
.flex-center.col { 
 display: flex; 
 align-items: center; 
 flex-direction: column; 
 } 
.headline { 
 text-align: center; 
 display: flex; 
 align-items: center; 
 flex-direction: column; 
 } 
.headline .title { 
 color: #262626; 
 font-size: 3.75rem; 
 font-weight: 300; 
 line-height: 130%; /* 4.875rem */
 letter-spacing: -0.15rem; 
 } 
.headline .title.bold { 
 font-weight: 700; 
 } 
/* 카테고리 리스트 */
#select { 
 padding-bottom: 8rem; 
 position: relative; 
 } 
/* 키오스크 사이즈 */
.category-list { display:grid; 
 grid-template-columns: repeat(3, calc((100vw - 7.5rem - (1.25rem * 2)) / 3)); 
 justify-content: center; 
 gap:1.25rem; margin:1.25rem 0 1.25rem; 
 /* padding-bottom: 8rem; */
 } 
@media (max-width:1920px) { 
 .category-list { 
 grid-template-columns: repeat(3, calc((440px - 40px - (1.25rem * 2)) / 3)); 
 } 
 } 
@media (max-width:440px) { 
 .category-list { 
 grid-template-columns: repeat(3, calc((100vw - 40px - (1.25rem * 2)) / 3)); 
 } 
 } 
/* 접근성을 위해 체크박스는 시각적으로 숨김 */
.category-check { 
position:absolute; width:0.0625rem; height:0.0625rem; padding:0; margin:-0.0625rem; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; 
 } 

/* 카테고리 라벨 */
.category-item { 
position:relative; display:flex; align-items:center; justify-content:center; 
aspect-ratio: 1 / 1; border-radius:0.875rem; overflow:hidden; cursor:pointer; user-select:none; 
background:#222; background-size:cover; background-position:center; box-shadow:var(--shadow); 
transition:transform .2s ease, box-shadow .2s ease; 
filter: grayscale(90%) brightness(.95); 
 } 
.category-item::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.1); transition: background .2s ease } 
.category-text { color: #FFF; 
 text-align: center; 
 text-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25); 
 font-family: Paperlogy; 
 font-size: 2.5rem; 
 font-weight: 500; 
 line-height: 100%; /* 40px */
 letter-spacing: -0.1rem; } 


/* 호버 */
.category-item:hover { transform:translateY(-0.0625rem); box-shadow:0 0.625rem 1.5rem rgba(0,0,0,.12); } 


/* 선택됨: 체크 + 라벨 조합 */
.category-check:checked + .category-item { 
filter:none; border:0.5rem solid var(--colorD42A54); outline-offset:0; 
position: relative; 
 } 
.category-check:checked + .category-item::after { background:rgba(0,0,0,0); } 


/* 선택 순서 배지 */
.category-item[data-order]::before { 
content:attr(data-order); 
position:absolute; z-index:2; top:0.625rem; left:0.625rem; width:3.4375rem; height:3.4375rem; border-radius:999px; 
background: #D42A54; color:#fff; font-size:2rem; font-weight:800; display:flex; align-items:center; justify-content:center; 
box-shadow:0 0.25rem 0.625rem rgba(230,57,70,.28); 
 } 
/* 배경 이미지 매핑 (이미지 경로만 바꿔 끼우면 됨) */
.category--bakery { background-image:url('../img/category--bakery.png'); } 
.category--breadshop { background-image:url('../img/category--breadshop.png'); } 
.category--cafe { background-image:url('../img/category--cafe.png'); } 
.category--lounge { background-image:url('../img/category--lounge_2.png'); } 
.category--pub { background-image:url('../img/category--pub.png'); } 
.category--workshop { background-image:url('../img/category--workshop.png'); } 
.category--wellness { background-image:url('../img/category--wellness.png'); } 
.category--restaurant { background-image:url('../img/category--restaurant_2.png'); } 
.category--pocha { background-image:url('../img/category--pocha.png'); } 
.category--viewcafe { background-image:url('../img/category--viewcafe.png'); } 
.category--exhibition { background-image:url('../img/category--exhibition.png'); } 

/* 하단 액션 영역 */
.actions { 
 display: flex; 
 padding: 1rem 3.75rem; 
 gap: 2rem; 
 background: #F3F3F3; 
 width: 100%; 
 position: absolute; 
 bottom: 0rem; 
 } 
.btn-prev { 
 display: flex; 
 width: 35%; 
 height: 8.75rem; 
 padding: 1.875rem 0.625rem; 
 justify-content: center; 
 align-items: center; 
 gap: 0.625rem; 
 flex-shrink: 0; 
 color: #737373; 
 font-size: 3rem; 
 font-weight: 600; 
 line-height: 100%; /* 48px */
 letter-spacing: -0.15rem; 
 border-radius: 99px; 
 background: #FFF; 
 } 
.btn-next { 
 display: flex; 
 width: 65%; 
 height: 8.75rem; 
 padding: 1.875rem 0.625rem; 
 justify-content: center; 
 align-items: center; 
 gap: 1.25rem; 
 flex: 1 0 0; 
 color: #FFF; 
 font-size: 3rem; 
 font-weight: 700; 
 letter-spacing: -0.15rem; 
 border-radius: 99px; 
 background: #999; 
 } 
.btn-next.active { 
 background: var(--colorD42A54); 
 } 

/* 한가지 선택 */
/* 라디오 숨기기 (접근성 유지) */
.concept-radio { position:absolute; width:0.0625rem; height:0.0625rem; padding:0; margin:-0.0625rem; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } 
/* 체크 배지: 기본 숨김 */
.concept-radio ~ .category-item::before { 
 content: "\2713"; 
 position: absolute; 
 z-index: 3; 
 top: 0.625rem; 
 left: 0.625rem; 
 width: 3rem; 
 height: 3rem; 
 border-radius: 999px; 
 background: var(--colorD42A54); 
 color: #fff; 
 font-size: 2rem; 
 line-height: 3rem; 
 text-align: center; 
 font-weight: 900; 
 transform: scale(.8); 
 opacity: 0; 
 transition: transform .16s ease, opacity .16s ease; 
 } 
 
 /* 선택됨: 라디오 + 라벨 */
 .concept-radio:checked + .category-item { 
 /* filter:grayscale(0%) brightness(1); 
 box-shadow: var(--shadow), inset 0 0 0 4px var(--accent); */

 filter:none; outline:0.5rem solid var(--colorD42A54); outline-offset:0; 


 } 
 .concept-radio:checked + .category-item::after { background:rgba(0,0,0,0) } 
 .concept-radio:checked + .category-item::before { transform:scale(1); opacity:1 } 
 
 
 /* 배경 이미지 매핑 */
 .category--photo { background-image:url('../img/category--photo.png'); } 
 .category--healing { background-image:url('../img/category--healing.png'); } 
 .category--food { background-image:url('../img/category--food.png'); } 
 .category--experience { background-image:url('../img/category--experience.png'); } 
 .category--nightlife { background-image:url('../img/category--nightlife.png'); } 
 
 
 /* CTA */

 .btn-cta { 
 width: 100%; 
 border-radius: 6.1875rem; 
 background: linear-gradient(90deg, #FF987E 0%, #D42A5A 100%); 
 height: 11.25rem; 

 color: #FFF; 
 font-family: Paperlogy; 
 font-size: 4rem; 
 font-style: normal; 
 font-weight: 300; 
 line-height: normal; 


 } 
 .btn-cta strong { 
 color: #FFF; 
 font-weight: 700; 
 } 
 .btn-cta[disabled] { background: var(--color999); } 

/* 반응형 */



/* 수정 0917 */
/* 인증 및 동의 */
.container { 
 padding: 0 3.75rem; 
 } 
.container.sign { 
 text-align: left; 
 } 
.sign .headline { 
 text-align: center; 
 display: flex; 
 align-items: flex-start; 
 flex-direction: column; 
 color: #262626; 
 font-size: 4.5rem; 
 font-weight: 300; 
 line-height: 130%; /* 5.525rem */
 letter-spacing: -0.17rem; 
 margin-top: 8rem; 
 } 
.sign .headline strong { 
 font-weight: 700; 
 } 
.field { 
 width: 100%; 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 position: relative; 
 margin: 4rem 0; 
 gap: 2rem; 
 } 
.field .f-num { 
 width: 20%; 
 } 
.field input { 
 background: none; 
 width: 100%; 
 height: 10rem; 
 color: #000; 
 font-size: 4rem; 
 font-weight: 600; 
 line-height: 130%; /* 83.2px */
 letter-spacing: -0.16rem; 
 padding-right: 3.25rem; 
 border-bottom: 0.25rem solid var(--color999); 
 } 
.field input:focus { 
 border-bottom: 0.25rem solid var(--colorD42A54); 
 } 
.field input::placeholder { 
 color: #909090; 
 font-size: 2.5rem; 
 font-weight: 300; 
 line-height: 130%; /* 3.25rem */
 letter-spacing: -0.1rem; 
 } 


/* */

.field .clear-btn { 
 position: absolute; 
 right: 0; 
 top: 50%; 
 transform: translateY(-50%); 
 width: 3rem; 
 height: 3rem; 
 border: 0; 
 border-radius: 50%; 
 background: url('../img/icon-delete.svg') no-repeat center / 3rem 3rem; 
 cursor: pointer; 
 display: none; /* 기본은 숨김 */
 } 

/* 값이 있으면 보이기(순수 CSS) */
.field input:not(:placeholder-shown) + .clear-btn { 
 display: inline-block; 
 } 


.actions.fill { 
 padding: 0; 
 bottom: 0; 
 background: var(--colorD42A54) !important; 
 } 
.actions.fill button { 
 border-radius: 0; 
 background: var(--colorD42A54) !important; 
 } 



.resend_wrap { 
 display: flex; 
 justify-content: space-between; 
 margin-top: 2rem; 
 } 
.time-label , .btn-resend { 
 color: #D42A54; 
 font-size: 2.4rem; 
 } 

/* 선택화면 */
#select .new__title img { width: 100%; } 
#select .new__title { 
 width: 80vw; 
 padding: 3rem 0; 
 } 
/* 기본 */
/* 레이아웃 제어 */
html, body { font-size: 50%; } 
@media (min-width:1921px) { 
 html, body { font-size: 200% !important } 
 } 
@media (max-width:1920px) { 
 html, body { font-size: 40%; } 
 body { background: #f9f9f9; } 
 .wrap { 
 max-width: 440px; 
 margin: 0 auto; 
 /* overflow-y: scroll; */
 min-height: 100vh; 
 } 


 #select .new__title { width: 100%; padding: 3rem 0; } 

 } 
/* 모바일 (폰 중심) */
@media (max-width: 960px) { 
 html, body { 
 font-size: 40%; 
 overflow-y: scroll; 
 background: #f9f9f9; 
 max-height: 100vh; 
 } 
.container.start { 
 background-size: contain; 
 padding-bottom: 8rem; 
 background-color: #000; 
 } 
.headline .chip-today { 
 background-size: contain; 
 } 
.container { 
 padding: 0 20px; 
 } 
/* .category-item { 
 width: 19rem; 
 height: 19rem; 
 } */
.container.start { 
 padding-bottom: 8rem; 
 } 
.category-item[data-order]::before { 
 top: 0.2rem; 
 left: 0.2rem; 
 width: 3rem; 
 height: 3rem; 
 } 
.btn-cta { 
 height: 10rem; 
 } 
/* .actions { 
 bottom: 0rem; 
 } */
.sign .headline { 
 font-size: 3.5rem; 
 } 
.time-label , .btn-resend { 
 font-size: 2rem; 
 } 
.actions { 
 padding: 2.4rem 3.75rem; 
 bottom: 0rem; 
 } 
.category-list { 
 padding-bottom: 6rem; 
 } 

 } 



/* 가로 PC에서 볼 때 */
/* @media (max-width:1920px) { 
 .wrap { 
 max-width: 440px; 
 margin: 0 auto; 
 } 
 .container.start { 
 padding-bottom: 4rem; 
 } 
 } */
/* 모바일용 키오스크 반응형 */
/* @media (max-width:768px) { 
 .container.start { 
 background-size: contain; 
 background-color: #000; 
 } 
.headline .chip-today { 
 background-size: contain; 
 } 
.category-item { 
 width: 13rem; 
 height: 13rem; 
 } 

.category-item[data-order]::before { 
 top: 0.2rem; 
 left: 0.2rem; 
 width: 3rem; 
 height: 3rem; 
 } 
.btn-cta { 
 height: 8rem; 
 } 
.actions { 
 bottom: 4rem; 
 } 
.sign .headline { 
 font-size: 3.5rem; 
 } 
.time-label , .btn-resend { 
 font-size: 2rem; 
 } 
 } */




/* 추가화면 */
/* 키오스크 리스트화면 */
.main__title { 
 display: inline-flex; 
 padding: 2.5rem 0.625rem; 
 justify-content: center; 
 align-items: center; 
 gap: 0.625rem; 
 color: #262626; 
 font-size: 3rem; 
 font-weight: 700; 
 line-height: 100%; /* 3rem */
 letter-spacing: -0.15rem; 
 text-align: center; 
 width: 100%; 
 } 
.list__wrap { 
 padding: 0 2.5rem; 
 position: relative; 
 width: 100vw; 
 overflow: hidden; 
 height: calc(100vh - 7.5rem); 
 } 
.kiosk__wrap { 

 } 
.h100vh { 
 height: 100vh; 
 } 
/* 선택 결과 */
 .recommend-box { 
 display: flex; 
 width: 100%; 
 flex-direction: column; 
 align-items: flex-start; 
 border-radius: 1.25rem; 
 background: #D42A54; 
 box-shadow: 0 10px 30px 0 rgba(255, 50, 84, 0.50); 
 
 } 
 .recommend-box h2 { 
 padding: 1.5rem; 
 color: #FFF; 
 font-size: 2.5rem; 
 font-weight: 700; 
 line-height: 130%; /* 2.6rem */
 letter-spacing: -0.08rem; 
 } 
 .tags { 
 display: flex; 
 width: 100%; 
 padding: 1.5rem; 
 flex-direction: column; 
 align-items: flex-start; 
 gap: 2.5rem; 
 border-radius: 0 0 1.25rem 1.25rem; 
 background: linear-gradient(180deg, #EB436D 0%, #D42A54 100%); 
 } 
 .tags > div { 
 display: flex; 
 flex-direction: column; 
 align-items: flex-start; 
 gap: 0.625rem; 
 } 
 .tags p { 
 color: #FFF; 
 font-size: 2rem; 
 font-weight: 500; 
 line-height: 130%; /* 2.925rem */
 letter-spacing: -0.1125rem; 
 } 
 .tags span { 
 display: flex; 
 padding: 0.75rem 1.25rem; 
 justify-content: center; 
 align-items: center; 
 gap: 0.625rem; 
 border-radius: 0.5rem; 
 background: #FFF; 
 color: #4E4E4E; 
 font-size: 2rem; 
 font-weight: 500; 
 line-height: 100%; /* 2rem */
 letter-spacing: -0.1rem; 
 } 
.label-wrap { 
 display: flex; 
 gap: 0.625rem; 
 } 
/* Card */
.store-wrap { 
 display: flex; 
 flex-wrap: wrap; 
 align-items: center; 
 gap: 1.25rem; 
 margin-top: 3.5rem; 
 } 
.card { 
 width: 14rem; 

 } 
.card__media { 
 position:relative; height:130px; overflow:hidden; 
 border-radius: 8px; 
 } 
.card__bg { 
 width:100%; 
 height:100%; 
 background-image:
 linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 100%),
 var(--img); 
 background-position: 50% 50%, 50% 50%; 
 background-size: cover, cover; 
 background-repeat: no-repeat, no-repeat; 
 border-radius:8px; 

 height: 9.9375rem; 
 padding: 0.75rem; 
 flex-direction: column; 
 justify-content: flex-end; 
 align-items: flex-start; 
 gap: 0.625rem; 
 aspect-ratio: 80/53; 



 } 
.card__ad { 
 position:absolute; top:10px; left:10px; 
 border-radius: 4px; 
 background: #FB5656; 
 padding: .4rem 0.8rem; 
 color: #FFF; 
 font-size: 1rem; 
 font-weight: 900; 
 line-height: 100%; /* 12px */
 letter-spacing: -0.48px; 
 } 
.meta { 
 position:absolute; left:1rem; bottom:1rem; 
 display:flex; align-items:center; gap:.5rem; 
 text-shadow:0 1px 6px rgba(0,0,0,.45); 
 color: #FFF; 
 font-size: 1rem; 
 font-weight: 600; 
 line-height: 100%; /* 16px */
 letter-spacing: -0.64px; 
 display: none; 
 } 
.meta span { 
 color: #FFF; 
 font-size: 1.25rem; 
 font-weight: 600; 
 line-height: 100%; /* 1.25rem */
 letter-spacing: -0.05rem; 
 } 
.like { 
 display: flex; 
 /* width: 3.75rem; */
 justify-content: flex-end; 
 align-items: center; 
 gap: 0.125rem; 
 flex-shrink: 0; 
 color: #EE1337; 
 font-size: 1.5rem; 
 font-weight: 700; 
 line-height: 100%; /* 1rem */
 letter-spacing: -0.05rem; 
 } 
.card__body { 
 display: flex; 
 padding: 0.625rem 0; 
 flex-direction: column; 
 align-items: flex-start; 
 gap: 1.25rem; 
 align-self: stretch; 
 } 
.card__title { 
 width: 100%; 
 display: flex; 
 justify-content: space-between; 
 align-items: flex-start; 
 } 
 .card__title h2 { 
 color: #262626; 
 font-size: 1.5rem; 
 font-weight: 700; 
 line-height: 130%; /* 1.95rem */
 letter-spacing: -0.075rem; 
 
 /* 두 줄 말줄임 */
 display:-webkit-box; 
 -webkit-line-clamp:2; 
 -webkit-box-orient:vertical; 
 overflow:hidden; 
 text-overflow:ellipsis; 
 word-break:keep-all; 
 overflow-wrap:anywhere; 
 } 
.chips { 
 display: flex; 
 align-items: center; 
 align-content: center; 
 gap: 0.25rem; 
 align-self: stretch; 
 flex-wrap: wrap; 
 } 
.chip { 
 display: flex; 
 padding: 0.625rem; 
 justify-content: center; 
 align-items: center; 
 gap: 0.625rem; 
 border-radius: 0.25rem; 
 background: #F3F3F3; 
 color: #808080; 
 font-size: 1rem; 
 font-weight: 500; 
 line-height: 100%; /* 1rem */
 letter-spacing: -0.05rem; 
 } 
/* 놀거리 태그 */
.tag-list { 
 display: flex; 
 align-items: flex-start; 
 flex-wrap: wrap; 
 gap: 0.25rem; 
 } 
.tag-list > span { 
 display: flex; 
 padding: 0.5rem 0.75rem; 
 justify-content: center; 
 align-items: center; 
 gap: 0.5rem; 
 border-radius: 1.875rem; 
 border: 1px solid #EB083C; 
 background: #FFF; 
 box-shadow: 2px 2px 5px 0 rgba(218, 39, 58, 0.10); 
 color: #EB083C; 
 font-size: 0.75rem; 
 font-weight: 600; 
 line-height: 100%; /* 0.75rem */
 } 


/* 2열 그리드 */
.card-grid { 
display:grid; grid-template-columns:repeat(2, 1fr); 
gap:12px; 
 } 

.bt__gradi { 
 position: absolute; 
 bottom: 0; 
 width: 100vw; 
 } 
.bt__gradi .link_btn { 
 display: flex; 
 width: 100%; 
 height: 10.4375rem; 
 padding: 1.875rem 0.625rem; 
 justify-content: center; 
 align-items: center; 
 gap: 1.25rem; 
 flex-shrink: 0; 
 color: #FFF; 
 font-size: 4rem; 
 font-weight: 700; 
 letter-spacing: -0.2rem; 
 border-radius: 1.25rem; 
 background: #D42A54; 
 position: absolute; 
 bottom: 0rem; 
 } 
#appSplash { display:block; } 
#appMain { display:none; } 

.fade { animation: fadeIn .3s ease; } 
@keyframes fadeIn { 
 from { opacity: 0; transform: translateY(4px); } 
 to { opacity: 1; transform: translateY(0); } 
 } 

.modal__panel p { 
 color: #000; 
 text-align: center; 
 font-size: 2.4rem !important; 
 font-weight: 400; 
 line-height: 130%; 
 letter-spacing: -1.28px; 
 padding: 2.5rem 0; 
 } 
/* 모바일 수정 */
@media (max-width:768px) { 
 section.categories { 
 /* max-height: 78vh; */
 overflow: hidden; 
 /* overflow-y: scroll; */
 min-height: calc(100vh - 30rem); 
 } 

.field .f-num { 
 width: 26%; 
 font-size: 3rem; 
 height: 8rem; 
 } 



 } 
@media (max-width:375px) { 
 /* .category-item { 
 width: 14rem; 
 height: 14rem; 
 } */

 } 
/* 카카오 버튼 */
.kakao_btn { 
 font-size: 3rem; 
 font-weight: 600; 
 line-height: 150%; 
 display: flex; 
 align-items: center; 
 gap: 1rem; 
 display: flex; 
 width: 100%; 
 height: 14rem; 
 padding: 0 2.8rem; 
 justify-content: center; 
 align-items: center; 
 border-radius: 1.2rem; 
 background: #FEE500; 
 } 
@media (max-width:768px) { 
 .kakao_btn { 
 font-size: 18px; 
 font-weight: 600; 
 line-height: 150%; 
 display: flex; 
 align-items: center; 
 gap: 1rem; 
 display: flex; 
 width: 100%; 
 height: 60px; 
 padding: 0 2.8rem; 
 justify-content: center; 
 align-items: center; 
 border-radius: .8px; 
 background: #FEE500; 
 } 
 .kakao_btn svg { 
 width: 36px; 
 height: 36px; 
 } 


 } 


/* 하단 버튼 영역 수정 */

#select .actions { 
 position: fixed;
 display: flex;
 padding: 1rem 3.75rem;
 gap: 2rem;
 background: #F3F3F3;
 width: 100%;
 bottom: 0rem;
 } 

@media (max-width:1920px) { 
 #select .actions { 
 position: absolute; 
 max-width: 440px; 
 margin: 0 auto; 
 
 } 
 .actions {
  display: flex;
  padding: 1rem 3.75rem;
  gap: 2rem;
  background: #F3F3F3;
  width: 100%;
  position: absolute;
  bottom: 0rem;
  max-width: 440px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}
 } 
#select .categories { 
  min-height: calc(100vh - 30rem); 
 } 

/* 결과값 안내 로딩 */
#kakaoLoading.intro-screen { 
 width: 100%; 
 min-block-size: 100dvh; 
 display: grid; 
 place-items: center; 
 background: #f4f4f4; 
 gap: 4rem; 
 margin: 0 auto; 
 padding-top: 4rem; 
 } 

#kakaoLoading .intro__inner { 
 width: 100%; 
 margin: 0 auto; 
 text-align: center; 
 display: grid; 
 gap: clamp(1rem, 4dvh, 3rem); 
 } 

#kakaoLoading .intro__title { 
 font-size: 4.8rem; 
 font-weight: 800; 
 line-height: 1.2; 
 color: #303030; 
 margin-bottom: 4rem; 
 } 
#kakaoLoading .intro__visual { width: 100%; display: flex; justify-content: center; align-items: center; } 
#kakaoLoading .intro__visual img { 
 display: block; 
 width: 100%; 
 max-width: 100%; 
 height: auto; 
 object-fit: contain; 
 margin: 0 auto; 
 max-width: 50rem; 
 } 

#kakaoLoading .intro__message { 
 font-size: 4rem; 
 line-height: 1.35; 
 color: var(--colorD42A54); 
 font-weight: 800; 
 } 

#kakaoLoading .intro__count { 
 margin-top: clamp(1rem, 3.6vw, 4rem); 
 font-size: 2.4rem; 
 color: #111; 
 } 
#kakaoLoading .intro__count #sec { 
 font-weight: 800; 
 color: var(--colorD42A54); 
 text-decoration: underline; 
 } 
@media (max-width:1920px) { 
 #kakaoLoading.intro-screen { max-width: 440px; } 
 #kakaoLoading .intro__inner { 
 width: auto; 
 } 
 
 } 
@media (max-width:360px) { 
 #kakaoLoading .intro__visual img { 
 max-width: 40rem; 
 } 
 #kakaoLoading .intro__message { 
 font-size: 3rem; 
 } 
 }