@charset "utf-8";
/* =====================================================================
   GifttoBiz 게시판(자료 다운로드 · 공지) 부품 사전
   설계서: japan-biz/docs/DESIGN-doc-download.md 17.5

   여기 정의된 class 목록이 곧 "관리자가 본문에 쓸 수 있는 부품" 이다.
   codeview 로 HTML 을 직접 넣는 방식(결정 #12)이므로, 새 레이아웃이 필요해지면
   이 파일에 class 를 추가하면 된다.
   (에디터의 부품 삽입 버튼은 2026-08-18 에 제거했다 — 관리자가 HTML 을 직접 붙여넣는
    방식으로 운영이 바뀌어 버튼이 쓰이지 않았다. class 자체는 그대로 살아 있다)

   [기존 CSS 와의 충돌 회피]
   style.css 에 .btn 19건, .container 147건이 이미 있다. 두 이름은 쓰지 않는다.
   .card / .grid / .chip / .article / .a-body / .event-facts 는 충돌이 없으나,
   .card·.grid 는 이름이 너무 일반적이어서 doc- 프리픽스를 붙였다.
   본문 부품(.a-body / .a-hero / .event-facts / .article-cta / .chip)만 목업 이름을
   유지한다. 운영자가 외워야 하는 이름이라 목업·기획서와 어긋나면 안 된다.

   로드 위치: config.html 의 layout:fragment="css" 에서 게시판 화면만 불러온다.
   static/common/ 에 두면 WebMvcConfig 의 lang -> common 폴백으로 ja/ko 양쪽에서 잡힌다.
   ===================================================================== */

/* ---------------------------------------------------------------------
   디자인 토큰
   부품마다 색을 하드코딩하면 브랜드 컬러를 바꿀 수 없다. 반드시 변수를 쓴다.
   --------------------------------------------------------------------- */
.doc-page,
.doc-article {
    --brand: #00609C;
    --brand-dark: #004E80;
    --brand-soft: #E7F0F7;
    --ink: #00183C;
    --sub: #4B5262;
    --muted: #8A909E;
    --line: #E7E9EE;
    --bg-soft: #F6F7F9;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(31, 36, 48, .04), 0 8px 24px rgba(31, 36, 48, .06);
    --shadow-hover: 0 2px 6px rgba(31, 36, 48, .06), 0 16px 40px rgba(31, 36, 48, .10);
    /*
     * 사이트 본문 폭. 목업은 1120px 였지만 기존 biz 는 고정 1280px 레이아웃이다
     * (.header .inner / .footer .inner 및 본문 블록 14곳이 모두 width:1280px).
     * 1120px 로 두면 콘텐츠 열이 헤더 로고·GNB 와 푸터에 맞지 않아 헤더가 바뀐 것처럼 보인다.
     */
    --doc-maxw: 1280px;
}

.doc-page,
.doc-article {
    color: var(--ink);
    line-height: 1.7;
}

.doc-page *,
.doc-article * {
    box-sizing: border-box;
}

/* .header .inner / .footer .inner 와 같은 규칙이라야 로고·GNB·푸터와 좌우가 맞는다 */
.doc-inner {
    width: var(--doc-maxw);
    margin: 0 auto;
}

/* ---------------------------------------------------------------------
   페이지 상단 (제목 + 리드문)
   --------------------------------------------------------------------- */
/*
 * ver2 목업은 흰색 -> 회색 그라데이션 밴드 + 하단 보더였는데 걷어냈다.
 * 기존 biz 페이지(.container .down / .container .qa)에는 그런 밴드가 없어서,
 * 흰색 헤더(높이 58px) 바로 밑에 화면 전체 폭으로 회색이 깔리자 헤더에 음영이 생긴 것처럼
 * 보이고 헤더 보더(#e7e8ea)와 밴드 보더가 두 줄로 겹쳤다.
 * 여백·제목 크기도 style.css:185-187 의 .down 과 같은 값으로 맞춘다.
 */
.doc-hero {
    padding: 80px 0 0;
}

.doc-crumbs {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 14px;
}

.doc-crumbs a:hover {
    color: var(--brand);
}

/* .container .down > span 과 같은 값. font-weight 는 default.css 의 전역 600 을 따른다 */
.doc-hero h1 {
    font-size: 38px;
    letter-spacing: -1px;
    margin: 0;
}

/*
 * .container .down > p 와 같은 값. max-width 만 넓혔다.
 * 720px 에서는 자료 목록 리드문의 두 번째 문장(54자)이 한 글자 차이로 넘쳐 어색하게 끊겼다.
 * 문장 사이 개행은 메시지의 <br> 로 의도한 것이므로 그대로 둔다.
 */
.doc-hero p {
    color: var(--sub);
    font-size: 14px;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: -0.5px;
    margin-top: 30px;
    max-width: 860px;
}

/* ---------------------------------------------------------------------
   자료 목록 — 단일 카드 그리드 (ver2: 카테고리 그룹 섹션 없음)
   --------------------------------------------------------------------- */
/*
 * 리드문과 카드 그리드 사이 간격은 .down .down_wrap(50px), 하단 여백은 .down(100px)에 맞춘다.
 * .doc-hero 의 80px 과 합쳐 기존 페이지와 같은 상하 리듬이 된다.
 */
.doc-section {
    padding: 50px 0 100px;
}

.doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.doc-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: .18s;
    display: flex;
    flex-direction: column;
}

.doc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: #dfe2e9;
}

/*
 * 카드 썸네일은 표지 비율과 무관하게 같은 크기여야 그리드가 정렬된다.
 * 다만 object-fit: cover 로 채우면 잘린다 — 자동생성 표지(19장)는 항상 A4 세로라
 * 16/10 박스에서 상하 56% 가 날아가고 표지 제목이 통째로 사라졌다.
 * 그래서 contain 으로 전체를 보여주고 남는 여백은 흰 배경으로 둔다.
 * 비율을 4/3 으로 세운 것도 세로 표지의 좌우 여백을 줄이기 위해서다.
 *
 * 배경이 카드 본문과 같은 흰색이라 경계가 사라지므로 아래쪽에만 구분선을 둔다.
 */
.doc-card-thumb {
    aspect-ratio: 4 / 3;
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/*
 * 표지 · 썸네일 공통 규칙 (공지 목록의 .nt-thumb img · .nt-feature-thumb img 도 같다).
 *
 * scale-down 은 원본이 박스보다 크면 비율대로 줄이고 작으면 그대로 둔다. 원본보다 키우지
 * 않는다 — 작은 표지를 억지로 늘리면 뭉개져 보인다. contain 은 작은 것도 늘리므로 안 쓴다.
 *
 * absolute 로 크기를 확정하는 이유는 Safari 다. aspect-ratio 로 높이가 정해진 컨테이너
 * 안에서 자식의 max-height:100% 를 Safari 는 해석하지 않아, 원본이 큰 이미지가 그대로
 * 넘쳐 overflow:hidden 에 잘렸다. Chrome 은 해석해서 같은 코드로도 정상이었다.
 *
 * inset 대신 top/right/bottom/left 를 쓴다. inset 은 Safari 14.1 부터라 그 이전 버전에서는
 * 오프셋이 auto 로 남아 오히려 더 크게 어긋난다.
 */
.doc-card-thumb img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    display: block;
}

/* 표지 미등록 자료의 기본 아이콘 자리 */
.doc-card-thumb .doc-icon {
    width: 64px;
    height: 64px;
    opacity: .5;
}

.doc-card-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* 카테고리 태그 (ver2 에서 대상 라벨을 대체) */
.doc-card-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 4px 11px;
    border-radius: 999px;
}

.doc-card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.doc-card-text {
    font-size: 13px;
    color: var(--muted);
    flex: 1;
}

.doc-card-foot {
    margin-top: 8px;
}

.doc-card-dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand);
}

.doc-card-dl svg {
    width: 15px;
    height: 15px;
}

.doc-card:hover .doc-card-dl {
    color: var(--brand-dark);
}

/* 자료가 늘어 30건을 넘기면 붙일 자리 (설계서 0장 지적 2) */
.doc-more {
    margin-top: 32px;
    text-align: center;
}

/* ---------------------------------------------------------------------
   자료 상세 — 좌: 표지 + 소개문 / 우: 리드 폼(sticky)
   --------------------------------------------------------------------- */
.doc-detail {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: start;
    padding: 44px 0;
}

.doc-detail-left h1 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0;
}

.doc-eyebrow {
    display: inline-block;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

/*
 * 표지 이미지 1장 (ver2: 프리뷰 썸네일 없음)
 *
 * 높이를 420px 로 고정한다. height:auto 로 두면 좌측 열 폭 647px 기준으로
 * 가로형 404px ~ A4 세로 915px 까지 벌어져 자료마다 화면이 다르게 보인다.
 * 카드 썸네일과 같은 이유로 잘리지 않게 contain 으로 넣고 여백은 흰 배경으로 둔다.
 */
.doc-cover {
    position: relative;
    height: 420px;
    margin-top: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-cover img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* 표지 미등록. 부모가 고정 높이이므로 비율이 아니라 꽉 채운다 - 등록분과 영역이 같아야 한다 */
.doc-cover .doc-cover-empty {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #E6EEF5, #EEF2F7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
}

/* 리드 폼 */
.doc-form-card {
    position: sticky;
    top: 84px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 26px 24px;
}

.doc-form-card h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}

.doc-form-lead {
    font-size: 13px;
    color: var(--muted);
    margin: 6px 0 18px;
}

.doc-field {
    margin-bottom: 14px;
}

.doc-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--sub);
}

.doc-field label .doc-req {
    color: var(--brand);
    margin-left: 4px;
}

.doc-field input,
.doc-field select {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    transition: .15s;
    color: var(--ink);
}

/*
 * ★ default.css:34 에 `input,select,textarea,button { -webkit-appearance: none }` 이
 *   전역으로 걸려 있다. 그 결과 select 의 네이티브 화살표가 사라지고,
 *   체크박스·라디오는 아예 보이지 않게 된다.
 *   biz 의 기존 화면들이 .select.typeA:before 로 화살표를 얹고, 체크박스는
 *   check_typeA/B/C 처럼 네이티브를 숨기고 label 의 :before/:after 로 직접 그리는 이유가 이것이다.
 *
 *   여기서는 마크업을 하나 더 감싸지 않도록 배경 이미지로 화살표를 그린다.
 *   board.css 는 static/common 에 있고 그 아래에 images 가 없어 상대경로 대신 data URI 를 쓴다.
 *
 *   이 스코프에서 체크박스·라디오를 새로 쓸 일이 생기면 반드시
 *   `appearance: auto` 로 되살리거나 label 로 직접 그려야 한다. 그냥 두면 화면에 나오지 않는다.
 */
.doc-field select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A909E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}

.doc-field input:focus,
.doc-field select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.doc-field.doc-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.doc-field.doc-row2 > div {
    margin: 0;
}

/*
 * 동의 안내문. 체크박스 없이 버튼 문구로 동의를 갈음한다(설계서 16장 #14).
 * 문의 폼은 2026-08-24 부터 아래 .doc-agree 체크박스를 쓴다 - 자료 신청 폼 전용이다.
 */
.doc-consent {
    font-size: 12px;
    color: var(--muted);
    margin: 6px 0 16px;
    line-height: 1.6;
}

.doc-consent a {
    color: var(--brand);
    text-decoration: underline;
}

/*
 * 동의 체크박스 (문의 폼).
 * label 을 눌러도 켜지므로 실제 클릭 대상은 문구 전체다.
 */
.doc-agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0 16px;
}

/*
 * ★ default.css:34 의 `input,select,textarea,button { -webkit-appearance: none }` 이
 *   전역이라 체크박스가 통째로 보이지 않게 된다(테두리도 표시도 없는 13px 빈칸).
 *   여기서 네이티브 표시를 되살린다. .doc-field input 의 width:100% 는 이쪽에
 *   걸리지 않으므로(부모가 .doc-field 가 아니다) 크기만 지정하면 된다.
 */
.doc-agree input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    flex: none;
    accent-color: var(--brand);
    cursor: pointer;
}

/* .doc-field label 의 block·bold 규칙과 다른 자리다 - 본문처럼 읽혀야 한다 */
.doc-agree label {
    font-size: 13px;
    font-weight: 400;
    color: var(--sub);
    line-height: 1.6;
    margin: 0;
}

.doc-agree a {
    color: var(--brand);
    text-decoration: underline;
}

.doc-agree .doc-req {
    color: var(--brand);
    margin-left: 4px;
}

.doc-form-note {
    font-size: 11.5px;
    color: var(--muted);
    text-align: center;
    margin-top: 12px;
    line-height: 1.6;
}

/* 폼·CTA 버튼. style.css 의 .btn(19건)과 충돌하지 않도록 별도 이름을 쓴다 */
.doc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px;
    padding: 15px 26px;
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--brand);
    color: #fff;
    transition: .15s;
    text-decoration: none;
}

.doc-btn:hover {
    background: var(--brand-dark);
    color: #fff;
}

.doc-btn-block {
    width: 100%;
}

.doc-btn-ghost {
    background: #fff;
    color: var(--sub);
    border-color: var(--line);
}

.doc-btn-ghost:hover {
    background: #fff;
    border-color: var(--brand);
    color: var(--brand);
}

/* ---------------------------------------------------------------------
   다운로드 완료 (ver2: 메일 안내만. 즉시 다운로드 버튼 없음)
   --------------------------------------------------------------------- */
.doc-done {
    max-width: 620px;
    margin: 0 auto;
    padding: 70px 20px;
    text-align: center;
}

.doc-done-ic {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}

.doc-done-ic svg {
    width: 36px;
    height: 36px;
    color: var(--brand);
}

.doc-done h1 {
    font-size: 26px;
    font-weight: 800;
    margin: 0;
}

.doc-done p {
    color: var(--sub);
    font-size: 15px;
    margin-top: 14px;
}

/* 마스킹 메일 주소 한 줄 (설계서 0장 지적 1) */
.doc-done-mail {
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--sub);
}

.doc-done-mail b {
    color: var(--ink);
}

.doc-done-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =====================================================================
   공지·이벤트 목록 (2차)
   상세는 아래 본문 부품(.doc-article / .a-hero / .a-body / .chip)을 그대로 쓴다.
   목록만 새로 만든다 — 자료는 카드 그리드, 공지는 썸네일 + 텍스트 행 리스트다.
   ===================================================================== */

/* 최상단 피처드 1건. 언어별 1건만 노출된다(admin 이 보장) */
.nt-feature {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 32px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 40px;
    text-decoration: none;
    color: inherit;
    transition: .18s;
}

.nt-feature:hover {
    box-shadow: var(--shadow-hover);
    border-color: #dfe2e9;
}

.nt-feature-thumb {
    aspect-ratio: 4 / 3;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* .doc-card-thumb img 와 같은 규칙. 사유는 그쪽 주석 참고 */
.nt-feature-thumb img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    display: block;
}

.nt-feature-body {
    padding: 28px 32px 28px 0;
}

.nt-feature-body h2 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    margin: 10px 0 0;
}

.nt-feature-body p {
    font-size: 14px;
    color: var(--sub);
    line-height: 180%;
    margin-top: 12px;
}

/* 리스트 */
.nt-list {
    border-top: 1px solid var(--line);
}

.nt-item {
    display: grid;
    grid-template-columns: 200px 1fr 120px;
    gap: 24px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}

.nt-item:hover .nt-title {
    color: var(--brand);
}

.nt-thumb {
    aspect-ratio: 4 / 3;
    background: #fff;
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* .doc-card-thumb img 와 같은 규칙. 사유는 그쪽 주석 참고 */
.nt-thumb img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    display: block;
}

.nt-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 8px;
    transition: .15s;
}

/* 요약문은 2줄까지만. 목록 행 높이가 게시물마다 달라지면 리스트가 흐트러진다 */
.nt-sum {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 170%;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nt-date {
    font-size: 13px;
    color: var(--muted);
    text-align: right;
}

.nt-empty {
    text-align: center;
    padding: 60px 0;
    color: var(--muted);
}

/* 페이저. admin/svc 의 PageNavigater HTML 을 쓰지 않고 직접 그린다 */
.nt-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 40px;
}

.nt-pager a,
.nt-pager span {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    color: var(--sub);
    text-decoration: none;
    background: #fff;
}

.nt-pager a:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.nt-pager .on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 700;
}

/* =====================================================================
   ★ 본문 영역만 사이트 전역 리셋을 무효화한다
   =====================================================================
   default.css 는 사이트 전체에 강한 리셋을 건다 —
     h1~h6,p,ul,ol,li,table,td... { font-size:inherit; font-weight:600; margin:0; padding:0; border:0 }
     dl,ul,ol,menu,li { list-style:none }   a { text-decoration:none; color:#111 }
     em,i { font-style:normal }             hr { display:none }
   관리자가 붙여넣은 HTML 이 이걸 그대로 맞으면 글머리 기호·제목 크기·문단 간격·표 테두리·
   기울임·구분선이 통째로 사라진다. 부품 CSS 로 되살릴 수 있는 것은 우리가 예상한 태그뿐이고,
   임의로 붙여넣은 h1/h4~h6·blockquote·dl·code·figure 는 눌린 채로 나온다.

   all: revert 는 작성자 스타일을 버리고 브라우저 기본값으로 되돌린다.
   본문 안에서만 사이트 리셋이 사라지므로 붙여넣은 그대로 렌더된다.

   ★ 이 블록은 아래 부품 규칙(.a-hero / .event-facts / .article-cta ...)보다 반드시 앞에 와야
     한다. `.a-body *` 와 `.a-hero` 는 명시도가 같아(0,1,0) 순서로 승부가 갈린다.
     뒤로 옮기면 부품 스타일이 통째로 날아간다.

   인라인 style 은 여전히 제거된다(HtmlSanitizer, 설계서 결정 #10-A).
   원본의 색·정렬까지 살리려면 그 결정을 다시 봐야 한다.
   ===================================================================== */
.a-body,
.a-body * {
    all: revert;
}

/*
 * revert 뒤에 본문 기본값을 다시 세운다. font-family 는 body 에서 상속되므로 건드리지 않는다.
 * font-weight 는 명시한다 — 전역 리셋이 본문 글자를 600 으로 올려놨는데, 붙여넣은 HTML 은
 * 본문 400 + strong/제목 굵게를 전제로 만들어진다.
 */
.a-body {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--sub);
    letter-spacing: -0.3px;
}

/* =====================================================================
   본문 부품 — 관리자가 에디터/codeview 로 쓰는 영역
   여기 있는 class 가 운영 가이드에 그대로 실린다. 이름을 바꾸면 과거 게시물이 깨진다.
   ===================================================================== */
.doc-article {
    max-width: 760px;
    margin: 0 auto;
    padding: 44px 20px 0;
}

.doc-article > h1 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0;
}

.doc-article .a-meta {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

/* 카테고리 칩 */
.chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    display: inline-block;
}

.chip.ev {
    background: #EAF2FF;
    color: #2b62c9;
}

.chip.nt {
    background: #EFECFB;
    color: #5b46c4;
}

/* --- 부품: 상단 표지 이미지 --- */
.a-hero {
    margin: 26px 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, #E6EEF5, #E3ECF4);
}

.a-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 부품: 본문 --- */
/* .a-body 자체의 기본값은 위 revert 블록 바로 아래에서 한 번만 정의한다 */

.a-body h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin: 34px 0 10px;
}

.a-body h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 26px 0 8px;
}

.a-body p {
    margin: 18px 0;
}

.a-body ul,
.a-body ol {
    margin: 18px 0;
    padding-left: 22px;
}

.a-body li {
    margin: 6px 0;
}

.a-body a {
    color: var(--brand);
    text-decoration: underline;
}

.a-body strong {
    color: var(--ink);
}

/*
 * summernote 의 insertImage 는 원본 크기로 삽입한다.
 * 이 한 줄이 없으면 큰 이미지가 본문 폭을 넘겨 레이아웃이 깨진다.
 * 결정 #10 (A) 로 인라인 style 을 막았으므로 크기 조절은 전적으로 CSS 몫이다.
 */
.a-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 18px 0;
    border-radius: 8px;
}

.a-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 14px;
}

.a-body th,
.a-body td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
}

.a-body th {
    background: var(--bg-soft);
    color: var(--ink);
    font-weight: 700;
}

/* 표가 좁은 화면에서 본문을 밀지 않도록 감싼다 */
.a-body .table-scroll {
    overflow-x: auto;
}

/* --- 부품: 개최요강 박스 (툴바로 만들 수 없어 스니펫으로 삽입) --- */
.event-facts {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px 24px;
    margin: 26px 0;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px 16px;
}

.event-facts dt {
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
    margin: 0;
}

.event-facts dd {
    font-size: 14px;
    color: var(--ink);
    margin: 0;
}

/* --- 부품: CTA 박스 --- */
.article-cta {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    margin: 44px 0;
    color: #fff;
}

.article-cta h3 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.article-cta p {
    opacity: .9;
    font-size: 14px;
    margin: 8px 0 18px;
    color: #fff;
}

.article-cta .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px;
    padding: 15px 26px;
    background: #fff;
    color: var(--brand-dark);
    text-decoration: none;
}

.article-cta .cta-btn:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

/* ---------------------------------------------------------------------
   미리보기 배너 (미공개 게시물임을 알린다)

   sticky 로 두지 않는다. .header 가 이미 position:sticky; top:0; z-index:999 이므로
   같은 위치에 sticky 요소를 하나 더 두면 헤더와 겹쳐 붙어 헤더가 바뀐 것처럼 보인다.
   --------------------------------------------------------------------- */
.doc-preview-bar {
    background: #7a5b12;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 10px 16px;
}

/* ---------------------------------------------------------------------
   반응형은 두지 않는다

   기존 biz 는 고정 1280px 레이아웃이고 .header 에 min-width:1100px 이 걸려 있다.
   style.css 에 @media 가 사실상 없는(2건) 비반응형 사이트다.
   이 게시판만 브레이크포인트를 두면 창을 좁혔을 때 본문만 리플로우되고 헤더·푸터는
   1100px 그대로 남아 어긋나 보인다. 실제로 그 증상으로 "헤더가 바뀐 것 같다" 는 보고가 나왔다.
   사이트 전체를 반응형으로 만드는 것은 이 기능의 범위가 아니므로, 여기서는 기존 동작
   (좁은 화면에서는 가로 스크롤)을 그대로 따른다.

   ver2 기획의 "PC 3열 / 태블릿 2열 / 모바일 1열" 은 반응형 사이트를 전제한 것이라
   현재 셸에서는 성립하지 않는다. 반응형 전환은 별건으로 다뤄야 한다.
   --------------------------------------------------------------------- */

/* =========================================================================
   문의하기 (customer/qna.html)

   자료 신청 폼(.doc-form-card)은 상세 화면 우측에 붙는 sticky 사이드바지만,
   문의는 폼이 화면의 본체다. sticky 를 풀고 가운데로 모은다.
   ========================================================================= */
.doc-form-page {
    position: static;
    top: auto;
    max-width: 720px;
    margin: 0 auto;
    padding: 34px 36px;
}

/*
 * textarea 는 자료 신청 폼에 없던 요소다. input/select 와 같은 상자로 보이게 맞춘다.
 * resize 는 세로만 허용한다 - 가로로 늘리면 고정폭(1280px) 레이아웃을 밀어낸다.
 */
.doc-field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    transition: .15s;
    resize: vertical;
    min-height: 170px;
}

.doc-field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}