@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════════
   런닝인사이드 — UTMB 껍데기 × 마라톤온라인 일정표          2026-08-23
   ══════════════════════════════════════════════════════════════════════════

   ■ 이 파일이 맡는 것
       tokens.css(색·간격) 와 app.css(부품) 위에 «그 사이트다운 겉모습» 만 얹는다.
       app.css 의 규칙을 지우지 않는다. 덮어쓰기만 한다.

   ■ 두 곳에서 가져왔다
       겉모습 = UTMB(utmb.world)
         · 남색 #000D44 과 시안 #00DBFF 단 두 색
         · 둥근 모서리가 «한 군데도» 없다
         · 대각선 절단(skew)이 머리·꼬리·배지를 관통한다
         · 섹션 제목이 화면 폭을 가득 채울 만큼 크다
         · 사진은 전면(full-bleed), 그 위에 어둠막이, 그 위에 글자
       일정표 = 마라톤온라인(marathon.pe.kr)
         · 한국 러너는 «표» 로 본다. 카드 격자가 아니다.
         · 한 줄에 : 날짜(요일) │ 대회명 + 거리 │ 장소 │ 접수상태
         · 표 위에 필터가 «한 줄» 로 붙고, 그 옆에 총 건수를 적는다
         ★사장님 지시 : 「한국인은 리스트 스타일 마라톤 일정을 선호한다」

   ■ 지키는 것
       · 색만으로 상태를 알리지 않는다 — 점 + 글자를 «항상 같이» (화면설계서 §9-②)
       · 터치 목표 44px (§9-③)
       · 시안(#00DBFF)은 «면» 으로만. 흰 바탕 위 글자로 쓰면 1.70:1 이라 못 읽는다
       · hex 를 직접 쓰지 않는다 — 전부 var(). 단 대각선·어둠막이의 rgba 는 예외
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ 1. 뼈대 ═══════════════════════════════════════════════════════════════ */

.ri-wrap { max-width: var(--ri-container); margin: 0 auto; padding: 0 16px; }

/* 화면 끝까지 나가는 띠. 안쪽 글은 다시 가운데로 모은다. */
.u-band { width: 100%; }
.u-band__in { max-width: var(--ri-container); margin: 0 auto; padding: 0 16px; }

.u-band--ink  { background: var(--ri-brand); color: var(--ri-brand-ink); }
.u-band--deep { background: var(--ri-deep);  color: var(--ri-brand-ink); }
.u-band--soft { background: var(--ri-surface-2); }

/* 대각선 절단 — UTMB 를 UTMB 로 보이게 하는 단 하나의 장치.
   ★clip-path 를 못 읽는 브라우저에서는 «그냥 네모» 가 된다. 내용은 안 잘린다. */
.u-slash { position: relative; }
@supports (clip-path: polygon(0 0, 1px 0, 0 1px)) {
  .u-slash--b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); }
  .u-slash--t { clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); }
}


/* ══ 2. 머리 — 얇은 남색 리본 + 흰 메뉴바 ══════════════════════════════════ */

.u-ribbon {
  background: var(--ri-brand); color: var(--ri-brand-ink);
  font-size: 12px; line-height: 1;
}
.u-ribbon__in {
  max-width: var(--ri-container); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 14px; min-height: 34px;
}
.u-ribbon__tag {
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
/* 흐르는 소식 한 줄. ★스스로 움직이는 것은 «멈출 수» 있어야 한다(접근성).
   그래서 애니메이션을 쓰지 않고 «가로 스크롤» 로 둔다 — 사용자가 민다. */
.u-ribbon__news {
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; -ms-overflow-style: none;
}
.u-ribbon__news::-webkit-scrollbar { display: none; }
.u-ribbon__news a { color: inherit; text-decoration: none; margin-right: 22px; }
.u-ribbon__news a:hover { text-decoration: underline; }

/* 오른쪽 끝 시안 블록 — 「내 기록 서랍」. UTMB 의 MYUTMB 자리다. */
.u-ribbon__me {
  background: var(--ri-accent); color: var(--ri-accent-ink);
  font-weight: 800; letter-spacing: .06em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 16px; margin-right: -16px;
  white-space: nowrap;
}
.u-ribbon__me:hover { filter: brightness(1.08); }

.u-head {
  background: var(--ri-surface);
  border-bottom: 1px solid var(--ri-line);
  position: sticky; top: 0; z-index: 40;
}
.u-head__in {
  max-width: var(--ri-container); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 18px; min-height: 62px;
}
.u-logo {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ri-brand); flex: 0 0 auto;
}
.u-logo__mark {
  width: 34px; height: 34px; flex: 0 0 auto;
  background: var(--ri-brand); color: var(--ri-accent);
  display: grid; place-items: center;
  font-family: var(--ri-font-num); font-weight: 800; font-size: 15px;
  /* 왼쪽 아래를 잘라 «달리는 방향» 을 만든다 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 74%);
}
.u-logo__txt { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.u-logo__txt small {
  display: block; font-family: var(--ri-font-num);
  font-size: 9px; letter-spacing: .3em; color: var(--ri-text-sub);
  font-weight: 600; margin-top: 1px;
}

.u-nav { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.u-nav::-webkit-scrollbar { display: none; }
.u-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ri-text); text-decoration: none;
  font-weight: 700; font-size: 14px; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.u-nav a:hover, .u-nav a[aria-current] {
  border-bottom-color: var(--ri-accent); color: var(--ri-brand);
}
.u-nav a[data-soon] { color: var(--ri-text-sub); font-weight: 600; }
.u-nav a[data-soon]::after {
  content: "준비중"; font-size: 10px; margin-left: 5px;
  background: var(--ri-surface-2); color: var(--ri-text-sub);
  padding: 2px 5px; font-weight: 700;
}


/* ══ 3. 히어로 — 사진 전면 + 어둠막이 + 시안 단추 ═════════════════════════ */

.u-hero {
  position: relative; overflow: hidden;
  background: var(--ri-brand); color: var(--ri-brand-ink);
  min-height: 62vh; display: grid; place-items: center;
  text-align: center; padding: 72px 16px 96px;
}
.u-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; border: 0;
}
/* ★어둠막이 — 흰 글자가 4.5:1 을 넘게 만든다. 값은 «실측해서» 정했다.
   재는 방법 : 사진을 canvas 에 cover 로 그리고 같은 그라디언트를 덧칠한 뒤
   제목·설명 영역의 «모든 픽셀» 대비를 계산해 «가장 나쁜 값» 을 본다.
   (평균은 소용없다. 글자 한 획이 밝은 곳에 걸리면 거기서 안 보인다)

   2026-08-23 실측 (지금 사진 기준 · 가운데 값만 바꿔 가며) :
       .46 → 제목 3.44 · 설명 3.97     ← 둘 다 미달이었다
       .55 → 제목 4.54 · 설명 5.17
       .58 → 채택 (여유를 조금 둔다)
       .62 → 제목 5.72 · 설명 6.36  (사진이 많이 어두워진다)
   ★사진을 바꾸면 «다시 재야 한다». 밝은 사진이 들어오면 이 값으로는 모자란다. */
.u-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* ★그라데이션 금지 (사장님 확정 기준 · 작업패턴.md 2479행 「전부 플랫 컬러」).
     단색 한 겹으로 바꿨다. 값은 «실측해서» 정한다 — 그라디언트일 때 가운데가 .58 이었고
     그 자리에서 제목 4.5:1 을 겨우 넘겼으므로, 단색은 그보다 진해야 한다.
     .62 로 두고 올린 뒤 다시 잰다. */
  background: rgba(20,20,20,.62);
}
.u-hero__in { position: relative; z-index: 2; max-width: 860px; }
.u-hero__eyebrow {
  font-family: var(--ri-font-num);
  font-size: 12px; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ri-accent);
  margin: 0 0 18px;
}
.u-hero__title {
  font-size: clamp(30px, 6.4vw, 62px); line-height: 1.1;
  font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px;
  text-wrap: balance;
}
.u-hero__sub {
  font-size: clamp(14px, 2vw, 19px); line-height: 1.6;
  margin: 0 auto 30px; max-width: 34em; color: rgba(255,255,255,.92);
}

/* 시안 통짜 단추 — 화면에서 가장 큰 단추 «하나» (화면설계서 §8-①) */
.u-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 40px;
  background: var(--ri-accent); color: var(--ri-accent-ink);
  font-weight: 800; font-size: 16px; letter-spacing: .02em;
  text-decoration: none; border: 0; cursor: pointer;
}
.u-cta:hover { filter: brightness(1.08); }
.u-cta--ghost {
  background: transparent; color: var(--ri-brand-ink);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.72);
}
.u-cta--ghost:hover { background: rgba(255,255,255,.12); filter: none; }

/* 히어로 밑 흰 띠 — 「오늘 열려 있는 것」 숫자 세 개 */
.u-stats {
  background: var(--ri-surface); border-bottom: 1px solid var(--ri-line);
}
.u-stats__in {
  max-width: var(--ri-container); margin: 0 auto; padding: 18px 16px;
  display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: center;
}
.u-stat { display: flex; align-items: baseline; gap: 8px; }
.u-stat b {
  font-family: var(--ri-font-num); font-size: 28px; font-weight: 700;
  color: var(--ri-brand); line-height: 1;
}
.u-stat span { font-size: 12px; color: var(--ri-text-sub); font-weight: 600; }
.u-stats__note { margin-left: auto; font-size: 12px; color: var(--ri-text-sub); }


/* ══ 4. 섹션 제목 — 아주 크게 ═════════════════════════════════════════════ */

.u-sec { padding: 46px 0 10px; }
.u-sec__kicker {
  font-family: var(--ri-font-num);
  font-size: 11px; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ri-text-sub); margin: 0 0 6px;
}
.u-sec__title {
  font-size: clamp(24px, 4.4vw, 40px); line-height: 1.12;
  font-weight: 800; letter-spacing: -.03em; margin: 0; color: var(--ri-text);
}
.u-sec__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.u-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--ri-brand); font-weight: 800; font-size: 14px; text-decoration: none;
  border-bottom: 3px solid var(--ri-accent); padding: 0 2px;
}
.u-more:hover { background: var(--ri-brand-weak); }


/* ══ 5. ★일정표 — 마라톤온라인 방식 ═══════════════════════════════════════
   한 줄이 대회 하나다. 표(table)가 아니라 목록(ul)으로 짠다 —
   좁은 화면에서 표는 가로로 넘치고, 목록은 «접힌다».
   ═══════════════════════════════════════════════════════════════════════ */

.u-sched {
  list-style: none; margin: 0; padding: 0;
  background: var(--ri-surface);
  border-top: 2px solid var(--ri-brand);
}
.u-sched__row {
  /* * 줄 높이를 «한 화면에 14줄» 이 들어가게 잡는다.
     처음엔 102px 이었다 — 마라톤온라인(약 50px)의 두 배라 훑는 속도가 절반이 된다.
     러너는 목록을 «달력처럼 훑는다». 여백보다 «줄 수» 가 값이다. */
  display: grid; align-items: center; gap: 1px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ri-line);
  position: relative;
  grid-template-columns: 62px minmax(0,1fr) auto;
  grid-template-areas:
    "date name  stat"
    "date place stat"
    "panel panel panel";
}
.u-sched__row:hover { background: var(--ri-brand-weak); }
/* 줄무늬 — 눈이 줄을 놓치지 않게. hover 가 이긴다. */
.u-sched__row:nth-child(even) { background: var(--ri-surface-2); }
.u-sched__row:nth-child(even):hover { background: var(--ri-brand-weak); }

/* 날짜 — 마라톤온라인처럼 «크게, 왼쪽에» */
.u-sched__date {
  grid-area: date; text-align: center; align-self: center;
  font-family: var(--ri-font-num); line-height: 1.05; color: var(--ri-brand);
}
.u-sched__date b { display: block; font-size: 17px; font-weight: 700; }
.u-sched__date span {
  display: block; font-size: 10.5px; font-weight: 600;
  color: var(--ri-text-sub); margin-top: 1px;
}
/* 토·일은 색을 달리한다 — 한국 대회는 주말에 몰린다. 눈으로 주말을 찾게. */
.u-sched__date--sat b { color: #1D4ED8; }
.u-sched__date--sun b { color: #C81E1E; }

.u-sched__name { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
/* ★두 칸(국내·해외) 배치에서 칩이 칸 밖으로 새지 않게.
   grid 자식은 기본 min-width:auto 라 «내용보다 작아지지 않는다».
   칩 줄이 길면 칸을 밀어내고 옆 칸을 덮는다. 0 으로 내려야 접힌다. */
.u-sched__row > * { min-width: 0; }
.u-sched__row { overflow: hidden; }
.u-sched__name a {
  color: var(--ri-text); text-decoration: none;
  font-weight: 700; font-size: 14.5px; line-height: 1.3;
  display: inline; vertical-align: middle;
}
/* 거리 칩을 대회명 «같은 줄» 에 붙인다. 줄을 따로 쓰면 한 줄이 통째로 늘어난다. */
.u-sched__name .u-dist { margin: 0 0 0 7px !important; vertical-align: middle; }
.u-sched__name a:hover { color: var(--ri-brand); text-decoration: underline; }
/* ★줄 전체를 누를 수 있게 — 링크를 늘려 덮는다. 안쪽 다른 링크는 z-index 로 위에 둔다. */
.u-sched__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.u-sched__row > *:not(.u-sched__name) { position: relative; z-index: 2; }
.u-sched__row .u-sched__place { z-index: 0; }

.u-sched__place {
  grid-area: place; min-width: 0;
  font-size: 12px; line-height: 1.3; color: var(--ri-text-sub);
  display: flex; flex-wrap: wrap; gap: 2px 9px; align-items: center;
}
.u-sched__stat {
  grid-area: stat; justify-self: end; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  min-width: 88px;
}

/* 거리 칩 — UTMB 의 100M/50K 배지. 각지고 작다. */
.u-dist { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.u-dist li {
  list-style: none;
  font-family: var(--ri-font-num); font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; padding: 2px 6px;
  background: var(--ri-brand); color: var(--ri-brand-ink);
  white-space: nowrap;
}
.u-dist li.is-full  { background: var(--ri-accent); color: var(--ri-accent-ink); }
.u-dist li.is-trail { background: var(--ri-deep); }

/* D-day */
.u-dday {
  font-family: var(--ri-font-num); font-weight: 700; font-size: 13px;
  color: var(--ri-brand); white-space: nowrap;
}
.u-dday--past { color: var(--ri-text-sub); }

/* 상태 — ★점 + 글자를 «항상 같이». 색만으로 알리지 않는다. */
.u-st {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--ri-text);
}
.u-st::before {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: var(--ri-radius-pill);
  background: var(--ri-st-scheduled);
}
.u-st--open::before     { background: var(--ri-st-open); }
.u-st--closing::before  { background: var(--ri-st-closing); }
.u-st--extra::before    { background: var(--ri-st-extra); }
.u-st--closed::before   { background: var(--ri-st-closed); }
.u-st--finished::before { background: var(--ri-st-finished); }

/* 좁은 화면 — 날짜를 왼쪽에 두고 상태는 이름 옆으로 올린다 */
@media (max-width: 560px) {
  /* ★좁은 화면에서도 «상태를 따로 한 줄» 로 내리지 않는다.
     내렸더니 줄 높이가 145px 이 됐다(실측) — 한 화면에 다섯 줄뿐이다.
     상태를 이름과 «같은 줄» 오른쪽에 두면 100px 안쪽으로 내려가 여덟 줄이 보인다.
     휴대폰에서 러너가 보는 것은 «날짜 · 이름 · 접수상태» 셋이다. 거리는 펼쳐서 본다. */
  .u-sched__row {
    grid-template-columns: 48px minmax(0,1fr) auto;
    grid-template-areas:
      "date name  stat"
      "date place stat"
      "panel panel panel";
    padding: 9px 10px; gap: 1px 8px;
  }
  .u-sched__stat { min-width: 66px; }
  .u-sched__name a { font-size: 14px; }
  .u-sched__date b { font-size: 15.5px; }
  .u-dist li { font-size: 10px; padding: 1px 5px; }
  .u-st { font-size: 11px; }
  .u-dday { font-size: 12px; }
}

/* 표 머리 — 넓은 화면에서만. 좁으면 뜻이 없다. */
.u-sched__head {
  display: none;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--ri-brand-ink); background: var(--ri-brand);
  padding: 8px 12px;
  grid-template-columns: 62px minmax(0,1fr) auto; gap: 14px;
}
@media (min-width: 561px) { .u-sched__head { display: grid; } }

.u-sched__empty {
  padding: 30px 16px; text-align: center;
  color: var(--ri-text-sub); font-size: 14px;
  background: var(--ri-surface-2);
}


/* ══ 6. ★홈 — 국내 / 해외 두 칸 ═══════════════════════════════════════════
   사장님 지시 : 「메인에 마라톤 일정은 국내와 국외 각각 나눠져서 보이게 하고
                클릭하면 국내는 국내 대회일정, 국외는 국외 대회일정이 보이게」
   ═══════════════════════════════════════════════════════════════════════ */

.u-two { display: grid; gap: 28px; }
@media (min-width: 900px) { .u-two { grid-template-columns: 1fr 1fr; gap: 30px; } }

.u-col__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px;
  background: var(--ri-brand); color: var(--ri-brand-ink);
}
.u-col__head h2 {
  margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.u-col__head h2 em {
  font-style: normal; font-family: var(--ri-font-num);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--ri-accent);
}
.u-col__head .u-col__all {
  color: var(--ri-accent); text-decoration: none;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 30px;
}
.u-col__head .u-col__all:hover { text-decoration: underline; }
/* 해외 칸은 딥틸로 — 같은 값이지만 «다른 곳» 임이 한눈에 보이게 */
.u-col--out .u-col__head { background: var(--ri-deep); }

.u-col__foot { padding: 12px 0 0; }


/* ══ 7. 종목·바로가기 타일 ════════════════════════════════════════════════ */

.u-tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px) { .u-tiles { grid-template-columns: repeat(4, 1fr); } }
.u-tile {
  position: relative; overflow: hidden; min-height: 116px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px; text-decoration: none;
  background: var(--ri-brand); color: var(--ri-brand-ink);
}
.u-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5; z-index: 0;
}
.u-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* ★그라데이션 금지 — 단색으로. 타일 글자는 «아래쪽» 에 있으므로
     예전 그라디언트의 «아래 끝(.86)» 을 기준으로 잡아야 글자가 안 죽는다. */
  background: transparent;   /* ★신문 : 타일 덮개를 걷었다. 사진이 없으므로 덮을 것도 없다 */
}
.u-tile > * { position: relative; z-index: 2; }
.u-tile b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.u-tile span { font-size: 11.5px; color: rgba(255,255,255,.86); margin-top: 3px; }
.u-tile:hover img { opacity: .68; }
.u-tile:hover b { color: var(--ri-accent); }


/* ══ 8. 「이 사이트가 다른 점」 — 데이터가 0건이어도 서 있는 블록 ═════════ */

.u-why { display: grid; gap: 1px; background: var(--ri-line); list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .u-why { grid-template-columns: repeat(2, 1fr); } }
.u-why li { background: var(--ri-surface); padding: 18px 18px 20px; }
.u-why b {
  display: block; font-size: 15px; font-weight: 800; color: var(--ri-brand);
  margin-bottom: 5px;
}
.u-why p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--ri-text-sub); }
.u-why__n {
  font-family: var(--ri-font-num); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; color: var(--ri-accent-ink);
  background: var(--ri-accent); padding: 2px 7px; margin-bottom: 9px;
  display: inline-block;
}


/* ══ 9. 소식 받기 ═════════════════════════════════════════════════════════ */

.u-sub { padding: 34px 0 40px; }
.u-sub__in { display: grid; gap: 16px; align-items: center; }
@media (min-width: 820px) { .u-sub__in { grid-template-columns: 1fr auto; } }
.u-sub h2 { margin: 0 0 6px; font-size: clamp(20px,3vw,28px); font-weight: 800; letter-spacing: -.02em; }
.u-sub p  { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.86); }


/* ══ 10. 꼬리 ═════════════════════════════════════════════════════════════ */

.u-foot { background: var(--ri-brand); color: var(--ri-brand-ink); margin-top: 44px; }
.u-foot__in { max-width: var(--ri-container); margin: 0 auto; padding: 34px 16px 30px; }
.u-foot__grid { display: grid; gap: 22px; }
@media (min-width: 760px) { .u-foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.u-foot h3 {
  font-family: var(--ri-font-num); font-size: 11px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ri-accent); margin: 0 0 10px;
}
.u-foot ul { list-style: none; margin: 0; padding: 0; }
.u-foot li { margin-bottom: 7px; }
.u-foot a { color: rgba(255,255,255,.86); text-decoration: none; font-size: 13.5px; }
.u-foot a:hover { color: var(--ri-accent); text-decoration: underline; }
.u-foot__note {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 12px; color: rgba(255,255,255,.66); line-height: 1.7;
}


/* ══ 11. 필터 한 줄 — 표 위에 붙는다 ══════════════════════════════════════ */

.u-filter {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px; background: var(--ri-surface-2);
  border: 1px solid var(--ri-line); border-bottom: 0;
}
.u-filter select, .u-filter input[type="search"], .u-filter input[type="text"] {
  min-height: 40px; padding: 0 10px;
  border: 1px solid var(--ri-line-strong); background: var(--ri-surface);
  color: var(--ri-text); font: inherit; font-size: 13.5px;
  border-radius: 0;
}
.u-filter button {
  min-height: 40px; padding: 0 18px; border: 0; cursor: pointer;
  background: var(--ri-brand); color: var(--ri-brand-ink);
  font-weight: 800; font-size: 13.5px;
}
.u-filter button:hover { background: var(--ri-brand-hover); }
.u-count {
  margin-left: auto; font-size: 12.5px; color: var(--ri-text-sub); font-weight: 600;
}
.u-count b { font-family: var(--ri-font-num); color: var(--ri-brand); font-size: 15px; }


/* ══ 12. 움직임을 줄이라고 한 사용자 ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ══ 13. 기존 부품을 UTMB 로 덮어쓴다 ══════════════════════════════════════
   ★app.css 를 «고치지 않는다». 이 파일이 뒤에 실리므로 같은 무게면 여기가 이긴다.
     app.css 를 직접 고치면 나중에 어느 쪽이 진짜인지 알 수 없게 된다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 머리 ── */
.ri-header {
  background: var(--ri-surface);
  border-bottom: 0;
  box-shadow: none;
}
.ri-header__bar { min-height: 62px; gap: 12px; }

.ri-logo {
  font-weight: 800; font-size: 18px; letter-spacing: -.03em;
  color: var(--ri-text); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.ri-logo b { color: var(--ri-brand); }
/* 로고 앞 각진 마크 — 왼쪽 아래를 잘라 «달리는 방향» 을 만든다 */
.ri-logo::before {
  content: "RI";
  width: 32px; height: 32px; margin-right: 9px; align-self: center;
  background: var(--ri-brand); color: var(--ri-accent);
  display: inline-grid; place-items: center;
  font-family: var(--ri-font-num); font-weight: 800; font-size: 13px;
  letter-spacing: .02em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24% 100%, 0 72%);
}

.ri-mytop {
  min-height: 40px; padding: 0 14px;
  background: var(--ri-accent); color: var(--ri-accent-ink);
  font-weight: 800; font-size: 13px; text-decoration: none;
  display: inline-flex; align-items: center;
}
.ri-mytop:hover { filter: brightness(1.08); text-decoration: none; }
.ri-iconbtn { color: var(--ri-brand); }

/* ── 메뉴 바 : 마라톤온라인식 «남색 가로 띠» ──
   좁은 화면에서는 원래대로 서랍(app.js 가 is-open 을 붙인다). */
.ri-nav { border-top: 0; background: var(--ri-brand); }
.ri-nav a { color: rgba(255,255,255,.92); }
.ri-nav .ri-nav__soon { color: rgba(255,255,255,.55); }
.ri-nav .ri-nav__soon small { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.ri-nav .current-menu-item > a { color: var(--ri-accent); }

@media (min-width: 900px) {
  /* ★넓은 화면에서는 «항상 펼쳐» 둔다. 서랍 단추는 숨긴다. */
  .ri-nav { display: block !important; }
  .ri-nav > .ri-wrap { display: flex; }
  .ri-nav ul {
    display: flex; flex-wrap: wrap; align-items: stretch;
    width: 100%; gap: 0;
  }
  .ri-nav li { display: flex; }
  .ri-nav a, .ri-nav .ri-nav__soon {
    display: inline-flex; align-items: center;
    min-height: 46px; padding: 0 16px;
    font-size: 14.5px; font-weight: 700; border-bottom: 0;
    border-right: 1px solid rgba(255,255,255,.13);
  }
  .ri-nav a:hover { background: var(--ri-brand-hover); color: var(--ri-accent); }
  .ri-nav .sub-menu { display: none; }
  .ri-iconbtn--menu { display: none; }
}

.ri-main { padding-block: 0 0; }
/* 홈은 히어로가 화면 끝까지 나가야 하므로 감싸개의 좌우 여백을 없앤다.
   ★홈 «만» 이다. 다른 화면은 그대로 여백을 갖는다. */
.home .ri-main > .ri-wrap { padding-inline: 16px; }

/* ── 단추 ── */
.ri-btn {
  border-radius: 0; font-weight: 700;
  border-color: var(--ri-line-strong);
}
.ri-btn--primary {
  background: var(--ri-brand); border-color: var(--ri-brand);
  color: var(--ri-brand-ink);
}
.ri-btn--primary:hover { background: var(--ri-brand-hover); border-color: var(--ri-brand-hover); }

/* ── 카드(대회 찾기 결과 등) ── */
.ri-card { border-radius: 0; box-shadow: none; border: 1px solid var(--ri-line); }
.ri-card:hover { border-color: var(--ri-brand); }
.ri-card__title a { color: var(--ri-text); }
.ri-card__tags li {
  border-radius: 0; font-family: var(--ri-font-num);
  font-size: 10.5px; font-weight: 700;
}

/* ── 꼬리 ── */
.ri-footer {
  background: var(--ri-brand); color: rgba(255,255,255,.86);
  border-top: 0; margin-top: 0; padding-block: 30px 34px;
}
.ri-footer a { color: rgba(255,255,255,.86); }
.ri-footer a:hover { color: var(--ri-accent); }
.ri-footer strong, .ri-footer b { color: var(--ri-brand-ink); }

/* ── 입력칸 ── */
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="tel"], select, textarea {
  border-radius: 0;
}

/* ── 건너뛰기 링크 ── */
.ri-skip { background: var(--ri-accent); color: var(--ri-accent-ink); font-weight: 800; }


/* ══ 14. 목록 «펼침» — 대회명을 누르면 그 줄 아래에 열린다 ═════════════════
   사장님 지시(2026-08-23) : 「새로운 페이지로 절대 넘어가게 하면 안되, 절대로,
                              그 순간 고객들이 이탈을 하니까」
   ★그래서 이 블록의 «목적» 은 「접수하러 가기」 단추 하나다. 그 단추가 가장 잘 보여야 한다.
   ═══════════════════════════════════════════════════════════════════════ */

/* 대회명이 «여닫는 것» 임을 보이게 — 작은 삼각형 하나 */
.u-sched__toggle::before {
  content: "";
  display: inline-block; width: 0; height: 0; margin-right: 6px;
  vertical-align: 2px;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .16s ease;
}
.u-sched__toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
/* JS 가 없으면 그냥 링크다 — 삼각형이 거짓말을 하지 않게 숨긴다 */
.no-js .u-sched__toggle::before { display: none; }

.u-panel {
  grid-area: panel;
  margin: 9px 0 2px;
  background: var(--ri-surface);
  border-top: 3px solid var(--ri-accent);
  box-shadow: inset 0 0 0 1px var(--ri-line);
}
.u-panel[hidden] { display: none; }
.u-panel__in { padding: 14px 14px 12px; }
.u-panel__wait { padding: 16px 14px; color: var(--ri-text-sub); font-size: 13.5px; }

/* 사실 목록 — 이름표와 값을 두 칸으로 */
.u-panel__facts { margin: 0 0 12px; display: grid; gap: 7px 18px; }
@media (min-width: 620px) { .u-panel__facts { grid-template-columns: 1fr 1fr; } }
.u-panel__facts > div { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 10px; }
.u-panel__facts dt {
  font-size: 11.5px; font-weight: 800; color: var(--ri-text-sub);
  letter-spacing: .02em; padding-top: 2px;
}
.u-panel__facts dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ri-text); }
.u-panel__facts dd a { color: var(--ri-brand); }
.u-panel__sub { display: block; font-size: 12px; color: var(--ri-text-sub); }

/* 종목 표 — 거리 · 참가비 · 제한시간 */
.u-panel__tbl {
  width: 100%; border-collapse: collapse; margin: 0 0 12px;
  font-size: 13px;
}
.u-panel__tbl th, .u-panel__tbl td {
  padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--ri-line);
}
.u-panel__tbl thead th {
  background: var(--ri-brand); color: var(--ri-brand-ink);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  border-bottom: 0;
}
.u-panel__tbl tbody th { font-weight: 700; color: var(--ri-text); width: 34%; }
.u-panel__tbl td { font-family: var(--ri-font-num); font-weight: 600; }

/* ★목적 — 접수하러 가기 */
.u-panel__cta {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  margin: 0 0 10px;
}
.u-cta--sm { min-height: 46px; padding: 0 22px; font-size: 14.5px; }
.u-cta--quiet {
  background: var(--ri-surface-2); color: var(--ri-brand);
  box-shadow: inset 0 0 0 1px var(--ri-line-strong);
}
.u-cta--quiet:hover { background: var(--ri-brand-weak); filter: none; }
.u-panel__more {
  margin-left: auto; font-size: 12.5px; font-weight: 700;
  color: var(--ri-text-sub); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.u-panel__more:hover { color: var(--ri-brand); text-decoration: underline; }

.u-panel__src {
  margin: 0; padding-top: 9px; border-top: 1px solid var(--ri-line);
  font-size: 11.5px; color: var(--ri-text-sub); line-height: 1.6;
}
.u-panel__src a { color: var(--ri-text-sub); }

/* 펼쳐진 줄은 «지금 보고 있는 줄» 임이 보이게 */
.u-sched__row:has(.u-panel.is-open) { background: var(--ri-brand-weak); }


/* ══ 15. 필터 «한 줄» ══════════════════════════════════════════════════════
   사장님 지시(2026-08-23) : 「두줄이면 안되, 한줄로 하고 리사이즈되게 하고,
   두줄이면 한국 사람들에게 정보 전달 한눈에 안들어오면 이탈 구간이 되니가」
   ═══════════════════════════════════════════════════════════════════════ */

.ri-filter {
  background: var(--ri-surface-2);
  border: 1px solid var(--ri-line);
  border-radius: 0;
  padding: 12px;
  margin-bottom: 0;
}
.ri-filter__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.ri-filter__head h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ri-filter__count {
  font-family: var(--ri-font-num); font-weight: 700; font-size: 14px; color: var(--ri-brand);
}

/* ★한 줄. 줄바꿈을 «금지» 하고, 각 칸이 «줄어들게» 한다.
   min-width:0 이 핵심이다 — 없으면 select 가 내용보다 작아지지 않아 줄이 넘친다. */
.ri-fields {
  display: flex; flex-wrap: nowrap; gap: 8px; align-items: stretch;
}
.ri-field { flex: 1 1 0; min-width: 0; margin: 0; }
.ri-field > label { display: block; }
.ri-field select {
  width: 100%; min-width: 0; min-height: 42px; padding: 0 8px;
  border: 1px solid var(--ri-line-strong); background: var(--ri-surface);
  color: var(--ri-text); font: inherit; font-size: 13.5px; border-radius: 0;
  text-overflow: ellipsis;
}
.ri-field select:focus-visible { outline: var(--ri-focus-w) solid var(--ri-brand); outline-offset: 1px; }

/* 태블릿까지도 한 줄을 지킨다 */
@media (min-width: 768px) { .ri-fields { flex-wrap: nowrap; } }

/* ★폰만 예외 — «세로로 쌓지 않고» 옆으로 민다.
   쌓으면 화면 하나를 필터가 다 먹는다. 그게 사장님이 말씀하신 이탈 구간이다. */
@media (max-width: 767px) {
  .ri-fields {
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .ri-fields::-webkit-scrollbar { display: none; }
  .ri-field { flex: 0 0 40%; }
}

/* 거리 칩 — 한 줄에 안 들어가면 «가로로 민다». 두 줄로 내리지 않는다. */
.ri-filter .ri-chips, .ri-filter__dist {
  display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ri-filter .ri-chips::-webkit-scrollbar, .ri-filter__dist::-webkit-scrollbar { display: none; }
.ri-filter label.ri-chip, .ri-filter .ri-chip { white-space: nowrap; border-radius: 0; }

.ri-filter__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ri-filter__foot .ri-btn { border-radius: 0; }


/* == 16. 등록하기 화면 - 0건일 때 «본체» =================================== */

.u-reg { padding: 34px 0 44px; }
.u-reg__lead {
  margin: 8px 0 22px; max-width: 44em;
  font-size: 15px; line-height: 1.7; color: var(--ri-text-sub);
}
.u-reg__grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 860px) { .u-reg__grid { grid-template-columns: 1.55fr 1fr; gap: 30px; } }

.u-reg__h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .18em;
  color: var(--ri-brand-ink); background: var(--ri-brand);
  display: inline-block; padding: 5px 11px;
}
.u-reg__need { margin: 0; display: grid; gap: 1px; background: var(--ri-line); }
.u-reg__need > div {
  background: var(--ri-surface); padding: 10px 13px;
  display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 12px;
}
.u-reg__need dt { font-size: 13.5px; font-weight: 700; color: var(--ri-text); }
.u-reg__need dd { margin: 0; font-size: 13px; color: var(--ri-text-sub); line-height: 1.5; }
@media (max-width: 520px) {
  .u-reg__need > div { grid-template-columns: 1fr; gap: 3px; }
}

.u-reg__side {
  background: var(--ri-surface-2); padding: 18px;
  box-shadow: inset 0 0 0 1px var(--ri-line);
}
.u-reg__note {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: var(--ri-text);
  padding-left: 11px; border-left: 3px solid var(--ri-accent);
}


/* ══ 17. 아이콘 ═══════════════════════════════════════════════════════════
   ★크기를 «글자에 맞춰» 준다(1em). 그래야 어디에 넣어도 줄 높이가 안 흔들린다.
     px 로 박으면 작은 칩에서는 크고 큰 제목에서는 작아 보인다.
   ═══════════════════════════════════════════════════════════════════════ */
.ri-i {
  width: 1em; height: 1em; flex: 0 0 auto;
  vertical-align: -.13em; margin-right: .32em;
  stroke: currentColor; fill: none;
}
.u-dist .ri-i { width: 1.05em; height: 1.05em; margin-right: .22em; opacity: .92; }
.u-panel__facts dt .ri-i { opacity: .7; }
.u-panel__tbl thead th .ri-i { opacity: .85; }
.ri-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ══ 18. 흐르는 대회 띠 ════════════════════════════════════════════════════
   사장님 지시 : 「슬라이더 밑에 대회 리스트를 우 → 좌로 흐르게」
   ★자동으로 움직이는 것에는 «멈춤» 이 있어야 한다(WCAG 2.2.2).
   ═══════════════════════════════════════════════════════════════════════ */

.u-flow {
  position: relative; overflow: hidden;
  background: var(--ri-brand); color: var(--ri-brand-ink);
  border-top: 1px solid rgba(255,255,255,.12);
}
.u-flow__track {
  display: flex; width: max-content;
  animation: u-flow-move 64s linear infinite;
}
@keyframes u-flow-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 멈추는 세 가지 길 */
.u-flow:hover .u-flow__track,
.u-flow:focus-within .u-flow__track,
.u-flow.is-paused .u-flow__track { animation-play-state: paused; }

.u-flow__list { display: flex; list-style: none; margin: 0; padding: 0; }
.u-flow__list li { display: flex; }
.u-flow__list a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; min-height: 46px; white-space: nowrap;
  color: rgba(255,255,255,.9); text-decoration: none; font-size: 13px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.u-flow__list a:hover { background: var(--ri-brand-hover); color: var(--ri-accent); }
.u-flow__list b {
  font-family: var(--ri-font-num); font-weight: 700; color: var(--ri-accent);
  font-size: 12px; letter-spacing: .02em;
}
.u-flow__list span { font-weight: 700; }
.u-flow__list em {
  font-style: normal; font-family: var(--ri-font-num); font-size: 11.5px;
  color: rgba(255,255,255,.72);
}
/* 띠 위의 상태 점은 «어두운 바탕» 이라 밝게 낸다 */
.u-flow__list .u-st::before { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }

.u-flow__stop {
  position: absolute; right: 0; top: 0; height: 100%;
  padding: 0 14px; border: 0; cursor: pointer;
  background: var(--ri-accent); color: var(--ri-accent-ink);
  font-weight: 800; font-size: 12px; letter-spacing: .04em;
}
.u-flow__stop:hover { filter: brightness(1.08); }
.u-flow__stop .u-flow__stop-off { display: none; }
.u-flow__stop[aria-pressed="true"] .u-flow__stop-on { display: none; }
.u-flow__stop[aria-pressed="true"] .u-flow__stop-off { display: inline; }

/* ★움직임을 줄이라고 한 사람에게는 «처음부터» 안 움직인다.
   대신 옆으로 밀어 볼 수 있게 둔다 — 내용이 사라지면 안 되니까. */
@media (prefers-reduced-motion: reduce) {
  .u-flow { overflow-x: auto; }
  .u-flow__track { animation: none; }
  .u-flow__stop { display: none; }
}


/* == 19. 상태 배지 모양 - 색«말고» 모양으로도 갈린다 ========================
   실측(2026-08-23) : 여섯 색을 회색조로 바꾸면
       접수마감 L=0.052 · 접수예정 0.107 · 추가접수 0.116 ·
       종료 0.146 · 마감임박 0.153 · 접수중 0.159
   가장 가까운 짝의 밝기차가 «0.007» 이다. 회색조에서는 사실상 같은 점이다.

   우리는 «점 + 글자» 를 항상 같이 내므로 규칙(1.4.1)을 어기지는 않는다.
   그래도 색각 이상인 사람이 «점만 보고» 훑을 수 있으면 속도가 다르다.
   그래서 색은 그대로 두고 «모양» 을 갈랐다. 글자 · 색 · 모양 세 겹이 된다.

       접수중    ● 꽉 찬 동그라미
       마감임박  ◎ 가운데가 뚫린 동그라미 (「거의 닫힌다」는 느낌)
       추가접수  ■ 네모        (다른 것과 «성격» 이 다른 상태다)
       접수예정  ○ 테두리만
       접수마감  ▬ 가로 막대   (닫힌 문)
       종료      ▫ 테두리 네모
   ═══════════════════════════════════════════════════════════════════════ */

.u-st--open::before {
  border-radius: var(--ri-radius-pill);
}
.u-st--closing::before {
  border-radius: var(--ri-radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--ri-st-closing);
}
.u-st--extra::before {
  border-radius: 0;
}
.u-st--scheduled::before {
  border-radius: var(--ri-radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--ri-st-scheduled);
}
.u-st--closed::before {
  border-radius: 0;
  width: 9px; height: 3px;
}
.u-st--finished::before {
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ri-st-finished);
}


/* 접수 정보를 «아직 모르는» 대회 — 상태 여섯 중 어느 것도 아니다.
   테두리만 있는 옅은 점으로 «비어 있음» 을 보인다. */
.u-st--unknown { color: var(--ri-text-sub); }
.u-st--unknown::before {
  border-radius: var(--ri-radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ri-line-strong);
}


/* ══ 20. 수평 키 맞춤 · 아이콘 크기 ═══════════════════════════════════════
   사장님 지시 : 「대회명 하고 아이콘 수평 키 맞쳐, 2026~ 등 하고 맞추고,
   접수하고 아이콘 하고 수평 키 맞추고 마감일자 하고 일자도 수평 키 맞추고」
   「아이콘이 넘 작어 크게 해서 글자 하고 똑같이 하고」

   ★왜 vertical-align 으로는 안 되나
     vertical-align 은 «글꼴의 베이스라인» 에 끌려간다. 한글 글꼴마다 베이스라인이 달라서
     같은 값을 줘도 화면마다 어긋난다. flex 로 «상자 가운데» 를 맞춰야 흔들리지 않는다.
   ═══════════════════════════════════════════════════════════════════════ */

/* 대회명 줄 — 이름 · 거리 칩이 «한 줄에, 가운데 정렬» */
.u-sched__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
}
.u-sched__name a { display: inline-flex; align-items: center; }
.u-sched__name .u-dist { margin: 0 !important; align-items: center; }

/* 아이콘 — 글자와 «같은 크기». 작으면 장식이 되고, 같으면 정보가 된다 */
.ri-i { width: 1.15em; height: 1.15em; vertical-align: middle; margin-right: .3em; }
.u-dist .ri-i { width: 1.2em; height: 1.2em; margin-right: .28em; opacity: 1; }
.u-st::before { align-self: center; }

/* 상태 칸 — 상태와 D-day 를 «가운데 정렬» 로 세운다 */
.u-sched__stat { justify-content: center; }
.u-st, .u-dday { display: inline-flex; align-items: center; }

/* 펼침의 이름표 · 표 머리도 같은 규칙 */
.u-panel__facts dt { display: flex; align-items: center; }
.u-panel__tbl th, .u-panel__tbl td { vertical-align: middle; }
.u-panel__tbl thead th { display: table-cell; }
.u-panel__tbl thead th .ri-i { vertical-align: -.2em; }

/* 날짜 칸 — 숫자와 요일의 가운데를 줄 가운데에 */
.u-sched__date { display: flex; flex-direction: column; justify-content: center; }


/* ══ 21. 종목 칩 «색 가르기» ═══════════════════════════════════════════
   사장님 : 「아이콘은 컬러풀하게 해 넘 다 단 색이야」

   ★상태색과 겹치지 않게 골랐다.
     상태(파랑 #1D4ED8 · 초록 #15803D · 주황 #C2410C · 보라 #A21CAF)는
     «점과 글자» 로만 나오고, 종목은 «칠한 면» 으로만 나온다.
     그래서 트레일을 초록이 아니라 «흙빛» 으로 뒀다 — 초록은 「접수중」의 색이다.
   ★전부 4.5:1 이상. 칩 글자는 12~13px 이라 더 엄하게 봤다.
   ═══════════════════════════════════════════════════════════════════ */
.u-dist li.is-full  { background: var(--ri-accent);  color: var(--ri-accent-ink); font-weight: 700; }
.u-dist li.is-half  { background: var(--ri-brand);   color: var(--ri-brand-ink); }
.u-dist li.is-ten   { background: var(--ri-deep);    color: #fff; }
.u-dist li.is-five  { background: var(--ri-brand-weak); color: var(--ri-brand);
                      box-shadow: inset 0 0 0 1px rgba(26,26,26,.22); }
.u-dist li.is-ultra { background: #7A1F3D; color: #fff; }   /* 버건디 — 보라(추가접수)와 다르다 */
.u-dist li.is-trail { background: #6B4423; color: #fff; }   /* 흙빛 — 초록(접수중)과 다르다  */
.u-dist li.is-etc   { background: var(--ri-surface-2); color: var(--ri-text-sub); }


/* ══ 22. 펼침 — 「두번째 정보 이상」 ═══════════════════════════════════
   사장님 : 「또 펼침을 하면 두번재 정보 이상이 나와야 해」
           「전형적인 AI 방식 디자인이야 … 사람이 한거 처럼 디자인해」

   ★AI 처럼 보이는 까닭은 «모든 줄이 같은 크기» 이기 때문이다.
     사람이 짠 화면은 중요한 것이 크고 나머지가 확 작다. 그렇게 고친다 —
       언제·어디서 → 20px 굵게      나머지 사실 → 14px
       구분·가는길·기념품 → 13px 회색 (있으면 좋고 없어도 되는 것)
   ★선으로 나누지 않고 «여백» 으로 나눈다. 테두리를 두르면 또 균질해진다.
   ═══════════════════════════════════════════════════════════════════ */

/* 머리 — 이 펼침에서 «가장 큰 두 줄» */
.u-pnl__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px var(--ri-space-6);
  margin: 0 0 var(--ri-space-4);
}
.u-pnl__when { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.u-pnl__when b {
  font-family: var(--ri-font-num);
  font-size: var(--ri-fs-xl); font-weight: 700; letter-spacing: -.01em;
  color: var(--ri-text);
}
.u-pnl__when span { font-size: var(--ri-fs-sm); color: var(--ri-text-sub); }

.u-pnl__where { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.u-pnl__where b { font-size: var(--ri-fs-lg); font-weight: 700; color: var(--ri-text); }
.u-pnl__where span { font-size: var(--ri-fs-sm); color: var(--ri-text-sub); }
.u-pnl__where .ri-i { width: 1.15em; height: 1.15em; color: var(--ri-text-sub); margin-right: 0; }
.u-pnl__addr { flex-basis: 100%; }

/* 본문 2단 — 사실은 왼쪽, 지도는 오른쪽 */
.u-pnl__grid {
  display: grid; grid-template-columns: minmax(0,1fr) 300px;
  gap: var(--ri-space-5); align-items: start;
  margin: 0 0 var(--ri-space-4);
}
.u-pnl__grid > .u-panel__facts { margin: 0; }

/* ★있으면 좋은 것들은 «작고 조용하게». 강약이 없으면 전부 소음이 된다 */
.u-panel__quiet, .u-panel__quiet a { font-size: var(--ri-fs-sm); color: var(--ri-text-sub); }


/* ── 지도 ────────────────────────────────────────────────────────────
   ★가로세로를 CSS 로 못 박는다. iframe 은 기본이 300×150 이라
     비율이 안 맞으면 지도가 «찌그러져» 보인다. */
.u-pnl__map { min-width: 0; }
.u-pnl__map-f {
  display: block; width: 100%; height: 200px; border: 0;
  background: var(--ri-surface-2);
}
.u-pnl__map-note {
  margin: 6px 0 0; font-size: var(--ri-fs-xs); color: var(--ri-text-sub);
  line-height: var(--ri-lh-base);
}
.u-pnl__map-go { margin: 6px 0 0; display: flex; gap: var(--ri-space-3); }
.u-pnl__map-go a {
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-brand);
  text-decoration: underline; text-underline-offset: 3px;
}


/* ── 접수 주소 «글자로» ──────────────────────────────────────────────
   사장님 : 「해당 접수되는 링크 표시되게 클릭안하고 링크 복사해서 사용 하는 고객들이 있어」
   ★input[readonly] 로 둔 까닭 : 눌러서 «통째로 잡힌다».
     <span> 이면 긴 주소를 손으로 끌어 잡아야 하고 모바일에서 거의 실패한다. */
.u-pnl__go { margin: var(--ri-space-4) 0 0; }
.u-pnl__url {
  display: flex; align-items: stretch; gap: 0;
  margin: 6px 0 0; max-width: 560px;
}
.u-pnl__url-k {
  display: inline-flex; align-items: center; padding: 0 10px;
  font-size: var(--ri-fs-xs); font-weight: 700; white-space: nowrap;
  background: var(--ri-surface-2); color: var(--ri-text-sub);
}
.u-pnl__url-v {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px;
  font-family: var(--ri-font-num); font-size: var(--ri-fs-xs);
  color: var(--ri-text); background: var(--ri-surface);
  border: 1px solid var(--ri-line-strong); border-left: 0; border-right: 0;
  border-radius: 0;
}
.u-pnl__copy {
  flex: 0 0 auto; height: 34px; padding: 0 14px; cursor: pointer;
  font-size: var(--ri-fs-xs); font-weight: 700;
  color: var(--ri-brand-ink); background: var(--ri-brand);
  border: 0; border-radius: 0;
}
.u-pnl__copy:hover { background: var(--ri-brand-hover); }
.u-pnl__copy.is-done { background: var(--ri-a-open); }


/* ── 대회 결과 (사장님 지시로 «미리» 판 자리) ────────────────────────── */
.u-pnl__res { margin: var(--ri-space-5) 0 0; }
.u-pnl__res-h {
  margin: 0 0 var(--ri-space-2); display: flex; align-items: center;
  font-size: var(--ri-fs-base); font-weight: 700; color: var(--ri-text);
}
.u-panel__tbl--res caption {
  text-align: left; padding: 6px 0 4px;
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-text-sub);
}
.u-pnl__rank { font-family: var(--ri-font-num); font-weight: 700; white-space: nowrap; }
.u-pnl__rec  { font-family: var(--ri-font-num); white-space: nowrap; }
.u-pnl__res-wait {
  margin: var(--ri-space-4) 0 0; display: flex; align-items: center; gap: 6px;
  font-size: var(--ri-fs-sm); color: var(--ri-text-sub);
}


/* ── 좁은 화면 : 지도를 사실 «아래» 로 내린다 ────────────────────────── */
@media (max-width: 720px) {
  .u-pnl__grid { grid-template-columns: 1fr; gap: var(--ri-space-4); }
  .u-pnl__map-f { height: 180px; }
  .u-pnl__when b { font-size: var(--ri-fs-lg); }
  .u-pnl__where b { font-size: var(--ri-fs-base); }
  .u-pnl__url { max-width: none; }
}


/* ══ 23. 발(푸터) — 삼성 사업자몰 밀도 + UTMB 칸 수 ════════════════════
   사장님 : 「하단 푸터는 삼성전자 사업자몰 정보 처럼 풍성하게 하고
             대회접수 입력란 메일링 신청하기 등등해서 UTMB 하단 참고 해서 더 풍성하게」

   ★네 층의 «바탕색을 다르게» 둔다. 선으로 나누면 또 균질해지고,
     사장님이 말한 「AI 가 만든 것 같은」 화면이 된다. 면으로 나눈다.
       ① 메일링  — 시안 (가장 밝다. 행동을 요구하는 층)
       ② 링크    — 남색 (가장 넓다. 조용해야 한다)
       ③ 창구    — 딥틸 (사람이 받는 곳)
       ④ 법정    — 남색 어두운 쪽 (읽히기보다 «있어야 하는» 것)
   ═══════════════════════════════════════════════════════════════════ */
.ri-footer { margin-top: var(--ri-space-9); }

/* ── ① 메일링 띠 ───────────────────────────────────────────────────── */
.ri-foot-mail { background: var(--ri-accent); color: var(--ri-accent-ink); }
.ri-foot-mail__in {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: var(--ri-space-7); align-items: center;
  padding-top: var(--ri-space-7); padding-bottom: var(--ri-space-7);
}
.ri-foot-mail h2 {
  margin: 0 0 6px; font-size: var(--ri-fs-2xl); font-weight: 800;
  letter-spacing: -.02em; line-height: var(--ri-lh-tight);
}
.ri-foot-mail__copy p { margin: 0; font-size: var(--ri-fs-sm); line-height: var(--ri-lh-base); }
.ri-foot-mail__soon { margin: 0; font-size: var(--ri-fs-sm); font-weight: 700; }

.ri-mailform__row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ri-space-2);
}
.ri-mailform .ri-field { flex: 1 1 190px; min-width: 0; margin: 0; }
.ri-mailform .ri-field label {
  display: block; margin: 0 0 4px;
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-accent-ink);
}
.ri-mailform .ri-field label span { font-weight: 400; opacity: .7; }
/* ★입력 글자는 16px 로 둔다 — iOS 는 16px 미만이면 포커스 순간 화면을 확대한다 */
.ri-mailform input[type="email"], .ri-mailform select {
  width: 100%; height: 44px; padding: 0 10px; font-size: 16px;
  color: var(--ri-text); background: #fff;
  border: 1px solid var(--ri-line-strong); border-radius: 0;
}
.ri-mailform .ri-btn { flex: 0 0 auto; height: 44px; }
.ri-mailform .ri-check {
  display: flex; gap: 8px; margin: 10px 0 0;
  font-size: var(--ri-fs-xs); line-height: 1.5;
}
.ri-mailform .ri-check small { display: block; opacity: .78; }
.ri-mailform__msg { margin: 8px 0 0; font-size: var(--ri-fs-sm); font-weight: 700; min-height: 1em; }
.ri-mailform__msg.is-ok { color: #06381F; }
.ri-mailform__msg.is-ng { color: #5B0F0F; }

/* ── ② 링크 네 열 ──────────────────────────────────────────────────── */
.ri-foot-main { background: var(--ri-brand); color: var(--ri-brand-ink); }
.ri-foot-grid {
  display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0,1fr));
  gap: var(--ri-space-6);
  padding-top: var(--ri-space-8); padding-bottom: var(--ri-space-7);
}
.ri-foot-brand__name {
  margin: 0 0 10px; font-size: var(--ri-fs-lg); font-weight: 800; letter-spacing: -.01em;
}
.ri-foot-brand__desc { margin: 0 0 14px; font-size: var(--ri-fs-sm); line-height: var(--ri-lh-base); opacity: .82; }
.ri-foot-brand__note {
  margin: 0; padding: 10px 12px; font-size: var(--ri-fs-xs); line-height: 1.6;
  background: rgba(255,255,255,.08);
}
.ri-foot-col h3 {
  margin: 0 0 10px; font-size: var(--ri-fs-sm); font-weight: 800; letter-spacing: .01em;
}
.ri-foot-col ul { margin: 0; padding: 0; list-style: none; }
.ri-foot-col li { margin: 0 0 7px; }
.ri-foot-col a {
  font-size: var(--ri-fs-sm); color: var(--ri-brand-ink); opacity: .8;
  text-decoration: none;
}
.ri-foot-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
/* ★개인정보처리방침은 «다른 링크와 시각적으로 구분» 하라는 것이 브리프 요구다 */
.ri-foot-col a.is-strong { font-weight: 800; opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.ri-foot__soon { font-size: var(--ri-fs-sm); opacity: .45; }
.ri-foot__soon small { font-size: 11px; }

/* ── ③ 창구 띠 — 전화번호를 «크게» ─────────────────────────────────── */
.ri-foot-help { background: var(--ri-deep); color: #fff; }
.ri-foot-help__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ri-space-4) var(--ri-space-8);
  padding-top: var(--ri-space-5); padding-bottom: var(--ri-space-5);
}
.ri-foot-help p { margin: 0; }
.ri-foot-help span {
  display: block; font-size: var(--ri-fs-xs); opacity: .7; margin-bottom: 2px;
}
.ri-foot-help__tel a {
  font-family: var(--ri-font-num); font-size: var(--ri-fs-2xl); font-weight: 800;
  color: #fff; letter-spacing: -.01em; text-decoration: none;
}
.ri-foot-help__mail a { font-size: var(--ri-fs-lg); font-weight: 700; color: #fff; }
.ri-foot-help__time { margin-left: auto; font-size: var(--ri-fs-sm); text-align: right; opacity: .85; }
.ri-foot-help__time small { opacity: .7; }

/* ── ④ 법정 정보 ───────────────────────────────────────────────────── */
.ri-foot-legal { background: #000A33; color: #fff; }
.ri-foot-legal .ri-wrap { padding-top: var(--ri-space-5); padding-bottom: var(--ri-space-6); }
.ri-foot-legal__menu { display: flex; flex-wrap: wrap; gap: var(--ri-space-4); margin: 0 0 12px; padding: 0; list-style: none; }
.ri-foot-legal__menu a { font-size: var(--ri-fs-xs); color: #fff; opacity: .75; }
.ri-foot-legal__biz {
  margin: 0 0 10px; font-style: normal;
  font-size: var(--ri-fs-xs); line-height: 1.8; opacity: .72;
}
.ri-foot-legal__biz a { color: #fff; }
.ri-foot-legal__note { margin: 0 0 10px; font-size: var(--ri-fs-xs); line-height: 1.8; opacity: .6; }
.ri-foot-legal__copy { margin: 0; font-size: var(--ri-fs-xs); opacity: .5; }

/* ── 좁은 화면 ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ri-foot-mail__in { grid-template-columns: 1fr; gap: var(--ri-space-5); }
  .ri-foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--ri-space-5); }
  .ri-foot-brand { grid-column: 1 / -1; }
  .ri-foot-help__time { margin-left: 0; text-align: left; flex-basis: 100%; }
}
@media (max-width: 560px) {
  .ri-foot-grid { grid-template-columns: 1fr; }
  .ri-foot-mail h2 { font-size: var(--ri-fs-xl); }
  .ri-mailform .ri-field { flex-basis: 100%; }
  .ri-mailform .ri-btn { width: 100%; }
}


/* ══ 24. 메인 슬라이더 — 유명 대회 10 ═════════════════════════════════
   ★사진이 없다. 그래서 «글자» 가 그림이다.
     대회명 40px, 날짜 24px 숫자체, 나머지 13px — 강약을 크게 벌린다.
     사장님이 「AI 같다」고 한 화면은 전부 «같은 크기» 였다.
   ★그라데이션 금지 — 배경은 단색 남색, 덮개도 단색 rgba 다.
   ═══════════════════════════════════════════════════════════════════ */
.u-hs { position: relative; background: var(--ri-brand); color: var(--ri-brand-ink); overflow: hidden; }
.u-hs__vp { overflow: hidden; }
.u-hs__track {
  display: flex; margin: 0; padding: 0; list-style: none;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.u-hs__slide { flex: 0 0 100%; min-width: 0; }
.u-hs__link {
  display: block; color: inherit; text-decoration: none;
  max-width: var(--ri-container); margin: 0 auto;
  padding: var(--ri-space-8) var(--ri-space-4) var(--ri-space-7);
}

.u-hs__meta { margin: 0 0 var(--ri-space-3); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.u-hs__scope, .u-hs__type {
  font-size: var(--ri-fs-xs); font-weight: 800; letter-spacing: .04em;
  padding: 3px 8px;
}
.u-hs__scope { background: var(--ri-accent); color: var(--ri-accent-ink); }
.u-hs__type  { background: rgba(255,255,255,.14); color: #fff; }
/* 슬라이더 안의 상태 배지는 «어두운 면 위» 라 글자색을 뒤집는다 */
.u-hs__meta .u-st { color: #fff; }
.u-hs__meta .u-st::before { background: #fff; }

.u-hs__name {
  margin: 0 0 var(--ri-space-4);
  font-size: 40px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em;
  max-width: 18ch;
}
.u-hs__facts {
  margin: 0 0 var(--ri-space-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--ri-space-5);
}
.u-hs__date {
  font-family: var(--ri-font-num); font-size: var(--ri-fs-2xl); font-weight: 700;
  letter-spacing: -.01em;
}
.u-hs__ven { display: inline-flex; align-items: center; font-size: var(--ri-fs-base); opacity: .9; }
.u-hs__ven .ri-i { width: 1.1em; height: 1.1em; }
.u-hs__dday {
  font-family: var(--ri-font-num); font-size: var(--ri-fs-sm); font-weight: 800;
  padding: 3px 9px; background: #fff; color: var(--ri-brand);
}
.u-hs__dist { margin: 0 0 var(--ri-space-5); }
.u-hs__go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ri-fs-sm); font-weight: 800;
  padding: 10px 18px; background: var(--ri-accent); color: var(--ri-accent-ink);
}
.u-hs__link:hover .u-hs__go { background: #fff; }

/* 조종부 */
.u-hs__ctrl {
  max-width: var(--ri-container); margin: 0 auto;
  padding: 0 var(--ri-space-4) var(--ri-space-5);
  display: flex; align-items: center; gap: var(--ri-space-2);
}
.u-hs__arw {
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  font-size: 22px; line-height: 1;
  color: #fff; background: rgba(255,255,255,.12); border: 0;
}
.u-hs__arw:hover { background: rgba(255,255,255,.26); }
.u-hs__dots { display: flex; gap: 6px; margin: 0 var(--ri-space-2); padding: 0; list-style: none; }
.u-hs__dots button {
  width: 26px; height: 4px; padding: 0; cursor: pointer; border: 0;
  background: rgba(255,255,255,.3);
}
/* ★점의 «지금 위치» 를 색만으로 알리지 않는다 — 너비도 함께 늘린다 */
.u-hs__dots button[aria-selected="true"] { background: var(--ri-accent); width: 40px; }
.u-hs__stop {
  margin-left: auto; padding: 6px 12px; cursor: pointer; border: 0;
  font-size: var(--ri-fs-xs); font-weight: 700;
  color: #fff; background: rgba(255,255,255,.12);
}
.u-hs__stop .u-hs__stop-off { display: none; }
.u-hs__stop[aria-pressed="true"] .u-hs__stop-on { display: none; }
.u-hs__stop[aria-pressed="true"] .u-hs__stop-off { display: inline; }

@media (max-width: 720px) {
  .u-hs__name { font-size: 26px; max-width: none; }
  .u-hs__date { font-size: var(--ri-fs-xl); }
  .u-hs__link { padding: var(--ri-space-6) var(--ri-space-4) var(--ri-space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .u-hs__track { transition: none; }
}


/* ══ 25. 강약 · 수평 키 — 「AI 같다」를 고치는 층 ══════════════════════
   A 의 진단 : 「모든 요소가 같은 간격 · 같은 굵기 · 같은 크기로 균질합니다. 강약이 없습니다」
              「선으로 나누지 말고 «여백» 으로 나누십시오」
   사장님   : 「가독성이 넘 떨어져」 「배지카드 들 아이콘이나 텍스트들 전부 수평 키 맞쳐서」

   ★이 층은 «맨 뒤» 에 온다. 앞의 규칙들을 이기려고 일부러 여기 둔 것이다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ① 목록 줄 : 가장 중요한 것을 «가장 크게» ────────────────────────
   고치기 전에는 대회명 14.5px < 날짜 17px 이었다.
   러너가 찾는 것은 «대회» 지 날짜가 아니다. 순서를 되돌린다. */
.u-sched__name a { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.u-sched__date b { font-size: 16px; }
/* 장소·주최는 «있으면 좋은 것». 확 낮춘다 */
.u-sched__place { font-size: 11.5px; opacity: .82; }

/* ── ② 선을 걷고 «면» 으로 나눈다 ───────────────────────────────────
   밑줄 1px «과» 줄무늬가 둘 다 있었다. 두 번 나눈 것이라 화면이 기계처럼 보인다. */
.u-sched__row { border-bottom: 0; padding: 9px 12px; }
/* 다만 표의 «끝» 은 있어야 한다 — 어디서 끝나는지는 알려 준다 */
.u-sched { border-bottom: 1px solid var(--ri-line); }

/* ── ③ 배지카드 — 한 줄의 모든 것을 «같은 가로선» 에 ─────────────────
   사장님 : 「배지카드 들 아이콘이나 텍스트들 전부 수평 키 맞쳐서 디자인해」
   ★baseline 이 아니라 center 로 맞춘다. 글꼴마다 베이스라인이 달라
     같은 값을 줘도 화면마다 어긋난다(한글 글꼴에서 특히 심하다). */
.ri-card__top,
.ri-card__meta,
.ri-card__tags { display: flex; flex-wrap: wrap; align-items: center; }
.ri-card__top  { gap: 6px 8px; }
.ri-card__meta { gap: 4px 10px; }
.ri-card__tags { gap: 4px; }
.ri-card__meta > span { display: inline-flex; align-items: center; }

/* 카드 안에서도 대회명이 «가장 크다» */
.ri-card__title { font-size: var(--ri-fs-lg); font-weight: 700; letter-spacing: -.015em; }
.ri-card__meta  { font-size: var(--ri-fs-sm); color: var(--ri-text-sub); }

/* 구분 칩(국내·트레일런)은 «조용하게». 종목 칩이 이겨야 한다 */
.ri-card__tags li.is-plain {
  background: var(--ri-surface-2); color: var(--ri-text-sub); font-weight: 400;
}
/* 종목 칩은 목록과 같은 색표를 쓴다 (21장) */
.ri-card__tags li.is-full  { background: var(--ri-accent);  color: var(--ri-accent-ink); font-weight: 700; }
.ri-card__tags li.is-half  { background: var(--ri-brand);   color: var(--ri-brand-ink); }
.ri-card__tags li.is-ten   { background: var(--ri-deep);    color: #fff; }
.ri-card__tags li.is-five  { background: var(--ri-brand-weak); color: var(--ri-brand);
                             box-shadow: inset 0 0 0 1px rgba(26,26,26,.22); }
.ri-card__tags li.is-ultra { background: #7A1F3D; color: #fff; }
.ri-card__tags li.is-trail { background: #6B4423; color: #fff; }
.ri-card__tags li.is-etc   { background: var(--ri-surface-2); color: var(--ri-text-sub); }
.ri-card__tags li { display: inline-flex; align-items: center; }
.ri-card__tags .ri-i { width: 1.1em; height: 1.1em; margin-right: .25em; }

@media (max-width: 720px) {
  .u-sched__name a { font-size: 15px; }
  .u-sched__row { padding: 8px 10px; }
}


/* ══ 26. 신문·잡지·은행 톤 ═════════════════════════════════════════════
   사장님 지시 2026-08-23 저녁 :
     「신문사 처럼 흰색으로 … 컬러가 넘 많어 … 푸터는 검정 계열로」
     「은행 그런데도 참고 하고 현재 색이 넘 강해서 눈이 불편해」

   ★이 층이 «맨 뒤» 에 오는 까닭 : 앞에서 칠한 큰 면들을 «걷어내야» 하기 때문이다.
     토큰(21~25장)만 바꿔서는 하드코딩된 rgba·흰색이 남는다.

   지키는 규칙 넷 —
     ① 큰 면은 칠하지 않는다. 흰 종이 위에 «가는 괘선» 으로 나눈다
     ② 강조는 색이 아니라 «크기·굵기·여백» 으로 한다
     ③ 강한 색(#A3161F)은 «급한 것» 에만. 마감임박 · D-day · 일요일
     ④ 푸터만 검정 — 본문이 끝났다는 것을 색으로 알린다
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ri-paper:     #FFFFFF;   /* 종이 */
  --ri-paper-2:   #F7F7F5;   /* 아주 옅은 미색 — 표 줄무늬·칩 바탕 */
  --ri-rule:      #E3E3DF;   /* 가는 괘선 */
  --ri-rule-2:    #C9C9C4;   /* 조금 진한 괘선 — 표 머리 아래 */
  --ri-rule-hard: #1A1A1A;   /* 굵은 괘선 — 신문의 «단 나누기» */
  --ri-ink:       #1A1A1A;
  --ri-ink-2:     #6B6B6B;
  --ri-ink-3:     #9A9A9A;
  --ri-urgent:    #A3161F;   /* ★화면에서 «유일하게 강한 색». 급한 것에만 */
  --ri-footer:    #141414;   /* 푸터 검정 계열 */
}

body { background: var(--ri-paper); }


/* ── 첫 화면 : 사진 위 파랑 덮개를 걷는다 ───────────────────────────── */
.u-hero { background: var(--ri-paper); color: var(--ri-ink); }
.u-hero::before,
.u-hero::after { background: rgba(20,20,20,.46) !important; }   /* 남색 덮개 → 중립 먹 */
.u-hero__eyebrow { color: #FFFFFF; letter-spacing: .22em; opacity: .85; }
.u-hero__title { letter-spacing: -.03em; }
.u-cta { background: var(--ri-ink); color: #FFFFFF; border: 1px solid var(--ri-ink); }
.u-cta:hover { background: #000000; }
.u-cta--ghost { background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,.75); }
.u-cta--ghost:hover { background: rgba(255,255,255,.14); }


/* ── 숫자 띠 : 통짜 칠 대신 위아래 굵은 괘선 ─────────────────────────── */
.u-stats {
  background: var(--ri-paper); color: var(--ri-ink);
  border-top: 2px solid var(--ri-rule-hard);
  border-bottom: 1px solid var(--ri-rule);
}
.u-stat b { color: var(--ri-ink); }
.u-stat span, .u-stats__note { color: var(--ri-ink-2); }


/* ── 메인 슬라이더 : 신문 1면 톱기사처럼 ─────────────────────────────── */
.u-hs { background: var(--ri-paper); color: var(--ri-ink); border-bottom: 1px solid var(--ri-rule); }
.u-hs__link { border-top: 1px solid var(--ri-rule); }
.u-hs__slide:first-child .u-hs__link { border-top: 0; }
.u-hs__scope { background: var(--ri-ink); color: #FFFFFF; }
.u-hs__type  { background: transparent; color: var(--ri-ink-2); box-shadow: inset 0 0 0 1px var(--ri-rule-2); }
.u-hs__meta .u-st { color: var(--ri-ink-2); }
.u-hs__meta .u-st::before { background: var(--ri-ink-2); }
.u-hs__name { color: var(--ri-ink); }
.u-hs__ven { color: var(--ri-ink-2); }
.u-hs__dday { background: transparent; color: var(--ri-urgent); box-shadow: inset 0 0 0 1px var(--ri-urgent); }
.u-hs__go { background: var(--ri-ink); color: #FFFFFF; }
.u-hs__link:hover .u-hs__go { background: #000000; color: #FFFFFF; }
.u-hs__arw { background: transparent; color: var(--ri-ink); box-shadow: inset 0 0 0 1px var(--ri-rule-2); }
.u-hs__arw:hover { background: var(--ri-paper-2); }
.u-hs__dots button { background: var(--ri-rule-2); }
.u-hs__dots button[aria-selected="true"] { background: var(--ri-ink); }
.u-hs__stop { background: transparent; color: var(--ri-ink-2); box-shadow: inset 0 0 0 1px var(--ri-rule-2); }


/* ── 흐르는 띠 ──────────────────────────────────────────────────────── */
.u-flow { background: var(--ri-paper-2); color: var(--ri-ink); border-bottom: 1px solid var(--ri-rule); }
.u-flow a { color: var(--ri-ink); }
.u-flow__stop { background: var(--ri-paper); color: var(--ri-ink-2); box-shadow: inset 0 0 0 1px var(--ri-rule-2); }


/* ── 종목 칩 : «칠하기» 를 그만두고 테두리로 가른다 ───────────────────
   앞서 여섯 가지 색으로 칠했더니 한 줄에 색면이 대여섯 개씩 떴다.
   신문은 그렇게 하지 않는다 — 굵기와 테두리로 가른다.
   ★그래도 «가려는 진다». 풀코스만 반전(검정 채움)이고,
     울트라·트레일은 산·장거리라는 뜻을 살려 다른 선색을 준다. */
.u-dist li,
.ri-card__tags li {
  background: var(--ri-paper) !important;
  color: var(--ri-ink-2) !important;
  box-shadow: inset 0 0 0 1px var(--ri-rule-2) !important;
  font-weight: 500;
}
.u-dist li.is-full,  .ri-card__tags li.is-full {
  background: var(--ri-ink) !important; color: #FFFFFF !important;
  box-shadow: none !important; font-weight: 700;
}
.u-dist li.is-half,  .ri-card__tags li.is-half {
  color: var(--ri-ink) !important; box-shadow: inset 0 0 0 1.5px var(--ri-ink) !important; font-weight: 700;
}
.u-dist li.is-ten,   .ri-card__tags li.is-ten,
.u-dist li.is-five,  .ri-card__tags li.is-five,
.u-dist li.is-etc,   .ri-card__tags li.is-etc { color: var(--ri-ink-2) !important; }
.u-dist li.is-ultra, .ri-card__tags li.is-ultra {
  color: var(--ri-urgent) !important; box-shadow: inset 0 0 0 1.5px var(--ri-urgent) !important; font-weight: 700;
}
.u-dist li.is-trail, .ri-card__tags li.is-trail {
  color: #7A4A17 !important; box-shadow: inset 0 0 0 1.5px #7A4A17 !important; font-weight: 700;
}
.ri-card__tags li.is-plain { color: var(--ri-ink-3) !important; }


/* ── 일정표 : 줄무늬를 걷고 괘선으로 ─────────────────────────────────
   줄무늬(면)와 밑줄(선)이 둘 다 있었다. 신문 일정표는 «가는 선 하나» 다. */
.u-sched { border-top: 2px solid var(--ri-rule-hard); border-bottom: 2px solid var(--ri-rule-hard); }
.u-sched__row:nth-child(even) { background: transparent; }
.u-sched__row { border-bottom: 1px solid var(--ri-rule); }
.u-sched__row:last-child { border-bottom: 0; }
.u-sched__row:hover,
.u-sched__row:nth-child(even):hover { background: var(--ri-paper-2); }
.u-sched__date b { color: var(--ri-ink); }
.u-sched__date--sat b { color: var(--ri-ink-2); }     /* 파랑 걷음 */
.u-sched__date--sun b { color: var(--ri-urgent); }    /* 일요일만 빨강 — 달력의 관습 */
.u-dday { color: var(--ri-ink-2); }
.u-dday--past { color: var(--ri-ink-3); }
.u-sched__row .u-st--closing .u-dday,
.u-st--closing { color: var(--ri-urgent); font-weight: 700; }


/* ── 카드 : 그림자를 걷고 괘선 한 줄 ─────────────────────────────────── */
.ri-card {
  background: var(--ri-paper); box-shadow: none;
  border: 0; border-bottom: 1px solid var(--ri-rule);
}
.ri-card__title a { color: var(--ri-ink); }


/* ── 펼침 : 안쪽도 흰 종이 ───────────────────────────────────────────── */
.u-panel { background: var(--ri-paper-2); border-top: 1px solid var(--ri-rule); }
.u-panel__in { background: var(--ri-paper-2); }
.u-panel__tbl thead th { background: transparent; color: var(--ri-ink-2);
                         border-bottom: 1px solid var(--ri-rule-2); }
.u-panel__tbl th, .u-panel__tbl td { border-bottom: 1px solid var(--ri-rule); }
.u-pnl__url-v { background: var(--ri-paper); border-color: var(--ri-rule-2); }
.u-pnl__url-k { background: transparent; color: var(--ri-ink-2);
                box-shadow: inset 0 0 0 1px var(--ri-rule-2); }
.u-pnl__copy  { background: var(--ri-ink); color: #FFFFFF; }
.u-pnl__copy.is-done { background: #2F6B45; }
.u-pnl__map-f { background: var(--ri-paper-2); }


/* ── 섹션 머리 : 신문의 «단 제목» ───────────────────────────────────── */
.u-sec__head { border-bottom: 2px solid var(--ri-rule-hard); padding-bottom: 8px; }
.u-sec__kicker { color: var(--ri-ink-2); letter-spacing: .18em; font-size: 11px; }
.u-sec__title  { color: var(--ri-ink); letter-spacing: -.025em; }
.u-more { color: var(--ri-ink); text-decoration: underline; text-underline-offset: 4px; }


/* ══ 푸터 — 검정 계열 (사장님 지시) ═══════════════════════════════════
   「신문사 처럼 푸터는 검정 계열로 해」
   ★①(메일링)만 흰 종이로 남긴다. 거기는 «손님이 뭔가를 적는» 자리라
     검정 위에 입력칸을 두면 은행 사이트에서 하지 않는 모양이 된다.
     대신 위아래를 굵은 괘선으로 끊어 신문 하단 광고란처럼 보이게 한다. */
.ri-foot-mail {
  background: var(--ri-paper); color: var(--ri-ink);
  border-top: 2px solid var(--ri-rule-hard);
  border-bottom: 1px solid var(--ri-rule);
}
.ri-foot-mail h2 { color: var(--ri-ink); font-size: var(--ri-fs-xl); letter-spacing: -.025em; }
.ri-foot-mail__copy p { color: var(--ri-ink-2); }
.ri-mailform .ri-field label { color: var(--ri-ink-2); }
.ri-mailform input[type="email"], .ri-mailform select {
  border: 1px solid var(--ri-rule-2); background: var(--ri-paper);
}
.ri-mailform .ri-btn { background: var(--ri-ink); color: #FFFFFF; border: 0; }
.ri-mailform .ri-btn:hover { background: #000000; }
.ri-mailform .ri-check { color: var(--ri-ink-2); }
.ri-mailform__msg.is-ok { color: #2F6B45; }
.ri-mailform__msg.is-ng { color: var(--ri-urgent); }

.ri-foot-main   { background: var(--ri-footer); color: #FFFFFF; }
.ri-foot-help   { background: var(--ri-footer); color: #FFFFFF;
                  border-top: 1px solid rgba(255,255,255,.14); }
.ri-foot-legal  { background: var(--ri-footer); color: #FFFFFF;
                  border-top: 1px solid rgba(255,255,255,.14); }
.ri-foot-brand__note { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.ri-foot-help__tel a { color: #FFFFFF; }
.ri-foot-help__mail a { color: #FFFFFF; }
.ri-foot-col h3 { color: #FFFFFF; opacity: .55; font-size: 11px; letter-spacing: .16em;
                  text-transform: none; }
.ri-foot-col a { opacity: .78; }
.ri-foot-col a.is-strong { opacity: 1; }


/* ── 좁은 화면 ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .u-sched { border-top-width: 1px; border-bottom-width: 1px; }
  .u-sec__head { border-bottom-width: 1px; }
}


/* ══ 27. 신문 톤 마무리 — 첫 화면과 종목칩 ═════════════════════════════
   26장을 올린 뒤 라이브에서 두 가지가 걸렸다.

   ① 첫 화면이 «커다란 회색 덩어리» 가 됐다.
      사진 위에 덮개를 씌우는 방식 자체가 신문의 것이 아니다.
      신문 1면은 «흰 종이 + 검은 제목 + 가는 괘선» 이다. 사진은 기사 옆에 붙지,
      제목 뒤에 깔리지 않는다. 덮개를 걷고 흰 지면으로 바꾼다.
      ★사진(runin_hero_image)은 «지우지 않는다». 나중에 기사형 배치로 다시 쓴다.

   ② 종목칩에 빨강·갈색 테두리가 남아 한 줄에 색이 여럿 떴다.
      사장님 : 「컬러가 넘 많어 … 색이 넘 강해서 눈이 불편해」
      색을 빼고 «채움 / 테두리 / 굵기 + 아이콘» 으로만 가른다.
      (아이콘이 이미 다르다 — 사람·신발·산)
   ═══════════════════════════════════════════════════════════════════ */

/* ── ① 첫 화면 : 흰 지면 ────────────────────────────────────────────── */
.u-hero {
  background: var(--ri-paper);
  color: var(--ri-ink);
  border-bottom: 2px solid var(--ri-rule-hard);
  min-height: 0;
}
.u-hero__bg { display: none; }                     /* 사진은 잠시 내린다(값은 그대로 둔다) */
.u-hero::before, .u-hero::after { display: none !important; }
.u-hero__in {
  padding: var(--ri-space-9) var(--ri-space-4) var(--ri-space-8);
  text-align: center;
}
.u-hero__eyebrow {
  color: var(--ri-ink-2); opacity: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .24em;
}
.u-hero__title {
  color: var(--ri-ink);
  font-size: clamp(30px, 5vw, 52px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.16;
  text-shadow: none;
}
.u-hero__sub { color: var(--ri-ink-2); }
.u-hero .u-cta { background: var(--ri-ink); color: #FFFFFF; border: 1px solid var(--ri-ink); }
.u-hero .u-cta--ghost {
  background: transparent; color: var(--ri-ink); border: 1px solid var(--ri-rule-2);
}
.u-hero .u-cta--ghost:hover { background: var(--ri-paper-2); border-color: var(--ri-ink); }

/* ── ② 종목칩 : 색을 빼고 «채움·테두리·굵기» 로만 가른다 ─────────────── */
.u-dist li, .ri-card__tags li {
  background: var(--ri-paper) !important;
  color: var(--ri-ink-2) !important;
  box-shadow: inset 0 0 0 1px var(--ri-rule-2) !important;
  font-weight: 500;
}
.u-dist li.is-full, .ri-card__tags li.is-full {          /* 풀 — 반전 */
  background: var(--ri-ink) !important; color: #FFFFFF !important;
  box-shadow: none !important; font-weight: 700;
}
.u-dist li.is-half, .ri-card__tags li.is-half {          /* 하프 — 굵은 테두리 */
  color: var(--ri-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--ri-ink) !important; font-weight: 700;
}
.u-dist li.is-ultra, .ri-card__tags li.is-ultra,         /* 울트라·트레일 — 옅은 채움 */
.u-dist li.is-trail, .ri-card__tags li.is-trail {
  background: #EDEDE9 !important; color: var(--ri-ink) !important;
  box-shadow: none !important; font-weight: 700;
}
.u-dist li.is-ten, .ri-card__tags li.is-ten,
.u-dist li.is-five, .ri-card__tags li.is-five,
.u-dist li.is-etc, .ri-card__tags li.is-etc {
  color: var(--ri-ink-2) !important; font-weight: 500;
}

/* 슬라이더 안의 칩도 같은 규칙을 따른다 */
.u-hs__dist li { background: var(--ri-paper) !important; }
.u-hs__dist li.is-full { background: var(--ri-ink) !important; }
.u-hs__dist li.is-ultra, .u-hs__dist li.is-trail { background: #EDEDE9 !important; }


/* ══ 28. 검정은 «푸터에만» ═════════════════════════════════════════════
   사장님 : 「신문사 처럼 푸터는 검정 계열로 해」

   ★검정을 푸터에 주기로 했으면 «본문 한가운데» 에도 검정을 깔면 안 된다.
     그 순간 「여기가 끝」이라는 신호가 세 번 나오고, 페이지가 토막나 보인다.
     실측하니 본문에 큰 검은 면이 셋이었다 —
       ① 「무엇을 달리시겠습니까」 여덟 타일 (#1A1A1A 통짜)
       ② 「접수가 열리면 바로 알려드립니다」 띠 (#2E2E2E)
       ③ 섹션 머리띠 (국내/해외 대회일정)
     ①② 를 흰 지면 + 괘선으로 바꾼다. ③ 은 «작은 반전 제목» 이라 신문에도 있는 것이므로 둔다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ① 갈래 타일 : 신문의 «색인(index)» 처럼 ───────────────────────────
   ★선택자는 라이브 DOM 에서 «재서» 썼다 — .u-tiles > a.u-tile 이다.
     처음에 .u-pick 으로 짐작해 썼는데 이 화면에 없는 이름이었다. */
.u-tiles .u-tile {
  background: var(--ri-paper) !important;
  color: var(--ri-ink) !important;
  box-shadow: inset 0 0 0 1px var(--ri-rule) !important;
}
.u-tiles .u-tile:hover {
  background: var(--ri-paper-2) !important;
  box-shadow: inset 0 0 0 1px var(--ri-ink) !important;
}
.u-tiles .u-tile b { color: var(--ri-ink) !important; font-weight: 700; }
.u-tiles .u-tile span { color: var(--ri-ink-2) !important; }

/* ── ② 짙은 띠 : 흰 지면 + 위아래 굵은 괘선 ─────────────────────────── */
.u-band--deep {
  background: var(--ri-paper) !important;
  color: var(--ri-ink) !important;
  border-top: 2px solid var(--ri-rule-hard);
  border-bottom: 2px solid var(--ri-rule-hard);
}
.u-band--deep h2, .u-band--deep h3, .u-band--deep b { color: var(--ri-ink) !important; }
.u-band--deep p, .u-band--deep span, .u-band--deep small { color: var(--ri-ink-2) !important; }
.u-band--deep .ri-btn, .u-band--deep .u-cta, .u-sub .ri-btn {
  background: var(--ri-ink) !important; color: #FFFFFF !important; border: 0 !important;
}

/* ── ③ 「여기가 다른 점」 바탕도 종이색으로 ───────────────────────────── */
.u-why { background: var(--ri-paper-2) !important; color: var(--ri-ink) !important; }
.u-why .u-why__no, .u-why b { color: var(--ri-ink) !important; }

/* ── 섹션 머리띠는 남긴다 — 다만 «가늘게» ────────────────────────────── */
.u-col__head, .u-sec__bar { letter-spacing: -.01em; }