@charset "utf-8";

/*
 * toolon-common.css
 * - 공통 css 관리
 */

 /* ══════════════════════════════════════════════════════════════════
   공통 풋터
   ══════════════════════════════════════════════════════════════════ */
.toolon-renewal-footer {
	background: var(--toolon-text);
	color: #9CA3AF;
	padding: 40px 0 28px;
	font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
	font-size: 13px;
}

.toolon-renewal-footer * {
	box-sizing: border-box;
}

.toolon-footer-inner {
	width: 1248px;
	max-width: calc(100% - 40px);
	margin: 0 auto;
}

/* 상단 링크 바 */
.toolon-footer-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid #1F2937;
}

.toolon-footer-nav a {
	display: inline-block;
	color: #D1D5DB;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	padding: 0 16px;
	border-right: 1px solid #374151;
	line-height: 1;
	cursor: pointer;
	transition: color 0.12s;
}

.toolon-footer-nav a:first-child { padding-left: 0; }
.toolon-footer-nav a:last-child  { border-right: none; }

.toolon-footer-nav a:hover { color: var(--toolon-point); }

/* 하단 본문 */
.toolon-footer-body {
	display: flex;
	align-items: flex-start;
	gap: 36px;
}

.toolon-footer-logo {
	font-size: 22px;
	font-weight: 900;
	color: #fff;
	white-space: nowrap;
	flex: 0 0 auto;
	line-height: 1;
}

.toolon-footer-logo span { color: var(--toolon-point); }

.toolon-footer-info {
	flex: 1 1 auto;
	min-width: 0;
}

.toolon-footer-info p {
	margin: 0 0 5px;
	font-size: 12.5px;
	color: #6B7280;
	line-height: 1.7;
}

.toolon-footer-info a {
	color: #6B7280;
	text-decoration: none;
}

.toolon-footer-info a:hover { color: var(--toolon-point); }

.toolon-footer-mark {
	flex: 0 0 auto;
	align-self: center;
	display: flex;
	align-items: center;
	gap: 10px;
}

.toolon-footer-mark img {
	display: block;
	opacity: 0.7;
	transition: opacity 0.14s;
}

.toolon-footer-mark img:hover { opacity: 1; }

/* 나이스페이 구매안전(에스크로) 가입사실 확인 마크 (IBK 안심이체 마크 우측) */
.toolon-escrow-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 74px;
	height: 74px;
	box-sizing: border-box;
	padding: 6px 4px;
	border: 1px solid #374151;
	border-radius: 6px;
	background: #111827;
	text-align: center;
	line-height: 1.25;
	opacity: 0.7;
	transition: opacity 0.14s, border-color 0.14s;
}

.toolon-escrow-mark:hover { opacity: 1; border-color: #4B5563; }

.toolon-escrow-mark-top,
.toolon-escrow-mark-mid { font-size: 9px; color: #9CA3AF; }
.toolon-escrow-mark-brand {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: #E5E7EB;
}

/* 카피라이트 */
.toolon-footer-copy {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid #1F2937;
	font-size: 12px;
	color: #4B5563;
	text-align: center;
}

/* 일반 카피라이트 글씨와 동일하게 — 링크 기능만 유지, 시각 강조 없음 */
.toolon-footer-missionb,
.toolon-footer-missionb:hover {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════
   마이페이지 좌측 서브메뉴 + 2단 레이아웃 (공용: 내정보/구매내역/장바구니/설정)
   ══════════════════════════════════════════════════════════════════ */
.toolon-my-layout {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}
.toolon-my-side {
	flex: 0 0 200px;
	width: 200px;
	font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
}
.toolon-my-main {
	flex: 1 1 auto;
	min-width: 0;
}
.toolon-my-side-title {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 2px solid var(--toolon-primary);
	font-size: 20px;
	font-weight: 900;
	color: var(--toolon-primary);
	letter-spacing: -0.4px;
}
.toolon-my-side-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.toolon-my-side-nav a {
	display: block;
	padding: 12px 14px;
	border-radius: 9px;
	font-size: 15px;
	font-weight: 700;
	color: #475569;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.13s, color 0.13s;
}
.toolon-my-side-nav a:hover { background: #FFF7ED; color: var(--toolon-point); text-decoration: none; }
.toolon-my-side-nav a.is-on { background: var(--toolon-primary); color: #fff; }
.toolon-my-side-nav a.is-on:hover { background: var(--toolon-primary); color: #fff; }

/* 태블릿/모바일: 좌측 메뉴 → 상단 가로 스크롤 칩 탭바 */
@media (max-width: 1024px) {
	/* column 전환 시 align-items:flex-start면 자식이 콘텐츠 너비로 좌측 정렬됨 → stretch로 전체폭 */
	.toolon-my-layout { flex-direction: column; align-items: stretch; gap: 14px; }
	.toolon-my-side { flex: 0 0 auto; width: 100%; }
	.toolon-my-main { width: 100%; min-width: 0; }
	.toolon-my-side-title { display: none; }
	.toolon-my-side-nav {
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		scrollbar-width: none;
	}
	.toolon-my-side-nav::-webkit-scrollbar { display: none; }
	.toolon-my-side-nav a {
		flex: 0 0 auto;
		padding: 9px 16px;
		border: 1px solid var(--toolon-line);
		border-radius: 999px;
		font-size: 14px;
		white-space: nowrap;
		background: #fff;
	}
	.toolon-my-side-nav a.is-on { border-color: var(--toolon-primary); }
}

/* ══════════════════════════════════════════════════════════════════
   iOS 입력 포커스 자동 확대(줌) 방지 — 전역
   iOS Safari는 포커스된 입력 font-size < 16px 이면 화면을 확대한다.
   모바일에서 모든 텍스트형 입력/선택/텍스트영역을 16px 이상으로 강제.
   (체크박스/라디오/레인지는 제외 — 영향 없음)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
   레이어(iframe) 임베드 페이지 — 공통 헤더/네비/풋터/채널/광고 숨김
   (provision 등 약관을 레이어 팝업으로 띄울 때 body.toolon-embed-page 부여)
   ══════════════════════════════════════════════════════════════════ */
.toolon-embed-page .toolon-topbar,
.toolon-embed-page .toolon-renewal-header,
.toolon-embed-page .toolon-renewal-nav,
.toolon-embed-page .gnb,
.toolon-embed-page .toolon-renewal-footer,
.toolon-embed-page .toolon-bottom-nav,
.toolon-embed-page .quick_menu,
.toolon-embed-page .toolon-ch-sidebar,
.toolon-embed-page .ad_content01 { display: none !important; }
.toolon-embed-page { background: #fff; }
.toolon-embed-page .toolon-provision .wid_1000 { padding-top: 4px; padding-bottom: 20px; }

/* 상품명 클릭(상품상세 팝업) 공통 스타일 */
.toolon-prodpop { cursor: pointer; }
.toolon-prodpop:hover { color: var(--toolon-point); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════
   공통 탭 컴포넌트 (.toolon-tabs / .toolon-tab) — 폴더형 탭
   마이페이지·고객센터·FAQ 등에서 공용. 활성: .is-active 또는 .on
   ══════════════════════════════════════════════════════════════════ */
.toolon-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--toolon-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
}
.toolon-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	background: var(--toolon-soft);
	border: 1px solid #E8ECEF;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	color: var(--toolon-slate);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.3px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.13s, color 0.13s;
}
.toolon-tab:hover { background: #FFF7ED; color: var(--toolon-point); }
.toolon-tab.is-active,
.toolon-tab.on {
	background: var(--toolon-primary);
	border-color: var(--toolon-primary);
	color: #fff;
}
@media (max-width: 768px) {
	.toolon-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.toolon-tabs::-webkit-scrollbar { display: none; }
	.toolon-tab { flex: 0 0 auto; padding: 10px 16px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   배송지 선택 인페이지 레이어 팝업 (공용: 주문결제 / 주문상세 등)
   ══════════════════════════════════════════════════════════════════ */
.toolon-addr-layer {
	position: fixed;
	inset: 0;
	z-index: 12000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}
.toolon-addr-layer.vOff { display: none !important; }
.toolon-addr-dim { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.toolon-addr-modal {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
}
.toolon-addr-modal-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	background: var(--toolon-primary);
	color: #fff;
}
.toolon-addr-modal-title { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }
.toolon-addr-modal-close {
	width: 32px; height: 32px; border: 0; background: transparent; color: #fff;
	font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px; transition: background .14s;
}
.toolon-addr-modal-close:hover { background: rgba(255, 255, 255, 0.14); }
.toolon-addr-modal-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.toolon-addr-modal-body iframe { display: block; width: 100%; height: 78vh; max-height: 100%; border: 0; }

@media (max-width: 640px) {
	.toolon-addr-layer { padding: 0; }
	.toolon-addr-modal { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
	.toolon-addr-modal-body iframe { height: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   공통 레이어 팝업 (윈도우팝업 대체 — 상품상세 / 배송조회 / 공지 등)
   _footer.html footerScripts 의 toolonOpenPop() 이 노드를 동적 생성.
   width 는 JS 에서 inline max-width 로, is-wide/is-tall 로 크기 조절.
   ══════════════════════════════════════════════════════════════════ */
.toolon-pop-layer {
	position: fixed;
	inset: 0;
	z-index: 12000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}
.toolon-pop-layer.vOff { display: none !important; }
.toolon-pop-dim { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.toolon-pop-modal {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
}
.toolon-pop-modal.is-wide { max-width: 1180px; }
.toolon-pop-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	background: var(--toolon-primary);
	color: #fff;
}
.toolon-pop-title { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }
.toolon-pop-close {
	width: 32px; height: 32px; border: 0; background: transparent; color: #fff;
	font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px; transition: background .14s;
}
.toolon-pop-close:hover { background: rgba(255, 255, 255, 0.14); }
.toolon-pop-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.toolon-pop-body iframe { display: block; width: 100%; height: 70vh; max-height: 100%; border: 0; }
.toolon-pop-modal.is-tall .toolon-pop-body iframe { height: 86vh; }

@media (max-width: 640px) {
	.toolon-pop-layer { padding: 0; }
	.toolon-pop-modal, .toolon-pop-modal.is-wide { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
	.toolon-pop-body iframe { height: 100%; }
}

/* 사이드 상담 위젯 CSS는 channel_scripts.jsp에서 일괄 관리 */

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.toolon-login-card {
		padding: 32px 28px 28px;
		border-radius: 12px;
	}
}

@media (max-width: 640px) {
	.toolon-login-page {
		padding: 0 0 60px;
	}

	.toolon-login-card {
		border-radius: 0;
		box-shadow: none;
		padding: 28px 20px 32px;
	}

	.toolon-footer-body {
		flex-direction: column;
		gap: 16px;
	}

	.toolon-footer-mark { display: none; }

	/* 채널 위젯(우측 고정 54px) 가림 방지 */
	.toolon-footer-inner {
		width: 100%;
		max-width: 100%;
		padding: 0 72px 0 20px;
		box-sizing: border-box;
		margin: 0;
	}

	/* nav 링크 간격 축소 + 줄바꿈 시 행 간격 */
	.toolon-footer-nav {
		gap: 6px 0;
		margin-bottom: 16px;
	}

	.toolon-footer-nav a {
		padding: 2px 8px;
		font-size: 12px;
		line-height: 1.8;
	}

	.toolon-footer-nav a:first-child { padding-left: 0; }

	.toolon-footer-info p {
		font-size: 12px;
		line-height: 1.6;
	}
}

/* ══════════════════════════════════════════════════════════════════
   공통 레이어 팝업 (confirm/alert) — 툴ON 스타일 오버라이드
   - 기존 .layer_popup_type01/02/03 은 전역(css2.css/sub_common.css)에 정의됨
   - _head.html 이 toolon-common.css 를 css2.css 이후 로드 → 동일 특이성에서 나중 규칙이 승리
   - .vOff(display:none !important) 보존을 위해 display:flex 는 :not(.vOff) 로만 적용
   ══════════════════════════════════════════════════════════════════ */
.layer_popup_type01,
.layer_popup_type02,
.layer_popup_type03 {
	display: none !important;                          /* 기본 숨김: 레거시 shop_sub_common 의 .layer_popup_type02{display:block} 무력화. 표시는 아래 :not(.vOff) 로만 */
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 20px !important;
	overflow: auto !important;
	box-sizing: border-box !important;
	background: rgba(15, 23, 42, 0.55) !important;   /* --toolon-primary 기반 딤 */
	z-index: 12000 !important;                        /* 헤더/채널 위젯보다 위 */
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

/* 표시 상태일 때만 flex 센터링 (vOff 면 display:none 유지) */
.layer_popup_type01:not(.vOff),
.layer_popup_type02:not(.vOff),
.layer_popup_type03:not(.vOff) {
	display: -webkit-flex !important;
	display: flex !important;
}

/* 팝업 카드 */
.layer_popup_type01 .layer_popup_content,
.layer_popup_type02 .layer_popup_content,
.layer_popup_type03 .layer_popup_content {
	position: relative !important;
	width: 100% !important;
	max-width: 420px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 30px 28px 24px !important;
	background: #fff !important;
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
}

/* 본문 메시지 — 기존 배경 아이콘 이미지 제거, 가운데 정렬 */
.layer_popup_type01 .layer_popup_content p,
.layer_popup_type02 .layer_popup_content p,
.layer_popup_type03 .layer_popup_content p {
	margin: 0 0 24px !important;
	padding: 8px 4px 0 !important;
	background: none !important;
	text-align: center !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	font-weight: 600 !important;
	color: var(--toolon-text) !important;
	word-break: keep-all;
}

/* 닫기 버튼 위치 */
.layer_popup_type01 .layer_popup_content a.btn_popup_close,
.layer_popup_type02 .layer_popup_content a.btn_popup_close,
.layer_popup_type03 .layer_popup_content a.btn_popup_close {
	position: absolute !important;
	right: 16px !important;
	top: 14px !important;
}

/* 버튼 영역 */
.layer_popup_type01 .btn_wrap,
.layer_popup_type02 .btn_wrap,
.layer_popup_type03 .btn_wrap {
	display: -webkit-flex !important;
	display: flex !important;
	gap: 10px !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 버튼 — 취소(btn_green)=보조, 확인(btn_blue)=툴ON 포인트 */
.layer_popup_type01 .btn_wrap a,
.layer_popup_type02 .btn_wrap a,
.layer_popup_type03 .btn_wrap a {
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	max-width: 160px;
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-align-items: center;
	align-items: center !important;
	-webkit-justify-content: center;
	justify-content: center !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.layer_popup_type01 .btn_wrap a.btn_green,
.layer_popup_type02 .btn_wrap a.btn_green,
.layer_popup_type03 .btn_wrap a.btn_green {
	background: #fff !important;
	border-color: #CBD5E1 !important;
	color: #475569 !important;
}
.layer_popup_type01 .btn_wrap a.btn_green:hover,
.layer_popup_type01 .btn_wrap a.btn_green:active,
.layer_popup_type02 .btn_wrap a.btn_green:hover,
.layer_popup_type02 .btn_wrap a.btn_green:active {
	background: #F1F5F9 !important;
	border-color: #94A3B8 !important;
	color: var(--toolon-primary) !important;
}

.layer_popup_type01 .btn_wrap a.btn_blue,
.layer_popup_type02 .btn_wrap a.btn_blue,
.layer_popup_type03 .btn_wrap a.btn_blue {
	background: var(--toolon-point) !important;   /* --toolon-point */
	border-color: var(--toolon-point) !important;
	color: #fff !important;
}
.layer_popup_type01 .btn_wrap a.btn_blue:hover,
.layer_popup_type01 .btn_wrap a.btn_blue:active,
.layer_popup_type02 .btn_wrap a.btn_blue:hover,
.layer_popup_type02 .btn_wrap a.btn_blue:active {
	background: #EA670C !important;
	border-color: #EA670C !important;
}

/* 단일 버튼(art_div alert 등)일 때 폭 과대 방지 */
.layer_popup_type02 .btn_wrap a:only-child,
.layer_popup_type03 .btn_wrap a:only-child {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	min-width: 120px;
}

/* ══════════════════════════════════════════════════════════════════
   [P3-1] 공통 액션버튼 base (.toolon-order-btn 계열)
   — 기존 order.css/mypage.css 중복 정의의 공통 속성을 전역(common)으로 병합.
   — height/font-size 등 화면별 차이값만 각 파일에서 override(시각 결과 동일).
   ══════════════════════════════════════════════════════════════════ */
.toolon-order-btns { display: flex; gap: 12px; margin-top: 20px; }
.toolon-order-btn {
	flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px; border: 1px solid transparent; font-weight: 900;
	cursor: pointer; text-decoration: none; letter-spacing: -0.3px;
	font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
}
.toolon-order-btn-line { background: #fff; border-color: var(--toolon-primary); color: var(--toolon-primary); }
.toolon-order-btn-line:hover { border-color: var(--toolon-point); color: var(--toolon-point); }
.toolon-order-btn-point { background: var(--toolon-point); color: #fff; }
.toolon-order-btn-point:hover { background: var(--toolon-point-dark); }

@media (max-width: 640px) {
	.layer_popup_type01 .layer_popup_content,
	.layer_popup_type02 .layer_popup_content,
	.layer_popup_type03 .layer_popup_content {
		max-width: 340px !important;
		padding: 26px 20px 20px !important;
		border-radius: 14px !important;
	}
	.layer_popup_type01 .layer_popup_content p,
	.layer_popup_type02 .layer_popup_content p,
	.layer_popup_type03 .layer_popup_content p {
		font-size: 15px !important;
	}
	.layer_popup_type01 .btn_wrap a,
	.layer_popup_type02 .btn_wrap a,
	.layer_popup_type03 .btn_wrap a {
		height: 46px !important;
		font-size: 14px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
   [P3-3] 정적 레이아웃 유틸 (인라인 style 정리 — 여러 화면 공용 반복분만)
   ══════════════════════════════════════════════════════════════════ */
.toolon-text-center { text-align: center; }
.toolon-mt-14 { margin-top: 14px; }