/* ============================================================
   KOCS 웹진 플립북 (kocs-flipbook.js 와 짝)
   - 오버레이(전체 화면), 책 주변 조작부, 페이지(종이) 안 글·그림 스타일
   - 페이지 크기·여백은 JS 가 px 로 넣고, 글자 크기는 페이지의 font-size(em) 에 비례
   ============================================================ */

/* ----- 웹진 화면의 여는 장치 ----- */
.k-wzi-cover-img[data-fb-open] { cursor: pointer; position: relative; overflow: hidden; }
.k-wzi-cover-img[data-fb-open]:focus-visible { outline: 3px solid var(--krds-primary); outline-offset: 2px; }
.k-wzi-flip-tag {
    position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 6px);
    padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .66); color: #fff;
    font-size: 12.5px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s;
}
.k-wzi-cover-img[data-fb-open]:hover .k-wzi-flip-tag,
.k-wzi-cover-img[data-fb-open]:focus-visible .k-wzi-flip-tag { opacity: 1; transform: translate(-50%, 0); }
.k-wzi-cover-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.k-wzi-cover-btns .k-wzi-archive { margin: 0; }
@media (hover: none) { .k-wzi-flip-tag { opacity: 1; transform: translate(-50%, 0); } }

/* ----- 오버레이 ----- */
.fb-overlay {
    position: fixed; inset: 0; z-index: 10000; display: none; flex-direction: column;
    background: radial-gradient(ellipse at 50% 40%, #2d3745 0%, #171c24 72%);
    color: #fff; font-family: inherit; -webkit-user-select: none; user-select: none;
}
.fb-overlay.is-open { display: flex; }
body.fb-lock { overflow: hidden; }

.fb-top, .fb-bottom {
    flex: 0 0 56px; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 0 16px; background: rgba(0, 0, 0, .28);
}
.fb-top-title { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; }
.fb-top-title strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-top-no {
    flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: var(--krds-primary, #246beb);
    font-size: 12.5px; font-weight: 700;
}
.fb-top-btns { display: flex; gap: 6px; flex-shrink: 0; }
.fb-btn {
    height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px;
    background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
.fb-btn:hover { background: rgba(255, 255, 255, .18); }
.fb-btn:disabled { opacity: .35; cursor: default; }
.fb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fb-btn-close { width: 36px; padding: 0; font-size: 16px; }
.fb-bottom { justify-content: center; position: relative; }
.fb-pageno { min-width: 96px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.fb-hint { position: absolute; right: 16px; font-size: 12px; color: rgba(255, 255, 255, .55); }

.fb-stage { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
.fb-book { position: relative; touch-action: none; flex-shrink: 0; }

/* page-flip 라이브러리가 요구하는 뼈대 스타일 (패키지에 CSS 가 따로 없어 여기에 둔다) */
.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); }
.stf__wrapper { position: relative; width: 100%; height: 100%; box-sizing: border-box; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }
.fb-end { display: block; width: 1px; height: 1px; }
.fb-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 52px; height: 104px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 44px; line-height: 1; cursor: pointer; transition: background .15s;
}
.fb-arrow:hover { background: rgba(255, 255, 255, .2); }
.fb-arrow:disabled { opacity: .2; cursor: default; }
.fb-arrow-prev { left: 18px; }
.fb-arrow-next { right: 18px; }
.fb-loading {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 12px;
    font-size: 15px; color: rgba(255, 255, 255, .8);
}
.fb-loading span {
    width: 22px; height: 22px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
    border-radius: 50%; animation: fb-spin .8s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }
.fb-overlay.is-loading .fb-loading { display: flex; }
.fb-overlay.is-loading .fb-book { visibility: hidden; }

@media (max-width: 900px) { .fb-arrow { display: none; } }
@media (max-width: 760px) {
    .fb-hint { display: none; }
    .fb-top, .fb-bottom { padding: 0 10px; }
    .fb-top-title { font-size: 13.5px; }
    .fb-btn { padding: 0 10px; font-size: 13px; }
}

/* 측정용 (화면 밖) */
.fb-measure { position: fixed; left: -100000px; top: 0; visibility: hidden; pointer-events: none; }

/* ----- 페이지(종이) ----- */
.fb-page {
    position: relative; overflow: hidden; background: #fff; color: #1f2430;
    line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.fb-page[data-side="left"] { box-shadow: inset -14px 0 24px -18px rgba(0, 0, 0, .28); }
.fb-page[data-side="right"] { box-shadow: inset 14px 0 24px -18px rgba(0, 0, 0, .28); }
.fb-pad { position: absolute; overflow: hidden; }
.fb-flow { column-fill: auto; }
.fb-flow-content > * { break-inside: auto; }

/* 쪽 번호 */
.fb-foot {
    position: absolute; bottom: 4.2%; display: flex; justify-content: space-between; align-items: baseline;
    gap: 1em; font-size: .72em; color: #8a93a2; letter-spacing: .02em;
}
.fb-page[data-side="left"] .fb-foot { flex-direction: row-reverse; }
.fb-foot-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-foot-n { font-weight: 700; color: #5c6675; }

/* 머리글(코너·제목·부제·필자) */
.fb-kicker { margin: 0 0 .5em; font-size: .8em; font-weight: 800; letter-spacing: .06em; color: var(--krds-primary, #246beb); }
.fb-art-head h3 { margin: 0 0 .45em; font-size: 1.5em; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: #141a26; break-after: avoid; }
.fb-sub { margin: 0 0 .5em; font-size: .98em; font-weight: 500; line-height: 1.5; color: var(--krds-primary-dark, #1b3a6b); }
.fb-meta { margin: 0; font-size: .8em; color: #6b7482; }
.fb-art-head { padding-bottom: .9em; margin-bottom: 1.1em; border-bottom: 1px solid #e3e6ec; break-inside: avoid; }
.fb-intro .fb-art-head h3 { font-size: 1.35em; }

/* 본문 (기사 화면 .k-view-body 와 같은 규칙으로 보이도록) */
.fb-body { font-size: 1em; white-space: pre-line; }
.fb-body p { margin: 0 0 .9em; }
.fb-body h3, .fb-body h4 {
    margin: 1.1em 0 .5em; font-size: 1.12em; font-weight: 700; line-height: 1.35;
    color: var(--krds-primary-dark, #1b3a6b); break-after: avoid;
}
.fb-body h3:first-child, .fb-body p:first-child { margin-top: 0; }
.fb-body img, .fb-body figure {
    display: block; width: 100%; height: auto; max-height: var(--fb-imgmax, 240px); object-fit: cover;
    margin: .1em 0 .9em; border-radius: 6px; break-inside: avoid;
}
.fb-body figure { width: auto; max-height: none; }
.fb-body ul, .fb-body ol { margin: 0 0 .9em; padding-left: 1.3em; }
.fb-body li { margin: 0 0 .3em; }
.fb-body blockquote { margin: 0 0 .9em; padding: .6em 1em; border-left: 3px solid var(--krds-primary, #246beb); background: #f4f6fa; }
.fb-body table { width: 100%; border-collapse: collapse; font-size: .9em; margin: 0 0 .9em; break-inside: avoid; }
.fb-body th, .fb-body td { padding: .4em .5em; border: 1px solid #dfe3ea; text-align: left; }
.fb-body a { color: var(--krds-primary, #246beb); text-decoration: underline; }
.fb-body strong { font-weight: 700; }

/* 목차 */
.fb-toc { list-style: none; margin: 0; padding: 0; }
.fb-toc-sec { margin: 1em 0 .35em; font-size: .8em; font-weight: 800; letter-spacing: .05em; color: var(--krds-primary, #246beb); break-after: avoid; }
.fb-toc-sec:first-child { margin-top: 0; }
.fb-toc a { display: flex; align-items: baseline; gap: .5em; padding: .32em 0; color: inherit; text-decoration: none; font-size: .95em; break-inside: avoid; }
.fb-toc a:hover .fb-toc-t { color: var(--krds-primary, #246beb); }
.fb-toc-t { flex: 0 1 auto; min-width: 0; }
.fb-toc-dots { flex: 1 1 1em; min-width: 1em; border-bottom: 1px dotted #b7bec9; transform: translateY(-.25em); }
.fb-toc-n { flex-shrink: 0; font-weight: 700; color: #5c6675; font-variant-numeric: tabular-nums; }

/* 표지 */
.fb-cover { background: linear-gradient(160deg, #1d3f7a 0%, #0f2448 100%); color: #fff; }
.fb-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb-cover-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 48%, rgba(5, 14, 32, .9) 100%);
}
.fb-cover-top {
    position: absolute; left: 7.5%; right: 7.5%; top: 6%; display: flex; justify-content: space-between; align-items: baseline;
    font-size: .78em; font-weight: 700; letter-spacing: .08em; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.fb-cover-top span + span { font-weight: 500; opacity: .8; letter-spacing: .14em; }
.fb-cover-body { position: absolute; left: 7.5%; right: 7.5%; bottom: 8%; display: flex; flex-direction: column; align-items: flex-start; gap: .55em; }
.fb-cover-body h2 { margin: 0; font-size: 2.15em; font-weight: 800; line-height: 1.22; letter-spacing: -.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.fb-cover-body p { margin: 0; font-size: .9em; opacity: .9; }
.fb-badge {
    display: inline-block; padding: .3em .9em; border-radius: 999px; background: var(--krds-primary, #246beb);
    font-size: .85em; font-weight: 700; letter-spacing: .02em;
}
.fb-badge-draft { background: var(--krds-point, #d6336c); }

/* 뒤표지 */
.fb-back { background: linear-gradient(160deg, #163462 0%, #0b1a35 100%); color: #fff; }
.fb-back-body {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .6em; padding: 12%; text-align: center;
}
.fb-back-body img { width: 46%; max-width: 240px; height: auto; margin-bottom: 1.2em; }
.fb-back-org { margin: 0; font-size: 1.15em; font-weight: 700; }
.fb-back-addr { margin: 0; font-size: .82em; line-height: 1.7; opacity: .82; }
.fb-back-note { margin: 2em 0 0; font-size: .78em; letter-spacing: .08em; opacity: .6; }

/* 짝수 맞춤용 빈 쪽 (라이브러리가 페이지에 display 를 직접 넣으므로 안쪽 요소로 가운데 맞춤) */
.fb-blank-mark {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.6em; font-weight: 800; letter-spacing: .3em; color: #e6e9ef;
}

/* 다크 모드: 책 주변만 어둡고 종이는 흰색 유지 */
html[data-kocs-mode="dark"] .fb-overlay { background: radial-gradient(ellipse at 50% 40%, #202630 0%, #0f1217 72%); }