/* stway.net desktop task menu: vertical sidebar -> horizontal top bar */

#layout-menu .popover-header #logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

#taskmenu .special-buttons .user-email {
    display: inline-flex;
    align-items: center;
    padding: 0 .5rem;
    font-size: .9rem;
    white-space: nowrap;
    color: #fff;
}

@media screen and (min-width: 481px) {
    #layout {
        position: relative;
    }

    #layout > #layout-sidebar,
    #layout > #layout-list,
    #layout > #layout-content {
        height: calc(100% - 50px);
        margin-top: 50px;
    }

    #layout-menu {
        position: absolute !important;
        top: 0;
        right: 0;
        left: 0 !important;
        z-index: 100;
        display: flex !important;
        width: 100% !important;
        height: 50px;
        box-sizing: border-box;
        overflow: hidden;
        border-right: 0 !important;
        border-bottom: 1px solid #2a373c;
    }

    #layout-menu .popover-header {
        display: flex !important;
        flex: 0 0 130px;
        align-items: center;
        justify-content: center;
        width: 130px;
        height: 100%;
        line-height: normal;
    }

    #layout-menu .popover-header #logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        line-height: normal;
        text-decoration: none;
    }

    #layout-menu .popover-header #logo {
        max-width: 120px;
        max-height: 46px;
        padding: .2rem;
    }

    #layout-menu .popover-header .cancel {
        display: none !important;
    }

    #taskmenu {
        display: flex !important;
        flex: 1;
        align-items: stretch;
        height: 100%;
        min-height: 0;
    }

    #taskmenu > a,
    #taskmenu > span,
    #taskmenu .action-buttons,
    #taskmenu .special-buttons {
        display: flex !important;
        align-items: stretch;
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
    }

    #taskmenu .special-buttons {
        position: static !important;
        margin-left: auto;
        align-items: center;
        gap: .35rem;
        padding-right: .5rem;
    }

    #taskmenu .special-buttons .user-email {
        display: inline-flex;
        align-items: center;
        max-width: 220px;
        padding: 0 .5rem;
        color: #fff;
        font-size: .9rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 1;
    }

    #taskmenu a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        height: 100% !important;
        min-width: 70px;
        padding: 0 .85rem !important;
        line-height: normal !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    #taskmenu a::before {
        float: none !important;
        width: 1.2em !important;
        height: auto !important;
        margin: 0 .35rem 0 0 !important;
        line-height: normal !important;
    }

    #taskmenu span.inner {
        display: inline !important;
        padding: 0 !important;
    }

    /* Logout: icon + label color only (no background pill) */
    #taskmenu a.logout,
    #taskmenu a.logout::before,
    #taskmenu a.logout .inner {
        background: transparent !important;
        color: #93d1ff !important;
    }

    #taskmenu a.logout:hover,
    #taskmenu a.logout:focus,
    #taskmenu a.logout:hover::before,
    #taskmenu a.logout:focus::before,
    #taskmenu a.logout:hover .inner,
    #taskmenu a.logout:focus .inner {
        background: transparent !important;
        color: #c5e7ff !important;
    }
}

/* Narrow folder sidebar as much as practical */
@media screen and (min-width: 481px) {
    #layout-sidebar {
        min-width: 140px !important;
        max-width: 220px;
    }

    #layout-sidebar #mailboxlist li > a {
        padding-left: .55rem;
        padding-right: .45rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #layout-sidebar #mailboxlist li.mailbox.unread > a {
        padding-right: 2.4em;
    }

    #layout-sidebar #mailboxlist li.has-empty-btn > a {
        padding-right: 3.4em;
    }

    #layout-sidebar #mailboxlist li.has-empty-btn > a > .unreadcount {
        right: 3.1em;
    }

    #layout-sidebar #mailboxlist .unreadcount {
        min-width: 1.6em;
        padding: 0 .25em;
        font-size: .78rem;
        background: #77a18c !important;
        color: #fff !important;
    }

    #layout-sidebar #mailboxlist button.folder-empty-btn {
        right: 10px;
        padding: 0 .28em;
        font-size: .65rem;
    }
}

/* Unread badge color */
.folderlist li.mailbox .unreadcount,
#mailboxlist .unreadcount {
    background: #77a18c !important;
    color: #fff !important;
}

/* Divider between message header and body */
#message-header {
    padding-left: 10px;
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid #d8dde3;
}

#message-header > .subject {
    font-size: calc(1.5rem - 2px);
}

#message-header > .header {
    align-items: center;
}

#message-header > .header img.contactphoto {
    align-self: center;
}

/* Message header action links + contact/extwin */
#message-header .header-links a,
#message-header .header-links a::before,
#message-header .header-links a .inner,
#message-header a.rcmContactAddress,
#message-header > .subject a.extwin,
#message-header > .subject a.extwin::before,
#message-header > .subject a.extwin .inner {
    color: #769aab !important;
}

#message-header .header-links a:hover,
#message-header .header-links a:hover::before,
#message-header .header-links a:hover .inner,
#message-header .header-links a:focus,
#message-header .header-links a:focus::before,
#message-header .header-links a:focus .inner,
#message-header a.rcmContactAddress:hover,
#message-header a.rcmContactAddress:focus,
#message-header > .subject a.extwin:hover,
#message-header > .subject a.extwin:hover::before,
#message-header > .subject a.extwin:hover .inner,
#message-header > .subject a.extwin:focus,
#message-header > .subject a.extwin:focus::before,
#message-header > .subject a.extwin:focus .inner {
    color: #5f8496 !important;
}

/* Sidebar "메일 보내기" where username used to be */
#layout-sidebar .header .header-title.sidebar-compose {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-align: center;
}

#layout-sidebar .header .header-title.sidebar-compose a.compose.sendmail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 130px;
    height: 32px;
    padding: 0 .75rem;
    border-radius: .25rem;
    background-color: #556d8f;
    background-image: repeating-conic-gradient(#4a607d 0% 25%, #556d8f 0% 50%);
    background-size: 10px 10px; /* 5px × 5px 체크무늬 */
    color: #fff !important;
    text-decoration: none;
    white-space: nowrap;
    font-size: .9rem;
    line-height: 1;
}

#layout-sidebar .header .header-title.sidebar-compose a.compose.sendmail:hover {
    background-color: #4a607d;
    background-image: repeating-conic-gradient(#3f526b 0% 25%, #4a607d 0% 50%);
    background-size: 10px 10px;
    color: #fff !important;
}

#layout-sidebar .header .header-title.sidebar-compose a.compose.sendmail::before {
    content: "\f044";
    font-family: "Icons";
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    margin-right: .4rem;
    color: #fff;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

#layout-sidebar .header .header-title.sidebar-compose a.compose.sendmail .inner {
    display: inline;
    padding: 0;
}

/* ===== Compose: options + attachments below editor ===== */
/* TinyMCE autoresize grows the editor; #compose-below stays under it;
   the form gets a scrollbar so long mail + attachments remain reachable. */
#layout-content.compose-layout-below {
    min-width: 0;
}

#layout-content.compose-layout-below #compose-content.formcontainer {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
}

#layout-content.compose-layout-below #compose-content > form.formcontent.scroller {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

#layout-content.compose-layout-below #compose-headers,
#layout-content.compose-layout-below #compose-objects,
#layout-content.compose-layout-below #composebodycontainer,
#layout-content.compose-layout-below #compose-below {
    position: relative;
    z-index: 1;
}

#layout-content.compose-layout-below #composebodycontainer {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    margin-bottom: .35rem;
}

/* Do NOT set height:!important here — autoresize sets inline height in px */
#layout-content.compose-layout-below #composebodycontainer .html-editor {
    min-height: 280px;
}

#layout-content.compose-layout-below #composebodycontainer .tox.tox-tinymce {
    min-height: 280px;
    max-height: none;
    box-sizing: border-box;
}

#compose-below.compose-below {
    position: relative;
    z-index: 2;
    margin-top: .35rem;
    padding: .55rem 1rem .85rem;
    border-top: 1px solid #d8d8d8;
    background: #fafbfc;
}

#compose-below .compose-below-title {
    margin: 0 0 .35rem;
    font-size: .92rem;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
}

#compose-below .compose-below-options:empty {
    display: none;
}

#compose-below .compose-below-attach {
    margin-top: .35rem;
    padding: .65rem .75rem 2.25rem;
    border: .12rem dashed #c5cbc7;
    border-radius: .3rem;
    background: #fff;
    box-sizing: border-box;
}

#compose-below .upload-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem .65rem;
    margin-bottom: 0;
    text-align: center;
    padding-bottom: 0;
}

#compose-below .upload-form .hint {
    margin: 0;
    text-align: center;
    font-size: .85rem;
}

#compose-below .upload-form button.attach {
    min-height: 2.15rem;
    padding: .45rem 1rem;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    border: 0;
    border-radius: .3rem;
    background: #1c7ed6;
    color: #fff;
    box-shadow: none;
}

#compose-below .upload-form button.attach:hover,
#compose-below .upload-form button.attach:focus {
    background: #1864ab;
    color: #fff;
}

#compose-below .upload-form button.attach:before {
    color: #fff;
    font-size: .95em;
}

/* Compact attachment drop zone */
#compose-attachments.file-upload {
    margin: .35rem 0 0;
    padding: .65rem .75rem 2.25rem;
    border: .12rem dashed #c5cbc7 !important;
    border-radius: .3rem;
    background: #fff;
    box-sizing: border-box;
}

#compose-attachments.file-upload.droptarget:after {
    width: 1.75rem;
    height: 1.75rem;
    margin: .55rem auto 0;
    font-size: 1.65rem;
    line-height: 1;
    opacity: .3;
}

#compose-attachments.file-upload .attachmentslist:empty {
    display: none;
}

#compose-attachments.file-upload .attachmentslist:not(:empty) {
    margin-top: .4rem;
}

.dark-mode #compose-below .upload-form button.attach {
    background: #339af0;
}

.dark-mode #compose-below .upload-form button.attach:hover,
.dark-mode #compose-below .upload-form button.attach:focus {
    background: #228be6;
}

#messagetoolbar a.send {
    background: #e8590c !important;
    color: #fff !important;
    border-radius: .25rem;
    padding: 0 .85rem !important;
}

#messagetoolbar a.send:before {
    color: #fff !important;
}

#messagetoolbar a.send:hover {
    background: #d9480f !important;
}

/* Bottom compose actions: center draft + send */
#compose-content > .formbuttons.compose-formbuttons,
#compose-content > .formbuttons {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .75rem 1rem 1rem;
    border-top: 1px solid #d8d8d8;
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

#compose-content > .formbuttons .compose-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
}

#compose-content > .formbuttons .float-right {
    float: none;
    display: flex;
    justify-content: center;
    gap: .65rem;
    width: 100%;
}

#compose-content > .formbuttons .compose-draft-btn,
#compose-content > .formbuttons button.save {
    min-width: 7.5rem;
    padding: .55rem 1.25rem;
    font-size: .95rem;
    font-weight: 600;
    border-radius: .3rem;
    border: 1px solid #ced4da;
    background: #f1f3f5;
    color: #343a40;
}

#compose-content > .formbuttons .compose-draft-btn:hover,
#compose-content > .formbuttons button.save:hover {
    background: #e9ecef;
    color: #212529;
}

#compose-content > .formbuttons .compose-send-btn,
#compose-content > .formbuttons button.send {
    min-width: 7.5rem;
    padding: .55rem 1.4rem;
    font-size: .95rem;
    font-weight: 700;
    border: 0;
    border-radius: .3rem;
    background: #2f9e44 !important;
    color: #fff !important;
}

#compose-content > .formbuttons .compose-send-btn:hover,
#compose-content > .formbuttons button.send:hover {
    background: #2b8a3e !important;
    color: #fff !important;
}

#compose-content > .formbuttons .btn.extwin {
    position: absolute;
    left: .75rem;
}

/* Keep a visible Send control inside the iframe (in addition to parent header) */
html.framed-compose #compose-content > .formbuttons,
html.iframe.framed-compose #compose-content > .formbuttons {
    display: flex !important;
    justify-content: center;
    gap: .65rem;
    padding: .75rem 1rem 1rem;
    border-top: 1px solid #d8d8d8;
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* Parent header: hide reply toolbar while composing in the preview pane */
#layout-content.inbox-compose-active > .header #mailtoolbar {
    display: none !important;
}

/* Framed compose inside #messagecontframe */
html.iframe #layout-menu,
html.framed-compose #layout-menu,
html.framed-compose .task-menu-button {
    display: none !important;
}

html.framed-compose,
html.framed-compose body,
html.iframe.framed-compose,
html.iframe.framed-compose body {
    height: 100%;
    overflow: hidden;
}

html.framed-compose #layout,
html.iframe.framed-compose #layout {
    height: 100% !important;
}

html.framed-compose #layout-content,
html.iframe.framed-compose #layout-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

html.framed-compose #layout-content > .header .task-menu-button,
html.framed-compose #layout-content > .header .back-list-button {
    display: none !important;
}

.dark-mode #compose-below.compose-below {
    background: #1e2226;
    border-top-color: #3a3f44;
}

.dark-mode #compose-below .compose-below-title {
    color: #e8e8e8;
}

.dark-mode #compose-below .compose-below-attach,
.dark-mode #compose-attachments.file-upload {
    border-color: #3a3f44 !important;
    background: #1e2226;
}

html.dark-mode #layout-content.compose-layout-below,
html.dark-mode #compose-content,
html.dark-mode #compose-content > form.formcontent.scroller {
    background: #21292c;
    color: #e8ecee;
}

html.dark-mode.framed-compose #compose-content > .formbuttons,
html.dark-mode.iframe.framed-compose #compose-content > .formbuttons,
html.dark-mode #compose-content > .formbuttons {
    background: #1e2226 !important;
    border-top-color: #3a3f44 !important;
}

html.dark-mode #compose-content > .formbuttons .compose-draft-btn,
html.dark-mode #compose-content > .formbuttons button.save {
    background: #30393d;
    border-color: #4a595e;
    color: #e8ecee;
}

html.dark-mode #compose-content > .formbuttons .compose-draft-btn:hover,
html.dark-mode #compose-content > .formbuttons button.save:hover {
    background: #3b474c;
    color: #fff;
}

/* ===== Mail list: match mail.stway.net row height + envelope icons ===== */
#messagelist.messagelist tr.message > td {
    vertical-align: top;
    padding-top: 4px;
    padding-bottom: 4px;
}

html:not(.dark-mode) #messagelist.messagelist tr.message > td {
    border-bottom: 1px solid #E5E5E5;
}

html:not(.dark-mode) #messagelist.messagelist tr.message:nth-child(even) > td {
    background-color: #fafafa;
}

html:not(.dark-mode) #messagelist.messagelist tr.message:nth-child(odd) > td {
    background-color: #ffffff;
}

html:not(.dark-mode) #messagelist.messagelist tr.message:hover > td,
html:not(.dark-mode) #messagelist.messagelist tr.message.selected:hover > td {
    background-color: #e3f2fd !important;
}

#messagelist.messagelist td.subject {
    padding-top: 2px;
    padding-bottom: 2px;
    align-items: center;
    row-gap: 0;
}

/* Line 1 (from/date): ~28px — icon left of sender like nmail */
#messagelist.messagelist td.subject span.msgicon.status {
    order: -2;
    width: 28px;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 0 4px 0 0;
    flex: 0 0 28px;
    position: relative;
}

#messagelist.messagelist td.subject span.fromto {
    order: -1;
    padding-left: 0 !important;
    line-height: 28px;
    min-height: 28px;
    font-size: 13px;
}

html:not(.dark-mode) #messagelist.messagelist td.subject span.fromto,
html:not(.dark-mode) #messagelist.messagelist td.subject span.fromto .rcmContactAddress {
    color: #000;
}

#messagelist.messagelist td.subject span.date,
#messagelist.messagelist td.subject span.size {
    line-height: 28px;
    min-height: 28px;
    font-size: 12px;
}

html:not(.dark-mode) #messagelist.messagelist td.subject span.date,
html:not(.dark-mode) #messagelist.messagelist td.subject span.size {
    color: #333;
}

/* Line 2 (subject): ~34px */
#messagelist.messagelist td.subject span.subject {
    order: 10;
    line-height: 34px;
    min-height: 34px;
    height: 34px;
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#messagelist.messagelist td.subject span.subject a {
    font-size: 13px;
}

html:not(.dark-mode) #messagelist.messagelist td.subject span.subject a,
html:not(.dark-mode) #messagelist.messagelist tr.message.unread td.subject span.subject a {
    color: #000;
}

#messagelist.messagelist tr.message.unread td.subject span.subject a {
    font-weight: 700;
}

#messagelist.messagelist tr.message:not(.unread) td.subject span.subject a {
    font-weight: 400;
}

/* Envelope PNGs (same assets as mail.stway.net glyphicon-read/unread/pass) */
#messagelist.messagelist td.subject span.msgicon.status:before,
#messagelist.messagelist td.subject span.msgicon.status:after {
    content: '' !important;
    display: inline-block !important;
    width: 25px !important;
    height: 19px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 25px 19px !important;
    vertical-align: top;
    opacity: 1 !important;
}

/* Priority (low → high): read → replied → forwarded → unread */
#messagelist.messagelist td.subject span.msgicon.status:before {
    background-image: url('../images/mailstatus/mail_read.png') !important;
}

#messagelist.messagelist td.subject span.msgicon.status.replied:before {
    background-image: url('../images/mailstatus/mail_reply.png') !important;
}

#messagelist.messagelist td.subject span.msgicon.status.forwarded:before,
#messagelist.messagelist td.subject span.msgicon.status.replied.forwarded:before {
    background-image: url('../images/mailstatus/mail_pass.png') !important;
}

#messagelist.messagelist td.subject span.msgicon.status.unread:before,
#messagelist.messagelist tr.message.unread td.subject span.msgicon.status:before {
    background-image: url('../images/mailstatus/mail_unread.png') !important;
}

#messagelist.messagelist td.subject span.msgicon.status.replied.forwarded:after,
#messagelist.messagelist td.subject span.msgicon.status.unreadchildren:before {
    display: none !important;
}

/* Keep deleted FA icon */
#messagelist.messagelist tr.deleted td.subject span.msgicon.status:before {
    content: "\f05e" !important; /* ban */
    font-family: "Icons" !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    width: 1.1rem !important;
    height: auto !important;
    background-image: none !important;
    color: inherit !important;
    margin: 0 !important;
}

/* Attachment/flag column — keep icons inside the list pane (not under preview) */
#messagelist.messagelist td.flags {
    padding-top: 6px;
    padding-right: .35rem;
    padding-bottom: 4px;
    width: 2.75em;
    min-width: 2.75em;
    max-width: 3.25em;
    box-sizing: border-box;
    overflow: visible;
}

html:not(.dark-mode) #messagelist.messagelist td.flags span.attachment span:before {
    font-size: 13px;
    color: #666;
}

html.dark-mode #messagelist.messagelist td.flags span.attachment span:before {
    font-size: 13px;
    color: #9aa5a9 !important;
}

#messagelist.messagelist td.selection {
    padding-top: 8px;
}

#messagelist.messagelist td.threads {
    padding-top: 6px;
}

/* Keep list content clear of the preview pane edge */
#layout-list {
    /* The active column resizer expands over the preview iframe while dragging. */
    overflow: visible;
    z-index: 2;
}

#layout-list #messagelist-content.scroller {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: .15rem;
}

#layout-list #messagelist.messagelist {
    width: 100%;
    table-layout: fixed;
}

#layout-list #messagelist.messagelist td.subject {
    overflow: hidden;
}

#layout-content {
    z-index: 1;
    min-width: 0;
}

/* ===== Message attachment box (legacy-style, tidy list) ===== */
#stway-attach-box.stway-attach-box {
    margin: 0 0 1rem;
    border: 1px solid #dddddd;
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
}

#stway-attach-box .stway-attach-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 36px;
    padding: .4rem .75rem;
    background: #f6f7fa;
    border-bottom: 1px solid #dddddd;
    font-size: .9rem;
    color: #333;
}

#stway-attach-box .stway-attach-head strong {
    font-weight: 700;
}

#stway-attach-box .stway-attach-sep {
    color: #999;
}

#stway-attach-box .stway-attach-all-slot a.zipdownload,
#stway-attach-box .stway-attach-all-slot a {
    color: #888 !important;
    text-decoration: none;
    font-weight: 400;
}

#stway-attach-box .stway-attach-all-slot a:hover {
    color: #555 !important;
    text-decoration: underline;
}

/* Hide FA icon on zipdownload inside our slot */
#stway-attach-box .stway-attach-all-slot a.zipdownload:before {
    display: none !important;
    content: none !important;
}

#stway-attach-box .stway-attach-body {
    padding: .35rem .9rem .25rem;
    background: #fff;
}

#stway-attach-box .attachmentslist {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
}

#message-content #stway-attach-box .attachmentslist:not(:empty) {
    margin-bottom: 0 !important;
}

#stway-attach-box .attachmentslist li {
    display: flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    padding: .35rem .15rem;
    line-height: 1.45;
    white-space: nowrap;
    border-bottom: 0;
    background-image: linear-gradient(to right, #ddd 33%, transparent 0%);
    background-position: bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
}

#stway-attach-box .attachmentslist li:last-child {
    background-image: none;
}

/* Replace FontAwesome glyphs with /img/{ext}.png icons */
#stway-attach-box .attachmentslist li:before {
    content: '' !important;
    font-family: none !important;
    display: inline-block !important;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 18px !important;
    background: url('/img/etc.png') center / contain no-repeat;
    color: transparent !important;
}

#stway-attach-box .attachmentslist li.pdf:before { background-image: url('/img/pdf.png'); }
#stway-attach-box .attachmentslist li.doc:before,
#stway-attach-box .attachmentslist li.docx:before,
#stway-attach-box .attachmentslist li.msword:before,
#stway-attach-box .attachmentslist li.odt:before { background-image: url('/img/doc.png'); }
#stway-attach-box .attachmentslist li.xls:before,
#stway-attach-box .attachmentslist li.xlsx:before,
#stway-attach-box .attachmentslist li.msexcel:before,
#stway-attach-box .attachmentslist li.ods:before { background-image: url('/img/xls.png'); }
#stway-attach-box .attachmentslist li.ppt:before,
#stway-attach-box .attachmentslist li.pptx:before,
#stway-attach-box .attachmentslist li.ppsx:before,
#stway-attach-box .attachmentslist li.odp:before,
#stway-attach-box .attachmentslist li.vnd\.mspowerpoint:before { background-image: url('/img/ppt.png'); }
#stway-attach-box .attachmentslist li.zip:before,
#stway-attach-box .attachmentslist li.rar:before,
#stway-attach-box .attachmentslist li.gz:before { background-image: url('/img/zip.png'); }
#stway-attach-box .attachmentslist li.jpg:before,
#stway-attach-box .attachmentslist li.jpeg:before,
#stway-attach-box .attachmentslist li.gif:before,
#stway-attach-box .attachmentslist li.webp:before,
#stway-attach-box .attachmentslist li.image:before { background-image: url('/img/jpg.png'); }
#stway-attach-box .attachmentslist li.png:before { background-image: url('/img/png.png'); }
#stway-attach-box .attachmentslist li.mp4:before,
#stway-attach-box .attachmentslist li.video:before,
#stway-attach-box .attachmentslist li.m4p:before { background-image: url('/img/mp4.png'); }
#stway-attach-box .attachmentslist li.hwp:before { background-image: url('/img/hwp.png'); }
#stway-attach-box .attachmentslist li.ai:before { background-image: url('/img/ai.png'); }
#stway-attach-box .attachmentslist li.ps:before { background-image: url('/img/ps.png'); }

#stway-attach-box .attachmentslist li a.filename {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    min-width: 0;
    flex: 1 1 auto;
    height: auto;
    line-height: inherit;
    padding: 0;
    color: #2c5aa0;
    text-decoration: none;
}

#stway-attach-box .attachmentslist li a.filename:hover {
    text-decoration: underline;
}

#stway-attach-box .attachmentslist .attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    font-size: .95rem;
}

#stway-attach-box .attachmentslist .attachment-size {
    flex-shrink: 0;
    color: #999;
    font-size: .85rem;
    padding-left: 0;
}

#stway-attach-box .attachmentslist li a.dropdown {
    margin-left: .15rem;
    color: #769aab !important;
    opacity: 1;
}

#stway-attach-box .attachmentslist li a.dropdown:before,
#stway-attach-box .attachmentslist li a.dropdown .inner {
    color: #769aab !important;
}

#stway-attach-box .attachmentslist li a.dropdown:hover,
#stway-attach-box .attachmentslist li a.dropdown:focus,
#stway-attach-box .attachmentslist li a.dropdown:hover:before,
#stway-attach-box .attachmentslist li a.dropdown:focus:before,
#stway-attach-box .attachmentslist li a.dropdown:hover .inner,
#stway-attach-box .attachmentslist li a.dropdown:focus .inner {
    color: #5f8496 !important;
}

/* Inline image attachment cards under body */
#messagebody p.image-attachment {
    float: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    justify-content: stretch;
    align-content: stretch;
    width: min(100%, 280px);
    min-width: 0;
    min-height: 0;
    margin: .75rem 0;
    padding: 0;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fafbfc;
    overflow: hidden;
}

#messagebody p.image-attachment .image-filename,
#messagebody p.image-attachment .image-filesize {
    position: static;
    padding: .45rem .7rem;
    line-height: 1.3;
    font-size: .85rem;
    color: #444;
}

#messagebody p.image-attachment .image-filename {
    grid-row: 1;
    border-bottom: 1px solid #e6e8ec;
    background: #f3f5f7;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: .7rem;
}

#messagebody p.image-attachment .image-filesize {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    background: transparent;
    color: #888;
    padding: .45rem .7rem;
}

#messagebody p.image-attachment .image-link {
    grid-row: 2;
    margin: .75rem auto;
    align-self: center;
}

#messagebody p.image-attachment .attachment-links {
    position: static;
    grid-row: 3;
    display: flex;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    padding: .4rem .5rem .55rem;
    border-top: 1px solid #e6e8ec;
    background: #f3f5f7;
}

#messagebody p.image-attachment .attachment-links a {
    color: #2c5aa0;
    font-size: .88rem;
}

#messagebody p.image-attachment br {
    display: none;
}

/* Address book add button next to name (name click = compose) */
#message-header a.rcmaddcontact {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: .35rem;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid #c5cdd6;
    border-radius: 3px;
    background: #f7f8fa;
    color: #769aab !important;
    font-size: 0;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
}

#message-header a.rcmaddcontact:before {
    display: inline-block !important;
    content: "\f234" !important;
    font-family: Icons !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: .8rem;
    line-height: 1;
    color: #769aab !important;
    speak: none;
}

#message-header a.rcmaddcontact:hover,
#message-header a.rcmaddcontact:focus {
    background: #eef2f6;
    border-color: #a8b3c0;
    color: #5f8496 !important;
}

#message-header a.rcmaddcontact:hover:before,
#message-header a.rcmaddcontact:focus:before {
    color: #5f8496 !important;
}

.header-headers a.rcmaddcontact,
.header-summary a.rcmaddcontact {
    display: inline-flex !important;
}

/* Always show detailed envelope (보낸사람/받는사람/참조 table) */
#message-header .header-content .header-summary {
    display: none !important;
}

#message-header .header-content .header-headers {
    display: table !important;
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
    margin-top: .15rem;
}

#message-header .header-content .header-headers tr + tr td {
    padding-top: .15rem;
}

#message-header .header-content .header-headers .header-title {
    white-space: nowrap;
    color: #555;
    font-weight: 700;
    padding-right: 1rem;
    vertical-align: top;
    width: 5.5em;
}

#message-header .header-content .header-headers td {
    vertical-align: top;
    font-size: .95rem;
    line-height: 1.45;
    color: #222;
}

/* Hide empty action-link row under headers */
#message-header .header-links:empty {
    display: none !important;
}

/* ===== Dark mode: override light-only custom.css hardcodes ===== */
html.dark-mode #messagelist.messagelist tr.message > td {
    border-bottom: 1px solid #3d4a4e !important;
}

html.dark-mode #messagelist.messagelist tr.message:nth-child(even) > td {
    background-color: #1c2427 !important;
}

html.dark-mode #messagelist.messagelist tr.message:nth-child(odd) > td {
    background-color: #21292c !important;
}

html.dark-mode #messagelist.messagelist tr.message:hover > td,
html.dark-mode #messagelist.messagelist tr.message.selected:hover > td,
html.dark-mode #messagelist.messagelist tr.message.selected > td,
html.dark-mode #messagelist.messagelist tr.message.focused > td {
    background-color: #374549 !important;
}

/* Sender / date / size — must beat #messagelist ID rules */
html.dark-mode #messagelist.messagelist td.subject span.fromto,
html.dark-mode #messagelist.messagelist td.subject span.fromto .adr,
html.dark-mode #messagelist.messagelist td.subject span.fromto .rcmContactAddress,
html.dark-mode #messagelist.messagelist td.subject span.date,
html.dark-mode #messagelist.messagelist td.subject span.size {
    color: #f0f3f4 !important;
}

html.dark-mode #messagelist.messagelist tr.message.selected td.subject span.fromto,
html.dark-mode #messagelist.messagelist tr.message.selected td.subject span.fromto .adr,
html.dark-mode #messagelist.messagelist tr.message.selected td.subject span.fromto .rcmContactAddress,
html.dark-mode #messagelist.messagelist tr.message.selected td.subject span.date,
html.dark-mode #messagelist.messagelist tr.message.selected td.subject span.size {
    color: #ffffff !important;
}

html.dark-mode #messagelist.messagelist td.subject span.subject a,
html.dark-mode #messagelist.messagelist td.subject span.subject a span,
html.dark-mode #messagelist.messagelist tr.message.unread td.subject span.subject a {
    color: #f0f3f4 !important;
}

html.dark-mode #messagelist.messagelist tr.message.selected td.subject span.subject a,
html.dark-mode #messagelist.messagelist tr.message.selected td.subject span.subject a span,
html.dark-mode #messagelist.messagelist tr.message.selected.focused td.subject span.subject a {
    color: #7fd4ff !important;
}

html.dark-mode #messagelist.messagelist td.flags span.attachment span:before {
    color: #9aa5a9 !important;
}

html.dark-mode #messagelist.messagelist .row-delete:before {
    color: #9aa5a9;
}

html.dark-mode #message-header {
    border-bottom-color: #2c373a;
}

html.dark-mode #message-header .header-content .header-headers .header-title {
    color: #9aa5a9 !important;
}

html.dark-mode #message-header .header-content .header-headers td {
    color: #e8ecee !important;
}

html.dark-mode #message-header a.rcmaddcontact {
    background: #2c373a;
    border-color: #3d4a4e;
    color: #8eb4c4 !important;
}

html.dark-mode #message-header a.rcmaddcontact:before {
    color: #8eb4c4 !important;
}

html.dark-mode #message-header a.rcmaddcontact:hover,
html.dark-mode #message-header a.rcmaddcontact:focus {
    background: #374549;
    border-color: #4a595e;
    color: #a8c8d6 !important;
}

html.dark-mode #message-header a.rcmaddcontact:hover:before,
html.dark-mode #message-header a.rcmaddcontact:focus:before {
    color: #a8c8d6 !important;
}

html.dark-mode #stway-attach-box.stway-attach-box {
    border-color: #2c373a;
    background: #1c2427;
}

html.dark-mode #stway-attach-box .stway-attach-head {
    background: #252e32;
    border-bottom-color: #2c373a;
    color: #e8ecee;
}

html.dark-mode #stway-attach-box .stway-attach-sep {
    color: #6a7579;
}

html.dark-mode #stway-attach-box .stway-attach-all-slot a.zipdownload,
html.dark-mode #stway-attach-box .stway-attach-all-slot a {
    color: #9aa5a9 !important;
}

html.dark-mode #stway-attach-box .stway-attach-all-slot a:hover {
    color: #c5ced1 !important;
}

html.dark-mode #stway-attach-box .stway-attach-body {
    background: #1c2427;
}

html.dark-mode #stway-attach-box .attachmentslist li {
    background-image: linear-gradient(to right, #3d4a4e 33%, transparent 0%);
}

html.dark-mode #stway-attach-box .attachmentslist li:last-child {
    background-image: none;
}

html.dark-mode #stway-attach-box .attachmentslist li a.filename {
    color: #8eb4c4;
}

html.dark-mode #stway-attach-box .attachmentslist .attachment-size {
    color: #7a868a;
}

html.dark-mode #stway-attach-box .attachmentslist li a.dropdown,
html.dark-mode #stway-attach-box .attachmentslist li a.dropdown:before,
html.dark-mode #stway-attach-box .attachmentslist li a.dropdown .inner {
    color: #8eb4c4 !important;
}

html.dark-mode #messagebody p.image-attachment {
    border-color: #2c373a;
    background: #1c2427;
}

html.dark-mode #messagebody p.image-attachment .image-filename,
html.dark-mode #messagebody p.image-attachment .attachment-links {
    background: #252e32;
    border-color: #2c373a;
    color: #c5ced1;
}

html.dark-mode #messagebody p.image-attachment .image-filesize {
    color: #7a868a;
}

html.dark-mode #messagebody p.image-attachment .attachment-links a {
    color: #8eb4c4;
}

/* Plain-text + HTML bodies follow dark theme */
html.dark-mode #messagebody .message-part {
    color: #e8ecee;
}

html.dark-mode #messagebody .message-htmlpart {
    background-color: #21292c !important;
    color: #e8ecee !important;
    padding: .5rem 0 !important;
    margin-top: .35rem;
}

html.dark-mode #messagebody .message-htmlpart .rcmBody {
    background-color: transparent !important;
    color: #e8ecee !important;
}

/* Simple HTML mails (no heavy branding) — force readable light text */
html.dark-mode #messagebody .message-htmlpart .rcmBody :where(div, p, span, td, th, li, font, label, h1, h2, h3, h4, h5, h6, strong, b, em, i, u, center, pre, blockquote) {
    color: #e8ecee !important;
    background-color: transparent !important;
    background-image: none !important;
}

html.dark-mode #messagebody .message-htmlpart .rcmBody a {
    color: #7fd4ff !important;
}

html.dark-mode #messagebody .message-htmlpart .rcmBody hr {
    border-color: #3d4a4e !important;
    background: #3d4a4e !important;
}

html.dark-mode #messagebody .message-htmlpart .rcmBody table {
    background-color: transparent !important;
}

html.dark-mode #messagebody .message-htmlpart .rcmBody img {
    background: transparent !important;
}