/* /design DESIGN - shared service blocks (svc-*, same as 69-branding.css) + design-only blocks (dsn-*) */
.page-hero { padding-bottom: 60px; }
.svc-hero__title { font-weight: 400; font-size: clamp(44px, 6.7vw, 96px); }
.page-hero .page-hero__line { max-width: 500px; margin-top: 36px; }

.svc-eyebrow { font-weight: 400; margin-bottom: 20px; }
.svc-eyebrow--dim { color: #646464; }

/* intro */
.svc-intro { padding: 135px 0 130px; }
.svc-statement { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.52; font-weight: 400; color: #010101; letter-spacing: -.02em; }
.svc-statement b { font-weight: 700; }
.svc-lead { margin-top: 33px; font-size: clamp(17px, 1.67vw, 24px); line-height: 1.65; color: #212121; }
.svc-lead b { font-weight: 700; }
.svc-lead__gap { margin-top: 1.65em; }

/* process */
.svc-process { background: #233056; padding: 146px 0 60px; color: #fff; }
.svc-process__title { font-family: var(--font-en); font-weight: 700; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.1; color: #de8ea6; }
.svc-process__img { width: 100%; margin: 60px auto 0; }
.svc-process__text { margin-top: 96px; text-align: center; font-size: clamp(16px, 1.6vw, 23px); line-height: 1.87; }

/* title + right-aligned case list */
.svc-block { padding: 151px 0 80px; background: #fff; }
.svc-block--soft { background: #f7f7f7; }
.svc-block--dark { background: #131313; color: #fff; padding-top: 129px; padding-bottom: 124px; }
.svc-block .svc-eyebrow { margin-bottom: 34px; }
.svc-title { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.1; font-weight: 700; color: #131313; letter-spacing: -.02em; }
.svc-title--black { color: #000; }
.svc-title--white { color: #fff; }
.svc-cases { max-width: 850px; margin: 80px 0 0 auto; border-top: 2px solid #131313; border-bottom: 2px solid #131313; }
.svc-case { padding: 36px 27px 40px; }
.svc-case + .svc-case { border-top: 1px solid #212121; }
.svc-case__title { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; font-weight: 700; color: #131313; margin-bottom: 28px; }
.svc-block--soft .svc-case__title { color: #000; }
.svc-case__list { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; color: #212121; }
.svc-case__list li + li { margin-top: .1em; }
.svc-case__list--dot { padding-left: 36px; list-style: disc; }
.svc-case__list--dot li::marker { font-size: .8em; }

/* dark: sub, check list, CTA */
.svc-sub { margin-top: 26px; padding-bottom: 30px; border-bottom: 2px solid #fff; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.5; font-weight: 700; color: #fcfcfc; }
.svc-checks { padding: 15px 0 30px; border-bottom: 1px solid #fff; }
.svc-checks li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-height: 91px; padding: 15px 0 15px 41px; position: relative; color: #fff; }
.svc-checks li::before { content: ''; position: absolute; left: 0; top: 50%; width: 35px; height: 33px; transform: translateY(-50%); background: url('/assets/img/0a62c620108ff.png') center / contain no-repeat; }
.svc-checks b { font-size: clamp(19px, 1.9vw, 27px); line-height: 1.5; font-weight: 700; }
.svc-checks span { font-size: clamp(15px, 1.4vw, 20px); line-height: 1.5; }
.svc-cta { display: flex; justify-content: flex-end; margin-top: 62px; padding-right: 14px; }
.svc-cta__btn { display: inline-flex; align-items: center; justify-content: center; width: 290px; height: 57px; border-radius: 9999px; background: #fff; color: #de8ea6; font-family: var(--font-en); font-size: 21px; letter-spacing: .02em; transition: background .25s, color .25s; }
.svc-cta__btn:hover { background: #de8ea6; color: #fff; }

/* design-only variants of shared blocks */
.svc-intro { padding-bottom: 150px; }
.svc-block--soft .svc-cases { margin-top: 60px; }
.svc-block--soft { padding-bottom: 127px; }
.svc-block--pink { background: #f2dbe1; padding: 129px 0 170px; }
.svc-eyebrow--white { color: #fff; }
.svc-block--pink .svc-sub { color: #131313; border-bottom-color: #fff; }
.svc-block--pink .svc-checks { padding-top: 6px; border-bottom-color: #fff; }
.svc-block--pink .svc-checks li { color: #131313; min-height: 92px; }
.svc-block--pink .svc-cta { margin-top: 30px; }

/* kicker: "CBC그룹의 디자인 분야별 솔루션" */
.dsn-kicker { font-size: 22px; line-height: 1.4; letter-spacing: 5px; color: #a6a6a6; }

/* split: title left, colored boxes right */
.dsn-split { padding: 150px 0 170px; background: #e0d9db; }
.dsn-split--pkg { background: #e7e7e7; padding-top: 155px; }
.dsn-split--pkg .dsn-kicker { color: #ababab; }
.dsn-split__inner { display: grid; grid-template-columns: minmax(0, 503fr) minmax(0, 610fr); column-gap: 137px; align-items: start; }
.dsn-split__title { margin-top: 48px; font-size: clamp(36px, 4.45vw, 64px); line-height: 1.3; font-weight: 700; color: #010101; letter-spacing: -.01em; }
.dsn-split__sub { margin-top: 44px; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.56; font-weight: 700; color: #212121; }
.dsn-split--pkg .dsn-split__title, .dsn-split--pkg .dsn-split__sub { color: #233056; }
.dsn-boxes { margin-top: 30px; display: grid; gap: 30px; }
.dsn-boxes li { min-height: 121px; padding: 20px 20px 24px; border-radius: 20px; color: #fefefe; font-size: clamp(17px, 1.67vw, 24px); line-height: 1.25; }

/* field: title + arrow list between lines */
.dsn-field { padding: 155px 0 47px; background: #fff; }
.dsn-field--next { padding: 76px 0 126px; }
.dsn-field__title { margin-top: 30px; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.5; font-weight: 700; color: #010101; letter-spacing: -.01em; }
.dsn-field__sub { margin-top: 20px; font-size: clamp(19px, 2.1vw, 30px); line-height: 1.5; color: #212121; }
.dsn-field__sub b { font-weight: 700; }
.dsn-arrows { margin-top: 60px; padding: 30px 0; border-top: 2px solid #010101; border-bottom: 1px solid #010101; }
.dsn-arrows li { position: relative; min-height: 64px; display: flex; align-items: center; padding-left: 37px; font-size: clamp(17px, 1.67vw, 24px); line-height: 1.4; font-weight: 700; color: #212121; }
.dsn-arrows li::before { content: ''; position: absolute; left: 0; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); background: url('/assets/img/418e4356f3d1b.png') center / contain no-repeat; }

/* navy: three field blocks with outlined cards */
.dsn-navy { background: #233056; padding: 155px 0 154px; color: #fff; }
.dsn-navy__block + .dsn-navy__block { margin-top: 186px; }
.dsn-navy__title { margin-top: 30px; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.12; font-weight: 700; color: #ffb5cb; letter-spacing: -.01em; }
.dsn-navy__sub { margin-top: 25px; font-size: clamp(19px, 2.1vw, 30px); line-height: 1.73; color: #ffb5cb; }
.dsn-cards { margin-top: 61px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.dsn-cards li { min-height: 159px; padding: 23px 16px 24px; border: 1px solid #ffb5cb; text-align: center; font-size: clamp(16px, 1.53vw, 22px); line-height: 1.25; color: #fefefe; }
.dsn-cards li::before { content: ''; display: block; width: 30px; height: 30px; margin: 0 auto 12px; background: url('/assets/img/e89abcf6eeaf6.png') center / contain no-repeat; }

/* portfolio gallery */
.dsn-portfolio { padding: 123px 0 169px; background: #fff; }
.dsn-portfolio__title { text-align: center; font-family: var(--font-en); font-weight: 700; font-size: 20px; letter-spacing: .5em; padding-left: .5em; color: #3d3d3d; }
.dsn-gallery { margin-top: 80px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dsn-gallery__item { position: relative; display: block; aspect-ratio: 620 / 467; overflow: hidden; background: #eee; }
.dsn-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.dsn-gallery__item::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s; }
.dsn-gallery__item span { position: absolute; left: 20px; right: 20px; top: 50%; z-index: 1; transform: translateY(-50%); text-align: center; color: #fff; font-family: var(--font-en); font-size: 14px; letter-spacing: .05em; opacity: 0; transition: opacity .3s; }
.dsn-gallery__item:hover::after, .dsn-gallery__item:hover span { opacity: 1; }

@media (max-width: 960px) {
  .dsn-split, .dsn-split--pkg { padding: 90px 0; }
  .dsn-split__inner { grid-template-columns: 1fr; }
  .dsn-split__title { margin-top: 24px; }
  .dsn-split__sub { margin-top: 24px; }
  .dsn-boxes { margin-top: 40px; gap: 16px; }
  .dsn-boxes li { min-height: 0; }
  .dsn-field { padding: 90px 0 30px; }
  .dsn-field--next { padding: 50px 0 90px; }
  .dsn-arrows { margin-top: 40px; padding: 16px 0; }
  .dsn-arrows li { min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
  .dsn-navy { padding: 90px 0; }
  .dsn-navy__block + .dsn-navy__block { margin-top: 100px; }
  .dsn-cards { margin-top: 40px; grid-template-columns: 1fr; gap: 16px; }
  .dsn-cards li { min-height: 0; }
  .dsn-portfolio { padding: 90px 0; }
  .dsn-gallery { margin-top: 40px; }
  .svc-block--pink { padding: 90px 0; }
}
@media (max-width: 640px) {
  .dsn-kicker { font-size: 16px; letter-spacing: 3px; }
  .dsn-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .svc-intro { padding: 90px 0; }
  .svc-process { padding: 90px 0 60px; }
  .svc-process__img { margin-top: 50px; }
  .svc-process__text { margin-top: 60px; }
  .svc-process__text p { display: inline; }
  .svc-block, .svc-block--dark { padding: 90px 0 70px; }
  .svc-cases { margin-top: 50px; max-width: none; }
  .svc-case { padding: 28px 4px 30px; }
  .svc-case__title { margin-bottom: 16px; }
}
@media (max-width: 640px) {
  .svc-case__list--dot { padding-left: 22px; }
  .svc-checks li { padding-left: 46px; min-height: 0; padding-top: 18px; padding-bottom: 18px; }
  .svc-checks li::before { width: 30px; height: 28px; top: 20px; transform: none; }
  .svc-checks span { flex-basis: 100%; }
  .svc-cta { justify-content: center; margin-top: 44px; padding-right: 0; }
  .svc-cta__btn { width: 100%; max-width: 290px; }
}


/* ---- fidelity fixes (audit 2026-11-13): spacing measured against original ---- */
@media (min-width: 961px) {
  .svc-intro { padding-bottom: 173px; }
  .svc-block--soft { padding-bottom: 101px; }
  .dsn-arrows { margin-top: 92px; }
  .dsn-field { padding-bottom: 77px; }
  .dsn-field--next { padding-bottom: 156px; }
  .dsn-navy__title { line-height: 1.12; }
  .dsn-navy__sub { margin-top: 41px; line-height: 1.2; }
  .dsn-cards { margin-top: 88px; }
  .dsn-navy__block + .dsn-navy__block { margin-top: 227px; }
}

/* lightbox (original gallery opens images in a popup viewer) */
.dsn-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; }
.dsn-lb[hidden] { display: none; }
.dsn-lb__img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.dsn-lb__btn { position: absolute; color: #fff; font-size: 40px; line-height: 1; width: 60px; height: 60px; display: grid; place-items: center; opacity: .75; transition: opacity .2s; }
.dsn-lb__btn:hover { opacity: 1; }
.dsn-lb__close { top: 16px; right: 16px; }
.dsn-lb__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.dsn-lb__next { right: 12px; top: 50%; transform: translateY(-50%); }
.dsn-lb__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-family: var(--font-en); font-size: 14px; letter-spacing: .1em; }
body.lb-open { overflow: hidden; }