/* 페르소나 · 앱 카탈로그 · 메신저 · 인사·근태 */

/* 브랜드 · Playce Workspace powered by EOP */
.brand-mark{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;padding:0}
.brand>span.brand-name,.login-brand>span.brand-name{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;margin:0;padding:0;border:0;letter-spacing:0;color:#2f4567;text-align:left}
.brand-name strong{font-size:15px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.brand-name small{font-size:8px;font-weight:500;letter-spacing:.6px;color:#8a97ab;margin-top:2px}
.login-brand>span.brand-name{font-size:19px;font-weight:700;letter-spacing:-.3px}
.login-brand .brand-name small{font-size:9px}
.central-orb{font-size:54px;font-weight:500}
@media(max-width:740px){.brand-name strong{font-size:13px}
.brand-name small{font-size:7px}
}
.avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--c);color:#fff;font-size:12px;font-weight:600;flex-shrink:0;box-shadow:inset 0 1px 2px #ffffff55}
.avatar.xs{width:18px;height:18px;border-radius:6px;font-size:8px}
.avatar.sm{width:24px;height:24px;border-radius:8px;font-size:10px}
.avatar.lg{width:38px;height:38px;border-radius:12px;font-size:14px}
.avatar.xl{width:54px;height:54px;border-radius:17px;font-size:21px}

/* 로그인 · 페르소나 선택 */
.login-card p{margin-bottom:18px}
.persona-picker{display:grid;gap:8px}
.login-card .persona-option{display:flex;gap:11px;align-items:flex-start;margin:0;padding:11px 12px;border-radius:14px;border:1px solid #ffffffc0;background:#ffffff4d;cursor:pointer;position:relative;font-size:inherit;color:inherit;transition:background .18s,box-shadow .18s,border-color .18s}
.login-card .persona-option:hover{background:#ffffff90}
.persona-option input{position:absolute;opacity:0;pointer-events:none}
.persona-option:has(input:checked){background:#fff;border-color:#9db6d6;box-shadow:0 0 0 2px #c9d8ec,0 6px 18px #5d72901a}
.persona-option:has(input:focus-visible){outline:3px solid #447eea;outline-offset:2px}
.persona-text{min-width:0}
.persona-text strong{display:block;font-size:12.5px;font-weight:600;color:#3d5170}
.persona-text strong small{font-size:10px;font-weight:400;color:#7d8ca3;margin-left:6px}
.persona-text em{display:block;font-style:normal;font-size:9px;color:#8e9cb1;margin-top:3px}
.persona-text>span{display:block;font-size:9.5px;color:#6f7f98;line-height:1.65;margin-top:5px}
.login-submit{margin-top:18px}

/* 페르소나 카드 */
.persona-head{display:flex;gap:14px;align-items:center}
.persona-head h3{font-size:19px;font-weight:600;letter-spacing:-.5px;color:#33496b}
.overlay-card .persona-head p{margin:2px 0 7px;font-size:10.5px}
.overlay-card .persona-summary{margin-top:14px;font-size:11.5px;color:#506584;line-height:1.85}
.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.persona-grid>div{border:1px solid #e0e7f0;border-radius:12px;background:#ffffffa0;padding:12px 13px}
.persona-grid h4,.persona-sub{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:#6d7f99;margin:0 0 6px}
.persona-grid .ico,.persona-sub .ico{width:13px;color:#8aa0bb}
.persona-grid ul{margin:0;padding-left:16px;font-size:10px;line-height:1.85;color:#5d7090}
.persona-sub{margin-top:16px}
.overlay-card .persona-day{font-size:10.5px}
.persona-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.persona-apps button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:10px;font-size:9px;color:#5d6b83}
.persona-apps button:hover{background:#ffffffb0}
.persona-apps .app-icon,.search-result .app-icon{width:38px;height:38px;border-radius:12px}
.persona-apps .app-icon .ico{width:20px;height:20px}
.persona-apps .app-icon:after{border-radius:9px}
.notice-sub{font-size:9px;font-weight:600;color:#8a99af;margin:14px 0 4px;letter-spacing:.3px}
.search-result strong em{display:block;font-style:normal;font-size:9px;font-weight:400;color:#97a5b8;margin-top:3px}

/* 바탕화면 · 전체 앱 */
.app-grid.all{grid-template-columns:repeat(10,minmax(0,1fr));gap:0 4px;padding-top:8px}
.app-grid.all .app-tile{gap:7px;padding:6px 2px}
.app-grid.all .app-icon{width:50px;height:50px;border-radius:15px}
.app-grid.all .app-icon:after{border-radius:12px}
.app-grid.all .app-icon .ico{width:25px;height:25px}
.app-grid.all .app-tile strong{font-size:9.5px}
.app-grid.all .app-tile small{display:none}
.app-cat{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;padding:14px 6px 6px;margin-top:4px;border-top:1px solid #ffffff80}
.app-cat:first-child{border-top:0;margin-top:0;padding-top:2px}
.app-cat strong{font-size:11px;font-weight:600;color:#5b6d8c}
.app-cat span{font-size:9px;color:#93a1b6}
.app-cat em{margin-left:auto;font-style:normal;font-size:9px;color:#7d8ca3}
.app-cat em i,.app-tile.mine strong:before{display:inline-block;width:5px;height:5px;border-radius:50%;background:#6eaa9e;margin-right:4px;vertical-align:1.5px}
.app-tile.mine strong:before{content:''}
.app-badge{min-width:18px;width:auto;padding:0 4px}
.dock-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#db8e82;color:#fff;font-size:9px;font-weight:600;display:grid;place-items:center;border:2px solid #eef2fa;pointer-events:none}
.data-table tr[data-gen-row]{cursor:pointer}
.data-table tr[data-gen-row]:hover{background:#f0f4fb}
.data-table td .kb-chip{font-size:8.5px}
@media(max-width:1250px){.app-grid.all{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:740px){.app-grid.all{grid-template-columns:repeat(4,minmax(0,1fr))}
.persona-grid{grid-template-columns:1fr}
}

/* 메신저 */
.app-window.flush .window-content{overflow:hidden}
.msg{display:grid;grid-template-columns:252px minmax(0,1fr);height:100%}
.msg-side{border-right:1px solid #e1e8f1;background:#eef3f8b0;display:flex;flex-direction:column;min-height:0;overflow:auto;padding:14px 10px;scrollbar-width:thin}
.msg-me{display:flex;gap:9px;align-items:center;padding:2px 6px 12px}
.msg-me strong{display:block;font-size:11px;color:#3f5577}
.msg-me small{display:flex;align-items:center;gap:5px;font-size:8.5px;color:#8e9cb1;margin-top:3px}
.msg-me .presence{position:static;width:6px;height:6px;border:0}
.msg-search{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #dfe6ef;border-radius:9px;padding:0 9px;margin:0 2px 6px;color:#9eabbe}
.msg-search .ico{width:13px}
.msg-search input{border:0;outline:none;background:none;font-size:10px;height:30px;flex:1;min-width:0;color:#4f6584}
.msg-group{font-size:8px;letter-spacing:.8px;color:#9eabbe;padding:10px 8px 4px}
.msg-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px;border-radius:10px}
.msg-item:hover{background:#ffffffb0}
.msg-item.active{background:#fff;box-shadow:0 1px 4px #5d72901a}
.msg-item-text{flex:1;min-width:0}
.msg-item-text strong{display:block;font-size:10.5px;font-weight:500;color:#465c7d}
.msg-item.unread .msg-item-text strong{font-weight:700;color:#2f4567}
.msg-item-text small{display:block;font-size:8.5px;color:#97a5b8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.msg-item-meta time{font-size:7.5px;color:#a7b2c3}
.msg-item-meta b{min-width:16px;height:16px;border-radius:8px;background:#db8e82;color:#fff;font-size:8px;display:grid;place-items:center;padding:0 4px}
.msg-hash{width:30px;height:30px;border-radius:10px;background:#e3eaf4;color:#6d82a0;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
.msg-hash.sm{width:24px;height:24px;border-radius:8px;font-size:11px}
.msg-av{position:relative;flex-shrink:0;display:inline-flex}
.presence{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;border:2px solid #f4f7fb;background:#a7b2c3}
.presence.online{background:#6eaa8e}
.presence.meeting{background:#9585b8}
.presence.away{background:#d9b26f}
.msg-main{display:flex;flex-direction:column;min-height:0;min-width:0;background:#fbfcfe}
.msg-head{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #e3e9f2;background:#fff}
.msg-head strong{display:block;font-size:12px;color:#3f5577}
.msg-head small{display:block;font-size:8.5px;color:#93a1b6;margin-top:3px}
.msg-head-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.msg-head-actions .secondary{display:flex;align-items:center;gap:5px}
.msg-head-actions .ico{width:15px}
.msg-pins{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:7px 16px;border-bottom:1px solid #eef2f7;background:#f7f9fc;font-size:8.5px;color:#93a1b6}
.msg-pins>.ico{width:12px}
.msg-list{flex:1;overflow:auto;padding:14px 18px 8px;min-height:0;scrollbar-width:thin}
.msg-day{text-align:center;margin:0 0 6px}
.msg-day span{font-size:8px;color:#a3afc1;background:#eef2f8;padding:3px 9px;border-radius:10px}
.msg-row{display:flex;gap:9px;margin-top:12px;align-items:flex-start;animation:kb-rise .25s ease-out}
.msg-row.cont{margin-top:4px}
.msg-av-space{width:30px;flex-shrink:0}
.msg-bubble-wrap{max-width:72%;min-width:0}
.msg-name{font-size:9.5px;font-weight:600;color:#566c8b;margin-bottom:4px}
.msg-name small{font-weight:400;color:#a1adbf;margin-left:5px;font-size:8px}
.msg-bubble{display:inline-block;font-size:11px;line-height:1.75;color:#4a5f7f;background:#fff;border:1px solid #e3e9f1;border-radius:4px 13px 13px 13px;padding:8px 12px;text-align:left;overflow-wrap:anywhere}
.msg-row time{display:block;font-size:7.5px;color:#a7b2c3;margin-top:3px}
.msg-row.own{justify-content:flex-end}
.msg-row.own .msg-bubble-wrap{text-align:right}
.msg-row.own .msg-bubble{background:#5d7fb1;border-color:#5d7fb1;color:#fff;border-radius:13px 4px 13px 13px}
.msg-row.own .kb-chip{background:#fffffff0}
.msg-typing{display:flex;align-items:center;gap:6px;padding:2px 18px 6px;font-size:8.5px;color:#93a1b6}
.msg-dots i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#9eabbe;margin:0 1px;animation:msg-dot 1s infinite}
.msg-dots i:nth-child(2){animation-delay:.15s}
.msg-dots i:nth-child(3){animation-delay:.3s}
@keyframes msg-dot{50%{transform:translateY(-3px);opacity:.5}}
.msg-compose{position:relative;display:flex;align-items:center;gap:8px;margin:6px 14px 14px;padding:5px 5px 5px 6px;border:1px solid #d9e3ee;border-radius:13px;background:#fff;box-shadow:0 2px 8px #62789410}
.msg-compose input{flex:1;min-width:0;border:0;outline:none;font-size:11px;color:#4f6584;height:30px;background:none}
.msg-compose .primary{width:32px;height:32px;padding:0;display:grid;place-items:center}
.msg-tool{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#7d8ea8;background:#eef3f9}
.msg-tool .ico{width:15px}
.msg-objects{position:absolute;left:0;bottom:calc(100% + 6px);display:flex;flex-wrap:wrap;align-items:center;gap:5px;background:#fff;border:1px solid #dfe6ef;border-radius:11px;padding:9px 10px;box-shadow:0 10px 30px #5a709430;z-index:2}
.msg-objects>span{font-size:8px;color:#9eabbe;margin-right:3px}
.msg-readonly{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 14px 14px;padding:11px;border-radius:12px;background:#eef2f8;font-size:9px;color:#8e9cb1}
.msg-readonly .ico{width:13px}

/* 인사·근태 */
.hr-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:15px;align-items:start}
.hr-fields{padding:16px;display:grid;gap:13px}
.hr-fields label{display:grid;gap:6px;font-size:9px;color:#8a99af}
.hr-fields input,.hr-fields select{height:36px;border:1px solid #d9e3ee;border-radius:9px;background:#fff;padding:0 11px;font-size:11px;color:#4f6584;outline:none;width:100%}
.hr-fields input:focus,.hr-fields select:focus{border-color:#9db6d6}
.hr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hr-line{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:#f3f6fb}
.hr-line>span{font-size:9px;color:#8a99af;white-space:nowrap}
.hr-line>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hr-line small{font-size:8.5px;color:#5d7392;line-height:1.4}
.hr-line i{font-style:normal;color:#b0bccd;margin:0 2px}
.hr-submit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid #e6ebf3;background:#f8fafd}
.hr-submit span{font-size:10px;color:#5d7392}
.hr-submit strong{color:#3f5577}
.hr-submit .primary{display:flex;align-items:center;gap:5px}
.hr-side{display:flex;flex-direction:column;gap:12px}
.hr-check h4{margin-bottom:2px}
.hr-checks{list-style:none;padding:0;margin:6px 0 0}
.hr-checks li{display:flex;gap:7px;align-items:flex-start;padding:7px 0;border-top:1px dashed #dcdcef;font-size:9.5px;line-height:1.75;color:#6f7896}
.hr-checks li:first-child{border-top:0}
.hr-checks li>.ico{width:13px;flex-shrink:0;margin-top:3px}
.hr-checks .ok>.ico{color:#5f9580}
.hr-checks .warn>.ico{color:#c4964f}
.hr-checks .kb-mini{margin-left:3px}
.hr-mini{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-top:1px solid #edf1f6;font-size:10px}
.hr-mini:first-of-type{border-top:0}
.hr-mini strong{font-weight:500;color:#566c8b}
.hr-reqs{display:flex;flex-direction:column;gap:10px}
.hr-req{border:1px solid #e0e7f0;border-radius:12px;background:#fff9;padding:14px 16px;animation:kb-rise .3s ease-out}
.hr-req.pending{border-color:#ead9b4;background:#fffcf3}
.hr-req-top{display:flex;align-items:center;gap:10px}
.hr-req-top>.ico{width:18px;color:#8aa0bb}
.hr-req-top>div{flex:1;min-width:0}
.hr-req-top strong{display:block;font-size:11.5px;font-weight:600;color:#435979}
.hr-req-top small{display:block;font-size:8.5px;color:#9eabbe;margin-top:3px}
.hr-steps{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(3,1fr)}
.hr-steps li{position:relative;padding-top:16px;font-size:9px;color:#9eabbe}
.hr-steps li:before{content:'';position:absolute;top:0;left:0;width:10px;height:10px;border-radius:50%;background:#dfe6ef;z-index:1}
.hr-steps li:after{content:'';position:absolute;top:4px;left:14px;right:6px;height:2px;border-radius:2px;background:#e3e9f1}
.hr-steps li:last-child:after{display:none}
.hr-steps li.done:before{background:#88b2a4}
.hr-steps li.done:after{background:#b8d4ca}
.hr-steps li.now:before{background:#d9b26f;box-shadow:0 0 0 4px #f5e8cc;animation:kb-pulse 1.4s ease-in-out infinite}
.hr-steps b{display:block;font-weight:600;color:#5d7392;font-size:9.5px}
.hr-steps small{display:block;margin-top:2px;font-size:8px}
.hr-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:#e6ebf3}
.hr-cal-grid>b{background:#f3f6fb;font-size:8.5px;font-weight:600;color:#8a99af;text-align:center;padding:7px 0}
.hr-day{background:#fff;min-height:62px;padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0}
.hr-day.we{background:#f8f9fc}
.hr-day.blank{background:#fafbfd}
.hr-day>span{font-size:9px;color:#6d7f99}
.hr-day.we>span{color:#c9867c}
.hr-day i{font-style:normal;font-size:8px;padding:2px 5px;border-radius:4px;background:#e8eef8;color:#5f7da6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-day i.mine{background:#5d7fb1;color:#fff}
.hr-day i.pending{background:#fff;border:1px dashed #5d7fb1;color:#5d7fb1}
.hr-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hr-service{text-align:left;padding:16px;border:1px solid #e0e7f0;border-radius:12px;background:#fff9}
.hr-service:hover{background:#fff;border-color:#c5d4e7;transform:translateY(-2px)}
.hr-service>.ico{width:22px;height:22px;color:#c48b62}
.hr-service strong{display:block;font-size:11.5px;font-weight:600;margin:10px 0 4px;color:#435979}
.hr-service small{font-size:9px;color:#8e9cb1}
.hr-overlay-form{padding:0}
.hr-overlay-form .modal-actions{margin-top:6px}

@container appwin (max-width:780px){.hr-layout{grid-template-columns:1fr}
.hr-services{grid-template-columns:repeat(2,minmax(0,1fr))}
.msg{grid-template-columns:200px minmax(0,1fr)}
.msg-me{display:none}
}
@container appwin (max-width:560px){.msg{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
.msg-side{flex-direction:row;padding:8px;border-right:0;border-bottom:1px solid #e1e8f1;overflow-x:auto;overflow-y:hidden}
.msg-search,.msg-group{display:none}
#msgConvs{display:flex;gap:4px}
.msg-item{width:auto;flex-shrink:0;padding:6px 8px}
.msg-item-text small,.msg-item-meta time{display:none}
.msg-head-actions .secondary{font-size:0;padding:7px}
.msg-head-actions .secondary .ico{width:14px}
.hr-row{grid-template-columns:1fr}
.hr-services{grid-template-columns:1fr}
}