/* =====================================================================
   공통 컴포넌트 스타일 — 시안 전용 (tokens.css 뒤에 불러온다)
   컴포넌트 이름은 Astro로 옮길 때 그대로 파일 이름이 된다(SiteHeader.astro, DdayBadge.astro …).
   ===================================================================== */

[hidden] { display: none !important; }   /* hidden 속성은 어떤 display 규칙보다 우선 — 버튼·풍선 숨김이 안 먹던 원인 */

/* ---------- 스크롤바(2026-11-06 운영자 "더 예쁜 거 없나") ----------
   기본 회색 네모 대신 얇은 알약: 바탕(길)은 투명, 손잡이는 흐린 글자색(선 색은 베이지 바탕에서 거의 안 보여 옆으로 넘길 수 있는지 몰랐음), 마우스를 올리면 조금 진해짐. 다크 모드는 토큰 색이 알아서 바뀜.
   크롬·엣지·사파리는 ::-webkit-scrollbar로 둥글게, 파이어폭스는 둥근 모양을 못 해서 얇은 굵기·색만(scrollbar-width를 크롬에 주면 아래 둥근 규칙이 꺼지므로 파이어폭스에만) */
::-webkit-scrollbar { width: 10px; height: 10px; }                                         /* 굵기(손잡이는 테두리로 안쪽만 칠해 실제로는 6px 정도) */
::-webkit-scrollbar-track { background: transparent; }                                     /* 길은 안 보이게 */
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-ink-2) 35%, transparent); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; } /* 손잡이: 둥근 알약, 가장자리 2px은 비워 얇아 보이게 */
::-webkit-scrollbar-thumb:hover { background-color: var(--color-ink-2); }                  /* 올리면 진하게 */
::-webkit-scrollbar-corner { background: transparent; }                                    /* 가로·세로가 만나는 모서리 */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-ink-2) 35%, transparent) transparent; } } /* 파이어폭스 */

/* ---------- 레이아웃 그릇 ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* 가운데 정렬 + 좌우 여백 */
.content   { max-width: var(--content); }                                               /* 글 열은 720px까지만(한 줄 40자 안팎) */
.stack > * + * { margin-top: var(--sp-4); }                                             /* 세로 쌓기: 형제 사이 16px */
.stack-lg > * + * { margin-top: var(--sp-8); }                                          /* 블록 사이 32px */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 스크린리더 전용 글 */

/* ---------- SiteHeader: 고정 헤더(하나만 고정) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;                       /* 스크롤해도 위에 붙음 — 사이트에서 고정되는 유일한 요소 */
  height: var(--header-h);                                      /* 56px — 앵커 scroll-margin과 같은 값 */
  background: var(--color-surface);                             /* 카드와 같은 흰 바탕 */
  border-bottom: 1px solid var(--color-line);                   /* 아래 선 */
}
.site-header .container { display: flex; align-items: center; gap: var(--sp-4); height: 100%; } /* 가로 정렬 */
.brand { flex: none; white-space: nowrap; font-weight: 800; font-size: 1.125rem; color: var(--color-ink); text-decoration: none; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; } /* 로고는 절대 줄바꿈·축소되지 않게 */ /* 로고 자리(도메인 미정 → 글자 로고) */
.brand-mark { width: 24px; height: 24px; border-radius: 6px; background: var(--color-accent); display: inline-block; } /* 임시 심볼: 섹션 색 네모 */
.site-nav { margin-left: auto; display: flex; gap: var(--sp-2); }                       /* 오른쪽 끝에 섹션 탭 */
.site-nav a {
  text-decoration: none; color: var(--color-ink-2); font-size: var(--fs-sm); font-weight: 600;
  padding: 6px 10px; border-radius: var(--radius-sm); min-height: 24px;               /* 터치 목표 최소 24px(WCAG 2.2) */
}
.site-nav a[aria-current="true"] { color: var(--color-accent); background: var(--color-accent-soft); } /* 현재 섹션 표시 */
.site-nav .search-btn { border: 1px solid var(--color-line); background: var(--color-surface); border-radius: 999px; width: 36px; height: 36px; display: inline-grid; place-items: center; cursor: pointer; color: var(--color-ink-2); } /* 돋보기 버튼 */
.site-nav .theme-btn { border: 1px solid var(--color-line); background: var(--color-surface); border-radius: 999px; width: 36px; height: 36px; display: inline-grid; place-items: center; cursor: pointer; color: var(--color-ink-2); padding: 0; } /* 라이트·다크 버튼(theme.js가 돋보기 왼쪽에 넣음, 2026-11-06) — 돋보기와 같은 동그라미 */
.site-nav .theme-btn:hover { color: var(--color-ink); background: var(--color-accent-soft); } /* 올리면 섹션 색 연한 바탕 */
@media (max-width: 480px) { .site-nav a:not([aria-current="true"]) { display: none; } } /* 좁은 화면: 현재 섹션 + 검색만 보이고 나머지는 하단 메뉴로 */


/* ---------- SectionHeader: 섹션 안에서는 그 섹션의 로고·메뉴만 보인다 (2026-10-25 운영자 결정 "각 카테고리가 자기 홈을 가진 독립 사이트처럼") ---------- */
.brand .sec { font-weight: 700; color: var(--color-accent); margin-left: 2px; }             /* "브랜드 자격증" — 섹션 이름은 섹션 색 */
.home-link { font-size: var(--fs-xs); color: var(--color-ink-2); text-decoration: none; padding: 6px 8px; border-radius: var(--radius-sm); white-space: nowrap; min-height: 24px; display: inline-flex; align-items: center; } /* 다른 섹션으로 가는 유일한 길 */

/* ---------- SectionDrawer: 하위 카테고리는 왼쪽에서 열리는 서랍 (2026-11-01 운영자 결정, 칩 줄 대체) ----------
   <dialog>를 쓰면 Esc 닫기·포커스 가두기·배경 막기를 브라우저가 해 준다. 링크는 HTML에 그대로 있어 검색엔진도 읽는다 */
.menu-btn { flex: none; width: 36px; height: 36px; margin-left: -6px; margin-right: calc(-1 * var(--sp-2)); display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--color-ink); font-size: 1.25rem; line-height: 1; border-radius: var(--radius-sm); cursor: pointer; } /* 헤더 맨 왼쪽 ☰, 왼쪽 여백 선에 맞추고 로고와 붙임 */
.menu-btn:hover { background: var(--color-accent-soft); }                                   /* 올리면 섹션 색 연한 바탕 */
.drawer {
  position: fixed; inset: 0 auto 0 0;                                                       /* 화면 왼쪽 끝에 붙임 */
  width: min(300px, 84vw); height: 100dvh; max-height: 100dvh; max-width: none;             /* 폭 300px, 좁은 화면은 뒤 페이지가 조금 보이게 */
  margin: 0; padding: 0; border: 0;                                                         /* dialog 기본 가운데 정렬·테두리 제거 */
  background: var(--color-surface); color: var(--color-ink);                                /* 카드와 같은 바탕 */
  box-shadow: 4px 0 24px rgba(0,0,0,.18);                                                   /* 오른쪽으로 그림자 — 페이지 위에 떠 있음을 표시 */
}
.drawer[open] { display: flex; flex-direction: column; }                                    /* 열렸을 때만 flex — 닫히면 dialog 기본값(숨김) 유지 */
.drawer:modal { animation: drawer-in .2s ease-out; }                                        /* 미끄러지는 효과는 좁은 화면의 덮는 서랍(modal)만 — 넓은 화면 고정 사이드바는 페이지마다 움직이지 않게 */
.drawer::backdrop { background: rgba(0,0,0,.4); animation: drawer-fade .2s ease-out; }      /* 뒤 페이지 어둡게 */
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }     /* 왼쪽 밖에서 미끄러져 들어옴 */
@keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }                          /* 배경은 서서히 어두워짐 */
@media (prefers-reduced-motion: reduce) { .drawer:modal, .drawer::backdrop { animation: none; } } /* 움직임 줄이기 설정이면 바로 표시 */
body:has(.drawer:modal) { overflow: hidden; }                                               /* 덮는 서랍이 열린 동안만 뒤 페이지 스크롤 막기(고정 사이드바일 땐 페이지가 스크롤돼야 함) */
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--sp-2) 0 var(--sp-4); border-bottom: 1px solid var(--color-line); flex: none; } /* 윗줄: 헤더와 같은 높이 */
.drawer-title { font-weight: 800; font-size: 1.125rem; color: var(--color-accent); }        /* 섹션 이름은 섹션 색 */
.drawer-close { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--color-ink-2); font-size: 1rem; border-radius: var(--radius-sm); cursor: pointer; } /* ✕ 버튼 */
.drawer-close:hover { background: var(--color-accent-soft); }                               /* 올리면 섹션 색 연한 바탕 */
.drawer-nav { flex: 1; overflow-y: auto; padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px; } /* 남는 높이를 다 차지, 넘치면 안에서 스크롤 */
.drawer-nav a { padding: 12px var(--sp-3); border-radius: var(--radius-sm); color: var(--color-ink); text-decoration: none; font-weight: 600; } /* 줄 높이 넉넉히 — 손가락 터치 목표 */
.drawer-nav a:hover { background: var(--color-bg); }                                        /* 올리면 연한 바탕 */
.drawer-nav a[aria-current="true"] { background: var(--color-accent-soft); color: var(--color-accent); } /* 지금 있는 카테고리 */
.drawer-home { flex: none; padding: var(--sp-4); border-top: 1px solid var(--color-line); font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-2); text-decoration: none; } /* 맨 아래: 좁은 화면은 헤더에 안 보이는 "전체 서비스"로 가는 길 */
.drawer-group summary { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--sp-3); border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; list-style: none; } /* 분야별·등급별: 눌러서 하위 목록을 펼치는 줄 */
.drawer-group summary::-webkit-details-marker { display: none; }                            /* 브라우저 기본 삼각형 숨김 */
.drawer-group summary::after { content: "▾"; color: var(--color-ink-2); transition: transform .15s; } /* 오른쪽 끝 펼침 표시 */
.drawer-group[open] summary::after { transform: rotate(180deg); }                           /* 펼치면 뒤집기 */
.drawer-group summary:hover { background: var(--color-bg); }                                /* 올리면 연한 바탕 */
.drawer-group a { display: block; padding: 10px var(--sp-3) 10px var(--sp-6); font-size: var(--fs-sm); font-weight: 500; } /* 하위 항목: 들여쓰고 글자를 조금 작게 */
.drawer-group a.drawer-all { color: var(--color-accent); font-weight: 600; border-top: 1px dashed var(--color-line); margin-top: 4px; } /* "모두 보기" — 분야 하나가 아니라 전체 목록으로 가는 링크임을 색·점선으로 구분(2026-11-06) */

/* ---------- SectionDrawer 넓은 화면: 왼쪽에 기본으로 펼쳐 둔 사이드바, ☰로 접고 펼침 (2026-11-05 운영자 결정) ----------
   1024px 이상에서만. 좁은 화면은 위의 덮는 서랍 그대로. 접은 상태는 html.drawer-collapsed(drawer.js가 브라우저에 기억) */
@media (min-width: 1024px) {
  :root { --drawer-w: 240px; }                                                              /* 사이드바 폭 — 본문이 784px 이상 남는 값 */
  body:has(.drawer) .site-header .container { max-width: none; }                            /* 헤더는 화면 전체 폭: ☰가 사이드바 바로 위 왼쪽 끝에 오게 */
  .drawer {
    inset: var(--header-h) auto 0 0;                                                        /* 헤더 아래부터 화면 바닥까지 왼쪽에 붙임 */
    width: var(--drawer-w); height: auto; max-height: none;                                 /* 높이는 inset이 정함(헤더 높이만큼 뺀 나머지) */
    box-shadow: none; border-right: 1px solid var(--color-line);                            /* 떠 있는 그림자 대신 경계선 — 페이지의 일부처럼 */
    z-index: 10;                                                                            /* 헤더(20) 아래, 본문 위 */
  }
  html:not(.drawer-collapsed) .drawer { display: flex; flex-direction: column; }            /* 펼친 상태면 스크립트가 돌기 전에도 바로 보임(깜빡임 방지) */
  html.drawer-collapsed .drawer { display: none; }                                          /* 접은 상태면 숨김 */
  html:not(.drawer-collapsed) body:has(.drawer) { padding-left: var(--drawer-w); }          /* 본문을 사이드바 폭만큼 오른쪽으로 — 사이드바가 본문을 덮지 않게 */
  html:not(.drawer-collapsed) body:has(.drawer) > .site-header { margin-left: calc(-1 * var(--drawer-w)); } /* 헤더만은 다시 왼쪽 끝까지 늘림 */
  .drawer-head, .drawer-home { display: none; }                                             /* 섹션 이름·✕·"전체 서비스"는 헤더에 이미 있어 숨김 — 접기는 ☰로 */
  .drawer-nav { padding-top: var(--sp-3); }                                                 /* 헤더 선과 첫 항목 사이 숨 쉴 틈 */
}

/* ---------- SearchSheet: 헤더 돋보기로 위에서 열리는 검색창 (2026-11-02) ---------- */
.search-sheet { width: min(640px, calc(100vw - 16px)); max-width: none; max-height: 72dvh; margin: 8px auto 0; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); box-shadow: 0 10px 30px rgba(0,0,0,.2); } /* 화면 위쪽 가운데, 좁은 화면은 좌우 8px만 남김 */
.search-sheet[open] { display: flex; flex-direction: column; }                              /* 열렸을 때만 flex — 닫히면 숨김 유지 */
.search-sheet::backdrop { background: rgba(0,0,0,.4); }                                     /* 뒤 페이지 어둡게 */
.search-sheet form { flex: none; display: flex; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--color-line); } /* 윗줄: 입력칸 + 닫기 */
.search-sheet input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-ink); font: inherit; } /* 입력칸 */
.search-sheet-close { flex: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--color-ink-2); border-radius: var(--radius-sm); cursor: pointer; } /* ✕ 버튼 */
.search-results { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-2); }         /* 남는 높이에서 결과만 스크롤 */
.search-results a { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; } /* 결과 한 줄 */
.search-results a:hover, .search-results a:focus { background: var(--color-bg); }           /* 올리면 연한 바탕 */
.search-results b { font-weight: 700; }                                                     /* 종목·지원금·단지 이름 */
.search-results .meta { margin-left: auto; text-align: right; }                             /* 시행기관·구분은 오른쪽 끝 */
.search-empty { padding: var(--sp-4); font-size: var(--fs-sm); color: var(--color-ink-2); } /* 안내·결과 없음 문구 */


/* ---------- LiveHeading: "마감 임박 자격증 [LIVE]" (2026-10-25 운영자: 날짜 기준 제목 대신 이 꼴) ----------
   빨간 알약 LIVE = 데이터에서 자동 갱신되는 블록이라는 표시. 기준 시각은 오른쪽 작은 글자로만 */
.live-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-lg); }
.live-badge { display: inline-block; background: #D92D20; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; line-height: 1.3; } /* LIVE 깜빡임은 2026-11-05에 넣었다가 11-06 운영자 요청으로 뺌 */
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }                   /* 깜빡임 박자(지금은 LIVE에 안 씀 — 카드 대안 시안의 상태 점이 씀). 1.4초에 한 번, 움직임 줄이기 설정이면 멈춤 */
.live-h .meta { margin-left: auto; font-weight: 400; }   /* "10/25 06:00 기준" — 오른쪽 끝, 작게 */


/* ---------- LiveCards: 마감 임박 카드 — 한 줄 가로 스크롤 (2026-10-25 운영자: 두 줄 말고 한 줄 + 스크롤).
   순서 규칙: 날짜가 가까운 순, 같은 날이면 접수 마감 → 시험 → 발표. 30일 안의 것만, 최대 8장.
   카드 = 이름 + 상태 배지 + 단계 + 날짜(+ 등급 공통 회차면 인기 종목 이름).
   2026-11-06 운영자 선택 "변형 6-다"(시안 live-card-options.html): 흰 카드 · 은은한 그림자 · 깜빡이는 점 배지 · 이름과 날짜 사이 희미한 점선 · 남은 날은 말로("내일 마감") ---------- */
.live-cards { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; } /* 아래 12px = 카드와 스크롤바 사이 숨 쉴 틈 */
.live-card { flex: 0 0 296px; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-content: start; padding: var(--sp-4) var(--sp-5); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05); text-decoration: none; color: inherit; min-height: 44px; } /* 흰 카드 + 은은한 그림자 */
.live-card b { font-size: var(--fs-md); text-wrap: balance; }                             /* 제목이 두 줄이면 길이를 고르게 나눔 */
.live-card > b { line-height: 1.4; min-height: 2.8em; }                                    /* 제목 칸은 늘 두 줄 높이 → 아래 점선이 카드끼리 같은 높이 */
.live-rows { grid-column: 1 / -1; display: grid; grid-template-columns: 2.6em 1fr; gap: 4px 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed var(--color-line); font-size: var(--fs-sm); } /* 카드 본문: 접수·시험을 항목별로 한 줄씩, 위에 희미한 점선으로 이름과 나눔 */
.live-rows dt { color: var(--color-ink-2); }                                             /* 왼쪽 항목 이름은 흐리게 */
.live-rows dd { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } /* 날짜는 진하게, 숫자 폭 일정, 남은 날은 줄 오른쪽 끝 */
.live-left { flex: none; align-self: flex-start; white-space: nowrap; color: var(--color-ink-2); } /* "4일 남음"·"내일 시작": 알약 없이 글자만, 날짜가 두 줄이어도 첫 줄 옆에 */
.live-left[data-urgent="true"] { color: var(--color-urgent); font-weight: 800; }          /* 마감까지 3일 안이면 빨강 굵게 */
.live-card .dday { grid-column: 2; grid-row: 1; align-self: start; white-space: nowrap; }  /* 배지는 항상 오른쪽 위 고정(2026-11-02 결정) */
.live-card .dday[data-state] { background: transparent; padding-right: 0; }               /* 바탕 없이 점 + 글자(공통 .dday[data-state] 연한 바탕을 이 카드에서만 덮음) */
.live-card .dday::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: live-blink 1.4s ease-in-out infinite; } /* 상태 점(접수 중 초록 · 예정 노랑)이 깜빡임 — 움직임 줄이기 설정이면 멈춤 */
/* 접수 중 카드도 흰 바탕(초록 바탕은 2026-11-06 변형 6-다 선택으로 폐기) — 상태는 배지의 초록 점·글자로만 */
.live-card .dday:empty { display: none; }                                                  /* 계산 전이면 빈 배지를 남기지 않음 */
/* 마감 임박 분류 칩 줄(2026-11-06): 제목과 함께 .pop-head 틀 안에 넣어 "인기 자격증"과 같은 간격(제목 옆 16px, 줄바꿈되면 위아래 10px, 카드 줄과 16px).
   예전 .live-filter { margin: 0 0 12px }은 .stack의 위 여백 16px을 지워 제목에 바짝 붙었다(운영자 "너무 바짝 붙어 있음") */
.live-head .live-filter { min-width: 0; max-width: 100%; }                                 /* 좁은 화면에서 칩 줄이 옆으로 넘기기 되도록 폭을 부모 안에 가둠 */
@media (max-width: 599px) { .filters.live-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .filters.live-filter a { flex: none; } } /* 좁은 화면은 칩을 한 줄로 두고 옆으로 넘김(줄이 여러 개로 쌓이지 않게) */
.live-empty { flex: 1 0 100%; padding: var(--sp-4); font-size: var(--fs-sm); color: var(--color-ink-2); } /* 보여 줄 카드가 없을 때 안내 */
.live-card .names { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--color-ink-2); }    /* 등급 공통 회차일 때 인기 종목 이름 */
.live-more { flex: 0 0 120px; display: grid; place-items: center; text-decoration: none; color: var(--color-link); font-size: var(--fs-sm); font-weight: 600; border: 1px dashed var(--color-line); border-radius: var(--radius-lg); }


/* ---------- 시안 전용: 허브 1열 배치 비교 (main.hub[data-layout="one"]) — 입구 타일·광고가 흐름 안에 전체 폭으로 ---------- */
@media (min-width: 960px) {
  main.hub[data-layout="one"] { display: block; }
  main.hub[data-layout="one"] > * + * { margin-top: var(--sp-8); }
  main.hub[data-layout="one"] .side .grid-2 { grid-template-columns: repeat(4, 1fr); }
  main.hub[data-layout="one"] > .ad-slot { max-width: 728px; margin-left: auto; margin-right: auto; width: auto; }
}
.layout-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 30; background: var(--color-ink); color: var(--color-bg); border: 0; border-radius: 999px; padding: 10px 14px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); } /* 시안 비교용 버튼 — 실제 사이트엔 없음 */
@media (max-width: 959px) { .layout-toggle { display: none; } }


/* ---------- RankList: 인기 자격증 순위 목록 (2026-10-25 운영자: 타일 말고 다른 식, 기준 문구 없이) ----------
   한 줄 = 순위 숫자 + 이름 + 등급 칩 + (아래 작은 글) 지금 단계 · 합격률. 모바일 1열, 컴퓨터 2열(5개씩) ---------- */
.rank-list { display: grid; gap: 6px; counter-reset: rank; }
@media (min-width: 768px) { .rank-list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); grid-auto-flow: column; grid-template-rows: repeat(5, auto); } }
.rank-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); text-decoration: none; color: inherit; min-height: 56px; }
.rank-item::before { counter-increment: rank; content: counter(rank); grid-row: 1 / span 2; font-size: var(--fs-lg); font-weight: 800; color: var(--color-accent); text-align: center; font-variant-numeric: tabular-nums; }
.rank-item b { font-size: var(--fs-md); }
.rank-item .sub { grid-column: 2; font-size: var(--fs-xs); color: var(--color-ink-2); }
.rank-item .rate { grid-column: 3; grid-row: 1 / span 2; text-align: right; font-size: var(--fs-xs); color: var(--color-ink-2); font-variant-numeric: tabular-nums; line-height: 1.4; }
.rank-item .rate b { display: block; font-size: var(--fs-sm); color: var(--color-ink); }


/* ---------- SearchSuggest: 검색 자동완성 상자 (시안) ---------- */
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0,0,0,.12); z-index: 10; overflow: hidden; }
.sugg a[role="option"] { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--color-line); }
.sugg a[role="option"]:hover, .sugg a[role="option"]:focus { background: var(--color-bg); }
.sugg a[role="option"] b { font-size: var(--fs-md); }
.sugg a[role="option"] .meta { margin-left: auto; white-space: nowrap; }
.sugg-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; background: var(--color-bg); }
.sugg-quick a { font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--color-accent); background: var(--color-accent-soft); padding: 4px 10px; border-radius: 999px; }
.sugg-none { padding: 14px; font-size: var(--fs-sm); color: var(--color-ink-2); }

/* ---------- Popular: 필터 칩 + 왼쪽 세로 목록 + 오른쪽 합격률 그래프 (2026-10-25 운영자) ---------- */
.pop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: var(--sp-3); }
.pop { display: grid; gap: var(--sp-4); }
.pop-list { display: grid; gap: 6px; counter-reset: rank; }
.pop-list .rank-item.on { border-color: var(--color-accent); background: var(--color-accent-soft); }  /* 고른 종목 */
.pop-chart { align-self: start; }
.pop-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pop-chart-head b { font-size: var(--fs-lg); }
.pop-chart { position: relative; }
.pop-chart svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.pop-chart .col { cursor: pointer; }
.chart .tip, .pop-chart .tip { position: absolute; z-index: 3; background: var(--color-ink); color: var(--color-bg); font-size: var(--fs-xs); padding: 10px 12px; border-radius: 8px; display: grid; gap: 3px; width: 250px; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.2); line-height: 1.45; } /* 그래프 풍선: 그래프에 없는 그해 통계 */
.chart .tip em, .pop-chart .tip em { display: block; font-style: normal; color: #FFD166; font-size: 11px; }  /* 전년 대비 %p는 늘 제 줄에 */
.chart .tip[hidden], .pop-chart .tip[hidden] { display: none; }  /* display:grid가 hidden 속성을 이기던 문제 — 숨김일 땐 반드시 none */
.tip .tip-h { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.2); font-weight: 700; }
.tip .tip-row { display: grid; grid-template-columns: 56px 1fr 36px; align-items: center; gap: 8px; }  /* 취득자 구성: 세로 줄 + 작은 막대 */
.tip .tip-row i { display: block; height: 6px; background: #FFD166; border-radius: 3px; min-width: 2px; }
.tip .tip-row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pop-chart .tip b { font-size: var(--fs-sm); }
.pop-chart .tip i { display: inline-block; width: 10px; height: 3px; vertical-align: middle; margin-right: 6px; }
@media (min-width: 900px) { .pop { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .pop-chart { position: sticky; top: calc(var(--header-h) + 12px); } }
@media (max-width: 899px) { .pop-chart { order: -1; } }   /* 모바일: 그래프가 위, 목록이 아래 */

/* ---------- PopWage: 인기 자격증 카드의 "합격률 | 직업·임금" 탭 (2026-11-06 운영자 결정 1안, 시안 wage-options.html) ----------
   임금 = 그 자격과 이어진 직업의 임금(고용24 2025년 조사 하위25%·중앙값·상위25%, 없으면 커리어넷 평균연봉 중앙값). 자격증 취득자 연봉이 아님 */
.pop-tabs { display: flex; gap: 4px; padding: 3px; background: var(--color-bg); border-radius: 999px; width: max-content; margin: 8px 0 10px; } /* 탭 묶음(알약 모양) */
.pop-tabs button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink-2); cursor: pointer; } /* 탭 하나 */
.pop-tabs button[aria-selected="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); } /* 고른 탭 */
.pop-tabs button:disabled { opacity: .45; cursor: not-allowed; }                           /* 직업 자료가 없는 종목 */
.wrange { font-size: var(--fs-sm); color: var(--color-ink-2); margin: 2px 0 6px; }         /* "이어지는 직업 13개 · 임금 중앙값 3,550 ~ 7,500만 원" */
.wrange b { color: var(--color-ink); }                                                      /* 숫자 진하게 */
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--color-line); } /* 직업 한 줄 */
.wrow .jn { font-size: var(--fs-sm); font-weight: 600; }                                    /* 직업 이름 */
.wrow .wv { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 중앙값 */
.wrow .wv b { font-size: var(--fs-md); }                                                    /* 숫자 크게 */
.wband { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 999px; background: var(--color-bg); } /* 띠 바탕(눈금 2천~1억 2천) */
.wband i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--color-accent-soft); border: 1px solid var(--color-accent); } /* 하위~상위 25% 구간 */
.wband b { position: absolute; top: -3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-surface); } /* 중앙값 점 */
.wsub { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--color-ink-2); }          /* 띠 아래 사분위 글 */
/* 띠 읽는 법을 그림 안에 녹임(2026-11-06 운영자 "어떤 의미인지 모르겠고 x축 값도 안 보임"):
   띠 바로 아래 양 끝에 하위·상위 25% 금액, 맨 위 범례 한 줄, 맨 아래 공통 눈금(2천만~1억 2천) */
.wlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--color-ink-2); margin: 0 0 4px; } /* 범례 줄 */
.wlegend .lb { display: inline-block; width: 22px; height: 8px; border-radius: 999px; background: var(--color-accent-soft); border: 1px solid var(--color-accent); vertical-align: -1px; margin-right: 4px; } /* 범례: 띠 */
.wlegend .ld { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); vertical-align: -1px; margin-right: 4px; } /* 범례: 점 */
/* ⓘ 말풍선(2026-11-06 운영자 "마우스 올렸을 때 안내"): PC는 마우스를 올리거나 키보드로 고르면, 휴대폰은 누르면(aria-expanded) 뜬다.
   :hover는 마우스가 있는 기기에서만 — 휴대폰은 누른 뒤 :hover가 남아 닫히지 않는 문제가 있어 뺀다 */
.wlegend { position: relative; }                                                          /* 말풍선 위치 기준 */
.winfo-btn { border: 0; background: transparent; padding: 0 2px; font: inherit; font-size: var(--fs-sm); line-height: 1; color: var(--color-ink-2); cursor: help; } /* 범례 끝 ⓘ 버튼 */
.winfo-btn[aria-expanded="true"] { color: var(--color-accent); }                           /* 열렸을 때 섹션 색 */
.winfo { display: none; position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; max-width: 340px; font-size: var(--fs-xs); color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 10px 12px; line-height: 1.6; } /* 말풍선 상자(띠 위에 겹쳐 뜸) */
.winfo b { color: var(--color-accent); }                                                    /* "가운데 절반" 강조 */
.winfo-btn[aria-expanded="true"] + .winfo, .winfo-btn:focus-visible + .winfo { display: block; } /* 누름·키보드로 열림 */
@media (hover: hover) { .winfo-btn:hover { color: var(--color-accent); } .winfo-btn:hover + .winfo { display: block; } } /* 마우스 올림으로 열림(마우스 있는 기기만) */
.wq { grid-column: 1 / -1; position: relative; height: 16px; font-size: var(--fs-xs); color: var(--color-ink-2); font-variant-numeric: tabular-nums; } /* 띠 아래 숫자 줄 */
.wq i { position: absolute; top: 0; font-style: normal; white-space: nowrap; }             /* 하위 25%는 띠 왼끝에 오른쪽 맞춤, 상위 25%는 띠 오른끝에 왼쪽 맞춤 → 서로 안 겹침 */
.waxis { position: relative; height: 18px; margin-top: 6px; border-top: 1px solid var(--color-line); font-size: 11px; color: var(--color-ink-2); } /* 공통 눈금 줄 */
.waxis span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; } /* 눈금 글자(가운데 맞춤) */
.waxis span:first-child { transform: none; }                                                /* 맨 왼쪽은 왼쪽 맞춤(잘리지 않게) */
.waxis span:last-child { transform: translateX(-100%); }                                    /* 맨 오른쪽은 오른쪽 맞춤 */
.wnone { font-size: var(--fs-sm); color: var(--color-ink-2); padding: 12px 0; }             /* 자료 없음 안내 */

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: var(--fs-sm); color: var(--color-ink-2); margin: var(--sp-4) 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "›"; margin: 0 6px; color: var(--color-line); }     /* 구분 기호 */
.crumbs a { color: inherit; }

/* ---------- 칩(등급·분야 표시) ---------- */
.chip { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-ink); border: 1px solid transparent; }
.chip.outline { background: transparent; border-color: var(--color-line); color: var(--color-ink-2); }

/* ---------- DdayBadge: 상태 + D-day ----------
   상태 4가지는 색 + 글자 둘 다로 구분(색약 대비). data-state로 색이 바뀐다. */
.dday { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); padding: 4px 10px; border-radius: 999px; line-height: 1.2; }
.dday[data-state="open"]   { background: var(--color-open-soft);   color: var(--color-open); }   /* 접수 중 */
.dday[data-state="soon"]   { background: var(--color-soon-soft);   color: var(--color-soon); }   /* 접수 임박·발표 예정 */
.dday[data-state="urgent"] { background: var(--color-urgent-soft); color: var(--color-urgent); } /* 마감 D-3 이하 */
.dday[data-state="closed"] { background: var(--color-closed-soft); color: var(--color-closed); } /* 끝남·올해 일정 없음 */
.dday .n { font-size: 1.1em; }                                                             /* 숫자 조금 크게 */

/* ---------- StatusCard: 종목 페이지 첫 화면 카드 ---------- */
.status-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--sp-5); }
.status-card .big { font-family: var(--font-num); font-size: var(--fs-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin: var(--sp-2) 0; } /* D-21 같은 큰 숫자 — 숫자 글꼴(tnum) */
.status-card .big small { font-size: 0.4em; font-weight: 600; color: var(--color-ink-2); margin-left: 6px; letter-spacing: 0; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); } /* 다음 접수·합격률·응시료 — 칸 수는 폭에 맞춰(2026-11-06 응시료 칸 추가) */
.status-grid .cell .v .ln { display: block; white-space: nowrap; }                       /* 단계마다 한 줄("필기 65%" / "실기 22.1%") — 단위 중간에서 안 끊기게 */
.status-grid .cell { padding: var(--sp-3); background: var(--color-bg); border-radius: var(--radius-md); }
.status-grid .cell .k { font-size: var(--fs-xs); color: var(--color-ink-2); }
.status-grid .cell .v { font-weight: 700; font-size: var(--fs-md); }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-md); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); cursor: pointer; } /* 터치 목표 44px */
.btn.primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }

/* ---------- BlockNav: 페이지 안 목차(흐름 안에 둔다, 고정하지 않음) ---------- */
.block-nav { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* 가로 스크롤 칩 줄 */
.block-nav::-webkit-scrollbar { display: none; }
.block-nav a { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-2); text-decoration: none; padding: 8px 12px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-surface); min-height: 24px; }

/* ---------- Block: 본문 블록(h2 + 내용 + 출처 줄) ---------- */
.block { padding-top: var(--sp-6); }
.block > h2 { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--sp-3); }
.block > h2 .no { flex: none; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--color-accent); font-variant-numeric: tabular-nums; } /* 01 02 … 번호 — 제목이 길어도 세로로 안 깨지게 flex:none */
.block .lead { color: var(--color-ink); margin-bottom: var(--sp-3); }                   /* 블록 첫 문장(요약) */
.source-line { font-size: var(--fs-xs); color: var(--color-ink-2); margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } /* 블록마다 한 줄 출처 */
.source-line .verified { display: inline-flex; align-items: center; gap: 4px; color: var(--color-open); font-weight: 600; } /* ✓ 대조 일치 */
.source-line .mismatch { color: var(--color-urgent); font-weight: 600; }                /* ! 출처 불일치 */

/* ---------- Card: 흰 카드 ---------- */
.card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--sp-4); }

/* ---------- RoundCard: 회차 카드(표 대신) ---------- */
.round { border-left: 4px solid var(--color-line); }                                   /* 왼쪽 띠: 상태색 */
.round[data-state="open"]   { border-left-color: var(--color-open); }
.round[data-state="soon"]   { border-left-color: var(--color-soon); }
.round[data-state="urgent"] { border-left-color: var(--color-urgent); }
.round[data-state="closed"] { opacity: .75; }
.round .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: var(--sp-2); }
.round .head h3 { font-size: var(--fs-md); }
.kv { display: grid; grid-template-columns: 5.5em 1fr; row-gap: 6px; column-gap: 12px; font-size: var(--fs-sm); margin: 0; } /* 레이블 : 값 */
.kv dt { color: var(--color-ink-2); margin: 0; }
.kv dd { margin: 0; font-weight: 600; }
.kv dd.now { color: var(--color-open); }                                                 /* 지금 단계 강조 */
details.more > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--color-link); list-style: none; padding: 8px 0; min-height: 24px; } /* "지난 회차 보기" 접기 */
details.more > summary::before { content: "▸ "; }
details.more[open] > summary::before { content: "▾ "; }

/* ---------- DataTable: 3~4열 표(모바일 그대로), 넘치면 첫 열 고정 + 가로 스크롤 ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 320px; }
table.data caption { text-align: left; font-weight: 700; padding: var(--sp-3) var(--sp-3) 0; font-size: var(--fs-sm); }
table.data th, table.data td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
table.data th { font-weight: 600; color: var(--color-ink-2); background: var(--color-bg); }
table.data th:first-child, table.data td:first-child { text-align: left; position: sticky; left: 0; background: var(--color-surface); } /* 첫 열 고정 */
table.data th:first-child { background: var(--color-bg); }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* 표 숫자 열은 숫자 글꼴로 자릿수 정렬 */
table.data .hl { color: var(--color-accent); font-weight: 700; }
table.data td.or, table.data th.or { text-align: center; color: var(--color-ink-2); font-size: var(--fs-xs); padding: 10px 4px; width: 2.5em; background: var(--color-bg); white-space: nowrap; } /* 학력 | 또는 | 자격+경력 | 또는 | 경력 (운영자: 헷갈리지 않게) */

/* ---------- TrendChart: 5점 선 그래프(인라인 SVG, 점마다 값 표시) ---------- */
.chart { position: relative; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--sp-3); }
.chart .col { cursor: pointer; }
.chart svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.chart .legend { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--color-ink-2); margin-bottom: 6px; }
.chart .legend i { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--chart-1); vertical-align: middle; margin-right: 4px; }
.chart .legend i.dash { border-top-style: dashed; border-top-color: var(--chart-2); }
.chart .axis-note { font-size: var(--fs-xs); color: var(--color-ink-2); margin-top: 4px; } /* "세로축 0~60%" 정직한 축 표기 */

/* ---------- EligibilityPaths: 응시자격 경로 3갈래 ---------- */
.paths { display: grid; gap: var(--sp-3); }
.path { padding: var(--sp-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-line); }
.path h3 { font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.path h3 .tag { font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); background: var(--color-accent-soft); padding: 2px 8px; border-radius: 999px; }
.path ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); }
.path li + li { margin-top: 4px; }
.callout { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); background: var(--color-accent-soft); font-size: var(--fs-sm); } /* 안내 상자 */
.callout.warn { background: var(--color-soon-soft); }

/* ---------- LadderCard: 같은 계열 등급 사다리 ---------- */
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; } /* 칸 수는 폭에 맞춰 — 4칸 고정이면 휴대폰에서 칸이 80px 남짓이라 "정보처리산업기"·"필기 58.9% · 실"처럼 잘렸음(2026-11-06) */
.ladder a { min-width: 0; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 10px 8px; text-align: center; font-size: var(--fs-xs); min-height: 44px; display: grid; align-content: center; }
.ladder a b { display: block; font-size: var(--fs-sm); color: var(--color-ink); }
.ladder a[aria-current="page"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.ladder a .r { color: var(--color-ink-2); }
.ladder a .r .ln { display: block; white-space: nowrap; }                                     /* 합격률은 단계마다 한 줄 */

/* ---------- JobRow: 관련 직업·임금 ---------- */
.jobs { display: grid; gap: var(--sp-2); }
.job { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.job .name { font-weight: 700; }
.job .wage { font-variant-numeric: tabular-nums; text-align: right; }
.job .wage b { font-size: var(--fs-md); }
.job .bar { grid-column: 1 / -1; height: 6px; background: var(--color-bg); border-radius: 3px; position: relative; } /* 임금 사분위 띠 */
.job .bar i { position: absolute; top: 0; bottom: 0; background: var(--color-accent-soft); border-radius: 3px; }
.job .bar b { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); transform: translateX(-50%); }

/* ---------- Interpretation: 사람이 검수한 해석 문단 ---------- */
.interp { background: var(--color-surface); border: 1px solid var(--color-line); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); }
.interp .byline { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--color-ink-2); margin-bottom: var(--sp-2); }
.interp .byline .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent-soft); display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--color-accent); }
.interp p:last-child { margin-bottom: 0; }

/* ---------- AdSlot: 광고 자리(높이 예약, 접지 않음) ---------- */
.ad-slot { min-height: var(--ad-h-rect); display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--color-bg) 0 8px, var(--color-surface) 8px 16px); border: 1px dashed var(--color-line); border-radius: var(--radius-md); color: var(--color-ink-2); font-size: var(--fs-xs); position: relative; }
.ad-slot::before { content: "광고"; position: absolute; top: 6px; left: 10px; font-size: 11px; color: var(--color-ink-2); } /* 라벨은 "광고"만(정책) */
.ad-slot .note { max-width: 260px; text-align: center; }
main.hub > .ad-slot { margin-top: var(--sp-12); margin-bottom: var(--sp-12); } /* 허브 광고는 인기 자격증 "더 보기"·자세히 버튼 바로 밑이라 위아래 48px로 버튼·입구 타일과 띄움(실수 클릭 방지, 2026-11-06) */

/* ---------- RelatedPosts: 관련 블로그 글 ---------- */
.posts { display: grid; gap: var(--sp-2); }
.posts a { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; text-decoration: none; color: inherit; padding: var(--sp-3) var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.posts a .site { font-size: var(--fs-xs); color: var(--color-ink-2); }

/* ---------- SourceFooter: 페이지 끝 출처·기준일 표 + 정정 신고 ---------- */
.sources { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--sp-5); }
.sources h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.sources table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sources th, .sources td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.sources th { color: var(--color-ink-2); font-weight: 600; width: 34%; }
.sources .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.freshness { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--color-ink-2); } /* 신선도 점 */
.freshness i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-open); display: inline-block; }
.freshness.stale i { background: var(--color-soon); }

/* ---------- SiteFooter ---------- */
.site-footer { margin-top: var(--sp-12); padding: var(--sp-8) 0; border-top: 1px solid var(--color-line); font-size: var(--fs-sm); color: var(--color-ink-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.site-footer a { color: inherit; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 0; } /* 터치 목표: 최소 24px(WCAG 2.2)보다 넉넉한 36px(2026-11-07 UX 점검, 27px → 36px) */

/* ---------- 홈·허브용 ---------- */
.hero { padding: var(--sp-8) 0 var(--sp-6); }
.hero h1 .sub { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--color-ink-2); margin-top: 4px; } /* 제목 아래 작은 부제(2026-11-07: 긴 제목 대신) */
@media (max-width: 599px) { .hero { padding: var(--sp-4) 0 var(--sp-5); } }                /* 휴대폰: 위 여백 줄여 검색 칸이 첫 화면에 */
.hero p { color: var(--color-ink-2); }
.hero.center { text-align: center; }                                                        /* 첫 화면만 가운데(2026-11-07 운영자) — 아래 블록은 왼쪽 그대로 */
.hero.center .search { max-width: 640px; margin-left: auto; margin-right: auto; }
.hero.center h1 .sub { font-weight: 500; }
.hero .hot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-xs); color: var(--color-ink-2); } /* 많이 찾는 종목 칩 줄 */
.hero .hot a { font-size: var(--fs-xs); font-weight: 600; text-decoration: none; color: var(--color-ink); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-surface); }
.hero .hot a:hover { border-color: var(--color-accent); }
.search { display: flex; gap: 8px; }
.search input { flex: 1; min-width: 0; min-height: 48px; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 0 14px; font: inherit; font-size: var(--fs-md); background: var(--color-surface); color: var(--color-ink); }
.section-cards { display: grid; gap: var(--sp-3); }
.section-card { display: block; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-line); border-left: 6px solid var(--color-accent); border-radius: var(--radius-lg); padding: var(--sp-5); }
.section-card h2 { font-size: var(--fs-lg); margin-bottom: 4px; }
.section-card p { font-size: var(--fs-sm); color: var(--color-ink-2); margin: 0; }
.section-card .live { font-size: var(--fs-xs); color: var(--color-ink-2); margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.list-rows { display: grid; gap: 6px; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); text-decoration: none; color: inherit; font-size: var(--fs-sm); min-height: 44px; }
.row .when { font-variant-numeric: tabular-nums; color: var(--color-ink-2); font-size: var(--fs-xs); white-space: nowrap; }
.row .what b { display: block; }
.row .what small { color: var(--color-ink-2); }
.grid-2 { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
.grid-2 > * { min-width: 0; }                                                              /* 긴 단어가 칸을 밀어 페이지가 옆으로 넘치지 않게 */
/* 이름이 긴 목록(그 밖의 자격 등): 칸 수를 화면 폭에 맞춰 자동 — 한 칸이 260px보다 좁아지지 않게(2026-11-06 운영자 "카드 글자가 밖으로 삐져나옴":
   넓은 화면 4칸 고정 + 사이드바로 칸이 159px까지 줄어 "AIBT(AI비즈니스활용능력)" 같은 이름이 넘쳤음). 좁은 화면은 저절로 한 칸 */
.grid-2.names-long { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (max-width: 359px) { .grid-2 { grid-template-columns: 1fr; } } /* 아주 좁은 화면은 단어가 안 끊기게 칸 수를 줄임 */
.tile { text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); min-height: 64px; display: grid; align-content: center; gap: 4px; font-size: var(--fs-sm); }
.tile b { font-size: var(--fs-md); }
.tile > * { min-width: 0; }                                                                 /* 카드 안 글이 카드 폭보다 넓어지지 않게(줄바꿈은 띄어쓰기·괄호 앞에서, 그래도 안 들어가면 마지막 수단으로만 단어 안에서) */
.tile .sub { color: var(--color-ink-2); font-size: var(--fs-xs); }

/* ---------- 달력(월) ---------- */
.cal { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.cal .wk { display: grid; grid-template-columns: repeat(7, 1fr); font-size: var(--fs-xs); color: var(--color-ink-2); text-align: center; border-bottom: 1px solid var(--color-line); }
.cal .wk span { padding: 6px 0; }
.cal .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } /* minmax(0,…): 칸 안 긴 띠가 열 폭을 밀지 않게 */
.cal .d { min-width: 0; overflow: hidden; min-height: 48px; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: 4px; font-size: var(--fs-xs); position: relative; }
.cal .d:nth-child(7n) { border-right: 0; }
.cal .d .dots { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 2px; }
.cal .d .dots i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cal .d.sun { color: var(--color-urgent); }
.cal .d.has { background: var(--color-bg); }
.cal .d .n { font-weight: 600; }
.dot-open { background: var(--color-open); } .dot-exam { background: var(--color-accent); } .dot-pass { background: var(--color-soon); }
.agenda-day { display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-line); }
.agenda-day .date { text-align: center; }
.agenda-day .date b { display: block; font-size: var(--fs-xl); line-height: 1; }
.agenda-day .date small { color: var(--color-ink-2); }
.agenda-day ul { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); display: grid; gap: 6px; }
.agenda-day li { display: flex; gap: 8px; align-items: baseline; }
.agenda-day li .t { font-size: var(--fs-xs); font-weight: 700; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.t-open { background: var(--color-open-soft); color: var(--color-open); } .t-exam { background: var(--color-accent-soft); color: var(--color-accent); } .t-pass { background: var(--color-soon-soft); color: var(--color-soon); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters a { font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--color-ink-2); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-surface); min-height: 24px; }
.filters a[aria-current="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }

/* ---------- 계산기 폼 ---------- */
.form { display: grid; gap: var(--sp-5); }
.field label, .field legend { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 8px; }
.field .hint { font-size: var(--fs-xs); color: var(--color-ink-2); margin-top: 4px; }
.field select, .field input[type="number"] { width: 100%; min-height: 48px; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 0 12px; font: inherit; font-size: var(--fs-md); background: var(--color-surface); color: var(--color-ink); }
.radios { display: grid; gap: 8px; }
.radios label { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); font-weight: 500; font-size: var(--fs-sm); min-height: 48px; cursor: pointer; }
.radios input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.result { background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-lg); padding: var(--sp-5); }
.result h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.verdict { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--color-line); font-size: var(--fs-sm); }
.verdict:last-of-type { border-bottom: 0; }
.verdict .mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.mark.ok { background: var(--color-open-soft); color: var(--color-open); } .mark.no { background: var(--color-closed-soft); color: var(--color-closed); } .mark.alt { background: var(--color-soon-soft); color: var(--color-soon); }
.verdict b { display: block; }
.verdict small { color: var(--color-ink-2); }


/* ---------- 허브 데스크톱 배치: 왼쪽 본문(지금·목록·분류·출처) + 오른쪽 336px(입구 타일·광고). 모바일은 DOM 순서대로 한 열 ---------- */
@media (min-width: 960px) {
  main.hub[data-layout="two"] { display: grid; grid-template-columns: minmax(0, 1fr) 336px; column-gap: var(--sp-10); row-gap: var(--sp-8); grid-auto-flow: row dense; align-items: start; }
  main.hub[data-layout="two"] > * + * { margin-top: 0; }                      /* stack-lg의 세로 간격은 grid gap이 대신 */
  main.hub[data-layout="two"] > .hero { grid-column: 1 / -1; }                 /* 제목·검색은 두 열에 걸침 */
  main.hub[data-layout="two"] > .main { grid-column: 1; }
  main.hub[data-layout="two"] > .side { grid-column: 2; }
  main.hub[data-layout="two"] .side .grid-2 { grid-template-columns: 1fr 1fr; } /* 옆 열 타일은 2열 */
  main.hub[data-layout="two"] > .ad-slot { min-height: 280px; }                /* 옆 열 광고 = 300×250/336×280 그대로 */
  .ad-slot { max-width: 728px; margin-left: auto; margin-right: auto; } /* 한 열짜리 페이지에서 광고가 화면 폭으로 퍼지지 않게(728×90·336×280이 들어가는 폭) */
  main.hub[data-layout="two"] > .ad-slot { max-width: none; margin-left: 0; margin-right: 0; width: 100%; } /* grid 안에서 margin:auto는 칸을 내용 폭으로 줄이므로 끔 */
}

/* ---------- 데스크톱 2열 ---------- */
@media (min-width: 960px) {
  .page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-10); align-items: start; } /* 본문 + 오른쪽 열(목차·광고) */
  .aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: var(--sp-4); }       /* 오른쪽 열은 고정(광고 아닌 목차만 고정; 광고는 흐름 안) */
  .aside .block-nav { flex-direction: column; overflow: visible; }
  .aside .block-nav a { border: 0; border-radius: 0; background: transparent; padding: 6px 0 6px 12px; box-shadow: inset 2px 0 0 var(--color-line); } /* 왼쪽 가는 세로줄 = 목차 길 */
  /* 지금 보는 블록 표시(2026-11-06 운영자 "목차에 아무 표시 없는 게 낫나?" → 표시함): 섹션 색 글자 + 세로줄의 그 칸만 진하게. 고르는 건 사이트 rounds.js(스크롤 위치) */
  .aside .block-nav a[aria-current="true"] { color: var(--color-accent); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-accent); }
  .aside .block-nav a:hover { color: var(--color-ink); }                                       /* 마우스 올리면 진하게 */
  .mobile-only { display: none !important; }
  .status-card .big { font-size: 3rem; }
  .paths { grid-template-columns: repeat(3, 1fr); }
  .section-cards { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(4, 1fr); }
  .hero h1 { font-size: 2.5rem; }
  .form { grid-template-columns: 1fr 1fr; }
  .form .result { grid-column: 1 / -1; }
}
@media (max-width: 959px) { .desktop-only { display: none !important; } }

/* ---------- 응시자격 요약 표: 등급 | 학력 | 또는 | 자격+경력 | 또는 | 경력만 (2026-10-25 운영자: 표 유지, 사이에 '또는') ----------
   글자는 왼쪽 정렬, '또는' 열은 좁게. 한 칸에 여러 길은 줄바꿈. 모바일은 표 가로 스크롤(첫 열 고정) */
table.opts-table th, table.opts-table td { text-align: left; white-space: normal; vertical-align: middle; line-height: 1.5; }
table.opts-table th:first-child, table.opts-table td:first-child { width: 5.5em; font-weight: 700; }
table.opts-table td { min-width: 150px; }
table.opts-table .or-cell { width: 44px; min-width: 44px; text-align: center; padding-left: 0; padding-right: 0; }
table.opts-table th.or-cell { background: var(--color-bg); }  /* 머리글 줄은 색 끊김 없이 한 색으로 (운영자 2026-10-25) */
table.opts-table td.none { color: var(--color-ink-2); text-align: center; }
.or-dot { display: inline-grid; place-items: center; width: 34px; height: 22px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); font-size: 11px; font-weight: 800; }
.data.wrap th, .data.wrap td { white-space: normal; word-break: keep-all; text-align: left; } /* 글이 긴 표(개인정보처리방침): 칸 안에서 줄바꿈해 옆으로 밀지 않아도 다 보이게 */

/* "더 보기" 버튼(2026-11-06 운영자 "더 보기로 통일"): 목록 바로 아래 전체 폭 버튼 하나 — 합격률 표·직업·종목 목록·관련학과 모두 같은 모양, 다 펼치면 "접기" */
.more-years { width: 100%; margin-top: 8px; }

/* 칩 옆 개수·좁은 화면 한 줄 칩(2026-11-06, 그 밖의 자격 분야 칩 등) */
.filters a .n { font-weight: 400; opacity: .7; margin-left: 2px; font-variant-numeric: tabular-nums; } /* 칩 옆 개수는 흐리게 */
@media (max-width: 599px) { .filters.chip-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .filters.chip-scroll::-webkit-scrollbar { display: none; } .filters.chip-scroll a { flex: none; } } /* 좁으면 한 줄 + 옆으로 넘김 */

/* 옆으로 넘기는 칩 줄의 "더 있음" 표시(2026-11-06 UX 점검): 휴대폰에서 칩 줄 오른쪽 끝을 흐리게 — 스크롤바를 숨겨 둬서 더 있는지 몰랐음.
   끝까지 넘기면 마지막 칩이 흐린 자리에 걸리지 않게 오른쪽에 같은 폭만큼 여백 */
@media (max-width: 599px) {
  .filters.chip-scroll, .filters.live-filter, .block-nav, .filters.ef-chips {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    padding-right: 32px;
  }
}
.pop-head > .filters { min-width: 0; max-width: 100%; }                                    /* 제목 옆 칩 줄이 휴대폰에서 옆으로 넘기기 되도록 폭을 부모 안에 가둠 */
.drawer-nav .drawer-sub { font-size: var(--fs-xs); font-weight: 400; color: var(--color-ink-2); margin-left: 4px; } /* 메뉴 "그 밖의 자격" 옆 예시(컴활·SQLD 등) — 무엇이 들어 있는지 한눈에(2026-11-06) */

/* 허브 시안 v2(관심 분야 12개, 2026-11-06): 분야 타일 — 이름 · 종목 수(공단/다른 기관) · 대표 종목 3개 */
.field-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--sp-3); }
.field-tile2 { align-content: start; gap: 4px; }
.field-tile2 .ex { font-size: var(--fs-xs); color: var(--color-ink-2); line-height: 1.5; }

/* 홈 아래 등급별 타일 3개·"모두 보기" 링크 칩(2026-11-07) */
.grid-3 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } /* 등급 타일 3개: 넓으면 한 줄, 좁으면 저절로 줄바꿈 */
.grid-3 > * { min-width: 0; }                                                              /* 긴 이름이 칸을 밀지 않게 */
.filters a.more-link { border-style: dashed; color: var(--color-accent); font-weight: 600; } /* 칩 하나가 아니라 전체 목록으로 가는 링크 — 메뉴 drawer-all과 같은 점선·색 */