/*
 * 지혜행정사사무소 공개 사이트 스타일.
 *
 * 원본 포털 apps/site/src/styles/global.css 를 그대로 옮겼습니다. 원본은 Tailwind 의
 * preflight 에 기대어 여백·목록 스타일이 초기화된 상태를 전제했으므로, 아래 "리셋"
 * 블록이 그 전제 중 실제로 화면에 영향을 주는 부분만 재현합니다. (특히 ul/ol 의
 * list-style:none 과 h1~h6 의 font-size/weight:inherit 이 없으면 레이아웃이 달라집니다.)
 * Tailwind 유틸리티 클래스는 원본 마크업에서 쓰이지 않아 함께 옮기지 않았습니다.
 */

/* ─── 리셋 (Tailwind preflight 중 시각적으로 필요한 부분) ─────────────── */

*,
*::before,
*::after,
::backdrop {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

ol,
ul,
menu {
  list-style: none;
}

summary {
  display: list-item;
}

table {
  border-collapse: collapse;
  text-indent: 0;
}

img,
svg,
video,
canvas {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

textarea {
  resize: vertical;
}

::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentcolor 50%, transparent);
}

button,
input:where([type="button"], [type="reset"], [type="submit"]) {
  appearance: button;
}

/* ─── 기본 문서 ──────────────────────────────────────────────────── */

:root {
  color-scheme: light;
  background: var(--wisdom-ivory);
  font-family: var(--wisdom-font-sans);
  color: var(--wisdom-ink);
  scroll-behavior: smooth;
  overflow-x: clip;
}

html,
body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 90% 4%, color-mix(in srgb, var(--wisdom-sand) 27%, transparent), transparent 26rem),
    var(--wisdom-ivory);
  font-family: var(--wisdom-font-sans);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
}

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

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
  letter-spacing: inherit;
}

button,
summary,
select {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: 3px solid var(--wisdom-brown);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.narrow-shell {
  width: min(940px, calc(100% - 48px));
}

.section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.skip-link {
  position: fixed;
  inset: 1rem auto auto 1rem;
  z-index: 100;
  transform: translateY(-160%);
  padding: 0.75rem 1rem;
  background: var(--wisdom-ink);
  color: var(--wisdom-white);
  font-weight: 800;
}

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

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

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid color-mix(in srgb, var(--wisdom-sand) 82%, transparent);
  background: color-mix(in srgb, var(--wisdom-ivory) 93%, transparent);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: grid;
  /* 양쪽 칼럼은 내용 크기(auto)로, 가운데 메뉴가 남는 폭을 씁니다.
     fr 비율로 나누면 브랜드 칼럼이 필요한 288px 를 못 받아 영문 로고가
     두 줄로 깨집니다. 메뉴는 minmax(0, 1fr) 이라 남는 만큼만 차지합니다. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: min(1480px, calc(100% - 32px));
  min-height: 118px;
  gap: 1.35rem;
}

.brand,
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand {
  gap: 1rem;
}

.brand-mark,
.footer-brand > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--wisdom-bronze);
  border-radius: 50%;
  color: var(--wisdom-brown);
  font-family: var(--wisdom-font-serif);
  font-size: 1.25rem;
}

.brand-mark {
  width: 59px;
  height: 59px;
}

/*
 * 실제 로고 이미지를 쓸 때:
 *  - 로고에 이미 원이 그려져 있어 CSS 테두리를 빼서 이중 원을 막습니다.
 *  - 브로슈어에서 잘라낸 PNG 라 배경이 흰 사각형입니다. overflow:hidden 이 없으면
 *    그 사각형이 부모의 border-radius 를 덮어, 특히 어두운 푸터에서 흰 네모로 보입니다.
 *    부모(.brand-mark)의 border-radius:50% 로 잘라내 원형으로 맞춥니다.
 *  - padding 으로 살짝 여백을 둬 로고의 원 선이 잘리지 않게 합니다.
 */
.brand-mark.has-logo,
.footer-brand > span.has-logo {
  border: 0;
  overflow: hidden;
  padding: 2px;
  background: var(--wisdom-white);
}

.brand-mark img,
.footer-brand > span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name,
.brand-en {
  display: block;
}

.brand-name {
  font-size: 1.34rem;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.brand-en {
  margin-top: 0.1rem;
  color: var(--wisdom-brown);
  font-family: var(--wisdom-font-serif);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1vw, 1.15rem);
  font-size: 1.28rem;
  white-space: nowrap;
}

.desktop-navigation a,
.language-links a {
  position: relative;
  padding-block: 0.5rem;
}

.language-links a {
  padding-inline: 0.3rem;
}

.desktop-navigation a::after,
.language-links a::after {
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--wisdom-brown);
  content: "";
  transition: right 180ms ease;
}

.desktop-navigation a:hover::after,
.desktop-navigation a:focus-visible::after,
/* [aria-current] 는 값을 가리지 않습니다 — 업무 분야 상세에 있을 때 상위
   항목은 aria-current="true"(현재 구역)이므로 "page" 만 보면 밑줄이 꺼집니다. */
.desktop-navigation a[aria-current]::after,
.language-links a:hover::after,
.language-links a:focus-visible::after,
.language-links a[aria-current="page"]::after {
  right: 0;
}

.header-actions,
.language-links {
  display: flex;
  align-items: center;
}

.header-actions {
  justify-content: flex-end;
  gap: 1rem;
}

.language-links {
  max-width: 19rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.1rem 0.4rem;
  color: var(--wisdom-brown);
  font-size: 1.12rem;
  font-weight: 750;
  line-height: 1.2;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  border-color: var(--wisdom-brown);
  background: var(--wisdom-brown);
  color: var(--wisdom-white);
}

.button-primary:hover {
  background: var(--wisdom-ink);
}

.button-secondary {
  border-color: var(--wisdom-sand);
  background: color-mix(in srgb, var(--wisdom-white) 55%, transparent);
  color: var(--wisdom-brown);
}

.button-secondary:hover {
  border-color: var(--wisdom-brown);
  background: var(--wisdom-white);
}

.button-small {
  min-height: 40px;
  padding: 0.55rem 0.9rem;
  /* 11.2px → 13.1px. 전환 버튼이 헤더에서 가장 작았습니다. */
  font-size: 0.82rem;
}

.header-consultation {
  min-height: 56px;
  gap: 0.55rem;
  padding: 0.9rem 1.4rem;
  font-size: 1.12rem;
  box-shadow: 0 10px 24px rgba(91, 63, 39, 0.18);
}

.action-icon {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu summary {
  display: grid;
  width: 44px;
  height: 44px;
  list-style: none;
  place-content: center;
  gap: 5px;
  border: 1px solid var(--wisdom-sand);
  background: var(--wisdom-ivory);
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu summary span {
  width: 18px;
  height: 1px;
  background: var(--wisdom-ink);
}

.mobile-menu > nav {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  display: grid;
  width: min(19rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--wisdom-sand);
  background: var(--wisdom-ivory);
  box-shadow: 0 20px 60px rgba(47, 42, 37, 0.14);
}

.mobile-menu > nav > a,
/* 업무 분야는 .nav-group 으로 한 겹 감싸이므로 직계 선택자에 걸리지 않습니다. */
.mobile-menu > nav > .nav-group > a {
  padding: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wisdom-sand) 55%, transparent);
}

/* 링크가 6개 늘었으므로 패널이 화면보다 길어질 수 있습니다.
   작은 화면(예: 320×568)에서 아래쪽 항목에 닿지 못하는 것을 막습니다. */
.mobile-menu > nav {
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.9rem 0.65rem 0.2rem;
  color: var(--wisdom-brown);
  /* 13px → 14px */
  font-size: 0.875rem;
}

/* ─── 홈 히어로 ─────────────────────────────────────────────────── */

.hero-section {
  position: relative;
  min-height: min(790px, calc(100vh - 94px));
  border-bottom: 1px solid var(--wisdom-sand);
  background:
    linear-gradient(120deg, transparent 52%, color-mix(in srgb, var(--wisdom-sand) 30%, transparent) 52%),
    var(--wisdom-ivory);
}

.hero-section::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--wisdom-sand) 24%, transparent) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.hero-grid {
  position: relative;
  display: grid;
  min-height: inherit;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding-block: 4.5rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  color: var(--wisdom-brown);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 2.6rem;
  height: 1px;
  background: var(--wisdom-bronze);
  content: "";
}

.hero-copy h1,
.page-hero h1 {
  margin: 1.4rem 0 1.6rem;
  font-family: var(--wisdom-font-serif);
  font-size: clamp(2.7rem, 5.8vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 1.12;
}

.hero-intro,
.page-hero p:not(.eyebrow) {
  max-width: 42rem;
  color: color-mix(in srgb, var(--wisdom-ink) 76%, transparent);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
}

.hero-actions,
.secondary-actions,
.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.hero-actions {
  margin-top: 2.2rem;
}

.hero-actions .button,
.map-actions .button {
  min-height: 56px;
  gap: 0.55rem;
  font-size: 1.08rem;
}

.secondary-actions {
  margin-top: 1.25rem;
  gap: 0.75rem;
  color: var(--wisdom-brown);
  font-size: 1.05rem;
}

.secondary-actions a {
  border-bottom: 1px solid var(--wisdom-bronze);
}

.secondary-actions .contact-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--wisdom-bronze);
  background: color-mix(in srgb, var(--wisdom-white) 72%, transparent);
  font-weight: 800;
}

.portrait-stage {
  position: relative;
  min-height: 510px;
  padding: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--wisdom-bronze) 65%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--wisdom-white) 88%, transparent), color-mix(in srgb, var(--wisdom-sand) 65%, transparent));
  box-shadow: 0 28px 90px rgba(93, 73, 54, 0.13);
}

.portrait-stage::before,
.portrait-stage::after {
  position: absolute;
  border: 1px solid var(--wisdom-bronze);
  content: "";
}

.portrait-stage::before {
  inset: 1rem;
}

.portrait-stage::after {
  top: -1px;
  right: 3.2rem;
  width: 1px;
  height: 3.5rem;
  border: 0;
  background: var(--wisdom-bronze);
}

/* 대표 사진. 투명 배경의 고해상도 인물 사진을 브랜드 프레임에 배치합니다. */
.portrait-picture {
  display: block;
}

.portrait-photo {
  display: block;
  width: 100%;
  min-height: 370px;
  max-height: 27rem;
  object-fit: cover;
  object-position: 50% 18%;
  background: linear-gradient(150deg, var(--wisdom-brown), var(--wisdom-ink));
}

.brand-illustration {
  position: relative;
  display: grid;
  min-height: 370px;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--wisdom-sand) 45%, transparent) 50%, transparent 50.2%),
    radial-gradient(circle, transparent 0 35%, color-mix(in srgb, var(--wisdom-bronze) 42%, transparent) 35.2% 35.6%, transparent 36%),
    linear-gradient(150deg, var(--wisdom-brown), var(--wisdom-ink));
}

.brand-illustration::before,
.brand-illustration::after {
  position: absolute;
  content: "";
}

.brand-illustration::before {
  inset: 9% 12%;
  border: 1px solid color-mix(in srgb, var(--wisdom-sand) 42%, transparent);
  border-radius: 48% 52% 42% 58%;
  transform: rotate(-12deg);
}

.brand-illustration::after {
  top: 18%;
  left: 17%;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wisdom-bronze) 26%, transparent);
}

.brand-orbit {
  position: absolute;
  width: min(17rem, 72%);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--wisdom-sand) 65%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 2.7rem color-mix(in srgb, var(--wisdom-bronze) 10%, transparent);
}

.brand-monogram {
  z-index: 1;
  color: var(--wisdom-ivory);
  font-family: var(--wisdom-font-serif);
  font-size: clamp(5rem, 10vw, 8rem);
  line-height: 1;
}

.brand-rule {
  position: absolute;
  right: 15%;
  bottom: 17%;
  left: 15%;
  height: 1px;
  background: var(--wisdom-bronze);
}

.portrait-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0.8rem 0;
}

.portrait-caption strong {
  font-family: var(--wisdom-font-serif);
  font-size: 1.15rem;
}

.portrait-caption span {
  color: var(--wisdom-brown);
  font-size: 0.66rem;
  text-align: right;
}

/* ─── 섹션 공통 ─────────────────────────────────────────────────── */

.section-heading {
  display: grid;
  grid-template-columns: minmax(190px, 0.6fr) minmax(0, 1.4fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.section-heading h2,
.navigator-section h2,
.credentials-card h2,
.consultation-grid h2 {
  margin: 0;
  font-family: var(--wisdom-font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.25;
}

.centered {
  display: block;
  text-align: center;
}

.centered .eyebrow {
  justify-content: center;
}

.centered h2 {
  margin-top: 1rem;
}

.three-column-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--wisdom-sand);
  border: 1px solid var(--wisdom-sand);
}

.feature-card,
.principle-grid article,
.insight-grid article {
  min-width: 0;
  padding: clamp(1.6rem, 3vw, 2.7rem);
  background: var(--wisdom-ivory);
}

.feature-card.featured {
  background: var(--wisdom-brown);
  color: var(--wisdom-white);
}

.feature-card .card-index,
.insight-grid article > span {
  color: var(--wisdom-brown);
  font-family: var(--wisdom-font-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.feature-card.featured .card-index {
  color: var(--wisdom-ivory);
}

.principle-grid article > span {
  color: var(--wisdom-sand);
  font-family: var(--wisdom-font-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.feature-card h3,
.principle-grid h3,
.insight-grid h3 {
  margin: 2rem 0 0.8rem;
  font-family: var(--wisdom-font-serif);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 600;
}

.feature-card p,
.principle-grid p,
.insight-grid p {
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 0.88rem;
}

.feature-card a {
  display: inline-block;
  margin-top: 1.5rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 800;
}

.navigator-section,
.credentials-section {
  background: color-mix(in srgb, var(--wisdom-sand) 36%, var(--wisdom-ivory));
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 7rem);
}

.split-grid > div > p:last-child {
  color: color-mix(in srgb, var(--wisdom-ink) 70%, transparent);
}

.service-navigator {
  display: grid;
  border-top: 1px solid var(--wisdom-bronze);
}

.service-navigator a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0.4rem;
  border-bottom: 1px solid var(--wisdom-sand);
}

.service-navigator a:hover {
  padding-inline: 0.9rem;
  background: color-mix(in srgb, var(--wisdom-white) 52%, transparent);
}

.service-navigator span {
  color: var(--wisdom-brown);
  font-family: var(--wisdom-font-serif);
  font-size: 0.72rem;
}

.principles-section {
  background: var(--wisdom-brown);
  color: var(--wisdom-white);
}

.principles-section .eyebrow,
.principle-grid article > span {
  color: var(--wisdom-sand);
}

.principles-section .eyebrow::before {
  background: var(--wisdom-sand);
}

.principle-grid {
  border-color: color-mix(in srgb, var(--wisdom-sand) 32%, transparent);
  background: color-mix(in srgb, var(--wisdom-sand) 32%, transparent);
}

.principle-grid article {
  background: var(--wisdom-brown);
}

.credentials-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 7vw, 6rem);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--wisdom-bronze);
  background: color-mix(in srgb, var(--wisdom-white) 62%, transparent);
}

.credentials-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.credentials-lists ul {
  margin: 0;
  padding-left: 1.2rem;
}

.credentials-lists li + li {
  margin-top: 0.7rem;
}

.consultation-section {
  border-top: 1px solid var(--wisdom-sand);
}

.consultation-grid {
  align-items: center;
}

.consultation-grid .button {
  margin-top: 1.5rem;
}

.office-card {
  display: grid;
  gap: 0.65rem;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--wisdom-ink);
  color: var(--wisdom-white);
  font-style: normal;
}

.office-card strong {
  margin-bottom: 0.7rem;
  font-family: var(--wisdom-font-serif);
  font-size: 1.7rem;
}

.office-card a {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.office-card :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--wisdom-ivory);
}

/* ─── 하위 페이지 ───────────────────────────────────────────────── */

.page-hero {
  padding-block: clamp(5rem, 10vw, 8rem);
  border-bottom: 1px solid var(--wisdom-sand);
  background: linear-gradient(130deg, var(--wisdom-ivory) 0 60%, color-mix(in srgb, var(--wisdom-sand) 48%, transparent) 60%);
}

.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.9rem);
}

.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--wisdom-brown);
  font-size: 0.78rem;
  font-weight: 800;
}

.profile-grid,
.service-grid,
.location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.content-card,
.service-card,
.location-card,
.map-geometry,
.not-found-card,
.insight-notice,
.content-cta {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--wisdom-sand);
  background: color-mix(in srgb, var(--wisdom-white) 68%, transparent);
}

.content-card h2,
.service-card h2,
.location-card h2,
.policy-document h2,
.process-list h2,
.insight-notice h2 {
  margin-top: 0;
  font-family: var(--wisdom-font-serif);
  font-size: 1.55rem;
}

.content-card ul,
.service-card ul {
  margin: 1.2rem 0 0;
  padding-left: 1.2rem;
}

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

.operational-note {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--wisdom-bronze);
  background: color-mix(in srgb, var(--wisdom-sand) 30%, transparent);
}

.service-card > span {
  color: var(--wisdom-brown);
  font-family: var(--wisdom-font-serif);
}

.service-card a {
  display: inline-block;
  margin-top: 1.2rem;
  color: var(--wisdom-brown);
  font-weight: 850;
}

.category-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 2rem;
}

.service-evidence-stack,
.service-answer-sections {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.service-answer-sections > section {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--wisdom-sand);
  background: color-mix(in srgb, var(--wisdom-white) 74%, transparent);
}

.service-answer-sections h2 {
  margin: 0 0 0.75rem;
  font-family: var(--wisdom-font-serif);
}

.service-answer-sections p,
.service-answer-sections ul {
  margin-block: 0.65rem 0;
}

.service-answer-sections ul {
  padding-left: 1.2rem;
}

.service-answer-sections li + li {
  margin-top: 0.4rem;
}

.service-list,
.process-list,
.withdrawal-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-cta {
  align-self: start;
  position: sticky;
  top: 2rem;
}

.content-cta .button {
  margin-top: 1.25rem;
}

.process-list {
  counter-reset: process;
  border-top: 1px solid var(--wisdom-bronze);
}

.process-list li {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) 1fr;
  gap: 2rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--wisdom-sand);
}

.insight-notice,
.not-found-card {
  text-align: center;
}

.insight-notice > span,
.not-found-card > span {
  display: block;
  color: var(--wisdom-bronze);
  font-family: var(--wisdom-font-serif);
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
}

/* ─── 상담 폼 ───────────────────────────────────────────────────── */

.consultation-form {
  position: relative;
  padding: clamp(1.4rem, 4vw, 3rem);
  border: 1px solid var(--wisdom-sand);
  background: color-mix(in srgb, var(--wisdom-white) 70%, transparent);
}

.honeypot-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

.field {
  min-width: 0;
}

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

.field > label,
.field > legend {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--wisdom-ink);
  font-size: 0.82rem;
  font-weight: 850;
}

.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--wisdom-sand);
  border-radius: 0;
  background: var(--wisdom-white);
  color: var(--wisdom-ink);
}

.field input:not([type="radio"]):not([type="checkbox"]),
.field select {
  min-height: 48px;
  padding: 0.65rem 0.8rem;
}

.field textarea {
  min-height: 13rem;
  padding: 0.8rem;
  resize: vertical;
}

.field small {
  display: block;
  margin-top: 0.35rem;
  color: color-mix(in srgb, var(--wisdom-ink) 78%, transparent);
  font-size: 0.8125rem;
}

/* 서버·클라이언트 검증이 붙여 주는 필드별 오류 메시지 */
.field-error {
  display: block;
  margin-top: 0.35rem;
  color: var(--wisdom-brown);
  font-size: 0.8125rem;
  font-weight: 750;
}

.field [aria-invalid="true"] {
  border-color: var(--wisdom-brown);
  border-width: 2px;
}

.contact-method,
.consent-group {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--wisdom-sand);
}

.choice-control {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-right: 1.2rem;
}

.choice-control input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.25rem;
  accent-color: var(--wisdom-brown);
}

.consent-control {
  display: flex;
  margin: 0;
  padding-block: 0.55rem;
}

.consent-control strong,
.consent-control small {
  display: block;
}

.consent-document {
  margin: 0.15rem 0 0.9rem 1.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--wisdom-sand) 72%, transparent);
  background: color-mix(in srgb, var(--wisdom-ivory) 70%, var(--wisdom-white));
}

.consent-document summary {
  cursor: pointer;
  color: var(--wisdom-brown);
  font-weight: 750;
}

.consent-document-meta {
  display: grid;
  gap: 0.35rem;
  margin: 0.8rem 0;
  font-size: 0.72rem;
}

.consent-document-meta > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.35fr) 1fr;
  gap: 0.65rem;
}

.consent-document-meta dt {
  color: color-mix(in srgb, var(--wisdom-ink) 68%, transparent);
}

.consent-document-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.consent-document-body {
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  font-size: 0.76rem;
}

.warning {
  margin: 0.55rem 0 0;
  padding: 0.6rem 0.8rem;
  background: color-mix(in srgb, var(--wisdom-sand) 28%, transparent);
  color: var(--wisdom-brown);
  font-size: 0.875rem;
}

.form-submit {
  width: 100%;
  margin-top: 1.5rem;
}

.form-status {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--wisdom-sand);
  background: color-mix(in srgb, var(--wisdom-sand) 22%, var(--wisdom-white));
  color: var(--wisdom-ink);
  font-size: 0.82rem;
}

.form-status[data-state="error"] {
  border-color: var(--wisdom-brown);
  color: var(--wisdom-brown);
}

.form-status[data-state="success"] {
  border-color: var(--wisdom-bronze);
  font-weight: 750;
}

/* 접수 완료 화면 (JavaScript 없이 제출한 경우) */
.receipt-card {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--wisdom-bronze);
  background: color-mix(in srgb, var(--wisdom-white) 72%, transparent);
}

.receipt-card h2 {
  margin: 0 0 1rem;
  font-family: var(--wisdom-font-serif);
  font-size: 1.55rem;
}

.receipt-number {
  display: block;
  margin: 1rem 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--wisdom-bronze);
  background: color-mix(in srgb, var(--wisdom-sand) 26%, transparent);
  font-family: var(--wisdom-font-serif);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.receipt-card .button {
  margin-top: 1.5rem;
}

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

.location-card {
  font-style: normal;
}

.location-card dl,
.location-card dd {
  margin: 0;
}

.location-card dl > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--wisdom-sand);
}

.location-card dt {
  color: var(--wisdom-brown);
  font-size: 0.72rem;
  font-weight: 850;
}

.map-geometry {
  display: grid;
  min-height: 27rem;
  place-content: center;
  text-align: center;
  background:
    linear-gradient(color-mix(in srgb, var(--wisdom-sand) 38%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--wisdom-sand) 38%, transparent) 1px, transparent 1px),
    var(--wisdom-ivory);
  background-size: 2.5rem 2.5rem;
}

.map-pin {
  display: grid;
  width: 5rem;
  height: 5rem;
  margin-inline: auto;
  place-items: center;
  border-radius: 50% 50% 50% 0;
  background: var(--wisdom-brown);
  color: var(--wisdom-white);
  font-family: var(--wisdom-font-serif);
  font-size: 1.8rem;
  transform: rotate(-45deg);
}

.map-pin::first-letter {
  transform: rotate(45deg);
}

.map-geometry p {
  margin-block: 1.25rem;
}

/* ─── 정책 문서 ─────────────────────────────────────────────────── */

.policy-document {
  display: grid;
  gap: 1.2rem;
}

.policy-document > h2 {
  margin: 0;
  font-family: var(--wisdom-font-serif);
}

.policy-document-meta {
  padding: 1.25rem;
  border: 1px solid var(--wisdom-sand);
  background: color-mix(in srgb, var(--wisdom-white) 72%, transparent);
}

.policy-document-body {
  max-width: 100%;
  margin: 0;
  padding: clamp(1.2rem, 3vw, 2rem);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border-left: 3px solid var(--wisdom-bronze);
  background: color-mix(in srgb, var(--wisdom-sand) 24%, var(--wisdom-ivory));
  color: var(--wisdom-ink);
  font: inherit;
  line-height: 1.85;
}

.draft-notice {
  padding: 1rem 1.2rem;
  border: 1px dashed var(--wisdom-brown);
  background: color-mix(in srgb, var(--wisdom-sand) 22%, transparent);
  color: var(--wisdom-brown);
  font-size: 0.85rem;
  font-weight: 750;
}

.withdrawal-steps {
  counter-reset: withdrawal;
}

.withdrawal-steps li {
  counter-increment: withdrawal;
  padding: 1rem 0 1rem 3rem;
  border-bottom: 1px solid var(--wisdom-sand);
}

.withdrawal-steps li::before {
  margin-left: -3rem;
  padding-right: 1.4rem;
  color: var(--wisdom-bronze);
  content: counter(withdrawal, decimal-leading-zero);
  font-family: var(--wisdom-font-serif);
}

.not-found-card .button {
  margin-top: 2rem;
}

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

.site-footer {
  padding: 4rem 0 1.5rem;
  background: var(--wisdom-ink);
  color: var(--wisdom-white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 3rem;
}

.footer-brand {
  font-family: var(--wisdom-font-serif);
  font-size: 1.2rem;
}

.footer-brand > span {
  color: var(--wisdom-ivory);
}

.footer-address {
  max-width: 30rem;
  color: color-mix(in srgb, var(--wisdom-white) 65%, transparent);
  /* 12.8px → 14.4px */
  font-size: 0.9rem;
}

.site-footer h2 {
  margin: 0 0 1rem;
  /* 12.8px → 14.7px. 푸터 섹션 제목입니다. */
  font-size: 0.92rem;
  text-transform: uppercase;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--wisdom-white) 78%, transparent);
  /* 12.5px → 14.4px. 전화·이메일이 여기 있어 실제로 읽고 눌러야 합니다. */
  font-size: 0.9rem;
}

.footer-links li + li {
  margin-top: 0.55rem;
}

.footer-links a:hover {
  color: var(--wisdom-white);
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--wisdom-white) 18%, transparent);
  color: color-mix(in srgb, var(--wisdom-white) 55%, transparent);
  /* 저작권과 갱신일. 좁은 화면에서는 줄바꿈으로 쌓입니다 (wrap). */
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
}

/* 갱신일은 기계도 읽고(datetime) 사람도 읽습니다. 숫자가 흔들리지 않게
   고정폭 숫자를 씁니다 — 3엔진 공통 기능입니다. */
.footer-bottom time {
  font-variant-numeric: tabular-nums;
}

/* <small> 기본값은 부모의 0.8em(=12.8px)이라 저작권·갱신일이 작았습니다. */
.footer-bottom small {
  font-size: 0.85rem;
}

/* ─── 스크롤 등장 모션 ──────────────────────────────────────────── */

[data-reveal] {
  opacity: 1;
  filter: none;
  translate: none;
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled [data-reveal][data-revealed="false"] {
    opacity: 0.08;
    filter: blur(2px);
    transition:
      opacity var(--duration-dynamic) var(--reveal-easing) var(--reveal-delay),
      filter var(--duration-dynamic) var(--reveal-easing) var(--reveal-delay),
      translate var(--duration-dynamic) var(--reveal-easing) var(--reveal-delay);
  }

  .motion-enabled [data-reveal][data-revealed="false"][data-reveal-direction="left"] {
    translate: calc(var(--distance-dynamic) * -1) 0;
  }

  .motion-enabled [data-reveal][data-revealed="false"][data-reveal-direction="right"] {
    translate: var(--distance-dynamic) 0;
  }

  .motion-enabled [data-reveal][data-revealed="false"][data-reveal-direction="fade"] {
    translate: none;
  }

  .motion-enabled [data-reveal][data-revealed="true"] {
    opacity: 1;
    filter: none;
    translate: none;
  }

  .motion-enabled.motion-preparing [data-reveal] {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    filter: none !important;
    translate: none !important;
  }

  .button:hover {
    transform: none;
  }
}

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

/* 커진 데스크톱 메뉴와 언어 링크가 겹치기 전에 햄버거 메뉴로 전환합니다.
 *
 * 1.28rem 메뉴와 커진 로고·상담 버튼을 한 줄에 유지할 수 없는 구간은
 * 햄버거 메뉴가 담당합니다.
 */
@media (max-width: 1399px) {
  .header-inner {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .desktop-navigation {
    display: none;
  }

  .mobile-menu {
    display: block;
  }
}

@media (max-width: 860px) {
  /* 같은 언어 전환 항목이 모바일 메뉴에도 있으므로, 태블릿 폭에서는 헤더의
     중복 링크를 숨겨 브랜드·상담 CTA·메뉴 버튼이 한 줄을 유지하게 합니다. */
  .language-links {
    display: none;
  }

  .hero-grid,
  .split-grid,
  .credentials-card,
  .category-detail {
    grid-template-columns: 1fr;
  }

  .hero-section,
  .hero-grid {
    min-height: auto;
  }

  .hero-grid {
    padding-block: 4rem;
  }

  .portrait-stage {
    min-height: 430px;
  }

  .brand-illustration {
    min-height: 310px;
  }

  /* 단일 단 배치에서는 원본 비율을 유지한 인물 카드로 폭을 제한합니다. */
  .portrait-photo {
    width: min(100%, 240px);
    min-height: 0;
    max-height: none;
    height: auto;
    aspect-ratio: 1286 / 1400;
    margin-inline: auto;
  }

  /*
   * 사진을 줄이면 전체 폭 프레임 안에 좌우 빈 공간이 남고 캡션 정렬도 어긋납니다.
   * 프레임이 사진을 감싸도록 폭을 맞추고 가운데 둡니다(240 + 좌우 여백 24 = 288).
   * :has() 로 사진이 있을 때만 적용해, 사진 파일이 없을 때 쓰는 기하학 일러스트의
   * 큰 프레임은 원본 그대로 유지합니다. (:has() 는 3개 엔진 공통 기능입니다)
   */
  .portrait-stage:has(.portrait-photo) {
    width: min(100%, 288px);
    margin-inline: auto;
    padding: 1.5rem;
    min-height: 0;
  }

  .three-column-grid,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    display: block;
  }

  .section-heading h2 {
    margin-top: 1rem;
  }

  .credentials-lists {
    grid-template-columns: 1fr;
  }

  .content-cta {
    position: static;
  }

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

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .shell,
  .narrow-shell {
    width: min(100% - 32px, 1180px);
  }

  .header-inner {
    min-height: 78px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }

  .header-consultation {
    display: none;
  }

  .language-links {
    max-width: 9.5rem;
    gap: 0.1rem 0.25rem;
    font-size: 0.7rem;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
  }

  .hero-copy h1,
  .page-hero h1 {
    letter-spacing: -0.06em;
  }

  .portrait-stage {
    min-height: 350px;
    padding: 1.5rem;
  }

  .brand-illustration {
    min-height: 255px;
  }

  .profile-grid,
  .location-grid,
  .form-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .full-field,
  .footer-grid > div:first-child {
    grid-column: auto;
  }

  .process-list li {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .choice-control:not(.consent-control) {
    display: flex;
    margin: 0.4rem 0;
  }

  .site-footer {
    padding-top: 3rem;
  }
}

@media (max-width: 420px) {
  /* 400px 미만에서 상단 언어 링크가 브랜드 영역을 밀어 사무소명과 겹치므로 숨깁니다.
     언어 전환은 햄버거 메뉴의 .mobile-languages 로 계속 제공됩니다. */
  .language-links {
    display: none;
  }

  .brand-en {
    display: none;
  }

  .brand-name {
    font-size: 0.95rem;
  }

  .hero-actions .button,
  .map-actions .button {
    width: 100%;
  }

  .portrait-caption {
    display: grid;
  }

  .portrait-caption span {
    text-align: left;
  }
}

/* 빈 상태 영역은 자리를 차지하지 않습니다.
   hidden 을 토글하지 않는 이유는 app.js setStatus 주석 참고 —
   aria-live 영역은 로드 시점에 등록돼 있어야 알림이 나갑니다. */
.form-status:empty {
  display: none;
}

/* 입력 테두리 명암비 (WCAG 1.4.11 비텍스트 대비 3:1).
   sand 는 흰 배경 대비 1.60:1 로 미달이었고, 폼 표면과도 1.60:1 이라
   입력란이 있다는 유일한 단서가 사실상 보이지 않았습니다.
   bronze 는 3.15:1 로 통과합니다. */
.field input,
.field textarea,
.field select {
  border-color: var(--wisdom-bronze);
}

/* 철회 절차 번호는 본문 텍스트라 4.5:1 이 필요합니다.
   bronze 3.10:1 → brown 8.37:1 */
.withdrawal-steps li::before {
  color: var(--wisdom-brown);
}

/* 업무 분야 상세의 섹션 제목이 본문과 크기·굵기가 같아
   시각적 위계가 사라져 있었습니다(둘 다 16px/400). */
.service-answer-sections h2 {
  font-size: 1.55rem;
}

/* 중문·일문은 word-break: keep-all 아래에서 줄바꿈 지점이 없어
   주소처럼 공백 없는 긴 문자열이 화면 밖으로 잘려 나갔습니다.
   overflow-wrap 규칙이 h1~h3·p 에만 걸려 있어 dd·dt·li 가 빠져 있었습니다. */
dd,
dt,
li {
  overflow-wrap: anywhere;
}

/* ─── 업무 분야 하위 메뉴 ─────────────────────────────────────────
 *
 * 자바스크립트를 쓰지 않습니다. 부모 링크에 포커스가 오면
 * `.nav-group:focus-within` 이 맞아 목록이 나타나고, 그때부터 Tab 으로 안으로
 * 들어갈 수 있습니다. display:none 상태에서는 탭 순서에 없으므로, 하위 항목이
 * 항상 6칸씩 탭을 잡아먹는 문제도 없습니다.
 *
 * 열림/닫힘에 전환 효과를 넣지 않습니다. 메뉴는 즉시 반응하는 편이 낫고,
 * display 는 애초에 전환되지 않아 가짜 애니메이션이 되기 때문입니다.
 */

.nav-group {
  position: relative;
}

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

/* ── 데스크톱: 드롭다운 ── */

.desktop-navigation .nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  display: none;
  width: max-content;
  min-width: 11rem;
  max-width: min(18rem, calc(100vw - 2rem));
  /* 부모 링크와 목록 사이에 빈 틈이 생기면 마우스가 지나갈 때 닫힙니다.
     위쪽 패딩으로 이어 붙입니다. */
  padding: 0.5rem 0;
  border: 1px solid var(--wisdom-sand);
  background: var(--wisdom-ivory);
  box-shadow: 0 18px 48px rgba(47, 42, 37, 0.14);
  translate: -50% 0;
}

.desktop-navigation .nav-group:hover > .nav-submenu,
.desktop-navigation .nav-group:focus-within > .nav-submenu {
  display: block;
}

.desktop-navigation .nav-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* 드롭다운 안에서는 밑줄 애니메이션 대신 배경으로 표시합니다 —
   항목이 세로로 쌓여 있어 밑줄이 경계선처럼 읽힙니다. */
.desktop-navigation .nav-submenu a::after {
  display: none;
}

.desktop-navigation .nav-submenu a:hover,
.desktop-navigation .nav-submenu a:focus-visible,
.desktop-navigation .nav-submenu a[aria-current="page"] {
  background: color-mix(in srgb, var(--wisdom-sand) 40%, transparent);
}

/* ── 모바일: 들여쓴 목록 (항상 보임) ── */

.mobile-menu .nav-submenu {
  padding-left: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wisdom-sand) 55%, transparent);
}

.mobile-menu .nav-submenu a {
  display: block;
  padding: 0.5rem 0.65rem;
  color: var(--wisdom-brown);
  /* 13px → 14px */
  font-size: 0.875rem;
}

.mobile-menu .nav-submenu a::before {
  margin-right: 0.45rem;
  color: var(--wisdom-bronze);
  content: "\2014";
}

.mobile-menu .nav-submenu a[aria-current="page"] {
  color: var(--wisdom-ink);
  font-weight: 600;
}