/* MediMind Lite — 튜토리얼 (2026-10-15): 음성 입력 재고 정리 · 음성 인식 진료 예시 애니메이션. tutorial.js 와 함께 씁니다. */

/* 여는 버튼: 약품 재고 머리 오른쪽, 진료의 '환자' 제목 옆 */
.tut-open { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 1px solid var(--a-accent-line, #9ccfc6); border-radius: 999px; background: var(--a-accent-soft, #dbeeea); color: var(--a-accent, #0b7a72); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.tut-open:hover { background: var(--a-accent-press, #c6e4de); }
.tut-open:focus-visible { outline: 2px solid var(--a-accent, #0b7a72); outline-offset: 2px; }
.a-stage-right .tut-open { margin: 0 10px 4px 0; }
.v-card > h2 .tut-open { margin-left: auto; align-self: center; font-family: inherit; }

/* 창 */
html.tut-lock { overflow: hidden; }
.tut-back { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(15, 31, 38, .55); animation: tut-fade .18s ease-out; }
.tut { width: min(1180px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--a-surface, #fff); color: var(--a-ink, #0f1f26); box-shadow: 0 24px 60px rgba(15, 31, 38, .28); }
.tut-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--a-line, #d5dfdd); }
.tut-eyebrow { margin: 0 0 4px; font-size: 11.5px; color: var(--a-muted, #56686e); letter-spacing: .2px; }
.tut-head h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.tut-lead { margin: 4px 0 0; font-size: 13.5px; color: var(--a-ink-2, #3f5259); word-break: keep-all; }
.tut-x { flex: none; width: 40px; height: 40px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; color: var(--a-ink-2, #3f5259); cursor: pointer; }
.tut-x:hover { background: var(--a-sunken, #edf2f0); }
.tut-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 16px 20px; overflow: auto; }
.tut-screen-wrap { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tut-screen { position: relative; height: 470px; overflow: hidden; border: 1px solid var(--a-line, #d5dfdd); border-radius: 12px; background: var(--a-page, #f2f6f5); }
.tut-caption { margin: 0; font-size: 13.5px; color: var(--a-ink-2, #3f5259); word-break: keep-all; display: none; }
.tut-caption b { color: var(--a-ink, #0f1f26); }

/* 단계 목록 */
.tut-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tut-steps button { position: relative; width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; }
.tut-steps button:hover { background: var(--a-row-hover, #f3f7f6); }
.tut-steps [aria-current="step"] button { border-color: var(--a-accent-line, #9ccfc6); background: var(--a-accent-soft, #dbeeea); }
.tut-num { flex: none; font-family: var(--a-mono, monospace); font-size: 12px; color: var(--a-muted, #56686e); padding-top: 2px; }
.tut-steps [data-done] .tut-num { color: var(--a-accent, #0b7a72); }
.tut-steps strong { display: block; font-size: 14px; }
.tut-steps small { display: none; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--a-ink-2, #3f5259); word-break: keep-all; }
.tut-steps [aria-current="step"] small { display: block; }
.tut-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.tut-bar i { display: block; height: 100%; width: 0; background: var(--a-accent, #0b7a72); }
.tut-ctrl { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--a-line, #d5dfdd); }
.tut-count { margin-right: auto; font-family: var(--a-mono, monospace); font-size: 12.5px; color: var(--a-muted, #56686e); }

/* 예시 화면 공통 */
.tut-app { position: absolute; inset: 0; padding: 14px; overflow: hidden; font-size: 13px; }
.tut-app.tut-in { animation: tut-fade .3s ease-out; }
.tut-app-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.tut-app-head b { font-size: 16px; }
.tut-app-head span { font-size: 12px; color: var(--a-muted, #56686e); }
.tut-in { animation: tut-rise .32s ease-out; }
.tut-press { transform: scale(.95); transition: transform .12s; }
.tut-flash { animation: tut-flash 1.2s ease-out; }
.tut-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transition: transform .9s cubic-bezier(.45, .05, .25, 1); }
.tut-cursor svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.tut-cursor::after { content: ''; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--a-accent, #0b7a72); opacity: 0; }
.tut-cursor.tut-tap::after { animation: tut-tap .5s ease-out; }
.tut-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.tut-tx-h { font-size: 11.5px; font-weight: 600; color: var(--a-muted, #56686e); margin: 8px 0 4px; }
.tut-tx { list-style: none; margin: 0; padding: 6px 8px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 8px; background: var(--a-surface, #fff); }
.tut-tx li { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.tut-tx li.tut-live .tut-tt { color: var(--a-muted, #56686e); }
.tut-tx li.tut-live .tut-tt::after { content: '▍'; animation: tut-blink 1s steps(1) infinite; color: var(--a-accent, #0b7a72); }
.tut-ts { font-family: var(--a-mono, monospace); font-size: 11px; color: var(--a-muted, #56686e); flex: none; }
.tut-empty { color: var(--a-muted, #56686e); }
.tut-card { border: 1px solid var(--a-line, #d5dfdd); border-radius: 10px; background: var(--a-surface, #fff); padding: 10px 12px; }
.tut-card h3 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: 13.5px; }
.tut-card h3 span { font-family: var(--a-mono, monospace); font-size: 11.5px; font-weight: 400; color: var(--a-muted, #56686e); }

/* 음성 입력 재고 정리 */
.tut-voicebox { padding: 10px 12px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 12px; background: var(--a-sunken, #edf2f0); }
.tut-voice-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tut-voice { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 1px solid #c0392b; border-radius: 7px; background: #c0392b; color: #fff; font: inherit; font-weight: 700; cursor: default; }
.tut-voice .tut-dot { background: #fff; }
.tut-voice.on { background: #8e2a1f; border-color: #8e2a1f; }
.tut-voice.on .tut-dot { animation: tut-pulse 1s ease-in-out infinite; }
.tut-voice span:last-child { font-variant-numeric: tabular-nums; }
.tut-wave { display: none; align-items: center; gap: 2px; height: 22px; }
.tut-wave.on { display: inline-flex; }
.tut-wave i { width: 3px; height: 30%; border-radius: 2px; background: #c0392b; animation: tut-wave .9s ease-in-out infinite; }
.tut-wave i:nth-child(3n) { animation-delay: -.3s; } .tut-wave i:nth-child(3n+1) { animation-delay: -.6s; } .tut-wave i:nth-child(4n) { animation-duration: 1.2s; }
.tut-state { font-size: 12px; color: var(--a-muted, #56686e); }
.tut-table { width: 100%; border-collapse: collapse; margin-top: 10px; background: var(--a-surface, #fff); border-radius: 8px; overflow: hidden; }
.tut-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--a-muted, #56686e); padding: 5px 8px; border-bottom: 1px solid var(--a-line, #d5dfdd); }
.tut-table td { padding: 6px 8px; border-bottom: 1px solid var(--a-line-soft, #e6edeb); vertical-align: middle; }
.tut-table tr.is-saved td { opacity: .65; }
.tut-name { font-weight: 600; }
.tut-name small { font-weight: 400; color: var(--a-muted, #56686e); }
.tut-arrow { color: var(--a-muted, #56686e); }
.tut-after { color: #c0392b; }
.tut-delta { color: #0b7a72; font-weight: 600; white-space: nowrap; }
.tut-delta small { display: block; font-weight: 400; font-size: 11px; color: var(--a-muted, #56686e); }
.tut-need { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--a-order-soft, #f7e9dc); color: var(--a-order-ink, #8c4515); font-size: 12px; font-weight: 600; }
.tut-apply, .tut-main { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 6px; background: var(--a-accent, #0b7a72); color: #fff; font-size: 12px; font-weight: 600; }
.tut-main { min-height: 32px; padding: 0 14px; font-size: 13px; }
.tut-ok { color: var(--a-accent, #0b7a72); font-weight: 600; font-size: 12px; }
.tut-ask { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--a-order-line, #e6c3a4); border-radius: 8px; background: var(--a-surface, #fff); }
.tut-ask > b { font-size: 12px; color: var(--a-order-ink, #8c4515); }
.tut-ask p { margin: 4px 0 6px; }
.tut-ask-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tut-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--a-line-input, #7c8f8d); border-radius: 7px; background: var(--a-surface, #fff); font-size: 12.5px; }
.tut-hint { font-size: 11.5px; color: var(--a-muted, #56686e); }
.tut-foot { margin-top: 10px; display: flex; justify-content: flex-end; }
.tut-inv-list { margin-top: 12px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 10px; background: var(--a-surface, #fff); }
.tut-inv-list-h { padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: var(--a-muted, #56686e); border-bottom: 1px solid var(--a-line, #d5dfdd); }
.tut-inv-row { display: flex; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--a-line-soft, #e6edeb); }
.tut-inv-row:last-child { border-bottom: 0; }
.tut-inv-row b { font-variant-numeric: tabular-nums; }
.tut-inv-row.is-new { animation: tut-flash 1.4s ease-out; }
.tut-inv-row.is-new b { color: var(--a-accent, #0b7a72); }

/* 음성 인식 진료 */
.tut-pts { list-style: none; margin: 0; padding: 0; }
.tut-pts li { display: flex; align-items: baseline; gap: 10px; padding: 9px 8px; border-top: 1px solid var(--a-line-soft, #e6edeb); border-radius: 6px; }
.tut-pts li.tut-press { background: var(--a-accent-soft, #dbeeea); }
.tut-pts span { color: var(--a-muted, #56686e); font-size: 12.5px; }
.tut-pts em { font-style: normal; color: var(--a-order-ink, #8c4515); }
.tut-go { margin-left: auto; color: var(--a-accent, #0b7a72) !important; font-weight: 600; }
.tut-vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 10px; background: var(--a-surface, #fff); }
.tut-vbar > span:nth-child(2) { color: var(--a-muted, #56686e); }
.tut-listen { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: var(--a-sunken, #edf2f0); color: var(--a-muted, #56686e); font-size: 12px; font-weight: 600; }
.tut-listen.on { background: var(--a-warn-soft, #fbe4e4); color: var(--a-warn, #bf3438); }
.tut-listen.on .tut-dot { animation: tut-pulse 1s ease-in-out infinite; }
.tut-strip .tut-tx { max-height: 132px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.tut-sp { flex: none; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 4px; }
.tut-sp[data-who="dr"] { background: var(--a-accent-soft, #dbeeea); color: var(--a-accent, #0b7a72); }
.tut-sp[data-who="pt"] { background: var(--a-order-soft, #f7e9dc); color: var(--a-order-ink, #8c4515); }
.tut-qs ul { list-style: none; margin: 0; padding: 0; }
.tut-check { width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid var(--a-line-input, #7c8f8d); border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; }
.tut-qs li.is-done .tut-check { background: var(--a-accent, #0b7a72); border-color: var(--a-accent, #0b7a72); color: #fff; }
.tut-qs li.is-done > span:nth-child(2) { color: var(--a-muted, #56686e); }
.tut-qs.is-folded ul { display: none; }
.tut-qs.is-folded { opacity: .7; }
.tut-note dl { margin: 0; }
.tut-note dd { margin: 0; min-height: 1.4em; font-size: 12.5px; }

@keyframes tut-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tut-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tut-flash { 0% { background: var(--a-accent-press, #c6e4de); } 100% { background: transparent; } }
@keyframes tut-tap { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes tut-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes tut-blink { 50% { opacity: 0; } }
@keyframes tut-wave { 0%, 100% { height: 25%; } 50% { height: 95%; } }

/* 좁은 화면: 단계 목록 대신 화면 아래 설명 한 줄 */
@media (max-width: 860px) {
  .tut-body { grid-template-columns: 1fr; padding: 12px 16px; }
  .tut-steps { display: none; }
  .tut-caption { display: block; }
  .tut-head { padding: 14px 16px 10px; }
  .tut-ctrl { padding: 10px 16px; }
}
@media (max-width: 640px) {
  .tut-back { padding: 0; }
  .tut { max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .tut-lead { display: none; }
  .tut-screen { height: calc(100dvh - 250px); min-height: 420px; }
  .tut-app { padding: 10px; font-size: 12.5px; }
  .tut-vcards .tut-qs.is-folded { display: none; }
  .tut-strip .tut-tx { max-height: 96px; }
  .tut-table th:nth-child(3), .tut-table td:nth-child(3) { display: none; }
  .tut-table td, .tut-table th { padding: 5px 5px; }
  .tut-delta small { display: none; }
  .v-card > h2 .tut-open { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tut-cursor { transition: none; }
  .tut-in, .tut-app.tut-in, .tut-flash, .tut-inv-row.is-new, .tut-back, .tut-copied { animation: none; }
  .tut-wave i, .tut-voice.on .tut-dot, .tut-listen.on .tut-dot { animation: none; }
}
.tut-wait { margin: 0; font-size: 12px; color: var(--a-muted, #56686e); }
/* 예시 화면이 길면 tutorial.js 가 scrollTop 으로 내립니다(스크롤 막대는 숨김). 넓은 화면에서 재고 목록은 오른쪽 칸. */
.tut-app { scrollbar-width: none; }
.tut-app::-webkit-scrollbar { display: none; }
@media (min-width: 1400px) {
  .tut-app.tut-inv { display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 12px; align-content: start; align-items: start; }
  .tut-app.tut-inv .tut-app-head { grid-column: 1 / -1; }
  .tut-app.tut-inv .tut-inv-list { margin-top: 0; }
}
.tut-table td:nth-child(2), .tut-table td:nth-child(4), .tut-apply, .tut-ok { white-space: nowrap; }

/* 진료 카드 배치: 물어볼 질문(전체) → 처방 | 진료 기록 형식 → SOAP(전체) → 확인 */
.tut-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11.5px; color: var(--a-muted, #56686e); }
.tut-okchip { padding: 1px 8px; border-radius: 999px; background: var(--a-accent-soft, #dbeeea); color: var(--a-accent, #0b7a72); font-weight: 600; }
.tut-opts { display: flex; flex-direction: column; gap: 6px; }
.tut-copy { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 8px; background: var(--a-surface, #fff); }
.tut-copy.is-copied { background-color: var(--a-accent-soft, #dbeeea); border-color: var(--a-accent-line, #9ccfc6); }
.tut-copy-4 { border-style: dashed; }
.tut-cn { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: var(--a-sunken, #edf2f0); font-family: var(--a-mono, monospace); font-size: 11.5px; font-weight: 700; }
.tut-cbody { min-width: 0; display: flex; flex-direction: column; }
.tut-sign-acts { display: flex; gap: 6px; }
/* 새 품목: 입력칸 모양 · 받은 정보 목록 */
.tut-input { display: inline-flex; align-items: center; min-width: 120px; min-height: 28px; padding: 0 8px; border: 1px solid var(--a-line-input, #7c8f8d); border-radius: 7px; background: var(--a-surface, #fff); font-size: 12.5px; }
.tut-delta.is-new { color: var(--a-accent, #0b7a72); }
.tut-inv-row span small { display: block; font-size: 11px; color: var(--a-muted, #56686e); }

/* 2026-10-16 main 화면 기준 ─ 진료: 위 막대 · 가운데 카드(한 줄씩) · 오른쪽 진료 끝내기 + 구조도 */
.tut-muted { color: var(--a-muted, #56686e); font-size: 12px; }
.tut-back-btn { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid var(--a-line-input, #7c8f8d); border-radius: 7px; font-size: 12px; }
.tut-end { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid var(--a-line-input, #7c8f8d); border-radius: 7px; font-size: 12px; background: var(--a-surface, #fff); }
.tut-clock { margin-left: auto; font-family: var(--a-mono, monospace); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tut-vstate { margin: 6px 2px 0; font-size: 12px; color: var(--a-muted, #56686e); }
.tut-vgrid { display: block; }
.tut-vcards { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tut-vside { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tut-searchrow { display: flex; gap: 6px; margin-bottom: 8px; }
.tut-search { flex: 1; padding: 6px 10px; border: 1px solid var(--a-line-input, #7c8f8d); border-radius: 7px; color: var(--a-placeholder, #66777c); background: var(--a-surface, #fff); }
.tut-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 6px; font-size: 11.5px; color: var(--a-muted, #56686e); }
.tut-qs li { display: grid; grid-template-columns: 18px 1fr; column-gap: 6px; padding: 3px 2px; border-radius: 5px; }
.tut-qs li .tut-check { border: 0; border-radius: 50%; background: var(--a-order-soft, #f7e9dc); color: var(--a-order-ink, #8c4515); }
.tut-qs li small { color: var(--a-accent, #0b7a72); font-size: 11.5px; font-weight: 600; }
.tut-qs.is-folded ul { display: none; }
/* 복사 옵션: 번호 · 형식 이름(작게) · 글. 첫 줄(가능성이 가장 높은 처방)은 테두리만 은은하게 강조 */
.tut-copy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; border-color: var(--a-accent-line, #9ccfc6); }
.tut-copy.is-top { border: 1.5px solid transparent; background: linear-gradient(var(--a-surface, #fff), var(--a-surface, #fff)) padding-box, linear-gradient(125deg, var(--a-accent, #0b7a72) 0%, #6fcabe 45%, var(--a-accent-line, #9ccfc6) 75%, var(--a-line, #d5dfdd) 100%) border-box; }
.tut-copy.is-copied, .tut-copy.is-top.is-copied { border: 1.5px solid var(--a-ok, #0b7a72); background: var(--a-accent-soft, #dbeeea); }
.tut-cn { background: var(--a-accent-soft, #dbeeea); color: var(--a-accent, #0b7a72); }
.tut-cl { margin-right: 4px; font-size: 11px; font-weight: 700; color: var(--a-muted, #56686e); white-space: nowrap; }
.tut-ct { font-size: 12.5px; color: var(--a-ink, #0f1f26); white-space: pre-line; overflow-wrap: anywhere; }
.tut-copied { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--a-accent, #0b7a72); white-space: nowrap; animation: tut-rise .3s ease-out; }
.tut-note dl div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; padding: 4px 0; border-top: 1px solid var(--a-line-soft, #e6edeb); }
.tut-note dt { font-size: 11px; color: var(--a-muted, #56686e); display: flex; gap: 6px; align-items: baseline; }
.tut-note dt b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--a-ink, #0f1f26); color: #fff; font-family: var(--a-mono, monospace); font-size: 11px; }
.tut-sign { padding: 8px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 10px; background: var(--a-surface, #fff); }
.tut-sign .tut-main { width: 100%; justify-content: center; min-height: 36px; }
.tut-main.is-off { background: var(--a-sunken, #edf2f0); color: var(--a-muted, #56686e); }
.tut-sign.is-signed { background: var(--a-accent-soft, #dbeeea); border-color: var(--a-accent-line, #9ccfc6); }
.tut-stamp { margin: 2px 0 6px; font-weight: 700; color: var(--a-accent, #0b7a72); font-size: 13px; }
.tut-sign-acts { display: flex; gap: 6px; }
.tut-map-g { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tut-map-g span { width: 100%; font-size: 11px; color: var(--a-muted, #56686e); }
.tut-map-g i { font-style: normal; padding: 2px 7px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 6px; font-size: 11.5px; }
.tut-map-arrow { color: var(--a-muted, #56686e); font-size: 11px; margin: 2px 0; }
@media (min-width: 1200px) {
  .tut-vgrid { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; align-items: start; }
}
/* 재고: 상태 · 제조사 · 공급처 입력 요청(주황) · 입력칸 */
.tut-st { font-size: 12px; white-space: nowrap; color: var(--a-muted, #56686e); }
.tut-st[data-st="ok"] { color: #0b7a72; }
.tut-st[data-st="order"] { color: #b42318; font-weight: 700; }
.tut-after { color: #b42318; }
.tut-need { border: 1px dashed #b7791f; background: #fff7e6; color: #8a5a00; border-radius: 6px; }
.tut-nudge { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #a9531b; }
.tut-info-line { margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--a-muted, #56686e); }
.tut-info-line b { color: #0b7a72; font-weight: 600; }
.tut-info-form { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-weight: 400; }
.tut-info-form .tut-input { min-width: 130px; }
.tut-input:empty::before { content: attr(data-ph); color: var(--a-placeholder, #66777c); }
.tut-done { margin-top: 8px; font-size: 12px; color: var(--a-muted, #56686e); }
.tut-done::before { content: '▸ '; }
.tut-tx-h span { font-weight: 400; margin-left: 4px; }
/* 휴대폰: 재고 정리 표는 품목 · 변경 후 · 차이 · 적용만(현재 · 화살표 · 상태는 숨김), 글은 줄바꿈 */
@media (max-width: 640px) {
  .tut-table th:nth-child(2), .tut-table td:nth-child(2), .tut-table th:nth-child(6), .tut-table td:nth-child(6) { display: none; }
  .tut-table .tut-delta, .tut-table td:nth-child(4) { white-space: normal; }
  .tut-info-form .tut-input { min-width: 0; width: 100%; }
}
/* 자동 동작 표시(커서 없음): 강조 테두리 · 음성으로 인식된 응답 · 그에 맞춰 체크되는 문진 항목 */
.tut-spot { animation: tut-spot 1.6s ease-out; border-radius: 8px; }
@keyframes tut-spot { 0% { box-shadow: 0 0 0 0 rgba(11, 122, 114, .55); } 70% { box-shadow: 0 0 0 6px rgba(11, 122, 114, 0); } 100% { box-shadow: none; } }
mark.tut-heard { padding: 0 2px; border-radius: 3px; background: var(--a-accent-soft, #dbeeea); color: var(--a-accent, #0b7a72); font-weight: 700; animation: tut-flash 1.4s ease-out; }
.tut-heard-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--a-accent, #0b7a72); color: #fff; font-size: 10.5px; font-weight: 700; vertical-align: 1px; animation: tut-heard-tag 2.6s ease-out forwards; }
@keyframes tut-heard-tag { 0% { opacity: 0; transform: translateX(-4px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
.tut-qs li.tut-voice-hit { animation: tut-voice-hit 1.8s ease-out; }
@keyframes tut-voice-hit { 0% { background: var(--a-accent-press, #c6e4de); box-shadow: inset 3px 0 0 var(--a-accent, #0b7a72); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .tut-spot, mark.tut-heard, .tut-qs li.tut-voice-hit { animation: none; } .tut-heard-tag { animation: none; } }

/* 2026-10-16 ─ 휴대폰 마이크 · 휴대폰 재고 입력 · 병원 PC 로그인 장면: PC 화면 | 휴대폰 화면을 나란히(좁으면 위아래) */
.tut-app.tut-pair { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; align-items: start; }
.tut-pc { position: relative; min-width: 0; min-height: 420px; padding: 10px; border: 2px solid var(--a-line-input, #7c8f8d); border-radius: 12px; background: var(--a-page, #f2f6f5); }
.tut-pc .tut-where { margin-bottom: 8px; }
.tut-where { display: inline-block; margin-bottom: 6px; padding: 1px 8px; border-radius: 999px; background: var(--a-ink, #0f1f26); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.tut-app-head .tut-grow { flex: 1; }
.tut-app-head { flex-wrap: wrap; }
.tut-btn { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--a-line-input, #7c8f8d); border-radius: 7px; background: var(--a-surface, #fff); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tut-btn-sm { min-height: 26px; padding: 0 9px; font-size: 12px; }
.tut-btn.is-on { border-color: var(--a-accent-line, #9ccfc6); background: var(--a-accent-soft, #dbeeea); color: var(--a-accent, #0b7a72); }
.tut-btn.tut-danger { color: #b42318; border-color: #e3b3ac; }
.tut-wide { width: 100%; justify-content: center; min-height: 36px; }
.tut-on { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--a-accent-soft, #dbeeea); color: var(--a-accent, #0b7a72); font-size: 11.5px; font-weight: 700; }
.tut-mono { font-family: var(--a-mono, monospace); font-size: 11.5px; }
.tut-table.tut-mini { margin-top: 8px; font-size: 12px; }
.tut-table.tut-mini td small { display: block; font-size: 11px; color: var(--a-muted, #56686e); }
.tut-qr { display: block; width: 112px; height: 112px; flex: none; border: 1px solid var(--a-line, #d5dfdd); border-radius: 6px; shape-rendering: crispEdges; }
.tut-dlg { position: absolute; left: 24px; right: 24px; top: 70px; z-index: 3; padding: 12px 14px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 12px; background: var(--a-surface, #fff); box-shadow: 0 12px 32px rgba(15, 31, 38, .22); }
.tut-dlg > b { font-size: 14px; }
.tut-dlg > p { margin: 4px 0 8px; font-size: 12.5px; color: var(--a-ink-2, #3f5259); }
.tut-dlg-body { display: flex; gap: 12px; align-items: flex-start; }
.tut-dlg-body p { margin: 0 0 6px; }
.tut-dlg-st { font-weight: 700; color: var(--a-accent, #0b7a72); }
.tut-toast { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--a-ink, #0f1f26); color: #fff; font-size: 12px; }
.tut-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.tut-talk { min-height: 74px; }
/* 휴대폰 틀 */
.tut-phone { position: relative; height: 420px; padding: 18px 8px 10px; border: 2px solid var(--a-ink, #0f1f26); border-radius: 26px; background: var(--a-ink, #0f1f26); }
.tut-phone-cap { position: absolute; top: 3px; left: 0; right: 0; text-align: center; font-size: 10px; color: #c9d8d6; letter-spacing: .08em; }
.tut-phone-screen { height: 100%; overflow: hidden; border-radius: 18px; background: var(--a-page, #f2f6f5); padding: 8px; font-size: 12px; }
.tut-cam { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: -8px; padding: 8px; background: #1c2a30; border-radius: 18px; }
.tut-cam-view { position: relative; width: 140px; height: 140px; display: grid; place-items: center; }
.tut-cam-view .tut-qr { width: 104px; height: 104px; }
.tut-cam-frame { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .8); border-radius: 14px; }
.tut-cam-hint { font-size: 11.5px; color: #c9d8d6; }
.tut-cam-link { padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--a-accent, #0b7a72); font-weight: 700; font-size: 12px; }
.tut-m-card { padding: 10px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 12px; background: var(--a-surface, #fff); text-align: center; }
.tut-m-card p { margin: 6px 0; }
.tut-m-who { font-size: 11px; color: var(--a-muted, #56686e); }
.tut-m-pt { min-height: 18px; font-size: 13px; }
.tut-m-big { display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 8px 0 4px; border-radius: 14px; background: var(--a-accent, #0b7a72); color: #fff; font-size: 15px; font-weight: 700; }
.tut-m-big.is-on { background: #8e2a1f; }
.tut-m-big.is-off { background: var(--a-sunken, #edf2f0); color: var(--a-muted, #56686e); }
.tut-m-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--a-muted, #56686e); }
.tut-m-st.is-on { color: var(--a-warn, #bf3438); }
.tut-m-st.is-on .tut-dot { animation: tut-pulse 1s ease-in-out infinite; }
.tut-m-card .tut-wave { justify-content: center; }
.tut-m-help { margin: 8px 0 0; padding-left: 16px; font-size: 11px; color: var(--a-muted, #56686e); }
.tut-m-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: -8px -8px 8px; padding: 8px; background: var(--a-order-soft, #f7e9dc); color: var(--a-order-ink, #8c4515); font-size: 11px; }
.tut-m-banner > b { width: 100%; font-size: 12px; }
.tut-m-inv { display: flex; flex-direction: column; gap: 6px; }
.tut-m-inv .tut-voice { justify-content: center; }
.tut-m-vocab { margin: 0; font-size: 10.5px; color: var(--a-muted, #56686e); }
.tut-m-inv .tut-tx { font-size: 11.5px; }
.tut-m-inv .tut-table td { padding: 4px 5px; }
.tut-m-inv .tut-delta { display: block; font-size: 10.5px; font-weight: 600; }
.tut-m-inv .tut-table td:last-child { white-space: nowrap; text-align: right; }
.tut-phone-screen { scrollbar-width: none; }
.tut-phone-screen::-webkit-scrollbar { display: none; }
.tut-m-inv .tut-foot { margin-top: 2px; }
.tut-phonepanel { margin-top: 10px; padding: 10px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 10px; background: var(--a-surface, #fff); font-size: 12.5px; }
.tut-plist { margin: 0; padding: 0; list-style: none; }
.tut-plist li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tut-left { color: var(--a-accent, #0b7a72); font-weight: 600; }
/* 병원 PC 로그인 */
.tut-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.tut-form label, .tut-grant label, .tut-login label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--a-muted, #56686e); font-weight: 600; }
.tut-form .tut-input { min-width: 190px; color: var(--a-ink, #0f1f26); font-weight: 400; }
.tut-grant { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 10px; background: var(--a-sunken, #edf2f0); position: relative; }
.tut-grant p { margin: 0 0 6px; }
.tut-acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.tut-grant .tut-input { min-width: 170px; color: var(--a-ink, #0f1f26); font-weight: 400; }
.tut-code-row { display: flex; align-items: center; gap: 10px; }
.tut-code { font-family: var(--a-mono, monospace); font-size: 28px; font-weight: 700; letter-spacing: .08em; color: var(--a-ink, #0f1f26); }
.tut-menu { position: absolute; left: 12px; top: 58px; z-index: 3; width: 300px; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--a-line, #d5dfdd); border-radius: 8px; background: var(--a-surface, #fff); box-shadow: 0 10px 24px rgba(15, 31, 38, .18); }
.tut-menu li { padding: 6px 8px; border-radius: 6px; font-weight: 600; }
.tut-menu li small { display: block; font-weight: 400; font-size: 11px; color: var(--a-muted, #56686e); }
.tut-menu li.is-sel { background: var(--a-accent-soft, #dbeeea); }
.tut-policy { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 8px; }
.tut-chk { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; }
.tut-chk::before { content: ''; flex: none; width: 14px; height: 14px; margin-top: 1px; border: 1.5px solid var(--a-line-input, #7c8f8d); border-radius: 3px; }
.tut-chk.is-on::before { content: '✓'; display: grid; place-items: center; background: var(--a-accent, #0b7a72); border-color: var(--a-accent, #0b7a72); color: #fff; font-size: 10px; font-weight: 700; }
.tut-login { width: min(400px, 100%); margin: 6px auto 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 12px; background: var(--a-surface, #fff); }
.tut-login-mark { margin: 0; font-weight: 700; color: var(--a-accent, #0b7a72); }
.tut-login-h { font-size: 16px; }
.tut-login .tut-sub { margin: 0; }
.tut-login .tut-input { width: 100%; color: var(--a-ink, #0f1f26); font-weight: 400; }
.tut-devbox { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--a-order-line, #e6c3a4); border-radius: 10px; background: #fffaf3; }
.tut-devbox.is-go { border-color: var(--a-accent-line, #9ccfc6); background: var(--a-accent-soft, #dbeeea); }
.tut-devbox p { margin: 0; }
.tut-mini-app { display: grid; grid-template-columns: 130px minmax(0, 1fr); min-height: 380px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 10px; overflow: hidden; background: var(--a-surface, #fff); }
.tut-mini-rail { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; background: var(--a-rail, #0f1f26); color: var(--a-rail-ink, #c9d8d6); font-size: 12px; }
.tut-mini-rail b { color: #fff; }
.tut-mini-rail small { margin-top: auto; font-size: 11px; color: var(--a-rail-ink-dim, #9fb6b8); }
.tut-mini-main { padding: 12px; }
@media (max-width: 860px) {
  .tut-app.tut-pair { grid-template-columns: 1fr; }
  .tut-phone { width: 220px; height: 380px; margin: 0 auto; }
  .tut-row2 { grid-template-columns: 1fr; }
  .tut-mini-app { grid-template-columns: 1fr; }
  .tut-mini-rail { flex-direction: row; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .tut-m-st.is-on .tut-dot { animation: none; } }

/* 기능 둘러보기(guide.js, 2026-10-16): 묶음 머리 줄 + 튜토리얼 줄(번호 · 이름과 설명 · 단계 · 보기) 한 표 */
.g-hub { padding-top: 16px; }
.g-table { width: 100%; border-collapse: collapse; }
.g-table thead th { padding: 6px 10px; border-bottom: 1px solid var(--a-line, #d5dfdd); text-align: left; font-size: 12px; font-weight: 600; color: var(--a-muted, #56686e); }
.g-group th { padding: 14px 10px 6px; border-bottom: 2px solid var(--a-ink, #0f1f26); text-align: left; font-size: 15px; font-weight: 700; }
.g-group th span { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--a-muted, #56686e); }
.g-row td { padding: 12px 10px; border-bottom: 1px solid var(--a-line-soft, #e6edeb); vertical-align: top; }
.g-row { cursor: pointer; }
.g-row:hover td { background: var(--a-row-hover, #f3f7f6); }
.g-num { width: 44px; font-family: var(--a-mono, monospace); font-size: 12.5px; color: var(--a-muted, #56686e); }
.g-main { width: 38%; }
.g-main b { font-size: 15px; }
.g-main p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--a-ink-2, #3f5259); word-break: keep-all; }
.g-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: g; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.g-steps li { counter-increment: g; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 999px; font-size: 12px; white-space: nowrap; }
.g-steps li::before { content: counter(g); display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--a-accent-soft, #dbeeea); color: var(--a-accent, #0b7a72); font-size: 10.5px; font-weight: 700; }
.g-act { width: 150px; text-align: right; white-space: nowrap; }
.g-act .a-btn { gap: 6px; }
.g-act small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--a-muted, #56686e); }
@media (max-width: 860px) {
  .g-table thead { display: none; }
  .g-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); }
  .g-row td { border-bottom: 0; padding: 6px 4px; }
  .g-row td.g-steps, .g-row td.g-act { grid-column: 2; }
  .g-row { border-bottom: 1px solid var(--a-line-soft, #e6edeb); padding-bottom: 8px; }
  .g-main, .g-act { width: auto; text-align: left; }
  .g-act small { display: inline; margin-left: 8px; }
}

/* 시작 안내: 기능 묶음 카드(번호 · 이름 · 설명 · 튜토리얼 버튼) */
.g-welcome { width: min(820px, 100%); }
.g-welcome-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; overflow: auto; }
.g-feat { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--a-line, #d5dfdd); border-radius: 12px; }
.g-feat-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--a-accent, #0b7a72); color: #fff; font-family: var(--a-mono, monospace); font-weight: 700; }
.g-feat h3 { margin: 2px 0 4px; font-size: 15px; }
.g-feat p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--a-ink-2, #3f5259); word-break: keep-all; }
.g-feat .g-feat-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.g-welcome-note { margin-right: auto; font-size: 12.5px; color: var(--a-muted, #56686e); }
@media (max-width: 640px) { .g-welcome-note { display: none; } .g-welcome-body { padding: 12px 16px; } }
/* 터치 화면: 튜토리얼 버튼도 44px(다른 버튼과 같은 손가락 크기). 휴대폰 메뉴 줄의 기능 둘러보기는 아이콘만(이름은 title · 화면 읽기) — 메뉴 줄이 한 줄 더 늘지 않게. */
@media (pointer: coarse) { .tut-open { min-height: 44px; padding: 0 14px; } }
@media (max-width: 700px) {
  .a-rail-nav [data-view="guide"] { min-width: 44px; justify-content: center; padding: 0 10px; }
  .a-rail-nav [data-view="guide"] .a-rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .a-rail-nav [data-view="guide"] .a-rail-ico { margin-right: 0; width: 20px; height: 20px; }
}
/* 간호사도 쓰는 기능의 튜토리얼: 뒤의 실제 화면(왼쪽 메뉴 포함)이 비치지 않는 불투명 배경 */
.tut-back.is-cover { background: #16262c; }