/* 마이페이지 「봉사 신청」 칸 — 다가오는 신청과 취소. (2026-08-22)
   my.css 를 건드리지 않으려고 새 파일로 두었습니다. 색은 style.css 변수와
   my.css 에서 쓰던 값을 그대로 씁니다 — 새 색을 만들지 않았습니다.

   ★ 폰에서 잘리지 않게 ★ grid 대신 flex, 날짜 칸에 min-width:0.
     (1fr 은 minmax(auto,1fr) 이라 keep-all 한글보다 좁아지지 않습니다 — 2026-08-20) */

.mvlist{margin:2px 0 4px}

.mvrow{display:flex; align-items:center; gap:8px; padding:11px 2px;
  border-bottom:.5px solid var(--line-soft)}
.mvrow:last-child{border-bottom:0}

.mvd{flex:1 1 auto; min-width:0; font-size:14px; color:var(--ink);
  line-height:1.6; word-break:keep-all}

.mvp{display:inline-block; margin-left:7px; font-size:12.5px; color:var(--muted)}

.mvf{display:inline-block; margin-left:7px; font-size:11.5px; color:var(--hi-ink);
  background:var(--hi); border:.5px solid var(--hi-line); border-radius:999px; padding:2px 8px;
  white-space:nowrap}

/* 지금 어떻게 됐는지 — 접수 · 확정 · 어려움 */
.mvs{flex:0 0 auto; font-size:11.5px; border-radius:999px; padding:3px 10px; white-space:nowrap}
.mvs.wait{color:var(--muted); background:var(--p-1)}
.mvs.ok  {color:var(--ok); background:var(--ok-bg)}
.mvs.no  {color:var(--bad); background:var(--bad-bg)}

/* 취소 — 한 번 누르면 여쭙고, 다시 누르면 그때 취소합니다 */
.mvx{flex:0 0 auto; border:.5px solid var(--p-3); background:#fff; color:var(--muted);
  border-radius:999px; padding:5px 12px; font-size:12px; cursor:pointer;
  font-family:inherit; white-space:nowrap}
.mvx:hover{border-color:var(--bad); color:var(--bad)}
.mvx.sure{border-color:var(--bad); color:var(--bad); background:var(--bad-bg)}
.mvx:disabled{opacity:.5; cursor:default}

/* 취소할 때 여는 「못 오시는 까닭」 한 줄 칸 (2026-09-09)
   ★ 이름은 「mvw」로 시작합니다 — 이 화면의 .mvx .mvs .mvd 와 안 부딪히게.
   ★ 줄 안에서 통째로 다음 줄로 내려가야 하므로 flex:1 1 100% 입니다. */
.mvwhy{flex:1 1 100%; display:flex; gap:7px; flex-wrap:wrap; align-items:center;
  margin-top:9px; padding-top:10px; border-top:.5px dashed var(--line-soft)}
.mvwin{flex:1 1 190px; min-width:0; font-family:inherit; font-size:13px; color:var(--ink);
  background:#fff; border:.5px solid var(--p-3); border-radius:10px; padding:8px 11px}
.mvwin:focus{border-color:var(--accent-strong); outline:none}
.mvwgo,.mvwno{flex:0 0 auto; font-family:inherit; font-size:12px; cursor:pointer;
  border-radius:999px; padding:7px 14px; white-space:nowrap}
.mvwgo{border:.5px solid var(--bad); background:var(--bad-bg); color:var(--bad)}
.mvwgo:disabled{opacity:.5; cursor:default}
.mvwno{border:.5px solid var(--p-3); background:#fff; color:var(--muted)}

/* 날짜 바꾸기 (2026-09-23) — 취소 단추와 같은 꼴, 빛깔만 보라.
   ★ 이름은 「mvc」로 시작합니다 — .mvwgo(취소하기)와 섞이면 누르는 뜻이 뒤바뀝니다. */
.mvc{flex:0 0 auto; border:.5px solid var(--p-3); background:#fff; color:var(--accent);
  border-radius:999px; padding:5px 12px; font-size:12px; cursor:pointer;
  font-family:inherit; white-space:nowrap}
.mvc:hover{border-color:var(--accent-strong); color:var(--accent-strong)}
.mvc:disabled{opacity:.5; cursor:default}
.mvcgo{flex:0 0 auto; font-family:inherit; font-size:12px; cursor:pointer;
  border-radius:999px; padding:7px 14px; white-space:nowrap;
  border:.5px solid var(--accent-strong); background:var(--accent-strong); color:#fff}
.mvcgo:disabled{opacity:.5; cursor:default}
/* 적는 칸(.mvwhy)이 열린 줄만 아래로 접힙니다 — 넓은 화면에서 한 줄에 우겨넣어 날짜가 꺾이지 않게 */
.mvrow:has(.mvwhy){flex-wrap:wrap}

/* 다가오는 신청이 없을 때 — 왜 비었는지 여기서 말합니다 */
.mvnone{font-size:13.5px; color:var(--muted); line-height:1.8; word-break:keep-all;
  margin:2px 0 10px}

.mvmore{font-size:13px; color:var(--muted); line-height:1.7; word-break:keep-all; margin:10px 0 0}
.mvmore a{color:var(--accent-strong)}

/* 취소 마감 안내 — 눌러보고 나서 안 된다고 하면 늦습니다 */
.mvtip{font-size:12.5px; color:var(--muted); line-height:1.7; word-break:keep-all;
  margin:10px 0 0}
.mvtip a{color:var(--accent-strong)}

/* 폰에서는 날짜를 한 줄 차지하게 하고, 딱지와 취소 단추를 그 아래로 */
@media (max-width:430px){
  .mvrow{flex-wrap:wrap; gap:6px 8px}
  .mvd{flex:1 1 100%}
  .mvx{margin-left:auto}
  .mvc{margin-left:auto}
  .mvc + .mvx{margin-left:0}
  .mvcgo{flex:1 1 auto; text-align:center}
  /* 폰에서는 적는 칸이 한 줄을 다 차지하고, 단추 둘이 그 아래로 */
  .mvwin{flex:1 1 100%}
  .mvwgo,.mvwno{flex:1 1 auto; text-align:center}
}