/*
 * U2 Portal — base + 디렉터리 목록/카드/상태 스타일.
 * 토큰: theme.json preset (var(--wp--preset--color--*)) + 아래 radius/shadow 스케일.
 * 설계 §6 토큰 일치. CLS 예약·a11y(:focus-visible·터치≥44px)·prefers-reduced-motion 준수.
 */

:root {
	--accent: var(--wp--preset--color--accent, #2f8f5b);
	--accent-ink: var(--wp--preset--color--accent-ink, #1f6f43);
	--accent-soft: var(--wp--preset--color--accent-soft, #e8f3ec);
	--accent-line: var(--wp--preset--color--accent-line, #bfe0cb);
	--bg: var(--wp--preset--color--bg, #f7f7f4);
	--surface: var(--wp--preset--color--surface, #fff);
	--surface-2: var(--wp--preset--color--surface-2, #f2f2ee);
	--border: var(--wp--preset--color--border, #e3e2db);
	--border-strong: var(--wp--preset--color--border-strong, #d2d1c8);
	--text: var(--wp--preset--color--text, #22251f);
	--text-2: var(--wp--preset--color--text-2, #5c5f57);
	--text-3: var(--wp--preset--color--text-3, #878a80);
	--ok: var(--wp--preset--color--ok, #2f8f5b);
	--warn: var(--wp--preset--color--warn, #b5740c);
	--warn-soft: var(--wp--preset--color--warn-soft, #fbf1de);
	--err: var(--wp--preset--color--err, #c0392b);
	--err-soft: var(--wp--preset--color--err-soft, #fbe9e7);
	--info: var(--wp--preset--color--info, #2563a8);
	--info-soft: var(--wp--preset--color--info-soft, #e7f0fa);
	--focus: var(--wp--preset--color--focus, #1d6fd6);
	--r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
	--sh-1: 0 1px 2px rgba(28, 30, 24, .06);
	--sh-2: 0 4px 14px rgba(28, 30, 24, .08);
	--container: 1200px;
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

body.u2p {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--wp--preset--font-family--sans, Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.u2p-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }

/* skip link */
.u2p-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--surface); color: var(--accent-ink);
	padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.u2p-skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }

/* header / footer landmarks */
.u2p-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.u2p-header__inner { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.u2p-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.u2p-brand__logo { font-weight: 900; font-size: 18px; letter-spacing: -.02em; color: var(--accent-ink); }
.u2p-nav__list { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.u2p-main { padding: 20px 0 56px; }
.u2p-main:focus { outline: none; }

.u2p-footer { border-top: 1px solid var(--border); background: var(--surface-2); padding: 20px 0; margin-top: 40px; }
.u2p-footer__src { color: var(--text-2); font-size: 13px; margin: 0 0 6px; }
.u2p-footer__domain { color: var(--text-3); font-size: 13px; margin: 0; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* directory wrapper */
.u2p-directory { display: block; }
.u2p-directory__count { color: var(--text-2); font-size: 13px; margin: 0 0 12px; }
.u2p-directory__count strong { color: var(--accent-ink); }

/* state notice (empty / no_results / no_schema) — CLS 예약 min-height */
.u2p-state {
	min-height: 160px; display: flex; flex-direction: column; justify-content: center;
	border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
	padding: 24px; text-align: center; gap: 6px;
}
.u2p-state__title { margin: 0; font-weight: 700; font-size: 16px; }
.u2p-state__desc { margin: 0; color: var(--text-2); font-size: 13px; }
.u2p-state--info { border-left: 3px solid var(--info); background: var(--info-soft); }
.u2p-state--warn { border-left: 3px solid var(--warn); background: var(--warn-soft); }
.u2p-state--err { border-left: 3px solid var(--err); background: var(--err-soft); }

/* place card — 세로 이미지 카드 (디자인 핸드오프 §3) */
.u2p-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: 14px; }
.u2p-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
	box-shadow: var(--sh-1); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.u2p-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--border-strong); }
.u2p-card__thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.u2p-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u2p-card__thumb-ph { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--surface-3, #ebebe5) 10px 20px); }
.u2p-card__catbadge {
	position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: var(--r-pill);
	background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800;
}
.u2p-card__body { min-width: 0; padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 7px; }
.u2p-card__title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.u2p-card__link { color: var(--text); text-decoration: none; }
.u2p-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.u2p-card:hover .u2p-card__title { color: var(--accent-ink); }
.u2p-card__addr { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; display: flex; gap: 4px; }
.u2p-card__pin { color: var(--text-3); flex: none; }
.u2p-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px; }

/* status / trust badge — 텍스트 라벨 동반(색만으로 의미전달 금지) */
.u2p-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; line-height: 1.5; }
.u2p-badge--ok { background: var(--accent-soft); color: var(--accent-ink); }
.u2p-badge--ok::before { content: "●"; font-size: 8px; margin-right: 4px; }
.u2p-badge--warn { background: var(--warn-soft); color: var(--warn); }
.u2p-badge--err { background: var(--err-soft); color: var(--err); }
.u2p-badge--muted { background: var(--surface-2); color: var(--text-2); }

/* call button — 카드 내 보조 액션(전체 링크 위 z-index) */
.u2p-card__call {
	position: relative; z-index: 1; margin-left: auto;
	width: 36px; height: 36px; border-radius: var(--r-pill);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent-soft); color: var(--accent-ink); text-decoration: none;
	border: 1px solid var(--accent-line); font-size: 16px; flex: none;
}
.u2p-card__call:hover { background: var(--accent-line); }

.u2p-empty { color: var(--text-2); }

/* 상세(single-place) + archive 헤더 [M5b]. */
.u2p-archive__head { margin: 0 0 16px; }
.u2p-archive__title, .u2p-place__title { font-size: 1.5rem; line-height: 1.3; margin: 4px 0; }
/* 목록/지도 탭 + 지도 빈상태 골격 [M5g] */
.u2p-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.u2p-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .95rem; }
.u2p-tab:hover { color: var(--text); }
.u2p-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-sm); }
.u2p-tab[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }
.u2p-map { margin: 4px 0 0; }
.u2p-map__canvas { display: flex; align-items: center; justify-content: center; min-height: 320px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-3); }
.u2p-map__hint { margin: 0; font-size: .9rem; }
.u2p-map__notice { margin: 12px 0 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent-line); border-radius: var(--r-md); color: var(--text-2); font-size: .85rem; line-height: 1.6; }
.u2p-map__notice strong { color: var(--text); }
@media (max-width: 600px) {
	.u2p-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.u2p-map__canvas { min-height: 240px; }
}
.u2p-place { max-width: 760px; }
.u2p-place__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 4px; }
.u2p-place__cat { color: var(--text-2); font-size: .9rem; }
.u2p-place__facts { display: grid; gap: 10px; margin: 16px 0; }
.u2p-place__fact { display: grid; grid-template-columns: 72px 1fr; gap: 12px; }
.u2p-place__fact dt { color: var(--text-3); font-size: .9rem; }
.u2p-place__fact dd { margin: 0; }
.u2p-place__fact a { color: var(--accent-ink); }
.u2p-place__content { margin: 16px 0; line-height: 1.7; }
.u2p-place__note { color: var(--text-3); font-size: .85rem; margin: 16px 0 8px; }
.u2p-place__back { margin: 12px 0 0; }
.u2p-place__back a { color: var(--accent-ink); }
/* 상세 보강 [M5f] — 핵심정보 보조표기·관련 큐레이션·출처 footer·모바일 sticky 액션바 */
.u2p-place__addr-alt { display: block; color: var(--text-3); font-size: .85rem; margin-top: 2px; }
.u2p-place__related { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.u2p-place__related-label { font-size: 13px; font-weight: 700; color: var(--text-3); }
.u2p-place__related-link {
	display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px;
	border-radius: var(--r-pill); background: var(--surface-2); color: var(--accent-ink);
	border: 1px solid var(--border); font-size: .9rem; text-decoration: none;
}
.u2p-place__related-link:hover { border-color: var(--accent); }
.u2p-place__source { margin: 24px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); }
.u2p-place__source .u2p-place__note { margin: 0; }
.u2p-place__source-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 8px 0 0; font-size: .82rem; color: var(--text-3); }
.u2p-place__report { color: var(--accent-ink); }
.u2p-place__actionbar { display: flex; gap: 8px; margin: 20px 0 0; }
.u2p-place__action {
	flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 10px 14px; border-radius: var(--r-md);
	background: var(--surface-2); color: var(--accent-ink); border: 1px solid var(--border);
	font-weight: 600; text-decoration: none;
}
.u2p-place__action--call { background: var(--accent); color: #fff; border-color: var(--accent); }
.u2p-place__action:hover { border-color: var(--accent); }
@media (max-width: 600px) {
	.u2p-place__actionbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
		background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--sh-2);
	}
	.u2p-single { padding-bottom: 76px; }
}

/* search form [M5c-2b] — 서버 렌더 GET(검색어 + 상태/시도 셀렉트). JS 불필요 */
.u2p-search {
	margin: 0 0 16px; padding: 14px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.u2p-search__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.u2p-search__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.u2p-search__field--q { flex: 2 1 240px; }
.u2p-search__label { font-size: 12px; font-weight: 700; color: var(--text-2); }
.u2p-search__input, .u2p-search__select {
	width: 100%; min-height: 44px; padding: 0 12px; font-size: 15px; color: var(--text);
	background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
.u2p-search__select {
	appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%235c5f57' d='M1 3h10L6 9z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
.u2p-search__input:focus, .u2p-search__select:focus { border-color: var(--accent); }
.u2p-search__actions { display: flex; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.u2p-search__submit {
	min-height: 44px; padding: 0 22px; font-size: 15px; font-weight: 700; cursor: pointer;
	color: #fff; background: var(--accent); border: 1px solid var(--accent-ink); border-radius: var(--r-sm);
}
.u2p-search__submit:hover { background: var(--accent-ink); }
@media (max-width: 600px) {
	.u2p-search__field, .u2p-search__actions { flex-basis: 100%; }
	.u2p-search__submit { width: 100%; }
}

/* front-page hero [M5d-1] — 통합검색(검색폼 재사용) + data_state 인지 안내 */
.u2p-main--home { padding-top: 0; }
.u2p-hero {
	background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 100%);
	border-bottom: 1px solid var(--accent-line);
}
.u2p-hero__inner { padding: 40px 16px 32px; }
.u2p-hero__title {
	margin: 0 0 8px; font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 900;
	letter-spacing: -.02em; line-height: 1.25; color: var(--text);
}
.u2p-hero__sub { margin: 0 0 18px; color: var(--text-2); font-size: 15px; }
/* hero 안에서는 검색바를 더 크게·둥글게(pill) — 검색 우선 메인(설계 ① HERO) */
.u2p-hero .u2p-search { margin: 0; padding: 10px; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.u2p-hero .u2p-search__input, .u2p-hero .u2p-search__select, .u2p-hero .u2p-search__submit {
	min-height: 46px; border-radius: var(--r-pill);
}
.u2p-hero__teaser {
	margin: 14px 0 0; padding: 10px 14px; font-size: 14px; color: var(--warn);
	background: var(--warn-soft); border-radius: var(--r-sm);
}
.u2p-hero__suggest { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.u2p-hero__suggest-label { font-size: 13px; font-weight: 700; color: var(--text-3); }
.u2p-hero__suggest-link {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
	font-size: 14px; color: var(--accent-ink); text-decoration: none;
	background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-pill);
}
.u2p-hero__suggest-link:hover { background: var(--accent-soft); }
.u2p-hero__count { margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
/* 지역 quick chips [M5d-2] — 시·도 바로가기(가로 스크롤). 칩 외형은 추천어와 일관 */
.u2p-hero__regions { margin: 14px 0 0; }
.u2p-hero__regions-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.u2p-hero__regions-list {
	list-style: none; margin: 0; padding: 0 0 4px;
	display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.u2p-hero__region-link {
	flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
	font-size: 14px; color: var(--accent-ink); text-decoration: none; white-space: nowrap;
	background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-pill);
}
.u2p-hero__region-link:hover { background: var(--accent-soft); }
@media (max-width: 600px) {
	.u2p-hero__inner { padding: 28px 16px 24px; }
}

/* 홈 안내 섹션 — 이용 3단계 + 신뢰/면책(데이터 무관) [M5i] */
.u2p-section { margin: 32px 0; }
.u2p-section__title { font-size: 1.25rem; line-height: 1.3; margin: 0 0 14px; }
.u2p-steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.u2p-step {
	display: flex; flex-direction: column; gap: 6px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
	padding: 16px;
}
.u2p-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; font-weight: 700;
}
.u2p-step__title { font-size: 1rem; margin: 0; }
.u2p-step__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.u2p-about {
	background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
	padding: 18px 20px;
}
.u2p-about .u2p-section__title { margin: 0 0 10px; }
.u2p-about p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.u2p-about p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
	.u2p-steps { grid-template-columns: 1fr; }
}

/* 홈 업종 카드 — verticals seed 내비(수량/랭킹 없음) [M5j] */
.u2p-vcards {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.u2p-vcard { display: flex; }
.u2p-vcard__link {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; min-height: 56px; padding: 14px 16px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
	color: var(--text); text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.u2p-vcard__link:hover {
	border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.u2p-vcard__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.u2p-vcard__title { font-weight: 700; font-size: 15px; }
.u2p-vcard__cta { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.u2p-vcard__cta::after { content: " \2192"; }
@media (max-width: 600px) {
	.u2p-vcards { grid-template-columns: repeat(2, 1fr); }
}

/* 탐색 경로(breadcrumb) — 데이터 무관 내비, JSON-LD 없음 [M5k] */
.u2p-breadcrumb { margin: 0 0 14px; }
.u2p-breadcrumb__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
	font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.u2p-breadcrumb__item { display: inline-flex; align-items: center; }
.u2p-breadcrumb__item + .u2p-breadcrumb__item::before {
	content: "\203A"; margin-right: 6px; color: var(--text-3);
}
.u2p-breadcrumb__link { color: var(--text-2); text-decoration: none; padding: 2px 0; }
.u2p-breadcrumb__link:hover { color: var(--accent); text-decoration: underline; }
.u2p-breadcrumb__current { color: var(--text); font-weight: 600; }

/* filter chips [M5c] — 적용 필터 표시 + 제거/전체해제(서버 렌더 링크) */
.u2p-filters { margin: 0 0 14px; }
.u2p-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.u2p-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
	background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill);
	padding: 4px 6px 4px 14px; font-size: 13px; line-height: 1.5;
}
.u2p-chip__label { color: var(--text-3); }
.u2p-chip__val { color: var(--text); font-weight: 700; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2p-chip__x { /* WCAG 2.5.8 타깃 ≥24px */
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2);
	text-decoration: none; font-size: 16px; line-height: 1;
}
.u2p-chip__x:hover { background: var(--err-soft); color: var(--err); }
.u2p-chip--clear { padding: 0; min-height: 0; border: none; background: none; }
.u2p-chip--clear a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; color: var(--accent-ink); font-weight: 700; text-decoration: underline; }

/* state cta button (필터 초기화 / 첫 페이지로) — 터치 타깃 ≥40px */
.u2p-state__cta { margin: 14px 0 0; }
.u2p-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px;
	border-radius: var(--r-pill); background: var(--accent); color: #fff; font-weight: 700;
	text-decoration: none; border: 1px solid var(--accent-ink);
}
.u2p-btn:hover { background: var(--accent-ink); }

/* pagination [M5c] — 필터 보존 링크, 윈도우 ±2 + 양끝/생략 */
.u2p-pager { margin: 20px 0 0; }
.u2p-pager__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.u2p-pager__item { display: inline-flex; }
.u2p-pager__num, .u2p-pager__nav, .u2p-pager__cur {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--r-sm); font-size: 14px; text-decoration: none;
}
.u2p-pager__num, .u2p-pager__nav { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.u2p-pager__num:hover, .u2p-pager__nav:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.u2p-pager__cur { background: var(--accent); color: #fff; font-weight: 700; border: 1px solid var(--accent-ink); }
.u2p-pager__gap { align-items: flex-end; color: var(--text-3); padding: 0 4px; }

@media (max-width: 767px) {
	.u2p-pager__num, .u2p-pager__nav, .u2p-pager__cur { min-width: 38px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   [M4c] 메인 화면 시각 폴리시 — 기존 토큰/마크업 유지, 외형만 강화.
   리더 요청: u2.to 메인 디자인 개선. (숙박 버티컬 live)
   ========================================================================= */

/* HERO — 깊이감 있는 그라디언트 + 은은한 도트 패턴 + 더 큰 타이틀 */
.u2p-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1200px 380px at 18% -10%, rgba(47,143,91,.20), transparent 60%),
		radial-gradient(900px 320px at 95% 0%, rgba(37,99,168,.12), transparent 55%),
		linear-gradient(170deg, var(--accent-soft) 0%, var(--bg) 70%);
	border-bottom: 1px solid var(--accent-line);
}
.u2p-hero::after {
	content: "";
	position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(31,111,67,.07) 1px, transparent 1.4px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
	        mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.u2p-hero__inner { position: relative; z-index: 1; padding: 56px 16px 40px; max-width: 760px; }
.u2p-hero__title {
	font-size: clamp(1.7rem, 5.2vw, 2.5rem);
	background: linear-gradient(92deg, var(--accent-ink), #2563a8);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--accent-ink);
}
.u2p-hero__sub { font-size: clamp(15px, 2.4vw, 17px); max-width: 52ch; }
.u2p-hero .u2p-search {
	border: 1px solid var(--accent-line);
	box-shadow: 0 18px 40px -22px rgba(31,111,67,.55), 0 2px 6px -2px rgba(0,0,0,.06);
	transition: box-shadow .2s ease, transform .2s ease;
}
.u2p-hero .u2p-search:focus-within {
	box-shadow: 0 22px 52px -22px rgba(31,111,67,.7), 0 0 0 3px var(--accent-soft);
	transform: translateY(-1px);
}
.u2p-hero__suggest-link, .u2p-hero__region-link { transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.u2p-hero__suggest-link:hover, .u2p-hero__region-link:hover { transform: translateY(-1px); border-color: var(--accent); }
.u2p-hero__count {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 16px; padding: 5px 12px; border-radius: var(--r-pill);
	background: var(--surface); border: 1px solid var(--accent-line);
	font-size: 13px; color: var(--accent-ink); font-weight: 600;
}
.u2p-hero__count::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--ok); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 업종/카드 — hover lift + 부드러운 그림자 */
.u2p-card, .u2p-step, .u2p-vert, .u2p-vertical {
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.u2p-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -18px rgba(0,0,0,.35);
	border-color: var(--accent-line);
}

/* 헤더 — 살짝 반투명 + 스크롤 그림자 느낌 */
.u2p-header {
	position: sticky; top: 0; z-index: 30;
	background: rgba(255,255,255,.88);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	        backdrop-filter: saturate(1.4) blur(8px);
	box-shadow: 0 1px 0 var(--border), 0 6px 18px -16px rgba(0,0,0,.5);
}
.u2p-brand__logo { background: linear-gradient(92deg, var(--accent-ink), #2563a8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* 섹션 타이틀 — accent 언더라인 악센트 */
.u2p-section__title { position: relative; padding-bottom: 8px; }
.u2p-section__title::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 44px; height: 3px; border-radius: 3px;
	background: linear-gradient(92deg, var(--accent), #2563a8);
}

@media (max-width: 600px) {
	.u2p-hero__inner { padding: 38px 16px 28px; }
}

/* =========================================================================
   [M5k] 헤더 네비 / 브랜드 / 헤더액션 / 다단 푸터 — 디자인 완전체.
   ========================================================================= */

/* 헤더 레이아웃: 브랜드 | 네비(가운데) | 액션(우) */
.u2p-header__inner { gap: 20px; min-height: 64px; }
.u2p-nav { margin-left: 8px; margin-right: auto; }

/* 브랜드 워드마크 + 버티컬 배지 */
.u2p-brand { gap: 10px; }
.u2p-brand__mark {
	font-weight: 900; font-size: 21px; letter-spacing: -.03em; line-height: 1;
	background: linear-gradient(92deg, var(--accent-ink), #2563a8);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.u2p-brand__dot { color: var(--accent); -webkit-text-fill-color: currentColor; }
.u2p-brand__badge {
	display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
	font-size: 12px; font-weight: 800; letter-spacing: -.01em;
	color: var(--accent-ink); background: var(--accent-soft);
	border: 1px solid var(--accent-line); border-radius: var(--r-pill);
}

/* 네비 링크 */
.u2p-nav__list { gap: 4px; align-items: center; }
.u2p-nav__link {
	display: inline-flex; align-items: center; height: 38px; padding: 0 12px;
	font-size: 14.5px; font-weight: 600; color: var(--text-2); text-decoration: none;
	border-radius: var(--r-pill); transition: color .15s ease, background .15s ease;
}
.u2p-nav__link:hover { color: var(--accent-ink); background: var(--accent-soft); }
.u2p-nav__item.current-menu-item .u2p-nav__link,
.u2p-nav__link[aria-current="page"] { color: var(--accent-ink); background: var(--accent-soft); }

/* 헤더 우측 액션 */
.u2p-header__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.u2p-header__search {
	display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px;
	font-size: 14px; color: var(--text-2); text-decoration: none;
	background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill);
	transition: border-color .15s ease, color .15s ease;
}
.u2p-header__search:hover { color: var(--accent-ink); border-color: var(--accent-line); }
.u2p-header__search-ic { font-size: 18px; line-height: 1; }
.u2p-btn--ghost {
	display: inline-flex; align-items: center; height: 38px; padding: 0 15px;
	font-size: 14px; font-weight: 700; text-decoration: none;
	color: #fff; background: var(--accent); border: 1px solid var(--accent-ink);
	border-radius: var(--r-pill); transition: background .15s ease, transform .15s ease;
}
.u2p-btn--ghost:hover { background: var(--accent-ink); transform: translateY(-1px); }

@media (max-width: 860px) {
	.u2p-header__search-tx { display: none; }
	.u2p-nav__link { padding: 0 9px; font-size: 14px; }
}
@media (max-width: 680px) {
	.u2p-header__inner { flex-wrap: wrap; min-height: 0; padding-top: 10px; padding-bottom: 10px; gap: 10px 12px; }
	.u2p-nav { order: 3; width: 100%; margin: 0; }
	.u2p-nav__list { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; flex-wrap: nowrap; }
	.u2p-nav__link { white-space: nowrap; }
	.u2p-header__actions { margin-left: auto; }
}

/* 다단 푸터 */
.u2p-footer { padding: 0; margin-top: 56px; background: var(--surface-2); }
.u2p-footer__grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px;
	padding: 36px 16px 28px;
}
.u2p-brand__mark--footer { font-size: 24px; }
.u2p-footer__tag { margin: 10px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.6; max-width: 30ch; }
.u2p-footer__head { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--text-3); text-transform: uppercase; }
.u2p-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.u2p-footer__list a { color: var(--text-2); text-decoration: none; font-size: 14.5px; }
.u2p-footer__list a:hover { color: var(--accent-ink); }
.u2p-footer__bottom {
	display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between;
	padding: 16px; border-top: 1px solid var(--border);
}
.u2p-footer__src { margin: 0; max-width: 70ch; }
.u2p-footer__domain { margin: 0; }
@media (max-width: 680px) {
	.u2p-footer__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
	.u2p-footer__brand { grid-column: 1 / -1; }
}

/* 루트 네트워크 인덱스 — 서브사이트 디렉터리 카드 [M5k] */
.u2p-hero--network { text-align: center; }
.u2p-hero--network .u2p-hero__inner { max-width: 720px; margin: 0 auto; }
.u2p-sitegrid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;
}
.u2p-sitecard { display: flex; }
.u2p-sitecard__link {
	position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%;
	padding: 22px 20px; text-decoration: none; color: var(--text);
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.u2p-sitecard__link:hover {
	transform: translateY(-3px); border-color: var(--accent-line);
	box-shadow: 0 18px 36px -20px rgba(31,111,67,.5);
}
.u2p-sitecard__badge {
	align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
	font-size: 12.5px; font-weight: 800; color: #fff;
	background: linear-gradient(92deg, var(--accent-ink), #2563a8); border-radius: var(--r-pill);
}
.u2p-sitecard__name { font-size: 20px; font-weight: 900; letter-spacing: -.02em; margin-top: 4px; }
.u2p-sitecard__host { font-size: 13.5px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.u2p-sitecard__go { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--accent-ink); }
.u2p-adminbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.u2p-btn--line {
	display: inline-flex; align-items: center; height: 38px; padding: 0 15px;
	font-size: 14px; font-weight: 700; text-decoration: none;
	color: var(--accent-ink); background: var(--surface); border: 1px solid var(--accent-line);
	border-radius: var(--r-pill); transition: background .15s ease;
}
.u2p-btn--line:hover { background: var(--accent-soft); }

/* 카드 전체 클릭 affordance [M5k] — 상세 규칙은 §3 place card 블록에 통합 */
.u2p-card { cursor: pointer; }

/* 지도 뷰 (archive ?view=map) — 카카오맵 컨테이너 [M5n] */
.u2p-map { margin-top: 4px; }
.u2p-map__canvas {
	position: relative; display: block; width: 100%; height: 600px; min-height: 320px;
	border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: #e7edf0;
}
.u2p-map__hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: 13px; }
.u2p-map__fallback {
	position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
	gap: 8px; align-items: center; justify-content: center; text-align: center;
	padding: 24px; background: var(--surface);
}
.u2p-map__fallback-ic { font-size: 30px; }
.u2p-map__fallback-title { margin: 0; font-size: 14px; font-weight: 800; }
.u2p-map__fallback-desc { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; max-width: 42ch; }
.u2p-iw { padding: 9px 11px; min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.u2p-iw__name { font-size: 13px; font-weight: 800; color: var(--text); }
.u2p-iw__cat { font-size: 11px; color: var(--text-3); }
@media (max-width: 767px) { .u2p-map__canvas { height: 62vh; } }

/* =========================================================================
   [M5o] 플랫폼디자인.zip static-theme 이식 브릿지.
   정적본의 nd-* 시각 언어를 기존 u2p-* 데이터 마크업에 매핑한다.
   목적: 데이터/라우팅/지도 JS 셀렉터는 보존하면서 front/list/single/map 외관 정돈.
   ========================================================================= */

:root {
	--surface-3: #ebebe5;
	--text-inv: #fff;
	--ad: #9a8f72;
	--ad-soft: #f4f0e6;
	--sh-3: 0 12px 34px rgba(28,30,24,.14);
}

body.u2p {
	font-size: 16px;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
}

.u2p-container { max-width: 1200px; padding: 0 16px; }
.u2p-main { min-height: 60vh; padding: 0 0 56px; }

/* platform header */
.u2p-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--sh-1);
	-webkit-backdrop-filter: none;
	        backdrop-filter: none;
}
.u2p-header__inner { min-height: 64px; gap: 16px; }
.u2p-brand { flex: none; gap: 9px; min-height: 44px; }
.u2p-brand__icon {
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--accent);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 17px;
	font-weight: 900;
	line-height: 1;
	box-shadow: var(--sh-1);
}
.u2p-brand__word {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--text);
	white-space: nowrap;
}
.u2p-brand__word::first-letter { color: var(--accent-ink); }
.u2p-brand__badge {
	height: 24px;
	padding: 0 10px;
	font-size: 12px;
	background: var(--accent-soft);
	color: var(--accent-ink);
	border-color: var(--accent-line);
}
.u2p-nav { margin-left: auto; }
.u2p-nav__list { gap: 2px; }
.u2p-nav__link {
	height: 40px;
	padding: 0 12px;
	border-radius: var(--r-sm);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-2);
}
.u2p-nav__link:hover,
.u2p-nav__link[aria-current="page"],
.u2p-nav__item.current-menu-item .u2p-nav__link {
	background: var(--surface-2);
	color: var(--text);
}
.u2p-header__actions { gap: 8px; }
.u2p-header__search {
	height: 40px;
	padding: 0 14px;
	background: var(--surface-2);
	border-color: var(--border);
	border-radius: var(--r-md);
	font-weight: 700;
}
.u2p-btn--ghost,
.u2p-header__login {
	height: 40px;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: #fff;
	border: 0;
	font-weight: 800;
}

/* front hero: static-theme index hero card */
.u2p-main--home .u2p-hero,
.u2p-main--network .u2p-hero {
	background: transparent;
	border: 0;
	padding: 28px 0 22px;
}
.u2p-main--home .u2p-hero::after,
.u2p-main--network .u2p-hero::after { display: none; }
.u2p-main--home .u2p-hero__inner,
.u2p-main--network .u2p-hero__inner {
	max-width: 100%;
	text-align: center;
	padding: 30px 22px;
	border: 1px solid var(--accent-line);
	border-radius: var(--r-lg);
	background: linear-gradient(160deg, var(--accent-soft), var(--surface) 78%);
	box-shadow: none;
}
.u2p-hero__title {
	margin: 0 0 14px;
	font-size: clamp(24px, 4.4vw, 38px);
	line-height: 1.2;
	letter-spacing: -.03em;
	font-weight: 900;
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--text);
	text-wrap: balance;
}
.u2p-hero__sub {
	margin: 0 auto 18px;
	max-width: 58ch;
	font-size: 15px;
	color: var(--text-2);
}
.u2p-hero .u2p-search {
	max-width: 760px;
	margin: 0 auto;
	padding: 10px;
	border-radius: var(--r-lg);
	border: 1.5px solid var(--border-strong);
	background: var(--surface);
	box-shadow: var(--sh-2);
}
.u2p-hero__suggest,
.u2p-hero__regions { justify-content: center; }
.u2p-hero__suggest-link,
.u2p-hero__region-link,
.u2p-filterchip,
.u2p-pager__link,
.u2p-place__related-link,
.u2p-sitecard__badge {
	min-height: 40px;
	border-radius: var(--r-pill);
}

/* sections + archive */
.u2p-section { padding: 14px 0; }
.u2p-section__title,
.u2p-archive__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -.02em;
}
.u2p-archive { padding-top: 22px; }
.u2p-archive__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}
.u2p-tabs {
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	background: var(--surface-2);
	padding: 3px;
	margin-bottom: 16px;
	width: fit-content;
}
.u2p-tab {
	min-height: 34px;
	border: 0;
	border-radius: var(--r-pill);
	margin: 0;
	padding: 0 18px;
	font-size: 13px;
	font-weight: 800;
}
.u2p-tab[aria-current="page"] {
	background: var(--surface);
	box-shadow: var(--sh-1);
	border: 0;
}

/* search/filter */
.u2p-search {
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
}
.u2p-search__input,
.u2p-search__select {
	min-height: 44px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background-color: var(--surface);
}
.u2p-search__submit,
.u2p-btn {
	min-height: 44px;
	border-radius: var(--r-sm);
	font-weight: 800;
}

/* place cards — static-theme card fidelity */
.u2p-list {
	grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr));
	gap: 14px;
}
.u2p-card {
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	background: var(--surface);
}
.u2p-card:hover {
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
	border-color: var(--accent-line);
}
.u2p-card__thumb { aspect-ratio: 16 / 10; }
.u2p-card__thumb-ph {
	background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 10px, var(--surface-3) 10px, var(--surface-3) 20px);
}
.u2p-card__catbadge {
	top: 8px;
	left: 8px;
	font-size: 10.5px;
	font-weight: 800;
	color: #fff;
	background: var(--accent);
}
.u2p-card__body { padding: 12px 13px 14px; }
.u2p-card__title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.u2p-card__addr { font-size: 12.5px; }

/* map — preserve .u2p-map__canvas[data-u2-map] for Kakao JS */
.u2p-archive--map .u2p-container { max-width: 1200px; }
.u2p-map__canvas {
	height: 600px;
	min-height: 320px;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: #e7edf0;
	box-shadow: var(--sh-1);
}
.u2p-map__fallback { border-radius: var(--r-md); }

/* single detail */
.u2p-single .u2p-container { max-width: 980px; }
.u2p-place {
	max-width: none;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	padding: 24px;
}
.u2p-place__head { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 16px; }
.u2p-place__title {
	font-size: clamp(24px, 4vw, 36px);
	letter-spacing: -.03em;
	font-weight: 900;
}
.u2p-place__facts {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 10px;
}
.u2p-place__fact {
	grid-template-columns: 82px 1fr;
	padding: 12px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
}
.u2p-place__action {
	min-height: 44px;
	border-radius: var(--r-sm);
	font-weight: 800;
}

/* footer */
.u2p-footer {
	margin-top: 48px;
	background: var(--surface);
	border-top: 1px solid var(--border);
}
.u2p-footer__grid {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 28px;
	padding: 36px 16px 20px;
}
.u2p-footer__bottom { padding: 16px; }

@media (max-width: 767px) {
	.u2p-header__inner {
		min-height: 0;
		padding-top: 10px;
		padding-bottom: 10px;
		flex-wrap: wrap;
	}
	.u2p-nav {
		order: 3;
		width: 100%;
		margin: 0;
	}
	.u2p-nav__list {
		display: flex;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
	}
	.u2p-nav__link { white-space: nowrap; }
	.u2p-hero .u2p-search__row { display: grid; grid-template-columns: 1fr; }
	.u2p-tabs { width: 100%; }
	.u2p-tab { flex: 1; justify-content: center; }
	.u2p-place { padding: 18px; border-radius: var(--r-md); }
	.u2p-map__canvas { height: 62vh; }
}

/* ---------------------------------------------------------------------
   [M5p] Playwright visual audit 보강:
   - 홈: 추천 카드/출처/지도/광고/빠른탐색 섹션 복원
   - 목록: 레퍼런스형 행 리스트 + 지역 빠른 찾기
   - 지도: 좌측 리스트 + 우측 지도 2분할
   ------------------------------------------------------------------ */
.u2p-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}
.u2p-section__desc {
	margin: 4px 0 0;
	color: var(--text-3);
	font-size: 13px;
	line-height: 1.55;
}
.u2p-more {
	flex: none;
	color: var(--accent-ink);
	font-weight: 900;
	font-size: 13px;
	text-decoration: none;
}
.u2p-home-picks .u2p-list--picks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
}
.u2p-source-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 18px;
	padding: 18px 20px;
	border: 1.5px solid var(--accent-line);
	border-left: 4px solid var(--accent);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text-2);
	font-size: 13px;
}
.u2p-source-strip__ic {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-weight: 900;
}
.u2p-source-strip strong {
	margin-left: auto;
	color: var(--accent-ink);
	white-space: nowrap;
}
.u2p-map-teaser {
	display: grid;
	place-items: center;
	min-height: 360px;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	text-align: center;
	color: var(--text-2);
}
.u2p-map-teaser__title {
	margin: 0 0 8px;
	color: var(--text);
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -.02em;
}
.u2p-map-teaser__desc {
	margin: 0 0 16px;
	font-size: 14px;
}
.u2p-ad-slot {
	display: grid;
	place-items: center;
	min-height: 96px;
	border: 1px dashed color-mix(in srgb, var(--ad) 55%, transparent);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--ad) 9%, transparent);
	color: var(--text-3);
	text-align: center;
}
.u2p-ad-slot span {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .18em;
	color: var(--ad);
}
.u2p-ad-slot small {
	display: block;
	margin-top: 6px;
	font-size: 12px;
}
.u2p-news-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	box-shadow: var(--sh-1);
	overflow: hidden;
}
.u2p-news-item {
	padding: 14px 16px;
	border-top: 1px solid var(--border);
}
.u2p-news-item:first-child {
	border-top: 0;
}
.u2p-news-item__link {
	display: block;
	color: var(--text);
	text-decoration: none;
	font-weight: 900;
	line-height: 1.45;
}
.u2p-news-item__link:hover {
	color: var(--accent-ink);
}
.u2p-news-item__desc {
	margin: 6px 0 0;
	color: var(--text-2);
	font-size: 13px;
	line-height: 1.55;
}
.u2p-news-item__meta {
	margin: 7px 0 0;
	color: var(--text-3);
	font-size: 12px;
	font-weight: 800;
}
.u2p-news-disclosure {
	margin: 10px 0 0;
	color: var(--text-3);
	font-size: 12px;
	text-align: right;
}
.u2p-explore-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 16px;
	align-items: stretch;
}
.u2p-panel {
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	box-shadow: var(--sh-1);
	padding: 18px;
	min-width: 0;
}
.u2p-panel h3 {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 900;
}
.u2p-panel p {
	margin: 0 0 12px;
	color: var(--text-2);
	font-size: 13px;
	line-height: 1.6;
}
.u2p-panel a {
	color: var(--accent-ink);
	font-weight: 900;
	text-decoration: none;
}
.u2p-rank {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.u2p-rank li {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--border);
}
.u2p-rank li:first-child { border-top: 0; }
.u2p-rank__num {
	color: var(--accent-ink);
	font-weight: 900;
}
.u2p-rank__delta {
	color: var(--text-3);
	font-weight: 900;
}
.u2p-guide-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.u2p-guide-list li {
	display: grid;
	gap: 3px;
	padding: 12px;
	border-radius: var(--r-sm);
	background: var(--surface-2);
}
.u2p-guide-list span {
	color: var(--text-2);
	font-size: 12.5px;
}
.u2p-region-finder {
	margin: 18px 0;
	padding: 22px;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	box-shadow: var(--sh-1);
}
.u2p-region-finder__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.u2p-region-finder h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 900;
}
.u2p-region-finder__head a {
	color: var(--text-2);
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	padding: 8px 12px;
	text-decoration: none;
	font-weight: 800;
	font-size: 12px;
}
.u2p-region-finder__trail {
	margin: 0 0 10px;
	color: var(--text-3);
	font-size: 13px;
	font-weight: 800;
}
.u2p-region-finder__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.u2p-region-chip {
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--text-2);
	text-decoration: none;
	font-weight: 800;
	font-size: 13.5px;
}
.u2p-region-chip:hover,
.u2p-region-chip.is-active {
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
}
.u2p-archive:not(.u2p-archive--map) .u2p-directory__count {
	margin: 20px 0 8px;
	font-size: 16px;
	font-weight: 900;
}
.u2p-archive:not(.u2p-archive--map) .u2p-list {
	display: block;
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--border);
}
.u2p-archive:not(.u2p-archive--map) .u2p-card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.u2p-archive:not(.u2p-archive--map) .u2p-card:hover {
	transform: none;
	box-shadow: none;
	background: var(--surface-2);
}
.u2p-archive:not(.u2p-archive--map) .u2p-card__thumb {
	width: 96px;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-sm);
}
.u2p-archive:not(.u2p-archive--map) .u2p-card__catbadge {
	display: none;
}
.u2p-archive:not(.u2p-archive--map) .u2p-card__body {
	padding: 0;
	gap: 5px;
}
.u2p-archive:not(.u2p-archive--map) .u2p-card__title {
	font-size: 17px;
}
.u2p-archive:not(.u2p-archive--map) .u2p-card__addr {
	font-size: 13px;
}
.u2p-card__call {
	position: relative;
	z-index: 2;
}
.u2p-map-shell {
	margin-top: 18px;
}
.u2p-map-shell__grid {
	display: grid;
	grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}
.u2p-map-shell__list {
	display: grid;
	gap: 10px;
}
.u2p-map-list {
	display: grid;
	gap: 10px;
}
.u2p-map-list__row {
	position: relative;
}
.u2p-map-list__num {
	position: absolute;
	left: 94px;
	top: 16px;
	z-index: 3;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	box-shadow: var(--sh-1);
}
.u2p-map-list .u2p-card {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 10px;
	border-radius: var(--r-md);
}
.u2p-map-list .u2p-card__thumb {
	width: 86px;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-sm);
}
.u2p-map-list .u2p-card__catbadge { display: none; }
.u2p-map-list .u2p-card__body { padding: 0 0 0 18px; gap: 5px; }
.u2p-map-list .u2p-card__title { font-size: 14px; }
.u2p-map-list .u2p-card__addr { font-size: 12px; }
.u2p-map-list .u2p-badge--muted { display: none; }
.u2p-map-shell__map {
	position: sticky;
	top: 88px;
}
.u2p-map-shell .u2p-map { margin: 0; }
.u2p-map-shell .u2p-map__canvas {
	height: 600px;
	min-height: 420px;
	border-style: solid;
	box-shadow: var(--sh-1);
}
.u2p-place-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}
.u2p-place-layout .u2p-place {
	margin: 0;
}
.u2p-place-aside {
	position: sticky;
	top: 88px;
	display: grid;
	gap: 14px;
}
.u2p-aside-card {
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	box-shadow: var(--sh-1);
	padding: 16px;
}
.u2p-aside-card h2 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 900;
}
.u2p-mini-map {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-sm);
	margin-bottom: 12px;
	color: var(--text-3);
	font-size: 12px;
	font-weight: 800;
}
.u2p-aside-card__text {
	margin: 0 0 12px;
	color: var(--text-2);
	font-size: 13px;
	line-height: 1.6;
}
.u2p-btn--wide {
	width: 100%;
}
.u2p-check-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 18px;
	color: var(--text-2);
	font-size: 13px;
	line-height: 1.6;
}
.u2p-faq {
	border-top: 1px solid var(--border);
	padding: 10px 0;
}
.u2p-faq:first-of-type {
	border-top: 0;
}
.u2p-faq summary {
	cursor: pointer;
	font-weight: 800;
}
.u2p-faq p {
	margin: 8px 0 0;
	color: var(--text-2);
	font-size: 13px;
	line-height: 1.6;
}
@media (max-width: 1023px) {
	.u2p-home-picks .u2p-list--picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.u2p-explore-grid { grid-template-columns: 1fr; }
	.u2p-map-shell__grid { grid-template-columns: 1fr; }
	.u2p-map-shell__map { position: relative; top: auto; }
	.u2p-place-layout { grid-template-columns: 1fr; }
	.u2p-place-aside { position: relative; top: auto; }
}
@media (max-width: 767px) {
	.u2p-section__head { align-items: flex-start; flex-direction: column; }
	.u2p-home-picks .u2p-list--picks { grid-template-columns: 1fr; }
	.u2p-source-strip { align-items: flex-start; flex-direction: column; }
	.u2p-source-strip strong { margin-left: 0; }
	.u2p-map-teaser { min-height: 260px; }
	.u2p-region-finder { padding: 16px; }
	.u2p-region-finder__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
	.u2p-region-chip { flex: none; }
	.u2p-archive:not(.u2p-archive--map) .u2p-card,
	.u2p-map-list .u2p-card {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 12px;
	}
	.u2p-archive:not(.u2p-archive--map) .u2p-card__thumb,
	.u2p-map-list .u2p-card__thumb {
		width: 78px;
	}
	.u2p-map-list__num { left: 76px; }
	.u2p-map-shell .u2p-map__canvas { height: 58vh; min-height: 340px; }
}