*{box-sizing:border-box;margin:0;padding:0}
:root{--green:#1D9E75;--green-light:#E1F5EE;--green-border:#9FE1CB;--amber:#EF9F27;--amber-light:#FAEEDA;--purple:#7F77DD;--purple-light:#EEEDFE;--red:#E24B4A;--gray:#f5f7f5;--white:#fff;--border:#e8ede8;--text:#222;--text2:#666;--text3:#aaa}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--gray);color:var(--text);min-height:100vh}

/* ── 탭 네비 ── */
.nav{background:var(--white);border-bottom:1px solid var(--border);padding:0 16px;display:flex;gap:2px;overflow-x:auto;position:sticky;top:0;z-index:100}
.nav-btn{padding:14px 16px;font-size:13px;font-weight:600;color:var(--text3);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:all 0.2s}
.nav-btn.active{color:var(--green);border-bottom-color:var(--green)}
.nav-btn:hover:not(.active){color:var(--text2)}

/* ── 페이지 ── */
.page{display:none;max-width:720px;margin:0 auto;padding:20px 16px}
.page.active{display:block}

/* ── 카드 ── */
.card{background:var(--white);border-radius:16px;border:1px solid var(--border);padding:18px 20px;margin-bottom:14px}
.card-title{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.card-title span{display:flex;align-items:center;gap:6px}

/* ── 실시간 정보 ── */
.rate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.rate-card{background:var(--gray);border-radius:10px;padding:10px 12px;text-align:center}
.rate-cur{font-size:11px;color:var(--text3);margin-bottom:3px}
.rate-val{font-size:18px;font-weight:700;color:var(--text)}
.rate-chg{font-size:10px;margin-top:2px}
.rate-up{color:var(--green)}.rate-down{color:var(--red)}
.weather-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.weather-box{background:var(--gray);border-radius:10px;padding:12px}
.weather-loc{font-size:11px;color:var(--text3);margin-bottom:6px}
.weather-main{display:flex;align-items:center;gap:10px}
.weather-icon{font-size:28px}
.weather-temp{font-size:24px;font-weight:700}
.weather-desc{font-size:11px;color:var(--text3);margin-top:2px}
.weather-sub{font-size:11px;color:var(--text3);margin-top:6px;display:flex;gap:10px}
.dust-bar{height:8px;border-radius:20px;background:#eee;overflow:hidden;margin:6px 0}
.dust-fill{height:100%;border-radius:20px;transition:width 0.8s}
.time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.time-box{background:var(--gray);border-radius:10px;padding:10px 12px}
.time-country{font-size:11px;color:var(--text3);margin-bottom:3px;display:flex;justify-content:space-between;align-items:center}
.time-val{font-size:16px;font-weight:700}
.time-date{font-size:10px;color:var(--text3);margin-top:1px}
.edit-btn{font-size:10px;color:var(--green);cursor:pointer;background:none;border:none;font-weight:600}

/* ── 환산기 ── */
.convert-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.convert-row input{width:110px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px}
.convert-row select{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;flex:1}
.convert-result{font-size:18px;font-weight:700;color:var(--green);padding:8px 0}

/* ── 미세먼지 ── */
.dust-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dust-box{background:var(--gray);border-radius:10px;padding:12px}
.dust-label{font-size:11px;color:var(--text3);margin-bottom:4px}
.dust-val{font-size:20px;font-weight:700}
.dust-grade{font-size:12px;font-weight:600;padding:2px 10px;border-radius:20px;display:inline-block;margin-top:4px}

/* ── 업무일지 ── */
.form-group{margin-bottom:12px}
.form-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px}
.form-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit}
.form-input:focus{outline:none;border-color:var(--green)}
.form-textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;resize:vertical;min-height:100px}
.form-textarea:focus{outline:none;border-color:var(--green)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tag{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--text2);transition:all 0.15s}
.tag.active{background:var(--green-light);border-color:var(--green-border);color:#085041}
.btn{padding:10px 20px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--text2);transition:all 0.15s}
.btn:hover{background:var(--gray)}
.btn-primary{background:var(--green);border-color:var(--green);color:var(--white)}
.btn-primary:hover{background:#0F6E56}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:8px}
.btn-danger{color:var(--red);border-color:#f0c0c0}
.diary-list{max-height:500px;overflow-y:auto}
.diary-month-group{margin-bottom:8px}
.diary-month-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--green-light);border-radius:10px;cursor:pointer;border:1.5px solid var(--green-border);user-select:none;transition:background 0.15s}
.diary-month-header:hover{background:#c8eede}
.diary-month-body{padding:4px 0 0}
.diary-date-divider{display:flex;align-items:center;gap:10px;margin:14px 0 8px;position:sticky;top:0;z-index:2}
.diary-date-divider-line{flex:1;height:2px;background:linear-gradient(90deg,var(--green),var(--green-border),transparent);border-radius:2px}
.diary-date-divider-label{font-size:12px;font-weight:700;color:var(--white);background:var(--green);padding:3px 12px;border-radius:20px;white-space:nowrap;box-shadow:0 2px 6px rgba(29,158,117,0.25)}
.diary-item{border:1.5px solid var(--border);border-radius:14px;padding:14px;margin-bottom:8px;background:var(--white);border-left:4px solid var(--green-border);transition:border-color 0.2s}
.diary-item:hover{border-left-color:var(--green)}
.diary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--border)}
.diary-who{font-size:13px;font-weight:700;color:var(--green)}
.diary-date{font-size:11px;color:var(--text3)}
.diary-section-label{font-size:11px;color:var(--text3);font-weight:700;margin:8px 0 3px;display:flex;align-items:center;gap:4px}
.diary-content{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:4px;padding:6px 10px;background:var(--gray);border-radius:8px}
.diary-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.diary-tag{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--green-light);color:#085041;font-weight:600}
.xp-pop{position:fixed;top:80px;right:20px;background:var(--green);color:var(--white);font-size:14px;font-weight:700;padding:10px 18px;border-radius:20px;z-index:999;display:none;animation:slideIn 0.3s ease}
@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── 금요미식회 ── */
.friday-disabled{text-align:center;padding:30px;color:var(--text3)}
.friday-disabled .fri-icon{font-size:48px;margin-bottom:10px}
.friday-disabled p{font-size:14px}
.vote-options{display:grid;gap:8px;margin-bottom:14px}
.vote-option{background:var(--gray);border-radius:12px;padding:12px 16px;cursor:pointer;border:2px solid transparent;transition:all 0.2s;display:flex;justify-content:space-between;align-items:center}
.vote-option:hover{border-color:var(--green-border)}
.vote-option.voted{border-color:var(--green);background:var(--green-light)}
.vote-bar-wrap{height:6px;background:#e0e0e0;border-radius:10px;overflow:hidden;flex:1;margin:0 12px}
.vote-bar{height:100%;border-radius:10px;background:var(--green);transition:width 0.5s}
.vote-count{font-size:12px;color:var(--text3);min-width:30px;text-align:right}
.vote-name{font-size:14px;font-weight:600;min-width:80px}
.menu-input-row{display:flex;gap:8px;margin-bottom:12px}
.menu-input-row input{flex:1}

/* ── 개인 탭 ── */
.memo-area{width:100%;min-height:140px;padding:12px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;resize:vertical;line-height:1.6}
.memo-area:focus{outline:none;border-color:var(--green)}
.todo-input-row{display:flex;gap:8px;margin-bottom:12px}
.todo-input-row input{flex:1}
.todo-list{max-height:300px;overflow-y:auto}
.todo-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f5f5f5}
.todo-item:last-child{border-bottom:none}
.todo-cb{width:18px;height:18px;cursor:pointer;accent-color:var(--green)}
.todo-text{flex:1;font-size:14px}
.todo-text.done{text-decoration:line-through;color:var(--text3)}
.todo-del{background:none;border:none;cursor:pointer;color:var(--text3);font-size:18px;padding:0 4px}
.todo-del:hover{color:var(--red)}
.bookmark-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.bookmark-item{background:var(--gray);border-radius:10px;padding:10px 12px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;text-decoration:none;color:var(--text)}
.bookmark-item:hover{background:var(--green-light);color:#085041}
.bookmark-edit{display:none;flex-direction:column;gap:8px}
.bookmark-edit.show{display:flex}
.bookmark-edit-item{display:flex;gap:6px;align-items:center}
.bookmark-edit-item input{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:12px}

/* ── 무역 탭 ── */
.tracking-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tracking-row input{flex:1;min-width:140px}
.tracking-result{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.track-btn{padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--white);text-decoration:none;color:var(--text);transition:all 0.15s}
.track-btn:hover{background:var(--green-light);border-color:var(--green-border);color:#085041}
.holiday-list{max-height:300px;overflow-y:auto}
.holiday-item{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #f5f5f5;font-size:13px}
.holiday-item:last-child{border-bottom:none}
.holiday-flag{margin-right:6px}
.holiday-dday{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--amber-light);color:#854F0B}
.holiday-dday.soon{background:#FCEBEB;color:#A32D2D}
.hs-result{background:var(--gray);border-radius:10px;padding:12px;margin-top:10px;font-size:13px;display:none}

/* ── 대표 탭 ── */
.dday-list{display:flex;flex-direction:column;gap:8px}
.dday-item{background:var(--gray);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.dday-name{font-size:14px;font-weight:600}
.dday-date{font-size:11px;color:var(--text3);margin-top:2px}
.dday-badge{font-size:16px;font-weight:700;color:var(--green)}
.dday-badge.urgent{color:var(--red)}
.dday-badge.soon{color:var(--amber)}
.dday-input-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.dday-input-row input{flex:1;min-width:120px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px}

/* ── 성과 탭 ── */
.char-scene{display:flex;align-items:flex-start;gap:16px;background:var(--gray);border-radius:16px;padding:16px;margin-bottom:14px;flex-wrap:wrap}
.char-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;width:100%}
.char-stage{width:100px;height:110px;position:relative;display:flex;align-items:flex-end;justify-content:center;margin:0 auto}
.char-img{width:90px;height:100px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.15))}
.char-shadow{width:50px;height:8px;background:#c0d0c0;border-radius:50%;position:absolute;bottom:-2px}
.char-selector{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:4px;width:100%}
.char-sel-btn{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--border);background:var(--white);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.char-sel-btn.active{border-color:var(--green);background:var(--green-light)}
.bubble-wrap{flex:1;min-width:0;width:100%}
@media(min-width:480px){
  .char-wrap{width:auto}
  .char-selector{grid-template-columns:repeat(5,1fr);width:200px}
  .char-scene{flex-wrap:nowrap;align-items:flex-end}
  .bubble-wrap{width:auto}
}
@media(max-width:479px){
  .char-scene{flex-direction:column;align-items:center}
  .char-selector{grid-template-columns:repeat(5,1fr);width:100%;max-width:280px}
  .bubble-wrap{width:100%}
}
.bubble-wrap{flex:1}
.bubble{border-radius:16px 16px 16px 4px;padding:14px 16px;font-size:13px;line-height:1.7;border:1.5px solid var(--green-border);background:var(--green-light);color:#074a35}
.bubble b{font-weight:700}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes jump{0%,100%{transform:translateY(0)}40%,60%{transform:translateY(-28px)}}
@keyframes nod{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}70%{transform:rotate(5deg)}}
@keyframes celebrate{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.2) rotate(-12deg)}75%{transform:scale(1.2) rotate(12deg)}}
.anim-float{animation:float 2.6s ease-in-out infinite;transform-origin:center bottom}
.anim-wiggle{animation:wiggle 0.9s ease-in-out infinite;transform-origin:center bottom}
.anim-jump{animation:jump 1.3s ease-in-out infinite;transform-origin:center bottom}
.anim-nod{animation:nod 2s ease-in-out infinite;transform-origin:center bottom}
.anim-celebrate{animation:celebrate 1.1s ease-in-out infinite;transform-origin:center bottom}
.xp-track{height:14px;background:#eee;border-radius:20px;overflow:hidden;margin:10px 0 6px}
.xp-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--green),#5DCAA5);transition:width 0.8s ease}
.ms-row{display:flex;justify-content:space-between;font-size:10px;color:var(--text3)}
.ms-row span.on{color:var(--green);font-weight:700}
.title-banner{border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;border:2px solid;margin-bottom:14px;transition:all 0.4s}
.title-icon-big{font-size:38px;line-height:1;flex-shrink:0}
.title-name{font-size:17px;font-weight:700;margin-bottom:3px}
.title-desc-sm{font-size:12px;opacity:0.72;line-height:1.4}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat-box{background:var(--gray);border-radius:10px;padding:10px;text-align:center}
.stat-icon{font-size:20px;margin-bottom:3px}
.stat-val{font-size:17px;font-weight:700}
.stat-lbl{font-size:10px;color:var(--text3);margin-top:1px}
.badge-grid{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:60px}
.badge-circle{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;border:2px solid}
.badge-gold{background:#FAEEDA;border-color:#EF9F27}
.badge-silver{background:#F1EFE8;border-color:#B4B2A9}
.badge-locked{background:#f5f5f5;border-color:#e0e0e0;opacity:0.4;filter:grayscale(1)}
.badge-lbl{font-size:9px;color:var(--text3);text-align:center;line-height:1.3}

/* ── 알림 ── */
.alert-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.alert-row input{flex:1;min-width:100px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px}
.alert-row select{padding:8px;border:1px solid var(--border);border-radius:8px;font-size:13px}
.alert-item{background:var(--gray);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px}

/* ── 기능 편집 ── */
.feature-edit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.feature-toggle{display:flex;align-items:center;justify-content:space-between;background:var(--gray);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:500}
.toggle{position:relative;width:40px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:20px;cursor:pointer;transition:0.3s}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:white;top:3px;left:3px;transition:0.3s}
.toggle input:checked + .toggle-slider{background:var(--green)}
.toggle input:checked + .toggle-slider::before{transform:translateX(18px)}


/* ── 로그인 화면 ── */
.login-screen{position:fixed;inset:0;background:linear-gradient(135deg,#f0faf5 0%,#e8f5f0 100%);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:20px}
.login-card{background:#fff;border-radius:24px;border:1px solid #e0ede8;padding:36px 32px;max-width:360px;width:90%;text-align:center}
.login-logo{font-size:48px;margin-bottom:8px}
.login-title{font-size:22px;font-weight:700;color:#1D9E75;margin-bottom:4px}
.login-sub{font-size:13px;color:#aaa;margin-bottom:28px;line-height:1.6}
.google-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px 20px;border:1.5px solid #e0e0e0;border-radius:12px;background:#fff;cursor:pointer;font-size:15px;font-weight:600;color:#333;transition:all 0.2s}
.google-btn:hover{border-color:#1D9E75;background:#f6fdf9;transform:translateY(-1px)}
.google-btn img{width:22px;height:22px}
.login-notice{font-size:11px;color:#ccc;margin-top:16px;line-height:1.6}
/* ── 상단 유저 바 ── */
.user-bar{background:#fff;border-bottom:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;justify-content:space-between}
.user-info{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:50%;border:2px solid var(--green-border)}
.user-name{font-size:13px;font-weight:600;color:var(--text)}
.user-email{font-size:11px;color:var(--text3)}
.logout-btn{font-size:12px;color:var(--text3);background:none;border:1px solid var(--border);border-radius:8px;padding:5px 12px;cursor:pointer}
.logout-btn:hover{color:var(--red);border-color:#f0c0c0}


/* ── 재고 탭 ── */
.inv-table{width:100%;border-collapse:collapse;font-size:13px}
.inv-table th{background:var(--green);color:#fff;padding:8px 10px;text-align:left;font-weight:600;font-size:12px}
.inv-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.inv-table tr:hover td{background:var(--gray)}
.inv-table tr.low-stock td{background:#FCEBEB}
.inv-category{font-size:11px;font-weight:700;color:#fff;padding:3px 10px;border-radius:20px;display:inline-block}
.cat-samyang{background:#1D9E75}
.cat-china{background:#EF9F27}
.cat-other{background:#7F77DD}
.inv-qty{font-size:16px;font-weight:700}
.inv-qty.low{color:#E24B4A}
.inv-qty.ok{color:#1D9E75}
.inv-edit-input{width:100%;padding:4px 6px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-family:inherit}
.inv-history{font-size:11px;color:var(--text3);line-height:1.6;max-height:80px;overflow-y:auto}
.inv-section-header{background:var(--green-light);padding:10px 14px;font-size:13px;font-weight:700;color:#085041;border-radius:8px;margin:12px 0 6px;display:flex;justify-content:space-between;align-items:center}
.inv-fullscreen{position:fixed;inset:0;background:#fff;z-index:500;overflow:auto;padding:20px}
.inv-fullscreen-close{position:fixed;top:16px;right:16px;z-index:501}

/* ── 마스코트 & 인사말 ── */
.greeting-banner{background:linear-gradient(135deg,var(--green-light),#d0f5e8);border-radius:16px;padding:16px 20px;margin-bottom:14px;border:1.5px solid var(--green-border);display:flex;align-items:center;gap:14px}
.greeting-mascot{font-size:48px;animation:float 2.6s ease-in-out infinite;flex-shrink:0}
.greeting-text{flex:1}
.greeting-main{font-size:15px;font-weight:700;color:#074a35;margin-bottom:4px;line-height:1.5}
.greeting-sub{font-size:12px;color:#1D9E75;line-height:1.6}
.greeting-time-badge{font-size:10px;padding:2px 8px;border-radius:10px;background:#1D9E75;color:#fff;display:inline-block;margin-bottom:6px}

/* ── 성과 탭 확장 칭호 ── */
.title-tier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:14px}
.tier-card{border-radius:10px;padding:10px;text-align:center;border:2px solid;opacity:0.4;transition:all 0.3s}
.tier-card.unlocked{opacity:1;transform:scale(1.02)}
.tier-card .tier-icon{font-size:24px;margin-bottom:4px}
.tier-card .tier-name{font-size:11px;font-weight:700}
.tier-card .tier-xp{font-size:10px;opacity:0.7}

/* ── MVP 배너 ── */
.mvp-banner{background:linear-gradient(135deg,#FAEEDA,#fff3dc);border:2px solid #EF9F27;border-radius:14px;padding:14px 18px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.mvp-crown{font-size:32px}
.mvp-info{flex:1}
.mvp-label{font-size:11px;color:#633806;font-weight:600;margin-bottom:2px}
.mvp-name{font-size:18px;font-weight:700;color:#412402}

/* ── 출석 체크 표 ── */
.attend-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:14px}
.attend-cell{border-radius:8px;padding:8px 6px;text-align:center;font-size:11px;border:1.5px solid var(--border)}
.attend-cell .att-name{font-weight:700;color:var(--text2);font-size:10px}
.attend-cell .att-status{font-size:16px;margin:2px 0}
.attend-cell.present{background:var(--green-light);border-color:var(--green-border)}
.attend-cell.absent{background:#f9f9f9}
.att-time{font-size:11px;font-weight:700;color:var(--green);margin:2px 0}
.att-late-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;display:inline-block;margin-top:1px}
.att-late-badge.late{background:#FCEBEB;color:#A32D2D}
.att-late-badge.early{background:var(--green-light);color:#085041}
.att-late-badge.ontime{background:#EEF6FF;color:#0C447C}

/* ── 전체 반응형 ── */
@media(max-width:479px){
  .nav{padding:0 8px;gap:0}
  .nav-btn{padding:12px 10px;font-size:12px}
  .page{padding:14px 10px}
  .card{padding:14px 14px;border-radius:12px}
  .card-title{font-size:12px}
  .form-row{grid-template-columns:1fr}
  .rate-grid{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .weather-grid{grid-template-columns:1fr}
  .dust-grid{grid-template-columns:1fr}
  .time-grid{grid-template-columns:repeat(2,1fr)}
  .bookmark-grid{grid-template-columns:repeat(2,1fr)}
  .convert-row{flex-wrap:wrap}
  .convert-row input{width:80px}
  .dday-input-row{flex-direction:column}
  .menu-input-row{flex-direction:column}
  .tracking-row{flex-direction:column}
  .btn{padding:8px 14px;font-size:12px}
  .diary-item{padding:10px}
  .badge-grid{gap:6px}
  .badge-circle{width:42px;height:42px;font-size:18px}
  .title-banner{padding:10px 14px}
  .title-icon-big{font-size:28px}
  .title-name{font-size:14px}
  .inv-table{font-size:11px}
  .inv-table th,.inv-table td{padding:6px 6px}
  .attend-grid{grid-template-columns:repeat(5,1fr);gap:3px}
  .attend-cell{padding:6px 3px}
  .att-name{font-size:9px}
  .mvp-banner{padding:10px 14px}
  .greeting-banner{padding:12px 14px}
  .user-bar{padding:6px 10px}
}
@media(min-width:480px) and (max-width:719px){
  .page{padding:16px 12px}
  .form-row{grid-template-columns:1fr 1fr}
  .weather-grid{grid-template-columns:1fr 1fr}
  .time-grid{grid-template-columns:repeat(3,1fr)}
}


/* ── 미지급금/미수금 탭 ── */
.finance-type-btn{padding:6px 18px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;border:2px solid;transition:all 0.2s}
.finance-type-btn.type-unpaid{background:#FCEBEB;border-color:#E24B4A;color:#A32D2D}
.finance-type-btn.type-unpaid.active{background:#E24B4A;color:#fff}
.finance-type-btn.type-unreceived{background:#EEF6FF;border-color:#4A8FE2;color:#0C447C}
.finance-type-btn.type-unreceived.active{background:#4A8FE2;color:#fff}
.finance-table{width:100%;border-collapse:collapse;font-size:13px}
.finance-table th{padding:9px 10px;text-align:left;font-weight:700;font-size:12px;color:var(--text2);border-bottom:2px solid var(--border)}
.finance-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.finance-table tr:hover td{background:var(--gray)}
.finance-table tr.completed td{opacity:0.45;text-decoration:line-through}
.finance-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;display:inline-block}
.badge-unpaid{background:#FCEBEB;color:#A32D2D}
.badge-unreceived{background:#EEF6FF;color:#0C447C}
.badge-done{background:#E1F5EE;color:#085041}
.finance-amount{font-size:15px;font-weight:700}
.finance-amount.unpaid{color:#E24B4A}
.finance-amount.unreceived{color:#4A8FE2}
.finance-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.finance-sum-box{border-radius:12px;padding:14px 16px;border:2px solid}
.finance-sum-box.unpaid{background:#FCEBEB;border-color:#E24B4A}
.finance-sum-box.unreceived{background:#EEF6FF;border-color:#4A8FE2}
.finance-sum-label{font-size:11px;font-weight:600;margin-bottom:4px}
.finance-sum-label.unpaid{color:#A32D2D}
.finance-sum-label.unreceived{color:#0C447C}
.finance-sum-amount{font-size:20px;font-weight:700}
.finance-sum-amount.unpaid{color:#E24B4A}
.finance-sum-amount.unreceived{color:#4A8FE2}
.finance-sum-count{font-size:11px;opacity:0.7;margin-top:2px}

/* ── 월간 캘린더 ── */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-title{font-size:16px;font-weight:700;color:var(--text)}
.cal-nav{display:flex;gap:6px}
.cal-nav-btn{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border);background:var(--white);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.cal-nav-btn:hover{background:var(--green-light);border-color:var(--green)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{text-align:center;font-size:10px;font-weight:700;color:var(--text3);padding:4px 0;margin-bottom:2px}
.cal-dow:first-child{color:#E24B4A}
.cal-dow:last-child{color:#4A8FE2}
.cal-cell{min-height:70px;border-radius:8px;padding:4px;border:1.5px solid transparent;cursor:pointer;transition:all 0.15s;background:var(--white);position:relative}
.cal-cell:hover{border-color:var(--green-border);background:var(--green-light)}
.cal-cell.today{border-color:var(--green);background:var(--green-light)}
.cal-cell.other-month{opacity:0.35}
.cal-cell.sunday .cal-day-num{color:#E24B4A}
.cal-cell.saturday .cal-day-num{color:#4A8FE2}
.cal-day-num{font-size:12px;font-weight:700;margin-bottom:2px}
.cal-dot-wrap{display:flex;flex-direction:column;gap:1px;overflow:hidden;max-height:46px}
.cal-event{font-size:9px;font-weight:600;padding:1px 4px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px}
.cal-event.cat-team{background:#E1F5EE;color:#085041}
.cal-event.cat-personal{background:#EEF6FF;color:#0C447C}
.cal-event.cat-leave{background:#FAEEDA;color:#633806}
.cal-event.cat-meeting{background:#EEEDFE;color:#3C3489}
.cal-event.cat-trip{background:#FCEBEB;color:#A32D2D}
.cal-more{font-size:9px;color:var(--text3);padding:0 2px}

/* 일정 범례 */
.cal-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cal-legend-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text2)}
.cal-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.leg-team{background:#1D9E75}
.leg-personal{background:#4A8FE2}
.leg-leave{background:#EF9F27}
.leg-meeting{background:#7F77DD}
.leg-trip{background:#E24B4A}

/* 일정 등록 모달 */
.cal-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.cal-modal{background:var(--white);border-radius:20px;padding:24px;width:100%;max-width:400px;box-shadow:0 8px 40px rgba(0,0,0,0.18)}
.cal-modal-title{font-size:16px;font-weight:700;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.cal-modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text3)}
.cat-select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.cat-btn{padding:7px 4px;border-radius:8px;border:2px solid var(--border);background:var(--white);cursor:pointer;font-size:11px;font-weight:600;text-align:center;transition:all 0.15s}
.cat-btn.active{border-color:currentColor}
.cat-btn.cat-team-btn{color:#085041}.cat-btn.cat-team-btn.active{background:#E1F5EE;border-color:#1D9E75}
.cat-btn.cat-personal-btn{color:#0C447C}.cat-btn.cat-personal-btn.active{background:#EEF6FF;border-color:#4A8FE2}
.cat-btn.cat-leave-btn{color:#633806}.cat-btn.cat-leave-btn.active{background:#FAEEDA;border-color:#EF9F27}
.cat-btn.cat-meeting-btn{color:#3C3489}.cat-btn.cat-meeting-btn.active{background:#EEEDFE;border-color:#7F77DD}
.cat-btn.cat-trip-btn{color:#A32D2D}.cat-btn.cat-trip-btn.active{background:#FCEBEB;border-color:#E24B4A}
/* 스크롤바 */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ddd;border-radius:10px}

/* ── 메모 탭 ── */
#memo-tabs{overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
#memo-tabs::-webkit-scrollbar{display:none}

/* ── 공동메모 / 알림 ── */
.notice-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:0 4px;margin-left:4px}
/* ── 게스트 블러 ── */
.guest-blur { position:relative; min-height:80px; }
.guest-blur > * { pointer-events:none; user-select:none; }
.guest-blur::after {
  content:'🔒 팀원만 열람 가능합니다';
  position:absolute; inset:0;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:#999;
  border-radius:14px; z-index:10; letter-spacing:0.3px;
}

/* ══════════════════════════════════════════════════
   견적서 생성기 — 스코프: #page-quote
══════════════════════════════════════════════════ */

#page-quote {
  font-family: '맑은 고딕', 'Malgun Gothic', '나눔고딕', AppleGothic, sans-serif;
  font-size: 12px;
  background: #c8c8c8;
  padding: 20px;
  overflow-y: auto;
}

/* ── 툴바 ── */
#page-quote .toolbar {
  background: white;
  padding: 10px 16px;
  margin-bottom: 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 210mm;
  margin-left: auto;
  margin-right: auto;
}
#page-quote .toolbar-title { font-size: 14px; font-weight: 700; color: #222; white-space: nowrap; }
#page-quote .sep { width: 1px; height: 22px; background: #ddd; flex-shrink: 0; }
#page-quote .vat-group { display: flex; gap: 10px; align-items: center; font-size: 12px; }
#page-quote .vat-group label { cursor: pointer; display: flex; align-items: center; gap: 4px; }
#page-quote .btn {
  padding: 6px 12px; border-radius: 6px; border: none;
  cursor: pointer; font-size: 12px; font-weight: 500; white-space: nowrap;
}
#page-quote .btn-blue  { background: #1a5fb4; color: white; }
#page-quote .btn-blue:hover  { background: #1249a0; }
#page-quote .btn-gray  { background: #efefef; color: #333; }
#page-quote .btn-gray:hover  { background: #ddd; }
#page-quote .btn-green { background: #2e7d32; color: white; }
#page-quote .btn-green:hover { background: #1b5e20; }
#page-quote .btn-red   { background: #c62828; color: white; font-size: 10.5px; padding: 3px 7px; border-radius: 4px; }
#page-quote .btn-orange { background: #e65100; color: white; }
#page-quote .btn-orange:hover { background: #bf360c; }

/* 견적서 이름 입력 */
#page-quote #quote-name {
  border: 1px solid #ddd; border-radius: 6px;
  padding: 5px 9px; font-size: 12px; width: 140px;
  font-family: inherit;
}
#page-quote #quote-name:focus { outline: none; border-color: #1a5fb4; }

/* 공급자 프로필 select */
#page-quote #profile-select {
  border: 1px solid #ddd; border-radius: 6px;
  padding: 5px 6px; font-size: 12px; font-family: inherit;
  max-width: 120px; cursor: pointer;
}
#page-quote #profile-select:focus { outline: none; border-color: #1a5fb4; }

/* ── 모달 ── */
#page-quote .modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 9999;
  align-items: center; justify-content: center;
}
#page-quote .modal-overlay.open { display: flex; }
#page-quote .modal-box {
  background: white; border-radius: 10px; padding: 24px;
  min-width: 360px; max-width: 480px; max-height: 75vh;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
#page-quote .modal-box h3 { font-size: 15px; font-weight: 700; color: #222; }
#page-quote .modal-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
#page-quote .modal-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid #eee; border-radius: 6px;
  font-size: 12px;
}
#page-quote .modal-item:hover { background: #f5f5f5; }
#page-quote .modal-item .item-name { flex: 1; font-weight: 600; }
#page-quote .modal-item .item-date { font-size: 11px; color: #888; }
#page-quote .modal-footer { display: flex; justify-content: flex-end; }
#page-quote .modal-empty { text-align: center; color: #aaa; padding: 20px; font-size: 13px; }

/* ── 문서 ── */
#page-quote .doc {
  background: white;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 15mm 14mm 13mm;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}

/* ── 제목 ── */
#page-quote .doc-title {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.7em;
  padding-bottom: 10px;
  margin-bottom: 26px;
  border-bottom: 3px double #111;
}

/* ── 헤더: 수신자(40%) + 공급자(60%) ── */
#page-quote .doc-header {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0;
  margin-bottom: 14px;
  align-items: stretch;
}

/* 수신자 */
#page-quote .recipient-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding-right: 14px;
}
#page-quote .recipient-name {
  font-size: 18px;
  font-weight: 800;
  border-bottom: 2.5px solid #111;
  padding-bottom: 5px;
  letter-spacing: 0.02em;
}
#page-quote .recipient-sub { font-size: 11.5px; color: #333; }
#page-quote .doc-date      { font-size: 11.5px; color: #333; margin-top: 4px; }

/* 공급자 */
#page-quote .supplier-wrap { position: relative; }
#page-quote .stamp-area {
  position: absolute;
  right: 4px; top: 8px;
  width: 63px; height: 63px;
  z-index: 10; pointer-events: none;
}
#page-quote .stamp-area img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0.82;
  mix-blend-mode: multiply;
}

#page-quote table.supplier {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  border: 1.5px solid #222;
  table-layout: fixed;
}
#page-quote table.supplier td {
  border: 1px solid #555;
  padding: 4px 7px;
  line-height: 1.5;
  vertical-align: middle;
  overflow: hidden;
}
#page-quote .s-gonggupja {
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
  width: 24px;
  font-size: 12px;
  line-height: 2;
  background: #e0e0e0;
  padding: 4px 2px;
  border-right: 1.5px solid #222 !important;
}
#page-quote .s-lbl {
  background: #f2f2f2;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  width: 54px;
  font-size: 10.5px;
  color: #333;
}
/* contenteditable: 텍스트처럼 보이게 — 박스 없음 */
#page-quote [contenteditable] {
  outline: none;
  min-width: 4px;
}
#page-quote [contenteditable]:focus {
  background: #fffde8;
  border-radius: 2px;
}
/* 공급자 td 자체가 contenteditable인 경우 */
#page-quote table.supplier td[contenteditable] {
  outline: none;
  cursor: text;
}
#page-quote table.supplier td[contenteditable]:focus {
  background: #fffde8;
  outline: none;
}

/* ── 품목 테이블 ── */
#page-quote table.items {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  border: 1.5px solid #222;
  margin-bottom: 0;
}
#page-quote table.items th {
  background: #e8e8e8;
  border: 1px solid #444;
  padding: 5px 4px;
  text-align: center;
  font-weight: 700;
  font-size: 11.5px;
}
#page-quote table.items td {
  border: 1px solid #888;
  padding: 2px 4px;
  height: 23px;
}
#page-quote table.items td.r { text-align: right; }
#page-quote table.items td.c { text-align: center; }
#page-quote table.items tbody tr:nth-child(even) td { background: #fafafa; }
#page-quote table.items input {
  width: 100%; border: none; outline: none;
  background: transparent; font-family: inherit;
  font-size: 11px; padding: 0;
}
#page-quote table.items input.r { text-align: right; }
#page-quote table.items input.c { text-align: center; }
#page-quote table.items input::placeholder { color: transparent; }
#page-quote table.items input[type=number]::-webkit-inner-spin-button,
#page-quote table.items input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
#page-quote table.items input[type=number] { -moz-appearance: textfield; appearance: textfield; }
#page-quote .del-col { width: 22px; border: none !important; background: none !important; text-align: center; padding: 0 !important; }
#page-quote .add-row-wrap { margin: 3px 0 0; }

/* ── 합계 (tfoot) ── */
#page-quote table.items tfoot td {
  border: 1px solid #555;
  padding: 4px 6px;
  font-size: 11.5px;
  background: #f4f4f4;
}
#page-quote table.items tfoot .tf-label { font-weight: 700; text-align: center; }
#page-quote table.items tfoot .tf-sub-label { font-weight: 500; font-size: 10.5px; color: #555; }
#page-quote table.items tfoot .tf-amt { text-align: right; font-weight: 700; }
#page-quote table.items tfoot tr.tf-grand td {
  background: #dde4ee;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 6px;
}

/* ── 조건 ── */
#page-quote .conditions {
  border: 1.5px solid #333;
  margin-top: 14px;
  padding: 9px 14px;
  font-size: 11px;
  line-height: 2;
  background: #fafafa;
}
#page-quote .cond-row { display: flex; }
#page-quote .cond-key { font-weight: 700; white-space: nowrap; min-width: 72px; }

/* ── 인쇄 ── */
@media print {
  body > *:not(#page-quote) { display: none !important; }
  .nav, .user-bar, .greeting-banner, #guest-badge { display: none !important; }
  #page-quote { display: block !important; padding: 0 !important; background: white !important; }
  #page-quote .toolbar, #page-quote .del-col, #page-quote .add-row-wrap { display: none !important; }
  #page-quote .doc { width: 100% !important; margin: 0 !important; padding: 10mm !important; box-shadow: none !important; }
  #page-quote [contenteditable]:focus { background: transparent !important; }
  @page { size: A4; margin: 0; }
}

#page-quote { min-height: calc(100vh - 56px); }

/* ── 햄버거 메뉴 ── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 14px;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text2);
  border-radius: 2px;
  transition: all 0.25s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-items { display: flex; gap: 2px; }

@media (max-width: 600px) {
  .hamburger-btn { display: flex; }
  .nav { padding: 0 8px; flex-wrap: wrap; align-items: center; overflow: visible; }
  .nav-items {
    display: none;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid var(--border);
    padding: 6px 0;
    gap: 0;
  }
  .nav-items.open { display: flex; }
  .nav-items .nav-btn {
    text-align: left;
    padding: 12px 16px;
    border-bottom: none;
    border-left: 3px solid transparent;
    font-size: 14px;
    width: 100%;
  }
  .nav-items .nav-btn.active {
    border-left-color: var(--green);
    border-bottom-color: transparent;
    background: var(--green-light);
  }
}