/* 2026-10-30 · 16코드랩 1차 홈페이지 정비 · 화면 전용
   서버 PDF/인쇄 및 검사 계산식에는 적용하지 않습니다. */
@media screen {
  /* 모든 페이지의 헤더는 로고-4개 메뉴-모바일 메뉴만 사용 */
  .site-header .navbar { justify-content: space-between; }
  .site-header .nav-links { flex: 1 1 auto; justify-content: center; }
  .site-header .logo-wrap { flex-shrink: 0; }
  .site-header .nav-actions,
  .site-header .nav-links a[href$="contact.html"] { display: none !important; }

  /* PC: 보고서 설명 제목 고정 해제 */
  .official-preview-copy { position: static !important; top: auto !important; }
  .official-mobile-report-trigger { display: none; }

  /* 무료 혜택은 신청내역 바로 위에서 짧게 안내 */
  .official-formq-benefit { align-items: center; gap: 14px; }
  .official-benefit-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .official-benefit-actions a { white-space: nowrap; }
  .official-benefit-actions .btn { white-space: nowrap; }

  /* 정식검사 결과보고서 확대 팝업: 페이지 이동을 안에서 처리 */
  .official-preview-dialog { width: min(96vw, 1040px); max-height: 94dvh; }
  .official-preview-dialog-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 44px 14px 0; }
  .official-preview-dialog-heading strong { font-size: 17px; }
  .official-preview-dialog-heading span { color: #d7ff42; font-weight: 800; }
  .official-preview-dialog img { max-height: 68dvh; object-fit: contain; }
  .official-preview-dialog-navigation { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; bottom: -24px; padding: 12px 0; background: #1a1a1a; }
  .official-preview-dialog-navigation button { min-width: 100px; }
  .official-preview-dialog-navigation button:disabled { opacity: .35; cursor: default; }

  /* 무료 4페이지 퍼스널리포트 미리보기: 별도 화면을 열지 않고 팝업 안에 샘플 노출 */
  .official-benefit-dialog { width: min(96vw, 1040px); height: min(92dvh, 920px); max-width: 1040px; max-height: 92dvh; padding: 16px; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 18px; background: #151515; }
  .official-benefit-dialog::backdrop { background: rgba(0,0,0,.84); }
  .official-benefit-dialog[open] { display: flex; flex-direction: column; }
  .official-benefit-dialog-heading { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .official-benefit-dialog-heading strong { font-size: clamp(14px, 2vw, 18px); }
  .official-benefit-dialog iframe { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; border-radius: 10px; background: #111; }

  /* 미리보기 전용 iframe 화면에서는 안내/구매 영역 없이 4페이지 샘플만 표시 */
  body.preview-only-mode .site-header,
  body.preview-only-mode .page-hero,
  body.preview-only-mode .report-sample-copy,
  body.preview-only-mode .report-use-choice,
  body.preview-only-mode .site-footer,
  body.preview-only-mode footer,
  body.preview-only-mode main > section:not(.report-sample-section) { display: none !important; }
  body.preview-only-mode { background: #111; }
  body.preview-only-mode .report-sample-section { padding: 0 !important; }
  body.preview-only-mode .report-sample-section > .container { width: 100%; max-width: none; }
  body.preview-only-mode .report-sample-centered { gap: 0; }
  body.preview-only-mode .personal-report-live-sample { gap: 8px; }
  body.preview-only-mode .personal-report-sample-toolbar { padding: 10px; border-radius: 10px; }
  body.preview-only-mode .personal-report-sample-stage { padding: 8px; border-radius: 12px; }

  /* 실제 고객 리포트 / 소개 샘플에서 하단 페이지 이동 */
  .refined-report-bottom-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 2px 10px; }
  .refined-report-bottom-nav .btn { min-width: 96px; }
  .refined-report-bottom-nav [data-bottom-count] { color: #d7ff42; font-weight: 850; white-space: nowrap; }
  .refined-report-bottom-nav .btn:disabled { opacity: .35; cursor: default; }
}
@media screen and (max-width: 920px) {
  .site-header .navbar.open .nav-links { justify-content: flex-start; }
}
@media screen and (max-width: 720px) {
  /* 상품 선택 뒤 커다란 보고서 박스를 항상 보여주지 않고 모달로 이동 */
  .official-preview-panel { display: none !important; }
  .official-mobile-report-trigger { display: block; width: 100%; margin: 14px 0; min-height: 46px; }
  .official-preview-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 14px; }
  .official-preview-dialog img { max-height: calc(100dvh - 145px); }
  .official-preview-dialog-navigation { bottom: -14px; }
  .official-benefit-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 12px; }
  .official-formq-benefit { align-items: flex-start; }
}
@media screen and (max-width: 560px) {
  /* 2열 × 2행 절차 카드: 모바일에서 불필요한 4줄 세로 배치 제거 */
  .official-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .official-process-item { grid-template-columns: 23px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 6px; padding: 12px 9px; border-radius: 14px; min-width: 0; }
  .official-process-item span { grid-column: 1; grid-row: 1 / 3; font-size: 12px; padding-top: 3px; }
  .official-process-item strong { grid-column: 2; grid-row: 1; font-size: 13px; word-break: keep-all; }
  .official-process-item small { grid-column: 2; grid-row: 2; font-size: 11px; line-height: 1.4; word-break: keep-all; }
  .official-process-section.section.compact { padding: 24px 0; }
  .official-benefit-actions { gap: 8px; }
  .official-benefit-actions .btn { padding: 10px 12px; font-size: 12px; }
  .official-preview-dialog-navigation .btn { min-width: 90px; }
  .refined-report-bottom-nav { gap: 6px; }
  .refined-report-bottom-nav .btn { min-width: 78px; padding: 9px 10px; font-size: 12px; }
  .refined-report-bottom-nav [data-bottom-count] { font-size: 13px; }

  /* 2페이지: 2열 강제 그리드와 고정폭 자식으로 인한 모바일 우측 잘림 방지.
     고객 화면·샘플만 보정하며 PDF 원본에는 영향 없음. */
  .personal-report-sample-stage, .personal-report-sample-stage .web-report-book,
  .personal-report-sample-stage .web-report-page,
  .formq-report-gallery .web-report-page,
  .web-report-page-balance .report-page-two-v2,
  .web-report-page-balance .report-needs-section-v2,
  .web-report-page-balance .report-share-section-v2,
  .web-report-page-balance .report-gauge-section { min-width: 0 !important; max-width: 100%; }
  .personal-report-sample-stage .web-report-page-balance .report-needs-grid-v2,
  .formq-report-gallery .web-report-page-balance .report-needs-grid-v2 { grid-template-columns: minmax(0, 1fr) !important; }
  .personal-report-sample-stage .web-report-page-balance .report-needs-section-v2,
  .personal-report-sample-stage .web-report-page-balance .report-share-section-v2,
  .personal-report-sample-stage .web-report-page-balance .report-gauge-section,
  .formq-report-gallery .web-report-page-balance .report-needs-section-v2,
  .formq-report-gallery .web-report-page-balance .report-share-section-v2,
  .formq-report-gallery .web-report-page-balance .report-gauge-section { overflow: visible; }
  .personal-report-sample-stage .web-report-content,
  .formq-report-gallery .web-report-page-balance .web-report-content { min-width: 0; padding-left: 11px; padding-right: 11px; }
  .personal-report-sample-stage .web-report-page-balance .report-gauge-columns,
  .personal-report-sample-stage .web-report-page-balance .report-gauge-pair-body,
  .formq-report-gallery .web-report-page-balance .report-gauge-columns,
  .formq-report-gallery .web-report-page-balance .report-gauge-pair-body { grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr) !important; gap: 2px; }
  .personal-report-sample-stage .web-report-page-balance .report-gauge-center strong,
  .formq-report-gallery .web-report-page-balance .report-gauge-center strong { white-space: normal; font-size: 11px; }
  .personal-report-sample-stage .web-report-page-balance .report-gauge-center span,
  .formq-report-gallery .web-report-page-balance .report-gauge-center span { font-size: 18px; }
  .personal-report-sample-stage .web-report-page-balance .report-need-card-v2,
  .formq-report-gallery .web-report-page-balance .report-need-card-v2 { min-width: 0; }
}


/* 2026-10-30 · 2차 모바일 간결화: PC 기존 구성은 유지 */
@media screen {
  .mobile-home-products, .mobile-home-preview-dialog, .official-card-preview-button { display: none; }
  /* 데스크톱은 기존의 넓은 상품 카드 배치와 보고서 미리보기 유지 */
  .official-product-option { position: relative; min-width: 0; }
  .official-product-option .official-product-card { height: 100%; }
  .official-product-option .official-card-preview-button:disabled { opacity: .45; cursor: not-allowed; }
  .mobile-home-preview-dialog { color: var(--text); border: 1px solid var(--line); border-radius: 18px; background: #171717; }
  .mobile-home-preview-dialog::backdrop { background: rgba(0,0,0,.84); }
}
@media screen and (max-width: 920px) {
  /* 메인: 상품 정보를 바로 확인하고 캐릭터는 작은 소개 요소로 표시 */
  .mobile-home-products { display: grid; gap: 12px; margin-top: 22px; }
  .mobile-home-products-heading h2 { margin: 0 0 5px; font-size: 19px; line-height: 1.35; }
  .mobile-home-products-heading p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
  .mobile-home-products-list { display: grid; gap: 8px; }
  .mobile-home-product { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.06); }
  .mobile-home-product > div { display: grid; gap: 3px; min-width: 0; }
  .mobile-home-product strong { font-size: 15px; line-height: 1.25; }
  .mobile-home-product span { font-size: 11px; line-height: 1.4; color: var(--muted); }
  .mobile-home-product b { font-size: 14px; }
  .mobile-home-preview-button { flex: 0 0 auto; min-height: 42px; padding: 0 11px; font-size: 12px; white-space: nowrap; }
  .mobile-home-apply { width: 100%; margin-top: 2px; }
  .hero-grid > .hero-panel { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; }
  .hero-grid > .hero-panel .hero-character { width: 76px; height: 104px; max-width: 100%; object-fit: contain; margin: 0; }
  .hero-grid > .hero-panel .hero-character-caption { margin: 0; text-align: left; gap: 4px; }
  .hero-grid > .hero-panel .hero-character-caption strong { font-size: 16px; }
  .hero-grid > .hero-panel .hero-character-caption span { font-size: 12px; }
  .hero-grid > .hero-panel .mini-stat-grid { display: none !important; }
  /* 모바일 신청 카드: 세부설명은 메인/보고서 예시에서 확인, 여기서는 상품과 가격에 집중 */
  .official-product-grid { gap: 9px; }
  .official-product-option { position: relative; }
  .official-product-option .official-product-card { min-height: 96px; height: auto; padding: 13px 105px 13px 41px; gap: 5px; border-radius: 16px; align-content: center; }
  .official-product-card .tag, .official-product-card small { display: none; }
  .official-product-option .official-product-card strong { padding-right: 0; font-size: 16px; line-height: 1.3; }
  .official-product-option .official-product-card b { margin-top: 2px; font-size: 16px; line-height: 1.35; }
  .official-product-option .official-product-check { top: 18px; left: 14px; right: auto; width: 18px; height: 18px; }
  .official-product-option .official-product-card:has(input:checked) .official-product-check { border-width: 5px; }
  .official-card-preview-button { display: inline-flex; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); min-height: 42px; min-width: 82px; padding: 0 10px; border-radius: 11px; font-size: 12px; white-space: nowrap; z-index: 1; }
  .official-card-preview-button:hover { transform: translateY(-50%); }
  .official-mobile-report-trigger { display: none !important; }
  .official-preview-panel { display: none !important; }
  /* 메인 전용 보고서 팝업: 확대/페이지 이동은 팝업 안에서 처리 */
  .mobile-home-preview-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 14px; border-radius: 0; }
  .mobile-home-preview-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
  .mobile-home-preview-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .mobile-home-preview-top strong { font-size: 15px; line-height: 1.4; }
  .mobile-home-preview-top button { flex: 0 0 auto; min-height: 40px; font-size: 12px; padding: 0 12px; }
  .mobile-home-preview-image { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; min-height: 0; overflow: auto; background: #ececec; border-radius: 12px; padding: 8px; }
  .mobile-home-preview-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
  .mobile-home-preview-nav { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
  .mobile-home-preview-nav .btn { min-height: 42px; padding: 0 12px; }
  .mobile-home-preview-nav span { font-size: 13px; white-space: nowrap; font-weight: 800; color: var(--accent); }
  .mobile-home-preview-nav .btn:disabled { opacity: .4; cursor: default; }
  .mobile-home-preview-apply { width: 100%; }
}

/* 2026-10-30 3차: 결제수단 공통 UI */
.official-payment-choice .official-choice-arrow { display: none !important; }
.official-payment-icon.kakao-icon { padding: 0; border: 0; background: transparent; min-height: 0; flex: 0 0 60px; border-radius: 0; }
.official-payment-icon.kakao-icon img { display: block; width: 60px; height: auto; aspect-ratio: 330 / 196; object-fit: contain; }
.official-transfer-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.official-transfer-actions .btn { flex: 1 1 170px; }
@media (max-width: 560px) { .official-transfer-actions { flex-direction: column; align-items: stretch; } .official-transfer-actions .btn { flex: none; width: 100%; } }

/* 2026-10-30 3차: 메인 모바일 인라인 상품 비교 */
.mobile-hero-guide { display: none; }
.mobile-home-family, .mobile-home-q-types { display: flex; gap: 8px; }
.mobile-home-family > button, .mobile-home-q-types > button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 9px 10px;
  color: var(--text); background: rgba(255,255,255,.055); border: 1px solid var(--line);
  border-radius: 12px; font-weight: 850; cursor: pointer;
}
.mobile-home-family > button.is-active, .mobile-home-q-types > button.is-active {
  border-color: var(--accent); color: var(--accent); background: rgba(215,255,66,.09);
}
.mobile-home-q-types[hidden] { display: none !important; }
.mobile-home-inline-report { display: grid; gap: 12px; }
.mobile-home-report-heading { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.mobile-home-report-heading strong { font-size: 15px; }
.mobile-home-report-heading span { color: var(--accent); font-weight: 850; font-size: 14px; }
.mobile-home-inline-image { display: grid; place-items: center; padding: 12px; border-radius: 15px; background: #e8e8e8; }
.mobile-home-inline-image img { display: block; width: auto; max-width: 100%; max-height: 480px; object-fit: contain; box-shadow: 0 6px 18px rgba(0,0,0,.17); }
.mobile-home-inline-nav { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.mobile-home-inline-nav .btn { min-height: 42px; padding: 0 13px; }
.mobile-home-inline-nav span { color: var(--accent); white-space: nowrap; font-size: 13px; font-weight: 850; }
.mobile-home-inline-nav button:disabled { opacity: .4; cursor: default; }
.mobile-home-form-difference { color: var(--accent); font-size: 13px; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
@media screen and (max-width: 920px) {
  .hero-grid > .hero-panel { display: none !important; }
  .mobile-hero-guide { display: flex; gap: 12px; align-items: center; margin-top: 20px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.055); border-radius: 15px; }
  .mobile-hero-guide img { width: 62px; height: 78px; object-fit: contain; flex-shrink: 0; }
  .mobile-hero-guide > div { display: grid; gap: 5px; }
  .mobile-hero-guide strong { font-size: 15px; }
  .mobile-hero-guide span { font-size: 12px; color: var(--muted); line-height: 1.5; }
  .hero-cta > a[href="official.html"] { display: none !important; }
  .mobile-home-products { margin-top: 24px; }
  .mobile-home-products-list { display: none; }
}


/* 2026-10-30 4차: PC/모바일 동일한 메인 탐색 경험. 메인에만 적용. */
@media screen {
  .home-refined-hero { padding: clamp(34px, 4.6vw, 62px) 0 64px; }
  .home-refined-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(235px, 330px);
    align-items: center;
    gap: clamp(18px, 3.3vw, 44px);
  }
  .home-refined-hero .home-hero-intro { min-width: 0; }
  .home-refined-hero .home-hero-intro h1 { font-size: clamp(36px, 4.1vw, 57px); }
  .home-refined-hero .home-hero-intro p { max-width: 760px; }
  .home-refined-hero .home-hero-intro .hero-cta { margin-top: 20px; }
  .home-refined-hero .home-hero-intro .btn.ghost { min-height: 40px; font-size: 14px; padding: 0 15px; }
  .home-refined-hero .hero-grid > .hero-panel {
    display: flex; flex-direction: row; align-items: center; gap: 14px;
    min-width: 0; padding: 16px 18px; border-radius: 20px;
  }
  .home-refined-hero .hero-grid > .hero-panel .hero-character {
    display: block; flex: 0 0 98px; width: 98px; height: 126px;
    max-width: 98px; object-fit: contain; margin: 0;
  }
  .home-refined-hero .hero-grid > .hero-panel .hero-character-caption {
    display: grid; min-width: 0; gap: 7px; margin: 0; text-align: left;
  }
  .home-refined-hero .hero-grid > .hero-panel .hero-character-caption strong { font-size: 17px; }
  .home-refined-hero .hero-grid > .hero-panel .hero-character-caption span { font-size: 12px; }
  .home-refined-hero .hero-grid > .hero-panel .mini-stat-grid { display: none !important; }

  .home-refined-hero .mobile-home-products {
    display: grid !important; gap: 22px; margin-top: 36px;
    border: 1px solid var(--line); border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.075),rgba(255,255,255,.025));
    box-shadow: var(--shadow); padding: clamp(18px, 3vw, 32px);
  }
  .home-refined-hero .mobile-home-products-heading h2 { font-size: clamp(20px, 2vw, 27px); }
  .home-showcase-grid {
    display: grid; grid-template-columns: minmax(240px, .38fr) minmax(0, .62fr);
    grid-template-areas: 'choices viewer' 'cta viewer';
    grid-template-rows: auto 1fr;
    align-items: start; gap: 16px clamp(16px, 2.8vw, 32px);
  }
  .home-showcase-choices { grid-area: choices; display: grid; align-content: start; gap: 13px; min-width: 0; }
  .home-refined-hero .mobile-home-family > button,
  .home-refined-hero .mobile-home-q-types > button { min-height: 46px; }
  .home-refined-hero .mobile-home-report-heading {
    display: grid; gap: 7px; margin-top: 4px;
    padding: 16px; border: 1px solid var(--line); border-radius: 14px;
    background: rgba(0,0,0,.18);
  }
  .home-refined-hero .mobile-home-report-heading strong { font-size: 16px; }
  .home-refined-hero .mobile-home-report-heading span { font-size: 18px; }
  .home-showcase-cta { grid-area: cta; display: grid; align-content: start; gap: 14px; min-width: 0; }
  .home-refined-hero .home-showcase-cta .mobile-home-apply { width: 100%; margin: 0; }
  .home-refined-hero .mobile-home-inline-report {
    grid-area: viewer; display: grid; align-content: start; gap: 15px;
    min-width: 0; padding: 16px; border: 1px solid var(--line);
    border-radius: 18px; background: rgba(0,0,0,.18);
  }
  .home-refined-hero .mobile-home-inline-image { min-height: 250px; }
  .home-refined-hero .mobile-home-inline-image img { max-height: 490px; }
}
@media screen and (max-width: 920px) {
  .home-refined-hero .hero-grid { grid-template-columns: 1fr; gap: 17px; }
  .home-refined-hero .hero-grid > .hero-panel {
    display: flex !important; flex-direction: row; padding: 12px 14px;
  }
  .home-refined-hero .hero-grid > .hero-panel .hero-character {
    flex-basis: 68px; width: 68px; height: 86px; max-width: 68px;
  }
  .home-refined-hero .mobile-home-products { margin-top: 24px; }
  .home-showcase-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'choices' 'viewer' 'cta';
    gap: 15px;
  }
  .home-refined-hero .mobile-home-report-heading {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: baseline; gap: 8px; padding: 12px;
  }
  .home-refined-hero .mobile-home-inline-report { padding: 10px; }
  .home-refined-hero .mobile-home-inline-image { min-height: 0; }
  .home-refined-hero .mobile-home-inline-image img { max-height: 480px; }
}
@media screen and (max-width: 520px) {
  .home-refined-hero { padding: 28px 0 48px; }
  .home-refined-hero .home-hero-intro h1 { font-size: clamp(29px, 8vw, 36px); }
  .home-refined-hero .mobile-home-products { padding: 15px; border-radius: 18px; gap: 17px; }
  .home-refined-hero .home-showcase-grid { gap: 12px; }
  .home-refined-hero .mobile-home-report-heading strong { font-size: 14px; }
  .home-refined-hero .mobile-home-report-heading span { font-size: 15px; }
}

/* 2026-10-30 5차: 메인 상품 보고서 분량·퍼스널리포트 4페이지 직접보기 */
@media screen {
  .home-hero-links { display: flex; flex-wrap: wrap; gap: 10px; }
  .home-refined-hero .home-hero-links .btn { flex: 0 0 auto; }
  .home-refined-hero .home-report-total {
    display: inline-block; justify-self: start; font-size: 13px; font-weight: 800;
    color: var(--muted); line-height: 1.4;
  }
  .home-personal-showcase {
    display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
    align-items: start; gap: clamp(18px, 3vw, 36px);
    border: 1px solid var(--line); border-radius: 24px;
    padding: clamp(20px, 3vw, 32px);
  }
  .home-personal-copy { min-width: 0; }
  .home-personal-copy h2 { margin: 10px 0 16px; }
  .home-personal-copy > p { color: var(--muted); line-height: 1.7; }
  .home-personal-copy .home-personal-benefit {
    margin-top: 14px; color: var(--accent); font-size: 14px; font-weight: 800;
  }
  .home-personal-copy .hero-cta { margin-top: 20px; }
  .home-personal-details { margin-top: 22px; padding: 0; font-size: 13px; }
  .home-personal-preview {
    display: grid; gap: 13px; min-width: 0;
    padding: 15px; border: 1px solid var(--line); border-radius: 18px;
    background: rgba(0,0,0,.18);
  }
  .home-personal-preview-heading {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 8px;
  }
  .home-personal-preview-heading strong { font-size: 16px; }
  .home-personal-preview-heading span { color: var(--accent); font-size: 13px; font-weight: 800; }
  .home-personal-preview-image {
    display: grid; place-items: center; min-width: 0; padding: 12px;
    border-radius: 15px; background: #e8e8e8;
  }
  .home-personal-preview-image img {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 490px;
    object-fit: contain; box-shadow: 0 6px 18px rgba(0,0,0,.17);
  }
  .home-personal-preview-nav {
    display: flex; justify-content: space-between; align-items: center; gap: 6px;
  }
  .home-personal-preview-nav .btn { min-height: 42px; padding: 0 13px; }
  .home-personal-preview-nav span { color: var(--accent); font-size: 13px; font-weight: 850; white-space: nowrap; }
  .home-personal-preview-nav .btn:disabled { opacity: .4; cursor: default; }
  .home-personal-preview-note { margin: 0; text-align: center; color: var(--muted); font-size: 12px; }
}
@media screen and (max-width: 920px) {
  .home-personal-showcase { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .home-personal-preview { padding: 10px; }
  .home-personal-preview-image img { max-height: 480px; }
}
@media screen and (max-width: 520px) {
  .home-refined-hero .home-hero-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-refined-hero .home-hero-links .btn {
    width: 100%; min-width: 0; min-height: 42px; padding: 8px 6px;
    font-size: 12px; line-height: 1.35; text-align: center;
  }
  .home-personal-showcase { padding: 16px; border-radius: 18px; }
  .home-personal-copy h2 { font-size: 24px; }
  .home-personal-preview-image { padding: 7px; }
  .home-personal-preview-heading strong { font-size: 14px; }
  .home-personal-preview-nav .btn { min-height: 42px; padding: 0 10px; }
}

/* 2026-10-31 1차: 메인 상단 소개카드 위치 및 제공 서비스 2종 클릭형 정리 */
@media screen {
  /* PC와 모바일 모두 캐릭터를 소개 문단 바로 아래의 짧은 카드로 표시합니다. */
  .home-refined-hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-refined-hero .home-hero-intro { max-width: 920px; }
  .home-refined-hero .home-hero-intro > .hero-panel {
    display: flex; flex-direction: row; align-items: center;
    gap: 15px; width: min(100%, 480px); margin-top: 24px;
    padding: 12px 16px; border-radius: 18px;
  }
  .home-refined-hero .home-hero-intro > .hero-panel .hero-character {
    display: block; flex: 0 0 78px; width: 78px; height: 100px;
    max-width: 78px; margin: 0; object-fit: contain;
  }
  .home-refined-hero .home-hero-intro > .hero-panel .hero-character-caption {
    display: grid; min-width: 0; gap: 5px; margin: 0; text-align: left;
  }
  .home-refined-hero .home-hero-intro > .hero-panel .hero-character-caption strong { font-size: 16px; }
  .home-refined-hero .home-hero-intro > .hero-panel .hero-character-caption span { font-size: 12px; }
  /* 서비스 카드를 클릭 가능한 두 개의 동일한 너비로 만듭니다. */
  .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-service-card {
    display: block; height: 100%; color: inherit; text-decoration: none;
    cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .home-service-card:hover, .home-service-card:focus-visible {
    border-color: var(--accent); background: rgba(215, 255, 66, .07);
    transform: translateY(-2px);
  }
  .home-service-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
}
@media screen and (max-width: 920px) {
  .home-refined-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 620px) {
  .home-refined-hero .home-hero-intro > .hero-panel { width: 100%; gap: 12px; padding: 10px 12px; margin-top: 20px; }
  .home-refined-hero .home-hero-intro > .hero-panel .hero-character { flex-basis: 62px; width: 62px; height: 80px; max-width: 62px; }
  .home-services-grid { grid-template-columns: minmax(0, 1fr); }
}