/* [#123] 바우처 허브 — 좌측 목록(≥1000) / 위 가로 줄(700~999) / 상단 탭(<700) + 본문. 옵션 variant_layout=hub 인 이북에서만 로드된다 */
.co-hub-wrap.skin-company-a{position:fixed;inset:0;z-index:9500;height:100%;min-height:0;overflow:hidden;background:#F7F3E8;color:#191814;word-break:keep-all} /* company_a.css 의 .skin-company-a{height:min(700px,78vh)} 를 덮는다 */
.co-hub-wrap .co-hub{display:grid;grid-template-columns:300px 1fr;grid-template-rows:64px 1fr;height:100%}
.co-hub-bar{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;padding:0 28px;height:64px;background:#fff;border-bottom:1px solid #D9D3C4;align-items:center}
.co-hub-bar strong{font-size:24px;font-weight:800;letter-spacing:-.02em}.co-hub-bar span{color:#6B6759;font-size:16px}
.co-hub-rail{display:flex;flex-direction:column;gap:14px;padding:22px 16px;background:#fff;border-right:1px solid #D9D3C4;overflow-y:auto}
.co-hub-count{margin:0 8px 2px;font-size:18px;font-weight:800}
.co-hub-list{display:flex;flex-direction:column;gap:14px}
.co-hub-item{display:grid;grid-template-columns:92px 1fr;grid-template-areas:"img b" "img s" "img t";column-gap:14px;align-content:center;text-align:left;padding:14px;border:1px solid #D9D3C4;border-radius:18px;background:#fff;color:inherit;font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.co-hub-item img{grid-area:img;width:92px;aspect-ratio:955/1267;object-fit:cover;border-radius:6px;background:#E9E4D6}
.co-hub-item b{grid-area:b;font-size:20px;font-weight:800;align-self:end}.co-hub-item small{grid-area:s;color:#6B6759;font-size:14px;margin-top:4px}
.co-hub-tag{grid-area:t;justify-self:start;align-self:end;margin-top:10px;padding:5px 12px;border-radius:999px;background:#EFEBDC;font-size:13px;font-weight:700}
.co-hub-item.on{border-color:#FFC933;background:#FFF9E3}.co-hub-item.on .co-hub-tag{background:#191814;color:#fff}
.co-hub-item:hover,.co-hub-item:focus-visible{border-color:#FFC933;outline:none}
.co-hub-rail .co-hub-all{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:16px 20px;margin-top:auto}
.co-hub-rail .co-hub-all b{font-size:18px}
.co-hub-tabs{display:none}
/* 첫 화면(전체 지원사업)은 좌측 목록·탭 없이 두 지원사업만 */
.co-hub-wrap .co-hub.is-all{grid-template-columns:1fr}.co-hub.is-all .co-hub-rail,.co-hub.is-all .co-hub-tabs{display:none}
.co-hub-main{position:relative;min-width:0;min-height:0;background:#E9E4D6;padding:24px;container-type:size}
.co-hub-frame{display:block;width:100%;height:100%;border:0;background:#F7F3E8;border-radius:12px}
.co-hub-frame[hidden],.co-hub-spread[hidden]{display:none}
.co-hub-spread{display:flex;justify-content:center;align-items:center;height:100%;gap:0;position:relative}
.co-hub-page{position:relative}.co-hub-page::after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none}.co-hub-page:first-child::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.09))}.co-hub-page:last-child::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.09))}
.co-hub-page{display:block;width:min(50cqw,calc(100cqh * 955 / 1267));height:auto;aspect-ratio:955/1267;padding:0;border:0;background:#F7F3E8;cursor:pointer;transition:transform .2s,filter .2s}
.co-hub-page img{display:block;width:100%;height:100%;object-fit:cover}
.co-hub-page:hover,.co-hub-page:focus-visible{filter:brightness(1.02);outline:none}.co-hub-page:hover{transform:translateY(-3px)}
.co-hub-wrap .co-promo{position:fixed;top:0;right:clamp(16px,3.2vw,52px);z-index:9600;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid rgba(15,35,70,.12);border-top:0;border-radius:0 0 10px 10px;background:#fff;color:#0f2346;box-shadow:0 6px 16px rgba(15,35,70,.14);font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1;text-decoration:none;white-space:nowrap}
.co-hub-wrap .co-promo svg{flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:999px){
  .co-hub-wrap .co-hub{grid-template-columns:1fr;grid-template-rows:60px auto 1fr}
  .co-hub-wrap .co-hub.is-all{grid-template-rows:60px 1fr}
  .co-hub-bar{height:60px;padding:0 20px}.co-hub-bar strong{font-size:22px}
  .co-hub-rail{flex-direction:row;align-items:stretch;gap:12px;padding:14px 16px;border-right:0;border-bottom:1px solid #D9D3C4;overflow-x:auto}
  .co-hub-count{display:none}.co-hub-list{flex-direction:row;gap:12px}
  .co-hub-item{flex:0 0 250px;grid-template-columns:56px 1fr}.co-hub-item img{width:56px}.co-hub-item b{font-size:17px}.co-hub-tag{margin-top:6px}
  .co-hub-rail .co-hub-all{flex:0 0 220px;margin-top:0;justify-content:center}
}
@media (max-width:699px){
  .co-hub-wrap .co-hub{grid-template-rows:56px 56px 1fr}
  .co-hub-wrap .co-hub.is-all{grid-template-rows:56px 1fr}
  .co-hub-bar{height:56px;padding:0 16px;padding-right:128px}.co-hub-bar strong{font-size:17px}.co-hub-bar span{display:none}
  .co-hub-rail{display:none}
  .co-hub-tabs{display:flex;gap:8px;align-items:center;padding:0 14px;background:#fff;border-bottom:1px solid #D9D3C4;overflow-x:auto}
  .co-hub-tabs button{flex:0 0 auto;min-height:38px;padding:0 18px;border:0;border-radius:999px;background:#EFEBDC;color:#191814;font:800 15px/1 inherit;cursor:pointer}
  .co-hub-tabs button.on{background:#191814;color:#fff}
  .co-hub-main{padding:14px;overflow-y:auto}
  .co-hub-spread{flex-direction:column;height:auto;gap:18px}.co-hub-page::after{display:none}
  .co-hub-main{container-type:normal}.co-hub-page{height:auto;width:100%;max-width:440px}
}
/* [#123 Opus 점검] 높이가 낮은 화면(휴대폰 가로 844×390 등): 목록 줄(약 150px)이 이북 칸을 126px로 눌렀다 → 목록 대신 얇은 탭, 머리줄도 낮게 */
@media (max-height:520px){
  .co-hub-wrap .co-hub{grid-template-columns:1fr;grid-template-rows:44px 46px 1fr}
  .co-hub-wrap .co-hub.is-all{grid-template-rows:44px 1fr}
  .co-hub-bar{height:44px;padding:0 16px;padding-right:150px}.co-hub-bar strong{font-size:16px}.co-hub-bar span{display:none}
  .co-hub-rail{display:none}
  .co-hub-wrap .co-hub:not(.is-all) .co-hub-tabs{display:flex;gap:8px;align-items:center;padding:0 14px;background:#fff;border-bottom:1px solid #D9D3C4;overflow-x:auto}
  .co-hub-tabs button{flex:0 0 auto;min-height:34px;padding:0 16px;border:0;border-radius:999px;background:#EFEBDC;color:#191814;font:800 14px/1 inherit;cursor:pointer}
  .co-hub-tabs button.on{background:#191814;color:#fff}
  .co-hub-main{padding:8px}
}
