@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   journey.css — 02 探索 / 03 選擇 / 04 複合 / 05 流程
   ═══════════════════════════════════════════════════════════ */


/* ═══════ 02 探索問題 ═══════ */
.sec-explore .explore__list{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(3,1fr);
}
.sec-explore .explore__item{
  padding:var(--s-4);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
}
.sec-explore .explore__item h3{ font-size:var(--fs-h3); font-weight:600; letter-spacing:.04em }
.sec-explore .explore__item p { margin-top:var(--s-2); font-size:var(--fs-note); color:var(--c-gray-2) }

@media (max-width:900px){ .sec-explore .explore__list{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .sec-explore .explore__list{ grid-template-columns:1fr } }


/* ═══════ 03 選擇問題 ═══════ */
.sec-select .select__options{
  display:grid; gap:var(--s-2);
  grid-template-columns:repeat(3,1fr);
}
.sec-select .select__btn{
  padding:var(--s-3);
  border:1px solid var(--c-line);
  border-radius:var(--r-btn);
  background:var(--c-white);
  font-size:var(--fs-h3); font-weight:600; letter-spacing:.04em;
  text-align:center;
  transition:background var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             color var(--t-hover) var(--ease);
}
.sec-select .select__btn:hover{ border-color:var(--c-accent); color:var(--c-navy) }
.sec-select .select__btn[aria-expanded="true"]{
  background:var(--c-pink); border-color:var(--c-accent); color:var(--c-navy);
}

.sec-select .select__panels{ margin-top:var(--s-5) }
.sec-select .select__panel{
  max-width:840px; margin-inline:auto;
  padding:var(--s-5);
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  text-align:center;
}
.sec-select .select__panel[hidden]{ display:none }
.sec-select .select__panel h3{ font-size:var(--fs-h3); font-weight:600; letter-spacing:.04em }
.sec-select .select__panel p { margin-top:var(--s-2); line-height:var(--lh-base) }
.sec-select .select__panel a { margin-top:var(--s-3); display:inline-block }

@media (max-width:900px){ .sec-select .select__options{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .sec-select .select__options{ grid-template-columns:1fr } }


/* ═══════ 04 複合肌膚問題 ═══════ */
.sec-combo .combo__list{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(3,1fr);
}
.sec-combo .combo__item{
  padding:var(--s-4);
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  display:flex; flex-direction:column; gap:var(--s-2);
}
.sec-combo .combo__item h3{ font-size:var(--fs-h3); font-weight:600; letter-spacing:.04em }
.sec-combo .combo__item p { font-size:var(--fs-note); color:var(--c-gray-2); flex:1 }

@media (max-width:900px){ .sec-combo .combo__list{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .sec-combo .combo__list{ grid-template-columns:1fr } }


/* ═══════ 05 保養流程 ═══════ */
.sec-routine .routine__steps{
  display:grid; gap:var(--s-2);
  grid-template-columns:repeat(3,1fr);
  position:relative;
}
.sec-routine .routine__step{
  position:relative;
  padding:var(--s-4);
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  text-align:center;
}
.sec-routine .routine__no{
  display:inline-grid; place-items:center;
  min-width:88px; height:40px; padding-inline:var(--s-2);
  margin-bottom:var(--s-3);
  border-radius:var(--r-pill);
  background:var(--c-pink); color:var(--c-navy);
  font-family:var(--f-en); font-size:var(--fs-note); font-weight:600; letter-spacing:.08em;
}
.sec-routine .routine__step h3{ font-size:var(--fs-h3); font-weight:600; letter-spacing:.04em }
.sec-routine .routine__step p { margin-top:var(--s-2); font-size:var(--fs-note); color:var(--c-gray-2) }

/* 步驟之間的箭頭 */
.sec-routine .routine__step::after{
  content:"→";
  position:absolute; top:50%; right:calc(var(--s-2) * -1);
  transform:translate(50%,-50%);
  color:var(--c-gray-2); font-size:20px;
}
.sec-routine .routine__step:last-child::after{ display:none }

.sec-routine .routine__note{
  margin-top:var(--s-5);
  text-align:center;
  font-size:var(--fs-body);
}

@media (max-width:900px){
  .sec-routine .routine__steps{ grid-template-columns:1fr; gap:var(--s-4) }
  .sec-routine .routine__step::after{
    content:"↓";
    top:auto; right:auto; bottom:calc(var(--s-4) * -1); left:50%;
    transform:translate(-50%,50%);
  }
}