/* ══════════════════════════════════════════════════════════════ 지금의 하남 — 서버 화면 공통 CSS (/assets/portal.css) 만든 방법(시안설명.md 3절): design/tokens.css 전체 → 하위 시안의 「공통」 구역 → 각 시안의 「이 화면 전용」 구역. 2026-09-24 hanam-server 가 design/*.html 에서 옮김. 맨 끝 「서버 화면 추가」 구역만 새로 썼다. ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 지금의 하남 — 디자인 토큰 원본: site/public/hanam.html 의 :root (2026-09-24 기준). 아래 "기존" 구역은 값이 한 글자도 다르면 안 된다. "확장" 구역은 의정 화면(현안·소식·연락)용으로 새로 더한 것 — hanam.html 에는 아직 없다. 나중에 site/public/assets/portal.css 맨 앞에 이 파일 내용을 그대로 붙인다. 다크 모드 규칙도 hanam.html 과 같다: 시스템 설정이 어두우면 적용, 이면 밝게 고정. ══════════════════════════════════════════════════════════════ */ :root{ color-scheme: light dark; /* ── 기존 (hanam.html :root 그대로) ── */ --bg:#f2f4f6; --card:#ffffff; --card-2:#f7f8fa; --ink:#191f28; --ink2:#4e5968; --ink3:#6b7684; --line:#eef0f3; --line-strong:#e5e8eb; --fill:#f2f4f6; --fill-strong:#e5e8eb; --dark:#191f28; --brand:#1b64da; --brand-soft:#e8f3ff; --brand-ink:#1b64da; --line5:#8b50a4; --line8:#d0145f; --good:#0f7a3d; --good-bg:#e5f7ec; --warn:#9a5200; --warn-bg:#fff3e0; --bad:#c62828; --bad-bg:#ffe9e9; --bus-red:#d93a3f; --bus-blue:#1b64da; --bus-green:#0b7a40; --bus-gray:#6b7684; --c-weather:#2f80ed; --c-transit:#7c3aed; --c-water:#0284c7; --c-issue:#ea580c; --c-medical:#e11d48; --c-air:#0d9488; --c-ev:#16a34a; --c-lh:#4f46e5; --c-culture:#c026d3; --c-office:#0b4a8f; --tint:14%; --radius:20px; --radius-sm:12px; --fs-xs:.8125rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-num:1.1875rem; --fs-hero:2.75rem; --tap:2.75rem; --header-h:3.75rem; /* ── 확장: 의정 화면 ── */ /* 소식 분류 색 — 글자·띠 겸용. 흰 카드와 분류 칩 바탕(아래 --k-tint) 위에서 4.5:1 이상으로 검산 */ --k-issue:#b3400c; /* 현안 — --c-issue(#ea580c)를 글자용으로 어둡게 */ --k-budget:#0f766e; /* 예산 */ --k-bill:#6d28d9; /* 입법·질의 */ --k-field:#157038; /* 현장·면담 */ --k-chair:#0b4a8f; /* 예결위원장 — --c-office 와 같은 값 */ --k-tint:10%; /* 분류 칩 바탕 = 분류 색 10% + 카드색 */ /* 현안 단계 막대 */ --step-done:var(--brand); --step-todo:var(--fill-strong); --step-h:6px; /* 정정·확인 필요 — 기존 warn 계열을 이름만 붙여 쓴다(새 색을 만들지 않음) */ --fix-ink:var(--warn); --fix-bg:var(--warn-bg); --stale-ink:var(--warn); --stale-bg:var(--warn-bg); /* 브랜드색 채움 위 글자 — hanam.html 은 다크에서 선택 칩 글자를 #101014 로 바꾼다(같은 규칙을 토큰으로) */ --on-brand:#ffffff; /* 하위 화면 본문 폭 — 상황판(1120px)보다 좁은 읽기 폭 */ --read-w:760px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ /* ── 기존 (hanam.html 다크 그대로) ── */ --bg:#101014; --card:#1c1c22; --card-2:#24242b; --ink:#e4e4e5; --ink2:#c3c5cb; --ink3:#a0a6b1; --line:#2a2a32; --line-strong:#34343d; --fill:#2a2a32; --fill-strong:#3a3a45; --dark:#e4e4e5; --brand:#6aa8ff; --brand-soft:#1c2c48; --brand-ink:#8dbcff; --good:#6fd39a; --good-bg:#17301f; --warn:#f0b86a; --warn-bg:#3a2a10; --bad:#ff8a7d; --bad-bg:#3d1b17; --bus-red:#c53a37; --bus-blue:#3b82f6; --bus-green:#1f9a5c; --bus-gray:#6b7684; --c-weather:#6aa8ff; --c-transit:#b08cff; --c-water:#5cb8f0; --c-issue:#ff9a5c; --c-medical:#ff7a95; --c-air:#3fd1bf; --c-ev:#5fd48a; --c-lh:#9a94ff; --c-culture:#e57cf0; --c-office:#1b64da; --tint:22%; /* ── 확장 ── */ --k-issue:#ff9a5c; --k-budget:#3fd1bf; --k-bill:#b08cff; --k-field:#5fd48a; --k-chair:#8dbcff; --k-tint:16%; --on-brand:#101014; } } /* ═══ 공통 (design/news.html 등 하위 시안 공통 구역 그대로, .sian·.specnote 제외) ═══ */ html{-webkit-text-size-adjust:100%} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--ink); font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size-adjust:from-font; -webkit-font-smoothing:antialiased; line-height:1.55; font-size:var(--fs-md); letter-spacing:-.01em; overflow-wrap:break-word; word-break:keep-all; } *,*::before,*::after{box-sizing:border-box} .wrap{max-width:var(--read-w);margin:0 auto;padding:0 16px 40px} a{color:var(--brand-ink)} a.plain{color:inherit;text-decoration:none} a.link{color:var(--brand-ink);text-decoration:none;font-weight:700} a.link:hover{text-decoration:underline} :is(a,button,input):focus-visible{outline:2px solid var(--brand);outline-offset:2px} [hidden]{display:none!important} .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* 본문 바로가기 — 초점을 받을 때만 보인다 */ .skip{position:absolute;left:16px;top:-100px;z-index:50;background:var(--brand);color:var(--on-brand);font-weight:800;padding:10px 14px;border-radius:10px;text-decoration:none} .skip:focus{top:8px} /* ── 머리: 상황판과 같은 제목 줄 + 같은 생활 탭 줄(끝에 「의정 소식」) ── */ header.top{padding:12px 0 6px} .brandrow{display:flex;align-items:center;gap:12px;min-height:3rem;color:inherit;text-decoration:none;width:fit-content} .brandrow .logo{width:2.5rem;height:2.5rem;border-radius:14px;background:linear-gradient(135deg,#0b4a8f,#2f80ed);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem;letter-spacing:-.5px;flex:none} .brandrow .bt{display:block;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em;line-height:1.2} .brandrow .sub{display:block;font-size:var(--fs-sm);color:var(--ink2);margin-top:1px} /* 생활 탭 줄 — hanam.html #jump 와 같은 모양. 하위 화면에서는 각 탭이 상황판의 해당 카드로 간다 */ .jump{position:sticky;top:0;z-index:20;background:var(--bg);display:flex;align-items:center;gap:8px;overflow-x:auto;padding:10px 16px;margin:0 -16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .jump::-webkit-scrollbar{display:none} .jump a{flex:none;display:inline-flex;align-items:center;gap:.35rem;min-height:var(--tap);padding:0 .875rem;border-radius:999px; font-size:var(--fs-sm);font-weight:700;color:var(--ink2);background:var(--card);text-decoration:none;white-space:nowrap} .jump a svg{width:.95rem;height:.95rem;flex:none;color:var(--c-issue)} .jump a:is([aria-current="true"],[aria-current="page"]){background:var(--brand);color:var(--on-brand)} .jump a:is([aria-current="true"],[aria-current="page"]) svg{color:inherit} .jump .jsep{flex:none;width:1px;height:1.5rem;background:var(--line-strong);margin:0 2px} /* 「의정 소식」 탭은 줄 오른쪽 끝에 붙어 있다(가로 스크롤해도 항상 보임 — JS 없이 현재 탭을 보이게 하는 방법) */ .jump a:last-child{position:sticky;right:0;z-index:1;box-shadow:-14px 0 10px -2px var(--bg),20px 0 0 4px var(--bg)} /* ── 화면 제목 ── */ .ptitle{padding:8px 0 14px} .ptitle h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em;line-height:1.3;margin:0} .ptitle .plead{font-size:var(--fs-md);color:var(--ink2);margin:6px 0 0;line-height:1.55;text-wrap:pretty} .crumb{font-size:var(--fs-sm);font-weight:700;color:var(--ink3);margin:0 0 4px} .crumb a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap);margin:-10px 0 -6px} /* ── 카드·구역 ── */ .card{background:var(--card);border-radius:var(--radius);padding:20px} .stack{display:grid;gap:12px} .sec{margin-top:12px} .sec > h2, .card > h2{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;line-height:1.35;margin:0 0 10px} .muted{color:var(--ink3)} .small{font-size:var(--fs-sm)} /* ── 배지 (hanam.html 과 같은 모양) ── */ .badge{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-xs);font-weight:700;padding:4px 9px;border-radius:8px;white-space:nowrap;line-height:1.3;flex:none} .b-good{background:var(--good-bg);color:var(--good)} .b-warn{background:var(--warn-bg);color:var(--warn)} .b-bad{background:var(--bad-bg);color:var(--bad)} .b-mute{background:var(--brand-soft);color:var(--brand-ink)} .b-line{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line-strong)} /* ── 확인일 — 의정 화면의 신뢰 장치. 날짜 + "며칠 전", 60일 넘으면 확인 필요 ── */ .checked{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums} .checked svg{width:1rem;height:1rem;flex:none;color:var(--good)} .checked b{color:var(--ink);font-weight:800} .checked.is-stale svg{color:var(--stale-ink)} .stale-note{background:var(--stale-bg);color:var(--ink);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--fs-md);line-height:1.55} .stale-note b{color:var(--stale-ink)} /* ── 현안 단계 — 6칸 막대 + 지금 단계 글자. 막대 밖 상태(국회 계류·보류)는 배지만 ── */ .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:4px} .steps li{position:relative;padding-top:calc(var(--step-h) + 8px);font-size:var(--fs-xs);font-weight:600;color:var(--ink3);text-align:center;line-height:1.3;min-width:0} .steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--step-h);border-radius:99px;background:var(--step-todo)} .steps li.done::before, .steps li[aria-current="step"]::before{background:var(--step-done)} .steps li[aria-current="step"]{color:var(--ink);font-weight:800} .steps.is-mini li{padding:0;height:var(--step-h);font-size:0;line-height:0;color:transparent;overflow:hidden} .steps.is-mini{max-width:180px} /* 좁은 화면: 막대만 보이고 단계 이름은 아래 .stepline 한 줄로(글자는 화면읽기 프로그램에 그대로 남는다) */ @media (max-width:479px){ .steps:not(.is-mini) li{padding:0;height:var(--step-h);font-size:0;line-height:0;color:transparent;overflow:hidden} } .stepline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-sm);color:var(--ink2)} .stepline b{color:var(--ink);font-size:var(--fs-md);font-weight:800} /* ── 분류 칩 (소식) ── */ .cat{--k:var(--ink2);display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);font-weight:800;padding:4px 9px;border-radius:8px; background:color-mix(in srgb,var(--k) var(--k-tint),var(--card));color:var(--k);white-space:nowrap;line-height:1.3} .cat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .k-issue{--k:var(--k-issue)} .k-budget{--k:var(--k-budget)} .k-bill{--k:var(--k-bill)} .k-field{--k:var(--k-field)} .k-chair{--k:var(--k-chair)} /* ── 필터 칩 (링크) — 선택은 진한 채움 ── */ .filters{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 12px;margin:0 -16px;scrollbar-width:none} .filters::-webkit-scrollbar{display:none} .filters a{--k:var(--ink2);flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);padding:0 .95rem;border-radius:999px; background:var(--card);color:var(--ink2);font-size:var(--fs-sm);font-weight:700;text-decoration:none;white-space:nowrap} .filters a:not(.all)::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k)} .filters a[aria-current="page"]{background:var(--ink);color:var(--card)} /* 「민원·연락 안내」는 거르기가 아니라 다른 화면 → 테두리 칩, 줄 오른쪽 끝에 붙어 항상 보임 */ .filters a.go{position:sticky;right:0;background:var(--bg);color:var(--ink);z-index:1;box-shadow:-14px 0 10px -2px var(--bg),20px 0 0 4px var(--bg),inset 0 0 0 1.5px var(--line-strong)} .filters a.go[aria-current="page"]{background:var(--ink);color:var(--card);z-index:1;box-shadow:-14px 0 10px -2px var(--bg),20px 0 0 4px var(--bg)} .filters a.go::before{display:none} .filters .fsep{flex:none;width:1px;align-self:center;height:1.5rem;background:var(--line-strong)} /* ── 정정 표시 — 지우지 않고 남긴다. 제목 바로 아래 ── */ .fix{display:flex;gap:10px;align-items:flex-start;background:var(--fix-bg);color:var(--ink);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--fs-md);line-height:1.55} .fix svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.15rem;color:var(--fix-ink)} .fix b{color:var(--fix-ink);font-weight:800} /* ── 진행 이력 타임라인 — 날짜 내림차순. 정정·의원실 활동은 구분 표시 ── */ .tl{list-style:none;margin:0;padding:0} .tl li{position:relative;padding:0 0 18px 26px} .tl li::before{content:"";position:absolute;left:5px;top:.5rem;bottom:-.35rem;width:2px;background:var(--line-strong)} .tl li:last-child{padding-bottom:0} .tl li:last-child::before{display:none} .tl li::after{content:"";position:absolute;left:0;top:.3rem;width:12px;height:12px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 3px var(--ink3)} .tl li.k-office::after{box-shadow:inset 0 0 0 3px var(--brand)} .tl li.k-fix::after{background:var(--fix-ink);box-shadow:none} .tl .tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tl time{font-size:var(--fs-sm);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} .tl p{margin:3px 0 0;font-size:var(--fs-md);color:var(--ink);line-height:1.55;text-wrap:pretty} .tl li.k-fix p{color:var(--ink)} .tl .tl-src{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--fs-sm)} /* ── 목록 행 링크 (현안·소식·관련 항목) ── */ .rowlink{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:12px 0;color:inherit;text-decoration:none} .rowlink + .rowlink{border-top:1px solid var(--line)} .rowlink .main{min-width:0;flex:1} .rowlink .t{display:block;font-weight:700;line-height:1.45} .rowlink .m{display:block;font-size:var(--fs-sm);color:var(--ink3);margin-top:2px} .chev{width:1rem;height:1rem;flex:none;color:var(--ink3)} /* ── 큰 버튼 (원문·전화) ── */ .btn{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.6rem 1.1rem;border-radius:14px; font-weight:800;font-size:var(--fs-md);text-decoration:none;text-align:center;line-height:1.35} .btn svg{width:1.1rem;height:1.1rem;flex:none} .btn-main{background:var(--brand);color:var(--on-brand)} .btn-sub{background:var(--fill);color:var(--ink)} .btns{display:grid;gap:8px} @media (min-width:640px){ .btns.two{grid-template-columns:1fr 1fr} } /* ── 공유 — 자바스크립트 없이: 주소 칸(길게 눌러 복사) + 문자 + 링크형 공유 ── */ .share .addr{display:block;width:100%;min-height:var(--tap);padding:0 12px;border:0;border-radius:var(--radius-sm);background:var(--fill);color:var(--ink); font:inherit;font-size:var(--fs-sm);font-variant-numeric:tabular-nums} .share label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink2);margin-bottom:6px} .share .hint{font-size:var(--fs-sm);color:var(--ink3);margin:6px 0 12px} .share-js{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:8px;margin:0 0 8px} .share-js .btn{border:0;cursor:pointer;font:inherit;font-weight:800;min-height:var(--tap)} .share-msg{margin:0 0 10px;font-size:var(--fs-sm);font-weight:700;color:var(--good)} .share-msg:empty{display:none} .share .ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .share .ways a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:var(--tap);border-radius:12px;background:var(--fill);color:var(--ink);font-weight:700;font-size:var(--fs-sm);text-decoration:none;text-align:center} .share .ways svg{width:1rem;height:1rem;flex:none} /* ── 쪽 나눔 — 이전·다음 링크만. 없는 쪽은 그리지 않는다 ── */ .pager{display:flex;align-items:center;gap:8px;margin-top:12px} .pager a{display:inline-flex;align-items:center;gap:.35rem;min-height:var(--tap);padding:0 1.1rem;border-radius:999px;background:var(--card);color:var(--ink);font-weight:700;text-decoration:none} .pager a svg{width:1rem;height:1rem} .pager .now{font-size:var(--fs-sm);color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums;margin:0 auto} .pager .next{margin-left:auto} .pager .now + .next{margin-left:0} /* ── 빈 상태 ── */ .empty{text-align:center;padding:28px 12px;color:var(--ink2);line-height:1.6} .empty b{display:block;color:var(--ink);font-size:var(--fs-lg);font-weight:800;margin-bottom:4px} .empty a{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:6px} /* ── 맨 아래 "지금 하남 상황판 보기" — 모든 하위 화면 공통 ── */ .toboard{display:flex;align-items:center;gap:14px;margin-top:24px;padding:18px 18px;border-radius:var(--radius);background:var(--brand-soft);color:var(--ink);text-decoration:none} .toboard .ti{width:2.75rem;height:2.75rem;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--brand);color:var(--on-brand)} .toboard .ti svg{width:1.5rem;height:1.5rem} .toboard .tt{min-width:0;flex:1} .toboard b{display:block;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;color:var(--brand-ink)} .toboard small{display:block;font-size:var(--fs-sm);color:var(--ink2);margin-top:2px;line-height:1.45} .toboard .chev{color:var(--brand-ink)} /* ── 푸터 — 운영 주체 표기(M8) ── */ .sfoot{margin-top:24px;padding-top:16px;border-top:1px solid var(--line-strong);font-size:var(--fs-sm);color:var(--ink2);line-height:1.7} .sfoot .who{color:var(--ink);font-weight:700} .sfoot nav{display:flex;flex-wrap:wrap;gap:0 4px;margin-top:6px} .sfoot nav a{color:var(--ink2);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px 0 0} .sfoot nav a:hover{text-decoration:underline} @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } @media (forced-colors:active){ .card,.badge,.cat,.jump a,.filters a,.btn,.toboard,.pager a,.fix,.stale-note{border:1px solid CanvasText} .steps li::before{border:1px solid CanvasText} } /* ═══ 화면 전용 — /news — 의정 소식 목록 (design/news.html) ═══ */ .month{font-size:var(--fs-sm);font-weight:800;color:var(--ink2);margin:18px 4px 8px;letter-spacing:0} .month:first-of-type{margin-top:4px} .nlist{list-style:none;margin:0;padding:0;display:grid;gap:8px} .nitem{--k:var(--ink3);display:block;background:var(--card);border-radius:var(--radius);padding:16px 18px 16px 20px;color:inherit;text-decoration:none; box-shadow:inset 4px 0 0 var(--k)} .nitem:active{background:var(--card-2)} .nmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .nmeta time{font-size:var(--fs-sm);color:var(--ink3);font-weight:600;font-variant-numeric:tabular-nums} .ntitle{margin:8px 0 4px;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;line-height:1.4;text-wrap:pretty} .nsum{margin:0;color:var(--ink2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nsrc{margin-top:8px;font-size:var(--fs-sm);color:var(--ink3)} /* 첫 쪽 맨 위 한 건 — 요약 3줄을 모두 보여 준다(사진 대신 글로 무게를 준다) */ .nitem.lead{padding:20px 20px 18px 22px} .nitem.lead .ntitle{font-size:var(--fs-xl);letter-spacing:-.03em;margin-top:10px} .nitem.lead ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px} .nitem.lead li{position:relative;padding-left:14px;color:var(--ink2);line-height:1.55} .nitem.lead li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--k)} .newtag{font-size:var(--fs-xs);font-weight:800;color:var(--ink2)} .issues-mini{margin-bottom:6px} .issues-mini .rowlink .t{font-size:var(--fs-md)} .more-in{display:flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);margin:4px -20px -20px;border-top:1px solid var(--line);color:var(--brand-ink);font-weight:700;font-size:var(--fs-sm);text-decoration:none} .more-in .chev{color:var(--brand-ink)} /* ═══ 화면 전용 — /issues — 현안 목록 (design/issues.html) ═══ */ .ilist{list-style:none;margin:0;padding:0;display:grid;gap:12px} .issue{display:block;background:var(--card);border-radius:var(--radius);padding:18px 20px 16px;color:inherit;text-decoration:none} .issue:active{background:var(--card-2)} .issue .ih{display:flex;align-items:flex-start;gap:10px} .issue h2{flex:1;min-width:0;margin:0;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;line-height:1.4} .issue .steps{margin:12px 0 0} .issue .st{margin:10px 0 0;color:var(--ink2);line-height:1.55;text-wrap:pretty} .nx{display:flex;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--card-2);line-height:1.5} .nx b{flex:none;color:var(--brand-ink);font-weight:800} .issue .if{display:flex;align-items:center;gap:8px;margin-top:12px} .issue .if .chev{margin-left:auto} .offtrack{margin-top:12px;font-size:var(--fs-sm);color:var(--ink2)} /* ═══ 화면 전용 — /issues/{id} — 현안 상세 (design/issue-detail.html) ═══ */ .hero .badges{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px} .hero h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em;line-height:1.35;margin:0} .bigcheck{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--good-bg)} .bigcheck svg{width:1.5rem;height:1.5rem;flex:none;color:var(--good)} .bigcheck .d{font-size:var(--fs-num);font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.25} .bigcheck .s{font-size:var(--fs-sm);color:var(--ink2)} .kv h2{font-size:var(--fs-sm)!important;color:var(--ink3);font-weight:800!important;margin:0 0 4px!important;letter-spacing:0} .kv p{margin:0;font-size:var(--fs-lg);font-weight:700;line-height:1.5;text-wrap:pretty} .kv.next{box-shadow:inset 4px 0 0 var(--brand)} .kv.next h2{color:var(--brand-ink)} .legend{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 14px} .scope{font-size:var(--fs-sm);color:var(--ink2);margin:12px 4px 0;line-height:1.6} .scope b{color:var(--ink)} .rel .cat{margin-right:6px} /* ═══ 화면 전용 — /news/{id} — 소식 한 건 (design/news-detail.html) ═══ */ .article{box-shadow:inset 0 4px 0 var(--k)} .article .nmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .article .nmeta time{font-size:var(--fs-sm);color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums} .article h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em;line-height:1.4;margin:12px 0 0;text-wrap:pretty} .article .fix{margin-top:14px} .sum{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;counter-reset:s} .sum li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:10px;align-items:start;line-height:1.6;font-size:var(--fs-md)} .sum li::before{content:counter(s);width:2rem;height:2rem;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:var(--fs-sm); background:color-mix(in srgb,var(--k) var(--k-tint),var(--card));color:var(--k);font-variant-numeric:tabular-nums} .srcs{margin-top:18px} .dates{margin:14px 0 0;font-size:var(--fs-sm);color:var(--ink3);font-variant-numeric:tabular-nums} .relissue{display:block;color:inherit;text-decoration:none} .relissue .t{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-lg);font-weight:800;line-height:1.4} .relissue .t span{flex:1;min-width:0} .relissue .steps{margin:12px 0 10px} .relissue .nx{display:flex;gap:10px;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--card-2);line-height:1.5} .relissue .nx b{flex:none;color:var(--brand-ink);font-weight:800} .pn .lbl{font-size:var(--fs-xs);font-weight:800;color:var(--ink3)} /* ═══ 화면 전용 — /contact — 민원·연락 안내 (design/contact.html) ═══ */ .tel{display:flex;align-items:center;gap:12px;min-height:3.75rem;padding:10px 16px;border-radius:14px;background:var(--brand);color:var(--on-brand);text-decoration:none} .tel svg{width:1.4rem;height:1.4rem;flex:none} .tel .n{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1} .tel .l{display:block;font-size:var(--fs-sm);font-weight:700;opacity:.9} .tel.sub{background:var(--fill);color:var(--ink)} .tels{display:grid;gap:8px} @media (min-width:640px){ .tels{grid-template-columns:1fr 1fr} } .hours{font-size:var(--fs-sm);color:var(--ink2);margin:8px 2px 0} .place{display:flex;gap:10px;align-items:flex-start;padding:12px 0;color:inherit;text-decoration:none;line-height:1.5} .place + .place{border-top:1px solid var(--line)} .place svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.2rem;color:var(--ink3)} .place b{display:block;font-size:var(--fs-sm);color:var(--ink3);font-weight:700} .place .go{display:block;font-size:var(--fs-sm);color:var(--brand-ink);font-weight:700;margin-top:2px} .nosave{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:var(--radius);padding:16px 18px;line-height:1.55} .nosave svg{width:1.25rem;height:1.25rem;flex:none;color:var(--good);margin-top:.1rem} .places{margin-top:6px} .how{list-style:none;margin:0;padding:0;display:grid;gap:10px} .how li{display:grid;grid-template-columns:3.5rem 1fr;gap:10px;line-height:1.55;color:var(--ink2)} .how li b{color:var(--ink);font-weight:800} .tip-h{margin:16px 0 2px;font-size:var(--fs-sm);font-weight:800;color:var(--ink)} .tip{margin:0;color:var(--ink2);line-height:1.6} /* ═══ 서버 화면 추가 (hanam-server, 2026-09-24) — 시안의 인라인 style 을 클래스로 옮긴 것 + 운영 안내·처리방침·검수·404 ═══ */ .pn .t{display:block} .relissue .badge{flex:none} main > .stale-note{margin:0 0 12px} .prose p{margin:0 0 10px;line-height:1.65;color:var(--ink)} .prose p:last-child{margin-bottom:0} .prose ul{margin:0;padding-left:1.2rem;display:grid;gap:6px;line-height:1.6} .prose .btns{margin-top:12px} .ptable{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.6} .ptable th{text-align:left;vertical-align:top;white-space:nowrap;padding:10px 12px 10px 0;color:var(--ink2);font-weight:800} .ptable td{padding:10px 0;color:var(--ink)} .ptable tr + tr > *{border-top:1px solid var(--line)} @media (max-width:519px){ .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td{display:block} .ptable th{padding-bottom:0} .ptable td{padding-top:2px} .ptable tr + tr > td{border-top:0} } .tscroll{overflow-x:auto;margin:0 -4px;padding:0 4px} .ctable{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.5;font-variant-numeric:tabular-nums} .ctable th,.ctable td{text-align:left;vertical-align:top;padding:8px 10px 8px 0;border-top:1px solid var(--line)} .ctable thead th{border-top:0;color:var(--ink2);font-weight:800;white-space:nowrap} .ctable tbody th{font-weight:800;white-space:nowrap} .alerts{margin:0;padding-left:1.1rem;display:grid;gap:8px;line-height:1.55} .alerts b{color:var(--warn)} .nf{margin-top:8px} .nfb{margin-top:14px} @media (min-width:640px){ .nfb{grid-template-columns:repeat(3,1fr)} } @media (forced-colors:active){ .ptable td,.ctable td{border-color:CanvasText} }