/* PETDORI COMMON UI | former base, components, header, navigation + toast
 * Keep page-only styles in their respective CSS files.
 * Original spacing/token values preserved; tab typography standardized.
 */

/* 01. Variables, typography and layout (original base.css) */
:root {
 --petdori-bg:#F4F7F9; --petdori-surface:#fff; --petdori-text:#17191C;
 --petdori-text-sub:#5F6673; --petdori-border:#E0E4EB;
 --petdori-primary:#2563EB; --petdori-secondary:#F7F8FA;
 --petdori-third:#EEF5FF; --petdori-third-border:#C9DCFF; --petdori-third-text:#2262D3;
 --petdori-on-primary:#fff;
 --petdori-radius-sm:8px; --petdori-radius-md:14px; --petdori-radius-lg:20px;
 --petdori-max-width:480px; --petdori-font-base:16px;
 --petdori-font-xs:.75rem; --petdori-font-sm:.875rem; --petdori-font-md:14px;
 --petdori-font-lg:19.5px; --petdori-font-xl:1.375rem;
 --petdori-space-1:4px; --petdori-space-2:8px; --petdori-space-3:12px;
 --petdori-space-4:8px; --petdori-space-5:8px; --petdori-space-6:24px;
 --petdori-nav-height:72px;
 --petdori-nav-gap:12px;
 --petdori-nav-clearance:12px;
 /* Native wrapper may override these to 0px only if it owns system insets. */
 --petdori-safe-top:env(safe-area-inset-top,0px);
 --petdori-safe-bottom:env(safe-area-inset-bottom,0px);
 color-scheme:light;
}
html[data-theme="dark"] {
 --petdori-bg:#121619; --petdori-surface:#1C2227; --petdori-text:#F0F3F5;
 --petdori-text-sub:#B0BBC4; --petdori-border:#36414A;
 --petdori-primary:#8DD6BD; --petdori-secondary:#233C34; --petdori-on-primary:#102B21;
 color-scheme:dark;
}
html[data-font-size="large"] { --petdori-font-base:18px; }
* { box-sizing:border-box; }
html { font-size:var(--petdori-font-base); scroll-padding-top:5rem; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--petdori-bg); color:var(--petdori-text); font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif; font-size:var(--petdori-font-md); line-height:1.6; overflow-wrap:anywhere; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--petdori-primary); outline-offset:3px; }
img,video,svg { max-width:100%; }
img,video { height:auto; }
h1,h2,h3,p { margin:0 0 var(--petdori-space-3); }
h1 { font-size:var(--petdori-font-xl); line-height:1.4; }
h2 { font-size:var(--petdori-font-lg); line-height:1.5; }
h3 { font-size:var(--petdori-font-md); }
.pd-shell {
    max-width:var(--petdori-max-width);
    min-height:100vh;
    min-height:100dvh;
    margin-inline:auto;
    padding-bottom:calc(var(--petdori-nav-height) + var(--petdori-nav-gap) + var(--petdori-safe-bottom) + var(--petdori-nav-clearance));
}
.pd-main { padding:var(--petdori-space-5) var(--petdori-space-4); }
.pd-main > * + * { margin-top:var(--petdori-space-4); }
.pd-muted { color:var(--petdori-text-sub); font-size:var(--petdori-font-sm); }
.pd-skip { position:fixed; left:var(--petdori-space-4); top:-100px; z-index:99999; background:var(--petdori-surface); padding:var(--petdori-space-3); }
.pd-skip:focus { top:var(--petdori-space-3); }
.pd-content a:not(.pd-button) { color:var(--petdori-primary); text-decoration:underline; }
.pd-content table { display:block; max-width:100%; overflow-x:auto; }
.pd-content pre { overflow-x:auto; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }


/* 02. Shared buttons, cards and form primitives (original components.css) */
.pd-card { display:block; padding:var(--petdori-space-5); background:var(--petdori-surface); border:1px solid var(--petdori-border); border-radius:var(--petdori-radius-md); }
.pd-card > :last-child { margin-bottom:0; }
.pd-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:var(--petdori-space-2) var(--petdori-space-5); border:1px solid transparent; border-radius:var(--petdori-radius-sm); background:var(--petdori-primary); color:var(--petdori-on-primary); font-weight:600; cursor:pointer; }
.pd-button--secondary { background:var(--petdori-surface); color:var(--petdori-text); border-color:var(--petdori-border); }
.pd-empty { padding:calc(var(--petdori-space-6) * 2) var(--petdori-space-4); text-align:center; background:var(--petdori-surface); border:1px solid var(--petdori-border); border-radius:var(--petdori-radius-lg); }
.pd-empty p { margin:0; color:var(--petdori-text-sub); font-size:var(--petdori-font-sm); }
.pd-chips { display:flex; gap:var(--petdori-space-2); overflow-x:auto; padding:var(--petdori-space-1); }
.pd-chip { flex-shrink:0; min-height:44px; display:inline-flex; align-items:center; padding:var(--petdori-space-2) var(--petdori-space-4); border:1px solid var(--petdori-border); border-radius:999px; background:var(--petdori-surface); }
.pd-chip[aria-current] { border-color:var(--petdori-primary); color:var(--petdori-primary); background:var(--petdori-secondary); font-weight:700; }
.pd-tabs { display:flex; gap:var(--petdori-space-2); border-bottom:1px solid var(--petdori-border); }
.pd-tabs a { flex:1; min-height:44px; padding:var(--petdori-space-3); text-align:center; border-bottom:2px solid transparent; }
.pd-tabs a[aria-current] { border-color:var(--petdori-primary); color:var(--petdori-primary); font-weight:700; }
.pd-pagination { display:flex; justify-content:center; align-items:center; gap:var(--petdori-space-3); }
.pd-tags { color:var(--petdori-primary); font-size:var(--petdori-font-sm); }
input,select,textarea { max-width:100%; padding:var(--petdori-space-3); color:var(--petdori-text); background:var(--petdori-surface); border:1px solid var(--petdori-border); border-radius:var(--petdori-radius-sm); }


/* 03. Common app header (original header.css + consistent tabs) */
/* =========================
   Common Header
========================= */
.pd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: calc(44px + var(--petdori-safe-top));
    padding: calc(8px + var(--petdori-safe-top)) 14px 0 12px;
    background: var(--petdori-surface);
}

/* Left */
.pd-header-left {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.pd-header-title {
    color: var(--petdori-text);
    font-size: var(--petdori-font-lg);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

/* Actions */
.pd-header-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 2px;
}

/* Icon Button */
.pd-header-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--petdori-text);
}

.pd-header-icon-button svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pd-header-icon-button:active {
    background: var(--petdori-secondary);
}

/* WordPress Admin Bar */
.admin-bar .pd-header {
    margin-top: 0;
}

/* =========================
   Activity Tabs (walk page only)
   Other pages keep the original title.
========================= */
.pd-header--tabs {
    min-height: calc(44px + var(--petdori-safe-top));
    padding-bottom: 0;
}

.pd-header-tabs {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.pd-header-tabs::-webkit-scrollbar {
    display: none;
}

.pd-header-tabs a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 32px;
    color: #bdc5d0;
    font-size: var(--petdori-font-lg);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.9px;
    text-decoration: none;
    white-space: nowrap;
}

.pd-header-tabs a[aria-current="page"] {
    color: var(--petdori-text);
}

.pd-header-tabs a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 375px) {
    .pd-header-tabs {
        gap: 18px;
    }
    .pd-header-tabs a {
        font-size: var(--petdori-font-lg);
    }
}

/* Common header: tab titles and actions share the same top bar. */
.pd-header-left { flex: 1 1 auto; }
.pd-header-actions { flex: 0 0 auto; }
.pd-header-icon-button { cursor: pointer; }
.pd-header-icon-button:focus-visible { outline: 2px solid var(--petdori-primary); outline-offset: 2px; }


/* 04. Floating bottom navigation (original navigation.css) */
.pd-bottom-nav {
    position:fixed;
    z-index:30;
    left:50%;
    bottom:calc(var(--petdori-nav-gap) + var(--petdori-safe-bottom));
    transform:translateX(-50%);
    width:calc(100% - 32px);
    max-width:calc(var(--petdori-max-width, 480px) - 32px);
    height:var(--petdori-nav-height);
    padding:5px;
    display:flex;
    align-items:stretch;
    border:1px solid rgba(220,225,233,.9);
    border-radius:999px;
    background:rgba(255,255,255,.97);
    box-shadow:0 4px 20px rgba(20,30,50,.09);
    box-sizing:border-box;
}
.pd-bottom-nav a {
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:44px;
    gap:4px;
    border-radius:999px;
    color:var(--petdori-text-sub);
    font-size:var(--petdori-font-xs);
    font-weight:500;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .18s ease,color .18s ease;
}
.pd-bottom-nav a[aria-current="page"] {
    background:#eef1f5;
    color:var(--petdori-primary);
    font-weight:700;
}
.pd-bottom-nav a[aria-current="page"] svg { stroke-width:2.3; }
.pd-bottom-nav a svg { display:block; width:24px; height:24px; flex-shrink:0; }
@media (hover:hover) {
    .pd-bottom-nav a:not([aria-current="page"]):hover { background:rgba(240,243,247,.85); }
}
@media (prefers-reduced-motion:reduce) {
    .pd-bottom-nav a { transition:none; }
}
html[data-theme="dark"] .pd-bottom-nav {
    background:rgba(28,34,39,.97);
    border-color:var(--petdori-border);
    box-shadow:0 4px 20px rgba(0,0,0,.24);
}
html[data-theme="dark"] .pd-bottom-nav a[aria-current="page"] {
    background:#30413F;
    color:var(--petdori-primary);
}


/* 05. Shared toast */
.pd-toast {
    position:fixed;
    z-index:1800;
    bottom:calc(var(--petdori-nav-height) + var(--petdori-nav-gap) + var(--petdori-safe-bottom) + 16px);
    left:50%;
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;
    max-width:min(380px, calc(100vw - 32px));
    min-height:44px;
    padding:12px 15px;
    border:1px solid var(--petdori-border);
    border-radius:12px;
    background:var(--petdori-surface);
    color:var(--petdori-text);
    box-shadow:0 8px 28px rgba(15,23,42,.16);
    transform:translateX(-50%);
    font-size:13px;
    line-height:1.45;
    overflow-wrap:anywhere;
    pointer-events:none;
}
.pd-toast[hidden] { display:none!important; }
.pd-toast__icon {
    display:grid;
    flex:0 0 20px;
    place-items:center;
    width:20px;
    height:20px;
    color:var(--petdori-primary);
}
.pd-toast__icon svg { display:block; width:20px; height:20px; }
.pd-toast[data-type="success"] .pd-toast__icon { color:#16a34a; }
.pd-toast[data-type="error"] .pd-toast__icon { color:#dc2626; }
.pd-toast[data-type="info"] .pd-toast__icon { color:#2563eb; }
.pd-toast__message { min-width:0; }

/* Petdori shared map markers. Append this block to assets/css/common.css. */

/* =========================
   Map Markers - Pastel
========================= */

.pd-map-place-pin {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    box-shadow: 0 2px 9px rgba(15, 23, 42, .18);
    cursor: pointer;
}

.pd-map-place-pin svg {
    display: block;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* 동물병원 */
.pd-map-place-pin--hospital {
    background: #dbeafe;
    color: #1d4ed8;
}

/* 동반식당 */
.pd-map-place-pin--restaurant {
    background: #ffedd5;
    color: #c2410c;
}

/* 미용/목욕 */
.pd-map-place-pin--grooming {
    background: #f3e8ff;
    color: #7e22ce;
}

/* 동반카페 */
.pd-map-place-pin--cafe {
    background: #f2e7db;
    color: #785236;
}

.pd-map-place-info { width: min(250px, 70vw); padding: 12px; font-family: inherit; color: #17212f; }
.pd-map-place-info strong { display: block; font-size: 13px; line-height: 1.4; }
.pd-map-place-info p { margin: 5px 0 8px; font-size: 11px; color: #64748b; line-height: 1.5; overflow-wrap: anywhere; }
.pd-map-place-info a { font-size: 12px; font-weight: 700; color: #2563eb; text-decoration: none; }