/* 양평닷케이알 — 사이트 공통 스타일 (모든 페이지가 먼저 불러온다) 🔴 2026-09-13 사장님 승인 목업_첫화면_v7 · 목업_글페이지_v4 · 목업_동네페이지_v3 의 규칙을 옮긴 것이다("진행합니다"). 값을 바꾸면 화면이 바뀐다 = 디자인 변경. 승인 없이 수정 금지. 이전 판 = _백업_site_v7적용전_2026-09-13/site/css/ 움직임(표지 슬라이드·떠오름·머리 숨김 등)은 아직 넣지 않는다 — v8 승인 뒤 motion.css/.js 로 얹는다. 그래서 이 파일은 "움직임 없을 때" 모양이다: 표지 여러 장은 위아래로 모두 보인다(목업 v7 JS 꺼짐 캡처와 같음). 움직임이 붙을 자리(바꾸지 말 것): .cs / .cs-track / .cs-slide(표지) · .swipe-row(휴대폰 옆 넘김 줄) · data-reveal(떠오를 것) · data-parallax(표지 시차) · data-progress(읽기 막대) · .card · .dongs > * · .cur > * · section > .st 링크 대상 페이지가 아직 없으면 빌더가 를 같은 모양의 으로 바꾼다 — 그래서 모양 규칙은 태그가 아니라 자리로 건다. 글자: Noto Sans KR 300·400·500·700 (각 페이지 에서 불러온다). 본문 18px, 가장 옅은 글자 #555, 누르는 곳 44px 이상. */ :root{--ink:#121212;--ink-2:#444;--ink-3:#555;--rule:#d6d6d6;--thin:#ececec;--bg:#fff;--panel:#1b1b1b; --ink-soft:#555;--line:#d6d6d6;--accent:#121212} /* 뒤 셋 = 옛 이름(안내 페이지 인라인 스타일이 쓴다) */ *{margin:0;padding:0;box-sizing:border-box} body{background:var(--bg);color:var(--ink); font-family:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif; font-size:18px;line-height:1.8;-webkit-font-smoothing:antialiased;word-break:keep-all} a{color:inherit;text-decoration:none} strong,b{font-weight:700} .wrap{max-width:1180px;margin:0 auto;padding-inline:24px} .noph{display:flex;align-items:center;justify-content:center;width:100%;height:100%; background:#e4e4e4;color:#555;font-size:15px;text-align:center} .ph img{display:block;width:100%;height:100%;object-fit:cover} /* 사진 톤 — 차분하게 한 톤으로 · 대문은 무채색에 가깝게 */ .ph img{filter:saturate(.72) contrast(1.02)} .hero .ph img{filter:grayscale(.9) contrast(1.08) brightness(.92)} /* ============ 머리 — 두 굵기 로고 · 메뉴 4단어 · 검색 ============ */ .hd{border-bottom:1px solid var(--thin)} .hd .wrap{display:flex;align-items:center;gap:28px;height:76px} .home .hd{border-bottom:0} .home .hd .wrap{gap:30px;height:80px} .logo{font-size:27px;letter-spacing:-.04em;white-space:nowrap;line-height:1} .logo .l1{font-weight:300} .logo .l2{font-weight:700} .menu{display:flex;gap:4px;list-style:none} .menu li>*{display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:17px;font-weight:400;color:#222} .menu a:hover,.menu li>.on{font-weight:700;color:var(--ink)} .srch{margin-left:auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center} .srch svg{width:26px;height:26px} /* ============ 표지 슬라이드 자리 — 움직임 전에는 위아래로 모두 보인다 ============ */ .cs-track{display:grid;gap:18px} /* ============ 대문 — 어두운 글 판 + 무채색 사진 = 한 덩어리 ============ */ .hero{display:grid;grid-template-columns:1fr 2.2fr;min-height:440px;background:var(--panel)} .hero .tx{color:#fff;padding:44px 38px;display:flex;flex-direction:column} .hero .kick{font-size:16px;color:#e6e6e6;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.26)} .hero h1,.hero h2{font-size:32px;line-height:1.4;font-weight:700;margin-top:18px;letter-spacing:-.02em} .hero p{font-size:18px;line-height:1.75;color:#e8e8e8;margin-top:auto;padding-top:24px} .hero .more{display:inline-flex;align-items:center;min-height:48px;margin-top:10px;font-size:17px;font-weight:700;color:#fff} .hero .ph{min-height:440px} /* ============ 섹션 제목 + 가는 회색 선 ============ */ section{margin-top:76px} .st{display:flex;align-items:baseline;justify-content:space-between;gap:16px; font-size:21px;font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:28px} .st>*{font-size:16px;font-weight:500;color:#333;min-height:44px;display:inline-flex;align-items:center} /* ============ 이달의 글(왼쪽) + 양평 소식(오른쪽 목록) ============ */ .row2{display:grid;grid-template-columns:2fr 1fr;gap:44px} .feat>:not(.st){display:block} .feat .ph{position:relative;height:340px} .feat .ph::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34)} .feat .ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px} .feat .ov b{font-size:44px;line-height:1.3;font-weight:700;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.35)} .feat .ov span{font-size:19px;margin-top:8px} .feat h3{font-size:23px;line-height:1.5;font-weight:700;margin-top:22px} .feat h3 small{font-size:17px;font-weight:400;color:#333;margin-left:10px} .feat p{color:var(--ink-2);margin-top:8px} /* 날짜 붙은 양평 소식 목록 (첫 화면 오른쪽 · /양평소식/) */ .news{list-style:none} .news li>*{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:start;padding:12px 0} .news .th{height:74px;overflow:hidden;background:#e4e4e4} .news b{display:block;font-size:17px;line-height:1.5;font-weight:700; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .news .d{display:block;font-size:16px;color:var(--ink-3);margin-top:4px} .news a:hover b{text-decoration:underline;text-underline-offset:4px} /* 바깥 소식(군청 등) = 글자만 — 그림을 싣지 않는다(공공누리 제4유형 대비, lead 결정 2026-09-13) */ .news li>.ext{grid-template-columns:1fr} .news-more{display:flex;justify-content:flex-end;margin-top:8px} .news-more>*{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:700} .news.wide li{border-bottom:1px solid var(--thin)} .news.wide li>*{grid-template-columns:160px 1fr;gap:24px;padding:18px 0} .news.wide .th{height:108px} .news.wide b{font-size:20px} .news.wide .s{display:block;font-size:17px;color:var(--ink-2);margin-top:6px;line-height:1.7} /* ============ 생활 안내 — 3단 카드 (제목 위 연재 이름 · 아래 분류 | 글·사진) ============ */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:50px 30px} .card>*{display:block} .card .ph{height:230px;overflow:hidden;background:#e4e4e4} .card .ser{font-size:16px;font-weight:500;color:#222;margin-top:18px} .card h3{font-size:22px;line-height:1.45;font-weight:700;margin-top:6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card .ph+h3{margin-top:18px} .card p{font-size:18px;line-height:1.75;color:var(--ink-2);margin-top:10px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card .meta{display:flex;justify-content:space-between;gap:10px;font-size:16px;color:var(--ink-3); margin-top:16px;padding-top:12px;border-top:1px solid var(--thin)} .card a:hover h3{text-decoration:underline;text-underline-offset:5px} /* ============ 양평 동네별(왼쪽) + 분야별로 찾기(오른쪽) ============ */ .row3{display:grid;grid-template-columns:2fr 1fr;gap:44px} .dong-say{color:#333;margin:-10px 0 22px} .dongs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 18px} .dongs.wide{grid-template-columns:repeat(4,1fr)} .dongs>*{display:block} .dongs .ph{height:104px;overflow:hidden} .dongs b{display:block;font-size:20px;font-weight:700;margin-top:10px;line-height:1.4} .dongs em{display:block;font-style:normal;font-size:16px;color:var(--ink-3);line-height:1.5} .dongs .ri{display:block;font-size:16px;color:var(--ink-3);line-height:1.6;margin-top:6px;padding-top:6px;border-top:1px solid var(--thin)} .dongs .ri b{display:inline;font-size:16px;font-weight:500;color:#333;margin:0} .dongs a:hover>b{text-decoration:underline;text-underline-offset:5px} .catlist{list-style:none} .catlist li>*{display:flex;align-items:center;gap:16px;min-height:62px;padding:8px 0;border-bottom:1px solid var(--thin)} .catlist .th{width:64px;height:48px;flex-shrink:0;overflow:hidden;background:#e4e4e4} .catlist .th img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72)} .catlist b{font-size:18px;font-weight:700;display:block;line-height:1.4} .catlist em{font-style:normal;font-size:16px;color:var(--ink-3);display:block;line-height:1.4} /* ============ 모아 보기 — 사진 위 네모 이름표 + 사진 아래 해시태그 ============ */ .cur{display:grid;grid-template-columns:1fr 1fr;gap:30px} .cur>*{display:block} .cur .ph{position:relative;height:300px;overflow:hidden} .cur .ph::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)} .cur .ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px} .cur .badge{font-size:15px;border:1px solid rgba(255,255,255,.85);padding:1px 12px;margin-bottom:12px} .cur .ov b{font-size:32px;line-height:1.35;font-weight:700;letter-spacing:-.02em} .cur .tags{font-size:16px;color:#333;margin-top:16px} .cur h3{font-size:22px;font-weight:700;margin-top:4px} /* ============ 운영자 ============ */ .author{display:flex;gap:32px;align-items:center;padding:40px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .author .face{width:120px;height:120px;border-radius:50%;flex-shrink:0;overflow:hidden} .author h3{font-size:22px;font-weight:700} .author p{color:#333;margin-top:6px} .author .link{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:500;border-bottom:1px solid var(--ink)} /* ============ 목록 페이지 (/동네/ · /분류/ · /생활안내/ · /모아보기/ · /양평소식/) — 위 부품만 쓴다 ============ */ .crumb{font-size:16px;color:var(--ink-3);margin-top:22px} .crumb>*{display:inline-flex;align-items:center;min-height:44px} .crumb a{text-decoration:underline;text-underline-offset:4px} h1.st{margin-top:14px;font-size:30px;letter-spacing:-.02em} .intro{max-width:880px;font-size:19px;line-height:1.85;margin:-6px 0 12px} .intro-src{max-width:880px;font-size:16px;color:var(--ink-3);margin-bottom:34px} /* ============ 꼬리 — 작은 로고 + 회색 한 줄 · 오른쪽 링크 (전화번호는 여기에만) ============ */ footer{margin-top:80px;border-top:1px solid var(--thin)} footer .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:20px 36px} footer .fl{font-size:19px;letter-spacing:-.04em;white-space:nowrap} footer .fl .l1{font-weight:300} footer .fl .l2{font-weight:700} footer .info{font-size:16px;color:var(--ink-3)} footer nav{margin-left:auto;display:flex;align-items:center;font-size:16px} footer nav>*{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:#222} /* 꼬리 둘째 줄 — 「광고·수수료 안내」·「사진 출처」 (2026-09-13 사장님 승인 목업_사진출처_글표지캡션_v1 B안 · 광고 칸 v2 ③). 광고·추천 칸이 한 곳이라도 나가는 빌드에서만 빌더가 이 줄을 상시 고지 문장으로 바꾼다. */ footer .notice{margin-top:10px;font-size:16px;line-height:1.7;color:#333;border-top:1px solid var(--thin);padding-top:10px;max-width:1180px;margin-inline:auto;padding-inline:24px;padding-bottom:26px} footer .notice a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;border-bottom:1px solid var(--ink);margin-right:10px} /* ============ 사진 출처 (/사진출처/ — 2026-09-13 사장님 승인 목업_사진출처_페이지_v1 · B안) ============ site.css 의 .intro·section·.st 규칙과 섞이지 않게 .ph-page 아래로만 건다. */ .ph-page{max-width:980px;margin:0 auto;padding:0 24px 90px} .ph-page h1{font-size:34px;line-height:1.35;letter-spacing:-.02em;margin-top:8px} .ph-page .intro{max-width:none;font-size:18px;line-height:1.8;margin:14px 0 0;color:#222} .ph-page .intro p+p{margin-top:8px} .ph-page .lics{margin-top:16px;padding:14px 18px;background:#f7f7f7;border-left:4px solid #121212;font-size:17px} .ph-page .lics a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;border-bottom:1px solid var(--ink)} .ph-page section{margin-top:52px} .ph-page h2.st{display:block;font-size:23px;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:6px} .ph-page h2.st small{display:inline;min-height:0;font-size:16px;font-weight:400;color:#555;margin-left:6px} .crs{list-style:none} .cr{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--thin);align-items:start} .cr img{display:block;width:140px;height:94px;object-fit:cover;background:#e4e4e4} .cr > div{min-width:0} /* 긴 주소가 칸을 넓혀 휴대폰 화면이 옆으로 밀리지 않게 */ .cr b{display:block;font-size:18px;line-height:1.5} .cr span{display:block;font-size:16px;line-height:1.6;color:#333;overflow-wrap:anywhere} .cr .where{color:#555} .cr .lic a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;border-bottom:1px solid var(--ink)} .cr .nolink{display:inline;color:#555} .cr .chg{color:#555} .tmpsec .say{font-size:16px;color:#333;margin:10px 0 4px;padding:10px 14px;border:1px dashed #999} .cr.tmp img{filter:grayscale(1);opacity:.8} .ph-page .last{margin-top:40px;font-size:16px;color:#555} /* 가로 줄(휴대폰 snap)을 품은 칸이 줄 길이만큼 넓어져 화면 전체가 축소되는 것을 막음 */ .row2 > *, .row3 > *{min-width:0} /* ============ 대표 표지(첫 화면, 목업 v9b 컬러판) — 화면 폭 전체 컬러 사진 + 고정 글자 ============ 사진 층(.bc-ph)은 .ph 가 아니라서 다른 사진의 채도 낮춤이 걸리지 않는다(= 컬러). 겹쳐 바뀜·확대·단추는 motion.css/.js */ .bc{position:relative;height:calc(100vh - var(--m-tick-h));min-height:560px;overflow:hidden;background:#20262b;color:#fff;touch-action:pan-y} .js .bc{margin-top:calc(-1 * var(--m-hd-h))} /* 투명 머리 밑으로 파고듦(JS 켜짐일 때만) */ .bc-bg, .bc-ph{position:absolute;inset:0;margin:0} .bc-bg{z-index:0} /* 사진 층의 z-index 가 이 안에서만 쌓이게 → 글자·단추·출처를 덮지 않음 */ .bc-ph img{display:block;width:100%;height:100%;object-fit:cover} .bc-shade{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.06) 30%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.66) 100%)} .bc-in{position:absolute;left:0;right:0;bottom:0;max-width:1180px;margin:0 auto;padding:0 24px 100px;z-index:2} .bc-k{font-size:18px;font-weight:500;color:#f2f2f2} .bc-t{font-size:66px;line-height:1.1;letter-spacing:-.04em;margin-top:10px;text-shadow:0 2px 18px rgba(0,0,0,.35)} .bc-t .l1{font-weight:300} .bc-t .l2{font-weight:700} .bc-s{font-size:22px;margin-top:14px;color:#f6f6f6;text-shadow:0 1px 10px rgba(0,0,0,.4)} .bc-btns{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} .bc-b{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border:1px solid rgba(255,255,255,.9);background:#fff;color:#121212;font-size:18px;font-weight:700} .bc-b2{background:rgba(0,0,0,.28);color:#fff} .bc-cap{position:absolute;right:24px;bottom:28px;z-index:2;max-width:46%;font-size:15px;line-height:1.5;color:#f2f2f2;text-align:right;text-shadow:0 1px 6px rgba(0,0,0,.6)} /* 컴퓨터: 표지가 제자리에 있고 흰 본문이 덮어 올라옴(커튼) — 첫 화면에서만 */ @media(min-width:601px){ .js .home .bc{position:sticky;top:0;z-index:0} .js .home main.wrap{position:relative;z-index:2;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);padding-bottom:80px} .js .home footer{position:relative;z-index:2;background:#fff;margin-top:0} } @media(max-width:600px){ .bc{height:calc(100svh - var(--m-tick-h));min-height:480px} .js .bc{margin-top:calc(-1 * (var(--m-hd-h-m) + var(--m-menu-h)))} .bc-in{padding:0 20px 128px} .bc-t{font-size:46px} .bc-s{font-size:19px} .bc-b{min-height:48px;padding:0 20px;font-size:17px} .bc-cap{left:20px;right:20px;bottom:14px;max-width:none;text-align:left;font-size:14px} } /* ============ 태블릿 ============ */ @media(max-width:960px){ .hero{grid-template-columns:1fr 1.3fr} .row2,.row3{grid-template-columns:1fr} .cards{grid-template-columns:1fr 1fr} .dongs.wide{grid-template-columns:repeat(3,1fr)} } /* ============ 휴대폰 (≤ 480px) ============ */ @media(max-width:480px){ .wrap{padding-inline:16px} .hd .wrap,.home .hd .wrap{flex-wrap:wrap;height:auto;gap:0;padding-top:12px} .logo{font-size:25px} /* 옆으로 밀어야 보이는 메뉴는 어르신이 모르고 지나친다 → 접어서 모두 보이게 */ .menu{order:3;width:100%;flex-wrap:wrap;gap:0;margin:4px -8px 0} .menu li>*{padding:0 8px;white-space:nowrap} .hero{grid-template-columns:1fr;margin-inline:-16px} .hero .ph{min-height:0;height:240px;order:-1} .hero .tx{padding:26px 20px 18px} .hero h1,.hero h2{font-size:27px;margin-top:14px} .hero p{padding-top:14px;margin-top:0} section{margin-top:56px} .feat .ph{height:220px} .feat .ov b{font-size:32px} .feat h3 small{display:block;margin:2px 0 0} .news li>*{grid-template-columns:88px 1fr;gap:12px} .news .th{height:66px} .news.wide li>*{grid-template-columns:96px 1fr;gap:14px;padding:14px 0} .news.wide .th{height:72px} .news.wide b{font-size:18px} .cards{grid-template-columns:1fr;gap:44px} .card .ph{height:210px} .dongs,.dongs.wide{grid-template-columns:1fr 1fr;gap:20px 14px} .dongs .ph{height:88px} .dongs b{font-size:19px} .cur{grid-template-columns:1fr} .cur .ph{height:220px} .cur .ov b{font-size:26px} .author{flex-direction:column;text-align:center;gap:18px} h1.st{font-size:26px} .intro{font-size:18px} footer nav{margin-left:-10px} footer .notice{padding-inline:16px} .ph-page{padding:0 16px 70px} .ph-page h1{font-size:28px} .cr{grid-template-columns:96px 1fr;gap:12px} .cr img{width:96px;height:66px} }