:root{
  --navy:#0B2545; --deep:#13315C; --accent:#F4A300; --sea:#1E6091;
  --paper:#F7F5F0; --line:#D9D5CB; --ink:#22262B; --sub:#6B7178;
  --card:#FFFFFF; --ok:#2E7D32; --wait:#C77700; --dock:#8A8F98;
  --scale:1; /* PC에서 화면을 키우기 위한 배율 — 미디어쿼리에서만 값을 올림 */
  --shell-width:480px; /* 모바일 프레임 폭 — 아래 미디어쿼리와 항상 함께 바뀜 */
}
*{box-sizing:border-box;}
html{font-size:calc(15px * var(--scale));}
body{margin:0;font-family:'Segoe UI','Malgun Gothic',sans-serif;background:var(--paper);color:var(--ink);font-size:1rem;}

.app-shell{min-height:100vh;display:flex;flex-direction:column;max-width:var(--shell-width);margin:0 auto;background:var(--paper);}

/* ---------- header ---------- */
header.topbar{background:var(--navy);color:#fff;padding:0.9rem 1.1rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20;}
header.topbar h1{font-size:1rem;margin:0;}
header.topbar .sub{font-size:0.73rem;color:#B9C4D6;}
.back-btn{background:none;border:1px solid #ffffff55;color:#fff;border-radius:6px;padding:0.35rem 0.65rem;font-size:0.8rem;cursor:pointer;display:none;}
.back-btn.show{display:inline-block;}
.refresh-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:0.4rem 0.8rem;font-size:0.73rem;cursor:pointer;}

#status-banner{font-size:0.77rem;padding:0.4rem 1.1rem;background:#FFF6E6;color:#7A5A00;border-bottom:1px solid #F0D9A0;display:none;}
#status-banner.show{display:block;}

/* ---------- bottom tab nav ---------- */
/* 스크롤 중에도 화면 하단에 고정 — .app-shell 폭과 항상 같은 --shell-width를 공유해 중앙 정렬 유지 */
nav.bottombar{display:flex;background:#fff;border-top:1px solid var(--line);position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:var(--shell-width);z-index:20;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 8px rgba(0,0,0,.08);}
nav.bottombar button{flex:1;background:none;border:none;padding:0.5rem 0.2rem 0.45rem;font-size:0.68rem;color:var(--sub);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0.15rem;}
nav.bottombar button .ic{font-size:1.25rem;line-height:1;}
nav.bottombar button.active{color:var(--navy);font-weight:600;}

/* ---------- main content ---------- */
main{flex:1;width:100%;}
.view{display:none;}
.view.active{display:block;}

.kpi-row{display:flex;gap:0.55rem;padding:0.8rem;}
.kpi{flex:1;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:0.65rem 0.5rem;text-align:center;}
.kpi b{display:block;font-size:1.2rem;color:var(--navy);}
.kpi span{font-size:0.67rem;color:var(--sub);}

#map, #detail-map{height:38vh;min-height:260px;width:100%;}

.section-title{font-size:0.77rem;font-weight:700;color:var(--navy);margin:1.05rem 0.8rem 0.4rem;text-transform:uppercase;letter-spacing:.3px;}

.list{padding:0 0.8rem;}
.ship-row{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;margin-bottom:0.55rem;padding:0.65rem 0.8rem;font-size:0.8rem;cursor:pointer;}
.ship-row:hover{border-color:var(--sea);}
.ship-row .name{font-weight:600;font-size:0.87rem;}
.ship-row .meta{color:var(--sub);font-size:0.73rem;margin-top:0.15rem;}

.status{font-size:0.67rem;padding:0.15rem 0.55rem;border-radius:10px;color:#fff;white-space:nowrap;}
.status.sail{background:var(--sea);}
.status.wait{background:var(--wait);}
.status.dock{background:var(--dock);}

.search{margin:0.8rem;border:1px solid var(--line);border-radius:20px;padding:0.6rem 0.9rem;font-size:0.83rem;color:var(--ink);background:var(--card);width:calc(100% - 1.6rem);}
.search::placeholder{color:var(--sub);}

.filters{display:flex;gap:0.4rem;margin:0 0.8rem 0.8rem;flex-wrap:wrap;}
.chip{font-size:0.73rem;border:1px solid var(--line);border-radius:14px;padding:0.35rem 0.8rem;background:var(--card);color:var(--sub);cursor:pointer;}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy);}

.badge-imo{font-size:0.7rem;color:var(--sub);}

.info-table{width:calc(100% - 1.6rem);margin:0 0.8rem;border-collapse:collapse;font-size:0.8rem;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.info-table td{padding:0.6rem 0.8rem;border-bottom:1px solid var(--line);}
.info-table tr:last-child td{border-bottom:none;}
.info-table td:first-child{color:var(--sub);width:40%;}

.timeline{margin:0.9rem 0.8rem;border-left:2px solid var(--line);padding-left:1.05rem;}
.tstep{position:relative;padding-bottom:1.2rem;font-size:0.8rem;}
.tstep::before{content:'';position:absolute;left:-1.4rem;top:0.15rem;width:0.6rem;height:0.6rem;border-radius:50%;background:var(--sea);}
.tstep.done::before{background:var(--ok);}
.tstep.future::before{background:#fff;border:2px solid var(--dock);}
.tstep .t{color:var(--sub);font-size:0.7rem;display:block;margin-top:0.15rem;}

.list-item{display:flex;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:0.65rem 0.8rem;margin:0 0.8rem 0.55rem;font-size:0.8rem;}
.list-item .t{color:var(--sub);}

.callout{background:#FFF6E6;border:1px solid #F0D9A0;border-radius:6px;padding:0.6rem 0.8rem;font-size:0.73rem;margin:0.8rem;color:#7A5A00;}

.toggle-row{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:0.65rem 0.8rem;margin:0 0.8rem 0.55rem;font-size:0.83rem;}
.switch{width:2.25rem;height:1.27rem;border-radius:10px;background:var(--line);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;}
.switch.on{background:var(--ok);}
.switch::after{content:'';position:absolute;top:0.13rem;left:0.13rem;width:1rem;height:1rem;background:#fff;border-radius:50%;transition:left .15s;}
.switch.on::after{left:1.13rem;}

.empty-note{padding:1.6rem 1.05rem;text-align:center;color:var(--sub);font-size:0.83rem;}

.footer-note{font-size:0.7rem;color:var(--sub);text-align:center;padding:1.05rem 1.3rem calc(4.4rem + env(safe-area-inset-bottom));}

.leaflet-popup-content{font-size:0.8rem;line-height:1.5;}

/* PC에서도 모바일과 동일한 1열(카드 스택) 레이아웃을 유지하되,
   컨테이너 폭과 글자/요소 배율을 함께 키워 화면을 최대한 크게 채움 */
@media (min-width:700px){
  :root{--scale:1.3;--shell-width:640px;}
  .app-shell{box-shadow:0 0 40px rgba(0,0,0,.08);}
}
@media (min-width:1000px){
  :root{--scale:1.55;--shell-width:820px;}
}
@media (min-width:1300px){
  :root{--scale:1.75;--shell-width:960px;}
}
@media (min-width:1600px){
  :root{--scale:1.9;--shell-width:1080px;}
}