/* ============================================================================
   apps.css — 신규 기능 페이지 전용 · 2026-09-15 4차 리뉴얼("당근형") 1단계

   쓰는 화면
     partners.php        1d 파트너 찾기
     funding.php         1e 정책자금 · 지원사업
     funding-tools.php   1f 진단 · 상환 시뮬레이터 · 지원사업 찾기 (탭 4개)
     records.php         2c 모임 기록 · 앨범
     help.php            1g 도움말
     forgot-password.php / reset-password.php   비밀번호 재설정

   원칙
     공통 부품(.btn .card .chip .empty .acc .progress .seg .search …)은 styles.css 것을 그대로 쓴다.
     여기에는 **이 화면들에만 있는 것**만 둔다. 부품을 다시 정의하지 않는다.
     ⚠️ 그림자 금지(모달·챗봇 전용) · 12px 미만 글자 금지 · 3차 토큰(--accent/--paper/--sand/--font-serif) 금지.

   불러오는 순서: styles.css → pages.css → **apps.css**.
   그래서 pages.css 의 3차 규칙(.page .empty 등)을 여기서 되돌린다(§0).
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════════
   §0. 공통 틀 — 화면 껍데기(1080 흰 판) · 머리 · 본문 · 2단
   ════════════════════════════════════════════════════════════════════════════ */

/* 헤더 아래 첫 화면까지의 간격. 푸터 쪽 여백은 styles.css 가 준다(margin-top:48). */
.ap-wrap { padding-top: 24px; }

/* 화면 머리 — 시안 1e/2c 기준 (1d 는 --flush 로 아래 선을 탭 줄에 넘긴다) */
.ap-head {
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--line-2);
}
.ap-head--flush { padding-bottom: 0; border-bottom: 0; }
.ap-head--sm    { padding: 24px 28px 18px; }            /* 2c */
.ap-head--tint  { background: var(--tint); border-bottom-color: var(--tint-line); }   /* 1g 주황 밴드 */

.ap-title { display: flex; align-items: center; gap: 9px; font: 800 var(--fs-h1) / var(--lh-tight) var(--font); letter-spacing: var(--ls-title); }
.ap-title > svg { flex: none; }
.ap-title--sm { font-size: var(--fs-h1-sm); }           /* 2c 는 24px */
.ap-lead  { margin-top: 8px; font: 400 var(--fs-md) / var(--lh-body) var(--font); color: var(--ink-2); max-width: 74ch; }
.ap-lead--sm { font-size: var(--fs-sm); }

.ap-body { padding: 22px 28px 28px; }
.ap-body--wide { padding: 28px; }                        /* 1f */

/* 본문 + 오른쪽 패널 (1d 312 · 1e 300) */
.ap-cols { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 24px; align-items: start; }
.ap-cols--300 { grid-template-columns: minmax(0, 1fr) 300px; }
.ap-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ap-main { min-width: 0; }

/* 머리 아래 탭 줄(1d) — 밑줄 탭 부품을 그대로 쓰고 위 간격만 준다 */
.ap-tabs { margin-top: 18px; }
.ap-tabs .tabs__item { text-decoration: none; }

/* 칩·드롭다운이 늘어선 줄 (1d 필터 · 1e 카테고리) */
.ap-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-filters--head { margin-top: 16px; }
.ap-filters--list { margin-bottom: 14px; }
.ap-sep { flex: none; width: 1px; height: 36px; background: var(--line-2); margin: 0 4px; }

/* "아직 안 열린 기능" 을 그 자리에서 한 줄로 알린다(버튼을 흉내 내지 않는다) */
.ap-soon { font: 600 var(--fs-meta) / 1.5 var(--font); color: var(--ink-3); }
.ap-soon--right { margin-left: auto; }

/* 안내 줄 사이 간격 */
.ap-stack { display: flex; flex-direction: column; gap: 12px; }
.ap-gap   { margin-top: 12px; }
.ap-gap-lg{ margin-top: 20px; }

/* pages.css(3차) 되돌리기 — body 에 .page 가 항상 붙어 있어 서브페이지 규칙이 여기까지 온다 */
.page .ap-wrap .empty { padding: 22px 18px; gap: 0; }
.page .ap-wrap .empty-text { max-width: none; font: 400 var(--fs-xs) / var(--lh-body) var(--font); }
.page .ap-wrap .empty > .btn { height: var(--h-btn); padding: 0 18px; margin-top: auto; }
.page .ap-wrap .pager { margin-top: 20px; }


/* ════════════════════════════════════════════════════════════════════════════
   §1. 1d 파트너 찾기
   ════════════════════════════════════════════════════════════════════════════ */

.pt-panel__head { display: flex; align-items: center; gap: 7px; font: 800 var(--fs-md) / var(--lh-tight) var(--font); }
.pt-panel__body { margin-top: 4px; }
/* 카드 안에 또 테두리를 두지 않는다(층은 선 하나로만 나눈다) */
/* 레일 패널 안의 빈 상태는 테두리를 벗는다 — 안 그러면 **상자 안에 상자**가 된다.
   ⚠️ `.page` 를 빼지 말 것. 위 73번 줄의 `.page .ap-wrap .empty { padding: 22px 18px }` 와
      **같은 점수(0,3,0)** 로 맞서서 뒤에 오는 이 규칙이 이기는 구조다.
      .page 를 떼면 점수가 낮아져 여백 싸움에서 져 버린다(2026-09-17 에 실제로 그랬다). */
.page .pt-panel__body .empty { border: 0; border-radius: 0; padding: 14px 0 0; background: none; }

/* 둘 다 빈 상태일 때만 두 카드의 **아랫변까지** 맞춘다(partners.php 가 --even 을 붙인다).
   .empty 는 버튼에 margin-top:auto 가 걸려 있어서, 카드가 늘어나면 두 버튼이
   같은 줄에 내려와 선다. 오른쪽은 카드 → 몸통 → 빈 상태까지 세로로 이어 늘려야
   버튼이 바닥까지 간다(중간에 block 이 하나라도 끼면 거기서 끊긴다). */
.ap-cols--even { align-items: stretch; }
.page .ap-cols--even > .ap-main > .empty { height: 100%; }
.page .ap-cols--even > .ap-rail > .card,
.page .ap-cols--even > .ap-rail > .card > .pt-panel__body { display: flex; flex-direction: column; flex: 1; }
.page .ap-cols--even > .ap-rail > .card > .pt-panel__body > .empty { flex: 1; }
/* 레일(312px)에 뜨는 추천 카드 — 한 줄에 하나.
   .match-grid 는 3열 고정이고(pages.css 514), 열을 줄이는 규칙은 **화면 폭** 기준
   미디어쿼리라 '넓은 화면의 좁은 칸' 을 보지 못한다. 그래서 1280 폭에서도 3열이
   그대로 걸려 카드 하나가 85px 로 찌그러졌다(글자가 세로로 한 자씩 떨어졌다).
   레일은 미리보기 자리라 AI 설명은 **세 줄에서 끊는다** — 전문은 '추천 전체 보기' 에서 본다.
   (274px 에서 다 펴면 설명만 여섯 줄이 되어 레일이 목록보다 길어진다.
    공고 카드 요약 .fd-card__sum 이 쓰는 것과 같은 방식이다.) */
.page .pt-panel__body .match-grid { grid-template-columns: minmax(0, 1fr); }

/* 카드를 세로로 쌓는 것과 키워드 한 줄 고정은 **모든 화면 공통**이라
   pages.css 의 .match-card / .match-kw 로 옮겼다(레일만의 문제가 아니었다). */

.page .pt-panel__body .match-why {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  /* 아래 여백을 0 으로 두는 게 핵심. line-clamp 는 **글자 칸**만 3줄로 줄이는데,
     넘친 네 번째 줄은 아래 여백(padding) 자리에 그려져 반쯤 보인다(잘린 글자가 남는다).
     여백이 없으면 세 번째 줄 끝에서 정확히 잘린다. */
  padding-bottom: 0;
}

.pt-panel__foot { margin-top: 12px; font: 400 var(--fs-mini) / 1.6 var(--font); color: var(--ink-3); }


/* ════════════════════════════════════════════════════════════════════════════
   §2. 1e 정책자금 · 지원사업
   ════════════════════════════════════════════════════════════════════════════ */

/* 오른쪽 검정 카드 안의 버튼 줄 */
.fd-cta__btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fd-cta__btns > .btn { --btn-h: 42px; width: 100%; }

.fd-alarm__title { font: 800 var(--fs-sm) / var(--lh-tight) var(--font); margin-bottom: 8px; }
.fd-alarm__text  { font: 400 var(--fs-xs) / 1.65 var(--font); color: var(--ink-2); }
.fd-alarm__text--on { margin-top: 8px; color: var(--ink-3); }

/* ── 정렬·필터 드롭다운 3개 ──────────────────────────────────────────────────
   시안은 알약 모양 칩(h36, 테두리 포함 38)이다. 부품 `.chip--select` 는 눌리지 않는 <span> 이라
   여기서는 **진짜 <select>** 를 같은 모양으로 입힌다(JS 가 없어도 '적용하기' 로 끝까지 동작한다). */
.fd-sel {
  width: auto; height: 36px; padding: 0 32px 0 15px;   /* 시안 실측 36. 폰에서만 44 로 키운다(맨 아래 반응형) */
  border-radius: var(--r-pill); border: 1px solid var(--line); background-color: var(--card);
  background-position: right 12px center;
  font: 600 var(--fs-md) / 1 var(--font); color: var(--ink);   /* 16px 미만이면 iOS 가 고를 때 화면을 확대한다 */
}
@media (hover: hover) { .fd-sel:hover { border-color: var(--line-hover); } }

/* 카테고리 칩은 <a> 다 — 링크 기본 색을 되돌린다 */
.ap-filters--head .chip--off { color: var(--ink-2); }
.ap-filters--head .chip--on  { color: #fff; }
@media (hover: hover) { .ap-filters--head .chip--off:hover { background: var(--fill-hover); } }

/* ── 공고 카드 ──────────────────────────────────────────────────────────── */
.fd-list  { display: flex; flex-direction: column; gap: 12px; }
.fd-count { margin-bottom: 10px; }
.fd-flash { margin-bottom: 12px; }

.fd-card {
  padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card);
  scroll-margin-top: 90px;                 /* 담기 후 되돌아왔을 때 헤더에 가리지 않게 */
}
/* 마감 임박(D-3 이내)만 주황 tint — 시안 1e 의 '펼친 첫 카드' 강조를 상태로 바꿨다 */
.fd-card--hot { border-color: var(--tint-line); background: var(--tint); }

.fd-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fd-card__agency {
  min-width: 0; font: 600 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-card__title    { margin-top: 11px; font: 800 var(--fs-h4) / 1.45 var(--font); }
.fd-card__title--sm{ font-size: var(--fs-lg); }
/* 요약 **두 줄**까지. 자동 수집 공고는 원문이 통째로 들어와 평균 284자라,
   안 묶으면 65장이 이어져 페이지가 26,000px 가 된다(2026-09-15 실측). */
.fd-card__sum      {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 7px; font: 400 var(--fs-sm) / 1.7 var(--font); color: var(--ink-2);
}

/* D- 배지 — 알약형(홈의 44×44 `.dday` 타일과 다른 자리다) */
.fd-d {
  display: inline-flex; align-items: center; flex: none;
  height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  font: 700 var(--fs-mini) / 1 var(--font); white-space: nowrap;
}
.fd-d--hot  { background: var(--danger); color: #fff; }
.fd-d--warm { background: var(--c-amber); color: var(--c-amber-fg); }
.fd-d--cool { background: var(--c-grey);  color: var(--c-grey-fg); }

/* 담기 — 시안에 자리가 없어 **카드 오른쪽 위**로 정했다(총괄 보고서 기록) */
.fd-save { margin-left: auto; flex: none; }
.fd-save__btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-2); font: 700 var(--fs-meta) / 1 var(--font); cursor: pointer;
}
/* 체크 표시는 담은 상태에서만 — 아이콘을 지웠다 다시 그리지 않으므로 JS 는 글자만 바꾼다 */
.fd-save__ck { display: none; width: 15px; height: 15px; }
.fd-save__btn.is-on .fd-save__ck { display: block; }
.fd-save__btn.is-on { border-color: var(--carrot-ink); background: var(--tint); color: var(--carrot-ink); }
.fd-save__btn[aria-busy="true"] { opacity: .7; }
.fd-save__btn--guest { margin-left: auto; }
@media (hover: hover) { .fd-save__btn:hover { border-color: var(--line-hover); } }

/* 4칸 요약 — 시안은 grid 가 아니라 flex 다(칸 폭이 내용에 따라 다르다) */
.fd-facts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.fd-card--hot .fd-facts { border-top-color: var(--tint-line); }
.fd-fact    { min-width: 0; }
.fd-fact dt { font: 600 var(--fs-meta) / 1 var(--font); color: var(--ink-3); }
.fd-fact dd { margin: 5px 0 0; font: 800 var(--fs-lg) / 1.35 var(--font); }   /* dd 기본 들여쓰기를 지운다 */

.fd-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.fd-acts .btn > svg { flex: none; }

/* 찾기 결과 카드(1f) — 목록보다 한 단계 작게 */
.fd-card--sm { padding: 16px; }
.fd-card--sm .fd-acts { margin-top: 12px; }


/* ════════════════════════════════════════════════════════════════════════════
   §3. 1f 진단 · 상환 시뮬레이터 · 지원사업 찾기
   ════════════════════════════════════════════════════════════════════════════ */

.tool-eyebrow { font: 800 var(--fs-mini) / 1 var(--font); letter-spacing: .12em; color: var(--carrot-ink); }
.tool-h1 { margin-top: 12px; font: 800 var(--fs-h1-lg) / var(--lh-tight) var(--font); letter-spacing: -.02em; }
.tool-lead { margin-top: 10px; font: 400 var(--fs-sm) / 1.8 var(--font); color: var(--ink-2); }

/* 탭 4개 — 부품 .seg 를 링크로 쓴다 */
.seg--tabs { margin-top: 20px; }
.seg--tabs .seg__item { text-decoration: none; }

/* ── 진단 · 찾기 문제 패널 ── */
.quiz { padding: 26px; margin-top: 18px; border: 1px solid var(--line-2); border-radius: var(--r-card); }
.quiz__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; align-items: start; }
.quiz__tick { display: block; width: 28px; height: 3px; border-radius: var(--r-pill); background: var(--carrot-ink); }
.quiz__q   { margin-top: 16px; font: 800 var(--fs-h1-sm) / 1.4 var(--font); letter-spacing: -.02em; }
.quiz__sub { margin-top: 10px; font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-3); }
/* 안내용(안 눌러지는) 보기가 남아 있으면 눌리는 것처럼 보이지 않게 한다.
   2단계에서 진단·찾기의 보기는 전부 <a> 가 됐으므로 이 두 줄은 거기엔 걸리지 않는다. */
.quiz div.choice { cursor: default; }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다
   (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */
@media (hover: hover) {
  .quiz div.choice:hover { border-color: var(--line-2); }
}

/* ── 지원사업 찾기 2번 문항 — 전국 + 17개 시도 칩 격자 ── */
.quiz__cols--wide { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.find-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.find-chip  { text-decoration: none; }

/* 결과 머리 — 고른 조건 3개 + 다시 고르기 */
.find-sum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.find-sum__again { margin-left: auto; }

/* ── 상환 시뮬레이터 ── */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; align-items: start; }
.calc__title { font: 800 var(--fs-h2) / var(--lh-tight) var(--font); }
.calc__sub   { margin-top: 8px; font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-3); }

.calc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.calc-f { padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.calc-f--full { grid-column: 1 / -1; margin-top: 2px; }
.calc-f__label { display: block; font: 600 var(--fs-meta) / 1 var(--font); color: var(--ink-3); }
.calc-f__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; }
.calc-f__unit { flex: none; font: 500 var(--fs-meta) / 1 var(--font); color: var(--ink-3); }

/* 값 입력칸 — 시안의 큰 숫자 자리를 그대로 입력칸으로 쓴다(테두리는 바깥 칸이 갖는다) */
.calc-f input {
  width: 100%; min-width: 0; height: auto; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  font: 800 22px / 1 var(--font); color: var(--ink);
  -moz-appearance: textfield;
}
/* 입력칸 자체는 테두리가 없으므로 **바깥 칸**이 포커스를 보여 준다(사이트 입력칸과 같은 모양). */
.calc-f input:focus { box-shadow: none; border: 0; }
.calc-f:focus-within { border-color: var(--carrot-ink); box-shadow: 0 0 0 3px rgba(201, 68, 0, .14); }
.calc-f input::-webkit-outer-spin-button,
.calc-f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.calc__period { margin-top: 12px; font: 400 var(--fs-meta) / var(--lh-body) var(--font); color: var(--ink-2); }
.calc__period b { font-weight: 700; }
.calc__src { margin-top: 10px; font: 400 var(--fs-meta) / var(--lh-body) var(--font); color: var(--ink-3); }
.calc__method { margin-top: 12px; }
.calc__method select { height: 50px; border-radius: 13px; font: 600 var(--fs-sm) / 1 var(--font); }

/* 결과 */
.calc__cap { font: 600 var(--fs-meta) / 1 var(--font); color: var(--ink-3); }
.calc__big { margin-top: 10px; font: 800 46px / 1 var(--font); letter-spacing: -.03em; color: var(--ink); }
.calc__desc { margin-top: 12px; font: 400 var(--fs-meta) / 1.8 var(--font); color: var(--ink-2); }
.calc__table { margin-top: 16px; border-top: 1px solid var(--line-2); }
.calc-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line-2);
}
.calc-row:last-child { border-bottom: 0; align-items: center; }
.calc-row__label { font: 600 var(--fs-sm) / 1.4 var(--font); color: var(--ink); }
.calc-row__sub   { display: block; margin-top: 3px; font: 400 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); }
.calc-row__val   { flex: none; font: 800 var(--fs-lg) / 1.4 var(--font); color: var(--ink); }
.calc-row--total .calc-row__label { font-weight: 800; }
.calc-row--total .calc-row__val { font-size: var(--fs-h3); color: var(--carrot-ink); }

/* ── 서비스 안내(탭1) 카드 ── */
.tool-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); margin-top: 18px; }
.tool-guide__card { display: flex; flex-direction: column; gap: 10px; }
.tool-guide__card .btn { margin-top: auto; align-self: flex-start; }


/* ════════════════════════════════════════════════════════════════════════════
   §4. 1g 도움말
   ════════════════════════════════════════════════════════════════════════════ */

.help-search { max-width: 558px; margin-top: 16px; }
.help-search > input { height: 52px; padding-left: 48px; border-radius: var(--r-tile); font-size: var(--fs-md); }

/* 주제 카드는 링크다 — a 의 기본 주황 글자색을 되돌린다 */
.help-topic { display: flex; flex-direction: column; gap: 0; color: var(--ink); }
@media (hover: hover) { .help-topic:hover { border-color: var(--line); background: var(--surface); } }
.help-topic__title { display: block; margin-top: 10px; font: 800 var(--fs-md) / var(--lh-tight) var(--font); }
.help-topic__n { display: block; margin-top: 5px; font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); }

/* 아코디언 본문은 줄바꿈을 살린다(글 본문이 여러 줄로 들어온다) */
.app .acc__a { white-space: pre-line; }

.ap-h2 { margin: 24px 0 10px; font: 800 var(--fs-h4) / var(--lh-tight) var(--font); }

.help-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px; margin-top: 20px; border-radius: var(--r-card); background: var(--carrot-ink);
}
.help-cta__title { font: 800 var(--fs-lg) / 1.4 var(--font); color: #fff; }
.help-cta__text  { margin-top: 6px; font: 400 var(--fs-xs) / 1.65 var(--font); color: var(--on-carrot); }
.help-cta .btn { flex: none; --btn-h: 44px; }

.help-article__meta { margin-top: 6px; font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); }
.help-article__body { margin-top: 14px; font: 400 var(--fs-sm) / 1.8 var(--font); color: var(--ink-2); white-space: pre-line; }
.help-list { display: flex; flex-direction: column; gap: 8px; }
.help-list__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-card);
  color: var(--ink);
}
@media (hover: hover) { .help-list__item:hover { border-color: var(--line); background: var(--surface); } }
.help-list__item > svg { flex: none; width: 16px; height: 16px; fill: var(--ink-4); }
.help-list__title { display: block; font: 600 var(--fs-md) / 1.5 var(--font); color: var(--ink); }
.help-list__item .meta { display: block; margin-top: 4px; }


/* ════════════════════════════════════════════════════════════════════════════
   §5. 2c 모임 기록 · 앨범
   ════════════════════════════════════════════════════════════════════════════ */

.rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rec-card { border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.rec-shot { height: 150px; border-radius: 0; }
.rec-shot img { width: 100%; height: 150px; object-fit: cover; }
.rec-body { padding: 14px 16px 16px; }
.rec-title { font: 800 var(--fs-lg) / 1.35 var(--font); }
.rec-meta  { margin-top: 4px; font: 400 var(--fs-meta) / 1.5 var(--font); color: var(--ink-3); }
.rec-note  {
  margin-top: 8px; font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 일정 카드 — 누르면 상세 창(records.js, 2026-10-06). 전에는 눌러도 아무 일이 없었다.
   버튼은 **제목에만** 있다(버튼 안에 제목 태그는 못 넣는다). 대신 버튼의 ::after 를 카드 크기로
   늘려서 카드 어디를 눌러도 열린다. 포커스 테두리도 그 ::after 에 그려 카드 전체를 감싼다. */
.rec-card { position: relative; }
.rec-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rec-open::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-card); }
.rec-open:focus-visible { outline: none; }
.rec-open:focus-visible::after { outline: 2px solid var(--carrot-ink); outline-offset: -2px; }
@media (hover: hover) {
  .rec-card:hover { border-color: var(--line); }
  .rec-card:hover .rec-title { text-decoration: underline; text-underline-offset: 3px; }
}

/* 섹션 구분 — 모임앨범 · 모임후기를 일정과 **따로** 떼어 보이게(2026-10-06 대표 지시).
   머리는 맨 위와 같은 .ap-head 를 그대로 쓴다(대표: "모임일정처럼 해 달라").
   여기서는 덩어리 사이에 카드 폭 전체 선 하나만 긋는다. 여백·화면 폭별 조정은 .ap-head/.ap-body 가 한다. */
.rec-sec { border-top: 1px solid var(--line-2); }

.album-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
/* margin:0 이 꼭 있어야 한다 — <figure> 는 브라우저 기본 여백(1em 40px)이 붙어 칸이 찌그러진다 */
.album-item { margin: 0; aspect-ratio: 1; border-radius: var(--r-btn); overflow: hidden; background: var(--ph-a); }
.album-item img { width: 100%; height: 100%; object-fit: cover; }
/* 사진은 누르면 크게(lightbox.js). <a> 라서 block 으로 세운다 */
.album-item { display: block; cursor: zoom-in; }
.album-item:focus-visible { outline: 2px solid var(--carrot-ink); outline-offset: 2px; }
@media (hover: hover) { .album-item:hover img { opacity: .88; } }

/* 모임 상세 창 — 껍데기는 styles.css 의 .modal. 폭만 좁힌다(업체 창 860px 는 두 칸짜리라 넓다). */
.rec-dialog { width: min(560px, 100%); }
/* 닫기 — 킷 기본(32px)은 폰에서 손가락으로 누르기 작다(모바일 규칙 44px). 이 창만 키우고,
   늘어난 만큼 오른쪽으로 당겨 글자 줄은 그대로 둔다. */
.rec-modal .modal-close { width: 44px; height: 44px; margin-right: -6px; }
.rec-dlg-body { padding: 18px 22px 22px; }
/* 대표 사진은 **자르지 않는다**(contain) — 당근 일정 사진은 글자가 든 안내 포스터가 많아 잘리면 못 읽는다.
   다 보려면 누른다 → 크게 보기. */
.rec-dlg-shot { display: block; margin-bottom: 16px; border-radius: var(--r-card); overflow: hidden; background: var(--fill); cursor: zoom-in; }
.rec-dlg-shot[hidden] { display: none; }
.rec-dlg-shot img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.rec-dl { display: grid; gap: 8px; }
.rec-dl > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.rec-dl > div[hidden] { display: none; }
.rec-dl dt { font: 700 var(--fs-xs) / 1.6 var(--font); color: var(--ink-3); }
.rec-dl dd { margin: 0; font: 400 var(--fs-sm) / 1.6 var(--font); color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.rec-dlg-note { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-input); background: var(--surface-2); font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-2); white-space: pre-line; }
.rec-dlg-note[hidden] { display: none; }
.rec-dlg-go { width: 100%; margin-top: 18px; gap: 6px; }
.album-more { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-btn); background: var(--carrot-ink); color: #fff; font: 800 var(--fs-md) / 1 var(--font); }

/* 후기는 길이가 25자부터 800자까지다. 2열 **그리드**로 두면 같은 줄의 높이를 맞추느라
   25자 후기가 743자 후기 옆에서 454px 로 늘어나 90% 가 빈 공간이 됐다(2026-09-17 실측).
   그래서 그리드가 아니라 **단(column)** 으로 쌓는다 — 벽돌처럼 채워져 빈 자리가 안 생긴다. */
.rev-grid { columns: 2; column-gap: var(--gap-card); }
.rev-grid > .card { break-inside: avoid; margin-bottom: var(--gap-card); }
.rev-author { display: block; margin-top: 8px; font: 700 var(--fs-meta) / 1 var(--font); color: var(--ink-3); }

/* 아주 긴 후기는 접는다. **JS 가 붙여 주는 클래스**라 JS 가 없으면 전문이 그대로 보인다(손실 없음). */
.rev-more { margin-top: 10px; }
.card.is-revclamp .card__text {
  display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden;
  padding-bottom: 0;   /* 넘친 줄이 아래 여백으로 새어 나오지 않게(line-clamp 의 함정) */
}


/* ════════════════════════════════════════════════════════════════════════════
   §6. 비밀번호 재설정
   ════════════════════════════════════════════════════════════════════════════ */

.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; border: 0; padding: 0; min-width: 0; }
.auth-foot { margin-top: 18px; font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-3); }
.auth-foot a { font-weight: 700; }


/* ════════════════════════════════════════════════════════════════════════════
   §7. 반응형 — 1280 · 1024 · 768 · 420
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .ap-cols, .ap-cols--300 { grid-template-columns: minmax(0, 1fr); gap: var(--gap-section); }
  .ap-head, .ap-head--sm { padding-inline: 22px; }
  .ap-body, .ap-body--wide { padding-inline: 22px; }
  .seg--tabs { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .quiz__cols, .quiz__cols--wide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fd-facts { gap: 18px; }
  .tool-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .album-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .ap-wrap { padding-top: 16px; }
  .ap-head, .ap-head--sm { padding: 20px 18px 16px; }
  .ap-body, .ap-body--wide { padding: 18px 18px 22px; }
  .ap-title { font-size: var(--fs-h1-sm); }
  .ap-title--sm { font-size: var(--fs-h4); }
  .ap-lead { font-size: var(--fs-sm); }

  /* 칩·드롭다운이 많은 머리 줄만 한 줄로 두고 가로로 민다(스크롤 체이닝은 막지 않는다) */
  /* 가로로 밀어야 보이는 줄은 두지 않는다 — 밀 수 있다는 걸 알 방법이 없다(2026-09-17 대표 지시).
     3개뿐이라 줄바꿈으로 충분하다. */
  .ap-filters--head { flex-wrap: wrap; }
  .ap-filters--head > * { flex: none; }
  /* 목록 위 필터 줄은 접히게 두고, 안내 한 줄은 아랫줄 통째로 — 가로로 밀어야 보이면 안 된다 */
  .ap-soon--right { margin-left: 0; width: 100%; }

  .quiz { padding: 18px; }
  .quiz__q { font-size: var(--fs-h4); }
  .calc__big { font-size: 34px; }
  .calc-row__val { font-size: var(--fs-md); }
  .tool-guide { grid-template-columns: minmax(0, 1fr); }

  .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rev-grid { columns: 1; }

  /* 지역 칩도 손가락으로 누르는 것이라 버튼과 같은 44 로 (부품 규칙: 768 이하에서 .btn 은 44) */
  .find-chip { height: 44px; }

  /* 공고 카드 — 가로 4칸은 좁은 폭에서 무조건 넘친다 → 2×2 */
  .fd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .fd-card__title { font-size: var(--fs-lg); }
  .find-sum__again { margin-left: 0; }

  .help-cta { flex-direction: column; align-items: flex-start; }
  .help-cta .btn { width: 100%; }
}

@media (max-width: 420px) {
  .ap-head, .ap-head--sm { padding: 18px 14px 14px; }
  .ap-body, .ap-body--wide { padding: 16px 14px 20px; }
  .calc__fields { grid-template-columns: minmax(0, 1fr); }
  .calc-f input { font-size: 20px; }
  .rec-grid { grid-template-columns: minmax(0, 1fr); }
  .rec-shot, .rec-shot img { height: 180px; }
  .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seg--tabs { grid-template-columns: minmax(0, 1fr); }

  .fd-card, .fd-card--sm { padding: 14px; }
  .fd-card__title { font-size: var(--fs-md); }
  /* 버튼 3개는 세로로 쌓는다(가로로는 안 들어간다). 높이 44 는 768 규칙이 이미 준다. */
  .fd-acts { flex-direction: column; align-items: stretch; }
  .fd-acts .btn { width: 100%; }
  .find-chips { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

/* ── 제휴·제안 접수 (partnership.php) ────────────────────────────────────────
   3차까지 홈 안에 있던 폼을 페이지로 옮긴 것. 폼 뼈대는 .auth-form 을 그대로 쓰고
   두 칸 나란히 놓기·첨부 목록·글자 수만 여기서 더한다. */
.ptn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field__count { float: right; font: 400 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); }
.ptn-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ptn-files { display: flex; flex-direction: column; gap: 8px; margin-top: -4px; }
.ptn-file-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--surface); font: 500 var(--fs-meta) / 1.4 var(--font); color: var(--ink-2);
}
.ptn-file-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptn-file-del {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent;
  font: 400 18px/1 var(--font); color: var(--ink-3); cursor: pointer;
}/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다
   (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */
@media (hover: hover) {
  .ptn-file-del:hover { background: var(--line-3); color: var(--ink); }
}
.ptn-msg:not([hidden]) { display: block; }

/* ════════════════════════════════════════════════════════════════════════════
   §7. 자주 쓰는 서식 (forms.php) — 2026-09-17
   한 줄에 하나씩, 왼쪽에 파일 종류 딱지 · 오른쪽에 받기 버튼.
   ⚠️ 여기는 아직 **틀**이다. 진짜 파일을 받고 나서 대표와 모양을 다듬는다.
   ════════════════════════════════════════════════════════════════════════════ */

.fm-list { display: flex; flex-direction: column; gap: 10px; }
.fm-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card);
}
@media (hover: hover) { .fm-item:hover { border-color: var(--line); background: var(--surface); } }

/* 파일 종류 딱지 — 한글/워드/엑셀/PDF 를 색으로 구분한다(글자도 같이 적어 색맹이어도 읽힌다) */
.fm-ext {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--r-tile);
  background: var(--fill); color: var(--ink-2);
  font: 800 var(--fs-meta) / 1 var(--font);
}
.fm-ext--hwp, .fm-ext--hwpx { background: var(--c-blue);   color: var(--c-blue-fg); }
.fm-ext--doc, .fm-ext--docx { background: var(--c-indigo); color: var(--c-indigo-fg); }
.fm-ext--xls, .fm-ext--xlsx { background: var(--c-green);  color: var(--c-green-fg); }
.fm-ext--ppt, .fm-ext--pptx { background: var(--c-amber);  color: var(--c-amber-fg); }
.fm-ext--pdf                { background: var(--c-pink);   color: var(--c-pink-fg); }

.fm-body  { min-width: 0; flex: 1; }
.fm-title { display: block; font: 800 var(--fs-md) / 1.4 var(--font); letter-spacing: var(--ls-title); word-break: keep-all; }
.fm-note  { display: block; margin-top: 4px; font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink-2); word-break: keep-all; }
.fm-meta  { display: block; margin-top: 5px; font: 500 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); }
.fm-acts  { flex: none; display: flex; gap: 6px; }
.fm-get   { flex: none; }

/* 분류 소제목 — 목록 안에 끼워 넣는 줄이라 <li> 다. 첫 줄 위에는 여백을 주지 않는다. */
.fm-group {
  margin-top: 10px; padding-left: 2px;
  font: 800 var(--fs-sm) / 1.4 var(--font); color: var(--ink-2); letter-spacing: var(--ls-title);
}
.fm-group:first-child { margin-top: 0; }

/* 「직접 작성」 안내 — 목록 맨 위 한 줄. 눌러 들어가기 전에 알려 주는 자리다. */
.fm-writertip {
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-card);
  background: var(--tint); color: var(--ink-2);
  font: 400 var(--fs-xs) / var(--lh-body) var(--font);
  word-break: keep-all; text-wrap: pretty;   /* 줄 끝에서 어절이 갈라지지 않게 */
}

.fm-foot { margin-top: 18px; font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-3); }

@media (max-width: 720px) {
  /* 폰에서도 **한 줄 유지**. 버튼을 아래로 내려 전폭으로 깔면 주황 막대가 다섯 개
     연달아 서서 목록보다 버튼이 더 눈에 띄었다(2026-09-17 실측). 자리를 좁혀도
     한 줄이 읽기 편하다. 높이 44 는 styles.css 의 폰 규칙(.btn--sm)이 이미 준다. */
  .fm-item { padding: 12px 14px; gap: 11px; }
  /* 설명이 길어져도 카드가 한없이 늘어나지 않게 끊는다. 지금 설명들(가장 긴 게 57자)은
     375px 에서 네 줄이면 다 들어간다 — 세 줄로 잡았더니 17개 중 10개가 잘렸다(실측).
     ⚠️ padding-bottom:0 이 핵심 — 없으면 넘친 다음 줄이 아래 여백에 반쯤 그려진다. */
  .fm-note {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; padding-bottom: 0;
  }
  .fm-ext  { width: 44px; height: 44px; font-size: var(--fs-mini); }
  .fm-get  { --btn-px: 12px; }
  /* 버튼이 둘이면 폰에서는 아래로 내려 전폭으로 나눈다 — 한 줄에 셋은 안 들어간다 */
  .fm-acts { flex: 1 1 100%; }
  .fm-acts > .btn { flex: 1; }
  .fm-item:has(.fm-acts .btn + .btn) { flex-wrap: wrap; }
}


/* 폰에서는 필터 드롭다운도 손가락 크기로 — 데스크톱 36 은 그대로 둔다 */
@media (max-width: 720px) {
  .fd-sel { height: 44px; }
}

@media (max-width: 720px) {
  .ptn-row { grid-template-columns: 1fr; }
}

/* ── 자격 진단 결과 (funding-tools.php?tab=check) ────────────────────────────
   왼쪽 큰 칸: 1순위 기관 + 특징 체크리스트 / 오른쪽: 차선책 + (인증 없을 때) 인증 제안 */
.quiz__back { margin-top: 18px; font: 600 var(--fs-meta) / 1.4 var(--font); }
.quiz__back a { color: var(--ink-3); }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다
   (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */
@media (hover: hover) {
  .quiz__back a:hover { color: var(--ink); }
}

.dx { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-top: 24px; align-items: start; }
.dx__main {
  padding: 26px 28px; border: 1px solid var(--tint-line); border-radius: var(--r-card); background: var(--tint);
}
.dx__cap { display: block; font: 800 var(--fs-meta) / 1 var(--font); color: var(--carrot-ink); letter-spacing: .02em; }
.dx__org { margin-top: 10px; font: 800 var(--fs-h2) / var(--lh-tight) var(--font); letter-spacing: -.02em; }
.dx__org--sm { margin-top: 6px; font-size: var(--fs-lg); }
.dx__desc { margin-top: 10px; font: 400 var(--fs-sm) / var(--lh-body) var(--font); color: var(--ink-2); }
.dx__fit { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--tint-line); }
.dx__fit li { display: flex; align-items: flex-start; gap: 8px; font: 500 var(--fs-meta) / 1.6 var(--font); color: var(--ink-2); }
.dx__fit svg { flex: none; margin-top: 2px; color: var(--carrot-ink); }
.dx__side { display: flex; flex-direction: column; gap: 12px; }
.dx__warn { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-3); font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); }
.dx__foot { margin-top: 20px; }
.dx__acts { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .dx { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .dx__main { padding: 20px; }
  .dx__acts .btn { width: 100%; }
}

/* 상환 시뮬레이터 — 값을 넣기 전 결과 자리 (funding-tools.php?tab=calc) */
.calc__empty {
  margin: 0; padding: 28px 0 8px;
  font: 500 var(--fs-sm) / var(--lh-body) var(--font); color: var(--ink-3); text-wrap: pretty;
}
.calc__empty[hidden] { display: none; }

/* ── 손가락으로 누를 수 있게 (≤720px) ──────────────────────────────────────
   시안 1j 토큰표가 "모바일 버튼 44 이상" 을 적어 뒀는데 몇 군데가 빠져 있었다
   (2026-09-15 검수 실측). 겉보기 크기는 그대로 두고 **누르는 칸만** 44 로 넓힌다 —
   아이콘 버튼은 ::after 로 투명한 칸을 덮고, 글자 링크는 padding 으로 키운다. */
@media (max-width: 720px) {
  /* 공고 '담기' — 마감 알림으로 가는 유일한 버튼인데 30px 였다 */
  .fd-save__btn { min-height: 44px; }
  /* 진단·찾기 '앞 문항으로' */
  .quiz__back a { display: inline-flex; align-items: center; min-height: 44px; }
  /* 도움말 '이 글만 따로 보기' */
  .help-acc__more { display: inline-flex; align-items: center; min-height: 44px; }
  /* 상환 시뮬레이터 입력칸 — 테두리는 바깥 칸(.calc-f)이 갖고 입력칸은 글자 높이(24px)뿐이라
     손가락으로 겨냥하기 어려웠다. 바깥 칸은 그대로 두고 **누르는 줄만** 44 로 키운다. */
  .calc-f__row { min-height: 44px; align-items: center; }
  .calc-f input { min-height: 44px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   §8. 우리구 제품·식품 홍보관 (showcase.php · showcase-apply.php, 2026-10-08)
   머리는 모임일정 화면과 같은 .ap-head 를 쓰고, 덩어리 사이 선만 여기서 긋는다.
   ════════════════════════════════════════════════════════════════════════════ */
.sc-sec { border-top: 1px solid var(--line-2); }

/* ① 모집 안내 */
.sc-recruit {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start;
  padding: 20px; border: 1px solid var(--tint-line); border-radius: var(--r-card); background: var(--tint);
}
.sc-recruit__poster { display: block; border-radius: var(--r-btn); overflow: hidden; background: var(--card); cursor: zoom-in; }
.sc-recruit__poster img { display: block; width: 100%; height: auto; }
.sc-recruit__flag { display: flex; align-items: center; gap: 8px; }
.sc-recruit__dday { font: 800 var(--fs-xs) / 1 var(--font); color: var(--carrot-ink); }
.sc-recruit__title { margin-top: 10px; font: 800 var(--fs-h2) / 1.4 var(--font); letter-spacing: var(--ls-title); word-break: keep-all; }
.sc-br { display: none; }
.sc-recruit__act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* 이름-값 목록 (모집 안내 · 제품 상세 공용) */
.sc-dl { display: grid; gap: 8px; margin-top: 14px; }
.sc-dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
.sc-dl dt { font: 700 var(--fs-xs) / 1.6 var(--font); color: var(--ink-3); }
.sc-dl dd { margin: 0; font: 400 var(--fs-sm) / 1.6 var(--font); color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.sc-dl dd b { font-weight: 800; }

/* ② 제품 목록 */
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sc-card { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; background: var(--card); color: var(--ink); }
.sc-card:focus-visible { outline: 2px solid var(--carrot-ink); outline-offset: 2px; }
@media (hover: hover) {
  .sc-card:hover { border-color: var(--line); }
  .sc-card:hover .sc-card__name { text-decoration: underline; text-underline-offset: 3px; }
}
.sc-card__shot { display: block; aspect-ratio: 4 / 3; border-radius: 0; background: var(--ph-a); }
.sc-card__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.sc-card__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-card__name { margin-top: 4px; font: 800 var(--fs-lg) / 1.35 var(--font); word-break: keep-all; }
.sc-card__company { font: 600 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); }
.sc-card__tagline {
  margin-top: 4px; font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 제품 상세 */
.sc-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 4px; }
.sc-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-gallery__main { grid-column: 1 / -1; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--fill); cursor: zoom-in; }
.sc-gallery__main img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc-gallery__thumb { display: block; aspect-ratio: 1; border-radius: var(--r-btn); overflow: hidden; background: var(--fill); cursor: zoom-in; }
.sc-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-gallery a:focus-visible { outline: 2px solid var(--carrot-ink); outline-offset: 2px; }
.sc-info__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-info__name { margin-top: 10px; font: 800 var(--fs-h2) / 1.35 var(--font); letter-spacing: var(--ls-title); word-break: keep-all; }
.sc-info__company { margin-top: 4px; font: 600 var(--fs-sm) / 1.4 var(--font); color: var(--ink-3); }
.sc-info__tagline { margin-top: 14px; font: 600 var(--fs-md) / 1.6 var(--font); color: var(--ink); word-break: keep-all; }
.sc-info__slogan { margin-top: 8px; font: 400 var(--fs-sm) / 1.6 var(--font); color: var(--carrot-ink); word-break: keep-all; }
.sc-info__act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.sc-h3 { margin-top: 28px; font: 800 var(--fs-lg) / 1.4 var(--font); }
.sc-text { margin-top: 8px; font: 400 var(--fs-sm) / 1.8 var(--font); color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.sc-text a { color: var(--carrot-ink); font-weight: 600; }

/* ③ 참여 신청 — 세 가지 길 */
.sc-ways { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.sc-way { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); color: var(--ink); }
.sc-way--main { border-color: var(--tint-line); background: var(--tint); }
.sc-way:focus-visible { outline: 2px solid var(--carrot-ink); outline-offset: 2px; }
@media (hover: hover) { .sc-way:hover { border-color: var(--carrot-ink); } }
.sc-way__tag { align-self: flex-start; padding: 3px 9px; border-radius: var(--r-pill); background: var(--carrot-ink); color: #fff; font: 700 var(--fs-mini) / 1.4 var(--font); }
.sc-way__title { font: 800 var(--fs-md) / 1.4 var(--font); }
.sc-way__desc { flex: 1; font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.sc-way__go { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; font: 700 var(--fs-xs) / 1 var(--font); color: var(--carrot-ink); }
.sc-dlrow { margin-top: 10px; }
.sc-dlrow a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 var(--fs-xs) / 1 var(--font); color: var(--carrot-ink); }
.sc-notes { margin-top: 6px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface-2); }
.sc-notes > summary { min-height: 24px; font: 700 var(--fs-xs) / 1.7 var(--font); }
.sc-notes ol { display: grid; gap: 6px; margin-top: 10px; padding-left: 20px; list-style: decimal; font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink-2); word-break: keep-all; }

/* 신청서 */
/* 신청 방법 두 칸 — 폰에서도 **나란히**. 킷(.seg)은 좁으면 세로로 쌓는데, 그러면 바로 밑의
   「입력 / 미리보기」 전환과 겹쳐 버튼 넷이 줄줄이 선다. 글자가 짧아 한 줄에 들어간다. */
.sc-seg { margin-bottom: 18px; grid-auto-flow: column !important; grid-auto-columns: 1fr !important; }
/* 회원 안내(2026-10-08 대표: 회원가입 유도) — 비회원은 가입·로그인 버튼, 회원은 '미리 채웠어요' 한 줄 */
.sc-member {
  margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--tint-line); border-radius: var(--r-tile); background: var(--tint);
  font: 400 var(--fs-xs) / 1.7 var(--font); color: var(--ink-2); word-break: keep-all;
}
.sc-member__t { font: 800 var(--fs-sm) / 1.4 var(--font); color: var(--ink); }
.sc-member__d { margin-top: 4px; }
.sc-member__d b, .sc-member--in b { color: var(--ink); font-weight: 700; }
.sc-member__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sc-intro { margin-bottom: 18px; font: 400 var(--fs-xs) / 1.7 var(--font); color: var(--ink-2); word-break: keep-all; }
.sc-intro a { color: var(--carrot-ink); font-weight: 700; }
.sc-intro a svg, .sc-dlrow a svg { flex: none; vertical-align: -3px; }
.sc-fs { min-width: 0; margin: 0 0 22px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-card); }
.sc-legend { padding: 0 6px; margin-left: -6px; font: 800 var(--fs-md) / 1.4 var(--font); }
.sc-legend__sub { margin-left: 6px; font: 400 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); }
.sc-mt { margin-top: 16px; }
.sc-mt-s { margin-top: 8px; }
.sc-prefix { display: flex; align-items: stretch; }
.sc-prefix__fixed {
  flex: none; display: flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--line); border-right: 0; border-radius: var(--r-input) 0 0 var(--r-input);
  background: var(--fill); font: 600 var(--fs-sm) / 1 var(--font); color: var(--ink-2); white-space: nowrap;
}
.sc-prefix input { min-width: 0; border-radius: 0 var(--r-input) var(--r-input) 0; }

/* 고르는 칸 — 누르는 자리 44px. 고르면 주황 테두리 */
.sc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-opt {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card);
  font: 500 var(--fs-xs) / 1.3 var(--font); color: var(--ink-2); cursor: pointer;
}
.sc-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--carrot-ink); }
.sc-opt:has(input:checked) { border-color: var(--carrot-ink); background: var(--tint); color: var(--ink); font-weight: 700; }
@media (hover: hover) { .sc-opt:hover { border-color: var(--line-hover); } }
.sc-opt--line { display: flex; align-items: flex-start; width: 100%; padding: 11px 14px; border-radius: var(--r-btn); line-height: 1.55; word-break: keep-all; }
.sc-opt--line input { margin-top: 2px; }

.sc-prod { padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--surface-2); }
.sc-prod + .sc-prod { margin-top: 12px; }
.sc-prod__head { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 10px; }
.sc-prod__no { font: 800 var(--fs-sm) / 1 var(--font); }
.sc-prod__del { min-height: 32px; }
.sc-prod-add { width: 100%; margin-top: 12px; }
.sc-more { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sc-more > summary { min-height: 32px; list-style: none; cursor: pointer; font: 700 var(--fs-xs) / 1.6 var(--font); color: var(--carrot-ink); }
.sc-more > summary::-webkit-details-marker { display: none; }
.sc-more > summary::before { content: '＋ '; }
.sc-more[open] > summary { margin-bottom: 12px; }
.sc-more[open] > summary::before { content: '－ '; }
.sc-more__sub { margin-left: 6px; font-weight: 400; color: var(--ink-3); }
/* 식품 추가 정보 — 분야를 「식품」 으로 고른 제품에만. :has 를 모르는 옛 브라우저에선 늘 보인다 */
.sc-food { margin-top: 16px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--card); }
.sc-food__head { margin-bottom: 10px; font: 700 var(--fs-xs) / 1.4 var(--font); }
.sc-food__head span { font-weight: 400; color: var(--ink-3); }
@supports selector(:has(*)) {
  .sc-food { display: none; }
  .sc-prod:has(input[value="food"]:checked) .sc-food { display: block; }
}
.sc-report { display: flex; align-items: center; gap: 8px; }
.sc-report > input { flex: 1; min-width: 0; }
.sc-form .field[hidden] { display: none; }

.sc-consent { display: grid; gap: 8px; margin: 0 0 14px; padding: 14px; border-radius: var(--r-btn); background: var(--surface-2); }
.sc-consent > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.sc-consent dt { font: 700 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); }
.sc-consent dd { margin: 0; font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink-2); word-break: keep-all; }
.sc-consent__use { margin: 16px 0 8px; font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink-2); word-break: keep-all; }
.sc-limit { margin: -6px 0 22px; font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); word-break: keep-all; overflow-wrap: anywhere; }
.sc-limit a { color: var(--carrot-ink); }
.sc-submit-msg { margin-top: 4px; padding: 12px 14px; border-radius: var(--r-btn); background: var(--surface-2); font: 600 var(--fs-xs) / 1.6 var(--font); color: var(--ink-2); word-break: keep-all; }
.sc-submit-msg.is-err { background: var(--err-tint); color: var(--danger); }
.sc-next { display: grid; gap: 6px; margin: 18px 0 0; padding-left: 20px; list-style: decimal; font: 400 var(--fs-sm) / 1.7 var(--font); color: var(--ink-2); }

/* 미리보기 — 종이·표 뼈대는 writer.css(작성기)의 것을 쓰고, **색은 원본 신청서(워드)를 따른다**
   (2026-10-08 대표: "미리보기 양식이 기존과 좀 달라졌는데 색이랑"). 워드 파일에서 뽑은 값 그대로:
     남색 띠 #1F3A68 · 띠 안 작은 글 #C9D6EA · 항목 칸 #E9EFF7 · 표 선 #8A9BB5 · ※ 안내 #6B7280 · 사진 칸 #F5F7FA
   ⚠️ 전부 .sc-paper 안에서만. 「자주 쓰는 서식」 17종은 원본이 흑백이라 손대지 않는다. */
.sc-papertip { margin-top: 10px; font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); word-break: keep-all; }
.sc-paper { -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* 인쇄해도 띠·칸 색이 남게 */
.sc-paper .sc-band { margin: 0 0 6px; padding: 14px 12px 12px; background: #1F3A68; text-align: center; }
.sc-paper .sc-band--page { margin-top: 34px; }
.sc-paper .sc-band__sub { font: 400 11px / 1.5 var(--font); color: #C9D6EA; }
.sc-paper .sc-band__title { margin: 4px 0; font: 800 22px / 1.3 var(--font); letter-spacing: 3px; color: #fff; }
.sc-paper .sc-receipt { text-align: right; font: 400 11px / 1.6 var(--font); color: #6B7280; }
.sc-paper .sc-h { margin: 16px 0 6px; font: 700 14px / 1.4 var(--font); color: #1F3A68; word-break: keep-all; }
.sc-paper .sc-h small { font-weight: 400; font-size: 11px; color: #6B7280; }
.sc-paper .sc-hint { font: 400 11px / 1.6 var(--font); color: #6B7280; }
.sc-paper .sc-hint[hidden] { display: none; }
.sc-paper .wd-tbl th, .sc-paper .wd-tbl td { border-color: #8A9BB5; }
.sc-paper .wd-tbl th { background: #E9EFF7; color: #1a1a1a; }
.sc-paper .sc-prodrows { margin-top: -1px; }   /* 위 '홍보 분야' 표와 선을 맞붙인다(원본처럼 한 덩어리로) */
.sc-paper .sc-ask { margin: 12px 0; font: 700 13px / 1.6 var(--font); word-break: keep-all; }
.sc-paper .sc-confirm-h { margin: 26px 0 4px; text-align: center; font: 800 17px / 1.4 var(--font); letter-spacing: 6px; text-indent: 6px; color: #1F3A68; }
.sc-paper .sc-to { margin: 18px 0 4px; text-align: center; font: 800 18px / 1.4 var(--font); letter-spacing: 1px; }
.sc-paper .sc-prodno { margin: 8px 0 0; font: 400 12px / 1.6 var(--font); }
.sc-paper .sc-photobox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sc-paper .sc-photobox__ph { display: grid; place-items: center; min-height: 120px; border: 1px solid #8A9BB5; background: #F5F7FA; font: 400 12px / 1.4 var(--font); color: #9CA3AF; }
.sc-paper .sc-photobox img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #8A9BB5; }
.sc-docprod { margin-top: 0; }
/* 인쇄하면 신청서 종이만 나간다(writer.css §4 가 입력칸·머리 등을 걷는다) — 홍보관에만 있는 것도 걷는다 */
@media print { .sc-seg, .sc-papertip { display: none !important; } }

@media (max-width: 1024px) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .sc-recruit { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .sc-recruit__poster { width: 150px; }
  .sc-detail { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sc-fs { padding: 14px; }
  .sc-prod { padding: 12px; }
}
@media (max-width: 420px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-br { display: inline; }
  .sc-dl > div, .sc-consent > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sc-recruit__act .btn, .sc-info__act .btn { flex: 1 1 100%; }
}