/* 생성물 — scripts/sync-public-css.mjs 가 src/styles/m3.css 로 만든다. 여기서 고치지 않는다. */
/*
 * Material 3 공통 층 (2026-10-14 design/m3 브랜치) — Layout.astro 가 landing.css 다음에 모든 화면에 싣는다.
 * 화면마다 따로 적힌 스타일(Astro 범위 스타일 포함)에도 M3 모양이 일관되게 보이도록, 모양(모서리)·초점 표시·글자 굵기만
 * 넓게 맞춘다. 색은 tokens.css(--md-sys-*·--seo-*)만 쓴다.
 * 글자(글꼴·굵기·자간·크기)는 손대지 않는다 — 가독성은 원티드 타입 토큰(landing.css --type-*)을 따른다(2026-10-14 대장 결정).
 * !important 는 범위 스타일(클래스+속성 선택자)을 이기기 위한 것이라 모서리·굵기에만 쓴다.
 */

/* 버튼 — M3 common button 은 알약 모양 */
:is(a, button)[class*="btn"]:not(.nav-burger):not([class*="btn-group"]),
:is(a, button)[class*="__cta"],
:is(a, button)[class$="-cta"],
button[type="submit"],
input[type="submit"],
input[type="button"] {
  border-radius: var(--md-sys-shape-full) !important;
}

/* 헤더 메뉴 — Material 3 알약 상태 레이어, 현재 위치는 secondary container.
   Astro 헤더(SiteHeader.astro)와 같은 모양을 정적 페이지 헤더(auth-header.js — 인라인 style 이 있어 !important)에도 준다 */
.nav-shell .nav-desktop { gap: 4px !important; }
.nav-shell .nav-desktop a {
  padding: 10px 16px; border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-surface-variant) !important; text-decoration: none;
  transition: background .2s cubic-bezier(.2,0,0,1), color .2s;
}
.nav-shell .nav-desktop a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); color: var(--md-sys-color-on-surface) !important; }
.nav-shell .nav-desktop a[aria-current="page"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container) !important; }
.nav-shell .nav-desktop a::after { content: none !important; }

/* 칩·배지 — M3 chip 은 8px */
[class*="chip"]:not([class*="chips"]),
[class*="badge"]:not([class*="badges"]) {
  border-radius: var(--md-sys-shape-small) !important;
}

/* 입력 칸 — M3 outlined text field: 4px 모서리, 초점은 primary 2px */
input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="tel"], [type="number"], [type="url"], [type="date"]),
select,
textarea {
  border-radius: var(--md-sys-shape-extra-small) !important;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -1px;
}

/* 초점 표시(키보드) — primary 고리 */
:is(a, button, [role="button"], summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent);
  outline-offset: 2px;
}

/* 선택 영역 */
::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

/* 아이콘 — Material Symbols Rounded, 쓰는 아이콘만 담은 부분 글꼴(25KB, 자체 호스팅 — CSP 상 외부 글꼴 CSS 를 못 쓴다).
   아이콘을 새로 쓰면 목록에 이름을 넣고 다시 받는다(scripts 없이 한 줄):
   curl -A "Mozilla/5.0 … Chrome/126" "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..600,0..1,0&icon_names=<이름,…(가나다 정렬)>&display=block"
   → 응답의 fonts.gstatic.com woff2 를 public/fonts/material-symbols-rounded-<내용 sha256 앞 8자>.woff2 로 저장하고 아래 src 를 바꾼다
   (파일명이 같으면 브라우저 캐시가 옛 글꼴을 계속 써서 새 아이콘이 글자로 보인다).
   현재 목록(50):
   account_balance apartment approval arrow_back arrow_forward auto_awesome calendar_month call chat check
   check_circle chevron_right close content_copy description download edit error expand_more format_list_bulleted
   gavel info lock login logout mail medication menu north_east open_in_new person pets public receipt_long
   rice_bowl sanitizer schedule science search sell send share shopping_bag spa storefront task_alt verified_user
   warning work workspace_premium */
@font-face {
  font-family:"Material Symbols Rounded";
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url("/fonts/material-symbols-rounded-493a951b.woff2") format("woff2");
}
.md-icon {
  font-family:"Material Symbols Rounded";
  font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  font-size: 1.25em; vertical-align: -0.22em;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
}
.md-icon--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* 광고 자리(애드센스 실험, public/ads/seoryu-ads.js) — 본문과 섞여 보이지 않게 「광고」 표시와 여백을 둔다.
   버튼 바로 옆에 붙이면 실수 클릭(애드센스 정책 위반)이 생기므로 위아래 여백을 넉넉히. 채울 광고가 없으면 자리째 숨긴다. */
.seo-ad {
  display: block; clear: both;
  margin: 40px 0; padding: 12px 0 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  min-height: 100px;
}
.seo-ad__label {
  display: block; margin: 0 0 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--md-sys-color-on-surface-variant);
}
.seo-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
li.seo-ad-item { list-style: none; margin: 8px 0; }
main.law-page > .seo-ad, main.af-page > .seo-ad { margin-top: 48px; }