/* ============================================================
   Use Case Detail — 02-use-case-detail.html 페이지 전용
   ▸ 대표 이미지 섹션
   ※ 공통 스타일은 common.css 참조
   ============================================================ */

/* ── 대표 이미지 섹션 ────────────────────────────────── */
.case-detail-hero {
    padding-top: 100px;
}

/* .inner 는 common.css — max-width: 1440px, margin: 0 auto */

.case-detail-hero__visual {
    width: 100%;
    height: 462px;
    overflow: hidden;
}

.case-detail-hero__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── 반응형 ──────────────────────────────────────────── */
@media (max-width: 1440px) {
    .case-detail-hero__visual {
        height: 380px;
    }
}

@media (max-width: 768px) {
    .case-detail-hero {
        padding-top: 64px;
    }

    /* 모바일에선 대표 이미지가 화면 양 끝까지 채워지도록 inner padding 제거 */
    .case-detail-hero .inner {
        padding-left: 0;
        padding-right: 0;
    }

    .case-detail-hero__visual {
        height: 200px;
    }
}

/* ============================================================
   본문 섹션 — 좌측 info(272px) / 우측 제목 + 내용
   사이 gap 48px. 칸 구분 없이 나열만.
   ============================================================ */
.case-detail-body {
    padding: 6vw 0;
}

.case-detail-body__inner {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

/* ── 좌측 info 영역 (272px 고정 폭) ─────────────────── */
.case-detail-body__info {
    flex: 0 0 480px;
    width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.case-detail-body__logo {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 12px;
}

.case-detail-body__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 기관명 — 라벨 없이 큰 타이틀 */
.case-detail-body__name {
    margin: 0;
    color: #262626;
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
    white-space: pre-line;
}

/* 메타 — 표 형식 (라벨 좌측 고정 폭 / 값 우측 가변) */
.case-detail-body__meta {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.case-detail-body__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.case-detail-body__meta-label {
    flex: 0 0 auto;
    width: 80px;
    color: #262626;
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.5px;
}

.case-detail-body__meta-value {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #595959;
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 1.25rem; /* 20px */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.3px;
    word-break: keep-all;
    white-space: pre-line;
}

/* ── 우측 본문 영역 — 자식(제목/내용/해시태그) 간 48px gap ─── */
.case-detail-body__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.case-detail-body__title {
    margin: 0;
    color: #262626;
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    line-height: 1.533; /* 46px */
    white-space: pre-line;
    word-break: keep-all;
}

.case-detail-body__content {
    color: #262626;
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: 1.75;
    word-break: keep-all;
}

/* ── 에디터에서 넘어온 content 의 시맨틱 태그 복원 ─────
   reset.css 가 전역에서 제목/목록/인용 등의 기본 스타일을 제거하므로,
   API content HTML 이 주입되는 .case-detail-body__content 안에서만 되살린다.
   (제목/해시태그/목록으로 버튼은 별도 클래스로 스타일되어 영향 없음) */
.case-detail-body__content h1,
.case-detail-body__content h2,
.case-detail-body__content h3,
.case-detail-body__content h4,
.case-detail-body__content h5,
.case-detail-body__content h6 {
    margin: 1.5em 0 0.6em;
    color: #262626;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
}

.case-detail-body__content h1 { font-size: 1.875rem; } /* 30px */
.case-detail-body__content h2 { font-size: 1.5rem; }   /* 24px */
.case-detail-body__content h3 { font-size: 1.25rem; }  /* 20px */
.case-detail-body__content h4 { font-size: 1.125rem; } /* 18px */
.case-detail-body__content h5 { font-size: 1rem; }     /* 16px */
.case-detail-body__content h6 { font-size: 0.875rem; } /* 14px */

/* 첫 요소 위쪽 여백은 제거 — 제목 영역과 간격이 겹치지 않도록 */
.case-detail-body__content > :first-child {
    margin-top: 0;
}

.case-detail-body__content ul,
.case-detail-body__content ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.case-detail-body__content ul { list-style: disc; }
.case-detail-body__content ol { list-style: decimal; }

.case-detail-body__content li {
    margin: 0.3em 0;
    line-height: 1.75;
}

.case-detail-body__content ul ul,
.case-detail-body__content ol ol,
.case-detail-body__content ul ol,
.case-detail-body__content ol ul {
    margin: 0.3em 0;
}

.case-detail-body__content strong,
.case-detail-body__content b {
    font-weight: 700;
}

.case-detail-body__content em,
.case-detail-body__content i {
    font-style: italic;
}

.case-detail-body__content u { text-decoration: underline; }
.case-detail-body__content s,
.case-detail-body__content del { text-decoration: line-through; }

.case-detail-body__content a {
    color: #0066cc;
    text-decoration: underline;
    word-break: break-all;
}

.case-detail-body__content blockquote {
    margin: 1em 0;
    padding: 0.5em 1.25em;
    border-left: 4px solid #d9d9d9;
    color: #595959;
}

.case-detail-body__content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid #e5e5e5;
}

.case-detail-body__content table {
    width: 100% !important;
    max-width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    /* 에디터가 박아둔 col/cell 픽셀 폭을 무시하고 컨테이너 폭에 맞춰 균등 분배 */
    table-layout: fixed;
}

/* ── 에디터(ProseMirror/TipTap)가 저장 시 주입하는 고정 폭 무력화 ─────
   colwidth="739" 속성, <colgroup><col style="width:NNNpx"> 형태 모두 대응.
   인라인 style 폭은 `width:auto !important` 가 우선해 덮어쓴다. */
.case-detail-body__content colgroup col,
.case-detail-body__content col[colwidth],
.case-detail-body__content col[style*="width"] {
    width: auto !important;
}

.case-detail-body__content th,
.case-detail-body__content td {
    padding: 8px 12px;
    border: 1px solid #e5e5e5;
    text-align: left;
    vertical-align: top;
    /* td/th[colwidth] 및 인라인 style 폭 무시 + 긴 텍스트 셀 넘침 방지 */
    width: auto !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.case-detail-body__content th {
    background: #f5f5f5;
    font-weight: 700;
}

/* API content HTML 내부 요소 정리 */
.case-detail-body__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 16px 0;
}

.case-detail-body__content p {
    line-height: 2;
}

/* 편집기의 엔터(빈 paragraph) 가 line break 로 노출되도록 강제 높이 부여.
   :empty = <p></p>, :has(> br:only-child) = <p><br></p> 패턴 모두 대응. */
.case-detail-body__content p:empty,
.case-detail-body__content p:has(> br:only-child) {
    min-height: 2em;
}

.case-detail-body__content figure {
    margin: 16px 0;
}

/* ── 에디터 이미지 그리드 (figure.weromy-image-grid) ─────
   data-cols 값만큼 컬럼을 나눠 이미지를 가로로 배치한다.
   그리드 아이템 내부 img 는 위 .case-detail-body__content img 의
   margin/ block 설정을 덮어써 셀을 꽉 채우도록 한다. */
.case-detail-body__content .weromy-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 기본값 — data-cols 미지정 시 */
    gap: 12px;
}

.case-detail-body__content .weromy-image-grid[data-cols="1"] { grid-template-columns: 1fr; }
.case-detail-body__content .weromy-image-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.case-detail-body__content .weromy-image-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.case-detail-body__content .weromy-image-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.case-detail-body__content .weromy-image-grid-item {
    margin: 0;
    min-width: 0;
}

.case-detail-body__content .weromy-image-grid-item img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

/* 모바일에선 3·4열도 2열로 접어 가독성 유지 */
@media (max-width: 768px) {
    .case-detail-body__content .weromy-image-grid[data-cols="3"],
    .case-detail-body__content .weromy-image-grid[data-cols="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 해시태그 — 본문 가장 아래 ─────────────────────── */
.case-detail-body__hashtags {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.case-detail-body__hashtag {
    padding: 4px 10px;
    border-radius: 8px;
    background: #EFEFEF;
    color: #797979;
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.5; /* 24px */
}

/* ── 목록으로 버튼 — 본문 가장 아래 ───────────────────
   width/height 도 rem 으로 — 모바일 루트 폰트(12px) 떨어지면 텍스트와 함께
   버튼 크기도 비례 축소 (200×60·20px → 150×45·15px). */
.case-detail-body__back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 12.5rem;    /* 200px */
    height: 3.75rem;   /* 60px */
    border: 1px solid #262626;
    border-radius: 100px;
    background: transparent;

    color: #262626;
    text-align: center;
    text-decoration: none;
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 1.25rem;     /* 20px */
    font-weight: 500;
    line-height: 1.5rem;    /* 24px */
    letter-spacing: -1px;

    transition: background 0.2s ease, color 0.2s ease;
}

.case-detail-body__back .xi-arrow-left,
.case-detail-body__back .xi-angle-left-min {
    font-size: 1.25rem; /* 텍스트와 동일 크기 */
    line-height: 1;
}

.case-detail-body__back:hover,
.case-detail-body__back:focus-visible {
    background: #262626;
    color: #fff;
}

/* ── 본문 섹션 반응형 ──────────────────────────────── */
@media (max-width: 1440px) {
    .case-detail-body {
        padding: 60px 0 100px;
    }

    .case-detail-body__inner {
        gap: 40px;
    }

    .case-detail-body__title {
        font-size: 1.5rem; /* 24px */
        line-height: 1.4;
    }
}

@media (max-width: 768px) {
    .case-detail-body {
        padding: 40px 0 80px;
    }

    .case-detail-body__inner {
        flex-direction: column;
        gap: 32px;
    }

    .case-detail-body__info {
        flex: 0 0 auto;
        width: 100%;
    }

    .case-detail-body__logo {
        max-width: 200px;
    }

    .case-detail-body__title {
        font-size: 1.375rem;
        line-height: 1.4;
    }

    .case-detail-body__main {
        width: 100%;
        gap: 32px;
    }

    /* 모바일에선 셀 패딩을 줄여 좁은 폭에서도 내용 가독성 유지 */
    .case-detail-body__content th,
    .case-detail-body__content td {
        padding: 6px 8px;
    }
}

/* ============================================================
   더보기 섹션 — 같은 sub_category 사례 (현재 사례 제외, 최대 3건)
   ▸ 카드 그리드/카드 본체(.use-case-board__list / __card) 자체 스타일은
     common.css 의 "Use Case Board Card" 섹션에 있음 — 보드 페이지와 공유.
     이 파일에는 헤더(제목) + 섹션 래퍼 여백만 정의.
   ============================================================ */
.use-case-board__more {
    padding: 6vw 0;
    background: #FFFAF6;
}

.use-case-board__more-head {
    margin-bottom: 48px;
}

.use-case-board__more-title {
    margin: 0;
    color: #262626;
    font-family: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -1px;
    word-break: keep-all;
}

/* ── 더보기 섹션 반응형 ────────────────────────────── */
@media (max-width: 1440px) {
    .use-case-board__more-head {
        margin-bottom: 36px;
    }

    .use-case-board__more-title {
        font-size: 1.875rem; /* 30px */
    }
}

@media (max-width: 768px) {
    .use-case-board__more {
        padding: 0 0 60px;
    }

    .use-case-board__more-head {
        margin-bottom: 24px;
    }

    .use-case-board__more-title {
        font-size: 1.5rem; /* 모바일 12px 루트 → 18px */
        letter-spacing: -0.5px;
    }
}