/* 2D·3D 공용: 검색창 + PC(넓은 화면) 왼쪽 패널 배치 */
.search{display:flex;align-items:center;gap:0;background:var(--paper);border:2px solid var(--accent);border-radius:12px;overflow:hidden}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:500 15px var(--body);padding:9px 12px;outline:none}
.search input::-webkit-search-cancel-button{cursor:pointer}
.search button{border:0;background:var(--accent);color:#fff;font:700 14px var(--body);padding:9px 14px;cursor:pointer}
.sres h3{font:700 13px var(--body);color:var(--ink2);margin:14px 0 4px}
.sres .none{font-size:13px;color:var(--ink2);padding:6px 0}
.plist{list-style:none;margin:0;padding:0}
.plist button{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:9px 2px;border-bottom:1px dashed var(--line)}
.plist button:hover{background:var(--soft)}
.plist b{display:block;font-size:14px}
.plist small{display:block;font-size:12px;color:var(--ink2)}
.findbtn{all:unset;cursor:pointer;display:block;margin:8px 0 0;padding:9px 12px;border:1.5px dashed var(--accent);border-radius:10px;color:var(--accent);font-weight:700;font-size:13.5px}
.list mark,.hit mark{background:color-mix(in srgb,var(--hot) 25%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.spin{display:block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:10px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.spot{width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--ink);transform:rotate(-45deg)}

@media (min-width:900px){
  :root{--side:400px}
  .bar{right:auto;width:var(--side);background:var(--paper);border-right:1.5px solid var(--ink);
    border-bottom:1px solid var(--line);padding:calc(var(--top) + 14px) 14px 12px;gap:8px}
  .barhead h1{font-size:19px;white-space:normal}
  .barhead h1 small{display:inline!important}
  .row{flex-wrap:wrap;overflow:visible}
  #map{left:var(--side)!important}
  .sheet{left:0!important;right:auto!important;top:var(--barh,190px);bottom:0;width:var(--side);height:auto!important;
    max-width:none!important;margin:0!important;border-radius:0!important;border:0!important;border-right:1.5px solid var(--ink)!important;
    box-shadow:none!important;transition:none}
  .sheet .grab{display:none}
  .sheet.peek .sbody{overflow:auto}
  .sbody{padding-top:12px}
  .fabs{bottom:24px!important}
  .leaflet-top.leaflet-right,.maplibregl-ctrl-top-right{top:12px!important}
  #fail{left:var(--side)}
}

/* 언어 고르기 (i18n.js) */
.langsel{flex:none;font:700 11.5px/1 var(--body);color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);
  border-radius:999px;padding:4px 6px;max-width:92px;cursor:pointer}
/* 한국어가 아니면 제목 글꼴(Black Han Sans, 한글 전용) 대신 굵은 기본 글꼴 */
html:not([lang="ko"]){--disp:"IBM Plex Sans KR","Hiragino Sans","Yu Gothic","Microsoft YaHei","PingFang SC","Microsoft JhengHei",system-ui,sans-serif}
html:not([lang="ko"]) :is(.barhead h1,.shead h2,.hook,.intro h2){font-weight:700}
html:not([lang="ko"]) .shead h2{font-size:19px}
html:not([lang="ko"]) .hook{font-size:16px}
.trnote{font-size:12px;color:var(--ink2);background:var(--soft);border-radius:8px;padding:6px 10px;margin:0 0 10px}
/* 일본어·중국어는 글자 사이에서 줄을 바꿔야 자연스러움 (keep-all은 한국어용) */
html:not([lang="ko"]) body{word-break:normal}
/* '틀린 내용 알려 주세요' 안내 */
.fixnote{font-size:11.5px;color:var(--ink2);margin:10px 0 4px;line-height:1.5}
.fixnote a{color:inherit;text-decoration:underline}
/* 이야기 출처 링크 */
.refs{font-size:12px;color:var(--ink2);margin:6px 0 4px;line-height:1.5;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.refs b{font-weight:700;margin-right:2px}
.refs a{color:var(--accent);text-decoration:underline;word-break:break-all}

/* ===== 휴대폰(좁은 화면): 네이버 지도처럼 지도 위에 떠 있는 검색창·알약 버튼·동그란 버튼 ===== */
@media (max-width:899px){
  .bar{background:none;padding:calc(var(--top) + 10px) 12px 0;gap:8px;pointer-events:none}
  .bar > *{pointer-events:auto}
  /* 제목 줄은 숨기고, 그 안의 단추(3D·언어·관리·도장)는 오른쪽 동그란 버튼 줄로 */
  .barhead h1{display:none}
  .barhead{position:fixed;right:12px;top:calc(var(--top) + 158px);flex-direction:column;align-items:flex-end;gap:10px;padding:0;z-index:21}
  .barhead > a,.barhead > span,.barhead > select{min-width:48px;height:48px;border-radius:999px!important;border:0!important;
    display:inline-flex!important;align-items:center;justify-content:center;padding:0 12px!important;
    background:var(--paper)!important;color:var(--ink)!important;font:700 13px/1 var(--body)!important;
    box-shadow:0 2px 10px rgba(0,0,0,.28)}
  .barhead > .cnt[href*="admin"],.barhead > a[href="/admin"]{background:var(--hot)!important;color:#fff!important}
  .barhead > select{appearance:none;-webkit-appearance:none;max-width:72px;text-align:center}
  /* 검색창: 크고 둥근 알약 + 왼쪽 앱 아이콘 + 오른쪽 파란 검색 단추 */
  .search{height:54px;border:0;border-radius:999px;background:var(--paper);box-shadow:0 3px 14px rgba(0,0,0,.3);padding:0 5px 0 50px;position:relative;overflow:visible}
  .search::before{content:"";position:absolute;left:14px;top:50%;width:26px;height:26px;margin-top:-13px;background:url(/icon.svg) center/contain no-repeat;border-radius:7px}
  .search input{font-size:16.5px;padding:0 6px}
  .search button{height:44px;min-width:44px;border-radius:999px;padding:0 16px;background:#1F7AB8;font-size:14px}
  /* 갈래·동네: 지도 위에 뜬 알약들 */
  .row{gap:7px;padding:1px 2px 4px;margin:0 -12px;padding-left:12px;padding-right:12px}
  .row button{border:0;padding:10px 15px;font-size:13.5px;background:var(--paper);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.25)}
  .row button[aria-pressed="true"]{background:#1F7AB8;color:#fff}
  /* 확대·축소는 손가락으로 (네이버처럼 단추 숨김) */
  .leaflet-control-zoom,.maplibregl-ctrl-top-right{display:none!important}
  /* 아래 오른쪽 떠 있는 단추도 동그랗게 */
  .fab{border:0;border-radius:999px;padding:13px 16px;box-shadow:0 2px 10px rgba(0,0,0,.28);background:var(--paper);color:var(--ink)}
  .fab[aria-pressed="true"],.fab.on{background:#1F7AB8;color:#fff}
  /* 아래 패널: 테두리 없이 둥글게, 손잡이 크게 */
  .sheet{border:0!important;border-radius:22px 22px 0 0!important;box-shadow:0 -6px 24px rgba(0,0,0,.28)!important}
  .grab{padding:10px 0 6px}
  .grab span{width:44px;height:5px;border-radius:3px}
  .grab em{display:none}
  /* 아래 패널을 올리면 오른쪽 위 버튼 줄은 숨겨서 아래 버튼과 겹치지 않게 */
  body:has(.sheet:not(.peek)) .barhead{display:none}
}