/* ===================================================================
   PROFILE PATCH — 최종 조정판 (모바일/PC 공백 모두 제어)
   목적: 
     1) 메인 히어로(#home)와 프로필(#profile) 사이 공백 제거 및 세밀 조정
     2) 모바일/PC 레이아웃 분리 제어
     3) PC 2열 레이아웃 복구
   적용 순서: 반드시 style.css, site-fixes.css, header-image-strip.css 뒤에 로드
   예)  <link rel="stylesheet" href="css/profile_patch.css?v=FINAL">
   =================================================================== */


/* ───────────────────────────────────────────────────────────────────
   [A] 히어로(#home) 하단 여백 제거
   ─────────────────────────────────────────────────────────────────── */
section.hero#home,
#home.hero {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
section.hero#home > *:last-child { margin-bottom: 0 !important; }


/* ───────────────────────────────────────────────────────────────────
   [B] 프로필 섹션 상/하 패딩 제거 (모바일 기본)
   - 모바일에서 완전 밀착 (0)
   ─────────────────────────────────────────────────────────────────── */
section#profile.about {
  margin-top: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ───────────────────────────────────────────────────────────────────
   [C] 프로필 레이아웃 (모바일 1열 → PC 2열)
   ─────────────────────────────────────────────────────────────────── */
#profile .profile {
  display: grid !important;
  gap: 20px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "text"
    "image"
    "bio";
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
#profile .about-text  { grid-area: text !important; }
#profile .about-image { grid-area: image !important; }
#profile .about-bio   { grid-area: bio  !important; }

#profile .about-image img {
  display: block;
  width: 100%;
  height: auto;
}


/* ───────────────────────────────────────────────────────────────────
   [D] 데스크톱 전용 (≥768px) 간격/레이아웃
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* (1) PC에서 프로필 상단 여백 (히어로와 프로필 사이 보이는 간격) */
  section#profile.about {
    padding-top: 16px !important;   /* ▲ 더 넓게: 20~24px, ▼ 더 붙게: 8~12px */
    margin-top: -4px !important;    /* 미세 겹치기: -2~-6px로 조정 가능 */
  }

  /* (2) 프로필 2열 레이아웃 */
  #profile .profile {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "image text"
      "bio  bio" !important;
    align-items: start;
    gap: 24px !important;           /* ▲ 더 넓게: 28~32px, ▼ 좁게: 16~20px */
  }
}


/* ───────────────────────────────────────────────────────────────────
   [E] 히어로 자체 높이 보정 (PC 전용)
   - style.css 기본값: .hero { min-height: 60vh; }
   - 여기서 낮추면 "히어로 자체가 너무 길다"는 느낌을 줄임
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hero { min-height: 52vh !important; } /* ▲ 더 짧게: 48~52vh, ▼ 기본: 60vh */
}


/* ───────────────────────────────────────────────────────────────────
   [F] 프로필 섹션 내부 텍스트/약력 블록 안전 여백
   ─────────────────────────────────────────────────────────────────── */
#profile .about-text,
#profile .about-bio {
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
}


/* ───────────────────────────────────────────────────────────────────
   [G] 프로필 섹션 첫 요소 margin-top 누수 방지
   - h2, p 등의 margin-top이 위로 겹쳐서 "줄여도 남는 공백" 발생 방지
   ─────────────────────────────────────────────────────────────────── */
#profile .about-text > *:first-child,
#profile .about-bio  > *:first-child {
  margin-top: 0 !important;
}

/* ===================================================================
   [H] PROFILE HEADING CALLOUT (layout-neutral)
   - Target: #profile .about-text h2  (현재 "수많은 사장님들이 궁금해 합니다.")
   - 목적: 문구에 네모 박스 디자인만 추가 (레이아웃/그리드 불변)
   =================================================================== */
#profile .about-text h2{
  display: inline-block;
  border: 2px solid var(--profile-accent, #e0c551);
  border-radius: 6px;            /* 완전 각지게: 0 */
  padding: 8px 12px;             /* 박스 내부 여백 */
  line-height: 1.25;
  background: transparent;       /* 채움 원할 시 rgba(224,197,81,.10) 등으로 변경 */
  vertical-align: baseline;
  box-decoration-break: clone;   /* 줄바꿈 시 각 줄에 박스 유지(대부분 브라우저 OK) */
}

/* Hover 강조(선택) */
#profile .about-text h2:hover{
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* 모바일 미세 조정 */
@media (max-width: 767.9px){
  color: #0202cc !important;
  #profile .about-text h2{
    padding: 6px 10px;
    border-width: 2px;
  }
}

/* 옵션: 채움 스타일이 필요하면 아래 클래스 추가해서 사용
   <h2 class="is-fill">수많은 사장님...</h2>  */
#profile .about-text h2.is-fill{
  background: color-mix(in srgb, var(--profile-accent, #e0c551) 12%, transparent);
  color: #111;
}

/* ===================================================================
   [I] PROFILE TEXT OFFSET (PC only)
   - 목적: PC 버전에서 프로필 문구(#profile .about-text)만 이미지보다 조금 더 위로
   - margin-top 값은 직접 조절 가능 (-20px, -40px 등)
   =================================================================== */
@media (min-width: 768px){
  color: #0202cc !important;
  #profile .about-text{
    align-self: start;
    margin-top: -60px; /* ← 필요에 따라 조절 */
  }
}