/* 폰트 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

/* 전체 컨테이너 */
.wnoti-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 20px 16px;
  background: #E0E0E0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  display: flex;
  box-sizing: border-box;
}
.wnoti-container * {
    box-sizing: border-box;
}

/* 모바일 청첩장 보기 버튼 */
.wnoti-back-btn {
  align-self: stretch;
  padding: 8px 16px 8px 8px;
  background: #f2f2f2;
  border-radius: 12px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.wnoti-back-btn .icon {
  width: 16px;
  height: 16px;
  position: relative;
  overflow: hidden;
}

.wnoti-back-btn .icon-inner {
  width: 7px;
  height: 13px;
  left: 4.5px;
  top: 1.5px;
  position: absolute;
  background: black;
}

.wnoti-back-btn .text {
  color: #666666;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 12px;
}

/* 메인 카드 */
.wnoti-main-card {
  align-self: stretch;
  padding-bottom: 24px;
  background: #FAFAFA;
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  display: flex;
}

.wnoti-main-card .main-image {
    width: 100%;
    position: relative;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
}
.wnoti-main-card .main-image img {
    width: 100%;
    height: auto;
    display: block;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.wnoti-main-card .main-image .main-image-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #FAFAFA 100%);
    pointer-events: none;
}

/* 이름 섹션 */
.wnoti-names-section {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.wnoti-name-row {
  align-self: stretch;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

.wnoti-parent-name {
  color: #666666;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 22px;
}

.wnoti-dot {
  width: 2px;
  height: 2px;
  background: #666666;
  border-radius: 9999px;
}

.wnoti-relation {
  width: 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.wnoti-relation-text {
  color: #666666;
  font-size: 13px;
  font-family: 'Pretendard Variable';
  font-weight: 400;
  line-height: 20px;
}

.wnoti-person-name {
  text-align: center;
  color: #1D1D1D;
  font-size: 16px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 24px;
}

/* 정보 카드 그리드 */
.wnoti-info-grid {
  align-self: stretch;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  display: inline-flex;
}

.wnoti-info-card {
  flex: 1 1 0;
  height: 174.5px;
  padding: 16px;
  background: #FAFAFA;
  overflow: hidden;
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  display: inline-flex;
  box-sizing: border-box;
}

.wnoti-info-card .title {
  align-self: stretch;
  color: black;
  font-size: 18px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 28px;
}

.wnoti-info-card .icon {
  width: 48px;
  height: 48px;
  position: relative;
  overflow: hidden;
}

.wnoti-info-card .icon-inner {
  position: absolute;
  /* background: #CCCCCC; */
}

/* 카운트다운 바 */
.wnoti-countdown {
  align-self: stretch;
  padding: 8px 20px;
  background: #FFE033;
  overflow: hidden;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
}

.wnoti-countdown .left {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
}

.wnoti-countdown .icon {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

/* .wnoti-countdown .icon-inner {
  width: 16.67px;
  height: 16.67px;
  left: 1.67px;
  top: 1.67px;
  position: absolute;
  background: black;
} */

.wnoti-countdown .text {
  color: black;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 22px;
}

/* 지도 앱 연결 섹션 */
.wnoti-map-section {
  align-self: stretch;
  padding: 16px 12px;
  background: #f2f2f2;
  overflow: hidden;
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.wnoti-map-apps {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.wnoti-map-app-row {
  align-self: stretch;
  padding: 8px;
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
}

.wnoti-map-app-left {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
}

.wnoti-map-app-icon {
  width: 48px;
  height: 48px;
  position: relative;
}

.wnoti-map-app-name {
  color: #666666;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 12px;
}

.wnoti-connect-btn {
  padding: 8px 12px;
  background: black;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.wnoti-connect-btn .text {
  color: #FAFAFA;
  font-size: 12px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 10px;
}

/* 주소 복사 바 */
.wnoti-address-bar {
  align-self: stretch;
  height: 36px;
  padding: 4px 4px 4px 12px;
  background: #FAFAFA;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
  box-sizing: border-box;
}

.wnoti-address-text {
  color: #666666;
  font-size: 13px;
  font-family: 'Pretendard Variable';
  font-weight: 400;
  line-height: 10px;
  max-width: 66%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
}

.wnoti-copy-btn {
  padding: 6px 8px;
  background: #f2f2f2;
  border-radius: 12px;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: flex;
}

.wnoti-copy-btn .icon {
  width: 16px;
  height: 16px;
  position: relative;
  display: flex;
}

/* .wnoti-copy-btn .icon-inner {
  width: 14.26px;
  height: 14.26px;
  left: 0.87px;
  top: 0.87px;
  position: absolute;
  background: #666666;
} */

.wnoti-copy-btn .text {
  color: #666666;
  font-size: 12px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 10px;
}

/* 알림 배너 */
.wnoti-alert-banner {
  align-self: stretch;
  padding: 8px 20px;
  background: #3161E6;
  overflow: hidden;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.wnoti-alert-banner .text {
  color: white;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 22px;
}

/* 콘텐츠 카드 */
.wnoti-content-card {
  align-self: stretch;
  padding: 4px;
  background: #f2f2f2;
  overflow: hidden;
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.wnoti-content-card.white-bg {
  background: #FAFAFA;
  gap: 0;
}

/* ATM 비주얼 */
.wnoti-atm-visual {
  width: 100%;
  height: 187px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.wnoti-atm-visual img {
    max-width: 100%;
}

/* 섹션 타이틀 */
.wnoti-section-title {
  align-self: stretch;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

/* .wnoti-section-title.left {
  justify-content: flex-start;
} */

.wnoti-section-title .text {
  color: black;
  font-size: 18px;
  font-family: 'Pretendard Variable';
  font-weight: 600;
  line-height: 28px;
}

/* 콘텐츠 박스 */
.wnoti-content-box {
  align-self: stretch;
  padding: 12px 8px;
  /* padding: 20px 16px; */
  background: #FAFAFA; 
  border-radius: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.wnoti-content-box .content-text {
  align-self: stretch;
  color: black;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 400;
  line-height: 22px;
}
.wnoti-content-box .content-text ul {
    padding-left: 24px;
}

/* 에디터 콘텐츠 공통 스타일 */
/* .wnoti-accordion-content,
.wnoti-content-box .content-text {
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 400;
  line-height: 1.6;
}

.wnoti-accordion-content ul,
.wnoti-content-box .content-text ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
  margin: 8px 0;
}

.wnoti-accordion-content li,
.wnoti-content-box .content-text li {
  margin-bottom: 8px;
}

.wnoti-accordion-content b,
.wnoti-accordion-content strong,
.wnoti-content-box .content-text b,
.wnoti-content-box .content-text strong {
  font-weight: 600;
} */

/* 하이라이트 박스 (에디터에서 생성) */
.wnoti-accordion-content .highlight-box,
.wnoti-content-box .content-text .highlight-box {
  width: 100%;
  padding: 8px 12px;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

/* 빨간색 하이라이트 박스 */
.wnoti-accordion-content .highlight-box--red,
.wnoti-content-box .content-text .highlight-box--red {
  background: #FFF0F0;
  border: 1px solid #FFD0D0;
  color: #D32F2F;
}

/* 파란색 하이라이트 박스 */
.wnoti-accordion-content .highlight-box--blue,
.wnoti-content-box .content-text .highlight-box--blue {
  background: #F0F4FF;
  border: 1px solid #D0DFFF;
  color: #1976D2;
}

/* 기본 하이라이트 박스 (fallback) */
.wnoti-accordion-content .highlight-box:not(.highlight-box--red):not(.highlight-box--blue),
.wnoti-content-box .content-text .highlight-box:not(.highlight-box--red):not(.highlight-box--blue) {
  background: #F3F3F3;
  border: 1px solid #E0E0E0;
  color: #333;
}

/* 주소 라벨 */
.wnoti-accordion-content .address-label,
.wnoti-content-box .content-text .address-label {
  display: inline-block;
  background: #f2f2f2;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  /* color: #666; */
  margin-right: 8px;
}

/* 주소 박스 (address-box) */
.wnoti-accordion-content .address-box,
.wnoti-content-box .content-text .address-box {
  padding: 14px 16px;
  background: #F8F8F8;
  border-radius: 10px;
  /* color: #444; */
  margin: 8px 0;
}

.wnoti-accordion-content .address-box .address-label,
.wnoti-content-box .content-text .address-box .address-label {
  display: block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 400;
}

.wnoti-accordion-content .address-box .address-value,
.wnoti-content-box .content-text .address-box .address-value {
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: #000;
}

/* 지하철 노선 색상 등 inline color 유지 */
.wnoti-accordion-content [style*="color"],
.wnoti-content-box .content-text [style*="color"] {
  /* inline style이 적용되므로 별도 처리 불필요 */
}

/* 아코디언 아이템 */
.wnoti-accordion-item {
  align-self: stretch;
  padding: 8px;
  background: #FAFAFA;
  border-radius: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* gap: 8px; */
  display: flex;
}

.wnoti-accordion-header {
  align-self: stretch;
  padding: 12px 8px;
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
}

.wnoti-accordion-header .left {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  display: flex;
}

.wnoti-accordion-header .icon {
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
}

.wnoti-accordion-header .icon-inner {
  position: absolute;
  background: black;
}

.wnoti-accordion-header .title {
  color: black;
  font-size: 16px;
  font-family: 'Pretendard Variable';
  font-weight: 600;
  line-height: 24px;
}

.wnoti-accordion-arrow {
  width: 20px;
  height: 20px;
  position: relative;
}

.wnoti-accordion-arrow .arrow {
  width: 14px;
  height: 6px;
  left: 3px;
  top: 7px;
  position: absolute;
  outline: 1.5px black solid;
  outline-offset: -0.75px;
}

.wnoti-accordion-content {
  align-self: stretch;
  padding: 0 8px;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 8px;
  /* display: flex; */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.wnoti-accordion-item.open .wnoti-accordion-content {
  max-height: 500px;
  opacity: 1;
  padding: 12px 8px;
  font-size: 15px;
  line-height: 1.6;
  border-top: 1px solid #f2f2f2;
}

.highlight-box {
    width: 100%; box-sizing: border-box;
}

/* 주소 박스 */
.wnoti-address-box {
  align-self: stretch;
  padding: 14px 16px;
  background: #F3F3F3;
  border-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.wnoti-address-box .header {
  align-self: stretch;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.wnoti-address-box .label {
  flex: 1 1 0;
  color: rgb(153, 153, 153);
  font-size: 13px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 20px;
}

.wnoti-address-box .copy-icon {
  width: 16px;
  height: 16px;
  position: relative;
}

.wnoti-address-box .copy-icon-inner {
  width: 14.26px;
  height: 14.26px;
  left: 0.87px;
  top: 0.87px;
  position: absolute;
  background: rgba(64, 64, 64, 0.6);
}

.wnoti-address-box .address {
  align-self: stretch;
  color: black;
  font-size: 15px;
  font-family: 'Pretendard Variable';
  font-weight: 400;
  line-height: 24px;
}

/* 약도 보기 버튼 */
.wnoti-map-view-btn {
  align-self: stretch;
  padding: 16px;
  background: #434343;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
}

.wnoti-map-view-btn .text {
  color: white;
  font-size: 16px;
  font-family: 'Pretendard Variable';
  font-weight: 600;
  line-height: 24px;
}

.wnoti-map-view-btn .icon {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

.wnoti-map-view-btn .icon-inner {
  width: 15px;
  height: 15px;
  left: 2.5px;
  top: 2.5px;
  position: absolute;
  background: white;
}

/* 연락처 섹션 */
.wnoti-contact-section {
  align-self: stretch;
  padding: 16px 12px;
  background: #f2f2f2;
  overflow: hidden;
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.wnoti-contact-row {
  align-self: stretch;
  padding-left: 8px;
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
}

.wnoti-contact-row .label {
  color: black;
  font-size: 15px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 24px;
}

.wnoti-contact-row .right {
  width: 210px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.wnoti-contact-row .phone {
  text-align: center;
  color: #666666;
  font-size: 15px;
  font-family: 'Pretendard Variable';
  font-weight: 400;
  line-height: 24px;
}

.wnoti-call-btn {
  padding: 6px 20px;
  background: #FFE033;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.wnoti-call-btn .icon {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

.wnoti-call-btn .icon-inner {
  width: 15px;
  height: 15px;
  left: 2.5px;
  top: 2.5px;
  position: absolute;
  background: black;
}

/* 스냅 업로드 섹션 */
.wnoti-snap-section {
  width: 100%;
  height: 199px;
  position: relative;
}

/* .wnoti-snap-section .image {
  width: 320.95px;
  height: 253.68px;
  left: 25.05px;
  top: -22.16px;
  position: absolute;
  object-fit: cover;
} */

.wnoti-snap-section .badge {
  width: 32px;
  height: 32px;
  right: 10px;
  top: 10px;
  position: absolute;
  overflow: hidden;
}

.wnoti-snap-section .badge-inner {
  width: 23.92px;
  height: 23.92px;
  left: 4.08px;
  top: 4px;
  position: absolute;
  background: #1572F3;
}

.wnoti-snap-upload-area {
  width: 100%;
  padding: 12px 8px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: flex;
  box-sizing: border-box;
  position: relative; 
  z-index: 2;
}

.wnoti-kakao-upload-btn {
  align-self: stretch;
  /* height: 52px; */
  padding: 16px;
  background: #FAE100;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.wnoti-kakao-upload-btn .icon {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

.wnoti-kakao-upload-btn .icon-inner {
  width: 16.75px;
  height: 16.75px;
  left: 1.63px;
  top: 1.63px;
  position: absolute;
  background: #1E1E1E;
}

.wnoti-kakao-upload-btn .text {
  color: black;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 12px;
}

/* 공유 버튼 그룹 */
.wnoti-share-btns {
  align-self: stretch;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  display: inline-flex;
}

.wnoti-share-btn {
  flex: 1 1 0;
  padding: 16px;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

.wnoti-share-btn.kakao {
  background: #FAE100;
}

.wnoti-share-btn.kakao .icon-inner {
  width: 18.92px;
  height: 17.38px;
  left: 0.54px;
  top: 1.31px;
  position: absolute;
  background: #231F20;
}

.wnoti-share-btn.kakao .text {
  color: black;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 600;
  line-height: 12px;
}

.wnoti-share-btn.url {
  background: #434343;
}

.wnoti-share-btn.url .icon-inner {
  width: 15px;
  height: 15px;
  left: 2.5px;
  top: 2.5px;
  position: absolute;
  background: white;
}

.wnoti-share-btn.url .text {
  color: white;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  line-height: 12px;
}

.wnoti-share-btn .icon {
  width: 20px;
  height: 20px;
  position: relative;
}

/* 푸터 */
.wnoti-footer {
  align-self: stretch;
  padding: 20px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.wnoti-footer .logo {
  width: 106.67px;
  height: 16px;
  position: relative;
}

.wnoti-footer .logo-inner {
  width: 105.47px;
  height: 15.9px;
  left: 0.6px;
  top: 0.05px;
  position: absolute;
  background: #A3A3A3;
}



/* 뒤로가기 버튼 화살표 아이콘 */
.wnoti-back-btn .icon-inner {
  width: 16px;
  height: 16px;
  /* border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #666666; */
  background: transparent;
  left: 0px;
  top: 0px;
  display: flex;
}

/* 카운트다운 시계 아이콘 */
.wnoti-countdown .icon-inner {
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  border: 2px solid black;
  border-radius: 50%;
  background: transparent;
}

.wnoti-countdown .icon-inner::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 5px;
  background: black;
  left: 5px;
  top: 2px;
}

.wnoti-countdown .icon-inner::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 2px;
  background: black;
  left: 5px;
  top: 5px;
}

/* 정보 카드 - 장소 아이콘 (핀) */
.wnoti-info-card:first-child .icon-inner {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url('/app/wnoti/images/widget-venue.svg');
  background-size: cover;
}

/* 정보 카드 - 날짜 아이콘 (달력) */
.wnoti-info-card:last-child .icon-inner {
  width: 100%;
  height: 100%;
  background-image: url('/app/wnoti/images/calendar-time.svg');
  background-size: cover;
}

/* 지도 앱 아이콘 border-radius */
.wnoti-naver-icon .bg,
.wnoti-tmap-icon .bg,
.wnoti-kakao-navi-icon .bg {
  border-radius: 8px;
}

/* 아코디언 화살표 V자 모양 */
.wnoti-accordion-arrow .arrow {
  width: 10px;
  height: 10px;
  border: none;
  outline: none;
  border-right: 2px solid #666666;
  border-bottom: 2px solid #666666;
  transform: rotate(45deg);
  left: 5px;
  top: 3px;
}

.wnoti-accordion-item.open .wnoti-accordion-arrow .arrow {
  transform: rotate(-135deg);
  top: 7px;
}

/* 오시는 길 아코디언 아이콘들 */


/* 연락처 전화 아이콘 */
.wnoti-call-btn .icon-inner {
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: black;
  border-radius: 2px;
  transform: rotate(-10deg);
}

/* 복사 아이콘 */
.wnoti-copy-btn .icon-inner,
.wnoti-address-box .copy-icon-inner {
  width: 10px;
  height: 12px;
  border: 2px solid currentColor;
  background: transparent;
  border-radius: 2px;
  position: absolute;
}

.wnoti-copy-btn .icon-inner {
  border-color: #666666;
  left: 1px;
  top: 1px;
}

.wnoti-copy-btn .icon-inner::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 12px;
  border: 2px solid #666666;
  background: #f2f2f2;
  border-radius: 2px;
  left: 3px;
  top: 3px;
}

.wnoti-address-box .copy-icon-inner {
  border-color: rgba(64, 64, 64, 0.6);
  left: 0;
  top: 0;
}

.wnoti-address-box .copy-icon-inner::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 12px;
  border: 2px solid rgba(64, 64, 64, 0.6);
  background: #F3F3F3;
  border-radius: 2px;
  left: 3px;
  top: 3px;
}

/* 공유 버튼 - 카카오톡 아이콘 */
.wnoti-share-btn.kakao .icon-inner {
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: #231F20;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* 공유 버튼 - URL 복사 아이콘 (링크) */
.wnoti-share-btn.url .icon-inner {
  width: 8px;
  height: 14px;
  left: 4px;
  top: 3px;
  background: transparent;
  border: 2px solid white;
  border-radius: 8px;
  transform: rotate(45deg);
}

.wnoti-share-btn.url .icon-inner::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 14px;
  border: 2px solid white;
  border-radius: 8px;
  background: transparent;
  left: 4px;
  top: -4px;
}

/* 약도 보기 버튼 아이콘 (화살표) */
.wnoti-map-view-btn .icon-inner {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid white;
  background: transparent;
  left: 6px;
  top: 4px;
}

/* 카카오 업로드 아이콘 */
.wnoti-kakao-upload-btn .icon-inner {
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #1E1E1E;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* 아코디언 콘텐츠 텍스트 */
.wnoti-accordion-content .content-text {
  align-self: stretch;
  color: #333333;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 400;
  line-height: 22px;
}

/* 호버 효과 */
.wnoti-back-btn:hover {
  background: #E0E0E0;
  cursor: pointer;
}

.wnoti-connect-btn:hover {
  background: #333333;
  cursor: pointer;
}

.wnoti-copy-btn:hover {
  background: #E0E0E0;
  cursor: pointer;
}

.wnoti-call-btn:hover {
  background: #FFD700;
  cursor: pointer;
}

.wnoti-map-view-btn:hover {
  background: #333333;
  cursor: pointer;
}

/* .wnoti-accordion-header:hover {
  background: #F0F0F0;
  cursor: pointer;
  border-radius: 4px;
} */

.wnoti-share-btn:hover {
  opacity: 0.9;
  cursor: pointer;
}

.wnoti-kakao-upload-btn:hover {
  background: #E6D000;
  cursor: pointer;
}

.wnoti-map-app-row:hover {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
}

/* 스냅 섹션 배지 아이콘 (카카오) */
.wnoti-snap-section .badge-inner {
  width: 20px;
  height: 20px;
  left: 6px;
  top: 6px;
  background: white;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* 푸터 로고 스타일 */
.wnoti-footer .logo-inner {
  width: 105px;
  height: 16px;
  left: 1px;
  top: 0;
  background: transparent;
  color: #A3A3A3;
  font-size: 14px;
  font-family: 'Pretendard Variable';
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wnoti-footer .logo-inner::before {
  content: 'Wedding Noti';
}

/* Transition 효과 */
.wnoti-back-btn,
.wnoti-connect-btn,
.wnoti-copy-btn,
.wnoti-call-btn,
.wnoti-map-view-btn,
.wnoti-accordion-header,
.wnoti-share-btn,
.wnoti-kakao-upload-btn,
.wnoti-map-app-row {
  transition: all 0.2s ease;
}

.wnoti-accordion-arrow .arrow {
  transition: transform 0.3s ease;
}

/* 전화 아이콘 개선 */
/* .wnoti-call-btn .icon-inner {
  width: 12px;
  height: 12px;
  left: 4px;
  top: 4px;
  background: transparent;
  border: 2px solid black;
  border-radius: 2px 8px 2px 8px;
  transform: rotate(0deg);
} */

/* 스냅 섹션 이미지 */
.wnoti-snap-section .image {
  width: 320px;
  height: auto;
  left: 0; right: 0;
  top: -25px;
  object-fit: cover;
  margin: auto;
  position: absolute;
}

/* 스냅 섹션 배지 */
/* .wnoti-snap-section .badge {
  background: #1572F3;
  border-radius: 50%;
} */

/* 알림 배너 아이콘 */
/* .wnoti-alert-banner::before {
  content: '!';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: white;
  color: #3161E6;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
} */

/* 메인 이미지 그라데이션 오버레이 */
.wnoti-main-card {
  position: relative;
}


/* 정보 카드 아이콘 - 장소 핀 개선 */
.wnoti-info-card:first-child .icon-inner {
  width: 100%;
  height: 100%;
  /* left: 10px;
  top: 6px; */
  /* background: transparent; */
  /* border-radius: 0; */
  /* clip-path: none; */
}

/* .wnoti-info-card:first-child .icon-inner::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  background: #CCCCCC;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  left: 0;
  top: 0;
}

.wnoti-info-card:first-child .icon-inner::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #FAFAFA;
  border-radius: 50%;
  left: 9px;
  top: 5px;
} */

/* 달력 아이콘 개선 */
.wnoti-info-card:last-child .icon-inner::before {
  width: calc(100% - 6px);
  height: 8px;
  top: 4px;
  left: 3px;
  border-radius: 2px;
}

/* 반응형 스타일 */
/* @media (max-width: 400px) {
  .wnoti-container {
    padding: 16px 12px;
  }

  .wnoti-info-card {
    height: 160px;
    padding: 12px;
  }

  .wnoti-info-card .title {
    font-size: 16px;
    line-height: 24px;
  }

  .wnoti-contact-row .right {
    width: 180px;
  }

  .wnoti-contact-row .phone {
    font-size: 14px;
  }

  .wnoti-address-text {
    font-size: 12px;
  }
} */

/* Active 상태 */
.wnoti-back-btn:active,
.wnoti-connect-btn:active,
.wnoti-copy-btn:active,
.wnoti-call-btn:active,
.wnoti-share-btn:active,
.wnoti-kakao-upload-btn:active {
  transform: scale(0.97);
}

/* 선택 비활성화 */
.wnoti-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}