/* ============================================================
   사업계획서 · 차트 · 캐러셀 — 디자인 시스템 토큰만 사용 (style.css 다음에 로드)
   ============================================================ */
.biz-main > h2 { max-width: 28ch; }
.biz-main > .dek { margin-top: var(--s4); }
.biz-main .sub-h { margin-top: var(--s9); }
.biz-main h4 { margin-bottom: var(--s2); }
.biz-main code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; background: var(--paper-2); padding: 0 .35em; }
.biz-grid2 { gap: var(--s6) var(--gap); margin-top: var(--s5); align-items: start; }
.biz-grid2 > div > h3 { margin-bottom: var(--s3); }
.biz-grid2 > div > h3 + p, .biz-grid2 > div > h4 + p { color: var(--ink-70); }
.biz-status { margin-top: var(--s5); font-size: var(--t-xs); color: var(--ink-50); }

/* KPI 타일 */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); margin: var(--s7) 0 var(--s6); border-top: 1px solid var(--ink); }
.kpis.four { grid-template-columns: repeat(4, 1fr); }
.kpi { padding-top: var(--s4); display: flex; flex-direction: column; }
.kpi-v { font-size: var(--t-3xl); font-weight: 700; letter-spacing: var(--tr-h2); line-height: 1; }
.kpi-l { font-size: var(--t-sm); font-weight: 600; margin-top: var(--s3); }
.kpi-n { font-size: var(--t-xs); color: var(--ink-50); margin-top: var(--s1); }

/* 콜아웃 */
.callout { border: 1px solid var(--ink); padding: var(--s5) var(--s6); margin: var(--s6) 0; }
.callout .idx { display: block; margin-bottom: var(--s3); }
.callout p { color: var(--ink); }
.callout ol { counter-reset: c; display: grid; gap: var(--s3); }
.callout ol li { counter-increment: c; padding-left: 2.2rem; position: relative; color: var(--ink-70); }
.callout ol li::before { content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--serif); font-size: var(--t-md); color: var(--ink-50); }
.callout ol li b { color: var(--ink); }
.callout.warn { background: var(--paper-2); border-color: var(--line); }

/* 기둥 — 카드 대신 선으로 나눈 열 */
.pillars { display: grid; gap: var(--s6) var(--gap); border-top: 1px solid var(--ink); margin-top: var(--s5); }
.pillars.three { grid-template-columns: repeat(3, 1fr); }
.pillars.four { grid-template-columns: repeat(4, 1fr); }
.pillar { padding-top: var(--s4); }
.pillar .idx { display: block; margin-bottom: var(--s3); }
.pillar h4 { margin-bottom: var(--s2); }
.pillar p { font-size: var(--t-sm); color: var(--ink-70); }
.pillar .facts { margin-top: var(--s3); }

/* 단계 목록 */
.steps { counter-reset: s; border-top: 1px solid var(--ink); margin-top: var(--s5); }
.steps li { counter-increment: s; position: relative; padding: var(--s4) 0 var(--s4) 3.5rem; border-bottom: 1px solid var(--line); color: var(--ink-70); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: var(--s4); font-family: var(--serif); font-size: var(--t-xl); color: var(--ink-50); line-height: 1; }
.steps li b { color: var(--ink); display: block; margin-bottom: var(--s1); }
.notes { margin-top: var(--s5); font-size: var(--t-xs); color: var(--ink-50); display: grid; gap: var(--s1); padding-left: 1rem; list-style: disc; }

/* 표 보완 */
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.sum td { border-top: 1px solid var(--ink); font-weight: 700; }
.tbl.cmp td { white-space: normal; min-width: 7rem; }
.tbl.cmp td:last-child { min-width: 16rem; }
.tbl.cmp tr.us td, .tbl.cmp td.us { background: var(--paper-2); font-weight: 500; }
.tbl.risk td { white-space: normal; }
.cite { font-size: .7em; color: var(--ink-50); text-decoration: none !important; vertical-align: super; margin-left: 1px; }
.cite:hover { color: var(--ink); }

/* 차트 */
.chart { margin: var(--s5) 0 var(--s6); border-top: 1px solid var(--ink); padding-top: var(--s4); }
.chart-head { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s4); }
.chart-title { font-weight: 700; font-size: var(--t-md); }
.chart-dek { font-size: var(--t-sm); color: var(--ink-50); }
.chart-body svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-note, .chart-src { font-size: var(--t-xs); color: var(--ink-50); margin-top: var(--s2); }
.chart-table { margin-top: var(--s3); font-size: var(--t-sm); }
.chart-table summary { cursor: pointer; color: var(--ink-50); font-size: var(--t-xs); }
.chart-table table { margin-top: var(--s3); }
.chart-table td, .chart-table th { white-space: normal; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); font-size: var(--t-xs); color: var(--ink-70); }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend .lg i { width: 10px; height: 10px; display: inline-block; }
.legend .lg b { font-weight: 600; color: var(--ink); }
.chart .mark { cursor: default; outline: none; }
.chart .mark:hover rect, .chart .mark:hover circle, .chart .mark:focus rect { opacity: .75; }
.tip { position: fixed; z-index: 90; pointer-events: none; background: var(--ink); color: #fff; font-size: var(--t-xs); padding: 6px 10px; line-height: 1.4; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.tip b { display: block; font-weight: 600; }
.tip.show { opacity: 1; }
.diagram { margin: var(--s6) 0; }
.diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagram figcaption { font-size: var(--t-xs); color: var(--ink-50); margin-top: var(--s3); }
.stat-box { border-top: 1px solid var(--ink); padding-top: var(--s4); }
.stat-box .big { font-family: var(--serif); font-size: var(--t-4xl); line-height: 1; font-weight: 500; margin: var(--s2) 0; }
.sources { margin-top: var(--s9); border-top: 1px solid var(--ink); padding-top: var(--s4); }
.sources h3 { font-size: var(--t-md); margin-bottom: var(--s3); }
.sources ol { display: grid; gap: var(--s2); font-size: var(--t-xs); color: var(--ink-70); }
.sources li span { font-family: var(--serif); color: var(--ink-50); margin-right: var(--s1); }
.sources li a { text-decoration: none; border-bottom: 1px solid var(--ink-30); }
.sources .small { margin-top: var(--s4); }

/* 차트 모션 초기 상태 → 등장 */
html.js .chart .bar { transform: scaleY(0); }
html.js .chart .seg { transform: scaleX(0); }
html.js .chart .line, html.js .vc-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .chart .dot, html.js .vc-node { opacity: 0; }
html.js .plan .zone { opacity: 0; }
html.js .diagram:not(.is-in) .plan .zone { opacity: 1; }
html.js [data-chart].is-in .bar { transform: none; transition: transform .9s var(--ease-settle); }
html.js [data-chart].is-in .seg { transform: none; transition: transform .9s var(--ease-settle); }
html.js [data-chart].is-in .line, html.js .diagram.is-in .vc-link { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
html.js [data-chart].is-in .dot, html.js .diagram.is-in .vc-node { opacity: 1; transition: opacity .6s var(--ease) .6s; }
html.js .diagram.is-in .vc-node { transition-delay: calc(var(--i) * .15s + .2s); }
html.js .diagram.is-in .plan .zone { opacity: 1; transition: opacity .5s var(--ease); transition-delay: calc(var(--i) * .12s); }
@media (prefers-reduced-motion: reduce) {
  html.js .chart .bar, html.js .chart .seg, html.js .chart .line, html.js .vc-link, html.js .chart .dot, html.js .vc-node, html.js .plan .zone { transform: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; transition: none !important; }
}

/* 캐러셀 (브랜드) */
.carousel { position: relative; margin-top: var(--s6); outline: none; }
.carousel.first { margin-top: 0; }
.car-track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); align-items: start; }
.car-slide .ph.main img { aspect-ratio: 3 / 2; }
.car-copy { padding-top: var(--s1); }
.car-copy .brand-name { font-size: clamp(2.25rem, 1.2rem + 3vw, 3.5rem); }
.car-copy .brand-sub { margin-top: var(--s2); }
.car-copy .proj-name { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); letter-spacing: -0.01em; }
.car-copy .concept { margin-top: var(--s4); color: var(--ink-70); font-size: var(--t-sm); line-height: 1.6; }
.car-copy .facts { margin-top: var(--s4); }
.car-copy .arrow { display: inline-block; margin-top: var(--s4); }
.car-copy .meta-row { display: flex; gap: var(--s5); margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-50); }
.car-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s5); max-width: 360px; }
.car-thumbs .ph img { aspect-ratio: 1 / 1; }
.car-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s3); }
.car-dots { display: flex; gap: var(--s3); flex-wrap: wrap; }
.car-dots button { font-family: var(--serif); font-size: var(--t-sm); color: var(--ink-50); padding: 2px 0; border-bottom: 1px solid transparent; letter-spacing: .04em; }
.car-dots button.is-active { color: var(--ink); border-color: var(--ink); }
.car-right { display: flex; align-items: center; gap: var(--s4); }
.car-btns { display: flex; gap: var(--s2); }
.car-btns button { width: 40px; height: 40px; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 1.1rem; transition: background .2s, color .2s; }
.car-btns button:hover { background: var(--ink); color: #fff; }
.car-count { font-family: var(--serif); font-size: var(--t-sm); color: var(--ink-50); }

@media (max-width: 1100px) { .kpis, .kpis.four { grid-template-columns: repeat(3, 1fr); row-gap: var(--s5); } .pillars.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .pillars.three, .biz-grid2 { grid-template-columns: 1fr; } .car-slide { grid-template-columns: 1fr; } .car-copy .brand-name { font-size: var(--t-3xl); } .car-dots { display: none; } }
@media (max-width: 600px) { .kpis, .kpis.four, .pillars.four { grid-template-columns: repeat(2, 1fr); } .callout { padding: var(--s4); } .steps li { grid-template-columns: 2.2rem 1fr; } }

/* ============================================================
   사업계획 모션 — 스크롤 진행에 따른 고정 장면 (과하지 않게 3종만)
   ============================================================ */
.biz-prog { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 60; pointer-events: none; }
.biz-prog i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

/* 단어 단위 등장 */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.sw > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-settle); transition-delay: calc(var(--i) * 40ms); }
.sw.in > span, html:not(.js) .sw > span { transform: none; }

/* 전면 사진 */
.photo-full { margin: var(--s7) 0; }
.photo-full img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--paper-2); }
.photo-full figcaption { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--t-xs); color: var(--ink-50); margin-top: var(--s2); }
.ai-tag { font-size: var(--t-xs); color: var(--ink-50); border: 1px solid var(--line); padding: 1px 6px; white-space: nowrap; }

/* 고정 장면: 단계 + 사진 */
.scene { position: relative; margin: var(--s8) 0; }
.scene-steps { height: 320vh; }
.scene .stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: center; align-content: center; }
.sc-head { grid-column: 1 / -1; }
.sc-head .dek { font-size: var(--t-md); }
.sc-list { border-top: 1px solid var(--ink); }
.sc-item { padding: var(--s3) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--s3); color: var(--ink-30); transition: color .4s; }
.sc-item .n { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.3; }
.sc-item h4 { font-size: var(--t-lg); margin: 0; color: inherit; }
.sc-item p { font-size: var(--t-sm); margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .4s, margin .4s; }
.sc-item.on { color: var(--ink); }
.sc-item.on p { max-height: 9rem; opacity: 1; margin-top: var(--s2); color: var(--ink-70); }
.sc-item.done { color: var(--ink-50); }
.sc-photos { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.sc-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.6s var(--ease); }
.sc-photos img.on { opacity: 1; transform: none; }
.sc-cap { font-size: var(--t-xs); color: var(--ink-50); margin-top: var(--s2); min-height: 1.4em; }
.sc-cap [data-cap] { display: flex; justify-content: space-between; gap: var(--s4); }
.sc-cap [data-cap][hidden] { display: none; }
.scene.static, .scene.static.scene-steps { height: auto; }
.scene.static .stage { position: static; height: auto; grid-template-columns: 1fr; align-items: start; }
.scene.static .sc-item { color: var(--ink); }
.scene.static .sc-item p { max-height: none; opacity: 1; margin-top: var(--s2); color: var(--ink-70); }
.scene.static .sc-photos img:first-child { opacity: 1; transform: none; }
.scene.static .sc-cap [data-cap] { display: none; }
.scene.static .sc-cap [data-cap]:first-child { display: flex; }

/* 고정 장면: 사진 확대 */
.scene-grow { height: 240vh; }
.scene-grow .stage { grid-template-columns: 1fr; justify-items: center; gap: var(--s6); }
.grow-words { font-size: var(--t-3xl); font-weight: 700; letter-spacing: var(--tr-h2); line-height: 1.15; max-width: 24ch; text-align: center; margin: 0; }
.grow-words span { opacity: .14; transition: opacity .35s; }
.grow-words span.lit { opacity: 1; }
.grow-photo { width: calc(46% + 54% * var(--g, 0)); aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.grow-photo img { width: 100%; height: 100%; object-fit: cover; }
.grow-cap { font-size: var(--t-xs); color: var(--ink-50); width: calc(46% + 54% * var(--g, 0)); display: flex; justify-content: space-between; gap: var(--s4); margin: 0; }
.scene.static .grow-photo, .scene.static .grow-cap { width: 100%; }
.scene.static .grow-words span { opacity: 1; }

/* 디자인 다양성 그리드 */
.dgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); border-top: 1px solid var(--ink); padding-top: var(--s4); margin-top: var(--s5); }
.dgrid .ph img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 6%; }
.dgrid-cap { font-size: var(--t-xs); color: var(--ink-50); margin-top: var(--s2); }

/* 디스플레이 월 — 모니터 속 이미지만 바뀐다 */
.wall { background: var(--paper-2); padding: var(--s7) var(--s6) var(--s5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); align-items: center; border-top: 1px solid var(--line); }
.screen { position: relative; aspect-ratio: 1 / 1.414; background: #0a0a0a; padding: 3.5%; }
.screen .inner { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: wallfade 16s linear infinite; animation-delay: calc(var(--k) * 4s + var(--off, 0s)); }
@keyframes wallfade { 0% { opacity: 0; } 3% { opacity: 1; } 25% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
.wall:hover .screen img { animation-play-state: paused; }
.wall-cap { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--ink-50); display: flex; justify-content: space-between; gap: var(--s4); margin: var(--s4) 0 0; border-top: 1px solid var(--line); padding-top: var(--s3); }
@media (prefers-reduced-motion: reduce) { .screen img { animation: none; } .screen img:first-child { opacity: 1; } }

@media (max-width: 1100px) { .dgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .wall { gap: var(--s3); padding: var(--s5) var(--s4) var(--s4); } .grow-words { font-size: var(--t-2xl); } }
@media (max-width: 600px) { .dgrid { grid-template-columns: repeat(3, 1fr); } }