/* =========================================================
   Artistmind Board ? 통합 CSS
   - 리스트(갤러리/일반), 쓰기(write.php), 읽기(read.php)
   - write.php의 실제 클래스(.container.write, .field, .row 등) 기준
   ========================================================= */

/* ---------- 기본 ---------- */
:root{
  --am-bg:#fff; --am-soft:#f7f7f7; --am-text:#333; --am-muted:#666;
  --am-border:#eaeaea; --am-accent:#3b82f6; --am-danger:#ef4444;
  --am-radius:16px; --am-radius-sm:10px;
  --am-shadow:0 6px 18px rgba(0,0,0,.06); --am-shadow-sm:0 4px 12px rgba(0,0,0,.05);
  --am-max:1980px;
}

/* 공통 레이아웃 */
.container{padding: 3.6875vw var(--grid_pd3) 2.2vw;}

/* 공통 카드/버튼/배지 */
.card{
  background:var(--am-bg); border:1px solid var(--am-border);
  border-radius:var(--am-radius); box-shadow:var(--am-shadow);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--am-border);color:var(--am-text);font-weight:600;cursor:pointer;transition:.18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--am-shadow-sm)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary{
    background:var(--am-accent);
    border-color:var(--am-accent);
    color:#fff;
    background: var(--am-accent);
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--am-border);
    /* margin-left: 8px; */
    }
.btn-danger{background:var(--am-danger);border-color:var(--am-danger);color:#fff}
.btn.ghost{background:transparent}

.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;color:#fff;background:var(--am-accent)}

/* =========================================================
   1) 쓰기 폼 (write.php)
   - .container.write > form#postForm 안의 .field, .row, .actions 등
   ========================================================= */

.container.write .warn{
  background:#fff3cd;border:1px solid #ffe69c;padding:10px 12px;border-radius:12px;margin:10px 0 16px;
}

#postForm{
  background:var(--am-bg); border:1px solid var(--am-border);
  border-radius:var(--am-radius); box-shadow:var(--am-shadow);
  padding:20px;
}

.field{margin:14px 0}
.field > label{display:block;font-weight:700;margin:0 0 8px}

#postForm input[type="text"],
#postForm input[type="password"],
#postForm input[type="file"],
#postForm select,
#postForm textarea{
  width:100%; border:1px solid var(--am-border); border-radius:12px;
  background:#fff; padding:12px 14px; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
  font:inherit;
}
#postForm textarea{min-height:180px;resize:vertical}
#postForm input:focus,#postForm select:focus,#postForm textarea:focus{
  border-color:var(--am-accent); box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

.field.row{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center;
}
.field .hint{font-size:12px;margin-top:6px}
.muted{font-size:12px}

.attached-list{margin:6px 0 0;padding:0;list-style:none}
.attached-list li{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:1px dashed var(--am-border);
  border-radius:10px;background:#fff;margin:8px 0;font-size:13px;color:var(--am-muted);
}
.attached-list a{color:var(--am-text)}
.attached-list a:hover{text-decoration:underline}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* =========================================================
   2) 읽기(read.php) 기본 틀
   - 아래 클래스명에 맞춰 read.php에서 감싸주면 깔끔
   ========================================================= */
.board-read{/* background:var(--am-bg); *//* border:1px solid var(--am-border); *//* border-radius:var(--am-radius); *//* box-shadow:var(--am-shadow); *//* padding:24px; */}
.board-read .post-title{font-size:24px;font-weight:800;margin:0 0 6px;word-break:keep-all}
.board-read .post-meta{font-size:13px;margin:0 0 16px}
.board-read .post-content{line-height:1.9}
.board-read .post-content img{max-width:100%;height:auto;border-radius:12px;display:block;margin:8px 0}
.board-read .attachments{margin:18px 0 0;padding:0;list-style:none}
.board-read .attachments li{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--am-border);
  border-radius:10px;background:#fff;margin:10px 0;font-size:13px;
}
.board-read .nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}

/* =========================================================
   3) 리스트 ? 갤러리(현재 embed_gallery.php 출력 구조와 호환)
   ========================================================= */
.am-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap: 25px;
  margin-top: 20px;
}
.am-gallery .box{
  display:block;background:var(--am-bg);border:1px solid var(--am-border);
  border-radius:var(--am-radius-sm);overflow:hidden;box-shadow:var(--am-shadow);
  transform:translateZ(0);transition:transform .18s ease, box-shadow .18s ease;
}
.am-gallery .box:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.am-gallery .box img{width:100%;aspect-ratio: 1/1;object-fit:cover;display:block;background:#f3f3f3}
.am-gallery .tit_box{padding:12px 14px 14px}
.am-gallery .part{font-size:12px;color:var(--am-muted)}
.am-gallery .tit{margin:6px 0 4px;font-size:var(--cont_desc);font-weight:700;color:var(--am-text)}
.am-gallery .tag{margin:0 0 6px;font-size:12px;color:#888}
.am-gallery .txt{margin:0;font-size:13px;/* color:#555; */line-height:1.5}

/* (선택) 일반형 테이블 목록 */
.board-table{margin-top:20px;width:100%;border-collapse:separate;border-spacing:0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);text-align:center;overflow: hidden;}
.board-table thead{background-color: #f4f4f4;}
.board-table th{padding:12px 14px;color:#999;font-weight:700;/* padding:0 10px 6px; */}
.board-table td{padding:12px 14px;background:var(--am-bg);border-bottom: 1px solid var(--am-border);\vertical-align:middle}
.board-table .title{font-weight:700;color:var(--am-text)}
.board-table .meta{color:#888}


/* 페이징 */
.am-pagination{display:flex;gap:8px;justify-content:center;margin:18px 0 0}
.am-page{
  min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--am-border);border-radius:10px;background:#fff;color:#444;transition:.18s ease
}
.am-page:hover{transform:translateY(-1px);box-shadow:var(--am-shadow-sm)}
.am-page.active{background:var(--am-accent);border-color:var(--am-accent);color:#fff}

/* 라이트박스 커서(옵션) */
[data-lightbox]{cursor:zoom-in}

/* =========================================================
   4) 반응형
   ========================================================= */
@media (max-width: 768px){
  .container{padding:0 16px;margin:18px auto}
  .field.row{grid-template-columns:1fr}
  .board-read{padding:18px}
  .am-gallery{gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .board-read .post-title{font-size:20px}
}

/* 유틸 */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.text-right{text-align:right}.center{display:flex;justify-content:center;align-items:center}



/* --- click guard hotfix --- */
.head-actions, .tabs, .board-head, .am-gallery, .board-table, .am-pagination {position: relative;z-index: 1;margin-bottom: 15px;}
header, footer { position: relative; z-index: 0; }
/* 카드 안의 오버레이 요소가 링크 클릭을 막지 않도록 */
.hover_box, .wow { pointer-events: none; }
.box, .box * { pointer-events: auto; }


/* ===========================
   Board Read — Attachments Grid
   =========================== */
.board-read .post-attachments { margin-top: 28px; }
.board-read .post-attachments .sec-title {
  margin: 0 0 12px;
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.board-read .attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.board-read .att.tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--am-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.board-read .att.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  border-color: #dcdfe3;
}

/* 이미지 타일 */
.board-read .img-tile .thumb {
  aspect-ratio: 4/3;
  background: #f3f4f6;
}
.board-read .img-tile .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 파일 타일 (비이미지) */
.board-read .file-tile .file-ico {
  font-size: 28px;
  line-height: 1;
  padding: 14px 14px 0;
}
.board-read .file-tile .file-ext {
  margin-left: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* 공통 메타 */
.board-read .att .meta { padding: 10px 12px 12px; }
.board-read .att .name {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2줄 말줄임 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-all;
}
.board-read .att .size {
  display: block;
  color: #6b7280;
  font-size: 12px;
  margin-top: 4px;
}

@media (max-width: 520px) {
  .board-read .attachments-grid { grid-template-columns: repeat(2, 1fr); }
}