@charset "utf-8";
/* =============================================================================
   [AJ-31] Open API 키 신청·갱신·수정 화면 스타일

   무엇인가
     DBpia 디자인 시스템 토큰을 옮겨 키 관련 화면의 보이는 방식만 맞춥니다.
     화면에 들어가는 항목·문구는 바꾸지 않습니다 (2026-09-03 결정 — 기획 HTML 은 참고용).

   왜 범위를 좁혔는가
     기존 사이트는 sub.css 의 .form-layout · .write-style · .bbs_nor 를 모든 화면이
     함께 씁니다. 그것을 직접 고치면 게시판·회원 화면까지 같이 바뀝니다. 그래서 모든
     규칙을 .aj31-key-form 아래로만 두었습니다. 이 클래스를 붙인 화면만 달라집니다.

   불러오는 곳
     openApi/layout/layout.jsp — sub.css 다음에 놓아야 덮어쓰기가 됩니다.

   기준
     knowledge-base/00-Personal/AJ-31-DB-반영/기획/_unpacked/{화면}/design-system.css
     (경로에 별표를 쓰면 주석이 조기에 닫힙니다 — 별표 대신 중괄호로 적었습니다)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   글꼴 — Pretendard
   기존 사이트는 나눔고딕이지만 기획 시안의 크기·굵기가 전부 Pretendard 기준입니다.
   폰트 파일은 DBpia 본체와 같은 CDN 을 씁니다(별도 배치 불필요).
   font-family 는 .aj31-key-form 안에만 걸어 나머지 화면은 나눔고딕을 유지합니다.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-display: swap;
    src: local("Pretendard Bold"),
         url("https://cdn.dbpia.co.kr/static/fonts/Pretendard/Pretendard-Bold.woff2") format("woff2"),
         url("https://cdn.dbpia.co.kr/static/fonts/Pretendard/Pretendard-Bold.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-display: swap;
    src: local("Pretendard Medium"),
         url("https://cdn.dbpia.co.kr/static/fonts/Pretendard/Pretendard-Medium.woff2") format("woff2"),
         url("https://cdn.dbpia.co.kr/static/fonts/Pretendard/Pretendard-Medium.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-display: swap;
    src: local("Pretendard Regular"),
         url("https://cdn.dbpia.co.kr/static/fonts/Pretendard/Pretendard-Regular.woff2") format("woff2"),
         url("https://cdn.dbpia.co.kr/static/fonts/Pretendard/Pretendard-Regular.woff") format("woff");
}

:root {
    /* 글꼴 */
    --aj-font-sans: "Pretendard", -apple-system, BlinkMacSystemFont,
                    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

    /* 글자 */
    --aj-text-point: #C93035;
    --aj-text-heading: #111111;
    --aj-text-default: #404042;
    --aj-text-subdued: #767676;
    --aj-text-disabled: #CCCCCC;

    /* 면 */
    --aj-fill-point: #C93035;
    --aj-fill-tonal: #FFE9E9;
    --aj-fill-white: #FFFFFF;
    --aj-fill-surface-01: #FAFAFA;
    --aj-fill-surface-02: #F3F3F3;

    /* 선 */
    --aj-stroke-subtle: #E4E4E4;
    --aj-stroke-input: #CCCCCC;
    --aj-stroke-active: #C93035;

    /* 상태 */
    --aj-state-warning: #E1555D;

    /* 여백 */
    --aj-space-4: 4px;
    --aj-space-8: 8px;
    --aj-space-12: 12px;
    --aj-space-16: 16px;
    --aj-space-24: 24px;
    --aj-space-32: 32px;

    /* 모서리 */
    --aj-radius-sm: 6px;
    --aj-radius-md: 8px;
    --aj-radius-lg: 12px;

    /* 버튼 */
    --aj-btn-primary: #C93035;
    --aj-btn-primary-press: #B83436;
    --aj-btn-mono-stroke: #DEDEDE;
    --aj-btn-mono-press: #F5F5F5;
}

/* -----------------------------------------------------------------------------
   0. 바탕
   ----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   글꼴 상속 복구

   reset.css:5 가 div·ul·li·dl·dt·dd·p·input·textarea·select·h1~h4·em·address·
   fieldset·form·iframe·object·img 에 `font-family:새굴림, dotum` 을 **직접** 선언합니다.
   직접 선언은 상속을 이기므로, .aj31-key-form 에 Pretendard 를 걸어도 그 안의
   태그들은 새굴림으로 남습니다. 그래서 같은 태그들을 범위 안에서 다시 선언합니다.
   (reset.css 자체를 고치면 사이트 전체 글꼴이 바뀌므로 건드리지 않습니다.)
   ----------------------------------------------------------------------------- */
.aj31-key-form div,
.aj31-key-form ul,
.aj31-key-form ol,
.aj31-key-form li,
.aj31-key-form dl,
.aj31-key-form dt,
.aj31-key-form dd,
.aj31-key-form p,
.aj31-key-form input,
.aj31-key-form textarea,
.aj31-key-form select,
.aj31-key-form h1,
.aj31-key-form h2,
.aj31-key-form h3,
.aj31-key-form h4,
.aj31-key-form em,
.aj31-key-form address,
.aj31-key-form fieldset,
.aj31-key-form form,
.aj31-key-form iframe,
.aj31-key-form object,
.aj31-key-form img,
.aj31-key-form a,
.aj31-key-form table,
.aj31-key-form thead,
.aj31-key-form tbody,
.aj31-key-form tr,
.aj31-key-form th,
.aj31-key-form td,
.aj31-key-form span,
.aj31-key-form label,
.aj31-key-form button,
.aj31-key-form strong,
.aj31-key-form b,
.aj31-key-form caption,
.sub-contents .sub-title.aj31-key-head div,
.sub-contents .sub-title.aj31-key-head ul,
.sub-contents .sub-title.aj31-key-head ol,
.sub-contents .sub-title.aj31-key-head li,
.sub-contents .sub-title.aj31-key-head dl,
.sub-contents .sub-title.aj31-key-head dt,
.sub-contents .sub-title.aj31-key-head dd,
.sub-contents .sub-title.aj31-key-head p,
.sub-contents .sub-title.aj31-key-head input,
.sub-contents .sub-title.aj31-key-head textarea,
.sub-contents .sub-title.aj31-key-head select,
.sub-contents .sub-title.aj31-key-head h1,
.sub-contents .sub-title.aj31-key-head h2,
.sub-contents .sub-title.aj31-key-head h3,
.sub-contents .sub-title.aj31-key-head h4,
.sub-contents .sub-title.aj31-key-head em,
.sub-contents .sub-title.aj31-key-head address,
.sub-contents .sub-title.aj31-key-head fieldset,
.sub-contents .sub-title.aj31-key-head form,
.sub-contents .sub-title.aj31-key-head iframe,
.sub-contents .sub-title.aj31-key-head object,
.sub-contents .sub-title.aj31-key-head img,
.sub-contents .sub-title.aj31-key-head a,
.sub-contents .sub-title.aj31-key-head table,
.sub-contents .sub-title.aj31-key-head thead,
.sub-contents .sub-title.aj31-key-head tbody,
.sub-contents .sub-title.aj31-key-head tr,
.sub-contents .sub-title.aj31-key-head th,
.sub-contents .sub-title.aj31-key-head td,
.sub-contents .sub-title.aj31-key-head span,
.sub-contents .sub-title.aj31-key-head label,
.sub-contents .sub-title.aj31-key-head button,
.sub-contents .sub-title.aj31-key-head strong,
.sub-contents .sub-title.aj31-key-head b,
.sub-contents .sub-title.aj31-key-head caption {
    font-family: var(--aj-font-sans);
}

.aj31-key-form,
.aj31-key-form input,
.aj31-key-form select,
.aj31-key-form textarea,
.aj31-key-form button {
    font-family: var(--aj-font-sans);
}

.aj31-key-form {
    color: var(--aj-text-default);
    font-size: 14px;
    line-height: 1.6;
}

/* .contents-warp h4 가 dot_red.jpg 를 배경으로 강제합니다(sub.css). 섹션 제목은
   번호 뱃지 체계라 점 장식이 없어야 하므로 끕니다. */
.aj31-key-form h4 {
    background: none;
}

.aj31-key-form a {
    color: var(--aj-text-default);
}

/* 도움말 문단 — JSP 가 style="color:#888" 로 직접 지정한 자리를 토큰 색으로 맞춥니다 */
.aj31-key-form p[style*="color:#888"],
.aj31-key-form span[style*="color:#888"] {
    color: var(--aj-text-subdued) !important;
    font-size: 13px;
}

/* -----------------------------------------------------------------------------
   1. 안내 박스 — 제도 설명 (왼쪽 포인트 선)
   ----------------------------------------------------------------------------- */
.aj31-key-form .aj-notice {
    margin-top: var(--aj-space-16);
    padding: 14px 18px;
    background: var(--aj-fill-white);
    border: 1px solid var(--aj-stroke-subtle);
    border-left: 3px solid var(--aj-fill-point);
    border-radius: 0;
    font-size: 13px;
    line-height: 1.6;
}

.aj31-key-form .aj-notice p {
    margin: 0;
}

.aj31-key-form .aj-notice p + p {
    margin-top: var(--aj-space-8);
}

.aj31-key-form .aj-notice strong,
.aj31-key-form .aj-notice b {
    color: var(--aj-text-heading);
}

/* -----------------------------------------------------------------------------
   2. 신청 전 확인 체크리스트 — 연한 포인트 톤 카드
   ----------------------------------------------------------------------------- */
/* 바깥 상자 — 테두리·바탕 모두 톤 색이고 여백은 0 입니다(제목 띠와 흰 상자가 각자 가집니다) */
.aj31-key-form .tab-area.mt24 {
    margin-top: var(--aj-space-32);
    padding: 0 !important;
    background: var(--aj-fill-tonal) !important;
    border: 1px solid var(--aj-fill-tonal);
    border-radius: var(--aj-radius-lg);
    overflow: hidden;
}

/* 제목 — 띠 형태 */
.aj31-key-form .tab-area.mt24 > h4 {
    margin: 0;
    padding: 16px 20px;
    color: var(--aj-text-point) !important;
    font-size: 15px;
    font-weight: 700;
}

/* 안쪽 흰 상자 — 규칙·이용약관 안내·확인 체크박스를 함께 담습니다 */
.aj31-key-form .aj-checklist-body {
    margin: 0 12px 12px;
    padding: 18px 20px;
    background: var(--aj-fill-white);
    border-radius: var(--aj-radius-md);
}

.aj31-key-form .tab-area.mt24 > .aj-checklist-body > ol {
    margin: 0;
    padding: 0 !important;
    background: none !important;
    border-radius: 0;
    list-style: none;
    counter-reset: aj-rule;
}

.aj31-key-form .aj-checklist-body > ol > li {
    position: relative;
    margin: 0;
    /* 번호 최소폭 12px + 본문 간격 12px = 24px */
    padding-left: 24px;
    color: var(--aj-text-default);
    font-size: 13px;
    line-height: 1.5;
    counter-increment: aj-rule;
}

.aj31-key-form .aj-checklist-body > ol > li + li {
    margin-top: 14px;
}

.aj31-key-form .aj-checklist-body > ol > li::before {
    content: counter(aj-rule);
    position: absolute;
    left: 0;
    top: 0;
    min-width: 12px;
    color: var(--aj-text-point);
    font-weight: 700;
}

/* 그 외 사항 — 약관 안내. 기획은 회색 상자입니다 */
.aj31-key-form .aj-checklist-body > p {
    margin-top: 14px;
    padding: 11px 16px;
    background: var(--aj-fill-surface-01);
    border: 1px solid var(--aj-stroke-subtle);
    border-radius: var(--aj-radius-md);
    color: var(--aj-text-subdued);
    font-size: 12px;
}

.aj31-key-form .aj-checklist-body > p a {
    color: var(--aj-text-default);
    text-decoration: underline;
}

/* 확인 체크박스 — 흰 상자 맨 아래 */
.aj31-key-form .aj-checklist-body > p + p {
    margin-top: 16px;
    padding: 2px 0 0;
    background: none;
    border: 0 none;
    color: var(--aj-text-default);
    font-size: 13px;
}

/* -----------------------------------------------------------------------------
   3. 단계 섹션 — 흰 카드 + 번호 뱃지
   ----------------------------------------------------------------------------- */
.aj31-key-form .form-layout {
    border-top: 0 none;
    width: auto;
}

.aj31-key-form .form-layout.step-section,
.aj31-key-form .form-layout.mt24 {
    margin-top: var(--aj-space-32);
    /* 본문 여백은 카드 한 곳에서 줍니다(시안 본문 padding 6px 20px 14px).
       헤더띠는 아래에서 음수 margin 으로 카드 폭 전체까지 늘립니다. */
    padding: 6px 20px 14px;
    overflow: hidden;
    background: var(--aj-fill-white);
    border: 1px solid var(--aj-stroke-subtle);
    border-radius: var(--aj-radius-lg);
}

.aj31-key-form .form-layout > h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    /* 카드의 본문 padding(6px 20px)을 상쇄해 띠를 카드 끝까지 늘립니다 */
    margin: -6px -20px 6px;
    padding: 15px 20px;
    background: var(--aj-fill-surface-01);
    border-bottom: 1px solid var(--aj-stroke-subtle);
    color: var(--aj-text-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

/* IP 정보·개발업체 정보는 헤더띠 바로 아래에 컬럼 라벨·라디오가 붙어
   6px 로는 좁습니다. 이 두 섹션의 띠 아래 여백만 넓힙니다. */
.aj31-key-form #sec_ip > h4,
.aj31-key-form #sec_dev > h4 {
    margin-bottom: var(--aj-space-16);
}

/* 부제 — h4 안의 회색 span */
.aj31-key-form .form-layout > h4 > span[style*="color:#888"] {
    font-size: 12px;
    font-weight: 400;
}

/* 번호 뱃지 */
.aj31-key-form .step-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--aj-text-heading);
    border-radius: 50%;
    color: var(--aj-fill-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* h4 안의 「IP 추가」 같은 보조 링크 → 작은 버튼 */
.aj31-key-form .form-layout > h4 > a {
    /* 기획의 mono h36 버튼 — 높이 36px·최소폭 104px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: 104px;
    height: 36px;
    padding: 0 14px;
    background: var(--aj-fill-white);
    border: 1px solid var(--aj-btn-mono-stroke);
    border-radius: var(--aj-radius-sm);
    color: var(--aj-text-heading);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
}

.aj31-key-form .form-layout > h4 > a:hover {
    background: var(--aj-btn-mono-press);
}

/* -----------------------------------------------------------------------------
   4. 항목 줄 — 라벨 + 입력
   ----------------------------------------------------------------------------- */
.aj31-key-form .form-layout dl.write-style {
    display: flex;
    align-items: flex-start;
    margin: 0;
    border-bottom: 1px solid var(--aj-fill-surface-02);
}

.aj31-key-form .form-layout dl.write-style:last-of-type {
    border-bottom: 0 none;
}

.aj31-key-form .form-layout dl.write-style dt {
    float: none;
    width: 160px;
    padding: 14px 20px 14px 0;
    /* sub.css 의 .form-layout dt{background-color:#f8f8f8} 를 끕니다.
       기획은 라벨 칸에 바탕색이 없습니다. */
    background: none;
    flex-shrink: 0;
}

.aj31-key-form .form-layout dl.write-style dd {
    float: none;
    width: auto;
    padding: 14px 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* 라벨 글자 — .dot-black 의 앞 점은 그대로 두고 색·굵기만 맞춥니다 */
.aj31-key-form .form-layout dl.write-style dt .b {
    color: var(--aj-text-default);
    font-size: 14px;
    font-weight: 700;
}

/* dd 안의 회색 span 규칙(레거시)이 도움말 색을 덮어쓰는 것을 막습니다 */
.aj31-key-form .form-layout dl.write-style dd span {
    color: inherit;
    line-height: inherit;
}

.aj31-key-form .form-layout dl.write-style dd p {
    margin: 7px 0 0;
}

/* -----------------------------------------------------------------------------
   5. 입력 요소
   ----------------------------------------------------------------------------- */
.aj31-key-form input[type="text"],
.aj31-key-form input[type="password"],
.aj31-key-form input[type="tel"],
.aj31-key-form input[type="email"],
.aj31-key-form select,
.aj31-key-form textarea {
    padding: 0 var(--aj-space-12);
    height: 40px;
    background: var(--aj-fill-white);
    border: 1px solid var(--aj-stroke-input);
    border-radius: var(--aj-radius-sm);
    color: var(--aj-text-default);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    vertical-align: middle;
}

.aj31-key-form textarea {
    padding: var(--aj-space-12);
    height: auto;
    line-height: 1.7;
}

.aj31-key-form input[type="text"]:focus,
.aj31-key-form input[type="password"]:focus,
.aj31-key-form select:focus,
.aj31-key-form textarea:focus {
    border-color: var(--aj-stroke-active);
    outline: 0 none;
}

.aj31-key-form input::-webkit-input-placeholder,
.aj31-key-form textarea::-webkit-input-placeholder {
    color: var(--aj-text-disabled);
}

.aj31-key-form input::placeholder,
.aj31-key-form textarea::placeholder {
    color: var(--aj-text-disabled);
}

.aj31-key-form input[readonly],
.aj31-key-form input:disabled,
.aj31-key-form textarea[readonly] {
    background: var(--aj-fill-surface-02);
    color: var(--aj-text-subdued);
}

/* 체크박스·라디오 */
.aj31-key-form input[type="checkbox"],
.aj31-key-form input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    accent-color: var(--aj-fill-point);
    vertical-align: -3px;
}

.aj31-key-form input[type="checkbox"] + label,
.aj31-key-form input[type="radio"] + label {
    color: var(--aj-text-default);
    font-size: 14px;
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   6. IP 표
   ----------------------------------------------------------------------------- */
/* 기획은 표 테두리와 헤더 바탕이 없고, 컬럼 라벨만 12px 회색으로 얹힙니다.
   행 사이는 gap 12px 에 해당하도록 셀 위아래 여백 6px 를 줍니다.
   sub.css 의 .bbs_nor thead th{background:#f8f8f8} 를 여기서 끕니다. */
.aj31-key-form .bbs_nor {
    border: 0 none;
    border-radius: 0;
}

.aj31-key-form .bbs_nor thead th {
    padding: 0 16px 14px 0;
    background: none;
    border: 0 none;
    color: var(--aj-text-subdued);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

.aj31-key-form .bbs_nor tbody td {
    padding: 6px 16px 6px 0;
    background: none;
    border: 0 none;
    color: var(--aj-text-default);
    text-align: left;
    vertical-align: middle;
}

.aj31-key-form .bbs_nor tbody td:last-child,
.aj31-key-form .bbs_nor thead th:last-child {
    padding-right: 0;
}

/* 사용여부 라디오 — 기획은 14px 에 항목 간격 20px */
.aj31-key-form .bbs_nor tbody td label {
    font-size: 14px;
    white-space: nowrap;
}

.aj31-key-form .bbs_nor tbody td label.mr20 {
    margin-right: 20px;
}

/* [삭제] — 흰 바탕 + 빨간 테두리·빨간 글씨. 입력과 같은 높이(40px)로 맞춥니다. */
.aj31-key-form .btn_area a.ip-del,
.aj31-key-form .ip-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 40px;
    padding: 0 14px;
    background: var(--aj-fill-white);
    border: 1px solid var(--aj-fill-point);
    border-radius: var(--aj-radius-sm);
    color: var(--aj-text-point);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.aj31-key-form .btn_area a.ip-del:hover,
.aj31-key-form .ip-del:hover {
    background: var(--aj-fill-tonal);
}

/* 라디오 — 기획은 포인트색 원입니다 */
.aj31-key-form .bbs_nor tbody td input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0;
    accent-color: var(--aj-fill-point);
    vertical-align: middle;
}

.aj31-key-form .bbs_nor tbody td label {
    vertical-align: middle;
}

/* -----------------------------------------------------------------------------
   7. 동의 사항
   ----------------------------------------------------------------------------- */
.aj31-key-form .form-layout > div[style*="border:1px solid #ddd"] {
    /* 전문(.aj-agree-body)이 상자 끝까지 닿아야 하므로 padding 은 0 이고,
       헤더줄(> p)과 전문이 각자 여백을 갖습니다. */
    margin: 16px 0 4px;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--aj-stroke-subtle) !important;
    border-radius: var(--aj-radius-md);
    background: var(--aj-fill-white);
}

/* 헤더줄 — 체크박스·라벨 + 우측 「내용 보기」 */
.aj31-key-form .form-layout > div[style*="border:1px solid #ddd"] > p {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    font-size: 13px;
    font-weight: 700;
}

/* 「내용 보기」 / 「접기」 */
.aj31-key-form .aj-agree-toggle {
    margin-left: auto;
    color: var(--aj-text-subdued);
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
    flex-shrink: 0;
}

/* 동의 전문 */
.aj31-key-form .aj-agree-body {
    padding: 14px 16px 16px;
    background: var(--aj-fill-surface-01);
    border-top: 1px solid var(--aj-stroke-subtle);
}

.aj31-key-form .aj-agree-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aj31-key-form .aj-agree-body li {
    position: relative;
    padding-left: 12px;
    color: var(--aj-text-default);
    font-size: 12px;
    line-height: 1.7;
}

.aj31-key-form .aj-agree-body li + li {
    margin-top: 6px;
}

.aj31-key-form .aj-agree-body li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 3px;
    height: 3px;
    background: var(--aj-text-disabled);
    border-radius: 50%;
}

.aj31-key-form .form-layout > div[style*="border:1px solid #ddd"] > p {
    margin: 0;
}

.aj31-key-form .form-layout > div[style*="border:1px solid #ddd"] > p + p {
    padding-top: var(--aj-space-12);
    border-top: 1px solid var(--aj-stroke-subtle);
}

/* 동의 항목의 설명 — 기획은 항목명(13px/700)과 설명(12px 회색)을 나눕니다 */
.aj31-key-form .aj-agree-desc {
    color: var(--aj-text-subdued);
    font-size: 12px;
    font-weight: 400;
}

/* 전체 동의 줄만 굵게 */
.aj31-key-form .form-layout > div[style*="border:1px solid #ddd"] > p:first-child label {
    font-weight: 700;
}

.aj31-key-form .form-layout > div[style*="border:1px solid #ddd"] label {
    color: var(--aj-text-heading);
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   8. 제출 영역
   ----------------------------------------------------------------------------- */
.aj31-key-form .text-center.ma2410 {
    margin: var(--aj-space-32) 0 var(--aj-space-32);
    padding: var(--aj-space-24);
    background: var(--aj-fill-white);
    border-radius: var(--aj-radius-lg);
    text-align: center;
}

.aj31-key-form .text-center.ma2410 > p {
    margin: 0;
}

.aj31-key-form .text-center.ma2410 > p + p {
    margin-top: var(--aj-space-16);
}

/* 취소 / 제출 — a 태그를 버튼 모양으로 */
.aj31-key-form .text-center.ma2410 a {
    display: inline-block;
    min-width: 110px;
    padding: 0 22px;
    height: 48px;
    line-height: 46px;
    border-radius: var(--aj-radius-md);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

/* 취소 — 흰 버튼 */
.aj31-key-form .text-center.ma2410 a.mr06 {
    margin-right: var(--aj-space-12);
    background: var(--aj-fill-white);
    border: 1px solid var(--aj-btn-mono-stroke);
    color: var(--aj-text-default);
}

.aj31-key-form .text-center.ma2410 a.mr06:hover {
    background: var(--aj-btn-mono-press);
}

/* 제출 — 포인트 버튼 */
.aj31-key-form .text-center.ma2410 a#btnSubmit,
.aj31-key-form .text-center.ma2410 a#btnRenewSubmit,
.aj31-key-form .text-center.ma2410 a#btnModifySubmit {
    background: var(--aj-btn-primary);
    border: 1px solid var(--aj-btn-primary);
    color: var(--aj-fill-white);
}

.aj31-key-form .text-center.ma2410 a#btnSubmit:hover,
.aj31-key-form .text-center.ma2410 a#btnRenewSubmit:hover,
.aj31-key-form .text-center.ma2410 a#btnModifySubmit:hover {
    background: var(--aj-btn-primary-press);
    border-color: var(--aj-btn-primary-press);
}

/* 제출 불가 안내 — common.css 의 .dot-red-fix 는 dot_red.jpg 를 배경으로 왼쪽 끝
   0 위치에 고정합니다. text-align:center 영역에서는 문구가 가운데로 가는데 점만
   왼쪽에 남아 멀어집니다. 점을 가상요소로 바꿔 문구에 붙였습니다. */
.aj31-key-form .text-center.ma2410 .dot-red-fix {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    padding-left: 0;
    color: var(--aj-state-warning);
    font-size: 13px;
}

.aj31-key-form .text-center.ma2410 .dot-red-fix::before {
    content: "";
    width: 4px;
    height: 4px;
    background: var(--aj-fill-point);
    border-radius: 50%;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   본문 폭

   sub.css:21 은 .sub-warp .sub-contents 를 740px 로 둡니다. 컨테이너(.canvas-warp)가
   980px 이고 좌측 메뉴가 180px + margin 18px = 198px 이므로 본문에 쓸 수 있는 최대는
   782px 입니다. 42px 이 남고 있었습니다.
   이 클래스는 sub-contents 를 쓰는 29개 화면 중 키 화면 4개에만 붙습니다.
   ----------------------------------------------------------------------------- */
.sub-warp .sub-contents.aj31-key-contents {
    width: 782px;
}

/* -----------------------------------------------------------------------------
   11. 페이지 제목 — 기획은 24px/700 검정, 우측에 필수 입력 안내

   이 영역은 .aj31-key-form 밖(.sub-contents > .sub-title)에 있어 범위 클래스가
   닿지 않습니다. 그래서 JSP 의 그 div 에 .aj31-key-head 를 붙여 여기서만 잡습니다.
   태그는 h3 그대로 둡니다 — 사이트 전체가 h3 체계라 한 화면만 h1 로 바꾸면
   문서 구조가 어긋납니다. 보이는 크기만 맞췄습니다.
   ----------------------------------------------------------------------------- */
/* sub.css 의 .sub-contents .title-bar(클래스 2개)를 이기려면 같은 깊이가 필요합니다.
   .aj31-key-head 단독으로는 특이도가 낮아 밑줄 배경이 남습니다. */
.sub-contents .sub-title.aj31-key-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--aj-space-16);
    margin-top: var(--aj-space-12);
    /* .title-bar 의 bg_title.gif 밑줄 배경 제거 */
    background: none;
}

/* float clearfix 용 :after — flex 로 바꿨으니 필요 없고, 빈 블록이 여백만 만듭니다 */
.sub-contents .sub-title.aj31-key-head:after {
    content: none;
    display: none;
}

.aj31-key-head > h3.title-left {
    float: none;
    max-width: none;
    margin: 0;
    padding: 0;
    color: var(--aj-text-heading);
    font-family: var(--aj-font-sans);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}

.aj31-key-head .aj31-key-req {
    color: var(--aj-text-subdued);
    font-family: var(--aj-font-sans);
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.aj31-key-head .aj31-key-req em {
    color: var(--aj-text-point);
    font-style: normal;
}

/* -----------------------------------------------------------------------------
   9. 좁은 화면 — 라벨을 위로 올립니다
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 860px) {
    .aj31-key-form .form-layout dl.write-style {
        display: block;
    }

    .aj31-key-form .form-layout dl.write-style dt,
    .aj31-key-form .form-layout dl.write-style dd {
        width: auto;
        padding: var(--aj-space-8) 0;
    }

    .aj31-key-form input[type="text"],
    .aj31-key-form textarea {
        max-width: 100%;
    }
}

/* =============================================================================
   10. 기획 HTML 대조 보정 (2026-09-09)

   기획 시안(`기획/DBpia Open API 키 갱신 신청.html`)을 브라우저에 띄워
   계산된 값을 그대로 읽어 맞췄습니다. 눈대중이 아니라 실측값입니다.
   ============================================================================= */

/* 10.1 만료 임박 안내 — 연분홍 카드 */
/* 만료 임박 안내 — 기획: 테두리·바탕 모두 톤 색 · 모서리 12px · 16px 18px · gap 6px
   인라인 style(background:#fdf4f5)은 JSP 에서 걷어내고 이 클래스로 옮겼습니다. */
.aj31-key-form .aj-expire-notice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--aj-space-16);
    padding: 16px 18px;
    background: var(--aj-fill-tonal);              /* #FFE9E9 */
    border: 1px solid var(--aj-fill-tonal);
    border-radius: var(--aj-radius-lg);            /* 12px */
    font-size: 13px;
    line-height: 1.6;
}

.aj31-key-form .aj-expire-notice > p {
    margin: 0;
}

.aj31-key-form .aj-expire-notice > p.b {
    color: var(--aj-text-point);
    font-size: 15px;
    font-weight: 700;
}

/* 읽기 전용 영역과 입력 영역의 경계 — 기획의 2px 검정선 */
.aj31-key-form .aj-section-rule {
    height: 2px;
    margin: var(--aj-space-32) 0 0;
    background: var(--aj-text-heading);
}

/* 구획 머리글 — 제목과 설명을 한 줄에서 좌우로 벌립니다(기획은 세로선 없음) */
.aj31-key-form .aj-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--aj-space-16);
    margin-top: var(--aj-space-16);
}

.aj31-key-form .aj-section-head > p {
    margin: 0;
}

.aj31-key-form .aj-section-head > p.b {
    color: var(--aj-text-heading);
    font-size: 15px;
    font-weight: 700;
}

.aj31-key-form .aj-section-head > p:last-child {
    color: var(--aj-text-subdued);
    font-size: 12px;
    text-align: right;
}

/* 10.3 항목 라벨 — 기획은 13px·#111 */
.aj31-key-form .form-layout dl.write-style dt .b {
    font-size: 13px;
    color: var(--aj-text-heading);
}

/* 10.4 필수 표시 — 회색 점 대신 빨간 별표 */
.aj31-key-form .form-layout dl.write-style dt .dot-black {
    background: none !important;
    padding-left: 0 !important;
}

.aj31-key-form .form-layout dl.write-style dt .dot-black::after {
    content: ' *';
    color: var(--aj-text-point);
    font-size: 12px;
    font-weight: 400;
}

/* IP 정보는 dl 이 아니라 표라서 위 규칙이 닿지 않습니다.
   한 줄 이상 입력을 요구하므로 머리글에 같은 별표를 붙입니다. */
.aj31-key-form .bbs_nor thead th.aj-req::after {
    content: ' *';
    color: var(--aj-text-point);
    font-size: 12px;
    font-weight: 400;
}

/* 10.5 읽기 전용 요약표(갱신 대상 키·수정 대상 키)
       라벨은 작은 회색, 값은 굵은 검정. 기획의 12px/#767676 · 14px/700/#111 */
.aj31-key-form .aj-keyfacts {
    display: grid;
    /* minmax(0,1fr) — 긴 값이 열을 밀어내지 않게 합니다(시안과 동일) */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 24px;
    padding: 18px 0 4px;
    border: 0 none;
}

.aj31-key-form .aj-keyfacts > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.aj31-key-form .aj-keyfacts dt,
.aj31-key-form .aj-keyfacts .aj-kf-label {
    margin: 0;
    color: var(--aj-text-subdued);
    font-size: 12px;
    font-weight: 400;
}

.aj31-key-form .aj-keyfacts dd,
.aj31-key-form .aj-keyfacts .aj-kf-value {
    margin: 0;
    color: var(--aj-text-heading);
    font-size: 14px;
    font-weight: 700;
    word-break: break-all;
}

.aj31-key-form .aj-keyfacts .aj-kf-value.point {
    color: var(--aj-text-point);
}

/* 10.6 버튼 — 기획은 높이 48px·좌우 22px·모서리 8px·15px */
.aj31-key-form .text-center.ma2410 a {
    min-width: 0;
    height: 48px;
    line-height: 46px;
    padding: 0 22px;
    border-radius: var(--aj-radius-md);
    font-size: 15px;
}

.aj31-key-form .text-center.ma2410 a.mr06 {
    border-color: var(--aj-btn-mono-stroke);   /* #DEDEDE */
    color: #212121;
    font-weight: 400;
}

/* [AJ-31] 상단 드롭다운(Open API)을 글자 링크로 (2026-09-14)
   원래는 글자를 구운 106x20 이미지였습니다. 항목이 늘 때마다 이미지를 새로
   만들어야 하고 글꼴도 맞추기 어려워 네 항목을 모두 글자로 바꿨습니다.
   상자가 font-size:0 이라 여기서 글자 크기를 되살립니다.
   고객센터 드롭다운(.sz60)은 그대로 이미지입니다. */
.top-menu-warp li .top-menu-depth2 a.aj-topnav-text {
    display: block;
    height: 20px;
    padding-left: 14px;
    color: #666666;
    font-family: '돋움', Dotum, '맑은 고딕', 'Malgun Gothic', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.3px;
    text-align: left;
    white-space: nowrap;
}

.top-menu-warp li .top-menu-depth2 a.aj-topnav-text:hover {
    color: #C93035;
}

/* 항목이 4개(10px 여백 + 20px x 4)라 흰 상자를 100px 로 맞춥니다.
   원래 180px 에 background-size 65% 라 마지막 항목보다 27px 더 내려왔습니다.
   고객센터 드롭다운은 .sz60 을 그대로 씁니다. */
.top-menu-warp li .top-menu-depth2.aj-topnav-sz100 {
    height: 100px;
    background-size: 100% 100%;
}