@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css";
.desktop-mail-header h2 {
  margin:0;
  color:#1b1b1b;
  font-size:20px;
  font-weight:600;
  letter-spacing:0
}
:root {
  --autone-primary:#4f46e5;
  --autone-dark:#1b1b1b;
  --bg-chat:#f4f4f4;
  --bg-app:#f1f3f5;
  --text-main:#1b1b1b;
  --text-muted:#9c9c9c;
  --text-dark-gray:#444;
  --text-gray:#9c9c9c;
  --white:#fff;
  --border-color:#dedede;
  --active-blue:#4f46e5;
  --my-bubble:#e9ecef;
  --other-bubble:#fff;
  --font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --shadow-sm:0 1px 3px #0000000d;
  --shadow-md:0 4px 6px -1px #0000000d;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:10px
}
* {
  box-sizing:border-box;
  letter-spacing:-.25px;
  -webkit-tap-highlight-color:transparent;
  margin:0;
  padding:0
}
html, body, #root {
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden
}
body {
  font-family:var(--font-family);
  color:var(--text-main);
  line-height:1.5
}
button {
  outline:0
}
input, select, textarea, button { font-family:var(--font-family); }
#root {
  justify-content:center;
  align-items:center;
  display:flex;

  background-color:#0000;
  width:100%;
  height:100%}
.app-container {
  background-color:var(--white);
  width:100%;
  max-width:1020px;
  height:100%;
  min-height:800px;
  flex-direction:column;
  display:flex;
  position:relative;
  overflow:hidden
}
.auth-screen {
  background-color: var(--white);
  color: var(--text-main);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  padding: 40px 0;
  display: flex;
  width: 80%;
  max-width:500px;
  margin: 0 auto;
}
.auth-header {
  text-align:left;
  margin-bottom:30px
}
.login-logo {
  object-fit:contain;
  height:24px;
  margin-bottom:16px;
  display:block
}
.login-title {
  color:var(--text-main);
  margin:0;
  font-size:22px;
  font-weight:600
}
.login-form {
  flex-direction:column;
  gap:20px;
  display:flex
}
.login-footer-row {
  justify-content:space-between;
  align-items:center;
  margin-top:15px;
  display:flex
}
.login-helper-links {
  color:var(--text-muted);
  align-items:center;
  gap:10px;
  font-size:13px;
  display:flex
}
.checkbox-save-id {
  cursor:pointer;
  align-items:center;
  gap:6px;
  display:flex
}
.checkbox-save-id input[type=checkbox] {
  border-radius:var(--radius-sm);
  border:1px solid var(--border-color);
  cursor:pointer;
  width:16px;
  height:16px
}
.helper-divider {
  color:#dedede
}
.btn-find-pw {
  color:var(--text-muted);
  cursor:pointer;
  font-size:13px;
  font-family:var(--font-family);
  background:0 0;
  border:none;
  padding:0
}
.login-footer-row .btn-login-submit {
  cursor:pointer;
  border:none;
  padding:12px 30px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  border-radius:var(--radius-sm);
  box-shadow:none;
  background-color:#06f
}
.lock-logo {
  object-fit:contain;
  width:auto;
  height:90px;
  margin-bottom:20px
}
.reset-desc {
  color:var(--text-muted);
  margin-top:8px;
  margin-bottom:0;
  font-size:14px;
  line-height:1.5
}
.btn-reset-submit {
  width:100%;
  margin-top:10px;
  padding:12px;
  font-size:15px
}
.btn-reset-submit.disabled {
  cursor:not-allowed;
  pointer-events:none;
  color:#b2b2b2;
  background-color:#f1f3f5
}
.btn-back-to-login {
  color:var(--text-muted);
  text-align:center;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  font-family:var(--font-family);
  background:0 0;
  border:none;
  margin-top:15px;
  text-decoration:underline
}
.form-group {
  flex-direction:column;
  gap:8px;
  display:flex
}
.form-group label {
  color:var(--autone-dark);
  font-size:13px
}
.form-group input {
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  min-height:40px;
  font-size:14px;
  font-family:var(--font-family);
  outline:none;
  padding:0 15px
}
.btn {
  background-color:var(--autone-dark);
  color:var(--white);
  border-radius:var(--radius-sm);
  cursor:pointer;
  border:none;
  padding:14px;
  font-size:13px;
  font-weight:600;
  transition:transform .1s, opacity .2s
}
.btn:active {
  transform:scale(.98)
}
.btn-secondary {
  color:var(--autone-dark);
  border:1px solid var(--autone-dark);
  background-color:#0000
}
.auth-toggle-link {
  text-align:center;
  cursor:pointer;
  margin-top:16px;
  font-size:14px;
  font-weight:500;
  text-decoration:underline
}
.error-banner {
  color:#fff;
  border-radius:var(--radius-sm);
  text-align:center;
  background-color:#ff3b30;
  padding:12px 16px;
  font-size:14px
}
.dashboard-screen {
  flex-direction:column;
  display:flex;
  position:absolute;
  inset:0;
  overflow:hidden
}
.screen-header {
  z-index:10;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  display:flex;
  position:sticky;
  top:0
}
.screen-header.main-dashboard-header .header-actions {
  gap:0
}
.screen-header.main-dashboard-header .header-actions .icon-btn {
  border-radius:0
}
.screen-header.main-dashboard-header .header-actions .icon-btn svg {
  width:30px;
  height:30px;
  fill:#0373f0;
}
.screen-header h2 {
  font-size:16px;
  font-weight:600
}
.segment-control {
  
  
  align-items:center;

  background-color:#eef1f4;
  border-radius:6px;
  gap:4px;
  padding:4px;
  display:flex}
.segment-btn {
  
  
  
  
  
  outline:none;

  color:var(--text-muted);
  cursor:pointer;
  background:0 0;
  border:none;
  border-radius:5px;
  flex:1;
  padding:8px 20px;
  font-size:13px;
  font-weight:600;
  transition:all .15s}
.segment-btn.active {
  
  
  box-shadow:0 2px 4px #00000014;

  background-color:var(--white);
  color:var(--text-main)}
.chat-meta {
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  display:flex
}
.chat-time {
  color:var(--text-muted);
  font-size:12px
}
.header-actions {
  align-items:center;
  gap:12px;
  display:flex
}
.header-profile-avatar {
  -webkit-user-select:none;
  user-select:none;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  display:flex
}
.icon-btn {
  cursor:pointer;
  color:var(--text-main);
  background:0 0;
  border:none;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  padding:0;
  transition:background-color .2s;
  display:flex
}
.back-btn {
  cursor:pointer;
  color:var(--text-main);
  -webkit-tap-highlight-color:transparent;
  background:0 0;
  border:none;
  border-radius:8px;
  align-items:center;
  gap:2px;
  font-size:15px;
  font-weight:500;
  transition:background-color .2s;
  display:flex;
  padding:0
}
.screen-header.chat-room-header button svg {
  width:22px;
  height:22px
}
.user-list {
  background-color:var(--white);
  flex:1;
  padding:0 0 10px;
  overflow-y:auto
}
.user-item {
  cursor:pointer;
  align-items:center;
  gap:10px;
  min-height:62px;
  margin:0;
  padding:0 20px;
  transition:background-color .15s;
  display:flex
}
.user-item.me-item {
  border:0
}
.user-item:hover,
.member-select-item:hover { background:#f8f8f8; }
.search-bar-container {
  background-color:var(--white);
  border:1px solid var(--border-color);
  border-radius:5px;
  margin:0 20px 10px;
  padding:10px
}
.search-input-wrapper {
  background-color:#fff;
  align-items:center;
  gap:8px;
  padding:0;
  display:flex
}
.search-icon {
  color:#9c9c9c
}
.search-input-wrapper input {
  width:100%;
  color:var(--text-main);
  background:0 0;
  border:none;
  outline:none;
  font-size:13px
}
.search-input-wrapper input::placeholder {
  color:#8c8c8c
}
.avatar-silhouette {
  flex-shrink:0;
  width:40px;
  height:40px;
  position:relative
}
.message-avatar-spacer {
  visibility:hidden
}
.avatar-icon-bg {
  background-color:#e4ebf5;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  display:flex;
  box-shadow:0 1px 2px #0000000d
}
.status-dot {
  border:1px solid var(--white);
  box-sizing:border-box;
  border-radius:50%;
  width:12px;
  height:12px;
  display:inline-block;
  position:absolute;
  bottom:0;
  left:0
}
.status-dot.online {
  background-color:#007aff
}
.avatar {
  background-color:var(--autone-primary);
  width:48px;
  height:48px;
  color:var(--white);
  box-shadow:var(--shadow-sm);
  text-transform:uppercase;
  border-radius:35%;
  justify-content:center;
  align-items:center;
  font-size:20px;
  font-weight:600;
  display:flex
}
.avatar-small {
  width:36px;
  height:36px;
  font-size:16px
}
.user-info {
  flex-direction:column;
  
  display:flex;
  overflow:hidden;

  flex:1;
  min-width:0}
.user-name-row {
  
  gap:6px;
  
  position:relative;

  justify-content:space-between;
  align-items:center;
  display:flex}
.user-name {
  
  box-sizing:border-box;
  align-items:center;
  
  
  display:inline-flex;

  color:#1b1b1b;
  font-size:14px;
  font-weight:500}
.me-badge {
  color:#fff;
  box-sizing:border-box;
  background-color:#3a3a3c;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:22px;
  height:22px;
  font-size:11px;
  font-weight:400;
  line-height:1;
  display:inline-flex
}
.status-badge {
  box-sizing:border-box;
  
  justify-content:center;
  align-items:center;
  height:20px;
  
  
  
  line-height:1;
  display:inline-flex;

  border:1px solid;
  border-radius:10px;
  padding:1px 6px;
  font-size:10px;
  font-weight:500;
  background-color:#0000}
.status-badge.online {
  
  border:1px solid #007aff;

  color:#007aff;
  border-color:#007aff}
.status-badge.offline {
  
  border:1px solid #8e8e93;

  color:#8e8e93;
  border-color:#8e8e93}
.me-item {
  background-color:#fff
}
.user-status {
  color:var(--text-muted);
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  overflow:hidden
}
.chat-room-screen {
  
  
  
  
  
  overflow:hidden;

  background-color:#f4f4f4;
  flex-direction:column;
  display:flex;
  position:absolute;
  inset:0}
.chat-room-screen .screen-header {
  background-color:var(--bg-chat);
  border:0;
  padding:20px 15px
}
.chat-room-screen .screen-header .back-btn { padding:0 !important; }
.chat-title-centered {
  color:#1a1a1a;
  font-size:18px;
  font-weight:600;
  align-items:center;
  gap:4px;
  max-width:calc(100% - 150px);
  min-width:0;
  display:flex;
  position:absolute;
  left:50%;
  transform:translate(-50%);
  white-space:nowrap;
  overflow:hidden
}
.chat-title-centered > :first-child,
.chat-title-centered {
  text-overflow:ellipsis
}
.chat-title-centered > :first-child {
  min-width:0;
  overflow:hidden;
  white-space:nowrap
}
.chat-messages {
  overscroll-behavior:contain;
  background-color:#f4f4f4;
  flex-direction:column;
  flex:1;
  gap:15px;
  min-height:0;
  padding:10px 15px;
  display:flex;
  overflow-y:auto
}
.message-group {
  gap:8px;
  max-width:80%;
  display:flex
}
.message-group.mine {
  flex-direction:row-reverse;
  align-self:flex-end
}
.message-group.other {
  flex-direction:row;
  align-self:flex-start
}
.message-content-wrapper {
  flex-direction:column;
  display:flex
}
.other .message-content-wrapper {
  align-items:flex-start
}
.mine .message-content-wrapper {
  align-items:flex-end
}
.message-bubble {
  word-break:break-word;
  box-shadow:none;
  padding:8px 10px 7px;
  font-size:13px;
  line-height:1.4
}
.chat-attachment-item-card {
  border:0;
  align-items:flex-start;
  width:240px
}
.mine .message-bubble {
  color:#1b1b1b;
  background-color:#daeafd;
  border:none;
  border-radius:8px;
  position:relative
}
.other .message-bubble {
  color:#1b1b1b;
  background-color:#fff;
  border-radius:8px;
  position:relative
}
.message-meta-outside {
  flex-direction:column;
  align-self:flex-end;
  gap:2px;
  margin:0 0 2px;
  line-height:1;
  display:flex
}
.other .message-meta-outside {
  align-items:flex-start
}
.mine .message-meta-outside {
  align-items:flex-end
}
.message-time {
  color:#9c9c9c;
  white-space:nowrap;
  font-size:11px
}
.unread-marker {
  color:#1b1b1b;
  font-size:11px;
  font-weight:600;
  line-height:1
}
.unread-badge-bubble {
  
  
  
  justify-content:center;
  align-items:center;
  min-width:18px;
  height:18px;
  
  
  
  display:flex;
  box-shadow:0 1px 3px #00000026;

  color:#fff;
  background-color:#ff3b30;
  border-radius:10px;
  padding:2px 6px;
  font-size:10px;
  font-weight:600}
.message-row {
  gap:5px;
  display:flex
}
.sender-name {
  color:#9c9c9c;
  margin-bottom:3px;
  font-size:13px
}
.chat-input-box-container {
  background-color:var(--white);
  border-top:1px solid var(--border-color);
  padding:0;
  padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
  flex-direction:column;
  gap:0;
  display:flex;

  margin-bottom:-2px;
  position:relative}
.chat-composer-editor {
  width:100%;
  min-height:60px;
  max-height:80px;
  position:relative
}
.chat-input-box-container .chat-composer-editor textarea {
  z-index:2;
  caret-color:var(--text-main);
  color:transparent;
  -webkit-text-fill-color:transparent;
  background:transparent;
  height:100%;
  position:relative
}
.chat-input-box-container .chat-composer-editor textarea::placeholder {
  color:#8c8c8c;
  -webkit-text-fill-color:#8c8c8c
}
.chat-composer-highlight {
  z-index:1;
  pointer-events:none;
  box-sizing:border-box;
  color:var(--text-main);
  white-space:pre-wrap;
  overflow-wrap:break-word;
  width:100%;
  min-height:60px;
  max-height:80px;
  padding:10px 15px 5px;
  font-family:var(--font-family);
  font-size:13px;
  line-height:1.4;
  position:absolute;
  inset:0;
  overflow:hidden
}
.chat-mention-text {
  color:#007aff;
  font-weight:600
}
.chat-message-link {
  color:#007aff;
  text-decoration:underline;
  word-break:break-all
}
.mention-picker-popover {
  z-index:1200;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #dedede;
  border-radius:8px;
  width:240px;
  max-height:280px;
  padding:8px;
  position:absolute;
  bottom:48px;
  left:12px;
  overflow:hidden;
  box-shadow:0 8px 24px #00000024
}
.mention-picker-title {
  color:#777;
  padding:4px 8px 8px;
  font-size:12px;
  font-weight:600
}
.mention-picker-list {
  max-height:228px;
  overflow-y:auto
}
.mention-picker-item {
  color:#1b1b1b;
  text-align:left;
  cursor:pointer;
  background:transparent;
  border:0;
  border-radius:6px;
  align-items:center;
  gap:10px;
  width:100%;
  height:42px;
  padding:4px 8px;
  font-size:13px;
  display:flex;
  box-shadow:none
}
.mention-picker-item:hover {
  background:#f2f6fb
}
.mention-picker-avatar {
  object-fit:cover;
  background:#f0f0f0;
  border-radius:50%;
  width:30px;
  height:30px;
  flex:none
}
.chat-input-box-container textarea {
  width:100%;
  font-family:var(--font-family);
  resize:none;
  min-height:60px;
  max-height:80px;
  color:var(--text-main);
  background:0 0;
  border:none;
  outline:none;
  padding:10px 15px 5px;
  font-size:13px;
  line-height:1.4
}
.chat-input-box-container textarea::placeholder {
  color:#8c8c8c
}
.chat-input-actions {
  justify-content:space-between;
  align-items:center;
  margin:0 15px;
  display:flex
}
.chat-input-tools {
  align-items:center;
  gap:5px;
  display:flex
}
.tool-btn {
  color:var(--text-muted);
  cursor:pointer;
  background:0 0;
  border:none;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  padding:0;
  transition:all .2s;
  display:flex
}
.tool-btn svg {
  width:20px;
  height:20px
}
.chat-send-pill-btn {
  color:#70757a;
  cursor:pointer;
  background-color:#f1f3f5;
  border:none;
  border-radius:5px;
  outline:none;
  height:28px;
  padding:0 20px;
  font-size:13px;
  font-weight:600;
  transition:all .2s
}
.chat-send-pill-btn:not(:disabled) {
  color:#fff;
  background-color:#0373f0;
}
.chat-send-pill-btn:disabled {
  color:#a6a6a6;
  cursor:not-allowed;
  background-color:#ededed
}
.permission-bar {
  color:#0d47a1;
  background-color:#e3f2fd;
  border-bottom:1px solid #0d47a126;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  font-size:14px;
  display:flex
}
.permission-btn {
  color:#fff;
  border-radius:var(--radius-sm);
  cursor:pointer;
  background-color:#0d47a1;
  border:none;
  padding:6px 12px;
  font-size:13px;
  font-weight:600
}
.permission-btn:active {
  transform:scale(.96)
}
.flex-row {
  align-items:center;
  display:flex
}
.gap-sm {
  gap:8px
}
.chat-list-item {
  align-items:center;
  gap:12px;
  padding:12px 20px;
  line-height:1;
  display:flex
}
.chat-info-wrapper {
  
  
  
  overflow:hidden;

  flex-direction:column;
  flex:1;
  gap:4px;
  min-width:0;
  display:flex}
.chat-item-top-row {
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
  display:flex
}
.chat-item-top-row .user-name {
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
  max-width:calc(100% - 65px);
  overflow:hidden
}
.chat-item-top-row .chat-time {
  flex-shrink:0;
  margin-left:8px
}
.chat-item-bottom-row {
  justify-content:space-between;
  align-items:center;
  width:100%;
  margin-top:5px;
  display:flex;
}
.chat-item-bottom-row:has(.user-status:empty):not(:has(.unread-badge-bubble)) {
  display: none;
}
.chat-item-bottom-row .user-status {
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#666;
  max-width:80%;
  margin:0;
  font-size:13px;
  line-height:15px;
  overflow:hidden
}
.chat-item-bottom-row .unread-badge-bubble {
  color:#fff;
  background-color:#007aff;
  border-radius:9px;
  justify-content:center;
  align-items:center;
  min-width:18px;
  height:18px;
  margin-left:auto;
  padding:0 5px;
  font-size:10px;
  font-weight:600;
  display:flex;
  box-shadow:0 1px 2px #ff4c2b33
}
.avatar-img, .header-profile-img {
  width:100%;
  height:100%;
  border-radius:999px;
  display:block
}
.user-status-msg {
  
  
  
  max-width:250px;

  color:#8e8e93;
  white-space:nowrap;
  text-overflow:ellipsis;
  margin-top:2px;
  font-size:12px;
  overflow:hidden}
.edit-profile-btn {
  border:1px solid var(--border-color);
  color:var(--text-main);
  box-sizing:border-box;
  cursor:pointer;
  background-color:#0000;
  border-radius:999px;
  justify-content:center;
  align-self:center;
  align-items:center;
  height:26px;
  margin:0 0 0 auto;
  padding:0 8px;
  font-size:11px;
  font-weight:500;
  display:inline-flex
}
.modal-overlay {
  z-index:20000;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  background-color:#0006;
  justify-content:center;
  align-items:center;
  display:flex;
  position:fixed;
  inset:0
}
.edit-profile-modal {
  background-color:var(--white);
  border-radius:10px;
  flex-direction:column;
  align-items:center;
  width:340px;
  max-width:auto;
  padding:15px 20px 20px;
  display:flex;
  position:relative;
  box-shadow:0 10px 25px #0000001a
}
.modal-header {
  
  
  width:100%;
  
  
  position:relative;

  
  
  margin-bottom:15px;

  justify-content:space-between;
  align-items:center;
  display:flex}
.modal-title {
  
  text-align:center;
  margin:0;

  color:#1b1b1b;
  font-size:15px;
  font-weight:600}
div.edit-profile-modal .modal-header,
.edit-profile-modal .member-select-modal .modal-header {
  justify-content: center;
  align-items: center;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 30px;
  display: flex;
  position: relative;
}
.modal-close-dot {
  cursor:pointer;
  background-color:#ff5f56;
  border-radius:50%;
  width:12px;
  height:12px;
  transition:opacity .2s;
  position:absolute;
  top:50%;
  left:20px;
  transform:translateY(-50%)
}
div.edit-profile-modal .modal-close-dot,
.edit-profile-modal .member-select-modal .modal-close-dot {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  cursor: pointer;
  background-color: #ff5f56;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: block;
  transition: opacity .2s;
  z-index: 100;
}
div.edit-profile-modal.leave-chat-modal { width:280px; }
div.edit-profile-modal.leave-chat-modal .modal-close-dot { display:none; }
/* 👥 규칙 5: 모달 자체 패딩을 0으로 소거하여 hover 시 배경색이 340px 양옆 끝벽까지 100% 꽉 칠해지도록 처리 */
div.edit-profile-modal:has(.member-select-modal) {
  padding-left: 0;
  padding-right: 0;
}
/* 모달 자체 패딩이 0이 됨에 따라, 헤더 영역에 좌우 20px 패딩을 주어 닫기 닷 위치(left:20px)를 보장 */
div.edit-profile-modal:has(.member-select-modal) .modal-header {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0 20px;
  box-sizing: border-box;
}
div.edit-profile-modal:has(.member-select-modal) .modal-close-dot {
  left: 20px;
}
/* 검색창을 모달 왼쪽 벽으로부터 20px 안쪽 끝선에 칼정합 */
div.edit-profile-modal:has(.member-select-modal) .modal-search-wrapper {
  margin: 0 20px 10px;
}
/* 선택 멤버 칩 영역을 모달 왼쪽 벽으로부터 20px 안쪽 끝선에 칼정합 */
div.edit-profile-modal:has(.member-select-modal) .selected-chips-container {
  padding: 0 20px 10px;
}
/* 부서명 레이블을 모달 왼쪽 벽으로부터 20px 안쪽 끝선에 정합 및 상단 구분 라인 주입 */
div.edit-profile-modal:has(.member-select-modal) .member-select-label {
  padding: 16px 20px 5px; /* 상단 구분 라인과의 콤팩트한 간격을 위해 padding-top을 16px로 복구 완료 */;
  border-top: 1px solid #e8e8e8;
  margin-top: 10px;
}
/* 최상단인 첫 번째 부서명("대표") 타이틀 위로는 구분선 라인 배제 */
div.edit-profile-modal:has(.member-select-modal) .member-select-label:first-of-type {
  border-top: none;
  padding-top: 10px;
  margin-top: 0;
}
/* 멤버 리스트 아이템의 hover 범위가 양옆 100%를 채우도록 패딩을 주고, 콘텐츠 정렬은 20px 안쪽에 정합 */
div.edit-profile-modal:has(.member-select-modal) .member-select-item {
  padding: 12px 20px;
}
/* 구성원 아래에 존재하던 하단 구분 라인은 완벽하게 제거 */
div.edit-profile-modal:has(.member-select-modal) .member-select-item:after {
  display: none;
}
/* 하단 버튼 영역의 패딩을 좌우 20px로 복원하여 버튼 가로폭을 시원하게 정렬 복원 */
div.edit-profile-modal:has(.member-select-modal) .mt-20-w-100 {
  border-top: 1px solid #e8e8e8;
  padding: 20px 20px 0;
}
.edit-profile-modal .modal-title {
  color:var(--text-main);
  text-align:center;
  margin:0;
  font-size:16px;
  font-weight:600
}
.modal-avatar-container {
  width:96px;
  height:96px;
  margin-bottom:32px;
  position:relative
}
.modal-avatar-img {
  object-fit:cover;
  width:100%;
  height:100%;
  box-shadow:var(--shadow-sm);
  background-color:#e4ebf5;
  border-radius:50%;
  display:block
}
.camera-badge-btn {
  background-color:var(--white);
  border:1px solid var(--border-color);
  cursor:pointer;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:30px;
  height:30px;
  transition:transform .1s;
  display:flex;
  position:absolute;
  bottom:0;
  right:0;
  box-shadow:0 2px 5px #0000001a
}
.camera-badge-btn:active {
  transform:scale(.9)
}
.profile-photo-context-menu {
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  z-index:120;
  background-color:#f4f6f8d9;
  border:1px solid #dedede;
  border-radius:10px;
  flex-direction:column;
  gap:4px;
  min-width:132px;
  padding:8px;
  display:flex;
  position:absolute;
  top:68px;
  left:76px;
  box-shadow:0 12px 30px #0000001a
}
.hidden-file-input {
  display:none
}
.status-input-container {
  width:100%;
  margin-bottom:40px;
  position:relative
}
.status-counter-row {
  color:#adb5bd;
  justify-content:flex-end;
  margin-bottom:4px;
  font-size:12px;
  display:flex
}
.status-underline-input {
  width:100%;
  color:var(--text-main);
  text-align:left;
  background:0 0;
  border:none;
  border-bottom:1px solid #dfdfdf;
  outline:none;
  padding:8px 0;
  font-size:14px;
  transition:border-color .2s
}
.status-underline-input:focus {
  border-color:#495057
}
.modal-confirm-btn {
  cursor:pointer;
  border:none;
  border-radius:5px;
  width:100%;
  padding:14px;
  font-size:15px;
  font-weight:500;
  transition:all .2s
}
.modal-confirm-btn:disabled {
  color:#adb5bd;
  cursor:not-allowed;
  background-color:#e9ecef
}
.modal-confirm-btn:not(:disabled) {
  color:var(--white);
  background-color:#0373f0
}
.leave-chat-modal {
  align-items:stretch;
}
.leave-chat-modal .modal-header {
  margin-bottom:26px;
}
.leave-chat-modal-body {
  color:#505050;
  text-align:center;
  flex:1;
  padding:0;
  font-size:13px;
  line-height:1.5;
  margin:0 0 30px;
}
.leave-chat-modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  width:100%;
}
.leave-chat-modal-btn {
  flex:1;
  border:1px solid #dedede;
  border-radius: 5px;
  cursor:pointer;
  height:38px;
  font-size:13px;
  font-weight:500;
}
.leave-chat-modal-btn-cancel {
  color:#1b1b1b;
  background:#fff;
}
.leave-chat-modal-btn-danger {
  color:#fff;
  background:#ff3b30;
  border-color: #ff3b30;
}
.partner-profile-modal {
  background-color:var(--white);
  box-sizing:border-box;
  border-radius:10px;
  flex-direction:column;
  width:340px;
  padding:15px 20px 25px;
  display:flex;
  position:relative;
  box-shadow:0 10px 25px #0000001a
}
.partner-profile-header {
  align-items:center;
  width:100%;
  min-height:12px;
  margin-bottom:20px;
  display:flex;
  position:relative
}
.partner-profile-header .modal-close-dot {
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%)
}
.partner-info-row {
  align-items:center;
  gap:15px;
  margin-bottom:15px;
  display:flex
}
.partner-avatar-img {
  object-fit:cover;
  border:1px solid var(--border-color);
  box-sizing:border-box;
  background-color:#e4ebf5;
  border-radius:50%;
  width:60px;
  height:60px
}
.partner-text-info {
  text-align:left;
  flex-direction:column;
  gap:4px;
  display:flex
}
.partner-name {
  color:var(--text-main);
  font-size:16px;
  font-weight:600;
  line-height:1
}
.partner-status {
  color:var(--text-muted);
  font-size:13px;
  line-height:1.4
}
.partner-actions-card {
  border:1px solid var(--border-color);
  box-sizing:border-box;
  border-radius:8px;
  margin-bottom:20px;
  display:flex
}
.partner-action-btn {
  color:#666;
  cursor:pointer;
  text-align:center;
  box-shadow:none;
  background:0 0;
  border:none;
  flex:1;
  padding:10px 0;
  font-size:13px;
  font-weight:500;
  transition:background-color .2s
}
.partner-action-btn:active {
  background-color:#f1f3f5
}
.partner-actions-divider {
  background-color:var(--border-color);
  width:1px;
  margin:12px 0
}
.partner-details-list {
  text-align:left;
  flex-direction:column;
  gap:12px;
  display:flex
}
.partner-detail-item {
  align-items:center;
  font-size:12px;
  line-height:1;
  display:flex
}
.partner-detail-label {
  width:90px;
  color:var(--text-muted);
  flex-shrink:0
}
.partner-detail-value {
  color:var(--text-main)
}
.chat-system-badge-group {
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
  margin:12px 0;
  display:flex
}
.chat-system-badge-container {
  justify-content:center;
  width:100%;
  margin:12px 0;
  display:flex
}
.chat-system-badge {
  color:#fff;
  text-align:center;
  background-color:#a3a3a3;
  border-radius:6px;
  padding:6px 12px;
  font-size:12px;
  font-weight:500;
  line-height:1.2
}
.plus-context-menu {
  -webkit-backdrop-filter:blur(20px);
  z-index:100;
  background-color:#f4f6f8d9;
  border:1px solid #00000014;
  border-radius:10px;
  flex-direction:column;
  gap:4px;
  min-width:160px;
  margin-bottom:12px;
  padding:8px;
  display:flex;
  position:absolute;
  bottom:100%;
  left:0
}
.plus-menu-item {
  text-align:left;
  width:100%;
  font-family:var(--font-family);
  color:#1b1b1b;
  cursor:pointer;
  background:0 0;
  border:none;
  border-radius:8px;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  font-size:14px;
  font-weight:500;
  transition:background-color .15s;
  display:flex
}
.plus-menu-item:hover {
  background-color: #0373f0;
  color: #ffffff;
}
.plus-menu-item svg {
  fill:#1b1b1b;
  width:18px;
  height:18px;
  display:block
}
.plus-menu-item:hover svg {
  fill: #ffffff;
  stroke: #ffffff;
}
.admin-dashboard-screen {
  background-color:#fff;
  flex-direction:column;
  height:100%;
  padding:20px;
  display:flex;
  overflow-y:auto
}
.admin-card {
  background-color:var(--white);
  border:1px solid var(--border-color);
  border-radius:10px;
  margin-top:15px;
  padding:20px
}
.admin-card h3 {
  color:var(--text-main);
  margin-bottom:12px;
  font-size:16px;
  font-weight:600
}
.modal-backdrop {
  z-index:200;
  background-color:#0006;
  justify-content:center;
  align-items:center;
  display:flex;
  position:fixed;
  inset:0
}
.modal-content {
  background-color:var(--white);
  border:1px solid var(--border-color);
  border-radius:10px;
  flex-direction:column;
  width:90%;
  max-width:480px;
  max-height:85vh;
  display:flex;
  overflow:hidden
}
.modal-content.admin-modal-content {
  padding:15px 20px 20px;
  max-width:400px;
  max-height:600px;
}
.modal-header h3 {
  color:var(--text-main);
  margin:0;
  font-size:18px;
  font-weight:600
}
.close-modal-btn {
  color:var(--text-muted);
  cursor:pointer;
  background:0 0;
  border:none;
  padding:0;
  font-size:24px;
  line-height:1
}
.admin-add-form {
  flex-direction:column;
  flex:1;
  gap:10px;
  padding-right:4px;
  display:flex;
  overflow-y:auto
}
.form-row {
  gap:12px;
  width:100%;
  display:flex
}
.admin-add-form .form-row>.form-group {
  width:100%;
  min-width:0
}
.form-row.two-cols>.form-group, .flex-1 {
  flex:1
}
.flex-2 {
  flex:2
}
.admin-add-form select {
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background-color:var(--white);
  appearance:none;
  width:100%;
  font-family:var(--font-family);
  color:var(--text-main);
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2370757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-position:right 10px center;
  background-repeat:no-repeat;
  background-size:16px;
  outline:none;
  min-height:40px;
  padding:0 32px 0 12px;
  font-size:13px
}
.admin-add-form select option {
  background-color:var(--white);
  color:var(--text-main);
  font-size:14px
}
.admin-add-form .form-group, .admin-add-form input[type=text], .admin-add-form input[type=password] {
  width:100%
}
.admin-screen-header {
  z-index:10;
  justify-content:space-between;
  align-items:center;
  padding:0;
  display:flex;
  position:sticky;
  padding:20px 0 0;
  top:0
}
.admin-screen-header h2 {
  margin:0;
  font-size:20px;
  font-weight:600
}
.admin-screen-title-wrap {
  display:flex;
  align-items:center;
  gap:12px
}
.admin-dashboard-screen .header-actions {
  align-items:center;
  gap:15px;
  display:flex
}
.admin-dashboard-screen .header-actions .icon-btn {
  cursor:pointer;
  background:0 0;
  border:none;
  justify-content:center;
  align-items:center;
  padding:0;
  display:flex
}
.admin-dashboard-screen .web-admin-dropdown {
  background-color:var(--white);
  border:1px solid var(--border-color);
  z-index:100;
  border-radius:8px;
  flex-direction:column;
  width:130px;
  padding:6px;
  display:flex;
  position:absolute;
  top:55px;
  right:20px
}
.admin-dashboard-screen .web-admin-dropdown .plus-menu-item {
  text-align:left;
  cursor:pointer;
  background:0 0;
  border:none;
  width:100%;
  padding:8px 12px;
  font-size:13px;
  color:#1b1b1b;
  border-radius:6px;
  transition:background-color .15s ease, color .15s ease
}
.admin-dashboard-screen .web-admin-dropdown .plus-menu-item:hover {
  background:#f5f5f5;
  color:#1b1b1b
}
.admin-actions-bar {
  gap:10px;
  margin:20px 0;
  display:flex
}
.admin-actions-bar .search-input {
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  outline:none;
  flex:1;
  padding:10px 14px;
  font-size:14px
}
.admin-actions-bar .add-member-btn {
  width:auto;
  color:var(--white);
  cursor:pointer;
  background-color:#1b1b1b;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  font-weight:600
}
.admin-list-header {
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  display:flex
}
.admin-list-header .list-title {
  color:#1b1b1b;
  font-size:15px;
  font-weight:600
}
.admin-list-header .list-count {
  color:var(--text-muted);
  font-size:12px
}
.admin-table-container {
  flex:1;
  overflow-y:auto
}
.admin-table {
  border-collapse:collapse;
  text-align:left;
  width:100%;
  font-size:13px
}
.admin-table thead tr {
  background-color:#fff;
  border-top:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8
}
.admin-table th {
  color:#9c9c9c;
  border-bottom:1px solid var(--border-color);
  padding:10px;
  font-size:12px;
  font-weight:400
}
.admin-table tbody tr {
  border-bottom:1px solid #e8e8e8
}
.admin-table tbody tr:hover {
  background-color:#f8f8f8;
}
.admin-table td {
  color:#1b1b1b;
  vertical-align:middle;
  padding:10px
}
.admin-table .user-id-header {
  width:30%
}
.admin-table .btn-edit-profile {
  color:#444;
  cursor:pointer;
  white-space:nowrap;
  background-color:#0000;
  border:1px solid #dedede;
  border-radius:999px;
  padding:5px 10px 4px;
  font-size:11px
}
.admin-attendance-table th,
.admin-attendance-table td {
  white-space:nowrap
}
.admin-attendance-status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:24px;
  padding:0 8px;
  border:1px solid #dedede;
  border-radius:5px;
  background:#fff;
  color:#505050;
  box-sizing:border-box;
  font-size:11px;
  font-weight:500;
  line-height:1
}
.admin-attendance-status.is-working {
  border-color:#1b1b1b;
  color:#1b1b1b
}
.admin-attendance-status.is-done {
  border-color:#0373f0;
  color:#0373f0
}
.admin-attendance-status.is-empty {
  border-color:#dedede;
  color:#9c9c9c
}
.admin-attendance-status.is-vacation {
  border-color:#4c9861;
  color:#4c9861
}
.admin-attendance-flags {
  color:#1b1b1b;
  font-size:12px;
  font-weight:500
}
.admin-attendance-empty {
  color:#9c9c9c;
  font-size:12px
}
.admin-attendance-row {
  cursor:pointer
}
.admin-attendance-detail-modal {
  width:460px;
  max-width:calc(100vw - 40px)
}
.admin-attendance-detail-filter {
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap:5px;
  padding:0 0 10px;
  box-sizing:border-box
}
.admin-attendance-detail-filter select {
  height:34px;
  padding:0 30px 0 10px;
  border:1px solid #dedede;
  border-radius:4px;
  background-color:#fff;
  color:#505050;
  font-size:12px;
  font-weight:400;
  line-height:1;
  outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c9c9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-position:right 10px center;
  background-repeat:no-repeat;
  background-size:14px;
  box-sizing:border-box
}
.admin-attendance-detail-table-wrap {
  width:100%;
  max-height:420px;
  overflow:auto;
}
.admin-attendance-detail-table-wrap .empty-message {
  text-align:center;
  font-size:13px;
  padding:50px 0;
  border-top:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8;
}
.admin-attendance-detail-table th,
.admin-attendance-detail-table td {
  white-space:nowrap
}
.admin-attendance-detail-table tbody tr:hover {
  background-color: transparent;
}
.admin-attendance-detail-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:15px 0 0;
  line-height:1
}
.admin-attendance-detail-pagination button {
  min-width:54px;
  height:32px;
  padding:0 12px;
  border:1px solid #dedede;
  border-radius:8px;
  background:#fff;
  color:#1b1b1b;
  font-size:12px;
  font-weight:500;
  line-height:1;
  cursor:pointer
}
.admin-attendance-detail-pagination button:disabled {
  background:#ededed;
  color:#a6a6a6;
  cursor:default
}
.admin-attendance-detail-pagination span {
  color:#666;
  font-size:12px;
  font-weight:400
}
.admin-placeholder-card {
  text-align:center;
  color:var(--text-muted);
  padding:50px 20px
}
.admin-placeholder-card p.title {
  font-size:18px;
  font-weight:600
}
.admin-placeholder-card p.desc {
  margin-top:5px;
  font-size:14px
}
.admin-table-container .empty-message {
  color:var(--text-muted);
  text-align:center;
  padding:40px 20px;
  margin:20px 0 0;
  border-top:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8;
  font-size:13px;
}
.admin-modal-content .modal-header {
  justify-content:center;
  align-items:center;
  margin-bottom:30px;
  display:flex;
  position:relative
}
.admin-modal-content .modal-header h3 {
  margin:0;
  font-size:16px;
  font-weight:600
}
.admin-modal-content .modal-header .close-modal-btn {
  cursor:pointer;
  background-color:#ff5f56;
  border:none;
  border-radius:50%;
  width:12px;
  height:12px;
  padding:0;
  font-size:0;
  line-height:0;
  transition:opacity .2s;
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%)
}
.admin-modal-content .modal-header .close-modal-btn:hover {
  opacity:.8
}
input, select, textarea {
  transition:none
}
input:focus, select:focus, textarea:focus {
  border-color:var(--border-color);
  box-shadow:none;
  outline:none
}
.w-full {
  width:100%
}
.flex-1 {
  flex:1
}
.flex-row-gap-5 {
  align-items:center;
  gap:5px;
  width:100%;
  display:flex
}
.flex-row-gap-10 {
  align-items:center;
  gap:10px;
  width:100%;
  display:flex
}
.domain-suffix {
  white-space:nowrap;
  font-size:13px
}
.form-row-checkbox-label {
  cursor:pointer;
  white-space:nowrap;
  align-items:center;
  gap:5px;
  margin:0;
  font-size:14px;
  display:flex
}
.form-row-inner-flex {
  gap:5px;
  width:100%;
  display:flex
}
.form-row-inner-flex .flex-1 {
  min-width:0;
  flex:1 1 0
}
.sales-work-info {
  border-radius:var(--radius-sm);
  border:1px solid var(--border-color);
  color:#333;
  background-color:#f8f9fa;
  padding:12px;
  font-size:13px;
  line-height:1.5
}
.sales-work-info-detail {
  margin-top:4px
}
.work-time-select-wrapper {
  align-items:center;
  gap:8px;
  width:100%;
  display:flex
}
.admin-add-form .submit-btn {
  width:100%;
  margin-top:10px;
  padding:15px 0;
}
.modal-button-group {
  gap:10px;
  margin-bottom:2px;
  display:flex
}
.modal-btn-gray {
  color:#505050;
  border-radius:var(--radius-sm);
  cursor:pointer;
  background-color:#fff;
  border:1px solid #dedede;
  flex:1;
  padding:12px 0;
  font-size:13px;
}
.modal-btn-red {
  color:#ec4c4c;
  border-radius:var(--radius-sm);
  cursor:pointer;
  background-color:#fff;
  border:1px solid #dedede;
  flex:1;
  padding:12px 0;
  font-size:13px;
}
.admin-editing-target-username {
  border-radius:var(--radius-sm);
  color:#9c9c9c;
  background-color:#f5f5f5;
  border:1px solid #dedede;
  min-height:40px;
  padding:10px 14px;
  font-size:13px
}
.admin-placeholder-card-inner {
  text-align:center;
  color:var(--text-muted);
  padding:50px 20px
}
.admin-placeholder-card-title {
  font-size:18px;
  font-weight:600
}
.admin-placeholder-card-desc {
  margin-top:5px;
  font-size:14px
}
.mt-20 {
  margin-top:20px
}
.search-empty-container {
  text-align:center;
  padding:3rem 1.5rem
}
.member-select-modal {
  flex-direction:column;
  height:80vh;
  max-height:580px;
  display:flex
}
.member-select-modal .modal-header {
  margin-bottom:15px
}
.member-select-list {
  flex:1;
  margin-top:0;
  padding-right:0;
  overflow-y:auto
}
.member-select-item {
  cursor:pointer;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  display:flex;
  position: relative;
}
.member-select-item:after { content:""; position:absolute; bottom:0; left:20px; display:block; width:calc(100% - 40px); height:1px; background:#e8e8e8; }
.member-select-item-left {
  align-items:center;
  gap:10px;
  display:flex
}
.member-select-info {
  flex-direction:column;
  gap:0;
  line-height:1;
  display:flex
}
.member-select-name {
  display:block;
  color:var(--text-main);
  font-size:14px;
  font-weight:500
}
.member-select-dept {
  color:var(--text-muted);
  font-size:13px
}
.member-select-checkbox {
  cursor:pointer;
  background-color:var(--white);
  color:#0000;
  border:1.5px solid #dedede;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:18px;
  height:18px;
  display:flex;
  transition:none
}
.member-select-checkbox.checked {
  color:var(--white);
  background-color:#06f;
  border-color:#06f
}
.selected-chips-container {
  border-bottom:1px solid #dedede;
  flex-wrap:wrap;
  gap:8px;
  max-height:90px;
  padding:0 20px 10px;
  display:flex;
  overflow-y:auto
}
.selected-chip {
  color:var(--text-main);
  background-color:#f5f5f5;
  border-radius:16px;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  font-size:12px;
  display:inline-flex
}
.chip-close-btn {
  color:#1b1b1b;
  cursor:pointer;
  background:0 0;
  border:none;
  justify-content:center;
  align-items:center;
  padding:0;
  font-size:14px;
  display:flex
}
.group-avatar-preview {
  background-color:#f1f3f5;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:80px;
  height:80px;
  margin:0 auto 30px;
  display:flex;
  overflow:hidden
}
.group-avatar-img {
  object-fit:cover;
  width:100%;
  height:100%
}
.group-name-input-wrapper {
  width:calc(100% - 40px);
  margin:10px 20px 20px;
  position:relative
}
.group-name-input-wrapper input {
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  outline:none;
  width:100%;
  padding:12px 60px 12px 12px;
  font-size:15px
}
.group-name-counter {
  color:#b2b2b2;
  font-size:13px;
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%)
}
.back-arrow-btn {
  cursor:pointer;
  color:var(--text-main);
  background:0 0;
  border:none;
  justify-content:center;
  align-items:center;
  padding:0;
  display:flex;
  width:10px;
  height:18px;
  line-height:0
}
.group-setting-back-svg {
  width:20px;
  height:20px;
  display:block;
  fill:currentColor;
  overflow:visible
}
.search-empty-text {
  color:var(--text-muted);
  margin:0;
  font-size:13px
}
.w-100 {
  width:100%
}
.h-auto-max-none {
  height:auto;
  max-height:none
}
.modal-search-wrapper {
  margin:0 20px 10px;
}
.avatar-select-wrapper {
  width:38px;
  height:38px
}
.mt-20-w-100 {
  botder-top:1px solid #e8e8e8;
  padding:20px 20px 0;
}
.header-back-title-row {
  justify-content:space-between
}
.title-flex-center {
  text-align:center;
  flex:1
}
.static-close-dot {
  position:static;
  transform:none
}
.member-count-label {
  color:var(--text-muted);
  text-align:left;
  border-top:1px solid #e8e8e8;
  margin:0 20px;
  padding:10px 0 5px;
  font-size:12px;
  font-weight:500
}
.clickable-avatar {
  cursor:pointer;
  position:relative
}
.status-dropdown-menu {
  z-index:1000;
  background-color:var(--white);
  border:1px solid var(--border-color);
  border-radius:12px;
  flex-direction:column;
  gap:2px;
  min-width:130px;
  padding:6px;
  display:flex;
  position:absolute;
  top:48px;
  left:0;
  box-shadow:0 4px 12px #00000014
}
.status-dropdown-item {
  color:var(--text-main);
  cursor:pointer;
  border-radius:8px;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  font-size:13px;
  font-weight:500;
  display:flex
}
.status-dropdown-item.active {
  background-color:#f1f3f5
}
.status-dropdown-dot {
  border-radius:50%;
  width:10px;
  height:10px;
  display:inline-block
}
.status-dot.online, .status-dropdown-dot.online {
  background-color:#007aff
}
.status-dot.away, .status-dropdown-dot.away {
  background-color:#ff9500
}
.status-dot.meeting, .status-dropdown-dot.meeting {
  background-color:#34c759
}
.status-dot.vacation, .status-dropdown-dot.vacation {
  background-color:#ff3b30
}
.status-dot.out, .status-dropdown-dot.out {
  background-color:#af52de
}
.status-dot.offline {
  background-color:#8e8e93
}
.status-badge.away {
  color:#ff9500;
  border-color:#ff9500
}
.status-badge.meeting {
  color:#34c759;
  border-color:#34c759
}
.status-badge.vacation {
  color:#ff3b30;
  border-color:#ff3b30
}
.status-badge.out {
  color:#af52de;
  border-color:#af52de
}
.chat-search-bar {
  border-bottom:1px solid var(--border-color);
  background-color:#f5f5f5;
  align-items:center;
  gap:12px;
  padding:10px 15px;
  animation:.15s ease-out fadeIn;
  display:flex
}
.chat-search-input-wrapper {
  flex:1;
  position:relative
}
.chat-search-input-wrapper svg {
  pointer-events:none;
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%)
}
.chat-search-input {
  background-color:var(--white);
  border:1px solid var(--border-color);
  width:100%;
  height:38px;
  color:var(--text-main);
  box-sizing:border-box;
  border-radius:8px;
  outline:none;
  padding:0 15px 0 35px;
  font-size:13px
}
.chat-search-input:focus {
  border-color:#1b1b1b
}
.chat-search-actions {
  align-items:center;
  gap:8px;
  display:flex
}
.chat-search-actions .icon-btn {
  cursor:pointer;
  color:#1b1b1b;
  background:0 0;
  border:none;
  border-radius:6px;
  justify-content:center;
  align-items:center;
  padding:0;
  display:inline-flex
}
.chat-search-actions .icon-btn svg {
  width:18px;
  height:18px
}
.message-bubble.search-highlight {
  animation:1s infinite alternate pulseHighlight;
  color:#212529;
  background-color:#ffe066;
  border-color:#fcc419
}
.chat-sidebar-overlay {
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  z-index:15000;
  background-color:#0006;
  animation:.2s ease-out fadeIn;
  position:fixed;
  inset:0
}
.chat-sidebar {
  background-color:var(--white);
  z-index:15001;
  box-sizing:border-box;
  border-left:1px solid var(--border-color);
  flex-direction:column;
  width:320px;
  height:100vh;
  animation:.25s cubic-bezier(.16, 1, .3, 1) slideInRight;
  display:flex;
  position:fixed;
  top:0;
  right:0;
  box-shadow:none
}
.chat-sidebar-header {
  border-bottom:1px solid var(--border-color);
  box-sizing:border-box;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  display:flex
}
.chat-sidebar-header .back-btn { padding:0 !important; }
.chat-sidebar-header .back-btn svg { width:20px; height:20px; }
.chat-sidebar-title {
  color:var(--text-main);
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:160px;
  margin:0;
  font-size:15px;
  font-weight:600;
  overflow:hidden
}
.chat-sidebar-header-actions {
  align-items:center;
  gap:8px;
  display:flex
}
.chat-sidebar-header-actions .icon-btn {
  cursor:pointer;
  color:#1b1b1b;
  background:0 0;
  border:none;
  padding:0;
  display:inline-flex
}
.chat-sidebar-header-actions .icon-btn svg {
  width:20px;
  height:20px
}
.chat-sidebar-content {
  flex-direction:column;
  flex:1;
  gap:10px;
  padding:10px 0;
  display:flex;
  overflow-y:auto
}
.sidebar-menu-list {
  border-bottom:1px solid #e8e8e8;
  flex-direction:column;
  padding-bottom:10px;
  display:flex
}
.sidebar-menu-item {
  text-align:left;
  cursor:pointer;
  width:100%;
  min-height:40px;
  color:var(--text-main);
  box-sizing:border-box;
  background:0 0;
  border:none;
  align-items:center;
  gap:8px;
  padding:0 20px;
  font-size:13px;
  display:flex
}
.sidebar-menu-item svg {
  color:#495057;
  flex-shrink:0
}
.sidebar-section {
  flex-direction:column;
  gap:12px;
  padding:0 20px;
  display:flex
}
.sidebar-section-title {
  margin:0;
  font-size:12px;
  font-weight:600
}
.sidebar-section-count {
  color:#9c9c9c;
  font-weight:400
}
.sidebar-member-list {
  flex-direction:column;
  gap:8px;
  display:flex
}
.sidebar-member-item {
  align-items:center;
  gap:12px;
  padding:6px 0;
  display:flex
}
.sidebar-invite-btn {
  cursor:pointer;
  text-align:left;
  color:#007aff;
  background:0 0;
  border:none;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:36px;
  font-size:14px;
  font-weight:500;
  display:flex
}
.invite-icon-wrapper {
  color:#007aff;
  background-color:#e7f5ff;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:38px;
  height:38px;
  display:flex
}
.chat-sidebar-footer {
  box-sizing:border-box;
  padding:15px 20px
}
.sidebar-leave-btn {
  cursor:pointer;
  background-color:#f4f4f4;
  border:none;
  border-radius:4px;
  align-items:center;
  width:100%;
  height:40px;
  padding:0 20px;
  font-size:12px;
  display:flex;
  box-shadow:none
}
@keyframes slideDown {
  0% {
    opacity:0;
    transform:translateY(-100%)
  }

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

}
@keyframes slideInRight {
  0% {
    transform:translate(100%)
  }

to {
    transform:translate(0)
  }

}
@keyframes fadeIn {
  0% {
    opacity:0
  }

to {
    opacity:1
  }

}
@keyframes pulseHighlight {
  0% {
    box-shadow:0 0 #fcc41966
  }

to {
    box-shadow:0 0 0 6px #fcc41900
  }

}
.invite-modal-overlay {
  -webkit-backdrop-filter:blur(1.5px);
  backdrop-filter:blur(1.5px);
  z-index:20000;
  background-color:#0006;
  justify-content:center;
  align-items:center;
  display:flex;
  position:fixed;
  inset:0
}
.invite-modal {
  background-color:var(--white);
  box-sizing:border-box;
  border-radius:12px;
  flex-direction:column;
  width:420px;
  height:520px;
  display:flex;
  overflow:hidden
}
.invite-modal-header {
  border-bottom:1px solid var(--border-color);
  box-sizing:border-box;
  justify-content:space-between;
  align-items:center;
  height:56px;
  padding:0 20px;
  display:flex
}
.invite-modal-title {
  color:var(--text-main);
  margin:0;
  font-size:16px;
  font-weight:600
}
.invite-modal-close-btn {
  cursor:pointer;
  color:#1b1b1b;
  background:0 0;
  border:none;
  border-radius:50%;
  padding:4px;
  display:inline-flex
}
.invite-modal-close-btn:hover {
  background-color:#f1f3f5
}
.invite-modal-search {
  box-sizing:border-box;
  padding:14px 20px
}
.invite-search-wrapper {
  width:100%;
  position:relative
}
.invite-search-wrapper svg {
  color:#8e8e93;
  pointer-events:none;
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%)
}
.invite-search-input {
  box-sizing:border-box;
  background-color:#fafafa;
  border:1px solid #e9ecef;
  border-radius:8px;
  outline:none;
  width:100%;
  height:40px;
  padding:0 16px 0 38px;
  font-size:13px
}
.invite-search-input:focus {
  background-color:var(--white);
  border-color:#1b1b1b
}
.invite-modal-list {
  flex-direction:column;
  flex:1;
  padding:0 20px;
  display:flex;
  overflow-y:auto
}
.invite-user-item {
  cursor:pointer;
  border-bottom:1px solid #f8f9fa;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  display:flex
}
.invite-user-item:last-child {
  border-bottom:none
}
.invite-user-info {
  align-items:center;
  gap:12px;
  display:flex
}
.invite-user-details {
  flex-direction:column;
  gap:2px;
  display:flex
}
.invite-user-name {
  color:var(--text-main);
  font-size:14px;
  font-weight:600
}
.invite-user-meta {
  color:#8e8e93;
  margin-top:2px;
  font-size:11px
}
.invite-check-circle {
  box-sizing:border-box;
  background-color:var(--white);
  border:1px solid #ced4da;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:22px;
  height:22px;
  transition:all .15s;
  display:flex
}
.invite-user-item.selected .invite-check-circle {
  background-color:#007aff;
  border-color:#007aff
}
.invite-check-circle:after {
  content:"";
  border:solid var(--white);
  opacity:0;
  border-width:0 2px 2px 0;
  width:6px;
  height:10px;
  margin-bottom:2px;
  transition:opacity .15s;
  transform:rotate(45deg)
}
.invite-user-item.selected .invite-check-circle:after {
  opacity:1
}
.invite-user-item.already-in {
  opacity:.5;
  cursor:not-allowed
}
.invite-user-item.already-in .invite-check-circle {
  background-color:#e9ecef;
  border-color:#dee2e6
}
.invite-user-item.already-in .invite-check-circle:after {
  opacity:1;
  border-color:#868e96
}
.invite-modal-footer {
  border-top:1px solid var(--border-color);
  box-sizing:border-box;
  justify-content:flex-end;
  padding:16px 20px;
  display:flex
}
.invite-submit-btn {
  color:#8e8e93;
  cursor:not-allowed;
  background-color:#f1f3f5;
  border:none;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  width:100px;
  height:40px;
  font-size:14px;
  font-weight:600;
  transition:all .15s;
  display:flex;
  box-shadow:none
}
.invite-submit-btn.active {
  color:var(--white);
  cursor:pointer;
  background-color:#1b1b1b
}
@keyframes scaleUpInvite {
  0% {
    opacity:0;
    transform:scale(.95)
  }

to {
    opacity:1;
    transform:scale(1)
  }

}
.emoticon-keyboard-drawer {
  opacity:0;
  pointer-events:none;
  background-color:var(--white);
  box-sizing:border-box;
  border-top:1px solid #0000;
  flex-direction:column;
  height:0;
  transition:height .24s cubic-bezier(.16, 1, .3, 1), opacity .16s ease-out, border-color .24s;
  display:flex;
  overflow:hidden;
  box-shadow:none
}
.emoticon-keyboard-drawer.open {
  opacity:1;
  pointer-events:auto;
  border-color:var(--border-color);
  height:270px
}
.emoticon-drawer-grip {
  cursor:grab;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:32px;
  touch-action:none;
  user-select:none;
}
.emoticon-drawer-handle {
  background-color:#e9ecef;
  border-radius:2px;
  flex-shrink:0;
  width:36px;
  height:4px;
  margin:0
}
.emoticon-drawer-grip:active {
  cursor:grabbing
}
.emoticon-drawer-grid {
  box-sizing:border-box;
  flex:1;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
  padding:0 12px 12px;
  display:grid;
  overflow-y:auto
}
.emoticon-item-btn {
  cursor:pointer;
  background:0 0;
  border:none;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  padding:8px;
  transition:background-color .15s;
  display:flex;
  box-shadow:none
}
.emoticon-item-btn:hover { background:#f8f8f8; }
.emoticon-img-thumb {
  object-fit:contain;
  width:auto;
  height:60px;
  display:block
}
.sidebar-empty-box {
  color:#8e8e93;
  justify-content:center;
  align-items:center;
  height:120px;
  font-size:13px;
  display:flex
}
.sidebar-attachments-list {
  flex-direction:column;
  gap:12px;
  padding:0 16px 20px;
  display:flex
}
.sidebar-attachment-item {
  background-color:#f8f9fa;
  border-radius:8px;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  display:flex
}
.attachment-icon-desc {
  flex:1;
  align-items:center;
  gap:12px;
  min-width:0;
  display:flex
}
.attachment-meta {
  flex-direction:column;
  gap:2px;
  min-width:0;
  display:flex
}
.attachment-name {
  color:var(--text-main);
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:500;
  overflow:hidden
}
.attachment-sub {
  color:#8e8e93;
  font-size:11px
}
.attachment-download-link {
  border-radius:6px;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  transition:background-color .15s;
  display:flex
}
.sidebar-media-grid {
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  padding:0 16px 20px;
  display:grid
}
.sidebar-media-grid-item {
  aspect-ratio:1;
  cursor:pointer;
  background-color:#f1f3f5;
  border:0;
  border-radius:6px;
  padding:0;
  overflow:hidden
}
.sidebar-media-thumb {
  object-fit:cover;
  width:100%;
  height:100%;
  display:block
}
.sidebar-links-list {
  flex-direction:column;
  gap:10px;
  padding:0 16px 20px;
  display:flex
}
.sidebar-link-item {
  cursor:pointer;
  background-color:#f8f9fa;
  border-radius:8px;
  align-items:center;
  min-width:0;
  padding:12px;
  display:flex
}
.link-icon-desc {
  flex:1;
  align-items:center;
  gap:12px;
  min-width:0;
  display:flex
}
.link-meta {
  flex-direction:column;
  gap:2px;
  min-width:0;
  display:flex
}
.link-href {
  color:#007aff;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  text-decoration:none;
  overflow:hidden
}
.link-date {
  color:#8e8e93;
  font-size:11px
}
.desktop-app-container {
  background-color:var(--white);
  flex-direction:row;
  width:100%;
  height:100vh;
  display:flex;
  position:relative;
  overflow:hidden
}
.desktop-sidebar {
  background-color:#f8f8f8;
  border-right:1px solid #e8e8e8;
  flex-direction:column;
  flex-shrink:0;
  justify-content:space-between;
  align-items:center;
  width:78px;
  padding:40px 0 10px;
  display:flex
}
.desktop-main-content {
  background-color:#fff;
  flex-direction:column;
  flex-grow:1;
  height:100%;
  display:flex;
  position:relative;
  overflow:hidden
}
.desktop-placeholder-view {
  color:#8e8e93;
  height:100%;
  font-family:var(--font-family);
  text-align:center;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:20px;
  display:flex
}
.desktop-placeholder-view h3 {
  color:#1b1b1b;
  margin-bottom:8px;
  font-size:18px;
  font-weight:600
}
.desktop-placeholder-view p {
  color:#8e8e93;
  font-size:13px
}
.desktop-mail-view {
  display:flex;
  width:100%;
  height:100%;
  min-width:0;
  background:#fff;
  color:#2c3a47;
  font-family:var(--font-family)
}
.mailToastLayer {
  position:fixed;
  top:50%;
  left:50%;
  z-index:10050;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:320px;
  max-width:calc(100vw - 32px);
  min-height:46px;
  padding:0 14px 0 18px;
  border-radius:24px;
  background:#2c3a47;
  color:#fff;
  box-shadow:0 8px 18px rgba(20,21,26,0.18);
  box-sizing:border-box;
  transform:translate(-50%, -50%);
  animation:mailToastIn .16s ease-out
}
.mailToastText {
  min-width:0;
  overflow:visible;
  font-size:14px;
  line-height:1.25;
  font-weight:600;
  white-space:nowrap;
  word-break:keep-all
}
.mailToastClose {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:18px;
  line-height:1;
  font-weight:400;
  cursor:pointer
}
.mailToastClose svg {
  display:block;
  width:18px;
  height:18px;
  fill:currentColor
}
@keyframes mailToastIn {
  from { opacity:0; transform:translate(-50%, calc(-50% + 8px)); }
  to { opacity:1; transform:translate(-50%, -50%); }
}
.desktop-mail-main {
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  height:100%;
  overflow:auto;
  padding:30px 20px 0;
  box-sizing:border-box
}
.desktop-mail-header {
  position:relative;
  z-index:35;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-shrink:0;
  padding:0 0 18px;
  box-sizing:border-box
}
.desktop-mail-title-wrap {
  position:relative;
  display:inline-flex;
  align-items:center
}
.desktop-mail-folder-title {
  margin:0;
  color:#1b1b1b;
  font-size:20px;
  font-weight:600;
  letter-spacing:0
}
.desktop-mail-folder-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:auto;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  color:#1b1b1b;
  cursor:pointer
}
.desktop-mail-folder-toggle svg {
  display:block;
  width:18px;
  height:18px;
  fill:currentColor
}
.desktop-mail-folder-toggle.active svg {
  transform:rotate(180deg)
}
.desktop-mail-folder-menu {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:80;
  display:flex;
  flex-direction:column;
  width:180px;
  padding:8px;
  border:1px solid #dfdfdf;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  box-sizing:border-box
}
.desktop-mail-folder-menu button {
  display:flex;
  align-items:center;
  width:100%;
  height:36px;
  padding:0 12px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#1b1b1b;
  font-size:13px;
  text-align:left;
  cursor:pointer
}
.desktop-mail-folder-menu button:hover {
  background:#f5f5f5;
}
.desktop-mail-folder-menu button.active { font-weight:600; }
.desktop-mail-folder-menu .manage-folder {
  margin-top:4px;
  border-top:1px solid #efefef;
  border-radius:0;
  color:#707070
}
.desktop-mail-view .mailActionBar {
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-shrink:0;
  padding:0 0 20px;
  overflow:visible;
  box-sizing:border-box
}
.desktop-mail-view .actionLeft {
  position:relative;
  z-index:21;
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  min-width:0;
  overflow:visible
}
.desktop-mail-view .actionRight {
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto
}
.desktop-mail-view .actionLeft > button,
.desktop-mail-view .actionRight > button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 14px;
  border:1px solid #dfdfdf;
  border-radius:7px;
  background:#fff;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap
}
.desktop-mail-view .ph.ph-caret-down,
.desktop-mail-view .ph.ph-caret-left,
.desktop-mail-view .ph.ph-caret-right,
.desktop-mail-view .ph.ph-caret-double-left,
.desktop-mail-view .ph.ph-caret-double-right {
  display:inline-block;
  width:1em;
  height:1em;
  line-height:1;
  vertical-align:-0.125em
}
.desktop-mail-view .ph.ph-caret-down::before,
.desktop-mail-view .ph.ph-caret-left::before,
.desktop-mail-view .ph.ph-caret-right::before,
.desktop-mail-view .ph.ph-caret-double-left::before,
.desktop-mail-view .ph.ph-caret-double-right::before {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:currentColor;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain
}
.desktop-mail-view .ph.ph-caret-down::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.7 101.7 133.7 181.7a8 8 0 0 1-11.4 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.7 13.7Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.7 101.7 133.7 181.7a8 8 0 0 1-11.4 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.7 13.7Z'/%3E%3C/svg%3E")
}
.desktop-mail-view .ph.ph-caret-left::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M160 216a8 8 0 0 1-5.7-2.3l-80-80a8 8 0 0 1 0-11.4l80-80a8 8 0 0 1 11.4 11.4L91.3 128l74.4 74.3A8 8 0 0 1 160 216Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M160 216a8 8 0 0 1-5.7-2.3l-80-80a8 8 0 0 1 0-11.4l80-80a8 8 0 0 1 11.4 11.4L91.3 128l74.4 74.3A8 8 0 0 1 160 216Z'/%3E%3C/svg%3E")
}
.desktop-mail-view .ph.ph-caret-right::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m181.7 133.7-80 80a8 8 0 0 1-11.4-11.4l74.4-74.3-74.4-74.3a8 8 0 0 1 11.4-11.4l80 80a8 8 0 0 1 0 11.4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m181.7 133.7-80 80a8 8 0 0 1-11.4-11.4l74.4-74.3-74.4-74.3a8 8 0 0 1 11.4-11.4l80 80a8 8 0 0 1 0 11.4Z'/%3E%3C/svg%3E")
}
.desktop-mail-view .ph.ph-caret-double-left::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m113.7 213.7-80-80a8 8 0 0 1 0-11.4l80-80a8 8 0 0 1 11.4 11.4L50.7 128l74.4 74.3a8 8 0 0 1-11.4 11.4Zm96 0a8 8 0 0 0 0-11.4L135.3 128l74.4-74.3a8 8 0 0 0-11.4-11.4l-80 80a8 8 0 0 0 0 11.4l80 80a8 8 0 0 0 11.4 0Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m113.7 213.7-80-80a8 8 0 0 1 0-11.4l80-80a8 8 0 0 1 11.4 11.4L50.7 128l74.4 74.3a8 8 0 0 1-11.4 11.4Zm96 0a8 8 0 0 0 0-11.4L135.3 128l74.4-74.3a8 8 0 0 0-11.4-11.4l-80 80a8 8 0 0 0 0 11.4l80 80a8 8 0 0 0 11.4 0Z'/%3E%3C/svg%3E")
}
.desktop-mail-view .ph.ph-caret-double-right::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m137.7 133.7-80 80a8 8 0 0 1-11.4-11.4l74.4-74.3-74.4-74.3a8 8 0 0 1 11.4-11.4l80 80a8 8 0 0 1 0 11.4Zm84-11.4-80-80a8 8 0 0 0-11.4 11.4l74.4 74.3-74.4 74.3a8 8 0 0 0 11.4 11.4l80-80a8 8 0 0 0 0-11.4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m137.7 133.7-80 80a8 8 0 0 1-11.4-11.4l74.4-74.3-74.4-74.3a8 8 0 0 1 11.4-11.4l80 80a8 8 0 0 1 0 11.4Zm84-11.4-80-80a8 8 0 0 0-11.4 11.4l74.4 74.3-74.4 74.3a8 8 0 0 0 11.4 11.4l80-80a8 8 0 0 0 0-11.4Z'/%3E%3C/svg%3E")
}
.desktop-mail-view .actionLeft > button i,
.desktop-mail-view .actionRight > button i {
  margin-left:4px;
  font-size:16px
}
.desktop-mail-view .actionLeft > button.moveBtn i {
  font-size:10px
}
.desktop-mail-view .actionLeft > button,
.desktop-mail-view .selectAction {
  flex:0 0 auto
}
.desktop-mail-view .selectAction {
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  margin-right:0;
  overflow:visible
}
.desktop-mail-view .selectAllBox {
  display:flex;
  align-items:center;
  gap:0;
  padding:0 12px;
  height:34px;
  border:1px solid #dfdfdf;
  border-radius:7px;
  background:#fff;
  font-size:0
}
.desktop-mail-view .selectAllBox input[type="checkbox"] {
  display:block;
  width:auto;
  height:auto;
  margin:0;
  cursor:pointer
}
.desktop-mail-view .selectArrowBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  padding:0;
  margin:0 0 0 2px;
  border:0;
  background:transparent;
  cursor:pointer
}
.desktop-mail-view .mobileMailSelectMenuBtn {
  display:none;
}
.desktop-mail-view .selectArrowBtn i {
  margin:0;
  font-size:10px;
  line-height:1
}
.desktop-mail-view .selectAction.is-open .selectAllBox {
  border-color:#1b1b1b
}
.desktop-mail-view .selectDropdown {
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  min-width:120px;
  padding:6px;
  border:1px solid #1b1b1b;
  border-radius:7px;
  background:#fff;
  z-index:95
}
.desktop-mail-view .selectAction.is-open .selectDropdown {
  display:block
}
.desktop-mail-view .selectDropdown button {
  display:block;
  width:100%;
  padding:8px 12px;
  text-align:left;
  border:0;
  background:#fff;
  font-size:13px;
  cursor:pointer;
  border-radius:7px;
  white-space:nowrap
}
.desktop-mail-view .selectDropdown button:hover {
  background:#f4f5f8
}
.desktop-mail-view .moveAction {
  position:relative;
  flex:0 0 auto
}
.desktop-mail-view .moveBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 14px;
  border:1px solid #dfdfdf;
  border-radius:7px;
  background:#fff;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap
}
.desktop-mail-view .moveBtn i {
  margin-left:4px;
  font-size:10px
}
.desktop-mail-view .moveDropdown {
  display:none;
  position:absolute;
  top:40px;
  min-width:110px;
  padding:6px;
  border:1px solid #1b1b1b;
  border-radius:7px;
  background:#fff;
  z-index:95
}
.desktop-mail-view .moveAction.is-open .moveDropdown {
  display:block
}
.desktop-mail-view .moveAction.is-open .moveBtn {
  border-color:#1b1b1b
}
.desktop-mail-view .moveDropdown button {
  display:block;
  width:100%;
  padding:8px 12px;
  text-align:left;
  border:0;
  background:#fff;
  font-size:13px;
  border-radius:7px;
  cursor:pointer;
  white-space:nowrap
}
.desktop-mail-view .moveDropdown button:hover {
  background:#f4f5f8
}
.desktop-mail-view .mailSearchBox {
  display:flex;
  align-items:center;
  width:220px;
  max-width:100%;
  height:34px;
  padding:0 12px;
  border:1px solid #dfdfdf;
  border-radius:7px;
  background:#fff;
  margin-left:auto;
  box-sizing:border-box
}
.desktop-mail-view .mailActionSearchBox {
  width:220px;
  min-width:180px
}
.desktop-mail-view .mailSearchBox svg {
  flex:0 0 auto;
  color:#707070;
  margin:0 10px 0 0;
  font-size:16px
}
.desktop-mail-view .mailSearchBox input {
  flex:1;
  height:100%;
  padding:0;
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:13px
}
.desktop-mail-view .mailSearchBox input::placeholder {
  color:#9c9c9c
}
.desktop-mail-view .mailListWrap {
  position:relative;
  z-index:1;
  width:100%;
  overflow:visible;
  border-bottom:1px solid #e8e8e8;
}
.desktop-mail-empty {
  display:flex;
  align-items:center;
  justify-content:center;
  height:180px;
  color:#9c9c9c;
  border-top:1px solid #e8e8e8;
  font-size:14px
}
.desktop-mail-view .mailRow {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  min-height:40px;
  padding:0 5px;
  transition:background 0.2s ease;
  color:#1b1b1b;
  cursor:pointer
}
.desktop-mail-view .mailRow:nth-child(1) {
  border-top:1px solid #e8e8e8
}
.desktop-mail-view .mailRow:hover {
  background:#f4f5f8
}
.desktop-mail-view .mailRow.unread {
  background:#f4f5f8
}
.desktop-mail-view .mailRow.selected {
  background:#f5f8ff
}
.desktop-mail-view .mailRow.unread.selected {
  background:#f5f8ff
}
.desktop-mail-view .col {
  flex:0 0 auto;
  font-size:14px;
  line-height:1.4
}
.desktop-mail-view .col.check {
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  font-size:0
}
.desktop-mail-view .col.check input[type="checkbox"] {
  width:15px;
  height:15px;
  margin:0;
  cursor:pointer
}
.desktop-mail-view .col.readState {
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  min-width:30px
}
.desktop-mail-view .mailReadStateIcon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:#7f8287
}
.desktop-mail-view .mailListIcon,
.desktop-mail-view .mailReadStateIcon svg {
  display:block;
  width:18px;
  height:18px;
  transform:none
}
.desktop-mail-view .col.star button svg,
.desktop-mail-view .mailReadStateIcon svg {
  stroke: #aeaeae;
}
.desktop-mail-view .mailReadStateIcon svg.mailReadStateSvgUnread {
  color:#5092f8;
  stroke:#5092f8;
}
.desktop-mail-view .col.star {
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px
}
.desktop-mail-view .col.star button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  color:#7f8287;
  cursor:pointer
}
.desktop-mail-view .col.star button.active {
  color:#5092f8;
}
.desktop-mail-view .col.star button.active svg {
  stroke:#5092f8;
}
.desktop-mail-view .col.attach {
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  min-width:30px
}
.desktop-mail-view .col.mailIcons {
  display:contents
}
.desktop-mail-view .mailAttachSlot {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:#7f8287
}
.desktop-mail-view .col.sender {
  width:190px;
  padding:0 15px 0 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.desktop-mail-view .mailRow[data-folder] .col.sender {
  display:flex;
  align-items:center;
  min-width:0
}
.desktop-mail-view .mailFolderBadge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 5px;
  border-radius:4px;
  border:1px solid #e8e8e8;
  background:#fff;
  color:#1b1b1b;
  font-size:12px;
  font-weight:normal;
  flex:0 0 auto;
  margin-right:10px
}
.desktop-mail-view .mailSenderText {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.desktop-mail-view .col.subject {
  display:flex;
  align-items:center;
  gap:0;
  flex:1 1 auto;
  min-width:0;
  padding-right:16px
}
.desktop-mail-view .col.subject a {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  text-decoration:none;
  color:#1b1b1b
}
.desktop-mail-view .mailRow.unread .col.sender,
.desktop-mail-view .mailRow.unread .col.subject a {
  font-weight:600
}
.desktop-mail-view .col.date {
  width:180px;
  padding-left:10px;
  text-align:right;
  white-space:nowrap
}
.desktop-mail-compose-main .composeRow.fileRow strong { margin:6px 0 0; }
.desktop-mail-view .mailPagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-shrink:0;
  margin:auto 0 0;
  padding:30px 0;
  min-height:32px;
  text-align:center
}
.desktop-mail-view .mailPagination button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  padding:0;
  border:0;
  background:transparent;
  color:#9c9c9c;
  font-size:14px;
  line-height:1;
  cursor:pointer
}
.desktop-mail-view .mailPagination button:disabled {
  background-color:transparent;
  border:0;
  color:#9c9c9c;
  cursor:default
}
.desktop-mail-view .mailPageCurrent {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:1px solid #1b1b1b;
  border-radius:7px;
  color:#1b1b1b;
  font-size:13px;
  font-weight:500;
  cursor:default
}
.desktop-mail-view .mail-compose-footer {
  flex-shrink:0;
  padding-bottom:20px
}
.desktop-mail-compose-main {
  padding:30px 20px 20px;
  color:#1b1b1b
}
.desktop-mail-compose-main .composePage {
  width:100%;
  padding:0
}
.desktop-mail-compose-main .mail_topArea {
  display:block;
  margin:0 0 20px
}
.desktop-mail-compose-main .mailComposeBackBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid #dfdfdf;
  border-radius:7px;
  background:#fff;
  cursor:pointer
}
.desktop-mail-compose-main .mailComposeBackBtn svg {
  width:18px;
  height:18px
}
.desktop-mail-compose-main .composeTopBar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0;
  margin:0
}
.desktop-mail-compose-main .composeTopBar .actionLeft {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  width:auto;
  margin-left:auto
}
.desktop-mail-compose-main .composeTopBar .actionLeft > button {
  height:32px;
  min-width:56px;
  padding:0 10px;
  border:1px solid #dfdfdf;
  border-radius:7px;
  background:#fff;
  color:#1b1b1b;
  font-size:12px;
  font-weight:400;
  line-height:1;
  cursor:pointer
}
.desktop-mail-compose-main .composeTopBar .actionLeft button.sendBtn {
  min-width:57px;
  border-color:#2c3a47;
  background:#2c3a47;
  color:#fff;
  font-weight:600
}
.desktop-mail-compose-main .composeTopBar .actionLeft > button:disabled {
  opacity:.65;
  cursor:default
}
.desktop-mail-compose-main .composeDraftStatusArea {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 10px;
}
.desktop-mail-compose-main .draftStatusMainText {
  color: #555555;
  font-size: 12px;
  line-height: 1;
}
.desktop-mail-compose-main .draftStatusSubText {
  margin: 0;
  color: #9c9c9c;
  font-size: 12px;
  line-height: 1;
}
.desktop-mail-compose-main .composeWrap {
  border-top:1px solid #dfdfdf;
  padding:25px 0 0
}
.desktop-mail-compose-main .composeRow {
  display:flex;
  align-items:center;
  margin:0 0 14px;
  font-size:0
}
.desktop-mail-compose-main .composeRow strong {
  flex:0 0 90px;
  color:#1b1b1b;
  font-size:14px;
  font-weight:600
}
.desktop-mail-compose-main .composeField {
  flex:1 1 auto;
  min-width:0
}
.desktop-mail-compose-main .mobileComposeAttachBtn {
  display:none
}
.desktop-mail-compose-main .composeField input[type=text] {
  width:100%;
  height:40px;
  padding:0 14px;
  border:1px solid #e8e8e8;
  border-radius:7px;
  background:#fff;
  color:#1b1b1b;
  font-size:14px;
  box-sizing:border-box
}
.desktop-mail-compose-main .composeRow.fileRow {
  align-items:flex-start
}
.desktop-mail-compose-main .receiverWrap {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;
  min-height:40px;
  padding:5px 10px;
  border:1px solid #e8e8e8;
  border-radius:7px;
  background:#fff;
  overflow:visible;
  box-sizing:border-box
}
.desktop-mail-compose-main .receiverTags {
  display:flex;
  flex:0 0 auto;
  flex-wrap:nowrap;
  align-items:center;
  gap:5px;
  max-width:100%
}
.desktop-mail-compose-main .receiverTag {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  max-width:260px;
  height:28px;
  font-size:12px;
  padding:0 10px;
  border-radius:3px;
  background:#f5f5f5
}
.desktop-mail-compose-main .receiverTagText {
  display: block;
  flex-shrink: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-mail-compose-main .receiverTagDelete {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin:2px 0 0 10px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer
}
.desktop-mail-compose-main .receiverTagDelete svg {
  width:12px;
  height:12px
}
.desktop-mail-compose-main .receiverAutoWrap {
  position:relative;
  flex:1 1 120px;
  min-width:120px
}
.desktop-mail-compose-main .receiverWrap input.receiverInput {
  flex:1 1 auto;
  min-width:120px;
  height:32px;
  padding:0;
  border:0;
  outline:0;
  color:#1b1b1b;
  font-size:14px
}
.desktop-mail-compose-main .receiverAutoList {
  position:absolute;
  left:0;
  top:calc(100% + 5px);
  z-index:100;
  display:block;
  width:420px;
  max-height:260px;
  overflow-y:auto;
  border:1px solid #e8e8e8;
  border-radius:3px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08)
}
.desktop-mail-compose-main .receiverAutoItem {
  display:block;
  width:100%;
  padding:13px 16px;
  border:0;
  background:#fff;
  color:#1b1b1b;
  font-size:13px;
  line-height:1.2;
  text-align:left;
  cursor:pointer
}
.desktop-mail-compose-main .receiverAutoItem:hover {
  background:#f5f5f5
}
.desktop-mail-compose-main .receiverAutoItem strong {
  font-weight:600
}
.desktop-mail-compose-main .fileActionBar {
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-width:0
}
.desktop-mail-compose-main .fileInput {
  position:absolute;
  width:0;
  height:0;
  opacity:0;
  overflow:hidden
}
.desktop-mail-compose-main .fileBtn,
.desktop-mail-compose-main .fileDeleteBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:86px;
  height:36px;
  margin-right:5px;
  border:1px solid #dfdfdf;
  border-radius:7px;
  background:#fff;
  color:#1b1b1b;
  font-size:13px;
  font-weight:400;
  cursor:pointer
}
.desktop-mail-compose-main .fileInfoText {
  position:absolute;
  right:0;
  color:#606060;
  font-size:13px
}
.desktop-mail-compose-main .fileTableWrap {
  margin:10px 0 0;
  border:1px solid #e8e8e8;
  border-radius:7px;
  overflow:hidden;
  background:#fff
}
.desktop-mail-compose-main .fileTable {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed
}
.desktop-mail-compose-main .fileTable thead th {
  padding:12px;
  border-bottom:1px solid #e8e8e8;
  background:#f7f7f7;
  color:#1b1b1b;
  font-size:13px;
  font-weight:400;
  text-align:left
}
.desktop-mail-compose-main .fileTable .checkCol,
.desktop-mail-compose-main .fileTable .deleteCol {
  width:72px;
  text-align:center
}
.desktop-mail-compose-main .fileTable .sizeCol {
  width:160px
}
.desktop-mail-compose-main .fileTable .typeCol {
  width:140px
}
.desktop-mail-compose-main .fileTable tbody td {
  height:46px;
  padding:12px;
  border-bottom:1px solid #e8e8e8;
  color:#1b1b1b;
  font-size:14px;
  vertical-align:middle
}
.desktop-mail-compose-main .fileTable tbody tr:last-child td {
  border-bottom:0
}
.desktop-mail-compose-main .fileTable tr.emptyFileRow td {
  padding:50px 0;
  color:#707070;
  text-align:center
}
.desktop-mail-compose-main .fileTable input[type=checkbox] {
  display:inline-block;
  width:16px;
  height:16px;
  margin:0;
  accent-color:#0373ef;
  vertical-align:middle
}
.desktop-mail-compose-main .composeFileNameCell {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:22px;
  overflow:hidden
}
.desktop-mail-compose-main .composeFileNameCell .attachTypeIcon {
  flex:0 0 28px
}
.desktop-mail-compose-main .composeFileNameText {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.desktop-mail-compose-main .fileDeleteItemBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer
}
.desktop-mail-compose-main .fileDeleteItemBtn svg {
  width:20px;
  height:20px
}
.desktop-mail-compose-main .composeEditor {
  padding:20px 0 0
}
.desktop-mail-compose-main .composeEditorWrap {
  position:relative;
  margin:0;
  border:1px solid #e8e8e8;
  border-radius:5px;
  background:#fff;
  overflow:hidden
}
.desktop-mail-compose-main .tiptapToolbar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  border-bottom:1px solid #e8e8e8;
  background:#f7f7f7
}
.desktop-mail-compose-main .tt-fontsize {
  min-width: 82px;
  height: 30px;
  padding: 0 24px 0 10px;
  border: 1px solid #dedede;
  border-radius: 4px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231b1b1b' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66a8,8,0,0,1,0,11.32l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,172.69l74.34-74.35A8,8,0,0,1,213.66,101.66Z'%3E%3C/path%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #1b1b1b;
  font-size: 13px;
  outline: none;
}
.desktop-mail-compose-main .tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #1b1b1b;
  font-size: 14px;
  cursor: pointer;
}
.desktop-mail-compose-main .tt-btn svg {
  width: 14px;
  height: 14px;
  fill: #1b1b1b;
  vertical-align: middle;
}
.desktop-mail-compose-main .tt-btn:hover {
  background:#dee5ef
}
.desktop-mail-compose-main .tt-divider {
  width:1px;
  height:20px;
  margin:0 4px;
  background:#e5e7eb
}
.desktop-mail-compose-main .mailProseMirror {
  display:block;
  width:100%;
  min-height:400px;
  padding:20px;
  border:0;
  outline:0;
  resize:vertical;
  color:#1b1b1b;
  font-size:14px;
  line-height:1.8;
  box-sizing:border-box
}
.desktop-mail-compose-main .mailProseMirror ul,
.desktop-mail-compose-main .mailProseMirror ol {
  padding-left: 14px;
  margin: 10px 0;
}
.desktop-mail-compose-main .mailProseMirror li {
  margin: 4px 0;
}
.desktop-mail-compose-main .composeEditorWrap.has-quoted-mail .mailProseMirror {
  min-height:140px
}
.desktop-mail-compose-main .editorPlaceholder {
  position:absolute;
  left:22px;
  top:74px;
  z-index:2;
  color:#707070;
  font-size:14px;
  line-height:1.8;
  pointer-events:none
}
.desktop-mail-compose-main .replyOriginalWrap {
  margin:0;
  padding:10px 20px 16px;
  border-top:0;
  background:#fff;
  overflow:hidden
}
.desktop-mail-compose-main .replyOriginalMeta {
  padding:16px 18px;
  border-bottom:1px solid #e8e8e8;
  background:#fff
}
.desktop-mail-compose-main .replyOriginalMeta p {
  margin:0 0 6px;
  color:#1b1b1b;
  font-size:14px
}
.desktop-mail-compose-main .replyOriginalBody {
  padding:20px 0;
  background:#fff
}
.desktop-mail-compose-main .quotedMailBlock p {
  color:#1b1b1b;
  font-size:14px;
  line-height:1.5
}
.desktop-mail-compose-main .quotedMailBlock .quotedBody {
  margin-top:20px;
  line-height:1.7
}
.desktop-mail-read-main {
  
  color:#1b1b1b;

  padding:30px 20px 20px;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;}
.desktop-mail-read {
  width:100%;
  min-width:0;
  font-size:14px
}
.desktop-mail-read .mail_topArea {
  display:flex;
  align-items:center;
  gap:0;
  padding:0 0 20px;
  margin:0 0 15px;
  border-bottom:1px solid #e8e8e8;
}
.desktop-mail-read .mailHeader {
  display:flex;
  align-items:center;
  justify-content:flex-start;

  flex:0 0 auto;
  width:auto;
  height:auto;
  margin-right:10px}
.desktop-mail-read .mailReadBackBtn {
  display:flex;
  align-items:center;
  justify-content:center;
  
  height:18px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;

  width:32px}
.desktop-mail-read .mailReadBackBtn svg {
  display:block;

  width:18px;
  height:18px}
.desktop-mail-read .mailReadBackImg {
  display:none
}
.desktop-mail-read .readTopBar {
  display:flex;
  align-items:center;
  
  
  min-width:0;
  padding:0;
  border-bottom:0;

  justify-content:space-between;
  flex:1 1 auto}
.desktop-mail-read .readTopBar .actionLeft {
  display:flex;
  
  flex:1 1 auto;
  min-width:0;
  
  padding:0;
  overflow:visible;

  justify-content:flex-start;
  gap:5px}
.desktop-mail-read .readTopBar .actionLeft > button {
  
  height:34px;
  
  border:1px solid #dfdfdf;
  border-radius:7px;
  background:#fff;
  color:#1b1b1b;
  font-size:12px;
  font-weight:400;
  line-height:1;
  cursor:pointer;

  flex:0 0 auto;
  min-width:auto;
  padding:0 14px}
.desktop-mail-read .mailReadActionIcon {
  display:none
}
.desktop-mail-read .readTopBar .actionRight {
  display:flex;
  align-items:center;
  justify-content:flex-end;

  margin-left:auto}
.desktop-mail-read .readTopBar .printBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  
  
  
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#1b1b1b;
  cursor:pointer;
  box-sizing:border-box;

  width:28px;
  min-width:28px;
  height:28px}
.desktop-mail-read .readTopBar .printBtn svg {
  display:block;
  flex:0 0 24px;

  width:24px;
  height:24px}
.desktop-mail-read .readViewWrap {
  margin:0;
  
  border:0;
  background:#fff;

  padding:0;
  border-radius:0;
  -webkit-user-select:text;
  user-select:text;
  cursor:text}
.desktop-mail-read .readViewWrap * {
  -webkit-user-select:text;
  user-select:text;
}
.desktop-mail-read .readViewWrap button,
.desktop-mail-read .readViewWrap button * {
  -webkit-user-select:none;
  user-select:none;
  cursor:pointer;
}
.desktop-mail-read .readViewHeader {
  position:relative;

  padding:0 0 20px;
  border-bottom:1px solid #e8e8e8}
.desktop-mail-read .readViewLeft {
  
  
  min-width:0;

  display:flex;
  align-items:flex-start;
  gap:0;
  width:100%;
  box-sizing:border-box}
.desktop-mail-read .readMeta dl {
  
  grid-template-columns:70px minmax(0, 1fr);

  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 10px}
.desktop-mail-read .readMeta dl:last-child {
  margin-bottom:0
}
.desktop-mail-read .readMeta dd {
  min-width:0;
  margin:0;
  
  word-break:break-all;

  color:#1b1b1b;
  font-weight:400}
.desktop-mail-read .readSubjectWrap {
  
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  box-sizing:border-box;

  order:1}
.desktop-mail-read .readSubject {
  
  
  
  
  
  letter-spacing:0;
  word-break:keep-all;
  overflow-wrap:anywhere;

  margin:0 0 0;
  font-size:18px;
  line-height:1.4;
  font-weight:600;
  color:#1b1b1b}
.desktop-mail-read .readSubjectWrap .printBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  width:22px;
  min-width:22px;
  height:22px;
  padding:0;
  border:0;
  background:transparent;
  color:#1b1b1b;
  cursor:pointer;
  box-sizing:border-box
}
.desktop-mail-read .readSubjectWrap .printBtn svg {
  display:block;
  flex:0 0 22px;
  width:22px;
  height:22px
}
.desktop-mail-read .mailStarBtn {
  
  right:0;
  top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  
  
  
  border:0;
  background:transparent;
  
  cursor:pointer;

  position:static;
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:3px 6px 0 0;
  padding:0;
  color:#8b8f99}
.desktop-mail-read .mailStarBtn.active {
  color:#5092f8
}
.desktop-mail-read .mailStarBtn svg {
  display:block;

  width:18px;
  height:18px}
.desktop-mail-read-loading {
  padding:14px 0;
  color:#707070;
  font-size:13px
}
.desktop-mail-read .readAttachments {
  
  
  border-top:0;
  border-bottom:1px solid #e8e8e8;

  margin:20px 24px 0;
  padding:15px;
  border:1px solid #e8e8e8;
  border-radius:5px}
.desktop-mail-read .readAttachHeader {
  
  
  
  gap:0;
  margin:0 0 10px;

  display:inline-grid;
  grid-template-columns:max-content 1px max-content;
  column-gap:16px;
  align-items:center;
  width:max-content;
  height:20px;
  line-height:1;}
.desktop-mail-read .attachToggleBtn {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  width:max-content;
  padding:0;
  border:0;
  background:transparent;
  color:#1b1b1b;
  font-size:13px;
  line-height:1;
  font-weight:500
}
.desktop-mail-read .attachToggleIcon {
  display:block;
  width:6px;
  height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(225deg) translate(-1px, -1px)
}
.desktop-mail-read .attachList {
  display:flex;
  flex-direction:column;
  
  margin:0;
  
  list-style:none;

  gap:0;
  padding:0}
.desktop-mail-read .attachItem {
  display:flex;
  align-items:center;
  min-width:0
}
.desktop-mail-read .attachItem:not(:last-child) { margin:0 0 10px; }
.desktop-mail-read .attachNameBtn {
  display:flex;
  align-items:center;
  
  max-width:100%;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:#1b1b1b;
  text-align:left;
  cursor:pointer;
  text-decoration:none;

  gap:10px}
.desktop-mail-read .attachTypeIcon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  
  
  
  
  overflow:hidden;
  color:#fff;

  flex:0 0 20px;
  width:20px;
  height:20px;
  border-radius:3px;
  background:#0f9d58}
.desktop-mail-read .attachFileName {
  min-width:0;
  overflow:hidden;
  color:#1b1b1b;
  
  line-height:1.25;
  font-weight:normal;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:13px;}
.desktop-mail-read .attachSize {
  flex:0 0 auto;
  
  
  line-height:1.25;
  margin-left:20px;
  white-space:nowrap;

  font-size:13px;
  color:#9c9c9c}
.desktop-mail-read .readBody {
  
  
  
  
  word-break:break-word;
  overflow-x:auto;

  min-height:240px;
  font-size:14px;
  line-height:1.7;
  color:#1b1b1b;
  -webkit-user-select:text;
  user-select:text;
  cursor:text}
.desktop-mail-read .readBody * {
  -webkit-user-select:text;
  user-select:text;
}
.desktop-mail-read .readBody img {
  max-width:100%;
  height:auto
}
.desktop-mail-read .readBody table {
  max-width:100%
}
.desktop-mail-read .mailReadBackBtn,
.desktop-mail-read .readTopBar .actionLeft > button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  border:1px solid #dfdfdf;
  border-radius:8px;
  background:#fff;
  color:#1b1b1b;
  font-size:13px;
  font-weight:400;
  line-height:1;
  box-sizing:border-box
}
.desktop-mail-read .readTitleArea {
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  padding:0
}
.desktop-mail-read .readDate {
  order:2;
  margin:8px 0 0;
  color:#666;
  font-size:14px;
  line-height:1;
  font-weight:400
}
.desktop-mail-read .readMeta {
  order:3;
  margin:20px 0 0;
  padding:0;
  border-bottom:0
}
.desktop-mail-read .readMeta dt {
  font-size:14px;
  line-height:1;
  font-weight:600
}
.desktop-mail-read .readMeta dd {
  font-size:14px;
  line-height:1;
}
.desktop-mail-read .readMeta dt {
  color:#1b1b1b
}
.desktop-mail-read .attachHeaderTitle {
  display:inline-flex;
  align-items:center;
  height:20px;
  color:#1b1b1b;
  font-size:13px;
  line-height:1;
  font-weight:600;
  margin:0;
  padding:0
}
.desktop-mail-read .attachHeaderDivider {
  display:block;
  width:1px;
  height:13px;
  background:#dedede;
  margin:0;
  align-self:center;
}
.desktop-mail-read .attachAllDownloadBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:auto;
  height:20px;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#505050;
  font-size:12px;
  line-height:1;
  font-weight:normal;
  cursor: pointer;
}
.desktop-mail-read .attachTypeIcon::before {
  content:'';
  display:block;
  width:12px;
  height:14px;
  border-radius:3px;
  background:#fff
}
.desktop-mail-read .readBodyWrap {
  padding: 20px
}
.desktop-mail-view .myMailManageLayer {
  position:fixed;
  inset:0;
  z-index:10010
}
.desktop-mail-view .myMailManageDim {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35)
}
.desktop-mail-view .myMailManageDialog {
  position:absolute;
  top:50%;
  left:50%;
  display:flex;
  flex-direction:column;
  width:340px;
  max-width:calc(100% - 40px);
  max-height:calc(100vh - 80px);
  border-radius:12px;
  background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,0.18);
  overflow:hidden;
  transform:translate(-50%, -50%)
}
.desktop-mail-view .myMailManageHead {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 20px;
  box-sizing:border-box
}
.desktop-mail-view .myMailManageHead strong {
  color:#1b1b1b;
  font-size:16px;
  font-weight:600;
  line-height:1
}
.desktop-mail-view .myMailManageClose {
  position:absolute;
  left:20px;
  width:12px;
  height:12px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#ff5f57;
  cursor:pointer
}
.desktop-mail-view .myMailManageAddIconBtn {
  position:absolute;
  right:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer
}
.desktop-mail-view .myMailManageAddIconBtn svg {
  display:block;
  width:21px;
  height:21px;
  fill:#1b1b1b
}
.desktop-mail-view .myMailManageBackBtn {
  position:absolute;
  left:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer
}
.desktop-mail-view .myMailManageBackBtn svg {
  display:block;
  width:20px;
  height:20px;
  fill:#1b1b1b
}
.desktop-mail-view .myMailManageAddPanel {
  padding:20px;
  box-sizing:border-box
}
.desktop-mail-view .myMailManageInputWrap {
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:44px;
  border:1px solid #dedede;
  border-radius:4px;
  box-sizing:border-box
}
.desktop-mail-view .myMailManageInput {
  width:100%;
  height:100%;
  padding:0 54px 0 12px;
  border:0;
  outline:0;
  background:transparent;
  color:#1b1b1b;
  font-size:14px;
  font-weight:500;
  box-sizing:border-box
}
.desktop-mail-view .myMailManageInput::placeholder {
  color:#9c9c9c
}
.desktop-mail-view .myMailManageInputWrap span {
  position:absolute;
  right:12px;
  color:#a8a8a8;
  font-size:13px;
  font-weight:500
}
.desktop-mail-view .myMailManageAddActions {
  display:flex;
  gap:10px;
  margin-top:20px
}
.desktop-mail-view .myMailManageAddActions button {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  height:44px;
  border-radius:5px;
  font-size:14px;
  font-weight:600;
  cursor:pointer
}
.desktop-mail-view .myMailManageCancelBtn {
  border:1px solid #dedede;
  background:#fff;
  color:#777
}
.desktop-mail-view .myMailManageConfirmBtn {
  border:1px solid #0373f0;
  background:#0373f0;
  color:#fff
}
.desktop-mail-view .myMailManageDeletePanel {
  padding:30px 20px 20px;
  box-sizing:border-box
}
.desktop-mail-view .myMailManageDeletePanel p {
  min-height:44px;
  margin:0;
  color:#1b1b1b;
  font-size:14px;
  text-align:center;
  line-height:1.5
}
.desktop-mail-view .myMailManageBody {
  min-height:120px;
  max-height:360px;
  overflow:auto;
}
.desktop-mail-view .myMailManageList {
  display:flex;
  flex-direction:column
}
.desktop-mail-view .myMailManageItem {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:50px;
  padding:0 20px;
  border:0;
  background:#fff;
  color:#1b1b1b;
  font-size:14px;
  text-align:left
}
.desktop-mail-view .myMailManageItem.active {
  font-weight:600
}
.desktop-mail-view .myMailManageEmpty {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100px;
  padding:0 20px;
  color:#9c9c9c;
  font-size:14px;
  font-weight:500;
  text-align:center;
  box-sizing:border-box
}
.desktop-mail-view .myMailManageName {
  display:flex;
  align-items:center;
  min-width:0;
  gap:6px
}
.desktop-mail-view .myMailManageName span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.desktop-mail-view .myMailManageFolderIcon {
  flex:0 0 auto;
  width:17px;
  height:17px;
  fill:#1b1b1b
}
.desktop-mail-view .myMailManageActions {
  display:flex;
  align-items:center;
  gap:10px
}
.desktop-mail-view .myMailManageActions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:#fff;
  color:#666;
  text-decoration:underline;
  font-size:12px;
  cursor:pointer
}
.desktop-mail-view .myMailModal {
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:10020
}
.desktop-mail-view .mymailModalDim {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.35);
  z-index:10021
}
.desktop-mail-view .mymailModalDialog {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:420px;
  max-width:calc(100% - 40px);
  background:#fff;
  border-radius:5px;
  overflow:hidden;
  z-index:10022
}
.desktop-mail-view .mymailModalHead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 20px 30px
}
.desktop-mail-view .mymailModalHead strong {
  font-size:18px
}
.desktop-mail-view .mymailCloseBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer
}
.desktop-mail-view .mymailCloseBtn svg {
  display:block;
  width:22px;
  height:22px
}
.desktop-mail-view .mymailModalBody {
  padding:0 20px 20px
}
.desktop-mail-view .mymailConfirmDialog .mymailModalBody {
  padding-top:4px
}
.desktop-mail-view .mymailConfirmText {
  margin:0;
  color:#1b1b1b;
  font-size:15px;
  font-weight:500;
  line-height:1.5
}
.desktop-mail-view .mymailSingleRow {
  display:flex;
  align-items:center;
  gap:0
}
.desktop-mail-view .mymailSingleLabel {
  width:92px;
  flex:0 0 92px;
  font-size:13px
}
.desktop-mail-view .mymailSingleField {
  flex:1;
  font-size:0
}
.desktop-mail-view .mymailSingleField input[type=text] {
  width:100%;
  height:42px;
  line-height:42px;
  padding:0 12px;
  border:1px solid #e8e8e8;
  border-radius:4px;
  background:#fff;
  font-size:14px;
  outline:none;
  box-sizing:border-box
}
.desktop-mail-view .mymailSingleField input::placeholder {
  color:#9c9c9c
}
.desktop-mail-view .mymailSingleActions {
  display:flex;
  justify-content:flex-end;
  margin:30px 0 0
}
.desktop-mail-view .mymailSingleActions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:38px;
  border:1px solid #dfdfdf;
  border-radius:4px;
  background:#fff;
  font-size:14px;
  font-weight:500;
  color:#707070;
  cursor:pointer
}
.desktop-mail-view .mymailSingleActions .myMailSubmitBtn {
  background:#1b1b1b;
  border-color:#1b1b1b;
  color:#fff;
  margin-right:10px
}
.desktop-mail-view .mymailCloseBtn:hover,
.desktop-mail-view .myMailSubmitBtn:hover {
  opacity:.92
}
.sidebar-top, .sidebar-bottom {
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
  display:flex
}
.sidebar-icon-btn {
  cursor:pointer;
  color:#555;
  background:0 0;
  border:none;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  padding:10px;
  transition:background-color .2s;
  display:flex;
  position:relative;
  box-shadow:none
}
.sidebar-icon-btn:hover svg {
  fill:#666
}
.sidebar-icon-btn.active svg {
  fill:#313946
}
.sidebar-icon-btn svg {
  width:20px;
  height:20px
}
.sidebar-badge-bubble {
  color:#fff;
  text-align:center;
  background-color:#007aff;
  border-radius:10px;
  justify-content:center;
  align-items:center;
  width:15px;
  height:15px;
  font-size:10px;
  font-weight:500;
  line-height:1;
  display:flex;
  position:absolute;
  top:-4px;
  right:-8px;
  box-shadow:none
}
.sidebar-more-dots {
  color:#555;
  font-size:24px;
  font-weight:600;
  line-height:12px
}
.sidebar-icon-btn.active .sidebar-more-dots {
  color:#1a1a1a
}
.desktop-settings-dropdown {
  z-index:100;
  background-color:#fff;
  border:1px solid #dedede;
  border-radius:6px;
  flex-direction:column;
  width:120px;
  display:flex;
  position:absolute;
  bottom:50px;
  left:10px;
  box-shadow:none
}
.settings-drop-item {
  text-align:left;
  color:#333;
  font-size:13px;
  font-family:var(--font-family);
  cursor:pointer;
  background:0 0;
  border:none;
  padding:10px 12px;
  font-weight:500;
  box-shadow:none
}
.desktop-main-list {
  background-color:#fff;
  border-right:1px solid #dedede;
  flex-direction:column;
  width:320px;
  display:flex;
  overflow:hidden
}
.desktop-list-inner {
  flex-direction:column;
  height:100%;
  display:flex;
  overflow:hidden
}
.list-header-title {
  color:#1b1b1b;
  padding:30px 20px 10px;
  font-size:20px;
  font-weight:600
}
.list-header-title-row {
  justify-content:space-between;
  align-items:center;
  padding:20px 20px 10px;
  display:flex
}
.list-header-title-row .list-header-title {
  padding:0
}
.desktop-new-chat-btn {
  color:#4f46e5;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  font-family:var(--font-family);
  background:0 0;
  border:none;
  box-shadow:none
}
.desktop-search-container {
  align-items:center;
  display:flex;
  position:relative;
  padding:0 20px 10px
}
.desktop-search-container input {
  width:100%;
  font-size:13px;
  font-family:var(--font-family);
  background-color:#f1f3f5;
  border-radius:6px;
  outline:none;
  transition:background-color .2s;
  background:#fff;
  border:1px solid #e8e8e8;
  padding:12px 12px 12px 30px
}
.desktop-search-container input:focus {
  background-color:#fff;
  border-color:#dedede
}
.desktop-search-icon {
  color:#8e8e93;
  position:absolute;
  left:30px
}
.desktop-scroll-list {
  flex:1;
  padding:0;
  overflow-y:auto
}
.messengerDashboardPanel {
  flex-direction:column;
  height:100%;
  display:flex
}
.messengerDashboardHeader {
  padding:30px 20px 10px
}
.messengerDashboardSearch {
  padding:0 20px 15px
}
.messengerDashboardSearchIcon {
  left:30px
}
.messengerDashboardSearchInput {
  background-color:#f1f3f5;
  border:1px solid transparent;
  border-radius:6px;
  width:100%;
  padding:8px 12px 8px 30px;
  font-size:13px
}
.messengerDashboardScroll {
  flex:1;
  overflow-y:auto
}
.messengerDashboardMeItem {
  border-bottom:1px solid #f1f3f5;
  margin-bottom:10px
}
.messengerDashboardMeItemCompact {
  border-bottom:1px solid #f1f3f5
}
.messengerDashboardUserInfo {
  flex:1
}
.messengerDashboardUserNameRow {
  align-items:center;
  gap:.35rem;
  width:100%;
  display:flex
}
.desktopMessengerTwoColumn {
  width:100%;
  height:100%;
  display:flex
}
.desktopMessengerListColumn {
  border-right:1px solid #e8e8e8;
  flex-direction:column;
  flex-shrink:0;
  width:360px;
  height:100%;
  display:flex;
  overflow-y:auto
}
.desktopMessengerChatColumn {
  flex-direction:column;
  flex-grow:1;
  height:100%;
  display:flex;
  position:relative
}
.desktopMessengerPlaceholder {
  color:#8e8e93;
  background-color:#f4f4f4;
  flex-direction:column;
  flex-grow:1;
  justify-content:center;
  align-items:center;
  height:100%;
  display:flex
}
.desktopMessengerPlaceholderLine {
  opacity:.7;
  background-color:#e5e5e7;
  border-radius:50%;
  width:40px;
  height:5px;
  margin-top:6px;
  margin-bottom:18px
}
.desktopMessengerPlaceholderText {
  color:#8e8e93;
  font-size:13px
}
.desktop-user-item {
  cursor:pointer;
  border-radius:8px;
  align-items:center;
  gap:12px;
  padding:10px;
  transition:background-color .2s;
  display:flex
}
.desktop-user-item:hover {
  background-color:#f4f4f4
}
.desktop-user-item.me-item {
  background-color:#f8f9fa;
  border:1px solid #ececec
}
.desktop-list-divider {
  background-color:#ededed;
  height:1px;
  margin:10px
}
.desktop-profile-edit-btn {
  color:#444;
  cursor:pointer;
  font-size:11px;
  font-weight:500;
  font-family:var(--font-family);
  background:#eaeaea;
  border:none;
  border-radius:4px;
  padding:4px 8px;
  box-shadow:none
}
.desktop-chat-item {
  cursor:pointer;
  border-radius:8px;
  align-items:center;
  gap:12px;
  padding:12px 10px;
  transition:background-color .2s;
  display:flex
}
.desktop-chat-item:hover {
  background-color:#f4f4f4
}
.desktop-chat-item.active {
  background-color:#ebebeb
}
.chat-item-top-row, .chat-item-bottom-row {
  justify-content:space-between;
  align-items:flex-start;
  display:flex
}
.latest-msg {
  color:#8e8e93;
  white-space:nowrap;
  text-overflow:ellipsis;
  flex:1;
  margin-right:10px;
  font-size:13px;
  overflow:hidden
}
.desktop-chat-area {
  background-color:#b2c7da;
  flex-direction:column;
  flex:1;
  display:flex;
  position:relative;
  overflow:hidden
}
.desktop-chat-empty-screen {
  background-color:#fcfcfc;
  flex-direction:column;
  flex:1;
  justify-content:center;
  align-items:center;
  display:flex
}
.desktop-empty-logo {
  object-fit:contain;
  opacity:.8;
  width:80px;
  height:80px;
  margin-bottom:16px
}
.desktop-empty-desc {
  color:#333;
  font-size:16px;
  font-weight:600
}
.desktop-empty-sub {
  color:#888;
  margin-top:8px;
  font-size:13px
}
.chat-room-screen .chat-messages {
  background-color:#f4f4f4
}
.desktop-more-profile-card {
  background-color:#f8f8f8;
  border:1px solid #e8e8e8;
  border-radius:6px;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  margin:0 20px 20px;
  padding:15px;
  display:flex
}
.profile-card-avatar {
  object-fit:cover;
  border-radius:999px;
  width:44px;
  height:44px
}
.profile-card-info {
  flex-direction:column;
  gap:2px;
  display:flex
}
.profile-card-name {
  color:#1b1b1b;
  font-size:15px;
  font-weight:600
}
.profile-card-dept {
  color:#8e8e93;
  font-size:12px
}
.desktop-more-grid {
  grid-template-columns:repeat(3, 1fr);
  gap:15px;
  padding:0 20px 20px;
  display:grid
}
.more-grid-btn {
  cursor:pointer;
  background:#f8f9fa;
  border:none;
  border-radius:10px;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:15px 10px;
  transition:background-color .2s;
  display:flex;
  box-shadow:none
}
.more-grid-btn.highlight-btn {
  background-color:#eef2ff;
  border:1px solid #c7d2fe
}
.more-btn-icon-box {
  color:#4a5568;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  display:flex
}
.more-grid-btn.highlight-btn .more-btn-icon-box {
  color:#4f46e5
}
.more-item-svg {
  width:24px;
  height:24px
}
.more-btn-label {
  color:#4a5568;
  font-size:12px;
  font-weight:500;
  font-family:var(--font-family)
}
.desktop-attendance-view {
  flex-direction:column;
  height:100%;
  display:flex
}
.desktop-attendance-header {
  border-bottom:1px solid #ececec;
  align-items:center;
  gap:12px;
  padding:20px 20px 15px;
  display:flex
}
.desktop-back-to-more-btn {
  color:#555;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  font-family:var(--font-family);
  background:0 0;
  border:none;
  box-shadow:none
}
.attendance-title-row {
  align-items:center;
  gap:6px;
  display:flex
}
.attendance-title-main {
  color:#1b1b1b;
  font-size:16px;
  font-weight:600
}
.attendance-title-divider {
  color:#ccc
}
.attendance-title-sub {
  color:#8e8e93;
  font-size:13px;
  font-weight:500
}
.desktop-attendance-scroll-content {
  flex-direction:column;
  flex:1;
  gap:24px;
  padding:20px;
  display:flex;
  overflow-y:auto
}
.desktop-commute-card {
  background-color:#f8f9fa;
  border:1px solid #ececec;
  border-radius:8px;
  flex-direction:column;
  align-items:center;
  padding:20px;
  display:flex
}
.commute-card-today-label {
  color:#8e8e93;
  font-size:13px;
  font-weight:500
}
.commute-card-time-now {
  color:#1b1b1b;
  letter-spacing:.5px;
  margin:8px 0 12px;
  font-size:32px;
  font-weight:600
}
.commute-card-state-row {
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  display:flex
}
.commute-state-badge {
  border-radius:4px;
  padding:3px 8px;
  font-size:11px;
  font-weight:600
}
.commute-state-badge.working {
  color:#4f46e5;
  background-color:#e0e7ff
}
.commute-state-badge.done {
  color:#10b981;
  background-color:#ecfdf5
}
.commute-state-badge.missing {
  color:#ef4444;
  background-color:#fef2f2
}
.commute-state-sub {
  color:#4a5568;
  font-size:12px;
  font-weight:500
}
.commute-card-action-buttons {
  gap:12px;
  width:100%;
  margin-bottom:15px;
  display:flex
}
.commute-btn {
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  font-family:var(--font-family);
  border:none;
  border-radius:6px;
  flex:1;
  padding:12px;
  transition:opacity .2s;
  box-shadow:none
}
.commute-btn:disabled {
  cursor:not-allowed;
  color:#a0aec0;
  background-color:#eaeaea
}
.commute-btn.check-in-btn {
  color:#fff;
  background-color:#4f46e5
}
.commute-btn.check-out-btn {
  color:#fff;
  background-color:#10b981
}
.commute-geo-status-indicator {
  text-align:center;
  align-items:center;
  gap:8px;
  font-size:11px;
  display:flex
}
.commute-geo-status-indicator.allowed .indicator-dot {
  background-color:#10b981;
  border-radius:50%;
  width:6px;
  height:6px
}
.commute-geo-status-indicator.allowed .indicator-msg {
  color:#10b981
}
.commute-geo-status-indicator.blocked .indicator-dot {
  background-color:#ef4444;
  border-radius:50%;
  width:6px;
  height:6px
}
.commute-geo-status-indicator.blocked .indicator-msg {
  color:#ef4444
}
.desktop-specials-section {
  flex-direction:column;
  gap:10px;
  display:flex
}
.section-title {
  color:#1b1b1b;
  font-size:14px;
  font-weight:600
}
.specials-buttons-row {
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  display:grid
}
.special-toggle-btn {
  color:#4a5568;
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  font-family:var(--font-family);
  background-color:#fff;
  border:1px solid #dedede;
  border-radius:6px;
  padding:8px;
  transition:all .2s;
  box-shadow:none
}
.special-toggle-btn.active {
  color:#4f46e5;
  background-color:#eef2ff;
  border-color:#4f46e5
}
.desktop-weekly-hours-section {
  flex-direction:column;
  gap:8px;
  display:flex
}
.weekly-hours-header {
  justify-content:space-between;
  align-items:center;
  display:flex
}
.weekly-hours-val {
  color:#4f46e5;
  font-size:14px;
  font-weight:600
}
.weekly-hours-progress-bar-bg {
  background-color:#eaeaea;
  border-radius:4px;
  height:8px;
  overflow:hidden
}
.weekly-hours-progress-bar-fill {
  background-color:#4f46e5;
  border-radius:4px;
  height:100%
}
.weekly-hours-ticks {
  color:#8e8e93;
  justify-content:space-between;
  font-size:11px;
  display:flex
}
.desktop-vacation-summary-section {
  flex-direction:column;
  gap:10px;
  display:flex
}
.vacation-summary-header {
  justify-content:space-between;
  align-items:center;
  display:flex
}
.desktop-request-vacation-btn {
  color:#4f46e5;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  font-family:var(--font-family);
  background:0 0;
  border:none;
  box-shadow:none
}
.vacation-summary-grid {
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  display:grid
}
.vacation-summary-card {
  background-color:#f8f9fa;
  border:1px solid #ececec;
  border-radius:6px;
  flex-direction:column;
  gap:4px;
  padding:12px 15px;
  display:flex
}
.card-label {
  color:#8e8e93;
  font-size:11px;
  font-weight:500
}
.card-val {
  font-size:16px;
  font-weight:600
}
.card-val.remaining {
  color:#10b981
}
.card-val.used {
  color:#ef4444
}
.card-val.granted {
  color:#4b5563
}
.card-val.service {
  color:#4f46e5
}
.vacation-summary-footer {
  color:#8e8e93;
  text-align:center;
  font-size:11px;
  font-weight:500
}
.desktop-vacation-list-section {
  flex-direction:column;
  gap:10px;
  display:flex
}
.desktop-vacation-table {
  border-collapse:collapse;
  width:100%;
  font-size:12px
}
.desktop-vacation-table th {
  color:#8e8e93;
  text-align:left;
  background-color:#f8f9fa;
  border-bottom:1px solid #ececec;
  padding:8px 10px;
  font-weight:600
}
.desktop-vacation-table td {
  color:#333;
  border-bottom:1px solid #ececec;
  padding:10px
}
.desktop-attendance-view.commuteSheet {
  display:block;
  height:100%;
  width:100%;
  min-width:0;
  overflow:auto;
  background:#fff;
}
.desktop-attendance-view.commuteSheet .attendance-main-header {
  padding:30px 20px 10px;
}
.desktop-attendance-view.commuteSheet .commutePage {
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  padding:0 20px 20px;
}
.desktop-attendance-view.commuteSheet .welcome {
  font-size:0;
  line-height:1;
}
.desktop-attendance-view.commuteSheet .welcomePanel {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  margin:0;
  min-height:0;
  padding:0;
  border-radius:0;
  border:0;
  background:transparent;
}
.desktop-attendance-view.commuteSheet .welcomePanel .wSection {
  flex:none;
  padding:20px;
  border:1px solid #e8e8e8;
  border-radius:6px;
  background:#fff;
}
.desktop-attendance-view.commuteSheet .welcomePanel .wSection:not(:last-child) {
  border-right:1px solid #e8e8e8;
}
.desktop-attendance-view.commuteSheet .welcomePanel .todayTime h3 {
  margin:0;
  font-size:15px;
  font-weight:600;
  color:#1b1b1b;
}
.desktop-attendance-view.commuteSheet .welcomePanel .todayTime h3 span {
  display:inline-block;
  margin:0 0 0 5px;
  color:#0373ef;
}
.desktop-attendance-view.commuteSheet .welcomePanel .todayTime p {
  margin:10px 0 0;
  font-size:13px;
  line-height:1.2;
  color:#666;
}
.desktop-attendance-view.commuteSheet .welcomePanel .todayRecord {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin:20px 0 0;
}
.desktop-attendance-view.commuteSheet .welcomePanel .todayRecord ul {
  margin:0;
  padding:0;
  list-style:none;
  text-align:center;
}
.desktop-attendance-view.commuteSheet .welcomePanel .todayRecord ul li.title {
  font-size:14px;
  color:#9c9c9c;
}
.desktop-attendance-view.commuteSheet .welcomePanel .todayRecord ul li.data {
  margin:15px 0 0;
  font-size:20px;
  font-weight:500;
  color:#1b1b1b;
}
.desktop-attendance-view.commuteSheet .commuteActionRow {
  grid-column:1 / -1;
  display:flex;
  gap:10px;
  width:100%;
  margin:10px 0 0;
}
.desktop-attendance-view.commuteSheet .commuteActionBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:42px;
  border:1px solid #dfdfdf;
  border-radius:5px;
  background:#fff;
  color:#1b1b1b;
  font-size:14px;
  font-weight:500;
  box-sizing:border-box;
}
.desktop-attendance-view.commuteSheet .commuteActionBtn:disabled {
  border-color:#f0f0f0;
  color:#c5ccd7;
  background:#fff;
  cursor:default;
  opacity:1;
}
.desktop-attendance-view.commuteSheet .commuteActionBtn.is-active {
  border-color:#0373ef;
  background:#0373ef;
  color:#fff;
}
.desktop-attendance-view.commuteSheet .welcomePanel .weekTime {
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
}
.desktop-attendance-view.commuteSheet .welcomePanel .weekTime h3 {
  margin:0;
  font-size:15px;
  font-weight:600;
  color:#1b1b1b;
}
.desktop-attendance-view.commuteSheet .welcomePanel .weekTime p {
  margin:0;
  font-size:15px;
  font-weight:600;
  color:#0373ef;
}
.desktop-attendance-view.commuteSheet .workGraph,
.desktop-attendance-view.commuteSheet .dayGraph {
  width:100%;
  margin:30px 0 0;
}
.desktop-attendance-view.commuteSheet .weekProgressBar {
  position:relative;
  height:16px;
  border-radius:999px;
  background:#f5f5f5;
  overflow:hidden;
}
.desktop-attendance-view.commuteSheet .weekProgressBase,
.desktop-attendance-view.commuteSheet .weekProgressOver {
  position:absolute;
  top:0;
  bottom:0;
  border-radius:999px;
}
.desktop-attendance-view.commuteSheet .weekProgressBase {
  left:0;
  background:#0373ef;
}
.desktop-attendance-view.commuteSheet .workGraph .weekProgressBase {
  background:transparent;
}
.desktop-attendance-view.commuteSheet .weekProgressOver {
  background:#0f7fd1;
}
.desktop-attendance-view.commuteSheet .weekProgressMarker {
  position:absolute;
  top:0;
  bottom:0;
  display:block;
  width:4px;
  border-radius:2px;
  background:#0373ef;
  transform:translateX(-50%);
}
.desktop-attendance-view.commuteSheet .weekProgressScale {
  position:relative;
  height:24px;
  margin:10px 0 0;
}
.desktop-attendance-view.commuteSheet .weekProgressTick {
  position:absolute;
  top:0;
  font-size:12px;
  color:#707070;
  white-space:nowrap;
}
.desktop-attendance-view.commuteSheet .weekProgressTick--threshold {
  transform:translateX(-50%);
}
.desktop-attendance-view.commuteSheet .weekProgressTick--end {
  right:0;
}
.desktop-attendance-view.commuteSheet .commuteHistoryPanel {
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.desktop-attendance-view.commuteSheet .attendGraphList {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.desktop-attendance-view.commuteSheet .attendGraphCard {
  border:1px solid #e8e8e8;
  border-radius:6px;
  background:#fff;
  overflow:hidden;
}
.desktop-attendance-view.commuteSheet .attendGraphHead {
  padding:20px 20px 0;
}
.desktop-attendance-view.commuteSheet .attendGraphDate {
  font-size:18px;
  font-weight:500;
  color:#1b1b1b;
}
.desktop-attendance-view.commuteSheet .attendGraphSummaryInline {
  display:grid;
  grid-template-columns:1fr auto;
  row-gap:8px;
  column-gap:18px;
  margin:16px 0 0;
  font-size:14px;
}
.desktop-attendance-view.commuteSheet .attendGraphSummaryInline span {
  display:contents;
  color:#7f8287;
}
.desktop-attendance-view.commuteSheet .attendGraphSummaryInline strong {
  margin-left:3px;
  font-size:14px;
  font-weight:600;
  color:#1b1b1b;
}
.desktop-attendance-view.commuteSheet .attendTimelineCard {
  padding:26px 20px 20px;
}
.desktop-attendance-view.commuteSheet .attendTimelineHours {
  display:grid;
  grid-template-columns:repeat(17, minmax(0, 1fr));
  padding:0 0 10px;
  font-size:12px;
  color:#9aa2af;
}
.desktop-attendance-view.commuteSheet .attendTimelineHours span {
  display:flex;
  justify-content:center;
}
.desktop-attendance-view.commuteSheet .attendTimelineGrid {
  position:relative;
  height:110px;
  padding:0 0 10px;
  border-radius:6px;
  background:#f8f8f8;
  overflow:hidden;
}
.desktop-attendance-view.commuteSheet .attendTimelineLines {
  display:grid;
  grid-template-columns:repeat(17, minmax(0, 1fr));
  height:100%;
  padding:0 14px;
  box-sizing:border-box;
}
.desktop-attendance-view.commuteSheet .attendTimelineLines span {
  position:relative;
}
.desktop-attendance-view.commuteSheet .attendTimelineLines span:after {
  content:"";
  position:absolute;
  top:16px;
  bottom:6px;
  left:50%;
  border-left:1px dashed #cfd6e1;
}
.desktop-attendance-view.commuteSheet .attendTimelineBar {
  position:absolute;
  top:42px;
  height:28px;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 10px;
  box-sizing:border-box;
  color:#fff;
  font-size:12px;
  font-weight:500;
}
.desktop-attendance-view.commuteSheet .attendTimelineBar.is-done,
.desktop-attendance-view.commuteSheet .attendTimelineBar.is-working {
  background:#2c3a47;
}
.desktop-attendance-view.commuteSheet div.attendEmptyRow {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  font-size:13px;
  border-radius:6px;
  background:#fff;
  border:1px solid #e8e8e8;
  color:#9c9c9c;
}
.desktop-attendance-view.commuteSheet tr.attendEmptyRow td {
  padding:40px 20px 20px;
  border-bottom:0;
  text-align:center;
  color:#9c9c9c;
  font-weight:normal;
}
.desktop-attendance-view.commuteSheet .absenceWelcome {
  margin:40px 0 0;
}
.desktop-attendance-view.commuteSheet .commuteVacationDivider {
  display:none;
}
.desktop-attendance-view.commuteSheet .absenceWelcome > h3 {
  margin:0;
  font-size:20px;
  font-weight:600;
  color:#1b1b1b;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
  margin:10px 0 0;
  background:transparent;
  min-height:0;
  padding:0;
  border-radius:0;
  border:0;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow .absenceInfoChip {
  padding:20px;
  border:1px solid #e8e8e8;
  border-radius:6px;
  background:#fff;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow .summary_day {
  grid-column:1 / -1;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow .summary_day h3 {
  margin:0;
  font-size:15px;
  font-weight:600;
  line-height:1.25;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow .summary_day h3 span {
  display:inline-block;
  margin:0 0 0 5px;
  color:#0373ef;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow .summary_day p {
  margin:10px 0 0;
  font-size:13px;
  line-height:1.25;
  color:#646b73;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow .day_s {
  display:flex;
  align-items:center;
  justify-content:space-between;

  text-align:left;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow .day_s h3 {
  margin:0;
  font-size:13px;
  font-weight:normal;
  color:#666;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow .day_s p {
  margin:0;
  font-size:13px;
  font-weight:600;
  color:#1b1b1b;
}
.desktop-attendance-view.commuteSheet .absenceInfoRow .day_s p.absenceRemainingDays {
  color:#0373ef;
}
.desktop-attendance-view.commuteSheet .attendPanelHead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:20px 0 0;
}
.desktop-attendance-view.commuteSheet .absenceFilterBar {
  display:grid;
  grid-template-columns:1fr 70px;
  align-items:center;
  gap:8px;
  width:240px;
  margin-left:0;
  padding:0;
  border:0;
  background:transparent;
}
.desktop-attendance-view.commuteSheet .absenceFilterField {
  display:flex;
  align-items:center;
  width:100%;
  height:38px;
  border:1px solid #dedede;
  border-radius:5px;
  overflow:hidden;
  background:#fff;
}
.desktop-attendance-view.commuteSheet .absenceFilterField label {
  display:inline-flex;
  align-items:center;
  height:100%;
  padding:0 15px;
  border-right:1px solid #dedede;
  font-size:13px;
  line-height:1;
  color:#1b1b1b;
  background:#fff;
}
.desktop-attendance-view.commuteSheet .absenceYearSelect {
  flex:1;
  height:100%;
  padding:0 30px 0 12px;
  border:0;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
  background-size:10px 7px;
  font-size:13px;
  font-weight:600;
  color:#1b1b1b;
  -webkit-appearance:none;
  appearance:none;
}
.desktop-attendance-view.commuteSheet .absenceSearchBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 12px;
  border:1px solid #dedede;
  border-radius:5px;
  background:#fff;
  font-size:13px;
  font-weight:500;
  color:#1b1b1b;
}
.desktop-attendance-view.commuteSheet .attendHistoryTableWrap.history_table {
  margin:12px 0 0;
  border-top:0;
}
.desktop-attendance-view.commuteSheet .attendHistoryTable {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#fff;
  border-top:1px solid #e8e8e8;
}
.desktop-attendance-view.commuteSheet .attendHistoryTable th {
  height:48px;
  padding:0 12px;
  text-align:left;
  font-size:12px;
  font-weight:500;
  color:#9c9c9c;
  background:#f8f8f8;
  border-bottom:1px solid #e8e8e8;
}
.desktop-attendance-view.commuteSheet .attendHistoryTable td {
  height:64px;
  padding:0 12px;
  border-bottom:1px solid #e8e8e8;
  text-align:left;
  font-size:13px;
  font-weight:normal;
  vertical-align:middle;
  background:#fff;
  color:#1b1b1b;
}
.desktop-attendance-view.commuteSheet .absenceTypeBadge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 8px;
  border-radius:4px;
  background:#fff;
  font-size:12px;
  font-weight:normal;
  color:#fff;
}
.desktop-attendance-view.commuteSheet .absenceTypeBadge.is-annual {
  background:#4d9961;
}
.desktop-attendance-view.commuteSheet .absenceTypeBadge.is-half {
  background:#f76e12;
}
.desktop-attendance-view.commuteSheet .absenceNoticeList {
  margin:20px 0 0;
  padding:18px 20px;
  border:1px solid #e8e8e8;
  border-radius:6px;
  background:#fff;
}
.desktop-attendance-view.commuteSheet .absenceNoticeList p {
  margin:0;
  font-size:12px;
  line-height:1;
  color:#9c9c9c;
}
.desktop-attendance-view.commuteSheet .absenceNoticeList p:not(:last-child) {
  margin:0 0 10px;
}
.desktop-attendance-view.commuteSheet .absenceNoticeList p:before {
  content:"";
  display:inline-block;
  width:3px;
  height:3px;
  background:#9c9c9c;
  border-radius:100%;
  vertical-align:3px;
  margin:0 3px 0 0;
}
.empty-row-td {
  text-align:center;
  color:#8e8e93;
  padding:20px 0
}
.vacation-type-badge {
  color:#4b5563;
  background-color:#f3f4f6;
  border-radius:4px;
  padding:2px 6px;
  font-size:11px;
  font-weight:600
}
.desktop-vacation-modal-overlay {
  z-index:20000;
  background-color:#0006;
  justify-content:center;
  align-items:center;
  display:flex;
  position:fixed;
  inset:0
}
.desktop-vacation-modal-box {
  background-color:#fff;
  border-radius:8px;
  flex-direction:column;
  gap:15px;
  width:320px;
  padding:20px;
  display:flex;
  box-shadow:none
}
.modal-close-btn {
  color:#999;
  cursor:pointer;
  background:0 0;
  border:none;
  font-size:20px;
  box-shadow:none
}
.vacation-request-form {
  flex-direction:column;
  gap:12px;
  display:flex
}
.form-group-flat {
  flex-direction:column;
  gap:5px;
  display:flex
}
.form-group-flat label {
  color:#8e8e93;
  font-size:12px;
  font-weight:500
}
.form-group-flat select, .form-group-flat input {
  font-size:13px;
  font-family:var(--font-family);
  border:1px solid #dedede;
  border-radius:6px;
  outline:none;
  padding:8px 10px
}
.form-row-flat {
  gap:10px;
  display:flex
}
.vacation-submit-pill-btn {
  color:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  font-family:var(--font-family);
  background-color:#4f46e5;
  border:none;
  border-radius:6px;
  margin-top:10px;
  padding:10px;
  box-shadow:none
}
.chat-message-context-menu {
  z-index:10000;
  box-sizing:border-box;
  opacity:0;
  pointer-events:none;
  transform-origin:0 0;
  flex-direction:column;
  align-items:stretch;
  width:130px;
  transition:opacity .14s, transform .14s;
  display:flex;
  position:fixed;
  transform:translateY(4px)scale(.98);
  box-shadow:none;
  background:0 0;
  border:none
}
.chat-message-context-menu.is-open {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)scale(1)
}
.chatMessageContextPanel {
  background-color:var(--white);
  border:1px solid #dedede;
  box-sizing:border-box;
  border-radius:6px;
  flex-direction:column;
  width:100%;
  padding:4px 0;
  display:flex
}
.chatMessageContextBtn {
  width:100%;
  height:32px;
  color:var(--text-main);
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
  background:0 0;
  border:0;
  align-items:center;
  gap:8px;
  padding:0 12px;
  font-size:13px;
  font-weight:500;
  display:flex
}
.chatMessageContextBtn.danger {
  color:#ef4444
}
.chatMessageContextIcon {
  width:14px;
  height:14px;
  color:inherit;
  justify-content:center;
  align-items:center;
  display:inline-flex
}
.chatMessageContextIcon svg {
  fill:currentColor;
  width:14px;
  height:14px
}
.chatMessageContextReactionBar {
  background-color:var(--white);
  border:1px solid #dedede;
  box-sizing:border-box;
  border-radius:6px;
  justify-content:space-around;
  align-items:center;
  gap:6px;
  width:100%;
  margin-top:6px;
  padding:6px 8px;
  display:flex
}
.chatMessageContextReactionBtn {
  cursor:pointer;
  box-sizing:border-box;
  background:0 0;
  border:0;
  border-radius:4px;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  padding:0;
  display:inline-flex
}
.chatMessageContextReactionBtn img {
  object-fit:contain;
  width:20px;
  height:20px;
  display:block
}
.message-reactions-summary-container {
  flex-wrap:wrap;
  gap:4px;
  width:100%;
  margin-top:6px;
  display:flex
}
.chatReactionSummaryBtn {
  background-color:var(--white);
  cursor:pointer;
  box-sizing:border-box;
  border:0;
  border-radius:4px;
  align-items:center;
  gap:4px;
  height:22px;
  padding:0 6px;
  display:inline-flex;
  box-shadow:none
}
.chatReactionSummaryBtn img {
  object-fit:contain;
  width:14px;
  height:14px;
  display:block
}
.chatReactionSummaryBtn span {
  font-size:11px;
  font-weight:500
}
.chatReactionSummaryBtn.is-active {
  background-color:#fff;
  border:0
}
.chatReactionSummaryBtn.is-active span {
  color:#1b1b1b
}
.chat-reply-preview-container {
  box-sizing:border-box;
  background-color:#f5f5f5;
  border-bottom:1px solid #e5e5e5;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 16px;
  display:flex
}
.chat-reply-preview-inner {
  text-align:left;
  flex-direction:column;
  flex:1;
  min-width:0;
  display:flex
}
.reply-preview-sender {
  color:#3271e8;
  font-size:12px;
}
.reply-preview-text {
  color:#1b1b1b;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  overflow:hidden
}
.reply-preview-close-btn {
  width:24px;
  height:24px;
  color:var(--text-muted);
  cursor:pointer;
  background:0 0;
  border:0;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  padding:0;
  display:inline-flex
}
.chatBubbleReplyMeta {
  color:#1b1b1b;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:2px;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  display:block;
  overflow:hidden
}
.chatBubbleReplyQuote {
  color:#707070;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
  margin-top:3px;
  font-size:13px;
  line-height:1.35;
  display:block;
  overflow:hidden
}
.chatBubbleReplyDivider {
  background:#0000001f;
  height:1px;
  margin:10px 0 7px;
  display:block
}
.chatBubbleReplyBody {
  color:#1b1b1b;
  white-space:pre-wrap;
  font-size:14px;
  line-height:1.4;
  display:block
}
.message-reactions-summary-container.mine {
  justify-content:flex-end
}
@media (width>=768px) {
  .chat-room-screen .screen-header {
    padding:35px 20px 10px
  }

.chat-sidebar, .chat-sidebar-header, .chat-sidebar-header .icon-btn, .chat-sidebar-header button, .chat-sidebar-header svg {
    -webkit-app-region:no-drag
  }

.desktop-sidebar {
    -webkit-app-region:drag;
    -webkit-user-select:none;
    user-select:none
  }

.desktop-sidebar button, .desktop-sidebar .avatar-silhouette, .desktop-sidebar img, .desktop-sidebar a, .desktop-sidebar .sidebar-menu-btn, .desktop-sidebar .sidebar-icon-btn, .desktop-sidebar .desktop-settings-wrapper {
    z-index:10005;
    -webkit-app-region:no-drag;
    position:relative
  }

.chat-room-screen .screen-header, .desktop-main-content .screen-header {
    -webkit-app-region:drag;
    -webkit-user-select:none;
    user-select:none
  }

.screen-header button, .screen-header input, .screen-header a, .screen-header svg, .screen-header .search-bar-container, .screen-header .header-action-btn, .screen-header .chat-back-btn {
    -webkit-app-region:no-drag
  }

body, .desktop-app-container {
    -webkit-user-select:none;
    user-select:none
  }

input, textarea, [contenteditable=true], .message-bubble {
    -webkit-user-select:text;
    user-select:text
  }

}
.modal-overlay.image-viewer-overlay {
  z-index:100000;
  background-color:#00000073
}
.image-viewer-modal-content {
  background-color:#fff;
  border-radius:10px;
  flex-direction:column;
  width:500px;
  max-width:calc(100vw - 40px);
  display:flex;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 48px #00000038
}
.modal-header.image-viewer-header {
  border-bottom:1px solid #dedede;
  height:58px;
  margin-bottom:0;
  padding:0 56px
}
.image-viewer-close-dot {
  cursor:pointer;
  position:absolute;
  top:50%;
  left:18px;
  transform:translateY(-50%)
}
.modal-header .modal-title.image-viewer-title {
  color:#1a1a1a;
  text-align:center;
  width:100%;
  margin:0;
  font-size:18px;
  font-weight:600
}
.image-viewer-body {
  background-color:#eaeaea;
  flex-grow:1;
  justify-content:center;
  align-items:center;
  min-height:220px;
  max-height:400px;
  padding:0;
  display:flex;
  overflow:auto
}
.image-viewer-main-img {
  object-fit:contain;
  background-color:#fff;
  border-radius:0;
  width:100%;
  max-height:380px
}
.image-viewer-grid {
  white-space:nowrap;
  background-color:#f8f8f8;
  border-top:1px solid #dedede;
  gap:10px;
  padding:12px 20px;
  display:flex;
  overflow-x:auto
}
.image-viewer-grid-item {
  cursor:pointer;
  border-radius:4px;
  flex-shrink:0;
  width:60px;
  height:60px;
  overflow:hidden
}
.image-viewer-grid-item-selected {
  border-color:#1b1b1b
}
.image-viewer-grid-item-unselected {
  border:1px solid #e8e8e8
}
.image-viewer-grid-img {
  object-fit:cover;
  width:100%;
  height:100%
}
.image-viewer-footer {
  border-top:1px solid #dedede;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  display:flex
}
.image-viewer-footer-btn {
  cursor:pointer;
  color:#1b1b1b;
  background:0 0;
  border:none;
  align-items:center;
  padding:4px;
  display:flex
}
.image-viewer-grid-toggle-btn-active {
  background:#f5f5f5;
  border-radius:4px
}
.image-viewer-footer-right-group {
  align-items:center;
  gap:14px;
  display:flex
}
.forward-modal-backdrop {
  z-index:100000;
  background-color:#00000073;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  display:flex;
  position:fixed;
  top:0;
  left:0
}
.forward-modal-content {
  background-color:#fff;
  border-radius:10px;
  flex-direction:column;
  width:320px;
  height:480px;
  max-height:90vh;
  display:flex;
  position:relative;
  box-shadow:0 20px 48px #00000038
}
.modal-header.forward-modal-header {
  height:48px;
  margin:0;
  padding:0 20px;
}
.forward-modal-close-dot {
  cursor:pointer;
  position:absolute;
  top:50%;
  left:20px;
  transform:translateY(-50%)
}
.modal-header .modal-title.forward-modal-title {
  color:#1a1a1a;
  text-align:center;
  width:100%;
  margin:0;
  font-size:16px;
  font-weight:600
}
.forward-modal-body {
  flex-direction:column;
  flex:1 1 0%;
  min-height:0;
  gap:8px;
  display:flex;
  overflow-y:auto
}
.forward-modal-empty-text {
  color:#8e8e93;
  text-align:center;
  padding:10px;
  font-size:13px
}
.forward-modal-user-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  min-height:44px;
  border-radius: 0;
  transition: none;
}
.forward-modal-user-item:hover { background:#f8f8f8; }
.forward-modal-user-avatar-silhouette {
  width:30px;
  height:30px
}
.forward-modal-user-avatar-img {
  object-fit:cover;
  border-radius:50%;
  width:100%;
  height:100%
}
.forward-modal-user-name {
  color:#1a1a1a;
  font-size:13px;
  font-weight:500
}
.link-preview-card {
  cursor:pointer;
  text-align:left;
  background-color:#fff;
  border:1px solid #dedede;
  border-radius:12px;
  flex-direction:column;
  max-width:320px;
  margin-top:8px;
  transition:background-color .2s;
  display:flex;
  overflow:hidden;
  box-shadow:none
}
.link-preview-card:hover {
  background-color:#fcfcfc
}
.link-preview-image {
  object-fit:cover;
  border-bottom:1px solid #e8e8e8;
  width:100%;
  height:160px
}
.link-preview-info {
  flex-direction:column;
  gap:4px;
  padding:12px;
  display:flex
}
.link-preview-title {
  color:#1b1b1b;
  text-overflow:ellipsis;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  display:-webkit-box;
  overflow:hidden
}
.link-preview-desc {
  color:#8e8e93;
  text-overflow:ellipsis;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-size:11px;
  line-height:1.4;
  display:-webkit-box;
  overflow:hidden
}
.link-preview-url {
  color:#007aff;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:2px;
  font-size:11px;
  text-decoration:underline;
  overflow:hidden
}
.chat-announcement-banner {
  cursor:pointer;
  z-index:9;
  -webkit-user-select:none;
  user-select:none;
  background-color:#fff;
  border-top:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8;
  justify-content:space-between;
  align-items:center;
  padding:10px 15px;
  transition:all .2s;
  display:flex;
  box-shadow:none
}
.announcement-main-content {
  flex:1;
  align-items:center;
  gap:8px;
  min-width:0;
  display:flex
}
button.announcement-main-content {
  cursor:pointer;
  color:inherit;
  text-align:left;
  background:transparent;
  border:0;
  padding:0
}
.announcement-speaker-icon {
  flex-shrink:0;
  align-items:center;
  display:flex
}
.announcement-title {
  color:#1b1b1b;
  flex-shrink:0;
  font-size:13px;
  font-weight:600;
  display:none
}
.announcement-text-body {
  color:#1b1b1b;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:500;
  overflow:hidden
}
.chat-announcement-banner.collapsed .announcement-text-body {
  font-size:12px
}
.announcement-action-btns {
  flex-shrink:0;
  align-items:center;
  gap:12px;
  margin-left:12px;
  display:flex
}
.announcement-close-btn {
  cursor:pointer;
  color:#1b1b1b;
  background:0 0;
  border:none;
  outline:none;
  align-items:center;
  padding:0;
  display:flex
}
.delete-confirm-backdrop {
  -webkit-backdrop-filter:blur(1px);
  backdrop-filter:blur(1px);
  z-index:110000;
  background-color:#0006;
  justify-content:center;
  align-items:center;
  animation:.15s ease-out fadeIn;
  display:flex;
  position:fixed;
  inset:0
}
.delete-confirm-content {
  background-color:var(--white);
  box-sizing:border-box;
  border:1px solid #dedede;
  border-radius:12px;
  width:300px;
  padding:24px 20px 16px;
  box-shadow:none;
  position:relative;
  z-index:1
}
.delete-confirm-body {
  margin-bottom:24px
}
.delete-confirm-text {
  color:#1b1b1b;
  text-align:center;
  margin:0;
  font-size:14px;
  font-weight:500;
  line-height:1.5
}
.delete-confirm-actions {
  gap:10px;
  display:flex
}
.delete-confirm-btn {
  cursor:pointer;
  border:none;
  border-radius:20px;
  outline:none;
  flex:1;
  height:40px;
  font-size:14px;
  font-weight:600;
  transition:background-color .15s;
  box-shadow:none
}
.delete-confirm-btn.cancel {
  color:#495057;
  background-color:#e9ecef
}
.delete-confirm-btn.confirm {
  color:var(--white);
  background-color:#007aff
}
.deleted-message-bubble-content {
  color:#666;
  align-items:center;
  gap:3px;
  padding:4px 2px;
  display:flex
}
.mine .message-bubble.deleted-message-bubble,
.other .message-bubble.deleted-message-bubble {
  color:#666;
  background-color:#f1f3f5;
  border:1px solid #e1e4e8;
  cursor:default
}
.deleted-message-icon {
  flex-shrink:0;
  align-items:center;
  display:flex
}
.deleted-message-icon svg {
  fill:#666
}
.deleted-message-text {
  -webkit-user-select:none;
  user-select:none;
  font-size:13px
}
.message-group.consecutive {
  margin-top:-10px
}
.chat-poll-card {
  white-space:pre-line;
  min-width:260px;
  max-width:320px;
  padding:6px 0 0;
  display:block
}
.chat-poll-card-title {
  color:#1b1b1b;
  word-break:break-word;
  margin:0 0 5px;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  display:block
}
.chat-poll-card-meta {
  color:#707070;
  align-items:center;
  gap:6px;
  margin:0 0 10px;
  font-size:12px;
  line-height:1.2;
  display:flex
}
.chat-poll-options {
  flex-direction:column;
  gap:7px;
  display:flex
}
.chat-poll-option-btn {
  color:#1b1b1b;
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e1e6ee;
  border-radius:6px;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:36px;
  margin:0;
  padding:0 10px;
  font-size:13px;
  display:flex;
  position:relative;
  overflow:hidden;
  box-shadow:none
}
.chat-poll-option-btn.is-selected {
  color:#fff;
  background:#707070;
  border-color:#707070
}
.chat-poll-option-fill {
  z-index:0;
  pointer-events:none;
  background:#f0f2f5;
  position:absolute;
  inset:0 auto 0 0
}
.chat-poll-option-btn.is-selected .chat-poll-option-fill {
  background:#5c5c5c
}
.chat-poll-option-text {
  z-index:1;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  position:relative;
  overflow:hidden
}
.chat-poll-option-count {
  z-index:1;
  color:#707070;
  flex:none;
  font-size:12px;
  position:relative
}
.chat-poll-option-btn.is-selected .chat-poll-option-text, .chat-poll-option-btn.is-selected .chat-poll-option-count {
  color:#fff
}
.chat-poll-card-foot {
  color:#333;
  text-align:right;
  margin:10px 0 0;
  font-size:12px
}
.poll-create-backdrop {
  z-index:20000;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  background:#00000073;
  justify-content:center;
  align-items:center;
  display:flex;
  position:fixed;
  inset:0
}
.poll-create-content {
  background:#fff;
  border-radius:10px;
  flex-direction:column;
  width:360px;
  max-width:calc(100vw - 40px);
  height:560px;
  max-height:calc(100vh - 60px);
  display:flex;
  overflow:hidden;
  box-shadow:none
}
.poll-create-content .modal-header {
  box-sizing:border-box;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:60px;
  margin-bottom:0;
  padding:0 20px;
  display:flex;
  position:relative
}
.poll-create-content .modal-close-dot {
  position:absolute;
  top:50%;
  left:20px;
  transform:translateY(-50%)
}
.poll-create-content .modal-title {
  color:#1b1b1b;
  text-align:center;
  width:100%;
  margin:0;
  font-size:18px;
  font-weight:600
}
.poll-create-body {
  box-sizing:border-box;
  flex:auto;
  padding:15px 20px 20px;
  overflow-y:auto
}
.poll-author-name {
  color:#9c9c9c;
  margin-bottom:12px;
  font-size:13px
}
.poll-title-input {
  box-sizing:border-box;
  color:#1b1b1b;
  border:0;
  border-bottom:1px solid #e8e8e8;
  border-radius:0;
  outline:none;
  width:100%;
  height:38px;
  padding:0;
  font-size:16px;
  font-weight:600
}
.poll-title-input::placeholder {
  color:#b7b7b7
}
.poll-option-list {
  flex-direction:column;
  gap:8px;
  margin:15px 0;
  display:flex
}
.poll-option-row {
  grid-template-columns:24px 1fr;
  align-items:center;
  gap:6px;
  display:grid
}
.poll-option-remove-btn {
  cursor:pointer;
  background:0 0;
  border:0;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  display:inline-flex;
  box-shadow:none
}
.poll-option-remove-btn:disabled {
  cursor:not-allowed;
  opacity:.4
}
.poll-option-row input {
  color:#1b1b1b;
  box-sizing:border-box;
  border:1px solid #dfdfdf;
  border-radius:6px;
  outline:none;
  width:100%;
  height:40px;
  padding:0 14px;
  font-size:14px
}
.poll-option-row input::placeholder {
  color:#b7b7b7
}
.poll-add-option-btn {
  color:#0373ef;
  cursor:pointer;
  background:0 0;
  border:0;
  align-items:center;
  gap:6px;
  height:28px;
  margin:0 0 15px 30px;
  padding:0;
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  box-shadow:none
}
.poll-add-option-btn:disabled {
  opacity:.5;
  cursor:not-allowed
}
.poll-checkbox-group {
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
  display:flex
}
.poll-checkbox-label {
  cursor:default;
  color:#1b1b1b;
  align-items:center;
  gap:8px;
  font-size:14px;
  display:flex
}
.poll-checkbox-label input {
  cursor:default;
  pointer-events:none;
  margin:0
}
.poll-deadline-row {
  color:#1b1b1b;
  border-top:1px solid #f1f1f1;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  font-size:14px;
  display:flex
}
.poll-deadline-input {
  color:#1b1b1b;
  border:1px solid #dfdfdf;
  border-radius:6px;
  outline:none;
  padding:6px 10px;
  font-size:13px
}
.poll-create-footer {
  background:#fff;
  border-top:1px solid #f1f1f1;
  padding:16px 24px
}
.poll-submit-btn {
  color:#fff;
  cursor:pointer;
  background:#0373ef;
  border:0;
  border-radius:6px;
  width:100%;
  height:44px;
  font-size:15px;
  font-weight:600;
  box-shadow:none
}
.poll-submit-btn:disabled {
  color:#b7b7b7;
  cursor:not-allowed;
  background:#e1e6ee
}
.chatPollDatePicker, .chatPollTimePicker {
  z-index:3100;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #dee6ee;
  border-radius:10px;
  position:absolute;
  top:auto;
  bottom:calc(100% + 6px);
  right:0;
  box-shadow:none
}
.chatPollDatePicker {
  width:260px;
  padding:14px 14px 12px
}
.chatPollDatePickerHead {
  grid-template-columns:26px 26px minmax(0, 1fr) 26px 26px;
  align-items:center;
  gap:2px;
  margin:0 0 12px;
  display:grid
}
.chatPollDatePickerTitle {
  text-align:center;
  color:#1b1b1b;
  font-size:16px;
  font-weight:600;
  line-height:1
}
.chatPollDatePickerNav {
  color:#6b7280;
  cursor:pointer;
  background:0 0;
  border:0;
  justify-content:center;
  align-items:center;
  width:26px;
  height:26px;
  padding:0;
  font-size:20px;
  line-height:1;
  display:inline-flex;
  box-shadow:none
}
.chatPollDatePickerWeek, .chatPollDatePickerGrid {
  text-align:center;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  display:grid
}
.chatPollDatePickerWeek span {
  color:#1b1b1b;
  padding:0 0 8px;
  font-size:12px;
  font-weight:600
}
.chatPollDatePickerWeek span:first-child {
  color:#ff3b4f
}
.chatPollDatePickerDay {
  color:#1b1b1b;
  cursor:pointer;
  background:0 0;
  border:0;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:28px;
  height:28px;
  margin:2px auto;
  font-size:14px;
  display:inline-flex;
  box-shadow:none
}
.chatPollDatePickerDay.is-sunday {
  color:#ff3b4f
}
.chatPollDatePickerDay.is-outside {
  color:#9c9c9c
}
.chatPollDatePickerDay.is-selected {
  color:#fff;
  background:#1b1b1b
}
.chatPollTimePicker {
  width:160px;
  max-height:260px;
  padding:0;
  overflow-y:auto
}
.chatPollTimeOption {
  color:#1b1b1b;
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
  background:#fff;
  border:0;
  align-items:center;
  width:100%;
  height:40px;
  padding:0 14px;
  font-size:13px;
  display:flex;
  box-shadow:none
}
.chatPollTimeOption.is-selected {
  background:#f5f6f8
}
.member-count {
  margin-left:5px;
  color:#9c9c9c;
  font-weight:400
}
.calendar-view-container {
  box-sizing:border-box;
  background-color:#fff;
  width:100%;
  height:100%;
  display:flex;
  overflow:hidden
}
.calendar-main-content {
  box-sizing:border-box;
  background-color:#fff;
  flex-direction:column;
  flex:1;
  height:100%;
  display:flex;
  overflow:hidden
}
.calendar-main-header {
  background-color:#fff;
  flex-shrink:0;
  justify-content:space-between;
  align-items:flex-start;
  padding:30px 20px 10px;
  display:flex;
  position:relative
}
.calendar-header-left {
  align-items:center;
  gap:8px;
  display:flex
}
.calendar-header-create-btn {
  color:#1b1b1b;
  cursor:pointer;
  background-color:#0373f0;
  border:0;
  border-radius:8px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  display:flex;
  box-shadow:none
}
.calendar-header-create-btn svg { color:#fff; }
.calendar-header-today-btn {
  color:#1c1c1e;
  cursor:pointer;
  background-color:#fff;
  border:1px solid #dedede;
  border-radius:8px;
  height:32px;
  padding:0 14px;
  font-size:13px;
  font-weight:500;
  box-shadow:none
}
.calendar-header-nav-group {
  border:1px solid #dedede;
  border-radius:8px;
  height:32px;
  display:flex;
  overflow:hidden
}
.calendar-header-nav-arrow {
  color:#1c1c1e;
  cursor:pointer;
  background-color:#fff;
  border:0;
  justify-content:center;
  align-items:center;
  width:32px;
  height:100%;
  display:flex;
  box-shadow:none
}
.calendar-header-nav-arrow:first-child {
  border-right:1px solid #dedede
}
.calendar-header-center {
  position:absolute;
  left:50%;
  transform:translate(-50%)
}
.calendar-year-month {
  color:#1b1b1b;
  font-size:20px;
  font-weight:600;
  margin-left:10px;
}
.calendar-header-right {
  align-items:center;
  gap:16px;
  display:flex
}
.calendar-header-filters-group {
  gap:10px;
  display:flex
}
.filter-checkbox-chip {
  color:#1c1c1e;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  background-color:#fff;
  border:1px solid #e5e5ea;
  border-radius:14px;
  align-items:center;
  gap:6px;
  height:28px;
  padding:0 10px;
  font-size:13px;
  display:flex
}
.filter-checkbox-chip input[type=checkbox] {
  width:14px;
  height:14px;
  margin:0
}
.checkbox-chip-dot {
  border-radius:50%;
  width:6px;
  height:6px;
  display:inline-block
}
.filter-chip-text {
  font-weight:500
}
.calendar-view-mode-pill {
  box-sizing:border-box;
  background-color:#f1f3f4;
  border-radius:18px;
  align-items:center;
  gap:2px;
  height:32px;
  padding:3px;
  display:flex
}
.calendar-mode-pill-btn {
  color:#5f6368;
  cursor:pointer;
  background-color:#0000;
  border:0;
  border-radius:13px;
  height:26px;
  padding:0 14px;
  font-size:13px;
  font-weight:500;
  box-shadow:none
}
.calendar-mode-pill-btn.active {
  color:#1c1c1e;
  background-color:#fff;
  font-weight:600
}
.calendar-header-utils {
  align-items:center;
  gap:8px;
  display:flex
}
.calendar-util-icon-btn {
  color:#5f6368;
  cursor:pointer;
  background-color:#0000;
  border:0;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  display:flex;
  box-shadow:none
}
.calendar-util-icon-btn:hover {
  color:#1c1c1e;
  background-color:#f5f5f7
}
.calendar-util-profile-avatar {
  background-color:#e3f2fd;
  border:1px solid #e5e5ea;
  border-radius:50%;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  display:flex;
  overflow:hidden
}
.calendar-util-profile-avatar img {
  object-fit:cover;
  width:100%;
  height:100%
}
.cell-holiday-label {
  color:#dc2626;
  margin-left:5px;
  font-size:13px;
  font-weight:500
}
.cell-date-num.holiday-active {
  color:#dc2626
}
.calendar-grid-wrapper {
  box-sizing:border-box;
  flex-direction:column;
  flex:1;
  padding:16px 20px 20px;
  display:flex;
  overflow:hidden
}
.calendar-grid-header {
  border-bottom:1px solid #e8e8e8;
  flex-shrink:0;
  grid-template-columns:repeat(7, 1fr);
  padding-bottom:8px;
  display:grid
}
.calendar-grid-header-cell {
  text-align:center;
  padding-left:0;
  font-size:13px;
  font-weight:500
}
.calendar-grid-header-cell:first-child, .calendar-grid-header-cell:last-child {
  color:#9c9c9c
}
.calendar-grid-body {
  background-color:#fff;
  border-left:1px solid #e8e8e8;
  flex:1;
  grid-template-rows:repeat(6, 1fr);
  grid-template-columns:repeat(7, 1fr);
  display:grid
}
.calendar-grid-cell {
  text-align:left;
  box-sizing:border-box;
  border-bottom:1px solid #e8e8e8;
  border-right:1px solid #e8e8e8;
  flex-direction:column;
  gap:4px;
  padding:6px;
  display:flex;
  overflow:hidden;

  cursor:pointer}
.cell-header {
  justify-content:flex-start;
  align-items:center;
  display:flex;
}
.cell-date-num {
  color:#1b1b1b;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:30px;
  height:30px;
  font-size:14px;
  font-weight:500;
  display:flex
}
.calendar-grid-cell.other-month .cell-date-num {
  color:#c7c7cc
}
.cell-date-num.today-active {
  border:1px solid #1b1b1b;
  font-weight:600;
  color:#1b1b1b;
  background-color:#fff
}
.cell-date-num.selected-active {
  background-color:#1b1b1b;
  font-weight:600;
  color:#fff
}
.cell-date-num.is-saturday {
  color:#1b1b1b
}
.cell-date-num.is-sunday {
  color:#ff5c68
}
.cell-date-num.holiday-active,
.cell-date-num.holiday-active.is-sunday,
.cell-date-num.holiday-active.is-saturday {
  color:#ff5c68
}
.cell-date-num.selected-active,
.cell-date-num.selected-active.is-sunday,
.cell-date-num.selected-active.is-saturday,
.cell-date-num.selected-active.holiday-active {
  color:#fff
}
.cell-events-list {
  flex-direction:column;
  flex:1;
  gap:0;
  display:flex;
  overflow-y:auto
}
.calendar-event-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: transparent;
  border-left: none;
  padding:6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-shadow: none;
  border-radius: 6px;
}
.calendar-event-badge:hover {
  background-color: #f5f5f5;
}
.calendar-modal-date-picker, .calendar-modal-time-picker {
  color:#1b1b1b;
  background-color:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
  outline:none;
  flex:1;
  padding:8px 12px;
  font-size:14px;
  font-weight:500;
  box-shadow:none
}
.calendar-modal-input-field {
  color:#1b1b1b;
  background-color:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
  outline:none;
  flex:1;
  padding:10px 14px;
  font-size:14px;
  font-weight:500;
  box-shadow:none
}
.calendar-modal-select-field {
  color:#1b1b1b;
  cursor:pointer;
  appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-position:right 14px center;
  background-repeat:no-repeat;
  background-size:16px;
  border:1px solid #e0e0e0;
  border-radius:8px;
  outline:none;
  flex:1;
  padding:10px 36px 10px 14px;
  font-size:14px;
  font-weight:500;
  box-shadow:none
}
.calendar-modal-submit-btn {
  color:#fff;
  cursor:pointer;
  background-color:#0373f0;
  border:none;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  width:100%;
  height:48px;
  font-size:14px;
  font-weight:600;
  display:flex;
  box-shadow:none;
  margin-top:10px;
}
.calendar-toggle-switch {
  flex-shrink:0;
  width:36px;
  height:20px;
  display:inline-block;
  position:relative
}
.calendar-toggle-switch input {
  opacity:0;
  width:0;
  height:0
}
.calendar-toggle-slider {
  cursor:pointer;
  background-color:#ccc;
  border-radius:20px;
  transition:all .2s;
  position:absolute;
  inset:0
}
.calendar-toggle-slider:before {
  content:"";
  background-color:#fff;
  border-radius:50%;
  width:14px;
  height:14px;
  transition:all .2s;
  position:absolute;
  bottom:3px;
  left:3px
}
.calendar-toggle-switch input:checked+.calendar-toggle-slider {
  background-color:#8e8e93
}
.calendar-toggle-switch input:checked+.calendar-toggle-slider:before {
  transform:translate(16px)
}
.calendar-modal-custom-picker {
  color:#1b1b1b;
  cursor:pointer;
  background-color:#fff;
  border:1px solid #dedede;
  border-radius:8px;
  flex:1;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  font-size:14px;
  font-weight:500;
  display:flex;
  box-shadow:none;
}
.mini-calendar-popup {
  z-index:20500;
  background-color:#fff;
  border:1px solid #dedede;
  border-radius:10px;
  flex-direction:column;
  gap:12px;
  width:280px;
  padding:16px;
  display:flex;
  position:absolute;
  top:42px;
  left:0;
  box-shadow:none
}
.mini-cal-header {
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
  display:flex
}
.mini-cal-nav-group {
  gap:4px;
  display:flex
}
.mini-cal-nav-btn {
  cursor:pointer;
  color:#5f6368;
  background:0 0;
  border:none;
  border-radius:4px;
  padding:2px 6px;
  font-size:16px;
  box-shadow:none
}
.mini-cal-title {
  color:#1b1b1b;
  font-size:15px;
  font-weight:600
}
.mini-cal-days-header {
  text-align:center;
  grid-template-columns:repeat(7, 1fr);
  margin-bottom:4px;
  display:grid
}
.mini-cal-day-cell {
  color:#70757a;
  font-size:11px;
  font-weight:600
}
.mini-cal-day-cell.sun {
  color:#dc2626
}
.mini-cal-day-cell.sat {
  color:#2563eb
}
.mini-cal-grid {
  grid-template-columns:repeat(7, 1fr);
  gap:2px;
  display:grid
}
.mini-cal-date-btn {
  cursor:pointer;
  color:#1c1c1e;
  background:0 0;
  border:none;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  height:32px;
  font-size:13px;
  font-weight:500;
  display:flex;
  box-shadow:none
}
.mini-cal-date-btn.other-month {
  color:#c7c7cc
}
.mini-cal-date-btn.sun {
  color:#dc2626
}
.mini-cal-date-btn.sat {
  color:#2563eb
}
.mini-cal-date-btn.active {
  font-weight:600;
  color:#fff;
  background-color:#1b1b1b
}
.mini-cal-footer {
  border-top:1px solid #e8e8e8;
  justify-content:center;
  padding-top:10px;
  display:flex
}
.mini-cal-today-btn {
  color:#1b1b1b;
  cursor:pointer;
  background:0 0;
  border:1px solid #dedede;
  border-radius:6px;
  padding:6px 14px;
  font-size:12px;
  font-weight:500;
  box-shadow:none
}
.mini-time-dropdown-popup {
  z-index:20500;
  background-color:#fff;
  border:1px solid #dedede;
  border-radius:8px;
  width:160px;
  max-height:240px;
  padding:4px;
  position:absolute;
  top:42px;
  right:0;
  overflow-y:auto;
  box-shadow:none
}
.mini-time-item-btn {
  text-align:left;
  color:#1c1c1e;
  cursor:pointer;
  background:0 0;
  border:none;
  border-radius:4px;
  width:100%;
  padding:8px 12px;
  font-size:13px;
  font-weight:500;
  box-shadow:none
}
.mini-time-item-btn.active {
  background-color:#f1f3f4;
  font-weight:600
}
.picker-value-text {
  color:#1b1b1b;
  font-size:14px;
  font-weight:500;
}
.calendar-create-modal {
  box-sizing:border-box;
  background-color:#fff;
  border:1px solid #dedede;
  border-radius:10px;
  flex-direction:column;
  gap:15px;
  width:440px;
  padding:15px 20px 25px;
  display:flex;
  position:relative;
  box-shadow:none
}
.calendar-modal-close-btn {
  cursor:pointer;
  color:#1b1b1b;
  background:0 0;
  border:none;
  justify-content:center;
  align-items:center;
  padding:0;
  display:flex;
  position:absolute;
  top:15px;
  right:20px;
  box-shadow:none
}
.calendar-modal-title-input {
  color:#1b1b1b;
  background:0 0;
  border:none;
  border-bottom:1px solid #e8e8e8;
  outline:none;
  width:100%;
  padding:0 0 6px;
  font-size:18px;
  font-weight:600
}
.calendar-modal-form-body {
  flex-direction:column;
  gap:12px;
  display:flex
}
.calendar-modal-row {
  align-items:center;
  gap:12px;
  display:flex
}
.calendar-modal-row-start {
  align-items:flex-start;
  gap:12px;
  display:flex
}
.calendar-modal-icon-wrapper {
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  display:flex
}
.calendar-modal-icon-wrapper-margin {
  margin-top:6px
}
.calendar-modal-field-group {
  flex-direction:column;
  flex:1;
  gap:8px;
  display:flex;
  position:relative
}
.calendar-modal-flex-row {
  gap:8px;
  display:flex;
  position:relative
}
.calendar-modal-allday-wrapper {
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:4px;
  display:flex
}
.calendar-modal-allday-label {
  color:#333;
  font-size:13px;
}
.calendar-modal-checkbox-input {
  cursor:pointer;
  width:16px;
  height:16px;
  margin:0
}
.calendar-modal-color-group {
  align-items:center;
  gap:10px;
  display:flex
}
.calendar-modal-color-chip {
  cursor:pointer;
  border:none;
  border-radius:50%;
  width:20px;
  height:20px;
  padding:0;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.calendar-modal-color-chip.active {
  border:none
}
.calendar-modal-color-chip.chip-yellow {
  background-color:#f27b32
}
.calendar-modal-color-chip.chip-pink {
  background-color:#d84896
}
.calendar-modal-color-chip.chip-green {
  background-color:#59984d
}
.calendar-modal-color-chip.chip-purple {
  background-color:#276cde
}
.calendar-modal-color-chip.chip-brown {
  background-color:#6114c9
}
.calendar-modal-backdrop-shield {
  z-index:20499;
  background:0 0;
  position:fixed;
  inset:0
}
.calendar-modal-picker-svg {
  flex-shrink:0
}
.calendar-modal-svg {
  width:20px;
  height:20px
}
.event-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.event-badge-dot.event-color-yellow {
  background-color: #f27b32;
}
.event-badge-dot.event-color-pink {
  background-color: #d84896;
}
.event-badge-dot.event-color-green {
  background-color: #59984d;
}
.event-badge-dot.event-color-purple {
  background-color: #276cde;
}
.event-badge-dot.event-color-brown {
  background-color: #6114c9;
}
.event-badge-title {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.member-select-label {
  color:#9c9c9c;
  border-top:none;
  padding:10px 20px 5px;
  font-size:12px;
  font-weight:500
}
.calendar-segment-control {
  flex-shrink:0;
  width:320px
}
.member-select-list, .invite-member-list-wrapper, .modal-body-scroll {
  -webkit-overflow-scrolling:touch
}
.member-select-item, .invite-user-item {
  will-change:transform;
  backface-visibility:hidden;
  transform:translate(0, 0)
}
.message-bubble.emoticon-bubble, .message-bubble.file-bubble {
  background:0 0;
  border:none;
  padding:0
}
.calendar-detail-modal {
  box-sizing: border-box;
  background-color: var(--white);
  border: 1px solid #dedede;
  border-radius: 10px;
  flex-direction: column;
  width: 360px;
  padding: 15px 20px 25px;
  display: flex;
  position: relative;
  box-shadow: none;
}
.calendar-detail-body {
  margin-top: 0;
}
.pre-wrap {
  white-space: pre-wrap;
}
.calendar-detail-creator-badge {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 6px;
  border-radius: 5px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 1;
}
.calendar-detail-footer {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}
.calendar-detail-edit-text-btn {
  display: block;
  flex: 1;
  color: #444;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 6px;
  text-align: center;
  height: 40px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
.calendar-detail-delete-text-btn {
  display: block;
  flex: 1;
  color: #ec4c4c;
  background: #fff;
  border: 1px solid #ec4c4c;
  border-radius: 6px;
  text-align: center;
  height: 40px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
.calendar-detail-title {
  font-size: 20px;
  color: #1b1b1b;
  margin: 0;
  font-weight: 600;
  text-align: left;
  line-height: 1.25;
}
.calendar-detail-time-text {
  font-size: 13px;
  color: #9c9c9c;
  margin:3px 0 15px;
  text-align: left;
  line-height: 1;
}
.detail-divider {
  border-bottom: 1px solid #e8e8e8;
  margin: 0 -20px 16px -20px;
}
.calendar-detail-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.calendar-detail-info-row:last-child { margin-bottom:0; }
.calendar-detail-info-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.calendar-detail-info-text {
  font-size: 14px;
  color: #1b1b1b;
  text-align: left;
  line-height: 1.4;
  font-weight: 500;
}
.calendar-modal-footer-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 20px;
  width: 100%;
}
.calendar-modal-cancel-btn {
  display: block;
  flex: 1;
  color: #1c1c1e;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 6px;
  text-align: center;
  height:42px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
.calendar-modal-save-btn {
  display: block;
  flex: 1;
  color: #fff;
  background: #0373f0;
  border: none;
  border-radius: 6px;
  text-align: center;
  height: 42px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
/* -------------------------------------------------------------
   [Antigravity Custom Override]
   인라인 스타일을 CSS 클래스로 이관하기 위한 규칙
   (style 방식 사용 안 함 규칙 준수)
------------------------------------------------------------- */
.message-bubble.transparent-bubble {
  background: transparent;
  border: none;
  padding: 0;
}
.emoticon-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
}
.chat-attachment-image-container {
  cursor: pointer;
  max-width: 280px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
}
.chat-attachment-image-el {
  width: 100%;
  height: auto;
  display: block;
  max-height: 200px;
  object-fit: cover;
}
.chat-member-count {
  color: #9c9c9c;
  font-weight: 500;
  margin-left: 6px;
  display: inline-block;
}
.list-member-count {
  font-weight: 400;
}
/* 🚫 버튼 비활성화(disabled) 상태 글로벌 디자인 시스템 정합 */
button:disabled,
button[disabled],
input[type="button"]:disabled,
input[type="button"][disabled],
input[type="submit"]:disabled,
input[type="submit"][disabled] {
  background-color: #ededed;
  color: #a6a6a6;
  cursor: not-allowed;
  border-color: #ededed;
}
/* 👥 React 전자결재 모듈 전용 디자인 시스템 */
.approval-view-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.approvalDashboardTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 35px 20px 20px;
  margin: 0;
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box;
}
.approvalMainTitle {
  font-size: 18px;
  font-weight: 600;
  color: #1b1b1b;
  margin: 0;
}
.approvalNewDraftBtn,
.approvalSubmitBtn {
  background-color: #0373ef;
  color: #ffffff;
  border: 1px solid #0373ef;
  box-shadow: none;
  padding: 10px 25px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}
.approvalCancelBtn {
  border:1px solid #dedede;
  color: #ec4c4c;
  background-color:#fff;
  padding: 10px 25px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}
.approvalDraftSaveBtn {
  background-color: #fff;
  border:1px solid #dedede;
  color: #505050;
  padding: 10px 25px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}
.approvalTabGroup {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
}
.approvalTabBtn {
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}
.approvalTabBtn.active {
  background-color: #f1f5f9;
  color: #0f172a;
  font-weight: 600;
}
.approvalListTableWrapper {
  width:100%;
  background: #ffffff;
  border-top:1px solid #e8e8e8;
  margin:20px 0 0;
}
.approvalListTable {
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  text-align: center;
  font-size: 13px;
}
.approvalListTable th {
  padding: 12px;
  color: #666;
  font-weight:normal;
  border-bottom: 1px solid #e8e8e8;
}
.approvalListTable td {
  padding: 12px;
  border-bottom: 1px solid #e8e8e8;
  color: #1b1b1b;
}
.approvalListTable tbody tr:hover { 
  background:#f8f8f8; 
}
.approvalListRow {
  cursor: pointer;
}
.approvalListEmpty {
  height: 190px;
  text-align: center;
  font-size: 13px;
  color: #1b1b1b;
  line-height: 190px;
  padding: 0;
}
.approvalListTable tr:has(td.approvalListEmpty):hover {
  background-color: transparent;
}
.approvalStatusBadge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border:1px solid #dedede;
  background-color:#fff;
}
.approvalStatusBadge.approved {
  border-color:#10b981;
  color: #10b981;
}
.approvalStatusBadge.rejected {
  border-color: #ef4444;
  color: #ef4444;
}
.approvalStatusBadge.pending {
  border-color: #aeaeae;
  color: #505050;
}
.approvalStatusBadge.draft {
  border-color: #64748b;
  color: #64748b;
}
.approvalListDeleteBtn {
  background-color: #fee2e2;
  color: #ef4444;
  border: none;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
}
/* 기안 서식 작성 폼 */
.approvalDraftFormSection {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
.approvalDraftFormItem {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.approvalFormLabel {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.approvalFormSelect,
.approvalFormInput {
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  transition: border-color 0.2s;
}
.approvalFormSelect:focus,
.approvalFormInput:focus {
  border-color: #0373ef;
}
.approvalProposalTextarea {
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.2s;
}
.approvalProposalTextarea:focus {
  border-color: #0373ef;
}
.approvalSubFormBox {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.approvalLineTagGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  min-height: 38px;
  align-items: center;
  background-color: #ffffff;
  box-sizing: border-box;
}
.approvalLineTag {
  background-color: #f1f5f9;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
}
.approvalLineTag button {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.approvalLineEmptyText {
  color: #94a3b8;
  font-size: 12px;
}
.approvalAddLineBtn {
  background-color: #0373ef;
  color: #ffffff;
  border: none;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 8px;
  font-weight: 500;
}
/* 결재 상세 테이블 및 결재선 */
.approvalDetailWrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
}
.approvalDetailTable {
  
  
  
  border-top: 1px solid #e8e8e8;
  background-color: #ffffff;

  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  line-height: 1;}
.approvalDetailTable th {
  background-color: #ffffff;
  padding: 12px;
  
  
  
  
  width: 15%;

  height: 40px;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  color: #666;
  background: #f7f7f7; /* th의 원래 옅은 회색 배경 확보 */;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;}
.approvalDetailTable td {
  
  
  
  
  background-color: #ffffff;

  height: 46px;
  padding: 0 15px;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  color: #1b1b1b;
  background: #ffffff;
  text-align: center;
  vertical-align: middle;
  word-break: break-all;}
.approvalDetailTable tr td:last-child {
  border-right: 0;
}
.approvalSubSectionTitle {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 10px 0;
}
.approvalDetailLineList {
  display: flex;
  gap: 12px;
  margin: 12px 0 20px 0;
}
.approvalDetailLineCell {
  width: 100px;
  border: 1px solid #e2e8f0;
  text-align: center;
  border-radius: 4px;
  background: #ffffff;
  overflow: hidden;
}
.approvalDetailLineDept {
  padding: 6px;
  background-color: #f8fafc;
  font-size: 11px;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approvalDetailLineStamp {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.approvalDetailLineName {
  padding: 6px;
  font-size: 12px;
  color: #334155;
  border-top: 1px solid #e2e8f0;
}
.stampStamp {
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  transform: rotate(-10deg);
}
.stampStamp.approved {
  color: #10b981;
  border-color: #10b981;
}
.stampStamp.rejected {
  color: #ef4444;
  border: 0;
  border-radius: 0;
  transform: none;
  padding: 0;
}
.stampStamp.empty {
  color: #cbd5e1;
  border: none;
}
.approvalRejectTextOnly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.approvalDetailContentBox {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  background-color: #ffffff;
}
.approvalDetailProposalContent {
  font-size: 13px;
  line-height: 1.6;
  color: #334155;
  white-space: pre-wrap;
}
.approvalDetailRejectReasonBox {
  border: 1px solid #fee2e2;
  border-radius: 4px;
  padding: 15px;
  background-color: #fff5f5;
  margin-top: 15px;
}
.rejectedText {
  color: #ef4444;
}
.approvalDetailRejectReasonContent {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}
/* 👥 전자결재 전용 가로형 탭 세그먼트 컨트롤 정합 */
.approval-segment-control {
  flex-shrink: 0;
  width: auto; /* 기존 320px 제한 해제 */;
  display: flex;
}
.approval-segment-control .segment-btn {
  flex: 0 0 auto; /* 비좁을 때 축소/찌그러짐 방지 */;
  white-space: nowrap; /* 텍스트 개행 세로 정렬 차단 */;
  padding: 8px 16px;
}
.approval-create-txt-btn {
  color: #ffffff;
  cursor: pointer;
  background-color: #0373f0;
  border: 0;
  border-radius: 5px;
  padding: 0 30px;
  height: 42px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
/* 👥 테이블 컬럼 고정 너비 및 텍스트 정렬 정합 */
.col-doc-type { width: 105px; }
.col-doc-no { width: 180px; white-space: nowrap; }
.col-author { width: 100px; }
.col-date { width: 110px; }
.col-status { width: 100px; }
.col-manage { width: 80px; }
.col-title { text-align: left; }
.approvalListTitleCell {
  text-align: left;
  font-weight: 600; /* 600 제한 규칙 준수 */
}
/* 👥 전자결재 리팩토링용 인라인 스타일 완전 대체 클래스군 */
.approval-btn-group {
  display: flex;
  gap: 8px;
}
.approval-align-center-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.approval-org-modal-body {
  height: 400px;
  display: flex;
  flex-direction: column;
}
.approval-org-list {
  overflow-y: auto;
  flex: 1;
  padding: 10px;
}
.approval-org-item {
  padding: 12px 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}
.approval-org-position {
  color: #9c9c9c;
  font-size: 12px;
}
.approvalLineSelectModal {
  position: relative;
  width: min(400px, calc(100vw - 32px));
  height: min(500px, calc(100vh - 48px));
  max-height: min(720px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}
.approvalLineSelectHead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 58px 20px 0;
}
.approvalLineSelectHead h2 {
  display:none;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1b1b1b;
}
.approvalLineSelectCloseBtn {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #ff5f56;
  padding: 0;
  cursor: pointer;
}
.approvalLineSelectTabs {
  display: flex;
  gap: 6px;
  padding: 0 20px;
}
.approvalLineSelectTabs button {
  height: 34px;
  padding: 0 18px;
  border: 1px solid #dedede;
  border-radius: 4px;
  background: #ffffff;
  color: #505050;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.approvalLineSelectTabs button.active {
  border-color: #1b1b1b;
  color: #1b1b1b;
  font-weight: 600;
}
.approvalLineSelectSelected {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 15px 20px;
}
.approvalLineSelectSelected > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}
.approvalLineSelectSelected strong {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: #0373f0;
  font-weight:normal;
}
.approvalLineSelectChipList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  align-items: center;
}
.approvalLineSelectChipList em,
.approvalLineSelectEmpty {
  color: #9c9c9c;
  font-size: 13px;
  font-style: normal;
}
.approvalLineSelectChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #afcaf7;
  border-radius: 4px;
  background: #fff;
  color: #6796f0;
  font-size: 12px;
  background:#eff6fb;
}
.approvalLineSelectChip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border: 0;
  background: transparent;
  color: #1b1b1b;
  cursor: pointer;
  line-height: 0;
  padding: 0;
}
.approvalLineSelectChip button svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: #6796f0;
  overflow: visible;
}
.approvalLineSelectSearch {
  height: 42px;
  margin: 0 20px 15px;
  padding: 0 12px;
  border: 1px solid #dedede;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
}
.approvalLineSelectSearch:focus {
  border-color: #dedede;
}
.approvalLineSelectList {
  flex: 1;
  height: 260px;
  min-height: 180px;
  overflow-y: auto;
  border-top: 1px solid #e8e8e8;
}
.approvalLineSelectItem {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(100px, 1fr) minmax(80px, 0.8fr);
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-bottom: 1px solid #e8e8e8;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}
.approvalLineSelectItem:hover,
.approvalLineSelectItem.selected {
  background: #f8f8f8;
}
.approvalLineSelectItem strong {
  font-size: 13px;
  color: #1b1b1b;
  font-weight: normal;
}
.approvalLineSelectItem span,
.approvalLineSelectItem em {
  font-size: 12px;
  color: #666;
  font-style: normal;
}
.approvalLineSelectItem em {
  text-align: right;
}
.approvalLineSelectEmpty {
  margin: 0;
  padding: 28px 22px;
  text-align: center;
}
.approvalLineSelectFoot {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid #e8e8e8;
}
.approvalLineSelectFoot button {
  height: 38px;
  min-width: 100px;
  padding: 0 18px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.approvalLineSelectSubmitBtn {
  border: 1px solid #0373f0;
  background: #0373f0;
  color: #ffffff;
}
.approvalLineSelectCancelBtn {
  border: 1px solid #dedede;
  background: #ffffff;
  color: #505050;
}
.approval-detail-title {
  margin: 0;
}
.approval-reject-modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width:100%;
}
.approval-reject-textarea {
  min-height: 100px;
  width: 100%;
  border-color:#dedede;
  box-sizing: border-box;
}
.approval-btn-group-right {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 15px; /* 버튼 상단 마진 추가로 숨통 트기 */
}
.approval-reject-submit-btn {
  background-color: #ff5f56;
  border: 1px solid #ff5f56; /* 파란색 테두리 강제 소멸 및 빨간색 교체 */;
  box-shadow: none;
}
/* 👥 전자결재 독자적 레이아웃 네임스페이스 스타일 (캘린더의 스타일 규격을 승계하되 완전 분리) */
.approval-view-container {
  box-sizing: border-box;
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.approval-main-content {
  box-sizing: border-box;
  background-color: #fff;
  flex-direction: column;
  flex: 1;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.approval-main-header {
  background-color: #fff;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 20px 10px;
  display: flex;
  position: relative;
}
.approval-header-left {
  align-items: center;
  gap: 20px;
  display: flex;
}
.approval-header-right {
  display: flex;
  align-items: center;
}
.approval-year-month {
  color: #1b1b1b;
  margin: 0;
  font-size: 20px;
  font-weight: 600; /* 600 제한 규칙 준수 */
}
/* 📝 전자결재 하단 스크롤 가능 본문 영역 */
.contents_ {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 40px;
  box-sizing: border-box;
}
/* 📝 전자결재 기안서 작성 폼 테이블 독자 스타일 (규칙 2, 3, 4, 8 완수) */
.approvalDraftSectionTitleRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 10px;
}
.approvalSectionTitle {
  font-size: 16px;
  font-weight: 500;
  color: #1b1b1b;
  margin: 0;
}
.approvalSmallFlatBtn {
  color: #1b1b1b;
  cursor: pointer;
  background-color: #f5f6f8;
  border: 1px solid #dedede;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}
.approvalDraftLineContainer {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.approvalSectionDivider {
  display: none;
}
.approvalDraftLineCard {
  width: 140px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}
.approvalDraftLineCardHeader {
  background-color: #f7f7f7;
  padding: 8px 0;
  font-size: 12px;
  color: #666;
  border-bottom: 1px solid #dedede;
}
.approvalDraftLineCardBody {
  padding: 20px 0;
  font-size: 13px;
  font-weight: 500;
  color: #1b1b1b;
  background-color: #ffffff;
  min-height: 24px;
}
.approvalDocTypeBtnGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.mobileApprovalDocTypeSelectWrap {
  display: none;
}
/* 결재양식 버튼 활성화 스타일 굵게 */
.approvalDocTypeSelectBtn {
  color: #505050;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #dedede;
  border-radius: 4px;
  padding: 0 30px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  height: 42px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.approvalDocTypeSelectBtn.active {
  color: #1b1b1b;
  border-color:#1b1b1b;
  font-weight: 600;
}
.approvalFormTableTitle {
  font-size: 16px;
  font-weight: 500;
  color: #1b1b1b;
  margin-top: 30px;
  margin-bottom: 10px;
}
.approvalDraftGridTable {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #e8e8e8;
  margin-bottom: 24px;
  background-color: #ffffff;
}
.approvalDraftGridTable th {
  background-color: #ffffff;
  border-right:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8;
  padding: 12px;
  font-size: 13px;
  font-weight: normal;
  color: #666;
  text-align: left;
  width: 15%;
}
.approvalDraftGridTable td {
  border-right:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8;
  padding: 12px;
  font-size: 13px;
  color: #1b1b1b;
  width: 35%;
}
.approvalDraftGridTable td.col-span-3 {
  width: 85%;
}
.approvalDraftGridTable tr td:last-child { border-right:0; }
.approvalTableInput {
  width: 100%;
  border: none;
  outline: none;
  font-size: 13px;
  color: #1b1b1b;
  padding: 4px 0;
  background: transparent;
}
.approvalTableInput:focus {
  background-color: #fcfcfc;
}
.approvalTableTextarea {
  width: 100%;
  min-height: 120px;
  border: none;
  outline: none;
  font-size: 13px;
  color: #1b1b1b;
  resize: vertical;
  padding: 6px 0;
  background: transparent;
  line-height: 1.6;
}
.approvalDateSelectGroup {
  display: flex;
  align-items: center;
  gap: 8px;
}
.approvalDateSelect {
  border: 1px solid #dedede;
  border-radius: 4px;
  padding: 8px 28px 8px 10px;
  font-size: 13px;
  outline: none;
  background-color: #f7f7f7;
  min-width: 50px;
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%231b1b1b' stroke-width='2' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 20px center;
}
.approvalYearSelect {
  min-width: 50px;
}
.approvalDatePicker {
  width: 100%;
  height: 38px;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  background: #ffffff;
  color: #1b1b1b;
  font-size: 13px;
  padding: 0 8px;
  box-sizing: border-box;
  cursor: pointer;
}
.approval-align-center-group .approvalDatePicker {
  flex: 0 1 150px;
  min-width: 0;
  max-width: 150px;
}
/* 세부 품목 테이블 */
.approvalItemTableSection {
  margin-top: 24px;
  margin-bottom: 24px;
}
.approvalItemTableHeaderRow {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 8px;
}
.approvalItemGridTable {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #e8e8e8;
  background-color: #ffffff;
}
.approvalItemGridTable th {
  background-color: #ffffff;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 12px;
  font-size: 13px;
  font-weight: normal;
  color: #666;
  text-align: left;
}
.approvalItemGridTable td {
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 12px;
  font-size: 13px;
  color: #1b1b1b;
}
.approvalItemGridTable td input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #1b1b1b;
  padding: 4px 0;
}
.approvalItemGridTable td input.approvalDatePicker {
  height: 38px;
  border: 1px solid #e8e8e8;
  padding: 0 8px;
  background: #ffffff;
}
.approvalItemGridTable .sum-row td {
  background-color: #ffffff;
  font-weight: 500;
  color: #1b1b1b;
  border-top: 1px solid #e8e8e8;
}
.approvalItemGridTable .sum-row td:nth-child(2) { border-right:0; }
/* 첨부파일 행 스타일 */
.approvalFileRowContainer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.approvalFileInputHidden {
  display: none;
}
.approvalFileFakeBtn {
  color: #1c1c1e;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 12px;
  display: inline-block;
  box-shadow: none;
}
.approvalFileText {
  color: #9c9c9c;
  font-size: 12px;
}
.approvalBottomRemarkTextarea {
  width: 100%;
  min-height: 80px;
  border: none;
  background: transparent;
  padding: 12px 0;
  font-size: 13px;
  color: #1b1b1b;
  outline: none;
  resize: vertical;
  margin-top: 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #e8e8e8;
}
/* 📝 전자결재 기안서 작성/상세 헤더 절대정렬용 클래스 */
.approval-header-relative {
  position: relative;
}
.approval-header-center-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #1b1b1b;
  margin: 0;
  font-size: 18px;
  font-weight: 600; /* 600 제한 규칙 준수 */;
  pointer-events: none; /* 클릭 방해 방지 */
}
.approval-back-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.approvalDetailBackBtn {
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:32px;
  height:32px;
  color:#1b1b1b;
  background:#fff;
  border:1px solid #dfdfdf;
  border-radius:8px;
  padding:0;
  font-size:13px;
  font-weight:400;
  line-height:1;
  display:inline-flex
}
.approval-back-svg {
  display: block;
  margin: 0;
  padding: 0;
}
.approval-back-img {
  display:block;
  width:18px;
  height:18px;
  object-fit:contain;
}
.approvalDetailBackBtn .approval-back-svg {
  width:18px;
  height:18px
}
/* 🌴 휴가원 구분 라디오 그룹 및 일수 스타일 */
.approvalVacationRadioGroup {
  display: flex;
  gap: 20px;
  align-items: center;
  height: auto;
}
.approvalVacationRadioLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}
.approvalVacationDaysText {
  margin-left: 5px;
  font-size: 14px;
  font-weight: 600; /* 600 이하 제한 규칙 준수 */;
  color: #0373f0;
}
/* 👥 결재 상세 출장경비 2단 테이블용 마진 탑 전용 클래스 */
.approvalDetailSubFormBoxMarginTop {
  margin-top: 20px;
}
/* 👥 전자결재 상세 화면 app3 비주얼 완전 매핑 클래스군 (디자인 규칙 준수) */
.approvalDetailTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.approvalDetailTitle h4 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600; /* 600 이하 규칙 준수 */;
  margin: 0;
  color: #1b1b1b;
}
.approvalDetailGrid {
  display: grid;
  grid-template-columns: 140px minmax(0,1fr) 140px minmax(0,1fr);
  border-top: 1px solid #dedede; /* #dedede 기본 테두리 컬러 준수 */;
  border-bottom: 0;
  overflow: hidden;
}
.approvalDetailPair {
  display: grid;
  grid-template-columns: 140px minmax(0,1fr);
  grid-column: span 2;
  border-bottom: 1px solid #dedede;
}
.approvalDetailPair:nth-child(odd) {
  border-right: 1px solid #dedede;
}
.approvalDetailPair span {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 15px;
  border-right: 1px solid #dedede;
  font-size: 13px;
  line-height: 1;
  font-weight: normal;
  color: #666;
  background-color: #ffffff; /* th 역할을 하는 span 배경 제거 */;
  box-sizing: border-box;
}
.approvalDetailPair strong {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 15px;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  background-color: #ffffff;
  color: #1b1b1b;
  box-sizing: border-box;
  word-break: break-all;
}
.approvalDetailSectionTitle {
  margin: 40px 0 15px;
  font-size: 16px;
  line-height: 1;
  font-weight: 600; /* 600 이하 규칙 준수 */;
  color: #1b1b1b;
}
.approvalDetailLineCards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0 0 24px;
}
.approvalDetailLineCard {
  display: flex;
  flex-direction: column;
  flex: 0 0 160px;
  min-height: 142px;
  border: 1px solid #dedede;
  border-radius: 5px; /* 10px 이하 border-radius 규칙 준수 */;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}
.approvalDetailLineCard.approver,
.approvalDetailLineCard.reference {
  flex-basis: 160px;
}
.approvalDetailLineCardLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  background: #f7f7f7;
  color: #666;
  border-bottom: 1px solid #dedede;
  font-size: 12px;
  line-height: 1;
  font-weight: normal; /* 600 이하 규칙 준수 */;
  box-sizing: border-box;
}
.approvalDetailLineCardSign {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 72px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid #dedede;
  box-sizing: border-box;
  overflow: hidden;
}
.approvalDetailLineSignatureImage {
  display: block;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
}
.approvalDetailLineCardNameRow,
.approvalDetailLineCardReferenceRow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-bottom: 1px solid #dedede;
  text-align: center;
  box-sizing: border-box;
}
.approvalDetailLineCardNameRow {
  border-bottom: 0;
}
.approvalDetailLineCardReferenceRow:last-child {
  border-bottom: 0;
}
.approvalDetailLineCardName {
  display: block;
  font-size: 13px;
  font-weight: 600; /* 600 이하 규칙 준수 */;
  line-height: 1;
  color: #1b1b1b;
}
.approvalDetailLineCardDept {
  display: block;
  color: #8c8c8c;
  font-size: 12px;
  font-style: normal;
  line-height: 1;
}
.approvalDetailWidePair {
  display: grid;
  grid-template-columns: 140px minmax(0,1fr);
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  overflow: hidden;
  margin: 0 0 40px;
}
.approvalDetailWidePair > span {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 15px;
  border-right: 1px solid #dedede;
  color: #666;
  background-color: #ffffff; /* th 역할을 하는 span 배경 제거 */;
  font-size: 13px;
  line-height: 1;
  font-weight: normal;
  box-sizing: border-box;
}
.approvalDetailWidePair > strong {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 15px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: #1b1b1b;
  background-color: #ffffff;
  box-sizing: border-box;
  word-break: break-all;
}
.approvalDetailText {
  min-height: 80px;
}
.approvalDetailTableWrap {
  margin: 0 0 24px;
  border-top: 1px solid #dedede;
  border-bottom: 0;
  overflow: hidden;
}
.approvalDetailTableWrap .approvalDetailTable {
  border-top: 0; /* 이중 상단 테두리 제거 */
}
.approvalDetailTable .sum-row td {
  font-weight: 600; /* 600 제한 규칙 준수 */
}
.approvalDetailTable th:last-child,
.approvalDetailTable td:last-child {
  border-right: 0;
}
.approvalDetailTableUseWide th,
.approvalDetailTableUseWide td {
  width: 140px;
}
.approvalDetailTableWide1 th:nth-child(1),
.approvalDetailTableWide1 td:nth-child(1),
.approvalDetailTableWide2 th:nth-child(2),
.approvalDetailTableWide2 td:nth-child(2),
.approvalDetailTableWide3 th:nth-child(3),
.approvalDetailTableWide3 td:nth-child(3) {
  width: auto;
}
/* 👥 결재 상세 지출품의서 합계행 우측 세로선 지우기 전용 클래스 */
.approvalDetailTable .sum-row .sum-amount-cell {
  border-right: 0;
}
.approvalDetailTable .sum-row .sum-empty-cell {
  border-right: 0;
}
/* 💬 서브 팝업 채팅창 독립 레이아웃 스타일 */
.sub-chat-window-app {
  max-width: 100%;
  height: 100%;
  border: none;
  box-shadow: none;
}
/* 결재선 및 휴가 기간 년/월/일 셀렉트박스 스타일 */
.approvalDateSelectGroup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.approvalDateDropdownSelect {
  border: 1px solid #dedede;
  border-radius: 4px;
  padding: 0 20px 0 10px;
  font-size: 13px;
  font-weight: 400;
  color: #1b1b1b;
  background-color: #f8f8f8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20' fill='none'><path d='M5 8L9 4L13 8' stroke='%231b1b1b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M5 14L9 18L13 14' stroke='%231b1b1b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 13px 16px;
  cursor: pointer;
  outline: none;
  min-width: 60px;
  height: 30px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.approvalDateDropdownSelect:first-child {
  min-width: 80px;
}
.approvalDateSeparator {
  margin: 0 4px;
  color: #777;
}
/* 전자결재 목록 하단 영역 스타일 */
.approval-list-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
/* 기안서 결재선 카드 클릭 커서 스타일 */
.approvalDraftLineCard.clickable {
  cursor: pointer;
}
/* 🔄 공유 대상 선택 모달 내 체크박스 및 하단 확인/취소 푸터 스타일 */
.forward-modal-user-item.selected {
  background-color: #f1f3f5;
}
.forward-modal-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid #dedede;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: none;
}
.forward-modal-checkbox.checked {
  background-color: #06f;
  border-color: #06f;
}
.forward-modal-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid #e8e8e8;
  background-color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.forward-btn-cancel {
  color: #666;
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 5px;
  padding: 8px 0;
  width:100%;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}
.forward-btn-confirm {
  color: #fff;
  background-color: #06f;
  border: none;
  border-radius: 5px;
  padding: 8px 0;
  width:100%;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}
/* 🔄 공유 대상 팝업 탭 영역 스타일 */
.forward-modal-tabs {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #dedede;
  box-sizing: border-box;
}
.forward-modal-tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 0;
  margin: 0;
  font-size: 13px;
  color: #9c9c9c;
  cursor: pointer;
  text-align: center;
  position: relative;
  box-shadow: none;
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
}
.forward-modal-tab-btn.active {
  color: #1b1b1b;
  font-weight: 600;
}
.forward-modal-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #111;
}
/* 👥 공유 모달 아바타-이름 좌측 밀착 정렬 */
.forward-modal-user-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 📁 그룹 채팅방 설정 하단 버튼 영역 및 상단 균형 닷 */
.modal-close-dot-placeholder {
  width: 22px;
  height: 22px;
}
.group-setting-footer {
  display: flex;
  gap: 8px;
  padding:0 20px;
  width: 100%;
  box-sizing: border-box;
}
.group-setting-cancel-btn {
  flex: 1;
  color: #666;
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 5px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  transition: none;
}
.group-setting-confirm-btn {
  flex: 1;
  color: #fff;
  background-color: #06f;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  transition: none;
}
/* 📎 전자결재 상세 첨부파일 짝 테이블 스타일 */
.approvalDetailFileWidePair {
  border-top: 1px solid #dedede;
  margin-top: 24px;
  margin-bottom: 40px;
}
.approvalDetailFileRowGroup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 15px;
  background-color: #ffffff;
  box-sizing: border-box;
}
.approvalDetailFileRowLink {
  display: inline-flex;
  align-items: center;
  color: #1b1b1b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.approvalDetailFileRowSvg {
  margin-right: 6px;
  flex-shrink: 0;
}
.admin-approval-row-clickable {
  cursor: pointer;
}
.admin-approval-container { margin:20px 0 0; }
.admin-approval-container .contents_ { padding:0 0; }
.admin-approval-container .approval-main-header { border-top:1px solid #e8e8e8; padding:20px 0 10px; }
.admin-approval-container .approval-main-header .approval-back-btn { display:none; }
.approval-confirm-text {
  margin-top: 10px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #1b1b1b;
  text-align: center;
}
.approval-delete-submit-btn {
  background-color: #e03131;
  border-color:#e03131;
}
/* 🖨️ 메일 인쇄 모드 최적화 (메인 메뉴 등 불필요한 UI 숨김 및 레이아웃 풀기) */
@media print {
  .desktop-sidebar,
  .mail_topArea,
  .mailStarBtn,
  .printBtn,
  .attachAllDownloadBtn,
  .desktop-mail-read-loading {
    display: none !important;
  }

  body, 
  #root, 
  .app-container, 
  .desktop-app-container, 
  .desktop-main-content, 
  .desktop-mail-view, 
  .desktop-mail-read-main, 
  .desktop-mail-read,
  .readViewWrap {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
  }

  .readViewWrap {
    padding: 20px 0 !important;
  }

  .readViewHeader {
    border-bottom: 2px solid #dedede !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
  }
}
/* 📎 메일 상세뷰 첨부파일 아이콘 색상 확장자 매핑 */
.desktop-mail-read .attachTypeIcon.pdf { background: #e5252a; }
.desktop-mail-read .attachTypeIcon.excel { background: #10793f; }
.desktop-mail-read .attachTypeIcon.zip { background: #4b5b6b; }
.desktop-mail-read .attachTypeIcon.ppt { background: #d14424; }
.desktop-mail-read .attachTypeIcon.doc { background: #3086f6; }
.desktop-mail-read .attachTypeIcon.html { background: #3a8c8d; }
.desktop-mail-read .attachTypeIcon.file { background: #646b73; }
/* 기존 attachTypeIcon::before 흰색 가짜 상자 무력화 */
.desktop-mail-read .attachTypeIcon::before {
  display: none;
}
.cloudPage {
  width:100%;
  min-height:100%;
  padding:30px 20px 20px;
  color:#1b1b1b;
  box-sizing:border-box;
  background:#fff;
}
.cloudPageTitle {
  margin:0 0 20px;
  color:#1b1b1b;
  font-size:20px;
  line-height:1;
  font-weight:600;
}
.boardPage--cloud .cloudBoard {
  position:relative;
}
.boardPage--cloud .cloudBoardHead {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  padding:0 0 20px;
}
.boardPage--cloud .cloudBoardTools {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex:0 0 auto;
  margin-left:0;
}
.boardPage--cloud .cloudBoardSearch {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  width:400px;
  max-width:100%;
  margin:0;
}
.boardPage--cloud .cloudBoardSearch .boardSearchField {
  width:100%;
  max-width:100%;
  margin-left:0;
}
.boardPage--cloud .boardSearchInput {
  width:100%;
  height:42px;
  padding:0 16px;
  border:1px solid #e8e8e8;
  border-radius:5px;
  background:#fff;
  color:#1b1b1b;
  font-size:14px;
  outline:none;
  box-sizing:border-box;
}
.boardPage--cloud .boardSearchInput::placeholder {
  color:#9c9c9c;
}
.boardPage--cloud .cloudSortSelect {
  width:120px;
  height:42px;
  padding:0 40px 0 15px;
  border:1px solid #e8e8e8;
  border-radius:5px;
  color:#1b1b1b;
  font-size:14px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 16px center / 10px 7px;
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  line-height:1;
  cursor: pointer;
}
.boardPage--cloud .cloudUsageCard {
  display:grid;
  gap:12px;
  margin:0 0 18px;
  padding:18px 20px;
  border:1px solid #e8e8e8;
  border-radius:5px;
  background:#fff;
}
.boardPage--cloud .cloudUsageMeta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.boardPage--cloud .cloudUsageTitle {
  font-size:13px;
  font-weight:600;
  color:#1b1b1b;
}
.boardPage--cloud .cloudUsageValue {
  font-size:12px;
  color:#9ca4b0;
}
.boardPage--cloud .cloudUsageBar {
  position:relative;
  overflow:hidden;
  height:16px;
  border-radius:999px;
  background:#f7f7f7;
}
.boardPage--cloud .cloudUsageFill {
  display:block;
  height:100%;
  border-radius:999px;
  background:#0373ef;
}
.boardPage--cloud .cloudActionBar {
  position:relative;
  z-index:10;
  display:block;
  margin:0 0 14px;
  overflow:visible;
}
.boardPage--cloud .cloudActionGroup {
  display:flex;
  align-items:center;
  gap:5px;
  overflow:visible;
  padding:0 0 2px;
}
.boardPage--cloud button.cloudActionBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:auto;
  min-width:0;
  height:34px;
  min-height:0;
  padding:0 12px;
  border:1px solid #e8e8e8;
  border-radius:5px;
  background:#fff;
  box-shadow:none;
  font-size:13px;
  font-weight:500;
  line-height:1;
  color:#1b1b1b;
  white-space:nowrap;
  cursor:pointer;
  box-sizing:border-box;
}
.boardPage--cloud button.cloudActionBtn:disabled {
  color:#9c9c9c;
  cursor:default;
}
.boardPage--cloud .cloudShareBtn {
  gap:5px;
}
.boardPage--cloud .cloudActionCaret {
  display:block;
  width:12px;
  height:12px;
  flex:0 0 auto;
  color:#9c9c9c;
}
.boardPage--cloud .cloudShareAction {
  position:relative;
  z-index:20;
  flex:0 0 auto;
}
.boardPage--cloud .cloudShareDropdown {
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:132px;
  padding:6px 0;
  border:1px solid #1b1b1b;
  border-radius:5px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.boardPage--cloud .cloudShareAction.is-open .cloudShareDropdown {
  display:block;
}
.boardPage--cloud .cloudShareOptionBtn {
  display:block;
  width:100%;
  padding:11px 13px;
  border:0;
  background:#fff;
  text-align:left;
  font-size:13px;
  color:#1b1b1b;
  white-space:nowrap;
}
.boardPage--cloud .cloudTable {
  border-top:1px solid #e8e8e8;
  background:#fff;
  overflow:hidden;
}
.boardPage--cloud .cloudTableHead,
.boardPage--cloud .cloudRowMain {
  display:grid;
  grid-template-columns:32px 44px minmax(260px, 1fr) 110px 170px 170px;
  align-items:center;
  gap:8px;
}
.boardPage--cloud .cloudTableHead {
  min-height:40px;
  padding:0;
  background:#f7f7f7;
  border-bottom:1px solid #e8e8e8;
  font-size:13px;
  text-align:center;
  color:#9c9c9c;
  font-weight:500;
}
.boardPage--cloud .cloudTableHead span:nth-child(3) {
  text-align:left;
}
.boardPage--cloud .cloudRow {
  display:block;
  padding:0;
  border:0;
  border-bottom:1px solid #e8e8e8;
  background:#fff;
}
.boardPage--cloud .cloudRow.is-selected {
  background:#f5f8ff;
}
.boardPage--cloud .cloudRowMain {
  min-height:58px;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  text-align:center;
  box-sizing:border-box;
}
.boardPage--cloud .cloudCheckHead,
.boardPage--cloud .cloudCheckCell,
.boardPage--cloud .cloudTypeCell {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:auto;
}
.boardPage--cloud .cloudFileIcon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:5px;
  background:#eef2f7;
  font-size:9px;
  line-height:1;
  font-weight:600;
  color:#7b8798;
  margin:0;
  font-family:"Poppins", sans-serif;
}
.boardPage--cloud .cloudFileIcon--ppt { background:#d24625; color:#fff; font-size:17px; font-weight:500; }
.boardPage--cloud .cloudFileIcon--xls { background:#449651; color:#fff; font-size:17px; font-weight:500; }
.boardPage--cloud .cloudFileIcon--hwp { background:#38a9ff; color:#fff; font-size:14px; font-weight:500; }
.boardPage--cloud .cloudFileIcon--zip { background:#f6cc58; color:#fff; }
.boardPage--cloud .cloudFileIcon--pdf { background:#f12b2a; color:#fff; }
.boardPage--cloud .cloudFileIcon--img { background:#edeeff; color:#424de1; }
.boardPage--cloud .cloudNameCell {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.boardPage--cloud .cloudRowName {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  font-size:14px;
  color:#1b1b1b;
}
.boardPage--cloud .cloudRowSize,
.boardPage--cloud .cloudRowDate {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  color:#1b1b1b;
}
.boardPage--cloud .boardEmpty {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
  border-top:0;
  border-bottom:0;
  color:#1b1b1b;
  font-size:13px;
  border-bottom:1px solid #e8e8e8;
}
.boardPage--cloud .cloudFooter {
  margin:20px 0 0;
  text-align:right;
}
.boardPage--cloud .cloudFooter .boardWriteBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:42px;
  padding:0 30px;
  border:0;
  border-radius:5px;
  background:#0373f0;
  color:#fff;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  box-shadow:none;
  line-height:1;
}
/* 📎 메일 쓰기 뷰 첨부파일 영역 추가 보완 스타일 */
.desktop-mail-compose-main .desktop-mail-read.readAttachments.composeAttachWrap {
  margin: 15px 0 0;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
}
.desktop-mail-compose-main .composeAttachWrap .readAttachHeader {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: auto;
  height: 24px;
  line-height: 1;
}
.desktop-mail-compose-main .composeAttachWrap .attachHeaderTitle {
  display: inline-flex;
  align-items: center;
  height: 24px;
  font-size: 12px;
  font-weight: 600;
  color: #1b1b1b;
  line-height: 1;
  margin: 0;
  padding: 0;
}
.desktop-mail-compose-main .composeAttachWrap .composeAttachHeaderTitle {
  flex:0 0 auto;
  margin:0 !important;
}
.desktop-mail-compose-main .composeAttachWrap .attachHeaderDivider {
  display: block;
  width: 1px;
  height: 14px;
  background: #dedede;
  margin: 0;
  flex: 0 0 1px;
}
.desktop-mail-compose-main .composeAttachWrap .attachAllDownloadBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: 12px;
  color: #505050;
  font-family: inherit;
  font-weight: normal;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  line-height: 1;
  cursor: pointer;
}
.desktop-mail-compose-main .composeAttachWrap .attachList {
  margin: 14px 0 0;
}
.desktop-mail-compose-main .composeAttachWrap .attachItem {
  width: max-content;
  max-width: 100%;
}
.desktop-mail-compose-main .desktop-mail-read .composeAttachBtn {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  gap: 10px;
  cursor: default;
}
.desktop-mail-compose-main .composeAttachWrap .attachFileName {
  min-width: 0;
  max-width: 420px;
}
.desktop-mail-compose-main .composeAttachWrap .attachSize {
  margin-left: 26px;
}
.desktop-mail-compose-main .desktop-mail-read .composeFileDel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 14px;
  padding: 0;
  color: #1b1b1b;
  flex-shrink: 0;
}
.desktop-mail-compose-main .desktop-mail-read .composeFileDel svg {
  width: 14px;
  height: 14px;
  fill: #1b1b1b;
}
/* 🔍 메일 검색창 네이티브 X 취소 버튼 검은색 교정 */
.mailSearchBox input[type="search"]::-webkit-search-cancel-button,
.mailActionSearchBox input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  width: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231b1b1b' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  cursor: pointer;
}
/* 📋 팀 보드 게시판 전용 스타일 */
.teamboard-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 35px 20px 20px;
  background: #fff;
  box-sizing: border-box;
}
.teamboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.teamboard-main-title {
  font-size: 20px;
  font-weight: 600;
  color: #1b1b1b;
  margin: 0;
}
/* 워크보드 열 스타일 */
/* 글쓰기 */
.teamboard-write-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.teamboard-write-row {
  display: flex;
  flex-direction: column;
}
.teamboard-input-title {
  width: 100%;
  height: 42px;
  padding: 0 15px;
  border: 1px solid #dedede;
  border-radius: 6px;
  font-size: 14px;
  color: #1b1b1b;
  box-sizing: border-box;
  outline: none;
}
.teamboard-input-title:focus {
  border-color: #9c9c9c;
}
.teamboard-textarea-content {
  width: 100%;
  height: 350px;
  padding: 15px;
  border: 1px solid #dedede;
  border-radius: 6px;
  font-size: 13px;
  color: #1b1b1b;
  box-sizing: border-box;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.6;
}
.teamboard-textarea-content:focus {
  border-color: #9c9c9c;
}
.teamboard-btn-cancel {
  height: 36px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 6px;
  color: #505050;
  font-size: 13px;
  cursor: pointer;
}
.teamboard-btn-submit {
  height: 36px;
  padding: 0 18px;
  background: #1b1b1b;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
/* 글 상세 */
.teamboard-btn-back {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  font-size: 13px;
  color: #505050;
  cursor: pointer;
  padding: 0;
}
.teamboard-btn-delete {
  height: 30px;
  padding: 0 12px;
  background: #ff3b30;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.teamboard-detail-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
.teamboard-detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #1b1b1b;
  margin: 0 0 10px 0;
}
.teamboard-detail-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #707070;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.teamboard-detail-body {
  font-size: 14px;
  color: #303030;
  line-height: 1.7;
  white-space: pre-wrap;
}
/* ➕ 더보기 (More Menu) 신규 레이아웃 전용 클래스 정의 (규칙 준수) */
.desktop-list-inner-more {
  padding: 40px 20px 20px;
  background-color: #ffffff;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.desktop-more-title {
  font-size: 20px;
  font-weight: 600;
  color: #1b1b1b;
  margin-bottom: 24px;
}
.desktop-more-profile-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#fff;
  border:1px solid #e8e8e8;
  padding:12px;
  border-radius: 6px;
  margin-bottom: 40px;
}
.more-profile-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.more-profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
}
.more-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: #1b1b1b;
}
.more-profile-right {
  display: flex;
  gap: 6px;
}
.more-profile-settings-btn {
  padding: 6px 12px;
  font-size: 12px;
  color: #1b1b1b;
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: none;
}
.more-profile-logout-btn {
  padding: 6px 12px;
  font-size: 12px;
  color: #505050;
  background-color: #f5f5f5;
  border: 1px solid #dedede;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: none;
}
.more-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.more-section-title {
  font-size: 13px;
  line-height:1;
  color: #9c9c9c;
  margin:0 20px;
}
.more-tree-container { margin:20px; }
.more-section-edit-btn {
  font-size: 12px;
  font-weight: 400;
  color: #9c9c9c;
  background: none;
  line-height: 1;
  border: none;
  cursor: pointer;
  padding: 0;
}
/* 📋 신규 3열 카드형 바로가기 레이아웃 스타일 (규칙 준수) */
.more-shortcut-grid-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 40px;
}
.more-shortcut-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background-color: #f5f6f8;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: none;
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.more-card-icon-box,
.more-shortcut-card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid #e8e8e8;
}
.more-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1b1b1b;
  margin-bottom: 6px;
  line-height: 1.2;
}
.more-card-desc {
  font-size: 11px;
  font-weight: 400;
  color: #8e8e93;
  line-height: 1.4;
  word-break: keep-all;
}
.more-all-menu-header {
  font-size: 12px;
  font-weight: 500;
  color: #7f8287;
  margin-bottom: 20px;
}
.more-menu-tree {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.more-tree-root {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom:20px;
}
.more-tree-root-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1b1b1b;
  text-align: left;
}
.more-tree-root svg { width:20px; height:auto; }
.more-tree-root-header-static {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #1b1b1b;
}
.more-tree-children {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding:0 0 15px 32px;
}
.more-tree-child-item {
  font-size: 14px;
  font-weight: 400;
  color: #505050;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0;
  text-align: left;
}
/* 📋 바로가기 편집 모드 전용 뱃지 스타일 (규칙 준수) */
.more-shortcut-card-item-wrap {
  position: relative;
  width: 100%;
  height: 120px;
}
.shortcut-delete-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: none;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  box-shadow: none;
}
.more-tree-row-with-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.more-tree-row-with-badge.child-row {
  justify-content: space-between;
  align-items: center;
}
.shortcut-add-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: none;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  box-shadow: none;
}
.shortcut-add-badge.disabled {
  background-color: #dedede;
  cursor: not-allowed;
}
.empty-shortcut-placeholder {
  grid-column: span 3;
  text-align: center;
  font-size: 13px;
  color: #9c9c9c;
  padding: 30px 0;
}
.profile-card-setting-btn {
  margin-left: auto;
  font-size: 13px;
  color: #1b1b1b;
  background-color: #ffffff;
  border: 1px solid #dedede;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: none;
  font-weight: 500;
}
/* 📋 바로가기 추가 팝업 스타일 (규칙 준수) */
.shortcut-add-modal-body {
  width: 320px;
  background-color: #ffffff;
  border: 1px solid #dedede;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}
.shortcut-selection-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.shortcut-select-row-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background-color: #f5f6f8;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: none;
  font-weight: 500;
  color: #1b1b1b;
  text-align: left;
}
.shortcut-select-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shortcut-select-row-title {
  font-size: 13px;
  font-weight: 500;
}
.no-shortcut-candidates {
  text-align: center;
  font-size: 13px;
  color: #9c9c9c;
  padding: 20px 0;
}
.empty-card-placeholder-style {
  background-color: #fcfcfc;
  border: 1px dashed #dedede;
  border-radius: 10px;
  cursor: default;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
/* 바로가기 추가 모달 스타일 */
.shortcut-add-modal-body {
  padding: 16px 20px;
}
.shortcut-add-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 0;
}
.shortcut-add-item-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
/* 워크보드 게시판 전용 스타일 정의 */
.teamboard-view-container {
  padding: 40px 20px 20px;
  width: 100%;
  box-sizing: border-box;
}
.teamboard-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid #e8e8e8;
}
.teamboard-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
.teamboard-table th {
  padding: 10px 20px;
  font-weight: 500;
  color: #9c9c9c;
  border-bottom: 1px solid #e8e8e8;
}
.teamboard-table td {
  padding: 10px 20px;
  font-size:14px;
  border-bottom: 1px solid #e8e8e8;
}
.teamboard-table tbody tr:hover { background:#f8f8f8; cursor:pointer; }
.teamboard-col-id {
  width: 60px;
  text-align: center;
  color: #888888;
}
.teamboard-col-category {
  width: 100px;
}
.teamboard-category-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  background-color: #f3f4f6;
  color: #374151;
}
.teamboard-category-badge.notice {
  background-color: #fee2e2;
  color: #991b1b;
}
.teamboard-post-title {
  color: #1b1b1b;
  cursor: pointer;
  font-weight: 500;
}
.teamboard-col-name {
  width: 120px;
  color: #1b1b1b;
}
.teamboard-col-author {
  width: 160px;
  color: #444444;
}
.teamboard-col-date {
  width: 150px;
  text-align: center;
  color: #1b1b1b;
}
.teamboard-col-views {
  width: 130px;
  text-align: center;
  color: #1b1b1b;
}
/* 설정 레이어 팝업 전용 스타일 정의 */
.sidebar-settings-wrapper {
  position: relative;
  display: inline-block;
  z-index: 1005;
}
.settings-layer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 999;
}
.settings-layer-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  width: 150px;
  -webkit-backdrop-filter: blur(20px);
  background-color: #f4f6f8d9;
  border: 1px solid #00000014;
  border-radius: 10px;
  padding: 8px;
  gap: 4px;
  display: flex;
  flex-direction: column;
  z-index: 1010;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.settings-layer-item-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  color: #1b1b1b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}
.settings-layer-item-btn:hover {
  background-color: #0373f0;
  color: #ffffff;
}
.settings-layer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555555;
  flex-shrink: 0;
}
.settings-layer-item-btn:hover .settings-layer-icon {
  color: #ffffff;
}
.settings-layer-item-btn.logout {
  color: #ef4444;
}
.settings-layer-item-btn.logout .settings-layer-icon {
  color: #ef4444;
}
.settings-layer-item-btn.logout:hover {
  background-color: #ef4444;
  color: #ffffff;
}
.settings-layer-item-btn.logout:hover .settings-layer-icon {
  color: #ffffff;
}
.workbenchSettingsProfileModal {
  align-items:stretch;
  box-sizing:border-box;
}
.workbenchSettingsProfileModal .modal-close-dot {
  border:0;
  padding:0;
}
.workbenchSettingsBody {
  display:block;
  width:100%;
}
.workbenchSettingsRow {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  padding:15px 0;
  border-bottom:1px solid #e8e8e8;
  box-sizing:border-box;
}
.workbenchSettingsRow:first-child {
  padding-top:0;
}
.workbenchSettingsRow:last-child {
  border-bottom:0;
}
.workbenchSettingsText {
  display:block;
  min-width:0;
}
.workbenchSettingsText strong {
  display:block;
  color:#1b1b1b;
  font-size:14px;
  line-height:1;
  font-weight:500;
}
.workbenchSettingsText em {
  display:-webkit-box;
  overflow:hidden;
  margin-top:8px;
  color:#9c9c9c;
  font-size:13px;
  line-height:1.35;
  font-style:normal;
  white-space:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.workbenchSettingsSwitch {
  position:relative;
  display:inline-flex;
  width:32px;
  height:18px;
  cursor:pointer;
}
.workbenchSettingsSwitch input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.workbenchSettingsSwitch span {
  position:absolute;
  inset:0;
  border:0;
  border-radius:999px;
  background:#ededee;
  box-sizing:border-box;
  transition:background .16s ease;
}
.workbenchSettingsSwitch span:before {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(15,23,42,.12);
  transition:transform .16s ease;
}
.workbenchSettingsSwitch input:checked + span {
  background:#0a84ff;
}
.workbenchSettingsSwitch input:checked + span:before {
  transform:translateX(14px);
}
.workbenchSettingsFolderBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:60px;
  height:24px;
  padding:0 14px;
  border:0;
  border-radius:5px;
  background:#f0f0f0;
  color:#333333;
  font-size:12px;
  line-height:1;
  font-weight:600;
  cursor:pointer;
}
.workbenchLockOverlay {
  z-index:10000000;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  background-color:rgba(0,0,0,.55);
}
.workbenchLockBox {
  align-items:stretch;
  width:340px;
  max-width:calc(100vw - 40px);
  box-sizing:border-box;
}
.workbenchLockLogo {
  width:60px;
  height:auto;
  margin:24px auto 22px;
  object-fit:contain;
}
.workbenchLockBox p {
  margin:0 0 25px;
  color:#70757a;
  font-size:13px;
  font-weight:400;
  line-height:1.55;
  text-align:center;
}
.workbenchLockBox input {
  width:100%;
  height:46px;
  padding:0 15px;
  border:1px solid #dedede;
  border-radius:8px;
  box-sizing:border-box;
  color:#1b1b1b;
  font-size:15px;
  font-weight:400;
}
.workbenchLockError {
  margin:10px 0 0;
  color:#ff5c68;
  font-size:12px;
  font-weight:400;
  line-height:1.3;
}
.workbenchLockBox button {
  width:100%;
  height:46px;
  margin-top:25px;
  border:0;
  border-radius:8px;
  background:#06f;
  color:#fff;
  font-size:15px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
}
.workbenchLockBox button:disabled {
  background:#ededed;
  color:#a6a6a6;
  cursor:default;
}
/* 워크보드 전용 타이틀 및 상단 여백 (독립형 클래스) */
.teamboard-main-header {
  background-color: #fff;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 0 20px;
  display: flex;
  position: relative;
}
.teamboard-header-left {
  align-items: center;
  gap: 20px;
  display: flex;
}
.teamboard-title-text {
  color: #1b1b1b;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
/* 워크보드 전용 하단 푸터 및 작성하기 단추 */
.teamboard-list-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.teamboard-create-btn {
  color: #ffffff;
  cursor: pointer;
  background-color: #0373f0;
  border: 0;
  border-radius: 6px;
  padding: 0 24px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  box-sizing: border-box;
}
.teamboard-create-btn:disabled {
  background-color: #ededed;
  color: #a6a6a6;
  cursor: not-allowed;
}
/* 어드민 뒤로가기 화살표 버튼 스타일 (정렬 일치용) */
.admin-back-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
/* 워크보드 등록 폼 및 뱃지 디자인 스타일 */
.teamboard-write-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.teamboard-form-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
  padding: 30px 0;
}
.teamboard-form-group:last-child { border:0; padding:30px 0 0; }
.teamboard-form-label {
  font-size: 15px;
  font-weight: 500;
  color: #1b1b1b;
  display: flex;
  align-items: center;
  gap: 0;
  width: 120px;
  flex-shrink: 0;
  height: 40px;
  box-sizing: border-box;
}
.required-star {
  color: #ef4444;
  display:none;
}
.teamboard-radio-group {
  display: flex;
  gap: 24px;
  align-items: center;
  flex: 1;
  height: 40px;
  box-sizing: border-box;
}
.teamboard-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #1b1b1b;
  cursor: pointer;
}
.teamboard-input-field-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.teamboard-input-help {
  font-size: 13px;
  color: #8c9ba5;
  margin: 0;
  padding-left: 2px;
}
.teamboard-input-text {
  width: 100%;
  height: 40px;
  padding: 10px 14px;
  border: 1px solid #dedede;
  border-radius: 6px;
  font-size: 14px;
  color: #1b1b1b;
  background-color: #ffffff;
  box-sizing: border-box;
}
.teamboard-input-text:focus, .teamboard-textarea:focus {
  outline: none;
  border-color: #0373f0;
}
.teamboard-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dedede;
  border-radius: 6px;
  font-size: 14px;
  color: #1b1b1b;
  background-color: #ffffff;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}
/* 워크보드 뱃지 컬러 상세화 (curated HSL 파스텔 톤 적용) */
.teamboard-category-badge.complete {
  background-color: #2c3a47;
  color: #fff;
}
.teamboard-category-badge.likely {
  background-color: #5092f8;
  color: #fff;
}
.teamboard-category-badge.bad {
  background-color: #ec4c4c;
  color: #fff;
}
.teamboard-category-badge.absence {
  background-color: #f9f07b;
  color: #1b1b1b;
}
/* 워크보드 전용 세그먼트 필터 컨트롤 스타일 */
.teamboard-segment-control {
  background-color: #eef1f4;
  border-radius: 6px;
  gap: 4px;
  padding: 4px;
  display: flex;
  flex-shrink: 0;
  width: auto;
}
.teamboard-segment-btn {
  color: var(--text-muted);
  cursor: pointer;
  background: 0 0;
  border: none;
  border-radius: 5px;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}
.teamboard-segment-btn.active {
  background-color: var(--white);
  color: var(--text-main);
}
/* 워크보드 전용 뒤로가기 버튼 스타일 (메일 읽기 화면 뒤로가기 단추와 100% 동일하게 맵핑) */
.teamboard-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #dfdfdf;
  border-radius: 8px;
  background: #fff;
  color: #1b1b1b;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  margin-left: 0;
}
.teamboard-back-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.teamboard-fields-container {
  margin-top: 10px;
  border-top:1px solid #e8e8e8;
}
.teamboard-write-footer {
  display: none;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: 30px;
  border-top: 1px solid #e8e8e8;
  padding-top: 20px;
}
.teamboard-write-header-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.teamboard-write-header {
  align-items:center;
}
.teamboard-cancel-btn {
  height: 40px;
  padding: 0 24px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background-color: #ffffff;
  color: #555555;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-sizing: border-box;
}
.teamboard-post-row {
  cursor: pointer;
}
.teamboard-detail-modal {
  background-color: var(--white);
  box-sizing: border-box;
  border-radius: 10px;
  flex-direction: column;
  width: 360px;
  padding: 15px 20px 25px;
  display: flex;
  position: relative;
  border: 1px solid #dedede;
  box-shadow: none;
}
.teamboard-detail-header {
  align-items: center;
  width: 100%;
  min-height: 12px;
  margin-bottom: 20px;
  display: flex;
  position: relative;
}
.teamboard-detail-close-dot {
  cursor: pointer;
  background-color: #ff5f56;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: block;
  transition: opacity .2s;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.teamboard-detail-status-row {
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding-right: 2px;
}
.teamboard-detail-status-row .teamboard-category-badge { font-size:12px; padding:3px 6px; }
.teamboard-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  width: 100%;
}
.teamboard-detail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 15px;
  width: 100%;
}
.teamboard-detail-label {
  width: 90px;
  font-size: 13px;
  color: #666;
  flex-shrink: 0;
}
.teamboard-detail-value {
  font-size: 13px;
  color: #1b1b1b;
  flex-grow: 1;
}
.teamboard-detail-content-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 0;
  padding-bottom: 0;
  margin-top: 4px;
  width: 100%;
}
.teamboard-detail-content-value {
  width: 100%;
  background-color: #f8f9fa;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  color: #444444;
  line-height: 1.6;
  white-space: pre-wrap;
  min-height: 100px;
  box-sizing: border-box;
}
.teamboard-detail-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
}
.teamboard-detail-edit-btn {
  height: 42px;
  flex:1;
  border: 1px solid #dedede;
  border-radius: 6px;
  background-color: #ffffff;
  color: #505050;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}
.teamboard-detail-delete-btn {
  flex:1;
  height: 42px;
  border: 1px solid #ff5f56;
  border-radius: 6px;
  background-color: #ffffff;
  color: #ff5f56;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}
.more-tree-root-header-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.more-tree-root-header-btn span {
  font-size: 15px;
  color: #1b1b1b;
  font-weight: 600;
}
.profile-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-card-right {
  display: flex;
  gap: 8px;
}
.profile-card-action-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #3b4858;
  border-radius: 6px;
  background-color: #3b4858;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  box-sizing: border-box;
}
.profile-card-action-btn.logout-btn {
  border: 1px solid #dedede;
  background-color: #fff;
  color: #505050;
}
.desktop-home-view.homePage {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #fff;
  line-height: 1;
  box-sizing: border-box;
}
.desktop-home-view.homePage button {
  font-family: inherit;
}
.desktop-home-view.homePage .dashboardMobileTop,
.desktop-home-view.homePage .dashboardQuickActions,
.desktop-home-view.homePage .dashboardMobileBottomNav,
.desktop-home-view.homePage .dashboardCalendarAgenda,
.desktop-home-view.homePage .dashboardLabelMobile {
  display: none;
}
.desktop-home-view.homePage .mainArea {
  width: 100%;
  max-width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 30px 20px;
}
.desktop-home-view.homePage .dashboardHome {
  display: flex;
  flex-direction: column;
  gap: 20px;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.45fr) minmax(280px, .95fr);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.desktop-home-view.homePage .dashboardHomeColumn {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.desktop-home-view.homePage .dashboardHome .dashboardCard {
  min-width: 0;
  padding:20px;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}
.desktop-home-view.homePage .dashboardHome .dashboardCard.mobileDashboardSummarySection {
  padding:0;
  border:0;
  border-radius: 0;
}
.desktop-home-view.homePage .dashboardCard--mail,
.desktop-home-view.homePage .dashboardCard--notice,
.desktop-home-view.homePage .dashboardCard--approval,
.desktop-home-view.homePage .dashboardCard--team,
.desktop-home-view.homePage .dashboardCard--birthdays,
.desktop-home-view.homePage .dashboardCard--miniCalendar {
  height: auto;
  min-height: 0;
}
.desktop-home-view.homePage .dashboardSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 20px;
}
.desktop-home-view.homePage .dashboardSectionTitle {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1b1b1b;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.desktop-home-view.homePage .dashboardSectionTitle--link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.desktop-home-view.homePage .dashboardSectionTitleArrow {
  display: block;
  width: 22px;
  height: 22px;
  color: currentColor;
  flex: 0 0 auto;
}
.desktop-home-view.homePage .dashboardGreeting {
  margin: 0 0 15px;
  color: #1b1b1b;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
}
.desktop-home-view.homePage .dashboardNowLabel {
  line-height: 1;
  display: block;
  font-size: 12px;
  color: #9c9c9c;
  margin:0 0 20px;
  text-align: left;
  font-weight: normal;
}
.desktop-home-view.homePage .dashboardNowLabel span:first-child,
.desktop-home-view.homePage .dashboardNowDivider {
  display: none;
}
.desktop-home-view.homePage .dashboardSummaryCards {
  display: flex;
  gap: 20px;
  width: 100%;
}
.desktop-home-view.homePage .dashboardCardTitleRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  width: 100%;
}
.desktop-home-view.homePage .dashboardCardTitle {
  font-size: 15px;
  font-weight: normal; /* 최대 600 한도 준수 */;
  color: #1b1b1b;
}
.desktop-home-view.homePage .dashboardCardIcon {
  width: 20px;
  height: 20px;
}
.desktop-home-view.homePage .dashboardAttendanceCurrent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 20px;
  width: 100%;
}
.desktop-home-view.homePage .dashboardAttendanceStateLabel {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 999px;
  background: #9c9c9c;
  color: #ffffff;
  font-size: 10px;
  font-weight: normal; /* 최대 600 한도 준수 */;
  line-height: 1;
}
.desktop-home-view.homePage .dashboardAttendanceCurrentValue {
  font-size: 32px;
  font-weight: 600; /* 최대 600 한도 준수 */;
  color: #1b1b1b;
  line-height: 1;
  letter-spacing: -0.5px;
}
.desktop-home-view.homePage .dashboardAttendanceBox,
.desktop-home-view.homePage .dashboardTodayBox {
  flex: 1;
  min-width: 0;
  border:1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 200px;
  box-shadow: none; /* 그림자 제거 규칙 준수 */
}
.desktop-home-view.homePage .dashboardAttendanceActions {
  margin-top: auto;
  width: 100%;
}
.desktop-home-view.homePage .dashboardActionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600; /* 최대 600 한도 준수 */;
  cursor: pointer;
  box-shadow: none; /* 그림자 제거 규칙 준수 */
}
.desktop-home-view.homePage .dashboardCheckOutBtn {
  background: #0373ef;
  color: #ffffff;
}
.desktop-home-view.homePage .dashboardCheckInBtn {
  background: #0373ef;
  border: 0;
  color: #ffffff;
}
.desktop-home-view.homePage .dashboardActionBtn:disabled {
  background: #ededed;
  border: 0;
  color: #a6a6a6;
  cursor: default;
  opacity: 1;
}
.desktop-home-view.homePage .dashboardTodayMessage {
  display: block;
  font-size: 12px;
  color: #8e8e93;
  margin-bottom: 15px;
  text-align: left;
}
.desktop-home-view.homePage .dashboardMiniStats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: auto 0 0;
  padding: 0;
  width: 100%;
}
.desktop-home-view.homePage .dashboardMiniStats div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.desktop-home-view.homePage .dashboardMiniStats dt {
  font-size: 13px;
  color: #666;
  font-weight: normal; /* 최대 600 한도 준수 */
}
.desktop-home-view.homePage .dashboardMiniStats dd {
  font-size: 13px;
  color: #1b1b1b;
  font-weight: 600; /* 최대 600 한도 준수 */;
  margin: 0;
}
.desktop-home-view.homePage .dashboardMailMeta {
  margin-top: 4px;
  color: #666;
  font-size: 13px;
  line-height: 1;
}
.desktop-home-view.homePage .dashboardMailMeta em {
  color: inherit;
  font-style: normal;
}
.desktop-home-view.homePage .dashboardMailMeta .dashboardMailboxUsageValue {
  color: #0373f0;
}
.desktop-home-view.homePage .dashboardMailList {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.desktop-home-view.homePage .dashboardMailItem {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 78px;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid #e8e8e8;
  background: transparent;
  color: #1b1b1b;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.desktop-home-view.homePage .dashboardMailItem:first-child {
  padding-top: 0;
}
.desktop-home-view.homePage .dashboardMailItem:last-child {
  border:0;
  padding-bottom:0;
}
.desktop-home-view.homePage .dashboardMailMain {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.desktop-home-view.homePage .dashboardMailSender {
  display: block;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: #1b1b1b;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardMailIconBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f5f6f7;
  color: #1b1b1b;
  flex: 0 0 auto;
}
.desktop-home-view.homePage .dashboardMailIcon {
  display: block;
  width: 23px;
  height: 23px;
  color: currentColor;
  flex: 0 0 auto;
  object-fit: contain;
}
.desktop-home-view.homePage .dashboardMailAttachIcon {
  display: block;
  width: 13px;
  height: 13px;
  color: currentColor;
  flex: 0 0 auto;
}
.desktop-home-view.homePage .dashboardMailSnippet {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #1b1b1b;
  font-size: 14px;
  line-height: 1.25;
  font-weight: normal;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardMailSnippet span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardMailDate {
  justify-self: end;
  align-self: start;
  margin-top: 2px;
  color: #9c9c9c;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 500;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardMailItem.is-read .dashboardMailIconBox {
  color: #b6b6b6;
  background: #f9f9f9;
}
.desktop-home-view.homePage .dashboardMailItem.is-read .dashboardMailSender,
.desktop-home-view.homePage .dashboardMailItem.is-read .dashboardMailSnippet {
  color: #9c9c9c;
}
.desktop-home-view.homePage .dashboardMailItem.is-read .dashboardMailDate {
  color: #cecece;
}
.desktop-home-view.homePage .dashboardNoticeList,
.desktop-home-view.homePage .dashboardTeamList {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.desktop-home-view.homePage .dashboardNoticeItem,
.desktop-home-view.homePage .dashboardTeamItem {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1b1b1b;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.desktop-home-view.homePage .dashboardNoticeItem span,
.desktop-home-view.homePage .dashboardTeamItem strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardTeamItem span {
  display: block;
  overflow: hidden;
  margin-top: 10px;
  color: #8b8f96;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardApprovalPanel,
.desktop-home-view.homePage .dashboardApprovalBody {
  flex: 0 0 auto;
  min-height: 0;
}
.desktop-home-view.homePage .dashboardApprovalList {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.desktop-home-view.homePage .dashboardApprovalItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid #e8e8e8;
  background: transparent;
  color: #1b1b1b;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.desktop-home-view.homePage .dashboardApprovalItem:last-child {
  border:0;
  padding-bottom:0;
}
.desktop-home-view.homePage .dashboardApprovalInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.desktop-home-view.homePage .dashboardApprovalTitle {
  overflow: hidden;
  color: #1b1b1b;
  font-size: 14px;
  line-height: 1.25;
  font-weight: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardApprovalDate {
  display: block;
  overflow: hidden;
  color: #9c9c9c;
  font-size: 13px;
  line-height: 1.25;
  font-weight: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardBirthdayList {
  overflow: hidden;
}
.desktop-home-view.homePage .dashboardBirthdayTrack {
  display: flex;
  width: 100%;
}
.desktop-home-view.homePage .dashboardBirthdayPage {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: 12px;
}
.desktop-home-view.homePage .dashboardBirthdayItem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #f8f8f8;
  color: inherit;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
}
.desktop-home-view.homePage .dashboardBirthdayAvatar {
  position: relative;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #dee6ee;
  color: transparent;
  font-size: 0;
  line-height: 1;
  font-weight: 600;
  overflow: hidden;
}
.desktop-home-view.homePage .dashboardBirthdayAvatar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 90%;
  height: 90%;
  background: #fff;
  transform: translateX(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 2 24 20' preserveAspectRatio='xMidYMax meet'%3E%3Cpath d='M12 2a5 5 0 1 0 0 10 5 5 0 1 0 0-10M4 22h16c.55 0 1-.45 1-1v-1c0-3.86-3.14-7-7-7h-4c-3.86 0-7 3.14-7 7v1c0 .55.45 1 1 1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 2 24 20' preserveAspectRatio='xMidYMax meet'%3E%3Cpath d='M12 2a5 5 0 1 0 0 10 5 5 0 1 0 0-10M4 22h16c.55 0 1-.45 1-1v-1c0-3.86-3.14-7-7-7h-4c-3.86 0-7 3.14-7 7v1c0 .55.45 1 1 1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.desktop-home-view.homePage .dashboardBirthdayAvatar.is-image::before {
  display: none;
}
.desktop-home-view.homePage .dashboardBirthdayAvatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.desktop-home-view.homePage .dashboardBirthdayInfo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.desktop-home-view.homePage .dashboardBirthdayDate,
.desktop-home-view.homePage .dashboardBirthdayItem em {
  color: #7f8287;
  font-size: 12px;
  line-height: 1;
  font-style: normal;
}
.desktop-home-view.homePage .dashboardBirthdayPerson {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardBirthdayItem strong {
  flex: 0 0 auto;
  color: #1b1b1b;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
}
.desktop-home-view.homePage .dashboardBirthdayPerson em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desktop-home-view.homePage .dashboardBirthdayControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 14px 0 -2px;
}
.desktop-home-view.homePage .dashboardBirthdayNav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1b1b1b;
  cursor: pointer;
}
.desktop-home-view.homePage .dashboardBirthdayNav svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.desktop-home-view.homePage .dashboardBirthdayNav:disabled {
  color: #c4c4c4;
  cursor: default;
}
.desktop-home-view.homePage .dashboardMiniCalendar {
  min-width: 0;
}
.desktop-home-view.homePage .dashboardMiniCalendarHead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -2px 0 18px;
}
.desktop-home-view.homePage .dashboardMiniCalendarMonth {
  min-width: 70px;
  color: #1b1b1b;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  text-align: center;
}
.desktop-home-view.homePage .dashboardMiniCalendarNav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #dfdfdf;
  border-radius: 50%;
  background: #fff;
  color: #8b8f96;
  cursor: pointer;
}
.desktop-home-view.homePage .dashboardMiniCalendarNav svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.desktop-home-view.homePage .dashboardMiniCalendarWeekdays,
.desktop-home-view.homePage .dashboardMiniCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px 3px;
  min-width: 0;
}
.desktop-home-view.homePage .dashboardMiniCalendarWeekdays {
  margin-bottom: 12px;
  color: #666;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  font-weight: 500;
}
.desktop-home-view.homePage .dashboardMiniCalendarWeekdays span:first-child {
  color: #ff5c68;
}
.desktop-home-view.homePage .dashboardMiniCalendarDay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1b1b1b;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.desktop-home-view.homePage .dashboardMiniCalendarDay.is-sunday {
  color: #ff5c68;
}
.desktop-home-view.homePage .dashboardMiniCalendarDay.is-holiday:not(.is-selected) .dashboardMiniCalendarNumber {
  color: #ff5c68;
}
.desktop-home-view.homePage .dashboardMiniCalendarDay.is-outside {
  color: #c4c4c4;
}
.desktop-home-view.homePage .dashboardMiniCalendarDay.is-selected .dashboardMiniCalendarNumber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1b1b1b;
  color: #fff;
  font-weight: 600;
}
.desktop-home-view.homePage .dashboardMiniCalendarDot {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0373f0;
  transform: translateX(-50%);
}
.desktop-home-view.homePage .dashboardMiniAgenda {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 15px;
  margin-top: 15px;
  padding: 20px 0 0;
  border-top: 1px solid #e8e8e8;
}
.desktop-home-view.homePage .dashboardMiniAgendaDate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}
.desktop-home-view.homePage .dashboardMiniAgendaDate span {
  color: #7f8287;
  font-size: 12px;
  line-height: 1;
}
.desktop-home-view.homePage .dashboardMiniAgendaDate strong {
  color: #1b1b1b;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
}
.desktop-home-view.homePage .dashboardMiniAgendaDate em {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: #333;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-style: normal;
  font-weight: 500;
}
.desktop-home-view.homePage .dashboardMiniAgendaList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.desktop-home-view.homePage .dashboardMiniAgendaItem {
  position: relative;
  min-width: 0;
  padding: 15px 15px 15px 28px;
  border-radius: 6px;
  background: #f5f6f8;
  box-sizing: border-box;
}
.desktop-home-view.homePage .dashboardMiniAgendaDot {
  position: absolute;
  top: 18px;
  left: 15px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #63c94d;
}
.desktop-home-view.homePage .dashboardMiniAgendaItem strong {
  display: block;
  overflow: hidden;
  color: #1b1b1b;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardMiniAgendaMeta {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  color: #666;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardMiniAgendaEmpty {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 15px;
  border-radius: 6px;
  background: #f5f6f8;
  color: #9c9c9c;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.desktop-home-view.homePage .dashboardBirthdayEmpty,
.desktop-home-view.homePage .dashboardSimpleEmpty,
.desktop-home-view.homePage .dashboardMailEmpty,
.desktop-home-view.homePage .dashboardApprovalEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #9c9c9c;
  font-size: 13px;
  line-height: 1;
  text-align: center;
}
/* 📝 결재선 설정 모달창 내부 디자인 복원 및 완성 (외부 팝업 박스 크기 유지 규칙 준수) */
.approvalModalBody {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 15px;
  box-sizing: border-box;
}
.approvalModalInputsRow {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-bottom: 15px;
  box-sizing: border-box;
}
.approvalModalInputCol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.approvalModalInputLabel {
  font-size: 13px;
  font-weight: 500; /* 최대 600 한도 준수 */;
  color: #1b1b1b;
  text-align: left;
  margin-bottom: 2px;
}
.approvalModalSearchInput {
  height: 38px;
  border: 1px solid #dedede;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  color: #1b1b1b;
}
.approvalModalChipList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  min-height: 24px;
}
.approvalModalChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f1f3f5;
  border-radius: 99px;
  font-size: 12px;
  color: #1b1b1b;
}
.approvalModalChipDelBtn {
  background: none;
  border: none;
  cursor: pointer;
  color: #8e8e93;
  font-size: 13px;
  padding: 0 1px;
  line-height: 1;
}
.approvalModalTableWrapper {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #ededed;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.approvalModalTable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.approvalModalTableRow {
  border-bottom: 1px solid #f8f9fa;
  cursor: pointer;
}
.approvalModalTableRow.is-selected {
  background: #e8f3ff;
  color: #0373ef;
}
.approvalModalColName {
  padding: 12px;
  font-size: 13px;
  font-weight: 500; /* 최대 600 한도 준수 */;
  color: #1b1b1b;
}
.approvalModalColPosition {
  padding: 12px;
  font-size: 12px;
  color: #8e8e93;
}
.approvalModalColDept {
  padding: 12px;
  font-size: 12px;
  color: #8e8e93;
  text-align: right;
}
.approvalModalActionsRow {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.approvalModalSaveBtn {
  height: 38px;
  padding: 0 28px;
  border-radius: 6px;
  border: none;
  background: #1b1b1b;
  color: #ffffff;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  box-shadow: none;
}
.approvalModalCancelBtn {
  height: 38px;
  padding: 0 28px;
  border-radius: 6px;
  border: 1px solid #dedede;
  background: #ffffff;
  color: #505050;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  box-shadow: none;
}
@media (width<=1020px) {
  .app-container {
    max-width:100%;
    box-shadow:none;
    border:none;
  }
}

html.ios-native-app,
html.ios-native-app body,
html.ios-native-app #root {
  height:var(--mobile-app-height, 100%);
  min-height:0;
}

/* 홈 인디케이터가 있는 iPhone (X 이상): React 이전에 클래스가 설정되어 첫 렌더링부터 적용 */
html.ios-home-indicator {
  --ios-safe-area-bottom: 34px;
}

html.ios-native-app #root {
  justify-content:flex-start;
  align-items:stretch;
}

html.ios-native-app .app-container.mobile-home-container,
html.ios-native-app .app-container.mobile-page-container,
html.ios-native-app .app-container.mobile-messenger-container,
html.ios-native-app .app-container.mobile-chat-room-container {
  height:var(--mobile-app-height, 100%);
}

.app-container.mobile-home-container {
  width:100%;
  max-width:100%;
  height:var(--mobile-app-height, 100dvh);
  min-height:0;
  border:0;
  box-shadow:none;
  overflow:hidden;
}

.mobile-page-container,
.mobile-messenger-container,
.mobile-chat-room-container {
  width:100%;
  max-width:100%;
  height:var(--mobile-app-height, 100dvh);
  min-height:0;
  border:0;
  box-shadow:none;
  overflow:hidden;
}

.app-container.mobile-home-container,
.app-container.mobile-page-container,
.app-container.mobile-messenger-container,
.app-container.mobile-chat-room-container {
  padding-top:env(safe-area-inset-top, 0px);
}

.mobile-has-bottom-nav {
  padding-bottom:0;
}

.mobile-has-bottom-nav .mobile-page-scroll {
  height: 100%;
  *padding-bottom: calc(64px + max(var(--ios-safe-area-bottom, env(safe-area-inset-bottom, 0px)), 0px) + 15px) !important;
  box-sizing: border-box;
}

.mobile-page-scroll {
  flex:1;
  min-height:0;
  position:relative;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-home-container .mobile-page-scroll,
.mobile-messenger-container .mobile-page-scroll,
.mobile-chat-room-container .mobile-page-scroll {
  overflow:hidden;
}

.mobile-more-container .desktop-more-view {
  min-height:100%;
  height:auto;
  padding-bottom:96px;
  overflow:visible;
}

.mobile-more-container .desktop-list-inner {
  min-height:100%;
  height:auto;
  padding-bottom:96px;
  overflow:visible;
}

.mobile-cloud-container .cloudPage {
  min-height:100%;
  padding:15px 15px 96px;
}

.mobile-back-img-btn {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:1;
  width:auto;
  height:18px;
  flex:0 0 18px;
  padding:0;
  border:0;
  background:#fff;
  box-shadow:none;
}

.mobile-back-img-btn img {
  display:block;
  width:18px;
  height:18px;
  object-fit:contain;
}

.mobile-subpage-title-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 20px;
}

.mobile-cloud-container .cloudPageTitle {
  margin:0;
  font-size:18px;
  line-height:1.25;
}

.mobile-cloud-container .mobile-cloud-title-row {
  justify-content:space-between;
}

.mobile-cloud-container .mobile-cloud-title-row .cloudPageTitle {
  margin-left:auto;
  text-align:right;
}

.mobile-teamboard-container .teamboard-view-container {
  padding:20px 20px 96px;
}

.mobile-teamboard-container .teamboard-main-header {
  flex-direction:column;
  align-items:stretch;
  gap:20px;
  padding:0 0 20px;
}

.mobile-teamboard-container .teamboard-header-left,
.mobile-teamboard-container .teamboard-header-right {
  width:100%;
  min-width:0;
}

.mobile-teamboard-container .teamboard-header-left {
  justify-content:space-between;
}

.mobile-teamboard-container .teamboard-title-text {
  margin-left:auto;
  text-align:right;
  white-space:nowrap;
}

.mobile-teamboard-container .teamboard-segment-control {
  width:100%;
  box-sizing:border-box;
}

.mobile-teamboard-container .teamboard-segment-btn {
  flex:1 1 0;
  min-width:0;
  padding-left:4px;
  padding-right:4px;
  text-align:center;
}

.mobile-teamboard-container .teamboard-table-wrap {
  overflow-x:hidden;
}

.mobile-teamboard-container .teamboard-table {
  table-layout:fixed;
}

.mobile-teamboard-container .teamboard-table th,
.mobile-teamboard-container .teamboard-table td {
  box-sizing:border-box;
  padding-left:4px;
  padding-right:4px;
  text-align:center;
}

.mobile-teamboard-container .teamboard-table th {
  white-space:nowrap;
}

.mobile-teamboard-container .teamboard-table td {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mobile-teamboard-container .teamboard-col-category {
  width:16%;
}

.mobile-teamboard-container .teamboard-col-name {
  width:20%;
}

.mobile-teamboard-container .teamboard-col-author {
  width:22%;
}

.mobile-teamboard-container .teamboard-col-date {
  width:22%;
}

.mobile-teamboard-container .teamboard-col-views {
  width:20%;
}

.mobile-teamboard-container .teamboard-table-wrap {
  border-top:0;
  overflow:visible;
}

.mobile-teamboard-container .teamboard-table,
.mobile-teamboard-container .teamboard-table tbody,
.mobile-teamboard-container .teamboard-table tr,
.mobile-teamboard-container .teamboard-table td {
  display:block;
  width:100%;
  box-sizing:border-box;
}

.mobile-teamboard-container .teamboard-table thead {
  display:none;
}

.mobile-teamboard-container .teamboard-table tbody {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
  padding:15px 0;
  border-bottom:1px solid #e8e8e8;
  background:#fff;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row:first-child {
  border-top:1px solid #e8e8e8;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row td {
  min-width:0;
  padding:0;
  border:0;
  overflow:visible;
  text-align:left;
  text-overflow:clip;
  white-space:normal;
  font-size:14px;
  font-weight: normal;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-category-badge {
  font-size:12px;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-category {
  grid-column:2;
  grid-row:1;
  width:auto;
  justify-self:end;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-name {
  grid-column:1;
  grid-row:1;
  width:auto;
  align-self:center;
  word-break:break-word;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-author,
.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-date,
.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-views {
  grid-column:1 / -1;
  display:flex;
  width:auto;
  gap:10px;
  color:#444;
  overflow-wrap:anywhere;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-author {
  grid-row:2;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-date {
  grid-row:3;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-views {
  grid-row:4;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-author::before,
.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-date::before,
.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-views::before {
  flex:0 0 64px;
  color:#9c9c9c;
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-author::before {
  content:"연락처";
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-date::before {
  content:"신청 차종";
}

.mobile-teamboard-container .teamboard-table .teamboard-post-row .teamboard-col-views::before {
  content:"등록일";
}

.mobile-teamboard-container .teamboard-table .teamboard-category-badge {
  width:auto;
  white-space:nowrap;
}

.mobile-teamboard-container .teamboard-list-footer {
  width:100%;
  justify-content:flex-end;
}

.mobile-teamboard-container .teamboard-write-header {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mobile-teamboard-container .teamboard-write-header .teamboard-header-left {
  width:auto;
  flex:0 0 auto;
}

.mobile-teamboard-container .teamboard-write-header .teamboard-title-text {
  margin-left:0;
  text-align:left;
}

.mobile-teamboard-container .teamboard-write-header-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}

.mobile-teamboard-container .teamboard-write-header-actions .teamboard-cancel-btn,
.mobile-teamboard-container .teamboard-write-header-actions .teamboard-create-btn {
  height:36px;
  padding-left:14px;
  padding-right:14px;
  white-space:nowrap;
}

.mobile-teamboard-container .teamboard-fields-container {
  margin-top:0;
}

.mobile-teamboard-container .teamboard-form-group {
  display:grid;
  grid-template-columns:86px minmax(0, 1fr);
  align-items:start;
  gap:16px;
  padding:24px 0;
}

.mobile-teamboard-container .teamboard-form-group:first-child {
  grid-template-columns:86px minmax(0, 1fr);
  gap:16px;
}

.mobile-teamboard-container .teamboard-form-label {
  width:auto;
  min-width:0;
}

.mobile-teamboard-container .teamboard-form-group:first-child .teamboard-form-label {
  height:40px;
}

.mobile-teamboard-container .teamboard-form-group:last-child {
  grid-template-columns:minmax(0, 1fr);
  gap:14px;
}

.mobile-teamboard-container .teamboard-form-group:last-child .teamboard-form-label {
  height:auto;
}

.mobile-teamboard-container .teamboard-status-select {
  width:100%;
  height:40px;
  box-sizing:border-box;
  padding:0 38px 0 14px;
  border:1px solid #dedede;
  border-radius:6px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 14px center / 10px 7px;
  color:#1b1b1b;
  font:inherit;
  font-size:14px;
  appearance:none;
  -webkit-appearance:none;
}

.mobile-teamboard-container .teamboard-input-field-wrap {
  min-width:0;
}

.mobile-teamboard-container .teamboard-radio-group {
  display:grid;
  grid-template-columns:repeat(4, max-content);
  justify-content:space-between;
  gap:8px;
  width:100%;
}

.mobile-teamboard-container .teamboard-radio-label {
  gap:5px;
  white-space:nowrap;
}

.mobile-teamboard-container .teamboard-radio-label input {
  flex:0 0 auto;
  margin:0;
}

.mobile-teamboard-container .teamboard-write-footer {
  display:none;
}

.mobile-teamboard-container .teamboard-detail-overlay {
  align-items:flex-end;
  justify-content:center;
  padding:24px 0 0;
  box-sizing:border-box;
}

.mobile-teamboard-container .teamboard-detail-modal {
  width:100%;
  max-width:100%;
  max-height:calc(100dvh - 24px);
  margin:0;
  border:1px solid #dedede;
  border-width:1px 0 0;
  border-radius:10px 10px 0 0;
  padding:20px 20px calc(25px + env(safe-area-inset-bottom, 0px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-cloud-container .cloudBoardHead,
.mobile-cloud-container .cloudActionGroup {
  flex-wrap:wrap;
}

.mobile-cloud-container .cloudBoardTools {
  display:flex;
  width:100%;
  gap:8px;
  flex-wrap:nowrap;
}

.mobile-cloud-container .cloudBoardSearch {
  flex:1 1 auto;
  width:auto;
  min-width:0;
}

.mobile-cloud-container .cloudSortSelect {
  flex:0 0 104px;
  width:104px;
  padding-right:30px;
}

.mobile-cloud-container .cloudTable {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-cloud-container .cloudTableHead,
.mobile-cloud-container .cloudRowMain {
  min-width:760px;
}

.mobile-home-container .desktop-home-view.homePage {
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

.mobile-home-container .desktop-home-view.homePage .mainArea {
  padding:0 0 104px;
}

.mobile-messenger-container .dashboard-screen {
  bottom:78px;
}

.mobile-more-container .attendance-main-header {
  padding:15px 15px 0;
}

.mobile-more-container .attendance-main-header .approval-header-left {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}

.mobile-more-container .attendance-main-header .approval-year-month {
  margin:0;
  font-size:18px;
  line-height:1.25;
  white-space:nowrap;
}

.mobile-page-container .desktop-main-content,
.mobile-page-container .desktop-mail-view,
.mobile-page-container .calendar-view-container,
.mobile-page-container .desktop-more-view,
.mobile-page-container .approval-view-container {
  width:100%;
  height:100%;
  max-width:100%;
}

.mobile-page-container .desktop-mail-view,
.mobile-page-container .calendar-view-container,
.mobile-page-container .desktop-more-view,
.mobile-page-container .approval-view-container {
  padding-bottom:78px;
  box-sizing:border-box;
}

.mobile-approval-container .approval-view-container,
.mobile-approval-container .approval-main-content {
  height:auto;
  min-height:100%;
  overflow:visible;
}

.mobile-approval-container .approval-main-header {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:20px 20px 0;
}

.mobile-approval-container .approval-header-left,
.mobile-approval-container .approval-header-right {
  width:100%;
  min-width:0;
}

.mobile-approval-container .approval-header-left {
  justify-content:space-between;
  gap:12px;
}

.mobile-approval-container .approval-main-header:not(.approval-header-relative) .approval-header-left {
  display:grid;
  grid-template-columns:36px minmax(0, 1fr) auto;
  align-items:center;
  gap:0;
}

.mobile-approval-container .approval-main-header:not(.approval-header-relative) .approval-mobile-back-btn {
  grid-column:1;
}

.mobile-approval-container .approval-main-header:not(.approval-header-relative) .approval-year-month {
  grid-column:3;
  justify-self:end;
}

.mobile-approval-container .approval-main-header:not(.approval-header-relative) .approval-create-txt-btn {
  position:fixed;
  right:20px;
  bottom:calc(84px + var(--ios-safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  z-index:9100;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  min-width:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:#0373f0;
  color:transparent;
  font-size:0;
  line-height:1;
  box-shadow:0 8px 20px rgba(3, 115, 240, 0.28);
}

.mobile-approval-container .approval-main-header:not(.approval-header-relative) .approval-create-txt-btn::before {
  content:"";
  display:block;
  width:22px;
  height:22px;
  background-color:#fff;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96A16,16,0,0,0,227.31,73.37ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z'%3E%3C/path%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96A16,16,0,0,0,227.31,73.37ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.mobile-approval-container .approval-year-month {
  font-size:18px;
  line-height:1.25;
  white-space:nowrap;
  word-break:keep-all;
}

.mobile-approval-container .approval-main-header.approval-header-relative {
  position:static;
  z-index:120;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;

}

.mobile-approval-container .approval-main-header.approval-header-relative.approval-detail-header {
  justify-content:flex-end;
}

.mobile-approval-container .approval-main-header.approval-header-relative .approval-header-left,
.mobile-approval-container .approval-main-header.approval-header-relative .approval-header-right {
  width:auto;
  flex:0 0 auto;
}

.mobile-approval-container .approval-main-header.approval-header-relative .approval-header-left {
  justify-content:flex-start;
}

.mobile-approval-container .approval-main-header.approval-header-relative .approval-header-right {
  gap:20px;
}

.mobile-approval-container .approval-main-header.approval-header-relative .approval-btn-group {
  flex-wrap:nowrap;
  justify-content:flex-end;
  gap:20px;
}

.mobile-approval-container .approval-main-header.approval-header-relative .approvalDraftSaveBtn,
.mobile-approval-container .approval-main-header.approval-header-relative .approvalSubmitBtn {
  height:auto;
  padding:0;
  border-radius:0;
  white-space:nowrap;
  border:0;
  background:#fff;
  color:#1b1b1b;
  font-size:14px;
}

.mobile-approval-container .approval-main-header.approval-header-relative .approvalDraftSaveBtn {
  color:#666;
  font-weight: normal;
}

.mobile-approval-container .approval-main-header.approval-header-relative .approvalSubmitBtn {
  font-weight: 600;
}

.mobile-approval-container .approval-main-header.approval-header-relative .approvalCancelBtn {
  border:0;
  padding:0;
  font-weight: 600;
}

.mobile-approval-container .approvalDetailCloseBtn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  padding:0;
  border:0;
  background:transparent;
}

.mobile-approval-container .approvalDetailCloseBtn img {
  display:block;
  width:18px;
  height:18px;
  object-fit:contain;
}

.mobile-approval-container .approvalDetailWrapper {
  padding:20px 0 0;
  gap:10px;
}

.mobile-approval-container .approvalDetailTitle {
  margin:0;
}

.mobile-approval-container .approvalDetailTitle h4 {
  font-size:16px;
}

.mobile-approval-container .approvalDetailBackBtn {
  width:auto;
  height:18px;
  border:0;
}

.mobile-approval-container .approvalDetailLineCards {
  margin:0;
}

.mobile-approval-container .approvalDetailWidePair > span {
  min-height: auto;
  padding:13px 0;
}

.mobile-approval-container .approvalDetailTable th {
  padding:13px 0;
}

.mobile-approval-container .approvalDetailWidePair > strong {
  min-height: auto;
  padding:13px;
}

.mobile-approval-container .approval-back-img {
  display:block;
  width:auto;
  height:18px;
  object-fit:contain;
}

.mobile-approval-container .approval-segment-control {
  width:100%;
  height:40px;
  gap:0;
  margin:15px 0;
  padding:4px;
  border:0;
  border-radius:8px;
  background:#f1f2f4;
  box-sizing:border-box;
}

.mobile-approval-container .approval-segment-control .segment-btn {
  flex:1 1 0;
  min-width:0;
  height:32px;
  padding:0 4px;
  border:0;
  border-radius:8px;
  color:#9c9c9c;
  font-size:13px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}

.mobile-approval-container .approval-segment-control .segment-btn.active {
  color:#1b1b1b;
  background:#fff;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);
}

.mobile-approval-container .contents_ {
  height:auto;
  min-height:0;
  overflow:visible;
  padding:0 20px 56px;
}

.mobile-approval-container .approvalListTableWrapper {
  margin:0;
  border:0;
}

.mobile-approval-container .approvalListTable,
.mobile-approval-container .approvalListTable tbody,
.mobile-approval-container .approvalListTable tr,
.mobile-approval-container .approvalListTable td {
  display:block;
  width:100%;
  box-sizing:border-box;
}

.mobile-approval-container .approvalListTable td.approvalListEmpty {
  padding:50px 0;
  border-bottom:1px solid #e8e8e8;
}

.mobile-approval-container .approvalListTable {
  border-collapse:separate;
  border-spacing:0;
  text-align:left;
  font-size:13px;
}

.mobile-approval-container .approvalListTable thead {
  display:none;
}

.mobile-approval-container .approvalListTable tbody {
  display:flex;
  flex-direction:column;
}

.mobile-approval-container .approvalListRow {
  position:relative;
  display:grid;
  grid-template-columns:auto auto minmax(0, 1fr);
  column-gap:14px;
  row-gap:0;
  padding:15px 86px 15px 0;
  border-bottom:1px solid #e8e8e8;
}

.mobile-approval-container .approvalListTable td {
  padding:0;
  border:0;
  color:#1b1b1b;
  word-break:keep-all;
  overflow-wrap:break-word;
}

.mobile-approval-container .approvalListRow td:nth-child(1) {
  grid-column:1;
  grid-row:1;
  display:inline-flex;
  width:auto;
  justify-self:start;
  color:#666;
  font-size:12px;
  line-height:1.2;
  margin:0 5px 0 0;
}

.mobile-approval-container .approvalListRow td:nth-child(2) {
  grid-column:2;
  grid-row:1;
  display:inline-flex;
  width:auto;
  justify-self:start;
  color:#1b1b1b;
  font-size:12px;
  line-height:1.2;
  margin:0;
}

.mobile-approval-container .approvalListRow:first-child {
  padding-top:10px;
}

.mobile-approval-container .approvalListTitleCell {
  grid-column:1 / 4;
  grid-row:2;
  color:#1b1b1b;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  margin:8px 0 12px;
}

.mobile-approval-container .approvalListRow td:nth-child(4),
.mobile-approval-container .approvalListRow td:nth-child(5) {
  display:inline-flex;
  width:auto;
  color:#666;
  font-size:12px;
  line-height:1.3;
}

.mobile-approval-container .approvalListRow td:nth-child(4) {
  grid-column:1;
  grid-row:3;
  justify-self:start;
}

.mobile-approval-container .approvalListRow td:nth-child(5) {
  grid-column:2 / span 2;
  grid-row:3;
  justify-self:start;
  margin-left:15px;
}

.mobile-approval-container .approvalListRow td:nth-child(4)::before {
  content:"기안자";
  margin-right:6px;
  color:#9c9c9c;
}

.mobile-approval-container .approvalListRow td:nth-child(5)::before {
  content:"기안일";
  margin:0 6px 0 0;
  color:#9c9c9c;
}

.mobile-approval-container .approvalListRow td:nth-child(6) {
  position:absolute;
  top:15px;
  right:0;
  width:auto;
}

.mobile-approval-container .approvalListRow tr:first-child td:nth-child(6) {
  top:10px;
}

.mobile-approval-container .approvalStatusBadge {
  padding:6px;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}

.mobile-approval-container .approvalListRow td:nth-child(7) {
  grid-column:1 / -1;
  grid-row:4;
  justify-self:start;
  margin-top:10px;
}

.mobile-approval-container .approvalListDeleteBtn {
  border:1px solid #dedede;
  border-radius:6px;
  background:#fff;
  color:#1b1b1b;
  padding:6px 10px;
  font-size:12px;
  font-weight:500;
}

.mobile-approval-container .approvalListEmpty {
  height:auto;
  padding:80px 0;
  line-height:1.4;
  text-align:center;
}

.mobile-approval-container .approval-create-txt-btn {
  flex:0 0 auto;
  height:36px;
  padding:0 20px;
  border-radius:6px;
  font-size:13px;
  white-space:nowrap;
}

.mobile-approval-container .approvalDraftLineContainer,
.mobile-approval-container .approval-btn-group {
  flex-wrap:wrap;
}

.mobile-approval-container .approvalSectionDivider {
  display:block;
  width:auto;
  height:18px;
  margin:30px -20px 0;
  background:#f7f7f7;
}

.mobile-approval-container .approvalItemGridTable,
.mobile-approval-container .approvalDetailTable {
  display:block;
  min-width:560px;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-approval-container .approvalSubFormBox,
.mobile-approval-container .approvalDetailTableWrap {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-approval-container .approvalDocTypeBtnGroup {
  display:none;
}

.mobile-approval-container .mobileApprovalDocTypeSelectWrap {
  display:block;
  margin-bottom:30px;
}

.mobileApprovalDocTypeSelect {
  width: 100%;
  height: 44px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1b1b1b;
  font-size: 14px;
  font-weight: normal;
  padding: 0 40px 0 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231b1b1b' stroke-width='2' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.mobile-approval-container .approvalDraftGridTable {
  display:block;
  width:100%;
  min-width:0;
  border-top:1px solid #e8e8e8;
}

.mobile-approval-container .approvalDraftGridTable tbody,
.mobile-approval-container .approvalDraftGridTable tr {
  display:block;
}

.mobile-approval-container .approvalDraftGridTable tr {
  display:grid;
  grid-template-columns:110px minmax(0, 1fr);
}

.mobile-approval-container .approvalDraftGridTable th,
.mobile-approval-container .approvalDraftGridTable td,
.mobile-approval-container .approvalDraftGridTable td.col-span-3 {
  display:flex;
  align-items:center;
  width:auto;
  min-width:0;
  min-height:auto;
  box-sizing:border-box;
  border-bottom:1px solid #e8e8e8;
}

.mobile-approval-container .approvalDraftGridTable th {
  border-right:1px solid #e8e8e8;
}

.mobile-approval-container .approvalDraftGridTable td,
.mobile-approval-container .approvalDraftGridTable tr td:last-child {
  border-right:0;
}

.mobile-approval-container .approvalDraftGridTable textarea.approvalTableTextarea {
  min-height:160px;
}

.mobile-approval-container .approvalItemTableSection {
  overflow:visible;
}

.mobile-approval-container .approvalItemGridScroll {
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-approval-container .approvalItemGridTable {
  display:table;
  width:100%;
  min-width:620px;
  max-width:none;
  overflow:visible;
}

.mobile-approval-container .approvalItemGridTable th:last-child,
.mobile-approval-container .approvalItemGridTable td:last-child {
  border-right:0;
}

.mobile-approval-container .approvalDateRangeGroup {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-items:start;
  justify-items:start;
  gap:10px;
  width:100%;
}

.mobile-approval-container .approvalDateRangeGroup .approvalDateSeparator {
  display:none;
}

.mobile-approval-container .approvalDateRangeGroup .approvalDateSelectGroup {
  max-width:100%;
}

.mobile-approval-container .approvalDateRangeGroup .approvalVacationDaysText {
  margin:0;
}

.mobile-approval-container .approvalDetailTable {
  display:table;
  width:100%;
  min-width:560px;
  max-width:none;
  overflow:visible;
}

.mobile-approval-container .approvalDetailGrid {
  grid-template-columns:80px minmax(0, 1fr);
}

.mobile-approval-container .approvalDetailPair,
.mobile-approval-container .approvalDetailPair:nth-child(odd) {
  grid-column:span 2;
  grid-template-columns:80px minmax(0, 1fr);
  border-right:0;
}

.mobile-approval-container .approvalDetailWidePair {
  grid-template-columns:80px minmax(0, 1fr);
}

.mobile-page-container .approvalLineSelectOverlay {
  align-items:flex-end;
  justify-content:center;
  padding:0;
}

.mobile-page-container .approvalLineSelectModal {
  width:100%;
  height:min(60vh, 720px);
  max-height:calc(100vh - 34px);
  border-radius:10px 10px 0 0;
  box-shadow:0 -12px 36px rgba(0, 0, 0, 0.18);
}


.mobile-page-container .approvalDetailPair span {
  min-height: auto;
  padding:13px 0;
}

.mobile-page-container .approvalDetailPair strong {
  min-height: auto;
  padding:13px;
}

.mobile-page-container .approvalDetailSectionTitle {
  margin:20px 0 10px;
}

.mobile-mail-container .desktop-mail-view .mailListWrap {
  border:0;
  padding-bottom: 0;
}

.mobile-mail-container .desktop-mail-view .mailActionBar .actionLeft {
  display:none;
}

.mobile-mail-container .desktop-mail-view .mailActionBar .actionRight {
  width:100%;
}

.mobile-mail-container .desktop-mail-view .mailActionBar {
  display:flex;
  max-height:0;
  padding:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:max-height 0.22s ease, padding 0.22s ease, opacity 0.18s ease, transform 0.22s ease;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-search-open .mailActionBar {
  max-height:56px;
  padding:0 0 16px;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .desktop-mail-header {
  display:none;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .mailActionBar {
  max-height:56px;
  min-height:54px;
  margin:-20px -20px 16px;
  padding:0 20px;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  background:#2d2d2d;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .mobileMailSelectMenuDim {
  position:fixed;
  inset:54px 0 0;
  z-index:9400;
  border:0;
  border-radius:0;
  background:rgba(0, 0, 0, 0.48);
  padding:0;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .mailActionBar .actionLeft {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:18px;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .mailActionBar .actionRight {
  display:none;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .selectAction {
  display:flex;
  align-items:center;
  margin-right:auto;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .selectAllBox {
  display:flex;
  align-items:center;
  gap:0;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .selectAllBox::after {
  content:none;
  white-space:nowrap;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .selectAllBox input[type="checkbox"] {
  width:15px;
  height:15px;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .selectArrowBtn {
  display:none;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  padding:0;
  color:#fff;
  background:transparent;
  border:0;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .selectArrowBtn i::before {
  border-color:#fff;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .mobileMailSelectMenuBtn {
  display:flex;
  align-items:center;
  gap:5px;
  height:54px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .mobileMailSelectMenuBtn i::before {
  border-color:#fff;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .mailActionBar .actionLeft > button,
.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .moveBtn {
  height:54px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .mailActionReplyBtn,
.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .mailActionForwardBtn {
  display:none;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .moveAction {
  display:flex;
  align-items:center;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .moveBtn i::before {
  border-color:#fff;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .selectAction.is-open .selectDropdown {
  display:flex;
  position:fixed;
  left:0;
  right:0;
  top:auto;
  bottom:0;
  z-index:9500;
  flex-direction:column;
  gap:0;
  min-width:0;
  width:100%;
  padding:22px 0 calc(18px + env(safe-area-inset-bottom));
  border:0;
  border-radius:10px 10px 0 0;
  background:#fff;
  box-shadow:0 -12px 28px rgba(0, 0, 0, 0.18);
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .selectDropdown button {
  width:100%;
  height:44px;
  padding:0 20px;
  border:0;
  border-radius:0;
  background:#fff;
  color:#1b1b1b;
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-align:left;
}

.mobile-mail-container .desktop-mail-view .mailActionSearchBox {
  width:100%;
  min-width:0;
  height:40px;
  border-radius:6px;
  border-color:#f5f5f5;
  background-color:#f5f5f5;
}

.mobile-mail-container .desktop-mail-view .mailRow {
  display:grid;
  grid-template-columns:18px minmax(0, 1fr) auto 20px;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:0;
  row-gap:8px;
  padding:15px 0;
  background:transparent;
  border-bottom:1px solid #e8e8e8;
}

.mobile-mail-container .desktop-mail-view .mailRow:last-child {
  border:0;
}

.mobile-mail-container .desktop-mail-view .mailRow.unread {
  background:transparent;
}

.mobile-mail-container .desktop-mail-view .mailRow:hover {
  background:transparent;
}

.mobile-mail-container .desktop-mail-view .col.check {
  display:none;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .col.check {
  display:flex;
  grid-column:1 / 2;
  grid-row:1;
  align-items:center;
  justify-content:flex-start;
  width:18px;
  padding:0;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .col.check input[type="checkbox"] {
  width:15px;
  height:15px;
}

.mobile-mail-container .desktop-mail-view .col.mailIcons {
  display:contents;
}

.mobile-mail-container .desktop-mail-view .col.readState {
  display:none;
}

.mobile-mail-container .desktop-mail-view .col.sender {
  grid-column:1 / 3;
  grid-row:1;
  width:auto;
  min-width:0;
  padding:0;
  color:#9c9c9c;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
}

.mobile-mail-container .desktop-mail-view.mobile-mail-select-mode .col.sender {
  grid-column:2 / 3;
}

.mobile-mail-container .desktop-mail-view .mailRow.unread .col.sender {
  color:#1b1b1b;
}

.mobile-mail-container .desktop-mail-view .mailSenderText {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mobile-mail-container .desktop-mail-view .col.date {
  grid-column:3 / 5;
  grid-row:1;
  width:auto;
  padding:0;
  color:#666;
  font-size:13px;
  font-weight:400;
  line-height:1.2;
  text-align:right;
  white-space:nowrap;
}

.mobile-mail-container .desktop-mail-view .mailRow.read .col.date {
  color:#9c9c9c;
}

.mobile-mail-container .desktop-mail-view .col.subject {
  grid-column:1 / 4;
  grid-row:2;
  min-width:0;
  padding:0;
}

.mobile-mail-container .desktop-mail-view .mailRow:has(.mailAttachSvg) .col.subject {
  grid-column:2 / 4;
}

.mobile-mail-container .desktop-mail-view .col.subject a {
  color:#9c9c9c;
  font-size:14px;
  font-weight:400;
  line-height:1.2;
}

.mobile-mail-container .desktop-mail-view .mailRow.unread .col.subject a {
  color:#1b1b1b;
  font-weight:400;
}

.mobile-mail-container .desktop-mail-view .col.attach {
  display:none;
}

.mobile-mail-container .desktop-mail-view .mailRow:has(.mailAttachSvg) .col.attach {
  grid-column:1 / 2;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:18px;
  min-width:18px;
}

.mobile-mail-container .desktop-mail-view .mailAttachSlot,
.mobile-mail-container .desktop-mail-view .mailAttachSvg {
  width:14px;
  height:14px;
  color:#7f8287;
}

.mobile-mail-container .desktop-mail-view .col.star {
  grid-column:4 / 5;
  grid-row:2;
  width:18px;
  justify-content:flex-end;
}

.mobile-mail-container .desktop-mail-view .col.star button {
  width:16px;
  height:16px;
}

.mobile-mail-container .desktop-mail-view .col.star button svg {
  width:16px;
  height:16px;
}

.mobile-mail-read-container .mobile-page-scroll {
  height: 100%;
  padding-bottom: calc(max(var(--ios-safe-area-bottom, env(safe-area-inset-bottom, 0px)), 0px) + 64px + 15px);
  box-sizing: border-box;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

.mobile-mail-read-container .desktop-mail-view,
.mobile-mail-read-container .desktop-mail-main,
.mobile-mail-read-container .desktop-mail-read,
.mobile-mail-read-container .readViewWrap {
  height:auto;
  min-height:0;
  overflow:visible;
}

.mobile-mail-read-container .desktop-mail-main {
  padding:0 18px calc(max(var(--ios-safe-area-bottom, env(safe-area-inset-bottom, 0px)), 0px) + 80px);
}

.mobile-mail-read-container .desktop-mail-read .mail_topArea {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0;
  padding:0;
  border-bottom:0;
}

.mobile-mail-read-container .desktop-mail-read .mailHeader {
  margin:0;
}

.mobile-mail-read-container .desktop-mail-read .mailReadBackBtn {
  width:auto;
  height:18px;
  border:0;
  border-radius:0;
  background:transparent;
}

.mobile-mail-read-container .desktop-mail-read .mailReadBackBtn svg {
  display:none;
}

.mobile-mail-read-container .desktop-mail-read .mailReadBackImg {
  display:block;
  width:auto;
  height:18px;
  object-fit:contain;
}

.mobile-mail-read-container .desktop-mail-read .readTopBar {
  flex:0 0 auto;
}

.mobile-mail-read-container .desktop-mail-read .readTopBar .actionLeft {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
}

.mobile-mail-read-container .desktop-mail-read .readTopBar .backBtn {
  display:none;
}

.mobile-mail-read-container .desktop-mail-read .readTopBar .actionLeft > button {
  width:18px;
  height:18px;
  min-width:20px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.mobile-mail-read-container .desktop-mail-read .mailReadActionIcon {
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
}

.mobile-mail-read-container .desktop-mail-read .mailReadActionText,
.mobile-mail-read-container .desktop-mail-read .readSubjectWrap .printBtn {
  display:none;
}

.mobile-mail-read-container .desktop-mail-read .readViewHeader {
  padding:30px 0 15px;
  border-bottom:1px solid #e8e8e8;
}

.mobile-mail-read-container .desktop-mail-read .readViewLeft {
  gap:8px;
}

.mobile-mail-read-container .desktop-mail-read .mailStarBtn {
  width:20px;
  height:20px;
  margin:3px 0 0;
}

.mobile-mail-read-container .desktop-mail-read .mailStarBtn svg {
  width:20px;
  height:20px;
}

.mobile-mail-read-container .desktop-mail-read .readSubject {
  font-size:18px;
  font-weight:600;
  line-height:1.35;
}

.mobile-mail-read-container .desktop-mail-read .readDate {
  margin:5px 0 0;
  color:#666;
  font-size:14px;
  line-height:1.25;
}

.mobile-mail-read-container .desktop-mail-read .readMeta {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:15px 0 0;
}

.mobile-mail-read-container .desktop-mail-read .readMeta dl {
  display:grid;
  grid-template-columns:62px minmax(0, 1fr);
  gap:0;
  margin:0;
}

.mobile-mail-read-container .desktop-mail-read .readMeta dt {
  color:#1b1b1b;
  font-size:13px;
  font-weight:600;
  line-height:1.25;
}

.mobile-mail-read-container .desktop-mail-read .readMeta dd {
  color:#1b1b1b;
  font-size:13px;
  font-weight:400;
  line-height:1.25;
}

.mobile-mail-read-container .desktop-mail-read .readBodyWrap {
  padding:15px 0 5px;
}

.mobile-mail-read-container .desktop-mail-read .readBody {
  min-height:0;
  font-size:15px;
  line-height:1.65;
}

.mobile-mail-read-container .readBody,
.mobile-mail-read-container .readBody * {
  -webkit-user-select:text;
  user-select:text;
  touch-action:auto;
}

.mobile-page-scroll .desktop-mail-main {
  padding:20px 20px 0;
}

.mobile-page-scroll .desktop-mail-folder-title {
  font-size:18px;
}

.mobile-page-scroll .desktop-mail-folder-toggle svg {
  width: 16px;
  height: 16px;
}

.mobile-mail-container .desktop-mail-folder-toggle svg {
  display:none;
}

.mobile-page-scroll .desktop-mail-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0 12px;
}

.mobile-mail-container .mobile-mail-header-actions {
  display:flex;
  align-items:center;
  gap:15px;
  flex:0 0 auto;
}

.mobile-mail-container .mobile-mail-header-icon-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#1b1b1b;
}

.mobile-mail-container .mobile-mail-header-icon-btn svg {
  display:block;
  width:22px;
  height:22px;
  fill:currentColor;
}


.mobile-mail-container .mobile-mail-compose-btn {
  display:none;
  flex:0 0 auto;
  min-width:78px;
  height:34px;
  padding:0 14px;
  border-radius:8px;
  font-size:12px;
}

.mobile-mail-container .mobile-mail-compose-fab {
  position:fixed;
  right:20px;
  bottom:calc(84px + var(--ios-safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  z-index:9100;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#0373f0;
  box-shadow:0 8px 20px rgba(3, 115, 240, 0.28);
}

.mobile-mail-container .mobile-mail-compose-fab svg {
  display:block;
  width:20px;
  height:20px;
  fill:#fff;
}

.mobile-mail-container .mobile-mail-sidebar-layer {
  position:fixed;
  inset:0;
  z-index:9200;
  pointer-events:none;
}

.mobile-mail-container .mobile-mail-sidebar-layer.is-open {
  pointer-events:auto;
}

.mobile-mail-container .mobile-mail-sidebar-dim {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:0;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  background-color:#0006;
  opacity:0;
  transition:opacity 0.22s ease;
}

.mobile-mail-container .mobile-mail-sidebar-layer.is-open .mobile-mail-sidebar-dim {
  opacity:1;
}

.mobile-mail-container .mobile-mail-sidebar {
  position:absolute;
  top:0;
  right:0;
  display:flex;
  flex-direction:column;
  width:min(78vw, 296px);
  height:100%;
  padding:30px 0;
  background:#fff;
  box-sizing:border-box;
  transform:translateX(100%);
  transition:transform 0.24s ease;
}

.mobile-mail-container .mobile-mail-sidebar-layer.is-open .mobile-mail-sidebar {
  transform:translateX(0);
}

.mobile-mail-container .mobile-mail-sidebar-usage {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  height:auto;
  color:#505050;
  font-size:12px;
  margin:0 20px;
  font-weight:400;
  line-height:1.2;
}

.mobile-mail-container .mobile-mail-sidebar-usage strong {
  color:#0373f0;
  font-size:12px;
  font-weight:500;
}

.mobile-mail-container .mobile-mail-sidebar-profile {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 20px 20px;
  border-bottom:1px solid #e8e8e8;
}

.mobile-mail-container .mobile-mail-sidebar-avatar {
  flex:0 0 auto;
  width:42px;
  height:42px;
  overflow:hidden;
  border-radius:50%;
  background:#dfe7f1;
}

.mobile-mail-container .mobile-mail-sidebar-avatar img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.mobile-mail-container .mobile-mail-sidebar-user {
  min-width:0;
}

.mobile-mail-container .mobile-mail-sidebar-user strong,
.mobile-mail-container .mobile-mail-sidebar-user span {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mobile-mail-container .mobile-mail-sidebar-user strong {
  color:#1b1b1b;
  font-size:14px;
  font-weight:600;
  line-height:1.25;
}

.mobile-mail-container .mobile-mail-sidebar-user span {
  margin-top:2px;
  color:#9c9c9c;
  font-size:13px;
  font-weight:400;
  line-height:1.2;
}

.mobile-mail-container .mobile-mail-sidebar-nav {
  display:flex;
  flex-direction:column;
  gap:0;
  padding:10px 0 0;
}

.mobile-mail-container .mobile-mail-sidebar-nav button {
  display:flex;
  align-items:center;
  width:100%;
  border:0;
  border-radius:0;
  background:transparent;
  color:#1b1b1b;
  font-size:14px;
  font-weight:400;
  line-height:1.2;
  text-align:left;
  height:40px;
  padding:0 20px;
}

.mobile-mail-container .mobile-mail-sidebar-nav button.active {
  color:#0373f0;
  font-weight:600;
}

.mobile-mail-container .mobile-mail-sidebar-nav .mobile-mail-sidebar-add {
  gap:5px;
  margin:10px 0 0;
  padding-top: 10px;
  color:#1b1b1b;
  border-top:1px solid #e8e8e8;
}

.mobile-mail-container .mobile-mail-sidebar-add span {
  color:inherit;
  font:inherit;
  line-height:inherit;
}

.mobile-mail-container .desktop-mail-compose-main {
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  padding:20px;
  overflow-x:hidden;
}

.mobile-mail-container .desktop-mail-compose-main .desktop-mail-view,
.mobile-mail-container .desktop-mail-compose-main .composePage {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
}

.mobile-mail-container .desktop-mail-compose-main .composeTopBar {
  display:flex;
  max-height:none;
  padding:0;
  opacity:1;
  overflow:visible;
  transform:none;
  pointer-events:auto;
  transition:none;
}

.mobile-mail-container .desktop-mail-compose-main .composeTopBar .actionLeft {
  display:flex;
  align-items:center;
  gap:20px;
  width:auto;
}

.mobile-mail-container .desktop-mail-compose-main .mailComposeBackBtn {
  flex:0 0 10px;
  width:auto;
  height:18px;
  border:0;
  border-radius:0;
  background:transparent url('/img/back_img.png') no-repeat center / auto 18px;
}

.mobile-mail-container .desktop-mail-compose-main .mailComposeBackBtn svg {
  display:none;
}

.mobile-mail-container .desktop-mail-compose-main .composeTopBar .actionLeft > button {
  min-width:auto;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#666;
  font-size:14px;
  line-height:1.2;
}

.mobile-mail-container .desktop-mail-compose-main .composeTopBar .actionLeft button.sendBtn {
  min-width:auto;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#1b1b1b;
  font-size:14px;
  font-weight: 600;
  line-height:1.2;
}

.mobile-mail-container .desktop-mail-compose-main .composeTopBar .actionLeft > button:disabled {
  background:transparent;
  color:#a6a6a6;
  opacity:1;
}

.mobile-mail-container .desktop-mail-compose-main .composeDraftStatusArea {
  align-items:flex-end;
  margin-top:10px;
  gap:4px;
}

.mobile-mail-container .desktop-mail-compose-main .draftStatusSubText {
  font-size:11px;
  line-height:1.25;
  text-align:right;
}

.mobile-mail-container .desktop-mail-compose-main .composeWrap {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  padding:0;
  border-color:#e8e8e8;
}

.mobile-mail-container .desktop-mail-compose-main .composeRow {
  display:block;
  align-items:center;
  margin:0;
}

.mobile-mail-container .desktop-mail-compose-main .composeRow strong {
  display:none;
}

.mobile-mail-container .desktop-mail-compose-main .composeField {
  width:100%;
  min-width:0;
}

.mobile-mail-container .desktop-mail-compose-main .subjectComposeField {
  position:relative;
}

.mobile-mail-container .desktop-mail-compose-main .composeField input[type=text] {
  height:44px;
  border-radius:0;
  font-size:13px;
  border:0;
  padding:0 5px;
  border-bottom: 1px solid #e8e8e8;
}

.mobile-mail-container .desktop-mail-compose-main .subjectComposeField input[type=text] {
  padding-right:38px;
}

.mobile-mail-container .desktop-mail-compose-main .mobileComposeAttachBtn {
  position:absolute;
  right:0;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  background:transparent;
}

.mobile-mail-container .desktop-mail-compose-main .mobileComposeAttachBtn svg {
  display:block;
  width:18px;
  height:18px;
  stroke:#666;
}

.mobile-mail-container .desktop-mail-compose-main .receiverWrap {
  gap:0;
  min-height:44px;
  padding:0;
  border:0;
  border-bottom:1px solid #e8e8e8;
  border-radius:0;
  flex-wrap:wrap;
  font-size:13px;
}

.mobile-mail-container .desktop-mail-compose-main .receiverWrap input[type=text] {
  border:0;
}

.mobile-mail-container .desktop-mail-compose-main .receiverTags {
  flex-wrap:wrap;
}

.mobile-mail-container .desktop-mail-compose-main .receiverAutoWrap,
.mobile-mail-container .desktop-mail-compose-main .receiverWrap input.receiverInput {
  min-width:0;
}

.mobile-mail-container .desktop-mail-compose-main .receiverAutoList {
  width:min(100%, 280px);
}

.mobile-mail-container .desktop-mail-compose-main .composeRow.fileRow {
  align-items:start;
  margin:8px 0 0;
}

.mobile-mail-container .desktop-mail-compose-main .composeRow.fileRow.isEmpty {
  height:0;
  margin:0;
  overflow:hidden;
}

.mobile-mail-container .desktop-mail-compose-main .fileActionBar {
  position:static;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:6px;
}

.mobile-mail-container .desktop-mail-compose-main .fileBtn,
.mobile-mail-container .desktop-mail-compose-main .fileDeleteBtn {
  display:none;
}

.mobile-mail-container .desktop-mail-compose-main .fileInfoText {
  position:static;
  flex:0 0 100%;
  color:#666;
  font-size:11px;
  line-height:1.25;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:anywhere;
  text-align:right;
  margin:5px 0 0;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap {
  width:100%;
  margin:8px 0 0;
  padding:10px;
  border-color:#dedede;
  border-radius:6px;
  box-sizing:border-box;
}

.mobile-mail-container .desktop-mail-compose-main .desktop-mail-read.readAttachments.composeAttachWrap {
  margin:10px 0 20px;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap .readAttachHeader {
  display:flex;
  align-items:center;
  width:100%;
  height:auto;
  gap:10px;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap .attachHeaderTitle {
  display:inline-flex;
  align-items:center;
  height:auto;
  color:#1b1b1b;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  flex:0 0 auto;
  margin:0;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap .attachHeaderDivider {
  display:block;
  width:1px;
  height:12px;
  flex:0 0 1px;
  background:#dedede;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap .attachAllDownloadBtn {
  width:auto;
  height:auto;
  color:#606060;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap .attachList {
  margin:8px 0 0;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap .attachItem {
  margin:0;
}

.mobile-mail-container .desktop-mail-compose-main .desktop-mail-read .composeAttachBtn {
  min-width:0;
  gap:8px;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap .attachTypeIcon {
  flex:0 0 auto;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap .attachFileName {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mobile-mail-container .desktop-mail-compose-main .composeAttachWrap .attachSize {
  flex:0 0 auto;
  margin-left:auto;
  color:#9c9c9c;
}

.mobile-mail-container .desktop-mail-compose-main .desktop-mail-read .composeFileDel {
  width:18px;
  height:18px;
  margin-left:8px;
}

.mobile-mail-container .desktop-mail-compose-main .desktop-mail-read .composeFileDel svg {
  width:14px;
  height:14px;
  fill:#1b1b1b;
}

.mobile-mail-container .desktop-mail-compose-main .composeEditor {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  padding:0;
}

.mobile-mail-container .desktop-mail-compose-main .composeEditorWrap {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  border:0;
  border-radius:0;
}

.mobile-mail-container .desktop-mail-compose-main .tiptapToolbar {
  gap:6px;
  padding:10px;
  border-bottom-color:#dedede;
}

.mobile-mail-container .desktop-mail-compose-main .tt-fontsize {
  min-width:82px;
  height:30px;
}

.mobile-mail-container .desktop-mail-compose-main .tt-btn {
  width:30px;
  height:30px;
  padding:0;
}

.mobile-mail-container .desktop-mail-compose-main .mailProseMirror {
  flex:1 1 auto;
  min-height:0;
  padding:18px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-mail-container .desktop-mail-compose-main .editorPlaceholder {
  left:18px;
  top:70px;
}

.mobile-mail-container .mail-compose-footer {
  display:none;
}

.mobile-calendar-container .calendar-view-container {
  min-height:100%;
  height:auto;
  padding-bottom:96px;
  overflow:visible;
}

.mobile-calendar-container .calendar-main-content {
  min-height:100%;
  height:auto;
  overflow:visible;
}

.mobile-calendar-container .calendar-main-header {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  padding:20px;
}

.mobile-calendar-container .calendar-header-left {
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:5px;
  width:100%;
}

.mobile-calendar-container .calendar-year-month {
  position:absolute;
  left:50%;
  top:50%;
  order:initial;
  flex:initial;
  min-width:auto;
  margin:0;
  color:#1b1b1b;
  font-size:18px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  transform:translate(-50%, -50%);
  pointer-events:none;
}

.mobile-calendar-container .calendar-header-create-btn {
  order:4;
  margin-left:auto;
  width:30px;
  height:30px;
  border-radius:6px;
}

.mobile-calendar-container .calendar-header-today-btn {
  order:1;
  flex:0 0 auto;
  height:30px;
  padding:0 10px;
  border-color:#dedede;
  border-radius:6px;
  font-size:12px;
}

.mobile-calendar-container .calendar-header-nav-group {
  order:2;
  flex:0 0 auto;
  height:30px;
  border-color:#dedede;
  border-radius:8px;
}

.mobile-calendar-container .calendar-header-nav-arrow {
  width:30px;
}

.mobile-calendar-container .calendar-header-right {
  display:block;
  width:100%;
}

.mobile-calendar-container .calendar-segment-control {
  width:100%;
  height:40px;
  padding:6px;
  border-radius:10px;
  box-sizing:border-box;
}

.mobile-calendar-container .calendar-segment-control .segment-btn {
  flex:1 1 0;
  min-width:0;
  height:28px;
  padding:0 8px;
  border-radius:7px;
  font-size:12px;
  white-space:nowrap;
}

.mobile-calendar-container .calendar-grid-wrapper {
  display:block;
  flex:0 0 auto;
  min-height:0;
  padding:10px 20px 20px;
  overflow:visible;
}

.mobile-calendar-container .calendar-grid-header {
  padding-bottom:8px;
}

.mobile-calendar-container .calendar-grid-header-cell {
  font-size:13px;
  font-weight:normal;
}

.mobile-calendar-container .calendar-grid-body {
  min-height:560px;
  border-left:1px solid #e8e8e8;
}

.mobile-calendar-container .calendar-grid-cell {
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  min-width:0;
  padding:8px 2px;
  text-align:center;
}

.mobile-calendar-container .cell-header {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-width:0;
}

.mobile-calendar-container .cell-date-num {
  width:30px;
  height:30px;
  font-size:14px;
  font-weight:500;
}

.mobile-calendar-container .cell-holiday-label {
  display:block;
  max-width:100%;
  margin:2px 0 0;
  font-size:11px;
  font-weight:500;
  line-height:1.15;
  white-space:nowrap;
}

.mobile-calendar-container .cell-events-list {
  width:100%;
  min-height:0;
  overflow:hidden;
}

.mobile-calendar-container .calendar-event-badge {
  min-width:0;
  padding:2px 4px;
  border-radius:4px;
  font-size:10px;
}

.mobile-bottom-nav {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:99999;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  align-items:center;
  min-height:64px;
  padding-top:6px;
  padding-left:10px;
  padding-right:10px;
  *padding-bottom:max(var(--ios-safe-area-bottom, env(safe-area-inset-bottom, 0px)), 8px);
  background-color:#fff;
  border-top:1px solid #e8e8e8;
  box-sizing:border-box;
}

.mobile-bottom-nav-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  min-height:52px;
  padding:4px 2px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#9c9c9c;
  font-size:10px;
  font-weight:500;
  line-height:1;
}

.mobile-bottom-nav-btn.active {
  color:#1b1b1b;
}

.mobile-bottom-nav-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:20px;
  height:20px;
}

.mobile-bottom-nav-badge {
  position:absolute;
  top:-7px;
  right:-10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:15px;
  height:15px;
  padding:0 4px;
  box-sizing:border-box;
  border-radius:8px;
  background-color:#007aff;
  color:#fff;
  font-size:10px;
  font-weight:500;
  line-height:1;
}

.mobile-bottom-nav-label {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

.mobile-home-container .desktop-home-view.homePage .dashboardHome {
  gap:25px;
  width:100%;
}

.mobile-home-container .desktop-home-view.homePage .dashboardHomeColumn {
  gap:20px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardGreeting {
  margin-bottom:15px;
  font-size:18px;
  line-height:1.25;
}

.mobile-home-container .desktop-home-view.homePage .dashboardSummaryCards {
  flex-direction:row;
  gap:10px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardAttendanceBox,
.mobile-home-container .desktop-home-view.homePage .dashboardTodayBox {
  flex:1 1 0;
  width:auto;
  min-width:0;
  min-height:0;
  padding:14px 12px;
  background-color:#fff;
}

.mobile-home-container .desktop-home-view.homePage .dashboardNowLabel {
  line-height:1.25;
  margin-bottom:16px;
  font-size:12px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardAttendanceStateLabel {
  font-size:11px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardAttendanceCurrent {
  margin-bottom:16px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardAttendanceCurrentValue {
  font-size:24px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardActionBtn {
  width:100%;
  min-width:0;
  height:42px;
  font-size:14px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardTodayMessage {
  font-size:12px;
  line-height:1.35;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniStats {
  gap:12px;
  margin-top:10px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniStats div {
  min-width:0;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniStats dt {
  font-size:12px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniStats dd {
  font-size:14px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardSectionHead {
  align-items:center;
  margin:0 20px 20px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMailList {
  margin:0 15px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardSectionTitle {
  font-size:18px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardSectionTitleArrow {
  width: 20px;
  height: 20px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMailMeta {
  flex:0 0 auto;
  font-size:12px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMailItem {
  grid-template-columns:42px minmax(0, 1fr) auto;
  gap:10px;
  min-height:70px;
  padding:15px 0;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMailItem:first-child {
  padding-top:0;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMailItem:last-child {
  padding-bottom:0;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMailIconBox {
  width:38px;
  height:38px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMailMain {
  gap:5px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMailDate {
  grid-column:3;
  justify-self:end;
  align-self:start;
  margin-top:7px;
  font-size:12px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardApprovalItem {
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:flex-start;
}

.mobile-home-container .desktop-home-view.homePage .dashboardApprovalItem:first-child {
  padding-top:5px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardApprovalItem:last-child {
  border:0;
  padding-bottom:5px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardApprovalDate {
  white-space:normal;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniCalendarDay {
  border-radius:6px;
  font-size:13px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniAgenda {
  grid-template-columns:34px minmax(0, 1fr);
  gap:12px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardCard--mail::after,
.mobile-home-container .desktop-home-view.homePage .dashboardCard--approval::after,
.mobile-home-container .desktop-home-view.homePage .dashboardCard--miniCalendar::after {
  content:"";
  display:block;
  width:calc(100% + 20px);
  height:10px;
  margin:20px -20px 0;
  background:#f8f8f8;
}

.mobile-home-container .desktop-home-view.homePage .dashboardHome .dashboardCard {
  border: 0;
  border-radius: 0;
  padding: 0;
}

.mobile-home-container .desktop-home-view.homePage .dashboardHome .dashboardCard.mobileDashboardSummarySection {
  background:#f8f8f8;
  padding:30px 20px 20px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardCardIcon {
  width:18px;
  height:18px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniCalendarHead {
  margin:0 10px 30px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniCalendarMonth {
  font-size:16px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniCalendarWeekdays {
  margin:0 10px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniCalendarWeekdays,
.mobile-home-container .desktop-home-view.homePage .dashboardMiniCalendarGrid {
  margin:0 10px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardMiniAgenda {
  margin:20px 20px 0;
}

.mobile-home-container .desktop-home-view.homePage .dashboardApprovalList {
  margin:0 20px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardHome .dashboardCard.dashboardCard--birthdays .dashboardSectionHead {
  margin:0 20px 20px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardBirthdayList {
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  margin:0 20px;
}

.mobile-home-container .desktop-home-view.homePage .dashboardBirthdayList::-webkit-scrollbar {
  display:none;
}

.mobile-home-container .desktop-home-view.homePage .dashboardBirthdayTrack {
  user-select:none;
}

.mobile-home-container .desktop-home-view.homePage .dashboardBirthdayPage {
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.mobile-messenger-container .screen-header {
  padding:20px;
}

.mobile-chat-add-img {
  display:none;
}

.mobile-messenger-container .screen-header.main-dashboard-header .header-actions .icon-btn {
  width:26px;
  height:26px;
  padding:0;
  border-radius:6px;
}

.mobile-messenger-container .screen-header.main-dashboard-header .header-actions .icon-btn svg {
  display:none;
}

.mobile-messenger-container .screen-header.main-dashboard-header .header-actions .icon-btn .mobile-chat-add-img {
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
}

.mobile-messenger-container .search-bar-container {
  margin:0 20px 10px;
}

.mobile-messenger-container .chat-list-item {
  padding:12px 20px;
}

.mobile-chat-room-container .chat-room-screen .screen-header {
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 20px;
}

.mobile-chat-room-container .chat-search-bar {
  padding:2px 20px 15px;
}

.mobile-chat-room-container .chat-messages {
  padding:10px 20px;
}

.mobile-chat-room-container .chat-input-box-container {
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}

.mobile-chat-room-container .chat-input-box-container textarea {
  min-height: 80px;
  font-size:14px;
  padding:15px 20px 10px;
  line-height:1.4;
}

.mobile-chat-room-container .chat-input-box-container .chat-composer-highlight {
  min-height: 80px;
  font-size:14px;
  padding:15px 20px 10px;
  line-height:1.4;
}

.mobile-chat-room-container .chat-input-actions {
  margin:0 20px;
}

.mobile-chat-room-container .emoticon-drawer-grid {
  grid-template-columns: repeat(4, 1fr);
  padding:0 10px 10px;
}

.mobile-chat-room-container .message-bubble,
.mobile-chat-room-container .message-bubble * {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.mobile-chat-room-container .chat-message-context-menu {
  width:130px;
}

.mobile-chat-room-container .chatMessageContextPanel {
  border-color:#dedede;
  border-radius:10px;
  padding:6px 0;
  box-shadow:none;
}

.mobile-chat-room-container .chatMessageContextBtn {
  height:32px;
  gap:8px;
  padding:0 15px;
  font-size:13px;
  font-weight: normal;
}

.mobile-chat-room-container .chatMessageContextIcon {
  width:18px;
  height:18px;
}

.mobile-chat-room-container .chatMessageContextIcon svg {
  width:18px;
  height:18px;
}

.mobile-chat-room-container .chatMessageContextReactionBar {
  height:38px;
  margin-top:6px;
  border-color:#dedede;
  border-radius:10px;
  gap:8px;
  padding:0 8px;
}

.mobile-chat-room-container .chatMessageContextReactionBtn {
  width:18px;
  height:18px;
}

.mobile-chat-room-container .chatMessageContextReactionBtn img {
  width:18px;
  height:18px;
}

.mobile-chat-room-container .chat-reply-preview-container {
  background-color:#fff;
}

.mobile-calendar-container .invite-modal-overlay {
  align-items:flex-end;
  justify-content:center;
  padding:24px 0 0;
  box-sizing:border-box;
}

.mobile-calendar-container .calendar-detail-overlay {
  align-items:flex-end;
  justify-content:center;
  padding:24px 0 0;
  box-sizing:border-box;
}

.mobile-calendar-container .calendar-detail-modal {
  width:100%;
  max-width:100%;
  max-height:calc(100dvh - 24px);
  margin:0;
  border-color:#dedede;
  border-width:1px 0 0;
  border-radius:10px 10px 0 0;
  padding:20px 20px calc(25px + env(safe-area-inset-bottom, 0px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-calendar-container .calendar-create-modal {
  width:100%;
  max-width:100%;
  max-height:calc(100dvh - 24px);
  margin:0;
  border-color:#dedede;
  border-width:1px 0 0;
  border-radius:10px 10px 0 0;
  padding:20px 20px calc(25px + env(safe-area-inset-bottom, 0px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-calendar-container .calendar-modal-title-input {
  font-size:16px;
  font-weight: 500;
}

.mobile-calendar-container .calendar-modal-icon-wrapper {
  width:20px;
  height:20px;
}

.mobile-calendar-container .calendar-modal-custom-picker,
.mobile-calendar-container .picker-value-text {
  font-weight: normal;
}

.mobile-calendar-container .calendar-modal-input-field,
.mobile-calendar-container .calendar-modal-select-field {
  font-weight: normal;
}

.mobile-calendar-container .calendar-modal-color-chip {
  width:18px;
  height:18px;
}

.mobile-calendar-container .calendar-create-modal .partner-profile-header {
  flex:0 0 auto;
}

.mobile-calendar-container .calendar-modal-form-body {
  min-height:0;
}

@media (width<=1020px) {
  .mobile-home-container .modal-close-dot,
  .mobile-page-container .modal-close-dot,
  .mobile-messenger-container .modal-close-dot,
  .mobile-chat-room-container .modal-close-dot,
  .mobile-home-container div.edit-profile-modal .modal-close-dot,
  .mobile-page-container div.edit-profile-modal .modal-close-dot,
  .mobile-messenger-container div.edit-profile-modal .modal-close-dot,
  .mobile-chat-room-container div.edit-profile-modal .modal-close-dot,
  .mobile-home-container .edit-profile-modal .member-select-modal .modal-close-dot,
  .mobile-page-container .edit-profile-modal .member-select-modal .modal-close-dot,
  .mobile-messenger-container .edit-profile-modal .member-select-modal .modal-close-dot,
  .mobile-chat-room-container .edit-profile-modal .member-select-modal .modal-close-dot,
  .mobile-page-container .desktop-mail-view .myMailManageClose,
  .mobile-page-container .approvalLineSelectCloseBtn,
  .mobile-page-container .teamboard-detail-close-dot {
    width:20px;
    height:20px;
    background-color:#fff;
    border-radius:0;
  }

  .mobile-home-container .modal-close-dot::before,
  .mobile-page-container .modal-close-dot::before,
  .mobile-messenger-container .modal-close-dot::before,
  .mobile-chat-room-container .modal-close-dot::before,
  .mobile-page-container .desktop-mail-view .myMailManageClose::before,
  .mobile-page-container .approvalLineSelectCloseBtn::before,
  .mobile-page-container .teamboard-detail-close-dot::before {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:20px;
    height:20px;
    transform:translate(-50%, -50%);
    background-color:#1b1b1b;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='%231b1b1b' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='%231b1b1b' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-size:contain;
  }
}


.mobile-page-container .list-header-title { 
  padding:20px; 
}

.mobile-page-container .desktop-more-profile-card { 
  padding:10px;
  margin:0 20px 20px; 
}

.mobile-more-container .desktop-more-profile-card .profile-card-right {
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}

.mobile-more-container .desktop-more-profile-card .profile-card-action-btn {
  width:90px;
  min-height:32px;
  white-space:normal;
  line-height:1.25;
}

.mobile-page-container .more-section-title {
  margin:0 20px;
}

.mobile-page-container .more-tree-container {
  margin:20px;
}

.mobile-messenger-container .edit-profile-modal {
  width:100%;
  border-radius: 0;
  padding:15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.mobile-home-container .profile-edit-modal,
.mobile-page-container .profile-edit-modal,
.mobile-messenger-container .profile-edit-modal,
.mobile-chat-room-container .profile-edit-modal {
  align-self:flex-end;
  width:100%;
  max-width:100%;
  margin:0;
  border-radius:10px 10px 0 0;
  padding:15px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .attendance-main-header {
  padding:20px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .welcomePanel .weekTime h3 {
  font-size:14px;
  font-weight:500;
} 

.mobile-page-container .desktop-attendance-view.commuteSheet .welcomePanel .weekTime p {
  font-size:14px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .attendGraphDate {
  font-size:16px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .attendGraphSummaryInline {
  margin:10px 0 0;
  font-size:13px;
  row-gap:5px;
  column-gap:10px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .attendTimelineCard {
  padding:30px 20px 20px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .attendTimelineBar {
  font-size:11px;
  padding:0 8px;
  height:30px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .commuteVacationDivider {
  display:block;
  width:auto;
  height:18px;
  margin:0 -30px 45px;
  background-color:#f7f7f7;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .absenceWelcome h3 {
  font-size:15px;
  font-weight: 600;
  line-height: 1;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .absenceInfoRow .summary_day p {
  color:#666;
  line-height: 1.2;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .absenceInfoRow .absenceInfoChip.day_s {
  padding:15px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .absenceInfoRow .absenceInfoChip.day_s h3 {
  font-size:13px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .attendPanelHead {
  justify-content: flex-end;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .absenceSearchBtn {
  padding: 0 8px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .attendHistoryTable th {
  height: 34px;
}

.mobile-page-container .desktop-attendance-view.commuteSheet .attendHistoryTable td {
  height: 44px;
}

.mobile-page-container .approvalDraftLineContainer {
  margin-bottom: 30px;
}

.mobile-page-container .partner-profile-header {
  margin: 5px 0 30px;
}

.mobile-page-container .teamboard-detail-modal {
  padding:20px;
}

html.windows-native-app .modal-close-dot,
html.windows-native-app .admin-modal-content .modal-header .close-modal-btn,
html.windows-native-app .desktop-mail-view .myMailManageClose,
html.windows-native-app .approvalLineSelectCloseBtn,
html.windows-native-app .teamboard-detail-close-dot {
  width:13px;
  height:13px;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-image:url('/img/close_img.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:13px 13px;
  font-size:0;
}

html.windows-native-app .modal-close-dot::before,
html.windows-native-app .admin-modal-content .modal-header .close-modal-btn::before,
html.windows-native-app .desktop-mail-view .myMailManageClose::before,
html.windows-native-app .approvalLineSelectCloseBtn::before,
html.windows-native-app .teamboard-detail-close-dot::before {
  content:none;
  display:none;
}

html.android-native-app .modal-close-dot,
html.android-native-app .admin-modal-content .modal-header .close-modal-btn,
html.android-native-app .desktop-mail-view .myMailManageClose,
html.android-native-app .approvalLineSelectCloseBtn,
html.android-native-app .teamboard-detail-close-dot {
  width:13px;
  height:13px;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-image:url('/img/close_img.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:13px 13px;
  font-size:0;
}

html.android-native-app .modal-close-dot::before,
html.android-native-app .admin-modal-content .modal-header .close-modal-btn::before,
html.android-native-app .desktop-mail-view .myMailManageClose::before,
html.android-native-app .approvalLineSelectCloseBtn::before,
html.android-native-app .teamboard-detail-close-dot::before {
  content:none;
  display:none;
}

/* 모바일 하단 바텀 시트 팝업 공통 디자인 */
@keyframes mobileBottomSheetSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.mobile-bottom-sheet-overlay {
  align-items: flex-end !important;
  justify-content: center !important;
}

.mobile-bottom-sheet-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08) !important;
  animation: mobileBottomSheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-sizing: border-box !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 내부 리스트 및 스크롤 영역 레이아웃 동기화 */
.mobile-bottom-sheet-card .member-select-modal {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

.mobile-bottom-sheet-card .member-select-list,
.mobile-bottom-sheet-card .forward-modal-list {
  flex: 1 !important;
  overflow-y: auto !important;
  max-height: 50vh !important;
}