/* ──────────────────────────────────────────────────────────────
   비즈니스 페이지 — 도입 경로 섹션 (한국어 포함 18개 로케일)

   `BusinessPage.astro` 가 `src/data/businessCopy/adoption.ts` 에 로케일이 있을 때만 이 파일을 싣는다.
   ★`business.css` 에 넣지 않았다. 그 파일은 `BaseLayout` 이 전 페이지에 싣는 공용 시트라, 한 페이지의
     섹션 스타일을 더하면 모든 페이지가 그만큼 더 받는다.
   ★여백·제목·부제의 타이포는 `business.css` 의 `.content_item_prose` · `.business_page .content_item h3 ~ p`
     규칙을 그대로 쓴다. 여기서는 새 카드와 버튼의 배치만 잡는다.
   ★`common.css` 가 `body{word-break:break-all}` 을 걸어 둔다 — 영문이 단어 중간에서 끊긴다.
     글이 들어가는 칸마다 `keep-all` + `overflow-wrap` 으로 되돌린다.
   ────────────────────────────────────────────────────────────── */

/* [A-1] 도입 경로 2열 — 완제품 · Custom Kit */
.business_page .route_cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:stretch;}
.business_page .route_cards > li{display:flex;flex-direction:column;background:#fff;border-radius:20px;padding:40px 36px 36px;box-shadow:6px 6px 20px 0 rgba(0,0,0,.06);box-sizing:border-box;}
.business_page .route_cards h4{font-size:24px;font-weight:900;line-height:1.3;letter-spacing:-.03em;color:#241f1f;word-break:keep-all;overflow-wrap:break-word;}
/* 여백은 본문이 갖는다 — 버튼 묶음의 `margin-top:auto` 가 두 카드의 버튼 높이를 맞춘다. */
.business_page .route_cards > li > p{margin-top:var(--business-heading-body-gap);margin-bottom:var(--business-heading-body-gap);font-size:17px;line-height:var(--business-body-leading);letter-spacing:0;text-wrap:pretty;word-break:keep-all;overflow-wrap:break-word;color:#241f1f;}
.business_page .route_actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto;}

/* ★`.content_item_prose .inner a`(밑줄 링크)와 그 hover 를 덮어써야 버튼으로 읽힌다. */
.business_page .content_item_prose .route_cards .route_actions a{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;height:100%;padding:10px 18px;border:1.5px solid #241f1f;border-radius:999px;background:#fff;color:#241f1f;font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.02em;text-align:center;text-decoration:none;word-break:keep-all;overflow-wrap:break-word;box-sizing:border-box;}
.business_page .content_item_prose .route_cards .route_actions a:hover{background:#241f1f;color:#fff;text-decoration:none;}
/* 카드마다 채운 버튼은 하나다. */
.business_page .content_item_prose .route_cards .route_actions a.route_primary{background:#241f1f;color:#fff;}
.business_page .content_item_prose .route_cards .route_actions a.route_primary:hover{background:#46312c;border-color:#46312c;color:#fff;}
.business_page .content_item_prose .route_cards .route_actions a:focus-visible,
.business_page .content_item_prose a.section_cta:focus-visible{outline:3px solid #b0652f;outline-offset:3px;}

/* [A-2]·[A-3]·[A-4] 글 한 문단과 버튼 하나인 섹션.
   `.inner` 와 `.section_close` 가 각자 위 여백을 갖고 있어 겹치면 버튼이 문단에서 너무 멀어진다. */
.business_page .content_item_included .inner,
.business_page .content_item_support .inner,
.business_page .content_item_demo .inner{margin-top:0;}

/* [B-9] 제품 카드 색상 캐러셀.
   자동 재생 없이 네이티브 가로 스크롤을 써서 터치 스와이프를 보존하고,
   버튼·키보드는 같은 스크롤 위치를 갱신한다. */
.business_page .product_cards > li{--product-card-inline:32px;}
.business_page .product_carousel{position:relative;width:calc(100% + (var(--product-card-inline) * 2));margin-right:calc(var(--product-card-inline) * -1);margin-bottom:20px;margin-left:calc(var(--product-card-inline) * -1);}
.business_page .product_carousel_track{display:flex;width:calc(100% - (var(--product-card-inline) * 2));margin-inline:var(--product-card-inline);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain;border-radius:14px;background:#f5f1eb;scrollbar-width:none;}
.business_page .product_carousel_track::-webkit-scrollbar{display:none;}
.business_page .product_carousel_track:focus-visible{outline:3px solid #b0652f;outline-offset:3px;}
.business_page .product_cards .product_carousel_slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always;border-radius:0;background:#f5f1eb;}
.business_page .product_cards .product_carousel_slide img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:contain;}
.business_page .product_carousel_btn{position:absolute;top:calc(50% - 15px);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#241f1f;font-size:24px;font-weight:500;line-height:1;cursor:pointer;transform:translateY(-50%);}
.business_page .product_carousel_btn span{display:block;transform:translateY(-1px);transition:color .15s ease,transform .15s ease;}
.business_page .product_carousel_prev{left:4px;}
.business_page .product_carousel_next{right:4px;}
html[dir="rtl"] .business_page .product_carousel_prev{left:auto;right:4px;}
html[dir="rtl"] .business_page .product_carousel_next{right:auto;left:4px;}
.business_page .product_carousel_btn:hover span{color:#b0652f;transform:translateY(-1px) scale(1.08);}
.business_page .product_carousel_btn:focus-visible{outline:3px solid #b0652f;outline-offset:2px;}
.business_page .product_carousel_status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px calc(var(--product-card-inline) + 2px) 0;color:#5d534f;font-size:15px;line-height:1.4;letter-spacing:0;}
.business_page .product_carousel_status strong{font-weight:800;color:#241f1f;}
.business_page .product_carousel_status span{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){
  .business_page .product_carousel_track{scroll-behavior:auto;}
}

/* ──────────────────────────────────────────────────────────────
   [B-7] HYBE INSIGHT 상세 사례

   사례 카드(`.case_cards > li`)의 흰 판·여백·세로 간격은 `business.css` 것을 그대로 받는다.
   여기서는 카드 안의 사진 셋 · 동작 3단계 · 버튼 줄만 잡는다.
   ────────────────────────────────────────────────────────────── */
.business_page .case_detail .case_eyebrow{margin:0 0 var(--business-copy-gap);font-size:15px;font-weight:700;letter-spacing:.02em;line-height:var(--business-body-leading);color:#8a7a6d;}
.business_page .case_detail h5{margin:0 0 var(--business-heading-body-gap);font-size:20px;font-weight:900;line-height:1.4;letter-spacing:-.02em;color:#241f1f;word-break:keep-all;overflow-wrap:break-word;}
/* 사진 셋 — 정사각 한 장과 세로 두 장이라 같은 비율의 판에 맞춰 넣는다. */
.business_page .case_gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.business_page .case_gallery figure{position:relative;margin:0;}
.business_page .case_gallery img{display:block;width:100%;height:auto;aspect-ratio:31/40;object-fit:cover;border-radius:14px;background:#ddd5cd;}
/* ★`business.css` 맨 위의 `figcaption{display:none}` 을 되돌려야 캡션이 보인다. */
.business_page .case_gallery figcaption{position:absolute;left:50%;bottom:14px;display:block;width:max-content;max-width:calc(100% - 24px);margin:0;padding:8px 14px;border-radius:999px;background:#241f1f;color:#fff;font-size:15px;font-weight:700;line-height:1.25;letter-spacing:0;text-align:center;word-break:keep-all;overflow-wrap:break-word;box-sizing:border-box;transform:translateX(-50%);}

/* 동작 3단계.
   ★선택자를 길게 쓴 것은 `business.css` 의 옛 규칙(`.content_item_1 .inner ol` — 세로로 쌓는 큰 흰 카드,
     여백 62px·간격 80px·그림자)을 이겨야 해서다. 짧게 줄이면 단계마다 화면 한 장을 차지한다. */
.business_page .content_item_1 .inner .case_steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:case-step;}
.business_page .content_item_1 .inner .case_steps > li{width:auto;background:#f7f5f2;border-radius:14px;padding:22px 22px 24px;box-shadow:none;box-sizing:border-box;counter-increment:case-step;}
.business_page .case_steps > li::before{content:counter(case-step);display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-bottom:14px;border-radius:50%;background:#241f1f;color:#fff;font-size:15px;font-weight:700;}
.business_page .case_steps strong{display:block;font-size:18px;font-weight:800;line-height:1.35;letter-spacing:-.02em;color:#241f1f;word-break:keep-all;overflow-wrap:break-word;}
.business_page .case_steps span{display:block;margin-top:var(--business-copy-gap);font-size:17px;line-height:var(--business-body-leading);letter-spacing:0;text-wrap:pretty;color:#241f1f;word-break:keep-all;overflow-wrap:break-word;}

/* 네 행동은 모든 화면에서 같은 폭이다. 긴 라벨은 줄바꿈하고 한 행의 높이를 함께 늘린다. */
.business_page .case_actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;align-items:stretch;gap:8px;}
.business_page .case_detail .case_actions .case_btn{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:68px;height:auto;padding:10px 16px;border:1.5px solid #241f1f;border-radius:999px;background:#fff;color:#241f1f;font-size:16px;font-weight:700;line-height:var(--business-body-leading,1.5);letter-spacing:-.02em;text-align:center;text-decoration:none;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;box-sizing:border-box;}
.business_page .case_detail .case_actions .case_btn:hover{background:#241f1f;color:#fff;text-decoration:none;}
.business_page .case_detail .case_actions .case_btn_primary{background:#241f1f;color:#fff;}
.business_page .case_detail .case_actions .case_btn_primary:hover{background:#46312c;border-color:#46312c;}
.business_page .case_detail .case_actions a:focus-visible{outline:3px solid #b0652f;outline-offset:3px;}

/* 고정 헤더나 직접 링크로 진입해도 대형 제목이 가려지지 않는다. 폰트의 상·하단도 충분히 확보한다. */
.business_page .content_item,
.business_page .case_detail{scroll-margin-top:112px;}
.business_page .content_item > h3{line-height:1.3;padding-top:.08em;padding-bottom:.12em;overflow:visible;word-break:keep-all;overflow-wrap:break-word;}
/* 복합 색상명과 위치 숫자는 서로 방향이 달라도 순서를 섞지 않는다. */
.business_page .product_carousel_status strong,
.business_page .product_carousel_status span{unicode-bidi:isolate;}
.business_page .product_carousel_status span{direction:ltr;flex-shrink:0;}
html[dir="rtl"] .business_page .route_cards,
html[dir="rtl"] .business_page .case_text,
html[dir="rtl"] .business_page .case_steps,
html[dir="rtl"] .business_page .product_cards,
html[dir="rtl"] .business_page .plan_cards,
html[dir="rtl"] .business_page .path_cards,
html[dir="rtl"] .business_page .faq_grid{text-align:right;}
html[dir="rtl"] .business_page .plan_cards > li > ul li{padding-left:0;padding-right:26px;}
html[dir="rtl"] .business_page .plan_cards > li > ul li::before{left:auto;right:0;}
/* 위아래 결합 부호가 있는 문자권은 영문용 좁은 행간을 그대로 적용하지 않는다. */
.business_page:lang(th) .case_text p,
.business_page:lang(hi) .case_text p,
.business_page:lang(ar) .case_text p,
.business_page:lang(th) .filter_custom p,
.business_page:lang(hi) .filter_custom p,
.business_page:lang(ar) .filter_custom p{line-height:1.65;letter-spacing:0;}
/* 사례 배경 패턴은 제목 아래로만 흘러야 한다. 제목을 같은 stacking context 위에 둬 글자 일부가 가려지지 않게 한다. */
.business_page .content_item_1 > h3{position:relative;z-index:2;}

@media screen and (max-width:1024px){
  .business_page .route_cards{gap:24px;}
  .business_page .route_cards > li{padding:32px 28px 30px;}
}

@media screen and (max-width:640px){
  .business_page .product_cards > li{--product-card-inline:22px;}
  .business_page .route_cards{grid-template-columns:minmax(0,1fr);}
  .business_page .route_cards > li{padding:30px 24px 28px;}
  .business_page .route_cards h4{font-size:22px;}
  /* 좁은 화면에서도 두 행동의 우선순위를 5:5로 유지한다. */
  .business_page .route_actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .business_page .content_item_prose .route_cards .route_actions a{min-height:76px;padding:10px 12px;font-size:14px;}

  /* 사진: 기기 한 장을 넓게, 출력물과 외관을 그 아래 나란히. 셋을 한 줄에 두면 한 장이 100px 남짓이다. */
  .business_page .case_gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .business_page .case_gallery > li:first-child{grid-column:1 / -1;}
  .business_page .case_gallery > li:first-child img{aspect-ratio:1 / 1;}
  .business_page .case_gallery figcaption{bottom:12px;max-width:calc(100% - 20px);padding:7px 11px;font-size:13px;}
  .business_page .content_item_1 .inner .case_steps{grid-template-columns:minmax(0,1fr);gap:12px;}
  .business_page .case_actions{gap:4px;}
  .business_page .case_detail .case_actions .case_btn{padding:10px 4px;font-size:14px;}
  .business_page .product_carousel_btn{width:44px;height:44px;}
}