/* ════════════════════════════════════════════════════════════════
   onefix — 콘텐츠 IR(확장 에디터 본문) 렌더 스타일
   스키마: docs/manual/spec-content-ir-v1.md

   원웨어 pages.css(91KB)를 이식하지 않고 onefix 체계로 새로 작성.
   색·폰트·라운드·여백은 퍼블릭 셸이 주입하는 테마 변수를 그대로 쓰므로
   사이트 테마를 바꾸면 본문도 함께 따라간다.
════════════════════════════════════════════════════════════════ */

.of-ir {
    --ir-gap: 28px;          /* 블록 간 세로 간격 */
    color: var(--color-text, #222);
    font-family: var(--font-body, inherit);
    font-size: var(--font-size-base, 16px);
    line-height: var(--line-height-base, 1.7);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.of-ir-b + .of-ir-b { margin-top: var(--ir-gap); }
.of-ir img { max-width: 100%; height: auto; display: block; }
/* :not(.of-ir-btn) — 링크 버튼은 자기 글자색(--of-btn-text)을 써야 한다.
   빼면 이 규칙이 특이도로 이겨 버튼 글자가 배경과 같은 계열 색이 돼 안 보인다 */
.of-ir a:not(.of-ir-btn) { color: var(--color-primary, #2563eb); }

/* ── 본문 텍스트 ───────────────────────────────────────────── */
.of-ir-text > :first-child { margin-top: 0; }
.of-ir-text > :last-child  { margin-bottom: 0; }
.of-ir-text p { margin: 0 0 0.9em; }
.of-ir-text h1, .of-ir-text h2, .of-ir-text h3,
.of-ir-text h4, .of-ir-text h5, .of-ir-text h6 {
    font-family: var(--font-heading, var(--font-body, inherit));
    line-height: 1.35;
    margin: 1.6em 0 0.6em;
}
/* 리스트·인용·표 — 컬럼 셀 텍스트(.of-ir-cell-text)도 동일 (테마 리셋이 리스트 스타일을 지우므로 명시) */
.of-ir-text ul, .of-ir-cell-text ul,
.of-ir-text ol, .of-ir-cell-text ol { margin: 0 0 0.9em; padding-left: 1.5em; }
.of-ir-text ul, .of-ir-cell-text ul { list-style: disc; }
.of-ir-text ol, .of-ir-cell-text ol { list-style: decimal; }
.of-ir-text li, .of-ir-cell-text li { margin: 0.25em 0; }
.of-ir-text li p, .of-ir-cell-text li p { margin: 0; }
/* 인용 — 원웨어식: 배경 없이 회색 세로 바만, 텍스트 색은 본문 서식 그대로 */
.of-ir-text blockquote, .of-ir-cell-text blockquote {
    margin: 0 0 0.9em;
    padding: 0.15em 0 0.15em 1em;
    border-left: 5px solid var(--color-border, #e2e5ea);
}
.of-ir-text table, .of-ir-cell-text table { width: 100%; border-collapse: collapse; margin: 0 0 0.9em; }
.of-ir-text th, .of-ir-cell-text th,
.of-ir-text td, .of-ir-cell-text td {
    border: 1px solid var(--color-border, #e5e7eb);
    padding: 0.5em 0.7em;
    vertical-align: top;
}
.of-ir-text th, .of-ir-cell-text th { background: var(--color-surface, #f8f9fa); font-weight: 700; }

/* ── 이미지 ────────────────────────────────────────────────── */
.of-ir-image { margin: 0; }
.of-ir-image.is-left   { text-align: left; }
.of-ir-image.is-center { text-align: center; }
.of-ir-image.is-right  { text-align: right; }
.of-ir-image.is-left img   { margin-right: auto; }
.of-ir-image.is-center img { margin-left: auto; margin-right: auto; }
.of-ir-image.is-right img  { margin-left: auto; }

/* 폭: normal=컨테이너 기준 / wide=여유 확장 / full=전폭(컨테이너 여백 상쇄) */
.of-ir-image.is-wide img { width: 100%; }
.of-ir-image.is-full {
    margin-left: calc(-1 * var(--container-padding-x, 20px));
    margin-right: calc(-1 * var(--container-padding-x, 20px));
}
.of-ir-image.is-full img { width: 100%; }

/* ── 동영상 임베드 ─────────────────────────────────────────── */
.of-ir-embed {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: var(--radius, 6px);
    overflow: hidden;
}
.of-ir-embed.is-r16x9 { aspect-ratio: 16 / 9; }
.of-ir-embed.is-r4x3  { aspect-ratio: 4 / 3; }
.of-ir-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── 구분선 ────────────────────────────────────────────────── */
.of-ir-divider hr {
    border: 0;
    border-top: 1px solid var(--color-border, #e5e7eb);
    margin: 0 auto;
    width: 100%;
}
.of-ir-divider.is-dashed hr { border-top-style: dashed; }
.of-ir-divider.is-blank  hr { border-top-color: transparent; }

/* ── 링크 버튼 ─────────────────────────────────────────────── */
.of-ir-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.of-ir-buttons.is-left   { justify-content: flex-start; }
.of-ir-buttons.is-center { justify-content: center; }
.of-ir-buttons.is-right  { justify-content: flex-end; }
/* 균등 분배 — 원웨어 링크버튼(display:table 셀 균등)과 같은 외관 */
.of-ir-buttons.is-spread { justify-content: space-around; }

.of-ir-btn {
    display: inline-flex;
    /* column — 버튼 문구는 리치텍스트(여러 <p> 줄 가능). row면 줄들이 한 줄로 붙는다 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    background: var(--of-btn-bg, var(--color-primary, #2563eb));
    color: var(--of-btn-text, #fff);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.4;
    transition: filter 0.15s ease;
}
.of-ir-btn:hover { filter: brightness(0.93); }
.of-ir-btn.is-static { cursor: default; }
.of-ir-btn.is-static:hover { filter: none; }
/* 버튼 내부는 리치텍스트라 문단 여백을 죽인다 */
.of-ir-btn > :first-child { margin: 0; }
.of-ir-btn p { margin: 0; }
.of-ir-btn ol, .of-ir-btn ul { margin: 0; padding-left: 1.4em; }

.of-ir-buttons.is-round1 .of-ir-btn { border-radius: var(--radius, 6px); }
.of-ir-buttons.is-round2 .of-ir-btn { border-radius: 999px; }
.of-ir-buttons.is-square .of-ir-btn { border-radius: 0; }

.of-ir-buttons.is-s .of-ir-btn { padding: 8px 18px;  font-size: 0.9em; }
.of-ir-buttons.is-l .of-ir-btn { padding: 16px 36px; font-size: 1.08em; }

/* 그라디언트: 지정 배경색을 밝게→어둡게 겹쳐 입체감 (배경색 미지정 시 테마색) */
.of-ir-buttons.is-gradient .of-ir-btn {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.12));
}

/* ── 컬럼 (2·3·4단) ────────────────────────────────────────── */
.of-ir-cols {
    display: grid;
    grid-template-columns: repeat(var(--ir-cols, 2), minmax(0, 1fr));
}
.of-ir-cols.is-c2 { --ir-cols: 2; }
.of-ir-cols.is-c3 { --ir-cols: 3; }
.of-ir-cols.is-c4 { --ir-cols: 4; }
.of-ir-cols.is-vmiddle .of-ir-cell { align-self: center; }

.of-ir-cell { min-width: 0; }
.of-ir-cell-img + .of-ir-cell-text { margin-top: 12px; }
.of-ir-cell-text > :first-child { margin-top: 0; }
.of-ir-cell-text > :last-child  { margin-bottom: 0; }
.of-ir-cell-text p { margin: 0 0 0.7em; }

/* ── 도해 (diagram) — 원웨어 mods_type16/17 승격 ───────────── */
.of-ir-diagram { font-size: 0; }   /* inline-block 간 공백 제거 */
.of-ir-diagram.is-left   { text-align: left; }
.of-ir-diagram.is-center { text-align: center; }
.of-ir-diagram.is-right  { text-align: right; }

.of-ir-dg-item {
    display: inline-block;
    width: 150px;
    margin: 0 25px 25px;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
.of-ir-dg-head { position: relative; height: 150px; }
.of-ir-dg-shape { position: absolute; inset: 0; background: #eaeaea; }
.of-ir-dg-body { position: relative; display: table; width: 100%; height: 100%; z-index: 1; }
.of-ir-dg-text {
    display: table-cell;
    max-width: 100%;
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
}
.of-ir-dg-text p, .of-ir-dg-caption p { margin: 0 0 10px; }
.of-ir-dg-text > :last-child, .of-ir-dg-caption > :last-child { margin-bottom: 0; }
.of-ir-dg-caption { margin-top: 12px; }

/* 모양 */
.of-ir-diagram.is-circle  .of-ir-dg-shape { border-radius: 100%; }
.of-ir-diagram.is-rounded .of-ir-dg-shape { border-radius: 10px; }

/* 효과 (원웨어 effect_* 대응 — solid는 단색 그대로) */
.of-ir-diagram.is-e-borderL .of-ir-dg-shape { box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.5); }
.of-ir-diagram.is-e-borderD .of-ir-dg-shape { box-shadow: inset 0 0 0 8px rgba(0, 0, 0, 0.15); }
.of-ir-diagram.is-e-shadow  .of-ir-dg-shape { box-shadow: 0 0 15px rgba(0, 0, 0, 0.35); }
.of-ir-diagram.is-e-shadow  .of-ir-dg-caption { margin-top: 1.8em; }
.of-ir-diagram.is-e-gradient .of-ir-dg-shape::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* ── 미지 타입 폴백 ────────────────────────────────────────── */
.of-ir-raw img { max-width: 100%; height: auto; }

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* 4단 → 2단 */
    .of-ir-cols.is-c4 { --ir-cols: 2; }
}

@media (max-width: 600px) {
    .of-ir { --ir-gap: 20px; }
    /* 모든 컬럼 1단으로 세로 적층 */
    .of-ir-cols.is-c2,
    .of-ir-cols.is-c3,
    .of-ir-cols.is-c4 { --ir-cols: 1; }
    .of-ir-buttons .of-ir-btn { width: 100%; }
    /* 도해 — 좁은 화면에서 도형·간격 축소 */
    .of-ir-dg-item { width: 120px; margin: 0 12px 20px; }
    .of-ir-dg-head { height: 120px; }
}