/* 코스 만들기(코스 편집기) — planner.html. 넓은 화면: 지도 | 오른쪽 설정 / 아래 통계·고도표. 좁은 화면: 지도 전체 + 아래 시트 + 메뉴 서랍 */
.pl-page{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#fffdf9;color:#1f1c18}
.pl-page .finder-header{padding:12px 24px;max-width:none;margin:0;flex:0 0 auto;border-bottom:1px solid #efe6d6}
.pl-page .finder-header .brand-logo{width:36px;height:36px}.pl-page .finder-header .brand-word{height:40px;width:auto}
.pl-page .nbl-topbar-in{max-width:none;padding:4px 24px 0}
.pl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pl-dim{color:#a89c89;font-style:normal}

.pl-app{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"map side" "bottom side"}
.pl-mapwrap{grid-area:map;position:relative;min-height:280px;background:#eef1ea;overflow:hidden}
.pl-map{position:absolute;inset:0}
.pl-app.pl-drop .pl-mapwrap::after{content:'GPX 파일을 놓으면 불러와요';position:absolute;inset:12px;border:3px dashed #2f7a4b;border-radius:18px;background:#ffffffcc;display:grid;place-items:center;font-weight:900;font-size:18px;color:#2f7a4b;z-index:40}

.pl-nomap{position:absolute;inset:0;display:grid;place-items:center;padding:24px;z-index:1;background:
  repeating-linear-gradient(0deg,#e4e9dd 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,#e4e9dd 0 1px,transparent 1px 48px),#f1f4ec}
.pl-nomap[hidden]{display:none}
.pl-nomap>div{max-width:420px;background:#fff;border:1px solid #ece3d4;border-radius:18px;padding:22px 24px;box-shadow:0 12px 30px #6b4e2a1a;display:grid;gap:8px}
.pl-nomap b{font-size:19px;font-weight:900}.pl-nomap p{margin:0;font-size:14px;line-height:1.7}
.pl-map-off .pl-search,.pl-map-off .pl-layers,.pl-map-off .pl-hint{display:none}

/* 위: 검색 + 지도 보기 */
.pl-top{position:absolute;left:12px;right:12px;top:12px;z-index:10;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;pointer-events:none}
.pl-top>*{pointer-events:auto}
.pl-search{position:relative;display:flex;width:min(340px,100%);background:#fff;border-radius:12px;box-shadow:0 4px 16px #0002}
.pl-search input{flex:1;min-width:0;height:40px;border:0;border-radius:12px 0 0 12px;padding:0 12px;font:inherit;font-size:14px;background:transparent}
.pl-search button{height:40px;border:0;background:#1f1c18;color:#fff;font:inherit;font-weight:800;font-size:13px;padding:0 14px;border-radius:0 12px 12px 0;cursor:pointer}
.pl-results{position:absolute;left:0;right:0;top:44px;margin:0;padding:6px;list-style:none;background:#fff;border-radius:12px;box-shadow:0 8px 24px #0003;max-height:320px;overflow:auto}
.pl-results[hidden]{display:none}
.pl-results button{display:grid;gap:2px;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;font:inherit;cursor:pointer}
.pl-results button:hover{background:#f6f1e9}.pl-results b{font-size:14px}.pl-results small{font-size:12px;color:#8a7f6e}
.pl-results li.pl-dim{padding:8px 10px;font-size:13px}
.pl-layers{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
.pl-seg{display:inline-flex;background:#fff;border-radius:10px;box-shadow:0 3px 12px #0002;overflow:hidden}
.pl-seg button{height:34px;border:0;background:#fff;padding:0 11px;font:inherit;font-size:12.5px;font-weight:700;color:#6f685e;cursor:pointer;white-space:nowrap}
.pl-seg button+button{border-left:1px solid #efe6d6}
.pl-seg button[aria-pressed="true"]{background:#1f1c18;color:#fff}
.pl-seg.wide{display:flex;box-shadow:none;border:1px solid #e3d9ca}.pl-seg.wide button{flex:1}

/* 편집 버튼 줄 */
.pl-edit{position:absolute;left:12px;bottom:38px;z-index:10;display:flex;gap:4px;background:#fff;border-radius:12px;padding:4px;box-shadow:0 4px 16px #0002}
.pl-edit button{display:inline-flex;align-items:center;gap:5px;height:36px;border:0;background:none;border-radius:9px;padding:0 10px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;color:#1f1c18}
.pl-edit button span{font-size:12.5px;font-weight:700}
.pl-edit button:hover:not(:disabled){background:#f6f1e9}.pl-edit button:disabled{opacity:.35;cursor:default}
.pl-edit .pl-tools-btn{display:none}
.pl-hint{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:9;margin:0;background:#1f1c18d9;color:#fff;font-size:12.5px;padding:7px 14px;border-radius:99px;white-space:nowrap;pointer-events:none}
.pl-has-route .pl-hint{display:none}
button:focus-visible,.pl-btn:focus-visible,input:focus-visible{outline:3px solid #eac559;outline-offset:2px}

/* 점 메뉴 · 알림 */
.pl-menu{position:absolute;z-index:30;display:grid;min-width:150px;background:#fff;border-radius:12px;box-shadow:0 10px 30px #0003;padding:6px;gap:2px}
.pl-menu[hidden]{display:none}
.pl-menu b{font-size:12.5px;color:#8a7f6e;padding:4px 10px 6px;font-weight:800}
.pl-menu button{text-align:left;border:0;background:none;padding:9px 10px;border-radius:8px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.pl-menu button:hover{background:#f6f1e9}
.pl-toast{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:min(560px,calc(100% - 24px));background:#1f1c18;color:#fff;border-radius:14px;padding:10px 14px;font-size:13.5px;box-shadow:0 10px 30px #0004}
.pl-toast[hidden]{display:none}
.pl-toast button{height:30px;border:0;border-radius:8px;background:#eac559;color:#1f1c18;font:inherit;font-weight:800;font-size:12.5px;padding:0 11px;cursor:pointer}
.pl-toast button+button{background:#ffffff26;color:#fff}

/* 지도 위 표시(카카오 CustomOverlay) */
.pl-km{background:#fff;border:1.5px solid #e0661a;color:#b54d0f;font-size:11px;font-weight:800;padding:1px 6px;border-radius:99px;white-space:nowrap;box-shadow:0 1px 4px #0002;font-family:inherit}
.pl-hov{width:14px;height:14px;border-radius:50%;background:#e0661a;border:3px solid #fff;box-shadow:0 0 0 2px #1f1c18}
.pl-poi{width:24px;height:24px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font-size:12px;line-height:1;cursor:pointer;box-shadow:0 2px 6px #0004;padding:0;color:#fff;font-weight:900}
.pl-poi-shops{background:#3f6fb5}.pl-poi-certs{background:#c0392b}.pl-poi-courses{background:#2f7a4b}
.pl-pop{position:relative;width:240px;background:#fff;border-radius:14px;box-shadow:0 10px 30px #0004;padding:12px 14px;display:grid;gap:4px;font-family:inherit;white-space:normal}
.pl-pop::after{content:'';position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg)}
.pl-pop small{font-size:11.5px;color:#8a7f6e;font-weight:800}.pl-pop b{font-size:15px;line-height:1.35;padding-right:18px}
.pl-pop p{margin:0;font-size:12.5px;color:#6f685e;line-height:1.5}
.pl-pop>div{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pl-pop-x{position:absolute;right:6px;top:6px;width:26px;height:26px;border:0;border-radius:50%;background:#f1ebe0;cursor:pointer;font-size:16px;line-height:1}

/* 아래: 통계 + 고도표 */
.pl-bottom{grid-area:bottom;border-top:1px solid #efe6d6;background:#fffdf9;padding:10px 14px 12px;display:grid;gap:6px;min-width:0}
.pl-grab{display:none}
.pl-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:#ece3d4;border:1px solid #ece3d4;border-radius:12px;overflow:hidden}
.pl-stats>span{background:#fff;padding:7px 12px;display:grid;gap:1px;min-width:0}
.pl-stats small{font-size:11.5px;color:#a89c89;font-weight:700;white-space:nowrap}
.pl-stats b{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}.pl-stats b i{font-style:normal;font-size:12px;color:#8a7f6e;margin-left:2px}
.pl-stats .cr-lv{font-size:12.5px;box-shadow:none}
.pl-spd{font-weight:600;margin-left:4px}.pl-spd input{width:38px;height:18px;border:1px solid #e3d9ca;border-radius:5px;font:inherit;font-size:11.5px;padding:0 2px;text-align:center}
.pl-note{margin:0;font-size:12px;color:#8a7f6e;min-height:0;line-height:1.5}.pl-note:empty{display:none}
.pl-prof{position:relative;height:150px;min-width:0}
.pl-prof-svg{display:block;width:100%;height:100%;touch-action:pan-y}
.pl-prof-svg .g{stroke:#f0e9de;stroke-width:1}.pl-prof-svg text{font-size:11px;fill:#a89c89;font-family:inherit}
.pl-prof-svg .a{fill:#e0661a22}.pl-prof-svg .l{fill:none;stroke:#e0661a;stroke-width:2;stroke-linejoin:round}
.pl-prof-svg .hl{stroke:#1f1c18;stroke-width:1;stroke-dasharray:3 3}.pl-prof-svg circle{fill:#e0661a;stroke:#fff;stroke-width:2}
.pl-prof-tip{position:absolute;top:2px;left:0;background:#1f1c18;color:#fff;font-size:12px;padding:3px 8px;border-radius:7px;white-space:nowrap;pointer-events:none}
.pl-prof-tip[hidden]{display:none}
.pl-prof-empty{margin:0;height:100%;display:grid;place-items:center;font-size:13px;color:#a89c89;border:1px dashed #e3d9ca;border-radius:12px}

/* 오른쪽: 설정·경유점·파일·저장 */
.pl-side{grid-area:side;border-left:1px solid #efe6d6;overflow:auto;padding:14px 16px 24px;display:grid;gap:12px;align-content:start;background:#fffdf9}
.pl-side-top{display:none}
.pl-field{display:grid;gap:5px}.pl-field span{font-size:12.5px;font-weight:800;color:#8a7f6e}
.pl-field input{height:40px;border:1px solid #e3d9ca;border-radius:10px;padding:0 12px;font:inherit;font-size:15px;font-weight:700;background:#fff}
.pl-box{background:#fff;border:1px solid #ece3d4;border-radius:14px;padding:12px 14px;display:grid;gap:9px}
.pl-box h2{margin:0;font-size:14.5px;font-weight:900}.pl-box h2 small{font-weight:700;color:#a89c89}
.pl-box h3{margin:6px 0 0;font-size:13px;font-weight:900;color:#6f685e}
.pl-check{display:flex;gap:7px;align-items:baseline;font-size:13.5px;font-weight:700;flex-wrap:wrap}.pl-check small{font-weight:500;color:#a89c89;font-size:12px}
.pl-btns{display:flex;gap:6px;flex-wrap:wrap}
.pl-btn{height:36px;display:inline-flex;align-items:center;padding:0 13px;border-radius:10px;border:1px solid #e3d9ca;background:#fff;font:inherit;font-size:13px;font-weight:800;color:#1f1c18;cursor:pointer;text-decoration:none}
.pl-btn:hover{border-color:#1f1c18}.pl-btn.pri{background:#2f7a4b;border-color:#2f7a4b;color:#fff}.pl-btn.pri:hover{background:#256640}
.pl-wps{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:240px;overflow:auto}
.pl-wps li{display:grid;grid-template-columns:24px 1fr 26px;gap:6px;align-items:center;font-size:13px}
.pl-wps li.pl-dim{display:block;font-size:12.5px}
.pl-wn{width:22px;height:22px;border-radius:50%;border:2px solid #1f1c18;display:grid;place-items:center;font-size:10px;font-weight:900}
.pl-wn.s{background:#2f7a4b;color:#fff}.pl-wn.e{background:#b0412f;color:#fff}
.pl-wps input{height:30px;border:1px solid transparent;border-radius:7px;padding:0 6px;font:inherit;font-size:13px;background:none;min-width:0}
.pl-wps input:hover,.pl-wps input:focus{border-color:#e3d9ca;background:#fff}
.pl-wps li>button,.pl-mine-del{width:26px;height:26px;border:0;border-radius:50%;background:none;color:#a89c89;font-size:17px;cursor:pointer;line-height:1}
.pl-wps li>button:hover,.pl-mine-del:hover{background:#f6f1e9;color:#b0412f}
.pl-mine{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pl-mine li{display:grid;grid-template-columns:1fr 26px;gap:4px;align-items:center}
.pl-mine li.pl-dim{display:block;font-size:12.5px}
.pl-mine-open{display:grid;gap:1px;text-align:left;border:1px solid #efe6d6;background:#fff;border-radius:10px;padding:7px 10px;font:inherit;cursor:pointer;min-width:0}
.pl-mine-open:hover{border-color:#1f1c18}.pl-mine-open b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-mine-open small{font-size:11.5px;color:#8a7f6e}
.pl-credit{margin:0;font-size:11.5px;color:#a89c89;line-height:1.6}
.pl-x{width:36px;height:36px;border-radius:50%;border:0;background:#f1ebe0;font-size:22px;line-height:1;cursor:pointer}

/* 중간 폭: 통계 3칸 두 줄 */
@media (max-width:1180px){
  .pl-app{grid-template-columns:minmax(0,1fr) 300px}
  .pl-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-edit button span{display:none}
}

/* 좁은 화면(휴대폰): 지도 전체 + 아래 시트 + 메뉴 서랍 */
@media (max-width:760px){
  .pl-page .finder-header{padding:8px 14px;gap:8px 14px}
  .pl-page .finder-header .brand-logo{width:30px;height:30px}.pl-page .finder-header .brand-word{height:32px}
  .pl-page .finder-header nav{padding-bottom:2px}
  .pl-page .nbl-topbar-in{padding:4px 14px 0}
  .pl-app{display:block;position:relative}
  .pl-mapwrap{position:absolute;inset:0;min-height:0}
  .pl-top{left:8px;right:8px;top:8px;gap:6px}
  .pl-search{width:100%}
  .pl-layers{margin:0;width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-bottom:4px}
  .pl-layers::-webkit-scrollbar{display:none}
  .pl-seg{flex:0 0 auto}.pl-seg button{height:32px;padding:0 9px;font-size:12px}
  .pl-edit{left:8px;top:104px;bottom:auto;flex-direction:column;padding:3px}
  .pl-edit button{width:38px;height:38px;justify-content:center;padding:0;font-size:16px}
  .pl-edit .pl-tools-btn{display:inline-flex;background:#1f1c18;color:#fff}
  .pl-hint{bottom:auto;top:104px;left:56px;right:8px;transform:none;white-space:normal;font-size:12px;border-radius:12px}
  .pl-toast{top:104px;left:56px;right:8px;transform:none;max-width:none;justify-content:flex-start}
  .pl-bottom{position:absolute;left:0;right:0;bottom:0;z-index:20;border:0;border-radius:18px 18px 0 0;box-shadow:0 -6px 24px #0002;padding:4px 10px calc(10px + env(safe-area-inset-bottom))}
  .pl-grab{display:block;width:100%;height:18px;border:0;background:none;cursor:pointer;padding:0}
  .pl-grab i{display:block;width:40px;height:4px;border-radius:9px;background:#d8cfbf;margin:0 auto}
  .pl-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-stats>span{padding:5px 8px}.pl-stats b{font-size:15.5px}.pl-stats small{font-size:10.5px}
  .pl-spd{display:none}
  .pl-prof{height:96px}
  .pl-note{display:none}
  .pl-sheet-open .pl-note{display:block}.pl-sheet-open .pl-note:empty{display:none}
  .pl-sheet-open .pl-prof{height:150px}
  .pl-sheet-open .pl-spd{display:inline}
  .pl-side{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:86vh;max-height:86dvh;z-index:60;border:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px #0004;transform:translateY(105%);transition:transform .25s;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .pl-tools-open .pl-side{transform:none}
  .pl-side-top{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-14px;background:#fffdf9;margin:-14px -16px 0;padding:12px 16px 8px;z-index:1}
  .pl-side-top b{font-size:16px;font-weight:900}
  .pl-pop{width:210px}
}
@media (prefers-reduced-motion:reduce){.pl-side{transition:none}}

/* 흑백 배경 지도: 카카오 지도 타일 이미지만 흑백(경로 선·마커는 그대로 색) */
.pl-map.gray img[src*="daumcdn.net"]:not([src*="mapjsapi"]):not([src*="/marker"]){filter:grayscale(1) contrast(.92) brightness(1.06)}
.pl-mapwrap{position:relative}
.pl-graybtn{position:absolute;right:12px;bottom:34px;z-index:5;height:34px;padding:0 14px;border:1px solid #1f1c18;border-radius:99px;background:#fff;color:#1f1c18;font:inherit;font-size:13px;font-weight:800;box-shadow:0 2px 8px #0002;cursor:pointer}
.pl-graybtn[aria-pressed="false"]{background:#1f1c18;color:#fff}