/*
Theme Name: PlusMake
Theme URI: https://www.plusmake.co.kr/
Description: 플러스메이크(주) 자식 테마. 현행 사이트 헤더를 재현하되 페이지가 바뀌어도 흔들리지 않게 고정하고, 복원한 원본 HTML 이 화면 전체 폭을 쓰게 한다. 부모는 Astra.
Author: PlusMake
Template: astra
Version: 0.4.1
Text Domain: plusmake
*/

/* ═══════════════════════════════════════════════════════════════
   헤더 — 흔들리지 않는 것이 최우선이다.

   흔들림은 대개 세 군데에서 온다. 셋 다 여기서 막는다.
     ① 현재 항목만 굵게 하면 글자 폭이 변해 메뉴가 통째로 밀린다
        → font-weight 를 전 항목 500 으로 고정한다. 굵기로 구분하지 않는다.
     ② 현재 항목에만 밑줄을 더하면 그 항목만 키가 커진다
        → 전 항목에 투명 밑줄을 미리 깔고 색만 바꾼다.
     ③ 로고가 늦게 떠서 높이가 나중에 잡히면 첫 화면이 한 번 튄다
        → 높이를 CSS 로 못박고 img 에 width·height 를 명시한다.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --pm-blue:#0d6ebd;        /* 현행 헤더 막대색 (화면 기준) */
  --pm-blue-dark:#0a5a9c;
  --pm-h:56px;              /* 헤더 높이 — 어느 페이지에서도 이 값 */
}

.pm-header{
  background:var(--pm-blue);
  color:#fff;
  font-family:"Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  position:sticky; top:0; z-index:9999;
}
.pm-header *{ box-sizing:border-box; }

.pm-bar{
  display:flex; align-items:stretch; gap:18px;
  max-width:1400px; margin:0 auto; padding:0 22px;
  height:var(--pm-h);              /* min-height 가 아니라 height — 늘어날 여지를 준다 */
}

/* ── 브랜드 ── */
.pm-brand{
  display:flex; align-items:center; gap:12px; flex:none;
  text-decoration:none; color:#fff;
}
.pm-brand img{
  display:block; height:26px; width:auto;   /* 비율은 width/height 속성이 잡아준다 */
  /* 원본 PNG 가 이미 배경 투명이다. 흰 타일을 깔지 않고 그대로 배너 위에 올린다.
     로고 글자색(시안 #00B0F0)이 배너(#0d6ebd)와 가까워 대비가 2.13:1 로 낮다 —
     로고는 본문 글자가 아니라 그림이라 WCAG 글자 기준을 그대로 적용할 대상은 아니지만,
     작게 보면 눌려 보인다. 더 또렷하게 하려면 배너를 어둡게 하거나 로고를 흰색으로 뺀다. */
}
.pm-brand span{
  font-size:15px; font-weight:700; letter-spacing:-.01em; white-space:nowrap;
}
.pm-brand:hover span{ text-decoration:underline; }

/* ── 메뉴 ── */
.pm-nav{
  margin-left:auto;
  display:flex; align-items:stretch;
  min-width:0;                      /* 좁아질 때 브랜드를 밀어내지 않게 */
  overflow-x:auto;                  /* 아주 좁으면 메뉴만 가로 스크롤 */
  scrollbar-width:none;
}
.pm-nav::-webkit-scrollbar{ display:none; }

.pm-nav a{
  display:flex; align-items:center;
  padding:0 13px;
  color:#fff; text-decoration:none;
  font-size:13.5px;
  font-weight:500;                  /* ★ 전 항목 동일. 현재 항목도 굵게 하지 않는다 */
  white-space:nowrap;
  border-bottom:3px solid transparent;   /* ★ 전 항목에 미리 깔아 둔다 */
  transition:background-color .12s ease;
}
.pm-nav a:hover{ background:rgba(255,255,255,.12); }
.pm-nav a.is-current{
  border-bottom-color:#fff;         /* ★ 색만 바뀐다. 크기는 그대로다 */
}
.pm-nav a:focus-visible{
  outline:2px solid #fff; outline-offset:-4px;
}

@media (prefers-reduced-motion: reduce){
  .pm-nav a{ transition:none; }
}

/* 좁은 화면 — 회사명을 감추고 메뉴 자리를 넓힌다. 높이는 그대로 둔다. */
@media (max-width:760px){
  .pm-bar{ padding:0 14px; gap:10px; }
  .pm-brand span{ display:none; }
  .pm-nav a{ padding:0 10px; font-size:13px; }
}

/* ── 부모 테마 헤더는 내린다. 우리 헤더 하나만 남긴다. ── */
#masthead.site-header,
.ast-main-header-wrap,
.ast-mobile-header-wrap{ display:none !important; }

/* 관리자 바가 있을 때도 헤더가 가려지지 않게 */
.admin-bar .pm-header{ top:32px; }
@media screen and (max-width:782px){
  .admin-bar .pm-header{ top:46px; }
}


/* ═══════════════════════════════════════════════════════════════
   본문 — 복원한 원본은 화면 전체 폭을 전제로 설계돼 있다.
   부모 테마의 본문 폭 안에 들어가면 6대 플랫폼 인포그래픽 궤도가 겹친다.
   ═══════════════════════════════════════════════════════════════ */
.pm-full{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* 페이지 제목은 복원본 안에 이미 있다. 부모가 위에 또 찍는 것을 없앤다. */
.page .entry-title,
.page .ast-single-post-order,
.page .entry-header{ display:none; }

/* 원본이 자기 배경을 화면 끝까지 칠하도록 부모의 좌우 여백·최대폭을 푼다. */
.page .site-content .ast-container{ max-width:none; padding-left:0; padding-right:0; }
.page #primary{ margin:0; padding:0; }
.page .entry-content{ margin-top:0; }

/* 소식 목록·단일 글은 부모(Astra) 기본값을 그대로 쓴다 — 우리가 만들지 않은 화면이다. */


/* ═══════════════════════════════════════════════════════════════
   플랫폼 카드 — 「핵심 플랫폼」·「학습 플랫폼」 페이지에서 쓴다.
   카드가 몇 개든, 몇 개가 더 늘든 같은 모양으로 붙게 하는 것이 목적이다.
   ═══════════════════════════════════════════════════════════════ */
.pm-grid{
  /* align-items 를 건드리지 않는다. grid 기본값 stretch 라 같은 행의 카드가
     서로 같은 높이가 된다. 본문을 자르지도, 최대 높이를 못박지도 않으면서
     한 줄 안에서 키를 맞추는 가장 단순한 방법이다.
     남는 공간은 배지를 바닥에 붙여(margin-top:auto) 아래로 몰아둔다. */
  display:grid; gap:22px;
  max-width:1160px; margin:0 auto; padding:0 22px;
}
.pm-cols-2{ grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }
.pm-cols-3{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

.pm-card{
  background:#fff; border:1px solid #e4e9f0; border-radius:10px;
  padding:24px 26px 20px;
  display:flex; flex-direction:column; gap:2px;
  box-shadow:0 1px 2px rgba(13,27,62,.04), 0 6px 18px rgba(13,27,62,.05);
}
.pm-code{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:11.5px; font-weight:600; letter-spacing:.12em;
  color:#0d6ebd; text-transform:uppercase;
}
.pm-title{
  font-size:19px; font-weight:800; letter-spacing:-.02em;
  margin:4px 0 0; color:#0d1b3e; line-height:1.35;
}
.pm-sub{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.1em; color:#8494a5;
  text-transform:uppercase; margin-top:5px;
}
.pm-lede{ margin:11px 0 0; font-size:14px; color:#5a6a8a; line-height:1.7; }

.pm-body{ margin-top:12px; font-size:14px; color:#3c4a5c; }
.pm-body ul{ margin:0; padding-left:0; list-style:none; }
.pm-body li{ position:relative; padding-left:16px; margin:7px 0; line-height:1.65; }
.pm-body li::before{
  content:""; position:absolute; left:0; top:10px;
  width:8px; height:2px; border-radius:2px; background:#0d6ebd;
}
.pm-body p{ margin:8px 0; }

.pm-foot{
  margin-top:auto; padding-top:16px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.pm-badge{
  font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px;
  line-height:1.5;
}
.pm-done    { background:#ecfdf3; color:#067647; border:1px solid #bbe7ce; }
.pm-progress{ background:#fffaeb; color:#b54708; border:1px solid #f0d8a8; }
.pm-plan    { background:#eff6ff; color:#0d6ebd; border:1px solid #c3ddf5; }
.pm-fields{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; color:#8494a5; margin-left:auto;
}
.pm-empty{
  max-width:1160px; margin:0 auto; padding:40px 22px;
  color:#5a6a8a; font-size:14.5px;
}

/* ── 플랫폼 페이지 머리 ── */
.pm-page-head{
  max-width:1160px; margin:0 auto; padding:56px 22px 30px;
}
.pm-eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; font-weight:600; letter-spacing:.18em;
  color:#0d6ebd; text-transform:uppercase;
}
.pm-page-title{
  font-size:34px; font-weight:900; letter-spacing:-.03em;
  margin:10px 0 0; color:#0d1b3e;
}
.pm-page-lede{
  margin:12px 0 0; max-width:62ch;
  font-size:15px; color:#5a6a8a; line-height:1.75;
}
@media (max-width:640px){
  .pm-page-head{ padding:36px 16px 22px; }
  .pm-page-title{ font-size:26px; }
  .pm-grid{ padding:0 16px; }
}

/* ── 플랫폼 안내(허브) ── */
.pm-hub{
  display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  max-width:1000px; margin:0 auto; padding:0 22px 70px;
}
.pm-hub-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #e4e9f0; border-radius:12px;
  padding:30px 30px 24px; text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(13,27,62,.04), 0 6px 18px rgba(13,27,62,.05);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pm-hub-card:hover{
  border-color:#0d6ebd;
  box-shadow:0 2px 4px rgba(13,27,62,.06), 0 12px 28px rgba(13,110,189,.14);
  transform:translateY(-2px);
}
.pm-hub-card:focus-visible{ outline:2px solid #0d6ebd; outline-offset:3px; }
.pm-hub-title{
  font-size:24px; font-weight:900; letter-spacing:-.025em;
  margin:9px 0 0; color:#0d1b3e;
}
.pm-hub-desc{ margin:12px 0 0; font-size:14.5px; color:#5a6a8a; line-height:1.75; }
.pm-hub-foot{
  margin-top:auto; padding-top:22px;
  display:flex; align-items:baseline; gap:12px;
}
.pm-hub-count{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:26px; font-weight:600; color:#0d6ebd;
  font-variant-numeric:tabular-nums;
}
.pm-hub-count i{ font-style:normal; font-size:13px; color:#8494a5; margin-left:5px; }
.pm-hub-go{
  margin-left:auto; font-size:13.5px; font-weight:700; color:#0d6ebd;
}
.pm-hub-card:hover .pm-hub-go span{ margin-left:3px; }
@media (prefers-reduced-motion: reduce){
  .pm-hub-card{ transition:none; }
}

/* 카드 전체가 링크라 부모 테마의 링크 밑줄이 카드 안 글자에까지 번진다.
   .entry-content 안이라는 조건을 붙여 부모보다 구체적으로 눌러 준다. */
.entry-content a.pm-hub-card,
.entry-content a.pm-hub-card *{ text-decoration:none; }
.entry-content a.pm-hub-card:hover *{ text-decoration:none; }

/* ═══════════════════════════════════════════════════════════════
   푸터 — 부모 테마 것을 내리고 현행 사이트의 공통 푸터를 쓴다.
   "Powered by Astra WordPress Theme" 크레딧도 여기서 함께 사라진다.
   ═══════════════════════════════════════════════════════════════ */
.site-footer,
.ast-small-footer,
footer.site-footer{ display:none !important; }

.pm-footer{ border-top:1px solid #eef1f6; background:#fff; }
.pm-footer #plusmake-footer-container{ font-family:inherit; }

/* ═══════════════════════════════════════════════════════════════
   인증서 — 텍스트와 실물 스캔을 함께 낸다.
   현행 사이트는 이미지만 걸어 두어 검색엔진이 전혀 읽지 못했다.
   ═══════════════════════════════════════════════════════════════ */
.pm-certs{ background:#f7f9fc; padding:10px 0 70px; }
.pm-cert-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  max-width:1160px; margin:0 auto; padding:0 22px;
}
.pm-cert{
  margin:0; background:#fff; border:1px solid #e4e9f0; border-radius:10px;
  padding:14px 14px 16px; display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(13,27,62,.04);
}
.pm-cert a{ display:block; border:1px solid #eef1f6; border-radius:6px; overflow:hidden; }
.pm-cert img{
  display:block; width:100%; height:auto; aspect-ratio:1/1.35;
  object-fit:contain; background:#fff;
}
.pm-cert figcaption{ display:flex; flex-direction:column; gap:3px; margin-top:12px; }
.pm-cert b{ font-size:13.5px; font-weight:700; color:#0d1b3e; line-height:1.45; }
.pm-cert-no{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:11.5px; color:#0d6ebd; font-variant-numeric:tabular-nums;
}
.pm-cert-by{ font-size:11.5px; color:#8494a5; }
@media (max-width:640px){
  .pm-cert-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); padding:0 16px; gap:14px; }
}

/* ── 홈 상단 태그라인 ──
   현행 사이트가 헤더 바로 아래 두는 문구다. Google Sites 네이티브 위젯이라
   삽입 코드에 없었고 복원본에서도 빠져 있었다.
   Thinking/Acting 은 가늘고 작게, Plus,/Make 는 굵고 크게 — 원본 비율을 따른다. */
.pm-tagline{
  background:#fff; color:#202124; text-align:center;
  padding:52px 20px 46px;
  font-family:"Noto Sans KR",system-ui,-apple-system,sans-serif;
  font-size:clamp(26px,3.4vw,44px);
  font-weight:600; letter-spacing:-.02em; line-height:1.3;
  text-wrap:balance;
}
.pm-tagline .t{ font-size:.76em; font-weight:300; color:#3c4a5c; }
.pm-tagline b{ font-weight:600; }
@media (max-width:640px){ .pm-tagline{ padding:34px 16px 30px; } }