:root {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  color: #243447;
  background: #f5f7f9;
  --brand: #176b87;
  --brand-soft: #e9f4f7;
  --text-muted: #66798a;
  --border: #dce3ea;
  --status-pending: #56718c;
  --status-pending-bg: #f5f8fa;
  --status-success: #176b42;
  --status-success-bg: #ebf8ef;
  --status-success-border: #9dd7ac;
  --status-error: #a32626;
  --status-error-bg: #fff0f0;
  --status-error-border: #efb1b1;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; }
@media (min-width: 621px) {
  body { zoom: .8; }
}
main { position: relative; width: 100%; max-width: 1030px; flex: 1; margin: auto; padding: 30px 20px; }
.monitor-body main { max-width: 1460px; }
.schedule-body main { max-width: 1460px; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.site-header { position: sticky; top: 0; z-index: 30; margin-inline: -20px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: #f5f7f9f2; backdrop-filter: blur(12px); }
.header-actions { display: flex; gap: 8px; }
h1, h2, h3, p { margin-top: 0; }
.result-status { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: #56718c; }
h1 { margin-bottom: 0; font-size: 1.4rem; line-height: 1.25; }
h2 { margin-bottom: 10px; font-size: 1.15rem; line-height: 1.35; }
h3 { margin-bottom: 8px; font-size: .98rem; line-height: 1.4; }
p { margin-bottom: 12px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: 0 5px 16px #17203309; }
.narrow { max-width: 460px; margin: auto; }
form, label { display: grid; gap: 7px; }
form { gap: 15px; }
input, select, textarea { width: 100%; border: 1px solid #bcc8d4; border-radius: 7px; padding: 9px 10px; font: inherit; }
.search-select { position: relative; width: 100%; }
.selection-search { padding: 11px; background: #fff; }
.selection-search:focus { outline: 2px solid #8fc8d8; outline-offset: 1px; }
.selection-search.input-invalid { border-color: #b42318; box-shadow: 0 0 0 2px #fde1e1; }
.search-select-options { position: absolute; z-index: 10; top: calc(100% + 5px); left: 0; right: 0; max-height: 220px; overflow: auto; padding: 5px; border: 1px solid #bcc8d4; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px #17203324; }
.search-select-options button { display: block; width: 100%; padding: 9px 10px; border-radius: 6px; background: transparent; color: #263b4b; text-align: left; font-weight: 500; }
.search-select-options button:hover, .search-select-options button.selected { background: #e9f4f7; color: #176b87; }
.search-select-empty { margin: 7px; color: #66798a; font-size: .86rem; }
button { appearance: none; border: 0; border-radius: 7px; padding: 9px 13px; background: var(--brand); color: #fff; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
button.secondary { background: #e9eff3; color: #263b4b; }
.page-link, .button-link { display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; padding: 9px 13px; background: #e9eff3; color: #263b4b; font-size: .86rem; font-weight: 700; text-decoration: none; }
.button-link { background: var(--brand); color: #fff; }
.password-field { display: flex; gap: 8px; }
.password-field input { flex: 1; min-width: 0; }
.password-field button { display: grid; place-items: center; flex: 0 0 auto; width: 42px; padding: 8px; }
.password-field svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.login-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.login-links button { padding: 9px 6px; font-size: .82rem; }
dialog { width: min(420px, calc(100% - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: 16px; padding: 0; box-shadow: 0 20px 50px #17203340; }
dialog::backdrop { background: #17203380; }
.loading-dialog { width: min(300px, calc(100% - 32px)); }
.loading-dialog .dialog-content { display: grid; justify-items: center; gap: 12px; padding: 32px 28px; }
.loading-dialog h2, .loading-dialog p { margin: 0; }
.loading-dialog p { color: #56718c; }
.loading-spinner { width: 38px; height: 38px; border: 4px solid #d7eef5; border-top-color: #176b87; border-radius: 50%; animation: loading-spin .8s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
dialog form, .dialog-content { padding: 28px; text-align: center; }
dialog form { overflow: auto; }
dialog form label { text-align: left; }
.schedule-form-dialog { width: min(560px, calc(100% - 32px)); }
.schedule-form-dialog form { padding: 30px; }
.schedule-form-dialog h2 { margin-bottom: 22px; }
.checkbox { display: flex; align-items: center; gap: 8px; }
.checkbox input { width: auto; }
.form-help { margin: -4px 0 4px; color: #56718c; font-size: .88rem; }
.flow-step-list { display: grid; gap: 12px; margin: 16px 0; text-align: left; }
.flow-step { display: grid; grid-template-columns: 1fr 110px; gap: 10px; padding: 14px; border: 1px solid #dce3ea; border-radius: 9px; background: #f8fafb; }
.flow-step label { grid-column: 1 / -1; margin: 0; }
.flow-step .flow-step-remove { grid-column: 2; }
.dialog-actions { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.dialog-actions button { min-width: 120px; }
.profile-details { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 20px 0; text-align: left; }
.profile-details dt, .result-meta dt { font-weight: 700; color: #56718c; }
.profile-details dd { margin: 0; overflow-wrap: anywhere; }
.profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.danger { background: #b42318; border-color: #b42318; color: #fff; }
.danger:hover { background: #8f1c13; border-color: #8f1c13; }
#login-error-message { color: #a32626; white-space: pre-wrap; }
.menu-toggle { display: grid; place-items: center; width: 38px; padding: 8px; }
.menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.9; }
.main-menu { position: absolute; z-index: 50; top: 82px; right: 20px; display: grid; grid-template-columns: 1fr; gap: 5px; width: min(260px, calc(100% - 40px)); padding: 7px; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px #17203324; }
#main-menu { position: fixed; top: 86px; right: max(20px, calc((100vw - 1030px) / 2 + 20px)); }
.main-menu[hidden] { display: none; }
.header-actions { position: relative; }
.header-menu { top: calc(100% + 8px); right: 0; }
.header-menu { width: 260px; }
.header-menu .menu-link { justify-content: flex-start; }
.menu-test-group { grid-column: auto; }
.menu-root-button, .menu-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding-left: 11px; color: #40576a; font-size: .8rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.menu-root-button svg, .menu-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.main-menu button { flex: 1; border-radius: 5px; padding: 7px 8px; background: transparent; color: #40576a; font-size: .8rem; font-weight: 700; text-align: center; }
.menu-link { border-radius: 7px; padding: 8px 10px; }
.main-menu button:hover, .menu-link:hover { background: #e1edf2; }
.main-menu button.active, .product.active { background: #176b87; color: #fff; }
.test-step-menu { display: flex; gap: 4px; margin-bottom: 14px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
.test-step-menu button { flex: 1; padding: 8px 10px; background: transparent; color: #526b7d; }
.test-step-menu button.active { background: var(--brand); color: #fff; }
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.product { min-height: 72px; background: #edf3f6; color: #263b4b; text-align: left; }
.product-entry-message { margin: 18px 0; padding: 14px 16px; border: 1px solid #dce3ea; border-radius: 10px; background: #f5f8fa; font-weight: 700; }
.product-entry-message.success { color: var(--status-success); background: var(--status-success-bg); border-color: var(--status-success-border); }
.product-entry-message.error { color: var(--status-error); background: var(--status-error-bg); border-color: var(--status-error-border); }
.test-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.auto-test-message { min-height: 1.25em; margin-bottom: 16px; color: #176b87; font-weight: 700; }
.step > button { margin-top: 20px; }
.list { display: grid; gap: 8px; margin-top: 22px; }
.item { display: flex; justify-content: space-between; background: #f5f8fa; color: #243946; text-align: left; }
.schedule-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.schedule-actions button { padding: 7px 9px; border: 1px solid transparent; font-size: .78rem; white-space: nowrap; }
button:disabled { cursor: progress; opacity: .62; }
.schedule-runs { border-top: 1px solid #e1e8ed; }
.schedule-error { color: var(--status-error) !important; overflow-wrap: anywhere; }
.schedule-page { padding: 0; overflow: hidden; }
.schedule-page-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 24px 20px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, #fbfdfe, #f1f7f9); }
.schedule-page-header h2 { margin-bottom: 8px; }
.schedule-page-header p:last-child { max-width: 580px; margin-bottom: 0; color: #56718c; font-size: .92rem; line-height: 1.65; word-break: keep-all; }
.schedule-page-header button { flex: 0 0 auto; box-shadow: 0 5px 12px #176b8726; }
.schedule-page-content { padding: 22px 24px; }
.schedule-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.schedule-section-heading > button { min-width: 112px; }
.schedule-section-heading h3 { margin-bottom: 4px; font-size: 1rem; }
.schedule-section-heading p { margin-bottom: 0; color: #718396; font-size: .84rem; line-height: 1.55; word-break: keep-all; }
.schedule-table-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid #dce3ea; border-radius: 10px; background: #fff; }
.schedule-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .8rem; }
.schedule-table th { padding: 10px 12px; border-bottom: 1px solid #cfdbe4; background: #f3f7f9; color: #526b7d; font-size: .69rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.schedule-table td { padding: 10px 12px; border-bottom: 1px solid #e7edf1; vertical-align: middle; }
.schedule-table th, .schedule-table td { word-break: keep-all; }
.schedule-table th:last-child, .schedule-table td:last-child { position: sticky; right: 0; z-index: 2; background: #fff; box-shadow: -8px 0 12px #1720330a; }
.schedule-table th:last-child { z-index: 3; background: #f3f7f9; }
.schedule-table tbody tr:last-child td { border-bottom: 0; }
.schedule-table tbody tr:hover { background: #f8fbfc; }
.schedule-table tbody tr:hover td:last-child { background: #f8fbfc; }
.schedule-table strong, .schedule-table small { display: block; }
.schedule-table small { margin-top: 4px; color: #718396; font-size: .76rem; }
.status-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; background: var(--status-pending-bg); color: var(--status-pending); font-size: .72rem; font-weight: 800; }
.status-chip.active, .status-chip.passed { background: var(--status-success-bg); color: var(--status-success); }
.status-chip.paused { background: #f1f3f5; color: #66798a; }
.status-chip.failed { background: var(--status-error-bg); color: var(--status-error); }
.status-chip.running { gap: 5px; background: #e6f0ff; color: #1d5fb8; }
.inline-spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .75s linear infinite; }
.api-check-running { background: #f8fbff; }
@keyframes spin { to { transform: rotate(360deg); } }
.table-empty { padding: 30px !important; color: #718396; text-align: center; }
.status-page { padding: 0; overflow: hidden; }
.status-page-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
.status-page-header h2 { margin-bottom: 5px; }
.status-page-header p { margin-bottom: 0; color: var(--text-muted); font-size: .88rem; }
.status-updated { margin: 14px 24px 0; color: #718396; font-size: .78rem; text-align: right; }
.status-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 24px 24px; }
.status-card { display: grid; grid-template-columns: auto 1fr; gap: 10px; min-height: 112px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcfd; }
.status-card p { margin-bottom: 3px; color: #526b7d; font-size: .78rem; font-weight: 700; }
.status-card strong { display: block; margin-bottom: 5px; color: var(--status-success); font-size: 1rem; }
.status-card small { display: block; color: #718396; font-size: .76rem; line-height: 1.45; }
.status-indicator { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 0 4px var(--status-success-bg); }
.status-card.failed { border-color: var(--status-error-border); background: var(--status-error-bg); }
.status-card.failed strong { color: var(--status-error); }
.status-card.failed .status-indicator { background: var(--status-error); box-shadow: 0 0 0 4px #fde1e1; }
.recipient-list { display: grid; gap: 7px; margin: 14px 0; text-align: left; }
.recipient-list > p { margin: 0; color: var(--text-muted); font-size: .86rem; text-align: center; }
.recipient-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: #f8fafb; }
.recipient-item span { overflow-wrap: anywhere; }
.recipient-item button { width: 28px; padding: 3px; color: #718396; font-size: 1rem; }
html[lang="ko"] .schedule-table { letter-spacing: -.012em; }
html[lang="ko"] .schedule-table th { letter-spacing: -.01em; }
html[lang="ko"] .schedule-actions button { min-width: 56px; }
.share { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 22px; }
#qr-image { max-width: 220px; margin-top: 16px; border: 1px solid #dce3ea; border-radius: 8px; padding: 8px; }
#qr-image:not([src]), #qr-image[src=""] { display: none; }
.public-result { max-width: 620px; margin: 12vh auto; padding: 36px; background: #fff; border-radius: 16px; box-shadow: 0 8px 24px #17203315; }

/* Result & Share */
.test-report { margin-bottom: 18px; padding: 20px 22px; border: 1px solid #dce3ea; border-radius: 14px; background: #fbfcfd; }
.test-report-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.test-report-heading h3 { margin-bottom: 0; }
.test-report-heading p { margin-bottom: 0; color: #56718c; font-size: .9rem; }
.test-report-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; margin: 18px 0 0; list-style: none; }
.test-report-list li { display: grid; gap: 5px; min-height: 88px; padding: 12px; border: 1px solid #dce3ea; border-radius: 10px; background: #fff; border-left-width: 4px; }
.test-report-list strong { font-size: .84rem; color: #40576a; }
.test-report-list span { font-size: .82rem; color: #56718c; overflow-wrap: anywhere; }
.test-report-list .passed { border-color: var(--status-success-border); border-left-color: var(--status-success); background: var(--status-success-bg); }
.test-report-list .passed strong, .test-report-list .passed span { color: var(--status-success); }
.test-report-list .failed { border-color: var(--status-error-border); border-left-color: var(--status-error); background: var(--status-error-bg); }
.test-report-list .failed strong, .test-report-list .failed span { color: var(--status-error); }
.test-report-list .pending { border-color: #dce3ea; border-left-color: var(--status-pending); background: var(--status-pending-bg); }
.result-empty { display: grid; gap: 8px; place-items: center; min-height: 180px; border: 1px dashed #bcc8d4; border-radius: 14px; color: #56718c; text-align: center; }
.result-empty strong { color: #263b4b; font-size: 1.05rem; }
.result-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 22px; border: 1px solid #cfe1e8; border-radius: 14px; background: linear-gradient(135deg, #edf7fa, #f8fbfc); }
.result-status { display: inline-flex; margin-bottom: 10px; padding: 5px 9px; border-radius: 99px; background: #d7eef5; color: #176b87; }
.result-summary h3 { margin-bottom: 8px; font-size: 1.35rem; }
.result-summary p:last-child { margin-bottom: 0; color: #40576a; }
.result-meta { display: grid; align-content: start; gap: 14px; min-width: 150px; margin: 0; }
.result-meta div { padding-left: 14px; border-left: 2px solid #8fc8d8; }
.result-meta dd { margin: 3px 0 0; font-weight: 700; }
.result-meta code { padding: 2px 6px; border-radius: 5px; background: #fff; color: #176b87; }
.share-panel { margin-top: 18px; padding: 22px; border: 1px solid #dce3ea; border-radius: 14px; }
.share-heading { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.share-heading h3 { margin-bottom: 0; }
.share-heading p { margin-bottom: 0; color: #56718c; font-size: .9rem; }
.share-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 18px; }
.share-actions form { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(118px, .42fr) auto; align-items: end; gap: 10px; }
.share-actions form label { margin: 0; }
.share-actions button { min-height: 43px; white-space: nowrap; }
#share-message { min-height: 1.25em; margin: 16px 0 0; color: #176b87; font-weight: 700; }
.share-panel #qr-image { display: block; margin-inline: auto; }
.share-panel #qr-image[hidden], .share-panel #qr-image:not([src]), .share-panel #qr-image[src=""] { display: none; }
.site-footer { width: 100%; margin-top: auto; border-top: 1px solid #dce3ea; background: #fff; color: #66798a; font-size: .78rem; }
.site-footer > div { width: min(920px, 100%); margin: auto; padding: 18px 22px; display: flex; gap: 9px; align-items: center; }
.monitor-body .site-footer > div { width: min(1460px, 100%); }
.schedule-body .site-footer > div { width: min(1460px, 100%); }
.footer-divider { color: #a6b4bf; }

@media (max-width: 620px) {
  main { padding: 22px 14px; }
  .site-header { margin-inline: -14px; padding: 12px 14px; }
  .monitor-body main { max-width: 100%; }
  .schedule-body main { max-width: 100%; }
  .products, .share, .login-links, .share-actions, .share-actions form, .result-summary, .profile-actions, .test-report-list { grid-template-columns: 1fr; }
  .main-menu { top: 74px; right: 14px; width: calc(100% - 28px); }
  #main-menu { position: fixed; right: 14px; }
  .header-menu { width: min(260px, calc(100vw - 28px)); }
  .menu-test-group { display: grid; gap: 6px; }
  .menu-link { justify-content: flex-start; }
  .test-step-menu { overflow-x: auto; }
  .test-step-menu button { min-width: 68px; }
  .dialog-actions { flex-direction: column; }
  .item { display: grid; gap: 4px; }
  .share-heading { display: grid; gap: 6px; }
  .test-report-heading { display: grid; gap: 6px; }
  .result-meta { grid-template-columns: repeat(2, 1fr); }
  .test-actions { display: grid; grid-template-columns: 1fr; }
  .site-footer > div { justify-content: center; padding: 16px; }
  .schedule-page-header { display: grid; padding: 20px 18px 18px; }
  .schedule-page-header button { width: 100%; }
  .schedule-page-content { padding: 18px; }
  .schedule-form-dialog form { padding: 20px 18px; }
  .schedule-section-heading { display: grid; gap: 5px; }
  .status-page-header { display: grid; padding: 20px 18px 14px; }
  .status-page-header button { width: 100%; }
  .status-updated { margin: 12px 18px 0; text-align: left; }
  .status-cards { grid-template-columns: 1fr; padding: 16px 18px 20px; }
}