/* ─── 서체: Paperlogy (자체 서빙) ─────────────────────────────────
 * 운영자 결정(2026-08-24)으로 전 서체를 Paperlogy 로 통일.
 * CSP 가 font-src 'self' 라 CDN 대신 /fonts/ 에서 서빙합니다 — 같은 파일이며
 * 방문자 IP 가 외부 CDN 으로 나가지 않고, CDN 장애와도 무관해집니다.
 * 원본 TTF 는 ../Paperlogy-1.001/ 보관, 웹용은 woff2(각 ~155KB)만 씁니다.
 * 사용 웨이트만 선언합니다 — 새 웨이트가 필요하면 파일과 선언을 함께 추가.
 */
@font-face {
  font-family: "Paperozi";
  src: url("/fonts/Paperlogy-4Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Paperozi";
  src: url("/fonts/Paperlogy-5Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Paperozi";
  src: url("/fonts/Paperlogy-6SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Paperozi";
  src: url("/fonts/Paperlogy-7Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Paperozi";
  src: url("/fonts/Paperlogy-8ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/*
 * 지혜행정사사무소 공개 사이트 스타일.
 *
 * 원본 포털 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;
  grid-template-columns: minmax(300px, 0.8fr) minmax(480px, 1.5fr) auto;
  align-items: center;
  gap: 1.75rem;
  min-height: 110px;
}

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

.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;
}

/*
 * 실제 로고 이미지를 쓸 때:
 *  - 로고에 이미 원이 그려져 있어 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;
}

/* 헤더 로고만 확대합니다. 공용 규칙(46px)은 푸터가 계속 씁니다. */
.site-header .brand-mark {
  width: 64px;
  height: 64px;
  font-size: 1.7rem;
}

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

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

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

.desktop-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 1.7vw, 1.6rem);
  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 216ms ease;
}

.desktop-navigation a:hover::after,
.desktop-navigation a:focus-visible::after,
.desktop-navigation a[aria-current="page"]::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: 14rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.1rem 0.4rem;
  color: var(--wisdom-brown);
  font-size: 0.75rem;
  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 216ms ease, color 216ms ease, border-color 216ms ease, transform 216ms 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;
  font-size: 0.7rem;
}

.header-actions .header-consultation {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 54px;
  padding: 0.85rem 1.5rem;
  border-color: var(--wisdom-brown);
  background: var(--wisdom-brown);
  color: var(--wisdom-ivory);
  font-size: 1.05rem;
}

.header-actions .header-consultation:hover,
.header-actions .header-consultation:focus-visible {
  border-color: var(--wisdom-ink);
  background: var(--wisdom-ink);
  color: var(--wisdom-ivory);
}

.header-actions .header-consultation svg {
  width: 20px;
  height: 20px;
}

.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 {
  padding: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wisdom-sand) 55%, transparent);
}

.mobile-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.9rem 0.65rem 0.2rem;
  color: var(--wisdom-brown);
  font-size: 0.8125rem;
}

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

.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.95rem;
  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: 600;
  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;
}

.secondary-actions {
  margin-top: 1.6rem;
  color: var(--wisdom-brown);
  font-size: 1.05rem;
  font-weight: 600;
  gap: 1.4rem;
}

.secondary-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--wisdom-bronze);
}

.secondary-actions a svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.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);
}

/*
 * 대표 사진. 원본이 브로슈어 스캔 크롭(224x258)이라 프레임보다 작으므로
 * cover 로 채우고 얼굴이 상단 3분의 1에 오도록 위치를 잡습니다.
 * 사진은 배경 투명 PNG 라 아래 브라운 그라데이션이 인물 뒤로 비칩니다.
 */
.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: 600;
  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;
}

/*
 * situation-card 는 검색·보조기술 위계(라벨=h3, 본문=p)와 화면 모습(작은 라벨,
 * 큰 세리프 본문)을 분리합니다. 아래 두 규칙이 기존 span/h3 시절의 모습을
 * 그대로 재현합니다 — 지우면 본문이 갑자기 작아집니다.
 */
.situation-card h3.card-index {
  margin: 0;
}

.situation-card .card-body {
  margin: 2rem 0 0.8rem;
  color: inherit;
  font-family: var(--wisdom-font-serif);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 600;
}

.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,
.service-card h3,
.location-card h2,
.location-card h3,
.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;
}

/*
 * 대표 페이지 이력 카드 — 경력과 수상·자격·학위를 두 열로 나눕니다.
 * 한 열로 쌓으면 두 번째 제목이 위 목록에 붙어 목록 항목처럼 읽힙니다.
 */
.career-summary-card .career-columns {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2.2rem 3.5rem;
}

.career-summary-card h3 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wisdom-bronze) 45%, transparent);
  color: var(--wisdom-brown);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}

.career-summary-card ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.15rem;
}

@media (max-width: 860px) {
  .career-summary-card .career-columns {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

.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: 800;
}

.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: 800;
}

.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: 700;
}

.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: 700;
}

.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: 700;
}

/* 접수 완료 화면 (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: 5rem 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: 800;
}

.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: 700;
}

.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);
  font-size: 0.8rem;
}

.site-footer h2 {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--wisdom-white) 78%, transparent);
  font-size: 0.78rem;
}

.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);
  /* 저작권 표기. (갱신일 표시는 2026-08-24 운영자 지시로 삭제) */
  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;
}

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

[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;
  }

  /*
   * 페이지 상단 히어로 전용 모션 — 운영자 피드백 3건(2026-08-24)의 결과.
   *  1차 "반짝거림": 블록 블러 + 자식 5개 순차 점멸이 겹침 → 제거
   *  2차 "여유롭게 스르륵": 600ms 전환이 급함 → 1.2초 keyframe 활강
   *  3차 "배경은 그대로라 어색": 애니메이션이 안쪽 텍스트 블록에만 걸려
   *      사선 배경(.page-hero/.hero-section 자체)이 먼저 떠 있었음
   *      → :has() 로 **섹션 전체**(배경+텍스트+사진)를 한 몸으로 활강.
   *
   * :has() 는 Chromium 105+/Firefox 121+/WebKit 15.4+ — 3엔진 지원 원칙 충족.
   * 내부 reveal 요소들은 섹션에 실려 가므로 개별 애니메이션을 끕니다.
   * 아래 섹션들의 스크롤 등장 모션(600ms·stagger)은 그대로입니다.
   */
  .motion-enabled .page-hero:has([data-reveal][data-revealed="false"]),
  .motion-enabled .hero-section:has(.hero-copy[data-revealed="false"]) {
    opacity: 0;
  }

  .motion-enabled .page-hero:has([data-reveal][data-revealed="true"]),
  .motion-enabled .hero-section:has(.hero-copy[data-revealed="true"]) {
    animation: hero-drift 1200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .motion-enabled .page-hero [data-reveal],
  .motion-enabled .hero-section [data-reveal] {
    opacity: 1;
    filter: none;
    translate: none;
    transition: none;
    animation: none;
  }

  @keyframes hero-drift {
    from {
      opacity: 0;
      translate: 0 18px;
    }
  }

  .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;
  }
}

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

@media (max-width: 1120px) {
  .header-inner {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .desktop-navigation {
    display: none;
  }

  .mobile-menu {
    display: block;
  }
}

@media (max-width: 860px) {
  .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;
  }

  /*
   * 단일 단 배치에서는 히어로 사진이 화면 높이의 절반 이상을 차지해 본문을 아래로
   * 밀어냅니다. 또 프레임이 전체 폭이 되면 224px 원본을 최대 2.9배까지 늘려
   * 흐려집니다. 그래서 원본 비율(224:258)을 지키는 인물 카드로 폭을 제한하고
   * 가운데 둡니다. 확대율이 1.1배 수준으로 내려가 선명도도 함께 좋아집니다.
   */
  .portrait-photo {
    width: min(100%, 240px);
    min-height: 0;
    max-height: none;
    height: auto;
    aspect-ratio: 640 / 696;
    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-actions .header-consultation {
    display: none;
  }

  .site-header .brand-mark {
    width: 52px;
    height: 52px;
    font-size: 1.35rem;
  }

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

  .brand-en {
    font-size: 0.68rem;
    white-space: normal;
  }

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

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

  .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.78rem;
  }

  .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;
}

/* ─── 학교폭력 포털 추가 컴포넌트 ───────────────────────────────────
   아래 블록은 wisdom_web_portal_lite 의 디자인 시스템(토큰·기존 컴포넌트)을
   그대로 두고, 이 사이트에만 있는 화면 요소를 같은 문법으로 추가한 것입니다. */

/* 히어로·페이지 제목: 이 사이트의 문구는 문장형이라 원본보다 한 단계 줄입니다. */
.hero-copy h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.9rem);
  letter-spacing: -0.055em;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  letter-spacing: -0.05em;
  line-height: 1.25;
}

/* 섹션 제목 아래에 붙는 도입 문단 */
.section-intro {
  max-width: 46rem;
  margin: -1.5rem 0 2.5rem;
  color: color-mix(in srgb, var(--wisdom-ink) 76%, transparent);
}

/* 홈 · 현재 상황 선택 카드: 제목 배지 + 설명 문장 + 이동 링크 */
.situation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.situation-card .card-index {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--wisdom-bronze);
  color: var(--wisdom-brown);
  font-family: var(--wisdom-font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.situation-card h3 {
  margin: 1.4rem 0 0;
  font-family: var(--wisdom-font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  color: color-mix(in srgb, var(--wisdom-ink) 82%, transparent);
}

.situation-card a {
  display: inline-block;
  margin-top: 1.3rem;
  border-bottom: 1px solid currentColor;
  color: var(--wisdom-brown);
  font-size: 0.78rem;
  font-weight: 800;
}

/* 안내·업무 페이지의 본문 섹션 묶음 */
.guide-stack {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.guide-section {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--wisdom-sand);
  background: color-mix(in srgb, var(--wisdom-white) 68%, transparent);
}

.guide-section h2 {
  margin: 0.9rem 0 0.8rem;
  font-family: var(--wisdom-font-serif);
  font-size: 1.7rem;
}

.guide-section h3 {
  margin: 2rem 0 0.6rem;
  font-family: var(--wisdom-font-serif);
  font-size: 1.25rem;
}

/* 학교폭력 법적 정의 — 법률 인용임이 드러나는 인용 블록 */
.legal-definition {
  margin: 0 0 1.1rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--wisdom-brown);
  background: color-mix(in srgb, var(--wisdom-sand) 30%, transparent);
}

.legal-definition cite {
  display: block;
  margin-top: 0.5rem;
  color: var(--wisdom-brown);
  font-size: 0.78rem;
  font-style: normal;
}

/* 사안처리 흐름도 — 운영자 제공 이미지 (2026-08-24) */
.flow-figure {
  margin: 1.6rem 0 0;
  border: 1px solid var(--wisdom-sand);
  background: var(--wisdom-white);
  padding: 0.6rem;
}

.flow-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.flow-figure figcaption {
  margin-top: 0.5rem;
  color: color-mix(in srgb, var(--wisdom-ink) 60%, transparent);
  font-size: 0.78rem;
  text-align: center;
}

.guide-section .operational-note {
  margin-top: 1.5rem;
}

.guide-section .button {
  margin-top: 1.4rem;
}

/* 확인 사항·지원 업무 목록 */
.guide-checklist {
  margin: 1.2rem 0 0;
  padding-left: 1.4rem;
  list-style: disc;
}

.guide-checklist li + li {
  margin-top: 0.5rem;
}

.guide-checklist li::marker {
  color: var(--wisdom-bronze);
}

/* 학교폭력 유형 그리드 */
.type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.5rem;
  border: 1px solid var(--wisdom-sand);
  background: var(--wisdom-sand);
}

.type-grid li {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  background: var(--wisdom-ivory);
  font-weight: 600;
}

.type-grid li span {
  color: var(--wisdom-brown);
  font-family: var(--wisdom-font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* 사안처리 절차 타임라인 (withdrawal-steps 의 번호 매김 재사용) */
.procedure-steps {
  margin-top: 1.2rem;
  border-top: 1px solid var(--wisdom-bronze);
}

/* 대표행정사 · 업무 원칙 밴드 (홈의 principles-section 과 같은 톤) */
.principles-band {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--wisdom-brown);
  color: var(--wisdom-white);
}

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

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

.principles-band :focus-visible {
  outline-color: var(--wisdom-ivory);
}

/* 자주 묻는 질문 */
.faq-list {
  display: grid;
  gap: 0.8rem;
}

.faq-item {
  margin: 0;
  padding: 1rem 1.2rem;
}

.faq-item summary {
  font-weight: 700;
}

.faq-item p {
  margin: 0.8rem 0 0;
  color: color-mix(in srgb, var(--wisdom-ink) 82%, transparent);
}

/* 하단 상담 연결 카드 제목 */
.content-cta h2 {
  margin: 0 0 0.8rem;
  font-family: var(--wisdom-font-serif);
  font-size: 1.45rem;
}

/* 대표행정사 요약 카드의 문단 간격 */
.credentials-card p {
  margin-top: 1rem;
}

.credentials-card .button {
  margin-top: 1.6rem;
}

/* 유튜브 영상 목록: 썸네일을 누른 자리에서 영상이 바로 재생됩니다. */
.youtube-video-list {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.youtube-video-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--wisdom-sand);
  background: color-mix(in srgb, var(--wisdom-white) 72%, transparent);
  transition: border-color 216ms ease, box-shadow 216ms ease;
}

.youtube-video-card[data-playing] {
  border-color: var(--wisdom-bronze);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--wisdom-brown) 13%, transparent);
}

.youtube-video-player,
.youtube-video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--wisdom-ink);
}

.youtube-video-player {
  position: relative;
  overflow: hidden;
}

.youtube-video-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 300ms ease, filter 300ms ease;
}

.youtube-video-player:hover img,
.youtube-video-player:focus-visible img {
  scale: 1.025;
  filter: brightness(0.82);
}

.youtube-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 50px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--wisdom-brown) 94%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  translate: -50% -50%;
  transition: background-color 216ms ease, scale 216ms ease;
}

.youtube-play-button::after {
  position: absolute;
  top: 50%;
  left: 52%;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--wisdom-white);
  content: "";
  translate: -50% -50%;
}

.youtube-video-player:hover .youtube-play-button,
.youtube-video-player:focus-visible .youtube-play-button {
  background: var(--wisdom-ink);
  scale: 1.06;
}

.youtube-video-frame {
  border: 0;
}

.youtube-video-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.6rem);
}

.youtube-video-index {
  margin-bottom: 0.8rem;
  color: var(--wisdom-brown);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.youtube-video-copy h2 {
  font-family: var(--wisdom-font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.55;
}

/* 푸터 상단 고정 안내 문구 */
.footer-notice {
  margin-bottom: 2.2rem;
  padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--wisdom-bronze);
  background: color-mix(in srgb, var(--wisdom-white) 8%, transparent);
  color: color-mix(in srgb, var(--wisdom-white) 82%, transparent);
  font-size: 0.85rem;
}

/* 모바일 하단 고정 상담 바 (전화 | 카카오톡 | 온라인) */
.quick-contact {
  display: none;
}

@media (max-width: 700px) {
  .quick-contact {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 1px solid var(--wisdom-sand);
    background: var(--wisdom-ivory);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .quick-contact a {
    display: grid;
    place-items: center;
    min-height: 54px;
    padding: 0.6rem 0.4rem;
    border-left: 1px solid color-mix(in srgb, var(--wisdom-sand) 70%, transparent);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
  }

  .quick-contact a:first-child {
    border-left: 0;
  }

  .quick-contact-primary {
    background: var(--wisdom-brown);
    color: var(--wisdom-white);
  }

  /* 고정 바가 푸터 내용을 가리지 않도록 본문 아래 여백을 확보합니다. */
  body {
    padding-bottom: calc(54px + env(safe-area-inset-bottom));
  }
}

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

  .youtube-video-card {
    grid-template-columns: 1fr;
  }

  .youtube-video-copy {
    padding: 1.4rem 1.5rem 1.6rem;
  }
}

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

/* ─── 페이지 맨 위로 이동 버튼 ──────────────────────────────────────
   JavaScript 가 없으면 hidden 속성 그대로 숨겨져 있고(점진적 향상),
   app.js 가 스크롤 위치에 따라 data-visible 을 토글합니다. */
/* ─── 플로팅 빠른 연결 메뉴 (데스크톱) ────────────────────────────
 * 참고 구성(반향 mc-wrap)의 20% 축소판 — 아이콘 28→22px, 라벨 11→10px.
 * 브라운 패널 + 아이보리 실루엣. 모바일(≤860px)은 하단 상담 바가 같은
 * 역할이라 숨긴다. TOP 이 back-to-top 을 대체하므로 데스크톱에선 그 버튼을
 * 숨긴다(아래 미디어쿼리).
 */
.floating-menu {
  position: fixed;
  top: 50%;
  right: 14px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--wisdom-brown) 96%, black);
  box-shadow: 0 14px 40px rgba(47, 42, 37, 0.28);
  translate: 0 -50%;
}

.fm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 9px;
  border-radius: 9px;
  color: var(--wisdom-ivory);
  transition: background 0.15s ease;
}

.fm-item:hover,
.fm-item:focus-visible {
  background: color-mix(in srgb, var(--wisdom-ivory) 14%, transparent);
}

.fm-ico {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.fm-ico svg {
  width: 100%;
  height: 100%;
}

/* 두 색상 실루엣: 바탕은 아이보리, 안쪽 글자·선은 패널색 */
.fm-ico .ico-bg { fill: var(--wisdom-ivory); }
.fm-ico .ico-fg { fill: color-mix(in srgb, var(--wisdom-brown) 96%, black); }

.fm-txt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.fm-sep {
  height: 1px;
  margin: 5px 8px;
  background: color-mix(in srgb, var(--wisdom-ivory) 30%, transparent);
}

@media (max-width: 860px) {
  .floating-menu {
    display: none;
  }
}

@media (min-width: 861px) {
  /* 데스크톱에서는 플로팅 메뉴의 TOP 이 이 버튼을 대체합니다. */
  .back-to-top {
    display: none !important;
  }
}

.back-to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--wisdom-bronze);
  border-radius: 50%;
  background: var(--wisdom-brown);
  color: var(--wisdom-white);
  font-size: 1.15rem;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(47, 42, 37, 0.22);
  cursor: pointer;
}

.back-to-top[data-visible="false"] {
  opacity: 0;
  translate: 0 10px;
  pointer-events: none;
}

.back-to-top:hover {
  background: var(--wisdom-ink);
}

@media (max-width: 700px) {
  /* 하단 고정 상담 바(54px) 위에 뜨도록 올립니다. */
  .back-to-top {
    right: 0.9rem;
    bottom: calc(54px + env(safe-area-inset-bottom) + 0.9rem);
    width: 44px;
    height: 44px;
  }
}

@media print {
  .back-to-top,
  .floating-menu {
    display: none !important;
  }
}