@charset "utf-8";

/* 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: cover;
  background-position: center top;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 15rem;
}
.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 10px 30px 0 rgba(0, 0, 0, 0.05);
}
/* 선택하기 */
.wrap{
  width: 100%;
  height: 100vh;
  background: #F3F3F3;
}
.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;
}
.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;
}
/* 카테고리 리스트 */
.category-list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin:20px 0 20px;}

/* 접근성을 위해 체크박스는 시각적으로 숨김 */
.category-check{
position:absolute; width:1px; height:1px; padding:0; margin:-1px; 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;
width: 280px; height:280px; border-radius:14px; 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(100%) brightness(.75);
}
.category-item::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); transition: background .2s ease}
.category-text{color: #FFF;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Paperlogy;
  font-size: 40px;
  font-weight: 500;
  line-height: 100%; /* 40px */
  letter-spacing: -1.6px;}


/* 호버 */
.category-item:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12); }


/* 선택됨: 체크 + 라벨 조합 */
.category-check:checked + .category-item{
filter:none; outline:8px solid var(--colorD42A54); outline-offset:0;
}
.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:10px; left:10px; width:55px; height:55px; border-radius:999px;
background:var(--colorD42A54); color:#fff; font-size:32px; font-weight:800; display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 10px 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.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.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: 0 3.75rem;
  gap: 2rem;
  background: #F3F3F3;
  width: 100%;
  position: absolute;
  bottom: 2rem;
}
.btn-prev{
  display: flex;
  width: 35%;
  height: 140px;
  padding: 30px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #737373;
  font-size: 48px;
  font-weight: 600;
  line-height: 100%; /* 48px */
  letter-spacing: -2.4px;
  border-radius: 99px;
  background: #FFF;
}
.btn-next{
  display: flex;
  width: 65%;
  height: 140px;
  padding: 30px 10px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex: 1 0 0;
  color: #FFF;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -2.4px;
  border-radius: 99px;
  background: #999;
}
.btn-next.active{
  background: var(--colorD42A54);
}

/* 한가지 선택 */
/* 라디오 숨기기 (접근성 유지) */
.concept-radio{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; 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:10px; left:10px; width:28px; height:28px; border-radius:999px;
  background:var(--colorD42A54); color:#fff; font-size:18px; line-height:28px; 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:8px solid var(--colorD42A54); outline-offset:0;


  }
  .concept-radio:checked + .category-item::after{ background:rgba(0,0,0,.12) }
  .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);}

/* 반응형 */




/* 인증 및 동의 */
.container{
  padding: 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.25rem;
  font-weight: 300;
  line-height: 130%; /* 5.525rem */
  letter-spacing: -0.17rem;
}
.sign .headline strong{
  font-weight: 700;
}
.field{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.field input{
  background: none;
  width: 100%;
  height: 132px;
  color: #000;
font-size: 64px;
font-weight: 600;
line-height: 130%; /* 83.2px */
letter-spacing: -2.56px;
padding-right: 52px;
border-bottom: 4px solid var(--color999);
}
.field input:focus{
  border-bottom: 4px 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: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: url('../img/icon-delete.svg') no-repeat center / 48px 48px;
  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;
}