/* ACT 홈페이지 리뉴얼 샘플 — 공통 스타일 (T-2104)
   모바일 우선(412px 기준) → 960px 이상에서 PC 확장. 외부 라이브러리 없음(폰트 제외).
   색 = 로고색 3개(LOGO_COLORS.md)와 거기서 파생한 틴트. 흰 배경 본문 글자에 accent 는 쓰지 않는다(대비 3.97 < 4.5).
   Blade 이식: 이 파일은 public/css/site.css 로 그대로, 토큰은 :root 한 곳. */

:root {
  --primary:   #005BAB;  /* 로고 파랑 (흰 글자 대비 6.8) */
  --secondary: #072375;  /* ACT 남색 (제목) */
  --accent:    #4184C0;  /* 밝은 파랑 (선·장식·포커스 전용) */
  --ink:       #0B1A3F;  /* 제목 글자 = secondary 를 어둡게 */
  --text:      #33415F;  /* 본문 */
  --muted:     #5A6786;  /* 보조 글자 (흰 배경 대비 5.6) */
  --line:      #DCE6F2;
  --line-soft: #E9EFF7;
  --tint:      #EAF2FB;  /* primary 10% 틴트 */
  --tint-2:    #F5F8FC;
  --white:     #fff;
  --radius:    14px;
  --shadow:    0 10px 30px rgba(7, 35, 117, .10);
  --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif;
  --hd: 56px;
  --logo-h: 41px;   /* 헤더 로고 높이(비율 유지). v4: 한대표님 「로고 20% 키워줘」 — 폰 34→41, PC 40→48. 로고 크기는 여기(와 PC 블록 한 줄)에서만 정한다 */
  /* v2: 플로팅 버튼이 화면 오른쪽 끝에서 차지하는 폭(폰: 버튼 58 + 여백 6 + 안전 4 / PC: 세로 탭 48 + 닫기 배지가 왼쪽으로 나온 8 + 안전 4 — 폰은 배지가 위쪽 모서리라 안쪽으로 더 나오지 않는다).
     --inset = 화면 가장자리 → 본문 가장자리 거리. 목록 행은 (--fq-r − --inset − 요소가 이미 가진 안쪽 여백)만큼 오른쪽을 비워 버튼이 글자 위로 오지 못하게 한다. */
  --fq-r: 68px;
  --inset: max(16px, calc((100vw - 1080px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 8px); }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65;
  color: var(--text); background: var(--white); word-break: keep-all; overflow-wrap: anywhere;
}
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--primary); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 8px; }

/* ───────── 헤더 ───────── */
/* ⚠ 헤더에 backdrop-filter/transform 금지 — fixed 자식(모바일 메뉴 패널)의 기준 박스가 헤더로 바뀌어 패널이 접힌다(실렌더에서 발견) */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line-soft); }
.hd-in { display: flex; align-items: center; height: var(--hd); gap: 2px; }
.logo { display: block; margin-right: auto; }
.logo img { height: var(--logo-h); width: auto; display: block; }
.hd-tel { display: grid; place-items: center; width: 44px; height: 44px; color: var(--primary); border-radius: 50%; }
.hd-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hd-burger { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); border-radius: 50%; }
.hd-burger .ic { width: 26px; height: 26px; }

/* 모바일: 전체 메뉴 패널 (1단 = 아코디언) */
.gnb { display: none; position: fixed; inset: var(--hd) 0 0 0; z-index: 90; background: #fff; overflow-y: auto; padding: 4px 16px 40px; border-top: 1px solid var(--line-soft); }
.nav-open .gnb { display: block; }
.gnb-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 4px; font-size: 17px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-soft); text-align: left; }
.gnb-btn .ic { color: var(--muted); transition: transform .15s; }
.gnb-l { display: inline-flex; align-items: center; gap: 8px; }
/* v3: 메뉴 3묶음 — 인증담당자(기업·인증 취득, primary) / 심사원(전문가 양성, secondary) / 공통. 모바일은 색 머리띠 + 항목 왼쪽 색 막대 */
.gnb-grp { --c: var(--primary); --c-tint: var(--tint); margin-top: 10px; }
.gnb-grp.aud { --c: var(--secondary); --c-tint: #E6EAF6; }
.gnb-grp.com { --c: var(--muted); margin-top: 14px; }
.grp-name { display: flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--c); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.gnb-grp:not(.com) .gnb-1 { margin: 2px 0 0 8px; border-left: 3px solid var(--c); padding-left: 8px; }
.gnb-item.open > .gnb-btn { color: var(--c); }
.gnb-item.open > .gnb-btn .ic { transform: rotate(180deg); }
.gnb-2 { display: none; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0 16px; }
.gnb-item.open > .gnb-2 { display: grid; }
.gnb-2 a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 10px; background: var(--tint-2); font-size: 15px; color: var(--text); }
.gnb-2 a:active { background: var(--c); color: #fff; }
.gnb-2 li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ───────── 히어로 (v2: 문구만) ───────── */
.hero { background: linear-gradient(180deg, var(--tint) 0, #fff 100%); padding: 18px 0 12px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--primary); }
.hero h1 { margin-top: 4px; font-size: clamp(24px, 6.4vw, 30px); line-height: 1.35; font-weight: 700; letter-spacing: -.035em; color: var(--secondary); }
.hero h1 strong { color: var(--primary); font-weight: 700; }

/* ───────── 두 갈래 진입 (v2) — 기업(인증 취득) / 심사원(전문가 양성) ───────── */
.paths { padding: 2px 0 6px; }
.paths-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.path { display: flex; flex-direction: column; --c: var(--primary); --c-tint: var(--tint); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 4px 14px rgba(7, 35, 117, .06); }
.path.aud { --c: var(--secondary); --c-tint: #E6EAF6; }
.path-hd { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--c); color: #fff; }
.path-hd .ic { width: 24px; height: 24px; }
.path-hd h2 { display: grid; line-height: 1.2; }
.path-hd b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.path-hd span { font-size: 13px; font-weight: 500; }
.plinks { flex: 1; display: flex; flex-direction: column; }
.plinks .dl { flex: 1 1 auto; display: flex; }
.plinks .dl a { flex: 1; }
.plinks li + li a { border-top: 1px solid var(--line-soft); }
.plinks a { position: relative; display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 4px 28px 4px 12px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.plinks a::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }
.plinks a:hover { background: var(--tint-2); }
.plinks a:active { background: #DCE9F7; }
.plinks .main a { background: var(--c-tint); color: var(--c); font-weight: 700; }
.plinks .main a:hover { background: var(--c-tint); filter: brightness(.97); }
.plinks .dl a { font-size: 14px; font-weight: 500; color: var(--primary); }
.plinks .dl a::after { display: none; }
.plinks .dl .ic { width: 16px; height: 16px; color: var(--c); }

/* ───────── 섹션 공통 ───────── */
.sec { padding: 24px 0 20px; }
.sec + .sec { padding-top: 4px; }
.sec h2 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1.3; }
.lead { margin-top: 2px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
/* v2: 구역 제목행 — 제목 옆에 갈래 태그(기업 / 심사원). 태그를 오른쪽 끝에 붙이지 않는다(플로팅 버튼 자리) */
.sec-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding-left: 10px; padding-right: max(0px, calc(var(--fq-r) - var(--inset))); border-left: 4px solid var(--primary); }
.zone.aud .sec-hd { border-left-color: var(--secondary); }
.sec-hd h2 a:hover { color: var(--primary); }
.ztag { font-size: 13px; font-weight: 700; line-height: 1.5; padding: 1px 9px; border-radius: 999px; background: var(--tint); color: var(--primary); }
.zone.aud .ztag { background: #E6EAF6; color: var(--secondary); }

/* 펼침(아코디언) — <details>, 독립 다단 펼침 */
.acc { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.acc > summary, .pt > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; color: var(--ink); }
.acc > summary::-webkit-details-marker, .pt > summary::-webkit-details-marker { display: none; }
.acc > summary { padding-right: max(16px, calc(var(--fq-r) - var(--inset) - 1px)); }
.acc-n { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); }
.chev { color: var(--muted); transition: transform .15s; }
details[open] > summary .chev { transform: rotate(180deg); }
.acc[open] > summary { background: var(--tint); color: var(--secondary); }
.acc > summary:active { background: var(--primary); color: #fff; }
.acc > summary:active .acc-n, .acc > summary:active .chev { color: #fff; }

.svc-list { display: grid; }
.svc-list li { border-top: 1px solid var(--line-soft); }
/* v2: KAB 배지는 규격 코드(첫 줄) 오른쪽에 둔다 — 오른쪽 끝에 두면 긴 규격명이 배지에 밀려 3줄로 꺾였다(실측 66.9px). .svc-main 은 contents 로 풀어 b·span·배지를 한 격자에 배치 */
.svc-list a { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; min-height: 44px; padding: 5px max(16px, calc(var(--fq-r) - var(--inset) - 1px)) 5px 16px; }
.svc-list a:hover { background: var(--tint-2); }
.svc-list a:active { background: #DCE9F7; }
.svc-main { display: contents; }
.svc-main b { grid-column: 1; grid-row: 1; }
.svc-main span { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.svc-list .kab { grid-column: 2; grid-row: 1; justify-self: start; }
.svc-main b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--primary); letter-spacing: -.01em; }
.svc-main span { font-size: 14px; color: var(--text); line-height: 1.3; }
.kab { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--primary); background: var(--tint); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

/* 알림 */
.news-grid { display: grid; gap: 10px; margin-top: 8px; }
.zone > .box { margin-top: 8px; }
.zone > .box + .box { margin-top: 10px; }
/* v3: 좌우 2구역(왼쪽 인증서비스 / 오른쪽 교육 알림·교육일정). 960px 미만은 위아래로 쌓음(인증서비스 먼저), 높이는 억지로 맞추지 않는다 */
.duo-in { display: grid; gap: 24px; }
.box { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px 0; background: #fff; }
.box h3 { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.box h3 a:hover { color: var(--primary); }
.rows { margin-top: 2px; }
.rows li { border-top: 1px solid var(--line-soft); }
.rows li:first-child { border-top: 0; }
/* v2: 날짜는 제목 마지막 줄 오른쪽에 붙는다(float). 한 줄 제목이면 한 줄 40px, 일정 행은 .r-m 이 항상 아래줄 */
.rows a { display: block; min-height: 40px; padding: 10px max(0px, calc(var(--fq-r) - var(--inset) - 17px)) 10px 0; font-size: 15px; line-height: 1.35; }
.rows.sched a { padding-top: 5px; padding-bottom: 5px; }
.rows a:hover .r-t { color: var(--primary); }
.r-t { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.rows time { float: right; margin-left: 12px; font-size: 13px; line-height: 20px; color: var(--muted); }
.r-m { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.more { display: inline-flex; align-items: center; min-height: 40px; margin-top: auto; align-self: flex-end; margin-right: max(0px, calc(var(--fq-r) - var(--inset) - 17px)); padding: 0; font-size: 14px; font-weight: 700; color: var(--primary); }
.more::after { content: "+"; margin-left: .3em; }

/* 에이써티 포인트 */
.pts-grid { display: grid; gap: 6px; margin-top: 8px; }
.pt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint-2); }
.pt > summary { min-height: 46px; font-size: 16px; padding-right: max(16px, calc(var(--fq-r) - var(--inset) - 1px)); }
.pt-n { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--primary); }
.pt p { padding: 0 16px 12px; font-size: 15px; line-height: 1.6; }
.pt > summary:active { background: var(--tint); border-radius: var(--radius); }

/* ───────── 푸터 ───────── */
.site-footer { margin-top: 10px; padding: 20px 0 84px; background: var(--tint-2); border-top: 1px solid var(--line); }
.ft-in { display: grid; gap: 12px; }
.ft-name { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--primary); }   /* v3: 로고 이미지 대신 글자 */
.ft-tel { display: grid; gap: 2px; }
.ft-tel > div { display: flex; align-items: baseline; gap: 14px; }
.ft-tel dt { min-width: 60px; font-size: 13px; color: var(--muted); }
.ft-tel dd, .ft-tel dd a { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ft-tel > div + div dd { font-weight: 500; }
.ft-tel .ft-mail a { font-size: 17px; font-weight: 500; }
.ft-tel .ft-kakao a { font-size: 17px; font-weight: 500; }
.ft-tel dd a:hover { text-decoration: underline; }
.ft-copy { font-size: 12px; color: var(--muted); padding-right: max(0px, calc(var(--fq-r) - var(--inset))); }

/* ───────── 우측 따라다니는 「빠른 견적상담」 플로팅 메뉴 (요구 3) ─────────
   v4: 제목이 보이게. 폰 = 하단 오른쪽 둥근 버튼(아이콘 위·「견적상담」 아래, 58x54), PC = 오른쪽 끝 세로 탭(아이콘 + 세로 「빠른 견적상담」).
   목록 행은 위 --fq-r 만큼 오른쪽을 비워 버튼이 글자 위로 올 수 없게 한다(PC 1280 은 좌우 여백 100px 안에 탭이 들어가 비움 0). */
.float-quote { position: fixed; right: 6px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 80; }
.fq-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 58px; height: 54px; border-radius: 18px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; white-space: nowrap; box-shadow: 0 8px 24px rgba(7, 35, 117, .30); }
.fq-btn:hover, .fq-btn[aria-expanded="true"] { background: var(--secondary); }
.fq-btn .ic { width: 20px; height: 20px; }
.fq-l { display: none; }
.fq-x { position: absolute; top: -10px; right: -4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--secondary); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(7, 35, 117, .18); }
.fq-x::after { content: ""; position: absolute; inset: -7px; }   /* 터치 영역 40px 확보(보이는 크기는 26px) */
.fq-x .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.fq-panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 12px)); padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.fq-panel a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.fq-panel .ic { width: 20px; height: 20px; color: var(--primary); }
.fq-panel .fq-first a { font-weight: 700; color: var(--primary); }
.fq-panel a:hover { background: var(--tint); }
.fq-panel a:active { background: #DCE9F7; }

/* ───────── 하위 페이지 (인증규격) ───────── */
.sub { padding: 4px 0 20px; }
/* v3: 현재 그룹 표시(인증담당자 › 인증규격 › ISMS) + 반대 그룹(심사원)으로 가는 작은 진입 */
.sub { --c: var(--primary); --x: var(--secondary); --x-tint: #E6EAF6; }
.sub.aud { --c: var(--secondary); --x: var(--primary); --x-tint: var(--tint); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; padding-left: 10px; border-left: 4px solid var(--c); }
.crumb-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 40px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.crumb-path li + li::before { content: "\203A"; margin-right: 6px; color: var(--muted); }
.crumb-grp { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 700; }
.crumb-cur { color: var(--ink); font-weight: 700; }
.xlink { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px 0 0; font-size: 14px; font-weight: 700; color: var(--x); }
.xlink::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--x); flex: none; }
.xlink::after { content: "\203A"; font-size: 17px; line-height: 1; }
.xlink:hover { text-decoration: underline; }
/* v3: 규격 탭 줄 — 폰에서 오른쪽(AUTL 이후)이 잘리므로 끝에 흐림 + 「›」 버튼으로 알린다(JS 가 .can-left/.at-end 토글, JS 가 없어도 오른쪽 흐림은 보인다).
   scroll-padding: 스냅이 첫 칩을 화면 왼쪽 끝에 붙여 버리던 문제도 함께 해소. */
.chips-wrap { position: relative; margin: 0 -16px; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0; padding: 6px 16px 12px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips-wrap::before, .chips-wrap::after { content: ""; position: absolute; top: 0; bottom: 12px; width: 48px; z-index: 1; pointer-events: none; transition: opacity .15s; }
.chips-wrap::after { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 80%); }
.chips-wrap::before { left: 0; opacity: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 80%); }
.chips-wrap.can-left::before { opacity: 1; }
.chips-wrap.at-end::after { opacity: 0; }
.chips-more { position: absolute; right: 8px; top: 6px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary); font-size: 24px; line-height: 1; box-shadow: 0 2px 8px rgba(7, 35, 117, .16); }
.chips-more:active { background: var(--primary); color: #fff; }
.chips a { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* 전체 이름 말풍선(title 과 같은 내용) — JS 가 body 에 하나만 만들어 fixed 로 띄운다(가로 스크롤 줄 안에서는 잘리므로) */
.tip { position: fixed; z-index: 150; max-width: min(320px, calc(100vw - 16px)); padding: 8px 12px; border-radius: 10px; background: var(--secondary); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.4; box-shadow: var(--shadow); pointer-events: none; }
.tip::after { content: ""; position: absolute; top: -5px; left: var(--ax, 50%); width: 10px; height: 10px; background: var(--secondary); transform: translateX(-50%) rotate(45deg); }
.tip.up::after { top: auto; bottom: -5px; }
.chips a { flex: none; display: flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; color: var(--text); scroll-snap-align: start; }
.chips a:hover { border-color: var(--accent); }
.chips a.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

/* v3: 규격 아이콘 이미지 삭제 — 제목(ISMS ISO27001 / 정보보안경영시스템)과 설명만 */
.spec-head { padding: 8px 0 4px; }
.spec-head h1 { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ink); letter-spacing: -.02em; }
.spec-head h1 b { font-size: 32px; font-weight: 700; color: var(--primary); letter-spacing: -.03em; margin-right: 4px; }
.spec-head h1 span { display: block; margin-top: 2px; font-size: 18px; font-weight: 700; color: var(--secondary); }
.spec-head p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text); }

.spec-body { display: grid; gap: 8px; margin-top: 8px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 14px; background: #fff; }
.card h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--secondary); margin-bottom: 6px; }
/* v3: 글머리 목록도 플로팅 버튼 자리를 오른쪽에 비운다 — v2 는 비우지 않았다가 breadcrumb 추가로 첫 화면 글줄 끝(「향상」)이 원 밑에 들어간 것이 412 캡처에서 확인됨 */
.dash li, .num li { position: relative; font-size: 15px; line-height: 1.55; padding-right: max(0px, calc(var(--fq-r) - var(--inset) - 19px)); }
.dash li + li, .num li + li { margin-top: 4px; }
.dash li { padding-left: 18px; }
.dash li::before { content: ""; position: absolute; left: 0; top: .8em; width: 9px; height: 2px; background: var(--accent); }
.num { counter-reset: n; }
.num li { counter-increment: n; padding-left: 36px; }
.num li::before { content: counter(n); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--primary); font-size: 13px; font-weight: 700; line-height: 1; }

/* ───────── PC (≥ 960px) ───────── */
@media (min-width: 960px) {
  :root { --hd: 80px; --hd-row: 38px; --fq-r: 60px; }   /* v6: 헤더가 두 줄 메뉴라 68 → 80 (+12px) */   /* PC: 오른쪽 끝에 붙은 세로 탭 48 + 닫기 배지가 왼쪽으로 나온 8 + 안전 4 */
  body { font-size: 17px; }
  :root { --logo-h: 48px; }
  .hd-burger { display: none; }
  .hd-tel { width: auto; height: 40px; padding: 0 16px; gap: 8px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 15px; display: flex; align-items: center; }
  .hd-tel span { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .hd-tel .ic { width: 18px; height: 18px; }
  .hd-tel:hover { border-color: var(--primary); }

  /* v6(한대표님 10-25 「담당자·심사원 두 가지 중첩되는 맥락이 아니잖아」): PC 헤더 메뉴를 **두 줄**로 분리 —
       1행 = 인증담당자 갈래(인증기관·인증규격) + 오른쪽에 공통(안내사항) / 2행 = 심사원 갈래(연수기관·자격발급). 전화는 오른쪽 끝.
       갈래마다 라벨 알약 색(인증담당자 = primary, 심사원 = secondary)과 행 사이 구분선으로 갈린다. 드롭다운 동작은 그대로. */
  .gnb { display: grid; grid-template-columns: auto auto; grid-template-rows: var(--hd-row) var(--hd-row); align-self: center; position: static; inset: auto; overflow: visible; padding: 0; border: 0; background: none; margin: 0 10px 0 auto; column-gap: 6px; }
  .gnb-grp, .gnb-grp.com { position: relative; display: flex; align-items: center; gap: 2px; margin-top: 0; padding: 0 6px; }
  .gnb-grp.biz { grid-column: 1; grid-row: 1; border-bottom: 1px solid var(--line-soft); }
  .gnb-grp.aud { grid-column: 1; grid-row: 2; }
  .gnb-grp.com { grid-column: 2; grid-row: 1; margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--line); }
  .grp-name { min-height: 0; min-width: 92px; justify-content: center; margin-right: 6px; padding: 3px 11px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
  .gnb-grp:not(.com) .gnb-1 { margin: 0; padding: 0; border: 0; }
  .gnb-1 { display: flex; gap: 0; }
  .gnb-item { position: relative; }
  .gnb-btn { width: auto; min-height: var(--hd-row); padding: 0 11px; gap: 3px; border: 0; font-size: 16px; font-weight: 500; white-space: nowrap; }
  .gnb-item:hover > .gnb-btn, .gnb-item:focus-within > .gnb-btn { color: var(--c); }
  .gnb-2 { position: absolute; top: calc(100% - 4px); left: 0; z-index: 60; min-width: 190px; gap: 0; padding: 8px; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  .gnb-2.cols { grid-template-columns: 1fr 1fr; min-width: 270px; }
  .gnb-item:hover > .gnb-2, .gnb-item:focus-within > .gnb-2, .gnb-item.open > .gnb-2 { display: grid; }
  .gnb-2 a { min-height: 40px; background: none; font-size: 15px; padding: 0 12px; }
  .gnb-2 a:hover { background: var(--c-tint); color: var(--c); }
  .gnb-2 li:last-child:nth-child(odd) { grid-column: auto; }
  .gnb-2.cols li:last-child:nth-child(odd) { grid-column: auto; }

  .hero { padding: 40px 0 16px; }
  .hero h1 { font-size: 38px; line-height: 1.35; }
  .eyebrow { font-size: 13px; }

  .paths { padding: 8px 0 12px; }
  .paths-in { gap: 20px; }
  .path-hd { gap: 12px; padding: 12px 20px; }
  .path-hd .ic { width: 28px; height: 28px; }
  .path-hd b { font-size: 22px; }
  .path-hd span { font-size: 15px; }
  .plinks { display: grid; grid-template-columns: 1fr 1fr; }
  .plinks .main { grid-column: 1 / -1; }
  .plinks li:last-child:nth-child(even) { grid-column: 1 / -1; }
  .plinks li:nth-child(odd):not(:first-child) a { border-left: 1px solid var(--line-soft); }
  .plinks li:nth-child(2) a, .plinks li:nth-child(3) a { border-top: 1px solid var(--line-soft); }
  .plinks a { min-height: 46px; padding: 4px 32px 4px 20px; font-size: 16px; }
  .plinks .dl a { font-size: 15px; }
  .plinks a::after { right: 18px; }

  .sec { padding: 36px 0 28px; }
  .sec + .sec { padding-top: 6px; }
  .sec h2 { font-size: 26px; }
  .sec-hd { gap: 4px 14px; padding-left: 12px; }
  .ztag { font-size: 14px; }
  .lead { font-size: 16px; }
  .acc { margin-top: 10px; }
  .acc > summary { min-height: 52px; font-size: 18px; padding: 0 max(22px, calc(var(--fq-r) - var(--inset) - 1px)) 0 22px; }
  /* v3: 열 폭이 반이라 펼친 규격 목록은 1열. 왼쪽 열은 화면 오른쪽 끝(플로팅 버튼 자리)에서 멀어 여백 회피 불필요 */
  .svc-list a { min-height: 52px; padding: 6px 22px; }
  .zone.biz .acc > summary { padding-right: 22px; }

  .news-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 10px; }   /* 공지 박스 1개 — 교육일정이 구역으로 옮겨져 더 이상 2열이 아니다 */
  .box { padding: 12px 24px 0; }
  .zone > .box { margin-top: 10px; }
  .zone > .box + .box { margin-top: 14px; }
  .duo-in { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }   /* .paths-in 과 같은 열 폭·간격 */
  .box h3 { font-size: 19px; }
  .rows a { padding: 12px max(0px, calc(var(--fq-r) - var(--inset) - 25px)) 12px 0; line-height: 1.4; }
  .rows.sched a { padding-top: 8px; padding-bottom: 8px; }
  .more { margin-right: max(0px, calc(var(--fq-r) - var(--inset) - 25px)); }
  .r-t { font-size: 16px; }

  .pts-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
  .pt { padding-bottom: 4px; }
  .pt > summary { pointer-events: none; min-height: 52px; padding: 0 22px; }
  .pt .chev { display: none; }
  .pt p { padding: 0 max(22px, calc(var(--fq-r) - var(--inset) - 1px)) 14px 22px; font-size: 16px; }

  .site-footer { padding: 28px 0 40px; }
  .ft-in { grid-template-columns: auto 1fr; align-items: center; gap: 14px 40px; }
  .ft-name { font-size: 26px; }
  .ft-tel { display: flex; flex-wrap: wrap; gap: 4px 28px; justify-content: flex-end; padding-right: max(0px, calc(var(--fq-r) - var(--inset))); }   /* 연락처 4항목: 좁으면 줄바꿈 */
  .ft-copy { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); }

  .float-quote { right: 0; bottom: auto; top: 50%; transform: translateY(-50%); }
  .fq-btn { width: 48px; height: auto; padding: 16px 0 14px; gap: 10px; border-radius: 14px 0 0 14px; font-size: 15px; letter-spacing: .02em; box-shadow: -6px 8px 24px rgba(7, 35, 117, .26); }
  .fq-btn .ic { width: 22px; height: 22px; }
  .fq-s { display: none; }
  .fq-l { display: block; writing-mode: vertical-rl; }
  .fq-x { top: -12px; right: auto; left: -8px; }
  .fq-panel { top: 0; bottom: auto; right: calc(100% + 10px); }

  .sub { padding: 24px 0 56px; }
  .chips-wrap { margin: 0; }
  .chips-wrap::before, .chips-wrap::after, .chips-more { display: none; }
  .chips { flex-wrap: wrap; overflow: visible; padding: 6px 0 14px; }
  .spec-head { padding: 14px 0 6px; }
  .spec-head h1 { font-size: 20px; }
  .spec-head h1 b { font-size: 44px; }
  .spec-head h1 span { font-size: 22px; }
  .spec-head p { margin-top: 8px; font-size: 17px; max-width: 680px; }
  .spec-body { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
  .card { padding: 20px 28px 20px; }
  .card h2 { font-size: 20px; }
  .dash li, .num li { font-size: 16px; padding-right: max(0px, calc(var(--fq-r) - var(--inset) - 29px)); }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .hd-tel { width: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .hd-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gnb-btn { padding: 0 8px; font-size: 15px; }
  .gnb-grp { padding: 0 4px; }
  .grp-name { min-width: 84px; }
}

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