/* ─────────────────────────────────────────────────────────────
   CADL 플랫폼 스타일
   명세서 CADL_SPEC.md §1.8 색·글꼴, §1.10 모바일 우선·접근성

   색 규칙 두 가지만 기억하면 된다.
     · 금색(--gold)은 밝은 배경 위 글자색으로 쓰지 않는다 (명도 대비 부족).
       금색 배경 위 글자는 남색으로 둔다.
     · 금색은 한 화면에 한 곳만. 강조가 두 군데면 둘 다 안 보인다.
   ───────────────────────────────────────────────────────────── */

:root{
  --navy:#1E2656;   /* 존엄 남색 — 로고·헤더·제목·기본 버튼 */
  --gold:#F0B429;   /* 등불 금색 — 화면당 한 곳 강조 */
  --sky:#E4EBF7;    /* 요람 하늘 — 구역 배경·선택된 필터 */
  --paper:#FBFCFE;  /* 종이 흰색 — 기본 배경 */
  --ink:#3D4459;    /* 먹 회색 — 본문 */
  --green:#2E7D5B;  /* 새싹 초록 — 모집 중·검증 완료 */
  --line:#D9E1F0;
  --muted:#7A819B;
  --r:10px;
  --ctlh:44px;      /* 입력칸·드롭다운·작은 버튼의 공통 높이 — 한 줄에 섞여도 어긋나지 않게 */
  --font:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}  /* .btn 처럼 display 를 정한 요소도 hidden 이면 숨긴다 */
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.65;-webkit-text-size-adjust:100%;
}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:980px;margin:0 auto;padding:0 1.15rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ── 헤더 ───────────────────────────────────────────────── */
.cadl-head{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hrow{display:flex;align-items:center;gap:1rem;min-height:72px}
.logo{display:block;flex:none}
.logo img{height:40px;width:auto;display:block}
.mainnav{margin-left:auto;display:flex;gap:1.4rem;font-size:.97rem;font-weight:600}
.mainnav a{text-decoration:none;color:var(--navy);padding:.4rem 0;border-bottom:2px solid transparent}
.mainnav a[aria-current]{border-bottom-color:var(--gold)}
.mainnav a:hover{border-bottom-color:var(--sky)}
.login{flex:none;border:1px solid var(--navy);border-radius:999px;padding:.42rem 1rem;
  font-size:.88rem;font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap}
.navtoggle{display:none;margin-left:auto;background:none;border:0;padding:.5rem;cursor:pointer}
.navtoggle span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px}
.drawer{display:none}
@media(max-width:820px){
  .mainnav{display:none}
  .login{margin-left:auto}
  .navtoggle{display:block;margin-left:0}
  .hrow{min-height:64px}
  .logo img{height:34px}
  .drawer{display:block;border-top:1px solid var(--line);background:var(--paper)}
  .drawer[hidden]{display:none}
  .drawer a{display:block;padding:.85rem 1.15rem;text-decoration:none;border-bottom:1px solid var(--line)}
  .drawer a b{display:block;color:var(--navy);font-size:1rem}
  .drawer a i{display:block;font-style:normal;font-size:.84rem;color:var(--muted);margin-top:.1rem}
  .drawer a[aria-current]{background:var(--sky)}
}

/* ── 히어로 (메인) ──────────────────────────────────────── */
.hero{background:var(--sky);padding:clamp(2.6rem,8vw,4.6rem) 0;text-align:center}
.hero .herologo{height:clamp(64px,13vw,104px);width:auto;margin:0 auto clamp(1.3rem,4vw,2rem);display:block}
.hero h1{margin:0 0 .65rem;color:var(--navy);font-weight:800;letter-spacing:-.022em;
  font-size:clamp(1.5rem,5.4vw,2.6rem);line-height:1.32;word-break:keep-all}
.hero p.lead{margin:0 auto 1.7rem;max-width:34rem;word-break:keep-all;
  font-size:clamp(.98rem,2.7vw,1.12rem)}
.ctas{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* 같은 .btn 이라도 <a> 와 <button> 은 줄높이가 달라 43.4px / 40.1px 로 갈렸다.
   가운데 정렬 상자로 바꾸고 최소 높이를 정한다 (글이 길어 두 줄이 되면 상자가 늘어난다). */
/* ── 단추 — 로고를 옮겨 온다 ─────────────────────────────
   로고는 남색 요람(C 모양 호) 안에 금색 등불(원)이 든 모양이다.
     · 기본 단추  = 남색 알약 + 왼쪽에 금색 등불 점. 올리면 등불이 밝아진다.
     · 테두리 단추 = 요람만(남색 테두리, 빈 점). 올리면 빈 점에 등불이 켜진다.
     · 금색 단추  = 금색 알약 + 남색 점 (로고 색 반전).
     · 위험 단추  = 붉은 알약, 점 없음 — 등불은 좋은 일에만 켠다.
   알약 모양(border-radius:999px)은 로고의 원을 따른 것이고, 카드(--r)와 구분되어
   "누르는 것" 임이 한눈에 보인다. */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:.55em;
  font-family:var(--font);line-height:1.3;cursor:pointer;letter-spacing:-.01em;
  background:var(--navy);color:#fff;text-decoration:none;font-weight:700;
  min-height:36px;padding:.38rem 1.05rem .38rem .85rem;border-radius:999px;font-size:.88rem;
  border:1px solid var(--navy);
  transition:background-color .15s,color .15s,box-shadow .15s,transform .15s}
.btn::before{content:"";flex:none;width:.55em;height:.55em;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 0 rgba(240,180,41,0);transition:box-shadow .15s,background-color .15s}
.btn:hover{background:#283270;border-color:#283270}
.btn:hover::before{box-shadow:0 0 0 .22em rgba(240,180,41,.35)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(30,38,86,.25)}
/* 요람만 — 빈 점에 올리면 등불이 켜진다 */
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn.ghost:hover::before{box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn.ghost:hover{background:var(--sky);color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover::before{background:var(--gold)}
/* 로고 색 반전 */
.btn.gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn.gold::before{background:var(--navy)}
.btn.gold:hover{background:#F6C04A;border-color:#F6C04A}
.btn.gold:hover::before{box-shadow:0 0 0 .22em rgba(30,38,86,.18)}
/* 크기 기준: 머리글의 닉네임 알약(.login, 높이 약 34px)이 가장 큰 단추다.
   기본 단추가 그 크기, .sm 은 한 단계 작다. 입력칸(--ctlh 44px)보다 낮은 것이 의도다. */
.btn.sm{min-height:32px;padding:.3rem .95rem .3rem .78rem;font-size:.84rem}
/* 본문 글줄 안에 붙는 단추 (닉네임·내 지역 옆 '바꾸기') — 글줄 높이에 맞춘다 */
.btn.xs{min-height:26px;padding:.15rem .7rem .15rem .58rem;font-size:.78rem}
.btn.danger.xs{padding-left:.7rem}

/* ── 구역 ───────────────────────────────────────────────── */
.blk{padding:clamp(2.1rem,5.5vw,3.2rem) 0;border-bottom:1px solid var(--line)}
.blk:last-of-type{border-bottom:0}
.bhead{display:flex;align-items:baseline;gap:.65rem;margin-bottom:1.15rem;flex-wrap:wrap}
.bhead h2{margin:0;color:var(--navy);font-size:1.25rem;font-weight:800;letter-spacing:-.012em}
.bhead .sub{font-size:.88rem;color:var(--muted)}
.bhead .more{margin-left:auto;font-size:.88rem;font-weight:600;color:var(--navy);text-decoration:none}
.bhead .more:hover{text-decoration:underline}

.pagehead{padding-top:clamp(1.8rem,5vw,2.8rem);padding-bottom:0}  /* 좌우 패딩은 .wrap 것을 그대로 쓴다 — 단축으로 덮으면 제목만 왼쪽으로 튀어나온다 */
.pagehead h1{margin:0 0 .4rem;color:var(--navy);font-size:clamp(1.4rem,4.6vw,2rem);font-weight:800;letter-spacing:-.02em}
.pagehead p{margin:0;color:var(--muted)}

/* ── 목록·카드 ──────────────────────────────────────────── */
ul.list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
li.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem}
.tag{display:inline-block;background:var(--sky);color:var(--navy);font-size:.74rem;font-weight:700;
  padding:.17rem .55rem;border-radius:999px}
li.card h3{margin:.5rem 0 .45rem;font-size:1.03rem;font-weight:700;color:var(--navy);
  line-height:1.45;word-break:keep-all}
.meta{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.82rem;color:var(--muted)}
.meta .emp{color:var(--navy);font-weight:700}
.meta .emp em{font-style:normal;color:var(--gold)}

/* ── 빈 상태 ────────────────────────────────────────────── */
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--r);
  padding:clamp(1.8rem,5vw,2.6rem) 1.2rem;text-align:center}
.empty p{margin:0;color:var(--navy);font-weight:600;word-break:keep-all}
.empty p.hint{margin:.5rem 0 0;color:var(--muted);font-weight:400;font-size:.9rem}

/* ── 급여 계산기 띠 ─────────────────────────────────────── */
.salarybox{background:var(--navy);border-radius:var(--r);padding:clamp(1.5rem,4.5vw,2.2rem);color:#fff}
.salarybox h2{margin:0 0 .55rem;font-size:1.28rem;font-weight:800;color:#fff}
.salarybox p{margin:0 0 1.25rem;color:#C9D2EA;font-size:.96rem;word-break:keep-all}
.salarybox .note{margin:.95rem 0 0;font-size:.82rem;color:#98A3C6}

/* ── 일자리 ─────────────────────────────────────────────── */
.job{display:flex;gap:.85rem;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:.9rem 1.05rem}
.job .due{flex:none;background:var(--green);color:#fff;font-size:.78rem;font-weight:700;
  padding:.24rem .58rem;border-radius:4px}
.job .o{font-size:.82rem;color:var(--muted)}
.job .t{font-weight:700;color:var(--navy);word-break:keep-all}
.job .go{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--navy);
  text-decoration:none;white-space:nowrap}
.disclaim{margin:1.1rem 0 0;padding:.8rem .95rem;background:var(--sky);border-radius:var(--r);
  font-size:.86rem;color:var(--navy);word-break:keep-all}

/* ── 소식 ───────────────────────────────────────────────── */
.newsrow{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem 0;border-bottom:1px dashed var(--line)}
.newsrow:last-child{border-bottom:0}
.newsrow .cat{flex:none;background:var(--navy);color:#fff;font-size:.72rem;font-weight:700;
  padding:.19rem .52rem;border-radius:4px;margin-top:.18rem}
.newsrow .t{font-weight:600;color:var(--navy);word-break:keep-all}
.newsrow .s{font-size:.82rem;color:var(--muted)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);
  margin-left:.35rem;vertical-align:middle}

/* ── 본문 글 (소개 페이지) ──────────────────────────────── */
/* 폭은 .wrap 하나(980px)로 통일한다 — 목록·본문의 왼쪽 선을 맞추려고 따로 좁히지 않는다 */
.prose h2{color:var(--navy);font-size:1.2rem;font-weight:800;margin:2rem 0 .6rem}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1rem;word-break:keep-all}
.prose blockquote{margin:1.4rem 0;padding:1.1rem 1.3rem;background:var(--sky);
  border-radius:var(--r);color:var(--navy);font-weight:600}
.prose blockquote p:last-child{margin:0}
.prose ul{margin:0 0 1rem;padding-left:1.2rem}
.prose li{margin:.3rem 0;word-break:keep-all}

/* ── 푸터 ───────────────────────────────────────────────── */
.cadl-foot{background:var(--navy);color:#C9D2EA;padding:clamp(2.2rem,6vw,3rem) 0;font-size:.9rem;text-align:center}
.cadl-foot a{color:#fff}
.cadl-foot .flogo{height:46px;width:auto;margin:0 auto .9rem;display:block;
  background:#fff;padding:.5rem .8rem;border-radius:var(--r)}
.cadl-foot .ftag{margin:0 0 .7rem;color:#fff;font-weight:700;font-size:1rem}
.cadl-foot .fdesc{margin:0 auto 1.3rem;max-width:32rem;word-break:keep-all}
.cadl-foot .flinks{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.2rem}
.cadl-foot .flinks a{text-decoration:none;font-weight:600}
.cadl-foot .flinks a:hover{text-decoration:underline}
.cadl-foot .fnote{margin:0;font-size:.83rem;color:#98A3C6}

/* ─────────────────────────────────────────────────────────────
   2026-09-16 2차: 로고 크기·푸터 재설계·로그인·게시판
   ───────────────────────────────────────────────────────────── */

/* 본문 바로가기 (접근성) */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.7rem 1.1rem;z-index:100;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* 로고 — 여백을 잘라낸 파일이라 같은 높이에서 훨씬 크게 보인다 */
.logo img{height:46px}
@media(max-width:820px){.logo img{height:38px}}
.hero .herologo{height:clamp(76px,15vw,128px)}

/* ── 푸터 재설계 ────────────────────────────────────────── */
.cadl-foot{text-align:left;padding:clamp(2.4rem,6vw,3.4rem) 0 clamp(1.6rem,4vw,2.2rem)}
.cadl-foot .fmain{display:grid;grid-template-columns:1.25fr 2fr;gap:clamp(1.6rem,5vw,3rem);align-items:start}
.cadl-foot .flogo{height:38px;width:auto;margin:0 0 1rem;display:block;background:none;padding:0;border-radius:0}
.cadl-foot .ftag{margin:0 0 .6rem;color:#fff;font-weight:700;font-size:1.02rem;word-break:keep-all}
.cadl-foot .fdesc{margin:0;max-width:26rem;font-size:.88rem;line-height:1.7;word-break:keep-all;color:#A9B4D6}
.cadl-foot .fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cadl-foot .fcol h3{margin:0 0 .7rem;font-size:.82rem;font-weight:700;color:#fff;letter-spacing:.04em}
.cadl-foot .fcol a{display:block;text-decoration:none;color:#A9B4D6;font-size:.88rem;padding:.24rem 0}
.cadl-foot .fcol a:hover{color:#fff;text-decoration:underline}
.cadl-foot .fsmall{margin:.5rem 0 0;font-size:.8rem;color:#8790B3;line-height:1.6;word-break:keep-all}
.cadl-foot .fnote{margin:clamp(1.6rem,4vw,2.2rem) 0 0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem;color:#8790B3}
@media(max-width:760px){
  .cadl-foot .fmain{grid-template-columns:1fr;gap:1.8rem}
  .cadl-foot .fcols{grid-template-columns:repeat(2,1fr)}
}

/* 관리자 표시 — 푸터 글자를 가리지 않게 오른쪽 아래로 */
.admbar{position:fixed;right:1rem;bottom:1rem;z-index:50;background:var(--navy);color:#fff;
  font:600 12px/1.4 var(--font);padding:.45rem .75rem;border-radius:999px;
  box-shadow:0 4px 14px rgba(30,38,86,.28);display:flex;gap:.6rem;align-items:center}
.admbar span{color:#A9B4D6}
.admbar a{color:var(--gold);text-decoration:none}
.admbar a:hover{text-decoration:underline}

/* ── 로그인·가입 ────────────────────────────────────────── */
.authbox{max-width:26rem;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.6rem,5vw,2.2rem)}
.authbox h1{margin:0 0 .4rem;color:var(--navy);font-size:1.5rem;font-weight:800}
.authsub{margin:0 0 1.4rem;font-size:.92rem;color:var(--muted);word-break:keep-all}
.authform{display:grid;gap:.35rem}
.authform label{font-size:.88rem;font-weight:700;color:var(--navy);margin-top:.7rem}
.authform label .lh{font-weight:400;color:var(--muted);font-size:.82rem;margin-left:.35rem}
.authform input[type=email],.authform input[type=password],.authform input[type=text]{
  font:inherit;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);width:100%}
.authform input:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.authform .btn{margin-top:1.3rem;width:100%;text-align:center;cursor:pointer}
.chk{display:flex;gap:.5rem;align-items:flex-start;margin-top:.9rem;font-size:.87rem;font-weight:400;color:var(--ink)}
.chk input{margin-top:.25rem;flex:none}
.chk i{display:block;font-style:normal;font-size:.8rem;color:var(--muted)}
.authswap{margin:1.2rem 0 0;text-align:center;font-size:.9rem;color:var(--muted)}
.authswap a{color:var(--navy);font-weight:700}
.authnote{margin:1rem 0 0;font-size:.8rem;color:var(--muted);text-align:center;word-break:keep-all}
.formerr{margin:0 0 1rem;padding:.7rem .9rem;background:#FDECEC;border:1px solid #F3C6C6;
  border-radius:8px;color:#8A2B2B;font-size:.88rem}

/* ── 게시판 ─────────────────────────────────────────────── */
.filters{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1.1rem}
/* 칩은 좀 좁다. 예전 폭으로는 시설분야 10개가 938px 를 써서
   896px 칸에 들어가지 못하고 '기타' 하나만 다음 줄로 내려갔다 (2026-09-16 실측). */
.chips{display:flex;gap:.32rem;flex-wrap:wrap}
.chip{text-decoration:none;font-size:.86rem;font-weight:600;color:var(--navy);white-space:nowrap;
  border:1px solid var(--line);background:#fff;padding:.36rem .58rem;border-radius:999px}
.chip.on{background:var(--sky);border-color:var(--sky)}
.writebtn{margin-left:auto}
/* ── 홈: 숫자 띠·목록 ────────────────────────────────── */
.homestats-blk{padding-top:0}
.homestats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem}
.homestats a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;text-decoration:none;color:var(--navy)}
.homestats a:hover{background:var(--sky)}
.homestats b{display:block;font-size:1.45rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.homestats span{display:block;font-size:.8rem;color:var(--muted);margin-top:.1rem}
.homemore{margin:1rem 0 0;display:flex;gap:.5rem;flex-wrap:wrap}
.homenews .newstit{font-size:1rem}
.homenews .newstit a{color:inherit;text-decoration:none}
.homenews .newstit a:hover{text-decoration:underline}
.homenews .newshead .src{font-size:.8rem;color:var(--muted)}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.salarybox .ctas{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.2rem}
.btn.ghost.light{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.btn.ghost.light:hover{background:rgba(255,255,255,.12)}
.sortchips{align-items:center;padding-left:.7rem;border-left:1px solid var(--line)}
.sortlab{font-size:.78rem;color:var(--muted);margin-right:.1rem}
@media (max-width:640px){.sortchips{padding-left:0;border-left:0}}
li.card h3 a{text-decoration:none}
li.card h3 a:hover{text-decoration:underline}
.back{text-decoration:none;font-size:.9rem;font-weight:600;color:var(--navy)}

.postview{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.3rem,4vw,2rem)}
.postview h1{margin:.6rem 0 .6rem;color:var(--navy);font-size:clamp(1.25rem,4vw,1.7rem);
  font-weight:800;line-height:1.4;word-break:keep-all}
.postbody{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line);
  line-height:1.85;word-break:keep-all;white-space:normal}
.postacts{margin-top:1.5rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.likebtn{font:600 .92rem/1 var(--font);background:#fff;border:1px solid var(--navy);color:var(--navy);
  padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-block}
.likebtn span{color:var(--gold)}
.likebtn.on,.likebtn:disabled{background:var(--sky);border-color:var(--sky);cursor:default}
.likednote{font-size:.82rem;color:var(--muted)}

.replyhead{margin:2.2rem 0 .9rem;color:var(--navy);font-size:1.08rem;font-weight:800}
.replies{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.replies li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem}
.replies li p{margin:.4rem 0 0;word-break:keep-all}
.norep{color:var(--muted);font-size:.92rem}
.replyform{margin-top:1.1rem;display:grid;gap:.6rem}
/* ⚠ 체크박스를 뺀다. 예전에는 '.writeform input' 이라고만 적어 두어
   익명 상자까지 width:100% 를 먹고 884px 로 늘어나, 옆의 설명 글이
   한 글자씩 세로로 흘러내렸다 (2026-09-16 실측: 라벨 높이 414px). */
.replyform textarea,.writeform textarea,
.writeform input:not([type=checkbox]):not([type=radio]),.writeform select{
  font:inherit;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;background:#fff;width:100%}
.writeform .chk input,.replyform .chk input{width:auto;flex:none;padding:0}
.replyform textarea:focus,.writeform textarea:focus,.writeform input:focus,.writeform select:focus{
  border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.replyrow{display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.replyrow .chk{margin-top:0}

.writeform{display:grid;gap:.35rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.2rem,4vw,1.8rem)}
.writeform label{font-size:.88rem;font-weight:700;color:var(--navy);margin-top:.8rem}
.writeform label.chk{font-weight:400;font-size:.88rem}
.writerow{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.3rem;flex-wrap:wrap}
.writerow .btn{cursor:pointer}

/* 폼 하나로 묶기 어려운 것들(닉네임 폼 + 로그아웃 폼 / 지역 폼 + 공고 보기 링크)을
   한 줄에 세운다. 각자 제 폼으로 보내야 해서 폼을 합칠 수는 없다. */
.inlinerow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.inlinerow > .inlineform{flex:1 1 22rem;min-width:0}
.inlinesub{margin:0}
.inlineform{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
/* Select2 를 width:100% 로 씌우면 한 줄 폼에서 저 혼자 한 줄을 다 먹는다.
   이 폼에서는 칸을 나눠 갖게 한다 (2026-09-17 실측). */
.inlineform .select2-container{flex:1 1 9.5rem;width:auto!important}
.inlineform input{font:inherit;font-size:.95rem;height:var(--ctlh);padding:0 .75rem;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);min-width:12rem;flex:1}
.inlineform input:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.btn.sm{cursor:pointer}
.btn.danger{background:#8A2B2B;border-color:#8A2B2B;padding-left:1.05rem}
.btn.danger.sm{padding-left:.95rem}
.btn.danger::before{display:none}
.btn.danger:hover{background:#A33636;border-color:#A33636}
.formok{margin:0 0 1rem;padding:.7rem .9rem;background:#E7F3EC;border:1px solid #BFDCCB;
  border-radius:8px;color:#1F5A3F;font-size:.88rem}

/* ── 구글 로그인 버튼 ───────────────────────────────────── */
.gbox{display:flex;justify-content:center;margin:0 0 1.1rem;min-height:44px}
.orline{display:flex;align-items:center;gap:.7rem;margin:0 0 .4rem;color:var(--muted);font-size:.82rem}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}

/* 구글 로그인 버튼 — 구글 브랜드 가이드(흰 배경, 회색 테두리, 로고 좌측) */
.gbtn{display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;padding:.72rem 1rem;margin:0 0 1rem;
  background:#fff;border:1px solid #dadce0;border-radius:8px;
  color:#3c4043;font-weight:600;font-size:.95rem;text-decoration:none}
.gbtn:hover{background:#f8f9fa;border-color:#d2d5d9}
.gbtn svg{flex:none}

/* 운영자 표시·조작 */
.login.staff{border-color:var(--gold);background:#FFF9EC}
.login i{font-style:normal;font-size:.72rem;font-weight:700;color:var(--navy);
  background:var(--gold);border-radius:999px;padding:.1rem .4rem;margin-left:.35rem}
.modbtn{font:600 .78rem/1 var(--font);background:#fff;border:1px solid #E0C08A;
  color:#8A6A1F;padding:.35rem .7rem;border-radius:999px;cursor:pointer;margin-top:.5rem}
.modbtn:hover{background:#FFF9EC}

/* ── 일자리 목록 ────────────────────────────────────────── */
.joblist .job{align-items:flex-start;gap:.9rem}
.job .due.always{background:var(--navy)}
.job .due.soon{background:#B0452F}
.jobmain{min-width:0;flex:1}
.jobmain .t{margin:.15rem 0 .4rem;font-size:1.02rem;line-height:1.45}
.jmeta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.82rem;color:var(--muted)}
.jmeta .tag{font-size:.72rem}
.srcnote{margin:1rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.7;word-break:keep-all}
.srcnote a{color:var(--navy);font-weight:600}
@media(max-width:620px){
  .joblist .job{flex-wrap:wrap}
  .job .go{margin-left:0;width:100%;text-align:center;border:1px solid var(--line);
    border-radius:8px;padding:.5rem;margin-top:.5rem}
}

/* ── 일자리 필터 (복지넷 검색 화면과 같은 묶음) ─────────── */
.jobfilter{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1rem,3vw,1.4rem);margin-bottom:1.2rem}
/* 한 칸 = 이름표 + 입력칸. 이름표를 칸 위에 두어야 칸마다 왼쪽 선이 맞는다.
   줄 가운데에 이름표를 끼워 넣으면 줄마다 시작 위치가 달라져 눈이 피곤해진다. */
.jfgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem 1rem;margin-top:1.1rem}
.jffield{display:grid;gap:.35rem;min-width:0}
.jffield.jffull,.jfsearch{grid-column:1/-1}
/* 4열 격자: [시설분야 2칸 | 시·도 | 시·군·구] / [근무형태 | 경력 | 등록일 2칸] / [검색 4칸] */
.jffield-field,.jfdates{grid-column:span 2}
.jflab{font-size:.82rem;font-weight:700;color:var(--navy)}
.jffield select,.jffield input[type=date],.jffield input[type=search]{
  width:100%;font:inherit;font-size:.9rem;height:var(--ctlh);padding:0 .7rem;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.jffield select:focus,.jffield input:focus{border-color:var(--navy);outline:none;
  box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.jffield select:disabled{background:#F1F3F8;color:var(--muted)}
.jfrange{display:flex;align-items:center;gap:.45rem}
.jfrange input{flex:1;min-width:0}
.jftil{flex:none;color:var(--muted)}
.jfacts{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.2rem;
  padding-top:1.1rem;border-top:1px solid var(--line)}
.jfacts .btn{cursor:pointer}
.jfacts button.btn{min-width:8rem}
.chip.off{opacity:.45}
.chip b{font-weight:700;color:var(--muted)}
.chip.on b{color:var(--navy)}
.jfcount{margin:0 0 .7rem;font-size:.88rem;color:var(--muted)}
.jfcount strong{color:var(--navy)}
.jfcount .jfstats{float:right;color:var(--navy);font-weight:700;text-decoration:none}
.jfcount .jfstats:hover{text-decoration:underline}
@media(max-width:900px){
  .jfgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .jfgrid{grid-template-columns:minmax(0,1fr)}
  .jfdates,.jffield-field{grid-column:auto}
  .jfacts{justify-content:stretch}
  .jfacts .btn{flex:1}
}

/* ── Select2 를 사이트 톤에 맞춘다 ──────────────────────── */
/* Select2 가 만든 상자도 다른 입력칸과 같은 높이(--ctlh)로. 필터·내 정보 두 곳에 같은 옷을 입힌다 */
.jobfilter .select2-container,.calcbox .select2-container,
.modalform .select2-container,.salgrid .select2-container,
.salform .select2-container,.crform .select2-container{width:100%!important;max-width:100%;
  display:block;height:var(--ctlh)}
/* 높이를 못 박아 둔다 — 같은 줄의 다른 이름표가 두 줄이 되면 칸이 늘어나면서
   드롭다운만 10px쯤 키가 커져 줄이 어긋났다 (2026-09-17 실측) */
/* 상자 안의 .selection 도 블록으로 — 인라인이면 글줄 상자가 생겨 높이가 들쭉날쭉해진다 */
.jobfilter .select2-container>.selection,.calcbox .select2-container>.selection,
.modalform .select2-container>.selection,.salgrid .select2-container>.selection,
.salform .select2-container>.selection,.crform .select2-container>.selection,
.inlineform .select2-container>.selection{display:block}
/* 뒤에 붙는 빈 .dropdown-wrapper 가 인라인이라 글줄 상자를 하나 더 만든다 — 그만큼 상자가 높아진다 */
.select2-container>.dropdown-wrapper{display:block}
.inlineform .select2-container{min-width:9.5rem}
.jobfilter .select2-container--default .select2-selection--single,
.inlineform .select2-container--default .select2-selection--single,
.calcbox .select2-container--default .select2-selection--single,
.modalform .select2-container--default .select2-selection--single,
.salgrid .select2-container--default .select2-selection--single,
.salform .select2-container--default .select2-selection--single,
.crform .select2-container--default .select2-selection--single{
  height:var(--ctlh);display:flex;align-items:center;
  padding:0 1.9rem 0 .7rem;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.jobfilter .select2-container--default .select2-selection--single .select2-selection__rendered,
.inlineform .select2-container--default .select2-selection--single .select2-selection__rendered,
.calcbox .select2-container--default .select2-selection--single .select2-selection__rendered,
.modalform .select2-container--default .select2-selection--single .select2-selection__rendered,
.salgrid .select2-container--default .select2-selection--single .select2-selection__rendered,
.salform .select2-container--default .select2-selection--single .select2-selection__rendered,
.crform .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink);font-size:.9rem;line-height:1.4;padding:0;flex:1;min-width:0}
.jobfilter .select2-container--default .select2-selection--single .select2-selection__arrow,
.inlineform .select2-container--default .select2-selection--single .select2-selection__arrow,
.calcbox .select2-container--default .select2-selection--single .select2-selection__arrow,
.modalform .select2-container--default .select2-selection--single .select2-selection__arrow,
.salgrid .select2-container--default .select2-selection--single .select2-selection__arrow,
.salform .select2-container--default .select2-selection--single .select2-selection__arrow,
.crform .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:100%;top:0;right:.5rem}
.jobfilter .select2-container--default.select2-container--open .select2-selection--single,
.jobfilter .select2-container--default.select2-container--focus .select2-selection--single,
.inlineform .select2-container--default.select2-container--open .select2-selection--single,
.inlineform .select2-container--default.select2-container--focus .select2-selection--single,
.calcbox .select2-container--default.select2-container--open .select2-selection--single,
.calcbox .select2-container--default.select2-container--focus .select2-selection--single,
.modalform .select2-container--default.select2-container--open .select2-selection--single,
.modalform .select2-container--default.select2-container--focus .select2-selection--single,
.salform .select2-container--default.select2-container--open .select2-selection--single,
.salform .select2-container--default.select2-container--focus .select2-selection--single,
.crform .select2-container--default.select2-container--open .select2-selection--single,
.crform .select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.select2-dropdown{border-color:var(--line);border-radius:8px;overflow:hidden}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--navy)}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--sky);color:var(--navy)}
.select2-search--dropdown .select2-search__field{border:1px solid var(--line);border-radius:6px;padding:.4rem}

/* ── 공고의 급여 ↔ 권고기준 견주기 ───────────────────────── */
.salbtn{display:inline-block;margin-top:.55rem;font:600 .78rem/1 var(--font);cursor:pointer;
  background:#fff;border:1px solid var(--navy);color:var(--navy);
  padding:.42rem .7rem;border-radius:999px;white-space:nowrap}
.salbtn:hover{background:var(--sky)}
.modalbox.wide{max-width:38rem}
.salgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem .8rem;margin-bottom:1.1rem}
.salout{background:var(--sky);border-radius:var(--r);padding:1rem 1.1rem}
.salrow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.3rem 0;font-size:.9rem;color:#5D6A94}
.salrow i{font-style:normal;font-size:.8rem;color:#7A86AC;margin-left:.25rem}
.salrow strong{color:var(--navy);font-weight:800;font-size:1.02rem;white-space:nowrap}
.saldiff{margin:.7rem 0 0;padding-top:.7rem;border-top:1px solid #CBD6EC;
  font-size:.88rem;line-height:1.7;word-break:keep-all;font-weight:600;color:var(--navy)}
.saldiff.up{color:#1F5A3F}
.saldiff.down{color:#8A2B2B}
.saldiff.mid{color:#5D6A94}
.salnote{margin:.9rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.7;word-break:keep-all}
.salnote strong{color:var(--navy)}
@media(max-width:560px){
  .salgrid{grid-template-columns:minmax(0,1fr)}
  .salrow{flex-direction:column;gap:.1rem}
}

/* 접수 상태 탭 — 채용 중 / 채용 종료 / 전체 */
.jtabs{display:flex;gap:.4rem;margin:0 0 1rem;flex-wrap:wrap}
/* 건수 줄 오른쪽의 정렬 전환 — 작은 칩 두 개 */
.jfcount{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.jfsort{display:inline-flex;gap:.3rem;margin-left:auto}
.jfsort .chip{font-size:.8rem;padding:.28rem .7rem}
.jmeta .jposted{color:var(--muted)}
.jtab{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;white-space:nowrap;
  font-size:.92rem;font-weight:700;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem}
.jtab b{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.jtab:hover{border-color:var(--navy)}
.jtab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.jtab.on b{color:#C9D2EA}
.jfmine{margin-right:auto}
.jfauto{margin-left:.5rem;font-size:.84rem;color:var(--muted)}

/* ── 내 급여 (내 정보) ───────────────────────────────────── */
.setupnote{margin:0 0 1rem;padding:.8rem 1rem;background:#FFF9EC;border:1px solid #E6D6AE;
  border-radius:8px;color:#7A5E1A;font-size:.88rem;line-height:1.7;word-break:keep-all}
.setupnote a{color:#7A5E1A;font-weight:800}
.salh{margin:1.5rem 0 .8rem;font-size:.95rem;font-weight:800;color:var(--navy)}
.salh .sub{margin-left:.4rem;font-size:.8rem;font-weight:600;color:var(--muted)}
.salform{margin-top:1.1rem}

/* 결과 — 내 호봉과 금액 */
.salme{background:var(--navy);color:#fff;border-radius:var(--r);padding:clamp(1.1rem,3.5vw,1.5rem);margin:1.1rem 0 0}
.salme .who{margin:0 0 .9rem;font-size:.86rem;color:#C9D2EA;font-weight:600;word-break:keep-all}
.salstep{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding-bottom:.9rem;margin-bottom:.5rem;border-bottom:1px solid #3B4478}
.salstep .k{font-size:.86rem;color:#C9D2EA}
.salstep .v{font-size:clamp(1.5rem,5vw,2rem);font-weight:800;color:var(--gold);letter-spacing:-.02em}
.salstep .v em{font-style:normal;font-size:.55em;font-weight:700;margin-left:.15rem;color:#C9D2EA}
.salstep .sub{font-size:.82rem;color:#98A3C6;margin-left:auto}
.sallines{margin:0;display:grid;gap:.1rem}
.sallines div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.4rem 0;font-size:.92rem}
.sallines dt{margin:0;color:#C9D2EA;word-break:keep-all}
.sallines dt i{font-style:normal;font-size:.8rem;color:#98A3C6;margin-left:.3rem}
.sallines dd{margin:0;font-weight:700;white-space:nowrap}
.sallines .big{border-top:1px solid #3B4478;border-bottom:1px solid #3B4478;margin:.4rem 0;padding:.7rem 0}
.sallines .big dt{color:#fff;font-weight:700}
.sallines .big dd{font-size:1.25rem;font-weight:800;color:var(--gold)}
.salnext{margin:.9rem 0 0;font-size:.88rem;color:#C9D2EA;word-break:keep-all;line-height:1.7}
.salnext b{color:#fff}
.salnext span{color:#8FD3B0}

/* 경력 목록 */
/* 고치기·지우기는 글자 대신 아이콘으로 — 줄마다 붙어 있어 글자면 목록이 시끄러워진다.
   눌러야 할 것이므로 손가락이 닿는 크기(32px)는 지킨다. */
.cracts{display:flex;align-items:center;gap:.1rem}
.credit,.crdel button{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;background:none;border-radius:8px;
  color:var(--muted);cursor:pointer;text-decoration:none}
.credit svg,.crdel button svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.credit:hover{background:var(--sky);color:var(--navy)}
.crformtit{margin:0 0 1.1rem;font-size:1.12rem;font-weight:800;color:var(--navy)}
/* 버튼 줄은 입력칸 한 칸에 끼워 넣지 않고 줄 전체를 쓴다 —
   좁은 칸에 두 버튼을 넣으면 글자가 세로로 쪼개져 줄 전체가 늘어났다. */
.crsubmit{grid-column:1/-1}
.crbtns{display:flex;gap:.5rem;justify-content:flex-end}
.crbtns .btn{flex:0 0 auto;white-space:nowrap;min-width:6.5rem}

.crlist{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.4rem}
/* 한 줄 = [기관 이름 / 갈래·담당·기간] [기간] [고치기·지우기].
   갈래 뱃지를 왼쪽 고정 칸에 두었더니 이름이 짧은 줄에서 빈 칸이 크게 남아 어색했다. */
.crlist li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.8rem;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.65rem .8rem}
.crkind{flex:none;font-size:.74rem;font-weight:700;color:var(--navy);background:var(--sky);
  border-radius:999px;padding:.15rem .5rem;white-space:nowrap}
.crmain{min-width:0}
.crmain b{display:block;font-size:.95rem;color:var(--navy);font-weight:700;margin-bottom:.25rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crmeta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.crrole{color:var(--ink)}
.crspan{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.crmon{text-align:right;white-space:nowrap}
.crmon b{display:block;font-size:.88rem;color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums}
.crmon i{font-style:normal;font-size:.76rem;color:var(--muted)}
.crdel{margin:0}
.crdel button:hover{background:#FDECEC;color:#8A2B2B}
.crsum{margin:0;font-size:.92rem;color:var(--navy);font-weight:600}
.crsum b{color:var(--navy);font-weight:800}
.crwarn{margin:.6rem 0 0;padding:.7rem .9rem;background:#FFF9EC;border:1px solid #E6D6AE;
  border-radius:8px;font-size:.85rem;color:#7A5E1A;line-height:1.7;word-break:keep-all}
.crwarn strong{font-weight:800}
.crform{margin:0}
/* 경력 폼은 모달 폭에 맞춰 3열: [구분·기관명·담당] / [시작일·종료일·인정률] */
.crform .calcgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.1rem}  /* 칸 너비는 모두 같게 — 시작일·종료일이 다르면 어색하다 */
/* 모달 안의 묶음 — 소제목 + 격자. 묶음 사이에만 선을 긋는다 */
.modalbody .salsec{padding:0}
.modalbody .salsec + .salsec{padding-top:1.1rem;border-top:1px solid var(--line)}
.modalbody .salsec .salh{margin:0 0 .7rem;font-size:.86rem}
.modalbody .salsec .salh .sub{font-weight:500}
.modalbody .salsec > .hint{margin:.7rem 0 0}
/* 경력 카드 바닥의 승급월 — 합계 오른쪽에 작은 선택 하나 */
.stepform{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;margin:0;white-space:nowrap}
.stepform label{font-size:.82rem;font-weight:700;color:var(--navy)}
.stepform select{font:inherit;font-size:.84rem;height:32px;padding:0 1.9rem 0 .8rem;border:1px solid var(--line);
  border-radius:999px;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;   /* 브라우저 화살표를 끄고 안쪽에 그린다 — 기본 화살표는 오른쪽 끝에 붙는다 */
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E2656' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right .7rem center}
.stepform select:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.crsum .next{font-size:.84rem;color:var(--muted);font-weight:500;margin-left:.35rem;padding-left:.75rem;border-left:1px solid var(--line)}
.crsum .next b{color:var(--navy);font-weight:700}
@media(max-width:600px){.stepform{width:100%}.crsum .next{margin:0;padding:0;border:0;width:100%}}
.crform .calcf select:disabled{background:#F1F3F8;color:var(--muted)}
.crform .crsubmit{margin-top:.2rem}
.crform .hint{margin:.8rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.7;word-break:keep-all}
.crform .crbtns .btn{width:auto}
@media(max-width:700px){
  .crlist li{grid-template-columns:1fr auto auto;gap:.5rem}
  .crkind{grid-column:1/-1;justify-self:start}
}
@media(max-width:560px){
  .crform .calcgrid{grid-template-columns:minmax(0,1fr)}
  .crbtns .btn{flex:1}
}

/* ── 일자리 분석 ─────────────────────────────────
   그림에 쓰는 색은 남색 하나다. 막대는 길이로 크기를 말하므로
   거기에 색까지 얹으면 같은 말을 두 번 하는 무지개 막대가 된다. */
.sttiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-bottom:1rem}
.sttile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem}
.sttile .k{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.35rem}
.sttile .v{display:block;font-size:clamp(1.3rem,4vw,1.65rem);font-weight:800;color:var(--navy);
  letter-spacing:-.02em;line-height:1.2}
.sttile .v em{font-style:normal;font-size:.62em;font-weight:700;margin-left:.15rem;color:var(--muted)}

.stbase{margin:0 0 1.2rem;font-size:.85rem;color:var(--muted);line-height:1.75;word-break:keep-all}
.stbase b{color:var(--navy)}

.stcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.1rem,3.5vw,1.5rem);margin-bottom:1rem}
.stcard h2{margin:0 0 1rem;color:var(--navy);font-size:1.02rem;font-weight:800}
.stcard h2 .sub{margin-left:.45rem;font-size:.8rem;font-weight:600;color:var(--muted)}
.stnote{margin:.9rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.7;word-break:keep-all}
.stnote strong{color:var(--navy)}
.stempty{margin:0;font-size:.9rem;color:var(--muted)}
.styear{margin:.6rem 0 0;font-size:.86rem;color:var(--muted);word-break:keep-all}
.styear b{color:var(--navy)}
.stpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.stpair .stcard{margin-bottom:1rem}

/* 가로 막대 — 값이 항상 보이므로 이것 자체가 표다 (따로 표를 두지 않는다) */
.stbars{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.stbars li{display:grid;grid-template-columns:7.2rem 1fr auto auto;align-items:center;gap:.7rem;
  padding:.24rem .35rem;border-radius:6px}
.stbars li:hover{background:var(--sky)}
.stlab{font-size:.86rem;color:var(--navy);font-weight:600;word-break:keep-all;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stbar{display:block;height:14px;background:#EEF1F8;border-radius:4px;overflow:hidden;min-width:0}
.stbar i{display:block;height:100%;background:var(--navy);border-radius:4px}
.stval{font-size:.88rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;
  min-width:3.6rem;text-align:right;white-space:nowrap}
.stval em{font-style:normal;font-weight:600;font-size:.82em;color:var(--muted);margin-left:.1rem}
.stpct{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;
  min-width:3.1rem;text-align:right}
.stbars li.zero .stval{color:var(--muted)}

/* 세로 막대 — 가로축이 시간일 때만 */
.stcols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:.4rem;
  align-items:end;min-height:200px}
.stcol{display:grid;grid-template-rows:auto 1fr auto;gap:.3rem;justify-items:center;min-width:0;height:200px}
.stcolv{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.stcolbar{display:flex;align-items:flex-end;width:100%;max-width:2.6rem;height:100%}
.stcolbar i{display:block;width:100%;background:var(--navy);border-radius:4px 4px 0 0;min-height:2px}
.stcoll{font-size:.76rem;color:var(--muted);white-space:nowrap}
.stcol:hover .stcolbar i{background:#2E3B78}
.stcol:hover .stcolv{color:var(--navy);font-weight:700}

/* 날짜별 꺾은선 */
.stchart{position:relative}
.stchart svg{display:block;width:100%;height:auto}
.stchart .grid{stroke:var(--line);stroke-width:1}
.stchart .ytick,.stchart .xtick{fill:var(--muted);font-size:13px;font-family:var(--font)}
.stchart .ytick{text-anchor:end}
.stchart .xtick{text-anchor:middle}
.stchart .area{fill:rgba(30,38,86,.10);stroke:none}
.stchart .line{fill:none;stroke:var(--navy);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.stchart .dot{fill:#fff;stroke:var(--navy);stroke-width:2}
.stchart .dot.on{fill:var(--navy);r:5.5}
.stchart .cross{stroke:var(--navy);stroke-width:1;stroke-dasharray:3 3;opacity:.45}
.stchart .hit{cursor:crosshair}
.sttip{position:absolute;top:0;z-index:2;background:var(--navy);color:#fff;border-radius:8px;
  padding:.45rem .7rem;font-size:.82rem;line-height:1.35;pointer-events:none;white-space:nowrap;
  box-shadow:0 6px 18px rgba(30,38,86,.22)}
.sttip[hidden]{display:none}
.sttip b{display:block;font-size:.95rem;font-weight:800}
.sttip span{color:#C9D2EA}

/* 달별 흐름 보는 기준 고르기 */
.sttabs{display:flex;gap:.35rem;margin:-.4rem 0 1rem;flex-wrap:wrap}
.sttab{text-decoration:none;font-size:.85rem;font-weight:600;color:var(--navy);white-space:nowrap;
  border:1px solid var(--line);background:#fff;padding:.36rem .8rem;border-radius:999px}
.sttab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.sttab:hover{border-color:var(--navy)}

@media(max-width:820px){
  .sttiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stpair{grid-template-columns:minmax(0,1fr)}
  .stbars li{grid-template-columns:5.6rem 1fr auto;gap:.5rem}
  .stpct{display:none}
  .stcolv{display:none}
}
@media(max-width:520px){
  .stbars li{grid-template-columns:5rem 1fr auto}
  .stcols{gap:.2rem}
  .stcoll{font-size:.68rem;writing-mode:vertical-rl}
}

/* ── 급여 계산기 ──────────────────────────────── */
.calcnote{margin:0 0 1rem;font-size:.9rem;color:var(--muted);word-break:keep-all;line-height:1.7}
.calcnote strong{color:var(--navy)}
.calcbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.1rem,3.5vw,1.5rem);margin-bottom:1rem}
.calcbox h2{margin:0 0 .9rem;color:var(--navy);font-size:1.02rem;font-weight:800}
.calcbox h2.mt{margin-top:1.5rem}
.calcbox h2 .sub,.calcbox h3 .sub{margin-left:.45rem;font-size:.82rem;font-weight:600;color:var(--muted)}
.calcgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem 1rem}
.calcf{display:grid;gap:.35rem;min-width:0;align-content:end}  /* 이름표가 두 줄이 되어도 입력칸은 아래로 맞춘다 */
.calcf .lab{font-size:.82rem;font-weight:700;color:var(--navy)}
.calcf .lab i{font-style:normal;font-weight:600;color:var(--muted)}
.calcf select,.calcf input{width:100%;min-width:0;font:inherit;font-size:.92rem;height:var(--ctlh);padding:0 .7rem;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.calcf select:focus,.calcf input:focus{border-color:var(--navy);outline:none;
  box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.calcf .hint{margin:0;font-size:.8rem;color:var(--muted);line-height:1.6;word-break:keep-all;
  align-self:center}
.calcbox > .hint{margin:.9rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.7;word-break:keep-all}

/* 결과 — 화면에서 가장 먼저 눈에 들어야 하므로 남색 바탕에 올린다 */
.calcout{background:var(--navy);color:#fff;border-radius:var(--r);
  padding:clamp(1.2rem,4vw,1.6rem);margin-bottom:1rem}
.calcout .who{margin:0 0 1rem;font-size:.86rem;color:#C9D2EA;font-weight:600;word-break:keep-all}
.calcout .lines{margin:0;display:grid;gap:.1rem}
.calcout .lines div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.42rem 0;font-size:.92rem}
.calcout .lines dt{margin:0;color:#C9D2EA;word-break:keep-all}
.calcout .lines dt i{font-style:normal;font-size:.8rem;color:#98A3C6;margin-left:.3rem}
.calcout .lines dd{margin:0;font-weight:700;white-space:nowrap}
.calcout .total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin:.7rem 0;padding:.9rem 0;border-top:1px solid #3B4478;border-bottom:1px solid #3B4478}
.calcout .total span{font-weight:700}
.calcout .total strong{font-size:clamp(1.3rem,4.5vw,1.7rem);font-weight:800;color:var(--gold);
  white-space:nowrap;letter-spacing:-.01em}
.calcout .minw{margin:1rem 0 0;font-size:.83rem;color:#98A3C6;word-break:keep-all;line-height:1.7}
.calcout .minw.low{color:#FFD9A8;font-weight:600}
/* 승진 소요연한 상자는 .promote 로 옮겼다 (파일 끝). 여기 있던 .promo 규칙은 맨 아래 글쓴이 안내 띠(.promo)까지 2단으로 쪼개 놓아 지웠다 (2026-10-07) */


@media(max-width:900px){
  .calcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calcf-note{grid-column:1/-1}
  .calcf-note .lab{display:none}
}
@media(max-width:560px){
  .calcgrid{grid-template-columns:minmax(0,1fr)}
}

/* ── 모달 ──────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1.2rem;overflow-y:auto}
.modal[hidden]{display:none}
.modalbg{position:absolute;inset:0;background:rgba(24,30,58,.45)}
.modalbox{position:relative;width:100%;max-width:26rem;background:#fff;border-radius:var(--r);
  padding:clamp(1.3rem,4vw,1.8rem);box-shadow:0 18px 50px rgba(20,26,54,.28)}
.modalbox h2{margin:0 0 .5rem;color:var(--navy);font-size:1.12rem;font-weight:800}
.modalhint{margin:0 0 1.1rem;font-size:.88rem;color:var(--muted);line-height:1.65;word-break:keep-all}
.modalhint strong{color:var(--navy)}
.modalform{display:grid;gap:.9rem}
.modalform .formerr{margin:0}
.modalform select{width:100%;font:inherit;font-size:.95rem;height:var(--ctlh);padding:0 .7rem;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.modalform select:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.modalform select:disabled{background:#F1F3F8;color:var(--muted)}
.modalacts{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.3rem}
.modalacts .btn{cursor:pointer}
body.modalopen{overflow:hidden}

/* 공고 페이지 이동 */
.pager{display:flex;gap:.3rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap}
.pager a{min-width:2.2rem;text-align:center;padding:.45rem .6rem;border:1px solid var(--line);
  border-radius:8px;text-decoration:none;color:var(--navy);font-size:.9rem;font-weight:600;background:#fff}
.pager a:hover{background:var(--sky)}
.pager a.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* 내 지역 바로가기 */
/* 누를 수 있는 것은 버튼처럼 보이게 한다. 밑줄 친 글씨는 버튼인지 설명인지 구분이 안 된다 */
.myregion{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 1rem;font-size:.9rem}
.myregion .on{flex:none;display:inline-flex;align-items:center;min-height:var(--ctlh);
  background:var(--sky);color:var(--navy);font-weight:700;
  padding:0 1rem;border-radius:999px;word-break:keep-all}
.myregion .hint{color:var(--muted);word-break:keep-all;margin-right:.2rem}
.myregion .btn{cursor:pointer}

/* ── 카드 전체를 누를 수 있게 ───────────────────────────── */
.jobcard{list-style:none}
.jobhit{display:flex;gap:.9rem;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.05rem;text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.jobhit:hover{border-color:var(--navy);box-shadow:0 6px 18px rgba(30,38,86,.10)}
.jobhit:active{transform:translateY(1px)}
.jobhit .jobmain{flex:1;min-width:0;display:block}
.jobhit .o{display:block;font-size:.83rem;color:var(--muted);margin-bottom:.2rem}
.jobhit .t{display:block;font-size:1.04rem;font-weight:700;color:var(--navy);
  line-height:1.45;word-break:keep-all;margin-bottom:.45rem}
.jobhit:hover .t{text-decoration:underline}
.jobhit .jmeta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.82rem;color:var(--muted)}
.jobgo{flex:none;align-self:center;font-size:1.5rem;line-height:1;color:var(--line)}
.jobhit:hover .jobgo{color:var(--navy)}

.cardlink{padding:0;border:0;background:none}
.cardhit{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.1rem;text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s}
.cardhit:hover{border-color:var(--navy);box-shadow:0 6px 18px rgba(30,38,86,.10)}
.cardhit .ctit{display:block;margin:.5rem 0 .45rem;font-size:1.03rem;font-weight:700;
  color:var(--navy);line-height:1.45;word-break:keep-all}
.cardhit:hover .ctit{text-decoration:underline}
.cardhit .meta{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.82rem;color:var(--muted)}

/* ── 공고 상세 ──────────────────────────────────────────── */
/* .jvwrap 은 폭을 따로 두지 않는다 — 공고 상세도 목록과 같은 .wrap 폭을 쓴다 */

.jvtop{margin-bottom:1.4rem}
.jvtags{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}
.jvtop h1{margin:0 0 .5rem;color:var(--navy);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.3rem,4.4vw,1.85rem);line-height:1.38;word-break:keep-all}
.jvorg{margin:0;color:var(--ink);font-weight:600;font-size:.98rem}
.jvorg .sep{color:var(--line);margin:0 .35rem}

/* 한눈에 보는 세 가지 */
.jvkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:1.5rem}
/* 세 칸의 글자 규격은 하나다: 이름표 .8rem · 큰 값 1.2rem/800 · 보조 줄 .8rem. 칸마다 크기를 달리 주지 않는다 */
.jvkey{background:#fff;padding:.85rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}
.jvkey .row{display:flex;align-items:baseline;justify-content:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.jvkey .k{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3rem}
.jvkey .v{display:inline-block;font-size:1.15rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;
  line-height:1.35;word-break:keep-all}
.jvkey .v.hot{color:#B0452F}
.jvkey .v.pay{color:var(--green)}
@media(max-width:560px){
  .jvkeys{grid-template-columns:1fr}
  .jvkey{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:.8rem .95rem}
  .jvkey .k{margin:0}
}

/* 나머지 조건 */
.jvfacts{margin:0 0 1.8rem;background:var(--sky);border-radius:var(--r);
  padding:1.1rem 1.2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.1rem 1.2rem}
.jvfacts div{display:flex;gap:.8rem;padding:.4rem 0;font-size:.92rem}
.jvfacts dt{flex:none;width:4.4rem;margin:0;color:#5D6A94}
.jvfacts dd{margin:0;color:var(--navy);font-weight:600;word-break:keep-all}
/* 주소는 한 칸에 담기지 않아 두 줄로 접힌다 — 한 행을 통째로 줘서 한 줄로 떨어지게 한다 */
.jvfacts .wide{grid-column:1/-1}

/* 본문 */
.jvsec{margin-bottom:1.8rem}
.jvsec h2{margin:0 0 .7rem;color:var(--navy);font-size:1.08rem;font-weight:800;
  padding-left:.65rem;border-left:3px solid var(--gold)}
.jvbody{font-size:1rem;line-height:1.95;word-break:keep-all;color:var(--ink)}

.jvwarn{margin:0 0 1.8rem;padding:.85rem 1rem;background:#FFF9EC;border:1px solid #E6D6AE;
  border-radius:var(--r);font-size:.9rem;color:#7A5E1A;word-break:keep-all}

/* 지원하러 가기 */
.jvapply{background:var(--navy);border-radius:var(--r);padding:clamp(1.2rem,4vw,1.7rem);
  color:#fff;text-align:center;margin-bottom:1.2rem}
.jvapplytit{margin:0 0 .45rem;font-weight:800;font-size:1.05rem;color:#fff}
.jvapplytxt{margin:0 0 1.2rem;font-size:.9rem;color:#C9D2EA;line-height:1.7;word-break:keep-all}
.jvapply .btn{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.jvapply .btn::before{background:var(--navy)}

.jvnote{margin:1rem 0 0;font-size:.83rem;color:var(--muted);word-break:keep-all}
.jvnote a{color:var(--navy);font-weight:600}
/* 목록으로 돌아가는 링크는 어느 화면에서든 본문 맨 아래 가운데에 둔다 */
.jvback,.pageback{margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);text-align:center}

/* 좁은 화면 하단 바 */
.jvbar{display:none}
@media(max-width:700px){
  .jvbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    align-items:center;justify-content:space-between;gap:.8rem;
    background:#fff;border-top:1px solid var(--line);padding:.6rem .9rem;
    box-shadow:0 -4px 14px rgba(30,38,86,.10)}
  .jvbar span{font-size:.88rem;font-weight:700;color:var(--navy)}
  .cadl-foot{padding-bottom:5rem}
}

/* ── 내 정보 ────────────────────────────────────────────────
   설정 화면의 문법 하나로 통일한다 (GitHub Settings · Stripe Dashboard 식):
     · 맨 위 프로필 띠 — 누구인지, 나가는 문
     · 왼쪽 구역 탐색(넓은 화면) / 위쪽 알약 탐색(좁은 화면)
     · 카드 = 머리(제목·설명·오른쪽 동작) + 본문 + 바닥(저장·합계)
     · 정보 한 줄 = [이름표 | 값 | 동작] — 계정·내 지역·경력이 모두 같은 줄 리듬
   ─────────────────────────────────────────────────────────── */
.mepage{padding-top:clamp(1.6rem,4vw,2.4rem);padding-bottom:clamp(2.4rem,6vw,3.6rem)}  /* 좌우는 .wrap 여백을 그대로 — 축약형으로 덮으면 본문이 머리글보다 넓어진다 */

/* 프로필 띠 */
.meprof{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:clamp(1.4rem,3.5vw,2rem)}
.meava{flex:none;width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gold)}   /* 로고: 남색 요람 + 금색 테 */
.meid{min-width:0;flex:1 1 14rem}
.meid h1{margin:0;font-size:clamp(1.3rem,3.6vw,1.6rem);font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.25}
.meid p{margin:.2rem 0 0;font-size:.88rem;color:var(--muted);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;word-break:break-all}
.merole{display:inline-block;font-size:.72rem;font-weight:700;color:var(--navy);background:var(--sky);
  border-radius:999px;padding:.12rem .55rem;white-space:nowrap}
.merole.staff{background:#FFF3D6;color:#7A5E1A}
.meprof .inlinesub{margin-left:auto}
.logoutbtn{display:inline-flex;align-items:center;gap:.4rem;font:600 .82rem/1 var(--font);
  color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:.5rem .9rem;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.logoutbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.logoutbtn:hover{color:#8A2B2B;border-color:#E3B4B4;background:#FDF3F3}

/* 두 칸: 왼쪽 탐색 + 오른쪽 내용 */
.megrid{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:2rem;align-items:start}
.menav{position:sticky;top:5.2rem;display:grid;gap:.15rem}
.menav a{display:block;padding:.5rem .8rem;border-radius:8px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none}
.menav a:hover{background:var(--sky);color:var(--navy)}
.menav a.on{background:var(--sky);color:var(--navy);font-weight:800}
.menav a.danger{color:#8A2B2B}
.menav a.danger:hover{background:#FDF3F3}
.mecol{display:grid;gap:1.25rem;min-width:0}

/* 알림 */
.mecol .formok,.mecol .formerr,.mecol .setupnote{margin:0}

/* 카드 */
.mecard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;scroll-margin-top:5.2rem}
.mecard-h{display:flex;align-items:center;gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.mecard-h h2{margin:0;font-size:1rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.mecard-h p{margin:.15rem 0 0;font-size:.84rem;color:var(--muted);word-break:keep-all;line-height:1.5}
.mecard-h > div{min-width:0;flex:1}
.mecard-h .act{flex:none;margin-left:auto}
.mecard-b{padding:.25rem 1.4rem}
.mecard-b.pad{padding:1.1rem 1.4rem}
.mecard-f{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.85rem 1.4rem;
  background:var(--paper);border-top:1px solid var(--line)}
.mecard-f .act{margin-left:auto;display:flex;gap:.5rem}
.mecard-f .note{margin:0;font-size:.8rem;color:var(--muted);line-height:1.6;word-break:keep-all}
.mecard-f .note strong{color:var(--navy)}
.mecard.danger{border-color:#F0CFCF}
.mecard.danger .mecard-h{border-bottom-color:#F6DEDE}
.mecard.danger .mecard-h h2{color:#8A2B2B}

/* 정보 한 줄 — [이름표 | 값 | 동작] */
.merow{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;align-items:center;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.merow:last-child{border-bottom:0}
.merow dt,.merow .k{margin:0;color:var(--muted);font-size:.86rem;font-weight:600}
.merow dd,.merow .v{margin:0;color:var(--navy);font-weight:600;min-width:0;word-break:break-all;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.merow .unset{color:var(--muted);font-weight:500}
.merow .act{display:flex;gap:.4rem;justify-self:end}
dl.merows{margin:0}

/* 경력 줄 — 같은 리듬, 값 자리에 기관·기간 */
.crlist{list-style:none;margin:0;padding:0}
.crlist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1rem;
  padding:.85rem 0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
.crlist li:last-child{border-bottom:0}
.crmain{min-width:0}
.crmain b{display:block;font-size:.95rem;color:var(--navy);font-weight:700;margin-bottom:.2rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crmeta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.crkind{flex:none;font-size:.72rem;font-weight:700;color:var(--navy);background:var(--sky);
  border-radius:999px;padding:.12rem .5rem;white-space:nowrap}
.crrole{color:var(--ink)}
.crpos{color:var(--navy);font-weight:600}
.crspan{font-variant-numeric:tabular-nums}
.crmon{text-align:right;white-space:nowrap}
.crmon b{display:block;font-size:.9rem;color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums}
.crmon i{font-style:normal;font-size:.76rem;color:var(--muted)}
.cracts{display:flex;align-items:center;gap:.1rem}
.credit,.crdel button{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;background:none;border-radius:8px;color:var(--muted);cursor:pointer;text-decoration:none}
.credit svg,.crdel button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.credit:hover{background:var(--sky);color:var(--navy)}
.crdel{margin:0}
.crdel button:hover{background:#FDECEC;color:#8A2B2B}
.crsum{margin:0;font-size:.9rem;color:var(--navy);font-weight:600;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.crsum b{font-weight:800}
.crsum .step{font-size:1.05rem;font-weight:800;color:var(--navy)}
.crsum .step em{font-style:normal;font-size:.8rem;font-weight:700;color:var(--muted);margin-left:.1rem}
.crwarn{margin:0;padding:.7rem 1.4rem;background:#FFF9EC;border:0;border-top:1px solid #E6D6AE;border-radius:0;
  font-size:.84rem;color:#7A5E1A;line-height:1.7;word-break:keep-all}
.crwarn strong{font-weight:800}
.crempty{margin:0;padding:1.4rem 0;font-size:.9rem;color:var(--muted);text-align:center}

/* 급여 계산 조건 — 카드 본문 안의 폼 구역 */
.salform{margin:0}
.salsec{padding:1.1rem 0;border-top:1px solid var(--line)}
.salsec:first-of-type{border-top:0}  /* 앞에 숨은 input 이 있어도 첫 구역이면 선을 긋지 않는다 */
.salh{margin:0 0 .8rem;font-size:.88rem;font-weight:800;color:var(--navy)}
.salh .sub{margin-left:.4rem;font-size:.78rem;font-weight:600;color:var(--muted)}
.mecard .calcgrid{gap:.9rem 1rem}
.mecard .calcf .lab{font-size:.8rem}
.mecard .calcf select,.mecard .calcf input{height:40px;font-size:.9rem}
.mecard .calcf .hint{font-size:.78rem}

/* 결과 — 내 호봉과 금액 */
.salme{background:var(--navy);color:#fff;border-radius:10px;padding:clamp(1.1rem,3.5vw,1.4rem);margin:0}
.salme .who{margin:0 0 .8rem;font-size:.84rem;color:#C9D2EA;font-weight:600;word-break:keep-all}
.salneed{margin:0;padding:1.4rem 0;text-align:center;font-size:.9rem;color:var(--muted)}
.salneed a{color:var(--navy);font-weight:700}

/* 내가 쓴 이야기 — 카드 안에서는 줄로 */
.melist{list-style:none;margin:0;padding:0}
.melist li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.melist li:last-child{border-bottom:0}
.melist h3{margin:.2rem 0 .25rem;font-size:.95rem;font-weight:700;line-height:1.4}
.melist h3 a{color:var(--navy);text-decoration:none}
.melist h3 a:hover{text-decoration:underline}
.melist .meta{font-size:.8rem}
.melist .tag{font-size:.7rem;padding:.1rem .5rem}

/* 탈퇴 */
.mewd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center}
.mewd p{margin:0;font-size:.88rem;color:var(--ink);line-height:1.7;word-break:keep-all}
.mewd form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.mewd input{font:inherit;font-size:.9rem;height:36px;padding:0 .75rem;width:11rem;
  border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.mewd input:focus{border-color:#8A2B2B;outline:none;box-shadow:0 0 0 3px rgba(138,43,43,.12)}

@media(max-width:900px){
  .megrid{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .menav{position:static;display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.2rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .menav::-webkit-scrollbar{display:none}
  .menav a{flex:none;font-size:.84rem;padding:.4rem .75rem;border:1px solid var(--line);border-radius:999px;background:#fff}
  .menav a.on{border-color:var(--navy)}
}
@media(max-width:600px){
  .mecard-h,.mecard-f{padding-left:1.1rem;padding-right:1.1rem}
  .mecard-b{padding-left:1.1rem;padding-right:1.1rem}
  .crwarn{padding-left:1.1rem;padding-right:1.1rem}
  .merow{grid-template-columns:5.5rem minmax(0,1fr) auto;gap:.7rem}
  .crlist li{grid-template-columns:minmax(0,1fr) auto;row-gap:.3rem}
  .crlist .cracts{grid-column:2;grid-row:1}
  .crlist .crmon{grid-column:1/-1;text-align:left;display:flex;gap:.5rem;align-items:baseline}
  .mewd{grid-template-columns:minmax(0,1fr)}
  .mewd input{flex:1;width:auto;min-width:9rem}
}

.calcf-note{grid-column:span 2}
.calcbox .calcf-wide,.salgrid .calcf-wide{grid-column:1/-1}
.calcbox .calcf-note.wide3{grid-column:span 3}
.calcf-note.wide{grid-column:span 3}
@media(max-width:900px){.calcf-note{grid-column:1/-1}}

/* ── 카드형 모달 — 내 정보 카드와 같은 문법: 머리(제목·설명) / 본문 / 바닥(단추) ── */
.modalbox.card{padding:0;overflow:hidden;border-radius:12px;max-width:30rem;margin:auto}
.modalbox.card.wide{max-width:46rem}
.modalhead{padding:1.1rem 1.5rem;border-bottom:1px solid var(--line)}
.modalhead h2{margin:0;font-size:1rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.modalhead p{margin:.25rem 0 0;font-size:.84rem;color:var(--muted);line-height:1.55;word-break:keep-all}
.modalbody{padding:1.25rem 1.5rem;display:grid;gap:1.1rem}
.modalbody .formerr{margin:0}
.modalbody .hint{margin:0;font-size:.8rem;color:var(--muted);line-height:1.7;word-break:keep-all}
.modalfoot{display:flex;gap:.5rem;justify-content:flex-end;padding:.85rem 1.5rem;background:var(--paper);border-top:1px solid var(--line)}
.modalfoot .btn{min-width:6rem}
.modalbox.card .modalform{display:block}
.modalbody .calcgrid{gap:1rem 1.1rem}
.modalbody .calcgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.modalbody .calcf.full{grid-column:1/-1}
.modalbody .calcf .lab{font-size:.8rem}
.modalbody .calcf select,.modalbody .calcf input{height:42px}
.modalbody .calcf .lab i{font-weight:500}
@media(max-width:600px){
  .modalhead,.modalbody,.modalfoot{padding-left:1.1rem;padding-right:1.1rem}
  .modalbody .calcgrid.two{grid-template-columns:minmax(0,1fr)}
  .modalfoot .btn{flex:1}
}

/* ── 시설분야 여러 개 고르기 (Select2 multiple) ─────────────
   다른 상자(높이 --ctlh)와 같은 테두리·높이로 맞춘다. 고른 분야는 알약으로 상자 안에 남는다. */
.jobfilter .jflab .jfsub{font-style:normal;font-weight:500;color:var(--muted);margin-left:.4rem}
.jobfilter .jffield .select2-container--default .select2-selection--multiple{
  display:flex;align-items:center;min-height:var(--ctlh);border:1px solid var(--line);border-radius:8px;background:var(--paper);
  padding:.25rem .6rem;cursor:pointer;line-height:normal;height:auto}
.jobfilter .jffield .select2-container--default.select2-container--focus .select2-selection--multiple,
.jobfilter .jffield .select2-container--default.select2-container--open .select2-selection--multiple{
  border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.jobfilter .jffield .select2-selection--multiple .select2-selection__rendered{
  display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;padding:0;margin:0;width:auto;flex:0 1 auto;list-style:none}
/* 비어 있을 때 입력칸(안내문)이 오른쪽으로 밀리지 않게 — 목록(ul)은 내용만큼, 입력칸이 남은 폭을 차지한다 */
.jobfilter .jffield .select2-selection--multiple{flex-wrap:wrap;gap:.3rem}
.jobfilter .jffield .select2-selection--multiple .select2-selection__choice{
  margin:0;border:0;border-radius:999px;background:var(--sky);color:var(--navy);
  font:600 .84rem/1 var(--font);padding:.38rem .7rem .38rem .55rem;display:inline-flex;align-items:center;gap:.3rem}
/* Select2 기본 CSS 가 × 를 절대 위치(왼쪽 위)로 놓는다 — 더 구체적인 선택자로 덮어 글자 오른쪽에 나란히 둔다 */
.jobfilter .jffield .select2-container--default .select2-selection--multiple .select2-selection__choice{position:relative;padding-left:.7rem}
.jobfilter .jffield .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  position:static;border:0;background:none;color:var(--navy);font-size:1.05rem;line-height:1;padding:0;order:2;cursor:pointer;margin:0 0 0 .1rem}
.jobfilter .jffield .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{background:none;color:#8A2B2B}
.jobfilter .jffield .select2-selection__choice__remove:hover{background:none;color:#8A2B2B}
.jobfilter .jffield .select2-selection__choice__display{padding:0}
.jobfilter .jffield .select2-search--inline{margin:0;display:flex;align-items:center;flex:1 1 8rem;min-width:6rem}
/* Select2 4.1 은 여기에 textarea 를 쓴다 — 두 줄로 부풀지 않게 한 줄 높이로 못 박는다 */
.jobfilter .jffield .select2-search--inline .select2-search__field{
  margin:0;padding:0;font:inherit;font-size:.95rem;line-height:1.6rem;height:1.6rem;min-height:0;max-height:1.6rem;resize:none;overflow:hidden;
  width:100%!important;min-width:6rem;color:var(--ink);background:transparent;text-align:left;vertical-align:middle}
.jobfilter .jffield .select2-search__field::placeholder{color:var(--muted);opacity:1}
.jobfilter .jffield .select2-selection__clear{order:3;margin:0 0 0 auto;color:var(--muted);font-size:1.25rem;font-weight:400;line-height:1;padding:0 .2rem;cursor:pointer;height:auto}
/* 목록은 체크박스처럼 — 고른 항목에 표시가 남는다 */
.s2multi-drop .select2-results__option{position:relative;padding:.55rem .8rem .55rem 2.3rem;font-size:.92rem;color:var(--ink)}
.s2multi-drop .select2-results__option::before{content:"";position:absolute;left:.8rem;top:50%;width:17px;height:17px;margin-top:-8.5px;
  border:1.5px solid #B7C0D8;border-radius:4px;background:#fff}
.s2multi-drop .select2-results__option[aria-selected=true]{background:transparent;color:var(--navy);font-weight:700}
.s2multi-drop .select2-results__option[aria-selected=true]::before{background:var(--navy);border-color:var(--navy);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>");
  background-size:12px;background-repeat:no-repeat;background-position:center}
.s2multi-drop .select2-results__option--highlighted[aria-selected]{background:var(--sky);color:var(--navy)}
.s2multi-drop .select2-results__option[aria-disabled=true]{color:var(--muted);opacity:.6}
.s2multi-drop .select2-results__option[aria-disabled=true]::before{border-style:dashed}

/* ── 처우·소식 ─────────────────────────────────────────────── */
.newskinds{margin:0 0 1rem}
.newslist{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.newsitem{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem}
.newshead{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.newshead time{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.newstit{margin:0 0 .5rem;font-size:1.05rem;font-weight:800;color:var(--navy);line-height:1.45;word-break:keep-all;letter-spacing:-.01em}
.newssum{margin:0;font-size:.92rem;color:var(--ink);line-height:1.75;word-break:keep-all}
.newssrc{margin:.7rem 0 0;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.newssrc a{color:var(--navy);font-weight:700;text-decoration:none}
.newssrc a:hover{text-decoration:underline}
.newssrc .host{color:var(--muted);font-weight:400}
.newsnote{margin:1.2rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.7;word-break:keep-all}

/* ── 일자리 분석: 시·도 지도 ─────────────────────────────── */
.stmap{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:1.2rem;align-items:start}
.stmapbox{position:relative;max-width:420px;margin:0 auto;width:100%}
.stmapbox svg{width:100%;height:auto;display:block;overflow:visible}
.stmapa{cursor:pointer;outline:none}
.stmapa path{stroke:#fff;stroke-width:1.4;stroke-linejoin:round;transition:filter .12s}
.stmapa:hover path,.stmapa:focus-visible path{stroke:var(--navy);stroke-width:2;filter:brightness(.93)}
.stmaplab{font:700 11px/1 var(--font);fill:var(--navy);text-anchor:middle;dominant-baseline:middle;pointer-events:none;
  paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:2.5px}
.stmaplab.light{fill:#fff;stroke:rgba(30,38,86,.5)}
.stmapbox .sttip{position:absolute;top:0;left:0;pointer-events:none;z-index:2}
.stmaplegend{display:flex;align-items:center;gap:.25rem;justify-content:center;margin-top:.6rem;font-size:.76rem;color:var(--muted)}
.stmaplegend i{display:block;width:26px;height:10px;border-radius:2px}
.stmaplegend span{margin:0 .25rem}
.stmaplist .stbars li.on{background:var(--sky)}
@media(max-width:760px){
  .stmap{grid-template-columns:minmax(0,1fr)}
  .stmapbox{max-width:360px}
}

/* 공고 급여칸 — 글귀만 있을 때 가이드라인 기본급 힌트 */
.salhint{display:block;margin:.55rem 0 .2rem;font-size:.8rem;color:var(--muted);line-height:1.6;word-break:keep-all}
.salhint b{display:block;color:var(--navy);font-weight:800;font-size:.95rem;margin:.15rem 0}
.salhint i{font-style:normal;font-size:.76rem}

/* 공고 세 칸 — 큰 값 아래 작은 보조 줄. 세 칸의 정보량을 비슷하게 맞춘다 */
.jvkey .jvsub{display:inline;font-size:.8rem;color:var(--muted);line-height:1.5;word-break:keep-all}
.jvkey .sallink{font:600 .8rem/1.4 var(--font);color:var(--navy);background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid rgba(30,38,86,.35);white-space:nowrap}
.jvkey .sallink:hover{border-bottom-color:var(--navy)}
.jvkey .jvsub.hot{color:#B0452F;font-weight:700}
.jvkey .jvsub.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.jvkey .v.long{font-size:.92rem;line-height:1.45}
.jvkey .salbtn{margin-top:.5rem}

/* 드롭다운 고른 값이 상자를 넘지 않게 — 긴 이름은 말줄임 */
.modalform .select2-container--default .select2-selection--single .select2-selection__rendered,
.salgrid .select2-container--default .select2-selection--single .select2-selection__rendered,
.crform .select2-container--default .select2-selection--single .select2-selection__rendered,
.calcbox .select2-container--default .select2-selection--single .select2-selection__rendered{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:1.8rem}
/* 언제까지 — 남은 날을 크게 */
.jvkey .v.big{font-size:1.2rem}
.jvkey .v.big.calm{color:var(--navy)}
.jvfacts .wide{grid-column:1/-1}

/* ── 시설 구분별 가이드라인 표 ───────────────────────────── */
.glnav{margin:0 0 1.1rem}
.glcard{margin-bottom:1rem}
.glfacs{margin:0 0 .9rem;font-size:.86rem;color:var(--ink);line-height:1.7;word-break:keep-all}
.glfacs b{color:var(--navy);margin-right:.35rem}
.gltable{overflow-x:auto;border:1px solid var(--line);border-radius:8px;-webkit-overflow-scrolling:touch}
.gltable table{border-collapse:separate;border-spacing:0;width:100%;min-width:560px;font-size:.86rem;font-variant-numeric:tabular-nums}
.gltable th,.gltable td{padding:.45rem .6rem;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.gltable thead th{background:var(--sky);color:var(--navy);font-weight:700;text-align:center;position:sticky;top:0;z-index:1}
.gltable thead th.jobhead{font-size:.8rem;border-bottom:1px solid #C9D2EA}
.gltable th.step{position:sticky;left:0;background:var(--paper);color:var(--navy);text-align:center;font-weight:700;z-index:2;min-width:3.4rem}
.gltable thead th.step{background:var(--sky);z-index:3}
.gltable tbody tr:nth-child(5n) td,.gltable tbody tr:nth-child(5n) th{border-bottom-color:#B7C0D8}  /* 5호봉마다 눈금 */
.gltable tbody tr:hover td{background:#F4F6FB}
.gltable td .none{color:var(--muted)}
.gldl{margin:0;display:grid;gap:.5rem}
.gldl div{display:flex;gap:.8rem;font-size:.9rem;line-height:1.7}
.gldl dt{flex:none;width:6rem;margin:0;color:var(--muted);font-weight:600}
.gldl dd{margin:0;color:var(--ink);word-break:keep-all}
.glcta{margin:1.2rem 0 0;text-align:center}
@media(max-width:560px){.gldl div{flex-direction:column;gap:.1rem}}
.calcbox h2 .gllink{float:right;font-size:.82rem;font-weight:700;color:var(--navy);text-decoration:none}
.calcbox h2 .gllink:hover{text-decoration:underline}
/* 가이드라인 탭 — 스크립트가 있을 때만 한 묶음씩 보인다 */
.gl-js .glpanel{display:none}
.gl-js .glpanel.on{display:block}
.gltabs{margin:0 0 1rem;scroll-margin-top:5.4rem}
/* 글쓰기 — 글 틀 고르기 */
.wtpl{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:0 0 .6rem}
.wtpl-k{font-size:.82rem;color:var(--muted);margin-right:.2rem}
.wtpl .chip{font-size:.82rem;padding:.3rem .7rem;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--navy);font-weight:600}
.wtpl .chip.on{background:var(--sky);border-color:var(--sky)}
/* 분석 — 세로 막대 SVG */
.stcolchart svg{width:100%;height:auto;display:block}
.stcolchart .grid{stroke:var(--line);stroke-width:1}
.stcolchart .ytick{font:600 11px var(--font);fill:var(--muted);text-anchor:end}
.stcolchart .xtick{font:600 11px var(--font);fill:var(--muted);text-anchor:middle}
.stcolchart .bar{fill:var(--navy);transition:fill .12s}
.stcolchart .bar.on{fill:#3B4A8C}
.stcolchart .bval{font:700 11px var(--font);fill:var(--navy);text-anchor:middle}

/* ── 블로그 (blog.php) ───────────────────────────────────── */
/* 메뉴가 여섯 개가 되어 821~920px 에서 헤더가 빠듯하다 — 간격만 줄인다 */
@media(min-width:821px) and (max-width:920px){.mainnav{gap:1rem;font-size:.92rem}}
.blogview .tag{text-decoration:none;margin-right:.25rem}
.blogsum{margin:1rem 0 0;padding:.85rem 1rem;background:var(--sky);border-radius:var(--r);
  color:var(--navy);font-weight:600;line-height:1.7;word-break:keep-all}
.blogbody{line-height:1.85;word-break:keep-all}
.blogbody p{margin:0 0 1.05rem}
.blogbody h2{margin:2rem 0 .8rem;color:var(--navy);font-size:1.22rem;font-weight:800;letter-spacing:-.01em}
.blogbody h3{margin:1.5rem 0 .6rem;color:var(--navy);font-size:1.05rem;font-weight:700}
.blogbody ul,.blogbody ol{margin:0 0 1.05rem;padding-left:1.3rem}
.blogbody li{margin:.25rem 0}
.blogbody blockquote{margin:0 0 1.05rem;padding:.7rem 1rem;border-left:3px solid var(--navy);
  background:var(--paper);color:var(--ink)}
.blogbody hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
.blogbody a{color:var(--navy);font-weight:600;word-break:break-all}
.blogex{display:block;margin:0 0 .5rem;color:var(--ink);font-size:.92rem;line-height:1.6;word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.byauthor{font-size:.72rem;font-weight:700;color:var(--navy);background:var(--sky);border-radius:999px;padding:.1rem .45rem}
.writeform label .opt{font-style:normal;font-weight:400;font-size:.8rem;color:var(--muted);margin-left:.3rem}
.fmthelp{font-size:.86rem;color:var(--muted)}
.fmthelp summary{cursor:pointer;color:var(--navy);font-weight:600}
.fmthelp ul{margin:.4rem 0 0;padding-left:1.2rem}
.fmthelp code{background:var(--sky);color:var(--navy);border-radius:4px;padding:.05rem .3rem;font-size:.82rem}
/* 블로그 이미지 — 본문 그림 · 목록 썸네일 · 글쓰기 도구 */
.blogbody figure{margin:1.4rem 0}
.blogbody figure img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:var(--r);border:1px solid var(--line)}
.blogbody figcaption{margin-top:.5rem;text-align:center;font-size:.84rem;color:var(--muted)}
.cardhit.hasthumb{display:flow-root}  /* 썸네일을 오른쪽에 띄우고 카드가 그 높이를 감싸게 */
.blogthumb{float:right;width:132px;height:88px;margin:0 0 .4rem 1rem;object-fit:cover;border-radius:8px}
@media(max-width:520px){.blogthumb{width:88px;height:66px}}
.imgbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.2rem 0 .3rem}
.imgbar label.btn{margin:0;cursor:pointer;font-weight:600}
.imgmsg{font-size:.82rem;color:var(--muted)}
.imgmsg.bad{color:#B42318;font-weight:600}
.imgbar .opt,.aipanel .opt{font-style:normal;font-size:.74rem;color:var(--muted);margin-left:.2rem}
#body.drop{outline:2px dashed var(--navy);outline-offset:2px;background:var(--sky)}
.aipanel{display:grid;gap:.45rem;padding:1rem;margin-bottom:.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.aipanel label{margin-top:0}
.aipanel.busy{opacity:.7}
.airow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.airow select{width:auto}
.airow label.btn{margin:0;cursor:pointer;font-weight:600}
.airefn{font-size:.8rem;color:var(--muted)}
.aiout{display:grid;gap:.5rem}
.aiout img{max-width:100%;border-radius:var(--r);border:1px solid var(--line)}
/* ── 운영 관리 (manage.php) ─────────────────────────────── */
.mgrlink{flex:none;font-size:.86rem;font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap;
  padding:.42rem .2rem;border-bottom:2px solid transparent}
.mgrlink:hover,.mgrlink[aria-current]{border-bottom-color:var(--gold)}
@media(max-width:820px){.mgrlink{display:none}}   /* 좁은 화면에서는 서랍 메뉴에 있다 */
.mgtabs{margin-bottom:1.2rem}
.mgok{margin:0 0 1rem;padding:.7rem .9rem;background:#EAF6EF;border:1px solid #BFE3CD;border-radius:var(--r);color:var(--green);font-weight:600}
.mgcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1rem,3vw,1.4rem);margin-bottom:1.2rem}
.mgcard h2,.mgform h2{margin:0 0 .6rem;color:var(--navy);font-size:1.05rem;font-weight:800}
.mgform h2{margin-top:1.4rem}
.mgform h2:first-of-type{margin-top:0}
.mgdl{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1rem;margin:0 0 1rem;font-size:.9rem}
.mgdl dt{color:var(--muted)}
.mgdl dd{margin:0;word-break:keep-all}
.mgdl b.on{color:var(--green)}
.mgdl b.off,.mgcard b.off{color:#B42318}
@media(max-width:520px){.mgdl{grid-template-columns:1fr}.mgdl dd{margin-bottom:.4rem}}
.mginline{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.mgcard .opt,.mgform .opt{font-style:normal;font-weight:400;font-size:.8rem;color:var(--muted)}
.mgkey{border:1px solid var(--line);border-radius:var(--r);padding:.4rem 1rem 1rem;margin:.9rem 0 0;display:grid;gap:.35rem}
.mgkey legend{font-size:.88rem;font-weight:700;color:var(--navy);padding:0 .3rem}
.mgkey[disabled]{opacity:.6}
.mgrow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mgrow > div{display:grid;gap:.35rem}
@media(max-width:520px){.mgrow{grid-template-columns:1fr}}
.mgstats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1rem}
.mgstats div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem}
.mgstats b{display:block;color:var(--navy);font-size:1.5rem;font-weight:800}
.mgstats span{font-size:.82rem;color:var(--muted)}
@media(max-width:620px){.mgstats{grid-template-columns:1fr 1fr}}
.mggrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.mggrid li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.5rem;display:grid;gap:.35rem}
.mggrid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.mggrid .tag{justify-self:start}
.mgline{display:flex;gap:1rem;align-items:center;justify-content:space-between}
.mgline > div{min-width:0}

/* ── 블로그 이미지 v3 — 정렬·크기 · 사진 모음 ─────────────────
   본문 서식 ![설명](주소){왼쪽 중간} 이 figure.bimg.al-left.sz-m 가 된다 (app/cadl_blog.php cadl_blog_figure) */
.blogbody{display:flow-root}                                   /* 옆으로 띄운 그림이 글 밖으로 새지 않게 */
.blogbody h2,.blogbody h3,.blogbody hr,.blogbody .bgallery{clear:both}
.blogbody figure.bimg{margin:1.4rem auto;max-width:100%}
.blogbody figure.bimg img{width:100%;max-width:100%}
.blogbody figure.al-center{margin-left:auto;margin-right:auto}
.blogbody figure.al-center:not([class*="sz-"]) img{width:auto}  /* 크기를 안 고르면 원래 크기 (칸을 넘으면 줄인다) */
.blogbody figure.al-full{width:100%}
.blogbody figure.sz-s{width:35%}
.blogbody figure.sz-m{width:55%}
.blogbody figure.sz-l{width:80%}
.blogbody figure.al-left{float:left;margin:.3rem 1.4rem 1rem 0}
.blogbody figure.al-right{float:right;margin:.3rem 0 1rem 1.4rem}
.blogbody figure.al-left:not([class*="sz-"]),.blogbody figure.al-right:not([class*="sz-"]){width:50%}
@media(max-width:560px){                                        /* 휴대폰에서는 옆 흐름 없이 위아래로 */
  .blogbody figure.al-left,.blogbody figure.al-right{float:none;margin:1.2rem auto}
  .blogbody figure.sz-s{width:60%}
  .blogbody figure.sz-m,.blogbody figure.sz-l,.blogbody figure.al-left,.blogbody figure.al-right{width:100%}
}
.blogbody .bgallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.4rem 0}
.blogbody .bgallery.cols-3{grid-template-columns:repeat(3,1fr)}
.blogbody .bgallery.cols-4{grid-template-columns:repeat(4,1fr)}
.blogbody .bgallery figure{margin:0}
.blogbody .bgallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.blogbody .bgallery figcaption{font-size:.78rem}
@media(max-width:560px){.blogbody .bgallery.cols-3,.blogbody .bgallery.cols-4{grid-template-columns:repeat(2,1fr)}}

/* 글쓰기 도구줄 · 미리보기 */
.edbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.2rem 0 .35rem}
.edbar .btn{cursor:pointer}
.bpreview{min-height:12rem;padding:1rem 1.1rem;background:#fff;border:1px dashed var(--line);border-radius:var(--r)}
.bpreview[hidden]{display:none}

/* 본문 속 사진 */
.imgdock{margin-top:.6rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:.8rem}
.imgdock[hidden]{display:none}
.imgdock-h{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;margin-bottom:.6rem}
.imgdock-h b{color:var(--navy);font-size:.92rem}
.imgdock-h span{font-size:.8rem;color:var(--muted)}
.imgdock-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.imgdock-list li{display:grid;grid-template-columns:auto 84px 1fr auto;gap:.7rem;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:.55rem .65rem}
.imgdock-list li > img{width:84px;height:60px;object-fit:cover;border-radius:6px}
.imgdock-list .dk-gthumbs{display:grid;grid-template-columns:repeat(2,40px);gap:2px;width:84px}
.imgdock-list .dk-gthumbs img{width:40px;height:29px;object-fit:cover;border-radius:3px}
.imgdock-list .dk-gthumbs img:nth-child(n+5){display:none}
.dk-move{display:grid;gap:2px}
.dk-move button{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:5px;width:28px;height:22px;
  font-size:.62rem;cursor:pointer;line-height:1}
.dk-move button:disabled{opacity:.3;cursor:default}
.dk-body{display:grid;gap:.35rem;min-width:0}
.dk-body b{color:var(--navy);font-size:.88rem}
.dk-cap{width:100%;font:inherit;font-size:.85rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px}
.dk-seg{display:flex;flex-wrap:wrap;gap:3px}
.dk-seg[hidden]{display:none}
.dk-seg button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:.22rem .6rem;
  font:600 .76rem/1.2 var(--font);cursor:pointer}
.dk-seg button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.dk-del{border:0;background:none;color:var(--muted);font:600 .78rem var(--font);cursor:pointer;padding:.3rem .4rem;border-radius:6px}
.dk-del:hover{background:#FDECEC;color:#B42318}
@media(max-width:560px){
  .imgdock-list li{grid-template-columns:auto 64px 1fr}
  .imgdock-list li > img{width:64px;height:48px}
  .dk-del{grid-column:2 / -1;justify-self:end}
}

/* 사진 넣기 창 — N:\blog 편집기의 '사진 자리' 네 갈래 타일과 같은 모양 */
.picker{width:min(760px,calc(100vw - 2rem));max-height:calc(100vh - 3rem);border:0;border-radius:14px;padding:0;
  box-shadow:0 20px 60px rgba(30,38,86,.28);color:var(--ink)}
.picker::backdrop{background:rgba(20,24,48,.45)}
.picker.busy{cursor:progress}
.pk-head{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.pk-head b{color:var(--navy);font-size:1.02rem}
.pk-back,.pk-x{border:0;background:none;cursor:pointer;color:var(--muted);font:600 .86rem var(--font);border-radius:7px;padding:.3rem .55rem}
.pk-back:hover,.pk-x:hover{background:var(--sky);color:var(--navy)}
.pk-back[hidden]{display:none}
.pk-x{margin-left:auto}
.pk-view{padding:1rem 1.1rem;display:grid;gap:.6rem}
.pk-view[hidden]{display:none}
.pk-sub{margin:0;font-size:.88rem;color:var(--muted)}
.pk-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.pk-tiles.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.pk-tiles{grid-template-columns:repeat(2,1fr)}}
.pk-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:92px;padding:.8rem .5rem;
  background:#F4F7FF;border:1px solid #D7E0F8;border-radius:11px;cursor:pointer;text-align:center;font-family:inherit;color:var(--navy);
  transition:.14s;margin:0}
.pk-tile:hover{border-color:var(--navy);background:var(--sky);transform:translateY(-1px)}
.pk-tile b{font-size:.92rem;font-weight:800}
.pk-tile span{font-size:.76rem;color:var(--muted);font-weight:400}
.pk-tools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}
.pk-tools .chip{cursor:pointer;font-family:inherit}
.pk-hint{font-size:.8rem;color:var(--muted)}
.pk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.5rem;
  max-height:52vh;overflow:auto}
.pk-grid li{display:grid;gap:.2rem;align-content:start}
.pk-grid button{position:relative;padding:0;border:2px solid transparent;border-radius:9px;background:none;cursor:pointer;overflow:hidden}
.pk-grid button:hover{border-color:var(--sky)}
.pk-grid li.sel button{border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,38,86,.15)}
.pk-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.pk-no{position:absolute;top:5px;left:5px;min-width:1.4rem;height:1.4rem;border-radius:999px;background:var(--navy);color:#fff;
  font:700 .76rem/1.4rem var(--font);font-style:normal;text-align:center}
.pk-no:empty{display:none}
.pk-cap{font-size:.7rem;color:var(--muted);line-height:1.35}
.pk-cap b{color:var(--navy);font-weight:600}
.pk-more{text-align:center}
.pk-foot{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:flex-end;padding-top:.6rem;border-top:1px solid var(--line);
  position:sticky;bottom:0;background:#fff}
.pk-foot[hidden]{display:none}
.pk-foot select,.pk-cols select{width:auto;font:inherit;padding:.3rem .4rem;border:1px solid var(--line);border-radius:6px}
.pk-cols{font-size:.86rem;color:var(--ink)}
.pk-view textarea{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;resize:vertical}
.pk-view label[for]{font-size:.88rem;font-weight:700;color:var(--navy)}
.pk-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.pk-row .chk{margin-top:0}
.pk-row label.btn{cursor:pointer;margin:0}
.pk-cands{display:grid;gap:.5rem;padding-top:.6rem;border-top:1px solid var(--line)}
.pk-cands[hidden]{display:none}
.pk-thumbs{display:flex;flex-wrap:wrap;gap:.45rem}
.pk-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:2.5px solid var(--line);cursor:pointer}
.pk-thumbs img.sel{border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,38,86,.15)}
.pk-big{display:block;width:100%;max-height:300px;object-fit:contain;background:var(--paper);border-radius:10px;border:1px solid var(--line)}
.pk-msg{margin:0;padding:0 1.1rem 1rem;font-size:.84rem;color:var(--muted)}
.pk-msg:empty{display:none}
.pk-msg.bad{color:#B42318;font-weight:600}

/* 내 이미지함 (blog_images.php) */
.imgbulk{margin:0 0 1rem;padding:.6rem .9rem;background:#FFF9EC;border:1px solid #F0D9A8;border-radius:var(--r);font-size:.88rem}
.imglib{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.imglib li{display:grid;gap:.4rem;align-content:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.55rem}
.imglib li.unused{border-style:dashed}
.il-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px}
.il-meta{display:flex;flex-wrap:wrap;gap:.25rem .55rem;align-items:center;font-size:.76rem;color:var(--muted)}
.il-used{font-size:.78rem;color:var(--ink);line-height:1.5;word-break:keep-all}
.il-used a{color:var(--navy);font-weight:600}
.il-used i{color:var(--muted);font-style:normal}
.il-used.none{color:var(--muted)}
.il-act{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:space-between}
.il-act .opt{font-size:.74rem;color:var(--muted)}
.il-del:hover{border-color:#B42318;color:#B42318}

/* 운영 관리 v3 */
.mgnote{margin:.2rem 0 .6rem;font-size:.84rem;color:var(--muted);line-height:1.65;word-break:keep-all}
.mgnote b{color:var(--ink)}
.mgfield{display:grid;gap:.35rem;margin-top:.9rem}
.mgfield label{font-size:.88rem;font-weight:700;color:var(--navy)}
.mgfield input[hidden]{display:none}
.mgform input:not([type=checkbox]):not([type=radio]),.mgform select,.mgform textarea{width:100%;font:inherit;
  padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;background:#fff;min-height:var(--ctlh)}
.mgform input:disabled{background:var(--paper);color:var(--muted)}
.mgform .mgcard{margin-bottom:1rem}

/* ── v4 — 사진 넣기 타일 크기 통일 · 운영 관리 묶음과 여백 ───────────
   '내 사진' 타일은 파일 고르기 때문에 <label> 이고 나머지는 <button> 이다. 사진 넣기 창이 글쓰기 폼(.writeform)
   안에 있어서 '.writeform label' 의 위 여백·글자 크기가 '내 사진' 에만 묻어 높이가 달랐다. 둘을 똑같이 맞춘다. */
.writeform .pk-tile,.pk-tile{box-sizing:border-box;margin:0;width:100%;height:100%;min-height:96px;
  font:inherit;font-size:1rem;font-weight:400;line-height:1.3;color:var(--navy);-webkit-appearance:none;appearance:none}
.pk-tiles{align-items:stretch}
.writeform .picker label{margin-top:0}                 /* 창 안의 다른 label(참고 이미지·스타일)도 폼 여백을 받지 않게 */
.writeform .picker label.btn{font-size:.85rem}
.pk-view{gap:.75rem}

/* 운영 관리 — 영역 머리(제목 + 상태 배지)와 버튼 줄 여백 */
.mghead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .8rem;margin-bottom:.5rem}
.mghead h2{margin:0}
.mghead h2 .opt{font-weight:400;font-size:.8rem;color:var(--muted);margin-left:.3rem}
.mgbadge{font-size:.76rem;font-weight:700;border-radius:999px;padding:.22rem .65rem;white-space:nowrap}
.mgbadge.on{background:#EAF6EF;color:var(--green)}
.mgbadge.off{background:#FDECEC;color:#B42318}
.mgcard > .chk{margin-top:.4rem}
.mgactions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.2rem;padding-top:1rem;border-top:1px dashed var(--line)}
.mgactions .opt{font-size:.8rem;color:var(--muted)}
.mgresult{margin:1rem 0 0}
.mgsave{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:flex-end;
  margin:1.6rem 0 2.4rem;padding:1rem 1.1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.mgsave .opt{font-size:.82rem;color:var(--muted);margin-right:auto}
.mgform .mgcard{margin-bottom:1.4rem}
.mginline{margin-bottom:.4rem}
.mgcard .mginline{margin-top:1rem}
.mgcard .mginline + p,.mgcard .mginline + .mgok,.mgcard .mginline + .formerr{margin-top:1rem}
.mgtabs{margin-bottom:1.6rem}
.mgstats{margin-bottom:1.4rem}
/* 이미지함 — 위 거르기 줄과 아래 내용 사이 */
.imgbulk{margin:.4rem 0 1.4rem}
.imglib{margin-top:.4rem}
.il-act{margin-top:.2rem}

/* ── v5 — 로그인 정보 메뉴 (헤더 닉네임을 누르면 펼쳐진다) ───────── */
.usermenu{position:relative;flex:none}
.usermenu > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;user-select:none}
.usermenu > summary::-webkit-details-marker{display:none}
.usermenu > summary::after{content:"";width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);transition:transform .15s;margin-left:.15rem}
.usermenu[open] > summary::after{transform:translateY(.1em) rotate(-135deg)}
.usermenu[open] > summary{background:var(--sky)}
.um-pop{position:absolute;right:0;top:calc(100% + .45rem);z-index:30;min-width:13rem;padding:.4rem;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(30,38,86,.16);display:grid;gap:2px}
.um-pop a,.um-pop button{display:block;width:100%;text-align:left;padding:.6rem .75rem;border-radius:8px;border:0;background:none;
  font:600 .9rem/1.3 var(--font);color:var(--navy);text-decoration:none;cursor:pointer}
.um-pop a:hover,.um-pop button:hover,.um-pop a[aria-current]{background:var(--sky)}
.um-pop a i{display:block;font-style:normal;font-weight:400;font-size:.76rem;color:var(--muted);margin-top:.1rem}
.um-pop .um-staff{border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;margin:.2rem 0;padding:.65rem .75rem}
.um-pop form{margin:0}
.um-pop button{color:var(--muted)}
.mgrlink{display:none}

/* ── v6 — 블로그 에디터 (blog.php 글쓰기 · assets/js/cadl-blog.js) ───────
   쓰는 화면(.ed-area)은 글 화면과 같은 .postbody.blogbody 스타일을 받는다. 여기서는 테두리·도구줄만 더한다. */
.edlabel{font-size:.88rem;font-weight:700;color:var(--navy);margin-top:.8rem}
.editor{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.editor:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,38,86,.08)}
.ed-tools{position:sticky;top:72px;z-index:5;background:#fff;border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
@media(max-width:820px){.ed-tools{top:64px}}
.ed-row{display:flex;flex-wrap:wrap;gap:3px;align-items:center;padding:.4rem .5rem}
.ed-row + .ed-row{border-top:1px solid var(--line);background:#F7F9FE}
.ed-tools button{border:1px solid transparent;background:none;color:var(--ink);border-radius:7px;padding:.38rem .6rem;
  font:600 .84rem/1.2 var(--font);cursor:pointer;min-height:34px}
.ed-tools button:hover{background:var(--sky);color:var(--navy)}
.ed-tools button.on{background:var(--sky);border-color:#C9D5EE;color:var(--navy)}
.ed-tools button:disabled{opacity:.35;cursor:default;background:none}
.ed-tools .ed-photo{background:var(--navy);color:#fff;padding:.38rem .85rem}
.ed-tools .ed-photo:hover{background:#283270;color:#fff}
.ed-block{width:auto;min-height:34px;font:600 .84rem var(--font);color:var(--navy);padding:.3rem .5rem;border:1px solid var(--line);border-radius:7px;background:#fff}
.ed-sep{width:1px;height:20px;background:var(--line);margin:0 .25rem}
.ed-grow{flex:1}
.ed-tools.textmode [data-cmd],.ed-tools.textmode .ed-block,.ed-tools.textmode .ed-sep{display:none}
/* 선택한 사진 줄 */
.ed-imgbar{gap:.45rem .6rem}
.ed-imgk{font-size:.8rem;color:var(--navy);margin-right:.2rem}
.ed-imgbar .dk-seg button{min-height:28px;padding:.22rem .6rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.76rem}
.ed-imgbar .dk-seg button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ed-imgbar .ed-cap{flex:1 1 12rem;min-width:10rem;font:inherit;font-size:.84rem;padding:.35rem .55rem;border:1px solid var(--line);border-radius:7px;margin:0}
.ed-imgbar .dk-move{display:flex;gap:3px}
.ed-imgbar .dk-move button{width:30px;min-height:28px;padding:0;border:1px solid var(--line);background:#fff;font-size:.66rem}
.ed-imgbar .dk-del{min-height:28px}
/* 쓰는 칸 */
.ed-area{min-height:22rem;padding:1.1rem 1.2rem;outline:none;margin-top:0;border-top:0}
.ed-area.is-empty::before{content:attr(data-placeholder);position:absolute;color:var(--muted);pointer-events:none;max-width:40rem}
.ed-area.drop{background:var(--sky)}
.ed-area figure.bimg,.ed-area .bgallery{cursor:pointer;outline:2px solid transparent;outline-offset:3px;border-radius:8px;transition:outline-color .12s}
.ed-area figure.bimg:hover,.ed-area .bgallery:hover{outline-color:#C9D5EE}
.ed-area .ed-sel{outline-color:var(--navy)!important}
.ed-area p:empty::after{content:"\200b"}
.ed-foot{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;padding:.5rem .8rem;
  border-top:1px solid var(--line);background:var(--paper);border-radius:0 0 var(--r) var(--r)}
.ed-mode{border:0;background:none;color:var(--muted);font:600 .8rem var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ed-mode:hover{color:var(--navy)}
.ed-src{min-height:22rem;font:.9rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace!important}
.editor + .ed-src{margin-top:.5rem}
.ed-area{position:relative}

/* ── v7 — 컨셉 변경 '처우 + 일하는 방식' · 블로그 운영자 글 표시 ───────── */
.hero .herosub{margin:1rem 0 0;font-size:.88rem}
.hero .herosub a{color:var(--navy);font-weight:600;text-underline-offset:3px}
.mbr{display:none}
@media(max-width:520px){.mbr{display:inline}}
/* 운영자가 쓴 블로그 글 — 회원 글과 구분되게 (about.php #blog 에 설명) */
.byop{display:inline-block;font-size:.7rem;font-weight:700;line-height:1.5;color:#fff;background:var(--navy);
  border-radius:999px;padding:0 .5rem;margin-left:.2rem;vertical-align:.08em}
.blognote{margin:1.6rem 0 0;padding-top:1rem;border-top:1px dashed var(--line);font-size:.82rem;color:var(--muted);word-break:keep-all}

/* ── v8 — 개인 페이지 컨셉 (글 · 프로그램 · 사회복지사 도구) ─────────── */
/* 헤더 '사회복지사 도구 ▾' */
.navgroup{position:relative}
.navgroup > summary{list-style:none;cursor:pointer;color:var(--navy);padding:.4rem 0;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:.3rem;user-select:none}
.navgroup > summary::-webkit-details-marker{display:none}
.navgroup > summary::after{content:"";width:.4em;height:.4em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);transition:transform .15s}
.navgroup[open] > summary::after{transform:translateY(.1em) rotate(-135deg)}
.navgroup > summary:hover{border-bottom-color:var(--sky)}
.navgroup > summary[aria-current]{border-bottom-color:var(--gold)}
.ng-pop{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + .5rem);z-index:30;min-width:16rem;padding:.4rem;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(30,38,86,.16);display:grid;gap:2px}
.ng-pop a{display:block;padding:.55rem .75rem;border-radius:8px;text-decoration:none;border:0!important}
.ng-pop a:hover,.ng-pop a[aria-current]{background:var(--sky)}
.ng-pop a b{display:block;color:var(--navy);font-size:.92rem}
.ng-pop a i{display:block;font-style:normal;font-weight:400;font-size:.76rem;color:var(--muted);margin-top:.1rem}
.drawer-h{display:block;padding:.7rem 1.15rem .3rem;font-size:.74rem;font-weight:700;color:var(--muted);letter-spacing:.02em;
  background:var(--paper);border-bottom:1px solid var(--line)}
.drawer-h:empty{padding:.2rem 0}

/* 첫 화면 — 글쓴이 */
.hero-who{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.2rem .6rem;align-items:baseline;margin:0 0 1rem;
  padding:.35rem .9rem;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:.88rem}
.hero-who b{color:var(--navy)}
.hero-who span{color:var(--muted)}

/* 글 분류 */
.homecats{margin:-.3rem 0 1rem}
.tag.cattag{background:var(--navy);color:#fff}
a.tag{text-decoration:none}

/* 글쓴이 상자 (글·프로그램 아래) · 소개 머리 */
.authorbox{display:flex;gap:.9rem;align-items:center;margin-top:1.8rem;padding:1rem 1.1rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r)}
.authorbox div{display:grid;gap:.15rem;font-size:.86rem}
.authorbox b{color:var(--navy);font-size:.98rem}
.authorbox span{color:var(--muted)}
.authorbox a{color:var(--navy);font-weight:600}
.ab-mark{flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:1.2rem}
.aboutme{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.aboutme .ab-mark{width:3.6rem;height:3.6rem;font-size:1.4rem}
.aboutme h2{margin:0!important}
.aboutme .ab-tag{margin:.2rem 0 0;color:var(--muted)}

/* 프로그램 카드 */
.proglist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem}
.progcard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  text-decoration:none;color:var(--ink);transition:.15s}
.progcard:hover{border-color:var(--navy);box-shadow:0 8px 22px rgba(30,38,86,.12);transform:translateY(-2px)}
.pc-shot{position:relative;display:block;aspect-ratio:16/10;background:var(--sky)}
.pc-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pc-shot.noimg{display:grid;place-items:center}
.pc-shot.noimg i{font-style:normal;font-size:2.4rem;font-weight:800;color:var(--navy);opacity:.35}
.pc-shot .pstate{position:absolute;left:.6rem;top:.6rem}
.pc-body{display:grid;gap:.3rem;padding:.9rem 1rem 1rem;flex:1;align-content:start}
.pc-body strong{color:var(--navy);font-size:1.05rem}
.pc-tag{font-size:.88rem;line-height:1.55;word-break:keep-all}
.pc-aud{font-size:.78rem;color:var(--muted)}
.pc-more{margin-top:.3rem;font-size:.82rem;font-weight:700;color:var(--navy)}
.pstate{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:.12rem .55rem;background:#fff;color:var(--navy);
  border:1px solid var(--line)}
.pstate.s-live{background:#EAF6EF;color:var(--green);border-color:#BFE3CD}
.pstate.s-beta{background:#FFF7E3;color:#8A5A00;border-color:#F0D9A8}
.pstate.s-dev{background:var(--sky);color:var(--navy)}
.pstate.s-stop{background:#F1F2F6;color:var(--muted)}
/* 프로그램 자세히 */
.progview{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.2rem,4vw,2rem)}
.pv-head h1{margin:.5rem 0 .4rem;color:var(--navy);font-size:clamp(1.35rem,4vw,1.8rem)}
.pv-tag{margin:0 0 .5rem;font-size:1.02rem;word-break:keep-all}
.pv-aud{margin:0;color:var(--muted);font-size:.9rem}
.pv-aud b{color:var(--navy);margin-right:.3rem}
.pv-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.1rem 0 0}
.pv-shot{margin:1.4rem 0 0}
.pv-shot img{display:block;width:100%;border-radius:10px;border:1px solid var(--line)}
.progview h2{margin:1.6rem 0 .6rem;color:var(--navy);font-size:1.1rem}
.pv-feats{margin:0;padding-left:1.2rem;display:grid;gap:.3rem}
.pv-body{margin-top:1.4rem}
.pv-related{display:grid;gap:.15rem;margin-top:1.4rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;background:var(--paper)}
.pv-related span{font-size:.76rem;color:var(--muted)}
.pv-related b{color:var(--navy)}
.pv-related:hover{border-color:var(--navy)}

/* 사회복지사 도구 */
.tools-blk{background:var(--paper)}
.tooltiles{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
@media(max-width:760px){.tooltiles{grid-template-columns:1fr 1fr}}
.tooltiles a{display:grid;gap:.25rem;height:100%;padding:.9rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;transition:.14s}
.tooltiles a:hover{border-color:var(--navy)}
.tooltiles b{color:var(--navy)}
.tooltiles span{font-size:.8rem;color:var(--muted);line-height:1.5;word-break:keep-all}
.hometwo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:760px){.hometwo{grid-template-columns:1fr}}
.bhead.small{margin-bottom:.6rem}
.bhead.small h3{margin:0;color:var(--navy);font-size:1rem;font-weight:800}
.hometwo .newstit{margin:.35rem 0 0;font-size:.95rem}

/* 운영 관리 — 프로그램 */
.mgimg{display:block;max-width:260px;border-radius:8px;border:1px solid var(--line)}
.mgline.off{opacity:.55}
.mgline .meta b.off{color:#B42318}

/* ── v9 — 2026-10-04 리뉴얼 ─────────────────────────────────────────
   사이트가 하려는 일: 글과 프로그램을 보여 주고 → 문의(도입·강의·협업)로 잇는다. 도구는 입구다. */

/* 첫 화면 — 왼쪽: 누구·무엇 / 오른쪽: 하는 일 세 가지 */
.hero2{background:linear-gradient(180deg,var(--sky) 0%,#EEF2FA 100%);padding:clamp(2.4rem,7vw,4.4rem) 0}
.hero2-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.4rem,4vw,3rem);align-items:center}
@media(max-width:860px){.hero2-in{grid-template-columns:1fr}}
.hero2 .hero-who{justify-content:flex-start;margin-bottom:1.1rem}
.hero2 h1{margin:0 0 .8rem;color:var(--navy);font-weight:800;letter-spacing:-.025em;line-height:1.25;
  font-size:clamp(1.7rem,5.2vw,2.7rem);word-break:keep-all}
.hero2 .lead{margin:0 0 1.5rem;max-width:34rem;font-size:clamp(.98rem,2.4vw,1.08rem);line-height:1.75;word-break:keep-all}
.hero2 .ctas{display:flex;flex-wrap:wrap;gap:.6rem}
.h2-do{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.h2-do a{display:grid;grid-template-columns:auto 1fr;gap:.1rem .9rem;align-items:center;padding:1rem 1.1rem;background:#fff;
  border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:.15s;box-shadow:0 2px 0 rgba(30,38,86,.03)}
.h2-do a:hover{border-color:var(--navy);transform:translateX(3px);box-shadow:0 8px 22px rgba(30,38,86,.10)}
.do-n{grid-row:1 / span 2;display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:12px;background:var(--navy);color:#fff;
  font-weight:800;font-size:.98rem;letter-spacing:-.02em}
.h2-do li:nth-child(2) .do-n{background:#2B3A80}
.h2-do li:nth-child(3) .do-n{background:var(--gold);color:var(--navy)}
.h2-do b{color:var(--navy);font-size:1rem;align-self:end}
.h2-do i{font-style:normal;font-size:.82rem;color:var(--muted);align-self:start}

/* 운영자 할 일 */
.todo-blk{padding:1.2rem 0;border-bottom:0}
.todo{padding:.9rem 1.1rem;background:#FFF9EC;border:1px solid #F0D9A8;border-radius:var(--r);font-size:.9rem}
.todo b{color:#8A5A00}
.todo ul{margin:.45rem 0 0;padding-left:1.2rem;display:grid;gap:.25rem}
.todo a{color:var(--navy);font-weight:700}

/* 최근 글 — 첫 글은 크게, 나머지는 줄로 */
.postgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem;align-items:stretch}
.postgrid.solo{grid-template-columns:1fr}
@media(max-width:760px){.postgrid{grid-template-columns:1fr}}
.featpost{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;
  color:var(--ink);transition:.15s}
.featpost:hover{border-color:var(--navy);box-shadow:0 10px 26px rgba(30,38,86,.12)}
.featpost img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.fp-body{display:grid;gap:.5rem;padding:1.1rem 1.2rem 1.2rem;align-content:start}
.fp-body .tag{justify-self:start}
.fp-body strong{color:var(--navy);font-size:clamp(1.1rem,3vw,1.35rem);line-height:1.4;word-break:keep-all}
.fp-ex{font-size:.92rem;line-height:1.7;word-break:keep-all}
.postmini{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;align-content:start}
.postmini a{display:grid;gap:.2rem;padding:.85rem 1rem;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;transition:.15s}
.postmini a:hover{border-color:var(--navy)}
.postmini i,.rellist i,.promo-posts i{font-style:normal;font-size:.72rem;font-weight:700;color:var(--muted)}
.postmini b{color:var(--navy);font-size:.98rem;line-height:1.45;word-break:keep-all}
.postmini span{font-size:.78rem;color:var(--muted)}

/* 함께 일하기 — 문의로 가는 길 */
.together{background:var(--navy);border-bottom:0}
.tg-head{text-align:center;margin-bottom:1.4rem}
.tg-head h2{margin:0 0 .4rem;color:#fff;font-size:clamp(1.25rem,4vw,1.6rem);font-weight:800;letter-spacing:-.02em}
.tg-head p{margin:0 auto;max-width:34rem;color:#C9D2EE;font-size:.94rem;line-height:1.7;word-break:keep-all}
.tg-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
@media(max-width:760px){.tg-tiles{grid-template-columns:1fr}}
.tg-tiles a{display:grid;gap:.35rem;height:100%;padding:1.1rem 1.2rem;border-radius:14px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);text-decoration:none;transition:.15s}
.tg-tiles a:hover{background:rgba(255,255,255,.13);border-color:var(--gold)}
.tg-tiles b{color:#fff;font-size:1.05rem}
.tg-tiles span{color:#C9D2EE;font-size:.86rem;line-height:1.6;word-break:keep-all}
.tg-tiles i{font-style:normal;font-weight:700;font-size:.84rem;color:var(--gold);margin-top:.2rem}

/* 글·프로그램 끝의 문의 안내 */
.askband{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;margin-top:1.6rem;
  padding:1.1rem 1.2rem;background:var(--sky);border-radius:var(--r)}
.askband div{display:grid;gap:.2rem;flex:1 1 16rem}
.askband b{color:var(--navy);font-size:1rem}
.askband span{font-size:.86rem;line-height:1.6;word-break:keep-all}
.rellist{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rellist a{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:baseline;padding:.75rem 1rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none}
.rellist a:hover{border-color:var(--navy)}
.rellist b{color:var(--navy);word-break:keep-all}
.rellist span{font-size:.78rem;color:var(--muted)}
@media(max-width:520px){.rellist a{grid-template-columns:1fr}}

/* 도구 화면 아래 — 이 도구를 만든 사람 */
.promo{background:var(--sky);padding:1.4rem 0;border-top:1px solid var(--line)}
.promo .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:1rem 1.6rem;align-items:center}
@media(max-width:860px){.promo .wrap{grid-template-columns:1fr}}
.promo-who{display:flex;gap:.8rem;align-items:center}
.promo-who div{display:grid;gap:.05rem;font-size:.84rem}
.promo-k{font-size:.72rem;font-weight:700;color:var(--muted)}
.promo-who b{color:var(--navy);font-size:1rem}
.promo-who span{color:var(--muted)}
.promo-posts{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;min-width:0}
.promo-posts a{display:flex;gap:.5rem;align-items:baseline;text-decoration:none;color:var(--navy);font-weight:600;font-size:.9rem}
.promo-posts a:hover{text-decoration:underline}
.promo-posts i{flex:none}
.promo-go{display:flex;flex-wrap:wrap;gap:.4rem}

/* 초안 안내 */
.draftbar{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;justify-content:space-between;margin:0 0 1.1rem;
  padding:.85rem 1.1rem;background:#FFF9EC;border:1px solid #F0D9A8;border-radius:var(--r);font-size:.88rem;line-height:1.6}
.draftbar > div:first-child{flex:1 1 18rem;word-break:keep-all}
.draftbar b{color:#8A5A00}
.draftbar a{color:var(--navy);font-weight:600}
.draftbar .mginline{margin:0}
.draftlist{margin-bottom:1.4rem}

/* 표 — 글 화면과 에디터 */
.blogbody .btable{overflow-x:auto;margin:1.3rem 0;clear:both}
.blogbody table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.6;background:#fff}
.blogbody th,.blogbody td{border:1px solid var(--line);padding:.6rem .75rem;text-align:left;vertical-align:top;word-break:keep-all;min-width:4.5rem}
.blogbody th{background:var(--sky);color:var(--navy);font-weight:700}
.ed-area td:focus-within,.ed-area th:focus-within{outline:2px solid var(--navy);outline-offset:-2px}
.ed-tblbar{gap:.3rem .45rem}
.ed-tblbar .opt{font-size:.76rem;color:var(--muted);margin-left:.3rem}

/* 문의 화면 */
.contactform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kindtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}  /* 문의 종류가 세 가지다 — 한 줄에 나란히 (2026-10-07) */
@media(max-width:700px){.kindtiles{grid-template-columns:1fr}}
.writeform label.kindtile{display:flex;gap:.6rem;align-items:flex-start;margin:0;padding:.8rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:#fff;cursor:pointer;font-weight:400}
.kindtile input{margin-top:.3rem;flex:none;width:auto}
.kindtile b{display:block;color:var(--navy);font-size:.94rem}
.kindtile i{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:.1rem;line-height:1.5}
.kindtile:has(input:checked){border-color:var(--navy);background:var(--sky)}
.contactform .mgrow > div{display:grid;gap:.35rem}
.sentbox{padding:1.6rem;background:#EAF6EF;border:1px solid #BFE3CD;border-radius:var(--r);text-align:center}
.sentbox b{color:var(--green);font-size:1.1rem}
.sentbox p{margin:.6rem 0 0}

/* 운영 관리 — 문의함 */
.inqlist li{display:grid;gap:.5rem}
.inqlist li.new{border-color:#E0C08A;background:#FFFDF6}
.inqlist li.done{opacity:.72}
.inqlist p{margin:0;white-space:normal;word-break:keep-all}
.inq-from{font-size:.86rem;color:var(--muted)}
.inq-from a{color:var(--navy);font-weight:700}
.um-badge{font-style:normal;font-size:.7rem;font-weight:700;background:#B42318;color:#fff;border-radius:999px;padding:.05rem .45rem;margin-left:.3rem}

/* 메뉴의 '문의' — 가야 할 곳이 분명하게 */
.mainnav a[href="contact.php"]{border:1px solid var(--navy);border-radius:999px;padding:.3rem .85rem;border-bottom-width:1px}
.mainnav a[href="contact.php"]:hover,.mainnav a[href="contact.php"][aria-current]{background:var(--navy);color:#fff;border-color:var(--navy)}
@media(min-width:821px) and (max-width:980px){.mainnav{gap:.9rem;font-size:.9rem}}
.pvbar{background:#8A5A00;color:#fff;font-size:.86rem;padding:.55rem 0}
.pvbar b{background:#fff;color:#8A5A00;border-radius:999px;padding:.05rem .55rem;margin-right:.4rem;font-size:.76rem}
.pvbar a{color:#fff;font-weight:700;margin-left:.4rem}
.todo-pv{float:right;margin:-.2rem 0 .3rem .6rem}
.pc-shot{aspect-ratio:16/9}
.pc-shot img{object-position:center top}
.authorbox .ab-links{color:var(--line);margin-top:.15rem}
.hero2 .ctas{justify-content:flex-start}
/* 안내 띠 안의 버튼 — '.draftbar a' 의 글자색이 버튼까지 덮어 남색 버튼의 글자가 안 보였다 */
.draftbar a.btn{color:#fff}
.draftbar a.btn.ghost{color:var(--navy)}
.todo a.btn{font-weight:700}
/* 2026-10-07 단순화 — 채용공고 업데이트 시각, 도구 타일 2개 */
.jobupd{margin:.5rem 0 0;font-size:.86rem;color:var(--muted)}
.jobupd time{font-weight:700;color:var(--navy)}
.bhead .jobupd{margin:0}
.tooltiles.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.tooltiles.two{grid-template-columns:1fr}}
.homejobs{margin-top:1.4rem}
/* 2026-10-07 급여 계산기 — 로그인한 사람의 내 정보 띠 */
.mybar{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center;justify-content:space-between;margin:0 0 1rem;padding:.85rem 1rem;
  background:#E7F3EC;border:1px solid #BFDCCB;border-radius:var(--r)}
.mybar.changed{background:#FFF9EC;border-color:#E6D6AE}
.mybar-t{display:grid;gap:.15rem;min-width:0}
.mybar-t b{color:var(--navy);font-size:.95rem}
.mybar-t span{font-size:.9rem;color:var(--ink,#222);word-break:keep-all}
.mybar-t i{font-style:normal;color:var(--muted);margin-left:.35rem}
.mybar-t em{font-style:normal;font-size:.82rem;color:#7A5E1A}
.mybar-a{display:flex;flex-wrap:wrap;gap:.4rem}
.mylogin{margin:0 0 1rem;font-size:.9rem;color:var(--muted)}
.mylogin a{font-weight:800;color:var(--navy)}
/* 2026-10-07 문서를 보여 주는 모달 (문의 화면의 개인정보 처리방침) — 본문만 스크롤하고 단추는 늘 보인다 */
.modalbox.doc{max-width:44rem;max-height:calc(100vh - 2.4rem);max-height:calc(100dvh - 2.4rem);display:flex;flex-direction:column}
.modaldoc{flex:1 1 auto;min-height:0;overflow-y:auto;margin:.3rem 0 1rem;padding:0 .9rem 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.92rem;outline:none}
.modaldoc h2{font-size:1rem;margin:1.2rem 0 .4rem}
.modaldoc p,.modaldoc li{line-height:1.7}
.modalbox.doc .modalacts{flex:none;margin-top:0}
/* 2026-10-07 개인정보 처리방침의 표 (항목 · 보유 기간) */
.tblwrap{overflow-x:auto;margin:.6rem 0 1rem}
.pvtable{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.6}
.pvtable th,.pvtable td{padding:.55rem .7rem;border:1px solid var(--line);text-align:left;vertical-align:top;word-break:keep-all}
.pvtable th{background:var(--sky,#EEF2FA);color:var(--navy);font-weight:700;white-space:nowrap}
.pvtable td:first-child{font-weight:600;color:var(--navy);min-width:7.5rem}
.modaldoc ol,.modaldoc ul{padding-left:1.2rem}
/* 2026-10-07 급여 계산기 — 승진 최소 소요연한 (예전 .promo 는 글쓴이 안내 띠와 이름이 겹쳤다) */
.promote{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(max-width:700px){.promote{grid-template-columns:minmax(0,1fr)}}
.promote-col{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.promote-col h3{margin:0;padding:.7rem 1rem;font-size:.92rem;font-weight:800;color:var(--navy);background:var(--sky);border-bottom:1px solid var(--line)}
.promote-col h3 .sub{font-weight:500;font-size:.8rem;color:var(--muted);margin-left:.3rem}
.promote-col ol{list-style:none;margin:0;padding:0}
.promote-col li{display:grid;grid-template-columns:8.2rem 1fr;gap:.8rem;align-items:baseline;padding:.65rem 1rem;font-size:.9rem;color:var(--ink);word-break:keep-all}
.promote-col li + li{border-top:1px solid var(--line)}
.promote-col li b{color:var(--navy);font-weight:700}
@media(max-width:420px){.promote-col li{grid-template-columns:1fr;gap:.1rem}}
.calcbox > .promote + .hint{margin-top:.9rem}

/* 2026-10-07 급여 계산기 — 최근 10년 추세 */
.trend h2 .sub{font-weight:500;font-size:.84rem;color:var(--muted);margin-left:.4rem}
.trend-lead{margin:0 0 1rem}
.trendtiles{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
@media(max-width:860px){.trendtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.trendtiles{grid-template-columns:1fr}}
.trendtiles li{display:grid;gap:.2rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.trendtiles .k{font-size:.78rem;font-weight:700;color:var(--muted)}
.trendtiles strong{font-size:1.12rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;white-space:nowrap}
.trendtiles .d{font-size:.78rem;color:var(--muted);word-break:keep-all}
.trendctl{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .9rem}
.trendctl .lab{font-size:.82rem;font-weight:700;color:var(--muted);margin-right:.2rem}
.trendctl .chip{cursor:pointer;font:inherit;font-size:.84rem}
.trendgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(max-width:900px){.trendgrid{grid-template-columns:minmax(0,1fr)}}
.trendfig{margin:0;padding:1rem 1rem .6rem;border:1px solid var(--line);border-radius:var(--r);background:#fff;min-width:0}
.trendfig figcaption{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;margin-bottom:.5rem}
.trendfig figcaption b{color:var(--navy);font-size:.95rem}
.trendfig figcaption span{font-size:.78rem;color:var(--muted)}
.trendlegend{list-style:none;margin:0 0 .4rem;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.8rem;color:var(--ink)}
.trendlegend li{display:flex;align-items:center;gap:.35rem}
.trendlegend .lk{width:16px;height:2px;border-radius:2px;display:inline-block}
.trendlegend .sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.trendlegend .s1{background:#2a78d6}.trendlegend .s2{background:#eb6834}.trendlegend .s3{background:#1baf7a}.trendlegend .mw{background:#8a90a2}
.trendplot{position:relative}
.trendplot svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.trendplot .tg{stroke:#E9ECF3;stroke-width:1}
.trendplot .tb{stroke:#C9CEDB;stroke-width:1}
.trendplot .tc{stroke:#B4BACB;stroke-width:1}
.trendplot .ta{font-size:11px;fill:#7A8194}
.trendplot .tl{font-size:11px;font-weight:700;fill:#1E2656}
.trendplot .tv{font-size:11px;fill:#3D4459}
.trendtip{position:absolute;top:6px;z-index:3;pointer-events:none;display:grid;gap:.2rem;min-width:11rem;padding:.55rem .7rem;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 22px rgba(30,38,86,.14);font-size:.8rem;color:var(--ink)}
.trendtip[hidden]{display:none}
.trendtip strong{color:var(--navy);font-size:.82rem;margin-bottom:.1rem}
.trendtip span{display:flex;align-items:center;gap:.4rem}
.trendtip i{width:8px;height:8px;border-radius:50%;flex:none}
.trendtip b{margin-left:auto;padding-left:.8rem;color:var(--navy);font-variant-numeric:tabular-nums}
.trendh{margin:1.4rem 0 .6rem;font-size:.98rem;font-weight:800;color:var(--navy)}
.trendnotes{margin:0 0 1.1rem;padding:0;list-style:none;display:grid;gap:.6rem}
.trendnotes li{padding:.8rem 1rem;border-left:3px solid var(--gold);background:var(--paper);border-radius:0 var(--r) var(--r) 0;font-size:.9rem;line-height:1.75;color:var(--ink);word-break:keep-all}
.trendnotes b{color:var(--navy)}
.trendtable{margin:0 0 1rem}
.trendtable summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:.9rem;padding:.3rem 0}
.trendtable summary .sub{font-weight:500;color:var(--muted);font-size:.8rem;margin-left:.3rem}
.trendtable .pvtable td{font-variant-numeric:tabular-nums;white-space:nowrap}
.trendtable .pvtable td:not(:first-child),.trendtable .pvtable th:not(:first-child){text-align:right}
/* 2026-10-07 메인 '최근 글' — 같은 크기의 카드 (예전 .postgrid/.featpost/.postmini 를 대신한다) */
.postcards{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.postcards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.postcards.n1{grid-template-columns:minmax(0,1fr)}
@media(max-width:900px){.postcards,.postcards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.postcards,.postcards.n2{grid-template-columns:minmax(0,1fr)}}
.postcards li{display:flex;min-width:0}
.postcard{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;
  box-shadow:0 1px 2px rgba(30,38,86,.04);transition:transform .18s,box-shadow .18s,border-color .18s}
.postcard:hover{transform:translateY(-3px);border-color:#C5CEE6;box-shadow:0 14px 32px rgba(30,38,86,.13)}
.pcd-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sky)}
.pcd-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.postcard:hover .pcd-img img{transform:scale(1.04)}
.pcd-img.noimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E4EBF7,#F3F6FC)}
.pcd-img.noimg i{font-style:normal;font-weight:800;font-size:1.05rem;color:#9AA6C8;letter-spacing:-.01em}
.pcd-body{display:flex;flex-direction:column;gap:.55rem;flex:1;padding:1.1rem 1.2rem 1.15rem}
.pcd-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.pcd-top time{font-size:.78rem;color:var(--muted);white-space:nowrap}
.pcd-body strong{color:var(--navy);font-size:1.08rem;font-weight:800;line-height:1.45;letter-spacing:-.01em;word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcd-ex{font-size:.9rem;line-height:1.7;color:var(--ink);word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcd-more{margin-top:auto;padding-top:.35rem;font-size:.84rem;font-weight:700;color:var(--navy)}
/* 글이 한 편뿐이면 사진을 왼쪽에 둔 가로 카드 */
@media(min-width:601px){
  .postcards.n1 .postcard{flex-direction:row}
  .postcards.n1 .pcd-img{flex:0 0 46%;aspect-ratio:auto;min-height:15rem}
  .postcards.n1 .pcd-body{justify-content:center;padding:1.6rem 1.8rem}
  .postcards.n1 .pcd-body strong{font-size:1.3rem}
  .postcards.n1 .pcd-ex{-webkit-line-clamp:4}
}
/* 2026-10-07 블로그 글 아래 — 이전 글 · 다음 글 (썸네일) */
.postnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.4rem 0 0}
@media(max-width:640px){.postnav{grid-template-columns:minmax(0,1fr)}.postnav .pn.empty{display:none}}
.postnav .pn{display:flex;gap:.9rem;align-items:center;min-width:0;padding:.7rem;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.postnav a.pn:hover{border-color:#C5CEE6;box-shadow:0 10px 24px rgba(30,38,86,.11);transform:translateY(-2px)}
.postnav .pn.empty{border:0;background:none;padding:0}
.postnav .pn-next{flex-direction:row-reverse;text-align:right}
.pn-img{flex:0 0 7.5rem;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--sky)}
.pn-img img{display:block;width:100%;height:100%;object-fit:cover}
.pn-img.noimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E4EBF7,#F3F6FC)}
.pn-img.noimg i{font-style:normal;font-size:.76rem;font-weight:800;color:#9AA6C8}
.pn-txt{display:grid;gap:.25rem;min-width:0;flex:1}
.pn-k{font-size:.76rem;font-weight:800;color:var(--muted)}
.pn-txt b{color:var(--navy);font-size:.98rem;line-height:1.45;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-d{font-size:.76rem;color:var(--muted)}
@media(max-width:420px){.pn-img{flex-basis:5.5rem}}
/* 이어서 읽을 글 — 썸네일이 붙은 줄 */
.rellist.thumbs a{grid-template-columns:auto auto 1fr auto;align-items:center}
.rl-img{width:4.2rem;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#E4EBF7,#F3F6FC)}
.rl-img img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:520px){.rellist.thumbs a{grid-template-columns:auto 1fr}.rellist.thumbs a i,.rellist.thumbs a span:last-child{grid-column:2}.rellist.thumbs .rl-img{grid-row:1 / span 3}}
/* 2026-10-07 분류 배지를 제목 왼쪽에 (목록 · 글 화면 · 메인 카드 · 이전/다음 글) */
.tag.cattag.inl{display:inline-block;vertical-align:.14em;margin:0 .5em 0 0;font-size:.72rem;line-height:1.5;letter-spacing:0;text-decoration:none;white-space:nowrap}
.postview h1 .tag.cattag.inl{font-size:.8rem;vertical-align:.3em}
.pn-txt b .tag.cattag.inl{font-size:.68rem;margin-right:.4em}
.posttags{margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.3rem}
.cardhit:hover .ctit .tag{text-decoration:none}
.pcd-foot{margin-top:auto;padding-top:.35rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.pcd-foot time{font-size:.78rem;color:var(--muted)}
.pcd-foot .pcd-more{margin:0;padding:0}
/* 2026-10-07 메인 첫 화면 — 사이트가 무엇인지 알리는 한 줄 사실들 */
.hero-facts{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.84rem;color:var(--muted)}
.hero-facts li{display:flex;align-items:center;gap:.4rem}
.hero-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.h2-do li:nth-child(1) .do-n{background:var(--navy);color:#fff}
.h2-do li:nth-child(3) .do-n{font-size:.86rem}
/* 2026-10-07 푸터의 문의하기 단추 (헤더 메뉴에서 옮겨 왔다) */
.cadl-foot .fcol a.fcontact{display:inline-block;margin:0 0 .6rem;padding:.4rem 1rem;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;font-weight:700;text-decoration:none}
.cadl-foot .fcol a.fcontact:hover{text-decoration:none;background:#fff;color:var(--navy);border-color:#fff}
/* 2026-10-07 이미지 뷰어 (assets/js/cadl_viewer.js) */
.il-img{cursor:zoom-in}
.imgviewer{position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);background:rgba(12,15,32,.94);color:#fff}
.imgviewer[hidden]{display:none}
.iv-bar{grid-column:1 / -1;display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;font-size:.86rem;background:rgba(0,0,0,.25)}
.iv-count{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.iv-cap{flex:1;min-width:0;color:#C9D2EE;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-btn{flex:none;font:inherit;font-size:.82rem;font-weight:700;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.35rem .85rem;cursor:pointer;text-decoration:none}
.iv-btn:hover,.iv-btn:focus-visible{background:#fff;color:var(--navy);outline:none}
.iv-stage{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;overflow:auto;padding:1rem;min-width:0;min-height:0}
.iv-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:zoom-in;transition:opacity .15s;background:#fff}
.imgviewer.loading .iv-stage img{opacity:.35}
.imgviewer.zoomed .iv-stage{display:block}
.imgviewer.zoomed .iv-stage img{max-width:none;max-height:none;cursor:zoom-out;margin:auto;display:block}
.iv-nav{grid-row:2;align-self:center;width:3rem;height:4.5rem;margin:0 .4rem;font-size:2.2rem;line-height:1;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:12px;cursor:pointer}
.iv-nav:hover,.iv-nav:focus-visible{background:#fff;color:var(--navy);outline:none}
.iv-nav[hidden]{visibility:hidden;display:block}
.iv-prev{grid-column:1}.iv-next{grid-column:3}
@media(max-width:640px){
  .iv-cap{display:none}.iv-bar{justify-content:space-between}
  .iv-nav{position:absolute;bottom:1rem;width:3.2rem;height:3.2rem;margin:0;z-index:2}
  .iv-prev{left:1rem}.iv-next{right:1rem}
  .iv-stage{grid-column:1 / -1;padding:.5rem}
}
/* 2026-10-07 소개 화면 — 여기서 할 수 있는 일 세 장 */
.prose ul.aboutcards{list-style:none;margin:1rem 0 1.2rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
@media(max-width:760px){.prose ul.aboutcards{grid-template-columns:minmax(0,1fr)}}
.aboutcards li{margin:0;padding:0;display:flex}
.aboutcards li::before{content:none}
.aboutcards a{display:flex;flex-direction:column;gap:.5rem;width:100%;padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.aboutcards a:hover{border-color:#C5CEE6;box-shadow:0 12px 28px rgba(30,38,86,.12);transform:translateY(-2px)}
.aboutcards b{color:var(--navy);font-size:1.08rem;font-weight:800}
.aboutcards span{font-size:.9rem;line-height:1.7;color:var(--ink);word-break:keep-all}
.aboutcards i{margin-top:auto;padding-top:.3rem;font-style:normal;font-size:.84rem;font-weight:700;color:var(--navy)}
/* 2026-10-07 글 아래 '같은 태그의 글' — 겹친 태그를 함께 보여 준다 */
.relcount{font-size:.8rem;font-weight:700;color:var(--muted);margin-left:.2rem}
.rellist.thumbs.bytag a{grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem}
.rl-txt{display:grid;gap:.3rem;min-width:0}
.rl-txt b{line-height:1.45}
.rl-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.rellist .rl-tags em{font-style:normal;font-size:.74rem;font-weight:700;color:var(--navy);background:var(--sky);border-radius:999px;padding:.08rem .5rem}
.rl-date{font-size:.78rem;color:var(--muted);white-space:nowrap}
@media(max-width:520px){.rellist.thumbs.bytag a{grid-template-columns:auto 1fr}.rellist.thumbs.bytag .rl-date{grid-column:2}.rellist.thumbs.bytag .rl-img{grid-row:1 / span 2}}
/* 2026-10-07 블로그 의견의 답글(대댓글) · 날짜와 시각 */
.replies.threads li{display:grid;gap:.6rem}
.replies .cm .meta time{font-variant-numeric:tabular-nums}
.replies .cm p{margin:.4rem 0 0;word-break:keep-all}
.replies .cm form{margin-top:.5rem}
.cm-replies{display:grid;gap:.5rem;margin-left:1.1rem;padding-left:.9rem;border-left:2px solid var(--sky)}
.cm-reply{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem}
.cm-gone p{margin:0;color:var(--muted);font-size:.9rem}
.cm:target{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
.rereply summary{display:inline-block;cursor:pointer;list-style:none;font-size:.82rem;font-weight:700;color:var(--navy);padding:.2rem .7rem;border:1px solid var(--line);border-radius:999px;background:#fff}
.rereply summary::-webkit-details-marker{display:none}
.rereply summary:hover,.rereply[open] summary{border-color:var(--navy);background:var(--sky)}
.rereply .replyform{margin-top:.6rem}
.rereply-login{margin:0;font-size:.82rem}
.rereply-login a{color:var(--muted)}
@media(max-width:520px){.cm-replies{margin-left:.3rem;padding-left:.6rem}}
/* 2026-10-07 이전·다음 글이 하나뿐이면 전체 너비 */
.postnav.one{grid-template-columns:minmax(0,1fr)}
/* 2026-10-10 HTML 글 — 글 화면의 iframe · 글쓰기의 형식 고르기와 편집기 */
.htmlbody{margin-top:1rem}
.htmlpost-frame{display:block;width:100%;height:240px;border:0;background:transparent}
.fmtswitch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.2rem 0 .7rem}
@media(max-width:560px){.fmtswitch{grid-template-columns:1fr}}
.writeform .fmtswitch label{display:flex;gap:.6rem;align-items:flex-start;margin:0;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-weight:400}
.fmtswitch input{margin-top:.3rem;width:auto;flex:none}
.fmtswitch b{display:block;color:var(--navy);font-size:.94rem}
.fmtswitch i{display:block;font-style:normal;font-size:.8rem;color:var(--muted)}
.fmtswitch label:has(input:checked){border-color:var(--navy);background:var(--sky)}
.hpnotice{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;margin:0 0 .7rem;padding:.7rem .9rem;background:#FFF9EC;border:1px solid #E6D6AE;border-radius:10px;font-size:.88rem;color:#5d4a1c}
.hpnotice[hidden]{display:none}
.hpnotice span{flex:1 1 18rem}
.hpost{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;margin-bottom:.4rem}
.hpost[hidden],#mdEditor[hidden]{display:none}
.hp-bar{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;padding:.6rem .7rem;border-bottom:1px solid var(--line);background:var(--paper)}
.hp-file{cursor:pointer}
.hp-tabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.hp-tabs button{font:inherit;font-size:.82rem;font-weight:700;padding:.35rem .9rem;border:0;background:#fff;color:var(--muted);cursor:pointer}
.hp-tabs button.on{background:var(--navy);color:#fff}
.hp-msg{font-size:.82rem;color:var(--muted)}
.hp-frame{display:block;width:100%;height:70vh;min-height:420px;border:0;background:#fff}
.hp-frame[hidden]{display:none}
.writeform .hp-code{display:block;width:100%;min-height:70vh;border:0;border-radius:0;font:13px/1.6 Consolas,'Courier New',monospace;padding:.8rem;resize:vertical;white-space:pre;tab-size:2}
.writeform .hp-code[hidden]{display:none}
.hp-help{margin:0;padding:.6rem .8rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);background:var(--paper)}
/* 2026-10-10 HTML 글 도구줄 세로 정렬 — .writeform label 의 위 여백(.8rem)이 'HTML 파일 불러오기' 를 아래로 밀었다 */
.writeform .hp-bar label.hp-file{margin:0;font-size:.84rem;font-weight:700;color:var(--navy)}
.hp-bar > *{align-self:center}
.hp-tabs{align-items:stretch;height:32px}
.hp-tabs button{display:inline-flex;align-items:center;padding:0 .95rem;line-height:1}
.hp-msg{line-height:1.4}
/* 2026-10-10 HTML 글 — 원본 HTML 보기 (편집 화면의 창 · 글 화면의 운영자용 펼침) */
.hp-origdlg{width:min(1100px,96vw);max-height:92vh;padding:0;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(20,26,54,.3)}
.hp-origdlg[open]{display:flex;flex-direction:column}
.hp-origdlg::backdrop{background:rgba(24,30,58,.5)}
.hp-od-head{display:flex;flex-wrap:wrap;gap:.5rem .7rem;align-items:center;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--paper)}
.hp-od-head b{color:var(--navy)}
.hp-od-grow{flex:1}
.hp-od-frame{display:block;width:100%;height:75vh;border:0;background:#fff}
.hp-od-frame[hidden],.hp-od-code[hidden]{display:none}
.hp-od-code{display:block;width:100%;height:75vh;border:0;padding:.8rem;font:12.5px/1.6 Consolas,'Courier New',monospace;white-space:pre;resize:none}
.origview{margin:1rem 0 0;padding:.7rem .9rem;border:1px dashed #E0C08A;border-radius:10px;background:#FFFDF7}
.origview > summary{cursor:pointer;font-size:.84rem;font-weight:700;color:#8a6a1f}
.origview .opt{margin:.5rem 0;font-size:.8rem;color:var(--muted)}
.origview-frame{display:block;width:100%;height:70vh;border:1px solid var(--line);border-radius:8px;background:#fff}
.origview-code summary{cursor:pointer;margin-top:.6rem;font-size:.82rem;font-weight:700;color:var(--navy)}
.origview-code pre{max-height:60vh;overflow:auto;margin:.5rem 0 0;padding:.8rem;background:#f6f7fb;border-radius:8px;font:12px/1.55 Consolas,'Courier New',monospace;white-space:pre-wrap;word-break:break-all}
/* 2026-10-10 운영 관리 → 통계 */
.stattiles{list-style:none;margin:1rem 0 1.4rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
@media(max-width:860px){.stattiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stattiles li{display:grid;gap:.2rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.stattiles .k{font-size:.78rem;font-weight:700;color:var(--muted)}
.stattiles strong{font-size:1.6rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.2}
.stattiles strong em{font-style:normal;font-size:.9rem;font-weight:700;margin-left:.15rem}
.stattiles .d{font-size:.78rem;color:var(--muted)}
.sth{margin:1.6rem 0 .6rem;font-size:1rem;font-weight:800;color:var(--navy)}
.sth .sub{font-size:.8rem;font-weight:500;color:var(--muted);margin-left:.3rem}
.statbars{display:flex;align-items:flex-end;gap:2px;height:180px;padding:0 0 1.4rem;border-bottom:1px solid var(--line);position:relative}
.statbars .sb{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;min-width:0}
.statbars .sb:hover .sb-all{background:#c9d3ea}
.statbars .sb-all{position:absolute;bottom:0;left:15%;right:15%;background:#dde4f2;border-radius:3px 3px 0 0}
.statbars .sb-cf{position:absolute;bottom:0;left:15%;right:15%;background:#2a78d6;border-radius:3px 3px 0 0}
.statbars .sb i{position:absolute;bottom:-1.3rem;font-style:normal;font-size:.68rem;color:var(--muted);white-space:nowrap}
.statleg{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.5rem 0 0;font-size:.78rem;color:var(--muted)}
.statleg span{display:inline-flex;align-items:center;gap:.35rem;color:var(--ink)}
.statleg .sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.statleg .sw.cf{background:#2a78d6}.statleg .sw.all{background:#dde4f2}
.stattbl td{font-variant-numeric:tabular-nums}
.stattbl td:not(:first-child),.stattbl th:not(:first-child){text-align:right;white-space:nowrap}
.stattbl td:first-child{white-space:normal;font-weight:600}
.stattbl .pct{font-style:normal;font-size:.76rem;color:var(--muted);margin-left:.2rem}
.stattbl .muted{color:var(--muted)}
.stattwo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(max-width:760px){.stattwo{grid-template-columns:minmax(0,1fr)}}
/* 2026-10-10 글쓰기 — 분류를 제목 왼쪽에 */
.titlerow{display:grid;grid-template-columns:minmax(9.5rem,12rem) minmax(0,1fr);gap:.7rem;align-items:end}
.titlerow > div{display:grid;gap:.35rem;min-width:0}
.titlerow select,.writeform .titlerow input{box-sizing:border-box;height:50px;min-height:0}
.titlerow select{font-weight:700;color:var(--navy);background:var(--sky)}
@media(max-width:560px){.titlerow{grid-template-columns:minmax(0,1fr)}}
/* 2026-10-10 블로그 분류 더하기 — 글쓰기의 새 분류 칸 · 운영 관리의 분류 목록 */
.titlerow .tr-cat input#category_new{height:44px;margin-top:.4rem}
.titlerow .tr-cat input#category_new[hidden]{display:none}
.catlist{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.4rem}
.catlist li{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;padding:.55rem .8rem;border:1px solid var(--line);border-radius:10px;background:#fff}
.catlist .catname{color:var(--navy);min-width:9rem}
.catlist .catuse{font-size:.82rem;color:var(--muted)}
.catform{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0}
.catform input[type=text]{font:inherit;padding:.45rem .7rem;border:1px solid var(--line);border-radius:8px;width:12rem;max-width:100%}
.catadd{margin:.2rem 0 .4rem}
/* 2026-10-10 글쓰기 분류 칸 Select2 — 제목 칸과 같은 높이(50px) */
.titlerow .select2-container{width:100%!important;display:block}
.titlerow .select2-container>.selection{display:block}
.titlerow .select2-container--default .select2-selection--single{height:50px;display:flex;align-items:center;padding:0 2rem 0 .8rem;border:1px solid var(--line);border-radius:8px;background:var(--sky)}
.titlerow .select2-container--default .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.4;font-weight:700;color:var(--navy);flex:1;min-width:0}
.titlerow .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;top:0;right:.55rem}
.titlerow .select2-container--focus .select2-selection--single,.titlerow .select2-container--open .select2-selection--single{border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,38,86,.12)}
.select2-results__option .s2new{font-weight:700;color:var(--navy)}
/* 2026-10-12 HTML 글 도구줄 — 기본 편집기 도구줄(.ed-tools)을 그대로 쓰되 위에 붙지 않게 */
.hp-tools{position:static;border-radius:0;border-bottom:1px solid var(--line)}
.hp-tools.codemode [data-hp-cmd],.hp-tools.codemode .ed-block,.hp-tools.codemode .ed-sep{display:none}
.hp-imgbar[hidden]{display:none}
/* 2026-10-12 편집기 서식 늘리기 — 글 화면의 글자 서식 · 도구줄의 색 칸 · 글자 수 */
.blogbody mark,.ed-area mark{background:#fff59d;color:inherit;padding:.05em .15em;border-radius:3px}
.blogbody code,.ed-area code{font-family:Consolas,'Courier New',monospace;font-size:.92em;background:#f2f4f8;border:1px solid #e3e7ef;border-radius:4px;padding:.05em .35em}
.blogbody u,.ed-area u{text-underline-offset:3px}
.ed-tools .ed-mk{background:#fff59d;color:var(--ink);padding:.05em .3em;border-radius:3px;font-size:.8rem;font-weight:600}
.ed-tools .ed-cd{font-family:Consolas,'Courier New',monospace;font-size:.78rem;background:#f2f4f8;border:1px solid #e3e7ef;border-radius:4px;padding:.02em .3em}
.ed-tools .ed-ink{border-bottom:3px solid #c62828;padding:0 .15em}
.ed-pal{position:relative;display:inline-flex}
.ed-swatches{position:absolute;top:calc(100% + 4px);left:0;z-index:8;display:flex;gap:4px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(30,38,86,.16)}
.ed-swatches[hidden]{display:none}
.ed-tools .ed-swatches button{width:24px;height:24px;min-width:24px;padding:0;border:1px solid rgba(0,0,0,.15);border-radius:6px}
.ed-tools .ed-swatches button:hover{transform:scale(1.12);background-clip:padding-box}
.ed-tools .ed-swatches button.none{background:#fff;color:var(--muted);font-size:.9rem;line-height:1}
.hp-tools .ed-block + .ed-block{margin-left:3px}
.ed-count{margin-left:auto;margin-right:.6rem;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hp-count{margin:0;padding:.4rem .8rem 0;font-size:.78rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;background:var(--paper);border-top:1px solid var(--line)}
.hp-count:empty{display:none}
.hp-count + .hp-help{border-top:0}
/* 2026-10-12 기본 편집기 — 고른 구분선 */
.ed-area hr{cursor:pointer}
.ed-area hr.ed-sel{outline:3px solid #2a78d6;outline-offset:4px}
/* 2026-10-12 초안 지우기 */
.draftitem{display:block}
.draftacts{display:flex;gap:.4rem;justify-content:flex-end;align-items:center;padding:0 1rem .8rem}
.draftacts form{margin:0}
.btn.draftdel{color:#B42318;border-color:#E8B4AE}
.btn.draftdel:hover{background:#FDECEC;color:#B42318;border-color:#B42318}
.btn.draftdel::before{background:#B42318}
/* 2026-10-12 블로그 목록의 이중 테두리 — li.card 가 .cardlink 보다 우선해 바깥 테두리·여백이 남아 있었다 */
li.card.cardlink{padding:0;border:0;background:none}
/* 초안 목록은 '고치기·지우기' 줄까지 한 장으로 — 바깥 한 겹만 테두리 */
li.card.cardlink.draftitem{border:1px solid var(--line);background:#fff;border-radius:var(--r);overflow:hidden}
.draftitem .cardhit{border:0;border-radius:0}
.draftitem .cardhit:hover{box-shadow:none}
/* 초안 안내 줄 전체가 링크 */
a.draftbar.draftlink{text-decoration:none;color:inherit;cursor:pointer}
a.draftbar.draftlink:hover{border-color:#D9B45A;box-shadow:0 4px 14px rgba(138,90,0,.12)}
a.draftbar.draftlink span{flex:1 1 18rem;word-break:keep-all}
a.draftbar.draftlink i{font-style:normal;font-weight:700;font-size:.86rem;color:#8A5A00;white-space:nowrap}
/* 2026-10-16 메인 마감 임박 공고 — 내 채용정보 조건 한 줄 */
.jobmine{margin:-.2rem 0 .7rem;font-size:.84rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center}
.jobmine span{color:var(--navy);font-weight:700;background:var(--sky);border-radius:999px;padding:.1rem .6rem}
.jobmine a{color:var(--navy);font-weight:700;text-decoration:none}
.jobmine a:hover{text-decoration:underline}