/* 918 워케이션허브 최소 스타일. 외부 CDN 의존 없음(놀루트립과 동일 수준). */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Malgun Gothic", sans-serif; background: #f7f7f9; color: #1a1a1a; }
header.wh-header { padding: 12px 16px; background: #ffffff; border-bottom: 1px solid #e5e5ea; position: sticky; top: 0; z-index: 10; }
header.wh-header a { color: #1a1a1a; text-decoration: none; font-weight: 700; }
header.wh-header nav { margin-top: 6px; display: flex; gap: 12px; font-size: 13px; }
header.wh-header nav a { color: #4f6df5; font-weight: 400; }
main#app { max-width: 720px; margin: 0 auto; padding: 12px 16px 48px; }

.wh-filter-panel { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wh-select, .wh-search { padding: 8px; border: 1px solid #d0d0d6; border-radius: 8px; font-size: 13px; background: #fff; }
.wh-checkbox-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.wh-subtitle { font-size: 12px; color: #6b6b70; margin: 4px 0 12px; }

.wh-compare-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; }

.wh-list { display: flex; flex-direction: column; gap: 10px; }
.wh-card { background: #fff; border: 1px solid #e5e5ea; border-radius: 10px; padding: 12px; }
.wh-card-title { display: block; font-size: 15px; font-weight: 700; color: #1a1a1a; text-decoration: none; margin-bottom: 6px; }
.wh-card-meta { font-size: 12px; color: #6b6b70; margin: 4px 0; }

.wh-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.wh-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #eef0ff; color: #4f6df5; }
.wh-badge--private { background: #fff2e0; color: #b35c00; }
.wh-badge--public { background: #eef7ee; color: #2a7a2a; }
.wh-badge--closed { background: #f3e8ea; color: #a33a4a; }
.wh-badge--pending { background: #f4f0ff; color: #6a3fc2; }

.wh-title { font-size: 20px; margin: 8px 0; }
.wh-back { font-size: 13px; color: #4f6df5; text-decoration: none; display: inline-block; margin-bottom: 8px; }

.wh-section { background: #fff; border: 1px solid #e5e5ea; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.wh-section h2 { font-size: 14px; margin: 0 0 8px; }
.wh-row { display: flex; gap: 8px; padding: 4px 0; font-size: 13px; border-top: 1px solid #f0f0f2; }
.wh-row:first-child { border-top: none; }
.wh-row-label { flex: 0 0 88px; color: #6b6b70; }
/* ★F5-R2 수리 — flex item(wh-row-value)은 기본 min-width:auto라 긴 끊김없는 문자열(URL·직렬화된
   missing_notes 등, 실측: M03 상세 390px에서 scrollWidth 764px)을 만나면 줄바꿈하지 않고 부모
   컨테이너·문서 폭을 그대로 밀어낸다. min-width:0으로 flex 기본 최소폭을 풀고, overflow-wrap:anywhere
   로 공백 없는 긴 문자열도 강제 줄바꿈해 뷰포트를 넘지 않게 한다(내용을 자르지 않고 줄바꿈만 한다). */
.wh-row-value { flex: 1; min-width: 0; max-width: 100%; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }
.wh-raw-support, .wh-subsidy-notes, .wh-hint, .wh-source-notice { overflow-wrap: anywhere; word-break: break-word; }
.wh-hint { font-size: 12px; color: #8a8a90; margin: 4px 0 0; }

.wh-subsidy-table { display: flex; flex-direction: column; gap: 8px; }
.wh-subsidy-item { border: 1px solid #eee; border-radius: 8px; padding: 8px; font-size: 13px; }
.wh-subsidy-head { font-weight: 700; }
.wh-subsidy-extra { font-size: 12px; color: #6b6b70; margin-top: 2px; }
.wh-subsidy-notes { font-size: 11px; color: #999; margin-top: 4px; }
.wh-raw-support { white-space: pre-line; font-size: 13px; line-height: 1.5; }
.wh-overlay-box { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d8d8de; }
.wh-nonmonetary-list { margin: 4px 0; padding-left: 18px; font-size: 12px; color: #555; }

.wh-period-item { border-top: 1px solid #f0f0f2; padding: 6px 0; font-size: 13px; }
.wh-period-item:first-child { border-top: none; }
.wh-period-item--pending { color: #6a3fc2; }
.wh-period-label { font-weight: 700; font-size: 12px; }

.wh-source-line { font-size: 13px; }
.wh-source-notice { font-size: 12px; color: #a33a4a; background: #f9eef0; padding: 6px 8px; border-radius: 6px; display: inline-block; }
.wh-link { color: #4f6df5; }

.wh-btn { display: inline-block; padding: 10px 16px; border-radius: 8px; border: 1px solid #d0d0d6; background: #fff; color: #1a1a1a; font-size: 13px; text-decoration: none; cursor: pointer; margin: 4px 6px 4px 0; }
.wh-btn--primary { background: #4f6df5; color: #fff; border-color: #4f6df5; }
.wh-btn--disabled { background: #eee; color: #999; cursor: not-allowed; }
.wh-btn--small { padding: 4px 8px; font-size: 11px; }

.wh-deadline { font-size: 14px; padding: 10px; background: #fff; border: 1px solid #e5e5ea; border-radius: 8px; margin: 8px 0; }
.wh-deadline--closed { background: #f9eef0; border-color: #eccdd2; }
.wh-checklist { background: #fff; border: 1px solid #e5e5ea; border-radius: 10px; padding: 12px; margin: 8px 0; }
.wh-checklist-item { display: block; margin: 6px 0; font-size: 13px; }
.wh-apply-box { margin: 10px 0; }
.wh-disclaimer { font-size: 11px; color: #999; margin-top: 12px; }

.wh-compare-table { display: flex; flex-direction: column; overflow-x: auto; border: 1px solid #e5e5ea; border-radius: 10px; background: #fff; }
.wh-compare-row { display: grid; grid-template-columns: 88px repeat(4, minmax(140px, 1fr)); border-top: 1px solid #f0f0f2; }
.wh-compare-row--header { border-top: none; background: #fafafc; }
.wh-compare-cell { padding: 8px; font-size: 12px; word-break: keep-all; }
.wh-compare-cell--label { font-weight: 700; color: #6b6b70; }

.wh-error { color: #a33a4a; }