:root{
  --감청:#12315E; --감청진:#0B1F3D; --감청연:#2A4C82; --감청옅:#E7EDF7;
  --감청면:#12315E; --감청면글:#FFFFFF; --감청면흐림:rgba(255,255,255,.72);
  --금:#A8802B; --금밝:#C39A3E; --금연:#F1E7CF;
  --먹:#141A24; --글:#25303F; --회:#5C6675; --흐림:#8A93A2;
  --종이:#F4F6F9; --판:#FFFFFF; --선:#DDE3EC; --선연:#EDF0F5; --띠:#E9EDF4;
  --좋음:#1B6E46; --좋음판:#E4F2EA; --주의:#8A5E0C; --주의판:#F8EEDA; --위험:#9E2B21; --위험판:#F8E6E4;
  --그림자:0 1px 2px rgba(11,31,61,.05), 0 10px 28px -16px rgba(11,31,61,.28);
  --폭:1180px;
  --제목:"Nanum Myeongjo","Apple SD Gothic Neo",serif;
  --본문:"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  --라벨:"IBM Plex Sans KR","Noto Sans KR",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --감청:#93B4E8; --감청진:#0A1120; --감청연:#6E92CC; --감청옅:#182640;
    --감청면:#17253E; --감청면글:#E9EEF7; --감청면흐림:rgba(233,238,247,.66);
    --금:#D9B45F; --금밝:#E4C97B; --금연:#2E2716;
    --먹:#EEF2F8; --글:#D8E0EC; --회:#9AA5B5; --흐림:#78828F;
    --종이:#0C1220; --판:#131B2C; --선:#26314A; --선연:#1B2537; --띠:#182338;
    --좋음:#63C795; --좋음판:#15291F; --주의:#DCB463; --주의판:#2B2312; --위험:#E48A80; --위험판:#2E1917;
    --그림자:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --감청:#93B4E8; --감청진:#0A1120; --감청연:#6E92CC; --감청옅:#182640;
    --감청면:#17253E; --감청면글:#E9EEF7; --감청면흐림:rgba(233,238,247,.66);
  --금:#D9B45F; --금밝:#E4C97B; --금연:#2E2716;
  --먹:#EEF2F8; --글:#D8E0EC; --회:#9AA5B5; --흐림:#78828F;
  --종이:#0C1220; --판:#131B2C; --선:#26314A; --선연:#1B2537; --띠:#182338;
  --좋음:#63C795; --좋음판:#15291F; --주의:#DCB463; --주의판:#2B2312; --위험:#E48A80; --위험판:#2E1917;
  --그림자:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -16px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
body{margin:0;background:var(--종이);color:var(--글);font-family:var(--본문);
  font-weight:400;line-height:1.75;word-break:keep-all;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh}
h1,h2,h3,h4{font-family:var(--제목);color:var(--먹);margin:0;text-wrap:balance;line-height:1.35}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--금밝);outline-offset:2px;border-radius:2px}
[hidden]{display:none !important}
.판{width:min(var(--폭),100% - 40px);margin-inline:auto}
@media(max-width:640px){.판{width:min(var(--폭),100% - 28px)}}

/* ── 유틸바 ───────────────────────────── */
.유틸{background:var(--감청진);color:#C6D2E6;font-family:var(--라벨);font-size:12.5px}
.유틸 .판{display:flex;align-items:center;justify-content:flex-end;gap:14px;height:36px}
.유틸 button{background:none;border:0;color:inherit;cursor:pointer;padding:4px 2px;letter-spacing:.02em}
.유틸 button:hover{color:#fff}
.유틸 .구분{color:#3B4E6B}
.유틸 .나{color:var(--금밝);font-weight:600}
.유틸 .뱃지{border:1px solid rgba(196,154,62,.5);color:var(--금밝);border-radius:2px;padding:1px 6px;font-size:11px;letter-spacing:.04em}

/* ── 헤더 ─────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--판) 94%,transparent);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--선)}
.머리{display:flex;align-items:center;gap:34px;height:78px}
.로고{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.표장{width:38px;height:38px;flex:none}
.로고 b{font-family:var(--제목);font-size:20px;font-weight:800;color:var(--먹);letter-spacing:-.01em;display:block;line-height:1.2}
.로고 span{font-family:var(--라벨);font-size:10.5px;letter-spacing:.16em;color:var(--금);display:block;text-transform:uppercase}
nav.대{margin-left:auto;display:flex;gap:2px}
@media(max-width:1000px){nav.대{display:none}}
.대 > .항{position:relative}
.대 > .항 > button{background:none;border:0;padding:0 17px;height:78px;cursor:pointer;
  font-size:16px;font-weight:500;color:var(--글);position:relative}
.대 > .항 > button::after{content:"";position:absolute;left:17px;right:17px;bottom:-1px;height:2px;background:var(--금밝);transform:scaleX(0);transition:transform .18s}
.대 > .항:hover > button::after,.대 > .항.현 > button::after{transform:scaleX(1)}
.대 > .항:hover > button{color:var(--감청)}
.하위{position:absolute;top:78px;left:50%;transform:translateX(-50%) translateY(-6px);min-width:190px;
  background:var(--판);border:1px solid var(--선);border-top:2px solid var(--금밝);box-shadow:var(--그림자);
  padding:8px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s}
.대 > .항:hover .하위,.대 > .항:focus-within .하위{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.하위 button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 12px;
  font-size:14.5px;cursor:pointer;color:var(--회);border-radius:2px}
.하위 button:hover{background:var(--감청옅);color:var(--감청)}
.햄{display:none;margin-left:auto;background:none;border:1px solid var(--선);width:42px;height:42px;cursor:pointer;border-radius:2px}
@media(max-width:1000px){.햄{display:grid;place-items:center}}
.햄 i{display:block;width:18px;height:1.5px;background:var(--글);box-shadow:0 -6px 0 var(--글),0 6px 0 var(--글)}

/* 모바일 메뉴 */
.모바일{display:none;border-top:1px solid var(--선);background:var(--판);max-height:70dvh;overflow:auto}
.모바일.열림{display:block}
.모바일 .묶{border-bottom:1px solid var(--선연);padding:12px 0}
.모바일 h4{font-size:13px;font-family:var(--라벨);letter-spacing:.1em;color:var(--금);margin-bottom:6px}
.모바일 button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 4px;font-size:15px;color:var(--글);cursor:pointer}

/* ── 첫 화면 ─────────────────────────── */
.머리말{background:var(--감청진);color:#E8EDF6;position:relative;overflow:hidden}
.머리말::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 90% at 78% 15%,rgba(195,154,62,.20),transparent 62%),
             radial-gradient(ellipse 60% 70% at 8% 90%,rgba(42,76,130,.55),transparent 60%)}
.빗살{position:absolute;inset:0;opacity:.13;
  background-image:repeating-linear-gradient(52deg,rgba(255,255,255,.5) 0 1px,transparent 1px 13px)}
.머리말 .판{position:relative;padding:96px 0 104px;display:grid;grid-template-columns:1fr auto;gap:56px;align-items:end}
@media(max-width:900px){.머리말 .판{grid-template-columns:1fr;padding:66px 0 72px;gap:36px}}
.눈썹{font-family:var(--라벨);font-size:12.5px;letter-spacing:.24em;color:var(--금밝);margin-bottom:20px}
.머리말 h1{font-size:clamp(32px,5vw,54px);color:#fff;font-weight:800;letter-spacing:-.02em;line-height:1.28}
.머리말 h1 em{font-style:normal;color:var(--금밝)}
.머리말 p{margin:22px 0 0;max-width:44ch;color:#BFCCE2;font-size:16.5px}
.이념표{display:flex;gap:0;border:1px solid rgba(255,255,255,.16)}
@media(max-width:900px){.이념표{width:100%}}
.이념표 div{padding:22px 26px;text-align:center;border-right:1px solid rgba(255,255,255,.16)}
.이념표 div:last-child{border-right:0}
.이념표 b{display:block;font-family:var(--제목);font-size:27px;color:#fff;font-weight:700}
.이념표 span{font-family:var(--라벨);font-size:11px;letter-spacing:.14em;color:var(--금밝)}

/* ── 페이지 머리 ─────────────────────── */
.쪽머리{background:var(--감청면);color:var(--감청면글);position:relative;overflow:hidden}
.쪽머리::before{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(11,31,61,.55),transparent 78%),
             repeating-linear-gradient(52deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px)}
.쪽머리 .판{position:relative;padding:46px 0 44px}
.길{font-family:var(--라벨);font-size:12px;letter-spacing:.05em;color:var(--감청면흐림);margin-bottom:9px}
.쪽머리 h1{color:var(--감청면글);font-size:clamp(25px,3.4vw,35px);font-weight:700}

/* ── 본문 레이아웃 ───────────────────── */
main{flex:1;padding:0 0 90px}
.틀{display:grid;grid-template-columns:210px minmax(0,1fr);gap:52px;padding-top:44px}
.틀 > *{min-width:0}
@media(max-width:900px){.틀{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:26px}}
.곁{position:sticky;top:100px;align-self:start}
@media(max-width:900px){.곁{position:static}}
.곁 h3{font-size:15px;font-family:var(--라벨);font-weight:600;letter-spacing:.02em;color:var(--먹);
  padding-bottom:12px;border-bottom:2px solid var(--감청);margin-bottom:6px}
.곁 button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--선연);
  padding:11px 10px;font-size:14.5px;color:var(--회);cursor:pointer;position:relative}
.곁 button:hover{color:var(--감청);background:var(--선연)}
.곁 button.현{color:var(--감청);font-weight:700;background:var(--감청옅)}
.곁 button.현::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--금밝)}
@media(max-width:900px){
  .곁{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;border-bottom:1px solid var(--선)}
  .곁 h3{display:none}
  .곁 button{width:auto;white-space:nowrap;border:1px solid var(--선);border-radius:2px;padding:8px 14px}
  .곁 button.현::before{display:none}
}
/* ── 본문 요소 ───────────────────────── */
.절{margin-bottom:52px}
.절머리{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;padding-left:14px;position:relative}
.절머리::before{content:"";position:absolute;left:0;top:2px;bottom:3px;width:4px;
  background:linear-gradient(var(--감청) 0 62%,var(--금밝) 62% 100%)}
.절머리 h2{font-size:23px;font-weight:700}
.절머리 .꼬리{font-family:var(--라벨);font-size:12px;letter-spacing:.08em;color:var(--흐림)}
.글{font-size:16px;color:var(--글)}
.글 p{margin:0 0 15px}
.글 p:last-child{margin-bottom:0}
.크게{font-family:var(--제목);font-size:clamp(20px,2.6vw,27px);font-weight:700;color:var(--먹);line-height:1.5;margin:0 0 20px}
.크게 em{font-style:normal;color:var(--감청);border-bottom:2px solid var(--금연);padding-bottom:1px}
.얇{color:var(--회);font-size:15px}

.카드{background:var(--판);border:1px solid var(--선);box-shadow:var(--그림자);padding:30px 32px}
@media(max-width:640px){.카드{padding:22px 20px}}
.격자{display:grid;gap:16px}
.격자 > *{min-width:0}
.격자.셋{grid-template-columns:repeat(3,1fr)}
.격자.둘{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.격자.셋,.격자.둘{grid-template-columns:1fr}}

.이념칸{background:var(--판);border:1px solid var(--선);padding:26px 24px;position:relative;overflow:hidden}
.이념칸::after{content:"";position:absolute;right:-26px;top:-26px;width:82px;height:82px;
  border:1px solid var(--금연);border-radius:50%}
.이념칸 .글자{font-family:var(--제목);font-size:34px;font-weight:800;color:var(--감청);line-height:1;margin-bottom:6px}
.이념칸 .짝{font-family:var(--라벨);font-size:11.5px;letter-spacing:.14em;color:var(--금);margin-bottom:14px}
.이념칸 p{margin:0;font-size:14.8px;color:var(--회);line-height:1.72}

.줄목록{list-style:none;margin:0;padding:0;counter-reset:n}
.줄목록 li{counter-increment:n;display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--선연);align-items:start}
.줄목록 li:last-child{border-bottom:0}
.줄목록 li::before{content:counter(n,decimal-leading-zero);font-family:var(--라벨);font-size:13px;
  font-weight:600;color:var(--금);padding-top:3px;font-variant-numeric:tabular-nums}
.줄목록 b{display:block;font-family:var(--제목);font-size:17.5px;font-weight:700;color:var(--먹);margin-bottom:5px}
.줄목록 p{margin:0;font-size:15px;color:var(--회)}
.줄목록 ul{margin:8px 0 0;padding-left:17px;font-size:14.6px;color:var(--회)}
.줄목록 ul li{display:list-item;padding:2px 0;border:0}
.줄목록 ul li::before{content:none}

.점목록{margin:0;padding-left:18px;font-size:15.4px;color:var(--회)}
.점목록 li{padding:4px 0}
.점목록 li::marker{color:var(--금밝)}

/* 연혁 */
.연혁{position:relative;padding-left:30px}
.연혁::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--선)}
.연혁 .건{position:relative;padding:16px 0}
.연혁 .건::before{content:"";position:absolute;left:-28px;top:25px;width:9px;height:9px;border-radius:50%;
  background:var(--판);border:2px solid var(--금밝)}
.연혁 .해{font-family:var(--라벨);font-size:20px;font-weight:600;color:var(--감청);
  font-variant-numeric:tabular-nums;line-height:1.2}
.연혁 .날{font-family:var(--라벨);font-size:12px;color:var(--흐림);margin-left:8px}
.연혁 p{margin:4px 0 0;font-size:15.4px;color:var(--글)}

/* 표 */
.표틀{overflow-x:auto;border:1px solid var(--선);background:var(--판)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.6px}
thead th{background:var(--띠);font-family:var(--라벨);font-weight:600;font-size:13px;color:var(--먹);
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--선);white-space:nowrap}
tbody td{padding:13px 16px;border-bottom:1px solid var(--선연);color:var(--회);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--선연)}
td.이름{color:var(--먹);font-weight:500;white-space:nowrap}
td.수{font-family:var(--라벨);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 명단 */
.명단{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;background:var(--선);border:1px solid var(--선)}
.명단 .사람{background:var(--판);padding:18px 20px}
.명단 .직{font-family:var(--라벨);font-size:11.5px;letter-spacing:.08em;color:var(--금);margin-bottom:4px}
.명단 .성명{font-family:var(--제목);font-size:19px;font-weight:700;color:var(--먹);margin-bottom:8px}
.명단 ul{margin:0;padding-left:15px;font-size:13.6px;color:var(--회);line-height:1.65}

/* CI */
.상징{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--선);border:1px solid var(--선)}
@media(max-width:640px){.상징{grid-template-columns:1fr}}
.상징 div{background:var(--판);padding:22px 24px}
.상징 b{font-family:var(--제목);font-size:17px;color:var(--감청);display:block;margin-bottom:6px}
.상징 p{margin:0;font-size:14.6px;color:var(--회)}
.워드마크{border:1px solid var(--선);background:var(--판);padding:38px 32px;text-align:center}
.워드마크 .국{font-family:var(--제목);font-size:clamp(21px,3.4vw,30px);font-weight:800;color:var(--감청);letter-spacing:-.01em}
.워드마크 .영{font-family:var(--라벨);font-size:11.5px;letter-spacing:.2em;color:var(--금);margin-top:9px}

/* 조직도 */
.조직{border:1px solid var(--선);background:var(--판);padding:28px}
.조직 .꼭{text-align:center;margin-bottom:20px}
.칸{display:inline-block;border:1.5px solid var(--감청면);background:var(--감청면);color:var(--감청면글);
  font-family:var(--제목);font-weight:700;padding:11px 30px;font-size:16px}
.칸.연{background:var(--판);color:var(--감청);border-color:var(--감청)}
.칸.금{background:var(--판);color:var(--금);border-color:var(--금밝)}
.가지{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:8px}
.가지 .묶{border:1px solid var(--선);padding:16px}
.가지 .묶 h4{font-family:var(--라벨);font-size:13px;letter-spacing:.06em;color:var(--감청);margin-bottom:9px;
  padding-bottom:8px;border-bottom:1px solid var(--선연)}
.가지 .묶 ul{margin:0;padding-left:15px;font-size:14px;color:var(--회);line-height:1.85}
.수치{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media(max-width:640px){.수치{grid-template-columns:1fr}}
.수치 div{border:1px solid var(--선);padding:18px;text-align:center}
.수치 b{display:block;font-family:var(--라벨);font-size:26px;font-weight:600;color:var(--감청);font-variant-numeric:tabular-nums}
.수치 span{font-size:13px;color:var(--회)}
/* ── 단추·양식 ───────────────────────── */
.단추{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--감청);
  background:var(--감청);color:var(--판);padding:11px 22px;font-size:14.5px;font-family:var(--라벨);font-weight:500;
  cursor:pointer;border-radius:2px;transition:filter .15s}
.단추:hover{filter:brightness(1.14)}
.단추.빈{background:transparent;color:var(--감청);border-color:var(--감청)}
.단추.빈:hover{background:var(--감청옅);filter:none}
.단추.금{background:var(--금);border-color:var(--금)}
.단추.작{padding:7px 13px;font-size:13px}
.단추.위험{background:transparent;color:var(--위험);border-color:var(--위험)}
.단추[disabled]{opacity:.45;cursor:not-allowed}
.칸모음{display:grid;gap:15px}
label.입력칸{display:block}
label.입력칸 > span{display:block;font-family:var(--라벨);font-size:12.5px;font-weight:500;color:var(--회);margin-bottom:6px;letter-spacing:.02em}
input[type=text],input[type=password],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--선);background:var(--판);color:var(--글);
  border-radius:2px;font-size:15px}
input:focus,select:focus,textarea:focus{border-color:var(--감청연);outline:none;box-shadow:0 0 0 3px var(--감청옅)}
.돕{font-size:12.5px;color:var(--흐림);margin-top:5px}
.알림{padding:11px 14px;border-radius:2px;font-size:14px;border:1px solid}
.알림.나쁨{background:var(--위험판);border-color:var(--위험);color:var(--위험)}
.알림.좋음{background:var(--좋음판);border-color:var(--좋음);color:var(--좋음)}
.알림.주의{background:var(--주의판);border-color:var(--주의);color:var(--주의)}

.표딱지{display:inline-block;font-family:var(--라벨);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  padding:3px 9px;border-radius:2px;border:1px solid;white-space:nowrap}
.표딱지.관리자{background:var(--감청);border-color:var(--감청);color:var(--판)}
.표딱지.임원{background:var(--금연);border-color:var(--금밝);color:var(--금)}
.표딱지.회원{background:var(--좋음판);border-color:var(--좋음);color:var(--좋음)}
.표딱지.대기{background:var(--주의판);border-color:var(--주의);color:var(--주의)}
.표딱지.정지{background:var(--위험판);border-color:var(--위험);color:var(--위험)}
.표딱지.계정없음{background:transparent;border-color:var(--선);border-style:dashed;color:var(--흐림)}

/* ── 겹창 ─────────────────────────────── */
.겹{position:fixed;inset:0;z-index:100;background:rgba(9,17,32,.6);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;overflow:auto}
.겹 .상자{background:var(--판);border:1px solid var(--선);border-top:3px solid var(--금밝);
  width:min(430px,100%);box-shadow:0 24px 60px -20px rgba(0,0,0,.5);animation:뜸 .2s ease-out}
.겹 .상자.넓{width:min(620px,100%)}
@keyframes 뜸{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.겹 .상자{animation:none}}
.상자 .머{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}
.상자 .머 h3{font-size:20px;font-weight:700}
.상자 .몸{padding:18px 24px 24px}
.닫{background:none;border:0;font-size:22px;line-height:1;color:var(--흐림);cursor:pointer;padding:4px 8px}
.닫:hover{color:var(--먹)}
.상자 .바닥{display:flex;gap:9px;margin-top:20px}
.상자 .바닥 .단추{flex:1}
.잔줄{text-align:center;font-size:13.5px;color:var(--회);margin-top:16px;padding-top:14px;border-top:1px solid var(--선연)}
.잔줄 button{background:none;border:0;color:var(--감청);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ── 관리 화면 ───────────────────────── */
.관리머리{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px}
.관리머리 .찾{margin-left:auto;display:flex;gap:8px;align-items:center}
.관리머리 input,.관리머리 select{width:auto;min-width:158px}
.통계{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}
@media(max-width:760px){.통계{grid-template-columns:repeat(2,minmax(0,1fr))}}
.통계 div{border:1px solid var(--선);background:var(--판);padding:16px 18px;border-left:3px solid var(--감청)}
.통계 div.대기중{border-left-color:var(--주의)}
.통계 div.막힘{border-left-color:var(--위험)}
.통계 b{display:block;font-family:var(--라벨);font-size:25px;font-weight:600;color:var(--먹);font-variant-numeric:tabular-nums;line-height:1.2}
.통계 span{font-size:12.5px;color:var(--회);font-family:var(--라벨)}
.권한칸{display:flex;gap:6px;flex-wrap:wrap}
.권한칸{align-items:center}
.권한칸 select{width:auto;min-width:104px;padding:6px 9px;font-size:13px}
.빈줄{text-align:center;padding:46px 20px;color:var(--흐림);font-size:14.5px}
.자물쇠{display:inline-flex;align-items:center;gap:6px;font-family:var(--라벨);font-size:11.5px;
  letter-spacing:.06em;color:var(--금);border:1px dashed var(--금밝);padding:3px 9px;border-radius:2px}

/* ── 게시판 ──────────────────────────── */
.글목록{border-top:2px solid var(--감청)}
.글목록 .줄{display:grid;grid-template-columns:56px 1fr auto;gap:16px;padding:16px 8px;
  border-bottom:1px solid var(--선연);align-items:center}
@media(max-width:640px){.글목록 .줄{grid-template-columns:1fr;gap:5px}}
.글목록 .번{font-family:var(--라벨);font-size:13px;color:var(--흐림);text-align:center;font-variant-numeric:tabular-nums}
.글목록 .제{font-size:15.5px;color:var(--먹)}
.글목록 .날{font-family:var(--라벨);font-size:12.5px;color:var(--흐림);font-variant-numeric:tabular-nums}

/* ── 꼬리말 ──────────────────────────── */
footer{background:var(--감청진);color:#9FB0CA;font-size:13.5px;margin-top:auto}
footer .판{padding:44px 0 40px}
.꼬리위{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
  padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:22px}
.꼬리로고{display:flex;align-items:center;gap:11px}
.꼬리로고 b{font-family:var(--제목);font-size:17px;color:#fff;font-weight:700}
.꼬리링크{display:flex;gap:18px;font-family:var(--라벨);font-size:13px}
.꼬리링크 button{background:none;border:0;color:#BCC9DE;cursor:pointer;padding:0}
.꼬리링크 button:hover{color:var(--금밝)}
footer address{font-style:normal;line-height:1.9}
footer .저작{margin-top:14px;font-family:var(--라벨);font-size:12px;color:#6E7F9B;letter-spacing:.03em}
footer .주{margin-top:16px;padding:12px 14px;border:1px dashed rgba(195,154,62,.4);color:var(--금밝);font-size:12.5px;line-height:1.7}

/* ── 회비 관리 ──────────────────────────── */
.해고르기{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:22px;
  padding-bottom:16px;border-bottom:1px solid var(--선)}
.해고르기 > button{background:var(--판);border:1px solid var(--선);color:var(--회);
  font-family:var(--라벨);font-size:13.5px;padding:8px 15px;border-radius:2px;cursor:pointer;
  font-variant-numeric:tabular-nums}
.해고르기 > button:hover{border-color:var(--감청연);color:var(--감청)}
.해고르기 > button.현{background:var(--감청);border-color:var(--감청);color:var(--판);font-weight:600}
.오른끝{margin-left:auto}
.기준칸{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--라벨);
  font-size:13px;color:var(--회)}
.기준칸 input{width:104px;text-align:right;padding:7px 10px;font-size:14px;
  font-family:var(--라벨);font-variant-numeric:tabular-nums}
@media(max-width:640px){.기준칸{margin-left:0;width:100%;justify-content:flex-end}}
.통계 div.돈칸{border-left-color:var(--금)}
.통계 b small{font-size:14px;font-weight:400;color:var(--흐림);margin-left:2px}
.띠자{height:7px;background:var(--띠);border:1px solid var(--선);overflow:hidden}
.띠자 > div{height:100%;background:linear-gradient(90deg,var(--감청연),var(--금밝));transition:width .4s}
@media(prefers-reduced-motion:reduce){.띠자 > div{transition:none}}
.쪽칸{width:100%;min-width:92px;padding:6px 9px;font-size:13.5px;
  font-family:var(--라벨);font-variant-numeric:tabular-nums;text-align:right}
select.쪽칸{text-align:left;min-width:104px}
.회비표 tbody td{vertical-align:middle}
.회비표 thead th:last-child,.회비표 tbody td:last-child{text-align:right}
tbody tr.이해 td{background:var(--감청옅)}
tbody tr.이해 td:first-child{font-weight:700;color:var(--먹)}

/* 월별 회비 격자 */
.달표{min-width:820px}
.달표 th,.달표 td{text-align:center;padding:10px 8px;font-variant-numeric:tabular-nums}
.달표 th.붙,.달표 td.붙{position:sticky;left:0;background:var(--판);text-align:left;
  border-right:1px solid var(--선);min-width:104px;z-index:1}
.달표 thead th.붙{background:var(--띠)}
.달표 td.냄{background:var(--감청옅);color:var(--감청);font-weight:600;cursor:help}
.달표 td.빔{color:var(--흐림)}
.달표 td.합{text-align:right;font-weight:600;color:var(--먹);border-left:1px solid var(--선)}
.달표 tr.맨아래 td{background:var(--띠);font-weight:600;color:var(--먹);border-top:2px solid var(--감청)}
.달표 tr.맨아래 td.붙{background:var(--띠)}
.꼬리표{font-family:var(--라벨);font-size:10.5px;letter-spacing:.04em;color:var(--금);
  border:1px solid var(--금밝);border-radius:2px;padding:1px 5px;white-space:nowrap}
td.들{color:var(--좋음);font-weight:600}
td.난{color:var(--위험)}

/* ── 결산서 ─────────────────────────────── */
.결산{min-width:420px}
.결산 td{padding:12px 18px;border-bottom:1px solid var(--선연)}
.결산 td.칸이름{width:auto}
.결산 td.칸이름.안{padding-left:44px;color:var(--회);font-size:14.4px}
.결산 td.수{text-align:right;font-family:var(--라벨);font-variant-numeric:tabular-nums;white-space:nowrap}
.결산 td.액{font-size:16px;font-weight:600;color:var(--먹)}
.결산 tr.큰 td{background:var(--띠);font-family:var(--제목);font-weight:700;color:var(--먹);font-size:16px}
.결산 tr.맺음 td{background:var(--감청옅);border-top:2px solid var(--감청);border-bottom:0;
  font-family:var(--제목);font-weight:700;color:var(--감청);font-size:17px}
.결산 tbody tr:hover{background:none}
.결산 tr.큰:hover td,.결산 tr.맺음:hover td{filter:none}

/* 견줌 막대 */
.견줌{display:grid;gap:8px}
.줄자{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--라벨);font-size:13.5px;color:var(--회)}
.줄자 b{color:var(--먹);font-variant-numeric:tabular-nums;font-size:15px}
.줄자.잔{font-size:12.8px;margin-top:12px}
.줄자.잔 b{font-size:13.5px}
.막대{height:14px;background:var(--띠);border:1px solid var(--선);overflow:hidden;margin-bottom:6px}
.막대.얇막{height:9px;margin-bottom:2px}
.막대 > div{height:100%}
.들찬{background:linear-gradient(90deg,var(--감청연),var(--감청))}
.난찬{background:linear-gradient(90deg,var(--금밝),var(--금))}

/* 월별 막대 */
.달막대{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:190px}
.달칸{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;cursor:help}
.달칸 .쌍{display:flex;gap:2px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.달칸 .위,.달칸 .아래{width:44%;border-radius:1px 1px 0 0}
.달칸 .위{background:var(--감청)}
.달칸 .아래{background:var(--금밝)}
.달칸 > span{font-family:var(--라벨);font-size:11.5px;color:var(--흐림);font-variant-numeric:tabular-nums}
.열쇠{display:flex;gap:16px;align-items:center;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--선연);font-family:var(--라벨);font-size:12.5px;color:var(--회)}
.열쇠 i{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px}
.들칩{background:var(--감청)}
.난칩{background:var(--금밝)}

@media print{
  .유틸,header,footer,.곁,.해고르기,.통계,.달막대,.열쇠,.쪽머리,.자물쇠,.인쇄숨김{display:none !important}
  body{background:#fff !important}
  .절{page-break-inside:avoid;margin-bottom:26px}
  .틀{grid-template-columns:1fr !important;padding-top:0 !important}
  main{padding-bottom:0 !important}
  .카드,.표틀{box-shadow:none !important}
  .결산 tr.큰 td,.결산 tr.맺음 td,.알림{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .인쇄머리{display:block !important;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--감청)}
  .인쇄머리 b{font-family:var(--제목);font-size:19px;color:var(--먹);display:block}
  .인쇄머리 span{font-family:var(--라벨);font-size:12px;color:var(--회)}

  /* 금전출납부는 종이에서도 좌우 두 칸을 지킨다.
     A4 폭이 820px 아래라 모바일 규칙에 걸리므로 되돌린다. */
  .출납부{grid-template-columns:1fr 1fr !important;page-break-inside:auto}
  .쪽판.들쪽{border-right:1px solid var(--감청) !important;border-bottom:0 !important}
  .출납부 .쪽머리표{padding:7px 6px;font-size:14px}
  table.출납{font-size:11.5px}
  table.출납 td{padding:4px 6px}
  table.출납 td.날{width:40px;font-size:10.5px}
  table.출납 td.값{width:78px}
  table.출납 td.내 .속{font-size:9.5px;margin-top:1px}
  .맺줄{padding:7px 8px;font-size:12px}
  .맺줄.총계{font-size:13.5px;padding:9px 8px}
  .맺줄.총계 b{font-size:14px}
  .알림{font-size:11.5px;padding:8px 10px}
}
.인쇄머리{display:none}

/* ── 간편 장부(금전출납부) ───────────────── */
.출납부{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--감청);background:var(--판)}
@media(max-width:820px){.출납부{grid-template-columns:1fr}}
.쪽판{display:flex;flex-direction:column;min-width:0}
.쪽판.들쪽{border-right:1px solid var(--감청)}
@media(max-width:820px){.쪽판.들쪽{border-right:0;border-bottom:2px solid var(--감청)}}
.쪽머리표{background:var(--감청면);color:var(--감청면글);font-family:var(--제목);font-weight:700;
  font-size:16px;letter-spacing:.14em;text-align:center;padding:11px 8px;display:flex;
  align-items:baseline;justify-content:center;gap:10px}
.쪽머리표 span{font-family:var(--라벨);font-size:11.5px;letter-spacing:.02em;opacity:.75}
table.출납{width:100%;min-width:0;border-collapse:collapse;font-size:14px;table-layout:fixed}
table.출납 td{padding:8px 10px;border-bottom:1px solid var(--선연);vertical-align:top}
table.출납 td.날{width:52px;color:var(--흐림);font-family:var(--라벨);font-size:12.5px;white-space:nowrap}
table.출납 td.내{color:var(--글);word-break:break-all}
table.출납 td.내 .속{display:block;font-family:var(--라벨);font-size:11px;color:var(--흐림);margin-top:2px}
table.출납 td.내 .속.손{color:var(--금)}
table.출납 td.값{width:104px;text-align:right;font-family:var(--라벨);
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--먹)}
table.출납 td.값.뺌{color:var(--위험)}
table.출납 td.지움{width:30px;text-align:center;padding:8px 4px}
table.출납 td.없음{text-align:center;color:var(--흐림);padding:26px 10px;font-size:13.5px}
table.출납 tr.이월 td{background:var(--감청옅);font-weight:600}
table.출납 tr.이월 td.내{color:var(--감청)}
.쪽몸{flex:1;min-height:0}
.쪽발{margin-top:auto}
.맺줄{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px}
.맺줄 b{font-family:var(--라벨);font-variant-numeric:tabular-nums;white-space:nowrap}
.맺줄 i{font-style:normal;font-family:var(--라벨);font-size:11.5px;color:var(--흐림);margin-left:5px}
.맺줄.소계{background:var(--선연);font-family:var(--라벨);font-weight:600;color:var(--회);
  border-top:1px solid var(--선);font-size:13.5px}
.맺줄.소계 b{color:var(--회)}
.맺줄.총계{background:var(--띠);font-family:var(--제목);font-weight:700;font-size:15.5px;
  color:var(--먹);border-top:2px solid var(--감청);padding:13px 12px}
.맺줄.총계 b{font-size:16.5px;color:var(--먹)}
table.출납 tbody tr:hover{background:var(--선연)}
table.출납 tr.이월:hover td{filter:none}
.작지움{background:none;border:0;color:var(--흐림);font-size:16px;line-height:1;cursor:pointer;padding:2px 5px}
.작지움:hover{color:var(--위험)}
.적는칸{display:flex;gap:6px;padding:12px 10px;border-top:1px solid var(--선);background:var(--선연);
  margin-top:auto;flex-wrap:wrap}
.적는칸 input{flex:1 1 84px;min-width:0;width:auto;padding:7px 9px;font-size:13.5px}
.적는칸 input:first-child{flex:0 0 106px}
.적는칸 .단추{flex:0 0 auto}
/* ── 첫 화면 바탕 사진 (2026-08-22 청강님 지시) ────────────────────
   2026 사랑의 꾸러미 나눔 행사 — 용답동 바르게살기운동위원회.
   ⚠ 사진 위에 흰 제목·금색 강조가 얹힌다. 아래 ::before 덮개를 지우면
     글자가 읽히지 않는다. 밝기를 바꿀 때는 --덮개 값만 만진다.
   ⚠ PC 는 글이 왼쪽에 모이므로 왼쪽을 진하게, 폰은 글이 가로 전체를
     쓰므로 위아래로 고르게 깐다. 한쪽 값만 쓰면 폰에서 본문이 묻힌다. */
.머리말{
  background-color:#0B1F3D;
  background-image:url("/assets/img/hero.jpg");
  background-size:cover;
  background-position:50% 42%;
  background-repeat:no-repeat;
}
.머리말::before{
  background:
    linear-gradient(100deg,rgba(11,31,61,0.470) 0%,rgba(11,31,61,0.440) 34%,
                    rgba(11,31,61,0.290) 62%,rgba(11,31,61,0.180) 100%),
    linear-gradient(to top,rgba(8,16,30,0.370) 0%,rgba(8,16,30,0.060) 52%,rgba(8,16,30,0.170) 100%);
}
.머리말 .빗살{opacity:.07}
/* 덮개를 절반으로 걷은 만큼(2026-08-22 청강님 지시) 글자는 스스로를 지켜야 한다.
   그늘이 없으면 눈썹글·본문·이념표 영문이 사진의 밝은 부분에 그대로 묻힌다. */
.머리말 h1{text-shadow:0 2px 4px rgba(4,10,20,.72),0 6px 26px rgba(4,10,20,.55)}
.머리말 .눈썹,.머리말 p{text-shadow:0 1px 3px rgba(4,10,20,.9),0 2px 10px rgba(4,10,20,.8)}
.머리말 .이념표 b,.머리말 .이념표 span{text-shadow:0 1px 3px rgba(4,10,20,.85)}
.머리말 .이념표{background:rgba(9,19,38,0.220);border-color:rgba(255,255,255,0.130)}
@media(max-width:900px){
  .머리말{background-position:50% 38%}
  /* 폰은 글이 가로 전체를 쓴다. 위(눈썹·제목)는 진하게 덮어 글을 지키고,
     가운데(사람들 얼굴)는 걷어 사진이 보이게 한다. */
  .머리말::before{
    background:linear-gradient(rgba(11,31,61,0.470) 0%,rgba(11,31,61,0.460) 22%,
                               rgba(11,31,61,0.370) 42%,rgba(11,31,61,0.300) 68%,
                               rgba(8,16,30,0.400) 100%);
  }
  /* 폰은 본문이 밝은 꾸러미 상자 위에 그대로 얹힌다. 덮개를 걷은 만큼
     글자를 흰색으로 올리고 그늘을 겹쳐 읽히게 한다. */
  .머리말 p{color:#fff;text-shadow:0 1px 2px rgba(4,10,20,.95),0 2px 9px rgba(4,10,20,.9),0 0 20px rgba(4,10,20,.7)}
  .머리말 .눈썹{text-shadow:0 1px 2px rgba(4,10,20,.95),0 2px 10px rgba(4,10,20,.85)}
  .머리말 .이념표 span{text-shadow:0 1px 2px rgba(4,10,20,.95),0 2px 8px rgba(4,10,20,.8)}
}