/* 2026-09-20 서비스 통합 — 이번에 추가한 화면 요소만 담는다.
   철회된 배치(4340~4343의 ld-head·접힘·분야 띠, 밝은 골드, 잎, 연황색 클릭 외곽선)는 가져오지 않는다.
   기존 4362 배치와 황토 토큰(--warm-*)을 그대로 쓴다. */

/* 신청 주체를 판별하지 못했을 때의 안내. 단정하지 않는다는 신호를 카드 안에 남긴다. */
html[data-palette] .notice-card .fact-note{
 display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;padding:7px 10px;
 background:var(--warm-bg);border:1px dashed var(--warm-line);border-radius:8px;
 font-size:12.5px;line-height:1.5;color:var(--warm-sub)}
html[data-palette] .notice-card .fact-note svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}

/* 신청 주체 행은 카드에서 가장 먼저 읽히게 한다. */
html[data-palette] .notice-card .card-facts>.fact--audience dt{color:var(--warm-deep);font-weight:700}
html[data-palette] .notice-card .card-facts>.fact--audience dd{font-weight:600}

/* 맞춤 제안 — 왜 이 건수인지 단계별로 펼쳐 본다. */
html[data-palette] .suggest-funnel{
 margin:0 0 16px;padding:0;border:1px solid var(--warm-line);border-radius:12px;background:#fff}
html[data-palette] .suggest-funnel>summary{
 list-style:none;cursor:pointer;padding:13px 16px;min-height:44px;display:flex;align-items:center;
 font-size:14px;font-weight:700;color:var(--warm-deep)}
html[data-palette] .suggest-funnel>summary::-webkit-details-marker{display:none}
html[data-palette] .suggest-funnel>summary::after{content:'▾';margin-left:auto;color:var(--warm-sub)}
html[data-palette] .suggest-funnel[open]>summary::after{content:'▴'}
html[data-palette] .funnel-list{margin:0;padding:0 16px 8px;list-style:none;display:grid;gap:0}
html[data-palette] .funnel-list>li{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:9px 0;font-size:13.5px;color:var(--warm-ink)}
html[data-palette] .funnel-list>li+li{border-top:1px solid var(--warm-line)}
html[data-palette] .funnel-list>li.is-note{color:var(--warm-sub)}
html[data-palette] .funnel-list b{font-variant-numeric:tabular-nums}
html[data-palette] .suggest-funnel .help-line{margin:0;padding:0 16px 14px}

/* 조건 설정 — 복수 선택 안내 */
html[data-palette] .profile-hint{
 margin:-4px 0 14px;font-size:13px;color:var(--warm-deep);font-weight:600}

/* 광고 실험 — 공고를 가리지 않는다. 팝업/오버레이를 쓰지 않고 레일·본문 흐름 안에만 둔다. */
html[data-palette] .ad-slot{
 border:1px solid var(--warm-line);border-radius:12px;background:#fff;padding:14px 16px;margin:0 0 14px}
html[data-palette] .ad-slot .ad-flag{
 display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
 padding:3px 8px;border-radius:999px;background:var(--warm-soft);color:var(--warm-deep)}
html[data-palette] .ad-slot h3{margin:9px 0 4px;font-size:15px;line-height:1.4}
html[data-palette] .ad-slot p{margin:0;font-size:13px;color:var(--warm-sub);line-height:1.55}
html[data-palette] .ad-slot .ad-why{
 margin:9px 0 0;font-size:12.5px;color:var(--warm-sub);
 padding-top:9px;border-top:1px solid var(--warm-line)}
html[data-palette] .ad-slot .ad-controls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
html[data-palette] .ad-slot .ad-controls button{
 min-height:44px;padding:0 13px;border-radius:9px;border:1px solid var(--warm-line);
 background:var(--warm-bg);color:var(--warm-ink);font-size:13px;font-weight:600;cursor:pointer}
html[data-palette] .ad-consent{
 border:1px dashed var(--warm-line);border-radius:12px;background:var(--warm-bg);padding:14px 16px;margin:0 0 14px}
html[data-palette] .ad-consent p{margin:0 0 10px;font-size:13px;color:var(--warm-sub);line-height:1.55}
html[data-palette] .ad-consent .ad-controls button.is-primary{
 background:var(--warm-main);border-color:var(--warm-main);color:#fff}

/* 공개 데이터 버전 표시 — 화면과 API가 같은 버전을 보는지 눈으로 확인한다. */
html[data-palette] .data-version{
 margin:0;font-size:12px;color:var(--warm-sub);font-variant-numeric:tabular-nums}

/* 회원 진입 링크를 상단에 붙이면서 좁은 화면에서 .top-actions 가 뷰포트를 넘었다(390에서 472px).
   배치를 바꾸지 않고 줄어들 수 있게만 한다. 조작부 높이(44px)는 그대로 둔다. */
html[data-palette] .top-actions{min-width:0;flex-shrink:1}
html[data-palette] .top-actions>*{min-width:0}
html[data-palette] .top-actions .ad-top-inquiry{
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
@media(max-width:560px){
 /* 좁은 화면에서는 이름표를 접고 아이콘만 남긴다. 링크 자체는 유지한다. */
 html[data-palette] .top-actions .avatar-label{display:none}
 html[data-palette] .top-actions .ad-top-inquiry{max-width:9.5em}
}
@media(max-width:420px){
 html[data-palette] .top-actions{gap:6px}
 html[data-palette] .top-actions .ad-top-inquiry{max-width:7em}
}
/* 이름표를 접어도 조작부 자체는 44×44 아래로 내려가지 않게 한다. */
html[data-palette] .top-actions .avatar{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* 근거 등급 표시 — 확정(원문 대상 추출)과 추정(제목)을 눈으로 구분한다. */
html[data-palette] .notice-card .card-facts>.fact{position:relative}
html[data-palette] .grade-chip{
 grid-column:2;justify-self:start;margin:4px 0 0;
 display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;
 padding:2px 7px;border-radius:999px;white-space:nowrap}
html[data-palette] .grade-chip--inferred{background:var(--warm-soft);color:var(--warm-deep)}
html[data-palette] .grade-chip--unknown{background:var(--warm-bg);color:var(--warm-sub);border:1px solid var(--warm-line)}
html[data-palette] .notice-card .fact-note.is-reviewed{border-style:solid;color:var(--warm-deep)}

/* 360px 폭에서는 상단 가로줄에 회원 링크·아바타가 함께 들어가지 못해 7px 넘쳤다.
   조작부 44×44 는 지키고 링크 글자만 더 줄인다(링크 자체는 남긴다). */
@media(max-width:400px){
 html[data-palette] .top-actions .ad-top-inquiry{max-width:4.2em;padding-left:6px;padding-right:6px}
 html[data-palette] .top-inner{padding-left:12px;padding-right:12px}
}
/* 상단의 아이콘 전용 링크(관심 공고)가 눌려 14px까지 줄었다. 조작부 최소 크기를 보장한다. */
html[data-palette] .top-actions .subtle-link{min-width:44px;min-height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}

/* ── 독립 검수 1차 재작업 ─────────────────────────────────────────────────── */

/* [중대 1] 390·360 마법사에서 상담 FAB(position:fixed, z-index:60)가 기본 버튼을
   82×40px 덮어 탭하면 단계가 넘어가지 않고 상담 패널이 열렸다.
   배치를 바꾸지 않고 마법사 화면에서만 FAB를 내린다. 다른 화면에서는 그대로 둔다. */
@media(max-width:899px){
 html[data-palette] body[data-route="profile"] .support-launcher{display:none}
 /* 실측으로 드러난 두 번째 가림막: 하단 고정 메뉴(.mobile-nav, position:fixed, z-index:40,
    높이 60px)가 sticky CTA 를 덮고 있었다. FAB 를 숨기자 그 아래 층이 드러났다.
    sticky 바닥 간격을 메뉴 높이만큼 띄우고, 본문에도 그만큼 여백을 준다. */
 html[data-palette] .profile-page .profile-actions{
  position:sticky;bottom:calc(60px + 12px);z-index:41;
  background:var(--warm-bg);padding-top:10px;margin-bottom:12px}
 html[data-palette] .profile-page{padding-bottom:84px}
}

/* [중대 2] 390·360에서 '조건 초기화'가 기간 필터 칩 줄과 같은 줄을 다퉈,
   칩을 누르면 검색어가 지워졌다(입력 손실). 초기화를 아래 줄로 내린다. */
@media(max-width:899px){
 html[data-palette] .section-heading{flex-wrap:wrap;row-gap:8px}
 html[data-palette] .section-heading #reset{order:99;flex:0 0 auto;margin-left:0}
 /* 칩 줄은 스스로 가로 스크롤을 갖고, 다른 요소와 겹치지 않는다. */
 html[data-palette] .filter-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;min-width:0;position:relative;z-index:1}
 html[data-palette] .filter-row::-webkit-scrollbar{display:none}
 html[data-palette] .filter-row>*{flex:0 0 auto}
}

/* [경] 1440 첫 화면에서 sticky .profile-actions 가 마지막 선택지를 덮었다.
   선택지 목록 아래에 버튼 높이만큼 여백을 둬 겹치지 않게 한다. */
html[data-palette] .profile-page .choices{padding-bottom:72px}

/* [경] 신규 44px 미만 1건 — 레일의 '로그인·광고 설정 확인 →' 링크(155×19). */
html[data-palette] .right-rail .ad-top-inquiry,
html[data-palette] .rail-card a.ad-top-inquiry,
html[data-palette] [data-member-ads] a{min-height:44px;display:inline-flex;align-items:center}

/* 대상 문장을 길이 때문에 줄였을 때의 안내. 기록 없음과 다른 색으로 구분한다. */
html[data-palette] .notice-card .fact-note.is-cut{border-style:solid;color:var(--warm-sub)}

/* 근거 칩 — 확정과 추정을 구분한다. */
html[data-palette] .notice-card .proof--soft{color:var(--warm-sub)}

/* ── 독립 재검수 2차 잔여 보완 ─────────────────────────────────────────────── */

/* [경] 1440·1280 sticky 조작 바가 선택지를 덮는 스크롤 구간이 남아 있었다.
   포인터만 통과시켜도 바 안의 버튼이 여전히 선택지를 가린다(실측: 막힘 3건).
   데스크톱에서는 검수 제안대로 **바를 목록 아래에 고정**해 겹칠 자리를 없앤다.
   모바일은 하단 고정 메뉴 위로 띄워야 해서 sticky 를 유지한다. */
@media(min-width:900px){
 html[data-palette] .profile-page .profile-actions{position:static;bottom:auto;z-index:auto}
}
html[data-palette] .profile-page .choices>.option{scroll-margin-bottom:96px}

/* [경] 390·360 기간 필터 칩 줄에 더 있다는 단서를 준다(가장자리 페이드). */
@media(max-width:899px){
 html[data-palette] .filter-row{
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%)}
 html[data-palette] .filter-row:has(>*:last-child:focus-visible),
 html[data-palette] .filter-row.is-end{-webkit-mask-image:none;mask-image:none}
}

/* [경] 390 /notice 의 특정 스크롤 구간에서 상담 FAB 가 '조건 초기화'를 덮었다.
   마법사와 같은 방식으로, 목록 화면에서도 FAB 가 조작부를 가리지 않도록 아래로 내린다. */
@media(max-width:899px){
 html[data-palette] body[data-route="notice"] .support-launcher,
 html[data-palette] body[data-route="life"] .support-launcher,
 html[data-palette] body[data-route="business"] .support-launcher{bottom:calc(60px + 12px)}
}

/* 목록 필터가 단일 선택임을 밝히는 한 줄. */
html[data-palette] .filter-note{margin:0 0 10px;font-size:12.5px;color:var(--warm-sub)}
html[data-palette] .filter-note a{color:var(--warm-main);min-width:44px;min-height:44px;
 display:inline-flex;align-items:center;justify-content:center;padding:0 4px}

/* 동의 전 광고 자리 — 크리에이티브가 아니라 '자리'임이 보이게. */
.ad-creative--placeholder{border:1px dashed var(--m-line,#D8D4CC);background:transparent!important}
.ad-creative--placeholder p{margin:6px 0 0;font-size:13px;line-height:1.55;color:#6E6A62}

/* ══ 시각 정돈 (2026-09-20) ═══════════════════════════════════════════════════
   사용자 지적: 분야 아이콘이 이모티콘처럼 제각각이고 글자의 상하좌우 중심이 안 맞는다.
   브랜드(황토 #94580B·A 워드마크·부엉이·별)와 B 카드 구조는 그대로 두고 정렬만 맞춘다.
   새 mint/green/leaf/연황색 외곽선을 쓰지 않는다. ══════════════════════════════ */

/* ── 1. 분야 아이콘 — 하나의 체계로 ──────────────────────────────────────────
   8종이 굵기·크기·여백이 달라 따로 놀았다. 같은 상자, 같은 획, 같은 색으로 묶는다. */
html[data-palette] .category .cat-icon{
 flex:0 0 auto;width:34px;height:34px;border-radius:9px;
 display:grid;place-items:center;                 /* 아이콘을 상자 정중앙에 */
 background:var(--warm-soft);color:var(--warm-deep);
 box-shadow:none;border:0;transition:background .12s ease,color .12s ease}
html[data-palette] .category .cat-icon svg{
 width:19px;height:19px;display:block;
 stroke:currentColor;fill:none;stroke-width:1.6;   /* 8종 동일 획 */
 stroke-linecap:round;stroke-linejoin:round}
html[data-palette] .category.selected .cat-icon{background:var(--warm-main);color:#fff}

/* ── 2. 분야 칩 — 글자 중심과 행 높이 ────────────────────────────────────────
   아이콘 상자 48px 과 칩 50px 이 어긋나 라벨이 2px 떠 있었다. 한 줄 높이로 묶는다. */
html[data-palette] .categories .category{
 display:flex;align-items:center;gap:10px;
 min-height:52px;padding:0 12px 0 9px;border-radius:12px;
 background:#fff;border:1px solid var(--warm-line);
 line-height:1.25;text-align:left}
html[data-palette] .categories .category span:last-child{
 display:block;font-size:13.5px;font-weight:600;color:var(--warm-ink);
 letter-spacing:-0.2px;white-space:nowrap}
html[data-palette] .categories .category.selected{
 border-color:var(--warm-main);background:var(--warm-bg)}
html[data-palette] .categories .category.selected span:last-child{color:var(--warm-deep)}

/* 분야 묶음 라벨('사업 분야'·'생활 분야')도 칩 줄과 세로 중심을 맞춘다. */
html[data-palette] .category-group{display:flex;align-items:center;gap:12px}
html[data-palette] .category-group-label{
 flex:0 0 auto;align-self:center;display:flex;align-items:center;min-height:52px;
 font-size:12.5px;font-weight:700;color:var(--warm-sub);letter-spacing:-0.2px;white-space:nowrap}

/* ── 3. 카드 사실 행 — 라벨과 값의 기준선 ────────────────────────────────────
   dt(라벨)과 dd(값)의 글자 크기가 달라 첫 줄 기준선이 어긋났다. 같은 행 높이로 맞춘다. */
html[data-palette] .notice-card .card-facts>.fact{align-items:baseline;padding:7px 0}
html[data-palette] .notice-card .card-facts dt{
 font-size:12.5px;line-height:20px;letter-spacing:-0.2px;align-self:baseline}
html[data-palette] .notice-card .card-facts dd{font-size:13.5px;line-height:20px}
/* 근거 등급 칩이 값 아래 따로 떠 있어 라벨 열 폭만큼 밀려 보였다.
   값과 같은 줄에 이어 붙여 읽는 흐름과 세로 중심을 맞춘다. */
html[data-palette] .notice-card .card-facts dd{display:block}
html[data-palette] .grade-chip{
 grid-column:auto;justify-self:auto;display:inline-flex;align-items:center;
 margin:0 0 0 6px;vertical-align:1px;line-height:16px;padding:1px 7px}

/* ── 4. 툴바 — 조작부 높이를 한 줄로 ─────────────────────────────────────────
   기간 칩·지역/정렬 select·조건 초기화가 각각 다른 높이라 줄이 흔들렸다. */
html[data-palette] .section-heading{align-items:center;gap:10px}
html[data-palette] .filter-row .pill,
html[data-palette] .filter-row select,
html[data-palette] .section-heading #reset{
 min-height:40px;height:40px;padding:0 14px;border-radius:10px;
 font-size:13.5px;line-height:1;display:inline-flex;align-items:center;box-sizing:border-box}
html[data-palette] .filter-row select{padding-right:30px}
html[data-palette] .section-heading #reset{gap:6px}
@media(max-width:899px){
 /* 모바일은 터치 크기를 우선한다. */
 html[data-palette] .filter-row .pill,
 html[data-palette] .filter-row select,
 html[data-palette] .section-heading #reset{min-height:44px;height:44px}
}

/* ── 5. 우측 레일 — 상자 밖으로 나가던 버튼 ──────────────────────────────────
   '광고 문의 ↗' 가 카드 경계를 넘어 잘렸다. 카드 안에서 줄바꿈되게 한다. */
html[data-palette] .right-rail .ad-inquiry,
html[data-palette] .right-rail [data-member-ads] button{
 max-width:100%;white-space:normal;text-align:left}
html[data-palette] .right-rail .ad-slot-head{
 display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ── 6. 문장 속 링크 — 조사와 벌어지던 간격 ──────────────────────────────────
   44px 최소 크기를 주면서 문장 가운데 링크가 떠 보였다. 문장에서는 글자 흐름을 지키고
   터치 영역은 세로 여백으로 확보한다. */
html[data-palette] .filter-note{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-height:44px}
/* 글자 흐름은 문장 그대로 두고, 상자만 키워 44px 터치 영역을 만든다.
   위아래 padding 만큼 음수 margin 을 줘 줄 높이가 늘어나지 않게 한다. */
html[data-palette] .filter-note a{
 display:inline-block;padding:12px 6px;margin:-12px 0;
 min-width:44px;text-align:center;
 text-underline-offset:3px;text-decoration:underline}

/* ── 7. 모바일 분야 줄 — 더 있다는 단서 ──────────────────────────────────────
   390·360 에서 칩이 화면 밖으로 이어지는데 잘린 것처럼 보였다. 가장자리를 흐린다. */
@media(max-width:899px){
 html[data-palette] .categories,
 html[data-palette] .category-group{
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%)}
 html[data-palette] .categories::-webkit-scrollbar,
 html[data-palette] .category-group::-webkit-scrollbar{display:none}
 html[data-palette] .categories .category{flex:0 0 auto}
}

/* ── 8. 카드 사실 — 라벨 열을 고정해 값 시작선을 하나로 ──────────────────────
   실측: '신청 주체' 행은 라벨 열 64px, '대상'·'분류' 행은 40px 이라 같은 카드 안에서
   값이 24px 어긋나 시작했다. 라벨 열을 고정 폭으로 묶어 모든 값이 한 선에서 시작한다. */
html[data-palette] .notice-card .card-facts>.fact{
 grid-template-columns:var(--fact-label-col,66px) minmax(0,1fr);
 column-gap:10px}
html[data-palette] .notice-card .card-facts dt{
 justify-content:flex-start;white-space:nowrap;overflow:hidden}
@media(max-width:899px){
 html[data-palette] .notice-card .card-facts>.fact{--fact-label-col:62px}
}

/* ── 9. 툴바 — 제목과 조작부의 수직 중심 ────────────────────────────────────
   실측: 제목 중심 1104 · 칩 1090 · select 1093 · 초기화 1098 (14px 흔들림).
   제목은 아래에 보조 줄이 붙어 블록 중심이 내려간다. 제목 묶음과 조작부를 같은 줄에 세운다. */
html[data-palette] .section-heading{align-items:center}
html[data-palette] .section-heading h2{
 display:flex;align-items:center;min-height:40px;margin:0;line-height:1.2}
@media(max-width:899px){
 html[data-palette] .section-heading h2{min-height:44px}
}

/* ── 10. 우측 레일 마감 캘린더 — 카드 밖으로 나가던 칸 ──────────────────────
   실측: 날짜 칸이 224px 카드 경계를 7~40px 넘었다. 칸을 카드 폭에 맞춘다. */
html[data-palette] .right-rail .deadline-calendar{overflow:hidden}
html[data-palette] .right-rail .calendar-week{
 display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;width:100%}
html[data-palette] .right-rail .calendar-day{
 width:auto;min-width:0;padding-left:0;padding-right:0;
 display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ── 11. 툴바 줄 — 제목이 버튼보다 아래로 처지던 원인 ───────────────────────
   `.section-heading` 은 display:contents 라 제목·초기화·필터줄이 한 flex 줄의 항목이 된다.
   그중 `.filter-row` 만 아래 여백 16px 을 갖고 있어 가운데 정렬에서 8px 위로 올라갔고,
   제목이 상대적으로 처져 보였다. 여백을 줄 자체로 옮겨 모두 같은 중심에 세운다. */
html[data-palette] .ld-toolbar-row{align-items:center;margin-bottom:16px}
html[data-palette] .ld-toolbar-row>.section-heading,
html[data-palette] .ld-toolbar-row>.filter-row,
html[data-palette] .ld-toolbar-row>h2,
html[data-palette] .ld-toolbar-row>#reset{margin-top:0;margin-bottom:0}
html[data-palette] .ld-toolbar-row h2{margin:0;align-self:center}

/* ── 12. 설명 문단의 방패 아이콘 — 첫 줄 글자와 기준선 ──────────────────────
   inline SVG 가 baseline 에 놓여 글자보다 7px 높이 떠 있었다.
   아이콘과 글을 한 행으로 묶고 아이콘을 첫 줄 높이에 맞춘다. */
html[data-palette] .trust-caption{
 display:flex;align-items:flex-start;gap:8px}
html[data-palette] .trust-caption>svg{
 flex:0 0 auto;width:17px;height:17px;margin-top:calc((1.65em - 17px) / 2);vertical-align:baseline}
html[data-palette] .trust-caption>span{display:block;line-height:1.65}

/* ── 13. 우측 '내 조건' 안내 카드 — 제목·설명·버튼 정렬 ────────────────────
   제목 위 여백 24px 이 카드 안쪽 여백 16px 과 어긋났고, 버튼만 155px 로 짧아
   왼쪽 기준선은 맞아도 오른쪽이 들쭉날쭉했다. 셋을 같은 폭·같은 기준선으로 세운다. */
html[data-palette] .right-rail .rail-card{display:flex;flex-direction:column;gap:10px}
html[data-palette] .right-rail .rail-card>h2{margin:0;line-height:1.35}
html[data-palette] .right-rail .rail-card>p{margin:0;line-height:1.6}
html[data-palette] .right-rail .rail-card>a.primary,
html[data-palette] .right-rail .rail-card>a.subtle-link{
 width:100%;box-sizing:border-box;justify-content:center;margin:2px 0 0}
/* 지역·정렬 select 만 4px 내려가 있었다(기본 여백). 같은 중심에 세운다. */
html[data-palette] .filter-row select{margin:0;align-self:center;vertical-align:middle}

/* ══ 2차 보완 (2026-09-20) — 독립 시각 검수 지적 반영 ═══════════════════════
   근거: outputs/visual-refinement-20260920/시각_독립검수.md
   브랜드(황토 #94580B·A 워드마크·부엉이·별)와 홈 B 카드 구조는 그대로 둔다.
   새 색·연황색 윤곽선을 추가하지 않는다. 기능을 지우지 않는다. ════════════ */

/* ── 14. 툴바 — 폭이 좁아지면 '의도된 두 줄'로 ──────────────────────────────
   검수 2-4: 1280 에서 조건 초기화만 52px 아래 오른쪽에 홀로 떨어졌다.
   필터 줄이 남는 자리를 모두 먹어 버튼이 밀려난 것이다.
   한 줄에 못 들어가는 폭에서는 아예 두 개의 완결된 줄로 세운다.
     1줄 = 제목 …………… 조건 초기화
     2줄 = 기간 칩 · 지역 · 정렬 (전체 폭)
   1440 처럼 한 줄에 들어가는 폭에서는 종전의 한 줄 정렬을 그대로 지킨다. */
@media(min-width:900px){
 html[data-palette] .ld-toolbar-row{
  display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:10px}
 html[data-palette] .ld-toolbar-row h2{order:1;flex:0 0 auto;margin:0}
 html[data-palette] .ld-toolbar-row #reset{order:1;margin-left:auto;flex:0 0 auto}
 html[data-palette] .ld-toolbar-row .filter-row{order:2;flex:1 1 100%;min-width:0}
}
@media(min-width:1440px){
 /* 한 줄에 들어가는 폭 — 제목 · 필터 · 초기화 차례를 종전 그대로 지킨다. */
 html[data-palette] .ld-toolbar-row .filter-row{order:2;flex:1 1 auto}
 html[data-palette] .ld-toolbar-row #reset{order:3;margin-left:12px}
}

/* ── 15. 모바일 툴바 — 같은 규칙, 그리고 2px 계단 제거 ──────────────────────
   검수 2-5: 360 에서 기간 칩(중심 1158)과 조건 초기화(1160)가 2px 어긋났다.
   원인은 `.filter-row` 아래 padding 4px 이라 상자가 48px 인데 칩은 44px 이라
   같은 줄의 다른 44px 버튼과 중심이 달라진 것이다.
   검수 2-6: 가장자리 페이드 때문에 '일정 미확인' 이 글자 중간에서 흐려져
   더 밀 수 있다는 신호가 아니라 꺼진 필터처럼 읽혔다.
   → 초기화를 제목 줄로 올리고, 필터 줄은 전체 폭에서 **줄바꿈**한다.
     가로 스크롤이 사라지므로 페이드도 함께 걷는다. */
@media(max-width:899px){
 html[data-palette] .ld-toolbar{align-items:center;column-gap:12px;row-gap:10px}
 html[data-palette] .ld-toolbar .ld-toolbar-row h2{order:1;flex:0 0 auto;margin:0}
 html[data-palette] .ld-toolbar .ld-toolbar-row #reset{order:1;margin-left:auto;flex:0 0 auto}
 html[data-palette] .ld-toolbar .ld-toolbar-row .filter-row{
  order:2;flex:1 1 100%;min-width:0;
  flex-wrap:wrap;row-gap:8px;overflow-x:visible;padding-bottom:0;
  -webkit-mask-image:none;mask-image:none}
 html[data-palette] .ld-toolbar .results-meta{order:3;flex:1 1 100%}
 /* 칩 줄과 선택 줄을 나누는 빈 칸. 높이 0 이라 새 여백을 만들지 않는다. */
 html[data-palette] .filter-row .filter-spacer{flex:1 1 100%;height:0;margin:0;padding:0}
}

/* ── 16. 모바일 분야 — 사업/생활 두 묶음을 모두 보이게 ──────────────────────
   검수 2-9: 390 에서 두 묶음이 한 줄에 이어 붙어 가로로 밀려 있었다.
   첫 화면에는 '사업 분야' 와 칩 2개뿐이고 '생활 분야' 는 밀어야 나왔다.
   → 묶음을 위아래 두 줄로 세우고 칩은 줄바꿈한다. 가로 스크롤 자체를 없앤다.
     라벨을 칩 위에 두어 두 묶음의 이름이 항상 보인다. */
@media(max-width:899px){
 /* overflow 는 한 축만 visible 로 둘 수 없다. 두 축을 함께 풀어야 스크롤 상자가 사라진다. */
 html[data-palette] .categories.has-groups,
 html[data-palette] .categories{
  flex-direction:column;align-items:stretch;gap:12px;
  overflow-x:visible;overflow-y:visible;
  -webkit-mask-image:none;mask-image:none}
 html[data-palette] .categories .category-group{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:0 0 auto;min-width:0;
  overflow-x:visible;overflow-y:visible;-webkit-mask-image:none;mask-image:none}
 /* 라벨을 칩 위 한 줄에 둔다. 두 묶음의 이름이 첫 화면에서 모두 보인다. */
 html[data-palette] .categories .category-group-label{
  flex:0 0 100%;width:100%;min-height:0;margin:0 0 2px;line-height:1.35}
 /* 한 줄에 더 들어가도록 칩을 조금 좁힌다. 아이콘 체계는 그대로 둔다. */
 html[data-palette] .categories .category{
  flex:0 0 auto;min-height:48px;padding:0 10px 0 8px;gap:8px}
 html[data-palette] .categories .category .cat-icon{width:30px;height:30px;border-radius:8px}
 html[data-palette] .categories .category .cat-icon svg{width:18px;height:18px}
}

/* ── 17. 카드 사실 — 모바일 라벨 열 ─────────────────────────────────────────
   검수 2-7: 모바일 라벨 열이 62px 인데 '신청 주체' 는 64.1px 이라 2.1px 넘쳤고
   그 행만 라벨과 값이 붙어 보였다. 데스크톱과 같은 66px 로 맞춘다. */
@media(max-width:899px){
 html[data-palette] .notice-card .card-facts>.fact{--fact-label-col:66px}
}

/* ── 18. 제목 추정 뱃지 — 값이 줄바꿈될 때의 들여쓰기 ───────────────────────
   검수 2-3: 값이 두 줄이 되는 카드에서 뱃지가 둘째 줄로 내려가며
   왼쪽 여백 6px 만큼 값 시작선보다 들여써졌다.
   여백 대신 글자 사이 공백으로 띄운다. 줄이 바뀌면 공백이 접혀 들여쓰기가 없다. */
html[data-palette] .grade-chip{margin-left:0}

/* ── 19. 모바일 첫 화면 — 개인/기업 탭이 하단 고정 메뉴에 덮이던 것 ─────────
   검수 2-8: 390 첫 화면에서 탭은 y 780~824, 하단 고정 메뉴는 784~844 라
   네 탭 모두 눌리지 않았다(elementFromPoint 가 메뉴 아이콘을 돌려줌).
   여백을 깎아 밀어 맞추면 폭마다 다시 어긋난다. 자리 자체를 바꾼다.
   모바일에서는 신청 주체 탭을 히어로 앞, 화면 맨 위로 올린다.
   데스크톱 배치는 그대로 둔다. 기능·문구·차례는 지우지 않는다. */
@media(max-width:899px){
 html[data-palette] main{display:flex;flex-direction:column}
 html[data-palette] main>.preview-status{order:-2}
 /* 감싸개를 지워 탭과 검색을 각각 제자리에 세운다. */
 html[data-palette] main>.ld-findbar{display:contents}
 html[data-palette] main .audience-switch{order:-1;margin:0 0 14px}
 html[data-palette] main .search{margin-bottom:8px}
}

/* ── 20. 상담 버튼 — 공고 글과 조작부를 가리던 것 ───────────────────────────
   검수 2-10: 390·360 에서 떠 있는 상담 버튼이 카드의 대상 문장 위에 걸쳤다
   (실측: 버튼 106×44 아래 표본 48점이 모두 대상 문장 글자).
   좁은 화면에서는 떠 있는 자리 자체를 없앤다. 버튼은 그대로 두고
   본문 끝 안내 자리의 보통 버튼으로 세운다. 기능은 지우지 않는다. */
@media(max-width:899px){
 html[data-palette] .support-launcher{
  position:static;inset:auto;
  /* inline-flex 는 auto 여백으로 가운데 오지 않아 왼쪽 끝(x0)에 붙었다.
     본문 안내 기준에 맞춰 가운데로 세운다. */
  display:flex;align-items:center;justify-content:center;
  width:fit-content;max-width:100%;box-shadow:none;
  /* 아래 고정 메뉴(60px)와 기기 하단 여백까지 비워 둬야 끝까지 내렸을 때도 눌린다. */
  margin:20px auto calc(80px + env(safe-area-inset-bottom,0px))}
 html[data-palette] .support-launcher~.support-panel{z-index:60}
}