:root{font-family:system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;color-scheme:light;background:var(--bg);color:var(--ink)}*{box-sizing:border-box}body{margin:0}.wrap{max-width:550px;margin:auto;padding:30px 16px 46px}header{padding:10px 4px 20px}h1{font-size:28px;margin:7px 0 4px}h2{font-size:18px;margin:0 0 9px}header p,.tag,.hint{color:var(--muted);font-size:13px;line-height:1.6}.eyebrow{font-size:10px;color:var(--accent);letter-spacing:2px}nav{display:flex;gap:6px;margin-bottom:14px}button{border:1px solid var(--border);background:var(--soft);border-radius:13px;color:var(--ink);padding:12px 13px;font-size:14px;cursor:pointer;touch-action:manipulation}button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:750}button.selected{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}button.tab{flex:1;font-weight:700}.hidden{display:none}.box{border:1px solid var(--border);border-radius:20px;background:var(--card);padding:19px;margin-bottom:12px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;text-align:center}.stats b{display:block;font-size:21px}.stats small{font-size:11px;color:var(--muted)}.center{text-align:center}.clock{font-weight:800;font-size:74px;line-height:1.25;letter-spacing:-4px;font-variant-numeric:tabular-nums}.big{color:var(--accent);font-size:24px;font-weight:800}.meter{height:9px;border-radius:100px;background:var(--track);overflow:hidden;margin:22px 0 15px}#brewFill{height:100%;width:0;background:var(--accent);transition:width .1s}.actions{display:flex;gap:8px;margin-top:12px}.actions button{flex:1}.actions input{flex:1;min-width:0}input,textarea,select{color:var(--ink);width:100%;background:var(--input);border:1px solid var(--border-strong);border-radius:10px;padding:13px;font-size:16px}textarea{margin-top:10px;resize:vertical}.fieldlabel{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}.secondary.full{display:block;width:100%;margin-top:15px}.task{display:flex;align-items:center;gap:11px;padding:12px 4px;border-bottom:1px solid #6c514030}.task input{width:20px;height:20px}.task span{flex:1}.task.done span{text-decoration:line-through;color:var(--muted)}.task button{padding:6px 10px}#messages{min-height:180px;max-height:430px;overflow:auto;padding:9px 0}.bubble{white-space:pre-wrap;line-height:1.5;overflow-wrap:anywhere;padding:12px;border-radius:12px;margin:9px 0;font-size:14px}.bubble.user{background:var(--soft);margin-left:34px}.bubble.bot{background:var(--card);margin-right:22px}.empty{font-size:13px;color:var(--muted)}footer{font-size:11px;color:var(--muted);margin-top:20px;line-height:1.6}
/* 교대근무 달력 */
nav{flex-wrap:wrap}button.tab{min-width:calc(25% - 6px);padding:11px 5px;font-size:13px}
.calendar-title{display:flex;justify-content:space-between;gap:6px;align-items:flex-start}
.calendar-title button{padding:8px 11px}
.settings{padding:14px 0;border-top:1px solid var(--border);margin-top:14px}
.settings .fieldlabel{margin-top:13px}
.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:22px;margin-bottom:12px}
.calendar-head strong{flex:1;text-align:center;font-size:19px}
.calendar-head button{min-width:40px;padding:8px 12px}
.cal-weekdays,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-weekdays span{text-align:center;font-size:11px;color:var(--muted);padding-bottom:8px}
.cal-grid button{position:relative;border:1px solid var(--border);min-width:0;min-height:60px;background:var(--input);border-radius:8px;padding:7px 2px 4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;color:var(--ink);font-size:12px}
.cal-grid button.other{opacity:.35}.cal-grid button.today{border-color:var(--accent)}.cal-grid button.sel{outline:2px solid var(--accent);outline-offset:-2px}.cal-grid button .cal-mini{font-weight:750;font-size:10px;line-height:1.3;padding:2px 4px;border-radius:6px}
.cal-mini.day,.legend .day,.pill.day{background:#ca874c;color:var(--accent-ink)}.cal-mini.night,.legend .night,.pill.night{background:#5c86d2;color:#fff}.cal-mini.off,.legend .off,.pill.off{background:#60957b;color:#fff}.legend .extra{background:var(--marker)}.cal-grid button .star{position:absolute;top:3px;right:4px;color:var(--marker);font-size:10px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:14px}.legend span{display:flex;align-items:center;gap:4px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.cal-selected{margin:12px 0}.pill{display:inline-flex;align-items:center;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:750}
.events{margin-bottom:14px}.event-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #604a393b;padding:9px 0;font-size:13px}.event-row span{flex:1;overflow-wrap:anywhere}.event-row button{padding:5px 9px;font-size:12px}.event-kind{font-size:10px;color:var(--muted)}
#eventTime{max-width:130px;min-width:0}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--soft);border-radius:13px;color:var(--ink);padding:12px 13px;font-size:14px;text-decoration:none;flex:1;min-width:0;text-align:center}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:750}.btn.secondary{display:flex;width:100%;margin-top:8px}
@media(max-width:370px){.cal-grid button{min-height:53px}.cal-grid button .cal-mini{font-size:9px}.cal-weekdays,.cal-grid{gap:2px}}

/* 개인 교대근무 현황 */
.shift-now{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0 8px}
.shift-now>div{border:1px solid var(--border);border-radius:13px;background:var(--soft);padding:12px;min-width:0}
.shift-now strong{display:block;margin-top:5px;color:var(--ink);font-size:16px}
.shift-now .tag{font-size:11px}

.timetree-guide{margin-top:14px;color:var(--ink);font-size:13px}.timetree-guide summary{cursor:pointer;font-weight:700}.timetree-guide ul{line-height:1.9;padding-left:20px}

/* 커피 레시피 직접 편집 (모바일 최적화) */
.coffee-stats{margin-top:15px}
#coffee .calendar-title h2{margin:3px 0 0}
#brewSettingsBtn{white-space:nowrap;padding:9px 10px;font-size:12px}
#brewSettings h2{margin:0 0 6px}
.brew-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.brew-edit-grid label{display:block;min-width:0}
.brew-table-header,.brew-edit-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,1fr);gap:6px;align-items:center}
.brew-table-header{color:var(--muted);font-size:11px;margin-top:20px;padding:0 2px 8px;border-bottom:1px solid var(--border)}
.brew-edit-row{margin-top:8px}
.brew-edit-row strong{font-size:12px;line-height:1.25}
.brew-edit-row input{padding:10px 7px;font-size:15px;text-align:center;min-width:0}
.brew-edit-row .brew-fixed{background:var(--soft);color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:11px 4px;font-size:12px;text-align:center}
.hint.error{color:var(--error)}.hint.success{color:var(--success)}
@media(max-width:360px){.brew-table-header{font-size:10px}.brew-edit-row strong{font-size:11px}.brew-edit-row input{font-size:14px;padding:10px 4px}}

/* 금융 바로가기: 숫자는 저장하지 않고 단축어 이름만 저장 */
nav button.tab{min-width:calc(33.33% - 6px)}
#finance h3{font-size:16px;margin:12px 0}
#finance .fieldlabel{margin-top:14px}
#finance .warn{color:var(--warning)}
.bank-list{margin:15px 0}
.bank-row{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:12px 10px;margin-bottom:8px;border:1px solid var(--border);border-radius:13px;background:var(--card)}
.bank-details{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.bank-details strong{font-size:15px}.bank-details span{font-size:12px;color:var(--muted)}.bank-details small{font-size:11px;color:var(--muted)}
.bank-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.bank-actions .btn{min-width:0;padding:10px;font-size:12px}.bank-actions button{padding:10px;font-size:12px}
.help-steps{padding-left:20px;line-height:1.85;font-size:13px}
#finance .btn.full{display:flex;width:100%}
@media(max-width:390px){.bank-row{flex-wrap:wrap}.bank-actions{width:100%}.bank-actions .btn{flex:1}}


/* ===== v4.7: 사용자가 즉시 바꿀 수 있는 테마 5종 ===== */
:root,[data-theme="mint"]{
  --bg:#F1F8F6;--card:#FFFFFF;--input:#FFFFFF;--ink:#193C36;--muted:#648078;
  --accent:#208A77;--accent-ink:#FFFFFF;--soft:#E4F2EC;--border:#D7E7E0;--border-strong:#ACD0C4;
  --track:#D9EDE5;--marker:#BD8251;--success:#217658;--error:#B43142;--warning:#A55E2B;
  --day:#D98A42;--night:#4E7FC7;--off:#4A967C;--shadow:0 10px 28px rgba(32,90,75,.055);color-scheme:light
}
[data-theme="sky"]{
  --bg:#F0F6FF;--card:#FFFFFF;--input:#FFFFFF;--ink:#243E5D;--muted:#6A83A0;
  --accent:#3376D0;--accent-ink:#FFFFFF;--soft:#E7F0FF;--border:#D8E5F7;--border-strong:#A5C3EE;
  --track:#DFEAFB;--marker:#BA7A40;--success:#237B5B;--error:#B43142;--warning:#AA5A25;
  --day:#D68A43;--night:#4B7FCB;--off:#3E947B;--shadow:0 10px 28px rgba(51,98,170,.065);color-scheme:light
}
[data-theme="lavender"]{
  --bg:#F6F3FF;--card:#FFFFFF;--input:#FFFFFF;--ink:#42395D;--muted:#81759E;
  --accent:#7863BD;--accent-ink:#FFFFFF;--soft:#EEE9FA;--border:#E5DDF3;--border-strong:#C3B3E2;
  --track:#E9E2F8;--marker:#AF7047;--success:#257755;--error:#B43142;--warning:#9C592B;
  --day:#D58B4E;--night:#597DC5;--off:#4D927A;--shadow:0 10px 28px rgba(92,73,154,.055);color-scheme:light
}
[data-theme="coral"]{
  --bg:#FFF7EF;--card:#FFFFFF;--input:#FFFFFF;--ink:#583F35;--muted:#97796D;
  --accent:#C97350;--accent-ink:#FFFFFF;--soft:#FFF0E5;--border:#F0E0D5;--border-strong:#E3B9A8;
  --track:#F9E7DC;--marker:#A26B38;--success:#27765D;--error:#B43142;--warning:#9C592B;
  --day:#D0803C;--night:#577FC5;--off:#4B9078;--shadow:0 10px 28px rgba(161,91,66,.06);color-scheme:light
}
[data-theme="dark"]{
  --bg:#0C1423;--card:#19263A;--input:#101C2E;--ink:#EAF0FA;--muted:#ACBCD3;
  --accent:#8EAEFF;--accent-ink:#101B32;--soft:#263954;--border:#33465F;--border-strong:#637995;
  --track:#33465F;--marker:#FFD498;--success:#9AE1BC;--error:#FFA1A7;--warning:#FAD195;
  --day:#B97B3E;--night:#4C70B6;--off:#397A67;--shadow:0 10px 28px rgba(0,0,0,.14);color-scheme:dark
}
html{background:var(--bg);color:var(--ink)}
body{background:var(--bg);color:var(--ink);transition:background .18s ease,color .18s ease}
.wrap{padding-top:23px}
.app-header{padding:4px 2px 16px}
.header-top{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:7px}
.header-actions{display:flex;gap:6px}
.header-quick{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:750;color:var(--ink);text-decoration:none;border:1px solid var(--border);background:var(--card);border-radius:11px;padding:8px 9px;min-height:37px;white-space:nowrap}
.header-quick span:first-child{font-size:15px}
header h1{font-size:clamp(26px,7vw,30px);margin:6px 0 2px;letter-spacing:-.8px}
.sparkle{color:var(--accent)}
header p{margin:0}
.box{box-shadow:var(--shadow)}
button,.btn{transition:background .14s,color .14s,border-color .14s}
button, .btn{border-color:var(--border);background:var(--soft);color:var(--ink)}
button.primary,.btn.primary,button.selected{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
button.tab{font-size:12px;min-width:calc(33.333% - 6px);border-radius:12px}
input,textarea,select{background:var(--input);border-color:var(--border-strong);color:var(--ink)}
input:focus,textarea:focus,select:focus,button:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.clock{color:var(--ink)}.big{color:var(--accent)}
.meter{background:var(--track)}#brewFill{background:var(--accent)}
.cal-grid button{border-color:var(--border);background:var(--input);color:var(--ink)}
.cal-grid button.today{border-color:var(--accent)}
.cal-grid button.sel{outline-color:var(--accent)}
.cal-grid button.other{opacity:.55}
.cal-mini.day,.legend .day,.pill.day{background:var(--day);color:white}
.cal-mini.night,.legend .night,.pill.night{background:var(--night);color:white}
.cal-mini.off,.legend .off,.pill.off{background:var(--off);color:white}
.legend .extra{background:var(--marker)}
.cal-grid button .star{color:var(--marker)}
.timetree-guide{color:var(--ink)}
.shift-now>div{background:var(--soft);border-color:var(--border)}
.shift-now strong{color:var(--ink)}
.brew-edit-row .brew-fixed{background:var(--soft);color:var(--muted);border-color:var(--border)}
.brew-table-header{color:var(--muted);border-color:var(--border)}
.bank-row{background:var(--soft);border-color:var(--border)}
.bank-details span,.bank-details small{color:var(--muted)}
.task.done span{color:var(--muted)}
.task{border-color:var(--border)}
.event-row{border-color:var(--border)}
#finance .warn{color:var(--warning)}.hint.error{color:var(--error)}.hint.success{color:var(--success)}
.tag,.hint,.fieldlabel,.cal-weekdays span,.stats small{color:var(--muted)}
.eyebrow{color:var(--accent);font-weight:800;letter-spacing:1.5px}
footer{color:var(--muted)}
.btn.secondary{border-color:var(--border);background:var(--soft);color:var(--ink)}
.theme-drawer{margin-bottom:16px;padding:18px;border:1px solid var(--border);border-radius:19px;background:var(--card);box-shadow:var(--shadow)}
.theme-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:13px}
.theme-head h2{font-size:17px;margin:1px 0 2px}.theme-head .hint{margin:0}
.theme-close{min-width:36px;min-height:36px;padding:7px;font-size:16px}
.theme-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.theme-choice{display:flex;align-items:center;gap:8px;min-width:0;min-height:64px;text-align:left;padding:9px;border:1px solid var(--border);background:var(--input);border-radius:13px;color:var(--ink)}
.theme-choice strong{display:block;font-size:12px;line-height:1.35}
.theme-choice small{display:block;font-size:10px;color:var(--muted);line-height:1.35;margin-top:3px}
.theme-choice[aria-pressed="true"]{border:2px solid var(--accent);background:var(--soft);padding:8px}
.theme-check{margin-left:auto;color:var(--accent);opacity:0;font-size:15px;font-weight:900}
.theme-choice[aria-pressed="true"] .theme-check{opacity:1}
.swatch{display:block;width:28px;height:32px;flex-shrink:0;border-radius:9px;border:3px solid #ffffff;background:linear-gradient(135deg,var(--swatch1) 0% 48%,var(--swatch2) 49% 100%);box-shadow:0 1px 4px #00000028}
.mint-swatch{--swatch1:#F1F8F6;--swatch2:#208A77}
.sky-swatch{--swatch1:#F0F6FF;--swatch2:#3376D0}
.lavender-swatch{--swatch1:#F6F3FF;--swatch2:#7863BD}
.coral-swatch{--swatch1:#FFF7EF;--swatch2:#C97350}
.dark-swatch{--swatch1:#0C1423;--swatch2:#8EAEFF}
#themeStatus{margin:10px 0 0}
.deploy-link-box{display:flex;align-items:center;gap:11px;margin-top:19px;padding:14px;border-radius:14px;background:var(--soft);border:1px solid var(--border)}
.deploy-icon{font-size:25px}.deploy-desc{display:flex;flex-direction:column;gap:3px}.deploy-desc strong{font-size:14px}.deploy-desc small{color:var(--muted);font-size:11px}
.tiiny-link{margin-top:9px!important}
@media(max-width:370px){.theme-choices{grid-template-columns:1fr}.theme-choice{min-height:54px}.header-quick{padding:7px;font-size:10px}.wrap{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){body,button,.btn{transition:none}}


/* v4.8 — 달력 근무명은 색상 배지 없이 글자만 표시. 다크 테마에서도 검정 글자 가독성 유지. */
#calendar .cal-grid button {
  background:#FFFFFF;
  color:#191919;
  border-color:#DFE3E8;
}
#calendar .cal-grid button .cal-day {color:#191919}
#calendar .cal-grid button .cal-mini {
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  font-size:11px;
  font-weight:700;
  line-height:1.3;
}
#calendar .cal-grid button .cal-mini.day,
#calendar .cal-grid button .cal-mini.night,
#calendar .pill.day,
#calendar .pill.night,
#calendar .shift-now strong.day,
#calendar .shift-now strong.night {color:#171717}
#calendar .cal-grid button .cal-mini.off,
#calendar .pill.off,
#calendar .shift-now strong.off {color:#D22030}
#calendar .cal-selected {
  background:#FFFFFF;
  border-radius:9px;
  padding:8px 10px;
  display:inline-flex;
}
#calendar .pill {
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  font-weight:700;
  font-size:14px;
}
#calendar .shift-now>div {
  background:#FFFFFF;
  border-color:#DFE3E8;
}
#calendar .shift-now .tag {color:#5F6368}
#calendar .shift-now strong {color:#171717}
#calendar .legend {
  display:flex;
  background:#FFFFFF;
  border-radius:9px;
  padding:8px 10px;
  gap:12px;
}
#calendar .legend span {color:#171717}
#calendar .legend .legend-off {color:#D22030}
#calendar .legend .dot.day,
#calendar .legend .dot.night,
#calendar .legend .dot.off {display:none}
#calendar .legend .dot.extra {background:#A76A25}

/* ===== v5.0 앱 확장 공통 스타일 ===== */
nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px}
nav button.tab{min-width:0;flex:1 1 calc(25% - 7px);padding:10px 4px;font-size:11px}
.home-hero{background:var(--card);border:1px solid var(--border-strong);padding:22px 18px}
.hero-shift{display:block;font-size:35px;letter-spacing:-1px;margin:8px 0}
.home-metrics{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.home-metrics span{display:inline-block;border-radius:10px;background:var(--soft);padding:10px 12px;font-size:13px;font-weight:700}
.home-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}
.home-tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;padding:16px 13px;border-radius:15px;background:var(--input);border:1px solid var(--border);min-height:112px}
.home-tile .tile-emoji{font-size:24px;margin-bottom:4px}.home-tile strong{font-size:15px}.home-tile small{color:var(--muted)}
.home-edit-row{display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--border);padding:7px 0}
.home-edit-row input[type=checkbox]{width:20px;height:20px}.home-edit-row span{flex:1;font-size:13px}.home-edit-row button{min-width:34px;padding:8px}
.home-edit-row button:disabled{opacity:.25}
#brewPresetSelect{width:100%;margin-bottom:7px}
.three-field,.two-field{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.three-field label,.two-field label{font-size:12px;font-weight:600;color:var(--muted);min-width:0}
.three-field label select,.three-field label input,.two-field label input{display:block;width:100%;margin-top:6px}
.three-field label:last-child{grid-column:span 2}
.task-details{display:flex;flex-direction:column;min-width:0;flex:1;gap:4px}.task-details strong{font-weight:650;overflow-wrap:anywhere}.task-details small{font-size:11px;color:var(--muted)}
.shortcut-row{display:flex;gap:8px;align-items:center;margin:9px 0}.shortcut-row>a{flex:1}.shortcut-row button{flex:0 0 auto}
.result-panel{background:var(--soft);border:1px solid var(--border);border-radius:15px;padding:20px 13px;text-align:center;font-size:20px;font-weight:750;margin-top:15px;overflow-wrap:anywhere}
.shift-reminders{margin-top:15px}.shift-reminders summary{cursor:pointer;font-weight:650;font-size:13px;margin-top:12px}.shift-reminders .warn{color:var(--warning)}
.shift-reminders button{font-size:12px}
#mlUsageFill{height:100%;background:var(--accent);width:0%}
@media(max-width:370px){nav button.tab{flex-basis:calc(33% - 6px)}.home-tile{padding:13px 10px}.home-tile strong{font-size:13px}}

/* v5.1: 출근 알람 버튼 */
.commute-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}
.commute-card{background:var(--card);border:1px solid var(--border-strong);border-radius:15px;padding:12px;min-width:0;display:flex;flex-direction:column;gap:7px}
.commute-card strong{font-size:15px}.commute-hours{font-size:12px;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.commute-card a.btn{display:flex;justify-content:center;align-items:center;text-align:center;margin-top:auto;padding:11px 6px;line-height:1.35;font-size:12px}
.commute-card small{font-size:10px;line-height:1.5;color:var(--muted)}
.shift-reminders a.btn{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}
.commute-help{margin-top:10px}.commute-subtitle{margin-top:25px}
.commute-four-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}
.commute-followup{display:flex;align-items:end;gap:12px;margin-top:12px}.commute-followup>label:first-child{flex:1;min-width:0}
.commute-checkbox{display:flex;align-items:center;gap:8px;flex:1;padding-bottom:13px;color:var(--ink);font-size:12px}
.commute-checkbox input{width:20px;height:20px;flex-shrink:0}
.shift-reminders #exportShiftAlarms{margin-top:9px}
@media(max-width:360px){.commute-grid{gap:6px}.commute-card{padding:9px}.commute-card strong{font-size:12px}}