/*
Theme Name: 퇴직일자리 (kdmin)
Theme URI: https://kdmin.com/
Author: 퇴직일자리 운영팀
Description: 60세 전후 퇴직자를 독자로 삼는 취업정보 사이트 전용 테마. 큰 글자·높은 대비·짧은 행폭.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: kdmin
*/

/* ============================================================================
   0. 색 · 치수 토큰
   TASK §5: 원색 2개만 hex로 정의하고 나머지는 color-mix로 파생한다.
   --c1 신뢰감 있는 남색(공공기관 문서에서 익숙한 색), --c2 주의를 끄는 주황.
   본문 대비비 목표 7:1(AAA) — #1a1a1a on #ffffff = 16.1:1.
   ========================================================================== */
:root{
  --c1:#123a6b;                 /* 남색 — 제목·링크·헤더 */
  --c2:#b4460a;                 /* 주황 — 강조·마감임박 */

  --c1-dark:  color-mix(in srgb, var(--c1) 78%, #000);
  --c1-mid:   color-mix(in srgb, var(--c1) 50%, #fff);
  --c1-pale:  color-mix(in srgb, var(--c1) 8%,  #fff);
  --c1-line:  color-mix(in srgb, var(--c1) 22%, #fff);
  --c2-dark:  color-mix(in srgb, var(--c2) 82%, #000);
  --c2-pale:  color-mix(in srgb, var(--c2) 9%,  #fff);

  --ink:#1a1a1a;                /* 본문 — 흰 배경 대비 16.1:1 */
  --ink-2:#41474d;              /* 보조 텍스트 — 대비 9.0:1 */
  --bg:#ffffff;
  --bg-2:#f5f6f8;
  --line:#d3d8de;

  /* §5: 본문 19px 이상, 행간 1.8, h2 28px 이상, h3 23px 이상 */
  --fs-body:19px;
  --fs-h1:34px;
  --fs-h2:28px;
  --fs-h3:23px;
  --lh:1.8;
  --measure:34em;               /* 최대 행폭 — 19px 기준 40자 내외 */
  --tap:48px;                   /* 터치 영역 최소 48px */
  --gap:24px;
  --radius:10px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Noto Sans KR","Nanum Gothic",sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh);
  word-break:keep-all;          /* 한글 단어 중간에서 끊지 않는다 */
  overflow-wrap:break-word;
}

/* 링크 — §5: 색만으로 구분하지 않는다. 밑줄 + 색 동시 표기. */
a{color:var(--c1);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px;}
a:hover,a:focus{color:var(--c2-dark);text-decoration-thickness:3px;}
a:focus-visible{outline:3px solid var(--c2);outline-offset:2px;}

img{max-width:100%;height:auto;}

h1,h2,h3,h4{line-height:1.35;color:var(--c1-dark);margin:0 0 .5em;font-weight:700;}
h1{font-size:var(--fs-h1);letter-spacing:-.02em;}
h2{font-size:var(--fs-h2);font-weight:800;margin-top:1.9em;
   padding-top:.7em;border-top:3px solid var(--c1-line);}
h3{font-size:var(--fs-h3);margin-top:1.5em;color:var(--ink);}
p{margin:0 0 1.15em;}
ul,ol{margin:0 0 1.15em;padding-left:1.35em;}
li{margin-bottom:.5em;}
strong{font-weight:700;color:var(--c1-dark);}

/* ============================================================================
   1. 레이아웃
   ========================================================================== */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
.narrow{max-width:var(--measure);margin-left:auto;margin-right:auto;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--c2);color:#fff;
  padding:12px 18px;text-decoration:none;border-radius:var(--radius);}

/* 헤더 — 장식 최소화(§5). 로고 + 직종 바로가기만. */
.hd{background:var(--c1);color:#fff;border-bottom:5px solid var(--c2);}
.hd__in{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 20px;max-width:1080px;margin:0 auto;flex-wrap:wrap;}
.hd__logo{font-size:26px;font-weight:800;color:#fff;text-decoration:none;
  letter-spacing:-.02em;display:inline-flex;align-items:center;min-height:var(--tap);}
.hd__logo:hover,.hd__logo:focus{color:#fff;text-decoration:underline;}
.hd__tag{font-size:16px;color:color-mix(in srgb,#fff 82%,var(--c1));margin:0;}
.hd strong{color:#fff;}   /* 푸터와 같은 이유 — 어두운 배경 위 strong 보호 */
.hd__nav{display:flex;gap:6px;flex-wrap:wrap;}
.hd__nav a{color:#fff;text-decoration:none;font-size:17px;font-weight:600;
  padding:10px 14px;min-height:var(--tap);display:inline-flex;align-items:center;
  border-radius:var(--radius);border:2px solid color-mix(in srgb,#fff 40%,var(--c1));}
.hd__nav a:hover,.hd__nav a:focus{background:#fff;color:var(--c1-dark);
  text-decoration:underline;}

main{display:block;padding:34px 0 56px;}

/* ============================================================================
   2. 본문(글) — 읽기 화면
   ========================================================================== */
.entry{max-width:var(--measure);margin:0 auto;}
.entry__head{margin-bottom:28px;padding-bottom:20px;border-bottom:3px solid var(--c1-line);}
.entry__head h1{margin-bottom:.35em;}
.entry__meta{font-size:17px;color:var(--ink-2);margin:0;}
.entry__body>*:first-child{margin-top:0;}
.entry__body figure{margin:1.6em 0;}
.entry__body figcaption{font-size:16px;color:var(--ink-2);margin-top:8px;text-align:center;}

/* 이미지 슬롯 — §7: 이미지가 아직 없어도 발행을 멈추지 않는다.
   자리만 예약하고 사용자가 채운다. CLS 0을 위해 비율로 높이를 잡는다. */
.slot{margin:1.7em 0;background:var(--c1-pale);border:2px dashed var(--c1-line);
  border-radius:var(--radius);aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:20px;}
.slot__t{font-size:16px;color:var(--c1);margin:0;font-weight:600;}
.slot img{border-radius:var(--radius);}

/* 요점 상자 — 소제목만 훑는 독자를 위한 요약 */
.box{background:var(--c1-pale);border-left:8px solid var(--c1);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:1.6em 0;}
.box h3,.box h2{margin-top:0;border-top:0;padding-top:0;}
.box>*:last-child{margin-bottom:0;}

.warn{background:var(--c2-pale);border-left:8px solid var(--c2);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:1.6em 0;}
.warn>*:last-child{margin-bottom:0;}
.warn strong{color:var(--c2-dark);}

/* 출처·확인일 — §0 G5: 모든 수치에 확인일을 붙인다 */
.src{margin:2.4em 0 0;padding:20px 22px;background:var(--bg-2);
  border:2px solid var(--line);border-radius:var(--radius);
  font-size:var(--fs-body);          /* §5 본문 19px 기준. 출처도 읽는 글이다. */
  color:var(--ink-2);}
.src h2{font-size:var(--fs-h3);margin:0 0 .6em;border-top:0;padding-top:0;color:var(--ink);}
.src ul{margin-bottom:0;}
.src li{margin-bottom:.4em;}

/* 전화번호 — §5: 60대는 전화로 해결한다. 전부 tel: 링크. */
.tel{display:inline-flex;align-items:center;min-height:var(--tap);
  font-weight:700;white-space:nowrap;}

/* ============================================================================
   3. 표 — §5: 최소화하고 2열 이내. 좁은 화면에서 라벨-값 세로 배치.
   [노하우] .table-wrap의 overflow-x는 sticky thead를 죽인다 → 쓰지 않는다.
   대신 640px 이하에서 행을 카드로 접는다.
   ========================================================================== */
table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:18px;}
caption{text-align:left;font-weight:700;color:var(--ink-2);padding-bottom:8px;font-size:17px;}
th,td{border:2px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;}
thead th{background:var(--c1-pale);color:var(--c1-dark);font-weight:700;}
tbody th{background:var(--bg-2);width:38%;}

@media (max-width:640px){
  table,tbody,tr,td,th{display:block;width:100%;}
  thead{position:absolute;left:-9999px;}
  tr{border:2px solid var(--line);border-radius:var(--radius);
     margin-bottom:14px;padding:4px 0;}
  td,tbody th{border:0;border-bottom:1px solid var(--line);}
  tr>*:last-child{border-bottom:0;}
  td::before{content:attr(data-l);display:block;font-weight:700;
     color:var(--c1-dark);font-size:16px;margin-bottom:2px;}
}

/* ============================================================================
   4. 홈 — ①간판 글 ②지금 지원 가능한 공고 ③직종 9종 큰 카드
   [노하우] 전폭 섹션은 자식 margin으로 만들지 않는다(단축속성이 부모 정렬을
   조용히 덮는다). 여기서는 각 섹션이 스스로 배경을 칠하고 안쪽에서 .wrap을 쓴다.
   ========================================================================== */
.hero{background:var(--c1-pale);border-bottom:3px solid var(--c1-line);
  padding:38px 0 34px;}
.hero__in{max-width:var(--measure);margin:0 auto;padding:0 20px;}
.hero h1{font-size:32px;margin-bottom:.4em;}
.hero p{font-size:20px;margin-bottom:1em;}
.hero .btn{margin-top:6px;}

.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:14px 26px;background:var(--c2);color:#fff;
  font-size:19px;font-weight:700;text-decoration:underline;
  text-underline-offset:3px;border-radius:var(--radius);border:0;}
.btn:hover,.btn:focus{background:var(--c2-dark);color:#fff;}
.btn--ghost{background:#fff;color:var(--c1);border:3px solid var(--c1);}
.btn--ghost:hover,.btn--ghost:focus{background:var(--c1);color:#fff;}

.sec{padding:40px 0;border-bottom:2px solid var(--line);}
.sec:last-of-type{border-bottom:0;}
.sec__h{font-size:var(--fs-h2);font-weight:800;color:var(--c1-dark);
  margin:0 0 .2em;border-top:0;padding-top:0;}
.sec__sub{font-size:18px;color:var(--ink-2);margin:0 0 1.2em;}

/* 직종 카드 — §5: 큰 카드. 터치 영역 넉넉히. */
/* auto-fill minmax(310px,…)는 뷰포트가 310px보다 좁으면 트랙이 넘친다.
   좁은 화면에서는 1열로 접고 트랙을 minmax(0,1fr)로 가둔다(아래 미디어쿼리). */
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));
  list-style:none;margin:0;padding:0;}
.card{min-width:0;}
.card{border:3px solid var(--c1-line);border-radius:var(--radius);
  background:#fff;transition:none;}
.card a{display:block;padding:22px 22px;min-height:var(--tap);
  text-decoration:none;color:var(--c1-dark);height:100%;}
.card a:hover,.card a:focus{background:var(--c1-pale);}
.card__t{display:block;font-size:22px;font-weight:800;margin-bottom:8px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;}
.card__d{display:block;font-size:17px;color:var(--ink-2);line-height:1.65;}

/* 공고 목록 — CLS 0: 동적 영역은 가장 높은 상태보다 큰 예약 높이.
   [노하우] 나중에 삽입되는 자식이 아니라 **실재하는 부모**에 min-height를 건다. */
.jobs{min-height:420px;}
/* [중요] grid 트랙은 기본 min-width:auto라 긴 제목이 트랙을 밀어 넓힌다.
   375px 실측에서 .job이 +92px 넘쳤다(2026-08-25 게이트). minmax(0,1fr)로 트랙을
   가둬야 한다. 자식에만 word-break를 걸면 트랙이 이미 넓어진 뒤라 소용없다. */
.jobs__list{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr);}
.job{border:2px solid var(--line);border-left:8px solid var(--c1);
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 20px;background:#fff;
  min-width:0;overflow-wrap:anywhere;}
.job--closed{border-left-color:var(--line);background:var(--bg-2);}
.job__t{font-size:var(--fs-h3);font-weight:700;margin:0 0 8px;line-height:1.45;
  overflow-wrap:anywhere;}
.job__t a{color:var(--c1-dark);}
/* 기관·접수 마감 — 지원 여부를 가르는 정보(§0 G5)라 본문 크기로 낸다. */
.job__m{font-size:var(--fs-body);color:var(--ink-2);margin:0;}
.job__m b{color:var(--ink);}
.tag{display:inline-block;font-size:15px;font-weight:700;padding:4px 10px;
  border-radius:6px;margin-right:8px;vertical-align:middle;}
/* --c2 원색은 흰 글자 기준 5.50:1 — AA는 넘지만 AAA(7:1)에 못 미친다.
   '모집 중'은 지원 여부를 가르는 표시라 어둡게 눌러 AAA로 올린다(실측 교정 2026-08-26). */
.tag--open{background:var(--c2-dark);color:#fff;}
.tag--closed{background:var(--line);color:var(--ink);}
.tag--soon{background:var(--c2-dark);color:#fff;}

.stale{background:var(--c2-pale);border:3px solid var(--c2);
  border-radius:var(--radius);padding:16px 20px;margin:0 0 18px;font-size:18px;}
.stale strong{color:var(--c2-dark);}

.note{font-size:17px;color:var(--ink-2);margin-top:16px;}

/* ============================================================================
   5. 목록(index/archive)
   ========================================================================== */
.list{list-style:none;margin:0;padding:0;display:grid;gap:20px;}
.list__it{border-bottom:2px solid var(--line);padding-bottom:20px;}
.list__it h2{font-size:24px;margin:0 0 .35em;border-top:0;padding-top:0;}
.list__ex{font-size:18px;color:var(--ink-2);margin:0;}

/* ============================================================================
   6. 푸터
   ========================================================================== */
.ft{background:var(--c1-dark);color:color-mix(in srgb,#fff 88%,var(--c1));
  padding:34px 0;font-size:17px;line-height:1.75;}
.ft a{color:#fff;}
/* [중요] 전역 strong 규칙이 color:var(--c1-dark)라 어두운 푸터에서
   글자와 배경이 같은 색이 된다(실측 1.00:1 — 사실상 안 보임).
   어두운 배경 위에서는 상속색을 되돌려야 한다. 게이트가 잡았다(2026-08-25). */
.ft strong{color:#fff;}
.ft__nav{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px;padding:0;list-style:none;}
.ft__nav a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;}
.ft p{margin:0 0 .6em;}
.ft__dis{color:color-mix(in srgb,#fff 72%,var(--c1));font-size:16px;}

/* ============================================================================
   7. 좁은 화면 — §6 게이트: 375px 가로 스크롤 0
   ========================================================================== */
@media (max-width:760px){
  /* [중요 — 되돌리지 말 것] 좁은 화면에서 h2·h3를 줄이지 않는다.
     §5 기준(h2 28px↑ / h3 23px↑)은 60대 독자용이고, 모바일이야말로
     그 기준이 가장 필요한 화면이다. 예전엔 여기서 25/21px로 줄여
     375px 실측에서 h2 210건·h3 299건이 전건 기준 미달이었다.
     h1만 줄인다 — §5는 h1에 하한을 두지 않는다. */
  :root{--fs-h1:28px;}
  .hd__in{padding:12px 16px;}
  .hd__nav{width:100%;}
  .hd__nav a{font-size:16px;padding:9px 12px;}
  .wrap{padding:0 16px;}
  .hero{padding:28px 0;}
  .hero__in{padding:0 16px;}
  .hero h1{font-size:27px;}
  .hero p{font-size:19px;}
  .cards{grid-template-columns:minmax(0,1fr);}
  main{padding:24px 0 44px;}
}

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

/* 인쇄 — 60대 독자는 출력해서 본다 */
@media print{
  .hd,.ft,.slot,.hd__nav{display:none;}
  body{font-size:12pt;color:#000;}
  a{color:#000;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;}
}