/* Plain-web version of the phone app (no framework). Contrast ratios are for normal-size text (WCAG AA ≥ 4.5:1). */
:root {
  color-scheme: light dark;
  --page: #F4F5F7;
  --card: #FFFFFF;
  --text: #111827;          /* 17.7:1 on card, 16.3:1 on page */
  --sub: #4B5563;           /* 7.6:1 on card, 6.9:1 on page, 6.8:1 on accent-soft */
  --line: #D1D5DB;
  --accent: #4F46E5;        /* white text on it: 6.3:1 */
  --accent-hover: #4338CA;
  --accent-soft: #EEF2FF;
  --link: #4338CA;          /* 7.9:1 on card */
  --accent-line: #4F46E5;   /* selected-tab underline, 3:1+ against the page (non-text) */
  --warn: #A84F08;          /* 5.6:1 on card, 5.0:1 on accent-soft */
  --danger: #B91C1C;        /* 5.9:1 on page */
  --btn: #E5E7EB;           /* text on it: 14.3:1 */
  --field: #FFFFFF;
  --placeholder: #6B7280;   /* 4.8:1 on field */
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #151922;
    --card: #1F2430;
    --text: #F3F4F6;        /* 14.1:1 on card */
    --sub: #AEB4BE;         /* 7.4:1 on card, 8.4:1 on page, 6.7:1 on accent-soft */
    --line: #374151;
    --accent-soft: #252B45;
    --link: #A5B4FC;        /* 7.8:1 on card */
    --accent-line: #A5B4FC;
    --warn: #FBBF24;        /* 9.3:1 on card, 8.3:1 on accent-soft */
    --danger: #FCA5A5;       /* 9.3:1 on page */
    --btn: #374151;         /* text on it: 9.4:1 */
    --field: #11141B;
    --placeholder: #9CA3AF; /* 7.3:1 on field */
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--text); }
body { font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

.bar {
  position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: max(8px, env(safe-area-inset-top)) 8px 8px; background: #111827; color: #FFFFFF; /* 17.7:1 */
}
.bar h1 { margin: 0; font-size: 17px; font-weight: 600; text-align: center; grid-column: 2; }
.bar-btn { background: transparent; color: #FFFFFF; border: 0; font: inherit; font-size: 14px; padding: 6px 8px; cursor: pointer; }
#back { grid-column: 1; justify-self: start; }
#repair { grid-column: 3; justify-self: end; font-size: 13px; }

main { padding: 12px; max-width: 760px; margin: 0 auto; }
.loading { color: var(--sub); text-align: center; margin-top: 40px; }
.card { background: var(--card); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.sub { color: var(--sub); font-size: 13px; }
.warn { color: var(--warn); font-size: 13px; }
.status { font-weight: 600; margin: 8px 0; white-space: pre-wrap; }
.status.error { color: var(--danger); }

button, .btn {
  font: inherit; border: 0; border-radius: 8px; padding: 9px 14px; background: var(--btn); color: var(--text); cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }
button.primary { background: var(--accent); color: #FFFFFF; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.wide { width: 100%; padding: 13px; font-size: 16px; }
button.toggled { outline: 2px solid var(--warn); }
input[type=text], input[type=search], select, textarea {
  font: inherit; width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
textarea { resize: vertical; min-height: 44px; }
.gap-top { margin-top: 10px; }
.indent { margin: 6px 0 8px 14px; flex-wrap: wrap; }
a { color: var(--link); }
.strong { font-weight: 600; }
.small-text { font-size: 13px; }
button.small { font-size: 12px; padding: 6px 10px; }
label.check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 14px; }

/* Pairing */
.pair { text-align: center; }
.pair img { margin: 16px auto 6px; display: block; }
.pair h2 { margin: 4px 0 14px; font-size: 20px; }
.pair .card { text-align: left; }
.code { font-size: 22px; text-align: center; letter-spacing: 2px; text-transform: uppercase; margin: 8px 0; }

/* List */
.tools { display: grid; gap: 8px; margin-bottom: 10px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.item { display: block; width: 100%; text-align: left; background: var(--card); color: var(--text); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.item:hover { outline: 1px solid var(--line); }
.item .title { font-weight: 600; font-size: 15px; margin: 4px 0 2px; }
.badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.badge { display: inline-block; color: #FFFFFF; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 6px; }
/* White text on each: 5.2, 5.0, 5.5, 5.7, 5.5:1 */
.b-Wishket { background: #2563EB; } .b-Kmong { background: #B45309; } .b-Soomgo { background: #0F766E; }
.b-PjtMarket { background: #7C3AED; } .b-draft { background: #047857; }
/* White text on each: 5.9, 5.5, 6.3, 5.4, 6.3, 7.1, 7.6:1 */
.b-WantedGigs { background: #0369A1; } .b-Elancer { background: #047857; } .b-Freemoa { background: #BE123C; } .b-JobKorea { background: #0E7490; } .b-Saramin { background: #A21CAF; } .b-Careerly { background: #3F6212; } .b-Remember { background: #475569; }
.star { color: var(--warn); }

/* Detail */
.detail h2 { margin: 6px 0; font-size: 18px; line-height: 1.35; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tablist { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 10px; }
.tab { background: transparent; border-radius: 8px 8px 0 0; padding: 9px 16px; color: var(--sub); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent-line); }
.tab:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.desc { white-space: pre-wrap; font-size: 14px; overflow-wrap: anywhere; }
.draft { background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; }
.field { margin: 12px 0; }
.field .label { font-weight: 600; margin-right: 6px; }
/* Field sources, white text: 미입력 6.5, 메모리 5.5, AI 6.3, 직접 5.0:1 */
.s-Empty { background: #B91C1C; } .s-Memory { background: #047857; } .s-Ai { background: #4F46E5; } .s-User { background: #B45309; }

/* In-browser QR scanner. White on black: 21:1. */
.qr-overlay { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.qr-overlay video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-overlay p { position: relative; margin: max(24px, env(safe-area-inset-top)) 16px 0; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.72); font-size: 17px; font-weight: 600; }
.qr-overlay button { position: relative; margin: 0 0 max(28px, env(safe-area-inset-bottom)); padding: 12px 36px; border-radius: 999px; background: #fff; color: #18181B; font-size: 17px; font-weight: 600; }

/* 프로젝트 | 정책 · 지원사업, and 목록 | 지도 */
.segmented { display: flex; gap: 4px; background: var(--btn); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.segmented button { flex: 1; background: transparent; color: var(--sub); font-weight: 600; padding: 8px 6px; white-space: nowrap; }
.segmented button[aria-selected="true"] { background: var(--card); color: var(--text); }
.segmented.small { margin: 0 0 0 auto; flex: 0 0 auto; }
.segmented.small button { padding: 4px 12px; font-size: 13px; }
.row.wrap { flex-wrap: wrap; }
.prefs summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.link-ish { color: var(--link); font-size: 13px; font-weight: 600; }
.map-box { height: 62vh; min-height: 320px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: var(--card); }
.map-frame { width: 100%; height: 100%; border: 0; display: block; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; font-size: 14px; }
.facts dt { color: var(--sub); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
/* Support-program sources and deadlines, white text: 7.3, 7.9, 7.3, 8.7, 7.1, 6.7, 6.9, 5.5:1; D-3 6.5, D-7 5.0, others 7.6:1 */
.b-Bizinfo { background: #9A3412; } .b-KStartup { background: #9D174D; } .b-Nipa { background: #155E75; } .b-Kocca { background: #6B21A8; } .b-Egbiz { background: #166534; } .b-University { background: #1D4ED8; } .b-Kiria { background: #854D0E; } .b-Snip { background: #0F766E; }
.b-cat { background: #475569; }
/* 회사: 모집 중 5.5:1, 제외 6.5:1, 메모 6.3:1 (white text) */
.b-open { background: #047857; } .b-ex { background: #B91C1C; } .b-memo { background: #4F46E5; }
.link-button { background: transparent; border: 0; padding: 0; color: var(--link); font-weight: 600; text-decoration: underline; text-align: left; cursor: pointer; }
.due-1 { background: #B91C1C; } .due-2 { background: #B45309; } .due-n { background: #475569; }
.files .file { margin-top: 6px; font-size: 14px; }
details.card summary { cursor: pointer; font-weight: 600; }
details.card .desc { margin-top: 8px; font-size: 13px; }