/* Layout measurements from decentlaw.io/kr/news/1311 and /kr/win_story/1251.
   Site navigation and criminal-center content are kept; type is governed by fonts.css. */
:is(.page-column-detail,.page-case-detail) {
  --detail-gutter: 9.271vw;
  --detail-primary: var(--brand-primary, #151515);
  --detail-accent: var(--brand-accent, #c62828);
  --detail-soft: var(--brand-soft, #f5f5f5);
  --detail-on-dark: #e5e5e5;
}
/* Navigation uses the shared site.css dimensions at every breakpoint. */
.reference-main { position: relative; padding: clamp(80px,7.692vw,120px) var(--detail-gutter) 120px; color: #222; font-size: 16px; line-height: 1.5; }
.reference-main .detail-lawyers { margin-top: 80px; padding: 0; }
.detail-lawyers>h2 { margin: 0 0 28px; color: #222; font-size: 28px; font-weight: 700; line-height: 1.22; }
.detail-lawyer-list { display: flex; gap: 18px; align-items: flex-start; overflow-x: auto; scrollbar-width: thin; padding: 0 0 8px; }
.detail-lawyer { display: flex; flex: 0 0 calc((100% - 54px) / 4); flex-direction: column; gap: 20px; min-width: 0; color: #222; }
.detail-lawyer-image { position: relative; width: 100%; aspect-ratio: 800 / 974; overflow: hidden; border-radius: 10px; background: #f4f4f4; }
.detail-lawyer-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .2s; }
.detail-lawyer:hover .detail-lawyer-image img { transform: scale(1.03); }
.detail-lawyer-identity { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(8px,1.042vw,10px); }
.detail-lawyer-identity>span { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 4px; background: #f4f4f4; color: var(--detail-accent); font-size: 14px; font-weight: 700; line-height: 21px; }
.detail-lawyer-identity h3 { margin: 0; padding: 0; border: 0; color: #222; font-size: 18px; font-weight: 700; line-height: 1.22; }
.detail-lawyer-text>p { margin: 10px 0 0; color: #999; font-size: 14px; font-weight: 500; line-height: 1.2; }
.detail-lawyers-note { margin: 0 0 30px; padding: 20px 25px; border-radius: 10px; background: var(--detail-soft); color: #333; font-size: 16px; font-weight: 400; line-height: 1.6; text-align: center; }
.reference-list-button { display: flex; justify-content: center; margin-top: 80px; }
.reference-list-button>a { display: inline-flex; align-items: center; justify-content: center; min-width: 180px; height: 60px; border: 1px solid #999; border-radius: 6px; color: #222; background: #fff; font-size: 18px; font-weight: 700; line-height: 1.5; }
.reference-list-button>a:hover { border-color: var(--detail-primary); color: var(--detail-primary); }
@media (min-width:1920px) { :is(.page-column-detail,.page-case-detail) { --detail-gutter: 240px; } }
@media (min-width:1261px) and (max-width:1919px) { :is(.page-column-detail,.page-case-detail) { --detail-gutter: clamp(120px,9.52vw,240px); } }
@media (min-width:769px) and (max-width:1260px) { :is(.page-column-detail,.page-case-detail) { --detail-gutter: 40px; } }
@media (min-width:1560px) { .detail-lawyer { flex-basis: 300px; } }
@media (max-width:960px) { .detail-lawyer { flex-basis: 200px; } }
@media (max-width:768px) {
  :is(.page-column-detail,.page-case-detail) { --detail-gutter: 20px; }
  .reference-main { padding-top: 24px; padding-bottom: 100px; }
  .reference-main .detail-lawyers { margin-top: 60px; }
  .detail-lawyers>h2 { margin-bottom: 20px; font-size: 22px; }
  .detail-lawyer { gap: 10px; }
  .detail-lawyer-list { gap: 16px; }
  .detail-lawyer-identity>span { height: 22px; padding: 0 8px; font-size: 12px; }
  .detail-lawyer-identity h3 { font-size: 16px; }
  .detail-lawyer-text>p { font-size: 12px; }
  .detail-lawyers-note { font-size: 14px; }
  .reference-list-button { margin-top: 60px; }
  .reference-list-button>a { min-width: 100px; height: 42px; font-size: 14px; }
}