@charset "utf-8";
/* =========================================================================
   MarkHub 상표/디자인/저작권 출원 신청 폼 (node 90:440)
   markhub_main.css(토큰/리셋) + markhub_fee.css(서브헤더) 위에서 동작. 2026-06-11
   ========================================================================= */

#mh-apply { padding: 56px 0 100px; background: linear-gradient(180deg, #D6E6FD 0%, #EDF4FF 45%, #fff 100%); }
/* 신청 종목별 배경 그라데이션 (요금안내와 색 일관: 상표 파랑 / 디자인 주황 / 저작권 보라) */
#mh-apply.type-design { background: linear-gradient(180deg, #FFEBCC 0%, #FFF6E8 45%, #fff 100%); }
/* 저작권: 시안(757:1178) 배경 = 라벤더/연보라 그라데이션 (상표=파랑, 디자인=주황과 구분) */
#mh-apply.type-copyright { background: linear-gradient(180deg, #EFDAFF 0%, #F5E8FF 45%, #fff 100%); }
.mh-apply-head { text-align: center; margin-bottom: 40px; padding: 0 20px; }
.mh-req { color: #3182F6; font-weight: 700; margin-right: 1px; }
.mh-apply-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; }
/* 저작권 신청서만 시안(757:1178) 기준 40px — 상표/디자인은 기존 32px 유지 */
#mh-apply.type-copyright .mh-apply-head h1 { font-size: 40px; }
.mh-apply-head p { color: var(--mh-gray); font-size: 16px; }

.mh-apply-wrap { display: flex; gap: 32px; max-width: 1440px; margin: 0 auto; align-items: flex-start; padding: 0 20px; }
.mh-apply-form { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--mh-line); border-radius: 24px; padding: 40px; box-shadow: 0 10px 25px -10px rgba(0,0,0,.08); }
.mh-apply-side { flex: 0 0 340px; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }

.mh-apply-badge { display: inline-block; background: var(--mh-primary); color: #fff; font-size: 14px; font-weight: 700; padding: 8px 18px; border-radius: 999px; margin-bottom: 24px; }
.mh-apply-sec { margin-bottom: 32px; }
.mh-apply-sec > .lbl { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid var(--mh-primary); }
.mh-apply-field { margin-bottom: 20px; }
.mh-apply-field > label { display: block; font-size: 14px; font-weight: 600; color: var(--mh-ink); margin-bottom: 8px; }
/* 가로 배치(row2/row3) 및 공표 상세 박스 안의 필드 라벨도 메인 필드와 동일하게 통일 (14px/600)
   — 기존엔 직계 label 규칙을 못 받아 명칭·분류·사용기종 등이 12px 로 작게 떨어졌음 */
.mh-apply-field .mh-apply-row2 > div > label,
.mh-apply-field .mh-apply-row3 > div > label,
.mh-apply-subbox label { display: block; font-size: 14px; font-weight: 600; color: var(--mh-ink); margin-bottom: 8px; }
.mh-apply-input { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--mh-line-2); border-radius: 12px; font-size: 15px; font-family: inherit; transition: border-color .15s; }
.mh-apply-input:focus { outline: none; border-color: var(--mh-primary); }
textarea.mh-apply-input { resize: vertical; min-height: 80px; }
/* select 전용: 기본 화살표 제거 후 커스텀 화살표 + 값과 겹치지 않게 우측 여백 확보 */
select.mh-apply-input {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}

/* 권리유형/플랜 선택 버튼 */
.mh-apply-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mh-apply-type { padding: 16px 12px; border: 1.5px solid var(--mh-line-2); border-radius: 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--mh-gray); cursor: pointer; transition: all .15s; background: #fff; }
/* 리치 카드(상표 유형: 미리보기 포함)만 세로 카드 레이아웃 */
.mh-apply-type:has(.tp-preview) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 118px; padding: 18px 12px; }
.mh-apply-type .tp-label { font-size: 13px; font-weight: 600; color: var(--mh-gray); }
.mh-apply-type .tp-preview { font-size: 18px; font-weight: 800; color: #0F172B; line-height: 1.25; display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; }
.mh-apply-type .tp-preview b { font-weight: 800; }
.mh-apply-type .tp-sub { font-size: 12px; color: var(--mh-gray-l); }
/* 상표 유형 미리보기: 시안(738:1166/1167/1169) 전달 로고·심볼 이미지 */
.mh-apply-type .tp-img { display: block; max-width: 100%; width: auto; object-fit: contain; }
.mh-apply-type .tp-word { height: 30px; }
.mh-apply-type .tp-symbol { height: 44px; }
.mh-apply-type .tp-combo { height: 40px; }
.mh-apply-type:hover { border-color: var(--mh-primary); }
.mh-apply-type.on { border-color: var(--mh-primary); background: rgba(49,130,246,.05); }

/* 미리보기 */
.mh-apply-preview { margin-top: 12px; height: 120px; border: 1.5px dashed var(--mh-line-2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: var(--mh-ink); background: var(--mh-bg); }
.mh-apply-preview.empty { color: var(--mh-gray-l); font-size: 14px; font-weight: 500; }
/* 프로그램저작권 상세 (Figma 481:2106) */
.mh-radio-row { display: flex; align-items: center; gap: 24px; padding: 6px 0; }
.mh-radio-row.wrap { flex-wrap: wrap; gap: 16px 28px; }
.mh-radio-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mh-ink); cursor: pointer; font-weight: 500; }
.mh-radio-row input[type=radio] { width: 16px; height: 16px; accent-color: var(--mh-primary); }
.mh-apply-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mh-apply-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; background: #F8F8F8; border-radius: 16px; padding: 20px; }
.mh-apply-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mh-ink); cursor: pointer; }
.mh-apply-checks input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--mh-primary); }
@media screen and (max-width: 768px) { .mh-apply-row3, .mh-apply-checks { grid-template-columns: repeat(2, 1fr); } }

/* 출원인/창작자 탭 (디자인 신청폼 — Figma 481:2506)
   ⚠ #mh-main 스코프 필수: 전역 '#mh-main button' 리셋(ID 셀렉터)이 클래스 셀렉터보다 우선순위 높아 배경/색을 덮어씀 */
.mh-role-tabs { display: flex; gap: 14px; margin: 4px 0 18px; }
#mh-main .mh-role-tabs button { flex: 1; padding: 14px 0; border-radius: 999px; border: 1px solid var(--mh-line-2); background: #fff; color: var(--mh-gray); font-size: 15px; font-weight: 700; cursor: pointer; transition: all .15s; }
#mh-main .mh-role-tabs button.on { background: var(--mh-primary); border-color: var(--mh-primary); color: #fff; }

/* 상표명 미러링: 정사각형 박스 + 줄바꿈 반영 (검수사항3 p9 — 폰트 크기는 JS fitPreviewFont가 한 줄 10자 기준 자동 조절) */
#mh-apply.type-trademark .mh-apply-preview { width: 220px; height: 220px; padding: 12px; white-space: pre-wrap; word-break: break-all; text-align: center; overflow: hidden; line-height: 1.25; margin-left: auto; margin-right: auto; }
#mh-apply.type-trademark .mh-apply-preview.empty { width: 100%; height: 120px; white-space: normal; }

/* 파일 업로드 */
.mh-apply-file { display: flex; align-items: center; gap: 12px; background: var(--mh-bg); border: 1px solid var(--mh-line); border-radius: 12px; padding: 14px 16px; }
.mh-apply-file .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--mh-primary); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.mh-apply-file .name { font-size: 13px; color: var(--mh-gray-l); }

/* 카테고리 */
.mh-apply-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mh-apply-cat { min-width: 0; padding: 12px 10px; border: 1px solid var(--mh-line-2); border-radius: 10px; text-align: center; font-size: 13px; font-weight: 600; color: var(--mh-gray); cursor: pointer; transition: all .15s; background: #fff; word-break: keep-all; }
.mh-apply-cat:hover { border-color: var(--mh-primary); }
.mh-apply-cat.on { border-color: var(--mh-primary); background: var(--mh-primary-l); color: var(--mh-primary); }

/* 지정상품 행 */
.mh-apply-goods .row { display: flex; align-items: center; gap: 10px; background: var(--mh-bg); border: 1px solid var(--mh-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.mh-apply-goods .cls { flex: 0 0 64px; background: var(--mh-gray-l); color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 6px 4px; border-radius: 6px; }
/* input 은 min-width:auto(intrinsic ~276px)라 flex:1 로도 안 줄어 폼 전체를 모바일에서 넘김 → min-width:0 로 축소 허용 */
.mh-apply-goods .row input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; font-size: 14px; }
.mh-apply-goods .row input:focus { outline: none; }
.mh-apply-goods .del { color: var(--mh-gray-l); cursor: pointer; font-size: 18px; }

/* 원출원인 박스 */
.mh-apply-applicant { background: var(--mh-bg); border: 1px solid var(--mh-line); border-radius: 16px; padding: 20px; }
.mh-apply-applicant .ttl { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.mh-apply-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 신청자 다중 입력 (개인/법인 토글 + 여러 명 추가) — Figma 481:3065 */
/* button 규칙은 전역 #mh-main button 리셋(padding:0 등)을 이기도록 #mh-main 스코프로 명시 */
.mh-apply-person { position: relative; }
.mh-apply-person + .mh-apply-person { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--mh-line-2); }
.mh-apply-person .apl { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }
.mh-apply-person .apl-sub { font-weight: 400; color: var(--mh-gray-l); font-size: 12px; }
.mh-apply-seg { display: flex; gap: 10px; margin-bottom: 16px; }
#mh-main .mh-apply-seg button { flex: 1; border: 1px solid var(--mh-primary); background: #fff; color: var(--mh-primary); font-size: 15px; font-weight: 700; padding: 15px 0; border-radius: 999px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .12s, color .12s; }
#mh-main .mh-apply-seg button.on { background: var(--mh-primary); color: #fff; }
.mh-apply-addbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#mh-main .mh-apply-addbtns button { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
#mh-main .mh-apply-addbtns button.add { background: var(--mh-primary); color: #fff; }
#mh-main .mh-apply-addbtns button.rem { background: #E5E8EB; color: #6B7684; }

/* ===== 저작권 신청서 (Figma 757:1728 / 757:1178) ===== */
/* 공표 여부: 카드형 라디오 2개 */
.mh-pick { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--mh-line-2); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--mh-ink); cursor: pointer; background: #fff; font-weight: 500; }
.mh-pick:has(input:checked) { border-color: var(--mh-primary); background: rgba(49,130,246,.05); }
.mh-pick input[type=radio] { width: 16px; height: 16px; accent-color: var(--mh-primary); }
/* 공표 상세(국가/날짜/방법/매체) 묶음 박스 */
.mh-apply-subbox { margin-top: 12px; border: 1px solid var(--mh-line-2); border-radius: 12px; padding: 16px; background: #F9FAFB; }
.mh-apply-subbox label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }
/* 판매구분 / 복제물 제출 방법: 한 줄 인라인 pill */
.mh-apply-pillrow { display: flex; gap: 12px; flex-wrap: wrap; }
.mh-pill { display: inline-flex; align-items: center; gap: 14px; border: 1.5px solid var(--mh-line-2); border-radius: 10px; padding: 10px 14px; background: #fff; flex-wrap: wrap; }
.mh-pill .pk { font-size: 13px; font-weight: 700; color: var(--mh-ink); }
.mh-pill label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mh-gray); cursor: pointer; font-weight: 500; }
.mh-pill label:has(input:checked) { color: var(--mh-primary); font-weight: 600; }
.mh-pill input { width: 16px; height: 16px; accent-color: var(--mh-primary); }
/* 신청자 정보 행 (원작자/권리자 여러 명) */
.cr-prow + .cr-prow { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--mh-line-2); }
.cr-prow label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 8px; }
.mh-apply-row1 { display: block; }
@media screen and (max-width: 768px) { .mh-apply-pillrow { flex-direction: column; align-items: stretch; } }

/* 서비스 플랜 — Figma 시안: 세로 중앙 정렬 + 아이콘 + 추천배지 */
.mh-apply-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* 저작권은 플랜 2종(일반/프로그램)뿐 → 2칸으로 넓게 채움 (검수 요청) */
#mh-apply.type-copyright .mh-apply-plans { grid-template-columns: repeat(2, 1fr); }
.mh-apply-plan { position: relative; text-align: center; border: 1.5px solid var(--mh-line-2); border-radius: 16px; padding: 28px 16px 24px; cursor: pointer; transition: all .15s; background: #fff; display: flex; flex-direction: column; }
.mh-apply-plan:hover { border-color: var(--mh-primary); }
.mh-apply-plan.on { border-color: var(--mh-primary); border-width: 2px; background: var(--mh-primary-l); }
.mh-apply-plan .pic { width: auto; height: 52px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: #0F172B; }
.mh-apply-plan .pic svg { width: 44px; height: 44px; }
.mh-apply-plan .pic img { width: 48px; height: 48px; object-fit: contain; }
.mh-apply-plan .pn { font-size: 16px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.02em; }
.mh-apply-plan .pd { font-size: 13px; color: var(--mh-gray-l); line-height: 1.55; margin-bottom: 16px; min-height: 60px; }
.mh-apply-plan .pp { font-size: 20px; font-weight: 800; color: var(--mh-ink); margin-top: auto; }
.mh-apply-plan .pp span { display: inline; margin-left: 5px; font-size: 12px; color: var(--mh-gray-l); font-weight: 500; }
.mh-apply-plan .reco-badge { position: absolute; top: 0; left: 0; background: var(--mh-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 14px 0 12px 0; white-space: nowrap; }

/* 우선심사 신청 체크박스 (플랜 하단) */
.mh-apply-rush { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 14px 16px; background: var(--mh-bg); border: 1px solid var(--mh-line); border-radius: 12px; cursor: pointer; }
.mh-apply-rush input { width: 18px; height: 18px; accent-color: var(--mh-primary); cursor: pointer; flex: 0 0 auto; }
.mh-apply-rush .rt { font-size: 14px; font-weight: 700; color: var(--mh-ink); }
.mh-apply-rush .rs { font-size: 13px; color: var(--mh-gray-l); }

/* 우선심사 업셀 모달 (결제 클릭 시 우선심사 미선택이면 노출) */
.mh-rush-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.mh-rush-modal-bg { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.mh-rush-modal .mh-rush-card { position: relative; z-index: 1; width: 100%; max-width: 420px; animation: rushPop .25s ease; }
@keyframes rushPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* 더 빠른 심사 안내 카드 */
.mh-rush-card { background: #fff; border: 1px solid var(--mh-line-2); border-radius: 24px; padding: 36px 32px; text-align: center; box-shadow: 0 8px 24px -12px rgba(0,0,0,.12); }
.mh-rush-card .rico { width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%; background: var(--mh-primary-l); display: flex; align-items: center; justify-content: center; color: var(--mh-primary); }
.mh-rush-card .rico svg { width: 32px; height: 32px; }
.mh-apply-cat .cico svg { width: 15px; height: 15px; vertical-align: -2px; }
.mh-rush-card h4 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.mh-rush-card h4 b { color: var(--mh-primary); }
.mh-rush-card .rdesc { font-size: 15px; color: var(--mh-gray); line-height: 1.7; margin-bottom: 28px; }
.mh-rush-card .rdesc b { color: var(--mh-primary); font-weight: 700; }
.mh-rush-compare { position: relative; display: flex; align-items: center; justify-content: center; gap: 40px; background: var(--mh-bg); border: 1px solid var(--mh-line-2); border-radius: 16px; padding: 28px 20px 22px; margin-top: 28px; margin-bottom: 22px; }
.mh-rush-compare .rclock { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--mh-primary-l); display: flex; align-items: center; justify-content: center; color: var(--mh-primary); border: 4px solid #fff; }
.mh-rush-compare .rclock svg { width: 24px; height: 24px; }
.mh-rush-compare .rcol { text-align: center; }
.mh-rush-compare .rcol .t { font-size: 15px; font-weight: 700; color: var(--mh-ink); margin-bottom: 10px; }
.mh-rush-compare .rcol .v { font-size: 18px; font-weight: 800; color: var(--mh-primary); }
.mh-rush-compare .rarr { color: var(--mh-primary); font-size: 22px; font-weight: 700; }
.mh-rush-note { font-size: 15px; color: var(--mh-ink); line-height: 1.6; margin-bottom: 20px; }
.mh-rush-note .sm { display: block; font-size: 14px; color: var(--mh-gray-l); font-weight: 500; margin-bottom: 4px; }
.mh-rush-note b { color: var(--mh-primary); font-weight: 800; }
.mh-rush-tip { display: flex; align-items: center; justify-content: center; gap: 10px; background: #F2F4F6; border-radius: 14px; padding: 18px 16px; margin-bottom: 22px; font-size: 15px; color: var(--mh-gray); line-height: 1.5; }
.mh-rush-tip svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--mh-primary); }
.mh-rush-btns { display: flex; gap: 10px; }
#mh-main .mh-rush-btns button { flex: 1; padding: 13px 8px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
#mh-main .mh-rush-btns .ghost { background: #fff; border: 1px solid var(--mh-primary); color: var(--mh-primary); }
#mh-main .mh-rush-btns .ghost:hover { background: var(--mh-primary-l); }
#mh-main .mh-rush-btns .solid { background: var(--mh-primary); border: 1px solid var(--mh-primary); color: #fff; }
#mh-main .mh-rush-btns .solid:hover { background: var(--mh-primary-d); }

/* 카테고리 아이콘 */
.mh-apply-cat .cico { margin-right: 5px; font-size: 14px; }

/* 비회원 박스 */
.mh-apply-guest { background: #F0F6FF; border: 1px solid rgba(49,130,246,.2); border-radius: 16px; padding: 24px; }
.mh-apply-guest .gtag { display: inline-block; background: var(--mh-primary); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 6px; margin-right: 8px; }
.mh-apply-guest h4 { display: inline; font-size: 15px; font-weight: 700; }
.mh-apply-guest p { font-size: 13px; color: var(--mh-gray); line-height: 1.6; margin: 12px 0 16px; }

/* 제출 버튼 */
/* #mh-main button{background:none}(특정성 0,1,1)이 .mh-apply-submit(0,1,0)을 덮어 배경이 투명해지는 문제 → #mh-main 스코프로 특정성 1,1,0 확보 */
/* display:flex 는 버튼 텍스트를 [문구]·[가격span]·[문구] 3개 플렉스 아이템으로 쪼개 각자 줄바꿈→모바일에서 겹침/뒤엉킴. block+text-align:center 로 자연 줄바꿈 복원 */
#mh-main .mh-apply-submit { display: block; text-align: center; width: 100%; padding: 20px; border-radius: 14px; background: var(--mh-primary); color: #fff; font-size: 17px; font-weight: 800; line-height: 1.45; cursor: pointer; transition: background .15s; }
#mh-main .mh-apply-submit #btnPrice { white-space: nowrap; }
#mh-main .mh-apply-submit:hover { background: var(--mh-primary-d); }
@media (max-width: 560px) {
	#mh-main .mh-apply-submit { padding: 16px 14px; font-size: 15px; line-height: 1.5; }
}

/* 우측 요약 */
.mh-apply-cart { background: #fff; border: 1px solid var(--mh-primary); border-radius: 18px; padding: 24px; box-shadow: 0 8px 20px -8px rgba(49,130,246,.2); }
.mh-apply-cart .ct { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--mh-primary); padding-bottom: 16px; border-bottom: 1px solid var(--mh-line); margin-bottom: 16px; }
.mh-apply-cart .ci { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: 12px; }
.mh-apply-cart .ci .k { color: var(--mh-gray); }
.mh-apply-cart .ci .v { font-weight: 700; color: var(--mh-primary); }
.mh-apply-cart .total { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--mh-line); margin-top: 4px; }
.mh-apply-cart .total .k { font-size: 14px; font-weight: 700; }
.mh-apply-cart .total .v { font-size: 24px; font-weight: 800; color: var(--mh-primary); }
.mh-apply-cart .total-sub { font-size: 12px; color: var(--mh-gray-l); text-align: right; margin-top: 6px; }
.mh-apply-guide { background: var(--mh-bg); border: 1px solid var(--mh-line); border-radius: 16px; padding: 20px; }
.mh-apply-guide h5 { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.mh-apply-guide p { font-size: 13px; color: var(--mh-gray); line-height: 1.7; margin-bottom: 12px; }
.mh-apply-guide p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	.mh-apply-wrap { flex-direction: column; }
	.mh-apply-side { flex: none; width: 100%; position: static; }
	.mh-apply-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.mh-apply-form { padding: 24px; }
	.mh-apply-types, .mh-apply-plans { grid-template-columns: 1fr; }
	.mh-apply-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-apply-row2 { grid-template-columns: 1fr; }
}

/* 상품류·지정상품·연관분류 추천 (A-42·43) — 2026-06-15 */
.mh-apply-related { margin-top: 10px; padding: 12px 14px; background: #EAF2FE; border-radius: 10px; font-size: 13px; color: var(--mh-gray, #4E5968); }
.mh-apply-related b { color: var(--mh-primary, #3182F6); }
.mh-apply-related .note { display: block; margin-top: 4px; color: #8B95A1; font-size: 12px; }
.mh-apply-reco { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-apply-reco .reco-chip { display: inline-block; padding: 7px 13px; border: 1px solid var(--mh-line-2, #E5E8EB); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mh-gray, #4E5968); background: #fff; cursor: pointer; transition: all .15s; }
.mh-apply-reco .reco-chip:hover { background: var(--mh-primary, #3182F6); color: #fff; border-color: var(--mh-primary, #3182F6); }