/* 인사이트 본문 — 워드프레스 원본(register_sft_insight_single.php)에서 그대로.
   2026-09-25. shift- 접두어. 새로 디자인하지 않는다. */
		/* §"이건 검은색배경말고 하얀색배경 사용하고 텍스트는 검은색으로
		 * 디자인 참고해줘"(2026-08-27, 사용자 확정, 스크린샷 4장) — 검색
		 * 위젯과 맞춘 다크 네이비/민트를 버리고, 사용자가 준 레퍼런스
		 * 그대로 웜 크림 배경 + 코퍼(구리) 포인트로 바꾼다. 변수만
		 * 바꾸면 아래 모든 규칙이 그대로 새 팔레트를 따른다. */
		:root{--sin-bg:#eae5dd;--sin-surface:#f7f4ee;--sin-surface-2:#f1ece2;--sin-border:#ddd4c4;--sin-text:#1c1a17;--sin-text-dim:#5a5348;--sin-text-faint:#8c8272;--sin-accent:#a9702f;--sin-accent-soft:#f1e2c9;--sin-accent-ink:#ffffff;}
		/* §"페이지는 전체로 해줘.. 배경색을 맞춰줘"(2026-08-27, 사용자
		 * 확정) — 이 섹션 바깥(테마 래퍼/Elementor 컨테이너)이 이
		 * 배경색을 모르기 때문에 옆에 다른 색(테마 기본 흰색 등)이
		 * 비쳐 보였다. body에도 같은 색을 강제하고, 이 섹션을 감싼
		 * Elementor 위젯 래퍼가 폭을 줄여 잡는 문제도 같이 막는다
		 * (검색 위젯 CSS에 이미 기록된 동일 패턴). */
		body.single-sft_insight,body.single-sft_reference{background:var(--sin-bg) !important;}
		.elementor-widget-shortcode:has(.shift-insight-single-main),
		.elementor-widget-shortcode:has(.shift-insight-single-main) .elementor-widget-container{
			width:100% !important;max-width:100% !important;
		}
		.shift-insight-single-main{background:var(--sin-bg);color:var(--sin-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,"Noto Sans KR",sans-serif;line-height:1.7;padding:2.4rem 0 5rem;width:100%;}
		.shift-insight-single-main *{box-sizing:border-box;}
		/* §"페이지는 전체로 해줘. 양옆이 비어있어"(2026-08-27, 사용자
		 * 확정) — 820px는 너무 좁았다. 넓혀서 화면을 더 채운다. */
		.shift-single-inner{max-width:1160px;margin:0 auto;padding:0 1.5rem;}
		.shift-single-breadcrumb{display:flex;gap:.5em;flex-wrap:wrap;font-size:.82rem;color:var(--sin-text-faint);margin-bottom:1.4rem;}
		.shift-single-hero{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.8rem;}
		.shift-single-badge{align-self:flex-start;padding:.32rem .8rem;border-radius:100px;background:var(--sin-accent-soft);color:var(--sin-accent);font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
		/* §"제목과 부제목은 조금씩 키워줘".."텍스트크기를 조금씩 키워도
		 * 되겠어.. 너무 작아서"(2026-08-27, 사용자 확정) */
		.shift-single-title{font-size:clamp(1.8rem,3.8vw,2.6rem);font-weight:800;line-height:1.32;letter-spacing:-.01em;}
		.shift-single-subtitle{margin:0;font-size:1.14rem;color:var(--sin-text-dim);line-height:1.65;}
		.shift-single-meta{display:flex;align-items:center;gap:.55em;font-size:.82rem;color:var(--sin-text-faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
		/* §"이미지도 와이드로 하고 높이는 줄여서 하니 디자인이 괜찮은거
		 * 같다"(2026-08-27, 사용자 확정) — 원본 비율 그대로(height:auto)
		 * 두면 세로 사진일 때 너무 길어졌다. 와이드 배너 비율로 잘라서
		 * 보여준다. */
		.shift-single-main-image{border-radius:16px;overflow:hidden;border:1px solid var(--sin-border);margin-bottom:2rem;}
		.shift-single-main-image img{width:100%;aspect-ratio:2.3/1;object-fit:cover;display:block;}
		/* 2026-09-08 — 본문 중간 이미지. Factory 가 두 번째 소제목 앞에
		 * <figure class="sft-body-image"> 를 끼워 넣는다("대표 이미지
		 * 하나로는 집중력이 떨어져", 실사용 지시). 대표 이미지(2.3:1
		 * 와이드 배너)와 달리 본문 흐름 안에 놓이므로 16:9 로 조금 더
		 * 세워 문단 사이에서 숨 쉬는 자리로 쓴다. */
		.sft-body-image{margin:2.2rem 0;border-radius:12px;overflow:hidden;border:1px solid var(--sin-border);}
		.sft-body-image img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
		/* §"pc에서 키인사이트가 세로로 나와 가독성 떨어짐"(2026-08-28,
		 * 실사용 발견) — 원인은 사이드바가 340px로 좁은데 아이콘(2rem)+
		 * 간격까지 빼면 텍스트가 실제로 쓸 폭이 급격히 줄어서 글자가
		 * 세로로 눌린 것처럼 보였다. 사이드바를 넓히고(아래 아이콘도
		 * 같이 줄여서) 텍스트가 쓸 폭을 확보한다. */
		.shift-single-body-grid{display:grid;grid-template-columns:1fr 400px;gap:2.4rem;align-items:start;}
		/* 2026-09-26 — 본문 칸이 1616px 로 버텨 문서 폭이 2248px 이 됐다(화면
		   1440). 그리드 칸의 최소폭은 기본이 min-content 라, 안쪽에 안 줄어드는
		   것(넓은 표·이미지)이 하나만 있어도 칸 전체가 그만큼 버틴다. 줄어도
		   된다고 알려 준다 — 설비 상세에서 고친 것과 같은 함정이다. */
		.shift-single-body-grid > *{min-width:0;}
		@media (max-width:760px){.shift-single-body-grid{grid-template-columns:1fr;}}
		/* §"키노트 스티키 안나와"(2026-08-27, 실사용 발견) — position:sticky는
		 * 조상 요소 중 하나라도 overflow:hidden/auto/scroll이면 그 순간
		 * 작동을 멈춘다. Elementor 섹션/컨테이너 래퍼가 기본적으로
		 * overflow:hidden을 자주 건다(이 저장소에 이미 기록된 반복
		 * 패턴 — §sft_public_search_widget.css "Elementor 컨테이너..."
		 * 주석 참고). 이 숏코드를 담은 Elementor 래퍼를 강제로
		 * overflow:visible로 되돌린다. */
		.elementor-widget-shortcode:has(.shift-insight-single-main),
		.elementor-widget-shortcode:has(.shift-insight-single-main) .elementor-widget-container,
		.elementor-element:has(.shift-insight-single-main){
			overflow:visible !important;
		}
		.shift-single-content{font-size:1.08rem;color:var(--sin-text);}
		/* 2026-09-26 — 본문에 박힌 사진이 제 크기 그대로(1536px) 나와 상자를
		   뚫었다. 워드프레스 테마가 해 주던 것을 CE 가 이어받는다. 표·코드도
		   같이 가둔다 — 긴 표 하나가 페이지를 통째로 넓히는 일을 막는다. */
		.shift-single-content img,
		.shift-single-content video,
		.shift-single-content iframe{max-width:100%;height:auto;}
		.shift-single-content table{display:block;width:100%;overflow-x:auto;}
		.shift-single-content pre{overflow-x:auto;}
		.shift-single-content p{margin:0 0 1.2em;color:var(--sin-text-dim);}
		.shift-single-content h2,.shift-single-content h3{color:var(--sin-text);margin:1.6em 0 .6em;}
		.shift-single-content a{color:var(--sin-accent);}
		/* §"키노트는 좀더 크게 눈에 띄게 글씨도 눈에 띄게.. 너무 작아
		 * 존재감이 없어"(2026-08-27, 사용자 확정) — 박스 크기(패딩)와
		 * 글자 크기·굵기를 크게 키우고, 테두리도 코퍼색을 진하게 줘서
		 * 옆에 있는 본문 텍스트보다 확실히 시선을 끌게 한다. */
		.shift-key-insight{position:sticky;top:1.6rem;display:flex;gap:1rem;padding:1.8rem 1.7rem;border-radius:16px;border:2px solid var(--sin-accent);background:linear-gradient(165deg,var(--sin-accent-soft),var(--sin-surface));box-shadow:0 12px 32px -18px rgba(169,112,47,.5);}
		@media (max-width:760px){.shift-key-insight{position:static;}}
		.shift-key-icon{flex:none;font-size:1.4rem;color:var(--sin-accent);line-height:1;}
		.shift-key-label{display:block;font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--sin-accent);margin-bottom:.6rem;}
		.shift-key-text p,.shift-key-preview{margin:0;font-size:1.22rem;font-weight:700;line-height:1.5;color:var(--sin-text);}

		/* §"키 인사이트가 말줄임표인데.. 활성화하면 전체내용 보이게
		 * 해줘"(2026-08-27, 사용자 확정) — 실제로 잘렸을 때만 <details>로
		 * 감싸서 클릭하면 펼쳐지게 한다(네이티브 HTML, JS 없음). */
		.shift-key-insight summary{display:flex;gap:1rem;cursor:pointer;list-style:none;}
		.shift-key-insight summary::-webkit-details-marker{display:none;}
		.shift-key-insight summary::marker{content:"";}
		.shift-key-toggle-hint{display:block;margin-top:.7rem;font-size:.74rem;font-weight:700;color:var(--sin-accent);text-decoration:underline;text-underline-offset:3px;}
		.shift-key-hint-close{display:none;}
		.shift-key-insight[open] .shift-key-preview,
		.shift-key-insight[open] .shift-key-hint-open{display:none;}
		.shift-key-insight[open] .shift-key-hint-close{display:block;}
		.shift-key-full{margin:1rem 0 0 3rem;padding-top:1rem;border-top:1px solid rgba(169,112,47,.3);font-size:1.1rem;font-weight:600;line-height:1.65;color:var(--sin-text);}
		.shift-single-tags{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--sin-border);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;}
		.shift-tags-label,.shift-keywords-label{font-size:.76rem;color:var(--sin-text-faint);flex:none;}
		.shift-tags-list{display:flex;gap:.5rem;flex-wrap:wrap;}
		.shift-tag{padding:.3rem .7rem;border-radius:100px;background:var(--sin-surface-2);border:1px solid var(--sin-border);font-size:.78rem;color:var(--sin-text-dim);}
		.shift-keywords{margin-top:.9rem;font-size:.84rem;color:var(--sin-text-faint);}
		.shift-keywords p{margin:.3rem 0 0;color:var(--sin-text-dim);}

		/* 관련 장비 / 관련 생산라인 — 장비 상세페이지 loop-scroll 카드와
		   동일 구조(이미지 위/제목·메타 아래, 가로스크롤), 색만 민트로. */
		/* 구성 추천으로 보내는 칸 — 2026-09-26. 특정 기계에 관한 글이 아닌
		   구매 가이드·공장 운영 글에서 기계 목록 자리를 대신한다. */
		.shift-start-cta{
			margin-top:3rem;padding:2.2rem 2rem;border-radius:18px;
			border:1px solid var(--sin-border);background:var(--sin-surface);
			display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
		}
		.shift-start-cta-lead{margin:0;font-size:1.12rem;font-weight:700;line-height:1.55;color:var(--sin-text);}
		.shift-start-cta-go{
			flex:none;padding:.85rem 1.6rem;border-radius:999px;
			background:var(--sin-accent);color:#fff;font-size:1rem;font-weight:700;
			text-decoration:none;white-space:nowrap;
		}
		.shift-start-cta-go:hover{filter:brightness(1.08);}
		@media (max-width:640px){.shift-start-cta{padding:1.7rem 1.4rem}.shift-start-cta-lead{font-size:1rem}}

		.shift-related-section{margin-top:3rem;}
		/* 2026-09-08 — 위와 같은 이유로 키운다(실측 17.6px). 추천 인사이트
		 * 헤더와 같은 크기로 맞춰 두 섹션이 같은 층으로 읽히게 한다. */
		.shift-related-section h2{font-size:1.6rem;font-weight:800;margin:0 0 1.1rem;letter-spacing:-.01em;}
		/* §"가로스크롤시 전체폭을 사용하도록.. 시작점은 지금처럼 왼쪽
		 * 시작점은 변경없이"(2026-08-28, 사용자 확정) — .shift-single-inner
		 * (max-width:1160px) 안에 있어서 스크롤해도 그 폭 안에서만
		 * 움직였다. 뷰포트 전체 폭으로 벗어나되(100vw 트릭), 첫 카드
		 * 왼쪽 시작 위치는 padding-left로 다시 본문 여백에 맞춘다. */
		.shift-related-scroll{
			display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.5rem;
			width:100vw;position:relative;left:50%;margin-left:-50vw;
			padding-left:max(1.5rem, calc((100vw - 1160px) / 2 + 1.5rem));
			padding-right:1.5rem;
		}
		.shift-related-scroll::-webkit-scrollbar{height:6px;}
		.shift-related-scroll::-webkit-scrollbar-thumb{background:var(--sin-border);border-radius:3px;}
		/* §"사진영역과 텍스트영역 분리는 같이 카드를 묶지 말라는 얘기야.
		 * 텍스트는 카드로 안들어가고 텍스트만 있게 해줘."(2026-08-28,
		 * 사용자 확정) — 이미지만 박스(.shift-related-card)로 감싸고,
		 * 카테고리/제목/메타 텍스트는 박스 밖에 순수 텍스트로 둔다. */
		/* 2026-09-26 — 220 → 320. 사장님 "이미지는 크게". 220px 에서는 사진이
		 * 작고 제목이 두 줄로 접혀 카드가 빽빽했다. */
		.shift-related-item{flex:0 0 320px;scroll-snap-align:start;display:flex;flex-direction:column;}
		.shift-related-card{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--sin-border);background:var(--sin-surface);text-decoration:none;transition:border-color .15s ease;}
		.shift-related-card:hover{border-color:rgba(169,112,47,.4);}
		.shift-related-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--sin-surface-2);}
		.shift-related-text{display:flex;flex-direction:column;gap:.5rem;margin-top:.85rem;text-decoration:none;}
		/* 사진이 없는 글·설비 — 빈 상자로 두지 않고 자리만 잡아 준다. */
		.shift-related-blank{display:block;background:var(--sin-surface-2);}
		/* 2026-09-08 — 테마가 a 에 밑줄을 넣어 카테고리 배지와 제품명까지
		 * 밑줄이 그어졌다("링크 밑줄이 들어가있다", 사용자 지시). 카드
		 * 링크와 그 안의 모든 요소에서 걷어낸다. */
		.shift-related-card,
		.shift-related-card:hover,
		.shift-related-text,
		.shift-related-text:hover,
		.shift-related-text *{text-decoration:none !important;}
		.shift-related-cat{align-self:flex-start;padding:.25rem .65rem;border-radius:100px;font-size:.74rem;font-weight:700;background:var(--sin-accent-soft);color:var(--sin-accent);}
		.shift-related-name{font-size:1rem;font-weight:700;line-height:1.45;color:var(--sin-text);}
		.shift-related-text:hover .shift-related-name{color:var(--sin-accent);}
		.shift-related-meta{font-size:.72rem;color:var(--sin-text-faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

		/* 유튜브 — 클릭 전까지 유튜브를 부르지 않는다(2026-09-14) */
		.sft-yt{margin:28px 0 4px}
		.sft-yt-btn{display:block;width:100%;padding:0;border:0;background:#000;border-radius:10px;
			overflow:hidden;position:relative;cursor:pointer;aspect-ratio:4/3;max-width:520px;margin:0 auto}
		.sft-yt-btn img{width:100%;height:100%;object-fit:contain;display:block;opacity:.86;transition:opacity .18s}
		.sft-yt-btn:hover img{opacity:1}
		.sft-yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
			width:66px;height:46px;border-radius:11px;background:rgba(0,0,0,.72)}
		.sft-yt-play:after{content:"";position:absolute;left:26px;top:13px;
			border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
		.sft-yt-btn:hover .sft-yt-play{background:#e33}
		.sft-yt iframe{width:100%;max-width:520px;aspect-ratio:4/3;border:0;border-radius:10px;display:block;margin:0 auto}
		.sft-yt-note{margin:8px 2px 0;font-size:12.5px;color:#8a837b;line-height:1.6}