/* Meridian — nautical chart port control. Cream land, pale water, chart magenta for aids and actions. */
body{--font-ui:'Pretendard';--font-display:'Space Grotesk';--font-mono:'Plex Mono';--bg:#eaf0f3;--surface:#fbfcfc;--panel:rgba(251,252,252,.92);--text:#16242e;--muted:#5c6f7d;--line:#d3dde3;--line-strong:#b9c7cf;--accent:#c8237a;--magenta:#c8237a;--blue:#1f5f8f;--green:#2b7c5b;--amber:#b7791a;--danger:#c93a3a;--land:#f3eee0;--land-edge:#c7bb9c;--radius-sm:6px;--radius-lg:12px;--hover:rgba(22,36,46,.06);--focus:#c8237a;--backdrop:rgba(22,36,46,.4);--toast-bg:#16242e;--top:64px;color-scheme:light}
h1,h2,h3,.m-kpi strong,.m-brand>span{font-family:var(--font-display),'Pretendard',sans-serif}
.muted{color:var(--muted)}

/* top bar */
.m-top{position:sticky;top:0;z-index:30;height:var(--top);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--line)}
.m-brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1}
.m-brand small{display:block;margin-top:4px;font:500 10px/1 var(--font-mono),monospace;letter-spacing:.08em;color:var(--muted)}
.m-rose{width:34px;height:34px;color:var(--text)}
.m-nav{display:flex;justify-content:center;gap:2px;padding:4px;background:#e5ecf0;border-radius:10px;width:max-content;margin:0 auto}
.m-nav a{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
.m-nav a .icon{width:16px;height:16px}
.m-nav a:hover{color:var(--text)}
.m-nav a.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(22,36,46,.12),0 0 0 1px rgba(22,36,46,.05)}
.m-status{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}
.m-wx{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#f2f6f8}
.m-wx .icon{width:15px;height:15px;color:var(--blue)}
.m-clock{font-size:12.5px;color:var(--text);letter-spacing:.02em;min-width:104px}
.m-cmd{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);transition:border-color .15s,color .15s}
.m-cmd:hover{border-color:var(--line-strong);color:var(--text)}
.m-cmd kbd{font:11px var(--font-mono),monospace}
.m-cmd .icon{width:15px;height:15px}
.m-user{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:500}
.m-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--text);color:#fff;font:600 11px var(--font-display),sans-serif;letter-spacing:.04em}
.m-back{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--muted)}
.m-back:hover{background:var(--hover);color:var(--text)}
.m-main{outline:0}

/* ---- chart view ---- */
.m-chart{display:grid;grid-template-columns:1fr 360px;grid-template-rows:1fr auto;height:calc(100dvh - var(--top));min-height:560px}
.m-map-wrap{position:relative;grid-row:1;overflow:hidden;background:#cddde7}
.m-map{width:100%;height:100%;display:block}
.m-land{fill:var(--land);stroke:var(--land-edge);stroke-width:1.2}
.m-shore{stroke:url(#m-hatch);stroke-width:7;opacity:.55}
.m-quay rect{fill:#3f4c57}
.m-berth-label rect{fill:var(--surface);stroke:var(--line-strong);stroke-width:1}
.m-berth-label rect.busy{fill:#16242e;stroke:#16242e}
.m-berth-label text{font:600 11px var(--font-mono),monospace;fill:var(--text)}
.m-berth-label rect.busy+text{fill:#fff}
.m-place{font:600 15px var(--font-display),sans-serif;fill:#6b6350;letter-spacing:-.01em}
.m-place.small{font:500 10px var(--font-mono),monospace;letter-spacing:.14em;fill:#8a8270}
.m-place.magenta{fill:var(--magenta);letter-spacing:.06em}
.m-fairway{fill:none;stroke:var(--magenta);stroke-width:1.6;stroke-dasharray:10 8;opacity:.75}
.m-anchorage circle{fill:rgba(200,35,122,.05);stroke:var(--magenta);stroke-width:1.2;stroke-dasharray:3 5}
.m-anchorage text{font:500 11px var(--font-mono),monospace;fill:var(--magenta);letter-spacing:.1em}
.m-buoy path{fill:var(--magenta)}
.m-buoy text{font:10px var(--font-mono),monospace;fill:var(--magenta)}
.m-compass circle{fill:none;stroke:var(--text);stroke-width:1;opacity:.55}
.m-compass path{fill:#fff;stroke:var(--text);stroke-width:1}
.m-compass path.n{fill:var(--magenta);stroke:none}
.m-compass text{font:600 12px var(--font-display),sans-serif;fill:var(--text)}
.m-scale rect{fill:var(--text)}.m-scale rect.alt{fill:#fff;stroke:var(--text);stroke-width:1}
.m-scale text,.m-lat text{font:10px var(--font-mono),monospace;fill:var(--muted)}
.m-depth-label text{font-family:var(--font-mono),monospace}
.m-ship{cursor:pointer;outline:0}
.m-ship path{fill:#fff;stroke:var(--text);stroke-width:1.6;transition:stroke-width .15s}
.m-ship.berthed path{fill:#16242e;stroke:#16242e}
.m-ship.inbound path{fill:var(--blue);stroke:#164869}
.m-ship.outbound path{fill:#fff;stroke:var(--blue);stroke-dasharray:3 2}
.m-ship.anchored path{fill:var(--amber);stroke:#8a5a0f}
.m-ship.tug path{fill:var(--green);stroke:#1f5b43}
.m-ship:hover path,.m-ship:focus-visible path{stroke-width:3}
.m-ship:focus-visible .m-ring,.m-ship.selected .m-ring{stroke:var(--magenta)}
.m-ring{fill:none;stroke:var(--magenta);stroke-width:2;stroke-dasharray:4 4;animation:m-spin 12s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes m-spin{to{transform:rotate(360deg)}}
.m-ship-label{font:500 11px var(--font-ui),sans-serif;fill:var(--text);paint-order:stroke;stroke:#dfeaf0;stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.m-layers{position:absolute;left:16px;bottom:16px;width:170px;padding:14px 14px 12px;background:var(--panel);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px -14px rgba(22,36,46,.4);font-size:12.5px}
.m-layers label{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer}
.m-layers input{accent-color:var(--magenta);width:14px;height:14px;margin:0}
.m-legend{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:5px;font-size:11.5px;color:var(--muted)}
.m-legend span{display:flex;align-items:center;gap:8px}
.m-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid var(--text);flex-shrink:0}
.m-dot.berthed{background:#16242e}.m-dot.inbound{background:var(--blue);border-color:var(--blue)}.m-dot.outbound{border-color:var(--blue);border-style:dashed}.m-dot.anchored{background:var(--amber);border-color:var(--amber)}.m-dot.tug{background:var(--green);border-color:var(--green)}
.m-tooltip{position:absolute;z-index:5;pointer-events:none;padding:7px 10px;background:#16242e;color:#fff;border-radius:7px;font-size:12px;display:grid;gap:2px;box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.m-tooltip span{color:#a9bcc8;font-size:11px}
.m-tooltip[hidden]{display:none}

.m-side{grid-row:1;border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0}
.m-side-head{display:flex;align-items:baseline;justify-content:space-between;padding:18px 20px 12px}
.m-side-head h2{font-size:15px;font-weight:600}
.m-side-head span{font:500 12px var(--font-mono),monospace;color:var(--muted)}
.m-vessel-list{overflow:auto;flex:1;min-height:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.m-vessel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 20px;border-bottom:1px solid #eef2f4;transition:background .12s}
.m-vessel:hover{background:var(--hover)}
.m-vessel.selected{background:#fbe9f2;box-shadow:inset 3px 0 var(--magenta)}
.m-vessel-main{display:grid;gap:2px;min-width:0}
.m-vessel-main strong{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-vessel-main small,.m-vessel-side small{font-size:11px;color:var(--muted)}
.m-vessel-side{display:grid;gap:3px;justify-items:end}
.m-tag{display:inline-flex;align-items:center;padding:3px 7px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.02em;background:#eef2f4;color:var(--text)}
.m-tag.berthed{background:#16242e;color:#fff}.m-tag.inbound{background:#e0ecf5;color:#164869}.m-tag.outbound{background:#fff;color:#164869;box-shadow:inset 0 0 0 1px #9dbdd4}.m-tag.anchored{background:#f8ecd3;color:#7a4f0c}.m-tag.tug{background:#dcefe5;color:#1f5b43}.m-tag.done{background:#eef2f4;color:var(--muted)}.m-tag.scheduled{background:#eef2f4;color:var(--muted)}
#m-detail{flex-shrink:0;max-height:52%;overflow:auto}
.m-detail-empty{padding:22px 20px 26px;color:var(--muted);font-size:13px;line-height:1.6}
.m-detail-empty p+p{margin-top:8px}
.m-detail{padding:18px 20px 22px}
.m-detail-head h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:8px}
.m-detail-head p{font-size:11.5px;color:var(--muted);margin-top:4px}
.m-kv{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:16px 0 0;font-size:13px}
.m-kv dt{color:var(--muted);font-size:12px;padding-top:1px}
.m-kv dd{margin:0}
.m-kv dd small{color:var(--muted)}
.m-detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.m-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);font-size:13px;font-weight:500;color:var(--text);transition:background .15s,border-color .15s,transform .1s}
.m-btn .icon{width:15px;height:15px}
.m-btn:hover{background:#f2f6f8;border-color:#a3b4bd}
.m-btn:active{transform:translateY(1px)}
.m-btn.primary{background:var(--magenta);border-color:var(--magenta);color:#fff}
.m-btn.primary:hover{background:#ad1d68;border-color:#ad1d68}
.m-btn.danger{color:var(--danger);border-color:#e8b9b9}
.m-btn.danger:hover{background:#fbeeee}
.m-btn.small{padding:5px 9px;font-size:12px;gap:3px;border-color:transparent;color:var(--muted)}
.m-btn.small:hover{color:var(--text);border-color:var(--line-strong)}

.m-strip{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,1fr) 1.6fr;border-top:1px solid var(--line);background:var(--surface)}
.m-kpi{display:grid;gap:2px;padding:14px 22px;border-right:1px solid var(--line)}
.m-kpi:last-child{border-right:0}
.m-kpi>span{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.m-kpi strong{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.m-kpi strong small{font-size:13px;font-weight:500;color:var(--muted);margin-left:4px}
.m-kpi em{font-style:normal;font-size:11.5px;color:var(--muted)}
.m-kpi.tide{grid-template-rows:auto 1fr auto}
.m-tide{width:100%;height:44px}
.m-tide polyline{fill:none;stroke:var(--blue);stroke-width:1.5}
.m-tide line{stroke:var(--magenta);stroke-width:1.2;stroke-dasharray:2 3}
.m-tide text{font:9px var(--font-mono),monospace;fill:var(--magenta)}

/* ---- pages ---- */
.m-page{max-width:1380px;margin:0 auto;padding:34px 28px 60px}
.m-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.m-page-head h1{font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.m-lead{max-width:560px;margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.65;text-wrap:pretty}
.m-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.m-seg{display:flex;padding:3px;background:#e5ecf0;border-radius:8px}
.m-seg button{padding:6px 12px;border-radius:6px;font:500 12.5px var(--font-mono),monospace;color:var(--muted)}
.m-seg button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(22,36,46,.15)}
.m-select{display:flex;align-items:center;gap:6px;padding:0 6px 0 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--muted)}
.m-select .icon{width:15px;height:15px}
.m-select select{border:0;background:none;padding:8px 4px;font-size:13px;color:var(--text);outline:0}
.m-search{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--muted);min-width:260px}
.m-search input{flex:1;border:0;background:none;padding:9px 0;font-size:13px;outline:0;color:var(--text)}
.m-search .icon{width:15px;height:15px}

/* gantt */
.m-gantt{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.m-gantt-head{display:grid;grid-template-columns:168px 1fr;border-bottom:1px solid var(--line);background:#f4f7f9}
.m-gantt-head .m-row-head{padding:10px 16px;font:600 11px var(--font-mono),monospace;letter-spacing:.08em;color:var(--muted);border-right:1px solid var(--line)}
.m-timeline{position:relative;height:38px}
.m-timeline span{position:absolute;top:12px;transform:translateX(-50%);font:11px var(--font-mono),monospace;color:var(--muted);white-space:nowrap}
.m-timeline span.day{transform:none;color:var(--text)}
.m-timeline span b{font-weight:600}
.m-gantt-body{position:relative}
.m-row{display:grid;grid-template-columns:168px 1fr;border-bottom:1px solid var(--line)}
.m-row:last-of-type{border-bottom:0}
.m-row-head{display:grid;gap:2px;padding:14px 16px;border-right:1px solid var(--line);background:#fafcfc}
.m-row-head strong{font:600 15px var(--font-display),sans-serif}
.m-row-head small{font-size:11px;color:var(--muted)}
.m-lane{position:relative;height:66px;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 8 - 1px),var(--line) calc(100% / 8 - 1px) calc(100% / 8))}
.m-bar{position:absolute;top:11px;height:44px;display:grid;align-content:center;gap:1px;padding:0 10px;border-radius:6px;text-align:left;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:600;color:#fff;background:#16242e;border:1px solid #16242e;transition:transform .12s,box-shadow .12s}
.m-bar small{font-size:10px;font-weight:400;opacity:.8}
.m-bar.planned{background:repeating-linear-gradient(135deg,#fff 0 5px,#e6eef3 5px 10px);color:var(--text);border-color:#8ea6b5;border-style:dashed}
.m-bar.planned small{opacity:.7}
.m-bar.done{background:#e5ebee;border-color:#e5ebee;color:var(--muted)}
.m-bar:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(22,36,46,.5);z-index:2}
.m-now{position:absolute;top:0;bottom:0;left:var(--now);width:0;border-left:2px solid var(--magenta);pointer-events:none;z-index:3}
.m-now span{position:absolute;top:-1px;left:6px;padding:2px 6px;border-radius:4px;background:var(--magenta);color:#fff;font:600 10px var(--font-mono),monospace;letter-spacing:.06em;white-space:nowrap}
.m-legend-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted)}
.m-legend-row span{display:flex;align-items:center;gap:7px}
.m-legend-row i{width:18px;height:10px;border-radius:2px;background:#16242e}
.m-legend-row i.planned{background:repeating-linear-gradient(135deg,#fff 0 3px,#e6eef3 3px 6px);border:1px dashed #8ea6b5}
.m-legend-row i.done{background:#e5ebee}
.m-legend-now i{width:2px;background:var(--magenta)}

/* table */
.m-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.m-chips button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font-size:12.5px;color:var(--muted);transition:all .15s}
.m-chips button b{font-weight:600;color:var(--text)}
.m-chips button[aria-pressed=true]{background:#16242e;border-color:#16242e;color:#fff}
.m-chips button[aria-pressed=true] b{color:#fff}
.m-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.m-pill-dot.접수{background:var(--blue)}.m-pill-dot.심사중{background:var(--amber)}.m-pill-dot.승인{background:var(--green)}.m-pill-dot.반려{background:var(--danger)}
.m-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.m-table{min-width:980px}
.m-table th{padding:12px 14px;text-align:left;font:600 11px var(--font-mono),monospace;letter-spacing:.06em;color:var(--muted);background:#f4f7f9;border-bottom:1px solid var(--line);white-space:nowrap}
.m-table th button{display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;letter-spacing:inherit}
.m-table th button .icon{width:13px;height:13px}
.m-table td{padding:13px 14px;border-bottom:1px solid #eef2f4;font-size:13px;vertical-align:middle}
.m-table tr:last-child td{border-bottom:0}
.m-table tbody tr:hover{background:#f7fafb}
.m-table td strong{display:block;font-weight:600}
.m-table td small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.m-kind{display:inline-block;padding:2px 7px;border-radius:4px;font:600 11px var(--font-mono),monospace}
.m-kind.in{background:#e0ecf5;color:#164869}.m-kind.out{background:#fff;color:#164869;box-shadow:inset 0 0 0 1px #9dbdd4}
.m-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
.m-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.m-pill.접수{background:#e0ecf5;color:#164869}.m-pill.심사중{background:#f8ecd3;color:#7a4f0c}.m-pill.승인{background:#dcefe5;color:#1f5b43}.m-pill.반려{background:#fbe3e3;color:#8f2626}
.m-empty{padding:44px 20px!important;text-align:center;color:var(--muted)}
.m-foot{margin-top:12px;font-size:12px;color:var(--muted)}
.m-review{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.m-reason{color:var(--danger)}
.m-history{display:grid;gap:14px;margin-top:6px}
.m-history li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.m-history strong{display:block;font-size:13px}
.m-history small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.m-history p{font-size:12.5px;margin-top:6px;color:var(--text)}

/* drawer / dialog theme */
.s-drawer .m-kv{margin-top:18px}
.s-dialog-head h2,.s-drawer-head h2{font-family:var(--font-display),sans-serif}

/* ---- responsive ---- */
@media (max-width:1180px){.m-wx{display:none}.m-chart{grid-template-columns:1fr 320px}.m-strip{grid-template-columns:repeat(4,1fr)}.m-kpi.tide{display:none}}
@media (max-width:980px){
  .m-top{grid-template-columns:auto 1fr;gap:10px;padding:0 14px;height:auto;row-gap:8px;padding-block:10px}
  .m-nav{grid-column:1/-1;width:100%;justify-content:stretch}
  .m-nav a{flex:1;justify-content:center;padding:8px 6px}
  .m-status{justify-self:end}.m-user span:last-child,.m-clock{display:none}
  .m-chart{display:flex;flex-direction:column;height:auto;min-height:0}
  .m-map-wrap{aspect-ratio:1200/720;max-height:62vh}
  .m-layers{display:flex;flex-wrap:wrap;gap:0 12px;width:auto;left:10px;right:10px;bottom:10px;padding:6px 10px;font-size:11px}
  .m-layers .s-eyebrow{display:none}.m-layers label{padding:3px 0;gap:6px}.m-legend{display:none}
  .m-side{border-left:0;border-top:1px solid var(--line)}
  .m-vessel-list{max-height:280px}#m-detail{max-height:none}
  .m-strip{grid-template-columns:1fr 1fr}
  .m-kpi:nth-child(2n){border-right:0}.m-kpi{border-bottom:1px solid var(--line)}
  .m-page{padding:22px 14px 48px}.m-page-head h1{font-size:26px}
  .m-gantt-head,.m-row{grid-template-columns:96px 1fr}.m-row-head small{display:none}
  .m-search{min-width:0;flex:1}
}