— 앞에 전화 아이콘 (조직도 연락처 표와 같은 모양, 사용자 지시) / 상세 요약 표 '문의' 등, 앞 글자(○○ 담당)와 8px 띄움 */
a.tel-link[href^="tel:"]{display:inline-flex;align-items:center;gap:6px;margin-left:8px;vertical-align:top;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .2s;}
a.tel-link[href^="tel:"]::before{content:'';flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");mask-position:center;mask-size:contain;mask-repeat:no-repeat;} /* 전화 아이콘 (장식) */
a.tel-link[href^="tel:"]:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
a.tel-link[href^="tel:"]:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;}
/* 목록 머리 : 건수 + 정렬 */
.board-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;margin:clamp(28px, 22.49px + 1.469vw, 46px) 0 clamp(16px, 13.55px + 0.653vw, 24px);}
.board-total{margin:0;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--gray-700);}
.board-total b{color:var(--primary);font-weight:800;}
.sort-list{display:flex;align-items:center;margin:0;padding:0;list-style:none;}
.sort-list li{display:flex;align-items:center;}
.sort-list li + li::before{content:'';width:1px;height:12px;margin:0 12px;background:#cfd8e6;}
.sort-list a{display:inline-flex;align-items:center;gap:6px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);color:var(--gray-700);transition:color .2s;}
.sort-list a:hover{color:var(--primary);}
.sort-list a[aria-current]{color:var(--primary);font-weight:700;}
.sort-list a[aria-current]::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;} /* 색 외에 점으로도 선택 표시 */
.sort-list a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;}
/* 신청 흐름 (공통 : 시설 · 장비 사용 신청, 행사 참가 신청) : 진행 순서(.ap-steps) + 신청 대상(.ap-target) + 아래 버튼(.ap-btns) + 신청 완료(.ap-done) */
/* 예약 순서 : 화살표 모양 3칸 (연파랑) + 지금 단계만 진한 파랑, 칸 사이 흰 틈 / --ar = 화살표 깊이 */
.ap-steps{--ar:clamp(14px, 11.55px + 0.653vw, 22px);display:flex;margin:0 0 clamp(28px, 22.49px + 1.469vw, 46px);padding:0;list-style:none;overflow:hidden;border-radius:14px;}
.ap-steps li{
position:relative;flex:1 1 0%;min-width:0;display:flex;align-items:center;justify-content:center;gap:12px;height:clamp(52px, 45.88px + 1.633vw, 72px);padding:0 calc(var(--ar) + 12px);
background:#dfe8f8;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);font-weight:700;color:#1d3f8f;white-space:nowrap;
clip-path:polygon(0 0, calc(100% - var(--ar)) 0, 100% 50%, calc(100% - var(--ar)) 100%, 0 100%, var(--ar) 50%);
}
.ap-steps li:first-child{clip-path:polygon(0 0, calc(100% - var(--ar)) 0, 100% 50%, calc(100% - var(--ar)) 100%, 0 100%);}
.ap-steps li:last-child{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--ar) 50%);}
.ap-steps li + li{margin-left:calc(var(--ar) * -1 + 7px);} /* 앞 칸 화살표가 뒤 칸 홈에 들어감, 사이 흰 틈 7px */
.st-no{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(26px, 24.16px + 0.49vw, 32px);aspect-ratio:1;border-radius:50%;background:#4a6db5;font-size:clamp(13px, 12.39px + 0.163vw, 15px);font-weight:800;color:#fff;} /* 번호 원 : 흰 글자 대비 5:1 */
.ap-steps .is-current{background:var(--primary);font-weight:800;color:#fff;}
.ap-steps .is-current .st-no{background:#fff;color:var(--primary);}
/* 신청 대상 */
.ap-target{display:flex;align-items:center;gap:clamp(16px, 11.1px + 1.306vw, 32px);margin-bottom:clamp(48px, 37.59px + 2.776vw, 82px);padding:clamp(12px, 10.78px + 0.327vw, 16px);border:1px solid #e3ecf7;border-radius:24px;background:#fff;}
.apt-thumb{flex:none;width:clamp(120px, 95.51px + 6.531vw, 200px);aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:var(--sky) url("../images/common/no_image.png?v=26102205") center/cover no-repeat;} /* 사진이 없으면 노 이미지 바탕 */
.apt-thumb img{width:100%;height:100%;object-fit:cover;}
img.is-broken{visibility:hidden;} /* 못 불러온 사진은 숨겨 칸의 노 이미지 바탕이 보이게 (js/common.js) */
.apt-body{flex:1 1 auto;min-width:0;}
.apt-body .cv-tags{margin-bottom:8px;}
.apt-title{margin:0 0 10px;font-family:var(--font-title);font-weight:400;font-size:clamp(22px, 19.55px + 0.653vw, 30px);line-height:1.25;color:var(--ink);word-break:keep-all;}
.apt-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);}
.apt-meta b{margin-right:8px;font-weight:700;color:var(--ink);}
.apt-back{flex:none;gap:8px;height:50px;margin-right:clamp(4px, -2.12px + 1.633vw, 20px);padding:0 22px 0 8px;border-color:transparent;border-radius:999px;background:linear-gradient(90deg, var(--primary), #1556c9);font-weight:800;color:#fff;box-shadow:0 12px 22px -12px rgba(5,62,165,.75);} /* 시설 · 장비 정보 보기 : 진한 파랑 알약 + 흰 돋보기 + 화살표 (흰 글자 대비 6:1 이상, 사용자가 고른 E안) */
.apt-back::before{content:'';flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18) url("../images/contents/rv_search_icon02.svg") center/17px no-repeat;} /* 돋보기 (장식) */
.apt-back::after{content:'';flex:none;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease);} /* 화살표 (장식) */
.apt-back:hover{border-color:transparent;background:var(--primary-dark);color:#fff;}
.apt-back:hover::after{transform:translateX(3px) rotate(45deg);}
.ap-btns{gap:10px;margin-top:clamp(36px, 29.88px + 1.633vw, 56px);}
.ap-btns .btn{min-width:150px;}
/* 신청 완료 */
.ap-done{display:flex;flex-direction:column;align-items:center;padding:clamp(36px, 29.88px + 1.633vw, 56px) clamp(20px, 10.2px + 2.612vw, 52px);border:1px solid #e3ecf7;border-radius:28px;background:#fff;text-align:center;}
.ad-title{margin:0 0 10px;font-family:var(--font-title);font-weight:400;font-size:clamp(22px, 19.55px + 0.653vw, 30px);color:var(--ink);word-break:keep-all;}
.ad-text{max-width:560px;margin:0;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);line-height:1.7;color:var(--gray-700);word-break:keep-all;}
.ap-equip-guide{margin-top:clamp(20px, 16.94px + 0.816vw, 30px);font-weight:700;color:var(--ink);} /* 시설 신청 완료 : 장비 함께 예약 안내 */
/* 신청 정보 : 카드 격자 (신청 번호는 넓은 연파랑 카드, 나머지 2칸) */
.ad-info{display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:680px;margin:clamp(24px, 19.1px + 1.306vw, 40px) 0 0;text-align:left;}
.ad-info > div{flex:1 1 calc(50% - 5px);min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 20px;border:1px solid #e3ecf7;border-radius:16px;background:#fff;}
.ad-info > div:first-child{flex-basis:100%;border-color:#d5e3f7;background:#f3f8fe;}
.ad-info dt{font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:600;color:var(--gray-700);}
.ad-info dd{margin:0;font-size:clamp(15px, 14.39px + 0.163vw, 17px);font-weight:700;color:var(--ink);word-break:keep-all;}
.ad-info > div:first-child dd{font-size:clamp(18px, 16.78px + 0.327vw, 22px);font-weight:800;letter-spacing:.5px;color:var(--primary);}
.ad-state{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:#fff4de;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;color:#c2410c;} /* 승인 대기 : 연주황 (대비 4.7:1, 11/9 시안 · 11/10 사용자 지시 "시안 기준" — 예전 10/29 진도회의 연파랑) */
@media (max-width:1000px){
.ap-target{flex-wrap:wrap;}
.apt-back{margin:0 0 0 auto;}
}
@media (max-width:640px){
.ap-steps{--ar:12px;}
.ap-steps li{flex:0 0 auto;gap:0;height:48px;padding:0 calc(var(--ar) + 10px) 0 calc(var(--ar) + 12px);} /* 모바일 : 지난 · 다음 단계는 번호만 */
.ap-steps li:first-child{padding-left:14px;}
.ap-steps .is-current{flex:1 1 auto;gap:8px;}
.ap-steps li:not(.is-current) .st-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;} /* 이름은 스크린리더만 */
.ad-info > div{flex-basis:100%;}
.ap-target{flex-direction:column;align-items:stretch;}
.apt-thumb{width:100%;}
.apt-body{padding:0 4px;}
.apt-back{margin:0;}
.ap-btns .btn{flex:1 1 0%;min-width:0;}
/* 큰 버튼 : 모바일은 글자 · 여백 줄여 한 줄 (사용자 지시 — 상세 아래 "장비 사용 신청" 등이 2줄 되던 것, 큰 버튼 모두 같게) */
.btn-lg{gap:6px;padding:0 14px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);}
.btn-lg.btn-arrow::after{width:14px;height:14px;}
}
@media (max-width:450px){ /* 작은 모바일 (사용자 지시 : 360 → 450, 한 블록) */
/* 진행 순서 : 번호만 (이름은 스크린리더만), 칸 같은 폭 */
.ap-steps li,.ap-steps .is-current{flex:1 1 0%;gap:0;padding:0 var(--ar);}
.ap-steps li:first-child{padding-left:0;}
.ap-steps li:last-child{padding-right:0;padding-left:var(--ar);}
.ap-steps .st-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
/* 큰 버튼 : 한 번 더 줄임 */
.btn-lg{padding:0 10px;font-size:clamp(13.5px, 13.35px + 0.041vw, 14px);letter-spacing:-.02em;}
}
@media (prefers-reduced-motion:reduce){ .guide-box .gb-btn,.gb-btn-ic,.gb-btn-ic::before{transition:none;} .apt-back::after{transition:none;} .apt-back:hover::after{transform:rotate(45deg);} }
/* 레이어 (공통) :
- 여는 버튼 : data-layer-open="레이어id" / 닫는 버튼 : data-layer-close (js/content.js) */
.layer{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,12,30,.55);}
.layer[hidden]{display:none;}
.layer-box{
position:relative;width:100%;max-width:560px;max-height:calc(100vh - 40px);overflow-y:auto;padding:clamp(28px, 24.33px + 0.98vw, 40px);
border-radius:24px;background:#fff;box-shadow:0 40px 80px -30px rgba(5,12,30,.5);
}
.layer-box:focus{outline:none;}
.layer-title{margin:0 40px 20px 0;font-family:var(--font-title);font-weight:400;font-size:clamp(22px, 20.16px + 0.49vw, 28px);color:var(--ink);}
.layer-desc{margin:-12px 40px 4px 0;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);word-break:keep-all;} /* 제목 아래 안내 한 줄 */
.layer-sub{display:flex;align-items:center;gap:8px;margin:22px 0 10px;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);font-weight:800;color:var(--ink);}
.layer-desc + .layer-sub{margin-top:18px;}
.layer-sub::before{content:'';flex:none;width:14px;height:14px;background:url("../images/common/bullet.svg") center/contain no-repeat;} /* 제목 블릿 (.cont-title 과 같은 모양) */
.layer-info{margin:0;overflow:hidden;border:1px solid #e3e9f1;border-radius:10px;} /* 표 : 얇은 테두리 + 둥근 모서리 */
.layer-info > div{display:flex;align-items:stretch;}
.layer-info > div + div{border-top:1px solid #eef2f7;}
.layer-info dt{flex:none;display:flex;align-items:center;width:92px;padding:12px 14px;background:#f5f7fa;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);font-weight:700;color:var(--gray-700);white-space:nowrap;} /* 항목 칸만 연한 회색 배경 */
.layer-info dd{flex:1 1 auto;display:flex;align-items:center;min-width:0;margin:0;padding:10px 14px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);font-weight:600;color:var(--ink);}
.layer-info .input{width:100%;height:42px;font-weight:400;}
.layer-info .li-course dd{font-weight:800;} /* 교육명 강조 */
.layer-agree{margin-top:20px;padding:16px 18px;border-radius:14px;background:#f7f9fc;border:1px solid #e6ecf4;} /* 동의 영역 : 회색 박스 */
.layer-agree .chk{align-items:flex-start;font-weight:700;line-height:1.5;} /* 글이 두 줄이 되면 체크 상자는 첫 줄에 (사용자 지시) */
.layer-agree .chk input{margin-top:calc((1.5em - 18px) / 2);} /* 체크 상자 = 첫 줄 글자 가운데 */
.layer-agree .req{color:var(--red);font-weight:700;}
.layer-note{margin:8px 0 0 26px;font-size:clamp(12px, 11.69px + 0.082vw, 13px);color:var(--gray-700);line-height:1.6;word-break:keep-all;}
.layer-msg{margin:8px 0 0 26px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;color:var(--red);}
.layer-msg:empty{margin:0;}
.layer-btns{display:flex;justify-content:center;gap:10px;margin-top:26px;}
.layer-btns .btn{flex:1 1 0%;height:52px;} /* 버튼 두 개를 폭 가득 나란히 */
.layer-close{
position:absolute;top:18px;right:18px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--ink);transition:background .2s;
}
.layer-close:hover{background:var(--gray-100);}
.layer-close:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.layer-close img{width:22px;height:22px;}
/* 확인 · 알림 창 (브라우저 기본 alert · confirm 대신, js/common.js ictConfirm · ictAlert) : 가운데 정렬 작은 레이어 */
.dlg-box{max-width:440px;text-align:center;}
.ict-dialog .layer-title{margin:0 0 12px;}
.dlg-msg{margin:0;font-size:clamp(15px, 14.39px + 0.163vw, 17px);line-height:1.7;color:var(--gray-700);white-space:pre-line;word-break:keep-all;}
.layer-btns .btn[hidden]{display:none;}
.btn-danger{background:#b42318;border-color:#b42318;color:#fff;} /* 위험한 일(탈퇴 · 삭제 · 취소) : 흰 글자 대비 6.6:1 */
.btn-danger:hover{background:#912018;border-color:#912018;color:#fff;}
.btn-danger:focus-visible{outline:2px solid #b42318;outline-offset:2px;}
.layer-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 0 4px;}
.ld-ico{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin-bottom:18px;border-radius:50%;background:var(--primary);color:#fff;box-shadow:0 0 0 8px #e3eefb;}
.ld-ico img{width:34px;height:34px;}
.ld-tit{margin:0 0 8px;font-size:clamp(18px, 17.39px + 0.163vw, 20px);font-weight:800;color:var(--ink);}
.ld-txt{margin:0;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--gray-700);}
.layer-info dd:empty::before{content:"-";content:"-" / "없음";color:var(--gray-500);} /* 정보가 없는 항목 : 값 자리에 "-" (스크린리더는 "없음") */
/* 입력 양식 (공통) : 왼쪽 항목 이름(연한 회색 칸) + 오른쪽 입력 / 필수 = 이름 뒤 빨간 * (aria-hidden) + 입력에 required
*/
.form-list{margin:0;border-top:2px solid var(--ink);}
.fm-row{display:flex;align-items:stretch;border-bottom:1px solid #e9eef5;}
.fm-th{flex:none;display:flex;align-items:center;width:200px;margin:0;padding:14px 24px;background:#f5f7fa;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:700;color:var(--ink);word-break:keep-all;} /* margin:0 = 일 때도 회색 칸이 줄 높이를 꽉 채우게 */
.fm-td{flex:1 1 auto;min-width:0;padding:12px 20px;}
.fm-td .input,.fm-td .select{max-width:100%;} /* 칸이 좁아져도 넘치지 않게 */
.fm-w-xs{width:120px;}
.fm-w-sm{width:260px;}
.fm-w-md{width:420px;}
.fm-w-sel{width:180px;}
.fm-w-full{width:100%;}
.fm-inline{display:flex;align-items:center;gap:8px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--ink);}
.fm-range{display:flex;flex-wrap:wrap;align-items:center;gap:8px;} /* 날짜 · 시간 나란히 : 시작 ~ 끝 (각 입력에 숨김 레이블) */
.fm-range .input{width:170px;}
.fm-range .input[type="time"]{width:130px;}
.fm-range span{color:var(--gray-700);}
.fm-help{position:relative;margin:6px 0 0;padding-left:22px;font-size:clamp(12px, 11.69px + 0.082vw, 13px);line-height:1.6;color:var(--gray-700);word-break:keep-all;}
.fm-help::before,.cv-note::before,.sb-note::before{ /* 안내 아이콘 i (장식, 스크린리더는 읽지 않음) : 입력 양식 도움말 + 교육 · 시설 상세 요약 안내 + 시설 일정 예약 현황 안내 */
content:'i';content:'i' / '';position:absolute;left:0;top:2px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
background:var(--gray-500);color:#fff;font-size:clamp(10.5px, 10.35px + 0.041vw, 11px);font-weight:800;font-style:italic;font-family:Georgia,serif;
}
.fm-err{position:relative;margin:6px 0 0;padding-left:20px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;line-height:1.6;color:var(--red);word-break:keep-all;}
.fm-err::before{content:'!';content:'!' / '';position:absolute;left:0;top:3px;display:flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--red);color:#fff;font-size:clamp(9.5px, 9.35px + 0.041vw, 10px);font-weight:800;} /* 오류 아이콘 (장식) */
.fm-note{margin:0;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);color:var(--gray-700);}
.input[readonly]{background:#f7f9fc;}
.select{height:44px;padding:0 36px 0 12px;border:1px solid #7f8ba0;border-radius:10px;background:#fff url("../images/common/arrow_down_icon.svg") right 12px center/14px no-repeat;font:inherit;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer;} /* 선택 상자 : 오른쪽 아래 화살표 */
.select:focus{border-color:var(--primary);outline:2px solid var(--primary);outline-offset:-1px;}
.fm-email{display:flex;flex-wrap:wrap;align-items:center;gap:8px;} /* 이메일 : 아이디 @ 도메인 + 도메인 선택 */
.fm-at{flex:none;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:700;color:var(--gray-700);}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--red);}
.fm-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;} /* 양식 묶음 머리 : 제목(.cont-title) + 오른쪽 필수 안내(.fm-note) */
.fm-rdo{display:flex;flex-wrap:wrap;gap:8px;} /* 알약 라디오(.rdo) 묶음 :
*/
.input-file{ /* 파일 첨부 : 브라우저 기본 파일 칸(키보드 · 스크린리더 그대로) + 버튼 모양만 */
display:block;width:100%;padding:7px;border:1px dashed #cfd8e6;border-radius:12px;background:#f7f9fc;
font:inherit;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);cursor:pointer;
}
.input-file::file-selector-button{margin-right:12px;height:36px;padding:0 16px;border:1px solid #cfd8e6;border-radius:9px;background:#fff;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s;}
.input-file:hover::file-selector-button{border-color:var(--primary);color:var(--primary);}
.input-file:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.input-file[aria-invalid="true"]{border-color:var(--red);}
.upl-list{margin:8px 0 0;padding:0 14px;list-style:none;border:1px solid #e3e9f1;border-radius:12px;background:#fff;} /* 고른 첨부파일 목록 (js/board.js 가 만듦) */
.upl-list:empty{display:none;}
.upl-list li{display:flex;align-items:center;gap:8px 10px;padding:10px 0;font-size:clamp(13px, 12.69px + 0.082vw, 14px);}
.upl-list li + li{border-top:1px dashed #e3e9f1;}
.upl-name{position:relative;flex:0 1 auto;min-width:0;padding-left:22px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
.upl-name::before{ /* 클립 (장식) */
content:'';position:absolute;left:0;top:2px;width:16px;height:16px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646e84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 11.6 12 19.1a4.9 4.9 0 0 1-6.9-6.9l7.8-7.8a3.2 3.2 0 0 1 4.6 4.6l-7.7 7.7a1.6 1.6 0 0 1-2.3-2.3l7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.upl-size{flex:none;color:var(--gray-500);}
.upl-del{flex:none;height:30px;margin-left:auto;padding:0 12px;border:1px solid #cfd8e6;border-radius:8px;background:#fff;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;color:var(--gray-700);transition:border-color .2s,color .2s;}
.upl-del:hover{border-color:var(--red);color:var(--red);}
.upl-del:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.textarea{display:block;width:100%;min-height:112px;padding:12px 14px;border:1px solid #7f8ba0;border-radius:10px;background:#fff;font:inherit;font-size:clamp(13px, 12.69px + 0.082vw, 14px);line-height:1.6;color:var(--ink);resize:vertical;}
.textarea:focus{border-color:var(--primary);outline:2px solid var(--primary);outline-offset:-1px;}
.input::placeholder,.textarea::placeholder{color:var(--gray-500);}
/* 동의 상자 : 체크 + (필수) + 내용 보기(details) */
.agree-box{padding:clamp(18px, 14.94px + 0.816vw, 28px) clamp(18px, 12.49px + 1.469vw, 36px);border:1px solid #e3e9f1;border-radius:20px;background:#f7f9fc;}
.ag-item + .ag-item{margin-top:16px;padding-top:16px;border-top:1px dashed #d6e2f1;}
.ag-item .chk{font-weight:700;}
.ag-item .req{margin-left:0;}
.ag-detail{margin:10px 0 0 26px;}
.ag-detail summary{display:inline-flex;align-items:center;gap:6px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;color:var(--primary);cursor:pointer;list-style:none;}
.ag-detail summary::-webkit-details-marker{display:none;}
.ag-detail summary::after{content:'';width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;}
.ag-detail[open] summary::after{transform:translateY(1px) rotate(-135deg);}
.ag-detail summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}
.ag-detail p{margin:10px 0 0;font-size:clamp(12px, 11.69px + 0.082vw, 13px);color:var(--gray-700);word-break:keep-all;}
.ag-dl{margin:10px 0 0;padding:12px 16px;border:1px solid #e3e9f1;border-radius:12px;background:#fff;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);}
.ag-dl > div{display:flex;gap:12px;padding:4px 0;}
.ag-dl dt{flex:none;width:5em;font-weight:700;color:var(--ink);}
.ag-dl dd{margin:0;color:var(--gray-700);word-break:keep-all;}
.ag-link{display:inline-flex;align-items:center;gap:4px;margin:8px 0 0 26px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.ag-link img{width:14px;height:14px;}
.ag-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px;}
.ag-item .fm-err{margin-left:26px;}
@media (max-width:640px){
.input,.select,.textarea{font-size:clamp(16px, 15.54px + 0.122vw, 17.5px);} /* 모바일 입력 칸 글자 16px 이상 : 아이폰 Safari 는 16px 보다 작은 칸을 누르면 화면을 저절로 확대함 (사용자 지시) */
.chip{height:36px;padding:0 14px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);}
.fm-row{flex-direction:column;} /* 모바일 : 항목 이름 위, 입력 아래 */
.fm-th{width:auto;padding:11px 16px;}
.fm-td{padding:12px 0;}
.fm-w-sm,.fm-w-md,.fm-w-sel{width:100%;}
.fm-range .input,.fm-range .input[type="time"]{flex:1 1 0%;width:auto;min-width:0;}
.fm-range.is-when .input[type="date"]{flex-basis:100%;} /* 행사 일시 : 날짜 한 줄, 시작 ~ 끝 시간 다음 줄 */ /* 모바일 : 입력 · 선택 상자 칸 가득 (이메일 도메인 선택은 .fm-email 규칙) */
.fm-email .input{flex:1 1 0%;width:auto;min-width:0;} /* 모바일 이메일 : 아이디 @ 도메인 한 줄 + 선택 상자 아래 줄 가득 */
.fm-email .select{flex:1 1 100%;width:auto;}
.layer-info dt{width:84px;padding:12px;}
.layer-info dd{padding:10px 12px;}
.guide-box{flex-direction:column;align-items:stretch;gap:14px;} /* 모바일 : 안내 박스 아이콘은 위 가운데, 안내 글도 가운데 (목록은 왼쪽 그대로) */
.gb-ic{align-self:center;}
.guide-box p{text-align:center;}
.guide-box .gb-btn{align-self:center;margin-left:0;} /* 모바일 : 안내 글 아래 가운데 */
}
@media (prefers-reduced-motion:reduce){
.tab-switch [role="tab"]{transition:none;}
.btn-arrow::after{transition:none;}
.btn-arrow:hover::after{transform:none;}
}
/* ===================== AOS 스크롤 나타남 (lib/aos/aos.js 가 화면에 들어오면 .aos-animate 를 붙이고, 나가면 뗌 — 모양은 여기서, aos.css 는 안 씀) =====================
- data-aos 는 js/common.js 가 붙임 → 스크립트가 없거나 실패하면 아무것도 숨기지 않음
- CSS 애니메이션 + translate · scale 속성 : 첫 화면에 있는 요소도 재생되고, 카드 마우스 올림(transform) · 원래 투명도와 겹치지 않음 (끝나면 원래 모양)
- 거리 30px · 94%, 0.85초 / 위아래 어느 쪽으로 다시 들어와도 다시 나타남 (사용자 지시)
- 움직임 줄이기 설정 · 인쇄 : 항상 보임 (웹접근성) */
@keyframes aos-fade-up{from{opacity:0;translate:0 30px;}}
@keyframes aos-fade-right{from{opacity:0;translate:-30px 0;}}
@keyframes aos-fade-left{from{opacity:0;translate:30px 0;}}
@keyframes aos-zoom-in{from{opacity:0;scale:.94;}}
[data-aos]:not(.aos-animate){opacity:0;}
[data-aos].aos-animate{animation:aos-fade-up .85s cubic-bezier(.215,.61,.355,1) backwards;}
[data-aos="fade-right"].aos-animate{animation-name:aos-fade-right;}
[data-aos="fade-left"].aos-animate{animation-name:aos-fade-left;}
[data-aos="zoom-in"].aos-animate{animation-name:aos-zoom-in;}
[data-aos][data-aos-delay="50"]{animation-delay:0.05s;}
[data-aos][data-aos-delay="100"]{animation-delay:0.1s;}
[data-aos][data-aos-delay="150"]{animation-delay:0.15s;}
[data-aos][data-aos-delay="200"]{animation-delay:0.2s;}
[data-aos][data-aos-delay="250"]{animation-delay:0.25s;}
[data-aos][data-aos-delay="300"]{animation-delay:0.3s;}
[data-aos][data-aos-delay="350"]{animation-delay:0.35s;}
[data-aos][data-aos-delay="400"]{animation-delay:0.4s;}
[data-aos][data-aos-delay="450"]{animation-delay:0.45s;}
[data-aos][data-aos-delay="500"]{animation-delay:0.5s;}
[data-aos][data-aos-delay="550"]{animation-delay:0.55s;}
[data-aos][data-aos-delay="600"]{animation-delay:0.6s;}
[data-aos][data-aos-delay="650"]{animation-delay:0.65s;}
[data-aos][data-aos-delay="700"]{animation-delay:0.7s;}
[data-aos][data-aos-delay="750"]{animation-delay:0.75s;}
[data-aos][data-aos-delay="800"]{animation-delay:0.8s;}
[data-aos][data-aos-delay="850"]{animation-delay:0.85s;}
[data-aos][data-aos-delay="900"]{animation-delay:0.9s;}
/* 탭 패널을 열 때 (처음에 숨어 있던 패널) : 안의 칸이 차례로 올라옴 (js/common.js .aos-reveal) */
.aos-reveal > *{animation:aos-fade-up .85s cubic-bezier(.215,.61,.355,1) backwards;}
.aos-reveal > :nth-child(2){animation-delay:.1s;}
.aos-reveal > :nth-child(3){animation-delay:.2s;}
.aos-reveal > :nth-child(n+4){animation-delay:.3s;}
@media (prefers-reduced-motion:reduce){ [data-aos]{opacity:1 !important;animation:none !important;} .aos-reveal > *{animation:none !important;} }
@media print{ [data-aos]{opacity:1 !important;animation:none !important;} }