/* ===== Open Design Lab — 아티클 렌더링 스타일 =====
 * 사이트(articles.js)와 관리자 편집 캔버스(admin/preview.html)가 같은 CSS를 쓴다.
 * → 편집 화면 = 실제 발행 화면
 *
 * ★ 중요: 사이트는 rem 기반 유동 스케일이다.
 *    html { font-size: 62.5% }                       → 10px  (기본/모바일)
 *    @media (690px ~ 1365px) { html { 0.875vw } }    → 화면 폭에 비례
 *    따라서 이 파일의 모든 치수는 **rem**이어야 화면 폭에 따라 원본과 똑같이 스케일된다.
 *    (px로 쓰면 690~1365px 구간에서 전부 어긋난다)
 *
 * 실측 기준값 (데스크탑 = 1rem 10px)
 *   프로젝트: 크럼 2.8 / 윗부제 3.2(#888) / 제목 6.4(700) / 아랫부제 3.2(#444) / 소제목 3.6 / 본문 1.8
 *   뉴스·어워즈: 카테고리 2.8 / 윗줄 2.4(#999) / 제목 4.8 / 부제 3.2 / 소제목 3.0
 *   컬럼 126 · 섹션 간격 14 · 본문 아래 6 · 이미지 그룹 gap 1.6
 * 모바일(≤690px, 1rem = 10px 고정)
 *   크럼 1.4(가운데) / 윗부제 1.6 / 제목 2.8 / 부제 1.6 / 소제목 1.8 / 본문 1.4 / 섹션 7 / gap 0.8
 */

/* 컬럼 폭 — 원본 실측
 *   ~1023px : 90vw
 *   1024~1365px : 84vw
 *   1366px~ : 126rem (1260px)
 *   ~690px(모바일) : 화면 폭 - 좌우 2.4rem
 */
.odl-a {
  width: 90vw;
  max-width: 126rem;
  margin: 0 auto;
  color: #222;
  font-family: inherit;
  /* 원본 섹션은 flex column → 인접 여백이 상쇄되지 않는다 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@media (min-width: 1024px) and (max-width: 1365px) { .odl-a { width: 84vw; } }
@media (min-width: 1366px) { .odl-a { width: 126rem; } }

/* ── 헤더 ───────────────────────────── */
.odl-a .odl-cat {
  font-size: 2.8rem; font-weight: 500; color: #000;
  margin: 0 0 4rem; letter-spacing: -0.01em;
}
.odl-a .odl-head    { margin: 0 0 6rem; }
.odl-a .odl-eyebrow { line-height: 1.44; margin: 0 0 0.8rem; }
.odl-a .odl-title   { line-height: 1.56; color: #222; margin: 0; letter-spacing: -0.02em; }
.odl-a .odl-sub     { font-size: 3.2rem; font-weight: 500; line-height: 1.44; color: #444; margin: 0; }

/* 뉴스 · 어워즈 (좌측 정렬) */
.odl-a.hdr-left .odl-head    { text-align: left; }
.odl-a.hdr-left .odl-eyebrow { font-size: 2.4rem; font-weight: 400; color: #999; margin: 0 0 4.8rem; }
.odl-a.hdr-left .odl-title   { font-size: 4.8rem; font-weight: 700; }

/* 프로젝트 브레드크럼 (Projects / Archive) */
.odl-a .odl-crumb {
  display: flex; gap: 0.8rem; align-items: baseline;
  font-size: 2.8rem; line-height: 1; color: #000; margin: 0 0 6rem;
}
.odl-a .odl-crumb span { font-weight: 300; }
.odl-a .odl-crumb b    { font-weight: 500; }

/* 프로젝트 (가운데 정렬) */
.odl-a.hdr-center .odl-head    { text-align: center; margin: 0; }
.odl-a.hdr-center .odl-eyebrow { font-size: 3.2rem; font-weight: 500; color: #888; margin: 0 0 3.2rem; }
.odl-a.hdr-center .odl-title   { font-size: 6.4rem; font-weight: 700; line-height: normal; margin: 0; }
/* 원본은 아랫부제를 대괄호로 감싼다: [Urban Hopper / Golf] */
.odl-a.hdr-center .odl-sub:not(:empty)::before { content: "["; }
.odl-a.hdr-center .odl-sub:not(:empty)::after  { content: "]"; }

/* ── 본문 블록 ───────────────────────── */
.odl-a .odl-h {
  font-size: 3rem; font-weight: 500; line-height: 1.56;
  color: #222; margin: 0 0 2rem;
}
.odl-a.hdr-center .odl-h { font-size: 3.6rem; margin: 0 0 3.6rem; }
.odl-a .odl-h.center { text-align: center; margin-bottom: 0; }

.odl-a .odl-p {
  font-size: 1.8rem; font-weight: 400; line-height: 1.7;
  color: #444; margin: 0 0 6rem; white-space: pre-wrap;
}
.odl-a .odl-p.center { text-align: center; }

.odl-a figure { margin: 0 0 6rem; }
.odl-a figure img, .odl-a figure video { width: 100%; display: block; }
.odl-a figcaption { font-size: 1.4rem; color: #888; margin-top: 1.2rem; text-align: center; }

/* 대표 이미지 — 최대 1920px, 가운데, 상하 120px (아래는 원본 baseline 2px 포함) */
.odl-a figure.full {
  width: 100vw; max-width: 192rem;
  align-self: center;
  margin-top: 12rem; margin-bottom: 12.2rem;
}

/* 이미지 그룹 */
.odl-a .odl-imgs { display: grid; gap: 1.6rem; margin: 0 0 6rem; }
.odl-a .odl-imgs.tight { margin-bottom: 1.6rem; }          /* 원본 bottomMargin:16 */
.odl-a .odl-imgrow { display: flex; gap: 1.6rem; align-items: stretch; }
.odl-a .odl-imgrow img,
.odl-a .odl-imgrow video { width: 100%; min-width: 0; display: block; object-fit: cover; }

/* 열 배치 (원본 imageDirection:"columns") */
.odl-a .odl-imgs.cols { display: flex; flex-direction: row; gap: 1.6rem; align-items: flex-start; }
.odl-a .odl-imgs.cols .odl-imgrow { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
/* 열 배치: 높이가 강제되므로 비율을 지키고 넘치는 부분만 잘라낸다 (늘어나지 않음) */
.odl-a .odl-imgs.cols .odl-imgrow img,
.odl-a .odl-imgs.cols .odl-imgrow video { width: 100%; height: auto; object-fit: cover; }

/* 슬라이딩 갤러리 */
.odl-a .odl-slider {
  display: grid; grid-auto-flow: column; grid-auto-columns: 54.4rem;
  gap: 1.6rem; overflow-x: auto; margin: 0 0 6rem; padding: 4rem 0;
}
.odl-a .odl-slider img { width: 54.4rem; display: block; height: auto; }

/* 단순 갤러리(격자) */
.odl-a .odl-gallery { display: grid; gap: 1.6rem; margin: 0 0 6rem; }
.odl-a .odl-gallery.c2 { grid-template-columns: repeat(2, 1fr); }
.odl-a .odl-gallery.c3 { grid-template-columns: repeat(3, 1fr); }
.odl-a .odl-gallery.c4 { grid-template-columns: repeat(4, 1fr); }
.odl-a .odl-gallery img { width: 100%; display: block; }

/* 구분선 — 원본은 높이 49px 블록, 선은 위쪽 */
.odl-a .odl-line {
  border: 0; border-top: 1px solid #e2e2e2; margin: 0;
  height: 4.9rem; box-sizing: border-box;
}

/* 인용 / 인터뷰 */
.odl-a .odl-quote { border-left: 3px solid #222; padding: 0.6rem 0 0.6rem 2.4rem; margin: 0 0 6rem; }
.odl-a .odl-quote p { font-size: 2.4rem; font-weight: 500; line-height: 1.6; color: #222; margin: 0; white-space: pre-wrap; }
.odl-a .odl-quote cite { display: block; margin-top: 1.4rem; font-style: normal; font-size: 1.5rem; color: #888; }

/* 크레딧 */
.odl-a .odl-credits { margin: 0 0 6rem; border-top: 1px solid #e2e2e2; }
.odl-a .odl-credits dl {
  display: grid; grid-template-columns: 22rem 1fr; gap: 0;
  margin: 0; border-bottom: 1px solid #eee; padding: 1.8rem 0;
}
.odl-a .odl-credits dt { font-size: 1.5rem; font-weight: 600; color: #222; margin: 0; }
.odl-a .odl-credits dd { font-size: 1.5rem; font-weight: 400; color: #666; margin: 0; line-height: 1.6; }

/* 수상 블록 */
/* ── 수상 정보 — 2026 리뉴얼 어워즈 상세 실측값 그대로 ──
   좌 이미지 43.5%(1260 기준 548px) · 우 칼럼 space-between ·
   엠블럼 140px · 수상작명 30px/500 · 부문 18px 회색 · 크레딧 label 160px 표 */
.odl-a .odl-award { display: flex; gap: 6.35%; margin: 0 0 6rem; }
.odl-a .odl-award > img.main,
.odl-a .odl-award > .odl-ph-media.main {
  width: 43.5%; flex: none; object-fit: cover; display: block; align-self: stretch; }
.odl-a .odl-award .odl-award-ca {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.odl-a .odl-award img.badge { width: 14rem; height: auto; display: block; margin: 0 0 4rem; }
.odl-a .odl-award .odl-award-title {
  font-size: 3rem; font-weight: 500; line-height: 1.56; color: #222; margin: 0; white-space: pre-line; }
.odl-a .odl-award .odl-award-sub { font-size: 1.8rem; font-weight: 400; color: #999; margin: 0 0 2.4rem; }
.odl-a .odl-award .odl-award-desc {
  font-size: 1.8rem; line-height: 1.7; color: #444; white-space: pre-wrap; margin: 0; }
/* 크레딧 표 — label 160px 고정, 행마다 얇은 윗줄 */
.odl-a .odl-credits.award { margin-top: 3rem; }
.odl-a .odl-credits.award dl {
  display: flex; gap: 2.4rem; margin: 0; padding: 1.25rem 0; border-top: 1px solid #e5e5e5; }
.odl-a .odl-credits.award dt { width: 16rem; flex: none; font-size: 1.8rem; font-weight: 400; color: #222; }
.odl-a .odl-credits.award dd { flex: 1; margin: 0; font-size: 1.8rem; color: #444; }

/* 초안 배지 */
.odl-a .odl-draftbadge {
  align-self: flex-start; background: #ffe9a8; color: #7a5b00;
  padding: 0.8rem 1.4rem; border-radius: 8px;
  font-size: 1.4rem; font-weight: 700; margin-bottom: 3rem;
}

/* ── 확대 뷰어 (원본 zoom과 동일) ── */
#odl-viewer {
  position: fixed; inset: 0; z-index: 2147483000; display: none;
  background: #0e0e0e; align-items: center; justify-content: center;
}
#odl-viewer.on { display: flex; }
#odl-viewer img { max-width: 92vw; max-height: 86vh; object-fit: contain; display: block; }
#odl-viewer .odl-viewer-bar { position: absolute; top: 18px; right: 22px; display: flex; gap: 6px; align-items: center; }
#odl-viewer .odl-viewer-bar a,
#odl-viewer .odl-viewer-bar button {
  background: rgba(255,255,255,.1); border: 0; color: #fff; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
#odl-viewer .odl-viewer-bar a:hover,
#odl-viewer .odl-viewer-bar button:hover { background: rgba(255,255,255,.22); }
html.dark #odl-viewer { filter: invert(1); }
html.dark #odl-viewer img { filter: invert(1); }

/* ── 모바일 (≤690px — 사이트 브레이크포인트, 1rem = 10px 고정) ── */
@media (max-width: 690px) {
  .odl-a { width: calc(100vw - 4.8rem); max-width: none; }

  .odl-a .odl-crumb { font-size: 1.4rem; justify-content: center; margin-bottom: 4rem; }
  .odl-a .odl-cat   { font-size: 1.4rem; text-align: center; margin-bottom: 3rem; }

  .odl-a.hdr-center .odl-eyebrow { font-size: 1.6rem; margin-bottom: 0.8rem; }
  .odl-a.hdr-center .odl-title   { font-size: 2.8rem; }
  .odl-a.hdr-center .odl-sub     { font-size: 1.6rem; }

  .odl-a.hdr-left .odl-eyebrow { font-size: 1.4rem; margin-bottom: 2.4rem; }
  .odl-a.hdr-left .odl-title   { font-size: 2rem; }
  .odl-a.hdr-left .odl-sub     { font-size: 1.6rem; }

  .odl-a .odl-h, .odl-a.hdr-center .odl-h { font-size: 1.8rem; margin: 0 0 1.8rem; }
  .odl-a .odl-h.center { margin-bottom: 0; }
  .odl-a .odl-p { font-size: 1.4rem; margin-bottom: 3rem; }

  .odl-a figure { margin-bottom: 3rem; }
  .odl-a figure.full {
    width: calc(100% + 4.8rem); max-width: none;
    align-self: auto; margin-left: -2.4rem;
    margin-top: 4rem; margin-bottom: 4rem;
  }

  .odl-a .odl-imgs { gap: 0.8rem; margin-bottom: 3rem; }
  .odl-a .odl-imgs.tight { margin-bottom: 0.8rem; }
  .odl-a .odl-imgrow { gap: 0.8rem; }
  .odl-a .odl-imgs.cols { gap: 0.8rem; }
  .odl-a .odl-imgs.cols .odl-imgrow { gap: 0.8rem; }

  .odl-a .odl-slider { grid-auto-columns: 28.4rem; padding: 4rem 0; margin-bottom: 6rem; }
  .odl-a .odl-slider img { width: 28.4rem; }

  .odl-a .odl-gallery { gap: 0.8rem; }
  .odl-a .odl-gallery.c3, .odl-a .odl-gallery.c4 { grid-template-columns: repeat(2, 1fr); }

  .odl-a .odl-line { height: 2.5rem; }

  .odl-a .odl-quote { margin-bottom: 3rem; padding-left: 1.6rem; }
  .odl-a .odl-quote p { font-size: 1.8rem; }

  .odl-a .odl-credits { margin-bottom: 3rem; }
  .odl-a .odl-credits dl { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.4rem 0; }
  .odl-a .odl-credits dt, .odl-a .odl-credits dd { font-size: 1.4rem; }

  .odl-a .odl-award { flex-direction: column; gap: 2rem; margin-bottom: 4rem; }
  .odl-a .odl-award > img.main, .odl-a .odl-award > .odl-ph-media.main { width: 100%; }
  .odl-a .odl-award img.badge { width: 10rem; margin-bottom: 2rem; }
  .odl-a .odl-award .odl-award-title { font-size: 2rem; }
  .odl-a .odl-award .odl-award-sub { font-size: 1.4rem; margin-bottom: 1.6rem; }
  .odl-a .odl-award .odl-award-desc { font-size: 1.4rem; }
  .odl-a .odl-credits.award dt { width: 11rem; font-size: 1.4rem; }
  .odl-a .odl-credits.award dd { font-size: 1.4rem; }
  .odl-a .odl-award img.badge { width: 8.4rem; }

  .odl-a .odl-draftbadge { font-size: 1.2rem; }
}

/* ── 섹션 간격 (마지막 선언 — 블록별 margin 규칙보다 우선) ──
 * flex column이라 상쇄 없음 → 앞 블록 아래 6rem + 14rem = 원본과 동일 */
.odl-a .odl-newsec { margin-top: 14rem !important; }
.odl-a > *:first-child.odl-newsec,
.odl-a .odl-head + .odl-newsec { margin-top: 0 !important; }
@media (max-width: 690px) {
  .odl-a .odl-newsec { margin-top: 7rem !important; }
  .odl-a > *:first-child.odl-newsec,
  .odl-a .odl-head + .odl-newsec { margin-top: 0 !important; }
}


/* ══════════════════════════════════════════════════════════
 * 자동 반응형 — 데스크탑 기준으로만 만들면 태블릿·모바일은 알아서 정리된다.
 * (JS가 넣은 인라인 flex 값을 덮어써야 하므로 !important 사용)
 * ══════════════════════════════════════════════════════════ */

/* 태블릿(691~1023px): 한 줄에 4장 이상이면 2장씩 접어 내린다 */
@media (min-width: 691px) and (max-width: 1023px) {
  .odl-a .odl-imgrow:has(> :nth-child(4)) { flex-wrap: wrap; }
  .odl-a .odl-imgrow:has(> :nth-child(4)) > * { flex: 1 1 calc(50% - 0.8rem) !important; }
  .odl-a .odl-gallery.c4 { grid-template-columns: repeat(3, 1fr); }
}

/* 모바일(≤690px)
 *  · 한 줄에 3장 이상 → 2장씩 접어 내림 (2장까지는 원본처럼 나란히)
 *  · 열(세로) 배치 이미지 그룹 → 위아래로 쌓기
 *  · 슬라이더·갤러리·크레딧·수상 블록은 이미 모바일 규칙 적용됨
 */
@media (max-width: 690px) {
  .odl-a .odl-imgrow:has(> :nth-child(3)) { flex-wrap: wrap; }
  .odl-a .odl-imgrow:has(> :nth-child(3)) > * { flex: 1 1 calc(50% - 0.4rem) !important; }

  .odl-a .odl-imgs.cols { flex-direction: column; }
  .odl-a .odl-imgs.cols .odl-imgrow { flex: 1 1 auto !important; width: 100% !important; }
  .odl-a .odl-imgs.cols .odl-imgrow img,
  .odl-a .odl-imgs.cols .odl-imgrow video { height: auto !important; }

  /* 표(크레딧)·수상 크레딧이 넘치지 않도록 */
  .odl-a .odl-credits dd { word-break: keep-all; }
}

/* :has()를 못 쓰는 아주 오래된 브라우저 대비 — 최소한 넘치지는 않게 */
@supports not (selector(:has(*))) {
  @media (max-width: 690px) {
    .odl-a .odl-imgrow { flex-wrap: wrap; }
    .odl-a .odl-imgrow > * { min-width: 40%; }
  }
}

/* 강조 본문 (content-strong) — 원본 어워즈 상세와 동일: 18px / 500 / 검정 */
.odl-a .odl-p-strong { font-weight: 500; color: #000; }