/* =========================================================
   MOBILE APP POLISH v3
   실제 앱 사용 기준: 상단 탭, 명확한 음악 컨트롤, 안전영역, 터치 UI 보정
   ========================================================= */
:root{--app-mobile-header-h:118px;}
.account-settings-dim{position:fixed;inset:0;z-index:10000;display:none;align-items:flex-end;justify-content:center;background:rgba(2,8,23,.54);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:18px;}
.account-settings-dim.show{display:flex;}
.account-settings-panel{width:min(480px,100%);background:#fff;border-radius:28px;box-shadow:0 28px 80px rgba(2,8,23,.32);overflow:hidden;color:#111827;border:1px solid rgba(15,23,42,.10);}
.account-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 22px 14px;border-bottom:1px solid rgba(15,23,42,.08);}
.account-settings-head strong{display:block;font-size:20px;font-weight:950;letter-spacing:-.6px;}
.account-settings-head span{display:block;margin-top:5px;font-size:13px;color:#64748b;line-height:1.45;}
.account-settings-close{width:38px;height:38px;border-radius:999px;border:0;background:#f1f5f9;color:#0f172a;font-size:22px;font-weight:900;cursor:pointer;}
.account-settings-body{display:grid;gap:12px;padding:18px 22px 22px;}
.account-settings-body label{display:grid;gap:7px;font-size:13px;font-weight:900;color:#334155;}
.account-settings-body input{height:46px;border-radius:16px;border:1px solid #d7dee8;padding:0 14px;font-size:16px;outline:none;background:#f8fafc;color:#111827;}
.account-settings-body input:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.12);}
.account-settings-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}
.account-settings-actions button{height:44px;border-radius:999px;border:0;padding:0 16px;font-weight:950;cursor:pointer;}
.account-settings-actions .secondary{background:#eef2f7;color:#334155;}
.account-settings-actions .primary{background:#07182d;color:#fff;}
.account-settings-status{min-height:20px;font-size:13px;font-weight:850;color:#2563eb;line-height:1.45;}
.workflow-account-top{border:0;border-radius:999px;background:#e9f1ff;color:#0b3b82;font-size:13px;font-weight:950;padding:8px 12px;cursor:pointer;}

@media (max-width: 900px){
  html, body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;overscroll-behavior-x:none!important;}
  body{padding-top:calc(var(--app-mobile-header-h) + env(safe-area-inset-top,0px))!important;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;background:#f6f8fb!important;}
  input,textarea,select,button{font-size:16px;}

  /* 앱 상단: 브랜드 + 음악 컨트롤 + 가로 탭 메뉴 */
  body .app-header{
    position:fixed!important;top:calc(8px + env(safe-area-inset-top,0px))!important;left:10px!important;right:10px!important;
    width:auto!important;height:auto!important;min-height:0!important;z-index:500!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"brand music" "nav nav"!important;
    gap:9px!important;align-items:center!important;padding:10px!important;margin:0!important;
    background:rgba(255,255,255,.94)!important;border:1px solid rgba(15,23,42,.10)!important;border-radius:26px!important;
    box-shadow:0 14px 38px rgba(15,23,42,.16)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
    pointer-events:auto!important;overflow:hidden!important;
  }
  body .app-header .brand{grid-area:brand!important;display:flex!important;min-width:0!important;align-items:center!important;gap:8px!important;color:#07182d!important;text-decoration:none!important;}
  body .app-header .brand-mark{width:34px!important;height:34px!important;flex:0 0 34px!important;box-shadow:none!important;}
  body .app-header .brand span:last-child{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:15px!important;font-weight:950!important;letter-spacing:-.55px!important;}
  body .app-header .header-nav{
    grid-area:nav!important;position:static!important;transform:none!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
    display:flex!important;width:100%!important;max-width:100%!important;height:42px!important;margin:0!important;padding:4px!important;gap:4px!important;
    overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;scrollbar-width:none!important;
    border-radius:18px!important;background:#f1f5f9!important;border:1px solid rgba(15,23,42,.06)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important;
  }
  body .app-header .header-nav::-webkit-scrollbar{display:none!important;}
  body .app-header .header-nav a{
    flex:0 0 auto!important;min-width:auto!important;height:34px!important;padding:0 12px!important;border-radius:14px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;color:#334155!important;
    font-size:12px!important;font-weight:950!important;line-height:1!important;letter-spacing:-.25px!important;text-decoration:none!important;
    writing-mode:horizontal-tb!important;text-orientation:mixed!important;box-shadow:none!important;border:0!important;
  }
  body .app-header .header-nav a.active,
  body .app-header .header-nav a:hover,
  body .app-header .header-nav a:active{background:#07182d!important;color:#fff!important;box-shadow:0 8px 18px rgba(7,24,45,.16)!important;}

  body .music-bar{
    grid-area:music!important;position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;
    width:138px!important;min-width:138px!important;height:36px!important;min-height:36px!important;padding:5px 8px!important;gap:6px!important;margin:0!important;
    border-radius:999px!important;background:#07182d!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px rgba(7,24,45,.22)!important;
  }
  body .music-bar .music-preset-btn,
  body .music-bar #prevTrackBtn,
  body .music-bar #nextTrackBtn{display:none!important;}
  body .music-bar .music-toggle{display:inline-flex!important;width:28px!important;height:28px!important;min-width:28px!important;border-radius:999px!important;background:#fff!important;color:#07182d!important;align-items:center!important;justify-content:center!important;font-size:13px!important;padding:0!important;border:0!important;}
  body .music-bar .music-volume{display:flex!important;align-items:center!important;gap:5px!important;margin:0!important;color:#fff!important;}
  body .music-bar .music-volume span{font-size:13px!important;line-height:1!important;}
  body .music-bar .music-volume input{display:block!important;width:72px!important;height:22px!important;accent-color:#fff!important;}
  body .music-autoplay-hint{position:fixed!important;top:calc(var(--app-mobile-header-h) + 8px + env(safe-area-inset-top,0px))!important;left:14px!important;right:14px!important;width:auto!important;text-align:center!important;z-index:480!important;border-radius:16px!important;}

  /* 로그인: 앱 첫 화면처럼 고정감 있게, 키보드 대응은 내부 스크롤 */
  html.auth-locked, html.auth-locked body{height:100%;overflow:hidden!important;overscroll-behavior:none!important;}
  html.auth-locked #sitePasswordGate{height:100dvh!important;overflow:hidden!important;}
  html.auth-locked .site-password-stage{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;}
  html.auth-locked .site-password-inner{height:100dvh!important;overflow-y:auto!important;padding:28px 18px calc(28px + env(safe-area-inset-bottom,0px))!important;}
  html.auth-locked .site-password-copy h1{font-size:clamp(30px,8vw,42px)!important;line-height:1.12!important;letter-spacing:-1.4px!important;}
  html.auth-locked .site-password-card{border-radius:26px!important;}

  /* 홈 히어로: 사진 유지, 텍스트 겹침 제거 */
  body #homePage.final-home-page .final-hero,
  body .final-hero{height:calc(100svh - var(--app-mobile-header-h))!important;min-height:580px!important;margin-top:calc(-1 * (var(--app-mobile-header-h) + env(safe-area-inset-top,0px)))!important;padding:0!important;overflow:hidden!important;}
  body #homePage.final-home-page .final-hero::after,
  body .final-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,23,.76),rgba(2,8,23,.36) 52%,rgba(2,8,23,.24));pointer-events:none;z-index:1;}
  body #homePage.final-home-page .final-hero-content,
  body .final-hero-content{position:absolute!important;left:22px!important;right:22px!important;top:calc(var(--app-mobile-header-h) + 46px)!important;bottom:auto!important;width:auto!important;max-width:none!important;display:block!important;z-index:5!important;}
  body #homePage.final-home-page .final-hero-kicker,
  body .final-hero-kicker{display:inline-flex!important;align-items:center!important;width:auto!important;max-width:230px!important;height:auto!important;min-height:0!important;padding:7px 10px!important;border-radius:999px!important;font-size:10px!important;line-height:1.15!important;letter-spacing:.25px!important;white-space:normal!important;word-break:keep-all!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important;background:rgba(255,255,255,.12)!important;}
  body #homePage.final-home-page .final-hero-kicker span,
  body .final-hero-kicker span{width:22px!important;height:2px!important;flex:0 0 22px!important;}
  body #homePage.final-home-page .final-hero h1.home-main-title,
  body #homePage.final-home-page .final-hero h1,
  body .final-hero h1{margin:16px 0 0!important;font-size:clamp(34px,8.6vw,44px)!important;line-height:1.08!important;letter-spacing:-1.8px!important;word-break:keep-all!important;overflow-wrap:normal!important;max-width:92vw!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important;text-shadow:0 2px 18px rgba(0,0,0,.32)!important;}
  body #homePage.final-home-page .final-hero h1 span,
  body .final-hero h1 span{display:block!important;white-space:normal!important;word-break:keep-all!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important;}
  body #homePage.final-home-page .final-hero-actions,
  body .final-hero-actions{position:static!important;inset:auto!important;transform:none!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;max-width:100%!important;margin:20px 0 0!important;padding:0!important;gap:8px!important;z-index:6!important;}
  body #homePage.final-home-page .final-hero-actions a,
  body .final-hero-actions a{position:static!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;width:auto!important;height:40px!important;min-height:40px!important;padding:0 6px!important;border-radius:999px!important;font-size:12px!important;font-weight:950!important;line-height:1!important;white-space:nowrap!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important;background:rgba(37,99,235,.94)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 12px 28px rgba(2,8,23,.24)!important;}
  body .final-scroll-cue{display:none!important;}
  body .final-hero-meta{left:22px!important;right:auto!important;bottom:24px!important;z-index:7!important;}

  /* 로그인 후 상단 계정 컨트롤 */
  body .workflow-global-controls{position:fixed!important;top:calc(var(--app-mobile-header-h) + 12px + env(safe-area-inset-top,0px))!important;right:12px!important;left:auto!important;display:flex!important;align-items:center!important;gap:6px!important;max-width:calc(100vw - 24px)!important;z-index:420!important;background:rgba(255,255,255,.88)!important;border:1px solid rgba(15,23,42,.08)!important;border-radius:999px!important;padding:6px!important;box-shadow:0 10px 30px rgba(15,23,42,.12)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;}
  body .workflow-global-controls .user{display:none!important;}
  body .workflow-global-controls button{height:32px!important;border-radius:999px!important;font-size:12px!important;padding:0 10px!important;white-space:nowrap!important;}
  body .workflow-floating-theme{right:16px!important;bottom:calc(22px + env(safe-area-inset-bottom,0px))!important;z-index:390!important;}
  body .admin-patch-fab{right:76px!important;bottom:calc(26px + env(safe-area-inset-bottom,0px))!important;z-index:390!important;}
  body .union-chat-launcher,
  body #unionChatLauncher,
  body .union-chat-fab{right:16px!important;bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;z-index:390!important;}

  body .final-dashboard,
  body #homePage.final-home-page .final-dashboard{margin-bottom:40px!important;}
  body .subpage,
  body #tripPage.subpage,
  body #salaryPage.subpage,
  body #calendarPage.subpage,
  body #workflowPage.subpage,
  body #newsPage.subpage{padding-top:24px!important;padding-bottom:46px!important;}
  body .subpage-shell,body .calculator-shell,body .workflow-shell,body .news-shell{width:100%!important;max-width:100%!important;padding-left:14px!important;padding-right:14px!important;}
  body .subpage-top{border-radius:24px!important;padding:18px!important;}
  body .subpage-title h2{font-size:clamp(26px,7vw,34px)!important;line-height:1.12!important;letter-spacing:-1.2px!important;}
  body table,body .calendar-grid,body .workflow-cafe-board{max-width:100%!important;}
  body .table-wrap,body .calendar-frame,body .workflow-list-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
}

@media (max-width: 430px){
  :root{--app-mobile-header-h:116px;}
  body .app-header{left:8px!important;right:8px!important;border-radius:24px!important;padding:9px!important;gap:8px!important;}
  body .app-header .brand span:last-child{font-size:14px!important;}
  body .app-header .brand-mark{width:32px!important;height:32px!important;flex-basis:32px!important;}
  body .music-bar{width:122px!important;min-width:122px!important;padding:5px 7px!important;gap:5px!important;}
  body .music-bar .music-volume input{width:58px!important;}
  body .app-header .header-nav a{height:33px!important;padding:0 10px!important;font-size:11.5px!important;}
  body #homePage.final-home-page .final-hero-content,
  body .final-hero-content{left:19px!important;right:19px!important;top:calc(var(--app-mobile-header-h) + 38px)!important;}
  body #homePage.final-home-page .final-hero h1.home-main-title,
  body #homePage.final-home-page .final-hero h1,
  body .final-hero h1{font-size:clamp(32px,8.8vw,38px)!important;letter-spacing:-1.45px!important;}
  body #homePage.final-home-page .final-hero-actions,
  body .final-hero-actions{gap:6px!important;}
  body #homePage.final-home-page .final-hero-actions a,
  body .final-hero-actions a{height:38px!important;font-size:11px!important;letter-spacing:-.35px!important;}
  .account-settings-dim{align-items:flex-end!important;padding:10px!important;}
  .account-settings-panel{border-radius:24px!important;}
}

/* =========================================================
   PRACTICAL UI STABILIZATION v4 - tablet/desktop/mobile
   - 상단 탭바 유지
   - 음악 컨트롤 항상 가시화
   - 계정/로그아웃 버튼 헤더와 충돌 방지
   - 태블릿에서 히어로 제목과 카드 겹침 제거
   ========================================================= */
:root{--app-top-gap:16px;--app-header-h:64px;--app-header-radius:28px;}

html,body{overflow-x:hidden!important;}
body .app-header{
  position:fixed!important;
  top:calc(var(--app-top-gap) + env(safe-area-inset-top,0px))!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(1540px,calc(100vw - 64px))!important;
  height:var(--app-header-h)!important;
  min-height:var(--app-header-h)!important;
  display:grid!important;
  grid-template-columns:minmax(210px,auto) minmax(0,1fr) auto!important;
  grid-template-areas:"brand nav music"!important;
  align-items:center!important;
  gap:16px!important;
  padding:10px 14px!important;
  margin:0!important;
  border-radius:var(--app-header-radius)!important;
  background:rgba(255,255,255,.93)!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:0 16px 42px rgba(15,23,42,.16)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  z-index:700!important;
  overflow:visible!important;
}
body .app-header .brand{grid-area:brand!important;min-width:0!important;display:flex!important;align-items:center!important;gap:10px!important;color:#07182d!important;text-decoration:none!important;}
body .app-header .brand-mark{width:40px!important;height:40px!important;flex:0 0 40px!important;}
body .app-header .brand span:last-child{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:18px!important;font-weight:1000!important;letter-spacing:-.7px!important;}
body .app-header .header-nav{
  grid-area:nav!important;
  position:static!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:100%!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:4px!important;
  gap:4px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  white-space:nowrap!important;
  scrollbar-width:none!important;
  border-radius:22px!important;
  background:#f3f6fa!important;
  border:1px solid rgba(15,23,42,.06)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important;
  cursor:grab!important;
  touch-action:pan-x!important;
  overscroll-behavior-inline:contain!important;
}
body .app-header .header-nav.dragging{cursor:grabbing!important;scroll-behavior:auto!important;}
body .app-header .header-nav.dragging a{pointer-events:none!important;}
body .app-header .header-nav::-webkit-scrollbar{display:none!important;}
body .app-header .header-nav a{
  flex:0 0 auto!important;
  height:36px!important;
  min-width:auto!important;
  padding:0 14px!important;
  border-radius:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  color:#263244!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.25px!important;
  text-decoration:none!important;
  box-shadow:none!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}
body .app-header .header-nav a.active,
body .app-header .header-nav a:hover,
body .app-header .header-nav a:active{background:#07182d!important;color:#fff!important;box-shadow:0 8px 20px rgba(7,24,45,.14)!important;}
body .music-bar{
  grid-area:music!important;
  position:static!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:270px!important;
  max-width:300px!important;
  height:44px!important;
  min-height:44px!important;
  padding:6px 12px!important;
  gap:7px!important;
  margin:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.98)!important;
  border:1px solid rgba(15,23,42,.08)!important;
  color:#07182d!important;
  box-shadow:0 10px 26px rgba(15,23,42,.10)!important;
  opacity:1!important;
  z-index:1!important;
}
body .music-btn,body .music-preset-btn{width:32px!important;height:32px!important;min-width:32px!important;flex:0 0 32px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;}
body .music-toggle{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important;}
body .music-volume{display:flex!important;align-items:center!important;gap:7px!important;min-width:86px!important;margin:0!important;}
body .music-volume input{width:74px!important;display:block!important;}

/* 로그인 후 계정 컨트롤은 헤더 아래에 별도 배치해 절대 가려지지 않게 처리 */
body .workflow-global-controls,
html.auth-unlocked body .workflow-global-controls{
  position:fixed!important;
  top:calc(var(--app-top-gap) + var(--app-header-h) + 10px + env(safe-area-inset-top,0px))!important;
  right:max(24px,calc((100vw - min(1540px,calc(100vw - 64px))) / 2 + 8px))!important;
  left:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  max-width:min(360px,calc(100vw - 48px))!important;
  padding:6px 7px 6px 10px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.95)!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:0 12px 34px rgba(15,23,42,.16)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  z-index:690!important;
}
body .workflow-global-controls .user{max-width:130px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
body .workflow-global-controls button{height:32px!important;min-width:auto!important;border-radius:999px!important;padding:0 11px!important;white-space:nowrap!important;font-size:12px!important;font-weight:1000!important;}
body .workflow-account-top{background:#eaf2ff!important;color:#0b3b82!important;border:1px solid rgba(37,99,235,.10)!important;}

body .subpage{padding-top:calc(var(--app-top-gap) + var(--app-header-h) + 74px)!important;}

/* 데스크톱 홈: 제목과 우측 카드가 서로 침범하지 않도록 안전 폭 적용 */
@media (min-width:1181px){
  body #homePage.final-home-page .final-hero-content{top:clamp(150px,22vh,230px)!important;max-width:min(680px,calc(100vw - 760px))!important;}
  body #homePage.final-home-page .final-hero h1.home-main-title{font-size:clamp(58px,6.3vw,104px)!important;line-height:.96!important;letter-spacing:-3.1px!important;}
  body #homePage.final-home-page .final-dashboard{top:clamp(132px,17vh,164px)!important;right:clamp(28px,3.2vw,58px)!important;width:min(620px,36vw)!important;max-width:620px!important;}
}

/* 태블릿/작은 노트북: 헤더는 2줄 상단 탭, 홈 카드는 히어로 아래로 내려 겹침 제거 */
@media (min-width:901px) and (max-width:1180px){
  :root{--app-header-h:112px;--app-top-gap:12px;}
  body .app-header{
    width:calc(100vw - 36px)!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand music" "nav nav"!important;
    gap:9px!important;
    padding:10px 12px!important;
    border-radius:26px!important;
  }
  body .app-header .brand span:last-child{font-size:17px!important;}
  body .app-header .header-nav{height:42px!important;border-radius:20px!important;}
  body .app-header .header-nav a{height:34px!important;font-size:12px!important;padding:0 13px!important;}
  body .music-bar{min-width:250px!important;height:40px!important;min-height:40px!important;padding:5px 10px!important;}
  body .music-btn,body .music-preset-btn{width:30px!important;height:30px!important;min-width:30px!important;}
  body .music-toggle{width:32px!important;height:32px!important;min-width:32px!important;}
  body .workflow-global-controls{top:calc(var(--app-top-gap) + var(--app-header-h) + 8px)!important;right:20px!important;z-index:690!important;}
  body #homePage.final-home-page .final-hero{height:auto!important;min-height:620px!important;padding-top:0!important;overflow:hidden!important;}
  body #homePage.final-home-page .final-hero-content{
    position:absolute!important;
    left:clamp(34px,6vw,78px)!important;
    right:clamp(34px,6vw,78px)!important;
    top:calc(var(--app-top-gap) + var(--app-header-h) + 70px)!important;
    width:auto!important;
    max-width:780px!important;
  }
  body #homePage.final-home-page .final-hero h1.home-main-title{font-size:clamp(52px,8.2vw,82px)!important;line-height:1!important;letter-spacing:-2.5px!important;max-width:760px!important;}
  body #homePage.final-home-page .final-hero-actions{margin-top:24px!important;}
  body #homePage.final-home-page .final-dashboard{
    position:relative!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    width:min(920px,calc(100vw - 48px))!important;
    max-width:920px!important;
    min-height:0!important;
    height:auto!important;
    margin:24px auto 60px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    gap:16px!important;
  }
  body #homePage.final-home-page .final-news-panel{grid-column:1!important;grid-row:auto!important;height:auto!important;min-height:0!important;}
  body #homePage.final-home-page .workflow-home-list,
  body #homePage.final-home-page .final-news-panel .home-news-grid{max-height:none!important;overflow:visible!important;}
  body #homePage.final-home-page .final-news-panel .home-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* 모바일: 상단이 비지 않도록 2줄 헤더 유지 + 음악 컨트롤 축약 */
@media (max-width:900px){
  :root{--app-header-h:116px;--app-top-gap:8px;--app-mobile-header-h:116px;}
  body{padding-top:calc(var(--app-top-gap) + var(--app-header-h) + env(safe-area-inset-top,0px))!important;}
  body .app-header{
    top:calc(var(--app-top-gap) + env(safe-area-inset-top,0px))!important;
    left:8px!important;right:8px!important;transform:none!important;width:auto!important;
    height:auto!important;min-height:0!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand music" "nav nav"!important;
    gap:8px!important;padding:9px!important;border-radius:24px!important;
  }
  body .app-header .brand-mark{width:32px!important;height:32px!important;flex-basis:32px!important;}
  body .app-header .brand span:last-child{font-size:14px!important;}
  body .app-header .header-nav{height:40px!important;border-radius:18px!important;}
  body .app-header .header-nav a{height:32px!important;padding:0 10px!important;font-size:11.5px!important;}
  body .music-bar{min-width:124px!important;width:124px!important;height:34px!important;min-height:34px!important;padding:4px 7px!important;gap:5px!important;background:#07182d!important;color:#fff!important;}
  body .music-bar .music-preset-btn,
  body .music-bar #prevTrackBtn,
  body .music-bar #nextTrackBtn{display:none!important;}
  body .music-bar .music-toggle{display:inline-flex!important;width:27px!important;height:27px!important;min-width:27px!important;background:#fff!important;color:#07182d!important;}
  body .music-bar .music-volume{display:flex!important;min-width:0!important;gap:4px!important;color:#fff!important;}
  body .music-bar .music-volume input{width:56px!important;accent-color:#fff!important;}
  body .workflow-global-controls{top:calc(var(--app-top-gap) + var(--app-header-h) + 10px + env(safe-area-inset-top,0px))!important;right:10px!important;z-index:690!important;}
  body .workflow-global-controls .user{display:none!important;}
  body #homePage.final-home-page .final-hero,
  body .final-hero{margin-top:calc(-1 * (var(--app-top-gap) + var(--app-header-h) + env(safe-area-inset-top,0px)))!important;height:calc(100svh - 20px)!important;min-height:620px!important;}
  body #homePage.final-home-page .final-hero-content,
  body .final-hero-content{top:calc(var(--app-top-gap) + var(--app-header-h) + 44px)!important;left:20px!important;right:20px!important;}
  body #homePage.final-home-page .final-dashboard,
  body .final-dashboard{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:auto!important;max-width:none!important;margin:20px 14px 44px!important;}
}

@media (max-width:430px){
  :root{--app-header-h:112px;--app-mobile-header-h:112px;}
  body .app-header{left:7px!important;right:7px!important;padding:8px!important;}
  body .music-bar{width:116px!important;min-width:116px!important;}
  body .music-bar .music-volume input{width:50px!important;}
  body .app-header .header-nav a{font-size:11px!important;padding:0 9px!important;}
  body #homePage.final-home-page .final-hero-content,
  body .final-hero-content{top:calc(var(--app-top-gap) + var(--app-header-h) + 38px)!important;}
}

/* =========================================================
   v5 SCROLL ACCESSIBILITY FIX
   - 홈 화면에서 태블릿/PC/모바일 모두 세로 스크롤 허용
   - 기존 CSS의 body:has(...){overflow:hidden}을 최종 override
   - 히어로 아래 카드 영역이 잘려도 손가락/휠로 내려갈 수 있게 처리
   ========================================================= */
html,
body{
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
html:not(.auth-locked),
html:not(.auth-locked) body{
  height:auto!important;
  min-height:100%!important;
  overflow-y:auto!important;
  touch-action:pan-y!important;
  overscroll-behavior-y:auto!important;
}
.page.active,
.page.active > main,
.page.active .subpage-shell,
#homePage.active,
#homePage.active .final-home{
  overflow:visible!important;
  touch-action:pan-y!important;
}
body:has(#homePage.final-home-page.active),
html:has(#homePage.final-home-page.active),
body:has(#homePage.active),
html:has(#homePage.active){
  overflow-y:auto!important;
  overflow-x:hidden!important;
  height:auto!important;
  min-height:100%!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
}
body #homePage.final-home-page,
body #homePage.final-home-page .final-home{
  height:auto!important;
  min-height:100dvh!important;
  overflow:visible!important;
  touch-action:pan-y!important;
}
body #homePage.final-home-page .final-hero{
  overflow:hidden!important;
  touch-action:pan-y!important;
}
body #homePage.final-home-page .final-dashboard{
  touch-action:pan-y!important;
}

@media (min-width:901px) and (max-width:1180px){
  body:has(#homePage.final-home-page.active){
    overflow-y:auto!important;
  }
  body #homePage.final-home-page .final-home{
    display:block!important;
    padding-bottom:48px!important;
  }
  body #homePage.final-home-page .final-hero{
    height:auto!important;
    min-height:min(620px,72dvh)!important;
    margin-top:0!important;
  }
  body #homePage.final-home-page .final-dashboard{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    width:min(920px,calc(100vw - 40px))!important;
    max-width:920px!important;
    margin:24px auto 70px!important;
  }
}

@media (max-width:900px){
  body:has(#homePage.final-home-page.active){
    overflow-y:auto!important;
  }
  body #homePage.final-home-page .final-home{
    display:block!important;
    padding-bottom:42px!important;
  }
  body #homePage.final-home-page .final-hero{
    height:auto!important;
    min-height:620px!important;
    margin-top:calc(-1 * (var(--app-top-gap) + var(--app-header-h) + env(safe-area-inset-top,0px)))!important;
  }
  body #homePage.final-home-page .final-dashboard{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    margin:20px 14px calc(52px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* 로그인 화면은 예외적으로 배경 스크롤 잠금 유지 */
html.auth-locked,
html.auth-locked body{
  height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}


/* =========================================================
   v6 WORKFLOW SMS + AI CHAT PANEL FIX
   - 업무 등록 제목칸 단일화에 맞춘 폼 간격 보정
   - 모바일/태블릿에서 AI 챗봇이 상단 헤더와 계정 버튼에 가려지지 않게 아래에서 열림
   - 닫기 버튼은 항상 보이는 헤더 안에 고정
   ========================================================= */
.workflow-form-card .workflow-field-help{display:block;margin-top:6px;color:#64748b;font-size:12px;font-weight:750;line-height:1.45;}

body .union-chat-panel{
  z-index:760!important;
}
body .union-chat-head{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  min-height:58px!important;
}
body .union-chat-close,
body .union-chat-icon-btn{
  position:relative!important;
  z-index:4!important;
  flex:0 0 auto!important;
}

@media (min-width:901px) and (max-width:1180px){
  body .union-chat-panel.open,
  body .union-chat-panel{
    top:calc(var(--app-top-gap) + var(--app-header-h) + 74px + env(safe-area-inset-top,0px))!important;
    bottom:22px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(760px,calc(100vw - 40px))!important;
    height:auto!important;
    max-height:none!important;
    min-width:0!important;
    min-height:0!important;
    border-radius:26px!important;
  }
}

@media (max-width:900px){
  body .union-chat-panel.open,
  body .union-chat-panel{
    top:calc(var(--app-top-gap) + var(--app-header-h) + 58px + env(safe-area-inset-top,0px))!important;
    bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    min-width:0!important;
    min-height:0!important;
    border-radius:24px!important;
    overflow:hidden!important;
  }
  body .union-chat-head{
    min-height:56px!important;
    padding:12px 14px!important;
  }
  body .union-chat-head strong{font-size:15px!important;}
  body .union-chat-head span{display:none!important;}
  body .union-chat-actions{gap:8px!important;}
  body .union-chat-close,
  body .union-chat-icon-btn{width:36px!important;height:36px!important;min-width:36px!important;}
  body .union-chat-body{padding:14px!important;}
  body .union-chat-form{padding:10px!important;gap:8px!important;}
}

@media (max-width:430px){
  body .union-chat-panel.open,
  body .union-chat-panel{
    top:calc(var(--app-top-gap) + var(--app-header-h) + 52px + env(safe-area-inset-top,0px))!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* v7 practical information architecture: 업무 우선, 파일함, 네이버 카페형 게시판 */

/* workflow board cafe style */
.workflow-main-wide{max-width:1180px!important;margin:0 auto!important;}
.workflow-toolbar{position:sticky;top:126px;z-index:10;background:rgba(247,250,255,.92);backdrop-filter:blur(16px);border:1px solid rgba(15,35,65,.08);border-radius:22px;padding:12px!important;margin-bottom:14px;box-shadow:0 12px 34px rgba(15,35,65,.08);}
.workflow-filter-group{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;padding-bottom:2px;}
.workflow-filter-group button{border-radius:999px!important;border:1px solid #dbe5f2!important;background:#fff!important;color:#334155!important;font-weight:850!important;min-height:38px;}
.workflow-filter-group button.active{background:#071a33!important;color:#fff!important;border-color:#071a33!important;}
.workflow-cafe-board{overflow:hidden;border:1px solid #dbe5f2;border-radius:22px;background:#fff;box-shadow:0 18px 48px rgba(15,35,65,.08);}
.workflow-cafe-head,.workflow-cafe-row{display:grid;grid-template-columns:58px 104px 128px minmax(220px,1fr) 116px 96px 70px;gap:10px;align-items:center;}
.workflow-cafe-head{padding:13px 18px;background:#f1f6fc;color:#526173;font-size:.78rem;font-weight:950;border-bottom:1px solid #dbe5f2;}
.workflow-cafe-row{padding:16px 18px;text-decoration:none;color:#122033;border-bottom:1px solid #edf1f7;transition:.18s ease;background:#fff;}
.workflow-cafe-row:hover{background:#f8fbff;transform:translateY(-1px);}
.workflow-cafe-row:last-child{border-bottom:0;}
.workflow-cafe-row.urgent{background:linear-gradient(90deg,rgba(255,59,48,.08),#fff 26%);}
.workflow-cafe-row.done{background:#fafbfc;color:#6b7686;}
.workflow-cafe-row .title strong{display:block;font-size:1.02rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.workflow-cafe-row .title em{display:block;margin-top:4px;font-style:normal;font-size:.82rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.workflow-cafe-row .work{font-size:.82rem;color:#334155;font-weight:800;}
.workflow-work-badge{display:inline-block;max-width:118px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:999px;padding:6px 9px;background:#e8f1ff;color:#075ad7;}
.workflow-work-empty{color:#94a3b8;}
.workflow-cafe-row .no,.workflow-cafe-row .date,.workflow-cafe-row .view,.workflow-cafe-row .author{font-size:.86rem;color:#64748b;font-weight:750;}

/* workflow detail: body first, readable like cafe post */
.workflow-detail-card{max-width:1040px!important;margin:0 auto!important;background:#fff!important;border-radius:28px!important;box-shadow:0 24px 70px rgba(15,35,65,.10)!important;border:1px solid #dbe5f2!important;overflow:hidden;}
.workflow-detail-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:18px!important;align-items:start!important;padding:28px 30px 20px!important;background:linear-gradient(180deg,#f8fbff,#fff)!important;border-bottom:1px solid #e5edf7!important;}
.workflow-detail-head h3{font-size:clamp(1.7rem,3.2vw,2.7rem)!important;line-height:1.18!important;letter-spacing:-.045em!important;margin:12px 0 8px!important;color:#071a33!important;}
.workflow-detail-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:8px!important;max-width:390px!important;}
.workflow-detail-actions button{border-radius:999px!important;min-height:38px!important;padding:0 14px!important;font-weight:850!important;}
.workflow-detail-body{font-size:1.08rem!important;line-height:1.9!important;letter-spacing:-.01em!important;color:#1f2a37!important;background:#fff!important;min-height:220px!important;padding:34px 32px!important;border-bottom:1px solid #eef2f7!important;white-space:pre-wrap!important;}
.workflow-detail-files,.workflow-tags.detail-tags,.workflow-sms-toggle,.workflow-detail-status,.workflow-detail-grid,.workflow-comments.detail-comments{margin-left:28px!important;margin-right:28px!important;}
.workflow-detail-status{background:#f8fbff!important;border:1px solid #dbe5f2!important;border-radius:18px!important;padding:16px!important;}

/* file library */
.file-shell{max-width:1180px!important;}
.file-cafe-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;}
.file-cafe-board-panel,.file-upload-panel{background:#fff;border:1px solid #dbe5f2;border-radius:26px;box-shadow:0 20px 56px rgba(15,35,65,.08);}
.file-cafe-board-panel{padding:16px;}
.file-upload-panel{padding:18px;position:sticky;top:138px;}
.file-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.file-toolbar .workflow-search{min-width:260px;}
.file-cafe-board{border:1px solid #dbe5f2;border-radius:20px;overflow:hidden;background:#fff;}
.file-cafe-head,.file-cafe-row{display:grid;grid-template-columns:104px minmax(240px,1fr) 110px 96px 126px;gap:12px;align-items:center;}
.file-cafe-head{background:#f1f6fc;color:#526173;font-size:.78rem;font-weight:950;padding:13px 16px;border-bottom:1px solid #dbe5f2;}
.file-cafe-row{padding:16px;border-bottom:1px solid #edf1f7;}
.file-cafe-row:last-child{border-bottom:0;}
.file-cafe-row .category b{display:inline-flex;border-radius:999px;background:#eef5ff;color:#075ad7;padding:7px 10px;font-size:.8rem;}
.file-cafe-row .title strong{display:block;font-size:1.02rem;color:#102033;letter-spacing:-.02em;}
.file-cafe-row .title em{display:block;font-style:normal;color:#64748b;margin-top:5px;line-height:1.45;}
.file-cafe-row .title small{display:block;color:#7b8798;margin-top:8px;font-weight:750;}
.file-cafe-row .author,.file-cafe-row .date{color:#64748b;font-weight:800;font-size:.86rem;}
.file-cafe-row .download{display:flex;gap:6px;align-items:center;justify-content:flex-end;}
.file-cafe-row .download a,.file-cafe-row .download button,.file-upload-open{border:0;border-radius:999px;background:#071a33;color:#fff!important;text-decoration:none;padding:9px 12px;font-weight:900;font-size:.84rem;cursor:pointer;}
.file-cafe-row .download button{background:#eef2f7;color:#334155!important;}
.file-form textarea{min-height:120px;}
.file-input-label input{padding:14px!important;background:#f8fbff!important;border:1px dashed #b7c6d9!important;}

@media (max-width:1100px){
  .workflow-home-strip{grid-column:1 / -1!important;}
  .workflow-cafe-head{display:none;}
  .workflow-cafe-row{grid-template-columns:1fr auto!important;gap:8px!important;padding:16px!important;}
  .workflow-cafe-row .no,.workflow-cafe-row .state,.workflow-cafe-row .work,.workflow-cafe-row .author,.workflow-cafe-row .date,.workflow-cafe-row .view{font-size:.78rem;}
  .workflow-cafe-row .title{grid-column:1 / -1;order:-1;}
  .workflow-cafe-row .state{grid-column:1;}
  .workflow-cafe-row .work{grid-column:2;justify-self:end;}
  .workflow-cafe-row .no::before{content:'번호 ';color:#94a3b8;}
  .workflow-cafe-row .author::before{content:'작성 ';color:#94a3b8;}
  .workflow-cafe-row .date::before{content:'등록 ';color:#94a3b8;}
  .workflow-cafe-row .view::before{content:'조회 ';color:#94a3b8;}
  .file-cafe-layout{grid-template-columns:1fr;}
  .file-upload-panel{position:relative;top:auto;display:none;}
  .file-upload-panel.show{display:block;}
}
@media (max-width:760px){
  .workflow-toolbar{top:118px;border-radius:18px!important;}
  .workflow-detail-head{grid-template-columns:1fr!important;padding:22px 18px 16px!important;}
  .workflow-detail-actions{justify-content:flex-start!important;max-width:none!important;}
  .workflow-detail-body{padding:24px 18px!important;font-size:1rem!important;min-height:180px!important;}
  .workflow-detail-files,.workflow-tags.detail-tags,.workflow-sms-toggle,.workflow-detail-status,.workflow-detail-grid,.workflow-comments.detail-comments{margin-left:16px!important;margin-right:16px!important;}
  .file-toolbar{display:block;}
  .file-toolbar .workflow-search{min-width:0;margin-top:10px;}
  .file-cafe-head{display:none;}
  .file-cafe-row{grid-template-columns:1fr!important;gap:8px!important;}
  .file-cafe-row .download{justify-content:flex-start;}
}

/* v9: requested menu order + home quick actions priority */
body #homePage.final-home-page .final-hero-actions,
body .final-hero-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
}
body #homePage.final-home-page .final-hero-actions a,
body .final-hero-actions a{
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.18)!important;
}
body #homePage.final-home-page .final-hero-actions a:first-child,
body .final-hero-actions a:first-child{
  background:#165dff!important;
  border-color:#165dff!important;
  color:#fff!important;
  box-shadow:0 18px 44px rgba(22,93,255,.28)!important;
}

@media (max-width: 900px){
  body #homePage.final-home-page .final-hero-actions,
  body .final-hero-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    gap:8px!important;
    margin-top:20px!important;
  }
  body #homePage.final-home-page .final-hero-actions a,
  body .final-hero-actions a{
    width:100%!important;
    min-height:40px!important;
    height:40px!important;
    padding:0 8px!important;
    font-size:12px!important;
  }
}

@media (max-width: 420px){
  body #homePage.final-home-page .final-hero-actions,
  body .final-hero-actions{
    grid-template-columns:1fr 1fr!important;
  }
  body #homePage.final-home-page .final-hero-actions a,
  body .final-hero-actions a{
    font-size:11.5px!important;
    letter-spacing:-.4px!important;
  }
}

/* =========================================================
   v10 MOBILE COMPACT APP REFINEMENT
   - 갤럭시 S9+급 좁은 화면에서 헤더/계정/히어로가 겹치지 않도록 재배치
   - 상단 메뉴는 유지하되 높이와 여백을 줄이고, 본문 시작 위치를 안정화
   - 하단 플로팅 버튼 충돌 완화
   ========================================================= */
@media (max-width: 520px){
  :root{--app-header-h:96px!important;--app-mobile-header-h:96px!important;--app-top-gap:6px!important;}

  body{padding-top:calc(var(--app-top-gap) + var(--app-header-h) + env(safe-area-inset-top,0px))!important;}

  body .app-header{
    left:8px!important;right:8px!important;top:calc(6px + env(safe-area-inset-top,0px))!important;
    padding:7px!important;gap:6px!important;border-radius:22px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand music" "nav nav"!important;
    box-shadow:0 12px 30px rgba(2,8,23,.18)!important;
  }
  body .app-header .brand{gap:7px!important;}
  body .app-header .brand-mark{width:30px!important;height:30px!important;flex:0 0 30px!important;}
  body .app-header .brand span:last-child{font-size:13.5px!important;letter-spacing:-.55px!important;}

  body .music-bar{
    width:106px!important;min-width:106px!important;height:32px!important;min-height:32px!important;
    padding:4px 7px!important;gap:4px!important;border-radius:999px!important;
  }
  body .music-bar .music-toggle{width:26px!important;height:26px!important;min-width:26px!important;font-size:12px!important;}
  body .music-bar .music-volume{gap:3px!important;}
  body .music-bar .music-volume span{font-size:12px!important;}
  body .music-bar .music-volume input{width:43px!important;height:20px!important;}

  body .app-header .header-nav{
    height:35px!important;min-height:35px!important;padding:3px!important;gap:3px!important;border-radius:16px!important;
    scroll-padding-left:4px!important;
  }
  body .app-header .header-nav a{
    height:29px!important;min-height:29px!important;padding:0 10px!important;border-radius:14px!important;
    font-size:11px!important;letter-spacing:-.35px!important;
  }

  body .workflow-global-controls{
    top:calc(var(--app-top-gap) + var(--app-header-h) + 8px + env(safe-area-inset-top,0px))!important;
    right:12px!important;padding:5px!important;gap:4px!important;border-radius:999px!important;
    max-width:calc(100vw - 24px)!important;background:rgba(255,255,255,.92)!important;
    box-shadow:0 10px 24px rgba(2,8,23,.16)!important;
  }
  body .workflow-global-controls button,
  body .workflow-account-top,
  body #logoutBtn,
  body #adminStatusPill{
    min-height:34px!important;height:34px!important;padding:0 11px!important;font-size:12px!important;border-radius:999px!important;
  }
  body .workflow-global-controls .user,
  body #adminStatusPill{display:none!important;}

  body #homePage.final-home-page .final-hero,
  body .final-hero{
    min-height:560px!important;height:auto!important;
    margin-top:calc(-1 * (var(--app-top-gap) + var(--app-header-h) + env(safe-area-inset-top,0px)))!important;
  }
  body #homePage.final-home-page .final-hero::after,
  body .final-hero::after{
    background:linear-gradient(180deg,rgba(2,8,23,.72) 0%,rgba(2,8,23,.52) 42%,rgba(2,8,23,.66) 100%)!important;
  }
  body #homePage.final-home-page .final-hero-content,
  body .final-hero-content{
    left:18px!important;right:18px!important;
    top:calc(var(--app-top-gap) + var(--app-header-h) + 92px + env(safe-area-inset-top,0px))!important;
    max-width:none!important;
  }
  body #homePage.final-home-page .final-hero-kicker,
  body .final-hero-kicker{
    max-width:210px!important;padding:6px 9px!important;font-size:9.5px!important;letter-spacing:.2px!important;
  }
  body #homePage.final-home-page .final-hero h1.home-main-title,
  body #homePage.final-home-page .final-hero h1,
  body .final-hero h1{
    margin-top:14px!important;font-size:clamp(30px,9.3vw,36px)!important;line-height:1.16!important;letter-spacing:-1.25px!important;
    max-width:100%!important;text-shadow:0 2px 16px rgba(0,0,0,.38)!important;
  }
  body #homePage.final-home-page .final-hero-actions,
  body .final-hero-actions{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin-top:18px!important;width:100%!important;
  }
  body #homePage.final-home-page .final-hero-actions a,
  body .final-hero-actions a{
    height:39px!important;min-height:39px!important;border-radius:18px!important;font-size:12px!important;
    background:rgba(255,255,255,.20)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;
  }
  body #homePage.final-home-page .final-hero-actions a:first-child,
  body .final-hero-actions a:first-child{background:#165dff!important;}
  body .final-hero-meta{left:18px!important;bottom:22px!important;}

  body #homePage.final-home-page .final-dashboard,
  body .final-dashboard{margin:16px 12px 86px!important;}

  body .file-patch-toggle,
  body #filePatchToggle{right:12px!important;bottom:92px!important;z-index:640!important;}
  body .theme-toggle,
  body #themeToggle{right:14px!important;bottom:34px!important;z-index:641!important;}
  body .union-chat-fab,
  body #unionChatFab,
  body #openUnionChatBtn{right:14px!important;bottom:150px!important;z-index:642!important;}
}

@media (max-width: 360px){
  body .app-header .brand span:last-child{font-size:12.8px!important;}
  body .music-bar{width:98px!important;min-width:98px!important;}
  body .music-bar .music-volume input{width:37px!important;}
  body .app-header .header-nav a{font-size:10.6px!important;padding:0 9px!important;}
  body #homePage.final-home-page .final-hero-content,
  body .final-hero-content{top:calc(var(--app-top-gap) + var(--app-header-h) + 88px + env(safe-area-inset-top,0px))!important;}
  body #homePage.final-home-page .final-hero h1.home-main-title,
  body #homePage.final-home-page .final-hero h1,
  body .final-hero h1{font-size:clamp(28px,9vw,32px)!important;}
}

/* v51 mobile music bar: compact controls only, avoiding squeezed volume UI in APK/PWA headers. */
@media (max-width: 900px){
  body .app-header .music-bar,
  body .music-bar{
    grid-area:music!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:34px!important;
    min-height:34px!important;
    padding:4px 5px!important;
    gap:5px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    justify-self:end!important;
    overflow:visible!important;
    border-radius:999px!important;
    background:#07182d!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:0 10px 24px rgba(7,24,45,.22)!important;
  }
  body .music-bar .music-preset-btn,
  body .music-bar .music-toggle{
    display:inline-flex!important;
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    flex:0 0 26px!important;
    padding:0!important;
    border-radius:999px!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(255,255,255,.16)!important;
    font-size:12px!important;
    font-weight:1000!important;
    line-height:1!important;
  }
  body .music-bar .music-preset-btn{
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
  }
  body .music-bar .music-preset-btn.active{
    background:#fff!important;
    color:#07182d!important;
    border-color:#fff!important;
    box-shadow:none!important;
  }
  body .music-bar .music-toggle{
    background:rgba(255,255,255,.92)!important;
    color:#07182d!important;
  }
  body .music-bar #prevTrackBtn,
  body .music-bar #nextTrackBtn,
  body .music-bar .music-volume{
    display:none!important;
  }
}

@media (max-width: 360px){
  body .music-bar .music-preset-btn,
  body .music-bar .music-toggle{
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    flex-basis:25px!important;
  }
}

/* =========================================================
   ANDROID INSTALLED APP MUSIC BAR FIX v54
   - Android WebView에서 볼륨/아이콘이 잘리거나 0처럼 보이는 문제 보정
   - 모바일 상단 음악바는 1 / 2 / 재생·일시정지만 표시
   ========================================================= */
@media (max-width:700px){
  body .app-header{
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  body .music-bar{
    grid-area:music!important;
    position:static!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    min-height:42px!important;
    padding:5px 7px!important;
    gap:6px!important;
    margin:0!important;
    overflow:visible!important;
    border-radius:999px!important;
    background:#07182d!important;
    color:#fff!important;
    border:0!important;
    box-shadow:0 10px 24px rgba(7,24,45,.22)!important;
  }

  body .music-bar .music-preset-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    flex:0 0 32px!important;
    padding:0!important;
    border-radius:999px!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:950!important;
    background:#fff!important;
    color:#07182d!important;
    border:1px solid rgba(255,255,255,.55)!important;
  }

  body .music-bar .music-preset-btn.active{
    background:#fff!important;
    color:#07182d!important;
    box-shadow:inset 0 0 0 2px rgba(7,24,45,.10)!important;
  }

  body .music-bar #prevTrackBtn,
  body .music-bar #nextTrackBtn,
  body .music-bar .music-volume{
    display:none!important;
  }

  body .music-bar .music-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    flex:0 0 32px!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#07182d!important;
    border:1px solid rgba(255,255,255,.55)!important;
    font-size:0!important;
    line-height:0!important;
  }

  body .music-bar .music-toggle::before,
  body .music-bar .music-toggle::after{
    content:""!important;
    position:absolute!important;
    display:block!important;
    box-sizing:border-box!important;
  }

  body .music-bar .music-toggle.music-pause-icon::before{
    left:10px!important;
    top:9px!important;
    width:4px!important;
    height:14px!important;
    border:0!important;
    border-radius:2px!important;
    background:#07182d!important;
  }

  body .music-bar .music-toggle.music-pause-icon::after{
    right:10px!important;
    top:9px!important;
    width:4px!important;
    height:14px!important;
    border:0!important;
    border-radius:2px!important;
    background:#07182d!important;
  }

  body .music-bar .music-toggle.music-play-icon::before{
    left:12px!important;
    top:8px!important;
    width:0!important;
    height:0!important;
    border-top:8px solid transparent!important;
    border-bottom:8px solid transparent!important;
    border-left:12px solid #07182d!important;
    border-right:0!important;
    border-radius:0!important;
    background:transparent!important;
  }

  body .music-bar .music-toggle.music-play-icon::after{
    display:none!important;
  }
}

@media (max-width:390px){
  body .music-bar{
    height:40px!important;
    min-height:40px!important;
    padding:4px 6px!important;
    gap:5px!important;
  }
  body .music-bar .music-preset-btn,
  body .music-bar .music-toggle{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    flex-basis:30px!important;
  }
  body .music-bar .music-toggle.music-pause-icon::before{left:9px!important;top:8px!important;height:14px!important;}
  body .music-bar .music-toggle.music-pause-icon::after{right:9px!important;top:8px!important;height:14px!important;}
  body .music-bar .music-toggle.music-play-icon::before{left:11px!important;top:7px!important;}
}