/* =========================================================
 * schoolmap(스쿨알리미) 스킨 스타일 (자체 변수 · 테마 비의존 · 모바일 우선)
 * travelmap 스킨에서 가져왔다. 여행 전용 규칙(맛집·관광·둘레길 이름표 색 등)이 일부 남아
 * 있지만 스쿨알리미에서는 쓰이지 않는다 — 지우다 다른 규칙을 건드리는 편이 더 위험해 그대로 둔다.
 * 모든 클래스 tm- 접두사로 테마 CSS와 충돌 방지
 * ========================================================= */
.tm-wrap{
  --tm-primary:#2f6df0; --tm-primary-dark:#2356c6;
  --tm-ink:#1f2937; --tm-sub:#6b7280; --tm-line:#e5e7eb; --tm-line2:#eef1f5;
  --tm-bg:#ffffff; --tm-soft:#f7f9fc; --tm-soft2:#eef3fb;
  --tm-radius:14px; --tm-radius-s:9px;
  --tm-badge:#eaf1ff; --tm-badge-ink:#2356c6;
  color:var(--tm-ink); font-size:15px; line-height:1.6;
  -webkit-text-size-adjust:100%;
}
.tm-wrap *{box-sizing:border-box;}
.tm-wrap a{color:inherit; text-decoration:none;}
.tm-wrap h1,.tm-wrap h2,.tm-wrap h3,.tm-wrap h4{margin:0; font-weight:700; line-height:1.35;}
.tm-wrap img{max-width:100%;}

/* ---------- 공통 버튼 ---------- */
.tm-btn{display:inline-flex; align-items:center; gap:6px; justify-content:center;
  padding:9px 14px; border-radius:var(--tm-radius-s); border:1px solid var(--tm-line);
  background:#fff; color:var(--tm-ink); font-size:14px; cursor:pointer; transition:.15s; white-space:nowrap;}
.tm-btn:hover{background:var(--tm-soft);}
.tm-btn.is-primary{background:var(--tm-primary); border-color:var(--tm-primary); color:#fff;}
.tm-btn.is-primary:hover{background:var(--tm-primary-dark);}
.tm-btn.is-danger{color:#d6453d; border-color:#f1c7c4;}
.tm-btn.is-sm{padding:6px 10px; font-size:13px;}

/* ---------- 배지 / 칩 ---------- */
.tm-badge{display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px;
  background:var(--tm-badge); color:var(--tm-badge-ink); font-size:12.5px; font-weight:600;}
.tm-badge.is-heritage{background:#fef3e2; color:#b6711a;}
.tm-badge.is-whs{background:#efe6fb; color:#7b2fbf; font-weight:700;}   /* 유네스코 세계유산 */
.tm-badge.is-theme{background:#e8f0ff; color:#2f6df0; font-weight:600;}   /* 문화재 테마 */
#tmWhsBtn.on{background:#7b2fbf; border-color:#7b2fbf; color:#fff;}
.tm-chip{display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px;
  background:var(--tm-soft2); color:#3a4a63; font-size:13px; margin:0 6px 6px 0;}

/* =========================================================
 * 목록 (list)
 * ========================================================= */
.tm-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin:0 0 14px;}
.tm-toolbar .tm-total{color:var(--tm-sub); font-size:14px;}
.tm-toolbar .tm-total b{color:var(--tm-ink);}
.tm-toolbar .tm-acts{display:flex; gap:8px; flex-wrap:wrap;}

.tm-filter{background:var(--tm-soft); border:1px solid var(--tm-line); border-radius:var(--tm-radius);
  padding:14px; margin:0 0 16px;}
.tm-filter form{display:block;}
.tm-f-bar{display:flex; gap:10px; align-items:center;}
.tm-filter .tm-f-search{flex:1; display:flex; gap:8px; min-width:0;}
.tm-filter .tm-f-search input{flex:1; min-width:0;}
.tm-f-toggle{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:1px solid var(--tm-line); border-radius:var(--tm-radius-s); background:#fff; color:var(--tm-ink); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap;}
.tm-f-toggle:hover{border-color:var(--tm-primary); color:var(--tm-primary);}
.tm-f-toggle.on{border-color:var(--tm-primary); color:var(--tm-primary); background:#f3f7ff;}
.tm-f-count{display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; background:var(--tm-primary); color:#fff; border-radius:9px; font-size:11.5px; padding:0 5px;}
.tm-f-caret{font-size:11px; color:var(--tm-sub); transition:transform .18s;}
.tm-f-toggle.on .tm-f-caret{transform:rotate(180deg); color:var(--tm-primary);}
.tm-f-panel{display:none; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--tm-line);}
.tm-f-panel.on{display:grid;}
.tm-field label{display:block; font-size:12px; color:var(--tm-sub); margin:0 0 4px;}
.tm-wrap select, .tm-wrap input[type=text], .tm-wrap input[type=tel], .tm-wrap input[type=date], .tm-wrap textarea{
  width:100%; padding:9px 10px; border:1px solid var(--tm-line); border-radius:var(--tm-radius-s);
  background:#fff; font-size:14px; color:var(--tm-ink); font-family:inherit;}
.tm-wrap select:focus, .tm-wrap input:focus, .tm-wrap textarea:focus{outline:none; border-color:var(--tm-primary); box-shadow:0 0 0 3px rgba(47,109,240,.12);}

.tm-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.tm-card{border:1px solid var(--tm-line); border-radius:var(--tm-radius); overflow:hidden; background:#fff;
  transition:.18s; display:flex; flex-direction:column;}
.tm-card:hover{box-shadow:0 8px 24px rgba(20,40,80,.10); transform:translateY(-2px);}
.tm-card .tm-thumb{position:relative; display:block; aspect-ratio:16/10; background:var(--tm-soft2); overflow:hidden;}
.tm-card .tm-thumb img{width:100%; height:100%; object-fit:cover;}
.tm-card .tm-thumb .tm-noimg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:46px; opacity:.55;}
.tm-card .tm-thumb .tm-cat{position:absolute; left:10px; top:10px;}
.tm-card .tm-body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:7px;}
.tm-card .tm-name{font-size:16.5px; font-weight:700;}
.tm-card .tm-loc{color:var(--tm-sub); font-size:13px;}
.tm-card .tm-tags{margin-top:2px;}
.tm-card .tm-meta{display:flex; gap:12px; color:var(--tm-sub); font-size:12.5px; margin-top:auto; padding-top:6px;}

.tm-empty{padding:50px 20px; text-align:center; color:var(--tm-sub); border:1px dashed var(--tm-line); border-radius:var(--tm-radius);}

/* 관리자 도구(내보내기/가져오기) */
.tm-admin{margin:16px 0 0; padding:14px; border:1px dashed #c9d6ea; border-radius:var(--tm-radius); background:#fbfdff;}
.tm-admin h4{font-size:13px; color:var(--tm-sub); margin-bottom:10px; font-weight:600;}
.tm-admin .tm-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.tm-admin form{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}

/* 페이지네이션 */
.tm-paging{display:flex; gap:6px; justify-content:center; margin:22px 0 6px; flex-wrap:wrap;}
.tm-paging a, .tm-paging span{min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 10px; border:1px solid var(--tm-line); border-radius:var(--tm-radius-s); font-size:14px; background:#fff;}
.tm-paging .is-cur{background:var(--tm-primary); border-color:var(--tm-primary); color:#fff; font-weight:700;}
.tm-paging a:hover{background:var(--tm-soft);}

/* =========================================================
 * 상세보기 (view)
 * ========================================================= */
.tm-view{border:1px solid var(--tm-line); border-radius:var(--tm-radius); overflow:hidden; background:#fff;}
.tm-view-head{padding:20px 22px; border-bottom:1px solid var(--tm-line2);}
.tm-view-head .tm-badges{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px;}
.tm-view-head h1{font-size:24px;}
.tm-view-head .tm-addr{color:var(--tm-sub); margin-top:7px; font-size:14.5px; display:flex; align-items:flex-start; gap:6px;}

.tm-view-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:0;}
.tm-view-grid .tm-col{padding:20px 22px;}
.tm-view-grid .tm-col.tm-side{border-left:1px solid var(--tm-line2); background:#fcfdff;}

.tm-sec{margin:0 0 22px;}
.tm-sec:last-child{margin-bottom:0;}
.tm-sec h3{font-size:15px; color:var(--tm-primary); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--tm-line2);}

/* 정보 표 */
.tm-info{display:grid; grid-template-columns:auto 1fr; gap:9px 14px; font-size:14.5px;}
.tm-info dt{color:var(--tm-sub); white-space:nowrap;}
.tm-info dd{margin:0; word-break:break-word;}
/* 전화번호 — 눌러서 걸 수 있다는 게 보여야 한다. 손가락으로 누를 수 있게 위아래 여백을 준다. */
a.tm-tel{color:var(--tm-primary); text-decoration:none; border-bottom:1px solid currentColor;
         padding:2px 0; white-space:nowrap;}
a.tm-tel:hover{opacity:.75;}

.tm-map{width:100%; height:300px; border-radius:var(--tm-radius-s); overflow:hidden; border:1px solid var(--tm-line); background:var(--tm-soft2);}
.tm-map-empty{display:flex; align-items:center; justify-content:center; height:300px; color:var(--tm-sub); background:var(--tm-soft); border-radius:var(--tm-radius-s); text-align:center;}

/* 길찾기 버튼 */
.tm-nav{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.tm-nav .tm-btn{flex:1; min-width:90px;}
.tm-nav .k{border-color:#fbe44d; background:#fee500; color:#3a1d1d;}
.tm-nav .n{border-color:#03c75a; background:#03c75a; color:#fff;}
.tm-nav .g{border-color:#dadce0;}

/* 첨부 / 갤러리 */
.tm-files{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.tm-files li{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--tm-line); border-radius:var(--tm-radius-s); font-size:14px;}
.tm-files .tm-fsize{color:var(--tm-sub); font-size:12px;}
/* 첨부파일 연도 탭 (2026 / 2025 / 2024 …) */
.tm-ytabs{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px;}
.tm-ytab{padding:4px 12px; border:1px solid var(--tm-line); background:#fff; color:var(--tm-sub);
  border-radius:999px; font-size:13px; cursor:pointer; font-family:inherit; white-space:nowrap;}
.tm-ytab:hover{border-color:var(--tm-primary); color:var(--tm-primary);}
.tm-ytab b{font-weight:600; opacity:.7;}
.tm-ytab.is-on{background:var(--tm-primary); border-color:var(--tm-primary); color:#fff;}
.tm-ytab.is-on b{opacity:.85;}
/* ⚠️ 이 한 줄이 없으면 탭이 아예 안 걸러진다.
   .tm-files li 에 display:flex 가 걸려 있어 브라우저 기본값 [hidden]{display:none} 을 이긴다. */
.tm-files li[hidden]{display:none;}
.tm-files li{flex-wrap:wrap;}            /* 항목명이 길면 다음 줄로 내려가게 */
.tm-ftopic{margin-left:auto; color:#a7aebb; font-size:11.5px;}
.tm-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px;}
.tm-gallery a img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--tm-radius-s); border:1px solid var(--tm-line);}
.tm-swiper{width:100%; border-radius:var(--tm-radius-s); overflow:hidden; border:1px solid var(--tm-line);}
.tm-swiper .swiper-slide{aspect-ratio:16/10; background:var(--tm-soft2);}
.tm-swiper .swiper-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.tm-swiper .swiper-button-prev, .tm-swiper .swiper-button-next{color:#fff; transform:scale(.7);}
.tm-swiper .swiper-pagination-bullet-active{background:#fff;}

.tm-content{font-size:15.5px; line-height:1.8; padding-top:6px; overflow-wrap:anywhere; word-break:break-word;}
.tm-addr span, .tm-loc{overflow-wrap:anywhere; min-width:0;}
.tm-content img{height:auto; border-radius:6px;}

.tm-view-foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:16px 22px; border-top:1px solid var(--tm-line2); background:var(--tm-soft);}
.tm-view-foot .tm-acts{display:flex; gap:8px; flex-wrap:wrap;}
.tm-nextprev{border-top:1px solid var(--tm-line2);}
.tm-nextprev a{display:flex; gap:10px; padding:13px 22px; border-bottom:1px solid var(--tm-line2); font-size:14px;}
.tm-nextprev a:hover{background:var(--tm-soft);}
.tm-nextprev .tm-np{color:var(--tm-sub); white-space:nowrap;}

/* =========================================================
 * 작성 폼 (write)
 * ========================================================= */
.tm-form .tm-group{border:1px solid var(--tm-line); border-radius:var(--tm-radius); padding:18px 18px 6px; margin:0 0 16px; background:#fff;}
.tm-form .tm-group > h3{font-size:15px; margin:0 0 16px; color:var(--tm-ink); display:flex; align-items:center; gap:7px;}
.tm-form .tm-group > h3 .num{display:inline-flex; width:22px; height:22px; border-radius:6px; background:var(--tm-primary); color:#fff; font-size:12.5px; align-items:center; justify-content:center;}
.tm-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.tm-grid.c3{grid-template-columns:1fr 1fr 1fr;}
.tm-item{margin:0 0 14px;}
.tm-item.full{grid-column:1 / -1;}
.tm-item > label{display:block; font-size:13.5px; font-weight:600; margin:0 0 6px;}
.tm-item .req{color:#e0483f;}
.tm-help{font-size:12px; color:var(--tm-sub); margin-top:5px;}
.tm-addr-row{display:flex; gap:8px;}
.tm-addr-row input{flex:1;}

/* 체크박스 그룹(다중선택) */
.tm-checks{display:flex; flex-wrap:wrap; gap:8px;}
.tm-checks label{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--tm-line);
  border-radius:999px; font-size:13.5px; cursor:pointer; user-select:none; background:#fff;}
.tm-checks input{display:none;}
.tm-checks input:checked + span{font-weight:700;}
.tm-checks label:has(input:checked){border-color:var(--tm-primary); background:var(--tm-soft2); color:var(--tm-primary-dark);}
.tm-radios{display:flex; gap:8px; flex-wrap:wrap;}
.tm-radios label{flex:1; min-width:80px; text-align:center; padding:9px; border:1px solid var(--tm-line); border-radius:var(--tm-radius-s); cursor:pointer;}
.tm-radios input{display:none;}
.tm-radios label:has(input:checked){border-color:var(--tm-primary); background:var(--tm-primary); color:#fff; font-weight:700;}

.tm-form .tm-submit{display:flex; gap:10px; justify-content:center; margin:22px 0 8px;}
.tm-form .tm-submit .tm-btn{min-width:130px; padding:12px 18px;}

/* =========================================================
 * 지도 모드 (map)
 * ========================================================= */
.tm-mapmode .tm-mapmode-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; flex-wrap:wrap;}
.tm-mapmode-acts{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.tm-map-fpanel{margin-top:0; margin-bottom:14px;}
.tm-mapmode #tmFullMap{width:100%; height:72vh; min-height:460px; border:1px solid var(--tm-line); border-radius:var(--tm-radius); overflow:hidden;}
/* 지도 정보 팝업 (CustomOverlay) — 고정 너비 + box-sizing 으로 내용이 박스를 벗어나지 않음 */
.tm-pop{position:relative; box-sizing:border-box; width:244px; transform:translateY(-50px); background:#fff; border:1px solid #cfd6e2; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.18); padding:13px 15px 12px; font-size:13px; line-height:1.5; color:#1f2937; text-align:left;}
.tm-pop:after{content:''; position:absolute; left:50%; bottom:-9px; margin-left:-9px; border:9px solid transparent; border-top-color:#fff;}
.tm-pop:before{content:''; position:absolute; left:50%; bottom:-11px; margin-left:-10px; border:10px solid transparent; border-top-color:#cfd6e2;}
.tm-pop-x{position:absolute; top:6px; right:8px; width:22px; height:22px; text-align:center; line-height:20px; font-size:18px; color:#9aa3b2; cursor:pointer; border-radius:50%;}
.tm-pop-x:hover{background:#f0f2f6; color:#5b6472;}
.tm-pop-name{display:block; font-weight:700; font-size:14.5px; line-height:1.35; margin:0 24px 7px 0; word-break:keep-all; overflow-wrap:anywhere;}
.tm-pop-cat{display:inline-block; font-size:11.5px; color:#5b6472; background:#eef1f6; padding:2px 8px; border-radius:10px;}
.tm-pop-acts{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px;}
.tm-pop-link{display:inline-block; padding:6px 11px; border-radius:8px; font-weight:600; font-size:12.5px; text-decoration:none; white-space:nowrap; background:#eef3ff; color:var(--tm-primary);}
.tm-pop-link.nav{background:#e9f8ef; color:#1a9b54;}
.tm-pop-link:hover{filter:brightness(.96);}
/* 한 위치에 여러 유산 — 목록 팝업 */
.tm-pop-list{margin:9px 0 0; padding:0; list-style:none; max-height:208px; overflow-y:auto;}
.tm-pop-list li{padding:7px 2px;}
.tm-pop-list li + li{border-top:1px solid #eef1f5;}
.tm-pop-list li a{color:#2356c6; font-weight:600; text-decoration:none; word-break:keep-all; overflow-wrap:anywhere;}
.tm-pop-list li a:hover{text-decoration:underline;}
.tm-pop-list li small{color:#8a93a3; font-weight:400; margin-left:4px;}
/* 마커 위 명칭 라벨 (지도모드, 확대 시) */
/* yAnchor:1(라벨 하단을 마커 위치에 고정) 후, 핀 높이(약 40px)만큼 위로 올려 핀이 가려지지 않게 함 */
.tm-mk-label{display:inline-block; padding:4px 9px; background:rgba(255,255,255,.95); border:1px solid #d0d7e2; border-radius:7px; font-size:11.5px; font-weight:700; color:#1f2937; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.2); pointer-events:auto; cursor:pointer; transition:.12s; transform:translateY(-44px);}
.tm-mk-label:hover{background:#fff; border-color:var(--tm-primary); color:var(--tm-primary); box-shadow:0 2px 7px rgba(47,109,240,.3);}
/* 내 위치 점(지도모드) */
/* 내 위치 — 점 + 바라보는 방향 부채꼴
   카카오 JS SDK에는 지도를 돌리는(방위각) API가 없어 지도는 늘 북쪽이 위다.
   그래서 지도를 돌리는 대신 '내가 보는 방향'만 부채꼴로 표시한다(2D 지도의 표준 방식).
   부채꼴은 나침반 권한을 얻은 뒤에만 .has-dir 로 나타난다. */
.tm-myloc-wrap{position:relative; width:0; height:0;}
.tm-myloc{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; background:#2f6df0; border:3px solid #fff; border-radius:50%;
  box-shadow:0 0 0 5px rgba(47,109,240,.25), 0 1px 5px rgba(0,0,0,.4);}
/* 회전 축이 곧 점의 중심이 되도록 크기 없는 요소를 돌리고, 부채꼴은 그 위쪽에 그린다 */
.tm-myloc-dir{position:absolute; left:50%; top:50%; width:0; height:0; display:none;
  transform:translate(-50%,-50%) rotate(0deg); transition:transform .12s linear;}
.tm-myloc-wrap.has-dir .tm-myloc-dir{display:block;}
.tm-myloc-dir::before{content:''; position:absolute; left:-15px; bottom:8px; width:0; height:0;
  border-left:15px solid transparent; border-right:15px solid transparent;
  border-bottom:30px solid rgba(47,109,240,.30);}
/* 내 위치 플로팅 버튼 (애플맵 스타일 화살표, 지도 우하단) */
.tm-map-box{position:relative;}
/* 지도모드 전체화면 */
.tm-map-box:fullscreen, .tm-map-box:-webkit-full-screen{width:100%; height:100%; background:#fff;}
.tm-map-box:fullscreen #tmFullMap, .tm-map-box:-webkit-full-screen #tmFullMap{height:100% !important; min-height:0 !important; border-radius:0;}
/* 지도 검색창 — .tm-search-row 안에서 static으로 배치됨 */
.tm-map-search{position:absolute; top:12px; left:12px; z-index:11; width:330px; max-width:calc(100% - 24px);}
.tm-search-row .tm-map-search{position:static; top:auto; left:auto; z-index:auto; width:280px; max-width:none;}
.tm-ms-bar{display:flex; align-items:center; gap:6px; background:#fff; border:1px solid #cfd6e2; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.15); padding:0 8px 0 12px; height:46px;}
.tm-ms-ico{font-size:15px; opacity:.7;}
.tm-ms-bar input{flex:1; min-width:0; border:none; outline:none; background:transparent; font-size:15px; color:var(--tm-ink); height:100%; padding:0; font-family:inherit;}
.tm-ms-x{flex:0 0 auto; width:26px; height:26px; border:none; background:#eef1f6; color:#69707c; border-radius:50%; font-size:17px; line-height:1; cursor:pointer;}
.tm-ms-x:hover{background:#e2e6ee;}
.tm-ms-results{display:none; margin-top:6px; background:#fff; border:1px solid #cfd6e2; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.16); max-height:60vh; overflow-y:auto;}
.tm-ms-results.on{display:block;}
.tm-ms-head{padding:9px 14px 4px; font-size:12px; font-weight:700; color:var(--tm-sub);}
.tm-ms-empty{padding:16px 14px; font-size:13px; color:var(--tm-sub); line-height:1.5;}
.tm-ms-item{padding:9px 14px; cursor:pointer; border-top:1px solid #f0f2f6;}
.tm-ms-item:first-child{border-top:none;}
.tm-ms-item:hover{background:#f5f8ff;}
.tm-ms-name{font-size:14.5px; font-weight:700; color:#1f2937; display:flex; justify-content:space-between; align-items:baseline; gap:8px; word-break:keep-all;}
.tm-ms-dist{flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--tm-primary);}
.tm-ms-addr{margin-top:2px; font-size:12.5px; color:#6b7280; word-break:keep-all;}
@media (max-width: 520px){
  .tm-map-search{width:auto; left:10px; right:64px; top:10px; max-width:none;}
}
.tm-geo-btn{position:absolute; right:14px; bottom:14px; z-index:10; width:46px; height:46px; padding:0; border-radius:50%; background:var(--tm-primary); border:none; box-shadow:0 2px 8px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; transition:.15s;}
.tm-geo-btn:hover{background:var(--tm-primary-dark);}
.tm-geo-btn:active{transform:scale(.94);}
.tm-geo-btn svg{width:24px; height:24px; fill:currentColor;}
/* 서버 viewport 클러스터 원 (지도모드) */
.tm-cluster{text-align:center; border-radius:50%; background:rgba(47,109,240,.88); color:#fff; font-weight:700; font-size:13px; border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.35); cursor:pointer;}
/* 🍽 맛집 오버레이 — 주황 별 핀은 카카오 이미지 마커로 표시(별도 CSS 불필요) */
#tmFoodBtn.on{background:#ff7a36; border-color:#ff7a36; color:#fff;}
/* 마커 명칭 라벨: 박스는 모두 동일(흰 박스), 글자색만 마커색으로 구분 */
.tm-mk-label.tm-herit-label{color:#2f6df0;}   /* 문화유산(파랑)   — 마커 #2f6df0 */
.tm-mk-label.tm-tour-label{color:#12a150;}    /* 관광(녹색)      — 마커 #12a150 */
.tm-mk-label.tm-food-label{color:#e0641c;}    /* 맛집(주황)      — 마커 #ff7a36, 흰 배경 가독성 위해 한 톤 진하게 */
.tm-mk-label.tm-way-label{color:#7b4bd6;}     /* 둘레길·산·캠핑(보라) — 마커 #7b4bd6 */
.tm-mk-label.tm-kakao-label{color:#8a6d12;}   /* 주변 장소(노랑 별) */
.tm-mk-label.tm-center-label{color:#2f6df0;}  /* 이 장소(파랑) */
/* 마커 ↔ 이름표 짝 강조 : 한쪽에 마우스를 올리면 반대쪽이 '흐려졌다 진해지기'를 반복한다.
   (겹침 정리로 이름표가 마커에서 떨어져 있어도 어느 마커의 것인지 바로 알 수 있게)
   마커 쪽은 map.skin.php 에서 setOpacity 로 같은 리듬을 준다. */
.tm-mk-label.is-hi{animation:tmHiFade .66s ease-in-out infinite alternate;}
@keyframes tmHiFade{from{opacity:.3}to{opacity:1}}
/* 메뉴 단색 라인 아이콘 — 버튼 글자색을 따르고 텍스트와 정렬 */
.tm-ico{vertical-align:-2px; margin-right:4px; flex:0 0 auto;}
/* 맛집 출처 드롭다운: 버튼과 같은 높이의 컴팩트 셀렉트(긴 옵션이 줄을 통째로 차지하지 않게 폭 제한) */
#tmFoodSrc, #tmFoodMenu{display:inline-block; width:auto; max-width:150px; padding:9px 12px; font-size:13.5px; font-weight:600;
  border:1px solid var(--tm-line); border-radius:var(--tm-radius-s); background:#fff; color:var(--tm-ink);
  cursor:pointer; vertical-align:middle; text-overflow:ellipsis;}

/* =========================================================
 * 반응형
 * ========================================================= */
@media (max-width: 860px){
  .tm-view-grid{grid-template-columns:1fr;}
  .tm-view-grid .tm-col.tm-side{border-left:none; border-top:1px solid var(--tm-line2);}
  .tm-f-panel{grid-template-columns:1fr 1fr;}
  .tm-grid, .tm-grid.c3{grid-template-columns:1fr;}
}
@media (max-width: 520px){
  .tm-wrap{font-size:14.5px;}
  .tm-f-bar{flex-wrap:wrap;}
  .tm-filter .tm-f-search{flex:1 1 100%;}
  .tm-f-toggle{flex:1 1 100%; justify-content:center;}
  .tm-f-panel{grid-template-columns:1fr 1fr;}
  .tm-view-head h1{font-size:20px;}
  .tm-cards{grid-template-columns:1fr 1fr;}
  .tm-card .tm-name{font-size:15px;}
  .tm-btn{min-height:42px;} /* 터치 영역 */
}

/* =========================================================
 * 국가유산청 API 보강 (문화해설 · 사진 · 동영상)
 * ========================================================= */
.tm-hdesc{font-size:15.5px; line-height:1.85; color:#2b3340; white-space:normal;}
.tm-hdesc p{margin:0 0 .7em; text-indent:1em;}   /* 문단 첫 글자 들여쓰기 */
.tm-hdesc p:last-child{margin-bottom:0;}
.tm-source{margin:14px 0 0; font-size:12.5px; color:#9aa3b2;}
/* 더 알아보기 (한국민족문화대백과) */
.tm-encyk-link{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; background:#f3f7ff; border:1px solid #cdddff; border-radius:10px; font-size:14px; font-weight:600; color:var(--tm-primary); text-decoration:none;}
.tm-encyk-link:hover{background:#e7f0ff; border-color:var(--tm-primary);}
/* 화면에는 안 보이고 검색엔진·스크린리더만 읽는 페이지 제목.
   목록·지도 스킨에는 제목 요소가 아예 없었고, 테마 머리말의 로고 h1 을 div 로 바꾼 뒤
   그 두 페이지의 H1 이 0개가 됐다(네이버·구글 모두 페이지당 h1 하나를 권한다).
   지도는 컨트롤을 전부 지도 안에 넣은 설계라 보이는 제목을 붙이면 그 결정을 되돌리게 되므로
   숨김 제목으로 둔다. 스크린리더 사용자에게는 없던 제목이 생기는 것이라 접근성에도 이롭다. */
.tm-sr-title{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* 사진 갤러리
   원본을 원본 크기로 받아 오면서도(상세보기는 w= 없이 호출) 화면에서는 130px로 잘려 작아 보였다.
   칸과 높이를 키운다 — 원본을 이미 받고 있으므로 화질 손해 없이 크게만 보인다.
   높이는 4:3에 가깝게 잡아 위아래 잘림(object-fit:cover)을 줄였다. */
.tm-api-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.tm-api-gallery figure{margin:0; border:1px solid var(--tm-line2); border-radius:10px; overflow:hidden; background:#f6f8fb;}
.tm-api-gallery img{display:block; width:100%; height:185px; object-fit:cover; cursor:zoom-in; transition:.15s;}
.tm-api-gallery img:hover{opacity:.9;}
.tm-api-gallery figcaption{padding:7px 9px; font-size:12px; color:#5b6472; line-height:1.4; border-top:1px solid var(--tm-line2); background:#fff;}
/* 동영상 */
.tm-video-box{margin-bottom:18px;}
.tm-video-label{display:inline-block; margin:0 0 6px; padding:3px 10px; background:var(--tm-soft); border:1px solid var(--tm-line2); border-radius:6px; font-size:12.5px; font-weight:700; color:var(--tm-ink);}
.tm-video{width:100%; max-width:100%; border-radius:10px; background:#000; display:block;}
.tm-audio{width:100%; max-width:520px; margin-top:6px; display:block;}
.tm-audio-langs{display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap;}
.tm-lang-btn{padding:5px 12px; border:1px solid var(--tm-line); border-radius:16px; background:#fff; font-size:13px; cursor:pointer; color:var(--tm-ink); font-family:inherit;}
.tm-lang-btn.on{background:var(--tm-primary); border-color:var(--tm-primary); color:#fff;}
/* 지도 / 로드뷰 전환 탭 */
.tm-rv-tabs{display:flex; gap:6px; margin-bottom:8px;}
.tm-rv-tab{flex:1; padding:8px 6px; border:1px solid var(--tm-line); background:#fff; border-radius:8px; font-size:13px; font-weight:700; color:var(--tm-sub); cursor:pointer; font-family:inherit;}
.tm-rv-tab.is-on{background:var(--tm-primary); color:#fff; border-color:var(--tm-primary);}
/* 지도/로드뷰 전체화면 */
.tm-map-wrap{position:relative;}
.tm-fs-btn-tab{flex:0 0 auto; padding:8px 12px; border:1px solid var(--tm-line); background:#fff; border-radius:8px; font-size:13px; font-weight:700; color:var(--tm-sub); cursor:pointer; font-family:inherit; white-space:nowrap;}
.tm-fs-btn-tab:hover{border-color:var(--tm-primary); color:var(--tm-primary);}
.tm-map-wrap:fullscreen, .tm-map-wrap:-webkit-full-screen{display:flex; flex-direction:column; gap:8px; background:#fff; padding:12px;}
.tm-map-wrap:fullscreen .tm-map, .tm-map-wrap:-webkit-full-screen .tm-map{height:auto !important; flex:1 1 auto;}
.tm-map-wrap:fullscreen .tm-rv-tabs, .tm-map-wrap:-webkit-full-screen .tm-rv-tabs{flex:0 0 auto; margin-bottom:0;}
.tm-map-wrap:fullscreen .tm-map-toolbar{flex:0 0 auto; margin-bottom:0;}
.tm-map-wrap:-webkit-full-screen .tm-map-toolbar{flex:0 0 auto; margin-bottom:0;}
/* 공유 버튼 */
.tm-share{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.tm-share-btn{display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border:1px solid var(--tm-line); background:#fff; border-radius:20px; font-size:13px; font-weight:600; color:var(--tm-ink); cursor:pointer; font-family:inherit; transition:.12s;}
.tm-share-btn:hover{border-color:var(--tm-primary); color:var(--tm-primary);}
.tm-share-btn.k{background:#fee500; border-color:#fee500; color:#3c1e1e;}
.tm-share-btn.k:hover{filter:brightness(.96); color:#3c1e1e;}
.tm-share-btn.tm-course-btn.on{background:#e9f8ef; border-color:#1a9b54; color:#1a9b54;}

/* =========================================================
 * 답사 코스 / 즐겨찾기 (플로팅 위젯 + 담기 버튼 + 번호 마커)
 * ========================================================= */
.tm-course-fab{position:fixed; right:18px; bottom:18px; z-index:900; border:1px solid #cfd6e2; border-radius:24px; padding:11px 18px; background:#fff; color:#111; font-size:14px; font-weight:700; box-shadow:0 3px 12px rgba(0,0,0,.28); cursor:pointer; font-family:inherit;}
.tm-course-fab b{margin-left:3px; color:var(--tm-primary);}
.tm-course-fab:hover{border-color:var(--tm-primary);}
/* 지도모드: 지도 박스 안에서 절대배치 → '내 위치' 화살표 왼쪽 + 전체화면에서도 보임 */
.tm-course-fab.tm-on-map{position:absolute; right:68px; bottom:14px; z-index:11;}
.tm-course-panel{position:fixed; right:18px; bottom:66px; z-index:901; width:300px; max-width:calc(100vw - 36px); max-height:70vh; overflow:auto; display:none; background:#fff; border:1px solid #cfd6e2; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.22); padding:14px;}
.tm-course-panel.on{display:block;}
.tm-course-panel.tm-on-map{position:absolute; right:14px; bottom:68px; z-index:12;}
.tm-cp-head{font-size:15px; font-weight:800; margin-bottom:10px;}
.tm-cp-head span{color:var(--tm-primary);}
.tm-cp-empty{color:var(--tm-sub); font-size:13px; line-height:1.6; padding:12px 2px;}
.tm-cp-list{list-style:none; margin:0 0 12px; padding:0; counter-reset:cp;}
.tm-cp-list li{display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid #eef1f5;}
.tm-cp-list li:first-child{border-top:none;}
.tm-cp-list li::before{counter-increment:cp; content:counter(cp); flex:0 0 auto; width:20px; height:20px; background:var(--tm-primary); color:#fff; border-radius:50%; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.tm-cp-list li a{flex:1; color:#1f2937; text-decoration:none; font-size:13.5px; word-break:keep-all;}
.tm-cp-list li a:hover{color:var(--tm-primary);}
.tm-cp-del{flex:0 0 auto; border:none; background:#f0f2f6; color:#69707c; width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:13px;}
.tm-cp-del:hover{background:#e2e6ee;}
.tm-cp-acts{display:flex; flex-direction:column; gap:7px;}
.tm-cp-acts .tm-btn{width:100%; box-sizing:border-box; text-align:center;}
/* 목록 카드 담기 버튼 */
.tm-card-course{margin-left:auto; border:1px solid var(--tm-line); background:#fff; color:var(--tm-sub); border-radius:14px; padding:3px 10px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap;}
.tm-card-course:hover{border-color:var(--tm-primary); color:var(--tm-primary);}
.tm-card-course.on{background:#e9f8ef; border-color:#1a9b54; color:#1a9b54;}
/* 지도 코스 번호 마커 */
.tm-course-pin{width:28px; height:28px; background:#f5821f; color:#fff; border:2px solid #fff; border-radius:50%; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.4); cursor:pointer;}
/* 코스 구간표 — 두 학교 사이 길 한가운데에 뜬다 */
.tm-leg{background:#fff; border:1px solid #ffc2b3; border-radius:12px; padding:2px 8px;
  font-size:11.5px; color:#374151; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.18); pointer-events:none;}
.tm-leg b{color:#e0481f; font-weight:800; margin-right:2px;}
.tm-leg.is-straight{border-style:dashed; color:#6b7280;}
.tm-legs-off .tm-leg{display:none;}
/* 코스 요약 — 지도 왼쪽 위, 검색창 바로 아래.
   ⚠️ 왼쪽 아래에 두면 테마의 빨간 메뉴 단추(☰, 화면에 고정)에 가리고,
      오른쪽 아래는 「내 코스」 단추 자리라 겹친다. */
.tm-course-sum{position:absolute; left:12px; top:64px; z-index:12; max-width:calc(100% - 90px);
  background:rgba(255,255,255,.96); border:1px solid #ffc2b3; border-radius:10px; padding:8px 12px;
  box-shadow:0 3px 12px rgba(0,0,0,.18); font-size:13px; line-height:1.5;}
.tm-course-sum[hidden]{display:none;}
.tm-cs-h{font-weight:800; color:#e0481f;}
.tm-cs-t{display:flex; flex-wrap:wrap; gap:2px 12px;}
.tm-cs-t b{color:#111;}
.tm-course-sum small{display:block; color:#9ca3af; font-size:11px;}
.tm-course-sum{min-width:230px;}
.tm-leg.is-walk{border-color:#9bd8b0;}
.tm-leg.is-walk b{color:#15803d;}
/* 🚗 차량 / 🚶 도보 전환 */
.tm-cs-mode{display:flex; gap:4px; margin:0 0 6px;}
.tm-cs-mode button{flex:1; padding:3px 10px; border:1px solid #e5e7eb; background:#fff; border-radius:999px;
  font-size:12.5px; cursor:pointer; font-family:inherit; color:#4b5563;}
.tm-cs-mode button.on{background:#ff5a36; border-color:#ff5a36; color:#fff; font-weight:700;}
.tm-cs-mode button[data-mode="walk"].on{background:#16a34a; border-color:#16a34a;}
.tm-cs-act{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; margin-top:3px; font-size:12.5px;}
.tm-cs-act button{padding:0; border:0; background:none; color:var(--tm-primary); font-weight:700;
  cursor:pointer; font-family:inherit; font-size:12.5px;}
.tm-cs-act a{color:var(--tm-primary);}
/* 회전 안내 목록 — 지도 높이를 넘지 않게 제 안에서 굴린다 */
.tm-cs-steps{margin-top:8px; border-top:1px solid #f1f1f1; max-height:min(320px, calc(72vh - 230px));
  min-height:120px; overflow:auto; padding-right:4px; width:300px; max-width:100%;}
.tm-st-leg{margin:8px 0 2px; font-size:12.5px; font-weight:700; color:#111;}
.tm-st-leg b{color:#e0481f; margin-right:4px;}
.tm-st-leg span{font-weight:400; color:#6b7280; margin-left:6px;}
.tm-st-leg a{color:var(--tm-primary); font-weight:700; margin-left:6px;}
.tm-cs-steps ol{margin:0; padding:0 0 0 20px; font-size:12px; color:#374151;}
.tm-cs-steps li{padding:3px 2px; border-bottom:1px dashed #f0f0f0; cursor:pointer;}
.tm-cs-steps li:hover{background:#fff4ef;}
.tm-cs-steps li.on{background:#ffe6dc; font-weight:700;}
.tm-cs-steps li.is-end{list-style:none; margin-left:-20px; color:#e0481f; font-weight:700;}
.tm-st-none{font-size:12px; color:#9ca3af; padding:2px 0 4px;}
.tm-step-dot{width:16px; height:16px; border-radius:50%; background:#fff; border:4px solid #2f6df0;
  box-shadow:0 0 0 4px rgba(47,109,240,.25);}
@media(max-width:520px){ .tm-course-sum{max-width:calc(100% - 70px); font-size:12px; padding:6px 10px;} }
/* 라이트박스 */
.tm-lb{position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; flex-direction:column; background:rgba(0,0,0,.88); padding:30px; cursor:zoom-out;}
.tm-lb.on{display:flex;}
.tm-lb img{max-width:94vw; max-height:82vh; object-fit:contain; border-radius:6px; box-shadow:0 8px 40px rgba(0,0,0,.5);}
.tm-lb-cap{color:#eaeef5; margin-top:14px; font-size:14px; text-align:center; max-width:90vw;}
.tm-lb-x{position:absolute; top:18px; right:26px; color:#fff; font-size:38px; line-height:1; cursor:pointer; opacity:.85;}
.tm-lb-x:hover{opacity:1;}
/* 라이트박스 좌우 이동 버튼 */
.tm-lb-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:76px; border:none; border-radius:10px; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.tm-lb-nav:hover{background:rgba(255,255,255,.3);}
.tm-lb-nav.prev{left:14px;}
.tm-lb-nav.next{right:14px;}
@media(max-width:600px){ .tm-lb-nav{width:38px; height:62px; font-size:22px;} .tm-lb-nav.prev{left:6px;} .tm-lb-nav.next{right:6px;} }
/* QR 코드 모달 */
.tm-qr-modal{position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); padding:20px;}
.tm-qr-modal.on{display:flex;}
.tm-qr-card{position:relative; background:#fff; border-radius:16px; padding:22px 24px 20px; width:300px; max-width:100%; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.3);}
.tm-qr-card h3{margin:0 0 14px; font-size:16px;}
.tm-qr-x{position:absolute; top:10px; right:12px; border:none; background:none; font-size:24px; line-height:1; color:#9aa3b2; cursor:pointer;}
.tm-qr-box{display:flex; justify-content:center; padding:6px; background:#fff;}
.tm-qr-box img, .tm-qr-box canvas{display:block;}
.tm-qr-name{margin:12px 0 4px; font-size:15px; font-weight:700; color:#1f2937; word-break:keep-all;}
.tm-qr-acts{display:flex; gap:8px; justify-content:center; margin-top:12px;}
.tm-qr-acts .tm-btn{padding:8px 14px; font-size:13px;}
.tm-qr-hint{margin:12px 0 0; font-size:12px; color:#9aa3b2;}
@media (max-width: 520px){
  /* 좁은 화면은 2칸 유지(1칸이면 스크롤이 너무 길어진다) — 대신 높이를 키워 크게 보이게 */
  .tm-api-gallery{grid-template-columns:1fr 1fr; gap:8px;}
  .tm-api-gallery img{height:150px;}
}

/* =========================================================
 * 별점 (회원 평가) — 상세보기 위젯 + 지도 팝업 표시
 * ========================================================= */
.tm-rate{display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; padding:13px 16px; margin:2px 0 6px; background:var(--tm-soft); border:1px solid var(--tm-line); border-radius:var(--tm-radius);}
.tm-rate-score{display:flex; align-items:baseline; gap:6px;}
.tm-rate-avg{font-size:18px; font-weight:800; color:#1f2937;}
.tm-rate-cnt{font-size:13px; color:var(--tm-sub);}
.tm-rate-input{display:flex; align-items:center; gap:10px;}
.tm-rate-stars{display:inline-flex; font-size:26px; line-height:1; cursor:pointer; user-select:none;}
.tm-rate-stars .tm-star{color:#d9dee7; transition:.1s; padding:0 1px;}
.tm-rate-stars .tm-star.on{color:#f5a623;}
.tm-rate-msg, .tm-rate-login{font-size:13px; color:var(--tm-sub);}
/* 지도 팝업 안의 별점 */
.tm-pop-rate{display:inline-block; margin-left:6px; font-size:12.5px; font-weight:700; color:#b9791f; white-space:nowrap;}
.tm-pop-course{display:inline-block; padding:6px 11px; border:1px solid #1a9b54; background:#fff; color:#1a9b54; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap;}
.tm-pop-course.on{background:#e9f8ef;}
.tm-pop-list .tm-pop-course{padding:2px 8px; font-size:11px; margin-left:4px;}
.tm-pop-rate small{color:#b9a07a; font-weight:400;}

/* =========================================================
 * 본문 마크다운 여백  (2026-08-01 추가)
 *
 * 왜 필요한가
 *   위쪽 16행에서 테마 UI 를 위해 `.tm-wrap h1~h4 { margin:0 }` 로 눌러 두었다.
 *   그래서 본문에 쓴 마크다운 제목이 앞 문단에 딱 붙어, 주제가 여러 개인 공지는
 *   어디서 끊기는지 읽히지 않았다. 문단(p) 여백도 없어 줄글이 한 덩어리로 보였다.
 *   → 글쓴이가 <br> 을 넣어 억지로 띄우지 않아도 되게, 본문 안에서만 여백을 되살린다.
 *
 * 범위
 *   .tm-content 중 .tm-hdesc(해설 블록)는 306~307행에 자기 규칙이 있으므로 제외한다.
 *   :not() 으로 빼서 그쪽 들여쓰기·여백을 건드리지 않는다.
 *   색은 전부 테마 변수를 쓴다 — 다크모드에서 흰 배경이 튀지 않게.
 * ========================================================= */
.tm-content:not(.tm-hdesc) > :first-child{margin-top:0;}
.tm-content:not(.tm-hdesc) p{margin:0 0 1.05em;}
.tm-content:not(.tm-hdesc) p:last-child{margin-bottom:0;}

.tm-content:not(.tm-hdesc) h1,
.tm-content:not(.tm-hdesc) h2{margin:2.2em 0 .75em; font-size:19px; line-height:1.4;
  padding-bottom:.4em; border-bottom:1px solid var(--tm-line2);}
.tm-content:not(.tm-hdesc) h3{margin:1.7em 0 .55em; font-size:16.5px; line-height:1.45;}
.tm-content:not(.tm-hdesc) h4{margin:1.4em 0 .45em; font-size:15px;}

.tm-content:not(.tm-hdesc) ul,
.tm-content:not(.tm-hdesc) ol{margin:0 0 1.05em; padding-left:1.5em;}
.tm-content:not(.tm-hdesc) li{margin:.28em 0;}
.tm-content:not(.tm-hdesc) li > ul,
.tm-content:not(.tm-hdesc) li > ol{margin:.28em 0 0;}

.tm-content:not(.tm-hdesc) hr{margin:2.2em 0; border:0; border-top:1px solid var(--tm-line);}

.tm-content:not(.tm-hdesc) blockquote{margin:1.3em 0; padding:.7em 1em;
  border-left:3px solid var(--tm-primary); background:var(--tm-soft);
  border-radius:0 var(--tm-radius-s) var(--tm-radius-s) 0; color:var(--tm-ink);}
.tm-content:not(.tm-hdesc) blockquote p:last-child{margin-bottom:0;}

/* 표 — 좁은 화면에서 페이지가 밀리지 않게 표 안에서만 가로로 넘긴다 */
.tm-content:not(.tm-hdesc) table{display:block; overflow-x:auto; max-width:100%;
  margin:1.2em 0; border-collapse:collapse; font-size:14.5px;}
.tm-content:not(.tm-hdesc) th,
.tm-content:not(.tm-hdesc) td{border:1px solid var(--tm-line2); padding:7px 10px;}
.tm-content:not(.tm-hdesc) th{background:var(--tm-soft); font-weight:700; white-space:nowrap;}

.tm-content:not(.tm-hdesc) pre{margin:1.2em 0; padding:.8em 1em; overflow-x:auto;
  background:var(--tm-soft); border-radius:var(--tm-radius-s); font-size:13px; line-height:1.6;}
.tm-content:not(.tm-hdesc) img{margin:.6em 0;}

/* ═══════════════════════════════════════════════════════════════════
   급식 식단 달력 (view.skin.php · meal.php)
   ─ 칸이 좁으므로 메뉴는 작은 글씨로 줄여 보이고, 자세한 것(원산지·영양)은
     날짜를 누르면 아래 상자에 펼친다.
   ═══════════════════════════════════════════════════════════════════ */
.tm-meal-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.tm-meal-ym{font-size:15px; font-weight:700; color:var(--tm-ink);}
.tm-meal-nav{display:flex; gap:6px;}
.tm-meal-nav button{width:34px; height:32px; border:1px solid var(--tm-line); background:#fff; border-radius:8px;
    font-size:14px; color:var(--tm-sub); cursor:pointer; font-family:inherit;}
.tm-meal-nav button:hover:not(:disabled){border-color:var(--tm-primary); color:var(--tm-primary);}
.tm-meal-nav button:disabled{opacity:.4; cursor:default;}

.tm-cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.tm-cal-dow{text-align:center; font-size:12px; font-weight:700; color:var(--tm-sub); padding:4px 0;}
.tm-cal-dow.sun{color:#d0453c;} .tm-cal-dow.sat{color:#2f6df0;}
.tm-cal-cell{min-height:76px; border:1px solid var(--tm-line2); border-radius:8px; padding:5px 6px;
    background:#fff; font-size:11px; line-height:1.35; overflow:hidden;}
.tm-cal-cell.empty{border:none; background:transparent;}
.tm-cal-cell.has{cursor:pointer; border-color:#cfe0ff; background:#f8fbff;}
.tm-cal-cell.has:hover{border-color:var(--tm-primary); box-shadow:0 1px 6px rgba(47,109,240,.18);}
.tm-cal-cell.on{border-color:var(--tm-primary); background:#eef3ff; box-shadow:0 0 0 1px var(--tm-primary) inset;}
.tm-cal-d{font-weight:700; font-size:12px; color:var(--tm-ink); margin-bottom:3px;}
.tm-cal-cell.sun .tm-cal-d{color:#d0453c;} .tm-cal-cell.sat .tm-cal-d{color:#2f6df0;}
/* 쉬는 날(휴업일·공휴일·재량휴업일)은 날짜도 일요일처럼 빨갛게.
   ⚠️ 자리가 중요하다 — 토요일 규칙보다 뒤에 와야 토요휴업일이 파랑을 이기고,
      오늘 규칙보다 앞에 와야 오늘 표시(흰 글씨)가 그대로 남는다. */
.tm-cal-cell.off .tm-cal-d{color:#d0453c;}
.tm-cal-cell.today .tm-cal-d{background:var(--tm-primary); color:#fff; border-radius:5px; padding:0 5px; display:inline-block;}
.tm-cal-m{color:#4b5563; word-break:keep-all;}
.tm-cal-more{color:#8a93a3;}

/* 학사일정 — 급식과 같은 달력 한 판에 얹는다.
   달력을 둘로 나누면 세로가 두 배가 되고 달 이동 단추도 둘이 된다.
   한 판에 두면 '이 학교 이 달에 뭐 했나'가 한눈에 들어온다.
   일정은 날짜 바로 밑(급식보다 위)에 둔다 — 그 날의 성격을 먼저 알려 주는 것이 순서다. */
.tm-cal-e{margin:0 0 3px; display:flex; flex-direction:column; gap:2px;}
.tm-cal-ev{display:block; border-radius:4px; padding:1px 4px; font-size:10.5px; font-weight:700;
    line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background:#eef3ff; color:#2f6df0;}
.tm-cal-ev.off{background:#fdeeec; color:#d0453c;}      /* 휴업일 */
.tm-cal-cell.off{background:#fffafa; border-color:#f2dedb;}
.tm-cal-cell.off.has{background:#fdf6f5;}
.tm-cal-cell.on{border-color:var(--tm-primary); background:#eef3ff; box-shadow:0 0 0 1px var(--tm-primary) inset;}

.tm-sch-blk{margin-bottom:12px;}
.tm-sch-blk b{display:inline-block; font-size:12.5px; background:#fff; border:1px solid var(--tm-line2);
    border-radius:6px; padding:2px 9px; margin-bottom:6px;}
.tm-sch-blk b.off{border-color:#f0cfcb; color:#d0453c;}
.tm-sch-blk ul{margin:0; padding-left:1.15em; font-size:13.5px; line-height:1.6;}
.tm-sch-g{color:var(--tm-sub); font-weight:400;}

.tm-meal-detail{margin-top:12px; border:1px solid var(--tm-line); border-radius:10px; padding:14px 16px; background:var(--tm-soft);}
.tm-meal-detail h4{margin:0 0 8px; font-size:14.5px; color:var(--tm-primary);}
.tm-meal-blk{margin-bottom:12px;}
.tm-meal-blk:last-child{margin-bottom:0;}
.tm-meal-blk b{display:inline-block; font-size:12.5px; background:#fff; border:1px solid var(--tm-line2);
    border-radius:6px; padding:2px 9px; margin-bottom:6px;}
.tm-meal-blk ul{margin:0; padding-left:1.15em; font-size:13.5px; line-height:1.6;}
.tm-meal-sub{margin-top:6px; font-size:12.5px; color:var(--tm-sub); line-height:1.6; word-break:keep-all;}
.tm-meal-empty{padding:18px 14px; text-align:center; color:var(--tm-sub); font-size:13.5px;}

/* 날씨 칸 — 오른쪽 위, 지도 바로 앞. 한눈에 읽히게 줄을 짧게 끊는다. */
.tm-sec-src{font-weight:400; color:var(--tm-sub); font-size:12px;}
.tm-wx{font-size:14px; line-height:1.9;}
.tm-wx-now b{font-size:20px;}
.tm-wx-now em{font-style:normal; color:#1b6ca8; font-weight:700;}
.tm-wx-sub{color:var(--tm-sub); font-size:13px;}
/* 특보는 눈에 걸리게 — 폭염·한파·대설이면 학교 운영이 바뀐다 */
.tm-wx-wrn{margin-bottom:6px; padding:7px 10px; background:#fdecea; border-radius:8px;
    font-size:13px; color:#c0392b; font-weight:700; line-height:1.6;}
.tm-wx-wrn span{font-weight:400; font-size:12px;}

/* 대기질 — 등급을 색 딱지로 앞세운다. 숫자만으로는 좋은지 나쁜지 아무도 모른다. */
.tm-air-top{display:flex; align-items:center; gap:8px; margin-bottom:2px;}
.tm-air-g{display:inline-block; padding:2px 10px; border-radius:99px; font-size:13px; font-weight:700; color:#fff;}
.tm-air-k{font-size:12.5px; color:var(--tm-sub);}
.tm-air-pm{font-size:13.5px;}
.tm-air-pm b{font-size:15px;}
.g1{background:#2f6df0;} .g2{background:#1e7a45;} .g3{background:#c47a1e;} .g4{background:#c02b2b;}
.g1-t{color:#2f6df0; font-size:12px;} .g2-t{color:#1e7a45; font-size:12px;}
.g3-t{color:#c47a1e; font-size:12px;} .g4-t{color:#c02b2b; font-size:12px; font-weight:700;}

@media(max-width:520px){
  .tm-cal-cell{min-height:60px; padding:4px; font-size:10px;}
  .tm-cal-m{display:none;}          /* 좁은 화면에선 급식 글자는 감춘다 — 누르면 아래에 펼쳐진다 */
  .tm-cal-ev{font-size:9px; padding:0 2px;}   /* 일정은 남긴다 — 휴업일인지가 한눈에 보여야 한다 */
  .tm-cal-cell.has:after{content:'🍚'; font-size:12px;}
}

/* ═══════════════════════════════════════════════════════════════════
   학교 공시자료(계획서) — view.skin.php · plan.php
   ═══════════════════════════════════════════════════════════════════ */
.tm-plan-tabs{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px;}
.tm-plan-tab{padding:6px 11px; border:1px solid var(--tm-line); background:#fff; border-radius:16px;
    font-size:12.5px; color:var(--tm-sub); cursor:pointer; font-family:inherit; white-space:nowrap;}
.tm-plan-tab:hover{border-color:var(--tm-primary); color:var(--tm-primary);}
.tm-plan-tab.on{background:var(--tm-primary); border-color:var(--tm-primary); color:#fff; font-weight:700;}
.tm-plan-years{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px;}
.tm-plan-year{padding:4px 10px; border:1px solid var(--tm-line2); background:var(--tm-soft); border-radius:7px;
    font-size:12px; color:var(--tm-sub); cursor:pointer; font-family:inherit;}
.tm-plan-year:hover{border-color:var(--tm-primary); color:var(--tm-primary);}
.tm-plan-year.on{background:#eef3ff; border-color:var(--tm-primary); color:var(--tm-primary); font-weight:700;}

.tm-plan-files{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px;}
.tm-plan-files li{display:flex; align-items:center; gap:9px; padding:10px 12px;
    border:1px solid var(--tm-line); border-radius:var(--tm-radius-s); background:#fff; font-size:14px;}
.tm-plan-ico{flex:0 0 auto; font-size:16px;}
.tm-plan-nm{flex:1 1 auto; min-width:0; word-break:keep-all; overflow-wrap:anywhere; line-height:1.45;}
.tm-plan-nm small{color:var(--tm-sub); font-size:12px; white-space:nowrap;}
.tm-plan-btn{flex:0 0 auto; padding:7px 12px; border:1px solid var(--tm-primary); background:#fff;
    color:var(--tm-primary); border-radius:8px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap;}
.tm-plan-btn:hover:not(:disabled){background:#eef3ff;}
.tm-plan-btn:disabled{opacity:.55; cursor:default;}
.tm-plan-btn.on{background:var(--tm-primary); color:#fff;}
.tm-plan-need{flex:0 0 auto; font-size:12px; color:var(--tm-sub);}

@media(max-width:520px){
  .tm-plan-files li{flex-wrap:wrap;}
  .tm-plan-btn{width:100%; margin-top:4px;}
}

/* 비교함에 담긴 상태 — 상세보기 공유 줄의 「⚖ 비교에 담기」 */
.tm-share-btn.on{background:#eef3ff; border-color:var(--tm-primary); color:var(--tm-primary); font-weight:700;}

/* ── 주변 학교 (상세보기) ──────────────────────────────────────────────
   반경을 5·10·20km 세 단으로 나눠 본다. 단추는 제목 오른쪽에 붙여
   「무엇을 보고 있는지」가 제목과 한눈에 같이 들어오게 한다. */
.tm-near-rad{float:right;display:inline-flex;gap:4px;}
.tm-near-rad button{padding:2px 9px;border:1px solid var(--tm-line2);background:#fff;color:var(--tm-sub);
    border-radius:99px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.6;}
.tm-near-rad button:hover{border-color:var(--tm-primary);color:var(--tm-primary);}
.tm-near-rad button.on{background:var(--tm-primary);border-color:var(--tm-primary);color:#fff;}
.tm-near-sum{font-size:12.5px;color:var(--tm-sub);margin:2px 0 6px;}
.tm-near-sum b{color:var(--tm-ink);}
.tm-near-cap{color:#c47a1e;}
/* 주변 학교 목록의 단 머리 — 5km 안 / 5~10km / 10~20km */
.tm-near-grp{font-size:12.5px;color:var(--tm-sub);margin:2px 0 2px;}
.tm-near-grp b{color:var(--tm-primary);}
.tm-near-grp small{color:#a7aebb;}
/* 주변 학교 목록 — 좁은 옆칸에서 2단, 넓으면 3단으로 저절로 깔린다.
   ⚠️ 칸 수를 못 박지 않고 minmax 로 맡긴다. 상세보기는 옆칸(약 300px)과
      모바일 한 단(약 360px), 넓은 화면이 제각각이라 못 박으면 어딘가는 깨진다.
   ⚠️ 학교 이름은 길다(서울○○○초등학교병설유치원). min-width:0 과 말줄임이
      없으면 칸을 밀어내 단이 하나로 무너진다. */
.tm-near-list{list-style:none; padding:0; margin:0 0 12px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0 14px;}
.tm-near-list li{padding:5px 0; border-top:1px solid var(--tm-line2); min-width:0;}
.tm-near-list li a{display:block; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tm-near-list li a:hover{color:var(--tm-primary);}
.tm-near-list li small{display:block; color:#8a93a3; font-size:11.5px;}
@media(max-width:520px){ .tm-near-rad{float:none;display:flex;margin-top:6px;} }