:root {
    --navy: #16243a;
    --muted: #68758a;
    --line: #dfe5ed;
    --surface: #ffffff;
    --background: #f3f6fa;
    --blue: #3268dc;
    --green: #168565;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--navy);
    background: var(--background);
    font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 12px 4vw;
    color: #fff;
    background: var(--navy);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}
.brand-mark img { display: block; width: 38px; height: 34px; object-fit: contain; }
.brand-lockup { display: flex; align-items: center; width: 190px; height: 54px; overflow: hidden; border-radius: 8px; background: #fff; }
.brand-lockup img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand strong, .brand span { display: block; }
.brand span { margin-top: 2px; color: #aeb9ca; font-size: 12px; }
.stage { color: #c8d2e1; font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.topbar { flex-wrap: wrap; }
.main-nav { order: 3; display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.main-nav a { padding: 9px 9px; border-radius: 8px; color: #d7deea; font-size: 12px; text-decoration: none; white-space: nowrap; }
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.09); }
.main-nav a.active { color: #17253d; background: #fff; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.top-actions form { margin: 0; }
.operator { color: #d7deea; font-size: 13px; }
.logout-button { padding: 7px 11px; border: 1px solid #627087; border-radius: 8px; color: #fff; background: transparent; cursor: pointer; }

.container { width: min(1120px, 92vw); margin: 0 auto; padding: 54px 0 70px; }
.intro { max-width: 770px; }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.intro h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.25; }
.intro > p:last-child { color: var(--muted); font-size: 16px; line-height: 1.8; }

.type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.type-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--blue);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 12px 36px rgba(28, 43, 68, .07);
}
.type-card.green { border-top-color: var(--green); }
.type-card-head { display: flex; align-items: center; justify-content: space-between; }
.type-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    color: #fff;
    background: var(--blue);
    font-size: 21px;
    font-weight: 800;
}
.green .type-icon { background: var(--green); }
.status { padding: 6px 10px; border-radius: 99px; color: #317059; background: #e9f7f1; font-size: 12px; }
.type-card h2 { margin: 22px 0 8px; font-size: 26px; }
.type-card > p { min-height: 48px; margin: 0; color: var(--muted); line-height: 1.6; }
dl { margin: 22px 0; border-top: 1px solid var(--line); }
dl div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); font-size: 13px; }
dd { margin: 0; font-size: 13px; font-weight: 700; text-align: right; }
.select-button {
    display: block;
    width: 100%;
    padding: 13px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--blue);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
.green .select-button { background: var(--green); }
.select-button:hover { filter: brightness(.94); }

.flow-card { display: grid; grid-template-columns: 230px 1fr; gap: 28px; margin-top: 26px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.flow-card h2 { margin: 0; font-size: 21px; }
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.flow li { position: relative; color: var(--muted); font-size: 12px; line-height: 1.45; }
.flow li span { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; color: #fff; background: var(--navy); font-weight: 700; }
.flow li:not(:last-child):after { content: ""; position: absolute; top: 15px; left: 38px; right: 8px; height: 1px; background: var(--line); }


.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; background: radial-gradient(circle at top, #e4edff, var(--background) 48%); }
.auth-card { width: min(430px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 22px 60px rgba(28, 43, 68, .12); }
.auth-card.wide { width: min(520px, 100%); }
.auth-brand { display: flex; align-items: center; margin-bottom: 32px; }
.auth-brand .brand-logo { display: block; width: min(300px, 100%); height: auto; }
.auth-brand .brand-mark { width: 54px; height: 50px; background: transparent; }
.auth-brand .brand-mark img { width: 54px; height: 48px; }
.auth-brand strong { font-size: 18px; }
.auth-card h1 { margin: 0; font-size: 28px; }
.auth-description { margin: 12px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.auth-form { display: grid; gap: 9px; }
.auth-form label { margin-top: 8px; font-size: 13px; font-weight: 700; }
.auth-form label small { color: var(--muted); font-weight: 400; }
.auth-form input { width: 100%; padding: 12px 13px; border: 1px solid #cbd4e1; border-radius: 9px; font: inherit; }
.auth-form input:focus { border-color: var(--blue); outline: 3px solid rgba(50, 104, 220, .12); }
.auth-submit { margin-top: 14px; padding: 13px; border: 0; border-radius: 9px; color: #fff; background: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.auth-submit:disabled { cursor: not-allowed; opacity: .45; }
.form-error { padding: 11px 13px; border-radius: 9px; color: #a32626; background: #fff0f0; font-size: 13px; }
.setup-notice { padding: 12px 14px; border: 1px solid #efd89e; border-radius: 9px; color: #70571e; background: #fff9e9; font-size: 13px; line-height: 1.55; }

.management-page { padding-top: 40px; }
.page-heading h1 { margin: 0; font-size: 34px; }
.page-heading p:last-child { margin-bottom: 0; color: var(--muted); }
.management-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; margin-top: 28px; align-items: start; }
.panel { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(28,43,68,.06); }
.panel h2 { margin: 0 0 20px; font-size: 20px; }
.form-panel { display: grid; gap: 9px; }
.form-panel label { margin-top: 7px; font-size: 13px; font-weight: 700; }
.form-panel input, .form-panel select { width: 100%; padding: 11px 12px; border: 1px solid #cbd4e1; border-radius: 8px; background: #fff; font: inherit; }
.primary-button { margin-top: 12px; padding: 12px; border: 0; border-radius: 9px; color: #fff; background: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.primary-button:disabled { opacity: .45; cursor: not-allowed; }
.panel-title { display: flex; justify-content: space-between; align-items: center; }
.panel-title span { color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 10px; border-bottom: 1px solid var(--line); font-size: 13px; text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: 12px; }
td small { display: block; margin-top: 4px; color: var(--muted); }
td form { margin: 0; }
.danger-link { padding:6px 9px; border:1px solid #c93643; border-radius:7px; color:#b52230; background:#fff; cursor:pointer; font-size:12px; font-weight:700; white-space:nowrap; }
.danger-link:hover { color:#fff; background:#c93643; }
.empty-state { padding: 40px 12px; color: var(--muted); text-align: center; }
.form-notice { padding: 11px 13px; border-radius: 9px; color: #176a51; background: #e9f7f1; font-size: 13px; }
.field-help { margin: 0; color: var(--muted); font-size: 12px; }
.type-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:7px 0 0; padding:4px; border:1px solid #cbd4e1; border-radius:10px; background:#edf1f6; }
.type-switch legend { padding:0; margin-bottom:7px; color:var(--navy); font-size:13px; font-weight:700; }
.type-switch label { position:relative; margin:0; cursor:pointer; }
.type-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.type-switch span { display:block; padding:10px 8px; border-radius:7px; color:var(--muted); text-align:center; font-size:13px; font-weight:700; }
.type-switch input:checked + span { color:#fff; background:var(--navy); box-shadow:0 2px 7px rgba(22,36,58,.2); }
.type-switch input:focus + span { outline:3px solid rgba(50,104,220,.18); }
.type-badge { display: inline-block; padding: 5px 9px; border-radius: 99px; color: #2458ba; background: #edf3ff; font-size: 12px; white-space:nowrap; }
.type-badge.dasasys { color: #176a51; background: #e9f7f1; }
.token-result { margin-top: 22px; padding: 18px; border: 1px solid #e5c56e; border-radius: 12px; background: #fff9e8; }
.token-result strong { display: block; margin-bottom: 10px; color: #70571e; font-size: 13px; }
.token-result code { display: block; padding: 12px; overflow-wrap: anywhere; border-radius: 8px; background: #fff; font-size: 14px; }
.token-result .install-open-form { margin-top: 12px; }
.token-result .install-open-form .primary-button { width: auto; margin-top: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 28px; }
.summary-grid a { padding: 18px; border: 1px solid var(--line); border-radius: 14px; color: var(--navy); background: #fff; text-decoration: none; }
.summary-grid span { display: block; color: var(--muted); font-size: 12px; }
.summary-grid strong { display: block; margin-top: 8px; font-size: 28px; }
.filter-tabs { display: flex; gap: 8px; margin: 24px 0 14px; }
.filter-tabs a { padding: 8px 13px; border-radius: 99px; color: var(--muted); background: #fff; text-decoration: none; font-size: 13px; }
.filter-tabs a.active { color: #fff; background: var(--navy); }
.history-panel { margin-top: 0; }
.event-badge { display: inline-block; padding: 5px 8px; border-radius: 99px; color: #2458ba; background: #edf3ff; font-size: 11px; }
.event-badge.success { color: #176a51; background: #e9f7f1; }
.event-badge.failed { color: #a32626; background: #fff0f0; }
.form-panel textarea { width: 100%; padding: 11px 12px; border: 1px solid #cbd4e1; border-radius: 8px; resize: vertical; font: inherit; }
.operation-list { display: grid; gap: 12px; margin-top: 24px; }
.operation-row { display: grid; grid-template-columns: 1.5fr repeat(5,minmax(110px,1fr)) auto; gap: 10px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.operation-row label { color: var(--muted); font-size: 11px; }
.operation-row input,.operation-row select { width: 100%; margin-top: 5px; padding: 8px; border: 1px solid #cbd4e1; border-radius: 7px; background:#fff; }
.operation-site strong,.operation-site span { display:block; }
.operation-site span { margin-top:5px;color:var(--muted);font-size:12px; }
.small-button { padding:9px 13px;border:0;border-radius:8px;color:#fff;background:var(--navy);cursor:pointer; }
.edit-link { display:inline-block; padding:7px 10px; border-radius:7px; color:#fff; background:var(--navy); text-decoration:none; font-size:12px; font-weight:700; white-space:nowrap; }
.operator-edit-panel { margin-bottom:18px; }
.operator-edit-panel .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
.operator-edit-actions { display:flex; align-items:center; gap:9px; margin-top:12px; }
.operator-edit-actions .primary-button { width:auto; margin-top:0; padding:10px 18px; }
.cancel-link { padding:9px 12px; color:#45566f; text-decoration:none; font-size:13px; }
.form-cancel { text-align:center; }
.site-actions { display:flex; align-items:center; gap:7px; flex-wrap:nowrap; white-space:nowrap; }
.site-management-page .table-wrap { overflow-x:visible; }
.site-list-table { width:100%; min-width:0; table-layout:fixed; }
.site-list-table th:nth-child(1),.site-list-table td:nth-child(1) { width:92px; white-space:nowrap; }
.site-list-table th:nth-child(2),.site-list-table td:nth-child(2) { width:180px; }
.site-list-table th:nth-child(3),.site-list-table td:nth-child(3) { width:150px; white-space:nowrap; }
.site-list-table th:nth-child(4),.site-list-table td:nth-child(4) { width:200px; overflow-wrap:anywhere; }
.site-list-table th:nth-child(5),.site-list-table td:nth-child(5) { width:78px; white-space:nowrap; }
.site-list-table th:nth-child(6),.site-list-table td:nth-child(6) { width:100px; white-space:nowrap; }
.site-management-page.container { width:min(1400px,96vw); }
.site-management-page .management-grid { grid-template-columns:320px minmax(0,1fr); }
.list-title-group { display:flex; align-items:center; gap:14px; }
.list-title-group h2 { margin-bottom:0; }
.sort-form { display:flex; align-items:center; gap:6px; }
.sort-form label { color:var(--muted); font-size:12px; font-weight:700; }
.sort-form select { padding:7px 28px 7px 9px; border:1px solid #cbd4e1; border-radius:7px; color:var(--navy); background:#fff; font:inherit; font-size:12px; }
.site-url { color:#2458ba; text-decoration:none; }
.site-url:hover { text-decoration:underline; }
.domain-tooltip { position:relative; display:inline-block; }
.domain-tooltip:before,.domain-tooltip:after { position:absolute; z-index:30; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease,transform .16s ease; }
.domain-tooltip:before { content:""; top:calc(100% + 3px); left:20px; border:6px solid transparent; border-bottom-color:#16243a; transform:translateY(-3px); }
.domain-tooltip:after { content:attr(data-tooltip); top:calc(100% + 15px); left:0; min-width:250px; padding:10px 12px; border-radius:8px; color:#fff; background:#16243a; box-shadow:0 8px 22px rgba(10,22,40,.24); white-space:pre-line; font-size:12px; line-height:1.5; text-align:left; transform:translateY(-3px); }
.domain-tooltip:hover:before,.domain-tooltip:hover:after,.domain-tooltip:focus:before,.domain-tooltip:focus:after { opacity:1; visibility:visible; transform:translateY(0); }
.site-search { display:flex; align-items:center; gap:7px; margin:18px 0 10px; }
.site-search input { min-width:0; flex:1; padding:9px 11px; border:1px solid #cbd4e1; border-radius:8px; font:inherit; font-size:13px; }
.site-search button { padding:9px 14px; border:0; border-radius:8px; color:#fff; background:var(--navy); cursor:pointer; font-weight:700; }
.site-search a { padding:8px 4px; color:var(--muted); text-decoration:none; font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:18px; }
.pagination a { padding:7px 11px; border:1px solid #cbd4e1; border-radius:7px; color:var(--navy); background:#fff; text-decoration:none; font-size:12px; }
.pagination a.disabled { color:#a8b0bd; background:#f4f6f9; pointer-events:none; }
.pagination span { color:var(--muted); font-size:12px; font-weight:700; }
.permission-option { display:flex; align-items:center; gap:8px; padding-top:27px; }
.permission-option input { width:auto; }
.spaced-panel { margin-top:24px; }
.server-management-page.container,.deployment-management-page.container,.billing-management-page.container { width:min(1440px,96vw); }
.server-management-page .management-grid,.deployment-management-page .management-grid,.billing-management-page .management-grid { grid-template-columns:360px minmax(0,1fr); }
.billing-summary { grid-template-columns:repeat(3,1fr); }
.operations-summary { grid-template-columns:repeat(3,1fr); margin-top:14px; }
.billing-summary strong { font-size:22px; }
.billing-management-page .site-search select { padding:9px 30px 9px 10px; border:1px solid #cbd4e1; border-radius:8px; background:#fff; }

@media (max-width: 760px) {
    .stage { display: none; }
    .container { padding-top: 36px; }
    .type-grid { grid-template-columns: 1fr; }
    .flow-card { grid-template-columns: 1fr; }
    .flow { grid-template-columns: 1fr; }
    .flow li { display: flex; align-items: center; gap: 10px; }
    .flow li span { flex: 0 0 30px; margin: 0; }
    .flow li:after { display: none; }
    .topbar { align-items: flex-start; flex-wrap: wrap; }
    .main-nav { justify-content: flex-start; overflow-x: auto; }
    .management-grid { grid-template-columns: 1fr; }
    .summary-grid { grid-template-columns: repeat(2,1fr); }
    .operation-row { grid-template-columns: 1fr 1fr; }
    .operation-site { grid-column:1/-1; }
    .operator-edit-panel .form-grid { grid-template-columns:1fr; }
    .permission-option { padding-top:7px; }
    .site-list-title { align-items:flex-start; }
    .list-title-group { align-items:flex-start; flex-direction:column; gap:8px; }
}

@media (max-width:1100px) {
    .site-management-page .management-grid { grid-template-columns:1fr; }
    .site-management-page .table-wrap { overflow-x:auto; }
    .site-list-table { min-width:800px; }
    .server-management-page .management-grid,.deployment-management-page .management-grid,.billing-management-page .management-grid { grid-template-columns:1fr; }
}