/* 마이페이지 모양 — my.php 안에 있던 것을 그대로 옮겼습니다 (2026-08-09).
   my.php 가 38,895자까지 커져서, 화면을 고칠 때마다 그 큰 파일이 통째로 오갔습니다.
   여기(css) · assets/my.core.js(js) 로 나눠 두면 my.php 는 다시 손댈 일이 거의 없습니다.
   판 번호는 my.php 의 jsv()·cssv() 가 filemtime 으로 저절로 붙입니다. */

.mwrap{max-width:560px; margin:0 0 70px}
.card{background:var(--card); border:.5px solid var(--line); border-radius:16px; padding:26px 24px 24px}
.card + .card{margin-top:16px}
.card h2{font-size:17px; margin:0 0 6px}
.card .sub{font-size:13.5px; color:var(--muted); margin:0 0 18px; line-height:1.85; word-break:keep-all}
label.lb{display:block; font-size:13.5px; font-weight:600; margin:0 0 7px}
label.lb em{font-style:normal; font-weight:400; font-size:12.5px; color:var(--muted)}
input[type=tel], input[type=text]{width:100%; border:.5px solid var(--line); border-radius:11px;
  padding:13px 14px; font-size:16px; background:#fff; outline:none; font-family:inherit; color:var(--ink)}
input:focus{border-color:var(--accent-strong)}
input.code{letter-spacing:8px; font-size:22px; text-align:center; font-weight:700}
.go{margin-top:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.go button{border:0; background:var(--accent); color:var(--accent-ink); font-weight:700;
  border-radius:12px; padding:13px 26px; font-size:15px; cursor:pointer; font-family:inherit}
.go button:hover{background:var(--accent-strong); color:#fff}
.go button[disabled]{opacity:.5; cursor:default}
.go .sec{background:transparent; border:.5px solid #C9BF9E; color:var(--muted); font-weight:500}
.go .sec:hover{background:transparent; border-color:var(--accent-strong); color:var(--ink)}
.msg{font-size:13.5px; line-height:1.7; word-break:keep-all}
.msg.err{color:#8A2E2E}
.msg.ok{color:#3B6D11}
.step[hidden]{display:none}
.testbox{background:#FDF3E2; border:.5px solid #E8CE93; border-radius:12px; padding:14px 16px;
  margin:0 0 18px; font-size:13.5px; color:#7A5A14; line-height:1.8; word-break:keep-all}
.testbox b{font-size:26px; letter-spacing:6px; color:#7A4A10; display:block; margin-top:6px}
.who{display:flex; align-items:center; gap:14px; margin:0 0 6px}
.who .ic{width:46px; height:46px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; flex:0 0 auto}
.who b{font-size:18px} .who span{display:block; font-size:13px; color:var(--muted)}
.rows{margin-top:18px; border-top:.5px solid var(--line)}
.row{display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:.5px solid var(--line);
  font-size:14.5px}
.row i{font-size:19px; color:var(--accent-strong); width:24px; text-align:center}
.row .t{flex:1} .row .t small{display:block; font-size:12px; color:var(--muted); margin-top:1px}
.row .soon{font-size:11.5px; color:#A89B76; background:#F3EFE3; border-radius:999px; padding:3px 10px}
.row .mini{border:.5px solid #C9BF9E; background:#fff; color:var(--muted); border-radius:999px;
  padding:5px 13px; font-size:12px; cursor:pointer; font-family:inherit; flex:0 0 auto}
.row .mini:hover{border-color:var(--accent-strong); color:var(--ink)}

/* ── 펼치면 그 줄 바로 아래에서 열립니다 (2026-08-07) ── */
.item{border-bottom:.5px solid var(--line)}
.item > .row{border-bottom:0}
.row.open{background:#F7F4EA; border-radius:10px 10px 0 0}
.row.open .mini{border-color:var(--accent-strong); color:var(--ink)}
.pan{padding:4px 2px 20px}
.pan[hidden]{display:none}

.foot{margin-top:20px; display:flex; gap:14px; flex-wrap:wrap; font-size:13px}
.foot button{border:0; background:transparent; color:var(--muted); cursor:pointer;
  font-family:inherit; font-size:13px; text-decoration:underline}
.foot button:hover{color:#8A2E2E}
.side{font-size:13.5px; color:var(--muted); line-height:1.9; word-break:keep-all}

/* ── 프로필 사진 — 첫 글자 동그라미 자리 ── */
button.ic{border:0; padding:0; cursor:pointer; font-family:inherit; overflow:hidden}
button.ic img{width:100%; height:100%; object-fit:cover; display:block}
button.ic.busy{opacity:.5}
.pdrop{border:0; background:transparent; color:var(--muted); font-size:12px; padding:0;
  margin-top:3px; text-decoration:underline; cursor:pointer; font-family:inherit}
.pdrop:hover{color:#8A2E2E}
#mPhoto{margin:0 0 6px}

/* ── 체크칸 · 내 정보 ── */
label.ck{display:flex; align-items:flex-start; gap:9px; margin-top:14px; font-size:14px;
  line-height:1.6; cursor:pointer; word-break:keep-all}
label.ck input{width:17px; height:17px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--accent-strong)}
label.ck.off{opacity:.45}
.ckhint{font-size:12.5px; color:var(--muted); line-height:1.8; margin:6px 0 0 26px; word-break:keep-all}
.ckhint.flat{margin-left:0}
.pview{margin:18px 0 0; background:#F7F4EA; border-radius:12px; padding:12px 14px;
  font-size:13.5px; color:var(--muted); word-break:keep-all}
.pview b{color:var(--ink); font-size:15px}

/* ── 나의 봉사 ── */
.vsum{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.vsum div{flex:1; min-width:96px; background:#F7F4EA; border-radius:12px; padding:12px 14px}
.vsum b{display:block; font-size:21px; line-height:1.3}
.vsum span{font-size:12px; color:var(--muted)}
.vnames{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px}
.vchip{display:inline-flex; align-items:center; gap:7px; background:#EDF4E8; color:#3B6D11;
  border-radius:999px; padding:6px 13px; font-size:13px}
.vchip em{font-style:normal; font-size:12px; color:#5E7A46}
.vwait{background:#FDF3E2; border:.5px solid #E8CE93; border-radius:12px; padding:12px 14px;
  font-size:13px; color:#7A5A14; line-height:1.8; margin-bottom:14px; word-break:keep-all}
.vwait button{border:0; background:transparent; color:#8A6A24; font-size:12.5px;
  text-decoration:underline; cursor:pointer; font-family:inherit; padding:0; margin-left:6px}

/* 연도 → 달 → 날짜 숫자 */
.vyears{margin-bottom:16px; border-top:.5px solid var(--line)}
.vy{border-bottom:.5px solid var(--line)}
.vyh{width:100%; display:flex; align-items:center; gap:9px; background:transparent; border:0;
  padding:12px 2px; font-family:inherit; font-size:14.5px; color:var(--ink); cursor:pointer; text-align:left}
.vyh b{font-weight:600}
.vyh em{font-style:normal; color:var(--muted); font-size:12.5px}
.vyh i{margin-left:auto; font-style:normal; color:var(--muted); font-size:11px}
.vyb{padding:0 2px 12px}
.vyb[hidden]{display:none}
.vmo{display:flex; gap:5px; align-items:baseline; flex-wrap:wrap; padding:4px 0}
.vmo b{flex:0 0 32px; font-size:12.5px; color:var(--muted); font-weight:600}
.vmo span{display:inline-block; min-width:24px; text-align:center; background:#F3EFE3;
  border-radius:7px; padding:3px 6px; font-size:12.5px; color:var(--ink)}

.vseek{display:flex; gap:8px; margin-bottom:10px}
.vseek input{flex:1}
.vseek button{border:0; background:var(--accent); color:var(--accent-ink); font-weight:700;
  border-radius:11px; padding:0 18px; font-size:14px; cursor:pointer; font-family:inherit; flex:0 0 auto}
.vhit{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 2px;
  border-bottom:.5px solid var(--line); font-size:13.5px}
.vhit .t{flex:1; min-width:140px}
.vhit .t small{display:block; color:var(--muted); font-size:12px}
.vhit button{border:.5px solid #C9BF9E; background:#fff; color:var(--ink); border-radius:9px;
  padding:6px 13px; font-size:12.5px; cursor:pointer; font-family:inherit}
.vhit button:hover{border-color:var(--accent-strong)}
.vhit .tk{font-size:12px; color:#A89B76}

/* 이어진 뒤에는 한 줄만 남깁니다 (2026-08-08) */
#volSeek[hidden]{display:none}
.vmore{border:0; background:transparent; color:var(--muted); font-size:13px; padding:6px 2px;
  text-decoration:underline; cursor:pointer; font-family:inherit; display:block}
.vmore:hover{color:var(--ink)}
.vmore[hidden]{display:none}

/* ── 나의 뱃지 (2026-08-09) ──
   그림(뱃지 동그라미)은 서버가 SVG 로 그려 내려줍니다 — lib/badge-svg.php.
   여기서는 늘어놓는 모양만 정합니다. */
.bwrap{display:flex; gap:12px; flex-wrap:wrap; margin-top:4px}
.bcell{width:96px; text-align:center; border:.5px solid transparent; border-radius:14px;
  padding:10px 4px 8px; cursor:pointer; background:transparent}
.bcell:hover{background:#F7F4EA}
.bcell.on{border-color:var(--accent-strong); background:#F7F4EA}
.bcell .nm{font-size:12.5px; color:var(--ink); margin-top:6px; line-height:1.4}
.bcell .st{display:block; font-size:11.5px; color:var(--muted); margin-top:2px}
.bcell.lock{opacity:.42; cursor:default}
.bcell.lock:hover{background:transparent}
.bnone{font-size:13.5px; color:var(--muted); line-height:1.8; word-break:keep-all; margin:2px 0 10px}
.bhead{font-size:13px; color:var(--muted); margin:14px 0 2px}

/* 봉사 기록 이어드리기 안내 — 아직 아무것도 안 이어진 분께만 (2026-08-09) */
.volcta{display:block; width:100%; text-align:left; margin:0 0 14px; padding:12px 14px;
  background:#FDF3E2; border:.5px solid #E8CE93; border-radius:12px; cursor:pointer; font:inherit}
.volcta:hover{border-color:#B07A16}
.volcta b{display:block; font-size:14px; color:#7A5A14; font-weight:600}
.volcta span{display:block; margin-top:3px; font-size:12.5px; color:#8A7A55; line-height:1.6}