/* ==== Root tokens ==== */
/* ---- design tokens ---- */
:root{
  --bg:#f6f8fb;
  --panel:#fff;
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e6eaf2;
  --accent:#0f172a;
  --danger:#ef4444;

  --radius:12px;
  --shadow:0 10px 26px rgba(15,23,42,.06);
  --container-max:760px;
  --container:760px;

  --thumb-w:100px;   /* table thumb */
  --thumb-h:72px;
}

/* ==== Base ==== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hidden{ display:none!important; }

/* ==== Container / Section ==== */
.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 20px;
}
.section{ padding-top:64px; } /* 헤더와 간격 */
.page-title{
  margin:0 0 6px;
  color:var(--brand);
  font-size:28px;
  font-weight:800;
  line-height:1.25;
}
.page-subtitle{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14px;
}

/* ==== Header (index 동일) ==== */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(6px);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.brand__logo{
  display:block;
  width:auto;
  height:28px;
  object-fit:contain; /* 로고 높이 통일 */
}
.site-nav a{
  margin-left:22px;
  color:var(--ink-2);
  font-weight:600;
  text-decoration:none;
}
.site-nav a:hover{ color:var(--brand); }
.nav-id{
  margin-left:20px;
  color:#03bd9b;     /* 최신 민트 톤 */
  font-weight:700;
  letter-spacing:.2px;
}


  /* ===============================
     Dashboard Layout
     =============================== */
  .dashboard-container { max-width:var(--container); margin:42px auto; }
  .dashboard-table-wrap {
    background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow);
    overflow:hidden;
  }
  .dashboard-toolbar {
    display:flex; justify-content:flex-end; align-items:center;
    margin:0 0 20px;
  }

  .dashboard-bottom {
    display:flex; justify-content:flex-end; align-items:center;
    margin:100px;
  }
  
  /* ===============================
     Table
     =============================== */
  .dashboard-table {
    width:100%; table-layout:fixed; border-collapse:collapse;
    font-size:13px;
  }
  .dashboard-table thead th {
    position:sticky; top:0; z-index:1;
    padding:12px 14px;
    background:var(--accent); color:#fff;
    font-weight:800; letter-spacing:.01em;
    text-align:center;
  }
  .dashboard-table th, .dashboard-table td {
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    vertical-align:middle;
    background:#fff;
  }
  .dashboard-table tbody tr:hover td { background:#f7faff; }
  
  /* colgroup (760px 맞춤) */
  .col-img  { width:130px; }
  .col-urlstack { width:280px; }
  .col-memo { width:190px; }
  .col-view, .col-del { width:40px; }
  
  /* 기본 정렬 */
  .dashboard-table th, .dashboard-table td { text-align:center; }
  .dashboard-table th:nth-child(1),
  .dashboard-table td:nth-child(1),
  .dashboard-table th:nth-child(2),
  .dashboard-table td:nth-child(2) { text-align:center; }
  
  
  /* URL 한 줄 ellipsis */
  .td-urlstack { min-width:0; }
  .td-urlstack .url-row {
    display:grid; grid-template-columns:auto 1fr; column-gap:8px; min-width:0;
    margin: 10px; /* ✅ 각 URL 줄 사이 간격 */
  }

  .td-urlstack a {
    display:block; min-width:0; max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    color:var(--accent); font-weight:800; text-decoration:none;
  }

  .dashboard-copy-btn {
    height:20px; padding:0 10px; border-radius:999px;
    background:#edf3ff; color:#143b91; border:1px solid #dbe7ff;
    font-weight:700;
  }
  
  /* 이미지 썸네일 */
  td.cell-img, .dashboard-table td:first-child {
    display:flex; align-items:center; gap:10px;
  }
  .dashboard-img-thumb {
    width:96px; height:68px; object-fit:cover; border-radius:10px;
    box-shadow:0 6px 14px rgba(15,23,42,.10); cursor:pointer;
  }
  .btn-change-standalone{ display:none!important; }
  
  /* 버튼 */
  .btn-view, .dashboard-btn-blue {
    display:inline-flex; align-items:center; justify-content:center;
    height:28px; padding:0 12px; border-radius:8px;
    font-weight:900; font-size:12px;
    background:#111827; color:#fff; border:1px solid #111827;
  }
  .btn-view:hover, .dashboard-btn-blue:hover { filter:brightness(.96); }
  
  .btn-del, .dashboard-btn-red {
    display:inline-flex; align-items:center; justify-content:center;
    height:28px; padding:0 12px; border-radius:8px;
    font-weight:900; font-size:12px;
    background:#fff; color:var(--danger); border:1px solid #f6c9c9;
  }
  .btn-del:hover, .dashboard-btn-red:hover { background:#fff5f5; }
  


/* 오버레이/카드 */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  
}
.modal:not(.hidden){ display:flex; }

.modal-content{
  position:relative;
  width:min(720px,92vw);
  max-height:88vh;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.25);
  overflow:hidden;
  transform:translateY(6px);
  opacity:0;
  animation:modalIn .18s ease-out forwards;
}
@keyframes modalIn{
  to{ transform:none; opacity:1; }
}
#modal-body{
  padding:14px 16px 18px;
  max-height:calc(88vh - 40px);
  overflow:auto;
}

/* 닫기 버튼 */
.modal-close{
  position:absolute; top:10px; right:12px;
  width:30px; height:30px; border-radius:999px;
  background:var(--card-bg); border:1px solid var(--card-border); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

/* 상단 – 파일명 줄 + 우측 버튼 */
.modal-title-row-main{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #E6EEFF;
  background:#F2F6FF;
  border-radius:10px;
  margin-bottom:10px;
}
@media (prefers-color-scheme: dark){
  .modal-title-row-main{ border-color:var(--chip-bd); background:var(--chip-bg); }
}
.modal-title-filename{
  font-weight:800; color:var(--brand); font-size:14px;
  word-break:break-all;
}
.modal-actions{ display:inline-flex; gap:8px; }
.dashboard-btn-blue{
  height:32px; padding:0 12px; border-radius:8px;
  background:#1f2937; border:1px solid #1f2937;
  color:#fff; font-weight:900; cursor:pointer;
}
.btn-success{ background:#19c37d!important; border-color:#16a66b!important; color:#fff!important; }
.btn-32{ height:32px; } .btn-w-96{ min-width:96px; } .btn-w-120{ min-width:120px; }

/* 지표 카드(총 방문수 / 오늘 총 방문수) */
#modal-body > .modal-section:first-of-type{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 12px;
}
#modal-body > .modal-section:first-of-type .modal-row{
  display:flex; flex-direction:column; gap:4px;
  padding:10px 12px; border:1px solid #e6eaf2; border-radius:10px; background:#f8fafc;
}
@media (max-width:560px){
  #modal-body > .modal-section:first-of-type{ grid-template-columns:1fr; }
}
#modal-body .modal-label{ color:var(--muted); font-weight:700; font-size:12px; }
#modal-body .modal-value{ color:var(--text); font-weight:900; font-size:18px; }

/* 블로그 주소 박스 */
#modal-body > .modal-section:nth-of-type(2) .modal-row{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; border:1px solid #e6eaf2; border-radius:10px; background:var(--card-bg);
}
#modal-body .modal-value a{
  color:#2563eb; font-weight:800; text-decoration:none; word-break:break-all;
}
#modal-body .modal-value a:hover{ text-decoration:underline; }

/* 표 컨테이너 + 레이블칩: data-label 사용 */
.modal-table-wrap{
  position:relative;
  overflow:auto;
  border:1px solid #eaf0fb; border-radius:10px; background:var(--card-bg);
  margin-top:12px;
}
.modal-table-wrap[data-label]::before{
  content:attr(data-label);
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--chip-bg); color:var(--brand); font-weight:800; font-size:12px;
  padding:4px 10px; border:1px solid var(--chip-bd); border-radius:999px;
}

/* 방문일자 전용: 모달 안에서만 독립 스크롤 */
.modal-subscroll{
  max-height: 44vh;      /* 필요하면 36~60vh 사이로 조절 */
  overflow: auto;
}


/* 표 – User-Agent 가장 넓게, IP 그다음, 방문수는 우측정렬 */
.modal-table{
  width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px;
}
.modal-table thead th{
  position:sticky; top:0; z-index:1;
  background:var(--head-bg); color:var(--brand); font-weight:900;
  padding:10px 12px; border-bottom:1px solid var(--head-bd); text-align:left;
}
.modal-table td{
  padding:9px 12px; border-bottom:1px solid var(--row-bd); vertical-align:middle;
  color:var(--text);
}
.modal-table tbody tr:nth-child(even) td{ background:var(--zebra); }
.modal-table tbody tr:hover td{ background:rgba(31,41,55,.06); }
@media (prefers-color-scheme: dark){
  .modal-table tbody tr:hover td{ background:rgba(255,255,255,.04); }
}

/* 열 폭 */
.modal-table thead th:nth-child(1),
.modal-table tbody td:nth-child(1){ width:22%; }           /* IP */
.modal-table thead th:nth-child(2),
.modal-table tbody td:nth-child(2){ width:64%; word-break:break-word; } /* User-Agent */
.modal-table thead th:nth-child(3),
.modal-table tbody td:nth-child(3){ width:14%; text-align:right; }      /* 방문수 */


/* 오버레이 */
.img-modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  background:rgba(2,6,23,.56);           /* 불투명도 충분히 */
  backdrop-filter:blur(4px);
}
.img-modal:not(.hidden){ display:flex; }

/* ✅ 컨테이너를 이미지 크기에 맞게(shrink-wrap) */
.img-modal-content{
  position:relative;
  display:inline-block;                  /* 핵심 */
  max-width:none; max-height:none;       /* 이미지가 크기 결정 */
}

/* 이미지 */
#img-modal-img{
  display:block;                         /* inline gap 제거 */
  max-width:92vw; max-height:88vh;
  border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.35);
}

/* ✅ 액션바: 이미지(=컨테이너) 우상단 고정 */
.img-modal-actions{
  position:absolute; right:1px; /* 핵심 */
  margin-top:20px;
 
}

/* 버튼 */
.img-modal-actions .change-btn{
  height:28px; padding:0 14px; border-radius:999px;
  background:#111827; color:#fff; border:1px solid #111827;
  font-weight:900; cursor:pointer;
}
.img-modal-actions .close-btn{
  height:28px; padding:0 12px; border-radius:999px;
  background:#fff; color:#1f2b4d; border:1px solid #d7e2ff;
  font-weight:800; cursor:pointer;
}
/* 오버레이/카드 */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;

  /* ✨ 기존에 빠져있던 오버레이 배경 추가 */
  background: var(--overlay);
  backdrop-filter: blur(50px);
}
.modal:not(.hidden){ display:flex; }

.modal-content{
  position:relative;
  width:min(720px,92vw);
  max-height:88vh;

  /* 변수로 불투명 카드 배경/테두리 사용 */
  background: var(--card-bg);
  border: 1px solid var(--card-border);

  border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.25);
  overflow:hidden;
  transform:translateY(6px);
  opacity:0;
  animation:modalIn .18s ease-out forwards;
}