:root{
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  --grey50:#F9FAFB; --grey100:#F2F4F6; --grey200:#E5E8EB; --grey300:#D1D6DB; --grey400:#B0B8C1;
  --grey600:#6B7684; --grey700:#4E5968; --grey800:#333D4B; --grey900:#191F28;
  /* 포인트 컬러: 밤하늘 인디고 (흰 글자 대비 6.2:1, 연한 배경 위 글자 6.4:1) */
  --accent:#5847E0; --accent-hover:#4D3EC5; --accent-text:#4D3EC5; --accent-50:#EEEDFC; --accent-100:#DEDAF9;
  --green:#03B26C; --green-text:#0A7C4F; --green-50:#E6F7EF;
  --orange:#FF8A00; --orange-text:#A35200; --orange-50:#FFF3E0;
  --red:#F04452; --red-text:#C81E2D; --red-50:#FFEEEE;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--grey200);color:var(--grey900);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.screen{display:flex;flex-direction:column;gap:12px}
.screen h1:focus{outline:none}

/* ---------- 상단 바 (운영자: 화면 전환) ---------- */
.demo-bar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--grey200);font-size:14px}
.demo-bar strong{font-size:15px;font-weight:700;letter-spacing:-.01em}
.demo-seg{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--grey100)}
.demo-seg button{min-height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--grey700);font-size:14px;font-weight:500}
.demo-seg button[aria-pressed="true"]{background:#fff;color:var(--grey900);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.demo-toggle{min-height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--grey100);color:var(--grey800);font-size:14px;font-weight:600}
.demo-toggle[aria-pressed="true"]{background:var(--grey900);color:#fff}
.demo-note{color:var(--grey600)}
@media (min-width:900px){.demo-note{margin-left:auto}}
@media (max-width:899px){.demo-bar{position:static}.demo-note,.demo-toggle{display:none}}

/* ---------- 앱 틀 ---------- */
.app{container-type:inline-size;container-name:app;min-height:calc(100vh - 65px);background:var(--grey100)}
body.phone .app{max-width:390px;min-height:844px;margin:24px auto 48px;border-radius:32px;overflow:clip;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 64px rgba(25,31,40,.18)}
.shell{display:flex;flex-direction:column;min-height:inherit}
.content{display:flex;flex-direction:column;flex:1;min-width:0}
.main{flex:1;width:100%;max-width:1120px;padding:8px 16px 32px;display:flex;flex-direction:column}
.grid-2{display:flex;flex-direction:column;gap:12px}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ---------- 글자 ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 4px 8px}
.page-head h1{margin:0;font-size:26px;line-height:1.38;font-weight:700;letter-spacing:-.025em}
.cap{margin:0;font-size:14px;line-height:1.55;color:var(--grey600)}
.page-head .cap{margin-bottom:6px}
.page-head .desc{margin:8px 0 0}
.hero-title{margin:0;font-size:24px;line-height:1.4;font-weight:700;letter-spacing:-.025em}
.hero-title.sm{font-size:22px}
.card-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card-title h2{margin:0;font-size:19px;line-height:1.4;font-weight:700;letter-spacing:-.02em}
.mini-title{margin:0;font-size:15px;font-weight:600;color:var(--grey700)}

/* ---------- 카드 · 버튼 · 배지 ---------- */
.card{background:#fff;border-radius:24px;padding:22px 20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.btn{min-height:44px;padding:0 18px;border:0;border-radius:14px;font-size:16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;transition:background .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-tonal{background:var(--accent-50);color:var(--accent-text)}
.btn-tonal:hover{background:var(--accent-100)}
.btn-grey{background:var(--grey100);color:var(--grey800)}
.btn-grey:hover{background:var(--grey200)}
.btn-lg{min-height:56px;font-size:17px;border-radius:16px}
.btn-sm{padding:0 14px;font-size:15px;border-radius:12px}
.btn.block{width:100%}
.btn[disabled]{background:var(--grey200);color:var(--grey600);cursor:default;transform:none}
.btn-row{display:flex;gap:8px}
.grow{flex:1 1 0}
.icon-btn{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--grey700);display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;text-decoration:none}
.icon-btn:hover{background:var(--grey200)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap}
.b-accent{background:var(--accent-50);color:var(--accent-text)}
.b-green{background:var(--green-50);color:var(--green-text)}
.b-orange{background:var(--orange-50);color:var(--orange-text)}
.b-red{background:var(--red-50);color:var(--red-text)}
.b-grey{background:var(--grey100);color:var(--grey700)}
.dot{width:8px;height:8px;border-radius:999px;background:currentColor;flex-shrink:0}

.ic{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ic-accent{background:var(--accent-50);color:var(--accent)}
.ic-green{background:var(--green-50);color:var(--green)}
.ic-orange{background:var(--orange-50);color:var(--orange)}
.ic-red{background:var(--red-50);color:var(--red)}
.ic-grey{background:var(--grey100);color:var(--grey600)}

.row-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.row-text .t{font-size:16px;font-weight:600;color:var(--grey900)}
.row-text .s{font-size:14px;line-height:1.45;color:var(--grey600)}
.row-link{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px;margin:0 -8px;border-radius:16px;color:inherit;text-decoration:none}
.row-link:hover{background:var(--grey50)}
.chev{color:var(--grey400);flex-shrink:0;transition:transform .15s}

/* 스위치 */
.switch{width:60px;height:44px;border:0;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.switch .track{width:51px;height:31px;border-radius:999px;background:var(--grey300);padding:2px;display:flex;align-items:center;transition:background .2s}
.switch .knob{width:27px;height:27px;border-radius:999px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.15);transition:transform .2s}
.switch[aria-checked="true"] .track{background:var(--accent)}
.switch[aria-checked="true"] .knob{transform:translateX(20px)}

/* 칩 · 입력 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--grey100);color:var(--grey800);font-size:15px;font-weight:500}
.chip:hover{background:var(--grey200)}
.chip[aria-pressed="true"]{background:var(--accent-50);color:var(--accent-text);font-weight:600}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{padding:7px 12px;border-radius:999px;background:var(--grey100);font-size:14px;color:var(--grey800)}
.tags li.hot{background:var(--orange-50);color:var(--orange-text);font-weight:600}
.field{width:100%;border:1px solid var(--grey200);background:var(--grey50);border-radius:14px;padding:14px 16px;font-size:16px;line-height:1.6;color:var(--grey900);transition:border-color .15s,background .15s}
.field:focus{outline:none;border-color:var(--accent);background:#fff}
textarea.field{min-height:140px;resize:vertical}
input.field{min-height:48px;padding:10px 14px}
.check{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border-radius:999px;border:2px solid var(--grey300);background:#fff;display:grid;place-content:center;cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s}
.check::after{content:"";width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg);opacity:0}
.check:checked{background:var(--accent);border-color:var(--accent)}
.check:checked::after{opacity:1}

/* 숫자 */
.stats{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stats div{display:flex;flex-direction:column;gap:4px}
.stats dt{font-size:13px;color:var(--grey600)}
.stats dd{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* =========================================================
   사장님 웹
   ========================================================= */
.owner .side{display:none}
.side{background:#fff}
.brand{display:flex;flex-direction:column;gap:2px;padding:0 12px 20px}
.brand .name{font-size:18px;font-weight:700;letter-spacing:-.02em}
.brand .sub{font-size:13px;color:var(--grey600)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a,.nav .off{min-height:48px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:12px;color:var(--grey700);text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}
.nav a:hover{background:var(--grey100)}
.nav a[aria-current="page"]{background:var(--grey100);color:var(--grey900);font-weight:700}
.nav .off{color:var(--grey600)}
.nav .tag{margin-left:auto;font-size:12px;font-weight:500;color:var(--grey600);background:var(--grey100);border-radius:6px;padding:2px 6px}
.count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.count.zero{display:none}
.side-status{margin-top:auto;display:flex;align-items:center;gap:8px;padding:14px 12px;border-radius:14px;background:var(--grey50);font-size:14px;font-weight:600;color:var(--green-text)}
.side-status.off{color:var(--grey600)}

.hero-top,.live-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:-6px}
.status-pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--green-text)}
.status-pill .dot{background:var(--green);box-shadow:0 0 0 4px rgba(3,178,108,.15)}
.status-pill.off{color:var(--grey600)}
.status-pill.off .dot{background:var(--grey400);box-shadow:none}
.routes{display:flex;flex-direction:column;border-top:1px solid var(--grey100);padding-top:6px}
.route{display:flex;align-items:center;gap:12px;min-height:56px}
.route .label{flex:1;font-size:16px;color:var(--grey800)}
.route .val{font-size:16px;font-weight:600}
.timer{font-size:15px;font-weight:600;color:var(--grey700);font-variant-numeric:tabular-nums}

/* 하단 탭 */
.tabbar{position:sticky;bottom:0;z-index:10;display:flex;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--grey200);padding:6px 8px calc(10px + env(safe-area-inset-bottom))}
.tabbar a{flex:1 1 0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--grey600);text-decoration:none;font-size:12px;font-weight:500}
.tabbar a[aria-current="page"]{color:var(--grey900);font-weight:700}
.owner[data-screen="call"] .tabbar{display:none}

/* 통화 화면 */
.topbar{display:flex;align-items:center;gap:8px;min-height:56px;padding-top:8px}
.topbar-title{margin:0;flex:1;font-size:20px;font-weight:700;letter-spacing:-.02em}
.call-layout{display:flex;flex-direction:column;gap:12px}
.call-info{display:flex;flex-direction:column;gap:12px}
.caller{display:flex;align-items:center;gap:14px}
.caller .num{font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.notice{border-radius:20px;padding:18px 20px;display:flex;gap:12px;align-items:flex-start}
.notice .ic{width:32px;height:32px;border-radius:10px;background:#fff}
.notice h2{margin:0;font-size:17px;line-height:1.4;font-weight:700}
.notice p{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--grey800)}
.n-orange{background:var(--orange-50)} .n-orange h2{color:var(--orange-text)} .n-orange .ic{color:var(--orange)}
.n-green{background:var(--green-50)} .n-green h2{color:var(--green-text)} .n-green .ic{color:var(--green)}
.n-accent{background:var(--accent-50)} .n-accent h2{color:var(--accent-text)} .n-accent .ic{color:var(--accent)}
.n-red{background:var(--red-50)} .n-red h2{color:var(--red-text)} .n-red .ic{color:var(--red)}
.chat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;flex-direction:column;gap:4px;max-width:84%}
.msg.guest{align-self:flex-start;align-items:flex-start}
.msg.ai{align-self:flex-end;align-items:flex-end}
.msg .who{font-size:13px;font-weight:600;color:var(--grey600);padding:0 4px}
.msg p{margin:0;padding:12px 14px;border-radius:20px;font-size:16px;line-height:1.5}
.msg.guest p{background:var(--grey100);color:var(--grey900);border-top-left-radius:6px}
.msg.ai p{background:var(--accent);color:#fff;border-top-right-radius:6px}
.msg.flagged p{background:var(--red-50);color:var(--grey900);box-shadow:inset 0 0 0 2px var(--red)}
.msg .flag-note{font-size:13px;font-weight:600;color:var(--red-text);padding:0 4px}
.chat.compact .msg p{font-size:15px;padding:10px 12px}
.sys{align-self:center;font-size:13px;color:var(--grey700);background:var(--grey100);padding:6px 12px;border-radius:999px}
.flag-btn{min-height:36px;padding:0 6px;border:0;background:transparent;color:var(--grey600);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.flag-btn:hover{color:var(--grey900)}
.flag-btn[disabled]{color:var(--red-text);text-decoration:none;cursor:default}
.callbar{position:sticky;bottom:0;z-index:5;margin:4px -16px -32px;padding:14px 16px calc(16px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--grey200);display:flex;flex-direction:column;gap:8px}
.callbar .cap{text-align:center}

/* 아침 요약 · 통화 기록 */
.todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.todo li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px 14px;align-items:start;padding:14px 0}
.todo li + li{border-top:1px solid var(--grey100)}
.todo .check{margin-top:1px}
.todo label{display:flex;flex-direction:column;gap:2px;cursor:pointer}
.todo .t{font-size:16px;font-weight:600}
.todo .s{font-size:14px;line-height:1.45;color:var(--grey600)}
.todo .check:checked + label .t{text-decoration:line-through;color:var(--grey600)}
.todo .span{grid-column:2 / -1}
.composer{display:flex;flex-direction:column;gap:8px}
.call-list{list-style:none;margin:0 -8px;padding:0}
.call-row{width:100%;min-height:68px;display:flex;align-items:center;gap:12px;padding:10px 8px;border:0;border-radius:16px;background:transparent;color:inherit;text-align:left}
.call-row:hover{background:var(--grey50)}
.call-row[aria-expanded="true"] .chev{transform:rotate(90deg)}
.call-detail{margin:0 8px 10px;padding:16px;border-radius:18px;background:var(--grey50);display:flex;flex-direction:column;gap:12px}
.call-detail .msg.guest p{background:#fff}

/* 설정 */
.set-row{display:flex;align-items:center;gap:12px;padding:14px 0}
.set-row + .set-row{border-top:1px solid var(--grey100)}
.set-row .k{font-size:14px;color:var(--grey600)}
.set-row .v{font-size:17px;font-weight:600}
.set-row .empty{color:var(--red-text)}
.set-row .w{font-size:13px;line-height:1.5;color:var(--red-text)}
.set-row.warn{background:var(--red-50);margin:0 -12px;padding:14px 12px;border-radius:16px}
.set-row.warn + .set-row{border-top-color:transparent}
.info-edit{display:flex;gap:8px;margin-top:8px}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rules li{display:flex;align-items:center;gap:12px;min-height:56px;font-size:16px;color:var(--grey800)}
.rules li + li{border-top:1px solid var(--grey100)}
.rules .ic{width:32px;height:32px;border-radius:10px}
.rules .txt{flex:1}
.handoff{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.handoff li{display:flex;align-items:center;gap:12px;padding:12px 0}
.handoff li + li{border-top:1px solid var(--grey100)}
.quote{margin:0;padding:16px 18px;border-radius:16px;background:var(--grey50);font-size:16px;line-height:1.6;color:var(--grey800)}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--grey100)}
.seg button{min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--grey700);font-size:15px;font-weight:500}
.seg button[aria-pressed="true"]{background:#fff;color:var(--grey900);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* 오늘 밤: 휴대폰은 AI → 남길 말 → 항상 남길 말 → 지금 전화 순서로 한 줄 */
.today-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "memo" "standing" "right";gap:12px}
.today-top{grid-area:top}.today-right{grid-area:right}.today-memo{grid-area:memo}.today-standing{grid-area:standing}
.today-standing textarea.field{flex:1 1 auto}

/* 사장님 웹 · PC */
@container app (min-width:900px){
  .shell{display:grid;grid-template-columns:260px minmax(0,1fr)}
  .owner .side{display:flex;flex-direction:column;gap:4px;padding:28px 16px;border-right:1px solid var(--grey200)}
  .tabbar{display:none}
  .main{padding:16px 40px 56px}
  .screen{gap:16px}
  .page-head{padding:24px 4px 8px}
  .page-head h1{font-size:30px}
  .page-head .bell{display:none}
  .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  /* 오늘 밤: 위 [AI | 지금 전화·오늘 밤], 아래 [남길 말 | 항상 남길 말] — 두 메모 카드가 나란히, 높이도 같게 */
  .today-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"top right" "memo standing";gap:16px}
  .today-right > :last-child,.today-top > .part > .card,.today-top:not(:has(.part > .card)) > [data-part="ai"]{flex:1 1 auto}
  .col{gap:16px}
  .card{padding:28px}
  .log-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .call-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);grid-template-rows:auto 1fr;grid-template-areas:"talk info" "talk bar";gap:16px;align-items:start}
  .call-talk{grid-area:talk}
  .call-info{grid-area:info}
  .callbar{grid-area:bar;align-self:start;position:static;margin:0;padding:24px;border:0;border-radius:24px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* =========================================================
   운영 콘솔
   ========================================================= */
.ops .side{display:flex;flex-direction:column;gap:8px;padding:14px 16px 8px;border-bottom:1px solid var(--grey200)}
.ops .brand{flex-direction:row;align-items:baseline;gap:8px;padding:0 4px}
.ops .nav{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px}
.ops .main{max-width:1240px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:#fff;border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.kpi .k{font-size:14px;color:var(--grey600)}
.kpi .v{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:15px;font-weight:500;color:var(--grey600)}
.kpi .v.red{color:var(--red-text)}
.split{display:flex;flex-direction:column;gap:12px}
.table-scroll{overflow-x:auto;margin:0 -20px;padding:0 20px}
.ops table{width:100%;min-width:720px;border-collapse:collapse;font-size:15px}
.ops thead th{padding:10px 12px;text-align:left;font-size:13px;font-weight:600;color:var(--grey600);border-bottom:1px solid var(--grey200);white-space:nowrap}
.ops tbody th,.ops tbody td{padding:16px 12px;border-bottom:1px solid var(--grey100);text-align:left;vertical-align:top}
.ops tbody tr:last-child > *{border-bottom:0}
.ops .first{padding-left:0}
.ops .last{padding-right:0}
.ops .num{text-align:right;font-variant-numeric:tabular-nums}
.ops .sub{display:block;margin-top:2px;font-size:13px;color:var(--grey600)}
.ops .dim{color:var(--grey600)}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.check-list li{display:flex;gap:12px;align-items:flex-start;padding:14px 0}
.check-list li + li{border-top:1px solid var(--grey100)}
.check-list a{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:600;color:var(--accent-text);text-decoration:none}
.check-list a:hover{text-decoration:underline}
.usage{margin:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.usage div{display:flex;justify-content:space-between;gap:12px}
.usage dt{color:var(--grey600)}
.usage dd{margin:0;font-weight:600}
.usage .total{border-top:1px solid var(--grey100);padding-top:10px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:var(--grey700);font-size:15px;font-weight:500}
.filters button[aria-pressed="true"]{background:var(--grey900);color:#fff;font-weight:700}
.queue{list-style:none;margin:0 -8px;padding:0;display:flex;flex-direction:column;gap:2px}
.queue button{width:100%;text-align:left;display:flex;gap:12px;align-items:flex-start;padding:12px 8px;border:0;border-radius:16px;background:transparent;color:inherit}
.queue .badge{align-self:flex-start;margin-bottom:4px}
.queue button:hover{background:var(--grey50)}
.queue button[aria-current="true"]{background:var(--accent-50)}
.detail-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.detail-head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.kv-list{margin:0;display:flex;flex-direction:column}
.kv-list div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:12px 0;font-size:15px}
.kv-list div + div{border-top:1px solid var(--grey100)}
.kv-list dt{color:var(--grey600)}
.kv-list dd{margin:0;font-weight:600}
.kv-list .bad{color:var(--red-text)}
.diag{margin:0;padding:14px 16px;border-radius:16px;background:var(--grey50);font-size:15px;line-height:1.6;color:var(--grey800)}
.opt{display:flex;gap:12px;align-items:flex-start}
.opt .check{margin-top:1px}
.opt label{display:flex;flex-direction:column;gap:2px;font-size:16px;font-weight:600;cursor:pointer}
.opt label span{font-size:14px;font-weight:400;line-height:1.5;color:var(--grey600)}
.opt-box{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:var(--grey50)}
.opt-box .field{background:#fff}
.fix-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.radio-row{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px}
.radio-row label{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.radio-row input{width:20px;height:20px;accent-color:var(--accent)}

@container app (min-width:900px){
  .ops .side{padding:28px 16px;gap:4px;border-bottom:0;border-right:1px solid var(--grey200)}
  .ops .brand{flex-direction:column;align-items:flex-start;gap:2px;padding:0 12px 20px}
  .ops .nav{flex-direction:column;overflow:visible;gap:2px}
  .split{gap:16px}
}
@container app (min-width:1100px){
  .split{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start}
  .review-split{grid-template-columns:320px minmax(0,1fr)}
}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:100;max-width:min(92vw,480px);padding:14px 18px;border-radius:16px;background:rgba(25,31,40,.94);color:#fff;font-size:15px;line-height:1.5;box-shadow:0 12px 32px rgba(0,0,0,.2);opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* =========================================================
   실제 앱에서 추가한 것
   ========================================================= */
body.no-bar .app{min-height:100vh}
body.no-bar .demo-bar{display:none}
.demo-bar .who{margin-left:auto;font-size:14px;color:var(--grey600)}
@media (max-width:899px){.demo-bar .who{display:none}}

/* 로그인 */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--grey100)}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:28px;padding:32px 24px;display:flex;flex-direction:column;gap:14px}
.login-card h1{margin:0 0 4px;font-size:26px;line-height:1.38;font-weight:700;letter-spacing:-.025em}
.login-card label{font-size:14px;font-weight:600;color:var(--grey700)}
.login-error{margin:0;font-size:14px;color:var(--red-text);min-height:20px}

/* 빈 화면 · 불러오는 중 */
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.empty .t{font-size:17px;font-weight:700}
.empty .s{font-size:15px;line-height:1.5;color:var(--grey600)}
.loading{padding:40px 4px;color:var(--grey600);font-size:15px}
.skeleton{height:120px;border-radius:24px;background:linear-gradient(90deg,#fff 0%,var(--grey50) 50%,#fff 100%);background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}

/* 입력 줄 */
.edit-row{display:flex;gap:8px;margin-top:8px}
.edit-row .field{flex:1}
select.field{min-height:44px;padding:8px 12px;background:#fff}
.part{display:contents}
/* 메모 적용 시간 */
.until{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.until-label{font-size:15px;font-weight:600;color:var(--grey800);white-space:nowrap}
.until-pick{display:flex;align-items:center;gap:8px;flex:1 1 280px;min-width:0}
.until-pick select.field{flex:1 1 0;min-width:0;width:auto;font-size:16px}
.until-suffix{font-size:15px;color:var(--grey700);white-space:nowrap}
.inline-field{min-height:40px;padding:6px 10px;font-size:15px;border-radius:10px}
.linkish{border:0;background:none;padding:0;color:var(--accent-text);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:4px}
.linkish:hover{text-decoration:underline}
.btn-danger{background:var(--red-50);color:var(--red-text)}
.small-note{font-size:13px;color:var(--grey600)}
.setup-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.setup-list li{display:flex;gap:12px;align-items:center;padding:12px 0}
.setup-list li + li{border-top:1px solid var(--grey100)}
.pill-time{font-variant-numeric:tabular-nums}
.ops table select{min-height:36px;padding:4px 8px;border-radius:10px;border:1px solid var(--grey200);background:#fff;font-size:14px}
.ops .num-edit{display:flex;gap:6px;align-items:center}
.ops .num-edit input{width:140px}