/* ============================================
   INSTAGRAM (light mode, separate from Weverse)
============================================ */
.ig-app { position:absolute; inset:0; z-index:38; display:none; flex-direction:column; overflow:hidden; background:#fff; color:#111; font-family:-apple-system,BlinkMacSystemFont,'Noto Sans KR','Malgun Gothic',sans-serif; }
.ig-app.open { display:flex; }
.ig-app button { color:inherit; font:inherit; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ig-topbar { flex:0 0 61px; display:flex; align-items:center; justify-content:space-between; padding:9px 5% 0; gap:8px; }
.ig-top-plus { font-size:33px; font-weight:300; line-height:1; width:25px; text-align:center; }
.ig-account { min-width:0; display:flex; align-items:center; justify-content:center; gap:4px; }
.ig-account strong { font-size:clamp(17px,4.8cqw,23px); font-weight:760; white-space:nowrap; }
.ig-topbar svg { width:17px; height:17px; stroke:#111; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; flex:none; }
.ig-top-actions { display:flex; align-items:center; gap:13px; }
.ig-top-actions .ig-threads { font-size:27px; font-weight:700; line-height:1; }
.ig-top-actions svg { width:25px; height:25px; stroke-width:2.4; }
.ig-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.ig-scroll::-webkit-scrollbar { display:none; }
.ig-profile-head { display:flex; align-items:center; padding:28px 5% 0; gap:12px; }
.ig-avatar { width:76px; height:76px; flex:0 0 76px; position:relative; border-radius:50%; background:#e9ebef; overflow:visible; display:grid; place-items:center; }
.ig-avatar-placeholder { width:76px; height:76px; border-radius:50%; overflow:hidden; }
.ig-avatar > img { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.ig-note { position:absolute; left:0; top:-23px; z-index:3; padding:6px 9px; background:#fff; color:#666; border-radius:13px; box-shadow:0 1px 8px #0002; font-size:11px; white-space:nowrap; }
.ig-stats { flex:1; display:flex; justify-content:space-around; gap:4px; min-width:0; }
.ig-stats > div { display:flex; flex-direction:column; align-items:center; gap:2px; }
.ig-stats strong { font-size:clamp(13px,4.3cqw,19px); font-weight:750; }
.ig-stats span { font-size:clamp(10px,2.9cqw,13px); white-space:nowrap; }
.ig-profile-buttons { display:flex; gap:6px; margin:24px 4% 14px; }
.ig-profile-buttons > span { height:35px; display:grid; place-items:center; flex:1; background:#f0f1f4; border-radius:9px; font-weight:700; font-size:clamp(11px,3.1cqw,14px); }
.ig-profile-buttons .ig-add-friend { flex:0 0 34px; }
.ig-add-friend svg { width:22px; height:22px; fill:none; stroke:#111; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* =========================
   인스타 윗독바 - 3개
========================= */

.ig-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 49px;
  border-bottom: 1px solid #eee;
}

/* 각각의 탭 */
.ig-tab {
  position: relative;
  display: grid;
  place-items: center;
  background: transparent;
  opacity: 0.65;
  padding: 0;
  min-width: 0;
}

.ig-tab.active {
  opacity: 1;
}

/* 기존 이미지 숨기기 */
.ig-tab img {
  display: none;
}

/* 3개짜리 PNG 사용 */
.ig-tab::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("../assets/insta/윗독바.png");
  background-size: 300% auto;
  background-repeat: no-repeat;

  pointer-events: none;
}

/* 첫 번째: 전체 */
.ig-tab:nth-child(1)::before {
  background-position: 0% 50%;
}

/* 두 번째: 릴스 */
.ig-tab:nth-child(2)::before {
  background-position: 50% 50%;
}

/* 세 번째: 함께 나온 사진 */
.ig-tab:nth-child(3)::before {
  background-position: 100% 50%;
}

/* 선택된 아이콘 아래 검은 줄 */
.ig-tab.active::after {
  content: "";
  position: absolute;

  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: 45%;
  height: 2px;

  background: #111;
  pointer-events: none;
}

.ig-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:#fff; }
.ig-tile { position:relative; display:grid; place-items:center; aspect-ratio:5/7; padding:0; overflow:hidden; background:#f0f1f3; color:#80818b!important; font-size:11px!important; }
.ig-tile[hidden] { display:none!important; }
.ig-tile > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ig-reel-mark { position:absolute; z-index:1; top:7px; right:7px; color:white; font-size:14px; text-shadow:0 1px 3px #333b; }
.ig-empty { text-align:center; padding:40px 8px; color:#888; font-size:12px; }
.ig-empty[hidden] { display:none; }

/* 아래 5개 독바: 원본 PNG를 5등분하고 크기 1.2로 유지. */
.ig-dock { flex:0 0 55px; display:flex; justify-content:space-around; align-items:center; gap:0; padding:2px 3% 5px; background:#fff; border-top:1px solid #f1f1f1; }
.ig-dock-item { flex:1; height:100%; display:grid; place-items:center; background:transparent; border-radius:999px; padding:0; position:relative; }
.ig-dock-item.selected { background:#f0f1f4; }
.ig-dock-item img { display:none; }
.ig-dock-item::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../assets/insta/아래독바.png");
  background-size:500% auto;
  background-repeat:no-repeat;
  transform:scale(1.2);
  pointer-events:none;
}
.ig-dock-item:nth-child(1)::before { background-position:0% 50%; }
.ig-dock-item:nth-child(2)::before { background-position:25% 50%; }
.ig-dock-item:nth-child(3)::before { background-position:50% 50%; }
.ig-dock-item:nth-child(4)::before { background-position:75% 50%; }
.ig-dock-item:nth-child(5)::before { background-position:100% 50%; }
#igDockReels { pointer-events:none; cursor:default; }
#igDockReels:disabled { opacity:1; }

.ig-exit { flex:0 0 19px; display:grid; place-items:center; background:#fff; padding:0; border:0; }
.ig-exit span { width:90px; height:4px; background:#777; border-radius:20px; }
.ig-viewer { position:absolute; inset:0 0 19px; z-index:8; display:flex; flex-direction:column; background:#fff; }
.ig-viewer[hidden] { display:none!important; }
.ig-viewer-top { flex:0 0 53px; display:flex; align-items:center; gap:14px; padding:0 15px; border-bottom:1px solid #eee; font-size:16px; }
.ig-viewer-top button { border:0; background:none; font-size:32px; line-height:1; padding:0 7px 2px 0; }
.ig-viewer-media { flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; background:#fafafa; }
.ig-viewer-media img { width:100%; max-height:100%; object-fit:contain; }
.ig-viewer-media video { width:100%; max-height:100%; background:#000; object-fit:contain; }
.ig-viewer-media p { padding:20px; color:#777; text-align:center; font-size:12px; }

/* 첫 번째 전체 아이콘 → 오른쪽으로 */
.ig-tab:nth-child(1)::before {
  transform: translateX(20%);
}

/* 가운데 릴스 아이콘 → 그대로 */
.ig-tab:nth-child(2)::before {
  transform: none;
}

/* 세 번째 함께 나온 사진 → 왼쪽으로 */
.ig-tab:nth-child(3)::before {
  transform: translateX(-30%);
}

/* 함께 나온 사진 비활성화 */
.ig-tab[data-ig-tab="tagged"] {
  pointer-events: none;
  cursor: default;
}

/* 인스타 상단바 전체 PNG */
.ig-topbar.ig-topbar-png {
  display: block;
  flex: 0 0 auto;
  height: auto;
  padding: 0;
  margin: 0;
}

/* PNG 비율 유지 */
.ig-topbar-png img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 상단바 기준점 */
.ig-topbar.ig-topbar-png {
  position: relative;
  display: block;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}

/* 상단바 PNG 전체 크기 */
.ig-topbar-png > img {
  display: block;
  width: 94%;
  height: auto;
  margin: 0 auto;
}

/* 가운데 아이디 텍스트 */
.ig-username {
  position: absolute;

  left: 51.5%;
  top: 55%;

  transform: translate(-50%, -50%);

  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.4px;

  color: #111;
  white-space: nowrap;
  pointer-events: none;
}

/* 아이디 상단바만 아래로 */
.ig-topbar.ig-topbar-png {
  transform: translateY(12px);
}

/* 프로필 사진 + 팔로워 정보 아래로 */
.ig-profile-head {
  transform: translateY(12px);
}

/* 프로필 편집, 공유, 친구추가 아래로 */
.ig-profile-buttons {
  transform: translateY(12px);
}

/* 버튼 세로 높이만 줄이기 */
.ig-profile-buttons > span {
  height: 29px;
}

/* 게시물 / 팔로워 / 팔로잉 왼쪽 정렬 */
.ig-stats > div {
  align-items: flex-start;
}


/* 게시물 / 팔로워 / 팔로잉 글씨 */
.ig-stats span {
  font-size: 11px;
  font-weight: 500;
  transform: translateY(-4px);
}

/* 1. 기본 프사 전체를 살짝 줄이고 아래로 */
.ig-avatar {
  background: transparent;
}

.ig-avatar-placeholder {
  background: #e9ebef;
  transform: translateY(5px) scale(0.94);
  transform-origin: center;
}

/* 2. 기본 프사 머리만 작게 + 아래로 */
.ig-avatar-placeholder circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(3px) scale(0.90);
}

/* 3. 고민 중... 말풍선 */
.ig-note {
  left: 0;
  top: -29px;

  height: 39px;
  padding: 0 6px;

  display: grid;
  place-items: center;

  border-radius: 22px;
  white-space: nowrap;
}

/* 말풍선 아래 작은 동그라미 */
.ig-note::after {
  content: "";
  position: absolute;
  left: 30px;
  bottom: -5px;

  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;

  box-shadow: 7px 6px 0 -1px #fff;
}

/* 고민 중... 말풍선 아래로 */
.ig-note {
  top: -22px;
}

/* 작은 동그라미 2개 왼쪽 이동 + 간격 좁히기 */
.ig-note::after {
  left: 20px;
  bottom: -4px;

  box-shadow: 4px 3px 0 -1px #fff;
}

.ig-note {
  border-radius: 15px;
}

/* 윗독바 릴스 탭 완전 비활성화 */
.ig-tab[data-ig-tab="reels"] {
  pointer-events: none;
  cursor: default;
}

/* 모든 썸네일 비율 유지하면서 꽉 채우기 */
.ig-tile > img,
.ig-tile > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* 사진 / 릴스 PNG 아이콘 공통 */
.ig-tile .ig-multi-mark,
.ig-tile .ig-reel-mark {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;

  width: 20px;
  height: 20px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  font-size: 0;
  text-shadow: none;
  pointer-events: none;
}

/* 사진 여러 장 */
.ig-tile .ig-multi-mark {
  background-image: url("../assets/insta/사진.png");
}

/* 릴스 */
.ig-tile .ig-reel-mark {
  background-image: url("../assets/insta/릴스.png");
}
/* 프로필과 피드만 스크롤 */
.ig-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.ig-scroll::-webkit-scrollbar {
  display: none;
}

/* 아래 독바는 제자리 고정 */
.ig-dock {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background: #fff;
}

/* 회색 홈바도 제자리 고정 */
.ig-exit {
  flex-shrink: 0;
  width: 100%;
}

/* 피드 오른쪽 위 PNG 아이콘 크기 줄이기 */
.ig-tile .ig-multi-mark,
.ig-tile .ig-reel-mark {
  width: 15px;
  height: 15px;

  top: 8px;
  right: 8px;
}

/* ============================================
   INSTAGRAM POST VIEWER
   게시물 상세 화면
============================================ */


/* 전체 상세 화면 */

.ig-viewer {
  background: #fff;
  color: #111;
  display: flex;
  flex-direction: column;
}


/* 상단 뒤로가기 + 게시물 */

.ig-viewer .ig-viewer-top {
  flex: 0 0 48px;
  height: 48px;

  display: flex;
  align-items: center;

  gap: 14px;
  padding: 0 14px;

  background: #fff;
  border-bottom: 1px solid #f2f2f2;
}

.ig-viewer .ig-viewer-top button {
  font-size: 29px;
  font-weight: 400;
  line-height: 1;

  padding: 0;
  width: 26px;

  background: transparent;
}

.ig-viewer .ig-viewer-top strong {
  font-size: 16px;
  font-weight: 750;
}


/* 게시물 스크롤 영역 */

.ig-post-scroll {
  flex: 1;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  background: #fff;

  scrollbar-width: none;
}

.ig-post-scroll::-webkit-scrollbar {
  display: none;
}


/* ============================================
   프로필 사진 / 아이디
============================================ */

.ig-post-owner {
  height: 54px;

  display: flex;
  align-items: center;

  gap: 10px;
  padding: 0 12px;

  background: #fff;
}


/* 기본 프로필 */

.ig-post-avatar {
  width: 33px;
  height: 33px;

  flex: 0 0 33px;

  border-radius: 50%;
  background: #e9eaed;

  overflow: hidden;

  display: grid;
  place-items: center;
}

.ig-post-avatar svg {
  width: 31px;
  height: 31px;
}


/* 아이디 */

.ig-post-name {
  font-size: 13px;
  font-weight: 750;
  color: #111;
}


/* 오른쪽 메뉴 */

.ig-post-menu {
  margin-left: auto;

  width: 25px;
  height: 25px;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  gap: 5px;

  pointer-events: none;
}

.ig-post-menu span {
  display: block;

  width: 17px;
  height: 2px;

  border-radius: 4px;
  background: #111;
}


/* ============================================
   게시물 사진 / 영상 영역
============================================ */

.ig-viewer .ig-viewer-media {
  width: 100%;
  height: auto;

  aspect-ratio: 3 / 4;

  display: block;
  flex: none;

  position: relative;

  overflow: hidden;

  background: #fff;

  padding: 0;
}


/* 사진 한 장 */

.ig-viewer-media .ig-post-single-image {
  display: block;

  width: 100%;
  height: 100%;
  max-height: none;

  object-fit: contain;

  background: #fff;
}


/* 영상 */

.ig-viewer-media .ig-post-video {
  display: block;

  width: 100%;
  height: 100%;
  max-height: none;

  object-fit: contain;

  background: #000;
}


/* ============================================
   사진 2장 캐러셀
============================================ */

.ig-post-carousel {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  /* 세로 스크롤은 허용, 가로 스와이프는 직접 처리 */
  touch-action: pan-y;

  user-select: none;
  -webkit-user-select: none;

  cursor: grab;
}

.ig-post-carousel:active {
  cursor: grabbing;
}


/* 사진 두 장을 좌우로 연결 */

.ig-post-track {
  display: flex;

  width: 100%;
  height: 100%;

  transition: transform 0.25s ease;

  will-change: transform;
}


/* 각각의 사진 자리 */

.ig-post-slide {
  flex: 0 0 100%;

  width: 100%;
  height: 100%;

  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #fff;
}


/* 사진 비율 유지 */

.ig-post-slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;

  -webkit-user-drag: none;
}


/* ============================================
   사진 장수 표시 (1/2, 2/2)
============================================ */

.ig-post-counter {
  position: absolute;

  top: 12px;
  right: 12px;

  z-index: 5;

  padding: 5px 9px;

  border-radius: 20px;

  background: rgba(0, 0, 0, 0.65);
  color: #fff;

  font-size: 12px;
  font-weight: 500;

  line-height: 1.2;

  opacity: 0;

  transition: opacity 0.25s ease;

  pointer-events: none;
}


/* 처음 열거나 사진을 넘기면 나타남 */

.ig-post-counter.visible {
  opacity: 1;
}


/* ============================================
   사진 아래 동그라미 2개
============================================ */

.ig-post-dots {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 5px;

  height: 17px;
  margin-top: 2px;
}

.ig-post-dots[hidden] {
  display: none !important;
}


/* 비활성 동그라미 */

.ig-post-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #d5d5d5;

  transition: background 0.2s ease;

  pointer-events: none;
}


/* 현재 사진 동그라미 */

.ig-post-dot.active {
  background: #3897f0;
}


/* ============================================
   하트 / 댓글 / 디엠 / 보관
============================================ */

.ig-post-actions {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 8px 12px 4px;

  background: #fff;

  /* 전체 클릭 금지 */
  pointer-events: none;
}


/* 왼쪽 3개 */

.ig-post-actions-left {
  display: flex;
  align-items: center;

  gap: 15px;
}


/* 각각의 아이콘 */

.ig-post-action {
  display: grid;
  place-items: center;

  width: 24px;
  height: 28px;

  pointer-events: none;
}


/* SVG 아이콘 */

.ig-post-action svg {
  width: 24px;
  height: 24px;

  fill: none;
  stroke: #111;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================
   게시물 코멘트
============================================ */

.ig-post-caption {
  display: block;

  padding: 5px 13px 16px;

  font-size: 12px;
  line-height: 1.5;

  color: #111;
}

.ig-post-caption[hidden] {
  display: none !important;
}

.ig-post-caption strong {
  font-weight: 750;
  margin-right: 4px;
}


/* ============================================
   하단 독바 릴스 비활성화 유지
============================================ */

#igDockReels {
  pointer-events: none;
  cursor: default;
}

#igDockReels:disabled {
  opacity: 1;
}

/* ============================================
   인스타 게시물 상세 화면 최종 조절
============================================ */


/* 전체 화면 살짝 아래로 내리기 */

.ig-viewer {
  padding-top: 10px;
  box-sizing: border-box;
}


/* ============================================
   뒤로가기 화살표
============================================ */

.ig-viewer .ig-viewer-top button {
  display: grid;
  place-items: center;

  width: 25px;
  height: 32px;

  padding: 0;
}

.ig-viewer .ig-viewer-top button svg {
  display: block;

  width: 19px;
  height: 19px;
}


/* ============================================
   게시물 프로필 영역
============================================ */

/* 프로필 영역 세로 높이 */

.ig-post-owner {
  height: 49px;

  gap: 8px;
  padding: 0 12px;
}


/* 기본 프사 크기 */

.ig-post-avatar {
  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  border-radius: 50%;
  overflow: hidden;

  background: #e9ebef;
}


/* 메인에서 복사해온 프사 */

.ig-post-avatar svg {
  display: block;

  width: 27px;
  height: 27px;

  border-radius: 50%;
}


/* 닉네임 크기 + 굵기 */

.ig-post-name {
  font-size: 12px;
  font-weight: 600;

  color: #111;
}


/* ============================================
   사진 가로 스와이프
============================================ */

/* 사진 전체 영역 */

.ig-post-carousel {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;

  overflow: hidden;

  cursor: default;
}


/* 실제 사진이 좌우로 움직이는 부분 */

.ig-post-strip {
  display: flex;

  width: 100%;
  height: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  overscroll-behavior-x: contain;

  scrollbar-width: none;

  touch-action: pan-x pan-y;

  user-select: none;
  -webkit-user-select: none;

  cursor: grab;
}


/* 스크롤바 숨기기 */

.ig-post-strip::-webkit-scrollbar {
  display: none;
}


/* PC에서 드래그하는 동안 */

.ig-post-strip.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;

  cursor: grabbing;
}


/* 사진 한 장의 크기 */

.ig-post-strip .ig-post-slide {
  flex: 0 0 100%;

  width: 100%;
  height: 100%;

  min-width: 0;

  scroll-snap-align: start;
  scroll-snap-stop: always;
}


/* 사진 비율 유지 */

.ig-post-strip .ig-post-slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}


/* ============================================
   사진 장수 표시
============================================ */

.ig-post-counter {
  position: absolute;

  top: 12px;
  right: 12px;

  z-index: 5;

  padding: 5px 9px;

  background: rgba(0, 0, 0, 0.65);
  color: #fff;

  border-radius: 20px;

  font-size: 12px;

  opacity: 0;

  transition: opacity 0.25s ease;

  pointer-events: none;
}

.ig-post-counter.visible {
  opacity: 1;
}


/* 사진 아래 동그라미 */

.ig-post-dots {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 5px;

  height: 17px;
  margin-top: 2px;
}

.ig-post-dots[hidden] {
  display: none !important;
}

.ig-post-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #d5d5d5;
}

.ig-post-dot.active {
  background: #3897f0;
}


/* ============================================
   하트 / 댓글 / 디엠 / 보관 PNG
============================================ */

.ig-post-actions.ig-post-actions-png {
  display: block;

  padding: 7px 10px 2px;

  background: #fff;

  pointer-events: none;
}


/* 피드독바.png 전체 표시 */

.ig-post-actions-png img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  pointer-events: none;
  user-select: none;

  -webkit-user-drag: none;
}


/* ============================================
   캡션
============================================ */

.ig-post-caption {
  display: block;

  padding: 6px 13px 16px;

  font-size: 12px;
  line-height: 1.5;

  color: #111;
}

.ig-post-caption[hidden] {
  display: none !important;
}

.ig-post-caption strong {
  font-weight: 650;
  margin-right: 4px;
}

/* ============================================
   게시물 상세 화면 레이아웃 긴급 수정
============================================ */

/* 상세 화면 가로 넘침 방지 */

.ig-viewer {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}


/* 게시물 스크롤 영역 */

.ig-viewer .ig-post-scroll {
  width: 100%;
  min-width: 0;
  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;
}


/* ============================================
   프사 + 아이디 + 메뉴
   반드시 가로 한 줄 정렬
============================================ */

.ig-viewer .ig-post-owner {
  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: flex-start !important;

  width: 100%;

  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;

  padding: 0 12px !important;
  gap: 8px;

  box-sizing: border-box;
}


/* 기본 프사 */

.ig-viewer .ig-post-avatar {
  display: grid !important;
  place-items: center;

  width: 27px !important;
  height: 27px !important;

  flex: 0 0 27px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50%;
  overflow: hidden;
}

.ig-viewer .ig-post-avatar svg {
  width: 27px !important;
  height: 27px !important;
}


/* 아이디 */

.ig-viewer .ig-post-name {
  display: block !important;

  flex: 0 0 auto;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px;
  font-weight: 600;

  white-space: nowrap;
}


/* 오른쪽 메뉴 */

.ig-viewer .ig-post-menu {
  display: flex !important;

  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 25px;

  width: 25px;
  height: 25px;

  margin-left: auto !important;
  margin-right: 0 !important;

  gap: 5px;
}


/* ============================================
   사진 영역 가로 넘침 방지
============================================ */

.ig-viewer .ig-viewer-media {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow: hidden;

  box-sizing: border-box;
}

.ig-viewer .ig-post-carousel {
  width: 100%;
  max-width: 100%;

  overflow: hidden;

  box-sizing: border-box;
}

.ig-viewer .ig-post-strip {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  box-sizing: border-box;
}

.ig-viewer .ig-post-strip::-webkit-scrollbar {
  display: none;
}


/* ============================================
   피드독바 PNG
============================================ */

.ig-viewer .ig-post-actions-png {
  display: block !important;

  width: 100%;

  padding: 7px 10px 2px;

  box-sizing: border-box;

  pointer-events: none;
}

.ig-viewer .ig-post-actions-png img {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  object-fit: contain;
}


/* ============================================
   세로 게시물 피드
============================================ */

.ig-viewer {
  --ig-feed-ratio: 1 / 2;

  background: #fff;
  overflow: hidden;
}


/* 상단 '뒤로가기 / 게시물'은 고정 */

.ig-viewer .ig-viewer-top {
  flex: 0 0 48px;

  position: relative;
  z-index: 3;

  background: #fff;
}


/* 게시물만 세로 스크롤 */

.ig-viewer .ig-post-scroll {
  flex: 1;

  min-width: 0;
  min-height: 0;

  padding: 0 !important;

  overflow-x: hidden;
  overflow-y: auto;

  background: #fff;

  scrollbar-width: none;
  overscroll-behavior-y: contain;
}

.ig-viewer .ig-post-scroll::-webkit-scrollbar {
  display: none;
}


/* 게시물 목록 */

.ig-feed-list {
  width: 100%;
  min-width: 0;

  background: #fff;
}


/* 각각의 게시물 */

.ig-feed-card {
  box-sizing: border-box;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0 0 28px;

  background: #fff;

  border-bottom: 1px solid #f1f1f1;
}


/* ============================================
   게시물 프로필 영역
============================================ */

.ig-feed-owner {
  box-sizing: border-box;

  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  width: 100%;
  height: 48px;

  gap: 8px;
  padding: 0 12px;

  background: #fff;
}


/* 메인 기본 프사 */

.ig-feed-avatar {
  box-sizing: border-box;

  display: grid;
  place-items: center;

  flex: 0 0 27px;

  width: 27px;
  height: 27px;

  border-radius: 50%;
  overflow: hidden;

  background: #e9ebef;
}

.ig-feed-avatar svg {
  display: block;

  width: 100%;
  height: 100%;
}


/* 아이디 */

.ig-feed-owner strong {
  display: block;

  font-size: 12px;
  font-weight: 600;

  white-space: nowrap;
}


/* 오른쪽 메뉴 */

.ig-feed-menu {
  display: flex;
  flex-flow: column nowrap;

  align-items: center;
  justify-content: center;

  flex: 0 0 25px;

  width: 25px;
  height: 25px;

  margin-left: auto;

  gap: 5px;

  pointer-events: none;
}

.ig-feed-menu i {
  display: block;

  width: 17px;
  height: 2px;

  border-radius: 3px;

  background: #111;
}


/* ============================================
   사진 / 영상
   가로 여백 없이 꽉 채우기
============================================ */

.ig-feed-media {
  box-sizing: border-box;

  position: relative;

  width: 100%;
  min-width: 0;

  aspect-ratio: var(--ig-feed-ratio);

  padding: 0;
  margin: 0;

  overflow: hidden;

  background: #fff;
}


/* 사진과 영상 공통 */

.ig-feed-media > img,
.ig-feed-media > video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.ig-feed-media > video {
  background: #000;
}


/* ============================================
   사진 여러 장: 가로 스와이프
============================================ */

.ig-feed-carousel {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

.ig-feed-strip {
  box-sizing: border-box;

  display: flex;

  width: 100%;
  height: 100%;

  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  overscroll-behavior-x: contain;

  touch-action: pan-x pan-y;

  scrollbar-width: none;

  user-select: none;
  -webkit-user-select: none;

  cursor: grab;
}

.ig-feed-strip::-webkit-scrollbar {
  display: none;
}

.ig-feed-strip.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;

  cursor: grabbing;
}


/* 각각의 사진 */

.ig-feed-slide {
  flex: 0 0 100%;

  width: 100%;
  height: 100%;

  min-width: 0;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  overflow: hidden;
}

.ig-feed-slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  pointer-events: none;
  -webkit-user-drag: none;
}


/* ============================================
   사진 1/2, 2/2
============================================ */

.ig-feed-counter {
  position: absolute;

  z-index: 2;

  top: 12px;
  right: 12px;

  padding: 5px 9px;

  border-radius: 20px;

  background: rgba(0, 0, 0, 0.65);
  color: #fff;

  font-size: 12px;

  opacity: 0;

  transition: opacity 0.25s ease;

  pointer-events: none;
}

.ig-feed-counter.visible {
  opacity: 1;
}


/* 사진 아래 점 두 개 */

.ig-feed-dots {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  height: 17px;

  background: #fff;
}

.ig-feed-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #d5d5d5;
}

.ig-feed-dot.active {
  background: #3897f0;
}


/* ============================================
   피드독바 PNG
============================================ */

/* 사진 아래 여백을 모든 게시물에서 동일하게 */

.ig-feed-actions {
  box-sizing: border-box;

  width: 100%;
  min-height: 43px;

  padding: 8px 11px 3px;

  background: #fff;

  pointer-events: none;
}

.ig-feed-actions img {
  display: block;

  width: 100%;
  height: auto;
  max-width: 100%;

  pointer-events: none;
  -webkit-user-drag: none;
}


/* ============================================
   캡션
============================================ */

.ig-feed-caption {
  box-sizing: border-box;

  width: 100%;

  padding: 4px 12px 8px;

  font-size: 12px;
  line-height: 1.5;

  color: #111;
}

.ig-feed-caption strong {
  font-weight: 650;
  margin-right: 5px;
}

/* 게시물 하단 흰 여백 */
.ig-feed-card {
  padding-bottom: 32px;
}

/* ============================================
   인스타 메인 아이디 상단바 흰색 영역 확장
============================================ */

/* ============================================
   인스타 상단바 통합 설정
============================================ */

.ig-app {
  --ig-header-extra: 14px;
}


/* 1. 메인 프로필: 아이디 상단바 */

.ig-app > .ig-topbar.ig-topbar-png {
  position: relative !important;

  z-index: 4 !important;

  background: #fff !important;

  /* 아래 흰 여백 확장 */
  box-shadow:
    0 var(--ig-header-extra) 0 #fff !important;
}


/* 이전에 만든 확장 배경 제거 */

.ig-app > .ig-topbar.ig-topbar-png::before {
  content: none !important;
  display: none !important;
}


/* 2. 게시물 상세 화면 */

.ig-app > .ig-viewer {
  position: absolute;

  /* 메인 아이디 상단바보다 위 */
  z-index: 50 !important;

  background: #fff !important;
}


/* 3. 게시물의 뒤로가기 상단바 */

.ig-app > .ig-viewer .ig-viewer-top {
  flex: 0 0 calc(48px + var(--ig-header-extra)) !important;

  height: calc(48px + var(--ig-header-extra)) !important;

  padding: 0 14px var(--ig-header-extra) !important;

  box-sizing: border-box;

  background: #fff !important;
}

/* ============================================
   게시물 상단바 높이 통일
============================================ */

/* 메인 아이디 상단바와 높이 비슷하게 */

.ig-viewer .ig-viewer-top {
  flex: 0 0 60px !important;
  height: 60px !important;

  padding: 0 14px !important;

  box-sizing: border-box;

  background: #fff !important;

  /* 상단바 아래 구분선 제거 */
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ============================================
   인스타 피드 최종 디테일 설정
============================================ */

/* 게시물 사이 여백 */
.ig-feed-card {
  border-bottom: none !important;
  padding-bottom: 4px !important;
}

/* 프사 동그라미 크기 */
.ig-feed-avatar {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
}

/* 프사 내부 그림 */
.ig-feed-avatar svg {
  width: 100% !important;
  height: 100% !important;
}

/* 기본 프사 대가리 크기 및 위치 */
.ig-feed-avatar svg circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(3px) scale(0.9);
}

/* ============================================
   사진 ↔ 하트 독바
============================================ */

/* 사진 1장 / 영상에만 적용 */
.ig-feed-media + .ig-feed-actions {
  margin-top: 4px !important;
}

/* 독바 자체 여백 */
.ig-feed-actions {
  padding: 4px 0 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* PNG 크기 유지 */
.ig-feed-actions img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin-left: 0 !important;
}

/* ============================================
   하트 독바 ↔ 캡션
============================================ */

.ig-feed-caption {
  margin-top: 6px !important;
  padding: 1px 8px 8px !important;
  font-size: 12px;
  line-height: 1.5;
}

/* 캡션 아이디 */
.ig-feed-caption strong {
  font-weight: 650;
  margin-right: 5px !important;
}

/* =====================================
   인스타 영상 전용 컨트롤
===================================== */

/* =====================================
   영상 재생바 - 드래그 가능
===================================== */

/* 터치 가능한 영역 */
.ig-video-progress {
  position: absolute;

  left: 8px;
  right: 8px;
  bottom: 0;

  /* 손가락으로 잡기 쉽게 터치 영역 확대 */
  height: 25px;

  background: transparent;
  overflow: visible;

  z-index: 2;

  cursor: pointer;
  pointer-events: auto;

  /* 재생바를 터치하면 영상 탐색으로 처리 */
  touch-action: none;
}

/* 실제 보이는 회색 재생바 */
.ig-video-progress::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 8px;

  height: 3px;

  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;

  pointer-events: none;
}

/* 재생된 부분 - 흰색 */
.ig-video-progress span {
  position: absolute;

  left: 0;
  bottom: 8px;

  width: 0;
  height: 3px;

  background: #fff;
  border-radius: 10px;

  pointer-events: none;
}

/* 오른쪽 음소거 버튼 */
.ig-video-sound {
  position: absolute;

  right: 10px;
  bottom: 18px;

  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  padding: 0;
  border: none;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;

  cursor: pointer;
  z-index: 3;
}

/* 소리 아이콘 크기 */
.ig-video-sound svg {
  width: 15px;
  height: 15px;
}

/* 기본은 소리 켜짐 모양 */
.ig-video-sound .ig-sound-off {
  display: none;
}

/* 음소거 상태 */
.ig-video-sound.is-muted .ig-sound-on {
  display: none;
}

.ig-video-sound.is-muted .ig-sound-off {
  display: block;
}

/* =====================================
   맨 마지막 게시물 아래 흰 여백
===================================== */

.ig-feed-list > .ig-feed-card:last-child {
  padding-bottom: 20px !important;
}