:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #050505;
  --muted: #586170;
  --line: #dfe3e8;
  /* Separators can be faint; a control's own boundary needs 3:1 (WCAG 1.4.11). */
  --control-line: #8b93a1;
  --max: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  line-height: 1.55;
}

main {
  width: min(var(--max), calc(100% - 112px));
  margin: 0 auto;
  padding: 72px 0 92px;
}

.top-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 52px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 500;
}

.top-links a {
  display: inline-block;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
}

.profile {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 92px;
}

.avatar {
  width: 230px;
  height: 230px;
  display: block;
  object-fit: cover;
  border-radius: 28px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0;
}

.page-head h1 {
  font-size: 28px;
  line-height: 1.15;
}

.location {
  margin-top: 18px;
  color: var(--muted);
  font-size: 26px;
  line-height: 1.25;
}

#seoul-time {
  margin-left: 10px;
  color: #6b7280;
  font-size: 17px;
  white-space: nowrap;
}

.links {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: 28px;
  color: #505968;
}

.links a {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
}

.links svg {
  width: 32px;
  height: 32px;
  display: block;
  fill: currentColor;
}

.links a:hover {
  color: var(--ink);
}

.copy {
  max-width: 960px;
}

.copy p {
  margin-bottom: 30px;
}

.page-head {
  margin-bottom: 46px;
}

.page-head p {
  max-width: 850px;
  margin-top: 22px;
  color: var(--muted);
}

.kicker {
  display: block;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 18px;
}

/* Sits under the h1 on /about: how the name is said, in both languages. */
.name-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 20px;
}

.name-note b {
  color: var(--ink);
  font-weight: 600;
}

.rows,
.section {
  margin-top: 86px;
}

h2 {
  margin-bottom: 22px;
  font-size: 24px;
  line-height: 1.2;
}

h3 {
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1.15;
}

.library {
  margin-top: 76px;
}

.startup-tools {
  margin-top: 46px;
}

/* Community invites sit between the filters and the table: close enough to the
   records to feel relevant, outside the scrollport so they never compete with
   the data. */
.startup-community {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 26px;
}

.startup-community-label {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.4;
}

.startup-community-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.community-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 8px 15px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.community-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: currentColor;
}

.community-link:hover {
  border-color: #b9c0cb;
  background: #fafbfc;
}

.community-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

button.community-link {
  font-family: inherit;
  cursor: pointer;
}

.startup-alert-form {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--control-line);
  border-radius: 12px;
  background: #fff;
  max-width: 640px;
}

.startup-alert-howto {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 12px;
}

#startup-alert-subscribe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.startup-alert-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 260px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.startup-alert-field input {
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  padding: 8px 12px;
  border: 1px solid var(--control-line);
  border-radius: 8px;
}

.startup-alert-field input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.startup-alert-status {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.startup-alert-status[data-tone="error"] {
  color: #b42318;
}

.startup-alert-status[data-tone="ok"] {
  color: #067647;
}

.startup-filter-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

/* Filter dropdowns. The menu holds the same chips the table uses, so the
   control is filtering with the vocabulary it is filtering on. */
.filter-select {
  position: relative;
}

.filter-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 7px 13px;
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.filter-select-trigger:hover {
  border-color: #b9c0cb;
  background: #fafbfc;
}

.filter-select-trigger.is-filtered {
  border-color: var(--ink);
}

.filter-select-label {
  color: #6b7280;
}

.filter-select-value {
  font-weight: 600;
}

.filter-select-caret {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #7b8290;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}

.filter-select-trigger[aria-expanded="true"] .filter-select-caret {
  transform: rotate(180deg);
}

.filter-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 12;
  display: grid;
  gap: 2px;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, 90vw);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.12);
}

.filter-select-menu[hidden] {
  display: none;
}

.filter-select-menu .filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 15px;
  text-align: left;
}

.filter-select-menu .filter.is-active::after {
  content: "✓";
  margin-left: auto;
  padding-left: 10px;
  font-weight: 700;
}

.field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 17px;
}

.startup-search {
  width: min(560px, 100%);
  margin: 0 0 18px;
  /* --line is 1.29:1 — fine for a separator, not for the only edge a control has. */
  border: 1px solid var(--control-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 11px 13px;
  font: inherit;
  font-size: 18px;
  line-height: 1.25;
}

.startup-search:focus,
.filter:focus-visible,
.filter-select-trigger:focus-visible,
.startup-item:focus-visible,
.panel-close:focus-visible,
.panel-link:focus-visible,
.source-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.resource-note.is-error {
  color: #b42318;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}

.filter {
  appearance: none;
  border: 1px solid var(--chip-border, var(--line));
  border-radius: 999px;
  background: var(--chip-bg, #fff);
  color: var(--chip-fg, #505968);
  padding: 8px 13px;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.filter:hover,
.filter.is-active {
  border-color: color-mix(in srgb, var(--chip-fg, var(--ink)) 70%, #000 30%);
  color: var(--chip-fg, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-fg, var(--ink)) 18%, transparent);
}

.filter[data-startup-filter="all"] {
  --chip-bg: #f7f8fa;
  --chip-border: #cfd5de;
  --chip-fg: #343b47;
}

/* Startup record table
   One value per column. Every cell holds a single field on a single line and
   truncates with an ellipsis, so row height is constant and the columns stay
   scannable — anything that needs room lives in the detail panel instead.

   The track widths are declared once, here, and shared by the header and every
   row, so the two can never drift apart. Their sum is deliberately wider than
   the page: the table scrolls sideways rather than squeezing eight values into
   slivers. --startup-table-min is derived from the same variables as the grid
   template so the scroll width and the tracks cannot disagree. */
.startup-table {
  --w-closes: 96px;
  --w-left: 76px;
  --w-program: 300px;
  --w-category: 124px;
  --w-eligibility: 152px;
  --w-support: 154px;
  --w-region: 124px;
  --w-agency: 200px;
  --col-gap: 14px;
  --row-pad: 14px;
  --startup-table-min: calc(
    var(--w-closes) + var(--w-left) + var(--w-program) + var(--w-category) +
    var(--w-eligibility) + var(--w-support) + var(--w-region) + var(--w-agency) +
    7 * var(--col-gap) + 2 * var(--row-pad)
  );
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  /* A viewport, not a run of rows. Capping the height keeps the horizontal
     scrollbar on screen — at 20 rows it would otherwise sit a thousand pixels
     below the fold, so nobody would know the far columns exist — and gives the
     header something to stick to. */
  max-height: min(76vh, 820px);
  overflow: auto;
  overscroll-behavior-x: contain;
  /* Chromium can still count wide descendants toward the root scroll area even
     when their ancestor scrolls. Paint containment keeps all eight columns in
     this scrollport instead of giving the page a second horizontal scroller. */
  contain: paint;
}

/* Styling the bar opts out of macOS overlay scrollbars, so the fact that there
   are more columns to the right is visible before anyone tries to scroll.
   Chrome ignores these rules the moment `scrollbar-color` is set to anything
   but auto, which is why the standard properties are scoped to engines that
   have no ::-webkit-scrollbar at all. */
@supports not selector(::-webkit-scrollbar) {
  .startup-table {
    scrollbar-color: #828a97 #f3f5f7;
  }
}

.startup-table::-webkit-scrollbar {
  height: 14px;
}

.startup-table::-webkit-scrollbar-track {
  background: #f3f5f7;
}

.startup-table::-webkit-scrollbar-thumb {
  border: 3px solid #f3f5f7;
  border-radius: 999px;
  background: #828a97;
}

/* A table wants width; the 1100px page column is set for prose. Break out of
   it once the viewport can actually pay for it — the 56px inset keeps the
   table clear of the vertical scrollbar, so this never adds page scroll. The
   frame above is what makes the wider box read as a panel rather than a row
   that drifted out of the column. */
@media (min-width: 1180px) {
  .startup-table {
    width: min(calc(100vw - 56px), 1560px);
    margin-left: calc((100% - min(calc(100vw - 56px), 1560px)) / 2);
  }
}

.startup-table-head,
.startup-record-row,
#startup-programs {
  min-width: var(--startup-table-min);
}

.startup-table-head,
.startup-record-row {
  display: grid;
  /* Spare width goes to the program name first — it is the column people
     actually read — and to the agency second. */
  grid-template-columns:
    var(--w-closes) var(--w-left) minmax(var(--w-program), 2.4fr)
    var(--w-category) var(--w-eligibility) var(--w-support)
    var(--w-region) minmax(var(--w-agency), 1fr);
  gap: 0 var(--col-gap);
  align-items: center;
  padding-left: var(--row-pad);
  padding-right: var(--row-pad);
}

#startup-programs {
  margin-top: 0;
}

/* Sticks to the table's own scrollport, so it holds while the rows scroll
   under it and still travels sideways with the columns. */
.startup-table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 10px;
}

.startup-table-head span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.startup-record-row {
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background-color 120ms ease;
}

.startup-record-row:first-child {
  border-top: 0;
}

.startup-record-row:hover {
  background: #f6f7f9;
}

.startup-record-row:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  background: #f6f7f9;
}

/* The ellipsis is the contract that keeps the grid aligned whatever the
   crawler returns; the full value is on the cell's title attribute. */
.startup-cell {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

/* #b4bac4 measured 1.95:1 on white. The dash still reads as "nothing here"
   because it is a dash, not because it is faint. */
.startup-cell.is-empty {
  color: #6b7280;
}

.startup-cell--closes {
  color: #46505f;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.startup-cell--program {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
}

.startup-record-row:hover .startup-cell--program {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.startup-cell--agency {
  font-size: 15px;
}

/* Inline-block rather than inline-flex so a long label ellipses inside the
   chip instead of forcing the column open. */
.startup-record-row .meta-chip,
.startup-table .deadline-badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.startup-record-row .meta-chip {
  min-height: 0;
  padding: 2px 8px;
  font-size: 14px;
  line-height: 1.5;
}

.resource-row[hidden] {
  display: none;
}

/* #8a919d measured 3.17:1, and the 0.62 opacity took the row's own sentence to
   1.93:1 — that sentence is the content, and it contains focusable terms, so the
   inactive-component exemption does not apply. */
.ghost-row {
  color: #6b7280;
  cursor: default;
}

.ghost-row::after {
  content: attr(data-coming-soon);
  justify-self: end;
  color: #6b7280;
  font-size: 16px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.ghost-row:hover::after,
.ghost-row:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.ghost-row .tag {
  display: none;
}

/* Base reset shared by every record, whether it renders as the server-side
   <a> fallback or the hydrated <button>. Layout lives on .startup-record-row
   only — keeping it out of here is what stops the two from fighting. */
.startup-item {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border: 1px solid var(--chip-border, #d9dee6);
  border-radius: 999px;
  background: var(--chip-bg, #f6f7f9);
  color: var(--chip-fg, #46505f);
  padding: 3px 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.meta-chip--business,
.filter[data-startup-filter="Business support"] {
  --chip-bg: #edf8f0;
  --chip-border: #b9dfc4;
  --chip-fg: #25633a;
}

.meta-chip--hiring,
.filter[data-startup-filter="Hiring / workforce"] {
  --chip-bg: #fff4e6;
  --chip-border: #f2c27f;
  --chip-fg: #815313;
}

.meta-chip--events,
.filter[data-startup-filter="Events / networking"] {
  --chip-bg: #f3efff;
  --chip-border: #cfc0f4;
  --chip-fg: #59419b;
}

.meta-chip--global,
.filter[data-startup-filter="Global"] {
  --chip-bg: #eef5ff;
  --chip-border: #b9d5fa;
  --chip-fg: #225a9d;
}

.meta-chip--export,
.filter[data-startup-filter="Sales channels / overseas expansion"] {
  --chip-bg: #eaf8f8;
  --chip-border: #addcdb;
  --chip-fg: #1f6766;
}

.meta-chip--deadline,
.filter[data-startup-filter="deadline"] {
  --chip-bg: #fff0f0;
  --chip-border: #f3b2b2;
  --chip-fg: #9a2b2b;
}

.meta-chip--deadline-d2 {
  --chip-bg: #fff7da;
  --chip-border: #e4c64e;
  --chip-fg: #735f08;
}

.meta-chip--deadline-week {
  --chip-bg: #f8f5e8;
  --chip-border: #d9cc8f;
  --chip-fg: #665b26;
}

.meta-chip--requires,
.filter[data-startup-filter="requires company"] {
  --chip-bg: #fff7da;
  --chip-border: #e4c64e;
  --chip-fg: #735f08;
}

.meta-chip--likely,
.meta-chip--possible,
.filter[data-startup-filter="open"],
.filter[data-startup-filter="likely possible"],
.filter[data-startup-filter="pre-founder possible"] {
  --chip-bg: #edf8f0;
  --chip-border: #b9dfc4;
  --chip-fg: #25633a;
}

.meta-chip--unknown,
.filter[data-startup-filter="unknown"] {
  --chip-bg: #f2f4f7;
  --chip-border: #cfd5de;
  --chip-fg: #596273;
}

.meta-chip--stage,
.meta-chip--region,
.meta-chip--karting {
  --chip-bg: #f5f3ef;
  --chip-border: #d9d1c4;
  --chip-fg: #5f5446;
}

/* Media types reuse the palette the startup chips already established rather
   than introducing a second set of hues for the same component. */
.meta-chip--podcast {
  --chip-bg: #f3f0ff;
  --chip-border: #cabff6;
  --chip-fg: #4b348f;
}

.meta-chip--news {
  --chip-bg: #eef4ff;
  --chip-border: #b9cdf2;
  --chip-fg: #234b8f;
}

.meta-chip--event {
  --chip-bg: #edf8f0;
  --chip-border: #b9dfc4;
  --chip-fg: #25633a;
}

.meta-chip--video,
.meta-chip--channel {
  --chip-bg: #f2f4f7;
  --chip-border: #cfd5de;
  --chip-fg: #596273;
}

.meta-chip--money,
.filter[data-startup-filter="support:financial-small"] {
  --chip-bg: #ecf8ef;
  --chip-border: #acd9b8;
  --chip-fg: #28613a;
}

.meta-chip--consulting,
.filter[data-startup-filter="support:consulting"] {
  --chip-bg: #eef4ff;
  --chip-border: #bad0f4;
  --chip-fg: #2d568d;
}

.meta-chip--mentoring,
.filter[data-startup-filter="support:mentoring"] {
  --chip-bg: #f8f0ff;
  --chip-border: #d7bdec;
  --chip-fg: #663f8f;
}

.meta-chip--online,
.filter[data-startup-filter="support:online-marketing"] {
  --chip-bg: #eaf7f5;
  --chip-border: #a8d8d2;
  --chip-fg: #1f6760;
}

.meta-chip--offline,
.filter[data-startup-filter="support:offline-marketing"] {
  --chip-bg: #fff1e8;
  --chip-border: #efba93;
  --chip-fg: #83512e;
}

.meta-chip--rd {
  --chip-bg: #edf2fb;
  --chip-border: #bdcbe4;
  --chip-fg: #344f7b;
}

.meta-chip--period,
.meta-chip--checked,
.meta-chip--default {
  --chip-bg: #f7f8fa;
  --chip-border: #dfe3e8;
  --chip-fg: #5f6877;
}

/* The generic two-column row. Startup records live inside a .rows section but
   carry their own grid, so they are excluded here — `.rows a` would otherwise
   outrank .startup-record-row on specificity and flatten the table. */
.rows a:not(.startup-item),
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.rows a:not(.startup-item):last-child,
.row:last-child {
  border-bottom: 1px solid var(--line);
}

.rows span,
.row span {
  min-width: 0;
}

.rows a:not(.startup-item):hover span {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.term {
  position: relative;
  border-bottom: 1px dotted #8a919d;
  color: inherit;
  font-style: normal;
  cursor: help;
}

.term-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 15;
  width: min(280px, 80vw);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 11px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}

/* Flipped by placeTermTooltip() before the tooltip opens: a pseudo-element
   cannot measure the viewport, so a term near an edge would otherwise open a
   280px card off-screen. */
/* A chip that carries a definition keeps its chip border and signals the
   tooltip with a dotted underline instead. */
.meta-chip.term {
  border-bottom-color: var(--chip-border, #d9dee6);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
}

.term--flip .term-tip {
  left: auto;
  right: 0;
}

.term--below .term-tip {
  top: calc(100% + 8px);
  bottom: auto;
}

/* :focus, not :focus-visible — a tap on a touch device gives focus without
   ever counting as focus-visible, which left the definition unreachable. */
/* :hover on the tip itself keeps it open while the pointer travels onto it —
   WCAG 1.4.13 "hoverable". */
.term:hover .term-tip,
.term:focus .term-tip,
.term-tip:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.term--dismissed .term-tip,
.term--dismissed:hover .term-tip {
  opacity: 0;
  visibility: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.startup-panel-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
}

.startup-panel-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.icon-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.copy-page-button {
  width: auto;
  grid-auto-flow: column;
  gap: 8px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button:hover {
  color: var(--ink);
  border-color: #d8dbe1;
  background: #f8f8f8;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.icon-button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.startup-panel-feedback {
  min-height: 20px;
  margin: -14px 0 12px;
  color: #6f7787;
  font-size: 14px;
  text-align: right;
}

.startup-source-detail {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

/* The disclaimer supports the source card; at the panel's default 20px it
   competed with it. */
.startup-source-detail #startup-panel-source-note {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
}

.startup-source-detail h3 {
  font-size: 19px;
}

.startup-source-detail p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.55;
}

/* Segmented EN/KR control. Same pill vocabulary as the community-link buttons
   so the panel does not introduce a new control shape. */
.panel-lang-toggle {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 14px;
  padding: 2px;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  background: #fff;
}

.panel-lang-toggle button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 5px 13px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.panel-lang-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

.panel-lang-toggle button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.startup-source-full {
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

time,
.tag {
  color: #6f7787;
  font-size: 22px;
  white-space: nowrap;
  text-align: right;
}

.deadline-badge {
  justify-self: end;
  border: 1px solid var(--chip-border, var(--line));
  border-radius: 999px;
  background: var(--chip-bg, #f7f8fa);
  color: var(--chip-fg, #596273);
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}

/* In the record table the countdown is a compact cell value, not a trailing
   tag: left-aligned and sized to be readable when scanning a long list. */
.startup-cell--left .deadline-badge {
  justify-self: start;
  border: 0;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: nowrap;
}

/* One alarm level, then a gradient. Only "closes today" gets the solid fill —
   white on #d92d20 is 4.83:1, while white on the old orange was 2.51:1 and
   failed AA outright. Everything short of today is a tint, which also makes
   the ladder read better: solid means act now, tint means soon. */
.meta-chip--deadline-today {
  --chip-bg: #d92d20;
  --chip-border: #d92d20;
  --chip-fg: #fff;
}

.meta-chip--deadline-tomorrow {
  --chip-bg: #fff3e8;
  --chip-border: #f1b374;
  --chip-fg: #8a4a12;
}

.ko-tag {
  max-width: 680px;
  white-space: normal;
  text-align: left;
  line-height: 1.45;
}

.startup-detail-copy {
  margin-top: 72px;
}

.startup-detail-copy p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The timeline now lives inside /about, under its own heading, so it needs the
   same top margin the .rows sections get. */
.timeline-section {
  margin-top: 86px;
}

.section-lede {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.45;
}

.timeline {
  border-top: 1px solid var(--line);
}

.timeline-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 34px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.timeline-item time,
.timeline-when {
  color: #6f7787;
  font-size: 22px;
}

.timeline-item p,
.project p,
.resource-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 21px;
}

.project-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.project {
  border-bottom: 1px solid var(--line);
}

.project-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 22px 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.project-trigger:hover .project-name {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.project-logo,
.panel-logo {
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.project-logo img,
.panel-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.project-mark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}

.project-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.project-topline,
.panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #6f7787;
  font-size: 17px;
  line-height: 1.2;
}

.startup-panel .panel-meta {
  gap: 7px;
}

.project-name {
  font-size: 23px;
  line-height: 1.2;
}

.project-summary {
  max-width: 920px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.45;
}

/* Stop the page behind the panel from scrolling under it. */
.has-open-panel,
.has-open-panel body {
  overflow: hidden;
}

.panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.68);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.project-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  /* Wide enough for the source fields — documents, support and contact are
     paragraphs, not labels — without covering the table behind it. */
  width: min(680px, 100vw);
  height: 100dvh;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: #fff;
  padding: 32px;
  transform: translateX(100%);
  transition: transform 220ms ease;
}

.project-panel[aria-hidden="false"] {
  transform: translateX(0);
}

.panel-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.panel-close {
  display: block;
  margin: 0 0 34px auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.panel-close:hover {
  color: var(--ink);
}

.panel-logo {
  margin-bottom: 22px;
}

.project-panel h2 {
  margin: 10px 0 18px;
  font-size: 25px;
}

.project-panel p {
  color: var(--muted);
  font-size: 20px;
}

.panel-facts {
  display: grid;
  gap: 0;
  margin: 28px 0;
  border-top: 1px solid var(--line);
}

.panel-facts div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.panel-facts dt {
  color: #6f7787;
  font-size: 17px;
}

.panel-facts dd {
  margin: 0;
  font-size: 18px;
}

/* Skeleton bars shown while the detail endpoint call is in flight: the list
   API has no source-profile fields, so rows like 지원내용 or 제출서류 would
   otherwise be missing on first paint and pop in a beat later. */
.panel-skeleton {
  display: block;
  height: 14px;
  margin: 6px 0;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--line) 25%, #e8ebf1 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: panel-skeleton-shimmer 1.2s ease-in-out infinite;
}

.panel-skeleton--short {
  width: 55%;
}

@keyframes panel-skeleton-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* Facts render with the table's chips rather than as grey text saying the same
   thing in different words. */
.panel-fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Panel structure: the questions a founder asks, in the order they ask them. */
.panel-title-ko {
  margin-top: 6px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.4;
}

.panel-title-ko[hidden] {
  display: none;
}

.startup-panel .panel-generated {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.panel-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-top: 14px;
  border-left: 3px solid #d1d5db;
  padding-left: 11px;
}

.startup-panel .panel-lede {
  margin-top: 10px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.5;
}

.panel-section {
  margin-top: 30px;
}

.panel-section h3 {
  margin-bottom: 12px;
  font-size: 18px;
  letter-spacing: 0.01em;
}

.panel-section .panel-facts {
  margin: 0;
}

/* The source writes lists inline; rendering one 900-character paragraph is what
   made these unreadable. */
.panel-fact-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.panel-fact-list li {
  line-height: 1.45;
}

.startup-panel .panel-checked {
  margin: 0;
  color: #46505f;
  font-size: 14px;
  line-height: 1.4;
}

.source-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  padding: 12px 14px;
  text-decoration: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.source-card:hover {
  border-color: #b9c0cb;
  background: #fafbfc;
}

.source-card-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 4px;
  object-fit: contain;
}

.source-card-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.source-card-title {
  font-size: 17px;
  font-weight: 600;
}

.source-card-host {
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.source-card-arrow {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-left: auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.source-card:hover .source-card-arrow {
  stroke: var(--ink);
}

.panel-link {
  display: inline-block;
  color: var(--ink);
  font-size: 19px;
}

/* Media cards
   These are thumbnails first — a 96px image in a text row was too small to be
   worth the request, and the type label was riding in a <time> element that
   never held a time. The type is a chip from the shared vocabulary now. */
.media-section {
  margin-top: 64px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.media-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.media-card:hover {
  border-color: #b9c0cb;
  box-shadow: 0 10px 26px rgb(0 0 0 / 0.09);
  transform: translateY(-2px);
}

.media-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.media-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-bottom: 1px solid var(--line);
  object-fit: cover;
  background: #f4f5f7;
}

.media-card-body {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 14px 15px 16px;
}

.media-card-body .meta-chip {
  justify-self: start;
}

.media-card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.32;
}

.media-card:hover .media-card-title {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.media-card-note {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
}

.media-card-source {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: #6b7280;
  font-size: 13px;
}

.media-card-source svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link-preview {
  position: fixed;
  inset: 0;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.link-preview.is-open {
  opacity: 1;
  pointer-events: auto;
}

.link-preview__scrim {
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.76);
}

.link-preview__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, calc(100vw - 34px));
  max-height: min(760px, calc(100dvh - 34px));
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.16);
  transform: translate(-50%, calc(-50% + 10px));
  transition: transform 180ms ease;
}

.link-preview.is-open .link-preview__panel {
  transform: translate(-50%, -50%);
}

.link-preview__panel h2 {
  margin: 8px 0 18px;
  font-size: 22px;
}

.link-preview__media {
  margin-bottom: 18px;
}

.link-preview__media iframe,
.link-preview__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f5f7;
}

.link-preview__media img {
  height: auto;
  object-fit: contain;
}

.preview-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fbfbfc;
}

.preview-card p {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 20px;
}

.preview-card span,
.preview-card small {
  display: block;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.preview-card small {
  margin-top: 14px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}

footer {
  margin-top: 58px;
  color: var(--muted);
}

@media (max-width: 720px) {
  body {
    font-size: 20px;
  }

  main {
    width: min(100% - 32px, var(--max));
    padding: 28px 0 64px;
  }

  .top-links {
    gap: 18px;
    margin-bottom: 34px;
    font-size: 18px;
  }

  .profile {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 56px;
  }

  .avatar {
    width: min(70vw, 260px);
    height: min(70vw, 260px);
  }

  h1 {
    font-size: clamp(58px, 17vw, 72px);
  }

  .location {
    font-size: 20px;
  }

  #seoul-time {
    font-size: 15px;
  }

  .links {
    gap: 24px;
  }

  .links svg {
    width: 27px;
    height: 27px;
  }

  h2 {
    font-size: 22px;
  }

  .page-head h1 {
    font-size: 26px;
  }

  .filters {
    gap: 8px;
  }

  .filter {
    font-size: 16px;
    padding: 8px 11px;
  }

  .rows a:not(.startup-item),
  .row,
  .timeline-item,
  .two-col,
  .project-trigger {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .media-section {
    margin-top: 44px;
  }

  .media-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* The table stays a table on a phone — it just scrolls. Stacking it into a
     card is what made the columns unreadable in the first place. Narrower
     tracks so more than one column is on screen at a time. */
  .startup-table {
    --w-closes: 88px;
    --w-left: 70px;
    --w-program: 230px;
    --w-category: 116px;
    --w-eligibility: 142px;
    --w-support: 144px;
    --w-region: 116px;
    --w-agency: 168px;
    --col-gap: 12px;
    margin-top: 16px;
  }

  .startup-cell {
    font-size: 15px;
  }

  .startup-cell--program {
    font-size: 16px;
  }

  .startup-cell--left .deadline-badge {
    font-size: 13px;
  }

  .startup-panel-toolbar {
    align-items: flex-start;
  }

  .startup-panel-toolbar-group {
    max-width: calc(100% - 52px);
  }

  .ghost-row::after {
    justify-self: start;
  }

  .project-logo {
    margin-bottom: 12px;
  }

  .project-panel {
    /* Bottom peek on mobile: slides up from the bottom edge, like the sheet
       pattern phone users already know, with a handle as the affordance. */
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 88dvh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    padding: 10px 18px calc(28px + env(safe-area-inset-bottom));
  }

  .project-panel[aria-hidden="false"] {
    transform: translateY(0);
  }

  .project-panel::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 2px;
    background: var(--control-line);
  }

  .panel-facts div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  time,
  .tag {
    text-align: left;
    white-space: normal;
  }

  .deadline-badge {
    justify-self: start;
  }
}

/* The old list named four elements and missed every transform added since —
   the media card lift, the dropdown caret spin, the tooltip slide. Naming the
   properties instead of the elements is what stops the next one slipping. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .media-card:hover {
    transform: none;
  }
}