/* 가변 폰트 한 파일로 전 웨이트를 쓴다. 웨이트를 늘려도 요청은 1이다. */
    @font-face {
      font-family: "Pretendard";
      src: url("../fonts/Pretendard-subset.woff2") format("woff2-variations");
      font-weight: 45 930;
      font-style: normal;
      font-display: swap;
    }

    :root {
      /* 운영 사이트 실측값은 #0d325f 였으나, 큰 면적에 깔리면 채도가 튀어
         쨍하게 보인다. 같은 계열을 유지하되 명도·채도를 함께 내려 깊게 잡았다.
         (명도만 내리면 탁해진다.) 3단계 사이 명도 차는 2.4배 / 3.3배. */
      --navy: #15273e;
      --navy-deep: #0a1726;
      --navy-soft: #2c496e;
      --paper: #f4f6f9;
      --paper-2: #e7ecf2;
      --ink: #15202b;
      --ink-2: #4a5763;
      --ink-3: #66727e;
      --rule: #7c8894;
      --wine: #8e1c2e;
      --live: #63d39c;
      --white: #fff;

      --shell: min(1200px, 100% - 2 * var(--gutter));
      --gutter: clamp(18px, 4vw, 48px);
      --header-h: 62px;
      --board-lift: clamp(52px, 7vw, 96px);

      --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

      --t-label: 12px;
      --t-small: 15px;
      --t-body: 17px;
      --t-lead: clamp(17px, 1.4vw, 19px);
      --t-h3: clamp(19px, 1.7vw, 23px);
      --t-h2: clamp(1.75rem, 3vw, 2.5rem);
      --t-h1: clamp(2rem, 3.9vw, 3.15rem);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--header-h) + 16px);
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font);
      font-size: var(--t-body);
      line-height: 1.8;
      letter-spacing: -0.005em;
      -webkit-font-smoothing: antialiased;
    }

    body.menu-open {
      overflow: hidden;
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select,
    textarea {
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
    }

    :focus-visible {
      outline: 3px solid var(--wine);
      outline-offset: 3px;
    }

    ::selection {
      background: var(--navy);
      color: var(--white);
    }

    .shell {
      width: var(--shell);
      margin-inline: auto;
    }

    /* 제목 안에서 굵기를 섞지 않는다. 운영 사이트가 "**온라인상담** 현황"처럼
       한 제목을 두 굵기로 쪼개 쓰는데, 규칙이 없어 조잡해 보이는 원인이었다. */
    .label {
      display: block;
      color: var(--ink-3);
      font-size: var(--t-label);
      font-weight: 800;
      letter-spacing: 0.15em;
      line-height: 1;
    }

    .label--light {
      color: rgba(255, 255, 255, 0.72);
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .skip-link {
      position: fixed;
      top: 8px;
      left: 8px;
      z-index: 1000;
      padding: 12px 18px;
      background: var(--white);
      color: var(--navy);
      font-size: var(--t-small);
      font-weight: 800;
      transform: translateY(-200%);
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    /* ── 헤더 ─────────────────────────────────────────── */

    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 100;
      height: 72px;
      color: var(--white);
      transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
    }

    .site-header.is-scrolled {
      background: rgba(244, 246, 249, 0.94);
      color: var(--navy-deep);
      box-shadow: 0 8px 28px rgba(10, 23, 38, 0.1);
      backdrop-filter: blur(24px) saturate(170%);
    }

    .header-inner {
      min-height: 72px;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .brand {
      display: inline-flex;
      align-items: baseline;
      gap: 9px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.024em;
      white-space: nowrap;
    }

    .brand span {
      color: currentColor;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      opacity: .68;
    }

    .desktop-nav {
      margin-left: auto;
    }

    .header-nav {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: clamp(12px, 1.45vw, 24px);
      list-style: none;
    }

    .nav-item {
      position: relative;
    }

    .header-nav .nav-top {
      position: relative;
      padding: 22px 0 20px;
      display: block;
      color: currentColor;
      font-size: 14px;
      font-weight: 700;
      transition: opacity 160ms ease;
    }

    /* 활성 표시는 border-bottom 이 아니라 ::after 다. border 는 패딩 박스
       맨 아래(헤더 바닥선)에 붙어 글자와 28px 떨어지고 CTA 버튼보다도
       10px 낮게 매달렸다. 여기서는 CTA 버튼 밑변과 같은 높이에 맞춘다. */
    .header-nav .nav-top::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      bottom: 10px;
      height: 2px;
      background: var(--wine);
      opacity: 0;
      transition: opacity 160ms ease;
    }

    .header-nav .nav-item:hover .nav-top::after,
    .header-nav .nav-item:focus-within .nav-top::after,
    .header-nav .nav-item[data-open="true"] .nav-top::after,
    .header-nav .nav-item[data-active="true"] .nav-top::after {
      opacity: 1;
    }

    .nav-drop {
      position: absolute;
      top: calc(100% - 2px);
      left: 50%;
      width: max-content;
      min-width: 210px;
      margin: 0;
      padding: 10px;
      visibility: hidden;
      list-style: none;
      background: var(--navy-deep);
      color: var(--white);
      box-shadow: 0 20px 42px rgba(10, 23, 38, .22);
      opacity: 0;
      transform: translate(-50%, -8px);
      transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    }

    .nav-item:hover > .nav-drop,
    .nav-item:focus-within > .nav-drop,
    .nav-item[data-open="true"] > .nav-drop {
      visibility: visible;
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .nav-drop a {
      padding: 9px 11px;
      display: block;
      color: rgba(255, 255, 255, .82);
      font-size: 13px;
      font-weight: 650;
      line-height: 1.45;
    }

    .nav-drop a:hover,
    .nav-drop a:focus-visible,
    .nav-drop a[aria-current="page"] {
      background: rgba(255, 255, 255, .09);
      color: var(--white);
    }

    .nav-cross {
      display: block;
      color: rgba(255, 255, 255, .52);
      font-size: 10px;
    }

    .header-cta {
      min-height: 42px;
      padding: 10px 16px;
    }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      margin-left: auto;
      padding: 0;
      border: 1px solid currentColor;
      background: transparent;
      color: inherit;
      cursor: pointer;
    }

    .menu-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      margin: 4px auto;
      background: currentColor;
      transition: opacity 160ms ease, transform 160ms ease;
    }

    body.menu-open .site-header {
      height: 100dvh;
    }

    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 110;
      height: 100dvh;
      min-height: 100vh;
      visibility: hidden;
      background: rgba(10, 23, 38, .56);
      opacity: 0;
      transition: opacity 180ms ease, visibility 180ms;
    }

    .mobile-menu[data-open="true"] {
      visibility: visible;
      opacity: 1;
    }

    .mobile-menu-panel {
      width: 100%;
      height: 100%;
      padding: 14px var(--gutter) 28px;
      overflow-y: auto;
      background: var(--navy-deep);
      color: var(--white);
      transform: translateY(-14px);
      transition: transform 180ms ease;
    }

    .mobile-menu[data-open="true"] .mobile-menu-panel {
      transform: translateY(0);
    }

    .mobile-menu-top {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    .mobile-menu-brand {
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .mobile-menu-close {
      position: relative;
      width: 44px;
      height: 44px;
      border: 0;
      background: transparent;
      color: var(--white);
      cursor: pointer;
    }

    .mobile-menu-close span {
      position: absolute;
      top: 21px;
      left: 12px;
      width: 20px;
      height: 2px;
      background: currentColor;
      transform: rotate(45deg);
    }

    .mobile-menu-close span:last-child {
      transform: rotate(-45deg);
    }

    .mobile-nav,
    .mobile-subnav {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .mobile-nav-group {
      border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    .mobile-group-head {
      min-height: 64px;
      display: flex;
      align-items: center;
    }

    .mobile-group-head > a {
      flex: 1;
      font-size: 19px;
      font-weight: 750;
    }

    .mobile-group-toggle {
      width: 44px;
      height: 44px;
      border: 0;
      background: transparent;
      color: var(--white);
      font-size: 26px;
      cursor: pointer;
    }

    .mobile-group-toggle span {
      display: inline-block;
      transition: transform 160ms ease;
    }

    .mobile-group-toggle[aria-expanded="true"] span {
      transform: rotate(45deg);
    }

    .mobile-subnav {
      padding: 0 0 14px 14px;
    }

    .mobile-subnav[hidden] {
      display: none;
    }

    .mobile-subnav a {
      padding: 8px 0;
      display: block;
      color: rgba(255, 255, 255, .7);
      font-size: 15px;
    }

    .mobile-subnav a[aria-current="page"] {
      color: var(--white);
      font-weight: 750;
    }

    .mobile-menu-contact {
      padding-top: 28px;
      display: grid;
      gap: 16px;
    }

    .mobile-menu-contact > a:last-child span,
    .mobile-menu-contact > a:last-child strong {
      display: block;
    }

    .mobile-menu-contact > a:last-child span {
      color: rgba(255, 255, 255, .62);
      font-size: 12px;
    }

    .mobile-menu-contact > a:last-child strong {
      margin-top: 2px;
      font-size: 24px;
    }

    /* ── 히어로 ─────────────────────────────────────────
       운영 사이트는 법봉·천칭 스톡 사진 3장을 자동 로테이션했다. 슬라이더와
       스톡 사진을 모두 걷어내고 네이비 단색 + 타이포로 간다. 사선으로 자른
       파란 띠도 쓰지 않는다. 카피는 운영 사이트 문구를 그대로 쓴다. */

    .hero {
      position: relative;
      padding-block: clamp(52px, 8vw, 96px) calc(var(--board-lift) + clamp(46px, 6vw, 74px));
      background: var(--navy-deep);
      color: var(--white);
    }

    /* 히어로는 딱 한 화면이다. 16:9 로 고정했더니 화면을 넘겨 현황판이 아래로
       밀려났고, 반대로 현황판까지 한 화면에 다 넣으려니 히어로가 눌렸다.
       그래서 현황판을 다 보여주지 않는다 — 끌어올린 만큼만 영상 위에 걸치고
       나머지는 접힌 선 아래로 넘긴다. 잘린 아래쪽이 스크롤을 부른다.
       그래서 --board-lift 는 여기서 "겹침"이 아니라 "첫 화면에 보일 높이"다.
       svh 를 쓰는 이유: 모바일 주소창이 접혔다 펴져도 값이 튀지 않는다. */
    @media (min-width: 700px) {
      :root {
        --board-lift: clamp(140px, 20vh, 210px);
      }

      .hero {
        height: calc(100svh - var(--header-h));
        /* 세로가 짧은 창에서 글자가 눌리지 않게 하는 바닥값. 여기 걸리면
           히어로가 한 화면을 넘고, 그게 맞는 동작이다. */
        min-height: 520px;
        padding-block: 0 calc(var(--board-lift) + clamp(28px, 3vw, 44px));
        display: grid;
        align-content: center;
      }
    }

    .hero-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.82);
    }

    .hero > .shell {
      position: relative;
      z-index: 2;
    }

    /* 오버레이를 걷어냈으므로 영상 밝기는 그대로 두고 글자에만 그림자를 준다.
       이 영상은 좌측 최대 픽셀이 Y=247(도시 불빛)이라 밝은 프레임에서는
       흰 글씨가 대비 하한 아래로 내려간다. 그림자가 그 구간을 받쳐준다. */
    .hero-eyebrow,
    .hero h1,
    .hero-sub {
      text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.62),
        0 2px 14px rgba(0, 0, 0, 0.48);
    }

    .hero-eyebrow {
      max-width: 62ch;
      margin: 0;
      color: rgba(255, 255, 255, 0.76);
      font-size: var(--t-small);
      font-weight: 700;
      line-height: 1.6;
    }

    .hero h1 {
      max-width: 20ch;
      margin: 16px 0 0;
      font-size: var(--t-h1);
      font-weight: 800;
      line-height: 1.22;
      letter-spacing: -0.028em;
      text-wrap: balance;
    }

    .hero-sub {
      max-width: 46ch;
      margin: 18px 0 0;
      color: rgba(255, 255, 255, 0.86);
      font-size: var(--t-lead);
      line-height: 1.8;
    }

    .hero-actions {
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    /* ── 버튼 ───────────────────────────────────────────
       운영 사이트의 "바로가기 ____" 밑줄 화살표는 클릭 영역이 모호했다.
       버튼은 면적을 가진 사각형으로만 만든다. */

    .button {
      min-height: 50px;
      padding: 13px 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid transparent;
      background: none;
      font-size: var(--t-small);
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    }

    .button--wine {
      background: var(--wine);
      color: var(--white);
    }

    .button--wine:hover,
    .button--wine:focus-visible {
      background: #741625;
    }

    .button--navy {
      background: var(--navy);
      color: var(--white);
    }

    .button--navy:hover,
    .button--navy:focus-visible {
      background: var(--navy-deep);
    }

    .button--ghost {
      border-color: rgba(255, 255, 255, 0.5);
      color: var(--white);
    }

    .button--ghost:hover,
    .button--ghost:focus-visible {
      background: var(--white);
      color: var(--navy-deep);
    }

    .button--line {
      border-color: var(--rule);
      color: var(--navy);
    }

    .button--line:hover,
    .button--line:focus-visible {
      background: var(--navy);
      border-color: var(--navy);
      color: var(--white);
    }

    /* ── 상담 접수 현황판 ───────────────────────────────
       운영 사이트의 "온라인상담 현황"을 다듬은 것. 커피잔 아이콘과 분홍 하트를
       걷어내고, 실제 게시판 수치를 안내판처럼 읽히게 만든다.
       히어로 하단에 걸쳐 놓아 첫 화면에서 바로 보인다. */

    .board-wrap {
      margin-top: calc(var(--board-lift) * -1);
      position: relative;
      z-index: 5;
    }

    .board {
      background: var(--ink);
      color: var(--white);
      box-shadow: 0 18px 40px rgba(8, 33, 63, 0.22);
    }

    .board-top {
      padding: 15px 22px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.36);
    }

    .board-live {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--live);
      font-size: var(--t-label);
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .board-live::before {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--live);
      content: "";
      animation: blip 2.6s ease-in-out infinite;
    }

    @keyframes blip {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }

    .board-clock {
      margin-left: auto;
      color: rgba(255, 255, 255, 0.82);
      font-size: var(--t-label);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.06em;
    }

    .board-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr);
      gap: 1px;
      background: rgba(255, 255, 255, 0.36);
    }

    .board-cell {
      padding: 21px 22px 24px;
      background: var(--ink);
    }

    .board-cell dt {
      color: rgba(255, 255, 255, 0.78);
      font-size: var(--t-label);
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .board-cell dd {
      margin: 12px 0 0;
    }

    .board-num {
      display: block;
      font-size: clamp(2.3rem, 4.8vw, 3.4rem);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .board-num small {
      margin-left: 5px;
      font-size: var(--t-small);
      font-weight: 800;
      letter-spacing: 0;
    }

    .board-sub {
      margin-top: 9px;
      display: block;
      color: rgba(255, 255, 255, 0.78);
      font-size: 14px;
      line-height: 1.5;
    }

    .board-sub b {
      color: var(--live);
      font-weight: 800;
    }

    /* 접수 간격이 실제로 1~3일이다. "3분 전" 같은 분 단위 상대시간은 쓰지 않는다. */
    .board-recent {
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
    }

    .board-recent li {
      padding: 7px 0;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.18);
      font-size: 14px;
    }

    .board-recent li:first-child {
      border-top: 0;
    }

    .board-recent .who {
      font-weight: 800;
    }

    .board-recent .when {
      color: rgba(255, 255, 255, 0.78);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .board-foot {
      padding: 12px 22px;
      border-top: 1px solid rgba(255, 255, 255, 0.36);
      color: rgba(255, 255, 255, 0.78);
      font-size: 13px;
      line-height: 1.5;
    }

    /* ── 분할플랩 ───────────────────────────────────────
       안내판이 글자를 넘겨 목표값에 안착하는 동작. 이 페이지에서 유일하게
       허용된 등장 모션이다. transform·opacity만 쓴다. */

    .flap-board {
      display: inline-flex;
      gap: 2px;
      vertical-align: baseline;
    }

    .flap {
      position: relative;
      min-width: 0.64em;
      padding: 0.04em 0.03em;
      display: inline-grid;
      place-items: center;
      overflow: hidden;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.07);
      font-variant-numeric: tabular-nums;
    }

    /* 위아래 판이 갈라지는 이음매. 이 선 하나가 플랩처럼 보이게 만든다. */
    .flap::after {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      z-index: 2;
      height: 1px;
      background: rgba(0, 0, 0, 0.45);
      content: "";
    }

    .flap-sep {
      display: inline-grid;
      place-items: center;
      padding-inline: 0.02em;
      opacity: 0.75;
    }

    .flap-char {
      display: block;
      transform-origin: center top;
      backface-visibility: hidden;
    }

    .flap-char[data-turning="true"] {
      animation: flap-turn 130ms cubic-bezier(0.3, 0.85, 0.35, 1);
    }

    @keyframes flap-turn {
      from {
        opacity: 0.3;
        transform: translateY(-52%) rotateX(-84deg);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* 밝은 배경에서는 판때기 없이 넘어가는 동작만. 플랩 타일은 어두운 판에서만. */
    .flap-board--bare .flap {
      min-width: 0;
      padding: 0;
      background: none;
    }

    .flap-board--bare .flap::after {
      display: none;
    }

    /* ── 주요업무분야 ─────────────────────────────────── */

    .practice {
      padding-block: clamp(52px, 7vw, 88px);
    }

    .section-head h2 {
      margin: 14px 0 0;
      color: var(--navy);
      font-size: var(--t-h2);
      font-weight: 800;
      letter-spacing: -0.024em;
    }

    .section-head p {
      margin: 10px 0 0;
      color: var(--ink-2);
      font-size: var(--t-lead);
    }

    .practice-grid {
      margin-top: clamp(26px, 3.5vw, 40px);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      border: 1px solid var(--rule);
      background: var(--rule);
    }

    .practice-card {
      position: relative;
      min-height: 150px;
      padding: 22px 20px 24px;
      display: flex;
      flex-direction: column;
      background: var(--paper);
      transition: background 150ms ease, color 150ms ease;
    }

    .practice-card .no {
      color: var(--navy-soft);
      font-size: var(--t-label);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.1em;
      line-height: 1;
      transition: color 150ms ease;
    }

    .practice-card h3 {
      margin: 13px 0 0;
      color: var(--navy);
      font-size: var(--t-h3);
      font-weight: 800;
      letter-spacing: -0.024em;
      transition: color 150ms ease;
    }

    .practice-card p {
      margin: 8px 0 0;
      color: var(--ink-2);
      font-size: var(--t-small);
      line-height: 1.6;
      transition: color 150ms ease;
    }

    .practice-card .go {
      margin-top: auto;
      padding-top: 16px;
      color: var(--ink-3);
      font-size: var(--t-label);
      font-weight: 800;
      letter-spacing: 0.08em;
      transition: color 150ms ease;
    }

    .practice-card:hover,
    .practice-card:focus-visible {
      background: var(--navy);
      color: var(--white);
    }

    .practice-card:hover :is(h3, .no, p, .go),
    .practice-card:focus-visible :is(h3, .no, p, .go) {
      color: var(--white);
    }

    .practice-card:hover p,
    .practice-card:focus-visible p,
    .practice-card:hover .go,
    .practice-card:focus-visible .go {
      color: rgba(255, 255, 255, 0.86);
    }

    @media (max-width: 900px) {
      .practice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      .practice-grid {
        grid-template-columns: 1fr;
      }

      .practice-card {
        min-height: 0;
        padding: 18px;
      }
    }

    /* ── 관련 센터 ──────────────────────────────────────
       운영 사이트는 반지+법봉, 만년필 든 손 스톡 사진을 썼다. 그 클리셰 대신
       각 센터가 다루는 관계를 도형으로만 말하는 추상 이미지를 얹는다.
       (분할 / 본부와 지점 / 쌓이는 기록) */

    .centers {
      padding-block: clamp(46px, 6vw, 74px);
      background: var(--navy);
      color: var(--white);
    }

    .centers-grid {
      margin-top: clamp(22px, 3vw, 32px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1px;
      background: rgba(255, 255, 255, 0.36);
      border: 1px solid rgba(255, 255, 255, 0.36);
    }

    .center-card {
      position: relative;
      isolation: isolate;
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      background: var(--navy);
      overflow: hidden;
    }

    /* 사진은 카드 위에 띠로 얹지 않고 바탕에 깐다. 띠로 얹으면 카드가
       그만큼 길어져 원래 상자 크기가 달라진다. */
    .center-figure {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--navy);
    }

    .center-figure img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 글자가 사진 위에 그대로 얹히므로 스크림이 필수다. 위는 사진이 읽히게
       옅게, 본문이 앉는 아래로 갈수록 짙게. */
    .center-figure::after {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(21, 39, 62, 0.56) 0%,
        rgba(21, 39, 62, 0.70) 38%,
        rgba(21, 39, 62, 0.82) 70%,
        rgba(21, 39, 62, 0.87) 100%
      );
      content: "";
    }

    .center-card h3 {
      margin: 12px 0 0;
      font-size: var(--t-h3);
      font-weight: 800;
      letter-spacing: -0.024em;
    }

    .center-card p {
      margin: 9px 0 0;
      color: rgba(255, 255, 255, 0.82);
      font-size: var(--t-small);
      line-height: 1.6;
    }

    .center-card .go {
      margin-top: 18px;
      color: rgba(255, 255, 255, 0.9);
      font-size: var(--t-label);
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    /* 바탕이 사진이라 hover 로 배경색을 바꿔도 보이지 않는다. 스크림을 걷는
       방법도 써 봤지만, 라벨 대비가 4.56:1 로 기준에 딱 붙어 있어 조금만
       걷어도 아래로 내려간다. 그래서 글자 대비를 건드리지 않는 테두리로 알린다. */
    .center-card::after {
      position: absolute;
      inset: 0;
      z-index: 1;
      box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
      transition: box-shadow 150ms ease;
      pointer-events: none;
      content: "";
    }

    .center-card:hover::after,
    .center-card:focus-visible::after {
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
    }

    /* ── 상담 접수 ──────────────────────────────────────── */

    .consult {
      padding-block: clamp(52px, 7vw, 88px);
    }

    .consult-grid {
      margin-top: clamp(24px, 3vw, 36px);
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
      gap: clamp(24px, 3vw, 40px);
      align-items: start;
    }

    .tel-card {
      padding: 24px 22px;
      background: var(--navy);
      color: var(--white);
    }

    .tel-card > div + div {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.36);
    }

    .tel-card dt {
      color: rgba(255, 255, 255, 0.8);
      font-size: var(--t-label);
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .tel-card dd {
      margin: 8px 0 0;
      font-size: clamp(1.4rem, 2.4vw, 1.85rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .tel-card .addr {
      margin: 8px 0 0;
      color: rgba(255, 255, 255, 0.86);
      font-size: var(--t-small);
      font-style: normal;
      font-weight: 400;
      line-height: 1.6;
    }

    .form-card {
      padding: clamp(22px, 3vw, 32px);
      border: 1px solid var(--rule);
      background: var(--white);
    }

    .form-card h3 {
      margin: 0;
      color: var(--navy);
      font-size: var(--t-h3);
      font-weight: 800;
      letter-spacing: -0.024em;
    }

    .form-card > p {
      margin: 8px 0 0;
      color: var(--ink-2);
      font-size: var(--t-small);
    }

    .form-grid {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }

    .field {
      display: grid;
      gap: 7px;
    }

    .field--full {
      grid-column: 1 / -1;
    }

    .field label {
      color: var(--navy);
      font-size: var(--t-label);
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .field label .req {
      margin-left: 5px;
      color: var(--wine);
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid var(--rule);
      border-radius: 0;
      background: var(--white);
      font-size: var(--t-small);
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }

    .field input,
    .field select {
      min-height: 46px;
      padding: 0 13px;
    }

    .field textarea {
      min-height: 120px;
      padding: 12px 13px;
      line-height: 1.65;
      resize: vertical;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: var(--navy);
      outline: none;
      box-shadow: inset 0 0 0 1px var(--navy);
    }

    .field input::placeholder,
    .field textarea::placeholder {
      color: var(--ink-3);
      opacity: 1;
    }

    .consent {
      grid-column: 1 / -1;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--ink-2);
      font-size: 14px;
      line-height: 1.55;
    }

    .consent input {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin-top: 2px;
      accent-color: var(--navy);
    }

    .form-submit {
      grid-column: 1 / -1;
      width: 100%;
    }

    .form-status {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--wine);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.6;
    }

    .form-status:empty {
      display: none;
    }

    /* ── 모바일 미리보기 ────────────────────────────────
       레퍼런스는 아이폰 목업 3대 캐러셀. 화면 안에 넣은 것은 생성 이미지가
       아니라 이 사이트를 390px 로 실제 촬영한 스크린샷이다. 없는 앱 화면을
       지어내면 실존 법인 페이지에서 허위표시가 된다. */

    .phones {
      padding-block: clamp(48px, 6.5vw, 80px);
      background: var(--ink);
      color: var(--white);
      overflow: hidden;
    }

    .phones .section-head h2,
    .phones .section-head p {
      color: var(--white);
    }

    .phones .section-head p {
      color: rgba(255, 255, 255, 0.8);
    }

    .phone-stage {
      position: relative;
      height: clamp(400px, 46vw, 540px);
      margin-top: clamp(26px, 3.5vw, 40px);
      display: grid;
      place-items: center;
    }

    .phone {
      position: absolute;
      width: clamp(186px, 22vw, 252px);
      padding: 6px;
      display: grid;
      aspect-ratio: 390 / 844;
      border: 2px solid #55606d;
      border-radius: clamp(24px, 3vw, 34px);
      background: #0a0d11;
      box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
      transition: transform 620ms cubic-bezier(0.2, 0.75, 0.2, 1),
                  opacity 620ms ease, filter 620ms ease;
      will-change: transform, opacity;
    }

    .phone[data-pos="center"] {
      z-index: 3;
      opacity: 1;
      transform: translateX(0) scale(1);
    }

    .phone[data-pos="left"] {
      z-index: 2;
      opacity: 0.62;
      filter: brightness(0.78);
      transform: translateX(-70%) scale(0.84);
    }

    .phone[data-pos="right"] {
      z-index: 2;
      opacity: 0.62;
      filter: brightness(0.78);
      transform: translateX(70%) scale(0.84);
    }

    /* 화면 안 문구는 이미지에 굽지 않고 HTML 텍스트로 얹는다.
       생성 이미지의 한글은 깨지고, 수정할 때마다 재생성해야 하며,
       스크린리더가 읽지 못한다. */
    .phone-screen {
      position: relative;
      overflow: hidden;
      border-radius: calc(clamp(24px, 3vw, 34px) - 8px);
    }

    .phone-screen img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    /* 균일하게 덮으면 추상 이미지가 통째로 죽는다. 글자가 앉는 가운데 띠에만
       짙게 깔고 위아래는 이미지가 살아 있게 둔다. 가운데 0.80은 가장 밝은
       아이보리 면 위에서도 흰 글씨가 8.9:1이 나오는 값이라 낮추지 말 것. */
    .phone-screen::after {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
        rgba(8, 33, 63, 0.16) 0%,
        rgba(8, 33, 63, 0.16) 24%,
        rgba(8, 33, 63, 0.80) 41%,
        rgba(8, 33, 63, 0.80) 61%,
        rgba(8, 33, 63, 0.16) 78%,
        rgba(8, 33, 63, 0.16) 100%);
      content: "";
    }

    /* 문구는 화면 정중앙. 아래쪽에 두면 캐러셀 컨트롤이 덮는다. */
    .phone-line {
      position: absolute;
      inset: 0;
      z-index: 1;
      margin: 0;
      padding: 0 clamp(14px, 1.4vw, 20px);
      display: grid;
      place-items: center;
      color: var(--white);
      font-size: clamp(13px, 1.15vw, 16px);
      font-weight: 800;
      line-height: 1.55;
      letter-spacing: -0.022em;
      text-align: center;
      text-wrap: balance;
    }

    .phone-caption {
      margin: clamp(18px, 2.5vw, 26px) 0 0;
      color: rgba(255, 255, 255, 0.82);
      font-size: var(--t-small);
      font-weight: 700;
      text-align: center;
    }

    .phone-controls {
      position: absolute;
      bottom: 6px;
      left: 50%;
      z-index: 4;
      display: flex;
      gap: 12px;
      transform: translateX(-50%);
    }

    .phone-controls button {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 50%;
      background: rgba(21, 32, 43, 0.86);
      color: var(--white);
      cursor: pointer;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      transition: background 150ms ease, border-color 150ms ease;
    }

    .phone-controls button:hover,
    .phone-controls button:focus-visible {
      background: var(--navy);
      border-color: var(--white);
    }

    .phone-controls svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ── 오시는 길 ─────────────────────────────────────── */

    .visit {
      padding-block: clamp(46px, 6vw, 74px);
      background: var(--paper-2);
    }

    .visit-grid {
      margin-top: clamp(22px, 3vw, 32px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1px;
      border: 1px solid var(--rule);
      background: var(--rule);
    }

    .visit-grid > div {
      padding: 22px 20px;
      background: var(--paper-2);
    }

    .visit-grid h3 {
      margin: 12px 0 0;
      color: var(--navy);
      font-size: var(--t-h3);
      font-weight: 800;
      letter-spacing: -0.024em;
    }

    .visit-grid p,
    .visit-grid address {
      margin: 9px 0 0;
      color: var(--ink-2);
      font-size: var(--t-small);
      font-style: normal;
      line-height: 1.7;
    }

    .visit-grid a:not(.button) {
      border-bottom: 1px solid var(--rule);
      color: var(--navy);
      font-weight: 700;
    }

    .visit-grid a:not(.button):hover,
    .visit-grid a:not(.button):focus-visible {
      border-bottom-color: var(--navy);
    }

    .visit-grid .button {
      margin-top: 16px;
    }

    /* ── 푸터 ──────────────────────────────────────────── */

    .site-footer {
      padding-block: 40px 52px;
      background: var(--navy-deep);
      color: rgba(255, 255, 255, 0.8);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 28px;
    }

    .footer-brand {
      color: var(--white);
      font-size: var(--t-body);
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .footer-grid address,
    .footer-grid p {
      margin: 11px 0 0;
      font-size: 14px;
      font-style: normal;
      line-height: 1.8;
    }

    .footer-nav {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px 18px;
      font-size: 14px;
      font-weight: 700;
    }

    .footer-nav a:hover,
    .footer-nav a:focus-visible {
      color: var(--white);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .copyright {
      margin-top: 26px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.28);
      font-size: 12px;
    }

    .mobile-bar {
      display: none;
    }

    /* ── 반응형 ────────────────────────────────────────── */

    @media (max-width: 1023px) {
      :root { --header-h: 60px; }

      .site-header { height: 60px; }
      .header-inner { min-height: 60px; }
      .desktop-nav,
      .header-cta { display: none; }
      .menu-toggle { display: block; }

      .hero { padding-top: calc(52px + var(--header-h)); }

      .board-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .board-grid .board-cell:last-child {
        grid-column: 1 / -1;
      }

      .consult-grid {
        grid-template-columns: 1fr;
      }

      .site-footer {
        padding-bottom: 96px;
      }

      /* 법률 상담은 전화 전환이 크다. 모바일에서만 하단 바로 유지한다. */
      .mobile-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .mobile-bar a {
        min-height: 54px;
        display: grid;
        place-items: center;
        background: var(--navy);
        color: var(--white);
        font-size: var(--t-small);
        font-weight: 800;
      }

      .mobile-bar a:first-child {
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        background: var(--wine);
      }
    }

    @media (max-width: 560px) {
      .hero {
        padding-block: 40px calc(var(--board-lift) + 40px);
      }

      /* 버튼 폭이 글자 수에 따라 제각각이면 지저분하다. 세로로 쌓을 땐 폭을 맞춘다. */
      .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .brand {
        font-size: 15px;
      }

      .brand span {
        display: none;
      }

      .header-tel {
        padding: 7px 10px;
        font-size: 13px;
      }

      .header-tel b {
        display: none;
      }

      .board-cell {
        padding: 14px 14px 16px;
      }

      .board-num {
        font-size: 1.8rem;
      }

      .board-top {
        padding: 11px 14px;
      }

      .board-clock {
        margin-left: 0;
        flex-basis: 100%;
      }

      .board-recent li:nth-child(n + 3) {
        display: none;
      }

      .board-foot {
        padding: 10px 14px;
        font-size: 12px;
      }

      .practice-card {
        min-height: 0;
        padding: 18px;
      }

      /* 좁은 화면에서 ±70%면 측면 폰이 화면 밖으로 잘려 문구가 끊긴다. */
      .phone[data-pos="left"] {
        transform: translateX(-56%) scale(0.8);
      }

      .phone[data-pos="right"] {
        transform: translateX(56%) scale(0.8);
      }

      .phone-controls button {
        width: 42px;
        height: 42px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        /* iteration-count 를 같이 묶지 않으면 무한 반복 애니메이션이
           0.01ms 간격으로 깜빡인다. 모션을 줄이려다 점멸을 만드는 셈. */
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .board-live::before {
        animation: none !important;
        opacity: 1;
      }
    }

/* ── 헤더 드롭다운 ─────────────────────────────────────────
   운영 사이트의 7개 메뉴를 6개로 줄이고 세부는 드롭다운에 넣었다.
   불안한 상태로 들어온 사람에게 첫 화면 메뉴가 길면 그 자체가 벽이다. */
.nav-item { position: relative; }
.nav-drop {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  margin: 0; padding: 8px 0; list-style: none;
  background: var(--navy-deep);
  /* 붉은 선은 .nav-top::after 하나뿐이다. 여기에 border-top 을 또 그으면
     밑줄과 다른 높이에 두 번째 붉은 선이 생긴다. 대신 옅은 테두리로
     경계를 잡는다 — 패널 배경이 어두운 히어로와 같은 색이라 그림자만으로는
     경계가 보이지 않는다. */
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 32px rgba(10, 23, 38, .28);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 40;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-item[data-open="true"] .nav-drop {
  opacity: 1; visibility: visible; transform: none;
}
.nav-drop a {
  display: block; padding: 9px 18px;
  color: #fff; font-size: var(--t-small); text-decoration: none;
}
.nav-drop a:hover,
.nav-drop a:focus-visible { background: var(--navy-soft); }
.nav-drop a[aria-current="page"] { font-weight: 700; }
.nav-cross { display: block; color: rgba(255,255,255,.72); font-size: 12px; }

.footer-nav-title {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.72);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .15em;
}

@media (max-width: 900px) {
  /* 모바일에서는 겹치지 않고 펼쳐진다. hover 가 없는 기기라 숨기면 도달 불가. */
  .nav-drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; min-width: 0;
    padding: 0 0 8px 14px;
  }
}

/* ── 세부·개요 페이지 공통 ─────────────────────────────
   홈 히어로와 달리 영상 없이 색 면으로만 톤을 잇는다.
   상하 패딩은 홈 히어로보다 확실히 작게 — 낯선 페이지에서
   긴 밴드를 스크롤하는 것 자체가 피로다. */
.page-band {
  background: var(--navy-deep);
  color: var(--white);
  padding: clamp(40px, 7vw, 72px) 0;
}

.page-band h1 {
  margin: 14px 0 0;
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.028em;
}

.page-lead {
  margin: 16px 0 0;
  max-width: 44em;
  color: rgba(255, 255, 255, .86);
  font-size: var(--t-lead);
  line-height: 1.6;
}

.crumbs {
  font-size: var(--t-label);
  color: rgba(255, 255, 255, .78);
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover,
.crumbs a:focus-visible { text-decoration: underline; }

.crumbs span[aria-hidden] { margin: 0 6px; }

/* 본문 2열: 좌측 서브내비 + 우측 본문 */
.page-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.subnav {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
}

.subnav-title {
  margin: 0 0 10px;
  color: var(--ink-3);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .15em;
}

.subnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.subnav a {
  display: block;
  padding: 9px 0 9px 14px;
  border-left: 3px solid transparent;
  color: var(--ink-2);
  font-size: var(--t-small);
  text-decoration: none;
}

.subnav a:hover,
.subnav a:focus-visible {
  color: var(--navy);
  border-left-color: var(--rule);
}

.subnav a[aria-current="page"] {
  color: var(--navy);
  border-left-color: var(--wine);
  font-weight: 700;
}

/* 본문 블록 */
.block + .block { margin-top: clamp(36px, 4.5vw, 56px); }

.block h2 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -0.024em;
}

.block p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.7;
}

.block p + p { margin-top: 12px; }

.block-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.block-list li {
  position: relative;
  padding: 8px 0 8px 20px;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.6;
}

.block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 8px;
  height: 2px;
  background: var(--wine);
}

.block-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.block-steps li {
  counter-increment: step;
  position: relative;
  padding: 10px 0 10px 52px;
}

.block-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-soft);
  color: var(--white);
  font-size: var(--t-label);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.block-steps strong {
  display: block;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 700;
}

.block-steps span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.6;
}

.block-qa { margin: 0; }

.block-qa .qa {
  padding: 14px 0;
  border-top: 1px solid var(--paper-2);
}

.block-qa .qa:first-child { border-top: 0; }

.block-qa dt {
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 700;
}

.block-qa dd {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.6;
}

/* 하단 CTA 카드 */
.cta-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 6vw, 72px);
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--navy);
  color: var(--white);
}

.cta-card h2 {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -0.024em;
}

.cta-card p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: var(--t-small);
  line-height: 1.6;
}

.cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 어두운 카드 위 ghost 버튼은 밝은 테두리여야 읽힌다 */
.cta-card .button--ghost {
  border-color: rgba(255, 255, 255, .6);
  color: var(--white);
}

.cta-card .button--ghost:hover,
.cta-card .button--ghost:focus-visible {
  border-color: var(--white);
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 900px) {
  .page-body { grid-template-columns: 1fr; }

  /* 좌측 내비가 상단 가로 스크롤 칩으로 바뀐다 */
  .subnav { position: static; }

  .subnav ul {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .subnav li { flex: 0 0 auto; }

  .subnav a {
    padding: 8px 14px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    border-left-width: 1px;
    white-space: nowrap;
  }

  .subnav a[aria-current="page"] {
    border-color: var(--wine);
    color: var(--wine);
  }

  .cta-card { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
  .cta-actions,
  .cta-actions .button { width: 100%; }
}

/* ── 개요 페이지 카드 그리드 ───────────────────────────
   카드끼리 border 를 1px 겹치게(margin -1px) 해서 격자선을 만든다.
   grid 배경으로 선을 그리면 카드 수가 열 수로 안 나눠떨어질 때
   빈 셀이 통째로 색이 칠해진다 (형사 4장 → 05·06 자리 회색 블록). */
.overview {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rule);
}

.overview-card {
  position: relative;
  min-height: 150px;
  margin: -1px 0 0 -1px;
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: background 150ms ease, color 150ms ease;
}

.overview-card .no {
  color: var(--navy-soft);
  font-size: var(--t-label);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  line-height: 1;
  transition: color 150ms ease;
}

.overview-card h2 {
  margin: 13px 0 0;
  color: var(--navy);
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -0.024em;
  transition: color 150ms ease;
}

.overview-card .go {
  margin-top: auto;
  padding-top: 16px;
  color: var(--ink-3);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: color 150ms ease;
}

.overview-card:hover,
.overview-card:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.overview-card:hover :is(h2, .no, .go),
.overview-card:focus-visible :is(h2, .no, .go) {
  color: var(--white);
}

.overview-card:hover .go,
.overview-card:focus-visible .go {
  color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 900px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .overview-grid { grid-template-columns: 1fr; }
}

/* ── 상담 접수 페이지 ──────────────────────────────────
   안내는 짧게 왼쪽, 폼이 주인공. 홈의 접수 섹션과 같은
   폼 마크업을 쓰므로 .form-card 규칙을 공유한다. */
.consult-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.consult-info > div + div {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--paper-2);
}

.consult-info p {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.6;
}

.consult-info a { text-decoration: underline; }

@media (max-width: 900px) {
  .consult-body { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .nav-drop,
  .mobile-menu,
  .mobile-menu-panel,
  .practice-card-media img,
  .practice-anchor a,
  .practice-card-arrow {
    transition: none;
  }

  .practice-card:hover .practice-card-media img,
  .practice-card:focus-visible .practice-card-media img {
    transform: none;
  }
}

/* ── RP식 업무분야 상세페이지 ────────────────────────── */
.practice-hero {
  height: min(720px, 86svh);
  min-height: 620px;
  padding-top: 72px;
  display: grid;
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--white);
}

.practice-hero-inner {
  min-height: calc(min(720px, 86svh) - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  align-items: stretch;
}

.practice-hero-copy {
  max-width: 680px;
  padding: clamp(82px, 11vw, 148px) clamp(28px, 5vw, 72px) clamp(70px, 10vw, 130px) 0;
  align-self: center;
}

.practice-hero .crumbs {
  color: rgba(255, 255, 255, .66);
}

.practice-hero .crumbs a:hover,
.practice-hero .crumbs a:focus-visible {
  color: var(--white);
}

.practice-hero-label {
  margin: 34px 0 0;
  color: rgba(255, 255, 255, .64);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .16em;
}

.practice-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  font-weight: 780;
  line-height: 1.03;
  letter-spacing: -.045em;
}

.practice-hero-lead {
  max-width: 48ch;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--t-lead);
  line-height: 1.85;
}

.practice-hero-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.practice-hero-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy-deep), rgba(10, 23, 38, .08) 50%);
  content: "";
}

.practice-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.48) contrast(1.04);
}

.practice-hero-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 25%, rgba(44, 73, 110, .88), transparent 30%),
    linear-gradient(145deg, var(--navy-soft), var(--navy-deep) 72%);
}

.practice-layout {
  padding-block: clamp(5rem, 10vw, 9rem);
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(42px, 7vw, 96px);
}

.practice-anchor {
  position: sticky;
  top: 104px;
  align-self: start;
}

.practice-anchor > p {
  margin: 0 0 18px;
  color: var(--ink-3);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .14em;
}

.practice-anchor ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--paper-2);
}

.practice-anchor a {
  padding: 11px 0;
  display: block;
  border-bottom: 1px solid var(--paper-2);
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.practice-anchor a:hover,
.practice-anchor a:focus-visible,
.practice-anchor a[aria-current="location"] {
  color: var(--wine);
}

.practice-document {
  min-width: 0;
}

.practice-section {
  padding: clamp(48px, 7vw, 82px) 0;
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 72px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 100px;
}

.practice-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.practice-section h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 780;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.practice-section-body {
  min-width: 0;
}

.practice-prose p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.9;
}

.practice-prose p + p {
  margin-top: 18px;
}

.practice-list,
.practice-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--paper-2);
}

.practice-list li,
.practice-steps li {
  padding: 18px 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  border-bottom: 1px solid var(--paper-2);
  color: var(--ink-2);
  line-height: 1.65;
}

.item-no {
  color: var(--wine);
  font-size: var(--t-label);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.practice-steps strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 750;
}

.practice-steps p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.practice-faq {
  border-top: 1px solid var(--rule);
}

.practice-faq details {
  border-bottom: 1px solid var(--paper-2);
}

.practice-faq summary {
  position: relative;
  padding: 19px 46px 19px 0;
  color: var(--ink);
  font-weight: 730;
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
}

.practice-faq summary::-webkit-details-marker {
  display: none;
}

.practice-faq summary::after {
  position: absolute;
  top: 18px;
  right: 4px;
  color: var(--wine);
  font-size: 22px;
  font-weight: 400;
  content: "+";
}

.practice-faq details[open] summary::after {
  content: "−";
}

.practice-faq details p {
  margin: -2px 0 0;
  padding: 0 46px 22px 0;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.75;
}

.practice-commitment {
  padding-block: clamp(5rem, 11vw, 9rem);
  background: var(--navy-deep);
  color: var(--white);
}

.practice-commitment-inner {
  max-width: 920px;
}

.practice-commitment h2 {
  margin: 20px 0 0;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.practice-commitment p:last-child {
  max-width: 52ch;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .75);
  font-size: var(--t-lead);
}

.practice-related {
  padding-block: clamp(5rem, 10vw, 8rem);
}

.practice-related-head h2 {
  margin: 14px 0 0;
  color: var(--navy);
  font-size: var(--t-h2);
  letter-spacing: -.03em;
}

.practice-related-grid {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.practice-related-grid a {
  min-height: 74px;
  padding: 18px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  color: var(--navy);
  font-weight: 730;
}

.practice-related-grid a:nth-child(odd) {
  padding-right: 24px;
}

.practice-related-grid a:nth-child(even) {
  padding-left: 24px;
  border-left: 1px solid var(--rule);
}

.practice-related-grid a:hover,
.practice-related-grid a:focus-visible {
  color: var(--wine);
}

.practice-overview {
  padding-block: clamp(5rem, 10vw, 8rem);
}

.page-band {
  padding-top: calc(clamp(40px, 7vw, 72px) + 72px);
}

@media (max-width: 1023px) {
  .practice-hero {
    height: auto;
    min-height: 0;
    padding-top: 60px;
  }

  .practice-hero-inner {
    width: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .practice-hero-copy {
    width: var(--shell);
    margin-inline: auto;
    padding: 72px 0 64px;
  }

  .practice-hero h1 {
    font-size: clamp(2.6rem, 12vw, 4.4rem);
  }

  .practice-hero-media {
    height: clamp(280px, 48vw, 430px);
    min-height: 280px;
  }

  .practice-hero-media img {
    position: absolute;
    inset: 0;
  }

  .practice-hero-media::after {
    background: linear-gradient(180deg, var(--navy-deep), transparent 38%);
  }

  .practice-layout {
    width: 100%;
    padding: 0 0 clamp(4rem, 10vw, 7rem);
    display: block;
  }

  .practice-anchor {
    top: 60px;
    z-index: 20;
    padding: 0 var(--gutter);
    overflow-x: auto;
    background: rgba(244, 246, 249, .96);
    border-bottom: 1px solid var(--paper-2);
    backdrop-filter: blur(16px);
    scrollbar-width: none;
  }

  .practice-anchor::-webkit-scrollbar {
    display: none;
  }

  .practice-anchor > p {
    display: none;
  }

  .practice-anchor ol {
    width: max-content;
    display: flex;
    border: 0;
  }

  .practice-anchor a {
    padding: 14px 13px;
    border: 0;
    white-space: nowrap;
  }

  .practice-document {
    width: var(--shell);
    margin-inline: auto;
    padding-top: 54px;
  }

  .practice-section {
    grid-template-columns: 1fr;
    gap: 24px;
    scroll-margin-top: 118px;
  }

  .practice-related-grid {
    grid-template-columns: 1fr;
  }

  .practice-related-grid a:nth-child(odd),
  .practice-related-grid a:nth-child(even) {
    padding-inline: 4px;
    border-left: 0;
  }

  .page-band {
    padding-top: calc(clamp(40px, 7vw, 72px) + 60px);
  }
}

/* ── 법인소개·구성원 전용 페이지 (RP식) ────────────────── */

/* 밝은 페이지 히어로 — 소개·소속·오시는길 공통 도입부 */
.page-hero {
  padding: calc(var(--header-h) + clamp(48px, 8vw, 96px)) 0 clamp(40px, 6vw, 64px);
  background: var(--paper-2);
}

.page-hero .crumbs { color: var(--ink-3); }

.page-hero-label {
  margin: 30px 0 0;
  color: var(--ink-3);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .16em;
}

.page-hero h1 {
  margin: 12px 0 0;
  color: var(--navy);
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.page-hero-lead {
  margin: 18px 0 0;
  max-width: 560px;
  color: var(--ink-2);
  font-size: var(--t-lead);
  line-height: 1.7;
}

/* 인사말 — 사진 옆 본문, 서명으로 맺음 */
.greeting {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  padding-block: clamp(56px, 9vw, 110px);
}

.greeting-photo { margin: 0; }

.greeting-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.greeting-hook {
  margin: 0 0 28px;
  color: var(--navy);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.03em;
}

.greeting-body > p:not(.greeting-hook):not(.greeting-signature) {
  margin: 0 0 18px;
  color: var(--ink-2);
  line-height: 1.85;
}

.greeting-signature {
  margin: 36px 0 0;
  text-align: right;
  color: var(--ink);
  font-weight: 700;
}

/* 대표 변호사 — 다크 히어로 + 약력 그룹 */
.profile-hero {
  padding-top: var(--header-h);
  background: var(--navy-deep);
  color: var(--white);
}

.profile-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
}

.profile-hero-copy {
  padding-block: clamp(72px, 10vw, 130px);
  max-width: 640px;
}

.profile-hero .crumbs { color: rgba(255, 255, 255, .66); }

.profile-hero .crumbs a:hover,
.profile-hero .crumbs a:focus-visible { color: var(--white); }

.profile-hero .page-hero-label { color: rgba(255, 255, 255, .64); }

.profile-hero h1 {
  margin: 12px 0 0;
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.profile-role {
  margin-left: 10px;
  font-size: var(--t-h3);
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
}

.profile-hook {
  margin: 22px 0 0;
  max-width: 520px;
  color: rgba(255, 255, 255, .85);
  font-size: var(--t-lead);
  line-height: 1.7;
}

.profile-hero-photo {
  align-self: end;
  display: flex;
  align-items: flex-end;
}

.profile-hero-photo img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  object-position: bottom;
  display: block;
}

.profile-intro {
  padding-block: clamp(48px, 8vw, 88px) 0;
  max-width: 760px;
}

.profile-intro p {
  margin: 0 0 18px;
  color: var(--ink-2);
  line-height: 1.85;
}

.profile-groups {
  padding-block: clamp(40px, 6vw, 72px);
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.profile-group {
  display: grid;
  grid-template-columns: minmax(120px, .25fr) minmax(0, 1fr);
  gap: 20px;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--paper-2);
}

.profile-group h2 {
  margin: 0;
  color: var(--navy);
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.profile-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.profile-list li {
  color: var(--ink-2);
  line-height: 1.7;
}

/* 소속 변호사 — 타이포 카드 그리드 */
.roster-intro {
  padding-block: clamp(48px, 8vw, 88px) clamp(28px, 4vw, 40px);
  max-width: 760px;
}

.roster-intro p {
  margin: 0 0 18px;
  color: var(--ink-2);
  line-height: 1.85;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.roster-card {
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roster-card h2 {
  margin: 0;
  color: var(--navy);
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.roster-card h2 span {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 4px;
}

.roster-exam { margin: 2px 0 0; color: var(--ink-2); font-size: 0.925rem; }
.roster-school { margin: 0; color: var(--ink-3); font-size: 0.925rem; }
.roster-note { margin: 0; color: var(--ink-3); font-size: 0.925rem; }

.roster-fields {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.roster-fields li {
  padding: 5px 10px;
  background: var(--paper);
  color: var(--navy);
  font-size: 0.845rem;
  font-weight: 600;
  border: 1px solid var(--paper-2);
  border-radius: 999px;
}

/* 오시는 길 — 지도 + 정보 카드 */
.visit-map-section { padding-top: clamp(40px, 6vw, 64px); }

.visit-map {
  aspect-ratio: 16 / 7;
  min-height: 320px;
  background: var(--paper-2);
}

.visit-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.visit-map-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.visit-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  padding-block: clamp(32px, 5vw, 56px);
}

.visit-info-card {
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--paper-2);
}

.visit-info-card h2 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.visit-info-card p,
.visit-info-card address {
  margin: 0;
  font-style: normal;
  color: var(--ink-2);
  line-height: 1.8;
}

.visit-info-card a { color: var(--navy); font-weight: 600; }

.visit-steps-section h2,
.page-faq h2 {
  margin: 0 0 22px;
  color: var(--navy);
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.visit-steps-section,
.page-faq { padding-block: clamp(28px, 4vw, 48px); }

@media (max-width: 860px) {
  .greeting { grid-template-columns: 1fr; }

  .greeting-photo { max-width: 480px; }

  .profile-hero-inner { grid-template-columns: 1fr; }

  .profile-hero-copy { padding-bottom: 0; }

  .profile-hero-photo {
    max-width: 380px;
    margin-top: 24px;
  }

  .profile-group { grid-template-columns: 1fr; gap: 12px; }
}

/* 밝은 히어로 페이지(소개·소속·오시는길)는 헤더 글자도 어둡게 시작 */
.site-header[data-hero-header="light"] { color: var(--navy-deep); }

/* ── 상담 현황 페이지 (라이브 피드) ───────────────────── */
.status-hero {
  padding: calc(var(--header-h) + clamp(48px, 8vw, 88px)) 0 clamp(44px, 6vw, 72px);
  background: var(--navy-deep);
  color: var(--white);
}

.status-hero .crumbs { color: rgba(255, 255, 255, .66); }

.status-hero .crumbs a:hover,
.status-hero .crumbs a:focus-visible { color: var(--white); }

.status-hero-top {
  margin-top: 30px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.status-hero .page-hero-label { margin: 0; color: rgba(255, 255, 255, .64); }

.status-clock {
  margin: 0;
  color: rgba(255, 255, 255, .64);
  font-size: var(--t-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.status-hero h1 {
  margin: 12px 0 0;
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.status-hero-lead {
  margin: 18px 0 0;
  max-width: 560px;
  color: rgba(255, 255, 255, .85);
  font-size: var(--t-lead);
  line-height: 1.7;
}

.status-counters {
  margin: clamp(32px, 5vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .16);
}

.status-counter {
  padding: clamp(20px, 3vw, 32px);
  background: var(--navy-deep);
}

.status-counter dt {
  color: rgba(255, 255, 255, .64);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .1em;
}

.status-counter dd {
  margin: 10px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.status-counter .status-num {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.status-counter small {
  color: rgba(255, 255, 255, .64);
  font-size: 0.95rem;
  font-weight: 600;
}

.status-hero-note {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .6);
  font-size: 0.925rem;
}

/* 실시간 피드 */
.status-live { padding-block: clamp(56px, 8vw, 96px) clamp(32px, 5vw, 48px); }

.status-live-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.status-live-head h2,
.status-stats h2,
.status-flow h2 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.status-live-dot {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .12em;
}

.status-live-dot span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  animation: status-pulse 1.6s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 211, 156, .5); }
  50% { box-shadow: 0 0 0 7px rgba(99, 211, 156, 0); }
}

.status-feed {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.status-feed li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  padding: 15px 6px;
  border-bottom: 1px solid var(--paper-2);
}

.status-feed li.is-new {
  animation: status-enter 700ms cubic-bezier(0.22, 1, 0.36, 1);
  background: rgba(99, 211, 156, .08);
}

@keyframes status-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

.status-no {
  color: var(--ink-3);
  font-size: var(--t-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.status-title {
  color: var(--ink);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-field {
  color: var(--ink-3);
  font-size: 0.845rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

.status-badge--new { background: var(--paper); color: var(--navy); border: 1px solid var(--paper-2); }
.status-badge--review { background: #fbf3e4; color: #8a5a12; border: 1px solid #eeddb8; }
.status-badge--done { background: #e9f6ef; color: #16683c; border: 1px solid #cde9d8; }

.status-when {
  color: var(--ink-3);
  font-size: 0.845rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-feed-note {
  margin: 14px 0 0;
  color: var(--ink-3);
  font-size: 0.845rem;
}

/* 대형 시계 밴드 — 7세그먼트 디지털 표시 */
.status-clockband {
  padding-block: clamp(64px, 10vw, 120px);
  text-align: center;
}

.status-bigclock {
  margin: 34px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 14px);
}

.seg-digit {
  width: clamp(44px, 8.4vw, 104px);
  height: auto;
  display: block;
}

.seg-digit .seg { fill: rgba(142, 28, 46, .07); }
.seg-digit .seg.on { fill: var(--wine); }

.seg-colon {
  width: clamp(10px, 1.8vw, 22px);
  height: auto;
  display: block;
  animation: seg-blink 1s steps(1) infinite;
}

.seg-colon circle { fill: var(--wine); }

@keyframes seg-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.12; }
}

.status-bigdate {
  margin: 20px 0 0;
  color: var(--ink-2);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: .04em;
}

.status-clockline {
  margin: clamp(34px, 5vw, 52px) auto 0;
  max-width: 640px;
  color: var(--navy);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.03em;
}

.status-clocksub {
  margin: 14px auto 0;
  max-width: 560px;
  color: var(--ink-3);
  font-size: 0.95rem;
  line-height: 1.7;
}

.status-clockcta {
  margin-top: clamp(26px, 3.5vw, 38px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .seg-colon { animation: none; }
}

.status-flow { padding-block: clamp(32px, 5vw, 48px) clamp(48px, 7vw, 80px); }

.status-flow h2 { margin-bottom: 26px; }

@media (prefers-reduced-motion: reduce) {
  .status-live-dot span,
  .status-feed li.is-new,
  .status-trend .day-bar { animation: none; }
  .status-bars .bar-fill { transition: none; }
}

@media (max-width: 860px) {
  .status-counters { grid-template-columns: 1fr; }
  .status-stats-grid { grid-template-columns: 1fr; }
  .status-feed li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title badge" "field when";
    row-gap: 6px;
  }
  .status-no { display: none; }
  .status-title { grid-area: title; }
  .status-badge { grid-area: badge; }
  .status-field { grid-area: field; }
  .status-when { grid-area: when; justify-self: end; }
}

.board-foot-link { font-weight: 700; white-space: nowrap; }
.board-foot-link:hover, .board-foot-link:focus-visible { text-decoration: underline; }

/* ── 업무분야 랜딩 ─────────────────────────────────────
   홈 앵커(#practice) 대신 독립 페이지. 분야 5개를 큰 행으로 펼치고
   각 행 안에 세부 업무 링크를 모두 노출한다 — GNB 드롭다운에서 뺀
   22장이 여기서 한 번에 보인다. */
.practice-land-hero {
  padding: calc(var(--header-h) + clamp(52px, 8vw, 96px)) 0 clamp(44px, 6vw, 72px);
  background: var(--navy-deep);
  color: var(--white);
}

.practice-land-hero .crumbs { color: rgba(255, 255, 255, .66); }
.practice-land-hero .crumbs a:hover,
.practice-land-hero .crumbs a:focus-visible { color: var(--white); }
.practice-land-hero .page-hero-label { color: rgba(255, 255, 255, .64); }

.practice-land-hero h1 {
  margin: 12px 0 0;
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.practice-land-lead {
  margin: 18px 0 0;
  max-width: 620px;
  color: rgba(255, 255, 255, .85);
  font-size: var(--t-lead);
  line-height: 1.7;
}

.practice-land-facts {
  margin: clamp(30px, 4vw, 46px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
}

.practice-land-facts dt {
  color: rgba(255, 255, 255, .6);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .1em;
}

.practice-land-facts dd {
  margin: 8px 0 0;
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.practice-land-intro {
  padding-block: clamp(48px, 7vw, 80px) clamp(24px, 3vw, 36px);
  max-width: 760px;
}

.practice-land-intro p {
  margin: 0 0 18px;
  color: var(--ink-2);
  line-height: 1.85;
}

.practice-land { padding-bottom: clamp(48px, 7vw, 80px); }

.practice-land-row {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--paper-2);
}

.practice-land-row:first-child { border-top: 0; }

/* 짝수 행은 이미지를 오른쪽으로 — 같은 리듬이 다섯 번 반복되면 지루하다. */
.practice-land-row:nth-child(even) .practice-land-media { order: 2; }

.practice-land-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
}

.practice-land-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.practice-land-row:hover .practice-land-media img { transform: scale(1.04); }

.practice-land-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, var(--navy-soft), var(--navy-deep));
}

.practice-land-copy .no {
  color: var(--navy-soft);
  font-size: var(--t-label);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

.practice-land-copy h2 {
  margin: 10px 0 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.practice-land-copy h2 a { color: var(--navy); }

.practice-land-copy h2 a:hover,
.practice-land-copy h2 a:focus-visible { color: var(--wine); }

.practice-land-copy > p {
  margin: 12px 0 0;
  color: var(--ink-2);
  line-height: 1.75;
}

.practice-land-links {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.practice-land-links a {
  display: inline-block;
  padding: 7px 13px;
  background: var(--white);
  border: 1px solid var(--paper-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.practice-land-links a:hover,
.practice-land-links a:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.practice-land-go {
  margin-top: 20px;
  display: inline-block;
  color: var(--navy);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .08em;
}

.practice-land-go:hover,
.practice-land-go:focus-visible { color: var(--wine); }

@media (max-width: 860px) {
  .practice-land-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* 모바일에서는 이미지가 항상 먼저 — 지그재그는 두 칸일 때만 의미가 있다. */
  .practice-land-row:nth-child(even) .practice-land-media { order: 0; }
  .practice-land-media { aspect-ratio: 16 / 9; }
}

}