/* ===== company.news-s.kr: 헤럴드 코퍼레이트 레이아웃 문법 + 뉴스S 브랜드 ===== */
:root{
  /* 대비 토큰: 키컬러 한 벌로는 밝은 바탕·어두운 바탕을 모두 만족시킬 수 없다(수원일보 공용 규칙).
     --key       : 브랜드 면색(로고 타일·카드 배경 등 '글자가 아닌' 곳)
     --key-text  : 밝은 바탕 위 키컬러 '글자'(#f2224a 은 흰 바탕에서 4.12 로 AA 미달)
     --key-on-dark: 어두운 바탕 위 키컬러 글자
     --ink-4     : 흐린 글자(#999 는 흰 바탕에서 2.85 로 AA 미달) */
  --key:#f2224a;
  --key-text:#c8143a;
  --key-on-dark:#ff5c78;
  --ink:#111417;
  --ink-2:#333;
  --ink-3:#666;
  --ink-4:#6b7079;
  --line:#f1f1f1;
  --line-2:#e5e8ec;
  --paper:#f5f5f5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);background:#fff;line-height:1.6;word-break:keep-all;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;border:0}
ul,ol,dl,dd,dt,li,h1,h2,h3,h4,p,figure{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--key-text);outline-offset:3px}
/* 어두운 바탕(히어로·투명 헤더·다크 밴드) 위에서는 빨간 링이 묻힌다 → 흰 링 + 어두운 그림자로 분리 */
.hero :focus-visible,.band :focus-visible,.introbg :focus-visible,.drawer :focus-visible,
.hcta :focus-visible,.pool :focus-visible,.hdr:not(.solid) :focus-visible{
  outline-color:#fff;box-shadow:0 0 0 4px rgba(0,0,0,.55)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:#fff;color:var(--ink);padding:12px 18px;font-weight:700}
.skip:focus{left:0}
.m{display:none}
@media (max-width:1039px){.pc{display:none}.m{display:block}}

/* ── 고정 헤더 (헤럴드 .header_bg/.header 실측) ── */
.hdr{position:fixed;inset:0 0 auto;z-index:30;background:transparent;transition:background .2s,box-shadow .2s}
/* 사진 배너는 상단이 밝을 수 있다. 헤더 뒤에 항상 어두운 스크림을 깔아 흰 글씨 대비를 보장한다.
   흰 헤더로 바뀌면(.solid) 스크림은 사라진다. */
.hdr::before{content:"";position:absolute;inset:0 0 -90px;pointer-events:none;transition:opacity .2s;
  background:linear-gradient(180deg,rgba(6,7,9,.62) 0%,rgba(6,7,9,.34) 40%,rgba(6,7,9,.10) 72%,rgba(6,7,9,0) 100%)}
.hdr.solid::before{opacity:0}
/* 히어로·배너가 없는 문서(채용 상세)는 스크립트 없이도 흰 헤더가 되도록 본문에서 여백을 준다 */
body.bare .hdr{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)}
body.bare .hdr::before{opacity:0}
body.bare .lg-w{fill:var(--ink)}
body.bare .gnb>li>a,body.bare .home a{color:var(--ink)}
body.bare .home a{color:var(--ink-4)}
body.bare .burger span{background:var(--ink)}
.hdr-in{position:relative;height:130px;width:1040px;margin:0 auto;transition:height .2s}
.logo{display:block;float:left;margin:44px 0 0 10px;width:132px;height:27px;
  transition:margin .2s,width .2s,height .2s}   /* transition:all 이면 포커스 링(outline)까지 늦게 뜬다 */
.logo svg{width:100%;height:100%;display:block;overflow:visible}
.lg-tile{fill:#f2224a}
.lg-s{fill:#fff}
.lg-w{fill:#fff}
.logo .sr{position:absolute;left:-9999px}
.home{position:absolute;right:0;top:0;margin:30px 12px 0 0;font-size:12px;font-weight:500;letter-spacing:.01em}
.home a{color:rgba(255,255,255,.62);transition:color .2s}
.home a:hover{color:#fff}
.gnb{float:right;margin-top:48px}
.gnb>li{float:left;position:relative}
.gnb>li>a{display:inline-block;font-size:16px;font-weight:600;letter-spacing:-.02em;padding:10px 14px;color:#fff;transition:color .2s}
.gnb .drop{position:absolute;left:5px;top:100%;display:none;white-space:nowrap;padding-top:2px}
.gnb>li:hover .drop,.gnb>li:focus-within .drop{display:block}
.gnb .drop a{display:block;float:left;font-size:14px;font-weight:500;padding:4px 8px;color:rgba(255,255,255,.85);transition:color .2s}
.gnb .drop a:hover,.gnb .drop a.on,.gnb>li>a.on{color:var(--key-on-dark)}
/* 스크롤 시 흰 헤더로 전환 */
.hdr.solid{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.hdr.solid .hdr-in{height:84px}
.hdr.solid .logo{margin-top:29px}
.hdr.solid .lg-s{fill:#fff}
.hdr.solid .lg-w{fill:var(--ink)}
.hdr.solid .home{margin-top:22px}
.hdr.solid .home a{color:var(--ink-4)}
.hdr.solid .home a:hover{color:var(--ink)}
.hdr.solid .gnb{margin-top:26px}
.hdr.solid .gnb>li>a{color:var(--ink)}
.hdr.solid .gnb .drop{background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.10);padding:6px 4px;border-radius:4px}
.hdr.solid .gnb .drop a{color:var(--ink-3)}
.hdr.solid .gnb .drop a:hover,.hdr.solid .gnb .drop a.on,.hdr.solid .gnb>li>a.on{color:var(--key-text)}
/* 모바일 토글·드로어 */
.burger,.drawer{display:none}
@media (max-width:1039px){
  .hdr-in{height:64px;width:100%}
  .hdr.solid .hdr-in{height:64px}
  .logo{float:none;margin:19px auto 0;width:110px;height:23px}
  .hdr.solid .logo{margin-top:19px}
  .home{margin:23px 18px 0 0;font-size:11px}
  .hdr.solid .home{margin-top:23px}
  .gnb{display:none}
  .burger{display:block;position:absolute;left:16px;top:19px;width:26px;height:26px;padding:0;z-index:2}
  .burger span{display:block;width:22px;height:1.5px;margin:5px auto;background:rgba(255,255,255,.85);border-radius:2px;
    transition:transform .22s cubic-bezier(.68,-.4,.27,1.4),opacity .18s}
  .hdr.solid .burger span{background:var(--ink)}
  .burger[aria-expanded="true"] span{background:#fff}
  .burger[aria-expanded="true"] .b1{transform:translateY(6.5px) rotate(45deg)}
  .burger[aria-expanded="true"] .b2{opacity:0}
  .burger[aria-expanded="true"] .b3{transform:translateY(-6.5px) rotate(-45deg)}
  .drawer{display:block;position:fixed;inset:0;z-index:29;background:rgba(8,9,11,.96);padding:88px 24px 40px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;color:#fff;opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
  .drawer.open{opacity:1;visibility:visible}
  .drawer dt{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--key-on-dark);
    border-bottom:1px solid rgba(255,255,255,.12)}
  .drawer dt a{display:block;padding:14px 4px}
  .drawer dd a{display:block;padding:11px 4px 11px 16px;font-size:15px;font-weight:400;color:rgba(255,255,255,.82)}
  .drawer .dw-home{display:inline-block;margin-top:26px;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:9px 18px}
  body.locked{overflow:hidden}
}

/* ── 홈 히어로: 사진 대신 '하루 한 점' 격자 (2026-09-03 사용자 결정) ──
   배경의 점 하나가 발행일 하루다. 창간일(1989-09-30)부터 오늘까지를 날짜 수만큼 캔버스에 찍고
   마지막 줄은 오늘 자리에서 끊긴다. 문장이 주장하는 것을 배경이 세어 보이는 구조라
   숫자를 박아 두지 않고 열 때마다 다시 계산한다(HERO_JS).
   스크립트가 막히면 캔버스는 빈 채로 남고 제목·부제는 그대로 읽힌다. 대비는 바탕색이 보장한다. */
.hero{position:relative;width:100%;height:100vh;min-height:560px;overflow:hidden;background:#0a0c0f}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* 점 위에 얹히는 제목의 대비를 확보하는 베일: 가운데가 진하고 가장자리는 점이 드러난다 */
.hero .veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(56% 60% at 50% 48%,rgba(8,10,13,.80) 0%,rgba(8,10,13,.56) 48%,rgba(8,10,13,.06) 100%)}
.hero-in{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;height:100%;
  text-align:center;color:#fff;padding:0 24px}
.hero h1{font-size:72px;font-weight:800;letter-spacing:-.055em;line-height:1.17;margin:0}
.hero h1 .dot{color:var(--key-on-dark)}
.hero .sub{margin:24px auto 0;max-width:600px;font-size:16px;font-weight:300;line-height:1.85;color:rgba(255,255,255,.8)}
/* 점 격자가 무엇인지 알려 주는 줄. 이 줄이 없으면 배경은 그냥 무늬로 읽힌다. */
.hero .count{position:absolute;left:0;right:0;bottom:112px;z-index:3;text-align:center;font-size:12px;
  font-weight:400;letter-spacing:.06em;color:rgba(255,255,255,.72);
  text-shadow:0 0 10px rgba(8,10,13,.95),0 0 4px rgba(8,10,13,.95)}
.hero .count b{font-weight:600;color:var(--key-on-dark);font-variant-numeric:tabular-nums}
.hero .down{position:absolute;left:50%;bottom:34px;z-index:3;transform:translateX(-50%);
  color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.14em;font-weight:500}
.hero .down::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:rgba(255,255,255,.35)}
@media (max-width:1039px){
  .hero h1{font-size:46px}
  .hero .sub{font-size:15px}
  .hero .count{bottom:104px;font-size:12px}
}
@media (max-width:480px){
  .hero h1{font-size:30px;letter-spacing:-.045em}
  .hero .sub{font-size:14px;line-height:1.8}
  .hero .count{bottom:112px;font-size:11px;letter-spacing:.03em;padding:0 34px;line-height:1.75}
}

/* ── 서브 페이지 상단 띠 (헤럴드 .sub_top_*) ── */
.band{position:relative;width:100%;padding:130px 0 40px;background:#0b0d10 center center/cover no-repeat}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,9,.42) 0%,rgba(6,7,9,.10) 55%,rgba(6,7,9,.28) 100%)}
.band-in{position:relative;z-index:1;width:1020px;margin:0 auto;padding:8px 0}
.band h1{font-size:30px;font-weight:700;letter-spacing:-.035em;color:#fff;line-height:1.35}
.band p{margin-top:8px;font-size:15px;font-weight:300;color:rgba(255,255,255,.72);letter-spacing:-.01em}
@media (max-width:1039px){
  .band{padding:64px 0 18px}
  .band-in{width:auto;margin:0 24px;padding:22px 0 4px}
  .band h1{font-size:22px}
  .band p{font-size:13px;margin-top:6px}
}

/* ── 본문 컨테이너 ── */
.wrap{width:1020px;margin:0 auto}
.sec{padding:64px 0}
.sec-lead{font-size:18px;line-height:1.78;font-weight:300;color:var(--ink-2);letter-spacing:-.015em}
.sec-lead b{font-weight:600;color:var(--ink)}
.sec-lead+.sec-lead{margin-top:20px}
h2.t{font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1.4;margin:0 0 22px}
h2.t small{display:block;margin-top:7px;font-size:14px;font-weight:500;color:var(--ink-4);letter-spacing:.02em}
h3.t3{font-size:18px;font-weight:700;letter-spacing:-.025em;line-height:1.55}
.center-tit{font-size:27px;line-height:1.5;font-weight:600;text-align:center;letter-spacing:-.05em;
  padding:48px 0 56px;word-break:keep-all}
.rule{height:1px;background:var(--line-2);border:0;margin:0}
@media (max-width:1039px){
  .wrap{width:auto;margin:0 24px}
  .sec{padding:38px 0}
  .sec-lead{font-size:16px;line-height:1.75}
  h2.t{font-size:20px;margin-bottom:16px}
  .center-tit{font-size:18px;letter-spacing:-.035em;padding:32px 0 26px}
}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:4px;
  padding:11px 22px;font-size:15px;font-weight:600;letter-spacing:-.02em;transition:.15s}
.btn:hover{border-color:var(--ink);}
.btn-key{background:var(--key-text);border-color:var(--key-text);color:#fff}
.btn-key:hover{filter:brightness(.9);border-color:transparent}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ── 푸터 (헤럴드 .footer) ── */
.ftr{border-top:1px solid var(--line);padding:38px 0 56px;text-align:center;color:var(--ink-4);
  font-size:12px;font-weight:400;line-height:1.9}
.ftr .fl{display:flex;justify-content:center;flex-wrap:wrap;gap:0 18px;margin-bottom:14px}
.ftr .fl a{font-size:13px;font-weight:600;color:var(--ink-3)}
.ftr .fl a:hover{color:var(--key-text)}
.ftr .fm{display:inline-block;vertical-align:-3px;width:62px;height:13px;margin-right:7px}
.ftr .fm svg{width:100%;height:100%;display:block;overflow:visible}
.ftr .fm .lg-w{fill:var(--ink-4)}
.ftr .fm .lg-tile{fill:var(--ink-4)}
.ftr .fm .lg-s{fill:#fff}
.ftr .legal{margin-bottom:8px;font-size:12px;line-height:1.85;color:var(--ink-4);letter-spacing:-.01em}
.ftr .legal a{color:var(--ink-4)}
.ftr .legal a:hover{color:var(--key-text)}
.ftr .cr{letter-spacing:-.01em}
/* 모션 최소화 설정(prefers-reduced-motion)을 켠 사용자에게는 움직임을 빼고 상태 변화만 남긴다 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .fam a:hover,.entry a:hover,.pcards a:hover{transform:none!important}
}
@media (max-width:1039px){
  .ftr{padding:26px 20px 32px;font-size:11px}
  .ftr .fl{gap:0 12px}
  .ftr .fl a{font-size:12px}
  .ftr .legal{font-size:11px;line-height:1.8}
}