/*
Theme Name: 당진황금들녘 건강마라톤
Theme URI: https://dangjin9.mycafe24.com/
Author: 아이디씨닷케이알(주)
Author URI: https://idc.kr/
Description: 2026 당진황금들녘 건강마라톤 대회 전용 테마. 대회 요강·코스(하프·10km·5km)·시상·접수 안내를 한 벌로 담습니다. 요강 수치는 inc/race.php 한 곳에서 관리하고, 영어·일본어·중국어 지면은 inc/lang-en.php · lang-ja.php · lang-zh.php 에서 문장만 관리합니다(숫자는 race.php 한 곳).
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dangjin
Tags: one-column, custom-menu, translation-ready
*/

/* ═══════════════════════════════════════════════════════════════════════════
   규격은 춘천마라톤(chuncheonmarathon.com)을 2026-09-09 실측해 맞췄다.
     본문 칸 1280px (내용 1060px) · Noto Sans KR · 본문 18px · 대제목 48px/700
     행간 1.5 · 자간 −0.5px · 요강은 「라벨 : 값」 정의형에 얇은 구분선
   색만 당진의 것으로 바꾼다 — 춘천의 레드(#FF3214)를 그대로 쓰면 남의 대회로 보인다.
     황금들녘 = 벼가 익은 금빛 · 낟알 크림 · 삽교호 남색
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --dj-gold:#C8901E;          /* 벼 금빛 — 이 사이트의 단 하나 강조색 */
  --dj-gold-deep:#8A5D0F;
  --dj-gold-lt:#F0C05A;
  --dj-gold-soft:#F6E7C4;
  --dj-navy:#14213D;          /* 삽교호 남색 — 히어로·푸터 */
  --dj-navy-2:#1E2E52;
  --dj-ink:#1A1712;           /* 잉크. 순검정이 아니라 금빛 쪽으로 살짝 기울였다 */
  --dj-ink-2:#5C5344;
  --dj-ink-3:#736C5C;         /* 부연·캡션·날짜.
     예전 #8A8272 는 흰 바탕 3.81 · 크림 바탕 3.46 으로 WCAG AA(4.5)에 미달이었다(2026-09-10 실측).
     #736C5C 는 흰 5.21 · 크림 4.74 로 둘 다 통과한다.
     작은 글씨일수록 색을 연하게 하고 싶어지지만 거꾸로 가야 한다 */
  --dj-paper:#FFFFFF;
  --dj-rice:#F7F4EC;          /* 낟알 크림 — 섹션 바탕 */
  --dj-line:#E4DDCC;
  --dj-line-2:#CFC5AC;
  --dj-red:#B0361F;           /* 마감·경고에만 */

  --dj-wrap:1280px;
  --dj-read:1060px;
  --dj-head:76px;

  /* 벼 이삭 무늬 — 이 사이트의 «바탕결».
     🚨 파일로 두지 않고 CSS 안에 그린다. 요청이 한 번도 늘지 않고,
        색을 바꾸려면 이 한 줄만 고치면 된다.
     🚨 어두운 면에서만 쓴다. 밝은 바탕에 깔면 글자가 읽히지 않는다. */
  --dj-rice-pattern:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23F0C05A' stroke-width='1.1' stroke-linecap='round' opacity='0.22'%3E%3Cpath d='M14 46V26'/%3E%3Cpath d='M14 26c0-4 2-7 5-9'/%3E%3Cpath d='M14 31c0-3-2-5-5-6'/%3E%3Cpath d='M14 37c0-3 2-5 5-6'/%3E%3Cpath d='M42 46V26'/%3E%3Cpath d='M42 26c0-4-2-7-5-9'/%3E%3Cpath d='M42 31c0-3 2-5 5-6'/%3E%3Cpath d='M42 37c0-3-2-5-5-6'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--dj-paper);
  color:var(--dj-ink);
  font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕",system-ui,-apple-system,sans-serif;
  font-size:18px; line-height:1.5; letter-spacing:-.5px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--dj-gold-deep); text-decoration:none }
a:hover{ text-decoration:underline }
:focus-visible{ outline:3px solid var(--dj-gold); outline-offset:2px }

.dj-wrap{ max-width:var(--dj-wrap); margin:0 auto; padding:0 24px }
.dj-read{ max-width:var(--dj-read); margin:0 auto }
.dj-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--dj-navy); color:#fff; padding:12px 18px;
}
.dj-skip:focus{ left:0 }

/* ── 머리글 ─────────────────────────────────────────────────────────────
   춘천은 홈에서 검정 머리글, 서브에서 흰 머리글로 뒤집는다. 그 문법을 따른다. */
.dj-notice{
  background:var(--dj-navy); color:#EDE6D6;
  font-size:14px; letter-spacing:-.3px;
}
.dj-notice__in{
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding:8px 24px; max-width:var(--dj-wrap); margin:0 auto;
}
.dj-notice b{ color:var(--dj-gold-lt); font-weight:700; flex:0 0 auto }
.dj-notice a{ color:#EDE6D6; text-decoration:none }
.dj-notice a:hover{ text-decoration:underline }
.dj-notice__x{
  margin-left:auto; background:0; border:0; color:#9AA3B8;
  font-size:17px; line-height:1; cursor:pointer; padding:2px 4px;
}

.dj-head{
  position:sticky; top:0; z-index:40;
  background:var(--dj-paper); border-bottom:1px solid var(--dj-line);
}
.dj-head__in{
  display:flex; align-items:center; gap:20px;
  height:var(--dj-head); max-width:var(--dj-wrap); margin:0 auto; padding:0 24px;
}
.dj-logo{ display:flex; align-items:baseline; gap:8px; text-decoration:none; flex:0 0 auto }
.dj-logo__y{
  font-size:13px; font-weight:700; color:var(--dj-gold-deep); letter-spacing:.06em;
}
.dj-logo__n{
  font-size:20px; font-weight:800; color:var(--dj-ink); letter-spacing:-.04em;
}
/* 폰에서만 쓰는 짧은 이름 — 넓은 화면에서는 감춘다 */
.dj-logo__s{ display:none }
.dj-logo:hover{ text-decoration:none }

.dj-gnb{ margin-left:auto }
.dj-gnb ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0 }
.dj-gnb a{
  display:block; padding:6px 0; font-size:17px; font-weight:700;
  color:var(--dj-ink); text-decoration:none; letter-spacing:-.04em;
  border-bottom:2px solid transparent;
}
.dj-gnb a:hover,
.dj-gnb .current-menu-item > a,
.dj-gnb .current_page_item > a{ color:var(--dj-gold-deep); border-bottom-color:var(--dj-gold) }

.dj-head__cta{
  flex:0 0 auto; padding:9px 18px; background:var(--dj-gold); color:#1B1405;
  font-size:15px; font-weight:800; letter-spacing:-.03em; text-decoration:none;
}
.dj-head__cta:hover{ background:#DFA430; text-decoration:none }

.dj-lang{ display:flex; gap:6px; flex:0 0 auto }
.dj-lang a{
  font-size:12px; font-weight:700; color:var(--dj-ink-3);
  padding:3px 6px; border:1px solid var(--dj-line); text-decoration:none;
}
.dj-lang a[aria-current="true"]{ color:#1B1405; background:var(--dj-gold-soft); border-color:var(--dj-gold) }

.dj-burger{
  display:none; background:0; border:1px solid var(--dj-line);
  width:42px; height:38px; cursor:pointer; padding:0;
}
.dj-burger span{ display:block; width:20px; height:2px; background:var(--dj-ink); margin:4px auto }

/* ── 히어로 ─────────────────────────────────────────────────────────────
   춘천은 «단색 전면 + 거대한 영문 타이포» 한 방으로 연다. 그 힘을 가져오되
   색은 금빛 들녘으로. 사진이 들어오면 그 위에 금빛을 얹는다. */
.dj-hero{
  position:relative; background:var(--dj-navy); color:#fff; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(520px, 74vh, 740px);
}
/* 슬라이더가 없을 때만 금빛 단색으로 돌아간다 — 그림이 안 붙어도 허전하지 않게 */
.dj-hero:not(.dj-hero--bg){ background:var(--dj-gold) }
.dj-hero:not(.dj-hero--bg)::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, rgba(20,33,61,.42), transparent);
  pointer-events:none;
}
.dj-hero__in{
  position:relative; z-index:5; width:100%;
  max-width:var(--dj-wrap); margin:0 auto; padding:58px 24px 64px;
  text-align:center;
}

/* ── 첫 화면 슬라이더 ──────────────────────────────────────────────────
   🚨 새 장은 «오른쪽에서 들어와» 자리를 잡고, 지난 장은 왼쪽으로 밀려 나간다.
      지난 장을 100% 가 아니라 22% 만 밀어내는 것이 «깊이»를 만든다 —
      두 장이 같은 속도로 지나가면 종이 두 장이 스치는 것처럼 납작해 보인다.
   🚨 transform 과 opacity 만 움직인다. left·width 를 건드리면 매 프레임 다시 그린다. */
.dj-hbg{ position:absolute; inset:0; z-index:0; overflow:hidden }
.dj-hbg__s{
  position:absolute; inset:0; z-index:1;
  opacity:0; transform:translateX(100%);
  transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .65s ease;
  will-change:transform, opacity;
}
.dj-hbg__s.is-on{ opacity:1; transform:none; z-index:2 }
.dj-hbg__s.is-in{ opacity:0; transform:translateX(100%); z-index:3 }
.dj-hbg__s.is-out{ opacity:0; transform:translateX(-22%); z-index:1 }

.dj-hbg__p,
.dj-hbg__v{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--pos, center);
}
.dj-hbg__p{ z-index:1 }
.dj-hbg__v{ z-index:2 }

/* 글자가 읽히게 덮는 막 — 영상은 밝기가 계속 바뀌므로 반드시 필요하다.
   금빛을 아주 옅게 섞어 대회 색과 이어 둔다 */
.dj-hbg__veil{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(16,26,48,.70) 0%, rgba(16,26,48,.44) 40%, rgba(16,26,48,.84) 100%),
    linear-gradient(120deg, rgba(200,144,30,.20), rgba(200,144,30,0) 55%);
}

/* 어두운 그림 위에서는 「2026」과 단추 색을 바꾼다 — 남색은 묻힌다 */
.dj-hero--bg .dj-hero__en b{ color:var(--dj-gold-lt) }
.dj-hero--bg .dj-btn--fill{ background:var(--dj-gold); color:#1B1405 }
.dj-hero--bg .dj-btn--fill:hover{ background:#DFA430 }
.dj-hero--bg .dj-hero__when{ background:rgba(255,255,255,.94) }

/* 정지 단추 — 배경은 장식이라 aria-hidden 이지만 «멈춤»은 기능이라 여기는 아니다.
   🚨 점(dots)과 화살표는 두지 않는다. 점은 「눌러 보면 다른 내용이 있다」는 약속인데
      여기서는 글자가 그대로라 거짓말이 된다(실측 네 곳 중 화살표를 둔 뉴욕은
      «자동 넘김이 아예 없어» 화살표가 유일한 통로였다).
   🚨 44x44 이상이고 «늘 보인다». opacity:0 이나 hover 때만 나타나면
      단추가 있어도 위반으로 본다. */
.dj-hplay{
  position:absolute; z-index:6; right:20px; bottom:18px;
  width:44px; height:44px; padding:0; cursor:pointer;
  background:rgba(16,26,48,.5); border:1px solid rgba(255,255,255,.45); border-radius:50%;
  display:grid; place-items:center;
}
.dj-hplay:hover{ background:rgba(16,26,48,.78) }
.dj-hplay:focus-visible{ outline:3px solid #fff; outline-offset:2px }
.dj-hplay__i{
  display:block; width:10px; height:13px;
  border-left:3px solid #fff; border-right:3px solid #fff;   /* 멈춤 표 ▮▮ */
}
.dj-hplay:not(.is-playing) .dj-hplay__i{
  width:0; height:0; margin-left:3px;
  border:0; border-left:12px solid #fff;                      /* 다시 시작 표 ▶ */
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}

/* 움직임을 줄여 달라고 한 이용자에게는 넘기지 않는다 */
@media (prefers-reduced-motion: reduce){
  .dj-hbg__s{ transition:none }
  .dj-hbg__v{ display:none }
}

@media (max-width:820px){
  .dj-hero{ min-height:clamp(440px, 62vh, 560px) }
  /* 폰은 첫 장 한 벌만 보여 준다 — 넘기지 않으니 멈출 것도 없다 */
  .dj-hplay{ display:none }
  .dj-hbg__s:not(.is-on){ display:none }
}
.dj-hero__when{
  display:inline-block; padding:7px 20px; margin:0 0 26px;
  background:#fff; color:var(--dj-navy);
  font-size:19px; font-weight:800; letter-spacing:-.04em;
  border-radius:999px;
}
.dj-hero__en{
  margin:0; font-size:clamp(40px,8.6vw,110px); line-height:.92; font-weight:900;
  letter-spacing:-.045em; color:#FFF6DE; text-wrap:balance;
}
.dj-hero__en b{ display:block; color:var(--dj-navy); font-weight:900 }
.dj-hero__ko{
  margin:22px 0 0; font-size:clamp(19px,2.6vw,30px); font-weight:800;
  letter-spacing:-.05em; color:#fff; text-wrap:balance;
}
.dj-hero__sub{
  margin:10px 0 0; font-size:16px; color:rgba(255,255,255,.9); letter-spacing:-.03em;
}
.dj-hero__act{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:30px 0 0 }
.dj-btn{
  display:inline-block; padding:14px 30px; font-size:17px; font-weight:800;
  letter-spacing:-.04em; text-decoration:none; border:2px solid transparent;
}
.dj-btn--fill{ background:var(--dj-navy); color:#fff }
.dj-btn--fill:hover{ background:#0E1830; text-decoration:none }
.dj-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.75) }
.dj-btn--ghost:hover{ background:rgba(255,255,255,.14); text-decoration:none }
.dj-btn--gold{ background:var(--dj-gold); color:#1B1405 }
.dj-btn--gold:hover{ background:#DFA430; text-decoration:none }

/* 남은 날 — 🚨 자바스크립트가 채운다. 서버에서 찍으면 캐시에 숫자가 박힌다. */
.dj-dday{
  display:inline-flex; align-items:baseline; gap:9px; margin:24px 0 0;
  padding:9px 20px; background:rgba(20,33,61,.9); color:#fff;
  font-size:15px; letter-spacing:-.03em;
}
.dj-dday b{ font-size:26px; font-weight:900; font-variant-numeric:tabular-nums }
.dj-dday.is-hot b{ color:#FFB4A3 }

/* ── 흐르는 띠 ──────────────────────────────────────────────────────── */
.dj-marquee{
  background:var(--dj-navy); color:#fff; overflow:hidden; padding:13px 0;
  border-top:3px solid var(--dj-gold); border-bottom:3px solid var(--dj-gold);
}
.dj-marquee__t{
  display:inline-block; white-space:nowrap;
  font-size:20px; font-weight:900; letter-spacing:.02em;
  animation:dj-slide 26s linear infinite;
}
.dj-marquee__t span{ padding:0 26px; color:var(--dj-gold-lt) }
.dj-marquee__t span:nth-child(2n){ color:#fff }
@keyframes dj-slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){
  .dj-marquee__t{ animation:none }
}

/* ── 절 ─────────────────────────────────────────────────────────────── */
.dj-sec{ padding:64px 0 }
.dj-sec--rice{ background:var(--dj-rice) }
.dj-sec--navy{ background:var(--dj-navy); color:#EDE6D6 }
.dj-sec__hd{ text-align:center; margin:0 0 34px }
.dj-sec__eye{
  margin:0 0 8px; font-size:14px; font-weight:800; letter-spacing:.16em;
  color:var(--dj-gold-deep);
}
.dj-sec__t{
  margin:0; font-size:clamp(28px,4vw,48px); font-weight:700; line-height:1.2;
  letter-spacing:-.055em; text-wrap:balance;
}
.dj-sec--navy .dj-sec__t{ color:#fff }
.dj-sec__d{ margin:12px 0 0; font-size:17px; color:var(--dj-ink-2); letter-spacing:-.03em }
.dj-sec--navy .dj-sec__d{ color:#B9C0D2 }

/* ── 「라벨 : 값」 정의형 — 춘천의 요강 표기를 그대로 쓴다 ─────────────── */
.dj-dl{ margin:0; border-top:2px solid var(--dj-gold) }

/* 🚨 «줄이 두 겹으로 보이는» 자리를 한 곳에 모아 없앤다(2026-09-10 사장님 지시).
      까닭 : 앞 요소의 «아래 선»과 뒤 요소의 «위 선»이 잇달아 그려진다.
        · 마디 머리(구분선) 바로 뒤에 표(위 선)가 오면 두 줄
        · 본문 h2(밑줄) 바로 뒤에 표가 오면 두 줄
        · 도입 문단(아래 선) 바로 뒤에 게시판·문답(위 선)이 오면 두 줄
      «앞에 선이 없는» 자리(문단 뒤에 표가 오는 경우)에는 위 선이 그대로 남아야 하므로
      인접 선택자(+)로만 지운다. 통째로 지우면 구분이 사라진다. */
.dj-gsec__h + .dj-dl,
.dj-gsec__h + .dj-qa,
.dj-gsec__h + .dj-board,
.dj-gsec__h + .dj-notes,
.dj-prose h2 + .dj-dl,
.dj-prose h2 + .dj-qa,
.dj-prose h3 + .dj-dl,
.dj-prose h3 + .dj-qa,
.dj-lead + .dj-dl,
.dj-lead + .dj-qa,
.dj-lead + .dj-board{ border-top:0 }

/* 선을 지울 수 없는 자리(상자 테두리)는 «사이를 벌린다».
   좌표로 재 보니 24~26px 일 때 두 줄로 읽혔다. 32px 이상이면 각각의 것으로 보인다. */
.dj-gsec__h + .dj-prz,
.dj-crs + .dj-cmap,
.dj-prose h2 + .dj-courses,
.dj-prose h2 + .dj-crs{ margin-top:34px }
/* 🚨 여백을 행이 아니라 «칸»에 준다.
   행에 padding 을 주면 세로줄이 위아래 여백에서 끊겨 토막으로 보인다.
   (2026-09-10 사장님 지시 — 「글자가 두꺼워야 하고 옆에 수직 줄이 있으면 좋겠다」) */
.dj-dl__r{
  display:grid; grid-template-columns:158px 1fr;
  border-bottom:1px solid var(--dj-line);
}
.dj-dl__r dt{
  font-size:17px; font-weight:800; letter-spacing:.04em; color:var(--dj-ink);
  padding:18px 22px 18px 4px;
  border-right:1px solid var(--dj-line);
}
/* 라벨 앞 아이콘 — 🚨 «작고 연하게». 라벨보다 먼저 눈에 들어오면
   정작 읽어야 할 「주최」·「참가비」가 뒤로 밀린다. */
.dj-dl__r dt.dj-dtic{ display:flex; align-items:center; gap:8px }
.dj-dtic__i{
  flex:0 0 auto; display:grid; place-items:center;
  width:17px; height:17px; color:var(--dj-gold); opacity:.85;
}
.dj-dtic__i svg{ width:100%; height:100%; display:block }
@media (max-width:900px){
  .dj-dtic__i{ width:15px; height:15px }
  .dj-dl__r dt.dj-dtic{ gap:6px }
}
.dj-dl__r dd{ margin:0; padding:18px 4px 18px 26px; font-size:18px; letter-spacing:-.04em }
.dj-dl__r dd b{ font-weight:700 }
.dj-dl__r dd small{
  display:block; margin-top:4px; font-size:15px; color:var(--dj-ink-3); letter-spacing:-.03em;
}
.dj-dl__r dd .dj-hl{ color:var(--dj-gold-deep); font-weight:700 }
.dj-dl__r dd .dj-warn{ color:var(--dj-red); font-weight:700 }
.dj-dl__r + .dj-dl__r{ border-top:0 }

/* ── 종목 세 칸 ─────────────────────────────────────────────────────── */
.dj-courses{
  display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
}
.dj-course{
  display:flex; flex-direction:column; gap:10px;
  padding:0 0 26px; background:var(--dj-paper);
  border:1px solid var(--dj-line); border-top:5px solid var(--dj-gold);
  text-decoration:none; color:var(--dj-ink);
  overflow:hidden;                       /* 사진 모서리가 테두리 밖으로 안 나가게 */
}
/* 카드 머리 사진 — 「어떤 길을 달리는가」는 글보다 그림이 빠르다.
   🚨 사진은 장식이라 alt 를 비운다. 카드 전체가 이미 링크 글을 갖고 있다. */
.dj-course__ph{
  display:block; margin:0 0 4px;
  background:var(--dj-rice);
}
.dj-course__ph img{
  display:block; width:100%; height:auto;
  aspect-ratio:1040 / 500; object-fit:cover; object-position:center 58%;
}
/* 사진이 붙으면서 글은 안쪽 여백을 스스로 갖는다 */
.dj-course > :not(.dj-course__ph){ margin-left:26px; margin-right:26px }
.dj-course__d{ margin-top:18px }
.dj-course:hover{ border-color:var(--dj-gold); text-decoration:none }
.dj-course__d{
  font-size:38px; font-weight:900; line-height:1; letter-spacing:-.05em;
  color:var(--dj-gold-deep);
}
.dj-course__n{ font-size:20px; font-weight:700; letter-spacing:-.045em }
.dj-course__x{ font-size:15.5px; color:var(--dj-ink-2); letter-spacing:-.03em; line-height:1.55 }
.dj-course__go{
  margin-top:auto; padding-top:12px; font-size:15px; font-weight:700; color:var(--dj-gold-deep);
}

/* ── 시상 ───────────────────────────────────────────────────────────── */
.dj-prize{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.dj-prize__b{
  padding:26px 24px; background:rgba(200,144,30,.12);
  border-left:4px solid var(--dj-gold);
}
.dj-prize__t{
  margin:0; font-size:30px; font-weight:900; letter-spacing:-.05em; color:var(--dj-gold-lt);
}
.dj-sec:not(.dj-sec--navy) .dj-prize__t{ color:var(--dj-gold-deep) }
.dj-prize__s{ margin:6px 0 0; font-size:16px; letter-spacing:-.03em }
.dj-note{
  margin:20px 0 0; font-size:14.5px; color:var(--dj-ink-3); letter-spacing:-.03em;
}
.dj-sec--navy .dj-note{ color:#8E96AC }

/* ── 본문 ───────────────────────────────────────────────────────────── */
.dj-page{ padding:52px 0 72px }
.dj-crumb{ font-size:14px; color:var(--dj-ink-3); margin:0 0 14px; letter-spacing:-.02em }
.dj-crumb a{ color:var(--dj-ink-3) }
.dj-title{
  margin:0 0 34px; font-size:clamp(30px,4.6vw,48px); font-weight:700;
  line-height:1.2; letter-spacing:-.055em; text-align:center; text-wrap:balance;
}
.dj-prose{ font-size:18px; line-height:1.72; letter-spacing:-.035em }
.dj-prose > * + *{ margin-top:18px }
.dj-prose h2{
  margin:44px 0 14px; font-size:26px; font-weight:700; letter-spacing:-.05em;
  padding-bottom:10px; border-bottom:2px solid var(--dj-ink);
}
.dj-prose h3{
  margin:32px 0 10px; font-size:20px; font-weight:700; letter-spacing:-.045em;
  color:var(--dj-gold-deep);
}
.dj-prose ul,.dj-prose ol{ padding-left:22px }
.dj-prose li + li{ margin-top:7px }
.dj-prose li::marker{ color:var(--dj-gold) }
.dj-prose blockquote{
  margin:22px 0; padding:16px 20px; background:var(--dj-rice);
  border-left:4px solid var(--dj-gold);
}
.dj-prose img{ margin:22px auto }
.dj-tblwrap{ overflow-x:auto; margin:22px 0 }
.dj-prose table{ border-collapse:collapse; width:100%; min-width:520px; font-size:16px }
.dj-prose th,.dj-prose td{
  padding:12px 14px; border-bottom:1px solid var(--dj-line); text-align:left;
}
.dj-prose thead th{ background:var(--dj-rice); font-weight:700; border-bottom:2px solid var(--dj-line-2) }

/* 🚨 표는 «격자»로 짠다 — 사장님이 보내신 본보기(선사마라톤축제 요강)와 같은 결.
   칸이 여럿인 표에서 세로줄이 없으면 값이 어느 열 것인지 눈이 헤맨다.
   (2026-09-10 사장님 지시 — 「비슷하게 하면 될 거 같아, 표 만들어서」) */
.dj-prose table{ border-top:2px solid var(--dj-gold) }
.dj-prose th + th,
.dj-prose th + td,
.dj-prose td + th,
.dj-prose td + td{ border-left:1px solid var(--dj-line) }

/* 행 머리(종목 이름)는 라벨이므로 «값»보다 굵고 가운데로 */
.dj-prose tbody th{
  font-weight:800; text-align:center; white-space:nowrap;
  background:#FBF9F4;   /* 머리줄(#F7F4EC)보다 한 단계 연하게 — 두 라벨이 구분된다 */
}
/* 한 칸 안의 부연 — 「세 종목 모두 같습니다」처럼 */
.dj-prose td small,
.dj-prose th small{
  display:block; margin-top:5px; font-size:14px; font-weight:400;
  line-height:1.55; color:var(--dj-ink-3); letter-spacing:-.02em;
}
/* 세로로 합친 칸은 가운데에 놓아야 «세 줄에 걸린 값»으로 읽힌다 */
.dj-prose td[rowspan]{ vertical-align:middle; text-align:center }


/* ── 푸터 ───────────────────────────────────────────────────────────── */
.dj-foot{
  position:relative; overflow:hidden;
  background:var(--dj-navy); color:#B9C0D2; padding:52px 0 44px;
  font-size:15px; letter-spacing:-.03em;
}
/* 시상 블록과 «같은 바탕결». 어두운 면끼리 무늬를 맞추면 한 사이트로 읽힌다 */
.dj-foot::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--dj-rice-pattern);
  background-size:56px 56px; opacity:.42; pointer-events:none;
}
.dj-foot > *{ position:relative; z-index:1 }
/* 🚨 왼쪽 끝에 딱 붙지 않게 — 좁은 화면에서도 손가락 하나만큼은 띄운다 */
.dj-foot .dj-wrap{ padding-left:34px; padding-right:34px }

.dj-foot__top{
  display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.14);
}
.dj-foot h4{
  display:flex; align-items:center; gap:9px;
  margin:0 0 12px; font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--dj-gold-lt);
}
.dj-foot__ic{
  flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px;
  color:var(--dj-gold-lt);
}
.dj-foot__ic svg{ width:23px; height:23px; display:block }
.dj-foot p{ margin:0 0 5px }
.dj-foot b{ color:#EDE6D6; font-weight:700 }
.dj-foot a{ color:#B9C0D2 }

/* 푸터 메뉴 — 🚨 세로로 쌓이고 글머리 점이 붙던 것을 «가로 한 줄»로.
   목록 표시(list-style)를 지우지 않으면 워드프레스 기본 점이 그대로 나온다 */
.dj-foot__nav{ margin-top:22px }
.dj-foot__menu{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px;
  margin:0; padding:0; list-style:none;
}
.dj-foot__menu li{ list-style:none; margin:0; padding:0 }
.dj-foot__menu a{ color:#CDD3E2; font-size:14.5px; text-decoration:none }
.dj-foot__menu a:hover{ color:var(--dj-gold-lt); text-decoration:underline; text-underline-offset:3px }

.dj-foot__bot{ margin-top:24px; font-size:13.5px; color:#8C93A8; line-height:1.75 }
.dj-foot__bot a{ color:#9AA3B8 }

/* ── 폰에 붙는 신청 띠 ──────────────────────────────────────────────── */
.dj-mfix{ display:none }

/* ── 좁은 화면 ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  body{ font-size:17px }
  .dj-burger{ display:block }
  .dj-gnb{
    display:none; position:absolute; left:0; right:0; top:var(--dj-head);
    background:var(--dj-paper); border-bottom:1px solid var(--dj-line);
    box-shadow:0 12px 26px rgba(0,0,0,.09);
  }
  .dj-gnb.is-open{ display:block }
  .dj-gnb ul{ flex-direction:column; gap:0; padding:8px 0 }
  .dj-gnb a{ padding:14px 24px; border-bottom:0 }
  .dj-head__cta{ display:none }

  /* 🚨 언어 단추가 화면 밖으로 밀려나면 폰에서는 다른 언어로 갈 «길이 없다».
        375px 에서 로고 긴 이름 그대로는 96px 이 밖으로 나갔다(2026-09-10 실측).
        머리글을 좁히고 로고를 짧은 이름으로 바꿔 넷을 다 안에 넣는다. */
  .dj-head__in{ gap:10px; padding:0 16px }
  .dj-logo{ flex:0 1 auto; min-width:0 }
  .dj-logo__n{ display:none }
  .dj-logo__s{ display:inline; font-size:17px; font-weight:800; color:var(--dj-ink); letter-spacing:-.04em }
  .dj-lang{ order:3; gap:4px; margin-left:auto }
  .dj-lang a{ padding:3px 5px; font-size:11px }
  .dj-dl__r{ grid-template-columns:1fr; gap:4px; padding:15px 2px }
  .dj-dl__r dt{
    font-size:14px; color:var(--dj-gold-deep); letter-spacing:.06em;
    padding:0; border-right:0;          /* 세로줄은 두 칸일 때만 뜻이 있다 */
  }
  .dj-dl__r dd{ font-size:17px; padding:0 }
  .dj-sec{ padding:46px 0 }
  .dj-hero__in{ padding:40px 22px 48px }

  /* 🚨 폰에서는 신청 단추가 늘 화면 아래에 붙어 따라온다.
        접수로 가는 길을 잃지 않게 하는 것이 이 사이트의 첫째 일이다. */
  .dj-mfix{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    align-items:center; gap:12px;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom));
    background:var(--dj-navy); border-top:2px solid var(--dj-gold);
  }
  .dj-mfix__t{ flex:1 1 auto; min-width:0; color:#EDE6D6; font-size:13px; line-height:1.35 }
  .dj-mfix__t b{ display:block; color:#fff; font-size:14.5px; font-weight:700 }
  .dj-mfix__go{
    flex:0 0 auto; padding:11px 18px; background:var(--dj-gold); color:#1B1405;
    font-size:15px; font-weight:800; text-decoration:none;
  }
  body{ padding-bottom:70px }
}
@media (max-width:420px){
  .dj-hero__when{ font-size:16px; padding:6px 14px }
  .dj-mfix__t{ display:none }
  .dj-mfix__go{ flex:1 1 auto; text-align:center }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 대회요강 — 포스터 한 장에 갇혀 있던 것을 글자와 그림으로 푼 지면
 *
 * 🚨 여기서 지키는 것 세 가지
 *   ① 색은 «금빛 하나»만 강조로 쓴다. 포스터는 빨강·파랑·분홍·노랑을 한꺼번에 써서
 *      무엇이 중요한지 알 수 없다. 웹에서는 강조가 하나여야 강조가 된다.
 *   ② 글자 굵기 단계는 «셋»까지 — 400 본문 / 700 라벨 / 800~900 제목.
 *      포스터처럼 전부 굵으면 아무것도 굵지 않은 것과 같다.
 *   ③ 한 칸에 한 가지만 담는다. 「라벨 : 값 (부연)」 이 기본 단위다.
 * ══════════════════════════════════════════════════════════════════════ */

/* 맨 위 «한눈에» 넉 장 — 스크롤 없이 언제·어디서·얼마·몇 명을 안다 */
.dj-kv{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin:0 0 46px; background:var(--dj-line-2); border:1px solid var(--dj-line-2);
}
.dj-kv__i{ background:var(--dj-paper); padding:24px 20px; text-align:center }
.dj-kv__l{
  display:block; margin:0 0 10px; font-size:13px; font-weight:700;
  letter-spacing:.06em; color:var(--dj-gold-deep);
}
.dj-kv__v{ display:block; font-size:22px; font-weight:800; color:var(--dj-ink); letter-spacing:-.03em; line-height:1.3 }
.dj-kv__s{ display:block; margin-top:7px; font-size:13px; color:var(--dj-ink-3); line-height:1.5 }

/* 섹션 — 번호는 «순서가 있는 정보»일 때만 쓴다. 요강은 읽는 차례가 있다.
   제목 앞에 그 마디의 «내용을 가리키는» 아이콘을 하나씩 둔다.
   🚨 아이콘은 «구분»을 돕는 만큼만 쓴다. 문장마다 그림을 붙이면
      아이콘이 많아진 만큼 아무것도 눈에 안 들어온다 — 마디 제목에만 하나씩. */
.dj-gsec{ margin:0 0 56px }
.dj-gsec__h{
  display:flex; align-items:center; gap:13px;
  margin:0 0 22px; padding:0 0 14px 4px; border-bottom:2px solid var(--dj-ink);
}
/* 🚨 아이콘에 «동그란 배경»을 두지 않는다(2026-09-10 사장님 지시).
      배경을 없앤 만큼 아이콘 자체를 키운다 — 같은 자리를 아이콘이 다 쓴다.
      선 아이콘은 배경 없이 놓아야 글자와 같은 무게로 읽힌다. */
.dj-gsec__ic{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  color:var(--dj-gold-deep);
}
.dj-gsec__ic svg{ width:31px; height:31px; display:block }
.dj-gsec__n{
  flex:0 0 auto; font-size:14px; font-weight:800; letter-spacing:.06em;
  color:var(--dj-gold-deep); font-variant-numeric:tabular-nums;
}
/* 🚨 «줄이 두 겹»으로 나오던 것을 고침(2026-09-10).
      마디 머리(.dj-gsec__h)에 구분선이 있는데, 그 안의 제목이 «본문 h2» 이기도 해서
      .dj-prose h2 의 밑줄까지 함께 그려졌다.
      특이도는 .dj-prose h2 (0,1,1) 가 .dj-gsec__t (0,1,0) 를 이긴다 —
      그래서 부모를 붙여 (0,2,0) 으로 올려야 이긴다. 뒤에 썼다고 이기는 게 아니다. */
.dj-gsec__h .dj-gsec__t{
  margin:0; padding:0; border:0;
  font-size:27px; font-weight:800; letter-spacing:-.045em; color:var(--dj-ink);
}
.dj-gsec__d{ margin:14px 0 0; font-size:16px; line-height:1.75; color:var(--dj-ink-2) }

/* 종목 석 장 — 아이콘은 «구분»을 돕는 만큼만 */
.dj-crs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 0 }
.dj-crs__i{
  display:flex; flex-direction:column;
  padding:26px 22px 22px; background:var(--dj-paper);
  border:1px solid var(--dj-line); border-top:5px solid var(--dj-gold);
}
.dj-crs__ic{ width:30px; height:30px; margin:0 0 14px; color:var(--dj-gold-deep) }
.dj-crs__ic svg{ width:100%; height:100%; display:block }
.dj-crs__d{ font-size:30px; font-weight:900; letter-spacing:-.05em; color:var(--dj-ink); line-height:1 }
.dj-crs__n{ margin-top:8px; font-size:16px; font-weight:700; color:var(--dj-gold-deep) }
.dj-crs__x{ margin-top:12px; font-size:15px; line-height:1.65; color:var(--dj-ink-2) }
.dj-crs__t{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--dj-line-2);
  font-size:14px; line-height:1.6; color:var(--dj-ink-3);
}

/* 시상 — 큰 숫자 하나와 «조건»을 반드시 나란히 둔다.
   금액만 크게 쓰고 조건을 작게 쓰면 광고가 되고 분쟁이 된다 */
.dj-prz{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  border:1px solid var(--dj-line-2); margin:24px 0 0;
}
.dj-prz__m{
  position:relative; overflow:hidden;
  padding:30px 28px; background:var(--dj-navy); color:#F2ECDC;
}
/* 🚨 무늬는 «바탕»이지 그림이 아니다. 글자 뒤에서만 어른거리게 아주 옅게 깐다.
      진하면 숫자가 안 읽히고, 무늬 자체도 지저분해 보인다. */
.dj-prz__m::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--dj-rice-pattern);
  background-size:56px 56px; opacity:.5; pointer-events:none;
}
.dj-prz__m > *{ position:relative; z-index:1 }
.dj-prz__ic{
  display:inline-grid; place-items:center; width:40px; height:40px; margin:0 0 14px;
  color:var(--dj-gold-lt);
}
.dj-prz__ic svg{ width:37px; height:37px; display:block }
.dj-prz__t{ margin:0; font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--dj-gold-lt) }
.dj-prz__b{ margin:10px 0 0; font-size:44px; font-weight:900; letter-spacing:-.05em; color:#fff; line-height:1 }
.dj-prz__s{ margin:12px 0 0; font-size:15px; line-height:1.7; color:#CFC5AC }
.dj-prz__r{ padding:30px 28px; background:var(--dj-rice) }
.dj-prz__r dl{ margin:0 }

/* 참가자 안내 — 번호 붙은 알림. 포스터 공지사항을 그대로 옮긴 자리 */
.dj-notes{ counter-reset:djnote; margin:24px 0 0; padding:0; list-style:none }
.dj-notes li{
  position:relative; padding:16px 0 16px 42px;
  border-bottom:1px solid var(--dj-line); font-size:16px; line-height:1.75; color:var(--dj-ink);
}
.dj-notes li::before{
  counter-increment:djnote; content:counter(djnote);
  position:absolute; left:0; top:17px;
  width:24px; height:24px; border-radius:50%;
  background:var(--dj-rice); border:1px solid var(--dj-line-2);
  color:var(--dj-gold-deep); font-size:12px; font-weight:800;
  line-height:23px; text-align:center; font-variant-numeric:tabular-nums;
}
.dj-notes li b{ font-weight:700; color:var(--dj-gold-deep) }
.dj-notes li small{ display:block; margin-top:6px; font-size:14px; color:var(--dj-ink-3); line-height:1.6 }

/* 짚어둘 것 — 노랑 경고색을 쓰지 않는다. 금빛 왼쪽 선 하나로 충분하다 */
.dj-warn{
  margin:22px 0 0; padding:18px 20px;
  background:var(--dj-rice); border-left:4px solid var(--dj-gold);
  font-size:15px; line-height:1.75; color:var(--dj-ink-2);
}
.dj-warn b{ color:var(--dj-ink); font-weight:700 }

/* ── 함께 달리는 단체팀 ────────────────────────────────────────────────
   사장님이 만드신 현수막 배너의 «가로 띠» 모양을 그대로 가져오되 글자로 짰다.
   원본은 노랑 바탕 + 파랑 이름 + 빨강 「단체팀」이지만,
   사이트는 색이 «금빛 하나»라 그 문법으로 옮긴다 — 대회 표시(금빛 띠) ·
   팀 이름(남색 큰 글자) · 「단체팀」 배지 · 날짜와 장소. */
.dj-teams{ margin:26px 0 0; padding:0; list-style:none; display:grid; gap:12px }
.dj-team{
  display:grid; align-items:center; gap:0 18px;
  grid-template-columns:auto 1fr auto auto;
  padding:0; border:1px solid var(--dj-line-2); background:var(--dj-paper);
  overflow:hidden;
}
.dj-team__m{
  align-self:stretch; display:flex; align-items:center;
  padding:0 18px; background:var(--dj-gold); color:#1B1405;
  font-size:13px; font-weight:800; letter-spacing:-.03em; line-height:1.25;
  max-width:170px;
}
.dj-team__n{
  padding:18px 0; font-size:27px; font-weight:900; letter-spacing:-.05em;
  color:var(--dj-navy); line-height:1.1;
}
.dj-team__b{
  padding:5px 12px; border-radius:2px;
  background:var(--dj-gold-soft); color:var(--dj-gold-deep);
  font-size:13.5px; font-weight:800; white-space:nowrap;
}
.dj-team__d{
  padding:0 20px 0 0; font-size:13.5px; line-height:1.5;
  color:var(--dj-ink-3); text-align:right; white-space:nowrap;
}
.dj-btn--ghost2{
  background:transparent; color:var(--dj-gold-deep); border-color:var(--dj-line-2);
}
.dj-btn--ghost2:hover{ border-color:var(--dj-gold); background:var(--dj-rice); text-decoration:none }

@media (max-width:860px){
  .dj-team{ grid-template-columns:1fr auto; gap:0 12px; padding:0 0 14px }
  .dj-team__m{
    grid-column:1 / -1; max-width:none; padding:7px 16px; font-size:12px;
  }
  .dj-team__n{ padding:12px 0 0 16px; font-size:21px }
  .dj-team__b{ margin:12px 16px 0 0; align-self:start }
  .dj-team__d{ grid-column:1 / -1; padding:6px 16px 0; text-align:left; white-space:normal }
}

/* 본문 소제목 앞 아이콘 — 테마가 «낱말을 보고» 스스로 붙인다(inc/heading-icons.php).
   🚨 배경 없이 놓는다. 선 아이콘에 동그란 배경을 두면 글자보다 무거워져 제목을 밀어낸다. */
.dj-prose h2.dj-hic,
.dj-prose h3.dj-hic{ display:flex; align-items:center; gap:11px }
.dj-hic__i{
  flex:0 0 auto; display:grid; place-items:center;
  width:1.05em; height:1.05em; color:var(--dj-gold-deep);
}
.dj-hic__i svg{ width:100%; height:100%; display:block }

/* 코스 모식도 — 글자가 «그림 밖»에 있는 지도.
   🚨 SVG 안 글자는 부모의 글꼴을 자동으로 물려받지 않는다.
      font-family:inherit 를 각 text 에 주고, 여기서 뿌리 글꼴을 정한다. */
.dj-cmap{ margin:26px 0 0 }
.dj-cmap__svg{
  display:block; width:100%; height:auto;
  background:var(--dj-rice); border:1px solid var(--dj-line);
  font-family:"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  letter-spacing:-.03em;
}
.dj-cmap figcaption{ margin-top:10px; font-size:14px; color:var(--dj-ink-3); line-height:1.6 }

/* 주최 측 «원본» 지도 — 접어 둔다.
   모식도가 읽기 쉽지만, 실제 지형을 보고 싶은 사람도 있다. */
.dj-orig{ margin:22px 0 0; border:1px solid var(--dj-line); background:var(--dj-paper) }
.dj-orig > summary{
  padding:15px 18px; font-size:15px; font-weight:700; color:var(--dj-ink-2);
  cursor:pointer; list-style:none; position:relative;
}
.dj-orig > summary::-webkit-details-marker{ display:none }
.dj-orig > summary::after{
  content:'+'; position:absolute; right:18px; top:12px;
  font-size:20px; color:var(--dj-gold-deep);
}
.dj-orig[open] > summary::after{ content:'\2212' }
.dj-orig > summary:hover{ background:var(--dj-rice) }
.dj-orig__b{ padding:0 18px 18px }
.dj-orig__b img{ display:block; width:100%; height:auto; border:1px solid var(--dj-line) }
.dj-orig__b p{ margin:10px 0 0; font-size:13.5px; color:var(--dj-ink-3); line-height:1.65 }

/* 그림 — 코스 지도·포스터. 설명글을 반드시 붙인다 */
.dj-fig{ margin:26px 0 0 }
.dj-fig img{ display:block; width:100%; height:auto; border:1px solid var(--dj-line) }
.dj-fig figcaption{ margin-top:10px; font-size:14px; color:var(--dj-ink-3); line-height:1.6 }

/* 아직 못 받은 자료 — 「확인 중」을 숨기지 않는다.
   빈칸을 그럴듯한 말로 채우면 참가자가 잘못 준비해 온다 */
.dj-tbd{
  display:inline-block; padding:2px 9px; border-radius:2px;
  background:var(--dj-line); color:var(--dj-ink-2);
  font-size:13px; font-weight:700; letter-spacing:-.02em;
}

@media (max-width:900px){
  .dj-kv{ grid-template-columns:repeat(2,1fr) }
  .dj-kv__i{ padding:20px 14px }
  .dj-kv__v{ font-size:19px }
  .dj-crs{ grid-template-columns:1fr }
  .dj-prz{ grid-template-columns:1fr }
  .dj-gsec__t{ font-size:22px }
  .dj-gsec__h{ gap:10px; padding-left:0 }
  .dj-gsec__ic{ width:30px; height:30px }
  .dj-gsec__ic svg{ width:17px; height:17px }
  .dj-gsec{ margin-bottom:44px }
}
@media (max-width:420px){
  .dj-kv{ grid-template-columns:1fr }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 공지사항 게시판
 *
 * 🚨 대회 공지는 «쌓이는 것»이다. 페이지 한 장에 적어 두면 새 공지를 넣을 때마다
 *    관리자가 HTML 을 만져야 하고, 참가자는 무엇이 새 것인지 알 수 없다.
 *    글(post)로 쌓고 이 목록이 최신순으로 보여 준다.
 * ══════════════════════════════════════════════════════════════════════ */
.dj-board{ margin:34px 0 0; padding:0; list-style:none; border-top:2px solid var(--dj-ink) }
.dj-board__i{
  display:grid; grid-template-columns:64px 1fr; gap:0 20px; align-items:start;
  padding:24px 4px; border-bottom:1px solid var(--dj-line);
}
.dj-board__i.has-th{ grid-template-columns:64px 132px 1fr }
.dj-board__i.is-top{ background:var(--dj-rice) }

.dj-board__n{
  display:block; padding-top:3px; text-align:center;
  font-size:15px; font-weight:700; color:var(--dj-ink-3);
  font-variant-numeric:tabular-nums;
}
.dj-board__i.is-top .dj-board__n{
  font-size:12px; font-weight:800; letter-spacing:.04em; color:#1B1405;
  background:var(--dj-gold); padding:4px 0; border-radius:2px;
}

.dj-board__th{ display:block; overflow:hidden; border:1px solid var(--dj-line) }
.dj-board__th img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover }

.dj-board__b{ min-width:0 }
.dj-board__t{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.035em; line-height:1.45 }
.dj-board__t a{ color:var(--dj-ink); text-decoration:none }
.dj-board__t a:hover{ color:var(--dj-gold-deep); text-decoration:underline; text-underline-offset:3px }
.dj-board__x{
  margin:9px 0 0; font-size:15.5px; line-height:1.7; color:var(--dj-ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dj-board__m{ margin:10px 0 0; font-size:14px; color:var(--dj-ink-3) }

/* 쪽 넘기기 */
.dj-pager{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:34px 0 0 }
.dj-pager .page-numbers{
  min-width:38px; padding:8px 12px; text-align:center;
  border:1px solid var(--dj-line); font-size:15px; font-weight:700;
  color:var(--dj-ink-2); text-decoration:none;
}
.dj-pager .page-numbers:hover{ border-color:var(--dj-gold); color:var(--dj-gold-deep) }
.dj-pager .page-numbers.current{
  background:var(--dj-gold); border-color:var(--dj-gold); color:#1B1405;
}

@media (max-width:760px){
  .dj-board__i,
  .dj-board__i.has-th{ grid-template-columns:52px 1fr; gap:0 14px }
  .dj-board__th{ display:none }
  .dj-board__t{ font-size:17px }
  .dj-board__x{ font-size:15px; -webkit-line-clamp:3 }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 다국어 지면 — /en/ · /ja/ · /zh/
 *
 * 🚨 새 «디자인»을 만들지 않는다. 한국어 지면과 같은 색·같은 폭·같은 글꼴을 쓰고
 *    다국어에만 필요한 것(순서 목록·문답·언어별 조판)만 여기 더한다.
 *    언어마다 다르게 생기면 같은 대회로 보이지 않는다.
 * ══════════════════════════════════════════════════════════════════════ */

/* 도입 문단 — 제목 바로 아래 한 덩이 */
.dj-lead{
  margin:0 0 34px; padding-bottom:22px;
  border-bottom:1px solid var(--dj-line);
  font-size:19px; line-height:1.75; color:var(--dj-ink-2);
}

/* 신청 순서 — 번호를 금빛 동그라미로 */
.dj-steps{ margin:26px 0 34px; padding:0; list-style:none; counter-reset:djstep }
.dj-steps li{
  position:relative; margin:0 0 16px; padding:20px 22px 20px 66px;
  border:1px solid var(--dj-line); border-left:4px solid var(--dj-gold);
  background:var(--dj-rice);
}
.dj-steps li::before{
  counter-increment:djstep; content:counter(djstep);
  position:absolute; left:20px; top:19px;
  width:30px; height:30px; border-radius:50%;
  background:var(--dj-gold); color:#1B1405;
  font-size:15px; font-weight:800; line-height:30px; text-align:center;
}
.dj-steps li b{ display:block; margin:0 0 6px; font-size:17px; font-weight:800; color:var(--dj-ink) }
.dj-steps li span{ display:block; font-size:16px; line-height:1.7; color:var(--dj-ink-2) }

/* 문답 — 눌러서 펼친다. 자주 묻는 질문에만 쓴다 */
.dj-qa{ margin:22px 0 34px; border-top:2px solid var(--dj-ink) }
.dj-qa details{ border-bottom:1px solid var(--dj-line) }
.dj-qa summary{
  padding:18px 40px 18px 2px; position:relative;
  font-size:17px; font-weight:700; color:var(--dj-ink); cursor:pointer; list-style:none;
}
.dj-qa summary::-webkit-details-marker{ display:none }
.dj-qa summary::after{
  content:'+'; position:absolute; right:8px; top:16px;
  font-size:22px; font-weight:400; color:var(--dj-gold-deep);
}
.dj-qa details[open] summary::after{ content:'\2212' }
.dj-qa details[open] summary{ color:var(--dj-gold-deep) }
.dj-qa summary:hover{ background:var(--dj-rice) }
.dj-qa details > p{ margin:0; padding:0 2px 20px; font-size:16px; line-height:1.8; color:var(--dj-ink-2) }

/* 코스 카드 — 다국어에서는 누르는 곳이 아니라 «읽는 곳»이라 링크가 아니다 */
.dj-course--flat{ cursor:default }
.dj-course--flat:hover{ border-color:var(--dj-line) }
.dj-course__x{ margin-top:10px; font-size:15px; line-height:1.65; color:var(--dj-ink-2) }

/* 본문 끝 단추 한 줄 */
.dj-ctarow{ margin:34px 0 0; text-align:center }

/* 다른 지면으로 */
.dj-langnav{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:46px 0 0; padding-top:24px; border-top:2px solid var(--dj-ink);
}
.dj-langnav a{
  padding:9px 16px; border:1px solid var(--dj-line);
  font-size:15px; font-weight:700; color:var(--dj-ink-2); background:#fff;
}
.dj-langnav a:hover{ border-color:var(--dj-gold); color:var(--dj-gold-deep); text-decoration:none }

/* 한국어가 정본이라는 알림 — 조용하게 */
.dj-langfoot{
  margin:22px 0 0; padding:14px 16px;
  background:var(--dj-rice); border-left:3px solid var(--dj-gold-soft);
  font-size:14px; line-height:1.7; color:var(--dj-ink-2);
}

/* 언어별 조판
   🚨 영어는 긴 낱말이 상자를 뚫지 않게 붙임표를 허용한다.
      일본어·중국어는 자간을 좁히지 않아야 글자가 뭉치지 않는다. */
.dj-l10n--en .dj-prose,
.dj-l10n--en .dj-lead{ word-break:normal; overflow-wrap:break-word; hyphens:auto }
.dj-l10n--en .dj-hero__ko{ letter-spacing:-.02em }
.dj-l10n--ja .dj-prose,
.dj-l10n--zh .dj-prose,
.dj-l10n--ja .dj-lead,
.dj-l10n--zh .dj-lead{ letter-spacing:0; line-height:1.85 }
.dj-l10n--ja .dj-title,
.dj-l10n--zh .dj-title{ letter-spacing:-.01em }

@media (max-width:900px){
  .dj-langnav a{ font-size:14px; padding:8px 13px }
  .dj-steps li{ padding:18px 16px 18px 58px }
  .dj-steps li::before{ left:15px }
  .dj-lead{ font-size:17px }
}

/* ── 인쇄 ───────────────────────────────────────────────────────────── */
@media print{
  .dj-head,.dj-notice,.dj-marquee,.dj-mfix,.dj-hero__act{ display:none !important }
  body{ font-size:11pt; padding-bottom:0 }
  .dj-wrap{ max-width:none; padding:0 }
}

/* ===========================================================================
 * 오시는 길 — 카카오맵
 *
 * 🚨 높이를 «처음에 0» 으로 둔다. 지도가 못 그려져도 빈 상자가 남지 않게.
 *    JS 가 성공했을 때만 .is-on 을 붙여 높이를 준다.
 * ======================================================================== */
.dj-kmap{
	margin:26px 0 0;
	padding:0;
}

.dj-kmap__box{
	position:relative;
	height:0;
	overflow:hidden;
	border:1px solid var(--dj-line);
	border-radius:14px;
	background:var(--dj-paper);
	background-image:var(--dj-rice-pattern);
	background-size:180px 180px;
}
.dj-kmap__box.is-on{ height:420px }

/* 🚨 카카오가 상자 안에 심는 타일은 position:absolute 다.
   우리 단추가 그 위에 있으려면 z-index 를 준다. */
.dj-kmap__z{
	position:absolute;
	right:12px;
	top:12px;
	z-index:3;
	display:flex;
	flex-direction:column;
	gap:6px;
}
.dj-kmap__zb{
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	line-height:1;
	font-weight:700;
	color:var(--dj-navy);
	background:#fff;
	border:1px solid var(--dj-line);
	border-radius:10px;
	box-shadow:0 2px 8px rgba(28,35,56,.12);
	cursor:pointer;
	transition:background .15s ease, color .15s ease;
}
.dj-kmap__zb:hover,
.dj-kmap__zb:focus-visible{
	background:var(--dj-navy);
	color:#fff;
}

.dj-kmap figcaption{
	margin:12px 0 0;
	font-size:15px;
	line-height:1.7;
	color:var(--dj-ink-2);
}
.dj-kmap figcaption b{
	display:block;
	font-size:17px;
	color:var(--dj-ink);
}
.dj-kmap figcaption a{
	display:inline-block;
	margin-left:8px;
	font-size:14px;
	font-weight:700;
	color:var(--dj-gold-deep);
	text-decoration:underline;
	text-underline-offset:3px;
}

@media (max-width:820px){
	.dj-kmap__box.is-on{ height:320px }
	.dj-kmap__zb{ width:36px; height:36px; font-size:18px }
}

/* 지면 머리 사진 띠 ---------------------------------------------------------
 * 본보기 셋이 모두 쓰는 형식 — 춘천 842×220(3.83:1) · 서울동아 1440×237.
 * 🚨 글자를 사진에 굽지 않는다. 춘천 코스 섹션은 글자를 PNG 에 박아
 *    그 마디의 HTML 글자가 «0자»다(검색에 안 잡히고 다국어도 안 된다).
 * ------------------------------------------------------------------------ */
.dj-fig--band{
	margin:0 0 30px;
}
.dj-fig--band img{
	display:block;
	width:100%;
	aspect-ratio:3.83 / 1;
	object-fit:cover;
	object-position:center 62%;   /* 하늘보다 «달리는 사람»이 남게 */
	border-radius:14px;
}
@media (max-width:820px){
	.dj-fig--band img{ aspect-ratio:2.4 / 1 }   /* 폰에서 3.83:1 은 띠가 너무 얇다 */
}

/* 세로로 긴 코스 지도 -------------------------------------------------------
 * 코스가 남북으로 길어 지도도 세로형이다. 본문 폭(1060)에 그대로 두면
 * 높이가 1,400px 을 넘어 지면 하나를 통째로 먹는다. 폭을 묶어 둔다.
 * 🚨 이 그림은 «주최 측 원본에서 지도 부분만 잘라 낸 것»이다.
 *    통이미지에는 대회명 · QR 이 함께 박혀 있어 07 마디 포스터와 겹쳤다.
 * ------------------------------------------------------------------------ */
.dj-fig--map{ margin:26px 0 }
.dj-fig--map img{
	display:block; margin:0 auto;
	width:100%; max-width:520px; height:auto;
	border:1px solid var(--dj-line); border-radius:12px;
}
.dj-fig--map figcaption{ text-align:center }

/* 사진 두 장을 나란히 -------------------------------------------------------
 * 「무엇이 함께 열리는가」는 글 넉 줄보다 사진 두 장이 빠르다.
 * 춘천·서울동아·JTBC 세 곳 모두 이 자리에 사진을 쓴다.
 * ------------------------------------------------------------------------ */
.dj-duo{
	display:grid; grid-template-columns:1fr 1fr; gap:20px;
	margin:24px 0 30px;
}
.dj-duo .dj-fig{ margin:0 }
/* 이 두 장은 지면 위쪽에 있어 곧 눈에 들어온다 — loading="lazy" 를 달지 않는다.
   파일도 각 30~140KB 라 미뤄서 얻을 것이 없다. */
.dj-fig--half img{
	display:block; width:100%; height:auto;
	aspect-ratio:1040 / 680; object-fit:cover;
	border-radius:12px;
}
.dj-fig--half figcaption{
	margin-top:10px; font-size:15px; line-height:1.6;
	color:var(--dj-ink-2); letter-spacing:-.03em;
}
@media (max-width:720px){
	.dj-duo{ grid-template-columns:1fr; gap:18px }
}

/* 본문 폭을 다 쓰는 가로 사진 — 비율은 그림 자신이 정한다 */
.dj-fig--wide{ margin:26px 0 }
.dj-fig--wide img{ display:block; width:100%; height:auto; border-radius:12px }
.dj-fig--wide figcaption{
	margin-top:10px; font-size:15px; line-height:1.6;
	color:var(--dj-ink-2); letter-spacing:-.03em;
}

/* 폰에서 여섯 칸 표 -------------------------------------------------------
 * 칸이 여섯이면 375px 에 다 못 들어간다. 가로로 미는 것이 표준 처리지만
 * 「밀 수 있다」는 것을 모르면 값이 잘린 줄 안다. 양옆 그림자로 알린다.
 * (background-attachment 의 local/scroll 짝이 스크롤 위치를 따라 그림자를 넣고 뺀다)
 * ---------------------------------------------------------------------- */
@media (max-width:720px){
	.dj-prose table{ min-width:600px; font-size:15px }
	.dj-prose th,
	.dj-prose td{ padding:10px 11px }
	.dj-tblwrap{
		background:
			linear-gradient(to right, var(--dj-paper) 30%, rgba(255,255,255,0)) left / 34px 100% no-repeat,
			linear-gradient(to left,  var(--dj-paper) 30%, rgba(255,255,255,0)) right / 34px 100% no-repeat,
			radial-gradient(farthest-side at 0 50%,   rgba(28,35,56,.16), rgba(28,35,56,0)) left / 14px 100% no-repeat,
			radial-gradient(farthest-side at 100% 50%, rgba(28,35,56,.16), rgba(28,35,56,0)) right / 14px 100% no-repeat;
		background-attachment: local, local, scroll, scroll;
	}
}

/* 마지막 줄에 한 음절만 남지 않게 -------------------------------------------
 * 한국어는 문장이 「…있습니다.」로 끝나므로 마지막 줄에 「다.」 두 글자만
 * 떨어지는 일이 잦다. 폰에서 특히 눈에 띈다.
 * text-wrap:pretty 는 모르는 브라우저가 그냥 무시하므로 위험이 없다.
 * ------------------------------------------------------------------------ */
.dj-prose p,
.dj-prose li,
.dj-lead,
.dj-note,
.dj-warn,
figcaption,
.dj-course__x,
.dj-dl__r dd,
.dj-dl__r dd small{ text-wrap:pretty }

/* 제목은 줄 길이를 고르게 — 두 줄이 되면 아래 줄이 짧아 어색하다 */
.dj-title,
.dj-gsec__t,
.dj-board__t,
.dj-sec__t{ text-wrap:balance }

/* 일본어 · 중국어 지면의 글꼴 -----------------------------------------------
 * 🚨 이 두 언어에는 웹폰트를 내려받지 않는다(functions.php 에서 막았다).
 *    기기에 이미 그 나라 글꼴이 있고, 웹폰트로 받으면 한 지면에 1.7MB 가 붙는다.
 *    맨 뒤에 sans-serif 를 두어, 한국어 낱말(예금주 이름 · 신청 주소)이 섞여도
 *    브라우저가 알아서 대신 그린다.
 * ------------------------------------------------------------------------ */
html[lang="ja"] body{
	font-family:system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
	            "Yu Gothic", "YuGothic", Meiryo, sans-serif;
}
html[lang="zh"] body,
html[lang="zh-Hans"] body,
html[lang="zh-CN"] body{
	font-family:system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB",
	            "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}

/* 참가 접수 플러그인의 «작은 설명 글» -----------------------------------------
 * 플러그인이 쓰는 회색(#8A8272)은 흰 바탕에서 3.81:1 이라 AA(4.5) 에 못 미친다.
 * 테마 쪽에서 한 단계 진한 색으로 덮는다. 글자 크기는 그대로 둔다.
 * ------------------------------------------------------------------------ */
.dje-hint,
.dje-f .dje-hint,
.dje-fld .dje-hint,
.dje-guard .dje-hint{ color:var(--dj-ink-3) }

/* 어두운 마디의 눈썹 글자 --------------------------------------------------
 * 🚨 밝은 바탕용으로 진하게 만든 금빛(gold-deep)을 남색 위에 그대로 두면
 *    이번엔 반대로 2.78:1 이 된다. 어두운 바탕에서는 «밝은» 금빛을 쓴다.
 * ------------------------------------------------------------------------ */
.dj-sec--navy .dj-sec__eye{ color:var(--dj-gold-lt) }

/* 기울임으로 쓴 «덧붙임 글»도 본문과 같은 진하기로 --------------------------
 * 참가 접수 지면의 em 이 흐린 회색(3.81:1)으로 나왔다.
 * ------------------------------------------------------------------------ */
.dj-read em,
.dj-prose em,
.dje-wrap em,
.dje-f em{ color:var(--dj-ink-3) }

/* 없는 주소 안내 — 자주 찾는 곳을 두 줄로 -----------------------------------
 * 종목 카드 틀을 그대로 쓰되, 사진이 없으므로 안쪽 여백을 스스로 갖는다.
 * ------------------------------------------------------------------------ */
.dj-404{ grid-template-columns:1fr 1fr; margin:26px 0 30px }
.dj-404 .dj-course{ padding:22px 24px 20px }
.dj-404 .dj-course > *{ margin-left:0; margin-right:0 }
.dj-404 .dj-course__n{ font-size:19px }
@media (max-width:720px){
	.dj-404{ grid-template-columns:1fr }
}

/* 지도 붙임(구글) ------------------------------------------------------------
 * 🚨 iframe 은 기본 높이가 150px 이고 비율을 모른다 — 상자로 비율을 잡아 준다.
 *    카카오맵과 달리 «반드시 뜨는» 지도라 높이를 처음부터 준다.
 * ------------------------------------------------------------------------ */
.dj-emap{ margin:26px 0 0; padding:0 }
.dj-emap__box{
	position:relative; overflow:hidden;
	aspect-ratio:16 / 9;
	border:1px solid var(--dj-line); border-radius:14px;
	background:var(--dj-rice);
}
.dj-emap__box iframe{
	position:absolute; inset:0;
	width:100%; height:100%; border:0; display:block;
}
.dj-emap figcaption{
	margin:12px 0 0; font-size:15px; line-height:1.7; color:var(--dj-ink-2);
}
.dj-emap figcaption b{ display:block; font-size:17px; color:var(--dj-ink) }
.dj-emap__go{ display:block; margin-top:6px }
.dj-emap__go a{
	display:inline-block; margin-right:14px;
	font-size:14px; font-weight:700; color:var(--dj-gold-deep);
	text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:820px){
	.dj-emap__box{ aspect-ratio:4 / 3 }   /* 폰에서 16:9 는 너무 납작하다 */
}


/* ===========================================================================
 * 단체팀 현수막 (원본 그림)
 * ---------------------------------------------------------------------------
 * 🚨 원본이 2020x197 로 «가로가 10배» 긴 현수막이다.
 *    폰 폭 375px 에 폭 100% 로 넣으면 높이가 37px 이라 팀 이름을 못 읽는다.
 *    그래서 좁은 화면에서는 «원본 높이를 지키고 옆으로 미는» 상자에 담는다.
 *    넓은 화면에서는 폭에 맞춘다(그때는 높이가 충분하다).
 * ======================================================================== */

.dj-tbans{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}

.dj-tban__sc{
  /* 🚨 넘치는 것은 «이 상자 안에서만» 민다. 지면이 옆으로 밀리면 안 된다. */
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(200,144,30,.28);
  border-radius:10px;
  background:#fff;
  scrollbar-width:thin;
}

.dj-tban__img{
  display:block;
  width:100%;
  height:auto;
  /* 🚨 폰에서 너무 납작해지지 않게 «최소 높이»를 준다.
        폭이 모자라면 위 상자에서 옆으로 밀린다. */
  min-width:min(1100px, 100%);
}

.dj-tbans__hint{
  margin:10px 0 0;
  font-size:13px;
  color:#6B6558;
  text-align:center;
}

@media (min-width:1100px){
  /* 넓은 화면에서는 다 들어오므로 밀 것이 없다 */
  .dj-tban__sc{ overflow-x:visible; }
  .dj-tban__img{ min-width:0; }
  .dj-tbans__hint{ display:none; }
}

@media (max-width:600px){
  /* 🚨 폰에서는 원본 비율로 두면 37px 이라 못 읽는다.
        1100px 폭을 지켜 옆으로 밀게 한다(높이 약 107px). */
  .dj-tban__sc{ border-radius:8px; }
}