/* 딱집 공통 화면 마감. 필터 치수·지도 좌표·모바일 시트의 크기와 모션은 기존 규칙을 유지한다. */
html.landmap-ui {
  --ui-ink: #25231f;
  --ui-muted: #69645c;
  --ui-line: #e3ded6;
  --ui-accent: #aa4526;
  --ui-soft: #fff2e9;
  --ui-focus: #a64020;
}
.landmap-ui body { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.landmap-ui header { border-bottom-color: var(--ui-line); box-shadow: 0 2px 10px rgb(41 32 23 / 3%); }
.landmap-ui :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 3px;
}
.landmap-ui :is(#panel, #rankPanel, #recoPanel, #filterPanel):focus-visible { outline: none; }
.landmap-ui button:disabled { cursor: default; }
.landmap-ui button { -webkit-tap-highlight-color: transparent; }

/* 지도 위의 겹치는 표면은 색·그림자로 구분한다. 배치와 크기는 바꾸지 않는다. */
.map-page :is(#panel, #rankPanel, #recoPanel) {
  border-color: var(--ui-line);
  box-shadow: 0 3px 10px rgb(41 32 23 / 6%), 0 16px 44px rgb(41 32 23 / 10%);
}
.map-page :is(#rankPanel, #recoPanel) { background: #f8f6f2; }
.map-page :is(.rpHead, .rcHead) { background: #fffdfa; }
.map-page :is(#rankPanel h2, #recoPanel h2) { color: var(--ui-ink); font-weight: 750; letter-spacing: -.025em; }
.map-page #filterPanel { border-color: #e0d9d0; box-shadow: 0 4px 16px rgb(41 32 23 / 6%); }
.map-page :is(.rcard, .rcCard) { border-color: #e6e0d8; box-shadow: 0 2px 6px rgb(41 32 23 / 4%); }
.map-page .rcard.open { border-color: #d7b5a3; box-shadow: 0 4px 16px rgb(96 55 31 / 9%); }
.map-page .rcard.open .rrow { background: #fff7f1; }
.map-page .rseg { color: #5f594f; border-color: #e2dcd3; background: #fff; }
.map-page .rseg.on { color: #8e361b; background: #ffeadc; border-color: #e8bda5; }
.map-page :is(.rparts, .rcCard .rcRegion, .rcCard .rcPrice small, .rcAcItem .rcAcRk) { color: var(--ui-muted); }
.map-page :is(#rpMeta, .rlink.off) { color: #6d665c; }
.map-page .rcCard .rcPrice { letter-spacing: -.025em; }
.map-page :is(#rpQ, .rcSel) { background: #fff; border-color: #d9d1c7; color: var(--ui-ink); }
.map-page #rpQ:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.map-page :is(#rpQ, .rcSel)::placeholder { color: #80776d; }
.map-page :is(#panel .specPills .spec, .rcard .rrow) { font-variant-numeric: tabular-nums; }

/* 비교와 내 정보도 지도와 같은 잉크·테두리·강조색을 사용한다. */
:is(.compare-page, .account-page) body { background: #f7f5f1; color: var(--ui-ink); }
:is(.compare-page, .account-page) .card {
  border-color: var(--ui-line);
  box-shadow: 0 2px 6px rgb(41 32 23 / 3%), 0 10px 28px rgb(41 32 23 / 4%);
}
:is(.compare-page, .account-page) .card h2 { color: #655c51; font-weight: 750; letter-spacing: 0; }
.compare-page :is(.heroS, .mapHint, .card .sub),
.account-page :is(.item .s, .nickSub, .ntSub, .ntHint, .ntNote, .nfTime, .rpRow .s, .rpIntro) { color: var(--ui-muted); }
.compare-page .cardBar { border-bottom-color: #e9e2d8; }
.compare-page .btn.key { color: #963b1e; border-color: #e3baa5; background: #fff2e8; }
.compare-page .btn.ghost { color: #817569; }
.compare-page .setsPop { border-color: #ded4c8; box-shadow: 0 12px 32px rgb(41 32 23 / 14%); }
.account-page :is(.unblock, .acctDel button) { color: #6d5546; border-color: #d9cfc4; }
.account-page .empty { color: var(--ui-muted); }
.account-page :is(.item, .ntRow, .rpRow) { border-bottom-color: #eae4db; }
.account-page .nick { letter-spacing: -.03em; }

/* 조회 실패와 빈 결과를 구분하고, 짧은 안내 바로 아래에서 다시 시도한다. */
.landmap-ui .uiState {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 22px 10px; color: var(--ui-muted); text-align: center;
  font-size: 12px; line-height: 1.5;
}
.landmap-ui .uiState.is-error { color: #85513c; background: #fff7f1; border-radius: 10px; }
.landmap-ui .uiState > span { max-width: 100%; }
.landmap-ui .uiRetry {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 15px; border: 1px solid #dfb49e; border-radius: 8px;
  color: #90381d; background: #fff; font: inherit; font-weight: 650;
  white-space: nowrap; cursor: pointer;
}
.landmap-ui .uiState.is-loading::before {
  content: ''; width: 18px; height: 18px; border: 2px solid #ead8cb;
  border-top-color: #b85330; border-radius: 50%; animation: uiSpin .8s linear infinite;
}
@keyframes uiSpin { to { transform: rotate(360deg); } }
@media (hover: hover) {
  .landmap-ui .uiRetry:hover { background: #fff0e5; border-color: #bb6745; }
  .map-page :is(.rcard:not(.open), .rcCard):hover { border-color: #c99073; box-shadow: 0 4px 14px rgb(96 55 31 / 10%); }
}
@media (pointer: coarse) { .landmap-ui .uiRetry { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .landmap-ui .uiState.is-loading::before { animation: none; } }