/* ================================================================
   journey_common.css
   나의 바이오 데이터 여정 - 공통 스타일
   공유: 일반참여자 / 중증질환참여자 / 희귀질환참여자 안내 페이지
   ================================================================ */

/* ---- Journey Section ---- */
.journey-section {
    padding: 120px 0;
    text-align: center;
    max-width: 1440px;
    width: 100%;
}

.journey-section h3 {
    font-family: 'Ria Sans', sans-serif;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 40px;
}

.journey-section .legend {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px;
}

.journey-section .legend span {
    font-size: 18px;
    font-weight: 500;
    position: relative;
    padding-right: 110px;
}

.journey-section .legend span::after {
    content: '';
    width: 100px;
    height: 12px;
    border-radius: 6px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.journey-section .legend .legend-item-sample::after {
    background-color: #FF8D8D;
}

.journey-section .legend .legend-item-data::after {
    background-color: #2793C2;
}

/* ---- Journey Map ---- */
.journey-map {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    container-type: inline-size;
}

.journey-map img {
    width: 100%;
    height: auto;
}

/* ---- Step Items ---- */
.step-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 27cqw;       /* 고정 너비: 텍스트 줄바꿈을 비율 일정하게 유지 */
    padding: 1.389cqw;
}

.step-item.items-end {
    text-align: right;
    align-items: flex-end;
}

/* ---- Step Text ---- */
/* max-width:1440px 이 상한을 자연스럽게 처리하므로 clamp 불필요 → pure cqw */
.step-title {
    font-size: 1.667cqw;
    line-height: 1.5;
    font-weight: 600;
    color: #222;
    margin: 0 0 1.111cqw 0;
}

.step-desc {
    font-size: 1.25cqw;
    line-height: 1.4;
    font-weight: 500;
    color: #222;
    margin: 0 0 1.111cqw 0;
}

.bank-title {
    font-size: 1.667cqw;
    line-height: 1.5;
    font-weight: 600;
    color: #222;
    margin: 0 0 0.278cqw 0;
}

.bank-desc {
    font-size: 1.25cqw;
    line-height: 1.4;
    font-weight: 500;
    color: #222;
    margin: 0;
}

.mt-20 {
    margin-top: 20px;
}

/* ---- Journey Button ---- */
.journey-btn {
    width: 2.778cqw;
    height: 2.778cqw;
    min-width: 14px;
    min-height: 14px;
    border-radius: 50%;
    background-color: #ededed;
    border: none;
    font-size: 1.528cqw;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

/* ---- Button Wrapper (popup 기준점) ---- */
.btn-wrap {
    position: relative;
    display: inline-block;
}

/* ---- Step Details Popup ---- */
/* top: 0 → step-details가 btn-wrap 상단(= + 버튼 상단)에서 시작 */
/* close-details가 + 버튼 중심과 겹치도록 배치 */
.step-details {
    position: absolute;
    top: 0;
    left: 0;
    width: 30cqw;
    background-color: #efefef;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.step-item.on {
    z-index: 200;
}

.step-details.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.step-details p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0;
    font-weight: 500;
    text-align: left;
}

/* ---- Close Button ---- */
/* journey-btn과 동일한 크기 + flex 중앙 정렬 → + 텍스트와 × 텍스트가 같은 위치 */
.close-details {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.778cqw;
    height: 2.778cqw;
    min-width: 14px;
    min-height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.528cqw;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-details:hover {
    color: #222;
}

/* items-end: popup을 오른쪽 정렬 */
.step-item.items-end .step-details {
    left: auto;
    right: 0;
}

.step-item.items-end .close-details {
    top: 0;
    left: auto;
    right: 0;
}

/* ---- PC Step Positions (기준 컨테이너 폭: 1440px) ---- */
/* 세 페이지 SVG의 원형 마커 좌표 동일 → 단일 값 공유 */
.step-item.step1    { top:  4.167cqw; left: 10.069cqw; }
.step-item.step2    { top: 21.528cqw; right:  9.722cqw; }
.step-item.step3    { top: 43.278cqw; left: 10.069cqw; }
.step-item.step4    { top: 62.292cqw; right:  9.722cqw; }
.step-item.step-bank{ top: 82.389cqw; left: 10.069cqw; }
.step-item.step5    { top: 106.958cqw; right: 25.000cqw; }
.step-item.step6    { top: 125.972cqw; left: 10.069cqw; }
.step-item.step7    { top: 155.056cqw; right:  9.722cqw; }