@charset "utf-8";
/* =========================================================================
   MarkHub 특허고객번호 가이드 (Figma 515:1363 / 516:1251) — 2분기(있는/없는) 구조
   markhub_main.css(토큰) + markhub_fee.css(서브헤더) 위에서 동작. 2026-07-02
   ========================================================================= */

#mh-guide { padding: 48px 0 100px; background: linear-gradient(180deg, #EAF3FF 0%, #F5F9FF 40%, #fff 100%); }
#mh-guide .inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* 인트로 박스 */
#mh-guide .mh-guide-intro { border: 1px solid #3182F6; border-radius: 24px; padding: 26px 32px; background: linear-gradient(135deg, rgba(49,130,246,.10), rgba(49,130,246,.03) 60%, rgba(49,130,246,0)); margin-bottom: 24px; }
#mh-guide .mh-guide-intro .badge { display:inline-block; background: rgba(49,130,246,.1); color:#3182F6; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:12px; }
#mh-guide .mh-guide-intro h1 { font-size:25px; font-weight:800; color:#0F172B; margin:0 0 10px; letter-spacing:-.02em; }
#mh-guide .mh-guide-intro p { font-size:15px; color:#45556C; line-height:1.6; }
#mh-guide .mh-guide-intro b { color:#3182F6; font-weight:700; }

/* 메인 좌우 — 높이 맞추기(align-items:stretch) */
#mh-guide .mh-guide-main { display:grid; grid-template-columns: 296px 1fr; border:1px solid #E5E8EB; border-radius:24px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); align-items:stretch; background:#fff; }

/* 좌측 2분기 목록 */
#mh-guide .mh-guide-steps { background:#F8FAFC; padding:24px 16px; border-right:1px solid #EEF1F4; }
#mh-guide .mh-guide-steps .label { font-size:11px; color:#8B95A1; letter-spacing:.3px; margin-bottom:14px; padding-left:4px; }
#mh-guide .mh-guide-case { position:relative; display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 14px; border-radius:12px; background:transparent; border:0; margin-bottom:8px; cursor:pointer; transition:all .15s; font-family:inherit; }
#mh-guide .mh-guide-case .num { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:#E5E7EB; color:#4A5565; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
#mh-guide .mh-guide-case .stxt { font-size:14px; font-weight:600; color:#6A7282; }
#mh-guide .mh-guide-case:hover { background:#EEF3FB; }
#mh-guide .mh-guide-case.on { background:#0F172B; box-shadow:0 6px 16px -4px rgba(49,130,246,.5); }
#mh-guide .mh-guide-case.on .num { background:#fff; color:#3182F6; }
#mh-guide .mh-guide-case.on .stxt { color:#fff; }

/* 우측 콘텐츠 */
#mh-guide .mh-guide-content { padding:28px 32px; display:flex; flex-direction:column; }
#mh-guide .mh-guide-content[hidden] { display:none; }
#mh-guide .ctop { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
#mh-guide .ctop h2 { font-size:26px; font-weight:800; color:#0F172B; }
#mh-guide .mh-guide-go { display:inline-flex; align-items:center; gap:6px; background:#2F6BF1; color:#fff; font-size:14px; font-weight:700; padding:11px 18px; border-radius:10px; white-space:nowrap; }
#mh-guide .mh-guide-go:hover { background:#1B64DA; }
#mh-guide .cdesc { font-size:14px; color:#45556C; line-height:1.65; margin-bottom:16px; }
#mh-guide .cdesc b { color:#0F172B; font-weight:700; }
#mh-guide .csub { color:#3182F6; font-size:15px; font-weight:700; margin-bottom:8px; }

/* 특허로 스크린샷 */
#mh-guide .mh-guide-shot { border:1px solid #E5E8EB; border-radius:12px; overflow:hidden; margin:0 0 12px; }
#mh-guide .mh-guide-shot figcaption { background:#111827; color:#fff; font-size:13px; font-weight:600; padding:10px 14px; display:flex; align-items:center; gap:8px; }
#mh-guide .mh-guide-shot figcaption i { width:18px; height:18px; border-radius:50%; background:#3182F6; color:#fff; font-style:normal; font-size:11px; display:flex; align-items:center; justify-content:center; }
#mh-guide .mh-guide-shot img { width:100%; display:block; }
#mh-guide .mh-guide-warn { color:#FF7037; font-size:12px; font-weight:700; margin-bottom:18px; }

/* 입력 폼 (하단 정렬 = 높이 맞추기 보조) */
#mh-guide .mh-guide-form { margin-top:auto; }
#mh-guide .flabel { display:block; font-size:14px; font-weight:700; color:#0F172B; margin:16px 0 8px; }
#mh-guide .mh-guide-inrow { display:flex; gap:8px; }
#mh-guide .mh-guide-inrow input { flex:1; height:48px; border:1px solid #E5E8EB; border-radius:10px; padding:0 14px; font-size:15px; font-family:inherit; box-sizing:border-box; }
#mh-guide .mh-guide-inrow input:focus { outline:none; border-color:#3182F6; }
#mh-guide .mh-guide-save { flex:0 0 auto; padding:0 24px; background:#3182F6; color:#fff; font-size:15px; font-weight:700; border:0; border-radius:10px; cursor:pointer; }
#mh-guide .mh-guide-save:hover { background:#1B64DA; }
#mh-guide .fsaved { margin-top:10px; font-size:13px; color:#00A15C; font-weight:600; }
#mh-guide .fsaved b { font-weight:800; }

/* 인감/서명 업로드 + 예시 */
#mh-guide .mh-guide-upwrap { border:1px solid #EEF1F4; border-radius:12px; padding:18px; background:#F8FAFC; margin-bottom:14px; }
#mh-guide .mh-guide-upwrap .flabel { margin-top:0; }
#mh-guide .up-row { display:flex; gap:16px; align-items:center; margin-bottom:12px; }
#mh-guide .up-row:last-child { margin-bottom:0; }
#mh-guide .up-field { flex:1; min-width:0; }
#mh-guide .up-field .ut { display:block; font-size:13px; font-weight:700; color:#334155; margin-bottom:8px; }
#mh-guide .up-field .ut em { color:#8B95A1; font-weight:500; font-style:normal; font-size:12px; }
#mh-guide .up-field input[type=file] { font-size:13px; max-width:100%; }
#mh-guide .up-field .uhas { display:inline-block; margin-left:8px; color:#00A15C; font-size:12px; font-weight:700; }
#mh-guide .up-ex { flex:0 0 128px; text-align:center; }
#mh-guide .up-ex img { width:88px; height:88px; object-fit:contain; border:1px dashed #CBD5E1; border-radius:8px; background:#fff; margin:0 auto 4px; display:block; }
#mh-guide .up-ex em { display:block; font-size:11px; color:#64748B; font-style:normal; line-height:1.4; }
#mh-guide .up-ex b { color:#FF7037; }

/* 안내 리스트 */
#mh-guide .mh-guide-notes { margin:0 0 4px; padding:0; list-style:none; }
#mh-guide .mh-guide-notes li { position:relative; padding-left:14px; font-size:12.5px; color:#64748B; line-height:1.7; }
#mh-guide .mh-guide-notes li:before { content:"·"; position:absolute; left:4px; }

/* 반응형 */
@media (max-width:768px){
	#mh-guide .mh-guide-main { grid-template-columns:1fr; }
	#mh-guide .mh-guide-steps { display:flex; gap:8px; border-right:0; border-bottom:1px solid #EEF1F4; }
	#mh-guide .mh-guide-steps .label { display:none; }
	#mh-guide .mh-guide-case { margin-bottom:0; flex:1; }
	#mh-guide .ctop { flex-direction:column; align-items:flex-start; }
	#mh-guide .up-row { flex-direction:column; align-items:flex-start; }
	#mh-guide .up-ex { flex:none; }
}

/* 결제완료 후 특허고객번호 등록 유도 배너 */
#mh-guide .mh-guide-paydone { background:#EAF7EE; border:1px solid #00A15C; color:#00753F; font-size:15px; font-weight:600; padding:16px 20px; border-radius:12px; margin-bottom:16px; }
#mh-guide .mh-guide-paydone b { font-weight:800; }