/**
 * 유용한 지식/정보 (SNS 연동 리스트)
 * PSD: docs/psd/SNS연동 리스트.psd (768 x 3248)
 * 좌표는 768 기준 고정 → 캔버스 transform scale(--mobile-psd-scale) 로 해상도 대응
 */

body.info-page {
    margin: 0;
    background: #0a1930;
    color: #ffffff;
}

.info-page .claim-shell {
    max-width: 768px;
    margin: 0 auto;
    min-height: 0;
    padding-bottom: 0;
}

.info-page .claim-site-chrome {
    display: block;
    width: 100%;
    position: relative;
    z-index: 100;
    /* index_draft 의 6662px 루트 높이 덮어쓰기 */
    min-height: calc(var(--info-canvas-height, 3248px) * var(--mobile-psd-scale, 1));
    height: calc(var(--info-canvas-height, 3248px) * var(--mobile-psd-scale, 1));
}

.info-viewport {
    position: relative;
    width: 100%;
    min-height: calc(var(--info-canvas-height, 3248px) * var(--mobile-psd-scale, 1));
    height: calc(var(--info-canvas-height, 3248px) * var(--mobile-psd-scale, 1));
    overflow: visible;
}

.info-page .mobile-psd-canvas.info-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 768px;
    min-height: var(--info-canvas-height, 3248px);
    height: var(--info-canvas-height, 3248px);
    transform-origin: 0 0;
    transform: scale(var(--mobile-psd-scale, 1));
}

.info-page .claim-site-chrome .mobile-submenu-panel-draft {
    min-height: var(--info-canvas-height, 3248px);
    height: var(--info-canvas-height, 3248px);
}

.info-page .claim-site-chrome .mobile-submenu-plate-draft {
    min-height: var(--info-canvas-height, 3248px);
}

/* x:38 y:188 ? ?유용한 지식/정보? (캔버스 내부 → scale로 축소) */
.info-hero-title {
    position: absolute;
    left: 38px;
    top: 188px;
    margin: 0;
    font-family: "Flight Sans", var(--mobile-font-stack);
    font-size: 65px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #ffffff;
    word-break: keep-all;
}

/* y:285 ? 카테고리 버튼 1행 5개 */
.info-category-row {
    position: absolute;
    left: 0;
    top: 285px;
    width: 768px;
    height: 55px;
    margin: 0;
    padding: 0;
}

.info-category-btn {
    position: absolute;
    top: 0;
    width: 129px;
    height: 55px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 28px;
    background-color: #27364d;
    font-family: "Flight Sans", var(--mobile-font-stack);
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 55px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.info-category-btn.is-selected {
    background-color: #ffc716;
    color: #0a1930;
}

.info-category-btn:focus-visible {
    outline: 2px solid #ffc716;
    outline-offset: 2px;
}

/* 포스트 카드 목록 ? 카드 absolute, 내부는 카드 기준 상대 좌표 */
.info-post-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 768px;
    height: 100%;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.info-post-card {
    position: absolute;
    left: 39px;
    width: 689px;
    height: 172px;
    border-radius: 29px;
    background-color: #27364d;
    pointer-events: auto;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
}

.info-post-empty {
    position: absolute;
    left: 39px;
    width: 689px;
    margin: 0;
    padding: 40px 44px;
    box-sizing: border-box;
    font-family: "Flight Sans", var(--mobile-font-stack);
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    pointer-events: none;
}

.info-post-title.is-empty {
    min-height: 58px;
}

/* PSD 제목(83,412) → 카드 기준 left:44 top:34 */
.info-post-title {
    position: absolute;
    left: 44px;
    top: 34px;
    right: 44px;
    margin: 0;
    padding: 0;
    font-family: "Flight Sans", var(--mobile-font-stack);
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 58px;
    text-transform: uppercase;
    text-align: left;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PSD 날짜(82,482) → 카드 기준 left:43 top:104 */
.info-post-date {
    position: absolute;
    left: 43px;
    top: 104px;
    margin: 0;
    padding: 0;
    font-family: "Flight Sans", var(--mobile-font-stack);
    font-size: 32px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 46px;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
}

/**
 * 페이지네이션 ? 정중앙 숫자 5개 + 좌우 블록 이동
 * 원 63 유지, 숫자 40→32 (2자리 여유). 원을 키우면 행이 무거워져 비권장.
 */
.info-pagination {
    position: absolute;
    left: 39px;
    top: 2480px;
    width: 689px;
    height: 63px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-sizing: border-box;
}

.info-page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.info-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 63px;
    height: 63px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #27364d;
    font-family: "Flight Sans", var(--mobile-font-stack);
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
}

.info-page-btn.is-selected {
    background-color: #ffc716;
    color: #0a1930;
}

.info-page-btn--nav {
    font-size: 0;
    line-height: 0;
}

/* CSS 화살표 ? 문자 인코딩 깨짐 방지 */
.info-page-chevron {
    display: block;
    width: 14px;
    height: 14px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    box-sizing: border-box;
}

.info-page-chevron--prev {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.info-page-chevron--next {
    transform: rotate(45deg);
    margin-right: 4px;
}

.info-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.info-page-btn:focus-visible {
    outline: 2px solid #ffc716;
    outline-offset: 2px;
}

/* SNS 바로가기 ? 블로그 y:2621 / 인스타 y:2770 */
.info-shortcut {
    position: absolute;
    left: 39px;
    width: 689px;
    height: 114px;
    margin: 0;
    padding: 0;
    border-radius: 29px;
    background-color: #27364d;
    text-decoration: none;
    color: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.info-shortcut--blog {
    top: 2621px;
}

.info-shortcut--instagram {
    top: 2770px;
}

.info-shortcut:focus-visible {
    outline: 2px solid #ffc716;
    outline-offset: 2px;
}

.info-shortcut-icon {
    position: relative;
    left: 30px;
    top: auto;
    display: block;
    width: 114px;
    height: 114px;
    margin: 0;
    padding: 0;
    object-fit: contain;
    flex-shrink: 0;
    pointer-events: none;
}

.info-shortcut-label {
    position: absolute;
    left: 185px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    font-family: "Flight Sans", var(--mobile-font-stack);
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 58px;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
}

/* 신청 CTA ? 청구 y:2920 / 숨은보험금 y:3072 */
.info-cta {
    position: absolute;
    left: 39px;
    top: 2920px;
    width: 689px;
    height: 114px;
    margin: 0;
    padding: 0;
    border-radius: 29px;
    background-color: #facc16;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Flight Sans", var(--mobile-font-stack);
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 58px;
    text-transform: uppercase;
    text-align: center;
    color: #0a1930;
    white-space: nowrap;
}

.info-cta--find-hidden {
    top: 3072px;
}

.info-cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (min-width: 769px) {
    .info-page .claim-site-chrome {
        width: 768px;
        margin: 0 auto;
    }

    .info-page .mobile-psd-canvas.info-canvas {
        position: relative;
        transform: none;
    }
}

@media (max-width: 768px) {
    .info-page .claim-site-chrome {
        width: 100%;
        min-height: calc(var(--info-canvas-height, 3248px) * var(--mobile-psd-scale, 1));
        height: calc(var(--info-canvas-height, 3248px) * var(--mobile-psd-scale, 1));
    }

    .info-viewport {
        height: 100%;
        min-height: 0;
    }

    .info-page .mobile-psd-canvas.info-canvas {
        position: absolute;
        left: 0;
        top: 0;
        transform: scale(var(--mobile-psd-scale, 1));
        transform-origin: 0 0;
    }
}