/* 단지안내 · 세대안내 · 공급안내 서브페이지 공통 (출처: 1020 공급안내 출고본) */

:root {
	--hc-green: #0b5e40;
	--hc-green2: #367561;
	--hc-green3: #7d9b8d;
	--hc-head: #c1ccbf;
	--hc-gold: #c9965a;
	--hc-84a: #f9a46b;
	--hc-84b: #f58f91;
	--hc-84c: #8782b9;
	--hc-ot: #c0c8b2;
	--hc-refuge: #e6e6e6;
	--hc-panel: #dcdddf;
	--hc-line: #d5d5d5;
}

.hc_wrap { width: 100%; text-align: left; color: #222; word-break: keep-all; }
.hc_wrap img { max-width: 100%; display: block; }

/* 섹션 타이틀 */
.hc_tit { text-align: center; margin-bottom: 2.5rem; }
.hc_tit h6 { font-family: 'Futura PT', 'Poppins', sans-serif; font-size: 0.875rem; letter-spacing: 0.2em; color: var(--hc-green2); text-transform: uppercase; font-weight: 600; }
.hc_tit h3 { font-size: 2rem; line-height: 140%; font-weight: 700; color: var(--hc-green); margin-top: 0.75rem; letter-spacing: -0.03em; }
.hc_tit p { font-size: 1rem; line-height: 170%; color: #555; margin-top: 0.75rem; }
.hc_tit h3 b { color: #002d6b; }

/* 히어로 이미지 */
.hc_hero { position: relative; width: 100%; overflow: hidden; margin-bottom: 5rem; }
.hc_hero img { width: 100%; }
.hc_hero_cap { position: absolute; left: 0; top: 2.5rem; width: 100%; text-align: center; color: #fff; font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; text-shadow: 0 0 1.25rem rgba(0,0,0,0.55); }
.hc_hero_note { position: absolute; right: 1rem; bottom: 0.875rem; font-size: 0.75rem; color: #fff; text-shadow: 0 0 0.5rem #000; }

/* 섹션 바 (공급안내 표 제목) */
.hc_bar { background: var(--hc-green3); border-left: 0.5rem solid var(--hc-green2); color: #fff; font-size: 1.125rem; font-weight: 600; padding: 0.75rem 1.25rem; margin: 4rem 0 1.25rem; }
.hc_bar:first-child { margin-top: 0; }
.hc_sub { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.75rem; display: flex; justify-content: space-between; align-items: flex-end; }
.hc_sub span { font-size: 0.8125rem; font-weight: 400; color: #666; }

/* 주석 */
.hc_notes { margin-top: 1rem; }
.hc_notes li { font-size: 0.875rem; line-height: 170%; color: #444; padding-left: 1.125rem; position: relative; }
.hc_notes li:before { content: '※'; position: absolute; left: 0; top: 0; }
.hc_notes.dot li:before { content: '·'; font-weight: 700; }

/* 표 */
.hc_table_scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hc_table { width: 100%; border-collapse: collapse; border-top: 2px solid #333; font-size: 0.9375rem; text-align: center; }
.hc_table th, .hc_table td { border: 1px solid var(--hc-line); padding: 0.875rem 0.5rem; line-height: 140%;     vertical-align: middle; }
.hc_table tr > *:first-child { border-left: none; }
.hc_table tr > *:last-child { border-right: none; }
.hc_table th { background: #f2f4f1; font-weight: 600; color: #222; }
.hc_table thead th { background: var(--hc-head); }
.hc_table td.num { font-family: 'Poppins', sans-serif; }
.hc_table .hl { color: var(--hc-green); font-weight: 700; }

/* 요약 카운터 */
.hc_summary { display: flex; justify-content: center; border-top: 2px solid #333; border-bottom: 1px solid var(--hc-line); margin-top: 3rem; }
.hc_summary > div { flex: 1; text-align: center; padding: 1.5rem 0.5rem; position: relative; }
.hc_summary > div + div:before { content: ''; position: absolute; left: 0; top: 30%; height: 40%; width: 1px; background: var(--hc-line); }
.hc_summary h5 { font-size: 0.875rem; color: #666; font-weight: 500; }
.hc_summary p { font-size: 1.625rem; font-weight: 700; margin-top: 0.5rem; color: #222; }
.hc_summary p small { font-size: 0.875rem; font-weight: 500; margin-left: 2px; }
.hc_summary .t84a p { color: #e57d3c; }
.hc_summary .t84b p { color: #e0606a; }
.hc_summary .t84c p { color: #6a64a6; }

/* 타입 칩 */
.hc_chip { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; margin-right: 1.25rem; }
.hc_chip i { width: 1.125rem; height: 0.75rem; display: inline-block; }
.hc_chip.t84a i { background: var(--hc-84a); }
.hc_chip.t84b i { background: var(--hc-84b); }
.hc_chip.t84c i { background: var(--hc-84c); }
.hc_chip.tot i { background: var(--hc-ot); }
.hc_chip.tref i { background: var(--hc-refuge); border: 1px solid #bbb; }
.hc_chip.tfac i { background: #f5f5f5; border: 1px solid #bbb; }
.hc_legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 0; margin-bottom: 1rem; }

/* ===== 커뮤니티 ===== */
.hc_comm { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hc_comm_box { background: var(--hc-panel); border-top: 4px solid var(--hc-green3); display: flex; align-items: stretch; padding: 1.75rem 1.25rem 1.5rem 1.75rem; gap: 1rem; }
.hc_comm_txt { width: 38%; min-width: 38%; display: flex; flex-direction: column; }
.hc_comm_txt h4 { display: inline-block; align-self: flex-start; background: var(--hc-green); color: #fff; font-size: 1.125rem; font-weight: 700; padding: 0.375rem 0.875rem; border-right: 4px solid #6fae5a; }
.hc_comm_txt p { font-size: 0.9375rem; line-height: 165%; color: #333; margin-top: 0.875rem; }
.hc_comm_photo { margin-top: auto; position: relative; padding-top: 1rem; }
.hc_comm_photo img { width: 100%; max-width: 160px; }
.hc_comm_photo span { position: absolute; right: auto; left: 0; bottom: 0.25rem; font-size: 0.625rem; color: #fff; padding: 0 0.375rem; text-shadow: 0 0 4px #000; }
.hc_comm_iso { flex: 1; display: flex; align-items: center; justify-content: center; }
.hc_comm_iso img { width: 100%; }

/* ===== 단지배치도 ===== */
.hc_map { position: relative; border: 1px solid var(--hc-line); }
.hc_map .wraps { position: relative; width: 100%; margin: 0 auto; }
.hc_map .magnifier { width: 360px; height: 360px; position: absolute; z-index: 9; border-radius: 100%; box-shadow: 0 0 0 3px rgba(255,255,255,0.85), 0 0 3px 3px rgba(0,0,0,0.25); display: none; pointer-events: none; }
.hc_map .target { display: block; width: 100%; }
.hc_btn_row { display: flex; justify-content: center; gap: 0.75rem; margin-top: 5rem; }
.hc_btn { display: inline-flex; align-items: center; justify-content: center; min-width: 11rem; height: 3.25rem; padding: 0 1.5rem; border: 1px solid var(--hc-green); color: var(--hc-green); font-size: 1rem; font-weight: 600; transition: 0.3s; }
.hc_btn:hover, .hc_btn.fill { background: var(--hc-green); color: #fff; }

/* ===== 동·호수표 ===== */
.hc_dh_scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
.hc_dh { display: flex; align-items: flex-start; gap: 1.25rem; min-width: 1000px; }
.hc_dh table { border-collapse: collapse; font-size: 0.6875rem; font-family: 'Poppins', sans-serif; text-align: center; flex: 1; }
.hc_dh table.floor { flex: 0 0 3.25rem; }
.hc_dh td { border: 1px solid #fff; height: 1.125rem; line-height: 1.125rem; padding: 0 2px; white-space: nowrap; vertical-align: middle; }
.hc_dh .floor td { background: #e8e8e8; color: #555; font-family: 'Asta Sans', sans-serif; }
.hc_dh td.a { background: var(--hc-84a); }
.hc_dh td.b { background: var(--hc-84b); }
.hc_dh td.c { background: var(--hc-84c); color: #fff; }
.hc_dh td.ot { background: var(--hc-ot); color: rgba(0,0,0,0.35); }
.hc_dh td.ot_block { background: var(--hc-ot); border-top-color: var(--hc-ot); border-bottom-color: var(--hc-ot); color: #3d4733; font-weight: 600; font-family: 'Asta Sans', sans-serif; }
.hc_dh td.ref { background: var(--hc-refuge); color: #444; font-family: 'Asta Sans', sans-serif; }
.hc_dh td.fac { background: #f5f5f5; color: #555; font-family: 'Asta Sans', sans-serif; border-color: #e3e3e3; }
.hc_dh tfoot td { height: 1.75rem; font-family: 'Asta Sans', sans-serif; font-size: 0.75rem; }
.hc_dh tfoot tr.dong td { background: #333; color: #fff; font-weight: 600; font-size: 0.875rem; }
.hc_dh tfoot tr.ho td { background: #f0f0f0; }
.hc_dh .floor tfoot td { background: transparent; }
.hc_dh_hint { display: none; font-size: 0.75rem; color: #888; margin-bottom: 0.5rem; }

/* ===== 특화설계 ===== */
/* .hc_design { position: relative; width: 100%; overflow: hidden; }
.hc_design > img { width: 100%; }
.hc_design_tit { position: absolute; left: 4%; top: 7%; font-size: 2.125rem; font-weight: 700; letter-spacing: -0.03em; color: #111; }
.hc_design_tit b { color: #0a4f8f; }
.hc_design_list { position: absolute; left: 4%; top: 22%; width: 36%; background: rgba(255,255,255,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 1rem; padding: 1.5rem 1.75rem; }
.hc_design_list li { display: flex; align-items: center; gap: 1.25rem; padding: 0.75rem 0; }
.hc_design_list li img { width: 3.75rem; height: 3.75rem; min-width: 3.75rem; }
.hc_design_list li p { font-size: 0.9375rem; color: #333; line-height: 140%; }
.hc_design_list li h4 { font-size: 1.375rem; font-weight: 800; color: #111; letter-spacing: -0.03em; line-height: 140%; }
.hc_design > span { position: absolute; right: 1rem; bottom: 0.875rem; font-size: 0.75rem; color: #333; } */

/* ===== 특화설계 ===== */
.hc_design { position: relative; width: 100%; overflow: hidden; }
.hc_design_img_wrap { width: 100%; height: 500px; overflow: hidden; position: relative; }
.hc_design > img { width: 100%; }
.hc_design_tit { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; color: #111; margin-left: 3rem; margin-top: 2rem; }
.hc_design_tit b { color: #0a4f8f; }
.hc_design_list { position: relative; display: flex; flex-wrap: wrap; margin-left: auto; width: 100%; max-width: 800px; gap: 3rem; margin-top: 3rem; }
.hc_design_list::before { content:''; width: 1px; height: 95%; background-color: #000; display: inline-block; position: absolute; left: -2rem; bottom: 0; top: 0; margin: auto 0; opacity: 0.3; }
.hc_design_list li { display: flex; align-items: center; gap: 1.25rem; padding: 0.75rem 0; }
.hc_design_list li img { width: 3.75rem; height: 3.75rem; min-width: 3.75rem; }
.hc_design_list li p { font-size: 0.9375rem; color: #333; line-height: 140%; }
.hc_design_list li h4 { font-size: 1.375rem; font-weight: 800; color: #111; letter-spacing: -0.03em; line-height: 140%; }
.hc_design_img_wrap > span { position: absolute; right: 1rem; bottom: 0.875rem; font-size: 0.75rem; color: #333; }

/* ===== 주택형 안내 ===== */
.hc_wrap ul.tabs2 li.selected { background: var(--hc-green); border-color: var(--hc-green); }
.hc_unit { display: grid; grid-template-columns: 30% 1fr; gap: 2.5rem; align-items: center; }
.hc_unit_badge { color: #fff; padding: 1.75rem 1rem 1.5rem; text-align: center; border-radius: 0 0 1.5rem 0; box-shadow: 0.5rem 0.5rem 0 rgba(0,0,0,0.06); }
.hc_unit_badge h3 { font-family: 'Poppins', sans-serif; font-size: 4.25rem; font-weight: 700; line-height: 100%; }
.hc_unit_badge p { font-size: 1.125rem; font-weight: 600; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.6); display: inline-block; min-width: 50%; }
.t84a .hc_unit_badge { background: var(--hc-84a); }
.t84b .hc_unit_badge { background: var(--hc-84b); }
.t84c .hc_unit_badge { background: var(--hc-84c); }
.hc_unit_key { margin-top: 1.5rem; border: 1px solid var(--hc-line); padding: 0.5rem; }
.hc_unit_key h5, .hc_unit_plan h5 { font-size: 0.8125rem; color: #666; font-weight: 600; margin-bottom: 0.5rem; }
.hc_unit_plan { margin-top: 1.5rem; }
.hc_unit_iso img { width: 100%; }
.hc_area { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 2px solid #333; margin-top: 1.5rem; }
.hc_area > div { padding: 1rem 0.25rem; text-align: center; border-bottom: 1px solid var(--hc-line); }
.hc_area h5 { font-size: 0.8125rem; color: #666; font-weight: 500; }
.hc_area p { font-family: 'Poppins', sans-serif; font-size: 1.25rem; font-weight: 600; margin-top: 0.375rem; color: #222; }
.hc_area p small { font-size: 0.75rem; margin-left: 1px; font-weight: 500; }
.hc_area > div.ex p { color: var(--hc-green); }

/* ===== 공급 및 납부안내 ===== */
.hc_gg_top { background: #f6f7f5; padding: 1.75rem 2rem; border-top: 2px solid #333; }
.hc_gg_top li { font-size: 0.9375rem; line-height: 175%; color: #333; padding-left: 0.875rem; position: relative; }
.hc_gg_top li:before { content: '·'; position: absolute; left: 0; font-weight: 700; }
.hc_gg_top li.no { padding-left: 1.125rem; color: var(--hc-green); font-weight: 600; }
.hc_gg_top li.no:before { content: '※'; font-weight: 400; }
.hc_gg_kpi { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid #333; margin-bottom: 1.5rem; }
.hc_gg_kpi > div { padding: 1.25rem 0.5rem; text-align: center; border-bottom: 1px solid var(--hc-line); position: relative; }
.hc_gg_kpi > div + div:before { content: ''; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: var(--hc-line); }
.hc_gg_kpi h5 { font-size: 0.875rem; color: #666; font-weight: 500; }
.hc_gg_kpi p { font-family: 'Poppins', sans-serif; font-size: 1.75rem; font-weight: 700; color: var(--hc-green); margin-top: 0.375rem; }
.hc_pay th, .hc_pay td { font-size: 0.875rem; padding: 0.75rem 0.375rem; }
.hc_pay { min-width: 960px; }

/* ===== 태블릿 ===== */
@media all and (max-width: 1100px) {
	.hc_comm { grid-template-columns: 1fr; }
	.hc_design_list { padding: 1rem 1.25rem; }
	.hc_design_list li { padding: 0.375rem 0; }
	.hc_design_list li h4 { font-size: 1.125rem; }

	.hc_design_img_wrap { height: auto; }
}

/* ===== 모바일 ===== */
@media all and (max-width: 767px) {
	.hc_tit { margin-bottom: 1.75rem; }
	.hc_tit h3 { font-size: 1.375rem; }
	.hc_tit p { font-size: 0.875rem; }
	.hc_hero { margin-bottom: 3rem; }
	.hc_hero_cap { position: static; color: #111; text-shadow: none; font-size: 1.25rem; margin-bottom: 0.75rem; }
	.hc_hero_note { font-size: 0.625rem; }

	.hc_bar { font-size: 1rem; padding: 0.625rem 0.875rem; margin-top: 2.75rem; border-left-width: 0.375rem; }
	.hc_sub { font-size: 0.9375rem; }
	.hc_notes li { font-size: 0.75rem; }
	.hc_table { font-size: 0.8125rem; }
	.hc_table th, .hc_table td { padding: 0.625rem 0.25rem; }

	.hc_summary { flex-wrap: wrap; }
	.hc_summary > div { flex: 0 0 33.333%; padding: 1rem 0.25rem; }
	.hc_summary > div:nth-child(4):before { display: none; }
	.hc_summary p { font-size: 1.25rem; }

	.hc_comm_box { flex-direction: column; padding: 1.25rem; }
	.hc_comm_txt { width: 100%; min-width: 0; }
	.hc_comm_photo { display: none; }

	.hc_map .magnifier { display: none !important; }
	.hc_btn_row { flex-direction: column; }
	/* .hc_btn { width: 100%; } */
	.hc_btn { padding: 0; }

	.hc_dh { min-width: 760px; gap: 0.5rem; }
	.hc_dh table { font-size: 0.5625rem; }
	.hc_dh table.floor { flex-basis: 2.25rem; }
	.hc_dh_hint { display: block; }
	.hc_legend { justify-content: flex-start; }
	.hc_chip { margin-right: 0.875rem; font-size: 0.75rem; }

	.hc_design_tit { position: static; font-size: 1.375rem; text-align: center; margin-bottom: 1rem; margin-left: 0; margin-top: 1rem; }
	.hc_design_list { position: static; width: 100%; background: #f4f6f8; backdrop-filter: none; border-radius: 0; margin-top: 0; display: block; }
	.hc_design_list li img { width: 3rem; height: 3rem; min-width: 3rem; }
	.hc_design_list li h4 { font-size: 1.0625rem; }
	.hc_design_list li p { font-size: 0.8125rem; }
	.hc_design > span { position: static; display: block; text-align: right; color: #888; font-size: 0.625rem; padding: 0.25rem 0; }

	.hc_unit { grid-template-columns: 1fr; gap: 1.25rem; }
	.hc_unit_badge { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; }
	.hc_unit_badge h3 { font-size: 2.5rem; }
	.hc_unit_badge p { margin: 0; padding: 0; border: none; min-width: 0; }
	.hc_unit_key { display: none; }
	.hc_area { grid-template-columns: repeat(3, 1fr); }
	.hc_area p { font-size: 1rem; }

	.hc_gg_top { padding: 1.25rem 1rem; }
	.hc_gg_top li { font-size: 0.8125rem; }
	.hc_gg_kpi p { font-size: 1.125rem; }
	.hc_gg_kpi h5 { font-size: 0.75rem; }
}

/* ===== 스크롤 등장 모션 (js/sub_motion.js) ===== */
.hc_rv { --hc-ease: cubic-bezier(0.22, 0.61, 0.36, 1); }
.hc_rv_up { opacity: 0; transform: translate3d(0, 2.5rem, 0); transition: opacity 0.9s var(--hc-ease), transform 1.1s var(--hc-ease); }
.hc_rv_up.hc_in { opacity: 1; transform: none; }

.hc_rv_img { clip-path: inset(12% 0 0 0); opacity: 0; transition: clip-path 1.3s var(--hc-ease), opacity 0.8s var(--hc-ease); }
.hc_rv_img > img, .hc_rv_img .wraps > img { transform: scale(1.08); transition: transform 1.8s var(--hc-ease); }
.hc_rv_img.hc_in { clip-path: inset(0 0 0 0); opacity: 1; }
.hc_rv_img.hc_in > img, .hc_rv_img.hc_in .wraps > img { transform: none; }
.hc_rv_img.hc_done { clip-path: none; }
.hc_rv_img.hc_done > img, .hc_rv_img.hc_done .wraps > img { transition: none; }
.sub_img_wrap.hc_rv_img img { animation: none; }