/* 하단 탭 바: 모든 페이지 공통. 마크업은 nav.js 가 만든다.
   색은 각 페이지가 가진 변수(--pond|--paper, --line, --ink-3, --lotus-deep|--seal)를 따라가므로 밝은/어두운 모드가 저절로 맞는다. */
:root{--navh:calc(56px + env(safe-area-inset-bottom,0px))}
.smnav{position:fixed;left:0;right:0;bottom:0;z-index:8;height:var(--navh);padding-bottom:env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb,var(--pond,var(--paper,#f1f3f1)) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line,#d8ded9);font-family:var(--sans,'Noto Sans KR',system-ui,-apple-system,sans-serif)}
.smnav-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:680px;height:56px;margin:0 auto}
.smnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:0 2px;text-decoration:none;
  color:var(--ink-3,#8a928d);-webkit-tap-highlight-color:transparent}
.smnav svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.smnav span{font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:-.01em}
.smnav a.on{color:var(--lotus-deep,var(--seal,#b85c72))}
.smnav a.on span{font-weight:500}
.smnav a:focus-visible{outline:2px solid var(--lotus-deep,var(--seal,#b85c72));outline-offset:-4px;border-radius:10px}
/* 본문이 바에 가리지 않게. 상담 화면(body.app)은 자체 레이아웃이라 아래 여백만 바 높이로 둔다 */
body.hasnav:not(.app){padding-bottom:calc(var(--navh) + 28px)}
@media print{.smnav{display:none}}

/* Quiet Pond nav, unchanged links and active-key logic */
:root{--navh:calc(64px + env(safe-area-inset-bottom,0px))}
.smnav{background:color-mix(in srgb,var(--pond,var(--paper,#F5F1ED)) 97%,transparent);border-top:1px solid var(--line,#DCCFCB);box-shadow:0 -3px 11px rgba(42,30,35,.025);backdrop-filter:blur(15px)}
.smnav-in{height:64px;max-width:680px}
.smnav a{gap:4px;padding:5px 1px;min-height:58px;color:var(--ink-2,#51494D)}
.smnav a.on{color:var(--lotus-deep,var(--seal,#7E455D));background:color-mix(in srgb,var(--lotus-soft,var(--paper-2,#EEE4E2)) 31%,transparent)}
.smnav svg{width:22px;height:22px;stroke-width:1.65}
.smnav span{font-size:11.5px;font-weight:400;letter-spacing:-.035em}
.smnav a.on span{font-weight:700}
@media(max-width:360px){.smnav span{font-size:10.5px}}


/* DESIGN PASS: consistent fixed navigation */
:root{--navh:calc(65px + env(safe-area-inset-bottom,0px))}
.smnav{background:rgba(252,249,246,.97);border-top:1px solid #E2D6D1;box-shadow:0 -3px 18px rgba(80,49,57,.035);backdrop-filter:blur(15px)}
.smnav-in{height:65px;max-width:680px}
.smnav a{gap:4px;padding:6px 1px;min-height:61px;color:#74686B}.smnav a.on{color:#805062;background:#F5E9E8}
.smnav svg{width:22px;height:22px;stroke-width:1.7}.smnav span{font-size:11.5px;letter-spacing:-.035em;font-weight:500}.smnav a.on span{font-weight:700}
@media(max-width:360px){.smnav span{font-size:10.5px}}


/* v3 - original compact bottom rail, no giant fixed cards */
:root{--navh:calc(54px + env(safe-area-inset-bottom,0px))}
.smnav{height:var(--navh);background:rgba(253,250,249,.98);border-top:1px solid #EEE7E5;box-shadow:none;backdrop-filter:none}
.smnav-in{height:54px;max-width:680px}
.smnav a{min-height:51px;gap:2px;padding:4px 1px;background:transparent!important;color:#897F81}
.smnav a.on{color:#AF727F}.smnav svg{width:19px;height:19px;stroke-width:1.65}
.smnav span{font-size:10.6px;line-height:1.1;letter-spacing:-.04em;font-weight:500}
.smnav a.on span{font-weight:700}
@media(max-width:360px){.smnav span{font-size:9.7px}}