/* ---- tokens (palette B: moss green, wine, amber) ---- */
:root {
  --paper: #f4f4f0;
  --logo-paper: #f4f2ec; /* the logo's paper: manifest background_color, the app icons and the loading screen share it, so the OS start screen hands over without a seam */
  --sheet: #fafaf7;
  --panel: #e0e3db;
  --open-past: #c7dad5;
  --soon: #a8325a;
  --sun: #cc7a14;
  --off: #d0d4cb;
  --hair: #e7e9e2;
  --bg: var(--paper);
  --surface: var(--sheet);
  --sunken: var(--panel);
  --fg: #1b1f1e;
  --muted: #555c58;
  --line: #d3d7ce;
  --line-strong: #b4baaf;
  --open: #1f5f55;        /* text on surface */
  --open-bar: var(--open); /* day bar fill */
  --warn: var(--soon);    /* text on surface */
  --sun-bar: var(--sun);
  --closed: var(--off);
  --accent: var(--open);
  --accent-soft: var(--open-past);
  --scrim: rgb(0 0 0 / .45);
  --on-accent: #fff; /* text on an --accent fill (dark: the accent is light, so the text is dark) */
  --shadow-seg: 0 1px 2px rgb(0 0 0 / .12); /* the raised segment of a segmented control */
  --shadow-float: 0 4px 16px rgb(0 0 0 / .25); /* floating card, toast */
  --now: #1b1f1e;
  --pin-open: #1f5f55;
  --pin-soon: #a8325a;
  --pin-closed: #9aa29c;
  --pin-unknown: #555c58;
  --pin-edge: #1b1f1e;
  --pin-me: #2563eb;
  --pin-sun: #e08a1e; /* 양달 ring; pins sit on light tiles in both themes */
  --fav: #f5c21b; /* the ♥ of a favorite: yellow fill with a darker edge, so it reads on the light page too */
  --fav-edge: #a87400;
  --hatch: color-mix(in srgb, var(--fg) 40%, transparent); /* 빗금 = not usable (휴게·휴무·휴장) */
  --radius: 12px;
  --r-lg: 14px;
  --r-sm: 4px;
  --r-md: 10px;
  --r-pill: 999px;
  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: .9375rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --gap: 12px;
  --tap: 44px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-exit: 140ms;
  --font: "IBM Plex Sans KR", system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
/* dark: the phone's setting (자동), unless 내 정보 › 화면 picked 라이트; html[data-theme="dark"] below repeats the same values */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101312;
    --sheet: #141716;
    --panel: #1f2422;
    --open-past: #284039;
    --soon: #f08aa8;
    --sun: #f2b25c;
    --fav: #ffd34d;
    --fav-edge: #ffd34d;
    --off: #343a37;
    --hair: #202523;
    --fg: #e9ece9;
    --muted: #a3aaa6;
    --line: #343a37;
    --line-strong: #4a514d;
    --open: #6cc4b0;
    --scrim: rgb(0 0 0 / .6);
    --on-accent: #101312;
    --now: #e9ece9;
    /* pins sit on light OSM tiles in both themes; the legend sits on the dark page */
    --pin-open: #2f8f7c;
    --pin-soon: #d0587f;
    --pin-closed: #8d958f;
    --pin-unknown: #a3aaa6;
    --pin-edge: #0d100f;
    --pin-me: #3b82f6;
  }
}
:root[data-theme="dark"] {
  --paper: #101312; --sheet: #141716; --panel: #1f2422; --open-past: #284039; --soon: #f08aa8; --sun: #f2b25c;
  --fav: #ffd34d; --fav-edge: #ffd34d; --off: #343a37; --hair: #202523; --fg: #e9ece9; --muted: #a3aaa6;
  --line: #343a37; --line-strong: #4a514d; --open: #6cc4b0; --scrim: rgb(0 0 0 / .6); --on-accent: #101312; --now: #e9ece9;
  --pin-open: #2f8f7c; --pin-soon: #d0587f; --pin-closed: #8d958f; --pin-unknown: #a3aaa6; --pin-edge: #0d100f; --pin-me: #3b82f6;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; } /* form controls and scrollbars follow the picked theme */

/* ---- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--stick-h, 0px) + 8px); } /* focus/anchor scrolls land below the sticky controls */
body { margin: 0; background: var(--bg); color: var(--fg); font: 1rem/1.5 var(--font); font-variant-numeric: tabular-nums; overflow-x: hidden; word-break: keep-all; overflow-wrap: break-word; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
input, select, button { font: inherit; color: var(--fg); }
button, select, summary, .btn, .file-btn { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted, .meta { color: var(--muted); font-size: var(--fs-sm); }
[hidden] { display: none !important; }

/* ---- header ---- */
.top { background: var(--bg); padding: 10px 0 2px; }
h1 { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); letter-spacing: .02em; }
h1 { display: flex; align-items: center; gap: 6px; }
h1 strong { color: var(--fg); font-weight: 700; font-size: 1.125rem; }
.logo { flex: none; display: block; }
#summary { font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; margin-top: 4px; }
#summary b { color: var(--open); }
#summary b.zero { color: var(--muted); }
/* 내 지역 on: a small line under the summary; pressing it goes back to 전국 (the 44px tap area is padding pulled back by the margin) */
.region-line { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); margin: -6px 0 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); white-space: nowrap; }
.region-line > span:first-child { color: var(--fg); font-weight: 600; }
.region-line .x { text-decoration: underline; text-underline-offset: 2px; }
.region-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
/* date + slider stay sticky while the list scrolls; app.js sets a negative top so the filter row scrolls away,
   and --stick-h (0 when .unstuck) to the part that stays */
.controls { position: sticky; top: 0; z-index: 5; padding: 8px 0 6px; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.controls.unstuck { position: static; box-shadow: none; }
.controls[hidden] { display: none; }
.controls > .wrap { display: grid; gap: 8px; }
.field { display: block; min-width: 0; }
#date, #nowBtn {
  width: 100%; min-height: var(--tap); padding: 0 8px; font-size: var(--fs-md);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
}
#nowBtn { width: auto; padding: 0 12px; font-weight: 600; color: var(--accent); border-color: var(--accent); }
#date { width: auto; }
/* arrival time: the slider follows the thumb 1:1, nothing animates */
/* date · weekday · arrival wrap as a unit under large text; "지금으로" sits at the slider's end, so it never widens the header */
.scrub-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.scrub-label { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
#timeOut { color: var(--fg); font-weight: 700; font-size: var(--fs-base); margin-left: 4px; }
.scrub-row { display: flex; align-items: center; gap: 8px; min-height: var(--tap); margin-top: 4px; } /* same height with or without the button */
#time { flex: 1 1 0; min-width: 0; height: var(--tap); margin: 0; accent-color: var(--fg); }
#nowBtn { flex: none; }

/* filter row: five buttons on one line at 390px; wraps under large text so "조건" stays reachable */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters .pill { padding: 0 10px; font-size: var(--fs-xs); }
.filters .quiet { margin-left: auto; color: var(--fg); } /* 조건 is a pill like the others, set apart only by the right edge */
.filters .quiet.on { border-color: var(--fg); font-weight: 700; }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap);
  padding: 0 2px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-sm); white-space: nowrap;
}
.pill > span { color: var(--muted); font-size: var(--fs-xs); }
.pill select { border: 0; background: transparent; padding: 8px 4px; min-height: calc(var(--tap) - 2px); font-weight: 600; }
.pill select:focus-visible { outline: none; }
.pill:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
button.pill { padding: 0 12px; font-weight: 600; }
.toggle[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
/* on = a check mark too, not only the fill (aria-pressed already tells screen readers, so the mark is silent) */
.toggle[aria-pressed="true"]::before, .sh-toggle[aria-pressed="true"]::before { content: "✓"; content: "✓" / ""; margin-right: 2px; }
button.pill, #nowBtn, .btn {
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out),
    color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
}
button.pill:active, #nowBtn:active, .btn:active { transform: scale(.97); }
#locateMsg { font-size: var(--fs-sm); color: var(--muted); }

/* ---- tabs ---- */
main { padding-bottom: 48px; }
/* 목록/지도 stay in view under the date + slider, so the map is never a place you can't leave (app.js sets --ctl-h, and
   --stick-h = controls + this bar; .unstuck when even that would take over a short screen) */
.tabbar { position: sticky; top: var(--ctl-h, 0px); z-index: 4; margin: 0 -16px; padding: 8px 16px 6px; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.tabbar.unstuck { position: static; box-shadow: none; }
.tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 4px; background: var(--sunken); border-radius: var(--radius); }
.tabs [role="tab"] {
  min-height: var(--tap); border: 0; border-radius: var(--r-md); background: transparent;
  font-weight: 600; color: var(--muted); white-space: nowrap;
}
.tabs [aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-seg); }

/* ---- map ---- */
#panel-map { margin-top: 14px; display: grid; gap: 10px; }
/* the map fills what is left under the sticky controls (minus a strip of page below it, so a finger can still scroll the
   page); opening the tab scrolls it into exactly that place (app.js), so it is never half off screen while it pans */
#map { height: calc(100vh - var(--stick-h, 0px) - 72px); height: calc(100dvh - var(--stick-h, 0px) - 72px); min-height: 320px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--sunken); z-index: 0; }
#map .leaflet-bar a { width: var(--tap); height: var(--tap); line-height: var(--tap); font-size: var(--fs-lg); }
#map.leaflet-container, #map .leaflet-control-attribution { font-size: var(--fs-xs); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #map .leaflet-tile-pane { filter: brightness(.85); } }
:root[data-theme="dark"] #map .leaflet-tile-pane { filter: brightness(.85); } /* softer glare at night; pins stay as drawn */
/* pin names (src/map.js) at street zoom; map.js hides the ones that would overlap */
#map .pin-label { padding: 1px 6px; font: 600 .8125rem/1.3 var(--font); color: #1b1f1e; background: #fff; border-color: #b4baaf; white-space: nowrap; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 5px; }
/* swatches mirror the pin styles in src/map.js */
.dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fg); flex: none; }
.dot.open { background: var(--pin-open); }
.dot.soon { background: var(--pin-soon); border-width: 3px; }
.dot.closed { background: var(--pin-closed); width: 11px; height: 11px; }
.dot.unknown { border-color: var(--muted); border-width: 2.5px; }
.dot.approx { border: 2px dashed var(--muted); }
.dot.sunring { outline: 3px solid var(--pin-sun); outline-offset: 2px; margin: 0 5px; }
/* the selected card floats over the map's lower part, so the map and its pins stay in view */
.mapbox { position: relative; }
#pin-card:empty { display: none; }
#pin-card {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; max-height: 75%; overflow: auto; overscroll-behavior: contain; /* the card is short now; the scroll only guards huge text sizes */
  border-radius: var(--radius); box-shadow: var(--shadow-float);
}
/* 자세히 보기: the one way on from the map card to the list card */
.pin-more {
  min-height: var(--tap); padding: 0 14px; margin-top: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-md); font-weight: 600; white-space: nowrap;
}
.pin-more:active { background: var(--sunken); }
/* 내 암장: one line per favorite, above the timetable */
.favs { --pad: 16px; margin: 10px -16px 0; background: var(--surface); border-block: 1px solid var(--line); }
#countFav { color: var(--accent); }
.fav-list { list-style: none; margin: 0; padding: 0; }
.fav-list li + li { border-top: 1px solid var(--hair); }
.fav-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--tap); padding: 6px var(--pad);
  border: 0; background: none; color: var(--fg); font: inherit; text-align: left;
}
.fav-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.fav-status { flex: none; max-width: 60%; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-align: right; }
.fav-item.open .fav-status { color: var(--open); }
.fav-item:active { background: var(--sunken); }
.fav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 이번 주말, 여기: a curated pick, set apart from the timetable below (a tinted band, where the list is
   flat rows with bars). Folded: thumbnail, wall, reason. Opened: day pills + basis, then compact rows. Every control is at least --tap high. */
.pick { --pad: 16px; margin: 10px -16px 0; background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border-block: 1px solid var(--line); }
.pick-sum { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px var(--pad); list-style: none; cursor: pointer; }
.pick-sum::-webkit-details-marker { display: none; }
.pick-sum::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease-out); }
.pick[open] > .pick-sum::after { transform: translateY(5px) rotate(-135deg); }
.pick-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pick-thumb { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); overflow: hidden; }
.pick-sumtext { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pick-eyebrow { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.pick[open] :is(.pick-thumb, .pick-hint) { display: none; } /* opened: the list below says it */
.pick[open] > .pick-sum { min-height: 44px; }
.pick-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-media { position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--sunken); }
.pick-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick-mono { width: 22px; height: 22px; background: var(--muted); opacity: .55; -webkit-mask: url(assets/haebyeok-mark.svg) center / contain no-repeat; mask: url(assets/haebyeok-mark.svg) center / contain no-repeat; }
.pick-body { padding: 0 var(--pad); }
.pick-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; padding-bottom: 8px; }
.pick-days { display: flex; gap: 6px; min-width: 0; }
.pick-day { min-height: var(--tap); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.pick-day[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pick-set { flex: none; display: flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.pick-set svg { flex: none; width: 18px; height: 18px; }
.pick-segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 6px; padding: 3px; background: var(--sunken); border-radius: var(--radius); }
.pick-seg { min-height: var(--tap); border: 0; border-radius: var(--r-md); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.pick-seg[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-seg); }
:is(.pick-set, .pick-seg, .pick-day, .pick-row):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pick-basis { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-xs); }
.pick-list { margin: 0 calc(var(--pad) * -1); padding: 0; list-style: none; }
.pick-list > li { border-top: 1px solid var(--line); }
.pick-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px var(--pad); border: 0; background: transparent; color: var(--fg); font: inherit; text-align: left; }
.pick-row:active { background: var(--sunken); }
.pick-rank { flex: none; width: 18px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); text-align: center; }
.pick-rowthumb { flex: none; width: 44px; height: 44px; border-radius: var(--r-md); overflow: hidden; }
.pick-rowtext { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-name { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.pick-why { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.pick-why svg { flex: none; width: 16px; height: 16px; }
.pick-why.sun { color: var(--fg); }
.pick-why.sun svg { color: var(--sun); }
.pick-wxs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pick-wx { padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--fg); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.pick-hours { flex: none; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.pick-empty { margin: 0; padding: 12px 0; color: var(--muted); font-size: var(--fs-sm); }
.pick-note { margin: 0; padding: 4px 0 12px; color: var(--muted); font-size: var(--fs-xs); }
.card.no-photo { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: no-preference) {
  #pin-card.enter .card { animation: pin-in var(--dur-ui) var(--ease-out); }
  @keyframes pin-in { from { opacity: 0; transform: translateY(12px); } }
}
/* the map credit sits top right (map.js), clear of the card */
#map .leaflet-top.leaflet-right .leaflet-control-attribution { border-radius: 0 var(--radius) 0 6px; }
#pin-card .head { padding-right: 40px; } /* room for the close button */
.pin-close {
  position: absolute; top: 4px; right: 4px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--muted); font-size: var(--fs-lg); line-height: 1;
}

/* ---- timetable ---- */
.board { --pad: 16px; position: relative; margin: 10px -16px 0; background: var(--surface); border-block: 1px solid var(--line); }
.axis {
  position: sticky; top: var(--stick-h, 0px); z-index: 3; height: 1.625rem; box-shadow: 0 1px 0 var(--line-strong);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .axis { background: var(--panel); } }
@media (prefers-reduced-transparency: reduce) { .axis { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.axis .t, .axis .nowtag { position: absolute; transform: translateX(-50%); font-size: var(--fs-xs); }
.axis .t { top: 3px; color: var(--fg); font-weight: 600; left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--x)); }
.axis .t.under { visibility: hidden; } /* under the time tag (app.js) */
/* an open row fills most of the screen and doesn't read against the axis: it scrolls away instead of sticking */
.board:has(.row.is-open) .axis { position: relative; top: auto; }
.axis .nowtag {
  top: 3px; z-index: 1; left: clamp(24px, calc(var(--pad) + (100% - 2 * var(--pad)) * var(--x)), calc(100% - 24px));
  font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: var(--r-sm); background: var(--fg); color: var(--bg);
}
.plot { position: absolute; left: var(--pad); right: var(--pad); top: 1.625rem; bottom: 0; pointer-events: none; }
.grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.tgroup { position: relative; }
.band {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; padding: 4px var(--pad);
  background: var(--sunken); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
}
summary.band { list-style: none; min-height: var(--tap); }
summary.band::-webkit-details-marker { display: none; }
summary.band > span:first-child::before { content: "▸"; display: inline-block; width: 1.1em; }
details[open] > summary.band > span:first-child::before { content: "▾"; }
#countOpen { color: var(--open); }
.tgroup .empty { position: relative; margin: 10px var(--pad); background: var(--sheet); } /* covers the grid lines */
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--hair); }
.row-btn {
  display: block; width: 100%; min-height: 56px; padding: 13px var(--pad) 14px; text-align: left; line-height: 1.35;
  border: 0; background: none; scroll-margin-top: calc(var(--stick-h, 0px) + 2.125rem); transition: background-color var(--dur-press) var(--ease-out);
}
.row-btn:active { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.row-btn:focus-visible { outline-offset: -2px; }
.expand-in :is(a, button, summary), .more2 { scroll-margin: calc(var(--stick-h, 0px) + 2.5rem) 0 16px; }
/* name never truncates (wraps instead); region keeps at least 5em or moves down; time left wraps to its own line, right-aligned */
.l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.rname { min-width: 0; font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em; }
.sunnow {
  flex: none; padding: 0 6px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--sun) 22%, transparent); color: var(--fg);
}
/* 응달 / 방향 모름: same size, told apart by the word; unknown gets a dashed edge */
.sunnow.shade { background: var(--sunken); }
/* the picture form of 양달 / 응달 on a row (the word is its aria-label and title) and on the filter chips */
.sunnow.pic { display: inline-flex; align-items: center; padding: 2px 6px; }
/* 방향 모름: no chip and a dashed ring, so it weighs less than a known state; 실내: an outlined chip, the sun does not apply */
.sunnow.unknown.pic { padding: 2px 6px; border: 0; background: transparent; color: var(--muted); } /* same height as the other chips */
.sunnow.unknown.pic svg path:first-child { stroke-dasharray: 2.4 3; }
.sunnow.indoor.pic { padding: 1px 5px; color: var(--muted); }
.key li svg { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.sunnow.pic svg { width: 18px; height: 18px; }
/* the sun icon: ink on the amber chip in light (the amber itself is 2.4:1 there), the amber in dark (6:1) */
.sunnow.sun.pic { color: var(--fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sunnow.sun.pic { color: var(--sun); } }
:root[data-theme="dark"] .sunnow.sun.pic { color: var(--sun); }
.sunnow.shade.pic { color: var(--muted); }
/* 양달 | 응달: one capsule with two segments (the filter wears the same pictures as the rows). The pressed segment is filled; pressing it again clears it. */
.sunfilter { flex: none; display: inline-flex; border-radius: var(--r-pill); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); } /* a ring inside, not a border: the buttons keep the full 44px tap height */
.sunfilter-btn { display: inline-flex; align-items: center; gap: 3px; min-height: var(--tap); padding: 0 8px; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-xs); white-space: nowrap; }
.sunfilter-btn + .sunfilter-btn { border-left: 1px solid var(--line-strong); }
.sunfilter-btn svg { width: 14px; height: 14px; flex: none; }
.sunfilter-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.sunfilter-btn[aria-pressed="true"], .sunfilter-btn[aria-pressed="true"] + .sunfilter-btn { border-left-color: var(--fg); }
.sunfilter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.sunnow.unknown { background: transparent; border: 1px dashed var(--line-strong); padding: 0 5px; color: var(--muted); font-weight: 500; }
.rmeta { flex: 1 1 0; min-width: 5em; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.left { flex: none; margin-left: auto; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; color: var(--open); }
.row.soon .left { color: var(--soon); }
.row.closed .rname, .row.unknown .rname { color: var(--muted); font-weight: 500; }
.row.closed .left, .row.unknown .left { color: var(--muted); font-weight: 400; }
.bar { position: relative; display: block; height: 15px; margin-top: 9px; }
.bar .seg { position: absolute; top: 0; height: 8px; border-radius: var(--r-sm); background: var(--open); }
.bar .seg.past { background: var(--open-past); }
/* light bars (past, closed) get an edge with 3:1 against the sheet, so their length stays readable */
.bar .seg.past, .k-past { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--open) 70%, transparent); }
.row.soon .bar .seg.past { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soon) 70%, transparent); }
.row.closed .bar .seg { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 70%, transparent); }
.row.soon .bar .seg { background: var(--soon); }
.row.soon .bar .seg.past { background: color-mix(in srgb, var(--soon) 28%, transparent); }
.row.closed .bar .seg, .row.unknown .bar .seg { background: var(--off); }
.sunband { position: absolute; top: 11px; height: 4px; border-radius: 2px; background: var(--sun); }
.row.closed .sunband { opacity: .25; } /* a closed wall's sun is reference only */
.tick { position: absolute; top: -4px; height: 19px; width: 2px; margin-left: -1px; background: var(--fg); border-radius: 1px; }
.row.broken { padding: 10px var(--pad); }

/* expanded row: opens in --dur-ui, closes faster in --dur-exit; hidden content leaves the a11y tree */
.expand {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; background: var(--sheet); /* opaque: hides the grid lines */
  transition: grid-template-rows var(--dur-exit) var(--ease-out), opacity var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit);
}
.row.is-open > .expand {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), visibility 0s;
}
.expand-in { min-height: 0; overflow: hidden; padding: 0 var(--pad); }
.row.is-open .expand-in { padding-bottom: 18px; }
.herowrap { position: relative; margin-top: 2px; }
.hero { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); background: var(--off); }
/* no photo: a low band, not a big grey box */
.hero.ph { aspect-ratio: auto; min-height: 56px; display: flex; align-items: center; padding: 8px 14px; border-radius: var(--radius); background: var(--sunken); color: var(--muted); font-size: var(--fs-sm); }
.x-name { margin: 12px 0 2px; font-size: var(--fs-lg); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.x-sub { font-size: var(--fs-sm); color: var(--muted); }
.today { margin-top: 10px; font-size: var(--fs-base); }
/* 오늘 운영 … with 다녀왔어요 at the right end; a long line pushes the pill to the right of the next line */
.today-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 10px; }
.today-row .today { margin-top: 0; min-width: 0; }
.today span { color: var(--muted); font-size: var(--fs-sm); margin-right: 6px; }
/* the decision line: today's hours one step larger */
.today-row .today b { font-size: var(--fs-lg); letter-spacing: -.02em; }
/* 혼잡도: the level is in the words; the 3-bar meter (1 여유 · 2 보통 · 3 혼잡 filled) repeats it without colour */
.crowd-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-sm); }
.crowd-chip.muted { color: var(--muted); border-style: dashed; font-size: var(--fs-xs); }
/* 날씨·바람: one quiet line under the 혼잡도 chip; 바람 셈 is a neutral outlined pill (--warn already means 곧 닫힘 / 오래됨) */
.wx-line { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.wx-strong { display: inline-block; margin-left: 2px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--fg); font-weight: 700; white-space: nowrap; }
.crowd-meter { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.crowd-meter i { width: 4px; border: 1px solid currentColor; border-radius: 1px; }
.crowd-meter i:nth-child(1) { height: 6px; }
.crowd-meter i:nth-child(2) { height: 9px; }
.crowd-meter i:nth-child(3) { height: 12px; }
.crowd-chip[data-level="여유"] i:nth-child(-n+1),
.crowd-chip[data-level="보통"] i:nth-child(-n+2),
.crowd-chip[data-level="혼잡"] i:nth-child(-n+3),
.crowdnow[data-level="여유"] i:nth-child(-n+1),
.crowdnow[data-level="보통"] i:nth-child(-n+2),
.crowdnow[data-level="혼잡"] i:nth-child(-n+3) { background: currentColor; }
/* list-row pill: same size as .sunnow, outlined so it doesn't read as sun */
.crowdnow { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--fg); }
/* 혼잡 stands out in the list: --soon (the warning colour) on the text and edge; the three filled bars still say it without colour */
.crowdnow[data-level="혼잡"] { color: var(--soon); border-color: var(--soon); font-weight: 700; }
/* 여유 · 보통 · 혼잡 in the 기록 추가 sheet: pressed shows ✓ and fills, so not by colour alone */
.crowd-pills { display: flex; gap: 6px; }
.crowd-pill, .la-chip {
  min-height: var(--tap); min-width: 64px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out);
}
/* 지금 어때요?: the one-tap report in the open card, under the 혼잡도 chip */
.crowd-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.crowd-quick .crowd-pills { gap: 4px; }
.crowd-quick .crowd-pill { min-height: 32px; min-width: 0; padding: 0 10px; font-size: var(--fs-xs); }
.cq-q { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.cq-done { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.crowd-pill:disabled { opacity: .45; cursor: default; }
.crowd-pill:active, .la-chip:active { transform: scale(.97); }
.crowd-pill[aria-pressed="true"], .la-chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.crowd-pill[aria-pressed="true"]::before, .la-chip[aria-pressed="true"]::before { content: "✓"; content: "✓" / ""; margin-right: 2px; }
.stale-note { margin-top: 4px; font-size: var(--fs-xs); color: var(--warn); }
.tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-xs); line-height: 2; }
.tag.brk { background: var(--sunken); border-color: transparent; }
.hol-note { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
/* sun box: compass column (Task 4 draws into .sundial-slot) + words */
.sunbox {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px;
  padding: 10px 12px 10px 8px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.sunbox.solo { grid-template-columns: minmax(0, 1fr); padding: 14px; }
.sundial-slot { aspect-ratio: 216 / 146; }
/* sun side view (src/dial-view.js). Text is 18 user units (EM): the 216-unit viewBox in a 160px slot renders it at 13.3px. */
.dial { display: block; width: 100%; height: auto; overflow: visible; }
.d-ground { stroke: var(--line-strong); stroke-width: 1; }
.d-hill { fill: color-mix(in srgb, var(--fg) 28%, transparent); }
.d-wall { fill: var(--fg); }
.d-wall.lit { fill: var(--sun); filter: drop-shadow(0 0 5px var(--sun)); }
.d-wall.dark { fill: var(--muted); }
.d-beam { fill: var(--sun); fill-opacity: .32; stroke: var(--sun); stroke-width: 1.2; stroke-linejoin: round; }
.d-beam.off { fill-opacity: 0; stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1.3; }
.d-x { stroke: var(--soon); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.d-person { fill: var(--fg); }
.d-person.head { fill: var(--paper); stroke: var(--fg); stroke-width: 1.6; }
.d-halo { fill: var(--sun); opacity: .55; }
.d-path { fill: var(--sun); stroke: color-mix(in srgb, var(--sun) 70%, var(--fg)); stroke-width: .6; }
.d-sun { fill: var(--sun); stroke: var(--fg); stroke-width: 1.5; }
.d-sun.off { fill: var(--paper); stroke: var(--muted); stroke-dasharray: 2 2; }
.d-lab { font-size: 18px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; fill: var(--fg); }
.d-lab.me { fill: var(--open); }
.d-lab.xl { fill: var(--soon); }
/* 양달↔응달 flip: colours only, nothing moves (app.js marks the new SVG with what it was) */
.d-wall, .d-beam, .d-halo, .d-lab.wall {
  transition: fill 140ms var(--ease-out), stroke 140ms var(--ease-out), fill-opacity 140ms var(--ease-out), opacity 140ms var(--ease-out), filter 140ms var(--ease-out);
}
@starting-style {
  .dial.from-dark .d-wall { fill: var(--muted); filter: none; }
  .dial.from-dark .d-beam { fill-opacity: 0; stroke: var(--muted); }
  .dial.from-dark .d-halo { opacity: 0; }
  .dial.from-lit .d-wall { fill: var(--sun); }
  .dial.from-lit .d-beam { fill-opacity: .32; stroke: var(--sun); }
  .dial.from-dark .d-lab.wall, .dial.from-lit .d-lab.wall { opacity: 0; }
}
.dsent { font-size: var(--fs-sm); line-height: 1.5; }
.dsent b { font-weight: 700; }
.dsent.off { color: var(--muted); }
.dwhen { margin-top: 10px; font-size: var(--fs-md); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* icon-only actions (공유 beside the name, 길찾기 beside the address): a 44px tap area, the glyph in the text colour */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); text-decoration: none; cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover, .icon-btn.done { color: var(--accent); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.x-head { display: flex; align-items: flex-start; gap: 4px; margin: 12px 0 2px; }
.x-head .x-name { flex: 1; min-width: 0; margin: 0; }
.share-wrap { position: relative; flex: none; margin: -10px -10px -10px 0; } /* the pad is tap area only */
.x-head > .fav-btn, .name-row > .fav-btn { margin: -10px -8px -10px -10px; } /* ♥ stands before the name */
.name-row { display: flex; align-items: flex-start; }
.name-row .name { min-width: 0; }
.fav-btn.on svg { fill: var(--fav); stroke: var(--fav-edge); }
.rfav { margin-right: -4px; color: var(--fav); text-shadow: 0 0 1px var(--fav-edge), 0 0 1px var(--fav-edge); font-size: var(--fs-xs); } /* the mark after a favorite's name in the list; [hidden] hides it */
.m-info, .m-head { min-width: 0; }
@media (min-width: 560px) { /* wide: name/hours left, sun box right (compass above words), the rest under the name */
  .hero { aspect-ratio: 21 / 9; }
  .m-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; margin-top: 14px; }
  .m-cols .x-head { margin-top: 0; } /* top of the name = top of the sun box */
  .m-cols > .m-head { grid-column: 1; grid-row: 1; }
  .m-cols > .m-info { grid-column: 1; grid-row: 2; }
  .m-cols .sunbox { grid-template-columns: minmax(0, 1fr); grid-column: 2; grid-row: 1 / span 2; margin-top: 0; padding: 16px; }
  .m-cols > .more2 { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .m-cols .sb-fig { width: 100%; max-width: 220px; margin: 0 auto; }
}
.expand-in .acts .btn, .expand-in .actions .btn {
  flex: 1 1 auto; white-space: nowrap; justify-content: center; height: 46px; padding: 0 18px; border-radius: var(--radius);
  border: 1px solid var(--fg); background: var(--fg); color: var(--bg); font-size: var(--fs-md); font-weight: 600;
}
.expand-in .acts .btn.sub, .expand-in .actions .btn { background: transparent; color: var(--fg); border-color: var(--line-strong); font-weight: 500; }
/* 내 후기 */
.blog { margin-top: 10px; }
.blog-row { display: flex; flex-wrap: wrap; gap: 8px; }
.blog .btn { min-height: var(--tap); padding: 0 14px; justify-content: center; font-size: var(--fs-md); font-weight: 500; white-space: nowrap; color: var(--fg); border: 1px solid var(--line-strong); background: transparent; border-radius: var(--radius); }
.blog-h { font-size: var(--fs-xs); color: var(--muted); }
.blog-h b { color: var(--fg); font-weight: 600; margin-right: 4px; }
.blog-list { list-style: none; margin: 4px 0 0; padding: 0; }
.blog-list[hidden] { display: none; }
.blog-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); padding: 0 2px; color: var(--fg); text-decoration: none; border-top: 1px solid var(--hair); font-size: var(--fs-sm); }
.blog-list .bt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-list .bd { flex: none; font-size: var(--fs-xs); color: var(--muted); }
.blog-more { display: flex; align-items: center; min-height: var(--tap); width: 100%; padding: 0 2px; border: 0; border-top: 1px solid var(--hair); background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: left; }
/* every "더 보기" fold ends in the same chevron as the 시간표 · 계절 row (.more2): down when folded, up when open */
.info-more, .blog-more { justify-content: space-between; gap: 8px; }
.info-more::after, .blog-more::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: -4px 8px 0 2px; border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease-out);
}
.info-more[aria-expanded="true"]::after, .blog-more[aria-expanded="true"]::after { transform: translateY(5px) rotate(-135deg); }
/* folded: everything that does not decide the visit */
.more2 { margin-top: 10px; border-top: 1px solid var(--hair); padding-top: 4px; }
.more2 > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 0;
  font-size: var(--fs-md); font-weight: 600; list-style: none;
}
.more2 > summary::-webkit-details-marker { display: none; }
.more2 .sum-t { flex: 1; min-width: 0; }
.more2 .sum-s { font-size: var(--fs-sm); color: var(--accent); white-space: nowrap; }
/* chevron: points down when folded, up when open; only transform moves */
.more2 .chev {
  flex: none; width: 9px; height: 9px; margin: -4px 6px 0 2px; border: solid var(--fg); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease-out);
}
.more2[open] > summary .chev { transform: translateY(5px) rotate(-135deg); }
/* one picture at a time: [운영시간] [계절별 양달]; switching is instant (no motion) */
/* underlined tabs, so they read apart from the 하계/동계 switch inside the panel */
.m-tabs { display: flex; margin: 2px 0 10px; border-bottom: 1px solid var(--line); }
.m-tabs [role="tab"] {
  flex: 1; min-height: var(--tap); padding: 0 10px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  background: none; color: var(--muted); font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
}
.m-tabs [aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); font-weight: 700; }

/* ---- '더 보기' pictures: hours grid, seasonal sun ----
   Hatching only ever means "not usable" (휴게, 휴무, 동절기 휴장). */
.hgrid { --lab: 3.6rem; }
.ssun { --lab: 0px; } /* rows carry their own text line, so the bars take the full width */
.g-segrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.g-segrow .g-seg { margin-bottom: 0; flex: 1 1 9rem; }
.g-months { font-size: var(--fs-sm); color: var(--muted); }
.g-months.shut { color: var(--warn); font-weight: 700; }
.g-seg { display: flex; gap: 6px; margin-bottom: 8px; }
.g-seg button {
  flex: 1; min-height: var(--tap); padding: 0 8px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface);
  font-size: var(--fs-sm); white-space: nowrap; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.g-seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; }
.g-seg button[aria-pressed="true"]::before { content: "✓ "; }
.g-lead { font-size: var(--fs-sm); margin-bottom: 4px; }
.g-lead b { color: var(--open); }
.g-lead.preview { color: var(--warn); font-weight: 600; }
.g-axis { position: relative; height: 22px; margin-left: var(--lab); font-size: var(--fs-xs); color: var(--muted); }
.g-axis span { position: absolute; top: 0; line-height: 22px; transform: translateX(-50%); white-space: nowrap; }
.g-axis .first { transform: none; }
.g-axis .last { transform: translateX(-100%); }
.g-axis .nowtag { line-height: 1; top: 2px; padding: 3px 5px; border-radius: var(--r-sm); background: var(--now); color: var(--bg); font-weight: 700; z-index: 4; }
.g-body { position: relative; isolation: isolate; border-bottom: 1px solid var(--hair); }
.g-plot { position: absolute; top: 0; bottom: 0; left: var(--lab); right: 0; pointer-events: none; }
.g-plot .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair); z-index: 1; }
.g-plot .nowl { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--now); z-index: 3; }
/* --tx: the hour-text line above each bar; bar, break and sun sit below it, so larger text pushes them down */
.g-body { --tx: 1.15rem; }
.g-row { display: flex; min-height: max(44px, calc(var(--tx) + 26px)); border-top: 1px solid var(--hair); }
.g-lab { width: var(--lab); flex: none; display: flex; flex-direction: column; justify-content: center; font-size: var(--fs-sm); line-height: 1.2; }
.g-lab small { font-size: var(--fs-xs); font-weight: 700; color: var(--open); }
.g-wrap { display: contents; }
.g-trk { position: relative; display: block; flex: 1; min-width: 0; }
.g-row.g-today { min-height: calc(var(--tx) + 42px); background: color-mix(in srgb, var(--open-past) 45%, transparent); }
.g-row.g-today .g-lab { font-weight: 700; }
.g-bar { position: absolute; top: calc(var(--tx) + 6px); height: 12px; border-radius: 3px; background: var(--open-bar); z-index: 2; }
.g-brk, .g-off, .k-hatch {
  background-image: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 6px);
}
.g-brk { position: absolute; top: calc(var(--tx) + 4px); height: 16px; border: 1px solid var(--line-strong); border-radius: 2px; z-index: 2; }
.g-off { position: absolute; left: 0; right: 0; top: 12px; bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.g-closed { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); padding: 0 4px; border-radius: 3px; background: var(--surface); font-size: var(--fs-xs); font-weight: 600; z-index: 4; white-space: nowrap; }
.g-closed.none { left: 0; font-weight: 400; color: var(--muted); background: none; }
.g-txt { position: absolute; top: 3px; padding: 0 3px; border-radius: 3px; background: var(--surface); font-size: var(--fs-xs); line-height: calc(var(--tx) - 2px); white-space: nowrap; z-index: 4; }
.g-row.g-today .g-txt, .g-row.g-today .g-closed { background: color-mix(in srgb, var(--open-past) 45%, var(--surface)); }
.g-row.shut .g-bar, .g-row.shut .g-txt { opacity: .35; }
.g-sun, .g-sunon { position: absolute; top: calc(var(--tx) + 23px); height: 8px; border-radius: 2px; z-index: 2; }
.g-sun { border: 1px solid var(--sun-bar); background: color-mix(in srgb, var(--sun-bar) 22%, transparent); }
.g-sunon { background: var(--sun-bar); }
.g-key { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--muted); }
.g-key li { display: inline-flex; align-items: center; gap: 6px; }
.g-key i { flex: none; display: inline-block; width: 20px; height: 10px; border-radius: 2px; }
.k-bar { background: var(--open-bar); }
.k-hatch { border: 1px solid var(--line-strong); }
.k-sunall { border: 1px solid var(--sun-bar); background: color-mix(in srgb, var(--sun-bar) 22%, transparent); }
.k-sunon { background: var(--sun-bar); }
.g-key i.k-now { width: 2px; height: 14px; background: var(--now); }
.k-open { border: 1px solid var(--open); background: color-mix(in srgb, var(--open-past) 50%, transparent); }
.g-notes { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--fs-xs); color: var(--muted); }
/* seasonal sun: "여름 6/21 · 12:40–19:40" line over a full-width track, so the track keeps its width at large text sizes */
.s-row { padding: 4px 0 2px; border-top: 1px solid var(--hair); }
.s-head { font-size: var(--fs-sm); line-height: 1.35; }
.s-row .g-trk { height: 30px; }
.s-row.cur { background: color-mix(in srgb, var(--open-past) 45%, transparent); }
.s-open { position: absolute; top: 5px; height: 20px; border: 1px solid var(--open); border-radius: 3px; background: color-mix(in srgb, var(--open-past) 50%, transparent); }
.s-row .g-sun, .s-row .g-sunon { top: 10px; height: 10px; }
/* first view: 안내 lines, parking (label column shared with the memo list) */
.memo-list.info { margin-top: 8px; border-top: 1px solid var(--hair); }
.memo-list.info li { padding: 3px 0; } /* tight: the open panel stays near one screen */
.info-fold { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 150ms var(--ease-out), opacity 150ms var(--ease-out), visibility 0s linear 150ms; }
.info-fold.open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.info-fold-in { min-height: 0; overflow: hidden; }
.info-fold .memo-list.info { margin-top: 0; border-top: 1px solid var(--hair); }
.info-more { display: flex; align-items: center; min-height: var(--tap); width: 100%; padding: 0; border: 0; border-top: 1px solid var(--hair); background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.irow { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 0; border-top: 1px solid var(--hair); font-size: var(--fs-sm); line-height: 1.45; }
.irow .mk { color: var(--muted); align-self: start; padding-top: 1px; }
.pv { grid-column: 2 / -1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.pk-word { font-weight: 600; }
.pnear { display: block; margin-top: 2px; color: var(--muted); }
.pn-k { margin-right: 6px; font-weight: 600; }
.pk-word.good { color: var(--open); }
.pk-word.warn { color: var(--warn); }
.pk-word.muted { color: var(--muted); font-weight: 400; }
.addr-line { display: flex; align-items: center; gap: 2px; margin: 2px 0 0; }
.addr-line .icon-btn { margin: -10px 0; }
/* the whole line is the button: no copy chip; a dotted underline says it can be tapped */
.addr-btn { display: inline-flex; max-width: 100%; min-height: var(--tap); margin: -10px 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.addr-t { min-width: 0; overflow-wrap: anywhere; align-self: center; }
.addr-ic { display: inline-flex; flex: none; align-self: center; margin-left: 6px; } /* the copy icon says the line can be tapped */
.addr-ic svg { width: 14px; height: 14px; }
.addr-btn.done .addr-t { color: var(--accent); font-weight: 600; }
.addr-btn.done svg { color: var(--accent); }
.addr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.memo-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); line-height: 1.45; }
.memo-list li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 8px; margin: 0; padding: 5px 0; border-bottom: 1px solid var(--hair); font-size: inherit; } /* li.key: not the legend .key */
.memo-list li:last-child { border-bottom: 0; }
.memo-list .mk { color: var(--muted); }
.memo-list .mv { overflow-wrap: anywhere; }
.memo-list .mv.free { grid-column: 1 / -1; }
.memo-list li.key .mk, .memo-list li.key .mv { color: var(--warn); font-weight: 600; }
.expand-in .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
/* 공지사항 · 오픈채팅 · 전화 sit under 정보 확인일 as small pills. They are green text with an icon, so they read as
   links apart from the grey tag chips above (which do nothing). The visible height is 34px; the ::after grows the
   tap area to 44px (rows are 8px apart, so neighbours never overlap). */
.expand-in .actions .btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; min-height: 0; padding: 0 12px;
  border-radius: var(--r-pill); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); color: var(--accent);
  font-size: var(--fs-sm); font-weight: 600;
}
.expand-in .actions .btn svg { flex: none; width: 15px; height: 15px; }
.expand-in .actions .btn::after { content: ""; position: absolute; inset: -5px 0; }
.btn-sub { color: var(--muted); font-size: 13px; font-weight: 400; white-space: nowrap; }
.expand-in .row-actions { margin: 8px 0 0; }
.expand-in .row-actions button { font-size: var(--fs-sm); }

.key { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: var(--fs-xs); }
.key li { display: inline-flex; align-items: center; gap: 5px; }
.key i { display: inline-block; width: 16px; height: 5px; border-radius: 2px; }
.k-open { background: var(--open); }
.k-sun { background: var(--sun); }
.k-past { background: var(--open-past); }
.k-soon { background: var(--soon); }

/* conditions: bottom sheet. No padding on the dialog itself, so a click on it is a click on the backdrop. */
.sheet {
  margin: auto auto 0; width: 100%; max-width: 560px; max-height: 88dvh; padding: 0;
  border-radius: 18px 18px 0 0; border-bottom: 0;
}
.sheet[open] { animation: sheet-in var(--dur-ui) var(--ease-out); }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
.sheet form { display: grid; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet form::before { content: ""; justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.sh-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.sh-head h2 { font-size: 1.125rem; }
.sh-done { min-height: 44px; margin-right: -8px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--accent); font-weight: 600; white-space: nowrap; }
.sh-row { margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--hair); min-width: 0; }
div.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-row legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; }
.sh-row legend, .sh-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.segs { clear: both; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--sunken); }
.segs label {
  position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 4px; border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out);
}
.segs input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segs label:has(:checked) { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-seg); }
.segs label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sh-toggle {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  font-weight: 600; white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out),
    color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
}
.sh-toggle[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.sh-toggle:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .row-btn:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
  button.pill:hover, .sh-toggle:hover { border-color: var(--fg); }
  .segs label:hover { color: var(--fg); }
}

.empty { padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); font-size: var(--fs-sm); }
.clear-filters {
  display: block; min-height: var(--tap); margin-top: 10px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); font-weight: 600; white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
}
.clear-filters:active { transform: scale(.97); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }

/* ---- card ---- */
.card {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; row-gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--closed);
  border-radius: var(--radius); padding: 12px 14px 12px 12px;
}
.card > :not(.thumb):not(.head) { grid-column: 1 / -1; }
.card.open { border-left-color: var(--open); }
.card.open.short { border-left-color: var(--warn); }
.card.unknown { border-left-color: var(--line-strong); color: var(--muted); }

.thumb { width: 72px; height: 72px; border-radius: var(--r-md); object-fit: cover; background: var(--sunken); display: block; }
.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); text-align: center; }
.ph-primary { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.ph-secondary { font-size: var(--fs-xs); line-height: 1.2; }

.head { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.name { font-size: var(--fs-base); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.where { display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--muted); font-size: var(--fs-xs); }
.where small { font-size: inherit; }
.dist { font-weight: 600; color: var(--fg); }
.status { font-weight: 700; font-size: var(--fs-md); margin-top: 2px; color: var(--muted); }
.card.open .status { color: var(--open); }
.card .status.soon, .card.open.short .status { color: var(--warn); }
.card.unknown .status { font-weight: 500; color: var(--muted); }
.card.unknown .name { font-weight: 600; font-size: var(--fs-base); }
.card.unknown { background: transparent; }
.card.unknown .btn { background: transparent; color: var(--muted); border-color: var(--line-strong); }

/* day bar: 0–24h, green = open, orange strip = sun, line = chosen time */
.daybar-wrap { padding-top: 2px; }
.daybar { position: relative; }
.track { position: relative; background: var(--sunken); overflow: hidden; }
.open-track { height: 10px; border-radius: 5px; }
.sun-track { height: 4px; border-radius: 2px; margin-top: 3px; background: transparent; }
.seg { position: absolute; top: 0; bottom: 0; }
.open-track .seg { background: var(--open-bar); }
.card.closed .open-track .seg { background: var(--closed); }
.sun-track .seg { background: var(--sun-bar); border-radius: 2px; }
.now { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--now); border-radius: 1px; }
.ticks { position: relative; height: 1.1em; margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ticks span { position: absolute; transform: translateX(-50%); line-height: 1.1; }
.ticks span:nth-child(1) { left: 0; transform: none; }
.ticks span:nth-child(2) { left: 25%; }
.ticks span:nth-child(3) { left: 50%; }
.ticks span:nth-child(4) { left: 75%; }
.ticks span:nth-child(5) { right: 0; transform: none; }
.nosun { font-size: var(--fs-xs); color: var(--muted); text-align: right; margin-top: 1px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 6px; background: var(--sunken); color: var(--fg); line-height: 1.5; }
.chip.parking { border: 1px solid var(--line-strong); background: transparent; }
.chip.parking.good { color: var(--open); border-color: currentColor; }
.chip.parking.warn { color: var(--warn); border-color: currentColor; }
.chip.parking.neutral { color: var(--fg); }
.chip.parking.muted { color: var(--muted); }
.chip[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.card.unknown .chip { color: var(--muted); }

.note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; margin-top: -4px; }

.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); text-decoration: none;
  color: var(--fg); font-size: var(--fs-sm); font-weight: 600; background: var(--surface);
}
.btn.primary { border-color: var(--accent); color: var(--accent); }

.memo { font-size: var(--fs-sm); color: var(--fg); overflow-wrap: anywhere; white-space: pre-line; }
.card.unknown .memo { color: var(--muted); }
.photo { display: block; max-width: 100%; height: auto; border-radius: var(--r-md); margin: 4px 0 8px; }
.card.broken { grid-template-columns: 1fr; }

/* ---- data management, editor (behaviour unchanged) ---- */
#manage { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line); }
#manage > summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; color: var(--muted); }
.manage-buttons, .row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.manage-buttons button, .row-actions button, .file-btn {
  min-height: var(--tap); padding: 0 14px; font-size: var(--fs-sm);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--fg);
}
.file-btn { display: inline-flex; align-items: center; }
dialog {
  max-width: 560px; width: calc(100% - 32px); padding: 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg);
}
dialog::backdrop { background: var(--scrim); }
#editFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; }
#editFields label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--muted); }
#editFields input {
  min-width: 0; width: 100%; min-height: var(--tap); padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); color: var(--fg);
}
@media (max-width: 480px) { #editFields { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .expand, .row.is-open > .expand { transition-property: opacity, visibility; } /* fade only, no height change */
  button:active, .btn:active { transform: none !important; } /* press scale off; color transitions stay */
  .dial * { transition: none !important; } /* compass flips instantly */
  .info-fold { transition: none; }
  .more2 .chev, .info-more::after, .blog-more::after { transition: none; } /* chevron flips instantly */
}

/* Korean labels never wrap mid-label */
.btn, .manage-buttons button, .row-actions button, .file-btn, #nowBtn, button.pill { white-space: nowrap; }

.card.stale .status { color: var(--muted); }
.card .stale-note { color: var(--warn); }

.credit {
  position: absolute; right: 10px; bottom: 10px; max-width: 55%; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); line-height: 18px; color: #fff; background: rgb(0 0 0 / .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-decoration: none; overflow-wrap: anywhere;
}
.photo-send {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); white-space: nowrap; text-decoration: none;
  color: var(--accent); background: var(--surface, #fff); border: 1px solid currentColor;
}
.photo-send svg { width: 14px; height: 14px; }
.foot { display: grid; gap: 6px; padding-top: 8px; padding-bottom: 40px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.foot p { text-wrap: pretty; }
.foot a { color: var(--accent); padding-block: 13px; } /* inline padding: a taller touch area, same line layout */
.foot .brand { margin-top: 0; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.foot-link { min-height: var(--tap); padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ab-sec { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.ab-sec[hidden] { display: none; }
.ab-sec h3 { margin: 0; font-size: var(--fs-base); }
.ab-sec p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.ab-sec a { color: var(--accent); padding-block: 13px; }
.foot .brand strong { color: var(--fg); font-weight: 700; }
.load-error { margin: 12px 0; padding: 14px 16px; border: 2px solid var(--warn); border-radius: var(--radius); background: var(--surface); color: var(--fg); font-weight: 600; }
.load-error p { margin: 0 0 10px; text-wrap: pretty; }
.load-error button { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font-weight: 600; white-space: nowrap; }
.load-error button:disabled { opacity: .6; }
.load-failed .tabbar, .load-failed #panel-list, .load-failed #panel-map, .load-failed #panel-log { display: none; }

#breakRow { flex-wrap: wrap; }
.sh-hint { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.chip.break { color: var(--muted); }

.checked { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }

.fee { margin-left: 6px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.l1 .fee { margin-left: 0; }

/* 내 지역 (sheet checkboxes by 권역, ≤5, in 조건 and 내 정보) and 구분 */
#regionClear { margin: 0 0 8px; }
.sh-row .segs + .sh-hint { margin: 8px 0 0; }
.rg-list { clear: both; display: flex; flex-wrap: wrap; gap: 6px; } /* the legend floats in a .sh-row: start below it */
.rg-n { margin-left: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.rg-list label:has(:checked) .rg-n { color: inherit; opacity: .75; }
.rg-list label {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
}
.rg-list input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
/* on = fill + a check mark, not only the colour */
.rg-list label:has(:checked) { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.rg-list label:has(:checked)::before { content: "✓"; content: "✓" / ""; margin-right: 4px; }
.rg-list label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* indoor-only: the word 실내 in place of 양달/응달, a solid edge (방향 모름 is dashed) */
.sunnow.indoor { background: transparent; border: 1px solid var(--line-strong); padding: 0 5px; }
.basis { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .rg-list label:hover { border-color: var(--fg); } }

/* report sheet (reuses .sheet / .segs) */
.rp-field { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.rp-field input, .rp-field textarea {
  width: 100%; min-height: var(--tap); padding: 10px; font: inherit; font-weight: 400;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); color: var(--fg);
}
.rp-field textarea { resize: vertical; white-space: pre-wrap; }
.rp-extra[hidden], .rp-nick[hidden] { display: none; }
.pf-rank[hidden] { display: none; }
.pf-rank-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--fs-sm); }
.pf-rank-list b { display: inline-block; min-width: 2.2em; color: var(--accent); }
.rp-chat-name { user-select: all; -webkit-user-select: all; color: var(--fg); overflow-wrap: anywhere; } /* one tap selects the whole name, to copy */
/* the foot of a card: 정보가 달라요 · 오픈채팅방 알려주기, quiet text links (the 44px height is the tap area) */
.help-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 18px; margin-top: 6px; } /* right-aligned: out of the way of the card's content */
.help-link { min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rp-status { min-height: 1.4em; margin: 6px 0; font-size: var(--fs-sm); white-space: pre-line; }
.rp-alt { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent); font-weight: 600; white-space: nowrap; }
.rp-send { min-height: var(--tap); border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font-weight: 600; white-space: nowrap; }
.rp-send:disabled { opacity: .5; }
.rp-name { color: var(--fg); font-size: var(--fs-base); font-weight: 600; overflow-wrap: anywhere; }

/* ---- 내 정보 (header button + sheet) ---- */
.top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.top .wrap > :not(h1):not(.me-btn) { grid-column: 1 / -1; }
.me-btn { margin-right: -10px; color: var(--fg); }
.me-btn svg { width: 24px; height: 24px; }
.pf-backup { flex-wrap: wrap; }
.pf-btns { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.pf-btns .sh-toggle { flex: 1 1 8rem; }
.pf-status { flex-basis: 100%; min-height: 1.5em; font-size: var(--fs-sm); color: var(--muted); }
.pf-link { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--tap); color: var(--fg); font-weight: 600; text-decoration: none; }
button.pf-link { width: 100%; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.pf-ios { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.pf-link span { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); text-align: right; }
.pf-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 기록 추가 sheet ---- */
.la-pick legend { margin-bottom: 8px; }
.la-row { flex-wrap: wrap; }
.la-field { display: grid; gap: 6px; flex-basis: 100%; clear: both; }
.la-field input, .la-field textarea {
  width: 100%; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--bg); color: var(--fg); font: inherit;
}
.la-field textarea { resize: vertical; white-space: pre-wrap; }
.la-chips { display: flex; flex-wrap: wrap; gap: 8px; clear: both; margin-bottom: 10px; }
.la-chips[hidden] { display: none; }
div.la-when { row-gap: 0; }
.la-when .sh-label { flex-basis: 100%; margin: 0 0 8px; }
.la-when .la-chips { flex-basis: 100%; margin-bottom: 0; }
.la-datewrap { position: relative; display: inline-flex; max-width: 100%; }
.la-datewrap:focus-within .la-chip { outline: 2px solid var(--accent); outline-offset: 2px; }
.la-date { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* 칩 위에 투명하게: 탭이 네이티브 달력을 직접 연다 */
.la-chip { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.la-chip.fixed { pointer-events: none; background: var(--sunken); border-color: var(--line); color: var(--fg); } /* 암장이 정해진 채 열림: 눌리는 칩(검정 ✓)과 달리 회색 이름표, 바꿀 수 없음 */
.la-field input::placeholder { color: var(--muted); opacity: 1; } /* 기본 placeholder 는 대비 4.1:1 */
.la-search { clear: both; }
.la-picks { list-style: none; margin: 8px 0 0; padding: 0; max-height: calc(var(--tap) * 5); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--r-md); }
.la-picks li + li { border-top: 1px solid var(--hair); }
.la-hit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; min-height: var(--tap); padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.la-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.la-picks .pn { font-weight: 500; }
.la-picks .pr { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.la-picks .pd { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; } /* 1.2km */
.la-picks .none { padding: 12px; font-size: var(--fs-sm); color: var(--muted); }
.la-err { flex-basis: 100%; margin-top: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--warn); }
.la-err::before { content: "! "; }
/* 저장 바: 시트가 스크롤돼도 항상 보인다(dialog 가 스크롤 상자). 음수 아래 마진 = 폼의 아래 안쪽 여백까지 덮는다. */
.la-foot { position: sticky; bottom: 0; z-index: 1; display: grid; gap: 8px; margin: 0 -16px calc(-16px - env(safe-area-inset-bottom)); padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--surface); box-shadow: 0 -6px 8px -8px rgb(0 0 0 / .25); }
.la-need { margin: 0; text-align: center; }
.la-need[hidden] { display: none; }
.la-save { min-height: var(--tap); border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 16px; }
.la-save:disabled { background: var(--sunken); color: var(--muted); }
/* 방문 시각: the wall's hours of that day on the 06–24 axis (휴게 hatched). The bar (44px tall, full width) takes taps
   and sideways drags itself (log-view.js pointer handlers; pan-y keeps vertical swipes scrolling the sheet); an invisible
   range input over it, deaf to pointers, serves arrow keys and screen readers. .vt-mark draws the pick. */
div.la-time { display: block; }
.la-time { border-top: 0; padding-top: 0; } /* 언제 칩 바로 아래 한 줄로 이어진다 */
.la-time-toggle { margin: 0 -8px 0 auto; }
#la-time-body[hidden] { display: none; }
.la-time-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; }
.la-time-say { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.la-time-say.unset { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.vt { position: relative; height: var(--tap); margin-top: 6px; border-radius: var(--r-sm); cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.vt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vt-trk { position: absolute; left: 0; right: 0; top: 14px; height: 16px; border-radius: 4px; background: var(--sunken); }
.vt-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--open-bar); }
.vt-future { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 0 4px 4px 0; background: var(--surface); opacity: .7; pointer-events: none; }
.vt-brk { position: absolute; top: 0; bottom: 0; border: 1px solid var(--line-strong); border-radius: 2px;
  background-image: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 6px); }
.vt-trk.off { border: 1px solid var(--line); background-image: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 6px); }
.vt-mark { position: absolute; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--fg); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.vt-mark::before { content: ""; position: absolute; left: 50%; top: -3px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 2px var(--surface); }
.vt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
/* a 1px thumb keeps the input's value ↔ position mapping the same as the bar's axis */
.vt input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: var(--tap); }
.vt input::-moz-range-thumb { width: 1px; height: var(--tap); border: 0; }
.vt-axis { position: relative; height: 1.4em; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.vt-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.vt-axis span:first-child { transform: none; }
.vt-axis span:last-child { transform: translateX(-100%); }
.la-time-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 4px; }
.la-time-ft .sh-hint { flex: 1 1 12rem; }
.la-time-clear { margin-left: auto; }
div.la-crowd { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.la-crowd-q { flex-basis: 100%; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.la-crowd-q span { font-weight: 400; }
.la-crowd .crowd-pills { flex-wrap: wrap; }
.la-more { display: block; }
.la-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); font-weight: 600; cursor: pointer; list-style: none; }
.la-more > summary::-webkit-details-marker { display: none; }
.la-more > summary::after { content: "▾"; content: "▾" / ""; margin-left: 6px; color: var(--muted); }
.la-more[open] > summary::after { content: "▴"; content: "▴" / ""; }
.la-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.la-more-note { margin-left: auto; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.la-more > summary + .sh-row { border-top: 0; }

/* ---- 다녀왔어요 / 내 기록 (open card) and "✓ 다녀옴 N번" (list row) ---- */
.been { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
/* 세팅일이 바뀌었어요 (♥ walls, setting.js): words + ✦ in an outlined pill, not colour alone */
.setnew { flex: none; display: inline-block; width: fit-content; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }
p.setnew { margin-top: 8px; }
/* the right end of the 오늘 운영 line: the link pills' size (34px seen, 44px tap via ::after), outline in the text colour */
.expand-in .been-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; min-height: 0; margin-left: auto; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--fg);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.expand-in .been-btn svg { flex: none; width: 15px; height: 15px; }
.expand-in .been-btn::after { content: ""; position: absolute; inset: -5px 0; }
.expand-in .been-btn:active { transform: scale(.97); }
.been-stamp { flex: none; width: 20px; height: 20px; background: var(--fg); }
.been-stamp.stamp-in { animation: stamp-in 120ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .been-stamp.stamp-in { animation: none; } }
.mylog { margin-top: 12px; }
.mylog-note { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.mylog-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--fs-sm); }
.mylog-list li { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hair); }
.ml-d { flex: none; color: var(--muted); white-space: nowrap; }
.ml-m { min-width: 0; overflow-wrap: anywhere; }

/* ---- 기록 tab ---- */
#panel-log { margin-top: 14px; display: grid; gap: 14px; }
/* 내 활동: the 등급 seal + name, the bar to the next tier, the numbers */
.lg-act { padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.lg-act-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; }
.lg-act-rank { flex: 1 1 5.5rem; min-width: 0; }
.lg-act-rank b { font-size: var(--fs-lg); color: var(--open); }
.lg-act-rank p:first-child { font-weight: 600; }
.lg-act-next { font-size: var(--fs-sm); color: var(--muted); }
.lg-track { height: 10px; margin-top: 12px; border-radius: var(--r-pill); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lg-fill { height: 100%; border-radius: inherit; background: var(--open); }
.lg-bar-end { display: flex; justify-content: space-between; margin: 4px 2px 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.lg-act-meta { margin: 8px 2px 0; font-size: var(--fs-sm); color: var(--muted); }
.lg-info { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; vertical-align: -5px; border: 0; background: none; color: var(--muted); }
.lg-info::after { content: ""; position: absolute; inset: -10px; }
.lg-info svg { width: 20px; height: 20px; }
.ri-list { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.ri-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--hair); }
.ri-name { display: grid; gap: 1px; min-width: 0; }
.ri-list b { font-size: var(--fs-base); }
.ri-name small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.ri-list span, .ri-list em { font-size: var(--fs-sm); font-style: normal; color: var(--muted); white-space: nowrap; }
.ri-list em { min-width: 3.5rem; text-align: right; font-weight: 600; }
.ri-now b, .ri-now em { color: var(--open); }
.ri-done em { color: var(--open); }
.ri-todo b { color: var(--muted); font-weight: 600; }
.ri-dots { display: inline-flex; gap: 3px; }
.ri-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-strong); }
.ri-dots i.on { border-color: var(--open); background: var(--open); }
.lg-act small { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.lg-act-none { display: flex; align-items: center; gap: 12px; padding: 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.lg-act-none .rk-seal { width: 44px; height: 44px; margin: 8px 20px 8px 22px; }
/* the 등급 seal: the 해벽 mark in a round rim, ringed by the sun's path — a thin tilted orbit (upper half behind the face, lower
   half in front) with 5 sun stops on the front arc (in front of the face), one more filled per tier, 전국 완주 draws the whole orbit solid;
   -1 (none yet) a dashed face with the empty orbit. The orbit box is 174% x 61% of the seal, tilted -24deg; margins reserve its reach. */
.rk-seal { --rk-line: color-mix(in srgb, var(--muted) 60%, transparent); position: relative; flex: none; width: 56px; height: 56px; margin: 10px 22px 10px 20px; }
.rk-face { position: absolute; inset: 0; z-index: 1; border: 2px solid var(--open); border-radius: 50%; background: var(--surface); color: var(--open); box-shadow: 0 0 0 3px var(--surface); } /* page-colour stroke: the orbit behind stops short of the rim */
.rk-face .stamp { position: absolute; left: 24%; top: 24%; width: 52%; height: 52%; }
.rk-orb { position: absolute; left: -37%; top: 19.5%; width: 174%; height: 61%; border: 1px solid var(--rk-line); border-radius: 50%; transform: rotate(-24deg); pointer-events: none; }
.rk-back { z-index: 0; clip-path: inset(-3px -3px 50% -3px); }
.rk-front { z-index: 2; clip-path: inset(50% -3px -3px -3px); box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 2px var(--surface); } /* page-colour halo both sides: the line weaves over the rim */
.rk-seal.complete .rk-orb:not(.rk-dots) { border: 1.5px solid var(--open); }
.rk-dots { z-index: 3; border: 0; }
.rk-dot { position: absolute; width: calc(6px * var(--s, 1)); height: calc(6px * var(--s, 1)); margin: calc(-3px * var(--s, 1)) 0 0 calc(-3px * var(--s, 1)); border-radius: 50%; border: 1px solid var(--rk-line); background: var(--surface); box-shadow: 0 0 0 2px var(--surface); } /* the page-colour halo cuts the orbit line behind the dot */
.rk-dot.on { width: calc(9px * var(--s, 1)); height: calc(9px * var(--s, 1)); margin: calc(-4.5px * var(--s, 1)) 0 0 calc(-4.5px * var(--s, 1)); border: 0; background: var(--open); }
.rk-seal[data-level="-1"] .rk-face { border-color: var(--line-strong); border-style: dashed; }
.rk-seal[data-level="-1"] .stamp { left: 30%; top: 30%; width: 40%; height: 40%; background: var(--muted); opacity: .5; }
.rk-seal.stamp-in { animation: stamp-in 120ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .rk-seal.stamp-in { animation: none; } }
.lg-add {
  min-height: var(--tap); padding: 0 14px; border: 1px solid var(--accent); border-radius: var(--r-pill); background: var(--surface);
  color: var(--accent); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
}
.lg-backup { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.lg-backup button { min-height: var(--tap); padding: 0 8px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; }
.lg-empty { padding: 24px 16px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.lg-empty h3 { font-size: var(--fs-lg); }
.lg-empty p { margin: 6px 0 16px; color: var(--muted); font-size: var(--fs-sm); }
.lg-empty-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* 올해 heatmap: weeks as columns, 일~토 as rows; the grid never scrolls sideways — cells shrink with the width. Empty days are outlined, a record day is filled (3 shades) */
.hm { padding: 0 8px 4px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.hm > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--tap); padding: 0 8px; list-style: none; cursor: pointer; font-size: var(--fs-base); font-weight: 600; }
.hm > summary::-webkit-details-marker { display: none; }
.hm > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 2px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease-out); }
.hm[open] > summary::after { transform: translateY(5px) rotate(-135deg); }
.hm > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hm-sum { margin-left: auto; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.hm-months, .hm-grid { display: grid; grid-template-columns: repeat(var(--weeks), minmax(0, 1fr)); gap: 1px; }
.hm-months { margin-bottom: 3px; font-size: var(--fs-xs); line-height: 1.2; color: var(--muted); white-space: nowrap; }
.hm-grid { grid-template-rows: repeat(7, auto); grid-auto-flow: column; }
.hm-cell { display: block; aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 2px; background: none; }
.hm-cell.future { border-style: dotted; opacity: .5; }
.hm-pad { display: block; aspect-ratio: 1; }
.hm-cell[data-level] { border-color: var(--accent); background: var(--accent); }
.hm-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.hm-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 65%, transparent); }
/* month calendar: 일~토, cells at least 44px; a record day carries the 해벽 mark as an ink stamp (+N when 2+), today a --fg border, the picked day an accent ring + tint */
.cal { padding: 8px 8px 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.cal-head { display: flex; align-items: center; gap: 4px; }
.cal-head h3 { flex: 1; text-align: center; font-size: var(--fs-base); }
.cal-nav, .cal-today { min-width: var(--tap); min-height: var(--tap); border: 0; border-radius: var(--r-md); background: none; color: var(--fg); font-size: var(--fs-lg); line-height: 1; }
.cal-today { padding: 0 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); white-space: nowrap; }
.cal-legend { margin: 6px 4px 0; text-align: right; font-size: var(--fs-xs); color: var(--muted); }
.cal-share { display: block; margin: 8px auto 0; min-height: var(--tap); padding: 0 16px; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ms-prev { display: grid; place-items: center; margin: 4px 0 12px; }
.ms-tools { display: flex; align-items: center; gap: 4px; }
.ms-names { min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); }
.ms-share { color: var(--accent); }
.ms-share:disabled { color: var(--muted); opacity: .45; cursor: default; }
.ms-hint { text-align: center; }
.ms-prev canvas { width: min(56vw, 240px); height: auto; aspect-ratio: 9 / 16; border-radius: 8px; background: #17191c; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.ms-say:empty { display: none; }
.ms-say { margin-top: 4px; text-align: center; }
.cal-sum { margin: 2px 0 6px; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { padding: 4px 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.cal-grid td { padding: 2px; text-align: center; }
.cal-day {
  position: relative; display: grid; place-items: center; align-content: center; gap: 1px; width: 100%; min-height: max(44px, 2.9rem); padding: 2px 0;
  border: 1px solid transparent; border-radius: var(--r-md); background: none; color: var(--fg); font-size: var(--fs-sm); line-height: 1.1;
}
.cal-day.future { color: var(--muted); }
.cal-n { font-weight: 600; }
.cal-badge { position: absolute; bottom: 1px; right: 1px; z-index: 2; min-width: 15px; padding: 0 3px; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 700; line-height: 15px; }
.cal-day[aria-current="date"] { border: 2px solid var(--fg); }
td[aria-selected="true"] > .cal-day { background: color-mix(in srgb, var(--open) 14%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
/* the stamp: the logo file (or the wall's own, via --stamp-src from src/stamp.js) as a one-colour mask in the --open ink; the calendar's stamp is pressed over the day number and covers it (the button's aria-label carries the date) */
.stamp { display: block; background: var(--open); -webkit-mask: var(--stamp-src, url(assets/haebyeok-mark.svg)) center / contain no-repeat; mask: var(--stamp-src, url(assets/haebyeok-mark.svg)) center / contain no-repeat; }
.cal-stamp { position: absolute; z-index: 2; pointer-events: none; left: 50%; top: 50%; width: 68%; max-width: 42px; aspect-ratio: 1; margin: calc(max(-21px, -34%)) 0 0 calc(max(-21px, -34%)); }
.cal-stamp.stamp-in { animation: stamp-in 120ms var(--ease-out) both; }
@keyframes stamp-in { from { transform: scale(1.15); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cal-stamp.stamp-in { animation: none; } }
.cal-day .cal-n { position: relative; z-index: 1; }
.rec-stamp { position: relative; flex: none; align-self: center; width: 32px; height: 32px; margin: 0 0 0 10px; }
/* the record's seal: mark in a rim; a 2nd rim = first visit to the wall; the sun dot rides the rim (filled sunny, hollow shade) */
.seal { box-sizing: border-box; border: 1.5px solid var(--open); border-radius: 50%; }
.seal.first { box-shadow: inset 0 0 0 1.5px var(--bg), inset 0 0 0 3px var(--open); } /* a second rim inside: the stamp keeps its size */
.seal > .stamp { position: absolute; inset: 18%; transform: rotate(8deg); } /* every stamp leans the same way: pressed a little clockwise */
.seal > .sun { position: absolute; width: 22%; height: 22%; min-width: 7px; min-height: 7px; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid var(--open); }
.seal > .sun.lit { background: var(--open); box-shadow: 0 0 0 1.5px var(--bg); }
.seal > .sun.shade { background: var(--bg); }
.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lg-day h3 { font-size: var(--fs-base); outline-offset: 2px; }
.lg-day h3 span { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.lg-recs { list-style: none; margin: 8px 0 0; padding: 0; border-block: 1px solid var(--line); background: var(--surface); }
.lg-recs li { display: flex; align-items: stretch; border-top: 1px solid var(--hair); }
.lg-recs li:first-child { border-top: 0; }
.lg-open { flex: 1; min-width: 0; display: grid; gap: 1px; min-height: var(--tap); padding: 10px 12px; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; }
.lg-name { font-weight: 600; overflow-wrap: anywhere; }
.lg-region { font-size: var(--fs-xs); color: var(--muted); }
.lg-memo { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-del { flex: none; min-width: var(--tap); min-height: var(--tap); padding: 0 12px; border: 0; background: none; color: var(--warn); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.lg-open:active, .lg-del:active, .cal-nav:active, .cal-today:active, .cal-day:active { background: var(--sunken); }
.lg-open:focus-visible, .lg-del:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lg-day .sh-hint { margin-top: 6px; }

/* ---- toast: a line at the foot, above the home indicator; 실행 취소 inside ---- */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1000; max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: var(--radius); background: var(--fg); color: var(--bg);
  font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-float);
  top: auto; width: auto; height: auto; border: 0; overflow: visible; /* it is a popover (log-view.js): drop the UA box */
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.toast.on { opacity: 1; transform: none; pointer-events: auto; }
.toast p { flex: 1; min-height: var(--tap); display: flex; align-items: center; }
#toast-act { flex: none; min-height: var(--tap); padding: 0 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--bg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
#toast-act:focus-visible { outline: 2px solid var(--bg); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; transform: none; } }
@media (hover: hover) and (pointer: fine) { .lg-open:hover, .cal-day:hover, .cal-nav:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); } }

/* 같이 가요: the share menu, the invite sheet, and the banner an invite link opens with. Every control is --tap high. */
.sm-wall { margin: 0; padding: 0 0 8px; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.inv-when { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-top: 10px; }
.inv-when .inv-field { margin-top: 0; }
.inv-count { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.inv-kind { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.inv-kind button { min-height: var(--tap); padding: 0 14px; border: 0; background: var(--surface); color: var(--fg); font: inherit; font-weight: 600; white-space: nowrap; }
.inv-kind button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.inv-field input, .inv-field select { width: 100%; min-height: var(--tap); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: inherit; }
.inv-check { min-height: 1.4em; margin: 0; padding: 8px 0; font-size: var(--fs-sm); }
.inv-alt { min-height: var(--tap); padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.inv-tags { clear: both; display: flex; flex-wrap: wrap; gap: 8px; } /* the legend floats in a .sh-row: start below it */
.inv-pic-box { position: relative; width: min(540px, 100%); }
.inv-pic-box img { transition: opacity 0.15s; }
.inv-pic.stale img { opacity: 0.4; }
.inv-pic-save { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; }
.inv-preview { margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); font: inherit; font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.inv-say { min-height: 1.4em; margin: 0; padding-top: 6px; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; }
.inv-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.inv-send, .inv-copy, .inv-image { min-height: var(--tap); border-radius: var(--radius); font: inherit; font-weight: 700; }
.inv-send { display: block; width: 100%; border: 0; background: var(--accent); color: var(--on-accent); }
.inv-copy, .inv-image { border: 1px solid var(--line-strong); background: transparent; color: var(--fg); white-space: nowrap; }
.inv-save { display: block; width: 100%; min-height: var(--tap); margin-top: 8px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; white-space: nowrap; }
.inv-save:disabled { opacity: 0.6; }
.inv-why { margin: 6px 0 0; }
.inv-why[hidden] { display: none; }
.inv-why + .inv-actions { margin-top: 8px; }
.inv-kakao[aria-disabled="true"] { opacity: 0.5; }
.inv-kakao { display: block; width: 100%; margin-top: 8px; }
.inv-kakao-note { margin: 6px 0 0; font-size: var(--fs-sm); }
.inv-link-hint { margin-top: 8px; font-size: var(--fs-sm); }
.inv-pic { margin: 10px 0 0; }
.inv-pic[hidden] { display: none; }
.inv-pic img { display: block; width: min(540px, 100%); height: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.inv-pic figcaption { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); text-wrap: pretty; }
:is(.inv-kind button, .inv-alt, .inv-send, .inv-copy, .inv-image, .inv-save, .ib-close, .ib-again, .inv-field input, .inv-field select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.invite-banner { margin: 10px 0 0; padding: 12px 14px 4px; border: 1px solid var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.invite-banner[hidden] { display: none; }
.ib-title { margin: 0; font-weight: 700; color: var(--accent); }
.ib-meta { margin: 2px 0 0; font-size: var(--fs-sm); }
.ib-note { margin: 4px 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ib-from { color: var(--muted); font-size: var(--fs-xs); }
.ib-again { min-height: var(--tap); margin: 4px 12px 0 0; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); font: inherit; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.ib-again[hidden] { display: none; }
.ib-close { min-height: var(--tap); margin-left: -2px; padding: 0 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
div.sh-row.inv-prev { display: block; } /* (a div.sh-row is a flex row elsewhere; this one stacks the label, the text and the hint) */
.inv-spin { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .inv-spin { animation: inv-spin 800ms linear infinite; } }
@keyframes inv-spin { to { transform: rotate(360deg); } }

/* loading screen: the vertical lockup (light or dark) on the app background until the first list is drawn */
#boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--logo-paper); transition: opacity var(--dur-ui) var(--ease-out); animation: boot-out 0s 8s forwards; }
#boot img { width: min(32vw, 160px); height: auto; animation: boot-in 200ms var(--ease-out) both; } /* smaller and centred, like the OS start screen's mark; it fades in rather than appearing */
#boot .dk { display: none; }
:root[data-theme="dark"] #boot { background: var(--bg); }
:root[data-theme="dark"] #boot .lt { display: none; }
:root[data-theme="dark"] #boot .dk { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #boot { background: var(--bg); }
  :root:not([data-theme="light"]) #boot .lt { display: none; }
  :root:not([data-theme="light"]) #boot .dk { display: block; }
}
#boot.done { opacity: 0; pointer-events: none; }
@keyframes boot-in { from { opacity: 0; } }
@keyframes boot-out { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* never trap the page if the script fails */
@media (prefers-reduced-motion: reduce) { #boot { transition: none; } #boot img { animation: none; } }

/* 한 줄 타임라인 (src/board-view.js) */
.bd-box { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.bd-title { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.bd-list { list-style: none; margin: 6px 0 0; padding: 0; }
.bd-post { padding: 6px 0; border-bottom: 1px solid var(--hair); }
.bd-text { font-size: var(--fs-md); overflow-wrap: break-word; }
.bd-by { font-weight: 600; }
.bd-meta, .bd-status, .bd-count, .bd-hint { font-size: var(--fs-xs); color: var(--muted); }
.bd-status:empty { display: none; }
.bd-status { margin-top: 6px; }
.bd-rep, .bd-more { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-xs); text-decoration: underline; white-space: nowrap; cursor: pointer; }
.bd-rep:disabled { text-decoration: none; cursor: default; }
.bd-more { display: block; margin-top: 6px; min-height: var(--tap); }
.bd-more[hidden], .bd-retry[hidden] { display: none; }
.bd-form { display: grid; gap: 6px; margin-top: 8px; }
.bd-row { display: flex; gap: 6px; align-items: center; }
.bd-foot { justify-content: space-between; }
.bd-nick, .bd-body { min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); color: var(--fg); font: inherit; }
.bd-nick { flex: 0 0 6.5em; width: 6.5em; }
.bd-body { flex: 1; min-width: 0; }
.bd-hp[hidden] { display: none; }
.bd-send { min-height: var(--tap); padding: 0 20px; border: 1px solid var(--fg); border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font: inherit; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; }
.bd-send:disabled { opacity: .45; cursor: default; }
.bd-box:focus { outline: none; }
.bd-all { color: var(--accent); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
/* the board page: a full-height sheet; the form comes first so a long list never hides it */
.board-page { height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
.bp-inner { display: grid; align-content: start; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); }
.bp-back { margin-left: -8px; margin-right: 0; }
.bp-title { flex: 1; min-width: 0; margin-left: 4px; overflow-wrap: anywhere; }
.bp-title:focus { outline: none; }
.sh-head:has(.bp-back) { justify-content: flex-start; }
.bd-thread { margin: 4px 0 6px 10px; padding-left: 10px; border-left: 2px solid var(--hair); }
.bd-replies { list-style: none; margin: 0; padding: 0; }
.bd-reply { padding: 4px 0; border-bottom: 0; }
.bd-rp[aria-expanded="true"] { color: var(--fg); }
.bd-full { display: flex; flex-direction: column; margin-top: 0; padding-top: 0; border-top: 0; }
.bd-full .bd-form { order: -1; margin: 0 0 8px; padding: 0; }
.bd-full .bd-form::before { content: none; }