/* =====================================================================
   법무법인 유일 — style.css

   01 토큰      02 기본     03 공통    04 헤더     05 히어로
   06 질문      07 전담센터  08 변호인단 09 원칙     10 상담
   11 푸터      12 모바일 바 13 반응형  14 모션 최소화
===================================================================== */

/* =====================================================================
   01. 토큰
===================================================================== */

:root {
  /*
    무채색이 기본. 크림과 골드는 어두운 구간에서만 쓴다.
    색을 없애는 게 아니라 아껴 써서 눈에 띄게 한다.
    그라데이션은 히어로 scrim 외에 쓰지 않는다.
  */
  --paper:      #fcfcfb;   /* 기본 바탕 — 노란기 없는 오프화이트 */
  --paper-2:    #f1f1ef;   /* 섹션 교대용 중성 회색 */
  --sand:       #e6e6e3;   /* 인물 뒤 면 */
  --ink:        #17171a;   /* 본문 글자 */
  --ink-soft:   #4a4a4f;
  --ink-faint:  #8a8a90;
  --line:       #e2e2e0;
  --line-soft:  #eeeeec;

  /* 밝은 구간의 강조는 금색이 아니라 잉크 자체 */
  --gold:       #8a7248;   /* 아주 좁게만 — eyebrow 등 */
  --gold-soft:  #c6ab7f;   /* 어두운 구간 전용 */

  /* 어두운 구간 — 로고의 차콜 */
  --dark:       #141416;
  --dark-up:    #1f1f22;
  --cream:      #e4d5b7;   /* 로고 글자색 */

  /*
    카카오톡 버튼 전용. 사이트에서 색을 가진 유일한 자리다.
    카카오가 정한 값이라 임의로 바꾸면 카톡 버튼으로 읽히지 않는다.
  */
  --kakao:      #fee500;
  --kakao-up:   #ffed4d;   /* 손을 올렸을 때 */
  --kakao-ink:  #1b1508;   /* 노란 바탕 위 글자 */

  --font-display: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;
  --font-serif: "Noto Serif KR", Georgia, serif;
  --font-sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --shell: 1240px;
  --gutter: 40px;
  --head-h: 84px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* =====================================================================
   02. 기본
===================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll {
  overflow: hidden;
}

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

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

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3,
p, dl, dd, ol, ul, figure, blockquote {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

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

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}


/* =====================================================================
   03. 공통
===================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 섹션 사이를 넉넉히 비운다. 여백이 이 디자인의 핵심이다. */
.questions,
.practice,
.lawyers,
.principle,
.contact {
  padding: clamp(96px, 11vw, 180px) 0;
}

.eyebrow {
  margin-bottom: 26px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.eyebrow-light {
  color: var(--gold-soft);
}


/* ---------------------------------------------------------------------
   줄바꿈 다듬기

   한글은 단어 사이에서만 끊어야 읽힌다(word-break: keep-all).
   그것만으로는 부족한 두 가지를 여기서 정리한다.

   ① 제목 — text-wrap: balance
      줄들의 길이를 비슷하게 맞춘다.
      "이런 상황이시라면 / 지금이 가장 중요한 / 때입니다." 처럼
      마지막 줄에 한 마디만 떨어지는 모양을 막는다.

   ② 본문 — text-wrap: pretty
      마지막 줄에 한 단어만 남는 것을 막는다.

   두 가지 모두 지원하지 않는 브라우저에서는 그냥 무시되고
   지금까지와 똑같이 보인다. 깨지지 않는다.
--------------------------------------------------------------------- */

.hero-title,
.sec-title,
.topic-title,
.topic-cta-title,
.done-title,
.doc-head h1,
.principle-head h2,
.panel-name,
.q-q,
.band-quote,
h3 {
  text-wrap: balance;
}

.hero-lead,
.topic-lead,
.sec-aside,
.topic-cta-lead,
.panel-desc,
.flow-list p,
.work-list p,
.sit-list p,
.type-grid p,
.info-list dd,
.table-note,
.flow-note,
.q-note,
.q-panel p,
.member-career li,
.principle-list p {
  text-wrap: pretty;
}

/*
  글 안에서 한 부분만 색을 달리할 때 쓴다.
  밝은 구간에서는 금색, 어두운 구간에서는 각 자리에서 다시 지정한다.
  굵기를 조금만 올리는 것은 색만으로는 색맹인 분께 구분이 안 되기 때문이다.
*/
.tint {
  color: var(--gold);
  font-weight: 500;
}


/*
  좁은 화면에서는 손으로 넣은 <br> 을 무시한다.

  제목의 <br> 은 넓은 화면을 보고 넣은 것이다.
  휴대폰에서 그대로 두면 <br> 뒤의 줄이 한 번 더 접혀
  세 줄이 되고 마지막 줄에 한 마디만 남는다.
  <br> 을 지우면 위의 balance 가 알아서 고르게 나눈다.
*/
@media (max-width: 620px) {
  .sec-title br,
  .topic-cta-title br,
  .done-title br,
  .hero-lead br {
    display: none;
  }

  /*
    제목을 30px 에서 27px 로 조금 줄인다.
    30px 이면 한 줄에 열한 자밖에 못 들어가
    "지금이 가장 중요한 때입니다." 같은 제목이 세 줄로 갈라졌다.
    27px 이면 열세 자가 들어가 두 줄로 떨어진다.
    페이지 열 곳의 제목 여든세 개를 재어 고른 값이다.
  */
  .sec-title {
    font-size: 27px;
  }
}

/*
  한글 명조 제목.
  line-height 를 1.12 아래로 내리면 받침과 다음 줄이 겹친다.
*/
.sec-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.sec-title-light {
  color: var(--paper);
}

.sec-head {
  margin-bottom: clamp(52px, 6vw, 86px);
}

/*
  한 칸 안에서 묶음을 나눌 때 쓰는 작은 제목.
  sec-title 은 너무 크고 h3 만으로는 구분이 되지 않는 자리에 쓴다.
  글이 긴 쪽에서 「여기부터 다른 이야기」를 보여준다.
*/
.sub-head {
  margin-top: clamp(52px, 5.4vw, 80px);
  margin-bottom: clamp(26px, 2.8vw, 36px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.sec-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 40px;
}

.sec-aside {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.95;
  word-break: keep-all;
}

.sec-aside-wide {
  max-width: 46ch;
  margin-top: 22px;
}

/* 버튼 — 색으로 소리치지 않는다 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}

.btn i {
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease);
}

.btn:hover i {
  width: 28px;
}

.btn-fill {
  background: var(--ink);
  color: var(--paper);
}

.btn-fill:hover {
  background: var(--gold);
}

.btn-line {
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn-line:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-wide {
  width: 100%;
  justify-content: center;
}


/* ---------------------------------------------------------------------
   카카오톡 상담 버튼

   노란색은 이 버튼에서만 쓴다.
   사이트 전체가 무채색이라, 이 하나만 색을 가지면
   찾으라고 하지 않아도 눈이 먼저 간다.

   색은 카카오가 정해 둔 값을 그대로 쓴다(#FEE500).
   다른 노랑을 쓰면 카톡 버튼으로 읽히지 않는다.
--------------------------------------------------------------------- */

.btn-kakao {
  background: var(--kakao);
  color: var(--kakao-ink);
}

.btn-kakao:hover {
  background: var(--kakao-up);
}


/* ---------------------------------------------------------------------
   버튼 아이콘

   그림은 CSS 안에 들어 있다(mask). 파일을 따로 올리지 않아도 되고,
   글자색을 따라가므로 어두운 자리에서도 밝은 자리에서도 맞는다.

   어느 버튼에 무엇이 붙는지는 링크 주소로 정한다.
     tel:  로 시작하면        → 수화기
     #contact 로 끝나면       → 서류
     카톡 버튼               → 말풍선
   그래서 HTML 을 고치지 않아도 자동으로 붙는다.
--------------------------------------------------------------------- */

.topic-acts .btn[href^="tel:"]::before,
.topic-acts .btn[href$="#contact"]::before,
.topic-cta-act .btn[href$="#contact"]::before,
.hero-acts .btn[href$="#contact"]::before,
.drawer-foot .btn[href^="tel:"]::before,
.btn-kakao::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: center / contain no-repeat var(--ico);
  mask: center / contain no-repeat var(--ico);
}

/* 수화기 */
.rail-tel,
.topic-acts .btn[href^="tel:"],
.drawer-foot .btn[href^="tel:"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* 말풍선 */
.rail-kakao,
.btn-kakao {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

/* 서류 */
.rail-form,
.topic-acts .btn[href$="#contact"],
.topic-cta-act .btn[href$="#contact"],
.hero-acts .btn[href$="#contact"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

/* 등장 */
.rise {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.rise.is-in {
  opacity: 1;
  transform: none;
}


/* =====================================================================
   04. 헤더
===================================================================== */

/*
  히어로가 어두운 사진이므로 헤더는 밝은 글자로 시작하고,
  스크롤해 밝은 배경 위로 올라오면 어두운 글자로 바꾼다.
*/
.head {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  height: var(--head-h);
  color: var(--paper);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              height 0.4s var(--ease), color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.head .brand-mark { color: var(--cream); }
.head .brand-text small { color: rgba(252, 252, 251, 0.6); }
.head .nav a { color: rgba(252, 252, 251, 0.82); }
.head .nav a:hover { color: var(--paper); }
.head .head-call-label { color: var(--gold-soft); }
.head .burger i { background: var(--paper); }

.head.is-stuck {
  height: 68px;
  background: rgba(252, 252, 251, 0.9);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(14px);
  color: var(--ink);
}

.head.is-stuck .brand-mark { color: var(--gold); }
.head.is-stuck .brand-text small { color: var(--ink-faint); }
.head.is-stuck .nav a { color: var(--ink-soft); }
.head.is-stuck .nav a:hover { color: var(--ink); }
.head.is-stuck .head-call-label { color: var(--gold); }
.head.is-stuck .burger i { background: var(--ink); }

/* 모바일 메뉴가 열리면 바탕이 밝아지므로 헤더도 어두운 글자로 */
body.no-scroll .head { color: var(--ink); }
body.no-scroll .head .brand-mark { color: var(--gold); }
body.no-scroll .head .brand-text small { color: var(--ink-faint); }
body.no-scroll .head .burger i { background: var(--ink); }

.head-in {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-right: auto;
}

.brand-mark {
  width: 21px;
  color: var(--gold);
}

.brand-text strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.brand-text small {
  display: block;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.3em;
}

.nav {
  display: flex;
  gap: 34px;
}

.nav a {
  position: relative;
  padding: 6px 0;
  font-size: 15px;
  color: var(--ink-soft);
  transition: color 0.3s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.35s var(--ease);
}

.nav a:hover {
  color: var(--ink);
}

.nav a:hover::after {
  width: 100%;
}

/*
  전담센터 — 커서를 올리면 바로 아래로 여섯 센터가 펼쳐진다.
  메뉴는 main.js 가 practices 를 보고 만든다.
*/
/*
  이 칸을 그냥 감싸기만 하면 안쪽 글자가 옆 메뉴보다 6px 위로 올라간다.
  감싼 순간 링크가 줄 안의 글자로 바뀌어 위아래 여백이 높이에 안 잡히기 때문이다.
  flex 로 두어 링크를 다시 한 덩어리로 만들고 가운데 맞춘다.
*/
.nav-drop {
  position: relative;
  display: flex;
  align-items: center;
}

/*
  머리말 아래 8px 은 비워 두되, 그 빈 자리도 메뉴의 몸에 포함시킨다(padding).
  띄우기만 하면 커서가 그 틈을 지나는 사이 메뉴가 닫힌다.
*/
.nav-menu {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 5;
  visibility: hidden;
  min-width: 208px;
  padding-top: 14px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease),
              visibility 0s linear 0.28s;
}

.nav-drop.is-open .nav-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.nav-menu a {
  display: block;
  padding: 11px 18px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-bottom: 0;
  font-size: 14.5px;
  white-space: nowrap;
}

.nav-menu a:first-child {
  padding-top: 14px;
}

.nav-menu a:last-child {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

/* 밑줄 표시는 최상단 줄에만 둔다. 목록 안에서는 바탕색으로 알린다. */
.nav-menu a::after {
  display: none;
}

/*
  헤더가 밝든 어둡든 메뉴 자체는 밝은 종이색이므로
  글자색은 늘 어둡게 고정한다.
*/
.head .nav-menu a,
.head.is-stuck .nav-menu a {
  color: var(--ink-soft);
}

.head .nav-menu a:hover,
.head.is-stuck .nav-menu a:hover {
  background: var(--cream);
  color: var(--ink);
}

.head-call {
  text-align: right;
  line-height: 1.35;
}

.head-call-label {
  display: block;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.head-call-num {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  place-content: center;
  gap: 7px;
}

.burger i {
  display: block;
  width: 22px;
  height: 1px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.2s ease;
}

.burger.is-on i:first-child {
  transform: translateY(4px) rotate(45deg);
}

.burger.is-on i:last-child {
  transform: translateY(-4px) rotate(-45deg);
}


/* 모바일 서랍 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--head-h) var(--gutter) 40px;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease), visibility 0s;
}

.drawer-nav {
  display: grid;
  gap: 4px;
}

.drawer-nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 300;
  letter-spacing: -0.035em;
}

/*
  서랍 메뉴의 전담센터 아래에 여섯 센터를 작은 알약으로 편다.
  윗줄과 같은 크기로 두면 서랍이 화면보다 길어진다.
*/
.drawer-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -2px 0 8px;
  padding-left: 30px;
}

.drawer-nav .drawer-sub a {
  padding: 7px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

.drawer-nav em {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.2em;
}

.drawer-foot {
  margin-top: 44px;
  text-align: center;
}

.drawer-foot p {
  margin-top: 16px;
  color: var(--ink-faint);
  font-size: 13.5px;
}


/* =====================================================================
   05. 히어로
===================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(760px, 92svh);
  padding: calc(var(--head-h) + 60px) 0 clamp(80px, 9vw, 130px);
  overflow: hidden;
  background: var(--dark);
  color: var(--paper);
}

/* 배경 사진 — img 로 두어 로딩 우선순위를 줄 수 있게 한다 */
.hero-bg,
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

/*
  첫 장면의 차례.

    1. 어두운 바탕에 Y 로고와 이름만 — 명함 한 장처럼
    2. 그 뒤로 빌딩 사진이 천천히 떠오른다. 사진 위에는 아무 글도 없다
    3. 영상이 사진을 덮으면 그때 "증거주의" 와 버튼이 올라온다

  사진에 글을 얹지 않는 것이 이 구성의 핵심이다.
  사진은 사진대로 한 번 보여주고, 할 말은 영상 위에서 한다.

  시간을 고치실 때는 main.js 의 HERO_REVEAL 도 함께 보십시오.
  그 값이 3번(영상과 글자)이 시작되는 때를 정한다.
*/
.hero-bg {
  opacity: 0;
  transform: scale(1.06);
  animation: heroBgIn 1.4s var(--ease) 1.7s forwards;
}

@keyframes heroBgIn {
  to { opacity: 1; transform: none; }
}

/*
  동영상은 사진 위에 겹쳐 두고, 재생이 시작된 뒤에 서서히 나타난다.
  (main.js 가 .is-on 을 붙여준다)
  느린 통신에서 검은 네모가 잠깐 스치는 것을 막기 위함이다.
*/
.hero-video {
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.hero-video.is-on { opacity: 1; }

/* 움직임을 줄이도록 설정한 분에게는 동영상을 틀지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/*
  글자가 가운데 있으므로 가운데를 눌러준다.
  균일하게 덮으면 사진이 죽고, 안 덮으면 글자가 안 읽힌다.
*/
/*
  그늘막의 세기가 장면마다 다르다.

  사진만 보일 때는 얹힌 글이 로고와 법인 이름뿐이다. 둘 다 크고 밝은
  크림색이라 옅은 그늘로도 읽힌다. 여기서 짙게 덮으면 파란 하늘이
  잿빛으로 죽어 사진을 쓴 뜻이 없어진다.

  영상과 "증거주의" 가 올라오는 때(is-ready)에 맞춰 제 세기로 돌아온다.
  그때는 잔글씨까지 읽혀야 하므로 짙어야 한다.
*/
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.42;
  transition: opacity 1.2s var(--ease);
  background:
    radial-gradient(ellipse 78% 72% at 50% 52%,
      rgba(14, 14, 16, 0.84) 0%,
      rgba(14, 14, 16, 0.62) 46%,
      rgba(14, 14, 16, 0.34) 100%),
    linear-gradient(180deg,
      rgba(14, 14, 16, 0.62) 0%,
      rgba(14, 14, 16, 0.1) 30%,
      rgba(14, 14, 16, 0.55) 100%);
}

.hero.is-ready .hero-scrim { opacity: 1; }

/*
  머리띠(메뉴 · 대표전화) 자리에만 걸리는 얇은 그늘.
  위의 그늘막은 사진 장면에서 옅어지는데, 그때 하늘이 밝으면
  흰 메뉴 글자가 묻힌다. 이 띠는 장면과 상관없이 늘 같은 세기로 있어
  메뉴가 어느 장면에서나 읽힌다.
*/
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 180px;
  background: linear-gradient(180deg,
    rgba(14, 14, 16, 0.5) 0%,
    rgba(14, 14, 16, 0.22) 55%,
    rgba(14, 14, 16, 0) 100%);
  pointer-events: none;
}

.hero-in {
  position: relative;
  z-index: 2;
  max-width: min(var(--shell), 100%);
  text-align: center;
}

/* ---- 로고 등장 ---- */

/*
  로고. 민사 중심으로 바꾸면서 "증거주의" 제목이 빠졌으므로
  그 무게를 로고와 법인 이름이 나눠 진다. 전보다 키웠다.
  (전: clamp(64px, 7vw, 96px))
*/
.hero-logo {
  width: clamp(86px, 9.2vw, 128px);
  margin: 0 auto;
  color: var(--cream);
}

/*
  pathLength="1" 이라 dasharray 1 이 획 전체 길이다.
  offset 을 1 에서 0 으로 옮기면 획이 그려진다.
*/
.hero-logo path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.95s var(--ease) forwards;
}

.hero-logo-a { animation-delay: 0.15s; }
.hero-logo-b { animation-delay: 0.4s; }

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.hero-word {
  margin-top: 26px;
}

/*
  법인 이름이 첫 화면의 제목 노릇을 할 때의 크기.

  전에는 이 이름이 로고 밑에 붙는 작은 글씨였고, 그 아래에
  "증거주의 / 수사 · 재판 대응" 이라는 큰 제목이 따로 있었다.
  민사 중심으로 바꾸면서 그 제목을 뺐으므로, 이름이 그 무게를 대신한다.
  로고도 함께 키워 둘이 한 덩어리로 보이게 한다.

  제목이 없어진 빈자리만큼만 키운다. 이름은 문장이 아니라 이름이어서
  문장만큼 크면 외치는 것처럼 보인다.
*/
.hero-word-lead {
  margin-top: 30px;
  font-weight: 400;
}

.hero-word-lead .hero-word-ko {
  font-size: clamp(32px, 4.4vw, 58px);
  font-weight: 300;
  letter-spacing: 0.06em;
}

.hero-word-lead .hero-word-en {
  margin-top: 14px;
  font-size: clamp(10.5px, 1.05vw, 13.5px);
  letter-spacing: 0.46em;
}

.hero-word-ko {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 300;
  letter-spacing: 0.14em;
}

.hero-word-en {
  display: block;
  margin-top: 7px;
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.9vw, 11.5px);
  letter-spacing: 0.42em;
}

/*
  이름은 로고와 한 벌이다. 사진이 떠오르기 전, 어두운 바탕에서
  Y 밑에 자리를 잡는다. 그래야 1번이 명함 한 장으로 보인다.
*/
.hero-word {
  opacity: 0;
  transform: translateY(18px);
  animation: heroUp 1s var(--ease) 1.25s forwards;
}

@keyframes heroUp {
  to { opacity: 1; transform: none; }
}

/*
  제목 · 설명 · 버튼은 사진 위에 얹지 않는다.
  영상이 사진을 덮는 때에 맞춰 함께 올라온다.
  main.js 가 그때 .hero 에 is-ready 를 붙인다.

  ⚠️ 영상이 없거나 자동재생이 막힌 기기에서도 is-ready 는 붙는다.
     그러지 않으면 그분들에게는 제목도 상담 버튼도 영영 나오지 않는다.
*/
.hero-title,
.hero-lead,
.hero-acts {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.hero.is-ready .hero-title,
.hero.is-ready .hero-lead,
.hero.is-ready .hero-acts {
  opacity: 1;
  transform: none;
}

.hero.is-ready .hero-title { transition-delay: 0.25s; }
.hero.is-ready .hero-lead  { transition-delay: 0.45s; }
.hero.is-ready .hero-acts  { transition-delay: 0.6s; }

/* 제목 위 가는 선 */
.hero-title::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: clamp(30px, 3.4vw, 44px) auto clamp(26px, 3vw, 38px);
  background: var(--gold-soft);
}

/*
  제목은 두 줄로 떨어져야 한다.
  더 키우면 "수사 · 재판 대응" 이 세 줄로 갈라진다.
*/
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.4vw, 74px);
  font-weight: 200;
  line-height: 1.34;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

/*
  첫 화면 문구의 두 마디.

  두 마디를 같은 칸(grid-area)에 겹쳐 두면 상자 높이가 둘 중
  긴 쪽에 맞춰져, 문구가 바뀔 때 아래 버튼이 움찔거리지 않는다.
  보이지 않는 마디도 글자는 그대로 있어 검색엔진이 둘 다 읽는다.
*/
.hero-beats {
  display: grid;
}

.hero-beat {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.hero-beat.is-on {
  opacity: 1;
  transform: none;
}

.hero-lead {
  max-width: 34em;
  margin: 26px auto 0;
  color: rgba(252, 252, 251, 0.76);
  font-size: 16.5px;
  line-height: 2.05;
  word-break: keep-all;
}

.hero-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 42px;
}

.btn-cream {
  background: var(--cream);
  color: var(--ink);
}

.btn-cream:hover {
  background: var(--paper);
}

.btn-ghost {
  border: 1px solid rgba(252, 252, 251, 0.38);
  color: var(--paper);
}

.btn-ghost:hover {
  border-color: var(--cream);
  color: var(--cream);
}

/* 아래로 이어진다는 표시 */
.hero-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  z-index: 2;
  width: 1px;
  height: 54px;
  overflow: hidden;
  background: rgba(252, 252, 251, 0.2);
  transform: translateX(-50%);
}

.hero-cue i {
  display: block;
  width: 100%;
  height: 46%;
  background: var(--gold-soft);
  animation: cue 2.6s var(--ease) infinite;
}

@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(118%); }
  100% { transform: translateY(118%); }
}


/* =====================================================================
   05-b. 대표변호사 인사말
===================================================================== */

.greeting {
  padding: clamp(84px, 9vw, 150px) 0;
  background: var(--paper);
}

.greeting-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr);
  align-items: center;
  gap: clamp(40px, 5vw, 84px);
}

.greeting-text {
  display: grid;
  gap: 18px;
  max-width: 40em;
  margin-top: 32px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 2.1;
  word-break: keep-all;
}

.greeting-sign {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.greeting-sign span {
  color: var(--ink-faint);
  font-size: 13.5px;
}

.greeting-sign strong {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.04em;
}

/*
  친필 서명. 글자로 적은 이름 옆에 나란히 둔다.
  height 만 정하고 width 는 auto 로 두어야 서명의 가로세로 비가
  그대로 유지된다. top 으로 조금 내려 손으로 쓴 것처럼 기준선을
  살짝 넘게 한다.
*/
.greeting-sign-mark {
  position: relative;
  top: 13px;
  width: auto;
  height: 80px;
  margin-left: 2px;
  opacity: 0.92;
}

/* 인물 — 사진 위에 아무것도 덮지 않는다 */
.greeting-figure {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 440px;
}

.greeting-plate {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 14%;
  height: 76%;
  background: var(--sand);
}

.greeting-figure img {
  position: relative;
  width: auto;
  max-height: min(560px, 60vh);
  object-fit: contain;
}


/* =====================================================================
   06. 의뢰인의 질문
===================================================================== */

.questions {
  background: var(--paper-2);
}

.q-list {
  border-top: 1px solid var(--line);
}

.q-item {
  border-bottom: 1px solid var(--line);
}

/* 질문 줄 — 번호 · 분류 · 질문 · 표시 */
.q-head {
  display: grid;
  grid-template-columns: 62px 66px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: clamp(24px, 2.6vw, 34px) 0;
  text-align: left;
}

.q-no {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.22em;
}

.q-tag {
  justify-self: start;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font-size: 12px;
  white-space: nowrap;
}

.q-q {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.9vw, 25px);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.035em;
  word-break: keep-all;
  transition: color 0.3s ease;
}

.q-head:hover .q-q {
  color: var(--gold);
}

.is-open .q-q {
  font-weight: 400;
}

/* + 에서 − 로 */
.q-mark {
  position: relative;
  justify-self: end;
  width: 15px;
  height: 15px;
}

.q-mark::before,
.q-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transition: transform 0.4s var(--ease);
}

.q-mark::after {
  transform: rotate(90deg);
}

.is-open .q-mark::after {
  transform: rotate(0deg);
}

/*
  grid-template-rows 0fr → 1fr 로 접고 편다.
  max-height 를 쓰면 답변 길이가 제각각이라 값을 정할 수 없다.
*/
.q-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}

.is-open .q-panel {
  grid-template-rows: 1fr;
}

.q-inner {
  overflow: hidden;
}

/* 한글은 한 줄에 40~45자가 편하다. ch 단위는 라틴 기준이라 너무 좁아진다. */
.q-inner p {
  max-width: 720px;
  margin-left: 146px;
  padding-bottom: 20px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 2.05;
  word-break: keep-all;
}

.q-inner p:first-child {
  padding-top: 2px;
}

.q-inner p:last-child {
  padding-bottom: clamp(30px, 3vw, 42px);
}

.q-inner b {
  color: var(--ink);
  font-weight: 500;
}

.q-note {
  max-width: 780px;
  margin-top: clamp(46px, 5vw, 72px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1.9;
  word-break: keep-all;
}

.q-note a {
  color: var(--gold);
  border-bottom: 1px solid currentColor;
}


/* =====================================================================
   07. 전담센터
===================================================================== */

.panels {
  display: flex;
  gap: 10px;
  height: clamp(400px, 46vw, 540px);
}

.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  transition: flex-grow 0.7s var(--ease);
}

/*
  펼친 칸이 너무 커지면 닫힌 칸이 60px 로 줄어 이름이 잘린다.
  2.6 이면 닫힌 칸이 175px 남는다.
*/
.panel.is-open {
  flex-grow: 2.6;
}

.panel-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(60%) brightness(0.82);
  transition: filter 0.7s var(--ease), transform 0.9s var(--ease);
}

.panel.is-open .panel-img {
  filter: grayscale(0%) brightness(0.92);
  transform: scale(1.03);
}

/* 사진을 어둡게 덮되, 글자가 놓이는 아래쪽만 */
.panel-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(20, 18, 15, 0.05) 34%,
    rgba(20, 18, 15, 0.78) 100%
  );
}

.panel-body {
  position: absolute;
  right: 26px;
  bottom: 28px;
  left: 26px;
  z-index: 3;
  display: block;
  color: var(--paper);
}

.panel-en {
  display: block;
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.3em;
}

/*
  제목이 길면(공증 · 법인/부동산 등기) 한 줄에 다 못 들어간다.
  줄을 바꾸되 낱말 안에서는 자르지 않는다(keep-all).
*/
.panel-name {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.035em;
  word-break: keep-all;
  transition: font-size 0.7s var(--ease);
}

/*
  닫힌 칸은 170px 밖에 안 된다. 30px 그대로 두면 긴 제목이 네 줄로 쪼개져
  한 글자짜리 칸들과 바닥선이 어긋난다. 22px 이 긴 제목을 두 줄로
  묶으면서 짧은 제목은 한 줄로 두는 경계다.

  펼치면 다시 커지므로 열린 칸이 더 도드라진다.
*/
.panel:not(.is-open) .panel-name {
  font-size: 22px;
}

/*
  센터가 여섯으로 늘면서 닫힌 칸이 170px 에서 146px 로 좁아졌다.
  좌우 여백과 영문 자간을 조금 줄여야 REHABILITATION 이 잘리지 않는다.
*/
.panel:not(.is-open) .panel-body {
  right: 18px;
  left: 18px;
}

.panel:not(.is-open) .panel-en {
  font-size: 9.5px;
  letter-spacing: 0.16em;
}

/* 펼쳐진 칸에서만 설명이 보인다 */
/*
  칸 전체를 덮는 펼치기 버튼.

  글자(.panel-body)가 이 버튼보다 위에 그려지지만
  글자에는 pointer-events: none 을 주어 누름이 그대로 통과한다.
  그래서 칸의 어디를 눌러도 펼쳐진다.

  예외는 세부 분야 알약뿐이다. 알약만 다시 누를 수 있게 되돌려 놓아,
  알약을 누르면 그 페이지로 가고 그 밖을 누르면 칸이 펼쳐진다.

  z-index 로는 해결되지 않는다. .panel-body 가 쌓임 맥락을 만들어
  그 안의 알약이 아무리 높은 z-index 를 가져도 밖으로 나오지 못한다.
*/
.panel-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

/*
  글자 전체를 눌러도 통과시킨다.
  되살리는 것은 실제로 갈 곳이 있는 링크 알약뿐이다.
  글자가 없는 알약(이혼 · 재산분할 등)은 눌러도 칸이 펼쳐진다.
  갈 데가 없는 것을 눌렀을 때 아무 일도 안 일어나면 고장으로 보인다.
*/
.panel-body {
  pointer-events: none;
}

.panel.is-open .panel-tags a {
  pointer-events: auto;
}

/*
  펼침 · 접힘.

  0fr → 1fr 로 높이를 접었다 편다.
  이때 안쪽은 반드시 한 겹으로 감싸야 한다(.panel-detail-in).
  grid-template-rows: 0fr 은 첫째 줄만 접기 때문에,
  자식이 셋이면 나머지 둘이 제 높이를 그대로 차지해
  칸 이름을 위로 밀어낸다. 휴대폰에서 닫힌 칸의 이름이
  보이지 않던 것이 이 때문이었다.
*/
.panel-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.6s var(--ease), opacity 0.4s ease;
}

.panel-detail-in {
  min-height: 0;
  overflow: hidden;
}

.panel.is-open .panel-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.6s var(--ease), opacity 0.5s ease 0.15s;
}

/* 분야마다 "왜 우리가 맡는가" 를 검증 가능한 경력 한 줄로 */
/* 한 덩어리로 묶어 줄을 넘기지 않는다 (담당자 이름 등) */
.nb {
  white-space: nowrap;
}

.panel-credit {
  display: block;
  overflow: hidden;
  padding-top: 14px;
  color: var(--gold-soft);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  word-break: keep-all;
}

/*
  설명 문구(desc) 없이 이 줄만 있는 패널은 이 줄이 본문 노릇을 한다.
  그때는 금색이 아니라 흰 글자로 둔다.
  담당자 이름과 설명이 함께 있는 패널은 지금처럼 금색으로 구분해야
  두 줄이 서로 다른 역할이라는 게 보인다.

  사진 위에 얹히는 글자라 금색은 밝은 부분에서 잘 묻힌다.
  그래서 이 줄 안에서는 tint 도 색을 바꾸지 않고 굵기로만 구분한다.
*/
.panel-credit-solo {
  max-width: 34em;
  color: rgba(252, 252, 251, 0.94);
  font-size: 14px;
  line-height: 1.85;
}

.panel-credit-solo .tint {
  color: inherit;
}

.panel-desc {
  display: block;
  overflow: hidden;
  max-width: 34em;
  padding-top: 10px;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(252, 252, 251, 0.82);
  word-break: keep-all;
}

.panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  overflow: hidden;
  padding-top: 16px;
}

.panel-tags span,
.panel-tags a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(252, 252, 251, 0.32);
  border-radius: 999px;
  font-size: 12.5px;
  white-space: nowrap;
}

/*
  상세 페이지가 있는 항목만 링크가 된다.
  화살표와 밝은 테두리로 "눌리는 것" 임을 알린다.
*/
.panel-tags a {
  border-color: var(--cream);
  color: var(--cream);
  transition: background 0.3s ease, color 0.3s ease;
}

.panel-tags a i {
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.panel-tags a:hover {
  background: var(--cream);
  color: var(--dark);
}

.panel-tags a:hover i {
  transform: rotate(45deg) translate(2px, -2px);
}


/* =====================================================================
   08. 변호인단
===================================================================== */

/*
  변호인단 — 두 칸씩 세우고, 사진 옆에 이름과 경력을 나란히 둔다.

  전에는 세 칸이었다. 네 분을 세 칸에 넣으면 둘째 줄에 한 분만 남아
  두 칸이 비고, 그 구멍이 인원이 적어 보이는 원인이 된다.
  두 칸으로 두면 빈 자리가 없고, 한 분에게 주어지는 가로 폭이 넓어져
  수가 적어도 각자가 또렷하게 보인다.
*/
.roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 4.4vw, 64px) clamp(30px, 3.4vw, 56px);
}

/*
  사진 기둥을 카드의 절반 가까이(48%) 준다.
  변호사 사진이 이 쪽의 얼굴이므로 글보다 먼저 눈에 들어와야 한다.
  이 값을 더 올리면 오른쪽 글 기둥이 좁아져 경력 한 줄이 두 줄로 접히고,
  그러면 사진이 커진 만큼 글이 너저분해져 오히려 무게가 깎인다.
*/
.member {
  display: grid;
  grid-template-columns: 48% minmax(0, 1fr);
  gap: clamp(20px, 2vw, 32px);
  align-items: start;
}

/*
  변호사 사진은 배경이 흰 스튜디오 사진이라 오프화이트 바탕 위에서
  가장자리가 녹아 없어진다. 머리카락 한 올 두께의 테로 네 변을 잡아
  사진이 바탕에 뜨지 않고 한 덩어리로 앉게 한다.
*/
.member-figure {
  background: var(--paper-2);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}

/*
  height: auto 가 없으면 img 의 height 속성이 아래 aspect-ratio 를 눌러
  사진이 세로로 늘어난다. 속성은 로딩 중 자리만 잡는 용도로 둔다.
*/
/*
  4 / 5 는 변호사 사진 원본(1024×1280)의 비율 그대로다.
  그래서 사진이 한 점도 잘리지 않고, 큰 화면과 휴대전화가
  똑같은 자리에서 잘린 — 정확히는 잘리지 않은 — 같은 사진을 보여준다.

  ⚠️ 이 값은 아래 휴대전화 규칙의 aspect-ratio 와 반드시 같아야 한다.
     둘이 어긋나면 같은 분의 사진이 기기마다 다르게 잘려 보인다.
     한때 큰 화면만 5 / 6 으로 두었다가 그 일이 있었다.

  사진 옆에 글이 나란히 놓이므로 두 기둥의 키도 함께 본다.
  지금은 경력을 다섯 줄까지 펴 두었고, 어긋남이 가장 큰 곳이 32px 다.
  경력 줄 수를 바꾸시면(main.js 의 OPEN_COUNT) 여기도 함께 보셔야 한다.
*/
.member-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 12%;
  transition: transform 0.9s var(--ease);
}

.member:hover .member-photo {
  transform: scale(1.035);
}

.member-body {
  padding-top: 3px;
}

.member-name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.member-name em {
  margin-left: 9px;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

/*
  keep-all 이 없으면 좁은 화면에서 "교통사" / "고" 처럼
  낱말 한가운데가 끊긴다. 가운뎃점 자리에서만 넘기게 한다.
*/
.member-field {
  margin-top: 5px;
  color: var(--ink-faint);
  font-size: 14px;
  word-break: keep-all;
}

.member-career {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.member-career li {
  position: relative;
  padding-left: 13px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.75;
  word-break: keep-all;
}

.member-career li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 1px;
  background: var(--gold);
}

/*
  접힌 경력. 높이를 정해두면 사람마다 줄 수가 달라 맞출 수 없으므로
  grid-template-rows 0fr → 1fr 로 편다.
*/
.member-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.is-more .member-more {
  grid-template-rows: 1fr;
}

.member-more-in {
  overflow: hidden;
}

/* 이어지는 목록이므로 위 테두리는 다시 긋지 않는다 */
.member-career-more {
  margin-top: 5px;
  padding-top: 0;
  border-top: 0;
}

.member-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 0;
  color: var(--ink-soft);
  font-size: 13px;
  transition: color 0.3s ease;
}

.member-toggle:hover {
  color: var(--gold);
}

/* + 에서 − 로 */
.member-toggle i {
  position: relative;
  width: 11px;
  height: 11px;
}

.member-toggle i::before,
.member-toggle i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}

.member-toggle i::after {
  transform: rotate(90deg);
}

.is-more .member-toggle i::after {
  transform: rotate(0deg);
}

/* =====================================================================
   09. 원칙 — 어두운 구간
===================================================================== */

.principle {
  background: var(--dark);
  color: var(--paper);
}

.principle-in {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(46px, 6vw, 100px);
  align-items: start;
}

.principle-head {
  position: sticky;
  top: calc(var(--head-h) + 40px);
}

.principle-list {
  display: grid;
  gap: clamp(34px, 3.6vw, 52px);
}

.principle-list li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 24px;
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgba(228, 213, 183, 0.2);
}

.principle-no {
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.2em;
  padding-top: 5px;
}

.principle-list h3 {
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.principle-list p {
  margin-top: 13px;
  color: rgba(252, 252, 251, 0.66);
  font-size: 15px;
  line-height: 2;
  word-break: keep-all;
}


/* =====================================================================
   10. 언론보도
===================================================================== */

.press {
  padding: clamp(80px, 9vw, 130px) 0;
  background: var(--paper-2);
}

/*
  기사 한 건이 카드 하나다. 카드 전체가 눌린다.
  auto-fit 이라 기사가 두 건이면 두 칸, 세 건이면 세 칸으로 알아서 나뉜다.
*/
.press-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
}

.press-link {
  display: grid;
  gap: 18px;
  color: var(--ink);
  text-decoration: none;
}

/*
  사진은 4:3 으로 잘라 쓴다. 기사마다 원본 비율이 달라도
  카드 높이가 흐트러지지 않는다.

  16:9 로 두면 세로로 긴 인물 사진이 들어왔을 때 가로띠처럼 잘려
  얼굴이 날아간다. 4:3 이 세로 사진과 가로 사진 모두를 견딘다.
*/
.press-figure {
  margin: 0;
  overflow: hidden;
  background: var(--sand);
  aspect-ratio: 4 / 3;
}

/*
  위쪽을 기준으로 자른다. 인물 사진은 얼굴이 위에 있고,
  건물이나 행사 사진도 중요한 것이 대개 위쪽에 있다.
*/
.press-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 0.7s var(--ease);
}

.press-link:hover .press-photo,
.press-link:focus-visible .press-photo {
  transform: scale(1.035);
}

/* 사진이 없는 카드는 위쪽에 선을 그어 시작점을 만들어 준다 */
.press-item:not(.has-photo) .press-body {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.press-body {
  display: grid;
  gap: 9px;
}

.press-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.press-outlet {
  color: var(--ink-soft);
  font-weight: 500;
}

.press-title {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: -0.02em;
  word-break: keep-all;
  text-wrap: pretty;
  transition: color 0.3s var(--ease);
}

.press-link:hover .press-title,
.press-link:focus-visible .press-title {
  color: var(--gold);
}

@media (max-width: 620px) {
  .press-list {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* =====================================================================
   10-B. 오시는 길 · 상담
===================================================================== */

.contact-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(46px, 6vw, 96px);
  align-items: start;
}

.info-list {
  display: grid;
  gap: 1px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.info-list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.info-list dt {
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding-top: 2px;
}

.info-list dd {
  font-size: 15.5px;
  word-break: keep-all;
}

/*
  전화·이메일 링크는 글자 높이가 17px 라 손가락으로 누르기 어렵다.
  음수 여백으로 자리는 그대로 두고 누를 수 있는 영역만 넓힌다.
*/
.info-list dd a,
.q-note a,
.agree-link {
  display: inline-block;
  margin: -7px 0;
  padding: 7px 0;
}

.info-list dd a:hover {
  color: var(--gold);
}

.info-sub {
  display: block;
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 13.5px;
}

.map {
  margin-top: 34px;
}

.map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  border: 1px solid var(--line);
  /* 지도의 원색이 무채색 화면에서 튀지 않도록 살짝 눌러준다 */
  filter: saturate(0.82) contrast(0.98);
}

.map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.map-links a {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.map-links a:hover {
  border-color: var(--ink);
}

/* 실제 등록된 장소 링크이므로 이쪽을 앞세운다 */
.map-link-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: var(--ink) !important;
  background: var(--ink);
  color: var(--paper);
}

.map-link-main svg {
  width: 14px;
  height: 14px;
}

.map-link-main:hover {
  background: var(--dark);
  color: var(--cream);
}

.map-note {
  margin-top: 16px;
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1.9;
  word-break: keep-all;
}

.map-note b {
  color: var(--ink-soft);
  font-weight: 500;
}

.contact-form-wrap {
  padding: clamp(30px, 3.4vw, 48px);
  background: var(--paper-2);
}

.form-title {
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.form-lead {
  margin-top: 8px;
  color: var(--ink-faint);
  font-size: 14.5px;
}

.form {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

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

.field label {
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.field input,
.field textarea {
  width: 100%;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  font-size: 15px;
  transition: border-color 0.3s ease;
}

.field textarea {
  resize: vertical;
  line-height: 1.8;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a9a9ae;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  outline: none;
}

.agree {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}

.agree input {
  flex: none;
  width: 19px;
  height: 19px;
  margin: 4px 0 0;
  accent-color: var(--gold);
}

.agree-link {
  margin-left: 4px;
  color: var(--gold);
  border-bottom: 1px solid currentColor;
}

.form-status {
  min-height: 20px;
  font-size: 13.5px;
}

.form-status.is-bad {
  color: #9e3b2c;
}

.form-status.is-ok {
  color: var(--ink-soft);
}


/* =====================================================================
   11. 푸터
===================================================================== */

.foot {
  padding: clamp(64px, 7vw, 100px) 0 34px;
  background: var(--dark);
  color: rgba(252, 252, 251, 0.68);
  font-size: 14px;
}

.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 46px;
  padding-bottom: clamp(40px, 5vw, 64px);
}

.foot-mark {
  width: 30px;
  color: var(--cream);
}

.foot-name {
  margin-top: 20px;
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.foot-en {
  margin-top: 4px;
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.3em;
}

.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 34px;
}

.foot-col dt {
  margin-bottom: 12px;
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.foot-col dd {
  margin-bottom: 14px;
  line-height: 1.8;
  word-break: keep-all;
}

.foot-col a {
  display: block;
  padding: 4px 0;
  transition: color 0.3s ease;
}

.foot-col a:hover {
  color: var(--cream);
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid rgba(228, 213, 183, 0.16);
}

.foot-disclaimer {
  max-width: 62ch;
  color: rgba(252, 252, 251, 0.4);
  font-size: 12.5px;
  line-height: 1.85;
  word-break: keep-all;
}

.foot-copy {
  color: rgba(252, 252, 251, 0.4);
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.1em;
}


/* =====================================================================
   11-b. 문서 페이지 (개인정보처리방침 등)
===================================================================== */

.doc {
  padding: calc(var(--head-h) + 60px) 0 clamp(70px, 8vw, 120px);
}

.doc-in {
  max-width: 860px;
}

.doc-head {
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.doc-meta {
  margin-top: 18px;
  color: var(--ink-faint);
  font-size: 13.5px;
}

.doc-lead {
  margin-top: 40px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 2.05;
  word-break: keep-all;
}

.doc-sec {
  margin-top: clamp(38px, 4vw, 54px);
}

.doc-sec h2 {
  margin-bottom: 16px;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.doc-sec p {
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 2.05;
  word-break: keep-all;
}

.doc-sec b {
  color: var(--ink);
  font-weight: 500;
}

.doc-list {
  display: grid;
  gap: 7px;
  margin: 4px 0 16px;
}

.doc-list li {
  position: relative;
  padding-left: 15px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.95;
  word-break: keep-all;
}

.doc-list li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 5px;
  height: 1px;
  background: var(--gold);
}

.doc-note {
  margin-top: 14px;
  padding: 18px 20px;
  background: var(--paper-2);
  font-size: 14.5px;
}

.doc-dl {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--line);
}

.doc-dl > div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.doc-dl dt {
  color: var(--ink-faint);
  font-size: 13.5px;
}

.doc-dl dd {
  font-size: 15px;
  word-break: keep-all;
}

.doc-dl dd a:hover,
.doc-sec a:hover {
  color: var(--gold);
}

.doc-back {
  margin-top: clamp(48px, 5vw, 70px);
  padding-top: 34px;
  border-top: 1px solid var(--line);
}


/* ---------- 스팸 덫. 사람에게는 보이지 않는다 ---------- */

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


/* =====================================================================
   11-c. 접수 완료 페이지
===================================================================== */

.done {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 60px 0;
  background: var(--dark);
  color: var(--paper);
  text-align: center;
}

.done-in {
  max-width: 620px;
}

.done-mark {
  width: 58px;
  margin: 0 auto 34px;
  color: var(--cream);
}

.done-mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.1s var(--ease) forwards;
}

.done-mark path:last-child {
  animation-delay: 0.3s;
}

.done-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 200;
  line-height: 1.4;
  letter-spacing: -0.045em;
}

.done-lead {
  max-width: 30em;
  margin: 24px auto 0;
  color: rgba(252, 252, 251, 0.7);
  font-size: 15.5px;
  line-height: 2.05;
  word-break: keep-all;
}

.done-tel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 44px;
  margin-top: 40px;
  padding: 26px 0;
  border-top: 1px solid rgba(228, 213, 183, 0.2);
  border-bottom: 1px solid rgba(228, 213, 183, 0.2);
}

.done-tel dt {
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.done-tel dd {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
}

.done-back {
  margin-top: 40px;
}


/* =====================================================================
   11-d. 세부 분야 페이지 (criminal-*.html)
===================================================================== */

.topic-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(560px, 76svh);
  padding: calc(var(--head-h) + 70px) 0 clamp(56px, 6vw, 84px);
  overflow: hidden;
  background: var(--dark);
  color: var(--paper);
}

.topic-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topic-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(14, 14, 16, 0.92) 0%,
    rgba(14, 14, 16, 0.74) 48%,
    rgba(14, 14, 16, 0.42) 100%
  );
}

.topic-hero-in {
  position: relative;
  z-index: 2;
}

/* 지금 어디에 있는지 */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
  color: rgba(252, 252, 251, 0.5);
  font-size: 13px;
}

.crumb a {
  transition: color 0.3s ease;
}

.crumb a:hover {
  color: var(--cream);
}

.crumb b {
  color: var(--paper);
  font-weight: 400;
}

.topic-title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

.topic-lead {
  max-width: 34em;
  margin-top: 24px;
  color: rgba(252, 252, 251, 0.76);
  font-size: 16.5px;
  line-height: 2.05;
  word-break: keep-all;
}

/*
  형사 페이지에만 들어가는 담당 안내 한 줄.
  lead 아래, 버튼 위에 둔다. 버튼을 누르기 직전에 읽히는 자리다.
  왼쪽 세로줄은 크림색을 아주 좁게만 쓴다. 이 사이트에서 색은 아껴 쓴다.
*/
.topic-team {
  max-width: 34em;
  margin-top: 22px;
  padding-left: 15px;
  border-left: 2px solid var(--gold-soft);
  color: rgba(252, 252, 251, 0.9);
  font-size: 15.5px;
  line-height: 1.95;
  word-break: keep-all;
  text-wrap: pretty;
}

.topic-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

/* ---- 본문 구간 ---- */

.topic-sec {
  padding: clamp(80px, 9vw, 140px) 0;
  background: var(--paper);
}

.topic-sec-alt {
  background: var(--paper-2);
}

/* 이런 상황이신가요 */
.sit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 52px) clamp(30px, 4vw, 64px);
}

.sit-list li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 20px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.sit-no {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.2em;
  padding-top: 4px;
}

.sit-list h3 {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.sit-list p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 2;
  word-break: keep-all;
}

/* 절차 — 어두운 구간 */
.topic-flow {
  padding: clamp(80px, 9vw, 140px) 0;
  background: var(--dark);
  color: var(--paper);
}

.flow-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.flow-list li {
  padding-top: 24px;
  border-top: 1px solid rgba(228, 213, 183, 0.24);
}

.flow-step {
  display: block;
  margin-bottom: 14px;
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.28em;
}

.flow-list h3 {
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.flow-list p {
  margin-top: 13px;
  color: rgba(252, 252, 251, 0.66);
  font-size: 14.5px;
  line-height: 1.95;
  word-break: keep-all;
}

.flow-note {
  margin-top: clamp(34px, 4vw, 54px);
  color: rgba(252, 252, 251, 0.42);
  font-size: 13px;
}

/* 무엇을 하는가 */
.work-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.2vw, 48px);
}

.work-list li {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.work-list h3 {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.work-list p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 2;
  word-break: keep-all;
}

/* 양식 내려받기 — 공증 페이지 */
.form-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
}

.form-list li {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.form-list h3 {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.form-list > li > p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 2;
  word-break: keep-all;
}

.form-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* 목록 안에서는 버튼을 낮고 작게 — 본문을 누르지 않도록 */
.form-btns .btn {
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
}

@media (max-width: 720px) {
  .form-list {
    grid-template-columns: 1fr;
  }
}

/* 사건의 유형 */
.type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
}

.type-grid li {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.type-no {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.22em;
}

.type-grid h3 {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.type-grid p {
  margin-top: 11px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 2;
  word-break: keep-all;
}

/* =====================================================================
   분야 배너 (교통사고 첫 화면)

   type-grid 와 모양은 닮았지만 이쪽은 칸 전체가 링크다.
   그래서 손가락이 닿는 면적을 넓게 잡고, 눌리는 것이 보이도록
   테두리와 배경이 함께 움직인다.
===================================================================== */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.tile-grid-small {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
  네 칸으로 두면 영문 이름이 긴 것만 두 줄이 되어, 그 칸의 한글 이름만
  한 줄 아래로 내려간다. 줄 사이에서 이름의 높이가 어긋나 보인다.
  영문 자리를 늘 두 줄로 잡아두어 어느 칸이든 같은 자리에서 시작하게 한다.
*/
.tile-grid-small .tile-en {
  min-height: 33px;
  line-height: 1.5;
}

.tile a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}

/* 마우스가 있는 기기에서만 들어 올린다 (손가락에서는 잔상이 남는다) */
@media (hover: hover) {
  .tile a:hover {
    border-color: var(--ink);
    background: var(--paper-2);
    transform: translateY(-2px);
  }
}

.tile a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.tile-no {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
}

.tile-en {
  margin-top: 4px;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tile-name {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 400;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.tile-line {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.95;
  word-break: keep-all;
  text-wrap: pretty;
}

/* 화살표 — 칸 안에서 항상 맨 아래에 붙는다 */
.tile-go {
  margin-top: auto;
  padding-top: 18px;
}

.tile-go::before {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--ink);
  transition: width 0.25s;
}

@media (hover: hover) {
  .tile a:hover .tile-go::before {
    width: 44px;
  }
}


/*
  사진 띠. 사진이 없으면 어두운 바탕에 문장만 남고,
  assets/drug-1.* 을 올리면 그 자리에 사진이 깔린다.
*/
.band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(240px, 30vw, 400px);
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
  background: var(--dark);
  color: var(--paper);
}

.band-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 사진이 들어왔을 때만 어둡게 덮는다 */
.band.has-photo .band-in::before {
  content: "";
  position: absolute;
  inset: -100vh -50vw;
  z-index: -1;
  background: rgba(14, 14, 16, 0.72);
}

.band-in {
  position: relative;
  z-index: 1;
}

.band-quote {
  max-width: 24em;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 200;
  line-height: 1.72;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.band-quote em {
  color: var(--cream);
  font-style: normal;
}

/* 법정형 표 */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.ptable {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.ptable th,
.ptable td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  word-break: keep-all;
}

.ptable thead th {
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ptable tbody th {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.ptable tbody td {
  color: var(--ink-soft);
  line-height: 1.7;
}

.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td {
  border-bottom: 0;
}

.table-note {
  max-width: 780px;
  margin-top: 22px;
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1.95;
  word-break: keep-all;
}

.table-note b {
  color: var(--ink-soft);
  font-weight: 500;
}

.table-note a {
  color: var(--gold);
  border-bottom: 1px solid currentColor;
}

/* 화면에는 안 보이고 읽어주는 기기에만 전달 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 마무리 상담 */
.topic-cta {
  padding: clamp(80px, 9vw, 130px) 0;
  background: var(--dark);
  color: var(--paper);
  text-align: center;
}

.topic-cta-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 200;
  line-height: 1.44;
  letter-spacing: -0.04em;
  word-break: keep-all;
}

.topic-cta-lead {
  max-width: 32em;
  margin: 24px auto 0;
  color: rgba(252, 252, 251, 0.68);
  font-size: 15.5px;
  line-height: 2.05;
  word-break: keep-all;
}

.topic-cta-in .done-tel {
  max-width: 520px;
  margin-inline: auto;
}

.topic-cta-act {
  margin-top: 38px;
}


/* =====================================================================
   12. 모바일 하단 바
===================================================================== */

.bar {
  display: none;
}


/* =====================================================================
   12-b. 빠른 상담 (오른쪽 아래)

   전화 · 카톡 · 상담신청을 동그란 단추로 세워 둔다.
   PC 와 휴대폰이 같은 모양이다.

   가로로 긴 막대를 아래에 깔지 않은 이유
     · 본문을 계속 가린다. 휴대폰은 특히 세로가 아쉽다
     · 광고 배너처럼 보인다. 이 사이트의 톤과 맞지 않는다

   동그란 모양인 이유
     · 글자 없이 그림만으로 알아볼 수 있는 세 가지다.
       수화기 · 말풍선 · 서류. 특히 노란 말풍선은 설명이 필요 없다
     · 네모보다 작게 만들어도 눌리는 곳이 분명하다
     · 넓은 화면에서는 손을 올리면 왼쪽으로 이름표가 나온다

   첫 화면을 보고 계실 때는 나오지 않는다.
   머리말을 지나 내려가기 시작하면 그때 조용히 올라온다.

   ※ 아래 막대(.bar)는 화면에 나오지 않지만 HTML 에 남겨 두었다.
      이 단추들이 쓸 전화번호와 상담 신청 주소를 거기서 가져온다.
      페이지마다 번호가 다르기 때문이다(공증 페이지는 공증 상담 02).
      가로 막대로 되돌리고 싶으시면 그때 다시 살리면 된다.
===================================================================== */

.rail {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s var(--ease);
}

.rail.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}


.rail-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(20, 20, 22, 0.09);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease), color 0.3s var(--ease);
}

.rail-btn::before {
  content: "";
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat var(--ico);
  mask: center / contain no-repeat var(--ico);
}

/*
  전화 창구가 둘인 페이지(공증 · 등기 센터)의 단추.
  수화기 그림을 빼고 그 자리에 낱말을 박는다.
  같은 그림 둘이 나란히 서면 손가락으로 쓰는 기기에서 — 이름표가
  안 나오는 기기에서 — 어느 쪽이 무엇인지 알 길이 없기 때문이다.
*/
.rail-btn-named::before {
  display: none;
}

.rail-tag {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

/*
  이름표. 평소에는 숨어 있다가 손을 올리면 왼쪽으로 나온다.
  손가락으로 쓰는 기기에는 hover 가 없으므로 아예 두지 않는다.
*/
.rail-btn > span:not(.sr-only) {
  position: absolute;
  right: calc(100% + 9px);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.03em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease);
}

.rail-btn:hover > span:not(.sr-only) {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .rail-btn > span:not(.sr-only) { display: none; }
}

.rail-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 20, 22, 0.13);
}

/* 카카오톡만 색을 가진다 */
.rail-kakao {
  border-color: var(--kakao);
  background: var(--kakao);
  color: var(--kakao-ink);
}

.rail-kakao:hover {
  background: var(--kakao-up);
  border-color: var(--kakao-up);
}

.rail-form {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.rail-form:hover {
  background: var(--gold);
  border-color: var(--gold);
}

/* 맨 위로 — 글자 없이 낮게 */
.rail-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.rail-top:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.rail-top i {
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(2px) rotate(-45deg);
}


/* =====================================================================
   13. 반응형
===================================================================== */

/*
  변호인단만 다른 곳보다 일찍 한 칸으로 내려간다.
  두 칸일 때 카드 폭이 556px 아래로 떨어지면 사진과 글이 서로 밀어
  경력 한 줄이 두 줄로 접히고, 글 기둥만 사진보다 100px 넘게 길어진다.
  본문 최대 폭(--shell 1240px)이 그 경계라서 여기서 끊는다.

  한 칸으로 내리고 나서 사진을 비율(%)로 두면 카드가 넓어진 만큼
  사진만 길어지고, 글 기둥은 화면 끝까지 늘어나
  경력 위의 가로선만 휑하게 남는다.
  그래서 사진은 264px, 글은 520px 로 둘 다 묶는다.
*/
@media (max-width: 1240px) {
  .roster {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .member {
    grid-template-columns: minmax(0, 264px) minmax(0, 520px);
  }
}


@media (max-width: 1080px) {
  /* 분야 배너 — 세 칸이 좁아져 글자가 끊긴다 */
  .tile-grid,
  .tile-grid-small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root {
    --gutter: 30px;
  }

  .nav {
    gap: 24px;
  }

  .nav a {
    font-size: 14px;
  }

  .head-call {
    display: none;
  }
}


@media (max-width: 900px) {
  :root {
    --head-h: 68px;
  }

  .nav {
    display: none;
  }

  .burger {
    display: grid;
  }

  .greeting-in {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .greeting-figure {
    min-height: 0;
    margin-top: 48px;
  }

  .greeting-figure img {
    max-height: 420px;
  }

  .sec-head-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }

  .q-head {
    grid-template-columns: 52px minmax(0, 1fr) 26px;
    gap: 14px;
  }

  /* 좁아지면 분류 칩을 접는다 */
  .q-tag {
    display: none;
  }

  .q-inner p {
    margin-left: 66px;
  }

  /* 전담센터 — 가로 아코디언을 세로로 쌓는다 */
  .panels {
    flex-direction: column;
    height: auto;
    gap: 8px;
  }

  .panel {
    flex: none;
    height: 132px;
    transition: height 0.6s var(--ease);
  }

  .panel.is-open {
    height: 330px;
  }

  /* 세로로 쌓으면 닫힌 칸도 화면 너비를 다 쓴다. 여백을 되돌린다. */
  .panel:not(.is-open) .panel-body {
    right: 26px;
    left: 26px;
  }

  .panel:not(.is-open) .panel-en {
    font-size: 10.5px;
    letter-spacing: 0.3em;
  }

  /* 세부 분야 페이지 */
  .sit-list,
  .work-list,
  .type-grid,
  .tile-grid,
  .tile-grid-small {
    grid-template-columns: 1fr;
  }

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

  .principle-in,
  .contact-in {
    grid-template-columns: 1fr;
  }

  .principle-head {
    position: static;
  }

  .foot-in {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


@media (max-width: 620px) {
  :root {
    --gutter: 20px;
  }

  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    font-size: 15.5px;
  }

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

  .hero-title {
    font-size: 38px;
    line-height: 1.36;
  }

  .hero-lead {
    margin-top: 24px;
    font-size: 15.5px;
  }

  .hero-acts {
    margin-top: 32px;
  }

  .hero-acts .btn {
    flex: 1 1 auto;
    justify-content: center;
    height: 52px;
    padding: 0 20px;
  }

  .greeting-figure img {
    max-height: 320px;
  }

  /*
    좁은 화면에서는 직함 · 이름 · 서명 셋을 한 줄에 넣을 수 없다.
    그냥 두면 "대표변" / "호사", "정호" / "길" 처럼 글자 가운데가
    끊긴다. 직함을 윗줄로 올리고, 아랫줄에 이름과 서명을 나란히 둔다.
  */
  .greeting-sign {
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .greeting-sign span {
    flex: 1 0 100%;
  }

  .greeting-sign strong {
    font-size: 22px;
    white-space: nowrap;
  }

  .greeting-sign-mark {
    top: 9px;
    height: 60px;
  }

  /*
    질문 — 번호를 질문 위로 올린다.
    세 칸 모두 위치를 명시한다. 자동 배치에 맡기면
    q-q 가 22px 칸으로 밀려 들어가 가로로 넘친다.
  */
  .q-head {
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 8px 14px;
    padding: 22px 0;
  }

  .q-no {
    grid-area: 1 / 1 / 2 / 3;
    font-size: 13px;
  }

  .q-q {
    grid-area: 2 / 1 / 3 / 2;
  }

  .q-mark {
    grid-area: 2 / 2 / 3 / 3;
    align-self: center;
  }

  .q-inner p {
    margin-left: 0;
    font-size: 15px;
  }

  /*
    검은 막은 위에서 아래로 짙어진다. 넓은 화면에서는 패널이 높아
    글자가 아래쪽 짙은 자리에 놓이는데, 좁은 화면에서는 패널이 낮아
    글자가 아직 옅은 자리에 걸린다. 사진에 밝은 부분이 있으면
    금색 글자가 묻힌다. 그래서 좁은 화면에서는 더 일찍 짙어지게 한다.
  */
  .panel-veil {
    background: linear-gradient(
      180deg,
      rgba(20, 18, 15, 0.06) 6%,
      rgba(20, 18, 15, 0.72) 46%,
      rgba(20, 18, 15, 0.86) 100%
    );
  }

  .panel {
    height: 108px;
  }

  /*
    높이를 고정해 두는 것은 여닫을 때 애니메이션을 주기 위해서다.
    그래서 가장 내용이 많은 패널에 맞춰 둔다.
    320px 화면에서 민사가 355px 로 가장 크다. 문구를 늘리실 때는
    이 값도 함께 올리셔야 글자가 배너 밖으로 넘치지 않는다.
  */
  .panel.is-open {
    height: 372px;
  }

  .panel-body {
    right: 18px;
    bottom: 20px;
    left: 18px;
  }

  /* 세부 분야 페이지 */
  .topic-hero {
    padding-top: calc(var(--head-h) + 44px);
  }

  /*
    좁은 화면에서는 가로로 긴 머리 사진의 가운데 27% 만 보인다.
    사람이 오른쪽에 큼직하게 있는 사진은 그 부분만 확대되어
    무엇인지 알아볼 수 없게 된다. 그런 사진만 잡는 자리를 옮긴다.

    양육권 — 아이가 오른쪽에 있어 뒷머리만 크게 나왔다.
             왼쪽을 잡아 방과 부모가 함께 보이게 한다.
  */
  .topic-hero-bg[data-topic="custody"] {
    object-position: 40% 50%;
  }

  /*
    학교폭력 · 교권침해 — 의자 두 개와 가방이 오른쪽에 몰려 있다.
    좁은 화면에서는 가로폭의 28% 만 보이므로 둘을 다 담을 수 없다.
    학생 의자와 가방이 한 장면으로 들어오는 자리를 잡는다.
  */
  .topic-hero-bg[data-topic="school"] {
    object-position: 63% 50%;
  }

  /*
    임차권등기명령 — 열쇠를 든 사람과 이삿짐 상자가 오른쪽에 있다.
    좁은 화면은 가로폭의 절반쯤만 보이므로 그쪽으로 당긴다.
    왼쪽에는 빈 방이 남아 글자가 얹힐 자리가 된다.
  */
  .topic-hero-bg[data-topic="lease"] {
    object-position: 66% 50%;
  }

  .topic-acts .btn {
    flex: 1 1 auto;
    justify-content: center;
    height: 52px;
    padding: 0 18px;
  }

  .sit-list li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  /*
    두 가지를 나란히 놓고 견주는 표(주택 · 상가).

    보통 표는 좁은 화면에서 옆으로 밀어 보게 되어 있다. 그런데 이 표는
    오른쪽 칸이 본론이라, 미는 줄 모르는 분께는 절반이 없는 셈이 된다.
    그래서 이 표만 한 줄씩 세로로 풀어 두 칸을 다 보이게 한다.
    칸 이름은 td 의 data-head 에서 가져온다.
  */
  .ptable-compare {
    min-width: 0;
  }

  .ptable-compare thead {
    display: none;
  }

  .ptable-compare,
  .ptable-compare tbody,
  .ptable-compare tbody tr,
  .ptable-compare tbody th,
  .ptable-compare tbody td {
    display: block;
  }

  .ptable-compare tbody tr {
    padding: 18px;
    border-bottom: 1px solid var(--line);
  }

  .ptable-compare tbody tr:last-child {
    border-bottom: 0;
  }

  .ptable-compare tbody th {
    padding: 0 0 12px;
    border-bottom: 0;
    font-size: 18px;
  }

  /* 줄바꿈은 넓은 표에서 칸을 맞추려고 넣은 것이라 여기서는 지운다 */
  .ptable-compare tbody th br {
    display: none;
  }

  .ptable-compare tbody td {
    padding: 0;
    border-bottom: 0;
  }

  .ptable-compare tbody td + td {
    margin-top: 14px;
  }

  .ptable-compare tbody td::before {
    content: attr(data-head);
    display: block;
    margin-bottom: 4px;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 0.2em;
  }

  .flow-list {
    grid-template-columns: 1fr;
  }

  /* 변호인단 — 왼쪽 사진 · 오른쪽 정보 */
  .roster {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /*
    사진을 카드 가로 한 줄로 올리고, 이름·분야·경력을 그 아래로 쌓는다.

    전에는 사진 옆에 이름을 나란히 두었다. 그 자리에서는 사진을 키울수록
    이름 칸이 좁아져 "정호길 대표변호사" 가 두 줄로 접히고,
    이름 아래로는 쓰지 못하는 흰 자리가 길게 남았다.
    한 줄로 올리면 사진이 카드 폭을 다 쓰고 이름도 온전한 폭을 되찾는다.
  */
  .member {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "head"
      "career"
      "more"
      "btn";
    gap: 16px;
    align-items: start;
    padding: 14px;
    background: var(--paper-2);
  }

  /*
    폰을 가로로 눕힌 600px 언저리에서 사진만 700px 가까이 치솟는 것을 막는다.
    세워 쥔 화면에서는 걸리지 않는 빗장이다.
  */
  .member-figure {
    max-width: 400px;
  }

  /* member-body 가 display: contents 라 자식마다 칸을 지정한다 */
  .member-more {
    grid-area: more;
  }

  .member-toggle {
    grid-area: btn;
    justify-self: start;
    margin-top: 0;
  }

  .member-figure {
    grid-area: photo;
  }

  /*
    큰 화면과 같은 4 / 5 다. 굳이 여기 한 번 더 적어 두는 까닭은,
    전에 이 자리에만 다른 값(3 / 3.9)이 적혀 있어
    같은 분의 사진이 컴퓨터와 휴대전화에서 다르게 잘렸기 때문이다.
    위의 값을 바꾸시면 이 값도 같이 바꾸십시오.
  */
  .member-photo {
    aspect-ratio: 4 / 5;
  }

  /* 자식들이 직접 그리드 칸에 놓이도록 껍데기를 비운다 */
  .member-body {
    display: contents;
  }

  .member-head {
    grid-area: head;
  }

  .member-career {
    grid-area: career;
    margin-top: 0;
  }

  .member-name {
    font-size: 20px;
  }

  .member-career {
    margin-top: 12px;
    padding-top: 12px;
  }

  .principle-list li {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }

  /*
    항목 이름을 좁은 칸에 두면 "상담시간" 이 "상담시 / 간" 으로 갈라진다.
    좁은 화면에서는 이름을 위, 값을 아래로 쌓는다.
  */
  .info-list > div {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 16px 0;
  }

  .info-list dt {
    padding-top: 0;
  }

  .foot-cols {
    grid-template-columns: 1fr;
    gap: 30px;
  }

}


/* 휴대폰에서는 조금 더 작게, 화면 아래 안전영역도 피한다 */
@media (max-width: 620px) {
  .rail {
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 7px;
  }

  .rail-btn {
    width: 50px;
    height: 50px;
  }

  .rail-btn::before {
    width: 19px;
    height: 19px;
  }

  .rail-top {
    width: 50px;
    height: 34px;
  }
}


/* =====================================================================
   14. 모션 최소화
===================================================================== */

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

  .hero-beat {
    transform: none;
    transition: opacity 0.3s linear;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .rise {
    opacity: 1;
    transform: none;
  }

  /* 히어로는 그려지는 과정 없이 완성된 모습으로 둔다 */
  .hero-logo path {
    stroke-dashoffset: 0;
  }

  /* 사진도 떠오르지 않고 처음부터 제자리에 있다 */
  .hero-bg {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-word,
  .hero-title,
  .hero-lead,
  .hero-acts {
    opacity: 1;
    transform: none;
  }

  .hero-cue i {
    height: 100%;
  }

  /* 아코디언을 접지 않고 모두 펼쳐 둔다 */
  .panels {
    flex-direction: column;
    height: auto;
  }

  .panel,
  .panel.is-open {
    flex: none;
    height: 300px;
  }

  .panel-detail {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}