/* ==========================================================
   dbmanager.kr 서브페이지 공통 스타일 (반응형 단일본)
   브랜드: #171767(네이비) / #5a5aaf / #b9b9ff / Noto Sans KR
   ========================================================== */

/* 로고 자산이 2배 해상도(480x122)로 교체됨 — 표시 크기를 고정해 레티나에서 선명하게 */
.Top .con_box .t_logo img { width: 240px; height: auto; }
.popup_01 .info_box .left_ib .logo img { width: 100%; height: auto; }

/* GNB 메뉴 증가 대응 (홈 포함 공통) — 로고 22% + 메뉴 78% 로 한 줄 유지 */
.Top .con_box .t_logo { width: 22%; }
.Top .con_box .t_menu { width: 78%; }
.Top .con_box .t_menu > ul > li { margin: 0 13px; }
.Top .con_box .t_menu > ul > li > a { font-size: 17px; }

/* 핵심: 이 사이트는 모든 섹션(.commonBox)이 float:left 라 일반 흐름이 비어 있음.
   신규 in-flow 섹션은 clear:both 로 float 아래에 배치해야 함 (없으면 페이지 상단을 덮어버림) */
.guideSection, .subVisual, .crumb, .subPage { clear: both; }

/* 시각적 숨김 h1 (홈 전용 — 검색엔진·스크린리더용) */
.blindH1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; }

/* ---------- 서브페이지 골격 ---------- */
.subVisual { background: linear-gradient(135deg, #171767 0%, #5a5aaf 100%); padding: 64px 20px 56px; text-align: center; }
.subVisual .sv_cat { display: inline-block; color: #b9b9ff; font-size: 15px; font-weight: 500; letter-spacing: 0; margin-bottom: 14px; }
.subVisual h1 { color: #fff; font-size: 34px; line-height: 1.35; font-weight: 700; max-width: 860px; margin: 0 auto; word-break: keep-all; }
.subVisual .sv_sub { color: #d9d9ff; font-size: 17px; margin-top: 16px; word-break: keep-all; }

.crumb { max-width: 960px; margin: 0 auto; padding: 16px 20px 0; font-size: 13px; color: #888; }
.crumb a { color: #888; }
.crumb a:hover { color: #171767; }
.crumb span { margin: 0 6px; color: #bbb; }

.subPage { max-width: 960px; margin: 0 auto; padding: 28px 20px 70px; }
.subPage h2 { font-size: 25px; color: #171767; margin: 46px 0 16px; line-height: 1.4; word-break: keep-all; }
.subPage h2:first-child { margin-top: 10px; }
.subPage h3 { font-size: 20px; color: #333; margin: 30px 0 12px; word-break: keep-all; }
.subPage p { font-size: 16px; line-height: 1.8; color: #444; margin: 0 0 16px; word-break: keep-all; }
.subPage ul.dot { margin: 0 0 18px 4px; }
.subPage ul.dot li { font-size: 16px; line-height: 1.75; color: #444; padding-left: 18px; margin-bottom: 6px; word-break: keep-all; }
.subPage ul.dot li:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5a5aaf; position: absolute; left: 2px; top: 11px; }
.subPage .lead { font-size: 17px; color: #333; }
.subPage .artImg { display: block; max-width: 620px; width: 100%; margin: 26px auto; border-radius: 14px; box-shadow: 0 4px 18px rgba(23,23,103,.10); }
.subPage .quoteBox { background: #f9f9ff; border-left: 4px solid #5a5aaf; padding: 18px 20px; border-radius: 0 10px 10px 0; margin: 0 0 18px; }
.subPage .quoteBox p { margin: 0; color: #333; }

/* 비교(전/후) 박스 */
.vsWrap { display: flex; gap: 16px; margin: 0 0 20px; }
.vsWrap .vs { flex: 1; border-radius: 12px; padding: 18px 20px; }
.vsWrap .vs .vs_t { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.vsWrap .vs p { margin: 0; font-size: 15px; }
.vsWrap .bad { background: #f7f7f7; border: 1px solid #e1e1e1; }
.vsWrap .bad .vs_t { color: #888; }
.vsWrap .good { background: #f0f0ff; border: 1px solid #b9b9ff; }
.vsWrap .good .vs_t { color: #171767; }

/* CTA 박스 */
.ctaBox { background: #171767; border-radius: 16px; text-align: center; padding: 42px 24px; margin: 54px 0 0; }
.ctaBox .cta_t { color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 10px; word-break: keep-all; }
.ctaBox .cta_s { color: #c9c9f5; font-size: 15px; margin-bottom: 24px; word-break: keep-all; }
.ctaBox .cta_btns a { display: inline-block; margin: 6px 8px; padding: 13px 30px; border-radius: 30px; font-size: 16px; font-weight: 700; cursor: pointer; }
.ctaBox .cta_btns .b1 { background: #fff; color: #171767; }
.ctaBox .cta_btns .b2 { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.ctaBox .cta_tel { margin-top: 16px; color: #b9b9ff; font-size: 14px; }
.ctaBox .cta_tel b { color: #fff; font-size: 17px; }

/* 카드 그리드 (칼럼 목록/기능) */
.cardGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 26px 0 10px; }
.cardGrid .card { border: 1px solid #e7e7f2; border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; display: block; }
.cardGrid .card:hover { box-shadow: 0 10px 26px rgba(23,23,103,.13); transform: translateY(-3px); }
.cardGrid .card img { width: 100%; display: block; }
.cardGrid .card .c_body { padding: 18px 18px 22px; }
.cardGrid .card .c_cat { font-size: 12px; color: #5a5aaf; font-weight: 700; margin-bottom: 8px; }
.cardGrid .card .c_tit { font-size: 17px; font-weight: 700; color: #222; line-height: 1.45; margin-bottom: 10px; word-break: keep-all; }
.cardGrid .card .c_txt { font-size: 14px; color: #777; line-height: 1.6; word-break: keep-all; }

/* 기능 그리드 */
.featGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 22px 0 8px; }
.featGrid .feat { border: 1px solid #e7e7f2; border-radius: 14px; padding: 24px 24px 20px; background: #fff; }
.featGrid .feat .f_no { font-size: 13px; font-weight: 700; color: #b9b9ff; margin-bottom: 6px; }
.featGrid .feat h3 { margin: 0 0 10px; font-size: 19px; color: #171767; }
.featGrid .feat ul li { font-size: 14.5px; color: #555; line-height: 1.65; padding-left: 14px; margin-bottom: 5px; word-break: keep-all; }
.featGrid .feat ul li:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #b9b9ff; position: absolute; left: 0; top: 10px; }

/* 표 */
.tableWrap { overflow-x: auto; margin: 0 0 20px; }
.tableWrap table { width: 100%; border-collapse: collapse; min-width: 520px; }
.tableWrap th { background: #171767; color: #fff; font-size: 15px; padding: 13px 14px; font-weight: 500; }
.tableWrap td { border-bottom: 1px solid #e7e7f2; font-size: 15px; color: #444; padding: 13px 14px; text-align: center; word-break: keep-all; }
.tableWrap tr td:first-child { font-weight: 700; color: #171767; }

/* 스텝(도입 절차) */
.stepList { counter-reset: step; margin: 24px 0 8px; }
.stepList .step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f0f0f5; }
.stepList .step .s_no { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #f0f0ff; color: #171767; font-weight: 700; text-align: center; line-height: 40px; }
.stepList .step .s_body b { display: block; font-size: 16.5px; color: #222; margin-bottom: 4px; }
.stepList .step .s_body p { margin: 0; font-size: 14.5px; color: #777; }

/* 후기 그리드 */
.revGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 22px 0 8px; }
.revGrid .rev { background: #f9f9ff; border-radius: 14px; padding: 22px; }
.revGrid .rev p { margin: 0 0 12px; font-size: 15px; color: #444; }
.revGrid .rev .r_tag { font-size: 13px; color: #5a5aaf; font-weight: 700; }

/* FAQ 페이지 */
.faqNav { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.faqNav a { display: inline-block; padding: 9px 16px; border: 1px solid #e7e7f2; border-radius: 30px; font-size: 14.5px; color: #444; background: #fff; }
.faqNav a:hover { border-color: #171767; color: #171767; }
.faqNav a span { color: #b9b9ff; font-weight: 700; margin-left: 4px; }
.faqItem { border-bottom: 1px solid #f0f0f5; padding: 22px 0; }
.faqItem:last-child { border-bottom: 0; }
.faqQ { font-size: 18px; color: #171767; margin: 0 0 10px; padding-left: 26px; line-height: 1.5; word-break: keep-all; }
.faqQ:before { content: "Q"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #171767; color: #fff; font-size: 12px; font-weight: 700; text-align: center; line-height: 20px; }
.faqA { font-size: 15.5px; line-height: 1.85; color: #555; padding-left: 26px; word-break: keep-all; }
.faqA:before { content: "A"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #ebebf7; color: #5a5aaf; font-size: 12px; font-weight: 700; text-align: center; line-height: 20px; }

/* 홈 칼럼 섹션 */
.guideSection { padding: 70px 20px; background: #fafafa; }
.guideSection .gs_inner { max-width: 1140px; margin: 0 auto; }
.guideSection h2 { text-align: center; font-size: 30px; color: #171767; margin-bottom: 8px; }
.guideSection .gs_sub { text-align: center; font-size: 16px; color: #888; margin-bottom: 34px; }
.guideSection .cardGrid { grid-template-columns: repeat(3, 1fr); }
.guideSection .gs_more { text-align: center; margin-top: 30px; }
.guideSection .gs_more a { display: inline-block; padding: 12px 34px; border: 1px solid #171767; color: #171767; border-radius: 30px; font-weight: 700; }
.guideSection .gs_more a:hover { background: #171767; color: #fff; }

/* ==========================================================
   반응형 — 서브페이지 전용 (html.resp)
   홈(/)은 본문이 1200px 고정 디자인이고 모바일 UA는 /m/ 로 리다이렉트되므로
   반응형 규칙을 적용하지 않고 원본 고정폭 동작을 그대로 유지한다.
   ========================================================== */

/* ~1200px : 고정폭 골격을 유동폭으로 (불필요한 가로 스크롤 제거) */
@media (max-width: 1200px) {
	.resp, .resp body { min-width: 0; }
	.resp .commonBox { min-width: 0; }
	.resp .commonBox > div { width: 100%; padding: 0 16px; }
	/* 로고는 고정폭 컨테이너로 (퍼센트면 좁은 폭에서 이미지가 컨테이너를 넘침) */
	.resp .Top .con_box .t_logo { width: 210px; }
	.resp .Top .con_box .t_logo img { width: 195px; }
	.resp .Top .con_box .t_menu { width: calc(100% - 210px); }
	.resp .Top .con_box .t_menu > ul > li { margin: 0 10px; }
	.resp .Top .con_box .t_menu > ul > li > a { font-size: 15.5px; }
}

/* ~980px : 카드 2열 */
@media (max-width: 980px) {
	.resp .cardGrid { grid-template-columns: repeat(2, 1fr); }
}

/* ~860px : 헤더 스택(로고 위 / 메뉴 아래 가로스크롤), 푸터 세로 쌓기 */
@media (max-width: 860px) {
	.resp .Top .con_box { display: block; }
	.resp .Top .con_box .t_logo { width: 100%; text-align: center; padding: 6px 0 0; }
	.resp .Top .con_box .t_logo img { width: 190px; float: none; }
	.resp .Top .con_box .t_menu { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.resp .Top .con_box .t_menu > ul { float: none; display: flex; justify-content: flex-start; width: max-content; margin: 0 auto; }
	.resp .Top .con_box .t_menu > ul > li { line-height: 46px; margin: 0 12px; white-space: nowrap; }
	.resp .Top .con_box .t_menu > ul > li > a { font-size: 15px; }

	.resp .footer .left, .resp .footer .right { width: 100%; }
	.resp .footer .right { margin-top: 14px; }
	.resp .footer .right > li > select { width: 100%; max-width: 275px; }
}

/* ~760px : 본문 타이포·그리드 축소 */
@media (max-width: 760px) {
	.resp .subVisual { padding: 44px 16px 38px; }
	.resp .subVisual h1 { font-size: 24px; }
	.resp .subVisual .sv_sub { font-size: 15px; }
	.resp .subPage h2 { font-size: 21px; }
	.resp .subPage h3 { font-size: 18px; }
	.resp .subPage p, .resp .subPage ul.dot li { font-size: 15px; }
	.resp .vsWrap { display: block; }
	.resp .vsWrap .vs { margin-bottom: 12px; }
	.resp .cardGrid, .resp .featGrid, .resp .revGrid { grid-template-columns: 1fr; }
	.resp .ctaBox .cta_t { font-size: 20px; }
	.resp .faqQ { font-size: 17px; }
	.resp .faqA { font-size: 15px; }
}