/* ============================================================
   SNS 채널 아이콘 (Figma: SNS 버튼 컴포넌트)
   - 원형 배경 + 단색 글리프(mask)로 구성해 활성/비활성을 색만 바꿔 표현한다.
   - 사용:   <i class="sns_ico" data-sns="kakao"></i>
             비활성: class="sns_ico off"   크기: --sns-size (기본 90px)
   - 채널:   kakao naver google apple email facebook x linkedin band link more
   - 공유 팝업(share-modal, shadow DOM)에서도 이 파일을 link 해서 같은 규칙을 쓴다.
   ============================================================ */
.sns_ico {--sns-size: 5.625rem; --sns-bg: #f0f0f0; --sns-fg: #fff; --sns-glyph-w: 53.33%; --sns-glyph-h: 53.33%; --sns-mask: none; position: relative; display: inline-block; width: var(--sns-size); aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; background-color: var(--sns-bg); vertical-align: middle; overflow: hidden;}
.sns_ico::before {content: ""; position: absolute; left: 50%; top: 50%; width: var(--sns-glyph-w); height: var(--sns-glyph-h); transform: translate(-50%, -50%); background-color: var(--sns-fg); -webkit-mask-image: var(--sns-mask); mask-image: var(--sns-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;}
/* 채널별 배경·글리프 (글리프 박스 비율은 Figma inset 값) */
.sns_ico[data-sns="kakao"] {--sns-bg: #fee500; --sns-fg: #191919; --sns-mask: url(/front/images/sns/kakao.svg?v=1792391315017);}
.sns_ico[data-sns="naver"] {--sns-bg: #03c75a; --sns-glyph-w: 100%; --sns-glyph-h: 100%; --sns-mask: url(/front/images/sns/naver.svg?v=1792391315017);}
.sns_ico[data-sns="google"] {--sns-bg: #fff; --sns-glyph-w: 55.56%; --sns-glyph-h: 55.56%; border: 1px solid #f0f0f0;}
.sns_ico[data-sns="google"]::before {background: url(/front/images/sns/google.png?v=1792391315017) no-repeat center / contain; -webkit-mask-image: none; mask-image: none;} /* 구글 G는 다색이라 mask 대신 이미지. SVG 는 Safari 에서 내부 mask 경계에 빨간 테두리가 비쳐 PNG(150px, 50px@3x) 사용 */
.sns_ico[data-sns="apple"] {--sns-bg: #000; --sns-glyph-w: 100%; --sns-glyph-h: 100%; --sns-mask: url(/front/images/sns/apple.svg?v=1792391315017);}
.sns_ico[data-sns="email"] {--sns-bg: #ff7777; --sns-glyph-w: 79.34%; --sns-glyph-h: 17.49%; --sns-mask: url(/front/images/sns/email.svg?v=1792391315017);}
.sns_ico[data-sns="facebook"] {--sns-bg: #0866ff; --sns-mask: url(/front/images/sns/facebook.svg?v=1792391315017);}
.sns_ico[data-sns="x"] {--sns-bg: #000; --sns-mask: url(/front/images/sns/x.svg?v=1792391315017);}
.sns_ico[data-sns="linkedin"] {--sns-bg: #0a66c2; --sns-glyph-w: 100%; --sns-glyph-h: 100%; --sns-mask: url(/front/images/sns/linkedin.svg?v=1792391315017);}
.sns_ico[data-sns="band"] {--sns-bg: #00ee65; --sns-fg: #002a19; --sns-glyph-w: 46.67%; --sns-glyph-h: 56.89%; --sns-mask: url(/front/images/sns/band.svg?v=1792391315017);}
.sns_ico[data-sns="link"] {--sns-bg: #f8f8f8; --sns-fg: #ff7777; --sns-glyph-w: 44.44%; --sns-glyph-h: 44.44%; border: 1px solid #f0f0f0; --sns-mask: url(/front/images/sns/link.svg?v=1792391315017);}
.sns_ico[data-sns="more"] {--sns-bg: #f8f8f8; --sns-fg: #ff7777; border: 1px solid #f0f0f0; --sns-mask: url(/front/images/sns/more.svg?v=1792391315017);}
/* 비활성 (연동되지 않은 로그인 수단 등): 회색 배경 + 흰 글리프 */
.sns_ico.off {--sns-bg: #f0f0f0; --sns-fg: #fff; border-color: #f0f0f0;}
.sns_ico.off[data-sns="google"]::before {background: var(--sns-fg); -webkit-mask-image: url(/front/images/sns/google_mono.svg?v=1792391315017); mask-image: url(/front/images/sns/google_mono.svg?v=1792391315017);}