/* ── 토큰: 신뢰감 있고 공적인 ── */
:root{
  --ground:#F2F5F8; --surface:#FFFFFF; --surface-2:#EDF1F5; --surface-3:#E1E7ED;
  --line:#DDE3EA; --line-strong:#C2CCD6;
  --ink:#0F1822; --ink-2:#39485A; --muted:#5D6E80; --faint:#8B9AA8;
  --brand:#12452F; --brand-2:#1F6A4C; --brand-soft:#E1EDE6; --on-brand:#FFFFFF;
  --clay:#8A5A1E; --clay-soft:#F4EADC; --on-clay:#FFFFFF;
  --slate:#2F6B60; --slate-soft:#DEEBE7;
  --amber:#7E5A10; --amber-soft:#F4ECD8;
  --sky:#C6D8E6; --sand:#E6DCCB; --blush:#DFCFC5;
  --ph1:#C3A87E; --ph2:#88A9C4; --ph3:#87AFA3; --ph4:#C29684; --ph-glass:#F7EACA; --ph-wall:#E8EDF2;
  --shadow:0 1px 1px rgba(15,24,34,.04);
  --shadow-lift:0 2px 6px rgba(15,24,34,.07), 0 14px 32px -18px rgba(15,24,34,.3);
  --r-btn:10px; --r-card:12px; --r-chip:8px; --r-sheet:20px; --r-img:8px;
  --ease:cubic-bezier(.2,.85,.25,1);
  --sans:"Manrope","Noto Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --serif:"Manrope","Noto Sans KR",-apple-system,sans-serif;
  --mono:"Manrope","Noto Sans KR",-apple-system,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
html{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ground);}
body{
  margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;padding:0;
  /* position:fixed 로 문서를 화면에 고정 — 스크롤은 내부 영역에서만 일어난다 */
  position:fixed;inset:0;width:100%;height:100%;
  overflow:hidden;overscroll-behavior:none;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
svg{display:block;}

/* ── side panel ── */
.side{max-width:320px;flex:0 0 auto;}
.side .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:600;margin:0 0 14px;}
.side h1{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.2;margin:0 0 10px;letter-spacing:-.02em;}
.side p{color:var(--muted);font-size:14px;margin:0 0 18px;}
.side .hint{border-top:1px solid var(--line);padding-top:16px;font-size:13px;color:var(--faint);}
.side .hint b{color:var(--ink-2);font-weight:600;display:block;margin-bottom:9px;font-size:11px;font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;}
.side .rolejump{display:flex;flex-wrap:wrap;gap:6px;}
.side .rolejump button{font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);}
.side .rolejump button:hover{border-color:var(--brand);color:var(--brand);}
@media (max-width:900px){ body{padding:0;gap:0;} .side{display:none;} }

/* ── device ── */
.device{
  width:100%;max-width:480px;height:100%;flex:0 0 auto;overflow:hidden;
  background:var(--surface);border-left:1px solid var(--line);border-right:1px solid var(--line);
}
@media (min-width:1000px){
  .device{box-shadow:0 0 90px -40px rgba(20,29,26,.35);}
}
.app{width:100%;height:100%;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;position:relative;padding-top:env(safe-area-inset-top);}
@media (max-width:520px){ .device{border:none;} }

/* ── 카카오맵 레이어 ── */
#kmap{position:absolute;inset:0;z-index:0;display:none;background:var(--surface-2);
  touch-action:none;}                      /* 지도에는 모든 터치 제스처를 넘긴다 */

/* ── 지도 조작 버튼 ── */
.mapctl{position:absolute;right:12px;z-index:4;display:flex;flex-direction:column;
  border-radius:12px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line-strong);box-shadow:0 3px 12px -4px rgba(0,0,0,.3);}
.mapctl button{width:40px;height:40px;display:grid;place-items:center;
  font-size:19px;font-weight:600;color:var(--ink-2);line-height:1;}
.mapctl button + button{border-top:1px solid var(--line);}
.mapctl button:active{background:var(--surface-2);}
.mapgps{position:absolute;right:12px;z-index:4;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:0 3px 12px -4px rgba(0,0,0,.3);color:var(--ink-2);font-size:17px;}

/* ── 이 주변 다시 찾기 (직방 방식) ── */
.researchbtn{position:absolute;left:50%;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 17px;border-radius:999px;
  background:var(--brand);color:var(--on-brand);font-size:13.5px;font-weight:700;
  box-shadow:0 5px 18px -5px var(--cl-1);white-space:nowrap;}
.researchbtn svg{stroke:currentColor;}
.app.mapmode .viewport{background:transparent;}
/* 지도 화면에서는 뷰포트 레이어도 마우스를 통과시킨다 */
.app.mapmode #vp{pointer-events:none;}
.app.mapmode .scr.maps{background:transparent;pointer-events:none;}
.app.mapmode .scr.maps > div{background:transparent;pointer-events:none;}
/* 조작이 필요한 요소만 다시 살린다 — 나머지는 휠·드래그가 지도로 그대로 전달된다 */
.app.mapmode .scr.maps .topbar,
.app.mapmode .scr.maps .sheet,
.app.mapmode .scr.maps .mapctl,
.app.mapmode .scr.maps .mapgps,
.app.mapmode .scr.maps .researchbtn,
.app.mapmode .scr.maps .geoask{pointer-events:auto;}
.mapspacer{flex:1 1 auto;pointer-events:none;}
/* 위치 물어보는 카드가 떠 있는 동안에는 지도 조작 버튼을 숨긴다 —
   카드 뒤로 반쯤 가려진 버튼이 삐져나와 보이던 것을 없앤다 */
.scr.maps:has(.geoask) .mapctl,
.scr.maps:has(.geoask) .mapgps{display:none;}
.kbadge{position:absolute;left:50%;top:210px;transform:translateX(-50%);z-index:2;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;
  padding:16px 18px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.65;
  box-shadow:var(--shadow);width:min(300px,86%);}
.kbadge b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:6px;}
.kbadge code{display:block;margin-top:8px;padding:7px 9px;border-radius:8px;background:var(--surface-2);
  font-family:var(--mono);font-size:11.5px;color:var(--brand);word-break:break-all;}
.kbadge i{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-style:normal;font-size:11.5px;color:var(--faint);}
.statusbar{flex:0 0 auto;height:34px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--surface);z-index:6;}
.viewport{flex:1 1 auto;position:relative;overflow:hidden;background:var(--surface);}
#vp{position:absolute;inset:0;}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--surface);}
.body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:14px;}
/* 마지막 카드가 탭바에 닿지 않도록 넉넉히 띄운다 */
.body.pad{padding:22px 18px 30px;}
.body.grey{padding-bottom:30px;}
/* 회색 배경 화면의 카드도 본문과 같은 선에서 시작하게 */
.body.grey.pad{padding-left:18px;padding-right:18px;}
.body.grey.pad > *{margin-left:0;margin-right:0;}
.brandbar{padding-left:18px;padding-right:18px;}
.topbar{padding-left:14px;padding-right:14px;}
.sheetbody,.dockbar{padding-left:18px;padding-right:18px;}
.nav{padding-left:8px;padding-right:14px;}
.hbanner{margin-bottom:4px;}
.grid4{padding-top:4px;padding-bottom:6px;}
.strip{margin-top:10px;margin-bottom:10px;}
.block{padding-top:18px;}
.lbl{margin-top:22px;}
.lbl:first-child{margin-top:0;}
.body::-webkit-scrollbar{width:0;}
.body.grey{background:var(--surface);}

/* ── nav / heads ── */
.nav{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--line);background:var(--surface);min-height:50px;}
/* 손가락은 26x22px 를 정확히 못 맞춥니다 (애플·구글 권장 44px).
   보이는 위치는 그대로 두고 눌리는 영역만 44x44 로 넓힙니다. */
.nav .back{font-size:23px;line-height:1;color:var(--muted);
  flex:0 0 auto;width:44px;height:44px;margin:-7px -4px -7px -12px;
  display:flex;align-items:center;justify-content:flex-start;padding-left:12px;
  -webkit-tap-highlight-color:transparent;}
.nav .back:active{color:var(--ink);}
.nav .right{min-height:44px;display:flex;align-items:center;margin:-7px -6px -7px 0;padding:0 6px;}
.nav .title{font-weight:600;font-size:16px;letter-spacing:-.01em;}
.nav .right{margin-left:auto;font-size:13px;color:var(--brand);font-weight:600;}
.pad{padding:20px 18px;}
h2.big{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1.35;margin:0 0 8px;letter-spacing:-.02em;}
p.sub{color:var(--muted);font-size:14.5px;margin:0 0 20px;line-height:1.65;}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:0 0 10px;}
.sechead{display:flex;align-items:baseline;margin:0 0 12px;}
.sechead h3{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em;}
.sechead .more{margin-left:auto;font-size:12.5px;color:var(--muted);}
.prog{height:3px;background:var(--surface-2);flex:0 0 auto;}
.prog i{display:block;height:100%;background:var(--brand);transition:width .3s ease;}

/* ── buttons (FIXED: horizontal padding) ── */
.btn{
  flex:1;text-align:center;padding:15px 20px;border-radius:14px;font-weight:600;font-size:16px;
  background:var(--brand);color:var(--on-brand);line-height:1.3;
}
.btn:disabled{opacity:.35;}
.btn.ghost{background:var(--surface);border:1.5px solid var(--line-strong);color:var(--ink);}
.btn.sm{padding:11px 16px;font-size:14px;border-radius:11px;}
.btn.link{background:none;color:var(--muted);font-weight:500;font-size:14px;padding:12px 16px;}
/* 가로 꽉 채우는 버튼도 안쪽은 가로 한 줄 가운데 정렬로 둔다.
   display:block 이면 아이콘이 글자 왼쪽 끝에 따로 떨어져 보인다. */
.btn.wide{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;}
.btn.wide > svg{flex:0 0 auto;display:block;}
.foot{flex:0 0 auto;padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--surface);display:flex;gap:9px;}

/* ── options / chips / fields ── */
.opts{display:flex;flex-direction:column;gap:10px;}
.opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  border:1.5px solid var(--line);border-radius:15px;padding:15px 16px;background:var(--surface);}
.opt.on{border-color:var(--brand);background:var(--brand-soft);}
.opt .em{flex:0 0 auto;width:30px;display:grid;place-items:center;color:var(--brand);}
.opt .tx{min-width:0;flex:1;display:block;}
.opt .t{display:block;font-weight:600;font-size:15.5px;line-height:1.4;}
.opt .d{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5;}
.opt .chk{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);flex:0 0 auto;position:relative;}
.opt.on .chk{background:var(--brand);border-color:var(--brand);}
.opt.on .chk::after{content:"";position:absolute;left:6.5px;top:3px;width:5px;height:10px;border:solid var(--on-brand);border-width:0 2px 2px 0;transform:rotate(45deg);}
.chipset{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.chip{display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;padding:0 15px;height:38px;line-height:1;border-radius:999px;border:1.5px solid var(--line);
  color:var(--ink-2);background:var(--surface);font-weight:500;white-space:nowrap;box-sizing:border-box;}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600;}
.chip.sm{font-size:12.5px;padding:0 12px;height:30px;}
.field{margin-bottom:18px;}
.field > label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;}
.field .help{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.55;}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=tel],input[type=search],textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;
  border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);}
input:focus,textarea:focus{outline:none;border-color:var(--brand);}
.inline{display:flex;align-items:center;gap:9px;}
.inline .unit{font-size:13px;color:var(--muted);flex:0 0 auto;}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2);}
/* 숫자 고르기 — +를 스무 번 누르는 것보다 목록에서 한 번에 고르는 편이 빠릅니다 */
.numsel{position:relative;}
.numsel select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;font:inherit;font-family:var(--mono);font-size:16px;font-weight:600;
  text-align:center;text-align-last:center;color:var(--ink);
  padding:13px 42px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface-2);cursor:pointer;}
.numsel select:focus{outline:none;border-color:var(--accent);}
.numsel select::-ms-expand{display:none;}
.numsel > i{position:absolute;right:17px;top:50%;width:9px;height:9px;pointer-events:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);}
.stepper button{width:44px;height:46px;font-size:19px;color:var(--brand);font-weight:600;}
.stepper .val{flex:1;text-align:center;font-family:var(--mono);font-weight:600;font-size:16px;}

/* ── intro carousel ── */
.intro{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;background:var(--surface);padding-top:30px;}
.introart{flex:0 1 auto;display:grid;place-items:center;padding:0 20px 22px;min-height:0;}
.introart svg{width:100%;max-width:320px;height:auto;}
.introtx{flex:0 0 auto;padding:0 26px;text-align:center;}
.introtx h2{font-size:25px;font-weight:700;line-height:1.4;margin:0 0 12px;letter-spacing:-.025em;}
.introtx h2 em{font-style:normal;color:var(--brand);}
.introtx p{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0;}
.dots{display:flex;justify-content:center;gap:6px;padding:30px 0 8px;flex:0 0 auto;}
.dots i, .dots button{width:7px;height:7px;border-radius:99px;background:var(--line-strong);
  transition:width .25s,background .25s;padding:0;border:0;flex:0 0 auto;}
.dots button{position:relative;cursor:pointer;}
/* 점이 작아 손가락으로 누르기 어려우니, 보이는 크기는 그대로 두고 누를 수 있는 넓이만 키운다 */
.dots button::after{content:"";position:absolute;inset:-14px -7px;}
.dots i.on, .dots button.on{width:22px;background:var(--brand);}
.swipehint{flex:0 0 auto;text-align:center;font-size:12px;color:var(--faint);margin:0;padding-bottom:6px;
  letter-spacing:.01em;}
/* 손으로 끌 때 따라오는 판 */
.intropane{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;
  touch-action:pan-y;will-change:transform;}
.intropane.drag{transition:none;}
.intropane.settle{transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .2s ease;}
.skip{position:absolute;top:2px;right:18px;font-size:13.5px;color:var(--faint);z-index:3;padding:6px;}

/* ── login ── */
.loginbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 18px;border-radius:14px;border:1.5px solid var(--line-strong);
  font-size:15.5px;font-weight:600;background:var(--surface);margin-bottom:10px;}
.loginbtn.kakao{background:#FEE500;border-color:#FEE500;color:#1A1A1A;}
.loginbtn.apple{background:var(--ink);border-color:var(--ink);color:var(--ground);}
.loginbtn.mail{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.loginbtn.google{background:var(--surface);border-color:var(--line-strong);color:var(--ink);}
.loginbtn.mail svg{stroke:currentColor;}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;margin:20px 0 14px;}

/* ── 로그인 · 회원가입 전환 ── */
.seg{position:relative;display:flex;background:var(--surface-2);border:1px solid var(--line);
  border-radius:13px;padding:4px;margin:0 0 26px;}
.seg > button{flex:1;position:relative;z-index:2;height:42px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--muted);transition:color .2s;}
.seg > button.on{color:var(--on-accent);}
.seg > i{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:42px;border-radius:10px;
  background:var(--accent);z-index:1;transition:transform .26s cubic-bezier(.22,1,.32,1);}
.seg.b > i{transform:translateX(100%);}

.pwwrap{position:relative;}
.pwwrap input{padding-right:66px;}
.pwwrap .peek{position:absolute;right:7px;top:50%;transform:translateY(-50%);
  font-size:12.5px;font-weight:600;color:var(--muted);padding:9px 8px;}

.formerr{display:flex;gap:9px;align-items:flex-start;background:var(--amber-soft);
  border-radius:12px;padding:13px 15px;font-size:13px;line-height:1.6;margin:0 0 18px;}
.formerr b{color:var(--clay);flex:0 0 auto;}
.authnote{font-size:12.5px;color:var(--muted);line-height:1.75;margin:18px 0 0;text-align:center;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}

/* ── home ── */
.brandbar{display:flex;align-items:center;gap:8px;padding:12px 16px 10px;flex:0 0 auto;background:var(--surface);}
.brandbar .logo{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:-.02em;}
.brandbar .acts{margin-left:auto;display:flex;gap:6px;}
.brandbar .acts button{width:34px;height:34px;display:grid;place-items:center;color:var(--muted);border-radius:10px;}
.brandbar .acts button.writebtn{width:auto;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 15px;border-radius:999px;color:var(--on-accent);}
.hbanner{margin:0 16px 18px;border-radius:18px;overflow:hidden;background:var(--brand-soft);
  display:flex;align-items:center;gap:8px;padding:18px 16px;position:relative;}
.hbanner .tx{flex:1;min-width:0;z-index:1;}
.hbanner .ad{position:absolute;top:9px;right:11px;font-family:var(--mono);font-size:9px;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:4px;padding:1px 4px;}
.hbanner .k{font-size:12px;color:var(--brand);font-weight:600;margin-bottom:5px;}
.hbanner .t{font-size:17.5px;font-weight:700;line-height:1.4;letter-spacing:-.02em;}
.hbanner .cta{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--brand);
  border:1.5px solid var(--brand);border-radius:999px;padding:5px 13px;}
.hbanner .art{flex:0 0 auto;width:82px;}
/* ── 홈 배너 · 영수증형 ──
   숫자 두 개를 나란히 놓는 대신, 어떤 돈이 왜 더해지는지 세로로 읽히게 한다.
   '급여/비급여' 같은 말을 몰라도 뜻이 통해야 한다. */
.hbanner.receipt{display:block;text-align:left;width:100%;}
.hbanner.receipt .t{margin-bottom:14px;}
.rcpt{background:var(--surface);border-radius:12px;padding:4px 14px;}
.rcpt .r{display:flex;align-items:flex-start;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--line);}
.rcpt .r:last-child{border-bottom:0;}
.rcpt .rl{flex:1;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.45;}
.rcpt .rl i{display:block;margin-top:3px;font-style:normal;font-size:11.5px;color:var(--faint);line-height:1.5;}
.rcpt .r b{flex:0 0 auto;font-family:var(--mono);font-size:15px;font-weight:600;
  color:var(--ink-2);letter-spacing:-.02em;white-space:nowrap;padding-top:1px;}
.rcpt .r b.plus{color:var(--clay);}
.rcpt .r b.good{color:var(--brand);font-size:19px;font-weight:700;}
.rcpt .r b.warn{color:var(--amber);font-size:19px;font-weight:700;}
.rcpt .r.tot{border-top:1.5px solid var(--line-strong);}
.rcpt .r.tot .rl{font-weight:700;color:var(--ink);font-size:13.5px;}
.rcpt .r.tot b{font-size:20px;font-weight:700;color:var(--ink);}
.rnote{font-size:12px;color:var(--muted);line-height:1.7;margin:11px 0 0;}
.rnote b{color:var(--ink-2);}
.bfig{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding-left:12px;
  border-left:1px solid color-mix(in srgb,var(--brand) 22%,transparent);}
.bfig .l{font-size:10px;color:var(--muted);font-family:var(--mono);letter-spacing:.1em;}
.bfig .v{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--muted);letter-spacing:-.03em;}
.bfig .v.strong{font-size:23px;color:var(--clay);font-weight:700;}
.bfig .dn{color:var(--faint);font-size:9px;line-height:1;margin:1px 0;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 0;padding:0 10px 16px;}
.gitem{padding:9px 2px;text-align:center;border-radius:14px;}
.gitem .ic{width:46px;height:46px;margin:0 auto 7px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand);}
.gitem .ic.b{background:var(--slate-soft);color:var(--slate);}
.gitem .ic.c{background:var(--clay-soft);color:var(--clay);}
.gitem .ic.d{background:var(--amber-soft);color:var(--amber);}
.gitem .t{font-size:12px;color:var(--ink-2);font-weight:500;line-height:1.35;}
.strip{margin:0 16px 20px;border-radius:16px;background:var(--surface-2);padding:14px 16px;display:flex;align-items:center;gap:10px;width:calc(100% - 32px);box-sizing:border-box;}
.strip .tx{flex:1;min-width:0;}
.strip .t{font-size:14px;font-weight:600;line-height:1.45;}
.strip .d{font-size:12px;color:var(--muted);margin-top:3px;}
.strip .go{color:var(--muted);flex:0 0 auto;display:flex;align-items:center;}
.block{padding:0 16px 22px;}
.card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:17px 18px;}

/* ── ranked list (community teaser) ── */
.rank{display:flex;gap:10px;align-items:baseline;padding:8px 0;width:100%;text-align:left;}
.rank .n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--brand);width:13px;flex:0 0 auto;}
.rank .cat{font-size:11px;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:5px;flex:0 0 auto;}
.rank .t{font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rank .c{font-size:11.5px;color:var(--clay);font-family:var(--mono);flex:0 0 auto;}

/* ── map ── */
.mapwrap{position:absolute;inset:0;overflow:hidden;}
.mapbg{position:absolute;inset:-10%;
  background:
    radial-gradient(circle at 26% 20%, color-mix(in srgb,var(--brand) 10%,transparent) 0 20%, transparent 21%),
    radial-gradient(circle at 78% 66%, color-mix(in srgb,var(--slate) 10%,transparent) 0 16%, transparent 17%),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 54px),
    var(--surface-2);}
.road{position:absolute;background:var(--surface);opacity:.9;}
.mepin{position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;
  background:var(--slate);border:3px solid var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.3);}
.mepin::after{content:"우리 집";position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:600;color:var(--slate);white-space:nowrap;
  background:var(--surface);padding:1px 6px;border-radius:5px;border:1px solid var(--line);}
.mpin{position:absolute;transform:translate(-50%,-100%);border-radius:999px;padding:6px 11px;
  font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong);
  box-shadow:0 3px 10px -2px rgba(0,0,0,.28);--pb:var(--surface);}
.mpin.cheap{background:var(--brand);color:var(--on-brand);border-color:var(--brand);--pb:var(--brand);}
.mpin.sel{background:var(--clay);color:var(--on-clay);border-color:var(--clay);--pb:var(--clay);transform:translate(-50%,-100%) scale(1.12);z-index:4;}
.mpin::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--pb);}
.topbar{position:absolute;left:0;right:0;top:0;padding:10px 14px 6px;z-index:5;
  background:linear-gradient(var(--surface) 74%, rgba(255,255,255,.6) 90%, transparent);}
/* 지역을 아직 안 골랐을 때만 뜨는 권유 칩 */
.chip.sm.hint{background:var(--amber-soft,#FDF3E3);border-color:var(--amber);color:var(--amber);
  display:inline-flex;align-items:center;gap:5px;font-weight:700;}
.chip.sm.hint svg{width:13px;height:13px;}
.search{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;
  background:var(--surface);border:1.5px solid var(--line-strong);box-shadow:var(--shadow);font-size:14px;width:100%;}
.search .ico{color:var(--muted);flex:0 0 auto;}
.search .tx{flex:1;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search .g{font-size:12px;color:var(--brand);font-weight:600;flex:0 0 auto;}
/* 검색줄 — 왼쪽은 이름 검색, 오른쪽은 지역. 누르는 곳이 달라야 한다 */
.search .hit{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-align:left;}
.search .hit .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search .tx.ph{color:var(--faint);}
.search .clr{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--surface-2);
  color:var(--muted);font-size:13px;line-height:1;display:grid;place-items:center;}
.search .g{padding:4px 2px 4px 10px;border-left:1px solid var(--line);}
.qrow{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);}
.qrow input{flex:1;font:inherit;font-size:16px;padding:11px 13px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);}
.qrow input:focus{outline:none;border-color:var(--accent);}
.qhint{padding:26px 18px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.8;}
.qhint b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px;}
.qfield{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:var(--surface-2);
  border:1.5px solid var(--line);border-radius:13px;padding:0 6px 0 11px;transition:border-color .15s;}
.qfield:focus-within{border-color:var(--accent);background:var(--surface);}
.qmag{flex:0 0 auto;display:flex;color:var(--faint);}
.qmag svg{width:18px;height:18px;}
.qfield:focus-within .qmag{color:var(--accent);}
.qrow input{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 0;border:0;background:none;
  border-radius:0;color:var(--ink);}
.qrow input:focus{outline:none;}
.qrow input::-webkit-search-cancel-button{display:none;}
.qx{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:50%;background:var(--line);
  color:var(--surface);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;}
.qsec{padding:20px 18px 4px;}
.qsec+.qsec{padding-top:14px;border-top:1px solid var(--line);margin-top:8px;}
.qsec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.qsec-h span{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em;}
.qsec-h button{font-size:12px;color:var(--faint);background:none;border:0;padding:4px 0 4px 8px;}
.qchips{display:flex;flex-wrap:wrap;gap:8px;}
.qchip{display:inline-flex;align-items:center;max-width:100%;background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.qchip .t{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:8px 3px 8px 13px;font-size:13px;font-weight:600;color:var(--ink-2);background:none;border:0;}
.qchip .x{padding:8px 11px 8px 4px;font-size:14px;line-height:1;color:var(--faint);background:none;border:0;}
.qrecs{margin-top:-4px;}
.qrec{display:flex;align-items:center;gap:9px;width:100%;padding:12px 0;text-align:left;
  background:none;border:0;border-top:1px solid var(--line);}
.qrec:first-child{border-top:0;}
.qrec .nm{flex:1;min-width:0;}
.qrec .nm b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qrec .nm i{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qrec .ar{flex:0 0 auto;display:flex;color:var(--line-strong);}
.qrec .ar svg{width:16px;height:16px;}
.qfoot{padding:18px 18px 26px;font-size:11.5px;color:var(--faint);text-align:center;line-height:1.7;}
.qcount{font-size:12px;color:var(--faint);padding:12px 18px 4px;}
.qitem{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:15px 18px;border-top:1px solid var(--line);}
.qitem:first-of-type{border-top:none;}
.qitem .tx{flex:1;min-width:0;}
.qitem .n{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.01em;line-height:1.4;}
.qitem .a{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qitem .go{color:var(--faint);flex:0 0 auto;margin-top:3px;}
.qitem:active{background:var(--surface-2);}

.filterrow{display:flex;align-items:center;gap:6px;overflow-x:auto;margin-top:7px;padding-bottom:2px;overscroll-behavior-x:contain;scrollbar-width:none;}
.filterrow::-webkit-scrollbar{display:none;}
.filterrow::-webkit-scrollbar{height:0;}

/* ── 시설 유형 고르기 ──
   지도 위에 얹히므로 배경을 확실히 깔고, 가로로만 넘칩니다. */
.fc .fn{display:block;overflow-wrap:anywhere;}
.kindbar{display:flex;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;margin-bottom:var(--s2);padding-bottom:1px;}
.kindbar::-webkit-scrollbar{height:0;}
.kchip{flex:0 0 auto;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--surface-2);color:var(--ink-2);border:1.5px solid transparent;
  transition:background .15s,color .15s,border-color .15s;white-space:nowrap;}
.kchip.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand);}
.kindwrap{padding:var(--s3) var(--gut) 0;background:var(--surface);}
.kindwrap .kindbar{margin-bottom:var(--s3);}
.kindnote{font-size:11.5px;color:var(--faint);line-height:1.6;margin-top:var(--s2);}
.kloading{font-size:13.5px;color:var(--muted);padding:var(--s5) 0;text-align:center;}
.topbar.flat{position:relative;background:var(--surface);border-bottom:1px solid var(--line);
  padding:var(--s3) var(--gut) var(--s2);}
.sortbar.tight{padding:var(--s3) 0 var(--s1);border-bottom:0;background:transparent;}
.bdg.k{background:var(--surface-3);color:var(--ink-2);}
/* 상세 화면 맨 위, 이곳이 어떤 돌봄인지 한 줄로 */
.kindline{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap;}
.kindline b{font-size:12.5px;font-weight:700;color:var(--brand);
  background:var(--surface-2);border-radius:6px;padding:3px 8px;}
.kindline span{font-size:12.5px;color:var(--muted);}

.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);z-index:5;
  border-radius:20px 20px 0 0;box-shadow:0 -12px 32px -20px rgba(0,0,0,.5);
  border-top:1px solid var(--line);max-height:62%;display:flex;flex-direction:column;}

/* 지도 화면의 시트 — 손잡이를 끌거나 눌러서 접었다 폈다 */
/* touch-action 은 자식까지 영향을 준다. 예전에는 시트 전체가 none 이라
   목록을 손가락으로 굴리는 것까지 막혀 뻑뻑했다. 잡는 곳에만 건다. */
.sheet.dock{transition:transform .26s cubic-bezier(.4,0,.2,1);touch-action:auto;
  min-height:270px;}   /* 결과가 한 곳이어도 시트 위치가 흔들리지 않게 */
.sheet.dock.flick{transition:transform .34s cubic-bezier(.22,1,.32,1);}   /* 훅 내릴 때 */
.sheet.dock.down{transform:translateY(calc(100% - 52px));}
.sheet.dock.half{transform:translateY(38%);}
.sheet.dock.up{transform:translateY(0);}
.sheet.dragging{transition:none;}
.sheet .grab{flex:0 0 auto;padding:7px 0 3px;cursor:grab;touch-action:none;}
.sheet .grab .handle{margin:0 auto;}
.dockbar{display:flex;align-items:center;gap:8px;padding:0 16px 12px;flex:0 0 auto;
  touch-action:none;cursor:grab;}
.dockbar .a{touch-action:auto;}
.dockbar .c{font-size:13.5px;color:var(--muted);}
.dockbar .c b{color:var(--ink);font-size:15px;}
.dockbar .a{margin-left:auto;font-size:13px;color:var(--brand);font-weight:600;}
.handle{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:9px auto 4px;flex:0 0 auto;}
.sheethead{display:flex;align-items:baseline;padding:4px 16px 8px;flex:0 0 auto;}
.sheethead .c{font-size:13px;color:var(--muted);}
.sheethead .c b{color:var(--ink);}
.sheethead .a{margin-left:auto;font-size:13px;color:var(--brand);font-weight:600;}
.sheetbody{overflow-y:auto;padding:0 16px 16px;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;}
.sortbar{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;background:var(--surface);scrollbar-width:none;}
.sortbar::-webkit-scrollbar{height:0;}

/* ── facility card ── */
.fc{display:flex;gap:11px;padding:15px 0;border-top:1px solid var(--line);align-items:center;}
.fc:first-child{border-top:none;}
.thumb{width:52px;height:52px;flex:0 0 auto;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--line);overflow:hidden;align-self:flex-start;margin-top:2px;}
/* 오른쪽 금액 — 줄마다 세로로 맞춰야 눈이 비교합니다 */
.fright{flex:0 0 auto;text-align:right;line-height:1.25;padding-left:2px;white-space:nowrap;}
.fright b{display:block;font-size:18.5px;font-weight:800;letter-spacing:-.045em;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.fright i{display:block;font-style:normal;font-size:10.5px;color:var(--faint);margin-top:1px;}
.fright i.only{font-size:11.5px;color:var(--muted);max-width:76px;}
.fm2{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5;}
/* 동네부터 여쭙는 화면 */
.askreg{padding:34px 4px 0;text-align:center;}
.askreg h2{font-size:21px;font-weight:800;letter-spacing:-.035em;margin:0 0 10px;color:var(--ink);}
.askreg p{font-size:13.5px;color:var(--muted);line-height:1.8;margin:0 0 24px;}
.askreg p b{color:var(--ink-2);}
.askreg .lnk{display:block;margin:18px auto 0;font-size:12.5px;color:var(--faint);
  text-decoration:underline;text-underline-offset:3px;background:none;border:0;}
.fm2 b{color:var(--ink-2);font-weight:600;}
.fm2 b.nonurse{color:var(--clay);}
.fi{flex:1;min-width:0;display:block;text-align:left;}
.fi > span{display:block;}
.fn{font-weight:700;font-size:16.5px;letter-spacing:-.035em;line-height:1.32;}
.fi > .fn{display:block;}
.bdg{display:inline-block;vertical-align:2px;margin-left:5px;font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--brand-soft);color:var(--brand);}
.bdg.v{background:var(--slate-soft);color:var(--slate);}
.bdg.w{background:var(--amber-soft);color:var(--amber);}
/* 「평가 전」 — 새로 문을 연 곳입니다. 경고가 아니므로 색을 달리합니다. */
.bdg.n{background:var(--surface-2);color:var(--muted);}
.fm{font-size:11.5px;color:var(--faint);margin-top:3px;line-height:1.5;}
.fp{margin-top:6px;font-size:13px;font-weight:600;color:var(--clay);}
.fp b{font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums;}
/* 「월 86만원 추정」이 「월」과 「86만원 추정」으로 갈라져 두 줄이 되던 것을 막는다 */
.fp span{font-size:11.5px;color:var(--faint);font-weight:400;margin-left:4px;
  white-space:nowrap;display:inline-block;}
.fadd{flex:0 0 auto;align-self:center;width:34px;height:34px;border-radius:11px;border:1.5px solid var(--line-strong);
  color:var(--muted);font-size:17px;display:grid;place-items:center;}
.fadd.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}

/* ── tabbar ── */
.tabbar{position:relative;z-index:20;flex:0 0 auto;display:flex;border-top:1px solid var(--line);background:var(--surface);
  padding-bottom:env(safe-area-inset-bottom);}
.tabbar button{flex:1;padding:8px 2px 10px;font-size:10px;color:var(--faint);font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.2;}
.tabbar button.on{color:var(--brand);font-weight:700;}
.fab{position:absolute;right:16px;bottom:16px;z-index:8;background:var(--brand);color:var(--on-brand);
  border-radius:999px;padding:13px 18px;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px;
  box-shadow:0 8px 22px -6px rgba(14,92,74,.5);}

/* ── detail ── */
.hero{height:186px;background:var(--surface-2);position:relative;border-bottom:1px solid var(--line);overflow:hidden;}
.hero .tag{position:absolute;left:14px;bottom:12px;background:rgba(10,20,17,.74);color:#fff;font-size:11px;padding:5px 10px;border-radius:8px;font-family:var(--mono);}
.sec{padding:16px 18px;border-bottom:1px solid var(--line);}
.sec:last-child{border-bottom:none;}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:14px;gap:12px;}
.kv .k{color:var(--muted);flex:0 0 auto;}
.kv .v{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;text-align:right;}
.kv.tot{border-top:1px dashed var(--line-strong);margin-top:8px;padding-top:10px;}
.kv.tot .k{color:var(--ink);font-weight:700;font-family:var(--sans);}
.kv.tot .v{color:var(--clay);font-weight:700;font-size:19px;}
.note{font-size:11.5px;color:var(--faint);line-height:1.7;margin-top:11px;}
.bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:6px;}
.bar i{display:block;height:100%;background:var(--brand);}
.bar i.am{background:var(--amber);}
.grow{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0;}
.gb{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;flex:0 0 auto;}
.gb.a{background:var(--brand);color:var(--on-brand);}
.gb.b{background:var(--brand-soft);color:var(--brand);}
.gb.c{background:var(--surface-2);color:var(--muted);}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;}
.tg{font-size:12px;padding:5px 11px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);}

/* ── compare ── */
.cmp{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;}
.cmp th,.cmp td{padding:9px 5px;border-bottom:1px solid var(--line);text-align:center;
  vertical-align:middle;word-break:keep-all;}
 /* 항목 이름은 칸 안에서 접히게 — nowrap 이라 옆 칸(파란 배경) 위로 넘쳐 겹쳤다 */
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--muted);font-weight:400;
  font-size:12.5px;width:94px;padding-right:10px;line-height:1.4;
  white-space:normal;word-break:keep-all;overflow-wrap:anywhere;}
/* 시설 칸은 몇 곳이든 똑같은 너비 — 이름이 길면 줄여 쓰지 말고 두 줄로 */
.cmp.cols2 th:not(:first-child),.cmp.cols2 td:not(:first-child){width:calc((100% - 94px)/2);}
.cmp.cols3 th:not(:first-child),.cmp.cols3 td:not(:first-child){width:calc((100% - 94px)/3);}
.cmp.cols4 th:not(:first-child),.cmp.cols4 td:not(:first-child){width:calc((100% - 94px)/4);}
/* 한 줄짜리 이름과 두 줄짜리 이름이 섞여도 높이 가운데에 나란히 오도록 */
.cmp thead th{font-weight:700;font-size:13px;padding-bottom:11px;vertical-align:middle;}
.cmp thead th .cn{margin:0 auto;}
.cmp thead th .cn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35;font-size:12.5px;letter-spacing:-.02em;
  /* 한글 기관명은 띄어쓰기가 없어 그대로는 줄이 안 바뀐다 */
  word-break:keep-all;overflow-wrap:anywhere;}
.cmp td b{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.best{background:var(--brand-soft);border-radius:7px;}

/* ── job / community ── */
/* 일자리 카드 — 예전에는 지역 배지를 float:right 로 오른쪽 위에 띄웠더니
   「성루카노인전문요양센터」처럼 이름이 길면 배지와 글자가 겹쳤다.
   이름을 먼저 한 줄로 두고, 지역 배지는 그 아래 줄로 내린다. 겹칠 일이 없다. */
.jc{width:100%;text-align:left;border:1.5px solid var(--line);border-radius:15px;padding:14px;
  margin-bottom:10px;background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;}
.jc > span{display:block;max-width:100%;}
.jc .jt{font-weight:600;font-size:15.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.jd{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent);
  background:var(--accent-soft);padding:4px 9px;border-radius:999px;
  align-self:flex-start;width:auto;line-height:1.5;}
.jc .jt{order:1;}
.jc .jd{order:2;margin:7px 0 0;}
.jc .jm{order:3;}
.jc .jp{order:4;}
.jm{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6;}
.jm b{color:var(--ink-2);}
.jp{margin-top:8px;font-size:13px;font-weight:600;color:var(--brand);}
.jp b{font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums;}
.post{width:100%;text-align:left;display:block;border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:10px;background:var(--surface);}
.post .cats{display:flex;align-items:center;gap:6px;margin-bottom:9px;}
.post .c1{font-size:11.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:3px 9px;border-radius:6px;}
.post .c2{font-size:11.5px;color:var(--muted);background:var(--surface-2);padding:3px 9px;border-radius:6px;}
.post .t{font-size:15.5px;font-weight:600;line-height:1.45;letter-spacing:-.01em;}
.post .x{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.post .meta{font-size:11.5px;color:var(--faint);margin-top:10px;display:flex;gap:9px;align-items:center;}
.post.flat{border:none;border-bottom:1px solid var(--line);border-radius:0;padding:13px 2px;margin-bottom:0;background:none;}
.post.flat:last-of-type{border-bottom:none;}

/* 글쓰기 — 요양원 고르기 */
.facrow{display:block;width:100%;text-align:left;padding:11px 13px;margin-top:7px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);}
.facrow .fr1{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4;}
.facrow .fr2{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;}
.pickedfac,.postfac{display:block;width:100%;text-align:left;position:relative;
  padding:14px 74px 14px 15px;border:1px solid var(--accent);border-radius:var(--r-card);
  background:var(--accent-soft);}
.postfac{margin-bottom:16px;}
.pickedfac .pf1,.postfac .pf1{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.45;}
.pickedfac .pf2,.postfac .pf2{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px;}
.pickedfac .pfx,.postfac .pfx{position:absolute;top:50%;right:14px;transform:translateY(-50%);
  font-size:12.5px;font-weight:600;color:var(--accent);}
.tabs2{display:flex;gap:18px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--surface);flex:0 0 auto;overflow-x:auto;}
.tabs2::-webkit-scrollbar{height:0;}
.tabs2 button{padding:13px 0 11px;font-size:15px;color:var(--faint);font-weight:500;border-bottom:2px solid transparent;white-space:nowrap;}
.tabs2 button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--ink);}

/* ── console / me ── */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.statgrid div{background:var(--surface);padding:15px 8px;text-align:center;}
.statgrid .v{font-family:var(--mono);font-size:21px;font-weight:600;}
.statgrid .k{font-size:11px;color:var(--muted);margin-top:2px;}
.todo{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);width:100%;text-align:left;}
.todo:first-of-type{border-top:none;}
.ck{width:21px;height:21px;border-radius:7px;border:1.5px solid var(--line-strong);flex:0 0 auto;margin-top:2px;position:relative;}
.ck.done{background:var(--brand);border-color:var(--brand);}
.ck.done::after{content:"";position:absolute;left:7px;top:3.5px;width:5px;height:10px;border:solid var(--on-brand);border-width:0 2px 2px 0;transform:rotate(45deg);}
.todo > span:last-child{display:block;flex:1;min-width:0;}
.todo .tt{display:block;font-weight:600;font-size:14.5px;}
.todo .td{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5;}
.autofill{border:1.5px solid var(--brand);background:var(--brand-soft);border-radius:16px;padding:15px;margin-bottom:16px;}
.autofill .h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--brand);margin-bottom:10px;}
.autofill .kv .k{color:var(--ink-2);}
.autofill .kv .v{color:var(--ink);}
.result{border-radius:16px;padding:18px;background:var(--brand-soft);
  border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);margin-bottom:16px;}
.result .big{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.02em;}
.result .cap{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.6;}
.done-mark{width:76px;height:76px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;margin:8px auto 22px;}
.rowlink{display:flex;align-items:center;gap:12px;padding:15px 0;border-top:1px solid var(--line);width:100%;text-align:left;}
.rowlink:first-of-type{border-top:none;}
.brandbar .acts button.gearbtn{width:44px;height:44px;margin:-5px -10px -5px 0;}
.rowlink .ic{color:var(--muted);flex:0 0 auto;}
.rowlink .t{flex:1;font-size:15.5px;font-weight:600;}
.rowlink .go{color:var(--faint);flex:0 0 auto;}
.bizcard{display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;background:var(--clay-soft);margin-bottom:20px;width:100%;text-align:left;}
.bizcard .tx{flex:1;min-width:0;}
.bizcard .t{font-size:15px;font-weight:700;color:var(--clay);}
.bizcard .d{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5;}
.quick3{display:flex;border-radius:16px;border:1px solid var(--line);overflow:hidden;margin-bottom:20px;}
.quick3 button{flex:1;padding:15px 4px;text-align:center;border-left:1px solid var(--line);}
.quick3 button:first-child{border-left:none;}
.quick3 .ic{margin:0 auto 7px;color:var(--brand);}
.quick3 .t{font-size:12px;color:var(--ink-2);font-weight:500;}
.rev{padding:13px 0;border-top:1px solid var(--line);}
.rev:first-of-type{border-top:none;}
.revh{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-bottom:5px;gap:8px;}
.stars{color:var(--amber);font-size:12px;letter-spacing:1.5px;flex:0 0 auto;}
.revt{font-size:13.5px;color:var(--ink-2);line-height:1.65;}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:44px 22px;color:var(--muted);font-size:14px;line-height:1.7;}
.empty .art{margin:0 0 16px;color:var(--line-strong);display:flex;justify-content:center;}
.empty .art svg{width:46px;height:46px;stroke-width:1.4;}
/* 굵은 한 줄 + 설명 한 줄 — 두 줄 다 가운데, 폭을 좁혀 줄바꿈이 예쁘게 떨어지도록 */
.empty .t{display:block;font-size:14.5px;font-weight:700;color:var(--ink-2);line-height:1.65;max-width:17em;}
.empty .d{display:block;font-size:13px;color:var(--muted);line-height:1.8;margin-top:8px;max-width:19em;}
.empty > *{flex:0 0 auto;}
.empty .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  width:auto;min-width:150px;margin-top:20px;flex:0 0 auto;}
/* 화면 전체가 비었을 때는 위아래 가운데로 — 위쪽에 몰려 보이지 않도록 */
.body > .empty, .body.pad > .empty, .body.grey > .empty{min-height:58vh;justify-content:center;}
.empty > b{color:var(--ink-2);}
/* 목록 아래에 붙는 꼬리 안내 — 선을 한 줄 긋고 가운데로 */
.note.sep{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center;}
.note.mid{text-align:center;}
/* 한 구획이 통째로 비었을 때의 한 줄 — 어디서나 같은 모양으로 가운데 */
.none{font-size:13px;color:var(--muted);line-height:1.8;margin:0;padding:14px 2px;text-align:center;}
/* 빈자리 한 줄 */
.vachead{font-size:13.5px;font-weight:600;color:var(--ink-2);margin:0 0 4px;line-height:1.6;}
.vacrow{display:flex;align-items:baseline;gap:10px;padding:6px 0 2px;}
.vacshow{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.6;}
.vacshow b{color:var(--ink-2);font-weight:600;}
.vacnum{font-family:var(--mono);font-size:27px;font-weight:700;color:var(--accent);line-height:1;flex:0 0 auto;}
.vacnum i{font-family:var(--sans);font-size:13px;font-weight:600;margin-left:2px;}
.vacnum.blank{font-family:var(--sans);font-size:19px;color:var(--faint);font-weight:600;}
.vacsay{flex:1;min-width:0;font-size:12.5px;color:var(--muted);line-height:1.6;}
.vacsay.stale{color:var(--amber);font-weight:600;}
/* 보호자 상세에 뜨는 빈자리 줄 */
.vacbar{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 13px;
  border-radius:12px;background:var(--brand-soft);}
.vacbar .ic{flex:0 0 auto;color:var(--accent);display:flex;}
.vacbar .ic svg{width:17px;height:17px;}
.vacbar .t{flex:1;min-width:0;font-size:13.5px;color:var(--ink-2);line-height:1.5;}
.vacbar .t b{color:var(--accent);}
.vacbar .t i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6;}
/* 시설이 적은 한 줄 소개 — 이름 바로 밑 */
.fpoint{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin:10px 0 0;font-weight:500;}
/* 요양원이 직접 쓴 소개 */
.fsay{display:flex;flex-direction:column;gap:0;}
.fstx{font-size:14px;color:var(--ink-2);line-height:1.85;margin:0;white-space:pre-wrap;word-break:keep-all;}
.fstx.big{font-size:14.5px;padding-bottom:16px;}
.fsrow{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line);}
.fsrow:first-child{border-top:0;padding-top:0;}
.fsk{flex:0 0 74px;font-size:12.5px;font-weight:600;color:var(--muted);padding-top:2px;line-height:1.6;}
.fsv{flex:1;min-width:0;}
.fsv .tagrow{margin:0;}
.card.warn{border-color:var(--amber-soft);background:var(--amber-soft);}
/* 동네 비교 막대 */
.bench{padding:14px 0;border-bottom:1px solid var(--line);}
.bench:last-child{border-bottom:0;}
.bench .bh{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;}
.bench .bn{font-size:14px;font-weight:600;color:var(--ink);}
.bench .bv{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink);}
.bench .btrack{position:relative;height:8px;border-radius:999px;background:var(--surface-2);overflow:visible;}
.bench .bavg{position:absolute;top:-4px;width:2px;height:16px;background:var(--line-strong);border-radius:1px;}
.bench .bme{position:absolute;top:-4px;width:14px;height:16px;border-radius:5px;background:var(--accent);
  transform:translateX(-7px);box-shadow:0 1px 4px -1px rgba(0,0,0,.35);}
.bench .bfoot{display:flex;gap:8px;margin-top:9px;font-size:12px;color:var(--muted);}
.bench .bfoot b{color:var(--ink-2);}
.bench .bfoot .r{margin-left:auto;}
.bench .bwhy{font-size:12px;color:var(--faint);line-height:1.7;margin:7px 0 0;}
.toast{position:absolute;left:50%;bottom:142px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--ground);font-size:13.5px;padding:11px 18px;border-radius:12px;
  z-index:40;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;
  max-width:88%;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.pop{animation:pop .3s ease both;}

/* ══════════ v0.3 재설계 — 공적·신뢰 톤 ══════════ */

/* 타이포 리듬: 대비를 키우고 라벨을 눌러 앉힌다 */
body{font-family:var(--sans);font-size:15px;letter-spacing:-.005em;}
h2.big{font-family:var(--sans);font-weight:800;font-size:24px;line-height:1.42;letter-spacing:-.03em;}
p.sub{font-size:14px;line-height:1.7;}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);font-weight:600;margin-bottom:11px;}
.sechead h3{font-size:16px;font-weight:800;letter-spacing:-.02em;}
.sechead{align-items:center;padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:2px;}
.sechead .more{font-size:12px;color:var(--brand);font-weight:600;}
.nav{min-height:52px;}
.nav .title{font-weight:700;font-size:15.5px;letter-spacing:-.02em;}
.note{font-size:11px;letter-spacing:0;}

/* 모서리를 각지게 — 친근함보다 정확함 */
.btn{border-radius:var(--r-btn);font-weight:700;font-size:15.5px;padding:15px 20px;letter-spacing:-.01em;}
.btn.sm{border-radius:8px;padding:10px 14px;font-size:13.5px;font-weight:700;}
.chip{border-radius:var(--r-chip);border-width:1px;font-size:13.5px;padding:8px 13px;font-weight:600;}
.chip.sm{border-radius:7px;padding:6px 11px;font-size:12px;}
.chip.on{border-color:var(--brand);}
.card{border-radius:var(--r-card);box-shadow:none;}
.opt{border-radius:var(--r-card);border-width:1px;padding:14px 15px;}
.opt.on{border-color:var(--brand);border-width:1.5px;}
.opt .t{font-weight:700;font-size:15px;}
.opt .chk{border-radius:5px;}
.opt.on .chk::after{left:6.5px;top:3px;}
.thumb{border-radius:var(--r-img);}
.jc,.post{border-radius:var(--r-card);border-width:1px;}
.sheet{border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-lift);}
.result{border-radius:var(--r-card);border-width:1px;}
.autofill{border-radius:var(--r-card);border-width:1.5px;}
.statgrid,.quick3,.hbanner,.strip,.bizcard{border-radius:var(--r-card);}
.search{border-radius:var(--r-btn);border-width:1px;box-shadow:var(--shadow-lift);}
.gitem .ic{border-radius:10px;}
.mpin{border-radius:7px;border-width:1px;}
.mpin::after{border-width:5px 5px 0 5px;bottom:-5px;}
.bdg{border-radius:3px;font-size:9.5px;letter-spacing:.02em;}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=tel],input[type=search],textarea{border-radius:var(--r-btn);border-width:1px;}
.stepper{border-radius:var(--r-btn);border-width:1px;}
.fadd{border-radius:8px;border-width:1px;width:40px;height:40px;font-size:18px;}
.loginbtn{border-radius:var(--r-btn);border-width:1px;font-weight:700;}
.done-mark{border-radius:14px;}
.tg{border-radius:6px;font-size:11.5px;padding:5px 10px;font-weight:500;}
.dots i{border-radius:2px;}
.dots i.on{width:20px;}

/* 홈: 배너를 화면 끝까지 터뜨리고, 아이콘 타일을 없앤다 */
.hbanner{margin:0 0 2px;border-radius:0;padding:20px 18px 22px;background:var(--brand-soft);
  border-bottom:1px solid var(--line);}
.hbanner .k{color:var(--brand);font-size:11px;font-family:var(--mono);letter-spacing:.12em;font-weight:600;}
.hbanner .t{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.42;}
.hbanner .cta{border-radius:7px;border-width:1px;font-size:12px;padding:6px 12px;font-weight:700;}
.hbanner .ad{border-radius:3px;font-size:8.5px;letter-spacing:.06em;}
.grid4{padding:18px 6px 16px;gap:2px 0;border-bottom:1px solid var(--line);}
.gitem{padding:8px 2px;}
.gitem .ic{width:auto;height:30px;margin:0 auto 9px;background:none!important;border-radius:0;color:var(--brand);}
.gitem .ic.b,.gitem .ic.c,.gitem .ic.d{color:var(--brand);}
.gitem .t{font-size:11.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.02em;}
.strip{margin:0;border-radius:0;background:var(--surface);border-bottom:1px solid var(--line);padding:15px 18px;}
.strip .t{font-size:13.5px;font-weight:700;letter-spacing:-.02em;}
.strip .d{font-size:11.5px;font-family:var(--mono);letter-spacing:-.01em;}
.block{padding:20px 18px 24px;background:var(--surface);border-bottom:1px solid var(--line);}
.body.grey{background:var(--surface);}
.brandbar{padding:14px 18px 12px;border-bottom:1px solid var(--line);}
.brandbar .logo{font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:-.03em;}

/* 목록: 카드를 벗기고 헤어라인으로 */
.block .card{border:none;padding:0;border-radius:0;}
.fc{padding:15px 0;gap:13px;}
.fn{font-size:16.5px;font-weight:700;letter-spacing:-.035em;}
.fm{font-size:11.5px;letter-spacing:-.01em;}
.fp{font-size:12px;font-weight:600;}
.fp b{font-size:15px;letter-spacing:-.02em;}
.rank{padding:9px 0;border-top:1px solid var(--line);}
.rank:first-child{border-top:none;}
.rank .cat{border-radius:3px;font-size:10px;font-weight:600;}
.rank .n{color:var(--brand);font-size:12px;}
.rank .t{font-size:13px;font-weight:500;}

/* 데이터 행: 더 촘촘하게, 숫자를 키운다 */
.kv{padding:6px 0;font-size:13.5px;}
.kv .k{font-size:13px;}
.kv .v{font-size:13.5px;letter-spacing:-.01em;}
.kv.tot .v{font-size:20px;letter-spacing:-.03em;}
.statgrid .v{font-size:20px;letter-spacing:-.03em;}
.statgrid .k{font-size:10.5px;}
.result .big{font-size:29px;letter-spacing:-.035em;}
.sec{padding:18px;}

/* 커뮤니티 */
.post{padding:16px;}
.post .t{font-size:15px;font-weight:700;letter-spacing:-.025em;}
.post .c1,.post .c2{border-radius:3px;font-size:10.5px;font-weight:700;letter-spacing:0;}
.post .x{font-size:12.5px;}
.post .meta{font-size:11px;font-family:var(--mono);letter-spacing:-.02em;}
.tabs2 button{font-size:14.5px;font-weight:600;padding:14px 0 12px;}
.tabs2 button.on{border-bottom-width:2.5px;border-bottom-color:var(--brand);color:var(--brand);}

/* 탭바 */
.tabbar button{font-size:9.5px;font-weight:600;letter-spacing:-.02em;padding:8px 2px 12px;gap:5px;}
.tabbar button svg{width:21px;height:21px;margin-bottom:1px;}
.fab{border-radius:var(--r-btn);font-size:13px;padding:13px 17px;box-shadow:var(--shadow-lift);}

/* 인트로 */
.introtx h2{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.42;}
.introtx h2 em{color:var(--brand);}
.introtx p{font-size:13.5px;line-height:1.75;}

/* ── 눌리는 느낌 ── */
button{transition:transform .12s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), opacity .15s;}
button:active{transform:scale(.975);}
.btn:active,.loginbtn:active{transform:scale(.985);}
.tabbar button:active,.gitem:active{transform:scale(.93);}
.fc:has(button:active){opacity:.7;}

/* ── 화면 전환 ── */
@keyframes scr-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.scr{animation:scr-in .24s var(--ease) both;}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.sheet{animation:sheet-up .3s var(--ease) both;}
/* 접었다 펴는 시트는 등장 애니메이션이 transform 을 덮어써서 제외한다 */
.sheet.dock{animation:none;}
@keyframes sheet-up{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
.mpin{animation:fade-in .3s var(--ease) both;}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.pop{animation:pop .34s var(--ease) both;}

/* ── 스켈레톤 ── */
@keyframes shim{0%{background-position:-220px 0}100%{background-position:220px 0}}
.sk{border-radius:6px;background:var(--surface-2);
  background-image:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--line-strong) 45%,transparent) 50%,transparent 100%);
  background-repeat:no-repeat;background-size:220px 100%;animation:shim 1.1s linear infinite;}
.skrow{display:flex;gap:13px;padding:15px 0;border-top:1px solid var(--line);}
.skrow:first-child{border-top:none;}
.skrow .sk.t{width:70px;height:70px;border-radius:var(--r-img);flex:0 0 auto;}
.skrow .col{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px;}
.skrow .col .sk{height:11px;}

/* 접근성: 움직임 줄이기 */
@media (prefers-reduced-motion:reduce){
  .scr,.sheet,.mpin,.pop{animation:none!important;}
  .sk{animation:none!important;}
  button:active{transform:none!important;}
}


/* ══════════ 인트로 UI 프레임 ══════════ */
.introart{padding:0 20px 20px;}
.introart svg{width:100%;max-width:320px;height:auto;}
.uiframe{width:252px;border-radius:20px;border:1px solid var(--line-strong);background:var(--surface);
  box-shadow:var(--shadow-lift);overflow:hidden;text-align:left;}
.uibar{height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  font-family:var(--mono);font-size:7.5px;color:var(--faint);}
.uipad{padding:12px 13px 14px;}
.uihero{height:104px;background:var(--surface-2);}
.uihero img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block;}
.uiname{font-size:13px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:4px;}
.uisub{font-size:10px;color:var(--muted);margin-top:3px;}
.uib{font-style:normal;font-family:var(--mono);font-size:8px;font-weight:700;padding:1.5px 4px;border-radius:3px;
  background:var(--brand-soft);color:var(--brand);}
.uib.v{background:var(--slate-soft);color:var(--slate);}
.uib.w{background:var(--amber-soft);color:var(--amber);}
.uitags{display:flex;gap:4px;margin-top:9px;flex-wrap:wrap;}
.uitags i{font-style:normal;font-size:9px;padding:3px 7px;border-radius:5px;background:var(--surface-2);color:var(--ink-2);}
.uisearch{margin:9px 11px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;
  font-size:9.5px;color:var(--muted);background:var(--surface-2);}
.uimap{position:relative;height:150px;overflow:hidden;
  background:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 34px),
             repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 34px),var(--surface-2);}
.uiroad{position:absolute;background:var(--surface);}
.uipin{position:absolute;transform:translate(-50%,-100%);font-family:var(--mono);font-size:9px;font-weight:700;
  padding:3.5px 7px;border-radius:6px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);box-shadow:0 2px 6px -2px rgba(0,0,0,.3);--pb:var(--surface);}
.uipin.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand);--pb:var(--brand);}
.uipin::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--pb);border-bottom:0;}
.uime{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--slate);
  border:2.5px solid var(--surface);transform:translate(-50%,-50%);}
.uilbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--faint);
  font-weight:600;margin-bottom:9px;text-transform:uppercase;}
.uirow{display:flex;justify-content:space-between;align-items:baseline;padding:3.5px 0;font-size:10px;color:var(--muted);}
.uirow b{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;}
.uitot{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px;padding-top:8px;
  border-top:1px dashed var(--line-strong);font-size:11px;font-weight:700;color:var(--ink);}
.uitot b{font-family:var(--mono);font-size:15px;color:var(--clay);letter-spacing:-.03em;}
.uinote{font-size:8.5px;color:var(--faint);margin-top:7px;}
.uiscore{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.uiscore > b{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.04em;}
.uiscore > span{font-size:9px;color:var(--muted);line-height:1.6;}
.uistar{font-style:normal;color:var(--amber);font-size:9px;letter-spacing:1px;}
.uirev{padding:9px 0;border-bottom:1px solid var(--line);font-size:9.5px;color:var(--ink-2);line-height:1.6;}
.uirev:last-child{border-bottom:none;}
.uirevh{font-size:8.5px;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:4px;}
.uijob{border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin-bottom:7px;}
.uijob b{display:block;font-size:11px;font-weight:700;letter-spacing:-.02em;}
.uijob span{display:block;font-size:9px;color:var(--muted);margin-top:4px;line-height:1.55;}
.uijob em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--brand);margin-top:6px;}
.uidist{float:right;font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:600;
  color:var(--slate);background:var(--slate-soft);padding:2.5px 6px;border-radius:99px;margin-left:6px;}
@media (max-height:720px){ .uiframe{width:224px;} .uihero{height:88px;} .uimap{height:126px;} }


/* ══════════ 폰트 현대화 + 정렬 보정 ══════════ */
body{font-family:var(--sans);font-weight:400;letter-spacing:-.015em;}
h2.big,.sechead h3,.hbanner .t,.introtx h2,.post .t,.uiname,.brandbar .logo{font-weight:800;letter-spacing:-.035em;}
.btn,.chip.on,.opt .t,.fn,.jc .jt{font-weight:700;letter-spacing:-.025em;}
.lbl,.uilbl,.hbanner .k{font-family:var(--sans);font-weight:700;letter-spacing:.1em;font-size:10.5px;}
.statgrid .k,.gitem .t,.tabbar button{letter-spacing:-.02em;}
/* 숫자는 표처럼 줄 맞춤 */
.kv .v,.statgrid .v,.result .big,.uitot b,.uirow b,.fp b,.jp b,.cmp td b,.mpin,.uipin,
.stepper .val,.uiscore > b,.rank .n,.rank .c,.jd,.uidist,.num,.strip .d,.post .meta,.bfig .v{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.02em;}

/* 체크 표시를 상자 정중앙에 */
.opt .chk{display:grid;place-items:center;border-radius:6px;}
.opt.on .chk::after{content:"";position:static;width:5px;height:9.5px;border:solid var(--on-brand);
  border-width:0 2.2px 2.2px 0;transform:rotate(45deg);margin:-2.5px 0 0 .5px;left:auto;top:auto;}
.ck{display:grid;place-items:center;}
.ck.done::after{content:"";position:static;width:5px;height:9.5px;border:solid var(--on-brand);
  border-width:0 2.2px 2.2px 0;transform:rotate(45deg);margin:-2.5px 0 0 .5px;left:auto;top:auto;}

/* 픽토그램·문구 정렬 */
.quick3 button{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 4px;}
.quick3 .ic{display:flex;justify-content:center;align-items:center;margin:0;height:22px;}
.quick3 .t{font-size:12px;font-weight:600;line-height:1;}
.rowlink .ic{display:flex;align-items:center;justify-content:center;width:22px;height:22px;}
.bizcard > span:last-child{display:flex;align-items:center;}
.gitem .ic{display:flex;align-items:center;justify-content:center;height:28px;margin:0 auto 10px;}
.strip .go,.rowlink .go{display:flex;align-items:center;}

/* 지역 선택 */
.regionrow{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
  padding:15px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:500;}
.regionrow.on{color:var(--brand);font-weight:700;}
.regionrow .c{font-size:12px;color:var(--faint);font-weight:400;}
.regionpick{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
  padding:14px 15px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface-2);font-size:15px;}
.regionpick .ph{color:var(--faint);}
.crumb{display:flex;gap:6px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--muted);background:var(--surface);overflow-x:auto;white-space:nowrap;}
.crumb b{color:var(--brand);font-weight:700;}
.crumb span{color:var(--line-strong);}


/* ══════════ 같은 화면 재렌더 시 깜박임 제거 ══════════ */
.scr.noanim,
.scr.noanim .sheet,
.scr.noanim .mpin,
.scr.noanim .pop,
.scr.noanim .introart,
.scr.noanim .introtx{animation:none !important;}
.scr{will-change:auto;}
.viewport{background:var(--surface);}
img{background:var(--surface-2);}

/* ══════════════════════════════════════════════════════════
   v0.7 — 밝게, 생기 있게, 역할마다 다르게
   ══════════════════════════════════════════════════════════ */
:root{
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F8F4; --surface-3:#E7F0E9;
  --line:#E4EDE7; --line-strong:#CBD9D0;
  --ink:#0C1521; --ink-2:#44566C; --muted:#6B7E93; --faint:#9CACBC;
  --brand:#1D6A50; --brand-2:#2E8A69; --brand-soft:#E1F0E9; --on-brand:#FFFFFF;
  --clay:#A2601F; --clay-soft:#F8EBDA; --on-clay:#FFFFFF;
  --slate:#0D7B63; --slate-soft:#DFF3ED;
  --amber:#A9760F; --amber-soft:#FBF0DA;
  --violet:#5B4BC4; --violet-soft:#EAE8FA;
  --grass:#3F7A2E; --grass-soft:#E6F4E0;
  --accent:var(--brand); --accent-soft:var(--brand-soft); --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(12,21,33,.04), 0 6px 16px -10px rgba(12,21,33,.16);
  --shadow-lift:0 2px 6px rgba(12,21,33,.06), 0 18px 40px -20px rgba(12,21,33,.3);
  --r-btn:14px; --r-card:18px; --r-chip:999px; --r-sheet:24px; --r-img:12px;
  /* 간격 — 화면 어디서나 이 계단만 쓴다 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:28px; --s7:36px;
  --gut:18px;                       /* 좌우 여백 (모든 화면 공통) */
}

/* 역할마다 색을 바꾸던 자리 — 걷어냈습니다. 브랜드는 하나입니다. */

/* ── 부드럽게 ── */
.btn{border-radius:var(--r-btn);padding:16px 20px;font-size:16px;font-weight:700;letter-spacing:-.02em;}
.btn.sm{border-radius:12px;padding:11px 16px;font-size:14px;}
.chip{border-radius:999px;padding:9px 15px;font-size:13.5px;border-width:1px;}
.chip.sm{border-radius:999px;padding:7px 13px;font-size:12.5px;}
.card{border-radius:var(--r-card);border-color:var(--line);box-shadow:var(--shadow);}
.opt{border-radius:var(--r-card);padding:16px 17px;box-shadow:var(--shadow);}
.opt.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:none;}
.opt.on .chk{background:var(--accent);border-color:var(--accent);}
.opt.on .chk::after{border-color:var(--on-accent);}
.jc,.post{border-radius:var(--r-card);box-shadow:var(--shadow);border-color:var(--line);padding:17px;}
.statgrid,.quick3{border-radius:var(--r-card);box-shadow:var(--shadow);border-color:var(--line);}
.result{border-radius:var(--r-card);}
.autofill{border-radius:var(--r-card);}
.thumb{border-radius:var(--r-img);}
.hero{border-bottom:none;}
.sheet{border-radius:var(--r-sheet) var(--r-sheet) 0 0;}
.search{border-radius:16px;border-color:var(--line-strong);}
.bdg{border-radius:6px;padding:3px 7px;font-size:10px;}
.tg{border-radius:999px;padding:6px 12px;}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=tel],input[type=search],textarea,.stepper,.regionpick{border-radius:var(--r-btn);}
.fadd{border-radius:12px;}
.loginbtn{border-radius:var(--r-btn);}
.done-mark{border-radius:24px;}
.mpin{border-radius:12px;}

/* ── 하단 여백 ── */
.foot{padding:14px 18px calc(22px + env(safe-area-inset-bottom));gap:10px;}
.tabbar{padding-bottom:calc(4px + env(safe-area-inset-bottom));}

/* ── 브랜드 색을 역할 색으로 ── */
.tabbar button.on{color:var(--accent);}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.fab{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:14px 20px;}
.hbanner{background:var(--accent-soft);border-bottom:none;padding:22px 18px 24px;}
.hbanner .k{color:var(--accent);}
.hbanner .cta{color:var(--accent);border-color:var(--accent);border-radius:999px;padding:7px 15px;}
.tabs2 button.on{color:var(--accent);border-bottom-color:var(--accent);}
.prog i{background:var(--accent);}
.sechead .more{color:var(--accent);}
.nav .right{color:var(--accent);}
.rank .n{color:var(--accent);}
.brandbar .logo{color:var(--ink);}

/* ── 아이콘 타일: 색을 돌려쓴다 ── */
.grid4{padding:20px 8px 20px;border-bottom:none;gap:6px 0;}
.gitem .ic{width:52px;height:52px;border-radius:17px;margin:0 auto 9px;
  display:flex;align-items:center;justify-content:center;}
.gitem .t{font-size:12px;font-weight:600;color:var(--ink-2);}
.grid4 .gitem:nth-child(8n+1) .ic{background:var(--brand-soft)!important;color:var(--brand)!important;}
.grid4 .gitem:nth-child(8n+2) .ic{background:var(--clay-soft)!important;color:var(--clay)!important;}
.grid4 .gitem:nth-child(8n+3) .ic{background:var(--slate-soft)!important;color:var(--slate)!important;}
.grid4 .gitem:nth-child(8n+4) .ic{background:var(--amber-soft)!important;color:var(--amber)!important;}
.grid4 .gitem:nth-child(8n+5) .ic{background:var(--violet-soft)!important;color:var(--violet)!important;}
.grid4 .gitem:nth-child(8n+6) .ic{background:var(--grass-soft)!important;color:var(--grass)!important;}
.grid4 .gitem:nth-child(8n+7) .ic{background:var(--brand-soft)!important;color:var(--brand-2)!important;}
.grid4 .gitem:nth-child(8n+8) .ic{background:var(--surface-2)!important;color:var(--muted)!important;}

/* ── 숨 쉴 공간 ── */
.block{padding:24px 18px 28px;border-bottom:none;}
.block + .block{padding-top:4px;}
.body.grey{background:var(--surface);}
.block .card{border:1px solid var(--line);border-radius:var(--r-card);padding:16px 17px;box-shadow:var(--shadow);background:var(--surface);}
/* 줄 목록·격자만 담은 카드는 줄 자체에 여백이 있어 위아래를 줄인다.
   글이 들어 있는 카드(빈자리·이용요금 등)는 위 기본값대로 넉넉하게 둔다. */
.block .card:has(> .rowlink),
.block .card:has(> .grid4),
.block .card:has(> .todo){padding-top:5px;padding-bottom:5px;}
.block .card:has(> .todo) > .note.sep{padding-bottom:12px;}
.block .card:has(> .empty){padding-top:0;padding-bottom:6px;}
.strip{margin:0 18px 4px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow);padding:16px 17px;width:calc(100% - 36px);box-sizing:border-box;}
.brandbar{border-bottom:none;padding:16px 18px 10px;}
.sechead{border-bottom:none;padding-bottom:11px;margin-bottom:0;}
.sec{padding:20px 18px;}
h2.big{font-size:26px;line-height:1.4;}
.pad{padding:22px 18px;}
/* 좌우 폭을 화면마다 다르게 두지 않는다 — 모든 본문이 같은 선에서 시작한다 */
.body.pad > .card,
.body.pad > .lbl,
.body.pad > .field,
.body.pad > p,
.body.pad > .chipset,
.body.pad > .btn{margin-left:0;margin-right:0;}
.body.grey:not(.pad) > .block,
.body.grey:not(.pad) > .card{margin-left:18px;margin-right:18px;}

/* ── 커뮤니티 글쓰기 버튼 ── */
.writebtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 16px;height:38px;line-height:1;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-size:13.5px;font-weight:700;letter-spacing:-.02em;}
.writebtn svg{stroke:currentColor;flex:0 0 auto;display:block;}
.writebtn span{display:block;transform:translateY(.5px);}

/* ── 지도를 지도답게 ── */
.mlbl{position:absolute;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:-.02em;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.85;}
.mroad{position:absolute;font-size:10px;font-weight:600;color:var(--faint);letter-spacing:-.01em;
  transform:translate(-50%,-50%);pointer-events:none;background:var(--surface);padding:1px 5px;border-radius:4px;}
.mpark{position:absolute;background:color-mix(in srgb,var(--grass) 13%,transparent);border-radius:38% 62% 55% 45%;pointer-events:none;}
.mwater{position:absolute;left:-5%;right:-5%;top:50%;height:14px;pointer-events:none;
  background:color-mix(in srgb,var(--brand) 16%,transparent);transform:rotate(-4deg);border-radius:99px;}
.mscale{position:absolute;left:14px;top:46.5%;display:flex;align-items:center;gap:5px;
  font-size:10px;color:var(--muted);font-weight:600;pointer-events:none;z-index:4;}
.mscale i{display:block;width:34px;height:5px;border:1.5px solid var(--muted);border-top:none;}
.mgps{position:absolute;right:14px;top:43%;width:38px;height:38px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow);
  color:var(--accent);font-size:17px;z-index:4;}
.datanote{margin-top:8px;font-size:11.5px;color:var(--muted);background:var(--amber-soft);
  border-radius:999px;padding:6px 13px;display:inline-block;}
.datanote b{color:var(--amber);}
.scopenote{margin-top:7px;font-size:12px;color:var(--muted);padding:0 2px;}
.scopenote b{color:var(--ink-2);font-weight:600;}

/* ── 시설 카드에 온기 ── */
.fc{padding:16px 0;}
.thumb{width:52px;height:52px;box-shadow:none;border:1px solid var(--line);}
.fn{font-size:15.5px;}
.fp b{font-size:17px;}

/* ── 눌러지는 통계 타일 ── */
.statgrid div{padding:0;}
.statgrid button{width:100%;padding:17px 8px;text-align:center;display:block;}
.statgrid .v{font-size:23px;color:var(--accent);}
.statgrid .go{font-size:10px;color:var(--faint);margin-top:5px;display:block;}

/* ── 명단 행 ── */
.prow{display:flex;gap:13px;align-items:center;width:100%;text-align:left;padding:15px 0;border-top:1px solid var(--line);}
.prow:first-of-type{border-top:none;}
.pav{width:42px;height:42px;border-radius:999px;flex:0 0 auto;display:grid;place-items:center;
  font-size:14px;font-weight:700;background:var(--accent-soft);color:var(--accent);}
.pin2{flex:1;min-width:0;}
.pin2 .n{font-size:15px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:6px;}
.pin2 .d{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5;}
.pstat{flex:0 0 auto;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;}
.pstat.wait{background:var(--amber-soft);color:var(--amber);}
.pstat.done{background:var(--accent-soft);color:var(--accent);}
.bars{display:flex;align-items:flex-end;gap:7px;height:96px;padding:14px 0 0;}
.bars i{flex:1;background:var(--accent-soft);border-radius:6px 6px 0 0;position:relative;}
.bars i.hi{background:var(--accent);}
.bars i::after{content:attr(data-d);position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);
  font-size:9.5px;color:var(--faint);}


.callout-p{background:var(--surface-2);border-radius:var(--r-card);padding:16px 17px;
  font-size:12.5px;color:var(--muted);line-height:1.75;}
.callout-p b{display:block;color:var(--ink-2);font-size:13.5px;font-weight:700;margin-bottom:5px;letter-spacing:-.02em;}
.prow .bdg{font-style:normal;}

.statgrid button .v,.statgrid button .k,.statgrid button .go{display:block;}
.statgrid button .k{margin-top:3px;}
.pin2 > span{display:block;}
.pin2 .n{display:flex;}
.prow{align-items:flex-start;}
.pav{margin-top:2px;}
.pstat{margin-top:3px;}

/* ── 하단 안내 바 ── */
.tray{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 16px;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px -12px rgba(12,21,33,.35);animation:tray-up .26s var(--ease) both;}
@keyframes tray-up{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.tray .tn{font-size:14px;color:var(--ink-2);flex:1;min-width:0;}
.tray .tn b{color:var(--accent);font-weight:800;}
.tray .tgo{font-size:13px;font-weight:700;color:var(--accent);flex:0 0 auto;}
.tray .btn{padding:12px 18px;font-size:14px;}
.tdots{display:flex;flex:0 0 auto;}
.tdots i{width:34px;height:34px;border-radius:10px;overflow:hidden;display:block;
  border:2px solid var(--surface);margin-left:-10px;box-shadow:var(--shadow);}
.tdots i:first-child{margin-left:0;}
.tipbar{padding:11px 18px;background:var(--accent-soft);color:var(--ink-2);font-size:13px;
  text-align:center;flex:0 0 auto;}
.tipbar b{color:var(--accent);font-weight:800;}
.pickbox{width:24px;height:24px;border-radius:999px;border:2px solid var(--line-strong);
  flex:0 0 auto;align-self:center;position:relative;background:var(--surface);}
.pickbox.on{background:var(--accent);border-color:var(--accent);}
.pickbox.on::after{content:"";position:absolute;left:7.5px;top:4.5px;width:5px;height:10px;
  border:solid var(--on-accent);border-width:0 2.4px 2.4px 0;transform:rotate(45deg);}
.fadd{border:none;background:none;color:var(--line-strong);display:flex;align-items:center;justify-content:center;width:30px;height:30px;align-self:center;flex:0 0 auto;}
.fadd.on{background:none;color:var(--clay);}

.brandbar .acts .chip{width:auto;height:auto;padding:9px 16px;border-radius:999px;
  display:flex;align-items:center;font-weight:700;}
.brandbar .acts .chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

/* ══════════ 역할 색을 앱 전체에 일괄 적용 ══════════ */
/* --brand 자체를 역할 색으로 바꿔서, 브랜드색을 쓰던 모든 요소가 따라오게 한다.
   (스플래시·인트로·로그인은 역할이 없어 브랜드 기본색을 유지) */
/* 지도 묶음 핀 색 — 기본은 브랜드색, 역할이 정해지면 그 색을 따른다.
   예전에는 이 세 줄만 파랑으로 박혀 있어서, 요양보호사(녹색)로 들어가도
   지도의 동그라미만 파란색으로 남아 있었다. */
:root{ --cl-1:rgba(29,106,80,.92); --cl-2:rgba(22,84,63,.94); --cl-3:rgba(15,60,45,.95); }
/* 역할마다 색을 바꾸지 않는다. 브랜드는 하나여야 기억된다.
   역할은 색이 아니라 머리띠의 이름표로 알려준다(.rtag).
   사진 자리 그라데이션만 역할에 따라 살짝 달리해 화면이 심심하지 않게 한다. */

/* 머리띠의 역할 이름표 */
.rtag{font-size:11.5px;font-weight:700;letter-spacing:-.01em;color:var(--brand);
  background:var(--brand-soft);border-radius:999px;padding:3px 9px 4px;
  font-family:var(--sans);white-space:nowrap;}
/* 메일 안내 줄 — 브랜드 색 테두리로 「여기로 갑니다」를 못 지나치게 */
.mnote{display:flex;gap:10px;align-items:flex-start;background:var(--brand-soft);
  border:1.4px solid var(--brand);border-radius:12px;padding:12px 13px;margin-bottom:16px;}
.mnote>i{flex:0 0 auto;color:var(--brand);line-height:0;margin-top:1px;}
.mnote>div{flex:1;min-width:0;}
.mnote>div>b{display:block;font-size:13px;font-weight:700;color:var(--brand);letter-spacing:-.03em;}
.madr{display:block;font-size:15px;font-weight:800;color:var(--ink);margin-top:3px;
  word-break:break-all;letter-spacing:-.02em;}
.mx{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.65;}
.mnote.no{background:var(--clay-soft);border-color:var(--clay);}
.mnote.no>i,.mnote.no>div>b{color:var(--clay);}
/* 등급 있는 곳과 미평가 사이의 구분선 */
.grpline{margin:18px 0 4px;padding:11px 13px;background:var(--surface-2);
  border-radius:11px;border:1px solid var(--line);}
.grpline b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.04em;color:var(--ink);}
.grpline span{display:block;font-size:12px;color:var(--muted);line-height:1.65;margin-top:3px;}
/* 공고 — 현장에서 실제로 묻는 것 */
.fq{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.035em;margin-bottom:9px;}
.tg.hot{background:var(--brand-soft);color:var(--brand);font-weight:700;}
.jtag{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.warnq{color:var(--clay);font-weight:700;}
.bignum{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.bignum b{font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;}
.bignum span{font-size:12.5px;color:var(--muted);line-height:1.6;flex:1;min-width:140px;}
/* 「순서를 팔지 않는다」 — 목록 아래에서 「왜 무료인가」로 가는 문 */
.ordnote{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;margin:16px 0 2px;cursor:pointer;}
.ordnote>i{flex:0 0 auto;color:var(--brand);line-height:0;margin-top:1px;}
.ordnote>span{flex:1;min-width:0;font-size:12.5px;line-height:1.7;color:var(--muted);
  letter-spacing:-.02em;}
.ordnote b{color:var(--ink);font-weight:700;}
.ordnote>em{flex:0 0 auto;font-style:normal;font-size:12px;font-weight:700;color:var(--brand);
  align-self:flex-end;white-space:nowrap;}
/* 전화하시면 이걸 물어보세요 — 이 시설 자료에서 나온 질문은 표시가 다르다 */
.askhead{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--brand);
  line-height:1.6;margin:0 0 10px;font-weight:500;}
.askhead svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;}
.askhead b{font-weight:700;}
.askq{font-size:13.5px;line-height:1.75;margin:0 0 9px;padding-left:11px;position:relative;
  color:var(--ink-2);}
.askq:before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;
  border-radius:50%;background:var(--line-strong);}
.askq.mine{border-left:2.5px solid var(--brand);padding-left:11px;margin-left:-2px;}
.askq.mine:before{display:none;}
.askq b{color:var(--ink);font-weight:700;}
.askfoot{font-size:12.5px;color:var(--muted);margin:11px 0 0;line-height:1.7;}
/* 가로로 미는 줄 — PC 에서 끌 수 있다는 걸 손 모양으로 알린다 */
.filterrow, .sortbar, .kindbar, .tabs2{ scrollbar-width:none; }
.filterrow::-webkit-scrollbar, .sortbar::-webkit-scrollbar,
.kindbar::-webkit-scrollbar, .tabs2::-webkit-scrollbar{ display:none; }
.filterrow.more, .sortbar.more, .kindbar.more, .tabs2.more{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
}
.filterrow.hdrag, .sortbar.hdrag, .kindbar.hdrag, .tabs2.hdrag{
  cursor:grabbing; user-select:none; }
.filterrow.hdrag *, .sortbar.hdrag *, .kindbar.hdrag *,
.tabs2.hdrag *{ pointer-events:none; }
@media (max-width:360px){ .ordnote>em{display:none} }
.mwarn em{font-style:normal;font-weight:700;color:var(--clay);}
.mhelp{display:flex;gap:7px;align-items:flex-start;margin-top:7px;}
.mhelp>i{flex:0 0 auto;color:var(--brand);line-height:0;transform:scale(.8);transform-origin:left top;}
.mhelp>span{flex:1;min-width:0;}
.mhelp b{color:var(--brand);font-weight:700;}
.meml{display:flex;gap:5px;align-items:center;font-size:11.5px;color:var(--brand);
  margin-top:5px;font-weight:600;letter-spacing:-.03em;line-height:1.4;}
.meml svg{width:14px;height:14px;flex:0 0 auto;}
.meml.warn{color:var(--clay);}
.mwarn{display:block;font-size:12.5px;color:var(--ink);margin-top:3px;line-height:1.65;}


/* 안심 인증은 역할색과 겹치지 않게 중립 강조로 */
.bdg.v{background:var(--ink);color:var(--ground);}
.uib.v{background:var(--ink);color:var(--ground);}

/* 요양원 전환 카드는 도착지 색(보라)으로 미리 알려준다 */
.bizcard{background:var(--clay-soft);}
.bizcard .t{color:var(--clay);}
.bizcard > span:last-child{color:var(--clay);}

/* 나머지 포인트도 역할색으로 */
.search .g,.stepper button,.regionrow.on,.crumb b{color:var(--accent);}
.gb.a{background:var(--accent);color:var(--on-accent);}
.gb.b{background:var(--accent-soft);color:var(--accent);}
.bar i{background:var(--accent);}
.bar i.am{background:var(--amber);}
.mpin.cheap{background:var(--accent);color:var(--on-accent);border-color:var(--accent);--pb:var(--accent);}
.jp{color:var(--accent);}
.done-mark{background:var(--accent);color:var(--on-accent);}
.autofill{border-color:var(--accent);background:var(--accent-soft);}
.autofill .h{color:var(--accent);}
.result{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent);}
.ck.done{background:var(--accent);border-color:var(--accent);}
.ck.done::after{border-color:var(--on-accent);}
.opt.on .chk::after{border-color:var(--on-accent);}
input:focus,textarea:focus{border-color:var(--accent);}
:focus-visible{outline-color:var(--accent);}
::selection{background:var(--accent-soft);color:var(--ink);}
.btn{background:var(--accent);color:var(--on-accent);}
.btn.ghost{background:var(--surface);color:var(--ink);}
.btn.link{background:none;color:var(--muted);}
.loginbtn.kakao{background:#FEE500;color:#1A1A1A;}
.tabbar button.on{color:var(--accent);}
.hbanner .bfig .v.strong{color:var(--accent);}
.callout-p b{color:var(--ink-2);}


.foot .btn.ghost svg{color:var(--clay);}

/* 사진 미등록 시설 자리표시 */
/* 사진이 없는 자리는 조용해야 합니다. 사진인 척하면 안 됩니다. */
.ph{width:100%;height:100%;display:grid;place-items:center;background:var(--surface-2);}
.ph span{font-weight:600;color:var(--faint);font-size:17px;letter-spacing:-.03em;}
.ph.h0,.ph.h1,.ph.h2,.ph.h3{background:var(--surface-2);}
.ph.h1,.ph.h3{background:var(--surface-3);}
.ph.hero{background:var(--surface-2);}
.ph.hero span{font-size:40px;color:var(--line-strong);}
.srcbar{display:flex;align-items:center;gap:7px;padding:9px 16px;background:var(--brand-soft);
  font-size:11.5px;color:var(--ink-2);line-height:1.5;border-bottom:1px solid var(--line);}
.srcbar b{color:var(--brand);font-weight:700;}
.estmark{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:5px;background:var(--surface-2);
  color:var(--muted);font-size:10.5px;font-weight:600;vertical-align:1px;letter-spacing:0;}
.mkicon{display:inline-block;vertical-align:-4px;margin-right:5px;border-radius:6px;}
.cbox{margin-top:18px;border:1px solid var(--line-strong);border-radius:14px;
  background:var(--surface);padding:12px 12px 10px;}
.cbox textarea{border:none;padding:0;background:transparent;font-size:14.5px;resize:none;min-height:62px;}
.cbox textarea:focus{outline:none;}
.cbar{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:9px;border-top:1px solid var(--line);}
.cbar .h{font-size:12px;color:var(--faint);}
.cbar .btn{margin-left:auto;flex:0 0 auto;padding:0 18px;height:34px;}
.wbox{border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);
  padding:12px 14px;transition:border-color .15s;}
.wbox:focus-within{border-color:var(--brand);}
.wbox input,.wbox textarea{border:none;padding:0;background:transparent;width:100%;
  font:inherit;font-size:15px;color:var(--ink);resize:none;}
.wbox input:focus,.wbox textarea:focus{outline:none;}
.wbox textarea{min-height:150px;line-height:1.75;}
.rev{position:relative;padding-right:64px;}
.rev.best{background:var(--accent-soft);border-radius:12px;padding:13px 64px 13px 14px;
  margin-bottom:10px;border-top:none;}
.bestbdg{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:700;
  background:var(--accent);color:var(--on-accent);padding:2px 5px;border-radius:4px;margin-right:6px;}
.mytag{font-style:normal;color:var(--brand);font-size:11px;font-weight:600;margin-left:4px;}
.likebtn{position:absolute;right:0;top:13px;display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);
  font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface);}
.likebtn.on{border-color:var(--clay);color:var(--clay);background:var(--clay-soft,#FBEFE9);}
.undobtn{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line-strong);
  font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface);white-space:nowrap;}
.undobtn:disabled{color:var(--faint);background:var(--surface-2);}
.rev.best .likebtn{top:13px;right:12px;}
.pager{display:flex;align-items:center;justify-content:center;gap:5px;margin:18px 0 4px;}
.pager button{min-width:32px;height:32px;padding:0 8px;border-radius:9px;border:1px solid var(--line-strong);
  font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface);}
.pager button.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.pager button:disabled{opacity:.35;}
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.phcell{position:relative;aspect-ratio:4/3;border-radius:11px;display:grid;place-items:center;
  color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.35);}
.phadd{aspect-ratio:4/3;border-radius:11px;border:1.5px dashed var(--line-strong);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font-size:11.5px;background:var(--surface-2);}
/* 사업자등록증 첨부 상자 — .btn.wide 의 display:block 을 피하려고 아예 따로 만든다 */
.docdrop{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-height:124px;padding:24px 18px;border-radius:14px;
  border:1.5px dashed var(--line-strong);background:var(--surface-2);text-align:center;}
.docdrop svg{width:26px;height:26px;color:var(--accent);flex:0 0 auto;}
.docdrop .t{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4;}
.docdrop .s{font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.5;}
.docdrop.dragover{border-style:solid;border-color:var(--accent);background:var(--accent-soft);}
/* 심사 화면 — 공단 대표번호 대조 */
/* 지도 첫 화면 — 내 위치 물어보기 */
.geoask{position:absolute;left:12px;right:12px;z-index:6;
  background:var(--surface);border-radius:16px;padding:16px 17px 14px;
  box-shadow:0 10px 32px -10px rgba(15,24,34,.30);border:1px solid var(--line);
  animation:geopop .3s cubic-bezier(.22,1,.32,1) both;}
@keyframes geopop{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.geoask .t{font-size:15.5px;font-weight:700;margin-bottom:5px;letter-spacing:-.01em;}
.geoask .d{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:13px;}
.geoask .btns{display:flex;gap:8px;}
.geoask .btns .btn{padding:12px 14px;font-size:14.5px;border-radius:11px;}
/* 요양 절차 — 다섯 단계
   클래스 이름을 .jstep 안으로 가둡니다. 예전에 .jd 를 그냥 썼다가
   목록 화면의 .jd(둥근 배지)와 부딪혀 파란 말풍선이 생겼습니다. */
.jstep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card,16px);
  margin-bottom:12px;overflow:hidden;}
.jstep.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.jstep .jhead{display:flex;align-items:center;gap:11px;padding:15px 16px;}
.jstep .jhead .num{flex:0 0 26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--muted);
  display:grid;place-items:center;font-size:13px;font-weight:700;font-family:var(--mono);}
.jstep.on .jhead .num{background:var(--accent);color:var(--on-accent);}
.jstep.done .jhead .num{background:var(--brand-soft);color:var(--accent);}
.jstep .jhead .ttl{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.01em;text-align:left;}
.jstep .jhead .when{flex:0 0 auto;font-size:12px;color:var(--faint);}
.jstep .jbody{padding:0 16px 16px;}
.jstep .desc{float:none;font-size:13.5px;color:var(--ink-2);line-height:1.85;
  margin:0 0 12px;padding:0;background:none;border-radius:0;font-family:inherit;font-weight:400;}
.jstep .ul{list-style:none;margin:0 0 12px;padding:0;}
.jstep .ul li{font-size:13.5px;line-height:1.75;padding:5px 0 5px 15px;position:relative;color:var(--ink-2);}
.jstep .ul li::before{content:'';position:absolute;left:2px;top:14px;width:4px;height:4px;border-radius:50%;
  background:var(--line-strong);}
.jstep .tip{background:var(--amber-soft);border-radius:11px;padding:11px 13px;font-size:12.5px;
  line-height:1.8;margin:0 0 12px;color:var(--ink-2);}
.jstep .where{font-size:11.5px;color:var(--faint);margin:9px 0 0;text-align:center;}

/* 계정 화면 맨 아래 · 앱 정보 */
.verbox{background:var(--surface-2);border-radius:14px;padding:14px 15px;margin-bottom:6px;}
.vrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;}
.vrow .k{font-size:12.5px;color:var(--muted);}
.vrow .v{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);font-weight:600;}
.vsrc{font-size:11.5px;color:var(--faint);line-height:1.75;margin:10px 0 0;
  padding-top:10px;border-top:1px solid var(--line);}
/* 로그아웃은 실수로 누를 일이 없게 맨 아래에 조용히 둔다 */
.signout{display:block;width:100%;margin:20px 0 0;padding:14px;font-size:13.5px;
  color:var(--faint);font-weight:500;text-decoration:underline;text-underline-offset:3px;}
.quitlink{display:block;width:100%;margin:2px 0 0;padding:10px;font-size:13px;
  color:var(--faint);font-weight:400;text-decoration:underline;text-underline-offset:3px;}
.btn.danger{background:var(--clay);border-color:var(--clay);color:var(--on-clay);}
.btn.danger:disabled{opacity:.35;}

/* ── 요양 절차 · 슬라이드 ──
   예전에는 5단계를 세로로 길게 쌓아서, 끝까지 내려야 전체가 보였다.
   한 화면에 한 단계만 두고 옆으로 넘기게 바꿨다. */
.jw{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:var(--surface);}
.jtop{flex:0 0 auto;padding:13px 18px 12px;border-bottom:1px solid var(--line);}
.jrail{display:flex;gap:5px;}
.jrail button{flex:1;height:4px;border-radius:2px;background:var(--line);padding:0;position:relative;
  transition:background .25s ease;}
.jrail button::after{content:'';position:absolute;left:0;right:0;top:-13px;bottom:-13px;}
.jrail button.done{background:color-mix(in srgb,var(--accent) 42%,transparent);}
.jrail button.on{background:var(--accent);}
.jhead2{display:flex;align-items:baseline;gap:7px;margin-top:12px;}
.jix,.jall{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;}
.jix{color:var(--accent);} .jall{color:var(--faint);font-weight:600;}
.jhint{margin-left:auto;font-size:11.5px;color:var(--faint);letter-spacing:-.01em;}

.jtrack{flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.jtrack::-webkit-scrollbar{display:none;}
.jslide{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:22px 18px 28px;}

.jnum{font-family:var(--mono);font-size:52px;font-weight:800;line-height:.9;letter-spacing:-.05em;
  color:var(--brand-soft);display:block;}
.jsttl{font-size:22px;font-weight:800;letter-spacing:-.04em;line-height:1.28;margin:10px 0 0;}
.jkv{display:flex;gap:6px;flex-wrap:wrap;margin:13px 0 17px;}
.jkv span{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--muted);
  background:var(--surface-2);border-radius:7px;padding:5px 9px;}
.jdesc{font-size:14px;color:var(--ink-2);line-height:1.9;margin:0 0 17px;}
.jol{list-style:none;margin:0 0 17px;padding:0;border-top:1px solid var(--line);}
.jol li{display:flex;gap:12px;font-size:13.5px;line-height:1.7;color:var(--ink-2);
  padding:12px 2px;border-bottom:1px solid var(--line);}
.jol li i{flex:0 0 auto;font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;
  color:var(--faint);padding-top:4px;letter-spacing:.04em;}
.jtip2{background:var(--amber-soft);border-radius:12px;padding:13px 14px;font-size:13px;
  line-height:1.85;color:var(--ink-2);margin:0 0 17px;}
.jtip2 b{color:var(--ink);}

.jbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--surface);}
.jarr{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--line-strong);font-size:20px;color:var(--ink-2);background:var(--surface);line-height:1;}
.jarr:disabled{opacity:.28;}
.jdots{flex:1;display:flex;justify-content:center;align-items:center;gap:6px;}
.jdots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);
  transition:width .22s ease,background .22s ease;}
.jdots i.on{width:20px;border-radius:3px;background:var(--accent);}
.jnext{flex:0 0 auto;height:46px;padding:0 17px;border-radius:13px;background:var(--accent);
  color:var(--on-accent);font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  display:flex;align-items:center;white-space:nowrap;}

/* 이렇게 돌봅니다 */
.howrow{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.75;}
.howrow:first-of-type{border-top:none;padding-top:2px;}
.howrow .k{flex:0 0 52px;color:var(--muted);font-size:12.5px;padding-top:1px;}
.howrow .v{flex:1;min-width:0;}
.howrow .v i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.7;}
.daytl{border-left:2px solid var(--line);margin:2px 0 0 6px;padding-left:14px;}
.dayrow{position:relative;padding:7px 0;font-size:13.5px;line-height:1.65;}
.dayrow::before{content:'';position:absolute;left:-19px;top:14px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);}
.dayrow .t{display:inline-block;min-width:56px;margin-right:10px;font-weight:700;color:var(--accent);}
.dayrow .d{color:var(--ink-2);}
.telchk{border-radius:11px;padding:11px 13px;margin:10px 0 0;font-size:12.5px;line-height:1.65;}
.telchk.ok{background:var(--brand-soft);color:var(--accent);font-weight:600;}
.telchk.none{background:var(--surface-2);color:var(--muted);}
.telchk.warn{background:var(--amber-soft);color:var(--ink);}
.telchk .r{display:flex;justify-content:space-between;gap:10px;}
.telchk .r span:first-child{color:var(--muted);flex:0 0 auto;}
.telchk .r b{font-family:var(--mono);font-weight:600;}
.telchk a{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:9px;
  height:40px;border-radius:10px;background:var(--surface);border:1.5px solid var(--line-strong);
  font-size:13.5px;font-weight:600;color:var(--ink);}
.docshot{border-radius:14px;overflow:hidden;border:1.5px solid var(--line);background:var(--surface-2);}
.docshot img{width:100%;display:block;}
.phdel{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;font-size:14px;line-height:1;display:grid;place-items:center;}
.wpav{position:relative;width:104px;aspect-ratio:1/1;height:auto;border-radius:50%;
  margin:0 auto;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:#fff;font-size:36px;font-weight:700;letter-spacing:-.02em;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.85);}
/* ── 눌러서 걸리는 전화 · 열리는 누리집 ── */
/* 가까운 병원 */
.hosplist{display:flex;flex-direction:column;}
.hosp{display:flex;align-items:center;gap:11px;padding:11px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);}
.hosp:last-child{border-bottom:0;}
.hosp .d{flex:0 0 52px;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--brand);}
.hosp .t{flex:1;min-width:0;}
.hosp .t b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hosp .t b .bg{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:5px;vertical-align:1px;
  background:var(--brand-soft);color:var(--brand);font-size:10.5px;font-weight:700;font-style:normal;}
.hosp .t i{display:block;margin-top:3px;font-style:normal;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hosp .c{flex:0 0 auto;color:var(--brand);display:flex;padding:4px;}
.hosp:active{background:var(--surface-2);}

/* 관심에 담은 곳 — 지도에서 한눈에 */
.kp-h{font-style:normal;font-size:11px;line-height:1;color:var(--clay);margin-left:1px;}
.kpin.fav .kp-b{border-color:var(--clay);box-shadow:0 0 0 1.5px var(--clay) inset;}
.kpin.a.fav .kp-b,.kpin.on.fav .kp-b{box-shadow:none;}
.kpin.a .kp-h,.kpin.on .kp-h{color:#fff;}
.kcl.fav{box-shadow:0 3px 10px -2px rgba(0,0,0,.4), 0 0 0 3px var(--clay);}
.bb-cost.sm{font-size:12.5px;font-weight:600;color:var(--muted);}
.bb-b.heart{flex:0 0 auto;padding:0 11px;display:grid;place-items:center;color:var(--muted);}
.bb-b.heart.on{color:var(--clay);border-color:var(--clay);}
.bb-b.heart svg{width:17px;height:17px;}

/* 걸리는 시간 — 카드·말풍선에서 눈에 먼저 들어오게 */
.trip{color:var(--brand);font-weight:700;}
.tripbar{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:10px 12px;
  border-radius:11px;background:var(--brand-soft);}
.tripbar .ic{flex:0 0 auto;color:var(--brand);display:flex;padding-top:1px;}
.tripbar .ic svg{width:16px;height:16px;}
.tripbar .t{font-size:13px;color:var(--ink-2);line-height:1.5;}
.tripbar .t b{color:var(--brand);font-size:14px;}
.tripbar .t i{display:block;margin-top:3px;font-style:normal;font-size:11.5px;color:var(--faint);}
.tripbar.over{background:var(--amber-soft);}
.tripbar.over .ic,.tripbar.over .t b{color:var(--amber);}
.rowlink.contact{text-decoration:none;color:inherit;}
.rowlink.contact .t{font-weight:600;}
.rowlink.contact .t .sub{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.6;}
.rowlink.contact .v.tel{font-family:var(--mono);font-weight:700;color:var(--brand);font-size:14.5px;
  flex:0 0 auto;margin-left:auto;padding-right:8px;letter-spacing:-.02em;}
.rowlink.contact .go{color:var(--brand);flex:0 0 auto;}
.rowlink.contact:active{background:var(--surface-2);}
.tellink{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;font-family:var(--mono);letter-spacing:-.01em;}
/* 상세 화면의 주소 — 눌러서 지도 앱으로 */
.addrlink{display:block;margin-top:6px;text-decoration:none;color:var(--ink-2);
  font-size:13.5px;line-height:1.65;}
.addrlink .ext{display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  color:var(--brand);font-size:12px;font-weight:600;white-space:nowrap;vertical-align:middle;}
.addrlink .ext svg{width:13px;height:13px;}
.addrlink:active span:first-child{text-decoration:underline;}
.dragover{outline:2px dashed var(--brand);outline-offset:3px;background:var(--brand-soft) !important;}
.inlink{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.wpav.empty{box-shadow:none;border:1.5px dashed var(--line-strong);background:var(--surface-2);
  color:var(--muted);flex-direction:column;gap:3px;font-size:14px;font-weight:500;}
.wpav .phdel{top:2px;right:2px;}
/* 마이페이지 상단 역할 아이콘도 정원으로 */
.meav{width:52px;aspect-ratio:1/1;height:auto;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:var(--brand-soft);color:var(--brand);overflow:hidden;}
.meav img{width:100%;height:100%;object-fit:cover;display:block;}
.mecard{display:flex;align-items:center;gap:14px;margin-bottom:18px;width:100%;text-align:left;}
.mesub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.55;}
.pav{width:42px;aspect-ratio:1/1;height:auto;}
/* 로그인 전 이탈을 막는 '둘러보기' 버튼 — 로그인 버튼보다 먼저, 더 크게 */
/* .btn.wide 의 display:block 이 우선순위에서 이겨 아이콘이 혼자 윗줄로 떨어졌었다.
   같은 무게(클래스 3개)로 올려 가로 한 줄 가운데 정렬을 확실히 잡는다. */
.btn.wide.lookaround{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:54px;padding:0 16px;line-height:1;text-align:center;
  font-size:16px;font-weight:700;border-radius:var(--r-btn,14px);}
.lookaround svg{flex:0 0 auto;display:block;stroke:currentColor;}
.lookhint{font-size:12.5px;color:var(--muted);line-height:1.75;text-align:center;margin:12px 0 4px;}
/* ── 핀을 누르면 뜨는 카드 ──
   예전에는 핀 바로 위에 붙였더니, 지도 위쪽 핀은 검색창·필터에 가려 이름부터 잘렸다.
   그래서 핀 위치와 상관없이 화면 정중앙에 띄운다. 어디를 눌러도 내용이 다 보인다. */
#mbub{position:absolute;inset:0;z-index:60;display:none;}
#mbub.on{display:block;}
#mbub .scrim{position:absolute;inset:0;background:rgba(16,24,33,.38);
  animation:fadein .18s ease both;}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#mbub .mbubble{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(304px,86%);padding:17px 17px 15px;box-shadow:0 22px 50px -14px rgba(0,0,0,.5);
  animation:bubpop .22s var(--ease,ease) both;}
@keyframes bubpop{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}
                  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#mbub .mbubble::after{display:none;}
#mbub .bb-x{top:9px;right:9px;width:34px;height:34px;font-size:21px;margin:-6px -6px 0 0;}
#mbub .bb-n{font-size:16.5px;padding-right:30px;line-height:1.4;}
#mbub .bb-a{font-size:12.5px;margin-top:6px;line-height:1.6;}
#mbub .bb-row{font-size:12.5px;margin-top:12px;}
#mbub .bb-cost{font-size:13.5px;margin-top:11px;padding-top:11px;}
#mbub .bb-cost b{font-size:16.5px;}
#mbub .bb-act{margin-top:15px;gap:7px;}
#mbub .bb-b{height:42px;font-size:13.5px;border-radius:11px;}
#mbub .bb-b.heart svg{width:19px;height:19px;}
/* 같은 자리에 겹친 곳들을 고르는 카드 */
#mbub .mbubble.stack{width:min(320px,88%);}
.stacklist{margin-top:12px;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line);}
.strow{display:block;width:100%;text-align:left;padding:11px 2px;border-bottom:1px solid var(--line);}
.stacklist .strow:last-child{border-bottom:0;}
.strow .sn{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45;}
.strow .sn .bdg{margin-left:5px;vertical-align:1px;}
.strow .sm{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.55;}
.strow:active{background:var(--surface-2);}
/* 마이페이지 · 저장한 요양원 간추린 줄 */
.srow2{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;
  width:100%;text-align:left;padding:13px 0;border-bottom:1px solid var(--line);column-gap:10px;}
.srow2:last-child{border-bottom:0;}
.srow2 .s1{grid-column:1;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.srow2 .s1 .bdg{margin-left:5px;vertical-align:1px;}
.srow2 .s2{grid-column:1;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.srow2 .s3{grid-column:1;font-size:12.5px;color:var(--ink-2);margin-top:4px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;}
.srow2 .sgo{grid-column:2;grid-row:1/-1;align-self:center;color:var(--faint);display:flex;}
.srow2.all .s1{color:var(--brand);}
.srow2:active{background:var(--surface-2);}
.mbubble{position:relative;width:236px;background:var(--surface);border-radius:14px;
  border:1px solid var(--line-strong);box-shadow:0 10px 28px -8px rgba(0,0,0,.4);
  padding:13px 14px 12px;font-family:var(--sans);text-align:left;}
.mbubble::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:var(--surface);filter:drop-shadow(0 2px 1px rgba(0,0,0,.12));}
.bb-x{position:absolute;top:6px;right:8px;width:22px;height:22px;border-radius:50%;
  color:var(--faint);font-size:16px;line-height:1;display:grid;place-items:center;}
.bb-n{font-size:14.5px;font-weight:700;letter-spacing:-.02em;padding-right:20px;line-height:1.35;}
.bb-g{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:700;
  background:var(--brand-soft);color:var(--brand);padding:2px 5px;border-radius:5px;margin-left:4px;
  vertical-align:2px;}
.bb-g.w{background:var(--surface-2);color:var(--muted);}
.bb-g.n{background:var(--surface-2);color:var(--muted);}
.bb-a{font-size:11.5px;color:var(--muted);margin-top:4px;}
.bb-row{display:flex;gap:10px;font-size:11.5px;color:var(--ink-2);margin-top:9px;flex-wrap:wrap;}
.bb-row b{font-family:var(--mono);}
.bb-row .ok{color:var(--ok,#1F7A55);} .bb-row .warn{color:var(--amber);}
.bb-cost{font-size:12.5px;color:var(--ink);margin-top:7px;padding-top:8px;border-top:1px solid var(--line);}
.bb-cost b{color:var(--clay);font-size:14px;}
.bb-act{display:flex;gap:6px;margin-top:10px;}
.bb-b{flex:1;height:32px;border-radius:9px;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;
  color:var(--ink-2);text-decoration:none;background:var(--surface);}
.bb-b.main{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.newdot{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;
  background:var(--clay);color:#fff;padding:2px 5px;border-radius:4px;margin-left:6px;vertical-align:2px;}
.chatdot{font-style:normal;font-size:10px;font-weight:700;background:var(--accent-soft);
  color:var(--accent);padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:1px;}
/* ── 알림 ── */
.bellbtn{position:relative;}
.bdot{position:absolute;top:4px;right:4px;min-width:14px;height:14px;padding:0 2px;
  border-radius:999px;background:var(--clay);color:#fff;font-size:9px;font-weight:700;
  font-style:normal;font-family:var(--mono);display:flex;align-items:center;justify-content:center;
  line-height:1;border:1.5px solid var(--surface);box-sizing:border-box;letter-spacing:-.02em;}
.nrow{display:flex;gap:12px;width:100%;text-align:left;align-items:flex-start;
  padding:15px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);margin-bottom:9px;cursor:pointer;}
.nrow.new{border-color:var(--accent);background:var(--accent-soft);}
.nrow .nic{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--muted);}
.nrow.new .nic{background:var(--surface);color:var(--accent);}
.nrow .ntx{flex:1;min-width:0;}
.nrow .nt{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5;}
.nrow .nb{display:block;font-size:13px;color:var(--muted);line-height:1.7;margin-top:3px;}
.nrow .na{display:block;font-size:11.5px;color:var(--faint);margin-top:6px;}
/* 링크를 타고 오신 분께 보이는 띠 */
.closedbar{margin:14px 16px 4px;padding:15px 17px 17px;border-radius:var(--r-card);
  background:var(--clay-soft);border:1px solid var(--clay);}
.closedbar .t{font-size:15px;font-weight:700;color:var(--clay);line-height:1.5;}
.closedbar .d{font-size:12.5px;color:var(--ink-2);line-height:1.8;margin-top:6px;}
.linkbar{position:relative;margin:14px 16px 16px;padding:16px 18px 18px;
  border-radius:var(--r-card);background:var(--accent-soft);border:1px solid var(--accent);}
.linkbar .t{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.5;padding-right:26px;}
.linkbar .d{font-size:13px;color:var(--ink-2);line-height:1.8;margin-top:6px;}
.linkbar .lx{position:absolute;top:8px;right:8px;width:30px;height:30px;
  display:grid;place-items:center;color:var(--muted);font-size:19px;line-height:1;border-radius:8px;}
.chatnote{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.7;
  background:var(--surface-2);border-radius:10px;padding:10px 12px;margin:0 0 16px;}
.msg{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:12px;}
.msg .b{max-width:78%;padding:10px 13px;border-radius:14px 14px 14px 4px;background:var(--surface);
  border:1px solid var(--line);font-size:14px;line-height:1.65;white-space:pre-line;}
.msg .ts{font-size:10.5px;color:var(--faint);margin-top:4px;}
.msg.me{align-items:flex-end;}
.msg.me .b{background:var(--accent);color:var(--on-accent);border-color:var(--accent);
  border-radius:14px 14px 4px 14px;}
.chatbar{flex:0 0 auto;display:flex;gap:8px;align-items:center;padding:10px 12px;
  border-top:1px solid var(--line);background:var(--surface);}
.chatsend{flex:0 0 auto;height:42px;padding:0 16px;border-radius:12px;background:var(--accent);
  color:var(--on-accent);font-size:14px;font-weight:700;}
.chatsend:disabled{opacity:.4;}
.sqgrid{display:grid;gap:6px;margin-top:10px;grid-template-columns:repeat(3,1fr);}
.sqgrid.n1{grid-template-columns:1fr;} .sqgrid.n2{grid-template-columns:repeat(2,1fr);}
.sqgrid.edit{grid-template-columns:repeat(4,1fr);}
.sq{position:relative;aspect-ratio:1/1;border-radius:10px;display:grid;place-items:center;overflow:hidden;
  color:#fff;font-size:11.5px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.4);}
.sq .more{font-style:normal;font-size:16px;font-weight:800;}
.sq.add{border:1.5px dashed var(--line-strong);background:var(--surface-2);color:var(--muted);
  display:flex;flex-direction:column;gap:2px;font-size:10.5px;font-weight:500;text-shadow:none;}
.post .sqgrid{margin:10px 0 2px;}
/* 지도 핀 — 이미지가 아니라 우리가 그린 요소라 배경 네모가 생기지 않는다 */
.kpin{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transform:translateY(-2px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.22));}
.kp-b{display:flex;align-items:center;gap:5px;width:max-content;padding:5px 10px 5px 5px;border-radius:999px;
  background:var(--surface);border:1.5px solid var(--line-strong);color:var(--ink);white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;font-weight:700;line-height:1;}
/* 등급 한 글자 — 금액과 섞이지 않게 동그란 칩으로 따로 뗀다 */
.kp-g{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;flex:0 0 auto;
  background:var(--surface-3);color:var(--muted);font-size:10.5px;font-weight:800;font-style:normal;}
.kpin.none .kp-b{padding-left:10px;color:var(--muted);}
.kp-t{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:0;height:0;
  border:5px solid transparent;border-top-color:var(--surface);}
.kpin.a .kp-b{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.kpin.a .kp-t{border-top-color:var(--brand);}
.kpin.a .kp-g{background:rgba(255,255,255,.26);color:#fff;}
.kpin.b .kp-b{border-color:var(--brand);color:var(--brand);}
.kpin.b .kp-g{background:var(--brand-soft);color:var(--brand);}
.kpin.on{z-index:4;}
.kpin.on .kp-b{background:var(--ink);border-color:var(--ink);color:var(--ground);transform:scale(1.08);}
.kpin.on .kp-t{border-top-color:var(--ink);}
.kpin.on .kp-g{background:rgba(255,255,255,.3);color:var(--ground);}
.kcl{display:grid;place-items:center;width:max-content;min-width:44px;height:44px;padding:0 8px;border-radius:999px;cursor:pointer;
  background:var(--cl-1);color:#fff;font-family:var(--mono);font-size:13px;font-weight:700;
  box-shadow:0 3px 10px -2px rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.9);
  white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.kcl.big{min-width:52px;height:52px;font-size:14px;background:var(--cl-2);}
.kcl.huge{min-width:60px;height:56px;font-size:14px;background:var(--cl-3);}
/* 카카오가 그리는 요소에 탭 하이라이트·외곽선이 남지 않게 */
#kmap img{outline:none;border:0;background:none;-webkit-tap-highlight-color:transparent;}
#kmap *{-webkit-tap-highlight-color:transparent;}
.phcell,.sq,.wpav{background-size:cover;background-position:center;}
.phadd,.sq.add{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;line-height:1;}
.plus{display:block;font-size:21px;line-height:1;font-weight:400;}
.sq.add .plus{font-size:19px;}
/* 반지름이 어디서나 같은 정원 */
.wpav{width:104px;height:104px;aspect-ratio:auto;border-radius:9999px;overflow:hidden;}
.meav{width:52px;height:52px;aspect-ratio:auto;border-radius:9999px;}
.pav{width:42px;height:42px;aspect-ratio:auto;border-radius:9999px;}

/* ═════════ 여백 ═════════
   좌우는 --gut 하나로 통일하고, 세로는 4·8·12·16·20·28·36 계단만 쓴다.
   블록끼리는 gap 으로 띄우고, 요소마다 margin 을 따로 주지 않는다. */
.body.pad{padding:var(--s6) var(--gut) var(--s7);}
.body.grey{padding-bottom:var(--s7);}
.body.grey.pad{padding-left:var(--gut);padding-right:var(--gut);}
.brandbar{padding-left:var(--gut);padding-right:var(--gut);}
.sheetbody,.dockbar{padding-left:var(--gut);padding-right:var(--gut);}
.block{padding:var(--s5) var(--gut) var(--s6);}
.grid4{padding:var(--s2) 0 var(--s3);}
.hbanner{margin-bottom:var(--s2);}
.strip{margin:var(--s3) var(--gut);width:calc(100% - var(--gut)*2);}
/* 처음 오신 분께만 보이는 줄 — 조건을 한 번 정하시면 사라집니다 */
.strip.firsttime{background:var(--brand-soft);border-color:transparent;}
.strip.firsttime .t{color:var(--brand);}
.strip.firsttime .go{color:var(--brand);}

/* 제목과 그 아래 내용은 붙이고, 묶음끼리는 넉넉히 띄운다 */
.lbl{margin:var(--s6) 0 var(--s3);}
.lbl:first-child{margin-top:0;}
.card + .lbl,.opts + .lbl,.chipset + .lbl{margin-top:var(--s6);}
.card{margin-bottom:var(--s4);}
.card:last-child{margin-bottom:0;}
.field{margin-bottom:var(--s5);}
.field:last-child{margin-bottom:0;}

/* 카드 안쪽 — 항목 사이는 좁게, 마지막 줄은 여백 없이 */
.card .kv:last-of-type{border-bottom:none;}
.card .note{margin-top:var(--s3);margin-bottom:0;}
.chipset{gap:var(--s2);}
.opts{gap:var(--s2);}

/* 화면 맨 아래가 탭바에 닿지 않게 */
.body > :last-child{margin-bottom:0;}
.scr .foot{padding:var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));}