/* PC 웹 우회 모드 (Phase 0 → Phase 1) */
/* v1.2.55 (2026-05-27) — 65차: .like-event-banner PC 폭 정합 — max-width 제거 + margin 2.638vw (친구초대 배너 .inr-c inset 동일) */
/* v1.2.54 (2026-05-27) — 64차: .like-event-banner PC 폭 정합 max-width:700px + margin auto (친구초대 배너 동일) */
/* v1.2.53 (2026-05-27) — 63차: 좌측 사이드패널 로고 → twig color CTA 박스 "전체기능 이용" (www.twigsns.com 링크) */
/* v1.2.52 (2026-05-27) — 61차: terms_agree.php vw 폰트 PC 오버라이드 (5vw→22px, 3.8vw→16px 등) */
/* v1.2.51 (2026-05-27) — 60차: DNA CARD 회색 글자 전수 제거(label/name/title/trait → #0f1419) + 모달 클릭 이벤트 위임 fix */
/* v1.2.48 (2026-05-26) — 51차: Reward 미니멀 세련화 — 라벨 11px 대문자+자간·숫자 26px tabular-nums·단위 P 분리 (옵션 2+4 조합) */
/* v1.2.47 (2026-05-26) — 50차: Reward 라벨 아래 22px/700 파란 포인트 숫자 표시 */
/* v1.2.46 (2026-05-26) — 49차: 좌측 메뉴 이모지 제거 + 영문화(Home/My Feed/Profile) + Reward 코인 뱃지 신설 */
/* v1.2.45 (2026-05-26) — 48차: DM 채팅창 (.dm_chat_container / #chatInputBar) position:fixed left:0;right:0 모바일 기준 → PC 중앙 정렬 fix */
/* v1.2.44 (2026-05-26) — 47차: pop_comment .i_send:after vw 폭주 fix (6.25vw=80px → 24px) + .rt 답글버튼 font-size/padding 명시 */
/* v1.2.43 (2026-05-26) — 46차: .layerPopup_botm left:0px 덮어쓰기 제거 → 댓글 팝업 PC 중앙 정렬 fix + textarea vw 인라인 패딩 override */
/* v1.2.42 (2026-05-26) — 45차: #wrap padding-top 65→85px — .like-event-banner 실측 높이 ~55px, 30% 가림(~18px) 보정 + 안전마진 */
/* v1.2.41 (2026-05-26) — 44차: #wrap padding-top:65px 추가 — .like-event-banner 등 #container 밖 콘텐츠도 헤더 아래서 시작 */
/* v1.2.40 (2026-05-26) — 43차: 좌·우 사이드패널 top 헤더 아래(65px) 고정 + 중앙 콘텐츠 padding-top 65px */
/* v1.2.39 (2026-05-26) — 42차: #header left:0px 중복 override 제거 → 로고 좌측 잘림 fix (38번 블록이 SoT) */
/* v1.2.38 (2026-05-26) — 41차: .inr-c 좌우 margin 50% 축소 (5.277vw → 2.638vw / 67px → 34px @1280px) */
/* v1.2.37 (2026-05-26) — 40차: .wrap_info 회색 배경(#f3f3f3)+border-radius(45px) 제거 — PC에서 투명+직각 */
/* v1.2.36 (2026-05-26) — 39차: body.web-mode 회색 배경(#f5f5f5) 제거 — #wrap 자체 #fff 보유, body는 기본값 상속 */
/* v1.2.35 (2026-05-26) — 38차: myinfo 프로필 grade_graph·lst1·b1·b2 vw 폰트 폭주 fix */
/* v1.2.34 (2026-05-26) — 37차: #container vw padding 폭주 fix (프로필 등 모든 페이지 콘텐츠 헤더 뒤 매몰 현상) */
/* v1.2.9 (2026-05-26) — 13차: Phase 1.13 글쓰기 모달 내부 아이콘 vw 폭주 fix (i_send2 / i_photo_del / btn_send / btn_botm_close 명시 px) */
/* v1.2.7 (2026-05-26) — 11차: Phase 1.11 로그인 비율 재조정 (logo 110×55px / btn-pk.member height 50px / .wrap_intro .link 13px·padding-top 60px / SNS 아이콘 28×28 키움) */
/* v1.2.5 (2026-05-26) — 9차: Phase 1.9 로그인 SNS 아이콘 (i_google/i_apple/i_kakao) vw 폭주 fix — 24×24px + padding 36px */
/* v1.2.3 (2026-05-26) — Phase 1.7 survey 라디오/Next 버튼 px 정착 + 1.6 폰트 재조정(68→34/45→22/30→15/24→12) */
/* v1.2.2 (2026-05-26) — Phase 1.6 wrap_search vw → px (1차, 폰트 비대 잔존) */
/* v1.2.4 (2026-05-26) — 8차: .wrap_search .cont flex space-between → flex-start, min-height 0 (답변 박스 바닥 떨어짐 해결) */
/* v1.2.1 (2026-05-26) — Phase 1.5 액션바 .i-ico 명시 24px (좋아요/북마크 거대화 fix) + 1.4 중복 botm 제거 */
/* v1.2.0 (2026-05-26) — Phase 1.4 Bulk vw → px override (common+default P1+P2 158블록, 360px viewport 환산) */
/* v1.1.3 (2026-05-26) — 이미지 카운터/액션바/사진 영역 vw 일괄 px override (메인 피드 노출 영역) */
/* v1.1.2 (2026-05-26) — html root vw → 16px 고정 + 게시글/댓글 본문 px override (PC 1920px 본문 거대화 fix) */
/* v1.1.1 (2026-05-26) — 글쓰기 버튼 px 고정(폭 의존 제거) + 사진 vw radius → px 축소 */
/* v1.1.0 (2026-05-26) — Phase 1: 1280px+ 3컬럼 (좌측 275 / 가운데 700 / 우측 290) */
/* v1.0.2 — 컨테이너 폭 480 → min(700px, 100%) 적응형 (X 트위터 메인 컬럼 스타일) */
/* CSS 변수로 단일 source of truth — 추후 폭 조정 시 --web-col 만 수정 */
body.web-mode {
	--web-col: min(700px, 100%);
	--web-col-half: min(350px, 50%);
}
body.web-mode #wrap {
	max-width: var(--web-col);
	margin: 0 auto;
	background: #ffffff;
	min-height: 100vh;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.06);
	position: relative; /* 자식 fixed 위젯 기준점은 아니지만 z-index/overlay 안정용 */
	padding-top: 85px; /* 45차: fixed #header(55px) + 여유(10px) + 배너가림보정(18px) + 안전마진(2px) = 85px — 배너 실측 ~55px, 30% 가림 = ~18px */
}

/* ============================================================
   [Header] #header — 모바일 CSS: position:fixed; left:0; width:100%;
   PC 에서는 적응형 컨테이너 폭으로 가운데 정렬
   ============================================================ */
body.web-mode #header {
	width: var(--web-col) !important;
	max-width: var(--web-col) !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	padding: 16px 0 !important; /* 모바일 vw padding 무력화 (40px 5.55vw → PC 과대) */
	height: 55px !important;
}

/* ============================================================
   [Footer] #footer — 모바일 탭바. width:100% + bottom:5.55vw + padding:0 4.16vw
   PC 에서 viewport 전체로 펼쳐지고 아래에서 80px+ 떠있던 현상 → 적응형 컨테이너 하단 고정
   ============================================================ */
body.web-mode #footer {
	width: var(--web-col) !important;
	max-width: var(--web-col) !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	bottom: 0 !important; /* vw bottom 무력화 — 화면 맨 아래 고정 */
	padding: 0 30px !important; /* vw padding 고정 */
	box-sizing: border-box !important;
	background: #ffffff; /* 모바일 기본은 투명일 수 있어 PC 배경 보장 */
	border-top: 1px solid #eee;
}
body.web-mode #footer a {
	width: 60px !important;
	height: 60px !important;
}
body.web-mode #footer a.cen {
	margin: 0 20px !important;
	width: 64px !important;
	height: 64px !important;
}
/* wrap 콘텐츠가 fixed footer 에 가리지 않도록 하단 패딩 확보 */
body.web-mode #wrap {
	padding-bottom: 70px;
}

/* ============================================================
   [#container padding] — common.css: padding-top:19.86vw / padding-bottom:22.22vw
   PC 1280px 기준 각각 254px / 284px 로 폭주 → 콘텐츠가 헤더 뒤에 매몰되고
   하단 여백 과대 발생. #header PC height=55px 기준으로 override.
   (프로필·검색·DM 등 모든 페이지 공통 적용)
   ============================================================ */
body.web-mode #container {
	padding-top: 0 !important;       /* 44차: #wrap이 padding-top:65px 이미 확보 → #container 추가 65px 누적(=130px) 방지 */
	padding-bottom: 80px !important; /* fixed footer(60px) + 20px 여유 */
}

/* ============================================================
   [.inr-c 좌우 여백 50% 축소] — 41차 (v1.2.38)
   common.css: margin-left/right: 5.27777778vw (= 67.6px @1280px)
   PC에서 좌우 공백이 과대 → 50% 축소: 2.638vw (= 33.8px @1280px)
   ============================================================ */
body.web-mode .inr-c {
	margin-left: 2.638888889vw !important;
	margin-right: 2.638888889vw !important;
}

/* ============================================================
   [공통 탭바/푸터바 변형] — 페이지마다 다른 클래스 사용 가능성 대비
   ============================================================ */
body.web-mode .footer_bar,
body.web-mode .bot_tab,
body.web-mode .bot-nav,
body.web-mode .bottom_tab,
body.web-mode .tab_bar {
	max-width: var(--web-col);
	width: var(--web-col) !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

/* ============================================================
   [DM 플로팅 버튼] .app_dm_btn — common.css:272 정의 (right:12px fixed)
   PC 에서는 적응형 컨테이너 우하단 모서리에 붙도록
   계산: viewport 중심(50%) + 컨테이너 절반(350px or 50vw) - 12px 마진
   ============================================================ */
body.web-mode .app_dm_btn {
	right: calc(50% - var(--web-col-half) + 12px) !important;
	left: auto !important;
	transform: none !important;
	-webkit-transform: none !important;
}

/* ============================================================
   [모달/팝업/Dim] 전체 화면 덮어야 하는 오버레이는 viewport 전체 유지
   단, 팝업 박스 자체는 적응형 컨테이너 가운데
   ============================================================ */
body.web-mode .layerPopup,
body.web-mode .layerPopup_botm,
body.web-mode .layer_popup,
body.web-mode .modal,
body.web-mode .popup_alert .popup,
body.web-mode .uploadModal .up_pop {
	max-width: var(--web-col) !important;
	left: 50% !important;
	right: auto !important;
}
/* layerPopup_botm 은 bottom sheet 라 width 100% 가 자연스러움, transform 만 */
body.web-mode .layerPopup_botm {
	width: var(--web-col) !important;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
/* 글쓰기 팝업 — .pop_write 가 inline/특이도 높은 룰로 left/transform 을 덮어쓰는 케이스 방어
   (2026-05-26 12차) PC 1280+ 좌측 편향 정상화 — common.css `.pop_write` override 차단 */
body.web-mode .layerPopup_botm.pop_write,
body.web-mode .pop_write.layerPopup_botm {
	left: 50% !important;
	right: auto !important;
	width: var(--web-col) !important;
	max-width: var(--web-col) !important;
	transform: translateX(-50%) !important;
	-webkit-transform: translateX(-50%) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* layerPopup(중앙 정렬) 은 transform:translateY(-50%) 가 있으므로 X도 추가 */
body.web-mode .layerPopup:not(.layerPopup_botm) {
	transform: translate(-50%, -50%) !important;
	-webkit-transform: translate(-50%, -50%) !important;
}
/* popup_alert 은 이미 translate(-50%,-50%) 가 있어 그대로 유지, left:50% 만 보존 */
body.web-mode .popup_alert .popup {
	transform: translate(-50%, -50%) !important;
	-webkit-transform: translate(-50%, -50%) !important;
}

/* Dim/Overlay — viewport 전체 덮음 (가운데 정렬 X) */
body.web-mode .popup_dim,
body.web-mode .popup_dim2,
body.web-mode .dim_layer {
	width: 100vw !important;
	left: 0 !important;
	right: 0 !important;
	transform: none !important;
}

/* ============================================================
   [Toast/알림] .draft-toast 등 하단 floating 토스트
   ============================================================ */
body.web-mode .draft-toast {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	-webkit-transform: translateX(-50%) !important;
}

/* ============================================================
   [iframe 전체화면] 적응형 컨테이너 가운데 정렬
   ============================================================ */
body.web-mode .iframe_container .iframe-full {
	max-width: var(--web-col);
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

/* ============================================================
   [로딩 오버레이] #loginProcessingOverlay
   ============================================================ */
body.web-mode #loginProcessingOverlay {
	max-width: var(--web-col);
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

/* ============================================================
   [Phase 1] 좌·우 사이드 패널 — 1280px 미만에서는 항상 숨김
   HTML 은 항상 출력 (top.php), CSS 로만 노출 토글 → 모바일 회귀 0
   ============================================================ */
body.web-mode .web-side {
	display: none;
}

/* ============================================================
   [Phase 1] 1280px+ 풀 데스크탑 3컬럼
   - 좌측 275px (vertical nav)
   - 가운데 700px (#wrap, 기존)
   - 우측 290px (트렌드)
   ============================================================ */
@media (min-width: 1280px) {
	body.web-mode {
		--web-side-left: 275px;
		--web-side-right: 290px;
		--web-side-gap: 16px;
	}

	/* 좌측 패널 */
	body.web-mode .web-side--left {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 65px;   /* 43차: #header 55px + 10px 여유 → 헤더 아래에서 시작 */
		left: calc(50% - var(--web-col-half) - var(--web-side-gap) - var(--web-side-left));
		width: var(--web-side-left);
		height: calc(100vh - 65px);   /* 43차: top 오프셋만큼 차감 */
		padding: 24px 16px;
		box-sizing: border-box;
		background: #ffffff;
		border-right: 1px solid #eee;
		z-index: 100;
	}
	body.web-mode .web-side__logo a {
		display: block;
		text-decoration: none;
		margin-bottom: 16px;
	}
	body.web-mode .web-side__logo .web-side__cta-box {
		display: block;
		background: #23bf94;
		color: #ffffff;
		font-size: 15px;
		font-weight: 700;
		text-align: center;
		padding: 11px 16px;
		border-radius: 10px;
		letter-spacing: 0.3px;
		transition: background 0.15s, transform 0.1s;
		text-decoration: none;
	}
	body.web-mode .web-side__logo .web-side__cta-box:hover {
		background: #1ca87e;
		transform: translateY(-1px);
	}
	body.web-mode .web-side__logo .web-side__cta-box:active {
		background: #179970;
		transform: translateY(0);
	}
	body.web-mode .web-side__nav {
		display: flex;
		flex-direction: column;
		gap: 4px;
		flex: 1;
	}
	body.web-mode .web-nav-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 16px;
		border-radius: 999px;
		color: #0f1419;
		text-decoration: none;
		font-size: 16px;
		font-weight: 500;
		transition: background 0.15s;
	}
	body.web-mode .web-nav-item:hover {
		background: #f0f3f4;
	}
	body.web-mode .web-nav-icon {
		font-size: 22px;
		line-height: 1;
	}
	body.web-mode .web-nav-label {
		flex: 1;
	}
	/* Reward 항목 — 정보 표시 전용, 클릭 비활성 (52차) */
	body.web-mode .web-nav-item--reward {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 12px;
		padding-bottom: 12px;
		cursor: default;
		pointer-events: none;
	}
	body.web-mode .web-nav-item--reward:hover {
		background: transparent;
	}
	/* Withdraw 버튼 (52차) */
	body.web-mode .web-nav-withdraw {
		display: block;
		width: 220px;
		max-width: 100%;
		height: 40px;
		padding: 0 20px;
		margin-top: 10px;
		background: transparent;
		color: #1d9bf0;
		border: 1.5px solid #1d9bf0;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.15s, color 0.15s;
		text-align: center;
		line-height: 37px;
	}
	body.web-mode .web-nav-withdraw:hover {
		background: #1d9bf01a;
	}
	/* Withdraw 앱 안내 모달 (52차) */
	body.web-mode .web-withdraw-modal {
		position: fixed;
		inset: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	body.web-mode .web-withdraw-modal__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0,0,0,0.45);
	}
	body.web-mode .web-withdraw-modal__box {
		position: relative;
		background: #fff;
		border-radius: 16px;
		padding: 32px 28px 24px;
		min-width: 280px;
		max-width: 340px;
		text-align: center;
		box-shadow: 0 8px 32px rgba(0,0,0,0.18);
	}
	body.web-mode .web-withdraw-modal__msg {
		font-size: 15px;
		font-weight: 500;
		color: #0f1419;
		line-height: 1.6;
		margin: 0 0 20px;
	}
	body.web-mode .web-withdraw-modal__close {
		display: inline-block;
		min-width: 100px;
		height: 40px;
		padding: 0 24px;
		background: #1d9bf0;
		color: #fff;
		border: none;
		border-radius: 999px;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
		transition: background 0.15s;
		line-height: 40px;
	}
	body.web-mode .web-withdraw-modal__close:hover {
		background: #1a8cd8;
	}
	/* Reward 라벨 — 11px 회색 대문자 + 자간 (51차: 핀테크 보조 라벨 패턴) */
	body.web-mode .web-nav-label-reward {
		display: block;
		font-size: 11px;
		font-weight: 500;
		color: #8b98a5;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		line-height: 1;
		margin-bottom: 4px;
	}
	/* Reward 포인트 행 — 숫자+단위 flex 정렬 (51차) */
	body.web-mode .web-nav-reward-coin {
		display: flex;
		align-items: baseline;
		gap: 3px;
		width: 100%;
		white-space: nowrap;
	}
	/* 숫자 — 26px 강조, tabular-nums 자릿수 정렬 (51차) */
	body.web-mode .web-nav-reward-amount {
		font-size: 26px;
		font-weight: 700;
		color: #1d9bf0;
		line-height: 1.15;
		letter-spacing: -0.5px;
		font-variant-numeric: tabular-nums;
	}
	/* 단위 P — 숫자보다 작게, 보조 톤 (51차) */
	body.web-mode .web-nav-reward-unit {
		font-size: 14px;
		font-weight: 600;
		color: #536471;
		line-height: 1;
	}
	body.web-mode .web-side__write {
		display: block;
		width: 220px; /* 좌측 패널 폭/뷰포트 폭에 의존하지 않도록 px 고정 (X 트위터: 233px) */
		max-width: 100%;
		height: 48px;
		padding: 0 24px;
		margin-top: 16px;
		background: #1d9bf0;
		color: #ffffff;
		border: none;
		border-radius: 999px;
		font-size: 15px;
		line-height: 48px;
		font-weight: 700;
		text-align: center;
		cursor: pointer;
		transition: background 0.15s;
		box-sizing: border-box;
	}
	body.web-mode .web-side__write:hover {
		background: #1a8cd8;
	}

	/* 우측 패널 */
	body.web-mode .web-side--right {
		display: block;
		position: fixed;
		top: 65px;   /* 43차: #header 55px + 10px 여유 → 헤더 아래에서 시작 */
		left: calc(50% + var(--web-col-half) + var(--web-side-gap));
		width: var(--web-side-right);
		max-height: calc(100vh - 65px - 16px);   /* 43차: top 오프셋 + 하단 여유 */
		overflow-y: auto;
		z-index: 100;
	}
	body.web-mode .web-trend-card {
		background: #ffffff;
		border: 1px solid #eef0f2;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 12px;
	}
	body.web-mode .web-trend-card--soft {
		background: #f7f9fa;
	}
	body.web-mode .web-trend-title {
		margin: 0 0 12px;
		font-size: 16px;
		font-weight: 700;
		color: #0f1419;
	}
	body.web-mode .web-trend-stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
	body.web-mode .web-trend-stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
	}
	body.web-mode .web-trend-stat .num {
		font-size: 18px;
		font-weight: 700;
		color: #0f1419;
	}
	body.web-mode .web-trend-stat .label {
		font-size: 12px;
		color: #536471;
	}
	body.web-mode .web-trend-newmembers {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	body.web-mode .web-trend-newmembers li {
		padding: 8px 0;
		border-bottom: 1px solid #f3f5f7;
		font-size: 14px;
	}
	body.web-mode .web-trend-newmembers li:last-child {
		border-bottom: none;
	}
	body.web-mode .web-trend-newmembers li a {
		color: #0f1419;
		text-decoration: none;
		font-weight: 500;
	}
	body.web-mode .web-trend-newmembers li a:hover {
		color: #1d9bf0;
	}
	body.web-mode .web-trend-placeholder {
		color: #8b98a5;
		font-size: 13px;
	}
	body.web-mode .web-trend-soon {
		margin: 0;
		font-size: 13px;
		color: #536471;
		text-align: center;
		line-height: 1.5;
	}

	/* 1280px+ 에서 모바일 하단 footer 탭바 숨김 (좌측 메뉴가 대체) */
	body.web-mode #footer {
		display: none !important;
	}
	body.web-mode #wrap {
		padding-bottom: 0;
	}
}

/* ============================================================
   [Phase 1.1] 사진/카드 border-radius — common.css 의 vw 단위 무력화
   common.css `.list_con .con` = 2.77vw → PC 1920px 에서 53px (과도)
   web-mode 에서만 px 로 덮어 모바일 회귀 0
   ============================================================ */
body.web-mode .list_con .con {
	border-radius: 12px !important;
	-webkit-border-radius: 12px !important;
	-moz-border-radius: 12px !important;
}
/* 피드 사진 자체 (.list_con .con 안 img/swiper-slide img) */
body.web-mode .list_con .con img,
body.web-mode .list_con .con .swiper-slide img,
body.web-mode .list_con .con .img_box,
body.web-mode .list_con .con .img_box img {
	border-radius: 10px !important;
	-webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
}
/* 그 외 vw 라운드 가진 일반 카드/모달 박스류 (피드 외 페이지에서도 영향) */
body.web-mode .item_con,
body.web-mode .pop_con,
body.web-mode .info_box {
	border-radius: 12px !important;
	-webkit-border-radius: 12px !important;
	-moz-border-radius: 12px !important;
}

/* ============================================================
   [Phase 1.2] 본문 텍스트 px 고정 — PC 1920px 본문 거대화 fix
   근본 원인: common.css line 19 `html { font-size: 3.05555556vw; }` → PC 1920px = ~58.7px 루트폰트.
   → 자식 블록의 em·미명시 폰트 전부 거대화 + 한 글자씩 줄바꿈처럼 보이는 시각현상.
   해결: web-mode 스코프에서만 root html 폰트를 px 로 고정. 모바일 회귀 0.
   ============================================================ */
body.web-mode {
	font-size: 16px;
}
/* html 루트는 :root 셀렉터로도 안전 적용 (web-mode 클래스는 body 에 붙음) */
html:has(body.web-mode) {
	font-size: 16px;
}

/* 피드 게시글 본문 박스 — common.css .list_con .con (line 586-588) vw font 무력화 */
body.web-mode .list_con .con {
	font-size: 15px !important;
	line-height: 1.5 !important;
	letter-spacing: normal;
	word-spacing: normal;
	word-break: keep-all; /* 한글 단어 단위로 줄바꿈 — "꽃 은 언 제 나" 글자별 분리 방지 */
	overflow-wrap: break-word;
}
/* 본문 텍스트 영역 — .tx 는 부모 inherit 이지만 명시적으로 한번 더 고정 */
body.web-mode .list_con .con .tx {
	font-size: 15px !important;
	line-height: 1.5 !important;
	letter-spacing: normal;
	word-spacing: normal;
	word-break: keep-all;
	overflow-wrap: break-word;
}
/* 본문 하단 botm (좋아요/댓글수) — line 656-660 28px / 3.88vw */
body.web-mode .list_con .botm {
	font-size: 14px !important;
	line-height: 1.4 !important;
}

/* 댓글 영역 — pop_comment .lst_comment .li .tit (line 1602-1611) */
body.web-mode .layerPopup_botm.pop_comment .lst_comment .li .tit .l,
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .li .tit .l {
	font-size: 15px !important;
}
body.web-mode .layerPopup_botm.pop_comment .lst_comment .li .tit .r,
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .li .tit .r {
	font-size: 13px !important;
}

/* ============================================================
   [Phase 1.3] 메인 피드 노출 영역 vw 일괄 px override
   common.css `.list_con` 계열 vw 단위 (font-size·width·height·padding·line-height·margin)
   PC 1920px viewport 에서 1vw = 19.2px → 모든 vw 값이 모바일 대비 5.3배 폭주.
   web-mode 스코프에서만 px 명시 → 모바일 회귀 0.
   ============================================================ */

/* (1) 사진 다중 이미지 카운터 인디케이터 — common.css:630 .list_con .con .swiper-pagination
   font-size 22px/3.05vw, line-height 34px/4.72vw, padding 15px/2.08vw, right/bottom 20px/2.77vw, border-radius 30px/4.16vw */
body.web-mode .list_con .con .swiper-pagination {
	font-size: 13px !important;
	line-height: 1.6 !important;
	padding: 4px 10px !important;
	right: 12px !important;
	bottom: 12px !important;
	border-radius: 999px !important;
	-webkit-border-radius: 999px !important;
	-moz-border-radius: 999px !important;
	min-height: 0 !important;
}

/* (2) 액션바 (botm) — common.css:652-695
   .list_con .botm        : font-size 28px/3.88vw + line-height 50px/6.94vw
   .botm .lft em img      : width 20px/5.25vw  (아바타 이미지)
   .botm .lft button      : margin-right 20px/4.77vw + width 60px/3.33vw + height 50px/6.94vw  (좋아요/댓글/북마크 버튼)
   .botm .rgh             : margin-right 30px/4.16vw
   .botm .rgh button      : margin-left 20px/2.77vw
*/
body.web-mode .list_con .botm {
	font-size: 14px !important;
	line-height: 1.5 !important;
}
body.web-mode .list_con .botm .lft em img {
	width: 20px !important;
	height: auto !important;
}
body.web-mode .list_con .botm .lft button {
	margin-right: 12px !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
}
/* 액션바 버튼 안 SVG/img 아이콘은 버튼 폭 100% 로 자동 정렬 */
body.web-mode .list_con .botm .lft button img,
body.web-mode .list_con .botm .lft button svg {
	width: 26px !important;
	height: 26px !important;
}
body.web-mode .list_con .botm .rgh {
	margin-right: 6px !important;
}
body.web-mode .list_con .botm .rgh button {
	margin-left: 10px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}

/* (3) 사용자 정보 / 더보기 — common.css:622 .list_con .con .tx-more (margin 0 25px 10px / 3.47vw 1.38vw) */
body.web-mode .list_con .con .tx-more {
	margin: 0 16px 8px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

/* (4) 카드 컨테이너 좌우 마진 — .list_con .con(line 576) 가 vw 마진/패딩을 가질 가능성 흡수
   기존 1.1 의 border-radius override 와 별개로 폰트·spacing 강제 px */
body.web-mode .list_con .con {
	letter-spacing: normal;
	word-spacing: normal;
}

/* ============================================================
   [이벤트 배너] .like-event-banner — PC 폭 정합 (친구초대 배너 동일 max-width)
   모바일: margin 5.27778vw (공통 CSS 유지) / PC: max-width 700px + auto margin
   ============================================================ */
body.web-mode .like-event-banner {
	/* 65차: #wrap(700px) 안, .inr-c 와 동일 inset — margin 2.638vw (viewport 기준)
	   @1280px: 33.8px 좌우 여백 → 친구초대 배너(.invite_share_card)와 모서리 정렬 */
	max-width: none !important;
	margin-left: 2.638888889vw !important;
	margin-right: 2.638888889vw !important;
}
/* ============================================================
   [Phase 1.4] Bulk vw → px override (common.css + default.css)
   환산 기준: 360px viewport (1vw = 3.6px)
   letter/word-spacing → normal, line-height → 1.5
   width/height 80vw+ → 100%, 그 외 → px
   ============================================================ */

/* ─── Priority 1: 사용자 노출 영역 (피드/프로필/DM/검색/알림/팝업) ─── */

/* common.css: #header — 42차: left/top/height/padding 중복 override 제거 (38번 블록이 SoT) */
/* body.web-mode #header { left/top/height/padding → 파일 상단 38번 블록에서 통합 처리 } */

/* common.css: #header .logo a */
body.web-mode #header .logo a {
	width: 56px !important;
	height: 28px !important;
}

/* common.css: #header .btn_dm_header */
body.web-mode #header .btn_dm_header {
	margin-left: 5px !important;
}

/* common.css: #header .btn_dm_header img */
body.web-mode #header .btn_dm_header img {
	width: 33px !important;
	height: 36px !important;
}

/* common.css: #header .llink */
body.web-mode #header .llink {
	left: 0px !important;
	top: 0px !important;
}

/* common.css: #header .llink > a */
body.web-mode #header .llink > a {
	margin-right: 5px !important;
}

/* common.css: #header .llink > button */
body.web-mode #header .llink > button {
	margin-right: 5px !important;
}

/* common.css: #header .llink .on:after */
body.web-mode #header .llink .on:after {
	left: -3px !important;
	top: 2px !important;
	width: 7px !important;
	height: 7px !important;
	-webkit-border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	border-radius: 4px !important;
}

/* common.css: #footer */
body.web-mode #footer {
	bottom: 20px !important;
	padding: 0px 15px !important;
}

/* common.css: #footer a */
body.web-mode #footer a {
	width: 50px !important;
	height: 50px !important;
}

/* common.css: #footer a.cen */
body.web-mode #footer a.cen {
	margin: 0px 25px !important;
	width: 54px !important;
	height: 54px !important;
}

/* common.css: #footer .i-ico */
body.web-mode #footer .i-ico {
	width: 25px !important;
	height: 25px !important;
}

/* common.css: #footer::after */
body.web-mode #footer::after {
	-webkit-border-radius: 0px 25px 25px 0px !important;
	-moz-border-radius: 0px 25px 25px 0px !important;
	border-radius: 0px 25px 25px 0px !important;
}

/* common.css: #footer::before */
body.web-mode #footer::before {
	-webkit-border-radius: 25px 0px 0px 25px !important;
	-moz-border-radius: 25px 0px 0px 25px !important;
	border-radius: 25px 0px 0px 25px !important;
}

/* common.css: body.is-app .wrap_info .lst_info .grade_icon */
body.web-mode body.is-app .wrap_info .lst_info .grade_icon {
	width: 65px !important;
	margin-top: 5px !important;
}

/* common.css: body.is-app .wrap_info .lst_info .h1 */
body.web-mode body.is-app .wrap_info .lst_info .h1 {
	margin-top: 5px !important;
}

/* common.css: body.is-app .wrap_info .lst_info .card a */
body.web-mode body.is-app .wrap_info .lst_info .card a {
	margin-top: 4px !important;
}

/* common.css: body.is-app .wrap_info .lst_info .grade_graph */
body.web-mode body.is-app .wrap_info .lst_info .grade_graph {
	margin-top: 9px !important;
	margin-bottom: 9px !important;
}

/* common.css: body.is-app .wrap_info .lst_info .lst1 */
body.web-mode body.is-app .wrap_info .lst_info .lst1 {
	padding: 7px 0 !important;
}

/* common.css: body.is-app .wrap_info .lst_info .b1 */
body.web-mode body.is-app .wrap_info .lst_info .b1 {
	margin-top: 9px !important;
}

/* common.css: body.is-app .wrap_info .lst_info .b2 */
body.web-mode body.is-app .wrap_info .lst_info .b2 {
	margin-top: 9px !important;
	padding-top: 9px !important;
}

/* common.css: /* 앱에서 댓글 입력창 고정 + Flutter BottomNav 여백 */
body.is-app .layerPopup_botm.pop_comment .botm_send */
body.web-mode /* 앱에서 댓글 입력창 고정 + Flutter BottomNav 여백 */
body.is-app .layerPopup_botm.pop_comment .botm_send {
	padding-bottom: 58px !important;
}

/* common.css: body.is-app .layerPopup_botm.pop_feed_detail .botm_send */
body.web-mode body.is-app .layerPopup_botm.pop_feed_detail .botm_send {
	padding-bottom: 58px !important;
}

/* common.css: body.is-app .layerPopup_botm.pop_write */
body.web-mode body.is-app .layerPopup_botm.pop_write {
	padding-bottom: 14px !important;
}

/* common.css: /* 앱에서 textarea 스크롤 가능하게 */
body.is-app .layerPopup_botm.pop_write .textarea1 */
body.web-mode /* 앱에서 textarea 스크롤 가능하게 */
body.is-app .layerPopup_botm.pop_write .textarea1 {
	height: 137px !important;
}

/* common.css: .wrap_intro .btns */
body.web-mode .wrap_intro .btns {
	margin-left: 40px !important;
	margin-right: 40px !important;
}

/* common.css: .wrap_intro .btns .btn-pk */
body.web-mode .wrap_intro .btns .btn-pk {
	margin-bottom: 15px !important;
}

/* common.css: .list_con */
body.web-mode .list_con {
	margin-bottom: 17px !important;
}

/* common.css: .list_con .con */
body.web-mode .list_con .con {
	margin-bottom: 12px !important;
	-webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important;
	font-size: 12px !important;
}

/* common.css: .list_con .con .tx */
body.web-mode .list_con .con .tx {
	margin: 10px 12px !important;
}

/* common.css: .list_con .con .tx-more */
body.web-mode .list_con .con .tx-more {
	margin: 0 12px 5px !important;
}

/* common.css: .list_con .con .swiper-pagination */
body.web-mode .list_con .con .swiper-pagination {
	right: 10px !important;
	bottom: 10px !important;
	padding: 0px 7px !important;
	font-size: 11px !important;
	line-height: 1.5 !important;
	-webkit-border-radius: 15px !important;
	-moz-border-radius: 15px !important;
	border-radius: 15px !important;
}

/* common.css: .list_con .botm  — REMOVED in v1.2.1, Phase 1.3 이 정답.
   Phase 1.4 의 자동환산이 Phase 1.3 명시 룰을 덮어서 좋아요/북마크 버튼 width:12px 로 찌그러뜨림.
   Phase 1.3 (line 459~486) 의 28×28 button + 26×26 svg/img + 20px em img 유지. */

/* common.css: .wrap_search */
body.web-mode .wrap_search {
	padding-bottom: 20px !important;
}

/* common.css: .wrap_search .logo */
body.web-mode .wrap_search .logo {
	padding: 22px 0px !important;
}

/* common.css: .wrap_search .logo img */
body.web-mode .wrap_search .logo img {
	width: 56px !important;
	height: 28px !important;
}

/* common.css: .wrap_search .cont */
body.web-mode .wrap_search .cont {
	min-height: calc(100vh - 92px) !important;
	-webkit-border-radius: 22px !important;
	-moz-border-radius: 22px !important;
	border-radius: 22px !important;
	padding: 25px !important;
}

/* common.css: .wrap_search .h1 */
body.web-mode .wrap_search .h1 {
	margin-bottom: 15px !important;
	padding-top: 50px !important;
	font-size: 34px !important;
}

/* common.css: .wrap_search .h2 */
body.web-mode .wrap_search .h2 {
	margin-bottom: 15px !important;
	font-size: 22px !important;
}

/* common.css: .wrap_search .h3 */
body.web-mode .wrap_search .h3 {
	margin-bottom: 14px !important;
	font-size: 15px !important;
}

/* common.css: .wrap_search .t1 */
body.web-mode .wrap_search .t1 {
	margin-top: 35px !important;
	font-size: 12px !important;
}

/* common.css: .wrap_info .tit */
body.web-mode .wrap_info .tit {
	margin-bottom: 35px !important;
	font-size: 18px !important;
}

/* common.css: .wrap_info .lst_info .card a */
body.web-mode .wrap_info .lst_info .card a {
	margin-top: 7px !important;
}

/* common.css: .wrap_info .lst_info .grade_icon */
body.web-mode .wrap_info .lst_info .grade_icon {
	width: 83px !important;
	margin-top: 15px !important;
}

/* common.css: .wrap_info .lst_info .h1 */
body.web-mode .wrap_info .lst_info .h1 {
	margin-top: 15px !important;
}

/* common.css: .wrap_info .lst_info .h1 .l */
body.web-mode .wrap_info .lst_info .h1 .l {
	font-size: 14px !important;
}

/* common.css: .wrap_info .lst_info .h1 .d */
body.web-mode .wrap_info .lst_info .h1 .d {
	font-size: 10px !important;
}

/* common.css: .wrap_info .lst_info .lst1 */
body.web-mode .wrap_info .lst_info .lst1 {
	padding: 15px 0px !important;
}

/* common.css: .wrap_info .lst_info .lst1 li */
body.web-mode .wrap_info .lst_info .lst1 li {
	padding: 5px 0px !important;
}

/* common.css: .wrap_info .lst_info .lst1 .btn-pk */
body.web-mode .wrap_info .lst_info .lst1 .btn-pk {
	margin-top: -3px !important;
}

/* common.css: .wrap_info .lst_info .b1 */
body.web-mode .wrap_info .lst_info .b1 {
	margin-top: 20px !important;
	font-size: 12px !important;
}

/* common.css: .wrap_info .lst_info .b2 */
body.web-mode .wrap_info .lst_info .b2 {
	margin-top: 20px !important;
	font-size: 12px !important;
	padding-top: 15px !important;
}

/* common.css: .wrap_info .lst_info .grade_graph */
body.web-mode .wrap_info .lst_info .grade_graph {
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

/* common.css: .wrap_info .lst_info .grade_graph li */
body.web-mode .wrap_info .lst_info .grade_graph li {
	font-size: 12px !important;
}

/* common.css: .wrap_info .lst_info .grade_graph li .graph */
body.web-mode .wrap_info .lst_info .grade_graph li .graph {
	margin-top: 2px !important;
}

/* common.css: .wrap_message */
body.web-mode .wrap_message {
	padding-top: 68px !important;
}

/* common.css: .wrap_message .head .tit */
body.web-mode .wrap_message .head .tit {
	font-size: 18px !important;
	line-height: 1.5 !important;
}

/* common.css: .wrap_message .head .btn_back */
body.web-mode .wrap_message .head .btn_back {
	width: 80px !important;
	height: 68px !important;
}

/* common.css: .wrap_message .cont .li */
body.web-mode .wrap_message .cont .li {
	margin: 15px 0px 15px 15px !important;
	padding-left: 35px !important;
}

/* common.css: .wrap_message .cont .li::after */
body.web-mode .wrap_message .cont .li::after {
	width: 26px !important;
	height: 26px !important;
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	border-radius: 5px !important;
}

/* common.css: .wrap_message .cont .lft span */
body.web-mode .wrap_message .cont .lft span {
	width: 26px !important;
	height: 26px !important;
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	border-radius: 5px !important;
}

/* common.css: .wrap_message .cont .li.li_rps::after */
body.web-mode .wrap_message .cont .li.li_rps::after {
	line-height: 1.5 !important;
}

/* common.css: .wrap_message .cont .li.li_wallet::after */
body.web-mode .wrap_message .cont .li.li_wallet::after {
	line-height: 1.5 !important;
}

/* common.css: .wrap_message .cont .t1 */
body.web-mode .wrap_message .cont .t1 {
	margin-bottom: 7px !important;
	font-size: 13px !important;
}

/* common.css: .wrap_message .cont .t2 */
body.web-mode .wrap_message .cont .t2 {
	font-size: 10px !important;
}

/* common.css: .alertPopup */
body.web-mode .alertPopup {
	border-width: 4px !important;
	-webkit-border-radius: 17px !important;
	-moz-border-radius: 17px !important;
	border-radius: 17px !important;
}

/* common.css: .alertPopup .popup */
body.web-mode .alertPopup .popup {
	width: 100% !important;
	padding: 24px 10px 15px 10px !important;
	font-size: 11px !important;
}

/* common.css: .alertPopup .popup .txt */
body.web-mode .alertPopup .popup .txt {
	min-height: 50px !important;
}

/* common.css: .alertPopup .popup .txt strong */
body.web-mode .alertPopup .popup .txt strong {
	font-size: 16px !important;
}

/* common.css: .alertPopup .popup .txt .mt */
body.web-mode .alertPopup .popup .txt .mt {
	margin-top: 12px !important;
}

/* common.css: .alertPopup .popup .botm */
body.web-mode .alertPopup .popup .botm {
	margin-top: 20px !important;
}

/* common.css: .alertPopup .popup .botm .bt */
body.web-mode .alertPopup .popup .botm .bt {
	height: 35px !important;
	font-size: 16px !important;
}

/* common.css: .alertPopup .popup .txt .mt .inp_txt */
body.web-mode .alertPopup .popup .txt .mt .inp_txt {
	height: 45px !important;
	padding: 0px 20px 0px 20px !important;
	line-height: 1.5 !important;
	-webkit-border-radius: 25px !important;
	-moz-border-radius: 25px !important;
	border-radius: 25px !important;
	font-size: 23px !important;
}

/* common.css: .alertPopup .popup .txt .mt::after */
body.web-mode .alertPopup .popup .txt .mt::after {
	height: 50px !important;
}

/* common.css: .layerPopup
   (2026-05-26 16차) PC 1280+ 좌측 편향 정상화 — width:100%/left:0 override 차단
   사진 viewer(pop_photo_viewer) 등 가운데 정렬 layerPopup 가 좌측으로 밀리는 문제 수정.
   L108~117 + L138 의 가운데 정렬 룰을 후행 룰이 덮어쓰던 패턴 차단.
   (2026-05-26 20차) left:50% 만으로는 viewer 좌상단이 화면중앙에 놓여 우측 편향 발생 →
   transform: translateX(-50%) 추가로 element 자체 가운데 정렬. */
body.web-mode .layerPopup {
	width: var(--web-col) !important;
	max-width: var(--web-col) !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}

/* common.css: .layerPopup2 */
body.web-mode .layerPopup2 {
	width: var(--web-col) !important;
	max-width: var(--web-col) !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}

/* common.css: .layerPopup3 */
body.web-mode .layerPopup3 {
	width: var(--web-col) !important;
	max-width: var(--web-col) !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}

/* (2026-05-26 33차) 사진 viewer 풀스크린 + 내부 사진 가운데 fit — 21~32차 모두 통합 정리
   배경: 21~32차까지 viewer 외곽 width/transform 으로 viewport 가운데 정렬 시도 → 12회 모두 실패.
         32차 외곽은 가운데, 내부 swiper-slide 가 viewer 안에서 우측 편향 패턴 추정 →
         swiper-wrapper transform: translate3d 과 부모 translate(-50%,-50%) 의 합산/충돌.
   접근: viewer 외곽을 풀스크린(100vw×100vh, transform:none)으로 만들어 translate 충돌 자체 제거.
         flex 가운데 정렬로 내부 swiper 가 viewport 정중앙에 놓이게 함.
         사진은 max-width/max-height + object-fit:contain 으로 자연 비율 fit.
         배경 dim 은 viewer 자체 background 로 처리(::before 폐기).
   효과: swiper 가 transform 으로 어디든 가도 풀스크린 flex 가운데 정렬로 항상 viewport 중앙.
         21~32차 모든 cascade 충돌 회피. */

/* (2026-05-26 35차) viewer 기본 숨김 상태 복구
   배경: 33차에서 viewer 외곽에 display:flex !important 강제 → fadeIn 호출 전(페이지 로드 즉시)부터 표시.
         메인 화면 진입만 해도 viewer 가 떠있는 회귀.
   접근: 방법 B — body.pv-web-open 기반 조건부 표시.
         30·31차 jQuery monkeypatch 가 viewer show/hide 시 body.pv-web-open 토글 → CSS 가 이 클래스 보고 표시/숨김.
   효과: 평상시 viewer 숨김(jQuery 기본 display:none 그대로), 열렸을 때만 풀스크린 flex 가운데 정렬. */

/* 외곽 viewer — 평상시 숨김 (강제 display:flex 제거) */
body.web-mode #popPhotoviewer,
body.web-mode .layerPopup.pop_photo_viewer,
body.web-mode .layerPopup2.pop_photo_viewer,
body.web-mode .layerPopup3.pop_photo_viewer {
	/* 33차 풀스크린 좌표/배경은 유지 — body.pv-web-open 일 때만 의미 있게 발현 */
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	min-width: 0 !important;
	max-width: none !important;
	max-height: none !important;
	transform: none !important;
	-webkit-transform: none !important;
	margin: 0 !important;
	background: rgba(0, 0, 0, 0.88) !important;
	/* display 강제 X — jQuery .fadeIn 이 inline style 박기 전엔 숨김 유지 */
	align-items: center !important;
	justify-content: center !important;
	z-index: 9999 !important;
}

/* 열렸을 때만 풀스크린 flex — body.pv-web-open (30·31차 monkeypatch) 기반 */
body.web-mode.pv-web-open #popPhotoviewer,
body.web-mode.pv-web-open .layerPopup.pop_photo_viewer,
body.web-mode.pv-web-open .layerPopup2.pop_photo_viewer,
body.web-mode.pv-web-open .layerPopup3.pop_photo_viewer {
	display: flex !important;
}

/* 안전망: jQuery fadeIn 결과 inline style="display: block" 도 풀스크린 flex 로 승격
   (pv-web-open 클래스 부착 누락 케이스 대비) */
body.web-mode #popPhotoviewer[style*="display: block"],
body.web-mode .layerPopup.pop_photo_viewer[style*="display: block"],
body.web-mode .layerPopup2.pop_photo_viewer[style*="display: block"],
body.web-mode .layerPopup3.pop_photo_viewer[style*="display: block"] {
	display: flex !important;
}

/* (2026-05-26 34차) swiper 0×0 collapse fix
   배경: 33차에서 swiper/slider1 에 max-width: min(700px, 90vw) 만 부여 → swiper 내부 슬라이드 width=0
         결과: 풀스크린 dim 작동 OK, 사진 자체 표시 안 됨 (17·18차와 동일 패턴 재발).
   접근: swiper 외곽들은 100% width/height (부모=viewer 풀스크린 차원 그대로 받음),
         사진(img) 자체에만 max-width: min(700px, 90vw) + max-height: 85vh + object-fit:contain.
   효과: swiper 풀스크린 → 슬라이드 풀스크린 → img 만 자연 비율 fit + 가운데. */
body.web-mode #popPhotoviewer .post-swiper {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
}
body.web-mode #popPhotoviewer .slider1 {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
}
body.web-mode #popPhotoviewer .slider1 .swiper-wrapper {
	width: 100% !important;
	height: 100% !important;
}
body.web-mode #popPhotoviewer .swiper-slide,
body.web-mode #popPhotoviewer .slider1 .swiper-slide {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* 사진 자체 — 자연 비율 contain, swiper-slide 안 가운데 */
body.web-mode #popPhotoviewer .swiper-slide img,
body.web-mode .layerPopup.pop_photo_viewer .slider1 .swiper-slide img,
body.web-mode .layerPopup2.pop_photo_viewer .slider1 .swiper-slide img,
body.web-mode .layerPopup3.pop_photo_viewer .slider1 .swiper-slide img {
	max-width: min(700px, 90vw) !important;
	max-height: 85vh !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
}

/* 좌·우 패널 hide — viewer 표시 시 (24·27차 검증 OK 유지) */
body.web-mode:has(#popPhotoviewer[style*="display: block"]) .web-side--left,
body.web-mode:has(#popPhotoviewer[style*="display: block"]) .web-side--right,
body.web-mode:has(#popPhotoviewer[style*="display: block"]) .web-side,
body.web-mode.pv-web-open .web-side--left,
body.web-mode.pv-web-open .web-side--right,
body.web-mode.pv-web-open .web-side {
	display: none !important;
}

/* 닫기 버튼 — viewport 우상단 고정 */
body.web-mode #popPhotoviewer .close-btn,
body.web-mode #popPhotoviewer .b-close,
body.web-mode #popPhotoviewer .btn_pop_close,
body.web-mode #popPhotoviewer .btn_close {
	position: fixed !important;
	top: 16px !important;
	right: 16px !important;
	z-index: 10000 !important;
}

/* common.css: .layerPopup_botm */
/* left:0px 제거 — 상단 149-152 블록에서 left:50%+translateX(-50%) 로 중앙 정렬 처리 (46차 2026-05-26) */
body.web-mode .layerPopup_botm {
	-webkit-border-radius: 22px 22px 0px 0px !important;
	-moz-border-radius: 22px 22px 0px 0px !important;
	border-radius: 22px 22px 0px 0px !important;
}

/* common.css: .layerPopup_botm .btn_botm_close */
body.web-mode .layerPopup_botm .btn_botm_close {
	padding: 15px 0px !important;
}

/* common.css: .layerPopup_botm .btn_botm_close span */
body.web-mode .layerPopup_botm .btn_botm_close span {
	width: 38px !important;
	height: 4px !important;
	-webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important;
}

/* common.css: .layerPopup_botm .ptit */
body.web-mode .layerPopup_botm .ptit {
	margin-bottom: 25px !important;
	padding-top: 10px !important;
	font-size: 18px !important;
}

/* common.css: .layerPopup_botm.active */
body.web-mode .layerPopup_botm.active {
	bottom: -1px !important;
}

/* common.css: .layerPopup_botm.pop_comment .scrollY */
body.web-mode .layerPopup_botm.pop_comment .scrollY {
	max-height: calc(100vh - 250px) !important;
}

/* common.css: .layerPopup_botm.pop_comment .botm_send */
body.web-mode .layerPopup_botm.pop_comment .botm_send {
	padding: 10px 23px 25px 23px !important;
}

/* common.css: .layerPopup_botm.pop_comment .botm_send .replyBox .reply_box */
body.web-mode .layerPopup_botm.pop_comment .botm_send .replyBox .reply_box {
	-webkit-border-radius: 25px !important;
	-moz-border-radius: 25px !important;
	border-radius: 25px !important;
}

/* common.css: .layerPopup_botm.pop_comment .botm_send .inp_txt */
/* padding-top/bottom: 인라인 2.5vw(=9px@360px) → 9px 명시 (46차 2026-05-26) */
body.web-mode .layerPopup_botm.pop_comment .botm_send .inp_txt {
	height: 45px !important;
	padding: 9px 65px 9px 20px !important;
	line-height: 1.5 !important;
	-webkit-border-radius: 25px !important;
	-moz-border-radius: 25px !important;
	border-radius: 25px !important;
	font-size: 12px !important;
}

/* common.css: .layerPopup_botm.pop_comment .botm_send .btn_send */
body.web-mode .layerPopup_botm.pop_comment .botm_send .btn_send {
	right: 23px !important;
	width: 65px !important;
	height: 45px !important;
}

/* common.css: .layerPopup_botm.pop_comment .botm_send::after */
body.web-mode .layerPopup_botm.pop_comment .botm_send::after {
	height: 50px !important;
}

/* common.css: .layerPopup_botm.pop_comment .lst_comment */
body.web-mode .layerPopup_botm.pop_comment .lst_comment {
	padding: 0px 23px 5px 23px !important;
	font-size: 12px !important;
}

/* common.css: .layerPopup_botm.pop_comment .lst_comment .li */
body.web-mode .layerPopup_botm.pop_comment .lst_comment .li {
	margin-bottom: 25px !important;
}

/* common.css: .layerPopup_botm.pop_comment .lst_comment .li.reply */
body.web-mode .layerPopup_botm.pop_comment .lst_comment .li.reply {
	margin-top: 12px !important;
}

/* common.css: .layerPopup_botm.pop_comment .lst_comment .li .tit */
body.web-mode .layerPopup_botm.pop_comment .lst_comment .li .tit {
	margin-bottom: 11px !important;
}

/* common.css: .layerPopup_botm.pop_comment .lst_comment .li .tit .l */
body.web-mode .layerPopup_botm.pop_comment .lst_comment .li .tit .l {
	margin-right: 15px !important;
	font-size: 14px !important;
}

/* common.css: .layerPopup_botm.pop_comment .lst_comment .li .tit .r */
body.web-mode .layerPopup_botm.pop_comment .lst_comment .li .tit .r {
	font-size: 10px !important;
}

/* common.css: .layerPopup_botm.pop_comment .lst_comment .li .im */
body.web-mode .layerPopup_botm.pop_comment .lst_comment .li .im {
	margin-bottom: 9px !important;
	max-width: 160px !important;
}

/* common.css: /* 피드 상세 팝업 - 댓글 영역 스타일 (pop_comment 패턴 재사용) */
.layerPopup_botm.pop_feed_detail .scrollY */
body.web-mode /* 피드 상세 팝업 - 댓글 영역 스타일 (pop_comment 패턴 재사용) */
.layerPopup_botm.pop_feed_detail .scrollY {
	max-height: calc(100vh - 250px) !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .botm_send */
body.web-mode .layerPopup_botm.pop_feed_detail .botm_send {
	padding: 10px 23px 25px 23px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .botm_send .replyBox .reply_box */
body.web-mode .layerPopup_botm.pop_feed_detail .botm_send .replyBox .reply_box {
	-webkit-border-radius: 25px !important;
	-moz-border-radius: 25px !important;
	border-radius: 25px !important;
	font-size: 11px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .botm_send .inp_txt */
body.web-mode .layerPopup_botm.pop_feed_detail .botm_send .inp_txt {
	height: 45px !important;
	padding: 0px 65px 0px 20px !important;
	-webkit-border-radius: 25px !important;
	-moz-border-radius: 25px !important;
	border-radius: 25px !important;
	font-size: 13px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .botm_send .btn_send */
body.web-mode .layerPopup_botm.pop_feed_detail .botm_send .btn_send {
	right: 23px !important;
	width: 65px !important;
	height: 45px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .lst_comment */
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment {
	padding: 0px 23px 5px 23px !important;
	font-size: 12px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .lst_comment .li */
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .li {
	margin-bottom: 25px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .lst_comment .li.reply */
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .li.reply {
	margin-top: 12px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .lst_comment .li .tit */
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .li .tit {
	margin-bottom: 11px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .lst_comment .li .tit .l */
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .li .tit .l {
	margin-right: 15px !important;
	font-size: 14px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .lst_comment .li .tit .r */
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .li .tit .r {
	font-size: 10px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .lst_comment .badge-wrap */
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .badge-wrap {
	margin-right: 2px !important;
}

/* common.css: .layerPopup_botm.pop_feed_detail .lst_comment .badge-wrap em img */
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .badge-wrap em img {
	width: 18px !important;
}

/* common.css: .layerPopup_botm.pop_write .btn_send */
body.web-mode .layerPopup_botm.pop_write .btn_send {
	right: 20px !important;
	top: 39px !important;
	width: 30px !important;
	height: 30px !important;
}

/* common.css: .layerPopup_botm.pop_write .textarea1 */
body.web-mode .layerPopup_botm.pop_write .textarea1 {
	height: 188px !important;
	padding: 0px 23px !important;
	font-size: 15px !important;
}

/* common.css: .layerPopup_botm.pop_write .lst_photo */
body.web-mode .layerPopup_botm.pop_write .lst_photo {
	height: 60px !important;
}

/* common.css: .layerPopup_botm.pop_write .lst_photo .filebtn */
body.web-mode .layerPopup_botm.pop_write .lst_photo .filebtn {
	min-width: 65px !important;
}

/* common.css: .layerPopup_botm.pop_write .lst_photo .file_list */
body.web-mode .layerPopup_botm.pop_write .lst_photo .file_list {
	padding: 8px 0px !important;
}

/* common.css: .layerPopup_botm.pop_write .lst_photo .file_list .filebox */
body.web-mode .layerPopup_botm.pop_write .lst_photo .file_list .filebox {
	margin-left: 10px !important;
	min-width: 42px !important;
	height: 42px !important;
}

/* common.css: .layerPopup_botm.pop_write .lst_photo .file_list .btn_close_del */
body.web-mode .layerPopup_botm.pop_write .lst_photo .file_list .btn_close_del {
	right: -5px !important;
	top: -5px !important;
}

/* common.css: .layerPopup_botm.pop_terms .terms_con */
body.web-mode .layerPopup_botm.pop_terms .terms_con {
	font-size: 13px !important;
}

/* common.css: .filebtn */
body.web-mode .filebtn {
	width: 50px !important;
	height: 60px !important;
	-webkit-background-size: 34px !important;
	background-size: 34px !important;
}

/* common.css: .campaign_box .tit */
body.web-mode .campaign_box .tit {
	margin: 0 12px !important;
	padding: 14px 0 !important;
	font-size: 17px !important;
}

/* common.css: .campaign_box .btns */
body.web-mode .campaign_box .btns {
	margin: 0 12px !important;
}

/* common.css: .campaign_box .btns .col */
body.web-mode .campaign_box .btns .col {
	border-radius: 7px !important;
	font-size: 14px !important;
	padding: 10px 0 !important;
}

/* common.css: .coin_box .btn-pk */
body.web-mode .coin_box .btn-pk {
	margin-top: 30px !important;
	margin-bottom: 15px !important;
}

/* common.css: .wrap_solflare .sol_wallet .sol_title */
body.web-mode .wrap_solflare .sol_wallet .sol_title {
	font-size: 13px !important;
}

/* common.css: .wrap_solflare .btn_sol_install */
body.web-mode .wrap_solflare .btn_sol_install {
	font-size: 13px !important;
}

/* common.css: .wrap_solflare .btn_sol_connect */
body.web-mode .wrap_solflare .btn_sol_connect {
	font-size: 13px !important;
}

/* default.css: input[type='text'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='submit'],
select,
textarea */
body.web-mode input[type='text'], body.web-mode input[type='password'], body.web-mode input[type='number'], body.web-mode input[type='search'], body.web-mode input[type='submit'], body.web-mode select, body.web-mode textarea {
	font-size: 11px !important;
}

/* default.css: .btn-bot */
body.web-mode .btn-bot {
	margin-top: 10px !important;
}

/* default.css: .btn-pk */
body.web-mode .btn-pk {
	-webkit-border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	border-radius: 4px !important;
}

/* default.css: .btn-pk.s */
body.web-mode .btn-pk.s {
	padding: 2px 7px !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	-webkit-border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	border-radius: 4px !important;
}

/* default.css: .btn-pk.b */
body.web-mode .btn-pk.b {
	padding: 0px 10px !important;
	font-size: 17px !important;
	line-height: 1.5 !important;
}

/* default.css: .btn-pk.member */
body.web-mode .btn-pk.member {
	-webkit-border-radius: 25px !important;
	-moz-border-radius: 25px !important;
	border-radius: 25px !important;
	line-height: 1.5 !important;
	font-size: 15px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

/* default.css: .btn-pk.bdrs */
body.web-mode .btn-pk.bdrs {
	-webkit-border-radius: 50px !important;
	-moz-border-radius: 50px !important;
	border-radius: 50px !important;
}

/* default.css: .i-ico.i_comment */
body.web-mode .i-ico.i_comment {
	padding-left: 25px !important;
}

/* default.css: .i-ico.i_comment */
body.web-mode .i-ico.i_comment {
	padding-left: 25px !important;
}

/* default.css: .i-ico.i_comment:after */
body.web-mode .i-ico.i_comment:after {
	margin-top: -10px !important;
	width: 19px !important;
	height: 19px !important;
}

/* default.css: .i-ico.i_photo_del */
body.web-mode .i-ico.i_photo_del {
	width: 13px !important;
	height: 13px !important;
}

/* default.css: .i-ico.i_photo_del:after */
body.web-mode .i-ico.i_photo_del:after {
	margin-left: -7px !important;
	margin-top: -7px !important;
	width: 13px !important;
	height: 13px !important;
}


/* ─── Priority 2: 캠페인/설문/이벤트/관리/설정 ─── */

/* common.css: .wrap_wallet .balance */
body.web-mode .wrap_wallet .balance {
	-webkit-border-radius: 22px !important;
	-moz-border-radius: 22px !important;
	border-radius: 22px !important;
	padding: 21px 21px !important;
	font-size: 14px !important;
}

/* common.css: .wrap_wallet .balance p span */
body.web-mode .wrap_wallet .balance p span {
	font-size: 36px !important;
}

/* common.css: .wrap_wallet .points */
body.web-mode .wrap_wallet .points {
	-webkit-border-radius: 22px !important;
	-moz-border-radius: 22px !important;
	border-radius: 22px !important;
	padding: 21px 21px !important;
	font-size: 14px !important;
}

/* common.css: .wrap_wallet .points p span */
body.web-mode .wrap_wallet .points p span {
	font-size: 36px !important;
}

/* common.css: .wrap_wallet .w_address */
body.web-mode .wrap_wallet .w_address {
	-webkit-border-radius: 22px !important;
	-moz-border-radius: 22px !important;
	border-radius: 22px !important;
	padding: 12px 19px !important;
	font-size: 10px !important;
}

/* common.css: .wrap_wallet .w_address .copys */
body.web-mode .wrap_wallet .w_address .copys {
	right: 11px !important;
	width: 14px !important;
}

/* common.css: .campaign_box */
body.web-mode .campaign_box {
	border-radius: 10px !important;
	margin-bottom: 17px !important;
	padding-bottom: 10px !important;
}

/* common.css: .campaign_box .cont */
body.web-mode .campaign_box .cont {
	margin: 0 12px !important;
	padding: 10px 0 !important;
	font-size: 12px !important;
}

/* common.css: .campaign_box .tags */
body.web-mode .campaign_box .tags {
	margin: 0 12px !important;
	padding: 10px 0 !important;
	font-size: 16px !important;
}

/* common.css: .campaign_box .stats */
body.web-mode .campaign_box .stats {
	margin: 0 12px !important;
}

/* common.css: .campaign_box .stats .col */
body.web-mode .campaign_box .stats .col {
	padding: 2px 0 !important;
	font-size: 14px !important;
}

/* common.css: .coin_box */
body.web-mode .coin_box {
	width: 100% !important;
}

/* common.css: .coin_box .txts */
body.web-mode .coin_box .txts {
	font-size: 17px !important;
	margin-top: 30px !important;
}

/* common.css: .coin_box .points */
body.web-mode .coin_box .points {
	font-size: 17px !important;
	margin-top: 16px !important;
}

/* common.css: .coin_box .points span */
body.web-mode .coin_box .points span {
	font-size: 41px !important;
}

/* common.css: /* ========================================
   Solflare 지갑 연동 페이지
   ======================================== */
.wrap_solflare .sol_points */
body.web-mode /* ========================================
   Solflare 지갑 연동 페이지
   ======================================== */
.wrap_solflare .sol_points {
	border-radius: 22px !important;
	padding: 21px !important;
	font-size: 14px !important;
}

/* common.css: .wrap_solflare .sol_points p span */
body.web-mode .wrap_solflare .sol_points p span {
	font-size: 36px !important;
}

/* common.css: .wrap_solflare .sol_wallet */
body.web-mode .wrap_solflare .sol_wallet {
	border-radius: 22px !important;
	padding: 21px !important;
}

/* ============================================================
   [Phase 1.5] v1.2.1 — 액션바 아이콘 (.i-ico) 명시 픽셀
   원인: default.css 의 .i-ico.i_bookmark / i_good / i_comm / i_share 가
         padding-left vw + :after width/height vw 로 정의됨.
         1920px viewport 에서 5vw ≒ 96px → 좋아요/북마크 거대 아이콘.
   Phase 1.3 의 button img/svg 26px 룰은 매칭 안 됨 (실제 구조는
   <button><span class="i-ico i_bookmark"></span></button> — :after pseudo).
   ============================================================ */

/* 액션바 .i-ico 공통 — padding 트릭 무력화, 명시 24px */
body.web-mode .list_con .botm .i-ico {
	padding-left: 24px !important;
	width: 24px !important;
	height: 24px !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* 액션바 .i-ico:after — 실제 이미지가 그려지는 pseudo */
body.web-mode .list_con .botm .i-ico:after {
	width: 24px !important;
	height: 24px !important;
	left: 0 !important;
	top: 50% !important;
	margin-top: -12px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
}

/* 부모 button 터치영역 32×32 보장 (Phase 1.3 의 28×28 보다 약간 넉넉) */
body.web-mode .list_con .botm .lft button,
body.web-mode .list_con .botm .rgh button {
	min-width: 32px !important;
	min-height: 32px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* 만약 인라인 svg/img 가 들어있는 경우 보강 (Phase 1.3 중복이지만 명시) */
body.web-mode .list_con .botm svg,
body.web-mode .list_con .botm img:not(em img) {
	width: 24px !important;
	height: 24px !important;
}

/* ============================================================
 * Phase 1.6 — wrap_search (survey 페이지) vw → px override
 * common.css 697~770 의 vw 단위를 360px 뷰포트 기준 px 환산
 * 영향: /survey/survey.php (Q&A 입력), 그 외 wrap_search 마크업
 * 모바일 회귀 0 — .web-mode 스코프 한정
 * 일자: 2026-05-26
 * v1.2.3 (7차) — 폰트값 재조정 (68→34/45→22/30→15/24→12) + Phase 1.7 신설
 * ============================================================ */

/* common.css:697 .wrap_search 본체 */
body.web-mode .wrap_search {
	padding-bottom: 20px !important;
}

/* common.css:706 .wrap_search .logo */
body.web-mode .wrap_search .logo {
	padding: 22px 0px !important;
}

/* common.css:711 .wrap_search .logo img */
body.web-mode .wrap_search .logo img {
	width: 56px !important;
	height: 28px !important;
}

/* common.css:717 .wrap_search .cont
   8차(v1.2.4): justify-content: space-between + min-height: 100vh-92px 가
   PC viewport(700px) 안에서 .tx(질문) 와 .btns(답변) 를 위/아래 끝으로
   벌려 답변 박스가 바닥에 떨어지는 문제 해결.
   → justify-content 와 min-height 를 자연 흐름으로 되돌림 */
body.web-mode .wrap_search .cont {
	justify-content: flex-start !important; /* 8차: space-between → flex-start */
	min-height: 0 !important;               /* 8차: 100vh 강제 폐기 */
	border-radius: 22px !important;
	padding: 25px !important;
}

/* common.css:736 .wrap_search .h1 */
body.web-mode .wrap_search .h1 {
	margin-bottom: 15px !important;
	padding-top: 50px !important;
	font-size: 34px !important;
}

/* common.css:746 .wrap_search .h2 */
body.web-mode .wrap_search .h2 {
	margin-bottom: 15px !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
}

/* common.css:755 .wrap_search .h3 */
body.web-mode .wrap_search .h3 {
	margin-bottom: 14px !important;
	font-size: 15px !important;
}

/* common.css:762 .wrap_search .t1 */
body.web-mode .wrap_search .t1 {
	margin-top: 35px !important;
	font-size: 12px !important;
}

/* ============================================================
 * Phase 1.7 — survey 라디오 답변 + Next 버튼 px 정착 (7차)
 * 누락 셀렉터: .inp_radiotx + 자식 input/span, .btn-pk.bdrs
 * 원본 vw (default.css 1496~1525, 1207~1213, 1164~1171):
 *   .inp_radiotx                  margin-bottom 4.16vw
 *   .inp_radiotx input + span     padding 0 7.63vw / font-size 4.72vw /
 *                                 line-height 13.33vw / border-width 0.27vw /
 *                                 border-radius 6.94vw
 *   .btn-pk.b                     padding 0 2.77vw / font-size 4.72vw /
 *                                 line-height 13.33vw  (Phase 1.4 이미 처리됨)
 *   .btn-pk.bdrs                  border-radius 13.88vw (누락)
 * 환산: 1vw = 3.6px (360px viewport)
 * 영향: /survey/survey.php — 답변 라디오 2개 + Next 버튼
 * 일자: 2026-05-26
 * ============================================================ */

/* default.css:1496 .inp_radiotx — 라디오 답변 박스 외곽 */
body.web-mode .inp_radiotx {
	margin-bottom: 15px !important;
}

/* default.css:1506 .inp_radiotx input + span — 실제 답변 텍스트 박스 (핵심) */
body.web-mode .inp_radiotx input + span {
	padding: 0px 27px !important;       /* 7.63vw → 27px */
	font-size: 17px !important;          /* 4.72vw → 17px */
	line-height: 48px !important;        /* 13.33vw → 48px */
	border-width: 1px !important;        /* 0.27vw → 1px */
	-webkit-border-radius: 25px !important;
	-moz-border-radius: 25px !important;
	border-radius: 25px !important;      /* 6.94vw → 25px */
}

/* default.css:1207 .btn-pk.bdrs — Next 버튼 라운드 */
body.web-mode .btn-pk.bdrs {
	-webkit-border-radius: 50px !important;
	-moz-border-radius: 50px !important;
	border-radius: 50px !important;       /* 13.88vw → 50px */
}

/* wrap_search 안 Next 버튼은 .btn-pk.b 이미 Phase 1.4 에서 17px/padding 0 10px 처리됨.
   line-height 48px 로 라디오와 동일 높이 확보 */
body.web-mode .wrap_search .btn-pk.b {
	line-height: 48px !important;
	padding: 0px 20px !important;
}

/* ============================================================
 * Phase 1.9 — 로그인 SNS 아이콘 vw 폭주 fix (9차, v1.2.5)
 * ============================================================
 * 사건: 대장님 PC 검증(5/26 16:04) — login.php 에서 구글/애플/카카오
 *      아이콘이 버튼 좌측에 거대화되어 텍스트 가림.
 * 원인: default.css:1545~1590 의 .i-ico.i_google/i_apple/i_kakao
 *      padding-left:10vw + width/height 5.55~6.94vw — Phase 1.4
 *      bulk 환산에서 누락 (액션바 .botm .i-ico:after 만 처리됨).
 * 처리: SNS 아이콘 크기 24×24px 명시 + padding-left 36px (아이콘+여백 12px).
 *      .btn-pk.member 는 line-height 1.5/font 15px 로 Phase 1.4 처리됨,
 *      이미 적정 — 아이콘만 잡으면 됨.
 * 영향: /member/login.php, /member/login_web.php, 그 외 .btn-pk.member 안 SNS 버튼
 */

/* default.css:1545 .i-ico.i_google padding */
body.web-mode .i-ico.i_google {
	padding-left: 36px !important;
}
/* default.css:1549 .i-ico.i_google:after — 아이콘 본체 */
body.web-mode .i-ico.i_google:after {
	width: 24px !important;
	height: 24px !important;
	margin-top: -12px !important;
	background-size: contain !important;
}

/* default.css:1560 .i-ico.i_apple padding */
body.web-mode .i-ico.i_apple {
	padding-left: 36px !important;
}
/* default.css:1564 .i-ico.i_apple:after */
body.web-mode .i-ico.i_apple:after {
	width: 24px !important;
	height: 24px !important;
	margin-top: -12px !important;
	background-size: contain !important;
}

/* default.css:1575 .i-ico.i_kakao padding */
body.web-mode .i-ico.i_kakao {
	padding-left: 36px !important;
}
/* default.css:1579 .i-ico.i_kakao:after */
body.web-mode .i-ico.i_kakao:after {
	width: 24px !important;
	height: 24px !important;
	margin-top: -12px !important;
	background-size: contain !important;
}

/* ============================================================
 * Phase 1.10 — survey_result.php .graph vw 폭주 fix (10차, v1.2.6)
 * ============================================================
 * 사건: 대장님 PC 검증(5/26) — /survey/survey_result.php?survey_idx=740
 *      페이지에서 답변 텍스트(answer_1/answer_2)와 % 숫자가 폭주.
 * 조사: survey_result.php 사용 클래스 전수 추출 후 common.css/default.css
 *      교차 vw 매칭. 결과:
 *        - .wrap_search .cont/.h1/.h2/.logo → 7차에서 처리됨 (자연 혜택)
 *        - .btn-pk → 1.4 환산 처리됨 (자연 혜택)
 *        - inline <style>(181~345줄): dna-progress/friend-/ref-cta/
 *          survey-section/my-badge — 이미 px 기반 (영향 없음)
 *      ★ 잔존 vw 룰 ★
 *        - common.css:774  .graph        {font-size:5.25vw}  → 18.9px
 *        - common.css:775  .graph span   {font-size:4.2vw}   → 15.12px
 *      이 두 줄이 .an_1/.an_2 안 <p>텍스트와 % span을 폭주시킨 원인.
 * 처리: 360px 기준 1vw=3.6px 환산, .web-mode 스코프 px override.
 * 영향: survey_result.php 외 .graph 클래스 사용 모든 페이지
 *      (예: /survey/survey_finish.php 등 동일 .wrap_search .graph 구조)
 *      → 같은 폭주 동시 해소 (자연 혜택).
 */

/* common.css:774 .graph (font-size) */
body.web-mode .graph {
	font-size: 19px !important;
}
/* common.css:775 .graph span (% 숫자) */
body.web-mode .graph span {
	font-size: 15px !important;
}

/* ============================================================
 * Phase 1.11 — 로그인 페이지 비율 재조정 (11차, v1.2.7)
 * ============================================================
 * 사건: 대장님 PC 검증(5/26 16:56) — login.php 비율 문제
 *   1) TWIG 로고 폭 70% 차지 (PC 700px 에서 과대)
 *   2) 로그인 버튼 빈약 (height 없음, padding 0)
 *   3) 하단 "Terms & Privacy Policy" 텍스트 거대화 (3.33vw=23.3px@700 + weight 600)
 * 원인: Phase 1.4 bulk 변환에서 .wrap_intro .logo / .wrap_intro .link 누락.
 *      .btn-pk.member 는 padding/font만 잡혔고 height 미명시.
 * 처리:
 *   - .wrap_intro .logo 110×55px 명시 + margin-bottom 40px (vw 폭주 차단)
 *   - .wrap_intro .logo img max-width 100% / height auto (비율 보존)
 *   - .btn-pk.member height 50px + padding 0 20px (X 트위터 스타일)
 *   - SNS 아이콘 24→28px (버튼 키운 만큼 비율 맞춤, padding 36→40px)
 *   - .wrap_intro .link 13px / weight 500 / padding-top 60px (모바일 정상값)
 * 영향: /member/login.php, /member/login_web.php — 같은 .wrap_intro 사용 페이지 자연 혜택
 */

/* common.css:514 .wrap_intro .logo — 비율 보존 */
body.web-mode .wrap_intro .logo {
	width: 110px !important;
	height: 55px !important;
	margin-bottom: 40px !important;
}
body.web-mode .wrap_intro .logo img {
	max-width: 100% !important;
	height: auto !important;
}

/* default.css:1313 .btn-pk.member — 버튼 확대 (X 트위터 스타일) */
body.web-mode .btn-pk.member {
	height: 50px !important;
	padding: 0 20px !important;
	font-size: 15px !important;
	line-height: 50px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Phase 1.9 → 1.11 SNS 아이콘 28×28 (버튼 키운 비율 맞춤) */
body.web-mode .i-ico.i_google,
body.web-mode .i-ico.i_apple,
body.web-mode .i-ico.i_kakao {
	padding-left: 40px !important;
}
body.web-mode .i-ico.i_google:after,
body.web-mode .i-ico.i_apple:after,
body.web-mode .i-ico.i_kakao:after {
	width: 28px !important;
	height: 28px !important;
	margin-top: -14px !important;
}

/* common.css:537 .wrap_intro .link — 약관 텍스트 축소 */
body.web-mode .wrap_intro .link {
	padding-top: 60px !important;
	margin-bottom: 30px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

/* ============================================================
 * Phase 1.13 — 글쓰기 모달 내부 아이콘 vw 폭주 fix (13차, v1.2.9)
 * 원인: default.css 의 .i-ico.i_send2 / .i-ico.i_photo_del cascade 가 px 후 vw 로 덮음.
 *      Phase 1.4 자동변환은 이 셀렉터를 누락 — PC viewport 에서 2배 이상 비대화.
 * 환산 기준: 360px viewport (1vw = 3.6px)
 * 범위: .web-mode 스코프 한정, 모바일/앱 영향 0
 * ============================================================ */

/* 전송 버튼 아이콘 (i_send2:after) — 6.25vw=90px → 24px */
body.web-mode .i-ico.i_send2:after {
	margin-top: -12px !important;
	width: 24px !important;
	height: 24px !important;
}

/* 사진 삭제 아이콘 (.i_photo_del 본체 + :after) — 3.61vw=52px → 18px */
body.web-mode .i-ico.i_photo_del {
	width: 18px !important;
	height: 18px !important;
}
body.web-mode .i-ico.i_photo_del:after {
	margin-left: -9px !important;
	margin-top: -9px !important;
	width: 18px !important;
	height: 18px !important;
}

/* 글쓰기 전송 버튼 컨테이너 (.btn_send) — Phase 1.4 에서 30×30 처리됨, 아이콘만 보정 */
/* 닫기 버튼 (.btn_botm_close) — Phase 1.4 에서 처리됨 (line 1009), 추가 보정 불필요 */

/* 글쓰기 모달 폴 트리거 / 폴 모달 버튼 류 — popup_write_feed.php 인라인 style 에 px 박힘. 추가 override 불필요 */

/* ============================================================
 * Phase 1.14 — 글쓰기 모달 첨부 사진 썸네일 크기 정상화 (14차, v1.2.10)
 *
 * 증상: PC 700 컨테이너에서 첨부 사진 썸네일이 점처럼 작게(42×42) 표시.
 *      모바일은 84px → vw환산 11.66vw 정상.
 *
 * 원인: Phase 1.4 자동 vw→px 변환에서 11.66vw 을 모바일360 기준 절반인 42px 로 계산.
 *      common.css 1813-1816 .filebox min-width/height 84px(11.66vw) → 4차에서 42px override 박힘.
 *      PC 700 컨테이너 폭에서 42px 는 너무 작아 점처럼 보임. close_del 도 18×18 로 같이 작음.
 *
 * 처리: X 트위터 첨부 미리보기 톤 — 정사각형 100×100, 한 줄 5~6개.
 *      btn_close_del 도 24×24 로 비례 보정 (모바일 18 → PC 24).
 *      .filebtn (add file 버튼) 50×60 도 첨부 썸네일과 시각 위계 맞춰 80×100 으로 확대.
 * ============================================================ */
body.web-mode .layerPopup_botm.pop_write .lst_photo .file_list .filebox {
	margin-left: 12px !important;
	min-width: 100px !important;
	width: 100px !important;
	height: 100px !important;
}

body.web-mode .layerPopup_botm.pop_write .lst_photo .file_list .btn_close_del {
	right: -8px !important;
	top: -8px !important;
}

body.web-mode .layerPopup_botm.pop_write .lst_photo .file_list .btn_close_del img,
body.web-mode .layerPopup_botm.pop_write .lst_photo .file_list .btn_close_del svg {
	width: 24px !important;
	height: 24px !important;
	margin-left: -12px !important;
	margin-top: -12px !important;
}

/* add file 버튼 (.filebtn) 도 첨부 썸네일과 시각 위계 맞춤 — 4차에서 50×60 박혔던 거 80×100 으로 */
body.web-mode .layerPopup_botm.pop_write .lst_photo .filebtn {
	min-width: 80px !important;
	width: 80px !important;
	height: 100px !important;
}

/* ============================================================
 * Phase 1.15 — 글쓰기 모달 첨부 영역 컨테이너 자체 높이 확대 (15차, v1.2.11)
 *
 * 증상: 14차에서 썸네일 42→100×100 키운 뒤, 컨테이너 자체가 작아 세로 잘림 + 가로/세로 스크롤 강제.
 *      대장님 PC 실측 — "사진 첨부 시 컨테이너가 자연스럽게 늘어나야 함".
 *
 * 원인: Phase 1.4 자동 vw→px 변환에서 `.lst_photo` 컨테이너 height 60px 박힘 (web_mode.css 1208~1210).
 *      14차에서 썸네일·.filebtn 만 100/100×80×100 키우고 부모 60px 그대로 → 100 썸네일이 60 컨테이너 안에 갇혀
 *      세로 40px + close_del top:-8px 가 잘림. .file_list overflow-x:auto + inline-flex 라 가로 스크롤도 활성.
 *
 * 처리: X 트위터 첨부 미리보기 톤 — 한 줄 가로 스크롤(트위터 동일) 유지하되 컨테이너 높이만 자연 확장.
 *      - .lst_photo height 고정 해제 → auto + min-height 130px (썸네일 100 + close_del 여백 8×2 + padding 12 = 약 130)
 *      - .file_list padding 16→8px 로 축소(컨테이너 130 안에 100 썸네일 + close_del top:-8px 안 잘리게)
 *      - 가로 스크롤(overflow-x:auto)은 base 그대로 둠 — 6장 이상 첨부 시 트위터처럼 가로 흐름 OK
 * ============================================================ */
body.web-mode .layerPopup_botm.pop_write .lst_photo {
	height: auto !important;
	min-height: 130px !important;
}

body.web-mode .layerPopup_botm.pop_write .lst_photo .file_list {
	padding: 8px 0 !important;
	align-items: center !important;
}

/* ============================================================
 * Phase 1.16 — myinfo 프로필 grade_graph·lst1·b1·b2 vw 폰트 폭주 fix (38차, v1.2.35)
 *
 * 증상: PC 1280px 에서 "다음 승급까지 남은 조건 / 게시글·설문·feeds·survey /
 *       총 N개의 게시글·댓글·좋아요·포인트" 텍스트가 과도하게 큼.
 *
 * 원인: common.css 의 vw 기반 선언이 PC 에서 폭주
 *   - .grade_graph li  font-size: 3.33333vw → 1280px × 3.33% = 42.7px
 *   - .grade_graph     margin-top/bottom: 5.55vw  → 71px 상하
 *   - .lst1            padding: 4.16vw 0          → 53px
 *   - .lst1 li         padding: 1.38vw 0           → 17.8px
 *   - .b1 / .b2        font-size: 3.33vw           → 42.7px
 *   - .b1 / .b2        margin-top: 5.55vw          → 71px
 *
 * 처리: body.web-mode 스코프 안에서 px 고정값으로 오버라이드.
 *   목표: grade_graph li 14px / lst1·b1·b2 15px / margin·padding 적정값.
 *   폰트 1단계 우선 처리 (레이아웃 grid/flex 비변경).
 *   모바일 회귀 0 (body.web-mode 스코프 한정).
 * ============================================================ */

/* --- grade_graph: "다음 승급까지 남은 조건" + li("게시글"/"설문") 라벨 --- */
body.web-mode .wrap_info .lst_info .grade_graph {
	font-size: 13px !important;
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

body.web-mode .wrap_info .lst_info .grade_graph li {
	font-size: 14px !important;
	margin-top: 6px !important;
}

body.web-mode .wrap_info .lst_info .grade_graph li .graph {
	margin-top: 4px !important;
}

/* --- lst1: "총 N개의 게시글/댓글/좋아요/포인트" --- */
body.web-mode .wrap_info .lst_info .lst1 {
	font-size: 14px !important;
	padding: 16px 0 !important;
}

body.web-mode .wrap_info .lst_info .lst1 li {
	padding: 5px 0 !important;
}

/* --- b1: 로그아웃/탈퇴 버튼 행 --- */
body.web-mode .wrap_info .lst_info .b1 {
	font-size: 15px !important;
	margin-top: 20px !important;
}

/* --- b2: 알림/차단관리 등 토글 행 --- */
body.web-mode .wrap_info .lst_info .b2 {
	font-size: 15px !important;
	margin-top: 20px !important;
	padding-top: 20px !important;
}

/* ===== 40차: .wrap_info 회색 박스 제거 (2026-05-26) ===== */
/* common.css: background-color:#f3f3f3 + border-radius:45px/6.25vw → PC에서 투명+직각으로 오버라이드 */
body.web-mode .wrap_info {
	background-color: transparent !important;
	background: transparent !important;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
}

/* ============================================================
 * 47차: pop_comment / pop_feed_detail 내부 아이콘 vw 폭주 fix (v1.2.44, 2026-05-26)
 *
 * 증상: 댓글 팝업 안 전송 아이콘(i_send:after)이 PC 1280px에서 80px로 비대.
 *      답글(Reply) / Block 텍스트 버튼(.rt)도 vw 상속으로 과대.
 *
 * 원인:
 *   - default.css .i-ico.i_send:after — width/height: 6.25vw (=80px @1280px)
 *                                       margin: -3.125vw (=-40px)
 *   - .rt 버튼: 상위 .lst_comment font-size 3.33vw(=43px @1280px) 상속
 *     → web_mode.css 에서 lst_comment font-size 12px 처리됨, but .rt float:right 별도 계층
 *
 * 처리:
 *   - i_send:after → 24×24px, margin -12px
 *   - .rt → font-size 12px, padding 명시 (텍스트 버튼)
 *   - pop_feed_detail 동일 패턴 동시 처리
 * ============================================================ */

/* default.css: .i-ico.i_send:after — 6.25vw(80px) → 24px */
body.web-mode .layerPopup_botm.pop_comment .i-ico.i_send:after,
body.web-mode .layerPopup_botm.pop_feed_detail .i-ico.i_send:after {
	width: 24px !important;
	height: 24px !important;
	margin-left: -12px !important;
	margin-top: -12px !important;
}

/* default.css: .i-ico.i_send (컨테이너 자체 — vertical-align만, 크기 없음) */
body.web-mode .layerPopup_botm.pop_comment .i-ico.i_send,
body.web-mode .layerPopup_botm.pop_feed_detail .i-ico.i_send {
	width: 24px !important;
	height: 24px !important;
}

/* .rt 답글/Block 텍스트 버튼 — float:right 계층, font-size 명시 */
body.web-mode .layerPopup_botm.pop_comment .lst_comment .li .tit .rt,
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .li .tit .rt {
	font-size: 12px !important;
	padding-left: 5px !important;
	line-height: 1.4 !important;
}

body.web-mode .layerPopup_botm.pop_comment .lst_comment .li .tit .rt span,
body.web-mode .layerPopup_botm.pop_feed_detail .lst_comment .li .tit .rt span {
	font-size: 12px !important;
	color: #000 !important;
}

/* ============================================================
   [48차] DM 채팅창 중앙 정렬 fix (v1.2.45)
   - dm/chat.php 인라인 <style> 에서 .dm_chat_container / #chatInputBar
     position:fixed; left:0; right:0; 으로 정의 — 모바일 뷰포트 전체 기준
   - PC에서 #wrap 은 margin:0 auto; max-width:700px 중앙 정렬이지만
     fixed 요소는 뷰포트 기준 → 우측으로 치우쳐 보이는 현상 발생
   - 해결: left:50% + translateX(-50%) + width:var(--web-col) 로 중앙 고정
   - bottom: 모바일 vw 기반(19.44vw+40px+58px) → PC 탭바 없음, 0으로 override
   ============================================================ */

/* DM 채팅 메인 컨테이너 — 중앙 정렬 */
body.web-mode .dm_chat_container {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: var(--web-col) !important;
	max-width: var(--web-col) !important;
	top: 85px !important;        /* #wrap padding-top 85px (45차 SoT) */
	bottom: 0 !important;        /* PC: 탭바 없음, 뷰포트 하단까지 */
}

/* DM 입력창 바 — 중앙 정렬 */
body.web-mode #chatInputBar {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: var(--web-col) !important;
	max-width: var(--web-col) !important;
	bottom: 0 !important;        /* PC: 탭바 없음 */
	box-sizing: border-box !important;
}

/* ── 59차: 좌측 사이드패널 DNA CARD (라벨/메타 중앙정렬 + 위계 정돈 + traits + 이미지 모달) ── */
body.web-mode .web-side-dnacard {
	margin: 16px 0 0 0;
	padding: 0;
}
/* 라벨: uppercase/tracking 제거, 메뉴 본문 색 동일 (60차: 회색 제거) */
body.web-mode .web-side-dnacard__label {
	font-size: 14px;
	font-weight: 600;
	color: #0f1419;
	text-align: center;
	margin-bottom: 10px;
	padding: 0 4px;
	letter-spacing: 0.01em;
}
/* 이미지 래퍼: 클릭 커서 */
body.web-mode .web-side-dnacard__imgwrap {
	display: block;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	transition: opacity 0.15s;
	cursor: pointer;
}
body.web-mode .web-side-dnacard__imgwrap:hover {
	opacity: 0.88;
}
body.web-mode .web-side-dnacard__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}
/* 메타: 세로 중앙 정렬 */
body.web-mode .web-side-dnacard__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 10px;
	padding: 0 4px;
	gap: 4px;
}
/* 이름: 강조 (60차: 회색→본문색) */
body.web-mode .web-side-dnacard__name {
	font-size: 14px;
	font-weight: 700;
	color: #0f1419;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
/* 전투력: 사이트 강조 컬러 */
body.web-mode .web-side-dnacard__power {
	font-size: 13px;
	font-weight: 600;
	color: #f5a623;
	white-space: nowrap;
}
/* 타이틀: 살짝 작게 (60차: 회색→본문색) */
body.web-mode .web-side-dnacard__title {
	font-size: 11px;
	color: #0f1419;
	line-height: 1.4;
	text-align: center;
	padding: 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* 특성(traits) 목록 */
body.web-mode .web-side-dnacard__traits {
	margin-top: 8px;
	padding: 0 2px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
/* trait 뱃지 (60차: 회색→본문색, background 라이트모드 대응) */
body.web-mode .web-side-dnacard__trait {
	font-size: 10px;
	color: #0f1419;
	line-height: 1.4;
	padding: 4px 6px;
	background: rgba(0,0,0,0.04);
	border-radius: 6px;
	border-left: 2px solid #f5a623;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* ── 59차: DNA Card 이미지 경량 모달 ── */
body.web-mode #webDnaCardImageModal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99900;
	background: rgba(0,0,0,0.82);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
body.web-mode #webDnaCardImageModal.is-open {
	display: flex;
}
body.web-mode #webDnaCardImageModal .wdci-inner {
	position: relative;
	max-width: min(480px, 90vw);
	max-height: 90vh;
	cursor: default;
}
body.web-mode #webDnaCardImageModal .wdci-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
body.web-mode #webDnaCardImageModal .wdci-close {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(30,36,48,0.92);
	color: #c8d0db;
	border: 1px solid rgba(255,255,255,0.12);
	font-size: 16px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =====================================================================
 * 61차 — terms_agree.php vw 폰트 PC 오버라이드
 * Before(1280px 기준): 5vw=64px / 3.8vw=49px / 3.6vw=46px / 3.2vw=41px
 *                      2.8vw=36px / 2.6vw=33px / 2.4vw=31px / 2.2vw=28px
 * After: 22px / 16px / 16px / 15px / 15px / 13px / 13px / 12px
 * ===================================================================== */
body.web-mode .consent_title {
	font-size: 22px !important;
}
body.web-mode .consent_subtitle {
	font-size: 15px !important;
}
body.web-mode .consent_all .chk_label {
	font-size: 16px !important;
}
body.web-mode .consent_section_title {
	font-size: 13px !important;
}
body.web-mode .chk_label {
	font-size: 15px !important;
}
body.web-mode .chk_label .tag {
	font-size: 13px !important;
}
body.web-mode .chk_desc {
	font-size: 13px !important;
}
body.web-mode .chk_link {
	font-size: 13px !important;
}
body.web-mode .btn_consent {
	font-size: 16px !important;
}
body.web-mode .consent_notice {
	font-size: 12px !important;
}