/* ============================================================
   SIMHAL 상품 상세 설명(sh-gd) — 2026-09-21
   상품 상세 '상품정보' 탭 본문(mall/goods_view.html 의 .view_con01)을 스마트스토어용 시안(860px 단독 HTML 11종)처럼 그린다.

   누가 이 클래스를 내나
   - 상품별 본문: shop_product.goods_content — tools/gd/build.py 가 만든 조각을 관리자 상품 수정 '상세설명' 편집기 [소스]에 붙여 넣는다.
       뿌리 div 둘: .sh-gd--p(히어로·포인트·이야기·구성·조리·보관) / .sh-gd--p2(위생·상품정보 제공고시·인터넷 사진이면 사진 출처)
   - 모든 상품 공통: 디자인 편집 영역 goods_story(섹션 gd_story, sections/gd_story.html) — OUR STORY
   - 배송 및 교환·반품 안내: goods_view.html 이 관리자 배송 설정(SHOP_CONFIG)으로 그린다 — .sh-gd--dlv
   - 감싸개 .sh-gd-flow(goods_view.html): 시안 순서(⑥ 보관 → OUR STORY → 위생·고시 → 배송)를 flex order 로 맞춘다.
       본문에 .sh-gd--p2 가 있을 때만 flex — 옛 방식(편집기로 쓴 자유 HTML) 본문의 인라인 요소를 블록으로 바꾸지 않으려고.
       :has() 를 모르는 브라우저는 DOM 순서(상품별 → 위생 → 공통)로 그대로 읽힌다.

   ★ 상품별 본문은 관리자 편집기(CKEditor 4.5.7, ACF 켜짐, ENTER_BR)를 저장할 때마다 한 번 거친다. 거기서 살아남는 것만 쓴다:
     class 는 div·table·img·a 에만(span·p·h*·ul·li·th·td 의 class 는 떨어진다), style·section·빈 요소·img width/height 금지.
     그래서 이 파일은 태그 자손 선택자(.sh-gd-pt h4, .sh-gd-table th)로 꾸민다. 규격: 로컬 전용(git 에 안 올림) tools/gd/SPEC.md
   ★ .sh-page·:root 토큰(--sh-*)에 기대지 않는다 — 편집기 안(contentsCss)에서도 같은 모양이 나오게.
   ★ 새 클래스는 반드시 sh-gd- 로 시작(2026-09-21 스킨·엔진 전체 0건 확인). .sh-steps·.sh-sec 는 다른 곳이 쓰는 이름이다.

   색: 상품마다 강조색 한 쌍(시안 :root 의 --accent·--heroBg)을 테마 클래스 .sh-gd--tNN 이 준다.
       --gd-accent-ink = 작은 글씨·번호 원에 쓰는 진한 색. 시안 강조색이 흰 바탕 4.5:1 에 못 미치는 02(3.6:1)·09(3.8:1)만 따로 둔다.
       공통 섹션(OUR STORY)은 본문과 형제라 색을 못 물려받는다 → 감싸개가 :has() 로 그 상품의 테마 값을 가진다.
   ============================================================ */

/* ---- 테마(상품별 강조색) — 새 상품 = 줄 하나 추가 ---- */
.sh-gd--t01,.sh-gd-flow:has(>.sh-gd--t01){--gd-accent:#5C3B6E;--gd-hero-bg:#F3EEF5}	/* 흑미찐빵 */
.sh-gd--t02,.sh-gd-flow:has(>.sh-gd--t02){--gd-accent:#B07C1E;--gd-accent-ink:#8A5F12;--gd-hero-bg:#FAF3E2}	/* 옥수수찐빵 */
.sh-gd--t03,.sh-gd-flow:has(>.sh-gd--t03){--gd-accent:#A63A2E;--gd-hero-bg:#FAEFEA}	/* 흰찐빵(단팥) */
.sh-gd--t04,.sh-gd-flow:has(>.sh-gd--t04){--gd-accent:#7A3B22;--gd-hero-bg:#F7EDE6}	/* 흰찐빵(통팥) */
.sh-gd--t05,.sh-gd-flow:has(>.sh-gd--t05){--gd-accent:#5A6B3A;--gd-hero-bg:#F1F4EA}	/* 감자떡(녹두) */
.sh-gd--t06,.sh-gd-flow:has(>.sh-gd--t06){--gd-accent:#8A3A2A;--gd-hero-bg:#F8EDE9}	/* 고기감자만두 */
.sh-gd--t07,.sh-gd-flow:has(>.sh-gd--t07){--gd-accent:#B23A2A;--gd-hero-bg:#FAEDE9}	/* 김치감자만두 */
.sh-gd--t08,.sh-gd-flow:has(>.sh-gd--t08){--gd-accent:#6B3A1E;--gd-hero-bg:#F7EFE7}	/* 갈비만두 */
.sh-gd--t09,.sh-gd-flow:has(>.sh-gd--t09){--gd-accent:#C26A3A;--gd-accent-ink:#A0512A;--gd-hero-bg:#FBF1E9}	/* 새우만두 */
.sh-gd--t10,.sh-gd-flow:has(>.sh-gd--t10){--gd-accent:#4E6B5A;--gd-hero-bg:#EFF4F0}	/* 새알옹심이만두 */
.sh-gd--t11,.sh-gd-flow:has(>.sh-gd--t11){--gd-accent:#4A4238;--gd-hero-bg:#F3F1EC}	/* 메밀전병 */
.sh-gd--t12,.sh-gd-flow:has(>.sh-gd--t12){--gd-accent:#7A5A48;--gd-hero-bg:#F5F0EA}	/* 투명피고기만두 — 시안 없음(2026-09-21) */
.sh-gd--t13,.sh-gd-flow:has(>.sh-gd--t13){--gd-accent:#A8452F;--gd-hero-bg:#FBF0EA}	/* 투명피김치만두 — 시안 없음(2026-09-21) */

/* ---- 뿌리 — 폭·바탕·글꼴, 레거시 초기화 방어 ----
   design/user.css(엔진이 {HEAD} 에 붙인다): table{font:12px 나눔고딕} · ul{list-style:none} · h*·p margin 0.
   simhal.css: .view_con01{font-size:16px;line-height:1.7} · .sh-page a{color:inherit}.
   --gd-a·--gd-ai·--gd-hb: 테마 값(같은 요소의 .sh-gd--tNN 이나 감싸개에서 물려받은 값)이 없으면 기본 갈색. */
.sh-gd{--gd-a:var(--gd-accent,#6B4A2F);--gd-ai:var(--gd-accent-ink,var(--gd-a));--gd-hb:var(--gd-hero-bg,#F7F0E3);
	--gd-paper:#FFFDF9;--gd-cream:#FBF5EA;--gd-ink:#2B2018;--gd-text:#4A3B2E;--gd-sub:#8A7A66;--gd-line:#E8DCC8;--gd-card:#EADFCB;
	box-sizing:border-box;width:100%;max-width:860px;margin:0 auto;background:var(--gd-paper);color:var(--gd-ink);text-align:left;
	font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo','맑은 고딕','Malgun Gothic',sans-serif;font-size:16px;line-height:1.7;
	word-break:keep-all;overflow-wrap:anywhere}
.sh-gd *,.sh-gd *:before,.sh-gd *:after{box-sizing:border-box}
.sh-gd h2,.sh-gd h3,.sh-gd h4,.sh-gd p,.sh-gd ul,.sh-gd li,.sh-gd table,.sh-gd th,.sh-gd td{margin:0;padding:0;font-family:inherit}
.sh-gd strong{font-weight:700;color:var(--gd-ink)}
/* 편집기(ENTER_BR)에서 운영자가 Enter 를 치면 블록 사이에 <br> 이 끼고, 빈 문단은 &nbsp; 로 채워진다 — 칸을 벌리지 않게 */
.sh-gd>br,.sh-gd-hero>br,.sh-gd-sec>br,.sh-gd-points>br,.sh-gd-cook>br,.sh-gd-frow>br,.sh-gd-badges>br,.sh-gd-flow>br{display:none}

/* ---- 순서 감싸개 ---- */
.sh-gd-flow:has(>.sh-gd--p2){display:flex;flex-direction:column}
.sh-gd-flow>.sh-gd--p{order:1}
.sh-gd-flow>.sh-secbox{order:2}
.sh-gd-flow>.sh-gd--p2{order:3}
.sh-gd-flow>.sh-gd--dlv{order:4}	/* 배송 및 교환·반품 안내 — goods_view.html 이 관리자 배송 설정 값으로 그린다(2026-09-21) */

/* ---- 사진 — 보이는 비율은 여기서 정한다(편집기가 img width/height 를 인라인 px 로 바꿔 모바일에서 찌그러지므로 속성을 안 쓴다) ---- */
.sh-gd .sh-gd-img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover;border-radius:8px;background:var(--gd-cream)}
/* 관리자 편집기에서 사진을 두 번 눌러 바꾸면(이미지 창) CKEditor 가 옛 사진 크기를 인라인 style width·height px 로 적는다 —
   인라인이 이기면 폰에서 찌그러지므로 여기만 !important 로 칸 폭·비율을 지킨다(2026-09-21, conf/goods_editor.php 로 편집기에서 바로 고치게 하면서) */
.sh-gd img.sh-gd-img{width:100% !important;height:auto !important;max-width:100% !important}
.sh-gd .sh-gd-img--hero{aspect-ratio:16/9;margin-top:40px;border-radius:8px 8px 0 0}
.sh-gd .sh-gd-img--half{aspect-ratio:4/3}
.sh-gd .sh-gd-img--band{aspect-ratio:2/1;margin-top:36px}

/* ---- 히어로 ---- */
.sh-gd-hero{background:var(--gd-hb);padding:56px 60px 0;text-align:center}
.sh-gd-hero:not(:has(>.sh-gd-img)){padding-bottom:56px}
.sh-gd-brand{display:inline-block;padding:7px 16px;border:1px solid var(--gd-ai);border-radius:999px;color:var(--gd-ai);font-size:12px;font-weight:700;letter-spacing:.2em;line-height:1.3}
.sh-gd-hero h2{margin-top:22px;font-size:40px;font-weight:800;line-height:1.3;letter-spacing:-.02em;color:var(--gd-ink)}
.sh-gd-hero p{margin-top:16px;font-size:18px;line-height:1.9;color:#5A4837}
.sh-gd-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.sh-gd-badge{padding:8px 14px;border:1px solid #E3D5BE;border-radius:999px;background:var(--gd-paper);color:#6B4A2F;font-size:12.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em}

/* ---- 구획 — 구획 사이 선은 좌우 여백만큼 안쪽(시안 .divider). 히어로 바로 아래는 선 없음 ---- */
.sh-gd-sec{position:relative;padding:64px 60px}
.sh-gd-sec:before{content:"";position:absolute;top:0;left:60px;right:60px;height:1px;background:var(--gd-line)}
.sh-gd-hero+.sh-gd-sec:before{display:none}
.sh-gd-sec--cream{padding:48px 60px;background:var(--gd-cream)}
.sh-gd-sec--center{text-align:center}
.sh-gd-eyebrow{margin-bottom:14px;color:var(--gd-ai);font-size:13px;font-weight:700;line-height:1.5;letter-spacing:.24em}
.sh-gd-sec h3{font-size:28px;font-weight:800;line-height:1.4;letter-spacing:-.02em;color:var(--gd-ink)}
.sh-gd-sec--center h3:after{content:"";display:block;width:44px;height:3px;margin:22px auto 26px;border-radius:2px;background:var(--gd-a)}
.sh-gd-sec p{font-size:16px;line-height:1.85;color:var(--gd-text)}
.sh-gd-sec--center>p{max-width:660px;margin:0 auto}
.sh-gd-sec--center>.sh-gd-badges{margin-top:22px}

/* ---- 포인트 카드(번호 원 + 제목 + 설명, 한 줄에 셋) ---- */
.sh-gd-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.sh-gd-pt{padding:28px 22px;border:1px solid var(--gd-card);border-radius:10px;background:var(--gd-paper);text-align:center}
.sh-gd-no{width:34px;height:34px;margin:0 auto 14px;border-radius:50%;background:var(--gd-ai);color:#fff;font-size:14px;font-weight:800;line-height:34px;text-align:center}
.sh-gd-pt h4{margin-bottom:9px;font-size:19px;font-weight:700;line-height:1.5;letter-spacing:-.01em;color:var(--gd-ink)}
.sh-gd-sec .sh-gd-pt p{font-size:14.5px;line-height:1.75}

/* ---- 이야기 — 사진·글 좌우 교차 ---- */
.sh-gd-frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;align-items:center;margin-top:34px}
.sh-gd-frow--rev>.sh-gd-img{order:2}
.sh-gd-frow--text{grid-template-columns:minmax(0,1fr)}
.sh-gd-ftxt h4{margin-bottom:12px;font-size:22px;font-weight:700;line-height:1.5;letter-spacing:-.01em;color:var(--gd-ink)}
.sh-gd-sec .sh-gd-ftxt p{font-size:15.5px}

/* ---- 표(구성 안내·상품정보 제공고시) — th 는 행 이름표(scope=row)라 사이트의 다른 이름표-값 표(.sh-spec·.sh-detail-info)처럼 왼쪽 ---- */
.sh-gd .sh-gd-table{width:100%;margin-top:26px;border-collapse:collapse;background:var(--gd-paper);font-family:inherit;font-size:14.5px}
.sh-gd-table th,.sh-gd-table td{padding:13px 16px;border:1px solid var(--gd-line);font-size:14.5px;line-height:1.7;text-align:left;vertical-align:top}
.sh-gd-table th{width:28%;background:#F7F0E3;color:#5A4837;font-weight:700}
.sh-gd-table td{color:var(--gd-text)}

/* ---- 조리법 카드(한 줄에 셋) ---- */
.sh-gd-cook{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.sh-gd-step{padding:24px 20px;border:1px solid var(--gd-card);border-radius:10px;background:var(--gd-paper)}
.sh-gd-label{margin-bottom:10px;color:var(--gd-ai);font-size:12px;font-weight:800;line-height:1.5;letter-spacing:.16em}
.sh-gd-step h4{margin-bottom:7px;font-size:16.5px;font-weight:700;line-height:1.5;color:var(--gd-ink)}
.sh-gd-sec .sh-gd-step p{font-size:14px;line-height:1.7}

/* ---- 안내 목록(보관) ---- */
.sh-gd-notice{margin-top:22px;padding:24px 26px;border:1px solid var(--gd-line);border-radius:10px;background:var(--gd-cream)}
.sh-gd-notice ul{list-style:none}
.sh-gd-notice li{position:relative;padding-left:16px;list-style:none;color:#5A4837;font-size:14px;line-height:1.9}
.sh-gd-notice li:before{content:"·";position:absolute;left:4px;color:var(--gd-ai);font-weight:800}

/* ---- 사진 출처(.sh-gd--p2 맨 끝) — 인터넷에서 가져온 사진의 작가·라이선스 표기(CC BY·BY-SA 의무). tools/gd/build.py 의 credit()
   그 사진을 쓴 상품에만 나온다(2026-09-21 메밀전병). 지우면 라이선스 위반이다 — 사진을 실사로 바꿀 때 같이 뺀다. ---- */
.sh-gd-credit{padding:20px 60px 28px;background:var(--gd-paper)}
.sh-gd-credit p{color:var(--gd-sub);font-size:12px;line-height:1.8}
.sh-page .sh-gd-credit a,.sh-gd-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---- 공통 섹션 OUR STORY(sections/gd_story.html — 편집기를 거치지 않는 스킨 템플릿) ---- */
.sh-gd-sec--story{padding:64px 60px}
.sh-gd-sec--story>p{max-width:640px;margin:0 auto;font-size:18px;line-height:1.9}
.sh-gd .sh-gd-img--band+.sh-gd-points{margin-top:24px}
.sh-gd-more{margin-top:30px}
.sh-page .sh-gd a.sh-gd-btn,.sh-gd a.sh-gd-btn{display:inline-block;padding:12px 26px;border:1px solid var(--gd-ai);border-radius:999px;color:var(--gd-ai);font-size:14px;font-weight:700;line-height:1.4;text-decoration:none}
.sh-page .sh-gd a.sh-gd-btn:hover,.sh-page .sh-gd a.sh-gd-btn:focus,.sh-gd a.sh-gd-btn:hover{background:var(--gd-ai);color:#fff}

/* ---- 좁은 화면 ---- */
@media (max-width:860px){
	.sh-gd-hero{padding:48px 32px 0}
	.sh-gd-hero:not(:has(>.sh-gd-img)){padding-bottom:48px}
	.sh-gd-sec,.sh-gd-sec--story{padding:56px 32px}
	.sh-gd-sec--cream{padding:44px 32px}
	.sh-gd-credit{padding:18px 32px 26px}
	.sh-gd-sec:before{left:32px;right:32px}
	.sh-gd-points,.sh-gd-cook{gap:12px}
	.sh-gd-pt{padding:24px 16px}
	.sh-gd-step{padding:20px 16px}
}
@media (max-width:640px){
	.sh-gd-hero{padding:40px 20px 0}
	.sh-gd-hero:not(:has(>.sh-gd-img)){padding-bottom:40px}
	.sh-gd-hero h2{font-size:28px}
	.sh-gd-hero p{font-size:16px;line-height:1.8}
	.sh-gd .sh-gd-img--hero{margin-top:28px}
	.sh-gd-sec,.sh-gd-sec--story{padding:44px 20px}
	.sh-gd-sec--cream{padding:36px 20px}
	.sh-gd-credit{padding:16px 20px 24px}
	.sh-gd-sec:before{left:20px;right:20px}
	.sh-gd-sec h3{font-size:22px}
	.sh-gd-sec--center h3:after{margin:18px auto 20px}
	.sh-gd-sec--story>p{font-size:16px;line-height:1.85}
	.sh-gd-points,.sh-gd-cook{grid-template-columns:minmax(0,1fr);margin-top:24px}
	.sh-gd-pt{padding:22px 18px}
	.sh-gd-frow{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px}
	.sh-gd-frow--rev>.sh-gd-img{order:0}
	.sh-gd-ftxt h4{font-size:19px;margin-bottom:8px}
	.sh-gd-notice{padding:18px 18px}
	/* 표는 이름표 위·값 아래로 쌓는다 — 358px 폭에서 28% 이름표('포장단위별 내용물의 용량(중량), 수량')가 한 글자씩 꺾이지 않게 */
	.sh-gd .sh-gd-table,.sh-gd-table tbody,.sh-gd-table tr,.sh-gd-table th,.sh-gd-table td{display:block;width:100%}
	.sh-gd-table tr{border:1px solid var(--gd-line);border-top:0}
	.sh-gd-table tr:first-child{border-top:1px solid var(--gd-line)}
	.sh-gd-table th,.sh-gd-table td{border:0;padding:10px 14px}
	.sh-gd-table th{width:100%;padding-bottom:6px}
	.sh-gd-table td{padding-top:6px}
}