/* ═══════════════════════════════════════════════════════════════════════
 * Open Design Lab — 인사이트 "Journal" 디자인 레이어      (2026-08-02)
 *
 * 두 화면을 담당한다.
 *   ① 인사이트 목록 (/news?cat=insight)  →  .odl-jindex   (articles.js 가 생성)
 *   ② 인사이트 아티클 (/news/<slug>)     →  .odl-a.odl-journal
 *
 * ★ 적용 범위: section === "insight" 인 글과 그 목록에만 붙는다.
 *   프로젝트·뉴스·어워즈는 이 파일의 어떤 규칙에도 걸리지 않는다.
 *
 * ★ 치수는 전부 rem — 사이트가 유동 스케일(html 62.5% / 0.875vw)이기 때문이다.
 *
 * ★ 다크모드: 사이트는 html.dark 에 filter:invert(1) 을 건다.
 *   그래서 색을 따로 정의하지 않는다. 브랜드 블루만 반전되면 주황이 되므로
 *   미리 보색(#D49900)을 넣어 반전 후 정확히 #2B66FF 로 보이게 한다.
 * ═══════════════════════════════════════════════════════════════════════ */

.odl-jindex,
.odl-journal{
  --jw-ink:#111318; --jw-body:#3a4048; --jw-sub:#6b7280;
  --jw-line:#e3e6ea; --jw-num:#d9dee5; --jw-blue:#2B66FF; --jw-tint:#f5f7fa;
}
html.dark .odl-jindex,
html.dark .odl-journal{ --jw-blue:#D49900 }   /* invert(#D49900) = #2B66FF */


/* ═══ ① 인사이트 목록 — Journal Index ═══════════════════════════════════ */

.odl-jindex{
  width:100%; color:var(--jw-ink);
  font-family:inherit; -webkit-font-smoothing:antialiased;
}

/* 머리 — 섹션 이름 + 편수 + 리드 */
.odl-jindex .ji-mast{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-bottom:2.4rem; border-bottom:1px solid var(--jw-ink);
}
.odl-jindex .ji-mast h1{
  margin:0; font-family:'TCCasablanco','HyundaiSansHead',serif; font-weight:400;
  font-size:6.4rem; line-height:1; letter-spacing:-.01em; color:var(--jw-ink);
}
.odl-jindex .ji-mast .ji-count{
  font-size:1.4rem; color:var(--jw-sub); letter-spacing:.02em;
  padding-bottom:.6rem; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.odl-jindex .ji-lede{
  margin:2.4rem 0 0; max-width:62rem;
  font-size:1.8rem; line-height:1.7; color:var(--jw-sub);
}

/* 목록 */
.odl-jindex .ji-list{ margin-top:5.6rem; border-top:1px solid var(--jw-line) }
.odl-jindex .ji-row{
  display:grid; grid-template-columns:9rem 1fr 18rem; gap:4rem; align-items:start;
  padding:4.8rem 1.6rem; border-bottom:1px solid var(--jw-line);
  text-decoration:none; color:inherit; position:relative; cursor:pointer;
  transition:background .28s cubic-bezier(.2,.7,.3,1);
}
.odl-jindex .ji-row:hover{ background:var(--jw-tint) }

.odl-jindex .ji-num{
  font-family:'TCCasablanco',serif; font-weight:200; font-size:4.8rem; line-height:1;
  color:var(--jw-num); font-variant-numeric:tabular-nums; transition:color .28s;
}
.odl-jindex .ji-row:hover .ji-num{ color:var(--jw-blue) }

.odl-jindex .ji-body{ min-width:0 }
.odl-jindex .ji-cite{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:1.2rem; letter-spacing:.09em; text-transform:uppercase; color:var(--jw-sub);
  font-variant-numeric:tabular-nums;
}
.odl-jindex .ji-cite::before{ content:''; width:1.8rem; height:1px; background:var(--jw-sub); flex:none }
.odl-jindex .ji-ttl{
  margin:1.6rem 0 0; font-size:3.6rem; font-weight:500; line-height:1.28;
  letter-spacing:-.02em; color:var(--jw-ink); transition:color .2s;
}
.odl-jindex .ji-row:hover .ji-ttl{ color:var(--jw-blue) }
.odl-jindex .ji-sub{
  margin:1.2rem 0 0; font-size:1.8rem; line-height:1.65; color:var(--jw-sub); max-width:56rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.odl-jindex .ji-tags{ margin-top:2.4rem; display:flex; gap:.8rem; flex-wrap:wrap }
.odl-jindex .ji-tag{
  font-size:1.2rem; letter-spacing:.02em; color:var(--jw-sub);
  border:1px solid var(--jw-line); border-radius:100px; padding:.5rem 1.2rem;
}

.odl-jindex .ji-thumb{
  width:18rem; aspect-ratio:1/1; border-radius:1.2rem; overflow:hidden;
  background:var(--jw-tint); position:relative;
}
.odl-jindex .ji-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.04); transform:scale(1.02);
  transition:filter .45s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.odl-jindex .ji-row:hover .ji-thumb img{ filter:grayscale(0); transform:scale(1.07) }
html.dark .odl-jindex .ji-thumb img{ filter:invert(1) grayscale(1) contrast(1.04) }
html.dark .odl-jindex .ji-row:hover .ji-thumb img{ filter:invert(1) grayscale(0) }

.odl-jindex .ji-arrow{
  position:absolute; right:1.2rem; bottom:1.2rem; width:3.2rem; height:3.2rem;
  border-radius:50%; background:#fff; display:grid; place-items:center;
  opacity:0; transform:translateY(.6rem); transition:opacity .3s, transform .3s;
}
.odl-jindex .ji-row:hover .ji-arrow{ opacity:1; transform:none }
.odl-jindex .ji-arrow svg{ width:1.4rem; height:1.4rem; stroke:#111318; fill:none; stroke-width:2 }

/* 초안 배지 (관리자 미리보기) */
.odl-jindex .odl-draft-badge{ position:absolute; top:1.2rem; left:1.6rem; z-index:2 }


/* ═══ ② 인사이트 아티클 ═════════════════════════════════════════════════ */

.odl-journal{ counter-reset:jsec }

/* 골격 — 가운데 읽기 컬럼(72rem) + 이미지는 전폭(126rem)으로 확장 */
.odl-a.odl-journal{
  display:grid;
  grid-template-columns:[full-start] 1fr [text-start] minmax(0,72rem) [text-end] 1fr [full-end];
  color:var(--jw-ink);
}
.odl-a.odl-journal > *{ grid-column:text }
.odl-a.odl-journal > header,
.odl-a.odl-journal > figure,
.odl-a.odl-journal > .odl-imgs,
.odl-a.odl-journal > .odl-gallery,
.odl-a.odl-journal > .odl-slider,
.odl-a.odl-journal > .odl-jrail,
.odl-a.odl-journal > .odl-jmeta,
.odl-a.odl-journal > .odl-jhero,
.odl-a.odl-journal > .odl-jnext,
.odl-a.odl-journal > .odl-line{ grid-column:full }

/* 상단 레일 — ← Insight / 01 · 03 */
.odl-journal .odl-jrail{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1.6rem; margin-bottom:6.4rem;
  border-bottom:1px solid var(--jw-ink);
  font-size:1.2rem; letter-spacing:.09em; text-transform:uppercase; color:var(--jw-sub);
  font-variant-numeric:tabular-nums;
}
.odl-journal .odl-jrail a{ color:inherit; text-decoration:none; transition:color .2s }
.odl-journal .odl-jrail a:hover{ color:var(--jw-blue) }
.odl-journal .odl-jrail .idx{ color:var(--jw-ink) }

/* 카테고리 줄은 레일이 대신한다 — 단, 편집 중에는 고쳐야 하므로 남긴다 */
.odl-journal:not(.odl-editing) .odl-cat{ display:none }
.odl-journal.odl-editing .odl-cat{ font-size:1.6rem; color:var(--jw-sub); margin:0 0 2rem }

/* 헤더 */
.odl-journal .odl-head{ margin:0 0 6.4rem }
.odl-a.odl-journal.hdr-left .odl-eyebrow{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:1.2rem; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  color:var(--jw-sub); margin:0 0 2rem; font-variant-numeric:tabular-nums;
}
.odl-a.odl-journal.hdr-left .odl-eyebrow::before{
  content:''; width:1.8rem; height:1px; background:var(--jw-sub); flex:none;
}
.odl-a.odl-journal.hdr-left .odl-title{
  font-size:5.6rem; font-weight:500; line-height:1.24; letter-spacing:-.025em;
  color:var(--jw-ink); max-width:96rem; margin:0;
}
.odl-journal .odl-sub{
  font-size:2.2rem; font-weight:400; line-height:1.6; color:var(--jw-sub);
  max-width:68rem; margin:2rem 0 0;
}

/* 메타 — 키워드 + 날짜 */
.odl-journal .odl-jmeta{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:2.4rem 0; margin:0 0 8rem;
  border-top:1px solid var(--jw-line); border-bottom:1px solid var(--jw-line);
}
.odl-journal .odl-jmeta .tag{
  font-size:1.2rem; letter-spacing:.02em; color:var(--jw-sub);
  border:1px solid var(--jw-line); border-radius:100px; padding:.5rem 1.2rem;
}
.odl-journal .odl-jmeta .when{
  margin-left:auto; font-size:1.2rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--jw-sub); font-variant-numeric:tabular-nums;
}

/* 히어로 */
.odl-journal .odl-jhero{ margin:0 0 9.6rem }
.odl-journal .odl-jhero img{
  width:100%; display:block; border-radius:2rem; aspect-ratio:16/9; object-fit:cover;
}

/* 본문 */
.odl-journal .odl-p{
  font-size:1.8rem; line-height:1.9; color:var(--jw-body);
  margin:0 0 3.2rem; letter-spacing:-.003em;
}
.odl-journal .odl-h + .odl-p{ font-size:2rem; line-height:1.8; color:var(--jw-ink) }

/* 섹션 제목 — 번호를 왼쪽 여백에 매단다 */
.odl-journal .odl-h{
  position:relative;
  font-size:2.8rem; font-weight:500; line-height:1.4; letter-spacing:-.02em;
  color:var(--jw-ink); margin:0 0 2.8rem;
}
.odl-journal .odl-h.odl-newsec{ margin-top:9.6rem }
.odl-journal .odl-h::before{
  counter-increment:jsec; content:counter(jsec,decimal-leading-zero);
  position:absolute; right:calc(100% + 4rem); top:-.4rem;
  font-family:'TCCasablanco',serif; font-weight:200; font-size:3.6rem; line-height:1;
  color:var(--jw-num); font-variant-numeric:tabular-nums;
}
.odl-journal .odl-h.odl-newsec::after{
  content:''; position:absolute; left:0; top:-4.8rem; width:6rem; height:1px;
  background:var(--jw-blue);
}

/* 이미지 — 읽기 컬럼을 뚫고 나간다 */
.odl-journal figure{ margin:5.6rem 0 6.4rem }
.odl-journal figure img,
.odl-journal figure video{ border-radius:1.2rem }
.odl-journal figure.full{ width:100%; max-width:none; margin:8rem 0 8.8rem }
.odl-journal figcaption{
  display:flex; gap:1.2rem; align-items:flex-start;
  max-width:72rem; margin:1.6rem auto 0; text-align:left;
  font-size:1.3rem; line-height:1.6; color:var(--jw-sub);
}
.odl-journal figcaption::before{
  content:''; width:1.8rem; height:1px; background:var(--jw-sub); flex:none; margin-top:1rem;
}

/* 인용 */
.odl-journal .odl-quote{ border:0; padding:0; margin:6.4rem 0; position:relative }
.odl-journal .odl-quote::before{
  content:'\201C'; position:absolute; right:calc(100% + 2.4rem); top:-1.6rem;
  font-family:'TCCasablanco',serif; font-size:8rem; line-height:1; color:var(--jw-blue);
}
.odl-journal .odl-quote p{
  font-size:2.6rem; font-weight:400; line-height:1.62; letter-spacing:-.02em; color:var(--jw-ink);
}
.odl-journal .odl-quote cite{
  margin-top:1.8rem; font-size:1.2rem; letter-spacing:.09em; text-transform:uppercase; color:var(--jw-sub);
}

/* 크레딧 */
.odl-journal .odl-credits{ margin:9.6rem 0 0; border-top:1px solid var(--jw-ink) }
.odl-journal .odl-credits dl{
  grid-template-columns:18rem 1fr; padding:1.6rem 0; border-bottom:1px solid var(--jw-line);
}
.odl-journal .odl-credits dt{
  font-size:1.2rem; font-weight:400; letter-spacing:.09em; text-transform:uppercase; color:var(--jw-sub);
}
.odl-journal .odl-credits dd{
  font-size:1.4rem; line-height:1.7; color:var(--jw-body); word-break:break-word;
}

/* 다음 글 — 목록과 같은 행 */
.odl-journal .odl-jnext{ margin-top:12rem; border-top:1px solid var(--jw-ink) }
.odl-journal .odl-jnext .cap{
  font-size:1.2rem; letter-spacing:.09em; text-transform:uppercase; color:var(--jw-sub); padding:2rem 0 0;
}
.odl-journal .odl-jnext a{
  display:grid; grid-template-columns:1fr 12rem; gap:4rem; align-items:center;
  padding:3.2rem .4rem 3.6rem; text-decoration:none; color:inherit;
  transition:background .28s cubic-bezier(.2,.7,.3,1);
}
.odl-journal .odl-jnext a:hover{ background:var(--jw-tint) }
.odl-journal .odl-jnext .cite{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:1.2rem; letter-spacing:.09em; text-transform:uppercase; color:var(--jw-sub);
}
.odl-journal .odl-jnext .cite::before{ content:''; width:1.8rem; height:1px; background:var(--jw-sub) }
.odl-journal .odl-jnext h4{
  margin:1.2rem 0 0; font-size:2.8rem; font-weight:500; letter-spacing:-.02em;
  line-height:1.3; color:var(--jw-ink); transition:color .2s;
}
.odl-journal .odl-jnext a:hover h4{ color:var(--jw-blue) }
.odl-journal .odl-jnext .th{
  width:12rem; height:12rem; border-radius:1.2rem; overflow:hidden; background:var(--jw-tint);
}
.odl-journal .odl-jnext .th img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1); transition:filter .45s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.odl-journal .odl-jnext a:hover .th img{ filter:grayscale(0); transform:scale(1.06) }
html.dark .odl-journal .odl-jnext .th img{ filter:invert(1) grayscale(1) }
html.dark .odl-journal .odl-jnext a:hover .th img{ filter:invert(1) grayscale(0) }


/* ═══ 중간 폭 (690 ~ 1365px) ═══════════════════════════════════════════
 * 이 구간은 html font-size 가 0.875vw 라 rem 이 화면 폭에 비례해 줄어든다.
 * 별도 보정 없이 그대로 스케일된다. 목록의 좌측 번호 컬럼만 살짝 줄인다. */
@media (min-width:690px) and (max-width:1023px){
  .odl-jindex .ji-row{ grid-template-columns:6rem 1fr 14rem; gap:3.2rem }
  .odl-jindex .ji-num{ font-size:3.6rem }
  .odl-jindex .ji-thumb{ width:14rem }
}


/* ═══ 모바일 (≤690px) ═════════════════════════════════════════════════ */
@media (max-width:690px){

  /* 목록 — 부모(.jctdRN)에 좌우 여백이 없으므로 직접 준다 (원본 ul 과 동일) */
  .odl-jindex{ padding:0 2.4rem; box-sizing:border-box }
  .odl-jindex .ji-mast h1{ font-size:4rem }
  .odl-jindex .ji-mast .ji-count{ font-size:1.2rem }
  .odl-jindex .ji-lede{ font-size:1.5rem; margin-top:1.6rem }
  .odl-jindex .ji-list{ margin-top:3.2rem }
  .odl-jindex .ji-row{ grid-template-columns:1fr 9.6rem; gap:2rem; padding:3.2rem .4rem }
  .odl-jindex .ji-num{ display:none }
  .odl-jindex .ji-ttl{ font-size:2.2rem; margin-top:1.2rem }
  .odl-jindex .ji-sub{ font-size:1.4rem; margin-top:.8rem }
  .odl-jindex .ji-tags{ margin-top:1.6rem }
  .odl-jindex .ji-thumb{ width:9.6rem; height:9.6rem; border-radius:.8rem }
  .odl-jindex .ji-arrow{ display:none }

  /* 아티클 */
  .odl-a.odl-journal{ grid-template-columns:[full-start text-start] minmax(0,1fr) [text-end full-end] }
  .odl-journal .odl-jrail{ margin-bottom:3.2rem }
  .odl-journal .odl-head{ margin-bottom:3.2rem }
  .odl-a.odl-journal.hdr-left .odl-title{ font-size:2.8rem; line-height:1.34 }
  .odl-journal .odl-sub{ font-size:1.6rem; margin-top:1.2rem }
  .odl-journal .odl-jmeta{ padding:1.6rem 0; margin-bottom:4rem }
  .odl-journal .odl-jmeta .when{ margin-left:0; width:100% }
  .odl-journal .odl-jhero{ margin-bottom:4.8rem }
  .odl-journal .odl-jhero img{ border-radius:1.2rem }
  .odl-journal .odl-p{ font-size:1.5rem; line-height:1.85; margin-bottom:2.4rem }
  .odl-journal .odl-h + .odl-p{ font-size:1.6rem }
  .odl-journal .odl-h{ font-size:2rem; margin-bottom:1.8rem; padding-top:2.4rem }
  .odl-journal .odl-h.odl-newsec{ margin-top:5.6rem }
  .odl-journal .odl-h::before{
    position:static; display:block; font-size:2rem; margin-bottom:.8rem; color:var(--jw-blue);
  }
  .odl-journal .odl-h.odl-newsec::after{ top:0 }
  .odl-journal figure{ margin:3.2rem 0 4rem }
  .odl-journal figure.full{ margin:4rem 0 4.8rem }
  .odl-journal figcaption{ font-size:1.2rem; margin-top:1.2rem }
  .odl-journal .odl-quote{ margin:4rem 0 }
  .odl-journal .odl-quote::before{ position:static; display:block; font-size:4.8rem; margin-bottom:-1.6rem }
  .odl-journal .odl-quote p{ font-size:1.9rem }
  .odl-journal .odl-credits{ margin-top:5.6rem }
  .odl-journal .odl-credits dl{ grid-template-columns:1fr; gap:.4rem }
  .odl-journal .odl-jnext{ margin-top:6.4rem }
  .odl-journal .odl-jnext a{ grid-template-columns:1fr 8rem; gap:2rem; padding:2.4rem .2rem }
  .odl-journal .odl-jnext h4{ font-size:1.8rem }
  .odl-journal .odl-jnext .th{ width:8rem; height:8rem; border-radius:.8rem }
}