/* 신청 흐름·마이페이지 화면의 덧칠 — 바탕은 rental.css(공간 대관 화면) 그대로. 옛 자리 site-assets/sample/flow.css(DB 연동 일감 ⑤에서 옮김) */
.gear-top{align-items:stretch}
.gear-photo{border-radius:var(--r); overflow:hidden; background:var(--bg2); min-height:280px}
.gear-photo img{display:block; width:100%; height:100%; object-fit:cover}
.gear-h{font-size:19px; font-weight:800; margin:0 0 6px}
.gear-spec th{width:34%; color:var(--g1); font-size:14px}
.gear-spec td{color:var(--ink)}

/* ── 신청 흐름·마이페이지 ── */
.flow-steps{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; margin:22px 0 0; font-size:14px; font-weight:700; color:var(--dim)}
.flow-steps li{display:flex; align-items:center; gap:8px}
.flow-steps li span{width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; font-size:12px;
  background:var(--bg2); color:var(--dim)}
.flow-steps li.done span{background:var(--pane2); color:var(--g1)}
.flow-steps li[aria-current] {color:var(--ink)}
.flow-steps li[aria-current] span{background:var(--g2); color:#FFFFFF}
/* 상태 뱃지 — 글자로 상태를 말한다(색만으로 가르지 않는다) */
.badge{display:inline-block; font-size:13px; font-weight:800; line-height:1; padding:6px 10px; border-radius:999px;
  vertical-align:middle; white-space:nowrap; letter-spacing:0; background:var(--bg2); color:var(--ink)}
h1 .badge{font-size:14px; vertical-align:8px; letter-spacing:0; font-weight:800}
.st-REQUESTED,.st-APPLIED,.st-OPEN{background:#E8ECFF; color:#1E2A6B}
.st-APPROVED{background:#DDF3E6; color:#11643A}
.st-WAITING,.st-WAITLIST{background:#FFF1DC; color:#8A4B00}
.st-REJECTED{background:#FDE3E3; color:#9B1C1C}
.st-CANCELED,.st-CLOSED,.st-READY{background:#ECEEF2; color:#555D6B}
/* 표 — 좁은 화면에서는 표만 옆으로 민다(쪽 전체는 넘치지 않게) */
.flow-table{overflow-x:auto}
.flow-table .tb{min-width:640px}
.flow-table .tb a{color:var(--ink)}
.flow-table tfoot th,.flow-table tfoot td{border-bottom:0; padding-top:16px; font-weight:800}
.flow-table tfoot small{font-weight:600; color:var(--dim)}
.kind{font-size:12px; font-weight:800; color:var(--g1)}
.sum-total{font-size:18px}
.muted-cell{color:var(--dim); font-size:14px}
.linkish{background:none; border:0; padding:0; font:inherit; font-size:14px; color:var(--g1); cursor:pointer}
/* 입력 */
.fgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px}
.fgrid label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:800; color:var(--ink)}
.fgrid label small{font-weight:600; color:var(--dim)}
.fgrid .wide{grid-column:1 / -1}
.fgrid input,.fgrid textarea{font:inherit; font-weight:500; font-size:15px; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--pane); color:var(--ink); width:100%}
.fgrid input[readonly]{background:var(--bg2); color:var(--dim)}
.fgrid input:focus,.fgrid textarea:focus{outline:2px solid var(--g1); outline-offset:1px}
@media(max-width:640px){ .fgrid{grid-template-columns:1fr} }
.agree{display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:15px; font-weight:800}
.agree input{width:20px; height:20px; margin-top:1px; accent-color:var(--g2)}
.total-line{font-size:15px; color:var(--dim)}
.total-line b{font-size:22px; color:var(--ink)}
/* 완료 */
.done-card{display:flex; gap:22px; align-items:flex-start; padding:34px 30px}
.done-card .ic{flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--g2); color:#FFFFFF}
.done-card .ic svg{width:28px; height:28px}
.done-card h2{font-size:24px; font-weight:800; margin:6px 0 10px}
.done-card p{color:var(--dim); font-size:15px; line-height:1.75}
.done-no{font-size:14px}
.done-no b{font-size:18px; color:var(--ink)}
.done-go{margin-top:24px; display:flex; flex-wrap:wrap; gap:10px}
@media(max-width:640px){ .done-card{flex-direction:column; padding:26px 20px} }
.btn.ghost{background:var(--pane); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}
.btn.danger{background:#9B1C1C; color:#FFFFFF}
/* 교육 정원 */
.cnt-line{font-size:15px; color:var(--dim)}
.cnt-line b{font-size:20px; color:var(--ink)}
.gauge-bar{display:block; height:8px; border-radius:99px; background:var(--bg2); margin:10px 0 12px; overflow:hidden}
.gauge-bar i{display:block; height:100%; background:var(--g2); border-radius:99px}
.cnt-note{font-size:14px; color:var(--dim); line-height:1.7}
.cnt-note b{color:var(--ink)}
/* 마이페이지 */
.my-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
  background:var(--pane); border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; font-size:14px; color:var(--dim)}
.mylist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.mylist a{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px 20px;
  background:var(--pane); border:1px solid var(--line); border-radius:14px; color:var(--ink); transition:border-color .2s ease}
.mylist a:hover{border-color:var(--g1)}
.mylist .badge{min-width:76px; text-align:center}
.mylist .t{display:flex; flex-direction:column; gap:4px; min-width:0}
.mylist .t b{font-size:16px}
.mylist small{font-size:13px; color:var(--dim); font-weight:500}
.mylist .m{display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-weight:800; font-variant-numeric:tabular-nums}
@media(max-width:640px){ .mylist a{grid-template-columns:1fr auto; gap:8px 12px} .mylist .badge{justify-self:start} .mylist .t{grid-column:1 / -1; grid-row:2} .mylist .m{grid-column:2; grid-row:1} }
.my-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.my-head p{font-size:15px; color:var(--dim)}
.my-head .say{flex-basis:100%; color:var(--ink)}
.reject{flex-basis:100%; background:#FDF1F1; border-radius:12px; padding:14px 16px; color:#7A1717}
.reject b{font-size:14px}
.reject p{color:#7A1717; margin-top:4px}
/* 마이페이지(DB 연동 일감 ⑤) — 빈 목록 한 줄, 처리 결과 한 줄, 이용자 취소 펼침 상자 */
.my-empty{padding:18px 20px; border:1px dashed var(--line); border-radius:var(--r); color:var(--dim); font-size:15px}
.my-say{padding:12px 16px; border-radius:12px; font-size:15px; font-weight:700; margin-bottom:var(--gap)}
.my-say.ok{background:#DDF3E6; color:#11643A}
.my-say.bad{background:#FDF1F1; color:#7A1717}
.my-say.info{background:#E8ECFF; color:#1E2A6B}
/* 신청서 표의 줄 문제(사유) — 그 줄에만 */
.flow-table .msg{color:#9B1C1C; font-weight:700; font-size:14px}
/* 신청서 담은 항목 표(목업 A안, PO 2026-10-26) — 줄 끝 빼기는 공간대관 선택 시간 칩의 동그란 × 와 같은 선·색, 표 줄 높이에 맞춰 28px · 누르는 자리 44px */
.items-tb td.rm{width:1%; white-space:nowrap; text-align:right}
.items-tb td.rm form{display:inline}
.items-tb tbody td, .items-tb tbody th{vertical-align:middle}
.rm-x{width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--dim);
  cursor:pointer; font-family:var(--sans); font-size:15px; line-height:1; display:inline-grid; place-items:center; padding:0;
  position:relative; transition:border-color .3s ease, color .3s ease}
.rm-x::after{content:''; position:absolute; inset:-8px}
.rm-x:hover{border-color:var(--g1); color:var(--g1)}
/* 폰 폭 — 표를 옆으로 밀지 않고 줄마다 묶음으로(구분 · 이름 · 금액 · × / 날짜와 시간 / 이용 시간 · 요금). 열 이름은 읽어 주는 기계만 */
@media(max-width:640px){
  .flow-table.items-card{overflow:visible}
  .flow-table .items-tb{min-width:0}
  .items-tb, .items-tb tbody, .items-tb tfoot{display:block}
  .items-tb thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .items-tb tbody tr{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:14px 0; border-bottom:1px solid var(--line2)}
  .items-tb tbody tr:first-child{padding-top:2px}
  .items-tb tbody td, .items-tb tbody th, .items-tb tbody .n{border:0; padding:0; text-align:left}
  .items-tb .k{order:1}
  .items-tb .nm{order:2; flex:1 1 0; min-width:0}
  .items-tb .am{order:3}
  .items-tb td.rm{order:4; width:auto; padding-left:6px}
  .items-tb .wh{order:5; flex-basis:100%; font-size:15px}
  .items-tb .ln, .items-tb .fe{order:6; font-size:13.5px; color:var(--dim)}
  .items-tb .fe::before{content:'· '}
  .items-tb .pr{order:6; flex-basis:100%}
  .items-tb tfoot tr{display:flex; justify-content:space-between; align-items:baseline}
  .items-tb tfoot th, .items-tb tfoot td{padding-left:0; padding-right:0}
  .items-tb tfoot td:empty{display:none}
}
.my-cancel summary{list-style:none; cursor:pointer; display:inline-flex}
.my-cancel summary::-webkit-details-marker{display:none}
.my-cancel[open] summary{display:none}
.my-cancel form{display:flex; flex-direction:column; gap:12px}

/* ── 교육 상세(/education/{번호}) 절 사이 간격 — PO 2026-10-27 edu-detail-gap ──
   절 위 여백이 rental.css 의 --sec(80px · 640 이하 52px)라 넓다는 지적 → 이 화면의 절(.sec-edu)만 2/3(54px · 640 이하 35px).
   공용 --sec 은 그대로 둔다(대관·장비·신청·마이페이지가 같이 쓴다). 좌우 폭은 손대지 않는다 */
.sec.sec-edu{padding-top:54px}
@media(max-width:640px){ .sec.sec-edu{padding-top:35px} }