/* journal (12_journal, Figma node 11:11771) — 원본 시안 통이미지(flat).
   visible 노드 12 1. 헤더(Journal / Researching the Future of Elasticity, news 기조) + 아코디언 리스트.
   펼친 항목: 소제목+이미지 placeholder+텍스트. 페이지 bg 흰색, 펼친 행 #FFF1E6. Vol.01~10. */

.jr-page { background: #fff; color: #1a1a1a; --jr-orange: #f26521; }

.bg-image-placeholder {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: #e9e9e9;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%),
    linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%);
  background-size: 24px 24px; background-position: 0 0, 12px 12px; border: 1px dashed #c4c4c4;
}
.bg-image-placeholder__label {
  position: absolute; right: 12px; bottom: 10px; z-index: 1;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.9); color: #6a7682;
  font-family: var(--font-latin, "Poppins", sans-serif); font-size: 12px; font-weight: 500;
}

/* ===== HEAD (news 기조: 넉넉한 높이) ===== */
.jr-head { max-width: 1280px; margin: 0 auto; padding: clamp(110px, 17.7vw, 255px) clamp(24px, 5vw, 60px) clamp(48px, 8vw, 110px); }
.jr-eyebrow { margin: 0 0 16px; color: var(--jr-orange); font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(15px, 1.2vw, 18px); font-weight: 600; }
.jr-title { margin: 0; font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(32px, 3.8vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -1px; }

/* ===== ACCORDION ===== */
.jr-list { max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 60px) clamp(72px, 8vw, 130px); }
.jr-item { border-bottom: 1px solid #ececec; }
/* 첫 항목(Vol.10) 위 경계선을 아이템 폭에 맞춰(아래 경계선과 동일 길이) */
.jr-item:first-child { border-top: 1px solid #ececec; }
.jr-row { list-style: none; cursor: pointer; display: grid; grid-template-columns: 22px clamp(58px, 6vw, 80px) 1fr auto; align-items: center; gap: clamp(10px, 1.4vw, 18px); padding: clamp(18px, 2vw, 26px) clamp(8px, 1.5vw, 22px); transition: background-color .2s; }
.jr-row::-webkit-details-marker { display: none; }
.jr-row::marker { content: ""; }
.jr-chev { width: 9px; height: 9px; border-right: 2px solid var(--jr-orange); border-bottom: 2px solid var(--jr-orange); transform: rotate(45deg); transform-origin: center; transition: transform .25s; margin-top: -3px; }
.jr-item[open] .jr-chev { transform: rotate(-135deg); margin-top: 3px; }
.jr-vol { color: var(--jr-orange); font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; }
.jr-rowtitle { font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; color: #1a1a1a; word-break: keep-all; }
.jr-date { font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(12px, 1vw, 14px); color: #999; white-space: nowrap; }
.jr-item[open] .jr-row { background: #fff1e6; }

/* 펼친 내용: 제목 컬럼에 맞춰 들여쓰기. 소제목 + 이미지(중앙) + 텍스트 */
.jr-content { padding: clamp(20px, 2.4vw, 36px) clamp(8px, 1.5vw, 22px) clamp(40px, 4vw, 64px); padding-left: clamp(40px, 9vw, 130px); animation: jr-reveal .35s ease; }
@keyframes jr-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.jr-sub { margin: 0 0 clamp(20px, 2.4vw, 32px); font-size: clamp(15px, 1.3vw, 19px); font-weight: 600; color: #444; }
.jr-img { width: 100%; max-width: 480px; aspect-ratio: 4 / 3; border-radius: 4px; margin: 0 0 clamp(20px, 2.4vw, 32px); background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; }
.jr-text { max-width: 720px; margin: 0; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.85; color: #777; word-break: keep-all; }

/* ===== Responsive ===== */
@media (max-width: 700px) {
  .jr-row { grid-template-columns: 18px auto 1fr; gap: 10px; }
  .jr-date { grid-column: 2 / -1; grid-row: 2; text-align: left; margin-top: 6px; }
  .jr-content { padding-left: clamp(28px, 7vw, 44px); }
}