/* KT Flow — 프로젝트 /fonts + 로컬 설치 서체 */
@font-face{
  font-family:'KT Flow';
  src:url('/fonts/KTFlow-Thin.ttf') format('truetype'),local('KT Flow Thin');
  font-weight:100 300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'KT Flow';
  src:url('/fonts/KTFlow-Medium.ttf') format('truetype'),local('KT Flow Medium');
  font-weight:400 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'KT Flow';
  src:url('/fonts/KTFlow-Bold.ttf') format('truetype'),local('KT Flow Bold');
  font-weight:600 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'KT Flow';
  src:url('/fonts/KTFlow-Black.ttf') format('truetype'),local('KT Flow Black');
  font-weight:800 900;font-style:normal;font-display:swap;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'KT Flow','KT Flow Medium','Malgun Gothic',-apple-system,sans-serif;background:#f0f2f5;color:#222;font-size:14px}
b,strong,h1,h2,h3,h4,.ttl-sm,.period-label{font-family:'KT Flow','KT Flow Bold','Malgun Gothic',sans-serif}
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:250px;min-width:250px;background:#000;border-right:none;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}
.sb-sec{padding:8px 10px;border-bottom:1px solid #f5f5f5}
.sb-sec-title{font-size:9px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.sb-btn{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:6px;cursor:pointer;font-size:11px;color:#B5B5B7;border:none;background:none;width:100%;text-align:left}
.sb-btn:hover{background:rgba(255,255,255,0.08)}
.sb-btn.active{background:rgba(254,46,54,0.16);color:#FE2E36;font-weight:600}
.sb-icon{font-size:13px;width:16px;text-align:center}
.sb-link-item{display:flex;align-items:center;gap:3px;padding:3px 4px;border-radius:5px;margin-bottom:2px}
.sb-link-item:hover{background:#f5f5f5}
.sb-link-btn{flex:1;display:flex;align-items:center;gap:5px;padding:3px 4px;cursor:pointer;font-size:11px;color:#444;border:none;background:none;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sb-link-btn:hover{color:#00A5FF}
.sb-drag-handle,.link-drag-handle,.chip-sort-handle{cursor:grab;color:#ccc;flex-shrink:0}
.sb-drag-handle{font-size:12px;padding:0 2px}.link-drag-handle{font-size:14px}.chip-sort-handle{font-size:9px;padding:0 1px}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{background:#fff;border-bottom:1px solid #e0e0e0;padding:7px 12px;display:flex;align-items:center;gap:7px;flex-shrink:0;flex-wrap:wrap}
.period-label{font-size:14px;font-weight:700;min-width:100px}
.nav-btn{background:none;border:1px solid #ddd;border-radius:5px;padding:3px 8px;cursor:pointer;font-size:11px;color:#555}
.nav-btn:hover{background:#f5f5f5}
.add-btn{background:#00A5FF;color:#fff;border:none;border-radius:6px;padding:5px 11px;cursor:pointer;font-size:11px;font-weight:600}
.search-box{padding:4px 9px;border:1px solid #ddd;border-radius:16px;font-size:11px;outline:none;width:150px;font-family:inherit}
.search-box:focus{border-color:#00A5FF}
.quick-bar{background:#fff;border-bottom:1px solid #e8f0fe;padding:6px 12px;display:flex;align-items:center;gap:7px;flex-shrink:0}
.quick-bar input{flex:1;padding:6px 10px;border:1.5px solid #c5d8fb;border-radius:20px;font-size:12px;font-family:inherit;outline:none;background:#f8fbff}
.quick-bar input:focus{border-color:#00A5FF;background:#fff}
.quick-bar-btn{background:#00A5FF;color:#fff;border:none;border-radius:20px;padding:5px 14px;cursor:pointer;font-size:11px;font-weight:600;white-space:nowrap}
.today-panel{background:#fff;border-bottom:1px solid #e8f0fe;padding:5px 12px;display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;min-height:32px}
.tp-title{font-size:10px;font-weight:700;color:#00A5FF;white-space:nowrap}
.tp-chip{font-size:10px;padding:2px 8px;border-radius:10px;white-space:nowrap;cursor:pointer}
.content{flex:1;overflow-y:auto;padding:10px}
.f-btn{padding:3px 10px;border-radius:12px;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:10px;color:#555;width:100%;text-align:left;margin-bottom:2px}
.f-btn:hover{background:#f5f5f5}
.f-btn.active{background:#00A5FF;color:#fff;border-color:#00A5FF;font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:#ddd;border-radius:8px;overflow:hidden;border:1px solid #ddd}
.cal-head{background:#f8f9fa;padding:5px;text-align:center;font-size:10px;font-weight:700;color:#666}
.cal-head.sun{color:#d32f2f}.cal-head.sat{color:#1557b0}
.cal-cell{background:#fff;padding:3px;height:130px;overflow:hidden;position:relative}
.cal-cell:hover{background:#fafbff}
.cal-cell.other{background:#fafafa}.cal-cell.other .dn{color:#ccc}
.cal-cell.today .dn{background:#00A5FF;color:#fff!important;border-radius:50%;font-size:10px}
.cal-cell.drag-over{background:#e8f0fe!important;outline:2px dashed #00A5FF}
.cal-events{overflow-y:auto;max-height:95px}
.dn{font-size:10px;font-weight:600;color:#333;width:18px;height:18px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}
.holiday-label{font-size:8px;color:#d32f2f;padding:0 2px;margin-bottom:1px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.more-btn{font-size:8px;color:#00A5FF;cursor:pointer;padding:1px 3px;background:#e8f0fe;border-radius:3px;border:none;width:100%;text-align:left;margin-top:1px}
.chip-wrap{display:flex;align-items:center;gap:2px;margin-bottom:1px;position:relative}
.sb-link-item.d-over,.link-manage-row.d-over,.chip-wrap.d-over{border-top:2px solid #00A5FF}
.chip-chk{width:11px;height:11px;flex-shrink:0;cursor:pointer;accent-color:#188038;margin:0}
/* chip dark-ready */.chip{font-size:9px;padding:1px 4px;border-radius:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;flex:1;min-width:0;max-width:130px;user-select:none;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.chip.important{box-shadow:0 0 0 1.5px #fbbc04;font-weight:700}
.chip.search-match{outline:2px solid #fbbc04}
.chip-status{font-size:9px;cursor:pointer;flex-shrink:0;opacity:.6;line-height:1}
.chip-status:hover{opacity:1}
.memo-icon{font-size:8px;flex-shrink:0;opacity:.6}
.memo-tooltip{display:none;position:fixed;z-index:500;background:#333;color:#fff;font-size:10px;padding:5px 8px;border-radius:6px;white-space:pre-wrap;max-width:200px;line-height:1.5;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}
@media(hover:hover){.chip-wrap:hover .memo-tooltip{display:block}}
.scard{background:#fff;border-radius:9px;border:1px solid #e0e0e0;padding:12px;margin-bottom:10px}
.scard h4{font-size:12px;font-weight:700;margin-bottom:8px}
.wstat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:8px}
.wstat{background:#f8f9fa;border-radius:7px;padding:7px;text-align:center}
.wstat-num{font-size:16px;font-weight:700;color:#00A5FF}
.wstat-lbl,.ws-lbl{font-size:9px;color:#888;margin-top:1px}
.rrow{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid #f5f5f5;font-size:11px}
.rrow:last-child{border-bottom:none}
.badge{display:inline-flex;align-items:center;font-size:9px;padding:2px 6px;border-radius:8px;font-weight:700;background:#e8f0fe;color:#1557b0}
.badge.applied{background:#e6f4ea;color:#1b5e20}
.badge.notapplied{background:#f1f3f4;color:#999}
.iBtn{background:none;border:none;cursor:pointer;font-size:12px;color:#ccc;padding:1px 3px}
.iBtn:hover{color:#333}
.loading{display:flex;align-items:center;gap:7px;color:#aaa;font-size:11px;padding:7px 0}
.spin{width:13px;height:13px;border:2px solid #eee;border-top-color:#00A5FF;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.brief-ev{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid #f5f5f5;font-size:11px}
.brief-ev:last-child{border-bottom:none}
.ai-priority{background:#f8f9fa;border-left:3px solid #00A5FF;border-radius:0 7px 7px 0;padding:9px 11px;font-size:11px;line-height:1.8;white-space:pre-wrap}
.spicker{position:fixed;z-index:300;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:5px;display:flex;flex-direction:column;gap:2px;min-width:130px}
.spicker-item{padding:6px 10px;border-radius:5px;cursor:pointer;font-size:11px}
.spicker-item:hover{background:#f5f5f5}
.client-card{background:#fff;border:1px solid #e0e0e0;border-radius:9px;padding:12px;cursor:pointer}
.client-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
.history-item{padding:8px 10px;border-bottom:1px solid #f5f5f5;font-size:11px;line-height:1.6}
.history-item:last-child{border-bottom:none}
.history-date{font-size:9px;color:#aaa;margin-bottom:2px}
#floating-ai{position:fixed;bottom:18px;right:18px;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
#ai-panel{display:none;background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:12px;width:270px;box-shadow:0 4px 18px rgba(0,0,0,.12)}
#ai-fab{width:42px;height:42px;border-radius:50%;background:#00A5FF;color:#fff;border:none;cursor:pointer;font-size:18px;box-shadow:0 3px 10px rgba(26,115,232,.4)}
#sb-toggle{display:none;background:none;border:none;font-size:20px;cursor:pointer;padding:2px 6px;color:#444}
.link-manage-row{display:flex;align-items:center;gap:4px;padding:5px 0;border-bottom:1px solid #f5f5f5}
.lk-emoji{font-size:16px;width:24px;text-align:center;flex-shrink:0}
.week-nav{display:flex;align-items:center;gap:8px;margin-bottom:12px;background:#f8fbff;border:1px solid #c5d8fb;border-radius:8px;padding:8px 12px}
.week-nav-btn{background:none;border:1px solid #c5d8fb;border-radius:5px;padding:4px 10px;cursor:pointer;font-size:12px;color:#00A5FF}
.week-nav-btn:hover{background:#e8f0fe}
.week-nav-label{flex:1;text-align:center;font-size:12px;font-weight:700;color:#1557b0;cursor:pointer;text-decoration:underline dotted}
#toast-el{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:9px 20px;border-radius:20px;font-size:12px;z-index:9999;pointer-events:none;transition:opacity .3s;opacity:0}
#voice-btn{display:none}
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ws-card{background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:12px;position:relative;min-height:160px}
.ws-card.d-over{outline:2px dashed #00A5FF;background:#f0f4ff;border-top:1px solid #e0e0e0}
.ws-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;cursor:grab}
.ws-card-title{font-size:12px;font-weight:700;color:#333}
.ws-card-actions{display:flex;gap:3px;opacity:0;transition:opacity .15s}
.ws-card:hover .ws-card-actions{opacity:1}
.ws-action-btn{background:none;border:none;cursor:pointer;font-size:11px;color:#aaa;padding:2px 4px}
.ws-metric-row{display:flex;gap:8px;margin-bottom:8px}
.ws-metric{flex:1;background:#f8f9fa;border-radius:7px;padding:8px;text-align:center}
.ws-num{font-size:20px;font-weight:700}
.ws-ev-item{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid #f5f5f5;font-size:11px}
.ws-ev-item:last-child{border-bottom:none}
.ws-ev-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.ws-ev-chk{width:12px;height:12px;accent-color:#188038;flex-shrink:0;cursor:pointer}
.ws-ev-text{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.ws-ev-time{font-size:10px;color:#aaa;flex-shrink:0}
.ws-dday-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #f5f5f5;font-size:11px}
.ws-dday-row:last-child{border-bottom:none}
.ws-dday-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:6px;flex-shrink:0}
.ws-dday-title{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.ws-dday-client{font-size:10px;color:#aaa;flex-shrink:0}
.ws-client-row{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid #f5f5f5;font-size:11px;cursor:pointer}
.ws-client-row:last-child{border-bottom:none}
.ws-client-row:hover{background:#fafbff}
.ws-client-name{flex:1;font-weight:600}
.ws-prog{flex:1;height:5px;background:#f0f0f0;border-radius:3px;overflow:hidden}
.ws-prog-fill{height:100%;background:#00A5FF}
.ws-chat-box{display:flex;flex-direction:column;height:100%;min-height:200px}
.ws-chat-msgs{flex:1;overflow-y:auto;font-size:11px;margin-bottom:8px;max-height:180px}
.ws-chat-msg{padding:5px 8px;border-radius:7px;margin-bottom:4px;line-height:1.5;max-width:90%;user-select:text;-webkit-user-select:text;cursor:text}
.ws-chat-msg.user{background:#e8f0fe;color:#1557b0;margin-left:auto;text-align:right}
.ws-chat-msg.ai{background:#f8f9fa;color:#333}
.ws-copy-btn{font-size:9px;padding:1px 6px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;color:#888;margin-top:4px;display:inline-block}
.ws-copy-btn:hover{background:#f0f0f0;color:#333}
.ws-chat-input-row{display:flex;gap:4px}
.ws-chat-input{flex:1;padding:5px 8px;border:1px solid #ddd;border-radius:14px;font-size:11px;font-family:inherit;outline:none}
.ws-chat-input:focus{border-color:#00A5FF}
.ws-chat-send{background:#00A5FF;color:#fff;border:none;border-radius:14px;padding:5px 10px;cursor:pointer;font-size:10px;white-space:nowrap}
.ws-chat-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ws-chat-clear{font-size:9px;padding:2px 8px;border:1px solid #f0c0c0;border-radius:10px;background:#fff;color:#d32f2f;cursor:pointer}
.ws-chat-clear:hover{background:#fce8e6}
.ws-chat-cfg{font-size:9px;padding:2px 8px;border:1px solid #cfe0ff;border-radius:10px;background:#fff;color:#1557b0;cursor:pointer}
.ws-chat-cfg:hover{background:#eef4ff}
.ws-settings-panel{background:#f8f9fa;border:1px solid #e8f0fe;border-radius:8px;padding:10px;font-size:11px}
.ws-settings-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid #f0f0f0}
.ws-settings-row:last-child{border-bottom:none}
.ws-toggle{width:32px;height:16px;border-radius:8px;border:none;cursor:pointer;position:relative;flex-shrink:0}
.ws-toggle.on{background:#00A5FF}.ws-toggle.off{background:#ccc}
.ws-toggle::after{content:'';position:absolute;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .2s}
.ws-toggle.on::after{left:18px}.ws-toggle.off::after{left:2px}
.rep-item{border:1px solid #e8f0fe;border-radius:8px;margin-bottom:6px;overflow:hidden}
.rep-head{background:#f8fbff;padding:6px 12px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:#1557b0}
.rep-body{padding:8px 12px;font-size:11px;line-height:1.7;white-space:pre-wrap;max-height:80px;overflow-y:auto}
.draft-box{background:#f8f9fa;border:1px solid #eee;border-radius:7px;padding:9px;font-size:11px;line-height:1.7;white-space:pre-wrap;max-height:220px;overflow-y:auto;margin-top:7px}
.modal{background:#fff;border-radius:12px;padding:18px;width:440px;max-width:96vw;max-height:88vh;overflow-y:auto;position:relative}
.modal h3{font-size:14px;font-weight:700;margin-bottom:12px;padding-right:22px}
.modal label{display:block;font-size:10px;font-weight:700;color:#888;margin:9px 0 3px}
.modal input,.modal select,.modal textarea{width:100%;padding:6px 8px;border:1px solid #ddd;border-radius:6px;font-size:12px;font-family:inherit}
.modal textarea{resize:vertical;min-height:55px}
.chk-row{display:flex;align-items:center;gap:6px;margin-top:9px}
.chk-row input{width:auto}
.chk-row label{margin:0;font-size:11px;color:#333;font-weight:600}
.mactions{display:flex;gap:6px;margin-top:14px;justify-content:flex-end;flex-wrap:wrap}
.btn-c,.btn-p,.btn-d,.btn-o,.btn-g{padding:6px 12px;border-radius:6px;cursor:pointer;font-size:11px;border:none}
.btn-c{border:1px solid #ddd;background:#fff}
.btn-p{background:#00A5FF;color:#fff;font-weight:700}
.btn-d{background:#d32f2f;color:#fff}
.btn-o{border:1px solid #00A5FF;color:#00A5FF;background:#fff}
.btn-g{background:#188038;color:#fff;font-weight:700}
.xbtn{position:absolute;top:10px;right:12px;background:none;border:none;font-size:17px;cursor:pointer;color:#999}
.drow{display:flex;gap:5px;padding:5px 0;border-bottom:1px solid #f5f5f5;align-items:flex-start}
.dlbl{font-size:10px;color:#aaa;width:52px;flex-shrink:0;padding-top:2px}
.dval{font-size:12px;color:#333;flex:1;line-height:1.5}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:flex;align-items:center;justify-content:center}
@media(max-width:760px){
#pl-sb-toggle{display:flex !important}
#pl-sidebar{position:fixed;left:0;top:38px;bottom:0;height:auto;z-index:456;transform:translateX(-100%);transition:transform .22s;box-shadow:2px 0 12px rgba(0,0,0,.25)}
#pl-sidebar.open{transform:translateX(0)}
#pl-sb-overlay.open{display:block !important}
}
/* 업무로그·깡비GPT 내부 사이드바(필터 패널/대화 목록) — 고정폭이라 모바일에서 본문이 극도로
   눌려 글자가 세로로 한 글자씩 쪼개지던 문제. 문서지원 사이드바와 동일하게 세로 스택으로 전환. */
@media(max-width:760px){
.wl-wrap,.on-wrap{flex-direction:column!important}
.wl-sidebar,#on-sidebar{width:100%!important;min-width:0!important;max-height:280px}
.wl-main,.on-main{min-width:0!important}
#on-sidebar-list{max-height:160px}
}
@media(max-width:680px){
#sb-toggle{display:inline-flex}
.sidebar{position:fixed;left:0;top:0;height:100vh;z-index:300;transform:translateX(-100%);transition:transform .22s;box-shadow:2px 0 12px rgba(0,0,0,.15)}
.sidebar.open{transform:translateX(0)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:299}
.sb-overlay.open{display:block}
#voice-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;font-size:16px;flex-shrink:0;background:#f0f0f0;color:#555}
#voice-btn.listening{background:#d32f2f;color:#fff;animation:pulse .8s infinite}
.ws-grid{grid-template-columns:1fr}
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* 공통 유틸 */
.rep-cur{background:#f8fbff;border:1px solid #e8f0fe;border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:11px;line-height:1.7;white-space:pre-wrap;max-height:180px;overflow-y:auto}
.sel-sm{padding:5px 8px;border:1px solid #ddd;border-radius:8px;font-size:11px;font-family:inherit}
.empty-msg{color:#ccc;font-size:11px;padding:8px 0}
.flex-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ttl-sm{font-size:13px;font-weight:700;color:#333}
.muted{font-size:11px;color:#aaa}
.ai-out{background:#f8f9fa;border:1px solid #eee;border-radius:6px;padding:7px;font-size:10px;line-height:1.7;max-height:150px;overflow-y:auto;white-space:pre-wrap}
.rep-banner{background:#fff8e1;border:1px solid #ffe082;border-radius:8px;padding:8px 12px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.fld-lbl{font-size:10px;font-weight:700;color:#888;display:block;margin-bottom:3px}
.fld-in{width:100%;padding:5px;border:1px solid #ddd;border-radius:5px;font-size:11px;font-family:inherit}
.redit-radio{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer}
.redit-chk{display:flex;align-items:center;gap:6px;font-size:11px;cursor:pointer}
.btn-row{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.sec-lbl{font-size:11px;font-weight:700;color:#555;margin-bottom:6px}
.hist-box{background:#f8f9fa;border-radius:8px;padding:10px;max-height:260px;overflow-y:auto;margin-bottom:10px}
.ws-link-box{font-size:11px;color:#ccc;padding:8px 0}

.pl-inp{padding:6px 8px;border:1px solid #ddd;border-radius:6px;font-size:12px;font-family:inherit}
.pl-empty{color:#ccc;font-size:12px;padding:30px;text-align:center}
.pl-tbl{width:100%;border-collapse:collapse;font-size:10px}
.pl-err{color:#d32f2f;font-size:11px;padding:10px}

/* ═══════════════════════════════════════════════════════════
   KKANGBY Unified Premium Dark Skin (look & feel only)
   Tokens from Home dashboard — layout/structure unchanged
   ═══════════════════════════════════════════════════════════ */
:root{
  /* KT 브랜드 컬러 (CI / 매칭 / 모노톤) */
  --kt-red:#FE2E36;
  --kt-red-alt:#ED2024;
  --kt-black:#000000;
  --kt-blue:#00A5FF;
  --kt-purple:#AA50FF;
  --kt-teal:#00BEAC;
  --kt-dark-gray:#4C4C4E;
  --kt-light-gray:#A2A4A3;
  --kt-white:#FFFFFF;
  /* 앱 토큰 — KT 기본 색 매핑 */
  --kb-bg:#000000;
  --kb-surface:#1d1d1f;
  --kb-surface-2:#2c2c2e;
  --kb-elevated:#111113;
  --kb-border:#2c2c2e;
  --kb-border-soft:#4C4C4E;
  --kb-text:#FFFFFF;
  --kb-muted:#A2A4A3;
  --kb-faint:#6e6e73;
  --kb-accent:#FE2E36;
  --kb-accent-2:#00A5FF;
  --kb-accent-soft:rgba(254,46,54,.18);
  --kb-danger:#FE2E36;
  --kb-success:#00BEAC;
  --kb-radius:20px;
  --kb-radius-sm:12px;
}
body{background:var(--kb-bg)!important;color:var(--kb-text)!important;font-family:'KT Flow','KT Flow Medium','Malgun Gothic',-apple-system,sans-serif!important}
#app-tab-bar{background:var(--kb-bg)!important;border-bottom:1px solid var(--kb-border)!important}
#app-tab-bar>div:first-child{color:var(--kb-text)!important;border-right-color:var(--kb-border)!important}
/* 상단 탭 반응형 — 창 폭이 줄어들면 탭 패딩·글자크기가 함께 줄어들되, 텍스트 자체는 절대 줄바꿈/잘림 없이 한 줄로 유지.
   그래도 다 못 들어갈 만큼 좁아지면(예: 모바일) 막대 전체가 가로 스크롤됨(overflow-x:auto, 기존 유지) — 글자 깨짐 방지가 최우선. */
#app-tab-bar{flex-wrap:nowrap}
#app-tab-bar .apptab-btn,#app-tab-bar .apptab-logo{white-space:nowrap;flex:0 0 auto;transition:padding .15s,font-size .15s}
#app-tab-bar .apptab-btn{padding:0 clamp(8px,1.6vw,18px);font-size:clamp(11px,1.15vw,12px)}
#app-tab-bar .apptab-logo{padding:0 clamp(10px,1.6vw,14px);font-size:clamp(12px,1.2vw,13px)}
@media (max-width:1100px){
  #app-tab-bar .apptab-btn{padding:0 clamp(6px,1.3vw,10px);font-size:11px}
  #app-tab-bar .apptab-logo{padding:0 10px;font-size:12px}
}
@media (max-width:820px){
  #app-tab-bar .apptab-btn{padding:0 6px;font-size:10px}
  #app-tab-bar .apptab-logo{padding:0 8px;font-size:11px}
}
/* 모바일: 로고·탭·커스텀 링크 글자 라벨은 숨기고 이모지 아이콘만 남겨서(클릭 동작은 그대로) 핵심
   탭들이 좁은 화면에도 들어오게 함. 커스텀 링크(top-link-btn)도 apptab-btn 클래스를 공유하므로
   같은 아이콘 전용 처리가 자동 적용됨 — 이전엔 top-links-bar 전체를 숨겨서 링크에 접근이 아예
   안 되는 회귀가 있었음, 아이콘으로라도 계속 보이고 눌리게 수정. 그래도 다 못 들어가면 막대 전체가
   가로 스크롤됨(overflow-x:auto, 기존 유지). 크레딧 배지는 순수 정보 표시라 계속 숨김. */
@media (max-width:480px){
  #app-tab-bar .apptab-label{display:none}
  #app-tab-bar .apptab-btn{padding:0 10px;font-size:15px}
  #app-tab-bar .apptab-logo{padding:0 8px;font-size:15px}
  #llm-credit-badge{display:none!important}
  #admin-menu-btn .apptab-label{display:none}
  #admin-menu-btn{padding:0 12px!important}
}
#cal-app,#pl-app,#meeting-app{background:var(--kb-bg)!important}
#report-app{background:var(--kb-bg)!important}
/* 손익: 가로 풀폭 고정 (사이드바 제외 영역 화면 끝까지) */
#pl-app{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  flex-direction:column!important;
  align-items:stretch!important;
}
#pl-app #pl-shell{
  display:flex!important;
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
}
#pl-app #pl-body{
  flex:1 1 auto!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
#pl-app #pl-tab-content,
#pl-app .pl-dash-full{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
/* 손익 대시보드: 좌측 본문 + 우측 이상징후/목표달성률 */
#pl-app .pl-dash-lr{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,32%)!important;
  gap:12px!important;
  align-items:start!important;
  width:100%!important;
}
#pl-app .pl-prob-full{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
@media (max-width:1100px){
  #pl-app .pl-dash-lr{grid-template-columns:1fr!important}
  #pl-app .pl-dash-lr > div:last-child{position:static!important}
}
#pl-body{background:var(--kb-bg)!important;color:var(--kb-text)!important}
.main{background:var(--kb-bg)}
.topbar{background:var(--kb-surface)!important;border-bottom:1px solid var(--kb-border)!important}
.period-label{color:var(--kb-text)!important}
.nav-btn{border-color:var(--kb-border-soft)!important;color:var(--kb-muted)!important;background:transparent!important;border-radius:999px!important}
.nav-btn:hover{background:var(--kb-surface-2)!important;color:var(--kb-text)!important}
.add-btn{background:var(--kb-accent-2)!important;border-radius:999px!important}
.search-box{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.search-box:focus{border-color:var(--kb-accent)!important}
.quick-bar{background:var(--kb-surface)!important;border-bottom:1px solid var(--kb-border)!important}
.quick-bar input{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.quick-bar input:focus{border-color:var(--kb-accent)!important;background:var(--kb-elevated)!important}
.quick-bar-btn{background:var(--kb-accent-2)!important;border-radius:999px!important}
.today-panel{background:var(--kb-surface)!important;border-bottom:1px solid var(--kb-border)!important}
.tp-title{color:var(--kb-accent)!important}
.content{background:var(--kb-bg)!important}
.sb-sec{border-bottom:1px solid var(--kb-border)!important}
.sb-link-item:hover{background:rgba(255,255,255,.06)!important}
.sb-link-btn{color:var(--kb-muted)!important}
.sb-link-btn:hover{color:var(--kb-accent)!important}
.f-btn{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-muted)!important}
.f-btn:hover{background:var(--kb-surface-2)!important;color:var(--kb-text)!important}
.f-btn.active{background:var(--kb-accent)!important;color:#fff!important;border-color:var(--kb-accent)!important}
.cal-grid{background:var(--kb-border)!important;border-color:var(--kb-border)!important;border-radius:var(--kb-radius-sm)!important}
.cal-head{background:var(--kb-surface)!important;color:var(--kb-muted)!important}
.cal-head.sun{color:#ff6961!important}.cal-head.sat{color:#64b5f6!important}
/* cal-cell base dark skin — month grid overrides via #cal-app .cal-grid above */
.cal-cell{background:var(--kb-surface)!important;border:1px solid var(--kb-border)!important}
.cal-cell:hover{background:#252528!important}
.cal-cell.other{background:var(--kb-elevated)!important;opacity:1}
.cal-cell.other .dn{color:var(--kb-faint)!important}
.cal-cell.today .dn{background:var(--kb-accent)!important}
.cal-cell.drag-over{background:var(--kb-accent-soft)!important;outline-color:var(--kb-accent)!important}
/* .dn color scoped under .cal-grid only */
.more-btn{color:var(--kb-accent)!important;background:var(--kb-accent-soft)!important}

/* ═══ 캘린더 월간보기 — 일정 달력(.cal-grid)만 기존 라이트 복원 (워크스페이스 등 다른 메뉴 배경 유지) ═══ */
#cal-app .cal-grid{
  display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:1px!important;
  background:#ddd!important;border:1px solid #ddd!important;border-radius:8px!important;overflow:hidden!important;
}
#cal-app .cal-grid .cal-head{
  background:#f8f9fa!important;padding:5px!important;text-align:center!important;
  font-size:10px!important;font-weight:700!important;color:#666!important;
  font-family:'Malgun Gothic',sans-serif!important;
}
#cal-app .cal-grid .cal-head.sun{color:#d32f2f!important}
#cal-app .cal-grid .cal-head.sat{color:#1557b0!important}
#cal-app .cal-grid .cal-cell{
  background:#fff!important;padding:3px!important;height:130px!important;overflow:hidden!important;
  position:relative!important;border:none!important;opacity:1!important;
  font-family:'Malgun Gothic',sans-serif!important;
}
#cal-app .cal-grid .cal-cell:hover{background:#fafbff!important}
#cal-app .cal-grid .cal-cell.other{background:#fafafa!important}
#cal-app .cal-grid .cal-cell.other .dn{color:#ccc!important;background:transparent!important}
#cal-app .cal-grid .cal-cell.today .dn{
  background:#00A5FF!important;color:#fff!important;border-radius:50%!important;font-size:10px!important;
}
#cal-app .cal-grid .cal-cell.drag-over{background:#e8f0fe!important;outline:2px dashed #00A5FF!important}
#cal-app .cal-grid .cal-events{overflow-y:auto!important;max-height:95px!important}
#cal-app .cal-grid .dn{
  font-size:10px!important;font-weight:600!important;color:#333!important;
  width:18px!important;height:18px!important;display:flex!important;align-items:center!important;
  justify-content:center!important;margin-bottom:1px!important;
  font-family:'Malgun Gothic',sans-serif!important;
}
#cal-app .cal-grid .holiday-label{font-size:8px!important;color:#d32f2f!important}
#cal-app .cal-grid .more-btn{
  font-size:8px!important;color:#00A5FF!important;padding:1px 3px!important;
  background:#e8f0fe!important;border-radius:3px!important;border:none!important;width:100%!important;text-align:left!important;
}
#cal-app .cal-grid .chip-wrap{display:flex!important;align-items:center!important;gap:2px!important;margin-bottom:1px!important}
#cal-app .cal-grid .chip{
  font-size:9px!important;padding:1px 4px!important;border-radius:3px!important;overflow:hidden!important;
  white-space:nowrap!important;text-overflow:ellipsis!important;cursor:pointer!important;flex:1!important;
  min-width:0!important;max-width:130px!important;user-select:none!important;box-shadow:none!important;
  font-family:'Malgun Gothic',sans-serif!important;
}
#cal-app .cal-grid .chip.important{box-shadow:0 0 0 1.5px #fbbc04!important;font-weight:700!important}
#cal-app .cal-grid .chip-status{font-size:9px!important;opacity:.6!important}
#cal-app .cal-grid .chip-chk{width:11px!important;height:11px!important;accent-color:#188038!important}
/* 캘린더 월간 그리드 — 7열이라 모바일에선 셀 폭이 ~50px밖에 안 남아 일정 제목이 1글자로
   말줄임되던 문제. 드래그핸들·체크박스·메모아이콘·상태아이콘은 숨기고 칩은 색상 점(dot)으로만
   표시, 정보 손실 없이(칩 탭 시 기존 openDetail 그대로 동작, "+N개 더보기"로 전체 목록 확인 가능)
   가독성만 개선 — 로직 변경 없음, 순수 표시 방식만 축소. */
@media(max-width:680px){
#cal-app .cal-grid .chip-sort-handle,
#cal-app .cal-grid .chip-chk,
#cal-app .cal-grid .memo-icon,
#cal-app .cal-grid .memo-tooltip,
#cal-app .cal-grid .chip-status{display:none!important}
#cal-app .cal-grid .chip-wrap{gap:0!important;margin-bottom:2px!important}
#cal-app .cal-grid .chip{
  font-size:0!important;line-height:0!important;flex:0 0 auto!important;
  width:9px!important;height:9px!important;min-width:9px!important;max-width:9px!important;
  padding:0!important;border-radius:50%!important;box-shadow:none!important;
}
#cal-app .cal-grid .chip.important{box-shadow:0 0 0 1.5px #fbbc04!important}
#cal-app .cal-grid .cal-events{display:flex!important;flex-wrap:wrap!important;gap:3px!important;max-height:44px!important}
#cal-app .cal-grid .more-btn{font-size:7.5px!important;padding:1px 2px!important}
#cal-app .cal-grid .dn{font-size:10px!important}
}
/* 월간 달력 외 메뉴(워크스페이스·보고·고객사 등)는 다크 배경 유지 */
#cal-app .content{background:var(--kb-bg)!important}
.scard{background:var(--kb-surface)!important;border:1px solid var(--kb-border)!important;border-radius:var(--kb-radius-sm)!important;color:var(--kb-text)!important}
.scard h4{color:var(--kb-text)!important}
.wstat{background:var(--kb-elevated)!important}
.wstat-num{color:var(--kb-accent)!important}
.wstat-lbl,.ws-lbl{color:var(--kb-muted)!important}
.rrow{border-bottom-color:var(--kb-border)!important;color:var(--kb-text)!important}
.badge{background:var(--kb-accent-soft)!important;color:var(--kb-accent-2)!important}
.badge.applied{background:rgba(48,209,88,.15)!important;color:var(--kb-success)!important}
.badge.notapplied{background:var(--kb-elevated)!important;color:var(--kb-faint)!important}
.iBtn{color:var(--kb-faint)!important}
.iBtn:hover{color:var(--kb-text)!important}
.ai-priority{background:var(--kb-elevated)!important;border-left-color:var(--kb-accent)!important;color:var(--kb-text)!important}
.spicker{background:var(--kb-surface)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important;box-shadow:0 8px 32px rgba(0,0,0,.5)!important}
.spicker-item{color:var(--kb-text)!important}
.spicker-item:hover{background:var(--kb-elevated)!important}
.client-card{background:var(--kb-surface)!important;border-color:var(--kb-border)!important;border-radius:var(--kb-radius-sm)!important;color:var(--kb-text)!important}
.client-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.4)!important}
.history-item{border-bottom-color:var(--kb-border)!important;color:var(--kb-text)!important}
.history-date{color:var(--kb-faint)!important}
#ai-panel{background:var(--kb-surface)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
#ai-fab{background:var(--kb-accent)!important}
#sb-toggle{color:var(--kb-muted)!important}
.link-manage-row{border-bottom-color:var(--kb-border)!important}
.week-nav{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important}
.week-nav-btn{border-color:var(--kb-border)!important;color:var(--kb-accent)!important}
.week-nav-btn:hover{background:var(--kb-accent-soft)!important}
.week-nav-label{color:var(--kb-accent-2)!important}
.ws-card{background:var(--kb-surface)!important;border-color:var(--kb-border)!important;border-radius:var(--kb-radius-sm)!important;color:var(--kb-text)!important}
.ws-card.d-over{background:var(--kb-accent-soft)!important}
.ws-card-title{color:var(--kb-text)!important}
.ws-metric{background:var(--kb-elevated)!important;color:var(--kb-text)!important}
.ws-ev-item,.ws-dday-row,.ws-client-row{border-bottom-color:var(--kb-border)!important;color:var(--kb-text)!important}
.ws-client-row:hover{background:rgba(255,255,255,.04)!important}
.ws-prog{background:var(--kb-elevated)!important}
.ws-prog-fill{background:var(--kb-accent)!important}
.ws-chat-msg.user{background:var(--kb-accent-soft)!important;color:#8ec8ff!important}
.ws-chat-msg.ai{background:var(--kb-elevated)!important;color:var(--kb-text)!important}
.ws-copy-btn{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-muted)!important}
.ws-chat-input{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.ws-chat-send{background:var(--kb-accent)!important}
.ws-chat-clear{background:var(--kb-elevated)!important}
.ws-chat-cfg{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-accent)!important}
.ws-settings-panel{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.ws-settings-row{border-bottom-color:var(--kb-border)!important}
.rep-item{border-color:var(--kb-border)!important}
.rep-head{background:var(--kb-elevated)!important;color:var(--kb-accent)!important}
.rep-body{color:var(--kb-text)!important}
.draft-box{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.modal{background:var(--kb-surface)!important;color:var(--kb-text)!important;border:1px solid var(--kb-border);border-radius:var(--kb-radius-sm)!important}
.modal h3{color:var(--kb-text)!important}
.modal label{color:var(--kb-muted)!important}
.modal input,.modal select,.modal textarea{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.chk-row label{color:var(--kb-text)!important}
.btn-c{border-color:var(--kb-border-soft)!important;background:var(--kb-elevated)!important;color:var(--kb-text)!important}
.btn-p{background:var(--kb-accent)!important}
.btn-o{border-color:var(--kb-accent)!important;color:var(--kb-accent)!important;background:transparent!important}
.btn-g{background:var(--kb-success)!important}
.xbtn{color:var(--kb-muted)!important}
.dval{color:var(--kb-text)!important}
.dlbl{color:var(--kb-faint)!important}
.rep-cur{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.sel-sm{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.ttl-sm{color:var(--kb-text)!important}
.muted{color:var(--kb-muted)!important}
.ai-out{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.rep-banner{background:rgba(255,159,10,.12)!important;border-color:rgba(255,159,10,.35)!important;color:var(--kb-text)!important}
.fld-in{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.redit-radio{border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.sec-lbl{color:var(--kb-muted)!important}
.hist-box{background:var(--kb-elevated)!important;color:var(--kb-text)!important}
.pl-inp{background:var(--kb-elevated)!important;border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.pl-tbl{color:var(--kb-text)!important}
.pl-tbl th{background:var(--kb-elevated)!important;color:var(--kb-muted)!important;border-color:var(--kb-border)!important}
.pl-tbl td{border-color:var(--kb-border)!important;color:var(--kb-text)!important}
.pl-tbl tr:hover td{background:rgba(255,255,255,.03)!important}
/* 모달 오버레이 안 인라인 라이트 보정 */
.ov .modal input,.ov .modal select,.ov .modal textarea{background:var(--kb-elevated);color:var(--kb-text);border-color:var(--kb-border)}
/* 업무로그 리스트 카드 (JS 인라인 보조) */
#meeting-root{background:var(--kb-bg)!important;color:var(--kb-text)!important}

/* 손익 관리 — 본문 라이트 대시보드 (기존 이미지 톤) */
/* 손익 본문 라이트 강제 (글로벌 dark scard 덮어쓰기) */
#pl-app #pl-body,
#pl-app #pl-body *{color:inherit}
#pl-app #pl-body{background:#f4f5f7!important;color:#1c1f26!important}

/* 손익 관리 — 액션 버튼 색 (이미지 톤: 파랑 CTA / 초록 저장) */
#pl-app .add-btn,
#pl-body .add-btn{
  background:#00A5FF!important;color:#fff!important;border:none!important;
  border-radius:999px!important;padding:7px 14px!important;font-weight:600!important;
}
#pl-app .add-btn:hover{background:#0090e0!important}
#pl-app .btn-p,
#pl-body .btn-p{
  background:#00A5FF!important;color:#fff!important;border:none!important;
  border-radius:8px!important;font-weight:600!important;
}
#pl-app .btn-p:hover{background:#0090e0!important}
#pl-app .btn-g,
#pl-body .btn-g{
  background:#188038!important;color:#fff!important;border:none!important;
  border-radius:8px!important;font-weight:700!important;
}
#pl-app .btn-g:hover{background:#137333!important}
#pl-sidebar .sb-btn[onclick*="openAddPLCenter"]{
  color:#00A5FF!important;font-weight:600!important;
}
#pl-app #pl-tab-content .scard,
#pl-app #pl-body .scard{background:#fff!important;color:#1c1f26!important;border-color:#e0e0e0!important}
#pl-app #pl-tab-content .scard h4,
#pl-app #pl-body .scard h4{color:#1c1f26!important}
#pl-app #pl-tab-content table.pl-tbl,
#pl-app #pl-tab-content .pl-tbl th,
#pl-app #pl-tab-content .pl-tbl td{color:#1c1f26!important;border-color:#e0e0e0!important}
#pl-app #pl-tab-content .pl-tbl th{background:#f8f9fa!important;color:#5b6472!important}
#pl-app #pl-tab-content .pl-inp,
#pl-app #pl-body input,
#pl-app #pl-body select,
#pl-app #pl-body textarea{background:#fff!important;color:#1c1f26!important;border-color:#ddd!important}
#pl-app #pl-body h3{color:#1c1f26!important}
#pl-app #pl-body{background:#f4f5f7!important;color:#1c1f26!important}

/* 손익 관리 — 액션 버튼 색 (이미지 톤: 파랑 CTA / 초록 저장) */
#pl-app .add-btn,
#pl-body .add-btn{
  background:#00A5FF!important;color:#fff!important;border:none!important;
  border-radius:999px!important;padding:7px 14px!important;font-weight:600!important;
}
#pl-app .add-btn:hover{background:#0090e0!important}
#pl-app .btn-p,
#pl-body .btn-p{
  background:#00A5FF!important;color:#fff!important;border:none!important;
  border-radius:8px!important;font-weight:600!important;
}
#pl-app .btn-p:hover{background:#0090e0!important}
#pl-app .btn-g,
#pl-body .btn-g{
  background:#188038!important;color:#fff!important;border:none!important;
  border-radius:8px!important;font-weight:700!important;
}
#pl-app .btn-g:hover{background:#137333!important}
#pl-sidebar .sb-btn[onclick*="openAddPLCenter"]{
  color:#00A5FF!important;font-weight:600!important;
}
#pl-app #pl-tab-content{color:#1c1f26}
#pl-app #pl-tab-content .pl-tbl{color:#1c1f26}
#pl-app #pl-tab-content .scard{background:#fff!important;color:#1c1f26!important}
#pl-app .pl-inp{background:#fff!important;color:#1c1f26!important;border-color:#ddd!important}

/* (superseded by full calendar month restore) */

/* PL light dashboard restored — no dark force on #pl-tab-content */


/* 모바일 드래그 가능 AI 버튼 */
#mobile-app .ai-float-btn {
  position: fixed;
  width: 52px; height: 52px;
  background: linear-gradient(135deg,#00A5FF,#0d47a1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 16px rgba(26,115,232,.4);
  cursor: grab;
  z-index: 200;
  touch-action: none;
  user-select: none;
  border: none;
  color: #fff;
  right: 16px;
  bottom: 90px;
  transition: box-shadow .2s;
}
#mobile-app .ai-float-btn:active { cursor: grabbing; box-shadow: 0 6px 20px rgba(26,115,232,.6); }
/* ═══════════════════════════════════════
   모바일 전용 UI (768px 이하)
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  /* PC UI 숨기기 (데스크탑 모드 클래스가 없을 때만) */
  body:not(.desktop-mode) #app-tab-bar,
  body:not(.desktop-mode) #cal-app,
  body:not(.desktop-mode) #pl-app { display: none !important; }
  /* 모바일 UI 표시 (데스크탑 모드 클래스가 없을 때만) */
  body:not(.desktop-mode) #mobile-app { display: block !important; }
  /* 데스크탑 모드일 때 모바일 UI 숨기기 */
  body.desktop-mode #mobile-app { display: none !important; }
}
@media (min-width: 769px) {
  /* 모바일 UI 숨기기 */
  #mobile-app { display: none !important; }
}

/* 모바일 스타일 */
#mobile-app * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
#mobile-app { font-family: 'Apple SD Gothic Neo','Malgun Gothic',sans-serif; background: #f5f6f8; min-height: 100vh; }
#mobile-app .m-header { background: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100; }
#mobile-app .m-header-title { font-size: 16px; font-weight: 700; color: #333; }
#mobile-app .m-header-date { font-size: 11px; color: #aaa; margin-top: 1px; }
#mobile-app .m-content { padding: 12px; padding-bottom: 80px; }
#mobile-app .m-section { background: #fff; border-radius: 16px; padding: 14px; margin-bottom: 12px; }
#mobile-app .m-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#mobile-app .m-section-title { font-size: 14px; font-weight: 700; color: #333; }
#mobile-app .m-section-more { font-size: 11px; color: #00A5FF; background: none; border: none; cursor: pointer; }
#mobile-app .quick-add { background: linear-gradient(135deg,#00A5FF,#0d47a1); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
#mobile-app .quick-add-label { font-size: 11px; color: rgba(255,255,255,.7); margin-bottom: 8px; }
#mobile-app .quick-add-row { display: flex; gap: 8px; margin-bottom: 8px; }
#mobile-app .quick-input { flex: 1; padding: 10px 14px; border: none; border-radius: 12px; font-size: 13px; outline: none; font-family: inherit; }
#mobile-app .quick-btn { background: rgba(255,255,255,.25); color: #fff; border: none; border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
#mobile-app .quick-opts { display: flex; gap: 6px; flex-wrap: wrap; }
#mobile-app .quick-tag { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); border: none; border-radius: 20px; padding: 5px 12px; font-size: 11px; cursor: pointer; font-family: inherit; }
#mobile-app .quick-tag.sel { background: rgba(255,255,255,.35); font-weight: 700; }
#mobile-app .dday-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
#mobile-app .dday-scroll::-webkit-scrollbar { display: none; }
#mobile-app .dday-card { flex-shrink: 0; width: 120px; border-radius: 14px; padding: 12px; color: #fff; cursor: pointer; }
#mobile-app .dday-num { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
#mobile-app .dday-title { font-size: 11px; opacity: .9; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mobile-app .dday-date { font-size: 10px; opacity: .7; margin-top: 3px; }
#mobile-app .cal-nav { display: flex; align-items: center; gap: 8px; }
#mobile-app .cal-nav-btn { background: #f5f6f8; border: none; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
#mobile-app .cal-month-lbl { font-size: 13px; font-weight: 600; color: #333; }
#mobile-app .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; gap: 2px; }
#mobile-app .cal-day-lbl { font-size: 10px; color: #aaa; padding: 4px 0; font-weight: 500; }
#mobile-app .mcal { font-size: 13px; color: #333; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto; border-radius: 50%; transition: background .15s; }
#mobile-app .mcal:hover { background: #f0f4ff; }
#mobile-app .mcal.other { color: #ddd; }
#mobile-app .mcal.today { background: #00A5FF; color: #fff; font-weight: 700; }
#mobile-app .mcal.msel { background: #e8f0fe; color: #00A5FF; font-weight: 700; }
#mobile-app .mcal.today.msel { background: #00A5FF; color: #fff; }
#mobile-app .mcal.dot::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: #ff4d4f; border-radius: 50%; }
#mobile-app .mcal.today.dot::after, #mobile-app .mcal.msel.dot::after { background: rgba(255,255,255,.8); }
#mobile-app .msel-label { font-size: 12px; font-weight: 600; color: #00A5FF; margin-bottom: 10px; padding: 6px 10px; background: #e8f0fe; border-radius: 8px; display: inline-block; }
#mobile-app .m-event-list { display: flex; flex-direction: column; gap: 8px; }
#mobile-app .m-event-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f8f9fa; border-radius: 12px; cursor: pointer; }
#mobile-app .ev-color { width: 4px; height: 36px; border-radius: 4px; flex-shrink: 0; }
#mobile-app .ev-info { flex: 1; }
#mobile-app .ev-title { font-size: 13px; font-weight: 600; color: #333; }
#mobile-app .ev-meta { font-size: 11px; color: #aaa; margin-top: 2px; }
#mobile-app .ev-status { font-size: 10px; padding: 3px 8px; border-radius: 20px; flex-shrink: 0; }
#mobile-app .s-done { background: #e6f4ea; color: #188038; }
#mobile-app .s-todo { background: #fce8e6; color: #d32f2f; }
#mobile-app .no-event { text-align: center; padding: 20px; color: #ccc; font-size: 13px; }
#mobile-app .center-select { width: 100%; padding: 10px 14px; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 13px; font-family: inherit; background: #fff; margin-bottom: 12px; outline: none; color: #333; }
#mobile-app .annual-table-wrap { overflow-x: auto; }
#mobile-app .annual-table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; }
#mobile-app .annual-table th { padding: 8px 6px; background: #f8f9fa; color: #666; font-weight: 600; text-align: right; border-bottom: 2px solid #e0e0e0; }
#mobile-app .annual-table th:first-child { text-align: left; }
#mobile-app .annual-table td { padding: 9px 6px; border-bottom: 1px solid #f0f0f0; text-align: right; color: #333; }
#mobile-app .annual-table td:first-child { text-align: left; font-weight: 600; color: #555; }
#mobile-app .annual-table .sum-row td { background: #f0f4ff; color: #00A5FF; font-weight: 700; border-top: 2px solid #c5d8f7; }
#mobile-app .annual-table .avg-row td { background: #f8f9fa; color: #555; font-weight: 600; }
#mobile-app .m-good { color: #188038 !important; }
#mobile-app .m-bad { color: #d32f2f !important; }
#mobile-app .m-warn { color: #f57c00 !important; }
#mobile-app .m-tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #eee; display: flex; padding: 8px 0 16px; z-index: 100; }
#mobile-app .m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 4px 0; background: none; border: none; min-width: 0; }
#mobile-app .m-tab-icon { font-size: 22px; }
#mobile-app .m-tab-label { font-size: 10px; color: #aaa; font-weight: 500; }
#mobile-app .m-tab.active .m-tab-label { color: #00A5FF; font-weight: 700; }
#mobile-app .m-tab-panel { display: none; }
#mobile-app .m-tab-panel.active { display: block; }