/*
 * portal.css ― Work Portal の見た目
 *   index.html の <style> をそのまま出したもの。中身は変えていない。
 */
:root{
  --green:#1D9E75;--green-dk:#156B50;--green-lt:#E8F7F2;
  --gray-50:#F8F9FA;--gray-100:#F1F3F5;--gray-200:#E9ECEF;
  --gray-400:#ADB5BD;--gray-600:#6C757D;--gray-800:#343A40;--gray-900:#212529;
  --red:#E24B4A;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 16px rgba(0,0,0,.10);--shadow-lg:0 8px 32px rgba(0,0,0,.13);
  --radius:12px;--sidebar-w:240px;--sidebar-w-c:64px;--header-h:56px;--tr:.22s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Hiragino Sans','Yu Gothic UI','Meiryo',sans-serif;background:var(--gray-100);color:var(--gray-900)}
#loginScreen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f4c35 0%,#1D9E75 50%,#2dd4a0 100%);z-index:9999}
.login-options{display:flex;align-items:center;justify-content:space-between;margin:4px 0 14px;font-size:13px}
.remember-label{display:flex;align-items:center;gap:7px;cursor:pointer;color:#4B5563;user-select:none}
.remember-label input{width:16px;height:16px;cursor:pointer;accent-color:#1D9E75}
.forgot-link{color:#1D9E75;cursor:pointer;text-decoration:none;font-weight:500}
.forgot-link:hover{text-decoration:underline}
#bootLoader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f4c35 0%,#1D9E75 50%,#2dd4a0 100%);z-index:10000}
#bootLoader .boot-spinner{width:52px;height:52px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:bootSpin .8s linear infinite}
@keyframes bootSpin{to{transform:rotate(360deg)}}
.login-wrap{width:100%;max-width:420px;padding:1rem}
.login-card{background:#fff;border-radius:20px;padding:2.5rem 2rem;box-shadow:var(--shadow-lg);animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.login-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:1.8rem}
.login-logo-mark{width:40px;height:40px;background:var(--green);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:900}
.login-logo-text{font-size:15px;font-weight:700;letter-spacing:.05em;line-height:1.3}
.login-logo-text small{display:block;font-size:11px;font-weight:400;color:var(--gray-600)}
.login-title{font-size:20px;font-weight:700;text-align:center;margin-bottom:.4rem}
.login-sub{font-size:13px;color:var(--gray-600);text-align:center;margin-bottom:1.6rem}
.user-type-tabs{display:flex;border:1px solid var(--gray-200);border-radius:8px;overflow:hidden;margin-bottom:1.4rem}
.user-type-tab{flex:1;height:38px;border:none;background:none;font-size:13px;cursor:pointer;font-weight:500;color:var(--gray-600);transition:var(--tr);font-family:inherit}
.user-type-tab.active{background:var(--green);color:#fff}
.form-group{margin-bottom:1rem}
.form-label{font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:5px;display:block}
.form-input{width:100%;height:44px;border:1.5px solid var(--gray-200);border-radius:8px;padding:0 14px;font-size:14px;outline:none;transition:border-color .15s;font-family:inherit}
  /* iOS Safari は入力欄の文字が16px未満だと、タップしたときに画面を勝手に拡大する。
     スマホのときだけ16pxにして、拡大が起きないようにする（見た目はほぼ変わらない）。 */
  @media (max-width:640px){
    .form-input,
    input[type="text"],input[type="password"],input[type="email"],
    input[type="number"],input[type="tel"],input[type="search"],
    input[type="date"],input[type="month"],select,textarea{ font-size:16px !important; }
  }
.form-input:focus{border-color:var(--green)}
.login-btn{width:100%;height:46px;background:var(--green);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;margin-top:.4rem;transition:background .15s;font-family:inherit}
.login-btn:hover{background:var(--green-dk)}
.login-btn:disabled{background:var(--gray-400);cursor:not-allowed}
.login-error{font-size:12px;color:var(--red);text-align:center;margin-top:8px;min-height:18px}
.lang-bar{display:flex;justify-content:center;gap:6px;margin-top:1.4rem}
.lang-btn-login{font-size:12px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.15);color:#fff;border-radius:6px;padding:4px 10px;cursor:pointer;transition:var(--tr);font-family:inherit}
.lang-btn-login.active,.lang-btn-login:hover{background:rgba(255,255,255,.35)}
#appScreen{display:none;height:100vh;flex-direction:column}
.header{height:var(--header-h);background:#fff;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;padding:0 1rem;gap:10px;position:fixed;top:0;left:0;right:0;z-index:100;box-shadow:var(--shadow-sm)}
.header-toggle{width:36px;height:36px;border:none;background:none;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gray-600);font-size:18px;transition:background .15s;flex-shrink:0}
.header-toggle:hover{background:var(--gray-100)}
.header-logo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--gray-900);flex-shrink:0;cursor:pointer}
.header-spacer{flex:1}
.header-lang-wrap{display:flex;gap:4px}
.header-lang-btn{height:28px;padding:0 8px;border:1px solid var(--gray-200);border-radius:6px;background:#fff;font-size:11px;font-weight:600;cursor:pointer;color:var(--gray-600);transition:var(--tr);font-family:inherit}
.header-lang-btn.active{background:var(--green);color:#fff;border-color:var(--green)}
.header-user{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;cursor:pointer;position:relative}
.header-avatar{width:32px;height:32px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0;overflow:hidden}
.header-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.header-username{font-size:13px;font-weight:600}
.header-usertype{font-size:11px;color:var(--gray-600)}
.layout{display:flex;padding-top:var(--header-h);height:100vh}
/* サイドバーは「スクロールする本体」と「固定のフッター」に分ける。
   以前はサイドバー自体をスクロールさせ、フッターを sticky で留めていたが、
   いちばん下に置いている ::after のスペーサーがフッターより後ろに来るため、
   きちんと最下部に固定されなかった。 */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:#fff;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;transition:width var(--tr);overflow:hidden;position:fixed;top:var(--header-h);bottom:0;left:0;z-index:90}
.sidebar-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.sidebar-scroll::-webkit-scrollbar{width:6px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--gray-300,#D1D5DB);border-radius:3px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
/* Safari は flex のスクロール領域で padding-bottom を無視するため、
   実体のあるスペーサーを最後に置いて、いちばん下の項目まで見えるようにする。 */
.sidebar-scroll::after{
  content:'';
  display:block;
  flex:0 0 auto;
  height:12px;
}
.sidebar.collapsed{width:var(--sidebar-w-c)}
.sidebar-section{padding:8px 0}
.sidebar-label{font-size:10px;font-weight:700;color:var(--gray-400);letter-spacing:.08em;padding:6px 16px 4px;white-space:nowrap;overflow:hidden;transition:opacity var(--tr)}
.sidebar.collapsed .sidebar-label{opacity:0}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;border-radius:8px;margin:1px 8px;color:var(--gray-800);font-size:13px;font-weight:500;transition:var(--tr);text-decoration:none;white-space:nowrap}
.sidebar-item:hover{background:var(--gray-100)}
.sidebar-toggle{cursor:pointer}
.sidebar-arrow{margin-left:auto;font-size:10px;color:#9CA3AF;transition:transform 0.2s}
.sidebar-arrow.closed{transform:rotate(-90deg)}
.sidebar-submenu{flex-direction:column;padding-left:8px;background:#F9FAFB;overflow:hidden}
.sidebar-submenu.open{display:flex !important}
.sidebar-submenu.closed{display:none !important}
.sidebar-subitem{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 8px 36px;
  font-size:13px;color:var(--gray-700);
  text-decoration:none;cursor:pointer;
  border-left:3px solid transparent;
  transition:all 0.15s;
}
.sidebar-subitem:hover{background:var(--gray-100);color:var(--gray-800)}
.sidebar-subitem.active{
  background:rgba(29,158,117,.1);
  color:var(--green);
  border-left-color:var(--green);
  font-weight:600;
}
.sidebar-subicon{font-size:13px}
/* 서브-서브 접기 메뉴 (기업별 출고실적) */
.sidebar-subtoggle{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 8px 36px;
  font-size:13px;color:var(--gray-700);
  text-decoration:none;cursor:pointer;
  border-left:3px solid transparent;
  transition:all 0.15s;
}
.sidebar-subtoggle:hover{background:var(--gray-100);color:var(--gray-800)}
.sidebar-subarrow{margin-left:auto;font-size:9px;color:#9CA3AF;transition:transform 0.2s}
.sidebar-subarrow.closed{transform:rotate(-90deg)}
.sidebar-subsubmenu{flex-direction:column;background:#F3F4F6;overflow:hidden}
.sidebar-subsubmenu.open{display:flex !important}
.sidebar-subsubmenu.closed{display:none !important}
.sidebar-subsubitem{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px 7px 52px;
  font-size:12.5px;color:var(--gray-600);
  text-decoration:none;cursor:pointer;
  border-left:3px solid transparent;
  transition:all 0.15s;
}
.sidebar-subsubitem:hover{background:var(--gray-200);color:var(--gray-800)}
.sidebar-subsubitem.active{
  background:rgba(29,158,117,.12);
  color:var(--green);
  border-left-color:var(--green);
  font-weight:600;
}
.sidebar-subsubicon{font-size:12px}
.sidebar-item.active{background:var(--green-lt);color:var(--green);font-weight:700}
.sidebar-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px}
.sidebar-text{overflow:hidden;transition:opacity var(--tr),width var(--tr);white-space:nowrap}
.sidebar.collapsed .sidebar-text{opacity:0;width:0}
.sidebar-divider{height:1px;background:var(--gray-200);margin:6px 16px}
/* サイドバー最下部の固定メニュー（組織図）。
   margin-top:auto でメニューが短いときは一番下へ、
   sticky で長くてスクロールするときも見えたままにする。 */
/* 常に最下部。スクロール領域の外なので流れていかない。 */
.sidebar-foot{flex:0 0 auto;background:#fff;border-top:1px solid var(--gray-200);
              padding:6px 0 calc(env(safe-area-inset-bottom, 0px) + 6px)}

/* ── 組織図モーダル ── */
.org-back{position:fixed;inset:0;background:rgba(17,24,39,.5);z-index:10050;
          display:flex;align-items:center;justify-content:center;padding:20px}
.org-box{background:#fff;border-radius:14px;width:100%;max-width:760px;max-height:86vh;
         display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.28);overflow:hidden}
.org-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--gray-200)}
.org-title{font-size:15px;font-weight:700;color:var(--gray-800,#1F2937)}
.org-cnt{font-size:11.5px;color:var(--gray-500,#6B7280);font-weight:600}
.org-x{margin-left:auto;border:0;background:transparent;font-size:20px;line-height:1;
       color:var(--gray-400,#9CA3AF);cursor:pointer;padding:2px 6px;border-radius:6px}
.org-x:hover{background:var(--gray-100,#F3F4F6);color:var(--gray-700,#374151)}
.org-tools{padding:10px 18px;border-bottom:1px solid var(--gray-100,#F3F4F6)}
.org-search{width:100%;height:36px;border:1.5px solid var(--gray-200,#E5E7EB);border-radius:8px;
            padding:0 12px;font-size:13px;font-family:inherit;outline:none}
.org-search:focus{border-color:var(--primary,#16A34A)}
.org-body{overflow-y:auto;padding:6px 0 14px}
/* ツリー */
.otree{padding:4px 0 8px}
.onode{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 8px;font-size:12.5px;
       color:var(--gray-800,#1F2937);border-radius:7px;margin:0 8px;line-height:1.5}
.oexp{width:16px;height:16px;flex:0 0 auto;border:1px solid var(--gray-300,#D1D5DB);background:#fff;
      border-radius:4px;cursor:pointer;font-size:11px;line-height:1;color:var(--gray-600,#4B5563);
      display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit}
.oexp:hover{background:var(--gray-100,#F3F4F6);border-color:var(--gray-400,#9CA3AF)}
.oexp-sp{width:16px;flex:0 0 auto}
.oico{flex:0 0 auto;font-size:12px;width:16px;text-align:center}
.olabel{font-weight:700}
.ocnt{font-size:10.5px;color:var(--gray-400,#9CA3AF);font-weight:600}
.operson{cursor:pointer}
.operson:hover{background:#F0FDF4}
.operson .oname{font-weight:500}
.operson .opos{font-size:11px;color:var(--gray-500,#6B7280);font-weight:600}
.operson.me{background:#F0FDF4}
.operson.me .oname{font-weight:800;color:var(--primary,#16A34A)}
.org-empty{padding:34px 18px;text-align:center;color:var(--gray-400,#9CA3AF);font-size:12.5px}

/* ── 社員の詳細（組織図の上に重ねる） ── */
.orgd-back{position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:10060;
           display:flex;align-items:center;justify-content:center;padding:20px}
.orgd-box{background:#fff;border-radius:14px;width:100%;max-width:380px;
          box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden}
.orgd-top{padding:20px 18px 14px;text-align:center;border-bottom:1px solid var(--gray-100,#F3F4F6)}
.orgd-ava{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;display:flex;
          align-items:center;justify-content:center;background:var(--primary,#16A34A);
          color:#fff;font-size:21px;font-weight:700;overflow:hidden}
.orgd-ava img{width:100%;height:100%;object-fit:cover;display:block}
.orgd-n{font-size:17px;font-weight:800;color:var(--gray-800,#1F2937);line-height:1.4}
.orgd-pos{font-size:14px;font-weight:700;color:var(--gray-700,#374151);margin-left:2px}
.orgd-path{font-size:11.5px;color:var(--gray-500,#6B7280);margin-top:5px}
.orgd-mail{display:inline-block;margin-top:5px;font-size:12px;color:#2563EB;text-decoration:none;word-break:break-all}
.orgd-mail:hover{text-decoration:underline}
/* 参考画像と同じ、アイコン付きの操作ボタン2つ */
.orgd-acts{display:flex;border-bottom:1px solid var(--gray-100,#F3F4F6)}
.orgd-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
          padding:13px 6px;border:0;background:transparent;cursor:pointer;text-decoration:none;
          font-family:inherit;font-size:11.5px;font-weight:600;color:var(--gray-600,#4B5563)}
.orgd-act:hover{background:var(--gray-50,#F9FAFB)}
.orgd-act .i{font-size:19px;line-height:1;color:var(--gray-500,#6B7280)}
.orgd-act.off{opacity:.35;cursor:default}
.orgd-act.off:hover{background:transparent}
.orgd-rows{padding:6px 18px 4px}
.orgd-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--gray-100,#F3F4F6);font-size:12.5px}
.orgd-row:last-child{border-bottom:0}
.orgd-k{width:78px;flex:0 0 auto;color:var(--gray-500,#6B7280);font-weight:600}
.orgd-v{flex:1;min-width:0;color:var(--gray-800,#1F2937);word-break:break-all}
.orgd-v a{color:#2563EB;text-decoration:none}
.orgd-v a:hover{text-decoration:underline}
.orgd-foot{padding:12px 18px 16px;display:flex;gap:8px}
.orgd-btn{flex:1;height:36px;border-radius:8px;border:1px solid var(--gray-200,#E5E7EB);
          background:#fff;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
          color:var(--gray-700,#374151);text-decoration:none;display:flex;
          align-items:center;justify-content:center}
.orgd-btn:hover{background:var(--gray-50,#F9FAFB)}
@media(max-width:640px){
  .org-back,.orgd-back{padding:0}
  .org-box{max-width:none;max-height:100vh;height:100%;border-radius:0}
  .orgd-box{max-width:none;border-radius:14px 14px 0 0;align-self:flex-end}
  .orgd-back{align-items:flex-end}
}
.main-content{flex:1;margin-left:var(--sidebar-w);transition:margin-left var(--tr);height:calc(100vh - var(--header-h));overflow:hidden;display:flex;flex-direction:column}
.main-content.expanded{margin-left:var(--sidebar-w-c)}
.content-frame{flex:1;display:none;flex-direction:column;position:relative}
.content-frame.active{display:flex;flex:1;min-height:0}
#frame-home.active{display:flex;flex-direction:column;overflow-y:auto}
#frame-home.active #homeContent{flex:1;display:flex;flex-direction:column}
/* iframe 전체 채움 (PC) */
.content-frame.active iframe{width:100%;height:100%;border:none;display:block}
.content-frame iframe{flex:1;border:none;width:100%;height:100%}
#homeContent{padding:1rem;overflow-y:auto;flex:1;display:flex;flex-direction:column}
.home-greeting{font-size:22px;font-weight:700;margin-bottom:.3rem}
.home-date{font-size:13px;color:var(--gray-600);margin-bottom:1.5rem}
.home-section-title{font-size:12px;font-weight:700;color:var(--gray-400);letter-spacing:.06em;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--gray-200)}
.home-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.home-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:1.2rem 1rem;cursor:pointer;transition:var(--tr);display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.home-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--green)}
.home-card-icon{font-size:28px}
.home-card-label{font-size:13px;font-weight:600}
.home-card-sub{font-size:11px;color:var(--gray-600)}
.coming-soon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gray-400);gap:10px}
.coming-soon-icon{font-size:48px}
.coming-soon h2{font-size:16px;font-weight:600;color:var(--gray-600)}
.coming-soon p{font-size:13px}
.ext-page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--gray-50)}
.ext-icon{font-size:56px}
.ext-title{font-size:22px;font-weight:700;color:var(--gray-800)}
.site-footer{text-align:center;padding:.6rem 1rem;border-top:1px solid var(--gray-200);background:#fff;margin-top:auto;flex-shrink:0}
.footer-brand{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--gray-800);margin-bottom:.15rem}
.footer-company{font-size:9px;color:var(--gray-600);margin-bottom:.1rem}
.footer-copy{font-size:8px;color:var(--gray-400);letter-spacing:.02em}
@media(max-width:768px){
  .main-content{margin-left:0 !important}
  .header-username,.header-usertype,.header-lang-wrap{display:none}
  .mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999}
  .mobile-overlay.active{display:block}
}

/* ── 모바일 최적화 ── */
@media(max-width:768px){
  body{font-size:14px;-webkit-text-size-adjust:100%}

  /* ── 헤더 ── */
  .header{padding:0 10px;height:52px;overflow:visible}
  .header-logo span{font-size:13px}
  .header-right{gap:6px}
  .header-toggle{display:flex!important;width:36px;height:36px;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;border-radius:8px;font-size:20px}
  .header-lang-wrap{display:none!important}

  /* ── 사이드바 ── */
  .sidebar{
    position:fixed!important;top:0!important;left:0!important;bottom:0!important;
    width:80vw!important;max-width:300px!important;
    /* 100vh は iOS のホーム画面追加（スタンドアロン）でホームバーの下まで伸び、
       いちばん下の項目が隠れてしまう。dvh と bottom:0 で実際の表示領域に合わせる。 */
    height:100dvh!important;
    max-height:100dvh!important;
    transform:translateX(-100%)!important;
    transition:transform .28s cubic-bezier(.4,0,.2,1)!important;
    z-index:1001!important;background:#fff!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch;
    padding-top:52px!important;
    /* ホームバーのぶんだけ下に余白を足し、最後の項目まで押せるようにする */
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 28px)!important;
    overscroll-behavior:contain;
  }
  /* dvh に対応していない端末向けのフォールバック */
  @supports not (height: 100dvh){
    .sidebar{ height:100%!important; max-height:100%!important; }
  }
  /* 組織図（sidebar-foot）を画面の一番下に貼り付ける。
     以前はサイドバー自体をスクロールさせていたので、
     組織図はメニューの直後＝中途半端な位置に出ていた。
     外枠は動かさず、中の .sidebar-scroll だけをスクロールさせる。 */
  .sidebar{
    display:flex!important; flex-direction:column!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }
  .sidebar-scroll{
    flex:1 1 auto!important; min-height:0!important;
    overflow-y:auto!important; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .sidebar-foot{
    flex:0 0 auto!important;
    box-shadow:0 -2px 10px rgba(0,0,0,.06);
    /* ホームバーのぶんだけ内側に余白を取り、押せる高さを確保する */
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 10px)!important;
    padding-top:8px!important;
  }
  .sidebar-foot .sidebar-item{ padding-top:10px; padding-bottom:10px; }
  /* 外枠に付けていたスペーサーは、フッターを押し下げてしまうので消す */
  .sidebar::after{ display:none!important; }
  .sidebar-scroll::after{
    content:''!important; display:block!important;
    height:12px!important;
  }
  .sidebar.mobile-open{transform:translateX(0)!important;box-shadow:4px 0 30px rgba(0,0,0,.2)!important}
  .sidebar-item{padding:14px 18px!important;font-size:14px!important;border-radius:0!important;cursor:pointer!important}

  /* ── 전체 레이아웃 ──
     헤더(52px) + 콘텐츠 = 100vh (모바일 푸터 없음)
  ── */
  html,body{overflow:hidden!important;height:100%!important;height:100dvh!important}

  .layout{
    position:fixed!important;
    top:56px!important;left:0!important;right:0!important;bottom:0!important;
    height:calc(100dvh - 56px)!important;
    overflow:hidden!important;
    padding:0!important;margin:0!important;
  }
  .main-content{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    overflow:hidden!important;
    position:relative!important;
  }
  .content-area{
    width:100%!important;
    height:100%!important;
    padding:0!important;
    overflow:hidden!important;
    position:relative!important;
  }

  /* ── 콘텐츠 프레임 ── */
  .content-frame{
    width:100%!important;
    height:100%!important;
    display:none!important;
    overflow:hidden!important;
    position:absolute!important;
    top:0!important;left:0!important;right:0!important;bottom:0!important;
  }
  .content-frame.active{
    display:block!important;
  }

  /* iframe 전체 꽉 채움 */
  .content-frame iframe{
    width:100%!important;
    height:100%!important;
    border:none!important;
    display:block!important;
  }
  /* 캘린더 풀스크린 모드 - body에 .calendar-fullscreen 클래스 추가 시 */
  body.calendar-fullscreen .layout{
    bottom:0!important;
  }
  body.calendar-fullscreen .mobile-only-footer{
    display:none!important;
  }
  body.calendar-fullscreen #calMobileQuickBar{
    bottom:0!important;
  }

  /* ── 홈 프레임: 스크롤 가능 ── */
  #frame-home{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    height:100%!important;
  }
  #frame-home #homeContent{
    padding:0 0 20px 0!important;
    height:auto!important;
    min-height:unset!important;
  }

  /* ── 홈 카드 ── */
  #homeContent{padding:0!important}
  .home-cards{
    grid-template-columns:repeat(2,1fr)!important;
    gap:10px!important;padding:0!important;
  }
  .home-card{
    padding:16px 10px!important;border-radius:14px!important;
    box-shadow:0 2px 8px rgba(0,0,0,.06)!important;
    text-align:center;display:flex;flex-direction:column;
    align-items:center;justify-content:center;min-height:110px;
    cursor:pointer;
  }
  .home-card-icon{font-size:28px;margin-bottom:8px;line-height:1}
  .home-card-title{font-size:12px;font-weight:700;line-height:1.3}
  .home-card-desc,.home-card-arrow{display:none}
  .home-section-title{padding:8px 12px 4px;font-size:11px}

  /* ── 인사말 ── */
  .home-greeting{padding:4px 12px!important;margin:0!important}
  .home-greeting h1{font-size:18px!important}
  .home-greeting p{font-size:12px!important}

  /* ── 푸터 ── */
  .site-footer, #commonFooter{display:none!important}
  .mobile-only-footer{ display:none!important; }
  .footer-brand{font-size:10px!important;font-weight:700;letter-spacing:.08em;line-height:1.3}
  .footer-company{font-size:8px!important;color:var(--gray-400)!important;line-height:1.2}
  .footer-copy{display:none!important}

  /* ── 알림 ── */
  .notif-drop{
    position:fixed!important;top:52px!important;
    left:8px!important;right:8px!important;width:auto!important;
    max-height:calc(100vh - 96px)!important;
    border-radius:12px!important;z-index:10000!important;
  }
  .notif-badge{font-size:9px;min-width:14px;height:14px}
  .profile-menu{right:8px!important;width:200px!important}
}

@media(max-width:480px){
  /* 작은 폰: 카드 1열은 너무 비효율적이므로 2열 유지 */
  .home-cards{
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;padding:10px!important
  }
  .home-card{
    padding:14px 8px!important;
    min-height:100px
  }
  .home-card-icon{font-size:26px}
  .home-card-title{font-size:11px}
}

  /* ── 알림 벨 ── */
  .notif-wrap{position:relative;cursor:pointer;display:flex;align-items:center;margin-right:4px}
  .notif-bell{font-size:20px;padding:6px 8px;border-radius:8px;transition:.15s;user-select:none;color:#fff;line-height:1}
  .notif-bell:hover{background:rgba(255,255,255,.15)}
  .notif-badge{
    position:absolute;top:1px;right:2px;
    background:#E24B4A;color:#fff;
    font-size:10px;font-weight:700;
    min-width:16px;height:16px;
    border-radius:8px;padding:0 4px;
    display:none;align-items:center;justify-content:center;
    pointer-events:none;line-height:1
  }
  .notif-drop{
    position:absolute;top:calc(100% + 10px);right:-8px;
    width:340px;max-height:480px;
    background:#fff;border-radius:14px;
    box-shadow:0 8px 32px rgba(0,0,0,.18);
    border:1px solid var(--gray-200);
    z-index:9999;
    display:none;  /* 기본: 숨김 */
    flex-direction:column;
    overflow:hidden
  }
  .notif-drop.open{display:flex}  /* 열릴 때만 표시 */
  .notif-drop-hdr{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 16px;border-bottom:1px solid var(--gray-200);
    font-size:13px;font-weight:700;flex-shrink:0;
    background:#fff;color:#1a1a1a
  }
  .notif-drop-hdr-btns{display:flex;gap:6px}
  .notif-drop-hdr-btns button{
    font-size:11px;padding:3px 8px;border-radius:6px;
    border:1px solid var(--gray-200);background:#fff;cursor:pointer;
    color:var(--gray-600);transition:.15s
  }
  .notif-drop-hdr-btns button:hover{background:var(--gray-100)}
  .notif-list{overflow-y:auto;flex:1;background:#fff}
  .notif-item{
    display:flex;gap:10px;padding:12px 16px;
    border-bottom:1px solid var(--gray-100);
    transition:.15s;align-items:flex-start;cursor:default
  }
  .notif-item.unread{background:#F0FBF6}
  .notif-item:hover{background:var(--gray-50)}
  .notif-item-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--green);flex-shrink:0;margin-top:5px;transition:.3s
  }
  .notif-item.read .notif-item-dot{background:var(--gray-200)}
  .notif-item-body{flex:1;min-width:0}
  .notif-item-title{font-size:13px;font-weight:600;margin-bottom:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1a1a1a}
  .notif-item-sub{font-size:11px;color:var(--gray-500);margin-bottom:2px}
  .notif-item-member{font-size:11px;color:var(--green-dk);margin-bottom:2px;font-weight:500}
  .notif-item-time{font-size:10px;color:var(--gray-400)}
  .notif-item-actions{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
  .notif-item-actions button{
    font-size:10px;padding:2px 7px;border-radius:5px;
    border:1px solid var(--gray-200);background:#fff;cursor:pointer;
    color:var(--gray-600);transition:.15s
  }
  .notif-item-actions button:hover{background:var(--gray-100)}
  .notif-item-actions .btn-read-one{border-color:var(--green);color:var(--green)}
  /* リマインダー */
  .notif-remind-chip{display:inline-flex;align-items:center;gap:5px;margin-top:6px;
    padding:2px 6px 2px 8px;border-radius:99px;background:var(--green-lt,#E7F7F0);
    color:var(--green,#1D9E75);font-size:10.5px;font-weight:700}
  .notif-remind-chip button{border:0;background:transparent;color:inherit;cursor:pointer;
    font-size:10px;padding:0 2px;line-height:1;opacity:.7}
  .notif-remind-chip button:hover{opacity:1}
  .remind-pick{position:fixed;z-index:10100;background:#fff;border:1px solid var(--gray-200,#E5E7EB);
    border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:6px;width:190px}
  .remind-pick > button{display:block;width:100%;text-align:left;border:0;background:transparent;
    padding:8px 10px;border-radius:7px;font-size:12.5px;cursor:pointer;font-family:inherit;
    color:var(--gray-800,#1F2937)}
  .remind-pick > button:hover{background:var(--gray-100,#F3F4F6)}
  .remind-pick-sep{height:1px;background:var(--gray-100,#F3F4F6);margin:4px 0}
  .remind-pick-at{display:flex;gap:4px;padding:2px}
  .remind-pick-at input{flex:1;min-width:0;font-size:11px;font-family:inherit;
    border:1px solid var(--gray-200,#E5E7EB);border-radius:6px;padding:4px 6px}
  .remind-pick-at button{border:1px solid var(--green,#1D9E75);background:var(--green,#1D9E75);
    color:#fff;border-radius:6px;font-size:11px;padding:4px 8px;cursor:pointer;font-family:inherit}
  .notif-item-actions .btn-read-one:hover{background:var(--green-lt)}
  .notif-empty{padding:32px 16px;text-align:center;color:var(--gray-400);font-size:13px;background:#fff}
  @media(max-width:768px){
    /* 모바일: 헤더 바로 아래 전체 너비 */
    .notif-drop{
      position:fixed;
      top:var(--header-h);  /* 56px - 헤더 높이 */
      left:8px;
      right:8px;
      width:auto;
      max-height:calc(100vh - var(--header-h) - 16px);
      border-radius:12px;
      z-index:10000;
      overflow-y:auto
    }
  }
/* ── ホーム画面 ── */
.hm-grid{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-top:18px;align-items:start}
.hm-side,.hm-main{display:flex;flex-direction:column;gap:16px}
.hm-box{background:#fff;border:1px solid var(--gray-200,#E5E7EB);border-radius:12px;overflow:hidden}
.hm-head{padding:11px 15px;font-size:13.5px;font-weight:700;color:var(--gray-700,#374151);
         border-bottom:1px solid var(--gray-100,#F3F4F6);display:flex;align-items:center;gap:8px}
.hm-head .cnt{margin-left:auto;font-size:11px;font-weight:600;color:#9CA3AF}
.hm-body{padding:14px 15px}
/* プロフィール */
.hm-prof{text-align:center;padding:22px 15px 18px;position:relative}
.hm-gear{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;background:transparent;
         border-radius:8px;cursor:pointer;font-size:14px;line-height:1;opacity:.55;
         display:flex;align-items:center;justify-content:center;padding:0}
.hm-gear:hover{background:var(--gray-100,#F3F4F6);opacity:1}
.hm-ava{width:78px;height:78px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;
        justify-content:center;background:var(--primary,#16A34A);color:#fff;font-size:28px;font-weight:700;
        overflow:hidden;flex:0 0 auto}
.hm-ava img{width:100%;height:100%;object-fit:cover;display:block}
.hm-name{font-size:17px;font-weight:700;color:var(--gray-800,#1F2937)}
.hm-sub{font-size:12px;color:var(--gray-500,#6B7280);margin-top:4px}
/* 部門の下に出すチーム／パート */
.hm-team{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:99px;
         background:var(--gray-100,#F3F4F6);color:var(--gray-600,#4B5563);
         font-size:11px;font-weight:600;line-height:1.7}
.hm-stat{display:flex;justify-content:space-between;padding:8px 15px;font-size:12.5px;
         border-top:1px solid var(--gray-100,#F3F4F6)}
.hm-stat span:last-child{font-weight:700;color:var(--gray-800,#1F2937)}
/* ログイン履歴 */
.hm-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.hm-tbl th{padding:7px 15px;background:#FAFBFC;color:#6B7280;font-weight:600;text-align:left;
           border-bottom:1px solid var(--gray-100,#F3F4F6);white-space:nowrap}
.hm-tbl td{padding:7px 15px;border-bottom:1px solid var(--gray-100,#F3F4F6);color:#4B5563;white-space:nowrap}
.hm-tbl tr:last-child td{border-bottom:none}
/* 通知 */
.hm-note{display:flex;gap:11px;padding:11px 15px;border-bottom:1px solid var(--gray-100,#F3F4F6);cursor:default}
.hm-note:last-child{border-bottom:none}
.hm-note.unread{background:#F7FDF9}
.hm-dot{flex:0 0 7px;height:7px;border-radius:50%;margin-top:6px;background:transparent}
.hm-note.unread .hm-dot{background:var(--primary,#16A34A)}
.hm-note .tt{font-size:12.5px;font-weight:600;color:var(--gray-800,#1F2937)}
.hm-note.unread .tt{color:#0F6B4F}
.hm-note .bd{font-size:11.5px;color:#6B7280;margin-top:2px;line-height:1.6}
.hm-note .at{font-size:10.5px;color:#9CA3AF;margin-left:auto;white-space:nowrap}
.hm-empty{padding:34px 15px;text-align:center;color:#9CA3AF;font-size:12.5px}
.home-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
/* 業務メニュー設定の行 */
.hm-row{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid #F3F4F6;
        background:#fff;font-size:12.5px;color:#374151}
.hm-row:last-child{border-bottom:none}
.hm-row[draggable=true]{cursor:grab}
.hm-row .gr{color:#C7CCD3;user-select:none}
.hm-row:hover{background:#FAFBFC}
.hm-x{border:none;background:transparent;color:#C7CCD3;font-size:13px;cursor:pointer;
      padding:2px 6px;border-radius:6px;font-family:inherit}
.hm-x:hover{background:#FEE2E2;color:#DC2626}
/* ── ホームの設定ダイアログ ──
   このページには汎用モーダルのCSSが無いため、専用に用意する。 */
.hmd-back{position:fixed;inset:0;background:rgba(17,24,39,.45);display:flex;align-items:center;
          justify-content:center;z-index:10000;padding:20px}
.hmd{background:#fff;border-radius:14px;width:100%;max-width:460px;max-height:86vh;
     display:flex;flex-direction:column;box-shadow:0 18px 48px rgba(0,0,0,.18);overflow:hidden}
.hmd-hd{padding:15px 18px;font-size:14.5px;font-weight:700;color:#1F2937;border-bottom:1px solid #F0F2F5}
.hmd-bd{padding:16px 18px;overflow:auto;flex:1}
.hmd-ft{padding:13px 18px;border-top:1px solid #F0F2F5;display:flex;gap:8px;justify-content:flex-end}
.hmd-lbl{font-size:11.5px;font-weight:700;color:#374151;margin:12px 0 6px}
.hmd-lbl:first-child{margin-top:0}
.hmd-list{border:1px solid #E5E7EB;border-radius:9px;overflow:hidden}
.hmd-note{font-size:11.5px;color:#9CA3AF;line-height:1.8}
.hmd-empty{padding:16px;text-align:center;color:#9CA3AF;font-size:12px}
/* ボタン。ページの雰囲気に合わせて角を丸く、控えめに */
.hmd-btn{padding:8px 16px;border:1px solid #E5E7EB;border-radius:9px;background:#fff;color:#4B5563;
         font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s}
.hmd-btn:hover{background:#F9FAFB}
.hmd-btn.pri{background:var(--primary,#16A34A);border-color:var(--primary,#16A34A);color:#fff;font-weight:600}
.hmd-btn.pri:hover{filter:brightness(.96)}
/* 見出しの「設定」リンク。四角いボタンにせず、文字リンク風にして馴染ませる */
.hm-cfg{margin-left:auto;padding:3px 9px;border:none;background:transparent;color:#9CA3AF;
        font-size:11.5px;font-family:inherit;cursor:pointer;border-radius:7px;display:inline-flex;
        align-items:center;gap:4px;transition:background .12s,color .12s}
.hm-cfg:hover{background:#F3F4F6;color:var(--primary,#16A34A)}
@media (max-width:900px){ .hm-grid{grid-template-columns:1fr} }
@media (max-width:640px){
  .hmd-back{padding:0;align-items:flex-end}
  .hmd{max-width:100%;max-height:92vh;border-radius:14px 14px 0 0}
  .hmd-ft{flex-direction:column-reverse}
  .hmd-btn{width:100%;padding:11px}
}
@media (max-width:640px){ .home-cards{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px} }


/* ══════════════════════════════════════════════════════
   通知の履歴
   ══════════════════════════════════════════════════════ */
.hist-back{
  position:fixed; inset:0; background:rgba(17,24,39,.5); z-index:10060;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.hist-box{
  background:#fff; border-radius:14px; width:100%; max-width:640px;
  max-height:min(84vh, 720px); display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden;
}
.hist-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--gray-200);
  font-size:15px; font-weight:700; color:var(--gray-900); flex:0 0 auto;
}
.hist-x{
  border:0; background:transparent; font-size:16px; cursor:pointer;
  color:var(--gray-600); padding:4px 8px; border-radius:6px;
}
.hist-x:hover{ background:var(--gray-100); }
.hist-tools{
  display:flex; gap:8px; padding:10px 18px; flex:0 0 auto;
  border-bottom:1px solid var(--gray-100); flex-wrap:wrap;
}
.hist-tools input, .hist-tools select{
  font:inherit; font-size:13px; padding:7px 10px;
  border:1px solid var(--gray-200); border-radius:8px; background:#fff;
  color:var(--gray-900);
}
.hist-tools input{ flex:1 1 180px; min-width:0; }
.hist-count{ padding:6px 18px 0; font-size:12px; color:var(--gray-600); flex:0 0 auto; }
.hist-list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:8px 18px 4px; }
.hist-empty{ padding:32px 0; text-align:center; color:var(--gray-400); font-size:13px; }
.hist-item{
  border:1px solid var(--gray-200); border-radius:10px;
  padding:10px 12px; margin-bottom:8px; background:#fff;
}
.hist-item.read{ background:var(--gray-50); }
.hist-item-top{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.hist-badge{
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:var(--green-lt); color:var(--green-dk); white-space:nowrap;
}
.hist-badge.hist-remind{ background:#FEF3C7; color:#92400E; }
.hist-badge.hist-forecast{ background:#DBEAFE; color:#1E40AF; }
.hist-badge.hist-budget,
.hist-badge.hist-budget_tori{ background:#EDE9FE; color:#5B21B6; }
.hist-time{ font-size:11px; color:var(--gray-400); }
.hist-arch{ font-size:10px; color:var(--gray-400); margin-left:auto; }
.hist-title{ font-size:13px; font-weight:600; color:var(--gray-900); }
.hist-body{ font-size:12px; color:var(--gray-600); margin-top:2px; line-height:1.5; word-break:break-word; }
.hist-acts{ display:flex; gap:6px; margin-top:6px; }
.hist-acts button{
  font-size:11px; padding:3px 9px; border-radius:6px; cursor:pointer;
  border:1px solid var(--gray-200); background:#fff; color:var(--gray-600);
}
.hist-acts button:hover{ background:var(--gray-100); }
.hist-foot{ padding:10px 18px 14px; flex:0 0 auto; text-align:center; }
.hist-foot button{
  font-size:12px; padding:7px 18px; border-radius:8px; cursor:pointer;
  border:1px solid var(--gray-200); background:#fff; color:var(--gray-600);
}
.hist-foot button:hover{ background:var(--gray-100); }
@media (max-width:640px){
  .hist-back{ padding:0; align-items:flex-end; }
  .hist-box{ max-width:100%; max-height:92vh; border-radius:14px 14px 0 0; }
  .hist-tools input{ flex:1 1 100%; }
}

/* ── ホームのプロフィールカードにある通知ボタン ── */
.hm-push{
  display:block; width:100%; margin-top:10px;
  font:inherit; font-size:12px; font-weight:700; padding:9px 10px;
  border:1px solid var(--gray-200); border-radius:9px;
  background:#fff; color:var(--gray-600); cursor:pointer; transition:.15s;
}
.hm-push:hover{ background:var(--gray-50); }
.hm-push.on{ border-color:var(--green); background:var(--green-lt); }
.hm-push-note{
  margin-top:6px; font-size:10.5px; line-height:1.5; color:var(--gray-400);
}

/* ══════════════════════════════════════════════════════════
   サイドバーとヘッダーの見た目（2026-09）
     ・サイドバーを濃い緑にする
     ・畳んだ状態でマウスを乗せると、本文の上に重なって開く
     ・ハンバーガーで開いたときは、これまでどおり本文を押しのける
   ここから下だけを消せば元の見た目に戻る。
   ══════════════════════════════════════════════════════════ */
:root{
  --sb-bg-top:#0E4A34;      /* サイドバーの地の色（上） */
  --sb-bg-bot:#0A3626;      /*                （下） */
  --sb-fg:rgba(255,255,255,.80);
  --sb-fg-dim:rgba(255,255,255,.42);
  --sb-hover:rgba(255,255,255,.09);
  --sb-line:rgba(255,255,255,.10);
  --sb-active-bg:rgba(45,212,160,.16);
  --sb-active-fg:#8CEDCB;
  --sb-accent:#2DD4A0;
  --sb-sub-bg:rgba(0,0,0,.16);
  --sb-subsub-bg:rgba(0,0,0,.26);
  /*
   * 下位メニューの文字色。
   *   theme.js が走る前（あるいは走らなかったとき）は data-theme が付いていない。
   *   この3つを各テーマの中だけに書いていたため、値が無い状態になり、
   *   色は body から受け継いだ濃い灰になって、濃い緑の上でほぼ読めなかった。
   *   既定（forest）と同じ値をここにも置いて、テーマが決まる前でも読めるようにする。
   */
  --sb-fg-sub:rgba(255,255,255,.66);
  --sb-fg-sub2:rgba(255,255,255,.58);
  --sb-fg-on:#fff;
}

/* ── 地の色 ───────────────────────────────────────── */
.sidebar{
  background:linear-gradient(180deg,var(--sb-bg-top) 0%,var(--sb-bg-bot) 100%);
  border-right:0;
}
.sidebar-foot{
  background:rgba(0,0,0,.20);
  border-top:1px solid var(--sb-line);
}
.sidebar-divider{ background:var(--sb-line); }
.sidebar-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); }
.sidebar-scroll{ scrollbar-color:rgba(255,255,255,.18) transparent; }

/* ── 文字と状態 ───────────────────────────────────── */
.sidebar-label{ color:var(--sb-fg-dim); }
.sidebar-item{ color:var(--sb-fg); }
.sidebar-item:hover{ background:var(--sb-hover); color:var(--sb-fg-on); }
.sidebar-item.active{
  background:var(--sb-active-bg);
  color:var(--sb-active-fg);
  font-weight:700;
  /* 左端の細い線で「いまここ」を示す */
  box-shadow:inset 3px 0 0 var(--sb-accent);
}
.sidebar-arrow,.sidebar-subarrow{ color:rgba(255,255,255,.40); }

.sidebar-submenu{ background:var(--sb-sub-bg); }
.sidebar-subsubmenu{ background:var(--sb-subsub-bg); }
/* 下位メニューの文字色。
   ここを白で固定していたため、明るいテーマでは白地に白文字になり、
   デイリー・ウィークリーなどがほとんど見えなかった。 */
.sidebar-subitem,.sidebar-subtoggle{ color:var(--sb-fg-sub); }
.sidebar-subitem:hover,.sidebar-subtoggle:hover{ background:var(--sb-hover); color:var(--sb-fg-on); }
.sidebar-subsubitem{ color:var(--sb-fg-sub2); }
.sidebar-subsubitem:hover{ background:var(--sb-hover); color:var(--sb-fg-on); }
.sidebar-subitem.active,.sidebar-subsubitem.active{
  background:var(--sb-active-bg);
  color:var(--sb-active-fg);
  border-left-color:var(--sb-accent);
}
/* 絵文字のアイコンは暗い地だと沈むので、少しだけ持ち上げる */
.sidebar-icon,.sidebar-subicon,.sidebar-subsubicon{ filter:saturate(1.1) brightness(1.06); }

/* スマホの引き出しも同じ色にする（元の指定が !important なので合わせる） */
@media(max-width:768px){
  .sidebar{
    background:linear-gradient(180deg,var(--sb-bg-top) 0%,var(--sb-bg-bot) 100%)!important;
  }
}

/* ── 畳んだとき ───────────────────────────────────── */
/* 64px の細い帯では、アイコンを真ん中に置く */
.sidebar.collapsed:not(:hover) .sidebar-item,
.sidebar.collapsed:not(:hover) .sidebar-toggle{
  justify-content:center; padding-left:0; padding-right:0; gap:0;
}
.sidebar.collapsed:not(:hover) .sidebar-arrow{ display:none; }
/* 開いたままの下位メニューは、細い帯では読めないので隠す */
.sidebar.collapsed:not(:hover) .sidebar-submenu{ display:none!important; }
.sidebar.collapsed:not(:hover) .sidebar-divider{ margin:6px 12px; }
/*
 * 見出し（メインメニュー / 業務）は、透明にするだけだと場所を取ったままで、
 * アイコンの間に理由のわからない空きができる。畳んでいる間は高さも消す。
 * グループの切れ目は、上の区切り線が引き受ける。
 */
.sidebar.collapsed:not(:hover) .sidebar-label{
  height:0; padding-top:0; padding-bottom:0; overflow:hidden;
}
.sidebar.collapsed:not(:hover) .sidebar-section{ padding:6px 0; }

/*
 * ★スマホの引き出しでは「畳んだ状態」を効かせない。
 *
 *   引き出し（.sidebar）は max-width:768px で幅いっぱいに開くよう
 *   !important で上書きしてあるが、上書きしているのは幅と位置だけ。
 *   .collapsed の中身の指定（文字を消す・アイコンを中央に寄せる・
 *   下位メニューを隠す）はそのまま残るので、
 *   幅は広いのに文字が消えてアイコンだけが並ぶ、という見た目になっていた。
 *
 *   畳む・開くは PC の話なので、スマホ幅では全部戻す。
 */
@media (max-width:768px){
  .sidebar.collapsed .sidebar-text,
  .sidebar.collapsed:not(:hover) .sidebar-text{ opacity:1!important; width:auto!important; }

  .sidebar.collapsed .sidebar-label,
  .sidebar.collapsed:not(:hover) .sidebar-label{
    opacity:1!important; height:auto!important; padding:6px 16px 4px!important; overflow:hidden;
  }
  .sidebar.collapsed:not(:hover) .sidebar-section{ padding:8px 0!important; }

  .sidebar.collapsed:not(:hover) .sidebar-item,
  .sidebar.collapsed:not(:hover) .sidebar-toggle{
    justify-content:flex-start!important; padding:9px 16px!important; gap:10px!important;
  }
  .sidebar.collapsed:not(:hover) .sidebar-arrow{ display:block!important; }
  .sidebar.collapsed:not(:hover) .sidebar-divider{ margin:6px 16px!important; }

  /* 下位メニューは開閉の状態どおりに。畳んだ状態の一律非表示を打ち消す。 */
  .sidebar.collapsed:not(:hover) .sidebar-submenu{ display:none; }
  .sidebar.collapsed:not(:hover) .sidebar-submenu.open{ display:flex!important; }
  .sidebar.collapsed:not(:hover) .sidebar-submenu.closed{ display:none!important; }
}

/* ── マウスを乗せたら開く（PC だけ）─────────────────── */
/*
 * 本文は押しのけない。.main-content.expanded の margin は 64px のままで、
 * position:fixed のサイドバーだけが広がって上に重なる。
 * 読んでいる場所が動かないので、通りすがりに開いても邪魔にならない。
 *
 * hover:hover / pointer:fine … タッチ端末では効かせない。
 *   指で触れた状態が「ホバー」として残り、開きっぱなしになるため。
 */
@media (min-width:769px) and (hover:hover) and (pointer:fine){
  .sidebar{ transition:width var(--tr), box-shadow var(--tr); }
  .sidebar.collapsed:hover{
    width:var(--sidebar-w);
    box-shadow:8px 0 28px rgba(0,0,0,.22);
    /* すこし待ってから開く。ただ通り過ぎただけで開かないように。 */
    transition-delay:.12s;
  }
  .sidebar.collapsed:hover .sidebar-text{ opacity:1; width:auto; }
  .sidebar.collapsed:hover .sidebar-label{ opacity:1; }
}

/* ── ヘッダー ─────────────────────────────────────── */
.header{
  border-bottom:1px solid var(--gray-200);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.header-toggle{ color:var(--gray-800); }
.header-toggle:hover{ background:var(--green-lt); color:var(--green-dk); }
/* ロゴの前に小さな緑の印を置く（HTML は触らずに足せる） */
.header-logo::before{
  content:''; width:22px; height:22px; border-radius:7px; flex-shrink:0;
  /* サイドバーの色（--sb-bg-top）は使わない。
     白テーマにすると白へのグラデーションになり、印が消えてしまうため。 */
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dk) 100%);
  box-shadow:0 1px 3px rgba(13,74,52,.35);
}
.header-logo span{ letter-spacing:.01em; }
.header-user{ transition:background var(--tr); }
.header-user:hover{ background:var(--gray-100); }
.header-avatar{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--green-lt); }
.header-lang-btn{ border-radius:999px; padding:0 11px; }
.header-lang-btn:hover{ border-color:var(--green); color:var(--green-dk); }

/* ══════════════════════════════════════════════════════════
   サイドバーの配色プリセット
     利用者が自分で選ぶ。<html data-theme="..."> で切り替える。
     何も付いていないときは forest（既定）。

     色を足すときは、下の 11 個をすべて埋めること。
     1つでも抜けると、前のテーマの色が残って読めなくなる組み合わせが出る。
     追加したら assets/theme.js の THEMES にも同じ id を足す。
   ══════════════════════════════════════════════════════════ */

/* 森 ― 既定。会社の緑。 */
html[data-theme="forest"]{
  --sb-bg-top:#0E4A34; --sb-bg-bot:#0A3626;
  --sb-fg:rgba(255,255,255,.80); --sb-fg-dim:rgba(255,255,255,.42);
  --sb-hover:rgba(255,255,255,.09); --sb-line:rgba(255,255,255,.10);
  --sb-active-bg:rgba(45,212,160,.16); --sb-active-fg:#8CEDCB; --sb-accent:#2DD4A0;
  --sb-sub-bg:rgba(0,0,0,.16); --sb-subsub-bg:rgba(0,0,0,.26);

  --sb-fg-sub:rgba(255,255,255,.66); --sb-fg-sub2:rgba(255,255,255,.58); --sb-fg-on:#fff;
}

/* 紺 ― 落ち着いた青。長時間見ていて疲れにくい。 */
html[data-theme="navy"]{
  --sb-bg-top:#1E293B; --sb-bg-bot:#0F172A;
  --sb-fg:rgba(255,255,255,.80); --sb-fg-dim:rgba(255,255,255,.42);
  --sb-hover:rgba(255,255,255,.09); --sb-line:rgba(255,255,255,.10);
  --sb-active-bg:rgba(56,189,248,.18); --sb-active-fg:#93DBFC; --sb-accent:#38BDF8;
  --sb-sub-bg:rgba(0,0,0,.20); --sb-subsub-bg:rgba(0,0,0,.32);

  --sb-fg-sub:rgba(255,255,255,.66); --sb-fg-sub2:rgba(255,255,255,.58); --sb-fg-on:#fff;
}

/* 墨 ― 無彩色。色を使いたくないとき。 */
html[data-theme="charcoal"]{
  --sb-bg-top:#2B2B2B; --sb-bg-bot:#171717;
  --sb-fg:rgba(255,255,255,.80); --sb-fg-dim:rgba(255,255,255,.42);
  --sb-hover:rgba(255,255,255,.10); --sb-line:rgba(255,255,255,.11);
  --sb-active-bg:rgba(251,191,36,.18); --sb-active-fg:#FCD34D; --sb-accent:#FBBF24;
  --sb-sub-bg:rgba(0,0,0,.22); --sb-subsub-bg:rgba(0,0,0,.34);

  --sb-fg-sub:rgba(255,255,255,.68); --sb-fg-sub2:rgba(255,255,255,.60); --sb-fg-on:#fff;
}

/* 藍 ― 深い青緑。 */
html[data-theme="ocean"]{
  --sb-bg-top:#0C4A5E; --sb-bg-bot:#082F3E;
  --sb-fg:rgba(255,255,255,.82); --sb-fg-dim:rgba(255,255,255,.44);
  --sb-hover:rgba(255,255,255,.10); --sb-line:rgba(255,255,255,.11);
  --sb-active-bg:rgba(34,211,238,.18); --sb-active-fg:#8AE8F7; --sb-accent:#22D3EE;
  --sb-sub-bg:rgba(0,0,0,.18); --sb-subsub-bg:rgba(0,0,0,.28);

  --sb-fg-sub:rgba(255,255,255,.68); --sb-fg-sub2:rgba(255,255,255,.60); --sb-fg-on:#fff;
}

/* 葡萄 ― 紫。 */
html[data-theme="plum"]{
  --sb-bg-top:#3B2150; --sb-bg-bot:#251333;
  --sb-fg:rgba(255,255,255,.82); --sb-fg-dim:rgba(255,255,255,.44);
  --sb-hover:rgba(255,255,255,.10); --sb-line:rgba(255,255,255,.11);
  --sb-active-bg:rgba(232,121,249,.18); --sb-active-fg:#F0ABFC; --sb-accent:#E879F9;
  --sb-sub-bg:rgba(0,0,0,.20); --sb-subsub-bg:rgba(0,0,0,.30);

  --sb-fg-sub:rgba(255,255,255,.68); --sb-fg-sub2:rgba(255,255,255,.60); --sb-fg-on:#fff;
}

/*
 * 白 ― 明るいまま使いたい人むけ。
 *   ここだけ地が明るいので、文字は濃い色に入れ替える。
 *   （--sb-fg などを暗い色にしておかないと、白地に白文字になる）
 */
html[data-theme="light"]{
  --sb-bg-top:#FFFFFF; --sb-bg-bot:#F4F6F8;
  /* 見出しの色は #9CA3AF だと白地で 2.5:1 しか出ず、読みにくかった。
     暗いテーマと同じ「うすい灰」の感覚で選ぶと、明るい地では足りなくなる。 */
  --sb-fg:#374151; --sb-fg-dim:#6B7280;
  --sb-hover:rgba(29,158,117,.08); --sb-line:#E5E7EB;
  --sb-active-bg:rgba(29,158,117,.12); --sb-active-fg:#0F6B4F; --sb-accent:#1D9E75;
  --sb-sub-bg:#F8FAFB; --sb-subsub-bg:#F1F4F6;

  --sb-fg-sub:#4B5563; --sb-fg-sub2:#6B7280; --sb-fg-on:#111827;
}
/* 明るいテーマのときだけ、右に境目の線を戻す（白い本文と地続きに見えないように） */
html[data-theme="light"] .sidebar{ border-right:1px solid var(--gray-200); }
html[data-theme="light"] .sidebar-foot{ background:#F1F4F6; }
html[data-theme="light"] .sidebar-scroll::-webkit-scrollbar-thumb{ background:#D1D5DB; }
html[data-theme="light"] .sidebar-scroll{ scrollbar-color:#D1D5DB transparent; }
html[data-theme="light"] .sidebar-item:hover,
html[data-theme="light"] .sidebar-subitem:hover,
html[data-theme="light"] .sidebar-subtoggle:hover,
html[data-theme="light"] .sidebar-subsubitem:hover{ color:#111827; }
html[data-theme="light"] .sidebar-arrow,
html[data-theme="light"] .sidebar-subarrow{ color:#9CA3AF; }
html[data-theme="light"] .sidebar-icon,
html[data-theme="light"] .sidebar-subicon,
html[data-theme="light"] .sidebar-subsubicon{ filter:none; }

/* ── テーマを選ぶ画面 ────────────────────────────── */
.thm-back{
  position:fixed; inset:0; background:rgba(17,24,39,.5); z-index:10060;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.thm-box{
  background:#fff; border-radius:16px; width:100%; max-width:520px;
  box-shadow:var(--shadow-lg); overflow:hidden; animation:fadeUp .2s ease both;
}
.thm-head{
  padding:16px 20px; border-bottom:1px solid var(--gray-200);
  display:flex; align-items:center; gap:10px;
}
.thm-head h3{ font-size:15px; font-weight:700; }
.thm-head .thm-x{
  margin-left:auto; border:none; background:none; cursor:pointer;
  font-size:20px; color:var(--gray-400); line-height:1; padding:2px 6px; border-radius:6px;
}
.thm-head .thm-x:hover{ background:var(--gray-100); color:var(--gray-800); }
.thm-note{ padding:12px 20px 0; font-size:12px; color:var(--gray-600); line-height:1.6; }
.thm-grid{
  padding:14px 20px 20px; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
}
.thm-card{
  border:2px solid var(--gray-200); border-radius:12px; background:#fff;
  padding:0; cursor:pointer; overflow:hidden; text-align:left;
  font-family:inherit; transition:border-color .15s, box-shadow .15s, transform .1s;
}
.thm-card:hover{ border-color:var(--gray-400); transform:translateY(-1px); }
.thm-card.on{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-lt); }
/* 見本 ― 実際のサイドバーの縮小版 */
.thm-prev{ height:74px; display:flex; }
.thm-prev-rail{ width:34px; display:flex; flex-direction:column; gap:5px; padding:8px 0; align-items:center; }
.thm-dot{ width:15px; height:5px; border-radius:3px; }
.thm-prev-body{ flex:1; background:var(--gray-100); }
.thm-name{
  padding:8px 10px; font-size:12px; font-weight:600; color:var(--gray-800);
  display:flex; align-items:center; gap:6px; border-top:1px solid var(--gray-100);
}
.thm-name .thm-chk{ margin-left:auto; color:var(--green); font-size:13px; display:none; }
.thm-card.on .thm-chk{ display:inline; }
@media(max-width:640px){
  .thm-back{ padding:0; align-items:flex-end; }
  .thm-box{ max-width:none; border-radius:16px 16px 0 0; max-height:88vh; overflow-y:auto; }
  .thm-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════
   線のアイコン（assets/icons.js が差し替える）
     絵文字のかわりに img/icons/*.svg を出す。
     色は mask で塗るので、サイドバーのテーマにそのまま追従する。
     ・SVG は線だけ・色を持たない形にしておくこと
     ・差し替えたいときは img/icons/ の同じ名前を上書きするだけ
   ══════════════════════════════════════════════════════════ */
.nrj-ico{
  display:inline-block;
  width:1em; height:1em;
  background-color:currentColor;          /* ← 文字色をそのまま使う */
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
  vertical-align:-.125em;
  flex-shrink:0;
}
/* 置き場所ごとの大きさ。絵文字のときとほぼ同じ見え方にそろえる。 */
.sidebar-icon .nrj-ico{ width:19px; height:19px; }
.sidebar-subicon .nrj-ico{ width:16px; height:16px; }
.sidebar-subsubicon .nrj-ico{ width:15px; height:15px; }
.home-card-icon .nrj-ico{ width:26px; height:26px; }

/* 絵文字だったころは、暗い地で沈まないよう色を持ち上げていた。
   線のアイコンは currentColor なので、その補正は要らない。 */
.sidebar-icon:has(.nrj-ico),
.sidebar-subicon:has(.nrj-ico),
.sidebar-subsubicon:has(.nrj-ico){ filter:none; }

/* ホームのカードは、アイコンだけ会社の緑にする（文字は黒のまま） */
.home-card-icon:has(.nrj-ico){ color:var(--green); }
.notif-bell .nrj-ico{ width:20px; height:20px; }