/* ★ app.css 에 이미 있는 규칙은 여기 두지 않습니다.
   두 벌이 있으면 나중에 읽히는 이 파일이 이기는데, 그러면 app.css 를
   고쳐도 화면이 안 바뀝니다. 실제로 붙는 도구줄(.arow.stick)이 그랬습니다 —
   높이를 재서 맞추게 고쳤는데 여기 옛 판이 남아 덮고 있었습니다. */

/* ========================================================
   관리 화면 모양 — 마이페이지(/check/) 와 운영 화면(/admin/) 이 함께 씁니다.

   원래 /check/ 안에만 있었습니다. 그래서 출석·명단 화면을 운영 화면으로
   옮겼더니 글자만 줄줄이 늘어선 모양이 됐습니다 — 코드는 갔는데 모양이
   안 따라갔기 때문입니다.

   모양을 화면마다 따로 두면 이런 일이 계속 생깁니다.
   ======================================================== */
/* 출석현황에서만 쓰는 것들 */

/* ── 내 카드 ──────────────────────────────────────────
   로그인하면 맨 위에 내 기록부터 보여줍니다.
   지금 사이트는 닉네임을 검색해야 내 기록이 나옵니다.
   로그인을 했으니 검색은 없어도 됩니다.
   ──────────────────────────────────────────────────── */
.mine{background:linear-gradient(180deg,#fff,#FAF8F3);
  border:1px solid var(--line2);border-radius:var(--r2);padding:24px 26px;margin-bottom:20px}
.mine .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.mine .nick{font-family:var(--fh);font-weight:700;font-size:21px;letter-spacing:-.5px}
.mine .rd{font-size:12.5px;color:var(--ink3);margin-top:2px}
.mine .big{font-family:var(--fh);font-weight:700;font-size:30px;letter-spacing:-1px;
  line-height:1.2;text-align:right}
.mine .big small{font-family:var(--ff);font-size:14px;font-weight:400;color:var(--ink2);
  letter-spacing:0;margin-left:3px}

/* 환급 여부 — 이 사이트를 보는 가장 큰 이유입니다. 크게 보여줍니다. */
.verdict{margin-top:16px;padding:13px 16px;border-radius:var(--r);font-size:14.5px;line-height:1.7}
.verdict.pass{background:var(--green-bg);color:var(--green);border:1px solid #CBE3D2}
.verdict.miss{background:var(--amber-bg);color:var(--amber-ink);border:1px solid var(--amber-line)}
.verdict b{font-weight:700}

/* 주차별 막대 */
.wk{display:grid;gap:10px;margin-top:18px}
.wk .row{display:grid;grid-template-columns:52px 1fr 54px;gap:12px;align-items:center}
/* 서브 과제 줄 — 주차 막대와 같은 모양이되 셈에 안 들어가는 것이라
   선으로 한 번 끊고 색을 낮춥니다. 나란히 두면 합계에 들어가는 줄
   알게 됩니다. */
.wk .row.sub{margin-top:4px;padding-top:12px;border-top:1px dashed var(--line2)}
.wk .row.sub .lb{color:var(--ink3);font-size:12px}
.wk .row.sub .fill{background:var(--line2)}
.wk .row.sub .fill.full{background:var(--ink3)}
.subnote{margin:8px 0 0;font-size:12px;color:var(--ink3);line-height:1.6}

/* 출석표 서브 칸 — 합계 옆. 머리도 값도 회색으로 낮춥니다. */
.subh{color:var(--ink3) !important}
.wkin.sub{background:var(--card2);color:var(--ink2)}
.wkin.sub.ok{border-color:#CBE3D2}
.wkin.sub.bad{border-color:var(--red)}

/* 수료증 개별 발급 안내 아랫줄 */
.certrow .cnote{display:block;margin-top:4px;font-size:12px;color:var(--ink3);
  font-weight:400;line-height:1.6}
/* 글자 상자의 높이를 글자 크기에 딱 맞춥니다.
   줄 간격(line-height)이 남아 있으면 그 여백만큼 글자가 아래로 밀려서
   옆의 얇은 막대와 중앙이 어긋나 보입니다. */
.wk .lb{font-size:13px;color:var(--ink2);font-weight:600;line-height:1}
.wk .bar{height:10px;background:var(--card2);border-radius:999px;overflow:hidden;
  border:1px solid var(--line)}
.wk .fill{height:100%;background:var(--navy);border-radius:999px;transition:width .4s ease}
.wk .fill.full{background:var(--green)}
.wk .n{font-size:13px;color:var(--ink2);text-align:right;line-height:1}
.wk .n b{color:var(--ink);font-weight:700}

/* ── 수료증 ───────────────────────────────────────────── */
.certrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding-top:16px;border-top:1px dashed var(--line2)}
.certrow .t{font-size:14px;color:var(--ink2);flex:1;min-width:180px;line-height:1.7}
.certrow .t b{color:var(--ink);font-weight:700}
/* 못 받는 상태 — 회색이지만 누를 수는 있습니다. 눌러야 이유를 알려줄 수 있으니까요. */
.btn.off{background:var(--card2);color:var(--ink3);border-color:var(--line2)}
.btn.off:hover{background:var(--card2);border-color:var(--line2)}

/* ── 수료증 옆 단추 두 개 ──────────────────────────────
   환급 신청과 다음 기수 연장. 챌린지가 끝난 분이 가장 먼저 찾는 두 가지입니다.
   좁은 화면에서는 아랫줄로 내려가 세로로 쌓입니다. */
.certbtns{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.certbtns .btn{white-space:nowrap}
@media (max-width:520px){
  .certbtns{width:100%}
  .certbtns .btn{flex:1 1 auto;justify-content:center}
}


/* ── 기수 순위표 ──────────────────────────────────────── */
.board td.nk{white-space:normal}
.board tr.me{background:var(--navy-bg)}
.board tr.me td{font-weight:600}
.dots{display:inline-flex;gap:3px;vertical-align:-1px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.dot.on{background:var(--navy)}
.rank{color:var(--ink3);font-variant-numeric:tabular-nums}

/* ── 상위 몇 % ─────────────────────────────────────────
   ★ 오른쪽으로 갈수록 잘한 것입니다.

   막대는 어디서나 '오른쪽 = 좋음' 으로 읽힙니다. 진행률 막대가 다 그렇습니다.
   1등을 왼쪽에 두면, 잘하고 계신 분의 점이 맨 왼쪽 구석에 붙어서
   "나 뒤처졌나" 로 잘못 읽힙니다.

   채우기가 아니라 점을 찍습니다.
   채우기로 그리면 상위 11% 가 '11% 밖에 못 했다' 로 보입니다.
   ──────────────────────────────────────────────────── */
.pctbox{margin-top:18px;padding:16px 18px;border-radius:var(--r);
  background:var(--navy-bg);border:1px solid var(--navy-line)}
.pctbox .rt{font-size:15px;color:var(--navy-ink)}
.pctbox .rt b{font-family:var(--fh);font-weight:700;font-size:20px;letter-spacing:-.5px}
.pctbox .rt span{font-size:13px;color:var(--navy);margin-left:6px}
.pctbox .rbar{position:relative;height:8px;margin:14px 0 8px;border-radius:999px;
  background:linear-gradient(90deg,#DCE5F1 0%,#8FB0DC 45%,#2C4A7C 100%)}
.pctbox .rdot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--navy);transform:translate(-50%,-50%);
  box-shadow:0 2px 6px rgba(44,74,124,.35)}
.pctbox .rn{display:flex;justify-content:space-between;font-size:11.5px;color:var(--navy)}

/* ── 참여 이력 ────────────────────────────────────────── */
.hist{margin-top:18px}
.hist .hh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hist .chips{display:flex;gap:8px;flex-wrap:wrap}
.hist .chip{display:flex;flex-direction:column;gap:2px;min-width:74px;
  padding:11px 14px;border-radius:var(--r);background:var(--card2);
  border:1px solid var(--line)}
.hist .chip b{font-family:var(--fh);font-weight:700;font-size:15px;letter-spacing:-.3px}
.hist .chip span{font-size:12px;color:var(--ink3)}
.hist .chip.now{background:var(--navy-bg);border-color:var(--navy-line)}
.hist .chip.now b{color:var(--navy)}
.hist .chip.now span{color:var(--navy)}/* ── 명단 표 ──────────────────────────────────────────
   칸을 눌러 바로 고칩니다. 저장 버튼을 따로 두지 않았습니다.
   칸에서 빠져나오면 그 칸 하나만 서버로 갑니다.
   ──────────────────────────────────────────────────── */
.rin:hover{border-color:var(--line)}
.rin.mono{font-variant-numeric:tabular-nums}
td.w-nick{min-width:110px}
td.w-mail{min-width:180px}
td.w-acct{min-width:190px}
/* 계좌·번호는 기본으로 가려둡니다. 화면 공유나 옆자리 시선을 생각한 것입니다. */
.hidden-val{color:var(--ink3);letter-spacing:2px;user-select:none}
.statbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:10px;margin-bottom:14px}
.sb{background:var(--card2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px}
.sb b{display:block;font-family:var(--fh);font-size:22px;letter-spacing:-.5px}
.sb span{display:block;font-size:12px;color:var(--ink3);margin-top:3px;line-height:1.5}

/* 붙여넣기 미리보기 */
/* ── 안 들어간 글 ────────────────────────────────────────
   '기간 밖 6개' 만 적어두면 그 여섯이 무엇인지 알 길이 없습니다.
   접어두되, 펴면 누구 글이 언제 것이고 왜 빠졌는지 다 보입니다. */
.ptskip{margin:8px 0 10px;background:var(--amber-bg);border:1px solid var(--amber-line);
  border-radius:10px;padding:9px 12px}
.ptskip summary{cursor:pointer;font-size:12.5px;color:var(--amber-ink);list-style:none}
.ptskip summary::-webkit-details-marker{display:none}
.ptskip summary b{font-weight:700}
.ptskip summary:hover{text-decoration:underline}
.ptskiplist{margin-top:9px;display:grid;gap:5px;max-height:220px;overflow:auto}
.ptskiplist div{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-size:12.5px;background:var(--card);border-radius:7px;padding:5px 9px}
.ptskiplist b{font-weight:600}
.ptskiplist span{color:var(--ink3);font-size:12px}
.ptskiplist em{font-style:normal;margin-left:auto;color:var(--amber-ink);font-size:11.5px}
/* 반드시 봐주셔야 할 줄 — 같은 일차를 두 번 쓰신 것 */
.ptskiplist div.hot{background:var(--red-bg);border:1px solid #E9C5C5}
.ptskiplist div.hot em{color:var(--red);font-weight:700}
/* '봐주실 것' 은 알림이지 잘못이 아닙니다. 붉게 두지 않습니다. */
.ptskip.note{background:var(--card2);border-color:var(--line)}
.ptskip.note summary{color:var(--ink2)}

.ptlist{max-height:230px;overflow-y:auto;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
.ptrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
.ptrow:last-child{border-bottom:0}
.ptrow .rt{font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.ptrow .rt b{color:var(--navy)}
.ptmini{font-size:11px;margin-left:6px}
.ptmini.new{color:var(--amber-ink)}
.ptmini.over{color:var(--red)}
/* ── 명단 목록 ────────────────────────────────────────
   줄을 누르면 그 사람이 열립니다. 그래서 손가락 모양이 바뀌고,
   지나갈 때 줄 전체에 색이 깔립니다. 누를 수 있다는 표시입니다. */
.rolist tbody tr{cursor:pointer}
.rolist tbody tr:hover{background:var(--navy-bg)}
/* 번호·계좌 칸. 끌어서 복사하시라고 글자 고르기를 켜 둡니다.
   (줄 전체가 눌리는 표라 이 칸만 손가락 모양을 뺍니다) */
.rolist .w-sec{cursor:text;user-select:text;white-space:nowrap}/* ── 칸 끌어 모으기 (엑셀처럼) ─────────────────────────
   번호만 쭉 뽑아 알림톡에 넣거나, 계좌만 뽑아 은행에 붙여 넣는 일이 잦습니다.
   표에서 그냥 끌면 옆 칸(이름·기수)까지 딸려 와서 쓸 수가 없습니다.

   그래서 이 칸들은 위아래로 끌면 '그 줄의 그 칸' 만 골라집니다.
   손을 떼면 바로 복사까지 됩니다. 한 칸 안에서만 끄는 것은 그대로
   글자 고르기로 둡니다 — 번호 뒷자리만 집는 일도 있어서입니다. */

/* ── 줄 세우기 단추 (칸 제목 옆) ───────────────────────
   이름순·출석순으로 보고 싶다는 말씀이 있었습니다.
   따로 단추 줄을 만들면 화면만 복잡해져서, 칸 제목 자체를 누르게 했습니다.
   한 번 누르면 큰 것부터, 다시 누르면 작은 것부터, 세 번째는 원래대로입니다. */
th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:22px}
th.sortable:hover{color:var(--ink);background:var(--navy-bg)}
th.sortable .ar{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--line2);letter-spacing:-1px}
th.sortable.on{color:var(--navy)}
th.sortable.on .ar{color:var(--navy)}
.ck{display:inline-block;width:20px;text-align:center;color:var(--line2);font-size:14px}
.ck.on{color:var(--green);font-weight:700}

/* ── 한 사람 자세히 ──────────────────────────────────── */
.mbox.wide{max-width:900px}

/* 사람 팝업 두 칸.
   왼쪽은 고치는 것, 오른쪽은 보고 켜는 것. 전에는 넷이 세로로 이어져
   권한 하나 켜려고 팝업을 끝까지 내려야 했습니다. */
/* 제목 옆 곁말 — '고치면 3개 기수가 함께 바뀝니다' 같은 것 */
.posec h3 .h3n{margin-left:8px;font-size:11.5px;font-weight:600;
  letter-spacing:0;color:var(--ink3);text-transform:none}

/* ── 기수별 표 ────────────────────────────────────────────
   한 사람의 기수를 한 줄씩 놓습니다. 고치는 것은 전부 그 줄의
   기수에만 들어갑니다 — 수료증도 권한도 기수마다 따로입니다. */
.rdtl{width:100%;border-collapse:collapse;font-size:13px}
.rdtl th{font-size:11.5px;font-weight:700;color:var(--ink3);text-align:left;
  padding:0 9px 7px;white-space:nowrap}
.rdtl td{padding:7px 9px;border-top:1px solid var(--line);vertical-align:middle}
.rdtl td.ctr{text-align:center}
/* '2편 쓰고 3개 남김' 이 두 줄로 접히면 칸 높이가 들쭉날쭉해집니다 */
.rdtl td.nowrap{white-space:nowrap;font-size:12.5px}
.rdtl td.nowrap b{color:var(--ink);font-weight:600}
/* 지금 이 창을 연 기수 — 어디서 눌러 들어왔는지 잃지 않게 */
.rdtl tr.here td{background:var(--navy-bg)}
.rdtl .rin.sm{padding:5px 8px;font-size:13px;width:100%;min-width:96px}
.rdtl .csel{font-size:12px}

/* ── 의도 피드백 · 참가자 명단 ────────────────────────────
   찾는 칸은 표 바로 위에 붙입니다. 멀리 두면 마흔다섯 줄을 지나
   올라와야 해서, 찾을 때마다 스크롤을 두 번 굴리게 됩니다. */
.fbfind{display:flex;align-items:center;gap:10px;margin:10px 0}
.fbfind .tin{max-width:300px;padding:8px 12px}

/* 표가 가로로 길어 첫 칸(닉네임)이 밀려 나갑니다.
   누구 줄인지 모른 채 숫자만 보게 되므로 닉네임은 붙잡아 둡니다. */
.fbros th:first-child, .fbros td:first-child{position:sticky;left:0;
  background:var(--card);z-index:1}
.fbros td{white-space:nowrap}

/* ── 머리 줄 ──────────────────────────────────────────────
   .rdtl 의 기본 머리는 사람 팝업 안 작은 표에 맞춰져 있습니다
   (글자 11.5px · 위 여백 0). 그 모양 그대로 마흔다섯 줄짜리 본표에
   쓰니 머리가 눌린 것처럼 좁고 글씨가 잘 안 보였습니다.

   이 표는 한참 내려가며 보는 표라, 머리가 아래 값과 같은 무게로
   읽혀야 합니다. 글자를 키우고 위아래를 벌리고, 바탕을 한 겹 깔아
   '여기서부터 값' 이라는 선을 만듭니다. */
.fbros th{font-size:12.5px;padding:11px;background:var(--card2);
  border-bottom:1px solid var(--line);vertical-align:middle}
.fbros thead tr:first-child th:first-child{border-top-left-radius:9px}
.fbros thead tr:first-child th:last-child{border-top-right-radius:9px}
.fbros td{padding:9px 11px}

/* 가운데로 둘 때는 정렬 화살표 자리를 양쪽에 똑같이 비워야
   글자가 왼쪽으로 밀려 보이지 않습니다. */
.fbros th.ctr, .fbros td.ctr{text-align:center}
.fbros th.sortable.ctr{padding-left:24px;padding-right:24px}

/* ── 칸 너비 ──────────────────────────────────────────────
   아무 말도 안 하면 남는 폭을 아무 칸이나 나눠 가집니다.
   그래서 대부분 비어 있는 '상태' 칸이 제일 넓어져 있었습니다.

   늘어나도 되는 칸은 닉네임 하나뿐입니다 — 이름은 길이가 제각각이고,
   나머지는 배지 하나 · 숫자 하나라 늘어날 이유가 없습니다.
   닉네임에 100% 를 주면 나머지가 제 내용만큼만 차지합니다. */
.fbros th, .fbros td{width:1%;white-space:nowrap}
.fbros th:nth-child(2), .fbros td:nth-child(2){width:100%}

.fbros td.w-no{color:var(--ink3);font-size:12px}
.fbros th:first-child{color:var(--ink3)}

/* 가려둔 번호. 눌러서 여는 단추라는 것이 보여야 합니다 —
   그냥 ●●●● 만 있으면 고장 난 칸으로 읽힙니다. */
.veilmini{border:1px solid var(--line);background:var(--card2);color:var(--ink3);
  border-radius:7px;padding:2px 9px;font-size:12px;cursor:pointer;font-family:inherit;
  letter-spacing:1px}
.veilmini:hover{border-color:var(--navy);color:var(--navy)}

/* ── 운영·리허설 계정 표시 ───────────────────────────────
   회원 정보 칸들과 같은 상자 안에 두되, 성격이 달라 선으로 나눕니다.
   위는 '이 사람이 누구인가' 이고 이것은 '이 줄을 셀 것인가' 입니다. */
/* 스위치 둘을 나란히. 좁은 화면에서는 아래로 내려갑니다. */
.poswitch{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){ .poswitch{grid-template-columns:1fr} }

.pocrew{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.pocrew input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--navy)}
.pocrew b{display:block;font-size:13.5px;font-weight:600}
.pocrew small{display:block;font-size:12px;color:var(--ink3);line-height:1.65;margin-top:2px}
/* 이름 규칙으로 이미 빠지는 계정 — 끌 수 없다는 것이 보여야 합니다 */
.pocrew.locked{cursor:default;opacity:.7}
/* 스위치가 둘이라 사이에 선을 넣으면 상자가 답답해집니다. 여백만 둡니다. */

/* 띠 안의 이름 옆 작은 까닭표 — 왜 이 목록에 있는지 */
.rowarn .who .nmlink small{margin-left:5px;font-size:11px;color:var(--ink3);font-weight:400}

/* ── 무엇을 썼나 (개수 → 목록) ───────────────────────────
   개수 자체가 단추입니다. 처음부터 단추처럼 생기면 표가 시끄러워지고,
   아무 표시도 없으면 눌러볼 생각을 안 하십니다.
   그래서 평소에는 밑줄만 두고, 얹으면 그때 알약이 됩니다. */
.wbtn{border:0;background:none;padding:1px 3px;margin:0 -2px;border-radius:6px;
  font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
  text-decoration-color:var(--line2)}
.wbtn:hover{background:var(--navy-bg);text-decoration-color:var(--navy)}
.wbtn.on{background:var(--navy);color:#fff;text-decoration:none}
.wbtn.on b{color:#fff}

.wlist{display:grid;gap:8px;margin-top:10px}
.wrow{display:flex;align-items:center;gap:14px;
  background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px}
.wmain{flex:1;min-width:0}
.wtop{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.wtop b{font-size:13px}
.wrow p{margin:0;font-size:13px;line-height:1.7;color:var(--ink2)}
.wrow .btn{flex:none;white-space:nowrap}
/* 숨긴 글·피드백도 보여드립니다. 다만 세는 것에서는 빠진 것이라 흐리게. */
.wrow.hid{opacity:.6}

/* 건너온 그 피드백 — 두 번 깜빡이고 사라집니다.
   남아 있으면 '이게 골라진 건가' 하고 누르게 됩니다. */
@keyframes fbflash{
  0%,100%{background:transparent;box-shadow:none}
  20%,60%{background:var(--navy-bg);box-shadow:0 0 0 2px var(--navy) inset}
}
.fbitem.flash{animation:fbflash 1.2s ease-in-out 2;border-radius:10px}

/* ── 피드백 번호 바로가기 ─────────────────────────────────
   열세 개가 달린 글에서 '아까 그 여섯 번째' 를 다시 찾으려면 화면을
   굴리며 번호를 세게 됩니다. 위에 번호만 한 줄로 깔아둡니다.
   글 목록의 번호 알약과 같은 모양입니다 — 같은 일(골라서 가기) 이
   화면마다 다르게 생기면 그때마다 다시 배우게 됩니다. */
.fbjump{display:flex;flex-wrap:wrap;gap:5px;margin:-4px 0 12px}
.fbjump .rnd.sm{padding:3px 10px;font-size:12.5px;min-width:30px}
.fbjump .rnd.off{opacity:.45}

/* 피드백 한 줄의 단추들. 오른쪽 끝에 모읍니다 —
   전에는 '숨기기' 하나라 margin-left:auto 로 밀어뒀는데,
   셋이 되니 묶어서 다루는 것이 낫습니다. */
.fbitem .fbact{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
/* 셋이 나란히 서는 자리라 좁습니다. 오른쪽 칸이 500px 남짓이라
   기본 여백으로는 '지우기' 가 화면 밖으로 밀립니다. */
.fbitem .fbact .btn.sm{padding:3px 9px;font-size:12px}

/* 고치는 중 — 그 줄만 도드라지게 둘러둡니다.
   창을 안 띄우는 대신 '지금 여기가 고쳐지는 중' 이 보여야 합니다. */
.fbitem.editing{background:var(--card2);border:1px solid var(--navy);
  border-radius:10px;padding:12px 14px;margin:8px 0}
.fbitem.editing .ta2{min-height:0;margin-top:5px;font-size:13.5px}

/* ── 이름 내력 ───────────────────────────────────────────
   기수 흐름은 한 줄로 흘려 적습니다 — 표로 만들면 아래 기수별 표와
   똑같이 생겨서 무엇이 다른지 안 보입니다. 흐름은 흐름처럼 보여야 합니다.
   좁은 화면에서는 줄이 접힙니다(wrap). 가로로 밀리면 화살표를 놓칩니다. */
/* 갈래마다 한 줄 — 왼쪽에 무엇의 내력인지, 오른쪽에 흐름 */
.nmrow{display:grid;grid-template-columns:82px 1fr;gap:10px;align-items:start;
  padding:9px 0;border-top:1px solid var(--line)}
.nmrow:first-child{border-top:0}
.nmrow > i{font-style:normal;font-size:12px;color:var(--ink3);padding-top:7px}
.nmflow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:2px 0}
.nmstep{display:inline-flex;align-items:baseline;gap:6px;
  background:var(--navy-bg);border-radius:8px;padding:5px 11px}
.nmstep b{font-size:13.5px;font-weight:600}
.nmstep small{font-size:11.5px;color:var(--ink3)}
.nmar{color:var(--ink3);font-size:13px}

/* 한 기수 안에서 바꾼 것 — 기록에만 남는 것이라 날짜를 함께 답니다 */
/* 메일·네이버가 기수마다 다를 때 회원 정보 아래 붙는 한 줄 */
.pomemo{margin-top:12px;padding:9px 11px;background:var(--amber-bg);
  border-radius:8px;font-size:12px;line-height:1.65;color:var(--amber-ink)}
.pomemo b{font-weight:700}

.nmlog{margin-top:8px;border-top:1px solid var(--line)}
.nmlog div{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  font-size:13px;padding:7px 0;border-top:1px solid var(--line)}
.nmlog b{font-size:12.5px;color:var(--ink3);font-weight:700}
.nmlog small{margin-left:auto;font-size:11.5px;color:var(--ink3)}

/* ── 왜 신청하셨는지 ─────────────────────────────────────── */
.why{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--line)}
.why b{font-size:12.5px;color:var(--ink3)}
.why p{margin:0;font-size:13.5px;line-height:1.7;white-space:pre-wrap}
.mtop h2{margin:0}
.pohead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.pohead .n{font-family:var(--fh);font-weight:700;font-size:24px;letter-spacing:-.6px}
.pohead .s{font-size:13px;color:var(--ink3);margin-top:3px}
.pohead .big{font-family:var(--fh);font-weight:700;font-size:30px;letter-spacing:-1px;
  color:var(--navy);line-height:1}
.pohead .big small{font-size:14px;color:var(--ink3);margin-left:3px;font-weight:400}


.posec{margin-top:22px}
.posec h3{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--navy);
  margin-bottom:12px}
.pogrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

@media (max-width:620px){.pogrid{grid-template-columns:1fr}}
/* min-width:0 이 없으면 안이 넓은 칸(긴 메일 주소·긴 단추)이
   격자를 밀어내면서 상자 밖으로 삐져나갑니다. */
.pofld{min-width:0}
.pofld label{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:5px}
.pofld .rin{width:100%;min-width:0;display:block;
  border-color:var(--line);background:var(--card);padding:8px 10px;font-size:14px}
.pofld .h{font-size:11.5px;color:var(--ink3);margin-top:5px;line-height:1.6}
/* 이름을 .veil 로 둡니다.
   app.css 에 .peek 가 이미 있습니다 (로그인 칸의 '보기' — position:absolute).
   같은 이름을 쓰면 이 단추가 화면 가로로 늘어나 버립니다. 실제로 그랬습니다. */
.rin.veil{text-align:left;cursor:pointer;color:var(--ink3);background:var(--card2)}
.rin.veil:hover{border-color:var(--navy);color:var(--navy)}

.powk{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.wkf{display:flex;flex-direction:column;gap:5px}
.wkf span{font-size:12.5px;color:var(--ink3)}
.wkf .tin{width:84px;text-align:center}
.wkf.sum b{font-family:var(--fh);font-size:22px;letter-spacing:-.5px;
  padding:6px 0 0 6px;display:inline-block}

.poperm{display:grid;gap:12px}
.pochk{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5}
.pochk>span{flex:1;min-width:0}
.pochk b{display:block;font-weight:600}
.pochk em{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:2px}

/* ── 팝업 맨 아래 저장 줄 ─────────────────────────────
   고친 것은 여기서 저장을 눌러야 반영됩니다.
   화면을 끝까지 내리지 않아도 보이도록 아래에 붙여 둡니다. */
.posave{position:sticky;bottom:-22px;margin:22px -22px -22px;padding:14px 22px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card);border-top:1px solid var(--line);
  border-radius:0 0 var(--r2) var(--r2)}
.posave .st{flex:1;min-width:150px;font-size:13px;color:var(--ink3)}
.posave .st.on{color:var(--amber-ink);font-weight:600}
/* 고친 것이 없을 때는 저장 단추를 흐리게 둡니다.
   누를 수는 있게 둡니다 — 눌러야 '고친 것이 없습니다' 라고 말해줄 수 있습니다. */
.posave .btn.off{background:var(--card2);color:var(--ink3);border-color:var(--line2)}/* 입금확인 — 통장 보고 체크만 하는 칸이라 좁게 두고 가운데로 모읍니다. *//* 상태 딱지 = 고르는 칸.
   고르는 칸을 딱지 위에 투명하게 덮어둡니다. 눈에는 딱지만 보이지만
   실제로 눌리는 것은 고르는 칸이라, 브라우저가 알아서 목록을 엽니다. *//* 키보드로 옮겨왔을 때 어디에 와 있는지는 보여야 합니다. */
.roschk{width:18px;height:18px;accent-color:var(--navy);cursor:pointer;vertical-align:-3px}
.dupes{display:inline-flex;gap:4px;flex-wrap:wrap}

/* ── 접었다 펴는 안내 ─────────────────────────────────── */
.howto{background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}
.howto summary{cursor:pointer;list-style:none;padding:15px 18px;font-size:14.5px;
  font-weight:600;position:relative}
.howto summary::-webkit-details-marker{display:none}
.howto summary::after{content:'+';position:absolute;right:18px;top:12px;
  font-size:19px;color:var(--ink3);font-weight:400}
.howto[open] summary::after{content:'−'}
.howto summary:hover{background:var(--card2)}
.howto .hbody{padding:0 20px 20px;border-top:1px solid var(--line);padding-top:16px}
.howto ol{list-style:decimal;padding-left:20px;display:grid;gap:16px}
.howto li{font-size:14px;line-height:1.75}
.howto code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;background:var(--card2);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px}
.hnote{display:block;font-size:13px;color:var(--ink3);line-height:1.75;margin-top:5px}
.hcode{margin:9px 0 4px;padding:13px 15px;background:#2E3A44;color:#E6E3DC;
  border-radius:var(--r);overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.7;white-space:pre}
.hcode b{color:#FFD98A;font-weight:600}/* ── 신청서 표 ────────────────────────────────────────── */
.gsent{font-size:11.5px}
.gsent.no{color:var(--red);font-weight:600}
.gsent.ok{color:var(--ink3)}/* 구글로 갔는가 — 글자보다 O · X 가 한눈에 들어옵니다.
   눈이 흐릿한 자리에서도 색으로 먼저 읽히도록 초록 · 빨강을 씁니다. */

/* ── 환급 신청 폼 ─────────────────────────────────────── */
.rgrid{display:grid;gap:12px}
.rgrid label{display:block;font-size:13.5px;font-weight:600;color:var(--ink2)}
.rgrid .tin,.rgrid .ta2{margin-top:5px}
.rgrid .req{color:var(--red)}
.ta2{width:100%;min-height:76px;padding:11px 13px;border:1px solid var(--line2);
  border-radius:var(--r);line-height:1.7;background:var(--card);font-size:14px;
  font-family:inherit;resize:vertical}
.ta2:focus{outline:none;border-color:var(--navy)}
.rgrid label.chk{font-weight:400;font-size:13.5px;color:var(--ink2);
  display:flex;gap:8px;align-items:flex-start;line-height:1.6}
.rgrid label.chk input{width:17px;height:17px;accent-color:var(--navy);
  cursor:pointer;flex:none;margin-top:1px}/* 톡 칸 — 아직 안 보냈거나 실패한 줄은 눌러서 보낼 수 있어야 합니다.
   그래서 O 는 그냥 표시(gmark)지만 X · – 는 단추입니다. *//* 메모 — 비어 있을 때가 훨씬 많은데 자리는 제일 많이 먹습니다.
   그래서 평소에는 접어두고, 쓸 때만 폅니다.
   접혀 있어도 이미 적힌 메모는 점으로 표가 납니다 — 접었다고 잊히면 안 됩니다. *//* 적힌 메모가 있는 줄. 빈 칸 스무 개 사이에서 하나를 찾는 일이라 물들여 둡니다.
   ★ :not(.saved) 를 붙인 이유 — 이 줄이 .rin.saved 보다 뒤에 있어서,
     그냥 두면 저장 직후 잠깐 뜨는 초록 표시를 이 노랑이 덮어버립니다.
     '저장됐다' 는 신호가 안 보이면 저장이 안 된 줄 알고 다시 누르시게 됩니다. */

/* ── 관리자 ───────────────────────────────────────────── */
.wkin{width:52px;padding:6px 8px;border:1px solid var(--line2);border-radius:7px;
  text-align:center;font-variant-numeric:tabular-nums}
.wkin:focus{outline:none;border-color:var(--navy)}
.wkin.dirty{border-color:var(--amber-ink);background:var(--amber-bg)}/* 표가 긴 화면(신청서·환급)에서는 도구줄을 위에 붙여둡니다.

   왜 필요한가
   ─────────────
   '메모 펴기/접기' 가 표 위에만 있어서, 스무 줄쯤 내려간 뒤에는
   접으려면 맨 위까지 다시 올라가야 했습니다. 펴는 것은 아무 데서나
   되는데 접는 것만 안 되니, 한 번 펴면 그냥 두게 됩니다.

   검색·가리기도 같은 사정이라 도구줄째로 붙입니다.
   ★ top 을 0 이 아니라 머리띠 높이만큼 내렸습니다.
     맨 위 머리띠(header)가 이미 sticky 라, 0 으로 두면 그 밑으로 숨습니다.
     z-index 도 머리띠(40)보다 낮게 두어 머리띠가 위에 오게 합니다. */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:700px){.grid3{grid-template-columns:1fr}}

/* ── 칸 고르개 ────────────────────────────────────────────
   신청서 칸 열일곱 개 중 평소 보는 것만 켜둡니다.
   가리는 것이지 지우는 것이 아닙니다 — 엑셀에는 전부 나옵니다. */
.colpick{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;
  background:var(--card2);border:1px solid var(--line);border-radius:var(--r2);padding:10px}
.colchip{font-family:inherit;font-size:12.5px;cursor:pointer;padding:5px 11px;
  border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--ink3)}
.colchip:hover{border-color:var(--ink3)}
.colchip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.colchip.re{margin-left:auto;color:var(--ink2);border-style:dashed}
/* 저장 단추가 없는 까닭. 누를 때마다 이미 저장되고 있습니다. */
.colnote{flex-basis:100%;margin:4px 0 0;font-size:12px;color:var(--ink3);line-height:1.6}

/* 메모 칸 — 다 쓰고 그 자리에서 바로 접습니다 */
.memowrap{display:flex;gap:6px;align-items:center}
.memowrap .rin{flex:1;min-width:0}
.memoclose{flex:none;font-family:inherit;font-size:15px;line-height:1;cursor:pointer;
  width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);
  background:var(--card2);color:var(--ink3)}
.memoclose:hover{background:var(--card);color:var(--ink);border-color:var(--ink3)}

/* ── 그림 단추 한 칸 ──────────────────────────────────────
   '지우기' 넉 자가 늘 자리를 잡고 있으면, 매일 보는 칸이 그만큼
   가로로 밀립니다. 한 해에 몇 번 쓰는 것은 한 칸이면 충분합니다. */
.w-ic{width:38px;text-align:center;padding-left:4px;padding-right:4px}
/* 그림은 선으로 그린 것만 씁니다.
   이모지는 브라우저가 제 색으로 그려버려 화면 톤과 따로 놉니다. */
.icb{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  width:28px;height:28px;border-radius:8px;border:1px solid transparent;
  background:transparent;color:var(--ink3);transition:color .12s,background .12s}
.icb:hover{color:var(--ink);background:var(--card2);border-color:var(--line2)}
/* 지우기는 가만히 있을 때도 붉게. 셋이 나란히 붙어 있어서,
   눌러봐야 무엇인지 아는 단추가 되면 손이 미끄러집니다.
   ★ 명단 표에도 같은 단추가 있어 거기도 함께 붉어집니다 —
     같은 일을 하는 단추가 화면마다 다르게 생기면 안 됩니다. */
.icb.del{color:var(--red)}
.icb.del:hover{color:var(--red);background:var(--red-bg);border-color:#E9C5C5}
/* 지금 숨겨져 있는 것. 눌러야 다시 보이는 상태라 켜둔 티를 냅니다 —
   그림만 바뀌면 지나칩니다. */
.icb.off{color:#A26A00;background:#FFF8E6;border-color:#E8C877}
.icb.off:hover{color:#7A5000;background:#FDF0CE;border-color:#D9B45C}

/* 여는 단추 — 무엇이 열리는지 글자로 적습니다 */
.w-open{width:1%;white-space:nowrap;text-align:center}
.w-open .btn{padding:4px 10px}

/* 긴 글은 한 줄로 줄여 보여줍니다. 전체는 신청서 한 장에서 봅니다. */
.w-long{max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink2)}

/* ── 참여 기수 알 ─────────────────────────────────────────
   '1기 · 2기 · 3기' 는 넉 자짜리가 세 번 이어져 한 칸을 다 먹습니다.
   알고 싶은 것은 '몇 기에 있었고 그중 어디를 수료했나' 뿐입니다. */
.rdots{display:inline-flex;gap:4px;vertical-align:middle}
.rdot{display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;font-size:11.5px;font-weight:700;
  background:var(--card2);color:var(--ink3);border:1px solid var(--line2)}
.rdot.ok{background:var(--green);border-color:var(--green);color:#fff}

/* ── 신청서 한 장 ─────────────────────────────────────────
   표에 없는 칸까지 전부 폅니다. 긴 글도 여기서는 접히지 않습니다. */
.apvlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 22px}
.apv{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.apv dt{font-size:12px;font-weight:700;color:var(--ink3);margin:0}
.apv dd{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink);
  white-space:pre-wrap;word-break:break-word}
/* 볼 수만 있는 칸 — 왜 못 고치는지는 마우스를 올리면 나옵니다 */
.apv dd.lock{color:var(--ink3)}
.apv dd .rin{width:100%;font-size:13.5px}
.apv dd .rin.ta{min-height:64px;resize:vertical;line-height:1.6}
/* 긴 글은 한 줄을 통째로 씁니다 */
.apv.wide{grid-column:1/-1;grid-template-columns:88px 1fr}
.mtop .note{font-size:12.5px;color:var(--amber-ink);font-weight:600}

/* ── 의도 피드백 · 참여 현황 ──────────────────────────────
   늘 필요한 것은 '3명 안 냈습니다' 까지입니다.
   누구인지는 볼 때만 폅니다 — 마흔 개 이름이 늘 떠 있으면
   정작 숫자가 안 보입니다. */
.fbcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.fbcard2{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:14px 16px}
.fbcard2.warn{border-color:var(--amber-line);background:#FEFBF4}
.fbcard2 .t{font-size:12.5px;font-weight:700;color:var(--ink3)}
.fbcard2 .v{font-family:var(--fh);font-size:30px;font-weight:700;letter-spacing:-1px;
  margin:4px 0 2px}
.fbcard2 .v small{font-size:14px;font-weight:400;color:var(--ink3);margin-left:2px}
.fbcard2 .d{font-size:12px;color:var(--ink3);line-height:1.55}
.fbcard2 details{margin-top:9px}
.fbcard2 summary{cursor:pointer;font-size:12px;color:var(--navy);font-weight:600}
.fbcard2 .who{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.fbcard2 .who span{font-size:12px;background:var(--card2);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px;color:var(--ink2)}

/* 숨긴 글의 번호 알약 */
.rnd.off{opacity:.45;text-decoration:line-through}
.rnd b{color:var(--red)}
/* 글 번호 줄은 한 줄로 둡니다.

   두 줄로 넘어가면 '몇 번까지 있나' 가 한눈에 안 들어오고, 줄이 바뀌는
   자리가 글 개수에 따라 달라져 볼 때마다 자리가 흔들립니다.
   넘치면 줄을 바꾸지 말고 옆으로 밉니다.

   ★ 위아래 여백을 둡니다.
     오른쪽 위 모서리의 빨간 점이 알약 밖으로 3px 나와 있습니다.
     가로로 밀 수 있게 만들면 세로도 함께 잘리는데, 여백이 없으면
     그 점이 잘려 나갑니다. 여백만큼 음수 margin 으로 되돌려
     자리는 그대로 두었습니다. */
.fbnums{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
        padding:6px 2px;margin:-6px -2px 12px;
        scrollbar-width:thin}

/* 한 줄에 다 넣으려고 알약을 눌러 찌그러뜨리면 안 됩니다.
   글자가 뭉개져서 한 줄로 만든 보람이 없어집니다. 크기는 지키고 밀립니다. */
.fbnums .rnd{flex:0 0 auto}

/* 글 번호 알약은 기수 단추보다 작게 둡니다.

   기수는 넷뿐이지만 글은 열여섯, 앞으로 더 늘어납니다. 같은 크기로
   두면 한 줄에 안 들어가 옆으로 밀어야 합니다 — 밀어야 보이는 것은
   안 보이는 것과 비슷합니다.

   글꼴은 살짝만 줄입니다. 여기서 더 줄이면 숫자 둘을 견주기가
   어려워져, 개수를 적어둔 뜻이 없어집니다. */
.fbnums{gap:5px}
.fbnums .rnd{padding:5px 10px;font-size:12.5px}
.fbnums .no{min-width:18px;height:18px;padding:0 5px;
            font-size:11.5px;vertical-align:-4px}
.fbnums .cnt{margin-left:4px;font-size:10.5px}
.fbnums .need{top:-2px;right:-2px;width:8px;height:8px}

/* 번호 알약 — 글 번호 · 피드백 개수 · 새것 표시
   ────────────────────────────────────────────────
   점을 알약 안에 두었더니 숫자와 나란히 붙어 '무슨 기호인가' 로
   보였습니다. 오른쪽 위 모서리로 뺍니다. 알림 표시가 대개 그 자리에
   붙어서, 뜻을 따로 설명하지 않아도 '새것' 으로 읽힙니다. */
.rounds .rnd{position:relative;overflow:visible}

/* 글 번호. 남색 동그라미에 흰 숫자.

   ★ 테두리만 두르는 것에서 바꿨습니다.
     알약 자체가 이미 테두리 있는 동그란 모양이라, 그 안에 테두리
     동그라미를 또 두니 선이 겹쳐 숫자가 묻혔습니다.
     속을 채우면 선이 하나 줄고 숫자가 또렷해집니다.

   동그라미를 CSS 로 그리고 숫자는 그냥 숫자로 둡니다.
   유니코드 ①②③ 은 동그라미와 숫자가 한 글자라, 키워도 안의 숫자가
   절반밖에 안 됩니다. 이렇게 하면 숫자가 본문 크기로 나옵니다.
   두 자리면 옆으로 늘어나 알약이 됩니다 — 숫자를 줄이는 것보다 낫습니다. */
.no{display:inline-flex;align-items:center;justify-content:center;
    min-width:21px;height:21px;padding:0 6px;box-sizing:border-box;
    border:0;border-radius:999px;
    background:var(--navy);color:#fff;
    font-style:normal;font-size:13px;font-weight:700;line-height:1;
    vertical-align:-5px}

/* 고른 알약은 남색 바탕이라 남색 동그라미가 묻힙니다. 색을 뒤집습니다. */
.rnd.on .no{background:#fff;color:var(--navy)}

/* 피드백 개수. 눈에 덜 띄게 — 먼저 보여야 하는 것은 글 번호입니다. */
.cnt{display:inline-block;margin-left:5px;font-size:11px;font-weight:600;
     font-style:normal;opacity:.55;vertical-align:1px}
.rnd.on .cnt{opacity:.85}

/* 하루 안에 새 피드백이 온 글. 오른쪽 위 모서리.
   테두리를 바탕색으로 둘러 알약 선 위에 얹혀도 또렷하게 보이게 합니다. */
.need{position:absolute;top:-3px;right:-3px;
      width:9px;height:9px;border-radius:50%;
      background:var(--red);border:2px solid var(--card,#fff)}

/* 설명 줄에서는 글 속에 놓이므로 자리를 되돌립니다. */
.note .need{position:static;margin:0 3px 0 0;display:inline-block;
            vertical-align:0;border-width:0}

/* ── 글 한 편과 그 글의 피드백 ────────────────────────────
   왼쪽은 글, 오른쪽은 받은 피드백. 나란히 놓아야 '이 글에 왜
   피드백이 안 붙었나' 를 견주며 볼 수 있습니다. */
.fbsplit{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:900px){.fbsplit{grid-template-columns:1fr}}
.fbpane{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:16px 18px}
.fbtext{font-size:15px;line-height:1.85;white-space:pre-wrap;word-break:break-word}
.fbbox{margin-top:12px;background:var(--card2);border-radius:var(--r2);padding:11px 13px}
.fbbox b{display:block;font-size:12px;color:var(--ink3);margin-bottom:4px}
.fbbox p{margin:0;font-size:13.5px;line-height:1.7;white-space:pre-wrap}
.fbh{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--navy);margin:0 0 12px}
.fbitem{border-top:1px solid var(--line);padding:12px 0}
.fbitem.hid{opacity:.45}
.fbitem .tags{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.fbitem .num{font-family:var(--fh);font-weight:700;color:var(--ink3);margin-right:2px}
.fbitem .fbsec{font-size:13.5px;line-height:1.7;margin-top:7px;white-space:pre-wrap}
.fbitem .fbsec b{display:block;font-size:11.5px;color:var(--ink3);margin-bottom:2px}

/* ── 명단에서 짚어두는 것 ─────────────────────────────────
   표 위에 둡니다. 표 안에 섞어두면 마흔 줄 중 어느 줄인지 못 찾습니다. */
/* ── 짚어주는 띠 ──────────────────────────────────────────
   제목 한 줄만 늘 보이고, 설명과 이름은 접어둡니다.
   설명이 네 줄인데 이름은 하나뿐인 날이 많습니다 — 그 네 줄이 늘
   깔려 있으면 정작 봐야 할 표가 화면 밖으로 밀립니다. */
.rowarn{background:var(--red-bg);border:1px solid #E9C5C5;border-radius:var(--r2);
  margin-bottom:8px;overflow:hidden}
.rowarn.ask{background:var(--amber-bg);border-color:var(--amber-line)}

.rowarn-t{display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;
  padding:9px 14px}
.rowarn-t:hover{background:rgba(0,0,0,.03)}
.rowarn b{font-size:13.5px;color:var(--red)}
.rowarn.ask b{color:var(--amber-ink)}
/* 몇 명인지는 제목 옆에 알약으로. 접혀 있어도 '있다/없다' 를 압니다. */
.rowarn-t i{font-style:normal;font-size:11.5px;font-weight:700;
  background:rgba(0,0,0,.06);border-radius:999px;padding:1px 8px;color:inherit}
.rowarn-t .ar{margin-left:auto;font-size:11.5px;color:var(--ink3);font-weight:600}

.rowarn-b{padding:0 14px 12px}
.rowarn span{font-size:12.5px;color:var(--ink2);line-height:1.6}
.rowarn .who{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:9px}
.rowarn .pair{display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px 4px 3px 11px}
.rowarn .pair em{font-style:normal;color:var(--ink3);font-size:11.5px}
.rowarn .pair .btn.sm{padding:2px 9px;font-size:11.5px}

/* ── 지난 기수에서 데려오기 ───────────────────────────────
   한 명씩 다시 넣는 대신 지난 기수 명단에서 골라옵니다.
   수료하신 분이 위로 옵니다 — 이어서 하실 분이 대개 그쪽입니다. */
.brlb{font-size:12.5px;font-weight:600;color:var(--ink3)}
.brar{color:var(--ink3)}
.brlist{max-height:52vh;overflow-y:auto;border:1px solid var(--line);
  border-radius:var(--r2);background:var(--card)}
.brrow{display:grid;grid-template-columns:20px 1fr 1fr auto 46px;gap:10px;
  align-items:center;padding:9px 13px;border-bottom:1px solid var(--line);
  cursor:pointer;font-size:13.5px}
.brrow:last-child{border-bottom:0}
.brrow:hover{background:var(--card2)}
.brrow.off{opacity:.45;cursor:default}
.brrow.off:hover{background:transparent}
.brrow .nm{font-weight:600}
.brrow .rn{color:var(--ink3)}
.brrow .bd{display:flex;gap:4px;flex-wrap:wrap}
.brrow .tt{text-align:right;font-family:var(--fh);color:var(--ink3);font-size:12.5px}
@media (max-width:620px){
  .brrow{grid-template-columns:20px 1fr auto;gap:8px}
  .brrow .rn,.brrow .tt{display:none}
}

/* ── 표에서 바로 고치기 ───────────────────────────────────
   이름 오타 하나 고치려고 창을 열고 저장하고 닫는 다섯 걸음을
   걸으셨습니다. 늘 열어두면 복사하려다 글자가 바뀌므로,
   고칠 때만 켜는 스위치로 둡니다. */
.rolist .cin{width:100%;min-width:92px;font-family:inherit;font-size:13px;
  padding:5px 8px;border:1px solid var(--line2);border-radius:7px;
  background:var(--card);color:var(--ink)}
.rolist .cin:focus{outline:none;border-color:var(--navy);background:#fff}
.rolist .cin.ok{border-color:var(--green);background:var(--green-bg)}
.rolist .cin.bad{border-color:var(--red);background:var(--red-bg)}
.rolist .cin:disabled{opacity:.6}

/* ── 글 고치기 · 대신 피드백 ──────────────────────────────
   보던 자리에서 폅니다. 창을 따로 띄우면 원래 글과 견주며 고칠 수가
   없는데, 대개 '어디가 깨졌나' 를 보며 고칩니다. */
.fbedit .fld,.fbwrite .fld{margin-bottom:12px}
.fbedit .fld label,.fbwrite .fld label{display:block;font-size:12.5px;font-weight:700;
  color:var(--ink3);margin-bottom:5px}
.fbwrite{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.fbwrite .rowsp{margin-bottom:12px}
.fbwrite .colpick{background:transparent;border:0;padding:0}


/* ── 위로 가기 (table.js 가 몸통에 붙입니다) ────────────────
   긴 화면을 다 읽고 나면 위 탭이 화면 밖으로 나가 있습니다.
   조금 내려가야 나옵니다 — 짧은 화면에서 늘 떠 있으면 가립니다.
   오른쪽 아래 카카오톡 단추를 피해 그 위에 둡니다. */
.gotop{
  position:fixed; right:20px; bottom:96px; z-index:60;
  display:none; align-items:center; gap:6px;
  padding:9px 14px 9px 11px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink); cursor:pointer;
  font:600 13px/1 inherit;
  box-shadow:0 4px 14px rgba(0,0,0,.13);
}
.gotop.on{display:inline-flex}
.gotop:hover{background:var(--card2); border-color:var(--line2)}
@media (max-width:640px){
  .gotop{right:14px; bottom:84px; padding:9px 11px}
  .gotop span{display:none}          /* 좁은 화면에서는 화살표만 */
}
@media (prefers-reduced-motion:reduce){
  .gotop{transition:none}
}


/* ── 열을 끌어 옮길 때 ────────────────────────────────────
   머리에 마우스를 올리면 손 모양이 됩니다. 끌 수 있다는 것을
   글로 적어두지 않아도 알 수 있게요. */
th.coldrag{cursor:grab}
th.coldrag:active{cursor:grabbing}
th.colfix{cursor:default}
/* 옮기는 중 — 놓을 자리에 세로 줄을 긋습니다 */
table.colmoving th.coldrag{background:var(--card2)}
th.colover{box-shadow:inset 3px 0 0 var(--navy)}



/* ── 열로 줄 세우기 (js/table.js) ─────────────────────────
   ↕ 는 '누르면 세워집니다' 라는 표시입니다. 흐리게 두었다가
   세운 칸에서만 진해집니다 — 지금 무엇으로 세웠는지 한눈에. */
th.sortme{cursor:pointer;user-select:none}
th.sortme .sortar{margin-left:4px;font-size:10px;color:var(--ink3);opacity:.45}
th.sortme:hover .sortar{opacity:.9}
th.sortme.sorton{color:var(--navy)}
th.sortme.sorton .sortar{opacity:1;color:var(--navy)}


/* ── 규칙 판의 갈래 머리 (js/attend.js) ───────────────────
   열여섯 칸이 한 덩이면 무엇을 고치러 왔는지 잊습니다.
   이 기수 · 날짜 · 횟수로 나눠 짚어줍니다. */
.setsub{font-weight:700;font-size:13.5px;color:var(--ink);
  margin:18px 0 8px;display:flex;align-items:baseline;gap:8px}
.setsub:first-child{margin-top:0}
.setsub span{font-weight:400;font-size:12.5px;color:var(--ink3)}

/* ── 규칙 판 (js/attend.js) ───────────────────────────────
   칸이 열일곱입니다. 여백이 조금만 넉넉해도 화면이 두 배가 됩니다.
   다섯~여섯이 한 줄에 들어오게 하되, 글자는 읽을 만한 크기로 둡니다 —
   너무 줄이면 촘촘해진 게 아니라 안 보이는 것이 됩니다.

   ★ 곁말은 칸과 왼쪽 끝을 맞춥니다. 전에는 칸보다 살짝 왼쪽으로
     비어져 나와 줄이 안 맞아 보였습니다 — 칸에만 테두리가 있어
     안쪽 여백만큼 밀려 보인 것입니다. */
#s_form .setgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px 12px}
#s_form .setgrid .fld{margin-bottom:0;min-width:0}
#s_form .setgrid .fld label:not(.btn){font-size:12.5px;margin-bottom:4px;padding-left:1px}
#s_form .setgrid .tin{padding:7px 10px;font-size:14px}
/* 한 줄만. 넘치면 … 로 줄이고 전체는 마우스를 올리면 뜹니다 */
#s_form .setgrid .fld .h{font-size:11.5px;line-height:1.4;margin-top:4px;padding-left:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s_form .setsub{margin:16px 0 7px;font-size:13px}
#s_form .setsub:first-child{margin-top:0}
#s_form .btns{margin-top:16px}


/* ── 숫자를 눌러 보는 단추 (js/fbadmin.js) ────────────────
   알약을 그대로 감싸기만 합니다. 단추처럼 생기면 표 안이 시끄럽고,
   그냥 두면 누를 수 있는지 모릅니다 — 손가락 모양과 살짝 뜨는 것으로
   알립니다. */
.numlink{border:0;background:none;padding:0;cursor:pointer;font:inherit}
.numlink:hover .badge{filter:brightness(.94)}
.numlink:hover{transform:translateY(-1px)}
.numlink:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:8px}


/* ── 운영·리허설 줄 (js/attend.js) ────────────────────────
   맨 아래로 내려두어도 표가 길면 어디부터가 사람이 아닌지 경계가
   안 보입니다. 아주 옅게만 깝니다 — 진하면 '무슨 일이 있는 줄' 로
   읽힙니다. 여기서는 '세지 않는 줄' 이라는 뜻뿐입니다. */
tr.crewrow > td{background:var(--card2)}
tr.crewrow .nmlink{color:var(--ink3)}
tr.crewrow:hover > td{background:var(--line)}

/* 찾기 칸의 지우개 (js/table.js). 글자가 있을 때만 × 가 보입니다. */
.qwrap{position:relative;display:inline-block;width:100%;vertical-align:middle}
.qwrap .tin{width:100%;padding-right:34px}
.qclear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  border:0;border-radius:50%;background:transparent;color:var(--ink3);font-size:18px;line-height:1;
  cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.qwrap.has .qclear{display:flex}
.qclear:hover{background:var(--card2);color:var(--ink)}
.qclear:focus-visible{outline:2px solid var(--navy);outline-offset:1px}

/* 글자처럼 생긴 작은 단추. 딱지 옆에 붙어 '이것도 할 수 있다' 만
   알려주는 자리라, 단추 모양을 그리면 딱지보다 더 눈에 띕니다. */
.linkb{border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:11.5px;color:var(--ink3);text-decoration:underline;text-underline-offset:2px}
.linkb:hover{color:var(--red)}

/* ── 수료 혜택 차림표 — 접었다 폈다 ────────────────────────
   칸이 8개에 본문까지 있어서 갈래 셋만 펴도 화면 두 장을 넘겼습니다.
   평소에는 '이름 · 값 · 켬 · 몇 명' 한 줄로 접어두고, 고칠 때만 폅니다.
   칸 이름 옆에 설명을 붙여 쓰던 것도 이름 아래 작은 줄로 내렸습니다 —
   옆에 붙이니 '갈래기록에 남는 값' 처럼 한 덩어리로 읽혔습니다. */
.bmlist{display:flex;flex-direction:column;gap:8px}
details.bm{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
details.bm[open]{border-color:var(--line2)}
details.bm>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;cursor:pointer;list-style:none;user-select:none}
details.bm>summary::-webkit-details-marker{display:none}
details.bm>summary::before{content:'▸';color:var(--ink3);font-size:15px;
  width:14px;text-align:center;transition:transform .15s}
details.bm[open]>summary::before{transform:rotate(90deg)}
details.bm>summary:hover{background:var(--card2)}
details.bm>summary:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.bmname{font-weight:700;font-size:14px}
.bmval{font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.bmcnt{margin-left:auto;font-size:12px;color:var(--ink3)}
.bmbody{padding:4px 14px 14px;border-top:1px solid var(--line)}
.bmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px;
  margin-top:10px}
.bmf{display:flex;flex-direction:column;gap:3px;margin-top:10px;min-width:0}
.bmgrid .bmf{margin-top:0}
.bmk{font-size:12px;font-weight:700;color:var(--ink2)}
.bmh{font-size:11.5px;color:var(--ink3);line-height:1.45}
.bmf .rin{width:100%;font-size:13.5px;padding:6px 9px;border:1px solid var(--line2);
  border-radius:var(--r);background:var(--card);color:var(--ink)}
.bmf .rin:disabled{background:var(--card2);color:var(--ink3)}
.bmf .rin.ta{min-height:64px;resize:vertical;line-height:1.6}
.bmfoot{display:flex;gap:6px;align-items:center;margin-top:12px}

/* ── 오늘 — 일지 제출 표 (258) ─────────────────────────── */
.dsec{margin-top:22px}
.dsum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:4px}
.dsum>div{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.dsum i{display:block;font-style:normal;font-size:12px;color:var(--ink3)}
.dsum b{font-size:22px;font-weight:700;color:var(--ink)}
.dsum b small{font-size:12px;font-weight:500;color:var(--ink3);margin-left:2px}
.dsum .warn{background:var(--amber-bg);border-color:var(--amber-line)}
.dsum .warn b{color:var(--amber-ink)}
@media (max-width:640px){.dsum{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dtoday{margin:10px 0 0;font-size:13.5px;color:var(--ink2);line-height:1.7}
.dtoday b{color:var(--green);margin-right:6px}
.dwrap{margin-top:14px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.dtable{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap}
.dtable th,.dtable td{padding:6px 5px;border-bottom:1px solid var(--line);text-align:center}
.dtable thead th{position:sticky;top:0;background:var(--card2);color:var(--ink3);font-weight:600}
.dtable .dn{text-align:left;padding-left:12px;position:sticky;left:0;background:var(--card);
  min-width:92px;max-width:140px;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--ink)}
.dtable thead .dn{background:var(--card2)}
.dtable .dd{min-width:22px;color:var(--ink3)}
/* .wk 는 수료 현황의 주차 막대가 이미 씁니다. 겹치면 칸이 깨집니다. */
.dtable .dwk{border-left:1px solid var(--line2)}
.dtable .miss{background:#FCF1EF}
.dtable .ok{color:var(--green);font-weight:700}
.dtable .dt{padding:6px 10px;font-weight:600;border-left:1px solid var(--line2)}
.dtable .dt small{color:var(--ink3);font-weight:400}
.dtable .dl{padding-right:12px;color:var(--ink3)}
.dtable tr.today .dn{color:var(--green)}

/* 수료 현황 — 아직 한 편도 안 쓰신 분께 순위 대신 (2026-09-17) */
.pctbox.cheer{background:var(--amber-bg);border-color:var(--amber-line)}
.pctbox.cheer .rt b{color:var(--amber-ink)}
.pctbox .cheer-t{margin:6px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink2)}