/* ==========================================================================
   sl-r2.css — 2026-09-08 가오픈 피드백 반영 (리드젠랩)
   원본 sl-lifelab.css 뒤에 로드되어 덧씌운다. 원본은 수정하지 않는다.
   1) 태블릿 구간(600~1023) 신설: 헤더 겹침·가로 넘침 해소, 햄버거 유지
   2) GNB 드롭다운: 3열 가로 배치, hover 틈 제거, 클릭/아코디언
   3) 홈: 라이브러리 4장 1행, 생애주기 모바일 가로 스크롤, 곧 만나요 카드
   4) 모바일 가독성: 12px 미만 텍스트 상향, 터치 타깃 44px
   ========================================================================== */

/* 0. 공통 --------------------------------------------------------------- */
:root { color-scheme: light; }                 /* 삼성 인터넷 '웹사이트 어둡게' 강제 반전 방지 */
html, body { overflow-x: clip; }                /* 태블릿 800px 가로 스크롤 29px 차단 */
.sl-grid-3 > *, .sl-mag__col > *, .sl-libgrid > *, .sl-lifeevents > * { min-width: 0; }
img, svg, video, iframe { max-width: 100%; }
.sl-single__content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sl-single__content table > * { display: table; width: 100%; }

/* 1. 헤더 · GNB ------------------------------------------------------------ */
.sl-header__inner { gap: 24px; }
.sl-logo { flex: none; }
.sl-gnb__more { display: none; }               /* 데스크톱에서는 hover/포커스로 여닫음 */

@media (min-width: 1024px) {
	/* 탭 → 패널 사이 틈 메움: 패널 위에 보이지 않는 hover 다리 */
	.sl-gnb__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
	.sl-gnb__panel { max-height: calc(100vh - 96px); overflow-y: auto; }
	/* JS(hover 지연·ESC·바깥 클릭)가 붙이는 열림 상태 */
	.sl-gnb__item.is-open .sl-gnb__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
	/* 하위-하위(보험 › 이것이 궁금해요 …)가 있는 패널은 3열 가로 배치 → 높이 절반 */
	.sl-gnb__sub:has(.sl-gnb__grand) { display: flex; align-items: flex-start; gap: 4px; }
	.sl-gnb__sub:has(.sl-gnb__grand) > li { flex: 1 1 0; min-width: 168px; }
	.sl-gnb__sub:has(.sl-gnb__grand) > li + li { margin-top: 0; }
	.sl-gnb__sub:has(.sl-gnb__grand) .sl-gnb__sublink { font-size: 14px; padding: 9px 10px; }
	/* 드롭다운 안 링크가 상위 탭 규칙(.sl-gnb__list a: 17.5px, 26px 패딩)에 끌려가던 원본 버그 —
	   단일 열 패널(삼성생명 Insight)도 3열 패널의 '보험/자산·대출/연금'과 같은 14px·행간으로 통일 (2026-09-09) */
	.sl-gnb__list .sl-gnb__panel a { font: 600 14px/1.4 var(--sl-font); padding: 9px 10px; white-space: nowrap; }
	.sl-gnb__list .sl-gnb__panel a::after { display: none; }
	.sl-gnb__list .sl-gnb__grand a { font-size: 13px; font-weight: 500; padding: 7px 10px; color: var(--sl-text); }
	.sl-gnb__sub > li + li { margin-top: 0; }
	.sl-gnb__grand a { font-size: 13px; padding: 7px 10px; color: var(--sl-text); }
}

@media (max-width: 1200px) and (min-width: 1024px) {
	.sl-gnb__list a { font-size: 15.5px; padding: 26px 8px; }
	.sl-header__inner { gap: 16px; }
}

/* 태블릿 + 모바일: 햄버거 (원본은 768px에서만) */
@media (max-width: 1023px) {
	.sl-gnb {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--sl-bg);
		border-bottom: 1px solid var(--sl-border);
		padding: 8px 24px 20px;
		max-height: calc(100vh - 73px);
		overflow-y: auto;
		box-shadow: 0 12px 32px rgba(20, 22, 30, .10);
	}
	.sl-gnb.is-open { display: block; }
	.sl-gnb__list { flex-direction: column; gap: 0; }
	.sl-gnb__list > li { border-bottom: 1px solid var(--sl-border); }
	.sl-gnb__list a { padding: 15px 4px; font-size: 16.5px; white-space: normal; }
	.sl-gnb__list a::after { display: none; }
	.sl-mobile-toggle { display: grid; }
	.sl-header__cta { display: none; }
	html.sl-menu-open, html.sl-menu-open body { overflow: hidden; } /* html에 overflow-x:clip이 있어 body만으로는 잠기지 않음 */

	/* 아코디언: 상위 라벨 + 펼침 버튼 한 줄, 패널은 아래로 */
	.sl-gnb__item { display: flex; flex-wrap: wrap; align-items: center; }
	.sl-gnb__item > a { flex: 1 1 0; min-width: 0; }
	.sl-gnb__more {
		display: grid; place-items: center;
		width: 44px; height: 44px; flex: none;
		border: 0; background: none; color: var(--sl-text-sub);
		border-radius: 10px; cursor: pointer;
	}
	.sl-gnb__more:active { background: var(--sl-bg-soft); }
	.sl-gnb__more svg { transition: transform .2s var(--sl-ease); }
	.sl-gnb__item.is-open .sl-gnb__more { color: var(--sl-blue); }
	.sl-gnb__item.is-open .sl-gnb__more svg { transform: rotate(180deg); }
	.sl-gnb__panel {
		display: none; flex-basis: 100%;
		position: static; transform: none; opacity: 1; visibility: visible;
		min-width: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
		padding: 0 0 14px 6px; transition: none; max-height: none; overflow: visible;
	}
	.sl-gnb__panel::before { display: none; }
	/* 원본 hover/focus-within 규칙의 translateX(-50%)가 아코디언을 왼쪽으로 밀어내는 것 방지 */
	.sl-gnb__item:hover .sl-gnb__panel,
	.sl-gnb__item:focus-within .sl-gnb__panel,
	.sl-gnb__item.is-open .sl-gnb__panel { transform: none; display: none; }
	.sl-gnb__item.is-open .sl-gnb__panel { display: block; }
	.sl-gnb__sub > li + li { margin-top: 0; }
	.sl-gnb__sublink { font-size: 15.5px; padding: 11px 10px; white-space: normal; }
	.sl-gnb__grand { margin: 0 0 8px; padding-left: 10px; }
	.sl-gnb__grand a { font-size: 14.5px; padding: 9px 10px; color: var(--sl-text); white-space: normal; }
	.sl-gnb__list li li { border-bottom: 0; }
}

/* 2. 홈 ------------------------------------------------------------------- */
/* 라이브러리 카드: 5장(3+2) → 4장 1행. 태블릿 2×2, 모바일 1열 리스트형 */
.sl-libblock .sl-libgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sl-libgrid__logo { height: 22px; width: auto; display: block; }
.sl-libgrid__svg { color: var(--sl-blue); }
.sl-libgrid__card--finance .sl-libgrid__svg { color: #1E8E5A; }
.sl-libgrid__card--life    .sl-libgrid__svg { color: #C2477A; }
.sl-libgrid__card--press   .sl-libgrid__svg { color: #C46A1E; }
.sl-libblock .sl-libgrid__tag { font-size: 12px; }
.sl-libblock .sl-libgrid__card h3 { word-break: keep-all; }

@media (max-width: 1023px) {
	.sl-libblock .sl-libgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.sl-lifeevents { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.sl-libblock .sl-libgrid { grid-template-columns: 1fr; gap: 10px; }
	.sl-libblock .sl-libgrid__card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
	.sl-libblock .sl-libgrid__thumb { width: 64px; height: 64px; flex: none; border-radius: 14px; font-size: 0; }
	.sl-libgrid__logo { height: 16px; }
	.sl-libgrid__svg { width: 32px; height: 32px; }
	.sl-libblock .sl-libgrid__body { padding: 0; min-width: 0; }
	.sl-libblock .sl-libgrid__tag { margin-bottom: 4px; }
	.sl-libblock .sl-libgrid__card h3 { margin: 0 0 3px; font-size: 16px; }
	.sl-libblock .sl-libgrid__desc { font-size: 13px; }

	/* 생애주기 7장: 2열 외톨이 대신 가로 스크롤 스트립 */
	.sl-lifeevents {
		display: flex; gap: 10px;
		margin: 20px -22px 0; padding: 4px 22px 10px;
		overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.sl-lifeevents::-webkit-scrollbar { display: none; }
	.sl-lifeevents__item { flex: 0 0 136px; scroll-snap-align: start; }
	.sl-lifeevents__sub { font-size: 13px; }
}

/* 곧 만나요 카드 (A안) + 빈 상태 공용 */
.sl-soon__eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	font: 700 12px/1 var(--sl-font); letter-spacing: .04em;
	color: var(--sl-blue); background: var(--sl-blue-soft);
	border-radius: 999px; padding: 7px 12px; margin-bottom: 16px;
}
.sl-soon__eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--sl-blue); display: inline-block; }
.sl-soon__icon {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--sl-blue-soft); color: var(--sl-blue);
	display: grid; place-items: center; margin-bottom: 18px;
}
.sl-soon__title { font: 800 22px/1.3 var(--sl-font); color: var(--sl-ink); margin: 0 0 10px; letter-spacing: -.01em; }
.sl-soon__text { margin: 0; color: var(--sl-text); font: 400 15px/1.7 var(--sl-font); max-width: 34ch; word-break: keep-all; }
.sl-soon .sl-textlink { display: inline-block; margin-top: 18px; }
.sl-soon--inline { padding: 36px 8px 28px; }
.sl-soon--inline .sl-soon__title { font-size: 20px; }

/* 가장 많이 묻는 질문 위젯 — 사전 위젯 껍데기 재사용, 칩은 질문형이라 줄바꿈 허용 */
.sl-topq .sl-glossary__chip { white-space: normal; text-align: left; line-height: 1.4; word-break: keep-all; }

/* 3. 가독성 · 터치 ----------------------------------------------------------- */
.sl-gnb__subdesc { font-size: 12.5px; }
.sl-lifeevents__sub { font-size: 13px; }
@media (max-width: 1023px) {
	.sl-glossary__chip, .sl-qbank__chip, .sl-chip { min-height: 44px; display: inline-flex; align-items: center; }
	.sl-textlink { display: inline-block; padding: 8px 0; }
	.sl-magcard__more .sl-textlink { padding: 8px 0; }
	.sl-insight-hero__label { font-size: 12.5px; }
	.sl-single__meta { font-size: 14px; }
}
@media (max-width: 599px) {
	.sl-magcard { padding: 24px 20px; }
	.sl-lifeevents { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
	.sl-glossary .sl-searchform--glossary { flex-wrap: wrap; }
}

/* 4. 홈 후기 캐러셀 — 자동 흐름이 스크롤 스냅에 붙잡혀 멈추는 문제 (2026-09-08 밤) ------------
   mu-plugin이 매 프레임 scrollLeft를 0.35px씩 올리는데 scroll-snap이 카드 경계로 되돌려 순이동이 0이 됐다.
   스냅을 끄면 자동 흐름·화살표 모두 정상. 화살표 이동량은 JS가 카드 폭 단위로 계산하므로 정렬은 유지된다. */
.slife-reviews--slide .slife-reviews__grid,
.slife-carousel-wrap .slife-reviews--slide .slife-reviews__grid { scroll-snap-type: none !important; scroll-behavior: auto !important; }
.slife-reviews--slide .slife-reviews__card,
.slife-carousel-wrap .slife-reviews--slide .slife-reviews__card { scroll-snap-align: none !important; }

/* 5. 새로 올라온 이야기 — 썸네일을 텍스트 하단에 맞춰 정렬 (2026-09-08 이효석 요청) ------------- */
.sl-newlist__item { align-items: flex-end; }
.sl-newlist__thumb { align-self: flex-end; }
@media (max-width: 599px) { .sl-newlist__item { align-items: flex-start; } .sl-newlist__thumb { align-self: flex-start; } }

/* 카테고리 페이지 후기 가로 흐름 — 홈과 동일 규격 */
.sl-anchor#reviews .slife-reviews--slide { margin: 0; }