/* APPROACH-OFFICIAL-01 「접근경보」 (site-approach-alert-ui.js): one card in 가족 지킴이 › 접근경보 (소유자 10-27 12:3x).
   Colours from the Site theme tokens (light, dark, system-dark); controls 48px and up, the 「접근 알림 받았어요」 button 60px. */
.approach-card{--aa-danger:var(--lotbi-error-text,#a02645);--aa-warn:var(--lotbi-warning-text,#8a4b16);--aa-ok:var(--lotbi-success-text,#247647);--aa-muted:var(--lotbi-text-secondary,#5d6475);--aa-line:var(--lotbi-border-default,#dfe3ea)}
.approach-head{display:flex;align-items:flex-start;gap:12px}
/* 6번 M33 10-28: the setup's parts (head, 「알릴 가족과 단계」, choices, consent, buttons) were stacked with no gap. */
.approach-setup{display:grid;gap:14px}
.approach-head>div{display:grid;gap:2px;min-width:0}
.approach-head h3,.approach-head p{margin:0}
.approach-head h3{line-height:44px}
.approach-head-mark{display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--aa-danger) 10%,transparent);color:var(--aa-danger)}
.approach-head-mark svg{width:24px;height:24px}
.approach-small{margin:0;font-size:14px;line-height:1.5;color:var(--aa-muted)}
.approach-in-use{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--aa-ok) 10%,transparent);color:var(--aa-ok);font-size:15px;font-weight:650}
.approach-field{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.approach-field legend{margin-bottom:6px;font-size:16px;font-weight:650}
.approach-choice{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid var(--aa-line);border-radius:12px;font-size:16px;cursor:pointer}
.approach-choice input{width:22px;height:22px;margin:0;flex:0 0 auto}
.approach-consent{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--lotbi-surface-subtle,rgba(127,127,127,.08))}
.approach-dnd{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--lotbi-surface-subtle,rgba(127,127,127,.08))}
.approach-dnd-open{justify-self:start}
/* 7번 S26 10-28: no family to tell — a box, not a small grey line. */
.approach-no-family{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--aa-warn) 45%,transparent);background:color-mix(in srgb,var(--aa-warn) 8%,transparent)}
.approach-no-family>b{color:var(--aa-warn);font-size:16px}
.approach-no-family>button{justify-self:start}
.approach-family-row{display:grid;gap:6px;padding:10px 0;border-bottom:1px solid var(--aa-line)}
.approach-family-row:last-child{border-bottom:0}
.approach-family-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.approach-stage-pick{min-height:52px;padding:0 10px;gap:8px}
.approach-stage-words{display:grid;line-height:1.2}
.approach-stage-words b{font-size:15px}
.approach-stage-words small{font-size:13px;color:var(--aa-muted);white-space:nowrap}
.approach-stage{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:14px;border:1px solid var(--aa-line)}
.approach-stage>div:first-child{display:grid;gap:4px}
.approach-stage b{font-size:19px}
.approach-stage span{color:var(--aa-muted);font-size:15px;line-height:1.5}
.approach-stage-right{display:grid;justify-items:end;gap:2px;flex:0 0 auto}
.approach-stage.approach-stage-old{border-color:var(--aa-line);background:transparent}
.approach-stage.approach-stage-old b{font-size:16px;color:var(--aa-muted)}
.approach-stage-caution{border-color:color-mix(in srgb,var(--aa-warn) 45%,transparent);background:color-mix(in srgb,var(--aa-warn) 7%,transparent)}
.approach-stage-caution b{color:var(--aa-warn)}
.approach-stage-danger,.approach-stage-urgent{border-color:color-mix(in srgb,var(--aa-danger) 50%,transparent);background:color-mix(in srgb,var(--aa-danger) 8%,transparent)}
.approach-stage-danger b,.approach-stage-urgent b{color:var(--aa-danger)}
.approach-ok{min-height:48px}
.approach-received{display:grid;gap:8px}
.approach-received-main{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;min-height:60px;border-radius:14px;font-size:19px;font-weight:700}
.approach-received-main svg{width:22px;height:22px}
.approach-distance-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.approach-chip{display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;box-sizing:border-box;min-width:0;min-height:44px;margin:0;padding:0 8px;border:1px solid var(--aa-line);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:15px;font-weight:650;white-space:nowrap;cursor:pointer}
.approach-chip:focus-visible{outline:3px solid var(--lotbi-focus-ring,#454545);outline-offset:2px}
.approach-distance-row .approach-small{flex:0 0 100%}
.approach-senders{box-sizing:border-box;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--aa-line);border-radius:12px;font:inherit;font-size:16px;background:transparent;color:inherit}
.approach-steps{display:grid;gap:6px;margin:0;padding-left:20px;font-size:15px;line-height:1.5;word-break:break-all}
.approach-sub{margin:4px 0 0;font-size:16px}
.approach-records{display:grid;gap:0;margin:0;padding:0;list-style:none}
.approach-records li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;min-height:44px;border-bottom:1px solid var(--aa-line);font-size:15px}
.approach-records li:last-child{border-bottom:0}
.approach-record-time,.approach-record-distance{color:var(--aa-muted);font-variant-numeric:tabular-nums}
@media (max-width:420px){.approach-stage{flex-direction:column;align-items:stretch}.approach-stage-right{justify-items:stretch}}
.approach-none{margin:0;padding:12px 14px;border:1px dashed var(--aa-line);border-radius:12px;color:var(--aa-muted);font-size:15px}
.approach-ios-number{display:flex;gap:8px}.approach-ios-number .approach-senders{flex:1 1 auto;min-width:0}
.approach-card .approach-ios-copy{flex:0 0 auto;width:auto;min-width:64px;min-height:48px}
.approach-ios-howto{display:grid;gap:10px}.approach-ios-howto summary{min-height:44px;display:flex;align-items:center;font-size:15px;font-weight:650;cursor:pointer}
.approach-card .approach-ios-open{display:flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none}
.approach-ios-howto summary::-webkit-details-marker{display:none}.approach-ios-howto summary::after{content:"⌄";margin-left:8px;color:var(--aa-muted)}.approach-ios-howto[open] summary::after{content:"⌃"}