.demo-section{padding-block:40px}.demo-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:center;gap:40px 56px;display:grid}.demo-copy .section-head{text-align:left;max-width:none;margin:0 0 16px}.demo-copy .section-head h2{justify-content:flex-start}.demo-copy .lead{max-width:28em;margin:0}.demo-flow{margin-top:18px}.demo-flow+.demo-note{margin-top:14px}.demo-stage{max-width:360px;margin:0}.demo-phone{width:100%;max-width:360px;box-shadow:var(--shadow-lift);background:#2c2420;border:8px solid #2c2420;border-radius:34px;margin:0;position:relative;overflow:hidden}.demo-screen{--dp:#10b981;--dp-dark:#059669;--dp-light:#ecfdf5;--dtext:#0f172a;--dmuted:#64748b;--dborder:#e2e8f0;height:560px;color:var(--dtext);text-align:left;background:radial-gradient(circle at 10% 20%,#f0fdf480 0%,#f8fafc 90%);padding:0 14px 20px;font-size:14px;line-height:1.6;overflow-y:auto}.demo-note{text-align:left;color:var(--text-muted);margin:0;font-size:13px}@media (width<=900px){.demo-layout{grid-template-columns:minmax(0,1fr);gap:24px}.demo-stage{margin:0 auto}}.demo-tabs{justify-content:center;gap:8px;margin-bottom:16px;display:flex}.demo-tab{border:1px solid var(--border);font-family:var(--font-heading);color:var(--text-muted);cursor:pointer;background:#fff;border-radius:999px;padding:8px 20px;font-size:13px;font-weight:700}.demo-tab.is-on{background:var(--primary);border-color:var(--primary);color:#fff}.demo-screen-biz{--bg:#3f6b52;--bg-dark:#2f5340;--bmuted:#7b857e;--bborder:#e2e8e3;background:radial-gradient(circle at 10% 20%,#e7f0ea99 0%,#f4f6f4 90%);padding:0 0 20px}.b-bar{font-family:var(--font-heading);background:#f4f6f4cc;border-bottom:1px solid #e2e8e399;align-items:center;gap:8px;margin-bottom:16px;padding:15px 16px;font-size:15px;font-weight:700;display:flex}.b-bar i{background:var(--bg);width:10px;height:10px;box-shadow:0 0 8px var(--bg);border-radius:50%;flex-shrink:0;animation:2s infinite b-pulse}@keyframes b-pulse{0%,to{opacity:1}50%{opacity:.45}}.b-pane{padding:0 16px;display:none}.b-pane.is-active{display:block}.b-name{font-family:var(--font-heading);color:var(--bg-dark);border:none;margin:0 0 12px;padding:0;font-size:17px;font-weight:700}.b-card{border:1px solid var(--bborder);background:#fff;border-radius:16px;margin-bottom:14px;padding:18px 16px;box-shadow:0 10px 30px -10px #0000000d,0 1px 3px #00000005}.b-clock{text-align:center;margin-bottom:12px}.b-date{color:var(--bmuted);font-size:12px}.b-time{font-family:var(--font-heading);color:var(--bg-dark);letter-spacing:-.02em;font-size:34px;font-weight:700;line-height:1.2}.b-status{align-items:center;gap:6px;margin-bottom:12px;font-size:14px;display:flex}.b-dot{background:#22c55e;border-radius:50%;flex-shrink:0;width:10px;height:10px}.b-btn{background:var(--bg);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;padding:13px;font-family:inherit;font-size:16px;font-weight:700}.b-btn:hover{background:var(--bg-dark)}.b-btn:disabled{opacity:.5;cursor:default}.b-btn:disabled:hover{background:var(--bg)}.b-btn-out{background:#b4524a}.b-btn-out:hover{background:#93423b}.b-btn-out:disabled:hover{background:#b4524a}.b-btn-ghost{width:100%;color:var(--bmuted);border:1px solid var(--bborder);cursor:pointer;background:0 0;border-radius:12px;margin-top:10px;padding:13px;font-family:inherit;font-size:16px;font-weight:700}.b-done{text-align:center;padding:22px 16px}.b-check{background:linear-gradient(135deg, var(--bg), var(--bg-dark));border-radius:50%;width:56px;height:56px;margin:0 auto 4px;position:relative;box-shadow:0 6px 16px #3f6b5259}.b-check:after{content:"";border:4px solid #fff;border-width:0 4px 4px 0;border-radius:2px;width:14px;height:24px;position:absolute;top:14px;left:20px;transform:rotate(45deg)}.b-done h3{font-family:var(--font-heading);color:var(--bg-dark);border:none;margin:8px 0;padding:0;font-size:20px;font-weight:700}.b-done-time{font-family:var(--font-heading);color:var(--bg-dark);font-variant-numeric:tabular-nums;margin:4px 0 10px;font-size:32px;font-weight:700}.b-done .b-today{margin-top:0;margin-bottom:16px}.b-done .b-undo{margin-top:14px}.b-today{color:var(--bmuted);margin-top:10px;font-size:12px}.b-mypage-note{color:var(--bmuted);margin:0 0 14px;font-size:13px;line-height:1.7}.b-mypage-note b{color:var(--bg-dark)}.b-undo{color:#dc2626;cursor:pointer;background:0 0;border:none;width:100%;margin-top:12px;padding:0;font-family:inherit;font-size:12px;display:block}.b-sub{font-family:var(--font-heading);color:var(--bg-dark);border:none;margin:0 0 8px;padding:0;font-size:15px}.b-notice{border-top:1px solid var(--bborder);padding:8px 0;font-size:13px}.b-notice b{display:block}.b-notice em{color:var(--bmuted);font-size:11px;font-style:normal}.demo-screen [hidden]{display:none!important}.b-shift-head{font-family:var(--font-heading);color:var(--bg-dark);font-size:15px;font-weight:700}.b-shift-sub{color:var(--bmuted);margin-bottom:8px;font-size:12px}.b-shift-legend{color:var(--bmuted);margin-bottom:12px;font-size:11px;line-height:1.6}.b-bulk{gap:6px;margin-bottom:12px;display:flex}.b-bulk button{border:1px solid var(--bborder);color:var(--bmuted);cursor:pointer;background:#fafcfa;border-radius:8px;padding:6px 10px;font-family:inherit;font-size:12px}.b-row{border-top:1px solid var(--bborder);justify-content:space-between;align-items:center;gap:8px;padding:9px 0;font-size:13px;display:flex}.b-seg{flex-shrink:0;gap:5px;display:flex}.b-seg button{border:1px solid var(--bborder);width:40px;color:var(--bmuted);cursor:pointer;background:#fafcfa;border-radius:8px;padding:7px 0;font-family:inherit;font-size:15px;font-weight:700}.b-seg button.is-on-ok{background:var(--bg);border-color:var(--bg);color:#fff}.b-seg button.is-on-ng{color:#fff;background:#c0504d;border-color:#c0504d}.b-seg button.is-on-part{color:#fff;background:#d97706;border-color:#d97706}.b-times{align-items:center;gap:6px;margin:6px 0 4px;display:flex}.b-times input{border:1px solid var(--bborder);border-radius:6px;flex:1;min-width:0;padding:6px;font-family:inherit;font-size:12px}.b-times span{color:var(--bmuted);flex-shrink:0}.b-submitted{color:var(--bg-dark);background:#ecfdf5;border-radius:8px;margin-top:12px;padding:10px 12px;font-size:12px}@media (width<=480px){.demo-screen{height:520px}}.demo-phone .demo-screen.demo-app.is-active{display:flex}.demo-app{flex-direction:column;padding:0;overflow:hidden}.d-liffbar{border-bottom:1px solid var(--dborder);height:44px;font-family:var(--font-heading);color:var(--dtext);background:#fff;flex-shrink:0;align-items:center;gap:2px;padding:0 6px;font-size:14px;font-weight:700;display:flex}.d-liffbar-close{width:44px;height:44px;color:var(--dmuted);cursor:pointer;background:0 0;border:none;font-size:16px}.d-frame{background:#f8fafc;border:0;flex:1;width:100%;min-height:0}.demo-phone .demo-screen{display:none}.demo-phone .demo-screen.is-active,.demo-phone>.demo-screen:only-child{display:block}.l-talk{background:#8cabd8;flex-direction:column;padding:0;display:none;overflow:hidden}.demo-phone .demo-screen.l-talk.is-active{display:flex}.l-bar{height:48px;font-family:var(--font-heading);color:#111;background:#fff;border-bottom:1px solid #e6e8eb;flex-shrink:0;align-items:center;gap:4px;padding:0 10px 0 6px;display:flex}.l-ic{color:#111;flex-shrink:0;width:22px;height:22px}.l-bar .l-ic+.l-bar-name{margin-left:2px}.l-bar-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:15px;font-weight:700;overflow:hidden}.l-badge{flex-shrink:0;width:15px;height:15px}.l-bar-spacer{flex:1}.l-bar .l-ic:nth-of-type(n+3){margin-left:8px}.l-chatbar{color:#555;background:#fff;border-top:1px solid #e6e8eb;flex-shrink:0;align-items:center;height:40px;padding:0 10px;display:flex}.l-chatbar .l-ic{color:#555}.l-chatbar-label{text-align:center;font-family:var(--font-heading);color:#333;flex:1;padding-right:22px;font-size:13px;font-weight:700}.l-chatbar-label i{color:#777;font-size:11px;font-style:normal}.l-body{flex:1;min-height:0;padding:14px 12px;overflow-y:auto}.l-day{color:#fff;background:#00000040;border-radius:999px;width:fit-content;margin:0 auto 14px;padding:3px 12px;font-size:11px}.l-row{align-items:flex-start;gap:8px;margin-bottom:12px;display:flex}.l-ico{background:#fff url(/logo-mark.png) 50%/30px no-repeat;border-radius:50%;flex-shrink:0;width:34px;height:34px}.l-msg{min-width:0;max-width:80%}.l-name{color:#141e32b8;margin:0 0 3px 2px;font-size:11px;display:block}.l-bubble{color:#2c2420;background:#fff;border-radius:4px 18px 18px;padding:10px 13px;font-size:13px;line-height:1.7}.l-bubble b{color:var(--primary-hover)}.l-time{color:#141e329e;flex-shrink:0;align-self:flex-end;font-size:10px;font-style:normal}.l-menu{background:#f3f4f6;border-top:1px solid #00000014;flex-shrink:0;margin-top:auto;padding:8px}.l-menu-btn{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);color:#fff;width:100%;font-family:var(--font-heading);cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:18px;font-size:16px;font-weight:700;display:flex}.l-menu-btn:active{transform:scale(.99)}.l-menu-ico{font-size:18px}.l-menu.l-menu-rich{background:#fff;border-top:none;padding:0}.l-rich{line-height:0;position:relative}.l-rich img{width:100%;height:auto;display:block}.l-rich-hit{cursor:pointer;background:0 0;border:none;width:50%;padding:0;position:absolute;top:0;bottom:0}.l-rich-left{left:0}.l-rich-right{right:0}.l-rich-hit:active{background:#0000001f}.l-menu-rich .l-tap-hint{background:#fff;padding:6px 0 8px}.l-tap-hint{text-align:center;color:var(--text-muted);padding-top:7px;font-size:11px}.d-close{color:var(--dmuted);cursor:pointer;background:0 0;border:none;padding:0 8px 0 0;font-size:15px;line-height:1}.l-menu-grid{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.l-menu-grid .l-tap-hint{grid-column:1/-1}.l-menu-sm{border-radius:8px;flex-direction:column;gap:2px;padding:10px 4px;font-size:11px}.l-menu-sm .l-menu-ico{font-size:16px}.b-back{width:100%;color:var(--bmuted);cursor:pointer;background:0 0;border:none;margin-top:4px;padding:10px;font-family:inherit;font-size:13px;display:block}.b-field{margin-bottom:14px;display:block}.b-field>span{color:var(--bmuted);margin-bottom:6px;font-size:13px;display:block}.b-field input,.b-field select{border:1px solid var(--bborder);width:100%;color:inherit;background:#fafcfa;border-radius:12px;padding:11px 12px;font-family:inherit;font-size:14px}.b-field em{color:var(--bmuted);margin-top:3px;font-size:12px;font-style:normal;display:block}.b-file{border:1px solid var(--bborder);color:var(--bmuted);background:#fafcfa;border-radius:12px;padding:10px 12px;font-size:13px}.b-hist{border-bottom:1px solid var(--bborder);padding:9px 0;font-size:13px}.b-hist:last-child{border-bottom:none}.b-stat{font-size:12px;font-weight:600}.b-stat.is-ok{color:var(--bg-dark)}.b-stat.is-wait{color:#9a7b00}.b-hist em{color:var(--bmuted);font-size:12px;font-style:normal}.b-hist-detail{color:var(--bmuted);margin-top:2px;font-size:12px}.b-ntc-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;display:flex}.b-reload{border:1px solid var(--bborder);color:var(--bg-dark);cursor:pointer;background:0 0;border-radius:8px;padding:5px 12px;font-family:inherit;font-size:12px}.b-ntc{border-bottom:1px solid var(--bborder);cursor:pointer;padding:12px 0}.b-ntc:last-child{border-bottom:none}.b-ntc-row{align-items:center;gap:8px;display:flex}.b-badge{color:#9a5b00;background:#fde9c8;border-radius:99px;flex-shrink:0;padding:2px 9px;font-size:11px;font-weight:600}.b-badge.is-read{color:var(--bmuted);background:#eef1ef}.b-ntc-title{flex:1;min-width:0;font-size:14px;font-weight:700}.b-ntc-meta{color:var(--bmuted);margin-top:4px;font-size:12px}.b-ntc-body{margin-top:8px;font-size:13px;line-height:1.7}