/* ===== 순례하는 교회 지도 ===== */
:root{
  /* Light palette shared with 성경지도 (public/map/css/styles.css) so the two
     maps and the app read as one product. --accent stays a warm gold as the
     교회사 타임라인 identity, darkened for contrast on the light ground. */
  --bg:#eef2f5; --panel:#ffffff; --panel2:#f1f4f8; --line:#dadce0;
  --text:#202124; --sub:#5f6368; --accent:#b0851f;
  --swatch-gold:#c9a227;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  background:var(--bg); color:var(--text); overflow:hidden;
}
#app{display:grid;grid-template-columns:340px 1fr;height:100vh;height:100dvh;height:100svh;}

/* ── 사이드바 ── */
#sidebar{background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;}
.side-header{padding:16px 16px 12px;border-bottom:1px solid var(--line);}
.side-header h1{font-size:17px;margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.side-header .years{font-size:12px;color:var(--accent);font-weight:600;}
.tagline{margin:6px 0 10px;font-size:12px;color:var(--sub);}
.topnav{display:flex;gap:6px;flex-wrap:wrap;}
.topnav a{font-size:12px;color:var(--sub);text-decoration:none;padding:5px 10px;
  border:1px solid var(--line);border-radius:6px;transition:all .15s ease;}
.topnav a.active{color:var(--text);background:var(--panel2);border-color:#3a4a5c;}
.topnav a.to-bible-link{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.topnav a.to-bible-link:hover{background:var(--panel2);border-color:var(--accent);color:#fff;}

.sidebar-tabs{display:flex;gap:4px;padding:12px 16px 8px;}
.sidebar-tabs2{padding-top:0;}
.sidebar-tab{flex:1;background:transparent;color:var(--sub);border:none;
  padding:8px 4px;border-radius:6px;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;}
.sidebar-tab.active{color:var(--text);border-bottom-color:var(--accent);font-weight:700;}
.sidebar-tabs2 .sidebar-tab{font-size:12px;color:var(--sub);}

.search-box{position:relative;padding:0 16px 8px;}
.search-box input{width:100%;padding:9px 30px 9px 12px;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:13px;}
#search-clear{position:absolute;right:24px;top:6px;background:none;border:none;
  color:var(--sub);cursor:pointer;font-size:13px;}

.list{flex:1;overflow-y:auto;padding:4px 10px 10px;min-height:0;}
.list-item{width:100%;display:flex;align-items:center;gap:9px;text-align:left;
  background:transparent;border:none;border-radius:8px;padding:9px 8px;cursor:pointer;color:var(--text);}
.list-item:hover{background:var(--panel2);}
.list-item.on{background:#e8eefc;}
.list-item.dim{opacity:.55;}
.li-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.li-year{font-size:11px;color:var(--accent);font-weight:700;width:46px;flex:0 0 auto;}
.li-main{flex:1;font-size:13px;line-height:1.35;}
.li-sub{color:var(--sub);font-size:11px;}
.li-tag{font-size:10px;color:var(--sub);background:var(--panel2);
  padding:2px 7px;border-radius:10px;flex:0 0 auto;}
.empty{color:var(--sub);font-size:13px;text-align:center;padding:24px;}

.legend-wrap{border-top:1px solid var(--line);padding:10px 14px;max-height:150px;overflow-y:auto;}
.legend-title{font-size:11px;color:var(--sub);margin-bottom:6px;}
.legend{display:flex;flex-wrap:wrap;gap:4px;}
.leg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--sub);
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:3px 8px;cursor:pointer;}
.leg.on{color:var(--text);border-color:var(--accent);}
.leg-sw{width:10px;height:10px;border-radius:3px;}

.side-footer{border-top:1px solid var(--line);padding:10px 14px;background:var(--panel2);}
.side-footer-links{display:flex;gap:6px;flex-wrap:wrap;}
.side-footer-link{font-size:11.5px;color:var(--sub);background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:4px 8px;text-decoration:none;transition:all .15s ease;}
.side-footer-link:hover{color:var(--text);border-color:var(--accent);}
.mb-btn-bible{text-decoration:none;font-size:17px;}

/* ── 지도 ── */
#map-wrap{position:relative;}
#map{position:absolute;inset:0;background:var(--bg);}

/* 메인 타이틀 카드 */
.map-title-card {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 500;
  width: min(440px, calc(100% - 32px));
  padding: 14px 18px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(60, 64, 67, .18);
  color: var(--text);
  pointer-events: auto;
  transition: all .2s ease;
}
.map-title-card .eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
}
.map-title-card h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.map-title-card .map-title-en {
  font-size: 13px;
  font-weight: 500;
  color: var(--sub);
}
.map-title-card p:last-child {
  margin: 6px 0 0;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.45;
}

.leaflet-tooltip{border:none;}
.leaflet-interactive:focus,.leaflet-container svg path:focus{outline:none;}

/* 사건 마커 */
.pc-event-icon{background:none;border:none;}
.pc-evt{display:block;border-radius:50%;background:var(--c);
  border:2px solid var(--ring);box-shadow:0 0 0 2px rgba(0,0,0,.3);}
.pc-evt.pc-pulse{animation:pcpulse 1.6s infinite;}
@keyframes pcpulse{0%{box-shadow:0 0 0 0 rgba(201,162,39,.6);}
  70%{box-shadow:0 0 0 12px rgba(201,162,39,0);}100%{box-shadow:0 0 0 0 rgba(201,162,39,0);}}
.pc-route-end span{display:block;width:14px;height:14px;border-radius:50%;
  background:var(--c);border:3px solid #fff;}

/* 베이스맵 전환 컨트롤 */
.pc-basemap{position:relative;margin:0!important;}
.pc-basemap-current{display:block;background:rgba(255,255,255,.94);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:0 14px;font-size:12px;
  font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 2px 10px rgba(60,64,67,.18);
  min-width:56px;text-align:center;height:32px;line-height:30px;box-sizing:border-box;}
.pc-basemap-current:hover{border-color:var(--accent);}
.pc-basemap-menu{position:absolute;bottom:calc(100% + 6px);right:0;display:none;flex-direction:column;
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  box-shadow:0 2px 10px rgba(60,64,67,.18);min-width:56px;}
.pc-basemap.open .pc-basemap-menu{display:flex;}
.pc-basemap-opt{background:transparent;color:var(--sub);border:none;
  padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center;}
.pc-basemap-opt+.pc-basemap-opt{border-top:1px solid var(--line);}
.pc-basemap-opt.on{background:var(--accent);color:#fff;font-weight:800;}
.pc-basemap-opt:hover:not(.on){color:var(--text);}
body.dark-base .place-label{color:#fff;}

/* 줌 컨트롤 (다크 테마 통일), 지도 선택 버튼과 가로 배치 */
#map .leaflet-control-zoom{display:flex;flex-direction:row;margin:0;height:32px;
  box-sizing:border-box;border:1px solid var(--line);box-shadow:0 2px 10px rgba(60,64,67,.18);}
#map .leaflet-control-zoom a{background:rgba(255,255,255,.94);color:var(--text);
  width:34px;height:100%!important;line-height:30px!important;box-sizing:border-box;
  border-radius:0!important;border-bottom:none!important;}
#map .leaflet-control-zoom a:first-child{border-top-left-radius:7px!important;
  border-bottom-left-radius:7px!important;border-right:1px solid var(--line);}
#map .leaflet-control-zoom a:last-child{border-top-right-radius:7px!important;
  border-bottom-right-radius:7px!important;}
#map .leaflet-control-zoom a:hover{background:#ffffff;color:var(--accent);}
#map .leaflet-control-zoom a.leaflet-disabled{background:rgba(255,255,255,.6);color:var(--sub);}

/* 저작권 표기 — 스택에서 분리해 화면 맨 아래(타임라인 아래 틈)에 고정, 최소한의 존재감만 유지 */
#map .leaflet-control-attribution{position:fixed!important;left:auto!important;
  right:2px;bottom:0;top:auto!important;margin:0;background:transparent;
  color:rgba(133,146,166,.45);font-size:8px;line-height:1.2;padding:0 3px;
  max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;}
#map .leaflet-control-attribution a{color:rgba(133,146,166,.45);pointer-events:auto;}
#map .leaflet-control-attribution:hover{color:var(--sub);background:rgba(255,255,255,.85);
  white-space:normal;overflow:visible;max-width:none;border-radius:4px 0 0 0;}
#map .leaflet-control-attribution:hover a{color:var(--sub);}

/* 이동 경로 애니메이션 */
.pc-march{background:none;border:none;}
.pc-march-dot{position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;
  background:var(--c);border:2px solid #fff;box-shadow:0 0 10px 2px var(--c);
  transform:translate(-50%,-50%);animation:pcpulse 1.2s infinite;}
.pc-march-lbl{position:absolute;left:11px;top:-9px;white-space:nowrap;font-size:11px;
  font-weight:800;color:#fff;text-shadow:0 0 3px #000,0 0 5px var(--c),0 1px 2px #000;}
.pc-march-end{background:none;border:none;}
.pc-me-dot{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;
  background:var(--c);border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 6px var(--c);}
.pc-me-lbl{position:absolute;left:9px;top:-8px;white-space:nowrap;font-size:10.5px;
  font-weight:700;color:#f0f4f8;text-shadow:0 0 3px #000,0 0 4px #000;}

/* 선택 지점 하이라이트 (조준 링 + 핀) */
.pc-focus{background:none;border:none;}
.pc-focus .ring{position:absolute;left:0;top:0;border-radius:50%;
  border:4px solid var(--c);transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.7));
  animation:pcfocus 1.8s ease-out infinite;}
.pc-focus .ring.r2{animation-delay:.9s;}
.pc-focus .pin{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  background:var(--c);border:3px solid #fff;transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 16px 4px var(--c);}
@keyframes pcfocus{
  0%{width:20px;height:20px;opacity:1;}
  100%{width:96px;height:96px;opacity:0;}}

/* 지명 라벨 (permanent tooltip) */
.place-label{background:transparent!important;border:none!important;box-shadow:none!important;
  color:#eef2f7;font-size:11px;font-weight:600;padding:0;
  text-shadow:0 0 3px #000,0 0 3px #000,0 0 3px #000;}
.place-label.cap{font-size:12.5px;font-weight:800;color:#ffe17a;
  text-shadow:0 0 3px #000,0 0 4px #000,0 0 5px #000;}
body:not(.dark-base) .place-label{color:#33373d;
  text-shadow:0 0 3px #fff,0 0 4px #fff,0 1px 2px rgba(255,255,255,.9);}
body:not(.dark-base) .place-label.cap{color:#7a5a12;
  text-shadow:0 0 3px #fff,0 0 4px #fff,0 0 5px #fff;}
.place-label:before,.place-label:after{display:none!important;}

/* ── 타임라인 ── */
#timeline{position:absolute;left:16px;right:16px;bottom:14px;z-index:600;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;box-shadow:0 6px 24px rgba(60,64,67,.18);
  transition:right .28s ease;}
#map .leaflet-bottom.leaflet-right{display:flex;flex-direction:row;align-items:flex-end;
  gap:8px;margin:0 10px 0 0!important;bottom:130px;transition:right .28s ease;}
body.detail-open #map .leaflet-bottom.leaflet-right{right:376px;}
#detail.open ~ #timeline{right:376px;}
.tl-top{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap;}
#play-btn{background:var(--accent);color:#fff;border:none;font-weight:700;
  padding:7px 14px;border-radius:8px;cursor:pointer;font-size:13px;}
#play-btn.on{background:#e05c5c;color:#fff;}
.tl-year{display:flex;align-items:baseline;gap:10px;}
#year-label{font-size:20px;font-weight:800;color:var(--accent);}
.tl-era{font-size:12px;color:var(--sub);}
.era-jumps{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap;max-width:64%;justify-content:flex-end;}
.era-jump{background:var(--panel2);color:var(--sub);border:1px solid var(--line);
  border-radius:6px;padding:5px 8px;font-size:11px;cursor:pointer;white-space:nowrap;}
.era-jump:hover{color:var(--text);border-color:var(--accent);}
.tl-slider-row{display:flex;align-items:center;gap:12px;}
.tl-nav{flex:0 0 auto;display:flex;align-items:center;gap:4px;}
.tl-arrow{background:var(--panel2);color:var(--text);border:1px solid var(--line);
  width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit;
  transition:background .12s,color .12s,border-color .12s;}
.tl-arrow:hover{background:#e8eefc;border-color:var(--accent);color:var(--accent);}
.tl-arrow:active{background:var(--accent);color:#fff;transform:scale(.94);}
#year-slider{flex:1;min-width:0;accent-color:var(--accent);cursor:pointer;}

/* ── 상세 패널 ── */
#detail{position:absolute;top:0;right:0;width:360px;max-width:90%;height:100%;
  background:var(--panel);border-left:1px solid var(--line);z-index:700;
  transform:translateX(105%);transition:transform .28s ease;overflow-y:auto;
  padding:18px 18px 40px;box-shadow:-8px 0 30px rgba(60,64,67,.18);}
#detail.open{transform:translateX(0);}
#detail-close{position:absolute;top:12px;right:12px;background:var(--panel2);
  border:1px solid var(--line);color:var(--sub);width:30px;height:30px;
  border-radius:8px;cursor:pointer;}
.d-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 40px 12px 0;}
.d-title{font-size:20px;font-weight:800;}
.d-hanja{font-size:13px;color:var(--sub);font-weight:500;}
.chip{font-size:11px;background:color-mix(in srgb,var(--c) 22%,transparent);
  color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  padding:3px 9px;border-radius:12px;font-weight:700;white-space:nowrap;}
.chip.xlink{cursor:pointer;}
.d-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.d-meta{width:100%;border-collapse:collapse;margin:6px 0 4px;}
.d-meta th{text-align:left;color:var(--sub);font-weight:600;font-size:12px;
  width:78px;padding:5px 0;vertical-align:top;}
.d-meta td{font-size:13px;padding:5px 0;}
.detail-back{background:var(--panel2);border:1px solid var(--line);color:var(--sub);
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:8px;cursor:pointer;
  margin-bottom:12px;font-family:inherit;}
.detail-back:hover{color:var(--text);border-color:var(--accent);}
.d-chapternav{display:flex;justify-content:space-between;gap:8px;margin:12px 0 4px;}
.d-chapternav button{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--sub);
  font-size:12px;font-weight:700;padding:8px 10px;border-radius:8px;cursor:pointer;
  font-family:inherit;text-align:left;line-height:1.4;}
.d-chapternav button:last-child{text-align:right;}
.d-chapternav button:hover:not(:disabled){color:var(--text);border-color:var(--accent);}
.d-chapternav button:disabled{opacity:.35;cursor:default;}
.d-chapternav .dcn-label{display:block;font-size:10px;opacity:.7;font-weight:600;}
.d-summary{font-size:13.5px;line-height:1.7;color:#3c4043;margin:12px 0;}
.d-sec{font-size:12px;color:var(--accent);font-weight:700;margin:16px 0 8px;
  border-top:1px solid var(--line);padding-top:12px;}
.d-meaning{margin:14px 0;padding:10px 14px;border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--panel2));border-radius:0 8px 8px 0;
  font-size:13px;line-height:1.7;color:#3c4043;}
.d-meaning-label{display:block;font-size:11px;font-weight:800;color:var(--accent);
  margin-bottom:5px;letter-spacing:.2px;}
.d-events{list-style:none;margin:0;padding:0;}
.d-events li{font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line);}
.evy{color:var(--accent);font-weight:700;margin-right:6px;}
.d-persons{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;}
.xlink{color:#1a73e8;cursor:pointer;text-decoration:none;border-bottom:1px dotted #1a73e8;}
.xlink:hover{color:#1557b0;}

/* ── 모바일 전용 요소 (데스크톱에선 숨김) ── */
#mobile-bar{display:none;}
.drawer-close{display:none;}
#drawer-backdrop{display:none;}
#detail-handle{display:none;}
.map-bottom-nav{display:none;}
.app-mobile-header{display:none;}
.app-drawer-backdrop{display:none;}
.app-global-drawer{display:none;}

/* ── 반응형 ── */
@media(max-width:820px){
  :root {
    --map-nav-h: calc(58px + env(safe-area-inset-bottom));
  }

  body {
    display: flex;
    flex-direction: column;
  }
  #app{grid-template-columns:1fr;grid-template-rows:1fr;height: calc(100vh - var(--map-nav-h, 58px) - 52px);height: calc(100svh - var(--map-nav-h, 58px) - 52px);}
  #map-wrap{grid-row:1;grid-column:1;}

  #mobile-bar{display:none;}
  .leaflet-top.leaflet-left{margin-top:10px;}

  #sidebar{position:fixed;inset:0;width:100%;max-width:100%;border-right:none;
    z-index:1200;transform:translateX(-100%);transition:transform .28s ease;
    box-shadow:2px 0 30px rgba(60,64,67,.28);}
  #sidebar.drawer-open{transform:translateX(0);}
  .drawer-close{display:flex;position:absolute;top:12px;right:12px;z-index:3;
    width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
    background:var(--panel2);color:var(--text);font-size:15px;cursor:pointer;
    align-items:center;justify-content:center;}
  #drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1100;}
  #drawer-backdrop.show{display:block;}

  #detail{top:52px;left:10px;right:10px;bottom:auto;width:auto;max-width:none;height:58%;padding:0;
    display:flex;flex-direction:column;overflow:hidden;
    transform:translateY(-130%);border-left:none;border-radius:16px;
    z-index:1000;box-shadow:0 10px 34px rgba(0,0,0,.55);}
  #detail.open{transform:translateY(0);}
  #detail.open ~ #timeline{left:10px;right:10px;}
  #detail-body{flex:1 1 auto;overflow-y:auto;padding:16px 16px 10px;}
  #detail-handle{display:flex;flex:0 0 auto;align-items:center;justify-content:center;
    height:36px;border:none;border-top:1px solid var(--line);background:var(--panel2);
    color:var(--accent);font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;}
  #detail:not(.collapsed) #detail-handle::after{content:"접기 ▲";}
  #detail.collapsed{height:auto;}
  #detail.collapsed #detail-body{max-height:98px;overflow:hidden;}
  #detail.collapsed #detail-handle{color:var(--accent);}
  #detail.collapsed #detail-handle::after{content:"자세히 보기 ▼";}

  #timeline{left:10px;right:10px;bottom:8px;padding:10px 12px;}
  .era-jumps,.lbl-toggle{display:none;}
  .tl-top{gap:10px;margin-bottom:6px;}
  #year-label{font-size:20px;}
  #map .leaflet-bottom.leaflet-right{bottom:104px;}
  body.detail-open #map .leaflet-bottom.leaflet-right{right:0;}
  #map .leaflet-control-attribution{max-width:60vw;bottom:var(--map-nav-h, 58px)!important;}

  .map-title-card {
    top: 10px;
    left: 10px;
    /* Leave room for the floating #mb-menu (목록·검색) button at top-right --
       they used to sit at the same spot and overlap. */
    right: 116px;
    width: auto;
    padding: 8px 12px;
    border-radius: 10px;
  }
  .map-title-card h2 {
    font-size: 14.5px;
  }
  .map-title-card .map-title-en {
    display: none;
  }
  .map-title-card p:last-child {
    display: none;
  }
  .map-title-card .eyebrow {
    font-size: 10.5px;
    margin-bottom: 2px;
  }

  /* ── 모바일 하단 메뉴 탭바 ── */
  .map-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(22, 29, 39, .96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 6px;
    font-size: 11px;
    color: var(--sub);
    text-decoration: none;
    transition: color .12s;
  }

  .mbn-item.mbn-active {
    color: var(--accent);
    font-weight: 700;
  }

  .mbn-icon {
    width: 20px;
    height: 20px;
  }

  /* ── 모바일 상단 공통 헤더 ── */
  .app-mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 14px;
    background: rgba(22, 29, 39, .96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 1060;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .app-hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
  }
  .app-hamburger-btn:hover {
    background: var(--panel2);
  }
  .hamburger-box {
    width: 20px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .hamburger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
  }
  .app-header-brand {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.3px;
  }
  .app-header-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--panel2);
    border: 1px solid var(--line);
    padding: 2px 8px;
    border-radius: 9999px;
    margin-left: auto;
  }
  .app-local-btn {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text);
    background: var(--panel2);
    border: 1px solid var(--line);
    padding: 5px 10px;
    border-radius: 8px;
    margin-left: auto;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s ease;
  }
  .app-local-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* ── 글로벌 슬라이드 드로어 ── */
  .app-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .app-drawer-backdrop.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .app-global-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 288px;
    max-width: 85vw;
    background: var(--panel);
    z-index: 2010;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .5);
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .app-global-drawer.open {
    transform: translateX(0);
  }
  .app-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
  }
  .app-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.3px;
  }
  .app-drawer-close-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--sub);
    font-size: 13px;
    cursor: pointer;
  }
  .app-drawer-close-btn:hover {
    background: var(--panel2);
    color: var(--text);
  }
  .app-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .drawer-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .drawer-section-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
  }
  .drawer-sec-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 8px 4px;
    margin: 0;
  }
  .drawer-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
  }
  .drawer-nav-item:hover {
    background: var(--panel2);
    color: #fff;
  }
  .drawer-nav-item-active {
    background: var(--accent);
    color: #1a1a1a !important;
    font-weight: 700;
  }
  .drawer-nav-item-active:hover {
    background: var(--accent);
  }
  .drawer-sub-group {
    margin-left: 12px;
    padding-left: 10px;
    border-left: 2px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
  }
  .drawer-sub-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--sub);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
  }
  .drawer-sub-nav-item:hover {
    color: var(--text);
    background: var(--panel2);
  }
  .drawer-sub-nav-item-active {
    background: var(--accent);
    color: #1a1a1a !important;
    font-weight: 700;
  }
}