/* ═══════════════════════════════════════════════════════════════════
   팀한살림 워크스페이스 — 통합 스타일시트
   기존 index.html 내부 <style> 블록 6개를 순서대로 합친 파일
   디자인 가이드: 디자인가이드_v1.md (v1.5)
   ═══════════════════════════════════════════════════════════════════ */

/* ────── [블록 #1] 원본 index.html 위치 순 ────── */
*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      /* ══════════════════════════════════════════════════════
         팀한살림 디자인 토큰 v2 (2026-04-23 통합)
         - 설계: sage green + muted neutral, 여백 중심, 그림자 최소
         - 레퍼런스: 디자인가이드_v1.md
         ══════════════════════════════════════════════════════ */

      /* ── 배경 ── */
      --page-bg: #fafaf8;
      --content-bg: #f5f4f1;
      --card-bg: #ffffff;

      /* ── 그린(sage / muted) 계열 — primary는 --g600 ── */
      --g50:  #f2f5f2;
      --g100: #e4ebe4;
      --g200: #c6d3c6;
      --g400: #7a9a7f;
      --g500: #5d8264;
      --g600: #4a6f52;   /* ★ Primary brand */
      --g700: #3d5c44;
      --g800: #2f4835;
      --g900: #1f3124;

      /* ── 샌드/뉴트럴 ── */
      --s50:  #faf9f5;
      --s100: #f0eee7;
      --s200: #dcd9d0;
      --s600: #6e6a60;
      --s800: #3a3830;

      /* ── 포인트(amber) ── */
      --amber:   #c8923a;
      --amber-l: #faf4e8;

      /* ── 상태색 (muted) ── */
      --red:    #b94a48;
      --red-l:  #fbf1f0;
      --red-m:  #d97774;
      --blue:   #3b6ea5;
      --blue-l: #eef3fa;
      --yellow:   #c8923a;
      --yellow-l: #faf4e8;
      --purple:   #7e6bb2;
      --purple-l: #f2eff9;

      /* ── 특수 포인트: 하트·좋아요 (일반 red 톤다운과 구분, 감정 강조) ── */
      --heart: #c62828;        /* Material Red 800 — 깊고 차분한 빨강 (2026-04-23) */
      --heart-hover: #b71c1c;  /* Material Red 900 — 더 진한 hover */

      /* ── 텍스트 / 테두리 ── */
      --txt:  #1c1c1a;
      --txts: #5a5a55;
      --txtm: #8a8a83;
      --bdr:  #e8e6e0;
      --white: #fff;

      /* ── 섀도 (거의 보이지 않게) ── */
      --sh:  0 1px 2px rgba(0,0,0,.03);
      --shm: 0 2px 8px rgba(0,0,0,.05);

      /* ── 라디우스 ── */
      --r8:  10px;
      --r12: 12px;
      --r14: 14px;
      --accent-h: 3px;

      /* ── 터치 영역 ── */
      --touch-min: 44px;
      --touch-md: 40px;

      /* ══ 타이포 스케일 (PC/모바일 반응형) ══
         30~50대 실무자 가독성 기준. 모바일 오버라이드는 @media (max-width:760px) 참조.
         권장 매핑:
         - fs-xs   : 메타, 캡션, 타임스탬프 (가급적 사용 지양, fs-sm 권장)
         - fs-sm   : 보조 텍스트, 칩, 배지
         - fs-base : 테이블 셀, 조밀한 리스트
         - fs-md   : 본문 기본, 버튼, 입력 필드
         - fs-lg   : 카드 제목, 섹션 헤더
         - fs-xl   : 페이지 제목
         - fs-2xl  : 대시보드 수치
         - fs-3xl  : 강조 수치 */
      --fs-xs: 12px;    /* 캡션, 뱃지, 메타 (PC) — v1.3 11→12 */
      --fs-sm: 13px;    /* 보조 텍스트 — v1.3 12→13 */
      --fs-base: 14px;  /* 테이블 셀, 리스트 — v1.3 13→14 */
      --fs-md: 16px;    /* ★ 본문 기본 — v1.5 15→16 (업계 표준 도달, W3C 권장 본문 크기) */
      --fs-lg: 17px;    /* 카드 제목 — v1.5 16→17 (md와 위계 유지, 모바일과 통일) */
      --fs-xl: 20px;    /* 페이지 제목 */
      --fs-2xl: 24px;   /* 대시보드 수치 */
      --fs-3xl: 28px;   /* 강조 수치 */

      /* ══ 버튼 크기 토큰 (PC/모바일 반응형) ══
         높이는 터치 영역 기준. 모바일 오버라이드는 @media (max-width:760px) 참조.
         - btn-h-xs  PC 24 / MO 28 : 테이블 행 내 액션
         - btn-h-sm  PC 32 / MO 36 : 보조 버튼, 필터 칩
         - btn-h-md  PC 36 / MO 44 : 기본 버튼 (권장)
         - btn-h-lg  PC 44 / MO 48 : 주요 CTA (저장·제출·로그인) */
      --btn-h-xs: 24px;
      --btn-h-sm: 32px;
      --btn-h-md: 36px;
      --btn-h-lg: 44px;
      --btn-px-xs: 8px;
      --btn-px-sm: 12px;
      --btn-px-md: 14px;
      --btn-px-lg: 20px;
      --btn-radius: 8px;

      /* ══ 폰트 웨이트 (3단계 엄격) ══
         400 / 600 / 700 로만 수렴. 500·800·900 금지. */
      --fw-regular: 400;
      --fw-medium:  600;
      --fw-bold:    700;

      /* ══ 줄 높이 (4단계) ══ */
      --lh-1:      1;      /* 단일 라인: 배지·칩·버튼 */
      --lh-tight:  1.3;    /* 제목, 한 줄 요약 */
      --lh-base:   1.6;    /* 본문, 카드 내용 */
      --lh-loose:  1.75;   /* 안내문, 긴 설명 */

      /* ══ z-index 체계 ══
         - z-dropdown     : 드롭다운, 팝오버 메뉴
         - z-sticky       : 상단 고정 바/탭
         - z-header       : 헤더
         - z-overlay      : 지도 커스텀 오버레이 등
         - z-modal-bg     : 모달 백드롭
         - z-modal        : 모달 본체
         - z-popover      : 모달 위 팝오버
         - z-toast        : 토스트
         - z-tooltip      : 툴팁 (최상단) */
      --z-dropdown: 100;
      --z-sticky: 200;
      --z-header: 300;
      --z-overlay: 400;
      --z-modal-bg: 1000;
      --z-modal: 1010;
      --z-popover: 1100;
      --z-toast: 1200;
      --z-tooltip: 1300;

      /* ══ 간격 스케일 (8px 기반) ══
         인라인 style="padding:10px 12px" 같은 값 점진 대체용 */
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 20px;
      --sp-6: 24px;
      --sp-8: 32px;
    }

    /* ══════════════════════════════════════════════════════
       Design System v2 — Phase B Component Classes
       (2026-04-23 추가)
       인라인 style 대체용. 기존 코드는 그대로 두고 새 코드·교체 시 사용.
       사용 예: <button class="btn btn-primary btn-md">저장</button>
       ══════════════════════════════════════════════════════ */

    /* ─── 버튼: 베이스 ─── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: inherit;
      font-weight: var(--fw-bold);
      cursor: pointer;
      border-radius: var(--btn-radius);
      transition: background .15s ease, border-color .15s ease, color .15s ease;
      white-space: nowrap;
      user-select: none;
      line-height: var(--lh-1);
    }
    .btn:focus-visible {
      outline: 1.5px solid var(--g600);
      outline-offset: 1px;
    }
    .btn:disabled,
    .btn.is-disabled {
      background: var(--s100) !important;
      color: var(--txtm) !important;
      border-color: var(--s200) !important;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* 버튼 크기는 기존 CSS (아래쪽)의 .btn-xs/sm/md/lg 정의 사용 — 중복 방지 위해 여기선 생략 */
    /* 꽉 채움 */
    .btn-block { width: 100%; display: flex; }

    /* 버튼 역할별 스타일 */
    .btn-primary {
      background: var(--g600);
      color: #fff;
      border: 1px solid var(--g600);
    }
    .btn-primary:hover { background: var(--g700); border-color: var(--g700); }

    .btn-secondary {
      background: #fff;
      color: var(--txt);
      border: 1px solid var(--bdr);
      font-weight: var(--fw-medium);
    }
    .btn-secondary:hover { background: var(--s50); }

    .btn-danger {
      background: #fff;
      color: var(--red);
      border: 1px solid var(--red);
    }
    .btn-danger:hover { background: var(--red-l); }

    .btn-danger-solid {
      background: var(--red);
      color: #fff;
      border: 1px solid var(--red);
    }
    .btn-danger-solid:hover { background: #a03e3c; }

    .btn-ghost {
      background: transparent;
      color: var(--txts);
      border: 1px solid transparent;
      font-weight: var(--fw-medium);
    }
    .btn-ghost:hover { background: var(--s50); color: var(--txt); }

    /* ─── 모달 ─── */
    .modal-bg {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.50);
      z-index: var(--z-modal-bg);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .modal-bg.is-open { display: flex; }
    /* 옵션: 바텀 시트 (모바일 하단 슬라이드) */
    .modal-bg.modal-bottom { align-items: flex-end; padding: 0; }
    /* 옵션: 풀스크린 (PDF 뷰어 등) */
    .modal-bg.modal-fullscreen { padding: 0; }
    /* 옵션: 블러 백드롭 */
    .modal-bg.modal-blur { background: rgba(15,23,42,.5); backdrop-filter: blur(4px); }
    /* 옵션: 라이트박스 (이미지 확대용, 거의 검정) */
    .modal-bg.modal-dark { background: rgba(0,0,0,.88); padding: 0; }
    /* 옵션: 스크롤형 (긴 폼 모달, 내용이 길면 페이지 전체가 스크롤) */
    .modal-bg.modal-scroll { display: none; align-items: initial; justify-content: initial; overflow-y: auto; padding: 0; }
    .modal-bg.modal-scroll.is-open { display: block; }
    .modal-box {
      background: #fff;
      border-radius: var(--r12);
      box-shadow: var(--shm);
      max-height: 92vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 100%;
      z-index: var(--z-modal);
    }
    .modal-box.modal-sm { max-width: 440px; }
    .modal-box.modal-md { max-width: 640px; }
    .modal-box.modal-lg { max-width: 900px; }
    .modal-box.modal-xl { max-width: 1200px; }

    .modal-head {
      padding: 16px 20px;
      background: var(--g700);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--r12) var(--r12) 0 0;
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
    }
    .modal-head.modal-head-light {
      background: #fff;
      color: var(--txt);
      border-bottom: 1px solid var(--bdr);
    }
    .modal-body {
      padding: 18px 20px;
      flex: 1;
      overflow-y: auto;
    }
    .modal-foot {
      padding: 14px 20px;
      border-top: 1px solid var(--bdr);
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .modal-close {
      background: rgba(255,255,255,.18);
      border: none;
      color: #fff;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      font-size: var(--fs-lg);
      cursor: pointer;
      line-height: var(--lh-1);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .modal-close:hover { background: rgba(255,255,255,.28); }
    .modal-head-light .modal-close {
      background: transparent;
      color: var(--txts);
    }
    .modal-head-light .modal-close:hover {
      background: var(--s100);
      color: var(--txt);
    }

    /* ─── 카드 ─── */
    .ds-card {
      background: var(--card-bg);
      border: 1px solid var(--bdr);
      border-radius: var(--r12);
      padding: var(--sp-4);
      box-shadow: var(--sh);
    }
    .ds-card-lg { padding: var(--sp-6); border-radius: var(--r14); }
    .ds-card-hover {
      transition: background .15s ease, border-color .15s ease;
      cursor: pointer;
    }
    .ds-card-hover:hover {
      background: var(--g50);
      border-color: var(--g200);
    }

    /* ─── 배지 ─── */
    .ds-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      line-height: var(--lh-base);
      white-space: nowrap;
    }
    .ds-badge-primary { background: var(--g50); color: var(--g700); }
    .ds-badge-muted { background: var(--s100); color: var(--txts); }
    .ds-badge-danger { background: var(--red-l); color: var(--red); }
    .ds-badge-info { background: var(--blue-l); color: var(--blue); }
    .ds-badge-warning { background: var(--amber-l); color: var(--amber); }
    .ds-badge-solid { background: var(--g600); color: #fff; }

    /* ─── 입력 필드 ─── */
    .ds-input {
      width: 100%;
      min-height: var(--btn-h-md);
      padding: 9px 11px;
      border: 1px solid var(--bdr);
      border-radius: var(--r8);
      background: #fff;
      font-size: var(--fs-md);
      font-family: inherit;
      color: var(--txt);
      box-sizing: border-box;
      transition: border-color .15s ease;
    }
    .ds-input:focus {
      outline: none;
      border-color: var(--g600);
      box-shadow: 0 0 0 2px rgba(74,111,82,.12);
    }
    .ds-input:disabled {
      background: var(--s50);
      color: var(--txtm);
      cursor: not-allowed;
    }

    /* ─── 레이아웃 헬퍼 ─── */
    .ds-divider {
      height: 1px;
      background: var(--bdr);
      margin: var(--sp-5) 0;
      border: none;
    }
    .ds-divider-dashed {
      border: none;
      border-top: 1px dashed var(--bdr);
      margin: var(--sp-3) 0;
    }

    /* ══ 다중선택 드롭다운 (v1.1 추가) ══
       사용 패턴:
         <div class="ds-multidrop">
           <button class="ds-multidrop-btn" onclick="toggleFn(event)">
             <span class="ds-multidrop-label">기본 라벨</span>
             <span class="ds-multidrop-caret">&#9660;</span>
           </button>
           <div class="ds-multidrop-panel">
             <div class="ds-multidrop-all">
               <label><input type="checkbox" onchange="selectAllFn(this)"> 전체 선택</label>
             </div>
             <div class="ds-multidrop-list">...체크박스 항목...</div>
           </div>
         </div>
    */
    .ds-multidrop {
      position: relative;
      display: inline-block;
    }
    .ds-multidrop-btn {
      padding: 5px 12px;
      border: 1px solid var(--bdr);
      border-radius: 6px;
      background: var(--white);
      cursor: pointer;
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txts);
      font-family: inherit;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .ds-multidrop-btn:hover { background: var(--s50); }
    .ds-multidrop-caret {
      font-size: var(--fs-xs);
      color: var(--txts);
    }
    .ds-multidrop-panel {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      z-index: var(--z-dropdown);
      background: var(--white);
      border: 1px solid var(--bdr);
      border-radius: 8px;
      box-shadow: var(--shm);
      min-width: 180px;
      padding: 8px 0;
    }
    .ds-multidrop.is-open .ds-multidrop-panel { display: block; }
    .ds-multidrop-all {
      padding: 6px 14px 8px;
      border-bottom: 1px solid var(--bdr);
      margin-bottom: 4px;
    }
    .ds-multidrop-all label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txt);
    }
    .ds-multidrop-list { padding: 0 4px; }
    .ds-multidrop-item {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 5px 14px;
      font-size: var(--fs-base);
      color: var(--txt);
      border-radius: 4px;
    }
    .ds-multidrop-item:hover { background: var(--g50); }
    .ds-multidrop input[type="checkbox"] {
      width: 15px;
      height: 15px;
      accent-color: var(--g600);
      cursor: pointer;
    }

    /* ══ 전역: 버튼/탭류 포커스 효과 완전 제거 (사용자 요청) ══ */
    /* 입력 폼(input/textarea/select)은 UX상 포커스 표시 유지 */
    *:focus,
    *:focus-visible,
    *:focus-within {
      outline: none !important;
    }
    *, *::before, *::after {
      -webkit-tap-highlight-color: transparent !important;
    }
    input:focus,
    input:focus-visible,
    textarea:focus,
    textarea:focus-visible,
    select:focus,
    select:focus-visible {
      outline: 1.5px solid var(--g600) !important;
      outline-offset: 1px !important;
    }

    /* ══ 모바일 폰트/버튼 상향 (30~50대 가독성 + 터치 영역 개선) ══ */
    @media (max-width: 760px) {
      :root {
        --fs-xs:   12px;
        --fs-sm:   13px;
        --fs-base: 14px;
        --fs-md:   15px;
        --fs-lg:   17px;
        --fs-xl:   20px;
        --fs-2xl:  22px;
        --fs-3xl:  24px;
        /* 모바일 터치 영역 확보 (WCAG AA 44x44) */
        --btn-h-xs: 28px;
        --btn-h-sm: 36px;
        --btn-h-md: 44px;
        --btn-h-lg: 48px;
      }
    }

    /* ══ Phase 1: 모바일 입력 필드 iOS 줌 방지 + 터치 영역 확보 ══ */
    @media (max-width: 760px) {
      .form-input,
      .form-select,
      .form-textarea,
      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="tel"],
      input[type="password"],
      input[type="search"],
      input[type="date"],
      input[type="time"],
      input[type="datetime-local"],
      input[type="url"],
      textarea,
      select {
        font-size:var(--fs-lg) !important;
        min-height: var(--touch-min);
      }
    }

    /* ══ 버튼 기본/유틸리티 스타일 ══
       기본 규칙은 :where()로 감싸 specificity를 0,0,0으로 낮춤.
       → 어떤 class든 가진 버튼은 기존 스타일 그대로 유지됨
       → class가 전혀 없는 plain <button>에만 기본값이 부드럽게 적용됨
       유틸리티 클래스(.btn-xs/sm/md/lg)는 명시적 사용 목적이라 specificity 유지 */
    :where(button) {
      min-height: var(--btn-h-md);
      padding: 0 var(--btn-px-md);
      font-size: var(--fs-md);
      font-family: 'Pretendard Variable', sans-serif;
      font-weight: var(--fw-medium);
      border-radius: var(--btn-radius);
      border: 1px solid transparent;
      background: transparent;
      color: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      line-height: var(--lh-tight);
      transition: background .15s, border-color .15s, color .15s;
      -webkit-tap-highlight-color: transparent;
    }

    /* 크기 유틸리티 클래스 — 신규 코드에서 <button class="btn-sm">처럼 명시 사용 */
    .btn-xs {
      min-height: var(--btn-h-xs);
      padding: 0 var(--btn-px-xs);
      font-size: var(--fs-xs);
    }
    .btn-sm {
      min-height: var(--btn-h-sm);
      padding: 0 var(--btn-px-sm);
      font-size: var(--fs-sm);
    }
    .btn-md {
      min-height: var(--btn-h-md);
      padding: 0 var(--btn-px-md);
      font-size: var(--fs-md);
    }
    .btn-lg {
      min-height: var(--btn-h-lg);
      padding: 0 var(--btn-px-lg);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
    }

    /* ══ Phase 1: 모바일 버튼/탭 최소 터치 영역 (44px) ══ */
    @media (max-width: 760px) {
      button,
      .hbtn,
      .edit-btn,
      .ong-btn,
      .site-drop-btn,
      .btn-submit,
      .btn-cancel,
      .sub-tab,
      .main-tab,
      .excel-btn,
      .lab-tab-btn,
      .jipum-tab {
        min-height: var(--touch-min);
      }
    }

    /* ══ Phase 2: 버튼 상태 전역 기본값 ══
       :active 상태는 전역 스타일 없음 (개별 클래스 또는 transition으로 처리)
       — 이전에 :active가 loading 스타일(color:transparent)을 공유해
         클릭 시 텍스트가 투명해지며 "번쩍"거리던 문제 해결 */

    /* 전역 비활성 상태 (disabled) */
    button:disabled,
    button[aria-disabled="true"],
    .hbtn:disabled,
    .edit-btn:disabled,
    .ong-btn:disabled,
    .site-drop-btn:disabled,
    .btn-submit:disabled,
    .btn-cancel:disabled,
    .sub-tab:disabled,
    .excel-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* 로딩 상태 버튼 (data-loading="true") - 텍스트 숨기고 스피너 표시 */
    button[data-loading="true"],
    .btn-submit[data-loading="true"] {
      position: relative;
      color: transparent !important;
      pointer-events: none;
      cursor: wait;
    }
    button[data-loading="true"]::after,
    .btn-submit[data-loading="true"]::after {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255,255,255,.3);
      border-top-color: currentColor;
      border-radius: 50%;
      animation: spin .7s linear infinite;
      color: #fff;
    }

    /* ══ Phase 2: 스켈레톤 로더 (카드·리스트 데이터 로딩 중) ══
       사용법: <div class="skel skel-line" style="width:60%"></div>
              <div class="skel skel-box" style="height:120px"></div>
              <div class="skel-card"> ... 스켈레톤 실루엣 ... </div> */
    @keyframes skeleton-shimmer {
      0%   { background-position: -300px 0; }
      100% { background-position: calc(300px + 100%) 0; }
    }
    .skel,
    .skel-line,
    .skel-box,
    .skel-circle {
      background: linear-gradient(90deg,
        #eeecea 0%,
        #f5f4f1 50%,
        #eeecea 100%);
      background-size: 300px 100%;
      background-repeat: no-repeat;
      animation: skeleton-shimmer 1.4s ease-in-out infinite;
      border-radius: 6px;
      display: block;
    }
    .skel-line {
      height: 1em;
      margin-bottom: 6px;
    }
    .skel-line:last-child {
      margin-bottom: 0;
    }
    .skel-box {
      width: 100%;
      height: 80px;
      border-radius: var(--r8);
    }
    .skel-circle {
      border-radius: 50%;
      width: 32px;
      height: 32px;
    }
    /* 모션 줄이기(운영체제 설정) 대응 */
    @media (prefers-reduced-motion: reduce) {
      .skel, .skel-line, .skel-box, .skel-circle {
        animation: none;
        background: #eeecea;
      }
    }

    /* ══ Phase 2: 스켈레톤 프리셋 (리스트·카드 패턴) ══
       JS에서 한 줄로 삽입 가능. 사용법:
       el.innerHTML = '<div class="skel-list"></div>';
       또는 카드 수 지정: '<div class="skel-list skel-list--3"></div>' */
    .skel-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 0;
    }
    /* 기본 3개 카드 생성 (::before / ::after 불가능 → 실제 DOM 필요) */
    .skel-list-item {
      padding: 14px 16px;
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: var(--r8);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .skel-list-item .skel-line:nth-child(1) { width: 40%; height: 12px; }
    .skel-list-item .skel-line:nth-child(2) { width: 85%; }
    .skel-list-item .skel-line:nth-child(3) { width: 60%; }

    /* 카드형 스켈레톤 (홈 대시보드, 통계 카드 등) */
    .skel-card {
      padding: 16px 18px;
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: var(--r12);
    }
    .skel-card .skel-line:nth-child(1) { width: 35%; margin-bottom: 12px; height: 13px; }

    /* 테이블 행 스켈레톤 */
    .skel-table-rows {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px 0;
    }
    .skel-table-rows > .skel-line {
      height: 32px;
      width: 100%;
    }

    /* ══ Phase 2: 인라인 로딩 표시 (짧은 대기) ══
       사용법: <div class="loading-inline">불러오는 중</div> */
    .loading-inline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 0;
      color: var(--txtm);
      font-size: var(--fs-sm);
    }
    .loading-inline::before {
      content: '';
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid var(--bdr);
      border-top-color: var(--g600);
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    .loading-inline--center {
      display: flex;
      justify-content: center;
      width: 100%;
    }

    /* ══ Phase 2: 빈 상태 (Empty State) 컴포넌트 ══
       사용법:
       <div class="empty-state">
         <div class="empty-state-title">등록된 약정이 없습니다</div>
         <div class="empty-state-desc">상단 "엑셀 업로드" 버튼으로 등록해주세요.</div>
         <button class="empty-state-action">약정 추가하기</button>
       </div> */
    .empty-state {
      padding: 48px 24px;
      text-align: center;
      color: var(--txtm);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .empty-state--compact {
      padding: 24px 16px;
    }
    .empty-state-title {
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txts);
      margin-top: 4px;
    }
    .empty-state-desc {
      font-size: var(--fs-sm);
      color: var(--txtm);
      line-height: var(--lh-base);
      max-width: 340px;
    }
    .empty-state-action {
      margin-top: 14px;
      padding: 9px 18px;
      background: var(--g600);
      color: #fff;
      border: none;
      border-radius: var(--r8);
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      font-family: 'Pretendard Variable', sans-serif;
      cursor: pointer;
      transition: background .15s;
    }
    .empty-state-action:hover {
      background: var(--g700);
    }
    .empty-state--error .empty-state-title {
      color: var(--red);
    }

    /* ══ Phase 2: 에러 상태 ══
       사용법: <div class="error-state">불러오지 못했습니다 <button>다시 시도</button></div> */
    .error-state {
      padding: 20px 16px;
      background: var(--red-l);
      border: 1px solid rgba(198,40,40,.2);
      border-radius: var(--r8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      font-size: var(--fs-sm);
      color: var(--red);
    }
    .error-state button {
      padding: 6px 14px;
      border: 1px solid var(--red);
      border-radius: 6px;
      background: #fff;
      color: var(--red);
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      cursor: pointer;
      font-family: inherit;
    }
    .error-state button:hover {
      background: var(--red);
      color: #fff;
    }

    /* ══ Phase 2: 테이블 반응형 래퍼 (가로 스크롤 힌트) ══
       사용법: <div class="table-responsive"><table class="tbl">...</table></div>
       양 끝에 페이드 그림자가 생겨 "가로로 스크롤 가능"을 시각적으로 표시. */
    .table-responsive {
      position: relative;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /* 좌우 끝에만 페이드 그림자 표시 (CSS-only) */
      background:
        linear-gradient(90deg, var(--card-bg) 30%, transparent) 0 0 / 40px 100% no-repeat local,
        linear-gradient(-90deg, var(--card-bg) 30%, transparent) 100% 0 / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent) 0 0 / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) 100% 0 / 14px 100% no-repeat scroll;
    }

    /* ══ Phase 2: 카드 리스트 컴포넌트 (테이블 대체용 모바일 뷰) ══
       사용법:
       <ul class="card-list">
         <li class="card-list-item">
           <div class="card-list-item-head">
             <span class="card-list-title">생산자명</span>
             <span class="status-badge s-ok">진행</span>
           </div>
           <dl class="card-list-meta">
             <div><dt>품목</dt><dd>사과</dd></div>
             <div><dt>면적</dt><dd>300평</dd></div>
             <div><dt>등록일</dt><dd>2026-03-20</dd></div>
           </dl>
         </li>
       </ul> */
    .card-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 8px;
    }
    .card-list-item {
      padding: 12px 14px;
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: var(--r8);
      box-shadow: 0 1px 2px rgba(0,0,0,.04);
      transition: background .15s, box-shadow .15s;
    }
    .card-list-item:hover {
      background: var(--s50);
    }
    .card-list-item[data-clickable="true"],
    .card-list-item.is-clickable {
      cursor: pointer;
    }
    .card-list-item[data-clickable="true"]:hover,
    .card-list-item.is-clickable:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }
    .card-list-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .card-list-title {
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txt);
    }
    .card-list-subtitle {
      font-size: var(--fs-sm);
      color: var(--txts);
      margin-top: 2px;
    }
    .card-list-meta {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px 12px;
      margin: 0;
    }
    .card-list-meta > div {
      display: flex;
      gap: 6px;
      font-size: var(--fs-sm);
      line-height: var(--lh-base);
    }
    .card-list-meta dt {
      color: var(--txtm);
      flex-shrink: 0;
      min-width: 44px;
    }
    .card-list-meta dd {
      color: var(--txt);
      margin: 0;
      font-weight: var(--fw-medium);
    }
    .card-list-foot {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 0.5px solid var(--bdr);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      font-size: var(--fs-xs);
      color: var(--txtm);
    }

    /* ══ Phase 2: 반응형 테이블 전환 유틸리티 ══
       HTML에서 테이블과 카드리스트를 동시에 렌더링하고,
       화면 크기에 따라 CSS로 전환하는 패턴 (JS 불필요).
       사용법:
         <div class="responsive-table-wrap">
           <table class="tbl">...</table>
           <ul class="card-list card-list--mobile-only">...</ul>
         </div> */
    .card-list--mobile-only {
      display: none;
    }
    @media (max-width: 760px) {
      .responsive-table-wrap > .table-responsive,
      .responsive-table-wrap > table,
      .responsive-table-wrap > .tbl-wrap {
        display: none;
      }
      .card-list--mobile-only {
        display: grid;
      }
    }


    /* ══ Phase 2+: 일정현황(p6) 모바일 레이아웃 전면 보정 ══
       문제:
       ① 주간 일정/공유사항: Row1의 row1-right 셀에 3개 요소가 몰려 overflow
       ② 일정 등록: p6WrMakeRow가 만든 중간 div(class 없음)에 flex-wrap 부재
                    → 입력창이 극도로 좁음
       해결: 640px 이하에서 그리드 areas 재배치 및 강제 wrap */
    @media (max-width: 640px) {
      /* ── 주간 일정: Row1을 2행으로 분할 ──
         1행: [◀▶] [주차 라벨] [이번 주]
         2행: [1주/2주 토글] [새로고침] [보고서 출력] (각 flex:1) */
      #p6Panel-grid .p6-filter-bar-row1 {
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
          "nav label today"
          "right right right" !important;
        row-gap: 8px;
      }
      #p6Panel-grid .p6-filter-bar-row1 > .p6-nav-group { grid-area: nav; }
      #p6Panel-grid .p6-filter-bar-row1 > .p6-week-label { grid-area: label; }
      #p6Panel-grid .p6-filter-bar-row1 > .p6-today-btn { grid-area: today; }
      #p6Panel-grid .p6-filter-bar-row1 > .p6-row1-right {
        grid-area: right;
        display: flex !important;
        gap: 6px !important;
        width: 100%;
      }
      #p6Panel-grid .p6-filter-bar-row1 > .p6-row1-right > * {
        flex: 1 1 auto;
        min-width: 0;
      }
      /* 1주/2주 토글 그룹은 자체 구조 유지 */
      #p6Panel-grid .p6-filter-bar-row1 > .p6-row1-right > div:first-child {
        flex: 1 1 auto;
      }

      /* ── 공유사항: Row1을 2행으로 분할 ── */
      #p6Panel-notice .p6-filter-bar-row1 {
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
          "nav label today"
          "right right right" !important;
        row-gap: 8px;
      }
      #p6Panel-notice .p6-filter-bar-row1 > .p6-nav-group { grid-area: nav; }
      #p6Panel-notice .p6-filter-bar-row1 > .p6-week-label { grid-area: label; }
      #p6Panel-notice .p6-filter-bar-row1 > button[onclick*="snGoToday"] { grid-area: today; }
      #p6Panel-notice .p6-filter-bar-row1 > .p6-row1-right {
        grid-area: right;
        display: flex !important;
        gap: 6px !important;
        width: 100%;
      }
      #p6Panel-notice .p6-filter-bar-row1 > .p6-row1-right > * {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 36px;
      }

      /* ── 일정 등록: 입력행 구조 완전 재설계 ──
         날짜 라벨, 입력창, 컨트롤을 세로로 쌓음 */
      /* 각 날짜 행의 최상위 컨테이너: 세로 배치 */
      #p6WrDateRows > div[style*="display:flex"][style*="padding:7px 14px"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
      }
      /* 날짜 라벨 (3/20(수) 등) - 상단 전폭 */
      #p6WrDateRows > div[style*="padding:7px 14px"] > div:first-child {
        min-width: 0 !important;
        padding-top: 0 !important;
      }
      /* input + controls 감싸는 중간 div에 flex-wrap 허용 */
      .p6wr-row > div:first-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
      }
      /* 입력창: 전폭, 큰 글자 */
      .p6wr-row .p6wr-inp {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 11px 14px !important;
        font-size:var(--fs-md) !important;
      }
      /* 컨트롤 영역(중요·삭제): 다음 줄, 오른쪽 정렬 */
      .p6wr-row .p6wr-row-controls {
        flex: 1 1 100% !important;
        justify-content: flex-end !important;
        width: 100% !important;
      }
      /* "+ 행 추가" 버튼도 전폭으로 - 터치 쉽게 */
      #p6WrDateRows button[onclick*="p6WrAddRow"] {
        width: 100%;
        padding: 8px 14px !important;
        font-size:var(--fs-base) !important;
        min-height: 40px;
      }
      /* 기존 일정 카드(이미 저장된 것) 모바일 최적화 */
      #p6WrDateRows [id^="p6ev-"] {
        padding: 8px 10px !important;
      }
      #p6WrDateRows [id^="p6ev-"] .p6ev-title {
        font-size:var(--fs-base) !important;
        line-height: var(--lh-tight);
      }
    }

    /* ══ Phase 2+: 생산안정기금(p10) 재해 신청 스텝 UI ══
       6개 탭 → 3개 탭(입력/조회/산출) + 입력 탭 내 Step 1/2 구조 */

    /* Step 1/2 진행 표시 */
    .dr-step-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      padding: 12px 16px;
      background: var(--white);
      border: 0.5px solid var(--bdr);
      border-radius: var(--r12);
    }
    .dr-step-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      background: var(--s50);
      color: var(--txtm);
      flex-shrink: 0;
    }
    .dr-step-item.is-current {
      background: var(--g50);
      color: var(--g700);
      box-shadow: inset 0 0 0 1px var(--g200);
    }
    .dr-step-item.is-done {
      background: var(--g600);
      color: #fff;
    }
    .dr-step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(255,255,255,.3);
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
    }
    .dr-step-item:not(.is-done):not(.is-current) .dr-step-num {
      background: var(--bdr);
    }
    .dr-step-item.is-current .dr-step-num {
      background: var(--g600);
      color: #fff;
    }
    .dr-step-divider {
      flex: 1;
      height: 1px;
      background: var(--bdr);
      min-width: 12px;
    }

    /* Step 2: 신청 선택 카드 */
    .dr-step2-wrap {
      margin-top: 24px;
      padding: 20px;
      background: var(--white);
      border: 0.5px solid var(--bdr);
      border-radius: var(--r14);
    }
    .dr-step2-wrap.is-locked {
      opacity: 0.55;
      pointer-events: none;
    }
    .dr-step2-header {
      margin-bottom: 16px;
    }
    .dr-step2-title {
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      color: var(--txt);
      margin-bottom: 4px;
    }
    .dr-step2-desc {
      font-size: var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-base);
    }
    .dr-step2-desc.is-locked {
      color: var(--amber);
      font-weight: var(--fw-medium);
    }
    .dr-apply-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .dr-apply-card {
      padding: 20px 16px;
      background: var(--white);
      border: 1.5px solid var(--bdr);
      border-radius: var(--r12);
      cursor: pointer;
      text-align: center;
      font-family: 'Pretendard Variable', sans-serif;
      transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
      justify-content: center;
      min-height: 110px;
    }
    .dr-apply-card:hover:not(:disabled) {
      border-color: var(--g500);
      background: var(--g50);
      box-shadow: 0 4px 12px rgba(46,125,50,.12);
    }
    .dr-apply-card:active:not(:disabled) {
      transform: translateY(1px);
    }
    .dr-apply-card:disabled {
      cursor: not-allowed;
      background: var(--s50);
    }
    .dr-apply-card-title {
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txt);
    }
    .dr-apply-card:disabled .dr-apply-card-title {
      color: var(--txtm);
    }
    .dr-apply-card-desc {
      font-size: var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-base);
    }
    .dr-apply-card-desc.locked-msg {
      color: var(--amber);
      font-weight: var(--fw-medium);
    }

    /* 신청 폼 상단의 "입력 단계로 돌아가기" 버튼 */
    .dr-back-to-input {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      margin-bottom: 14px;
      background: var(--white);
      border: 0.5px solid var(--bdr);
      border-radius: var(--r8);
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txts);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: all .15s;
    }
    .dr-back-to-input:hover {
      background: var(--s50);
      border-color: var(--g400);
      color: var(--g700);
    }
    .dr-back-to-input::before {
      content: '←';
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
    }

    /* 모바일: 신청 카드 1열로, 스텝 인디케이터 세로 배치 */
    @media (max-width: 640px) {
      .dr-apply-cards {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .dr-apply-card {
        min-height: 88px;
        padding: 16px;
        flex-direction: row;
        text-align: left;
        gap: 10px;
      }
      .dr-apply-card-title {
        min-width: 80px;
      }
      .dr-step-indicator {
        gap: 6px;
        padding: 10px 12px;
      }
      .dr-step-item {
        padding: 5px 10px;
        font-size: var(--fs-xs);
      }
      .dr-step2-wrap {
        padding: 16px 14px;
        margin-top: 16px;
      }

      /* ══ 각 신청 폼(수확포기·작물피해·시설피해) 모바일 레이아웃 ══
         기준: #p2DisasterModal / #drInputInner (재해 등록 모달과 동일한 규격) */

      /* ─ 탭 컨테이너: 중앙 정렬, max-width 520px ─ */
      #drTabApplyHarvest,
      #drTabApplyCrop,
      #drTabApplyFacility {
        flex-direction: column;
        align-items: center;
      }
      #drTabApplyHarvest > *,
      #drTabApplyCrop > *,
      #drTabApplyFacility > * {
        width: 100% !important;
        max-width: 520px !important;
        box-sizing: border-box !important;
      }

      /* ─ 카드 스타일: 재해 등록 모달의 회색 섹션 박스 ─ */
      #drTabApplyHarvest .card,
      #drTabApplyCrop .card,
      #drTabApplyFacility .card {
        background: var(--g50) !important;
        border: 1px solid var(--bdr) !important;
        border-left: 1px solid var(--bdr) !important;
        border-right: 1px solid var(--bdr) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        margin-bottom: 14px !important;
        overflow: visible !important;
      }

      /* ─ 카드 헤더: 컴팩트한 소형 라벨 (모달과 동일) ─ */
      #drTabApplyHarvest .card-head,
      #drTabApplyCrop .card-head,
      #drTabApplyFacility .card-head {
        padding: 14px 16px 0 !important;
        background: transparent !important;
        border-bottom: none !important;
        min-height: 0 !important;
        margin-bottom: 10px !important;
      }
      #drTabApplyHarvest .card-title,
      #drTabApplyCrop .card-title,
      #drTabApplyFacility .card-title {
        font-size:var(--fs-sm) !important;
        font-weight: var(--fw-bold) !important;
        color: var(--txts) !important;
        letter-spacing: 0.03em !important;
      }

      /* ─ 카드 본문 padding ─ */
      #drTabApplyHarvest .card-body,
      #drTabApplyCrop .card-body,
      #drTabApplyFacility .card-body,
      #drTabApplyHarvest .card > div[style*="padding:16px 20px"],
      #drTabApplyCrop .card > div[style*="padding:16px 20px"],
      #drTabApplyFacility .card > div[style*="padding:16px 20px"] {
        padding: 0 16px 14px !important;
      }

      /* ─ 3열 그리드 → 2열 (재해 모달과 동일, 1fr 1fr) ─ */
      #drTabApplyHarvest [style*="grid-template-columns:1fr 1fr 1fr"],
      #drTabApplyCrop [style*="grid-template-columns:1fr 1fr 1fr"],
      #drTabApplyFacility [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }

      /* ─ 2열 그리드: 그대로 유지 (재해 모달과 동일) ─ */
      #drTabApplyHarvest [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
      #drTabApplyCrop [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
      #drTabApplyFacility [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }

      /* ─ 상단 헤더 배너: 재해 모달처럼 간결하게 ─ */
      #drTabApplyHarvest > div[style*="linear-gradient(90deg,var(--g50)"],
      #drTabApplyCrop > div[style*="linear-gradient(90deg,var(--g50)"],
      #drTabApplyFacility > div[style*="linear-gradient(90deg,var(--g50)"] {
        background: var(--white) !important;
        border: 1px solid var(--bdr) !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        margin-bottom: 14px !important;
      }
      #drTabApplyHarvest > div[style*="linear-gradient(90deg,var(--g50)"] > div > div,
      #drTabApplyCrop > div[style*="linear-gradient(90deg,var(--g50)"] > div > div,
      #drTabApplyFacility > div[style*="linear-gradient(90deg,var(--g50)"] > div > div {
        font-size:var(--fs-md) !important;
        color: var(--txt) !important;
      }

      /* ─ 연결 경고 배너 ─ */
      #drHarvestLinkWarn,
      #drCropLinkWarn,
      #drFacilityLinkWarn {
        border-radius: 10px !important;
        font-size:var(--fs-sm) !important;
        padding: 10px 14px !important;
        margin-bottom: 14px !important;
      }

      /* ─ 사진 그리드: 2열 (재해 모달과 동일) ─ */
      #drTabApplyHarvest .dr-photo-grid,
      #drTabApplyCrop .dr-photo-grid,
      #drTabApplyFacility .dr-photo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
      }
      #drTabApplyHarvest .dr-photo-cell,
      #drTabApplyCrop .dr-photo-cell,
      #drTabApplyFacility .dr-photo-cell {
        min-height: 90px !important;
        padding: 8px !important;
        border: 1.5px dashed var(--bdr) !important;
        border-radius: 10px !important;
        background: var(--white) !important;
      }
      #drTabApplyHarvest .dr-photo-placeholder,
      #drTabApplyCrop .dr-photo-placeholder,
      #drTabApplyFacility .dr-photo-placeholder {
        min-height: 70px !important;
        font-size:var(--fs-xs) !important;
      }

      /* ─ 테이블 가로 스크롤 (터치 힌트) ─ */
      #drTabApplyHarvest .card > div[style*="overflow-x:auto"],
      #drTabApplyCrop .card > div[style*="overflow-x:auto"],
      #drTabApplyFacility .card > div[style*="overflow-x:auto"] {
        -webkit-overflow-scrolling: touch;
        background:
          linear-gradient(90deg, var(--g50) 30%, transparent) 0 0 / 30px 100% no-repeat local,
          linear-gradient(-90deg, var(--g50) 30%, transparent) 100% 0 / 30px 100% no-repeat local,
          radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.08), transparent) 0 0 / 8px 100% no-repeat scroll,
          radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), transparent) 100% 0 / 8px 100% no-repeat scroll;
      }

      /* ─ 첨부파일 행 세로 배치 ─ */
      #drTabApplyHarvest .dr-attach-row,
      #drTabApplyCrop .dr-attach-row,
      #drTabApplyFacility .dr-attach-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
      }
      #drTabApplyHarvest .dr-attach-row input.form-input,
      #drTabApplyCrop .dr-attach-row input.form-input,
      #drTabApplyFacility .dr-attach-row input.form-input {
        width: 100% !important;
      }

      /* ─ "입력 단계로 돌아가기" 버튼 ─ */
      .dr-back-to-input {
        width: 100%;
        max-width: 520px !important;
        justify-content: center;
        padding: 12px 14px;
        font-size: var(--fs-base);
        min-height: var(--touch-min);
      }

      /* ─ 저장/초기화 버튼: 재해 모달과 동일 비율 (초기화 flex:1 / 저장 flex:2) ─ */
      div:has(> #ahSaveBtn),
      div:has(> #acSaveBtn),
      div:has(> #afSaveBtn) {
        justify-content: stretch !important;
        gap: 10px !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
      }
      #ahSaveBtn, #acSaveBtn, #afSaveBtn {
        flex: 2 !important;
        padding: 14px !important;
        border: none !important;
        border-radius: 12px !important;
        font-size:var(--fs-md) !important;
        font-weight: var(--fw-bold) !important;
        min-height: 48px !important;
      }
      div:has(> #ahSaveBtn) > .edit-btn,
      div:has(> #acSaveBtn) > .edit-btn,
      div:has(> #afSaveBtn) > .edit-btn {
        flex: 1 !important;
        padding: 14px !important;
        border: 1.5px solid var(--bdr) !important;
        border-radius: 12px !important;
        background: var(--white) !important;
        font-size:var(--fs-md) !important;
        font-weight: var(--fw-medium) !important;
        min-height: 48px !important;
      }

      /* ══ 조회 탭(처리 상황) 작은 모바일 보강 ══ */
      /* KPI 카드: 7개 → 4열 그리드로 */
      #drTabList .dr-kpi-bar {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
      }
      #drTabList .dr-kpi-card {
        flex: none !important;
        min-width: 0 !important;
        padding: 8px 6px 6px !important;
        text-align: center !important;
      }
      #drTabList .dr-kpi-label {
        font-size:var(--fs-xs) !important;
      }
      #drTabList .dr-kpi-count {
        font-size:var(--fs-xl) !important;
        font-weight: var(--fw-bold) !important;
      }
      #drTabList .dr-kpi-sub {
        display: none;
      }

      /* 툴바: 검색 전폭, select·버튼 2열 */
      #drListSearch {
        width: 100% !important;
        flex: 1 1 100% !important;
      }
      #drTabList .dr-toolbar-left > .form-input:not(#drListSearch) {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        width: auto !important;
      }
      #drTabList .dr-toolbar-left > .edit-btn {
        flex: 1 1 calc(50% - 4px) !important;
        font-size:var(--fs-sm) !important;
      }
      /* 엑셀/PDF 버튼 모바일 축소 */
      #drTabList #drExcelBtn,
      #drTabList #drPdfBtn {
        flex: 1 1 calc(33% - 4px) !important;
      }
      /* 구분선 숨김 */
      #drTabList .dr-toolbar-left > span[style*="width:1px"] {
        display: none;
      }

      /* 신청 유형 칩: 가로 스크롤 */
      #drTabList .dr-toolbar > div[style*="margin-top:8px"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
      }
      #drTabList .dr-type-chip {
        flex-shrink: 0;
      }

      /* ── 일괄처리 툴바(drBulkZone) 모바일 레이아웃 ── */
      #drBulkZone {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
      }

      /* 그룹: 라벨+내용 세로 배치 */
      #drBulkZone .dr-bulk-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
      }

      /* 입력 행: 가로 flex 유지 */
      #drBulkZone .dr-bulk-group-row {
        width: 100% !important;
      }

      /* select 전폭 */
      #drBulkZone #drBulkProcessingStatus {
        flex: 1 !important;
        width: 100% !important;
        height: 46px !important;
        font-size:var(--fs-md) !important;
      }

      /* 저장·적용 버튼 */
      #drBulkZone .edit-btn {
        height: 46px !important;
        font-size:var(--fs-md) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
      }

      /* 년도·차수 입력 */
      #drBulkZone #drBulkMeetingYr,
      #drBulkZone #drBulkMeetingCnt {
        height: 46px !important;
        font-size:var(--fs-md) !important;
      }

      /* 구분선 숨김 */
      #drBulkZone .dr-bulk-divider {
        width: 100% !important;
        height: 1px !important;
        background: var(--bdr) !important;
      }

      /* ══ 산출 탭(지원금 산출) 보강 ══ */
      /* 상단 헤더: 버튼 4개 세로 정리 */
      #drTabCalc > div:first-child > div:last-child {
        width: 100%;
        justify-content: stretch !important;
      }
      #drTabCalc > div:first-child > div:last-child > button {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: 40px !important;
      }

      /* 필터바: 검색 전폭 + select 2열 */
      #drCalcSearchInput {
        width: 100% !important;
        height: 40px !important;
      }
      #drTabCalc .drc-filter-bar select {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        height: 40px !important;
      }

      /* 처리상황 칩: 가로 스크롤 */
      #drTabCalc .drc-filter-bar[style*="margin-bottom:12px"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
      }
      #drTabCalc .drc-status-chip {
        flex-shrink: 0;
      }

      /* 산출 요약 카드 */
      .drc-summary-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }
      .drc-summary-val {
        font-size:var(--fs-lg) !important;
      }

      /* \u2500\u2500 p10 \ucf58\ud14c\uc774\ub108 \ubaa8\ubc14\uc77c \ud328\ub529 \ucd95\uc18c \u2500\u2500
         \uae30\ubcf8\uac12 width:calc(100vw-48px);padding:24px \uc774\uba74 \ubaa8\ubc14\uc77c \uc720\ud6a8\ud3ed ~280px \u2192 \ub108\ubb34 \uc88c\uc74c
         \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub294 \ud328\ub529 \ucd5c\uc18c\ud654\ud558\uc5ec \ud3fc \uc785\ub825 \uacf5\uac04 \ud655\ubcf4 */
      #p10 > div[style*="max-width:1560px"] {
        width: calc(100vw - 16px) !important;
        padding: 12px 10px !important;
      }

      /* \u2500\u2500 \uc7ac\ud574\ubcf4\uace0\uc11c \uc785\ub825 \ud0ed(#drInputInner): \ubaa8\ubc14\uc77c \uadf8\ub9ac\ub4dc 1\uc5f4 \u2500\u2500
         PC: 3\uc5f4\u21922\uc5f4 \uc720\uc9c0 / \ubaa8\ubc14\uc77c: \ubaa8\ub4e0 \uadf8\ub9ac\ub4dc 1\uc5f4\ub85c (\ubc1c\uc0dd\ub144\ub3c4\ub7a8\u00b7\uc6d4 \ubf09\uac1c\uc9d4 \ubc29\uc9c0) */
      #drInputInner [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
      #drInputInner [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
        grid-template-columns: 1fr !important;
      }

      /* \u2500\u2500 \uc2e0\uccad \ud3fc 3\ud0ed: \ubaa8\ubc14\uc77c \ucded\uc740 \ud654\uba74\uc5d0\uc11c 2\uc5f4 \u2192 1\uc5f4 \u2500\u2500 */
      #drTabApplyHarvest [style*="grid-template-columns:1fr 1fr 1fr"],
      #drTabApplyCrop [style*="grid-template-columns:1fr 1fr 1fr"],
      #drTabApplyFacility [style*="grid-template-columns:1fr 1fr 1fr"],
      #drTabApplyHarvest [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
      #drTabApplyCrop [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
      #drTabApplyFacility [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
        grid-template-columns: 1fr !important;
      }
    }

    body {
      font-family: 'Pretendard Variable', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--page-bg);
      color: var(--txt);
      font-size: var(--fs-md);
      line-height: var(--lh-base);
      /* ══ 숫자 정렬 개선 (tabular-nums): 123/456 같은 숫자가 자릿수 맞춰 정렬 ══ */
      font-variant-numeric: tabular-nums;
      /* ══ 한글 자간 미세 조정 (Pretendard Variable 최적) ══ */
      letter-spacing: -0.005em;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      overscroll-behavior: none
    }

    /* 스크롤바 */
    ::-webkit-scrollbar { width: 6px; height: 6px }
    ::-webkit-scrollbar-track { background: transparent }
    ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px }
    ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25) }


        /* ════════════ 상단 바 ════════════ */
    .topbar {
      background: var(--g900);
      padding: 5px 0;
      font-size:var(--fs-xs);
      color: rgba(255, 255, 255, .5);
      position: sticky;
      top: 0;
      z-index: 300
    }

    .topbar-in {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .live-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .15);
      padding: 2px 9px;
      border-radius: 20px;
      color: var(--g200);
      font-size:var(--fs-xs)
    }

    .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--g400);
      display: inline-block;
      animation: pulse 1.5s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    /* ════════════ 헤더 ════════════ */
    header {
      background: var(--white);
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      position: sticky;
      top: 0;
      z-index: 200;
      box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
      overflow: visible
    }

    .hdr-in {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      height: 62px;
      gap: 20px
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      flex-shrink: 0;
      cursor: pointer
    }

    .team-logo-img-wrap {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      background: linear-gradient(180deg, #f4faee 0%, #e7f3d9 100%);
      border: 0.5px solid rgba(46,125,50,.2);
      box-shadow: 0 2px 8px rgba(27,94,32,.12)
    }

    .team-logo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .team-logo-img-wrap.is-loading {
      opacity: .85
    }

    .team-logo-img-wrap.is-hidden {
      display: none
    }

    .logo-mark {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      background: var(--g800);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(27,94,32,.25), inset 0 1px 0 rgba(255,255,255,.15)
    }

    .logo-text strong {
      display: block;
      font-size:var(--fs-lg);
      font-weight: var(--fw-bold);
      color: var(--txt);
      line-height: var(--lh-tight);
      letter-spacing: -.02em
    }

    .logo-text span {
      font-size:var(--fs-xs);
      color: var(--txtm);
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .week-badge {
      padding: 4px 12px;
      background: var(--g50);
      border: 0.5px solid rgba(46,125,50,.2);
      border-radius: 20px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--g700);
      white-space: nowrap;
      letter-spacing: .01em
    }

    

    .jipum-tab {
      padding: 5px 14px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 20px;
      background: var(--white);
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txts);
      cursor: pointer;
      font-family: inherit;
      transition: all .15s
    }

    .jipum-tab.jipum-tab-on {
      background: var(--g600);
      border-color: var(--g600);
      color: #fff
    }

    .jipum-section {
      margin-bottom: 14px
    }

    .jipum-section-title {
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txt);
      padding: 7px 12px;
      background: #f5f4f1;
      border-radius: 7px;
      border-left: 3px solid var(--g600);
      margin-bottom: 8px;
      letter-spacing: -.01em
    }

    .jipum-item {
      font-size:var(--fs-base);
      color: var(--txt);
      padding: 5px 12px;
      border-bottom: 0.5px solid rgba(0,0,0,.05);
      line-height: var(--lh-base)
    }

    .jipum-item:last-child {
      border-bottom: none
    }

    .jipum-empty-section {
      font-size:var(--fs-sm);
      color: var(--txtm);
      padding: 5px 12px;
      font-style: italic
    }

    .hdr-btns {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-shrink: 0;
      margin-left: auto
    }

    .hbtn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border: 0.5px solid rgba(0,0,0,.12);
      border-radius: 8px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txts);
      background: var(--white);
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s;
      font-family: 'Pretendard Variable', sans-serif;
      box-shadow: 0 1px 2px rgba(0,0,0,.04)
    }

    .hbtn:hover {
      border-color: var(--g400);
      color: var(--g700);
      background: var(--g50);
      box-shadow: 0 1px 4px rgba(46,125,50,.1)
    }

    .header-live-clock {
      display: flex;
      align-items: center;
      gap: 0;
      padding: 4px 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      white-space: nowrap;
      min-width: 0;
      justify-content: flex-end;
      margin-right: 18px
    }

    .header-live-clock .clock-label {
      display: none
    }

    .header-live-clock .clock-line {
      display: flex;
      align-items: baseline;
      gap: 10px;
      white-space: nowrap
    }

    .header-live-clock .clock-date {
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: #3f4b42;
      letter-spacing: -.01em
    }

    .header-live-clock .clock-time {
      font-family: 'DM Mono', monospace;
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: #18361c;
      display: inline-flex;
      align-items: center;
      gap: 0;
      letter-spacing: .02em;
      font-variant-numeric: tabular-nums
    }

    .header-live-clock .clock-seconds {
      color: var(--g600)
    }

    .header-live-clock .clock-divider {
      width: 1px;
      height: 12px;
      background: #d7ddd7;
      display: inline-block;
      flex-shrink: 0;
      vertical-align: middle;
      align-self: center
    }

    /* 사용자 뱃지 */
    .user-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border: 0.5px solid rgba(0,0,0,.1);
      border-radius: 10px;
      background: var(--white);
      cursor: pointer;
      transition: all .15s;
      position: relative;
      height: 42px;
      box-sizing: border-box;
      box-shadow: 0 1px 3px rgba(0,0,0,.05)
    }

    .user-badge:hover {
      border-color: var(--g300, var(--g200));
      background: var(--g50);
      box-shadow: 0 2px 8px rgba(46,125,50,.1)
    }

    .user-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--g800);
      color: #fff;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 1px 4px rgba(27,94,32,.25)
    }

    .user-info {
      text-align: left
    }

    .user-name {
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txt);
      display: block;
      line-height: var(--lh-tight)
    }

    .user-org {
      font-size:var(--fs-xs);
      color: var(--txtm);
      display: block
    }

    .user-role {
      display: inline-flex;
      align-items: center;
      padding: 1px 6px;
      border-radius: 4px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      margin-left: 4px
    }

    .role-admin {
      background: var(--purple-l);
      color: var(--purple)
    }

    .role-member {
      background: var(--g50);
      color: var(--g600)
    }

    /* 유저 드롭다운 */
    .user-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.1);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
      min-width: 200px;
      padding: 8px;
      z-index: 300;
      display: none
    }

    .user-dropdown.show {
      display: block
    }

    .ud-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 12px;
      border-radius: 8px;
      font-size:var(--fs-base);
      color: var(--txt);
      cursor: pointer;
      transition: all .15s;
      font-weight: var(--fw-medium)
    }

    .ud-item:hover {
      background: var(--content-bg)
    }

    .ud-item.danger {
      color: var(--red)
    }

    .ud-item.danger:hover {
      background: var(--red-l)
    }

    .ud-divider {
      height: 1px;
      background: var(--bdr);
      margin: 4px 0
    }

    /* 내 활동 보기 모달 */
    .myact-tab:hover { color: var(--g700) !important; }
    .myact-tab.on { color: var(--g700) !important; border-bottom-color: var(--g600) !important; }
    .myact-card {
      background:#fff; border:1px solid var(--bdr); border-radius:10px;
      padding:12px 14px; margin-bottom:8px; transition:all .15s;
    }
    .myact-card:hover { border-color: var(--g500); box-shadow: 0 2px 8px rgba(74,138,52,.08); }
    .myact-card-head {
      display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap;
    }
    .myact-chip {
      font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:2px 8px; border-radius:10px;
      background:var(--g50); color:var(--g700); border:1px solid var(--g200, #cfe3c9);
      line-height:var(--lh-base);
    }
    .myact-chip.heart { background:var(--red-l); color:#E24B4A; border-color:#ffd4d4; }
    .myact-chip.schedule { background:#f0f6ff; color:#2d6a9e; border-color:#cbe0f5; }
    .myact-chip.memo { background:#fff8e6; color:#a07020; border-color:#f1df9e; }
    .myact-date { font-size:var(--fs-xs); color:var(--txts); margin-left:auto; font-weight:var(--fw-medium); }
    .myact-title { font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--txt); margin-bottom:3px; line-height:var(--lh-tight); }
    .myact-body { font-size:var(--fs-sm); color:#555; line-height:var(--lh-base); word-break:break-all;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .myact-empty {
      text-align:center; padding:50px 20px; color:var(--txts); font-size:var(--fs-base);
      background:#fff; border:1px dashed var(--bdr); border-radius:10px;
    }

    @media (max-width:640px) {
      #myActivityModalBg > div { width:100% !important; max-width:100% !important; height:100vh; max-height:100vh; border-radius:0 !important; }
      #myActivityModalBg .myact-tab { padding:10px 12px !important; font-size:var(--fs-sm) !important; }
      #myActivityModalBg [id^="myAct_total"] { font-size:var(--fs-lg) !important; }
    }

    /* 조직현황 모바일 카드 레이아웃 */
    .p7o-card-wrap { display: none; }
    .p7o-card {
      border: 1px solid var(--bdr);
      border-radius: 10px;
      padding: 12px 13px;
      margin-bottom: 8px;
      background: #fff;
    }
    .p7o-card:last-child { margin-bottom: 6px; }
    .p7o-card-head {
      display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
      flex-wrap: wrap;
    }
    .p7o-card-idx {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--g50); color: var(--g700);
      font-size:var(--fs-xs); font-weight: var(--fw-bold); flex-shrink: 0;
    }
    .p7o-card-name {
      font-size:var(--fs-lg); font-weight: var(--fw-bold); color: var(--txt); letter-spacing: -0.3px;
    }
    .p7o-card-title {
      font-size:var(--fs-xs); font-weight: var(--fw-bold); color: var(--g700);
      background: var(--g50); border: 1px solid var(--g200, #cfe3c9);
      padding: 2px 8px; border-radius: 10px;
      margin-left: auto;
    }
    .p7o-card-sub {
      font-size:var(--fs-xs); color: var(--txts); margin-bottom: 10px;
      padding-left: 30px;
    }
    .p7o-card-body {
      border-top: 1px dashed var(--bdr); padding-top: 8px;
      display: flex; flex-direction: column; gap: 5px;
    }
    .p7o-card-row {
      display: flex; align-items: flex-start; gap: 10px; font-size:var(--fs-sm);
    }
    .p7o-card-lbl {
      flex-shrink: 0; width: 48px; color: var(--txts);
      font-size:var(--fs-xs); font-weight: var(--fw-medium); padding-top: 1px;
    }
    .p7o-card-val {
      flex: 1; color: var(--txt); font-weight: var(--fw-medium); word-break: break-all;
    }
    @media (max-width: 720px) {
      .p7o-tbl-wrap { display: none; }
      .p7o-card-wrap { display: block; }
    }

    /* 참고자료 모바일 카드 레이아웃 */
    .p7r-card-wrap { display: none; }
    .p7r-card {
      border: 1px solid var(--bdr);
      border-radius: 10px;
      padding: 13px 14px;
      margin-bottom: 9px;
      background: #fff;
    }
    .p7r-card-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 10px; margin-bottom: 10px;
      padding-bottom: 9px; border-bottom: 1px dashed var(--bdr);
    }
    .p7r-card-who {
      display: flex; flex-direction: column; gap: 2px; min-width: 0;
    }
    .p7r-card-org {
      font-size:var(--fs-sm); font-weight: var(--fw-bold); color: var(--g700); letter-spacing: -0.2px;
    }
    .p7r-card-name {
      font-size:var(--fs-base); font-weight: var(--fw-medium); color: var(--txt);
    }
    .p7r-card-date {
      font-size:var(--fs-xs); color: var(--txts); font-weight: var(--fw-medium);
      text-align: right; flex-shrink: 0; line-height: var(--lh-base); padding-top: 1px;
    }
    .p7r-card-desc {
      font-size:var(--fs-base); color: var(--txt); line-height: var(--lh-base);
      word-break: break-word; margin-bottom: 10px;
    }
    .p7r-card-file {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--blue); text-decoration: none;
      font-size:var(--fs-sm); font-weight: var(--fw-medium);
      padding: 7px 11px; border: 1px solid var(--blue); border-radius: 7px;
      background: #fff;
      max-width: 100%; box-sizing: border-box;
      word-break: break-all;
    }
    .p7r-card-file:active { background: #eaf3fc; }
    .p7r-card-actions {
      display: flex; gap: 6px; margin-top: 10px; padding-top: 9px;
      border-top: 1px dashed var(--bdr); justify-content: flex-end;
    }
    .p7r-card-actions button {
      padding: 5px 12px; font-size:var(--fs-xs); font-weight: var(--fw-medium);
      border-radius: 6px; cursor: pointer; font-family: inherit;
    }
    .p7r-card-actions .btn-edit {
      border: 1px solid #a5d6a7; background: var(--g50); color: var(--g600);
    }
    .p7r-card-actions .btn-del {
      border: 1px solid #fbbaba; background: var(--red-l); color: var(--red);
    }
    @media (max-width: 720px) {
      .p7r-tbl-wrap { display: none; }
      .p7r-card-wrap { display: block; }
    }

    /* 관련사이트 드롭다운 */
    .site-drop-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border: 0.5px solid rgba(0,0,0,.12);
      border-radius: 8px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txts);
      background: var(--white);
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s;
      font-family: 'Pretendard Variable', sans-serif;
      position: relative;
      height: 42px;
      box-sizing: border-box;
      box-shadow: 0 1px 2px rgba(0,0,0,.04)
    }

    .site-drop-btn:hover {
      border-color: var(--g400);
      color: var(--g600)
    }

    .site-drop-btn.open {
      border-color: var(--g400);
      color: var(--g600);
      background: var(--g50)
    }

    .site-drop-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.1);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
      width: 260px;
      padding: 8px;
      z-index: 1000;
      display: none
    }

    .site-drop-panel.show {
      display: block
    }

    /* PWA 설치 버튼: 기본 숨김(PC), 모바일 미디어쿼리에서만 표시 */
    .pwa-install-btn {
      display: none;
      align-items: center;
      padding: 6px 12px;
      border: 1px solid var(--g600);
      border-radius: 6px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: #fff;
      background: var(--g600);
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s;
      font-family: 'Pretendard Variable', sans-serif;
    }
    .pwa-install-btn:hover {
      background: var(--g700);
      border-color: var(--g700);
    }

    .ong-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 0.5px solid rgba(46,125,50,.2);
      border-radius: 8px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--g800);
      background: var(--g50);
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s;
      font-family: 'Pretendard Variable', sans-serif;
      height: 42px;
      box-sizing: border-box;
      box-shadow: 0 1px 3px rgba(46,125,50,.08)
    }

    .ong-btn:hover {
      border-color: var(--g400);
      background: var(--g50);
      color: var(--g900);
      box-shadow: 0 2px 8px rgba(46,125,50,.14)
    }

    .ong-modal-bg {
      position: fixed;
      inset: 0;
      background: rgba(15,20,30,.5);
      z-index: 1300;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px
    }

    .ong-modal-bg.show {
      display: flex
    }

    .ong-modal {
      width: min(760px, 100%);
      max-height: 88vh;
      overflow: auto;
      background: linear-gradient(180deg, #fffefb 0%, #ffffff 100%);
      border: 1px solid #dfe9dc;
      border-radius: 24px;
      box-shadow: 0 24px 80px rgba(27, 94, 32, .14)
    }

    .ong-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 24px 26px 16px;
      border-bottom: 1px solid #e2ecdf;
      background: linear-gradient(180deg, #f7fbf6 0%, #ffffff 100%)
    }

    .ong-modal-title {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: #1b3b1f;
      line-height: var(--lh-tight);
      letter-spacing: -.02em
    }

    .ong-modal-sub {
      font-size:var(--fs-base);
      color: #55705a;
      margin-top: 6px;
      line-height: var(--lh-loose)
    }

    .ong-close {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 0.5px solid rgba(0,0,0,.08);
      background: #fff;
      color: var(--txtm);
      cursor: pointer;
      font-size:var(--fs-xl)
    }

    .ong-close:hover {
      color: var(--txt);
      border-color: var(--g400)
    }

    .ong-modal-body {
      padding: 24px 26px 26px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdf9 100%)
    }

    .ong-section {
      background: rgba(255, 255, 255, .98);
      border: 1px solid #dfe9dc;
      border-radius: 20px;
      padding: 18px 20px;
      box-shadow: 0 8px 24px rgba(27, 94, 32, .05)
    }

    .ong-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .ong-field {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .ong-label {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--txts)
    }

    .ong-input,
    .ong-textarea,
    .ong-select {
      width: 100%;
      padding: 11px 12px;
      border: 0.5px solid rgba(0,0,0,.14);
      border-radius: 10px;
      font-size:var(--fs-base);
      font-family: 'Pretendard Variable', sans-serif;
      color: var(--txt);
      background: #fff
    }

    .ong-input:focus,
    .ong-textarea:focus,
    .ong-select:focus {
      outline: none;
      border-color: var(--g500);
      box-shadow: 0 0 0 3px rgba(46,125,50,.12)
    }

    .ong-textarea {
      min-height: 180px;
      resize: vertical;
      line-height: var(--lh-loose)
    }

    .ong-chip-box {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .ong-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 999px;
      background: var(--white);
      font-size:var(--fs-sm);
      color: var(--txt);
      cursor: pointer;
      transition: all .15s
    }

    .ong-chip input {
      accent-color: var(--g600)
    }

    .ong-chip:hover {
      border-color: var(--g400);
      background: var(--g50)
    }

    .ong-hero {
      position: relative;
      padding: 24px 24px 22px;
      border: 1px solid #d9e8d8;
      background: linear-gradient(135deg, #f7fbf6 0%, #eef7ef 58%, #f8fbf5 100%);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 12px 30px rgba(46, 125, 50, .08)
    }

    .ong-kicker {
      display: inline-flex;
      align-items: center;
      padding: 6px 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .96);
      border: 1px solid #cfe3d1;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--g600);
      margin-bottom: 12px;
      box-shadow: 0 4px 10px rgba(76, 175, 80, .08)
    }

    .ong-hero-title {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: #18361c;
      line-height: var(--lh-tight);
      margin-bottom: 10px;
      letter-spacing: -.02em
    }

    .ong-hero-desc {
      font-size:var(--fs-md);
      color: #4f6653;
      line-height: var(--lh-loose);
      max-width: 92%
    }

    .ong-hero-points {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px
    }

    .ong-point {
      display: inline-flex;
      align-items: center;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .96);
      border: 1px solid #d8e8d9;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: #315436;
      box-shadow: 0 4px 12px rgba(46, 125, 50, .05)
    }

    .ong-hero::before {
      content: '';
      position: absolute;
      right: -38px;
      top: -38px;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 160, 32, .18) 0%, rgba(232, 160, 32, 0) 68%)
    }

    .ong-hero::after {
      content: '';
      position: absolute;
      left: -24px;
      bottom: -26px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(76, 175, 80, .14) 0%, rgba(76, 175, 80, 0) 70%)
    }

    .ong-modal .ong-input,
    .ong-modal .ong-textarea,
    .ong-modal .ong-select {
      border-color: #e7dcc8;
      background: #fffdfa
    }

    .ong-modal .ong-input::placeholder,
    .ong-modal .ong-textarea::placeholder {
      color: #a19387
    }

    .ong-modal .ong-label {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: #5c4f44
    }

    .ong-modal .ong-chip {
      border-color: #e7dcc8;
      background: #fffdfa
    }

    .ong-modal .ong-chip:hover {
      border-color: #c9b597;
      background: #fff7ec
    }

    .ong-modal .ong-close {
      border: 1px solid #eadfce;
      background: #fffaf5;
      color: #9a8b7d
    }

    .ong-modal .ong-close:hover {
      color: #5d4d3d;
      border-color: #d7c4aa;
      background: #fff4e8
    }

    .ong-guide {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .ong-guide-item {
      padding: 14px 15px;
      border: 1px solid #e2ecdf;
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #f9fcf8 100%);
      box-shadow: 0 6px 18px rgba(46, 125, 50, .04)
    }

    .ong-guide-item strong {
      display: block;
      font-size:var(--fs-base);
      color: #24462a;
      margin-bottom: 6px
    }

    .ong-guide-item span {
      display: block;
      font-size:var(--fs-sm);
      color: #5c725f;
      line-height: var(--lh-loose)
    }

    .ong-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 2px
    }

    .ong-actions-left {
      font-size:var(--fs-sm);
      color: #69806d
    }

    .ong-action-buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%
    }

    .ong-soft-note {
      font-size:var(--fs-sm);
      color: #6f866f;
      line-height: var(--lh-loose);
      text-align: center;
      padding: 8px 10px;
      background: rgba(247, 251, 246, .98);
      border: 1px dashed #cfe3d1;
      border-radius: 14px
    }

    .ong-list {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .ong-recent {
      padding: 12px 14px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      background: var(--content-bg)
    }

    .ong-recent-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 6px
    }

    .ong-recent-title {
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txt)
    }

    .ong-recent-meta {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    .ong-recent-body {
      font-size:var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-loose);
      white-space: pre-wrap
    }

    @media (max-width: 760px) {
      .ong-grid {
        grid-template-columns: 1fr
      }

      .ong-guide {
        grid-template-columns: 1fr
      }

      .ong-modal-head,
      .ong-modal-body {
        padding-left: 16px;
        padding-right: 16px
      }

      .ong-actions {
        align-items: stretch
      }

      .ong-action-buttons {
        width: 100%
      }

      .ong-action-buttons .btn-cancel,
      .ong-action-buttons .btn-submit {
        width: 100%;
        padding: 14px 16px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #4a9d53 0%, var(--g600) 100%);
        color: #fff;
        font-size:var(--fs-md);
        font-weight: var(--fw-bold);
        cursor: pointer;
        font-family: 'Pretendard Variable', sans-serif;
        transition: all .18s;
        box-shadow: 0 8px 18px rgba(46, 125, 50, .18)
      }
    }

    .site-drop-head {
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--txtm);
      letter-spacing: .06em;
      padding: 6px 8px 8px;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      margin-bottom: 6px
    }

    .ud-profile {
      padding: 12px;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      margin-bottom: 4px
    }

    .ud-profile-name {
      font-size:var(--fs-base);
      font-weight: var(--fw-bold)
    }

    .ud-profile-org {
      font-size:var(--fs-xs);
      color: var(--txts);
      margin-top: 2px
    }

    .ud-profile-email {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    /* ════════════ MAIN TABS ════════════ */
    .main-tabs {
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 0.5px solid rgba(0,0,0,.07);
      position: sticky;
      top: 62px;
      z-index: 100;
      box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05)
    }

    .main-tabs-in {
      max-width: 1440px;
      margin: 0 auto;
      padding: 10px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .main-tabs-in>div:first-child {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      background: #e8e7e4;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 16px;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.07);
    }

    .main-tab {
      position: relative;
      padding: 0 18px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txts);
      cursor: pointer;
      border: none;
      border-left: none !important;
      border-bottom: none;
      white-space: nowrap;
      border-radius: 13px;
      transition: all .18s ease;
      letter-spacing: -.01em;
      background: transparent;
    }

    /* 메인/서브 탭 클릭 후 남는 포커스 outline 제거 */
    /* (마우스/터치 클릭 시 불필요한 빨간/기본 outline 차단) */
    .main-tab:focus,
    .main-tab:focus-visible,
    .sub-tab:focus,
    .sub-tab:focus-visible,
    .p6-gtab:focus,
    .p6-gtab:focus-visible {
      outline: none !important;
      box-shadow: none;
    }
    /* .on 상태는 기존 box-shadow 유지를 위해 별도 처리 */
    .main-tab.on:focus,
    .main-tab.on:focus-visible {
      outline: none !important;
      box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 3px 10px rgba(27,94,32,.12);
    }

    /* ══════════════════════════════════════════════════
       전역 클릭 안정화 — 정석 해결 [수정 2026-05-07]
       ──────────────────────────────────────────────────
       문제: 버튼 텍스트를 눌렀다 뗄 때 텍스트 선택이 시작되면
             mouseup target이 부모 요소로 이동하여
             브라우저가 `click` 이벤트를 발동하지 않는다.
       해결: 클릭 가능한 모든 "버튼류" 요소에 `user-select: none` 적용.
             단, [onclick]은 제외 — div 카드(hp-item 등)도 onclick을 쓰지만
             텍스트는 드래그-선택/복사 가능해야 하므로.
             div 카드의 클릭 안정화는 JS(드래그 후 click 무시)로 처리.
       ══════════════════════════════════════════════════ */
    button,
    [role="button"],
    .main-tab,
    .sub-tab,
    a.btn,
    .clickable {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    /* 카드형 onclick div는 텍스트 선택/복사 허용 */
    .hp-item, .hp-item *,
    .dr-item, .dr-item *,
    .hp-detail-content, .hp-detail-content *,
    .hp-detail-body, .hp-detail-body *,
    .p6-card, .p6-card * {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      -ms-user-select: text !important;
      user-select: text !important;
      -webkit-touch-callout: default !important;
    }
    /* 카드 안의 진짜 버튼/뱃지는 다시 선택 차단 */
    .hp-item button, .hp-item .hp-badge,
    .dr-item button, .dr-item .dr-badge {
      -webkit-user-select: none !important;
      user-select: none !important;
    }

    .main-tab+.main-tab {
      border-left: none !important
    }

    .main-tab:hover {
      color: var(--g700);
      background: rgba(255,255,255,.6);
    }

    .main-tab.on {
      color: var(--g800);
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 3px 10px rgba(27,94,32,.12);
    }

    .main-tab.input-tab {
      /* margin-left 제거: 상단 탭 간격 통일 */
    }

    .main-tab.admin-tab {
      /* margin-left 제거: 상단 탭 간격 통일 */
    }

    .tab-hidden {
      display: none !important
    }

    .main-tab.lab-tab {
      /* margin-left 제거: 상단 탭 간격 통일 */
    }

    /* ── 메인탭 드롭다운 호버 메뉴 ── */
    .main-tab-wrap {
      position: static;
      display: inline-flex;
      align-items: center
    }

    .main-tab-dropdown {
      position: fixed;
      min-width: 200px;
      background: #fff;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 14px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, .13);
      padding: 8px 6px;
      z-index: 99999;
      display: none;
    }

    .main-tab-dropdown.active {
      display: block;
    }

    .main-tab-dropdown-item {
      display: block;
      width: 100%;
      padding: 9px 14px;
      font-size:var(--fs-base);
      font-weight: var(--fw-medium);
      color: var(--txt);
      background: none;
      border: none;
      border-radius: 9px;
      cursor: pointer;
      text-align: left;
      transition: background .13s, color .13s;
      white-space: nowrap;
      font-family: 'Pretendard Variable', sans-serif;
    }

    .main-tab-dropdown-item:hover {
      background: var(--g50);
      color: var(--g600);
    }

    .main-tab-dropdown-divider {
      height: 1px;
      background: var(--bdr);
      margin: 5px 8px;
    }

    .main-tab-dropdown-label {
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--txtm);
      padding: 6px 14px 2px;
      letter-spacing: .04em;
    }

    #p_lab.on {
      display: block !important
    }

    .lab-wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 24px 16px
    }

    .lab-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 0.5px solid rgba(0,0,0,.08)
    }

    .lab-header-icon {
      font-size:var(--fs-3xl)
    }

    .lab-header-title {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: var(--txt)
    }

    .lab-header-sub {
      font-size:var(--fs-sm);
      color: var(--txts);
      margin-top: 3px
    }

    .lab-tabs-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
      flex-wrap: wrap
    }

    .lab-tab-btn {
      padding: 8px 18px;
      border-radius: 10px;
      border: 0.5px solid rgba(0,0,0,.14);
      background: #fff;
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txtm);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: all .15s
    }

    .lab-tab-btn:hover {
      border-color: var(--blue-l);
      color: #0277bd;
      background: var(--blue-l)
    }

    .lab-tab-btn.on {
      border-color: #0277bd;
      color: #0277bd;
      background: #e1f5fe;
      box-shadow: 0 2px 8px rgba(2, 119, 189, .12)
    }

    .lab-section {
      display: none
    }

    .lab-section.on {
      display: block
    }

    /* ════════════ TICKER ════════════ */
    .ticker {
      background: var(--g900);
      border-bottom: 1px solid rgba(255,255,255,.06);
      overflow: hidden;
      height: 38px;
      display: flex;
      align-items: stretch;
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw)
    }

    .ticker-label {
      flex-shrink: 0;
      background: var(--g800);
      color: rgba(255,255,255,.9);
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      padding: 0 14px;
      height: 38px;
      display: flex;
      align-items: center;
      letter-spacing: .07em;
      white-space: nowrap;
      text-transform: uppercase;
      border-right: 1px solid rgba(255,255,255,.08)
    }

    .ticker-track {
      flex: 1;
      overflow: hidden;
      position: relative
    }

    .ticker-inner {
      display: flex;
      flex-direction: column;
      animation: tickerVertical 60s linear infinite;
      will-change: transform
    }

    .ticker-inner:hover {
      animation-play-state: paused
    }

    @keyframes tickerVertical {
      0% {
        transform: translateY(0)
      }

      100% {
        transform: translateY(-50%)
      }
    }

    .ticker-item {
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 16px;
      font-size:var(--fs-sm);
      color: rgba(255, 255, 255, .88);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      cursor: pointer;
      background: transparent;
      border: none;
      width: 100%;
      text-align: left;
      font-family: 'Pretendard Variable', sans-serif
    }

    .ticker-item:hover {
      background: rgba(255, 255, 255, .06);
      color: #fff
    }

    .ticker-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      border-left: 1px solid rgba(255, 255, 255, .08)
    }

    .ticker-btn {
      height: 26px;
      padding: 0 10px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 20px;
      background: rgba(255, 255, 255, .08);
      color: #fff;
      font-size:var(--fs-xs);
      font-weight: var(--fw-medium);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif
    }

    .ticker-btn:hover {
      background: rgba(255, 255, 255, .14)
    }

    .news-detail-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15,20,30,.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1200;
      padding: 24px
    }

    .news-detail-backdrop.show {
      display: flex
    }

    .news-detail-modal {
      width: min(760px, 100%);
      max-height: 80vh;
      overflow: auto;
      background: #fff;
      border-radius: 18px;
      border: 0.5px solid rgba(0,0,0,.08);
      box-shadow: 0 20px 60px rgba(15, 23, 42, .28)
    }

    .news-detail-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 22px 14px;
      border-bottom: 0.5px solid rgba(0,0,0,.08)
    }

    .news-detail-title {
      font-size:var(--fs-xl);
      font-weight: var(--fw-bold);
      color: var(--txt);
      line-height: var(--lh-base)
    }

    .news-detail-close {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 0.5px solid rgba(0,0,0,.08);
      background: #fff;
      color: var(--txtm);
      cursor: pointer;
      font-size:var(--fs-xl)
    }

    .news-detail-close:hover {
      color: var(--txt);
      border-color: var(--g300)
    }

    .news-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 22px 14px;
      font-size:var(--fs-sm);
      color: var(--txts)
    }

    .news-detail-chip {
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08)
    }

    .news-detail-body {
      padding: 0 22px 22px
    }

    .news-detail-desc {
      font-size:var(--fs-md);
      line-height: var(--lh-loose);
      color: var(--txt);
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08);
      padding: 16px;
      border-radius: 12px;
      white-space: pre-wrap
    }

    .news-detail-foot {
      display: flex;
      justify-content: flex-end;
      padding: 0 22px 22px
    }

    .news-empty {
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 16px;
      font-size:var(--fs-sm);
      color: rgba(255, 255, 255, .72)
    }

    .news-config-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15,20,30,.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1200;
      padding: 24px
    }

    .news-config-backdrop.show {
      display: flex
    }

    .news-config-modal {
      width: min(520px, 100%);
      background: #fff;
      border-radius: 18px;
      border: 0.5px solid rgba(0,0,0,.08);
      box-shadow: 0 20px 60px rgba(15, 23, 42, .28)
    }

    .news-config-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px 12px;
      border-bottom: 0.5px solid rgba(0,0,0,.08)
    }

    .news-config-body {
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .news-config-body label {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--txts)
    }

    .news-config-body input,
    .news-config-body textarea {
      width: 100%;
      padding: 10px 12px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 10px;
      font-size:var(--fs-base);
      font-family: 'Pretendard Variable', sans-serif
    }

    .news-config-help {
      font-size:var(--fs-sm);
      line-height: var(--lh-base);
      color: var(--txts);
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08);
      padding: 12px 14px;
      border-radius: 12px
    }

    .news-config-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 0 20px 20px
    }

    .news-status-note {
      display: none;
      padding: 10px 16px;
      background: var(--amber-l);
      border-bottom: 1px solid #f5d77d;
      font-size:var(--fs-sm);
      color: #7c5000
    }

    .news-status-note.show {
      display: block
    }

    /* ════════════ LAYOUT ════════════ */
    .wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px 24px;
      display: grid;
      grid-template-columns: 1fr 272px;
      gap: 18px
    }

    .main-col {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .side-col {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .page {
      display: none
    }

    .page.on {
      display: contents
    }

    /* ════════════ CARD ════════════ */
    .card {
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: var(--r14);
      overflow: visible;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04)
    }

    .card-head {
      padding: 14px 18px;
      border-bottom: 0.5px solid rgba(0,0,0,.07);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px
    }

    .card-title {
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txt);
      display: flex;
      align-items: center;
      gap: 7px;
      letter-spacing: -.01em
    }

    .card-body {
      padding: 16px 18px
    }

    .edit-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px;
      border: 0.5px solid rgba(0,0,0,.12);
      border-radius: 7px;
      font-size:var(--fs-xs);
      color: var(--txts);
      background: var(--white);
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s;
      font-family: 'Pretendard Variable', sans-serif;
      flex-shrink: 0;
      box-shadow: 0 1px 2px rgba(0,0,0,.04)
    }

    .edit-btn:hover {
      border-color: var(--amber);
      color: var(--amber);
      background: var(--amber-l);
      box-shadow: 0 1px 4px rgba(232,160,32,.15)
    }

    .edit-btn:disabled {
      opacity: .4;
      cursor: not-allowed;
      box-shadow: none
    }

    /* ════════════ STAT CARDS ════════════ */
    .stat-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px
    }

    .stat {
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: var(--r12);
      padding: 14px 16px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04)
    }

    .stat::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--g400)
    }

    .stat.red::before {
      background: var(--red-m)
    }

    .stat.amber::before {
      background: var(--amber)
    }

    .stat.blue::before {
      background: #2196f3
    }

    .stat-lbl {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-bottom: 8px
    }

    .stat-val {
      font-family: 'DM Mono', monospace;
      font-size:var(--fs-3xl);
      font-weight: var(--fw-medium);
      color: var(--txt);
      line-height: var(--lh-1)
    }

    .stat-val small {
      font-size:var(--fs-sm);
      margin-left: 2px;
      color: var(--txts)
    }

    .stat-sub {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-top: 5px
    }

    /* ════════════ NOTICE ════════════ */
    .notice-list {
      display: flex;
      flex-direction: column
    }

    .notice-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 11px 0;
      border-bottom: 0.5px solid rgba(0,0,0,.08)
    }

    .notice-item:last-child {
      border-bottom: none
    }

    .norg {
      flex-shrink: 0;
      padding: 3px 9px;
      border-radius: 4px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-medium);
      white-space: nowrap
    }

    .norg-a {
      background: var(--g50);
      color: var(--g600)
    }

    .norg-l {
      background: #e8f0fe;
      color: #1a56a4
    }

    .norg-s {
      background: var(--amber-l);
      color: #7c5000
    }

    .norg-r {
      background: #fce8e8;
      color: #a00
    }

    .ntxt {
      font-size:var(--fs-md);
      color: var(--txt);
      flex: 1
    }

    .del-btn {
      flex-shrink: 0;
      background: none;
      border: none;
      color: var(--txtm);
      cursor: pointer;
      font-size:var(--fs-md);
      padding: 0 2px;
      line-height: var(--lh-1);
      transition: color .15s
    }

    .del-btn:hover {
      color: var(--red-m)
    }

    /* ════════════ ISSUE ════════════ */
    .issue-list {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .issue {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 11px 13px;
      border-radius: 9px;
      border: 0.5px solid rgba(0,0,0,.08)
    }

    .issue.emer {
      background: var(--red-l);
      border-color: rgba(198,40,40,.2);
      border-left: 3px solid var(--red-m)
    }

    .issue.warn {
      background: var(--yellow-l);
      border-color: rgba(245,158,11,.25);
      border-left: 3px solid var(--yellow)
    }

    .issue.info {
      background: var(--blue-l);
      border-color: rgba(21,101,192,.18);
      border-left: 3px solid var(--blue)
    }

    .issue-badge {
      flex-shrink: 0;
      padding: 2px 7px;
      border-radius: 4px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      margin-top: 1px
    }

    .ib-emer {
      background: var(--red-l);
      color: var(--red);
      border: 0.5px solid rgba(198,40,40,.2)
    }

    .ib-warn {
      background: var(--amber-l);
      color: #92400e;
      border: 0.5px solid rgba(232,160,32,.25)
    }

    .ib-info {
      background: var(--blue-l);
      color: var(--blue);
      border: 0.5px solid rgba(21,101,192,.2)
    }

    .issue-txt {
      font-size:var(--fs-md);
      color: var(--txt);
      line-height: var(--lh-base);
      flex: 1
    }

    /* ════════════ AREA ════════════ */
    .area-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px
    }

    .area-card {
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: var(--r14);
      overflow: hidden;
      transition: all .2s;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04)
    }

    .area-card:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 12px 30px rgba(0,0,0,.07);
      transform: translateY(-2px)
    }

    .area-head {
      padding: 12px 14px;
      border-bottom: 0.5px solid rgba(0,0,0,.07);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .area-name {
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txt)
    }

    .area-badge {
      padding: 2px 8px;
      border-radius: 20px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold)
    }

    .ab-emer {
      background: var(--red-l);
      color: var(--red)
    }

    .ab-warn {
      background: var(--yellow-l);
      color: #92400e
    }

    .area-body {
      padding: 12px 14px
    }

    .area-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 6px 0;
      border-bottom: 0.5px solid rgba(0,0,0,.05);
      font-size:var(--fs-md);
      gap: 8px
    }

    .area-row:last-child {
      border-bottom: none
    }

    .ar-lbl {
      color: var(--txtm);
      flex-shrink: 0;
      max-width: 80px
    }

    .ar-val {
      color: var(--txt);
      font-weight: var(--fw-medium);
      text-align: right;
      line-height: var(--lh-base)
    }

    .area-issue {
      margin-top: 10px;
      padding: 8px 10px;
      border-radius: 7px;
      font-size:var(--fs-md);
      color: var(--txts);
      line-height: var(--lh-base);
      border-left: 3px solid var(--g400);
      background: var(--content-bg)
    }

    .area-issue.red-line {
      border-left-color: var(--red-m);
      background: var(--red-l)
    }

    .area-issue.amber-line {
      border-left-color: var(--amber);
      background: var(--amber-l)
    }

    /* ════════════ 제출현황 ════════════ */
    .submit-progress {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px
    }

    .progress-bar {
      flex: 1;
      height: 6px;
      background: var(--s100);
      border-radius: 3px;
      overflow: hidden
    }

    .progress-fill {
      height: 100%;
      background: var(--g600);
      border-radius: 3px
    }

    .progress-txt {
      font-family: 'DM Mono', monospace;
      font-size:var(--fs-base);
      font-weight: var(--fw-medium);
      color: var(--g600);
      flex-shrink: 0
    }

    .org-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px
    }

    .org-item {
      padding: 8px 10px;
      border-radius: 7px;
      border: 0.5px solid rgba(0,0,0,.08);
      font-size:var(--fs-md);
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .org-item.done {
      background: var(--g50);
      border-color: var(--g100)
    }

    .org-item.todo {
      background: var(--red-l);
      border-color: #fbbaba
    }

    .org-name-cell {
      color: var(--txts)
    }

    .org-done {
      color: var(--g600);
      font-weight: var(--fw-bold)
    }

    .org-todo {
      color: var(--red-m);
      font-weight: var(--fw-bold)
    }

    /* ════════════ 사이드바 ════════════ */
    .sb-card {
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: var(--r14);
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04)
    }

    .sb-head {
      padding: 12px 16px;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txt);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .sb-body {
      padding: 12px 16px
    }

    /* live chat */
    .lc-msg {
      display: flex;
      flex-direction: column;
      gap: 2px;
      animation: lcFadeIn .2s ease
    }

    @keyframes lcFadeIn {
      from {
        opacity: 0;
        transform: translateY(4px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .lc-msg-me {
      align-items: flex-end
    }

    .lc-bubble {
      max-width: 85%;
      padding: 7px 10px;
      border-radius: 12px;
      font-size:var(--fs-base);
      line-height: var(--lh-base);
      word-break: break-word;
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      color: var(--txt)
    }

    .lc-msg-me .lc-bubble {
      background: var(--g600);
      color: #fff;
      border-color: transparent
    }

    .lc-meta {
      font-size:var(--fs-xs);
      color: var(--txtm);
      padding: 0 4px
    }

    #lcText:focus {
      border-color: var(--g400);
      box-shadow: 0 0 0 2px rgba(76, 175, 80, .12)
    }

    .site-list {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .site-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--content-bg);
      border: 1px solid transparent;
      text-decoration: none;
      color: var(--txt);
      transition: all .15s
    }

    .site-item:hover {
      background: var(--g50);
      border-color: var(--g200)
    }

    .site-ico {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: var(--g50);
      border: 1px solid var(--g200);
      color: var(--g700) !important;
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .site-name {
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium)
    }

    .site-url {
      font-size:var(--fs-xs);
      color: var(--txtm);
      display: block
    }

    .limit-list {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .limit-item {
      padding: 10px 12px;
      border-radius: 8px;
      background: var(--red-l);
      border: 1px solid #fbbaba
    }

    .li-name {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--red);
      margin-bottom: 4px
    }

    .li-row {
      display: flex;
      justify-content: space-between;
      font-size:var(--fs-xs)
    }

    .li-lbl {
      color: var(--txtm)
    }

    .li-val {
      color: var(--txt);
      font-weight: var(--fw-medium)
    }

    .alert-list {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .alert-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 11px;
      border-radius: 8px;
      border: 0.5px solid rgba(0,0,0,.08)
    }

    .alert-item.danger {
      background: var(--red-l);
      border-color: #fbbaba
    }

    .alert-item.warn {
      background: var(--yellow-l);
      border-color: #fde68a
    }

    .ai-name {
      font-size:var(--fs-md);
      font-weight: var(--fw-medium);
      flex: 1
    }

    .ai-badge {
      font-size:var(--fs-xs);
      padding: 1px 6px;
      border-radius: 4px;
      font-weight: var(--fw-bold)
    }

    .ai-b-danger {
      background: var(--red-m);
      color: #fff
    }

    .ai-b-warn {
      background: var(--yellow);
      color: #fff
    }

    .ai-chg {
      font-family: 'DM Mono', monospace;
      font-size:var(--fs-md);
      font-weight: var(--fw-medium)
    }

    .ai-week {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    /* ════════════ 관리자 페이지 ════════════ */
    .admin-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 24px
    }

    .admin-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px
    }

    .admin-stat {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: var(--r12);
      padding: 16px
    }

    .admin-stat-label {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-bottom: 6px
    }

    .admin-stat-val {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      font-family: 'DM Mono', monospace
    }

    .member-table {
      width: 100%;
      border-collapse: collapse;
      font-size:var(--fs-sm)
    }

    .member-table th {
      font-size:var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--txtm);
      text-align: left;
      padding: 8px 12px;
      border-bottom: 1.5px solid var(--bdr)
    }

    .member-table td {
      padding: 10px 12px;
      border-bottom: 0.5px solid rgba(0,0,0,.05)
    }

    .member-table tr:hover td {
      background: var(--content-bg)
    }

    .member-table tr:last-child td {
      border-bottom: none
    }

    /* ════════════ 입력 패널 ════════════ */
    .panel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      z-index: 500;
      opacity: 0;
      pointer-events: none !important;
      visibility: hidden;
      transition: opacity .25s
    }

    .panel-overlay.on {
      opacity: 1;
      pointer-events: all !important;
      visibility: visible;
    }

    .panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 480px;
      background: var(--white);
      z-index: 501;
      transform: translateX(100%);
      transition: transform .28s cubic-bezier(.4, 0, .2, 1);
      overflow-y: auto;
      box-shadow: -8px 0 32px rgba(0, 0, 0, .12)
    }

    .panel.on {
      transform: translateX(0)
    }

    .panel-header {
      padding: 20px 24px;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      background: var(--white);
      z-index: 1
    }

    .panel-title {
      font-size:var(--fs-md);
      font-weight: var(--fw-bold)
    }

    .panel-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 0.5px solid rgba(0,0,0,.08);
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size:var(--fs-xl);
      color: var(--txts);
      transition: all .15s;
      line-height: var(--lh-1)
    }

    .panel-close:hover {
      background: var(--s100)
    }

    .panel-body {
      padding: 24px
    }

    /* 내 조직 뱃지 (조직 선택 대신) */
    .my-org-display {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: var(--g50);
      border: 1.5px solid var(--g200);
      border-radius: 10px;
      margin-bottom: 16px
    }

    .my-org-icon {
      font-size:var(--fs-xl)
    }

    .my-org-info strong {
      display: block;
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--g800)
    }

    .my-org-info span {
      font-size:var(--fs-xs);
      color: var(--txts)
    }

    .my-org-lock {
      margin-left: auto;
      font-size:var(--fs-xs);
      color: var(--txtm);
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0
    }

    .panel-section {
      margin-bottom: 24px
    }

    .panel-section-title {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--g600);
      letter-spacing: .06em;
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 2px solid var(--g100)
    }

    .form-group {
      margin-bottom: 14px
    }

    .form-label {
      display: block;
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txts);
      margin-bottom: 5px
    }

    .req {
      color: var(--red-m);
      margin-left: 2px
    }

    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      padding: 9px 12px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 8px;
      font-size:var(--fs-base);
      font-family: 'Pretendard Variable', sans-serif;
      color: var(--txt);
      background: var(--white);
      transition: border-color .15s
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      outline: none;
      border-color: var(--g400);
      box-shadow: 0 0 0 3px rgba(76, 175, 80, .1)
    }

    .form-textarea {
      min-height: 80px;
      resize: vertical;
      line-height: var(--lh-base)
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .form-hint {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-top: 4px
    }

    /* ── 생산안정기금 ── */
    .dr-photo-cell {
      border: 1.5px dashed var(--bdr);
      border-radius: 12px;
      padding: 10px;
      cursor: pointer;
      transition: border-color .15s;
      background: var(--g50)
    }

    .dr-photo-cell:hover {
      border-color: var(--g400);
      background: var(--g100)
    }

    .dr-photo-placeholder {
      min-height: 110px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size:var(--fs-2xl);
      color: var(--txts);
      text-align: center;
      gap: 4px
    }

    .dr-photo-placeholder span {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    .dr-photo-cell img {
      width: 100%;
      height: 110px;
      object-fit: cover;
      border-radius: 8px;
      display: block
    }

    .dr-crop-row {
      display: grid;
      grid-template-columns: 1fr 120px 28px;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px
    }

    .dr-list-btn {
      padding: 3px 10px;
      font-size:var(--fs-xs);
      border: 0.5px solid rgba(0,0,0,.12);
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      white-space: nowrap
    }

    .dr-list-btn:hover {
      background: var(--g50)
    }

    .radio-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .radio-item {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 20px;
      cursor: pointer;
      font-size:var(--fs-sm);
      transition: all .15s
    }

    .radio-item:hover {
      border-color: var(--g400);
      color: var(--g600)
    }

    .radio-item input {
      accent-color: var(--g600)
    }

    .panel-actions {
      display: flex;
      gap: 8px;
      padding: 16px 24px;
      border-top: 0.5px solid rgba(0,0,0,.08);
      position: sticky;
      bottom: 0;
      background: var(--white)
    }

    .btn-submit {
      width: 100%;
      padding: 14px 16px;
      border: none;
      border-radius: 12px;
      background: var(--g800);
      color: #fff;
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: all .18s;
      box-shadow: 0 4px 12px rgba(27,94,32,.2), inset 0 1px 0 rgba(255,255,255,.12)
    }

    .btn-submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(27,94,32,.28);
      background: var(--g700)
    }

    .btn-submit:active {
      transform: translateY(0);
      box-shadow: 0 2px 6px rgba(27,94,32,.2)
    }

    .btn-cancel {
      padding: 12px 18px;
      border: 0.5px solid rgba(0,0,0,.12);
      border-radius: 12px;
      background: var(--white);
      font-size:var(--fs-base);
      font-weight: var(--fw-medium);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      color: var(--txts);
      transition: all .15s
    }

    .btn-cancel:hover {
      background: var(--content-bg);
      border-color: rgba(0,0,0,.18);
      color: var(--txt)
    }

    /* 권한 없음 배너 */
    .no-permission {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: var(--red-l);
      border: 0.5px solid rgba(198,40,40,.2);
      border-left: 3px solid var(--red);
      border-radius: 10px;
      margin-bottom: 16px;
      font-size:var(--fs-sm);
      color: var(--red)
    }

    /* 토스트 */
    .toast {
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: var(--g800);
      color: #fff;
      padding: 12px 20px;
      border-radius: 12px;
      font-size:var(--fs-base);
      font-weight: var(--fw-medium);
      z-index: 1000;
      opacity: 0;
      transition: all .3s;
      white-space: nowrap;
      box-shadow: var(--shm)
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    .spinner {
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255, 255, 255, .3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .7s linear infinite;
      vertical-align: middle
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .tbl {
      width: 100%;
      border-collapse: collapse;
      font-size:var(--fs-sm)
    }

    .tbl th {
      font-size:var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--txtm);
      text-align: left;
      padding: 7px 10px 9px;
      border-bottom: 1.5px solid var(--bdr);
      letter-spacing: .03em;
      white-space: nowrap
    }

    .tbl td {
      padding: 9px 10px;
      border-bottom: 0.5px solid rgba(0,0,0,.05);
      color: var(--txt)
    }

    .tbl tr:last-child td {
      border-bottom: none
    }

    .tbl tr:hover td {
      background: var(--content-bg)
    }

    .mono {
      font-family: 'DM Mono', monospace;
      font-weight: var(--fw-medium)
    }

    .price-up {
      color: var(--red)
    }

    .price-dn {
      color: var(--blue)
    }

    .status-badge {
      padding: 2px 7px;
      border-radius: 4px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-medium);
      white-space: nowrap
    }

    .s-danger {
      background: var(--red-l);
      color: var(--red)
    }

    .s-warn {
      background: var(--yellow-l);
      color: #92400e
    }

    .s-ok {
      background: var(--g50);
      color: var(--g600)
    }

    .s-blue {
      background: var(--blue-l);
      color: var(--blue)
    }

    .s-gray {
      background: var(--s100);
      color: var(--txts)
    }

    .s-purple {
      background: var(--purple-l);
      color: var(--purple)
    }

    .excel-btn {
      padding: 5px 10px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 5px;
      font-size:var(--fs-xs);
      color: var(--txts);
      background: var(--white);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif
    }

    .excel-btn:hover {
      border-color: var(--g400);
      color: var(--g600)
    }

    .tbl-wrap {
      overflow-x: auto
    }

    .ai-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 0.5px solid rgba(0,0,0,.09);
      box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 600px;
    }

    .ai-header {
      padding: 15px 20px;
      background: var(--g50);
      border-bottom: 1px solid #e0e4e0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .ai-body {
      flex: 1;
      display: flex;
      overflow: hidden;
    }



    #ai-messages {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 15px;
    }

    .msg {
      max-width: 85%;
      padding: 10px 14px;
      border-radius: 12px;
      line-height: var(--lh-base);
      font-size:var(--fs-md);
    }

    .msg.user {
      align-self: flex-end;
      background: var(--g600);
      color: #fff;
    }

    .msg.ai {
      align-self: flex-start;
      background: #eee;
      color: #333;
    }




    .api-key-input {
      font-size:var(--fs-sm);
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid #ddd;
      width: 150px;
    }

    /* Integrated AI assistant styles */

    .ai-card {
      height: 640px
    }


    .ai-status-pill {
      font-size:var(--fs-sm);
      color: var(--txts)
    }

    .ai-doc-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 10px;
      flex-wrap: wrap
    }

    .ai-file-list {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 180px;
      overflow: auto
    }

    .ai-file-item {
      padding: 8px 10px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 8px;
      background: var(--white);
      font-size:var(--fs-sm);
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center
    }

    .ai-file-meta {
      color: var(--txtm);
      font-size:var(--fs-xs)
    }

    .ai-small-btn {
      padding: 6px 10px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 8px;
      background: var(--white);
      cursor: pointer;
      font-size:var(--fs-sm);
      font-family: 'Pretendard Variable', sans-serif
    }

    .ai-small-btn:hover {
      border-color: var(--g400);
      color: var(--g600)
    }

    @media (max-width: 980px) {
      .ai-body {
        flex-direction: column
      }


      .ai-card {
        height: auto
      }
    }











    @media (max-width: 1100px) {


    }

    @media (max-width: 760px) {
    }

    @media (max-width: 520px) {
    }

    /* ════════════ 소탭 (Sub-tabs) ════════════ */
    .sub-tabs {
      display: flex;
      gap: 6px;
      align-items: center;
      padding: 12px 0 0 0;
      flex-wrap: wrap
    }

    .sub-tab {
      padding: 6px 16px;
      border: 0.5px solid rgba(0,0,0,.14);
      border-radius: 20px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txts);
      background: var(--white);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: all .15s;
      white-space: nowrap
    }

    .sub-tab:hover {
      border-color: var(--g400);
      color: var(--g600);
      background: var(--g50)
    }

    .sub-tab.on {
      background: var(--g600);
      border-color: var(--g600);
      color: #fff
    }

    .sub-panel {
      display: none;
      flex-direction: column;
      gap: 16px
    }

    .sub-panel.on {
      display: flex
    }

    .return-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 14px
    }

    .return-stat {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      padding: 12px 14px
    }

    .return-stat-label {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-bottom: 6px
    }

    .return-stat-value {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: var(--txt);
      line-height: var(--lh-tight)
    }

    .return-filter-bar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      padding: 10px 12px;
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      margin-bottom: 12px
    }

    .return-filter-bar select,
    .return-filter-bar input {
      padding: 7px 10px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 8px;
      font-size:var(--fs-sm);
      font-family: 'Pretendard Variable', sans-serif
    }

    .return-summary-note {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    @media (max-width: 900px) {
      .return-summary-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .news-list-toggle-btn {
      height: 32px;
      padding: 0 12px;
      border: 1px solid rgba(255, 255, 255, .25);
      background: rgba(255, 255, 255, .1);
      color: #fff;
      border-radius: 8px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      flex-shrink: 0;
      margin-right: 10px;
      transition: background .15s;
      white-space: nowrap
    }

    .news-list-toggle-btn:hover {
      background: rgba(255, 255, 255, .2)
    }

    .news-list-toggle-btn.open {
      background: rgba(255, 255, 255, .18);
      border-color: rgba(255, 255, 255, .4)
    }

    .news-list-panel {
      display: none;
      background: var(--g900);
      border-top: 1px solid rgba(255, 255, 255, .1);
      max-height: 380px;
      overflow-y: auto
    }

    .news-list-panel.open {
      display: block
    }

    .news-list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px 8px;
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .news-list-header-title {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: rgba(255, 255, 255, .6);
      letter-spacing: .06em
    }

    .news-list-close-btn {
      background: none;
      border: 1px solid rgba(255, 255, 255, .2);
      color: rgba(255, 255, 255, .6);
      border-radius: 6px;
      padding: 3px 10px;
      font-size:var(--fs-xs);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif
    }

    .news-list-close-btn:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, .4)
    }

    .news-list-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      font-size:var(--fs-md);
      color: rgba(255, 255, 255, .88);
      text-decoration: none;
      cursor: pointer;
      transition: background .12s;
      width: 100%;
      background: transparent;
      border-left: none;
      border-right: none;
      border-top: none;
      text-align: left;
      font-family: 'Pretendard Variable', sans-serif
    }

    .news-list-item:hover {
      background: rgba(255, 255, 255, .07);
      color: #fff
    }

    .news-list-item:last-child {
      border-bottom: none
    }

    .p7-news-item {
      display: block;
      padding: 16px 18px;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      text-decoration: none;
      cursor: pointer;
      transition: background .16s, transform .16s, box-shadow .16s
    }

    .p7-news-item:last-child {
      border-bottom: none
    }

    .p7-news-item:hover {
      background: var(--g50);
      box-shadow: inset 0 0 0 1px rgba(76, 175, 80, .10)
    }

    /* 주요뉴스 행 구조 (데스크탑: 번호/본문/날짜 3컬럼) */
    .p7-news-row {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) 96px;
      gap: 14px;
      align-items: start;
      padding: 2px 0;
    }
    .p7-news-num {
      color: var(--g400); font-weight: var(--fw-bold); font-size:var(--fs-sm);
      line-height: var(--lh-base); min-width: 22px;
      font-family: 'DM Mono', monospace;
      padding-top: 2px;
    }
    .p7-news-body { min-width: 0; }
    .p7-news-title {
      font-size:var(--fs-md); font-weight: var(--fw-bold); color: var(--txt);
      line-height: var(--lh-base);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .p7-news-desc {
      font-size:var(--fs-sm); color: #6b7280; line-height: var(--lh-base);
      overflow: hidden;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      margin-top: 5px; word-break: break-word;
    }
    .p7-news-date {
      text-align: right; white-space: nowrap;
      font-size:var(--fs-xs); line-height: var(--lh-base); color: var(--g600);
      font-family: 'DM Mono', monospace;
      padding-top: 2px;
    }
    /* 모바일: 번호+날짜를 상단 메타로, 제목 2줄 허용, 요약 3줄 */
    @media (max-width: 720px) {
      .p7-news-item { padding: 13px 14px !important; }
      .p7-news-row {
        display: block !important;
        padding: 0;
      }
      .p7-news-num {
        display: inline-block; padding: 0;
        font-size:var(--fs-xs); color: var(--g600); font-weight: var(--fw-bold);
        margin-right: 8px; vertical-align: middle;
      }
      .p7-news-date {
        display: inline; text-align: left; font-size:var(--fs-xs);
        color: var(--txts); padding: 0; vertical-align: middle;
      }
      .p7-news-num::after {
        content: '·'; color: var(--txts); font-weight: var(--fw-regular);
        margin: 0 6px; vertical-align: middle;
      }
      .p7-news-body { margin-top: 6px; }
      .p7-news-title {
        white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        font-size:var(--fs-md); line-height: var(--lh-base);
      }
      .p7-news-desc {
        -webkit-line-clamp: 3;
      }
      /* 주요뉴스 필터 바 — 모바일 stack */
      #p7NewsInput, #p7NewsDays, #p7NewsRefresh { width: 100%; box-sizing: border-box; }
      #p7NewsDays, #p7NewsRefresh { min-width: 0; }
    }

    .news-list-num {
      color: var(--g400);
      font-weight: var(--fw-bold);
      font-family: 'DM Mono', monospace;
      font-size:var(--fs-sm);
      flex-shrink: 0;
      margin-top: 2px;
      min-width: 22px
    }

    .news-list-date {
      color: rgba(255, 255, 255, .38);
      font-size:var(--fs-xs);
      flex-shrink: 0;
      font-family: 'DM Mono', monospace;
      margin-top: 3px;
      white-space: nowrap
    }

    .ticker {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 24px;
      overflow: hidden;
      min-height: 48px;
      display: flex;
      align-items: center;
      background: var(--g900)
    }

    .ticker-label {
      flex-shrink: 0;
      background: var(--g600);
      color: #fff;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      padding: 0 14px;
      height: 48px;
      display: flex;
      align-items: center;
      letter-spacing: .04em;
      white-space: nowrap;
      margin-left: 0
    }

    .ticker-inline-tools {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 10px;
      border-right: 1px solid rgba(255, 255, 255, .08);
      flex-shrink: 0
    }

    .ticker-inline-tools input,
    .ticker-inline-tools select {
      height: 32px;
      padding: 0 10px;
      border: 1px solid #cfe3d1;
      border-radius: 8px;
      font-size:var(--fs-base);
      font-family: 'Pretendard Variable', sans-serif
    }

    .ticker-inline-tools input {
      width: 180px
    }

    .ticker-inline-tools button {
      height: 32px;
      padding: 0 12px;
      border: 1px solid var(--g600);
      background: var(--g600);
      color: #fff;
      border-radius: 8px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif
    }

    .ticker-inline-tools button.secondary {
      background: #fff;
      color: var(--g600)
    }

    .ticker-track {
      flex: 1;
      overflow: hidden;
      position: relative;
      height: 48px
    }

    .ticker-inner {
      display: flex;
      flex-direction: column;
      animation: tickerVertical 60s linear infinite;
      will-change: transform
    }

    .ticker-item {
      display: flex;
      align-items: center;
      height: 48px;
      padding: 0 16px;
      font-size:var(--fs-md);
      color: rgba(255, 255, 255, .88);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      cursor: pointer;
      background: transparent;
      border: none;
      width: 100%;
      text-align: left;
      font-family: 'Pretendard Variable', sans-serif
    }

    .news-meta-note {
      display: none
    }

    /* ════════════ 조직도 ════════════ */
    .org-page-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px
    }

    .org-section-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .org-sec-tab {
      padding: 8px 20px;
      border: 0.5px solid rgba(0,0,0,.1);
      border-radius: 24px;
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txts);
      background: var(--white);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: all .18s
    }

    .org-sec-tab:hover {
      border-color: var(--g400);
      color: var(--g600)
    }

    .org-sec-tab.nong-on {
      background: var(--g400);
      border-color: var(--g400);
      color: #fff
    }

    .org-sec-tab.saeng-on {
      background: #2196f3;
      border-color: #2196f3;
      color: #fff
    }

    .org-sec-tab.jiyok-on {
      background: #ff9800;
      border-color: #ff9800;
      color: #fff
    }

    .org-sec-tab.all-on {
      background: var(--g600);
      border-color: var(--g600);
      color: #fff
    }

    .org-section-panel {
      display: none;
      flex-direction: column;
      gap: 16px
    }

    .org-section-panel.on {
      display: flex
    }

    .org-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-radius: 12px 12px 0 0;
      color: #fff;
      font-weight: var(--fw-bold);
      font-size:var(--fs-md);
      letter-spacing: -.01em;
      box-shadow: inset 0 -1px 0 rgba(0,0,0,.1)
    }

    .org-section-header.nong-hd {
      background: linear-gradient(135deg, var(--g500), #66bb6a)
    }

    .org-section-header.saeng-hd {
      background: linear-gradient(135deg, var(--blue), #42a5f5)
    }

    .org-section-header.jiyok-hd {
      background: linear-gradient(135deg, var(--amber), #ffa726)
    }

    .org-card-wrap {
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-top: none;
      border-radius: 0 0 12px 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,.05)
    }

    .org-table {
      width: 100%;
      border-collapse: collapse;
      font-size:var(--fs-md)
    }

    .org-table thead tr {
      background: #f7f6f4
    }

    .org-table th {
      padding: 10px 14px;
      border-bottom: 0.5px solid rgba(0,0,0,.09);
      border-right: 0.5px solid rgba(0,0,0,.06);
      font-weight: var(--fw-bold);
      color: var(--txts);
      font-size:var(--fs-sm);
      text-align: center;
      white-space: nowrap;
      letter-spacing: .01em
    }

    .org-table th:last-child {
      border-right: none
    }

    .org-table td {
      padding: 8px 10px;
      border-bottom: 0.5px solid rgba(0,0,0,.06);
      border-right: 0.5px solid rgba(0,0,0,.04);
      vertical-align: middle
    }

    .org-table td:last-child {
      border-right: none
    }

    .org-table tr:last-child td {
      border-bottom: none
    }

    .org-table tr:hover td {
      background: #f5fbf4
    }

    .org-td-input {
      width: 100%;
      border: none;
      outline: none;
      font-size:var(--fs-base);
      font-family: 'Pretendard Variable', sans-serif;
      background: transparent;
      padding: 3px 4px;
      color: var(--txt);
      border-radius: 5px;
      transition: background .15s
    }

    .org-td-input:focus {
      background: var(--g50);
      outline: 2px solid var(--g200)
    }

    .org-td-input.bigo {
      color: var(--txts);
      font-size:var(--fs-sm)
    }

    .org-add-row-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 10px;
      border: none;
      border-top: 1.5px dashed var(--bdr);
      background: var(--content-bg);
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txts);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: all .15s
    }

    .org-add-row-btn:hover {
      background: var(--g50);
      color: var(--g600)
    }

    .org-del-btn {
      width: 28px;
      height: 28px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 6px;
      background: var(--white);
      color: var(--txtm);
      cursor: pointer;
      font-size:var(--fs-base);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      font-family: inherit
    }

    .org-del-btn:hover {
      background: var(--red-l);
      border-color: var(--red-m);
      color: var(--red)
    }

    .org-count-badge {
      padding: 2px 9px;
      border-radius: 20px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      background: rgba(255, 255, 255, .25);
      color: #fff;
      margin-left: 8px
    }

    .org-save-bar {
      display: flex;
      gap: 10px;
      align-items: center
    }

    .org-save-btn {
      padding: 10px 24px;
      background: var(--g600);
      color: #fff;
      border: none;
      border-radius: 9px;
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: background .15s;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .org-save-btn:hover {
      background: var(--g800)
    }

    .org-reset-btn {
      padding: 9px 16px;
      border: 0.5px solid rgba(0,0,0,.14);
      border-radius: 8px;
      font-size:var(--fs-base);
      font-weight: var(--fw-medium);
      color: var(--txts);
      background: var(--white);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: all .15s
    }

    .org-reset-btn:hover {
      border-color: var(--red-m);
      color: var(--red)
    }

    .org-toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--g800);
      color: #fff;
      padding: 10px 22px;
      border-radius: 10px;
      font-size:var(--fs-base);
      font-weight: var(--fw-medium);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s
    }

    .org-toast.show {
      opacity: 1
    }

    /* 대표 인물 카드 */
    .org-leader-section {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .org-leader-section-title {
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txts);
      letter-spacing: .04em;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .org-leader-section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--bdr)
    }

    .org-leader-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px
    }

    @media(max-width:640px) {
      .org-leader-cards {
        grid-template-columns: 1fr
      }
    }

    .org-leader-card {
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
      transition: box-shadow .2s, transform .2s
    }

    .org-leader-card:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 12px 30px rgba(0,0,0,.07);
      transform: translateY(-2px)
    }

    .org-leader-card-head {
      padding: 14px 16px 12px;
      background: var(--g900);
      display: flex;
      align-items: center;
      gap: 12px
    }

    .org-leader-photo-wrap {
      position: relative;
      flex-shrink: 0
    }

    .org-leader-photo {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, .3);
      background: rgba(255, 255, 255, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: pointer;
      transition: opacity .2s
    }

    .org-leader-photo:hover {
      opacity: .85
    }

    .org-leader-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%
    }

    .org-leader-photo-icon {
      font-size:var(--fs-3xl);
      color: rgba(255, 255, 255, .5)
    }

    .org-leader-photo-edit {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--g400);
      border: 2px solid var(--g900);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:var(--fs-xs);
      cursor: pointer;
      color: #fff
    }

    .org-leader-photo-input {
      display: none
    }

    .org-leader-meta {
      flex: 1;
      min-width: 0
    }

    .org-leader-position {
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: rgba(255, 255, 255, .55);
      letter-spacing: .08em;
      margin-bottom: 4px
    }

    .org-leader-name-input {
      font-size:var(--fs-lg);
      font-weight: var(--fw-bold);
      color: #fff;
      background: transparent;
      border: none;
      border-bottom: 1px solid transparent;
      outline: none;
      width: 100%;
      font-family: 'Pretendard Variable', sans-serif;
      padding: 0
    }

    .org-leader-name-input::placeholder {
      color: rgba(255, 255, 255, .35);
      font-weight: var(--fw-regular)
    }

    .org-leader-name-input:focus {
      border-bottom-color: rgba(255, 255, 255, .4)
    }

    .org-leader-card-body {
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .org-leader-field {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .org-leader-field-label {
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--txtm);
      letter-spacing: .05em
    }

    .org-leader-field-input {
      font-size:var(--fs-base);
      color: var(--txt);
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 7px;
      padding: 6px 10px;
      outline: none;
      width: 100%;
      font-family: 'Pretendard Variable', sans-serif;
      transition: border-color .15s
    }

    .org-leader-field-input:focus {
      border-color: var(--g400);
      background: #fff
    }

    .org-leader-divider {
      height: 1px;
      background: var(--bdr);
      margin: 2px 0
    }

    .org-photo-uploading {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: rgba(0, 0, 0, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:var(--fs-xs);
      color: #fff;
      font-weight: var(--fw-bold)
    }

    /* 입력일시 셀 */
    .org-ts-cell {
      font-size:var(--fs-xs);
      color: var(--txtm);
      white-space: nowrap;
      text-align: center;
      font-family: 'DM Mono', monospace;
      padding: 4px 8px;
      min-width: 120px;
      vertical-align: middle
    }

    /* 생산동향 - 주간농사정보 / 월간전망 공통 정리 */
    .agri-toolbar,
    .monthly-toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      padding: 10px 12px;
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      margin-bottom: 14px;
    }

    .agri-toolbar .form-select,
    .agri-toolbar .form-input,
    .monthly-toolbar .form-select,
    .monthly-toolbar .form-input {
      background: var(--white)
    }

    .agri-toolbar-note,
    .monthly-toolbar-note {
      margin-left: auto;
      font-size:var(--fs-xs);
      color: var(--txtm);
      white-space: nowrap
    }

    .agri-main-grid,
    .monthly-main-grid {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 16px;
      align-items: start
    }

    .agri-meta-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 12px
    }

    .monthly-meta-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 12px
    }

    .agri-guide-box,
    .monthly-guide-box {
      padding: 12px 14px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 10px;
      background: var(--content-bg);
      font-size:var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-loose)
    }

    .agri-guide-title,
    .monthly-guide-title {
      font-weight: var(--fw-bold);
      color: var(--txt);
      margin-bottom: 6px
    }

    .agri-list-row,
    .monthly-list-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      padding: 12px 12px;
      border: none;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      background: transparent;
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: background .12s
    }

    .agri-list-row:hover,
    .monthly-list-row:hover {
      background: var(--g50)
    }

    .agri-list-row.on,
    .monthly-list-row.on {
      background: var(--g50)
    }

    .agri-file-main,
    .monthly-file-main {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0
    }

    .agri-file-title,
    .monthly-file-title {
      font-size:var(--fs-base);
      font-weight: var(--fw-medium);
      color: var(--txt);
      line-height: var(--lh-base);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .agri-file-meta,
    .monthly-file-meta {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    .agri-week-badge,
    .monthly-cat-badge {
      padding: 3px 8px;
      border-radius: 999px;
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08);
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--txts);
      white-space: nowrap;
      flex-shrink: 0
    }

    .monthly-side-menu {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 16px;
      overflow: hidden;
      position: sticky;
      top: 120px
    }

    .monthly-side-head {
      padding: 16px 18px;
      background: var(--g600);
      color: #fff;
      font-size:var(--fs-md);
      font-weight: var(--fw-bold)
    }

    .monthly-side-list {
      display: flex;
      flex-direction: column
    }

    .monthly-side-item {
      padding: 16px 18px;
      border: none;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txt);
      background: var(--white);
      cursor: pointer;
      transition: all .15s;
      text-align: left;
      font-family: 'Pretendard Variable', sans-serif
    }

    .monthly-side-item:last-child {
      border-bottom: none
    }

    .monthly-side-item:hover {
      background: var(--g50);
      color: var(--g600)
    }

    .monthly-side-item.on {
      background: var(--g50);
      color: var(--g600)
    }

    .monthly-empty {
      padding: 26px 16px;
      text-align: center;
      color: var(--txtm);
      font-size:var(--fs-sm)
    }

    .monthly-current-cat {
      font-size:var(--fs-sm);
      color: var(--txts);
      margin-bottom: 8px
    }

    #supabaseStatus {
      display: none !important
    }

    @media (max-width: 980px) {

      .agri-main-grid,
      .monthly-main-grid {
        grid-template-columns: 1fr
      }

      .agri-toolbar-note,
      .monthly-toolbar-note {
        width: 100%;
        margin-left: 0
      }

      .agri-meta-grid,
      .monthly-meta-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .monthly-side-menu {
        position: static
      }
    }

    /* ════════════ 생산동향 작황·출하 운영 UI ════════════ */
    .crop-guide-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 12px
    }

    .crop-guide-card {
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,.05)
    }

    .crop-guide-card strong {
      display: block;
      font-size:var(--fs-base);
      margin-bottom: 6px;
      color: var(--txt)
    }

    .crop-guide-card p {
      font-size:var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-loose)
    }

    .crop-guide-card.warn {
      background: var(--amber-l);
      border-color: #f5d77d
    }

    .crop-guide-card.good {
      background: var(--g50);
      border-color: var(--g200)
    }

    .crop-guide-card.info {
      background: var(--blue-l);
      border-color: #bfdbfe
    }

    .crop-alert {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid #f5d77d;
      background: var(--amber-l);
      border-radius: 12px
    }

    .crop-alert-left {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .crop-alert-title {
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: #7c5000
    }

    .crop-alert-desc {
      font-size:var(--fs-sm);
      color: var(--txts)
    }

    .crop-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      white-space: nowrap
    }

    .crop-pill.red {
      background: var(--red-l);
      color: var(--red)
    }

    .crop-pill.blue {
      background: var(--blue-l);
      color: var(--blue)
    }

    .crop-pill.green {
      background: var(--g50);
      color: var(--g600)
    }

    .crop-summary-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px
    }

    .crop-kpi {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      padding: 12px 14px
    }

    .crop-kpi-label {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-bottom: 4px
    }

    .crop-kpi-val {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: var(--txt);
      line-height: var(--lh-tight)
    }

    .crop-filter {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      padding: 10px 12px;
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px
    }

    .crop-filter input,
    .crop-filter select {
      padding: 8px 10px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 8px;
      font-size:var(--fs-sm);
      font-family: 'Pretendard Variable', sans-serif;
      background: #fff
    }

    .crop-filter input:focus,
    .crop-filter select:focus {
      outline: none;
      border-color: var(--g400)
    }

    .crop-empty {
      padding: 28px 16px;
      text-align: center;
      color: var(--txtm);
      font-size:var(--fs-sm);
      border: 1px dashed var(--bdr);
      border-radius: 12px;
      background: var(--content-bg)
    }

    .crop-card-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
    }

    .crop-issue-card {
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04)
    }

    .crop-issue-card.warn {
      border-top: 3px solid var(--amber);
      border-color: rgba(232,160,32,.25)
    }

    .crop-issue-card.danger {
      border-top: 3px solid var(--red-m);
      border-color: rgba(239,83,80,.25)
    }

    .crop-issue-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      background: var(--content-bg)
    }

    .crop-issue-title {
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txt);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .crop-issue-meta {
      padding: 12px 14px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 14px
    }

    .crop-meta-item {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size:var(--fs-sm);
      border-bottom: 1px dashed var(--s100);
      padding-bottom: 5px
    }

    .crop-meta-item span:first-child {
      color: var(--txtm);
      flex-shrink: 0
    }

    .crop-meta-item span:last-child {
      color: var(--txt);
      font-weight: var(--fw-medium);
      text-align: right
    }

    .crop-issue-body {
      padding: 0 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .crop-note-box {
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--content-bg);
      font-size:var(--fs-sm);
      color: var(--txt);
      line-height: var(--lh-loose)
    }

    .crop-action-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding-top: 4px
    }

    .crop-ack-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px
    }

    .crop-ack-item {
      padding: 8px 10px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 8px;
      background: #fff;
      font-size:var(--fs-xs);
      line-height: var(--lh-base);
      color: var(--txts)
    }

    .crop-ack-item strong {
      color: var(--txt)
    }

    .crop-btn {
      padding: 8px 14px;
      border-radius: 9px;
      border: none;
      background: var(--g600);
      color: #fff;
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif
    }

    .crop-btn:hover {
      background: var(--g800)
    }

    .crop-btn.ghost {
      background: #fff;
      color: var(--txts);
      border: 0.5px solid rgba(0,0,0,.08)
    }

    .crop-btn.ghost:hover {
      border-color: var(--g400);
      color: var(--g600)
    }

    .crop-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold)
    }

    .crop-badge.warn {
      background: var(--yellow-l);
      color: #7c5000
    }

    .crop-badge.danger {
      background: var(--red-l);
      color: var(--red)
    }

    .crop-badge.info {
      background: var(--blue-l);
      color: var(--blue)
    }

    .crop-badge.ok {
      background: var(--g50);
      color: var(--g600)
    }

    .crop-mini-status {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    .ship-table {
      width: 100%;
      border-collapse: collapse;
      font-size:var(--fs-base)
    }

    .ship-table th {
      padding: 10px 12px;
      background: var(--content-bg);
      border-bottom: 0.5px solid rgba(0,0,0,.1);
      font-size:var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--txts);
      text-align: left
    }

    .ship-table td {
      padding: 10px 12px;
      border-bottom: 0.5px solid rgba(0,0,0,.05);
      vertical-align: middle
    }

    .ship-table tbody tr:hover td {
      background: var(--g50)
    }

    .ship-table tbody tr:last-child td {
      border-bottom: none
    }

    .main-tab-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 6px;
      margin-left: 6px;
      border-radius: 999px;
      background: var(--red-m);
      color: #fff;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      line-height: var(--lh-1)
    }

    .crop-check-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .crop-check-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 12px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 10px;
      background: var(--content-bg);
      font-size:var(--fs-sm);
      color: var(--txts)
    }

    .crop-check-item input {
      margin-top: 2px;
      accent-color: var(--g600)
    }

    .crop-helper {
      font-size:var(--fs-xs);
      color: var(--txtm);
      line-height: var(--lh-loose)
    }

    @media (max-width: 980px) {

      .crop-guide-grid,
      .crop-summary-bar,
      .crop-card-grid,
      .crop-check-grid {
        grid-template-columns: 1fr
      }

      .crop-issue-meta {
        grid-template-columns: 1fr
      }

      .crop-filter {
        align-items: stretch
      }

      .crop-filter>* {
        width: 100%
      }
    }

    /* ════════════ MOBILE UI/UX 개선 ════════════ */
    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      overscroll-behavior: none
    }

    body {
      overflow-x: hidden;
      overscroll-behavior: none
    }

    img,
    canvas,
    iframe,
    svg {
      max-width: 100%
    }

    .main-tabs-in>div::-webkit-scrollbar,
    .sub-tabs::-webkit-scrollbar,
    .hdr-in::-webkit-scrollbar,
    .ticker-inline-tools::-webkit-scrollbar {
      height: 0
    }

    @media (max-width: 1200px) {

      .wrap {
        grid-template-columns: 1fr
      }

      .side-col,
      .wr-progress-card {
        position: static
      }

      .wr-progress-card {
        top: auto
      }

      .area-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .stat-row {
        grid-template-columns: repeat(3, 1fr)
      }

      .org-grid {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media (max-width: 980px) {
      body {
        font-size:var(--fs-md);
        line-height: var(--lh-base);
        overscroll-behavior: none
      }

      .topbar {
        display: none
      }

      header {
        position: sticky;
        top: 0;
      }

      /* hdr-in: 전체 너비를 뷰포트에 완전히 가둠 */
      .hdr-in {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: auto;
        padding: 8px 12px;
        gap: 0;
        flex-wrap: nowrap;
        align-items: center;
      }

      /* 로고: 아이콘만, 텍스트 숨김 — 공간 최소화 */
      .logo {
        flex: 0 0 auto;
        align-items: center;
        gap: 0;
        margin-right: 8px;
      }

      .logo-mark {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
      }

      /* 모바일에서 로고 텍스트 전체 숨김 — 아이콘만으로 충분 */
      .logo-text {
        display: none;
      }

      .week-badge {
        display: none
      }

      /* 시계 숨김 */
      .header-live-clock {
        display: none
      }

      /* 버튼 영역: 나머지 공간 전부, 우측 정렬 */
      .hdr-btns {
        flex: 1 1 0;
        min-width: 0;
        margin-left: 0;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: nowrap;
      }

      .site-drop-btn {
        flex-shrink: 0;
        font-size:var(--fs-xs);
        padding: 0 10px !important;
        height: 36px !important;
        box-sizing: border-box;
      }

      .ong-btn {
        flex-shrink: 0;
        font-size:var(--fs-xs);
        padding: 0 10px !important;
        height: 36px !important;
        box-sizing: border-box;
      }

      .pwa-install-btn {
        display: flex;
        flex-shrink: 0;
        font-size:var(--fs-xs);
        padding: 0 10px !important;
        height: 36px !important;
        box-sizing: border-box;
      }

      /* user-badge: 고정 너비, 이름+소속 말줄임 */
      .user-badge {
        flex-shrink: 0;
        min-width: 0;
        width: auto;
        max-width: 110px;
        padding: 0 8px 0 6px !important;
        height: 36px !important;
        box-sizing: border-box;
        gap: 6px;
      }

      .user-avatar {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        font-size:var(--fs-xs);
      }

      .user-info {
        min-width: 0;
        flex: 1;
      }

      .user-name {
        font-size:var(--fs-xs);
        line-height: var(--lh-tight);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }

      .user-org {
        font-size:var(--fs-xs);
        line-height: var(--lh-tight);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }

      .main-tabs {
        top: auto
      }

      .main-tabs-in {
        padding: 8px 12px
      }

      .main-tabs-in>div {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px;
        border-radius: 14px;
      }

      .main-tab {
        height: 40px;
        padding: 0 14px;
        font-size:var(--fs-base);
        flex: 0 0 auto;
        transform: none !important;
      }

      .ticker {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 12px;
        min-height: auto;
        height: auto;
        flex-wrap: wrap;
        gap: 8px;
        align-items: stretch;
      }

      .ticker-label {
        height: 34px;
        border-radius: 999px;
        padding: 0 12px;
        font-size:var(--fs-xs);
      }

      .ticker-inline-tools {
        order: 3;
        width: 100%;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding: 10px 0 0 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .ticker-inline-tools input {
        width: 140px
      }

      .ticker-inline-tools input,
      .ticker-inline-tools select,
      .ticker-inline-tools button {
        flex: 0 0 auto
      }

      .ticker-track {
        width: 100%;
        height: 42px
      }

      .ticker-item {
        height: 42px;
        font-size:var(--fs-base);
        padding: 0 10px
      }

      .news-list-toggle-btn {
        margin-right: 0;
        height: 34px
      }

      .wrap,
      .admin-wrap,
      .org-page-wrap {
        padding: 16px
      }

      .card-head,
      .card-body,
      .sb-head,
      .sb-body {
        padding-left: 14px;
        padding-right: 14px
      }

      .card-head {
        align-items: flex-start;
        flex-wrap: wrap
      }

      .card-title {
        font-size:var(--fs-md)
      }

      .stat-row,
      .crop-summary-bar,
      .return-summary-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .area-grid,
      .org-grid,
      .crop-card-grid,
      .wr-field-row {
        grid-template-columns: 1fr
      }

      .submit-progress {
        align-items: flex-start;
        flex-direction: column
      }

      .panel {
        width: min(100%, 560px)
      }

      .panel-header,
      .panel-body,
      .panel-actions {
        padding-left: 16px;
        padding-right: 16px
      }

      .panel-actions {
        gap: 10px
      }

      .btn-submit,
      .btn-cancel {
        min-height: 44px
      }

      .wr-doc-header,
      .wr-sec-head,
      .wr-sec-body {
        padding-left: 16px;
        padding-right: 16px
      }

      .wr-action-bar {
        padding: 12px;
        gap: 8px;
        flex-wrap: wrap;
      }

      .wr-btn-primary {
        margin-left: 0;
        width: 100%;
        justify-content: center
      }

      .wr-btn-ghost,
      .wr-btn-ai,
      .wr-btn-load {
        flex: 1;
        justify-content: center
      }

      .wr-progress-card {
        display: none
      }

      .ai-body {
        flex-direction: column
      }






      .site-drop-panel {
        position: fixed;
        top: 62px;
        left: 12px;
        right: 12px;
        width: auto;
        min-width: unset;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .user-dropdown {
        right: 0;
        left: auto;
        min-width: min(88vw, 280px)
      }

      .header-live-clock {
        padding: 4px 0
      }

      .header-live-clock .clock-date {
        font-size:var(--fs-xs)
      }

      .header-live-clock .clock-time {
        font-size:var(--fs-xs)
      }

      .header-live-clock .clock-line {
        gap: 8px
      }

      .news-detail-backdrop,
      .news-config-backdrop,
      .wr-modal-bg {
        padding: 16px
      }

      .news-detail-modal,
      .news-config-modal,
      .wr-modal {
        max-width: 100%;
        border-radius: 14px
      }

      .org-table,
      .tbl,
      .ship-table,
      .member-table {
        min-width: 760px
      }
    }

    @media (max-width: 640px) {
      :root {
        --r14: 12px;
        --r12: 10px;
        --r8: 8px
      }

      .hdr-in {
        padding: 10px 12px
      }

      .logo-mark {
        width: 34px;
        height: 34px
      }

      .logo-text strong {
        font-size:var(--fs-md)
      }

      .logo-text span {
        font-size:var(--fs-xs)
      }

      #selYear,
      #selMonth,
      #selWeek {
        font-size:var(--fs-xs) !important;
        padding: 5px 6px !important
      }

      .week-badge {
        font-size:var(--fs-xs);
        padding: 4px 8px
      }

      .hbtn,
      .site-drop-btn,
      .edit-btn,
      .excel-btn,
      .crop-btn,
      .sub-tab,
      .main-tab {
        height: 38px;
        font-size:var(--fs-base);
        padding: 0 12px;
        border-radius: 10px
      }

      .sub-tabs {
        gap: 8px;
        padding-top: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch
      }

      .sub-tab {
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size:var(--fs-sm)
      }

      .wrap,
      .admin-wrap,
      .org-page-wrap {
        padding: 12px
      }

      .card-head,
      .card-body,
      .sb-head,
      .sb-body {
        padding-left: 12px;
        padding-right: 12px
      }

      .notice-item,
      .issue,
      .alert-item,
      .org-item,
      .site-item {
        padding-top: 10px;
        padding-bottom: 10px
      }

      .ntxt,
      .issue-txt,
      .ai-name,
      .area-row,
      .jipum-item {
        font-size:var(--fs-base)
      }

      .stat {
        padding: 12px
      }

      .stat-lbl {
        font-size:var(--fs-xs)
      }

      .stat-val {
        font-size:var(--fs-2xl)
      }

      .stat-val small {
        font-size:var(--fs-xs)
      }

      .card-body[style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important
      }

      .card-body[style*="grid-template-columns:1fr 1fr 1fr"]>div {
        border-right: none !important;
        border-bottom: 0.5px solid rgba(0,0,0,.08)
      }

      .card-body[style*="grid-template-columns:1fr 1fr 1fr"]>div:last-child {
        border-bottom: none
      }

      .crop-alert {
        align-items: flex-start;
        flex-direction: column
      }

      .crop-filter,
      .return-filter-bar,
      .agri-toolbar,
      .monthly-toolbar {
        padding: 10px;
        gap: 8px
      }

      .crop-filter>*,
      .return-filter-bar>*,
      .agri-toolbar>*,
      .monthly-toolbar>* {
        width: 100%
      }

      .crop-filter button,

      .stat-row,
      .crop-summary-bar {
        grid-template-columns: 1fr
      }




      .panel {
        width: 100%
      }

      .panel-header {
        padding: 14px 12px
      }

      .panel-body {
        padding: 14px 12px
      }

      .panel-actions {
        padding: 12px;
        flex-direction: column-reverse
      }

      .btn-submit,
      .btn-cancel {
        width: 100%
      }

      .wr-doc-title {
        font-size:var(--fs-lg)
      }

      .wr-doc-meta {
        gap: 8px
      }

      .wr-meta-field {
        width: 100%;
        justify-content: space-between
      }

      .wr-meta-select,
      .wr-meta-input-sm {
        max-width: 55%
      }

      .wr-sec-head {
        gap: 8px
      }

      .wr-sec-title {
        font-size:var(--fs-base)
      }

      .wr-sec-dest {
        display: none
      }

      .wr-table-input {
        min-width: 700px
      }

      .wr-action-bar {
        position: static;
        border-radius: 10px
      }

      .ticker-inline-tools {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px
      }

      .ticker-inline-tools input {
        grid-column: 1 / -1;
        width: 100%
      }

      .ticker-inline-tools button {
        width: 100%
      }

      .news-list-item {
        padding: 10px 12px;
        font-size:var(--fs-base)
      }

      .news-detail-head,
      .news-detail-meta,
      .news-detail-body,
      .news-detail-foot {
        padding-left: 14px;
        padding-right: 14px
      }

      .news-detail-title {
        font-size:var(--fs-lg)
      }

      .org-section-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch
      }

      .org-sec-tab {
        flex: 0 0 auto
      }

      .monthly-side-menu {
        position: static
      }

      .toast,
      .org-toast {
        left: 12px;
        right: 12px;
        transform: none;
        bottom: 16px;
        text-align: center;
        white-space: normal
      }

      .toast.show {
        transform: none
      }

      /* ── 홈 화면(p1) 모바일 최적화 ── */
      #p1 .wrap {
        padding: 10px;
        gap: 10px
      }

      /* main-col 카드 간격 축소 */
      #p1 .main-col {
        gap: 10px
      }

      /* card 여백 최소화 */
      #p1 .card-head {
        padding: 11px 13px
      }

      #p1 .card-body {
        padding: 12px 13px
      }

      #p1 .card-title {
        font-size:var(--fs-md);
        font-weight: var(--fw-bold)
      }

      /* 공지사항 아이템 */
      #p1 .notice-item {
        padding: 9px 0;
        gap: 8px;
        align-items: flex-start
      }

      #p1 .ntxt {
        font-size:var(--fs-md);
        line-height: var(--lh-base)
      }

      #p1 .norg {
        font-size:var(--fs-xs);
        padding: 2px 7px;
        margin-top: 1px
      }

      /* 이슈 아이템 */
      #p1 .issue {
        padding: 10px 11px;
        gap: 8px
      }

      #p1 .issue-txt {
        font-size:var(--fs-md);
        line-height: var(--lh-base)
      }

      #p1 .issue-badge {
        font-size:var(--fs-xs);
        padding: 2px 6px;
        margin-top: 1px
      }

      /* 사이드바: 채팅창 높이 모바일 축소 */
      #p1 .side-col {
        gap: 10px
      }

      #p1 .sb-card[style*="height:420px"] {
        height: 320px !important
      }

      /* 달력 sb-card 패딩 */
      #p1 .sb-card .sb-head {
        padding: 9px 13px !important
      }

      #p1 .sb-card > div[style*="padding:0 12px"] {
        padding: 0 10px 10px !important
      }

      /* 채팅 입력 영역 */
      #lcText {
        font-size:var(--fs-md) !important;
        padding: 8px 10px !important
      }

      #lcSendBtn {
        font-size:var(--fs-base) !important;
        padding: 8px 14px !important;
        min-height: 40px
      }

      /* 시스템 공지 배너 */
      #sysNoticeBanner {
        margin-bottom: 10px !important
      }
    }

    /* Ongdal UX polish */

    /* 내부 스크롤 영역 바운스 독립 처리 */
    #lcMessages,
    .panel-body,
    [style*="overflow-y:auto"],
    [style*="overflow-y: auto"] {
      overscroll-behavior: contain
    }

    .ong-input,
    .ong-textarea,
    .ong-select {
      transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
    }

    .ong-input:hover,
    .ong-textarea:hover,
    .ong-select:hover {
      border-color: #bfd4c0 !important;
      background: #fff !important;
    }

    .ong-input:focus,
    .ong-textarea:focus,
    .ong-select:focus {
      background: #fff !important;
      transform: translateY(-1px);
    }

    .ong-textarea::placeholder {
      color: #9aa594 !important;
      transition: opacity .18s ease, color .18s ease;
    }

    .ong-textarea:focus::placeholder {
      opacity: 0;
    }

    .btn-submit {
      position: relative;
      overflow: hidden;
      min-height: 52px;
      letter-spacing: -0.01em;
    }

    .btn-submit::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, 0) 100%);
      transform: translateX(-120%);
      transition: transform .45s ease;
    }

    .btn-submit:hover::after {
      transform: translateX(120%);
    }

    .btn-submit:hover {
      transform: translateY(-1px);
    }

    .btn-submit:active {
      transform: translateY(0);
    }


    .ong-hero,
    .ong-section {
      animation: ongFadeUp .35s ease both;
    }

    .ong-section {
      animation-delay: .06s
    }

    @keyframes ongFadeUp {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }


    /* popup header cleanup */
    .ong-modal {
      position: relative
    }

    .ong-modal-body-nohead {
      position: relative;
      padding-top: 24px !important
    }

    .ong-close-floating {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 5;
    }

    @media (max-width: 760px) {
      .ong-close-floating {
        top: 12px;
        right: 12px
      }

      .ong-modal-body-nohead {
        padding-top: 20px !important
      }
    }




    /* ════════════ 물류 검수일지 ════════════ */
    .inspect-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 14px
    }

    .inspect-stat {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      padding: 12px 14px
    }

    .inspect-stat-label {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-bottom: 4px
    }

    .inspect-stat-value {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: var(--txt);
      line-height: var(--lh-tight)
    }

    .inspect-stat-sub {
      font-size:var(--fs-xs);
      color: var(--txts);
      margin-top: 4px;
      line-height: var(--lh-base)
    }

    .inspect-stat.red {
      background: var(--red-l);
      border-color: #fbbaba
    }

    .inspect-stat.green {
      background: var(--g50);
      border-color: var(--g200)
    }

    .inspect-stat.blue {
      background: var(--blue-l);
      border-color: #bfdbfe
    }

    .inspect-stat.amber {
      background: var(--amber-l);
      border-color: #f5d77d
    }

    .inspect-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding: 10px 12px;
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      margin-bottom: 12px
    }

    .inspect-topbar-meta {
      font-size:var(--fs-sm);
      color: var(--txts);
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    .inspect-note {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    .inspect-table {
      width: 100%;
      border-collapse: collapse;
      font-size:var(--fs-base);
      min-width: 1120px
    }

    .inspect-table th {
      padding: 10px 12px;
      background: var(--content-bg);
      border-bottom: 0.5px solid rgba(0,0,0,.1);
      font-size:var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--txts);
      text-align: left;
      white-space: nowrap
    }

    .inspect-table td {
      padding: 10px 12px;
      border-bottom: 0.5px solid rgba(0,0,0,.05);
      vertical-align: top;
      line-height: var(--lh-base);
      color: var(--txt)
    }

    .inspect-table tbody tr:hover td {
      background: #f8fcf8
    }

    .inspect-table tbody tr:last-child td {
      border-bottom: none
    }

    .inspect-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      white-space: nowrap
    }

    .inspect-badge.warn {
      background: var(--yellow-l);
      color: #7c5000
    }

    .inspect-badge.danger {
      background: var(--red-l);
      color: var(--red)
    }

    .inspect-badge.info {
      background: var(--blue-l);
      color: var(--blue)
    }

    .inspect-badge.ok {
      background: var(--g50);
      color: var(--g600)
    }

    .inspect-chip-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .inspect-mini-card-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 12px;
      margin-top: 14px
    }

    .inspect-mini-card {
      padding: 14px 16px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      background: var(--white)
    }

    .inspect-mini-card strong {
      display: block;
      font-size:var(--fs-base);
      color: var(--txt);
      margin-bottom: 6px
    }

    .inspect-mini-card p,
    .inspect-mini-card li {
      font-size:var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-loose)
    }

    .inspect-mini-card ul {
      padding-left: 18px
    }

    .inspect-mini-card.warn {
      background: var(--amber-l);
      border-color: #f5d77d
    }

    .inspect-mini-card.good {
      background: var(--g50);
      border-color: var(--g200)
    }

    .inspect-mini-card.info {
      background: var(--blue-l);
      border-color: #bfdbfe
    }

    @media (max-width: 980px) {

      .inspect-summary-grid,
      .inspect-mini-card-grid {
        grid-template-columns: 1fr
      }
    }


    /* ════════════ 관리자 비밀번호 게이트 ════════════ */
    .admin-pin-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .58);
      backdrop-filter: blur(4px);
      z-index: 100200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px
    }

    .admin-pin-overlay.show {
      display: flex
    }

    .admin-pin-modal {
      width: min(460px, 100%);
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 22px;
      box-shadow: 0 24px 70px rgba(15, 23, 42, .26);
      overflow: hidden
    }

    .admin-pin-head {
      padding: 22px 24px 14px;
      background: linear-gradient(135deg, #f7fbf6 0%, #eef7ef 100%);
      border-bottom: 1px solid #dfe9dc
    }

    .admin-pin-kicker {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #d7e8d7;
      color: var(--g600);
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      margin-bottom: 10px
    }

    .admin-pin-title {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: #18361c;
      line-height: var(--lh-tight);
      letter-spacing: -.02em
    }

    .admin-pin-desc {
      font-size:var(--fs-base);
      color: #55705a;
      line-height: var(--lh-loose);
      margin-top: 8px
    }

    .admin-pin-body {
      padding: 20px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .admin-pin-label {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--txts)
    }

    .admin-pin-input {
      width: 100%;
      padding: 14px 16px;
      border: 0.5px solid rgba(0,0,0,.14);
      border-radius: 12px;
      font-size:var(--fs-3xl);
      letter-spacing: .38em;
      text-align: center;
      font-family: 'DM Mono', monospace;
      background: #fff;
      outline: none
    }

    .admin-pin-input:focus {
      border-color: var(--purple);
      box-shadow: 0 0 0 4px rgba(124, 58, 237, .08)
    }

    .admin-pin-help {
      font-size:var(--fs-sm);
      color: var(--txtm);
      line-height: var(--lh-loose)
    }

    .admin-pin-error {
      display: none;
      padding: 10px 12px;
      border: 1px solid #fbbaba;
      border-radius: 10px;
      background: var(--red-l);
      color: var(--red);
      font-size:var(--fs-sm);
      line-height: var(--lh-base)
    }

    .admin-pin-error.show {
      display: block
    }

    .admin-pin-actions {
      display: flex;
      gap: 8px
    }

    .admin-pin-status-card {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: var(--r12);
      padding: 18px;
      margin-bottom: 16px
    }

    .admin-pin-status-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px
    }

    .admin-pin-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold)
    }

    .admin-pin-badge.ok {
      background: var(--g50);
      color: var(--g600)
    }

    .admin-pin-badge.warn {
      background: var(--amber-l);
      color: #7c5000
    }

    .admin-pin-inline-form {
      display: grid;
      grid-template-columns: 1fr 140px;
      gap: 10px;
      align-items: end
    }

    .admin-pin-inline-form .form-input {
      font-family: 'DM Mono', monospace;
      letter-spacing: .3em;
      text-align: center;
      font-size:var(--fs-xl)
    }

    .admin-pin-note {
      margin-top: 10px;
      font-size:var(--fs-xs);
      color: var(--txtm);
      line-height: var(--lh-loose);
      background: var(--content-bg);
      border: 1px dashed var(--bdr);
      padding: 10px 12px;
      border-radius: 10px;
      white-space: pre-wrap
    }

    @media (max-width:640px) {

      .admin-pin-head,
      .admin-pin-body {
        padding-left: 18px;
        padding-right: 18px
      }

      .admin-pin-inline-form {
        grid-template-columns: 1fr
      }

      .admin-pin-actions {
        flex-direction: column-reverse
      }
    }


    /* ════════════ 생산동향 - 생산자현황 ════════════ */
    .producer-shell {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .producer-guide-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 12px
    }

    .producer-guide-card {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      padding: 14px 16px
    }

    .producer-guide-card strong {
      display: block;
      font-size:var(--fs-base);
      margin-bottom: 6px;
      color: var(--txt)
    }

    .producer-guide-card p {
      font-size:var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-loose)
    }

    .producer-guide-card.good {
      background: var(--g50);
      border-color: var(--g200)
    }

    .producer-guide-card.warn {
      background: var(--amber-l);
      border-color: #f5d77d
    }

    .producer-guide-card.info {
      background: var(--blue-l);
      border-color: #bfdbfe
    }

    .producer-summary-bar {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px
    }

    .producer-kpi {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      padding: 12px 14px
    }

    .producer-kpi-label {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-bottom: 4px
    }

    .producer-kpi-val {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: var(--txt);
      line-height: var(--lh-tight)
    }

    .producer-filter {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      padding: 10px 12px;
      background: var(--content-bg);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px
    }

    .producer-filter input,
    .producer-filter select {
      padding: 8px 10px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 8px;
      font-size:var(--fs-sm);
      font-family: 'Pretendard Variable', sans-serif;
      background: #fff
    }

    .producer-filter input:focus,
    .producer-filter select:focus {
      outline: none;
      border-color: var(--g400)
    }

    .producer-main-grid {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 14px;
      align-items: start
    }

    .producer-list-card,
    .producer-detail-card {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 14px;
      overflow: hidden
    }

    .producer-list-head,
    .producer-detail-head {
      padding: 14px 16px;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px
    }

    .producer-list-body {
      max-height: 980px;
      overflow: auto;
      padding: 8px
    }

    .producer-list-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(96px, .9fr) minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 10px;
      background: var(--white);
      cursor: pointer;
      transition: all .15s;
      margin-bottom: 6px;
      text-align: left
    }

    .producer-list-item:last-child {
      margin-bottom: 0
    }

    .producer-list-item:hover {
      border-color: var(--g400);
      background: var(--g50)
    }

    .producer-list-item.has-contract {
      background: var(--g50);
      border-color: var(--g200)
    }

    .producer-list-item.has-contract:hover {
      background: var(--g50);
      border-color: var(--g400)
    }

    .producer-list-item.has-contract.active {
      border-color: var(--g600);
      background: #e3f3e4;
      box-shadow: inset 0 0 0 1px var(--g200)
    }

    .producer-list-item.active {
      border-color: var(--g600);
      background: var(--g50);
      box-shadow: inset 0 0 0 1px var(--g200)
    }

    .producer-list-name {
      min-width: 0;
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txt);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .producer-list-no {
      font-size:var(--fs-xs);
      color: var(--txtm);
      font-family: 'DM Mono', monospace;
      white-space: nowrap;
      text-align: center
    }

    .producer-list-meta {
      min-width: 0;
      font-size:var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-tight);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right
    }

    .producer-pill {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold)
    }

    .producer-pill.green {
      background: var(--g50);
      color: var(--g600)
    }

    .producer-pill.blue {
      background: var(--blue-l);
      color: var(--blue)
    }

    .producer-pill.gray {
      background: var(--s100);
      color: var(--txts)
    }

    .producer-pill.amber {
      background: var(--amber-l);
      color: #7c5000
    }

    .producer-empty {
      padding: 28px 16px;
      text-align: center;
      color: var(--txtm);
      font-size:var(--fs-sm);
      border: 1px dashed var(--bdr);
      border-radius: 12px;
      background: var(--content-bg)
    }

    .producer-profile-top {
      padding: 18px 18px 14px;
      border-bottom: 0.5px solid rgba(0,0,0,.08);
      background: linear-gradient(135deg, #f7fbf6 0%, #edf7ee 100%)
    }

    .producer-profile-top-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap
    }

    .producer-profile-name {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: #18361c;
      line-height: var(--lh-tight)
    }

    .producer-profile-sub {
      font-size:var(--fs-sm);
      color: #55705a;
      line-height: var(--lh-loose);
      margin-top: 6px
    }

    .producer-profile-badges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px
    }

    .producer-card-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 16px 18px 0
    }

    .producer-info-card {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 12px;
      padding: 14px 14px
    }

    .producer-info-card strong {
      display: block;
      font-size:var(--fs-sm);
      color: var(--txt);
      margin-bottom: 8px
    }

    .producer-info-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size:var(--fs-sm);
      line-height: var(--lh-loose);
      padding: 4px 0;
      border-bottom: 1px dashed var(--s100)
    }

    .producer-info-row:last-child {
      border-bottom: none
    }

    .producer-info-row span:first-child {
      color: var(--txtm);
      flex-shrink: 0
    }

    .producer-info-row span:last-child {
      color: var(--txt);
      font-weight: var(--fw-medium);
      text-align: right
    }

    .producer-contract-summary {
      padding: 14px 18px 0
    }

    .producer-contract-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px
    }

    .producer-contract-card {
      background: var(--card-bg);
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: 12px;
      padding: 12px 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,.05)
    }

    .producer-contract-card .lbl {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-bottom: 4px
    }

    .producer-contract-card .val {
      font-size:var(--fs-xl);
      font-weight: var(--fw-bold);
      color: var(--txt);
      line-height: var(--lh-tight)
    }

    .producer-chip-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 14px 18px 0
    }

    .producer-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border: 0.5px solid rgba(0,0,0,.08);
      border-radius: 999px;
      background: var(--white);
      font-size:var(--fs-sm);
      color: var(--txt)
    }

    .producer-chip strong {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    .producer-table-wrap {
      padding: 14px 18px 18px;
      overflow: auto
    }

    .producer-table {
      width: 100%;
      min-width: 1200px;
      border-collapse: collapse;
      font-size:var(--fs-base)
    }

    .producer-table th {
      padding: 10px 12px;
      background: var(--content-bg);
      border-bottom: 0.5px solid rgba(0,0,0,.1);
      font-size:var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--txts);
      text-align: left;
      white-space: nowrap
    }

    .producer-table td {
      padding: 10px 12px;
      border-bottom: 0.5px solid rgba(0,0,0,.05);
      vertical-align: middle;
      color: var(--txt);
      line-height: var(--lh-base)
    }

    .producer-table tbody tr:hover td {
      background: #f8fcf8
    }

    .producer-table tbody tr:last-child td {
      border-bottom: none
    }

    .producer-table td.r,
    .producer-table th.r {
      text-align: right;
      font-variant-numeric: tabular-nums
    }

    .producer-source-note {
      font-size:var(--fs-xs);
      color: var(--txtm)
    }

    .producer-section-title {
      padding: 14px 18px 0;
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txt);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .producer-section-title .sub {
      font-size:var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--txtm)
    }

    @media (max-width: 1100px) {
      .producer-main-grid {
        grid-template-columns: 1fr
      }

      .producer-list-body {
        max-height: 320px
      }

      .producer-summary-bar,
      .producer-card-grid,
      .producer-contract-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width: 760px) {

      .producer-guide-grid,
      .producer-summary-bar,
      .producer-card-grid,
      .producer-contract-grid {
        grid-template-columns: 1fr
      }

      .producer-filter {
        align-items: stretch
      }

      .producer-filter>* {
        width: 100%
      }

      .producer-profile-name {
        font-size:var(--fs-xl)
      }

      .producer-list-item {
        grid-template-columns: minmax(0, 1fr) minmax(96px, .9fr) minmax(0, 1fr)
      }

      .producer-list-badges {
        justify-content: flex-start
      }
    }


    .producer-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      border-bottom: 1px solid #eee;
    }

    .producer-name {
      flex: 1;
      font-size: clamp(12px, 1vw, 14px);
      white-space: normal;
      overflow: visible;
      word-break: keep-all;
    }

    .producer-community {
      color: var(--g600);
      font-size:var(--fs-sm);
      margin-left: 10px;
      white-space: nowrap;
    }

    .has-contract {
      background-color: #e6f0ff !important;
    }



    /* 생산안정기금 신청 탭 비활성화 */
    .sub-tab.dr-apply-tab.disabled {
      opacity: 0.45;
      cursor: not-allowed;
      pointer-events: none;
      background: var(--s100) !important;
      border-color: var(--bdr) !important;
      color: var(--txtm) !important;
    }

    .sub-tab.dr-apply-tab.unlocked {
      opacity: 1;
      cursor: pointer;
      pointer-events: auto;
    }

    #drLinkedReportBanner {
      animation: fadeIn .3s ease
    }

    /* 생산안정기금 탭 강조 */


    /* 생산안정기금 사진 삭제 버튼 */
    .dr-photo-preview-wrap {
      position: relative;
      width: 100%;
      height: 110px
    }

    .dr-photo-del {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 26px;
      height: 26px;
      border: none;
      border-radius: 50%;
      background: rgba(198, 40, 40, .92);
      color: #fff;
      font-size:var(--fs-lg);
      font-weight: var(--fw-bold);
      line-height: var(--lh-1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .18)
    }

    .dr-photo-del:hover {
      background: #b71c1c
    }

    /* 생산안정기금 저장 버튼 */
    #drSaveBtn {
      padding: 10px 36px !important;
      background: #b9e4b3 !important;
      color: var(--g800) !important;
      border: none !important;
      border-radius: 10px !important;
      font-size:var(--fs-md) !important;
      font-weight: var(--fw-bold) !important;
      cursor: pointer !important;
      font-family: 'Pretendard Variable', sans-serif !important;
      box-shadow: 0 6px 16px rgba(76, 175, 80, .18);
    }

    #drSaveBtn:hover {
      background: #a5d99d !important
    }


    /* ===== 생산안정기금 조회 테이블 압축형 가독성 튜닝 ===== */
    .dr-list-wrap {
      overflow-x: hidden;
      border: 0.5px solid rgba(0,0,0,.09);
      border-radius: 18px;
      background: var(--card-bg);
      box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.04);
    }

    .dr-list-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size:var(--fs-xs);
    }

    .dr-list-table thead tr {
      background: #f7f6f4;
      border-bottom: 0.5px solid rgba(0,0,0,.09);
    }

    .dr-list-table th,
    .dr-list-table td {
      padding: 9px 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    .dr-list-table th {
      text-align: left;
      font-weight: var(--fw-bold);
      color: var(--txts);
      font-size:var(--fs-xs);
      letter-spacing: -0.02em;
    }

    .dr-list-table th.center,
    .dr-list-table td.center {
      text-align: center;
    }

    .dr-list-table tbody tr {
      border-bottom: 1px solid var(--g100);
    }

    .dr-list-table tbody tr:last-child {
      border-bottom: none;
    }

    .dr-list-table tbody tr:hover {
      background: var(--g50);
    }

    .dr-col-check {
      width: 40px
    }

    .dr-col-date {
      width: 84px
    }

    .dr-col-region {
      width: 42px
    }

    .dr-col-community {
      width: 48px
    }

    .dr-col-producer {
      width: 48px
    }

    .dr-col-crop {
      width: 58px
    }

    .dr-col-cause {
      width: 42px
    }

    .dr-col-occur {
      width: 76px
    }

    .dr-col-status {
      width: 58px
    }

    .dr-col-processing {
      width: 92px
    }

    .dr-col-meeting {
      width: 290px
    }

    .dr-col-actions {
      width: 110px
    }

    .dr-date-cell {
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }

    .dr-meeting-input {
      width: 100%;
      min-width: 0 !important;
      height: 34px;
      font-size:var(--fs-xs) !important;
      padding: 4px 10px !important;
      white-space: nowrap;
    }

    .dr-action-group {
      display: flex;
      gap: 4px;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
    }

    .dr-action-group .dr-list-btn {
      padding: 4px 8px;
      font-size:var(--fs-xs);
    }

    /* ===== 산출 기준 조정 모달 CSS ===== */
    .cc-tab { border:none;background:none;padding:10px 18px;font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--txts);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s }
    .cc-tab:hover { color:var(--txt) }
    .cc-tab-on { color:#5b21b6;border-bottom-color:var(--purple) }
    .cc-section-title { font-size:var(--fs-md);font-weight:var(--fw-bold);color:#1a1a1a;margin-bottom:4px }
    .cc-desc { font-size:var(--fs-sm);color:var(--txts);margin-bottom:18px;line-height:var(--lh-base) }
    .cc-item { border:1.5px solid var(--g100);border-radius:12px;padding:14px 16px;margin-bottom:12px }
    .cc-item-label { font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--txt);margin-bottom:3px }
    .cc-item-desc { font-size:var(--fs-sm);color:var(--txts);margin-bottom:10px;line-height:var(--lh-base) }
    .cc-item-row { display:flex;align-items:center;gap:8px }
    .cc-input { height:38px;border:1.5px solid var(--g200);border-radius:8px;padding:0 10px;font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--txt);width:140px;text-align:right }
    .cc-input:focus { outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.1) }
    .cc-unit { font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--txts) }
    .cc-toggle { position:relative;display:inline-block;cursor:pointer }
    .cc-toggle input { position:absolute;opacity:0;width:0;height:0 }
    .cc-toggle-track { display:block;width:44px;height:24px;background:#d1d5db;border-radius:12px;transition:background .2s;position:relative }
    .cc-toggle input:checked + .cc-toggle-track { background:var(--purple) }
    .cc-toggle-thumb { position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2) }
    .cc-toggle input:checked + .cc-toggle-track .cc-toggle-thumb { left:23px }
    .cc-toggle-lbl { font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--txts) }
    /* ===== 지원금 산출 탭 전용 CSS ===== */

    /* 테이블 셀 공통 */
    .drc-center { padding:8px 10px;border:1px solid var(--g200);text-align:center;white-space:nowrap; }
    .drc-amt    { padding:8px 10px;border:1px solid var(--g200);text-align:right;white-space:nowrap; }
    .drc-final  { padding:8px 10px;border:1px solid var(--g200);text-align:right;font-weight:var(--fw-bold);color:var(--g800);white-space:nowrap; }
    .drc-skip   { padding:8px 10px;border:1px solid var(--g200);text-align:right;color:var(--txts);font-style:italic;white-space:nowrap; }

    /* 헤더 sticky */
    #drCalcBoardGrid table thead th {
      position:sticky;top:0;z-index:2;
      padding:9px 10px;border:1px solid var(--g200);
      background:var(--g50);font-size:var(--fs-sm);font-weight:var(--fw-bold);
      color:var(--txt);text-align:center;white-space:nowrap;
    }
    /* 행 hover */
    #drCalcBoardGrid tbody tr { cursor:pointer;transition:background .1s; }
    #drCalcBoardGrid tbody tr:hover { background:#f0f6ff !important; }

    /* 합계 행 */
    .drc-total-row td {
      padding:9px 10px;border:1px solid var(--g200);
      background:var(--g50);font-weight:var(--fw-bold);
    }
    /* 100만원 미만 제외 행 */
    .drc-excluded td { opacity:.5; }
    .drc-excluded .drc-final { color:var(--txts) !important;font-style:italic; }

    /* 처리상황 필터 칩 */
    .drc-status-chip {
      display:inline-flex;align-items:center;gap:4px;
      padding:6px 13px;border-radius:20px;border:1.5px solid var(--g200);
      font-size:var(--fs-sm);font-weight:var(--fw-medium);background:var(--white);
      color:var(--txtm);cursor:pointer;transition:all .15s;
      white-space:nowrap;
    }
    .drc-status-chip:hover { border-color:var(--blue);color:var(--blue); }
    .drc-status-chip.on { background:var(--blue);border-color:var(--blue);color:#fff; }
    .drc-status-chip.on-approve { background:#1a6030;border-color:#1a6030;color:#fff; }
    .drc-status-chip.on-paid { background:#5c3d8f;border-color:#5c3d8f;color:#fff; }

    /* 산출 요약 바 */
    .drc-summary-bar {
      display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;
    }
    .drc-summary-card {
      padding:12px 14px;border:1px solid var(--bdr);border-radius:12px;background:var(--white);
    }
    .drc-summary-label { font-size:var(--fs-xs);color:var(--txtm);margin-bottom:4px; }
    .drc-summary-val   { font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--txt); }
    .drc-summary-val.accent { color:#0f3f8f; }


    /* 인쇄 */
    @media print {
      body > *:not(#app) { display:none !important; }
      #app > *:not(#p10) { display:none !important; }
      #p10 .main-tab-row, #p10 .sub-tab-row,
      #p10 #drTabList, #p10 #drTabForm,
      #p10 #drTabHarvest, #p10 #drTabCrop, #p10 #drTabFacility,
      #p10 #drTabNotice,
      #drCalcRefreshBtn, #drCalcExcelBtn,
      #drCalcPrintBtn, .drc-filter-bar { display:none !important; }
      #drTabCalc { display:block !important; }
      #drCalcBoardGrid .card { break-inside:avoid; }
      table { font-size:var(--fs-xs); }
      .drc-final { color:#000 !important; }
    }

    @media(max-width:768px) {
      .drc-summary-bar { grid-template-columns:1fr 1fr; }
      .drc-filter-bar  { flex-wrap:wrap;gap:6px; }
    }

    /* ===== 지원금 산출표 스크롤 ===== */
    #drCalcBoardGrid {
      width: 100%;
      box-sizing: border-box;
    }

    #drCalcBoardGrid .card {
      min-width: 0;
      overflow: hidden;
    }

    #drCalcBoardGrid .card-body {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 6px;
    }

    #drCalcBoardGrid .card-body::-webkit-scrollbar {
      height: 5px;
    }

    #drCalcBoardGrid .card-body::-webkit-scrollbar-track {
      background: var(--g100);
      border-radius: 3px;
    }

    #drCalcBoardGrid .card-body::-webkit-scrollbar-thumb {
      background: var(--g400);
      border-radius: 3px;
    }

    #drCalcBoardGrid .card-body table {
      white-space: nowrap;
    }

    /* ===== 생산안정기금 조회 재설계 ===== */

    /* KPI 요약 카드 */
    .dr-kpi-bar {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .dr-kpi-card {
      flex: 1;
      min-width: 80px;
      background: #fff;
      border: 1.5px solid var(--g100);
      border-radius: 10px;
      padding: 10px 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      transition: box-shadow .15s;
      cursor: pointer;
    }

    .dr-kpi-card:hover {
      box-shadow: var(--shm);
    }

    .dr-kpi-card.active {
      border-color: currentColor;
      box-shadow: 0 0 0 2px currentColor;
    }

    .dr-kpi-label {
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--txts);
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .dr-kpi-count {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      line-height: var(--lh-tight);
      font-variant-numeric: tabular-nums;
    }

    .dr-kpi-sub {
      font-size:var(--fs-xs);
      color: var(--txtm);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dr-kpi-card.kpi-all .dr-kpi-count {
      color: var(--txt);
    }

    .dr-kpi-card.kpi-wait .dr-kpi-count {
      color: var(--purple, #7b1fa2);
    }

    .dr-kpi-card.kpi-review .dr-kpi-count {
      color: var(--amber);
    }

    .dr-kpi-card.kpi-confirm .dr-kpi-count {
      color: #0288d1;
    }

    .dr-kpi-card.kpi-approve .dr-kpi-count {
      color: var(--blue);
    }

    .dr-kpi-card.kpi-paid .dr-kpi-count {
      color: var(--g600);
    }

    .dr-kpi-card.kpi-reject .dr-kpi-count {
      color: var(--red);
    }

    /* 툴바 */
    .dr-toolbar {
      display: flex;
      gap: 0;
      margin-bottom: 14px;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 8px;
    }

    .dr-toolbar-left {
      display: flex;
      gap: 8px;
      align-items: center;
      flex: 1;
      flex-wrap: wrap;
    }

    .dr-toolbar-right {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    /* ── 일괄처리 툴바 그룹 레이아웃 ── */
    .dr-bulk-zone {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      background: var(--g50);
      border: 1.5px dashed var(--g200);
      border-radius: 12px;
      flex-wrap: wrap;
    }

    .dr-bulk-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .dr-bulk-group-label {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .dr-bulk-group-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dr-bulk-divider {
      display: inline-block;
      width: 1px;
      height: 28px;
      background: var(--g200);
      flex-shrink: 0;
    }

    .dr-toolbar .form-input {
      height: 42px;
    }

    .dr-toolbar-left>.form-input,
    .dr-toolbar-left>.edit-btn {
      flex: 0 0 auto;
    }

    .dr-toolbar .edit-btn {
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    #drListCount {
      font-size:var(--fs-sm);
      color: var(--txts);
      white-space: nowrap;
    }

    #drSelectedCount {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--g700);
      white-space: nowrap;
    }

    /* 테이블 헤더/바디 */
    .dr-redesign-wrap {
      border: 1.5px solid var(--g100);
      border-radius: 18px;
      background: #fff;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .dr-redesign-wrap::-webkit-scrollbar {
      height: 6px;
    }

    .dr-redesign-wrap::-webkit-scrollbar-track {
      background: var(--g100);
      border-radius: 3px;
    }

    .dr-redesign-wrap::-webkit-scrollbar-thumb {
      background: var(--g400);
      border-radius: 3px;
    }

    .dr-redesign-wrap::-webkit-scrollbar-thumb:hover {
      background: var(--g600);
    }

    /* 컬럼: 체크 | 번호 | 접수일 | 권역 | 공동체 | 생산자 | 피해작물 | 원인·발생 | 상태 | 처리상황(select) | 연결 | 회의차수 | 다운로드 */
    .dr-redesign-head,
    .dr-report-row {
      display: grid;
      grid-template-columns: 20px 58px 76px 90px 100px 80px 70px 80px 120px 120px 80px 148px 230px;
      gap: 0;
      align-items: center;
      padding: 0 14px;
    }

    .dr-redesign-head {
      padding: 0 14px;
      background: var(--g50);
      border-bottom: 2px solid var(--g200);
      min-height: 46px;
    }

    .dr-redesign-head>*,
    .dr-report-row>* {
      padding: 0 6px;
    }

    .dr-checkall-box {
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 0 !important;
      justify-content: center;
    }

    .dr-redesign-columns {
      display: contents;
    }

    .dr-redesign-columns span {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--txts);
      white-space: nowrap;
      letter-spacing: -0.02em;
      padding: 13px 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dr-report-list {
      display: flex;
      flex-direction: column;
    }

    .dr-empty-card {
      padding: 32px 18px;
      text-align: center;
      color: var(--txtm);
      font-size:var(--fs-base);
    }

    .dr-report-row {
      border-bottom: 1px solid var(--g100);
      min-height: 54px;
      transition: background .12s;
    }

    .dr-report-row:last-child {
      border-bottom: none;
    }

    .dr-report-row:hover {
      background: var(--g50);
    }

    .dr-row-checked {
      background: #f0fdf4 !important;
    }

    .dr-row-select {
      padding: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dr-date-text {
      font-size:var(--fs-sm);
      font-variant-numeric: tabular-nums;
      color: var(--txts);
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dr-cell-value {
      font-size:var(--fs-base);
      font-weight: var(--fw-medium);
      color: var(--txt);
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dr-cell-combo {
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txt);
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: var(--lh-base);
    }

    .dr-cell-combo .combo-main {
      font-weight: var(--fw-bold);
      font-size:var(--fs-base);
      color: var(--txt);
    }

    .dr-cell-combo .combo-sub {
      font-size:var(--fs-xs);
      color: var(--txts);
    }

    .dr-status-panel {
      min-width: 0;
      padding: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dr-status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      white-space: nowrap;
      line-height: var(--lh-1);
    }

    .dr-processing-select {
      width: 100%;
      height: 36px;
      border: 0.5px solid rgba(0,0,0,.14);
      border-radius: 10px;
      padding: 0 8px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      background: #fff;
      cursor: pointer;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
    }

    .dr-processing-select:focus {
      border-color: var(--g500);
      box-shadow: 0 0 0 3px var(--g100);
    }

    .dr-processing-select.ps-검토중 {
      color: var(--amber);
      border-color: var(--amber);
      background-color: #fffbf0;
    }

    .dr-processing-select.ps-대기 {
      color: var(--purple, #7b1fa2);
      border-color: var(--purple, #7b1fa2);
      background-color: var(--purple-l);
    }

    .dr-processing-select.ps-승인 {
      color: var(--blue);
      border-color: var(--blue);
      background-color: #eff6ff;
    }

    .dr-processing-select.ps-지급완료 {
      color: var(--g700);
      border-color: var(--g400);
      background-color: #f0fdf4;
    }

    .dr-processing-select.ps-확인완료 {
      color: #0288d1;
      border-color: #0288d1;
      background-color: #e1f5fe;
    }

    .dr-processing-select.ps-반려 {
      color: var(--red);
      border-color: var(--red);
      background-color: #fff5f5;
    }

    .dr-meeting-line {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dr-meeting-input {
      width: 100%;
      height: 36px;
      padding: 6px 10px !important;
      font-size:var(--fs-sm) !important;
      border-radius: 10px !important;
      min-width: 0 !important;
    }

    .dr-meeting-label {
      display: none !important;
    }

    .dr-action-panel {
      padding: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dr-action-group {
      display: flex;
      gap: 5px;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
    }

    .dr-action-group .dr-list-btn {
      min-width: 46px;
      padding: 5px 8px;
      font-size:var(--fs-sm);
    }

    @media (max-width: 1460px) {

      .dr-redesign-head,
      .dr-report-row {
        min-width: 1200px;
      }
    }

    @media (max-width: 980px) {
      .dr-toolbar {
        flex-direction: column;
        gap: 8px;
      }

      .dr-toolbar-left,
      .dr-toolbar-right {
        width: 100%;
      }

      .dr-bulk-zone {
        width: 100%;
      }

      .dr-kpi-bar {
        gap: 8px;
      }

      .dr-kpi-card {
        min-width: 90px;
        padding: 10px 12px;
      }

      .dr-kpi-count {
        font-size:var(--fs-xl);
      }

      /* 모바일: 테이블 헤더 숨김, 카드형 전환 */
      .dr-redesign-head { display: none !important; }

      .dr-redesign-wrap {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding: 0 !important;
      }

      .dr-report-list {
        padding: 4px 0 !important;
      }

      .dr-report-row {
        display: block !important;
        grid-template-columns: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        border-bottom: none !important;
        position: relative;
      }

      .dr-report-row > *:nth-child(1) {
        position: static;
      }

      .dr-row-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding-left: 24px;
      }

      .dr-cell-value, .dr-cell-combo, .dr-date-text, .dr-status-panel, .dr-action-panel, .dr-processing-select {
        justify-content: flex-start !important;
      }

      .dr-processing-select {
        width: 100% !important;
        min-width: 0 !important;
      }

      .dr-action-group {
        flex-wrap: wrap;
        justify-content: flex-start !important;
      }
    }


    /* ===== 신청유형 필터 칩 & 배지 ===== */
    .dr-type-chip {
      padding: 5px 12px;
      border-radius: 20px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-medium);
      border: 0.5px solid rgba(0,0,0,.14);
      background: #fff;
      color: var(--txts);
      cursor: pointer;
      white-space: nowrap;
      font-family: 'Pretendard Variable', sans-serif;
      transition: all .14s;
    }

    .dr-type-chip:hover {
      border-color: var(--g400);
      color: var(--g700);
    }

    .dr-type-chip.on {
      background: var(--g600);
      border-color: var(--g600);
      color: #fff;
    }

    .dr-type-chip.chip-harvest.on {
      background: #f57f17;
      border-color: #f57f17;
    }

    .dr-type-chip.chip-crop.on {
      background: var(--g600);
      border-color: var(--g600);
    }

    .dr-type-chip.chip-facility.on {
      background: var(--blue);
      border-color: var(--blue);
    }

    .dr-type-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
      border-radius: 6px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      white-space: nowrap;
    }

    .dr-type-badge.tb-report {
      background: var(--g50);
      color: var(--g600);
    }

    .dr-type-badge.tb-harvest {
      background: #fff8e1;
      color: #f57f17;
    }

    .dr-type-badge.tb-crop {
      background: var(--g50);
      color: var(--g800);
    }

    .dr-type-badge.tb-facility {
      background: var(--blue-l);
      color: var(--blue);
    }

    /* ===== 생산안정기금 상세 모달 반응형 ===== */
    @media (min-width: 640px) {
      #drDetailModal {
        align-items: center !important;
      }
      #drDetailModalInner {
        border-radius: 16px !important;
        width: min(900px, 95vw) !important;
        max-height: 92vh !important;
      }
    }

    /* ===== 생산안정기금 페이지 가로 레이아웃 확장 ===== */
    #p10>div {
      max-width: 1200px !important;
      width: calc(100vw - 48px) !important;
    }

    @media (max-width: 980px) {
      #p10>div {
        width: calc(100vw - 24px) !important;
        padding: 12px !important;
      }
    }

    /* ═══════════════════════════════════════════════════════
       재해보고서 입력 폼 — p2 재해 등록 모달과 동일한 양식/규격
       ───────────────────────────────────────────────────────
       기준: #p2DisasterModal (생산수급동향 › 재해 등록)
       - max-width: 520px
       - 섹션: 회색 박스 (g50 배경, 1px 보더, radius 12)
       - 섹션 타이틀: 12px 작은 라벨 (txts 색상)
       - 그리드: 2열 (1fr 1fr)
       - 사진 그리드: 2열, 간결한 썸네일
       - 하단 버튼: 초기화(flex:1) + 저장(flex:2)
       ═══════════════════════════════════════════════════════ */

    #drTabInput {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* 외곽 컨테이너 - p2 모달과 시각 동일: frame 제거, 섹션만 노출 */
    #drInputInner {
      width: 100%;
      max-width: 520px;
      background: transparent;
      border-radius: 0;
      border: none;
      box-shadow: none;
      overflow: visible;
      padding: 0;
    }

    /* 각 섹션(.card) → p2 모달의 회색 박스 스타일 */
    #drInputInner .card {
      background: var(--g50) !important;
      border: 1px solid var(--bdr) !important;
      border-radius: 12px !important;
      border-left: 1px solid var(--bdr) !important;
      border-right: 1px solid var(--bdr) !important;
      margin: 0 0 14px 0 !important;
      box-shadow: none !important;
      overflow: visible;
    }
    #drInputInner .card:first-of-type {
      margin-top: 0 !important;
    }
    #drInputInner .card:last-of-type {
      margin-bottom: 14px !important;
    }

    /* 스텝 인디케이터: 더 컴팩트하게 */
    #drInputInner .dr-step-indicator {
      margin-bottom: 14px;
      padding: 10px 14px;
    }

    /* 상단 안내 배너 2개 통합 스타일 (간결하게) */
    #drInputInner > div[style*="linear-gradient(135deg,#fff8e1"] {
      margin-bottom: 14px !important;
      padding: 12px 14px !important;
      font-size:var(--fs-sm) !important;
    }
    #drInputInner > div[style*="linear-gradient(135deg,#fff8e1"] > div > div:first-child {
      font-size:var(--fs-sm) !important;
      margin-bottom: 2px !important;
    }
    #drInputInner > div[style*="linear-gradient(135deg,#fff8e1"] > div > div:last-child {
      font-size:var(--fs-xs) !important;
      line-height: var(--lh-base) !important;
    }

    /* 녹색 "농업재해 발생 보고서" 배너: p2 모달의 헤더처럼 간결하게 */
    #drInputInner > div[style*="linear-gradient(90deg,var(--g50)"] {
      margin-bottom: 14px !important;
      padding: 12px 14px !important;
      background: var(--white) !important;
      border: 1px solid var(--bdr) !important;
      border-radius: 12px !important;
    }
    #drInputInner > div[style*="linear-gradient(90deg,var(--g50)"] > div > div {
      font-size:var(--fs-md) !important;
      color: var(--txt) !important;
    }

    /* 섹션 헤더: 작은 라벨 스타일 (p2 모달과 동일: padding 14px 16px) */
    #drInputInner .card-head {
      padding: 14px 16px 0 !important;
      background: transparent !important;
      border-bottom: none !important;
      min-height: 0 !important;
      margin-bottom: 10px !important;
    }
    #drInputInner .card-title {
      font-size:var(--fs-sm) !important;
      font-weight: var(--fw-bold) !important;
      color: var(--txts) !important;
      letter-spacing: 0.03em !important;
    }

    /* 섹션 본문 padding: p2 모달은 헤더와 본문이 같은 박스 내부라 bottom 14px */
    #drInputInner .card > div[style*="padding:16px 20px"] {
      padding: 0 16px 14px !important;
    }

    /* 그리드: PC/모바일 모두 2열 (p2 모달과 동일) */
    #drInputInner [style*="grid-template-columns:1fr 1fr 1fr"] {
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
    }
    #drInputInner [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
    }

    /* 사진 그리드: 2열 간결 (p2 모달: min-height 70px) */
    #drInputInner .dr-photo-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
    }
    #drInputInner .dr-photo-cell {
      min-height: 90px !important;
      padding: 8px !important;
      border: 1.5px dashed var(--bdr) !important;
      border-radius: 10px !important;
      background: var(--white) !important;
    }
    #drInputInner .dr-photo-placeholder {
      min-height: 70px !important;
      font-size:var(--fs-xs) !important;
      color: var(--txts) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
    }
    #drInputInner .dr-photo-placeholder small {
      font-size:var(--fs-xs) !important;
      margin-top: 4px !important;
    }
    #drInputInner .dr-photo-cell .form-input[id^="drPhotoLabel"] {
      margin-top: 6px !important;
      font-size:var(--fs-sm) !important;
      height: 34px !important;
    }

    /* 첨부파일 행: 세로 wrap */
    #drInputInner .dr-attach-row {
      flex-wrap: wrap !important;
      gap: 6px !important;
    }
    #drInputInner .dr-attach-row input.form-input {
      width: 100% !important;
      flex-shrink: 1 !important;
    }

    /* 하단 저장 버튼 영역 - p2 모달과 동일 비율 (초기화:저장 = 1:2) */
    #drInputFooter {
      padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)) !important;
      display: flex !important;
      gap: 10px !important;
      background: transparent;
      border-top: none;
      margin-top: 0;
    }
    #drInputFooter #drSaveBtn {
      flex: 2 !important;
      padding: 14px !important;
      border: none !important;
      border-radius: 12px !important;
      background: var(--g600) !important;
      color: #fff !important;
      font-size:var(--fs-md) !important;
      font-weight: var(--fw-bold) !important;
      cursor: pointer;
      font-family: inherit;
      min-height: 48px;
    }
    #drInputFooter .dr-reset-btn {
      flex: 1 !important;
      padding: 14px !important;
      border: 1.5px solid var(--bdr) !important;
      border-radius: 12px !important;
      background: var(--white) !important;
      color: var(--txt) !important;
      font-size:var(--fs-md) !important;
      font-weight: var(--fw-medium) !important;
      cursor: pointer;
      font-family: inherit;
      min-height: 48px;
    }

    /* 상단 안내 배너도 카드와 같은 폭 내에서 정렬 */
    #drInputInner + *, #drInputInner > * {
      box-sizing: border-box;
    }

    /* PC에서도 동일한 모달 스타일 유지 */
    @media (min-width: 640px) {
      #drTabInput {
        align-items: flex-start;
      }
      #drInputInner {
        max-width: 560px;
      }
    }


    /* ===== 생산안정기금 사진 업로드 UX 강화 ===== */
    .dr-photo-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 16px !important;
    }

    .dr-photo-cell {
      position: relative;
      min-height: 220px;
    }

    .dr-photo-cell.drag-over {
      border-color: var(--g400) !important;
      background: var(--g50) !important;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, .12);
    }

    .dr-photo-placeholder {
      min-height: 150px !important;
      font-size:var(--fs-3xl) !important;
    }

    .dr-photo-placeholder small {
      display: block;
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-top: 6px;
    }

    .dr-photo-preview-wrap {
      position: relative;
      width: 100%;
      height: 150px;
      border-radius: 10px;
      overflow: hidden;
    }

    .dr-photo-preview-wrap img {
      width: 100%;
      height: 150px !important;
      object-fit: cover;
      border-radius: 10px;
      cursor: zoom-in;
    }

    .dr-photo-actions {
      position: absolute;
      top: 8px;
      right: 8px;
      display: flex;
      gap: 6px;
      z-index: 2;
    }

    .dr-photo-icon-btn {
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #fff;
      font-size:var(--fs-md);
      box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    }

    .dr-photo-zoom {
      background: rgba(21, 101, 192, .92);
    }

    .dr-photo-del {
      background: rgba(198, 40, 40, .92);
    }

    .dr-photo-icon-btn:hover {
      filter: brightness(.95)
    }

    .dr-photo-help {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-top: 6px;
      text-align: center;
      line-height: var(--lh-base);
    }

    .dr-preview-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .8);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 5000;
      padding: 24px;
    }

    .dr-preview-overlay.show {
      display: flex;
    }

    .dr-preview-modal {
      position: relative;
      max-width: min(1200px, 96vw);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }

    .dr-preview-modal img {
      max-width: 100%;
      max-height: 78vh;
      border-radius: 14px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
    }

    .dr-preview-caption {
      color: #fff;
      font-size:var(--fs-md);
      text-align: center;
      line-height: var(--lh-base);
    }

    .dr-preview-close {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 38px;
      height: 38px;
      border: none;
      border-radius: 50%;
      background: #fff;
      color: #111;
      font-size:var(--fs-2xl);
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
    }

    @media (max-width: 1100px) {
      .dr-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 640px) {
      .dr-photo-grid {
        grid-template-columns: 1fr !important;
      }
    }
  



    /* ── 제안하기 ── */
    .sugg-wrap { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; }
    .sugg-subtabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
    .sugg-subtab-btn { padding: 9px 16px; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; background: #fff; color: var(--txts); font-size:var(--fs-base); font-weight: var(--fw-bold); font-family: 'Pretendard Variable', sans-serif; cursor: pointer; transition: all .15s; }
    .sugg-subtab-btn:hover { border-color: var(--g400); color: var(--g700); background: var(--g50); }
    .sugg-subtab-btn.on { background: var(--g600); border-color: var(--g600); color: #fff; }
    .sugg-subtab-panel { display: none; }
    .sugg-subtab-panel.on { display: block; }
    .sugg-form-card { background: #fff; border: 1px solid var(--bdr); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
    .sugg-form-title { font-size:var(--fs-md); font-weight: var(--fw-bold); color: var(--txt); margin-bottom: 16px; }
    .sugg-form-row { margin-bottom: 14px; }
    .sugg-form-label { font-size:var(--fs-sm); font-weight: var(--fw-medium); color: var(--txtm); margin-bottom: 6px; }
    .sugg-cat-btns { display: flex; gap: 8px; flex-wrap: wrap; }
    .sugg-cat-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--bdr); background: var(--bg); color: var(--txtm); font-size:var(--fs-base); cursor: pointer; transition: all .15s; }
    .sugg-cat-btn.on { border-color: var(--g600); background: var(--g600); color: #fff; font-weight: var(--fw-medium); }
    .sugg-textarea { width: 100%; min-height: 120px; border: 1px solid var(--bdr); border-radius: 8px; padding: 10px 12px; font-size:var(--fs-md); color: var(--txt); background: var(--bg); resize: vertical; font-family: inherit; box-sizing: border-box; }
    .sugg-textarea:focus { outline: none; border-color: var(--g600); box-shadow: 0 0 0 2px rgba(46,125,50,.12); }
    .sugg-anon-row { display: flex; align-items: center; gap: 8px; }
    .sugg-anon-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--g600); cursor: pointer; }
    .sugg-anon-row label { font-size:var(--fs-base); color: var(--txtm); cursor: pointer; }
    .sugg-submit-btn { width: 100%; padding: 12px; background: var(--g600); color: #fff; border: none; border-radius: 8px; font-size:var(--fs-md); font-weight: var(--fw-bold); cursor: pointer; }
    .sugg-submit-btn:hover { background: var(--g700, var(--g800)); }
    .sugg-done-msg { text-align: center; padding: 32px 0 16px; }
    .sugg-done-msg .sugg-done-icon { font-size:var(--fs-3xl); margin-bottom: 8px; }
    .sugg-done-msg .sugg-done-text { font-size:var(--fs-md); font-weight: var(--fw-bold); color: var(--txt); margin-bottom: 6px; }
    .sugg-done-msg .sugg-done-sub { font-size:var(--fs-base); color: var(--txts); margin-bottom: 20px; }
    .sugg-done-again { padding: 9px 24px; border: 1px solid var(--bdr); border-radius: 8px; background: var(--bg); color: var(--txtm); font-size:var(--fs-base); cursor: pointer; }

    /* 내 제안 내역 */
    .sugg-my-section { margin-top: 24px; }
    .sugg-my-title { font-size:var(--fs-md); font-weight: var(--fw-bold); color: var(--txt); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bdr); }
    .sugg-my-item { background: #fff; border: 1px solid var(--bdr); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
    .sugg-my-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
    .sugg-my-item-content { font-size:var(--fs-base); color: var(--txt); line-height: var(--lh-base); white-space: pre-wrap; }
    .sugg-my-item-date { font-size:var(--fs-xs); color: var(--txts); margin-top: 6px; }
    .sugg-my-comment { margin-top: 10px; padding: 10px 12px; background: var(--s50, #f0f9f0); border-radius: 8px; border-left: 3px solid var(--g600); }
    .sugg-my-comment-label { font-size:var(--fs-xs); font-weight: var(--fw-bold); color: var(--g700); margin-bottom: 4px; }
    .sugg-my-comment-text { font-size:var(--fs-base); color: var(--txt); line-height: var(--lh-base); }
    .sugg-my-empty { text-align: center; padding: 24px 0; color: var(--txts); font-size:var(--fs-base); }

    /* 관리자 목록 */
    .sugg-admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
    .sugg-stat-card { background: #fff; border: 1px solid var(--bdr); border-radius: 10px; padding: 14px 12px; text-align: center; }
    .sugg-stat-val { font-size:var(--fs-2xl); font-weight: var(--fw-bold); color: var(--g600); }
    .sugg-stat-lbl { font-size:var(--fs-xs); color: var(--txts); margin-top: 2px; }
    .sugg-admin-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .sugg-admin-filter-btn { padding: 5px 12px; border-radius: 16px; border: 1px solid var(--bdr); background: var(--bg); color: var(--txtm); font-size:var(--fs-sm); cursor: pointer; }
    .sugg-admin-filter-btn.on { border-color: var(--g600); background: var(--g600); color: #fff; font-weight: var(--fw-medium); }
    .sugg-admin-list { display: flex; flex-direction: column; gap: 10px; }
    .sugg-admin-item { background: #fff; border: 1px solid var(--bdr); border-radius: 10px; padding: 16px; cursor: pointer; transition: border-color .15s; }
    .sugg-admin-item:hover { border-color: var(--g600); }
    .sugg-admin-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
    .sugg-badge { padding: 2px 8px; border-radius: 10px; font-size:var(--fs-xs); font-weight: var(--fw-bold); }
    .sugg-badge-cat { background: var(--g50); color: var(--g600); }
    .sugg-badge-status { }
    .sugg-badge-검토중 { background: var(--amber-l); color: var(--amber); }
    .sugg-badge-반영중 { background: var(--blue-l); color: var(--blue); }
    .sugg-badge-차후반영예정 { background: var(--purple-l); color: var(--purple); }
    .sugg-badge-미반영 { background: #fafafa; color: #757575; border: 1px solid #e0e0e0; }
    .sugg-badge-반영완료 { background: var(--g50); color: var(--g600); }
    .sugg-admin-item-author { font-size:var(--fs-sm); color: var(--txts); margin-left: auto; }
    .sugg-admin-item-content { font-size:var(--fs-base); color: var(--txt); line-height: var(--lh-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .sugg-admin-item-date { font-size:var(--fs-xs); color: var(--txts); margin-top: 6px; }

    /* 상세 패널 */
    .sugg-detail-panel { background: #fff; border-radius: 14px; width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; margin: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
    .sugg-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--bdr); }
    .sugg-detail-header-title { font-size:var(--fs-md); font-weight: var(--fw-bold); color: var(--txt); }
    .sugg-detail-close { background: none; border: none; font-size:var(--fs-xl); color: var(--txtm); cursor: pointer; line-height: var(--lh-1); }
    .sugg-detail-body { padding: 20px; }
    .sugg-detail-field { margin-bottom: 16px; }
    .sugg-detail-field-label { font-size:var(--fs-xs); font-weight: var(--fw-medium); color: var(--txts); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
    .sugg-detail-field-val { font-size:var(--fs-md); color: var(--txt); line-height: var(--lh-base); }
    .sugg-detail-status-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .sugg-detail-status-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--bdr); background: var(--bg); color: var(--txtm); font-size:var(--fs-sm); cursor: pointer; }
    .sugg-detail-status-btn.on { font-weight: var(--fw-bold); }
    .sugg-detail-status-btn[data-s="검토중"].on { background: var(--amber-l); color: var(--amber); border-color: var(--amber); }
    .sugg-detail-status-btn[data-s="반영중"].on { background: var(--blue-l); color: var(--blue); border-color: var(--blue); }
    .sugg-detail-status-btn[data-s="차후반영예정"].on { background: var(--purple-l); color: var(--purple); border-color: var(--purple); }
    .sugg-detail-status-btn[data-s="미반영"].on { background: #fafafa; color: #757575; border-color: #9e9e9e; }
    .sugg-detail-status-btn[data-s="반영완료"].on { background: var(--g50); color: var(--g600); border-color: var(--g600); }
    .sugg-comment-textarea { width: 100%; min-height: 90px; border: 1px solid var(--bdr); border-radius: 8px; padding: 9px 11px; font-size:var(--fs-base); color: var(--txt); background: var(--bg); resize: vertical; font-family: inherit; box-sizing: border-box; }
    .sugg-comment-textarea:focus { outline: none; border-color: var(--g600); }
    .sugg-save-btn { width: 100%; padding: 11px; background: var(--g600); color: #fff; border: none; border-radius: 8px; font-size:var(--fs-md); font-weight: var(--fw-bold); cursor: pointer; margin-top: 4px; }
    .sugg-save-btn:hover { background: var(--g700, var(--g800)); }
    .sugg-empty { text-align: center; padding: 48px 0; color: var(--txts); font-size:var(--fs-md); }
    @media (max-width: 480px) {
      .sugg-admin-stats { grid-template-columns: repeat(2, 1fr); }
      .sugg-stat-val { font-size:var(--fs-xl); }
    }
/* ── 검색옵션 접기/펴기 ── */
.search-toggle-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 12px; margin-bottom: 8px;
  background: var(--s50); border: 0.5px solid var(--bdr);
  border-radius: 8px; font-size:var(--fs-base); font-weight: var(--fw-medium); color: var(--txts);
  cursor: pointer; font-family: inherit; box-sizing: border-box;
  transition: background .15s;
}
.search-toggle-btn:active { background: var(--s100); }
.search-toggle-btn .stb-arrow {
  font-size:var(--fs-xs); transition: transform .2s; display: inline-block;
}
.search-toggle-btn.open .stb-arrow { transform: rotate(180deg); }
.search-opts-panel {
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease;
  max-height: 0; opacity: 0;
}
.search-opts-panel.open { max-height: 600px; opacity: 1; }


/* ════════════════════════════════════════════════════════════════════
   1. 전역 타이포·배경
   ════════════════════════════════════════════════════════════════════ */
html, body {
  background: var(--page-bg) !important;
  color: var(--txt);
  font-family: 'Pretendard Variable', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'tnum';
  letter-spacing: -0.005em;
}

/* ════════════════════════════════════════════════════════════════════
   2. 상단 바(topbar) · 헤더
   ════════════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--g900) !important;
  padding: 4px 0 !important;
  font-size:var(--fs-xs) !important;
  color: rgba(255,255,255,.55) !important;
}
.live-pill {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #c6d3c6 !important;
}
.dot { background: #7a9a7f !important; }

header {
  background: var(--card-bg) !important;
  border-bottom: 1px solid var(--bdr) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(1.1);
}
.hdr-in { height: 64px !important; gap: 18px !important; }

.logo-text strong {
  font-size:var(--fs-md) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--txt) !important;
  letter-spacing: -0.02em !important;
}
.logo-text span {
  font-size:var(--fs-xs) !important;
  color: var(--txtm) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.team-logo-img-wrap,
.logo-mark {
  background: var(--g50) !important;
  border: 1px solid var(--bdr) !important;
  box-shadow: none !important;
}

.week-badge {
  background: var(--s50) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0 !important;
}

.header-live-clock .clock-date {
  color: var(--txt) !important;
  font-weight: var(--fw-medium) !important;
}

/* ════════════════════════════════════════════════════════════════════
   3. 헤더 버튼 그룹(.hbtn, .ong-btn, .pwa-install-btn, .site-drop-btn)
   ──────────────────────────────────────────────────────────────────
   핵심 버튼 하나만 강조, 나머지는 ghost / outline
   ════════════════════════════════════════════════════════════════════ */
.hbtn,
.pwa-install-btn,
.site-drop-btn {
  background: transparent !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-sm) !important;
  padding: 7px 13px !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.hbtn:hover,
.pwa-install-btn:hover,
.site-drop-btn:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

/* 옹달샘만 primary 느낌으로 유지(핵심 액션) */
.ong-btn {
  background: var(--g600) !important;
  border: 1px solid var(--g600) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-sm) !important;
  padding: 7px 14px !important;
  box-shadow: none !important;
  transition: background .15s ease, transform .1s ease !important;
}
.ong-btn:hover {
  background: var(--g700) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 사용자 뱃지 */
.user-badge {
  background: var(--s50) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 5px 10px 5px 6px !important;
  transition: background .15s ease !important;
}
.user-badge:hover { background: #efedea !important; }

.user-avatar {
  background: var(--g600) !important;
  color: #fff !important;
  font-weight: var(--fw-medium) !important;
  box-shadow: none !important;
}

.user-dropdown {
  border: 1px solid var(--bdr) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
  border-radius: 14px !important;
}

/* 관련사이트 드롭다운 */
.site-drop-panel {
  border: 1px solid var(--bdr) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
  border-radius: 14px !important;
}

/* ════════════════════════════════════════════════════════════════════
   4. 메인 탭 (main-tab)
   ──────────────────────────────────────────────────────────────────
   Notion / Toss 스타일: pill형 이지만 납작하고 조용하게.
   on 상태는 채우기가 아닌 "은근한 배경 + 진한 텍스트"
   ════════════════════════════════════════════════════════════════════ */
.main-tab {
  height: 38px !important;
  padding: 0 16px !important;
  font-size:var(--fs-base) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--txts) !important;
  border-radius: 10px !important;
  background: transparent !important;
  letter-spacing: -0.005em !important;
  transition: background .15s ease, color .15s ease !important;
}
.main-tab:hover {
  background: rgba(0,0,0,.035) !important;
  color: var(--txt) !important;
}
.main-tab.on {
  background: var(--card-bg) !important;
  color: var(--g800) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

/* ══ 메인 탭 빨간 테두리/outline 완전 차단 (모든 상태) ══ */
.main-tab,
.main-tab.on,
.main-tab:hover,
.main-tab:focus,
.main-tab:focus-visible,
.main-tab:focus-within,
.main-tab:active,
.main-tab-wrap,
.main-tab-wrap:hover,
.main-tab-wrap:focus,
.main-tab-wrap:focus-within {
  outline: 0 !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  outline-style: none !important;
  border: 0 !important;
  border-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}
.main-tab:not(.on) {
  box-shadow: none !important;
}

/* 메인탭 드롭다운 */
.main-tab-dropdown {
  border: 1px solid var(--bdr) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04) !important;
  border-radius: 14px !important;
  padding: 6px !important;
}
.main-tab-dropdown-item {
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-base) !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  transition: background .12s ease !important;
}
.main-tab-dropdown-item:hover {
  background: var(--s50) !important;
  color: var(--g700) !important;
}

/* ════════════════════════════════════════════════════════════════════
   5. 서브 탭 (sub-tab) — chip형
   ════════════════════════════════════════════════════════════════════ */
.sub-tab {
  padding: 7px 14px !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 999px !important;
  background: var(--card-bg) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-sm) !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.sub-tab:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
}
.sub-tab.on {
  background: var(--g800) !important;
  border-color: var(--g800) !important;
  color: #fff !important;
}

/* jipum-tab, lab-tab-btn, p2-chip 등 파생 칩들도 톤 통일 */
.jipum-tab {
  padding: 6px 13px !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 999px !important;
  background: var(--card-bg) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-sm) !important;
  transition: all .15s ease !important;
}
.jipum-tab.jipum-tab-on {
  background: var(--g700) !important;
  border-color: var(--g700) !important;
  color: #fff !important;
}

.lab-tab-btn {
  padding: 8px 16px !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  background: var(--card-bg) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-sm) !important;
  transition: all .15s ease !important;
}
.lab-tab-btn:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
}

/* ════════════════════════════════════════════════════════════════════
   6. 카드 (card-list, return-stat, rt-kpi 등)
   ──────────────────────────────────────────────────────────────────
   무신사/Apple 스타일의 부드러운 카드. 테두리 아주 얇게, shadow 없음.
   ════════════════════════════════════════════════════════════════════ */
.card-list,
.card-list-item,
.return-stat,

.card-list-item:hover {
  background: var(--card-bg) !important;
  border-color: #d6d2c8 !important;
}
.card-list-item[data-clickable="true"]:hover,
.card-list-item.is-clickable:hover {
  border-color: var(--g400) !important;
  background: var(--g50) !important;
}

.card-list-title {
  font-weight: var(--fw-bold) !important;
  color: var(--txt) !important;
  letter-spacing: -0.01em !important;
}
.card-list-subtitle {
  color: var(--txtm) !important;
  font-weight: var(--fw-regular) !important;
}
.card-list-meta dt {
  color: var(--txtm) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0 !important;
}
.card-list-meta dd {
  color: var(--txt) !important;
  font-weight: var(--fw-medium) !important;
}

/* return-stat 숫자 크기 */
.return-stat-value {
  font-size:var(--fs-2xl) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--txt) !important;
  letter-spacing: -0.02em !important;
}
.return-stat-label {
  color: var(--txtm) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-xs) !important;
}

/* ════════════════════════════════════════════════════════════════════
   7. 주요 제출 버튼 (btn-submit) · 취소 (btn-cancel)
   ══════════════════════════════════════════════════════════════════════ */
.btn-submit {
  background: var(--g800) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 13px 18px !important;
  font-size:var(--fs-md) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: -0.005em !important;
  box-shadow: none !important;
  transition: background .15s ease, transform .1s ease !important;
}
.btn-submit:hover {
  background: var(--g700) !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-submit:active {
  background: var(--g900) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-cancel {
  border: 1px solid var(--bdr) !important;
  border-radius: 12px !important;
  background: var(--card-bg) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.btn-cancel:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
}

/* ════════════════════════════════════════════════════════════════════
   8. 입력/폼 요소
   ════════════════════════════════════════════════════════════════════ */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
textarea,
select {
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  background: var(--card-bg) !important;
  color: var(--txt) !important;
  font-family: inherit !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--g500) !important;
  box-shadow: 0 0 0 3px rgba(93,130,100,.15) !important;
}

/* ════════════════════════════════════════════════════════════════════
   9. 테이블
   ════════════════════════════════════════════════════════════════════ */
.tbl th {
  color: var(--txtm) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-xs) !important;
  letter-spacing: 0.02em !important;
  border-bottom: 1px solid var(--bdr) !important;
  background: var(--s50) !important;
}
.tbl td { border-bottom: 1px solid #ececea !important; }
.tbl tr:hover td { background: var(--s50) !important; }

/* ════════════════════════════════════════════════════════════════════
   10. 토스트 / 스크롤바 / focus
   ════════════════════════════════════════════════════════════════════ */
.toast {
  background: var(--txt) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: var(--fw-medium) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
}

::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2) !important; }

/* 전역 focus outline 제거 (상단에서 이미 정의) - 중복 선언 비활성화 */

/* ════════════════════════════════════════════════════════════════════
   11. (공유사항 탭 앰버 스타일 — 제거됨: 기본 sub-tab 스타일 사용)
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   12. 로그인 게이트 — 전면 미니멀화
   ════════════════════════════════════════════════════════════════════ */
.login-gate { background: var(--page-bg) !important; }
.login-shell {
  box-shadow: 0 2px 16px rgba(0,0,0,.04) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 20px !important;
  overflow: hidden;
  background: var(--card-bg);
}
.login-title {
  font-weight: var(--fw-bold) !important;
  letter-spacing: -0.02em !important;
}
.login-desc { color: rgba(255,255,255,.8) !important; }
.login-card { background: var(--card-bg) !important; }
.login-brand-text strong {
  font-weight: var(--fw-bold) !important;
  letter-spacing: -0.02em !important;
}

.login-input {
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  background: var(--card-bg) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.login-input:focus {
  outline: none !important;
  border-color: var(--g500) !important;
  box-shadow: 0 0 0 3px rgba(93,130,100,.15) !important;
}
.login-btn {
  background: var(--g800) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: -0.005em !important;
  box-shadow: none !important;
  transition: background .15s ease !important;
}
.login-btn:hover { background: var(--g700) !important; }

.login-request-btn {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--txts) !important;
  border-radius: 12px !important;
  font-weight: var(--fw-medium) !important;
}
.login-request-btn:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
}

/* ════════════════════════════════════════════════════════════════════
   13. 모바일 세부 조정 — 터치 영역·여백·타이포
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .hdr-in { height: 56px !important; padding: 0 14px !important; gap: 10px !important; }
  .logo-text strong { font-size:var(--fs-md) !important; }
  .logo-text span { font-size:var(--fs-xs) !important; }

  .main-tab {
    height: 42px !important;
    padding: 0 14px !important;
    font-size:var(--fs-base) !important;
  }
  .sub-tab {
    padding: 9px 14px !important;
    font-size:var(--fs-sm) !important;
  }
  .btn-submit {
    padding: 15px 18px !important;
    font-size:var(--fs-md) !important;
  }
  .card-list-item { padding: 14px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   14. 하단 공통 — 불필요한 그림자 한번에 제거
   ════════════════════════════════════════════════════════════════════ */
.hbtn,
.sub-tab,
.main-tab:not(.on),
.card-list,
.return-stat,
.user-badge {
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   End of redesign override
   ────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   팀한살림 워크스페이스 · UI 리디자인 오버라이드 Phase 2
   모달·탭·호버 모션 중심 · 원색 제거 · 그라디언트 → 플랫
   Phase 1 뒤에 적용되어 컴포넌트 단위 원색 잔여값을 덮어씀.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   P2-1. main-tabs 컨테이너 (상단 고정 탭바)
   ──────────────────────────────────────────────────────────────────
   기존: blur + 2중 box-shadow → 묵직한 띠
   신규: 얇은 하단 테두리 1px 만, 섀도 제거
   ════════════════════════════════════════════════════════════════════ */
.main-tabs {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--bdr) !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   P2-2. p2-super-tab-btn (생산동향 대분류 탭)
   ──────────────────────────────────────────────────────────────────
   기존: 하단에 원색 g600 var(--g600) 굵은 2.5px 바
   신규: 더 얇은 2px + sage green, 폰트 웨이트 조정
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   P2-3. p2-tab-btn (생산동향 세부탭 - segmented 스타일)
   ──────────────────────────────────────────────────────────────────
   기존: inset 섀도 회색 배경 + 활성 시 다중 섀도 + rgba(46,125,50) 원색 잔여
   신규: 깔끔한 pill-segmented 스타일, 활성은 흰 배경 + 얇은 border
   ════════════════════════════════════════════════════════════════════ */

/* 생산동향 등록 버튼 - flat sage */

/* 생산동향 요약 카드 */

/* 생산동향 배지 → 톤다운 */

/* ════════════════════════════════════════════════════════════════════
   P2-4. 공용 모달 배경 — 블러 통일
   ════════════════════════════════════════════════════════════════════ */
.ong-modal-bg,
.news-config-backdrop,
.wr-modal-bg {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ════════════════════════════════════════════════════════════════════
   P2-5. 옹달샘(ong-modal) — 그라디언트 제거·톤다운
   ══════════════════════════════════════════════════════════════════════ */
.ong-modal {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
}

.ong-modal-head {
  padding: 22px 26px 14px !important;
  border-bottom: 1px solid var(--bdr) !important;
  background: var(--card-bg) !important;
}

.ong-modal-title {
  font-size:var(--fs-xl) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--txt) !important;
  letter-spacing: -0.02em !important;
}

.ong-modal-sub {
  font-size:var(--fs-base) !important;
  color: var(--txtm) !important;
  font-weight: var(--fw-regular) !important;
  line-height: var(--lh-base) !important;
  margin-top: 4px !important;
}

.ong-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid var(--bdr) !important;
  background: var(--card-bg) !important;
  color: var(--txtm) !important;
  transition: background .15s ease, color .15s ease !important;
}
.ong-close:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
}

.ong-modal-body {
  background: var(--card-bg) !important;
  padding: 22px 26px 24px !important;
}

.ong-section {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: none !important;
}

/* 옹달샘 모바일 버튼 원색 그라디언트 → 플랫 sage */
@media (max-width: 640px) {
  .ong-action-buttons .btn-cancel,
  .ong-action-buttons .btn-submit {
    background: var(--g800) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: var(--fw-medium) !important;
    font-size:var(--fs-md) !important;
    box-shadow: none !important;
    transition: background .15s ease !important;
  }
  .ong-action-buttons .btn-cancel {
    background: var(--card-bg) !important;
    border: 1px solid var(--bdr) !important;
    color: var(--txts) !important;
  }
  .ong-action-buttons .btn-submit:hover { background: var(--g700) !important; }
  .ong-action-buttons .btn-cancel:hover {
    background: var(--s50) !important;
    border-color: #d6d2c8 !important;
    color: var(--txt) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   P2-6. 뉴스 모달(news-detail, news-config)
   ════════════════════════════════════════════════════════════════════ */
.news-detail-modal,
.news-config-modal {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
}

.news-detail-head {
  padding: 20px 22px 14px !important;
  border-bottom: 1px solid var(--bdr) !important;
}

.news-detail-title {
  font-size:var(--fs-xl) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--txt) !important;
  letter-spacing: -0.02em !important;
  line-height: var(--lh-base) !important;
}

.news-detail-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid var(--bdr) !important;
  background: var(--card-bg) !important;
  color: var(--txtm) !important;
  transition: background .15s ease, color .15s ease !important;
}
.news-detail-close:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
}

.news-detail-chip {
  background: var(--s50) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

.news-detail-desc {
  background: var(--s50) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 12px !important;
  font-size:var(--fs-md) !important;
  line-height: var(--lh-loose) !important;
  padding: 16px 18px !important;
}


/* ════════════════════════════════════════════════════════════════════
   P2-8. 엑셀 업로드 모달(ctr-upload-modal) — 파랑 원색 제거
   ══════════════════════════════════════════════════════════════════════ */







/* 진행바: 원색 파랑 그라디언트 → sage */


/* ════════════════════════════════════════════════════════════════════
   P2-9. 관리자 PIN 모달(admin-pin-modal)
   ══════════════════════════════════════════════════════════════════════ */
.admin-pin-modal {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.05) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P2-10. 로그인 비디오 오버레이 (login-video)
   ──────────────────────────────────────────────────────────────────
   기존: linear-gradient(135deg, #4a9d53 0%, var(--g600) 100%) 원색 그린
   신규: 다크 sage 톤 오버레이 (가독성 유지하면서 채도 낮춤)
   ════════════════════════════════════════════════════════════════════ */
.login-visual {
  background: linear-gradient(135deg, #3d5c44 0%, #2f4835 100%) !important;
}
.login-visual::before,
.login-visual::after {
  background: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════
   P2-11. translateY 호버 모션 제거
   ──────────────────────────────────────────────────────────────────
   버튼이 "뜨는" 모션 16곳 제거 - Apple/Toss 스타일은 거의 정적
   ══════════════════════════════════════════════════════════════════════ */
.hbtn:hover,
.ong-btn:hover,
.pwa-install-btn:hover,
.site-drop-btn:hover,
.btn-submit:hover,
.btn-cancel:hover,
.main-tab:hover,
.sub-tab:hover,
.jipum-tab:hover,
.lab-tab-btn:hover,
.user-badge:hover,
.edit-btn:hover,
.excel-btn:hover {
  transform: none !important;
}

.hbtn:active:not(:disabled),
.ong-btn:active:not(:disabled),
.btn-submit:active:not(:disabled),
.btn-cancel:active:not(:disabled),
.main-tab:active:not(.on),
.sub-tab:active:not(.on),

/* ════════════════════════════════════════════════════════════════════
   P2-12. 토스트·알림 배너 톤다운
   ══════════════════════════════════════════════════════════════════════ */
.no-permission {
  background: var(--red-l) !important;
  border: 1px solid rgba(185,74,72,.18) !important;
  border-left: 3px solid var(--red) !important;
  color: var(--red) !important;
  border-radius: 10px !important;
  font-weight: var(--fw-medium) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P2-13. 공통 — 모달 내부 section / card 일관화
   ══════════════════════════════════════════════════════════════════════ */
.ong-section,
.news-detail-body .section,

/* ════════════════════════════════════════════════════════════════════
   P2-14. site-drop 내부 링크 정리
   ════════════════════════════════════════════════════════════════════ */
.site-drop-head {
  color: var(--txtm) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-xs) !important;
  letter-spacing: 0.02em !important;
  border-bottom: 1px solid var(--bdr) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P2-15. main-tabs 스크롤 상단 고정 — 얇은 sticky
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 761px) {
  .main-tabs-in { padding: 8px 24px !important; }
}

/* ──────────────────────────────────────────────────────────────────
   End of redesign override phase 2
   ────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   팀한살림 워크스페이스 · UI 리디자인 오버라이드 Phase 3
   옹달샘 내부·stat 카드·버튼 계열·드롭다운·차트 틴트
   Phase 2 뒤에 적용.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   P3-1. 옹달샘 내부 - Hero(인트로)·Kicker·Point
   ──────────────────────────────────────────────────────────────────
   기존: 3중 linear-gradient, 원색 쉐도(rgba(46,125,50)·rgba(76,175,80))
          + 데코 원형 앰버·그린 radial-gradient
   신규: 플랫 sage 틴트 배경, 데코 원형 톤다운
   ════════════════════════════════════════════════════════════════════ */
.ong-hero {
  background: var(--g50) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 22px 22px 20px !important;
}
.ong-hero::before,
.ong-hero::after {
  display: none !important;
}

.ong-kicker {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--g700) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-xs) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  padding: 5px 11px !important;
}

.ong-hero-title {
  font-size:var(--fs-xl) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--txt) !important;
  letter-spacing: -0.025em !important;
  line-height: var(--lh-tight) !important;
  margin-bottom: 8px !important;
}

.ong-hero-desc {
  color: var(--txts) !important;
  font-size:var(--fs-base) !important;
  font-weight: var(--fw-regular) !important;
  line-height: var(--lh-loose) !important;
}

.ong-point {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-xs) !important;
  box-shadow: none !important;
  padding: 5px 10px !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-2. 옹달샘 가이드 박스(3분할)
   ════════════════════════════════════════════════════════════════════ */
.ong-guide-item {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 14px 15px !important;
}
.ong-guide-item strong {
  color: var(--txt) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-base) !important;
}
.ong-guide-item span {
  color: var(--txtm) !important;
  font-size:var(--fs-sm) !important;
  line-height: var(--lh-base) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-3. 옹달샘 입력 필드 · 라벨 · 칩 (데스크톱 공통)
   ──────────────────────────────────────────────────────────────────
   기존: 베이지 살짝 섞인 배경(#fffdfa), 갈색 라벨(#5c4f44), 포커스 링 원색 그린
   신규: 화이트 배경, 중립 라벨, sage 포커스 링
   ════════════════════════════════════════════════════════════════════ */
.ong-input,
.ong-textarea,
.ong-select,
.ong-modal .ong-input,
.ong-modal .ong-textarea,
.ong-modal .ong-select {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  color: var(--txt) !important;
  font-weight: var(--fw-regular) !important;
}

.ong-input:focus,
.ong-textarea:focus,
.ong-select:focus,
.ong-modal .ong-input:focus,
.ong-modal .ong-textarea:focus,
.ong-modal .ong-select:focus {
  outline: none !important;
  border-color: var(--g500) !important;
  box-shadow: 0 0 0 3px rgba(93,130,100,.15) !important;
}

.ong-modal .ong-input::placeholder,
.ong-modal .ong-textarea::placeholder {
  color: var(--txtm) !important;
}

.ong-label,
.ong-modal .ong-label {
  font-size:var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--txts) !important;
  letter-spacing: 0 !important;
}

.ong-chip,
.ong-modal .ong-chip {
  background: var(--card-bg) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  padding: 7px 12px !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.ong-chip:hover,
.ong-modal .ong-chip:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
}
.ong-chip input { accent-color: var(--g600) !important; }

/* 옹달샘 부가 메모 */
.ong-soft-note {
  background: var(--s50) !important;
  border: 1px dashed var(--bdr) !important;
  color: var(--txts) !important;
  border-radius: 10px !important;
  font-size:var(--fs-sm) !important;
  line-height: var(--lh-base) !important;
  padding: 10px 12px !important;
}

.ong-actions-left {
  color: var(--txtm) !important;
  font-size:var(--fs-sm) !important;
}

/* 옹달샘 최근 작성 */
.ong-recent {
  background: var(--s50) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
.ong-recent-title { color: var(--txt) !important; font-weight: var(--fw-medium) !important; }
.ong-recent-meta  { color: var(--txtm) !important; font-size:var(--fs-xs) !important; }
.ong-recent-body  { color: var(--txts) !important; font-size:var(--fs-sm) !important; line-height: var(--lh-base) !important; }

/* ════════════════════════════════════════════════════════════════════
   P3-4. 옹달샘 데스크톱 버튼 (Phase 2 에서는 모바일만 처리됨)
   ──────────────────────────────────────────────────────────────────
   데스크톱에서도 원색 그라디언트 사용 가능성 - 플랫 sage 로 통일
   ════════════════════════════════════════════════════════════════════ */
.ong-action-buttons .btn-submit,
.ong-action-buttons .btn-cancel {
  border-radius: 12px !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-md) !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.ong-action-buttons .btn-submit {
  background: var(--g800) !important;
  color: #fff !important;
  border: none !important;
}
.ong-action-buttons .btn-submit:hover { background: var(--g700) !important; }
.ong-action-buttons .btn-cancel {
  background: var(--card-bg) !important;
  color: var(--txts) !important;
  border: 1px solid var(--bdr) !important;
}
.ong-action-buttons .btn-cancel:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-5. stat 카드 (좌상단 컬러 바)
   ──────────────────────────────────────────────────────────────────
   기존: 2중 섀도 + 상단 3px 원색 바(#2196f3 파랑 잔존)
   신규: 섀도 제거, 상단 바도 톤다운
   ════════════════════════════════════════════════════════════════════ */
.stat {
  border: 1px solid var(--bdr) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
}
.stat::before {
  height: 3px !important;
  background: var(--g500) !important;
}
.stat.red::before    { background: var(--red) !important; }
.stat.amber::before  { background: var(--amber) !important; }
.stat.blue::before   { background: var(--blue) !important; }
.stat.purple::before { background: var(--purple) !important; }

.stat-lbl {
  font-size:var(--fs-xs) !important;
  color: var(--txtm) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}
.stat-val {
  font-family: 'Pretendard Variable','Pretendard Variable',sans-serif !important;
  font-size:var(--fs-3xl) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--txt) !important;
  letter-spacing: -0.02em !important;
  font-feature-settings: 'tnum' !important;
}
.stat-val small {
  font-size:var(--fs-sm) !important;
  color: var(--txtm) !important;
  font-weight: var(--fw-medium) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-6. edit-btn · excel-btn (액션 버튼들)
   ══════════════════════════════════════════════════════════════════════ */
.edit-btn {
  border: 1px solid var(--bdr) !important;
  border-radius: 8px !important;
  background: var(--card-bg) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-xs) !important;
  box-shadow: none !important;
  padding: 5px 10px !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.edit-btn:hover {
  background: var(--amber-l) !important;
  border-color: #e6d2ab !important;
  color: var(--amber) !important;
  box-shadow: none !important;
}
.edit-btn:disabled { opacity: 0.4 !important; box-shadow: none !important; }

.excel-btn {
  border: 1px solid var(--bdr) !important;
  border-radius: 8px !important;
  background: var(--card-bg) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-xs) !important;
  padding: 5px 10px !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.excel-btn:hover {
  background: var(--g50) !important;
  border-color: var(--g200) !important;
  color: var(--g700) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-7. AI 카드 (카드 + 헤더)
   ══════════════════════════════════════════════════════════════════════ */
.ai-card {
  border: 1px solid var(--bdr) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.ai-header {
  background: var(--s50) !important;
  border-bottom: 1px solid var(--bdr) !important;
  padding: 14px 18px !important;
}
.ai-knowledge-panel {
  background: var(--s50) !important;
  border-right: 1px solid var(--bdr) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-9. user-dropdown 내부
   ══════════════════════════════════════════════════════════════════════ */
.ud-item {
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size:var(--fs-base) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--txt) !important;
  transition: background .12s ease !important;
}
.ud-item:hover { background: var(--s50) !important; }
.ud-item.danger { color: var(--red) !important; }
.ud-item.danger:hover { background: var(--red-l) !important; }

.ud-divider {
  background: var(--bdr) !important;
  margin: 4px 6px !important;
}

.ud-profile {
  padding: 14px 14px 12px !important;
  border-bottom: 1px solid var(--bdr) !important;
}
.ud-profile-name { font-weight: var(--fw-medium) !important; color: var(--txt) !important; }
.ud-profile-org  { color: var(--txts) !important; font-size:var(--fs-xs) !important; }
.ud-profile-email{ color: var(--txtm) !important; font-size:var(--fs-xs) !important; }

/* ════════════════════════════════════════════════════════════════════
   P3-10. 체크박스 / 라디오 accent 색 일괄
   ══════════════════════════════════════════════════════════════════════ */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--g600) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-11. 검색 토글 · 옵션 패널
   ══════════════════════════════════════════════════════════════════════ */
.search-toggle-btn {
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  background: var(--card-bg) !important;
  color: var(--txts) !important;
  font-weight: var(--fw-medium) !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.search-toggle-btn:hover {
  background: var(--s50) !important;
  border-color: #d6d2c8 !important;
  color: var(--txt) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-12. myact (내 활동) 탭
   ══════════════════════════════════════════════════════════════════════ */
.myact-tab {
  color: var(--txtm) !important;
  font-weight: var(--fw-medium) !important;
  transition: color .15s ease, border-color .15s ease !important;
}
.myact-tab:hover { color: var(--txt) !important; }
.myact-tab.on {
  color: var(--g800) !important;
  border-bottom-color: var(--g600) !important;
  font-weight: var(--fw-bold) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-13. 최상위 스타일 재확인 — body 배경이 덮인 곳 방지
   ══════════════════════════════════════════════════════════════════════ */
.main-tabs-in > div:first-child {
  gap: 4px !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-14. Chart.js 범례 · 축 — Canvas 가 아닌 DOM 범례 스타일
   ══════════════════════════════════════════════════════════════════════ */
.chart-legend,
.chart-title {
  color: var(--txt) !important;
  font-weight: var(--fw-medium) !important;
  font-size:var(--fs-sm) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P3-15. 인쇄 템플릿 — 출력물은 기존 유지, 단 body 폰트만 Pretendard 일관화
   ══════════════════════════════════════════════════════════════════════ */
@media print {
  body {
    font-family: 'Pretendard Variable','Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',sans-serif !important;
    color: #1c1c1a !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   P3-16. 잔여 전역 다듬기
   ══════════════════════════════════════════════════════════════════════ */
/* 카드들의 과한 하단 외부 섀도 일괄 제거 (stat 제외는 이미 위에서 처리) */
.card,
.card-body,
.card-head {
  box-shadow: none !important;
}

/* 드롭다운 공통 */
[class*="-dropdown"],
[class*="-drop-panel"] {
  border: 1px solid var(--bdr) !important;
  border-radius: 12px !important;
}

/* label 전역 톤 — 업무용 중성 */
label { letter-spacing: 0 !important; }

/* 텍스트 강조 색(원색 그린)이 텍스트 곳곳에 쓰인 경우도 sage로 수렴 */
/* (대상이 너무 많으므로, color:var(--g600) 직접 쓴 소규모 인라인 스타일은 파일 편집 없이 두되,
   클래스 기반인 것들은 위에서 이미 처리했다.) */

/* ──────────────────────────────────────────────────────────────────
   End of redesign override phase 3
   ────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   팀한살림 워크스페이스 · UI 리디자인 오버라이드 Phase 4
   인라인 style 내부의 원색 그린 잔재를 속성 선택자로 덮어씀.
   Chart.js 색은 JS 에서 직접 교체(별도).
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   P4-1. 검색 버튼 · 저장 버튼 등 인라인 배경 var(--g600)
   ──────────────────────────────────────────────────────────────────
   대상:
     - 17788줄 p6 검색 버튼
     - 16566줄 p6Wk1Btn 주간 선택 버튼
     - 14761/17813/17858 연한 그린 태그형 버튼(color:var(--g600) / bg:var(--g50))
   ════════════════════════════════════════════════════════════════════ */
button[style*="background:var(--g600)"],
button[style*="background: var(--g600)"],
[style*="background:var(--g600)"]:not(span) {
  background: var(--g700, #3d5c44) !important;
}

button[style*="background:var(--g50)"],
button[style*="background: var(--g50)"],
[style*="background:var(--g50)"] {
  background: var(--g50, #f2f5f2) !important;
  border-color: var(--g200, #c6d3c6) !important;
}

/* e8f5e9 기반 배지·태그는 sage 톤으로 */
span[style*="background:var(--g50)"],
span[style*="background: var(--g50)"] {
  background: var(--g50, #f2f5f2) !important;
  border-color: var(--g200, #c6d3c6) !important;
  color: var(--g700, #3d5c44) !important;
}

/* f0faf0 기반도 sage neutral */
div[style*="background:#f0faf0"],
[style*="background:#f0faf0"] {
  background: var(--g50, #f2f5f2) !important;
  border-color: var(--g200, #c6d3c6) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P4-2. 인라인 color:var(--g600) / var(--g500) / var(--g400) 텍스트 색상
   ──────────────────────────────────────────────────────────────────
   안내문구·배지 텍스트 색상을 sage로
   ════════════════════════════════════════════════════════════════════ */
[style*="color:var(--g600)"],
[style*="color: var(--g600)"] {
  color: var(--g700, #3d5c44) !important;
}
[style*="color:var(--g500)"],
[style*="color: var(--g500)"] {
  color: var(--g600, #4a6f52) !important;
}
[style*="color:var(--g400)"],
[style*="color: var(--g400)"] {
  color: var(--g500, #5d8264) !important;
}
[style*="color:var(--g800)"],
[style*="color: var(--g800)"] {
  color: var(--g800, #2f4835) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P4-3. 인라인 border 색상
   ══════════════════════════════════════════════════════════════════════ */
[style*="border:1px solid #a5d6a7"],
[style*="border: 1px solid #a5d6a7"],
[style*="border:1.5px solid #a5d6a7"],
[style*="border: 1.5px solid #a5d6a7"] {
  border-color: var(--g200, #c6d3c6) !important;
}
[style*="border:1px solid #c8e6c9"],
[style*="border: 1px solid #c8e6c9"] {
  border-color: var(--g100, #e4ebe4) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P4-4. 토스트 · 알림 — linear-gradient(135deg,var(--g600) 0%,var(--g800) 100%)
   (13969줄 토스트 배너)
   ══════════════════════════════════════════════════════════════════════ */
[style*="linear-gradient(135deg,var(--g600)"],
[style*="linear-gradient(135deg, var(--g600)"],
[style*="linear-gradient(135deg,#4a9d53"] {
  background: var(--g800, #2f4835) !important;
}

/* 원색 그린 계열 섀도 */
[style*="box-shadow:0 10px 24px rgba(27,94,32"],
[style*="box-shadow: 0 10px 24px rgba(27,94,32"] {
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
}

/* ════════════════════════════════════════════════════════════════════
   P4-5. 기타 — accent-color 인라인 원색
   (input type=checkbox style="accent-color:var(--g500)")
   ══════════════════════════════════════════════════════════════════════ */
input[style*="accent-color:var(--g500)"],
input[style*="accent-color: var(--g500)"],
input[style*="accent-color:var(--g600)"],
input[style*="accent-color: var(--g600)"] {
  accent-color: var(--g600, #4a6f52) !important;
}

/* ────────────────────────────────────────────────────────────────────
   End of redesign override phase 4
   ──────────────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════════
   생산안정기금 신청서 탭(수확포기·작물피해·시설피해) PC 레이아웃 정정
   drSwitchTab() 함수가 el.style.display='flex'로 inline 지정하므로
   기본 flex-direction:row 때문에 카드들이 가로로 배치되어 화면이 깨짐.
   PC에서도 세로로 쌓이도록 flex-direction:column 강제.
   모바일은 이미 @media (max-width:640px) 규칙으로 정상 동작함.
   ══════════════════════════════════════════════════════════════════ */
#drTabApplyHarvest,
#drTabApplyCrop,
#drTabApplyFacility {
  flex-direction: column;
  align-items: stretch;
}
#drTabApplyHarvest > .card,
#drTabApplyCrop > .card,
#drTabApplyFacility > .card {
  width: 100%;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   p3 (생산수급동향) 표준 버튼 클래스 — 인라인 스타일 치환용
   원칙: 높이/패딩/폰트/라운드를 토큰으로 고정, 배리언트는 색상만
   ══════════════════════════════════════════════════════════════ */
.p3-btn {
  height: var(--btn-h-md);              /* PC 36 / MO 44 (터치 영역 확보) */
  padding: 0 var(--btn-px-md);
  border-radius: var(--btn-radius);
  font-size: var(--fs-sm);               /* PC 12 / MO 13 */
  font-weight: var(--fw-medium);         /* 600 */
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: all .15s;
  box-sizing: border-box;
  line-height: var(--lh-1);
}
/* ── Primary: 주요 액션 (저장·등록·적용) ── */
.p3-btn-primary {
  background: var(--g700);
  color: #fff;
  border: none;
  font-weight: var(--fw-bold);
}
.p3-btn-primary:hover:not(:disabled) {
  background: var(--g600);
}
/* ── Secondary: 보조 액션 (취소·닫기·초기화) ── */
.p3-btn-secondary {
  background: var(--white);
  color: var(--g700);
  border: 1px solid var(--bdr);
}
.p3-btn-secondary:hover:not(:disabled) {
  border-color: var(--g400);
  background: var(--g50);
}
/* ── Ghost: 툴바용 (업로드·다운로드·보기) ── */
.p3-btn-ghost {
  background: var(--g50);
  color: var(--g700);
  border: 1.5px solid var(--bdr);
}
.p3-btn-ghost:hover:not(:disabled) {
  border-color: var(--g400);
  background: var(--white);
}
/* ── Icon: 좌우 네비·아이콘 전용 (◀ ▶ 등) ── */
.p3-btn-icon {
  width: var(--btn-h-md);
  height: var(--btn-h-md);
  padding: 0;
  border-radius: var(--btn-radius);
  background: var(--white);
  color: var(--txt);
  border: 1px solid var(--bdr);
  font-family: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  box-sizing: border-box;
}
.p3-btn-icon:hover:not(:disabled) {
  background: var(--g50);
  border-color: var(--g400);
}
/* ── label을 버튼처럼 쓰는 경우 (파일 업로드 트리거) ── */
label.p3-btn-primary,
label.p3-btn-secondary,
label.p3-btn-ghost {
  display: inline-flex;
  cursor: pointer;
}
/* ── 비활성 상태는 상위 전역 규칙(.edit-btn:disabled 패턴)이 커버 ── */
.p3-btn:disabled,
.p3-btn-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* ── 크기 변형 (필요 시) ── */
.p3-btn.p3-btn-sm {
  height: var(--btn-h-sm);
  padding: 0 var(--btn-px-sm);
  font-size: var(--fs-xs);
}
.p3-btn.p3-btn-lg {
  height: var(--btn-h-lg);
  padding: 0 var(--btn-px-lg);
  font-size: var(--fs-base);
}

/* ══════════════════════════════════════════════════════════════
   p3 (생산수급동향) 표준 테이블 — 50대 가독성 상향
   - 본문 셀 fs-md (PC 14 / MO 15)
   - 헤더 fs-sm (PC 12 / MO 13) + 600
   - 행 높이 여유 (padding 12 14)
   ══════════════════════════════════════════════════════════════ */
.p3-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.p3-table thead tr {
  background: #f7f6f4;
}
.p3-table th {
  padding: 12px 14px;
  border-bottom: 2px solid var(--bdr);
  font-weight: var(--fw-medium);
  color: var(--txts);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.p3-table th.tl { text-align: left; }
.p3-table th.tc { text-align: center; }
.p3-table th.tr { text-align: right; }
.p3-table tbody tr {
  border-bottom: 1px solid var(--s100);
}
.p3-table tbody tr:last-child {
  border-bottom: none;
}
.p3-table td {
  padding: 12px 14px;
  font-size: var(--fs-md);
  color: var(--txt);
  vertical-align: middle;
}
.p3-table td.tl { text-align: left; }
.p3-table td.tc { text-align: center; }
.p3-table td.tr { text-align: right; }
.p3-table td.note {
  font-size: var(--fs-base);
  color: var(--txts);
}
/* 상태 색상 유틸 (테이블 셀 내부) */
.p3-table .v-danger { color: var(--red); font-weight: var(--fw-medium); }
.p3-table .v-warn   { color: var(--amber); font-weight: var(--fw-medium); }
.p3-table .v-info   { color: var(--blue); font-weight: var(--fw-medium); }

/* ══ p3 상태 배지 (공급·판매 현황 등) ══ */
.p3-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  white-space: nowrap;
}
.p3-badge-danger { background: var(--red-l); color: var(--red); }
.p3-badge-info   { background: var(--blue-l); color: var(--blue); }
.p3-badge-normal { background: var(--g50); color: var(--g600); }
.p3-badge-warn   { background: #fef3c7; color: #92400e; }

/* ══ p3 폼 라벨 (fs-xs → fs-sm 상향) ══
   인라인 label에 클래스 추가 시 자동 적용 */
.p3-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--g700);
  display: block;
  margin-bottom: 4px;
}
/* ══ p3 요약 카드 라벨 (당도검수 요약 등) ══ */
.p3-summary-label {
  font-size: var(--fs-sm);
  color: var(--txtm);
  margin-bottom: 4px;
}
/* ══ p3 빈 상태 본문 메시지 ══ */
.p3-empty-msg {
  font-size: var(--fs-md);
  color: var(--txtm);
}

/* ══════════════════════════════════════════════════════════════
   p3 표준 입력 필드 — 버튼과 높이 정렬
   ══════════════════════════════════════════════════════════════ */
.p3-input,
.p3-select {
  height: var(--btn-h-sm);            /* PC 32 / MO 36 */
  padding: 0 10px;
  border: 1.5px solid var(--bdr);
  border-radius: var(--btn-radius);
  font-size: var(--fs-sm);
  font-family: inherit;
  background: var(--white);
  color: var(--txt);
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.p3-input:focus,
.p3-select:focus {
  border-color: var(--g600);
}
.p3-input::placeholder {
  color: var(--txtm);
}
/* 검색바 라벨 통일 */
.p3-search-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--txts);
  white-space: nowrap;
}

/* ══ 빈 상태(Empty State) — 모든 탭 공통 ══ */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--txts);
  background: #fafafa;
  border: 1px dashed #e0e0e0;
  border-radius: 10px;
  margin: 12px 0;
}
.empty-state .empty-icon {
  font-size: 40px;
  opacity: 0.35;
  margin-bottom: 10px;
  line-height: var(--lh-1);
}
.empty-state .empty-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--txt);
  margin-bottom: 6px;
}
.empty-state .empty-subtitle {
  font-size: var(--fs-sm);
  color: var(--txts);
  margin-bottom: 14px;
  line-height: var(--lh-base);
}
.empty-state .empty-action {
  display: inline-block;
  padding: 8px 18px;
  background: var(--g600);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  font-family: inherit;
  min-height: 36px;
}
.empty-state .empty-action:hover {
  background: var(--g800);
}
.empty-state .empty-action.secondary {
  background: #fff;
  color: var(--txts);
  border: 1px solid var(--bdr);
}
.empty-state .empty-action.secondary:hover {
  background: #f5f5f5;
}
.empty-state-compact {
  padding: 32px 18px;
}

/* ══ 긴급 배지 — 모든 탭 공통 ══ */
.urgent-badge {
  display: inline-block;
  padding: 1px 7px;
  background: #ffebee;
  color: var(--red);
  border: 1px solid #ef9a9a;
  border-radius: 3px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  margin-right: 4px;
  letter-spacing: 0.3px;
  vertical-align: middle;
  line-height: var(--lh-tight);
  white-space: nowrap;
}
.urgent-badge-sm {
  font-size: 9px;
  padding: 0 5px;
}

/* ══ 일정현황 1차 그룹 탭 ══ */
.p6-group-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: #f5f5f5;
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
}
.p6-gtab {
  padding: 9px 22px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--txts);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  font-family: inherit;
  min-height: 38px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.p6-gtab:hover:not(.on) {
  background: rgba(0,0,0,.04);
  color: var(--txt);
}
.p6-gtab.on {
  background: var(--g600);
  color: #ffffff;
  font-weight: var(--fw-bold);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.p6-gtab[data-group="report"].on {
  background: var(--g600);
  color: #ffffff;
}
.p6-gtab[data-group="write"].on {
  background: var(--g600);
  color: #ffffff;
}
@media (max-width: 720px) {
  .p6-group-tabs { width: 100%; }
  .p6-gtab { flex: 1; padding: 8px 10px; font-size: var(--fs-sm); min-height: 36px; }
  /* 주간 보고 주차 선택 카드 모바일 */
  #p6Panel-wrep .p6-wrep-period-card { padding: 14px 14px !important; }
  #p6Panel-wrep .p6-wrep-row { gap: 6px !important; }
  #p6Panel-wrep #p6WrepWeekLabel { font-size: var(--fs-xs) !important; padding: 6px 10px !important; min-width: 0 !important; flex: 1 1 100%; order: 2; }
}

/* ══ 월간 보고(mrep) 모바일 반응형 ══ */
@media (max-width: 720px) {
  #p6Panel-mrep .mrep-filter { padding: 10px 12px; }
  #p6Panel-mrep .mrep-filter > div { gap: 8px !important; }
  #p6Panel-mrep .mrep-mode-btn,
  #p6Panel-mrep .mrep-scope-btn { padding: 6px 10px !important; font-size: var(--fs-xs) !important; min-height: 34px !important; }
  #p6Panel-mrep #mrepMonthLabel { font-size: var(--fs-xs) !important; min-width: 80px !important; padding: 5px 10px !important; }
  #p6Panel-mrep #mrepMonthBox,
  #p6Panel-mrep #mrepCustomBox { flex-wrap: wrap; }
  #p6Panel-mrep #mrepHint { font-size: 11px !important; }
  /* 다중 선택 드롭다운 */
  #p6Panel-mrep #mrepAffMultiWrap { flex: 1 1 100%; }
  #p6Panel-mrep #mrepAffMultiBtn { width: 100%; min-width: 0 !important; }
  #p6Panel-mrep #mrepAffMultiPanel { width: 100%; min-width: 0 !important; }
  #p6Panel-mrep .mrep-item { flex-wrap: wrap; gap: 4px !important; padding: 7px 8px !important; }
  #p6Panel-mrep .mrep-item > input[type="text"] { width: 52px !important; }
  #p6Panel-mrep .mrep-item > textarea { flex: 1 1 100%; min-width: 0 !important; order: 10; margin-top: 4px; }
  #p6Panel-mrep .mrep-item > span { font-size: 10px !important; padding: 3px 6px !important; }
  #p6Panel-mrep .mrep-item > select { min-width: 0; font-size: 10px !important; }
  #p6Panel-mrep #mrepActionBar { padding: 10px 12px !important; }
  #p6Panel-mrep #mrepActionBar button { flex: 1 1 auto; min-width: 90px; padding: 9px 12px !important; font-size: var(--fs-xs) !important; }
  #p6Panel-mrep #mrepActionBar #mrepSaveMsg { flex: 1 1 100%; margin-right: 0 !important; text-align: center; margin-bottom: 4px; }
  #p6Panel-mrep #mrepTitleInput { flex: 1 1 100% !important; font-size: var(--fs-base) !important; }
  #p6Panel-mrep .mrep-section > div:first-child { padding: 8px 12px !important; }
  #p6Panel-mrep .mrep-items { padding: 6px 8px !important; }
  #p6Panel-mrep #mrepSavedList > div > div { flex-wrap: wrap; gap: 6px !important; }
  /* 사진 첨부 섹션 */
  #p6Panel-mrep .mrep-photos-box > div:first-child { padding: 8px 12px !important; }
  #p6Panel-mrep #mrepPhotoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px !important; }
  #p6Panel-mrep .mrep-photo-card > div:first-child { aspect-ratio: 1/1; }
  #p6Panel-mrep .mrep-photo-card select,
  #p6Panel-mrep .mrep-photo-card input { font-size: 11px !important; padding: 3px 5px !important; }
}
@media (max-width: 420px) {
  /* 매우 좁은 화면에서도 2열 유지 (1열은 너무 커짐) */
  #p6Panel-mrep #mrepPhotoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ────── [블록 #2] 원본 index.html 위치 순 ────── */
.dr-photo-actions {
      position: absolute;
      top: 8px;
      left: 0;
      right: 0;
      pointer-events: none
    }

    .dr-photo-actions .dr-photo-icon-btn {
      pointer-events: auto
    }

    .dr-photo-actions .dr-photo-zoom {
      position: absolute;
      left: 8px;
      top: 0
    }

    .dr-photo-actions .dr-photo-del {
      position: absolute;
      right: 8px;
      top: 0
    }

/* ────── [블록 #3] 원본 index.html 위치 순 ────── */
/* ===== Login Overlay ===== */
    .login-gate {
      position: fixed;
      inset: 0;
      z-index: 200000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      background:
        linear-gradient(135deg, rgba(13, 24, 16, 0.9), rgba(8, 18, 9, 0.94));
      backdrop-filter: blur(10px);
    }

    .login-gate.hidden {
      display: none;
    }

    .login-gate::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 20%, rgba(143, 211, 154, 0.22) 0%, rgba(143, 211, 154, 0) 30%),
        radial-gradient(circle at 80% 20%, rgba(232, 160, 32, 0.18) 0%, rgba(232, 160, 32, 0) 30%),
        radial-gradient(circle at 50% 100%, rgba(76, 175, 80, 0.16) 0%, rgba(76, 175, 80, 0) 40%);
    }

    .login-shell {
      position: relative;
      z-index: 1;
      width: min(1160px, 100%);
      min-height: min(760px, 92vh);
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
    }

    .login-visual {
      position: relative;
      background: linear-gradient(135deg, #0f3415 0%, var(--g800) 55%, var(--g600) 100%);
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
    }

    .login-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity .35s ease;
      background: #16361b;
    }

    .login-video.is-ready {
      opacity: 0.42;
    }

    .login-visual::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(8, 24, 10, 0.15) 0%, rgba(8, 24, 10, 0.78) 100%);
    }

    .login-copy {
      position: relative;
      z-index: 1;
      padding: 38px 36px 34px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 14px;
    }

    .login-kicker {
      display: inline-flex;
      align-items: center;
      width: max-content;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.18);
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: 0.02em;
    }

    .login-title {
      font-size:var(--fs-3xl);
      line-height: var(--lh-tight);
      font-weight: var(--fw-bold);
      letter-spacing: -0.03em;
    }

    .login-desc {
      font-size:var(--fs-md);
      line-height: var(--lh-loose);
      color: rgba(255, 255, 255, 0.82);
      max-width: 520px;
    }

    .login-points {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .login-point {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.14);
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: #fff;
    }

    .login-panel {
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px;
    }

    .login-card {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
    }

    .login-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }

    .login-brand-mark {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: var(--g800);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      box-shadow: 0 6px 20px rgba(27,94,32,.28), inset 0 1px 0 rgba(255,255,255,.15);
    }

    .login-brand-text strong {
      display: block;
      font-size:var(--fs-xl);
      color: var(--txt);
      line-height: var(--lh-tight);
    }

    .login-brand-text span {
      display: block;
      font-size:var(--fs-sm);
      color: var(--txtm);
      margin-top: 4px;
    }

    .login-form-title {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: var(--txt);
      letter-spacing: -0.02em;
    }

    .login-form-desc {
      font-size:var(--fs-base);
      line-height: var(--lh-loose);
      color: var(--txts);
      margin-top: 6px;
      margin-bottom: 20px;
    }

    .login-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 14px;
    }

    .login-label {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--txts);
    }

    .login-input {
      width: 100%;
      height: 48px;
      padding: 0 14px;
      border: 0.5px solid rgba(0,0,0,.14);
      border-radius: 12px;
      background: #fafafa;
      font-size:var(--fs-md);
      font-family: 'Pretendard Variable', sans-serif;
      color: var(--txt);
      transition: border-color .18s, box-shadow .18s;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
    }

    .login-input:focus {
      outline: none;
      border-color: var(--g500);
      box-shadow: inset 0 1px 3px rgba(0,0,0,.04), 0 0 0 3px rgba(46,125,50,.12);
      background: #fff;
    }

    .login-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 2px;
    }

    .login-btn {
      height: 52px;
      border: none;
      border-radius: 14px;
      background: var(--g800);
      color: #fff;
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      box-shadow: 0 4px 14px rgba(27,94,32,.22), inset 0 1px 0 rgba(255,255,255,.12);
      transition: transform .18s, box-shadow .18s;
    }

    .login-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 28px rgba(46, 125, 50, 0.22);
    }

    .login-btn:active {
      transform: translateY(0);
    }

    .login-hint {
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--s50);
      border: 1px solid var(--bdr);
      font-size:var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-loose);
    }

    .login-error {
      display: none;
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--red-l);
      border: 1px solid #fbbaba;
      color: var(--red);
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      line-height: var(--lh-base);
    }

    .login-error.show {
      display: block;
    }

    .login-foot {
      font-size:var(--fs-xs);
      color: var(--txtm);
      line-height: var(--lh-loose);
      text-align: center;
      margin-top: 4px;
    }

    .login-request-btn {
      height: 48px;
      border: 1.5px solid var(--g200);
      border-radius: 14px;
      background: #fff;
      color: var(--g700, var(--g600));
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
    }

    .login-request-btn:hover {
      transform: translateY(-1px);
      border-color: var(--g400);
      background: var(--g50);
      box-shadow: 0 10px 20px rgba(46, 125, 50, 0.1);
    }

    .access-request-backdrop {
      position: fixed;
      inset: 0;
      z-index: 210000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(15, 23, 42, 0.56);
      backdrop-filter: blur(6px);
    }

    .access-request-backdrop.show {
      display: flex;
    }

    .access-request-modal {
      width: min(760px, 100%);
      max-height: 92vh;
      overflow: auto;
      background: linear-gradient(180deg, #fffefb 0%, #ffffff 100%);
      border: 1px solid var(--bdr);
      border-radius: 24px;
      box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
    }

    .access-request-head {
      padding: 24px 26px 18px;
      border-bottom: 1px solid var(--bdr);
      background: linear-gradient(135deg, #f7fbf6 0%, #eef7ef 100%);
    }

    .access-request-kicker {
      display: inline-flex;
      align-items: center;
      padding: 6px 12px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #d7e8d7;
      color: var(--g600);
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      margin-bottom: 10px;
    }

    .access-request-title {
      font-size:var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: #18361c;
      line-height: var(--lh-tight);
      letter-spacing: -.02em;
    }

    .access-request-desc {
      margin-top: 8px;
      font-size:var(--fs-base);
      color: #55705a;
      line-height: var(--lh-loose);
    }

    .access-request-body {
      padding: 22px 26px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .access-request-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .access-request-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .access-request-label {
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--txts);
    }

    .access-request-input,
    .access-request-select,
    .access-request-textarea {
      width: 100%;
      padding: 12px 13px;
      border: 1.5px solid var(--bdr);
      border-radius: 12px;
      background: #fff;
      color: var(--txt);
      font-size:var(--fs-base);
      font-family: 'Pretendard Variable', sans-serif;
      transition: border-color .18s, box-shadow .18s, transform .18s;
    }

    .access-request-input:focus,
    .access-request-select:focus,
    .access-request-textarea:focus {
      outline: none;
      border-color: var(--g400);
      box-shadow: 0 0 0 4px rgba(76, 175, 80, .1);
      transform: translateY(-1px);
    }

    .access-request-textarea {
      min-height: 110px;
      resize: vertical;
      line-height: var(--lh-loose);
    }

    .access-request-help {
      font-size:var(--fs-xs);
      color: var(--txtm);
      line-height: var(--lh-loose);
    }

    .access-request-note {
      padding: 14px 16px;
      border: 1px solid var(--g200);
      border-radius: 14px;
      background: var(--g50);
      font-size:var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-loose);
    }

    .access-request-error,
    .access-request-success {
      display: none;
      padding: 12px 14px;
      border-radius: 12px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      line-height: var(--lh-loose);
    }

    .access-request-error.show {
      display: block;
      background: var(--red-l);
      border: 1px solid #fbbaba;
      color: var(--red);
    }

    .access-request-success.show {
      display: block;
      background: var(--g50);
      border: 1px solid var(--g200);
      color: var(--g800);
    }

    .access-request-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }

    .access-request-close {
      padding: 12px 18px;
      border: 1px solid var(--bdr);
      border-radius: 12px;
      background: #fff;
      color: var(--txts);
      cursor: pointer;
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      font-family: 'Pretendard Variable', sans-serif;
    }

    .access-request-submit {
      min-width: 170px;
      padding: 12px 18px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #4a9d53 0%, var(--g600) 100%);
      color: #fff;
      cursor: pointer;
      font-size:var(--fs-md);
      font-weight: var(--fw-bold);
      font-family: 'Pretendard Variable', sans-serif;
    }

    .admin-request-card {
      background: var(--white);
      border: 1px solid var(--bdr);
      border-radius: var(--r12);
      padding: 18px;
      margin-top: 18px
    }

    .admin-request-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px
    }

    .admin-request-stats {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .admin-mini-stat {
      padding: 10px 14px;
      border: 1px solid var(--bdr);
      border-radius: 12px;
      background: var(--s50);
      min-width: 120px
    }

    .admin-mini-stat .lbl {
      font-size:var(--fs-xs);
      color: var(--txtm);
      margin-bottom: 4px
    }

    .admin-mini-stat .val {
      font-size:var(--fs-xl);
      font-weight: var(--fw-bold);
      color: var(--txt);
      line-height: var(--lh-1)
    }

    .admin-request-table {
      width: 100%;
      border-collapse: collapse;
      font-size:var(--fs-sm)
    }

    .admin-request-table th {
      padding: 10px 12px;
      background: var(--s50);
      border-bottom: 1.5px solid var(--bdr);
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--txtm);
      text-align: left;
      white-space: nowrap
    }

    .admin-request-table td {
      padding: 12px;
      border-bottom: 1px solid var(--s100);
      vertical-align: top;
      line-height: var(--lh-loose)
    }

    .admin-request-table tr:hover td {
      background: #f9fcf8
    }

    .admin-request-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .admin-request-btn {
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid var(--bdr);
      background: #fff;
      cursor: pointer;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      font-family: 'Pretendard Variable', sans-serif
    }

    .admin-request-btn.approve {
      border-color: var(--g400);
      color: var(--g700, var(--g600));
      background: var(--g50)
    }

    .admin-request-btn.reject {
      border-color: #f1b0b0;
      color: var(--red);
      background: var(--red-l)
    }

    .admin-request-btn.refresh {
      border-color: var(--blue);
      color: var(--blue);
      background: var(--blue-l)
    }

    .admin-request-empty {
      padding: 28px 16px;
      text-align: center;
      color: var(--txtm);
      font-size:var(--fs-sm)
    }

    .admin-request-note {
      font-size:var(--fs-xs);
      color: var(--txtm);
      line-height: var(--lh-loose)
    }

    /* ── 관리자 페이지 내부 탭 ── */
    .adm-tab-bar{display:flex;gap:0;border-bottom:2px solid var(--bdr);margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .adm-tab-bar::-webkit-scrollbar{display:none}
    .adm-tab-btn{flex-shrink:0;padding:11px 20px;font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--txts);background:transparent;border:none;border-bottom:2.5px solid transparent;margin-bottom:-2px;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s;white-space:nowrap}
    .adm-tab-btn:hover{color:var(--txt)}
    .adm-tab-btn.on{color:var(--g700);border-bottom-color:var(--g600);font-weight:var(--fw-bold)}
    .adm-tab-panel{display:none}
    .adm-tab-panel.on{display:block}
    /* 회원 관리 내부 서브탭 (회원 목록/승인대기/권한/배지 통합) */
    .adm-member-subtabs{
      display:none;
      gap:6px;
      margin-bottom:16px;
      padding:4px;
      background:var(--g50);
      border:1px solid var(--bdr);
      border-radius:10px;
    }
    .adm-member-subtabs.on{display:flex;flex-wrap:wrap}
    .adm-sub-btn{
      flex:1;
      min-width:90px;
      padding:8px 14px;
      font-size:var(--fs-sm);
      font-weight:var(--fw-medium);
      color:var(--txts);
      background:transparent;
      border:none;
      border-radius:7px;
      cursor:pointer;
      font-family:inherit;
      transition:all .15s;
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:5px;
    }
    .adm-sub-btn:hover{background:var(--white);color:var(--txt)}
    .adm-sub-btn.on{background:var(--white);color:var(--g700);font-weight:var(--fw-bold);box-shadow:0 1px 3px rgba(0,0,0,.08)}
    /* ── 회원 이력 탭 ── */
    .act-rank-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:var(--fs-xs);font-weight:var(--fw-bold);background:var(--s50);color:var(--txts)}
    .act-rank-badge.r1{background:#f5c518;color:#fff}
    .act-rank-badge.r2{background:#aaa;color:#fff}
    .act-rank-badge.r3{background:#cd7f32;color:#fff}
    .act-score-bar-wrap{width:80px;height:6px;background:var(--bdr);border-radius:4px;display:inline-block;vertical-align:middle;margin-left:6px}
    .act-score-bar{height:6px;background:var(--g600);border-radius:4px;transition:width .3s}
    .act-score-cell{font-weight:var(--fw-bold);color:var(--g700);font-size:var(--fs-md);white-space:nowrap}
    .adm-card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r12);padding:18px;margin-bottom:14px}
    .adm-card-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
    .adm-ttl{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--txt);margin-bottom:3px}
    .adm-note{font-size:var(--fs-xs);color:var(--txtm);line-height:var(--lh-loose)}
    .adm-stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
    .adm-mini2{flex:1;min-width:88px;background:var(--bg);border:1px solid var(--bdr);border-radius:10px;padding:10px 12px;text-align:center}
    .adm-mini2 .lbl{font-size:var(--fs-xs);color:var(--txts);margin-bottom:3px}
    .adm-mini2 .val{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--txt)}
    .adm-badge2{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:var(--fs-xs);font-weight:var(--fw-medium)}
    .adm-badge2.green{background:var(--g50);color:var(--g700)}
    .adm-badge2.amber{background:var(--amber-l);color:var(--amber)}
    .adm-badge2.red{background:#ffebee;color:var(--red)}
    .adm-badge2.gray{background:var(--bg);color:var(--txts)}
    .adm-sub-ttl{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--txt);margin:16px 0 8px}
    .adm-day-chart{display:flex;align-items:flex-end;gap:3px;height:80px;padding:0 2px}
    .adm-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;height:100%;justify-content:flex-end}
    .adm-bar{width:100%;max-width:32px;background:var(--g300);border-radius:4px 4px 0 0;min-height:3px}
    .adm-bar.today{background:var(--g600)}
    .adm-bar-lbl{font-size:var(--fs-xs);color:var(--txts);white-space:nowrap}
    .adm-bar-cnt{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--txt)}
    .adm-warn-item{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid #ffe0b2;border-radius:10px;background:#fff8f0;margin-bottom:7px;font-size:var(--fs-base)}
    .adm-notice-item{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--bdr);border-radius:10px;margin-bottom:7px;background:#fff}
    .adm-notice-item .title{flex:1;font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--txt)}
    .adm-cfg-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--bdr)}
    .adm-cfg-row:last-child{border-bottom:none}
    .adm-cfg-key{width:160px;flex-shrink:0;font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--txt)}
    .adm-cfg-val{flex:1;font-size:var(--fs-sm);color:var(--txts);font-family:'DM Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .adm-msg-item{padding:11px 13px;border:1px solid var(--bdr);border-radius:10px;margin-bottom:7px;background:#fff}
    .adm-msg-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
    .adm-msg-sender{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--txt)}
    .adm-msg-time{font-size:var(--fs-xs);color:var(--txts)}
    .adm-msg-body{font-size:var(--fs-base);color:var(--txtm)}
    @media(max-width:600px){.adm-tab-btn{padding:10px 13px;font-size:var(--fs-sm)}.adm-cfg-key{width:110px}}
    .admin-login-card {
      background: var(--white);
      border: 1px solid var(--bdr);
      border-radius: var(--r12);
      padding: 18px;
      margin-top: 18px
    }

    .admin-login-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 14px
    }

    .admin-login-item {
      display: grid;
      grid-template-columns: 170px 120px 1fr 180px;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid var(--bdr);
      border-radius: 12px;
      background: linear-gradient(180deg, #fff 0%, #fbfdf9 100%)
    }

    .admin-login-time {
      font-family: 'DM Mono', monospace;
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--g700, var(--g600))
    }

    .admin-login-user {
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--txt)
    }

    .admin-login-meta {
      font-size:var(--fs-sm);
      color: var(--txts);
      line-height: var(--lh-base)
    }

    .admin-login-device {
      font-size:var(--fs-xs);
      color: var(--txtm);
      line-height: var(--lh-base);
      text-align: right;
      word-break: break-word
    }

    .admin-login-empty {
      padding: 24px 14px;
      text-align: center;
      color: var(--txtm);
      font-size:var(--fs-sm);
      border: 1px dashed var(--bdr);
      border-radius: 12px;
      background: var(--s50)
    }

    @media (max-width:980px) {
      .admin-login-item {
        grid-template-columns: 1fr;
        gap: 6px
      }

      .admin-login-device {
        text-align: left
      }
    }

    @media (max-width: 760px) {
      .access-request-grid {
        grid-template-columns: 1fr
      }

      .access-request-head,
      .access-request-body {
        padding-left: 18px;
        padding-right: 18px
      }

      .access-request-actions {
        flex-direction: column-reverse
      }

      .access-request-submit,
      .access-request-close {
        width: 100%
      }
    }

    @media (max-width: 980px) {
      .login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        max-height: 92vh;
        overflow: auto;
      }

      .login-visual {
        min-height: 260px;
      }

      .login-copy {
        padding: 26px 22px 24px;
      }

      .login-title {
        font-size:var(--fs-3xl);
      }

      .login-panel {
        padding: 24px 20px 28px;
      }
    }

    /* ══════════════════════════════════════
       p6 일정현황 모바일 최적화
    ══════════════════════════════════════ */
    /* 필터바: 2행 구조 */
    .p6-filter-bar {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .p6-filter-bar-row1 {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .p6-filter-bar-row1 .p6-nav-group {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .p6-filter-bar-row1 .p6-row1-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    /* 아이콘 버튼 (새로고침/PDF) */
    .p6-icon-btn {
      padding: 5px 10px !important;
      border: 1px solid var(--bdr) !important;
      border-radius: 6px;
      background: var(--white) !important;
      cursor: pointer;
      font-size:var(--fs-sm) !important;
      font-weight: var(--fw-medium) !important;
      color: var(--txts) !important;
      font-family: inherit;
      min-height: 36px;
      white-space: nowrap;
    }
    .p6-icon-btn:hover { background: var(--g50) !important; }
    /* 필터 행(2행) */
    .p6-filter-bar-row2 {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 6px 10px;
      background: var(--g50);
      border: 1px solid var(--bdr);
      border-radius: 8px;
    }
    .p6-filter-bar-row2 .p6-filter-label {
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--txts);
      white-space: nowrap;
      margin-right: 2px;
    }
    .p6-filter-bar .p6-nav-group {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .p6-filter-bar .p6-filter-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .p6-filter-bar .p6-refresh-btn {
      margin-left: auto;
    }

    /* 모바일 카드뷰 (일정현황) */
    .p6-card-list { display: none; }

    /* 주간일정 테이블 헤더 상시 표시 (JS scroll 기반) */
    /* overflow:auto 부모로 인해 CSS sticky가 작동하지 않아 JS translateY로 구현 */
    #p6GrBody thead tr {
      position: relative;
      z-index: 5;
      will-change: transform;
    }
    #p6GrBody thead tr:first-child { z-index: 6; }
    #p6GrBody thead tr:nth-child(2) { z-index: 5; }

    @media (max-width: 768px) {
      /* 페이지 패딩 축소 */
      #p6 > div {
        padding: 14px 12px !important;
        gap: 12px !important;
      }

      /* 필터바 모바일 레이아웃 */
      .p6-filter-bar-row1 {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        gap: 6px;
        align-items: center;
      }
      .p6-filter-bar-row1 .p6-nav-group { grid-column: 1 / 2; }
      .p6-filter-bar-row1 .p6-week-label { grid-column: 2 / 3; text-align: center; }
      .p6-filter-bar-row1 .p6-today-btn  { grid-column: 3 / 4; }
      .p6-filter-bar-row1 .p6-row1-right { grid-column: 4 / 5; }
      .p6-filter-bar-row2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px !important;
      }
      .p6-filter-bar-row2 .p6-filter-label { display: none; }
      .p6-filter-bar-row2 > * {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
        min-height: 36px;
      }
      .p6-filter-bar-row2 > span:last-child {
        grid-column: 1 / -1;
        text-align: left;
      }

      /* 테이블 숨기고 카드 표시 */
      .p6-table-wrap { display: none !important; }
      .p6-card-list  { display: flex; flex-direction: column; gap: 10px; }

      /* 일정 등록 입력행 모바일 */
      .p6wr-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
      }
      .p6wr-row .p6wr-inp {
        width: 100% !important;
        flex: unset !important;
      }
      .p6wr-row .p6wr-row-controls {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        flex-wrap: wrap;
      }
      .p6wr-row .p6wr-row-controls label {
        font-size:var(--fs-base) !important;
        padding: 0 10px !important;
        height: 36px !important;
        min-height: 36px !important;
        border: 1px solid var(--red-m);
        border-radius: 6px;
        background: #fff5f5;
        display: inline-flex !important;
        align-items: center !important;
      }
      .p6wr-row .p6wr-row-controls button[title="행 삭제"] {
        font-size:var(--fs-xl) !important;
        padding: 0 12px !important;
        height: 36px !important;
        min-height: 36px !important;
        background: var(--g50) !important;
        border: 1px solid var(--bdr) !important;
        border-radius: 6px;
        color: var(--txts) !important;
        display: inline-flex !important;
        align-items: center !important;
      }
      .p6wr-row .p6wr-row-controls .p6wr-rep-btn {
        font-size:var(--fs-sm) !important;
        padding: 0 12px !important;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 6px;
        flex: 0 0 auto;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      #p6WrSaveBtn {
        width: 100%;
        font-size:var(--fs-md) !important;
        min-height: 46px !important;
      }
      #p6WrSaveBtn + span, #p6WrSaveMsg {
        text-align: center;
      }
      /* 저장 버튼 sticky footer - 모바일 */
      #p6WrStickyBar {
        position: sticky;
        bottom: 0;
        z-index: 100;
        background: var(--white);
        border-top: 1px solid var(--bdr);
        padding: 10px 14px 14px;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
      }
      /* 모바일에서 패널 내부 저장 버튼 숨김 */
      .p6-wr-save-inner { display: none !important; }

      /* ── 공유사항 모바일 최적화 ── */

      /* 네비 Row1: 2행 그리드 (nav/label/today + 피드/새로고침) */
      #p6Panel-notice .p6-filter-bar-row1 {
        display: grid;
        grid-template-areas:
          "nav label today"
          "right right right";
        grid-template-columns: auto 1fr auto;
        gap: 6px;
        align-items: center;
      }
      #p6Panel-notice .p6-filter-bar-row1 .p6-nav-group { grid-area: nav; }
      #p6Panel-notice .p6-filter-bar-row1 .p6-week-label { grid-area: label; text-align: center; font-size:var(--fs-xs) !important; padding: 5px 8px !important; }
      #p6Panel-notice .p6-filter-bar-row1 > button[onclick*="snGoToday"] { grid-area: today; font-size:var(--fs-xs); padding: 5px 8px; }
      #p6Panel-notice .p6-filter-bar-row1 .p6-row1-right {
        grid-area: right;
        gap: 4px;
        display: flex;
        justify-content: flex-end;
      }
      #snFeedToggleBtn { font-size:var(--fs-xs) !important; padding: 5px 8px !important; white-space: nowrap; }
      #p6Panel-notice .p6-refresh-btn { font-size:var(--fs-xs) !important; padding: 5px 8px !important; }

      /* 공유사항 패널 전체 overflow 방지 */
      #p6Panel-notice {
        min-width: 0;
        overflow-x: hidden;
      }
      #p6Panel-notice > div {
        min-width: 0;
      }
      #snList {
        min-width: 0;
      }
      /* 공유사항 카드 긴 텍스트 줄바꿈 */
      .sn-card, .sn-content {
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: 100%;
      }

      /* 필터 Row2: 2열 그리드 */
      #p6Panel-notice .p6-filter-bar-row2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px !important;
      }
      #p6Panel-notice .p6-filter-bar-row2 .p6-filter-label { display: none; }
      #p6Panel-notice .p6-filter-bar-row2 > * {
        box-sizing: border-box;
        min-height: 38px;
        width: 100%;
      }
      #snAffDropdownWrap { display: block !important; width: 100%; }
      #snAffDropdownBtn  { width: 100%; justify-content: space-between; }
      #snCatDropdownWrap { display: block !important; width: 100%; }
      #snCatDropdownBtn  { width: 100%; justify-content: space-between; }
      #snWrittenToggle   { grid-column: 1 / -1; }

      /* 카드 */
      .sn-card { padding: 11px 12px; margin-bottom: 8px; }
      .sn-card-header { gap: 4px; }
      .sn-card-header-right { gap: 3px; }
      .sn-pin-btn { font-size:var(--fs-sm) !important; padding: 4px 12px !important; min-height: 32px; }
      .sn-vis-badge { font-size:var(--fs-xs) !important; padding: 2px 5px !important; }
      .sn-pri-badge { font-size:var(--fs-xs) !important; padding: 2px 5px !important; }
      .sn-cat-badge { font-size:var(--fs-xs) !important; padding: 2px 5px !important; }
      /* .sn-content 오버라이드 제거 — PC/모바일 모두 메인 정의(15px) 사용 (v1.5.1) */

      /* 핀 섹션 */
      .sn-pin-section { padding: 8px 10px; }

      /* 소속 그룹 헤더 터치 영역 확대 */
      .sn-group-header { padding: 10px 12px; }
      .sn-group-badge  { font-size:var(--fs-xs) !important; padding: 2px 9px !important; }

      /* 읽음 확인자 이름 */

      /* 수정/삭제 버튼 */
      .sn-card .sn-card-footer {
        padding: 6px 12px 9px !important;
        gap: 8px !important;
      }
      .sn-card .sn-card-footer .p2-confirm-list {
        flex: 1 1 100%;
        min-width: 0;
      }
      .sn-card .sn-card-footer .sn-actions {
        flex: 0 0 auto;
        margin-left: auto;
      }
      .sn-btn-edit, .sn-btn-del { min-height: 32px; padding: 4px 12px !important; font-size:var(--fs-sm) !important; }
      .sn-btn-full { display: none; }
      .sn-btn-short { display: inline !important; }

      /* 공유사항 쓰기 폼 모바일 */
      .sn-write-form { padding: 12px 12px !important; }
      .sn-write-form .sn-form-row { gap: 6px; }
      .sn-write-form .sn-form-label { min-width: 46px !important; font-size:var(--fs-sm); }
      .sn-write-form .sn-form-select { flex: 1; min-width: 0; font-size:var(--fs-base); }
      .sn-write-form .sn-form-input[type="date"] { flex: 1; min-width: 100px; font-size:var(--fs-base); }
      /* 중요도+분류 한 행에서 두 행으로 분리 */
      .sn-form-row-selects { flex-wrap: wrap !important; }
      .sn-form-row-selects .sn-form-label:nth-child(3) { margin-left: 0 !important; }

      /* 등록 버튼 sticky footer */
      .sn-write-sticky {
        position: sticky;
        bottom: 0;
        z-index: 50;
        background: var(--white);
        border-top: 1px solid var(--bdr);
        padding: 10px 14px 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.07);
        margin: 0 -14px -14px;
      }
      .sn-write-sticky button { flex: 1; font-size:var(--fs-md) !important; min-height: 46px !important; }
      /* 폼 내부 등록 버튼 숨김 (sticky로 대체) */
      .sn-wr-save-inner { display: none !important; }

      /* ══ 공유사항 탭 오버플로우 방지 ══ */
      /* 1) 카드 내부 긴 텍스트 줄바꿈 강제 */
      #snList, #snList * {
        min-width: 0 !important;
      }
      .sn-card, .sn-content, .sn-period, .sn-card-header-left {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
      }

      /* 2) 카드 헤더 배지 영역 wrap 허용 */
      .sn-card-header {
        flex-wrap: wrap !important;
      }
      .sn-card-header-right {
        flex-wrap: wrap !important;
        max-width: 100%;
      }

      /* 3) 필터바 2행: 드롭다운 + select + 버튼이 한 줄 넘치지 않도록 */
      #p6Panel-notice .p6-filter-bar-row2 > * {
        flex-shrink: 1 !important;
        min-width: 0 !important;
      }
      #p6Panel-notice #snAffDropdownBtn,
      #p6Panel-notice #snCatDropdownBtn,
      #p6Panel-notice #snWrittenToggle {
        max-width: 100%;
      }
      #p6Panel-notice #snAffDropdownBtn span:first-child,
      #p6Panel-notice #snCatDropdownBtn span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* 4) 소속 드롭다운 리스트 창 모바일 화면 밖 방지 */
      #snAffDropdown {
        max-width: calc(100vw - 32px) !important;
        right: 0 !important;
        left: auto !important;
      }

      /* snList 컨테이너 자체 overflow 차단 */
      #snList {
        max-width: 100%;
        overflow-x: hidden;
      }
    }
    /* ── 공유사항 패널 ── */
    .sn-week-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    /* 카드 기본 */
    .sn-card{background:var(--white);border:1px solid var(--bdr);border-radius:10px;padding:14px 16px;margin-bottom:10px;border-left:4px solid var(--bdr);transition:box-shadow .15s,background .15s;position:relative}
    .sn-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.07);background:#fafaf9}
    .sn-card.pri-urgent{border-left-color:var(--red-m)!important;background:linear-gradient(to right,#fff5f5,var(--white) 60px)}
    /* 중요 카드 — 전체 연한 빨강 톤 + 좌측 6px 빨강 + 오른쪽 상단 알약 배지 (2026-04-23 강화) */
    .sn-card.pri-important{
      border:1.5px solid #ef9a9a!important;
      border-left:6px solid #c62828!important;
      background:#fff5f5;
    }
    .sn-card.pri-important:hover{
      background:#ffebee;
      box-shadow:0 2px 12px rgba(198,40,40,0.12);
    }
    .sn-card.pri-normal{border-left-color:var(--g300)}
    /* 내 글 좌측 녹색 강조 (일반 우선순위일 때만) */
    .sn-card.pri-normal.is-own{border-left-color:var(--g500)!important}
    .sn-card.is-pinned{border-top:2px solid var(--g500)}
    .sn-pin-section{background:var(--g50);border:1px solid var(--g200);border-radius:10px;padding:10px 14px;margin-bottom:12px}
    .sn-pin-section-title{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--g700);margin-bottom:8px;display:flex;align-items:center;gap:5px}
    /* 카드 헤더 */
    .sn-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;gap:6px}
    .sn-card-header-left{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
    .sn-card-header-right{display:flex;align-items:center;gap:5px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
    .sn-meta{font-size:var(--fs-sm);color:var(--txts);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .sn-tag-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
    /* 우선순위 배지 */
    .sn-pri-badge{font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:2px 7px;border-radius:10px;border:1px solid}
    .sn-pri-urgent{color:var(--red);background:#ffebee;border-color:#ef9a9a}
    /* 중요 배지 — 진한 빨강 (2026-04-23 강화) */
    .sn-pri-important{
      color:#fff;
      background:#c62828;
      border-color:#c62828;
      padding:3px 10px;
      font-weight:var(--fw-bold);
      letter-spacing:0.3px;
    }
    .sn-pri-normal{display:none}
    /* 카테고리 배지 - 녹색 톤으로 통일 (카테고리별 명도/채도 차이로 구분) */
    .sn-cat-badge{font-size:var(--fs-xs);font-weight:var(--fw-medium);padding:2px 7px;border-radius:10px;background:var(--s100);color:var(--txts);border:1px solid var(--bdr)}
    .sn-cat-supply   {background:var(--g50);color:var(--g800);border-color:#a5d6a7}
    .sn-cat-prod     {background:var(--g50);color:#33691e;border-color:#c5e1a5}
    .sn-cat-sched    {background:#e0f2f1;color:#00695c;border-color:#80cbc4}
    .sn-cat-org      {background:#dcedc8;color:#33691e;border-color:#aed581}
    .sn-cat-decision {background:#f9fbe7;color:#827717;border-color:#e6ee9c}
    .sn-cat-etc      {background:var(--s100);color:var(--txts);border-color:var(--bdr)}
    /* 공개범위 배지 - 회색 톤 다운 (보조 정보) */
    .sn-vis-badge{font-size:var(--fs-xs);font-weight:var(--fw-medium);padding:2px 7px;border-radius:10px;background:#f5f5f5;color:#757575;border:1px solid #e0e0e0}
    .sn-vis-all,.sn-vis-div,.sn-vis-org{background:#f5f5f5;color:#757575;border-color:#e0e0e0}
    /* 핀 버튼 */
    .sn-pin-btn{padding:3px 8px;border:1px solid var(--bdr);border-radius:5px;background:var(--white);color:var(--txts);font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer;font-family:inherit;white-space:nowrap}
    .sn-pin-btn.active{background:var(--g50);color:var(--g700);border-color:var(--g300)}
    /* 본문 - 전체 표시 (PC 15px 고정 — 공유사항 본문 가독성, v1.5.1) */
    .sn-content{font-size:15px;color:var(--txt);line-height:var(--lh-base);white-space:pre-wrap;word-break:break-all}
    /* 기간 배지 (인라인, 헤더 tag-row 내) */
    .sn-period{font-size:var(--fs-xs);color:var(--amber);background:var(--amber-l);border:1px solid #ffcc80;border-radius:10px;padding:2px 7px;display:inline-block;font-weight:var(--fw-medium)}
    /* 하단 액션 바 (읽음 좌 / 수정·삭제 우) */
    .sn-card-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:8px 14px 10px;
      margin-top:6px;
      border-top:0.5px solid var(--bdr);
      flex-wrap:wrap;
    }
    .sn-card-footer .p2-confirm-list{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
      min-width:0;
      flex:1;
    }
    .sn-card-footer .sn-actions{margin-left:auto}
    .sn-actions{display:flex;gap:6px}
    .sn-btn-edit{padding:3px 9px;border:1px solid var(--bdr);border-radius:5px;background:var(--white);color:var(--txts);font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer;font-family:inherit;white-space:nowrap}
    .sn-btn-del{padding:3px 9px;border:1px solid #ffcdd2;border-radius:5px;background:var(--white);color:var(--red);font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer;font-family:inherit;white-space:nowrap}
    /* 하트 버튼: 기본 회색 테두리, 내가 누른 상태(mine)면 빨간 배경 필(pill) */
    .sn-card .p2-confirm-item{
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:3px 10px;
      border-radius:16px;
      border:1px solid var(--bdr);
      background:var(--white);
      cursor:pointer;
      font-size:var(--fs-sm);
      color:var(--txts);
      transition:all .15s;
      user-select:none;
    }
    .sn-card .p2-confirm-item:hover{background:#fafafa}
    .sn-card .p2-confirm-item.mine{background:var(--heart);border-color:var(--heart);color:#fff}
    .sn-card .p2-confirm-item.mine:hover{background:var(--heart-hover);border-color:var(--heart-hover)}
    .sn-card .p2-heart{
      font-size:var(--fs-md);
      color:#bdbdbd;
      line-height:var(--lh-1);
      transition:color .18s,transform .15s;
    }
    .sn-card .p2-confirm-item.mine .p2-heart{color:#fff}
    .sn-card .p2-confirm-item:active .p2-heart{transform:scale(1.25)}
    .sn-card .p2-count{font-size:var(--fs-sm);font-weight:var(--fw-bold);min-width:10px}
    /* 읽은 사람 이름 목록 - 단순 텍스트 (클릭 불가) */
    .sn-card .p2-confirm-names{
      font-size:var(--fs-sm);
      color:var(--txts);
      margin-left:4px;
    }
    .sn-empty{text-align:center;padding:32px 0;color:var(--txts);font-size:var(--fs-base)}
    /* 소속 그룹 헤더 */
    .sn-group-header{display:flex;align-items:center;justify-content:space-between;margin:14px 0 8px;padding:6px 10px;background:var(--s50);border:1px solid var(--bdr);border-radius:7px;cursor:pointer;user-select:none}
    .sn-group-header:first-child{margin-top:0}
    .sn-group-title{display:flex;align-items:center;gap:7px}
    .sn-group-badge{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--g700);background:var(--g100);border:1px solid var(--g300);border-radius:20px;padding:2px 10px}
    .sn-group-cnt{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--txts)}
    .sn-group-chevron{font-size:var(--fs-xs);color:var(--txts);transition:transform .2s}
    .sn-group-chevron.collapsed{transform:rotate(-90deg)}
    .sn-group-body{overflow:hidden;transition:max-height .25s ease}
    /* 피드뷰 */
    .sn-feed-toggle{padding:5px 12px;border:1px solid var(--bdr);border-radius:6px;background:var(--white);cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--txts);font-family:inherit;min-height:34px;white-space:nowrap;transition:all .12s}
    .sn-feed-toggle.active{background:var(--g600);color:#fff;border-color:var(--g600)}
    /* 작성 폼 */
    .sn-write-box{background:var(--s50);border:1px solid var(--bdr);border-radius:10px;padding:14px 16px;margin-top:16px}
    .sn-write-box-title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--txt);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--bdr)}
    .sn-form-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
    .sn-form-label{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--txts);min-width:58px;flex-shrink:0}
    .sn-form-input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--bdr);border-radius:6px;font-size:var(--fs-sm);font-family:inherit;color:var(--txt);background:var(--white)}
    .sn-form-select{padding:7px 10px;border:1px solid var(--bdr);border-radius:6px;font-size:var(--fs-sm);font-family:inherit;color:var(--txt);background:var(--white);cursor:pointer}
    .sn-form-textarea{width:100%;padding:8px 10px;border:1px solid var(--bdr);border-radius:6px;font-size:var(--fs-base);font-family:inherit;color:var(--txt);background:var(--white);resize:vertical;min-height:80px;box-sizing:border-box}
    .sn-vis-radio{display:flex;gap:8px;flex-wrap:wrap}
    .sn-vis-radio label{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--txts);cursor:pointer;padding:6px 12px;border:1.5px solid var(--bdr);border-radius:20px;background:var(--white);transition:all .15s;user-select:none}
    .sn-vis-radio label:has(input:checked).vis-all{color:var(--blue);background:var(--blue-l);border-color:var(--blue-l)}
    .sn-vis-radio label:has(input:checked).vis-div{color:var(--amber);background:var(--amber-l);border-color:#ffcc80}
    .sn-vis-radio label:has(input:checked).vis-org{color:var(--purple);background:var(--purple-l);border-color:#ce93d8}
    .sn-vis-radio label:hover{border-color:var(--g400);background:var(--g50)}
    .sn-vis-radio input[type=radio]{display:none}

    /* ════════════════════════════════════════════════════════════════════
       배지 스택 + 팝오버 (공간 절약형)
       ──────────────────────────────────────────────────────────────────
       여러 개의 배지를 겹쳐 보여주고, 클릭 시 전체 목록을 드롭다운으로 표시.
       이름 텍스트가 테이블 칸에서 잘리는 문제를 해결.
       ════════════════════════════════════════════════════════════════════ */
    .hs-badge-stack{
      display:inline-flex;
      align-items:center;
      vertical-align:middle;
      cursor:pointer;
      margin-right:3px;
      line-height:var(--lh-1);
      user-select:none;
      transition:transform .12s ease;
      position:relative;
    }
    .hs-badge-stack:hover{transform:translateY(-1px)}
    .hs-badge-stack .hs-badge-ico{
      font-size:var(--fs-md);
      line-height:var(--lh-1);
      display:inline-block;
    }
    /* 여러 개일 때 아이콘 우측 하단에 작은 그린 점을 표시해 "더 있음"을 암시 */
    .hs-badge-stack--multi::after{
      content:'';
      position:absolute;
      right:-2px;
      bottom:-1px;
      width:6px;
      height:6px;
      background:var(--g600);
      border:1.5px solid var(--white);
      border-radius:50%;
      box-sizing:border-box;
      pointer-events:none;
    }
    /* 팝오버 */
    .hs-badge-popover{
      position:absolute;
      z-index:9999;
      min-width:200px;
      max-width:280px;
      background:var(--white);
      border:1px solid var(--bdr);
      border-radius:12px;
      box-shadow:0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
      opacity:0;
      transform:translateY(-4px) scale(.98);
      transition:opacity .15s ease, transform .15s ease;
      pointer-events:none;
      overflow:hidden;
    }
    .hs-badge-popover.show{
      opacity:1;
      transform:translateY(0) scale(1);
      pointer-events:auto;
    }
    .hs-badge-popover-head{
      padding:10px 14px 8px;
      font-size:var(--fs-xs);
      font-weight:var(--fw-bold);
      color:var(--txts);
      letter-spacing:.2px;
      border-bottom:1px solid var(--bdr);
      background:var(--s50);
    }
    .hs-badge-popover-list{
      padding:4px;
      max-height:280px;
      overflow-y:auto;
    }
    .hs-badge-popover-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 10px;
      border-radius:8px;
      transition:background .1s ease;
    }
    .hs-badge-popover-item:hover{background:var(--s50)}
    .hs-badge-popover-ico{
      flex-shrink:0;
      width:28px;
      height:28px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:var(--fs-xl);
      background:var(--g50);
      border-radius:50%;
      line-height:var(--lh-1);
    }
    .hs-badge-popover-text{
      flex:1;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .hs-badge-popover-label{
      font-size:var(--fs-base);
      font-weight:var(--fw-medium);
      color:var(--txt);
      line-height:var(--lh-tight);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .hs-badge-popover-year{
      font-size:var(--fs-xs);
      color:var(--txts);
      font-weight:var(--fw-medium);
    }
    @media (max-width:640px){
      .hs-badge-popover{
        min-width:180px;
        max-width:calc(100vw - 16px);
      }
      .hs-badge-stack .hs-badge-ico{font-size:var(--fs-base)}
    }

    /* ════════════════════════════════════════════════════════════════════
       프로필 버튼 아이콘화 (시안 1 — 원형 사람 아이콘)
       ──────────────────────────────────────────────────────────────────
       기존 .user-badge(가로형 이름+부서)를 44x44 원형 그린 버튼으로 변경.
       이름/부서 텍스트는 드롭다운 내부에서 확인 (시각적 숨김).
       ════════════════════════════════════════════════════════════════════ */
    .user-badge.user-badge--icon{
      width:44px !important;
      height:44px !important;
      min-width:44px !important;
      max-width:44px !important;
      padding:0 !important;
      gap:0 !important;
      border-radius:50% !important;
      background:var(--g600) !important;
      border:1px solid var(--g600) !important;
      box-shadow:0 1px 3px rgba(47,122,74,.20) !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      transition:background .15s ease !important;
      box-sizing:border-box !important;
    }
    .user-badge.user-badge--icon:hover{
      background:var(--g700) !important;
      border-color:var(--g700) !important;
    }
    .user-badge.user-badge--icon .user-badge-ico{
      width:22px;
      height:22px;
      color:#fff;
      flex-shrink:0;
      display:block;
    }
    .user-badge.user-badge--icon .user-avatar--hidden,
    .user-badge.user-badge--icon .user-info--hidden{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      padding:0 !important;
      margin:-1px !important;
      overflow:hidden !important;
      clip:rect(0,0,0,0) !important;
      white-space:nowrap !important;
      border:0 !important;
    }
    .user-badge.user-badge--icon .user-dropdown{
      right:0 !important;
      top:calc(100% + 10px) !important;
    }
    @media (max-width:640px){
      .user-badge.user-badge--icon{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        max-width:40px !important;
      }
      .user-badge.user-badge--icon .user-badge-ico{
        width:20px;
        height:20px;
      }
    }

/* ────── [블록 #4] 원본 index.html 위치 순 ────── */
.diary-work-btn {
      padding: 8px 14px;
      border: 1.5px solid var(--bdr);
      border-radius: 20px;
      font-size:var(--fs-base);
      font-weight: var(--fw-medium);
      background: #fff;
      cursor: pointer;
      font-family: 'Pretendard Variable', sans-serif;
      color: var(--txts);
      transition: all .15s
    }

    .diary-work-btn.on {
      background: var(--g600);
      border-color: var(--g600);
      color: #fff
    }

    .diary-photo-slot {
      display: block;
      aspect-ratio: 1;
      border: 2px dashed var(--bdr);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      background: var(--s50);
      transition: border-color .15s
    }

    .diary-photo-slot:hover {
      border-color: var(--g400)
    }

    .diary-photo-slot.has-img {
      border-style: solid;
      border-color: var(--g400)
    }

    .dps-inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center
    }

    .diary-card {
      background: #fff;
      border: 1px solid var(--bdr);
      border-radius: 14px;
      padding: 16px;
      cursor: pointer;
      transition: box-shadow .15s
    }

    .diary-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, .1)
    }

    .diary-card-date {
      font-size:var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--g600)
    }

    .diary-card-producer {
      font-size:var(--fs-lg);
      font-weight: var(--fw-bold);
      color: var(--txt);
      margin: 4px 0
    }

    .diary-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin: 8px 0
    }

    .diary-card-tag {
      padding: 3px 10px;
      border-radius: 20px;
      font-size:var(--fs-xs);
      font-weight: var(--fw-bold);
      background: var(--g50);
      color: var(--g600);
      border: 1px solid var(--g100)
    }

    .diary-card-preview {
      font-size:var(--fs-base);
      color: var(--txts);
      line-height: var(--lh-base);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .diary-year-group {
      margin-bottom: 20px
    }

    .diary-year-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size:var(--fs-sm);
      font-weight: var(--fw-bold);
      background: var(--g600);
      color: #fff;
      margin-bottom: 10px
    }

    /* ════════════ 영농일지 모바일 반응형 (≤640px) ════════════
       #labDiaryInner 는 연구실(labDiaryMount)과 독립 페이지(p_diary) 양쪽에
       이동·마운트되므로 이 스코프 하나로 두 케이스 모두 커버됨.
    */
    @media (max-width: 640px) {
      /* 페이지 좌우 패딩 축소 */
      #labDiaryInner { padding: 14px 10px !important; }

      /* 모든 2열 고정 그리드 → 1열로 (검색 필터 상단 2행, 연간 출력 2블록) */
      #labDiaryInner div[style*="grid-template-columns:1fr 1fr"],
      #labDiaryInner div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* 날짜 조회 4열 그리드(auto auto 1fr auto) → 세로 적층 */
      #labDiaryInner div[style*="grid-template-columns:auto auto 1fr auto"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }
      /* 이 그리드 안의 '빈 스페이서' 와 '초기화 버튼'이 전체 폭을 차지하도록 */
      #labDiaryInner div[style*="grid-template-columns:auto auto 1fr auto"] > div:empty { display: none !important; }
      #labDiaryInner div[style*="grid-template-columns:auto auto 1fr auto"] > button {
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        width: 100% !important;
      }
      /* 날짜 입력 박스가 auto 폭으로 작게 잡히던 문제 해결 */
      #labDiaryInner input[type="date"] { width: 100% !important; box-sizing: border-box !important; }

      /* 7일 날씨: 가로 스크롤 스냅 (한 화면 3.5칸) — 터치 친화 */
      #labDiaryInner #dwWeatherRow {
        grid-template-columns: repeat(7, 28vw) !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px;
      }
      #labDiaryInner #dwWeatherRow > div { scroll-snap-align: start; min-width: 0; }
      /* '지역을 선택하면…' 안내문(grid-column:1/-1)은 전체 폭 유지 */
      #labDiaryInner #dwWeatherRow > div[style*="grid-column:1/-1"],
      #labDiaryInner #dwWeatherRow > div[style*="grid-column: 1/-1"] {
        min-width: 100% !important;
      }

      /* 날씨 지역 선택 드롭다운: max-width 해제 (모바일에선 한 줄 단독 배치) */
      #labDiaryInner #dwLocSelect { max-width: none !important; width: 100% !important; }

      /* 헤더: 타이틀 영역과 일지쓰기 버튼 전체 폭 */
      #labDiaryInner > div:first-child > button { width: 100% !important; justify-content: center !important; }

      /* 조회결과 요약 액션(인쇄·PDF) 버튼 폭 */
      #labDiaryInner #annResultSummary button { flex: 1 1 140px !important; }

      /* 서브탭 스크롤 (탭이 많으면 넘침) */
      #labDiaryInner .sub-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
      #labDiaryInner .sub-tabs .sub-tab { flex-shrink: 0 !important; white-space: nowrap; }

      /* 카드 내 긴 태그·텍스트 오버플로우 방지 */
      #labDiaryInner .diary-card { padding: 14px !important; }
      #labDiaryInner .diary-card, #labDiaryInner .diary-card * { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
    }

/* ────── [블록 #5] 원본 index.html 위치 순 ────── */
.scroll-top-btn {
      position: fixed;
      right: 20px;
      bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      z-index: var(--z-sticky);
      width: 44px;
      height: 44px;
      min-height: 44px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.15);
      background: var(--g700);
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 4px 14px rgba(27,94,32,0.28),
        0 1px 3px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.14);
      opacity: 0;
      transform: translateY(8px) scale(0.96);
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease, background .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .scroll-top-btn.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .scroll-top-btn:hover {
      background: var(--g800);
      box-shadow:
        0 6px 18px rgba(27,94,32,0.35),
        0 2px 6px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.18);
    }
    .scroll-top-btn:active {
      transform: translateY(1px) scale(0.98);
    }
    .scroll-top-btn:focus-visible {
      outline: 2px solid var(--g400);
      outline-offset: 3px;
    }
    .scroll-top-btn svg {
      width: 20px;
      height: 20px;
      display: block;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
    @media (max-width: 760px) {
      .scroll-top-btn {
        right: 16px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .scroll-top-btn {
        transition: opacity .15s linear;
        transform: none;
      }
      .scroll-top-btn.is-visible { transform: none; }
    }

/* ────── [블록 #6] 원본 index.html 위치 순 ────── */
.cm-ac-panel{
    position:fixed;
    background:#fff;border:1px solid var(--bdr,#e5e5e5);border-radius:8px;
    box-shadow:0 6px 20px rgba(0,0,0,0.12);
    max-height:260px;overflow-y:auto;z-index:999999;
    display:none;font-family:inherit;
  }
  .cm-ac-panel.on{display:block}
  .cm-ac-item{
    padding:10px 12px;font-size:var(--fs-base);color:var(--txt,#222);
    cursor:pointer;border-bottom:1px solid var(--bdr,#eee);
    line-height:var(--lh-tight);
  }
  .cm-ac-item:last-child{border-bottom:0}
  .cm-ac-item:hover,.cm-ac-item.active{background:var(--s50,#f5f5f5)}
  .cm-ac-item b{color:var(--g700,#3B6D11);font-weight:var(--fw-bold)}
  .cm-ac-empty{
    padding:16px 14px;font-size:var(--fs-sm);color:var(--txts,#777);
    text-align:center;line-height:var(--lh-base);
  }
  .cm-ac-empty strong{color:var(--red-m);display:block;margin-bottom:4px;font-size:var(--fs-base)}
  .cm-ac-loading{padding:14px;font-size:var(--fs-sm);color:var(--txts,#777);text-align:center}
  .cm-ac-input-error{border-color:var(--red-m) !important;background:#fff5f5 !important}
  /* 모바일: 화면 하단 시트로 고정 (입력칸을 절대 가리지 않게) */
  .cm-ac-panel.cm-ac-mobile{
    left:0 !important; right:0 !important; width:100% !important;
    border-radius:12px 12px 0 0;
    border-left:0; border-right:0; border-bottom:0;
    box-shadow:0 -4px 20px rgba(0,0,0,0.12);
  }
  .cm-ac-mobile-head{
    position:sticky; top:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; background:#fff;
    border-bottom:1px solid var(--bdr,#eee);
    font-size:var(--fs-sm); color:var(--txts,#777);
  }
  .cm-ac-mobile-head .cm-ac-mobile-q{font-weight:var(--fw-bold);color:var(--txt,#222)}
  .cm-ac-mobile-head .cm-ac-mobile-close{
    background:none;border:none;font-size:var(--fs-xl);color:var(--txtm,#888);
    cursor:pointer;line-height:var(--lh-1);padding:4px 8px;
  }
  @media (max-width:640px){
    .cm-ac-panel{max-height:40vh}
    .cm-ac-item{padding:12px;font-size:var(--fs-md)}
  }

/* ═══════════════════════════════════════════════════════════════════
   마이크로 인터랙션 세트 v1 (2026-04-23)
   원칙: 조용하게 / 빠르게 (120~200ms) / ease-out / 기능 방해 금지
   접근성: prefers-reduced-motion 전 효과 비활성
   ═══════════════════════════════════════════════════════════════════ */

/* [1] 버튼 클릭 피드백 — 살짝 눌림 */
.btn {
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, transform .08s ease-out,
              box-shadow .15s ease;
}
.btn:active {
  transform: scale(0.97);
}

/* [2] 모달 등장 — 상자 부드러운 fadeUp + [3] 백드롭 페이드 */
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalBoxIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal-bg.is-open {
  animation: modalBackdropIn .18s ease-out;
}
.modal-bg.is-open .modal-box {
  animation: modalBoxIn .22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* modal-bottom (바텀시트)는 하단에서 슬라이드 업 */
@keyframes modalBottomIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-bg.modal-bottom.is-open .modal-box {
  animation: modalBottomIn .24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* [4] 하트 · 확인 버튼 클릭 피드백 — 기쁨의 scale */
.p2-heart,
.p2-confirm-item {
  transition: transform .12s ease-out, background .15s ease,
              border-color .15s ease, color .15s ease;
}
.p2-heart:active,
.p2-confirm-item:active {
  transform: scale(1.12);
}
/* mine 상태 토글 시 잠깐 펄스 */
@keyframes heartPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.p2-confirm-item.mine-just-added {
  animation: heartPulse .35s ease-out;
}

/* [5] 카드 hover — 부드러운 그림자 상승 (마우스 장치만) */
.sn-card,
.ds-card {
  transition: box-shadow .18s ease, transform .18s ease,
              border-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sn-card:hover,
  .ds-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    transform: translateY(-1px);
  }
}

/* [접근성] 모션 줄이기 OS 설정 대응 — 위 모든 효과 비활성 */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .modal-bg.is-open,
  .modal-bg.is-open .modal-box,
  .modal-bg.modal-bottom.is-open .modal-box,
  .p2-heart,
  .p2-confirm-item,
  .p2-confirm-item.mine-just-added,
  .sn-card,
  .ds-card {
    animation: none !important;
    transition: none !important;
  }
  .btn:active,
  .p2-heart:active,
  .p2-confirm-item:active,
  .sn-card:hover,
  .ds-card:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   마이크로 인터랙션 세트 v2 (2026-04-23) — 6~12번 확장
   ═══════════════════════════════════════════════════════════════════ */

/* [6] 입력 focus — 부드러운 border 전환 (기존 scattered transition 통일) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* [7] 체크박스·라디오 클릭 피드백 */
input[type="checkbox"],
input[type="radio"] {
  transition: transform .08s ease-out;
}
input[type="checkbox"]:active,
input[type="radio"]:active {
  transform: scale(0.92);
}

/* [8] 저장 성공 피드백 유틸 — JS에서 .save-success-flash 클래스 잠깐 부여
   사용법: el.classList.add('save-success-flash'); setTimeout(()=>el.classList.remove('save-success-flash'), 600); */
@keyframes saveSuccessFlash {
  0%   { background-color: transparent; }
  30%  { background-color: rgba(126, 170, 80, 0.25); }
  100% { background-color: transparent; }
}
.save-success-flash {
  animation: saveSuccessFlash .6s ease-out;
}

/* [9] 드롭다운 패널 열림 — slideDown */
@keyframes dropdownSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ds-multidrop-panel.is-open,
.ds-multidrop-panel[style*="display: block"],
.ds-multidrop-panel[style*="display:block"] {
  animation: dropdownSlideDown .15s ease-out;
  transform-origin: top;
}

/* [10] 탭 전환 — 활성 탭 아래 underline 슬라이드 (없는 환경엔 무해)
   서브탭은 평평한 라인 형태가 많으므로 sub-tab에만 적용 */
.sub-tab {
  position: relative;
  transition: color .18s ease, background .18s ease;
}
.sub-tab::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -1px;
  height: 2px;
  background: var(--g600);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 2px;
  pointer-events: none;
}
.sub-tab.on::after,
.sub-tab.active::after {
  transform: scaleX(1);
}

/* [11] 리스트 아이템 순차 등장 — JS 로딩 직후 잠깐 stagger
   사용법: 부모에 .stagger-in 추가 → 자식 .sn-card 순서대로 등장 */
@keyframes staggerFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.stagger-in > .sn-card {
  animation: staggerFadeIn .28s ease-out backwards;
}
.stagger-in > .sn-card:nth-child(1)  { animation-delay: 0.00s; }
.stagger-in > .sn-card:nth-child(2)  { animation-delay: 0.04s; }
.stagger-in > .sn-card:nth-child(3)  { animation-delay: 0.08s; }
.stagger-in > .sn-card:nth-child(4)  { animation-delay: 0.12s; }
.stagger-in > .sn-card:nth-child(5)  { animation-delay: 0.16s; }
.stagger-in > .sn-card:nth-child(6)  { animation-delay: 0.20s; }
.stagger-in > .sn-card:nth-child(7)  { animation-delay: 0.24s; }
.stagger-in > .sn-card:nth-child(8)  { animation-delay: 0.28s; }
.stagger-in > .sn-card:nth-child(n+9) { animation-delay: 0.30s; }

/* [12] 토스트 — fadeInDown (기존 .toast.show에 보강) */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
/* 기존 .toast는 bottom 고정이라 그대로 두고, 새 .toast-top 변형 제공 */
.toast-top {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--g800);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast-top.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* [접근성] 모션 줄이기 OS 설정 — v2 확장분도 비활성 */
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"],
  input[type="radio"],
  .save-success-flash,
  .ds-multidrop-panel,
  .sub-tab::after,
  .stagger-in > .sn-card,
  .toast-top {
    animation: none !important;
    transition: none !important;
  }
  input[type="checkbox"]:active,
  input[type="radio"]:active {
    transform: none !important;
  }
  .sub-tab.on::after,
  .sub-tab.active::after {
    transform: scaleX(1) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   월간 일정 달력 뷰 (2026-04-23)
   7×주수 그리드, 각 칸에 이름+제목 줄줄이, 초과는 +N
   중요(urgent) 일정은 빨간 점 표시
   ═══════════════════════════════════════════════════════════════════ */

/* 뷰 전환 토글 */
.p6-view-toggle-btn {
  transition: background .15s ease, color .15s ease;
}

/* 달력 컨테이너 */
.p6mo-cal-wrap {
  border: 1px solid var(--bdr);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}

/* 요일 헤더 */
.p6mo-cal-weekheader {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--g50);
  border-bottom: 1px solid var(--bdr);
}
.p6mo-cal-weekheader-cell {
  padding: 10px 8px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--txts);
  border-right: 1px solid var(--bdr);
}
.p6mo-cal-weekheader-cell:last-child { border-right: none; }
.p6mo-cal-weekheader-cell.sun { color: var(--red); }
.p6mo-cal-weekheader-cell.sat { color: var(--blue); }

/* 달력 그리드 */
.p6mo-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(190px, auto);
}
.p6mo-cal-cell {
  border-right: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  padding: 6px 6px 4px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--white);
  transition: background .12s ease;
  min-height: 190px;
  position: relative;
}
.p6mo-cal-cell:nth-child(7n) { border-right: none; }
.p6mo-cal-grid > .p6mo-cal-cell:nth-last-child(-n+7) { border-bottom: none; }
.p6mo-cal-cell:hover { background: var(--g50); }
.p6mo-cal-cell.is-other-month {
  background: #fafafa;
  color: #bdbdbd;
}
.p6mo-cal-cell.is-other-month .p6mo-cal-date { color: #bdbdbd; }
.p6mo-cal-cell.is-today { background: #fffde7; }
.p6mo-cal-cell.is-today:hover { background: #fff9c4; }
.p6mo-cal-cell.is-today .p6mo-cal-date {
  background: var(--g600);
  color: #fff;
  border-radius: 4px;
  padding: 0 5px;
  display: inline-block;
  font-weight: var(--fw-bold);
}

/* 날짜 번호 */
.p6mo-cal-date {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--txt);
  line-height: 1.2;
  align-self: flex-start;
}
.p6mo-cal-date.sun { color: var(--red); }
.p6mo-cal-date.sat { color: var(--blue); }

/* 일정 아이템 (이름+제목) */
.p6mo-cal-ev {
  font-size: var(--fs-xs);
  line-height: 1.3;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--g50);
  border-left: 2px solid #a5d6a7;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.p6mo-cal-ev.is-urgent {
  background: rgba(229, 57, 53, 0.08);
  border-left-color: #ef9a9a;
}
.p6mo-cal-ev-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e53935;
  flex-shrink: 0;
  display: inline-block;
}
.p6mo-cal-ev-name {
  font-weight: var(--fw-bold);
  color: #558b2f;
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p6mo-cal-ev-title {
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.p6mo-cal-ev-more {
  font-size: var(--fs-xs);
  color: var(--txts);
  padding: 1px 5px;
  font-weight: var(--fw-medium);
  cursor: pointer;
}

/* 모달 내부 - 일정 아이템 */
.p6mo-modal-ev {
  padding: 10px 12px;
  border-left: 3px solid #a5d6a7;
  background: var(--g50);
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
}
.p6mo-modal-ev.is-urgent {
  border-left-color: #ef9a9a;
  background: rgba(229, 57, 53, 0.05);
}
.p6mo-modal-ev-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #558b2f;
}
.p6mo-modal-ev-title {
  font-size: var(--fs-base);
  color: var(--txt);
  line-height: var(--lh-base);
  word-break: break-all;
}
.p6mo-modal-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--txts);
  font-size: var(--fs-base);
}

/* 모바일: 달력 칸 좁아지므로 dot 요약 모드 */
@media (max-width: 760px) {
  .p6mo-cal-grid {
    grid-auto-rows: minmax(62px, auto);
  }
  .p6mo-cal-cell {
    padding: 4px 4px 3px;
    min-height: 62px;
    gap: 2px;
  }
  .p6mo-cal-weekheader-cell {
    padding: 6px 2px;
    font-size: var(--fs-xs);
  }
  .p6mo-cal-date { font-size: var(--fs-xs); }
  /* 모바일에선 일정 이름·제목 숨기고 dot만 */
  .p6mo-cal-ev,
  .p6mo-cal-ev-more { display: none; }
  .p6mo-cal-cell .p6mo-cal-dot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
  }
  .p6mo-cal-cell .p6mo-cal-minidot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--g600);
    display: inline-block;
  }
  .p6mo-cal-cell .p6mo-cal-minidot.is-urgent {
    background: #e53935;
  }
  .p6mo-cal-cell .p6mo-cal-count {
    font-size: 10px;
    color: var(--g600);
    font-weight: var(--fw-bold);
    line-height: 1;
    align-self: flex-start;
  }
}
/* PC: dot-row 숨김 (이름+제목만) */
@media (min-width: 761px) {
  .p6mo-cal-dot-row, .p6mo-cal-count { display: none !important; }
}

/* ─── 공휴일 표시 (한국천문연구원 특일 정보 연동) ─── */
.p6mo-cal-cell.is-holiday {
  /* 필요시 연한 빨강 배경도 가능 — 현재는 날짜 색만 */
}
.p6mo-cal-holiday-name {
  font-size: var(--fs-xs);
  color: var(--red);
  font-weight: var(--fw-bold);
  background: rgba(229, 57, 53, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: flex-start;
  max-width: 100%;
  line-height: 1.3;
}
@media (max-width: 760px) {
  .p6mo-cal-holiday-name {
    font-size: 10px;
    padding: 0 3px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   엑셀 받기 탭 (2026-04-23)
   ═══════════════════════════════════════════════════════════════════ */
.xlsx-radio, .xlsx-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--bdr);
  border-radius: 7px;
  background: var(--white);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--txt);
  transition: background .12s ease, border-color .12s ease;
}
.xlsx-radio:hover, .xlsx-check:hover {
  background: var(--g50);
  border-color: var(--g600);
}
.xlsx-radio input, .xlsx-check input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--g600);
}
.xlsx-radio:has(input:checked) {
  background: var(--g50);
  border-color: var(--g600);
  font-weight: var(--fw-bold);
  color: var(--g700);
}
.xlsx-check:has(input:checked) {
  background: var(--g50);
  border-color: var(--g600);
}
.xlsx-quick:hover {
  background: var(--g100) !important;
  border-color: var(--g600) !important;
  color: var(--g700) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   공유사항 등록 — 중요도 토글 버튼 & 공개범위 보조 라벨 (2026-04-23)
   ═══════════════════════════════════════════════════════════════════ */
.sn-prio-toggle {
  display: inline-flex;
  border: 1px solid var(--bdr);
  border-radius: 7px;
  overflow: hidden;
  background: var(--white);
}
.sn-prio-btn {
  padding: 7px 18px;
  background: var(--white);
  color: var(--txts);
  border: none;
  border-right: 1px solid var(--bdr);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-family: inherit;
  transition: background .12s ease, color .12s ease;
  min-width: 70px;
  min-height: 36px;
}
.sn-prio-btn:last-child { border-right: none; }
.sn-prio-btn:hover {
  background: var(--g50);
}
/* 일반 선택: 녹색 */
.sn-prio-btn.is-active[data-val="일반"] {
  background: var(--g600);
  color: #fff;
  font-weight: var(--fw-bold);
}
/* 중요 선택: 빨강 */
.sn-prio-btn.is-active[data-val="중요"] {
  background: #c62828;
  color: #fff;
  font-weight: var(--fw-bold);
}

/* 공개 범위 보조 라벨 (괄호 안 본부/소속명) */
.sn-vis-sub {
  font-size: 11px;
  font-weight: var(--fw-regular);
  color: inherit;
  opacity: .75;
  margin-left: 2px;
}

@media (max-width: 640px) {
  .sn-prio-btn { padding: 7px 14px; min-width: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════
   공유사항 리치 에디터 — 툴바 + contentEditable (2026-04-23)
   ═══════════════════════════════════════════════════════════════════ */
.sn-rich-wrap {
  border: 1px solid var(--bdr);
  border-radius: 6px;
  background: var(--white);
  overflow: hidden;
}
.sn-rich-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--bdr);
  background: var(--g50);
  flex-wrap: wrap;
}
.sn-rich-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--txt);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.sn-rich-btn:hover {
  background: var(--white);
  border-color: var(--bdr);
}
.sn-rich-btn.is-active {
  background: var(--g600);
  color: #fff;
  border-color: var(--g600);
}
.sn-rich-btn.is-active strong,
.sn-rich-btn.is-active em,
.sn-rich-btn.is-active u { color: #fff; }
.sn-rich-btn-clear {
  color: var(--txts);
  font-size: var(--fs-xs);
}
.sn-rich-sep {
  width: 1px;
  height: 20px;
  background: var(--bdr);
  margin: 0 4px;
}
.sn-rich-editor {
  min-height: 90px;
  padding: 10px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--txt);
  line-height: var(--lh-base);
  outline: none;
  word-break: break-word;
  white-space: pre-wrap;
}
.sn-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--txts);
  opacity: .7;
  pointer-events: none;
}
.sn-rich-editor:focus { outline: none; }
.sn-rich-wrap:focus-within {
  border-color: var(--g600);
  box-shadow: 0 0 0 2px rgba(85,139,47,0.12);
}
/* 에디터 안 리스트 여백 복구 (contentEditable 기본 스타일 덮기) */
.sn-rich-editor ul, .sn-rich-editor ol {
  margin: 6px 0;
  padding-left: 22px;
}
.sn-rich-editor li { margin: 2px 0; }
.sn-rich-editor a {
  color: var(--blue);
  text-decoration: underline;
}

/* 표시된 공유사항 카드 내 HTML 서식 */
.sn-content strong, .sn-content b { font-weight: var(--fw-bold); }
.sn-content em, .sn-content i { font-style: italic; }
.sn-content u { text-decoration: underline; }
.sn-content ul, .sn-content ol { margin: 4px 0; padding-left: 20px; }
.sn-content li { margin: 1px 0; }
.sn-content a {
  color: var(--blue);
  text-decoration: underline;
  word-break: break-all;
}

@media (max-width: 640px) {
  .sn-rich-btn { min-width: 36px; min-height: 36px; }
  .sn-rich-editor { font-size: 16px; } /* iOS 줌 방지 */
}

/* ═══════════════════════════════════════════════════════════════════
   공유사항 등록 — 항목 삭제 버튼 개선 (2026-04-23)
   리치 에디터 내 ✕ (서식지우기) 와 명확히 구분
   ═══════════════════════════════════════════════════════════════════ */
.sn-form-remove-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: #fff;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  z-index: 2;
}
.sn-form-remove-btn:hover {
  background: #ffebee;
  border-color: #c62828;
}
.sn-form-remove-btn:active {
  transform: scale(0.96);
}
.sn-form-remove-icon { font-size: var(--fs-sm); line-height: 1; }
.sn-form-remove-text { font-weight: var(--fw-bold); }

@media (max-width: 640px) {
  .sn-form-remove-btn {
    top: 8px;
    right: 8px;
    padding: 6px 10px;
    min-height: 30px;
  }
  /* 모바일에서는 텍스트 숨기고 아이콘만 */
  .sn-form-remove-text { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   일정 등록 — UX 개선 (2026-04-23)
   - 중요 아이콘 토글 / 반복 아이콘 버튼 / 모바일 2층 레이아웃
   ═══════════════════════════════════════════════════════════════════ */
.p6wr-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.p6wr-row .p6wr-inp {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border: 0.5px solid rgba(0,0,0,.14);
  border-radius: 8px;
  font-size: var(--fs-md);
  font-family: inherit;
  background: #fafafa;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
  transition: background .12s, border-color .12s;
}
.p6wr-row .p6wr-inp:focus {
  background: #fff;
  border-color: var(--g600);
  outline: none;
  box-shadow: 0 0 0 2px rgba(85,139,47,0.1);
}
.p6wr-row-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.p6wr-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s, transform .1s;
  opacity: 0.45;
  flex-shrink: 0;
}
.p6wr-icon-btn:hover {
  background: var(--g50);
  border-color: var(--bdr);
  opacity: 1;
}
.p6wr-icon-btn:active { transform: scale(0.92); }

/* 중요 버튼 — 비활성은 회색, 활성은 빨강 */
.p6wr-urg-btn {
  filter: grayscale(1);
}
.p6wr-urg-btn.is-active {
  filter: none;
  opacity: 1;
  background: #ffebee;
  border-color: #ef9a9a;
}

/* 반복 버튼 — 규칙 설정되면 파란색 */
.p6wr-rep-btn.is-set {
  opacity: 1;
  background: #e3f2fd;
  border-color: #90caf9;
}

/* 삭제 버튼 — 호버시 빨강 */
.p6wr-del-btn {
  font-size: 18px;
  color: var(--txts);
}
.p6wr-del-btn:hover {
  background: #ffebee;
  border-color: #ef9a9a;
  color: #c62828;
  opacity: 1;
}

/* 모바일: 입력 행 2층 레이아웃 */
@media (max-width: 640px) {
  .p6wr-row {
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0;
  }
  .p6wr-row .p6wr-inp {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 16px; /* iOS 줌 방지 */
    padding: 10px 12px;
  }
  .p6wr-row-controls {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }
  .p6wr-icon-btn {
    width: 40px;
    height: 36px;
    opacity: 1; /* 모바일은 항상 보이게 */
  }
}

/* 주차 구분선 — 더 선명하게 (2026-04-23) */
.p6wr-wk-sep:first-child {
  border-top: none;
}

/* ═══════════════════════════════════════════════════════════════════
   일정 등록 — "+ 행 추가" 버튼: PC 숨김, 모바일 유지 (2026-04-23)
   PC에서는 Enter 키로 행 추가, 모바일은 가상 키보드 Enter 불안정해 버튼 제공
   ═══════════════════════════════════════════════════════════════════ */
.p6wr-add-row-wrap {
  display: none;
}
@media (max-width: 640px) {
  .p6wr-add-row-wrap {
    display: block;
  }
  .p6wr-add-row-btn {
    width: 100%;
    padding: 8px 12px !important;
    font-size: var(--fs-sm) !important;
    min-height: 38px;
  }
}