/* 시장경제(meconomynews.com)식 지면 (대표 10/17 "메인, 서브, 각 페이지 스타일 변경") 흰 바탕 · 카드 상자 없이 선으로 나눔 · 묶음 제목 위 검은 굵은 선 · 가운데 큰 로고 · 메뉴 줄 · 남색 기획 띠. site.css 뒤에 읽는다 — 이 파일만 빼면 예전 모습으로 돌아간다. 관리자 화면(.is-admin)은 손대지 않는다. */ .mh-date,.mh-sns,.mh-sub{display:none} /* 머리(날짜·로고·SNS·메뉴 줄·군청 띠)는 메인·서브 모두, 본문 카드·꼬리 사이트맵은 메인만 (대표 10/19 "서브도 상단 메뉴바 반영") */ body.is-front{--bg:#fff;--rule:#E5E5E5;background:#fff} body:not(.is-admin) .mh-date,body:not(.is-admin) .mh-sns,body:not(.is-admin) .mh-sub{display:none} /* ── 본문 판: 회색 바탕 위 흰 판 → 흰 바탕 그대로 ── */ body.is-front main.wrap{background:none;border:0;margin:0 auto 40px;padding:24px 20px 48px} body.is-front .card,body.is-front .stages,body.is-front .tools-grid,body.is-front .notice-line{background:none;border:0;border-radius:0;box-shadow:none} /* ── 묶음 제목: 위 검은 2px 선 + 굵은 제목 + › ── */ body.is-front .panel-h,body.is-front .sect-head,body.is-front .sec-col>h3,body.is-front .series>h3{border-top:2px solid #111;border-bottom:0;padding:12px 0 10px;margin:0 0 4px;font-size:18px;font-weight:800;color:#111;background:none} body.is-front .sect-head h2{font-size:18px;font-weight:800;margin:0} body.is-front .sec-col>h3 a::after,body.is-front .series>h3 a::after,body.is-front .notice-box .panel-h a::after{content:" ›";font-weight:400} body.is-front .panel-h svg,body.is-front .sect-head svg,body.is-front .sec-col>h3 svg,body.is-front .series>h3 svg,body.is-front .list-head svg{display:none} /* 목록 줄: 아래 옅은 선 */ body.is-front .rk-list>li{border-bottom:1px solid var(--rule)} body.is-front .rk-list>li:last-child{border-bottom:0} body.is-front .rk-t{font-weight:600;color:#222} body.is-front .rk-n{color:#111;font-weight:800} /* ── 톱 묶음 ── */ body.is-front .front{padding:0;margin-bottom:28px} body.is-front .front-lead h2{font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1.3} body.is-front .front-sum{color:#666;font-size:15px;line-height:1.7} body.is-front .front-rel li{color:#555} body.is-front .front-tile h3{font-weight:700;font-size:17px} /* ── 섹션 목록 ── */ body.is-front .list-head{border-bottom:1px solid #111;padding-bottom:12px;margin-bottom:6px;align-items:baseline} body.is-front .list-head h1{font-size:24px;font-weight:800} body.is-front .list-head .count{color:#888;font-size:14px} body.is-front .row{border-bottom:1px solid var(--rule);padding:20px 0} body.is-front .row h2{font-size:19px;font-weight:700;color:#111} body.is-front .row p{color:#777;font-size:14.5px;line-height:1.65} body.is-front .row .meta{color:#999;font-size:13px} body.is-front .pager b{background:#111;color:#fff} /* ── 기사: 섹션 경로 파랑 · 큰 제목 · 회색 줄 ── */ body.is-front .crumb,body.is-front .crumb-sec{color:#2C5BB8;font-weight:700} body.is-front .article h1{font-size:34px;font-weight:800;letter-spacing:-.6px;line-height:1.32;color:#111} body.is-front .article .subtitle{color:#333;border-left:0;padding-left:0;font-weight:500} body.is-front .article .reporter{border-top:0;border-bottom:1px solid #ddd} /* 기사 화면 카드 상자 없애기 — 본문·기자·공유·댓글·하단 묶음은 선으로, 오른쪽 기둥은 위 검은 선 */ body.is-front .article,body.is-front .share,body.is-front .comments,body.is-front .bottom-block,body.is-front .cp-box,body.is-front .qa-box,body.is-front main>section,body.is-front .ev-box,body.is-front .art-tools,body.is-front nav.tools{border:0;border-radius:0;box-shadow:none;background:none} body.is-front .article{padding-left:0;padding-right:0} body.is-front .rep-box{border:0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;border-radius:0;background:none} body.is-front .share,body.is-front .comments,body.is-front .bottom-block,body.is-front .cp-box,body.is-front .qa-box{border-top:2px solid #111;padding-left:0;padding-right:0} body.is-front .rail-col,body.is-front .rail-photo{border:0;border-top:2px solid #111;border-radius:0;background:none;box-shadow:none;padding-left:0;padding-right:0} /* ═════════ PC (1024px~): 3단 머리 ═════════ */ @media (min-width:1024px){ body:not(.is-admin) .masthead{position:sticky;top:-104px;border-bottom:0} body:not(.is-admin) .masthead>.wrap{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"date logo sns" "nav nav nav";align-items:center;min-height:0;gap:0;padding-top:0;padding-bottom:0} body:not(.is-admin) .mh-date{display:block;grid-area:date;margin:0;color:#888;font-size:13px} body:not(.is-admin) .masthead .logo{grid-area:logo;justify-self:center;padding:22px 0 18px} body:not(.is-admin) .masthead .logo img{height:62px} body:not(.is-admin) .mh-sns{display:flex;grid-area:sns;justify-self:end;gap:8px} body:not(.is-admin) .mh-sns a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#555;color:#fff} body:not(.is-admin) .mh-sns a:hover{background:var(--navy)} body:not(.is-admin) .mh-sns svg{width:17px;height:17px;fill:currentColor} /* 메뉴 줄: 위아래 선, 왼쪽 햄버거 · 가운데 섹션 · 오른쪽 AI 검색 */ body:not(.is-admin) .masthead .burger{display:grid;grid-area:nav;justify-self:start;place-items:center;width:40px;height:44px;border:0;background:none;cursor:pointer;z-index:1} body:not(.is-admin) .masthead .burger svg{width:22px;height:22px;stroke:#111;stroke-width:2;fill:none} body:not(.is-admin) .secnav{grid-area:nav;justify-self:center;margin:0;align-self:center;height:46px} body:not(.is-admin) .secnav a{font-size:16px;font-weight:700;padding:0 14px;color:#111} body:not(.is-admin) .secnav a:hover,body:not(.is-admin) .secnav a[aria-current="page"]{color:var(--red-text);box-shadow:none} body:not(.is-admin) .masthead .search{grid-area:nav;justify-self:end;height:34px;z-index:1} body:not(.is-admin) .masthead>.wrap::after{content:"";grid-area:nav;align-self:stretch;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin:0 calc(50% - 50vw);pointer-events:none} body:not(.is-admin) .secnav a+a::before{display:none} /* 남색 기획 띠 */ body:not(.is-admin) .mh-sub{display:block;background:#253272;color:#fff} body:not(.is-admin) .mh-sub .wrap{display:flex;align-items:center;height:40px;gap:0;overflow:hidden} body:not(.is-admin) .mh-sub a{font-size:14px;font-weight:700;padding:0 14px;white-space:nowrap;color:#fff;opacity:.95} body:not(.is-admin) .mh-sub a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px} body:not(.is-admin) .mh-sub>.wrap>a:first-child{padding-left:0} body:not(.is-admin) .mh-sub>.wrap>a+a{border-left:1px solid rgba(255,255,255,.28)} body:not(.is-admin) .mh-sub-r{margin-left:auto;display:flex} body:not(.is-admin) .mh-sub-r a{font-weight:500;font-size:13.5px} html{scroll-padding-top:110px} } /* 꼬리 위 사이트맵 (메인) — 시장경제식: 흰 바탕, 분야 제목 + 하위 글자 목록 */ .f-map{display:none} body.is-front .f-map{display:block;background:#fff;border-top:1px solid #ddd;padding:34px 0 26px} body.is-front .f-map .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 20px} body.is-front .f-map-col a{display:block;font-size:13.5px;color:#666;padding:3px 0} body.is-front .f-map-col a.f-map-h{font-size:15px;font-weight:800;color:#111;margin-bottom:6px} body.is-front .f-map-col a:hover{color:var(--red-text)} @media (max-width:640px){body.is-front .f-map{padding:20px 0}body.is-front .f-map .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}} /* 메인 — 시장경제식 그대로, 바탕만 회색 + 각 묶음을 흰 카드로 (대표 10/19) */ body.is-front{--bg:#EEF0F4;background:#EEF0F4} body:not(.is-admin) .masthead,body:not(.is-admin) .masthead>.wrap{background:#fff} body.is-front main.wrap{padding-top:18px} body.is-front .card,body.is-front .notice-line{background:#fff;border:1px solid #E2E5EC;border-radius:0;padding:18px 22px} body.is-front .front.card{padding:22px} body.is-front .sect{background:#fff;border:1px solid #E2E5EC;padding:18px 22px;margin-top:14px} body.is-front .sec-col.card,body.is-front .series.card{border:1px solid #E2E5EC;padding:16px 18px} body.is-front .sec-grid,body.is-front .series-grid{gap:14px} body.is-front .stages,body.is-front .tools-grid{background:#fff;border:1px solid #E2E5EC;padding:16px 22px;margin-top:14px} body.is-front .ev-box{background:#fff;margin-top:14px} body.is-front .panel-h{border-top:0;padding-top:0;border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:6px} @media (max-width:640px){body.is-front main.wrap{padding-left:0;padding-right:0}body.is-front .card,body.is-front .sect,body.is-front .stages,body.is-front .tools-grid{border-left:0;border-right:0;padding:16px}} /* 군청 기획 띠 높이 줄임 40 → 30px (대표 10/19) */ body:not(.is-admin) .masthead .mh-sub .wrap{height:30px;min-height:0} /* 머리 .wrap 의 min-height:72px 가 띠에도 걸려 있었다 */ body:not(.is-admin) .mh-sub a{font-size:13px} /* 꼬리 위 분야 사이트맵 — 한 줄로 납작하게 (대표 10/19 "세로 줄여줘") */ body.is-front .f-map{padding:14px 0} body.is-front .f-map .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px} body.is-front .f-map-col a:not(.f-map-h){display:none} body.is-front .f-map-col a.f-map-h{margin:0;padding:4px 0;font-size:14.5px} @media (max-width:640px){body.is-front .f-map .wrap{justify-content:flex-start;gap:4px 16px}} /* 분야 사이트맵 — 가운데 정렬, 사이에 ㅣ (대표 10/19 "가운데 Bar ㅣ") */ body.is-front .f-map .wrap{justify-content:center;gap:6px 0} body.is-front .f-map-col+.f-map-col::before{content:"ㅣ";color:#C5CAD6;margin:0 14px;font-size:14px} body.is-front .f-map-col{display:flex;align-items:center} body.is-front .f-map-col a.f-map-h{font-weight:700} @media (max-width:640px){body.is-front .f-map .wrap{justify-content:center}body.is-front .f-map-col+.f-map-col::before{margin:0 8px}} /* 머리 오른쪽 위 라플 배너 — 이미지처럼 보이는 글자 광고 (대표 10/19) */ .mh-lapl{display:none} @media (min-width:1024px){ body:not(.is-admin) .mh-lapl{grid-area:sns;justify-self:end;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:12px;background:linear-gradient(135deg,#FFF1E8,#FFE0CF);border:1px solid #F7C9AE;color:#3A1F12;max-width:300px} body:not(.is-admin) .mh-lapl img{width:34px;height:34px;flex:none} body:not(.is-admin) .mh-lapl strong{display:block;font-size:15px;font-weight:800;line-height:1.25;color:#C2410C} body:not(.is-admin) .mh-lapl em{display:block;font-style:normal;font-size:12px;color:#7A4A33;margin-top:1px} body:not(.is-admin) .mh-lapl:hover{filter:brightness(.98);box-shadow:0 2px 8px rgba(242,101,50,.18)} } /* 묶음 제목 굵은 선 — 제목 위가 아니라 아래로, 모든 묶음 공통 (대표 10/19) */ body:not(.is-admin) .panel-h,body:not(.is-admin) .sect-head,body:not(.is-admin) .sec-col>h3,body:not(.is-admin) .series>h3{border-top:0!important;border-bottom:2px solid #111;padding-top:0;padding-bottom:10px;margin-bottom:8px} /* 왼쪽 위: 날짜 옆 라플 글자 광고 한 줄(배경 없이) · 오른쪽 위: 회색 원 SNS (대표 10/19) */ @media (min-width:1024px){ body:not(.is-admin) .mh-date{display:flex;align-items:center;gap:14px;white-space:nowrap} body:not(.is-admin) .mh-date .mh-lapl{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;border-radius:0;background:none;max-width:none;box-shadow:none;filter:none} body:not(.is-admin) .mh-date .mh-lapl img{width:18px;height:18px} body:not(.is-admin) .mh-date .mh-lapl span{display:inline} body:not(.is-admin) .mh-date .mh-lapl strong{display:inline;font-size:13.5px;font-weight:800;color:#C2410C} body:not(.is-admin) .mh-date .mh-lapl em{display:inline;font-size:12.5px;color:#7A4A33;margin:0 0 0 6px} body:not(.is-admin) .mh-date .mh-lapl:hover strong{text-decoration:underline;text-underline-offset:3px} body:not(.is-admin) .mh-sns{display:flex;grid-area:sns;justify-self:end;gap:8px} body:not(.is-admin) .mh-sns a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#6E7480;color:#fff} body:not(.is-admin) .mh-sns a:hover{background:var(--navy)} body:not(.is-admin) .mh-sns svg{width:18px;height:18px;fill:currentColor} } /* 머리 SNS 더 크게 (대표 10/19) · Q&A 목록 오른쪽 칸 없음 */ @media (min-width:1024px){ body:not(.is-admin) .mh-sns{gap:10px} body:not(.is-admin) .mh-sns a{width:40px;height:40px} body:not(.is-admin) .mh-sns svg{width:24px;height:24px} } .article-page.qa-norail{grid-template-columns:minmax(0,1fr)!important} /* 왼쪽 위 라플 질문 한 줄 — 아이콘 + 질문, 글자 검정 80% (대표 10/19) */ @media (min-width:1024px){ body:not(.is-admin) .mh-date .mh-lapl{gap:8px} body:not(.is-admin) .mh-date .mh-lapl img{width:22px;height:22px} body:not(.is-admin) .mh-date .mh-lapl strong{font-size:15px;font-weight:700;color:rgba(0,0,0,.8);letter-spacing:-.2px} } /* 왼쪽 위 질문 앞 아이콘 말풍선으로 통일 (대표 10/19) */ @media (min-width:1024px){body:not(.is-admin) .mh-date .mh-bub{width:22px;height:22px;flex:none;fill:#F26532}} /* 머리 SNS 한 단계 작게 — 34px (대표 10/19 "너무 커") */ @media (min-width:1024px){body:not(.is-admin) .mh-sns{gap:8px}body:not(.is-admin) .mh-sns a{width:34px;height:34px}body:not(.is-admin) .mh-sns svg{width:20px;height:20px}} /* 머리 SNS — 참고 그림 크기·모양 (회색 원 30px, 흰 로고, 간격 6px) (대표 10/19) */ @media (min-width:1024px){ body:not(.is-admin) .mh-sns{gap:6px} body:not(.is-admin) .mh-sns a{width:30px;height:30px;background:#6B717E} body:not(.is-admin) .mh-sns svg{width:18px;height:18px} } /* 왼쪽 질문·오른쪽 SNS — 메뉴 막대 바로 위로 (대표 10/19 "bar 바로 위쪽으로") */ @media (min-width:1024px){body:not(.is-admin) .mh-date,body:not(.is-admin) .mh-sns{align-self:end;margin-bottom:10px}} /* 말풍선 꼬리가 글자 쪽(오른쪽)을 보게 (대표 10/19) */ @media (min-width:1024px){body:not(.is-admin) .mh-date .mh-bub{transform:scaleX(-1)}} /* 말풍선 — 네모 테두리 + 입력 중 말줄임표 모션 (대표 10/19 참고 그림) */ @media (min-width:1024px){ body:not(.is-admin) .mh-date .mh-bub{width:24px;height:24px;transform:none;fill:none;overflow:visible} body:not(.is-admin) .mh-date .mh-bub .bb{fill:none;stroke:rgba(0,0,0,.8);stroke-width:1.8;stroke-linejoin:round} body:not(.is-admin) .mh-date .mh-bub circle{fill:rgba(0,0,0,.8);animation:mhType 1.2s ease-in-out infinite} body:not(.is-admin) .mh-date .mh-bub .d2{animation-delay:.15s} body:not(.is-admin) .mh-date .mh-bub .d3{animation-delay:.3s} } @keyframes mhType{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-1.5px)}} @media (prefers-reduced-motion:reduce){body:not(.is-admin) .mh-date .mh-bub circle{animation:none;opacity:1}} /* 군청 막대 오른쪽 메뉴 — 아이콘 + ㅣ 구분 (대표 10/19) */ .mh-sub-r{display:flex;align-items:center} .mh-sub-r a{display:inline-flex;align-items:center;gap:5px} .mh-sub-r a svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .mh-sub-r .sep{color:rgba(255,255,255,.35);margin:0 10px;font-size:12px} .mh-sub-r a{padding:0!important;border:0!important} /* 군청 막대 오른쪽(육아비서~회원가입) — 오렌지 투톤, 오른쪽 끝까지 (대표 10/19) */ @media (min-width:1024px){ body:not(.is-admin) .mh-sub{overflow:hidden} body:not(.is-admin) .masthead .mh-sub .wrap{overflow:visible} body:not(.is-admin) .mh-sub-r{position:relative;align-self:stretch;align-items:center;padding-left:22px;background:#F26532;z-index:0} body:not(.is-admin) .mh-sub-r::before{content:'';position:absolute;top:0;bottom:0;left:-14px;width:28px;background:#FF8A4C;transform:skewX(-24deg);z-index:-1} body:not(.is-admin) .mh-sub-r::after{content:'';position:absolute;top:0;bottom:0;left:100%;width:100vw;background:#F26532;z-index:-1} body:not(.is-admin) .mh-sub-r a,body:not(.is-admin) .mh-sub-r .sep{position:relative} body:not(.is-admin) .mh-sub-r .sep{color:rgba(255,255,255,.55)} } /* 사이 밝은 주황 띠 삭제 — 군청·주황 두 색만 (대표 10/19) */ @media (min-width:1024px){body:not(.is-admin) .mh-sub-r::before{background:#F26532}} /* 메인 카드 제목 아이콘 다시 보이기 (대표 10/19 "각 카드 타이틀에 아이콘") */ body.is-front .panel-h svg,body.is-front .sect-head svg,body.is-front .sec-col>h3 svg,body.is-front .series>h3 svg{display:inline-block} body.is-front .panel-h,body.is-front .sec-col>h3,body.is-front .series>h3,body.is-front .sect-head h2{display:flex;align-items:center} body.is-front .panel-h .bi,body.is-front .sect-head .bi,body.is-front .sec-col>h3 .bi,body.is-front .series>h3 .bi{width:19px;height:19px;margin-right:7px;vertical-align:0} /* 메인 광고·이벤트 상자 테두리 — 다른 카드와 같게 (1px #E2E5EC, 각진 모서리) (대표 10/19) */ body.is-front .ad-apta a{border:1px solid #E2E5EC!important;border-radius:0!important} body.is-front .ev-box{border:1px solid #E2E5EC!important;border-radius:0!important} /* 서브 가로 폭 = 메인(카드 바깥 1240px) (대표 10/19) */ @media (min-width:1024px){ body:not(.is-admin):not(.is-front):not(.is-article):not(.is-home) main.wrap{max-width:1240px} body.is-article .article-page{grid-template-columns:minmax(0,1fr) 300px!important} } /* 기사 옆 도구 — 넓어진 본문 카드 바로 왼쪽에 붙임(간격 10px) (대표 10/19) */ @media (min-width:1024px){body.is-article .art-tools{left:max(12px,calc(50% - 620px - 74px))}} /* 기사 도구(공유·글자크기·인쇄·댓글) — PC 는 화면 폭과 상관없이 본문 왼쪽 날개(세로, 따라 내려옴) (대표 10/19 "좌측으로 윙") */ @media (min-width:1024px){ body.is-article .article-page:has(> .art-tools){grid-template-columns:64px minmax(0,1fr) 300px!important;column-gap:12px!important} body.is-article .article-page>.art-tools{position:sticky!important;top:130px;left:auto!important;grid-column:1;grid-row:1 / span 2;align-self:start;order:0;flex-direction:column;width:64px;margin:0!important;padding:8px 0;border-radius:999px} body.is-article .article-page>.art-tools button,body.is-article .article-page>.art-tools .tool-link{flex-direction:column;gap:3px;padding:10px 0;min-height:0} body.is-article .article-page>.art-tools button+button,body.is-article .article-page>.art-tools .tool-link{border-left:0;border-top:1px solid var(--rule)} body.is-article .article-page:has(> .art-tools)>.art-main{grid-column:2} body.is-article .article-page:has(> .art-tools)>.art-rail{grid-column:3;grid-row:1 / span 2} } /* 메인 뉴스 상자 — 사진 위·제목 두 줄 카드 2×2 (대표 10/19) */ .nc-grid{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px} .nc-grid a{display:block;color:#111} .nc-grid .nc-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#EEF0F4;margin:0 0 10px;border-radius:0} .nc-grid .nc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s} .nc-grid a:hover .nc-img img{transform:scale(1.03)} .nc-grid .nc-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16.5px;font-weight:700;line-height:1.5;letter-spacing:-.2px;word-break:keep-all} .nc-grid a:hover .nc-t{color:var(--red-text);text-decoration:underline;text-underline-offset:3px} @media (max-width:640px){.nc-grid{gap:14px 10px}.nc-grid .nc-t{font-size:15px}} @media (prefers-reduced-motion:reduce){.nc-grid .nc-img img{transition:none}} /* 많이 본 뉴스 카드 — 사진 왼쪽 위 순위 숫자 (대표 10/19) */ .nc-rank .nc-img{position:relative} .nc-rank .nc-n{position:absolute;left:0;top:0;min-width:30px;height:30px;display:grid;place-items:center;background:#253272;color:#fff;font-size:15px;font-weight:800} .nc-grid[hidden]{display:none!important} /* 많이 본 뉴스 — 사진 없이 4개 (대표 10/19) */ .rk-text li a{display:flex;align-items:baseline;gap:12px;padding:14px 0} .rk-text .rk-t{font-size:16px;font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rk-text .rk-n{flex:none;font-size:18px;color:#253272} /* ── 메인 시안 적용 (대표 10/20 "시안을 사이트에서 바로 만들어, 테스트서버이니") ── 큰 제목은 명조(Noto Serif KR 900)로 신문다운 무게, 많이 본 뉴스 순위 숫자도 명조, Q&A 는 군청 띠 */ body.is-front .front-lead h2{font-family:'Noto Serif KR',serif;font-weight:900;font-size:34px;line-height:1.3;letter-spacing:-.6px} body.is-front .front-tile h3{font-family:'Noto Serif KR',serif;font-weight:700;font-size:18px;line-height:1.42;letter-spacing:-.3px} body.is-front .nc-grid .nc-t{font-size:17px;letter-spacing:-.3px} body.is-front .hl-live .nc-t{font-family:'Noto Serif KR',serif;font-weight:700} body.is-front .nc-rank .nc-n{font-family:'Noto Serif KR',serif;font-size:17px;background:#F26532} body.is-front .panel-h{font-size:19px} body.is-front .home-qa.card{background:#253272!important;border-color:#253272!important;color:#fff} body.is-front .home-qa .panel-h{color:#fff;border-top-color:#fff!important;border-bottom-color:rgba(255,255,255,.35)!important} body.is-front .home-qa .panel-h .bi{stroke:#F7B79C} body.is-front .home-qa .hq-sub{color:#C9D1F0;font-weight:500;font-size:13.5px;margin-left:12px} body.is-front .home-qa .hq-sub i{font-style:normal;opacity:.5;margin:0 5px} body.is-front .home-qa .panel-more-r{color:#C9D1F0} body.is-front .home-qa .hq-list li{background:#fff;color:#16181D} body.is-front .home-qa .hq-list li a{color:#16181D} /* ── 메인 시안 2차 (대표 10/20 "더 수정해줘") — 분야별·연재 묶음도 같은 문법: 군청 분야 이름, 첫 기사 명조 굵게, 목록 간격·구분선 정리 ── */ body.is-front .sec-col>h3{color:#253272;font-size:17px} body.is-front .sec-col>h3 a{color:#253272} body.is-front .sec-col li:first-child a,body.is-front .series li:first-child a{font-family:'Noto Serif KR',serif;font-weight:700;font-size:16.5px;line-height:1.45;color:#16181D} body.is-front .sec-col li,body.is-front .series li{border-bottom:1px solid #EEF0F4} body.is-front .sec-col li:last-child,body.is-front .series li:last-child{border-bottom:0} body.is-front .sec-col li a,body.is-front .series li a{line-height:1.55} body.is-front .sec-col li a:hover,body.is-front .series li a:hover{color:#C2410C} body.is-front .series>h3{color:#253272} body.is-front .series>h3 a{color:#253272} /* 톱 묶음 — 요약·관련 기사 글자, 사진 카드에 살짝 확대 */ body.is-front .front-sum{font-size:15.5px;line-height:1.75;color:#4A5060} body.is-front .front-rel li a{color:#3A4050} body.is-front .front-rel li a:hover,body.is-front .front-tile h3 a:hover,body.is-front .front-lead h2 a:hover{color:#C2410C} body.is-front .front .thumb{overflow:hidden} body.is-front .front .thumb img{transition:transform .3s} body.is-front .front a.thumb:hover img{transform:scale(1.03)} /* 묶음 제목 오른쪽 '전체' 등 작은 링크 */ body.is-front .panel-more-r{font-size:13px;color:#6B717E;font-weight:500} /* 카드 사이 간격 고르게 */ body.is-front main.wrap>*{margin-bottom:20px!important} @media (prefers-reduced-motion:reduce){body.is-front .front .thumb img{transition:none}} /* 메인 시안 3차 — 휴대폰에선 톱 명조 제목이 너무 커서 줄임 (대표 10/20 "메인 페이지 더 수정해줘") */ @media (max-width:640px){ body.is-front .front-lead h2{font-size:23px;line-height:1.38;letter-spacing:-.4px} body.is-front .front-tile h3{font-size:16px;line-height:1.4} body.is-front .sec-col li:first-child a,body.is-front .series li:first-child a{font-size:15.5px} body.is-front .front-sum{font-size:14.5px;line-height:1.6} } /* 메인 글꼴 통일 (대표 10/20 "뉴스 메인 폰트 다 바꿔줘") — 기사 제목·묶음 제목은 전부 명조(Noto Serif KR), 메뉴·요약·숫자 표시·버튼은 고딕 그대로 */ body.is-front{--bn-serif:'Noto Serif KR','Nanum Myeongjo',serif} body.is-front .sect-head h2,body.is-front .panel-h,body.is-front .sec-col>h3,body.is-front .series>h3{font-family:var(--bn-serif);font-weight:900;letter-spacing:-.4px} body.is-front .nc-grid .nc-t,body.is-front .rk-t,body.is-front .rk-text .rk-t{font-family:var(--bn-serif);font-weight:700;letter-spacing:-.3px} body.is-front .sec-col li a,body.is-front .series li a,body.is-front .front-rel li a,body.is-front .nt-list li a{font-family:var(--bn-serif);font-weight:600;letter-spacing:-.2px} body.is-front .sec-col li:first-child a,body.is-front .series li:first-child a{font-weight:700} body.is-front .hq-list .hq-b strong{font-family:var(--bn-serif);font-weight:700;letter-spacing:-.2px} body.is-front .rk-n,body.is-front .nc-rank .nc-n{font-family:var(--bn-serif);font-weight:900} /* ── 메인 디자인 정리 (대표 10/20 frontend-design) ── 명조 = '1면 목소리' — 톱 제목·묶음 이름·묶음 첫 기사에만. 나머지 제목·요약은 Pretendard 로 고르게(WORKS 와 같은 글꼴). 크기(휴대폰 → PC): 톱 26→34 · 묶음 이름 20→22 · 묶음 첫 기사 17→18 · 카드 제목 15.5→17 · 목록 15→16 · 요약 14.5 */ body.is-front{--bn-sans:'Noto Sans KR',Pretendard,"Pretendard Variable",-apple-system,"Apple SD Gothic Neo",sans-serif;--bn-ink:#1A1D2B;--bn-slate:#5B6275} body.is-front main.wrap{font-family:var(--bn-sans);color:var(--bn-ink)} /* 카드·목록 제목은 고딕으로 되돌린다 */ body.is-front .nc-grid .nc-t,body.is-front .rk-t,body.is-front .rk-text .rk-t,body.is-front .sec-col li a,body.is-front .series li a,body.is-front .front-rel li a,body.is-front .nt-list li a,body.is-front .hq-list .hq-b strong{font-family:var(--bn-sans);letter-spacing:-.35px} body.is-front .nc-grid .nc-t{font-size:17px;font-weight:700;line-height:1.45} body.is-front .rk-t,body.is-front .rk-text .rk-t{font-weight:600} body.is-front .sec-col li a,body.is-front .series li a,body.is-front .front-rel li a,body.is-front .nt-list li a{font-size:16px;font-weight:500;line-height:1.55;color:#2A2E3D} body.is-front .hq-list .hq-b strong{font-weight:700} /* 명조는 여기만 */ body.is-front .front-lead h2{font-weight:800;letter-spacing:-.8px;word-break:keep-all} body.is-front .front-tile h3,body.is-front .hl-live .nc-t{font-family:var(--bn-serif);font-weight:700;word-break:keep-all} body.is-front .sec-col li:first-child a,body.is-front .series li:first-child a{font-family:var(--bn-serif);font-weight:700;font-size:18px;line-height:1.45;color:var(--bn-ink);letter-spacing:-.4px} body.is-front .sect-head h2,body.is-front .panel-h,body.is-front .sec-col>h3,body.is-front .series>h3{font-family:var(--bn-serif);font-weight:900;letter-spacing:-.5px} /* 요약·부가 글자 */ body.is-front .front-sum{font-family:var(--bn-sans);color:var(--bn-slate);letter-spacing:-.2px} body.is-front .rk-n,body.is-front .nc-rank .nc-n{font-family:var(--bn-sans);font-weight:800} /* 한국어 줄바꿈 — 단어 중간에서 끊지 않기 */ body.is-front .nc-t,body.is-front .rk-t,body.is-front .sec-col li a,body.is-front .series li a,body.is-front .front-rel li a,body.is-front .hq-b strong{word-break:keep-all;overflow-wrap:anywhere} body.is-front a:focus-visible{outline:2px solid #253272;outline-offset:2px;border-radius:2px} @media (max-width:640px){ body.is-front .front-lead h2{font-size:26px;line-height:1.32} body.is-front .front-tile h3{font-size:17px;line-height:1.42} body.is-front .nc-grid .nc-t{font-size:15.5px;line-height:1.45;margin-top:8px} body.is-front .sec-col li a,body.is-front .series li a,body.is-front .front-rel li a,body.is-front .nt-list li a{font-size:15px} body.is-front .sec-col li:first-child a,body.is-front .series li:first-child a{font-size:17px} body.is-front .sect-head h2,body.is-front .panel-h{font-size:20px} body.is-front .front-sum{font-size:14.5px} } /* 휴대폰 — 사진 옆 좁은 제목은 명조가 세 줄로 쪼개져서 고딕으로 (명조는 톱 제목·묶음 이름만) */ @media (max-width:640px){ body.is-front .front-tile h3,body.is-front .sec-col li:first-child a,body.is-front .series li:first-child a{font-family:var(--bn-sans);font-weight:700;font-size:16px;line-height:1.45;letter-spacing:-.4px} } /* 박스 안 제목 밑 가로 막대(2px 검정) 삭제 (대표 10/20 "박스 안에 있는 가로 Bar 삭제") — 박스 테두리·기사 사이 얇은 구분선은 그대로 */ body.is-front .panel-h,body.is-front .sect-head,body.is-front .sec-col>h3,body.is-front .series>h3,body.is-front .home-qa .panel-h{border-bottom:0!important;padding-bottom:0} body.is-front .panel-h,body.is-front .sect-head{margin-bottom:12px} /* 많이 본 뉴스 — 휴대폰에서 분야 글자 탭이 제목 위에 겹쳐서, 제목 아래 한 줄(옆으로 밀기)로 */ @media (max-width:640px){ body.is-front .hl-rank .rk-tabs{position:static;margin:-4px 0 12px;overflow-x:auto;scrollbar-width:none;white-space:nowrap} body.is-front .hl-rank .rk-tabs::-webkit-scrollbar{display:none} body.is-front .hl-rank .rk-tabs [role=tab]{flex:none;font-size:14.5px;padding:4px 0} } @media (max-width:640px){body.is-front .hl-rank{min-width:0;max-width:100%}body.is-front .hl-rank .rk-tabs{max-width:100%;min-width:0}} /* 메인 Q&A 군청 띠 다시 (대표 10/20 "이거도 어색해") — 흰 질문 카드를 띠 안에서 둥근 카드로 띄우고 안쪽 여백을 줌. Q 동그라미는 카드 안 왼쪽에 바르게, 답 앞 'A' 표시는 빼고 회색 두 줄로, 사진은 오른쪽 둥근 모서리. 제목은 검정, 마우스 올리면 밑줄 */ body.is-front .home-qa{padding:22px 24px 24px!important} body.is-front .home-qa .hq-list{gap:12px!important} body.is-front .home-qa .hq-list li{border:0!important;border-radius:12px;overflow:hidden} body.is-front .home-qa .hq-list li a,body.is-front .home-qa .hq-list li a:has(.hq-img){display:grid!important;grid-template-columns:30px minmax(0,1fr) 92px!important;gap:12px!important;align-items:center!important;padding:14px 14px 14px 16px!important;height:100%;box-sizing:border-box} body.is-front .home-qa .hq-list li a:not(:has(.hq-img)){grid-template-columns:30px minmax(0,1fr)!important} body.is-front .home-qa .qa-q{width:30px!important;height:30px!important;font-size:15px!important;margin:0!important;align-self:start!important;box-shadow:none!important} body.is-front .home-qa .hq-b{min-width:0} body.is-front .home-qa .hq-b strong{font-size:16px;line-height:1.4;color:#1A1D2B;-webkit-line-clamp:1} body.is-front .home-qa .hq-list .qa-exp,body.is-front .home-qa .hq-list .qa-exp.hq-ans{margin:5px 0 0!important;padding:0!important;font-size:14px!important;line-height:1.55!important;color:#5B6275!important;font-weight:400!important} body.is-front .home-qa .hq-list .qa-exp::before{display:none!important} body.is-front .home-qa .hq-img{width:92px;aspect-ratio:1/1!important;border-radius:8px;overflow:hidden;align-self:center!important} body.is-front .home-qa .hq-img img{width:100%;height:100%;object-fit:cover} body.is-front .home-qa .hq-list a:hover strong{color:#1A1D2B!important;text-decoration:underline;text-underline-offset:3px} body.is-front .home-qa .hq-list a:focus-visible{outline:2px solid #F7B79C;outline-offset:-2px} @media (max-width:640px){ body.is-front .home-qa{padding:18px 16px 18px!important} body.is-front .home-qa .hq-list{gap:10px!important} body.is-front .home-qa .hq-list li a,body.is-front .home-qa .hq-list li a:has(.hq-img){grid-template-columns:28px minmax(0,1fr) 76px!important;gap:10px!important;padding:12px!important} body.is-front .home-qa .qa-q{width:28px!important;height:28px!important;font-size:14px!important} body.is-front .home-qa .hq-img{width:76px} body.is-front .home-qa .hq-b strong{-webkit-line-clamp:2} } /* 주요 뉴스·저출산 극복·전문가 칼럼·많이 본 뉴스 — MSN 카드 모양 (대표 10/20 사진 참고) 둥근 흰 카드(얇은 테두리+옅은 그림자), 사진은 위에 꽉 차게, 그 아래 작은 줄(분야 · 얼마 전), 굵은 제목 세 줄까지 */ body.is-front .hl-main,body.is-front .hl-live,body.is-front .hl-rank{background:#F3F4F8!important} body.is-front .nc-grid{gap:14px!important} body.is-front .nc-grid>li{min-width:0} body.is-front .nc-grid>li>a{display:flex!important;flex-direction:column;height:100%;background:#fff;border:1px solid #E4E6EC;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(26,29,43,.06);transition:box-shadow .2s,transform .2s} body.is-front .nc-grid>li>a:hover{box-shadow:0 6px 18px rgba(26,29,43,.12);transform:translateY(-2px)} body.is-front .nc-grid .nc-img{margin:0!important;border-radius:0!important;aspect-ratio:16/10} body.is-front .nc-grid a:hover .nc-img img{transform:none} body.is-front .nc-src{display:block;margin:12px 14px 0;font-size:12.5px;font-weight:500;color:#5B6275;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.is-front .nc-src i{font-style:normal;color:#A3A9B8} body.is-front .nc-grid .nc-t{margin:6px 14px 16px!important;font-size:18px!important;font-weight:700!important;line-height:1.42!important;-webkit-line-clamp:3!important;color:#1A1D2B;letter-spacing:-.4px} body.is-front .nc-grid a:hover .nc-t{color:#1A1D2B;text-decoration:none} body.is-front .hl-live .nc-t{font-family:var(--bn-sans)!important} body.is-front .nc-rank .nc-n{border-radius:0 0 8px 0} @media (max-width:640px){ body.is-front .nc-grid{gap:10px!important} body.is-front .nc-src{margin:10px 10px 0;font-size:11.5px} body.is-front .nc-grid .nc-t{margin:4px 10px 12px!important;font-size:15.5px!important;line-height:1.42!important} } @media (prefers-reduced-motion:reduce){body.is-front .nc-grid>li>a,body.is-front .nc-grid>li>a:hover{transition:none;transform:none}} /* 알립니다 — MSN 카드 가로 한 줄 4개, 휴대폰은 옆으로 밀기 (대표 10/20) */ body.is-front .notice-box{background:#F3F4F8!important} body.is-front .nc-grid.nt-cards{grid-template-columns:repeat(4,minmax(0,1fr))} body.is-front .nt-cards .nc-noimg{background:#253272 url(/image/logo/logo_white_nobadge.png) center/46% no-repeat} @media (max-width:640px){ body.is-front .nc-grid.nt-cards{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none} body.is-front .nc-grid.nt-cards::-webkit-scrollbar{display:none} body.is-front .nc-grid.nt-cards>li{flex:0 0 62%;scroll-snap-align:start} } /* 상단 메뉴 막대 ~ 최종수정 ~ 첫 상자 사이 세로 여백 줄임 (대표 10/20) */ body.is-front main.wrap{padding-top:10px!important;margin-top:0!important} body.is-front .home-mod{margin:0 0 8px!important} @media (max-width:640px){body.is-front main.wrap{padding-top:4px!important}body.is-front .home-mod{padding-top:2px;margin-bottom:6px!important}} /* 알립니다 휴대폰 — 첫 카드가 화면 끝에 붙지 않게 */ @media (max-width:640px){body.is-front .nc-grid.nt-cards{margin:0;padding:0 0 4px}} /* 톱 옆 4개 — MSN 카드 (대표 10/20 "여기 4개도 msn 스타일로") · PC·태블릿. 휴대폰은 사진 오른쪽 목록 그대로 */ @media (min-width:641px){ body.is-front .front-tiles{gap:14px!important} body.is-front .front-tile{display:flex;flex-direction:column;background:#fff;border:1px solid #E4E6EC;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(26,29,43,.06);transition:box-shadow .2s,transform .2s} body.is-front .front-tile:hover{box-shadow:0 6px 18px rgba(26,29,43,.12);transform:translateY(-2px)} body.is-front .front-tile .thumb{border-radius:0;margin:0} body.is-front .front .front-tile a.thumb:hover img{transform:none} body.is-front .front-tile .nc-src{margin:12px 14px 0} body.is-front .front-tile h3{font-family:var(--bn-sans)!important;font-size:18px!important;font-weight:700!important;line-height:1.42;letter-spacing:-.4px;margin:6px 14px 8px!important;-webkit-line-clamp:3} body.is-front .front-tile h3 a,body.is-front .front-tile h3 a:hover{color:#1A1D2B} body.is-front .front-tile .front-rel{margin:0 14px 14px;padding-top:8px;border-top:1px solid #EEF0F4} body.is-front .front-tile .front-rel li a{font-size:14px!important;color:#5B6275} } @media (prefers-reduced-motion:reduce){body.is-front .front-tile,body.is-front .front-tile:hover{transition:none;transform:none}} /* 알립니다 — 원래 글자 목록으로 되돌림 (대표 10/20 "알립니다는 기존 텍스트만") */ body.is-front .notice-box{background:#fff!important} /* 알립니다 — 앞에 번호 (대표 10/20) */ body.is-front .nt-num{padding:0} body.is-front .nt-num a{display:flex!important;align-items:baseline;gap:12px} body.is-front .nt-num .nt-n{flex:none;width:18px;font-size:16px;font-weight:800;color:#253272;text-align:center;font-variant-numeric:tabular-nums} /* 메인 톱 기사 아래 광고 자리 (대표 10/20) — 톱 칸 빈 곳을 채움 */ body.is-front .front-lead .ad-home_lead{margin:18px 0 0} body.is-front .front-lead .ad-home_lead img{border-radius:8px} @media (max-width:640px){body.is-front .front-lead .ad-home_lead{margin:14px 0 4px}} /* ── 서브 페이지도 MSN 카드 (대표 10/20 "쇼핑도 msn 스타일", "서브 유튜브와 인스타도 MSN 스타일") ── 둥근 흰 카드·얇은 모래 테두리·옅은 그림자, 사진은 위에 꽉 차게, 글은 안쪽 여백 */ body:not(.is-admin) .cp-item,body:not(.is-admin) .ig-card,body:not(.is-admin) .tv-item{background:#fff;border:1px solid #E4E6EC!important;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(26,29,43,.06);transition:box-shadow .2s,transform .2s} body:not(.is-admin) .cp-item:hover,body:not(.is-admin) .ig-card:hover,body:not(.is-admin) .tv-item:hover{box-shadow:0 6px 18px rgba(26,29,43,.12);transform:translateY(-2px);border-color:#E4E6EC!important} /* 쇼핑 카드 */ body:not(.is-admin) .cp-item{padding:0 0 14px!important;gap:6px} body:not(.is-admin) .cp-item>.cp-img{border-radius:0;margin:0 0 6px;background:#fff} body:not(.is-admin) .cp-item>*:not(.cp-img){margin-left:14px;margin-right:14px} body:not(.is-admin) .cp-name{font-family:Pretendard,"Pretendard Variable",-apple-system,sans-serif;font-size:15.5px;font-weight:700;line-height:1.42;letter-spacing:-.3px;color:#1A1D2B} body:not(.is-admin) .cp-price{font-size:18px;letter-spacing:-.3px} /* 인스타·유튜브 카드 */ body:not(.is-admin) .ig-card{gap:0} body:not(.is-admin) .ig-card .thumb{border-radius:0!important} body:not(.is-admin) .ig-card strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:10px 12px 12px;font-size:14.5px;line-height:1.42;letter-spacing:-.3px;color:#1A1D2B} body:not(.is-admin) .ig-card>*:not(.thumb):not(strong){margin-left:12px;margin-right:12px} body:not(.is-admin) .tv-item .tv-play,body:not(.is-admin) .tv-item iframe{border-radius:0!important} body:not(.is-admin) .tv-item figcaption{padding:10px 12px 12px;margin:0} @media (prefers-reduced-motion:reduce){body:not(.is-admin) .cp-item,body:not(.is-admin) .ig-card,body:not(.is-admin) .tv-item{transition:none;transform:none!important}} /* 기사 속 '이 기사와 관련된 육아 Q&A' — 메인 Q&A 띠와 같은 모양 (대표 10/20) */ body:not(.is-admin) .qa-box{background:#253272;border:0!important;border-radius:0;padding:22px 24px 24px!important;color:#fff} body:not(.is-admin) .qa-box h2{color:#fff;border-bottom:0!important;padding-bottom:0!important;margin:0 0 14px!important} body:not(.is-admin) .qa-box h2 .bi{stroke:#F7B79C} body:not(.is-admin) .qa-box ul{display:grid;gap:10px} body:not(.is-admin) .qa-box li{background:#fff;border:0!important;border-radius:12px;overflow:hidden} body:not(.is-admin) .qa-box li a{display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;gap:12px!important;padding:14px 16px!important;color:#1A1D2B} body:not(.is-admin) .qa-box .qa-q{width:30px!important;height:30px!important;font-size:15px!important;margin:0!important;box-shadow:none!important} body:not(.is-admin) .qa-box strong{font-size:16px;line-height:1.4;color:#1A1D2B} body:not(.is-admin) .qa-box .qa-sum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:14px;line-height:1.55;color:#5B6275} body:not(.is-admin) .qa-box .qa-exp{margin:6px 0 0!important;padding:0!important;font-size:12.5px!important;color:#5B6275!important;font-weight:600} body:not(.is-admin) .qa-box .qa-exp::before{display:none!important} body:not(.is-admin) .qa-box li a:hover strong{color:#1A1D2B;text-decoration:underline;text-underline-offset:3px} @media (max-width:640px){body:not(.is-admin) .qa-box{padding:18px 16px!important}body:not(.is-admin) .qa-box li a{grid-template-columns:28px minmax(0,1fr)!important;padding:12px!important}} /* 서브(기사·목록) 폭 = 메인 폭 (대표 10/20 "좌측 윙 공유 박스는 제외하고 같은 사이즈") 본문+오른쪽 기둥이 메인 내용 폭(1240) 그대로, 공유 윙은 그 바깥 왼쪽에. 윙 자리가 모자라는 화면(1420 미만)은 예전처럼 */ @media (min-width:1420px){ body.is-article .article-page:has(>.art-tools){grid-template-columns:64px minmax(0,1fr) 300px!important;column-gap:14px!important;margin-left:-76px;width:calc(100% + 76px)} } @media (min-width:1001px){ .is-article .article-page:not(:has(>.art-tools)):has(>.art-rail){grid-template-columns:minmax(0,1fr) 300px!important;column-gap:14px!important} } /* 화면 1300~1419 — 공유 윙도 본문 바깥 왼쪽에 (대표 10/20 "좌측 윙은 현재 상태에서 좌측에"). 자리가 좁아 아이콘만, 폭 44 */ @media (min-width:1300px) and (max-width:1419px){ body.is-article .article-page:has(>.art-tools){grid-template-columns:minmax(0,1fr) 300px!important;column-gap:14px!important} body.is-article .article-page:has(>.art-tools)>.art-main{grid-column:1} body.is-article .article-page:has(>.art-tools)>.art-rail{grid-column:2} body.is-article .article-page>.art-tools{position:fixed!important;top:150px!important;left:max(4px,calc(50% - 620px - 50px))!important;grid-row:auto!important;width:44px!important;margin:0!important;padding:4px 0} body.is-article .article-page>.art-tools button,body.is-article .article-page>.art-tools .tool-link{padding:9px 0!important;font-size:0!important;gap:0!important} body.is-article .article-page>.art-tools button span,body.is-article .article-page>.art-tools .tool-link span{display:none} body.is-article .article-page>.art-tools svg{width:20px;height:20px} } /* 압타밀 광고 띠 — 더 깊이 읽기 안 '저출생 골든타임' 위 줄 전체 (대표 10/20) */ body.is-front .series-grid>.series-ad{grid-column:1 / -1;min-width:0} body.is-front .series-grid>.series-ad>*{margin:0!important} @media (max-width:640px){body.is-front .front-tile .nc-src{grid-column:1;margin:6px 0 0}} /* 휴대폰 가로 여백 최소화 (대표 10/20) — 바깥 상자 안쪽 여백 16~22 → 10, 묶음 안 상자는 12, 톱 제목·요약 들여쓰기 없앰 */ @media (max-width:640px){ body.is-front main.wrap>section,body.is-front main.wrap>.hl>section,body.is-front main.wrap .card,body.is-front .sect,body.is-front .home-qa{padding-left:10px!important;padding-right:10px!important} body.is-front .sec-col.card,body.is-front .series.card{padding-left:12px!important;padding-right:12px!important} body.is-front .front-lead h2,body.is-front .front-lead .front-sum,body.is-front .front-lead .front-rel{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important} body.is-front .front-tiles{padding-left:0!important;padding-right:0!important} body.is-front .sect-head{padding-left:0!important;padding-right:0!important} body.is-front .home-qa .hq-list li a{padding:12px 10px!important} body.is-front .nc-grid{gap:8px!important} } /* 서브(기사·목록·Q&A) 휴대폰 가로 여백도 10 (대표 10/20 "모바일에서는 가로 여백 최소화") */ @media (max-width:640px){ body.is-article .article,body.is-article .list-page,body.is-article .art-main>section,body.is-article .art-main>article,body.is-article .art-rail>section,body.is-article .article-page>section,body.is-article main.wrap>section{padding-left:10px!important;padding-right:10px!important} body:not(.is-admin) .qa-box{padding-left:10px!important;padding-right:10px!important} } /* 최종수정 줄 — 메인 맨 아래(푸터 위) (대표 10/20) */ body.is-front .home-mod{margin:6px 0 0!important;padding:0 2px;justify-content:flex-end} @media (max-width:640px){body.is-front .home-mod{padding:0 10px 4px!important;margin-top:4px!important}} /* 메인 위·아래 회색 여백 없음 (대표 10/20) — 첫 상자는 메뉴 바로 아래, 최종수정 줄은 흰 바탕으로 푸터(분야 메뉴)에 바로 붙음 */ body.is-front main.wrap{padding-top:0!important;padding-bottom:0!important;margin-bottom:0!important} body.is-front main.wrap>.home-mod{margin:0!important;padding:10px 14px!important;background:#fff;line-height:1.4} body.is-front main.wrap>*:last-child{margin-bottom:0!important} @media (min-width:641px){body.is-front main.wrap{padding-top:14px!important}} body.is-front main.wrap>*:nth-last-child(2){margin-bottom:0!important} /* PC 메인 왼쪽 윙 (대표 10/20) — 기사 화면과 같은 자리·모양. 1420 이상은 글자까지, 1300~1419 는 아이콘만, 그보다 좁거나 휴대폰은 숨김 */ .home-tools{display:none!important} @media (min-width:1420px){body:not(.is-admin) .home-tools{display:flex!important;top:150px;left:calc(50% - 620px - 76px)}} @media (min-width:1300px) and (max-width:1419px){ body:not(.is-admin) .home-tools{display:flex!important;top:150px;left:max(4px,calc(50% - 620px - 50px));width:44px;padding:4px 0} body:not(.is-admin) .home-tools button{padding:9px 0;font-size:0;gap:0} body:not(.is-admin) .home-tools button span{display:none} body:not(.is-admin) .home-tools svg{width:20px;height:20px} } /* 최종수정 가운데, 바로 위 상자와 회색 틈 없이 (대표 10/20) */ body.is-front main.wrap>.home-mod{justify-content:center!important;text-align:center} body.is-front main.wrap>:has(+ .home-mod){margin-bottom:0!important} /* PC 메인 왼쪽 윙 — 기사 화면처럼 흰 바탕·테두리 (대표 10/20 "바탕을 흰색으로") */ body:not(.is-admin) .home-tools{background:#fff!important;border:1px solid #E2E5EC!important;border-radius:999px!important;box-shadow:0 2px 8px rgba(26,29,43,.06)} body:not(.is-admin) .home-tools button{background:transparent!important} /* 메인 AI INDEX 탭 (대표 10/21) — 글자+ㅣ 탭, 분야별 1위 목록, 더보기 */ body.is-front .geo-tabs .gt-sub{margin-left:10px;font-family:var(--bn-sans);font-size:13px;font-weight:500;color:#5B6275} body.is-front .gt-tabs{display:flex;flex-wrap:wrap;align-items:center;margin:4px 0 12px;font-size:15px} body.is-front .gt-tabs button{border:0;background:none;padding:4px 0;font:inherit;font-weight:700;color:#8A91A3;cursor:pointer;letter-spacing:.2px} body.is-front .gt-tabs button[aria-selected=true]{color:#F26532;font-weight:800} body.is-front .gt-tabs button:focus-visible{outline:2px solid #253272;outline-offset:2px} body.is-front .gt-tabs .sep{color:#C5CAD6;margin:0 10px} body.is-front .gt-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px} body.is-front .gt-list li{border-bottom:1px solid #EEF0F4} body.is-front .gt-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;color:#1A1D2B;text-decoration:none} body.is-front .gt-g{display:flex;flex-direction:column;min-width:0;font-size:14.5px;font-weight:700} body.is-front .gt-g small{font-size:12px;font-weight:500;color:#8A91A3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.is-front .gt-b{flex:none;max-width:55%;font-size:15px;font-weight:800;color:#253272;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.is-front .gt-b em{font-style:normal;font-size:11px;font-weight:800;color:#fff;background:#F26532;border-radius:3px;padding:1px 5px;margin-right:6px;vertical-align:2px} body.is-front .gt-list a:hover .gt-b{text-decoration:underline;text-underline-offset:3px} body.is-front .gt-foot{display:flex;justify-content:space-between;align-items:center;margin:10px 0 0;font-size:13px;color:#8A91A3} body.is-front .gt-foot a{font-weight:800;color:#253272} @media (max-width:640px){body.is-front .gt-list{grid-template-columns:1fr}body.is-front .geo-tabs .gt-sub{display:block;margin:4px 0 0}body.is-front .gt-tabs{font-size:14px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}body.is-front .gt-tabs .sep{margin:0 8px}} /* ── 기사 화면 — 다음 뉴스 모양 (대표 10/21 "서브페이지 다음 뉴스처럼 레이아웃") ── 회색 바탕(#F2F4F7) 위 흰 둥근 카드: 본문 카드 하나 + 오른쪽 카드들 따로, 사이 16px. 제목 30px·본문 17px Pretendard, 공유·글자크기·인쇄·댓글은 기자 줄 아래 한 줄(오른쪽). 바깥 왼쪽 윙은 없앰 */ body.is-article{background:#F2F4F7!important} @media (min-width:1001px){ body.is-article .article-page{grid-template-columns:minmax(0,1fr) 340px!important;column-gap:16px!important;margin-left:0!important;width:100%!important} body.is-article .article-page>.art-main{grid-column:1!important} body.is-article .article-page>.art-rail{grid-column:2!important} } body.is-article .art-main>.article,body.is-article .art-main>section,body.is-article .art-main>aside:not(.art-tools),body.is-article .art-main>.lapl-slot{background:#fff;border:0!important;border-radius:16px!important;box-shadow:none} body.is-article .art-main>.article{padding:36px 40px 32px!important} body.is-article .art-main>section{padding:24px 28px!important} body.is-article .art-main>*+*{margin-top:16px!important} body.is-article .art-rail>section,body.is-article .art-rail>nav{background:#fff;border:0!important;border-radius:16px!important;padding:20px 22px!important;margin:0 0 16px!important;box-shadow:none} body.is-article .art-rail>.bd-ad{margin:0 0 16px!important} body.is-article .art-rail>.bd-ad img{border-radius:12px} body.is-article .article h1{font-family:'Noto Sans KR',Pretendard,"Pretendard Variable",-apple-system,sans-serif!important;font-size:30px!important;font-weight:700!important;line-height:1.4!important;letter-spacing:-.6px;margin:10px 0 12px!important;color:#000} body.is-article .article .subtitle{font-family:'Noto Sans KR',Pretendard,"Pretendard Variable",-apple-system,sans-serif;font-size:17px;color:#444;line-height:1.55} body.is-article .article .reporter{font-size:13px;color:#666} body.is-article #art-body{font-family:'Noto Sans KR',Pretendard,"Pretendard Variable",-apple-system,sans-serif;font-size:17px;line-height:1.6;color:#111;letter-spacing:-.2px} body.is-article #art-body p{margin:0 0 22px} body.is-article #art-body figcaption,body.is-article #art-body .caption{font-size:14px;line-height:1.5;color:#828282} /* 기사 도구 — 기자 줄 아래 한 줄, 오른쪽 정렬, 아래 얇은 선 */ body.is-article .article .art-tools.is-inline{position:static!important;display:flex!important;flex-direction:row!important;justify-content:flex-end;gap:2px;width:auto!important;height:auto;margin:6px 0 24px!important;padding:0 0 14px!important;background:none!important;border:0!important;border-bottom:1px solid #EBEDF0!important;border-radius:0!important;box-shadow:none!important;top:auto!important;left:auto!important} body.is-article .article .art-tools.is-inline button,body.is-article .article .art-tools.is-inline .tool-link{flex-direction:row!important;gap:5px!important;padding:6px 10px!important;min-height:0;border:0!important;font-size:13px!important;color:#555;border-radius:6px} body.is-article .article .art-tools.is-inline button+button,body.is-article .article .art-tools.is-inline .tool-link{border-left:0!important;border-top:0!important} body.is-article .article .art-tools.is-inline button:hover{background:#F2F4F7} body.is-article .article .art-tools.is-inline svg{width:18px!important;height:18px!important} body.is-article .article .art-tools.is-inline span{display:inline!important;font-size:13px!important} @media (max-width:640px){ body.is-article .art-main>.article{padding:20px 16px!important;border-radius:0!important} body.is-article .art-main>section{border-radius:0!important;padding:18px 16px!important} body.is-article .art-rail>section,body.is-article .art-rail>nav{border-radius:0!important} body.is-article .article h1{font-size:23px!important} body.is-article #art-body{font-size:17px} body.is-article .article .art-tools.is-inline span{display:none!important} } /* 공유 버튼 — 동그랗게, 저작권·ARS 후원 줄 오른쪽 (대표 10/21) */ body.is-article .cr-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:30px;padding-top:14px;border-top:1px solid #EBEDF0} body.is-article .cr-row .copyright{margin:0!important;padding:0!important;border:0!important;min-width:0} body.is-article .cr-row .share{display:flex!important;flex:none;gap:6px;margin:0!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;justify-content:flex-end!important} body.is-article .cr-row .share .sh{width:36px!important;height:36px!important;border-radius:50%!important;padding:0!important;display:grid;place-items:center} body.is-article .cr-row .share .sh svg{width:18px;height:18px} @media (max-width:640px){body.is-article .cr-row{flex-direction:column;align-items:flex-start}body.is-article .cr-row .share{align-self:center}} /* AI INDEX — 분야 탭은 제목 줄 오른쪽 위, 한 줄 5개씩 10개 카드 (대표 10/21) */ body.is-front .gt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px} body.is-front .gt-head .panel-h{margin:0!important} body.is-front .gt-head .gt-tabs{margin:0;font-size:14px} body.is-front .gt-list{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important} body.is-front .gt-list li{border:1px solid #E4E6EC!important;border-radius:10px;background:#fff} body.is-front .gt-list a{flex-direction:column!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;height:100%;padding:14px!important;box-sizing:border-box} body.is-front .gt-g{font-size:13.5px!important;width:100%} body.is-front .gt-g small{white-space:normal!important} body.is-front .gt-b{max-width:100%!important;font-size:16px!important} @media (max-width:1000px){body.is-front .gt-list{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media (max-width:640px){body.is-front .gt-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}body.is-front .gt-head{flex-direction:column;align-items:flex-start}} /* AI INDEX 제목 줄 — 주황 바탕, 흰 글자 (대표 10/21 "베이비뉴스 육아브랜드 AI INDEX, 타이틀 부분 오렌지 바탕") */ body.is-front .geo-tabs{overflow:hidden} body.is-front .geo-tabs .gt-head{margin:-20px -24px 16px!important;padding:14px 24px!important;background:#F26532} body.is-front .geo-tabs .gt-head .panel-h,body.is-front .geo-tabs .gt-head .panel-h *{color:#fff!important} body.is-front .geo-tabs .gt-head .panel-h .bi{stroke:#fff!important} body.is-front .geo-tabs .gt-sub{color:rgba(255,255,255,.85)!important} body.is-front .geo-tabs .gt-tabs button{color:rgba(255,255,255,.75)!important} body.is-front .geo-tabs .gt-tabs button[aria-selected=true]{color:#fff!important;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px} body.is-front .geo-tabs .gt-tabs .sep{color:rgba(255,255,255,.5)!important} body.is-front .geo-tabs .gt-tabs button:focus-visible{outline-color:#fff!important} @media (max-width:640px){body.is-front .geo-tabs .gt-head{margin:-16px -10px 14px!important;padding:12px 10px!important}} /* 올해의 브랜드 카드 — 위아래 카드와 같은 폭으로, 롤링은 5초 (대표 10/21) */ body.is-article .art-rail>.rail-award,body:not(.is-admin) .rail>.rail-award{padding:0!important;background:none!important;border:0!important} body:not(.is-admin) .rail-award .aw-one{width:100%;box-sizing:border-box;aspect-ratio:auto!important;min-height:260px;padding:26px 20px!important;border-radius:16px!important;border:0!important} body:not(.is-admin) .rail-award .aw-t{font-size:18px!important} body:not(.is-admin) .rail-award .aw-logo img{width:220px!important;height:90px!important} /* 분야별 뉴스 — 각 분야 이름 줄(사회·정책 등)을 회색 띠로 (대표 10/21) */ body.is-front .sec-col{overflow:hidden} body.is-front .sec-col>h3{background:#F2F4F7;margin:-18px -18px 12px!important;padding:13px 18px!important} @media (max-width:640px){body.is-front .sec-col>h3{margin:-12px -12px 10px!important;padding:11px 12px!important}} /* 더 깊이 읽기(육아정책 브리핑 등) 카드도 이름 줄 회색 띠 (대표 10/21) */ body.is-front .series.card{overflow:hidden} body.is-front .series>h3{background:#F2F4F7;margin:-18px -18px 12px!important;padding:13px 18px!important} @media (max-width:640px){body.is-front .series>h3{margin:-12px -12px 10px!important;padding:11px 12px!important}} /* 알립니다도 제목 줄 회색 띠 (대표 10/21) */ body.is-front .notice-box{overflow:hidden} body.is-front .notice-box>.panel-h{background:#F2F4F7;margin:calc(-1 * var(--nb-pt, 20px)) calc(-1 * var(--nb-px, 24px)) 12px!important;padding:13px var(--nb-px, 24px)!important} body.is-front .notice-box{--nb-pt:18px;--nb-px:22px} @media (max-width:640px){body.is-front .notice-box{--nb-pt:16px;--nb-px:10px}} /* 메인 왼쪽 윙 — 화면 폭 1300~1419 에서도 바깥 왼쪽에 떠 있게(맨 아래 가로줄로 깔리던 것 고침) */ @media (min-width:1300px){body:not(.is-admin) .home-tools{position:fixed!important;flex-direction:column!important;width:64px;margin:0!important;border-radius:999px!important}} @media (min-width:1300px) and (max-width:1419px){body:not(.is-admin) .home-tools{width:44px!important}body:not(.is-admin) .home-tools button{flex-direction:column!important}} @media (min-width:1300px){body:not(.is-admin) .home-tools button+button{border-left:0!important;border-top:1px solid #E2E5EC!important}} /* 상자 제목 줄 'MORE ›' — 연하게, 카드 오른쪽 끝 (대표 10/21) */ body.is-front .sec-col>h3 a,body.is-front .series>h3 a,body.is-front .notice-box .panel-h a{flex:1;display:flex;align-items:center;min-width:0} body.is-front .sec-col>h3 a::after,body.is-front .series>h3 a::after,body.is-front .notice-box .panel-h a::after{content:"MORE ›";margin-left:auto;padding-left:10px;font-family:'Noto Sans KR',Pretendard,system-ui,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.4px;color:#A3A9B6;white-space:nowrap} body.is-front .panel-h .panel-more-r,.gt-foot a.gt-more{font-family:'Noto Sans KR',Pretendard,system-ui,sans-serif;font-size:11.5px!important;font-weight:600!important;letter-spacing:.4px;color:#A3A9B6!important} body.is-front .home-qa .panel-more-r{color:#C9D1F0!important} body.is-front .sec-col>h3 a:hover::after,body.is-front .series>h3 a:hover::after,body.is-front .notice-box .panel-h a:hover::after,body.is-front .panel-h .panel-more-r:hover,.gt-foot a.gt-more:hover{color:#253272!important} /* 육아 도구 — 선 아이콘 + 연회색 원 (대표 10/21 "유아틱한 이모지 말고 세련되게") */ body.is-front .tools-grid .tool-ln{width:56px;height:56px;border-radius:50%;background:#F2F4F7;display:grid;place-items:center;transition:background .15s,color .15s;color:#1A1D2B} body.is-front .tools-grid .tool-ln .bi{width:26px;height:26px;margin:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} body.is-front .tools-grid a:hover .tool-ln{background:#253272;color:#fff} @media (max-width:640px){body.is-front .tools-grid .tool-ln{width:48px;height:48px}body.is-front .tools-grid .tool-ln .bi{width:22px;height:22px}} /* 최종수정 — 배경·테두리 없이 (대표 10/21) */ body.is-front main.wrap>.home-mod{background:none!important;border:0!important;box-shadow:none!important} /* 상자 제목 글자 — 군청 대신 검정 (대표 10/21) */ body.is-front .sec-col>h3,body.is-front .sec-col>h3 a,body.is-front .series>h3,body.is-front .series>h3 a,body.is-front .panel-h,body.is-front .panel-h>a:not(.panel-more-r),body.is-front .sect-head h2{color:#111!important} /* 베이비뉴스 이벤트 제목도 다른 상자 제목과 같은 글꼴 (대표 10/21) */ body.is-front #ev-h{font-family:var(--bn-serif);font-weight:900;letter-spacing:-.5px;color:#111} /* 육아 도구 아이콘 더 크게 (대표 10/21) */ body.is-front .tools-grid .tool-ln{width:68px;height:68px} body.is-front .tools-grid .tool-ln .bi{width:32px;height:32px;stroke-width:1.5} @media (max-width:640px){body.is-front .tools-grid .tool-ln{width:56px;height:56px}body.is-front .tools-grid .tool-ln .bi{width:27px;height:27px}} /* AI INDEX 카드 — 분야·1위 브랜드 모두 가운데 (대표 10/21) */ body.is-front .geo-tabs .gt-list a,body .rail-gt .gt-list a{align-items:center!important;text-align:center!important} body.is-front .geo-tabs .gt-b{max-width:100%!important} /* 기사 관련 육아 Q&A 제목 — 흰 카드 위 흰 글자로 안 보이던 것 검정으로, 오른쪽 끝 더보기 (대표 10/21) */ body.is-article .qa-box #qa-h{color:#111!important;display:flex;align-items:center} body.is-article .qa-box #qa-h .bi{color:#F26532} body.is-article .qa-box .qa-more{margin-left:auto;font-size:11.5px;font-weight:600;color:#A3A9B6;text-decoration:none;white-space:nowrap} body.is-article .qa-box .qa-more:hover{color:#253272} /* 메인 Q&A 군청 띠 — 제목은 흰 글자 그대로 */ body.is-front .home-qa .panel-h{color:#fff!important} /* AI INDEX — 메인 카드는 왼쪽 정렬, 서브(오른쪽 기둥)만 가운데 (대표 10/21) */ body.is-front .geo-tabs:not(.rail-gt) .gt-list a{align-items:flex-start!important;text-align:left!important} body.is-front .geo-tabs:not(.rail-gt) .gt-list .gt-g{align-items:flex-start} /* 왼쪽 윙 공유 → sns 로고 팝업 (대표 10/21) */ .wing-pop{position:fixed;z-index:60;transform:translateY(-50%);display:flex;gap:8px;padding:10px 12px;background:#fff;border:1px solid #E2E5EC;border-radius:999px;box-shadow:0 6px 20px rgba(26,29,43,.12)} .wing-pop[hidden]{display:none} .wing-pop .sh{width:40px!important;height:40px!important;min-height:0!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;font-size:0!important;gap:0!important} .wing-pop .sh span{display:none} .wing-pop .sh svg{width:20px;height:20px} /* 안내데스크(/com/*)에는 왼쪽 공유 윙 숨김 (대표 10/21) */ body.is-com .home-tools{display:none!important} /* ===== PC 수정사항 1차 (10/21) — PC(1024px 이상)만. 폰은 예전 그대로 ===== */ @media (max-width:1023px){.pc-only{display:none!important}} @media (min-width:1024px){ body.is-front .mob-only{display:none!important} /* ① 머리: 로고 1.5배, 분야 메뉴·남색 띠 글자 크게, 여백 넉넉히, 최종 업데이트 */ body:not(.is-admin) .masthead .logo img{height:93px!important;width:auto!important;max-height:none!important} body:not(.is-admin) .masthead .secnav a{font-size:21px!important;font-weight:700!important;padding:0 24px!important;height:66px!important;line-height:66px!important} body:not(.is-admin) .mh-sub{height:auto!important} body:not(.is-admin) .mh-sub .wrap{min-height:52px;align-items:center} body:not(.is-admin) .mh-sub a{font-size:19px!important;padding:0 20px 0 0!important;line-height:52px!important;height:auto!important} body:not(.is-admin) .mh-sub-r a{font-size:16px!important} body:not(.is-admin) .masthead>.wrap{position:relative} body:not(.is-admin) .mh-upd{position:absolute;right:0;bottom:8px;margin:0;font-size:12.5px;color:#6B7280;white-space:nowrap;z-index:2} body:not(.is-admin) .mh-upd time{font-weight:700;color:#374151} /* ② 헤드라인 1~5 */ body.is-front .hd5{display:grid;grid-template-columns:minmax(0,2.35fr) minmax(0,1fr);padding:30px!important;margin-bottom:14px} body.is-front .hd5-main{padding-right:30px;border-right:1px solid #E5E7EB;min-width:0} body.is-front .hd5-side{padding-left:30px;display:flex;flex-direction:column;min-width:0} body.is-front .hd5 .thumb{display:block;overflow:hidden;border-radius:8px;background:#EEF0F4} body.is-front .hd5 .thumb img{width:100%;height:100%;object-fit:cover;display:block} body.is-front .hd5 a{color:#111;text-decoration:none} body.is-front .hd5 a:hover{color:#C2410C} body.is-front .hd5-lead h2{margin:0 0 20px;font-size:34px;line-height:1.32;font-weight:800;letter-spacing:-.8px;word-break:keep-all} body.is-front .hd5-lead-b{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start} body.is-front .hd5-lead-b .thumb{aspect-ratio:16/10} body.is-front .hd5-sum{margin:0 0 10px;font-size:15.5px;line-height:1.75;color:#374151;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--bn-sans)} body.is-front .hd5-rel{list-style:none;margin:0;padding:0} body.is-front .hd5-rel li{position:relative;padding-left:12px;font-size:14.5px;line-height:1.5;color:#4B5563} body.is-front .hd5-rel li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:#9CA3AF} body.is-front .hd5-rel a{color:#4B5563;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.is-front .hd5-sub{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:24px;padding-top:24px;border-top:1px solid #E5E7EB} body.is-front .hd5-sub article{display:grid;grid-template-columns:168px minmax(0,1fr);gap:16px;align-items:start} body.is-front .hd5-sub .thumb{aspect-ratio:4/3} body.is-front .hd5-sub h3,body.is-front .hd5-side h3{margin:0 0 8px;font-size:19px;line-height:1.42;font-weight:800;letter-spacing:-.4px;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.is-front .hd5-side article{padding-bottom:20px} body.is-front .hd5-side article+article{padding-top:20px;border-top:1px solid #E5E7EB} body.is-front .hd5-side .thumb{aspect-ratio:16/10;margin-bottom:12px} /* ③ 주요 뉴스 | 많이 본 뉴스 — 나란히, 제목 왼쪽·사진 오른쪽 */ body.is-front .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} body.is-front .duo-box{padding:22px 24px!important} body.is-front .duo-box .rk-list{list-style:none;margin:6px 0 0;padding:0} body.is-front .duo-box .rk-list li+li{border-top:1px solid #EEF0F4} body.is-front .duo-box .rk-list a{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:16px;align-items:center;padding:14px 0;color:#111;text-decoration:none} body.is-front .duo-box .rk-t{font-size:16.5px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.is-front .duo-box .rk-img{display:block;width:120px;aspect-ratio:5/3;border-radius:6px;overflow:hidden;background:#EEF0F4} body.is-front .duo-box .rk-img img{width:100%;height:100%;object-fit:cover} body.is-front .duo-box a:hover .rk-t{color:#C2410C} body.is-front .hl>.hl-main:not(.hl-lowbirth),body.is-front .hl>.hl-rank{display:none!important} body.is-front .hl{grid-template-columns:1fr 1fr!important} /* ④ 기획 연재 4 — 묶음마다 2건, 시각 아래 */ body.is-front .live4{padding:24px 26px 26px!important;margin-bottom:14px} body.is-front .l4-grid{display:grid;grid-template-columns:1fr 1fr;row-gap:26px} body.is-front .l4-g{padding:0 26px} body.is-front .l4-g:nth-child(odd){padding-left:0;border-right:1px solid #E5E7EB} body.is-front .l4-g:nth-child(even){padding-right:0} body.is-front .l4-g h3{margin:0;font-size:19px;font-weight:800} body.is-front .l4-g h3 a{color:#111;text-decoration:none} body.is-front .l4-n{margin:4px 0 14px;font-size:13.5px;color:#6B7280} body.is-front .l4-n b{color:#E9483F;font-weight:800} body.is-front .l4-g ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px} body.is-front .l4-g li a{display:flex;flex-direction:column;gap:9px;color:#111;text-decoration:none} body.is-front .l4-g .thumb{display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#EEF0F4} body.is-front .l4-g .thumb img{width:100%;height:100%;object-fit:cover} body.is-front .l4-g strong{font-size:16px;font-weight:700;line-height:1.48;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.is-front .l4-g li a:hover strong{color:#C2410C} body.is-front .l4-g time{font-size:12.5px;color:#9CA3AF} body.is-front .series.l4-dup{display:none!important} } /* ⑤ 분야별 뉴스 — 첫 기사 사진 크게(폰·PC 공통) */ body.is-front .sec-lead{display:block;margin:2px 0 12px;color:#111;text-decoration:none} body.is-front .sec-lead .thumb{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#EEF0F4;margin-bottom:10px} body.is-front .sec-lead .thumb img{width:100%;height:100%;object-fit:cover;display:block} body.is-front .sec-lead strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:17px;font-weight:800;line-height:1.45} body.is-front .sec-lead:hover strong{color:#C2410C} /* PC 머리 크기 맞춤 — 넘침·겹침 고침 (10/21) */ @media (min-width:1024px){ body:not(.is-admin) .masthead .secnav a{font-size:19px!important;padding:0 16px!important;height:60px!important;line-height:60px!important} body:not(.is-admin) .mh-sub,body:not(.is-admin) .mh-sub .wrap{height:auto!important;min-height:50px!important} body:not(.is-admin) .mh-sub .wrap{flex-wrap:nowrap!important;align-items:center!important} body:not(.is-admin) .mh-sub a{font-size:17px!important;padding:0 16px 0 0!important;line-height:50px!important} body:not(.is-admin) .mh-sub-r a{font-size:15px!important} body:not(.is-admin) .mh-upd{top:62px!important;bottom:auto!important} } @media (min-width:1024px){body:not(.is-admin) .masthead .secnav a{padding:0 13px!important}} @media (max-width:1023px){.mh-upd{display:none!important}} /* 폰은 아래 최종수정 줄로 (10/21) */ /* 남색 띠 구분선 — 두 메뉴 사이 가운데, 글자 높이만큼 (대표 10/21 "선 옮겨줘") */ @media (min-width:1024px){ body:not(.is-admin) .mh-sub>.wrap>a{padding:0 12px!important;position:relative} body:not(.is-admin) .mh-sub>.wrap>a:first-child{padding-left:0!important} body:not(.is-admin) .mh-sub>.wrap>a+a{border-left:0!important} body:not(.is-admin) .mh-sub>.wrap>a+a::before{content:"";position:absolute;left:0;top:50%;width:1px;height:16px;margin-top:-8px;background:rgba(255,255,255,.4)} } /* 남색 띠 구분선 없앰 (대표 10/21 "선 지워줘") */ body:not(.is-admin) .mh-sub>.wrap>a+a{border-left:0!important} body:not(.is-admin) .mh-sub>.wrap>a+a::before{display:none!important} @media (min-width:1024px){body:not(.is-admin) .mh-sub>.wrap>a{padding:0 14px!important}body:not(.is-admin) .mh-sub>.wrap>a:first-child{padding-left:0!important}} /* 메인 정리 (대표 10/21 "메인페이지 정리해줘") — PC */ @media (min-width:1024px){ /* 칼럼·저출산 두 상자 한 줄에 나란히 (예전 4칸 배치 자리 지정 풀기) */ body.is-front .hl>*{grid-area:auto!important;grid-row:auto!important;grid-column:auto!important} body.is-front .hl{grid-template-rows:auto!important;align-items:stretch} /* 더 깊이 읽기 — 빈칸 없이 3칸으로 채우고, 광고 띠는 맨 아래 한 줄 */ body.is-front .series-grid>.series-ad{order:99;grid-column:1 / -1} body.is-front .series-grid>.series.is-deal{grid-column:span 2} } /* 최종 업데이트 — SNS 로고 바로 아래, 오른쪽 끝을 페이스북 로고에 맞춤, 시계 아이콘 (대표 10/21) */ @media (min-width:1024px){ body:not(.is-admin) .mh-sns{position:relative;top:-16px} body:not(.is-admin) .mh-upd{display:flex;align-items:center;gap:4px;top:auto!important;bottom:auto!important} body:not(.is-admin) .mh-upd svg{width:14px;height:14px;fill:none;stroke:#6B7280;stroke-width:1.8;stroke-linecap:round} } /* 좁은 PC(1024~1279) — 분야 메뉴가 검색창과 겹치지 않게 (10/21) */ @media (min-width:1024px) and (max-width:1279px){body:not(.is-admin) .masthead .secnav a{font-size:16px!important;padding:0 8px!important}body:not(.is-admin) .mh-sub>.wrap>a{font-size:15px!important;padding:0 9px!important}} /* 윙을 오른쪽으로, 아래에 SNS 로고 — 상단 SNS 는 PC 에서 숨김 (대표 10/21) */ .home-tools .ht-sns{display:none} @media (min-width:1300px){ body:not(.is-admin) .home-tools{left:auto!important;right:calc(50% - 620px - 76px)!important} body:not(.is-admin) .masthead .mh-sns{display:none!important} body:not(.is-admin) .home-tools{border-radius:32px!important} body:not(.is-admin) .home-tools .ht-sns{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 12px;border-top:1px solid #E2E5EC} body:not(.is-admin) .home-tools .ht-sns a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#9CA3AF;color:#fff} body:not(.is-admin) .home-tools .ht-sns a:hover{background:#253272} body:not(.is-admin) .home-tools .ht-sns svg{width:18px;height:18px;fill:currentColor} } @media (min-width:1300px) and (max-width:1419px){body:not(.is-admin) .home-tools{right:max(4px,calc(50% - 620px - 50px))!important}body:not(.is-admin) .home-tools .ht-sns a{width:30px;height:30px}} /* 윙 SNS — 동그라미 없이 로고만 크게 (대표 10/21) */ @media (min-width:1300px){body:not(.is-admin) .home-tools .ht-sns a{width:40px!important;height:36px!important;background:none!important;border-radius:0!important;color:#6B7280!important}body:not(.is-admin) .home-tools .ht-sns a:hover{color:#253272!important;background:none!important}body:not(.is-admin) .home-tools .ht-sns svg{width:30px!important;height:30px!important}} /* 윙 SNS 로고 — 테두리 없는 로고, 단색 회색·크게 (대표 10/21) */ @media (min-width:1300px){body:not(.is-admin) .home-tools .ht-sns{gap:14px!important;padding:14px 0 16px!important}body:not(.is-admin) .home-tools .ht-sns a{width:auto!important;height:auto!important}body:not(.is-admin) .home-tools .ht-sns svg{width:24px!important;height:24px!important;fill:currentColor!important;stroke:none!important}} /* 윙 SNS — 연회색 동그라미 안 회색 로고 (대표 10/21 참고 그림) */ @media (min-width:1300px){body:not(.is-admin) .home-tools .ht-sns{gap:8px!important;padding:12px 0 14px!important}body:not(.is-admin) .home-tools .ht-sns a{display:grid!important;place-items:center;width:40px!important;height:40px!important;border-radius:50%!important;background:#F1F2F5!important;color:#9AA0AB!important}body:not(.is-admin) .home-tools .ht-sns a:hover{background:#E6E8EE!important;color:#253272!important}body:not(.is-admin) .home-tools .ht-sns svg{width:20px!important;height:20px!important;fill:currentColor!important;stroke:none!important}} @media (min-width:1300px) and (max-width:1419px){body:not(.is-admin) .home-tools .ht-sns a{width:34px!important;height:34px!important}body:not(.is-admin) .home-tools .ht-sns svg{width:17px!important;height:17px!important}} /* 윙 SNS 로고만 조금 더 크게 (대표 10/21) */ @media (min-width:1300px){body:not(.is-admin) .home-tools .ht-sns svg{width:24px!important;height:24px!important}} @media (min-width:1300px) and (max-width:1419px){body:not(.is-admin) .home-tools .ht-sns svg{width:20px!important;height:20px!important}} /* HOME → 집 아이콘 (대표 10/21) */ body:not(.is-admin) .mh-sub .mh-home{display:inline-flex!important;align-items:center} body:not(.is-admin) .mh-sub .mh-home-ic{width:22px;height:22px;fill:#fff;display:block} @media (max-width:1023px){body:not(.is-admin) .mh-sub .mh-home-ic{width:18px;height:18px}} /* 주황 칸 메뉴가 본문 오른쪽 끝을 넘지 않게 (대표 10/21 "회원가입 넘어가지 않게") */ @media (min-width:1024px){body:not(.is-admin) .mh-sub-r .sep{margin:0 6px!important}body:not(.is-admin) .mh-sub-r{flex-shrink:0;margin-right:0!important;padding-right:0!important}body:not(.is-admin) .mh-sub>.wrap{overflow:visible}} /* 분야 메뉴 글자 세로 가운데 (대표 10/21) */ @media (min-width:1024px){body:not(.is-admin) .masthead .secnav{display:flex!important;align-items:center!important;align-self:stretch}body:not(.is-admin) .masthead .secnav a{height:auto!important;line-height:1.3!important;padding-top:0!important;padding-bottom:0!important;display:inline-flex;align-items:center}} /* 좁은 PC(1024~1279) — 주황 칸도 본문 끝 안으로 */ @media (min-width:1024px) and (max-width:1279px){body:not(.is-admin) .mh-sub>.wrap>a{font-size:14px!important;padding:0 7px!important}body:not(.is-admin) .mh-sub-r a{font-size:13px!important}body:not(.is-admin) .mh-sub-r .sep{margin:0 4px!important}body:not(.is-admin) .mh-sub-r svg{width:13px;height:13px}} /* 남색 띠 — 간격 좁히고 메뉴 사이 ㅣ (대표 10/21) */ @media (min-width:1024px){body:not(.is-admin) .mh-sub>.wrap>a{padding:0!important}body:not(.is-admin) .mh-sub>.wrap>a:first-child{padding-right:4px!important}body:not(.is-admin) .mh-sub>.wrap>a+a::before{content:"ㅣ"!important;display:inline-block!important;position:static!important;width:auto!important;height:auto!important;margin:0 9px!important;background:none!important;color:rgba(255,255,255,.45);font-weight:400}} @media (min-width:1024px) and (max-width:1279px){body:not(.is-admin) .mh-sub>.wrap>a+a::before{margin:0 5px!important}} /* ㅣ 넣은 뒤 넘침 고침 — 1분 육아가 주황 칸에 안 가리게 (10/21) */ @media (min-width:1280px){body:not(.is-admin) .mh-sub>.wrap>a{font-size:16px!important}body:not(.is-admin) .mh-sub>.wrap>a+a::before{margin:0 7px!important}body:not(.is-admin) .mh-sub-r{margin-left:auto!important;padding-left:26px!important}} /* 헤더 오른쪽 16주년 문구 (대표 10/21) — PC 만 */ .mh-16{display:none} @media (min-width:1024px){body:not(.is-admin) .mh-16{display:block;position:absolute;right:20px;top:30px;width:300px;z-index:2;text-decoration:none;font-family:"Pretendard Variable",Pretendard,sans-serif}body:not(.is-admin) .mh-16 svg{display:block;width:100%;height:auto;overflow:visible}} @media (min-width:1024px) and (max-width:1279px){body:not(.is-admin) .mh-16{width:230px;top:40px}} @media (min-width:1024px){body:not(.is-admin) .mh-16{top:62px!important}} /* 한 줄만 — 최종 업데이트 위 (10/21) */ @media (min-width:1024px){body:not(.is-admin) .mh-16{top:40px!important}} /* 두 줄 — 최종 업데이트 위 (10/21) */ /* 메뉴에 EVENT 추가 (대표 10/21) · 검색창과 겹치지 않게 칸 간격을 줄이고 메뉴를 조금 왼쪽으로 */ @media (min-width:1024px){body:not(.is-admin) .masthead .secnav a{padding:0 10px!important}body:not(.is-admin) .masthead .secnav{margin-right:60px!important}} @media (min-width:1024px) and (max-width:1279px){body:not(.is-admin) .masthead .secnav a{padding:0 7px!important}body:not(.is-admin) .masthead form.search{width:150px!important;min-width:0!important}} /* 좁은 PC 화면에서도 EVENT 와 검색창이 겹치지 않게 (10/21) */ /* 머리 세로 줄임 · 로고 93→70, 위아래 여백 줄임 (대표 10/21 "로고 좀 줄이고 세로 길이 줄여줘" · "메인페이지도 세로 줄여줘") · class 머리(/embed/masthead)도 같은 것 */ @media (min-width:1024px){body:not(.is-admin) .masthead .logo{padding:12px 0 8px!important}body:not(.is-admin) .masthead .logo img{height:70px!important}} @media (min-width:1024px){body:not(.is-admin) .masthead .mh-16{top:6px!important}body:not(.is-admin) .masthead .mh-16 svg{height:56px!important;width:auto!important}} /* 머리를 줄인 뒤 16주년 문구가 최종 업데이트와 겹치지 않게 (10/21) */ /* 16주년 문구 한 줄 · '감사합니다! 베이비뉴스 16주년!' ↔ '홈페이지 개편! 앱 출시!' 번갈아 (대표 10/21) */ @media (min-width:1024px){body:not(.is-admin) .masthead .mh-16{top:28px!important}body:not(.is-admin) .masthead .mh-16 svg{height:34px!important;width:300px!important;overflow:hidden}} .mh-16 text{animation:mh16a 8s infinite}.mh-16 .r2{animation-name:mh16b} @keyframes mh16a{0%,42%{opacity:1;transform:none}50%,92%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:none}} @keyframes mh16b{0%,42%{opacity:0;transform:translateY(12px)}50%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(12px)}} @media (prefers-reduced-motion:reduce){@keyframes mh16a{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes mh16b{0%,49%{opacity:0}50%,100%{opacity:1}}} /* 최종 업데이트 · 주황 띠 아래 오른쪽 한 줄 (대표 10/21) */ .mh-upd-row{display:none} @media (min-width:1024px){.mh-upd-row{display:block;background:transparent}.mh-upd-row .wrap{display:flex;justify-content:flex-end;height:22px;align-items:center;min-height:0!important;padding-top:0!important}body:not(.is-admin) .mh-upd-row .mh-upd{position:static!important;top:auto!important;right:auto!important;font-size:12px;line-height:1}body.is-embed .mh-upd{display:none!important}} @media (min-width:1024px){.mh-upd-row{background:#EEF0F4!important}} /* 최종 업데이트 줄 바탕 = 전체 배경 (대표 10/21) */ @media (min-width:1024px){.mh-upd-row .wrap{height:36px!important}body:has(.mh-upd-row) main.wrap{padding-top:0!important}} /* 최종 업데이트 · 주황 띠와 아래 카드 사이 한가운데 (대표 10/21) */ @media (min-width:1024px){body:not(.is-admin) .mh-sub{background:linear-gradient(90deg,#253272 var(--orx,100%),#F26532 var(--orx,100%))!important}} /* 주황 아래 남색 줄 없앰 (10/21) */ /* 주황 띠 위 오른쪽, 걸터앉은 엄마·아기·아빠 그림자 (대표 10/21) · 넓은 화면에서만 (띠 글자와 안 겹치게) */ .mh-family{display:none} @media (min-width:1600px){body:not(.is-admin) .mh-sub{position:relative;overflow:visible}body:not(.is-admin) .mh-family{display:block;position:absolute;left:calc(50% + 640px + 60px);top:-30px;width:90px;height:46px;z-index:3;pointer-events:none}.mh-family svg{display:block;width:90px;height:46px;fill:#1A1F36;opacity:.55}.mh-family .arm{fill:none;stroke:#1A1F36;stroke-width:3;stroke-linecap:round}} @media (min-width:1600px){body:not(.is-admin) .mh-family{top:-39px!important;width:72px!important;height:64px!important}.mh-family img{display:block;width:72px;height:64px;opacity:.55}} /* 실루엣 사진으로 (10/21) */ @media (min-width:1600px){body:not(.is-admin) .mh-family{width:34px!important}.mh-family img{width:34px!important}} /* 아빠 빼고 엄마·아이만 (대표 10/21) */ @media (min-width:1600px){body:not(.is-admin) .mh-family{left:auto!important;right:48px!important;top:-29px!important;width:26px!important;height:48px!important}.mh-family img{width:26px!important;height:48px!important}} /* 더 작게, 오른쪽으로 (대표 10/21) */ @media (min-width:1600px){body:not(.is-admin) .mh-family{left:auto!important;right:48px!important;top:-24px!important;width:52px!important;height:40px!important}.mh-family img{width:52px!important;height:40px!important;opacity:1!important}} /* 대표가 준 실루엣, 최대한 작게 (10/21) */ @media (min-width:1600px){body:not(.is-admin) .mh-family{top:-33px!important;width:72px!important;height:56px!important}.mh-family img{width:72px!important;height:56px!important}} /* 조금 더 크게 (대표 10/21) */ @media (min-width:1440px){body:not(.is-admin) .mh-sub{position:relative;overflow:visible}body:not(.is-admin) .mh-family{display:block!important;position:absolute;z-index:3;pointer-events:none;right:auto!important;left:calc(50% + 624px)!important;top:-33px!important;width:72px!important;height:56px!important}.mh-family img{display:block;width:72px!important;height:56px!important}} /* 검색창 오른쪽 끝 바로 옆 띠 위 (대표 10/21 체크 위치) */ @media (min-width:1440px){.mh-family img{opacity:.55!important}} /* 회색 좀 더 연하게 (대표 10/21) */ @media (min-width:1440px){body:not(.is-admin) .mh-family{top:-37px!important;width:73px!important;height:60px!important}.mh-family img{width:73px!important;height:60px!important;opacity:1!important}} /* 가족 사진(컬러)으로 (대표 10/21) */ @media (min-width:1440px){body:not(.is-admin) .mh-family{left:auto!important;right:24px!important}} /* 가족 사진 · 띠 오른쪽 끝으로 (대표 10/21) */ /* Noto Sans KR 로 바꾼 뒤 글자가 넓어져 메뉴·남색 띠를 조금 줄임 (대표 10/21) */ @media (min-width:1280px){body:not(.is-admin) .masthead .secnav a{font-size:17px!important;letter-spacing:-.6px}body:not(.is-admin) .mh-sub>.wrap>a{font-size:15px!important;letter-spacing:-.5px}body:not(.is-admin) .mh-sub-r a{font-size:14px!important;letter-spacing:-.4px}} @media (min-width:1024px) and (max-width:1279px){body:not(.is-admin) .masthead .secnav a{font-size:15px!important;letter-spacing:-.6px;padding:0 6px!important}body:not(.is-admin) .mh-sub>.wrap>a{font-size:13px!important;letter-spacing:-.5px}body:not(.is-admin) .mh-sub-r a{font-size:12.5px!important;letter-spacing:-.4px}} @media (min-width:1280px){body:not(.is-admin) .mh-sub>.wrap>a{font-size:14.5px!important;letter-spacing:-.6px}body:not(.is-admin) .mh-sub>.wrap>a+a::before{margin:0 5px!important}} @media (min-width:1024px) and (max-width:1279px){body:not(.is-admin) .mh-sub>.wrap>a{font-size:12px!important;letter-spacing:-.8px;padding:0 1px!important}body:not(.is-admin) .mh-sub>.wrap>a+a::before{margin:0 2px!important}body:not(.is-admin) .mh-sub-r a{font-size:12px!important;letter-spacing:-.5px}body:not(.is-admin) .mh-sub-r .sep{margin:0 3px!important}body:not(.is-admin) .mh-sub-r{padding-left:18px!important}} /* 제목도 Noto Sans KR (대표 10/21 "타이틀도 아까 폰트로") — 명조 제목을 모두 바꿈. 16주년 문구·칼럼니스트 글자 배너는 명조 그대로. 불러온 굵기가 300~700 이라 900 은 700 으로 */ body.is-front{--bn-serif:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif} body.is-front .front-lead h2,body.is-front .front-tile h3,body.is-front .hl-live .nc-t,body.is-front .nc-rank .nc-n,body.is-front .sec-col li:first-child a,body.is-front .series li:first-child a{font-family:var(--bn-serif)!important} body.is-front .front-lead h2,body.is-front .sect-head h2,body.is-front .panel-h,body.is-front .sec-col>h3,body.is-front .series>h3,body.is-front .rk-n,body.is-front .nc-rank .nc-n,body.is-front #ev-h{font-weight:700!important} /* 휴대폰 AI INDEX 제목 두 줄 — 1줄 '베이비뉴스 육아브랜드 AI INDEX', 2줄 설명 (대표 10/21 "타이틀 두줄로") */ @media (max-width:640px){body.is-front .geo-tabs .gt-head .panel-h{display:block!important;font-size:19px!important;line-height:1.35!important;white-space:nowrap;letter-spacing:-.5px}body.is-front .geo-tabs .gt-head .panel-h .bi{display:inline-block;vertical-align:-3px;margin-right:6px}body.is-front .geo-tabs .gt-head .gt-sub{display:block!important;margin:4px 0 0!important;font-size:13.5px!important;white-space:normal;letter-spacing:-.3px}} /* 기사 도구 줄 글자 한 줄로 — '글자크기'가 세 줄로 꺾이던 것 (대표 10/21) */ .art-tools button span,.art-tools .tool-link span{white-space:nowrap} @media (max-width:640px){body.is-article .art-tools button,body.is-article .art-tools .tool-link{gap:4px!important;padding-left:4px!important;padding-right:4px!important;font-size:13px!important;min-width:0}body.is-article .art-tools button svg,body.is-article .art-tools .tool-link svg{width:18px!important;height:18px!important;flex:none}} /* 가족 사진 누르면 16주년 공지 (대표 10/21) */ @media (min-width:1440px){body:not(.is-admin) a.mh-family{pointer-events:auto!important;cursor:pointer}} /* 모바일 기사박스 배열 (10/22): 헤드라인 → 주요 뉴스 → 많이 본 뉴스 → 기획연재 → 피플 & 인터뷰 → 전문가 칼럼 */ @media (max-width:1023px){ body.is-front .hl{grid-template-columns:1fr!important;grid-template-areas:none!important} body.is-front .hl>*{grid-area:auto!important;grid-column:auto!important;grid-row:auto!important} body.is-front .hl>.hl-main:not(.hl-lowbirth){order:1} body.is-front .hl>.hl-rank{order:2} body.is-front .hl>.hl-l4m{order:3} body.is-front .hl>.hl-lowbirth{order:4} body.is-front .hl>.hl-live{order:5} body.is-front .hl-l4m{background:#F3F4F8!important} body.is-front .l4m-g+.l4m-g{margin-top:14px;padding-top:12px;border-top:1px solid #E5E7EB} body.is-front .l4m-g h3{margin:0 0 6px;font-size:16px;font-weight:800} body.is-front .l4m-g h3 a{color:#111;text-decoration:none} }