/* --------------------------------------------------------------------------
   Pretendard (OFL) — 직접 호스팅한다.
   CDN 을 쓰면 이 콘솔을 여는 것만으로 외부에 요청이 나가고, 그건 그 자체로
   "누가 언제 어드민을 열었나"를 외부에 흘리는 경로다. 라이선스는 fonts/ 에 동봉.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Pretendard Variable';
    src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Socialin ADMIN — 디자인 시스템
   외부 폰트/CDN 을 쓰지 않는다. 이 콘솔은 인터넷이 막힌 환경에서도 떠야 하고,
   외부 요청은 그 자체로 노출 경로다. 전부 시스템 폰트 + 인라인 CSS.
   ========================================================================== */

:root {
    /* ---- 색: 표면 ---- */
    --bg:            #f1f5f9;
    --surface:       #ffffff;
    --surface-alt:   #f8fafc;
    --sidebar:       #0f172a;
    --sidebar-hover: #1e293b;

    /* ---- 색: 선/글자 ---- */
    --border:        #e2e8f0;
    --border-strong: #cbd5e1;
    --text:          #0f172a;
    --text-soft:     #475569;
    --muted:         #94a3b8;

    /* ---- 색: 의미 ---- */
    --primary:       #2563eb;
    --primary-soft:  #eff6ff;
    --danger:        #dc2626;
    --danger-soft:   #fef2f2;
    /* 성공/정상 표시도 블루 계열로 통일한다. primary(파랑)와 구분되도록 시안 톤. */
    --success:       #0891b2;
    --success-soft:  #ecfeff;
    --warn:          #d97706;
    --warn-soft:     #fffbeb;

    /* ---- 타이포 ---- */
    --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14.5px;
    --fs-md:   16px;
    --fs-lg:   20px;
    --fs-xl:   24px;
    --fs-2xl:  30px;

    --lh-tight: 1.3;
    --lh-base:  1.6;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold:   700;

    /* ---- 간격 / 모양 ---- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

    --radius-sm: 5px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow:    0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .10);

    /* ---- 모션 ---- */
    --ease:      cubic-bezier(.4, 0, .2, 1);
    --dur-fast:  120ms;
    --dur:       180ms;
    --dur-slow:  280ms;
}

/* 모션 최소화를 요청한 사용자에겐 애니메이션을 끈다 (접근성) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code, pre, .mono { font-family: var(--font-mono); font-size: .95em; }

a { color: var(--primary); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: #1d4ed8; text-decoration: underline; }

/* 키보드 포커스만 링을 보여준다 (마우스 클릭 시엔 안 보임) */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ==========================================================================
   애니메이션
   ========================================================================== */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, .35); }
    70%  { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   레이아웃
   ========================================================================== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 224px;
    flex-shrink: 0;
    background: var(--sidebar);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
}
.sidebar__brand {
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: #f8fafc;
    letter-spacing: -.01em;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.sidebar__brand small {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    color: var(--muted);
    letter-spacing: 0;
}
.sidebar__nav { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.sidebar__nav li { animation: slide-in-left var(--dur) var(--ease) backwards; }
.sidebar__nav li:nth-child(1) { animation-delay: 20ms; }
.sidebar__nav li:nth-child(2) { animation-delay: 50ms; }
.sidebar__nav li:nth-child(3) { animation-delay: 80ms; }
.sidebar__nav li:nth-child(4) { animation-delay: 110ms; }
.sidebar__nav li:nth-child(5) { animation-delay: 140ms; }

.sidebar__nav a {
    display: block;
    padding: 9px var(--sp-5);
    color: #cbd5e1;
    font-size: var(--fs-base);
    border-left: 3px solid transparent;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.sidebar__nav a:hover {
    background: var(--sidebar-hover);
    color: #f8fafc;
    text-decoration: none;
    border-left-color: rgba(148, 163, 184, .5);
}
.sidebar__nav a.is-active {
    background: var(--sidebar-hover);
    color: #fff;
    font-weight: var(--fw-medium);
    border-left-color: var(--primary);
}
/* 설정 그룹 헤더 + 하위 항목 */
.sidebar__group {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-5) 4px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    border-top: 1px solid rgba(148, 163, 184, .14);
}
.sidebar__nav a.sidebar__sub {
    padding-left: calc(var(--sp-5) + var(--sp-3));
    font-size: var(--fs-sm);
}

.sidebar__footer {
    margin-top: auto;
    padding: var(--sp-3) var(--sp-5) var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--muted);
    border-top: 1px solid rgba(148, 163, 184, .16);
}

.content {
    flex: 1;
    min-width: 0;
    padding: var(--sp-5) var(--sp-6);
    animation: fade-in var(--dur-slow) var(--ease);
}
.content__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

h1 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -.02em; }
h2 {
    margin: var(--sp-6) 0 var(--sp-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: -.01em;
}
.sub { margin-top: 3px; font-size: var(--fs-sm); color: var(--text-soft); }

/* ==========================================================================
   버튼 — 기본은 흰 배경 + 색 글자/테두리, hover 시 색이 채워진다.
   테두리는 hover 전후로 유지되어 레이아웃이 흔들리지 않는다.
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--text-soft);
    transition: background var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn:hover {
    background: var(--text-soft);
    color: #fff;
    border-color: var(--text-soft);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    background: #fff;
    color: var(--muted);
    border-color: var(--border);
    box-shadow: none;
    transform: none;
}

/* --- 색 변형: 기본 흰 배경 / hover 시 채움 --- */
.btn--primary { color: var(--primary); border-color: var(--primary); }
.btn--primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.btn--danger { color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn--success { color: var(--success); border-color: var(--success); }
.btn--success:hover { background: var(--success); color: #fff; border-color: var(--success); }

.btn--warn { color: var(--warn); border-color: var(--warn); }
.btn--warn:hover { background: var(--warn); color: #fff; border-color: var(--warn); }

/* --- 채워진 형태가 필요할 때 (주 동작 1개에만 쓸 것) --- */
.btn--solid { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn--solid:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* --- 크기 --- */
.btn--sm { padding: 4px 10px; font-size: var(--fs-sm); }
.btn--lg { padding: 10px 20px; font-size: var(--fs-md); }
.btn--block { width: 100%; }

/* --- 텍스트 링크형 --- */
.btn--link {
    padding: 0; border: none; background: none;
    color: var(--primary); font-weight: var(--fw-medium);
    text-decoration: underline; text-underline-offset: 2px;
}
.btn--link:hover { background: none; color: #1d4ed8; box-shadow: none; }

.btn-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ==========================================================================
   카드
   ========================================================================== */
.cards { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.card {
    flex: 1 1 190px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    animation: fade-in-up var(--dur) var(--ease) backwards;
    transition: box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
a.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
    transform: translateY(-2px);
    text-decoration: none;
}
.card__title {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    margin-bottom: var(--sp-1);
}
.card__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -.02em; }

/* ==========================================================================
   표
   ========================================================================== */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-base);
}
th {
    background: var(--surface-alt);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    color: var(--text-soft);
    white-space: nowrap;
}
tbody tr { transition: background var(--dur-fast) var(--ease); }

/* 행 전체가 링크인 표 — 클릭 가능하다는 걸 커서·색·이동으로 함께 알린다 */
tbody tr[data-href] {
    cursor: pointer;
    position: relative;
}
tbody tr[data-href] td {
    transition: background var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
tbody tr[data-href]:hover td {
    background: var(--primary-soft);
}
/* 왼쪽에 얇은 강조선 — 어느 행 위에 있는지 한눈에 */
tbody tr[data-href]:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}
tbody tr[data-href]:active td { background: #dbeafe; }
tbody tr[data-href]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* 행 안의 링크·버튼은 기본 커서를 유지해 "여기는 다른 동작" 임을 구분 */
tbody tr[data-href] a,
tbody tr[data-href] button,
tbody tr[data-href] summary { cursor: pointer; }
tbody tr[data-href] input[type="checkbox"],
tbody tr[data-href] input[type="radio"] { cursor: pointer; }
tbody tr[data-href] input[type="text"],
tbody tr[data-href] textarea { cursor: text; }
tbody tr:hover { background: var(--surface-alt); }
tbody tr:last-child td { border-bottom: none; }
table.detail th { width: 180px; }

/* ==========================================================================
   배지
   ========================================================================== */
.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    background: var(--border);
    color: var(--text-soft);
    border: 1px solid transparent;
}
.badge--ok     { background: var(--success-soft); color: var(--success); border-color: #a5f3fc; }
.badge--warn   { background: var(--warn-soft);    color: var(--warn);    border-color: #fde68a; }
.badge--danger { background: var(--danger-soft);  color: var(--danger);  border-color: #fecaca; }
.badge--info   { background: var(--primary-soft); color: var(--primary); border-color: #bfdbfe; }

/* ==========================================================================
   폼
   ========================================================================== */
fieldset {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    animation: fade-in-up var(--dur) var(--ease) backwards;
}
legend {
    padding: 0 var(--sp-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-3) var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--full { grid-column: 1 / -1; }

label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-soft); }

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], select, textarea {
    width: 100%;
    padding: 8px 11px;
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-alt);
    color: var(--muted);
    cursor: not-allowed;
}
textarea { min-height: 84px; resize: vertical; line-height: var(--lh-base); }

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

input[type="checkbox"], input[type="radio"] {
    width: auto; margin-right: 6px; accent-color: var(--primary); cursor: pointer;
}
label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
    display: flex; align-items: center; cursor: pointer; font-weight: var(--fw-normal);
}

.field__hint  { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.field__error { font-size: var(--fs-sm); color: var(--danger); }

.form-actions {
    display: flex; gap: var(--sp-2);
    margin-top: var(--sp-5); padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

.filters {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    align-items: flex-end; margin-bottom: var(--sp-4);
}
.filters .field { flex: 0 1 165px; }

/* ==========================================================================
   알림
   ========================================================================== */
.alert {
    padding: 10px 14px;
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: var(--fs-base);
    animation: fade-in-up var(--dur) var(--ease);
}
.alert--ok    { background: var(--success-soft); color: #155e75; border-color: #a5f3fc; border-left-color: var(--success); }
.alert--error { background: var(--danger-soft);  color: #991b1b; border-color: #fecaca; border-left-color: var(--danger); }
.alert--warn  { background: var(--warn-soft);    color: #92400e; border-color: #fde68a; border-left-color: var(--warn); }
.alert--info  { background: var(--primary-soft); color: #1e40af; border-color: #bfdbfe; border-left-color: var(--primary); }
.alert ul { margin: 6px 0 0 18px; padding: 0; }

/* ==========================================================================
   비밀번호 표시 토글
   ========================================================================== */
.secret { font-family: var(--font-mono); }
.secret__mask { color: var(--muted); letter-spacing: 2px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ==========================================================================
   페이지네이션
   ========================================================================== */
.pagination {
    display: flex; flex-wrap: wrap; gap: var(--sp-1);
    list-style: none; padding: 0; margin: var(--sp-4) 0 0;
}
.pagination a, .pagination span {
    display: block; padding: 5px 11px;
    font-size: var(--fs-sm);
    background: #fff; color: var(--text-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: all var(--dur-fast) var(--ease);
}
.pagination a:hover { background: var(--text-soft); color: #fff; border-color: var(--text-soft); text-decoration: none; }
.pagination .active span { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination .disabled span { opacity: .45; }

/* ==========================================================================
   로그인
   ========================================================================== */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: var(--sp-4);
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
}
.login-card {
    width: 100%; max-width: 372px;
    padding: var(--sp-6) var(--sp-5);
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
    color: #e2e8f0;
    animation: fade-in-up var(--dur-slow) var(--ease);
}
.login-card h1 { font-size: var(--fs-lg); color: #f8fafc; margin-bottom: 3px; }
.login-card .sub { color: var(--muted); margin-bottom: var(--sp-5); }
.login-card label { color: #cbd5e1; }
.login-card .field { margin-bottom: var(--sp-3); }
.login-card input {
    background: #020617; border-color: #334155; color: #f1f5f9;
}
.login-card input:hover:not(:disabled) { border-color: #475569; }
.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .22); }
.login-card .btn--solid { margin-top: var(--sp-2); animation: pulse-ring 2.4s var(--ease) 1; }
.login-card .footer {
    margin-top: var(--sp-5); text-align: center;
    font-size: var(--fs-xs); color: #475569;
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 720px) {
    .layout { flex-direction: column; }
    .sidebar { width: 100%; }
    .sidebar__nav { display: flex; flex-wrap: wrap; }
    .sidebar__nav a { border-left: none; border-bottom: 3px solid transparent; }
    .sidebar__nav a.is-active { border-left: none; border-bottom-color: var(--primary); }
    .content { padding: var(--sp-4); }
    .content__header { flex-direction: column; }
}

/* ── 진행 상황 원형 게이지 ─────────────────────────────────────────────
   페이지를 통째로 새로고침하던 것을 대체한다. 스크립트가 단계별 진행률을
   보고하지 않으므로 게이지는 경과시간 기반 추정치이며, 90%에서 멈춰
   서버가 완료를 알려줄 때까지 기다린다. 완료를 게이지가 먼저 선언하지 않는다. */
.progress-panel {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 22px; margin-bottom: 20px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface);
}
.progress-ring { position: relative; flex: 0 0 88px; width: 88px; height: 88px; }
.progress-ring svg { width: 88px; height: 88px; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 9; }
.progress-ring__track { stroke: var(--border); }
.progress-ring__bar {
    stroke: #2f6fed; stroke-linecap: round;
    stroke-dasharray: 326.7;              /* 2πr, r=52 */
    stroke-dashoffset: 326.7;
    transition: stroke-dashoffset .6s ease;
}
.progress-ring.is-failed .progress-ring__bar { stroke: #d64545; }
.progress-ring.is-done   .progress-ring__bar { stroke: #2e9e5b; }
.progress-ring__label {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 600; color: var(--text);
}
.progress-ring__label small { font-size: 11px; margin-left: 1px; font-weight: 500; }
.progress-panel__text strong { display: block; margin-bottom: 3px; }

/* 대기 중(아직 시작 전)일 때는 게이지가 천천히 도는 것으로 살아있음을 알린다 */
.progress-ring.is-pending svg { animation: ring-spin 1.6s linear infinite; }
@keyframes ring-spin { to { transform: rotate(270deg); } }

@media (max-width: 560px) {
    .progress-panel { flex-direction: column; text-align: center; gap: 14px; }
}

/* ── 명령어 보관함 ────────────────────────────────────────────────────
   내용은 붙여넣어 실행할 원문이므로 공백·줄바꿈이 절대 뭉개지면 안 된다.
   그래서 pre 를 쓰고 줄바꿈 대신 가로 스크롤을 준다 — 임의로 접히면
   복사했을 때 명령이 달라진다. */
.snippet {
    border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 14px; overflow: hidden; background: var(--surface);
}
.snippet__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    background: rgba(127,127,127,.05);
}
.snippet__head .badge { margin-left: 6px; }
.snippet__body {
    margin: 0; padding: 12px 14px; overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.65; white-space: pre; tab-size: 4;
    background: #1e2228; color: #e6e9ee;
}
.snippet__body code { font: inherit; color: inherit; background: none; }
.snippet__locked {
    padding: 14px; font-size: 13px; color: #8a6d3b;
    background: rgba(240,173,78,.12);
}
.code-input {
    width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.6; tab-size: 4; white-space: pre; overflow-wrap: normal;
    overflow-x: auto;
}
.btn--sm { padding: 3px 9px; font-size: 12px; }
.btn.is-copied { background: #2e9e5b; color: #fff; border-color: #2e9e5b; }

/* ── 서버별 묶음 ──────────────────────────────────────────────────────
   서버 이름을 행마다 반복하는 대신 묶음 머리에 한 번만 쓴다.
   서버가 늘어날수록 이쪽이 훨씬 빨리 읽힌다. */
.group {
    border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 16px; overflow: hidden; background: var(--surface);
}
.group__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 14px; border-bottom: 1px solid var(--border);
    background: rgba(127,127,127,.05);
}
.group__head .sub { margin-left: 8px; font-size: 12px; }
.group .table-wrap { border: 0; margin: 0; }
.group table { margin: 0; }

/* ── 모달 (native <dialog>) ───────────────────────────────────────────
   라이브러리를 쓰지 않는다. <dialog> 가 ESC 닫기·포커스 가둠·배경 비활성화를
   기본 제공하므로, 직접 만들면 오히려 접근성이 나빠진다. */
.modal {
    border: 0; border-radius: 10px; padding: 0;
    width: min(440px, calc(100vw - 32px));
    background: var(--surface); color: var(--text);
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.modal::backdrop { background: rgba(0,0,0,.45); }
.modal__body { padding: 22px 24px 18px; }
.modal__title { margin: 0 0 6px; font-size: 17px; }
.modal__body .sub { margin-bottom: 14px; }
.modal__body .field { margin-bottom: 4px; }
.modal__body input[type="password"] { width: 100%; }
.modal__actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;
}
.btn--muted { opacity: .6; cursor: default; }


/* ── 고정(핀) ─────────────────────────────────────────────────────────
   별을 항상 보여주되, 꺼진 상태는 흐리게 둔다. hover 때만 나타나게 하면
   "고정할 수 있다"는 사실 자체를 모르게 된다. */
.pin {
    border: 0; background: none; cursor: pointer; padding: 2px 4px;
    font-size: 15px; line-height: 1; color: var(--border-strong);
    transition: color .12s ease, transform .12s ease;
}
.pin:hover { color: var(--warn); transform: scale(1.15); }
.pin--on   { color: var(--warn); }
tr.is-pinned > td { background: var(--warn-soft); }

/* ── 삭제 선택 모달 (넓은 변형) ─────────────────────────────────────── */
.modal--wide { width: min(520px, calc(100vw - 32px)); }
.del-option {
    border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 14px; margin: 12px 0;
}
.del-option strong { display: block; margin-bottom: 4px; }
.del-option .sub { margin-bottom: 10px; }
.del-option--danger { border-color: var(--danger); background: var(--danger-soft); }
.del-option .field { margin-bottom: 6px; }
.del-option input[type="text"] { width: 100%; }