/* ===== Reset ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  height:100%;
  font-family:'Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  color:#101323;
  background:#f7f8fc;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;   /* 가로 스크롤 강제 차단 */
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== Layout ===== */
.container{max-width:1080px;margin:0 auto;padding:0 16px}
main{min-height:48vh}

/* ===== Design Tokens ===== */
:root{
  --brand:#1F3A93;

  --header-fg:#222;
  --header-bg:#ffffff;
  --header-bd:#e5e9f2;

  --login-bg:transparent;
  --login-bd:#dfe3ef;
  --login-fg:var(--header-fg);
  --join-bg:#5b5cff;
  --join-fg:#fff;

  --line:#E3E7EF;
  --blue-fill:#F2F4FF; --blue-fill-bd:#E1E6FF;
  --yellow-fill:#FFF8E6; --yellow-fill-bd:#F4E8BA;
  --red-fill:#FFF0F1; --red-fill-bd:#F3D5D9;
}

/* ===== Header ===== */
header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--header-bd);
  box-shadow:0 3px 12px rgba(0,0,0,.04);
}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;gap:16px;
}
.nav-left,.nav-right{display:flex;align-items:center;gap:24px;white-space:nowrap}
.logo{
  display:flex;align-items:center;gap:8px;
  font-weight:900;font-size:18px;
  color:var(--brand);
}
.logo::before{
  content:"";width:14px;height:14px;border-radius:50%;background:var(--brand);
}
.nav-menu{
  display:flex;align-items:center;gap:22px;
}
.nav-menu a{
  font-weight:600;color:#2c2f3a;
  transition:.2s;
}
.nav-menu a:hover{color:var(--brand);transform:translateY(-1px)}
.btn-login{
  padding:6px 14px;border-radius:999px;
  border:1px solid var(--login-bd);
  background:var(--login-bg);color:var(--login-fg)
}
.btn-login:hover{background:#f5f7ff}
.btn-join{
  padding:6px 14px;border-radius:999px;
  background:var(--join-bg);color:var(--join-fg);font-weight:700
}
.btn-join:hover{opacity:.92}

/* ===== Hero ===== */
.hero-spot{
  background:linear-gradient(135deg,#1F3A93,#3E60E9);
  padding:32px 0 44px;margin-bottom:24px;
}
.hero-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
}
.hero-meta{padding:36px 30px;color:#fff}
.hero-title{
  font-size:30px;font-weight:800;letter-spacing:-0.2px;
}
.hero-desc{
  margin:10px 0 14px;
  opacity:.88;
  font-weight:400;
  letter-spacing:-0.1px;
}
.hero-actions{display:flex;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:8px 18px;border-radius:10px;
  font-weight:700;transition:.15s;
}
.btn-white{
  background:#fff;color:var(--brand);
  border:1px solid rgba(0,0,0,.06);
}
.btn-ghost{
  background:rgba(255,255,255,.15);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.btn-white:hover,.btn-ghost:hover{filter:brightness(0.98)}

/* ===== Section ===== */
.section{padding:32px 0 42px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.section-title{
  font-size:22px;font-weight:700;
  margin-bottom:4px;color:#1a1d27;
  letter-spacing:-0.2px;
}
.section-sub{
  font-size:14px;color:#72788a;
  margin:0 0 18px;font-weight:400;
}
.section + .section{border-top:1px solid #E8EBF5;margin-top:8px}
.section.accent-blue   .section-title::after{
  content:"";display:block;width:56px;height:4px;border-radius:999px;
  background:var(--blue-fill-bd);margin-top:8px;
}
.section.accent-yellow .section-title::after{
  content:"";display:block;width:56px;height:4px;border-radius:999px;
  background:var(--yellow-fill-bd);margin-top:8px;
}
.section.accent-red    .section-title::after{
  content:"";display:block;width:56px;height:4px;border-radius:999px;
  background:var(--red-fill-bd);margin-top:8px;
}

/* ===== Grid ===== */
.tiles{display:grid;gap:14px}
.tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.tiles-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.tiles-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.tiles-4{grid-template-columns:1fr}}

/* ===== Tile (카드) ===== */
.tile{
  position:relative;border:1px solid var(--line);border-radius:16px;
  padding:16px;min-height:104px;display:block;
  transition:transform .12s,box-shadow .12s,border-color .12s;
  background:#fff;
}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(43,46,105,.10);
  border-color:#cfd6f6;
}
.tile-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.tile-icon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:#fff;
  color:#3050b5;border:1px solid rgba(31,58,147,.12);
}
.tile-title{
  margin:2px 0 4px;font-size:15px;font-weight:700;
  color:#1c2233;letter-spacing:-0.15px;
}
.tile-desc{
  margin:0;font-size:12.5px;color:#8088a2;font-weight:400;
}
.filled-blue  {background:var(--blue-fill);  border-color:var(--blue-fill-bd)}
.filled-yellow{background:var(--yellow-fill);border-color:var(--yellow-fill-bd)}
.filled-red   {background:var(--red-fill);   border-color:var(--red-fill-bd)}

/* ===== Footer ===== */
footer{
  margin-top:40px;padding:24px 0;text-align:center;
  font-size:13px;color:#7b8299;border-top:1px solid var(--line);
}

/* ===== Typography Softening (Main: theme-blue 범위) ===== */
.theme-blue {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 1) Hero */
.theme-blue .hero-title{font-weight:800;font-size:30px;letter-spacing:-0.2px}
@media (max-width:640px){.theme-blue .hero-title{font-size:26px}}
.theme-blue .hero-desc{color:rgba(255,255,255,.9);letter-spacing:-0.1px}

/* 2) Section */
.theme-blue .section-title{font-weight:700;color:#1a1d27;letter-spacing:-0.2px}
.theme-blue .section-sub{color:#7a859f}

/* 3) Tile/Card */
.theme-blue .tile-title,
.theme-blue .card-title{font-weight:700;color:#1c2233;letter-spacing:-0.15px}
.theme-blue .tile-desc,
.theme-blue .card-desc{color:#8a95ae}
.theme-blue .tile,
.theme-blue .card{
  border-color:#edf1f8;
  box-shadow:0 8px 24px rgba(43,46,105,.08);
}
.theme-blue .tile:hover,
.theme-blue .card:hover{
  box-shadow:0 10px 28px rgba(43,46,105,.10);
}
.theme-blue .tile-icon,
.theme-blue .card-icon{
  background:#f2f5ff;
  color:#2a47a4;
}
.theme-blue .nav-link{
  color:#3f4863;
  letter-spacing:-0.1px;
  font-weight:600;
}
/* === 기본사주 폼 === */
.form-basic {display:flex;flex-direction:column;gap:18px;}
.form-row label{font-weight:600;font-size:14px;color:#34384a;margin-bottom:4px;display:block;}
.inputs-inline input{width:80px;padding:6px 8px;border:1px solid #dfe2ef;border-radius:8px;}
.radios label{margin-right:16px;}
select,input,button{font-family:inherit;font-size:14px;}
.form-row.center{text-align:center;}
.service-cards{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.svc-card{
  border:1px solid #eee;border-radius:12px;padding:12px 16px;width:160px;
  text-align:center;background:#fff;transition:.15s;
}
.svc input:checked + .svc-card{border-color:#F3C74B;box-shadow:0 0 0 2px rgba(243,199,75,.3);}
.svc-card strong{display:block;font-weight:700;color:#1a1d27;}
.svc-card span{font-size:13px;color:#7a859f;}

/* ----- Admin Layout ----- */

.page-admin .admin-layout {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 80px); /* 헤더 제외 높이 대략 */
  background: #f5f7fb;
}

/* 사이드바 */
.admin-sidebar {
  width: 260px;
  background: #ffffff;
  border-right: 1px solid #e2e6f0;
  padding: 24px 20px;
  box-sizing: border-box;
}

.admin-logo {
  margin-bottom: 24px;
}

.admin-logo-title {
  font-weight: 700;
  font-size: 18px;
  color: #222;
}

.admin-nav-section + .admin-nav-section {
  margin-top: 24px;
}

.admin-nav-title {
  font-size: 12px;
  color: #9aa0b5;
  margin-bottom: 8px;
}

.admin-nav-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  margin-bottom: 4px;
}

.admin-nav-link:hover {
  background: #f2f4ff;
}

.admin-nav-link.is-active {
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
}

.admin-nav-link.is-disabled {
  color: #c0c4d4;
  cursor: default;
}

/* 메인 영역 */
.admin-main {
  flex: 1;
  padding: 32px 40px;
  box-sizing: border-box;
}

.admin-page-header {
  margin-bottom: 24px;
}

.admin-page-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

.admin-page-subtitle {
  font-size: 14px;
  color: #6b7280;
}

/* 카드들 */
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.admin-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.admin-card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.admin-card-text {
  font-size: 14px;
  color: #4b5563;
}

.admin-quick-links {
  list-style: none;
  padding: 0;
  margin: 8px 0 4px;
}

.admin-quick-link {
  font-size: 14px;
  color: #4f46e5;
  text-decoration: none;
}

.admin-quick-link:hover {
  text-decoration: underline;
}

.admin-card-note {
  margin-top: 8px;
  font-size: 12px;
  color: #9ca3af;
}

/* --- Admin Layout --- */

.admin-layout {
  display: flex;
  gap: 32px;
  padding: 40px 0 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.admin-sidebar {
  width: 220px;
}

.admin-sidebar-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.admin-sidebar-section {
  margin-bottom: 24px;
}

.admin-sidebar-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #888;
  margin-bottom: 8px;
}

.admin-sidebar-link {
  display: block;
  font-size: 14px;
  padding: 6px 0;
  color: #333;
}

.admin-sidebar-link--active {
  font-weight: 700;
  color: #4f46e5;
}

.admin-sidebar-link--disabled {
  color: #bbb;
  cursor: default;
}

.admin-main {
  flex: 1;
}

.admin-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.admin-main-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

.admin-main-subtitle {
  font-size: 14px;
  color: #666;
}

.admin-main-meta {
  font-size: 14px;
  color: #555;
}

.admin-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.admin-card--split {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 32px;
}

.admin-card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th,
.admin-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.admin-table th {
  font-weight: 600;
  background: #fafafa;
}

.admin-table-empty {
  text-align: center;
  padding: 24px 0;
  color: #777;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.badge-admin {
  background: #eef2ff;
  color: #4f46e5;
}

.badge-user {
  background: #ecfeff;
  color: #0891b2;
}

.badge-active {
  background: #ecfdf3;
  color: #16a34a;
}

.badge-inactive {
  background: #fef2f2;
  color: #b91c1c;
}

.admin-pagination {
  margin-top: 16px;
  text-align: center;
}

.page-link {
  display: inline-block;
  margin: 0 2px;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.page-link--active {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
}

.admin-detail-list {
  font-size: 14px;
}

.admin-detail-list > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.admin-detail-list dt {
  color: #666;
}

.admin-detail-list dd {
  margin: 0;
  font-weight: 500;
}

.admin-form {
  font-size: 14px;
}

.admin-form-row {
  margin-bottom: 14px;
}

.admin-form-row--inline {
  display: flex;
  gap: 16px;
  align-items: center;
}

.admin-input {
  width: 100%;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  padding: 8px 10px;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-form-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.btn-primary {
  padding: 8px 16px;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  border: none;
}

.btn-secondary {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #d4d4d8;
  color: #374151;
  text-decoration: none;
}

.admin-alert {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}

.admin-alert--success {
  background: #ecfdf3;
  color: #166534;
}


/* === Mobile Header (<=768px) === */
@media (max-width: 768px) {
  /* 헤더 전체: 한 줄, 자동 높이 */
  .navbar {
    height: auto;              /* 64px 고정 높이 해제 */
    padding: 8px 0;
    gap: 8px;
  }

  /* 왼쪽(로고 + 메뉴) 영역이 가운데까지 차지 */
  .nav-left {
    flex: 1;
    min-width: 0;
  }

  /* 로고는 줄지 않고 고정 */
  .logo {
    flex-shrink: 0;
    font-size: 16px;
  }

  /* 메뉴는 가로 스크롤 가능한 한 줄 */
  .nav-menu {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;          /* 메뉴만 좌우 스크롤 */
    overflow-y: hidden;
    white-space: nowrap;       /* 한 줄 유지 */
    font-size: 14px;           /* 모바일에서도 충분히 보이게 */
  }

  /* 오른쪽 버튼 영역은 줄어들지 않게 */
  .nav-right {
    flex-shrink: 0;
    gap: 6px;
  }

  /* 버튼 크기 살짝 줄이기 */
  .btn-login,
  .btn-join {
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 999px;
  }
}

/* ----- Mypage & Admin 모바일 레이아웃 ----- */
@media (max-width: 768px) {
  /* 마이페이지 + 관리자 레이아웃: 위에 메뉴, 아래 본문 */
  .admin-layout.mypage-layout,
  .page-admin .admin-layout {
    flex-direction: column;      /* 가로 2컬럼 → 세로 1컬럼 */
    gap: 16px;
    padding: 24px 0 40px;
  }

  /* 마이페이지 / 관리자 공통: 사이드바를 상단 전체 폭으로 */
  .admin-layout.mypage-layout .admin-sidebar,
  .page-admin .admin-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e2e6f0;
    padding: 16px 14px;
  }

  /* 마이페이지 / 관리자 공통: 본문 카드 영역 패딩 조정 */
  .admin-layout.mypage-layout .admin-main,
  .page-admin .admin-main {
    padding: 0 16px 24px;
  }
}