@charset "UTF-8";

/*
 * 시설예약(라이즈) 앱 전용 스타일.
 *
 * Why 별도 파일: 날짜 선택 상태(하늘색 배경)는 퍼블 달력(_share/_content/calendar.jsp)에 없는 신규 상태다.
 *   퍼블 CSS(_res/nsu/_share/css/acnhor-program.css)에 넣으면 퍼블 콘텐츠 페이지까지 영향을 받으므로
 *   앱 스코프로 격리한다. 최종 시안(Figma) 1:1 정합은 Phase 5 소관.
 *
 * 흐름: 달력에서 예약 가능일 클릭 → 셀 선택(하늘색) → 하단 '예약하기' → 신청 모달.
 *      휴일/예약마감/과거는 선택 자체가 안 된다.
 */

/* 예약 가능일만 클릭 가능함을 커서로 알린다(불가일은 기본 커서 유지) */
.calendar-box .fc td.fc-daygrid-day.day-available {
	cursor: pointer;
}

/*
 * 이번 달의 지난 날짜 — 숫자를 흐리게 해 이미 지났음을 보인다(2026-07-23 사용자 지시).
 *
 * Why 이 값: FullCalendar 코어가 다른 달 날짜(.fc-day-other)에 쓰는 `opacity:.3` 을 그대로 쓴다.
 *   "이전달 날짜처럼" 이 요구였으므로 새 색을 만들지 않고 같은 처리로 맞춘다. 일·토요일 색이
 *   각각 다른데(빨강/파랑) opacity 는 어떤 색이든 같은 비율로 흐려지므로 색마다 값을 따로 둘 필요가 없다.
 * Why :not(.fc-day-other): 지난 달 날짜는 이미 .3 이 걸려 있어 한 번 더 곱해지면 거의 안 보인다.
 * 오늘은 제외된다 — FullCalendar 는 오늘에 .fc-day-today 만 붙이고 .fc-day-past 는 붙이지 않는다.
 *
 * Why day-top 이 아니라 day-frame: 숫자만 흐리게 하면 그 날에 휴일이 있을 때
 *   숫자는 흐린데 빨간 휴일명만 선명해 지난 날이 오히려 도드라진다(2026-07-23 실측).
 *   셀 전체를 흐리게 해 '지났다'는 신호를 셀 단위로 통일한다.
 *   day-frame 은 '예약불가' 절대배치의 기준 상자이기도 한데, opacity 는 배치를 바꾸지 않으므로 무관하다.
 */
.calendar-box .fc td.fc-daygrid-day.fc-day-past:not(.fc-day-other) .fc-daygrid-day-frame {
	opacity: 0.3;
}

/* 선택된 날짜 — 하늘색 배경.
   .fc-day-today 가 `.calendar-box .fc .fc-daygrid-day.fc-day-today{background:#fff}` 로 흰 배경을 강제하므로
   오늘을 선택했을 때도 이기도록 셀렉터를 같은 수준 이상으로 잡는다. */
.calendar-box .fc td.fc-daygrid-day.day-selected,
.calendar-box .fc td.fc-daygrid-day.fc-day-today.day-selected {
	background: #EAF4FB;
}

/*
 * 지난 달로 갈 수 없을 때의 이전 버튼 — 흐리게 + 커서로 '누를 수 없음'을 알린다.
 * 흐림 값은 지난 날짜 숫자와 같은 .3 을 써서 '지나서 못 쓴다'는 신호를 한 가지로 통일한다.
 */
.calendar-wrap .calendar-top .fc-button-group a.fc-prev-button.is-disabled {
	opacity: 0.3;
	cursor: default;
}

/*
 * 휴일 셀의 '예약불가' 표기 — 휴일명은 원래 자리를 그대로 지킨다(2026-07-23 사용자 지시).
 *
 * Why 필요: 퍼블은 `.fc-daygrid-day-events:has(.e-color02)` 로 **이벤트 묶음 전체**를 셀 우하단에
 *   절대배치한다. 그 규칙은 '예약마감' 하나만 있는 날을 전제한 것이라, 같은 셀에 휴일명까지
 *   있으면 휴일명도 함께 우하단으로 끌려가 날짜 밑에 있던 자리를 잃는다.
 * 해법: 휴일 셀(.e-color01 동반)에서는 묶음을 흐름으로 되돌려 휴일명이 제자리에 남게 하고,
 *   '예약불가' 하나만 셀 안에서 우하단으로 띄운다. 기준 상자는 이미 relative 인 day-frame 이다.
 *   결과적으로 휴일명은 종전 그대로, 예약불가는 예약마감과 같은 자리·같은 톤이 된다.
 */
.calendar-box .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events:has(.e-color01):has(.e-color02) {
	position: static;
}

/* bottom 2px: 마감일은 묶음이 bottom:0 이고 그 안 맨 끝의 `.fc-daygrid-day-bottom`(padding-top 2px)이
   글자를 2px 밀어 올린다. 여기선 그 형제를 건너뛰고 붙이므로 같은 2px 을 직접 준다 — 실측으로 맞춘 값 */
.calendar-box .fc .fc-daygrid-day-events:has(.e-color01) .fc-daygrid-event-harness:has(.e-color02) {
	position: absolute;
	right: 0;
	bottom: 2px;
}

/* 모바일은 퍼블이 '예약마감'도 흐름 배치로 되돌린다(≤768). 같은 기준을 따라 흐름으로 되돌려
   좁은 셀에서 절대배치가 휴일명 위에 겹치지 않게 한다 — 순서는 JS eventOrder 가 잡는다 */
@media (max-width: 768px) {
	.calendar-box .fc .fc-daygrid-day-events:has(.e-color01) .fc-daygrid-event-harness:has(.e-color02) {
		position: relative;
		right: auto;
		bottom: auto;
	}
}

/*
 * 달력 상단 머리말 — 퍼블 디자인의 '카테고리 라벨 + 제목' 블록(Figma node 531-6112)을 옮긴 것.
 * 시안은 라벨이 'UNIT TASKS 1-2' 텍스트지만, 이 화면에서는 그 자리를 시설 목록으로 돌아가는
 * 버튼으로 바꿔 쓴다(사용자 지정). 라벨과 제목의 간격 10px 는 시안 Frame 6 의 gap 그대로다.
 */
.calendar-wrap .calendar-head {
	margin-bottom: 16px;
}

/*
 * 돌아가기 — 시안의 카테고리 라벨(UNIT TASKS) 스타일을 그대로 쓴다.
 * 실측값: 텍스트 Pretendard 700 / 16px / lh120% / letter-spacing 2px / #009BB4,
 *        앞 장식선 32x1px 같은 색, 선과 텍스트 간격 8px(category gap).
 * 라벨이 아니라 링크가 되었으므로 세로 패딩 8px 로 손가락이 닿을 높이(35px)를 더 준다.
 */
.calendar-wrap .calendar-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	font-weight: 700;
	font-size: 16px;
	line-height: 120%;
	letter-spacing: 2px;
	color: #009BB4;
}

/*
 * 시안의 장식선(32x1)을 화살표로 바꾼다 — 목록으로 '돌아간다'는 방향을 선 자체가 말하게 한다.
 * 몸통은 span 본체, 촉은 왼쪽 끝을 축으로 24도 올린 짧은 선 하나다(이미지 없이 CSS만).
 *
 * 위아래 두 갈래로 벌리면(흔한 chevron) 촉이 장식선보다 무거워져 시안의 가벼운 인상을 깬다.
 * 윗변만 남긴 열린 화살표로 두어 선의 성격은 유지하고 방향만 얹는다(사용자 지시).
 * 굵기는 시안 1px 에서 1.5px 로 올렸다 — 촉이 기울어지면 1px 은 계단현상으로 흐려진다.
 */
.calendar-wrap .calendar-back-arrow {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 32px;
	height: 1.5px;
	background: #009BB4;
}

.calendar-wrap .calendar-back-arrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 9px;
	height: 1.5px;
	border-radius: 1px;
	background: #009BB4;
	transform-origin: left center;
	transform: rotate(-24deg);
}

.calendar-wrap .calendar-back:hover,
.calendar-wrap .calendar-back:focus {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 시설명 — 시안 실측값 그대로(Pretendard 700 / 36px / lh120% / #101E1B).
   margin-top 2px: 시안의 라벨↔제목 간격 10px = 돌아가기 링크의 아래 패딩 8px + 여기 2px */
.calendar-wrap .calendar-place {
	margin: 2px 0 0;
	font-weight: 700;
	font-size: 36px;
	line-height: 120%;
	color: #101E1B;
}

/*
 * 달력 하단 [예약하기][예약확인] — 예약확인은 보조 동작이라 신청 모달의 '취소' 버튼 톤을 쓴다.
 *
 * Why: 퍼블 .e-link a 는 한 종류(파란 채움)뿐이라 두 버튼이 같은 무게로 보인다.
 *   설계서 V1.3에서 새로 붙은 [예약확인]은 주 동작(예약하기)의 대안이므로 위계를 나눈다.
 * 값 출처는 퍼블 신청 모달의 취소 버튼(.b-btn-c-gray) 실측이다 —
 *   흰 배경 / 글자 #262626 / 테두리 1px #bbb. 새로 만든 색이 아니라 이미 쓰는 토큰을 옮겨왔다.
 * 크기(180x60)·radius·폰트는 형제 버튼과 같아야 하므로 .e-link a 값을 그대로 상속한다.
 * 세로 패딩을 1px 줄이는 이유: 폭은 width:180px 이 border-box 로 잡아 주지만
 *   높이는 padding+line-height 로 만들어져 있어 테두리 2px 만큼 그대로 밀린다(실측 60→62).
 */
.e-link a.js-check-reserve {
	padding-top: 19px;
	padding-bottom: 19px;
	border: 1px solid #bbb;
	background: #fff;
	color: #262626;
}

/*
 * 두 버튼 간격 10px(신청 모달 버튼 그룹과 같은 값). 마크업에 공백이 없어 원래는 딱 붙어 있다.
 *
 * Why flex: margin-left 로 벌리면 폭이 좁아 줄바꿈될 때(390px 실측) 아랫줄 버튼만 10px 밀려
 *   가운데 정렬이 어긋나고 위아래로도 붙는다. gap 은 두 축에 같이 걸려 두 경우를 한 번에 맞춘다.
 *   퍼블의 text-align:center 는 flex 에선 무의미해지므로 justify-content 로 대체한다.
 */
.calendar-wrap .e-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/*
 * 팝업 입력폼의 라벨 칸 — '예약확인 비밀번호'의 마지막 '호'가 다음 줄로 넘어가 잘려 보이던 문제.
 *
 * Why 폭 지정으로 안 되나: 라벨 칸은 display:table-cell 이라 CSS 의 width(퍼블 200px)가 지시가 아니라
 *   희망값이다. 모달 폭 600px 안에서 입력칸이 자리를 먼저 가져가 라벨 칸이 140px 까지 눌렸고,
 *   한 줄로 필요한 130px + 별표(*) 를 못 담아 접혔다.
 * Why nowrap 만으로는 부족: 이 표는 table-layout:fixed 라 내용이 길어도 칸이 안 넓어진다.
 *   줄바꿈만 막으면 별표(*)가 칸 밖으로 11px 밀려 잘린다(실측 scrollWidth 150 > clientWidth 139).
 * Why 160px: 퍼블 board.css 의 원래 라벨 칸 폭이 160px 이다. acnhor.css 가 200px 로 덮었지만
 *   실제로는 140px 까지 눌려 있었다 — 되돌리는 셈이라 새로 정한 값이 아니다.
 *   160px 에서 라벨+별표가 넘침 없이 들어가고, 입력칸은 368 → 348px 로 줄 뿐이다(실측).
 * 설계서 V1.3 용어라 라벨 문구를 줄이는 선택지는 없다.
 */
.modal .bn-write-common01 .b-table-box .b-row-box .b-title-box {
	width: 160px;
	white-space: nowrap;
}

/*
 * 날짜 선택 안내 팝업의 강조 문구를 한 줄로 흘린다.
 *
 * Why 필요: 퍼블 `.modal .complete-box .t1 span{display:block}`은 완료 팝업 기준 규칙이다.
 *   거기선 span 이 시설명이라 제목처럼 한 줄을 차지하는 게 맞지만, 이 팝업의 span 은
 *   문장 중간의 강조라 블록이 되면 '예약할 / 날짜를 선택 / 해주세요.' 3줄로 끊긴다.
 * Why 앱 스코프: 퍼블 규칙을 고치면 완료 팝업의 시설명 줄바꿈이 같이 깨진다.
 *   이 팝업(.select-date)에만 한정해 덮는다. 강조색(#009BB4)은 퍼블 값을 그대로 물려받는다.
 */
.modal.select-date .complete-box .t1 span {
	display: inline;
}

/*
 * 예약확인 내역 팝업 폭 — 설계서 V1.3 신규 팝업이라 퍼블에 대응 디자인이 없다.
 *
 * Why 800px: 퍼블 .modal-content 기본값 600px을 그대로 물려받으면 7컬럼
 *   (번호/시설명/예약일/예약시간/인원/상태/취소)이 들어가지 못해 헤더 '번호'·'인원'까지 세로로 쪼개지고
 *   예약시간과 인원이 붙어 '09:00~10:0012'로 읽힌다(2026-07-23 브라우저 실측).
 * Why 앱 스코프 override: 퍼블 CSS는 .modal.complete{max-width:400px} 처럼
 *   용도별로 폭을 덮는 체계를 이미 갖고 있다. 같은 방식을 따르되 공유 CSS 대신
 *   앱 전용 파일에 두어 다른 퍼블 페이지에 영향이 가지 않게 한다.
 * Why table width:100% 동반: 표가 width:auto라 모달만 넓히면 표는 590px에 머물러
 *   늘어난 공간을 쓰지 않는다. 폭 확장만으로는 증상이 그대로다.
 */
.modal.mylist .modal-content {
	max-width: 800px;
}

.modal.mylist .b-board-list table {
	width: 100%;
}

/*
 * 예약확인 내역 표 스타일.
 *
 * Why 필요: 스킨이 쓴 `.b-board-list`는 퍼블·공통 CSS 어디에도 정의가 없다(2026-07-23 전수 검색).
 *   즉 이 표는 테두리도 구분선도 없는 브라우저 기본 렌더 상태였다.
 * Why 파란 톤(2026-07-23 사용자 지시): 처음엔 퍼블 게시판 목록표(board.css)의 회색 톤을 그대로
 *   가져왔는데, 그건 흑백 기조의 게시판용이라 파란 기조인 이 사이트의 팝업 안에서 겉돌았다.
 *   색은 새로 만들지 않고 이미 쓰는 토큰만 옮겨온다 — 주색 #003B90(퍼블 .e-link a),
 *   연한 배경 #EAF4FB(이 파일의 선택된 날짜 배경). 셀 구분선은 주색을 15% 로 흐린 것이라
 *   같은 계열 안에 머문다(새 색상값을 늘리지 않기 위해 hex 대신 rgba 로 파생).
 */
.modal.mylist .b-board-list table {
	border-spacing: 0;
	border-top: 2px solid #003B90;
	table-layout: fixed;
}

.modal.mylist .b-board-list thead th {
	padding: 12px 8px;
	border-bottom: 1px solid #003B90;
	background-color: #EAF4FB;
	font-size: 14px;
	font-weight: 700;
	color: #003B90;
}

.modal.mylist .b-board-list tbody td {
	padding: 12px 8px;
	border-bottom: 1px solid rgba(0, 59, 144, 0.15);
	font-size: 14px;
	text-align: center;
	word-break: keep-all;
}

/*
 * 표 안의 [취소] — 달력 하단 [예약확인]과 같은 톤으로 맞춘다(2026-07-23 사용자 지시).
 *
 * 톤 토큰은 `.e-link a.js-check-reserve` 와 동일하다: 흰 배경 / 테두리 1px #bbb /
 *   글자 #262626 / 알약 radius 50px. 두 곳 모두 '주 동작의 대안'이라는 위계가 같다.
 * 크기만 다르다 — 형제 버튼과 나란히 서는 달력 쪽은 180x60·20px 이지만, 여기는 폭 10% 인
 *   표 셀 안이라 같은 치수를 넣을 물리적 공간이 없다. 셀에 맞는 최소 치수로 줄이되
 *   글자색·테두리·배경·곡률은 손대지 않아 같은 버튼으로 읽히게 한다.
 */
.modal.mylist .b-board-list tbody .js-cancel-reserve {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid #bbb;
	border-radius: 50px;
	background: #fff;
	font-size: 13px;
	line-height: 100%;
	color: #262626;
	white-space: nowrap;
}

/*
 * 표 하단 문의 안내(2026-07-23 사용자 지시).
 * 문구·연락처는 완료 모달과 같은 출처(앱 property inquiryTel)를 쓴다.
 * 톤은 퍼블 `.modal .complete-box .t2`(500 / #767676)를 따르되, 표 밑 각주라 한 단계 작게 잡는다.
 * 번호만 주색으로 올려 눈이 먼저 닿게 한다 — 이 문장의 목적이 번호 전달이기 때문이다.
 */
.modal.mylist .mylist-inquiry {
	margin-top: 16px;
	font-weight: 500;
	font-size: 15px;
	line-height: 140%;
	text-align: center;
	color: #767676;
}

.modal.mylist .mylist-inquiry span {
	font-weight: 700;
	color: #003B90;
}

/* 시설명은 길어서 가운데 정렬이 되레 읽기 나쁘다 */
.modal.mylist .b-board-list tbody td:nth-child(2) {
	text-align: left;
}

/* 컬럼 폭 고정 — table-layout:fixed라 첫 행 기준으로 흔들리지 않는다.
   번호 / 시설명 / 예약일 / 예약시간 / 인원 / 상태 / 취소 */
.modal.mylist .b-board-list th:nth-child(1) { width: 8%; }
.modal.mylist .b-board-list th:nth-child(2) { width: 30%; }
.modal.mylist .b-board-list th:nth-child(3) { width: 14%; }
.modal.mylist .b-board-list th:nth-child(4) { width: 18%; }
.modal.mylist .b-board-list th:nth-child(5) { width: 8%; }
.modal.mylist .b-board-list th:nth-child(6) { width: 12%; }
.modal.mylist .b-board-list th:nth-child(7) { width: 10%; }

/*
 * 모바일 — 7컬럼은 좁은 화면에서 헤더 글자까지 세로로 쪼개진다(500px 실측: 행 높이 76px,
 * 예약시간과 인원이 붙어 '09:00~10:0012'로 읽힘). 부차 정보인 번호·인원을 숨겨 5컬럼으로 줄인다.
 * Fox 게시판 목록의 모바일 관례(board.css가 nth-of-type으로 컬럼을 숨기는 방식)를 그대로 따른다.
 */
@media (max-width: 768px) {
	/* 좁은 폭에서 36px 시설명은 서너 줄로 접혀 달력을 밀어낸다. 시안에 모바일 값이 없어
	   퍼블 달력 제목의 모바일 축소 비율(30→22)에 맞춰 26px 로 내린다 */
	.calendar-wrap .calendar-head {
		margin-bottom: 12px;
	}

	.calendar-wrap .calendar-place {
		font-size: 26px;
	}

	.calendar-wrap .calendar-back {
		font-size: 15px;
		letter-spacing: 1px;
	}

	.calendar-wrap .calendar-back-arrow {
		width: 24px;
	}

	/* 좁은 폭에서는 라벨 칸이 block + 100% 로 바뀌어 위아래로 쌓인다.
	   테이블 재분배가 없으니 nowrap 이 필요 없고, 오히려 긴 라벨이 칸을 넘칠 수 있다 */
	.modal .bn-write-common01 .b-table-box .b-row-box .b-title-box {
		white-space: normal;
	}

	.modal.mylist .b-board-list th:nth-child(1),
	.modal.mylist .b-board-list td:nth-child(1),
	.modal.mylist .b-board-list th:nth-child(5),
	.modal.mylist .b-board-list td:nth-child(5) {
		display: none;
	}

	/* 날짜(2026-08-07)와 시간(09:00~18:00)은 줄바꿈되면 읽기 나쁘므로 한 줄 폭을 우선 확보하고,
	   어차피 2줄로 접히는 시설명이 남는 폭을 가져간다. */
	.modal.mylist .b-board-list th:nth-child(2) { width: 30%; }
	.modal.mylist .b-board-list th:nth-child(3) { width: 24%; }
	.modal.mylist .b-board-list th:nth-child(4) { width: 22%; }
	.modal.mylist .b-board-list th:nth-child(6) { width: 14%; }
	.modal.mylist .b-board-list th:nth-child(7) { width: 10%; }

	.modal.mylist .b-board-list tbody td:nth-child(3),
	.modal.mylist .b-board-list tbody td:nth-child(4) {
		white-space: nowrap;
	}

	.modal.mylist .b-board-list thead th,
	.modal.mylist .b-board-list tbody td {
		padding: 10px 4px;
		font-size: 13px;
	}
}

/*
 * 좁은 폭(폰) — 표를 버리고 예약 1건 = 블록 1개로 전환한다.
 *
 * Why: 390px 실기기 폭에서 표 가용폭이 298px까지 떨어지는데 5컬럼은 물리적으로 안 들어간다
 *   (2026-07-23 iframe 실측: 예약일 셀 70px에 내용 77px, 예약시간 65px에 79px, 상태 44px에 49px →
 *   전부 셀 밖으로 넘쳐 이웃 칸을 침범해 `2026-08-0709:00~10:00예약대기취소`로 읽혔다).
 *   nowrap을 풀어도 셀마다 3~4줄로 접혀 행 높이가 97px까지 늘 뿐 읽기는 나아지지 않는다.
 * Why 540px 기준: 500px에서는 5컬럼 표가 겹침 없이 정상이었다(행 높이 71px). 그 아래부터만 전환한다.
 * Why CSS만으로: 헤더가 사라지므로 각 값에 라벨이 필요한데, `nth-child` + `::before`로 붙이면
 *   렌더 JS(app.room-reservation-anchor.js)를 건드리지 않아도 된다(data-label 속성 주입 불필요).
 */
@media (max-width: 540px) {
	.modal.mylist .b-board-list thead {
		display: none;
	}

	.modal.mylist .b-board-list tbody tr {
		display: block;
		padding: 14px 2px;
		border-bottom: 1px solid #ccc;
	}

	.modal.mylist .b-board-list tbody td {
		display: block;
		width: auto;
		padding: 2px 0;
		border-bottom: 0;
		text-align: left;
		white-space: normal;
	}

	/* 시설명이 이 블록의 제목 역할을 한다 */
	.modal.mylist .b-board-list tbody td:nth-child(2) {
		margin-bottom: 6px;
		font-size: 15px;
		font-weight: 700;
	}

	/* 헤더가 없어진 자리를 값 앞 라벨이 대신한다 */
	.modal.mylist .b-board-list tbody td:nth-child(3)::before { content: "예약일 "; }
	.modal.mylist .b-board-list tbody td:nth-child(4)::before { content: "예약시간 "; }
	.modal.mylist .b-board-list tbody td:nth-child(6)::before { content: "상태 "; }

	.modal.mylist .b-board-list tbody td:nth-child(3)::before,
	.modal.mylist .b-board-list tbody td:nth-child(4)::before,
	.modal.mylist .b-board-list tbody td:nth-child(6)::before {
		display: inline-block;
		min-width: 60px;
		color: #767676;
	}

	/* 취소 버튼은 값이 아니라 행동이므로 라벨 없이 아래에 띄운다 */
	.modal.mylist .b-board-list tbody td:nth-child(7) {
		margin-top: 8px;
	}

	/* 손가락이 닿는 면적을 터치 최소 권장치(44px)까지 넓힌다.
	   Why 음수 마진을 뺐나: 취소가 테두리 있는 알약 버튼이 되면서(2026-07-23) 여백 상쇄가
	   버튼 상자 자체를 블록 왼쪽 밖으로 12px 밀어낸다. 글자 링크였을 때만 성립하던 기법이다.
	   이제는 버튼 윤곽이 눌리는 범위를 그대로 보여주므로 진짜 패딩으로 키운다. */
	.modal.mylist .b-board-list tbody td:nth-child(7) .js-cancel-reserve {
		padding: 14px 20px;
		font-size: 14px;
	}

	/* 취소 불가 건(예약완료/반려)에는 렌더 JS가 '-'를 넣는다. 표에서는 열 정렬상 의미가 있지만
	   블록형에서는 라벨 없는 기호가 덩그러니 남으므로, 취소 링크가 없는 칸은 통째로 숨긴다.
	   판별 기준은 렌더 JS가 붙이는 `.js-cancel-reserve` 클래스다 — `button`으로 판별하면
	   취소 링크가 `<a>`라서 취소 가능한 행까지 함께 숨어 폰에서 취소 기능이 사라진다
	   (2026-07-23 390px 실측으로 발견한 결함). */
	.modal.mylist .b-board-list tbody td:nth-child(7):not(:has(.js-cancel-reserve)) {
		display: none;
	}
}