/* ============================================================
   detail.css
   상품 상세 고정 본문 (detail.php · 디자이너 시안 023_2.jpg 기준)
   - 적용 범위: .dtd 래퍼 내부 전용 (헤더/푸터/구매영역은 user.css 소관)
   - 네임스페이스: .dtd-블록__요소--변형  (user.css .dtpl-* / .shop-* 와 동일 규칙)
   - 팔레트: user.css의 Deep Wine Red(#701a3f) 계승 + 시안 전용 슬레이트/핑크
   - 폰트/아이콘: user.css와 공유 (--font-kr / --font-en, Font Awesome 6)
   - 주의: 구 이미지 스트립판(detail_old.php)은 user.css의 .dtpl-designed/.dsi 를
           그대로 사용한다. 이 파일과 클래스가 겹치지 않도록 유지할 것.
   ============================================================ */

/* 시안 전용 색은 :root 가 아니라 래퍼(.dtd)에 둔다.
   :root 에 두면 --color-dark 등이 헤더·푸터까지 덮어써서
   다른 페이지와 색이 어긋난다. (user.css 값이 사이트 기준) */
.dtd {
    --dtd-dark: #0f172a;          /* 제목 — 슬레이트 900 */
    --dtd-text: #334155;          /* 본문 — 슬레이트 700 */
    --dtd-muted: #64748b;         /* 보조 설명 — 슬레이트 500 */
    --dtd-point: #e11d48;         /* 강조 핑크 (필수 안내·태그) */
    --dtd-point-bg: #fff1f2;      /* 강조 핑크 배경 */
    --dtd-bg: #f8fafc;            /* 섹션/카드 배경 */
    --dtd-line: #e2e8f0;          /* 기본 경계선 */
    --dtd-line-strong: #cbd5e1;   /* 강한 경계선 */
    --dtd-font-serif: 'Playfair Display', serif;   /* 무빙포스터 캡션 전용 */

    max-width: none;              /* 하단 '상품 상세 안내'와 같은 폭 */
    margin: 24px auto 0;
}

/* --- 공통 섹션 --- */
.dtd section {
    padding: 80px 0;
    border-bottom: 1px solid var(--dtd-line);
}

.dtd section:last-of-type { border-bottom: none; }

.dtd__inner {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}

/* --- 공통 헤딩 --- */
.dtd-head { text-align: center; margin-bottom: 50px; }

.dtd-head__eyebrow {
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 700;
    color: var(--dtd-muted);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.dtd-head__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--dtd-dark);
    letter-spacing: -1px;
}

/* ① 혜택 배너 — 관리자 [콘텐츠 > 상세이벤트] 등록 이미지 (PC/모바일 각각)
   링크가 없으면 <a> 대신 <div>로 출력되므로 커서는 a 에만 준다. */
.dtd-hero { display: block; margin: 0; line-height: 0; }
a.dtd-hero { cursor: pointer; }
.dtd-hero picture { display: block; }
.dtd-hero img { width: 100%; height: auto; display: block; }

/* ============================================================
   ② 회원가입 혜택
   ============================================================ */
.dtd-benefit__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.dtd-benefit__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.dtd-benefit__item:hover { transform: translateY(-5px); }

.dtd-benefit__icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
}
.dtd-benefit__icon img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.dtd-benefit__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    background-color: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 30px 20px;
}

.dtd-benefit__title { font-size: 17px; font-weight: 700; color: var(--dtd-dark); margin-bottom: 12px; }
.dtd-benefit__title:last-child { margin-bottom: 0; }
.dtd-benefit__desc { font-size: 14.5px; color: var(--dtd-muted); line-height: 1.5; }

/* ============================================================
   ③ 제작 강점 (고객이 만족할 수 있도록…)
   ============================================================ */
.dtd-feature__card {
    max-width: 1500px;
    margin: 0 auto;
    background-color: #f6f6f6;
    border-radius: 24px;
    padding: 50px 40px;
    text-align: center;
}

.dtd-feature__icon {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.dtd-feature__icon img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.dtd-feature__eyebrow { font-size: 16px; font-weight: 500; color: var(--dtd-dark); margin-bottom: 8px; }
.dtd-feature__title {
    font-size: 24px; font-weight: 700; color: var(--dtd-dark);
    letter-spacing: -0.5px; margin-bottom: 30px;
}

.dtd-feature__lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 720px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 60px;
    text-align: left;
}

.dtd-feature__list { list-style: none; }
.dtd-feature__list li {
    position: relative; padding-left: 20px; margin-bottom: 18px;
    font-size: 16px; font-weight: 500; color: var(--dtd-text);
}
.dtd-feature__list li:last-child { margin-bottom: 0; }
.dtd-feature__list li::before {
    content: '•'; position: absolute; left: 0;
    color: var(--dtd-muted);
}
.dtd-feature__hl { color: #ff676f; font-weight: 700; }

/* ============================================================
   ④ 무빙포스터 (상품별 영상·설명·해시태그)
   ============================================================ */
.dtd-poster { text-align: center; }

.dtd-poster__frame {
    position: relative;
    max-width: 960px;
    aspect-ratio: 16 / 10;
    margin: 0 auto 35px auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
/* iframe 은 object-fit 미적용 — 적용 시 렌더 결과가 재확대되어 흐려진다 */
.dtd-poster__video {
    position: relative; z-index: 5;
    width: 100%; height: 100%; border: 0; display: block;
}
.dtd-poster__img { width: 100%; height: 100%; object-fit: cover; }
.dtd-poster__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); }

.dtd-poster__caption {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; text-align: center;
    font-family: var(--dtd-font-serif); font-style: italic; font-size: 38px;
    color: #ffffff; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.dtd-poster__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 68px; height: 68px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.9); color: var(--dtd-dark);
    font-size: 22px; cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}
.dtd-poster__play:hover {
    background: #ffffff;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.dtd-poster__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.25); color: #ffffff;
    cursor: pointer; transition: background 0.3s;
}
.dtd-poster__nav:hover { background: rgba(255, 255, 255, 0.4); }
.dtd-poster__nav--prev { left: 20px; }
.dtd-poster__nav--next { right: 20px; }

.dtd-poster__sparkles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dtd-poster__sparkle {
    position: absolute; color: #ffffff; font-size: 20px; opacity: 0.8;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: dtd-twinkle 3s infinite ease-in-out;
}
.dtd-poster__sparkle--1 { top: 20%;    left: 15%;  animation-delay: 0s; }
.dtd-poster__sparkle--2 { top: 15%;    right: 20%; animation-delay: 1s; }
.dtd-poster__sparkle--3 { bottom: 25%; right: 15%; animation-delay: 2s; }

@keyframes dtd-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

.dtd-poster__name { font-size: 22px; font-weight: 700; color: var(--dtd-dark); margin-bottom: 12px; }
.dtd-poster__desc { font-size: 15px; color: var(--dtd-muted); line-height: 1.6; margin-bottom: 10px; }
.dtd-poster__note { font-size: 13px; font-weight: 500; color: var(--dtd-point); margin-bottom: 24px; }
.dtd-poster__tags { display: flex; justify-content: center; gap: 10px; }
.dtd-poster__tag {
    background-color: var(--color-primary); color: #ffffff;
    border-radius: 30px; padding: 6px 14px; font-size: 12px; font-weight: 600;
}

/* ============================================================
   ⑤ 상품 스펙 (상품별 입력값)
   ============================================================ */
.dtd-spec {
    padding: 20px 0 60px 0;
}
.dtd-spec__container {
    max-width: 1500px;
    margin: 0 auto;
    background-color: #fcfbf9;
    border: 1px solid var(--dtd-line);
    border-radius: 24px;
    padding: 35px 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.dtd-spec__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.dtd-spec__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid var(--dtd-line);
    border-radius: 16px;
    padding: 18px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
}
.dtd-spec__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}
.dtd-spec__badge {
    font-family: var(--font-kr);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dtd-spec__badge--pink   { background-color: #ffe4e6; color: #e11d48; }
.dtd-spec__badge--yellow { background-color: #fef3c7; color: #d97706; }
.dtd-spec__badge--blue   { background-color: #dbeafe; color: #2563eb; }
.dtd-spec__badge--purple { background-color: #f3e8ff; color: #9333ea; }
.dtd-spec__badge--green  { background-color: #d1fae5; color: #059669; }
.dtd-spec__badge--red    { background-color: #fff1f2; color: #e11d48; }

.dtd-spec__val {
    font-size: 15px;
    font-weight: 700;
    color: var(--dtd-dark);
}
.dtd-spec__val--pink { color: var(--dtd-point); }
.dtd-spec__val--notice { font-size: 14px; font-weight: 600; color: #64748b; }

/* ============================================================
   ⑥ 제작 프로세스
   ============================================================ */
.dtd-process__grid {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
    max-width: 1500px; margin: 0 auto 35px auto;
}

.dtd-process__card {
    display: flex;
    background-color: #ffffff; border: 1px solid var(--dtd-line);
    border-radius: 16px; padding: 26px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.dtd-process__icon {
    flex-shrink: 0;
    width: 72px; height: 72px; border-radius: 16px; margin-right: 20px;
    display: flex; align-items: center; justify-content: center;
}
.dtd-process__icon img { max-width: 75%; max-height: 75%; object-fit: contain; display: block; }
.dtd-process__icon--blue   { background-color: #eff6ff; color: #2563eb; }
.dtd-process__icon--cyan   { background-color: #ecfeff; color: #0891b2; }
.dtd-process__icon--indigo { background-color: #e0e7ff; color: #4f46e5; }
.dtd-process__icon--sky    { background-color: #f0f9ff; color: #0284c7; }

.dtd-process__body { flex-grow: 1; }
.dtd-process__title { font-size: 17px; font-weight: 700; color: var(--dtd-dark); margin-bottom: 8px; }
.dtd-process__desc { font-size: 14px; color: var(--dtd-text); line-height: 1.55; }
.dtd-process__note { text-align: center; font-size: 14.5px; color: var(--dtd-muted); }

/* ============================================================
   ⑦⑨ 참고사항 (제작 시 참고 해주세요 — 2개 섹션 공용)
   ============================================================ */
.dtd-alert { background-color: var(--dtd-bg); }

.dtd-alert__head {
    display: flex; flex-direction: column; align-items: center; margin-bottom: 30px;
}
.dtd-alert__mark {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--dtd-point-bg); color: var(--dtd-point);
    font-size: 22px; font-weight: 700; margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.1);
}
.dtd-alert__title { font-size: 22px; font-weight: 700; color: var(--dtd-dark); }

.dtd-alert__card {
    max-width: 1500px; margin: 0 auto;
    background-color: #ffffff; border: 1px solid var(--dtd-line);
    border-radius: 16px; padding: 40px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
}
.dtd-alert__card--split {
    display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}

.dtd-alert__group { margin-bottom: 35px; }
.dtd-alert__group:last-child { margin-bottom: 0; }
.dtd-alert__group-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; color: var(--color-primary); margin-bottom: 18px;
}
.dtd-alert__group-title i { color: var(--dtd-point); }

.dtd-alert__list { list-style: none; }
.dtd-alert__list li {
    position: relative; padding-left: 20px; margin-bottom: 12px;
    font-size: 15.5px; color: var(--dtd-text); line-height: 1.6;
}
.dtd-alert__list li::before {
    content: '✓'; position: absolute; left: 0;
    color: var(--dtd-point); font-weight: 900;
}

.dtd-alert__list--bullet li { padding-left: 18px; }
.dtd-alert__list--bullet li::before {
    content: '•'; left: 2px; font-size: 16px; font-weight: normal;
}

.dtd-alert__graphic { display: flex; justify-content: center; align-items: center; width: 160px; }
.dtd-alert__fa-icon {
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, #a78bfa, #818cf8);
    color: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    box-shadow: 0 10px 25px rgba(129, 140, 248, 0.15);
}

/* ============================================================
   ⑧ 제작 신청안내 (4단계)
   ============================================================ */
.dtd-guide__icon {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.dtd-guide__icon img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.dtd-guide__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.dtd-guide__card {
    overflow: hidden; text-align: center;
    background-color: var(--dtd-bg); border: 1px solid var(--dtd-line);
    border-radius: 16px; padding: 16px 16px 24px 16px;
}

.dtd-guide__thumb {
    width: 100%; aspect-ratio: 53 / 28; overflow: hidden;
    margin-bottom: 20px; border-radius: 10px;
}
.dtd-guide__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dtd-guide__body { padding: 0; }
.dtd-guide__title { font-size: 17px; font-weight: 700; color: var(--dtd-dark); margin-bottom: 12px; }
.dtd-guide__num { font-family: var(--font-en); color: var(--dtd-point); margin-right: 4px; }
.dtd-guide__desc { font-size: 14.5px; color: var(--dtd-muted); line-height: 1.5; }

/* ============================================================
   ⑩ 좋은 사진을 고르는 TIP
   ============================================================ */
.dtd-tip__compare {
    display: flex; justify-content: center; align-items: flex-end;
    gap: 40px; max-width: 1500px; margin: 0 auto 50px auto;
}
.dtd-tip__compare-item { flex: 1; max-width: 600px; }
.dtd-tip__compare-item img { width: 100%; height: auto; display: block; }

.dtd-tip__card-box {
    max-width: 1500px;
    margin: 0 auto;
    background-color: #f6f5f0;
    border-radius: 28px;
    padding: 35px;
}
.dtd-tip__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    width: 100%;
}
.dtd-tip__item {
    display: flex; align-items: center;
    background-color: #ffffff;
    border: none;
    border-radius: 20px; padding: 28px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.dtd-tip__icon {
    flex-shrink: 0;
    width: 58px; height: 58px; margin-right: 20px;
    display: flex; align-items: center; justify-content: center;
}
.dtd-tip__icon img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}

.dtd-tip__body { flex-grow: 1; }
.dtd-tip__title { font-size: 16px; font-weight: 700; color: var(--dtd-dark); margin-bottom: 6px; }
.dtd-tip__desc { font-size: 13.5px; color: var(--dtd-text); line-height: 1.5; }

/* ============================================================
   ⑪ CHECK POINT
   ============================================================ */
.dtd-check__card {
    max-width: 1500px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center; gap: 40px;
    background-color: var(--dtd-bg); border: 1px solid var(--dtd-line-strong);
    border-radius: 16px; padding: 35px 40px;
}
.dtd-check__body { flex-grow: 1; }
.dtd-check__title {
    font-family: var(--font-en); font-size: 19px; font-weight: 800;
    color: #334155; letter-spacing: 0.5px; margin-bottom: 16px;
}
.dtd-check__list { list-style: none; }
.dtd-check__list li {
    position: relative; padding-left: 16px; margin-bottom: 10px;
    font-size: 15px; color: #475569; line-height: 1.6;
}
.dtd-check__list li::before {
    content: '•'; position: absolute; left: 0;
    color: var(--dtd-point); font-size: 16px; line-height: 1.2;
}
.dtd-check__list li strong { color: var(--dtd-dark); }

.dtd-check__mark {
    flex-shrink: 0;
    width: 76px; height: 76px;
    display: flex; align-items: center; justify-content: center;
}
.dtd-check__mark img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}

/* ============================================================
   ⑫ USB 제작 / 주문 안내
   ============================================================ */
.dtd-usb { text-align: center; }
.dtd-usb .dtd-head__eyebrow {
    font-family: var(--font-en); font-size: 19px; font-weight: 800;
    color: var(--dtd-dark); margin-bottom: 12px;
}
.dtd-usb__desc {
    font-size: 16px; color: var(--dtd-muted); line-height: 1.6;
    max-width: 600px; margin: 0 auto 10px auto;
}
.dtd-usb__point { font-size: 15.5px; font-weight: 700; color: #f97316; }

.dtd-usb__frame {
    max-width: 960px; margin: 35px auto 0 auto;
    border-radius: 16px; overflow: hidden;
    border: 1px solid var(--dtd-line);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.dtd-usb__frame img { width: 100%; display: block; object-fit: cover; }
.dtd-usb__caption {
    font-size: 13.5px; color: var(--dtd-muted); text-align: center;
    margin-top: 18px; line-height: 1.5;
}

/* ============================================================
   ⑬ 배송 / 교환·환불 규정
   ============================================================ */
.dtd-policy {
    padding: 50px 0 0 0;
    background-color: transparent;
}
.dtd-policy__card {
    max-width: 1500px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid var(--dtd-line);
    border-radius: 24px;
    padding: 40px 45px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.dtd-policy__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}
.dtd-policy__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--dtd-dark);
    margin-bottom: 16px;
}
.dtd-policy__title i {
    color: var(--dtd-point);
    font-size: 18px;
}
.dtd-policy__text {
    font-size: 14.5px;
    color: var(--dtd-text);
    line-height: 1.65;
}

/* ============================================================
   모바일 대응 (≤768px) — user.css 브레이크포인트와 동일
   ============================================================ */
@media (max-width: 768px) {
    .dtd { margin-top: 16px; }

    .dtd-benefit__grid { grid-template-columns: 1fr; gap: 15px; }
    .dtd-feature__lists { grid-template-columns: 1fr; gap: 10px; }
    .dtd-spec__container { padding: 24px 18px; }
    .dtd-spec__grid { grid-template-columns: 1fr; gap: 12px; }
    .dtd-spec__item { padding: 14px 18px; }
    .dtd-process__grid { grid-template-columns: 1fr; }
    .dtd-alert__card--split { grid-template-columns: 1fr; }
    .dtd-alert__graphic { margin-top: 30px; }
    .dtd-guide__grid { grid-template-columns: 1fr; }
    .dtd-tip__compare { flex-direction: column; align-items: center; gap: 30px; }
    .dtd-tip__compare-item { width: 100%; max-width: 100%; }
    .dtd-tip__grid { grid-template-columns: 1fr; }
    .dtd-check__card { flex-direction: column; gap: 30px; }
    .dtd-check__mark { order: -1; }
    .dtd-policy__card { padding: 30px 24px; }
    .dtd-policy__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ============================================================
   회원가입혜택 — 외부 링크 항목 (.dtd-benefit__item--link)
   3번째 카드(웨딩 자료실 GPTs)만 새 탭으로 외부 연결된다.
   div → a 로 바꿨을 뿐이라 .dtd-benefit__item 의 flex 레이아웃은 그대로 상속.
   ============================================================ */
.dtd-benefit__item--link { cursor: pointer; }

/* 클릭 가능하다는 신호 — 카드 테두리·배경을 hover 시 강조 */
.dtd-benefit__item--link .dtd-benefit__card {
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.dtd-benefit__item--link:hover .dtd-benefit__card,
.dtd-benefit__item--link:focus-visible .dtd-benefit__card {
    background-color: #ffffff;
    border-color: var(--dtd-dark);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.dtd-benefit__item--link:focus-visible {
    outline: 3px solid var(--dtd-dark);
    outline-offset: 4px;
    border-radius: 16px;
}

/* '바로가기 ↗' 보조 문구 */
.dtd-benefit__link-cue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dtd-muted);
    transition: color 0.3s ease, transform 0.3s ease;
}

.dtd-benefit__link-cue i { font-size: 11.5px; }

.dtd-benefit__item--link:hover .dtd-benefit__link-cue,
.dtd-benefit__item--link:focus-visible .dtd-benefit__link-cue {
    color: var(--dtd-dark);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .dtd-benefit__item--link .dtd-benefit__card,
    .dtd-benefit__link-cue { transition: none; }
    .dtd-benefit__item--link:hover .dtd-benefit__link-cue { transform: none; }
}