@charset "UTF-8";
/* 상세 v2 - contact 섹션. 모든 선택자는 .dv2 하위로 한정. */

/* ---------- 문의 / 사진 더보기 (.link_comment) ---------- */
.dv2 .dv2-contact .link_comment {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.dv2 .dv2-contact .link_comment dl {
    padding: 0;
}

.dv2 .dv2-contact .link_comment dl + dl {
    margin-top: 16px;
}

.dv2 .dv2-contact .link_comment dt {
    padding-bottom: 8px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    color: var(--dv2-text);
}

.dv2 .dv2-contact .link_comment dl:first-child dt {
    padding-bottom: 10px;
    font-size: 24px;
}

.dv2 .dv2-contact .link_comment dd {
    font-size: 1rem;
    line-height: 1.6;
    color: #505050;
}

/* 번들 문구의 <strong>(Autowini Purchase Balance) 굵게 — 리셋 CSS 영향 없이 명시 */
.dv2 .dv2-contact .link_comment dd strong {
    font-weight: 700;
}

.dv2 .dv2-contact .link_comment a {
    font-weight: normal;
    color: #2473FF;
}

.dv2 .dv2-contact .link_comment .arrow {
    display: inline-block;
    margin-top: 8px;
    padding-right: 0;
    background: none;
    font-size: 1rem;
}

.dv2 .dv2-contact .link_comment .arrow::after {
    content: "\2192";
    margin-left: 4px;
}

/* 마스코트: 문구 아래 우측 하단 */
.dv2 .dv2-contact .dv2-contact__mascot {
    margin-top: 8px;
    text-align: right;
}

.dv2 .dv2-contact .dv2-contact__mascot img {
    width: 160px;
    height: auto;
}

/* ---------- 담당자 / 현지 사무소 (.topStaff > .contactInfo > .popSupport, ad_support.jsp 에서 생성) ---------- */
/* v1은 이 박스를 left:-220px에 띄우고 #popSupport에 스크롤 핸들러가 인라인 `top`을 줌: 일반 흐름에 고정. */
.dv2 .dv2-contact .topStaff {
    position: static;
    top: auto;
    left: auto;
}

/* DOM 순서는 현지 사무소 (prepend) → 담당자 (append); 디자인은 담당자가 먼저. */
.dv2 .dv2-contact .contactInfo {
    display: flex;
    flex-direction: column;
}

.dv2 .dv2-contact .contactInfo .localStaff {
    order: -1;
}

.dv2 .dv2-contact .topStaff .popSupport {
    display: grid;
    grid-template-columns: auto 1fr 56px;
    column-gap: 6px;
    align-items: center;
    position: static;
    width: auto;
    margin: 16px 0 0;
    padding: 16px 0 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--dv2-border);
    border-radius: 0;
    text-align: left;
}

/* 현지 사무소: .officeInfo 자식을 블록 그리드로 끌어올림 */
.dv2 .dv2-contact .topStaff .popSupport .officeInfo {
    display: contents;
}

/* 제목: "Contact Our Staff" / 현지 사무소 제목 */
.dv2 .dv2-contact .topStaff .popSupport > p {
    grid-column: 1 / 3;
    grid-row: 1;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    color: var(--dv2-text);
}

/* 아바타: 제목 + 이름/언어 옆; 아래 전화 행은 전체 폭 사용 */
.dv2 .dv2-contact .topStaff .popSupport .profileImg {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    position: static;
    width: 56px;
    height: 56px;
    margin-left: 6px;
    border-radius: 50%;
    overflow: hidden;
}

.dv2 .dv2-contact .topStaff .popSupport .profileImg img {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0;
    object-fit: cover;
}

.dv2 .dv2-contact .topStaff .popSupport .profileName {
    grid-column: 1 / 3;
    grid-row: 2;
    padding-top: 8px;
}

.dv2 .dv2-contact .topStaff .popSupport .profileName b {
    font-size: 11px;
    font-weight: normal;
    color: #505050;
}

.dv2 .dv2-contact .topStaff .popSupport .profileName em {
    padding: 0;
    font-size: 18px;
    font-weight: bold;
    font-style: normal;
    line-height: 1.4;
    color: var(--dv2-text);
}

.dv2 .dv2-contact .topStaff .popSupport .profileName span {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--dv2-text-mute);
}

/* 전화 + 메신저 아이콘 한 행 */
.dv2 .dv2-contact .topStaff .popSupport .phone,
.dv2 .dv2-contact .topStaff .popSupport .officeNum {
    grid-column: 1;
    grid-row: 3;
    margin: 8px 0 0;
    font-size: 17px;
    font-weight: bold;
    line-height: 18px;
    color: var(--dv2-text);
    letter-spacing: 0;
    white-space: nowrap;
}

.dv2 .dv2-contact .topStaff .popSupport .popBtn_wrap {
    grid-column: 2 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.dv2 .dv2-contact .topStaff .popSupport_whatsapp,
.dv2 .dv2-contact .topStaff .popSupport_viber,
.dv2 .dv2-contact .topStaff .popSupport_telegram {
    margin: 0;
}

.dv2 .dv2-contact .topStaff .popSupport_whatsapp a,
.dv2 .dv2-contact .topStaff .popSupport_viber a,
.dv2 .dv2-contact .topStaff .popSupport_telegram a {
    display: block;
    position: static;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
}

/* ic_whatsapp.svg: 원이 캔버스의 ~41/59 뿐이라, Viber/Telegram처럼 박스를 채우도록 이미지 확대 (x1.44) */
.dv2 .dv2-contact .topStaff .popSupport_whatsapp a {
    background-size: 29px;
}

/* 비회원: 메신저 아이콘 대신 "Register for free" */
.dv2 .dv2-contact .topStaff .popSupport_btnJoin {
    grid-column: 1 / -1;
    margin-top: 8px;
}

.dv2 .dv2-contact .topStaff .popSupport_btnJoin p {
    padding: 0 0 6px;
    font-size: 12px !important;
    line-height: 1.5;
    color: #505050 !important;
}

/* "View Local Office Info →" */
.dv2 .dv2-contact .topStaff .popSupport .popSupport_btnLti {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
    font-weight: normal;
    color: #2473FF;
}

.dv2 .dv2-contact .topStaff .popSupport .popSupport_btnLti::after {
    content: "\2192";
    margin-left: 4px;
}

/* 현지 사무소 블록: "Local Office in <Country>" 대신 대리점명을 제목으로 */
.dv2 .dv2-contact .LTItitle { display: none; }
.dv2 .dv2-contact .topStaff .popSupport .officeInfo .profileName b { display: block; margin-bottom: 4px; font-size: 20px; font-weight: 700; color: var(--dv2-text); }

/* 담당자 / 현지 사무소 블록은 ad_support.jsp JS가 채움; 담당자·현지 사무소 둘 다 없으면 빈 블록 (과 구분선) 제거 */
.dv2 .dv2-contact .topStaff:not(:has(.popSupport)) {
    display: none;
}

/* ---------- Contact Our Staff (Figma 2222:2410) ----------
   제목 20px Bold #303030 / 이름 18px Medium / 언어 12px #707578 / 전화 17px Medium + 메신저 24px, 우측 80px 아바타 */
.dv2 .dv2-contact .topStaff .popSupport.localStaff {
    grid-template-columns: auto 1fr 80px;
    column-gap: 8px;
    margin-top: 24px;
    padding-top: 24px;
    border-top-color: #e4eaef;
}

.dv2 .dv2-contact .topStaff .popSupport.localStaff > p {
    font-size: 20px;
    line-height: 1.5;
    color: #303030;
}

.dv2 .dv2-contact .topStaff .popSupport.localStaff .profileImg {
    grid-row: 1 / span 3;
    align-self: center;
    width: 80px;
    height: 80px;
    margin-left: 0;
}

.dv2 .dv2-contact .topStaff .popSupport.localStaff .profileImg img {
    width: 80px;
    height: 80px;
}

.dv2 .dv2-contact .topStaff .popSupport.localStaff .profileName {
    padding-top: 4px;
}

.dv2 .dv2-contact .topStaff .popSupport.localStaff .profileName em {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #000;
}

.dv2 .dv2-contact .topStaff .popSupport.localStaff .profileName span {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: #707578;
}

.dv2 .dv2-contact .topStaff .popSupport.localStaff .phone {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    color: #000;
}

.dv2 .dv2-contact .topStaff .popSupport.localStaff .popBtn_wrap {
    grid-column: 2;
    margin-top: 8px;
}

/* 메신저 24px, 디자인 순서 WhatsApp → Viber → Telegram (JS는 Viber를 먼저 append) */
.dv2 .dv2-contact .topStaff .popSupport.localStaff .popSupport_whatsapp { order: 1; }
.dv2 .dv2-contact .topStaff .popSupport.localStaff .popSupport_viber { order: 2; }
.dv2 .dv2-contact .topStaff .popSupport.localStaff .popSupport_telegram { order: 3; }

.dv2 .dv2-contact .topStaff .popSupport.localStaff .popSupport_whatsapp a,
.dv2 .dv2-contact .topStaff .popSupport.localStaff .popSupport_viber a,
.dv2 .dv2-contact .topStaff .popSupport.localStaff .popSupport_telegram a {
    width: 24px;
    height: 24px;
}

.dv2 .dv2-contact .topStaff .popSupport.localStaff .popSupport_whatsapp a {
    background-size: 35px;
}

/* ---------- 현지 사무소 (Figma 2222:2426) — Contact Our Staff와 같은 레이아웃 ----------
   대리점 20px Bold #303030 / 담당자 18px Medium #000 / 언어 12px #707578 / 전화 17px Medium + 메신저 24px,
   우측 80px 아바타, "View Local Office Info →" 13px Medium #2473FF 아래 16px */
.dv2 .dv2-contact .topStaff #popLTIinfo {
    grid-template-columns: auto 1fr 80px;
    column-gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top-color: #e4eaef;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .profileImg {
    grid-row: 1 / span 3;
    align-self: center;
    width: 80px;
    height: 80px;
    margin-left: 0;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .profileImg img {
    width: 80px;
    height: 80px;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .profileName {
    grid-row: 1 / span 2;
    padding-top: 0;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .officeInfo .profileName b {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #303030;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .profileName em {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.404;
    color: #000;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .profileName span {
    display: block;
    margin-top: 4px;
    line-height: 1.5;
    color: #707578;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .officeNum {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.554;
    color: #000;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .popSupport_whatsapp a,
.dv2 .dv2-contact .topStaff #popLTIinfo .popSupport_viber a,
.dv2 .dv2-contact .topStaff #popLTIinfo .popSupport_telegram a {
    width: 24px;
    height: 24px;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .popSupport_whatsapp a {
    background-size: 35px;
}

.dv2 .dv2-contact .topStaff #popLTIinfo .popSupport_btnLti {
    margin-top: 16px;
    font-weight: 500;
}

/* 메신저는 가운데 컬럼에 유지해 80px 아바타 아래로 넘어가지 않게 함 */
.dv2 .dv2-contact .topStaff #popLTIinfo .popBtn_wrap {
    grid-column: 2;
}

/* ---------- 연락처 팝업 (#customerSupportPop, _shell-form.jsp) — 메신저 순서·간격 통일 ----------
   담당자는 JS가 Viber → WhatsApp 순, 현지 사무소는 WhatsApp → Viber 순으로 그려 팝업마다 달랐고,
   WhatsApp 링크만 58px 박스라 간격이 들쭉날쭉(Viber·Telegram은 붙어 보임). 우측 패널과 같은 WhatsApp → Viber → Telegram, 40px 아이콘 + 간격 12px.
   팝업은 .dv2 밖에 있으므로 v2 페이지(body:has(.dv2))로만 한정 */
body:has(.dv2) .customerSupportPop .popBtn_wrap {
    gap: 12px;
}

body:has(.dv2) .customerSupportPop .popBtn_wrap > div {
    margin: 0;
}

body:has(.dv2) .customerSupportPop .popSupport_whatsapp { order: 1; }
body:has(.dv2) .customerSupportPop .popSupport_viber { order: 2; }
body:has(.dv2) .customerSupportPop .popSupport_telegram { order: 3; }

body:has(.dv2) .customerSupportPop .popSupport_whatsapp a,
body:has(.dv2) .customerSupportPop .popSupport_viber a,
body:has(.dv2) .customerSupportPop .popSupport_telegram a {
    width: 40px;
    height: 40px;
}

/* ic_whatsapp.svg 는 여백 포함 그림이라 56px 로 키워 40px 원에 맞춤 (detail.css .topStaff 와 같은 값) */
body:has(.dv2) .customerSupportPop .popSupport_whatsapp a {
    background-size: 56px;
}