@charset "utf-8";

/* ==========================================================================
   goodpark_review — 고객 후기 슬라이더 스킨
   - 클래스는 모두 gpr- 프리픽스 (goodpark_slide 스킨과 충돌 방지)
   - 슬라이더는 full-bleed(뷰포트 전체 폭), 첫 카드는 본문(1190px) 좌측에 정렬
   ========================================================================== */

/* 페이드 색은 페이지 배경에 맞춰 var로 관리 (기본 흰색). 다른 배경이면 아래 --gpr-fade만 바꾸세요. */
.gpr-slider{
    --gpr-fade:#ffffff;
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    box-sizing:border-box;
    font-family:Paperlogy, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.gpr-heading{
    margin:0 0 20px;
    padding-left:max(24px, calc((100vw - 1190px) / 2));
    padding-right:max(24px, calc((100vw - 1190px) / 2));
    font-size:32px;
    font-weight:700;
    color:#1a2b2b;
    line-height:1.3;
}

/* 뷰포트: 넘치는 카드를 잘라내고, 세로 스크롤은 브라우저에 양보(touch-action:pan-y).
   가로 제스처만 JS가 처리하므로 세로 페이지 스크롤과 충돌하지 않음. */
.gpr-viewport{
    position:relative;
    overflow:hidden;
    touch-action:pan-y;
    cursor:default;
}

/* 트랙: transform:translateX 로 JS가 이동.
   align-items:flex-start → 카드마다 내용(글자수)에 따라 세로 높이가 유동적으로 달라짐(윗변 정렬). */
.gpr-track{
    display:flex;
    align-items:flex-start;
    list-style:none;
    margin:0;
    padding:8px max(24px, calc((100vw - 1190px) / 2));
    will-change:transform;
    transform:translate3d(0,0,0);
}

/* 카드: 연한 민트/그레이 톤, 둥근 모서리, 그림자 없음. 높이는 내용에 따라 자연 증가 */
.gpr-card{
    flex:0 0 auto;
    width:72vw;                 /* 모바일 기본: 첫 카드 + 다음 카드 약 40% peek */
    margin-right:14px;
    box-sizing:border-box;
    background:#f1f1f1;
    border-radius:16px;
    padding:28px 24px;
    display:flex;
    flex-direction:column;
}
.gpr-card:last-child{margin-right:0}

/* 후기 텍스트: 왼쪽 정렬 */
.gpr-review{
    width:100%;
    text-align:left;
}
.gpr-review p{
    margin:0;
    color:#6a6a6a;
    font-size:15px;
    line-height:1.75;
    text-align:left;
    white-space:pre-line;       /* 원문 줄바꿈 유지 (escape된 텍스트라 XSS 안전) */
    word-break:break-word;
    overflow-wrap:break-word;
}

/* '더 보기' 버튼 — 잘린 후기 아래에 표시 */
.gpr-more{
    display:block;
    margin-top:12px;
    padding:5px 0;
    border-radius:8px;
    background:#dadcdc;
    border:none;
    cursor:pointer;
    color:#6a6a6a;
    font:inherit;
    font-size:14px;
    font-weight:400;
    text-underline-offset:2px;
}
.gpr-more:hover{background:#d0d0d0}
.gpr-full{display:none}

/* 구분선 + 이름(좌측 정렬, 진한색 볼드) */
.gpr-divider{
    height:1px;
    background:rgba(20,40,40,.10);
    margin:20px 0 14px;
}
.gpr-name{
    text-align:left;
    color:#6a6a6a;
    font-weight:500;
    font-size:14px;
}

/* 좌우 흰색 페이드 오버레이 — 클릭/터치를 막지 않도록 pointer-events:none */
.gpr-slider::before,
.gpr-slider::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:64px;
    pointer-events:none;
    z-index:3;
}
.gpr-slider::before{
    left:0;
    background:linear-gradient(to right, var(--gpr-fade), rgba(255,255,255,0));
}
.gpr-slider::after{
    right:0;
    background:linear-gradient(to left, var(--gpr-fade), rgba(255,255,255,0));
}

/* ── 태블릿 (768~1199px): 한 화면에 3~4개 ── */
@media(min-width:768px){
    .gpr-card{width:30vw;margin-right:18px}
    .gpr-slider::before,.gpr-slider::after{width:80px}
}

/* ── PC (1200px 이상): 한 화면에 5~6개 ── */
@media(min-width:1200px){
    .gpr-card{width:18vw;max-width:320px;margin-right:20px;padding:34px 30px}
    .gpr-review p{font-size:16px}
    .gpr-slider::before,.gpr-slider::after{width:100px}
}

/* ── 모바일 (767px 이하) 미세조정 ── */
@media(max-width:767px){
    .gpr-heading{font-size:24px;margin-bottom:14px}
    .gpr-card{padding:24px 20px}
    .gpr-slider::before,.gpr-slider::after{width:40px}
}

/* 이전/다음 버튼 — goodpark_slide 스킨의 .gp-controls 디자인/이미지 그대로.
   위치: 카드들 아래 가운데 */
.gpr-controls{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px}
.gpr-controls button{background:#dedede;border:none;padding:0;border-radius:10px;cursor:pointer;margin:0;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s, background .15s}
.gpr-controls button img{display:block;width:40px;height:40px}
.gpr-controls button:hover{background:#cecece}
.gpr-controls button:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:2px}

/* ── 어두운 배경(colorset=black) ── */
.gpr-slider[data-theme="dark"]{--gpr-fade:#111}
.gpr-slider[data-theme="dark"] .gpr-heading{color:#eef3f3}
.gpr-slider[data-theme="dark"] .gpr-card{background:#1c2222}
.gpr-slider[data-theme="dark"] .gpr-review p{color:#b8c2c2}
.gpr-slider[data-theme="dark"] .gpr-name{color:#eef3f3}
.gpr-slider[data-theme="dark"] .gpr-divider{background:rgba(255,255,255,.12)}
.gpr-slider[data-theme="dark"]::before{background:linear-gradient(to right, #111, rgba(17,17,17,0))}
.gpr-slider[data-theme="dark"]::after{background:linear-gradient(to left, #111, rgba(17,17,17,0))}

/* 접근성: 모션 최소화 선호 시 전환 애니메이션 최소화 (JS는 위치만 반영) */
@media(prefers-reduced-motion:reduce){
    .gpr-track{will-change:auto}
}

/* ==========================================================================
   '더 보기' 레이어 팝업(모달) — JS가 <body>에 1개만 생성해 공유
   ========================================================================== */
.gpr-modal{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
}
.gpr-modal.is-open{display:flex}
/* 배경: 검은색 반투명 오버레이 */
.gpr-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
}
.gpr-modal__dialog{
    position:relative;
    z-index:1;
    width:100%;
    max-width:560px;
    max-height:80vh;
    box-sizing:border-box;
    background:#fff;
    border-radius:16px;
    padding:40px 32px 32px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.gpr-modal__close{
    position:absolute;
    top:12px;
    right:14px;
    width:36px;
    height:36px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    font-size:26px;
    line-height:1;
    color:#888;
}
.gpr-modal__close:hover{color:#333}
.gpr-modal__body{
    margin:0;
    color:#3c3c3c;
    font-size:16px;
    line-height:1.8;
    text-align:left;
    white-space:pre-line;
    word-break:break-word;
    overflow-wrap:break-word;
    font-family:Paperlogy, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
@media(max-width:767px){
    .gpr-modal{padding:16px}
    .gpr-modal__dialog{padding:36px 22px 24px;max-height:84vh}
    .gpr-modal__body{font-size:15px}
}