/* Scoped to this standalone page; existing explorer styles are not modified. */
:root { color-scheme:light; }
.myloc-page { --ink:#15272b; --muted:#6b7d7c; --line:#dce5e0; --accent:#accfa6; --dark:#101c22; margin:0; color:var(--ink); background:#f5f7f3; font-family:"Malgun Gothic",system-ui,sans-serif; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.myloc-page * { box-sizing:border-box; }
.myloc-page [hidden] { display:none !important; }
.myloc-page a { color:inherit; text-decoration:none; }
.myloc-page button,.myloc-page input,.myloc-page select { font:inherit; }
.myloc-page button,.myloc-page .file-button { cursor:pointer; min-height:42px; padding:8px 14px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); }
.myloc-page button:disabled,.myloc-page input:disabled,.myloc-page select:disabled { opacity:.45; cursor:not-allowed; }
.myloc-page a:focus-visible,.myloc-page button:focus-visible,.myloc-page input:focus-visible,.myloc-page select:focus-visible,.myloc-page svg:focus-visible,.myloc-page summary:focus-visible { outline:3px solid #6a9972; outline-offset:3px; }
.myloc-page .skip { position:absolute; left:10px; top:-80px; padding:10px; background:white; z-index:100; }
.myloc-page .skip:focus { top:10px; }
.myloc-page h1,.myloc-page h2,.myloc-page h3,.myloc-page p { margin:0; }
.myloc-page .topbar { min-height:70px; display:flex; align-items:center; gap:35px; padding:12px max(24px,calc((100vw - 1240px)/2)); background:var(--dark); color:#e9f0e9; }
.myloc-page .brand { white-space:nowrap; font-size:19px; font-weight:800; letter-spacing:.06em; }
.myloc-page .brand>span { color:var(--accent); font-size:30px; margin-right:8px; vertical-align:middle; }
.myloc-page .brand b { color:var(--accent); font-weight:400; }
.myloc-page .topbar nav { display:flex; flex:1; gap:25px; font-size:12px; color:#92a7a7; }
.myloc-page .topbar nav a[aria-current] { color:#c1dfb8; }
.myloc-page .topbar>button { border-color:#354647; color:#d8e5db; background:#1c2b30; font-size:12px; }
.myloc-page main { width:min(1180px,calc(100% - 48px)); margin:auto; }
.myloc-page .page-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:35px 0 26px; }
.myloc-page .eyebrow { font-size:9px; font-weight:700; letter-spacing:.18em; color:#718978; margin-bottom:8px; }
.myloc-page h1 { font-size:32px; line-height:1.35; letter-spacing:-.055em; }
.myloc-page h1>span { color:#77a37c; }
.myloc-page .page-intro p:not(.eyebrow) { color:var(--muted); font-size:12px; margin-top:10px; }
.myloc-page .local-badge { display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid #d7e3d4; border-radius:30px; background:#edf4e9; font-size:11px; white-space:nowrap; }
.myloc-page .local-badge i { width:6px; height:6px; border-radius:50%; background:#7eae79; }
.myloc-page .day-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:16px 20px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.myloc-page .date-controls,.myloc-page .import-controls { display:flex; align-items:center; gap:10px; }
.myloc-page .date-controls label { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--muted); }
.myloc-page .date-controls input { padding:7px 10px; border:1px solid var(--line); border-radius:6px; min-width:140px; font-size:14px; color:var(--ink); min-height:42px; background:#fff; }
.myloc-page .date-controls select { padding:10px; border:1px solid var(--line); border-radius:6px; max-width:160px; background:#fff; font-size:12px; }
.myloc-page .primary { background:var(--dark); color:#d8ebcf; border-color:var(--dark); font-weight:700; }
.myloc-page .file-button { position:relative; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; font-size:12px; }
.myloc-page .file-button:focus-within { outline:3px solid #6a9972; outline-offset:3px; }
.myloc-page .file-button input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.myloc-page .import-controls>span { font-size:10px; color:var(--muted); }
.myloc-page .status { font-size:12px; color:#697d73; min-height:38px; padding:9px 2px; }
.myloc-page .status.error { color:#9a4e3e; }
.myloc-page .map-section { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.myloc-page .map-toolbar { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); }
.myloc-page .map-toolbar>div { display:flex; align-items:center; gap:10px; }
.myloc-page .map-toolbar span { font-size:11px; color:var(--muted); }
.myloc-page .map-toolbar button { font-size:11px; min-height:36px; padding:6px 10px; }
.myloc-page .map-stage { height:clamp(360px,55vh,640px); position:relative; overflow:hidden; background:#eaf0e8; }
.myloc-page #trace-map { position:absolute; inset:0; width:100%; height:100%; touch-action:none; user-select:none; background-image:linear-gradient(#9aaf9d1c 1px,transparent 1px),linear-gradient(90deg,#9aaf9d1c 1px,transparent 1px); background-size:34px 34px; cursor:grab; }
.myloc-page #kakao-map { position:absolute; inset:0; }
.myloc-page .empty-map { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; text-align:center; padding:20px; background:radial-gradient(ellipse,#f5f8f1aa,transparent); }
.myloc-page .empty-symbol { font-size:65px; color:#91ad8f; font-weight:200; line-height:1.2; }
.myloc-page .empty-map h2 { font-size:20px; font-weight:600; margin:16px 0 12px; letter-spacing:-.04em; }
.myloc-page .empty-map p { font-size:12px; color:var(--muted); }
.myloc-page .empty-map .privacy-copy { margin-top:20px; font-size:10px; }
.myloc-page .map-legend { display:flex; flex-wrap:wrap; gap:15px; align-items:center; padding:12px 16px; color:var(--muted); font-size:10px; }
.myloc-page .map-legend>span { display:flex; align-items:center; gap:7px; }
.myloc-page .map-legend>span:last-child { margin-left:auto; }
.myloc-page .legend-line,.myloc-page .legend-dash { width:22px; border-top:3px solid #42796b; }
.myloc-page .legend-dash { border-top-style:dashed; border-color:#b29461; }
.myloc-page .legend-circle { width:13px; height:13px; border-radius:50%; border:1px solid #497b61; background:#a8c8a4; }
.myloc-page .place-detail { position:absolute; bottom:18px; left:18px; width:min(340px,calc(100% - 36px)); max-height:70%; overflow:auto; padding:20px; border:1px solid #d7e3d5; border-radius:10px; background:#fffffff5; box-shadow:0 8px 35px #162c291c; z-index:4; }
.myloc-page .place-detail>button { position:absolute; top:8px; right:8px; min-height:32px; border:0; background:transparent; padding:0 10px; font-size:22px; }
.myloc-page .place-detail h2 { padding-right:20px; font-size:18px; line-height:1.5; }
.myloc-page #place-duration { margin:10px 0; font-weight:700; color:#547a50; }
.myloc-page #place-times { font-size:12px; line-height:1.9; }
.myloc-page #place-coordinates { margin-top:10px; font-size:10px; color:var(--muted); }
.myloc-page .stay-button { border:2px solid #fff; border-radius:50%; background:#a6c79acc; color:#1a4937; box-shadow:0 0 0 1px #477f62; padding:0; font-size:11px; font-weight:700; min-height:0; }
.myloc-page .day-summary { display:grid; grid-template-columns:repeat(4,1fr); margin:20px 0 32px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.myloc-page .day-summary>div { padding:18px 24px; border-right:1px solid var(--line); }
.myloc-page .day-summary>div:last-child { border:0; }
.myloc-page .day-summary small { display:block; color:var(--muted); font-size:10px; }
.myloc-page .day-summary strong { display:block; font-size:19px; font-weight:600; margin-top:5px; }
.myloc-page .list-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:18px; gap:12px; }
.myloc-page .list-heading h2 { font-size:22px; letter-spacing:-.05em; }
.myloc-page .list-heading>p { font-size:11px; color:var(--muted); }
.myloc-page .visit-list { display:grid; gap:10px; }
.myloc-page .visit-row { display:flex; align-items:center; gap:20px; width:100%; text-align:left; padding:17px 20px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.myloc-page .visit-row[aria-pressed=true] { border-color:#7ba383; background:#edf5ea; }
.myloc-page .visit-number { color:#9bb097; font-size:20px; font-weight:300; min-width:30px; }
.myloc-page .visit-copy { flex:1; }
.myloc-page .visit-copy strong { display:block; font-size:14px; }
.myloc-page .visit-copy small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
.myloc-page .visit-duration { font-size:13px; color:#527a59; }
.myloc-page .empty-list { padding:30px; text-align:center; color:var(--muted); font-size:13px; background:#eef2ed; border-radius:8px; }
.myloc-page #movement-details { margin:22px 0; font-size:12px; color:var(--muted); }
.myloc-page summary { cursor:pointer; padding:10px 0; }
.myloc-page #movement-list>p { padding:10px; border-bottom:1px solid var(--line); }
.myloc-page .page-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:28px 0 35px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.myloc-page dialog { width:min(550px,calc(100% - 28px)); max-height:88dvh; border:1px solid #d4e1d4; border-radius:14px; padding:28px; background:#f8faf5; color:var(--ink); }
.myloc-page dialog::backdrop { background:#0f202b88; backdrop-filter:blur(3px); }
.myloc-page dialog h2 { font-size:23px; margin:8px 24px 18px 0; letter-spacing:-.04em; }
.myloc-page dialog p { font-size:12px; color:var(--muted); margin:12px 0; }
.myloc-page .dialog-close { position:absolute; right:12px; top:10px; border:0; font-size:22px; padding:0 10px; background:transparent; }
.myloc-page .dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.myloc-page .notice { background:#eaf0e4; padding:14px; border-radius:7px; }
.myloc-page .settings-block { padding:20px 0; border-top:1px solid var(--line); }
.myloc-page .settings-block h3 { font-size:15px; margin-bottom:12px; }
.myloc-page .settings-block button,.myloc-page .settings-block .file-button { font-size:12px; margin:4px 6px 4px 0; }
.myloc-page .settings-block label { display:block; font-size:12px; }
.myloc-page .settings-block select { display:block; padding:8px; margin-top:8px; border:1px solid var(--line); border-radius:5px; width:100%; }
.myloc-page .source-row { padding:12px 0; border-bottom:1px dotted var(--line); font-size:11px; }
.myloc-page .source-row strong { display:block; }
.myloc-page .danger h3 { color:#9f5741; }
@media(max-width:760px) {
  .myloc-page .topbar { padding:12px 18px; gap:15px; flex-wrap:wrap; }
  .myloc-page .brand { flex:1; font-size:16px; }
  .myloc-page .topbar nav { order:3; flex-basis:100%; gap:24px; }
  .myloc-page .topbar>button { min-height:36px; }
  .myloc-page main { width:calc(100% - 28px); }
  .myloc-page .page-intro { padding:24px 2px; gap:10px; align-items:start; }
  .myloc-page h1 { font-size:28px; }
  .myloc-page .page-intro p:not(.eyebrow) { font-size:11px; max-width:235px; }
  .myloc-page .local-badge { font-size:9px; padding:5px 8px; }
  .myloc-page .day-toolbar { padding:12px; gap:14px; }
  .myloc-page .date-controls { flex-wrap:wrap; width:100%; gap:8px; }
  .myloc-page .date-controls>label { flex:1; gap:5px; font-size:10px; }
  .myloc-page .date-controls input { min-width:0; width:100%; }
  .myloc-page .date-controls>button { padding:6px 10px; }
  .myloc-page .date-controls select { flex-basis:100%; max-width:none; }
  .myloc-page .import-controls { width:100%; justify-content:space-between; }
  .myloc-page .map-toolbar { padding:9px; flex-wrap:wrap; }
  .myloc-page .map-toolbar>div { justify-content:space-between; width:100%; }
  .myloc-page .map-toolbar .map-actions { justify-content:flex-end; }
  .myloc-page .map-stage { height:52dvh; min-height:330px; max-height:550px; }
  .myloc-page .map-legend { padding:10px; gap:10px; font-size:9px; }
  .myloc-page .map-legend>span:last-child { margin-left:0; flex-basis:100%; }
  .myloc-page .day-summary { grid-template-columns:repeat(2,1fr); }
  .myloc-page .day-summary>div { padding:14px 18px; border-bottom:1px solid var(--line); }
  .myloc-page .day-summary>div:nth-child(2) { border-right:0; }
  .myloc-page .day-summary>div:nth-child(3) { border-bottom:0; }
  .myloc-page .day-summary strong { font-size:17px; }
  .myloc-page .list-heading { align-items:start; flex-direction:column; gap:7px; }
  .myloc-page .visit-row { padding:14px; gap:12px; }
  .myloc-page .visit-duration { font-size:11px; }
  .myloc-page .visit-copy strong { font-size:13px; }
  .myloc-page dialog { padding:22px; }
}
@media(prefers-reduced-motion:reduce) { .myloc-page * { scroll-behavior:auto !important; } }

/* Keep the date label readable on narrow phones. */
.myloc-page .date-controls label { white-space:nowrap; }
.myloc-page .date-controls input { flex:1; }

/* Inclusive From–To range controls. */
.myloc-page .date-controls{flex-wrap:wrap}
.myloc-page .date-controls label{flex:0 1 auto;min-width:0}
.myloc-page .date-controls input{width:150px;min-width:0}
.myloc-page .day-summary #summary-day{font-size:16px;overflow-wrap:anywhere}
@media(max-width:760px){.myloc-page .date-controls>label{flex:1 1 100%;display:grid;grid-template-columns:40px minmax(0,1fr)}.myloc-page .date-controls input{width:100%;max-width:100%}.myloc-page .range-separator{display:none}.myloc-page #previous-day{order:2}.myloc-page #next-day{order:4}.myloc-page #saved-days{order:3;flex:1;min-width:0}.myloc-page #apply-range,.myloc-page #all-days{flex:1}}

@media(max-width:760px){
  .myloc-page .date-controls{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 40px;gap:10px}
  .myloc-page .date-controls>label{grid-column:1/-1}
  .myloc-page .date-controls>label[for="day"]{grid-row:1}
  .myloc-page .date-controls>label[for="day-to"]{grid-row:2}
  .myloc-page #apply-range{grid-column:1/3;grid-row:3;white-space:nowrap}
  .myloc-page #all-days{grid-column:3/5;grid-row:3;white-space:nowrap}
  .myloc-page #previous-day{grid-column:1;grid-row:4}
  .myloc-page #saved-days{grid-column:2/4;grid-row:4;width:100%}
  .myloc-page #next-day{grid-column:4;grid-row:4}
}

.myloc-page .range-result{font-size:13px;font-weight:600;color:var(--ink)}
.myloc-page .daily-breakdown{margin:0 0 16px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:12px}
.myloc-page #daily-results{max-height:220px;overflow:auto}
.myloc-page .daily-result{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0}
.myloc-page .daily-breakdown>p{color:var(--muted)}

.myloc-page .display-options{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:12px 16px;border-bottom:1px solid var(--line)}
.myloc-page .display-options label{display:grid;gap:5px;font-size:11px;color:var(--muted)}
.myloc-page .display-options select{padding:8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);max-width:100%}
.myloc-page .display-options .color-option{display:flex;align-items:center;min-height:36px}
.myloc-page .daily-result{width:100%;text-align:left;border-left:5px solid #42796b;background:#fff}
.myloc-page .daily-result[aria-pressed="true"]{background:#e4efdf;outline:2px solid #42796b}
@media(max-width:760px){.myloc-page .display-options>label{flex:1 1 140px;min-width:0}}

/* Period navigation and records beside the map; mobile keeps the map above the list. */
.myloc-page main{max-width:1600px}
.myloc-page .timeline-workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
.myloc-page .timeline-sidebar{max-height:calc(100dvh - 100px);overflow:auto;position:sticky;top:16px;min-width:0}
.myloc-page .timeline-map-column{min-width:0}
.myloc-page .timeline-sidebar .day-toolbar{display:block;padding:14px}
.myloc-page .period-mode-label{display:grid;gap:5px;font-size:12px}
.myloc-page #period-mode{padding:10px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px}
.myloc-page #period-caption{font-size:12px;overflow-wrap:anywhere}
.myloc-page .timeline-sidebar .date-controls{display:flex;flex-wrap:wrap}
.myloc-page .timeline-sidebar .date-controls>label{flex:1 1 100%;display:grid;grid-template-columns:38px minmax(0,1fr)}
.myloc-page .timeline-sidebar .date-controls input{width:100%;min-width:0}
.myloc-page .timeline-sidebar .range-separator{display:none}
.myloc-page .timeline-sidebar .date-controls button{white-space:nowrap}
.myloc-page .timeline-sidebar .import-controls{margin-top:12px;flex-wrap:wrap}
.myloc-page #records-panel{margin-top:16px}
.myloc-page #records-panel>summary{font-weight:600;padding:12px;cursor:pointer}
.myloc-page #daily-results{max-height:none}
.myloc-page .day-records,.myloc-page .month-records{padding:8px 0;border-bottom:1px solid var(--line)}
.myloc-page .day-records>summary,.myloc-page .month-records>summary{cursor:pointer;font-size:12px;padding:8px 0}
.myloc-page .day-visit{display:block;width:100%;text-align:left;font-size:11px;margin:6px 0}
.myloc-page .timeline-sidebar .visits-section{padding-top:16px}
.myloc-page .timeline-sidebar .list-heading{display:block}
.myloc-page .timeline-sidebar .visit-row{grid-template-columns:24px minmax(0,1fr);gap:8px;padding:10px}
.myloc-page .timeline-sidebar .visit-duration{grid-column:2}
.myloc-page .timeline-sidebar .visit-list{display:block}
@media(max-width:900px){
 .myloc-page .timeline-workspace{display:flex;flex-direction:column}
 .myloc-page .timeline-sidebar{display:contents}
 .myloc-page .timeline-sidebar .day-toolbar{order:1;width:100%}
 .myloc-page .timeline-map-column{order:2;width:100%}
 .myloc-page #records-panel{order:3;width:100%}
 .myloc-page .timeline-sidebar .date-controls{display:flex}
 .myloc-page .timeline-sidebar .date-controls>label{flex:1 1 220px}
}

/* Keep calendar controls in a consistent compact grid on both layouts. */
.myloc-page .timeline-sidebar .date-controls{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 40px;gap:8px}
.myloc-page .timeline-sidebar #previous-day{grid-column:1;grid-row:1}
.myloc-page .timeline-sidebar #saved-days{grid-column:2/4;grid-row:1;width:100%;max-width:none}
.myloc-page .timeline-sidebar #next-day{grid-column:4;grid-row:1}
.myloc-page .timeline-sidebar .date-controls>label[for="day"]{grid-column:1/-1;grid-row:2}
.myloc-page .timeline-sidebar .date-controls>label[for="day-to"]{grid-column:1/-1;grid-row:3}
.myloc-page .timeline-sidebar #apply-range{grid-column:1/3;grid-row:4}
.myloc-page .timeline-sidebar #all-days{grid-column:3/5;grid-row:4}

/* Preset periods show their dates in the caption; manual bounds stay in Direct selection. */
.myloc-page[data-period-mode]:not([data-period-mode="custom"]) .date-controls>label,.myloc-page[data-period-mode]:not([data-period-mode="custom"]) #apply-range{display:none!important}
.myloc-page[data-period-mode]:not([data-period-mode="custom"]) .timeline-sidebar #all-days{grid-column:1/-1;grid-row:2}