/* Carecall v21 — one stylesheet, one scale.
   Order: tokens → base → controls → shell → sign-in → first setup → pages → dialogs → small screens.
   Rules are written once per component; narrow-screen changes live in the final section only. */

@font-face{font-family:'Pretendard Variable';font-weight:45 920;font-style:normal;font-display:swap;src:url('/fonts/PretendardVariable.woff2') format('woff2')}

:root{
  --ink:#0f1e3f;
  --ink-2:#34425e;
  --muted:#5a6880;
  --line:#e3e8f1;
  --line-strong:#c9d2e3;
  --field:#7f8ba1;
  --placeholder:#677489;
  --canvas:#f4f6fb;
  --surface:#fff;
  --tint:#eef3ff;
  --tint-strong:#dfe8ff;
  --blue:#2150d8;
  --blue-hover:#1b45c2;
  --blue-ink:#1a3fa8;
  --navy:#0c2475;
  --brand:linear-gradient(118deg,#0c2475 0%,#1841c8 60%,#3558d6 100%);
  --on-brand:#e3eaff;
  --segment:#e7ecf5;
  --neutral:#edf0f5;
  --toast:#14244a;
  --night:#0b0d12;
  --orange:#a84b00;
  --orange-bg:#fff3e6;
  --red:#b3261e;
  --red-bg:#fdf0ef;
  --green:#0a6b4f;
  --green-bg:#e8f5f0;
  --r-s:8px;
  --r-m:12px;
  --r-l:16px;
  --r-xl:20px;
  --hairline:0 0 0 1px var(--line);
  --lift:0 1px 2px rgba(15,30,63,.05),0 6px 20px rgba(15,30,63,.06);
  --focus:0 0 0 1px var(--blue),0 0 0 4px rgba(33,80,216,.28);
  --focus-ring:3px solid var(--blue);
  --red-hover:#981f18;
  --red-bg-hover:#fae1df;
  --blue-soft:#a9bdf3;
  --gutter:20px;
  --nav-height:60px;
  font-family:'Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-synthesis:none;
  color-scheme:light;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--ink);
  background:var(--canvas);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-size:15px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,p,dl,dd,figure{margin:0}
h1{font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:17px;line-height:1.4;font-weight:650;letter-spacing:-.01em}
h3{font-size:15px;line-height:1.4;font-weight:650}
p{text-wrap:pretty}
small{font-size:13px}
a{color:var(--blue-ink);text-underline-offset:3px}
img,video{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea,summary,label{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.sidebar :focus-visible,.next-call :focus-visible,.auth-story :focus-visible{outline-color:#fff}
[tabindex="-1"]:focus{outline:0;box-shadow:none}
time,.clock-value,.time-example{font-variant-numeric:tabular-nums}
.clock-value,.time-example,.date-value{white-space:nowrap}
.visually-hidden,.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-80px;z-index:100;padding:10px 14px;border-radius:var(--r-s);background:var(--surface);box-shadow:var(--lift)}
.skip:focus{top:8px}

/* ---------- controls ---------- */
button,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:48px;padding:0 18px;max-width:100%;
  border:0;border-radius:var(--r-m);
  background:var(--blue);color:#fff;
  font-size:15px;font-weight:650;line-height:1.3;text-align:center;text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,transform .12s ease,box-shadow .15s ease;
}
button:hover,.button:hover{background:var(--blue-hover)}
button:active,.button:active{transform:scale(.98)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none;pointer-events:none}
button.secondary,.button.secondary{min-height:44px;background:var(--tint);color:var(--blue-ink)}
button.secondary:hover,.button.secondary:hover{background:var(--tint-strong)}
button.secondary.danger{background:var(--red-bg);color:var(--red)}
button.secondary.danger:hover{background:var(--red-bg-hover)}
button.danger:not(.secondary):not(.text-button){background:var(--red)}
button.danger:not(.secondary):not(.text-button):hover{background:var(--red-hover)}
.text-button{min-height:44px;padding:0 2px;background:none;color:var(--blue-ink);font-size:14px;font-weight:600}
.text-button:hover{background:none;text-decoration:underline;text-underline-offset:3px}
.text-button.danger{color:var(--red)}
.icon-button{width:44px;min-height:44px;padding:0;background:none;color:var(--ink-2);font-size:22px}
.icon-button:hover{background:var(--tint)}
.button-row{display:flex;flex-wrap:wrap;gap:8px}
.button-row:empty{display:none}

form{min-width:0}
label{display:block;margin:0 0 20px;color:var(--ink-2);font-size:14px;font-weight:600;line-height:1.5}
label>small,.check small{display:block;margin-top:6px;color:var(--muted);font-size:13px;font-weight:400;line-height:1.5}
input:not([type=checkbox]):not([type=radio]),select,textarea{
  display:block;width:100%;min-height:48px;margin-top:8px;padding:0 14px;
  border:1px solid var(--field);border-radius:var(--r-m);
  background:var(--surface);color:var(--ink);
  font-size:16px;font-weight:500;line-height:1.4;
  transition:border-color .15s ease,box-shadow .15s ease;
}
textarea{padding:12px 14px;min-height:140px;font-size:13px;line-height:1.5}
input::placeholder{color:var(--placeholder);font-weight:400}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:var(--focus)}
input[aria-invalid=true]{border-color:var(--red)}
input[aria-invalid=true]:focus{box-shadow:0 0 0 3px rgba(179,38,30,.2)}
select{appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2334425e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;text-overflow:ellipsis}
input[type=checkbox],input[type=radio]{width:22px;height:22px;margin:0;flex:none;accent-color:var(--blue)}
fieldset{min-width:0;margin:0 0 24px;padding:0;border:0}
legend{padding:0;margin-bottom:10px;color:var(--ink);font-size:14px;font-weight:650}
legend small{margin-left:6px;color:var(--muted);font-size:12px;font-weight:400}

.check{display:flex;align-items:flex-start;gap:12px;margin:0;padding:11px 0;color:var(--ink);font-size:15px;font-weight:500;line-height:1.5;cursor:pointer}
.check>input{margin-top:1px}
.check>span{min-width:0}
.check-all{align-items:center;margin-bottom:6px;padding:14px 16px;border-radius:var(--r-m);background:var(--surface);box-shadow:0 0 0 1px var(--field);font-size:16px;font-weight:650;transition:background-color .15s ease,box-shadow .15s ease}
.check-all:has(input:checked){background:var(--tint);box-shadow:0 0 0 2px var(--blue)}
.check-all small{margin-top:2px}
.consent-list{margin-bottom:8px}
.consent-list>.check:not(.check-all){padding-left:16px;padding-right:16px}

details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
.simple-details{border-top:1px solid var(--line)}
.simple-details>summary,.home-stats>summary,.history-card summary,dialog summary,.consent-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;
  color:var(--blue-ink);font-size:14px;font-weight:600;
}
.simple-details>summary::after,.home-stats>summary::after,.history-card summary::after,dialog summary::after,.consent-item summary::after{
  content:'';flex:none;width:8px;height:8px;margin:0 4px 3px 0;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);transition:transform .15s ease;
}
details[open]>summary::after{transform:rotate(-135deg);margin-bottom:-3px}
.simple-details[open]{padding-bottom:16px}
.simple-details>p{color:var(--ink-2);font-size:14px}
.simple-details>p+p{margin-top:6px}

.notice{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-m);background:var(--tint);color:var(--ink-2);font-size:14px;line-height:1.55}
.notice strong{display:block;color:var(--ink);font-weight:650}
.notice p{margin-top:4px}
.notice .text-button{min-height:0;vertical-align:baseline}
.notice button.secondary{background:var(--surface)}
.notice button.secondary:hover{background:#fff;box-shadow:var(--hairline)}
.hint{color:var(--muted);font-size:13px;line-height:1.55}
.hint .text-button{min-height:0;font-size:13px;vertical-align:baseline}
.error{margin:12px 0 0;color:var(--red);font-size:14px;font-weight:600}
.error:empty,.auth-error:empty{display:none}
.status{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:6px;background:var(--tint);color:var(--blue-ink);font-size:12px;font-weight:650;line-height:1.3;white-space:nowrap}
.status.warn{background:var(--orange-bg);color:var(--orange)}
.status.accent{background:var(--blue);color:#fff}
.eyebrow{margin-bottom:4px;color:var(--muted);font-size:13px;font-weight:600}

.card{margin:0 0 16px;padding:20px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline)}
.card>h2{margin-bottom:12px}
.card>p+p{margin-top:8px}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.card-heading h2{margin:0}
.narrow{max-width:560px}
.day-picker{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.day-picker label{position:relative;margin:0}
.day-picker input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.day-picker span{display:grid;place-items:center;height:44px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--field);color:var(--muted);font-size:14px;font-weight:600;transition:background-color .15s ease,color .15s ease}
.day-picker input:checked+span{background:var(--blue);box-shadow:none;color:#fff}
.day-picker input:focus-visible+span{outline:var(--focus-ring);outline-offset:2px}

.table-wrap{overflow-x:auto;border-radius:var(--r-m);box-shadow:var(--hairline)}
table{width:100%;border-collapse:collapse;font-size:13px}
caption{padding:10px 12px;color:var(--muted);font-size:12px;text-align:left}
th,td{padding:11px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
thead th{border-top:0;background:var(--canvas);color:var(--ink-2);font-weight:650;white-space:nowrap}
tbody th{color:var(--ink-2);font-weight:600;white-space:nowrap}

/* ---------- shell ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;z-index:15;display:flex;flex-direction:column;width:220px;padding:28px 16px;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(170deg,#0f2356,#102f85 64%,#1f47c4);color:#fff}
.brand{display:block;padding:0 8px}
.brand img{display:block;width:148px;height:auto}
.sidebar>p{margin:14px 8px 28px;color:rgba(255,255,255,.66);font-size:12px}
.sidebar nav{display:grid;gap:4px}
.sidebar nav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:10px;color:rgba(255,255,255,.76);font-size:15px;font-weight:600;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar nav a[aria-current]{background:rgba(255,255,255,.16);color:#fff}
.sidebar svg,.mobile-nav svg,.med-symbol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.workspace{--main-w:840px;margin-left:220px;min-height:100dvh;display:flex;flex-direction:column}
.workspace:has(main[data-view=operator]){--main-w:1000px}
header{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px max(40px,calc((100% - var(--main-w))/2 + 40px));background:var(--surface);border-bottom:1px solid var(--line)}
.flow-brand{display:none}
.flow-brand{align-items:center;min-height:44px}
.flow-brand img{display:block;height:30px;width:auto}
.recipient-control{min-width:0}
.recipient-input-row{display:flex;align-items:center;gap:8px}
.recipient-control select{width:auto;min-width:112px;max-width:240px;min-height:44px;margin:0;border-color:transparent;background-color:var(--canvas);font-size:15px;font-weight:650}
.add-recipient{min-height:44px;padding:0 10px;background:none;color:var(--blue-ink);font-size:14px;white-space:nowrap}
.add-recipient:hover{background:var(--tint)}
.demo-handle{min-height:44px;margin-left:auto;padding:0 10px;background:none;color:var(--muted);font-size:13px;font-weight:600}
.demo-handle:hover{background:var(--canvas);color:var(--ink-2)}
/* Operator screen entry (v0.32): shown only to signed-in staff (the server session's staffRole). */
.ops-entry{display:inline-flex;align-items:center;text-decoration:none}
.header-ops{flex:none;min-height:44px;margin-left:auto;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;color:var(--ink-2);font-size:13px;font-weight:650;white-space:nowrap}
.header-ops:hover{background:var(--canvas);color:var(--ink)}
[data-staff-entry][data-header]{margin-left:auto;flex:none}
[data-staff-entry][data-header]:empty{display:none}
.demo-handle:not([hidden])~[data-staff-entry][data-header]{margin-left:0}
/* every customer page shares one column width so content does not jump between tabs; operator tables get more room */
main{width:100%;max-width:var(--main-w);margin-inline:auto;padding:32px 40px 48px;flex:1}
main:focus{outline:0}
main a[data-nav]:not(.button):not(.settings-entry){display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;text-decoration:none}
main a[data-nav]:not(.button):not(.settings-entry):hover{text-decoration:underline}
footer{width:100%;max-width:var(--main-w);margin-inline:auto;padding:0 40px 32px;color:var(--muted);font-size:12px;line-height:1.7}
.mobile-nav{display:none}
.page-heading{margin-bottom:20px}
.page-heading p{margin-top:6px;max-width:60ch;color:var(--muted);font-size:14px}
.back-link{margin-bottom:4px}
.back-link::before{content:'';width:7px;height:7px;margin:0 8px 0 3px;border:solid currentColor;border-width:0 0 1.8px 1.8px;transform:rotate(45deg)}
.operation-error{margin-bottom:20px;padding:16px;border-radius:var(--r-m);background:var(--red-bg);color:var(--ink)}
.operation-error strong{color:var(--red)}
.operation-error p{margin-top:4px;font-size:14px}
.operation-error .button-row{margin-top:12px}
.recovery{max-width:520px;margin:72px auto;padding:0 var(--gutter)}
.recovery p{margin:10px 0;color:var(--ink-2)}
.recovery .button-row{margin:20px 0}
#toast{position:fixed;left:50%;bottom:28px;z-index:90;width:max-content;max-width:calc(100% - 32px);padding:12px 16px;border-radius:var(--r-m);background:var(--toast);color:#fff;font-size:14px;line-height:1.5;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s ease,transform .2s ease}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- sign-in ---------- */
body.auth-active{padding:0;background:var(--surface)}
.auth-shell{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(440px,1fr);min-height:100dvh}
.auth-story{position:sticky;top:0;display:flex;flex-direction:column;height:100dvh;min-height:640px;padding:40px 48px;overflow:hidden;background:var(--night);color:#fff}
.auth-scene{position:absolute;inset:0}
.auth-scene img,.auth-scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.auth-scene video{opacity:0;transition:opacity .4s ease}
.auth-scene video.is-playing{opacity:1}
.auth-scene-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,.5) 0%,rgba(11,13,18,0) 26%,rgba(11,13,18,.82) 70%,var(--night) 100%)}
.auth-brand-row,.auth-story-copy{position:relative;z-index:2}
.auth-brand{display:block;width:152px}
.auth-brand img,.auth-top img{display:block;width:100%;height:auto}
.auth-intro-top,.auth-intro-cta{display:none}
.auth-motion-toggle{position:absolute;top:36px;right:32px;z-index:3;min-height:44px;padding:0 16px;border-radius:22px;background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(6px)}
.auth-motion-toggle:hover{background:rgba(255,255,255,.24)}
.auth-story-copy{margin-top:auto;max-width:460px}
.auth-story-pill{margin-bottom:14px;color:rgba(255,255,255,.8);font-size:14px;font-weight:600}
.auth-story h2{margin-bottom:16px;font-size:40px;line-height:1.28;font-weight:700;letter-spacing:-.03em}
.auth-story h2 em{font-style:normal;color:#a9c0ff}
.auth-story-copy>p{color:rgba(255,255,255,.84);font-size:16px}
.auth-story-copy>.auth-story-notes{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:14px}
.auth-story-copy>.auth-story-footnote{margin-top:14px;color:rgba(255,255,255,.56);font-size:12px}
.auth-main{display:flex;flex-direction:column;min-height:100dvh;padding:32px 40px;background:var(--surface)}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.auth-top img{width:132px}
.auth-content{width:100%;max-width:400px;margin:auto;padding:32px 0}
.auth-content h1{margin-bottom:8px;font-size:28px}
.auth-lead{margin-bottom:28px;color:var(--ink-2);font-size:15px}
.auth-lead strong{color:var(--ink);font-variant-numeric:tabular-nums}
.auth-phone-echo{display:block;margin-bottom:4px;color:var(--ink);font-size:17px;font-weight:650;font-variant-numeric:tabular-nums}
#auth-form label:not(.check){margin-bottom:0}
#auth-form input:not([type=checkbox]){min-height:54px;font-size:18px;font-variant-numeric:tabular-nums}
.auth-input-wrap{position:relative}
.auth-input-wrap input{padding-right:44px}
.auth-input-check{position:absolute;right:16px;top:50%;margin-top:4px;transform:translateY(-50%);color:var(--green);font-size:18px;font-weight:700}
.auth-help{margin-top:8px;color:var(--muted);font-size:13px}
.auth-help.is-error{color:var(--red);font-weight:600}
.auth-help:empty{display:none}
.auth-primary{width:100%;min-height:54px;margin-top:12px;border-radius:14px;font-size:16px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:28px 0 14px;color:var(--muted);font-size:12px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-socials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.auth-socials button{flex-direction:column;gap:8px;min-height:80px;padding:8px 0;background:none;color:var(--ink-2);font-size:12px;font-weight:600}
.auth-socials button:hover{background:var(--canvas)}
.auth-socials button[aria-disabled="true"]{cursor:default}
.auth-socials button[aria-disabled="true"]:hover{background:none}
.auth-socials button[aria-disabled="true"] .social-symbol{opacity:.5;filter:grayscale(1)}
.auth-social-note{min-height:1.5em;margin-top:10px;text-align:center;line-height:1.5}
.auth-social-note:empty{display:block}
.auth-social-note.is-attention{color:var(--ink-2);font-weight:600}
.social-symbol{width:44px;height:44px;border-radius:12px;object-fit:contain}
.social-symbol.google{padding:9px;border-radius:50%;box-shadow:0 0 0 1px var(--line-strong)}
#auth-form input.otp-input{text-align:center;letter-spacing:.32em;font-size:22px;font-weight:650}
.auth-test-note{margin-top:14px;padding:10px 12px;border-radius:var(--r-s);background:var(--canvas);color:var(--ink-2);font-size:13px;line-height:1.5}
.auth-otp-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.consent-item{padding:0 16px}
.consent-item details{margin:-8px 0 2px 34px}
.consent-item summary{justify-content:flex-start;gap:8px;min-height:44px;color:var(--muted);font-size:13px}
.consent-item details p{padding:4px 0 10px;color:var(--ink-2);font-size:13px}
.consent-detail{margin:-6px 0 4px 34px;color:var(--ink-2);font-size:13px;line-height:1.55}
.consent-detail ul{margin:0;padding:0;list-style:none}
.consent-detail li{position:relative;padding-left:11px}
.consent-detail li+li{margin-top:2px}
.consent-detail li::before{content:'';position:absolute;left:1px;top:.72em;width:4px;height:4px;border-radius:50%;background:var(--muted)}
.consent-detail a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.auth-back{margin:0 0 12px -2px;color:var(--muted)}
.auth-back::before{content:'';width:7px;height:7px;margin-right:4px;border:solid currentColor;border-width:0 0 1.8px 1.8px;transform:rotate(45deg)}
.auth-error{margin:12px 0 0;color:var(--red);font-size:14px;font-weight:600}
.auth-footer{margin-top:auto;padding-top:16px;color:var(--muted);font-size:12px;text-align:center}
.auth-legal{display:block}
.auth-legal a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- first setup and adding a person ---------- */
body.flow-page .sidebar,body.flow-page .mobile-nav,body.flow-page .recipient-control,body.flow-page footer{display:none}
body.flow-page .workspace{margin-left:0}
body.flow-page .flow-brand{display:flex}
body.flow-page header{padding-inline:max(var(--gutter),calc(50% - 240px))}
body.flow-page main{max-width:520px;margin-inline:auto;padding:28px var(--gutter) 24px}
.registration-top{display:flex;align-items:center;gap:12px}
.registration-progress{display:flex;flex:1;gap:6px}
.registration-progress span{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background-color .2s ease}
.registration-progress span.reached{background:var(--blue)}
.registration-count{color:var(--muted);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.registration-card h1{margin:28px 0 24px}
.registration-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.registration-options label{position:relative;display:block;margin:0;cursor:pointer}
.registration-options input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.registration-options span{display:block;height:100%;padding:16px;border-radius:var(--r-m);background:var(--surface);box-shadow:0 0 0 1px var(--field);transition:background-color .15s ease,box-shadow .15s ease}
.registration-options strong{display:block;color:var(--ink);font-size:17px;font-weight:650}
.registration-options small{display:block;margin-top:4px;color:var(--muted);font-size:13px;font-weight:400}
.registration-options input:checked+span{background:var(--tint);box-shadow:0 0 0 2px var(--blue)}
.registration-options input:checked+span strong{color:var(--blue-ink)}
.registration-options input:focus-visible+span{outline:var(--focus-ring);outline-offset:2px}
.registration-options input:disabled+span{opacity:.5}
.registration-card fieldset+.hint{margin:-12px 0 20px}
.preset-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.preset-options button{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:64px;padding:10px 14px;background:var(--surface);box-shadow:0 0 0 1px var(--field);color:var(--ink);text-align:left}
.preset-options button:hover{background:var(--canvas)}
.preset-options strong{font-size:16px;font-weight:650}
.preset-options small{color:var(--muted);font-size:13px;font-weight:400;line-height:1.45}
.preset-options button.selected{background:var(--tint);box-shadow:0 0 0 2px var(--blue)}
.preset-options button.selected strong{color:var(--blue-ink)}
.preset-options+.hint{margin-top:10px}
.registration-times,#med-time-rows{display:grid;gap:10px}
.registration-time-row,.med-time-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px}
.registration-time-row label,.med-time-row label{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;margin:0;color:var(--muted);font-size:13px}
.registration-time-row input[type=time],.med-time-row input[type=time]{margin-top:0;font-variant-numeric:tabular-nums}
.registration-time-row button,.med-time-row button{min-height:48px;padding:0 10px;background:none;color:var(--muted);font-size:14px}
.registration-time-row button:hover,.med-time-row button:hover{background:none;color:var(--red)}
.registration-time-row button:disabled,.med-time-row button:disabled{display:none}
.add-time,.add-time-button{margin-top:4px}
button.add-time-button{background:none;color:var(--blue-ink);padding:0 2px;min-height:44px;font-size:14px}
button.add-time-button:hover{background:none;text-decoration:underline;text-underline-offset:3px}
.registration-time-preview{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:8px;padding:12px 14px;border-radius:var(--r-m);background:var(--tint)}
.registration-time-preview span{color:var(--ink-2);font-size:13px}
.registration-time-preview strong{color:var(--blue-ink);font-size:16px;font-weight:650}
.registration-time-preview strong span{color:inherit;font-size:inherit}
.registration-card .check[data-registration-night-agreement]{margin-bottom:16px;padding:14px 16px;border-radius:var(--r-m);background:var(--orange-bg)}
.registration-summary{display:grid;grid-template-columns:88px minmax(0,1fr);margin-bottom:20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--hairline)}
.registration-summary dt,.registration-summary dd{padding:14px 16px;border-top:1px solid var(--line)}
.registration-summary dt:first-of-type,.registration-summary dd:first-of-type{border-top:0}
.registration-summary dt{padding-right:0;color:var(--muted);font-size:14px}
.registration-summary dd{font-size:15px;font-weight:650}
.registration-summary dd span{margin-left:4px;color:var(--muted);font-size:13px;font-weight:400}
.registration-summary dd b{font-weight:650}
.registration-summary dd .summary-phone{display:block;margin:2px 0 0;white-space:nowrap;font-variant-numeric:tabular-nums}
.registration-card .plan-warning{margin:-8px 0 16px}
.registration-actions{display:flex;gap:8px;margin-top:24px}
.registration-actions .secondary{flex:0 0 88px;min-height:52px}
#registration-next{flex:1;min-height:52px;border-radius:14px;font-size:16px}
.registration-exit{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.registration-exit .text-button{color:var(--muted)}
.registration-note{margin-top:4px}

/* ---------- today ---------- */
.today-page>.page-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;margin-bottom:16px}
.today-page>.page-heading p{margin:0;font-size:13px;font-variant-numeric:tabular-nums}
.today-overview{display:grid;gap:12px;margin-bottom:16px}
.next-call{padding:22px 24px;border-radius:var(--r-xl);background:radial-gradient(120% 150% at 100% 0%,#3558d6 0%,rgba(53,88,214,0) 58%),var(--brand);color:#fff}
.next-label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;color:var(--on-brand);font-size:13px;font-weight:600}
.next-call h2{margin:6px 0 14px;font-size:32px;line-height:1.2;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.next-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;color:var(--on-brand);font-size:14px}
.next-meta b{margin-right:8px;color:#fff;font-weight:650}
main .next-call a[data-nav]:not(.button){color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.6)}
.next-call .status{background:#fff;color:var(--blue-ink)}
.next-call .status.warn{color:var(--orange)}
.next-call>p{margin-top:12px;font-size:14px}
.next-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.next-actions:empty{display:none}
.next-call button.secondary{margin-top:12px;background:rgba(255,255,255,.16);color:#fff}
.next-actions button.secondary{margin-top:0}
.next-call button.secondary:hover{background:rgba(255,255,255,.26)}
.home-stats{border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline)}
.home-stats>summary{padding:0 18px;color:var(--ink-2)}
.home-activity{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:2px 18px 14px}
.home-activity div{min-width:0}
.home-activity div+div{padding-left:14px;border-left:1px solid var(--line)}
.home-activity span{display:block;color:var(--muted);font-size:12px}
.home-activity strong{font-size:22px;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums}
.home-activity strong small{margin-left:2px;color:var(--muted);font-size:12px;font-weight:500}
.home-stats>.hint{padding:0 18px 14px;font-size:12px}
.registration-pending button{margin-top:10px}
.today-agenda{padding:0;overflow:hidden}
.agenda-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px 6px}
.today-call{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:10px 16px;align-items:start;padding:16px 20px;border-top:1px solid var(--line)}
.call-time strong{display:block;padding-top:1px;color:var(--blue-ink);font-size:15px;font-weight:700;white-space:nowrap}
.call-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.call-meta h3{font-size:16px}
.call-checks{display:grid;gap:8px;margin-top:10px}
.call-check{display:flex;align-items:center;justify-content:space-between;gap:12px}
.call-check>div{min-width:0}
.call-check strong{display:block;font-size:14px;font-weight:600}
.check-state{color:var(--muted);font-size:13px}
.check-state.attention{color:var(--orange);font-weight:600}
.call-check.solo>div{display:none}
.report-button{flex:none;min-height:44px;padding:0 16px;font-size:14px}
.call-content>.hint{margin-top:10px}
.call-content>.hint a{margin-right:10px}
.call-tools{display:flex;gap:4px 16px;margin-top:-10px}
.call-tools:empty{display:none}
.call-tools button.secondary,.history-card .button-row button.secondary{min-height:44px;padding:0 2px;background:none;color:var(--muted);font-size:14px;font-weight:600}
.call-tools button.secondary:hover,.history-card .button-row button.secondary:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.direct-record-usage{grid-column:1/-1;padding:10px 12px;border-radius:10px;background:var(--green-bg);color:var(--green);font-size:13px;font-weight:600}
.direct-record-usage small{font-weight:400}
.agenda-empty{padding:28px 20px;border-top:1px solid var(--line);color:var(--muted)}
.agenda-note{padding:12px 20px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.welcome{padding:28px 24px}
.welcome p{max-width:52ch;margin:8px 0 20px;color:var(--ink-2)}

/* ---------- alarms and medicines ---------- */
.alarm-section-nav,.shelf-nav{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-m);background:var(--segment)}
.alarm-section-nav .button,.shelf-button{min-height:44px;padding:0 18px;border-radius:9px;background:var(--surface);box-shadow:0 1px 2px rgba(15,30,63,.1);color:var(--ink);font-size:14px}
.alarm-section-nav .button.secondary,.shelf-button[aria-pressed=false]{background:none;box-shadow:none;color:var(--muted)}
.alarm-section-nav .button.secondary:hover,.shelf-button[aria-pressed=false]:hover{background:rgba(255,255,255,.5);color:var(--ink)}
.shelf-button span{margin-left:2px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.medicine-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin:16px 0 12px}
.medicine-toolbar p{color:var(--ink-2);font-size:14px;font-weight:600}
.medicine-toolbar p span{margin-left:6px;color:var(--muted);font-size:12px;font-weight:400}
.medicine-toolbar button{min-height:44px;font-size:14px}
.medicine-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-bottom:16px}
.medicine-shelf>.card{margin:0}
.med-card{display:flex;flex-direction:column;min-width:0;padding:18px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline)}
.med-card-top{display:flex;align-items:center;gap:12px}
.med-card-top>div:nth-child(2){min-width:0;flex:1}
.med-symbol{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--tint);color:var(--blue)}
.med-symbol svg{width:20px;height:20px}
.med-card h3{font-size:16px}
.med-card-top p{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.med-state{flex:none;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:650}
.med-state.active{background:var(--tint);color:var(--blue-ink)}
.med-state.paused{background:var(--neutral);color:var(--muted)}
.next-medication{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:14px 0 10px;padding:12px 0;border-block:1px solid var(--line)}
.next-medication span{color:var(--muted);font-size:13px}
.next-medication strong{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.med-card>p{color:var(--muted);font-size:13px}
.med-card:not(.alarm-card) .med-actions{margin-top:14px;margin-bottom:-10px;border-top:1px solid var(--line)}
.alarm-test-action{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;margin-top:14px}
.alarm-test-action button{min-height:44px;padding:0 10px;background:var(--tint);color:var(--blue-ink);font-size:14px;font-weight:650}
.alarm-test-action button:hover{background:var(--tint-strong);text-decoration:none}
.med-actions{display:flex;align-items:center;gap:4px 18px;margin-top:auto;padding-top:10px}
.alarm-card .med-actions{margin-top:12px;margin-bottom:-10px;border-top:1px solid var(--line)}
.med-actions button{min-height:44px;padding:0 2px;background:none;color:var(--ink-2);font-size:14px;font-weight:600}
.med-actions button:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.med-actions button.danger{margin-left:auto;color:var(--red)}
.shelf-empty{grid-column:1/-1;padding:28px 24px}
.shelf-empty p{color:var(--muted)}
.page-note{color:var(--muted);font-size:13px}
.editor{scroll-margin-top:16px}
.editor form>p{margin-bottom:14px;color:var(--ink-2);font-size:14px}
.editor fieldset>p{margin-bottom:8px;color:var(--muted);font-size:13px}
.alarm-switch{margin-bottom:16px;padding:12px 16px;border-radius:var(--r-m);background:var(--canvas)}
.alarm-switch strong{font-weight:650}
.repeat-options{display:flex;gap:8px;margin-bottom:10px}
.repeat-options label{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 14px;border-radius:var(--r-m);background:var(--surface);box-shadow:0 0 0 1px var(--field);color:var(--ink);font-weight:500;cursor:pointer}
.repeat-options label:has(input:checked){background:var(--tint);box-shadow:0 0 0 2px var(--blue)}
.night-agreement{margin-bottom:14px;padding:14px 16px;border-radius:var(--r-m);background:var(--orange-bg)}
.editor .button-row{margin-top:16px}
.editor .button-row button{min-width:104px}

/* ---------- records ---------- */
.records-controls{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:end;gap:12px 16px;padding:0;background:none;box-shadow:none}
.records-controls label{margin:0}
.records-controls .button-row button,.record-filters button{min-height:44px;padding:0 14px;border-radius:10px;background:var(--surface);box-shadow:var(--hairline);color:var(--ink-2);font-size:14px;font-weight:600}
.records-controls .button-row button:hover,.record-filters button:hover{background:var(--tint)}
.record-filters{grid-column:1/-1;display:flex;gap:6px;margin:-4px calc(var(--gutter)*-1);padding:6px var(--gutter);overflow-x:auto;scrollbar-width:none}
.record-filters::-webkit-scrollbar{display:none}
.record-filters button{flex:none}
.record-filters button[aria-pressed=true]{background:var(--blue);box-shadow:none;color:#fff}
.records-controls .button-row button[aria-pressed=true]{background:var(--tint);box-shadow:0 0 0 2px var(--blue);color:var(--blue-ink)}
.record-date-group{margin:24px 0}
.record-date-group>h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:15px;font-variant-numeric:tabular-nums}
.record-date-group>h2 small{color:var(--muted);font-size:12px;font-weight:400}
.history-card{margin-bottom:10px;padding:16px 18px 6px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline)}
.history-row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.history-row-top time{font-size:17px;line-height:1.3;font-weight:700}
.history-row-top time small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.history-card h3{margin-top:10px}
.record-usage{margin-top:2px;color:var(--ink-2);font-size:13px;font-variant-numeric:tabular-nums}
.record-usage span{color:var(--muted)}
.history-card>.hint{margin-top:6px}
.history-card .button-row{gap:0 16px;margin-top:4px}
.history-card details{margin-top:8px;border-top:1px solid var(--line)}
.history-card details p{padding-bottom:8px;color:var(--ink-2);font-size:13px}
.history-card details small{display:block;color:var(--muted);font-size:12px}
.records-footnote{margin-top:20px}

/* ---------- my info, plans, pillbox ---------- */
.plan-current{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.plan-current b{color:var(--ink);font-size:20px;font-weight:700}
.plan-current span{color:var(--ink-2);font-size:14px;font-variant-numeric:tabular-nums}
.plan-warning{margin-top:10px;padding:10px 12px;border-radius:var(--r-s);background:var(--surface);border-left:3px solid var(--blue);box-shadow:var(--hairline);color:var(--ink-2);font-size:13px;font-weight:600;line-height:1.5}
.product-management>.status{margin-top:12px}
.plan-warning-row{margin:12px 0 0}
.plan-warning p{margin:0}.plan-warning .button-row{margin-top:10px;gap:8px;flex-wrap:wrap}.plan-warning .button-row button{min-height:44px}
main .plan-warning a[data-nav]:not(.button){display:inline;min-height:0;color:inherit;text-decoration:underline}
.settings-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:16px 20px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline);color:var(--ink);text-decoration:none;transition:background-color .15s ease}
.settings-entry:hover{background:#fafbfe}
.settings-entry strong{display:block;font-size:16px;font-weight:650}
.settings-entry small{display:block;color:var(--muted)}
.entry-chevron{flex:none;width:8px;height:8px;margin-right:4px;border:solid var(--muted);border-width:1.8px 1.8px 0 0;transform:rotate(45deg)}
.card dl{display:grid;grid-template-columns:minmax(0,1fr) auto;margin-bottom:12px}
.card dl:last-child{margin-bottom:0}
.card dl:last-child dt:last-of-type,.card dl:last-child dd:last-of-type{padding-bottom:0}
.card dt,.card dd{padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.card dt:first-of-type,.card dd:first-of-type{border-top:0;padding-top:0}
.card dt{color:var(--muted)}
.card dd{font-weight:600;text-align:right}
#contact-form .check{font-size:14px}
#contact-form .hint{margin:4px 0 8px}
#contact-form .button-row{margin-top:12px}
#contact-form .button-row button{min-width:104px}
#contact-form input:disabled+span{color:var(--muted)}
.service-card .card-heading{margin-bottom:14px}
.service-card .button-row button{font-size:14px}
.account-session{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin-top:8px;color:var(--muted);font-size:13px}
.account-session span{margin-right:auto}
/* plan page: advice → cards → calls-per-day chart → one comparison table */
.plan-advice{margin-bottom:16px;padding:14px 16px;border-radius:var(--r-m);background:var(--tint);color:var(--ink-2);font-size:14px}
.plan-advice b{color:var(--ink);font-weight:650}
.plan-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.plan-card{display:flex;flex-direction:column;min-width:0;padding:18px 16px 16px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline)}
.plan-card.selected{box-shadow:0 0 0 2px var(--blue)}
.plan-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.plan-card-top h3{font-size:16px}
.plan-price{display:flex;align-items:baseline;gap:3px;margin-top:10px;color:var(--ink);font-variant-numeric:tabular-nums}
.plan-price strong{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.plan-price small{color:var(--muted);font-size:13px}
.plan-calls{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 16px;color:var(--ink-2);font-size:14px;font-weight:600}
.plan-meter{display:inline-flex;align-items:center;gap:3px}
.plan-meter i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.plan-meter i.on{background:var(--blue)}
.plan-meter em{margin-left:1px;color:var(--blue);font-size:13px;font-style:normal;font-weight:700;line-height:1}
.plan-card>button{width:100%;min-height:44px;margin-top:auto;padding-inline:8px;font-size:14px}
.plan-chart,.plan-table-block{margin-top:16px;padding:20px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline)}
.plan-chart figcaption,.plan-table-block h2{margin-bottom:14px;color:var(--ink);font-size:15px;font-weight:650}
.plan-bars{display:grid;gap:10px}
.plan-bar{display:grid;grid-template-columns:48px minmax(0,1fr) 52px;align-items:center;gap:12px;color:var(--ink-2);font-size:14px}
.plan-bar span{font-weight:600}
.plan-bar b{font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.plan-bar-track{height:14px;border-radius:999px;background:var(--canvas)}
.plan-bar-track i{display:block;height:100%;border-radius:999px;background:var(--blue-soft)}
.plan-bar.selected{color:var(--ink)}
.plan-bar.selected .plan-bar-track i{background:var(--blue)}
.calls-1{width:12%}.calls-2{width:24%}.calls-3{width:36%}.calls-4{width:48%}.calls-5{width:60%}
.plan-bar-track i.calls-max{width:100%;background:linear-gradient(90deg,var(--blue-soft) 0%,var(--blue-soft) 60%,rgba(169,189,243,.25) 100%)}
.plan-bar.selected .plan-bar-track i.calls-max{background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 60%,rgba(33,80,216,.25) 100%)}
.plan-chart-mine{margin-top:12px;color:var(--muted);font-size:13px}
.plan-table-block .table-wrap{border-radius:0;box-shadow:none}
.plan-table{table-layout:fixed;font-size:14px;font-variant-numeric:tabular-nums}
.plan-col-label{width:34%}
.plan-table th,.plan-table td{padding:12px 8px;border-top:0;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.plan-table tbody tr:last-child>*{border-bottom:0}
.plan-table thead th{color:var(--ink);font-weight:650}
.plan-table tbody th{padding-left:0;color:var(--ink-2);font-weight:500;line-height:1.45;text-align:left;white-space:normal}
.plan-table td{color:var(--ink);font-weight:600;overflow-wrap:normal}
.plan-table .selected{background:var(--tint);color:var(--blue-ink)}
.plan-table sup{color:var(--muted);font-size:11px}
.plan-yes{color:var(--blue);font-size:10px}
.plan-table-block>.hint{margin-top:12px}
.plan-notes{margin:16px 0 0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.7}
/* v0.30 billing cycle: month/year switch, 1-year prices on the cards, feature list, grouped table, rules, group consult */
.plan-cycle{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px}
.cycle-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--segment)}
.cycle-switch button{min-height:44px;padding:0 16px;border-radius:999px;background:transparent;color:var(--ink-2);box-shadow:none;font-size:14px;font-weight:600}
.cycle-switch button.selected{background:var(--surface);color:var(--ink);box-shadow:var(--lift)}
.save-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--green-bg);color:var(--green);font-size:12px;font-weight:650;vertical-align:1px}
.cycle-now{color:var(--ink-2);font-size:14px}
.plan-cycle .cycle-buttons{margin:0}
.cycle-buttons{flex-wrap:wrap;margin-top:12px}
.plan-price{white-space:nowrap}
.plan-was{color:var(--muted);font-weight:500}
.plan-year{margin-top:2px;color:var(--muted);font-size:13px;line-height:1.45;font-variant-numeric:tabular-nums}
.plan-features{display:grid;gap:6px;margin:0 0 16px;padding:12px 0 0;border-top:1px solid var(--line);list-style:none;color:var(--ink-2);font-size:13px;line-height:1.45}
.plan-features li{position:relative;padding-left:16px}
.plan-features li::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--blue-soft)}
.plan-calls{margin-bottom:12px}
.plan-table-group th{padding:16px 0 6px;color:var(--ink);font-size:13px;font-weight:650;text-align:left}
.plan-table tbody+tbody .plan-table-group th{border-top:1px solid var(--line-strong)}
.plan-cell-sub{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:500}
.plan-num-whole{white-space:nowrap}
.plan-rules{margin-top:16px;padding:20px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline)}
.plan-rules h2{color:var(--ink);font-size:15px;font-weight:650}
.plan-rules .plan-notes{margin-top:10px}
.plan-rules .plan-notes b{color:var(--ink-2);font-weight:650}
.plan-group{margin-top:12px;color:var(--ink-2);font-size:14px}
.cycle-choice{display:grid;gap:8px;margin:16px 0 0;padding:0;border:0}
.cycle-choice legend{margin-bottom:8px;color:var(--ink);font-size:15px;font-weight:650}
.cycle-choice .plan-option{grid-template-columns:auto minmax(0,1fr)}
.year-end-options{display:grid;gap:12px;margin:12px 0}
.year-end-options section{display:grid;gap:8px;padding:14px;border-radius:var(--r-m);box-shadow:0 0 0 1px var(--line)}
.year-end-options h3{font-size:15px}
.year-end-options p{color:var(--ink-2);font-size:14px}
.year-end-options button{width:100%;min-height:44px}
.plan-people{margin-top:16px}
.plan-people .card-heading+p{margin:0 0 14px}
.usage-person-out{opacity:.75}
.consent-pending .button-row{flex-wrap:wrap}
.plan-total small{word-break:keep-all}
.family-waiting{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.plan-more{margin-top:16px}
.plan-more>summary{min-height:44px;display:flex;align-items:center;font-weight:650;color:var(--blue-ink);cursor:pointer}
.usage-person{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.usage-person span{color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.usage-person small{grid-column:1/-1;color:var(--muted)}
.card>.usage-person:first-of-type{border-top:0;padding-top:0}
.card>.hint{margin-top:10px}
/* compact plan picker on the last setup step */
.plan-picker{display:grid;gap:8px;padding-top:4px}
.plan-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:0;padding:12px 14px;border-radius:var(--r-m);background:var(--surface);box-shadow:0 0 0 1px var(--field);color:var(--ink);cursor:pointer}
.plan-option:has(input:checked){background:var(--tint);box-shadow:0 0 0 2px var(--blue)}
.plan-option strong{display:block;font-size:15px;font-weight:650}
.plan-option small{display:block;margin-top:0;color:var(--muted);font-size:13px;font-weight:400}
.plan-option b{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
p.plan-option-inquiry{grid-template-columns:minmax(0,1fr) auto;padding-left:48px;box-shadow:0 0 0 1px var(--line);cursor:default}
p.plan-option-inquiry b{color:var(--muted)}
.plan-picker>.hint{margin-top:4px}
.pillbox-selection{margin-bottom:16px;padding:20px;border-radius:var(--r-l);background:var(--tint)}
.pillbox-selection h2{margin:8px 0 4px}
.pillbox-selection p{color:var(--ink-2);font-size:14px}
.pillbox-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.box-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline)}
.pillbox-illustration{display:grid;place-items:center;height:92px;border-radius:10px;background:var(--canvas)}
.pillbox-slots{display:grid;gap:4px}
.pillbox-slots i{width:14px;height:18px;border-radius:4px;background:var(--surface);box-shadow:0 0 0 1px #b9c8ef}
.slots-4{grid-template-columns:repeat(4,auto)}
.slots-8{grid-template-columns:repeat(4,auto)}
.slots-14{grid-template-columns:repeat(7,auto)}
.bottle-shape{width:30px;height:46px;border-radius:9px 9px 7px 7px;background:var(--surface);box-shadow:0 0 0 1px #b9c8ef,inset 0 10px 0 var(--tint-strong)}
.box-card-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px}
.box-card-title h2{white-space:nowrap}
.box-card-title h2{font-size:15px}
.box-card p{color:var(--muted);font-size:13px}
.box-card button{width:100%;min-height:44px;margin-top:auto;font-size:14px}
.pillbox-note{margin-top:16px}

/* ---------- operator view ---------- */
.summary-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.mini-card{min-width:0;padding:16px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--hairline)}
.mini-card span{display:block;color:var(--muted);font-size:13px}
.mini-card strong{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.mini-card strong small{margin-left:2px;color:var(--muted);font-size:12px;font-weight:500}
.medicine-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.medicine-row p{color:var(--muted);font-size:13px}
.record-row{padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.record-row p{color:var(--ink-2);font-size:13px}
.record-row small{color:var(--muted);font-size:12px}
main[data-view=operator] .card>p{color:var(--ink-2);font-size:14px}

/* ---------- dialogs and the demo panel ---------- */
dialog{width:min(440px,calc(100% - 32px));max-width:100%;max-height:calc(100dvh - 32px);padding:24px;overflow:auto;border:0;border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:0 24px 80px rgba(13,30,70,.24)}
dialog::backdrop{background:rgba(9,22,56,.48)}
dialog h2{margin-bottom:10px;font-size:19px;line-height:1.4}
dialog p{margin-bottom:8px;color:var(--ink-2);font-size:14px;line-height:1.6}
/* who · what · when the action applies to, set apart from the explanation */
.dialog-subject{margin-bottom:12px;padding:10px 12px;border-radius:var(--r-s);background:var(--canvas);color:var(--ink);font-size:14px;font-weight:600;line-height:1.45;font-variant-numeric:tabular-nums}
#dialog-body{margin-bottom:0;white-space:pre-line}
dialog .button-row{flex-wrap:nowrap;margin-top:20px}
dialog .button-row button{flex:1;min-width:0;min-height:48px;padding-inline:10px}
/* v0.28: the secondary button (취소·닫기) takes only its width so the action button with an amount or a date stays on one line at 320px. */
dialog .button-row button.secondary{flex:0 0 auto;min-width:76px;padding-inline:16px}
dialog form>label{margin-bottom:14px}
dialog form>.hint{margin-bottom:0}
.ring-test-state{display:flex;align-items:center;gap:12px;margin:14px 0;padding:14px 16px;border-radius:var(--r-m);background:var(--tint);color:var(--blue-ink);font-size:14px}
.ring-test-state span{font-size:18px}
.ring-test-state.running span{animation:ring-pulse 1s ease-in-out infinite}
@keyframes ring-pulse{50%{opacity:.35}}
#date-skip-preview{padding:10px 12px;border-radius:var(--r-s);background:var(--tint);color:var(--blue-ink);font-weight:600}
#demo-panel{position:fixed;inset:0 0 0 auto;z-index:40;width:344px;height:100dvh;max-height:100dvh;margin:0;padding:0 20px 24px;border-radius:0;background:var(--surface);box-shadow:-1px 0 0 var(--line),-12px 0 40px rgba(15,30,63,.08)}
.panel-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -20px 12px;padding:12px 12px 12px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.panel-header h2{margin:0}
#demo-panel p{font-size:13px}
#demo-panel h3{margin:18px 0 8px;font-size:14px}
#demo-panel label{margin:14px 0 8px;font-size:13px}
#demo-panel .check{padding:8px 0;font-size:13px}
#demo-panel button{min-height:44px;font-size:13px}
#demo-panel>button{width:100%;margin-bottom:6px}
.panel-views,.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 8px}
#demo-panel .switch-row{display:flex;align-items:center;gap:10px;margin:14px 0 8px;padding:12px 0;border-block:1px solid var(--line)}
.switch-row strong{margin-left:auto;color:var(--muted);font-size:12px}
.scenario-choice{justify-content:flex-start;padding:8px 12px;background:var(--surface);box-shadow:var(--hairline);color:var(--ink-2);font-weight:500;text-align:left}
.scenario-choice:hover{background:var(--canvas)}
.scenario-choice.selected{background:var(--tint);box-shadow:0 0 0 2px var(--blue);color:var(--blue-ink);font-weight:650}
.panel-section{margin-top:18px;padding-top:6px;border-top:1px solid var(--line)}
.panel-section>button{width:100%;margin:0 0 6px}
.panel-section .button-row{flex-direction:column;margin:8px 0}
.panel-section>summary{min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:650}

/* ---------- wider screens with the demo panel docked ---------- */
@media(min-width:1200px){
  body.demo-open .workspace{margin-right:344px}
  body.demo-open .plan-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
  .sidebar{width:188px}
  .workspace{margin-left:188px}
  header{padding-inline:max(28px,calc((100% - var(--main-w))/2 + 28px))}
  main{padding:28px 28px 40px}
  footer{padding-inline:28px}
  .plan-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillbox-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth-story{padding:32px}
  .auth-story h2{font-size:32px}
  .auth-shell{grid-template-columns:minmax(0,.9fr) minmax(400px,1fr)}
}

@media(min-width:761px){
  .alarm-test-action{display:flex;flex-wrap:wrap}
  .alarm-test-action button{padding:0 18px}
}

/* ---------- phones ---------- */
@media(max-width:760px){
  body{padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))}
  body.flow-page,body.auth-active{padding-bottom:0}
  h1{font-size:22px}
  .sidebar{display:none}
  .workspace{margin-left:0;min-height:0}
  header{min-height:56px;padding:6px var(--gutter)}
  main{padding:20px var(--gutter) 28px}
  footer{padding:0 var(--gutter) 24px}
  .recipient-control select{max-width:44vw;font-size:16px}
  .mobile-nav{position:fixed;inset:auto 0 0;z-index:20;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:calc(var(--nav-height) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line)}
  .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:12px;font-weight:600;text-decoration:none}
  .mobile-nav a[aria-current]{color:var(--blue);font-weight:700;box-shadow:inset 0 2px 0 var(--blue)}
  .mobile-nav a[aria-current] svg{stroke-width:2}
  body.keyboard-open .mobile-nav{display:none}
  #toast{bottom:calc(var(--nav-height) + 14px + env(safe-area-inset-bottom))}
  body.flow-page #toast,body.auth-active #toast{bottom:20px}
  dialog{padding:20px}
  #demo-panel{width:100%}

  .auth-shell{display:flex;flex-direction:column}
  .auth-story{display:none;position:relative;height:172px;min-height:0;padding:16px var(--gutter)}
  .auth-shell[data-auth-step=phone] .auth-story{display:block}
  .auth-story-copy{display:none}
  .auth-brand{width:124px}
  .auth-scene img,.auth-scene video{object-position:50% 34%}
  .auth-scene-fade{background:linear-gradient(180deg,rgba(11,13,18,.62) 0%,rgba(11,13,18,.08) 55%,rgba(11,13,18,.5) 100%)}
  .auth-motion-toggle{top:12px;right:14px}
  .auth-main{flex:1;min-height:0;padding:20px var(--gutter) 16px}
  .auth-shell[data-auth-step=phone] .auth-main{position:relative;z-index:2;margin-top:-20px;border-radius:20px 20px 0 0}
  .auth-shell[data-auth-step=phone] .auth-top{display:none}
  .auth-content{max-width:none;margin:0;padding:8px 0 0}
  .auth-shell:not([data-auth-step=phone]) .auth-content{padding-top:28px}
  .auth-content h1{font-size:24px}
  .auth-lead{margin-bottom:22px}
  .auth-divider{margin-top:22px}
  body.keyboard-open .auth-story{display:none!important}
  body.keyboard-open .auth-shell[data-auth-step=phone] .auth-main{margin-top:0;border-radius:0}

  body.flow-page main{padding-top:20px;padding-bottom:0}
  .registration-card h1{margin:22px 0 20px}
  .registration-actions{position:sticky;bottom:0;z-index:5;margin:20px calc(var(--gutter)*-1) 0;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(244,246,251,0),var(--canvas) 22%)}
  .registration-note{padding-bottom:20px}

  .next-call{padding:18px 20px}
  .next-call h2{font-size:28px}
  .home-activity{padding-inline:14px}
  .home-activity div+div{padding-left:10px}
  .home-activity strong{font-size:19px}
  .home-activity span{font-size:12px}
  .home-stats>summary{padding-inline:14px}
  .home-stats>.hint{padding-inline:14px}
  .agenda-heading{padding-inline:16px}
  .today-call{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:14px 16px}
  .call-content{display:contents}
  .call-meta{align-self:center}
  .call-checks,.call-content>.hint,.call-tools{grid-column:1/-1;margin-top:0}
  .call-tools{margin-top:-6px}
  .call-check.solo .report-button{width:100%}
  .agenda-empty,.agenda-note{padding-inline:16px}

  .medicine-shelf{grid-template-columns:1fr}
  .records-controls{grid-template-columns:1fr}
  .records-controls .button-row button{flex:1}
  .card{padding:18px 16px}
  .today-agenda,.records-controls{padding:0}
  .plan-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .plan-card{padding:14px 12px 12px}
  .plan-price strong{font-size:22px}
  .plan-chart,.plan-table-block{padding:16px}
  .plan-bar{grid-template-columns:40px minmax(0,1fr) 48px;gap:8px;font-size:13px}
  .plan-table{font-size:13px}
  .plan-table th,.plan-table td{padding:11px 2px}
  .plan-table tbody th{font-size:12px}
  .plan-col-label{width:32%}
  .editor .button-row button,#contact-form .button-row button{flex:1}
  .pillbox-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-row{grid-template-columns:repeat(2,minmax(0,1fr))}

  .table-wrap:has(.call-table){overflow:visible;box-shadow:none}
  .call-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .call-table,.call-table tbody,.call-table tr,.call-table td{display:block}
  .call-table tr{margin-bottom:10px;padding:12px 14px;border-radius:var(--r-m);background:var(--canvas)}
  .call-table td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border:0}
  .call-table td::before{content:attr(data-label);flex:none;color:var(--muted)}
}
@media(max-width:350px){
  :root{--gutter:16px}
  .day-picker{gap:4px}
  .add-recipient span{display:none}
  .home-activity strong{font-size:17px}
  .auth-socials button{font-size:11px}
  .preset-options small{font-size:12px}
  .plan-chart,.plan-table-block{padding:14px}
  .plan-table{font-size:12px;letter-spacing:-.02em}
  .plan-table tbody th{font-size:11px}
  .plan-col-label{width:30%}
  #dirty-dialog .button-row button{padding-inline:4px;font-size:14px}
}
/* ---------- reminder call add-on ---------- */
.reminder-card{margin-top:16px}
.reminder-card>p{color:var(--ink-2);font-size:14px;line-height:1.6}
.reminder-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:10px}
.reminder-price b{color:var(--ink);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.reminder-price span{color:var(--muted);font-size:13px}
.reminder-card .button-row{margin-top:14px}
.reminder-card .button-row button{min-height:44px;font-size:14px}
.plan-total{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.plan-total span{color:var(--muted)}
.plan-total b{color:var(--ink);font-size:18px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.family-offer .button-row{justify-content:flex-start}
.plan-total small{grid-column:1/-1;color:var(--muted);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.product-management .plan-lines{display:grid;grid-template-columns:auto minmax(0,1fr);margin:14px 0 0}
.product-management .plan-lines dt{white-space:nowrap}
.product-management .plan-lines dd{padding-left:16px;text-align:right;white-space:normal;overflow-wrap:normal;word-break:keep-all}
.plan-current .status{align-self:center}
.product-management .plan-lines dt,.product-management .plan-lines dd{padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.product-management .plan-lines dt:first-of-type,.product-management .plan-lines dd:first-of-type{padding-top:10px;border-top:1px solid var(--line)}
.product-management .plan-lines dd{font-variant-numeric:tabular-nums}
.status.muted{background:var(--canvas);color:var(--muted)}
.reminder-check{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--hairline)}
.reminder-check small{display:block;margin-top:4px;color:var(--muted);font-size:13px;font-weight:400;line-height:1.5}
/* ---------- v0.21 detail pass ---------- */
/* PC: content column centred in the space beside the sidebar; header and footer share its edges (see --main-w above). */
@media(min-width:761px){
  /* Today rows: title with the small tools under it on the left, the main button always at the right edge of the row. */
  .today-call{grid-template-areas:"time meta meta" "time tools tools" "time checks checks";gap:0 16px;align-items:start}
  .today-call .call-time{grid-area:time;padding-top:2px}
  .today-call .call-content{display:contents}
  .today-call .call-meta{grid-area:meta;min-height:26px}
  .today-call .call-tools{grid-area:tools;margin:0 0 -4px}
  .today-call .call-checks{grid-area:checks;margin-top:6px}
  .today-call .call-content>.hint{grid-column:2/-1}
  .today-call .direct-record-usage{margin-top:12px}
  .today-call .report-button{min-width:128px}
  /* One action only: the button sits beside the title instead of on its own line. */
  .today-call:has(.call-check.solo){grid-template-areas:"time meta action" "time tools action"}
  .today-call:has(.call-check.solo) .call-checks{grid-area:action;align-self:center;margin:0}
  .today-call:has(.call-check.solo) .call-tools{margin-bottom:-10px}
  .today-call:has(.call-check.solo):not(:has(.report-button)) .call-checks{display:none}
  /* Editing an alarm: a time needs a short field, not the full card width. */
  .editor .med-time-row{max-width:420px}
  /* My info: ending the service sits apart from the everyday buttons. */
  .service-card .button-row [data-service=cancel]{margin-left:auto}
  /* Messages appear over the content column, not under the sidebar. */
  body:not(.flow-page):not(.auth-active) #toast{left:calc(50% + 110px)}
}
@media(min-width:761px) and (max-width:1100px){
  body:not(.flow-page):not(.auth-active) #toast{left:calc(50% + 94px)}
}
@media(max-width:760px){
  header{padding-inline:var(--gutter)}
  /* Today: the small tools already carry their own tap height, so the row needs less space under them. */
  .today-call:has(.call-tools:not(:empty)){padding-bottom:4px}
  /* Medicines: tabs take the full row, the add button keeps the right-hand position it has on the alarm page. */
  .medicine-toolbar .shelf-nav{display:flex;width:100%}
  .medicine-toolbar .shelf-button{flex:1;padding-inline:8px}
  .medicine-toolbar>button{margin-left:auto}
  /* Records: every filter is visible; nothing hides behind a sideways scroll. */
  .record-filters{flex-wrap:wrap;margin:0;padding:0;overflow:visible}
  /* My info: one full-width everyday button, the two stopping actions side by side below it. */
  .service-card .button-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-card .button-row button{min-height:48px;padding-inline:8px}
  .service-card .button-row [data-service=pause],.service-card .button-row [data-service=resume],.service-card .button-row [data-test-reconsent],.service-card .button-row [data-test-reconsent]~[data-service=cancel]{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .auth-scene video{display:none}
}
.recovery-exit{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px}
/* v0.26: payment card, card dialog, operator screen */
.registration-card-pay{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--hairline)}
.registration-card-pay h2{margin-bottom:6px;font-size:15px}
.registration-card-pay p{color:var(--ink-2);font-size:14px;line-height:1.55;word-break:keep-all}
.registration-card-pay p span{margin-left:4px;color:var(--muted);font-size:13px}
.registration-card-pay .secondary{margin-top:10px}
.registration-summary dd#registration-summary-payment span{display:block;margin:2px 0 0;word-break:keep-all}
.payment-card h3,.op-detail h3{margin:18px 0 6px}
.payment-list{list-style:none;margin:0 0 12px;padding:0}
.payment-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.payment-list li .text-button{min-width:44px}
.payment-list li span{color:var(--ink-2)}
.payment-list li b{font-weight:650;font-variant-numeric:tabular-nums}
#card-dialog .card-fail{display:block;margin:8px auto 0}
.op-people{display:grid;gap:10px}
.op-person{display:grid;gap:4px;padding:14px 16px;border-radius:var(--r-m);box-shadow:var(--hairline)}
.op-person.selected{box-shadow:0 0 0 2px var(--blue)}
.op-person-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.op-person-main small{color:var(--muted);font-size:13px;font-weight:500}
.op-person p{color:var(--ink-2);font-size:13px;line-height:1.5;word-break:keep-all}
.op-person>button{justify-self:start;margin-top:6px}
.op-tags{display:flex;flex-wrap:wrap;gap:6px}
.op-alert{color:var(--orange)!important;font-weight:650}
.op-todo{margin:0;padding:0;list-style:none}
.op-todo li{border-top:1px solid var(--line)}
.op-todo li:first-child{border-top:0}
.op-todo a{display:flex;align-items:center;min-height:44px;color:var(--blue-ink);font-size:14px;font-weight:600}
.card dl.op-dl{grid-template-columns:7.5em minmax(0,1fr)}
.card dl.op-dl dd{text-align:left;word-break:keep-all;overflow-wrap:anywhere}
.card dl.op-dl dd small{display:block;color:var(--muted);font-size:12px;font-weight:500}
.op-list{margin:0 0 8px;padding:0;list-style:none}
.op-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line)}
.op-list li>div{flex:1 1 220px;min-width:0}
.op-list li strong{display:block;font-size:14px}
.op-list li span:not(.status){display:block;color:var(--muted);font-size:13px;line-height:1.5;word-break:keep-all}
.op-list .op-test{flex-basis:100%}
.op-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.op-form h3{margin:0 0 10px}
.op-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.op-form label{margin-bottom:12px}
.op-filter{margin:0 0 12px;padding-top:0}
@media(max-width:760px){
  .op-test button{flex:1 1 140px}
}
@media(max-width:350px){
  .op-form-row{grid-template-columns:1fr}
  .card dl.op-dl{grid-template-columns:1fr}
  .card dl.op-dl dd{padding-top:0;border-top:0}
}
/* v0.26 review fixes: mobile */
button,a,input,select,label,summary{touch-action:manipulation}
.family-waiting .text-button{min-height:44px;padding:0 4px;vertical-align:middle}
#card-dialog .card-fail{margin-top:14px}
.plan-inquiry-done{display:block;margin:0 0 8px;color:var(--muted);font-size:12px}
.op-list .status,.op-tags .status{white-space:normal;height:auto}
.registration-summary dd#registration-summary-payment span,.registration-summary dd span{font-size:14px}
.op-dl a{color:var(--blue-ink)}
@media(max-width:760px){
  html{scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}
/* v0.26 safe areas (viewport-fit=cover): side insets for notched phones in landscape, bottom inset on the login screen */
:root{--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px)}
@media(min-width:761px){
  .sidebar{width:calc(220px + var(--sal));padding-left:calc(16px + var(--sal))}
  .workspace{margin-left:calc(220px + var(--sal))}
  header{padding-right:max(40px,calc((100% - var(--main-w))/2 + 40px),calc(16px + var(--sar)))}
  main{padding-right:max(40px,calc(16px + var(--sar)))}
  #demo-panel{padding-right:calc(20px + var(--sar))}
  .auth-story{padding-left:max(48px,calc(16px + var(--sal)))}
  .auth-main{padding-right:max(40px,calc(16px + var(--sar)))}
}
@media(min-width:761px) and (max-width:1100px){
  .sidebar{width:calc(188px + var(--sal))}
  .workspace{margin-left:calc(188px + var(--sal))}
  header{padding-right:max(28px,calc((100% - var(--main-w))/2 + 28px),calc(16px + var(--sar)))}
  .auth-story{padding-left:max(32px,calc(16px + var(--sal)))}
}
@media(max-width:760px){
  .auth-main{padding-bottom:calc(16px + var(--sab))}
  .plan-table tbody th{font-size:12px}
}

/* v0.27 결제: 결제 실패·결제 대기 안내, 영수증, 운영자 결제 */
.notice.warn{background:var(--surface);border-left:3px solid var(--blue);box-shadow:var(--hairline)}
.notice.warn strong{color:var(--ink)}
.pay-notice strong{display:block;margin-bottom:4px}
.pay-notice .button-row{margin-top:10px}
#receipt-dialog .receipt-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:12px 0}
#receipt-dialog .receipt-dl dt{color:var(--ink-2);font-size:14px}
#receipt-dialog .receipt-dl dd{margin:0;font-size:15px;overflow-wrap:anywhere}
#receipt-dialog .receipt-dl small{display:block;color:var(--ink-2);font-size:13px}
#receipt-dialog .receipt-lines li{grid-template-columns:minmax(0,1fr) auto}
.receipt-order{font-variant-numeric:tabular-nums;font-size:14px}
.op-billing h3{margin:18px 0 6px}
.card-tests{display:flex;flex-wrap:wrap;gap:4px 16px}
.payment-card .plan-lines{display:grid;grid-template-columns:auto minmax(0,1fr);margin:12px 0}
.payment-card .plan-lines dt{white-space:nowrap}
.payment-card .plan-lines dd{padding-left:16px;text-align:right;word-break:keep-all;overflow-wrap:anywhere}
.payment-card .plan-lines dt,.payment-card .plan-lines dd{padding-top:10px;padding-bottom:10px;border-top:1px solid var(--line);font-size:14px;margin:0}
.op-list [data-receipt]{min-width:44px}


/* Two rows keep weekday touch targets wide in narrow registration and alarm editors. */
@media(max-width:480px){
  .day-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
  .day-picker span{min-height:44px;height:auto;padding:12px 0}
}

.workspace-pending{position:sticky;top:12px;z-index:5}

/* Cancellation is two steps; its exit and optional survey stay equally accessible. */
.cancellation-dialog{width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow-y:auto;background:linear-gradient(155deg,#f0f6ff 0%,var(--surface,#fff) 45%)}
.cancellation-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cancellation-step{font-size:13px;font-weight:600;color:var(--ink-2)}
.cancellation-top button{min-height:44px}
.cancellation-reasons{border:0;padding:0;margin:20px 0;display:grid;gap:8px}
.cancellation-reasons label{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 14px;border:1px solid var(--line,#c8d2e0);border-radius:12px;background:var(--surface,#fff);cursor:pointer}
.cancellation-reasons label:has(input:checked){border-color:#2365c9;background:#eaf2ff}
.cancellation-reasons input{width:20px;height:20px;margin:0;accent-color:#2365c9}
.cancellation-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cancellation-actions button{flex:1;min-height:48px;min-width:140px}
.cancellation-summary{margin:16px 0}.cancellation-summary h3,.cancellation-dialog .year-end-options h3{font-size:16px;margin:0 0 8px}
.cancellation-attention{padding:16px;margin:20px 0;border:1px solid #efb56a;border-radius:14px;background:#fff4e6;color:#743700}
.cancellation-attention p{color:#743700;margin:8px 0 0}
.cancellation-dialog .year-end-options{display:grid;gap:16px}
.cancellation-dialog .year-end-options section{padding:16px;border:1px solid var(--line,#c8d2e0);border-radius:12px;background:var(--surface,#fff)}
.cancellation-dialog .year-end-options button,.cancellation-submit{width:100%;min-height:52px;white-space:normal}
.cancellation-feedback:not(:empty){padding:12px;margin-top:16px;border-radius:10px;background:#eaf2ff;color:#183d77}
.cancellation-call-status{font-weight:600}
.cancellation-dialog :focus-visible{outline:3px solid #2365c9;outline-offset:3px}
@media(max-width:480px){.cancellation-dialog{padding:20px 16px}.cancellation-actions{flex-direction:column}.cancellation-actions button{width:100%}}