/* ============================================================
   법무사 여환동 사무소
   ------------------------------------------------------------
   먹색·회색 위주에 포인트 하나(남색). 절제된 문서 같은 느낌.
   색을 아껴 쓰면 본문이 가장 잘 읽히고, 나중에 바꾸기도 쉽다.

   글꼴: 시스템 글꼴만 쓴다. 폰트 파일을 서버에 올리지 않으므로
         라이선스 문제가 생기지 않고, 내려받는 게 없어 즉시 뜬다.
         (check FT-1 · FT-2 가 파일 업로드와 외부 CDN 을 막는다)

   반응형: 네이버·구글 모두 데스크톱과 모바일이 같은 URL 이기를 권한다.
           별도 모바일 주소를 만들지 않고 여기서 폭에 맞춘다.
   ============================================================ */

/*
 * Pretendard — SIL Open Font License 1.1
 * 파일은 public/fonts/pretendard/ 에 두고 근거는 data/site.json 의
 * fontLicenses 에 적어 두었다 (검사 FT-1). 바깥에서 불러오지 않으므로
 * 방문 기록이 다른 회사로 새지 않는다 (검사 FT-2).
 *
 * **「subset」판을 쓴다.** 처음에 「Std」판을 받았다가 파일을 열어 보니
 * 한글이 **한 글자도 없었다** — 이름과 달리 로마자만 담은 판이었다.
 * 화면은 멀쩡해 보였는데 한글만 맑은 고딕으로 물러나 있었다.
 * 그래서 woff2 의 cmap 을 직접 뜯어 맞춰 보고서야 골랐다.
 *
 * subset 판은 한글 2,780 음절을 담아 한 벌에 261KB 다.
 * 전체판은 765KB, 동적 서브셋은 92개 조각으로 갈려 있어 관리가 어렵다.
 *
 * 굵기는 **둘만** 둔다. 400 과 700 이다. 600(SemiBold)까지 받으면 262KB 가
 * 더 드는데, 700 으로 대신해도 눈에 띄게 달라지지 않는다.
 * 그래서 Bold 한 벌이 600~700 을 함께 맡는다.
 *
 * font-display: swap — 글꼴을 받는 동안 맑은 고딕으로 먼저 보여 준다.
 * 글이 안 보이는 순간이 없어야 한다.
 */
@font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/pretendard/Pretendard-Regular.subset.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("/fonts/pretendard/Pretendard-Bold.subset.woff2") format("woff2");
}

:root {
    /* 먹색과 회색. 회색에 푸른 기를 아주 조금 섞었다 —
       순회색은 바랜 인쇄물처럼 보이고, 남색 포인트와도 겉돈다. */
    --ink:        #14161A;
    --ink-2:      #4A4F57;
    --ink-3:      #6B717A;

    --paper:      #FFFFFF;
    --paper-2:    #F5F6F8;
    --paper-3:    #EDEFF3;
    --line:       #E4E7EC;
    --line-soft:  #F0F1F4;

    /* 포인트 하나. 링크와 전화 버튼에만 쓴다 */
    --accent:      #1B3A5C;
    --accent-deep: #12283F;
    --accent-pale: #EDF2F9;

    /*
     * 따뜻한 보조색.
     *
     * 화면이 흰색·회색·남색 셋뿐이라 「밋밋하다」는 말을 들었다.
     * 남색만으로는 아무리 잘 짜도 차가운 한 덩이가 된다.
     * 남색의 반대쪽(황토)을 **아주 좁은 자리에만** 놓아 온도를 만든다.
     *
     * **이 색으로 링크를 만들지 않는다.** 누를 수 있는 것은 남색 하나여야
     * 어디를 눌러야 하는지 헷갈리지 않는다. 이 색은 **표시**만 한다.
     *
     * warm      흰 바탕 위 글자·표시 (대비 4.99:1, AA 통과)
     * warm-lite 어두운 판 위
     * warm-pale 아주 옅은 바탕
     */
    --warm:      #8A6A3C;
    --warm-lite: #C9A063;
    --warm-pale: #FAF7F1;
    /*
     * 절의 판으로 쓰는 모래색. 글자는 먹색 그대로라 대비가 넉넉하다.
     *
     * 처음에 #F4EEE3 / #EBE1CE 로 넣었더니 **그 두 절만 색이 도드라졌다.**
     * 판은 「여기가 다른 절이다」를 알리는 것이지 눈을 끄는 것이 아니다.
     * 흰 바탕과 겨우 갈릴 만큼만 남기고 걷어냈다.
     */
    --sand:      #F9F6F0;
    --sand-deep: #F4EFE5;

    /*
     * 폰 아래 띠의 색. **차지도 따뜻하지도 않은 먹빛**이다.
     *
     * 전에는 남색(--accent)을 썼는데 뜬금없어 보였다. 까닭은 남색이
     * **차가운 색**이라는 데 있다. 본문 절이 모래색으로 따뜻한데
     * 그 아래 띠만 푸르니 따로 놀았다.
     *
     * 그렇다고 갈색으로 맞추면 이번에는 옅은 남색 절(.hsec-soft) 아래에서
     * 어긋난다. 띠는 **모든 절 아래에 깔리는 가구**라 어느 쪽으로도
     * 기울지 않아야 한다. 그래서 회색에 노랑을 아주 조금 섞은 먹빛으로 둔다.
     *
     * 덤으로 브랜드 색이 가장 잘 산다 —
     * 카카오 노랑 13.41:1, 네이버 초록 7.69:1, 흰 글자 14.36:1.
     */
    --chrome:      #2E2A25;
    --chrome-deep: #1C1A17;

    --wrap:   min(1040px, 100% - 3rem);
    /* 모서리. 3px 은 거의 각진 모서리라 2010년대 화면처럼 보였다.
       요즘 눈에는 12~16px 이 기본이고, 작은 것은 그보다 덜 둥글어야 한다. */
    --radius:    14px;
    --radius-sm:  9px;
    /* 그림자는 **한 겹이 아니라 두 겹**이다. 가까운 것은 또렷하고
       먼 것은 넓고 흐리다. 한 겹만 쓰면 종이가 떠 있지 않고 테두리처럼 보인다. */
    --lift:    0 1px 2px rgba(20, 22, 26, .04), 0 4px 16px rgba(20, 22, 26, .05);
    --lift-up: 0 2px 6px rgba(20, 22, 26, .06), 0 12px 28px rgba(20, 22, 26, .09);
}

* { box-sizing: border-box; }
/*
 * 글자 크기의 기준은 **html 이다.**
 *
 * body 에만 크기를 주고 있었더니 body 를 17px 로 올려도
 * rem 을 쓰는 것들(표·상자·제목·차례)은 그대로 16px 기준으로 계산되어
 * 본문만 커지고 나머지는 제자리였다. 표와 상자가 본문보다 작아 보인 이유다.
 *
 * px 이 아니라 % 로 적는다. 브라우저 기본 글꼴 크기를 키워 두신 분에게
 * px 은 그 설정을 덮어써 버린다 - % 는 그 위에 비례해서 얹힌다.
 *   106.25% = 16 x 1.0625 = 17px
 */
html {
    -webkit-text-size-adjust: 100%;
    font-size: 106.25%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    /* Pretendard 를 먼저, 못 받으면 시스템 글꼴로 물러선다.
       윈도우의 맑은 고딕은 그 자체가 관공서 문서의 인상을 갖고 있어
       글자만 바꿔도 화면의 연식이 달라진다. */
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
                 "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
    font-size: 1rem;
    line-height: 1.78;
    /* 숫자를 같은 너비로. 비용표의 자릿수가 들쭉날쭉하지 않게 한다 */
    font-feature-settings: "tnum" 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;        /* 한글은 낱말 단위로 끊어야 읽기 편하다 */
    overflow-wrap: break-word;
}

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

a { color: var(--accent); transition: color .15s ease; }
a:hover { color: var(--accent-deep); }

h1, h2, h3 { line-height: 1.42; letter-spacing: -.012em; margin: 0; }
h1 { font-size: 1.7rem; }
/*
 * 제목 아래 여백.
 *
 * margin 을 0 으로 깔고 h2 의 위쪽만 덮어써 두었더니 **아래가 0 이었다.**
 * h2 는 밑선까지 있어서 선 바로 밑에 글이 붙었고, h3 는 위아래가 다 0 이라
 * 앞 문단의 여백 하나에 기대고 있었다.
 * 제목은 아래 글을 거느리는 것이라 위가 넓고 아래가 좁아야 묶여 보인다.
 * 그 비율을 지키되 붙지는 않게 한다.
 */
/*
 * 밑선을 걷어냈다.
 *
 * 선으로 절을 가르면 화면이 **문서**로 보인다. 1px 회색 선이 카드·표·상자·제목에
 * 다 그어져 있으면 그것 하나하나는 단정한데 모아 놓으면 오래돼 보인다.
 * 위계는 **크기와 굵기와 여백**으로 세운다 —
 * 본문 17.9px 에 h2 를 24.6px(1.37배) 로 올리고 위 여백을 3.6rem 두면
 * 선이 없어도 새 절이 시작한 것이 한눈에 보인다.
 */
h2 {
    font-size: 1.37rem;
    font-weight: 700;
    letter-spacing: -.022em;
    margin-top: 3.6rem;
    margin-bottom: 1.05rem;
}
/*
 * 절 제목 위의 짧은 표시.
 *
 * 밑선을 걷어낸 뒤로 절과 절이 여백으로만 갈렸다. 깔끔했지만
 * 5,000자를 내려가는 동안 눈이 붙잡을 것이 하나도 없었다.
 *
 * **회색 선이 아니라 짧은 색 표시**다. 선은 화면을 문서로 만들지만
 * 32px 짜리 색 조각은 「여기서 새 절이 시작한다」는 표지로만 읽힌다.
 * main 안에서만 붙인다 — 관리 화면은 자기 CSS 를 쓴다.
 */
main h2::before {
    content: "";
    display: block;
    width: 2rem;
    height: 3px;
    margin-bottom: .85rem;
    border-radius: 2px;
    background: var(--warm);
}
/* 모래 판 위에서는 표시가 바탕에 묻힌다. 한 단계 진한 쪽을 쓴다 */
.hsec-sand h2::before,
.hsec-warm h2::before { background: #6B5230; }
h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2.1rem;
    margin-bottom: .6rem;
}
p { margin: 0 0 1rem; }

/* 본문 바로가기 — 평소엔 화면 밖, 탭하면 나타난다 */
.skip {
    position: absolute;
    left: -9999px;
    background: var(--ink);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── 머리말 ──────────────────────────────────────────── */
/*
 * 화면을 내려도 따라온다.
 * 전화 단추가 첫 화면에만 있으면 글을 읽다가 걸고 싶어진 순간에 없다.
 *
 * **backdrop-filter 를 걷어냈다 (2026-09-15).**
 *
 * 전에는 뒤가 비쳐 보이게 blur 를 걸고 「따라와도 무겁지 않다」고 적어 두었는데
 * **틀린 판단이었다.** `position: sticky` 와 `backdrop-filter` 가 함께 있으면
 * 브라우저가 **스크롤 한 프레임마다 머리말 뒤를 통째로 다시 흐리게** 만든다.
 * 글자를 끌어 선택하면 그때마다 또 다시 그린다.
 * 그래픽 드라이버가 못 받아 주면 CPU 가 떠맡고, 그러면 **화면이 멈춘다.**
 *
 * 사무소에서 실제로 겪었다 — 스크롤하다 온 화면이 파랗게 선택되며 멈췄다.
 * 크롬은 괜찮은데 다른 브라우저는 멈추던 것도 이것으로 설명된다.
 * 브라우저마다 이 일을 GPU 로 넘기는 방식이 다르다.
 *
 * **불투명한 바탕으로 바꾼다.** 보기에 거의 차이가 없고 공짜다.
 * 이 사이트에는 실행되는 스크립트가 한 줄도 없으니, 느려질 자리는 CSS 뿐이다.
 */
.site-head {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
    padding: .85rem 0 0;
}
.site-head .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
}
.brand {
    color: var(--ink);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.025em;
    white-space: nowrap;
}
.brand:hover { color: var(--ink); }

/* 포인트 색을 쓰는 유일한 버튼 */
.calls {
    margin-left: auto;
    display: flex;
    gap: .5rem;
}
.call {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    padding: .48rem 1.1rem;
    /* 히어로의 상담 버튼과 같은 알약 모양. 네모와 알약이 섞이면 따로 논다 */
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.call .ico { flex: none; opacity: .85 }
.call .num { font-variant-numeric: tabular-nums; letter-spacing: .01em }
.call:hover { background: var(--accent-deep) }
.call:hover { background: var(--accent-deep); color: #fff; }

/* 주 내비게이션 (GNB) — 검색엔진이 사이트 구조를 읽는 자리다 */
.gnb { flex-basis: 100%; }
.gnb ul {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.35rem;
}
.gnb a {
    display: inline-block;
    padding: .3rem 0 .55rem;
    color: var(--ink-2);
    text-decoration: none;
    font-size: .94rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.gnb a:hover,
.gnb a:focus { color: var(--ink); }
.gnb a[aria-current="page"] {
    color: var(--ink);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

/* ── 본문 ────────────────────────────────────────────── */
main { padding: 3.4rem 0 5.2rem; }
.lede {
    font-size: 1.05rem;
    color: var(--ink-2);
    margin: .6rem 0 1.8rem;
}

/* 홈 — 업무 카드 */
.cards {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    /*
     * **auto-fit 이다 — auto-fill 이 아니다.**
     *
     * auto-fill 은 **빈 칸도 그대로 세워 둔다.** 카드가 둘뿐인 「더 보실 것」에서
     * 1280px 기준 칸 셋이 서고 두 장만 차, 오른쪽에 324px 이 빈 채로 남았다.
     * auto-fit 은 빈 칸을 접어 남은 카드가 그 자리를 나눠 가진다 — 두 장이 각각 472px 이 된다.
     *
     * 칸이 다 차 있으면 둘은 똑같이 움직인다. 「다루는 일」 여덟 장은 달라지지 않는다.
     */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: .85rem;
}
/*
 * 읽을거리 카드 안의 **최근 글 두 편.**
 *
 * 카드가 넓어진 만큼 벌어 와야 한다. 묶음 이름만 있으면 「있다」는 것밖에
 * 알려 주지 못해 누를 까닭이 약하다. 제목이 보이면 그 자체가 미끼가 되고,
 * **홈에서 글로 바로 가는 길**이 생겨 검색로봇도 그만큼 빨리 닿는다.
 */
.cards .card-recent {
    list-style: none;
    margin: .7rem 0 0;
    padding: .65rem 0 0;
    border-top: 1px solid var(--line);
    font-size: .88rem;
}
.cards .card-recent li { margin: 0; }
.cards .card-recent li + li { margin-top: .3rem; }
.cards .card-recent a {
    display: block;
    color: var(--ink-2);
    text-decoration: none;
    /* 제목이 길어도 카드 높이가 튀지 않게 한 줄로 자른다 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cards .card-recent a:hover { color: var(--ink); text-decoration: underline; }
/* 기호가 있는 카드는 칸이 짜여 있어 자리를 따로 일러 주어야 한다 */
.cards .card.has-ico > .card-recent { grid-area: 4 / 1 / 5 / -1; }
/*
 * 테두리 대신 종이로.
 *
 * 1px 선으로 두른 네모는 「표의 칸」처럼 보이고, 그림자로 살짝 띄운 종이는
 * 「누를 수 있는 것」처럼 보인다. 하는 일이 같아도 인상이 다르다.
 */
.cards .card {
    background: var(--paper);
    border: 0;
    border-radius: var(--radius);
    padding: 1.35rem 1.4rem 1.45rem;
    box-shadow: var(--lift);
    transition: box-shadow .18s ease, transform .18s ease;
}
.cards .card:hover {
    box-shadow: var(--lift-up);
    transform: translateY(-2px);
}
/*
 * **기호 옆에 상황 한 줄.**
 *
 * 전에는 기호 · 상황 · 이름 · 설명을 네 줄로 쌓았다. 그러니 기호 한 칸이
 * 40px 을 통째로 쓰면서 카드가 그만큼 길어졌고, 기호와 상황 줄이
 * 따로 노는 것처럼 보였다.
 *
 * 둘은 같은 말을 한다 — 기호는 그림으로, 상황 줄은 글로.
 * 한 줄에 나란히 두면 **카드 머리 한 줄**이 되고 40px 이 절약된다.
 *
 * HTML 은 그대로 두고 격자로만 자리를 잡는다. 기호와 상황 줄이 첫 줄을
 * 나눠 쓰고, 이름과 설명은 아래에서 칸 전체를 쓴다.
 * 둘 중 키가 큰 쪽에 맞춰 다른 쪽을 가운데로 둔다 —
 * 상황 줄이 두 줄로 넘어가면 이번엔 기호가 가운데에 선다.
 */
.cards .card.has-ico {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .6rem;
    align-content: start;
}
.cards .card.has-ico > .card-ico  { grid-area: 1 / 1; align-self: center; margin: 0 0 .7rem; }
.cards .card.has-ico > .card-hook { grid-area: 1 / 2; align-self: center; margin: 0 0 .7rem; }
.cards .card.has-ico > h3         { grid-area: 2 / 1 / 3 / -1; margin: 0 0 .35rem; }
.cards .card.has-ico > p          { grid-area: 3 / 1 / 4 / -1; margin: 0; }

/*
 * 카드 위의 선 도형.
 *
 * 옅은 남색 판에 남색 선(10.33:1). 도형이 뜻을 지는 것이 아니라
 * 카드를 **글 덩어리에서 떼어내는** 일만 하므로 작고 조용해야 한다.
 * 네모에 가까운 둥근 모서리를 쓴 까닭은, 동그라미로 하면 떠 있는 연락 단추와
 * 같은 모양이 되어 「눌러야 할 것」처럼 보이기 때문이다.
 */
.cards .card-ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: .8rem;
    border-radius: 11px;
    /*
     * 판을 한 단 진하게.
     *
     * --accent-pale(#EDF2F9) 로 두었더니 **흰 카드에서만** 보였다.
     * 홈의 절 안쪽 카드는 바탕이 #F5F6F8 이라 둘이 거의 같은 밝기였고,
     * 마우스를 올리면 카드가 바로 그 #EDF2F9 로 바뀌어 판이 아예 사라졌다.
     * 흰 카드·회색 카드·올렸을 때, 셋 다에서 갈리는 값으로 내린다.
     */
    background: #DDE7F4;
    color: var(--accent);
}

/*
 * 상황 한 줄.
 *
 * 제목보다 **위에** 온다. 찾아온 사람은 「민사독촉」을 찾아온 것이 아니라
 * 「받을 돈을 못 받고」 온 것이라, 자기 처지를 먼저 만나야
 * 그다음 줄의 업무 이름이 자기 것으로 읽힌다.
 *
 * 황토로 둔다 — 남색 도형과 먹색 제목 사이에서 이 줄만 색이 다르다.
 * 옅은 황토 바탕 위 황토 글씨는 4.67:1 로 읽힌다.
 */
.cards .card-hook {
    /*
     * **알약을 벗긴다.**
     *
     * 두 가지가 걸렸다.
     *
     * 하나, 카드 안에 **왼쪽 끝이 셋**이 되었다. 제목과 설명은 카드 안쪽
     * 여백 끝(0)에서 시작하는데 알약은 제 안쪽 여백 때문에 글자가 11px,
     * 기호는 판 가운데 정렬이라 그림이 9px 안쪽에서 시작했다.
     * 눈은 그 계단을 「줄이 안 맞는다」로 읽는다.
     *
     * 둘, 알약 바탕 #FAF7F1 이 카드 바탕 #F5F6F8 과 거의 같은 밝기라
     * 모양이 잡히지 않고 **얼룩처럼** 보였다.
     *
     * 바탕을 벗기면 둘 다 없어진다. 글자만 황토로 두어도 제 몫은 한다 —
     * 작고, 굵고, 색이 다르다.
     */
    display: block;
    margin: 0 0 .25rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.012em;
    /* --warm(#8A6A3C) 보다 한 단 어둡다. 마우스를 올려 카드가 옅은 남색이
       될 때까지 4.5:1 을 지키려면 여기까지 내려와야 한다 */
    color: #7A5C32;
    word-break: keep-all;
}

.cards h3 { margin: 0 0 .45rem; font-size: 1.06rem; font-weight: 700; }
.cards h3 a { text-decoration: none; }
.cards p { margin: 0; font-size: .92rem; line-height: 1.72; color: var(--ink-2); }

/* 허브 — 스포크 목록.
   목록은 길잡이이지 본문이 아니다. 옅은 상자에 담아 아래 해설과 갈라 놓는다.
   상자가 없으면 목록 끝과 해설 첫 줄이 붙어 어디까지가 목록인지 알 수 없다. */
/*
 * 허브의 업무 목차.
 *
 * 전에는 옅은 상자 하나에 24줄을 세로로 쌓았다. 줄마다 밑선이 있어
 * **표처럼 보였고**, 상업등기는 24줄이라 화면 두 판을 넘어갔다.
 *
 * 홈의 「다루는 일」과 같은 카드 격자로 바꾼다. 세 칸씩 서니
 * 24줄이 **여덟 줄**로 줄고, 줄 세는 눈이 아니라 훑는 눈으로 읽힌다.
 * 상자를 벗긴 까닭은 카드가 이미 덩어리를 이루기 때문이다 —
 * 상자 안에 카드를 또 넣으면 테두리가 두 겹이 된다.
 */
.spoke-list {
    margin: 1.8rem 0 3.4rem;
    padding: 0;
    background: transparent;
    border: 0;
}
.spoke-list > h2 {
    margin: 0;
    padding: 0;
    font-size: 1.24rem;
    font-weight: 700;
    letter-spacing: -.022em;
    border: 0;
}

.spokes {
    list-style: none;
    margin: 1.3rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .8rem;
    /* 한 줄 안의 카드는 **같은 높이**로 늘인다.
       설명 길이가 제각각이라 start 로 두면 카드 아래에 들쭉날쭉한 빈 자리가
       생겨 격자가 흐트러진다. 늘여 두면 아래 선이 한 줄로 맞는다. */
    align-items: stretch;
}
.spokes > li {
    background: var(--paper-2);
    border: 0;
    border-radius: 12px;
    padding: 1.25rem 1.35rem 1.35rem;
    transition: background .18s ease, transform .18s ease;
}
.spokes > li:hover {
    background: var(--accent-pale);
    transform: translateY(-2px);
}
/*
 * 가지를 가진 카드는 두 줄을 차지한다.
 *
 * 강제집행의 「채권압류 및 추심명령」 하나뿐이다. 그 카드가 425px 인데
 * 옆 카드는 133px 이라, 그냥 두면 옆에 290px 짜리 구멍이 생긴다.
 * 두 칸을 차지하게 하고 dense 로 뒤 카드를 끌어와 메운다.
 *
 * :has() 를 모르는 낡은 브라우저에서는 예전처럼 구멍이 남을 뿐 깨지지 않는다.
 */
.spokes { grid-auto-flow: dense; }
.spokes > li:has(> ul) { grid-row: span 2; }
/* 지역 층 목록은 한 줄 설명이 없어 카드가 얕다. 위아래를 조금 줄인다 */
.spokes.plain > li { padding: 1.05rem 1.35rem 1.1rem; }

/*
 * 가지 카드 — 가지를 가진 장(예: 양산 개인회생·파산) 안에서 그 가지를 세운다.
 *
 * 이 장에 들어온 사람은 대개 가지 가운데 하나를 찾아 왔다. 그래서 **이 장의 주인공**이다.
 * 허브 카드보다 크게, 흰 바탕에 테두리를 둘러 눌러야 할 곳임을 드러내고,
 * 화살표를 붙여 「들어가는 곳」이라는 것을 알린다.
 */
.kid-cards { margin: 1.3rem 0 2.2rem; }
.kid-cards .spokes {
    margin-top: 0;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kid-cards .spokes > li {
    padding: 1.3rem 1.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
}
.kid-cards .spokes > li > a {
    display: block;
    font-size: 1.15rem;
}
.kid-cards .spokes > li > a::after { content: '  →'; color: var(--ink-3); }
.spokes > li > a {
    text-decoration: none;
    font-weight: 700;
    font-size: 1.02rem;
}
.spokes a { text-decoration: none; font-weight: 500; }
.spokes a:hover { text-decoration: underline; }
/*
 * 카드 안의 가지. 강제집행의 「채권압류 및 추심명령」 하나만 자식을 갖는다.
 * 격자에서는 들여쓰기로 가지를 보일 수 없으므로, **같은 카드 안에**
 * 실선 하나로 나누어 담는다. 그 카드만 길어지지만 align-items:start 라
 * 옆 카드가 따라 늘어나지 않는다.
 */
.spokes ul {
    list-style: none;
    margin: .85rem 0 0;
    padding: .7rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
}
.spokes ul li { padding: .3rem 0; }
.spokes ul a { font-weight: 400; font-size: .95rem; }
/* 한 줄 설명. 제목만 늘어놓으면 눌러 봐야 무엇이 다른지 안다 */
.spokes .sum {
    display: block;
    margin-top: .38rem;
    font-size: .9rem;
    line-height: 1.68;
    color: var(--ink-2);
}

@media (max-width: 720px) {
    .spoke-list { margin: 1.4rem 0 2.6rem; padding: 0; }
    .spoke-list > h2 { font-size: 1.12rem; }
    .spokes { gap: .7rem; margin-top: 1.1rem; }
    .spokes > li { padding: 1.1rem 1.2rem 1.2rem; }
    .spokes.plain > li { padding: .95rem 1.2rem 1rem; }
    /* 칸 너비를 재는 방식이라 좁아지면 저절로 한 칸이 된다. 여백만 줄인다 */
    .toc { padding: 1rem 1.1rem; }
}

/* 목표 검색어 — 작업 중 참고용이라 눈에 띄지 않게 */
.kw { margin-left: .5rem; font-size: .86rem; color: var(--ink-3); }
.kw::before { content: "· "; }

/* 초안 표시. 운영에서는 초안이 보이지 않으므로 나오지 않는다 */
.draft {
    display: inline-block;
    margin-left: .45rem;
    padding: .1rem .5rem;
    font-size: .72rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ink-3);
    background: var(--paper-3);
    border: 0;
    border-radius: 999px;
    vertical-align: 2px;
}

.external, .todo { color: var(--ink-2); }

/* ── 오류 화면 ───────────────────────────────────────── */
.error { text-align: center; padding: 3.5rem 0; }
.error .code { font-size: 2.8rem; font-weight: 700; color: var(--ink-3); margin: 0; }
.error h1 { margin: .3rem 0 .6rem; }
.error .detail { color: var(--ink-2); }
.error .back { margin-top: 1.6rem; }

/* ── 바닥글 ──────────────────────────────────────────── */
.site-foot {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    padding: 2.1rem 0 4.8rem;      /* 아래 여백은 모바일 고정 버튼 자리 */
    font-size: .9rem;
    color: var(--ink-2);
}
.site-foot .office-name {
    font-weight: 700;
    color: var(--ink);
    font-size: 1rem;
    margin-bottom: .7rem;
}
.site-foot dl {
    margin: 0;
    display: grid;
    grid-template-columns: 5.4rem 1fr;
    gap: .32rem .9rem;
}
.site-foot dt { color: var(--ink-3); }
.site-foot dd { margin: 0; }
.foot-nav {
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
}
.foot-nav a { text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }

.site-foot .siblings { margin-top: .9rem; }
.site-foot .siblings a { margin-right: 1.1rem; }

/* ── 글 블록 ─────────────────────────────────────────── */
/*
 * 목록은 자기 자리를 스스로 잡는다.
 *
 * 사진이 옆에 떠 있으면(float) **인라인 글자만 밀리고 불릿은 밀리지 않는다.**
 * 브라우저가 그렇게 정해 두었다 - float 는 줄상자를 좁힐 뿐 블록 박스는 그대로 둔다.
 * 그래서 불릿이 사진 뒤에 남고 글자만 오른쪽으로 가, 둘 사이가 250px 씩 벌어졌다.
 *
 * flow-root 로 새 서식 문맥을 만들면 목록 상자 전체가 사진을 피해 자리를 잡는다.
 * 사진이 없는 곳에서는 아무 일도 일어나지 않는다.
 */
.blk-list { margin: 0 0 1.2rem; padding-left: 1.3rem; display: flow-root; }
.blk-list li { margin-bottom: .35rem; }

/* 절차 단계 — 화면의 번호 목록이 그대로 HowTo 구조화 데이터가 된다 */
.blk-steps {
    list-style: none;
    display: flow-root;   /* 사진이 옆에 뜨면 번호가 사진 뒤에 남는다 */
    counter-reset: step;
    margin: 1.1rem 0 1.6rem;
    padding: 0;
}
.blk-steps > li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.05rem 1.95rem;
}
/*
 * 번호는 자리를 알려 주는 표지이지 읽을 것이 아니다.
 * 지름을 1.8rem 으로 잡았더니 본문 한 줄 높이(16px x 1.78 = 28.5px)와 같아져
 * 글보다 번호가 먼저 읽혔다. 1.4rem 을 거쳐 1.25rem(20px)까지 줄였다 —
 * 본문 한 줄의 일곱 할쯤이라 눈에 띄되 앞서지 않는다.
 * top 은 첫 줄 한가운데(14.2px)에 원의 한가운데가 오도록 맞춘 값이다.
 */
.blk-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: .265rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 50%;
    font-feature-settings: "tnum";
}
.blk-steps > li:last-child { padding-bottom: 0; }
.blk-steps strong { font-weight: 700; }
.blk-steps p { margin: .3rem 0 0; color: var(--ink-2); font-size: .94rem; }

/* 표 — 좁은 화면에서는 표만 가로로 밀린다. 본문은 밀리지 않는다 */
.blk-table-wrap {
    overflow-x: auto;
    margin: 1.2rem 0 1.8rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--lift);
}
.blk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}
.blk-table caption {
    text-align: left;
    color: var(--ink-3);
    font-size: .92rem;
    padding-bottom: .45rem;
}
.blk-table th, .blk-table td {
    padding: .8rem .95rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}
.blk-table tbody tr:last-child th,
.blk-table tbody tr:last-child td { border-bottom: 0; }
.blk-table thead th {
    background: var(--paper-2);
    border-bottom: 0;
    font-weight: 700;
    white-space: nowrap;
    color: var(--ink-2);
    font-size: .93rem;
    letter-spacing: .01em;
}
/* 표를 종이 한 장으로 감싼다. 격자가 아니라 한 덩이로 보여야 한다 */
.blk-table-wrap > .blk-table { background: var(--paper); }
.blk-table tbody th { font-weight: 500; white-space: nowrap; color: var(--ink-2); }
/*
 * 좁은 화면에서는 머리칸과 첫 칸도 줄을 바꾼다.
 *
 * 넓은 화면에서 첫 칸을 한 줄로 묶는 것은 「세율」「관할」처럼 짧은 이름표가
 * 두 줄로 쪼개지지 않게 하려는 것이다. 그런데 첫 칸에 「부동산 · 예금 · 자동차 ·
 * 보험 해약환급금 · 임차보증금」처럼 긴 말이 들어가면, 휴대폰에서 그 칸 하나가
 * 화면 폭을 다 먹어 표 전체가 옆으로 밀리고 오른쪽 칸은 한 글자씩 세로로 쌓였다.
 * 첫 칸이 긴 표가 발행 장에만 이백 줄이 넘어, 글을 고치지 않고 여기서 푼다.
 * keep-all 로 낱말 가운데서는 끊지 않고, 첫 칸은 너무 좁아지지 않게 폭을 받친다.
 * 칸 좌우 여백도 줄인다 — 네 칸짜리 세율표가 여백만으로 화면을 넘겼다.
 */
@media (max-width: 720px) {
    .blk-table th, .blk-table td { padding: .7rem .6rem; }
    .blk-table thead th,
    .blk-table tbody th { white-space: normal; word-break: keep-all; }
    .blk-table tbody th { min-width: 5.5em; }
    .blk-table td { word-break: keep-all; overflow-wrap: anywhere; }
}

/* ── 단추 줄 ──────────────────────────────────────────────
 * 지도 앱으로 보내는 자리. 셋을 나란히 두고 좁아지면 아래로 쌓는다.
 */
.linkrow {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.3rem 0 .4rem;
}
.linkbtn {
    flex: 1 1 10rem;
    display: block;
    padding: .85rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    text-decoration: none;
    text-align: center;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.linkbtn:hover {
    border-color: var(--accent);
    box-shadow: var(--lift);
    transform: translateY(-1px);
}
.linkbtn b {
    display: block;
    font-size: .98rem;
    font-weight: 700;
    color: var(--accent);
}
.linkbtn span {
    display: block;
    margin-top: .12rem;
    font-size: .84rem;
    color: var(--ink-3);
}
/* 바깥으로 나간다는 ↗ 는 이름 옆에 붙인다 */
.linkbtn.ext::after { content: none; }
.linkbtn.ext b::after { content: " ↗"; font-size: .85em; opacity: .6; }

/*
 * 옆으로 건너가는 한 줄 — 전국 장 ↔ 지역 낱장.
 *
 * 상자에 담지 않는다. 상자는 「읽어야 할 것」이라는 뜻인데
 * 이 줄은 **지금 글이 끝난 뒤에 갈 곳**을 가리킬 뿐이다.
 * 위에 가는 선 하나로 본문과 갈라 놓고, 글자는 한 단 작게 둔다.
 */
.xlink {
    margin: 1.9rem 0 .2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
    font-size: .93rem;
    line-height: 1.75;
    color: var(--ink-2);
}
.xlink b { font-weight: 700; color: var(--ink); }

/* 그림 HTML — 클로드가 그린 흐름도 같은 것을 원본 그대로 싣는 자리 (lib/htmlblock.js).
 * 색과 모양은 그 HTML 의 것을 따른다. 여기서는 자리만 잡는다 —
 * 폭이 넓으면 옆으로 밀어 보게 하고(쪽 전체가 옆으로 밀리지 않게), 그림은 칸을 넘지 않게. */
.blk-html {
    margin: 1.6rem 0 1.9rem;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.blk-html img, .blk-html svg { max-width: 100%; height: auto; }
.blk-html [data-was] { font-weight: 700; font-size: 1.12em; margin: .2em 0 .6em; }

/* 안내 상자 */
/*
 * 왼쪽 막대를 걷어냈다. 막대 + 회색 바탕은 옛 게시판의 인용문 모양이다.
 * 둥근 바탕 하나로도 「본문이 아닌 것」은 충분히 갈린다.
 */
.blk-note {
    display: flow-root;   /* 사진 옆에서 배경이 사진 위로 겹치지 않게 */
    margin: 1.3rem 0 1.7rem;
    padding: 1.05rem 1.25rem;
    border-left: 0;
    border-radius: var(--radius-sm);
    /* 회색이 아니라 아주 옅은 모래색. 글 하나에 상자가 여러 개씩 나오는데
       전부 회색이면 화면이 한 덩이로 식는다 */
    background: var(--warm-pale);
}
.blk-note.warn { background: #FDF4EE; }
/* 「참고」 라벨. 상자 안에서 가장 작은 글자라 색이 있어야 눈에 든다 */
.blk-note b { display: block; font-size: .9rem; color: var(--warm); margin-bottom: .2rem; }
.blk-note.warn b { color: var(--accent); }
.blk-note p { margin: 0; font-size: 1rem; }
/* 눈에 띄게 세우는 상자 — 사무소가 꼭 보이기를 바라는 한마디. 한 장에 한 번만 */
.blk-note.strong {
    background: #FFF8F1;
    border: 2px solid var(--accent);
    padding: 1.2rem 1.4rem;
}
.blk-note.strong b { font-size: 1rem; color: var(--accent); margin-bottom: .35rem; }
.blk-note.strong p { font-size: 1.08rem; line-height: 1.75; }

/* ── 자주 묻는 질문 ───────────────────────────────────────
 *
 * <details> 로 접는다. **자바스크립트가 없다** — 브라우저가 하는 일이다.
 * 여섯 개를 죽 펼쳐 두면 홈이 600자 길어지는데, 접으면 여섯 줄이 된다.
 * 접어도 답은 HTML 안에 그대로 있어 검색엔진과 AI 는 읽어 간다.
 */
.faq-group {
    margin: 2.2rem 0 .3rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: .02em;
}
.faq-group:first-of-type { margin-top: 1.2rem; }

.blk-faq-item { border-bottom: 1px solid var(--line-soft); }
.blk-faq-item:last-child { border-bottom: 0; }

.blk-faq-item > summary {
    position: relative;
    padding: .95rem 2.4rem .95rem 0;
    cursor: pointer;
    list-style: none;                 /* 기본 삼각형을 지운다 */
    transition: color .15s ease;
}
.blk-faq-item > summary::-webkit-details-marker { display: none; }
.blk-faq-item > summary:hover { color: var(--accent); }
.blk-faq-item > summary h4 {
    display: inline;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
}
/* 여닫는 표시. 손가락이 닿는 자리를 넉넉히 둔다 */
.blk-faq-item > summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: .1rem;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--ink-3);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
}
.blk-faq-item[open] > summary::after {
    content: "\2212";                 /* 빼기표. 하이픈보다 길어 눈에 맞는다 */
    background: var(--accent-pale);
    color: var(--accent);
}
.blk-faq-item > p {
    margin: 0;
    padding: 0 2.4rem 1.15rem 0;
    color: var(--ink-2);
}

/* 저자 표시 — 글 끝에 짧게. 길면 89편이 서로 닮아진다 */
/*
 * 글 머리의 저자 한 줄.
 *
 * 자세한 것은 글 끝에 두되 **누가 썼는지는 첫 화면에서 보여야 한다.**
 * 끝의 표시와 겹쳐 보이지 않게 사진 없이 한 줄로 둔다.
 */
.byline-top {
    margin: .5rem 0 1.5rem;
    font-size: .92rem;
    color: var(--ink-2);
}
.byline-top a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.byline-top a:hover { border-bottom-color: var(--ink); }

.byline {
    margin-top: 2.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: .9rem;
    color: var(--ink-2);
    display: flex;
    gap: .8rem;
    align-items: center;
}
.byline .face {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}
.byline-text { min-width: 0; }
.byline p { margin: 0 0 .2rem; }
.byline .who strong { color: var(--ink); }
.byline .when { color: var(--ink-3); }
.byline a { text-decoration: none; }
.byline a:hover { text-decoration: underline; }

/* 다른 사이트로 나가는 링크 — 새 창이라는 것을 눈으로도 알린다 */
.ext::after {
    content: "↗";   /* 새 창으로 열린다는 표시 */
    display: inline-block;
    margin-left: .18em;
    font-size: .85em;
    opacity: .65;
}

/* ── 모바일 ──────────────────────────────────────────── */
/* 방문자가 하는 행동은 결국 전화다. 손이 닿는 자리에 항상 둔다 */
.call-bar { display: none; }

@media (max-width: 700px) {
    html { font-size: 103.125%; }
    /* 카드가 한 칸씩 서므로 도형이 자리를 더 먹는다. 한 단 줄인다 */
    .cards .card-ico { width: 36px; height: 36px; margin-bottom: .7rem; }
    .cards .card-hook { font-size: .78rem; }
    h1 { font-size: 1.44rem; }
    h2 { font-size: 1.14rem; margin-top: 2.7rem; }
    .site-head .wrap { gap: .4rem .8rem; }
    .call { padding: .34rem .8rem; font-size: .9rem; }
    .gnb ul { gap: 0 1.1rem; }
    .site-foot dl { grid-template-columns: 4.7rem 1fr; }

    /*
     * **띠는 투명하고, 단추 셋이 떠 있다.**
     *
     * 먹빛으로 꽉 채운 띠는 페이지의 끝처럼 보이고, 갈색으로 채워 보았더니
     * 띠에 색이 셋이 되어 촌스러웠다. 그래서 **띠를 비우고 단추만 남긴다.**
     *
     * 흐림(backdrop-filter)은 **쓰지 않는다** — 뒤를 매 프레임 다시 그려
     * 스크롤이 멈춘다 (2026-09-15에 겪었다). 대신 **아래로 갈수록 어두워지는
     * 그늘**을 깔아 글자가 읽히게 한다. 그늘은 한 번만 그리고 다시 계산하지 않는다.
     */
    /*
     * 부두(dock) 높이를 한 곳에서 정한다.
     * 「상담」 동그라미가 이 값을 보고 그 위에 앉는다 — 둘이 어긋나지 않게.
     */
    :root {
        --dock-h: 3.55rem;      /* 알약 높이 2.9rem + 위아래 안쪽 여백 */
        --dock-side: .7rem;     /* 화면 가장자리와의 거리 */
    }
    /*
     * **알약 셋을 한 덩어리로 묶었다** (2026-09-22 사무소 지적).
     *
     * 전에는 알약마다 테두리를 둘러 **윤곽이 셋**이었고, 그것을 옅은 그늘 위에
     * 얹어 두었다. 그늘의 위쪽이 투명해 **뒤 글자가 알약을 뚫고 나왔다** —
     * 사진에서 「받는 법(지급명령)」이 전화 칸 위로 비쳐 보인 것이 그것이다.
     *
     * 고친 방향은 **빼는 쪽**이다.
     *   · 그늘을 걷어 내고 **거의 불투명한 상자 하나**로 바꾼다 → 비치지 않는다
     *   · 알약마다 두르던 테두리를 지우고 **가는 세로 실선**으로만 가른다 → 윤곽이 하나
     *   · 화면 끝에 붙이지 않고 **좌우·아래를 띄운다** → 떠 있는 것으로 읽힌다
     *
     * 서열은 그대로다 — 넓이(2.1 : 1 : 1)와 글자색으로만 준다.
     *
     * 흐림(backdrop-filter)은 여전히 쓰지 않는다. 뒤를 매 프레임 다시 그려
     * 스크롤이 멈춘다 (2026-09-15에 겪었다). 불투명하게 두면 흐릴 까닭도 없다.
     */
    .call-bar {
        display: flex;
        gap: 0;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 50;
        /* left/right 0 에 margin 을 주면 그만큼 안으로 들어온다 */
        margin: 0 var(--dock-side)
                calc(var(--dock-side) + env(safe-area-inset-bottom, 0px));
        padding: .3rem;
        border-radius: 999px;
        background: rgba(16, 18, 23, .97);
        border: 1px solid rgba(255, 255, 255, .10);
        box-shadow: 0 6px 20px rgba(0, 0, 0, .34), 0 1px 3px rgba(0, 0, 0, .3);
    }
    /*
     * **알약 셋이 똑같이 생겼다** (2026-09-15).
     *
     * 처음에는 전화 칸만 테두리를 밝게(78% 대 17%) 하고 달무리도 그 칸에만
     * 두었다. 서열은 섰지만 **셋이 서로 다른 물건처럼 보였다** — 한 줄에
     * 놓인 것들은 같은 옷을 입어야 한 벌로 읽힌다.
     *
     * 그래서 **테두리와 달무리를 카톡·네이버 쪽에 맞춰 셋 모두 같게** 한다.
     * 밝은 쪽이 아니라 **옅은 쪽으로 맞추는 것**이 요점이다 — 테두리는
     * 알약의 윤곽만 잡으면 되고, 그 이상 밝으면 글자보다 테두리가 먼저 보인다.
     * 달무리는 셋 다 두지 않는다.
     *
     * 서열은 남은 세 가지로만 준다.
     *
     *   넓이     2.1 대 1 대 1 — 360px 폰에서 약 181 : 86 : 86 px
     *   글자색   금빛(--warm-lite) 하나 대 카카오 노랑·네이버 초록
     *   글자크기 .97rem 700 대 .86rem 600
     *
     * 흐림(backdrop-filter)은 **쓰지 않는다** — 뒤를 매 프레임 다시 그려
     * 스크롤이 멈춘다 (2026-09-15에 겪었다). 대신 아래로 갈수록 어두워지는
     * **그늘**을 한 번만 깔아 글자가 읽히게 한다.
     */
    .call-bar a {
        display: grid;
        place-items: center;
        min-height: 2.9rem;
        padding: .6rem .35rem;
        text-align: center;
        text-decoration: none;
        line-height: 1.3;
        word-break: keep-all;
        /*
         * **칸마다 테두리를 두르지 않는다.** 상자가 이미 윤곽을 잡고 있어
         * 여기서 또 두르면 윤곽이 넷이 된다. 칸은 누를 자리일 뿐이다.
         * 모서리만 둥글려 눌렀을 때 상자 안에 맞게 반응하도록 둔다.
         */
        border: 0;
        background: none;
        border-radius: 999px;
        color: rgba(255, 255, 255, .80);
        font-weight: 600;
        font-size: .86rem;
    }
    /*
     * 칸과 칸 사이의 가는 세로 실선.
     *
     * 따로 태그를 두지 않고 **배경 그림 한 줄**로 그린다 — 높이를 56% 로 두어
     * 상자의 위아래에 닿지 않게 한다. 끝까지 그으면 상자를 동강 낸 것처럼 보인다.
     */
    .call-bar .cb-sub {
        background-image: linear-gradient(rgba(255, 255, 255, .16),
                                          rgba(255, 255, 255, .16));
        background-size: 1px 56%;
        background-position: left center;
        background-repeat: no-repeat;
    }
    /*
     * 법무사 직통.
     *
     * **채워서 눈에 띄게 하지 않는다.** 흰색으로 채우니 띠가 두 동강 났고,
     * 갈색으로 채우니 색이 셋이 되어 촌스러웠다. 넓이와 글자색으로만 세운다.
     *
     * 금빛은 히어로 「상담 신청」과 같은 색이다. 화면을 위아래로 훑으면
     * **같은 색 두 개가 세로로 이어진다** — 눌러야 할 곳이 어디인지가
     * 색 하나로 말해진다. 먹빛 띠 위에서 대비 7.7:1 로 AA 를 넘는다.
     */
    .call-bar .cb-main {
        flex: 2.1;
        color: var(--warm-lite);
        font-weight: 700;
        font-size: .97rem;
        letter-spacing: -.02em;
    }
    /* 나머지 둘. 좁다 — 뒤로 물러서되 누를 수는 있다 */
    .call-bar .cb-sub { flex: 1; }
    /*
     * 카톡·네이버 칸. 글자에만 각자의 색을 둔다.
     * 다만 **원색 그대로 쓰지 않는다** — 채도가 높아 옆의 전화보다 먼저 보였다.
     * 80% 로 눕히면 무엇인지는 그대로 알아보면서 서열은 지켜진다.
     */
    .call-bar .cb-kakao { color: rgba(254, 229, 0, .80); }
    .call-bar .cb-naver { color: rgba(3, 199, 90, .85); }

}



@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* 사진 — 폭·높이를 마크업에 적어 두므로 자리는 미리 잡힌다 */
.blk-figure { margin: 1.4rem 0; }
.blk-figure img {
    display: block;
    /* 본문 폭을 다 채우면 사진이 글을 밀어낸다. 삽화 크기로 둔다 */
    width: 100%;
    max-width: 460px;
    height: auto;
    border-radius: 3px;
}
.blk-figure.round img { border-radius: 50%; }
/* 옆에 세우는 사진 — 오른쪽이 비면 사진이 실제보다 작아 보인다.
   표나 목록이 옆에 붙도록 띄운다. 표 상자는 BFC 라 사진을 감싸지 않고 나란히 선다 */
.blk-figure.side {
    float: left;
    /* 위를 0 으로 둔다. 옆 표의 첫 줄과 사진 꼭대기가 같은 선에 서야 한다 */
    margin: 0 1.6rem 1rem 0;
    max-width: 290px;
}
/* 250px 이었다. 옆 표(머리 + 네 줄)가 289px 이라 사진만 짧아 아래가 어긋났다.
   표 높이에 맞추면 사진과 표가 한 덩어리로 보인다 (2026-09-15). */
.blk-figure.side img { width: 290px; max-width: 290px; }
/* 다음 절이 사진 옆으로 새지 않게 */
article h2 { clear: both; }
@media (max-width: 720px) {
    .blk-figure.side { float: none; margin: 1.4rem 0; }
}
/*
 * 절 폭을 다 쓰는 가로 띠 사진.
 *
 * 원본이 900x686 이라 폭을 다 채우면 730px 이 되어 화면을 통째로 잡아먹는다.
 * 높이를 정해 두고 object-fit 으로 **잘라 담는다.** 가로로 긴 띠가 되어
 * 글만 이어지던 자리에서 눈이 한 번 쉰다.
 */
.blk-figure.band { margin: 1.6rem 0 1.2rem; }
.blk-figure.band img {
    max-width: none;
    width: 100%;
    height: clamp(200px, 26vw, 330px);
    object-fit: cover;
    border-radius: 14px;
}

/*
 * 결정문·서류 사진.
 *
 * 이것은 삽화가 아니라 **읽히는 종이**다. 그래서 세 가지가 다르다.
 *
 * 1. 460px 삽화 크기로 두면 **결정문 글자가 안 읽힌다.** 폭을 넓힌다.
 * 2. 왼쪽에 붙여 두면 오른쪽이 휑하게 비어 종이가 떠 보인다. **가운데 세운다.**
 * 3. 흰 종이를 흰 바탕에 그냥 올리면 **어디까지가 문서인지 분간이 안 된다.**
 *    테두리를 두르고 안쪽에 여백을 조금 줘서 액자에 넣은 꼴로 만든다.
 */
.blk-figure.doc {
    margin: 1.8rem auto;
    max-width: 640px;
}
.blk-figure.doc img {
    max-width: 100%;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    /* 아주 옅은 그림자. 종이가 바탕에서 한 겹 떠 보이게만 한다 */
    box-shadow: 0 1px 3px rgba(16, 18, 23, .07);
}
@media (max-width: 720px) {
    /* 좁은 화면에서는 안쪽 여백이 글자를 더 줄인다 */
    .blk-figure.doc img { padding: .3rem; }
}

/* 설명에 주문 읽는 법·기한처럼 중요한 말이 들어가므로 본문보다 한 걸음만 작게, 진하게 */
.blk-figure figcaption {
    margin-top: .5rem;
    font-size: .95rem;
    color: var(--ink-2);
}

/*
 * 그림 격자 — 결정문 여러 장을 나란히.
 *
 * 전국 각지 법원의 결정문을 한눈에 보이려는 것이라, 한 장 한 장을 읽히게
 * 할 필요는 없다 — **법원 이름이 서로 다르다는 것**이 보이면 된다.
 * 넓은 화면은 네 칸, 폰은 두 칸. 누르면 원본이 새 창으로 열린다.
 * 테두리는 .blk-figure.doc 와 같다 — 흰 종이를 흰 바탕에서 가려내려고.
 */
.blk-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0 .6rem;
}
.blk-gallery figure { margin: 0; }
.blk-gallery .lb-open { display: block; cursor: zoom-in; }
.blk-gallery img {
    display: block;
    width: 100%;
    height: auto;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    box-shadow: 0 1px 3px rgba(16, 18, 23, .07);
    transition: box-shadow .18s ease, transform .18s ease;
}
.blk-gallery .lb-open:hover img {
    box-shadow: 0 4px 12px rgba(16, 18, 23, .12);
    transform: translateY(-2px);
}
.blk-gallery figcaption {
    margin-top: .5rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
}
.gallery-cap {
    margin: 0 0 1.6rem;
    font-size: .85rem;
    color: var(--ink-3);
}
@media (max-width: 720px) {
    .blk-gallery { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .blk-gallery img { padding: .2rem; }
}

/*
 * 크게 보기(lightbox) — 그림을 누르면 페이지 위에 크게 띄운다.
 *
 * 체크박스가 켜지면 창이 뜨고, ✕ 나 바깥 어두운 곳(모두 그 체크박스의 label)을
 * 누르면 꺼진다. 자바스크립트 없이. 주소(#)가 안 바뀌어 보던 자리 그대로다.
 * z-index 는 아래 부두·레일보다 위로 넉넉히 둔다.
 *
 * 숨은 체크박스는 **화면 고정(fixed) 자리**에 둔다. label 을 누르면 브라우저가
 * 그 체크박스로 초점을 옮기며 「보이게」 화면을 끌고 가는데, 본문 흐름 속에 두면
 * 닫은 뒤 보던 자리에서 밀려나 있다. 고정해 두면 끌려가지 않는다.
 */
.lb-check {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem 2rem;
}
.lb-check:checked + .lightbox { display: flex; }
.lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 18, 23, .84);
    cursor: zoom-out;
}
.lightbox figure {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: min(900px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    padding: .5rem;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.lightbox figcaption {
    margin-top: .75rem;
    color: #fff;
    font-weight: 700;
    text-align: center;
}
.lb-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 2.9rem;
    height: 2.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.lb-close:hover { background: var(--accent-pale); }

/*
 * 넘겨 보기 창 — 창은 하나, 그 안의 그림은 슬라이드와 같은 라디오가 고른다.
 * 창 안의 ‹ › 도 그 라디오를 켜므로, 창에서 넘기면 뒤의 슬라이드도 같이 넘어간다.
 */
.lightbox .lb-slide { display: none; }
.sl-radio:nth-of-type(1):checked ~ .lightbox .lb-slide:nth-of-type(1),
.sl-radio:nth-of-type(2):checked ~ .lightbox .lb-slide:nth-of-type(2),
.sl-radio:nth-of-type(3):checked ~ .lightbox .lb-slide:nth-of-type(3),
.sl-radio:nth-of-type(4):checked ~ .lightbox .lb-slide:nth-of-type(4),
.sl-radio:nth-of-type(5):checked ~ .lightbox .lb-slide:nth-of-type(5),
.sl-radio:nth-of-type(6):checked ~ .lightbox .lb-slide:nth-of-type(6),
.sl-radio:nth-of-type(7):checked ~ .lightbox .lb-slide:nth-of-type(7),
.sl-radio:nth-of-type(8):checked ~ .lightbox .lb-slide:nth-of-type(8) { display: flex; }
.lb-prev,
.lb-next {
    position: fixed;
    top: calc(50% - 1.6rem);
    z-index: 2;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--ink);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-prev:hover,
.lb-next:hover { background: var(--accent-pale); }
@media (max-width: 720px) {
    .lb-prev,
    .lb-next { width: 2.6rem; height: 2.6rem; font-size: 1.6rem; }
    .lb-prev { left: .4rem; }
    .lb-next { right: .4rem; }
}

/*
 * 넘겨 보기(slider) — 한 번에 한 장을 크게.
 *
 * **자바스크립트 없이** 라디오 단추로 넘긴다. 켜진 단추에 맞는 장이 옆에서 밀려 들어오고,
 * 양옆 ‹ › 와 아래 이름 단추가 모두 그 라디오를 켜는 label 이다.
 * 여덟 장까지 된다 — 아래 nth-child 규칙을 여덟 줄씩 적어 두었다.
 */
.blk-slider {
    position: relative;
    max-width: 640px;
    margin: 1.4rem auto 2rem;
}
/* 숨은 라디오도 화면 고정 자리에 — 아래 이름 단추를 눌렀을 때 틀 맨 위로 끌려가지 않게 */
.sl-radio {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
/*
 * 넘길 때 옆으로 밀려 들어온다 — 일곱 장을 가로로 늘어놓고, 켜진 라디오만큼 왼쪽으로 민다.
 * 틀(.sl-track) 밖은 잘라 낸다. 양옆으로 1.6rem 을 비워 두어 ‹ › 단추는 틀 밖에 그대로 보이고,
 * 장 사이를 5rem 띄워 옆 장의 단추는 그 1.6rem 안에 들어오지 않는다.
 */
.sl-track {
    display: flex;
    gap: 5rem;
    overflow: hidden;
    padding: .5rem 1.6rem;
    margin: -.5rem -1.6rem;
}
.sl-slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    margin: 0;
    transition: transform .45s ease;
}
.sl-slide > .lb-open { display: block; cursor: zoom-in; }
.sl-slide img {
    display: block;
    width: 100%;
    height: auto;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    box-shadow: 0 1px 3px rgba(16, 18, 23, .07);
}
.sl-slide figcaption {
    margin-top: .65rem;
    text-align: center;
    font-size: 1.02rem;
    font-weight: 700;
}
.sl-prev,
.sl-next {
    position: absolute;
    top: calc(50% - 1.6rem);
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--ink);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(16, 18, 23, .14);
    cursor: pointer;
    user-select: none;
    transition: background .15s ease;
}
.sl-prev { left: -1.35rem; }
.sl-next { right: -1.35rem; }
.sl-prev:hover,
.sl-next:hover { background: var(--accent-pale); }

.sl-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.1rem;
}
.sl-tabs label {
    padding: .45rem .95rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.sl-tabs label:hover { background: var(--paper-2); }

/* 켜진 장이 틀 안에 오도록 민다 (첫 장은 그대로) */
.sl-radio:nth-of-type(2):checked ~ .sl-track .sl-slide { transform: translateX(calc(-1 * (100% + 5rem))); }
.sl-radio:nth-of-type(3):checked ~ .sl-track .sl-slide { transform: translateX(calc(-2 * (100% + 5rem))); }
.sl-radio:nth-of-type(4):checked ~ .sl-track .sl-slide { transform: translateX(calc(-3 * (100% + 5rem))); }
.sl-radio:nth-of-type(5):checked ~ .sl-track .sl-slide { transform: translateX(calc(-4 * (100% + 5rem))); }
.sl-radio:nth-of-type(6):checked ~ .sl-track .sl-slide { transform: translateX(calc(-5 * (100% + 5rem))); }
.sl-radio:nth-of-type(7):checked ~ .sl-track .sl-slide { transform: translateX(calc(-6 * (100% + 5rem))); }
.sl-radio:nth-of-type(8):checked ~ .sl-track .sl-slide { transform: translateX(calc(-7 * (100% + 5rem))); }

/* 지금 보고 있는 법원 이름 단추를 칠한다 */
.sl-radio:nth-of-type(1):checked ~ .sl-tabs label:nth-child(1),
.sl-radio:nth-of-type(2):checked ~ .sl-tabs label:nth-child(2),
.sl-radio:nth-of-type(3):checked ~ .sl-tabs label:nth-child(3),
.sl-radio:nth-of-type(4):checked ~ .sl-tabs label:nth-child(4),
.sl-radio:nth-of-type(5):checked ~ .sl-tabs label:nth-child(5),
.sl-radio:nth-of-type(6):checked ~ .sl-tabs label:nth-child(6),
.sl-radio:nth-of-type(7):checked ~ .sl-tabs label:nth-child(7),
.sl-radio:nth-of-type(8):checked ~ .sl-tabs label:nth-child(8) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
/* 키보드로 고를 때도 어디인지 보이게 */
.sl-radio:focus-visible ~ .sl-tabs {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 999px;
}
@media (max-width: 720px) {
    .sl-prev { left: .35rem; }
    .sl-next { right: .35rem; }
    .sl-slide img { padding: .3rem; }
    /* 좁은 화면에서는 단추가 그림 안에 있으니 양옆을 비우지 않는다 — 화면 밖으로 삐져나가지 않게 */
    .sl-track { padding: .5rem 0; margin: -.5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sl-slide { transition: none; }
}

/* ── 첫 화면 히어로 ─────────────────────────────────────
   사진을 쓰지 않는다. 밝은 종이색 위에 먹색 글씨라 대비가 가장 높고,
   좁은 화면에서 빽빽해 보이지 않는다. 사진을 되돌리려면 home.json 의
   hero 에 image 를 다시 넣으면 된다 — .has-photo 가 붙어 아래
   '사진을 쓸 때만' 묶음이 살아난다. */

/* 홈은 GNB 가 히어로 띠로 내려가 머리말에 없다.
   아래 여백이 0 이면 머리말이 위아래로 안 맞는다. */
body.home .site-head { padding: .9rem 0 }

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 가운데 정렬로 두면 안쪽 내용과 업무 띠가 한 덩어리로 가운데에 몰려
       띠 아래에 빈 자리가 남는다. 아래 margin-top:auto 둘로
       띠는 바닥에 붙이고 글은 그 위 공간의 가운데에 둔다. */
    justify-content: flex-start;
    /* 최소 높이를 두지 않는다. 68vh 를 걸어 두면 내용이 짧을 때
       남는 자리가 위로 몰려 머리말 아래가 기이하게 벌어진다.
       사진을 쓸 때만 아래에서 다시 높이를 준다. */
    min-height: 0;
    overflow: hidden;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
}
.hero-inner {
    position: relative;
    z-index: 2;
    isolation: isolate;
    width: var(--wrap);
    margin: 0 auto;
    /* 54px 이었다. 첫 화면의 위아래 여백은 그 사이트가 얼마나 여유 있어
       보이는지를 거의 혼자 정한다. 요즘 눈에는 100px 안팎이 기본이다. */
    padding: 6rem 0 5rem;
    /* 제목이 폭 전체를 쓰고 그 아래에 글이 온다.
       제목을 절반 칸에 가두면 넉 줄로 갈라져 줄 길이가 들쭉날쭉해진다.
       가운데 정렬은 눈이 매 줄마다 가운데를 다시 찾아야 해서 쓰지 않는다.

       **한 칸이 기본이다.** 전에는 늘 두 칸이었고 오른쪽을 업무 격자가 썼는데
       그 격자를 뺐다(render.js 의 heroFor 참고). 두 칸을 그대로 두면
       **오른쪽 절반이 빈 채로 남는다.** 오른쪽에 무엇을 세울 때만 두 칸이 된다. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "head"
        "text";
    gap: 2rem 2.8rem;
    align-items: start;
    text-align: left;
}
/* 사무소 정보판을 세울 때만 두 칸 — home.json 의 hero 에 "info": true */
.hero-inner.has-info {
    grid-template-columns: 1.35fr 1fr;
    grid-template-areas:
        "head head"
        "text menu";
}
.hero-head { grid-area: head; }
.hero-text { grid-area: text; }
.hero-info { grid-area: menu; }
.hero-bar  { grid-area: menu; }
/*
 * 글줄이 한 칸을 다 쓰지 않게 막는다.
 *
 * 두 칸이던 때 이 칸은 570px 이었다. 한 칸이 되면서 1040px 까지 늘어나면
 * 한 줄이 너무 길어져 눈이 다음 줄 머리를 찾기 어려워진다.
 * 제목은 전처럼 폭 전체를 쓴다 — 큰 글씨는 길어도 따라가기 쉽다.
 */
.hero-text { max-width: 40rem; }
.hero .eyebrow {
    display: inline-block;
    margin: 0 0 1.15rem;
    padding-left: .65rem;
    /* 세로 막대를 세워 읽기 시작하는 자리를 만든다.
       첫 화면에서 가장 먼저 눈에 드는 색이라 여기를 따뜻한 쪽으로 둔다 */
    border-left: 3px solid var(--warm);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--warm);
}
.hero h1 {
    margin: 0 0 1.15rem;
    /* 글 칸이 화면의 절반 남짓이라 예전 크기(2.9rem)로는 네 줄로 갈라진다.
       칸 너비에 맞춰 줄인다. */
    font-size: clamp(1.95rem, 3.6vw, 3rem);
    line-height: 1.36;
    letter-spacing: -.035em;
    font-weight: 700;
    color: var(--ink);
}
/* 형광펜. 눈이 멈출 곳 하나를 만든다. 글자 자체는 그대로 둔다 */
.hero .hl {
    color: var(--accent-deep);
    box-shadow: inset 0 -.44em 0 var(--accent-pale);
}
.hero .sub {
    margin: 0 0 1.9rem;
    max-width: 34em;
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--ink-2);
}

/* 한 줄에 한 문장씩. 문장 가운데서 끊기지 않아 훨씬 깔끔하다.
   세 문장 모두 가장 좁은 화면(375px, 글칸 335px)에서도 한 줄에 들어가도록
   길이를 맞춰 두었다. 문장을 늘리면 다시 접히므로 길이를 재고 고쳐야 한다. */
.hero .sub .ln { display: block; }

/* 첫 화면에서 할 일은 둘뿐이다. 신청서를 쓰거나 전화를 걸거나 */
.acts { display: flex; gap: .6rem; flex-wrap: wrap; }
.hero .cta,
.hero .tel {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.02rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hero .cta {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(27, 58, 92, .22);
}
.hero .cta:hover {
    background: var(--accent-deep);
    box-shadow: 0 10px 26px rgba(27, 58, 92, .3);
    transform: translateY(-1px);
}
.hero .cta b { font-weight: 600; }
.hero .cta .arw { opacity: .75; }
.hero .tel {
    border: 1px solid var(--accent);
    background: var(--paper);
    color: var(--ink);
}
.hero .tel:hover { background: var(--accent-pale); }
.hero .tel small { font-size: .86rem; color: var(--ink-3); }
.hero .tel b { font-weight: 700; color: var(--accent-deep); }

/* 사무소 정보. 첫 화면에 전화·주소·시간이 글로 있으면
   검색엔진과 답변 엔진이 읽어 갈 것이 늘어난다.

   **여기도 backdrop-filter 를 걷어냈다 (2026-09-15)** — 머리말과 같은 까닭이다.
   첫 화면 한가운데에 있어 스크롤을 시작하는 바로 그 자리다. */
.hero-info {
    background: rgba(255, 255, 255, .94);
    border: 0;
    border-radius: var(--radius);
    padding: 1.6rem 1.7rem;
    box-shadow: var(--lift);
}
.hero-info dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .65rem 1.1rem;
    font-size: .88rem;
    line-height: 1.6;
}
.hero-info dt { color: var(--ink-3); white-space: nowrap; }
.hero-info dd { margin: 0; color: var(--ink); font-weight: 600; }
.hero-info a { color: inherit; text-decoration: none; }
.hero-info a:hover { text-decoration: underline; }

/* 히어로 아래 업무 목차. 첫 화면에서는 이것이 주 메뉴다.
   여덟을 가로 한 줄에 밀어 넣으면 글자 수가 제각각이라 칸이 들쭉날쭉하고
   글씨도 계속 작아진다. 두 칸 네 줄로 세우면 칸 너비가 같아진다. */
/*
 * ── 히어로 안 업무 띠 — **지금은 쓰지 않는다** ──────────────
 *
 * 홈의 주 메뉴를 머리말로 올리면서 히어로에서 뺐다(render.js 의 heroFor).
 * 규칙은 지워 두지 않는다 — `mainNav(path, 'hero')` 를 다시 부르면 그대로 살아난다.
 * 다시 쓸 일이 없다고 판단되면 아래 `.hero-bar` 규칙 전부와
 * `.hero.has-photo .hero-bar`, `body.home .hero:not(.has-photo) .hero-bar` 를 함께 지운다.
 */
.hero-bar {
    position: relative;
    z-index: 2;
    margin-top: 0;
}
.hero-bar ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
}
.hero-bar li {
    text-align: left;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
/* 오른쪽 칸만 선을 지운다. 굵기만 지워야 한다 —
   border-right:0 으로 쓰면 선 종류까지 none 이 되어 되살릴 수 없다. */
.hero-bar li:nth-child(2n) { border-right-width: 0; }
.hero-bar a {
    display: block;
    /* 오른쪽 칸에 들어가므로 좌우 여백을 줄인다. 폭 전체일 때보다 좁다 */
    padding: .82rem 1rem;
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
}
.hero-bar a:hover,
.hero-bar a[aria-current="page"] {
    color: var(--accent);
    background: var(--accent-pale);
}

/* ── 사진을 쓸 때만 ──────────────────────────────────
   home.json 의 hero 에 image 를 넣으면 .has-photo 가 붙는다.
   그때만 사진과 어두운 막이 살아나고 글자가 흰색으로 바뀐다. */
/* 사진을 쓸 때는 사진이 보일 만큼 높이를 준다.
 *
 * 62vh 에서 78vh 로 키웠다 (2026-09-16). 62vh 는 넓은 화면에서 사진이
 * **띠처럼 잘려** 사무실이 어떤 곳인지 전해지지 않았다.
 *
 * **좁은 화면에서는 이 높이를 풀어 준다** (아래 @media 760px).
 * 78vh 는 844px 폰에서 658px 이 되는데, 히어로 내용이 475px 이라
 * 183px 이 빈 자리로 늘어나고 **업무 격자 여덟 칸이 첫 화면 밖으로 밀린다.**
 * 어제 그 여덟 칸을 들여놓으려고 여백을 다섯 군데 줄였다. 도로 물릴 일이 아니다. */
/*
 * **78vh 에서 70vh 로 줄였다** — 업무 격자를 뺀 뒤다.
 *
 * 격자가 있던 때 히어로 내용은 641px 이었고 78vh(1280×900 에서 702px)가 알맞았다.
 * 격자를 빼니 내용이 575px 로 줄었는데 높이는 그대로라 **빈 사진만 늘었다.**
 * 게다가 주 메뉴가 머리말로 올라가며 머리말이 78 → 142px 이 되어,
 * 그대로 두면 첫 화면이 통째로 64px 내려앉는다.
 * 70vh(630px)면 내용 575px 이 들어가고도 남으며, 머리말이 커진 만큼을 되돌려 준다.
 */
.hero.has-photo { background: var(--ink); min-height: 70vh; }
/*
 * 높이를 키우면 **늘어난 자리가 전부 아래로 몰린다** — 격자 밑에 131px 짜리
 * 빈 사진이 남았다 (1440x900 에서 쟀다). `.hero` 의 justify-content 가
 * flex-start 라 내용이 위에 붙기 때문이다.
 *
 * 사진을 쓸 때만 가운데로 돌린다. 그러면 남는 자리가 위아래로 갈린다.
 * `.hero` 전체를 가운데로 두지 않는 까닭은 원래 주석에 있다 — 사진이 없고
 * 내용이 짧으면 머리말 아래가 기이하게 벌어진다. 사진이 있을 때만이다.
 */
.hero.has-photo { justify-content: center; }
.hero.has-photo .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .92;

    /* **사진을 살짝 흐리고 색을 죽인다.**
     *
     * 사무실을 그대로 내보내면 서류함·의자·칸막이가 하나하나 읽혀 어수선하다.
     * 배경은 「여기가 어떤 곳인가」만 전하면 되고 세부는 오히려 방해다.
     *
     * `backdrop-filter` 와 다르다 — 그쪽은 **뒤에 있는 것을 매 프레임 다시** 흐리게
     * 만들어 스크롤이 멈췄지만(2026-09-15), 이것은 **그림 한 장에 한 번** 걸고
     * 브라우저가 결과를 받아 둔 채 쓴다. 스크롤해도 다시 계산하지 않는다.
     *
     * scale 을 조금 키우는 것은 흐림 때문에 가장자리가 비치는 것을 가리려는 것이다. */
    /* 2026-09-16에 또렷한 쪽으로 옮겼다 — 1.2px 는 사무실이 「뿌연 어딘가」로만
       보였다. 0.6px 는 서류함과 칸막이의 윤곽을 지우면서 형태는 남긴다. */
    filter: blur(.6px) saturate(.9) brightness(.99);
    transform: scale(1.03);
}
.hero.has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 사진을 이미 흐리고 색을 죽여 두었으므로 막은 옅어도 된다.
       글자가 놓이는 위와 아래만 조금 받치고 가운데는 사진이 살게 둔다. */
    background: linear-gradient(180deg,
        rgba(12, 14, 16, .38) 0%,
        rgba(12, 14, 16, .22) 45%,
        rgba(12, 14, 16, .50) 100%);
}
/*
 * 사진을 또렷하게 만들자(0.6px) **옅은 흰 글자가 묻혔다** (2026-09-16 사무소 지적).
 * 흰색 70% 는 흐린 배경 위에서는 읽혔지만 선명한 배경에서는 배경과 다툰다.
 *
 * 금빛(--warm-lite)으로 바꾼다. 흰 바탕일 때 쓰는 --warm 의 어두운 판 짝이고,
 * 「상담 신청」 단추·아래 띠의 전화와 **같은 색**이라 화면이 한 벌로 묶인다.
 * 그림자는 배경이 밝은 자리(천장·조명)에 걸렸을 때를 위한 것이다.
 */
.hero.has-photo .eyebrow {
    color: var(--warm-lite);
    border-left-color: var(--warm-lite);
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.hero.has-photo h1 { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.hero.has-photo .hl { color: #fff; box-shadow: inset 0 -.12em 0 rgba(255, 255, 255, .55); }
/*
 * 본문은 굵게 하지 않는다 — 글꼴에 400 과 700 두 굵기뿐이라 한 단 올리면
 * 곧바로 굵은 글씨가 되어 문단이 무거워진다. **밝기와 그림자로만** 올린다.
 * 그림자를 두 겹 둔 것은 가까운 한 겹이 윤곽을, 먼 한 겹이 배경을 눌러 주기 때문이다.
 */
.hero.has-photo .sub {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 14px rgba(0, 0, 0, .45);
}
/* **상담 신청은 남색으로 채운다.**
   흰 단추로 두었더니 옆의 흰 업무 격자와 둘 다 하얘서 서로 싸우고,
   더 큰 격자가 먼저 눈에 들어 **정작 눌러야 할 단추가 밀렸다.**
   사이트의 강조색을 쓰면 사진 위에서도 또렷하고 무엇이 먼저인지 분명해진다. */
.hero.has-photo .cta {
    /* 조금 투명하게 둔다. 꽉 찬 색보다 사진에 얹힌 느낌이 나고
       옆의 격자(검정 37%)와도 결이 맞는다. */
    background: rgba(138, 106, 60, .70);
    color: #fff;
    box-shadow: 0 8px 22px rgba(12, 14, 16, .26);
}
.hero.has-photo .cta:hover { background: rgba(110, 84, 48, .85); }
.hero.has-photo .tel { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); color: #fff; }
.hero.has-photo .tel small { color: rgba(255, 255, 255, .88); }
.hero.has-photo .tel b { color: #fff; }
.hero.has-photo .hero-info { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.hero.has-photo .hero-info dt { color: rgba(255, 255, 255, .52); }
.hero.has-photo .hero-info dd { color: #fff; }
/* 업무 격자는 **판을 깔아** 놓는다.
   사진 위에 글자만 띄우면 여덟 개가 배경에 묻혀 읽히지 않는다.
   테두리만으로는 모자라고, 판을 받쳐야 글자가 선다.

   **흰 판으로 둔다.** 사이트의 다른 카드가 모두 흰 바탕이라 말이 맞고,
   먹색 글씨라 대비가 가장 높다. 어두운 판은 사진과 섞여 탁해졌다. */
.hero.has-photo .hero-bar ul {
    /* 검은 막으로 둔다. 흰 판은 상담 신청 단추와 둘 다 하얘 서로 싸웠다.
       어두운 쪽이 사진에 얹혔을 때 조용하고, 갈색 단추가 혼자 도드라진다. */
    background: rgba(14, 16, 20, .37);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(12, 14, 16, .16);
}
.hero.has-photo .hero-bar li { border-color: rgba(255, 255, 255, .15); }
.hero.has-photo .hero-bar a {
    /* 흰색을 완전하게 준다. 굵기는 본래대로 500 을 쓴다 —
       600 으로 올렸더니 넓게 퍼진 그림자와 겹쳐 **글자가 둘로 보였다.**
       그림자도 바짝 좁힌다(6px -> 2px). 넓은 그림자는 번져 보이고
       좁은 그림자가 오히려 또렷하다. */
    color: #fff;
    font-weight: 550;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.hero.has-photo .hero-bar a:hover { background: rgba(255, 255, 255, .12); }

/* ── 좁은 화면 ────────────────────────────────────────
   넓은 화면을 줄인 것이 아니라 따로 짠 것이다.
   상자 안에 상자를 두지 않고, 단추는 가로로 꽉 채워 위아래로 쌓는다. */
@media (max-width: 760px) {
    /* 위아래 간격을 한 자로 맞춘다. 8px 을 한 칸으로 삼아
       글 사이는 두 칸(16), 묶음 사이는 세 칸(24), 덩어리 사이는 다섯 칸(40). */
    .hero { min-height: 0; }
    /* 넓은 화면의 78vh 를 여기서 푼다. 자세한 까닭은 .hero.has-photo 주석에 */
    .hero.has-photo { min-height: 0; }
    .hero-inner {
        display: block;
        /*
         * **위아래를 한 자로 다시 맞췄다** (업무 격자를 뺀 뒤).
         *
         * 전에는 2.1rem 0 1.9rem 이었다. 아래를 0 으로 두지 못했던 까닭은
         * 업무 격자의 아래 테두리와 히어로의 아래 끝이 같은 자리에 놓여
         * 선 둘이 한 줄로 겹쳐 보였기 때문이다(2026-09-16 사무소 지적).
         * **격자를 뺐으니 그 걸림돌이 없어졌다.** 이제 위아래를 같게 두어
         * 사진 가운데에 글이 놓이게 한다.
         *
         * 8px 을 한 칸으로 삼는다 — 덩어리 사이 40(5칸), 묶음 사이 24(3칸),
         * 글 사이 16(2칸). 아래 규칙들이 그 자를 따른다.
         */
        padding: 2.5rem 0;      /* 40 · 40 */
    }
    /* 꼬리표의 세로 막대는 좁은 화면에서도 그대로 둔다 */
    .hero .eyebrow { margin-bottom: 1rem; font-size: .76rem; letter-spacing: .14em; }   /* 16 */
        /* text-wrap: balance 로 줄 길이를 고르게 나눈다.
       전에는 「울산 법무사, 등기부터 상속·」 에서 끊겨 **점으로 끝나는 줄**이 나왔다.
       못 알아듣는 브라우저는 예전처럼 흘려 쓴다 — 탈이 없다. */
    .hero h1 {
        font-size: 1.65rem;
        line-height: 1.5;
        margin-bottom: 1rem;    /* 16 — 제목과 그 설명은 한 묶음이라 붙여 둔다 */
        text-wrap: balance;
    }
    /* 본문 크기까지 올린다. 세 문장이 360px 폰(글칸 320px)에서도
       한 줄에 들어가는 한계가 16px 이다. 문장을 늘리면 다시 접힌다. */
    .hero .sub { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.72; }   /* 28 — 글에서 단추로 넘어가는 자리 */

    /* 단추는 상담 신청 하나만, 알약 모양으로 글자만큼만.
       가로로 꽉 채운 네모 둘은 좁은 화면에서 너무 무겁다.
       flex 로 두어야 글줄 아래 여백이 안 붙는다 — inline 이면 딸려 온다. */
    .acts { display: flex; margin-bottom: 0; }
    .hero .cta {
        width: auto;
        gap: .5rem;
        padding: .82rem 1.7rem;
        border-radius: 999px;
    }
    .hero .cta b { font-size: .98rem; }

    /* 정보판과 직통 단추는 좁은 화면에서 접는다.
       전화·주소·업무시간은 바닥글과 오시는길, 구조화 데이터에 그대로 남는다. */
    .hero .tel,
    .hero-info { display: none; }

    /* 목차는 화면 끝까지 닿게 한다. 히어로 안쪽 여백만큼 도로 밀어낸다 */
    .hero-bar {
        margin: 2.5rem -1.25rem 0;
        width: calc(100% + 2.5rem);
    }
    .hero-bar ul { width: 100%; }

    /* 위아래를 줄인다 (.98rem 이었다).
       글자는 본문(1rem)보다 작은데 칸만 3rem 가까이 되어
       **여덟 칸이 글보다 큰 덩어리**로 보였다. 사무소가 「비대칭 같다」고 하셨다. */
    .hero-bar a { padding: .88rem 1.25rem; font-size: .92rem; }

    /* **사진을 쓸 때는 끝까지 닿게 하지 않는다.**
       검은 판이 화면을 가로지르면 글보다 커 보이고, 글은 여백 안에 있는데
       판만 밖으로 나가 좌우가 어긋나 보인다. 글과 같은 자리에 둔다. */
    .hero.has-photo .hero-bar {
        margin: 1.4rem 0 0;
        width: 100%;
    }
}

/*
 * **좁은 화면에서는 히어로의 「상담 신청」을 감춘다** (2026-09-15 사무소 제안).
 *
 * 같은 화면에 상담 입구가 셋이었다 — 히어로 단추, 오른쪽 아래 동그란 「상담」
 * (.rail-go), 그리고 아래 띠. 셋이 다 같은 곳(/contact/)으로 간다.
 * 하나를 덜어 내도 입구는 둘 남고, **덜어 낸 자리만큼 업무 격자가 올라온다** —
 * 카톡·라인 안 브라우저에서 보이는 600px 남짓 안에 여덟 칸이 다 들어온다.
 * 히어로가 할 일은 「무엇을 하는 곳인지」를 보이는 것이고, 그것은 격자가 한다.
 *
 * **지점을 760px 이 아니라 700px 로 잡는 까닭**이 있다. 오른쪽 동그란 상담은
 * 700px 이하에서만 나타난다. 760px 에서 감추면 701~760px 구간에
 * **상담 입구가 하나도 없는 틈**이 생긴다. 머리말 전화(.calls)와 아래 띠를
 * 700px 으로 맞춘 것과 같은 까닭이다.
 *
 * 링크 자체는 HTML 에 그대로 있고 CSS 가 감출 뿐이라, 로봇과 읽는 프로그램은
 * 예전처럼 읽는다.
 */
@media (max-width: 700px) {
    .hero .acts { display: none; }
    /*
     * 단추가 빠지면 **글이 히어로의 마지막**이다.
     *
     * 전에는 글 아래에 업무 격자가 있어서, 글의 아래 여백과 격자의 위 여백이
     * 겹쳐 두 배가 되지 않게 0 으로 눌러 두었다. 격자를 뺀 지금은
     * **아래 공간을 히어로 안쪽 여백(2.5rem)이 혼자 맡는다** — 그대로 0 이 맞다.
     */
    .hero .sub { margin-bottom: 0; }
    .hero.has-photo .hero-bar { margin-top: 2.2rem; }
    .hero-bar { margin-top: 2.2rem; }
}

/* ── 홈 본문 — 절을 상자에 담는다 ─────────────────────────
   절이 일곱이라 그냥 이어 붙이면 한 덩어리로 흐른다.
   바탕을 회색으로 깔고 절마다 흰 상자를 올려 경계를 만든다.
   히어로는 흰 바탕 그대로 두어 상자들과 층이 갈리게 한다. */
body.home { background: var(--paper-2); }

/* 히어로.
   본문 바탕이 회색이 되면서 히어로가 같은 색이면 층이 안 갈린다.
   푸른 기가 도는 옅은 색을 깔아 **머리 자리 → 회색 바탕 → 흰 상자** 로
   세 층을 만든다. 사진 없이 깊이를 주는 방법이다.
   사진을 다시 넣으면 .has-photo 가 붙으므로 그때는 비켜선다. */
body.home .hero:not(.has-photo) {
    background: linear-gradient(180deg, #E3EBF5 0%, #F2F5F6 100%);
}
/* 빛을 **둘** 깐다. 하나만 두면 면이 평평해 보인다 —
   오른쪽 위가 밝고 왼쪽 아래가 살짝 받쳐야 부피가 생긴다.
   왼쪽 것은 7% 라 눈에 띄지 않는다. 없으면 허전하고 있으면 모르는 정도가 맞다. */
body.home .hero:not(.has-photo)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(700px 440px at 88% 4%, rgba(27, 58, 92, .15), transparent 68%),
        radial-gradient(560px 380px at 6% 96%, rgba(27, 58, 92, .07), transparent 70%);
}
/* 업무 목차를 흰 판으로 세운다. 본문의 상자들과 결을 맞춘다 */
body.home .hero:not(.has-photo) .hero-bar ul {
    background: var(--paper);
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--lift);
}
body.home .hero:not(.has-photo) .hero-bar li { border-top-color: var(--line-soft); }
body.home .hero:not(.has-photo) .hero-bar li:nth-child(-n+2) { border-top-width: 0; }
body.home .hero:not(.has-photo) .hero-bar li:nth-child(2n) { border-right-width: 0; }
body.home .hero:not(.has-photo) .hero-bar a:hover {
    background: var(--accent-pale);
    color: var(--accent);
}

.home-work { padding-top: 2rem; }

.hsec {
    background: var(--paper);
    border: 0;
    border-radius: 18px;
    padding: 2.5rem 2.4rem 2.7rem;
    /*
     * 절과 절 사이.
     *
     * 1.1rem(18.7px) 이었는데 상자 **안쪽** 여백이 42.5px 이라
     * 「밖이 안보다 좁은」 꼴이었다. 두 장의 종이가 붙어 한 장처럼 보인다.
     *
     * 32px 로도, 64px 로도 좁았다. 눈은 **첫 간격으로 그 사이트가 숨 쉬는 폭을
     * 정해 버린다** — 히어로에서 첫 절까지가 92px 인데 그 뒤가 그보다 좁으면
     * 아래로 내려갈수록 답답해진다. 그래서 92px 로 **맞춰** 버린다.
     * 위에서 아래까지 한 폭이라 리듬을 다시 배울 것이 없다.
     */
    margin: 0 0 5.4rem;
    box-shadow: var(--lift);
}
/* 옆에 세운 사진이 상자 밖으로 새지 않게 */
.hsec::after { content: ""; display: block; clear: both; }

/* ── 절의 판 색 ───────────────────────────────────────────
 *
 * 흰 상자가 일곱 번 이어지면 밋밋해진다. **둘만 달리해도 리듬이 생긴다.**
 * 글은 한 글자도 바뀌지 않고 판만 바뀐다.
 */

/*
 * 색을 깐 절에는 **가는 테두리**를 두른다.
 *
 * 흰 절은 그림자(--lift)가 가장자리를 그려 준다. 색을 깐 절은 그림자를 껐고,
 * 색도 흰 바탕과 겨우 갈릴 만큼 옅게 걷어 냈더니 **아래쪽에서 가장자리가
 * 사라져 버렸다.** 글이 없는 아래 여백은 판 색만 남는데 그 색이
 * 흰 바탕과 거의 같으니 어디가 끝인지 보이지 않는다.
 * 옅은 남색 판은 위에서 아래로 옅어지는 그러데이션이라 더 그랬다.
 *
 * 그림자를 되살리면 판이 다시 떠올라 「은은하게」 하려던 것이 도로아미타불이다.
 * 1px 선은 판을 띄우지 않고 **가장자리만** 그린다.
 * 색은 판 색보다 두어 단 진한 같은 계열로 둔다 — 다른 색 선을 쓰면 그 선이 보인다.
 */

/* 옅은 남색 판. 흰 상자들 사이에서 한 번 쉬어 가는 자리 */
.hsec-soft {
    background: linear-gradient(160deg, #EDF2F9 0%, #F4F7FB 100%);
    border: 1px solid #DCE4F0;
    box-shadow: none;
}
.hsec-soft .blk-table-wrap { box-shadow: var(--lift); }

/*
 * 모래 판 둘.
 *
 * 처음에는 마지막 절을 **진한 남색**으로 했는데 화면 전체와 겉돌았다 —
 * 흰 상자 여섯 사이에 검푸른 판 하나가 끼어 무겁고 따로 놀았다.
 * 보조색으로 들인 황토와 같은 식구인 모래색으로 바꾼다.
 *
 * 글자는 먹색 그대로다. 판만 따뜻해지고 읽기는 달라지지 않는다.
 */
.hsec-sand {
    background: var(--sand);
    border: 1px solid #EDE5D5;
    box-shadow: none;
}
.hsec-sand .blk-table-wrap { box-shadow: var(--lift); }

/* 한 단계 진한 모래. 마지막 절이라 무게가 조금 더 있어야 한다 */
.hsec-warm {
    background: var(--sand-deep);
    border: 1px solid #E7DCC6;
    box-shadow: none;
}
.hsec-warm .blk-table-wrap { box-shadow: var(--lift); }
/* 모래 판 위에서는 선이 묻힌다. 한 단계 진한 선을 쓴다 */
.hsec-sand .blk-table th,
.hsec-sand .blk-table td,
.hsec-warm .blk-table th,
.hsec-warm .blk-table td { border-bottom-color: #EAE3D6; }

/* faq 블록은 자기 제목을 스스로 그린다. 그것도 절 제목으로 본다 */
.hsec > h2,
.hsec > .blk-faq > h2 {
    font-size: 1.52rem;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0 0 1.3rem;
    padding-bottom: 0;
    border-bottom: 0;
    line-height: 1.3;
}

/*
 * 절 상자 **안의** 카드.
 *
 * 전에는 테두리를 없애고 구분선만 그어 나눴다. 선으로 나누던 때는
 * 좌우 여백이 없어야 글이 절 제목과 같은 세로줄에 맞았다 — 그래서 .2rem 이었다.
 *
 * 그런데 바깥 .cards .card 가 그림자를 갖게 되면서 이 안쪽 카드도 그림자를
 * 물려받아, **네모로 보이는데 글은 왼쪽 끝에 붙어 있는** 꼴이 됐다.
 * 안쪽 여백이 좌우 3.3px 이었다.
 *
 * 두 설계가 섞인 것이라 하나로 정한다 — **안쪽도 카드로 둔다.**
 * 흰 절 상자 위이므로 바탕을 옅은 회색으로 깔아 갈라 놓고,
 * 그림자는 지운다. 종이 위에 또 그림자를 얹으면 층이 흐려진다.
 */
.hsec .cards {
    gap: .8rem;
    /* 위 .cards 와 같은 까닭으로 auto-fit 이다 — 홈에서는 이 규칙이 이긴다 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    border-top: 0;
    margin-top: 1.3rem;
}
.hsec .cards .card {
    background: var(--paper-2);
    border: 0;
    border-radius: 12px;
    padding: 1.25rem 1.35rem 1.35rem;
    box-shadow: none;
    transition: background .18s ease, transform .18s ease;
}
.hsec .cards .card:hover {
    background: var(--accent-pale);
    box-shadow: none;
    transform: translateY(-2px);
}
/* 마우스를 올리면 카드가 옅은 남색이 된다. 기호 판도 한 단 더 내려야
   카드에 묻히지 않는다 — 이 한 줄이 없으면 올린 동안 판이 사라진다 */
.hsec .cards .card:hover .card-ico { background: #CFDEF2; }
.hsec .cards h3 a { color: var(--accent); }

/* 상자 안의 안내는 왼쪽 선 대신 옅은 바탕으로.
   모서리는 같은 상자 안의 카드(12px)와 맞춘다 — 한 화면에 둥글기가
   여럿이면 그것만으로도 손이 여러 번 간 화면처럼 보인다. */
.hsec .blk-note {
    background: var(--accent-pale);
    border-left: 0;
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
}
.hsec .blk-note b { color: var(--warm); }
.hsec .blk-note.warn { background: #FBF2EC; }
.hsec .blk-table-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: none;
}
.hsec .blk-faq-item { padding: 1rem 0; }

/* 바닥글도 상자에 담는다. 회색 바탕 위에 절들과 나란히 서야
   페이지가 상자 하나로 끝나지 않고 같은 결로 마무리된다.
   아래 여백은 모바일 고정 버튼 자리라 바깥에 남긴다. */
/*
 * 마지막 절과 바닥글 사이.
 *
 * 절의 아래 여백(5.4rem)과 main 의 아래 여백(5.2rem)이 **더해져서**
 * 180px 이 됐다. 다른 절 사이는 92px 인데 여기만 두 배였다.
 * margin 과 padding 은 서로 다른 상자의 것이라 겹쳐지지 않고 쌓인다.
 *
 * 마지막 절의 아래 여백을 지우고, main 의 여백 하나로 사이를 만든다.
 * 바닥글도 흰 상자라 절과 같은 결이므로 **같은 92px** 이라야 한다.
 */
body.home .home-work > .hsec:last-of-type { margin-bottom: 0; }
body.home main { padding-bottom: 5.4rem; }

body.home .site-foot {
    background: transparent;
    border-top: 0;
    padding: 0 0 4.8rem;
}
body.home .site-foot > .wrap {
    background: var(--paper);
    border: 0;
    border-radius: 18px;
    padding: 2.1rem 2.4rem 2.3rem;
    box-shadow: var(--lift);
}

@media (max-width: 720px) {
    .home-work { padding-top: 1.2rem; }
    .hsec { padding: 1.6rem 1.25rem 1.8rem; border-radius: 14px; margin-bottom: 3rem; }
    /* 바닥글 앞 여백도 절 사이와 같게. 넓은 화면에서 5.4rem 으로 둔 값이
       좁은 화면까지 따라와 89px 대 50px 로 어긋나 있었다. */
    body.home main { padding-bottom: 3rem; }
    .hsec > h2 { font-size: 1.2rem; }
    .hsec .cards { gap: .7rem; }
    .hsec .cards .card { padding: 1.1rem 1.2rem 1.2rem; }
    body.home .site-foot > .wrap { padding: 1.5rem 1.25rem 1.7rem; border-radius: 14px; }
}

/*
 * 떠 있는 연락 버튼.
 *
 * 화면 오른쪽 **한가운데**에 남색 동그라미 셋을 세워 두었었다.
 * 그 모양이 2010년대 병원·학원 홈페이지의 표식이라, 보는 사람이
 * 글을 읽기도 전에 사이트의 연식을 읽어 버린다. 오른쪽 아래로 내렸다.
 *
 * 그러고 나니 이번엔 **눈에 안 띄었다.** 63x38px 흰 알약이 흰 화면 위에
 * 놓여 있으니 보일 리가 없고, 「예약」「카톡」 두 글자로는 무슨 예약인지도
 * 알 수 없었다.
 *
 * 그런데 이름을 늘리면 **본문을 가린다.** 1100px 화면에서 이미 61px 을
 * 덮고 있었다. 그래서 화면 폭에 따라 갈랐다 —
 *   1300px 이상  아이콘 + 이름
 *   1300px 미만  아이콘만 (좁아서 본문을 거의 안 가린다)
 * 이름은 HTML 에 늘 있고 CSS 가 감출 뿐이라 로봇과 읽는 프로그램은 그대로 읽는다.
 */
.rail {
    position: fixed;
    right: 1.35rem;
    bottom: 1.35rem;
    top: auto;
    transform: none;
    z-index: 40;
    display: flex;
    flex-direction: column;
    /* 셋의 너비를 맞춘다. 제각각이면 오른쪽 끝이 들쭉날쭉해 보인다.
       fixed 상자라 너비는 가장 긴 단추에 맞춰지고, stretch 로 나머지가 따라간다 */
    align-items: stretch;
    gap: .5rem;
}
.rail-btn {
    display: flex;
    align-items: center;
    /* 아이콘을 왼쪽에 고정한다. 가운데 정렬하면 원판 셋이 세로로 안 맞는다 */
    justify-content: flex-start;
    gap: .5rem;
    height: 46px;
    padding: 0 1.05rem;
    border-radius: 999px;
    background: var(--paper);
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--lift-up);
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/*
 * 아이콘 원판.
 *
 * 네이버 초록과 카카오 노랑은 **바탕색으로 쓰라고 만든 색**이다.
 * 글자색으로 쓰면 흰 바탕에서 대비가 1.3~2.25:1 이라 보이지 않는다.
 * 원판으로 깔면 노랑 위에 검정(16:1), 초록 위에 흰색이 되어 제자리를 찾는다.
 *
 * 뜻은 글자와 aria-label 이 진다 — 아이콘은 거들 뿐이라
 * 브랜드 색을 그대로 써도 뜻을 잃지 않는다.
 */
.rail-btn .ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.rail-btn .ico-naver { background: #03C75A; color: #fff; }        /* 네이버 초록 */
.rail-btn .ico-kakao { background: #FEE500; color: #191919; }      /* 카카오 노랑 */
.rail-btn .ico-go    { background: rgba(255, 255, 255, .16); color: #fff; }
/* 좁은 화면 전용 두 글자 이름. 넓은 화면에서는 긴 이름을 쓴다 */
.rail-btn .lbl-s { display: none; }
/* 마우스를 올려 단추가 남색으로 채워질 때도 브랜드 원판은 제 색을 지킨다 */
.rail-btn:hover .ico-naver { background: #03C75A; color: #fff; }
.rail-btn:hover .ico-kakao { background: #FEE500; color: #191919; }
.rail-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}
/* 마지막 하나는 채운 단추. **눌러야 할 것이 하나는 분명해야 한다** */
.rail-btn.rail-go {
    background: var(--accent);
    color: #fff;
}
.rail-btn.rail-go:hover { background: var(--accent-deep); color: #fff; }
/* 바깥으로 나가는 ↗ 는 띠에서는 군더더기다. 아이콘이 이미 무엇인지 말한다 */
.rail-btn.ext::after { content: none; }

/* 자리가 모자라면 이름을 감추고 동그란 아이콘만 남긴다 */
@media (max-width: 1299px) {
    .rail-btn {
        width: 46px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .rail-btn .lbl { display: none; }
    /* 이름이 사라지면 원판이 곧 단추다. 조금 키워 알아보기 쉽게 */
    .rail-btn .ico { width: 32px; height: 32px; }
}

@media (max-width: 720px) {
    /* 사진을 쓸 때만. 좁은 화면에서는 가로 구도 사진의 양옆이 잘려 나가
       복도가 사라지고 선반·복사기 같은 잡동사니만 남는다.
       그래서 사진을 분위기로만 쓰고 뒤로 물린다.

       **막은 넓은 화면보다 한 단만 더 준다** (2026-09-15).
       전에는 66/50/84 로 훨씬 진했는데, 넓은 화면 막을 옅게 고치고 나니
       모바일만 어둡게 떠 사무소가 「일부러 그런 거냐」고 물으셨다.
       사진 진하기를 62% 로 이미 낮춰 두었으므로 막까지 진할 까닭이 없다.
       다만 밖에서 햇빛 아래 보시는 일이 많아 한 단은 남긴다. */
    .hero.has-photo .hero-bg { opacity: .74 }
    .hero.has-photo::after {
        background: linear-gradient(180deg,
            rgba(10, 12, 14, .42) 0%,
            rgba(10, 12, 14, .26) 45%,
            rgba(10, 12, 14, .58) 100%);
    }

}

/*
 * **경계를 700px 로 둔다.** 아래 전화 띠가 뜨는 폭과 같아야 한다.
 *
 * 전에 머리말 전화 단추를 720px 에 두고 띠를 700px 에 두었다가
 * 701~720px 사이에서 전화 걸 곳이 없는 20px 틈이 생긴 적이 있다.
 * 여기서도 720px 로 두면 그 틈에서 예약 동그라미만 허공에 떠 있게 된다.
 */
@media (max-width: 700px) {
    /*
     * 좁은 화면에서는 **상담 신청 하나만** 남긴다.
     *
     * 전에는 띠를 통째로 감췄다. 아래 전화 띠가 같은 일을 한다고 보았기 때문인데,
     * 아래 띠에 들어가는 것은 셋뿐이라 **네이버 예약이 폰에서 아예 빠져** 있었다.
     * 예약은 폰으로 하는 사람이 가장 많은데 하필 폰에만 없었던 셈이다.
     *
     * 넷으로 늘리지는 않는다. 375px 화면에서 한 칸이 72px 이 되어
     * 「네이버 예약」 다섯 글자(75px)가 들어가지 않고,
     * 넓게 둔 「법무사에게 바로 전화」(136px)의 강약도 무너진다.
     * 그래서 셋은 그대로 두고 띠 **위에** 동그라미 하나를 따로 띄운다.
     *
     * 띠에 남을 셋과 동그라미로 뜰 하나를 가르는 잣대는 **걸음의 길이**다.
     * 전화·카톡·네이버 예약은 누르면 그 자리에서 끝나는 짧은 걸음이라
     * 손이 닿는 띠에 두고, 상담 신청은 페이지를 열어 폼을 채우는 긴 걸음이라
     * 동그라미로 올린다. 긴 걸음은 한 번 더 누르는 수고가 아깝지 않다.
     *
     * 375px 화면에서 본문 글줄의 오른쪽 끝이 330px 이라 빈자리는 45px 뿐이다.
     * 손가락이 닿는 최소치가 44px 이니 48px 동그라미는 글줄 위로 13px 쯤
     * 올라앉는다. 흰 테두리를 둘러 떠 있는 것으로 보이게 하면 읽는 데 걸리지 않는다.
     */
    /*
     * **부두 위로 확실히 띄운다** (2026-09-22 사무소 지적).
     *
     * 전에는 아래 띠 높이를 3.3rem 으로 잡아 두었는데 **실제로는 82px** 이었다 —
     * 그늘을 깔던 위쪽 여백(1.4rem)을 셈에 넣지 않았던 것이다.
     * 그래서 동그라미가 띠와 **14px 겹쳤고**, 하필 네이버 예약 칸 바로 위에 얹혔다.
     * 일부러 그렇게 둔 것이 아니라 사고처럼 보였다.
     *
     * 이제 부두 높이를 `--dock-h` 한 곳에서 정하고 여기서 그 값을 본다.
     * 부두가 바뀌어도 둘이 어긋나지 않는다.
     *
     * 오른쪽도 부두의 가장자리(`--dock-side`)에 맞춰 **세로로 줄을 세운다.**
     * 전에는 10px 이라 부두보다 한 뼘 밖으로 나가 있었다.
     */
    .rail {
        right: var(--dock-side);
        /* 부두 높이 + 부두 아래 여백 + 부두와의 사이. 셋 다 같은 자를 쓴다 */
        bottom: calc(var(--dock-h) + var(--dock-side)
                     + env(safe-area-inset-bottom, 0px) + var(--dock-side));
        align-items: flex-end;
        gap: 0;
    }
    .rail .rail-btn { display: none; }
    .rail .rail-go {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        width: 48px;
        height: 48px;
        padding: 0;
        /* 글 위로 올라앉는 자리라 흰 테두리로 한 겹 떼어 놓는다 */
        border: 2px solid #fff;
        border-radius: 50%;
        /* 띠와 한 식구로 둔다. 둘이 다른 색이면 아래쪽만 어수선해진다 */
        background: var(--chrome);
        color: #fff;
        box-shadow: 0 2px 6px rgba(20, 22, 26, .22), 0 8px 22px rgba(46, 42, 37, .3);
    }
    /* 단추 자체가 원판이 되었으니 아이콘 뒤의 작은 원판은 지운다 */
    .rail .rail-go .ico {
        width: auto;
        height: auto;
        background: none;
        color: #fff;
    }
    .rail .rail-go .ico svg { width: 18px; height: 18px; }
    .rail .rail-go .lbl { display: none; }
    .rail .rail-go .lbl-s {
        display: block;
        font-size: .6rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -.02em;
    }
    .rail .rail-go:active { transform: none; }
}

@media (max-width: 480px) {
    /* 좁은 화면에서는 번호만 남긴다. 줄바꿈이 생기면 머리말이 두 줄이 된다 */
    .call .lbl { display: none }
    .call { padding: .45rem .85rem }
}

/* ── 상담 신청 폼 ───────────────────────────────────────
   칸 정의는 data/contact-form.json 하나뿐이다.
   틀린 칸만 표시하고 적으신 값은 되살린다. */
.blk-form { margin: 1.6rem 0 0; max-width: 34rem }
.blk-form .field { margin: 0 0 1.35rem }

/*
 * 무엇이 잘못됐는지 모아 보이는 자리.
 *
 * 빨강으로 두르되 **바탕은 옅게** 한다. 새빨간 덩어리는 겁을 주는데,
 * 여기 오신 분은 잘못한 것이 아니라 한 칸을 덜 채우신 것뿐이다.
 */
.form-errs {
    margin: 0 0 1.6rem;
    padding: 1rem 1.2rem;
    border: 1px solid #E8B4A8;
    border-left: 3px solid #C0442A;
    border-radius: var(--radius-sm);
    background: #FDF4F1;
    font-size: .94rem;
}
.form-errs b { display: block; margin-bottom: .5rem; color: #9A2F18; }
.form-errs ul { margin: 0; padding-left: 1.1rem; }
.form-errs li { margin: .25rem 0; line-height: 1.7; }
.form-errs li a { font-weight: 700; }
.form-errs p { margin: .6rem 0 0; font-size: .88rem; color: var(--ink-2); }
/*
 * 고리를 눌러 내려간 칸이 머리말에 가리지 않게.
 *
 * 고리는 칸 **자체**(input·select)를 가리킨다 — 감싸는 상자가 아니다.
 * 그래야 눌렀을 때 그 자리로 가면서 **커서까지 들어간다.**
 * 그러니 여백도 칸에 걸어야 한다.
 */
.blk-form input,
.blk-form select,
.blk-form textarea { scroll-margin-top: 6rem; }
.blk-form label {
    display: block;
    margin: 0 0 .4rem;
    font-weight: 600;
    font-size: .93rem;
    color: var(--ink);
}
.blk-form .need { color: var(--accent); margin-left: .15rem }
.blk-form input[type="text"],
.blk-form input[type="tel"],
.blk-form input[type="date"],
.blk-form select,
.blk-form textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    line-height: 1.6;
}
.blk-form textarea { resize: vertical; min-height: 9rem }

/*
 * 날짜 칸 — **칸 어디를 눌러도 달력이 열린다.**
 *
 * 원래는 오른쪽 끝의 작은 달력 그림을 정확히 눌러야만 열린다.
 * 손가락으로는 거의 못 맞히고, 마우스로도 한 번에 안 되는 일이 잦다.
 *
 * 자바스크립트로 showPicker() 를 부르면 되지만 **이 사이트에는 스크립트가 없다.**
 * 그래서 그 작은 그림을 **칸 전체 크기로 늘리고 투명하게** 만든다.
 * 누르는 자리가 칸 전체가 되고, 눌리는 것은 여전히 달력 단추다.
 *
 * 대신 그림이 안 보이게 되므로 **칸 바탕에 달력을 따로 그려** 둔다 —
 * 무엇을 하는 칸인지 보이지 않으면 누를 생각을 하지 않는다.
 *
 * 파이어폭스는 이 가짜 요소를 모른다. 거기서는 예전처럼 단추를 눌러야 하지만
 * 값은 그대로 고를 수 있다 — 안 되는 것이 아니라 덜 편한 것이다.
 */
.blk-form input[type="date"] {
    position: relative;
    padding-right: 2.8rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B717A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 19px 19px;
    cursor: pointer;
}
.blk-form input[type="date"]::-webkit-calendar-picker-indicator {
    /* inset·auto 대신 네 값을 다 적는다. 이 가짜 요소는 브라우저마다
       줄임말을 다르게 받아들여, 하나만 안 먹으면 단추가 제자리에 남는다 */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    opacity: 0;
    cursor: pointer;
}
/* 눌러야 할 것임을 알리려고 마우스를 올리면 테두리가 진해진다 */
.blk-form input[type="date"]:hover { border-color: var(--accent); }
.blk-form input:focus,
.blk-form select:focus,
.blk-form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.blk-form .hint {
    margin: .4rem 0 0;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--ink-3);
}
/*
 * 동의 칸의 안내. 여러 줄이라 옅은 상자에 담는다.
 *
 * 이것은 「도움말」이 아니라 **동의하는 내용 그 자체**다
 * (개인정보보호법 제15조 제2항의 목적·항목·기간·거부권).
 * 다른 도움말과 같은 회색 잔글씨로 두면 읽지 않고 체크하게 된다.
 */
.blk-form .hint-block {
    margin: .7rem 0 0;
    padding: .95rem 1.15rem;
    background: var(--paper-2);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: .87rem;
    line-height: 1.85;
}
.blk-form .hint-block strong { color: var(--ink); }

/* 새 창으로 열리는 링크. 폼 안의 링크는 적던 것이 날아가지 않게 새 창으로 연다.
   같은 창에서 넘어가는 링크와 눈으로 구별돼야 한다. */
.blk-form a.newtab::after {
    content: " ↗";
    font-size: .9em;
    opacity: .7;
}

/* ── 개인정보 안내 창 ─────────────────────────────────────
 *
 * **자바스크립트가 한 줄도 없다.** :target 하나로 연다 —
 * 주소 끝이 #privacy 가 되면 이 요소에 :target 이 붙고 display 가 풀린다.
 * 닫기는 #f-agree(동의 칸)로 보내 :target 을 떼면서 보던 자리로 돌려보낸다.
 *
 * 왜 창인가 — /privacy/ 로 넘어가면 **적고 있던 사연이 날아간다.**
 * 새 창도 되지만 휴대폰에서는 탭이 갈려 돌아오기 어렵다.
 */
.pv {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
}
.pv:target { display: block; }

/* 뒤를 덮는 막. 이것 자체가 링크라 **바깥을 눌러도 닫힌다.**
 *
 * 흐림(backdrop-filter)을 걷어냈다 (2026-09-15). 검은 막이 이미 가려 주어
 * 보기에 차이가 없고, **이 창은 상담 신청 폼 위에서 뜬다** —
 * 거기서 화면이 멈추면 접수를 잃는다. 머리말과 같은 까닭이다. */
.pv-back {
    position: absolute;
    inset: 0;
    background: rgba(20, 22, 26, .52);
}

.pv-box {
    position: relative;
    width: min(38rem, 100% - 2rem);
    max-height: min(84vh, 46rem);
    margin: 6vh auto 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20, 22, 26, .28);
    overflow: hidden;
}

/* 머리는 붙어 있는다. 길게 내려도 닫는 단추가 늘 보여야 한다 */
.pv-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.6rem 1.1rem;
    border-bottom: 1px solid var(--line-soft);
}
.pv-head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
/* 손가락이 닿는 크기로 둔다. 44px 은 모바일에서 눌리는 최소치다 */
.pv-x {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -.5rem -.6rem -.5rem 0;
    border-radius: 50%;
    color: var(--ink-2);
    font-size: 1.05rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.pv-x:hover { background: var(--paper-2); color: var(--ink); }

.pv-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.3rem 1.6rem 1.5rem;
    font-size: .95rem;
    line-height: 1.85;
    color: var(--ink-2);
}
.pv-body p { margin: 0 0 .55rem; }
/* 굵은 줄은 소제목 노릇을 한다. 위에 숨을 준다 */
.pv-body p strong:first-child { color: var(--ink); }
.pv-body p:has(> strong:only-child) { margin-top: 1.3rem; margin-bottom: .3rem; }
.pv-body p:first-child { margin-top: 0; }

.pv-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.6rem 1.2rem;
    border-top: 1px solid var(--line-soft);
    font-size: .92rem;
}
.pv-foot a.newtab::after { content: " ↗"; font-size: .9em; opacity: .7; }
.pv-done {
    padding: .6rem 1.5rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background .15s ease;
}
.pv-done:hover { background: var(--accent-deep); color: #fff; }

@media (max-width: 560px) {
    /* 휴대폰에서는 아래에서 올라온 장처럼 화면을 거의 채운다 */
    .pv-box {
        width: 100%;
        max-height: 92vh;
        margin: 8vh 0 0;
        border-radius: 18px 18px 0 0;
    }
    .pv-head { padding: 1.1rem 1.15rem .95rem; }
    .pv-body { padding: 1.1rem 1.15rem 1.3rem; }
    .pv-foot { padding: .9rem 1.15rem 1.1rem; }
}

/* 흐림 효과를 아예 쓰지 않게 되어 이 규칙은 지웠다 (2026-09-15).
   `.pv-back` 에서 backdrop-filter 를 걷어냈으므로 뺄 것이 없다. */
.blk-form .err {
    margin: .4rem 0 0;
    font-size: .87rem;
    font-weight: 600;
    color: #A32A1E;
}
.blk-form .has-error input,
.blk-form .has-error select,
.blk-form .has-error textarea { border-color: #A32A1E }

.blk-form .check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-weight: 400;
    font-size: .93rem;
    cursor: pointer;
}
.blk-form .check input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .18rem }

/*
 * 동의 칸 — 안내를 **같은 줄 오른쪽**에 둔다.
 *
 * 「자세히 보기」가 아래 줄에 홀로 놓이면 동의 글과 떨어져 보여
 * 무엇을 자세히 보라는 것인지 한눈에 안 잡힌다.
 * 옆에 붙여야 「이 동의에 대한 설명」으로 읽힌다.
 *
 * 좁은 화면에서는 저절로 아래로 내려간다 (flex-wrap).
 * 오류 글은 늘 새 줄에 둔다 — 옆에 끼면 못 보고 지나친다.
 */
/*
 * **방문 상담을 고르면 저녁 시간을 감춘다.**
 *
 * 자바스크립트 없이 `:has()` 하나로 한다 —
 * 「방법」 칸에서 방문이 골라져 있으면, 「시간」 칸의 저녁 항목을 지운다.
 *
 * **이것만 믿지는 않는다.** 목록 항목 감추기를 무시하는 브라우저가 있어
 * 거기서는 저녁이 그대로 보인다. 그래서 서버에서 한 번 더 막는다 —
 * 보이는 것을 줄이는 일이지 막는 일이 아니다.
 *
 * 저녁을 고른 뒤에 방문으로 바꾸시면 고른 값은 그대로 남는다.
 * 그때는 보낼 때 「18시 이후에는 전화 상담만 됩니다」가 뜬다.
 */
.blk-form:has(select[name="method"] option[value="방문 상담"]:checked)
    select[name="when_time"] option[data-only="전화 상담"] {
    display: none;
}

/*
 * 「열 자 이상」 안내 — **적는 동안에만** 보인다.
 *
 * `:placeholder-shown` 은 **비어 있을 때** 참이다.
 * 그러니 `:invalid:not(:placeholder-shown)` 은
 * 「무언가 적었는데 아직 모자란 동안」이라는 뜻이 된다.
 * 아무것도 안 적었을 때는 안 뜨고, 열 자를 넘기면 사라진다.
 *
 * 숫자로 세어 주는 것(7/10)은 스크립트가 있어야 한다. 이 사이트에는 없다.
 * 대신 **채워졌는지 아닌지**는 이렇게 알려 줄 수 있다.
 */
.blk-form .minlen {
    display: none;
    margin: .4rem 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: #9A2F18;
}
.blk-form textarea:invalid:not(:placeholder-shown) ~ .minlen,
.blk-form input:invalid:not(:placeholder-shown) ~ .minlen { display: block; }

.blk-form .field-check {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem .7rem;
}
.blk-form .field-check .hint { margin: 0; }
.blk-form .field-check .err { flex-basis: 100%; }

/* 사람 눈에 보이지 않는 덫. 화면에서 완전히 빼되 읽는 프로그램이
   건너뛰도록 aria-hidden 도 함께 걸어 두었다 (마크업 쪽). */
.blk-form .trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.blk-form .btn-send {
    display: inline-block;
    padding: .8rem 2rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.blk-form .btn-send:hover { background: var(--accent-deep) }

.form-alert {
    margin: 0 0 1.4rem;
    padding: .85rem 1rem;
    border-left: 3px solid #A32A1E;
    background: #FDF2F0;
    color: #7A2016;
    font-size: .93rem;
    line-height: 1.7;
}

/* 접수 목록 (관리자) */
.inq { margin: 0 0 2rem; padding: 0 0 1.4rem; border-bottom: 1px solid var(--line) }
.inq h2 { margin: 0 0 .3rem; font-size: 1.05rem }
.inq .when { margin: 0 0 .7rem; font-size: .87rem; color: var(--ink-3) }
.inq pre {
    margin: 0;
    padding: .9rem 1rem;
    background: var(--paper-2);
    border-radius: var(--radius);
    font: inherit;
    font-size: .92rem;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 직통은 사무소 번호와 역할이 다르다. 테두리만 두어 한 급 아래로 둔다 */
.call-direct { background: transparent; color: var(--accent); border-color: var(--line) }
.call-direct:hover { background: var(--accent-pale); border-color: var(--accent) }
body.home .site-head .call-office { background: #fff; color: var(--ink); border-color: #fff }
body.home .site-head .call-office:hover { background: var(--accent-pale) }

@media (max-width: 700px) {
    /* 머리말 전화 묶음은 이 지점에서 통째로 사라지고 아래 띠가 맡는다.
       여기 남은 것은 그 사이 한 박자의 모습이다. */
    .call-office { display: none }
    .calls { gap: 0 }
}

/* ── 빵부스러기 ─────────────────────────────────────────
   구조화 데이터로만 내보내고 화면에는 없었다. 사람도 허브로
   돌아갈 길이 필요하고, 마크업은 보이는 것만 내보내야 한다. */
/* 색이 옅으면 안 보인다. 흰 바탕에서 재 보니 링크가 3.5:1, 구분자가 1.3:1 로
   작은 글자 기준(4.5:1)에 못 미쳤다. 링크는 포인트색으로 올려 누를 수 있다는
   것도 함께 알린다 (11.6:1). */
.crumbs { margin: 0 0 1.7rem; font-size: .9rem }
.crumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none }
.crumbs li { color: var(--ink-2) }
.crumbs li + li::before { content: "›"; margin: 0 .5rem; color: var(--ink-3) }
.crumbs a { color: var(--accent); text-decoration: none }
.crumbs a:hover { text-decoration: underline }
.crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 600 }

/* ── 같은 업무의 다른 글 ────────────────────────────────
   글 하나를 읽고 옆 글로 갈 때 뒤로가기를 누르지 않아도 되게. */
/* 글 차례.
   5,000자 넘는 글에서 「비용만 보고 싶은」 사람이 끝까지 훑지 않게 한다.
   여러 칸으로 흘려 세로 길이를 줄인다 — 차례가 길면 본문이 밀린다. */
.toc {
    margin: 1.4rem 0 1.3rem;
    padding: 1.1rem 1.3rem 1.2rem;
    border-left: 3px solid var(--accent);
    background: var(--paper-2);
    border-radius: 0 6px 6px 0;
}
/* 넓은 화면에서는 여닫는 장치를 감추고 평범한 제목처럼 보인다 */
.toc-check { display: none; }
.toc-head {
    display: block;
    margin: 0 0 .7rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: .02em;
}
.toc-head .n { display: none; }
.toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
    /* 칸 수가 아니라 **칸 너비**를 정한다.
       2 로 못박으면 좁은 화면에서도 두 칸이 되어 제목이 잘게 끊긴다.
       너비를 주면 브라우저가 들어갈 만큼만 칸을 만든다 — 넓으면 둘, 좁으면 하나. */
    columns: 16rem;
    column-gap: 2rem;
}
.toc li {
    counter-increment: toc;
    font-size: .93rem;
    line-height: 1.7;
    break-inside: avoid;
    /* 줄이 넘어가도 번호 아래로 흘러들지 않게 번호와 글을 갈라 놓는다 */
    display: flex;
    align-items: baseline;
    gap: .45rem;
    padding: .1rem 0;
    /* 한국어는 낱말 안에서 끊지 않는다 */
    word-break: keep-all;
}
.toc li::before {
    content: counter(toc);
    flex: 0 0 1.1rem;
    text-align: right;
    color: var(--ink-3);
    font-size: .86rem;
}
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* 갈래로 묶은 위키 목록 (/rehabilitation/wiki/).
   한 장에 수백 편이 늘어서므로 갈래 안 목록을 칸으로 흘려 세로를 줄인다.
   차례와 같은 방식 — 칸 수가 아니라 칸 너비를 준다(좁으면 한 칸). */
.wiki-recent { margin: 1.6rem 0 .4rem; }
.wiki-recent h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.wiki-recent .date { margin-left: .45rem; font-size: .84rem; color: var(--ink-3); white-space: nowrap; }
.wiki-sec { margin-top: 2rem; }
.wiki-sec h2 .n { font-size: .82rem; font-weight: 500; color: var(--ink-3); margin-left: .35rem; }
.wiki-sec .blk-list { columns: 18rem; column-gap: 2rem; }
.wiki-sec .blk-list li { break-inside: avoid; word-break: keep-all; }

/* 폰에서만 접는다.
   차례는 펼쳐져 있어야 쓸모가 크다 — 접어 두면 있는 줄도 모르고 지나간다.
   다만 폰에서는 열네 줄이 첫 화면의 절반을 먹는다. */
@media (max-width: 720px) {
    /* 화면 밖으로 밀지 않는다. 키보드로 닿아야 하고,
       -9999px 로 밀면 숨겨진 텍스트 검사에도 걸린다. */
    .toc-check {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }
    .toc-head {
        margin: 0;
        cursor: pointer;
    }
    .toc-head .n {
        display: inline;
        margin-left: .3rem;
        font-weight: 500;
    }
    .toc-head .n::before { content: "("; }
    .toc-head .n::after { content: ")"; }
    .toc-head::after {
        content: "＋";
        float: right;
        font-weight: 400;
    }
    .toc-check:focus-visible + .toc-head {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
    .toc-check:not(:checked) ~ ol { display: none; }
    .toc-check:checked ~ ol { margin-top: .8rem; }
    .toc-check:checked + .toc-head::after { content: "－"; }
}

/* 건너뛴 자리가 머리말에 가리지 않게 */
:target { scroll-margin-top: 4.5rem; }

/* 글 첫머리의 접힌 문.
   「이 글이 아니네」를 알아채는 것은 초반인데 나갈 곳이 맨 아래에만 있었다.
   접혀 있으면 한 줄만 차지하므로 본문을 밀지 않는다. */
.sib-peek {
    margin: 1.3rem 0 1.8rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper-2);
}
.sib-peek > summary {
    padding: .72rem 1rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
}
/* 웹킷 기본 삼각형을 지우고 우리 화살표를 쓴다 */
.sib-peek > summary::-webkit-details-marker { display: none; }
.sib-peek > summary::before {
    content: "＋";
    margin-right: .45rem;
    font-weight: 400;
    color: var(--ink-3);
}
.sib-peek[open] > summary::before { content: "－"; }
.sib-peek[open] > summary { border-bottom: 1px solid var(--line); }
.sib-peek ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem 1.4rem;
    margin: 0;
    padding: .9rem 1rem .3rem;
    list-style: none;
}
.sib-peek li { font-size: .92rem; }
.sib-peek a { text-decoration: none; }
.sib-peek a:hover { text-decoration: underline; }
.sib-peek .more { margin: 0; padding: .6rem 1rem 1rem; font-size: .88rem; }

.siblings {
    margin: 3rem 0 0;
    padding: 1.5rem 1.6rem 1.3rem;
    background: var(--paper-2);
    border-radius: var(--radius);
}
.siblings h2 { margin: 0 0 1rem; font-size: 1rem; color: var(--ink) }
.siblings ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .55rem 1.4rem;
    margin: 0; padding: 0; list-style: none;
}
.siblings li { font-size: .93rem }
.siblings a { text-decoration: none }
.siblings a:hover { text-decoration: underline }
.siblings .more { margin: 1.1rem 0 0; font-size: .9rem }
@media (max-width: 720px) {
    .siblings { padding: 1.2rem 1.1rem 1rem }
}

/* ── 좁은 화면의 업무 메뉴 ──────────────────────────────
   자바스크립트를 쓰지 않는다. 체크박스가 여닫는다.
   details 로 만들었다가 되돌렸다 - 요즘 크롬은 닫힌 details 의 내용을
   content-visibility 로 감춰서 CSS 로 되돌려도 자리를 차지하지 않는다.
   넓은 화면에서는 여는 장치를 감추고 메뉴를 늘 펼쳐 둔다. */
.menu { flex-basis: 100% }
.menu-check, .menu-btn, .menu-veil { display: none }
.menu > .gnb { display: block }

@media (max-width: 700px) {
    /*
     * 머리말의 전화를 감추는 지점은 **아래 띠가 나타나는 지점과 같아야 한다.**
     *
     * 전에는 여기가 720px, .call-bar 는 700px 이었다.
     * 그래서 **701~720px 사이 20px 구간에는 전화 단추가 하나도 없었다.**
     * 태블릿 세로폭이 흔히 그 언저리다. 두 값을 700 으로 맞춘다.
     */
    .site-head .calls { display: none }
}

/*
 * **720px 에서 900px 으로 올렸다** (2026-09-22 사무소 지적).
 *
 * 721~900px 에서는 업무 여덟 개가 한 줄에 못 들어가 **메뉴가 두 줄로 접혔고**,
 * 머리말이 186px 이 되었다. 머리말은 늘 붙어 다니므로 그만큼을 계속 먹는다.
 * 태블릿 세로가 흔히 그 언저리다. 900 으로 올리면 그 구간도 「업무 메뉴」로
 * 접혀 머리말이 73px 이 된다.
 *
 * 넓은 화면(901px 이상)은 여덟 개가 한 줄에 들어가므로 그대로 펼쳐 둔다 —
 * 1280px 에서 글자 537px / 통 1040px 이다.
 */
@media (max-width: 900px) {
    /* 머리말을 한 줄로. 전화를 감추는 것과는 지점이 다르다(그쪽은 700px) */
    .site-head { position: relative; padding: .85rem 0 }
    /* 메뉴가 제 줄을 차지하지 않게 한다 — 안 그러면 머리말이 두 줄이 된다 */
    .menu { flex-basis: auto; margin-left: auto }

    /* 화면 밖으로 밀지 않는다. 키보드로 닿아야 하고,
       -9999px 로 밀면 숨겨진 텍스트 검사에도 걸린다. */
    .menu-check {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }
    .menu-btn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
        padding: .45rem .2rem;
        color: var(--ink);
        font-size: .95rem;
        font-weight: 600;
        cursor: pointer;
        /* 덮개(.menu-veil)보다 위에 있어야 단추를 직접 누를 수 있다 */
        position: relative;
        z-index: 31;
    }
    /*
     * 바깥을 눌러 닫는 덮개. 열렸을 때만 화면을 덮는다.
     *
     * 투명하다 — 보이지 않아야 한다. 층은 메뉴(30)보다 아래, 그래서
     * **메뉴 링크는 그대로 눌리고 그 밖의 자리는 덮개가 받는다.**
     * 머리말이 z-index 60 으로 층을 따로 만들고 있어, 그 안의 20 이면
     * 본문 위를 덮는다. 라벨이라 스크롤은 막지 않는다.
     */
    .menu-check:checked ~ .menu-veil {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 20;
        background: transparent;
        cursor: default;
    }
    .menu-check:focus-visible + .menu-btn {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
    .menu-check:checked + .menu-btn { color: var(--accent) }

    .menu-check:not(:checked) ~ .gnb { display: none }
    /* 펼치면 머리말 아래로 내려온다. 머리말 자체는 늘 한 줄이다 */
    .menu-check:checked ~ .gnb {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 30;
        padding: .2rem 0 .7rem;
        background: var(--paper);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 10px 22px rgba(0, 0, 0, .09);
    }
    .menu-check:checked ~ .gnb ul { width: var(--wrap); margin: 0 auto }

    /* 손가락 크기에 맞춘다. 두 칸으로 나누면 가장 좁은 항목도 넉넉해진다 */
    .gnb ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 }
    .gnb a {
        display: block;
        padding: .8rem .4rem;
        border-top: 1px solid var(--line-soft);
    }
}