/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

.heading-text h2 {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 100;
}

.text-gothic-a1-bold {
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
}

.text-gothic-a1 {
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 400;
}

.text-serif-bold {
    font-family: 'Noto Serif KR', serif;
    font-weight: 400;
    /*letter-spacing:-3px;*/
}

.text-serif {
    font-family: 'Noto Serif KR', serif;
    font-weight: 400;
}

.text-serif-en {
    font-family: 'Noto Serif KR', serif;
    font-weight: 200;
    letter-spacing: -0.5px;
}

.text-sans-bold {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.text-sans {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
}

.text-sans-light {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
}

.m-t-14 {
    margin-top: 13px !important;
}

.space-half {
    width: 100%;
    display: block;
    clear: both;
    height: 40px;
    position: relative;
}

.btn.btn-2xs {
    border: 1px solid rgba(0, 0, 0, .125);

    font-size: 9px;
    padding-left: 5px;
    padding-right: 5px;
}

.btn.btn-light2 {
    border: 1px solid rgba(0, 0, 0, .125);
}

.imgbox {
    position: relative;
}

.inbtn {
    position: absolute;
    right: 20px;
    top: 15px;
    background-color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- 책 페이지 편집(/books/:id/pages) 우측 그리드 ----
   좌우 6:6 분할, 우측 슬롯 4열(col-lg-3). 슬롯 크기 약 135×190px(xl) ~ 155×215px(xxl).
   버튼/오버레이는 이 크기를 전제로 위치·크기를 잡는다. */

/* 좌·우 패널 스크롤 영역 — 고정 768px 대신 뷰포트 높이에 연동. */
.bookpage-scroll {
    overflow-y: auto;
    /* 편집 레이아웃(mainedit)은 상단 네비게이션이 없다.
       #page-content 상하 padding 40px×2 + 제목/버튼 행 약 40px + 한 줄 푸터 약 50px ≈ 170px */
    height: calc(100vh - 170px);
    min-height: 600px;
}

/* 교환 버튼 — 찬 슬롯 중앙. */
.in-add-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    padding: 2px 8px;
    white-space: nowrap;
    z-index: 2;
}

.inbtn-expand-btn-mypage {
    position: absolute;
    right: 10px;
    bottom: 20px;
}

.inbtn-preview-close {
    position: absolute;
    right: 0;
    bottom: 530px;
}

/* 삭제(×) 버튼 — 우상단. 범용 .inbtn 값을 그리드 안에서만 축소. */
.bookpagelist-grid .inbtn {
    right: 6px;
    top: 6px;
    width: 24px;
    height: 24px;
    z-index: 2;
}

/* 확대 버튼 — 우하단. */
.inbtn-expand-btn-book {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background-color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* 추가 버튼 — 빈 슬롯 하단 중앙.
   테마의 .btn 규칙(.btn:not(.close):not(.mfp-close), 특이도 0,3,0)이 position: relative와
   margin-bottom: 6px를 걸어 절대 위치가 무시되므로, 그보다 높은 특이도(0,3,1)로 덮어쓴다. */
.bookpagelist-grid a.btn.in-add-btn-bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    z-index: 2;
}

/* 시프트(밀기/당기기) 버튼 — 선택된 페이지에만 표시. 이미지 상/하단 중앙. */
.shift-up-btn,
.shift-down-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.shift-up-btn { top: 6px; }
.shift-down-btn { bottom: 6px; }

/* 시프트 모드로 선택된 슬롯 강조 — 안쪽 보더 + 외곽 글로우 */
.shift-selected {
    outline: 3px solid #0d6efd;
    outline-offset: -2px;
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.6);
}
.shift-selected img.img-thumbnail {
    opacity: 0.92;
}

.page-no-overlay {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    font-weight: 600;
    color: #888;
    pointer-events: none;
}

/* 빈 슬롯에만 표시 — P 번호(top 60%) 바로 위에 위치. P 번호 위치는 그대로 유지. */
.empty-page-overlay {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    pointer-events: none;
    white-space: nowrap;
}

/* 고정 페이지(타이틀/판권)의 '(고정)' 라벨 — P 번호(top 60%) 아래 대칭 위치(82%).
   비어있음(empty-page-overlay)과 폰트 크기·여백을 동일하게 맞춘다. */
.fixed-page-label {
    position: absolute;
    top: 82%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    pointer-events: none;
    white-space: nowrap;
}

/* 빈 페이지(blank.png 정사각형)와 채워진 페이지(썸네일 세로형)의 종횡비가 달라
   같은 행 안에서 셀 높이가 어긋나며 행 간격이 불균일해 보이는 문제를 해결한다.
   padding-top 트릭으로 imgbox 자체에 5:7 종횡비를 강제하고 이미지를 absolute로
   imgbox를 가득 채운다. 이렇게 하면 blank.png든 썸네일이든 동일한 시각 높이가 된다. */
.bookpagelist-grid .imgbox {
    position: relative;
    height: 0;
    /* padding-top %는 컨테이너(row) 폭 기준이다. col-lg-3은 row 폭의 25%이므로
       자기 폭의 140%(5:7 비율) = row 폭의 35%. */
    /* 아래 펼침면 여백(투명 border 6px)만큼 셀 내부 폭이 줄어드므로 높이도 6px×1.4 보정. */
    padding-top: calc(35% - 8px);
    padding-bottom: 0 !important;
    overflow: visible;
    margin-bottom: 0.35rem;
}

/* 펼침면(좌·우 페이지 한 쌍) 단위 구분 — 홀수 칸은 왼쪽 페이지, 짝수 칸은 오른쪽 페이지.
   쌍의 바깥쪽에만 투명 border를 두어 쌍 안은 붙고 쌍 사이에는 12px 여백이 생긴다.
   border는 box-sizing 안쪽이라 col 폭(25%)을 깨지 않고, absolute 이미지도 border 안쪽만 채운다. */
.bookpagelist-grid .row > .imgbox:nth-child(odd) {
    border-left: 6px solid transparent;
}
.bookpagelist-grid .row > .imgbox:nth-child(even) {
    border-right: 6px solid transparent;
}

/* lg 미만에서는 col-6(2열)이므로 row 폭의 70%. */
@media (max-width: 991.98px) {
    .bookpagelist-grid .imgbox {
        padding-top: calc(70% - 8px);
    }
}

.bookpagelist-grid .imgbox img.img-thumbnail {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    margin: 0 !important;
    padding: 0 !important;
    /* 슬롯 경계가 보이되 과하지 않게 연한 회색 테두리. */
    border: 1px solid #c8c8c8 !important;
    border-radius: 2px;
}

/* ---- 글 담기 모달(/my/folders/:id) 선택 표시 ----
   테마의 .img-thumbnail 테두리만으로는 고른 글이 드러나지 않아 전용 클래스로 그린다. */
#folder-detail .folder-pick {
    position: relative;
    display: block;
}
#folder-detail .folder-pick .img-thumbnail {
    border: 2px solid transparent;
    transition: border-color .2s ease, opacity .2s ease;
}
#folder-detail .folder-pick:hover .img-thumbnail {
    border-color: #c8c8c8;
}
#folder-detail .folder-pick.selected .img-thumbnail {
    border-color: #1e1e2d;
}
#folder-detail .folder-pick.added {
    cursor: default;
}
#folder-detail .folder-pick.added .img-thumbnail {
    opacity: .35;
}
#folder-detail .folder-pick-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1e1e2d;
    color: #fff;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}
#folder-detail .folder-pick-added {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(30, 30, 45, .8);
    color: #fff;
    font-size: 11px;
}

/* ---- 폴더 썸네일(/my/folders) ----
   .image-hover-zoom 은 확대(+) 커서를 씌우는데, 폴더는 크게 보는 게 아니라
   폴더 안으로 들어가는 링크라 맞지 않는다. 보통 링크처럼 옅은 강조만 준다. */
#folder-list .folder-thumb {
    display: block;
    position: relative;
    /* 탭이 올라설 자리. .folder-tab 높이에서 겹치는 2px 을 뺀 값이다. */
    padding-top: 22px;
}
/* 폴더처럼 보이도록 카드 상단 왼쪽에 탭을 그리고 그 안에 폴더명을 넣는다.
   아래쪽 테두리를 지우고 썸네일 윗변을 2px 덮으면 탭과 몸통 사이 경계선이
   끊겨 한 덩어리로 읽힌다. 폭은 이름 길이를 따라가되 min/max 로 가둔다. */
#folder-list .folder-tab {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 45%;
    max-width: 85%;
    height: 24px;
    padding: 0 10px;
    background-color: #fff;
    border: 1px solid var(--bs-border-color, #c8c8c8);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 23px;
    color: #1e1e2d;
    /* 긴 이름이 탭을 넘기지 않도록 한 줄로 자른다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .2s ease, border-color .2s ease;
}
#folder-list .folder-thumb:hover .folder-tab {
    opacity: .75;
    border-color: #1e1e2d;
}
/* 폴더 썸네일은 글 썸네일(5:7)을 그대로 써서 목록에서 글과 구분이 되지 않았다.
   칸을 높이 절반(10:7)으로 눕혀 폴더는 한눈에 다른 것으로 읽히게 한다.
   cover 로 덮으면 표지가 상단 50%만 잘려 나오므로 contain 으로 전체를 담는다.
   세로 표지가 칸 높이에 맞고 좌우에 여백이 남는 형태다. */
#folder-list .folder-thumb .img-thumbnail {
    width: 100%;
    aspect-ratio: 10 / 7;
    object-fit: contain;
    object-position: center;
    background-color: #fff;
    transition: opacity .2s ease, border-color .2s ease;
}
#folder-list .folder-thumb:hover .img-thumbnail {
    opacity: .75;
    border-color: #1e1e2d;
}

/* ---- 카드 헤더 — 날짜 배지, 선택 체크박스, 편집/복사 아이콘 확대 ----
   내 글 목록(/my/posts)뿐 아니라 폴더 목록/상세(/my/folders)도 같은 머리줄을 쓰므로
   #post-list 로 한정하지 않고 .post-card-head 클래스로 잡는다. */
.post-card-head .badge {
    font-size: 0.85rem;
    padding: 0.35em 0.7em;
    vertical-align: middle;
}
.post-card-head .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-left: 0.4rem;
    vertical-align: middle;
}
/* Font Awesome 이 <i> 를 <svg> 로 바꾸므로 두 형태를 같이 잡는다. i 만 겨냥하면
   규칙이 조용히 죽는다. FA svg 는 height: 1em 이라 크기는 font-size 로 정해진다. */
.post-card-head a i,
.post-card-head a svg,
.post-card-head > div > i,
.post-card-head > div > svg {
    font-size: 1.25rem;
    vertical-align: middle;
}
/* 아이콘 칸은 baseline 정렬을 쓰지 않는다.
   Font Awesome 이 <i> 를 <svg class="svg-inline--fa"> 로 바꾸면서 vertical-align: -.125em 을
   얹는다. 그래서 손잡이(홑 svg)와 수정 아이콘(<a> 로 감싼 svg)이 서로 다른 기준으로 서고,
   감싼 쪽이 baseline 아래로 한 칸 내려앉는다. 칸을 flex 로 두면 그 차이가 사라진다.
   아이콘 사이 간격도 gap 으로 준다. 기존 `i + a` 인접 선택자는 i 가 svg 로 바뀌어 안 먹는다. */
.post-card-head > .col-4 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* 한 줄 개수 전환 아이콘 (6개 / 12개) — 글 목록과 폴더 상세에서 같이 쓴다. */
#post-list .post-cols-toggle,
#folder-detail .post-cols-toggle {
    display: inline-block;
    margin-right: 0.75rem;
    vertical-align: middle;
}
#post-list .post-cols-toggle a,
#folder-detail .post-cols-toggle a {
    color: #b5b5c3;
    font-size: 1.4rem;
    margin-right: 0.4rem;
}
#post-list .post-cols-toggle a.active,
#post-list .post-cols-toggle a:hover,
#folder-detail .post-cols-toggle a.active,
#folder-detail .post-cols-toggle a:hover {
    color: #1e1e2d;
}

/* 12개 모드 — 카드 폭이 절반이라 헤더를 두 줄(날짜+체크박스 / 아이콘)로 내리고 크기를 줄인다. */
#post-list .post-grid-dense .post-card-head > .col-8,
#post-list .post-grid-dense .post-card-head > .col-4,
#folder-detail .post-grid-dense .post-card-head > .col-8,
#folder-detail .post-grid-dense .post-card-head > .col-4 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
#post-list .post-grid-dense .post-card-head .badge,
#folder-detail .post-grid-dense .post-card-head .badge {
    font-size: 0.65rem;
    padding: 0.25em 0.45em;
}
#post-list .post-grid-dense .post-card-head .form-check-input,
#folder-detail .post-grid-dense .post-card-head .form-check-input {
    width: 1em;
    height: 1em;
    margin-left: 0.25rem;
}
#post-list .post-grid-dense .post-card-head a i,
#post-list .post-grid-dense .post-card-head a svg,
#folder-detail .post-grid-dense .post-card-head a i,
#folder-detail .post-grid-dense .post-card-head a svg,
/* 폴더 상세는 드래그 손잡이가 a 로 감싸이지 않은 홑 아이콘이라 따로 줄인다. */
#folder-detail .post-grid-dense .post-card-head > .col-4 > i,
#folder-detail .post-grid-dense .post-card-head > .col-4 > svg {
    font-size: 0.95rem;
}
#post-list .post-grid-dense .post-card-head > .col-4,
#folder-detail .post-grid-dense .post-card-head > .col-4 {
    gap: 0.3rem;
}

/* ---- 푸터 — 소셜 아이콘과 저작권을 한 줄로 (include/copyright.scala.html) ----
   테마 기본(min-height 80px, padding 30px, 두 줄)보다 약 70px 낮아져 편집 화면 세로 영역이 늘어난다. */
#footer .copyright-content {
    min-height: auto;
    padding: 12px 0;
}
#footer .footer-inline .social-icons {
    margin-right: 16px;
}
#footer .footer-inline .social-icons ul {
    display: flex;
}
#footer .footer-inline .social-icons li a {
    margin-bottom: 0;
}

/* 푸터를 항상 뷰포트 하단에 붙인다. 테마의 footer-sticky 클래스는 정의가 없어 실제로는 동작하지 않으므로
   #wrapper(모든 레이아웃의 루트)를 세로 flex + min-height 100vh로 만들고 푸터를 아래로 민다.
   콘텐츠가 뷰포트보다 길면 기존처럼 콘텐츠 뒤에 이어진다. */
.body-inner > #wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.body-inner > #wrapper > #footer {
    margin-top: auto;
}

/* .btn-slide 안의 Font Awesome 아이콘.
   FA 를 JS 교체 모드로 쓰고 있어 <i> 가 런타임에 <svg class="svg-inline--fa"> 로 바뀐다.
   테마의 `.btn-slide > i { position: absolute; left/top }` 규칙이 조용히 죽고, 절대 위치를
   잃은 아이콘이 overflow: hidden 인 좁은 버튼에 잘려 왼쪽 위 귀퉁이만 보인다.
   좌표는 테마의 i 규칙과 같은 값이다(style.css 의 .btn-slide 블록). */
.btn.btn-slide > svg.svg-inline--fa {
    position: absolute;
    /* 테마의 고정 좌표(left: 17px 등)를 그대로 쓰지 않는다. 그 값은 폭이 1em 인 테마
       글리프에 맞춘 것이라, fa-robot 처럼 1.25em 인 아이콘은 오른쪽으로 치우친다.
       접힌 상태에서는 버튼 크기와 아이콘 폭에 상관없이 가운데 선다. */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.8s ease 0s;
}
/* 호버로 버튼이 늘어나면 글자가 left: 28px 부터 들어오므로 아이콘은 왼쪽에 붙어야 한다.
   이때만 테마와 같은 좌표로 돌아간다. */
.btn.btn-slide:hover > svg.svg-inline--fa {
    left: 17px;
    transform: translate(0, -50%) rotate(360deg);
}
.btn.btn-slide.btn-lg:hover > svg.svg-inline--fa {
    left: 23px;
}
.btn.btn-slide.btn-sm:hover > svg.svg-inline--fa {
    left: 13px;
}
.btn.btn-slide.btn-xs:hover > svg.svg-inline--fa {
    left: 9px;
}

/* AI 에이전트 채팅 모달 (comp/aiagentmodal).
   대화 영역은 높이를 고정해 말이 쌓여도 모달이 커지지 않고 안에서 스크롤되게 한다. */
.ai-chat .modal-header {
    align-items: center;
}
.ai-chat-log {
    height: 55vh;
    overflow-y: auto;
    background-color: #fafafa;
    padding: 1rem;
}
.ai-chat-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.ai-chat-msg.is-me {
    justify-content: flex-end;
}
/* 말풍선 옆 아바타. FA svg 는 vertical-align: -.125em 을 달고 나오는데, 안에서
   inline 으로 서면 그 값이 중심을 흔든다. block 으로 두면 flex 가운데 정렬만 남는다. */
.ai-chat-avatar > svg.svg-inline--fa {
    display: block;
    vertical-align: middle;
}
.ai-chat-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.ai-chat-bubble {
    max-width: 78%;
    padding: 0.6rem 0.85rem;
    border-radius: 1rem;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    /* 입력한 줄바꿈을 그대로 보이게 하고, 띄어쓰기 없는 긴 문자열도 상자를 넘기지 않는다. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}
.ai-chat-msg.is-me .ai-chat-bubble {
    background-color: #333;
    border-color: #333;
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}
.ai-chat-msg.is-bot .ai-chat-bubble {
    border-bottom-left-radius: 0.25rem;
}
/* 답을 기다리는 동안의 점 세 개 */
.ai-chat-typing {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.ai-chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #bbb;
    animation: ai-chat-blink 1.2s infinite ease-in-out;
}
.ai-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-chat-blink {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}
/* 입력줄. modal-footer 의 기본 정렬(오른쪽 끝)을 쓰지 않는다. */
.ai-chat-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
}
.ai-chat-input {
    flex: 1 1 auto;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    border-radius: 1.25rem;
    padding: 0.5rem 0.9rem;
}
/* 전송 버튼. 테마의 `.btn:not(.close):not(.mfp-close)` 가 padding 12px 18px 과
   margin-bottom 6px 을 얹는데 그쪽 specificity(0,3,0)가 높아 클래스 하나로는 눌리지 않는다.
   그대로 두면 왼쪽 패딩이 아이콘을 오른쪽으로 민다. 선택자를 올리고 flex 로 가운데 세운다. */
.ai-chat button.btn.ai-chat-send {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-bottom: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 홈 히어로(front/harubookintrobgbook)의 책 모양 배경 frame5.png(1920x640).
   테두리 옆선은 이미지 폭의 5.7%~94.3%, 가운데 책등 선은 높이 295px 까지 내려온다.
   cover + 가운데 정렬이면 제목이 두 줄이 될 때 배경이 아래로 밀려 책등 선이 첫 줄에 걸린다.
   폭에 맞춰 위쪽에 고정해 줄 수와 상관없이 같은 자리에 그린다.
   위로 올리는 양(-5.4cqw)은 데스크톱에서 한국어 한 줄일 때의 기존 cover 배치와 같게 맞춘 값이다.
   이때 책등 선 끝은 컨테이너 폭의 약 10% 높이에 온다. */
.welcome-frame {
    position: relative;
    isolation: isolate;
    container-type: inline-size;
}
.welcome-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../images/frame5.png") no-repeat;
    background-size: 100% auto;
    background-position: center -5.4cqw;
}
/* 모바일은 p-t-120 이면 책 그림과 제목 사이가 뜬다. 책등 선 끝(폭의 약 10%) 바로 아래에서 시작한다.
   테마는 991px 이하에서 제목을 40px 로 고정해 휴대폰에서 한국어 3줄·독일어 5줄이 되므로 폭에 맞춰 줄인다. */
@media (max-width: 767.98px) {
    .welcome-frame.p-t-120 {
        padding-top: min(calc(10vw + 10px), 66px) !important;
    }
    .welcome-frame .heading-text.heading-section h2 {
        font-size: clamp(24px, 7vw, 40px);
        line-height: 1.25;
    }
    /* 테마는 767px 이하에서 .lead 를 19px/32px 로 키워 데스크톱(17.5px)보다 커진다. */
    .welcome-frame .lead {
        font-size: 15px;
        line-height: 1.6;
    }
    /* 모바일에서는 옆선이 위쪽에만 짧게 보여 90% 까지 써도 선 안쪽이다. */
    .welcome-frame .welcome-frame-text {
        max-width: 90%;
    }
}
/* 긴 제목(독일어 등)이 테두리 밖으로 넘어가지 않도록 글 영역을 80% 로 묶는다. */
.welcome-frame-text {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
/* 한국어는 낱말 단위로 줄을 바꾼다. 띄어쓰기가 없는 중국어·일본어에 keep-all 을 주면 줄이 아예 안 바뀌어 넘친다. */
.welcome-frame-text-ko {
    word-break: keep-all;
}
.welcome-frame-text h2 {
    text-wrap: balance;
}

/* 투명 헤더(data-transparent) 메뉴는 아래 히어로 사진(서점 책 상세·로그인 홈 글감 등) 위에 검은 글자로 얹혀,
   어두운·복잡한 사진에서는 묻힌다. 글감 제목(home/leadingmsg)처럼 오른쪽 아래로 1px 그림자를 넣되, 메뉴는 흰색보다 덜 튀는 밝은 회색으로 한다.
   스크롤해 흰 배경이 생긴 헤더(.sticky-active)와 흰 글자 헤더(.dark), 흰 패널로 여는 모바일 메뉴(<992px)에는 넣지 않는다. */
@media (min-width: 992px) {
    #header[data-transparent="true"]:not(.sticky-active):not(.dark) #mainMenu nav > ul > li > a,
    #header[data-transparent="true"]:not(.sticky-active):not(.dark) .header-extras a,
    #header[data-transparent="true"]:not(.sticky-active):not(.dark) .header-extras span,
    #header[data-transparent="true"]:not(.sticky-active):not(.dark) .header-extras i {
        text-shadow: 1px 1px 1px rgba(220, 220, 220, .85);
    }
}