/* ==========================================================================
   [2026-10-06] 환승쿠폰 적용가 박스 (상품상세)
   --------------------------------------------------------------------------
   고도몰 기본 '쿠폰적용가' 줄(dl.item_price)은 숨기고, 같은 값으로
   흰 배경 + 외곽선 카드를 그린다. 계산은 고도몰이 한 값을 그대로 쓴다.
   ⚠ 금액을 직접 계산하지 않는다 — 쿠폰 정책이 바뀌어도 자동으로 따라간다.
   ========================================================================== */
.getha-cpbox{
    margin:14px 0 16px;
    padding:18px 20px;
    background:#fff;
    border:1px solid #E3E3E3;
    border-radius:8px;
}
.getha-cpbox__row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}
.getha-cpbox__label{
    display:block;
    font-size:14px; letter-spacing:-0.02em; color:#333;
}
.getha-cpbox__price{
    position:relative;
    display:flex; align-items:center; gap:7px;
    margin-top:7px;
}
.getha-cpbox__price strong{
    font-size:28px; font-weight:700; line-height:1.05;
    letter-spacing:-0.03em; color:#111;
}
.getha-cpbox__price em{
    font-style:normal; font-size:19px; font-weight:700; color:#111;
}
.getha-cpbox__help{
    flex:none; width:18px; height:18px; padding:0;
    border:1px solid #C2C2C2; border-radius:50%;
    background:#fff; color:#8A8A8A;
    font-size:11px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.getha-cpbox__help:hover{ border-color:#0D4633; color:#0D4633; }
/* 말풍선 — PC 는 hover, 모바일은 탭으로 연다 */
.getha-cpbox__tip{
    position:absolute; left:0; top:calc(100% + 9px); z-index:30;
    display:none; width:max-content; max-width:280px;
    padding:10px 12px; border-radius:6px;
    background:rgba(17,17,17,.93); color:#fff;
    font-size:12px; line-height:1.55; letter-spacing:-0.02em;
    word-break:keep-all;
}
.getha-cpbox__price:hover .getha-cpbox__tip,
.getha-cpbox.is-tip .getha-cpbox__tip{ display:block; }

.getha-cpbox__right{ flex:none; text-align:right; }
.getha-cpbox__inst{ font-size:13px; letter-spacing:-0.02em; color:#666; white-space:nowrap; }
.getha-cpbox__inst b{ color:#0D4633; font-weight:600; }

.getha-cpbox__btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    height:48px; margin-top:16px;
    border-radius:6px; background:#0D4633;
    color:#fff !important; font-size:15px; font-weight:600;
    letter-spacing:-0.02em; text-decoration:none !important;
    transition:background .18s ease;
}
.getha-cpbox__btn:hover{ background:#08301F; color:#fff !important; }

@media screen and (max-width:767px){
    .getha-cpbox{ padding:16px; }
    .getha-cpbox__label{ font-size:13px; }
    .getha-cpbox__price strong{ font-size:24px; }
    .getha-cpbox__price em{ font-size:17px; }
    .getha-cpbox__inst{ font-size:12px; }
    .getha-cpbox__btn{ height:46px; font-size:14px; }
    .getha-cpbox__tip{ max-width:230px; }
}

/* [2026-10-06b] 쿠폰받기 버튼을 무이자 아래 우측으로 — 크기도 적용가 높이에 맞춤
   ⚠ 전체 폭 초록 버튼이 너무 커서 가격보다 먼저 눈에 띄었다.
     우측 컬럼에 세로로 쌓아 '무이자 / 쿠폰받기' 묶음으로 읽히게 한다. */
.getha-cpbox__row{
    align-items:flex-start;     /* 무이자는 라벨 줄, 버튼은 가격 줄에 맞춰 선다 */
}
.getha-cpbox__right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:9px;
}
.getha-cpbox__btn{
    display:inline-flex;
    width:auto;
    height:34px;                /* 쿠폰적용가 글자 높이(약 30px)와 맞춘다 */
    margin-top:0;
    padding:0 15px;
    border-radius:5px;
    font-size:13px;
    white-space:nowrap;
}

@media screen and (max-width:767px){
    .getha-cpbox__btn{ height:32px; padding:0 13px; font-size:12px; }
    .getha-cpbox__right{ gap:8px; }
}

/* [2026-10-07] 사이즈별 자동 롤링 — 쿠폰 적용가 + 무이자 금액이 한 쌍으로 교체된다 */
.getha-cpbox__num,
.getha-cpbox__inst{
    transition:opacity .2s ease, transform .2s ease;
}
.getha-cpbox.is-swap .getha-cpbox__num,
.getha-cpbox.is-swap .getha-cpbox__inst{
    opacity:0;
    transform:translateY(-4px);
}
/* 사이즈 뱃지 (SS / Q / K / LK) */
.getha-cpbox__sz{
    display:inline-block;
    min-width:30px;
    padding:1px 5px;
    border-radius:3px;
    background:#EAF2ED;
    color:#0D4633;
    font-size:11px;
    font-weight:700;
    letter-spacing:0;
    text-align:center;
    vertical-align:1px;
}
/* 모션 최소화 환경 배려 */
@media (prefers-reduced-motion: reduce){
    .getha-cpbox__num,
    .getha-cpbox__inst{ transition:none; }
    .getha-cpbox.is-swap .getha-cpbox__num,
    .getha-cpbox.is-swap .getha-cpbox__inst{ opacity:1; transform:none; }
}
@media screen and (max-width:767px){
    .getha-cpbox__sz{ min-width:27px; padding:1px 4px; font-size:10px; }
}

/* [2026-10-07b] 초소형 화면(갤럭시 폴드 외부화면·iPhone SE 1세대 등) 안전장치
   좌우 2단이 320px 급 화면에서 붙어 넘치므로 우측 묶음을 아래 줄로 내린다. */
@media screen and (max-width:359px){
    .getha-cpbox__row{ flex-wrap:wrap; }
    .getha-cpbox__right{
        width:100%;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        margin-top:12px;
    }
}

/* [2026-10-08] 네이티브 '쿠폰적용가' 행 숨김
   ⚠ 박스를 템플릿에서 서버 렌더링하면서 JS 로 숨기던 방식을 CSS 로 옮겼다.
     JS 가 돌기 전에도 숨겨져야 깜빡임이 없다. */
.getha-cpbox-hide{ display:none !important; }