@charset "utf-8";

/**
 * 보조금 찾기 (CH-U-CO-04) — 목업에 대응 마크업이 없어 새로 만든 스타일이다(RULES 1.8 · 3.9).
 *
 * 색·높이·라운드는 목업 공통 변수와 폼 규약을 그대로 따른다 —
 * 입력 높이 48px, 버튼은 pill(radius 22px), 강조는 --color-primary.
 */

.subsidy-form {
  /*
    본문 여백은 목록 화면들과 같게 둔다 — `community.css` 의 `.notice`(32px 32px 40px) ·
    `.faq-content` · `.inquiry-content`(32px). 이 값이 없으면 제목이 좌·상으로 32px 씩
    올라붙어 LNB 제목과 어긋난다.
  */
  padding: 32px 32px 40px;
}

.subsidy-title {
  /*
    안내문이 `필수 정보` 묶음 안으로 내려가서, 제목 아래 간격을 제목이 직접 갖는다
    (예전에는 `.subsidy-desc` 의 아래 여백이 그 자리를 대신했다).
  */
  margin: 0 0 28px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

/* `필수 정보` 바로 아래에 붙는다 — 제목과 한 덩어리로 읽히게 위 간격을 두지 않는다 */
.subsidy-desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-gray);
}

/* ── 항목 묶음 ───────────────────────────────── */
.subsidy-fieldset {
  /* fieldset 기본 min-width 는 안쪽 셀렉트를 늘려 버린다 */
  min-width: 0;
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}

/*
  <legend> 는 fieldset 의 border-top **위에 얹혀** 렌더된다 — 테두리를 두면 제목 옆으로 선이
  삐져나오고 fieldset 의 padding-top 이 그대로 "제목 ↔ 첫 항목" 간격이 된다.
  그래서 테두리를 쓰지 않고 묶음 사이 여백으로만 가른다.
*/
.subsidy-legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

/*
  제목 다음이 곧 입력 항목이면 간격을 더 벌린다 — 안내 문구가 끼는 묶음과 달리 제목과
  라벨이 붙어 보인다. 예전 레이아웃(fieldset padding-top)의 간격을 되살린 값이다.
  `필수 정보` 묶음은 안내문(`.subsidy-desc`)이 사이에 들어와 이 규칙에 걸리지 않는다.
*/
.subsidy-legend + .subsidy-field {
  margin-top: 18px;
}

.subsidy-hint {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-gray);
}

/* 입력 아래에 붙는 안내는 입력과 붙여 둔다 — 다음 항목의 라벨과 헷갈리지 않게 */
.subsidy-field .subsidy-hint {
  margin: 6px 0 0;
}

/* 필수 표시 — 회원가입 라벨과 같은 색을 쓴다(page/join.css 의 .join-field-label span) */
.subsidy-legend em,
.subsidy-field > label em,
.subsidy-field-label em {
  font-style: normal;
  color: var(--color-primary);
}

/* 제목·라벨 옆 부가 설명 (`선택` · `고른 분야를 먼저…`) */
.subsidy-note {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-light);
}

/*
  필수 항목과 선택 항목을 가르는 선.
  <legend> 는 fieldset 의 border-top 위에 얹혀 렌더되므로 테두리로 그리지 않고 별도 요소로 둔다.
*/
.subsidy-divider {
  height: 0;
  margin: 0 0 26px;
  border: 0;
  border-top: 1px solid var(--color-line-regular);
}

/* ── 거주 지역 ───────────────────────────────── */
.subsidy-residence {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* 거주 지역은 안내 문구가 아래 붙어 다음 항목과의 간격을 조금 더 준다 */
.subsidy-field:has(.subsidy-residence) {
  margin-bottom: 20px;
}

.subsidy-residence-value {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  /*
    주소를 `…` 로 자르지 않는다 — 우리가 자른 글자는 펼쳐 볼 방법이 없다.
    긴 주소는 줄을 접어 다 보여 주고 칸이 같이 늘어나게 둔다(높이를 고정하지 않는다).
  */
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  /* 값이 들어온 뒤의 모습이다 — 칩과 같은 규칙(비면 흰색, 채워지면 색) */
  background: var(--color-bg-gray);
  /* 버튼이라 기본 스타일을 걷는다 — 가운데 정렬·시스템 글꼴로 돌아가지 않게 */
  font-family: inherit;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
  white-space: normal;
  word-break: keep-all;
}

.subsidy-residence-value.empty {
  background: #fff;
  color: var(--color-text-light);
}

/* ── 입력 ───────────────────────────────────── */
/*
  입력 상자 자체는 목업 공통 클래스 `form-field` 가 그린다(48px · #ddd · radius 4px) —
  회원가입 생년월일·카드사 셀렉트와 같은 방식이라 여기서 다시 정의하지 않는다(RULES 3.9).
  라벨 간격과 포커스 표시만 둔다.
*/
.subsidy-field {
  margin-bottom: 16px;
}

.subsidy-field > label,
.subsidy-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-medium);
}

.subsidy-field .form-field:focus-visible,
.subsidy-residence-value:focus-visible,
.subsidy-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── 복수 선택 칩 ───────────────────────────── */
.subsidy-chip-group {
  margin-bottom: 20px;
}

.subsidy-chip-group:last-child {
  margin-bottom: 0;
}

.subsidy-sublabel {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-medium);
}

.subsidy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subsidy-chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #ddd;
  border-radius: 19px;
  background: #fff;
  font-size: 13px;
  color: var(--color-text-medium);
  cursor: pointer;
}

.subsidy-chip.on {
  border-color: var(--color-primary);
  background: rgb(238 93 68 / 6%);
  font-weight: 500;
  color: var(--color-primary);
}

/* 체크박스는 지우지 않고 감춘다 — 키보드 포커스와 접근성 트리에 남아야 한다 */
.subsidy-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.subsidy-chip:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── 동의 ───────────────────────────────────── */
.subsidy-agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 16px 18px;
  border-radius: 4px;
  background: var(--color-bg-gray);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-medium);
  cursor: pointer;
}

.subsidy-agree input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ── 안내 문구 ──────────────────────────────── */
.subsidy-message {
  margin: 0 0 16px;
  padding: 14px 18px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: rgb(238 93 68 / 6%);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-primary);
}

/* ── 버튼 ───────────────────────────────────── */
.subsidy-actions {
  display: flex;
  gap: 10px;
}

.subsidy-btn {
  flex: 1;
  height: 56px;
  border: 1px solid #ddd;
  border-radius: 28px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-medium);
  cursor: pointer;
}

/*
  모바일에서 버튼을 누르면 파란 것이 덮이던 자리다.

  버튼 글자에 선택 금지가 걸려 있지 않아, 손가락을 조금 오래 대면 <b>롱프레스가 텍스트
  선택으로 잡혀</b> 글자 위에 선택 하이라이트(파랑)가 1~2초 남았다. PC 는 클릭이 즉시
  끝나 선택까지 가지 않아 증상이 없었다.

  기본 탭 하이라이트도 함께 끈다 — 대신 눌린 느낌은 {@code :active} 로 직접 준다.
  끄기만 하면 눌러도 아무 반응이 없어 먹통처럼 보인다.
*/
.subsidy-btn,
.subsidy-residence-value,
.subsidy-more,
.subsidy-card-toggle {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.subsidy-btn:active,
.subsidy-more:active,
.subsidy-card-toggle:active {
  /* 색을 새로 만들지 않는다 — 같은 색을 눌린 동안만 살짝 눌러 보이게 한다 */
  filter: brightness(0.94);
}

.subsidy-residence-value:active {
  border-color: var(--color-primary);
}

.subsidy-btn.primary {
  flex: 2;
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.subsidy-btn:disabled {
  border-color: var(--color-line-regular);
  background: var(--color-line-regular);
  color: var(--color-text-light);
  cursor: default;
}

/* ── 조회 결과 (CH-U-CO-04 · FP-SB-02~05) ───────── */
/*
  결과는 팝업이다. 목업 `.ui-popup-panel` 은 420px 라 목록에 좁아 폭만 넓히고,
  나머지(오버레이·헤더·닫기·포커스 가두기·본문 스크롤)는 공통 껍데기가 그대로 처리한다.

  이 값은 **모바일용**이다 — `min()` 이라 좁은 화면에서는 그대로 100% 가 된다.
  PC 는 아래 `min-width: 769px` 에서 따로 키운다.
*/
.subsidy-result-panel {
  width: min(100%, 720px);
}

/*
  PC 는 화면을 거의 채운다 — 한 카드에 5축 대조표와 brief 네 칸이 함께 들어가는데
  목록이 2,000건을 넘는 일이 흔해서, 공통 팝업 크기(폭 480px · 높이 720px)로는
  스크롤만 계속 하게 된다.

  ⚠ 모바일(≤768px)은 건드리지 않는다 — 바닥에서 올라오는 시트라 폭·높이를 화면에
    맞춰야 하고, 그 처리는 공통 `.ui-popup-panel` 이 이미 하고 있다.

  폭·높이 모두 <b>화면에서 여백을 뺀 값</b>이 먼저다. 고정값(1000)은 위를 막는 용도일
  뿐이다 — 큰 모니터에서 팝업이 끝없이 늘어나면 시선이 좌우로 너무 멀어진다.

  카드는 <b>한 줄에 하나씩</b> 쌓는다(공통 `.subsidy-cards` 의 1단 그대로). 여러 단으로
  깔면 한 화면에 더 들어오지만, 카드마다 5축 대조표와 brief 네 칸이 들어 있어 좌우로
  나란히 두면 어느 줄이 어느 혜택 것인지 눈이 흔들린다 — <b>세로로 훑는 편이 낫다.</b>
*/
@media (min-width: 769px) {
  .subsidy-result-panel {
    width: min(calc(100vw - 80px), 1000px);
    max-height: min(1000px, calc(100dvh - 48px));
  }
}

/* 팝업 본문 — 더보기로 길어지므로 여기서 스크롤한다 */
.subsidy-result {
  flex: 1;
  min-height: 0;
  padding: 4px 32px 8px;
  overflow-y: auto;
}

/*
  혜택알리미가 HTML 페이지로 응답한 경우 (PPT 규격) — 격리된 프레임을 본문에 꽉 채운다.

  ⚠ 프레임 안은 우리가 못 만진다. 저쪽 페이지가 자기 높이만큼 늘어나도 우리는 그 높이를
    읽을 수 없어(다른 오리진이라 contentDocument 가 막힌다) 자동 맞춤이 되지 않는다.
    그래서 본문 높이를 채우고 **프레임이 스스로 스크롤**하게 둔다 — 본문 스크롤을 끄지
    않으면 스크롤바가 둘로 겹쳐 보인다.
*/
.subsidy-result-html {
  display: flex;
  padding: 4px 0 0;
  overflow: hidden;
}

.subsidy-result-frame {
  flex: 1;
  min-height: 60vh;
  border: 0;
  background: #fff;
}

/*
  목록의 제목 자리를 겸한다 — 이 줄 말고 따로 제목을 두지 않는다(보조금 한 종류만 그린다).
  밑줄은 긋지 않는다 — 제목 자리라 선이 있으면 아래 카드까지 한 덩어리로 묶여 보인다.
*/
.subsidy-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: var(--color-text);
}

.subsidy-summary strong {
  font-weight: 700;
  color: var(--color-primary);
}

.subsidy-empty {
  margin: 0 0 24px;
  padding: 28px 20px;
  border: 1px solid var(--color-line-regular);
  border-radius: 4px;
  background: var(--color-bg-gray);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-medium);
  text-align: center;
}

/* ── 목록 묶음 ───────────────────────────────── */
.subsidy-group {
  margin-bottom: 28px;
}

.subsidy-cards {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── 혜택 카드 ───────────────────────────────── */
.subsidy-card {
  padding: 18px 20px;
  border: 1px solid var(--color-line-regular);
  border-radius: 6px;
  background: #fff;
}

.subsidy-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
}

/* 판정 등급 — `적합` 만 강조한다. `확인 필요` 를 같이 강조하면 구분이 사라진다 */
.subsidy-tier {
  flex: none;
  padding: 3px 8px;
  border: 1px solid var(--color-line-regular);
  border-radius: 3px;
  background: var(--color-bg-gray);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-gray);
  white-space: nowrap;
}

/* 적합 배지 — 로그인 버튼과 같은 브랜드 블루 계열로 맞춘다 */
.subsidy-tier.on {
  border-color: var(--color-primary2);
  background: var(--color-primary2-bg-pale);
  color: var(--color-action-blue-text);
}

.subsidy-card-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

.subsidy-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--color-text-gray);
}

/* 마감 임박(7일 이내)만 색을 올린다 */
.subsidy-period.near {
  font-weight: 500;
  color: var(--color-secondary-orange);
}

.subsidy-card-summary {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-medium);
}

/*
  ── brief 네 칸 — 늘 네 칸이라 카드끼리 비교가 된다 ──
  칸 높이는 고정하지 않는다. `어떻게` 에 신청 방법 전문이 들어오면 그만큼 늘어나야 한다 —
  높이를 묶으면 우리가 글자를 자르는 셈이 된다.
*/
.subsidy-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 14px;
  border: 1px solid var(--color-line-gray);
  border-radius: 4px;
  background: var(--color-line-gray);
  overflow: hidden;
}

.subsidy-brief > div {
  padding: 10px 12px;
  background: #fff;
}

.subsidy-brief dt {
  margin: 0 0 3px;
  font-size: 11px;
  color: var(--color-text-light);
}

.subsidy-brief dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  word-break: break-word;
  /*
    `어떻게` 에 들어오는 신청 방법 전문은 `

` 으로 줄을 나눈 목록이다
    ("○ 온라인 신청 / - 홈페이지 …"). 지정이 없으면 한 줄로 이어 붙어 읽을 수 없다.
  */
  white-space: pre-line;
}

/* null 은 "확인하지 못했다" 다 — "제한 없음" 과 구분해야 해서 색을 낮춘다 */
.subsidy-brief dd.unknown {
  color: var(--color-text-light);
}

.subsidy-card-toggle {
  width: 100%;
  height: 36px;
  border: 1px solid var(--color-line-regular);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-medium);
  cursor: pointer;
}

.subsidy-card-toggle:hover {
  background: var(--color-bg-gray);
}

.subsidy-card-toggle:focus-visible,
.subsidy-more:focus-visible,
.subsidy-card-links a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── 카드 상세 ───────────────────────────────── */
.subsidy-card-detail {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line-gray);
}

.subsidy-detail-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

.subsidy-card-detail .subsidy-detail-title:not(:first-child) {
  margin-top: 18px;
}

/* 판정 근거 — 항상 다섯 축이다 */
.subsidy-axes {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line-gray);
}

.subsidy-axes li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-line-gray);
  font-size: 12.5px;
  line-height: 1.5;
}

.subsidy-axis-label {
  flex: none;
  width: 92px;
  color: var(--color-text-gray);
}

.subsidy-axis-reason {
  color: var(--color-text);
}

/* 충족은 파랑, 확인 못 한 축은 낮춘다 — reason 문장은 가공하지 않고 색으로만 가른다 */
.subsidy-axes li.pass .subsidy-axis-reason {
  color: var(--color-action-blue-text);
}

.subsidy-axes li.unknown .subsidy-axis-reason {
  color: var(--color-text-light);
}

.subsidy-detail-rows {
  margin: 0;
  border-top: 1px solid var(--color-line-gray);
}

.subsidy-detail-rows > div {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-line-gray);
}

.subsidy-detail-rows dt {
  flex: none;
  width: 92px;
  font-size: 12.5px;
  color: var(--color-text-gray);
}

.subsidy-detail-rows dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text);
  word-break: break-word;
  /*
    원문이 `

` 으로 줄을 나눈 목록이다("○ 온라인 신청 / - 홈페이지 …").
    지정이 없으면 전부 한 줄로 이어 붙어 읽을 수 없다. `pre-line` 은 줄바꿈만 살리고
    들여쓰기 공백은 접어 주므로 원문 그대로 들쭉날쭉해지지 않는다.
  */
  white-space: pre-line;
}

/*
  뒷페이지를 받는 중 — 건수 자리를 비워 두지 않고 진행 중임을 적는다.
  점은 의사요소로 움직여 멈춘 화면처럼 보이지 않게 한다.
*/
.subsidy-counting {
  color: var(--color-text-gray);
  font-weight: 500;
}

.subsidy-counting::after {
  content: '';
  animation: subsidy-counting-dots 1.2s steps(4, end) infinite;
}

@keyframes subsidy-counting-dots {
  0% {
    content: '';
  }

  25% {
    content: '.';
  }

  50% {
    content: '..';
  }

  75% {
    content: '...';
  }
}

@media (prefers-reduced-motion: reduce) {
  .subsidy-counting::after {
    content: '…';
    animation: none;
  }
}

.subsidy-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

.subsidy-card-links a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--color-line-regular);
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
}

.subsidy-card-links a.primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

/* ── 더보기 ──────────────────────────────────── */
.subsidy-more {
  width: 100%;
  height: 48px;
  margin-bottom: 28px;
  border: 1px solid var(--color-line-regular);
  border-radius: 24px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-medium);
  cursor: pointer;
}

.subsidy-more:disabled {
  color: var(--color-text-light);
  cursor: default;
}

@media (max-width: 768px) {
  .subsidy-result {
    padding: 4px 20px 8px;
  }

  .subsidy-brief {
    grid-template-columns: minmax(0, 1fr);
  }

  .subsidy-axis-label,
  .subsidy-detail-rows dt {
    width: 74px;
  }

  .subsidy-card-links a {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  /*
    모바일은 목록 화면들과 같이 본문 여백을 없앤다(`.notice` · `.inquiry-content` 가 `0`).
    위 여백은 `.component-wrap` 이 준다. 아래 여백만 남기는 것은 조회 버튼이 바닥에
    붙어 보이지 않게 하기 위해서다.

    제목(`.subsidy-title`)에는 손대지 않는다 — 768px 이하에서는 `community.css` 가
    `.page-community h2` 를 숨기고 모바일 헤더가 대신 제목을 단다.
  */
  .subsidy-form {
    padding: 0 0 40px;
  }

  /* 글자 크기는 다른 입력(`text-label3` 14px)과 같게 두고 건드리지 않는다 */
  .subsidy-residence-value {
    min-height: 44px;
    padding: 11px 14px;
  }

  .subsidy-btn {
    height: 50px;
    font-size: 15px;
  }
}