@charset "utf-8";

@font-face {
 font-family: Nanum_Gothic;
 src: url(../font/NanumGothic-Bold.eot?#iefix) format("embedded-opentype"),
      url(../font/NanumGothic-Bold.woff2) format("woff2"),
      url(../font/NanumGothic-Bold.woff) format("woff"),
      url(../font/NanumGothic-Bold.ttf) format("truetype");
 font-weight: 400;
 font-style: normal;
}

:root {
 --mail-bg: #f5f7fa;
 --mail-bg-soft: #f8fbfe;
 --mail-surface: rgba(255, 255, 255, 0.94);
 --mail-surface-strong: #ffffff;
 --mail-border: #d0dae6;
 --mail-border-soft: #e5eaef;
 --mail-text: #2a3f55;
 --mail-text-soft: #6d8093;
 --mail-title: #1d3552;
 --mail-danger: #ef4444;
 --mail-danger-dark: #dc2626;
 --mail-danger-soft: #fef2f2;
 --mail-warning: #d29a2f;
 --mail-navy: #003d82;
 --mail-navy-2: #0066cc;
 --mail-blue: #0066cc;
 --mail-green: #327c57;
 --mail-shadow: 0 18px 38px rgba(0, 61, 130, 0.1);
 --mail-shadow-soft: 0 10px 24px rgba(0, 61, 130, 0.06);
 --mail-radius-xl: 22px;
 --mail-radius-lg: 16px;
 --mail-radius-md: 12px;
 --mail-radius-sm: 8px;
}

html,
body {
 margin: 0;
 padding: 0;
 min-height: 100%;
}

body,
p,
a,
iframe,
span,
img,
h1,
h2,
h3,
h4,
h5,
h6,
div,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
button,
select {
 margin: 0;
 padding: 0;
}

body {
 font-family: "Nanum_Gothic", sans-serif;
 font-size: 13px;
 line-height: 1.5;
 color: var(--mail-text);
 -webkit-font-smoothing: antialiased;
 background:
  radial-gradient(circle at 82% 10%, rgba(0, 61, 130, 0.08), transparent 18%),
  linear-gradient(180deg, #f8fbfe 0%, #f5f7fa 100%);
}

* {
 box-sizing: border-box;
}

legend,
caption {
 overflow: hidden;
 width: 0;
 height: 0;
 font-size: 0;
 line-height: 0;
}

ol,
ul {
 list-style: none;
}

fieldset,
img {
 border: 0;
}

table,
th,
td {
 border-collapse: collapse;
}

table {
 width: 100%;
 table-layout: fixed;
 background: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 color: var(--mail-title);
 font-weight: 700;
}

a {
 color: var(--mail-text);
 text-decoration: none;
 transition: color 0.18s ease, opacity 0.18s ease;
}

a:hover,
a:active {
 color: var(--mail-danger-dark);
}

button,
input,
select,
textarea {
 font-family: "Nanum_Gothic", sans-serif;
 font-size: 13px;
 vertical-align: middle;
}

button,
select,
input.button,
input.check,
input.radio {
 cursor: pointer;
}

button {
 border: 0;
 background: none;
}

select,
.comm_select,
input.text,
textarea.text,
.comm_input,
.comm_textarea,
.filebox .upload-name,
.filebox label {
 border: 1px solid var(--mail-border);
 border-radius: var(--mail-radius-md);
 background: #ffffff;
 color: var(--mail-title);
 box-shadow: inset 0 1px 2px rgba(39, 77, 114, 0.03);
}

select,
.comm_select {
 height: 40px;
 padding: 8px 12px;
 background-color: #fdfefe;
}

input.text,
.comm_input {
 display: inline-block;
 width: 290px;
 height: 38px;
 padding: 0 12px;
 line-height: 38px;
}

textarea.text,
.comm_textarea {
 display: inline-block;
 width: 290px;
 min-height: 120px;
 padding: 12px;
 resize: vertical;
 background-color: #fdfefe;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
 color: #95a5b6;
 font-weight: 400;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
 outline: none;
}

input:focus,
select:focus,
textarea:focus,
.comm_input:focus,
.comm_textarea:focus,
.comm_select:focus {
 border-color: rgba(0, 102, 204, 0.45);
 box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.btn,
input.button,
button.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 38px;
 padding: 8px 16px;
 border: 1px solid transparent;
 border-radius: 10px;
 font-size: 13px;
 font-weight: 700;
 line-height: 1;
 letter-spacing: -0.01em;
 text-align: center;
 transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.btn:hover,
input.button:hover,
button.btn:hover {
 transform: translateY(-1px);
 box-shadow: 0 8px 16px rgba(28, 59, 92, 0.08);
}

.btn_small,
.btn_small_red {
 min-height: 32px;
 padding: 6px 12px;
 font-size: 12px;
}

.btn_mini {
 min-height: 28px;
 padding: 4px 10px;
 font-size: 11px;
}

.btn_red,
.btn_small_red {
 background: linear-gradient(135deg, var(--mail-danger) 0%, var(--mail-danger-dark) 100%);
 color: #fff !important;
}

.btn_dark {
 background: linear-gradient(135deg, var(--mail-navy) 0%, var(--mail-navy-2) 100%);
 color: #fff !important;
}

.btn_gray {
 background: #7d8ea0;
 color: #fff !important;
}

.btn_lightGray {
 border-color: var(--mail-border);
 background: #f4f8fc;
 color: var(--mail-text) !important;
}

.btn_cancel {
 border: 1px solid #b7d8ef;
 background: #edf7ff;
 color: #245b83 !important;
}

.btn_blue {
 background: linear-gradient(135deg, #0066cc 0%, #003d82 100%);
 color: #fff !important;
}

.btn_black {
 background: #294866;
 color: #fff !important;
}

.btn_green {
 background: linear-gradient(135deg, #4a8b68 0%, #327c57 100%);
 color: #fff !important;
}

.ico_calendar {
 width: 34px;
 padding: 0;
 border: 1px solid var(--mail-border);
 border-radius: 10px;
 background: #fff url(../../images/ico_calendar.png) no-repeat 50% 50%;
 text-indent: -10000px;
}

.radio_b_wrap,
.check_b_wrap {
 display: inline-block;
 position: relative;
 margin-right: 6px;
 vertical-align: middle;
 overflow: hidden;
}

.radio_b_wrap input,
.check_b_wrap input {
 position: absolute;
 top: 0;
 left: 0;
 width: 18px;
 height: 18px;
 opacity: 0;
 z-index: 10;
}

.radio_b_wrap span.ico,
.check_b_wrap span.ico {
 display: inline-block;
 position: relative;
 width: 18px;
 height: 18px;
 border: 1px solid #c7d3df;
 border-radius: 4px;
 background: #fff;
 vertical-align: middle;
 transition: border-color 0.18s ease, background-color 0.18s ease;
}

.radio_b_wrap span.ico {
 border-radius: 50%;
}

.check_b_wrap span.ico:after {
 content: "";
 position: absolute;
 inset: 0;
 background: url(../../images/ico_check.png) no-repeat 50% 50%;
 background-size: 0;
 opacity: 0;
 transition: opacity 0.18s ease, background-size 0.18s ease;
}

.check_b_wrap input[type="checkbox"]:checked + span {
 border-color: #0066cc;
 background: #0066cc;
}

.check_b_wrap input[type="checkbox"]:checked + span:after {
 opacity: 1;
 background-size: 58%;
}

.radio_b_wrap input[type="radio"]:checked + span {
 border: 5px solid #0066cc;
}

.radio_b_wrap input[type="radio"]:checked ~ span,
.check_b_wrap input[type="checkbox"]:checked ~ span {
 color: #003d82;
 font-weight: 700;
}

.deadline-warning,
.day-yellow {
 background-color: #d4a23f;
 color: #fff;
}

.deadline-expired,
.day-red {
 background-color: var(--mail-danger);
 color: #fff;
}

.day-orange {
 background-color: #d7863a;
 color: #fff;
}

.day-red,
.day-yellow,
.day-orange {
 display: inline-block;
 padding: 3px 8px;
 border-radius: 999px;
 box-shadow: 0 4px 10px rgba(28, 59, 92, 0.12);
}

.filebox input[type="file"] {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}

.filebox label,
.filebox .upload-name {
 display: inline-block;
 padding: 0.55em 0.8em;
 font-size: 12px;
 line-height: 1.3;
}

.filebox.bs3-primary label {
 border-color: #0066cc;
 background: #0066cc;
 color: #fff;
}

.wide { width: 100% !important; }
.fl { float: left !important; }
.fr { float: right !important; }
.al { text-align: left !important; }
.ac { text-align: center !important; }
.ar { text-align: right !important; }
.vm { vertical-align: middle !important; }
.dp_in { display: inline-block !important; }
.f_16 { font-size: 16px !important; }
.f_14 { font-size: 14px !important; }
.f_12 { font-size: 12px !important; }
.f_darkGray { color: #5d7083 !important; }
.f_gray { color: #90a0af !important; }
.f_blue { color: var(--mail-blue) !important; }
.f_lightBlue { color: #5f97d1 !important; }
.f_red { color: var(--mail-danger) !important; }
.f_black { color: #111 !important; }
.f_normal { font-weight: 400 !important; }
.f_ligth { font-weight: 300 !important; }
.f_bold { font-weight: 700 !important; }
.bg_gray { background: #f4f8fc !important; }
.clear { display: none; }

.mgt5 { margin-top: 5px !important; }
.mgt10 { margin-top: 10px !important; }
.mgt15 { margin-top: 15px !important; }
.mgt20 { margin-top: 20px !important; }
.mgt30 { margin-top: 30px !important; }
.mgb5 { margin-bottom: 5px !important; }
.mgb10 { margin-bottom: 10px !important; }
.mgb15 { margin-bottom: 15px !important; }
.mgb20 { margin-bottom: 20px !important; }
.mgb30 { margin-bottom: 30px !important; }
.mgl5 { margin-left: 5px !important; }
.mgl10 { margin-left: 10px !important; }
.mgl15 { margin-left: 15px !important; }
.mgl20 { margin-left: 20px !important; }
.mgr5 { margin-right: 5px !important; }
.mgr10 { margin-right: 10px !important; }
.mgr15 { margin-right: 15px !important; }
.mgr20 { margin-right: 20px !important; }
.pdt10 { padding-top: 10px !important; }
.pdt20 { padding-top: 20px !important; }
.pdb10 { padding-bottom: 10px !important; }
.pdb20 { padding-bottom: 20px !important; }
.pdl10 { padding-left: 10px !important; }
.pdl20 { padding-left: 20px !important; }
.pdr10 { padding-right: 10px !important; }
.pda10 { padding: 10px !important; }
.pda20 { padding: 20px !important; }

.training-page {
 width: 100%;
}

.training-form-page {
 max-width: 1280px;
 margin: 0 auto;
}

.training-form-card {
 padding: 28px 30px 32px;
 border: 1px solid var(--mail-border);
 border-radius: 18px;
 background: #fff;
 box-shadow: var(--mail-shadow-soft);
}

.training-form-card--wide {
 max-width: 1200px;
}

.training-form-card--xwide {
 max-width: 1300px;
}

.training-form-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 24px;
 padding-bottom: 16px;
 border-bottom: 1px solid var(--mail-border-soft);
}

.training-form-title {
 color: var(--mail-title);
 font-size: 24px;
 font-weight: 700;
 letter-spacing: -0.04em;
}

.training-form-desc {
 margin-top: 6px;
 color: var(--mail-text-soft);
 font-size: 13px;
}

.training-form-actions {
 display: flex;
 justify-content: flex-end;
 gap: 8px;
}

.training-form-group {
 margin-bottom: 18px;
}

.training-form-label {
 display: block;
 margin-bottom: 8px;
 color: var(--mail-title);
 font-size: 13px;
 font-weight: 700;
}

.training-form-field {
 width: 100%;
}

.training-textarea-lg {
 width: 100%;
 min-height: 360px;
 padding: 12px;
 border: 1px solid var(--mail-border);
 border-radius: 12px;
 resize: none;
}

.training-inline {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.training-inline-label {
 margin: 0;
 color: var(--mail-title);
 font-size: 13px;
 font-weight: 700;
}

.training-check {
 width: 20px;
 height: 20px;
 margin: 0;
}

.training-section {
 margin-bottom: 24px;
 padding: 22px 24px;
 border: 1px solid var(--mail-border);
 border-radius: 16px;
 background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
}

.training-section-title {
 margin-bottom: 18px;
 padding-bottom: 10px;
 border-bottom: 1px solid var(--mail-border-soft);
 color: var(--mail-title);
 font-size: 19px;
 font-weight: 700;
}

.training-row {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-bottom: 14px;
}

.training-row:last-child {
 margin-bottom: 0;
}

.training-row-label {
 flex: 0 0 150px;
 color: var(--mail-title);
 font-size: 13px;
 font-weight: 700;
}

.training-row-field {
 flex: 1;
 min-width: 0;
}

.training-row-field .comm_input,
.training-row-field select,
.training-row-field textarea,
.training-row-field input[type="text"],
.training-row-field input[type="password"] {
 width: 100%;
}

.training-user-toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
 margin-bottom: 16px;
}

.training-upload-actions {
 display: flex;
 align-items: center;
 gap: 10px;
}

.training-upload-label {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 36px;
 padding: 8px 14px;
 border-radius: 10px;
 background: linear-gradient(135deg, var(--mail-green) 0%, #236346 100%);
 color: #fff;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
}

.training-upload-label input {
 display: none;
}

.training-user-panel {
 padding: 16px;
 border: 1px dashed #bfd0e2;
 border-radius: 14px;
 background: #f8fbfe;
}

.training-user-add {
 display: flex;
 gap: 10px;
 align-items: center;
 flex-wrap: wrap;
 margin-bottom: 14px;
}

.training-user-add .comm_input,
.training-user-add input[type="text"],
.training-user-add select {
 flex: 1;
 min-width: 150px;
}

.training-email-domain {
 display: flex;
 align-items: center;
 gap: 10px;
 flex: 1 1 320px;
}

.training-user-list {
 margin-top: 10px;
 border: 1px solid var(--mail-border);
 border-radius: 14px;
 overflow: hidden;
 background: #fff;
}

.training-user-list li {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 14px;
 border-top: 1px solid var(--mail-border-soft);
}

.training-user-list li:first-child {
 border-top: 0;
}

.training-user-list li.non {
 justify-content: center;
 color: var(--mail-text-soft);
}

.training-user-list .removeBtn,
.training-user-list .none {
 margin-left: auto;
}

.training-chart-toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 margin-bottom: 14px;
}

.training-chart-title {
 color: var(--mail-title);
 font-size: 18px;
 font-weight: 700;
}

.training-chart-grid {
 display: flex;
 gap: 16px;
 flex-wrap: wrap;
 margin-bottom: 18px;
}

.training-chart-card {
 padding: 16px;
 border: 1px solid var(--mail-border);
 border-radius: 16px;
 background: #fff;
 box-shadow: var(--mail-shadow-soft);
}

.training-chart-card--fixed {
 width: 274px;
}

.training-notice-body {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 padding: 24px;
 background: linear-gradient(180deg, #f4f8fc 0%, #eaf1f7 100%);
}

.training-notice-card {
 max-width: 680px;
 padding: 44px 48px;
 border: 1px solid var(--mail-border);
 border-radius: 20px;
 background: #fff;
 box-shadow: var(--mail-shadow);
 text-align: center;
}

.training-notice-card h1 {
 margin-bottom: 22px;
 color: var(--mail-danger-dark);
 font-size: 30px;
}

.training-notice-card p {
 color: var(--mail-text);
 font-size: 17px;
 line-height: 1.8;
}

.training-notice-info {
 margin-top: 24px;
 color: var(--mail-text-soft);
 font-size: 15px;
}

.training-write-page {
 max-width: 1360px;
 margin: 0 auto;
 padding: 14px 18px 36px;
}

.training-write-toolbar {
 position: sticky;
 top: 14px;
 z-index: 80;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 padding: 10px 14px;
 margin-bottom: 18px;
 border: 1px solid #d9e4ef;
 border-radius: 14px;
 background: rgba(255, 255, 255, 0.94);
 box-shadow: 0 10px 26px rgba(15, 35, 62, 0.08);
 backdrop-filter: blur(12px);
}

.training-write-toolbar__left,
.training-write-toolbar__right {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
}

.training-write-toolbar__title {
 color: #173a63;
 font-size: 20px;
 font-weight: 800;
}

.training-write-toolbar__subtitle {
 margin-top: 3px;
 color: #6f8398;
 font-size: 12px;
}

.training-write-btn {
 height: 28px;
 padding: 0 10px;
 border: 1px solid transparent;
 border-radius: 6px;
 font-size: 11px;
 font-weight: 700;
 line-height: 1;
 cursor: pointer;
 box-shadow: none;
}

.training-write-btn--list {
 border-color: #d8e1eb;
 background: #edf3f9;
 color: #456079;
}

.training-write-btn--save,
.training-write-btn--send {
 background: #0b4e96;
 color: #fff;
}

.training-write-btn--edit {
 background: #7c8ea2;
 color: #fff;
}

.training-write-btn--delete {
 background: #9aa9ba;
 color: #fff;
}

.training-write-card {
 width: 100%;
 margin: 0 auto 16px;
 overflow: hidden;
 border: 1px solid #dce6f0;
 border-radius: 16px;
 background: #fff;
 box-shadow: 0 10px 22px rgba(15, 35, 62, 0.05);
}

.training-write-card__header {
 padding: 18px 20px 14px;
 border-bottom: 1px solid #e7eef5;
 background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
}

.training-write-card__title {
 margin: 0 0 8px;
 color: #173a63;
 font-size: 17px;
 font-weight: 800;
}

.training-write-card__desc {
 margin: 0;
 color: #70839a;
 font-size: 12px;
 line-height: 1.5;
}

.training-write-card__body {
 padding: 20px 22px;
}

.training-write-form-grid {
 display: grid;
 grid-template-columns: 150px 1fr;
 gap: 16px 20px;
 align-items: start;
}

.training-write-label {
 padding-top: 10px;
 color: #334155;
 font-size: 14px;
 font-weight: 800;
 line-height: 1.5;
}

.training-write-field {
 min-width: 0;
}

.training-write-help {
 margin-top: 6px;
 color: #64748b;
 font-size: 12px;
 line-height: 1.5;
}

.training-required {
 margin-left: 4px;
 color: #dc2626;
}

.training-write-input,
.training-write-select,
.training-write-readonly {
 width: 100%;
 height: 44px;
 padding: 0 12px;
 box-sizing: border-box;
 border: 1px solid #cfd8e3;
 border-radius: 10px;
 background: #fff;
 color: #111827;
 font-size: 14px;
}

.training-write-input:focus,
.training-write-select:focus,
.training-user-add-panel > input[type="text"]:focus,
.training-user-add-panel select:focus,
.training-user-search:focus {
 outline: none;
 border-color: #2563eb;
 box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
 background: #fbfdff;
}

.training-write-readonly {
 background: #f8fafc;
 color: #475569;
}

.author-write-page {
 max-width: 980px;
 margin: 0;
 padding: 18px 24px 36px;
}

.author-write-toolbar {
 top: 10px;
}

.author-write-toolbar .author-toolbar-btn {
 min-width: 58px;
 height: 26px;
 min-height: 0;
 padding: 3px 8px 1px;
 border-radius: 5px;
 font-size: 11px;
 line-height: 20px;
 text-align: center;
 box-shadow: none;
 box-sizing: border-box;
}

.author-write-toolbar input.author-toolbar-btn {
 line-height: 1;
}

.author-write-shell {
 min-height: 0;
}

.author-write-table {
 margin-bottom: 0;
}

.author-write-form-grid {
 grid-template-columns: 140px minmax(0, 1fr);
}

.author-inline-field {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 max-width: 430px;
}

.author-inline-field .training-write-input,
.author-inline-field .author-code-input {
 flex: 0 0 320px;
 min-width: 0;
}

.author-code-input,
.author-name-input {
 width: 320px !important;
}

.author-desc-input {
 width: 520px !important;
}

.author-check-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 auto;
 min-width: 78px;
 height: 38px;
 min-height: 0;
 padding: 0 12px;
 border-radius: 5px;
 font-size: 12px;
 text-decoration: none;
 box-sizing: border-box;
}

.author-readonly-value {
 display: flex;
 align-items: center;
 flex: 1 1 auto;
 max-width: 560px;
 font-weight: 700;
}

.training-template-preview {
 width: 100%;
 overflow: hidden;
 border: 1px solid #d7e1ec;
 border-radius: 14px;
 background: #fff;
}

.training-template-preview__topbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 10px;
 padding: 12px 14px;
 border-bottom: 1px solid #edf2f7;
 background: #f8fbff;
}

.training-template-preview__title {
 color: #334155;
 font-size: 14px;
 font-weight: 800;
}

.training-template-preview__badge {
 display: inline-flex;
 align-items: center;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 background: #e8f0fd;
 color: #2451a6;
 font-size: 12px;
 font-weight: 700;
}

.training-template-preview__body {
 width: 100%;
 min-height: 320px;
 padding: 16px;
 box-sizing: border-box;
 border: 0;
 resize: vertical;
 background: #fff;
 color: #111827;
 font-size: 14px;
 line-height: 1.7;
}

.training-toolbar-inline {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.training-upload-label,
.training-secondary-action {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 38px;
 padding: 0 14px;
 border: 0;
 border-radius: 10px;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
}

.training-upload-label {
 background: #16a34a;
 color: #fff;
}

.training-secondary-action {
 background: #e2e8f0;
 color: #334155;
}

.training-upload-help {
 color: #64748b;
 font-size: 12px;
 font-weight: 700;
}

.training-user-add-panel {
 display: grid;
 grid-template-columns: minmax(120px, 160px) minmax(140px, 180px) minmax(220px, 1fr) 28px minmax(220px, 1fr) auto;
 gap: 10px;
 align-items: center;
}

.training-user-add-panel > input[type="text"] {
 width: 100%;
 height: 44px;
 padding: 0 12px;
 box-sizing: border-box;
 border: 1px solid #cfd8e3;
 border-radius: 10px;
 background: #fff;
 color: #111827;
 font-size: 14px;
}

.training-user-at {
 color: #4b5f73;
 text-align: center;
 font-weight: 700;
}

.training-email-domain {
 display: flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
}

.training-email-domain select,
.training-email-domain input {
 flex: 1;
 min-width: 0;
 width: 100%;
 height: 44px;
 padding: 0 12px;
 box-sizing: border-box;
 border: 1px solid #cfd8e3;
 border-radius: 10px;
 background: #fff;
 font-size: 14px;
}

.training-direct-input {
 display: none;
}

.training-user-add-btn {
 height: 44px;
 padding: 0 16px;
 border: 0;
 border-radius: 10px;
 background: #2563eb;
 color: #fff;
 font-size: 14px;
 font-weight: 700;
 cursor: pointer;
 white-space: nowrap;
}

.training-user-add-btn:hover {
 background: #1d4ed8;
}

.training-user-tools {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) minmax(0, 1fr);
 align-items: center;
 column-gap: 16px;
 margin: 0;
 padding: 12px 14px;
 border: 1px solid #d7dde5;
 border-bottom: 0;
 border-radius: 14px 14px 0 0;
 background: #f4f8fc;
}

.training-user-tools .left-tools {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 0;
 min-height: 35px;
 justify-self: start;
 flex-wrap: wrap;
}

.training-user-tools .search-tools {
 width: 100%;
 padding: 0;
 justify-self: center;
}

.training-user-search {
 width: 100%;
 max-width: 280px;
 height: 38px;
 padding: 0 12px;
 box-sizing: border-box;
 border: 1px solid #cfd8e3;
 border-radius: 999px;
 background: #fff;
 font-size: 13px;
}

.training-user-tools .right-tools {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
 justify-self: end;
 flex-wrap: wrap;
}

.training-summary-label {
 color: #5f7082;
 font-size: 13px;
 font-weight: 700;
}

.training-user-count-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 64px;
 padding: 4px 10px;
 border-radius: 999px;
 background: #e7eef8;
 color: #1f4f82;
 font-size: 12px;
 font-weight: 700;
}

.training-selection-actions {
 display: none;
 align-items: center;
 margin-left: 4px;
}

.training-selection-actions.active {
 display: inline-flex;
}

.training-selection-chip {
 display: inline-flex;
 align-items: stretch;
 overflow: hidden;
 border: 1px solid #d9b79c;
 border-radius: 999px;
 box-shadow: 0 1px 2px rgba(122, 54, 11, 0.08);
}

.training-selection-chip .count {
 display: inline-flex;
 align-items: center;
 padding: 0 12px;
 background: #fff3e8;
 color: #9a4f18;
 font-size: 12px;
 font-weight: 700;
}

.training-selection-chip .remove-selected-btn {
 height: 34px;
 padding: 0 14px;
 border: 0;
 border-radius: 0;
 background: #ef4444;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 cursor: pointer;
}

.training-selection-chip .remove-selected-btn:hover {
 background: #dc2626;
}

.training-user-check {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 flex: 0 0 auto;
 color: #333;
 font-size: 14px;
 font-weight: 700;
 line-height: 1;
 white-space: nowrap;
 cursor: pointer;
}

.training-select-all-text {
 display: inline-block;
 min-width: 56px;
 color: #405466;
 font-size: 13px;
 font-weight: 700;
 white-space: nowrap;
 visibility: visible;
 opacity: 1;
}

.training-hidden {
 display: none !important;
}

.training-user-check input[type="checkbox"] {
 width: 16px;
 height: 16px;
 margin: 0;
}

.training-user-list-head {
 display: grid;
 grid-template-columns: 28px 120px 140px minmax(240px, 1fr) 58px;
 gap: 10px;
 align-items: center;
 padding: 10px 12px;
 border: 1px solid #d7dde5;
 border-bottom: 0;
 background: #eef3f8;
 color: #405466;
 font-size: 13px;
 font-weight: 700;
}

.training-user-list {
 margin-top: 0;
 padding: 10px;
 min-height: 72px;
 max-height: 520px;
 overflow-y: auto;
 border: 1px solid #d7dde5;
 border-radius: 0 0 14px 14px;
 background-color: #f9fbfd;
 list-style: none;
 scroll-behavior: smooth;
}

.training-user-list li {
 padding: 8px 12px;
 border-bottom: 1px solid #eee;
}

.training-user-list li:last-child {
 border-bottom: none;
}

.training-user-list.userList li {
 display: grid;
 grid-template-columns: 28px 120px 140px minmax(240px, 1fr) 58px;
 align-items: center;
 gap: 10px;
 padding: 9px 12px;
 margin-bottom: 0;
 border-bottom: 1px solid #e7edf3;
 background: #fff;
 font-size: 14px;
}

.training-user-list.userList li:last-child {
 border-bottom: 0;
}

.training-user-list.userList li:hover {
 background: #f7fbff;
}

.training-user-list.userList li span {
 color: #333;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.training-user-list.userList li .select-user {
 display: block !important;
 visibility: visible !important;
 opacity: 1 !important;
 width: 16px;
 height: 16px;
 margin: 0;
 flex: 0 0 auto;
 justify-self: center;
 cursor: pointer;
 accent-color: #2563eb;
 appearance: checkbox !important;
 -webkit-appearance: checkbox !important;
}

.training-user-list.userList li .user-name {
 min-width: 90px;
}

.training-user-list.userList li .user-dept {
 min-width: 110px;
}

.training-user-list.userList li .user-mail,
.training-user-list.userList li .user-email {
 min-width: 0;
}

.training-user-list.userList li.non {
 display: flex;
 justify-content: center;
 padding: 26px 12px;
 color: #66788a;
 background: #f9fbfd;
}

.training-user-search-empty {
 display: none;
 padding: 18px 12px;
 border: 1px solid #d7dde5;
 border-top: 0;
 background: #fff;
 color: #66788a;
 text-align: center;
}

.training-user-remove {
 min-width: 52px;
 height: 32px;
 margin-left: 0;
 padding: 0 10px;
 border: 0;
 border-radius: 8px;
 background-color: #ef4444;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 cursor: pointer;
}

.training-user-remove:hover {
 background-color: #dc2626;
}

.training-user-floating-tools {
 position: sticky;
 bottom: 12px;
 display: flex;
 justify-content: flex-end;
 margin-top: 10px;
 pointer-events: none;
}

.training-user-top-btn {
 display: none;
 pointer-events: auto;
 height: 36px;
 padding: 0 12px;
 border: 0;
 border-radius: 999px;
 background: #1f5a92;
 color: #fff;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.training-user-top-btn:hover {
 background: #17456f;
}

@media (max-width: 1200px) {
 .training-write-page {
  max-width: 100%;
  padding: 16px;
 }

 .training-user-add-panel {
  grid-template-columns: 1fr 1fr;
 }

 .training-user-add-panel .full-row {
  grid-column: 1 / -1;
 }

 .training-user-at {
  display: none;
 }

 .training-email-domain {
  grid-column: 1 / -1;
 }

 .training-user-add-btn {
  grid-column: 1 / -1;
  width: 100%;
 }
}

@media (max-width: 900px) {
 .training-write-form-grid {
  grid-template-columns: 1fr;
  gap: 10px;
 }

 .training-write-label {
  padding-top: 0;
 }

 .training-write-toolbar {
  flex-direction: column;
  align-items: flex-start;
 }

 .training-user-tools {
  grid-template-columns: 1fr;
  row-gap: 10px;
 }

 .training-user-tools .left-tools,
 .training-user-tools .search-tools,
 .training-user-tools .right-tools {
  justify-self: stretch;
 }

 .training-user-tools .search-tools {
  order: 2;
 }

 .training-user-tools .right-tools {
  order: 3;
  justify-content: flex-end;
 }

 .training-user-search {
  max-width: 100%;
 }

 .training-user-list-head {
  display: none;
 }

 .training-user-list.userList li {
  grid-template-columns: 24px 1fr auto;
  gap: 8px 12px;
  align-items: start;
 }

 .training-user-list.userList li .select-user {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  margin-top: 4px;
 }

 .training-user-list.userList li .training-user-remove {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  align-self: start;
 }

 .training-user-list.userList li .user-name,
 .training-user-list.userList li .user-dept,
 .training-user-list.userList li .user-mail,
 .training-user-list.userList li .user-email {
  grid-column: 2 / 3;
  min-width: 0;
  padding-left: 58px;
  position: relative;
  white-space: normal;
  word-break: break-all;
 }

 .training-user-list.userList li .user-name::before,
 .training-user-list.userList li .user-dept::before,
 .training-user-list.userList li .user-mail::before,
 .training-user-list.userList li .user-email::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 0;
  color: #5f7082;
  font-size: 12px;
  font-weight: 700;
 }
}

@media (max-width: 640px) {
 .training-write-page {
  padding: 12px 14px 24px;
 }

 .training-write-card__header,
 .training-write-card__body {
  padding: 18px;
 }

 .training-write-toolbar__left,
 .training-write-toolbar__right {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
 }

 .training-write-btn {
  width: 100%;
 }

 .training-user-add-panel {
  grid-template-columns: 1fr;
 }

 .training-email-domain {
  flex-direction: column;
  align-items: stretch;
 }

 .training-email-domain select,
 .training-email-domain input,
 .training-user-add-panel > input[type="text"],
 .training-user-add-btn {
  width: 100%;
 }

 .training-selection-chip {
  width: 100%;
 }

 .training-selection-chip .count {
  flex: 1;
  justify-content: center;
 }

 .training-user-list {
  max-height: 420px;
 }

 .training-user-tools .left-tools,
 .training-user-tools .right-tools {
  justify-content: space-between;
 }
}

.page-shell {
 max-width: 1360px;
 margin: 0 auto;
 padding: 14px 18px 36px;
 overflow: visible;
}

.top-action-bar {
 position: relative;
 z-index: 20;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 padding: 10px 14px;
 margin-bottom: 18px;
 border: 1px solid #d9e4ef;
 border-radius: 14px;
 background: rgba(255, 255, 255, 0.98);
 box-shadow: 0 10px 26px rgba(15, 35, 62, 0.08);
 backdrop-filter: blur(12px);
 isolation: isolate;
}

.top-action-bar.is-floating {
 position: fixed;
 top: 14px;
 z-index: 500;
 margin-bottom: 0;
}

.top-action-bar-placeholder {
 display: none;
 width: 100%;
 margin-bottom: 18px;
}

.top-action-left,
.top-action-right {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
}

.top-action-title {
 color: #173a63;
 font-size: 20px;
 font-weight: 800;
}

.page-subtitle {
 margin-top: 3px;
 color: #6f8398;
 font-size: 12px;
}

.btn-ui {
 height: 28px;
 padding: 0 10px;
 border: 1px solid transparent;
 border-radius: 6px;
 font-size: 11px;
 font-weight: 700;
 line-height: 1;
 cursor: pointer;
 box-shadow: none;
}

.btn-list {
 border-color: #d8e1eb;
 background: #edf3f9;
 color: #456079;
}

.btn-save,
.btn-send {
 background: #0b4e96;
 color: #fff;
}

.btn-edit {
 background: #7c8ea2;
 color: #fff;
}

.btn-delete {
 background: #ef4444;
 color: #fff;
}

.content-card {
 width: 100%;
 margin: 0 auto 16px;
 overflow: hidden;
 border: 1px solid #dce6f0;
 border-radius: 16px;
 background: #fff;
 box-shadow: 0 10px 22px rgba(15, 35, 62, 0.05);
}

.card-header {
 padding: 18px 20px 14px;
 border-bottom: 1px solid #e7eef5;
 background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
}

.card-header--collapsible {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}

.card-header-main {
 min-width: 0;
 flex: 1;
}

.card-header--collapsible .card-header-main {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.card-title-row {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 min-width: 0;
}

.card-header-title {
 margin: 0 0 8px;
 color: #173a63;
 font-size: 17px;
 font-weight: 800;
}

.card-header--collapsible .card-header-title {
 margin: 0;
}

.card-header-desc {
 margin: 0;
 color: #70839a;
 font-size: 12px;
 line-height: 1.5;
}

.card-summary {
 display: none;
 color: #526579;
 font-size: 12px;
 line-height: 1.6;
 flex: 1 1 220px;
  max-width: 100%;
  word-break: break-word;
}

.content-card.is-collapsed .card-summary {
 display: inline;
}

.content-card.is-collapsed .card-header-desc {
 display: none;
}

.card-toggle-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 auto;
 align-self: center;
 white-space: nowrap;
 min-width: 72px;
 min-height: 32px;
 padding: 0 12px;
 border: 1px solid #d7e1ec;
 border-radius: 999px;
 background: #fff;
 color: #456079;
 font-size: 12px;
 font-weight: 700;
 cursor: pointer;
}

.card-toggle-btn:hover {
 background: #f4f8fc;
}

.card-toggle-btn::after {
 content: "접기";
}

.content-card.is-collapsed .card-toggle-btn::after {
 content: "펼치기";
}

.content-card.is-collapsed .card-body {
 display: none;
}

.card-body {
 padding: 20px 22px;
}

.form-grid {
 display: grid;
 grid-template-columns: 150px 1fr;
 gap: 16px 20px;
 align-items: start;
}

.form-label {
 padding-top: 10px;
 color: #334155;
 font-size: 14px;
 font-weight: 800;
 line-height: 1.5;
}

.form-field {
 min-width: 0;
}

.field-help {
 margin-top: 6px;
 color: #64748b;
 font-size: 12px;
 line-height: 1.5;
}

.required-mark {
 margin-left: 4px;
 color: #dc2626;
}

.writeInput,
.selectInput,
.readonlyInput {
 width: 100%;
 height: 44px;
 padding: 0 12px;
 box-sizing: border-box;
 border: 1px solid #cfd8e3;
 border-radius: 10px;
 background: #fff;
 color: #111827;
 font-size: 14px;
}

.writeInput:focus,
.selectInput:focus,
.user-add-panel > input[type="text"]:focus,
.user-add-panel select:focus,
.user-search-input:focus {
 outline: none;
 border-color: #2563eb;
 box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
 background: #fbfdff;
}

.readonlyInput {
 background: #f8fafc;
 color: #475569;
}

.preview-wrap {
 width: 100%;
 overflow: hidden;
 border: 1px solid #d7e1ec;
 border-radius: 14px;
 background: #fff;
}

.preview-topbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 10px;
 padding: 12px 14px;
 border-bottom: 1px solid #edf2f7;
 background: #f8fbff;
}

.preview-title {
 color: #334155;
 font-size: 14px;
 font-weight: 800;
}

.preview-badge {
 display: inline-flex;
 align-items: center;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 background: #e8f0fd;
 color: #2451a6;
 font-size: 12px;
 font-weight: 700;
}

.template-preview-tabs {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 margin-left: auto;
}

.template-preview-tab {
 min-width: 64px;
 height: 30px;
 padding: 0 12px;
 border: 1px solid #d7e1ec;
 border-radius: 999px;
 background: #fff;
 color: #64748b;
 font-size: 12px;
 font-weight: 700;
 text-transform: lowercase;
}

.template-preview-tab.active {
 border-color: #0b4e96;
 background: #0b4e96;
 color: #fff;
}

.template-preview-panel {
 display: none;
 background: #fff;
}

.template-preview-panel.active {
 display: block;
}

.template-preview-frame {
 display: block;
 width: 100%;
 min-height: 560px;
 border: 0;
 background: #fff;
}

.template-editor-preview .template-preview-frame {
 min-height: 640px;
}

.template-editor-html-wrap {
 padding: 0;
 background: #fff;
 border: 0;
 box-shadow: none;
}

.template-editor-html-wrap textarea {
 width: 100%;
 min-height: 640px;
 border: 0;
}

#templateBody {
 width: 100%;
 min-height: 560px;
 padding: 16px;
 box-sizing: border-box;
 border: 0;
 resize: vertical;
 background: #fff;
 color: #111827;
 font-size: 14px;
 line-height: 1.7;
}

.toolbar-inline {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.upload-label,
.secondary-action {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 38px;
 padding: 0 14px;
 border: 0;
 border-radius: 10px;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
}

.upload-label {
 background: #16a34a;
 color: #fff;
}

.secondary-action {
 background: #e2e8f0;
 color: #334155;
}

.upload-help-text {
 color: #64748b;
 font-size: 12px;
 font-weight: 700;
}

.user-add-panel {
 display: grid;
 grid-template-columns: minmax(120px, 160px) minmax(140px, 180px) minmax(220px, 1fr) 28px minmax(220px, 1fr) auto;
 gap: 10px;
 align-items: center;
}

.user-add-panel > input[type="text"] {
 width: 100%;
 height: 44px;
 padding: 0 12px;
 box-sizing: border-box;
 border: 1px solid #cfd8e3;
 border-radius: 10px;
 background: #fff;
 color: #111827;
 font-size: 14px;
}

.at-symbol {
 color: #4b5f73;
 text-align: center;
 font-weight: 700;
}

.email-domain-container {
 display: flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
}

.email-domain-container select,
.email-domain-container input {
 flex: 1;
 min-width: 0;
 width: 100%;
 height: 44px;
 padding: 0 12px;
 box-sizing: border-box;
 border: 1px solid #cfd8e3;
 border-radius: 10px;
 background: #fff;
 font-size: 14px;
}

.direct-input {
 display: none;
}

.btn-add-user {
 height: 44px;
 padding: 0 16px;
 border: 0;
 border-radius: 10px;
 background: #2563eb;
 color: #fff;
 font-size: 14px;
 font-weight: 700;
 cursor: pointer;
 white-space: nowrap;
}

.btn-add-user:hover {
 background: #1d4ed8;
}

.user-list-tools {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) minmax(0, 1fr);
 align-items: center;
 column-gap: 16px;
 margin: 0;
 padding: 12px 14px;
 border: 1px solid #d7dde5;
 border-bottom: 0;
 border-radius: 14px 14px 0 0;
 background: #f4f8fc;
}

.user-list-tools .left-tools {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 0;
 min-height: 35px;
 justify-self: start;
 flex-wrap: wrap;
}

.user-list-tools .search-tools {
 width: 100%;
 padding: 0;
 justify-self: center;
}

.user-search-input {
 width: 100%;
 max-width: 280px;
 height: 38px;
 padding: 0 12px;
 box-sizing: border-box;
 border: 1px solid #cfd8e3;
 border-radius: 999px;
 background: #fff;
 font-size: 13px;
}

.user-list-tools .right-tools {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
 justify-self: end;
 flex-wrap: wrap;
}

.summary-label {
 color: #5f7082;
 font-size: 13px;
 font-weight: 700;
}

.user-count-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 64px;
 padding: 4px 10px;
 border-radius: 999px;
 background: #e7eef8;
 color: #1f4f82;
 font-size: 12px;
 font-weight: 700;
}

.selection-actions {
 display: none;
 align-items: center;
 margin-left: 4px;
}

.selection-actions.active {
 display: inline-flex;
}

.selection-chip {
 display: inline-flex;
 align-items: stretch;
 overflow: hidden;
 border: 1px solid #d9b79c;
 border-radius: 999px;
 box-shadow: 0 1px 2px rgba(122, 54, 11, 0.08);
}

.selection-chip .count {
 display: inline-flex;
 align-items: center;
 padding: 0 12px;
 background: #fff3e8;
 color: #9a4f18;
 font-size: 12px;
 font-weight: 700;
}

.selection-chip .remove-selected-btn {
 height: 34px;
 padding: 0 14px;
 border: 0;
 border-radius: 0;
 background: #ef4444;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 cursor: pointer;
}

.selection-chip .remove-selected-btn:hover {
 background: #dc2626;
}

.user-check-label {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 flex: 0 0 auto;
 color: #333;
 font-size: 14px;
 font-weight: 700;
 line-height: 1;
 white-space: nowrap;
 cursor: pointer;
}

.select-all-text {
 display: inline-block;
 min-width: 56px;
 color: #405466;
 font-size: 13px;
 font-weight: 700;
 white-space: nowrap;
 visibility: visible;
 opacity: 1;
}

.is-hidden {
 display: none !important;
}

.user-check-label input[type="checkbox"] {
 width: 16px;
 height: 16px;
 margin: 0;
}

.user-list-head {
 display: grid;
 grid-template-columns: 28px 120px 140px minmax(240px, 1fr) 58px;
 gap: 10px;
 align-items: center;
 padding: 10px 12px;
 border: 1px solid #d7dde5;
 border-bottom: 0;
 background: #eef3f8;
 color: #405466;
 font-size: 13px;
 font-weight: 700;
}

#userList {
 margin-top: 0;
 padding: 10px;
 min-height: 72px;
 max-height: 520px;
 overflow-y: auto;
 border: 1px solid #d7dde5;
 border-radius: 0 0 14px 14px;
 background-color: #f9fbfd;
 list-style: none;
 scroll-behavior: smooth;
}

#userList li {
 padding: 8px 12px;
 border-bottom: 1px solid #eee;
}

#userList li:last-child {
 border-bottom: none;
}

.userList li {
 display: grid;
 grid-template-columns: 28px 120px 140px minmax(240px, 1fr) 58px;
 align-items: center;
 gap: 10px;
 padding: 9px 12px;
 margin-bottom: 0;
 border-bottom: 1px solid #e7edf3;
 background: #fff;
 font-size: 14px;
}

.userList li:last-child {
 border-bottom: 0;
}

.userList li:hover {
 background: #f7fbff;
}

.userList li span {
 color: #333;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.userList li .select-user {
 display: block !important;
 visibility: visible !important;
 opacity: 1 !important;
 width: 16px;
 height: 16px;
 margin: 0;
 flex: 0 0 auto;
 justify-self: center;
 cursor: pointer;
 accent-color: #2563eb;
 appearance: checkbox !important;
 -webkit-appearance: checkbox !important;
}

.userList li .user-name {
 min-width: 90px;
}

.userList li .user-dept {
 min-width: 110px;
}

.userList li .user-mail,
.userList li .user-email {
 min-width: 0;
}

.userList li.non {
 display: flex;
 justify-content: center;
 padding: 26px 12px;
 color: #66788a;
 background: #f9fbfd;
}

.user-search-empty {
 display: none;
 padding: 18px 12px;
 border: 1px solid #d7dde5;
 border-top: 0;
 background: #fff;
 color: #66788a;
 text-align: center;
}

.removeBtn {
 min-width: 52px;
 height: 32px;
 margin-left: 0;
 padding: 0 10px;
 border: 0;
 border-radius: 8px;
 background-color: #ef4444;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 cursor: pointer;
}

.removeBtn:hover {
 background-color: #dc2626;
}

.user-list-floating-tools {
 position: sticky;
 bottom: 12px;
 display: flex;
 justify-content: flex-end;
 margin-top: 10px;
 pointer-events: none;
}

.user-list-top-btn {
 display: none;
 pointer-events: auto;
 height: 36px;
 padding: 0 12px;
 border: 0;
 border-radius: 999px;
 background: #1f5a92;
 color: #fff;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.user-list-top-btn:hover {
 background: #17456f;
}

@media (max-width: 1200px) {
 .page-shell {
  max-width: 100%;
  padding: 16px;
 }

 .user-add-panel {
  grid-template-columns: 1fr 1fr;
 }

 .user-add-panel .full-row {
  grid-column: 1 / -1;
 }

 .at-symbol {
  display: none;
 }

 .email-domain-container {
  grid-column: 1 / -1;
 }

 .btn-add-user {
  grid-column: 1 / -1;
  width: 100%;
 }
}

@media (max-width: 900px) {
 .form-grid {
  grid-template-columns: 1fr;
  gap: 10px;
 }

 .form-label {
  padding-top: 0;
 }

 .top-action-bar {
  flex-direction: column;
  align-items: flex-start;
 }

 .user-list-tools {
  grid-template-columns: 1fr;
  row-gap: 10px;
 }

 .user-list-tools .left-tools,
 .user-list-tools .search-tools,
 .user-list-tools .right-tools {
  justify-self: stretch;
 }

 .user-list-tools .search-tools {
  order: 2;
 }

 .user-list-tools .right-tools {
  order: 3;
  justify-content: flex-end;
 }

 .user-search-input {
  max-width: 100%;
 }

 .user-list-head {
  display: none;
 }

 .userList li {
  grid-template-columns: 24px 1fr auto;
  gap: 8px 12px;
  align-items: start;
 }

 .userList li .select-user {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  margin-top: 4px;
 }

 .userList li .removeBtn {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  align-self: start;
 }

 .userList li .user-name,
 .userList li .user-dept,
 .userList li .user-mail,
 .userList li .user-email {
  grid-column: 2 / 3;
  min-width: 0;
  padding-left: 58px;
  position: relative;
  white-space: normal;
  word-break: break-all;
 }

 .userList li .user-name::before,
 .userList li .user-dept::before,
 .userList li .user-mail::before,
 .userList li .user-email::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 0;
  color: #5f7082;
  font-size: 12px;
  font-weight: 700;
 }
}

@media (max-width: 640px) {
 .page-shell {
  padding: 12px 14px 24px;
 }

 .card-header,
 .card-body {
  padding: 18px;
 }

 .template-preview-frame,
 #templateBody {
  min-height: 420px;
 }

 .top-action-left,
 .top-action-right {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
 }

 .btn-ui {
  width: 100%;
 }

 .user-add-panel {
  grid-template-columns: 1fr;
 }

 .email-domain-container {
  flex-direction: column;
  align-items: stretch;
 }

 .email-domain-container select,
 .email-domain-container input,
 .user-add-panel > input[type="text"],
 .btn-add-user {
  width: 100%;
 }

 .selection-chip {
  width: 100%;
 }

 .selection-chip .count {
  flex: 1;
  justify-content: center;
 }

 #userList {
  max-height: 420px;
 }

 .user-list-tools .left-tools,
 .user-list-tools .right-tools {
  justify-content: space-between;
 }
}

.editor-wrap {
 width: 100%;
 max-width: 100%;
 min-width: 0;
 border: 1px solid #d7e1ec;
 border-radius: 14px;
 background: #fff;
 overflow: hidden;
}

.editor-topbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 10px;
 padding: 12px 14px;
 border-bottom: 1px solid #edf2f7;
 background: #f8fbff;
}

.editor-title {
 font-size: 14px;
 font-weight: 800;
 color: #334155;
}

.editor-badge {
 display: inline-flex;
 align-items: center;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 background: #e8f0fd;
 color: #2451a6;
 font-size: 12px;
 font-weight: 700;
}

.training-template-editor #templateBody {
 width: 100% !important;
 max-width: 100%;
 height: 560px;
 border: 0;
 resize: none;
 box-sizing: border-box;
}

.training-host-page {
 background-color: #f4f6f8;
 padding-bottom: 30px;
}

.training-host-page .form-container {
 width: 1300px;
 max-width: 100%;
 margin: 50px auto;
 background-color: #ffffff;
 padding: 30px;
 border-radius: 8px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.training-host-page .form-container h2 {
 margin-bottom: 20px;
 font-size: 20px;
 color: #333;
}

.training-host-page .form-group {
 margin-bottom: 15px;
}

.training-host-page .form-group label {
 display: block;
 margin-bottom: 6px;
 color: #555;
 font-weight: 700;
}

.training-host-page .form-group input {
 width: 100%;
 padding: 8px 10px;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-size: 14px;
}

.training-host-page .form-group input:focus {
 outline: none;
 border-color: #007bff;
 background-color: #f0f8ff;
}

.training-host-page .form-actions {
 text-align: right;
}

.training-host-page .form-actions .btn {
 min-height: 40px;
 padding: 10px 16px;
 border-radius: 4px;
}

body.training-mail-notice {
 width: 100%;
 height: 100%;
 margin: 0;
 overflow: hidden;
 font-family: Arial, "Malgun Gothic", sans-serif;
 background: radial-gradient(circle at top, rgba(180, 0, 0, 0.18), transparent 35%), linear-gradient(180deg, #111 0%, #050505 100%);
 color: #f2f2f2;
}
body.training-mail-notice .start-screen { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #f7f9fc 0%, #eaf1f8 100%); }
body.training-mail-notice .start-box { width: min(420px, 92vw); padding: 32px 28px; border: 1px solid #d7e2ee; border-radius: 16px; background: #ffffff; box-shadow: 0 18px 40px rgba(31, 41, 55, 0.12); text-align: center; }
body.training-mail-notice .start-title { margin-bottom: 12px; color: #1e3a5f; font-size: 22px; font-weight: 700; letter-spacing: 0.3px; }
body.training-mail-notice .start-desc { margin-bottom: 22px; color: #5b6b7f; font-size: 14px; line-height: 1.7; }
body.training-mail-notice .birth-input { width: 100%; height: 52px; margin-bottom: 15px; padding: 0 16px; border: 1px solid #c7d4e2; border-radius: 10px; background: #f8fbff; color: #1f2937; font-size: 18px; text-align: center; outline: none; }
body.training-mail-notice .birth-input:focus { border-color: #5b8def; box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.16); }
body.training-mail-notice .birth-input::placeholder { color: #94a3b8; }
body.training-mail-notice .start-btn { width: 100%; height: 52px; border: 1px solid #2f5ea8; border-radius: 10px; background: linear-gradient(180deg, #3d74c5 0%, #2f5ea8 100%); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; }
body.training-mail-notice .start-btn:hover { background: linear-gradient(180deg, #477fd1 0%, #3568b5 100%); transform: translateY(-1px); }
body.training-mail-notice .start-note { margin-top: 14px; color: #6b7c93; font-size: 12px; line-height: 1.6; }
body.training-mail-notice .start-error { min-height: 20px; color: #d14343; font-size: 13px; }
body.training-mail-notice .app { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 18px; }
body.training-mail-notice .wrap { width: min(1100px, 94vw); height: min(900px, 92vh); display: flex; flex-direction: column; overflow: hidden; border: 2px solid #7a0000; border-radius: 14px; background: rgba(15, 15, 15, 0.97); box-shadow: 0 0 40px rgba(255, 0, 0, 0.18); }
body.training-mail-notice .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #8c1a1a; background: linear-gradient(90deg, #4d0000, #1a0000); }
body.training-mail-notice .topbar .title { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }
body.training-mail-notice .topbar .badge { padding: 6px 10px; border: 1px solid #c97b7b; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #ffdada; font-size: 13px; }
body.training-mail-notice .content { flex: 1; display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 0; }
body.training-mail-notice .left { display: flex; flex-direction: column; justify-content: space-between; padding: 36px 34px 24px; border-right: 1px solid #252525; }
body.training-mail-notice .right { display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; background: rgba(255, 255, 255, 0.02); }
body.training-mail-notice .danger { margin-bottom: 8px; color: #ff5c5c; font-size: 18px; font-weight: 700; }
body.training-mail-notice .headline { margin: 0 0 16px; font-size: 42px; line-height: 1.2; font-weight: 800; }
body.training-mail-notice .desc { margin: 0 0 14px; color: #d8d8d8; font-size: 18px; line-height: 1.7; }
body.training-mail-notice .desc strong { color: #ffffff; }
body.training-mail-notice .warning-box { margin-top: 20px; padding: 18px 20px; border: 1px solid #6b2626; border-radius: 10px; background: rgba(255, 0, 0, 0.08); }
body.training-mail-notice .warning-box h3 { margin: 0 0 10px; color: #ff9f9f; font-size: 18px; }
body.training-mail-notice .warning-box ul { margin: 0; padding-left: 18px; color: #efefef; line-height: 1.8; }
body.training-mail-notice .panel { padding: 16px; border: 1px solid #353535; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
body.training-mail-notice .panel h4 { margin: 0 0 10px; color: #ffb5b5; font-size: 15px; }
body.training-mail-notice .countdown { margin: 8px 0 10px; color: #ffffff; font-size: 44px; font-weight: 800; letter-spacing: 1px; }
body.training-mail-notice .small { color: #bdbdbd; font-size: 13px; line-height: 1.6; }
body.training-mail-notice .progress-wrap { margin-top: 12px; }
body.training-mail-notice .progress-label { margin-bottom: 8px; color: #dcdcdc; font-size: 13px; }
body.training-mail-notice .progress { width: 100%; height: 12px; overflow: hidden; border: 1px solid #313131; border-radius: 999px; background: #1f1f1f; }
body.training-mail-notice .progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #7d0000, #ff2c2c); transition: width 1s linear; }
body.training-mail-notice .status-list { display: flex; flex-direction: column; gap: 10px; }
body.training-mail-notice .status-item { padding: 12px 14px; border: 1px solid #2e2e2e; border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: #d6d6d6; font-size: 14px; }
body.training-mail-notice .status-item.active { border-color: #9a2d2d; background: rgba(255, 0, 0, 0.08); color: #fff; }
body.training-mail-notice .footer { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 24px 24px; border-top: 1px solid #252525; background: #0e0e0e; }
body.training-mail-notice .btn { padding: 13px 18px; border: 0; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease; }
body.training-mail-notice .btn:hover { transform: translateY(-1px); opacity: 0.95; }
body.training-mail-notice .btn-dark { border: 1px solid #454545; background: #2a2a2a; color: #fff; }
body.training-mail-notice .btn-safe { background: #1f6f43; color: #fff; }
body.training-mail-notice .notice { margin-left: auto; align-self: center; color: #aaaaaa; font-size: 13px; }
body.training-mail-notice .modal-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.65); }
body.training-mail-notice .modal { width: min(560px, 92vw); padding: 24px; border: 1px solid #4a4a4a; border-radius: 14px; background: #141414; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
body.training-mail-notice .modal h3 { margin: 0 0 12px; color: #ffffff; font-size: 24px; }
body.training-mail-notice .modal p { margin: 0 0 10px; color: #d4d4d4; line-height: 1.7; }
body.training-mail-notice .modal .guide { margin-top: 14px; padding: 14px; border: 1px solid #2f2f2f; border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: #ededed; line-height: 1.8; }
body.training-mail-notice .modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 920px) {
 body.training-mail-notice .content { grid-template-columns: 1fr; }
 body.training-mail-notice .left { border-right: 0; border-bottom: 1px solid #252525; }
 body.training-mail-notice .headline { font-size: 32px; }
 body.training-mail-notice .notice { width: 100%; margin-left: 0; }
}

.training-template-editor.page-shell {
 max-width: 1280px;
 padding: 20px 24px 40px;
}

.training-template-editor .content-card {
 width: 1160px;
}

.training-template-editor .preview-wrap {
 overflow: hidden;
}

@media (max-width: 1200px) {
 .training-template-editor.page-shell {
  max-width: 100%;
  padding: 16px;
 }

 .training-template-editor .content-card {
  width: 100%;
 }
}

@media (max-width: 640px) {
 .card-header--collapsible {
  align-items: flex-start;
 }

 .card-toggle-btn {
  margin-left: auto;
 }

 .training-template-editor.page-shell {
  padding: 12px 14px 24px;
 }

 .template-editor-preview .template-preview-frame,
 .training-template-editor #templateBody {
  height: 420px;
  min-height: 420px;
 }
}