@charset "utf-8";
/* ============================================================
   모바일 고객센터 메인 전용 스킨  (/m/customercenter/cscenter_main.asp)
   - 마크업이 전 분양몰 공용이므로 CSS 도 공용 경로(/m/css/)에 둔다.
   - 몰 메인컬러는 /m/css/common.css.asp 가 :root 에 심는 --sitecolor1/2 를 승계.
   - 라인색·라운딩·음영은 아래 토큰 한 곳에서만 관리한다.
   2026-07-25
   ============================================================ */

html.page_cs_main{
	/* --- 컬러 토큰 --- */
	--cs-primary: var(--sitecolor1, #f2596b);
	--cs-primary-d: var(--sitecolor2, var(--sitecolor1, #f2596b));
	--cs-ink: #16191f;
	--cs-ink2: #5b6270;
	--cs-ink3: #9198a6;
	--cs-line: #e9ebf0;          /* 전 페이지 공통 라인색 */
	--cs-line-soft: #f1f3f6;
	--cs-bg: #f4f5f7;
	--cs-card: #fff;
	--cs-soft: #f7f8fa;
	/* --- 라운딩 --- */
	--cs-r: 16px;
	--cs-r-sm: 12px;
	--cs-r-btn: 14px;
	/* --- 음영 --- */
	--cs-sh: 0 1px 2px rgba(16,20,30,.04), 0 6px 18px rgba(16,20,30,.05);
	--cs-sh-btn: 0 6px 16px rgba(16,20,30,.18);
	--cs-sh-btn-a: 0 2px 6px rgba(16,20,30,.16);
}

html.page_cs_main body{ background:var(--cs-bg); }

#content.cs-page{
	padding:0 0 84px;
	padding-bottom:calc(84px + constant(safe-area-inset-bottom));
	padding-bottom:calc(84px + env(safe-area-inset-bottom));
	background:var(--cs-bg);
	font-family:'Pretendard Variable','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
	color:var(--cs-ink);
	-webkit-text-size-adjust:100%;
}
#content.cs-page *{ box-sizing:border-box; font-family:inherit; }
/* ★ 위 와일드카드가 아이콘 폰트까지 덮어 리간처가 깨지므로 반드시 되돌린다 */
#content.cs-page .material-icons{ font-family:'Material Icons'; font-weight:normal; font-style:normal; letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr; }
#content.cs-page a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,.06); }
#content.cs-page .cs-inner{ padding:14px 16px 0; }
#content.cs-page .cs-card,
#content.cs-page .cs-hero{
	background:var(--cs-card);
	border:1px solid var(--cs-line);
	border-radius:var(--cs-r);
	box-shadow:var(--cs-sh);
	margin-bottom:12px;
	overflow:hidden;
}

/* ------------------------------------------------------------
   1) 상담 안내 (전화 + 운영시간)
   ------------------------------------------------------------ */
#content.cs-page .cs-hero{ padding:18px 16px 16px; }
#content.cs-page .cs-hero-top{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
#content.cs-page .cs-hero-badge{
	flex:0 0 auto; width:42px; height:42px; border-radius:13px;
	display:flex; align-items:center; justify-content:center;
	background:var(--cs-primary); color:#fff;
	box-shadow:var(--cs-sh-btn);
}
#content.cs-page .cs-hero-badge .material-icons{ font-size:22px; line-height:1; }
#content.cs-page .cs-hero-tit{ font-size:17px; font-weight:800; letter-spacing:-.4px; line-height:1.3; }
#content.cs-page .cs-hero-desc{ margin-top:3px; font-size:12.5px; color:var(--cs-ink3); letter-spacing:-.2px; }

#content.cs-page .cs-call{
	display:flex; align-items:center; justify-content:center; gap:8px;
	height:54px; border-radius:var(--cs-r-btn);
	background:var(--cs-primary); color:#fff !important;
	font-size:19px; font-weight:800; letter-spacing:.2px;
	box-shadow:var(--cs-sh-btn);
	transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#content.cs-page .cs-call .material-icons{ font-size:20px; }
#content.cs-page .cs-call:active{ transform:translateY(1px); box-shadow:var(--cs-sh-btn-a); filter:brightness(.96); }

#content.cs-page .cs-hours{
	margin:12px 0 0; padding:4px 14px;
	background:var(--cs-soft);
	border:1px solid var(--cs-line);
	border-radius:var(--cs-r-sm);
}
#content.cs-page .cs-hours .row{
	display:flex; align-items:flex-start; gap:10px;
	padding:10px 0; border-top:1px solid var(--cs-line);
}
#content.cs-page .cs-hours .row:first-child{ border-top:0; }
#content.cs-page .cs-hours dt{
	flex:0 0 auto; min-width:62px; display:flex; align-items:center; gap:4px;
	font-size:12.5px; font-weight:600; color:var(--cs-ink3); letter-spacing:-.2px;
	white-space:nowrap;
}
#content.cs-page .cs-hours dt .material-icons{ font-size:15px; color:var(--cs-ink3); }
#content.cs-page .cs-hours dd{
	flex:1 1 auto; margin:0; font-size:13.5px; font-weight:600;
	color:var(--cs-ink2); letter-spacing:-.2px; line-height:1.45; word-break:keep-all;
}

/* ------------------------------------------------------------
   2) 빠른 메뉴
   ------------------------------------------------------------ */
#content.cs-page .cs-quick{
	display:flex; gap:8px; margin-bottom:12px;
}
#content.cs-page .cs-quick a{
	flex:1 1 0; min-width:0;
	display:flex; flex-direction:column; align-items:center; gap:7px;
	padding:14px 4px 12px;
	background:var(--cs-card);
	border:1px solid var(--cs-line);
	border-radius:var(--cs-r-sm);
	box-shadow:var(--cs-sh);
	transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#content.cs-page .cs-quick a:active{ transform:translateY(1px); box-shadow:var(--cs-sh-btn-a); border-color:var(--cs-primary); }
#content.cs-page .cs-quick .ico{
	width:38px; height:38px; border-radius:12px;
	display:flex; align-items:center; justify-content:center;
	background:var(--cs-soft); border:1px solid var(--cs-line);
	color:var(--cs-primary);
}
#content.cs-page .cs-quick .ico .material-icons{ font-size:20px; }
#content.cs-page .cs-quick .txt{
	font-size:12px; font-weight:700; color:var(--cs-ink2); letter-spacing:-.4px;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* ------------------------------------------------------------
   3) 섹션 카드 공통 (공지사항 / FAQ)
   ------------------------------------------------------------ */
#content.cs-page .cs-card-head{
	display:flex; align-items:center; justify-content:space-between;
	padding:15px 16px 13px; border-bottom:1px solid var(--cs-line);
}
#content.cs-page .cs-card-head h2{
	margin:0; font-size:15.5px; font-weight:800; color:var(--cs-ink);
	letter-spacing:-.4px; line-height:1.2;
}
#content.cs-page .cs-card-head h2 .cs-count{
	margin-left:5px; font-size:12.5px; font-weight:700; color:var(--cs-primary);
}
#content.cs-page .cs-more{
	display:inline-flex; align-items:center; gap:1px;
	padding:5px 4px 5px 8px; border-radius:8px;
	font-size:12.5px; font-weight:600; color:var(--cs-ink3); letter-spacing:-.3px;
	transition:color .16s ease, background .16s ease;
}
#content.cs-page .cs-more .material-icons{ font-size:16px; }
#content.cs-page .cs-more:active{ color:var(--cs-primary); background:var(--cs-soft); }

#content.cs-page .cs-list{ margin:0; padding:0; list-style:none; }
#content.cs-page .cs-list > li{ border-top:1px solid var(--cs-line-soft); }
#content.cs-page .cs-list > li:first-child{ border-top:0; }

/* ---- 공지사항 행 ---- */
#content.cs-page .cs-noti-row{
	display:flex; align-items:center; gap:10px;
	padding:14px 14px 14px 16px;
	transition:background .16s ease;
}
#content.cs-page .cs-noti-row:active{ background:var(--cs-soft); }
#content.cs-page .cs-noti-row .body{ flex:1 1 auto; min-width:0; }
#content.cs-page .cs-noti-row .subject{
	display:block; font-size:14px; font-weight:600; color:var(--cs-ink);
	letter-spacing:-.3px; line-height:1.45;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#content.cs-page .cs-noti-row .date{
	display:block; margin-top:4px; font-size:11.5px; font-weight:500; color:var(--cs-ink3);
}
#content.cs-page .cs-noti-row .new{
	display:inline-block; margin-left:5px; padding:1px 5px; border-radius:5px;
	background:var(--cs-primary); color:#fff; font-size:10px; font-weight:800; vertical-align:1px;
}
#content.cs-page .cs-noti-row > .material-icons{ flex:0 0 auto; font-size:18px; color:#c7ccd6; }

/* ---- FAQ 아코디언 ---- */
#content.cs-page .cs-faq-q{
	display:flex; align-items:flex-start; gap:10px; width:100%;
	padding:14px 14px 14px 16px; margin:0;
	background:none; border:0; text-align:left; cursor:pointer;
	transition:background .16s ease;
}
#content.cs-page .cs-faq-q:active{ background:var(--cs-soft); }
#content.cs-page .cs-faq-q .qmark{
	flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:var(--cs-primary); color:#fff; font-size:12px; font-weight:800; line-height:1;
}
#content.cs-page .cs-faq-q .subject{
	flex:1 1 auto; min-width:0;
	font-size:14px; font-weight:600; color:var(--cs-ink);
	letter-spacing:-.3px; line-height:1.5; word-break:break-all;
}
#content.cs-page .cs-faq-q .subject font{ color:var(--cs-primary); font-weight:700; }
#content.cs-page .cs-faq-q > .material-icons{
	flex:0 0 auto; margin-top:1px; font-size:20px; color:#b9bfcb;
	transition:transform .22s ease, color .22s ease;
}
#content.cs-page .cs-faq-item.on .cs-faq-q > .material-icons{ transform:rotate(180deg); color:var(--cs-primary); }
#content.cs-page .cs-faq-item.on .cs-faq-q .subject{ color:var(--cs-primary); }

#content.cs-page .cs-faq-a{
	display:none;
	padding:14px 16px 16px 16px;
	background:var(--cs-soft);
	border-top:1px solid var(--cs-line);
}
#content.cs-page .cs-faq-a .inner{ display:flex; align-items:flex-start; gap:10px; }
#content.cs-page .cs-faq-a .amark{
	flex:0 0 auto; width:22px; height:22px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:#fff; border:1px solid var(--cs-line);
	color:var(--cs-ink3); font-size:12px; font-weight:800; line-height:1;
}
#content.cs-page .cs-faq-a .atext{
	flex:1 1 auto; min-width:0;
	font-size:13.5px; font-weight:400; color:var(--cs-ink2);
	line-height:1.7; letter-spacing:-.2px; word-break:break-all;
}
#content.cs-page .cs-faq-a .atext font{ color:var(--cs-primary); font-weight:600; }
#content.cs-page .cs-faq-a .atext img,
#content.cs-page .cs-faq-a .atext video,
#content.cs-page .cs-faq-a .atext iframe{ max-width:100% !important; height:auto; border-radius:8px; }
#content.cs-page .cs-faq-a .atext table{ max-width:100%; }

/* ---- 빈 상태 ---- */
#content.cs-page .cs-empty{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:9px; padding:34px 16px 36px; text-align:center;
}
#content.cs-page .cs-empty .ico{
	width:44px; height:44px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:var(--cs-soft); border:1px solid var(--cs-line); color:#c2c8d3;
}
#content.cs-page .cs-empty .ico .material-icons{ font-size:22px; }
#content.cs-page .cs-empty p{ margin:0; font-size:13px; color:var(--cs-ink3); letter-spacing:-.2px; }

/* ---- 하단 안내 ---- */
#content.cs-page .cs-foot{
	padding:2px 6px 6px; text-align:center;
	font-size:11.5px; line-height:1.7; color:#a6adba; letter-spacing:-.2px;
}

/* ------------------------------------------------------------
   좁은 화면 대응
   ------------------------------------------------------------ */
@media (max-width:359px){
	#content.cs-page .cs-inner{ padding:12px 12px 0; }
	#content.cs-page .cs-call{ font-size:17px; height:50px; }
	#content.cs-page .cs-quick a{ padding:12px 2px 10px; }
	#content.cs-page .cs-quick .txt{ font-size:11px; letter-spacing:-.6px; }
	#content.cs-page .cs-hours dt{ flex-basis:52px; }
}