/* NINEWORKS — DEVELOP typography system
   Compact hierarchy aligned to the standard portfolio sections below. */
.portfolio-develop-mode{
  --case-title-size:clamp(30px,2vw,34px);
  --case-body-size:14.5px;
  --case-meta-size:10.5px;
  --case-card-title-size:16px;
  --case-card-body-size:13px;
  --case-body-line:1.78;
  --case-title-line:1.18;
  --case-copy-width:820px;
}

/* 01. SECTION TITLES — DEVELOP 제목을 기존 프로젝트 섹션의 작은 위계에 통일 */
.portfolio-develop-mode .portfolio-scroll-section__head h2,
.portfolio-develop-mode .dev-case-heading h3,
.portfolio-develop-mode .dev-case-system__title{
  width:auto!important;
  max-width:24ch!important;
  margin:0!important;
  font-size:var(--case-title-size)!important;
  font-weight:500!important;
  line-height:var(--case-title-line)!important;
  letter-spacing:-.043em!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}

/* 02. BODY COPY — 섹션 본문은 하나의 크기로 */
.portfolio-develop-mode .portfolio-scroll-copy,
.portfolio-develop-mode .dev-case-heading p{
  max-width:var(--case-copy-width)!important;
}
.portfolio-develop-mode .portfolio-scroll-copy p,
.portfolio-develop-mode .dev-case-heading p{
  font-size:var(--case-body-size)!important;
  line-height:var(--case-body-line)!important;
  letter-spacing:-.02em!important;
  word-break:keep-all!important;
  color:#3d3d3d!important;
}

/* 03. META — 02 / Website & UX Design, A / Planning Framework */
.portfolio-develop-mode .portfolio-scroll-section__meta,
.portfolio-develop-mode .portfolio-scroll-section__index,
.portfolio-develop-mode .portfolio-scroll-section__label,
.portfolio-develop-mode .dev-case-heading>span,
.portfolio-develop-mode .dev-case-system__eyebrow{
  font-size:var(--case-meta-size)!important;
  line-height:1.45!important;
  letter-spacing:.035em!important;
  color:#888!important;
  font-weight:400!important;
}

/* DEVELOP 제목 블록도 기존 섹션과 같은 메타 → 제목 → 본문 순서 */
.portfolio-develop-mode .dev-case-heading{
  display:block!important;
  margin:0 0 24px!important;
  padding:0!important;
  border:0!important;
}
.portfolio-develop-mode .dev-case-heading>span{
  display:block!important;
  margin:0 0 30px!important;
  padding:0!important;
  font-family:inherit!important;
  text-transform:none!important;
}
.portfolio-develop-mode .dev-case-heading p{
  display:block!important;
  margin:28px 0 0!important;
}

/* 기존 프로젝트 섹션 수직 리듬도 동일하게 축소 */
.portfolio-develop-mode .portfolio-scroll-section__head{
  margin-bottom:28px!important;
}
.portfolio-develop-mode .portfolio-scroll-section__meta{
  display:flex!important;
  align-items:center!important;
  gap:36px!important;
  margin-bottom:30px!important;
}
.portfolio-develop-mode .portfolio-scroll-copy{
  margin-bottom:38px!important;
}
.portfolio-develop-mode .portfolio-scroll-copy p+p{
  margin-top:16px!important;
}

/* DEVELOP 블록 사이 간격도 과하게 벌어지지 않도록 */
.portfolio-develop-mode .dev-inline-block{
  margin:64px 0 0!important;
}
.portfolio-develop-mode .dev-inline-block .dev-case-heading:not(:first-child){
  margin-top:70px!important;
}
.portfolio-develop-mode .dev-case-system{
  margin:58px 0 0!important;
  padding-top:0!important;
  border-top:0!important;
}
.portfolio-develop-mode .dev-case-system__eyebrow{
  margin-bottom:30px!important;
  font-family:inherit!important;
  text-transform:none!important;
}
.portfolio-develop-mode .dev-case-system__title{
  margin-bottom:28px!important;
}

/* 04. CARD TYPOGRAPHY — 본문보다 한 단계 아래 */
.portfolio-develop-mode .dev-case-stat strong,
.portfolio-develop-mode .dev-planning-card h4,
.portfolio-develop-mode .dev-architecture__node strong,
.portfolio-develop-mode .dev-stack-card strong,
.portfolio-develop-mode .dev-sitemap__group h4,
.portfolio-develop-mode .dev-data-flow__step strong{
  font-size:var(--case-card-title-size)!important;
  line-height:1.35!important;
  letter-spacing:-.025em!important;
  font-weight:600!important;
  word-break:keep-all!important;
}

.portfolio-develop-mode .dev-case-stat p,
.portfolio-develop-mode .dev-planning-card p,
.portfolio-develop-mode .dev-architecture__node p,
.portfolio-develop-mode .dev-stack-card p,
.portfolio-develop-mode .dev-data-flow__step p,
.portfolio-develop-mode .dev-code-card p{
  font-size:var(--case-card-body-size)!important;
  line-height:1.68!important;
  letter-spacing:-.018em!important;
  word-break:keep-all!important;
}

.portfolio-develop-mode .dev-sitemap__group li,
.portfolio-develop-mode .dev-deployment__row,
.portfolio-develop-mode .dev-deployment__row strong{
  font-size:13px!important;
  line-height:1.58!important;
}
.portfolio-develop-mode .dev-deployment__row span,
.portfolio-develop-mode .dev-planning-card span,
.portfolio-develop-mode .dev-stack-card small,
.portfolio-develop-mode .dev-architecture__node small,
.portfolio-develop-mode .dev-data-flow__step small,
.portfolio-develop-mode .dev-code-card__head,
.portfolio-develop-mode .dev-sitemap__group>span,
.portfolio-develop-mode .dev-case-stat__label{
  font-size:10px!important;
  line-height:1.45!important;
}

/* 박스 높이도 축소된 글자에 맞춤 */
.portfolio-develop-mode .dev-planning-card,
.portfolio-develop-mode .dev-architecture__node,
.portfolio-develop-mode .dev-stack-card,
.portfolio-develop-mode .dev-data-flow__step{
  height:auto!important;
}
.portfolio-develop-mode .dev-planning-card{min-height:205px!important}
.portfolio-develop-mode .dev-architecture__node{min-height:178px!important}
.portfolio-develop-mode .dev-stack-card{min-height:148px!important}
.portfolio-develop-mode .dev-data-flow__step{min-height:132px!important}

@media(max-width:900px){
  .portfolio-develop-mode{--case-title-size:clamp(29px,4.2vw,32px);--case-body-size:14px}
  .portfolio-develop-mode .portfolio-scroll-section__meta{gap:26px!important}
}

@media(max-width:760px){
  .portfolio-develop-mode{--case-title-size:clamp(27px,7.2vw,31px);--case-body-size:13.5px;--case-meta-size:10px;--case-card-title-size:15.5px;--case-card-body-size:12.5px}
  .portfolio-develop-mode .portfolio-scroll-section__meta{gap:18px!important;margin-bottom:26px!important}
  .portfolio-develop-mode .dev-case-heading>span{margin-bottom:26px!important}
  .portfolio-develop-mode .dev-case-heading p{margin-top:24px!important}
  .portfolio-develop-mode .dev-inline-block{margin-top:56px!important}
}