.detail-header { height: 72px; background: var(--dc-ink); color: var(--dc-white); }
.detail-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.detail-brand { font-family: "DM Sans", Archivo, sans-serif; font-size: 17px; font-weight: 750; }
.detail-back { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; color: var(--dc-accent); font-size: 13px; font-weight: 750; }
.detail-back > svg { width: 17px; height: 17px; }

.detail-hero { height: 78svh; min-height: 650px; position: relative; background: var(--dc-ink); color: var(--dc-white); }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__caption { position: absolute; inset: auto 0 0; background: rgba(21,21,21,.93); }
.detail-hero__caption .dc-container { min-height: 228px; display: grid; grid-template-columns: 140px 1fr .7fr; gap: 48px; align-items: center; }
.detail-hero__kicker { color: var(--dc-accent); font-family: "DM Sans", Archivo, sans-serif; font-size: 12px; font-weight: 750; text-transform: uppercase; }
.detail-hero h1 { margin: 0; font-family: "Noto Serif KR", serif; font-size: 58px; font-weight: 500; line-height: 1.15; letter-spacing: 0; }
[data-theme="b"] .detail-hero h1 { font-family: Archivo, Pretendard, sans-serif; font-weight: 650; }
.detail-hero__meta { align-self: end; padding-bottom: 48px; color: #ccc; font-size: 13px; }
.detail-hero__meta strong { display: block; margin-bottom: 6px; color: var(--dc-white); font-size: 15px; }

.detail-overview { padding: 112px 0; background: var(--dc-paper); }
.detail-overview__grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; }
.detail-overview h2 { margin: 0; font-family: "Noto Serif KR", serif; font-size: 46px; font-weight: 500; line-height: 1.24; }
[data-theme="b"] .detail-overview h2 { font-family: Archivo, Pretendard, sans-serif; font-weight: 650; }
.detail-overview__body > p { max-width: 660px; margin: 0 0 48px; color: #57534d; font-size: 18px; }
.detail-facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--dc-ink); }
.detail-fact { min-height: 118px; display: flex; flex-direction: column; justify-content: center; padding: 20px 18px 20px 0; border-bottom: 1px solid var(--dc-line); }
.detail-fact:nth-child(odd) { border-right: 1px solid var(--dc-line); }
.detail-fact:nth-child(even) { padding-left: 18px; }
.detail-fact small { margin-bottom: 6px; color: var(--dc-accent-strong); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.detail-fact strong { font-size: 16px; }

.detail-practice { padding: 112px 0; background: var(--dc-ink); color: var(--dc-white); }
.detail-practice__head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: end; margin-bottom: 54px; }
.detail-practice h2 { margin: 0; font-family: "Noto Serif KR", serif; font-size: 46px; font-weight: 500; line-height: 1.24; }
[data-theme="b"] .detail-practice h2 { font-family: Archivo, Pretendard, sans-serif; font-weight: 650; }
.detail-practice__head p { margin: 0; color: #bbb; }
.detail-practice__rows { border-top: 1px solid #505050; }
.detail-practice__row { display: grid; grid-template-columns: 70px 180px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid #505050; }
.detail-practice__row b { color: var(--dc-accent); font-family: "DM Sans", Archivo, sans-serif; font-size: 12px; }
.detail-practice__row strong { font-size: 19px; }
.detail-practice__row p { margin: 0; color: #bbb; }

.detail-related { padding: 112px 0; background: var(--dc-white); }
.detail-related__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--dc-ink); }
.detail-related h2 { margin: 0; font-family: "DM Sans", Archivo, sans-serif; font-size: 15px; }
.detail-related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-related__image { aspect-ratio: 16 / 9; overflow: hidden; }
.detail-related__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.detail-related__card:hover img { transform: scale(1.025); }
.detail-related__meta { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--dc-line); }
.detail-related__meta strong { display: block; font-size: 20px; }
.detail-related__meta span { color: #666; font-size: 12px; }
.detail-related__meta svg { width: 19px; height: 19px; }

.detail-contact { padding: 86px 0; background: var(--dc-accent); }
.detail-contact__grid { display: grid; grid-template-columns: 1.35fr auto; gap: 50px; align-items: center; }
.detail-contact h2 { margin: 0; font-family: "Noto Serif KR", serif; font-size: 42px; font-weight: 500; line-height: 1.25; }
[data-theme="b"] .detail-contact h2 { font-family: Archivo, Pretendard, sans-serif; font-weight: 650; }

@media (max-width: 900px) {
  .detail-hero__caption .dc-container { grid-template-columns: 90px 1fr; }
  .detail-hero__meta { grid-column: 2; padding-bottom: 35px; }
  .detail-hero h1 { font-size: 48px; }
  .detail-overview__grid { grid-template-columns: 1fr; gap: 48px; }
  .detail-practice__head { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 620px) {
  .detail-header { height: 64px; }
  .detail-back span { display: none; }
  .detail-hero { height: auto; min-height: 740px; }
  .detail-hero img { object-position: 45% center; }
  .detail-hero__caption .dc-container { min-height: 330px; display: block; padding-top: 42px; padding-bottom: 30px; }
  .detail-hero__kicker { display: block; margin-bottom: 20px; }
  .detail-hero h1 { font-size: 39px; }
  .detail-hero__meta { padding: 24px 0 0; }
  .detail-overview, .detail-practice, .detail-related { padding: 76px 0; }
  .detail-overview h2, .detail-practice h2 { font-size: 36px; }
  .detail-overview__body > p { font-size: 16px; }
  .detail-facts { grid-template-columns: 1fr; }
  .detail-fact:nth-child(odd) { border-right: 0; }
  .detail-fact:nth-child(even) { padding-left: 0; }
  .detail-practice__row { grid-template-columns: 40px 1fr; }
  .detail-practice__row p { grid-column: 2; }
  .detail-related__grid { grid-template-columns: 1fr; gap: 42px; }
  .detail-contact { padding: 68px 0; }
  .detail-contact__grid { grid-template-columns: 1fr; }
  .detail-contact h2 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-related__image img { transition: none; }
}