@charset "utf-8";
/*
 * [원전 공론화 홈페이지 2026-11-05] 화면 디자인
 *
 *   불러오는 순서: common.css → 테마 layout.css → (반응형) respond.css → 이 파일 (layout/head.set.php)
 *     → 같은 선택자는 이 파일이 이긴다. 테마 기본 스타일(게시판 표·버튼·입력칸 등)은 그대로 쓰고,
 *       머리·메뉴·메인·안내 화면·바닥만 새로 그린다.
 *
 *   글자 크기 원칙 (60대 이상 이용자 — 발주처 요청 "큰 글씨, 단순한 메뉴, 최소한의 이용 단계")
 *     · 기준 글자 = html 글자 크기 17px(= 1rem). 원본은 14px(PC)·13px(모바일)로 작았다.
 *     · 이 파일의 글자·여백은 rem 으로 써서, 글자크기 단추(gongron.js)가 html 크기만 바꾸면 화면 전체가 함께 커진다.
 *       px 로 고정하면 그 부분만 단추를 눌러도 안 커진다 — 새 스타일을 넣을 때도 rem 으로 쓸 것.
 *     · 본문 글자색은 #222(원본 #666 은 흰 바탕 대비가 약해 고령층·저시력자에게 흐리게 보임). 웹 접근성 대비 4.5:1 이상.
 *
 *   색: 남색(#13294b) 바탕 + 파랑(#1f5bd8) 강조 — 예상화면 PPT 시안 색. 위원회 CI 색을 받으면 아래 변수만 바꾼다.
 *   화면 폭 구간: PC(1101px~) / 태블릿·모바일(~1100px: 상단 메뉴 대신 전체 메뉴 단추) / 좁은 모바일(~640px)
 */
:root {
    --gr-navy: #13294b;
    --gr-navy2: #1c3a66;
    --gr-blue: #1f5bd8;
    --gr-blue-d: #1747ad;
    --gr-sky: #eaf1fd;
    --gr-line: #d9dee7;
    --gr-text: #222222;
    --gr-sub: #4a5465;
    --gr-in: 1320px;          /* 본문 최대 폭. [2026-11-12 메뉴 개편] 1240 → 1320 — 상위 메뉴 7 → 8개(국민 의견 제출 분리)로 1440px 화면에서도 메뉴가 접혀(전체 메뉴 단추) 넓힘. 1440 화면 = 1320 + 좌우 여백 1.2rem×2 로 꽉 맞음 */
}

/* ---------- 기본 글자 ---------- */
html {font-size: 17px;}
body {color: var(--gr-text);font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;font-size: 1rem;}
/* 글자색은 body 하나에만 주고 나머지는 물려받게(inherit) — common.css 가 div·p·span 등에 #666 을 직접 줘서
   흰 글자 단추 안의 <span> 처럼 안쪽 요소만 회색으로 돌아가던 문제를 막는다. */
td, form, select, input, button, textarea, div, option, pre, p, span, li, dt, dd, a {
    color: inherit;
    font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
    font-size: 1rem;
}
body {background: #ffffff;word-break: keep-all;}
a {color: inherit;}
a:focus-visible, button:focus-visible {outline: 3px solid #f5a623;outline-offset: 2px;}
.gr-temp {color: #b0570b;font-style: normal;font-size: 0.85rem;}

/* ---------- 머리(헤더) ---------- */
#gr-header {background: #ffffff;border-bottom: 1px solid var(--gr-line);position: sticky;top: 0;z-index: 300;}
.gr-head-in {align-items: center;display: flex;height: 5.2rem;margin: 0 auto;max-width: var(--gr-in);padding: 0 1.2rem;}
/* [2026-11-06] 로고 오른쪽 여백 1.1 → 0.9rem — 이름 단추 자리 확보(아래 .gr-my-btn 주석) */
.gr-logo {display: flex;align-items: center;flex-shrink: 0;margin-right: 0.9rem;padding-right: 0.9rem;border-right: 1px solid var(--gr-line);text-decoration: none;}
.gr-logo h1 {border-left: 0.35rem solid var(--gr-blue);color: var(--gr-navy);font-size: 1.65rem;font-weight: 800;letter-spacing: -0.04em;line-height: 1.1;padding-left: 0.7rem;}
/* [2026-11-13 발주처 수정 요청 1-가] 두 줄 로고 '전력수급기본계획을 위한' / '원전 공론화' (나눔은 lib/gongron.lib.php gr_logo_html)
   · 위 줄(.l1): 꾸밈말이라 작게(0.5em)·회남색·굵기 700. 아래 줄(.l2): 이름이라 기존 로고 크기 그대로(1.65rem 기준 1em).
     두 줄 폭이 비슷하게 맞도록 위 줄 글자 크기를 정함(위 12자 × 0.5em ≈ 아래 6자 × 1em) — 왼쪽 파란 세로줄 하나로 묶여 한 덩어리로 보인다.
   · 줄 간격: 위 줄 아래 0.18em — 붙이면 두 줄이 한 덩어리로 안 읽히고, 벌리면 머리 줄 높이(5.2rem)를 넘는다.
   · 두 span 사이 띄어쓰기(gr_logo_html 이 넣음)는 화면 낭독기가 '…위한 원전 공론화' 로 이어 읽게 하려는 것 — block 이라 화면엔 안 보임. */
.gr-logo h1 .l1, .gr-logo h1 .l2 {display: block;white-space: nowrap;}
.gr-logo h1 .l1 {color: #4a5b78;font-size: 0.55em;font-weight: 700;letter-spacing: -0.02em;line-height: 1.2;margin-bottom: 0.18em;}
/* font-size: 1em 을 굳이 적는 이유 — 테마 기본 CSS 의 span 글자 크기 규칙이 먹어 아래 줄이 본문 크기(17px)로 작아졌다(로컬 화면 측정). */
.gr-logo h1 .l2 {font-size: 1em;line-height: 1.05;}
.gr-nav {flex: 1;}
#gr-gnb {display: flex;justify-content: space-between;}
#gr-gnb > li {position: relative;}
#gr-gnb > li > a {color: var(--gr-navy);display: block;font-size: 1.02rem;font-weight: 700;line-height: 5.2rem;padding: 0 0.3rem;text-decoration: none;white-space: nowrap;}
/* [2026-11-05 메뉴 7개] 글자 1.08rem·좌우 0.4rem: 1440px 폭·기본 글자에서 로고 + 메뉴 7개 + 로그인·글자크기 단추가
   본문 폭(1240px) 안에 들어가는 값(실측 약 1,215px). 더 키우면 PC 에서도 '전체 메뉴' 단추 방식으로 바뀐다(gongron.js 넘침 감지).
   [2026-11-05 수정] 좌우 0.4 → 0.3rem: 로그인하면 '로그인'(79px) 대신 '이름 님' 단추(최대 약 95px)가 들어가 1440px 에서도 약 40px 넘쳐
   전체 메뉴 방식으로 바뀌던 문제(실측: 로그인 전 1199/1199px 꽉 참). 메뉴 7개 × 좌우 0.1rem 줄여 약 24px + 로고 쪽 여백·이름 단추 폭으로 나머지 확보. */
/* [2026-11-12 메뉴 개편 8개] 글자 1.08 → 1.02rem + 본문 폭 1320px(위 :root): 1440px·기본 글자에서 메뉴 사이 남는 폭 실측 59px(로그인 후 이름 단추 약 16px 더 차지해도 여유).
   1366px 화면도 같은 결과. 1280px 이하·글자 확대 시에는 gongron.js 넘침 감지로 전체 메뉴(☰) 방식으로 바뀐다 — 정상 동작. */
#gr-gnb > li > a:hover, #gr-gnb > li.on > a {color: var(--gr-blue);box-shadow: inset 0 -4px 0 var(--gr-blue);}
#gr-gnb > li > ul {background: #ffffff;border: 1px solid var(--gr-line);border-top: 3px solid var(--gr-blue);box-shadow: 0 10px 24px rgba(19,41,75,0.12);display: none;left: 50%;min-width: 12rem;padding: 0.5rem 0;position: absolute;top: 100%;transform: translateX(-50%);}
#gr-gnb > li:hover > ul, #gr-gnb > li:focus-within > ul {display: block;}
#gr-gnb > li > ul > li > a {display: block;font-size: 1rem;padding: 0.6rem 1.2rem;text-decoration: none;white-space: nowrap;}
#gr-gnb > li > ul > li > a:hover, #gr-gnb > li > ul > li.on > a {background: var(--gr-sky);color: var(--gr-blue);font-weight: 700;}

/* [2026-11-06] 간격 0.7 → 0.5rem, 앞 여백 1 → 0.8rem — 이름 단추 자리 확보(아래 .gr-my-btn 주석) */
.gr-util {align-items: center;display: flex;flex-shrink: 0;gap: 0.5rem;margin-left: 0.8rem;padding-left: 0.8rem;border-left: 1px solid var(--gr-line);}
.gr-login {border: 2px solid var(--gr-navy);border-radius: var(--gr-r);color: var(--gr-navy);font-size: 0.95rem;font-weight: 700;padding: 0.35rem 0.9rem;text-decoration: none;}
.gr-login:hover {background: var(--gr-navy);color: #ffffff;}
/* 간단 머리(로그인·회원가입 화면, head.type2.tpl.php) — 메뉴 없이 로고 + '처음 화면으로' + 글자크기.
   태블릿·모바일에서도 글자크기 단추는 숨기지 않는다(아래 @media 에서 .gr-util 을 숨기는 규칙의 예외) —
   전체 메뉴 단추가 없는 화면이라 숨기면 글자를 키울 방법이 사라진다. */
.gr-type2 .gr-util {margin-left: auto;}
.gr-home {color: var(--gr-navy);font-weight: 700;text-decoration: none;}
/* 로그인 화면(html/sign/signin.tpl.php) — 원본 테마의 보라색·작은 단추를 사이트 색·큰 단추로.
   원본 layout.css·respond.css 가 '#signin .inp-wrap label' 처럼 (1-1-1) 로 px 를 박아 두어, 같은 깊이 이상으로 써야 이긴다. 폭은 원본(425px) 유지, 위아래 여백만 늘림. */
#signin {margin: 3.5rem auto 4rem;}
#signin h4 {color: var(--gr-navy);font-size: 2rem;font-weight: 800;}
#signin .gr-signin-lead {color: var(--gr-sub);line-height: 1.6;margin: 0.6rem 0 1.4rem;}
#signin .inp-wrap label {color: var(--gr-text);font-size: 1rem;font-weight: 700;margin: 1rem 0 0.35rem;}
#signin .inp-wrap label.chk, #signin .inp-wrap .tar label {font-size: 0.95rem;font-weight: 400;}
#signin .inp-wrap .inp {border: 1px solid #b8c2d3;border-radius: var(--gr-r);font-size: 1.1rem;height: 3.1rem;padding: 0 0.8rem;}
#signin .inp-wrap .inp:focus {border-color: var(--gr-blue);outline: 2px solid rgba(31,91,216,0.25);}
#signin .inp-wrap .btn1 {background: var(--gr-navy);border: 0;border-radius: var(--gr-r);font-size: 1.2rem;font-weight: 700;height: 3.4rem;}
#signin .inp-wrap .btn1:hover {background: var(--gr-blue);}
#signin .gr-signin-help {background: var(--gr-bg2);border-top: 2px solid var(--gr-navy);line-height: 1.7;margin-top: 1.6rem;padding: 1rem 1.2rem;text-align: center;}
/* [2026-11-05 하위 디자인] 로그인 화면 제목 위에 짧은 가로줄 — 메인 대문·하위 머리 띠와 같은 표시 */
#signin h4:before {background: var(--gr-blue);content: '';display: block;height: 3px;margin: 0 auto 0.9rem;width: 1.6rem;}
#signin .gr-signin-help strong {color: var(--gr-navy);}
/* [2026-11-06 화면 확인] 로그인·가입·비밀번호 찾기 화면의 입력칸 아래 보조 설명(원본 ul.tbltxt).
   원본 layout.css 13px·respond.css(모바일) 12px, 색 #999 → 60대 이상 이용자에게 너무 작고 흐림.
   '#signin ul.tbltxt li'(1-1-2)로 써서 원본 'ul.tbltxt li'(0-1-2)와 모바일 규칙을 모두 이긴다.
   게시판 등 다른 화면의 tbltxt 는 배치가 그 크기 기준이라 건드리지 않음(#signin 안에서만). */
#signin ul.tbltxt li {color: var(--gr-sub);font-size: 0.95rem;line-height: 1.5;margin-top: 0.25rem;padding-left: 0.6rem;}
#signin ul.tbltxt li:before {background: var(--gr-sub);top: 0.7em;}
/* [2026-11-06 화면 확인] 입력 오류 안내 띠(layout/js/common.js zigalert) — 원본 테마 layout.css 는 오른쪽 위 구석 400px·13px.
   60대 이상 이용자가 놓치지 않도록 화면 위 가운데·큰 글씨로. 머리줄(약 88px)을 가리지 않게 그 아래에 띄움.
   폭은 min() 으로 PC 560px / 휴대폰은 화면 폭 - 양쪽 16px — 원본 고정 400px 은 390px 휴대폰에서 화면 밖으로 넘침.
   색(빨강 바탕·흰 글씨)은 원본 그대로 — 대비 충분(#e54d42 위 흰색), 위원회 남색으로 바꾸면 '오류' 로 안 읽힘.
   '#zig-alert-wrap'(1-0-0)은 원본과 같은 깊이 → 이 파일이 원본보다 뒤에 읽혀야 이김(layout/head.set.php 순서 확인 완료). */
#zig-alert-wrap {left: 50%;right: auto;top: 96px;transform: translateX(-50%);width: min(560px, calc(100vw - 32px));z-index: 1000;}
#zig-alert {border-left-width: 6px;border-radius: var(--gr-r);cursor: pointer;}
#zig-alert p {font-size: 1.1rem;font-weight: 600;letter-spacing: -0.02em;line-height: 1.5;padding: 0.9rem 1.1rem;}
#zig-alert p i {margin-right: 0.4rem;}
/* 비밀번호 찾기 안내 화면(메일 미준비 시)의 '로그인 화면으로 돌아가기' — 안내만 있고 입력칸이 없어 돌아갈 길을 따로 둠 */
#signin .gr-signin-back {margin-top: 1.2rem;text-align: center;}
#signin .gr-signin-back a {color: var(--gr-blue);font-size: 1rem;text-decoration: underline;}

/* ---------- [2026-11-06 3차] 로그인 화면 — 좌우 나눔(남색 소개 면 + 흰 입력 면) (html/sign/signin.tpl.php 의 #signin.gr-si) ----------
 *   변천: 1차 2단 + 01·02·03 안내 → "글이 너무 많다" → 2차 메인 사진 잘라 넣기 → "메인 이미지 쓰지 말고 트렌디하게" → 3차 이 배치.
 *   왜 '#signin.gr-si' 로만 쓰나: #signin 은 비밀번호 찾기·회원가입 화면도 같이 쓴다. #signin 자체를 넓히면
 *     그 화면들(가운데 425px 한 줄 배치)이 넓게 퍼져 버린다 → 로그인 화면에만 붙인 이름표로 범위를 묶음.
 *   우선순위: '#signin.gr-si …'(1-1-x) 는 원본 layout.css·respond.css 의 '#signin …'(1-0-x) 와 위 #signin 규칙을 모두 이긴다.
 *     원본 respond.css(~1000px)가 #signin 에 'width:auto; padding:0 30px; margin:20px auto' 를 주는데 이것도 여기서 덮음.
 *   디자인: '선과 글자' 유지 — 면은 각진 모서리(var(--gr-r))·그림자 없음, 경계는 1px 선, 장식은 선 파형뿐(원·그라데이션 없음).
 *     '트렌디' 요소는 좌우 나눔 배치 + 큰 굵은 문구 + 선 파형 세 가지로만 냄.
 *   크기는 모두 rem — 글자크기 단추(gongron.js)로 html 크기를 바꾸면 이 화면도 함께 커짐. */
#signin.gr-si {margin: 3rem auto 4rem;max-width: 64rem;padding: 0 1.2rem;width: auto;}
/* 좌우 격자: 왼쪽 남색 면 가변 / 오른쪽 입력 면 28rem.
 *   HTML 은 입력(main)이 먼저라(화면 낭독기·Tab 순서) grid-template-areas 로 소개 면(side)을 왼쪽에 놓는다.
 *   바깥 1px 선으로 두 면을 한 덩어리로 묶음(상자 그림자 대신 선 — 컨셉). */
#signin.gr-si .gr-si-wrap {border: 1px solid var(--gr-line);display: grid;grid-template-areas: "side main";grid-template-columns: minmax(0, 1fr) 28rem;}
#signin.gr-si .gr-si-main {grid-area: main;padding: 2.6rem 2.6rem 2.2rem;}
#signin.gr-si .gr-si-side {background: var(--gr-navy);color: #ffffff;display: flex;flex-direction: column;grid-area: side;padding: 2.6rem 2.8rem 2.4rem;}

/* 소개 면 글자 — 흰 글자. 원본 common.css 가 p·span 등에 색을 직접 줘서 'color: inherit' 규칙(파일 위쪽)으로 물려받게 되어 있음 */
#signin.gr-si .gr-si-eyebrow {color: #9fbcf5;font-size: 1rem;font-weight: 700;letter-spacing: -0.01em;}
#signin.gr-si .gr-si-eyebrow:before {background: #6d9bff;content: '';display: block;height: 3px;margin-bottom: 1rem;width: 1.6rem;}
/* 큰 문구 — 굵기 800·자간 좁게. clamp: 좁은 PC(1001px 근처)에서 줄이 넘치지 않게 화면 폭에 따라 2.1~2.9rem 사이로 */
#signin.gr-si .gr-si-copy {font-size: clamp(2.1rem, 3.1vw, 2.9rem);font-weight: 800;letter-spacing: -0.05em;line-height: 1.25;margin-top: 0.9rem;}
/* 선 파형 — 면의 남는 높이를 차지해(margin-top:auto) 문구와 링크 사이 아래쪽에 붙음. 폭에 맞춰 늘어남(preserveAspectRatio="none").
 *   선 굵기 3: 화면에서 1px 로 줄면 흐릿해 보여서. 가운데 강조 선(.hl)만 밝은 파랑 */
#signin.gr-si .gr-si-wave {display: block;height: 4.2rem;margin-top: auto;padding-top: 2.4rem;width: 100%;box-sizing: content-box;}
#signin.gr-si .gr-si-wave line {stroke: rgba(255,255,255,0.28);stroke-linecap: square;stroke-width: 3;}
#signin.gr-si .gr-si-wave line.hl {stroke: #6d9bff;}
/* 안내 화면 바로 가기 — 파형 아래 1px 흰 선(반투명) 위에 '글자 +' 표시(메인 '더보기 +' 와 같은 문법) */
#signin.gr-si .gr-si-links {border-top: 1px solid rgba(255,255,255,0.22);display: flex;flex-wrap: wrap;gap: 0.5rem 1.8rem;margin-top: 1.4rem;padding-top: 1.1rem;}
#signin.gr-si .gr-si-links a {color: #ffffff;font-weight: 700;text-decoration: none;}
#signin.gr-si .gr-si-links a:after, #signin.gr-si .gr-si-help .more:after {content: ' +';}
#signin.gr-si .gr-si-links a:hover {color: #9fbcf5;}

/* 입력 면 — 제목 왼쪽 정렬. 위 '#signin h4:before'(가운데 짧은 줄)는 남색 면 쪽 표시와 겹쳐 끔 */
#signin.gr-si h4 {font-size: 2.2rem;letter-spacing: -0.05em;line-height: 1.2;margin: 0;text-align: left;}
#signin.gr-si h4:before {display: none;}
#signin.gr-si .gr-signin-lead {font-size: 1.02rem;line-height: 1.65;margin: 0.6rem 0 0.4rem;}
#signin.gr-si .gr-si-note {color: var(--gr-sub);font-size: 0.92rem;line-height: 1.6;margin-top: 0.9rem;}

/* 학습 지원 한 줄 — 나눔 화면 아래. '질문 · 전화 · 시간 · 찾기' 를 세로선으로 나눠 한 줄에(좁아지면 flex-wrap 으로 다음 줄).
 *   전화번호만 굵고 크게(막힌 사람이 찾는 것). '찾기'는 오른쪽 끝으로 밀어 둠(margin-left:auto). */
#signin.gr-si .gr-si-help {align-items: center;border-bottom: 1px solid var(--gr-line);display: flex;flex-wrap: wrap;gap: 0.4rem 0;padding: 1.1rem 0.2rem;}
#signin.gr-si .gr-si-help > * {border-left: 1px solid var(--gr-line);line-height: 1.4;padding: 0 1.1rem;}
#signin.gr-si .gr-si-help > *:first-child {border-left: 0;padding-left: 0;}
#signin.gr-si .gr-si-help .q {color: var(--gr-sub);font-weight: 700;}
#signin.gr-si .gr-si-help .tel {color: var(--gr-navy);font-size: 1.2rem;font-weight: 800;text-decoration: none;}
#signin.gr-si .gr-si-help .tel .gr-temp {font-weight: 400;}
#signin.gr-si .gr-si-help .time {color: var(--gr-sub);}
#signin.gr-si .gr-si-help .more {border-left: 0;color: var(--gr-navy);font-weight: 700;margin-left: auto;padding-right: 0;text-decoration: none;white-space: nowrap;}
#signin.gr-si .gr-si-help .more:hover {color: var(--gr-blue);}

/* 강의 글쓰기(갤러리 스킨 write.tpl.php) 첨부 칸 아래 안내 한 줄 — 썸네일·교안 칸에 영상(mp4)을 잘못 올리는 일 방지.
 *   원본 '첨부 가능' 글자(.bytetxt)와 같은 줄에 붙지 않게 block. 회색 #4a5465(본문 보조색) — 원본 #999 는 너무 흐림 */
.gr-wr-hint {color: var(--gr-sub);font-size: 0.9rem;line-height: 1.5;margin-top: 0.35rem;}

/* 태블릿·휴대폰(~860px): 위아래로 쌓기 — 입력 면(HTML 순서대로 먼저) → 남색 면 → 지원 줄.
 *   860px 를 쓴 이유: 입력 면 28rem(476px) + 남색 면 최소 약 22rem(374px) ≈ 850px. 그보다 좁으면 남색 면 문구가 3줄 넘게 깨짐.
 *   바깥 선은 없앰 — 휴대폰 폭에선 선이 화면 가장자리와 붙어 답답해 보여서. */
@media (max-width: 860px) {
    #signin.gr-si {margin: 1.6rem auto 2.6rem;}
    #signin.gr-si .gr-si-wrap {border: 0;grid-template-areas: "main" "side";grid-template-columns: minmax(0, 1fr);}
    #signin.gr-si .gr-si-main {padding: 0 0 2rem;}
    #signin.gr-si .gr-si-side {padding: 1.8rem 1.4rem 1.6rem;}
    #signin.gr-si .gr-si-copy {font-size: 1.7rem;}
    #signin.gr-si .gr-si-wave {height: 2.6rem;padding-top: 1.4rem;}
    /* 좁은 화면에선 세로선 대신 줄바꿈으로 나눔 — 세로선이 줄 처음에 걸리면 지저분해 보여서 */
    #signin.gr-si .gr-si-help > * {border-left: 0;flex-basis: 100%;padding: 0.15rem 0;}
    #signin.gr-si .gr-si-help .more {margin-left: 0;margin-top: 0.3rem;}
}
/* 게시판·로그인 등 엔진 기본 화면의 단추 색 — 원본 테마 .btn1(보라 #6b52e9) 을 사이트 남색으로.
   '#sub .btn1'(1-1-0)로 써서 원본 .btn1(0-1-0)을 이긴다. 크기·모양은 원본 그대로(게시판 화면 배치가 그 크기 기준).
   글자색은 원본이 color:#fff !important 라 따로 안 줌. */
#sub .btn1, #main .btn1 {background: var(--gr-navy);border-color: var(--gr-navy);}
#sub .btn1:hover, #main .btn1:hover {background: var(--gr-blue);border-color: var(--gr-blue);}
/* 게시판 목록 머리·칸 글자 — 게시판 모듈 CSS 가 px(13~15px)로 고정해 둔 것을 본문 크기(rem)로. 60대 이상 이용자 기준 */
#sub #board-list th, #sub #board-list td {font-size: 1rem;}
.gr-fs {align-items: center;display: inline-flex;gap: 0.2rem;}
.gr-fs > span {color: var(--gr-sub);font-size: 0.85rem;margin-right: 0.2rem;}
/* PC 머리 줄에서는 '글자크기' 글씨를 숨기고 단추만 — 메뉴 7개와 한 줄에 넣기 위함. 단추마다 title(글자 작게/기본/크게)이 있고,
   전체 메뉴(서랍)·로그인 화면에서는 글씨가 그대로 보인다. */
#gr-header:not(.gr-type2) .gr-util .gr-fs > span {display: none;}
/* [2026-11-06] 최소 폭 2 → 1.85rem, 안쪽 여백 0.3 → 0.25rem — 이름 단추 자리 확보(.gr-my-btn 주석). 높이(누르는 면적)는 그대로 2rem */
.gr-fs button {background: #ffffff;border: 1px solid var(--gr-line);border-radius: 0.3rem;color: var(--gr-navy);cursor: pointer;font-size: 1rem;font-weight: 700;height: 2rem;min-width: 1.85rem;padding: 0 0.25rem;}
.gr-fs button.gr-fs-reset {font-size: 0.8rem;font-weight: 400;}
.gr-fs button:hover {border-color: var(--gr-blue);color: var(--gr-blue);}
.gr-my {position: relative;}
/* [2026-11-06 수정] 최대 폭 5.6rem → 9rem(약 153px). 5.6rem 은 세 글자 이름('홍길동 님 ▾' 약 108px)도 잘려 '참여…' 처럼 보였다(사용자 지적).
   넓힌 만큼은 로고·오른쪽 묶음 여백을 줄이고(위 .gr-logo/.gr-util), 메뉴 사이 남던 여백(약 30px)으로 메움 —
   1280px 폭에서 'KMAC관리자 님'(가장 긴 운영 계정)까지 잘리지 않고, 압축 모드(전체 메뉴 단추)로도 바뀌지 않음을 캡처로 확인.
   9rem 을 넘는 긴 이름만 '…' 로 줄어든다(전체 이름은 title). 더 넓히면 1280px 에서 머리 줄이 넘쳐 상단 메뉴가 통째로 숨는다.
   [2026-11-05] '이름 님' 단추: 최대 5.6rem(약 95px, 이름 4글자 + 님) 에서 '…' 로 줄임. 관리자 이름('최고관리자 님')처럼 길면 1440px 에서도 머리 줄이 넘쳐
   전체 메뉴 단추(압축 모드)로 바뀌어 버림(캡처로 확인). 전체 이름은 단추의 title(마우스를 올리면 보임)로 확인 — head.tpl.php */
.gr-my-btn {background: var(--gr-sky);border: 0;border-radius: var(--gr-r);max-width: 9rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: var(--gr-navy);cursor: pointer;font-size: 0.95rem;font-weight: 700;padding: 0.45rem 0.6rem;}
.gr-my-btn:after {content: ' ▾';}
.gr-my-menu {background: #ffffff;border: 1px solid var(--gr-line);box-shadow: 0 10px 24px rgba(19,41,75,0.12);display: none;min-width: 11rem;padding: 0.4rem 0;position: absolute;right: 0;top: calc(100% + 0.4rem);z-index: 10;}
.gr-my.open .gr-my-menu, .gr-my:focus-within .gr-my-menu {display: block;}
.gr-my-menu a {display: block;font-size: 0.95rem;padding: 0.5rem 1rem;text-decoration: none;white-space: nowrap;}
.gr-my-menu a:hover {background: var(--gr-sky);color: var(--gr-blue);}

/* 전체 메뉴 단추·서랍(태블릿·모바일) */
#gr-menu-btn {background: none;border: 0;cursor: pointer;display: none;height: 3rem;margin-left: auto;padding: 0.6rem;width: 3rem;}
#gr-menu-btn span {background: var(--gr-navy);border-radius: 2px;display: block;height: 3px;margin: 0.35rem 0;}
#gr-drawer {background: #ffffff;bottom: 0;box-shadow: -8px 0 24px rgba(0,0,0,0.15);max-width: 86vw;overflow-y: auto;position: fixed;right: 0;top: 0;transform: translateX(105%);transition: transform 0.25s;width: 24rem;z-index: 500;}
#gr-drawer.on {transform: none;}
#gr-drawer-bg {background: rgba(0,0,0,0.45);display: none;inset: 0;position: fixed;z-index: 490;}
#gr-drawer-bg.on {display: block;}
.gr-drawer-head {align-items: center;background: var(--gr-navy);display: flex;justify-content: space-between;padding: 1rem 1.2rem;}
.gr-drawer-head strong {color: #ffffff;font-size: 1.2rem;}
#gr-drawer-close {background: none;border: 1px solid rgba(255,255,255,0.5);border-radius: 0.3rem;color: #ffffff;cursor: pointer;font-size: 0.95rem;padding: 0.3rem 0.7rem;}
.gr-drawer-util {align-items: center;border-bottom: 1px solid var(--gr-line);display: flex;flex-wrap: wrap;gap: 0.8rem;padding: 1rem 1.2rem;}
.gr-drawer-util > a {background: var(--gr-sky);border-radius: 0.4rem;color: var(--gr-navy);font-weight: 700;padding: 0.45rem 0.9rem;text-decoration: none;}
#gr-mo-gnb > li {border-bottom: 1px solid var(--gr-line);}
#gr-mo-gnb > li > a {color: var(--gr-navy);display: block;font-size: 1.15rem;font-weight: 700;padding: 1rem 1.2rem;text-decoration: none;}
#gr-mo-gnb > li > ul {background: #f6f8fb;padding: 0.3rem 0 0.6rem;}
#gr-mo-gnb > li > ul a {display: block;padding: 0.55rem 1.2rem 0.55rem 2rem;text-decoration: none;}
#gr-mo-gnb li.on > a {color: var(--gr-blue);}

/* ---------- 메인 ---------- */
/* [2026-11-05 디자인 3차 — "AI 느낌이 덜 나게"] 메인 화면만 (바꾼 이유·이전 판 백업 위치는 html/index.tpl.php 머리 주석)
   원칙
     · 둥근 모서리·그림자·원 안의 아이콘·장식 무늬 쓰지 않음 — 2차에서 '자동 생성 화면 같다'는 인상의 원인.
     · 구분은 1px 선(--gr-line)과 굵은 윗선(2~3px 남색·파랑)으로, 위계는 글자 크기·굵기로만.
     · 모서리는 0.15rem(거의 직각). 단추·칸 모양을 바꿀 때도 이 값을 넘기지 않아야 전체 인상이 유지된다.
   이 구역의 클래스(.gr-quick·.gr-proc·.gr-about·.gr-lat·.gr-help 등)는 메인과 메인 최근 글 틀(mod-board/latest/gongron)에서만 쓴다
   → 하위 화면에는 영향 없음(2026-11-05 grep 확인). 하위 화면에 같은 이름을 새로 쓰면 이 모양이 따라가니 주의. */
#main #content {margin: 0;width: auto;}
:root {
    --gr-r: 0.15rem;          /* 메인 공통 모서리 — 거의 직각 */
    --gr-bg2: #f2f4f7;        /* 주요 일정 띠 바탕(연회색) */
}

/* 대문 — 사진 + 남회색 음영 + 흰 글자 (구성 이유는 html/index.tpl.php 주석)
   .gr-hero-pic img : 틀 전체를 덮는 사진(absolute + cover). filter 로 채도 30%↓·밝기 8%↓ → 차분한 회색 느낌.
                      object-position 세로 30%: 창밖 원전(위쪽)이 잘리지 않으면서 인물 얼굴도 들어오는 위치(사진 바꾸면 다시 맞출 것).
   .gr-hero-pic:after: 음영 막. 왼쪽(글 칸) 88% → 오른쪽 30% 로 옅어짐. 색은 남색이 섞인 회색(#1c2433)이라 사이트 남색과 어울림.
   .gr-hero-in      : 글 칸. 이 칸의 위아래 여백이 대문 높이를 정한다(약 400px). 높이를 바꾸려면 padding 을 조정. */
.gr-hero {position: relative;}
.gr-hero-pic {background: #2a3343;overflow: hidden;position: relative;}
.gr-hero-pic img {filter: saturate(0.7) brightness(0.92);height: 100%;inset: 0;object-fit: cover;object-position: center 30%;position: absolute;width: 100%;}
.gr-hero-pic:after {background: linear-gradient(90deg, rgba(28,36,51,0.88) 0%, rgba(28,36,51,0.78) 38%, rgba(28,36,51,0.45) 68%, rgba(28,36,51,0.30) 100%);content: '';inset: 0;position: absolute;}
.gr-hero-in {margin: 0 auto;max-width: var(--gr-in);padding: 3.8rem 1.2rem 3.8rem;position: relative;z-index: 1;}
/* 대문 꼬리표 [3차]: 테두리 알약(1차·2차) → 앞에 짧은 가로줄 + 글자. 잡지·보고서 표지에서 쓰는 방식이라 덜 '화면 부품' 같음 */
.gr-hero-tag {align-items: center;color: #dfe5ee;display: flex;font-size: 1rem;font-weight: 700;gap: 0.7rem;letter-spacing: 0.02em;margin-bottom: 1rem;}
.gr-hero-tag:before {background: #ffffff;content: '';height: 2px;width: 2.2rem;}
.gr-hero-in h2 {color: #ffffff;font-size: 2.7rem;font-weight: 800;letter-spacing: -0.045em;line-height: 1.3;text-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.gr-hero-sub {color: #e3e8f0;font-size: 1.2rem;line-height: 1.6;margin: 0.9rem 0 1.8rem;}
.gr-hero-btns {display: flex;flex-wrap: wrap;gap: 0.6rem;}
.gr-btn-solid, .gr-btn-ghost {border: 2px solid #ffffff;border-radius: var(--gr-r);display: inline-block;font-size: 1.1rem;font-weight: 700;padding: 0.8rem 1.5rem;text-decoration: none;}
.gr-btn-solid {background: #ffffff;color: var(--gr-navy);}
.gr-btn-solid:hover {background: var(--gr-sky);text-decoration: none;}
.gr-btn-ghost {background: transparent;color: #ffffff;}
.gr-btn-ghost:hover {background: rgba(255,255,255,0.12);text-decoration: none;}

/* 바로가기 띠 [3차] — 사진 바로 아래 붙은 3칸. 칸 사이는 세로 1px 선, 띠 아래는 1px 선.
   · 칸 안 배치(grid): 1행 번호, 2행 제목, 3행 설명 / 화살표는 오른쪽 열에서 세 줄에 걸쳐 가운데.
   · .q1(국민 의견) 만 파랑 채움 — 주된 행동 하나만 색으로 드러냄. 나머지 두 칸은 흰 바탕, 마우스를 올리면 남색 채움.
   · 첫 칸 왼쪽·마지막 칸 오른쪽에도 선을 그어(.gr-quick-in 의 좌우 테두리) 본문 폭과 정확히 맞춤. */
.gr-quick {background: #ffffff;border-bottom: 1px solid var(--gr-line);}
/* 폭: .gr-in 은 content-box 라 본문 글 폭 = --gr-in(1240px) 그대로 → 띠도 max-width 를 같은 값으로 해야 왼쪽 끝이 본문과 맞는다
   (처음에 좌우 여백 2.4rem 을 빼서 1199px 로 했더니 본문보다 20px 안쪽으로 밀림 — 2026-11-05 캡처로 확인).
   width calc(100% - 2.4rem): 1240px 보다 좁은 화면에서는 본문과 같은 좌우 여백(1.2rem)을 남김 */
.gr-quick-in {border-left: 1px solid var(--gr-line);display: grid;grid-template-columns: repeat(2, 1fr);  /* [2026-11-12] 3 → 2칸(공개토론회 참석 신청은 팝업으로, index.tpl.php) */margin: 0 auto;max-width: var(--gr-in);width: calc(100% - 2.4rem);}
.gr-quick a {align-items: center;border-right: 1px solid var(--gr-line);column-gap: 1rem;display: grid;grid-template-columns: 1fr auto;padding: 1.5rem 1.6rem 1.6rem;text-decoration: none;transition: background 0.12s;}
.gr-quick .no {color: var(--gr-blue);font-size: 0.95rem;font-weight: 800;grid-column: 1;letter-spacing: 0.04em;}
.gr-quick strong {color: var(--gr-navy);font-size: 1.4rem;font-weight: 800;grid-column: 1;letter-spacing: -0.03em;margin-top: 0.2rem;}
.gr-quick .ds {color: var(--gr-sub);font-size: 0.95rem;grid-column: 1;margin-top: 0.15rem;}
.gr-quick .ar {color: var(--gr-navy);font-size: 1.6rem;font-weight: 400;grid-column: 2;grid-row: 1 / span 3;transition: transform 0.12s;}
.gr-quick a:hover, .gr-quick a:focus-visible {background: var(--gr-navy);text-decoration: none;}
.gr-quick a:hover *, .gr-quick a:focus-visible * {color: #ffffff;}
.gr-quick a:hover .ar {transform: translateX(0.3rem);}
.gr-quick a.q1 {background: var(--gr-blue);border-right-color: var(--gr-blue);}
.gr-quick a.q1 * {color: #ffffff;}
.gr-quick a.q1 .no, .gr-quick a.q1 .ds {color: #d6e2ff;}
.gr-quick a.q1:hover, .gr-quick a.q1:focus-visible {background: var(--gr-blue-d);}

/* 섹션 공통 */
.gr-sec {padding: 3.4rem 0 0;}
.gr-sec:last-child {padding-bottom: 4rem;}
.gr-in {margin: 0 auto;max-width: var(--gr-in);padding: 0 1.2rem;}
.gr-cols {display: grid;gap: 3rem;grid-template-columns: 1fr 1fr;}
/* min-width:0 — 격자 칸·줄 안 글자 칸은 기본값(auto)이 '안의 글자 길이'라서, 최근 글 제목이 길면(한 줄 고정 + …) 줄어들지 않고
   화면 밖으로 밀려 모바일에서 가로 스크롤이 생겼다(2026-11-05 예시 글 넣고 390px 에서 확인). 0 으로 풀어야 '…' 줄임이 동작한다. */
.gr-cols > * {min-width: 0;}
/* 섹션 제목 줄: 제목 · 안내 글 · (오른쪽 끝) 더보기. 안내 글은 제목 옆 회색 — 좁은 화면에서는 아래로 내려감 */
.gr-sec-head {align-items: baseline;display: flex;flex-wrap: wrap;gap: 0.4rem 1.2rem;margin-bottom: 1.6rem;}
.gr-sec-head h3 {color: var(--gr-navy);font-size: 1.7rem;font-weight: 800;letter-spacing: -0.03em;}
.gr-sec-head p {color: var(--gr-sub);font-size: 0.95rem;}
.gr-sec-head .gr-more {margin-left: auto;}
/* '더보기' — 공공기관 누리집 관례대로 글자 + '+' . 테두리 없음 */
.gr-more {color: var(--gr-sub);font-size: 0.95rem;font-weight: 700;text-decoration: none;white-space: nowrap;}
.gr-more:after {content: ' +';font-size: 1.1em;}
.gr-more:hover {color: var(--gr-blue);text-decoration: underline;}

/* ③ 주요 일정 — 가로 5칸 진행표 [3차]
   · 띠 바탕 연회색(.gr-proc), 칸마다 윗선 3px(회색). 핵심(li.key)은 파랑 윗선·파란 날짜, 미정(li.tbd)은 점선·회색 날짜.
   · 날짜 1.75rem 굵게: 일정 띠에서 가장 먼저 눈에 들어와야 하는 정보가 '언제'라서 제목보다 크게.
     '11.20 – 12.10' 이 한 칸(약 230px)에 한 줄로 들어가는 크기. 글자크기 단추로 키우면 두 줄로 꺾이지만 겹치지는 않음.
   · 칸 수가 바뀌면 repeat(5, …) 를 같이 바꿀 것. */
.gr-proc {background: var(--gr-bg2);padding-bottom: 3rem;}
/* [2026-11-13 발주처 수정 요청 4] 5칸 → 6칸: 확정 일정표에 공개토론회(11.25)·숙의토론회(12.11~13) 날짜가 따로 나와
   '추후 안내' 한 칸(공개토론회·숙의토론회)을 두 칸으로 나눔. 6칸이면 한 칸 폭이 약 190px 로 줄어
   날짜 글자를 1.75 → 1.55rem 으로 낮춤('11.23 – 12.10' 이 한 줄에 들어가는 크기). 태블릿(3칸)·모바일(1칸) 규칙은 아래 그대로. */
.gr-proc-list {display: grid;gap: 0 1.4rem;grid-template-columns: repeat(6, 1fr);}
.gr-proc-list li {border-top: 3px solid #c4cdda;padding: 1.1rem 0.2rem 0 0;}
.gr-proc-list .d {color: var(--gr-navy);display: block;font-size: 1.55rem;font-weight: 800;letter-spacing: -0.04em;line-height: 1.15;white-space: nowrap;}
.gr-proc-list strong {color: var(--gr-text);display: block;font-size: 1.08rem;font-weight: 800;margin-top: 0.7rem;}
.gr-proc-list .t {color: var(--gr-sub);display: block;font-size: 0.92rem;line-height: 1.55;margin-top: 0.3rem;}
.gr-proc-list li.key {border-top-color: var(--gr-blue);}
.gr-proc-list li.key .d {color: var(--gr-blue);}
.gr-proc-list li.tbd {border-top-style: dashed;}
.gr-proc-list li.tbd .d {color: #8791a1;}

/* ④ 위원회 소개 — 왼쪽 큰 제목(5) / 오른쪽 설명 + 목록(7) [3차] */
.gr-about-in {display: grid;gap: 2rem 4rem;grid-template-columns: 5fr 7fr;}
.gr-about-head .eb {color: var(--gr-blue);font-size: 1rem;font-weight: 800;margin-bottom: 0.6rem;}
.gr-about-head h3 {color: var(--gr-navy);font-size: 2.1rem;font-weight: 800;letter-spacing: -0.045em;line-height: 1.35;}
.gr-about-txt {color: var(--gr-sub);font-size: 1.05rem;line-height: 1.85;}
/* 바로가기 목록: 2열 × 2줄, 줄마다 아래 1px 선 + 오른쪽 화살표. 맨 윗줄은 남색 2px 윗선으로 목록 시작을 표시 */
.gr-links {border-top: 2px solid var(--gr-navy);display: grid;column-gap: 2rem;grid-template-columns: 1fr 1fr;margin-top: 1.6rem;}
.gr-links a {align-items: center;border-bottom: 1px solid var(--gr-line);color: var(--gr-navy);display: flex;font-size: 1.08rem;font-weight: 700;justify-content: space-between;padding: 1rem 0.2rem;text-decoration: none;}
.gr-links a:after {content: '→';font-weight: 400;transition: transform 0.12s;}
.gr-links a:hover {color: var(--gr-blue);}
.gr-links a:hover:after {transform: translateX(0.3rem);}

/* ⑤ 최근 글(공지·숙의자료집) — 상자 없이 제목 + 남색 2px 선 + 줄 목록 [3차] */
.gr-lat .gr-tit {align-items: baseline;border-bottom: 2px solid var(--gr-navy);color: var(--gr-navy);display: flex;font-size: 1.45rem;font-weight: 800;justify-content: space-between;letter-spacing: -0.03em;padding-bottom: 0.8rem;}
.gr-lat-list li {align-items: center;border-bottom: 1px solid var(--gr-line);display: flex;justify-content: space-between;gap: 1rem;}
.gr-lat-list li a {display: block;flex: 1;min-width: 0;font-size: 1.05rem;overflow: hidden;padding: 0.95rem 0.2rem;text-decoration: none;text-overflow: ellipsis;white-space: nowrap;}
.gr-lat-list li a:hover {color: var(--gr-blue);text-decoration: underline;}
.gr-lat-list .date {color: var(--gr-sub);flex-shrink: 0;font-size: 0.92rem;}
.gr-nodata {border-bottom: 1px solid var(--gr-line);color: var(--gr-sub);padding: 2.4rem 0;text-align: center;}

/* ⑥ 학습 지원 — 남색 단색 띠(그라데이션·장식 무늬 없음). 단추는 직각 테두리, '학습방 바로가기'만 흰 채움 */
.gr-help {align-items: center;background: var(--gr-navy);border-radius: var(--gr-r);display: flex;flex-wrap: wrap;gap: 1.5rem;justify-content: space-between;padding: 1.8rem 2.2rem;}
.gr-help-tel strong {color: #c8d4ea;display: block;font-size: 1rem;font-weight: 700;}
.gr-help-tel .tel {color: #ffffff;display: inline-block;font-size: 2.1rem;font-weight: 800;letter-spacing: -0.02em;margin: 0.15rem 1rem 0 0;text-decoration: none;}
.gr-help-tel span {color: #c8d4ea;font-size: 0.95rem;}
.gr-help-links {display: flex;flex-wrap: wrap;gap: 0.5rem;}
.gr-help-links a {border: 1px solid rgba(255,255,255,0.45);border-radius: var(--gr-r);color: #ffffff;display: block;font-weight: 700;padding: 0.75rem 1.15rem;text-decoration: none;}
.gr-help-links a:hover {background: rgba(255,255,255,0.12);}
.gr-help-links a.go {background: #ffffff;border-color: #ffffff;color: var(--gr-navy);}
.gr-help-links a.go:hover {background: var(--gr-sky);}
/* 움직임 줄이기 설정(멀미·어지럼 이용자)을 켠 경우 화살표 움직임 끔 */
@media (prefers-reduced-motion: reduce) {
    .gr-quick a, .gr-quick .ar, .gr-links a:after {transition: none;}
    .gr-quick a:hover .ar, .gr-links a:hover:after {transform: none;}
}

/* ---------- 하위 화면 공통 ---------- */
/* [2026-11-05 하위 화면 디자인 — 메인 3차 '선과 글자' 컨셉에 맞춤]
   되돌리기: D:\Source\20.kmac\gongron_new_하위디자인_v1_백업.zip (이 파일·head.tpl.php·elearning.css·sign 템플릿 등 29개를 함께 덮어쓰기)
   원칙(메인과 같음): 둥근 모서리·그림자·원 안의 번호·연파랑 둥근 상자 쓰지 않음. 구분은 1px 선 + 굵은 윗선(2~3px),
     위계는 글자 크기·굵기로. 모서리는 --gr-r(0.15rem, 거의 직각). 색은 남색·파랑 + 임시 안내용 노랑만.
   우선순위 주의: 게시판 모듈 CSS(mod-board/board/basic/style.css)는 이 파일보다 '뒤에' 불러온다(layout/head.set.php).
     그래서 게시판 규칙은 모두 '#sub #board-…' 처럼 아이디를 하나 더 붙여 이기게 썼다. #sub 를 빼면 모듈 CSS 가 다시 이긴다. */
/* box-sizing content-box: 글 폭 = --gr-in(1240px) 그대로 → 머리 줄·머리 띠·탭(.gr-in 계열, content-box)과 왼쪽 끝이 맞는다.
   1차는 border-box 라 좌우 여백만큼 글 폭이 줄어 본문이 머리 띠 제목보다 20px 안쪽에서 시작했다(2026-11-05 캡처로 확인). */
#sub #content {margin: 2.8rem auto 4.5rem;max-width: var(--gr-in);padding: 0 1.2rem;width: auto;box-sizing: content-box;}

/* 머리 띠 — 연회색 바탕 + 1단 메뉴 이름(작게, 앞에 가로줄) + 지금 화면 이름(크게) + 현재 위치.
   1차의 남색 그라데이션 띠는 메인 대문 사진과 겹쳐 무거웠고, 화면마다 1단 이름만 크게 나와 구분이 안 됐다(head.tpl.php 주석). */
.gr-subvis {background: var(--gr-bg2);border-bottom: 1px solid var(--gr-line);}
.gr-subvis .in {margin: 0 auto;max-width: var(--gr-in);padding: 2.5rem 1.2rem 2.3rem;position: relative;}
.gr-subvis .eb {align-items: center;color: var(--gr-blue);display: flex;font-size: 1rem;font-weight: 800;gap: 0.7rem;margin-bottom: 0.55rem;}
.gr-subvis .eb:before {background: var(--gr-blue);content: '';height: 2px;width: 2.2rem;}
.gr-subvis h2 {color: var(--gr-navy);font-size: 2.4rem;font-weight: 800;letter-spacing: -0.045em;line-height: 1.25;}
/* 현재 위치: PC 는 띠 오른쪽 아래(제목과 같은 줄 높이), 태블릿 이하는 제목 아래(아래 @media) */
.gr-navi {bottom: 2.45rem;display: flex;flex-wrap: wrap;position: absolute;right: 1.2rem;}
.gr-navi li {color: var(--gr-sub);font-size: 0.9rem;}
.gr-navi li + li:before {content: '›';margin: 0 0.5rem;}
.gr-navi li a {color: var(--gr-sub);font-size: 0.9rem;text-decoration: none;}
.gr-navi li a:hover {color: var(--gr-blue);text-decoration: underline;}
.gr-navi li:last-child a {color: var(--gr-navy);font-weight: 700;}

/* 하위 메뉴 탭 — 칸 사이 세로선, 지금 화면은 남색 채움(1차: 파란 밑줄). 기관 누리집에서 가장 익숙한 모양이라 고령층이 '지금 위치'를 바로 찾음.
   ul 의 좌우 padding 은 본문 폭과 첫 칸 왼쪽 선을 맞추기 위한 것(.gr-in 과 같은 1.2rem). */
.gr-lnb {background: #ffffff;border-bottom: 1px solid var(--gr-line);}
.gr-lnb ul {display: flex;flex-wrap: wrap;margin: 0 auto;max-width: var(--gr-in);padding: 0 1.2rem;}
.gr-lnb li a {border-right: 1px solid var(--gr-line);color: var(--gr-text);display: block;font-size: 1.05rem;font-weight: 700;padding: 1.05rem 1.6rem;text-decoration: none;}
.gr-lnb li:first-child a {border-left: 1px solid var(--gr-line);}
.gr-lnb li a:hover {color: var(--gr-blue);box-shadow: none;}
.gr-lnb li.on a, .gr-lnb li.on a:hover {background: var(--gr-navy);border-color: var(--gr-navy);box-shadow: none;color: #ffffff;}

/* ---------- 안내(정적) 화면 — html/sub/pages/*.tpl.php ---------- */
.gr-page-lead {border-bottom: 1px solid var(--gr-line);color: var(--gr-text);font-size: 1.25rem;font-weight: 700;letter-spacing: -0.02em;line-height: 1.6;margin-bottom: 2rem;padding-bottom: 1.4rem;}
/* 임시 문구 표시 — 발주처 자료로 바꾸면 지울 상자라 눈에 띄게 노랑 유지. 왼쪽 굵은 선으로만 강조(둥근 상자 아님) */
.gr-temp-box {background: #fff8ec;border: 1px solid #efd3a3;border-left: 3px solid #d9902a;border-radius: var(--gr-r);color: #7a4306;font-size: 0.95rem;margin-bottom: 2rem;padding: 0.8rem 1rem;}
.gr-block {margin-bottom: 3.2rem;}
/* 소제목: 왼쪽 파란 막대(1차) → 위에 짧은 파란 선(1.6rem). 메인 대문·머리 띠의 '짧은 가로줄'과 같은 표시 */
.gr-block h3 {color: var(--gr-navy);font-size: 1.5rem;font-weight: 800;letter-spacing: -0.03em;margin-bottom: 1.1rem;}
.gr-block h3:before {background: var(--gr-blue);content: '';display: block;height: 3px;margin-bottom: 0.8rem;width: 1.6rem;}
.gr-block p {line-height: 1.85;}
.gr-big {color: var(--gr-navy);font-size: 1.7rem;font-weight: 800;letter-spacing: -0.03em;}
/* 구성·바로가기 칸(.gr-org) — 연파랑 둥근 상자(1차) → 남색 윗선 + 칸 사이 1px 선의 표. 링크 칸은 마우스를 올리면 남색 채움.
   테두리 방식: 바깥 왼쪽선은 묶음(.gr-org)이, 칸마다 오른쪽·아래 선 → 칸 수가 3·4·2 어느 것이든 선이 두 겹으로 겹치지 않음 */
.gr-org {border-left: 1px solid var(--gr-line);border-top: 2px solid var(--gr-navy);display: grid;gap: 0;grid-template-columns: repeat(3, 1fr);}
.gr-org.gr-org-4 {grid-template-columns: repeat(4, 1fr);}
.gr-org > * {background: #ffffff;border-bottom: 1px solid var(--gr-line);border-radius: 0;border-right: 1px solid var(--gr-line);display: block;padding: 1.4rem 1.5rem;text-decoration: none;}
.gr-org strong {color: var(--gr-navy);display: block;font-size: 1.2rem;font-weight: 800;margin-bottom: 0.35rem;}
.gr-org p {color: var(--gr-sub);font-size: 0.95rem;}
.gr-org a {position: relative;}
.gr-org a:after {bottom: 1.3rem;color: var(--gr-navy);content: '→';position: absolute;right: 1.3rem;}
.gr-org a:hover {background: var(--gr-navy);}
.gr-org a:hover strong, .gr-org a:hover p, .gr-org a:hover:after {color: #ffffff;}
/* 점 목록(.gr-check) — ✔ 기호(1차) → 작은 파란 네모 + 줄마다 옅은 선 */
.gr-check {border-top: 1px solid var(--gr-line);}
.gr-check li {border-bottom: 1px solid #eceff3;line-height: 1.7;padding: 0.8rem 0 0.8rem 1.5rem;position: relative;}
.gr-check li:before {background: var(--gr-blue);content: '';height: 0.4rem;left: 0.25rem;position: absolute;top: 1.55rem;width: 0.4rem;}
.gr-check li strong {color: var(--gr-navy);}
/* 단계(.gr-steps) — 원 안의 숫자(1차) → 메인 '주요 일정'과 같은 윗선 칸 + 두 자리 번호(01·02…).
   번호는 CSS counter(decimal-leading-zero)로 그린다. 원래 <strong>1</strong> 은 화면에서만 숨기고 화면낭독기에는 남김(.gr-steps li strong). */
.gr-steps {counter-reset: grstep;display: grid;gap: 0 1.2rem;grid-auto-columns: 1fr;grid-auto-flow: column;}
.gr-steps li {border-top: 3px solid #c4cdda;counter-increment: grstep;padding: 0.9rem 0.3rem 0 0;}
.gr-steps li:before {color: var(--gr-blue);content: counter(grstep, decimal-leading-zero);display: block;font-size: 1.5rem;font-weight: 800;letter-spacing: -0.02em;}
.gr-steps li strong {clip: rect(0 0 0 0);height: 1px;overflow: hidden;position: absolute;width: 1px;}
.gr-steps li span {color: var(--gr-text);display: block;font-size: 1.08rem;font-weight: 800;margin-top: 0.35rem;}
/* 표 */
.gr-table {border-collapse: collapse;border-top: 2px solid var(--gr-navy);width: 100%;}
.gr-table th, .gr-table td {border-bottom: 1px solid var(--gr-line);padding: 0.95rem 1rem;text-align: center;}
.gr-table th {background: #f7f8fa;color: var(--gr-navy);font-weight: 800;}
.gr-table td:first-child {color: var(--gr-navy);font-weight: 700;white-space: nowrap;}
.gr-table td:last-child {text-align: left;}
/* 자주 묻는 질문 — 연파랑 둥근 상자(1차) → 줄 목록. 'Q' 는 파랑 굵게, 답은 'A' 회색으로 들여씀 */
.gr-faq {border-top: 2px solid var(--gr-navy);}
.gr-faq dt {border-top: 1px solid var(--gr-line);color: var(--gr-navy);font-size: 1.12rem;font-weight: 800;padding: 1.1rem 0.3rem 0.5rem 2.4rem;position: relative;}
.gr-faq dt:first-child {border-top: 0;}
.gr-faq dt:before {color: var(--gr-blue);content: 'Q';font-size: 1.2rem;left: 0.4rem;position: absolute;top: 1rem;}
.gr-faq dd {color: var(--gr-text);line-height: 1.8;padding: 0 0.3rem 1.1rem 2.4rem;position: relative;}
.gr-faq dd:before {color: #8791a1;content: 'A';font-size: 1.2rem;font-weight: 800;left: 0.4rem;position: absolute;top: -0.1rem;}
/* 행사 개요(.gr-event: 일시·장소·참여 방법) — 테두리 상자 3개 → 윗선 칸 */
.gr-event {border-left: 1px solid var(--gr-line);border-top: 2px solid var(--gr-navy);display: grid;grid-template-columns: repeat(3, 1fr);margin: 1.2rem 0;}
.gr-event > div {border-bottom: 1px solid var(--gr-line);border-right: 1px solid var(--gr-line);padding: 1.1rem 1.3rem;}
.gr-event span {color: var(--gr-sub);display: block;font-size: 0.9rem;font-weight: 700;}
.gr-event strong {color: var(--gr-navy);display: block;font-size: 1.2rem;margin-top: 0.2rem;}
/* 단추 */
.gr-btns {margin-top: 1.2rem;}
.gr-btn {background: var(--gr-navy);border-radius: var(--gr-r);color: #ffffff;display: inline-block;font-size: 1.1rem;font-weight: 800;padding: 0.85rem 1.7rem;text-decoration: none;}
.gr-btn:after {content: ' →';font-weight: 400;}
.gr-btn:hover {background: var(--gr-blue);text-decoration: none;}
.gr-btn-xl {font-size: 1.25rem;padding: 1rem 2.2rem;}
/* 준비 중·결과 공개 예정 안내 */
.gr-ready {border-bottom: 1px solid var(--gr-line);border-top: 2px solid var(--gr-navy);padding: 3rem 1rem;text-align: center;}
.gr-ready strong {color: var(--gr-navy);display: block;font-size: 1.35rem;margin-bottom: 0.4rem;}
.gr-ready p {color: var(--gr-sub);}

/* [2026-11-13 메뉴 통합] 한 화면 여러 묶음(공론화위원회 · 공지·일정 · 학습하기)
   발주처 요청: "소개와 활동을 별도 하위 메뉴로 두지 않고, 하나의 페이지 안에서 함께 제공" / 시민참여단 하위 메뉴 3개로 통합.
   · .gr-jump : 화면 맨 위 '이 화면 안 바로가기' 줄 — 하위 메뉴(.gr-lnb)와 같은 모양(1px 칸, 번호 01·02)으로 맞춰
                메뉴가 사라져도 '어디에 무엇이 있는지' 를 한눈에 보여 준다. 누르면 해당 묶음으로 이동(#주소 — 스크립트 없음).
   · .gr-part : 묶음 하나. 제목(.gr-part-tit)은 묶음 안 소제목(.gr-block h3, 1.5rem)보다 크게(1.9rem) + 남색 굵은 윗선 →
                '큰 묶음 > 소제목' 위계가 글자 크기와 선 두께로 드러난다('선과 글자' 컨셉).
   · scroll-margin-top : 머리 줄(5.2rem)이 화면 위에 붙어 있어(sticky) #주소로 이동하면 제목이 머리 줄 밑에 가려진다 → 그만큼 띄움.
   · 묶음 안 '임시 문구' 상자는 숨기고 화면 맨 위에 한 번만(.gr-temp-box 를 묶음마다 반복하면 화면이 어수선) — 각 묶음 파일을
     단독 화면으로 열 때는 원래대로 보인다. */
.gr-jump {border-left: 1px solid var(--gr-line);border-top: 2px solid var(--gr-navy);display: flex;flex-wrap: wrap;margin-bottom: 3rem;}
.gr-jump a {border-bottom: 1px solid var(--gr-line);border-right: 1px solid var(--gr-line);color: var(--gr-text);flex: 1 1 auto;font-size: 1.05rem;font-weight: 700;padding: 0.95rem 1.2rem;text-decoration: none;white-space: nowrap;}
.gr-jump a span {color: var(--gr-blue);font-weight: 800;margin-right: 0.45rem;}
.gr-jump a:hover {background: var(--gr-navy);color: #ffffff;}
.gr-jump a:hover span {color: #ffffff;}
.gr-part {margin-bottom: 4.2rem;scroll-margin-top: 6.5rem;}
.gr-part-tit {align-items: baseline;border-top: 3px solid var(--gr-navy);color: var(--gr-navy);display: flex;font-size: 1.9rem;font-weight: 800;gap: 0.7rem;letter-spacing: -0.04em;margin-bottom: 1.8rem;padding-top: 1.1rem;}
.gr-part-tit span {color: var(--gr-blue);font-size: 0.75em;}
.gr-part .gr-temp-box {display: none;}
.gr-part .gr-temp-box.gr-temp-show {display: block;}   /* 묶음마다 따로 알려야 할 때(일부 묶음만 임시)는 이 클래스를 붙여 보이게 */
.gr-part-lead {color: var(--gr-sub);line-height: 1.75;margin: -0.8rem 0 1.4rem;}
.gr-part .gr-lat {margin-bottom: 0.5rem;}
.gr-part .gr-cols {gap: 2.5rem;}
/* 참여단 전용 묶음을 비회원·일반회원이 볼 때 — 내용 대신 로그인 안내 */
.gr-locked {border-bottom: 1px solid var(--gr-line);border-top: 2px solid var(--gr-navy);padding: 2.2rem 1rem;text-align: center;}
.gr-locked strong {color: var(--gr-navy);display: block;font-size: 1.2rem;margin-bottom: 0.4rem;}
.gr-locked p {color: var(--gr-sub);margin-bottom: 1.1rem;}

/* [2026-11-13 발주처 수정 요청 4] 추진 절차·일정 — 확정 일정표(위원회·공개토론회·숙의토론회 3구분)
   첫 칸(구분)은 rowspan 으로 묶은 th(scope=rowgroup — 화면 낭독기가 '위원회' 묶음의 줄임을 알게) — 위아래 가운데·남색 굵게, 오른쪽에 구분선.
   날짜 칸(td.d)은 줄바꿈 없이 남색 굵게: 묶음 첫 줄은 날짜가 둘째 칸이라 기존 'td:first-child' 규칙이 안 먹어서 클래스로 지정. */
.gr-table th.grp-th {background: #f7f8fa;border-right: 1px solid var(--gr-line);color: var(--gr-navy);font-weight: 800;vertical-align: middle;white-space: nowrap;width: 8.5rem;}
.gr-table.gr-sched td.d {color: var(--gr-navy);font-weight: 700;white-space: nowrap;width: 12rem;}

/* [2026-11-13 발주처 수정 요청 5] 글쓰기 화면 — 게시 규칙 한 줄 안내 + 글자 수(현재/최대)
   안내는 회색 바탕 띠(경고색을 쓰면 모든 이용자를 의심하는 인상) / 넘치면 글자 수만 빨간색. */
#board-write td.gr-wr-rule {padding-bottom: 0;}
.gr-wr-rule p {background: #f4f6f9;border-left: 3px solid var(--gr-navy);color: var(--gr-text);font-size: 0.95rem;line-height: 1.7;padding: 0.7rem 1rem;}
.gr-wr-count {color: var(--gr-sub);font-size: 0.92rem;margin-top: 0.4rem;text-align: right;}
.gr-wr-count.over {color: #c62828;font-weight: 800;}
/* 생중계 자리 — 직각 남색 판 + 직각 재생 표시(원 → 네모 테두리) */
.gr-video-ph {align-items: center;aspect-ratio: 16 / 9;background: var(--gr-navy);border-radius: 0;display: flex;flex-direction: column;justify-content: center;margin-bottom: 1rem;max-width: 52rem;}
.gr-video-ph span {border: 2px solid #ffffff;border-radius: 0;color: #ffffff;font-size: 1.6rem;height: 4rem;line-height: 3.8rem;padding-left: 0.2rem;text-align: center;width: 4rem;box-sizing: border-box;}
.gr-video-ph p {color: #c8d4ea;margin-top: 1rem;}
/* 학습방 안내 머리(.gr-learn-top) — 연파랑 둥근 상자 → 남색 윗선 + 연회색 바탕 띠 */
.gr-learn-top {align-items: center;background: var(--gr-bg2);border-top: 3px solid var(--gr-navy);display: flex;flex-wrap: wrap;gap: 1.2rem;justify-content: space-between;padding: 1.8rem 2rem;}
.gr-learn-top h3 {font-size: 1.6rem;margin-bottom: 0.4rem;}
.gr-learn-top h3:before {display: none;}
.gr-help-box {align-items: baseline;background: var(--gr-navy);border-radius: var(--gr-r);display: flex;flex-wrap: wrap;gap: 0.4rem 1rem;padding: 1.3rem 1.7rem;}
.gr-help-box, .gr-help-box * {color: #ffffff;}
.gr-help-box .tel {font-size: 1.6rem;font-weight: 800;}

/* ---------- 게시판 (mod-board 기본 테마 덮어쓰기) ---------- */
/* 단추·입력칸 — 원본 테마 .btn1(보라)·.btn2(회색 그림자)·.inp(35px) 를 사이트 색·큰 크기·직각으로. 학습방(.el)은 자체 단추라 대상 아님 */
#sub .btn1, #sub .btn2 {border-radius: var(--gr-r);box-shadow: none;font-size: 1rem;font-weight: 700;height: 2.9rem;line-height: 2.75rem;min-width: 6rem;padding: 0 1.3rem;}
#sub .btn1.small, #sub .btn2.small {font-size: 0.95rem;height: 2.5rem;line-height: 2.35rem;min-width: 3rem;padding: 0 0.9rem;}
#sub .btn2 {background: #ffffff;border-color: #b9c2d0;color: var(--gr-navy) !important;}
#sub .btn2:hover {background: #ffffff;border-color: var(--gr-navy);}
#sub .inp {border: 1px solid #b9c2d0;border-radius: var(--gr-r);font-size: 1rem;height: 2.9rem;line-height: 2.75rem;padding: 0 0.8rem;}
#sub textarea.inp {height: auto;line-height: 1.6;padding: 0.6rem 0.8rem;}
#sub .inp:focus {background: #ffffff;border-color: var(--gr-blue);outline: 2px solid rgba(31,91,216,0.2);}
/* 목록 */
#sub #boatd-total {color: var(--gr-sub);font-size: 0.95rem;letter-spacing: 0;margin-bottom: 0.8rem;}
#sub #boatd-total strong {color: var(--gr-navy);}
#sub #board-cat ul > li a {border: 1px solid var(--gr-line);border-radius: var(--gr-r);color: var(--gr-sub);font-size: 1rem;line-height: 2.6rem;padding: 0 1.2rem;}
#sub #board-cat ul > li.active a {background: var(--gr-navy);border-color: var(--gr-navy);color: #ffffff;}
#sub #board-list table {border-top: 2px solid var(--gr-navy);}
#sub #board-list table tr > * {border-color: var(--gr-line);font-size: 1rem;letter-spacing: -0.02em;padding: 1.05rem 0.6rem;}
#sub #board-list table thead th {background: #f7f8fa;border-bottom: 1px solid #b9c2d0;color: var(--gr-navy);font-weight: 800;padding: 0.95rem 0.3rem;}
#sub #board-list table td.no {color: var(--gr-sub);font-size: 0.95rem;}
#sub #board-list table td a {font-size: 1rem;}
#sub #board-list table td.sbj a {color: var(--gr-text);font-size: 1.05rem;}
#sub #board-list table td.sbj a:hover {color: var(--gr-blue);text-decoration: underline;}
#sub #board-list table tbody tr:hover > * {background: #f7f9fc;}
#sub #board-list table tbody.notice td {background: #f2f5fa;}
/* 검색 — 1차: 작은 상자 + 작은 단추(35px). 같은 높이(2.9rem)의 선택·입력·단추를 한 줄로 */
#sub #board-sch {align-items: center;border-top: 0;display: flex;flex-wrap: wrap;gap: 0.4rem;justify-content: center;margin-top: 2.2rem;padding: 0;}
#sub #board-sch .where {border: 1px solid #b9c2d0;border-radius: var(--gr-r);font-size: 1rem;height: 2.9rem;padding: 0 0.5rem;width: 7.5rem;}
#sub #board-sch .keyword {border: 1px solid #b9c2d0;border-radius: var(--gr-r);font-size: 1rem;height: 2.9rem;max-width: 100%;padding: 0 0.8rem;width: 20rem;}
#sub #board-sch > button, #sub #board-sch > a {font-size: 1rem;height: 2.9rem;line-height: 2.75rem;padding: 0 1.2rem;}
/* 쪽 번호 — 둥근 끝(1차) → 직각 칸, 지금 쪽은 남색 채움 */
#sub .paging {margin-top: 2.2rem;}
#sub .paging > li a {background: #ffffff;border: 1px solid var(--gr-line);border-radius: 0 !important;color: var(--gr-sub);font-size: 0.95rem;height: 2.6rem;line-height: 2.5rem;width: 2.6rem;}
#sub .paging > li.active a {background: var(--gr-navy);border-color: var(--gr-navy);color: #ffffff;}
/* 글쓰기 */
#sub #board-write h3 {color: var(--gr-navy);font-size: 1.5rem;font-weight: 800;letter-spacing: -0.03em;margin-bottom: 1rem;}
#sub #board-write table tr > * {border-color: var(--gr-line);font-size: 1rem;padding: 0.85rem 0.8rem;}
#sub #board-write table tbody tr:first-child > * {border-top: 2px solid var(--gr-navy);}
#sub #board-write table tbody th {background: #f7f8fa;color: var(--gr-navy);font-weight: 700;width: 9rem;}
#sub #board-write table td.subject {padding: 0.8rem 0;}
#sub #board-write table td.subject .inp {box-shadow: none;font-size: 1.1rem;height: 3.2rem;}
#sub #board-write .bytetxt, #sub #board-write .uploaded {font-size: 0.9rem;}
/* 글 보기 */
#sub #board-view .view-tit {border-top: 2px solid var(--gr-navy);}
#sub #board-view .view-tit h3 {border-color: var(--gr-line);color: var(--gr-navy);font-size: 1.6rem;font-weight: 800;letter-spacing: -0.03em;line-height: 1.45;padding: 1.5rem 0.4rem;}
#sub #board-view .view-tit h3 em {color: var(--gr-blue);font-size: 0.95rem;font-weight: 700;margin-bottom: 0.4rem;}
#sub #board-view .view-tit .info {background: #f7f8fa;border-color: var(--gr-line);padding: 0.9rem 0.4rem;}
#sub #board-view .view-tit .info li {color: var(--gr-sub);font-size: 0.95rem;letter-spacing: 0;margin: 0 2rem 0 0;}
#sub #board-view .view-tit .info li strong {color: var(--gr-navy);margin-right: 0.5rem;}
#sub #board-view table tr > * {border-color: var(--gr-line);font-size: 1rem;}
#sub #board-view .article-wrap {padding: 2.4rem 0.4rem;}
#sub #board-view .article {font-size: 1.05rem;line-height: 1.85;min-height: 14rem;}
#sub #board-view .fileinfo a {font-size: 1rem;}
#sub #board-view .fileinfo .byte, #sub #board-view .fileinfo .cnt {font-size: 0.9rem;}
#sub #board-ft-list {margin-top: 4rem;}
#sub #board-comment .total {font-size: 1rem;}
#sub #comm-form fieldset textarea, #sub #comm-re-form fieldset textarea {border-color: #b9c2d0;border-radius: var(--gr-r);font-size: 1rem;}

/* 태블릿 이하: 현재 위치를 제목 아래로, 단계·칸은 줄여서 */
@media (max-width: 1100px) {
    .gr-navi {margin-top: 0.8rem;position: static;}
    .gr-steps {grid-auto-flow: row;grid-template-columns: repeat(3, 1fr);row-gap: 1.4rem;}
    .gr-event {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 640px) {
    .gr-subvis .in {padding: 1.8rem 1.2rem 1.6rem;}
    .gr-page-lead {font-size: 1.1rem;}
    .gr-lnb ul {padding: 0;}
    .gr-lnb li:first-child a {border-left: 0;}
    /* 단계: 세로 목록(윗선 → 왼쪽 선) — 메인 주요 일정 모바일과 같은 모양 */
    .gr-steps {grid-template-columns: 1fr;row-gap: 0;}
    .gr-steps li {align-items: baseline;border-left: 3px solid #c4cdda;border-top: 0;display: flex;gap: 0.8rem;padding: 0.55rem 0 0.55rem 0.9rem;}
    .gr-steps li:before {font-size: 1.15rem;}
    .gr-steps li span {margin-top: 0;}
    .gr-event {grid-template-columns: 1fr;}
    .gr-org a:after {bottom: auto;top: 1.4rem;}
    .gr-learn-top {padding: 1.4rem 1.2rem;}
    .gr-faq dt, .gr-faq dd {padding-left: 2rem;}
    /* 검색: 1줄 = 선택(6rem) + 검색어(남은 폭), 2줄 = 검색·초기화 단추 반반.
       단추에 flex-basis 40% 를 줘서 일부러 둘째 줄로 내림 — 안 주면 선택·검색어·단추가 세 줄로 들쭉날쭉 꺾였다(390px 캡처로 확인). */
    #sub #board-sch .where {flex: 0 0 6rem;width: 6rem;}
    #sub #board-sch .keyword {flex: 1 1 10rem;min-width: 0;width: auto;}
    #sub #board-sch > button, #sub #board-sch > a {flex: 1 1 40%;}
    #sub #board-write table tbody th {width: 6rem;}
}

/* ---------- 바닥(푸터) ---------- */
#gr-footer {background: #1b2433;padding: 2rem 0 2.4rem;}
#gr-footer .in {margin: 0 auto;max-width: var(--gr-in);padding: 0 1.2rem;}
.gr-fnb {display: flex;flex-wrap: wrap;gap: 1.4rem;margin-bottom: 1rem;}
.gr-fnb a {color: #d6dbe4;font-size: 0.95rem;text-decoration: none;}
.gr-fnb a strong {color: #ffffff;}
.gr-finfo strong {color: #ffffff;display: block;font-size: 1.1rem;margin-bottom: 0.4rem;}
.gr-finfo p {color: #aab3c2;font-size: 0.9rem;line-height: 1.7;}

/* ---------- 넘침 압축 모드 (화면 폭과 무관) : 상단 메뉴 → 전체 메뉴 단추 ----------
   글자크기 단추로 글자를 키우면(최대 23px) PC 폭에서도 로고+메뉴 5개+로그인·글자크기가 한 줄에 안 들어가
   화면 전체에 가로 스크롤이 생긴다(1440px 폭·3단계에서 약 400px 넘침 확인).
   CSS 미디어쿼리의 em 은 html 글자크기 변경을 따라가지 않아(항상 브라우저 기본 16px 기준) 이 상황을 잡지 못함
   → gongron.js 가 머리 줄이 넘치는지 직접 재서 html 에 gr-compact 를 붙이고, 아래 규칙이 태블릿과 같은 모양으로 바꾼다.
   간단 머리(.gr-type2, 로그인 화면)는 메뉴가 없어 대상 아님. */
html.gr-compact #gr-header:not(.gr-type2) .gr-nav {display: none;}
html.gr-compact #gr-menu-btn {display: block;}
/* [2026-11-12 수정] 압축 모드에서도 글자크기 단추(− 기본 +)는 머리 줄에 남긴다.
   문제: 전에는 .gr-util 을 통째로 숨겨 글자크기 단추까지 '전체 메뉴(≡)' 안으로 들어갔다.
     → '+' 를 누르다 머리 줄이 넘치는 순간 단추가 사라져, 이용자가 '−'·'기본' 을 못 찾아 큰 글자에서 되돌리지 못함(사용자 신고).
     글자를 키우는 사람일수록 전체 메뉴 안에 단추가 있다는 걸 찾기 어렵다(60대 이상 이용자 기준).
   해결: .gr-util 은 보이게 두고 그 안에서 글자크기 묶음(.gr-fs)만 남김 — 로그인·내 메뉴는 전체 메뉴 안에 같은 링크가 있어 숨겨도 됨.
     선(border-left)·앞 여백은 빼고 오른쪽으로 붙임(margin-left:auto) → 전체 메뉴 단추는 그 오른쪽에 바짝. */
html.gr-compact #gr-header:not(.gr-type2) .gr-util {border-left: 0;margin-left: auto;padding-left: 0;}
html.gr-compact #gr-header:not(.gr-type2) .gr-util > :not(.gr-fs) {display: none;}
html.gr-compact #gr-header:not(.gr-type2) #gr-menu-btn {margin-left: 0.3rem;}
html.gr-compact .gr-logo {border-right: 0;margin-right: 0;padding-right: 0;}

/* ---------- 태블릿·모바일 (~1100px) : 상단 메뉴 → 전체 메뉴 단추 ---------- */
@media (max-width: 1100px) {
    .gr-nav {display: none;}
    .gr-type2 .gr-util {display: flex;border-left: 0;padding-left: 0;}
    /* [2026-11-12] 태블릿·모바일도 글자크기 단추는 머리 줄에 남김(위 압축 모드 주석과 같은 이유 — 전에는 .gr-util 통째로 숨김) */
    #gr-header:not(.gr-type2) .gr-util {border-left: 0;margin-left: auto;padding-left: 0;}
    #gr-header:not(.gr-type2) .gr-util > :not(.gr-fs) {display: none;}
    #gr-header:not(.gr-type2) #gr-menu-btn {margin-left: 0.3rem;}
    #gr-menu-btn {display: block;}
    .gr-logo {border-right: 0;margin-right: 0;padding-right: 0;}
    .gr-logo h1 {font-size: 1.45rem;}
    .gr-head-in {height: 4.2rem;}
    /* 태블릿: 사진 낮추고 카드 겹침도 줄임 */
    .gr-hero-in {padding: 3rem 1.2rem 3rem;}
    /* 태블릿: 바로가기 3칸 유지하되 안쪽 여백·제목을 줄여 한 줄에 들어가게 */
    .gr-quick a {padding: 1.2rem 1.1rem 1.3rem;}
    .gr-quick strong {font-size: 1.2rem;}
    /* 주요 일정: 5칸 → 3칸 + 2칸(두 줄). 줄 사이 간격은 row-gap 으로 */
    .gr-proc-list {grid-template-columns: repeat(3, 1fr);row-gap: 1.8rem;}  /* [2026-11-12] 5칸 유지라 원래 값(3칸) 그대로 */
    .gr-about-in {grid-template-columns: 1fr;}
    .gr-hero-in h2 {font-size: 2.1rem;}
    .gr-cols {grid-template-columns: 1fr;gap: 2.6rem;}
    .gr-org.gr-org-4 {grid-template-columns: repeat(2, 1fr);}
}
/* ---------- 좁은 모바일 (~640px) ---------- */
@media (max-width: 640px) {
    /* 원본 respond.css 가 모바일 글자를 13px 로 줄이는 것을 되돌림 — 60대 이상 이용자 기준 */
    body, td, form, select, input, button, textarea, div, option, pre, p, span, blockquote, li, dt, dd {font-size: 1rem;}
    html {font-size: 16px;}
    /* [2026-11-12] 모바일 머리 줄(로고 + 글자크기 − 기본 + + 전체 메뉴)은 글자크기 단계와 상관없이 화면 폭에 맞춤.
       왜: 머리 줄까지 rem 으로 같이 커지면 3단계(23px)에서 375px 폰 기준 약 100px 넘쳐 화면 전체가 옆으로 밀리고
         '+'·전체 메뉴 단추가 화면 밖으로 나간다(실측 471/375px). 본문 글자는 그대로 커진다(제목 26 → 38px 확인).
       min(rem, vw): 기본 크기에선 원래 값 그대로, 커질 때만 화면 폭 비율에서 멈춤. */
    #gr-header:not(.gr-type2) .gr-head-in {padding-left: min(1.2rem, 4vw);padding-right: min(1.2rem, 4vw);}
    #gr-header:not(.gr-type2) .gr-logo h1 {font-size: min(1.45rem, 4.8vw);}
    #gr-header .gr-fs button {font-size: min(1rem, 4.3vw);height: min(2rem, 9vw);min-width: min(1.85rem, 8vw);}
    #gr-header .gr-fs button.gr-fs-reset {font-size: min(0.8rem, 3.4vw);}
    #gr-header:not(.gr-type2) #gr-menu-btn {flex-shrink: 0;height: min(3rem, 11vw);padding: min(0.6rem, 2vw);width: min(3rem, 11vw);}
    /* 모바일: 사진은 위에 짧게(가운데 인물 기준), 카드는 살짝만 겹쳐 아래로 */
    /* 모바일: 글이 사진 전체를 덮으므로 음영을 위→아래 고르게(왼쪽만 진하면 오른쪽 글자가 안 읽힘) */
    .gr-hero-pic img {object-position: 42% 40%;}
    .gr-hero-pic:after {background: linear-gradient(180deg, rgba(28,36,51,0.72) 0%, rgba(28,36,51,0.86) 100%);}
    .gr-hero-in {padding: 2.4rem 1.2rem 2.4rem;}
    .gr-hero-in h2 {font-size: 1.65rem;}
    .gr-hero-sub {font-size: 1.05rem;}
    .gr-btn-solid, .gr-btn-ghost {flex: 1 1 100%;text-align: center;}  /* 모바일: 단추를 손가락으로 누르기 쉽게 한 줄 가득 */
    /* 모바일: 1칸 세로 쌓기. 아이콘은 다시 글 왼쪽(태블릿 규칙을 되돌림) — 한 줄 폭이 넓어 옆에 둬야 카드 높이가 낮아짐 */
    /* 모바일 바로가기: 3칸 → 세로 3줄. 칸 사이 선은 세로선 대신 가로선(border-top) */
    .gr-quick-in {border-left: 0;grid-template-columns: 1fr;max-width: none;width: auto;}
    .gr-quick a {border-right: 0;border-top: 1px solid var(--gr-line);padding: 1rem 1.2rem 1.05rem;}
    .gr-quick a.q1 {border-top: 0;}
    .gr-quick strong {font-size: 1.2rem;}
    .gr-sec {padding-top: 2.6rem;}
    /* 주요 일정: 세로 목록 — 윗선 → 왼쪽 선, 날짜는 조금 작게 */
    .gr-proc-list {grid-template-columns: 1fr;row-gap: 0;}
    .gr-proc-list li {border-left: 3px solid #c4cdda;border-top: 0;padding: 0.2rem 0 1.3rem 1rem;}
    .gr-proc-list li.key {border-left-color: var(--gr-blue);}
    .gr-proc-list li.tbd {border-left-style: dashed;padding-bottom: 0.2rem;}
    .gr-proc-list .d {font-size: 1.4rem;}
    .gr-proc-list strong {margin-top: 0.3rem;}
    .gr-about-head h3 {font-size: 1.6rem;}
    .gr-links {grid-template-columns: 1fr;}
    .gr-org, .gr-event {grid-template-columns: 1fr;}
    .gr-org.gr-org-4 {grid-template-columns: 1fr;}
    .gr-help {padding: 1.3rem;}
    .gr-help-tel .tel {font-size: 1.7rem;}
    .gr-subvis h2 {font-size: 1.6rem;}
    .gr-lnb ul {overflow-x: auto;flex-wrap: nowrap;}
    .gr-lnb li a {padding: 0.85rem 0.9rem;white-space: nowrap;}
    .gr-type2 .gr-fs > span, .gr-type2 .gr-home {display: none;}  /* 좁은 화면: 로고와 한 줄에 들어가게 단추만 남김 */
}

/* =====================================================================
   [2026-11-06] 학습하기(강의 목록) — theme/zigger-basic/mod-board/board/gallery/results.tpl.php
   컨셉 '선과 글자' 그대로: 모서리 var(--gr-r)(거의 직각) · 1px 선 · 남색 굵은 윗선 · 큰 숫자.
   둥근 카드·그림자·알약 배지·아이콘 원은 쓰지 않는다(사용자 지적: "AI 느낌").
   상태 색: 이수 = 남색, 수강 중 = 파랑, 미수강·영상 준비 중 = 회색. 초록은 쓰지 않음(탈원전 인상 — 컨셉 메모).
   진도 막대는 끝을 둥글리지 않은 6px 띠. 글자는 60대 이상 기준으로 본문 1rem(17px) 이상, 제목 1.3rem.
   모든 규칙을 .gr-lec* 이름으로만 걸어 다른 게시판(목록 표 스킨)에는 영향이 없다.
   ===================================================================== */
/* box-sizing: border-box — 단추(width 100%)·줄의 안쪽 여백이 폭에 더해져 오른쪽으로 삐져나가던 문제(가로 스크롤) 방지 */
.gr-lec-sum, .gr-lec-sum *, .gr-lec, .gr-lec * {box-sizing: border-box;}
.gr-lec-bar {background: #e3e7ee;flex: none;height: 6px;overflow: hidden;}
.gr-lec-bar i {background: var(--gr-blue);display: block;height: 100%;}
/* 단추: 남색 바탕 흰 글자(학습 시작·이어서 학습) / 흰 바탕 남색 선(다시 보기) / 회색(영상 준비 중 — 누를 수 없음)
   color 에 !important — common.css 의 a 글자색 규칙이 더 구체적이라 흰 글자가 회색으로 덮이는 것을 막음 */
.gr-lec-btn {align-items: center;background: var(--gr-navy);border: 1px solid var(--gr-navy);border-radius: var(--gr-r);color: #fff !important;display: inline-flex;font-size: 1.05rem;font-weight: 700;gap: 0.4rem;justify-content: center;min-height: 3.1rem;padding: 0 1.4rem;text-decoration: none;}
.gr-lec-btn:hover {background: var(--gr-blue);border-color: var(--gr-blue);}
.gr-lec-btn.line {background: #fff;color: var(--gr-navy) !important;}
.gr-lec-btn.line:hover {background: var(--gr-sky);}
.gr-lec-btn.off {background: #f2f4f7;border-color: var(--gr-line);color: #7a8392 !important;cursor: default;}

/* 1) 내 학습 현황 띠 — 연회색 바탕 + 남색 3px 윗선, 세 칸을 세로 1px 선으로 나눔 */
.gr-lec-sum {background: var(--gr-bg2);border-top: 3px solid var(--gr-navy);display: grid;grid-template-columns: 15rem 1fr 1.4fr;margin-bottom: 2.6rem;}
.gr-lec-sum > * {padding: 1.5rem 1.8rem;}
.gr-lec-sum > * + * {border-left: 1px solid var(--gr-line);}
.gr-lec-sum .k {color: var(--gr-sub);font-size: 0.95rem;font-weight: 600;}
.gr-lec-sum-pct .v {color: var(--gr-navy);font-size: 1.3rem;font-weight: 700;line-height: 1;margin: 0.5rem 0 0.9rem;}
.gr-lec-sum-pct .v strong {font-size: 2.8rem;letter-spacing: -0.03em;}
.gr-lec-sum-cnt {align-items: center;display: flex;justify-content: space-around;margin: 0;}
.gr-lec-sum-cnt > div {text-align: center;}
.gr-lec-sum-cnt dt {color: var(--gr-sub);font-size: 0.95rem;font-weight: 600;}
.gr-lec-sum-cnt dd {color: var(--gr-sub);font-size: 1rem;margin: 0.35rem 0 0;}
.gr-lec-sum-cnt dd strong {color: var(--gr-navy);font-size: 2rem;font-weight: 700;}
.gr-lec-sum-next {display: flex;flex-direction: column;justify-content: center;}
.gr-lec-sum-next .t {color: var(--gr-text);font-size: 1.15rem;font-weight: 700;line-height: 1.45;margin: 0.35rem 0 0.9rem;}
.gr-lec-sum-next .t span {color: var(--gr-blue);margin-right: 0.2rem;}
.gr-lec-sum-next .gr-lec-btn {align-self: flex-start;}

/* 2) 목록 머리 — 제목 · 강의 수 · 오른쪽 '나의 학습 자세히 +' (메인 화면 '더보기 +' 와 같은 말투) */
.gr-lec-head {align-items: baseline;display: flex;flex-wrap: wrap;gap: 0.4rem 1rem;margin-bottom: 0.9rem;}
.gr-lec-head h3 {color: var(--gr-navy);font-size: 1.5rem;font-weight: 800;}
.gr-lec-head h3:before {display: none;}
.gr-lec-head p {color: var(--gr-sub);font-size: 1rem;}
.gr-lec-head p strong {color: var(--gr-navy);}
.gr-lec-head .more {color: var(--gr-navy);font-size: 1rem;font-weight: 600;margin-left: auto;text-decoration: none;}
.gr-lec-head .more:hover {text-decoration: underline;}
.gr-lec-allchk {display: inline-block;font-size: 0.95rem;margin-bottom: 0.6rem;}

/* 강의 한 줄 — 차시 번호 | 16:9 썸네일 | 글 | 진도·단추. 목록 맨 위 남색 2px 선, 줄 사이 1px 선 */
.gr-lec-list {border-top: 2px solid var(--gr-navy);list-style: none;margin: 0;padding: 0;}
.gr-lec {align-items: center;border-bottom: 1px solid var(--gr-line);display: grid;gap: 1.6rem;grid-template-columns: 4.2rem 15rem minmax(0, 1fr) 13.5rem;padding: 1.6rem 1rem 1.6rem 0.6rem;position: relative;}
/* 다음에 볼 강의 — 왼쪽 파랑 4px 선 + 아주 옅은 바탕(시안의 '학습 중' 줄 강조).
   box-shadow 를 '안쪽 선' 용도로만 씀(inset, 번짐 0) — 그림자 효과가 아님. border-left 로 하면 줄마다 폭이 4px 달라져 칸이 어긋남 */
.gr-lec.is-next {background: #f7f9fd;box-shadow: inset 4px 0 0 var(--gr-blue);}
/* 관리자 선택 체크박스(선택 삭제·이동용) — 줄 왼쪽 위 모서리. 줄 바깥(왼쪽 음수)에 두면 본문 폭 끝에서 잘려 반만 보였다 */
.gr-lec-chk {height: 1.1rem;left: 0.6rem;position: absolute;top: 0.7rem;width: 1.1rem;z-index: 2;}
.gr-lec-no {color: var(--gr-navy);text-align: center;}
.gr-lec-no span {color: var(--gr-sub);display: block;font-size: 0.85rem;font-weight: 600;}
.gr-lec-no b {display: block;font-size: 2.2rem;font-weight: 800;letter-spacing: -0.03em;line-height: 1.1;}
/* 썸네일: 틀을 16:9 로 고정하고 이미지는 cover — 원래 갤러리는 세로가 긴 틀이라 16:9 강의 그림 양옆이 잘렸다 */
.gr-lec-tmb {aspect-ratio: 16 / 9;background: var(--gr-navy);border: 1px solid var(--gr-line);display: block;overflow: hidden;position: relative;}
.gr-lec-tmb img {display: block;height: 100%;object-fit: cover;width: 100%;}
.gr-lec-tmb .no-img {align-items: center;color: #c9d3e4;display: flex;font-size: 1rem;font-weight: 600;height: 100%;justify-content: center;}
.gr-lec-tmb .dur {background: rgba(19, 41, 75, 0.88);bottom: 0;color: #fff;font-size: 0.85rem;font-weight: 600;padding: 0.15rem 0.5rem;position: absolute;right: 0;}
.gr-lec-cat {color: var(--gr-blue);font-size: 0.95rem;font-weight: 700;margin-bottom: 0.3rem;}
.gr-lec-tit {font-size: 1.3rem;font-weight: 700;line-height: 1.4;}
.gr-lec-tit a {color: var(--gr-text);text-decoration: none;}
.gr-lec-tit a:hover {color: var(--gr-blue);text-decoration: underline;}
.gr-lec-new {border: 1px solid var(--gr-blue);color: var(--gr-blue);font-size: 0.8rem;font-style: normal;font-weight: 700;margin-left: 0.4rem;padding: 0.05rem 0.35rem;vertical-align: 0.2em;}
/* 요약은 2줄까지만(넘치면 … ) — 줄마다 높이가 들쭉날쭉하지 않게 */
.gr-lec-txt {-webkit-box-orient: vertical;-webkit-line-clamp: 2;color: var(--gr-sub);display: -webkit-box;font-size: 1rem;line-height: 1.6;margin-top: 0.45rem;overflow: hidden;}
.gr-lec-meta {display: flex;flex-wrap: wrap;list-style: none;margin: 0.7rem 0 0;padding: 0;}
.gr-lec-meta li {color: var(--gr-sub);font-size: 0.92rem;}
.gr-lec-meta li + li:before {color: #b9c2d0;content: '|';margin: 0 0.6rem;}
.gr-lec-act {display: flex;flex-direction: column;gap: 0.6rem;}
.gr-lec-st {align-items: baseline;display: flex;justify-content: space-between;}
.gr-lec-st em {font-size: 1.05rem;font-style: normal;font-weight: 700;}
.gr-lec-st b {color: var(--gr-navy);font-size: 1.25rem;font-weight: 800;}
.gr-lec.st-done .gr-lec-st em {color: var(--gr-navy);}
.gr-lec.st-done .gr-lec-bar i {background: var(--gr-navy);}
.gr-lec.st-ing .gr-lec-st em {color: var(--gr-blue);}
.gr-lec.st-wait .gr-lec-st em, .gr-lec.st-none .gr-lec-st em {color: #6b7484;}
.gr-lec-act .gr-lec-btn {width: 100%;}
.gr-lec-note {background: var(--gr-bg2);border-left: 3px solid var(--gr-navy);color: var(--gr-sub);font-size: 0.95rem;line-height: 1.6;margin-top: 1.4rem;padding: 0.9rem 1.1rem;}

/* 태블릿: 진도 칸을 글 아래로 내리고(가로 한 줄: 상태 · 막대 · 단추) 차시 번호 칸은 좁게 */
@media (max-width: 1100px) {
    .gr-lec-sum {grid-template-columns: 1fr 1fr;}
    .gr-lec-sum-next {border-left: 0 !important;border-top: 1px solid var(--gr-line);grid-column: 1 / -1;}
    .gr-lec {grid-template-columns: 3.4rem 13rem minmax(0, 1fr);}
    .gr-lec-act {align-items: center;flex-direction: row;flex-wrap: wrap;grid-column: 3;}
    .gr-lec-act .gr-lec-st {gap: 0.6rem;}
    .gr-lec-act .gr-lec-bar {flex: 1 1 8rem;}
    .gr-lec-act .gr-lec-btn {width: auto;}
}
/* 휴대폰: 세로 쌓기 — 썸네일(가득) → 차시·글 → 진도·단추(손가락으로 누르기 쉽게 가득) */
@media (max-width: 640px) {
    .gr-lec-sum {grid-template-columns: 1fr;}
    .gr-lec-sum > * {padding: 1.1rem 1.2rem;}
    .gr-lec-sum > * + * {border-left: 0 !important;border-top: 1px solid var(--gr-line);}
    .gr-lec-sum-pct .v strong {font-size: 2.3rem;}
    .gr-lec-sum-next .gr-lec-btn {align-self: stretch;}
    .gr-lec-head h3 {font-size: 1.35rem;}
    .gr-lec-head .more {margin-left: 0;width: 100%;}
    .gr-lec {gap: 0.9rem;grid-template-columns: 3rem minmax(0, 1fr);padding: 1.3rem 0;}
    .gr-lec.is-next {padding-left: 0.8rem;padding-right: 0.6rem;}
    .gr-lec-tmb {grid-column: 1 / -1;grid-row: 1;}
    .gr-lec-no {align-self: start;}
    .gr-lec-no b {font-size: 1.7rem;}
    .gr-lec-tit {font-size: 1.2rem;}
    /* 세로 배치로 돌아가므로 태블릿 규칙의 '막대 flex: 1 1 8rem' 을 되돌림 — 그대로 두면 막대가 세로로 8rem 두께가 된다 */
    .gr-lec-act {align-items: stretch;flex-direction: column;grid-column: 1 / -1;}
    .gr-lec-act .gr-lec-bar {flex: none;}
    .gr-lec-act .gr-lec-btn {width: 100%;}
    /* 좁은 폭에서 정보 줄이 접히면 '|' 가 줄 맨 앞에 남아 보기 싫음 → 구분선 없이 간격만 */
    .gr-lec-meta {gap: 0.15rem 1rem;}
    .gr-lec-meta li + li:before {display: none;}
    .gr-lec-chk {left: 0.5rem;top: 1.8rem;}   /* 휴대폰은 썸네일이 맨 위라 그 위에 얹음 */
}

/* ---------------------------------------------------------------------
   [2026-11-06] 강의 목록 — 카드형(.gr-lec-list.gr-lec-cards). 위의 한 줄 목록형 규칙 위에 덮어쓴다.
   · 칸: PC 3칸 / 1100px 이하 2칸 / 640px 이하 1칸. 칸 사이 간격 1.4rem.
   · 카드 안: [썸네일 가득] → [차시 번호 | 분류·제목·요약·정보] → [상태·% / 막대 / 단추(맨 아래 정렬)].
     카드마다 글 길이가 달라도 단추 줄이 나란히 맞도록 카드 안을 grid 로 나누고 가운데 줄을 1fr 로 늘린다.
   · 모양은 컨셉 그대로: 직각 · 1px 테두리 + 남색 3px 윗선. 둥근 모서리·그림자·떠오르는 효과(hover 이동) 없음.
     마우스를 올리면 테두리만 남색으로. 다음에 볼 강의는 윗선이 파랑 + '다음 학습' 글자.
   · 위 목록형·태블릿·휴대폰 규칙(.gr-lec …)이 같이 걸리므로, 여기서는 .gr-lec-cards 를 앞에 붙여 더 구체적으로 이긴다.
     미디어쿼리 안의 목록형 규칙(예: 태블릿 .gr-lec-act 가로 배치)도 아래 각 미디어쿼리에서 다시 덮는다.
   --------------------------------------------------------------------- */
.gr-lec-list.gr-lec-cards {border-top: 0;display: grid;gap: 1.4rem;grid-template-columns: repeat(3, minmax(0, 1fr));}
.gr-lec-cards .gr-lec {align-items: stretch;background: #fff;border: 1px solid var(--gr-line);border-top: 3px solid var(--gr-navy);box-shadow: none;
    gap: 0;grid-template-areas: "tmb tmb" "no body" "act act";grid-template-columns: 3.6rem minmax(0, 1fr);grid-template-rows: auto 1fr auto;padding: 0;}
.gr-lec-cards .gr-lec:hover {border-color: var(--gr-navy);}
.gr-lec-cards .gr-lec.is-next {background: #fff;border-top-color: var(--gr-blue);box-shadow: none;}
/* '다음 학습' 표시 — 썸네일 왼쪽 위 파란 띠 글자(카드 윗선과 이어지게) */
.gr-lec-cards .gr-lec.is-next .gr-lec-tmb:before {background: var(--gr-blue);color: #fff;content: '다음 학습';font-size: 0.85rem;font-weight: 700;left: 0;padding: 0.2rem 0.6rem;position: absolute;top: 0;z-index: 1;}
.gr-lec-cards .gr-lec-tmb {border: 0;border-bottom: 1px solid var(--gr-line);grid-area: tmb;}
.gr-lec-cards .gr-lec-no {align-self: start;grid-area: no;padding: 1.2rem 0 0;}
.gr-lec-cards .gr-lec-no b {font-size: 1.9rem;}
.gr-lec-cards .gr-lec-body {grid-area: body;padding: 1.2rem 1.2rem 0 0.2rem;}
.gr-lec-cards .gr-lec-tit {font-size: 1.22rem;}
/* 카드는 폭이 좁아 정보 줄이 자주 접힘 → '|' 구분선 대신 간격만(접힌 줄 맨 앞에 '|' 가 남는 문제 방지) */
.gr-lec-cards .gr-lec-meta {gap: 0.1rem 0.9rem;margin-top: 0.6rem;}
.gr-lec-cards .gr-lec-meta li {font-size: 0.88rem;}
.gr-lec-cards .gr-lec-meta li + li:before {display: none;}
.gr-lec-cards .gr-lec-act {align-items: stretch;flex-direction: column;gap: 0.55rem;grid-area: act;padding: 1.1rem 1.2rem 1.2rem;}
.gr-lec-cards .gr-lec-act .gr-lec-bar {flex: none;}
.gr-lec-cards .gr-lec-act .gr-lec-btn {width: 100%;}
.gr-lec-cards .gr-lec-chk {left: 0.6rem;top: 0.6rem;}
@media (max-width: 1100px) {
    .gr-lec-list.gr-lec-cards {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .gr-lec-cards .gr-lec {grid-template-columns: 3.2rem minmax(0, 1fr);}
    /* 목록형 태블릿 규칙(.gr-lec-act grid-column: 3 · 가로 배치)을 되돌림. grid-column: auto 로 지우면 grid-area 의 칸 지정까지 지워져
       진도·단추가 왼쪽 좁은 번호 칸(3.2rem)에 끼어 '학습/시작' 처럼 두 줄로 깨졌다 → 칸 이름(grid-area)을 다시 지정 */
    .gr-lec-cards .gr-lec-act {align-items: stretch;flex-direction: column;grid-area: act;}
}
@media (max-width: 640px) {
    .gr-lec-list.gr-lec-cards {gap: 1.1rem;grid-template-columns: minmax(0, 1fr);}
    .gr-lec-cards .gr-lec, .gr-lec-cards .gr-lec.is-next {padding: 0;}
    /* 목록형 휴대폰 규칙(썸네일 grid-row: 1 · 칸 1/-1)을 카드 칸 이름으로 다시 덮음 — 위 태블릿 주석과 같은 이유 */
    .gr-lec-cards .gr-lec-tmb {grid-area: tmb;}
    .gr-lec-cards .gr-lec-act {grid-area: act;}
    .gr-lec-cards .gr-lec-no b {font-size: 1.6rem;}
    .gr-lec-cards .gr-lec-tit {font-size: 1.15rem;}
}

/* =====================================================================
   [2026-11-06] 강의 보기(영상 재생) — theme/zigger-basic/mod-board/board/gallery/view.tpl.php
   격자 한 겹: PC 는 왼쪽(영상·단추·소개·이전다음·목록) + 오른쪽 20rem(내 진도·질의응답·안내, 스크롤해도 따라옴).
   휴대폰·태블릿은 한 줄로 쌓이며 오른쪽 칸이 '단추 바로 아래' 로 들어온다(영상 보면서 진도 확인).
   단추·진도 막대·정보 줄은 목록 화면의 .gr-lec-btn / .gr-lec-bar / .gr-lec-meta 를 같이 쓴다(모양 통일).
   ===================================================================== */
.gr-lv, .gr-lv * {box-sizing: border-box;}
.gr-lv {column-gap: 2.4rem;display: grid;grid-template-columns: minmax(0, 1fr) 20rem;grid-template-areas:
    "head   head"
    "player side"
    "tools  side"
    "about  side"
    "seek   side"
    "list   side"
    "admin  admin";
    grid-template-rows: auto auto auto auto auto 1fr auto;}
.gr-lv-head {border-bottom: 1px solid var(--gr-line);border-top: 2px solid var(--gr-navy);grid-area: head;margin-bottom: 1.6rem;padding: 1.4rem 0.2rem 1.2rem;}
.gr-lv-eyebrow {display: flex;gap: 0.8rem;margin-bottom: 0.4rem;}
.gr-lv-eyebrow .no {color: var(--gr-navy);font-size: 1rem;font-weight: 800;}
.gr-lv-eyebrow .cat {color: var(--gr-blue);font-size: 1rem;font-weight: 700;}
.gr-lv-eyebrow .cat:before {color: #b9c2d0;content: '|';font-weight: 400;margin-right: 0.8rem;}
.gr-lv-eyebrow .no + .cat:before {display: inline;}
.gr-lv-head h3 {color: var(--gr-navy);font-size: 1.75rem;font-weight: 800;letter-spacing: -0.03em;line-height: 1.4;}
.gr-lv-head h3:before {display: none;}
/* 영상 틀 16:9 고정 — 영상이 늦게 불러와져도 아래 내용이 덜컥 밀려 내려가지 않게. 남는 위아래는 검은 띠 */
.gr-lv-player {aspect-ratio: 16 / 9;background: #0d1626;grid-area: player;position: relative;}
.gr-lv-player video {display: block;height: 100%;inset: 0;position: absolute;width: 100%;}
.gr-lv-novideo {align-items: center;color: #c9d3e4;display: flex;font-size: 1.15rem;height: 100%;justify-content: center;line-height: 1.7;text-align: center;}
.gr-lv-tools {display: flex;flex-wrap: wrap;gap: 0.5rem;grid-area: tools;margin-top: 0.9rem;}
.gr-lv-tools small {font-size: 0.85rem;font-weight: 400;opacity: 0.85;}
/* 오른쪽 칸 — align-self:start + sticky 로 스크롤해도 화면에 남음. top 은 고정 머리 높이(5.2rem) + 여유 */
.gr-lv-side {align-self: start;display: flex;flex-direction: column;gap: 1.2rem;grid-area: side;position: sticky;top: 6.2rem;}
.gr-lv-side h4, .gr-lv-about h4, .gr-lv-list h4 {color: var(--gr-navy);font-size: 1.15rem;font-weight: 800;}
.gr-lv-prog {background: var(--gr-bg2);border-top: 3px solid var(--gr-navy);padding: 1.3rem 1.4rem 1.2rem;}
.gr-lv-prog .st {font-size: 1.1rem;font-weight: 700;margin-top: 0.8rem;}
.gr-lv-prog.st-done .st {color: var(--gr-navy);}
.gr-lv-prog.st-ing .st {color: var(--gr-blue);}
.gr-lv-prog.st-wait .st {color: #6b7484;}
.gr-lv-prog.st-done .gr-lec-bar i {background: var(--gr-navy);}
.gr-lv-prog .v {color: var(--gr-navy);font-size: 1.3rem;font-weight: 700;line-height: 1;margin: 0.3rem 0 0.8rem;}
.gr-lv-prog .v strong {font-size: 2.8rem;letter-spacing: -0.03em;}
.gr-lv-prog .gr-lec-bar {height: 8px;}
.gr-lv-prog .gr-lec-bar i {transition: width 0.4s;}
/* 이수 기준 눈금: 막대 바로 아래 줄에 기준 % 위치로 짧은 세로선(span) — 글자는 그 줄 왼쪽에 */
.gr-lv-prog .pass {color: var(--gr-sub);font-size: 0.9rem;padding-top: 0.55rem;position: relative;}
.gr-lv-prog .pass span {background: var(--gr-navy);height: 0.55rem;margin-left: -1px;position: absolute;top: -0.1rem;width: 2px;}
.gr-lv-prog .saved, .gr-lv-prog .doc {border-top: 1px solid var(--gr-line);color: var(--gr-sub);font-size: 0.92rem;margin-top: 0.8rem;padding-top: 0.7rem;}
.gr-lv-prog .doc {margin-top: 0;border-top: 0;padding-top: 0.2rem;}
.gr-lv-prog .doc b {color: var(--gr-navy);}
.gr-lv-box {border-top: 2px solid var(--gr-navy);padding-top: 0.9rem;}
.gr-lv-links {list-style: none;margin: 0.5rem 0 0;padding: 0;}
.gr-lv-links li {border-bottom: 1px solid var(--gr-line);}
.gr-lv-links a {color: var(--gr-text);display: flex;font-size: 1.02rem;font-weight: 600;justify-content: space-between;padding: 0.8rem 0.2rem;text-decoration: none;}
.gr-lv-links a:hover {color: var(--gr-blue);}
.gr-lv-links a span {color: var(--gr-blue);}
.gr-lv-guide {list-style: none;margin: 0.6rem 0 0;padding: 0;}
.gr-lv-guide li {color: var(--gr-text);font-size: 0.97rem;line-height: 1.6;padding: 0.25rem 0 0.25rem 0.9rem;position: relative;}
.gr-lv-guide li:before {background: var(--gr-navy);content: '';height: 4px;left: 0;position: absolute;top: 0.8em;width: 4px;}
.gr-lv-guide b {color: var(--gr-navy);}
.gr-lv-small {color: var(--gr-sub);font-size: 0.9rem;line-height: 1.55;margin-top: 0.6rem;}
.gr-lv-about {grid-area: about;margin-top: 2.2rem;}
.gr-lv-about .article {border-top: 1px solid var(--gr-line);font-size: 1.05rem;line-height: 1.85;margin-top: 0.7rem;padding-top: 1rem;}
.gr-lv-about .article img {height: auto;max-width: 100%;}
/* 이전·다음 강의 — 두 칸, 가운데 세로선. 한쪽이 없으면 빈 칸(span.none)으로 자리만 지킴 */
.gr-lv-seek {border-bottom: 1px solid var(--gr-line);border-top: 1px solid var(--gr-line);display: grid;grid-area: seek;grid-template-columns: 1fr 1fr;margin-top: 2.2rem;}
.gr-lv-seek a {color: var(--gr-text);display: block;font-size: 1.02rem;font-weight: 700;line-height: 1.45;padding: 1rem 0.4rem;text-decoration: none;}
.gr-lv-seek a span {color: var(--gr-blue);display: block;font-size: 0.9rem;margin-bottom: 0.25rem;}
.gr-lv-seek a:hover {background: #f7f9fd;}
.gr-lv-seek .next {border-left: 1px solid var(--gr-line);grid-column: 2;padding-left: 1.2rem;text-align: right;}
.gr-lv-list {grid-area: list;margin-top: 2.2rem;}
.gr-lv-list h4 small {color: var(--gr-sub);font-size: 0.92rem;font-weight: 400;margin-left: 0.4rem;}
.gr-lv-list ol {border-top: 2px solid var(--gr-navy);list-style: none;margin: 0.7rem 0 0;padding: 0;}
.gr-lv-list li {border-bottom: 1px solid var(--gr-line);}
.gr-lv-list li a {align-items: center;color: var(--gr-text);display: grid;gap: 1rem;grid-template-columns: 2.6rem minmax(0, 1fr) auto;padding: 0.85rem 0.8rem;text-decoration: none;}
.gr-lv-list li a:hover {background: #f7f9fd;}
.gr-lv-list li.is-cur a {background: #f7f9fd;box-shadow: inset 4px 0 0 var(--gr-blue);}   /* 안쪽 선 용도(번짐 0) — 그림자 아님 */
.gr-lv-list .no {color: var(--gr-navy);font-size: 1.2rem;font-weight: 800;}
.gr-lv-list .t {font-size: 1.05rem;font-weight: 600;}
.gr-lv-list .t em {color: var(--gr-blue);font-size: 0.85rem;font-style: normal;font-weight: 700;margin-left: 0.3rem;}
.gr-lv-list .s {font-size: 0.95rem;font-weight: 700;white-space: nowrap;}
.gr-lv-list .s b {color: var(--gr-navy);margin-left: 0.3rem;}
.gr-lv-list .st-done .s {color: var(--gr-navy);}
.gr-lv-list .st-ing .s {color: var(--gr-blue);}
.gr-lv-list .st-wait .s, .gr-lv-list .st-none .s {color: #6b7484;}
.gr-lv-admin {grid-area: admin;}

@media (max-width: 1100px) {
    .gr-lv {grid-template-areas: "head" "player" "tools" "side" "about" "seek" "list" "admin";grid-template-columns: minmax(0, 1fr);grid-template-rows: none;}
    .gr-lv-side {margin-top: 1.6rem;position: static;}
    .gr-lv-head h3 {font-size: 1.5rem;}
}
@media (max-width: 640px) {
    .gr-lv-head {padding-top: 1.1rem;}
    .gr-lv-head h3 {font-size: 1.3rem;}
    .gr-lv-player {margin: 0 -1.2rem;}   /* 휴대폰: 영상은 화면 가로 끝까지(본문 좌우 여백 상쇄) */
    .gr-lv-tools .gr-lec-btn {flex: 1 1 100%;}
    .gr-lv-seek {grid-template-columns: 1fr;}
    .gr-lv-seek .next {border-left: 0;border-top: 1px solid var(--gr-line);grid-column: 1;padding-left: 0.4rem;}
    .gr-lv-list li a {gap: 0.6rem;grid-template-columns: 2rem minmax(0, 1fr);}
    .gr-lv-list .s {grid-column: 2;}
}

/* ---------- 메인 팝업(엔진 팝업 기능 .ph-pop) [2026-11-12] ----------
   첫 등록분: 공개토론회 참석 신청(_deploy/05_수정요청_20261112.sql, 관리 화면 '팝업 관리' 에서 수정 가능).
   팝업 안 HTML 은 DB 에 들어 있어 모양만 여기서 정한다 — 담당자가 새 팝업을 만들 때도 <div class="gr-pop"> 틀을 쓰면 같은 모양.
   원본 테마(layout.css)는 둥근 모서리·그림자·12px 단추 → '선과 글자' 컨셉(직각·굵은 윗선)과 고령층 글자 크기에 맞춤.
   #gr-wrap 같은 상위 없이 .ph-pop 을 그대로 덮어쓰는 이유: 엔진이 body 바로 아래에 출력해 붙일 상위 선택자가 없다. */
/* [2026-11-12 2차] 사용자 의견 "예쁘게, 그리고 가운데가 아니라 좌측이네" → 화면 가운데 고정 + 남색 머리 띠·안내 표·파란 신청 단추 구성.
   ▸ 가운데 배치를 CSS 로 하는 이유
     엔진(lib/popup.fetch.php)은 DB 의 pos_left·pos_top 을 style="top:…;left:…" 로 '왼쪽 위 기준 픽셀' 로만 찍는다.
     화면 폭이 사람마다 달라 어떤 숫자를 넣어도 가운데가 안 된다 → 인라인 값을 !important 로 덮고 50% + translate 로 정가운데.
     position:fixed — 스크롤해도 화면 가운데에 머문다(absolute 면 첫 화면 위치에 남아 스크롤하면 위로 사라짐).
   ▸ 함정
     · 팝업을 두 개 이상 동시에 띄우면 같은 자리에 겹친다(뒤에 등록한 것이 위). 여러 개가 필요해지면 그때 #ph-pop-번호 별로 위치를 따로 줄 것.
     · 테마 respond.css(1000px 이하)가 left 2%·top 2%·폭 96% 를 !important 로 준다 — 이 파일이 그 뒤에 불러와져(head.set.php) 같은 세기로 덮는다.
     · 크기도 DB 값(width·height → .pop-cont 인라인)을 덮는다: 글자 확대(gr-fs)·내용 길이에 따라 높이가 늘어야 잘리지 않음.
   ▸ 그림자: 다른 카드는 '선과 글자' 원칙으로 그림자를 뺐지만, 팝업은 사진 위에 떠 있는 층이라 경계가 안 보여 예외로 넣음. */
.ph-pop {
    background: #ffffff;border: 0;border-radius: 0;box-shadow: 0 18px 48px rgba(13,28,52,0.35), 0 0 0 1px rgba(19,41,75,0.25);
    left: 50% !important;max-width: calc(100vw - 2rem);position: fixed;top: 50% !important;transform: translate(-50%, -50%);
    width: 26rem !important;height: auto !important;z-index: 400;   /* 머리 줄(#gr-header z-index 300) 위 */
    animation: grPopIn 0.25s ease-out;
}
@keyframes grPopIn {from {opacity: 0;transform: translate(-50%, -46%);} to {opacity: 1;transform: translate(-50%, -50%);}}
@media (prefers-reduced-motion: reduce) {.ph-pop {animation: none;}}   /* 움직임 줄이기 설정 이용자 배려(웹 접근성) */
.ph-pop .pop-cont {height: auto !important;width: auto !important;}
/* 아래 닫기 줄 [2026-11-12 4차 — 사용자 의견: 체크 상자 + 단추 섞인 3차가 "더 이상하다, 흰 배경에 둘 다 테두리"]
   · 흰 바탕 위에 같은 모양의 테두리 단추 두 개를 같은 폭(flex: 1)으로 나란히 — 모양이 같아야 어느 쪽도 어색하게 튀지 않는다.
   · 엔진(lib/popup.fetch.php)의 문구·순서(팝업 닫기, 24시간 동안 닫기)는 그대로. order 로 '24시간 동안 닫기'를 왼쪽, '팝업 닫기'를 오른쪽에.
     엔진 파일을 고치지 않는 이유: 관리 화면 미리보기 등과 어긋나고 문구를 바꿀 때마다 개발 수정이 필요해짐.
   · 구분: 둘 다 회색 테두리, '팝업 닫기'만 남색 굵은 글자('24시간 동안 닫기'는 회색). 마우스를 올리면 테두리·글자가 남색으로 진해진다.
   · [2026-11-12 6차] 바탕은 흰색(5차의 옅은 회색 채움은 사용자 의견으로 되돌림). 진한 색으로 채우지 않는 이유:
     위 파란 '참석 신청하기' 단추가 팝업의 주된 행동인데, 닫기까지 색이 강하면 눈길이 갈라지고 닫기를 먼저 누르게 된다.
   · 높이 2.6rem: 고령층·휴대폰에서 누르기 쉬운 크기. */
.ph-pop .pop-btn {background: #ffffff;border-top: 1px solid var(--gr-line);display: flex;gap: 0.5rem;padding: 0.75rem 1.1rem;}
.ph-pop .pop-btn a {align-items: center;background: #ffffff;border: 1px solid #c4cdda;box-sizing: border-box;color: var(--gr-sub);display: flex;flex: 1;float: none;font-size: 0.92rem;justify-content: center;letter-spacing: -0.02em;line-height: 1;min-height: 2.6rem;text-decoration: none;transition: background 0.15s, border-color 0.15s, color 0.15s;width: auto;}
.ph-pop .pop-btn .close-today {order: -1;}
.ph-pop .pop-btn .close {color: var(--gr-navy);font-weight: 700;}
/* 테마 layout.css 의 '.ph-pop .pop-btn a:first-child {border-left: none}'(원래 두 칸이 붙어 있던 시절 가운데 선 겹침 방지)가
   첫 단추(= 엔진 순서상 '팝업 닫기', 화면에서는 오른쪽)의 왼쪽 테두리를 지운다. 선택자 세기가 위 '.ph-pop .pop-btn a' 보다 세서
   같은 세기(:first-child)로 다시 그려 준다. 빠지면 '팝업 닫기' 단추만 왼쪽 선이 없는 채로 보임(2026-11-12 사용자 지적). */
.ph-pop .pop-btn a:first-child {border-left: 1px solid #c4cdda;}
.ph-pop .pop-btn a:first-child:hover, .ph-pop .pop-btn a:first-child:focus-visible {border-left-color: var(--gr-navy);}
.ph-pop .pop-btn a:hover, .ph-pop .pop-btn a:focus-visible {background: #ffffff;border-color: var(--gr-navy);color: var(--gr-navy);}
/* 팝업 본문 틀(<div class="gr-pop"> — DB html 칸). 담당자가 새 팝업을 만들 때도 이 틀(hd·bd·info·go)을 복사해 쓰면 같은 모양 */
.gr-pop .hd {background: var(--gr-navy);border-bottom: 4px solid var(--gr-blue);padding: 1.6rem 1.8rem 1.4rem;}
.gr-pop .eb {color: #9fbcf3;font-size: 0.85rem;font-weight: 700;letter-spacing: 0.14em;margin: 0;}
.gr-pop strong {color: #ffffff;display: block;font-size: 1.65rem;font-weight: 800;letter-spacing: -0.03em;line-height: 1.3;margin-top: 0.4rem;}
.gr-pop .bd {padding: 1.4rem 1.8rem 1.6rem;}
.gr-pop .ds {color: var(--gr-text);font-size: 1rem;line-height: 1.65;margin: 0;word-break: keep-all;}
.gr-pop .info {border-top: 2px solid var(--gr-navy);margin: 1.1rem 0 0;}
.gr-pop .info > div {border-bottom: 1px solid var(--gr-line);display: flex;gap: 1rem;padding: 0.6rem 0.1rem;}
.gr-pop .info dt {color: var(--gr-sub);flex: 0 0 5.2rem;font-size: 0.92rem;}
.gr-pop .info dd {color: var(--gr-navy);font-size: 0.98rem;font-weight: 700;margin: 0;}
/* 신청 단추 모양 — 실제 링크는 엔진이 팝업 전체를 덮는 a.link(어디를 눌러도 이동). 그래서 span 이고, 마우스를 팝업에 올리면 진해진다 */
.gr-pop .go {background: var(--gr-blue);color: #ffffff;display: block;font-size: 1.08rem;font-weight: 700;line-height: 3.2rem;margin-top: 1.3rem;text-align: center;transition: background 0.15s;}
.ph-pop:hover .gr-pop .go {background: var(--gr-blue-d);}
@media (max-width: 640px) {
    .gr-pop .hd {padding: 1.3rem 1.3rem 1.1rem;}
    .gr-pop strong {font-size: 1.4rem;}
    .gr-pop .bd {padding: 1.1rem 1.3rem 1.3rem;}
}

/* [2026-11-12 메뉴 개편] 게시판 위쪽 안내 띠(.gr-board-top) — 지금은 '자료·영상' 게시판(material)의 생중계·다시보기 연결에만 씀.
   문구는 DB 게시판 설정 top_source 에 들어 있다(_deploy\06_메뉴개편_20261112.sql). 관리자 화면 > 게시판 > material > 상단 내용에서 수정 가능.
   왜 게시판 템플릿을 고치지 않고 top_source 로: 템플릿(basic)은 모든 게시판이 같이 써서 material 전용 분기를 넣으면 다른 게시판 수정 때 꼬인다.
   모양: 선과 글자 — 왼쪽 굵은 파란 선 + 1px 테두리, 둥근 모서리·그림자 없음. */
#sub .gr-board-top {align-items: center;border: 1px solid var(--gr-line);border-left: 3px solid var(--gr-blue);display: flex;flex-wrap: wrap;gap: 0.4rem 1.2rem;justify-content: space-between;padding: 0.9rem 1.2rem;}
#sub .gr-board-top p {color: var(--gr-sub);font-size: 0.98rem;}
#sub .gr-board-top a {color: var(--gr-blue);font-weight: 700;text-decoration: none;white-space: nowrap;}
#sub .gr-board-top a:hover {text-decoration: underline;}

/* ─────────────────────────────────────────────
   [2026-11-13] 위원장 인사말(/sub/page/greeting, sub/pages/greeting.tpl.php)
   배치: PC 는 사진(왼쪽, 고정 폭 280px) + 글(오른쪽), 1100px 이하는 사진 위·글 아래.
     왜 사진을 글 옆에 '붙여 두나(position:sticky)': 인사말이 길어(11문단) 스크롤하면 사진만 위로 사라져 왼쪽이 텅 빈다 →
     PC 에서는 사진이 화면 위쪽에 따라 내려오게. 태블릿 이하는 한 줄로 쌓이므로 붙이지 않는다(가리면 글이 안 보임).
   모양: 사이트 공통 '선과 글자' — 사진에 둥근 모서리·그림자 없이 아래 남색 굵은 선 + 이름표. 서명은 오른쪽 정렬(편지 관례).
   글자: 본문 1.06rem·줄간 1.95 — 다른 안내 화면(.gr-block p 1.85)보다 조금 넓게(긴 글을 끝까지 읽기 쉽게).
   ───────────────────────────────────────────── */
.gr-greet {align-items: start;display: grid;gap: 3.2rem;grid-template-columns: 280px minmax(0, 1fr);}
.gr-greet.no-photo {grid-template-columns: minmax(0, 1fr);}   /* 사진 파일이 없을 때 — 글만 전체 폭 */
.gr-greet-photo {margin: 0;position: sticky;top: 1.5rem;}
.gr-greet-photo img {background: #eef1f5;border-bottom: 4px solid var(--gr-navy);display: block;height: auto;width: 100%;}
.gr-greet-photo figcaption {border-bottom: 1px solid var(--gr-line);padding: 0.9rem 0.2rem;}
.gr-greet-photo figcaption strong {color: var(--gr-navy);display: block;font-size: 1.25rem;font-weight: 800;letter-spacing: -0.02em;}
.gr-greet-photo figcaption span {color: var(--gr-sub);display: block;font-size: 0.92rem;margin-top: 0.2rem;}
.gr-greet-body {max-width: 46rem;}   /* 한 줄이 너무 길면 눈이 다음 줄을 놓친다 — 한글 기준 약 45~50자 */
.gr-greet-body p {font-size: 1.06rem;line-height: 1.95;margin-bottom: 1.15rem;word-break: keep-all;}
.gr-greet-body .gr-greet-hello {color: var(--gr-navy);font-size: 1.6rem;font-weight: 800;letter-spacing: -0.03em;margin-bottom: 1.4rem;}
.gr-greet-body .gr-greet-hello:before {background: var(--gr-blue);content: '';display: block;height: 3px;margin-bottom: 0.9rem;width: 1.6rem;}   /* .gr-block h3 과 같은 짧은 파란 선 */
.gr-greet-body .gr-greet-sign {border-top: 1px solid var(--gr-line);margin-top: 2.2rem;padding-top: 1.3rem;text-align: right;}
.gr-greet-sign strong {color: var(--gr-navy);display: block;font-size: 1.35rem;font-weight: 800;letter-spacing: 0.3em;}   /* 이름 글자 간격 — 서명 느낌 */
.gr-greet-sign span {color: var(--gr-sub);display: block;font-size: 0.95rem;margin-top: 0.15rem;}
@media (max-width: 1100px) {
    .gr-greet {gap: 2rem;grid-template-columns: minmax(0, 1fr);}
    .gr-greet-photo {margin: 0 auto;max-width: 240px;position: static;width: 100%;}
    .gr-greet-photo figcaption {text-align: center;}
    .gr-greet-body {max-width: none;}
}
@media (max-width: 640px) {
    .gr-greet-photo {max-width: 200px;}
    .gr-greet-body p {font-size: 1rem;line-height: 1.85;}
    .gr-greet-body .gr-greet-hello {font-size: 1.4rem;}
}