:root{
    --bg:#f7f6f3;--surface:#fffefc;--border:#e4e1da;--border-strong:#cfcabe;
    --header-bg:#f1efe9;--text:#2c2a26;--text-muted:#7a7568;
    --accent:#3f6fea;--accent-soft:#eaf0ff;
    --green:#2f9e68;--green-soft:#e8f8ef;
    --radius:8px;--shadow:0 1px 3px rgba(40,35,20,.08)
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#1c1b19;--surface:#242320;--border:#39362f;--border-strong:#4a463c;
      --header-bg:#2a2825;--text:#e8e5de;--text-muted:#a19c8d;
      --accent:#7ea1ff;--accent-soft:#25304d;
      --green:#5cc490;--green-soft:#1c3226;
      --shadow:0 1px 4px rgba(0,0,0,.35)
    }
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;font-family:'Google Sans',Roboto,'Segoe UI',Arial,sans-serif;color:var(--text);background:var(--bg)}
  .toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface)}
  .toolbar h1{font-size:14px;font-weight:600;margin:0 16px 0 0;white-space:nowrap;letter-spacing:.1px}
  .toolbar .title-actions{display:inline-flex;align-items:center;gap:5px;margin-right:8px}
  .toolbar .title-actions button{font-size:12px;padding:4px 9px;white-space:nowrap}
  .toolbar .title-actions .management-undo-btn:first-child{color:var(--accent)}
  .toolbar .title-actions .management-undo-btn:last-child{color:var(--green)}
  .toolbar .spacer{flex:1}
  .toolbar form{display:inline-flex;gap:4px;align-items:center;margin:0}
  .toolbar a{font-size:12px;color:var(--accent);text-decoration:none;padding:5px 9px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
  .toolbar a:hover{background:var(--accent-soft);border-color:var(--accent)}
  .toolbar .live-note{font-size:11px;color:var(--green)}
  button, input[type=submit]{font-size:12px;padding:4px 11px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius);cursor:pointer;transition:background .12s,border-color .12s}
  button:hover{background:var(--accent-soft);border-color:var(--accent)}
  input[type=text], input:not([type]), input[type=file]{font-size:12px;padding:4px 7px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text)}
  input[type=text]:focus, input:not([type]):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .content{padding:0;overflow:auto;height:calc(100vh - 72px);background:var(--bg)}
  .pad{padding:6px 10px}
  .muted{color:var(--text-muted);font-size:12px}
  table.grid{border-collapse:collapse;table-layout:fixed;font-size:13px;font-family:Arial,'Segoe UI',sans-serif;background:var(--surface)}
  table.grid th, table.grid td{border:1px solid var(--border);padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:23px;text-align:left;color:var(--text)}
  table.grid th{background:var(--header-bg);font-weight:600;font-size:12px;color:var(--text-muted);position:sticky;top:0;z-index:2}
  table.grid tr.letters th{height:20px;padding:1px 4px;text-align:center;font-size:11px;background:var(--header-bg);color:var(--text-muted)}
  table.grid tr.headers th{height:28px;background:var(--header-bg);border-bottom-color:var(--border-strong)}
  /* th에 overflow:hidden이 걸려있어서 핸들을 -3px로 바깥으로 걸치게 하면
     그 튀어나온 부분이 그대로 잘려나가 클릭 판정이 거의 안 잡혔다(대표:
     "잠겨있는데 무슨소리야... 열 너비조절 안된다니까" -- 핸들이 3px밖에
     안 남아있던 게 진짜 원인). th 안쪽에 완전히 들어오게 고침. */
  table.grid .colresize{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;z-index:3}
  table.grid .colresize:hover, table.grid .colresize.resizing{background:var(--accent)}
  table.grid td.rownum, table.grid th.rownum{background:var(--header-bg);text-align:center;color:var(--text-muted);position:sticky;left:0;z-index:1;min-width:32px;font-size:12px}
  table.grid td.readonly{color:var(--text-muted)}
  table.grid td input, table.grid td select{
    border:none;outline:none;width:100%;height:100%;font:inherit;color:inherit;
    background:transparent;padding:1px 3px;-webkit-appearance:none;appearance:none
  }
  table.grid td input[type=datetime-local]{color-scheme:light}
  /* 읽기전용(잠긴) 칸은 살짝 회색으로 -- 안 그러면 편집 가능한 칸이랑
     구분이 안 돼서 "읽기모드인지 헷갈린다"(사용자 확인: "활성화 안되면
     살짝 회색글짜로 해야지 헷갈리잖아 읽기모드에서"). 수정(☰ 메뉴)을
     누르면 readOnly가 풀리면서 자동으로 원래 글자색으로 돌아옴. */
  table.grid td input:read-only{color:var(--text-muted);cursor:default}
  /* 엑셀/구글시트는 셀이 캔버스에 그려져서 "브라우저 포커스"라는 개념 자체가
     없는데, 여긴 셀 하나하나가 진짜 <input>이라 브라우저 기본 포커스 표시와
     이 앱이 직접 그리는 범위선택(.range-selected)이 서로 다른 시스템으로
     따로 존재한다. 아래 토글바/검색창용 포커스 글로우(input:focus의
     box-shadow)가 type 속성 없는 그리드 셀 input에도 그냥 걸려서 범위선택과
     별개로 하늘색이 떴다(사용자 확인: "하늘색포커스가 따로생기고 ...
     드래그하면 분리가되버린다"). 그리드 안에서는 그 글로우를 확실히 끈다. */
  table.grid td input:focus, table.grid td select:focus{outline:none;box-shadow:none;border-color:transparent}
  table.grid tr:hover td{background:var(--green-soft)}
  .rowactions{display:flex;gap:8px;align-items:center}
  .rowactions form{display:inline-flex;gap:3px;align-items:center;margin:0}
  .rowactions .linklike{font-size:12px;color:var(--accent);background:none;border:none;padding:0;cursor:pointer;text-decoration:none}
  .rowactions .linklike:hover{text-decoration:underline;background:none}
  .rowactions input:not([type=checkbox]){border:1px solid var(--border)!important;border-radius:3px;padding:1px 4px!important}
  .rowactions-toggle{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;color:var(--text-muted);padding:2px 6px}
  .rowactions-toggle:hover{color:var(--accent)}
  .rowactions-menu{position:fixed;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(40,35,20,.16);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:140px}
  .rowactions-menu form{display:flex;gap:4px;align-items:center;margin:0;padding:4px 6px;border-radius:4px}
  .rowactions-menu form:hover{background:var(--accent-soft)}
  .rowactions-menu .linklike{flex:1;text-align:left}
  /* "수정" 버튼은 폼 안이 아니라 .rowactions-menu(세로 flex 컨테이너)의
     직계 자식이라 위 flex:1이 가로폭이 아니라 세로 크기를 키워버렸다 --
     메뉴 항목이 적을수록(사용자 확인: "왜 수정버튼만 커? 사이즈가
     이상한데") 남는 세로 공간을 혼자 다 먹어서 더 두드러짐. */
  .rowactions-menu .row-edit-toggle{flex:none}
  /* 통합 엑셀 다운로드 진행률(사용자 확인: "다운로드시에 노란색게이지차는거
     없네?") -- 평소엔 숨겨져 있다가 다운로드 시작하면 app.js가 보여준다. */
  .export-progress-track{display:none;width:120px;height:8px;border-radius:4px;background:var(--border);overflow:hidden;vertical-align:middle;margin-left:8px}
  .export-progress-track.active{display:inline-block}
  .export-progress-fill{display:block;height:100%;width:0%;background:#f2c94c;transition:width .15s linear}
  @keyframes livePulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(47,158,104,.25)}50%{box-shadow:inset 0 0 0 2px rgba(47,158,104,.9),0 0 8px rgba(47,158,104,.3)}}
  table.grid tr.live-updated td{animation:livePulse 1.15s ease-in-out 1;border-top-color:var(--green);border-bottom-color:var(--green)}
  table.grid tr.live-updated td:first-of-type{border-left:2px solid var(--green)}
  table.grid tr.live-updated td:last-child{border-right:2px solid var(--green)}
  table.grid td.range-selected{background:var(--green-soft)!important;outline:1px solid var(--green);outline-offset:-1px}
  /* 상품마스터(excel_search_engine.py) 열 헤더의 ▼ 정렬/필터 버튼과 같은
     느낌으로 -- 대표: "상품마스터페이지처럼 필터나 등등 전부다 똑같이만들어야지". */
  .header-inner{display:flex;align-items:center;gap:3px;overflow:hidden}
  .header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sort-mark{font-size:10px;color:var(--accent)}
  .filter-btn{border:0;background:none;padding:0 2px;cursor:pointer;font-size:9px;color:var(--text-muted);flex:0 0 auto}
  .filter-btn:hover,.filter-btn.active{color:var(--accent)}
  .header-menu{position:fixed;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(40,35,20,.16);padding:10px;width:200px;font-size:12px}
  .header-menu .section-title{font-weight:500;color:var(--text-muted);margin:6px 0 4px}
  .header-menu .sort-buttons{display:flex;gap:6px}
  .header-menu .sort-buttons button{flex:1}
  .header-menu .form-row input{width:100%;box-sizing:border-box}
  .header-menu .menu-foot{display:flex;align-items:center;gap:6px;margin-top:8px}
  .active-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .active-title{font-weight:500;white-space:nowrap;color:var(--text-muted)}
  .chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:14px;background:var(--green-soft);color:var(--green);padding:3px 9px;font-size:12px;white-space:nowrap}
  .chip a{color:var(--text-muted);text-decoration:none;font-weight:bold}
  .chip a:hover{color:#c0392b}
  .summary-cards{display:flex;gap:8px;flex-wrap:wrap;padding:8px 10px}
  .summary-card{min-width:140px;flex:1;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:7px 11px;box-shadow:var(--shadow)}
  .summary-card .summary-label{font-size:11px;color:var(--text-muted);margin-bottom:2px}
  .summary-card .summary-value{font-size:18px;font-weight:700;line-height:1.1;color:var(--text)}
  .summary-card .summary-unit{font-size:11px;font-weight:500;color:var(--text-muted);margin-left:4px}
  .sales-amount-input{min-width:92px!important;width:92px!important;text-align:right}
  .pager{display:flex;align-items:center;gap:8px;padding:6px 10px}
  .pager a{font-size:12px;color:var(--accent);text-decoration:none;border:1px solid var(--border);border-radius:var(--radius);padding:4px 10px;background:var(--surface)}.pager a:hover{background:var(--accent-soft);border-color:var(--accent)}.pager .current{font-size:12px;color:var(--text-muted)}
  .tabs{display:flex;border-top:1px solid var(--border);background:var(--header-bg);height:34px}
  .tabs a{padding:7px 16px;font-size:12px;color:var(--text-muted);text-decoration:none;border-right:1px solid var(--border);line-height:20px;transition:background .12s,color .12s}
  .tabs a:hover{background:var(--accent-soft);color:var(--accent)}
  .tabs a.active{background:var(--surface);color:var(--green);font-weight:600;border-bottom:2px solid var(--green)}
.reservation-alarm{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45)}
.reservation-alarm>div{background:#fff;padding:20px 24px;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.3);min-width:320px}
.reservation-alarm button{padding:6px 12px}
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;background:#f4f6f8;margin:0}
.login-box{background:#fff;padding:28px 32px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:12px;width:min(320px,90vw)}
.login-box h1{margin:0 0 4px;font-size:20px}
.login-box label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.login-box input{padding:8px;font-size:15px}
.login-box button{padding:9px;font-size:15px}
.login-error{color:#c0392b;margin:0;font-size:13px}
.toolbar-right{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:13px}
.toolbar-right form{display:inline;margin:0}
.user-bar{display:inline-flex;gap:8px;align-items:center}
.admin h2{font-size:16px;margin:18px 0 8px}
.admin form.inline{display:inline-flex;gap:6px;align-items:center;margin:6px 0}
.admin-msg{background:#fff8e1;border:1px solid #f0d27a}
.login-form{display:flex;flex-direction:column;gap:10px}
.login-form input{padding:9px;font-size:15px}
.login-box .secondary{background:#fff;border:1px solid #ccc}
.login-box a{font-size:13px;text-align:center}