/* =========================================================
   신규 시스템 사용자 화면 보조 스타일 (코스 목록·상세)
   기존 디자인(main_renew·sub_con)을 바꾸지 않고, 새로 생긴 요소만 정의
   ========================================================= */
.af-noimg { display: flex; aspect-ratio: 4 / 3; align-items: center; justify-content: center; width: 100%; height: 100%; background: #e8f3ec; color: #2f8a57; font-size: 14px; }
.af-notice { margin: 0 0 24px; padding: 12px 16px; border-left: 4px solid #f29a1d; background: #fff8ec; color: #6b4a00; font-size: 15px; }
.af-notice strong { margin-right: 6px; }
.af-ref { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; background: #fff4e0; color: #b26a00; font-size: 12px; font-style: normal; vertical-align: middle; }
.af-gpxcalc { margin: 14px 0 0; padding: 12px 14px; background: #f5f7f5; border-radius: 6px; font-size: 14px; }
.af-gpxcalc dt { font-weight: 700; color: #1f5f3f; }
.af-gpxcalc dt small { font-weight: 400; color: #b26a00; }
.af-gpxcalc dd { margin: 4px 0 0; color: #4a544e; }
.hs-map.af-map--empty, .af-map--empty { display: flex; align-items: center; justify-content: center; height: 220px; background: #f5f7f5; color: #7b857f; }
.af-pt b { display: block; transform: translate(-50%, -50%); width: 24px; height: 24px; line-height: 18px; border: 3px solid #fff; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); background: #1e5bd8; }
.af-pt--start b { background: #2f8a57; } .af-pt--end b { background: #dd0000; } .af-pt--summit b { background: #b26a00; }
.af-label { font-weight: 700; font-size: 12px; }
.af-pop img { display: block; width: 100%; height: auto; border-radius: 6px; }
.af-pop p { margin: 6px 0 0; font-size: 13px; }
/* MAP-PHOTO-POPUP-NAVIGATION-1: 이전·다음 버튼(원본 hs-pop__btn 모양) - 처음·끝은 비활성, 사진을 못 받으면 안내 글 */
.af-pop .hs-pop__btn:disabled { opacity: .35; cursor: default; background: #fff; border-color: #ddd; }
.af-pop .af-pop__err { padding: 28px 8px; background: #f5f7f5; border-radius: 6px; color: #4a544e; text-align: center; }
@media (pointer: coarse) { .af-pop .hs-pop__btn { width: 36px; height: 36px; line-height: 32px; } }
.af-preview-bar { position: sticky; top: 0; z-index: 200; padding: 8px 16px; background: #b26a00; color: #fff; font-size: 14px; text-align: center; }
.sub_left .left_menu a.k-link { display: block; color: inherit; text-decoration: none; }
/* 기존 sub_con.css 모바일 .graph min-width(320px)이 좁은 화면에서 본문(310px)을 넘는 문제 보정 - 원본 CSS 는 수정하지 않음 */
.sub_con .detail .graph { min-width: 0; max-width: 100%; }
/* 목록(원본 dullegil_item·san_item 마크업): 제목 링크가 항목 전체를 덮도록 (원본은 a.more 가 숨김 처리되어 있음) */
.dullegil_item, .san_item { position: relative; }
.dullegil_item h5 .af-link, .san_item h5 .af-link { color: inherit; text-decoration: none; }
.dullegil_item h5 .af-link::after, .san_item h5 .af-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dullegil_item h5 .af-link:focus-visible, .san_item h5 .af-link:focus-visible { outline: 3px solid #f29a1d; outline-offset: 2px; }
.dullegil_item .af-ref { margin-left: 2px; }
/* 원본은 Semantic UI(CDN)로 그리는 초기화·검색하기 버튼 - 외부 CDN 없이 원본 계산값 그대로 재현 (.btn_zone 안에서만) */
.sub_con .btn_zone { font-size: 14px; line-height: 14px; }   /* 원본: Semantic UI 기본 글자 14px (모바일에서 두 줄로 쌓일 때 높이 같게) */
.sub_con .btn_zone .ui.button { display: inline-block; min-height: 1em; margin: 0 .25em 0 0; border: 0; border-radius: 4px; line-height: 21px; vertical-align: baseline; cursor: pointer; }
.sub_con .btn_zone .ui.grey.basic.button { background: transparent; color: #767676; box-shadow: inset 0 0 0 1px #767676; }
.sub_con .btn_zone .ui.brown.button { color: #fff; }
.sub_con .btn_zone i.icon { display: inline-block; width: 1.18em; height: 1em; margin: 0 .43em 0 -.21em; opacity: .8; vertical-align: -2px; background: no-repeat center / 15px 15px; }
.sub_con .btn_zone i.icon.refresh { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23767676' d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z'/%3E%3C/svg%3E"); }   /* DESIGN-AUDIT-FIX-1: 원본 Semantic UI 아이콘(refresh = U+F021)과 같은 모양 */
.sub_con .btn_zone i.icon.search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E"); }   /* DESIGN-AUDIT-FIX-1: 원본 Semantic UI 아이콘(search = U+F002)과 같은 모양 */
.af-map-notice { position: absolute; left: 50%; top: 12px; z-index: 1000; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 4px; background: rgba(255, 255, 255, .95); color: #4a544e; font-size: 13px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
/* PUBLIC-6 접근성: 원본 CSS 의 *:focus { outline:none } 때문에 본문(.sub_wrap)에 키보드 포커스 표시가 없음 → 키보드 포커스(:focus-visible)일 때만 머리말과 같은 표시 (마우스 클릭 화면은 그대로, 입력칸은 원본 포커스 모양 유지) */
.sub_wrap :focus-visible:not(input):not(select):not(textarea) { outline: 3px solid #f29a1d; outline-offset: 2px; }
/* GLOBAL-LIST-LEFT-ALIGN-1: 카드 목록(.dullegil_list·.san_list·.tour_list)은 원본 space-between(카드 폭·간격 그대로)을 두고,
   목록 끝 빈 칸(.af-fill, 같은 카드 폭·높이 0) 3개로 마지막 줄 카드가 왼쪽 열부터 같은 간격으로 놓이게 함 */
.dullegil_list .dullegil_item.af-fill, .search_result .dullegil_list .dullegil_item.af-fill,
.san_list .san_item.af-fill, .tour_list .tour_item.af-fill { height: 0; min-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
/* ALL-61-COURSES-PHOTO-MAP-AUDIT-FIX: 같은 지점(좌표 1m 미만) 사진 수 표시 + 팝업 "같은 지점" 단추 (딥그린) */
.af-photo-count span { display: inline-block; min-width: 18px; height: 18px; margin: -26px 0 0 4px; padding: 0 4px; border: 1.5px solid #fff; border-radius: 9px; background: #1f5f3f; color: #fff; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.af-pop .af-pop__same { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 12px; color: #4a544e; }
.af-pop .af-pop__same span { margin-right: 2px; }
.af-pop .af-pop__spot { min-width: 26px; height: 26px; padding: 0 5px; border: 1px solid #c9d6cd; border-radius: 13px; background: #fff; color: #1f5f3f; font-size: 12px; cursor: pointer; }
.af-pop .af-pop__spot.is-on { background: #1f5f3f; border-color: #1f5f3f; color: #fff; }
@media (pointer: coarse) { .af-pop .af-pop__spot { min-width: 32px; height: 32px; border-radius: 16px; } }
/* COURSE-TOURISM-AND-PRINT-LAYOUT-1: 인쇄 준비 중 지도 크기 (A4 인쇄 폭 186mm × 120mm, 인쇄가 끝나면 지도 스크립트가 해제) */
.hs-map.af-map.af-map--print { width: 186mm; max-width: none; height: 120mm; }
/* MOBILE-MAP-PHOTO-BOTTOM-SHEET-1: 768px 이하 지도 사진 창 (지도 칸 아래쪽에 겹침, 스크립트가 위치·폭을 지도에 맞춤) */
.af-map-wrap { position: relative; }
.af-sheet { position: absolute; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; padding: 4px 12px max(10px, env(safe-area-inset-bottom)); border: 1px solid #ccd6cf; border-radius: 14px 14px 0 0; background: #fff; box-shadow: 0 -4px 14px rgba(0,0,0,.18); font-family: 'Noto Sans KR', sans-serif; color: #222; }
.af-sheet[hidden] { display: none; }
.af-sheet:focus { outline: none; }
.af-sheet:focus-visible { outline: 2px solid #1f5f3f; outline-offset: -2px; }
.af-sheet__handle { width: 40px; height: 4px; margin: 4px auto 6px; border-radius: 2px; background: #c4ccc7; }
.af-sheet__head { display: flex; align-items: center; gap: 6px; }
.af-sheet__title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.af-sheet__close, .af-sheet__expand, .af-sheet__nav { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1px solid #d5ddd8; border-radius: 22px; background: #fff; color: #1f5f3f; font-size: 22px; line-height: 1; cursor: pointer; }
.af-sheet__img { position: relative; height: clamp(140px, 30vh, 240px); margin: 8px 0 0; border-radius: 8px; background: #f2f5f3; overflow: hidden; touch-action: pan-y pinch-zoom; }
.af-sheet.is-expanded .af-sheet__img { height: 52vh; max-height: 440px; }
.af-sheet__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.af-sheet__img img[hidden] { display: none; }
.af-sheet__img .af-pop__err { margin: 0; padding: 60px 8px; color: #4a544e; text-align: center; font-size: 14px; }
.af-sheet__bar { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 0; }
.af-sheet__nav { font-size: 28px; }
.af-sheet__nav:disabled { opacity: .35; cursor: default; }
.af-sheet__count { font-size: 15px; font-weight: 700; color: #1f5f3f; }
/* MAP-PHOTO-50M-FIX: "지도 사진 n / 전체"(지도 표시 기준 번호, 포토갤러리 번호와 다름)·갈림길 표시 */
.af-sheet__kind { font-size: 13px; color: #4a544e; }
.af-pop .af-pop__type, .af-sheet__kind b { color: #1f5fa8; }
.af-map-legend { display: inline-block; width: 10px; height: 10px; margin: 0 3px 0 2px; border: 2px solid #fff; border-radius: 50%; background: #1f5fa8; box-shadow: 0 0 0 1px #9aa8b6; vertical-align: -1px; }
.af-sheet__same:empty { display: none; }
.af-sheet__same .af-pop__same { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; color: #4a544e; }
.af-sheet__same .af-pop__spot { min-width: 44px; height: 36px; padding: 0 8px; border: 1px solid #c9d6cd; border-radius: 18px; background: #fff; color: #1f5f3f; font-size: 14px; cursor: pointer; }
.af-sheet__same .af-pop__spot.is-on { background: #1f5f3f; border-color: #1f5f3f; color: #fff; }
@media (orientation: landscape) and (max-height: 500px) { .af-sheet__img { height: 40vh; min-height: 110px; } .af-sheet.is-expanded .af-sheet__img { height: 60vh; } }
@media (min-width: 769px) { .af-sheet { display: none; } }
/* TOURISM-OFFICIAL-START-POINT-7KM: 등산로 세부 코스별 주변관광지 묶음 제목 (한 페이지에 여러 들머리일 때만) */
.af-tour-sub { margin: 18px 0 10px; font-size: 15px; color: #333; }
.af-tour-sub strong { margin-right: 4px; color: #1f5f3f; }
/* TOURISM-USER-ADDRESS-DISPLAY: 관광지 카드 거리, 사용자 지정 기준 장소 안내, 등산로 세부 코스별 탭 (스크립트가 켜질 때만 탭, 아니면 묶음 제목) */
.tour_list .tour_item dt .af-tour-dist { margin: 4px 0 6px; font-size: 14px; color: #1f5f3f; font-weight: 500; }
.af-tour-ref { margin: 4px 0 12px; padding: 8px 12px; border-left: 3px solid #1f5f3f; background: #f3f7f4; font-size: 14px; line-height: 1.5; color: #333; }
.af-tour-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.af-tour-tabs[hidden] { display: none; }
.af-tour-tabs [role="tab"] { min-height: 44px; padding: 8px 14px; border: 1px solid #c9d6cd; border-radius: 22px; background: #fff; color: #1f5f3f; font-size: 15px; font-weight: 700; cursor: pointer; }
.af-tour-tabs [role="tab"] span { margin-left: 4px; font-weight: 400; color: #4a544e; }
.af-tour-tabs [role="tab"][aria-selected="true"] { background: #1f5f3f; border-color: #1f5f3f; color: #fff; }
.af-tour-tabs [role="tab"][aria-selected="true"] span { color: #e6efe9; }
.af-tour-tabs [role="tab"]:focus-visible { outline: 2px solid #f29a1d; outline-offset: 2px; }
.af-tour--js .af-tour-panel .af-tour-sub { display: none; }
/* 포토갤러리 (2026-10-19 사용자 요청, 원본 CSS 그대로 두고 추가만)
   - 사진 틀 비율 고정: 첫 사진 비율(스크립트가 --af-gal-ratio 지정). 비율이 다른 사진은 틀 안에 비율 그대로(contain) → 높이 변화·아래 빈 띠·늦게 받는 사진의 21px 접힘 없음
   - 세로 밀기는 페이지 스크롤, 가로 밀기는 사진 넘기기 (slick swipe)
   - 모바일(768px 이하) 화살표 60px → 44px (사진을 덜 가림, 누르기 크기 44px 유지) */
.sub_con .detail .photoGal.af-gal-fixed .photoGal_slide li { aspect-ratio: var(--af-gal-ratio); justify-content: center; background: #f2f5f3; }
.sub_con .detail .photoGal.af-gal-fixed .photoGal_slide li img { width: 100%; height: 100%; object-fit: contain; }
.sub_con .detail .photoGal .photoGal_slide { touch-action: pan-y; }
@media (max-width: 768px) {
	.sub_con .detail .photoGal .photoGal_pre, .sub_con .detail .photoGal .photoGal_next { width: 44px; height: 44px; font-size: 18px; line-height: 44px; }
}
/* 사용자 화면 404·오류 페이지 (2026-10-20): 서브 페이지 틀(.sub_wrap .sub_tem) 안 본문 */
.af-notfound { padding: 60px 20px 70px; border-top: 2px solid #999; border-bottom: 1px solid #d7d7d7; text-align: center; }
.af-notfound__code { font-size: 15px; font-weight: 700; letter-spacing: .2em; color: #2f8a57; }
.af-notfound__tit { margin-top: 14px; font-size: 26px; font-weight: 700; color: #222; word-break: keep-all; }
.af-notfound__txt { margin-top: 14px; color: #555; word-break: keep-all; }
.af-notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.af-notfound__links .ui.button { display: inline-flex; align-items: center; height: 44px; margin: 0; padding: 0 18px; border: 1px solid #c9d6cd; border-radius: 22px; background: #fff; color: #1f5f3f; font-size: 15px; font-weight: 500; }
.af-notfound__links .ui.button:hover { background: #f3f7f4; }
.af-notfound__links .ui.button.af-notfound__main { border-color: #1f5f3f; background: #1f5f3f; color: #fff; }

/* 알림마당 게시판 (2026-10-20): 원본 CMS 게시판 클래스(#search_zone·#bbs_list·.photo_list·#bbs_view·.paginateContainer)에 없는 부분만 */
.af-blind { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#search_zone .search_block .af-bbs-field { float: left; width: 157px; height: 40px; margin-right: 3px; padding: 0 10px; border: 1px solid #ccc; background: #fff; font-size: 15px; }
.af-bbs-total { margin: 30px 0 12px; font-size: 15px; color: #555; }
.af-bbs-total strong { color: #1f5f3f; }
.af-bbs-total span { margin-left: 4px; color: #888; }
.af-bbs-reset { margin-left: 10px; color: #1f5f3f; text-decoration: underline; }
#bbs_list .ui.table td.af-bbs-none { padding: 60px 20px; color: #777; text-align: center; }
#bbs_list .ui.table tr.af-bbs-notice td { background: #f7faf8; }
.af-bbs-label { display: inline-block; padding: 0 8px; border-radius: 3px; background: #1f5f3f; color: #fff; font-size: 13px; line-height: 22px; }
.af-bbs-file { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid #c9d6cd; border-radius: 3px; color: #1f5f3f; font-size: 12px; line-height: 20px; vertical-align: middle; }
.af-bbs-empty { padding: 80px 20px; border-top: 2px solid #ccc; border-bottom: 1px solid #ccc; color: #777; text-align: center; }
.photo_list .b-img-box .af-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #f2f5f3; color: #888; font-size: 14px; }
#bbs_view .bbs_con .af-bbs-photo { margin: 0 0 20px; text-align: center; }
#bbs_view .bbs_con .af-bbs-photo img { max-width: 100%; height: auto; }
#bbs_view .bbs_con .af-bbs-text { line-height: 1.8; overflow-wrap: anywhere; }
.paginateContainer { text-align: center; }
/* 원본 게시판 단추는 Semantic UI(.ui.button) 모양에 기대지만 묶음 CSS 에 없어서 단추 모양만 보완 (원본 위치·크기 규칙은 그대로) */
#search_zone .search_block .ui.button { height: 40px; border: 0; background: #1f5f3f; color: #fff; cursor: pointer; }
#search_zone .search_block .ui.button:hover { background: #174a31; }
#bbs_view .bbs_btn .ui.button { display: inline-flex; align-items: center; height: 44px; padding: 0 26px; border: 1px solid #1f5f3f; background: #fff; color: #1f5f3f; font-size: 15px; }
#bbs_view .bbs_btn .ui.button:hover { background: #f3f7f4; }
@media (max-width: 768px) {
	.af-notfound { padding: 40px 10px 50px; }
	.af-notfound__tit { font-size: 21px; }
	#search_zone .search_block { width: auto; padding: 0 15px; display: flex; gap: 4px; }
	#search_zone .search_block .af-bbs-field { float: none; flex: 0 0 112px; width: 112px; margin: 0; padding: 0 6px; font-size: 14px; }
	#search_zone .search_block .k-textbox { float: none; flex: 1 1 auto; width: auto; min-width: 0; }
	#bbs_list .ui.table thead th:nth-child(4), #bbs_list .ui.celled.table tbody td:nth-child(4) { display: none; }
	#bbs_list .ui.table thead th, #bbs_list .ui.celled.table tr td { padding: 14px 8px; font-size: 15px; }
}