/* 상세 본문 블록 — 형태는 이미지와 글의 자리로만 갈린다.
   블록이 없는 화면에는 아무 영향이 없다(마크업 자체가 안 나온다). */

.dblocks { margin: 0 0 32px; }

/* 두 겹으로 나눈 이유 —
   바깥(.dblock)은 화면 끝까지 늘어나 배경색을 칠하고,
   안쪽(.dblock-inner)이 글이 읽히는 폭으로 좁힌다.
   한 겹으로 하면 배경을 끝까지 칠할 때 글도 함께 늘어나 읽기 어려워진다. */
.dblock { padding: clamp(28px, 4.5vw, 72px) 0; }
.dblock-inner { margin: 0 auto; padding: 0 20px; }

/* 폭 - 관리자가 고른다. 모르는 값은 엔티티가 normal 로 읽는다 */
.dblock.w-narrow .dblock-inner { max-width: 840px; }
.dblock.w-normal .dblock-inner { max-width: 1200px; }
.dblock.w-wide   .dblock-inner { max-width: 1640px; }
.dblock.w-full   .dblock-inner { max-width: none; }

/* 이미지 비율 — 블록이 값을 정하고, 그 안의 이미지가 변수를 읽는다.
   규칙을 이미지 종류마다 쓰면 4가지 x 3자리 = 12줄이 된다. */
.dblock.r-wide   { --img-ratio: 16 / 9; }
.dblock.r-square { --img-ratio: 1 / 1; }
.dblock.r-banner { --img-ratio: 21 / 9; }
/* r-auto 는 변수를 두지 않는다 — 아래에서 auto 로 떨어져 원본 비율이 된다 */

/* 사진 기준점 — 비율에 맞춰 자를 때 어느 쪽을 남길지.
   기본은 가운데(50% 50%)라 값을 안 정한 블록은 지금과 똑같다. */
.dblock.p-top-left      { --img-pos:   0%   0%; }
.dblock.p-top-center    { --img-pos:  50%   0%; }
.dblock.p-top-right     { --img-pos: 100%   0%; }
.dblock.p-middle-left   { --img-pos:   0%  50%; }
.dblock.p-middle-right  { --img-pos: 100%  50%; }
.dblock.p-bottom-left   { --img-pos:   0% 100%; }
.dblock.p-bottom-center { --img-pos:  50% 100%; }
.dblock.p-bottom-right  { --img-pos: 100% 100%; }
/* p-middle-center 는 변수를 두지 않는다 — 아래 기본값 50% 50% 로 떨어진다 */

.dblock-ov > img,
.dblock-img img,
.dblock-item-img img {
  aspect-ratio: var(--img-ratio, auto);
  /* 비율을 정했으면 남는 부분을 잘라 채운다. auto 면 아무 영향이 없다 */
  object-fit: cover;
  /* 자를 때 어느 쪽을 남길지. 값이 없으면 가운데 = CSS 기본 동작 */
  object-position: var(--img-pos, 50% 50%);
}

/* 글 — 형태와 무관하게 같은 모양 */
.dblock-txt .k { display: block; font-size: clamp(14px, 1vw, 16px); color: #6d28d9; margin-bottom: 6px; }
.dblock-txt h2 { font-size: clamp(22px, 2.2vw, 34px); line-height: 1.3; margin: 0 0 clamp(10px, 1vw, 18px); }
.dblock-txt .b { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.8; }
.dblock-txt .b p { margin: 0 0 8px; }
/* 글에 넣은 그림 — 문단 정렬(왼쪽·가운데·오른쪽)을 따르게 inline 으로 둔다.
   block 이면 text-align 이 아무 효과가 없다 */
.dblock-txt .b img { display: inline-block; max-width: 100%; height: auto; }

/* 이미지 — 원본이 1080px 이라 그 이상 늘리면 흐려진다 */
.dblock-img { margin: 0; background: #e9ecef; border-radius: 6px; }
/* 비율을 안 정한 경우에만 자리를 잡아둔다.
   높이가 0 이면 브라우저가 화면 밖으로 보고 lazy 이미지를 영영 안 부른다 */
.dblock.r-auto .dblock-img { min-height: 200px; }
.dblock-img img { display: block; width: 100%; max-width: 1080px; height: auto;
  margin-left: auto; margin-right: auto; border-radius: 6px; }

/* ── 겹침: 이미지를 배경으로, 글을 그 위에 ── */
/* 이미지가 뜨기 전에도 자리를 잡아야 한다.
   높이가 0 이면 브라우저가 화면 밖으로 보고 lazy 이미지를 영영 안 부른다 */
.dblock-ov { position: relative; border-radius: 8px; overflow: hidden;
  background: #e9ecef; }
.dblock.r-auto .dblock-ov { min-height: 240px; }
/* 겹침의 배경 이미지 — 바로 아래 img 만. 자손까지 잡으면 글에 넣은 그림도 걸린다 */
.dblock-ov > img { display: block; width: 100%; height: auto; }
.dblock-ov .dblock-veil { position: absolute; inset: 0; background: #000; pointer-events: none; }
.dblock-ov .dblock-txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 24px 28px; color: #fff;
  /* 글이 이미지보다 길어질 수 있어 넘치면 그 안에서 스크롤한다.
     러시아어는 한국어의 1.4배라 고정 높이를 두면 잘린다 */
  overflow: auto;
}
/* 기본은 흰색. 에디터에서 색을 고르면 인라인 style 이 이긴다(!important 를 쓰지 않는 이유) */
.dblock-ov .dblock-txt .k { color: rgba(255,255,255,.9); }
.dblock-ov .dblock-txt h2 { color: #fff; }
.dblock-ov .dblock-txt .b { color: rgba(255,255,255,.95); }
/* 글자 자리 — 세로와 가로를 따로 걸어 9칸을 6줄로 덮는다 */
.dblock-ov.v-top    .dblock-txt { justify-content: flex-start; }
.dblock-ov.v-middle .dblock-txt { justify-content: center; }
.dblock-ov.v-bottom .dblock-txt { justify-content: flex-end; }
/* 가로 정렬은 text-align 으로만 한다.
   align-items 로 하면 글 상자가 내용 폭으로 줄어, 문단별 정렬이 그 안에서 묻힌다. */
.dblock-ov.h-left   .dblock-txt { text-align: left; }
.dblock-ov.h-center .dblock-txt { text-align: center; }
.dblock-ov.h-right  .dblock-txt { text-align: right; }
/* 글 상자가 늘 전체 폭을 갖게 한다 — 문단 정렬이 움직일 자리를 만든다 */
.dblock-ov .dblock-txt > * { width: 100%; }

/* ── 좌우 ── */
/* 배치는 안쪽 겹이 맡는다. 바깥에 걸면 자식이 .dblock-inner 하나뿐이라 칸이 빈다 */
.dblock-image_left .dblock-inner, .dblock-image_right .dblock-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center;
}
.dblock-image_right .dblock-img { order: 2; }

/* ── 위아래 ── */
.dblock-image_top .dblock-img { margin-bottom: 16px; }
.dblock-image_bottom .dblock-img { order: 2; margin-top: 16px; }
.dblock-image_bottom .dblock-inner { display: flex; flex-direction: column; }

/* ── 글만 ── */
.dblock-text_only .dblock-txt { max-width: 900px; }

/* ── 안에 든 블록들을 나란히 ── */
/* 열 수를 박지 않는다. 2개면 크게, 5개면 작게 - 개수를 세어 CSS 를 고칠 일이 없다.
   좁아지면 minmax 가 알아서 줄을 바꾼다. */
.dblock-items { display: grid; gap: 20px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* 안에 든 것의 크기 —
   fill 은 남는 폭을 나눠 갖고, 나머지는 정해진 폭으로 서서 가운데로 몰린다.
   min(폭, 100%) 이라 좁은 화면에서는 저절로 한 칸 폭이 되어 미디어쿼리가 필요 없다. */
.dblock.s-small  .dblock-items { grid-template-columns: repeat(auto-fit, min(200px, 100%));
  justify-content: center; }
.dblock.s-medium .dblock-items { grid-template-columns: repeat(auto-fit, min(300px, 100%));
  justify-content: center; }
.dblock.s-large  .dblock-items { grid-template-columns: repeat(auto-fit, min(480px, 100%));
  justify-content: center; }

.dblock-item { min-width: 0; }

/* 안에 든 것에 번호 매기기 —
   번호를 글에 넣지 않고 CSS 가 화면 순서대로 센다.
   그래야 항목 순서를 바꿔도 번호를 다시 손볼 일이 없다. */
.dblock.n-number .dblock-items,
.dblock.n-step   .dblock-items { counter-reset: dbitem; }
.dblock.n-number .dblock-item,
.dblock.n-step   .dblock-item { counter-increment: dbitem; }

/* 번호 - 동그란 배지. 이미지 위가 아니라 글 위에 두어 사진과 겹치지 않게 한다 */
.dblock.n-number .dblock-item .dblock-txt::before {
  content: counter(dbitem);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 0 12px;
  border-radius: 50%; background: #6d28d9; color: #fff;
  font-size: 18px; font-weight: 700; line-height: 1;
}

/* 단계 - STEP 1 처럼 글자로 */
.dblock.n-step .dblock-item .dblock-txt::before {
  content: 'STEP ' counter(dbitem);
  display: block; margin: 0 0 10px;
  color: #6d28d9; font-size: 15px; font-weight: 800; letter-spacing: 0.05em;
}

/* 가운데 정렬 블록에서는 배지도 가운데로 */
.dblock.h-center.n-number .dblock-item .dblock-txt::before { margin-left: auto; margin-right: auto; }
.dblock-item-img { margin: 0 0 12px; }
.dblock-item-img img { display: block; width: 100%; height: auto; border-radius: 12px; }

.dblock-item .dblock-txt .k { font-size: 13px; margin-bottom: 4px; }
.dblock-item .dblock-txt h3 { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; margin: 0 0 6px; }
.dblock-item .dblock-txt .b { font-size: clamp(14px, 1.05vw, 17px); line-height: 1.6; }

@media (max-width: 767px) {
  /* 좁은 화면에서는 한 줄에 둘까지 - 다섯이 그대로 서면 글자가 못 읽는다 */
  .dblock-items { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
  .dblock-item .dblock-txt h3 { font-size: 15px; }
  .dblock-item .dblock-txt .b { font-size: 13px; }
}

@media (max-width: 767px) {
  /* 좁은 화면에서는 좌우를 위아래로 편다 — 글이 눌리면 못 읽는다 */
  .dblock-image_left .dblock-inner, .dblock-image_right .dblock-inner {
    grid-template-columns: 1fr; gap: 14px; }
  .dblock-image_right .dblock-img { order: 0; }
  .dblock-txt h2 { font-size: 19px; }
  .dblock-txt .b { font-size: 14px; }
  .dblock-ov .dblock-txt { padding: 16px 18px; }
}

/* 편집기에서 넣은 들여쓰기 — Quill 은 이것만 클래스로 남긴다(나머지는 style).
   공개 화면에는 Quill CSS 가 없으므로 여기서 대신한다. */
.dblock-txt .b .ql-indent-1 { padding-left: 3em; }
.dblock-txt .b .ql-indent-2 { padding-left: 6em; }
.dblock-txt .b .ql-indent-3 { padding-left: 9em; }
.dblock-txt .b blockquote { margin: 0 0 8px; padding-left: 14px;
  border-left: 3px solid #d9dee3; color: #555; }
.dblock-txt .b pre { margin: 0 0 8px; padding: 10px 12px; border-radius: 6px;
  background: #f5f6f7; font-size: 13px; overflow-x: auto; }


/* 자주 묻는 질문 - details 라 JS 없이 접힌다 */
.dblock-faq { margin-top: clamp(16px, 1.6vw, 28px); }
.dblock-faq-item { border-bottom: 1px solid #e5e7eb; }
.dblock-faq-item summary { list-style: none; cursor: pointer; padding: clamp(14px, 1.3vw, 20px) 34px clamp(14px, 1.3vw, 20px) 0;
  position: relative; }
.dblock-faq-item summary::-webkit-details-marker { display: none; }
.dblock-faq-item summary h3 { margin: 0; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; font-weight: 600; }

/* 접힘 표시 - 열리면 회전한다 */
.dblock-faq-item summary::after { content: ''; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid #6d28d9;
  border-bottom: 2px solid #6d28d9; transform: rotate(45deg); transition: transform .18s; }
.dblock-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.dblock-faq-item > .b { padding: 0 34px clamp(16px, 1.4vw, 22px) 0;
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.8; color: #4b5563; }
.dblock-faq-item > .b p { margin: 0 0 8px; }