/* ============================================================
   취업 준비 셸 (공용) — hospital.php / resume.php 공유
     · page-title + tab-intro 그룹 (인트로 영역)
     · 1차 메뉴 탭(career-tabs)
   마크업: pages/_career_tabs.php + 각 페이지 인트로
   #resume / #hp-predict 두 컨테이너 모두에 동일 적용
     (HTML 클래스 .hp- 접두사 차이는 셀렉터 그룹화로 흡수)
   ============================================================ */

/* ----- page-title + tab-intro 그룹 (메인 한 문장만 노출, 일관 높이) ----- */
#hp-predict .hp-tab-intro-group,
#resume .tab-intro-group { margin: 0 0 16px; }

#hp-predict .hp-step,
#resume .step { display: block; font-size: 12px; font-weight: 700; color: #2097FF; letter-spacing: 0.08em; margin: 0 0 6px; line-height: 1; }

#hp-predict .hp-page-title,
#resume .page-title { font-size: 24px; font-weight: 700; line-height: 1.2; color: #111827; margin: 0 0 10px; letter-spacing: -0.02em; }

#hp-predict .hp-tab-intro,
#resume .tab-intro { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }

#hp-predict .hp-tab-intro-group .hp-tab-intro,
#resume .tab-intro-group .tab-intro { margin: 0; }

#hp-predict .hp-tab-intro__title,
#resume .tab-intro__title { margin: 0; color: #111827; font-size: 17px; font-weight: 500; line-height: 1.5; }

#hp-predict .hp-tab-intro__desc,
#resume .tab-intro__desc { margin: 0; color: #4B5563; font-size: 14px; line-height: 1.55; word-break: keep-all; overflow-wrap: break-word; }

#hp-predict .hp-tab-intro__proof { margin: 0; color: #2097FF; font-size: 13px; font-weight: 600; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }

/* ----- 1차 메뉴 탭 ----- */
#resume .career-tabs,
#hp-predict .career-tabs { display: flex; gap: 0; margin: 0 0 16px; border-bottom: 1px solid #E5E7EB; }

#resume .career-tab,
#hp-predict .career-tab { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; font-size: 15px; line-height: 1.2; font-weight: 500; color: #4B5563; text-decoration: none; position: relative; font-family: inherit; letter-spacing: -0.01em; }

#resume .career-tab:hover,
#hp-predict .career-tab:hover { color: #111827; }

#resume .career-tab.active,
#hp-predict .career-tab.active { color: #111827; font-weight: 700; }

#resume .career-tab.active::after,
#hp-predict .career-tab.active::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: #2097FF; border-radius: 2px; }

/* ----- 2차 메뉴 탭 (공용) — sub-tab 패턴
   적용처: #resume .sub-tab(자소서 탭), #interviewScript .sub-tab(면접 스크립트), .np-cat-nav-tab(경험정리 카테고리)
   active 클래스명 차이: .active / .is-active 둘 다 인식 ----- */
#resume .sub-tabs,
#interviewScript .sub-tabs { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid #E5E7EB; padding-bottom: 0; }

#resume .sub-tab,
#interviewScript .sub-tab,
.np-cat-nav-tab { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 0; background: transparent; color: #4B5563; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; border-radius: 8px 8px 0 0; font-family: inherit; letter-spacing: -0.01em; white-space: nowrap; }

#resume .sub-tab:hover,
#interviewScript .sub-tab:hover,
.np-cat-nav-tab:hover { background: #F9FAFB; }

#resume .sub-tab.active,
#interviewScript .sub-tab.active,
.np-cat-nav-tab.is-active { background: #F4FCFF; color: #2097FF; font-weight: 600; }

/* .np-cat-nav-tab 전용 보조 속성 (스크롤 컨테이너 내 고정 + 자식 갭 + 부드러운 전환) */
.np-cat-nav-tab { flex: 0 0 auto; gap: 4px; transition: color .15s, background .15s; }

/* np-cat-nav 진행률 표시 (.np-cat-nav-tab 전용 확장) */
.np-cat-nav-tab__progress { font-size: 11px; font-weight: 500; color: #9CA3AF; margin-left: 4px; }
.np-cat-nav-tab.is-active .np-cat-nav-tab__progress { color: #2097FF; }

/* ----- 병원 예측 결과 카드 액션/뱃지 정렬 보정 ----- */
#hp-predict .hp-card-footer { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F3F4F6; flex-wrap: wrap; }
#hp-predict .hp-tag-summary { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#hp-predict .hp-tag-row { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 1.45; }
#hp-predict .hp-tag-key { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 2px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
#hp-predict .hp-tag-key--strong { background: #EAF5FE; border-color: #BFDBFE; color: #2097FF; }
#hp-predict .hp-tag-key--weak { background: #FFF7E6; border-color: #FCD9A0; color: #8A5A00; }
#hp-predict .hp-tag-val { min-width: 0; color: #4B5563; font-size: 13px; font-weight: 600; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hp-predict .hp-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; flex: 0 0 auto; flex-wrap: wrap; }
#hp-predict .hp-card-report, #hp-predict .hp-card-actions .hp-card-cta { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; box-sizing: border-box; }
#hp-predict .hp-card-report { background: #fff; border: 1px solid #BFDBFE; color: #2097FF; cursor: pointer; font-family: inherit; }
#hp-predict .hp-card-report:hover { background: #F8FBFF; border-color: #93C5FD; color: #2097FF; }
#hp-predict .hp-card-actions .hp-card-cta { margin-left: 0; background: #2097FF; border: 1px solid #2097FF; color: #fff; }
#hp-predict .hp-card-actions .hp-card-cta:hover { background: #1c87e5; border-color: #1c87e5; }
.hp-evidence-modal-overlay { align-items: center; padding: 16px; background: rgba(17,24,39,.58); }
.hp-evidence-modal-overlay .hp-evidence-modal { width: min(100%, 480px); max-height: min(86vh, 720px); overflow-y: auto; border-radius: 14px; padding: 24px 24px 22px; transform: translateY(10px) scale(.98); box-shadow: 0 24px 60px rgba(17,24,39,.22); }
.hp-evidence-modal-overlay.active .hp-evidence-modal { transform: translateY(0) scale(1); }
.hp-evidence-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.hp-evidence-modal .hp-share-modal-title { margin: 0 0 5px; text-align: left; font-size: 17px; font-weight: 800; line-height: 1.35; color: #111827; }
.hp-evidence-modal .hp-share-modal-desc { margin: 0; text-align: left; font-size: 13px; line-height: 1.55; color: #4B5563; }
.hp-evidence-close { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: #F9FAFB; color: #9CA3AF; font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit; }
.hp-evidence-close:hover { background: #F3F4F6; color: #4B5563; }
.hp-evidence-modal .hp-evidence-field { display: flex !important; flex-direction: column !important; gap: 7px; margin: 0 0 14px; }
.hp-evidence-modal .hp-evidence-label { display: block; color: #111827; font-size: 13px; font-weight: 700; line-height: 1.35; }
.hp-evidence-modal .hp-evidence-input { display: block !important; width: 100% !important; min-height: 44px; box-sizing: border-box; border: 1px solid #E5E7EB !important; border-radius: 10px; background: #fff !important; color: #111827; padding: 11px 12px; font-size: 14px; line-height: 1.5; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
.hp-evidence-modal textarea.hp-evidence-input { min-height: 108px; resize: vertical; }
.hp-evidence-modal #hp-evidence-notes { min-height: 82px; }
.hp-evidence-modal .hp-evidence-input::placeholder { color: #9CA3AF; opacity: 1; }
.hp-evidence-modal .hp-evidence-input:focus { border-color: #2097FF !important; box-shadow: 0 0 0 3px rgba(32,151,255,.12); }
.hp-evidence-help { margin: 2px 0 16px; padding: 10px 12px; background: #F8FBFF; border: 1px solid #DCEBFF; border-radius: 10px; color: #4B5563; font-size: 12px; line-height: 1.5; }
.hp-evidence-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.hp-evidence-submit, .hp-evidence-cancel { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 800; line-height: 1; font-family: inherit; cursor: pointer; box-sizing: border-box; }
.hp-evidence-submit { background: #2097FF; border: 1px solid #2097FF; color: #fff; }
.hp-evidence-submit:hover:not(:disabled) { background: #1c87e5; border-color: #1c87e5; }
.hp-evidence-cancel { background: #fff; border: 1px solid #E5E7EB; color: #4B5563; }
.hp-evidence-cancel:hover { background: #F9FAFB; }
#hp-predict .hp-gate-cta { display: grid; gap: 10px; padding: 28px 20px; }
#hp-predict .hp-gate-title { margin-bottom: 0; }
#hp-predict .hp-gate-desc { max-width: 620px; margin: 0 auto 8px; }
#hp-predict .hp-gate-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin: 0; box-sizing: border-box; text-align: center; line-height: 1.25; }
#hp-predict .hp-gate-subscribe { background: #2097FF; border: 1px solid #2097FF; color: #fff; }
#hp-predict .hp-gate-subscribe:hover { background: #1c87e5; border-color: #1c87e5; color: #fff; }
#hp-predict .hp-gate-bonus-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 0; }
#hp-predict .hp-gate-bonus-actions .hp-gate-btn { min-height: 46px; padding: 0 12px; }
#hp-predict .hp-gate-bonus-actions .hp-gate-btn:only-child { grid-column: 1 / -1; }
#hp-predict .hp-gate-review { background: #EAF5FE; border: 1px solid #BFDBFE; color: #2097FF; }
#hp-predict .hp-gate-review:hover { background: #DCEBFF; border-color: #93C5FD; }
#hp-predict .hp-results-has-gate .hp-bottom-actions { display: none; }
#hp-predict .hp-gate-tertiary-actions { display: flex; align-items: center; justify-content: center; margin-top: 2px; padding-top: 4px; }
#hp-predict .hp-gate-reanalyze { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: #6B7280; font-size: 13px; font-weight: 700; line-height: 1.2; font-family: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#hp-predict .hp-gate-reanalyze:hover { background: #F9FAFB; color: #2097FF; }
.hp-review-modal-overlay { align-items: center; padding: 16px; background: rgba(17,24,39,.58); }
.hp-review-modal-overlay .hp-review-modal { width: min(100%, 420px); border-radius: 16px; padding: 26px 22px 22px; transform: translateY(10px) scale(.98); box-shadow: 0 24px 60px rgba(17,24,39,.22); }
.hp-review-modal-overlay.active .hp-review-modal { transform: translateY(0) scale(1); }
.hp-review-step[hidden], .hp-review-feedback[hidden] { display: none !important; }
.hp-review-stars { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 18px 0 14px; }
.hp-review-star { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #E5E7EB; font-size: 34px; line-height: 1; cursor: pointer; font-family: inherit; transition: color .12s, transform .12s; }
.hp-review-star:hover, .hp-review-star.is-active { color: #FBBF24; }
.hp-review-star:hover { transform: translateY(-1px); }
.hp-review-feedback { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hp-review-feedback-text { width: 100%; min-height: 96px; box-sizing: border-box; border: 1px solid #E5E7EB; border-radius: 10px; padding: 11px 12px; font-size: 14px; line-height: 1.5; color: #111827; font-family: inherit; resize: vertical; outline: none; }
.hp-review-feedback-text:focus { border-color: #2097FF; box-shadow: 0 0 0 3px rgba(32,151,255,.12); }
.hp-review-feedback-submit, .hp-review-store-go { width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: #2097FF; color: #fff; font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer; }
.hp-review-feedback-submit:hover:not(:disabled), .hp-review-store-go:hover:not(:disabled) { background: #1c87e5; }
.hp-review-feedback-submit:disabled, .hp-review-store-go:disabled { opacity: .65; cursor: wait; }
.hp-review-emoji { font-size: 42px; line-height: 1; text-align: center; margin: 0 0 12px; }

@media (max-width: 720px) { #hp-predict .hp-page-title,
    #resume .page-title { font-size: 22px; }

    #hp-predict .hp-tab-intro-group,
    #resume .tab-intro-group { min-height: 0; }

    #resume .career-tabs,
    #hp-predict .career-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #resume .career-tabs::-webkit-scrollbar,
    #hp-predict .career-tabs::-webkit-scrollbar { display: none; }
    #resume .career-tab,
    #hp-predict .career-tab { padding: 12px 14px; font-size: 14px; white-space: nowrap; }
    #resume .career-tab.active::after,
    #hp-predict .career-tab.active::after { left: 14px; right: 14px; }

    /* 2차 메뉴 모바일 */
    #resume .sub-tabs,
    #interviewScript .sub-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #resume .sub-tabs::-webkit-scrollbar,
    #interviewScript .sub-tabs::-webkit-scrollbar { display: none; }
    #resume .sub-tab,
    #interviewScript .sub-tab,
    .np-cat-nav-tab { padding: 0 14px; font-size: 13px; }
}

@media (max-width: 480px) { #hp-predict .hp-card-footer { align-items: stretch; flex-direction: column; } #hp-predict .hp-tag-summary { flex-basis: auto; } #hp-predict .hp-tag-val { white-space: normal; overflow: visible; } #hp-predict .hp-card-actions { width: 100%; margin-left: 0; } #hp-predict .hp-card-report, #hp-predict .hp-card-actions .hp-card-cta { flex: 1 1 0; text-align: center; } #hp-predict .hp-gate-bonus-actions { grid-template-columns: 1fr; } .hp-evidence-modal-overlay, .hp-review-modal-overlay { align-items: flex-end; padding: 10px; } .hp-evidence-modal-overlay .hp-evidence-modal, .hp-review-modal-overlay .hp-review-modal { max-height: calc(100vh - 20px); border-radius: 14px; padding: 20px 18px 18px; } .hp-evidence-modal-head { gap: 10px; margin-bottom: 16px; } .hp-evidence-actions { grid-template-columns: 1fr; } }

/* ----- 취업 준비 공용 타이포 가독성 보정 ----- */
#hp-predict .hp-step, #resume .step { font-size: 13px; letter-spacing: 0.04em; }
#hp-predict .hp-page-title, #resume .page-title { font-size: 26px; line-height: 1.22; }
#hp-predict .hp-tab-intro__title, #resume .tab-intro__title { font-size: 18px; font-weight: 600; line-height: 1.48; }
#hp-predict .hp-tab-intro__desc, #resume .tab-intro__desc { font-size: 15px; line-height: 1.62; }
#hp-predict .hp-tab-intro__proof { font-size: 14px; line-height: 1.58; }
#resume .career-tab, #hp-predict .career-tab { font-size: 16px; line-height: 1.25; }
#resume .sub-tab, #interviewScript .sub-tab, .np-cat-nav-tab { font-size: 15px; }
.np-cat-nav-tab__progress { font-size: 12px; }
#hp-predict .hp-card-title, #hp-predict .hp-result-title, #hp-predict .hp-hospital-name { font-size: 18px; line-height: 1.35; }
#hp-predict .hp-card-desc, #hp-predict .hp-result-desc, #hp-predict .hp-ranking-screen, #hp-predict .hp-coaching-msg, #hp-predict .hp-info-val, #hp-predict .hp-info-note, #hp-predict .hp-tip-body, #hp-predict .hp-step-detail, #hp-predict .hp-benefit-item, #hp-predict .hp-checklist-item { font-size: 15px; line-height: 1.62; }
#hp-predict .hp-form-label, #hp-predict .hp-subhead, #hp-predict .hp-result-top-title, #hp-predict .hp-top3-title, #hp-predict .hp-score-bars-title, #hp-predict .hp-detail-title, #hp-predict .hp-step-name, #hp-predict .hp-checklist-cat-name { font-size: 15px; line-height: 1.45; }
#hp-predict input[type="text"], #hp-predict input[type="number"], #hp-predict select, #hp-predict .hp-search-wrap input, #hp-predict .hp-suggestion-item, #hp-predict .hp-chip, #hp-predict .hp-filter-tab, #hp-predict .hp-info-tab { font-size: 15px !important; }
#hp-predict .hp-result-score, #hp-predict .hp-result-top-name, #hp-predict .hp-result-top-score, #hp-predict .hp-top3-name, #hp-predict .hp-ranking-badge, #hp-predict .hp-hospital-meta, #hp-predict .hp-disqual-msg, #hp-predict .hp-tag-row, #hp-predict .hp-tag-val, #hp-predict .hp-score-bar-label, #hp-predict .hp-score-bar-value, #hp-predict .hp-coaching-item .tip, #hp-predict .hp-info-key, #hp-predict .hp-summary-value { font-size: 14px; line-height: 1.5; }
#hp-predict .hp-result-score strong, #hp-predict .hp-top3-score, #hp-predict .hp-stat-item .num, #hp-predict .hp-score-value { font-size: 21px; }
#hp-predict .hp-result-badge, #hp-predict .hp-result-top-region, #hp-predict .hp-top3-score small, #hp-predict .hp-stat-item .label, #hp-predict .hp-disqual-title, #hp-predict .hp-tag-key, #hp-predict .hp-score-bars-unit, #hp-predict .hp-score-bars-desc, #hp-predict .hp-salary-label, #hp-predict .hp-summary-label, #hp-predict .tier-tag { font-size: 12px; line-height: 1.35; }
#hp-predict .hp-salary-amount, #hp-predict .hp-step-tip { font-size: 14px; }
#hp-predict .hp-card-report, #hp-predict .hp-card-actions .hp-card-cta, #hp-predict .hp-btn-share-result, #hp-predict .hp-btn-reanalyze, #hp-predict .hp-gate-btn { font-size: 15px; }
#hp-predict .hp-gate-title { font-size: 18px; line-height: 1.35; }
#hp-predict .hp-gate-desc { font-size: 15px; line-height: 1.6; }
.hp-share-modal-title, .hp-evidence-modal .hp-share-modal-title { font-size: 19px; line-height: 1.35; }
.hp-share-modal-desc, .hp-evidence-modal .hp-share-modal-desc { font-size: 15px; line-height: 1.6; }
.hp-share-modal-btn, .hp-share-modal-close, .hp-evidence-modal .hp-evidence-label, .hp-evidence-modal .hp-evidence-input, .hp-review-feedback-text, .hp-review-feedback-submit, .hp-review-store-go, .hp-evidence-submit, .hp-evidence-cancel { font-size: 15px; }
.hp-evidence-help { font-size: 14px; line-height: 1.55; }
@media (max-width: 720px) { #hp-predict .hp-page-title, #resume .page-title { font-size: 24px; } #resume .career-tab, #hp-predict .career-tab { font-size: 15px; } #resume .sub-tab, #interviewScript .sub-tab, .np-cat-nav-tab { font-size: 14px; } }
@media (max-width: 480px) { #hp-predict .hp-card-title, #hp-predict .hp-result-title, #hp-predict .hp-hospital-name { font-size: 17px; } #hp-predict .hp-card-desc, #hp-predict .hp-result-desc, #hp-predict .hp-ranking-screen, #hp-predict .hp-coaching-msg, #hp-predict .hp-info-val, #hp-predict .hp-info-note, #hp-predict .hp-tip-body, #hp-predict .hp-step-detail, #hp-predict .hp-benefit-item, #hp-predict .hp-checklist-item { font-size: 14px; } #hp-predict input[type="text"], #hp-predict input[type="number"], #hp-predict select, #hp-predict .hp-search-wrap input, #hp-predict .hp-suggestion-item, #hp-predict .hp-chip, #hp-predict .hp-filter-tab, #hp-predict .hp-info-tab { font-size: 14px !important; } }