/* Restroom — oodot 디자인 시스템(tokens.css·components.css) 위에 이 화면 것만 더한다.
 * 2026-10-30 시안 A(차분한 지도 + 아래 판)로 다시 짬. */

[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--od-bg-canvas);
  color: var(--od-text);
  font-family: var(--od-font);
  font-size: var(--od-size-body);
  line-height: var(--od-leading-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; }

.app { position: fixed; inset: 0; --float: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08); }
.map { position: absolute; inset: 0; background: #f1f1ee; z-index: 0; }

/* ── 위: 찾기·계정·거르개 ─────────────────────────────────────────────── */
.topbar { position: absolute; z-index: 25; }
.topbar__row { display: flex; align-items: center; gap: 8px; }
.brand { display: none; font-size: var(--od-size-headline); font-weight: var(--od-weight-bold); letter-spacing: -0.01em; color: var(--od-text); text-decoration: none; }
.search { position: relative; flex: 1; min-width: 0; }
.search__icon {
  position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none;
  background: var(--od-text-tertiary);
  -webkit-mask: var(--icon-search) center / contain no-repeat; mask: var(--icon-search) center / contain no-repeat;
}
.search__input {
  width: 100%; height: 48px; padding: 0 16px 0 44px;
  border: 0; border-radius: 14px; background: var(--od-bg);
  font: inherit; font-size: 15px; color: var(--od-text);
}
.search__input:focus { outline: none; box-shadow: var(--od-shadow-focus); }
.account { position: relative; flex: none; }
.avatar-btn, .login-btn {
  height: 48px; min-width: 48px; padding: 0 14px; border: 0; border-radius: 14px;
  background: var(--od-bg); color: var(--od-text); cursor: pointer;
  font-size: 15px; font-weight: var(--od-weight-semibold);
}
.chips { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 17px; cursor: pointer;
  background: var(--od-bg); color: var(--od-text); font-size: 13px; font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.chip[aria-selected="true"] { background: var(--od-gray-900); color: #fff; font-weight: 600; }

/* ── 판 ───────────────────────────────────────────────────────────────── */
.panel { position: absolute; z-index: 20; display: flex; flex-direction: column; background: var(--od-bg); }
.panel__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 24px; }
.panel__foot { flex: none; display: flex; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--od-border-subtle); background: var(--od-bg); }
.panel__grip { display: none; }

@media (max-width: 899.98px) {
  .topbar { left: 16px; right: 16px; top: calc(16px + env(safe-area-inset-top)); }
  .search__input, .avatar-btn, .login-btn { box-shadow: var(--float); }
  .app:not([data-view="list"]):not([data-view="search"]) .topbar { display: none; }

  .panel {
    left: 0; right: 0; bottom: 0; height: calc(100% - 96px);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -1px 0 rgba(0,0,0,.06), 0 -8px 30px rgba(0,0,0,.08);
    transform: translateY(calc(100% - var(--peek, 300px)));
    transition: transform var(--od-duration-slow) var(--od-ease-out);
  }
  .panel[data-size="mini"] { --peek: 120px; }
  .panel[data-size="half"] { --peek: 62%; }
  /* 자세히는 판을 밀어 내리지 않고 키를 줄인다 — 밀어 내리면 맨 아래 버튼 줄이 화면 밖으로 나간다 */
  .panel[data-size="detail"] { transform: none; height: calc(100% - 196px); }
  .panel[data-size="full"] { transform: translateY(0); }
  .panel.is-dragging { transition: none; }
  .panel__grip {
    flex: none; display: flex; justify-content: center; align-items: center;
    height: 24px; width: 100%; border: 0; background: none; padding: 0; cursor: grab; touch-action: none;
  }
  .panel__grip span { width: 36px; height: 5px; border-radius: 3px; background: var(--od-gray-300); }
  .panel__foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

  .fabs { right: 16px; bottom: calc(var(--peek, 300px) + 16px); }
  .panel[data-size="mini"] ~ .fabs { bottom: 136px; }
  .panel[data-size="half"] ~ .fabs, .panel[data-size="detail"] ~ .fabs, .panel[data-size="full"] ~ .fabs { opacity: 0; pointer-events: none; }
  .pick__bar { bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  .topbar { left: 0; top: 0; width: 400px; padding: 20px 20px 12px; background: var(--od-bg); }
  .topbar__row { flex-wrap: wrap; row-gap: 14px; }
  .brand { display: block; flex: 1; }
  .account { order: 2; }
  .search { order: 3; flex-basis: 100%; }
  .search__input { height: 42px; background: var(--od-bg-sunken); border-radius: 12px; }
  .avatar-btn, .login-btn { height: 36px; min-width: 36px; border-radius: 18px; font-size: 14px; }
  .avatar-btn { background: var(--od-gray-800); color: #fff; }
  .login-btn { border: 1px solid var(--od-border-strong); }
  .chip { background: var(--od-bg-sunken); box-shadow: none; }
  .panel { top: 0; bottom: 0; left: 0; width: 400px; border-right: 1px solid var(--od-border); padding-top: 166px; }
  .app:not([data-view="list"]):not([data-view="search"]) .chips { display: none; }
  .app:not([data-view="list"]):not([data-view="search"]) .panel { padding-top: 122px; }
  .map, .pick { left: 400px; }
  .fabs { right: 20px; bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { .panel, .fabs { transition: none; } }

/* ── 메뉴 ─────────────────────────────────────────────────────────────── */
.menu {
  position: absolute; z-index: var(--od-z-menu);
  min-width: 200px; padding: 4px;
  background: var(--od-bg); border: 1px solid var(--od-border); border-radius: var(--od-radius-lg);
  box-shadow: var(--od-shadow-3);
}
/* 메뉴는 body 에 붙여 화면 좌표로 띄운다 — 스크롤되는 판 안에 두면 판 가장자리에서 잘린다 */
.menu { position: fixed; }
.menu__head { padding: 8px 12px; border-bottom: 1px solid var(--od-border-subtle); margin-bottom: 4px; font-size: var(--od-size-subhead); font-weight: 600; }
.menu__item {
  display: flex; width: 100%; align-items: center; gap: 8px;
  padding: 0 12px; height: 40px;
  border: 0; border-radius: var(--od-radius-md); background: none; color: var(--od-text);
  font-size: var(--od-size-subhead); text-align: left; cursor: pointer; text-decoration: none;
}
.menu__item:hover { background: var(--od-bg-hover); }
.menu__item--danger { color: var(--od-text-danger); }
.menu__item[aria-checked="true"] { font-weight: 600; }
.menu__item[aria-checked="true"]::after { content: ""; margin-left: auto; width: 16px; height: 16px; background: var(--od-accent); -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat; }
.menu__note { padding: 4px 12px 8px; font-size: 12px; color: var(--od-text-tertiary); max-width: 240px; }
.rel { position: relative; flex: none; }

/* ── 목록 ─────────────────────────────────────────────────────────────── */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 8px; }
.list-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.save-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 0; border-radius: 18px; background: var(--od-accent); color: #fff; cursor: pointer;
  font-size: 14px; font-weight: 600;
}
.save-btn:hover { background: var(--od-accent-hover); }
.save-btn::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--icon-plus) center / contain no-repeat; mask: var(--icon-plus) center / contain no-repeat; }
.list { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--od-border-subtle);
  background: none; text-align: left; cursor: pointer; color: var(--od-text);
}
.list li:last-child .row { border-bottom: 0; }
.row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row__name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__meta { font-size: 13px; color: var(--od-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__dist { flex: none; font-size: 14px; color: var(--od-text-secondary); font-variant-numeric: tabular-nums; }
.list li:first-child .row__dist { color: var(--od-text-accent); font-weight: 600; }
.row:hover .row__name { color: var(--od-text-accent); }
.note { padding: 28px 0; text-align: center; color: var(--od-text-secondary); font-size: var(--od-size-subhead); }
.note p { margin: 0 0 12px; }
.back-row { display: flex; align-items: center; gap: 4px; margin: 0 0 4px -10px; font-size: 13px; color: var(--od-text-secondary); }

/* ── 자세히 ──────────────────────────────────────────────────────────── */
.d-head { display: flex; align-items: flex-start; gap: 8px; padding-top: 6px; }
.d-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.d-name { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; word-break: keep-all; }
.d-meta { margin: 0; font-size: 14px; color: var(--od-text-secondary); white-space: pre-wrap; word-break: keep-all; }
.d-flag { margin: 8px 0 0; font-size: 13px; color: var(--od-text-warning); }
.icon-btn {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 18px; background: var(--od-bg-subtle);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--od-gray-700);
}
.icon-btn:hover { background: var(--od-bg-sunken); }
.icon-btn--lg { width: 48px; height: 48px; border-radius: 12px; background: var(--od-bg); border: 1px solid var(--od-border-strong); color: var(--od-text); }

.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.code-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 16px; border-radius: 16px; background: var(--od-bg-subtle);
}
.code-card__label { font-size: 13px; font-weight: 600; color: var(--od-text-secondary); }
.code-card__value {
  display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: copy;
  font-family: "JetBrains Mono", var(--od-font-mono); font-size: var(--code-size, 30px); line-height: 1.15; font-weight: 600;
  letter-spacing: 0.04em; word-break: break-all; color: var(--od-text);
}
.code-card__value.is-doubt { color: var(--od-text-tertiary); }
.code-card__state { font-size: 12px; color: var(--od-text-tertiary); }
.code-card__state.is-ok { color: var(--od-text-success); }
.code-card__state.is-doubt { color: var(--od-text-warning); }
.code-card__empty { font-size: 15px; color: var(--od-text-tertiary); padding: 6px 0 2px; }
.code-card__votes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.vote {
  height: 36px; padding: 0 6px; border: 1px solid var(--od-border-strong); border-radius: 10px;
  background: var(--od-bg); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.vote[aria-pressed="true"] { background: var(--od-gray-900); border-color: var(--od-gray-900); color: #fff; }
.vote--down[aria-pressed="true"] { background: var(--od-danger); border-color: var(--od-danger); }
.vote__n { font-weight: 500; opacity: .7; margin-left: 3px; font-variant-numeric: tabular-nums; }
.code-card__mine { display: flex; gap: 12px; margin-top: 2px; }
.text-btn { border: 0; background: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--od-text-accent); }

.rows { margin-top: 20px; border-top: 1px solid var(--od-border-subtle); }
.line {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 0; border: 0; border-bottom: 1px solid var(--od-border-subtle);
  background: none; text-align: left; cursor: pointer; color: var(--od-text);
}
.line__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.line__title { font-size: 15px; font-weight: 600; }
.line__sub { font-size: 13px; color: var(--od-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { flex: none; width: 16px; height: 16px; background: var(--od-text-disabled); -webkit-mask: var(--icon-chev) center / contain no-repeat; mask: var(--icon-chev) center / contain no-repeat; transition: transform var(--od-duration-fast); }
.line[aria-expanded="true"] .chev { transform: rotate(90deg); }
.mono { font-family: "JetBrains Mono", var(--od-font-mono); font-weight: 600; color: var(--od-text); letter-spacing: 0.03em; }

.others { list-style: none; margin: 0; padding: 0 0 4px; border-bottom: 1px solid var(--od-border-subtle); }
.other { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.other__g { flex: none; width: 32px; font-size: 13px; color: var(--od-text-secondary); }
.other__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.other__code { font-size: 18px; }
.other__meta { font-size: 12px; color: var(--od-text-tertiary); }
.other .vote { height: 32px; padding: 0 12px; }
.ghost-btn { flex: none; width: 32px; height: 32px; border: 0; border-radius: 16px; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--od-gray-600); }
.ghost-btn:hover { background: var(--od-bg-hover); }

.comments { list-style: none; margin: 0; padding: 0; }
.comment { display: flex; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--od-border-subtle); }
.comment__main { flex: 1; min-width: 0; }
.comment__body { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.comment__meta { font-size: 12px; color: var(--od-text-tertiary); }
.comment-form { display: grid; gap: 8px; padding: 12px 0 4px; }
.comment-form textarea { min-height: 64px; resize: vertical; }
.actions { display: flex; justify-content: flex-end; gap: 8px; }

.big-btn {
  flex: 1; height: 48px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--od-accent); color: #fff; font-size: 15px; font-weight: 600;
}
.big-btn:hover { background: var(--od-accent-hover); }
.big-btn--plain { background: var(--od-bg); color: var(--od-text); border: 1px solid var(--od-border-strong); }
.big-btn--plain:hover { background: var(--od-gray-25); }
.big-btn[data-loading="true"] { opacity: .6; pointer-events: none; }

/* 새 비밀번호 올리기 */
.add-code { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--od-bg-subtle); }
.add-code h3 { margin: 0; font-size: 15px; font-weight: 700; }
.add-code .od-segmented { width: 100%; }
.add-code .od-segmented__item { flex: 1; }
.row2 { display: grid; grid-template-columns: 1fr 150px; gap: 8px; }
.code-input { font-family: "JetBrains Mono", var(--od-font-mono); letter-spacing: 0.05em; }

/* ── 입력 ─────────────────────────────────────────────────────────────── */
.form { display: grid; gap: 20px; padding-top: 6px; }
.form h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.form .od-segmented { width: 100%; }
.form .od-segmented__item { flex: 1; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.form legend { padding: 0; margin-bottom: 8px; font-size: var(--od-size-subhead); font-weight: var(--od-weight-medium); }
.where { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--od-text-secondary); }

/* ── 신고 ─────────────────────────────────────────────────────────────── */
.report { padding: 12px 0; border-bottom: 1px solid var(--od-border-subtle); display: grid; gap: 8px; }
.report__text { font-size: 14px; word-break: break-word; }
.report__meta { font-size: 12px; color: var(--od-text-tertiary); }
.report__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 지도 위 버튼 ─────────────────────────────────────────────────────── */
.fabs { position: absolute; z-index: 10; display: flex; flex-direction: column; gap: 10px; transition: bottom var(--od-duration-slow) var(--od-ease-out), opacity var(--od-duration-fast); }
.fab {
  width: 48px; height: 48px; border: 0; border-radius: 24px; background: var(--od-bg); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.fab::before { content: ""; width: 22px; height: 22px; background: var(--od-gray-700); -webkit-mask: var(--icon-locate) center / contain no-repeat; mask: var(--icon-locate) center / contain no-repeat; }
.fab.is-on::before { background: var(--od-accent); }
.fab--layers::before { -webkit-mask-image: var(--icon-layers); mask-image: var(--icon-layers); }
.fab:active { transform: scale(.96); }

/* ── 위치 고르기 ──────────────────────────────────────────────────────── */
.pick { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.pick__pin {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 20px; border: 3px solid #fff; background: var(--od-accent); box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.pick__pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 3px; background: #fff; }
.pick__bar {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(440px, calc(100% - 32px)); padding: 16px;
  background: var(--od-bg); border-radius: 20px; box-shadow: var(--od-shadow-3); pointer-events: auto;
}
.pick__text { margin: 0 0 12px; font-size: var(--od-size-subhead); }
.pick__actions { display: flex; gap: 8px; }
.pick__actions .od-btn { flex: 1; }
.app.is-picking .panel, .app.is-picking .fabs, .app.is-picking .topbar { display: none; }

/* ── 지도 표시 ────────────────────────────────────────────────────────── */
.mk {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; padding: 0; background: none; cursor: pointer;
}
.mk__dot {
  width: 30px; height: 30px; border-radius: 15px; border: 2px solid #fff; background: var(--od-accent);
  box-shadow: 0 2px 6px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center;
}
.mk--private .mk__dot { background: var(--od-gray-800); }
.mk--private .mk__dot::after { content: ""; width: 12px; height: 12px; background: #fff; -webkit-mask: var(--icon-lock) center / contain no-repeat; mask: var(--icon-lock) center / contain no-repeat; }
.mk--hidden .mk__dot { background: var(--od-gray-400); }
.mk__label {
  display: none; padding: 5px 10px; border-radius: 8px; background: var(--od-gray-900); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.mk.is-selected .mk__label { display: block; }
.mk.is-selected .mk__dot { width: 40px; height: 40px; border-radius: 20px; border-width: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.maplibregl-marker.is-top { z-index: 5; }
/* 카카오 핀: 크기 0 인 틀이 좌표, 핀은 그 아래 가운데에 붙는다(폭이 바뀌어도 어긋나지 않게) */
.k-anchor { position: relative; width: 0; height: 0; }
.k-anchor > .mk { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); }
.k-anchor--center > .me-dot { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.me-dot { width: 16px; height: 16px; border-radius: 8px; background: var(--od-accent); border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(42,100,246,.16), 0 1px 3px rgba(0,0,0,.3); }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-group { border-radius: 12px !important; box-shadow: var(--od-shadow-2) !important; }

/* ── 핀 카드(시안 C) ─────────────────────────────────────────────────── */
.peek {
  position: absolute; z-index: 22; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom));
  padding: 18px 18px 6px; background: var(--od-bg); border-radius: 22px; box-shadow: 0 10px 34px rgba(0,0,0,.14);
  display: flex; flex-direction: column; gap: 14px;
}
.peek__head { display: flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--od-text); }
.peek__name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek__dist { flex: none; font-size: 13px; color: var(--od-text-secondary); }
.peek__codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.peek__code { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.peek__label { font-size: 12px; font-weight: 600; color: var(--od-text-secondary); }
.peek__value {
  padding: 0; border: 0; background: none; text-align: left; cursor: copy; color: var(--od-text);
  font-family: "JetBrains Mono", var(--od-font-mono); font-size: var(--code-size, 32px); line-height: 1.15; font-weight: 600; letter-spacing: 0.04em; word-break: break-all;
}
.peek__value.is-doubt { color: var(--od-text-tertiary); }
.peek__none { font-size: 15px; color: var(--od-text-tertiary); padding: 8px 0; }
.peek__foot {
  display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 -2px; padding: 0 2px;
  border: 0; border-top: 1px solid var(--od-border-subtle); background: none; cursor: pointer; text-align: left;
  font-size: 13px; color: var(--od-text-secondary);
}
.peek__foot span:first-child { flex: 1; min-width: 0; }
.peek__more { font-weight: 600; color: var(--od-text-accent); }
.peek__foot .is-ok { color: var(--od-text-success); }
.peek__foot .is-doubt { color: var(--od-text-warning); }
@media (max-width: 899.98px) {
  .app[data-view="peek"] .panel { transform: translateY(100%); }
  .app[data-view="peek"] .fabs { opacity: 1; pointer-events: auto; bottom: calc(var(--peek-h, 190px) + 28px); }
}
@media (min-width: 900px) {
  .peek { left: calc(400px + (100% - 400px) / 2); right: auto; width: 380px; transform: translateX(-50%); bottom: 32px; }
}

/* ── 알림 ─────────────────────────────────────────────────────────────── */
.toast {
  position: absolute; z-index: var(--od-z-toast); left: 50%; top: calc(20px + env(safe-area-inset-top)); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 16px;
  background: var(--od-gray-900); color: #fff; border-radius: var(--od-radius-lg);
  font-size: var(--od-size-subhead); box-shadow: var(--od-shadow-3);
}

/* ── 아이콘(모양만, 색은 쓰는 곳에서) ─────────────────────────────────── */
:root {
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E");
  --icon-locate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23000'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");
  --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/%3E%3C/svg%3E");
  --icon-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  --icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --icon-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  --icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
}
.ico { display: inline-block; width: 16px; height: 16px; background: currentColor; }
.ico--back { width: 18px; height: 18px; -webkit-mask: var(--icon-back) center / contain no-repeat; mask: var(--icon-back) center / contain no-repeat; }
.ico--close { -webkit-mask: var(--icon-close) center / contain no-repeat; mask: var(--icon-close) center / contain no-repeat; }
.ico--more { width: 18px; height: 18px; -webkit-mask: var(--icon-more) center / contain no-repeat; mask: var(--icon-more) center / contain no-repeat; }