/* A concept: restrained, single-column practice directory. */
.index-section {
  background: #fff;
  color: #202020;
  font-family: Pretendard, sans-serif;
  letter-spacing: -.025em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.index-inner {
  width: calc(100% - 48px);
  max-width: 1200px;
  margin-inline: auto;
  padding: 72px 0;
}
.index-list { display: grid; }
.index-row {
  display: grid;
  grid-template-columns: 32px minmax(230px, .9fr) minmax(0, 1.6fr) 38px;
  align-items: center;
  min-width: 0;
  min-height: 94px;
  gap: 22px;
  padding: 18px 12px;
  border-bottom: 1px solid #e3e3e3;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease;
}
.index-row:first-child { border-top: 1px solid #e3e3e3; }
.index-row-left, .index-row-text { display: contents; }
.index-row-icon { display: none; }
.index-row-num { color: #c62828; font-size: 13px; font-weight: 600; line-height: 1.5; }
.index-row-title {
  margin: 0;
  min-width: 0;
  color: #202020;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.035em;
}
.index-row-desc { min-width: 0; margin: 0; color: #6e6e6e; font-size: 15px; line-height: 1.7; }
.index-row-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #cdcdcd;
  border-radius: 50%;
  color: #151515;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.index-row-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.index-row:is(:hover, :focus-visible) { background: #f5f5f5; }
.index-row:is(:hover, :focus-visible) .index-row-arrow { background: #201719; color: #fff; border-color: #151515; }
.index-row:focus-visible { outline: 2px solid #c62828; outline-offset: 4px; }
@media (max-width: 1100px) and (min-width: 768px) {
  .index-row { grid-template-columns: 28px minmax(190px, .9fr) minmax(0, 1.2fr) 34px; gap: 14px; }
  .index-row-title { font-size: 20px; }
  .index-row-desc { font-size: 14px; }
}
@media (max-width: 767px) {
  .page-practice .civil-banner h1 { font-size: 30px; }
  .page-practice .civil-banner p { max-width: 300px; margin-inline: auto; font-size: 16px; }
  .index-inner { width: calc(100% - 40px); padding: 48px 0; }
  .index-row { grid-template-columns: 26px minmax(0, 1fr) 32px; min-height: 110px; gap: 6px 10px; padding: 18px 4px; }
  .index-row-num { grid-area: 1 / 1 / span 2; align-self: start; margin-top: 3px; }
  .index-row-title { grid-area: 1 / 2; font-size: 19px; }
  .index-row-desc { grid-area: 2 / 2; font-size: 14px; }
  .index-row-arrow { grid-area: 1 / 3 / span 2; width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .index-row, .index-row-arrow { transition: none; }
}