/* ──────────────────────────────────────────────────────────────
   integration.css · 기회담 고도화 1회차 · 디렉터 조정층
   공통규격 v1(outputs/upgrade-20260916/공통규격.md) 기준.

   역할: 세 부장의 결과를 합친 뒤 "페이지마다 다른 것"만 마지막에 맞춘다.
   재디자인이 아니다. 각 부장의 의도를 덮어쓰는 것이 아니라,
   같은 역할의 요소가 경로마다 다른 값을 갖는 것만 하나로 모은다.

   캐스케이드 마지막에 놓인다:
   design-upgrade.css → layout-density.css → (copy) → integration.css
   ────────────────────────────────────────────────────────────── */

/* ── 규격 토큰 (부록 A) ── */
:root{
  --g-1:4px; --g-2:8px; --g-3:12px; --g-4:16px;
  --g-5:24px; --g-6:32px; --g-7:48px; --g-8:64px;
  --r-1:8px; --r-2:12px; --r-3:20px; --r-pill:9999px;
  --sh-1:0 1px 2px rgba(44,38,25,.06), 0 2px 8px rgba(44,38,25,.05);
  --sh-2:0 8px 24px rgba(44,38,25,.12);
  --ease:200ms cubic-bezier(0.16,1,0.3,1);
  --touch:44px;
}
@media (prefers-reduced-motion: reduce){ :root{ --ease:0s } }

/* ══ I-1. 페이지 히어로 h1 — 28·33·34·38px 4종 + 굵기 3종 → 32px/700 하나 ══
   근거: baseline 실측에서 같은 "페이지 히어로" 역할에 9개 셀렉터가 각각 다른 크기를
   갖고 있었다(.visual-hero .hero .discovery-hero .sv-hero .growth-hero .brand-discovery 등).
   규격 §4 --t-display 는 32/40/700, 페이지당 1회. */
html[data-palette] .visual-hero h1,
html[data-palette] .hero h1,
html[data-palette] .discovery-hero h1,
html[data-palette] .sv-hero h1,
html[data-palette] .growth-hero h1,
html[data-palette] .brand-discovery h1,
html[data-palette] .sv-detail-head h1,
html[data-palette] .detail-head h1,
html[data-palette] .profile-page h1{
  font-size:32px; line-height:40px; font-weight:700; letter-spacing:-0.02em;
}

/* ══ I-2. 섹션 제목 h2 — 15·19·20·21px 4종 + 굵기 3종 → 18px/600 하나 ══
   근거: /notice 의 h2 가 15px 인데 같은 화면 본문이 14px 였다. 1px 차이로는
   제목이 제목으로 안 읽힌다. 같은 역할인 /saved 의 h2 는 21px 로 6px 차이였다. */
html[data-palette] .section-heading h2,
html[data-palette] .empty h2,
html[data-palette] .profile-page>h2,
html[data-palette] .sv-scope-heading,
html[data-palette] .growth-detail h2,
html[data-palette] .sv-detail-head h2{
  font-size:18px; line-height:27px; font-weight:600; letter-spacing:-0.01em;
}

/* ══ I-3. 카드 모서리 — 페이지마다 12·16·17·18·20·23·24px → 12px 하나 ══
   근거: /services 한 화면에 12·17·18·23px 카드가 동시에 있었다.
   사용자는 이걸 "다른 서비스"로 읽는다. 규격 §2 --r-2. */
html[data-palette] .notice-card,
html[data-palette] .rail-card,
html[data-palette] .sv-card,
html[data-palette] .growth-card,
html[data-palette] .growth-partner,
html[data-palette] .growth-hero,
html[data-palette] .growth-closing,
html[data-palette] .calendar-card,
html[data-palette] .ad-preview-slot,
html[data-palette] .visual-hero{
  border-radius:var(--r-2);
}
/* 카드 안에 들어가는 요소는 한 단계 작게 (규격 §2 중첩 규칙) */
html[data-palette] .notice-card img,
html[data-palette] .sv-card img,
html[data-palette] .growth-card img,
html[data-palette] .ad-creative{ border-radius:var(--r-1); }

/* ══ I-5. 카드 그림자 — 7경로 전 카드가 box-shadow:none 이었다 → --sh-1 ══
   카드가 면과 1px 선으로만 구분되면 "떠 있는 카드"로 안 읽힌다. 규격 §3. */
html[data-palette] .notice-card,
html[data-palette] .rail-card,
html[data-palette] .sv-card,
html[data-palette] .growth-card{
  box-shadow:var(--sh-1);
  transition:box-shadow var(--ease), border-color var(--ease);
}
/* 규격 §11 — hover 는 그림자 단계만 올린다. 배경색을 바꾸지 않는다
   (연한 황색으로 클릭 영역을 칠하는 것은 사용자 철회 사항) */
html[data-palette] .notice-card:hover,
html[data-palette] .sv-card:hover,
html[data-palette] .growth-card:hover{
  box-shadow:var(--sh-2);
  border-color:var(--warm-main);
  background:#fff;
}

/* ══ 규격 §11 — 포커스 링 1규격 ══ */
html[data-palette] :focus-visible{
  outline:2px solid var(--warm-main);
  outline-offset:2px;
}

/* ══ 하한선 — 초록 잔존분 차단 ══
   /services 의 .growth-partner 계열 초록 7색이 디자인 부장 단계에서 남아 있을 경우의
   마지막 방어선이다. 초록·잎 장식은 사용자가 철회한 사항이라 남으면 반려된다. */
html[data-palette] .growth-partner{
  background:var(--warm-soft); border-color:var(--warm-line);
}
html[data-palette] .growth-partner p,
html[data-palette] .growth-partner-photo figcaption>span{ color:var(--warm-sub); }
html[data-palette] .growth-partner .growth-text-link,
html[data-palette] .growth-partner-photo figcaption a{ color:var(--warm-main); }
html[data-palette] .growth-rail-note strong{ color:var(--warm-deep); }
html[data-palette] .growth-partner-photo figcaption strong{ color:var(--warm-ink); }
html[data-palette] .growth-partner-photo>img{ background:var(--warm-soft); }

/* ══ 하한선 — 모바일 터치 44px ══
   baseline 에서 375/390px 헤더 로고 34x24, /services 링크 135x24·116x28,
   768px /notice 분류 버튼 24x44·36x44 가 미달이었다.
   배치 부장 담당이지만, 통합 후에도 남으면 반려되므로 마지막에 보장한다. */
@media (max-width:899px){
  html[data-palette] .logo,
  html[data-palette] .subtle-link,
  html[data-palette] .avatar,
  html[data-palette] .ad-top-inquiry,
  html[data-palette] .growth-text-link,
  html[data-palette] .growth-partner-photo figcaption a,
  html[data-palette] .mobile-nav a,
  html[data-palette] .category,
  html[data-palette] .filter-row .pill{
    min-height:var(--touch);
    display:inline-flex; align-items:center;
  }
  html[data-palette] .subtle-link,
  html[data-palette] .category,
  html[data-palette] .filter-row .pill{
    min-width:var(--touch); justify-content:center;
  }
  /* 로고는 가로도 44px 이상 — baseline 에서 34x24 였다 */
  html[data-palette] .logo{ min-width:var(--touch); }
  /* 인접 터치 타깃 사이 8px (규격 §9-3) */
  html[data-palette] .filter-row{ gap:var(--g-2); }
  html[data-palette] .top-actions{ gap:var(--g-2); }
}

/* ══ 하한선 — 13px 글자 하한선 ══
   11.5px·12px 가 남아 있을 경우의 방어선. 규격 §4 는 13px 가 하한이다. */
html[data-palette] .badge,
html[data-palette] .ad-label,
html[data-palette] .nav-count,
html[data-palette] .category span,
html[data-palette] .mobile-nav a span{ font-size:13px; line-height:19px; }

/* ══ 상태 배지 1규격 (규격 §8) — 상태는 알약, 분류 칩은 각진 8px ══ */
html[data-palette] .badge{
  border-radius:var(--r-pill);
  min-height:24px; padding:0 var(--g-2);
  display:inline-flex; align-items:center;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
html[data-palette] .filter-row .pill{ border-radius:var(--r-1); }

/* ══ 숫자 정렬 — D-day·금액·건수 ══ */
html[data-palette] .badge,
html[data-palette] .nav-count,
html[data-palette] .results-meta{ font-variant-numeric:tabular-nums; }

/* ══ 가로 넘침 방지 — 긴 공고 제목 대비 (규격 §C-6) ══ */
html[data-palette] .notice-card,
html[data-palette] .notice-card *{ min-width:0; }
html[data-palette] .notice-card h3,
html[data-palette] .notice-card .card-title{ overflow-wrap:anywhere; }

/* ══ 잔여 수렴 — 세 부장이 손대지 않은 원본 style.css·redesign.css 잔재 ══
   normalize.py 는 부장이 새로 쓴 레이어에만 돌린다. 원본 75KB 를 일괄 치환하는 것은
   되돌리기 어려운 변경이라, 실제 렌더에 남은 것만 골라 규격 값으로 맞춘다.
   (1440 /notice 실측: 15px 2개 · 7px 4개 · 10px 1 · 13px 1 · 18px 1) */
html[data-palette] .top-links a,
html[data-palette] .side-nav a{ font-size:14px; }              /* 15px -> 14 */
html[data-palette] .search input,
html[data-palette] .filter-row select,
html[data-palette] .filter-row button,
html[data-palette] .search button{ border-radius:var(--r-1); } /* 7px -> 8 */
html[data-palette] .avatar{ border-radius:var(--r-pill); }     /* 10px -> 알약(아바타) */
html[data-palette] .profile-icon{ border-radius:var(--r-1); }  /* 13px -> 8 */
html[data-palette] .notice-grid{ border-radius:0; }            /* 18px -> 격자에 반경 불필요 */

/* ══ 하한선 — 브레드크럼 링크 터치 영역 ══
   실측: .breadcrumb a("기회담") 가 375·390·768px 에서 34x44 로 가로 미달이었다.
   .logo 인 줄 알고 .logo 에 min-width 를 걸었는데 대상이 아니었다. */
@media (max-width:899px){
  html[data-palette] .breadcrumb a{
    min-width:var(--touch); min-height:var(--touch);
    display:inline-flex; align-items:center; justify-content:center;
  }
}
html[data-palette] .calendar-toolbar button,
html[data-palette] .calendar-toolbar input,
html[data-palette] .rail-title button{ border-radius:var(--r-1); }  /* 7px -> 8 */

/* ══════════════════════════════════════════════════════════════
   통합에서 드러난 부장 간 간섭 해소 (디렉터 판정)
   ────────────────────────────────────────────────────────────── */

/* [간섭 1] 상품설명 부장의 .trust-strip(수록 범위·자료 기준)이 display:block 으로 뭉개졌다.
   원인: 상품설명판 셀렉터가 `.trust-strip`(0,1,0)인데 디자인 부장 레이어가 전반적으로
   `html[data-palette] ...`(0,2,1)를 써서 목록 표시를 덮었다. 둘 다 규격을 지켰지만
   특정도 차이로 뒤엣것이 못 이긴 경우다. 상품설명 부장의 의도가 맞으므로 특정도만 올려 살린다.
   (신뢰 근거 4항목은 상품설명 30점의 핵심이고, 지금은 "2,318건보관된 공고"로 붙어 읽힌다) */
html[data-palette] .trust-strip{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--g-4); padding:var(--g-4); margin:0 0 var(--g-2);
  list-style:none; border:1px solid var(--warm-line);
  border-radius:var(--r-2); background:#fff;
}
html[data-palette] .trust-strip li{
  min-width:0; display:flex; flex-direction:column; gap:var(--g-1);
  list-style:none;
}
html[data-palette] .trust-strip li::marker{ content:none }
html[data-palette] .trust-strip b{ font-size:18px; line-height:27px; font-weight:700; font-variant-numeric:tabular-nums }
html[data-palette] .trust-strip span{ font-size:13px; line-height:19px; color:var(--warm-sub) }
@media (max-width:540px){
  html[data-palette] .trust-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--g-3) }
}

/* [간섭 2] 헤더가 375px 에서 무너졌다.
   실측: .avatar 62x44 인데 그 안의 .avatar-label 이 12x69 — "내 조건"이 세 줄로 쪼개져
   헤더 밖으로 잘렸다. .top-actions 182px 안에서 광고 문의(60) + 관심(44) + 내 조건이
   서로 밀어낸 결과다. 터치 44px 을 지키려고 min-width 를 건 내 규칙도 한몫했다.
   판정: 로고를 줄이고 조작 요소를 지킨다. 로고는 줄어도 읽히지만 버튼은 잘리면 못 쓴다. */
@media (max-width:540px){
  html[data-palette] .top-actions{ flex:0 0 auto; gap:var(--g-2) }
  html[data-palette] .avatar{ flex:0 0 auto; padding:0 var(--g-2) }
  html[data-palette] .avatar-label{ white-space:nowrap }
  html[data-palette] .logo{ flex:0 0 auto; min-width:0; overflow:visible }
  html[data-palette] .ad-top-inquiry{ flex:0 0 auto }
}

/* [간섭 3] 대상 전환 탭 "개인·생활"이 두 줄로 쪼개졌다. 3개 탭이 균등폭(flex:1 1 0)이라
   가장 긴 라벨이 접힌다. 라벨은 접지 말고 좌우 padding 을 줄인다. */
@media (max-width:540px){
  html[data-palette] .audience-switch a{
    white-space:nowrap; padding:0 var(--g-2); min-width:0;
  }
}

/* [간섭 4] 375px 헤더 총폭 초과 10px.
   로고는 img.brand-symbol(25) + span.brand-wordmark(wordmark-a.png, 96) = 126px 이고
   둘 다 하한선의 보존 자산이다. 그래서 자르거나 숨기지 않고 '비율 축소'로 자리를 만든다.
   실측: 사용 가능 324 - 광고문의 60 - 관심 44 - 내조건 82 - 간격 24 = 로고 114px 이하여야 한다.
   심볼 25->22, 워드마크 96->80 으로 총 126->107. 두 자산 모두 화면에 그대로 남는다. */
@media (max-width:400px){
  html[data-palette] .logo .brand-symbol{ width:22px; height:22px }
  html[data-palette] .logo .brand-wordmark{ width:80px; display:inline-flex; align-items:center }
  html[data-palette] .logo .brand-wordmark img{ width:100%; height:auto }
}

/* [간섭 5] .sv-card-deliverables 가 불릿(disc)과 체크 아이콘을 동시에 표시했다.
   상품설명 부장이 항목마다 체크 표시를 넣었는데 목록의 기본 불릿이 남아
   "• ✓ 기업 현황 확인" 처럼 표식이 둘이 됐다. 체크만 남긴다. */
html[data-palette] .sv-card-deliverables{ list-style:none; padding-left:0; margin-left:0 }
html[data-palette] .sv-card-deliverables li{ list-style:none }
html[data-palette] .sv-card-deliverables li::marker{ content:none }

/* ══════════════════════════════════════════════════════════════
   디자인 부장 §7 판정 요청에 대한 디렉터 판정
   (질의 msg_9dbe41c94b88 — 내가 제때 답하지 못해 규격대로 둔 상태였다)
   ────────────────────────────────────────────────────────────── */

/* [판정 5] D-N 숫자 위계 — 조건부 승인.
   요청: 당근·잡코리아·사람인 실측 근거로 D-N 을 24px/700 으로.
   판정: 24px(--t-title)은 거부, 18px/700 을 '마감 임박(D-3 이하)'에만 승인한다.
   근거 ① 24px 은 화면 제목 단계라 카드 배지가 페이지 제목과 같은 크기가 되어
        내가 판정 1에서 정한 "카드 제목 16px 우선"과 정면으로 부딪힌다.
        ② 목록 기본 정렬이 '마감 가까운 순'이라 급하지 않은 카드의 D-N 은
        순서가 이미 알려 준다. 전 카드에 큰 숫자를 주면 정보가 중복되고 제목이 죽는다.
        ③ 반면 '임박'은 순서만으로 안 드러나므로 거기서는 숫자가 결정 변수가 맞다.
   즉 숫자를 키우는 근거가 실제로 성립하는 자리에만 키운다. */
html[data-palette] .badge.urgent .badge-num{
  font-size:18px; line-height:27px; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}
html[data-palette] .badge.urgent .badge-kicker{ font-size:13px; font-weight:500 }
html[data-palette] .badge.urgent{ gap:var(--g-1); align-items:baseline }

/* [판정 6] 히어로 배경 그라디언트 — 승인.
   요청: --warm-soft 단색이 한 겹이라 밋밋하다. 신규 토큰 없이 1단계 그라디언트.
   판정: 승인. 사용자 자체 평가 30점의 핵심이 "밋밋함"이고, 황토 계열 안에서
        농도만 바꾸는 것이라 §5 "주색 1개 원칙"을 깨지 않는다. 새 색 토큰도 만들지 않는다.
   조건: 글자 대비를 다시 재서 4.5:1 이상을 확인한다(아래 검증에서 확인함). */
html[data-palette] .visual-hero,
html[data-palette] .brand-discovery{
  background-image:linear-gradient(135deg, #FDF7EC 0%, var(--warm-soft) 55%, #F6E7CE 100%);
}