@charset "utf-8";

/*
 * File    : sub-tools.css
 * Author  : STUDIO-JT (JC)
 *
 * SUMMARY :
 * 무료 SEO 도구 허브 (/tools/) + 도구 페이지 (SERP 미리보기 / 스키마 생성기)
 * 스니펫 프레임은 구글/네이버 실제 SERP 의 색·타이포 근사 (도구 본질 = 잘림 재현)
 */

/* ---------------------------------------------------------------
 * 공통 셸 (허브 + 도구 페이지)
 * --------------------------------------------------------------- */
.tools { padding: 100px 0 120px; }
.tools_header { padding-bottom: 45px; }
.tools_breadcrumb { font-size: 13px; font-weight: 500; margin-bottom: 30px; color: var(--c-sub); }
.tools_breadcrumb a { color: var(--c-sub); -webkit-transition: color 300ms; transition: color 300ms; }
.tools_breadcrumb a:hover { color: var(--c-primary); }
.tools_breadcrumb_divider { margin: 0 6px; color: var(--c-hint); }
.tools_header_title { font-size: 50px; font-weight: 300; line-height: 1.2; margin: 0 0 25px -4px; }
.tools_header_description { font-size: 14px; font-weight: 500; line-height: 2.15; max-width: 620px; word-break: keep-all; }
.tools_header_description p { margin: 0; }

/* 허브 카드 그리드 */
.tools_grid { margin: -10px; font-size: 0; }
.tools_card { display: inline-block; vertical-align: top; width: 50%; padding: 10px; -moz-box-sizing: border-box; box-sizing: border-box; }
.tools_card_anchor { position: relative; display: block; height: 100%; padding: 40px 36px 34px; border: 2px solid #222; border-radius: 3px; -webkit-transition: border-color 300ms, -webkit-transform 300ms; transition: border-color 300ms, transform 300ms; }
.tools_card_anchor:hover { border-color: var(--c-primary); -webkit-transform: translateY(-4px); transform: translateY(-4px); }
.tools_card_badge { font-size: 11px; font-weight: 700; position: absolute; top: 24px; right: 24px; padding: 4px 10px; letter-spacing: .08em; color: #fff; border-radius: 30px; background: var(--c-primary); }
.tools_card_name { font-size: 26px; font-weight: 700; line-height: 1.3; display: block; margin-bottom: 14px; color: #222; word-break: keep-all; }
.tools_card_anchor:hover .tools_card_name { color: var(--c-primary); }
.tools_card_desc { font-size: 14px; font-weight: 400; line-height: 1.9; display: block; margin-bottom: 24px; color: var(--c-text-2); word-break: keep-all; }
.tools_card_more { font-size: 13px; font-weight: 700; display: inline-block; color: var(--c-primary); }
.tools_card_more:after { content: ' →'; }

/* 도구 페이지 롱폼 설명 (the_content) */
.tools_content { font-size: 15px; line-height: 2; max-width: 780px; padding: 60px 0 20px; word-break: keep-all; }
.tools_content h2 { font-size: 24px; font-weight: 700; margin: 40px 0 16px; }
.tools_content h3 { font-size: 18px; font-weight: 700; margin: 30px 0 12px; }
.tools_content p { margin-bottom: 20px; }
.tools_content ul, .tools_content ol { margin: 0 0 20px 20px; }
.tools_content a { color: var(--c-primary); border-bottom: 1px solid var(--c-primary); -webkit-transition: opacity 300ms; transition: opacity 300ms; }
.tools_content a:hover { opacity: .7; }

/* 관련 도구 */
.tools_related { padding-top: 60px; }
.tools_related_title { font-size: 22px; font-weight: 700; margin-bottom: 22px; }

/* 맥락형 CTA — 첫 유효 결과 후 JS 가 표시 */
.tools_cta { margin-top: 55px; padding: 45px 40px; text-align: center; border-radius: 3px; background: var(--c-bg-2); opacity: 0; -webkit-transform: translateY(12px); transform: translateY(12px); -webkit-transition: opacity 500ms, -webkit-transform 500ms; transition: opacity 500ms, transform 500ms; }
.tools_cta.is-visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.tools_cta_text { font-size: 19px; font-weight: 700; line-height: 1.6; margin-bottom: 22px; word-break: keep-all; }
.tools_cta_anchor { font-size: 14px; font-weight: 500; display: inline-block; min-width: 241px; padding: 18px 40px; -webkit-transition: all 300ms; transition: all 300ms; text-align: center; letter-spacing: .05em; color: #fff; border: 2px solid var(--c-primary); border-radius: 3px; background: var(--c-primary); }
.tools_cta_anchor:hover { color: var(--c-primary); background: #fff; }

/* ---------------------------------------------------------------
 * 공용 폼 요소 (도구)
 * --------------------------------------------------------------- */
.serp_tool_field { margin-bottom: 24px; }
.serp_tool_label { font-size: 14px; font-weight: 700; display: block; margin-bottom: 8px; }
.serp_tool_input,
.serp_tool_textarea,
.schema_tool_select { font-size: 15px; font-weight: 500; width: 100%; padding: 13px 16px; color: #222; border: 2px solid #222; border-radius: 3px; background: #fff; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 300ms; transition: border-color 300ms; }
.serp_tool_input:focus,
.serp_tool_textarea:focus,
.schema_tool_select:focus { border-color: var(--c-primary); outline: 0; }
.serp_tool_input::placeholder,
.serp_tool_textarea::placeholder { color: var(--c-hint); }
.serp_tool_textarea { resize: vertical; line-height: 1.7; }
.serp_tool_counter { font-size: 12px; font-weight: 500; margin-top: 6px; color: var(--c-sub); }

/* ---------------------------------------------------------------
 * SERP 미리보기
 * --------------------------------------------------------------- */
.serp_tool_form { max-width: 640px; }
.serp_tool_actions { margin-top: 6px; }
.serp_tool_share,
.schema_tool_copy,
.schema_tool_add { font-size: 13px; font-weight: 700; padding: 11px 22px; cursor: pointer; color: #222; border: 2px solid #222; border-radius: 3px; background: #fff; -webkit-transition: all 300ms; transition: all 300ms; }
.serp_tool_share:hover,
.schema_tool_copy:hover,
.schema_tool_add:hover { color: var(--c-primary); border-color: var(--c-primary); }
.serp_tool_share.is-copied,
.schema_tool_copy.is-copied { color: #fff; border-color: var(--c-primary); background: var(--c-primary); }

.serp_previews { margin-top: 45px; font-size: 0; }
.serp_frame { display: inline-block; vertical-align: top; width: 50%; padding: 10px; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; }
.serp_frame_label { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--c-text-3); }
.serp_snippet { padding: 24px 22px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; }
.serp_frame_google_mobile .serp_snippet,
.serp_frame_naver_mobile .serp_snippet { max-width: 400px; }
.serp_snippet_site { display: block; margin-bottom: 10px; }
.serp_snippet_favicon { display: inline-block; vertical-align: middle; width: 26px; height: 26px; margin-right: 10px; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-bg-3); }
.serp_snippet_meta { display: inline-block; vertical-align: middle; }
.serp_snippet_sitename { font-size: 14px; line-height: 1.4; display: block; color: #202124; }
.serp_snippet_url { font-size: 12px; line-height: 1.4; display: block; font-style: normal; color: #4d5156; word-break: break-all; }
.serp_snippet_title { font-size: 20px; line-height: 1.3; margin: 0 0 6px; color: #1a0dab; word-break: break-all; cursor: pointer; }
.serp_snippet_title:hover { text-decoration: underline; }
.serp_frame_naver_pc .serp_snippet_title,
.serp_frame_naver_mobile .serp_snippet_title { color: #1e64c8; }
.serp_snippet_desc { font-size: 14px; line-height: 1.58; margin: 0; color: #4d5156; word-break: break-all; }
.serp_snippet_title.is-placeholder,
.serp_snippet_desc.is-placeholder { color: var(--c-hint); }
.serp_frame_meter { margin-top: 10px; font-size: 0; }
.serp_frame_meter_item { font-size: 12px; font-weight: 500; display: inline-block; margin-right: 14px; color: var(--c-sub); }
.serp_frame_meter_item.is-over { color: var(--c-error); font-weight: 700; }
.serp_tool_note { font-size: 12px; font-weight: 400; line-height: 1.8; margin-top: 20px; color: var(--c-sub); word-break: keep-all; }
.serp_tool_note a,
.schema_tool_note a { color: var(--c-primary); border-bottom: 1px solid var(--c-primary); }

/* ---------------------------------------------------------------
 * 스키마 생성기
 * --------------------------------------------------------------- */
.schema_tool_grid { font-size: 0; margin: 0 -15px; }
.schema_tool_controls,
.schema_tool_output { display: inline-block; vertical-align: top; width: 50%; padding: 0 15px; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; }
.schema_tool_typedesc { font-size: 13px; font-weight: 400; line-height: 1.8; margin-top: 8px; color: var(--c-sub); word-break: keep-all; }
.schema_tool_required { color: var(--c-error); font-style: normal; }
.schema_tool_group { margin: 0 0 24px; padding: 20px 18px 0; border: 1px solid var(--c-line); border-radius: 3px; }
.schema_tool_group_title { font-size: 13px; font-weight: 700; padding: 0 6px; color: var(--c-text-3); }
.schema_tool_repeat_row { position: relative; margin-bottom: 10px; padding-right: 44px; }
.schema_tool_repeat_row .serp_tool_input { margin-bottom: 6px; }
.schema_tool_remove { font-size: 18px; line-height: 1; position: absolute; top: 8px; right: 0; width: 34px; height: 34px; padding: 0; cursor: pointer; color: var(--c-sub); border: 2px solid var(--c-line); border-radius: 3px; background: #fff; -webkit-transition: all 300ms; transition: all 300ms; }
.schema_tool_remove:hover { color: var(--c-error); border-color: var(--c-error); }
.schema_tool_add { margin-top: 4px; }
.schema_tool_output_head { margin-bottom: 12px; }
.schema_tool_output_title { font-size: 14px; font-weight: 700; margin-right: 16px; }
.schema_tool_wrap_toggle { font-size: 13px; font-weight: 500; margin-right: 16px; color: var(--c-text-3); cursor: pointer; }
.schema_tool_pre { font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace; font-size: 12px; line-height: 1.8; overflow-x: auto; min-height: 300px; max-height: 560px; overflow-y: auto; margin: 0 0 14px; padding: 22px 24px; color: #f8f8f8; border-radius: 3px; background: #1e1e28; white-space: pre; }
.schema_tool_warnings { margin-bottom: 14px; }
.schema_tool_warning { font-size: 13px; font-weight: 500; line-height: 1.7; position: relative; margin-bottom: 6px; padding-left: 14px; word-break: keep-all; }
.schema_tool_warning:before { position: absolute; top: 8px; left: 0; display: block; width: 5px; height: 5px; content: ''; border-radius: 50%; }
.schema_tool_warning.is-error { color: var(--c-error); }
.schema_tool_warning.is-error:before { background: var(--c-error); }
.schema_tool_warning.is-warn { color: #b57d00; }
.schema_tool_warning.is-warn:before { background: #b57d00; }
.schema_tool_note { font-size: 12px; font-weight: 400; line-height: 1.8; color: var(--c-sub); word-break: keep-all; }

/* ── 허브 하단 관련 자산(도구 ↔ 용어사전 ↔ GEO 가이드) — sub-glossary.css 와 동일 규칙(폴백 대비) ── */
.glossary_hub_related { margin-top: 70px; padding-top: 45px; border-top: 1px solid var(--c-line); text-align: center; font-size: 0; }
.glossary_hub_related_anchor { font-size: 14px; font-weight: 500; display: inline-block; margin: 6px; min-width: 220px; padding: 16px 34px; text-align: center; color: #222; border: 2px solid #222; border-radius: 3px; -webkit-transition: all 300ms; transition: all 300ms; }
.glossary_hub_related_anchor:after { content: ' →'; }
.glossary_hub_related_anchor:hover { color: var(--c-primary); border-color: var(--c-primary); }