/* 시안 ② 메인 Long Scroll — 구조·문구 + 벤치마킹(CN Bio·Deepcell) 비주얼 반영 A그룹.
   계획: docs/internal/organo-벤치마킹 사이트 분석 및 비주얼 업데이트 계획.md §4.1 */
/* Breakdance 요소로 편집할 때(breakdance-export/html-to-breakdance.php) — 요소 기본값을 걷어내 일반 HTML과 같게.
   기본값(.breakdance .bde-div 등, 특이도 0,2,0)은 이 파일이 뒤에 로드돼 순서로 이기고,
   아래 규칙은 모두 .breakdance로 한 단계 올려 이 해제값을 이긴다 — 새 규칙도 .breakdance 로 시작할 것 */
.ow.bde-div,.ow .bde-div{display:block;flex-direction:row;align-items:normal;text-align:inherit;max-width:none;position:static;background-size:auto}
.ow .bde-text:where(:not(.button-atom)),.ow .bde-heading{max-width:none;color:inherit}
.ow li.bde-div{display:list-item}
.ow .bde-code-block,.ow .bde-shortcode,.ow .bde-image,.ow .breakdance-image,.ow .breakdance-image-container,.ow .breakdance-image-clip{display:contents}
.ow .organo-eyebrow{color:var(--organo-blue)}
.ow .organo-lead{color:var(--organo-ink-2)}
.ow :is(.organo-dummy,.organo-cover){position:relative}
.breakdance .ow{width:100%;font-family:var(--bde-body-font-family);color:var(--organo-ink);--arch:clamp(32px,5vw,72px)}
.breakdance .ow-sec{padding:var(--bde-section-vertical-padding) var(--bde-section-horizontal-padding)}
.breakdance .ow-sec:nth-of-type(even){background:var(--organo-light-bg)}
.breakdance .ow-in{max-width:var(--bde-section-width);margin:0 auto}
/* A1 에디토리얼 섹션 헤더 — 제목 위 1px 가로선(Deepcell) */
.breakdance .ow-sec:not(.ow-cta) > .ow-in::before{content:"";display:block;grid-column:1/-1;height:1px;background:currentColor;opacity:.14;margin-bottom:clamp(28px,4vw,48px)}
.breakdance .ow h2{font-family:var(--bde-heading-font-family);font-size:var(--bde-h2-font-size);margin:12px 0 14px}
.breakdance .ow h3{font-size:20px;margin:0 0 8px}
.breakdance .ow p{margin:0}
.breakdance .ow .organo-lead{max-width:760px}
.breakdance .ow-grid{display:grid;gap:20px;margin-top:44px;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,240px)),1fr))}
.breakdance .ow-card{background:#fff;border:1px solid var(--organo-stroke);border-radius:var(--organo-radius);padding:28px}
.breakdance .ow-card p{color:var(--organo-ink-2);font-size:15px}
.breakdance .ow-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--organo-blue);background:var(--organo-grad-soft);border-radius:999px;padding:3px 10px;margin-bottom:14px}
.breakdance .ow-img{display:grid;place-items:center;min-height:180px;border-radius:var(--organo-radius);background:repeating-linear-gradient(135deg,#e7ecf3 0 12px,#eef2f7 12px 24px);color:var(--organo-muted);font-size:13px;text-align:center;padding:16px;margin-bottom:18px}
.breakdance .ow-list{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.breakdance .ow-list li{font-size:13px;border:1px solid var(--organo-stroke);border-radius:999px;padding:4px 12px;background:#fff}

/* A3 스크롤 리빌 — organo-ui.js가 .ow-rv를 붙인다(JS·모션 꺼짐이면 붙지 않아 그대로 보임) */
.breakdance .ow-rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--organo-ease),transform .7s var(--organo-ease)}
.breakdance .ow-rv.is-in{opacity:1;transform:none}

/* A8 섹션 경계 곡선(CN Bio) — 앞 섹션 위로 겹쳐 올라가며 위쪽을 둥근 아치로 */
.breakdance .ow .ow-arch{position:relative;margin-top:calc(-1 * var(--arch));padding-top:calc(var(--bde-section-vertical-padding) + var(--arch) * .5);border-radius:50% 50% 0 0 / var(--arch) var(--arch) 0 0}

/* 03 Journey — A2 대형 경량 숫자 */
.breakdance .ow-journey{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:16px;margin-top:48px}
.breakdance .ow-journey .ow-card.is-key{border:2px solid var(--organo-blue);box-shadow:var(--organo-shadow-md)}
.breakdance .ow-num{display:block;font:300 clamp(48px,5vw,64px)/1 "Inter Tight",var(--bde-heading-font-family);letter-spacing:-.05em;color:var(--organo-stroke);margin-bottom:14px}
.breakdance .is-key .ow-num{background:var(--organo-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.breakdance .ow-step{display:block;font:700 12px/1 var(--bde-heading-font-family);color:var(--organo-muted);letter-spacing:.12em;margin-bottom:12px}
.breakdance .is-key .ow-step{color:var(--organo-blue)}
.breakdance .ow-arrow{align-self:center;width:40px;height:2px;background:var(--organo-grad);position:relative}
.breakdance .ow-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--organo-cyan)}

/* 05 Solutions — A4 벤토 4타일(Deepcell): 타일마다 색·이미지 위치를 다르게 */
.breakdance .ow-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:44px}
.breakdance a.ow-tile{position:relative;display:flex;flex-direction:column;grid-column:span 3;min-height:300px;border-radius:var(--organo-radius-lg);overflow:hidden;color:var(--organo-ink);text-decoration:none;transition:opacity .7s var(--organo-ease),transform .35s var(--organo-ease),box-shadow .35s var(--organo-ease)}
.breakdance a.ow-tile:hover{transform:translateY(-4px);box-shadow:var(--organo-shadow-md)}
.breakdance .ow-tile.is-wide{grid-column:span 4;flex-direction:row}
.breakdance .ow-tile:not(.is-wide):nth-child(2){grid-column:span 2}
.breakdance .ow-tile__txt{display:flex;flex-direction:column;gap:10px;padding:32px;flex:1}
.breakdance .ow-tile__txt p{font-size:15px;line-height:1.65;color:var(--organo-ink-2)}
.breakdance .ow .ow-tile h3{font-size:clamp(22px,2.2vw,28px);margin:0}
.breakdance .ow-tile__by{font:700 12px/1 var(--bde-heading-font-family);letter-spacing:.1em;text-transform:uppercase;color:var(--organo-blue)}
.breakdance .ow-tile__more{margin-top:auto;padding-top:14px;font-weight:700;font-size:14px}
.breakdance .ow-tile__more::after{content:" →";transition:margin .25s}
.breakdance a.ow-tile:hover .ow-tile__more::after{margin-left:6px}
.breakdance .ow-tile__img{flex:0 0 44%;min-height:220px}
.breakdance .ow-tile:not(.is-wide) .ow-tile__img{flex:0 0 200px}
.breakdance .ow-tile__orb{position:absolute;right:28px;top:28px;width:160px;height:160px;border-radius:50%;box-shadow:0 0 0 8px var(--organo-light-bg),var(--organo-shadow-md)}
.breakdance .ow-tile__orb.organo-dummy::after{top:auto;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap}
.breakdance .ow-tile:is(.is-white,.is-soft) .ow-tile__txt{padding-right:216px}
.breakdance .ow-tile.is-navy{background:var(--organo-navy);color:#fff}
.breakdance .ow-tile.is-navy h3{color:#fff}
.breakdance .ow-tile.is-navy p{color:rgb(255 255 255 / .74)}
.breakdance .ow-tile.is-navy .ow-tile__by{color:var(--organo-cyan)}
.breakdance .ow-tile.is-navy .ow-tile__img{border-radius:160px 0 0 0}
.breakdance .ow-tile.is-navy .organo-dummy::after{left:auto;right:12px}
.breakdance .ow-tile.is-tint{background:linear-gradient(160deg,rgb(25 181 200 / .16),rgb(25 181 200 / .05))}
.breakdance .ow-tile.is-white{background:#fff;border:1px solid var(--organo-stroke)}
.breakdance .ow-tile.is-soft{background:var(--organo-grad-soft),#fff}

/* 07 Flywheel — 순환도 + 노드 순차 점등. 흰 노드·남색 글자, 가운데는 흰 빛 위 브랜드 블루(SVG 속성 색은 CSS가 이긴다) */
.breakdance .ow-fly{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.breakdance .ow-fly svg{width:100%;max-width:460px;margin:0 auto;display:block;overflow:visible}
.breakdance .ow-fly text{font-family:var(--bde-body-font-family);font-size:15px;font-weight:700;fill:var(--organo-navy);text-anchor:middle}
.breakdance .ow-fly .ow-core-t{font-size:20px;fill:var(--organo-blue)}
.breakdance .ow-fly ol{margin:20px 0 0;padding-left:20px;color:#2C4657}
.breakdance .ow-fly li{margin:8px 0}
.breakdance .ow-fly li b{color:var(--organo-ink)}
.breakdance .ow-node circle{fill:#fff;stroke:var(--organo-blue);stroke-width:2}
/* 점등 원을 노드보다 크게 — 같은 크기면 흰 노드에 가려 밝은 배경에서 빛이 안 보인다 */
.breakdance .ow-node .ow-halo{fill:var(--organo-cyan);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(1.45);animation:ow-pulse 6s var(--organo-ease) infinite;animation-delay:calc(var(--i) * 1.5s)}
.breakdance .ow-fly #ow-core stop{stop-color:#fff}
.breakdance .ow-fly #ow-core stop:first-child{stop-opacity:.85}
.breakdance .ow-fly circle[r="96"]{stroke:#fff;stroke-opacity:.7}
.breakdance .ow-orbit{stroke:var(--organo-blue);stroke-opacity:.4;animation:ow-flow 18s linear infinite}
.breakdance .ow-fly g[marker-end]{stroke:var(--organo-blue)}
.breakdance .ow-fly marker path{fill:var(--organo-blue)}
@keyframes ow-pulse{0%,40%,100%{opacity:0}12%{opacity:.75}}
@keyframes ow-flow{to{stroke-dashoffset:-220}}

/* 07·10 Flywheel·Future — 밝은 컨셉 이미지 배경(10/19 고객 회의 「진한 네이비 탈피」, Stripe 참고). 클래스 이름(ow-dark·ow-glow)은 편집기 데이터라 그대로 둔다.
   이미지(bg/*.avif)는 organo-ui.js가 섹션 한 화면 앞에서 .is-near를 붙일 때 받는다. 그전·AVIF 미지원이면 비슷한 색 그라디언트만 보인다 */
.breakdance .ow .ow-dark{color:var(--organo-ink);background:var(--ow-bg,none) 50% 50%/cover no-repeat,var(--ow-tone)}
.breakdance .ow .ow-glow{--ow-tone:linear-gradient(120deg,#D6C8E3,#F8D0DC 45%,#A9B2F7 80%,#ECBACB)}
.breakdance .ow .ow-dark:not(.ow-glow){--ow-tone:linear-gradient(90deg,#CFCBF3,#F9D3DA 50%,#B3AAEC)}
.breakdance .ow .ow-glow.is-near{--ow-bg:url(../bg/flywheel-soft-hues.avif)}
.breakdance .ow .ow-dark.is-near:not(.ow-glow){--ow-bg:url(../bg/future-dreamscape.avif)}
.breakdance .ow-dark :is(h2,h3){color:var(--organo-ink)}
.breakdance .ow-dark .ow-card p{color:var(--organo-ink-2)}
/* 이미지 위에 바로 놓인 보조 글자는 ink-2를 ink 쪽으로 30% 진하게 — 가장 어두운 분홍 위에서도 4.5:1 → 5.7:1 */
.breakdance .ow-dark .organo-lead{color:#2C4657}
.breakdance .ow-dark .organo-eyebrow{color:var(--organo-blue)}
.breakdance .ow-dark .ow-tag{color:var(--organo-blue);background:var(--organo-grad-soft)}
/* 카드 — Stripe식 거의 불투명한 흰 카드 + 겹그림자, 뒤 이미지가 살짝 비친다 */
.breakdance .ow-dark .ow-card{background:rgb(255 255 255 / .82);border-color:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 30px 45px -30px rgb(11 31 68 / .3),0 18px 36px -18px rgb(11 31 68 / .12)}

/* 08 Why — A7 라인 아이콘 + 소프트 블롭(CN Bio), 카드 테두리 없앰 */
.breakdance .ow-why .ow-card{background:none;border:0;padding:8px 8px 0}
.breakdance .ow-ico{position:relative;isolation:isolate;display:grid;place-items:center;width:88px;height:88px;margin-bottom:22px;color:var(--organo-blue)}
.breakdance .ow-ico::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--organo-grad-soft);border-radius:58% 42% 55% 45% / 48% 58% 42% 52%}
.breakdance :is(.ow-why,.ow-gap) .ow-card:nth-child(2n) .ow-ico::before{border-radius:42% 58% 46% 54% / 55% 45% 58% 45%;background:rgb(25 181 200 / .16)}
.breakdance :is(.ow-why,.ow-gap) .ow-card:nth-child(3) .ow-ico::before{border-radius:50% 50% 38% 62% / 62% 44% 56% 38%}
.breakdance .ow-ico svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* 02 Gap — 카드 4개에 같은 라인 아이콘·블롭(10/24 고객 피드백, 참고 Benchling) */
.breakdance .ow-gap .ow-ico{width:80px;height:80px;margin-bottom:18px}
.breakdance .ow-gap .ow-ico svg{width:48px;height:48px}

/* 10 Future — 파트너십 문의 버튼(고객 예시) */
.breakdance .ow-future__cta{margin-top:28px}

/* 11 News — A6 메시 그라디언트 + 이정표 텍스트 3열(Deepcell) */
.breakdance .ow .ow-mesh{background:radial-gradient(55% 60% at 8% 12%,rgb(25 181 200 / .22),transparent 70%),radial-gradient(45% 55% at 92% 20%,rgb(0 73 153 / .16),transparent 70%),radial-gradient(60% 60% at 55% 105%,rgb(25 181 200 / .14),transparent 70%),var(--organo-light-bg)}
.breakdance .ow-news{margin-top:44px}
.breakdance .ow .ow-sub{margin:56px 0 0;font-size:15px;letter-spacing:.04em;color:var(--organo-muted)}
/* 소제목(Key Milestone·협력기관)은 섹션 eyebrow와 같은 단계로 — 고객 피드백 「타이틀 레벨이 어울리지 않음」 */
.breakdance .ow .organo-eyebrow.ow-sub{display:flex;width:fit-content;font-size:13px;color:var(--organo-blue)}
.breakdance .ow-mile{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px 32px;margin:16px 0 0;padding:0;list-style:none}
.breakdance .ow-mile li{border-top:1px solid rgb(11 31 68 / .16);padding-top:18px}
.breakdance .ow-mile time{display:block;font:300 34px/1 "Inter Tight",var(--bde-heading-font-family);letter-spacing:-.04em;color:var(--organo-blue);margin-bottom:10px}
.breakdance .ow-mile p{font-size:15px;line-height:1.6;color:var(--organo-ink-2)}

/* 12 CTA */
.breakdance .ow .ow-cta{background:var(--organo-grad);color:#fff;text-align:center}
.breakdance .ow-cta h2{color:#fff}
.breakdance .ow-cta p{color:rgb(255 255 255 / .85)}
.breakdance .ow-cta .button-atom{margin-top:28px}
/* CTA 배경 영상(organo-ui.js가 삽입) — 브랜드 그라디언트를 반투명하게 덮어 흰 글자 유지, 아치 모양대로 잘림 */
.breakdance .ow-cta:has(.ow-cta__video){position:relative;overflow:hidden;isolation:isolate}
.breakdance .ow-cta:has(.ow-cta__video)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--organo-grad);opacity:.78}
.breakdance .ow-cta__video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 35%}

@media (max-width:900px){
  .breakdance .ow-journey{grid-template-columns:1fr}
  .breakdance .ow-arrow{justify-self:center;width:2px;height:28px}
  .breakdance .ow-arrow::after{right:-4px;top:auto;bottom:-1px;border-left-color:transparent;border-top-color:var(--organo-cyan)}
  .breakdance .ow-fly{grid-template-columns:1fr}
  .breakdance .ow-bento{grid-template-columns:1fr}
  .breakdance a.ow-tile,.breakdance .ow-tile.is-wide,.breakdance .ow-tile:not(.is-wide):nth-child(2){grid-column:auto;flex-direction:column}
  .breakdance .ow-tile.is-wide .ow-tile__img{order:-1;flex-basis:200px;border-radius:0}
  .breakdance .ow-tile__orb{width:120px;height:120px;right:24px;top:24px}
  .breakdance .ow-tile:is(.is-white,.is-soft) .ow-tile__txt{padding-right:32px;padding-top:160px}
  /* 1열 — Flywheel은 90° 돌린 세로판(밝은 쪽이 글 뒤, 보라·파랑이 순환도 뒤), Future는 가운데 빛 띠 */
  .breakdance .ow .ow-glow.is-near{--ow-bg:url(../bg/flywheel-soft-hues-m.avif)}
  .breakdance .ow .ow-dark:not(.ow-glow){--ow-tone:linear-gradient(180deg,#FEE9D0,#FDD8E1 50%,#FCD0DC)}
  .breakdance .ow .ow-dark.is-near:not(.ow-glow){--ow-bg:url(../bg/future-dreamscape-m.avif)}
}
@media (prefers-reduced-motion:reduce){
  .breakdance .ow-node .ow-halo,.breakdance .ow-orbit{animation:none}
}