/* ============================================================================
 * guide-premium.css — V2 메인 '쇼핑가이드' 프리미엄 리디자인
 *
 *   범위: .gp-guide 하위로만 한정한다. (전역 선택자 금지 / .v2-home 안에서 include)
 *   기존 home-v2.css 의 .v2-home-gcard·.v2-home-about 규칙은 건드리지 않는다.
 *   마크업 클래스를 gp-* 로 새로 잡았으므로 구 규칙은 자연히 무력화된다.
 *
 *   원칙: CLS 0 (자리 예약 min-height / grid 고정), 애니메이션은 transform·opacity 만.
 *   반응형: Mobile 2열 / Tablet 2열 / PC 4열, 카드 높이 균일.
 * ========================================================================== */

.gp-guide {
    --gp-bg:      #ffffff;
    --gp-ink:     #111111;
    --gp-sub:     #666666;
    --gp-line:    #efefef;
    --gp-line-2:  #f0f0f0;
    --gp-point:   #5B6CFF;
    --gp-radius:  22px;
    --gp-shadow:  0 12px 35px rgba(0, 0, 0, .05);
    --gp-shadow-h: 0 22px 55px rgba(17, 17, 17, .12);
    color: var(--gp-ink);
    letter-spacing: -.3px;
    word-break: keep-all;
}
.gp-guide * { box-sizing: border-box; }

/* ---- 헤더 (좌: 문구 / 우: 3D 일러스트) ----------------------------------- */
.gp-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; margin-bottom: 22px;
}
.gp-hero__text { min-width: 0; }
.gp-hero__text h2 {
    margin: 0; font-size: clamp(22px, 5.4vw, 32px); font-weight: 800;
    line-height: 1.25; letter-spacing: -.6px; display: flex; align-items: center; gap: 8px;
}
.gp-hero__text h2 .gp-emoji { font-size: .82em; }
.gp-hero__text p {
    margin: 10px 0 0; font-size: clamp(13.5px, 3.6vw, 16px); font-weight: 500;
    line-height: 1.7; color: var(--gp-sub);
}

/* 3D 느낌 플랫 일러스트 — 모바일에서는 숨겨 헤더를 간결하게 유지 */
.gp-hero__art { flex: none; width: 168px; height: 132px; display: none; }
.gp-hero__art svg { width: 100%; height: 100%; overflow: visible; }
.gp-hero__art .gp-float { animation: gpFloat 5s ease-in-out infinite; transform-origin: center; }
.gp-hero__art .gp-float--2 { animation-delay: -1.6s; animation-duration: 6s; }
.gp-hero__art .gp-float--3 { animation-delay: -3.1s; animation-duration: 5.5s; }
@keyframes gpFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* ---- 가이드 카드 그리드 ------------------------------------------------- */
.gp-cards {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;            /* 모든 행 높이 동일 → 카드 높이 균일(모바일 포함) */
    gap: 14px;
}
.gp-cards > li { display: flex; }

.gp-card {
    position: relative; display: flex; flex-direction: column; width: 100%;
    min-height: 218px; padding: 22px 20px 20px;
    background: var(--gp-bg); border: 1px solid var(--gp-line-2);
    border-radius: var(--gp-radius); box-shadow: var(--gp-shadow);
    color: var(--gp-ink); text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    will-change: transform;
}
.gp-card:focus-visible { outline: 2px solid var(--gp-point); outline-offset: 3px; }

.gp-card__icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.gp-card__icon svg { width: 27px; height: 27px; }
.gp-card--a .gp-card__icon { background: #eef0ff; color: #5B6CFF; }
.gp-card--b .gp-card__icon { background: #e6f7ee; color: #1f9d5b; }
.gp-card--c .gp-card__icon { background: #fff2e0; color: #d98a1a; }
.gp-card--d .gp-card__icon { background: #fce9f3; color: #c94b96; }

.gp-card__no {
    font-style: normal; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; color: var(--gp-point);
}
.gp-card__t {
    margin-top: 8px; font-size: clamp(18px, 4.4vw, 28px); font-weight: 800;
    line-height: 1.28; letter-spacing: -.4px;
}
.gp-card__d {
    margin-top: 10px; font-size: 15px; font-weight: 500;
    line-height: 1.8; color: var(--gp-sub);
}
.gp-card__go {
    margin-top: auto; align-self: flex-end;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f5f6f8; color: var(--gp-ink);
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.gp-card__go svg { width: 18px; height: 18px; }

@media (hover: hover) and (pointer: fine) {
    .gp-card:hover {
        transform: translateY(-6px); box-shadow: var(--gp-shadow-h);
        border-color: #e6e6e6;
    }
    .gp-card:hover .gp-card__go { background: #111; color: #fff; }
}
.gp-card:active { transform: translateY(-2px); }

/* ---- 프리미엄 블랙 소개 배너 ------------------------------------------- */
.gp-about { margin-top: 26px; }
.gp-banner {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 22px;
    padding: 34px 30px; border-radius: 24px;
    background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
    color: #fff;
}
.gp-banner__art { flex: none; width: 64px; height: 64px; display: inline-flex; }
.gp-banner__art svg { width: 100%; height: 100%; }
.gp-banner__text { flex: 1 1 auto; min-width: 0; }
.gp-banner__text h3 {
    margin: 0; font-size: clamp(21px, 5vw, 34px); font-weight: 800;
    line-height: 1.25; letter-spacing: -.6px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gp-banner__text h3 .gp-emoji { font-size: .8em; }
.gp-banner__text p {
    margin: 10px 0 0; font-size: clamp(13.5px, 3.4vw, 16px); font-weight: 500;
    line-height: 1.7; color: rgba(255, 255, 255, .74);
}
.gp-banner__btn {
    flex: none; -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
    background: #fff; color: #111; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.3px;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.gp-banner__btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.gp-banner__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .gp-banner__btn:hover { background: #000; color: #fff; }
    .gp-banner__btn:hover svg { transform: translateX(3px); }
}
.gp-banner__btn[aria-expanded="true"] .gp-chev { transform: rotate(180deg); }

/* 소개 본문: SSR 항상 출력, display:none 미사용 (크롤러가 본문 그대로 읽음) */
.gp-about__body {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .32s ease, opacity .32s ease;
}
.gp-about.is-open .gp-about__body { opacity: 1; }
.gp-about__inner { padding: 20px 2px 4px; }

/* ---- 소개글 내부 리디자인 (4개 섹션 카드) ---------------------------------
   범위는 .gp-about__inner 하위로만 한정. 전역/다른 카드에 영향 없음. */
.gp-intro {
    display: grid; grid-template-columns: 1fr; gap: 14px;
    background: #fbfbfc; border-radius: 20px; padding: 6px;
}
.gp-sec {
    display: flex; gap: 14px; align-items: flex-start;
    background: #ffffff; border: 1px solid #eceef2; border-radius: 18px;
    padding: 18px; box-shadow: 0 8px 30px rgba(17, 17, 17, .04);
}
.gp-sec__ic {
    flex: none; width: 42px; height: 42px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
}
.gp-sec__ic svg { width: 22px; height: 22px; }
.gp-sec--blue   .gp-sec__ic { background: #eaf1ff; color: #3f6fe6; }
.gp-sec--violet .gp-sec__ic { background: #f0ecff; color: #6d5be2; }
.gp-sec--mint   .gp-sec__ic { background: #e6f7ef; color: #1f9d5b; }
.gp-sec--orange .gp-sec__ic { background: #fff0e2; color: #e08a2b; }

.gp-sec__body { min-width: 0; flex: 1 1 auto; }
.gp-sec__t {
    margin: 2px 0 8px; font-size: clamp(17px, 1.4vw, 22px); font-weight: 800;
    letter-spacing: -.4px; color: #171717; line-height: 1.3;
}
.gp-sec__body p {
    margin: 0 0 8px; font-size: 14.5px; font-weight: 500;
    line-height: 1.75; color: #60646c; max-width: 62ch;
}
.gp-sec__body p:last-child { margin-bottom: 0; }

/* 신뢰 섹션: 왼쪽 세로 포인트 라인 */
.gp-quote {
    border-left: 3px solid #cfe9db; padding-left: 14px; margin-top: 2px;
}

/* 감사 강조 문구 (섹션 4 내부) */
.gp-about__thanks {
    margin-top: 12px !important; font-weight: 700 !important;
    color: #3f6fe6 !important; font-size: 14.5px !important;
}

/* ---- 서비스 미니카드 8개 ---- */
.gp-svc2 {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.gp-svc2__item {
    display: flex; align-items: center; gap: 10px;
    background: #fbfbfd; border: 1px solid #eef0f4; border-radius: 14px;
    padding: 12px; min-height: 60px;
}
.gp-svc2__ic {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f0ecff; color: #6d5be2;
}
.gp-svc2__ic svg { width: 18px; height: 18px; }
.gp-svc2__tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gp-svc2__t { font-size: 13px; font-weight: 700; color: #2b2d33; letter-spacing: -.2px; line-height: 1.3; }
.gp-svc2__d { font-size: 11.5px; font-weight: 500; color: #8b8f98; line-height: 1.3; }

/* 마지막 CTA 강조 문구 */
.gp-cta {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 0 0 !important; padding: 15px 18px;
    background: linear-gradient(135deg, #f4f3ff 0%, #eef3ff 100%);
    border: 1px solid #e6e6fb; border-radius: 16px;
    font-size: 14.5px !important; font-weight: 700 !important;
    color: #4b4dd6 !important; line-height: 1.55 !important;
}
.gp-cta__ic {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #6d5be2;
}
.gp-cta__ic svg { width: 17px; height: 17px; }

/* ---- 신뢰 카드 4개 ----------------------------------------------------- */
.gp-trust {
    list-style: none; margin: 22px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.gp-trust__item {
    display: flex; flex-direction: column; gap: 12px;
    min-height: 132px; padding: 20px 18px;
    background: #fff; border: 1px solid #ececec; border-radius: 18px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    will-change: transform;
}
.gp-trust__ic {
    width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.gp-trust__ic svg { width: 23px; height: 23px; }
.gp-trust--a .gp-trust__ic { background: #e6f7ee; color: #1f9d5b; }
.gp-trust--b .gp-trust__ic { background: #eef0ff; color: #5B6CFF; }
.gp-trust--c .gp-trust__ic { background: #f3ecff; color: #8a4bd9; }
.gp-trust--d .gp-trust__ic { background: #eef2f6; color: #4a5a6a; }
.gp-trust__t { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.gp-trust__d { font-size: 13.5px; font-weight: 500; line-height: 1.6; color: var(--gp-sub); }
@media (hover: hover) and (pointer: fine) {
    .gp-trust__item:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .06); border-color: #e6e6e6;
    }
}

/* ---- 스크롤 등장 (fade-up) — JS 활성 시에만 숨김 → 무JS/SEO 안전, CLS 0 --- */
.gp-guide.is-ready [data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
}
.gp-guide.is-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- 브레이크포인트 ---------------------------------------------------- */
@media (min-width: 768px) {
    .gp-hero__art { display: block; }
    .gp-banner { padding: 40px 38px; gap: 26px; }
    .gp-about__inner { padding: 24px 6px 6px; }
    /* 태블릿: 서비스 미니카드는 이미 2열 유지(요구), 소개 섹션은 아직 1열 */
    .gp-sec { padding: 20px; }
}
@media (min-width: 1024px) {
    .gp-cards { grid-template-columns: repeat(4, 1fr); }
    .gp-trust { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .gp-card { min-height: 236px; }
}
/* PC: 소개 섹션 2열 (넓은 서비스 섹션은 한 줄 전체) + 서비스 미니카드 4열 */
@media (min-width: 1200px) {
    .gp-intro { grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px; }
    .gp-sec--wide { grid-column: 1 / -1; }
    .gp-svc2 { grid-template-columns: repeat(4, 1fr); }
}

/* 접근성: 모션 최소화 요청 시 등장·부유 애니메이션 제거 */
@media (prefers-reduced-motion: reduce) {
    .gp-guide.is-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
    .gp-hero__art .gp-float { animation: none; }
    .gp-card, .gp-card__go, .gp-trust__item,
    .gp-banner__btn, .gp-banner__btn svg, .gp-about__body { transition: none !important; }
    .gp-card:hover, .gp-trust__item:hover { transform: none; }
}