.skin-company-b { --co-bg: radial-gradient(circle at 72% 20%, #16213A 0%, #05070D 62%); --co-panel: rgba(255, 255, 255, .06); --co-panel-border: rgba(255, 255, 255, .12); --co-text: #FFFDF7; --co-muted: #D5D8DE; --co-accent: #F2C85B; --co-radius: 16px; --co-shadow: 0 24px 65px rgba(0, 0, 0, .48); --co-control-bg: #111827; --co-control-hover: rgba(242,200,91,.22); --co-control-line: rgba(255,253,247,.26); --co-overlay: rgba(5,7,13,.8); --co-paper: rgba(244,240,231,.026); --co-spine: rgba(0,0,0,.6); --co-focus: rgba(242,200,91,.72); --co-scene: #10130f; --co-grain: rgba(255, 245, 219, .075); --co-scene-light: rgba(255, 236, 191, .055); --co-book-shadow: rgba(0, 0, 0, .68); }
.skin-company-b, .skin-company-b * { box-sizing: border-box; }
.skin-company-b { height: min(700px, 78vh); min-height: 560px; overflow: hidden; background: var(--co-bg); color: var(--co-text); font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif; box-shadow: var(--co-shadow); }
.skin-company-b .flipbook-loader { background:var(--co-bg); color:var(--co-text); }.skin-company-b .co-loader-mark { width:34px; height:34px; border:3px solid var(--co-panel-border); border-top-color:var(--co-accent); border-radius:50%; animation:co-company-b-spin .8s linear infinite; }.skin-company-b .loader-text { margin-top:14px; color:var(--co-muted); font-size:14px; }.skin-company-b .progress { width:180px; height:3px; margin-top:14px; overflow:hidden; background:var(--co-panel-border); }.skin-company-b .progress-bar { height:100%; background:var(--co-accent); }
.skin-company-b .co-shell { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; padding: clamp(22px, 3.2vw, 52px); gap: clamp(22px, 3vw, 48px); }.skin-company-b .co-panel { align-self: center; padding: clamp(24px, 3vw, 42px); background: var(--co-panel); border: 1px solid var(--co-panel-border); border-radius: var(--co-radius); box-shadow: var(--co-shadow); backdrop-filter: blur(16px); }.skin-company-b .co-brand { min-height: 26px; margin-bottom: 22px; }.skin-company-b .co-brand img { display:block; max-width:150px; max-height:42px; object-fit:contain; }.skin-company-b .co-brand-word { color:var(--co-accent); font-size:14px; font-weight:800; letter-spacing:.08em; }.skin-company-b h1 { margin:0; color:var(--co-text); font-size:clamp(25px, 2.25vw, 36px); line-height:1.2; letter-spacing:-.04em; }.skin-company-b .co-intro { margin:12px 0 29px; color:var(--co-muted); font-size:15px; line-height:1.7; }.skin-company-b .co-details { margin:0; border-top:1px solid var(--co-panel-border); }.skin-company-b .co-details div { padding:14px 0; border-bottom:1px solid var(--co-panel-border); }.skin-company-b dt { margin-bottom:5px; color:var(--co-muted); font-size:12px; font-weight:700; }.skin-company-b dd { margin:0; color:var(--co-text); font-size:14px; line-height:1.5; word-break:keep-all; }.skin-company-b dd a { color:var(--co-accent); text-decoration:none; overflow-wrap:anywhere; }.skin-company-b .co-actions { display:flex; gap:9px; margin-top:26px; }.skin-company-b .co-button { min-height:44px; display:inline-flex; flex:1; align-items:center; justify-content:center; padding:0 15px; border-radius:calc(var(--co-radius) - 7px); font-size:14px; font-weight:700; text-decoration:none; }.skin-company-b .co-call { background:var(--co-accent); color:var(--co-bg); }.skin-company-b .co-inquiry { border:1px solid var(--co-panel-border); color:var(--co-text); }
.skin-company-b .co-stage { position:relative; min-width:0; min-height:0; }.skin-company-b .co-fallback { width:min(100%, 440px); aspect-ratio:955 / 1267; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(26px, 4vw, 52px); background:linear-gradient(150deg, var(--co-bg) 0%, var(--co-text) 100%); border:1px solid var(--co-accent); border-radius:4px; box-shadow:var(--co-shadow); color:var(--co-text); margin:0 auto; }.skin-company-b .co-cover-kicker { margin-bottom:auto; color:var(--co-accent); font-size:11px; font-weight:800; letter-spacing:.16em; }.skin-company-b .co-cover-name { color:var(--co-text); font-size:clamp(28px, 3vw, 47px); font-weight:800; line-height:1.15; letter-spacing:-.05em; word-break:keep-all; }.skin-company-b .co-cover-line { width:52px; height:3px; margin:20px 0 13px; background:var(--co-accent); }.skin-company-b .co-cover-copy { color:var(--co-muted); font-size:14px; }.skin-company-b .flipbook-viewport { position:absolute; inset:0; background:transparent; }.skin-company-b.co-engine-ready .co-fallback { display:none; }
.skin-company-b .flipbook-sidebar, .skin-company-b .sidebar-header, .skin-company-b .thumb-item { background:var(--co-bg); border-color:var(--co-panel-border); color:var(--co-text); }.skin-company-b .thumb-item.active { border-color:var(--co-accent); }.skin-company-b .flipbook-controls { height:68px; padding:0 clamp(14px, 2vw, 28px); justify-content:space-between; background:var(--co-bg); border-top:1px solid var(--co-panel-border); color:var(--co-text); box-shadow:var(--co-shadow); }.skin-company-b .co-page-controls, .skin-company-b .co-control-end { display:flex; align-items:center; gap:8px; }.skin-company-b .btn-flip { width:44px; height:44px; border-radius:50%; color:var(--co-accent); font-size:25px; }.skin-company-b .btn-flip:hover { background:var(--co-panel); color:var(--co-text); transform:none; }.skin-company-b .page-num-info { color:var(--co-text); min-width:72px; }.skin-company-b .current-page { color:var(--co-accent); }.skin-company-b .co-slash { color:var(--co-muted); }
@media (max-width:767px) { .skin-company-b { height:100dvh; min-height:620px; border-radius:0; }.skin-company-b .co-shell { display:flex; flex-direction:column; overflow:auto; padding:21px 5vw 88px; gap:24px; }.skin-company-b .co-stage { order:-1; flex:0 0 auto; min-height:auto; }.skin-company-b .co-fallback { width:90vw; max-width:420px; }.skin-company-b .flipbook-viewport { aspect-ratio:955 / 1267; }.skin-company-b .co-panel { width:100%; padding:24px; }.skin-company-b .co-brand { margin-bottom:14px; }.skin-company-b h1 { font-size:25px; }.skin-company-b .co-intro { margin:9px 0 20px; font-size:14px; }.skin-company-b .co-details div { padding:11px 0; }.skin-company-b .co-actions { margin-top:20px; }.skin-company-b .flipbook-controls { position:absolute; bottom:0; height:66px; }.skin-company-b .toggle-sidebar, .skin-company-b .download-pdf { display:none; }.skin-company-b .co-control-end { margin-left:auto; } }
@media (prefers-reduced-motion:reduce) { .skin-company-b *, .skin-company-b *::before, .skin-company-b *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }
@keyframes co-company-b-spin { to { transform:rotate(360deg); } }

.skin-company-b .flipbook-sidebar { position:absolute; left:0; top:0; bottom:0; z-index:50; overflow-y:auto; } .skin-company-b .thumb-item .small { padding:4px 0; text-align:center; font-size:12px; color:var(--co-muted); } .skin-company-b .thumb-item { margin-bottom:10px; }
.skin-company-b .co-panel h1:empty { display:none; }
.skin-company-b .flipbook-sidebar:not(.open) { border-right-color:transparent; box-shadow:none; }

/* Floating, high-contrast control capsule and engine-page finish. */
.skin-company-b .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html.nolabel .preview-note { display:none; }
.skin-company-b .flipbook-controls { position:relative; z-index:80; height:76px; gap:8px; padding:0 clamp(12px,2vw,30px); background:var(--co-control-bg); border:1px solid var(--co-panel-border); backdrop-filter:blur(18px); width:calc(100% - 48px); flex:0 0 76px; margin:0 24px 16px; border-radius:20px; box-shadow:0 14px 34px rgba(0,0,0,.46); }.skin-company-b .co-control-group { display:flex; align-items:center; gap:4px; min-width:0; }.skin-company-b .co-control-group + .co-control-group::before { content:""; width:1px; height:24px; margin:0 7px 0 3px; background:var(--co-control-line); }.skin-company-b .co-page-controls { margin-left:auto; }.skin-company-b .co-control-end { margin-left:auto; }
.skin-company-b .btn-flip { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:12px; background:transparent; color:var(--co-text); font-size:14px; font-weight:700; transition:background .18s ease,color .18s ease,transform .18s ease; }.skin-company-b .btn-flip svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.skin-company-b .btn-flip:hover,.skin-company-b .btn-flip:focus-visible { background:var(--co-control-hover); color:var(--co-accent); transform:translateY(-1px); }.skin-company-b .btn-flip:focus-visible, .skin-company-b .goto-page:focus-visible, .skin-company-b .goto-btn:focus-visible, .skin-company-b .ob-overview-item:focus-visible, .skin-company-b .ob-overview-close:focus-visible { outline:3px solid var(--co-focus); outline-offset:2px; }
.skin-company-b .page-num-info { display:flex; align-items:center; justify-content:center; min-width:76px; height:44px; padding:0 10px; border-radius:12px; background:var(--co-control-hover); color:var(--co-text); font-size:13px; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }.skin-company-b .current-page { font-weight:800; }.skin-company-b .co-slash { padding:0 3px; }.skin-company-b .co-goto { display:flex; align-items:center; height:44px; overflow:hidden; border:1px solid var(--co-control-line); border-radius:12px; background:var(--co-panel); }.skin-company-b .goto-page { width:62px; height:100%; padding:0 7px; border:0; border-radius:0; background:transparent; color:var(--co-text); font:inherit; font-size:13px; text-align:center; }.skin-company-b .goto-page::placeholder { color:var(--co-muted); opacity:1; }.skin-company-b .goto-btn { align-self:stretch; min-width:40px; border:0; border-left:1px solid var(--co-control-line); background:transparent; color:var(--co-accent); font:700 12px/1 Pretendard,"Noto Sans KR",system-ui,sans-serif; cursor:pointer; }
.skin-company-b .ob-overview { padding:72px clamp(18px,4vw,56px) 38px; background:var(--co-overlay); backdrop-filter:blur(20px) saturate(1.15); }.skin-company-b .ob-overview-close { top:18px; right:22px; display:grid; place-items:center; background:var(--co-panel); color:var(--co-text); box-shadow:var(--co-shadow); font-size:27px; }.skin-company-b .ob-overview-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:clamp(14px,2vw,24px); max-width:1180px; }.skin-company-b .ob-overview-item { gap:9px; padding:10px; border:1px solid var(--co-panel-border); border-radius:14px; background:var(--co-control-bg); color:var(--co-text); box-shadow:0 12px 28px var(--co-paper); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }.skin-company-b .ob-overview-item img { border-radius:8px; background:var(--co-panel); box-shadow:0 5px 16px var(--co-paper); }.skin-company-b .ob-overview-item:hover { border-color:var(--co-accent); box-shadow:var(--co-shadow); transform:translateY(-4px); }.skin-company-b .ob-overview-item span { font-weight:700; font-variant-numeric:tabular-nums; }
@media (max-width:767px) { .skin-company-b .flipbook-controls { position:absolute; bottom:0; height:calc(68px + env(safe-area-inset-bottom)); padding:0 10px env(safe-area-inset-bottom); gap:2px; width:100%; margin:0; border-radius:0; }.skin-company-b .co-control-group { gap:1px; }.skin-company-b .co-control-group + .co-control-group::before { display:none; }.skin-company-b .co-control-start,.skin-company-b .co-zoom-controls,.skin-company-b .go-home,.skin-company-b .co-goto,.skin-company-b .download-pdf { display:none; }.skin-company-b .co-page-controls { margin-left:0; }.skin-company-b .co-view-controls { margin-left:auto; }.skin-company-b .co-control-end { margin-left:0; }.skin-company-b .page-num-info { min-width:67px; padding:0 7px; } .skin-company-b .ob-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }

/* [2026-09-20] 라이트/다크 테마 토글 아이콘은 company_a.css에서 공통 처리(.onebuild-flipbook-container 스코프). */

/* [2026-09-25] 첫 화면을 카드와 이미지의 병치가 아닌, 한 권의 책이 놓인 인쇄 장면으로 통일한다. */
.skin-company-b .co-shell {
  position:relative;
  isolation:isolate;
  background-color:var(--co-scene);
  background-image:linear-gradient(112deg, var(--co-scene-light), transparent 42%), radial-gradient(var(--co-grain) .55px, transparent .8px), repeating-linear-gradient(0deg, transparent 0 5px, var(--co-grain) 6px 7px);
  background-size:auto, 4px 4px, auto;
  box-shadow:inset 0 1px 0 var(--co-scene-light), inset 0 -28px 46px rgba(0,0,0,.28);
}
.skin-company-b .co-panel {
  position:relative;
  padding:clamp(22px,2.4vw,34px) clamp(22px,2.4vw,34px) clamp(22px,2.4vw,34px) clamp(28px,3vw,42px);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
}
.skin-company-b .co-panel::before {
  content:"";
  position:absolute;
  top:clamp(22px,2.4vw,34px);
  bottom:clamp(22px,2.4vw,34px);
  left:0;
  width:8px;
  pointer-events:none;
  background:linear-gradient(90deg, var(--co-spine), transparent 72%);
  box-shadow:1px 0 0 var(--co-scene-light), 8px 0 14px rgba(0,0,0,.32);
}
.skin-company-b .co-panel::after {
  content:"";
  position:absolute;
  top:clamp(22px,2.4vw,34px);
  left:0;
  width:1px;
  height:34px;
  background:var(--co-accent);
}
.skin-company-b .co-fallback { box-shadow:14px 24px 34px var(--co-book-shadow), 2px 4px 0 var(--co-spine); }

@media (max-width:767px) {
  .skin-company-b .co-shell { gap:18px; padding-top:18px; background-image:linear-gradient(112deg, var(--co-scene-light), transparent 46%), radial-gradient(var(--co-grain) .5px, transparent .75px); }
  .skin-company-b .co-panel { padding:24px 22px 26px 30px; }
  .skin-company-b .co-panel::before { top:24px; bottom:26px; }
  .skin-company-b .co-panel::after { top:24px; }
}

/* [실측 발견 #40] company_a.css 주석 참고(SSOT) — 모바일 .co-stage 최소 크기 복원. */
@media (max-width:767px) {
  .skin-company-b.co-engine-ready .co-stage { width:90vw; max-width:420px; aspect-ratio:955 / 1267; flex:0 0 auto; }
  .skin-company-b.co-engine-ready .co-shell { justify-content:safe center; align-items:center; }
}

/* [2026-09-25] 가로로 돌린 폰(폭≥768px인데 세로 공간이 짧음) 대응 — 툴바를 이미지 위 반투명 오버레이로 얹는다. */
@media (min-width:768px) and (max-height:640px) {
  .skin-company-b { min-height:0; }
  .skin-company-b .co-shell { padding:clamp(8px,2.4vh,20px) clamp(16px,2.4vw,32px); gap:clamp(10px,2vh,20px); }
  .skin-company-b .co-panel { padding:clamp(10px,2vh,18px) clamp(16px,2vw,24px); }
  .skin-company-b .flipbook-controls { position:absolute; left:24px; right:24px; bottom:6px; z-index:90; height:52px; margin:0; }
}

/* [2026-09-26] 하단 툴바 기본 숨김 + 이미지 탭 토글, '더보기' 토글. */
@media (max-width:767px) {
  .onebuild-flipbook-container .flipbook-controls { transition: transform .22s ease, opacity .22s ease; }
  .onebuild-flipbook-container:not(.ob-controls-shown) .flipbook-controls { transform: translateY(120%); opacity: 0; pointer-events: none; }
  .onebuild-flipbook-container .co-shell { transition: padding-bottom .22s ease; }
  .onebuild-flipbook-container:not(.ob-controls-shown) .co-shell { padding-bottom: calc(21px + env(safe-area-inset-bottom)); }
}
@media (min-width:768px) and (max-height:640px) {
  .skin-company-b .flipbook-controls { transition: transform .22s ease, opacity .22s ease; }
  .skin-company-b.co-engine-ready:not(.ob-controls-shown) .flipbook-controls { transform: translateY(120%); opacity: 0; pointer-events: none; }
  .skin-company-b .co-nav-arrow { width:26px; height:72px; margin-top:-36px; border-radius:13px; }
  .skin-company-b .co-nav-prev { left:-30px; }
  .skin-company-b .co-nav-next { right:-30px; }
}

.skin-company-b .co-more-controls { display: none; }
@media (max-width:767px) {
  .skin-company-b .co-more-controls { display: flex; margin-left: 4px; }
  .skin-company-b .toggle-more svg { transition: transform .2s ease; }
  .skin-company-b .toggle-more[aria-expanded=true] svg { transform: rotate(90deg); }
  .skin-company-b .flipbook-controls.ob-more-expanded { flex-wrap: wrap; height: auto; min-height: calc(68px + env(safe-area-inset-bottom)); row-gap: 4px; align-content: center; }
  .skin-company-b .flipbook-controls.ob-more-expanded .co-control-start,
  .skin-company-b .flipbook-controls.ob-more-expanded .co-zoom-controls { display: flex; }
  .skin-company-b .flipbook-controls.ob-more-expanded .go-home,
  .skin-company-b .flipbook-controls.ob-more-expanded .download-pdf { display: grid; }
  .skin-company-b .flipbook-controls.ob-more-expanded .co-goto { display: flex; }
}

/* [2026-09-26] company_a.css와 동일 원인·동일 대응(SSOT는 company_a.css 주석 참고) - 화살표를 세로로 긴
   알약형으로, PC도 모바일과 동일하게 통일(사용자 요청). [2026-09-26 #40] 책 틀(.ob-book-wrap) 안으로 이동. */
.skin-company-b .co-nav-arrow { position:absolute; top:50%; z-index:60; display:grid; place-items:center; width:26px; height:84px; margin-top:-42px; border:1px solid var(--co-panel-border); border-radius:13px; background:var(--co-control-bg); color:var(--co-text); box-shadow:var(--co-shadow); cursor:pointer; transition:background .18s ease, opacity .18s ease; }
.skin-company-b .co-nav-arrow svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.skin-company-b .co-nav-arrow:hover { background:var(--co-control-hover); }
.skin-company-b .co-nav-prev { left:-34px; }
.skin-company-b .co-nav-next { right:-34px; }
.skin-company-b .co-nav-arrow.is-hidden { opacity:0; pointer-events:none; }

/* [2026-09-26 #40] 넘김 엔진 turn.js — company_a.css 주석 참고(SSOT). 다크 테마 색만 다르게. */
.skin-company-b .ob-book-wrap { position:absolute; display:block; align-items:normal; justify-content:normal; padding:0; margin:0; z-index:auto; overflow:visible; }
/* 쪽 바탕은 종이 색(흰색) — 이미지가 늦게 오는 순간 스킨 바탕색(#0c0f1a)이면 검은 판이 넘어가 보였다(§8-19 후속). */
.skin-company-b .ob-page { position:absolute; top:0; background-color:#fff; background-size:100% 100%; background-repeat:no-repeat; overflow:hidden; box-shadow:inset -1px 0 0 var(--co-panel-border), inset 1px 0 0 var(--co-panel-border); }
.skin-company-b .ob-page.even { border-top-right-radius:4px; border-bottom-right-radius:4px; }
.skin-company-b .ob-page.odd { border-top-left-radius:4px; border-bottom-left-radius:4px; }
.skin-company-b .ob-page::after { content:""; position:absolute; inset:0; pointer-events:none; }
.skin-company-b .ob-page.even::after { background:linear-gradient(to right, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 7%); }
.skin-company-b .ob-page.odd::after { background:linear-gradient(to left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 7%); }
/* 종이 뒷면은 스킨 바탕색이 아니라 종이 색 — 쪽 이미지(PDF)는 다크에서도 흰 종이다. */
.skin-company-b .flip-book .p-temporal { background:#fff url(../../img/paper.jpg) repeat; background-size:256px 256px; }
.skin-company-b .ob-book-shadow { position:absolute; top:0; height:100%; box-shadow:0 0 14px 2px rgba(0,0,0,.55); border-radius:4px; pointer-events:none; }
.skin-company-b .ob-book-shadow.is-double { width:100%; left:0; }
.skin-company-b .ob-book-shadow.is-right { width:50%; left:50%; border-top-left-radius:0; border-bottom-left-radius:0; }
.skin-company-b .ob-book-shadow.is-left { width:50%; left:0; border-top-right-radius:0; border-bottom-right-radius:0; }
/* [실측 발견] company_a.css 주석 참고(SSOT) — turn.js의 transform 가속이 만드는 쌓임 맥락 격리 때문에
   책 요소 자체에도 명시적 z-index가 필요하다(패널 숨김 5 < 이 값 < 패널 표시 11). */
.skin-company-b .flip-book { z-index:8; }
.skin-company-b .ob-panel-in-book { position:absolute; z-index:5; overflow-y:auto; }
@media (max-width:767px) {
  .skin-company-b.ob-turn .co-panel:not(.ob-panel-in-book) { position:static; width:100%; margin-top:18px; }
}