/* Public application pages (DESIGN-MOCKUP-20261022, theme A tokens from style.css).
   Keep editor, operations and profile styles scoped out. */
/* v5(2026-10-22): 공개 화면은 흰 바탕·검은 표제(Hahmlet)·가는 선. 상자·색 테두리·장식 막대는 쓰지 않는다. */
body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) {
  --recruit-paper: #FFFFFF;
  --recruit-ink: var(--isa-ink);
  --recruit-accent: var(--isa-ink);
  --isa-field-border: #7A838A; /* 입력 테두리: 흰 바탕 대비 3.9:1, 주색은 버튼·링크에만 */
  background: var(--recruit-paper);
}
html:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) { background: #FFFFFF; }
body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) header {
  background: #FFFFFF;
  padding-block: 14px;
}
body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) nav a.active {
  color: var(--isa-ink);
  background: transparent;
  box-shadow: inset 0 -2px var(--isa-ink);
}
body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) footer { border-top-color: var(--isa-ink); }
body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) .brand { color: var(--isa-ink); }
body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) #app button:not(.forms-primary):not(.primary) { border-radius: 2px; border-color: var(--isa-ink); background: transparent; color: var(--isa-ink); font-weight: 600; }
body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) #app button:not(.forms-primary):not(.primary):disabled { border-color: var(--isa-line); color: var(--isa-muted); }
/* 내 신청·완료 화면의 제목도 공개 화면 표제 체계(검정, Hahmlet) */
body:has(.forms-receipt, .forms-mine-list) #app h1,
body:has(.forms-receipt, .forms-mine-list) #app .forms-mine-list h2:not(.forms-receipt *),
body:has(.forms-receipt, .forms-mine-list) #app .forms-legacy-list h2:not(.forms-receipt *) { color: var(--isa-ink); font-family: var(--isa-font-display); font-weight: 500; letter-spacing: -.01em; }
body:has(.forms-receipt, .forms-mine-list) #app h1 { font-size: 2.25rem; }
body:has(.forms-receipt, .forms-mine-list) #app :is(.forms-mine-list, .forms-legacy-list) h2:not(.forms-receipt *) { font-size: 1.375rem; margin: 36px 0 12px; }
#app .forms-receipt h2 { color: var(--isa-muted); font-size: .9375rem; font-weight: 600; margin: 0 0 20px; } /* 폼 제목은 보조, "신청완료" h3가 주(C-3: 아래 20px) */
#app .forms-receipt p:first-of-type { color: var(--isa-muted); }
body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) main { margin-top: 32px; }
body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) main > .notice { margin-bottom: 44px; }

/* ===== C-3 신청 화면(2026-11-03, 디자인_혁신 C3_신청화면_상세_20261102 §2~§6·§8) =====
   흰 바탕 위 흰 카드(선 1px) · 폼 색 머리띠 · 질문 카드 · 진행 막대. 색은 PR #37 토큰(--isa-accent-*·--isa-btn-*)만 쓰고, 새 값은 사양이 적은
   입력 테두리 #6F7C85와 표지 캡션 띠 rgba(20, 26, 31, .57) 둘이다(띠는 사양 .55에서 올림: DPR 2–3에서 흰 12px 캡션 4.5:1, A11Y-C3-1). form에도 applyFormTheme이 붙으므로(DOM ①) 그 6px 윗선·글꼴은 여기서 지운다
   (inline border-top-color는 테두리가 없어 보이지 않고, 글꼴은 지금처럼 질문 묶음에만).
   두 안(사용자 미확정): data-respond-layout = one(기본, 한 열 760px) | two(두 열 유지), data-respond-cover = photo(기본 사진) | band(색 띠만).
   respondent-hero.js가 미리보기에서만 쿼리 respond-layout·respond-cover를 읽고, 수집 모드는 기본값만 붙인다. 390은 두 안이 같다(DOM 순서대로). */
#app #forms-respondent { display: block; max-width: 760px; margin: 0 auto; padding: 0; border: 0; font-family: inherit; }
/* header 요소라 사이트 머리(style.css·forms.css의 header{display:flex;…})가 걸리므로 블록으로 되돌린다 */
#app #forms-respondent > .forms-hero { display: block; position: static; min-height: 0; margin: 0 0 16px; padding: 0; background: var(--isa-surface); border: 1px solid var(--isa-line); border-radius: var(--isa-radius-md); overflow: hidden; }
/* 표지(§2): 3:1, 카드 안쪽 위 모서리만 둥글게. 포스터는 4:5여도 3:1로 잘리므로 위쪽(20%)을 남긴다. 색 띠 안은 포스터가 없을 때 높이 0. */
#app #forms-respondent .forms-cover { position: relative; margin: 0; aspect-ratio: 3 / 1; overflow: hidden; border-radius: var(--isa-radius-md) var(--isa-radius-md) 0 0; background: var(--isa-accent-50); }
#app #forms-respondent .forms-cover .forms-media { height: 100%; margin: 0; }
#app #forms-respondent .forms-cover img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; }
/* 포스터 표지(사용자 확정 2026-11-05, review_PR41 §8): 포스터가 있을 때만 2:1에 위쪽을 보인다(4:5 포스터의 위 40%). 사진·색 띠 표지는 3:1 그대로. */
#app #forms-respondent .forms-cover[data-cover=poster] { aspect-ratio: 2 / 1; }
#app #forms-respondent .forms-cover[data-cover=poster] img { object-position: center top; }
#app #forms-respondent .forms-cover figcaption { position: absolute; left: 12px; bottom: 10px; max-width: calc(100% - 24px); margin: 0; padding: 3px 8px; border-radius: 4px; background: rgba(20, 26, 31, .57); color: var(--isa-on-primary); font-size: 12px; line-height: 1.4; }
#app #forms-respondent[data-respond-cover=band] .forms-cover:not([data-cover=poster]) { aspect-ratio: auto; height: 0; }
/* 머리띠(§3): 표지 바로 아래 안쪽 묶음의 윗선. 옐로는 700이 갈색이라 500(#FFD83D). */
#app #forms-respondent .forms-hero-in { padding: 22px 24px 24px; border-top: 10px solid var(--isa-accent-700); }
#app #forms-respondent[data-form-accent=yellow] .forms-hero-in { border-top-color: var(--isa-accent-500); }
#app #forms-respondent .forms-hero-in > h1 { margin: 0 0 10px; padding: 0; border: 0; color: var(--isa-ink); font-family: var(--isa-font-display); font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; white-space: pre-line; overflow-wrap: anywhere; text-wrap: balance; }
#app #forms-respondent .forms-hero-in > h1 + p { margin: 0 0 14px; color: var(--isa-muted); font-size: 16px; line-height: 1.6; white-space: pre-line; }
#app #forms-respondent .forms-hero-in > h1 + p:empty { display: none; }
/* 링크 안내·프로필 안내(V21) 자리: 13px, 왼쪽 3px 500 선 */
#app #forms-respondent .forms-hero-in > .forms-link-notice { margin: 0 0 10px; padding: 0 0 0 10px; border: 0; border-left: 3px solid var(--isa-accent-500); border-radius: 0; background: transparent; color: var(--isa-muted); font-size: 13px; line-height: 1.6; }
#app #forms-respondent .forms-hero-in > .forms-period { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--isa-ink); font-size: 14px; font-weight: 600; line-height: 1.6; }
#app #forms-respondent .forms-hero-in > :last-child { margin-bottom: 0; }
/* 진행 막대(§4): 막대 채움 폭은 JS가 --p(퍼센트 숫자)로 준다. 옐로도 채움은 700(#7A5C00). */
#app #forms-respondent > .forms-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 0; color: var(--isa-muted); font-size: 13px; line-height: 1.5; white-space: normal; }
#app #forms-respondent > .forms-progress[hidden] { display: none; }
#app #forms-respondent > .forms-progress b { color: var(--isa-ink); font-weight: 700; }
#app #forms-respondent > .forms-progress > .bar { flex: 1; min-width: 48px; height: 8px; border-radius: 4px; background: var(--isa-accent-100); overflow: hidden; }
#app #forms-respondent > .forms-progress > .bar > i { display: block; width: calc(var(--p, 0) * 1%); height: 100%; background: var(--isa-accent-700); }
/* 여러 섹션 폼(리뷰 S2 → 사용자 확정 2026-11-05, review_PR41 §7): 진행 막대는 위의 하나만 보이고, section-flow의 섹션 위치 막대(<progress>)는 화면 밖(.isa-form-sr-only와 같은 처리)에 두어
   "섹션 n / N" 글자만 남긴다. 채움 색(accent-700)은 보조기술·고대비에서 읽히는 값이라 그대로 둔다. */
#app #forms-respondent > .forms-question-fields .forms-section-progress progress { accent-color: var(--isa-accent-700); position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 고대비(리뷰 A11Y-C3-3): 바탕·채움이 모두 Canvas가 되어 막대가 사라지므로 틀은 CanvasText 선, 채움은 Highlight(style.css 고대비 규칙과 같은 방식). */
@media (forced-colors: active) {
  #app #forms-respondent > .forms-progress > .bar { border: 1px solid CanvasText; }
  #app #forms-respondent > .forms-progress > .bar > i { forced-color-adjust: none; background: Highlight; }
}
/* 초안 패널(C-4 후속, 사용자 확정 2026-11-05, review_PR41 §6): details.forms-draft-fold > summary + section#forms-draft-panel. 접힌 상태가 기본이라 첫 질문이 바로 보이고,
   summary(36px·13px, 390은 44px)는 "작성 중인 답변 · 상태"(respondent-draft-panel.js가 갱신). 확인이 필요한 상태(충돌·불확실·제출 결과 미확정)는 JS가 열고 글자를 검정으로. 두 열 안에서는 이 details가 왼쪽 열. */
#app #forms-respondent > .forms-draft-fold { margin: 0 0 16px; padding: 0; border: 1px solid var(--isa-line); border-radius: var(--isa-radius-md); background: var(--isa-surface); font-size: .875rem; line-height: 1.7; }
#app #forms-respondent > .forms-draft-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; color: var(--isa-muted); font-size: 13px; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
#app #forms-respondent > .forms-draft-fold > summary::-webkit-details-marker { display: none; }
#app #forms-respondent > .forms-draft-fold > summary::before { content: "▸" / ""; }
#app #forms-respondent > .forms-draft-fold[open] > summary::before { content: "▾" / ""; }
#app #forms-respondent > .forms-draft-fold[open] > summary { border-bottom: 1px solid var(--isa-line); }
#app #forms-respondent > .forms-draft-fold > summary:focus-visible { outline: 3px solid var(--isa-ink); outline-offset: -3px; border-radius: var(--isa-radius-md); }
#app #forms-respondent > .forms-draft-fold[data-draft-state=attention] > summary { color: var(--isa-ink); }
/* 리뷰 반영(2026-11-05): 접힌 초안 패널의 '확인 필요' 알림 줄(respondent.js p[data-draft-fold-live], role=status)은 화면 밖 글자(.isa-form-sr-only와 같은 처리) */
#app #forms-respondent > [data-draft-fold-live] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#app #forms-respondent > .forms-draft-fold > .forms-draft-panel { margin: 0; padding: 12px 18px 14px; border: 0; border-radius: 0; background: transparent; }
#app #forms-respondent > .forms-draft-fold button { min-height: 44px; }
/* 비로그인 작성 시간 패널(리뷰 F1): 신청 화면에서는 진행 막대 뒤·초안 패널 앞(respondent.js가 옮김), 접수증 화면에서는 카드 위. 초안 패널과 같은 흰 카드.
   접수증 화면의 가로 여백은 아래 640 열 규칙이 정하므로 여기서는 위아래 여백만 준다. */
#app :is(#forms-respondent, .isa-forms:has(> .forms-receipt)) > [data-anonymous-session] { margin-block: 0 16px; padding: 14px 18px; border: 1px solid var(--isa-line); border-radius: var(--isa-radius-md); background: var(--isa-surface); font-size: .875rem; line-height: 1.7; }
#app :is(#forms-respondent, .isa-forms:has(> .forms-receipt)) > [data-anonymous-session] h2 { margin: 0 0 8px; color: var(--isa-ink); font-size: 1rem; }
#app :is(#forms-respondent, .isa-forms:has(> .forms-receipt)) > [data-anonymous-session] button { min-height: 44px; }
/* 질문 묶음(§5): 옛 2px 윗선(inline 색)은 머리띠가 대신하므로 테두리 없음. */
#app #forms-respondent > .forms-question-fields { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#app #forms-respondent .forms-section > h2 { margin: 24px 0 12px; padding: 0; border: 0; color: var(--isa-ink); font-family: var(--isa-font-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
#app #forms-respondent .forms-section + .forms-section { margin-top: 0; padding-top: 0; border-top: 0; }
#app #forms-respondent .forms-question { position: relative; min-width: 0; margin: 0 0 12px; padding: 20px 24px; border: 1px solid var(--isa-line); border-radius: var(--isa-radius-md); background: var(--isa-surface); box-shadow: none; }
#app #forms-respondent .forms-question > legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; color: var(--isa-ink); font-size: 17px; font-weight: 700; line-height: 1.4; }
#app #forms-respondent .forms-question > legend + * { clear: both; }
#app #forms-respondent .forms-question > legend + .forms-help { margin: 0 0 10px; color: var(--isa-muted); font-size: 13px; line-height: 1.6; }
/* 입력 중 표시는 왼쪽 5px 폼 색, 오류(3px danger)는 뒤에 선언해 겹치면 빨강 */
#app #forms-respondent .forms-question:focus-within { box-shadow: inset 5px 0 var(--isa-accent-700); }
#app #forms-respondent .forms-question:has([aria-invalid=true]) { box-shadow: inset 3px 0 var(--isa-danger); }
#app #forms-respondent :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { padding: 12px 14px; border: 1px solid #6F7C85; border-radius: 6px; background: var(--isa-surface); }
#app #forms-respondent :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: 44px; }
#app #forms-respondent textarea { min-height: 128px; }
#app #forms-respondent :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { outline: 3px solid var(--isa-ink); outline-offset: 2px; border-color: var(--isa-ink); }
#app #forms-respondent :is(input:not([type=checkbox]):not([type=radio]), select, textarea)[aria-invalid=true],
#app #forms-respondent [aria-invalid=true] { border-color: var(--isa-danger); box-shadow: inset 0 0 0 1px var(--isa-danger); }
/* 선택지: 행 전체가 누름 영역(46px, 390은 48px), 아랫선 없이 hover·선택은 50 면 */
#app #forms-respondent .forms-choice { display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 0 -10px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; font-weight: 400; cursor: pointer; }
#app #forms-respondent .forms-choice:has(input:not(:disabled)):hover { background: var(--isa-accent-50); }
#app #forms-respondent .forms-choice:has(input:checked) { background: var(--isa-accent-50); border: 0; box-shadow: none; font-weight: 600; }
#app #forms-respondent :is(input[type=checkbox], input[type=radio]) { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--isa-accent-700); }
/* V19 글자 수: 입력 아래 오른쪽, 고정폭 숫자 */
#app #forms-respondent .forms-question > .forms-help[data-length-hint] { margin: 4px 0 0; color: var(--isa-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
#app #forms-respondent .forms-field-error { margin: 6px 0 0; color: var(--isa-danger); font-size: 13px; }
#app #forms-respondent .forms-field-error:empty { margin: 0; }
#app #forms-respondent .forms-question .forms-media img { max-height: 420px; border-radius: 6px; }
/* 동의·제출(§6): 동의는 질문과 같은 카드, 주 버튼은 폼 색(--isa-btn-bg·fg, 옐로는 검정 글자) */
#app #forms-respondent > .forms-consents { margin: 12px 0; padding: 16px 24px; border: 1px solid var(--isa-line); border-radius: var(--isa-radius-md); background: var(--isa-surface); box-shadow: none; }
/* legend가 fieldset 윗변에 걸치지 않게 묶음 안으로 띄운다 */
#app #forms-respondent > .forms-consents > legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; color: var(--isa-muted); font-size: 13px; font-weight: 600; }
#app #forms-respondent > .forms-consents > legend + * { clear: both; }
#app #forms-respondent .forms-consents label { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; font-size: .9375rem; font-weight: 400; }
#app #forms-respondent > .forms-message { margin: 12px 0 0; padding: 0; color: var(--isa-ink); font-size: 13px; }
#app #forms-respondent > .forms-message:empty { margin: 0; }
#app #forms-respondent > .forms-primary { display: block; width: fit-content; min-width: 200px; min-height: 52px; margin: 20px 0 0; padding: 0 24px; border: 1px solid var(--isa-btn-bg); border-radius: 6px; background: var(--isa-btn-bg); color: var(--isa-btn-fg); font-size: 17px; font-weight: 700; }
#app #forms-respondent > .forms-primary[hidden] { display: none; }
#app #forms-respondent > .forms-primary:disabled { border-color: var(--isa-line); background: var(--isa-surface-2); color: var(--isa-muted); opacity: 1; }
/* 안 ⓐ-2 두 열 유지(761px 이상): hero는 한 행 전체, 왼쪽 열은 초안 패널, 오른쪽 열은 나머지를 DOM 순서대로. 패널이 길면 마지막 1fr 행만 늘어난다. */
@media (min-width: 761px) {
  #app #forms-respondent[data-respond-layout=two] { display: grid; max-width: none; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); grid-template-rows: repeat(8, max-content) minmax(0, 1fr); column-gap: 60px; row-gap: 0; align-items: start; }
  #app #forms-respondent[data-respond-layout=two] > * { grid-column: 2; grid-row: auto; min-width: 0; }
  #app #forms-respondent[data-respond-layout=two] > .forms-hero { grid-column: 1 / -1; grid-row: 1; }
  #app #forms-respondent[data-respond-layout=two] > .forms-draft-fold { grid-column: 1; grid-row: 2 / -1; align-self: start; }
  #app #forms-respondent[data-respond-layout=two] > .forms-primary { min-width: 200px; }
  #app #forms-respondent[data-respond-layout=two] .forms-cover:not([data-cover=poster]) { aspect-ratio: 4 / 1; }
}
@media (max-width: 760px) {
  /* 390에서 카드 안 폭 358(좌우 16px, 사양 §2): 신청 화면·접수증(내 신청 포함)만 본문 여백을 줄인다 */
  body:has(#forms-respondent, .forms-receipt) main { padding-inline: 16px; }
  #app .isa-forms:has(#forms-respondent, .forms-receipt) { padding-inline: 0; }
  #app #forms-respondent .forms-hero-in { padding: 18px; }
  #app #forms-respondent .forms-hero-in > h1 { font-size: 26px; }
  #app #forms-respondent > .forms-progress { font-size: 12px; }
  #app #forms-respondent > .forms-draft-fold > summary { min-height: 44px; }
  #app #forms-respondent .forms-section > h2 { font-size: 20px; }
  #app #forms-respondent .forms-question { margin-bottom: 10px; padding: 16px; }
  #app #forms-respondent .forms-question > legend { font-size: 16px; }
  #app #forms-respondent .forms-choice { min-height: 48px; }
  #app #forms-respondent > .forms-consents { padding: 14px 16px; }
  #app #forms-respondent > .forms-primary { width: 100%; }
}
#app #forms-respondent > .forms-primary:not(:disabled):hover,
#application .primary:not(:disabled):hover { text-decoration: underline; text-underline-offset: 3px; }

/* Legacy entry uses the same type hierarchy and an open, light guide column. */
#app:has(> .application-layout) > .intro h1 {
  max-width: 920px;
  color: var(--isa-ink);
  font-family: var(--isa-font-display);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
#app:has(> .application-layout) > .intro { padding-bottom: 28px; margin-bottom: 36px; }
#app > .application-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 60px; }
#app > .application-layout > .side {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--isa-ink);
  border-radius: 0;
  padding: 18px 0 0;
}
#app > .application-layout > .side .number { font-size: 1.25rem; margin-bottom: 18px; color: var(--isa-ink); }
#application {
  border: 0;
  border-top: 1px solid var(--isa-ink);
  border-radius: 0;
  box-shadow: none;
  padding: 28px 0 0;
}
#application .primary {
  border-radius: 2px;
  min-width: 180px;
  padding-block: 16px;
}

/* Receipt and my-applications (C-3 §7, 2026-11-03): a white card that follows the form colour (applyFormTheme on the card, DOM ①).
   The edge is a 1px outline drawn inside (not a border), so the inline border-top-color applyFormTheme sets never shows; the form font stays on the answers only.
   The check circle is drawn only for a confirmed or waitlisted site receipt (data-receipt-state, DOM ⑤); an unconfirmed readback draws none. */
#app .forms-receipt { max-width: 640px; margin: 12px auto 16px; padding: 32px 28px; border: 0; border-radius: var(--isa-radius-md); outline: 1px solid var(--isa-line); outline-offset: -1px; background: var(--isa-surface); font-family: inherit; }
#app .forms-receipt h3 { color: var(--isa-ink); font-family: var(--isa-font-display); font-weight: 600; font-size: 30px; margin: 0 0 6px; }
#app .forms-receipt:is([data-receipt-state=confirmed], [data-receipt-state=waitlisted]) > h3::before { content: "\2713" / ""; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 16px; border-radius: 50%; background: var(--isa-accent-700); color: var(--isa-on-primary); font-family: var(--isa-font); font-size: 28px; font-weight: 800; line-height: 1; }
#app .forms-receipt[data-form-accent=yellow][data-receipt-state=confirmed] > h3::before { background: var(--isa-accent-500); color: var(--isa-ink); } /* 옐로 700은 갈색이라 500 + 검정 ✓ */
#app .forms-receipt[data-receipt-state=waitlisted] > h3::before { background: var(--isa-warn-bg); color: var(--isa-warn); }
#app .forms-receipt .forms-receipt-time { margin: 0 0 20px; color: var(--isa-muted); font-size: 14px; }
#app .forms-receipt > button { margin: 20px 10px 0 0; }
#app .forms-receipt > details { margin-top: 16px; }
#app .forms-receipt > details > summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
#app .forms-receipt .forms-themed { border-top-width: 0; padding-top: 0; } /* 답변 확인 안 질문 묶음의 옛 6px 폼 색 윗선도 C-3부터 보이지 않게 */
#app .forms-mine-list .forms-receipt { max-width: none; padding: 22px 24px; margin: 0 0 12px; }
/* 신청 직후·다시 연 접수증 화면(리뷰 S1·F2): showReceipt가 카드 앞(세션 패널)과 뒤(내 신청 링크·세션 안내·새 응답 버튼)에 붙이는 형제도 카드의 640 가운데 열에 맞춘다.
   패널·안내는 같은 폭, 링크·버튼은 카드 왼쪽 선. 내 신청 목록의 카드별 host(.forms-mine-list 안)와 답변 수정 화면(editHost section)은 대상이 아니다. */
#app .isa-forms:has(> .forms-receipt):not(.forms-mine-list *) > :is([data-anonymous-session], [data-receipt-session-note]) { max-width: 640px; margin-inline: auto; }
#app .isa-forms:has(> .forms-receipt):not(.forms-mine-list *) > :is(a[href="#mine-v1"], [data-new-response]) { display: block; width: fit-content; margin-inline: max(0px, calc((100% - 640px) / 2)) 0; }

@media (max-width: 1000px) {
  #app #forms-respondent, #app > .application-layout { column-gap: 32px; }
  #application { padding-inline: 0; }
}
@media (max-width: 760px) {
  body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) main { margin-top: 20px; }
  body:has(#application, #forms-respondent, .forms-receipt, .forms-mine-list) main > .notice { margin-bottom: 30px; }
  #app:has(> .application-layout) > .intro h1 {
    font-size: clamp(2rem, 7.5vw, 3rem);
    line-height: 1.2;
    padding-bottom: 22px;
    margin-bottom: 24px;
  }
  #application { padding: 24px 0 8px; }
  #app > .application-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #app > .application-layout > .side { padding-left: 0; }
  #app:has(> .application-layout) > .intro { margin-bottom: 28px; }
}

/* ===== 공개 모집 목록 (#programs) · DESIGN-PROGRAMS-UI-20261022 v5.1(에디토리얼). 마크업은 docs/design/PUBLIC_PROGRAMS_UI_20261022.md =====
   v5(2026-10-22, 사용자 "아직 AI 티가 난다" 피드백): 흰 바탕·검은 표제(Hahmlet)·가는 선으로 나눈 목록·사진은 크게, 상자·알약·색 배지는 없앤다.
   v5.1(독립 심사 반영): 히어로를 줄이고 표제 굵기 500, 섹션마다 다른 간격, 헤더·푸터·본문 가장자리 맞춤.
   v5.3(2026-10-22 사용자 확인): 제목 → [접수 일정 보기]+[ISA Korea 소개] → 큰 사진(2:1, 경복궁) → 접수 일정 목록. 큰 사진은 목록 앞에 둔다.
   노랑은 이 화면에서 "마감 임박" 점 한 곳. 주색 #0C5773은 링크·버튼에만 쓴다. */
body:is([data-route="programs"], :has(#programs)) { background: #fff; overflow-x: clip; container-type: inline-size; } /* 100cqi = 세로 스크롤바를 뺀 본문 폭(아래 사진 띠가 씀). 100vw는 스크롤바를 포함한다 */
body:is([data-route="programs"], :has(#programs)) header { background: #fff; border-bottom: 1px solid var(--isa-line); padding: 0 max(24px, calc((100vw - 1200px) / 2)); min-height: 72px; }
body:is([data-route="programs"], :has(#programs)) header .brand { color: var(--isa-ink); }
body:is([data-route="programs"], :has(#programs)) header nav a { min-height: 72px; padding: 0 14px; color: var(--isa-muted); font-weight: 500; font-size: .9375rem; }
body:is([data-route="programs"], :has(#programs)) header nav a.active { color: var(--isa-ink); font-weight: 600; box-shadow: inset 0 -2px var(--isa-ink); }
body:is([data-route="programs"], :has(#programs)) header nav #email-logout { min-height: 72px; padding: 0 14px; font-weight: 500; font-size: .9375rem; color: var(--isa-muted); }
body:is([data-route="programs"], :has(#programs)) header #forms-locale { border: 0; border-radius: 0; min-width: 0; padding-inline: 0 20px; font-size: .875rem; font-weight: 500; color: var(--isa-muted); background-position: right 0 center; }
body:is([data-route="programs"], :has(#programs)) main { max-width: 1248px; margin-block: 0 0; }
body:is([data-route="programs"], :has(#programs)) .isa-forms:has(#programs) { max-width: none; margin: 0; padding: 0; } /* forms.css의 1100px 틀(모바일 .25rem 안쪽 여백 포함)을 풀어 본문(1200)을 머리·꼬리와 맞춘다 */
body:is([data-route="programs"], :has(#programs)) footer { width: min(1200px, calc(100% - 48px)); max-width: none; margin: 0 auto; padding: 28px 0 56px; border-top: 1px solid var(--isa-ink); font-size: .875rem; color: var(--isa-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
body:is([data-route="programs"], :has(#programs)) footer a { color: var(--isa-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--isa-line-strong); }
/* DR-13: retain the grouped footer links and source-order wrapping from a9dd419. */
body:is([data-route="programs"], :has(#programs)) footer.public-entry-footer { line-height: 1.9; }
body:is([data-route="programs"], :has(#programs)) footer.public-entry-footer a { white-space: nowrap; }
/* 모드 안내(.public-entry-notice)는 경고 상자가 아니라 조용한 한 줄: 바탕 없이 가는 왼쪽 선, 작은 회색 글자 */
body:is([data-route="programs"], :has(#programs)) main > .notice.public-entry-notice { background: transparent; border: 0; border-left: 2px solid var(--isa-secondary); padding: 2px 0 2px 14px; margin: 18px 0 0; font-size: .8125rem; line-height: 1.6; color: var(--isa-muted); }
.public-entry-footer-links { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
#programs { display: flex; flex-direction: column; color: var(--isa-ink); padding-bottom: 96px; }
#programs h1, #programs h2, #programs h3 { color: var(--isa-ink); margin: 0; font-family: var(--isa-font-display); font-weight: 500; }
#programs p { margin: 0; }
#programs .programs-section { padding: 0; }
#programs .programs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
#programs .programs-head h2 { font-size: 2.25rem; line-height: 1.15; letter-spacing: -.025em; }
#programs .programs-head p { color: var(--isa-muted); font-size: .9375rem; margin-top: 10px; }
#programs .programs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 머리: 표제 블록 → 행동(버튼+링크) → 큰 사진 → 목록. flex order는 사진 섹션 순서를 위해 남긴다. */
#programs .programs-hero { display: contents; }
#programs .programs-hero-text { order: 0; padding: 48px 0 0; }
#programs .programs-eyebrow { font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: var(--isa-muted); }
#programs .programs-h1 { font-size: clamp(2.125rem, 3.9vw, 3.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; margin-top: 14px; text-wrap: balance; }
#programs .programs-h1 em { font-style: normal; }
#programs .programs-lead { font-size: 1.0625rem; line-height: 1.7; color: var(--isa-muted); margin-top: 18px; max-width: 36em; }
#programs .programs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
#programs .programs-actions .primary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 2px; text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--isa-on-primary); }
#programs .programs-link { font-weight: 500; font-size: .9375rem; color: var(--isa-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (pointer: coarse) { #programs .programs-link { display: inline-flex; align-items: center; min-height: 44px; } } /* 768 태블릿도 손가락 */
#programs .programs-link:hover { color: var(--isa-primary); }
#programs .programs-hero-figure { order: 0; margin: 44px 0 0; }
#programs .programs-hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: center 62%; border-radius: 4px; background: var(--isa-surface-2); }
#programs .programs-hero-figure figcaption { margin-top: 10px; font-size: .8125rem; color: var(--isa-muted); }
#programs #programs-upcoming { order: 1; padding-top: 72px; }
#programs #programs-closed { order: 3; padding-top: 128px; }
#programs #programs-gallery { order: 4; padding-top: 96px; }

/* 접수 일정 머리: 검정 선 위에 필터 탭만. h2·설명은 보조기술에만 */
#programs #programs-upcoming .programs-head { border-top: 1px solid var(--isa-ink); padding-top: 4px; justify-content: flex-start; }
#programs #programs-upcoming .programs-head > div:not(.programs-filters) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#programs .programs-filters { display: flex; flex-wrap: wrap; gap: 0 24px; }
#programs .programs-chip { position: relative; min-width: 44px; min-height: 44px; padding: 12px 0 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--isa-muted); font-weight: 500; font-size: .9375rem; cursor: pointer; }
#programs .programs-chip::after { content: ""; position: absolute; inset: 0 -11px; } /* 보이는 모양은 그대로, 누름 영역만 탭 간격의 절반까지 */
#programs .programs-chip:hover { color: var(--isa-ink); }
#programs .programs-chip[aria-pressed="true"] { color: var(--isa-ink); font-weight: 600; border-bottom-color: var(--isa-ink); }

/* 상태 문구(불러오는 중·비어 있음·오류) */
#programs .programs-state { padding: 40px 0; border-bottom: 1px solid var(--isa-line); color: var(--isa-muted); font-size: .9375rem; background: none; }
#programs .programs-state[hidden] { display: none; }
#programs .programs-retry { margin-left: 12px; min-height: 44px; padding: 0 14px; border-radius: 2px; border-color: var(--isa-ink); background: none; color: var(--isa-ink); font-weight: 600; }

/* 접수 일정: 가는 선으로 나눈 줄. 왼쪽 날짜, 가운데 본문, 오른쪽 4:5 사진 */
#programs .programs-timeline { list-style: none; margin: 0; padding: 0; max-width: none; }
#programs .programs-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--isa-line); }
#programs .programs-date { padding-top: 0; display: flex; flex-direction: column; } /* 라벨(접수 마감/시작) → 숫자 → 월·요일 순으로 읽히게 */
#programs .programs-day { display: block; font-family: var(--isa-font-display); font-weight: 400; font-size: 3rem; line-height: 1; letter-spacing: -.03em; color: var(--isa-ink); font-variant-numeric: tabular-nums; }
#programs .programs-month { display: block; font-size: .875rem; font-weight: 500; margin-top: 10px; }
#programs .programs-note { display: block; order: -1; color: var(--isa-muted); font-size: .8125rem; margin: 0 0 8px; }
#programs .programs-item:not(:has(.programs-date)) { grid-template-columns: minmax(0, 1fr); }
#programs .programs-card { display: grid; grid-template-columns: minmax(0, 1fr) 176px; column-gap: 56px; padding: 0; background: none; border: 0; border-radius: 0; text-decoration: none; color: inherit; }
#programs .programs-card:hover .programs-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--isa-ink); }
#programs .programs-card:focus-visible { outline: 3px solid var(--isa-focus); outline-offset: 6px; }
/* 권장 구조: div.programs-card 안의 h3 > a.programs-titlelink (링크 이름 = 제목). 누름 영역은 ::after로 줄 전체 */
#programs .programs-item { position: relative; } /* 제목 링크의 ::after가 날짜 열까지 덮어 줄 전체가 눌린다 */
#programs .programs-card { position: static; }
/* cover가 없는 줄(현재 서버는 cover:null 고정)은 빈 사진 열(176px + 56px)을 비워 두지 않는다 */
#programs .programs-card:has(.programs-cover--none) { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
#programs .programs-title, #programs .programs-archive h3 { text-wrap: balance; }
#programs .programs-summary { text-wrap: pretty; }
#programs[data-locale="ja"] :is(.programs-title, .programs-archive h3) { word-break: auto-phrase; } /* 가타카나 낱말 중간 줄바꿈 완화(지원 브라우저만) */
#programs .programs-titlelink { color: inherit; text-decoration: none; }
#programs .programs-titlelink::after { content: ""; position: absolute; inset: 0; }
#programs .programs-titlelink:focus-visible { outline: 0; }
#programs .programs-titlelink:focus-visible::after { outline: 3px solid var(--isa-focus); outline-offset: 6px; }
#programs .programs-card:has(.programs-titlelink:hover) .programs-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
#programs .programs-cover { order: 2; display: block; width: 176px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--isa-surface-2); }
#programs .programs-cover--none { display: none; }
#programs .programs-body { display: flex; flex-direction: column; min-width: 0; }
#programs .programs-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem; font-weight: 400; color: var(--isa-muted); }
#programs .programs-status { display: inline-flex; align-items: center; gap: 7px; min-height: 0; padding: 0; border-radius: 0; background: none; font-size: .8125rem; font-weight: 600; color: var(--isa-ink); }
#programs .programs-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--isa-line-strong); box-sizing: border-box; }
#programs .programs-status[data-status="open"]::before { background: var(--isa-secondary); }
#programs .programs-status[data-status="closing"] { font-weight: 700; } /* 긴급 신호는 점 색 + 굵기 + 문구 "{n}일 남음"(i18n programsClosingIn) */
#programs .programs-status[data-status="closing"]::before { background: var(--isa-accent); } /* 강조 노랑: 이 화면에서 한 곳 */
#programs .programs-status[data-status="upcoming"]::before { background: transparent; border: 1.5px solid var(--isa-ink); }
#programs .programs-status[data-status="closed"] { color: var(--isa-muted); }
#programs .programs-status[data-status="closed"]::before { background: var(--isa-line); }
#programs .programs-mode { font-weight: 400; color: var(--isa-muted); }
#programs .programs-title { font-size: 1.625rem; line-height: 1.38; letter-spacing: -.02em; margin: 12px 0 14px; max-width: 28em; }
#programs .programs-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: .9375rem; font-weight: 500; }
#programs .programs-facts li { display: inline-flex; align-items: baseline; gap: 8px; }
#programs .programs-facts li:has([data-program-contact]) { min-width: 0; max-width: 100%; }
#programs .programs-facts [data-program-contact] { min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--isa-primary); text-decoration: underline; text-underline-offset: 3px; }
#programs .programs-facts li > span:first-child { flex: 0 0 auto; white-space: nowrap; font-size: .8125rem; font-weight: 500; color: var(--isa-muted); }
/* KST 안내: DR-12 뒤 뷰는 카드마다가 아니라 다가오는 모집 머리 아래에 p.programs-timezone 하나("모든 일정은 한국 시간(KST) 기준")를 둔다(14358d1). 카드 안 li였던 시절의 규칙은 호환용으로 남긴다. */
#programs .programs-section > .programs-timezone { margin: 14px 0 0; font-size: .8125rem; font-weight: 500; color: var(--isa-muted); }
#programs .programs-facts .programs-timezone { flex: 0 0 100%; order: 9; font-size: .8125rem; font-weight: 500; color: var(--isa-muted); }
/* "접수 일정 보기"·다시 시도가 섹션/상태 문구로 초점을 옮긴다(tabindex=-1). 건너뛰기 대상이라 섹션 전체 외곽선은 그리지 않는다. */
#programs .programs-section:focus { outline: none; }
#programs .programs-state:focus-visible { outline: 3px solid var(--isa-focus); outline-offset: 4px; }
#programs .programs-summary { margin-top: 14px; color: var(--isa-muted); font-size: .9375rem; line-height: 1.75; max-width: 38em; }
#programs .programs-foot { margin-top: 16px; padding-top: 0; border-top: 0; display: flex; align-items: center; gap: 16px; }
@media (min-width: 761px) { #programs .programs-foot:not(:has(.programs-remaining)) { display: none; } } /* 데스크톱은 "자세히 보기"를 숨기므로 남은 자리가 없으면 빈 줄만 남는다 */
#programs .programs-remaining { font-weight: 600; font-size: .875rem; }
#programs .programs-more { display: none; font-weight: 500; font-size: .875rem; color: var(--isa-primary); white-space: nowrap; } /* 줄 전체가 링크, 제목에 hover 밑줄. 모바일에서만 글자로 보인다 */
#programs .programs-item[data-status="closed"] .programs-card { color: var(--isa-muted); }
#programs .programs-item[data-status="closed"] .programs-title { color: var(--isa-muted); }
#programs .programs-item[data-status="closed"] .programs-cover { filter: grayscale(1); opacity: .8; }
#programs .programs-morebtn { margin-top: 28px; min-height: 48px; padding: 0 24px; border: 1px solid var(--isa-ink); border-radius: 2px; background: none; color: var(--isa-ink); font-weight: 600; font-size: .9375rem; align-self: flex-start; }
#programs .programs-morebtn:hover { background: var(--isa-ink); color: #fff; }

/* 지난 프로그램: 사진 세 장(4:3), 제목은 표제 글꼴. 선 없이 여백으로 구분 */
#programs #programs-closed .programs-head, #programs #programs-gallery .programs-head { border-top: 0; padding-top: 0; margin-bottom: 24px; }
#programs #programs-closed .programs-head p, #programs #programs-gallery .programs-head p { display: none; }
#programs .programs-archive { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
#programs .programs-archive a { display: block; text-decoration: none; color: inherit; }
#programs .programs-archive a:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
#programs .programs-archive a:focus-visible { outline: 3px solid var(--isa-focus); outline-offset: 6px; }
#programs .programs-cover-45 { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 4px; background: var(--isa-surface-2); } /* v6.2: 지난 프로그램 cover도 포스터라 자르지 않는다(DR-18 공개 11, 2026-10-30: forms/public-program-detail.css의 같은 규칙을 지워 이 파일 하나가 담당) */
/* 지난 프로그램에 cover가 없을 때(실제 DOM: div.programs-cover-45.programs-cover--none): 빈 회색 면 대신 심벌 워터마크 */
#programs .programs-cover-45.programs-cover--none { background: var(--isa-surface-2) url("assets/img/isa-symbol-144.png") center / 56px auto no-repeat; opacity: .55; }
/* 지난 프로그램에 사진이 하나도 없으면(이번 단계는 서버가 cover 미지원) 워터마크 타일 대신 글자 행으로: 제목 — 연월 · 장소 */
#programs .programs-archive:not(:has(img)) { display: block; border-top: 1px solid var(--isa-ink); }
#programs .programs-archive:not(:has(img)) > li { border-bottom: 1px solid var(--isa-line); }
/* DR-13 ⑩ 뒤 행 안에 "접수 마감" 배지(.programs-status)가 들어올 수 있어 flex 양끝 정렬 대신 2열 격자: [배지 / 제목] | 연월·장소 */
#programs .programs-archive:not(:has(img)) > li > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; padding: 18px 0; }
#programs .programs-archive:not(:has(img)) > li > a > .programs-status { grid-column: 1; justify-self: start; margin-bottom: 6px; }
#programs .programs-archive:not(:has(img)) > li > a > h3 { grid-column: 1; }
#programs .programs-archive:not(:has(img)) > li > a > p { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
#programs .programs-archive:not(:has(img)) .programs-cover--none { display: none; }
#programs .programs-archive:not(:has(img)) h3 { margin: 0; font-size: 1.25rem; }
#programs .programs-archive:not(:has(img)) p { margin: 0; flex: 0 0 auto; text-align: right; }
#programs .programs-archive h3 { font-size: 1.125rem; line-height: 1.4; margin-top: 14px; }
#programs .programs-archive p { font-size: .875rem; color: var(--isa-muted); margin-top: 6px; }

/* 활동 기록: 높이를 맞춘 사진 띠가 화면 오른쪽 끝까지 흐른다(가로 스크롤 단서) */
#programs .programs-strip { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-right: calc(-1 * max(24px, (100vw - 1200px) / 2)); padding: 0 max(24px, (100vw - 1200px) / 2) 28px 0; margin-right: calc(-1 * max(24px, (100cqi - 1200px) / 2)); padding-right: max(24px, (100cqi - 1200px) / 2); } /* 100vw는 고전 스크롤바(15px)를 포함해 1249px 이상에서 본문 여백보다 7.5px 더 나갔다. 컨테이너 단위 미지원 브라우저는 앞의 100vw 값을 쓴다 */
#programs .programs-strip::-webkit-scrollbar { display: none; }
#programs .programs-strip:focus-visible { outline: 3px solid var(--isa-focus); outline-offset: -3px; } /* 띠가 화면 끝까지 흐르므로 바깥 링은 오른쪽이 잘린다 */
#programs .programs-strip figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; }
#programs .programs-strip img { display: block; width: auto; height: 240px; object-fit: cover; border-radius: 4px; background: var(--isa-surface-2); }
#programs .programs-strip figcaption { font-size: .75rem; color: var(--isa-muted); margin-top: 8px; text-align: left; letter-spacing: .02em; }
@media (pointer: fine) and (min-width: 761px) { #programs .programs-strip { scrollbar-width: thin; scrollbar-color: var(--isa-line-strong) transparent; } } /* 가로 휠 없는 마우스용 단서 */

@media (max-width: 1000px) {
  #programs .programs-hero-figure { margin-top: 36px; }
  #programs #programs-closed { padding-top: 88px; }
  #programs #programs-gallery { padding-top: 72px; }
  #programs .programs-item { grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; }
  #programs .programs-card { grid-template-columns: minmax(0, 1fr) 150px; column-gap: 28px; }
  #programs .programs-cover { width: 150px; }
  body:is([data-route="programs"], :has(#programs)) header nav a, body:is([data-route="programs"], :has(#programs)) header nav #email-logout { min-height: 56px; } /* 태블릿: 탭 줄이 둘째 줄로 내려가므로 72px까지 쓰지 않는다 */
  #programs .programs-title { font-size: 1.5rem; }
}
@media (max-width: 760px) {
  body:is([data-route="programs"], :has(#programs)) header { padding: 10px 24px 0; min-height: 0; }
  body:is([data-route="programs"], :has(#programs)) header nav a, body:is([data-route="programs"], :has(#programs)) header nav #email-logout { min-height: 44px; padding: 8px 10px; }
  body:is([data-route="programs"], :has(#programs)) header #forms-locale { min-height: 44px; }
  body:is([data-route="programs"], :has(#programs)) footer a { display: inline-block; padding-block: 12px; } /* 44px 누름 영역은 유지하되 한 문장 흐름의 줄 간격은 키우지 않는다 */
  #programs { padding-bottom: 64px; }
  #programs .programs-link { display: inline-flex; align-items: center; min-height: 44px; }
  #programs .programs-chip::after { inset: 0 -9px; }
  #programs .programs-hero-text { padding-top: 32px; }
  #programs .programs-h1 { font-size: 2.125rem; margin-top: 12px; }
  #programs .programs-lead { font-size: .9375rem; margin-top: 14px; }
  #programs .programs-actions { margin-top: 18px; }
  #programs .programs-actions .primary { width: 100%; justify-content: center; }
  #programs .programs-hero-figure { margin-top: 24px; }
  #programs .programs-hero-photo { aspect-ratio: 4 / 5; }
  #programs #programs-upcoming { padding-top: 44px; }
  #programs #programs-closed { padding-top: 72px; }
  #programs #programs-gallery { padding-top: 56px; }
  #programs .programs-head h2 { font-size: 1.75rem; }
  #programs .programs-filters { gap: 0 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -24px; padding-right: 24px; } /* ja/en에서 넷째 탭이 혼자 둘째 줄로 떨어지지 않게 가로 스크롤 */
  #programs .programs-filters::-webkit-scrollbar { display: none; }
  #programs .programs-chip { flex: 0 0 auto; white-space: nowrap; }
  #programs .programs-state[data-state="error"] { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  #programs .programs-retry { margin-left: 0; }
  #programs .programs-item { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 24px 0; }
  #programs .programs-date { padding-top: 0; display: flex; flex-direction: row; align-items: baseline; gap: 10px; }
  #programs .programs-day { font-size: 1.75rem; }
  #programs .programs-month, #programs .programs-note { margin: 0; }
  /* 제목은 전폭, 사진은 일정 옆 72px */
  #programs .programs-body { display: contents; }
  #programs .programs-card { grid-template-columns: minmax(0, 1fr) 72px; column-gap: 16px; row-gap: 0; grid-template-areas: "meta meta" "title title" "facts cover" "summary summary" "foot foot"; }
  #programs .programs-card:has(.programs-cover--none) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "facts" "summary" "foot"; }
  #programs .programs-meta { grid-area: meta; }
  #programs .programs-title { grid-area: title; font-size: 1.25rem; line-height: 1.35; margin: 8px 0 10px; max-width: none; }
  #programs .programs-facts { grid-area: facts; flex-direction: column; flex-wrap: nowrap; gap: 4px; font-size: .875rem; }
  #programs .programs-facts .programs-timezone { flex: 0 0 auto; margin-top: 2px; } /* 세로 축에서는 100% 기준이 둘째 열을 만들므로 자동 */
  #programs .programs-cover { grid-area: cover; order: 0; width: 72px; align-self: start; }
  #programs .programs-summary { grid-area: summary; font-size: .875rem; margin-top: 10px; }
  #programs .programs-foot { grid-area: foot; margin-top: 10px; }
  #programs .programs-more { display: inline; margin-left: auto; }
  #programs .programs-morebtn { width: 100%; align-self: stretch; }
  #programs .programs-archive { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; }
  #programs .programs-archive:not(:has(img)) { display: block; overflow: visible; }
  #programs .programs-archive:not(:has(img)) > li > a { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 14px 0; }
  #programs .programs-archive:not(:has(img)) > li > a > p { grid-column: 1; grid-row: auto; }
  #programs .programs-archive:not(:has(img)) > li > a > .programs-status { margin-bottom: 0; }
  #programs .programs-archive:not(:has(img)) p { text-align: left; }
  #programs .programs-archive::-webkit-scrollbar { display: none; }
  #programs .programs-archive li { flex: 0 0 72%; scroll-snap-align: start; }
  #programs .programs-strip { margin-right: -24px; padding-right: 24px; }
  #programs .programs-strip img { height: 180px; }
  body:is([data-route="programs"], :has(#programs)) footer { flex-direction: column; width: calc(100% - 48px); padding: 24px 0 48px; }
}

/* ===== v6 (2026-10-25) 접수 일정을 포스터 카드 격자로 =====
   사용자 피드백(10-25): 모집마다 포스터를 만들어 붙일 것이므로 날짜 축 세로 나열 대신 코플처럼 포스터 + 간결한 정보의 가로 카드, 누르면 상세.
   DOM은 그대로(li.programs-item > .programs-date + .programs-card > (img.programs-cover | div.programs-cover--none) + .programs-body). 날짜 축은 숨기고
   접수 마감은 카드 안 사실 줄로 읽는다. 포스터는 4:5(1080×1350) 권장, 비율이 달라도 자르지 않고 회색 면 위에 contain. 서버 cover는 DR-15 전까지 null → 심벌 타일. */
#programs .programs-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
#programs .programs-item { display: block; padding: 0; border-bottom: 0; }
#programs .programs-item:not(:has(.programs-date)) { grid-template-columns: none; }
#programs .programs-date { display: none; }
#programs .programs-card, #programs .programs-card:has(.programs-cover--none) { display: flex; flex-direction: column; grid-template-columns: none; column-gap: 0; }
#programs .programs-cover { order: 0; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; object-position: center; border-radius: 4px; background: var(--isa-surface-2); margin: 0 0 16px; }
#programs .programs-cover--none { display: block; background: var(--isa-surface-2) url("assets/img/isa-symbol-144.png") center / 48px auto no-repeat; opacity: 1; }
#programs .programs-body { display: flex; flex-direction: column; min-width: 0; }
#programs .programs-meta { gap: 6px 12px; }
#programs .programs-title { font-size: 1.1875rem; line-height: 1.4; margin: 8px 0 10px; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#programs .programs-facts { flex-direction: column; flex-wrap: nowrap; gap: 4px; font-size: .875rem; }
#programs .programs-facts li { flex-wrap: wrap; }
#programs .programs-summary { margin-top: 10px; font-size: .875rem; line-height: 1.6; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#programs .programs-foot { margin-top: 10px; }
@media (min-width: 761px) { #programs .programs-foot:not(:has(.programs-remaining)) { display: none; } }
#programs .programs-item[data-status="closed"] .programs-cover--none { opacity: .6; }
@media (max-width: 1000px) {
  #programs .programs-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  #programs .programs-cover { width: 100%; }
}
@media (max-width: 760px) {
  #programs .programs-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  #programs .programs-item { display: block; padding: 0; row-gap: 0; }
  #programs .programs-date { display: none; }
  #programs .programs-body { display: flex; }
  #programs .programs-card, #programs .programs-card:has(.programs-cover--none) { display: flex; grid-template-areas: none; grid-template-columns: none; }
  #programs .programs-cover { width: 100%; margin: 0 0 12px; }
  #programs .programs-title { font-size: 1.0625rem; margin: 6px 0 8px; }
  #programs .programs-facts { font-size: .8125rem; gap: 3px; }
  #programs .programs-summary { font-size: .8125rem; margin-top: 8px; }
  #programs .programs-foot { margin-top: 8px; }
  #programs .programs-more { display: inline; margin-left: auto; font-size: .8125rem; }
}
@media (max-width: 600px) {
  #programs .programs-timeline { gap: 28px 14px; }
  #programs .programs-cover { margin-bottom: 10px; border-radius: 3px; }
  #programs .programs-meta { font-size: .75rem; gap: 4px 8px; }
  #programs .programs-status { font-size: .75rem; }
  #programs .programs-title { font-size: .9375rem; line-height: 1.35; }
  #programs .programs-facts { font-size: .75rem; gap: 2px; }
  #programs .programs-facts li > span:first-child { font-size: .6875rem; }
  #programs .programs-summary { display: none; }
  #programs .programs-remaining, #programs .programs-more { font-size: .75rem; }
}
/* v6 보완: KST 안내와 첫 줄 카드 사이 숨 쉴 간격, 좁은 폭에서는 사실 줄을 "라벨 값" 한 흐름으로(라벨만 홀로 남지 않게) */
#programs .programs-section > .programs-timezone { margin-bottom: 28px; }
@media (max-width: 760px) {
  #programs .programs-section > .programs-timezone { margin-bottom: 20px; }
  #programs .programs-facts li { display: block; }
  #programs .programs-facts li > span:first-child { display: inline; margin-right: 6px; white-space: nowrap; }
  #programs .programs-facts li > span + span, #programs .programs-facts li > time { display: inline; }
}
/* v6 보완 2(독립 심사 반영): 포스터 없는 카드는 빈 회색 면 대신 날짜 포스터(접수 마감/시작 · 일 · 월·요일, 원래 aria-hidden 날짜 축을 타일 위에 겹침),
   문의처 링크는 카드 전체 누름 영역 위로, 600px 이하 제목 3줄·요약 2줄 유지·유형/상태 두 줄 고정·일정 날짜 조각 nowrap, 지난 프로그램 제목은 모집 카드보다 작게 */
#programs .programs-item:has(.programs-cover--none) .programs-date { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 5; padding: 12%; pointer-events: none; }
#programs .programs-item:has(.programs-cover--none) .programs-cover--none { background-image: none; }
#programs .programs-item:has(.programs-cover--none) .programs-note { order: -1; margin: 0 0 10px; font-size: .8125rem; }
#programs .programs-item:has(.programs-cover--none) .programs-day { font-size: 4.5rem; }
#programs .programs-item:has(.programs-cover--none) .programs-month { margin-top: 12px; font-size: .9375rem; }
#programs .programs-item:not(:has(.programs-date)) .programs-cover--none { background-image: url("assets/img/isa-symbol-144.png"); } /* 날짜도 없는 드문 경우만 심벌 */
#programs .programs-item[data-status="closed"] .programs-date { color: var(--isa-muted); }
#programs .programs-item[data-status="closed"] .programs-day { color: var(--isa-muted); }
#programs .programs-facts [data-program-contact] { position: relative; z-index: 1; } /* 카드 전체 누름(::after) 아래에 깔려 전화·메일이 안 열리던 문제 */
#programs .programs-facts [data-program-map], #programs .programs-maprow [data-program-map] { position: relative; z-index: 1; color: var(--isa-primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* 지도 링크도 같은 이유로 카드 누름 위에 둔다 */
#programs .programs-archive .programs-maprow { margin: 0 0 14px; text-align: left; }
@media (max-width: 760px) {
  #programs .programs-item:has(.programs-cover--none) .programs-day { font-size: 3rem; }
  #programs .programs-item:has(.programs-cover--none) .programs-month { margin-top: 8px; font-size: .8125rem; }
  #programs .programs-item:has(.programs-cover--none) .programs-note { font-size: .75rem; margin-bottom: 6px; }
  #programs .programs-archive:not(:has(img)) h3 { font-size: 1rem; }
  #programs .programs-facts li:has(time ~ time) time { white-space: nowrap; }
}
@media (max-width: 600px) {
  #programs .programs-title { -webkit-line-clamp: 3; }
  #programs .programs-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  #programs .programs-summary { display: none; } /* v6.2: 상세 페이지가 생겨 v6 A3("상세 전까지 390 요약 2줄 유지") 조건이 끝났다. 카드는 포스터와 사실만(같은 글이 상세 첫 문단에 있다, 심사 I1) */
  #programs .programs-item:has(.programs-cover--none) .programs-day { font-size: 2.5rem; }
}
/* ===== v6.1 (2026-10-26) 협력 단체 모집글(category "partner", DR-16) =====
   사용자: "프로그램 카테고리 하나 더 있어. 협력 외부 단체에서 요청한 모집글." 유형 칩·카드 유형 라벨은 Codex(i18n programsCategoryPartner)가 넣고,
   디자인은 주관 단체 이름(span.programs-organizer, meta 안; 접두 "주관 "은 i18n 문구에 둔다)만 다룬다. 카드는 유형과 상관없이 늘 상세로 가고 외부 이동은 상세의 버튼 하나뿐(독립 심사 I2·S1). 로고는 쓰지 않는다. */
#programs .programs-organizer { color: var(--isa-muted); font-weight: 400; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 긴 단체 이름(en 등)은 카드에서 한 줄 말줄임, 전체 이름은 상세에서 */
#programs .programs-item[data-category="partner"] .programs-category { font-weight: 600; color: var(--isa-ink); } /* 외부 단체 글임을 유형 라벨로 먼저 읽게 */
@media (max-width: 600px) {
  #programs .programs-organizer { font-size: .75rem; order: 3; } /* 유형 → 상태 → 주관: 상태 줄 높이를 이웃 카드와 맞춤(S5) */
  #programs .programs-foot { flex-wrap: wrap; row-gap: 4px; }
  #programs .programs-remaining { white-space: nowrap; }
}
/* ===== v6.2 (2026-10-27) 프로그램 상세 페이지·포스터 카드 실제 DOM(Codex 95897ced, DR-15·16) =====
   상세 뷰(forms/public-program-detail-view.js)와 골격 CSS(forms/public-program-detail.css, Codex 소유·이 파일 뒤에 로드)는 시안 program-detail*.html과 맞는다:
   포스터 4:5 contain 5/12 sticky | 정보 7/12, 760px 이하 한 열 + 하단 고정 버튼 막대, ISA는 "신청하기", partner는 외부 링크 하나 + 호스트 안내.
   디자인은 v5 규칙과 어긋나는 곳만 덮는다(#app 접두로 Codex 규칙보다 우선). */
#app .programs-detail .programs-detail-status { font-weight: 600; }
#app .programs-detail .programs-detail-status::before { background: var(--isa-line); box-sizing: border-box; } /* 모르는 상태값은 회색(주색 점이 되지 않게) */
#app .programs-detail .programs-detail-status[data-status="open"]::before { background: var(--isa-secondary); } /* 노랑 점은 마감 임박만(목록 상태 점과 같은 규칙) */
#app .programs-detail .programs-detail-status[data-status="closing"] { font-weight: 700; }
#app .programs-detail .programs-detail-status[data-status="closing"]::before { background: var(--isa-accent); }
#app .programs-detail .programs-detail-status[data-status="upcoming"]::before { background: transparent; border: 1.5px solid var(--isa-ink); }
#app .programs-detail .programs-detail-status[data-status="closed"] { color: var(--isa-muted); }
#app .programs-detail .programs-detail-status[data-status="closed"]::before { background: var(--isa-line); }
#app .programs-detail[data-category="partner"] .programs-detail-category { font-weight: 600; color: var(--isa-ink); } /* 카드와 같게 외부 단체 글임을 유형 라벨로 먼저 읽게(v6.1) */
#app .programs-detail .programs-detail-organizer-link { display: inline-block; max-width: 100%; overflow-wrap: anywhere; } /* "단체 소개 · example.org ↗"는 들어가면 통째로 다음 줄, 한 줄보다 긴 호스트는 안에서 감긴다(nowrap은 긴 도메인에서 가로 넘침, 심사 S1) */
#app .programs-detail .programs-detail-poster-symbol { color: var(--isa-muted); font-size: .75rem; } /* 포스터 없는 타일: 주색은 링크·버튼에만, 심벌 글자는 조용히(목록 날짜 포스터와 같은 무게) */
#app .programs-detail:lang(ja) .programs-detail-title { word-break: auto-phrase; } /* 목록 제목과 같은 일본어 구 단위 줄바꿈(ボラ/ンティア 끊김, S6). 미지원 브라우저는 Codex 값 그대로 */
#app .programs-detail .programs-detail-facts time { display: inline-block; max-width: 100%; } /* "Mon, Nov 16, / 2026"처럼 날짜 하나가 가운데서 끊기지 않게(칸보다 길면 안에서 감김) */
#app .programs-detail .programs-detail-back-arrow { margin-inline-end: .3em; } /* DR-18 공개 7로 화살표가 aria-hidden span이 되자 inline-flex 링크 안에서 뒤 공백이 접혀 "←목록으로"로 붙었다(v6.2 시안은 "← 목록으로") */
#app .programs-detail .programs-detail-cta > span[aria-hidden="true"] { margin-inline-start: .3em; } /* 외부 신청 버튼의 " ↗"도 같은 이유로 "페이지로↗"처럼 붙었다 */
@media (min-width: 761px) {
  #app .programs-detail .programs-detail-actions { row-gap: 8px; }
  #app .programs-detail .programs-detail-external-notice { flex-basis: 100%; } /* partner: 안내 한 줄 위, 버튼은 아래 왼쪽 — ISA 상세와 같은 자리(폭·언어마다 좌우로 옮겨 다니던 것, I3) */
}
@media (min-width: 1001px) {
  #app .programs-detail .programs-detail-facts li:has(.programs-detail-organizer-link) { grid-column: 1 / -1; } /* 주관 줄은 한 행 전체: "단체명 ·"만 남고 링크가 다음 줄로 떨어지던 것(I7) */
}
@media (max-width: 760px) {
  #app .programs-detail { padding-bottom: 48px; } /* 하단 고정 막대 예약은 푸터(Codex 192px)가 이미 맡으므로 본문 아래 이중 예약을 줄인다(빈 띠 약 200px, S3) */
  #app .programs-detail .programs-detail-poster-fallback { aspect-ratio: auto; gap: 8px; padding: 20px 16px; } /* 포스터 없는 상세: 첫 화면을 다 채우던 4:5 회색 타일을 낮은 날짜 띠로(I5) */
  #app .programs-detail .programs-detail-poster-day { font-size: 2.5rem; line-height: 1.1; }
}
/* 응답 상세: 본인 요청 파기 입구는 숨기기·복구 버튼과 선·간격으로 떼어 둔다(주의 색은 style.css의 [data-danger]) */
#app .isa-forms [data-response-erasure-entry] { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--isa-line); }
#app .isa-forms [data-response-erasure-entry] > p { margin: 8px 0 0; }
/* 색만으로 구분하지 않도록 경고 기호를 붙인다. 대체 텍스트를 비워 화면 읽기 프로그램은 버튼 이름만 읽는다 */
#app .isa-forms [data-response-erasure-entry] > button[data-danger]::before { content: "\26A0\FE0E" / ""; margin-right: 6px; }
/* 접수증: 접수 시각은 한국 시간으로, 접수 번호는 끝 8자리를 크게, 전체 번호는 작은 보조 줄로(PR-C 결정 5) */
/* 위 .forms-receipt p:first-of-type이 접수 번호 줄에 걸려도 8자리 strong은 자기 색(--isa-ink)으로 덮는다 */
#app .forms-receipt .forms-receipt-ref { color: var(--isa-muted); margin: 12px 0 2px; }
#app .forms-receipt .forms-receipt-number { color: var(--isa-ink); font-size: 1.5rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
#app .forms-receipt .forms-receipt-full { font-size: .8125rem; color: var(--isa-muted); overflow-wrap: anywhere; margin: 0 0 8px; }
#app .forms-receipt .forms-receipt-full small { font-size: inherit; } /* small의 기본 축소가 겹쳐 더 작아지지 않게 */
/* 복사 버튼은 글자만 보조 줄에 맞추고 forms.css의 44px 최소 높이(터치 크기)는 그대로 둔다. 좁은 폭에서 다음 줄로 내려가도 왼쪽 끝이 맞도록 바깥 여백은 두지 않는다(번호와는 공백 한 칸) */
#app .forms-receipt [data-receipt-copy] { padding: 2px 10px; font-size: .8125rem; }
#app .forms-receipt-contact { font-size: .875rem; color: var(--isa-muted); } /* 문의 안내: 접수증 안, 내 신청에서는 목록 위 한 번 */
/* 로그아웃 상태 신청 링크: 빨간 오류 대신 일반 안내와 로그인·회원가입 링크 */
#app .forms-signin-required .forms-signin-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
/* ===== C-3 접수 번호 상자(2026-11-03, C3 사양 §7). 위 V20 규칙(PR-C 결정 5)은 390 기준값으로 그대로 두고, 두 형제(.forms-receipt-ref·
   .forms-receipt-full)를 연한 폼 색 상자 하나처럼 덧쓴다. 끝 8자리는 761px 이상 30px, 그 아래는 V20의 1.5rem(사양 26px와 ±2px 안).
   복사 버튼은 forms.css의 44px 최소 높이를 그대로 두고(사양의 40px는 쓰지 않음, 수락 기준 44px), 390에서는 한 줄 전체. */
#app .forms-receipt .forms-receipt-ref{margin:0;padding:16px 18px 0;border:1px solid var(--isa-accent-100);border-bottom:0;border-radius:var(--isa-radius-md) var(--isa-radius-md) 0 0;background:var(--isa-accent-50);color:var(--isa-muted);font-size:13px}
#app .forms-receipt .forms-receipt-number{display:block;margin-top:2px;font-weight:800}
#app .forms-receipt .forms-receipt-full{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px;padding:4px 18px 16px;border:1px solid var(--isa-accent-100);border-top:0;border-radius:0 0 var(--isa-radius-md) var(--isa-radius-md);background:var(--isa-accent-50);font-size:12px}
#app .forms-receipt .forms-receipt-full small{min-width:0}
body:has(#forms-respondent, .forms-receipt) #app .forms-receipt button[data-receipt-copy]{padding:0 14px;border-radius:6px;font-size:13px}
/* 보조 버튼 모서리(리뷰 S6): 파일 위쪽 공개 화면 공통 2px(특이도 2,2,2)를 신청 화면·접수증 화면 안에서는 사양 §0의 6px로 덮는다(3,1,2 / 2,3,2).
   대상은 접수증 새로고침·답변 수정·취소, 초안 패널, 섹션 이전/다음, 작성 시간 연장, 새 응답 작성. 내 신청 화면 맨 위 버튼(목록 밖)은 그대로. */
body:has(#forms-respondent, .forms-receipt) #app :is(#forms-respondent, .forms-receipt, .isa-forms > [data-anonymous-session]) button:not(.forms-primary),body:has(#forms-respondent, .forms-receipt) #app .isa-forms:has(> .forms-receipt) > button:not(.forms-primary){border-radius:6px}
#app .forms-receipt .forms-receipt-contact{margin:16px 0 0;font-size:14px} /* 카드 안 문의 문장만(리뷰 S5): 내 신청 목록 위의 같은 문장은 V20 규칙 그대로 */
@media (min-width: 761px){#app .forms-receipt .forms-receipt-number{font-size:30px}}
@media (max-width: 760px){
  #app .forms-receipt{padding:24px 18px}
  #app .forms-mine-list .forms-receipt{padding:22px 18px}
  #app .forms-receipt h3{font-size:26px}
  #app .forms-receipt:is([data-receipt-state=confirmed], [data-receipt-state=waitlisted]) > h3::before{width:48px;height:48px;font-size:24px}
  #app .forms-receipt > button,body:has(#forms-respondent, .forms-receipt) #app .forms-receipt button[data-receipt-copy]{width:100%;margin-right:0}
}