/* MediAll 실제 화면 재현용 앱 UI (메디올 사용자 가이드 v1.0 기준)
   고정 설계폭(.app 의 data-w)으로 그린 뒤 .app-fit 이 컨테이너 폭에 맞춰 축소한다. */
.hero-grid>*,.split>*{min-width:0}
.app-fit{min-width:0;max-width:100%;position:relative;overflow:hidden;width:100%;border-radius:10px}
.app-fit>.app{transform-origin:0 0}
.app-fit.shadow{box-shadow:0 30px 70px rgba(20,28,50,.18);border-radius:12px}

.app{--navy:#0b1a3d;--blue:#1a73ff;--line:#e8ebf1;--tx:#20232b;--mut:#8b92a3;
  width:1100px;background:#f4f5f8;color:var(--tx);font:400 12px/1.5 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;text-align:left;letter-spacing:0;word-break:keep-all}
.app *{box-sizing:border-box}
.app a{color:inherit}
.app-nav{height:44px;background:var(--navy);display:flex;align-items:stretch;padding-left:14px}
.app-logo{display:flex;align-items:center;gap:7px;margin-right:20px;font:700 18px/1 "Pretendard Variable",sans-serif;letter-spacing:-.5px;color:#f2b95c}
.app-logo img{height:22px;width:auto}
.app-logo b{color:#fff;font-weight:700}
.app-nav .mn{display:flex;align-items:center;padding:0 14px;color:#dfe5f3;font-size:12.5px;white-space:nowrap}
.app-nav .mn.dd::after{content:"";width:5px;height:5px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);margin-left:7px}
.app-nav .mn.on{background:#fff;color:#111;font-weight:600}
.app-nav .r{margin-left:auto;display:flex;align-items:center;gap:7px;padding-right:14px}
.app-nav .r span{height:24px;padding:0 10px;display:flex;align-items:center;border-radius:4px;font-size:11px}
.app-nav .r .ln{width:26px;padding:0;justify-content:center;background:#ffe9e9;color:#e04747}
.app-nav .r .ln.ok{background:#e4f7e9;color:#2a9d57}
.app-nav .r .me{border:1px solid #a8b2cc;color:#fff}
.app-nav .r .lo{background:#f0b659;color:#3a2a08;font-weight:700}
.app-page{padding:12px 18px 20px}
.app-crumb{font-size:10.5px;color:var(--mut);margin-bottom:2px}
.app-crumb b{color:var(--tx);font-size:14.5px;font-weight:700;margin-left:2px}
.app-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.app-h h4{margin:0;font-size:15px;font-weight:700}
.a-card{background:#fff;border:1px solid #eceef3;border-radius:8px;padding:14px 16px}
.a-card>h5{margin:0 0 12px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px}
.a-card>h5 small{font-weight:400;color:var(--mut);font-size:10px}
.a-card>h5 .ex{margin-left:auto;color:#b4bac8;font-weight:400}
.a-sel{height:28px;min-width:96px;padding:0 24px 0 10px;display:inline-flex;align-items:center;background:#fff;border:1px solid #dfe3eb;border-radius:4px;color:#9aa1b2;font-size:11.5px;position:relative;white-space:nowrap}
.a-sel::after{content:"";position:absolute;right:9px;top:9px;width:5px;height:5px;border-right:1.3px solid #9aa1b2;border-bottom:1.3px solid #9aa1b2;transform:rotate(45deg)}
.a-sel.v{color:var(--tx)}
.a-in{height:28px;min-width:90px;padding:0 10px;display:inline-flex;align-items:center;background:#fff;border:1px solid #dfe3eb;border-radius:4px;color:#9aa1b2;font-size:11.5px;white-space:nowrap}
.a-btn{height:28px;padding:0 12px;display:inline-flex;align-items:center;gap:5px;border-radius:4px;font-size:11.5px;border:1px solid #dfe3eb;background:#fff;color:var(--tx);white-space:nowrap}
.a-btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.a-btn.green{background:#127a3d;border-color:#127a3d;color:#fff}
.a-btn.dk{background:#0b1a3d;border-color:#0b1a3d;color:#fff}
.a-btn.sm{height:24px;padding:0 9px;font-size:11px}
.a-seg{display:inline-flex;border:1px solid #dfe3eb;border-radius:5px;background:#fff;padding:2px;gap:2px}
.a-seg span{padding:3px 10px;font-size:11.5px;border-radius:3px;color:#6d7487}
.a-seg span.on{background:var(--blue);color:#fff;font-weight:600}
.a-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #eceef3;border-radius:8px;padding:10px 12px;margin-bottom:10px}
.a-tools{display:flex;justify-content:flex-end;gap:6px;margin-bottom:8px}

/* 대시보드 */
.a-notice{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #eceef3;border-radius:6px;padding:7px 12px;margin-bottom:10px;font-size:11px;color:#6d7487}
.a-notice i{width:14px;height:14px;border-radius:50%;background:#3a7bf2;color:#fff;font:700 9px/14px sans-serif;text-align:center;font-style:normal}
.a-notice b{color:var(--tx)}
.a-grid{display:grid;gap:10px}
.kpis6{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kp{background:#fff;border:1.5px solid var(--c,#ddd);border-radius:8px;padding:9px 12px 10px}
.kp small{display:block;font-size:10.5px;color:#6d7487;margin-bottom:3px}
.kp b{display:block;font-size:22px;font-weight:700;letter-spacing:-.8px;line-height:1.25}
.kp b em{font-style:normal;font-size:10px;font-weight:400;color:#8b92a3;margin-left:2px}
.kp .tr{display:inline-block;margin-top:5px;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600}
.tr.up{background:#e3f6ea;color:#1c9455}.tr.dn{background:#fde8e8;color:#d93a2f}
.sankey svg{display:block;width:100%;height:auto}
.pie-row{display:flex;align-items:center;gap:20px}
.pie{width:128px;height:128px;border-radius:50%;flex-shrink:0;background:conic-gradient(#e2f5fb 0 19.8%,#86e0f5 19.8% 36.6%,#e2e2e2 36.6% 52.3%,#ffe400 52.3% 65%,#f41919 65% 74.1%,#c7cfe4 74.1% 100%)}
.legend2{flex:1;display:grid;gap:5px;font-size:11px}
.legend2 div{display:flex;align-items:center;gap:7px;color:#4a5163}
.legend2 i{width:8px;height:8px;border-radius:2px}
.legend2 b{margin-left:auto;font-weight:600;color:var(--tx)}
.ring{width:112px;height:112px;border-radius:50%;flex-shrink:0;background:conic-gradient(#1f4c9e 0 62%,#cbd3ec 62% 100%);display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;inset:16px;background:#fff;border-radius:50%}
.ring span{position:relative;text-align:center;font-size:9.5px;color:#8b92a3;line-height:1.3}
.ring span b{display:block;font-size:19px;color:var(--tx);font-weight:700}
.rank{width:100%;border-collapse:collapse;font-size:11px}
.rank th{font-weight:500;color:#7b8294;text-align:right;padding:6px 8px;white-space:nowrap}
.rank th:first-child,.rank th:nth-child(2),.rank td:first-child,.rank td:nth-child(2){text-align:left}
.rank td{padding:7px 8px;text-align:right;border-top:1px solid #f0f1f5;white-space:nowrap}
.rank td.n{color:#a2a8b6;width:30px}
.rank td.bar{width:34%;text-align:left}
.rank td.bar u{display:block;height:7px;border-radius:4px;background:#f0f1f5;text-decoration:none;overflow:hidden}
.rank td.bar u i{display:block;height:100%;background:#c2185b;border-radius:4px}
.rank .rd{background:#fdeaea;color:#e0453a;padding:1px 7px;border-radius:9px;font-size:10px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #eceef3;border-radius:6px;overflow:hidden}
.wk>div{padding:8px 9px;border-right:1px solid #f1f2f6;min-height:96px;font-size:10px;color:#4a5163}
.wk>div:last-child{border:0}
.wk>div.t{background:#eef3ff}
.wk .d{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:5px}
.wk .d small{font-size:9px;color:#9aa1b2;font-weight:400;margin-left:3px}
.wk p{margin:0 0 3px;display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden}
.wk .more{color:#2f6ff0;margin-top:3px}
.tg{display:inline-block;padding:0 4px;border-radius:2px;font-size:9px;line-height:14px;flex-shrink:0}
.tg.v{background:#d6f1de;color:#16793f}.tg.s{background:#dce9ff;color:#2a63d4}.tg.r{background:#dfe8ff;color:#2a63d4}

/* 데이터 테이블 */
.a-tbl{width:100%;border-collapse:collapse;font-size:11px;background:#fff}
.a-tbl th{background:#f7f8fb;font-weight:600;color:#3d4457;padding:8px 6px;text-align:center;border-bottom:1px solid #e7e9ef;white-space:nowrap}
.a-tbl td{padding:8px 6px;text-align:center;border-bottom:1px solid #f0f1f5;color:#3a4152;white-space:nowrap;vertical-align:middle}
.a-tbl td.l{text-align:left;white-space:normal;font-size:10px;line-height:1.5;color:#5b6376}
.a-tbl a.lk{color:#2a6df0}
.mask{display:inline-block;width:46px;height:12px;border-radius:7px;background:#e9ebf0;vertical-align:middle}
.mask.w{width:72px}
.st{display:inline-flex;align-items:center;gap:5px}
.st::before{content:"";width:6px;height:11px;border-radius:2px;background:var(--c)}
.dup{color:#e0332a;font-weight:600}
.memo{display:inline-block;background:#f1f2f6;color:#8b92a3;border-radius:3px;padding:0 4px;margin-right:4px;font-size:9px}
.pager{display:flex;align-items:center;justify-content:space-between;padding:12px 4px 0;font-size:11px;color:#6d7487}
.pager .pg{display:flex;align-items:center;gap:5px}
.pager .pg i{font-style:normal;min-width:24px;height:24px;border:1px solid #dfe3eb;border-radius:4px;display:grid;place-items:center;background:#fff;font-size:11px}
.pager .pg i.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* 일정표 */
.cal2{display:grid;grid-template-columns:repeat(7,1fr);background:#fff;border:1px solid #eceef3;border-radius:8px;overflow:hidden}
.cal2 .h{text-align:center;color:#9aa1b2;font-size:11px;padding:10px 0;border-bottom:1px solid #f0f1f5}
.cal2>div:not(.h){min-height:104px;padding:7px 8px;font-size:10px;border-bottom:1px solid #f4f5f8;border-right:1px solid #f4f5f8;color:#4a5163}
.cal2>div:not(.h) .dn{display:block;color:#7b8294;font-size:11px;margin-bottom:3px}
.cal2 p{margin:0 0 2px;white-space:nowrap;overflow:hidden;display:flex;gap:3px;align-items:center}
.cal2 .tg.v{background:#2fa84f;color:#fff}.cal2 .tg.s{background:#1f7cf0;color:#fff}
.cal2 .more{color:#7b8294}
.cal-nav{text-align:center;font-size:17px;font-weight:700;padding:12px 0 8px;background:#fff;border:1px solid #eceef3;border-bottom:0;border-radius:8px 8px 0 0}
.cal-nav i{font-style:normal;color:#9aa1b2;margin:0 18px}

/* 고객 상세 팝업 */
.modal{background:#fff;border:1px solid #e3e6ee;border-radius:10px;box-shadow:0 24px 60px rgba(25,32,56,.2);padding:20px 22px}
.modal h3{margin:0;font-size:20px;font-weight:700}
.modal .nm{display:flex;align-items:center;gap:8px;margin:8px 0 12px;font-size:20px;font-weight:700}
.modal .nm small{font-size:11px;font-weight:400;color:#7b8294}
.modal .nm em{font-style:normal;color:#1f6fe5;font-size:17px;margin-left:4px}
.mrow{display:grid;gap:8px;margin-bottom:8px}
.mrow.c4{grid-template-columns:repeat(4,1fr)}.mrow.c3{grid-template-columns:repeat(3,1fr)}.mrow.c2{grid-template-columns:1fr 1fr}
.mf label{display:block;font-size:10px;color:#7b8294;margin-bottom:3px}
.mf .a-sel,.mf .a-in{width:100%;min-width:0}
.ta{border:1px solid #dfe3eb;border-radius:4px;padding:8px 10px;color:#9aa1b2;font-size:11px;min-height:54px}
.hist{border:1px solid #eceef3;border-radius:6px;padding:8px 10px;font-size:10.5px;color:#4a5163;line-height:1.6;background:#fffdf3}
.hist .row{display:flex;gap:8px;padding:6px 8px;border-radius:5px;margin-bottom:5px;background:#fff7d6;border:1px solid #f6e7a6}
.hist .row.g{background:#eef8f0;border-color:#cfe8d5}
.hist .row .tm{color:#8b92a3;flex-shrink:0;font-size:10px}
.chip3{display:inline-block;padding:0 6px;border-radius:3px;font-size:9.5px;line-height:15px;font-weight:600}
.chip3.g{background:#d9f3e1;color:#1c7c43}.chip3.r{background:#fde8e8;color:#d93a2f}

/* 알림톡 */
.alim{display:flex;gap:14px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.kb{width:236px;background:#b9cbe0;border-radius:14px;padding:12px 10px 14px;position:relative}
.kb .lab{font-size:10px;color:#566f8c;margin-bottom:7px;font-weight:600;text-align:center}
.kb .msg{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(40,60,90,.12);font-size:11px;line-height:1.55;color:#2c3340}
.kb .msg .tt{background:#fee500;padding:7px 10px;font-weight:700;display:flex;justify-content:space-between;align-items:center;color:#2b2200}
.kb .msg .tt i{font-style:normal;background:#2b2200;color:#fee500;border-radius:10px;font-size:8.5px;padding:0 6px;line-height:15px}
.kb .msg .bd{padding:9px 11px 10px}
.kb .msg .bd .ph2{display:inline-block;height:11px;width:76px;border-radius:6px;background:#e7e9ee;vertical-align:middle}
.kb .msg .bd .ck{display:block}
.kb .msg .btn2{margin:0 10px 10px;display:block;text-align:center;background:#fee500;border-radius:4px;padding:6px;font-weight:600;font-size:11px;color:#2b2200}
.kb .msg ul{margin:5px 0 0;padding:0;list-style:none;font-size:10.5px;color:#4a5163}
.vars{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vars i{font-style:normal;background:#eef3ff;color:#2a63d4;border-radius:4px;padding:2px 7px;font-size:11px;font-weight:600}

/* 직원성과/통계 */
.num-hl{color:#2a63d4;font-weight:600}
.tabs2{display:flex;gap:18px;border-bottom:1px solid #e7e9ef;margin-bottom:10px;padding:0 4px}
.tabs2 span{padding:7px 2px;font-size:11.5px;color:#7b8294}
.tabs2 span.on{color:#1a73ff;font-weight:700;border-bottom:2px solid #1a73ff}
.chipbar{display:flex;gap:4px;margin-right:6px}
.chipbar span{padding:3px 8px;border:1px solid #dfe3eb;border-radius:3px;font-size:10.5px;background:#fff;color:#6d7487}
.chipbar span.on{background:#1a73ff;border-color:#1a73ff;color:#fff}

/* 로그인 */
.login-bg{background:linear-gradient(120deg,#b9a6cf,#d7b6d1 35%,#bfd3ee 70%,#e3ebf8);border-radius:12px;padding:34px 50px;display:grid;place-items:center;position:relative}
.login-card{width:240px;background:#fff;padding:22px 20px 20px;box-shadow:0 12px 30px rgba(60,40,90,.15);text-align:center;font-size:12px}
.login-card h6{margin:0 0 14px;font-size:14px;font-weight:600;color:#2b3040}
.login-card .fi{height:26px;border-radius:3px;background:#e7effc;margin-bottom:6px;text-align:left;padding:0 8px;line-height:26px;font-size:10.5px;color:#4a5163}
.login-card .go{height:28px;background:#1a73ff;color:#fff;border-radius:4px;line-height:28px;margin:12px 0;font-size:11px}
.login-card .or{display:flex;align-items:center;gap:8px;font-size:9.5px;color:#9aa1b2;margin-bottom:10px}
.login-card .or::before,.login-card .or::after{content:"";height:1px;background:#e6e8ee;flex:1}
.login-card .sns{display:flex;justify-content:center;gap:16px;font-size:9.5px;color:#7b8294}
.login-card .sns span{display:block}
.login-card .sns i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;margin:0 auto 3px;font:700 15px/1 sans-serif;font-style:normal;color:#fff}
.sns .g{background:#fff;color:#4285f4!important;border:1px solid #e3e6ee}.sns .n{background:#03c75a}
.otp{width:300px;background:#fff;border-radius:8px;box-shadow:0 18px 44px rgba(30,35,60,.28);padding:14px 16px;font-size:10.5px;color:#3d4457;line-height:1.55;text-align:left}
.otp b{display:block;font-size:12px;margin-bottom:6px;color:#20232b}
.otp .ro{display:flex;align-items:center;gap:6px;margin:6px 0}
.otp .ro i{width:10px;height:10px;border-radius:50%;border:3px solid #1a73ff;display:inline-block;flex-shrink:0}
.otp .ro i.o{border:1px solid #c5cad6}
.otp .rw{display:flex;gap:6px;margin-top:8px}
.otp .rw span{flex:1;height:26px;border:1px solid #dfe3eb;border-radius:4px;color:#9aa1b2;line-height:24px;padding:0 8px;font-size:10px}
.otp .rw em{font-style:normal;background:#1a73ff;color:#fff;border-radius:4px;padding:0 10px;line-height:26px;font-size:10px;font-weight:600}
.login-stage{position:relative;max-width:560px;margin:0 auto}
.login-stage .otp{position:absolute;right:-24px;bottom:-26px}

/* 앱 상단 메뉴 활성 표시 (.app[data-on]) */
.app[data-on="dash"] [data-k="dash"],.app[data-on="cs"] [data-k="cs"],.app[data-on="stat"] [data-k="stat"],.app[data-on="sys"] [data-k="sys"]{background:#fff;color:#111;font-weight:600}

@media(min-width:901px){.hero-grid.crm-hero{grid-template-columns:.86fr 1.14fr}}
.app-fit{-webkit-overflow-scrolling:touch}
@media(max-width:600px){.app-fit.scroll{box-shadow:inset 0 0 0 1px #e6e8ee}.app-fit.scroll::after{content:none}}
.app-hint{display:none;font-size:12px;color:var(--muted,#77716a);text-align:center;margin-top:8px}
@media(max-width:600px){.app-hint{display:block}}