/* ============================================================
   SHIAN PARTNERS — Admin Dashboard CSS
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --navy:   #0D1B2A;
  --gold:   #C9A96E;
  --gold-l: #E8D5A3;
  --gold-g: linear-gradient(135deg, #C9A96E 0%, #E8D5A3 55%, #C9A96E 100%);
  --white:  #FFFFFF;
  --g50:    #FAFAFA;
  --g100:   #F4F4F2;
  --g200:   #E8E8E4;
  --g300:   #D0D0CA;
  --g400:   #B0B0A8;
  --g500:   #888880;
  --g700:   #4A4A42;
  --g900:   #18181A;
  --green:  #22c55e;
  --red:    #ef4444;
  --font:   'Pretendard', -apple-system, sans-serif;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
}
html { -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--g50); color: var(--g900); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }
.hidden-input { display: none; }

/* ── Login ── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--navy), #1a2d42); padding: 20px; position: relative; }
.login-close-btn {
  position: fixed; top: 20px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: rgba(255,255,255,.5);
  transition: all .2s; z-index: 10;
  text-decoration: none;
}
.login-close-btn:hover { background: rgba(255,255,255,.15); color: var(--white); transform: scale(1.08); }
.login-card { background: rgba(255,255,255,.05); border: 1px solid rgba(201,169,110,.25); border-radius: var(--r-xl); padding: 52px 44px; width: 100%; max-width: 380px; text-align: center; backdrop-filter: blur(20px); }
.login-logo  { width: 80px; height: 80px; object-fit: contain; margin: 0 auto 20px; }
.login-title { font-size: 26px; font-weight: 800; color: var(--white); letter-spacing: -.8px; margin-bottom: 4px; }
.login-sub   { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 32px; }
.login-error { padding: 10px 16px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25); border-radius: var(--r-sm); font-size: 13px; color: #fca5a5; margin-bottom: 20px; }
.login-form  { display: flex; flex-direction: column; gap: 14px; }
.login-input { padding: 14px 18px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12); border-radius: var(--r-sm); color: var(--white); font-size: 15px; font-family: var(--font); outline: none; transition: border-color .2s; }
.login-input:focus { border-color: rgba(201,169,110,.5); }
.login-input::placeholder { color: rgba(255,255,255,.25); }
.login-btn { padding: 15px; background: var(--gold-g); color: var(--navy); font-size: 15px; font-weight: 800; border: none; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); transition: all .3s; }
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,169,110,.4); }
.login-back-link { display: inline-block; margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.3); text-decoration: none; transition: color .2s; }
.login-back-link:hover { color: rgba(255,255,255,.6); }

/* ── Admin Layout ── */
.admin-wrap { min-height: 100vh; background: var(--g50); }

/* Header */
.admin-header { background: var(--white); border-bottom: 1px solid var(--g200); position: sticky; top: 0; z-index: 100; }
.admin-header-inner { max-width: 1200px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; }
.admin-brand { display: flex; align-items: center; gap: 14px; }
.admin-logo  { width: 52px; height: 52px; object-fit: contain; }
.admin-title { display: block; font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -.4px; }
.admin-sub   { display: block; font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.admin-header-right { display: flex; gap: 10px; align-items: center; }
.btn-preview { padding: 9px 18px; font-size: 13px; font-weight: 600; background: var(--g100); border-radius: var(--r-sm); color: var(--g700); transition: all .2s; border: 1px solid var(--g200); }
.btn-preview:hover { background: var(--g200); }
.btn-logout  { padding: 9px 18px; font-size: 13px; font-weight: 600; background: rgba(239,68,68,.08); border-radius: var(--r-sm); color: var(--red); transition: all .2s; border: 1px solid rgba(239,68,68,.18); }
.btn-logout:hover { background: rgba(239,68,68,.15); }

/* Main */
.admin-main { padding: 40px 0 80px; }
.admin-container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.admin-page-title { margin-bottom: 36px; }
.admin-page-title h2 { font-size: 26px; font-weight: 800; color: var(--g900); letter-spacing: -.8px; margin-bottom: 6px; }
.admin-page-title p  { font-size: 14px; color: var(--g500); }

/* Alert */
.admin-alert { padding: 14px 20px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; margin-bottom: 28px; }
.admin-alert.success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: #16a34a; }
.admin-alert.error   { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: #dc2626; }

/* Slots */
.slots-grid { display: flex; flex-direction: column; gap: 40px; }

.slot-section { background: var(--white); border-radius: var(--r-xl); padding: 32px 28px; border: 1px solid var(--g200); box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.slot-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--g100); }
.slot-section-header h3 { font-size: 18px; font-weight: 700; color: var(--g900); letter-spacing: -.4px; }

.slot-cat-badge { padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.cat-basic  { background: rgba(74,144,226,.1);  color: #1d4ed8; border: 1px solid rgba(74,144,226,.2); }
.cat-custom { background: rgba(201,169,110,.1); color: #92400e; border: 1px solid rgba(201,169,110,.2); }
.cat-beta   { background: rgba(139,92,246,.1);  color: #6d28d9; border: 1px solid rgba(139,92,246,.2); }

.slot-cards-row { display: flex; gap: 20px; flex-wrap: wrap; }
.slot-cards-row.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Slot Card */
.slot-card { border: 2px dashed var(--g200); border-radius: var(--r-lg); overflow: hidden; transition: border-color .2s; flex: 1; min-width: 200px; }
.slot-card:hover { border-color: var(--gold); }

.slot-label { padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--g600); background: var(--g50); border-bottom: 1px solid var(--g100); letter-spacing: .3px; }

.slot-img-wrap { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; }
.slot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-img-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.slot-filename { font-size: 11px; color: rgba(255,255,255,.75); word-break: break-all; }

.slot-empty { height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--g50); }
.slot-empty-ico { font-size: 28px; opacity: .4; }
.slot-empty span:last-child { font-size: 12px; color: var(--g400); font-weight: 500; }

.slot-actions { display: flex; gap: 8px; padding: 12px 14px; background: var(--white); border-top: 1px solid var(--g100); }
.slot-upload-btn { flex: 1; padding: 9px; font-size: 13px; font-weight: 700; background: var(--gold-g); color: var(--navy); border: none; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); transition: all .2s; }
.slot-upload-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,169,110,.35); }
.slot-delete-btn { padding: 9px 16px; font-size: 13px; font-weight: 700; background: rgba(239,68,68,.08); color: var(--red); border: 1px solid rgba(239,68,68,.2); border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); transition: all .2s; white-space: nowrap; }
.slot-delete-btn:hover { background: rgba(239,68,68,.15); }

/* ── Upload Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 20px; backdrop-filter: blur(6px); }
.modal-box     { background: var(--white); border-radius: var(--r-xl); width: 100%; max-width: 480px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.modal-header  { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--g100); }
.modal-header h3 { font-size: 17px; font-weight: 700; color: var(--g900); }
.modal-close   { width: 32px; height: 32px; border-radius: 50%; background: var(--g100); border: none; font-size: 14px; color: var(--g600); cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--g200); }
.modal-body    { padding: 24px; }

.upload-drop-area { border: 2px dashed var(--g200); border-radius: var(--r-lg); overflow: hidden; min-height: 220px; cursor: pointer; transition: all .2s; position: relative; }
.upload-drop-area:hover, .upload-drop-area.drag-on { border-color: var(--gold); background: rgba(201,169,110,.03); }
.uda-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; gap: 8px; padding: 24px; }
.uda-icon  { font-size: 40px; opacity: .5; }
.uda-main  { font-size: 15px; font-weight: 700; color: var(--g700); }
.uda-sub   { font-size: 12px; color: var(--g400); text-align: center; }
.upload-preview { width: 100%; max-height: 320px; object-fit: contain; display: block; }

.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn-cancel { flex: 1; padding: 13px; background: var(--g100); color: var(--g700); font-size: 14px; font-weight: 600; border: none; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); }
.btn-cancel:hover { background: var(--g200); }
.btn-upload { flex: 2; padding: 13px; background: var(--gold-g); color: var(--navy); font-size: 14px; font-weight: 800; border: none; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); transition: all .3s; }
.btn-upload:disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-upload:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,169,110,.4); }

/* ── Section Title ── */
.slot-section-title {
  padding: 20px 0 8px;
  border-top: 2px solid var(--g200);
  margin-top: 8px;
}
.slot-section-title:first-child { border-top: none; margin-top: 0; }
.slot-section-title h3 { font-size: 20px; font-weight: 800; color: var(--g900); margin-bottom: 4px; }
.slot-section-title p  { font-size: 13px; color: var(--g400); }

/* Count badge */
.slot-count-badge {
  display: inline-block; padding: 3px 10px;
  background: var(--g100); border-radius: 100px;
  font-size: 11px; font-weight: 700; color: var(--g500);
}

/* Category badges — manager, autoshop */
.cat-manager  { background: rgba(239,68,68,.1); color: #b91c1c; border: 1px solid rgba(239,68,68,.2); }
.cat-autoshop { background: rgba(34,197,94,.1);  color: #15803d; border: 1px solid rgba(34,197,94,.2); }

/* 5-col and 2-col rows */
.slot-cards-row.five-col { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.slot-cards-row.two-col  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ── Tab Nav ── */
.admin-tab-nav { background: var(--white); border-bottom: 2px solid var(--g200); display: flex; gap: 0; position: sticky; top: 73px; z-index: 90; }
.admin-tab { padding: 14px 28px; font-size: 14px; font-weight: 700; color: var(--g500); background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-family: var(--font); transition: all .2s; margin-bottom: -2px; }
.admin-tab:hover { color: var(--g900); background: var(--g50); }
.admin-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

/* ── 요금비교 편집 ── */
.pricing-section-card { background: var(--white); border-radius: var(--r-xl); padding: 28px; border: 1px solid var(--g200); box-shadow: 0 2px 12px rgba(0,0,0,.04); margin-bottom: 24px; }
.pricing-section-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--g100); }
.pricing-section-header h3 { font-size: 18px; font-weight: 800; color: var(--g900); margin-bottom: 4px; }
.pricing-section-header p { font-size: 13px; color: var(--g500); }
.badge-preview { display: inline-block; padding: 2px 10px; background: linear-gradient(135deg,#C9A96E,#E8D5A3); color: var(--navy); font-size: 11px; font-weight: 800; border-radius: 100px; }

/* 인기 서비스 그리드 */
.popular-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.popular-card-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--g200); border-radius: var(--r-md); cursor: pointer; transition: all .2s; background: var(--g50); }
.popular-card-item input[type="checkbox"] { display: none; }
.popular-card-item:hover { border-color: var(--gold); background: rgba(201,169,110,.05); }
.popular-card-item.pop-active { border-color: var(--gold); background: rgba(201,169,110,.08); }
.pop-icon { font-size: 16px; }
.pop-label { font-size: 13px; font-weight: 600; color: var(--g700); }
.pop-badge { padding: 2px 8px; background: var(--gold-g); color: var(--navy); font-size: 10px; font-weight: 800; border-radius: 100px; }

/* 요금 카테고리 그룹 */
.pr-cat-group { margin-bottom: 20px; border: 1px solid var(--g200); border-radius: var(--r-lg); overflow: hidden; }
.pr-cat-header { padding: 10px 16px; background: var(--g100); }
.pr-cat-label { font-size: 12px; font-weight: 800; color: var(--g700); letter-spacing: 1px; text-transform: uppercase; }

/* 요금 행 에디터 */
.pr-row-editor { padding: 16px; border-bottom: 1px solid var(--g100); }
.pr-row-editor:last-child { border-bottom: none; }
.pr-row-meta { display: flex; gap: 10px; margin-bottom: 12px; }
.pr-input { padding: 8px 12px; border: 1.5px solid var(--g200); border-radius: var(--r-sm); font-size: 13px; font-family: var(--font); color: var(--g900); background: var(--white); outline: none; transition: border-color .2s; }
.pr-input:focus { border-color: var(--gold); }
.pr-name-input { flex: 2; font-weight: 600; }
.pr-sub-input  { flex: 3; color: var(--g500); }
.pr-val-input  { width: 100%; margin-top: 6px; }
.pr-val-input.hidden { display: none; }

/* 플랜 셀 */
.pr-plan-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pr-cell { border: 1px solid var(--g100); border-radius: var(--r-sm); padding: 10px; background: var(--g50); }
.pr-cell-label { font-size: 10px; font-weight: 800; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.pr-cell-options { display: flex; flex-direction: column; gap: 4px; }
.pr-opt { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--g600); transition: all .15s; border: 1px solid transparent; }
.pr-opt input[type="radio"] { display: none; }
.pr-opt:hover { background: var(--g100); }
.pr-opt.opt-active { background: rgba(201,169,110,.1); color: var(--navy); border-color: rgba(201,169,110,.3); font-weight: 700; }

/* 저장 바 */
.pricing-save-bar { display: flex; gap: 12px; padding: 20px 0; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--g50) 30%); }
.btn-save-pricing { padding: 14px 32px; background: var(--gold-g); color: var(--navy); font-size: 15px; font-weight: 800; border: none; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); transition: all .3s; box-shadow: 0 4px 20px rgba(201,169,110,.3); }
.btn-save-pricing:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,169,110,.45); }
.btn-save-pricing:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-reset-pricing { padding: 14px 24px; background: var(--white); color: var(--g600); font-size: 14px; font-weight: 600; border: 1.5px solid var(--g200); border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); transition: all .2s; }
.btn-reset-pricing:hover { background: var(--g100); }

/* Responsive */
@media (max-width: 1080px) {
  .slot-cards-row.five-col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .slot-cards-row.three-col { grid-template-columns: repeat(2, 1fr); }
  .slot-cards-row.five-col  { grid-template-columns: repeat(2, 1fr); }
  .slot-cards-row.two-col   { grid-template-columns: 1fr; }
  .admin-header-inner { flex-direction: column; gap: 12px; align-items: flex-start; padding: 14px 18px; }
  .admin-header-right { width: 100%; justify-content: space-between; }
  .btn-preview, .btn-logout { flex: 1; text-align: center; }
  .admin-page-title h2 { font-size: 20px; }
  .admin-container { padding: 0 16px; }
  .admin-main { padding: 28px 0 60px; }
  .slot-section { padding: 24px 18px; border-radius: 20px; }
  .slot-section-header h3 { font-size: 16px; }
  .slot-card { min-width: 0; }
  .modal-box { border-radius: 20px; }
  .login-card { padding: 40px 28px; }
  .login-title { font-size: 22px; }
  .admin-tab { padding: 12px 16px; font-size: 13px; }
  .pr-plan-cells { grid-template-columns: repeat(2, 1fr); }
  .pr-row-meta { flex-direction: column; }
  .popular-grid { gap: 8px; }
  .popular-card-item { padding: 8px 12px; }
  .pricing-section-card { padding: 18px; }
}
@media (max-width: 480px) {
  .slot-cards-row.three-col { grid-template-columns: 1fr; }
  .slot-cards-row.five-col  { grid-template-columns: 1fr 1fr; }
  .admin-header-inner { padding: 12px 14px; }
  .slot-section { padding: 18px 14px; }
  .slot-section-header { gap: 8px; }
  .slot-section-title h3 { font-size: 17px; }
  .admin-page-title h2 { font-size: 18px; }
  .modal-box { max-width: 100%; margin: 0; border-radius: 18px 18px 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-body { padding: 18px; }
  .upload-drop-area { min-height: 180px; }
  .uda-inner { min-height: 180px; gap: 6px; }
  .uda-icon { font-size: 32px; }
}