.skin-company-a { --co-bg: linear-gradient(135deg, #F5F7FA 0%, #E9EEF5 100%); --co-panel: #FFFFFF; --co-panel-border: #E3E8EF; --co-text: #172033; --co-muted: #68758A; --co-accent: #1E6FD9; --co-radius: 16px; --co-shadow: 0 22px 55px rgba(33, 58, 92, .16); --co-control-bg: rgba(255,255,255,.86); --co-control-hover: #EDF5FF; --co-control-line: rgba(23,32,51,.12); --co-overlay: rgba(245,247,250,.78); --co-paper: rgba(23,32,51,.035); --co-spine: rgba(23,32,51,.22); --co-focus: rgba(30,111,217,.42); --co-scene: #e7e5df; --co-grain: rgba(67, 73, 78, .075); --co-scene-light: rgba(255,255,255,.68); --co-book-shadow: rgba(37, 42, 48, .28); }
.skin-company-a, .skin-company-a * { box-sizing: border-box; }
.skin-company-a { 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-a .flipbook-loader { background: var(--co-bg); color: var(--co-text); }.skin-company-a .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-a-spin .8s linear infinite; }.skin-company-a .loader-text { margin-top:14px; color:var(--co-muted); font-size:14px; }.skin-company-a .progress { width:180px; height:3px; margin-top:14px; overflow:hidden; background:var(--co-panel-border); }.skin-company-a .progress-bar { height:100%; background:var(--co-accent); }
.skin-company-a .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-a .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); }
.skin-company-a .co-brand { min-height: 26px; margin-bottom: 22px; } .skin-company-a .co-brand img { display: block; max-width: 150px; max-height: 42px; object-fit: contain; } .skin-company-a .co-brand-word { color: var(--co-accent); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.skin-company-a h1 { margin: 0; color: var(--co-text); font-size: clamp(25px, 2.25vw, 36px); line-height: 1.2; letter-spacing: -.04em; } .skin-company-a .co-intro { margin: 12px 0 29px; color: var(--co-muted); font-size: 15px; line-height: 1.7; }
.skin-company-a .co-details { margin: 0; border-top: 1px solid var(--co-panel-border); } .skin-company-a .co-details div { padding: 14px 0; border-bottom: 1px solid var(--co-panel-border); } .skin-company-a dt { margin-bottom: 5px; color: var(--co-muted); font-size: 12px; font-weight: 700; } .skin-company-a dd { margin: 0; color: var(--co-text); font-size: 14px; line-height: 1.5; word-break: keep-all; } .skin-company-a dd a { color: var(--co-accent); text-decoration: none; overflow-wrap: anywhere; }
.skin-company-a .co-actions { display: flex; gap: 9px; margin-top: 26px; } .skin-company-a .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-a .co-call { background: var(--co-accent); color: var(--co-panel); } .skin-company-a .co-inquiry { border: 1px solid var(--co-panel-border); color: var(--co-text); }
.skin-company-a .co-stage { position: relative; min-width: 0; min-height: 0; } .skin-company-a .co-fallback { width: min(100%, 440px); aspect-ratio: 955 / 1267; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(26px, 4vw, 52px); overflow: hidden; background: linear-gradient(150deg, var(--co-panel) 0%, var(--co-accent) 48%, var(--co-text) 100%); border-radius: 4px; box-shadow: var(--co-shadow); color: var(--co-panel); margin: 0 auto; } .skin-company-a .co-cover-kicker { margin-bottom: auto; color: var(--co-panel); font-size: 11px; font-weight: 800; letter-spacing: .16em; } .skin-company-a .co-cover-name { font-size: clamp(28px, 3vw, 47px); font-weight: 800; line-height: 1.15; letter-spacing: -.05em; word-break: keep-all; } .skin-company-a .co-cover-line { width: 52px; height: 3px; margin: 20px 0 13px; background: var(--co-panel); } .skin-company-a .co-cover-copy { color: var(--co-panel); font-size: 14px; opacity: .82; }
.skin-company-a .flipbook-viewport { position: absolute; inset: 0; background: transparent; } .skin-company-a.co-engine-ready .co-fallback { display: none; }
.skin-company-a .flipbook-sidebar { background: var(--co-panel); border-color: var(--co-panel-border); } .skin-company-a .sidebar-header { background: var(--co-panel); border-color: var(--co-panel-border); color: var(--co-text); } .skin-company-a .thumb-item { background: var(--co-panel); } .skin-company-a .thumb-item.active { border-color: var(--co-accent); }
.skin-company-a .flipbook-controls { height: 68px; padding: 0 clamp(14px, 2vw, 28px); justify-content: space-between; background: var(--co-panel); border: 1px solid var(--co-panel-border); color: var(--co-text); box-shadow: var(--co-shadow); } .skin-company-a .co-page-controls, .skin-company-a .co-control-end { display: flex; align-items: center; gap: 8px; } .skin-company-a .btn-flip { width: 44px; height: 44px; border-radius: 50%; color: var(--co-text); font-size: 25px; } .skin-company-a .btn-flip:hover { background: var(--co-bg); color: var(--co-accent); transform: none; } .skin-company-a .page-num-info { color: var(--co-text); min-width: 72px; } .skin-company-a .current-page { color: var(--co-accent); } .skin-company-a .co-slash { color: var(--co-muted); }
@media (max-width: 767px) { .skin-company-a { height: 100dvh; min-height: 620px; border-radius: 0; } .skin-company-a .co-shell { display: flex; flex-direction: column; overflow: auto; padding: 21px 5vw 88px; gap: 24px; } .skin-company-a .co-stage { order: -1; flex: 0 0 auto; min-height: auto; } .skin-company-a .co-fallback { width: 90vw; max-width: 420px; } .skin-company-a .flipbook-viewport { aspect-ratio: 955 / 1267; } .skin-company-a .co-panel { width: 100%; padding: 24px; } .skin-company-a .co-brand { margin-bottom: 14px; } .skin-company-a h1 { font-size: 25px; } .skin-company-a .co-intro { margin: 9px 0 20px; font-size: 14px; } .skin-company-a .co-details div { padding: 11px 0; } .skin-company-a .co-actions { margin-top: 20px; } .skin-company-a .flipbook-controls { position: absolute; bottom: 0; height: 66px; } .skin-company-a .toggle-sidebar, .skin-company-a .download-pdf { display: none; } .skin-company-a .co-control-end { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .skin-company-a *, .skin-company-a *::before, .skin-company-a *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@keyframes co-company-a-spin { to { transform: rotate(360deg); } }

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

/* Expanded reader controls and paper frame */
.skin-company-a .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; }
.skin-company-a .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); }
.skin-company-a .co-control-group { display:flex; align-items:center; gap:4px; min-width:0; }.skin-company-a .co-control-group + .co-control-group::before { content:""; width:1px; height:24px; margin:0 7px 0 3px; background:var(--co-control-line); }.skin-company-a .co-page-controls { margin-left:auto; }.skin-company-a .co-control-end { margin-left:auto; }
.skin-company-a .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; transition:background .18s ease,color .18s ease,transform .18s ease; }.skin-company-a .btn-flip svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.skin-company-a .btn-flip:hover { background:var(--co-control-hover); color:var(--co-accent); transform:translateY(-1px); }.skin-company-a .btn-flip:focus-visible, .skin-company-a .goto-page:focus-visible, .skin-company-a .goto-btn:focus-visible, .skin-company-a .ob-overview-item:focus-visible, .skin-company-a .ob-overview-close:focus-visible { outline:3px solid var(--co-focus); outline-offset:2px; }
.skin-company-a .page-num-info { display:flex; align-items:baseline; 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; }.skin-company-a .current-page { font-weight:800; }.skin-company-a .co-slash { padding:0 3px; }.skin-company-a .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-a .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-a .goto-page::placeholder { color:var(--co-muted); opacity:1; }.skin-company-a .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-a .ob-overview { padding:72px clamp(18px,4vw,56px) 38px; background:var(--co-overlay); backdrop-filter:blur(18px) saturate(1.15); }.skin-company-a .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-a .ob-overview-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:clamp(14px,2vw,24px); max-width:1180px; }.skin-company-a .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-a .ob-overview-item img { border-radius:8px; background:var(--co-panel); box-shadow:0 5px 16px var(--co-paper); }.skin-company-a .ob-overview-item:hover { border-color:var(--co-accent); box-shadow:var(--co-shadow); transform:translateY(-4px); }.skin-company-a .ob-overview-item span { font-weight:700; font-variant-numeric:tabular-nums; }
@media (max-width:767px) { .skin-company-a .flipbook-controls { position:absolute; bottom:0; height:calc(68px + env(safe-area-inset-bottom)); padding:0 10px env(safe-area-inset-bottom); gap:2px; }.skin-company-a .co-control-group { gap:1px; }.skin-company-a .co-control-group + .co-control-group::before { display:none; }.skin-company-a .co-control-start,.skin-company-a .co-zoom-controls,.skin-company-a .go-home,.skin-company-a .co-goto,.skin-company-a .download-pdf { display:none; }.skin-company-a .co-page-controls { margin-left:0; }.skin-company-a .co-view-controls { margin-left:auto; }.skin-company-a .co-control-end { margin-left:0; }.skin-company-a .page-num-info { min-width:67px; padding:0 7px; } .skin-company-a .ob-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }

html.nolabel .preview-note { display:none; }
.skin-company-a .flipbook-controls { width:calc(100% - 48px); flex:0 0 76px; margin:0 24px 16px; border-radius:20px; }
.skin-company-a .page-num-info { align-items:center; line-height:1; white-space:nowrap; }

/* [2026-09-20] 라이트/다크 테마 토글 — 컨테이너의 skin-company-a(라이트, 기본)/-b(다크) 클래스를 교체하는 방식. 아이콘은 가려는 테마를 보여준다. */
.onebuild-flipbook-container .toggle-theme .co-ico-sun { display:none; }
.onebuild-flipbook-container .toggle-theme[aria-pressed="true"] .co-ico-moon { display:none; }
.onebuild-flipbook-container .toggle-theme[aria-pressed="true"] .co-ico-sun { display:block; }

/* [2026-09-25] 이북 첫 화면 좌측 안내 패널 — 연락처·사업자정보·사업자등록증(거래처가 이북 링크만으로 확인).
   라이트(skin-company-a)·다크(skin-company-b) 공통: 색은 두 스킨이 각자 정의한 --co-* 변수를 쓴다.
   항목이 늘어도 책 영역을 밀어내지 않도록 패널 안에서만 세로 스크롤한다. */
.onebuild-flipbook-container .co-panel { max-height:100%; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:clamp(22px,2.4vw,34px); }
.onebuild-flipbook-container .co-panel .co-brand { min-height:0; margin-bottom:16px; }
.onebuild-flipbook-container .co-panel h1 { font-size:clamp(22px,1.9vw,30px); }
.onebuild-flipbook-container .co-panel .co-intro { margin:8px 0 0; font-size:14px; line-height:1.6; }
.onebuild-flipbook-container .co-panel .co-actions { display:flex; gap:8px; margin:20px 0 0; }
.onebuild-flipbook-container .co-panel .co-button { min-height:44px; gap:7px; font-size:14px; }
.onebuild-flipbook-container .co-panel .co-button svg, .onebuild-flipbook-container .co-panel .co-doc svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.onebuild-flipbook-container .co-panel .co-call { background:var(--co-accent); color:#fff; border:1px solid var(--co-accent); }
.skin-company-b .co-panel .co-call { color:#111; }
.onebuild-flipbook-container .co-panel .co-inquiry { border:1px solid var(--co-panel-border); color:var(--co-text); background:transparent; }
.onebuild-flipbook-container .co-panel .co-button:hover { filter:brightness(1.06); }
.onebuild-flipbook-container .co-panel .co-inquiry:hover { border-color:var(--co-accent); color:var(--co-accent); }
.onebuild-flipbook-container .co-panel .co-section { margin-top:18px; }
.onebuild-flipbook-container .co-panel .co-section-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; color:var(--co-muted); font-size:12px; font-weight:800; letter-spacing:.04em; }
.onebuild-flipbook-container .co-panel .co-rows { margin:0; border-top:1px solid var(--co-panel-border); }
.onebuild-flipbook-container .co-panel .co-rows > div { display:grid; grid-template-columns:78px minmax(0,1fr); gap:10px; padding:7px 0; border-bottom:1px solid var(--co-panel-border); }
.onebuild-flipbook-container .co-panel .co-rows dt { margin:0; color:var(--co-muted); font-size:12.5px; font-weight:600; line-height:1.55; }
.onebuild-flipbook-container .co-panel .co-rows dd { margin:0; color:var(--co-text); font-size:13.5px; line-height:1.55; word-break:keep-all; overflow-wrap:anywhere; }
.onebuild-flipbook-container .co-panel .co-rows dd a { color:var(--co-accent); text-decoration:none; }
.onebuild-flipbook-container .co-panel .co-rows dd a:hover { text-decoration:underline; }
.onebuild-flipbook-container .co-panel .co-num { font-variant-numeric:tabular-nums; }
.onebuild-flipbook-container .co-panel .co-copy { padding:3px 9px; border:1px solid var(--co-panel-border); border-radius:999px; background:transparent; color:var(--co-muted); font-family:inherit; font-size:11.5px; font-weight:600; line-height:1.4; letter-spacing:0; cursor:pointer; }
.onebuild-flipbook-container .co-panel .co-copy:hover { border-color:var(--co-accent); color:var(--co-accent); }
.onebuild-flipbook-container .co-panel .co-copy.is-done { border-color:var(--co-accent); background:var(--co-accent); color:#fff; }
.onebuild-flipbook-container .co-panel .co-copy-inline { margin-left:8px; padding:1px 8px; vertical-align:1px; }
.onebuild-flipbook-container .co-panel .co-map { margin-left:4px; font-size:12px; font-weight:700; white-space:nowrap; }
.onebuild-flipbook-container .co-panel .co-doc { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; margin-top:8px; padding:0 14px; border:1px dashed var(--co-accent); border-radius:10px; color:var(--co-accent); font-size:14px; font-weight:700; text-decoration:none; }
.onebuild-flipbook-container .co-panel .co-doc:hover { background:var(--co-control-hover); border-style:solid; }
.onebuild-flipbook-container .co-panel a:focus-visible, .onebuild-flipbook-container .co-panel button:focus-visible { outline:3px solid var(--co-focus); outline-offset:2px; }
/* 등록된 회사 정보가 하나도 없으면 빈 카드 대신 패널 자체를 접는다 */
.onebuild-flipbook-container.co-no-panel .co-panel { display:none; }
@media (max-width:767px) {
  .onebuild-flipbook-container .co-panel { max-height:none; overflow:visible; padding:22px; }
  .onebuild-flipbook-container .co-panel .co-rows > div { grid-template-columns:74px minmax(0,1fr); }
}

/* [2026-09-25] 레퍼런스(web.eco7.net/007-guide)처럼 책 좌우 가장자리에 항상 보이는 넘김 화살표.
   [2026-09-26] PC도 모바일과 동일한 알약형으로 통일(사용자 요청).
   [2026-09-26 #40] 화살표는 이제 책 틀(.ob-book-wrap) 안으로 옮겨져 책과 함께 움직인다(engine-turn.js). */
.skin-company-a .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-a .co-nav-arrow svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.skin-company-a .co-nav-arrow:hover { background:var(--co-control-hover); }
.skin-company-a .co-nav-prev { left:-34px; }
.skin-company-a .co-nav-next { right:-34px; }
.skin-company-a .co-nav-arrow.is-hidden { opacity:0; pointer-events:none; }

/* [2026-09-25] 첫 화면을 카드와 이미지의 병치가 아닌, 한 권의 책이 놓인 인쇄 장면으로 통일한다. */
.skin-company-a .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(40,46,52,.08);
}
.skin-company-a .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-a .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(42,47,51,.07);
}
.skin-company-a .co-panel::after {
  content:"";
  position:absolute;
  top:clamp(22px,2.4vw,34px);
  left:0;
  width:1px;
  height:34px;
  background:var(--co-accent);
}
.skin-company-a .co-fallback { box-shadow:14px 24px 34px var(--co-book-shadow), 2px 4px 0 var(--co-spine); }

@media (max-width:767px) {
  .skin-company-a .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-a .co-panel { padding:24px 22px 26px 30px; }
  .skin-company-a .co-panel::before { top:24px; bottom:26px; }
  .skin-company-a .co-panel::after { top:24px; }
}

/* [실측 발견 #40] 모바일은 .co-shell이 flex-column이고 .co-stage의 유일한 자식(.flipbook-viewport)이
   position:absolute라 흐름에서 빠져 flex:0 0 auto 기준(콘텐츠 높이)이 0으로 접힌다 — engine-turn.js가
   .co-stage의 clientHeight로 책 크기를 계산하는데 그게 0이면 책도 0으로 계산된다. 엔진 상태(co-engine-ready)가
   되면 명시적 비율로 최소 크기를 준다(이전(StPageFlip) 버전에도 있던 규칙, 교체 과정에서 빠졌던 것을 복원). */
@media (max-width:767px) {
  .skin-company-a.co-engine-ready .co-stage { width:90vw; max-width:420px; aspect-ratio:955 / 1267; flex:0 0 auto; }
  /* 가로·세로 가운데 — 세로는 safe라 1쪽처럼 패널까지 넘치면 위부터(§8-13에서 넣었다가 #40 교체 때 빠졌던 것 복원·보강). */
  .skin-company-a.co-engine-ready .co-shell { justify-content:safe center; align-items:center; }
}

/* [2026-09-25] 가로로 돌린 폰(폭≥768px인데 세로 공간이 짧음) 대응 — 툴바를 이미지 위 반투명 오버레이로 얹는다.
   [2026-09-26 #40] 책 크기 계산은 이제 engine-turn.js가 무대 높이 기준으로 직접 하므로(getAutoZoomBook),
   여기서는 툴바 위치·여백만 다루고 StPageFlip 전용 크기 보정(솔로 카드·align-items:stretch 등)은 없앤다. */
@media (min-width:768px) and (max-height:640px) {
  .skin-company-a { min-height:0; }
  .skin-company-a .co-shell { padding:clamp(8px,2.4vh,20px) clamp(16px,2.4vw,32px); gap:clamp(10px,2vh,20px); }
  .skin-company-a .co-panel { padding:clamp(10px,2vh,18px) clamp(16px,2vw,24px); }
  .skin-company-a .flipbook-controls { position:absolute; left:24px; right:24px; bottom:6px; z-index:90; height:52px; margin:0; }
}

/* [2026-09-26] 위와 같은 조건(가로로 돌린 폰)에서 패널 글자 크기는 그대로였다 — 책은 무대 높이 기준으로
   작아지는데 글자는 안 줄어드니 제목이 여러 줄로 밀리고 상대적으로 커 보였다(전달.md "텍스트를 같이
   줄여야되 고정되서 이상하게 보여"). vh 기준 clamp로 세로 공간과 함께 줄인다. 스킨 무관 공통 선택자
   (.onebuild-flipbook-container .co-panel h1 등, 44행 참고)를 그대로 써서 라이트/다크 둘 다 적용된다. */
@media (min-width:768px) and (max-height:640px) {
  .onebuild-flipbook-container .co-panel .co-brand { margin-bottom:clamp(4px,1.6vh,12px); }
  .onebuild-flipbook-container .co-panel h1 { font-size:clamp(16px,3.4vh,22px); }
  .onebuild-flipbook-container .co-panel .co-intro { margin-top:clamp(2px,1vh,6px); font-size:clamp(11px,2vh,13px); line-height:1.4; }
  /* 가로 폰은 세로(패널 높이)만 짧고 가로 폭은 넉넉하니, 두 버튼을 한 줄에 욱여넣지 말고 한 줄에 하나씩(사용자 지적, 2026-09-27) — 세로 모드는 원래도 한 줄에 하나였으니 무관. */
  .onebuild-flipbook-container .co-panel .co-actions { flex-direction:column; margin-top:clamp(6px,1.6vh,14px); gap:6px; }
  /* 버튼도 여전히 커 보인다는 지적(2026-09-27) — 세로 뿐 아니라 좌우 패딩·아이콘·아이콘-글자 간격까지 함께 줄인다. */
  .onebuild-flipbook-container .co-panel .co-button { min-height:clamp(26px,5.4vh,36px); padding:0 clamp(8px,1.6vh,14px); gap:clamp(4px,1vh,7px); font-size:clamp(10px,1.6vh,12px); }
  .onebuild-flipbook-container .co-panel .co-button svg { width:clamp(13px,2.4vh,17px); height:clamp(13px,2.4vh,17px); }
  .onebuild-flipbook-container .co-panel .co-section { margin-top:clamp(6px,1.6vh,12px); }
  /* "사업자 정보"와 "전체 복사" 버튼이 같은 줄에 나란히 있어 좁은 패널에서 붐볐다(사용자 지적, 2026-09-27) — 버튼을 제목 아래 한 줄로. */
  .onebuild-flipbook-container .co-panel .co-section-title { font-size:10.5px; margin-bottom:3px; flex-direction:column; align-items:flex-start; gap:3px; }
  .onebuild-flipbook-container .co-panel .co-section-title .co-copy { align-self:center; }
  /* 라벨 78px 고정 칸 + 나머지 반쪽 칸에 값을 눌러 담아 이메일·주소 등 긴 값이 여러 줄로 접혀 세로로
     길어졌다(사용자 지적, 2026-09-27: "정보가 다 그래" — 주소만이 아니라 연락처 행 전부 같은 구조).
     라벨을 값 위로 쌓는 안은 행마다 줄이 하나씩 늘어 전체가 오히려 더 길어져서(실측 399→473px) 기각 —
     대신 라벨 칸을 실제 글자 폭만큼만(auto) 줄여 한 줄 구조는 유지한 채 값 칸만 넓힌다.
     (행마다 라벨 폭이 달라 값 칸 시작 위치가 줄마다 조금씩 어긋나지만, 이 좁은 패널에서는 감수) */
  .onebuild-flipbook-container .co-panel .co-rows > div { grid-template-columns:auto minmax(0,1fr); gap:6px; padding:clamp(2px,0.8vh,5px) 0; }
  .onebuild-flipbook-container .co-panel .co-rows dt, .onebuild-flipbook-container .co-panel .co-rows dd { font-size:11px; }
}

/* [2026-09-26] 하단 툴바를 기본 숨김 + 이미지를 탭하면 나타나는 형태로 전환(전달.md 요청) - 화면이 좁은 곳에서
   이북이 보여지는 공간을 최대로 쓰기 위함. 모바일 세로·극단적으로 짧은 가로(§8-9/§8-10 대응 구간)에만 적용하고,
   데스크톱·일반 가로는 공간이 넉넉하니 항상 그대로 보여준다(사용자 확정 - 모바일/가로만). */
@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-a .flipbook-controls { transition: transform .22s ease, opacity .22s ease; }
  .skin-company-a.co-engine-ready:not(.ob-controls-shown) .flipbook-controls { transform: translateY(120%); opacity: 0; pointer-events: none; }
  .skin-company-a .co-nav-arrow { width:26px; height:72px; margin-top:-36px; border-radius:13px; }
  .skin-company-a .co-nav-prev { left:-30px; }
  .skin-company-a .co-nav-next { right:-30px; }
}

/* [2026-09-26] 하단 툴바 '더보기' 토글 - 모바일 세로에서 이미 숨겨둔 목차/줌/홈/이동입력/다운로드 버튼을
   필요할 때만 펼쳐서 보여준다(2단계 유지 - 전달.md 요청). 가로/데스크톱은 원래 다 보이므로 버튼 자체를 숨김. */
.skin-company-a .co-more-controls { display: none; }
@media (max-width:767px) {
  .skin-company-a .co-more-controls { display: flex; margin-left: 4px; }
  .skin-company-a .toggle-more svg { transition: transform .2s ease; }
  .skin-company-a .toggle-more[aria-expanded=true] svg { transform: rotate(90deg); }
  .skin-company-a .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-a .flipbook-controls.ob-more-expanded .co-control-start,
  .skin-company-a .flipbook-controls.ob-more-expanded .co-zoom-controls { display: flex; }
  .skin-company-a .flipbook-controls.ob-more-expanded .go-home,
  .skin-company-a .flipbook-controls.ob-more-expanded .download-pdf { display: grid; }
  .skin-company-a .flipbook-controls.ob-more-expanded .co-goto { display: flex; }
}

/* [2026-09-26 #40] 넘김 엔진 turn.js — 책 틀은 항상 크기가 같고(레퍼런스와 동일 원칙), 표지·마지막장도
   별도 레이아웃 없이 같은 틀 안에서 처리한다([[작업과제]] #40, [[플랜]] "현재 플랜"). 크기(px)는
   engine-turn.js가 인라인으로 계산해 넣고(zoomTo/setSize), 여기서는 그 인라인 값을 방해하지 않는
   최소한의 구조 스타일만 둔다.
   ref style.css: .fb6-shadow(26-54), .turn-page.odd/even 그라데이션(60-115), .fb6-nav-arrow(307-332) */
/* engine.css의 .container-flip 기본 규칙(flex 중앙정렬·30px 패딩·z-index:10)은 레퍼런스에 없는 값이라 되돌린다 —
   책 틀 크기·위치는 engine-turn.js가 인라인으로 전부 계산해 넣는다(레퍼런스와 동일 원칙). */
.skin-company-a .ob-book-wrap { position:absolute; display:block; align-items:normal; justify-content:normal; padding:0; margin:0; z-index:auto; overflow:visible; }
.skin-company-a .ob-page { position:absolute; top:0; background-color:#fff; background-size:100% 100%; background-repeat:no-repeat; box-shadow:inset -1px 0 0 var(--co-panel-border), inset 1px 0 0 var(--co-panel-border); }
/* ref style.css:60-91 — 안쪽(책등 방향) 가장자리 음영, 바깥 모서리 둥글림. 사진은 JS가 background-image로
   직접 넣으므로(같은 속성이라 인라인이 이걸 덮어씀) 그라데이션은 ::after 오버레이로 분리한다. */
.skin-company-a .ob-page { overflow:hidden; }
.skin-company-a .ob-page.even { border-top-right-radius:4px; border-bottom-right-radius:4px; }
.skin-company-a .ob-page.odd { border-top-left-radius:4px; border-bottom-left-radius:4px; }
.skin-company-a .ob-page::after { content:""; position:absolute; inset:0; pointer-events:none; }
.skin-company-a .ob-page.even::after { background:linear-gradient(to right, rgba(23,32,51,.16) 0%, rgba(23,32,51,0) 7%); }
.skin-company-a .ob-page.odd::after { background:linear-gradient(to left, rgba(23,32,51,.16) 0%, rgba(23,32,51,0) 7%); }
/* 모바일 단면 모드에서 접히는 종이의 뒷면은 turn.js가 만든 빈 .p-temporal(turn.js:629)이라, 배경이 없으면 종이가 투명하게 비친다. */
/* 배경색이 아니라 종이 질감 이미지 — 브라우저 강제 다크(Whale 등)는 흰 배경색을 검게 칠하지만 사진 판정 이미지는 두기 때문(§8-19 후속 5). */
.skin-company-a .flip-book .p-temporal { background:#fff url(../../img/paper.jpg) repeat; background-size:256px 256px; }
.skin-company-a .ob-book-shadow { position:absolute; top:0; height:100%; box-shadow:0 0 10px 1px rgba(23,32,51,.28); border-radius:4px; pointer-events:none; }
.skin-company-a .ob-book-shadow.is-double { width:100%; left:0; }
.skin-company-a .ob-book-shadow.is-right { width:50%; left:50%; border-top-left-radius:0; border-bottom-left-radius:0; }
.skin-company-a .ob-book-shadow.is-left { width:50%; left:0; border-top-right-radius:0; border-bottom-right-radius:0; }
/* [실측 발견] turn.js가 가속을 위해 책 요소(.flip-book)에 transform을 걸어(라이브러리 자체 동작) 그 안의
   페이지들이 독립된 쌓임 맥락(stacking context)에 갇힌다 — 페이지 z-index(0~10)는 그 안에서만 비교되고,
   책 요소 자체는 z-index:auto라서 형제인 패널(명시적 z-index)에 항상 진다(패널이 값과 무관하게 항상 위로
   그려짐). 책 요소에도 명시적 z-index를 줘서 같은 비교 기준에 놓는다 — 패널 숨김(5) < 이 값 < 패널 표시(11). */
.skin-company-a .flip-book { z-index:8; }
.skin-company-a .ob-panel-in-book { position:absolute; z-index:5; overflow-y:auto; }
@media (max-width:767px) {
  .skin-company-a.ob-turn .co-panel:not(.ob-panel-in-book) { position:static; width:100%; margin-top:18px; }
}