/* ===============================
   Base: Font & Color Tokens
=================================*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

:root{
  --tt-brand:#28a745;     /* 메인 그린 */
  --tt-brand-d:#218838;   /* hover 그린 */
  --tt-ink:#1f2937;       /* 본문 글색 */
  --tt-sub:#6b7280;       /* 보조 텍스트 */
  --tt-line:#e5e7eb;      /* 경계선 */
  --tt-card:#fafafa;      /* 카드 배경 */
  --tt-bg:#ffffff;        /* 페이지 배경 */
  --tt-chip:#f0fdf4;      /* 칩 배경 */
  --tt-chip-brd:#bbf7d0;  /* 칩 보더 */
}

html, body{
  font-family: 'Nanum Gothic', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--tt-bg);
  color: var(--tt-ink);
}

/* 링크 기본 스타일: 색상/밑줄 고정 */
a{ color:inherit; text-decoration:none; }
a:hover, a:focus{ color:inherit; text-decoration:none; }

/* tt_master 게시판에서만 상단 공통 타이틀 숨김 */
#tt-master-list #container_title,
#tt-master-view #container_title{ display:none !important; }

/* 공통 컨테이너 */
.tt-wrap{ max-width:1200px; margin:0 auto; padding:28px; }

/* =================================
   LIST (카드형 랜딩)
==================================*/

/* Hero: 심플 화이트 카드 */
.tt-hero{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:28px; align-items:center;
  background:#fff; color:var(--tt-ink);
  border-radius:18px; padding:36px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.tt-hero h1{
  margin:0 0 8px; font-size:40px; line-height:1.15; font-weight:800; letter-spacing:-0.02em;
  color:#000;
}
.tt-hero p{ margin:8px 0 0; color:var(--tt-sub); font-size:16px }
.tt-hero img{
  max-width:100%; height:auto; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  object-fit:contain; background:#f9fafb; padding:8px;
}

/* 카테고리 칩 */
.tt-chipbar{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 16px; }
.tt-chip{
  border:1px solid var(--tt-line); background:#fff; color:#111827;
  padding:9px 14px; border-radius:999px; font-weight:700;
  text-decoration:none; transition:all .18s ease; box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.tt-chip:hover{ transform:translateY(-1px); box-shadow:0 6px 12px rgba(0,0,0,.08); }
.tt-chip.active{ background:var(--tt-brand); border-color:var(--tt-brand); color:#fff; box-shadow:0 8px 16px rgba(16,185,129,.25); }

/* 카드 그리드(하나만 있어도 크기 고정되게 auto-fill) */
.tt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}
.tt-card{
  background:#fff; border:1px solid var(--tt-line); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  max-width:320px; margin:0 auto;   /* 1개일 때도 과하게 커지지 않게 */
}
.tt-card:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,.08); border-color:#d1d5db; }

/* 정사각 썸네일 */
.tt-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; background:#fff; }

/* 카드 본문 */
.tt-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; }
.tt-title{ margin:0; font-size:18px; line-height:1.25; letter-spacing:-0.01em; }
.tt-title a{ color:inherit; }
.tt-desc{ margin:0; color:var(--tt-sub); font-size:14.6px; line-height:1.6; }
.tt-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tt-pill{
  display:inline-block; background:var(--tt-chip); border:1px solid var(--tt-chip-brd);
  color:#065f46; border-radius:999px; padding:6px 10px; font-size:12.6px; font-weight:400;
}

/* 카드 하단 전체 버튼(선택 사용) */
.tt-footer{ margin-top:auto; }
.tt-more-full{
  display:block; width:100%; text-align:center;
  background:var(--tt-brand); color:#fff;
  padding:12px 0; font-weight:700;
  border-radius:0 0 18px 18px;
  transition:background .15s ease;
}
.tt-more-full:hover{ background:var(--tt-brand-d); }

/* =================================
   VIEW (제품 상세)
==================================*/

/* Hero: 심플 화이트 + 대표 썸네일 1장 */
.ttv-hero{
  display:grid;
  grid-template-columns:1.2fr min(32vw, 360px);  /* 왼쪽 텍스트 / 오른쪽 썸네일 폭 */
  gap:24px; align-items:start;
  background:#fff; color:var(--tt-ink);
  border-radius:18px; padding:26px 24px;
  box-shadow:0 8px 24px);
}
.ttv-hero h1{
  margin:0 0 8px; font-size:32px; line-height:1.2; font-weight:800; color:#000;);
}
.ttv-hero p{ margin:6px 0 0; color:var(--tt-sub); font-size:15px; }

.ttv-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ttv-badge{
  background:#f0fdf4; border:1px solid #bbf7d0; color:#065f46;
  padding:6px 10px; border-radius:999px; font-weight:500; font-size:12.6px;
}

/* 이미지모드: 히어로 왼쪽 인라인 카드 */
.ttv-modes-inline{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-top:16px;
}
.ttv-mode{
  background:#f9fafb; border:1px solid var(--tt-line); border-radius:14px;
  padding:14px 16px;
}
.ttv-mode h4{ margin:4px 0 6px; color:var(--tt-brand); font-size:15px; }
.ttv-mode p{ margin:0; color:var(--tt-sub); font-size:13.6px; }

/* 대표 썸네일(정사각 1장, 그림자 제거) */
.ttv-right{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.ttv-thumb-wrap{
  width:100%; aspect-ratio:1/1;
  background:#f9fafb; border:1px solid var(--tt-line); border-radius:14px;
  overflow:hidden;
}
.ttv-thumb-wrap img{ width:100%; height:100%; object-fit:contain; }

/* 썸네일 아래 CTA: 견적/상담만 중앙정렬 */
.ttv-cta-right{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:10px; margin-top:10px;
}
.ttv-cta-right .ttv-btn{
  width:auto; min-width:140px; padding:10px 18px; border-radius:999px; font-size:14px;
}
/* 혹시 남아 있으면 구매/문의 버튼 숨김 */
.ttv-cta-right .ttv-btn.secondary{ display:none !important; }

/* 섹션 위아래 간격 */
.ttv-section{ margin-top:52px; }
.ttv-section h2{ margin:0 0 12px; font-size:22px; letter-spacing:-0.01em; }

/* 스펙(표) */
.ttv-spec{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--tt-line); border-radius:14px; background:#fff;
}
.ttv-spec th, .ttv-spec td{
  padding:12px 14px; border-bottom:1px solid #f3f4f6; font-size:14.6px; text-align:left;
}
.ttv-spec th{ width:33%; background:#ecfdf5; color:#065f46; }

/* 짧은 스펙(칩) */
.ttv-specchips{ display:flex; flex-wrap:wrap; gap:8px; }
.ttv-chip{
  display:inline-block;
  background:#f0fdf4; border:1px solid #bbf7d0; color:#065f46;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:12.6px;
  white-space:normal; line-height:1.4;
}

/* 긴 스펙 접기/펼치기 */
.ttv-fold-btn{
  background:#fff; border:1px solid var(--tt-line); border-radius:999px;
  padding:8px 14px; font-weight:800; cursor:pointer; margin-bottom:10px;
}
.ttv-fold-btn .ttv-fold-label--open{ display:none; }
.ttv-fold-btn.is-open .ttv-fold-label--closed{ display:none; }
.ttv-fold-btn.is-open .ttv-fold-label--open{ display:inline; }
.ttv-specwrap{ display:none; }
.ttv-specwrap.is-open{ display:block; }

/* 상세 설명(본문) */
.ttv-content{
  background:#fff; border:1px solid var(--tt-line); border-radius:14px;
  padding:20px; line-height:1.85; box-shadow:0 6px 14px rgba(0,0,0,.04);
}

/* CTA 공통(하단 관리 버튼 포함) */
.ttv-cta{
  margin:28px 0 8px; display:flex; gap:12px; flex-wrap:wrap;
  justify-content:flex-start; align-items:stretch;
}
.ttv-btn{
  flex:0 0 auto; min-width:80px; text-align:center;
  display:inline-flex; justify-content:center; align-items:center;
  background:var(--tt-brand); color:#fff; font-size:15px; font-weight:600;
  border-radius:999px; padding:12px 18px; line-height:1.4;
  transition: background .15s ease, transform .15s ease;
}
.ttv-btn:hover{ background:var(--tt-brand); transform:translateY(-1px); }
.ttv-btn.secondary{ background:rgb(242, 243, 245);color:#000; }
.ttv-btn.kakao{ background:var(--tt-brand); color:#fff; }

/* =================================
   Responsive Helpers & Content
==================================*/

/* 본문(에디터) 미디어 반응형 */
.ttv-content img, .ttv-content video, .ttv-content iframe{
  max-width:100% !important; height:auto !important;
}
.ttv-content table{
  display:block; width:100% !important; overflow-x:auto; border-collapse:collapse;
}
.ttv-content th, .ttv-content td{ word-break:break-word; white-space:normal; }
.ttv-content, .ttv-content p, .ttv-content li{ word-break:break-word; overflow-wrap:anywhere; }
.ttv-content pre, .ttv-content code{ white-space:pre-wrap; word-break:break-word; }

/* 모바일 레이아웃 */
@media (max-width:860px){
  .tt-hero{ grid-template-columns:1fr; }
  .ttv-hero{ grid-template-columns:1fr; }
  .ttv-thumb-wrap{ max-width:380px; justify-self:center; }
  .ttv-modes-inline{
    display:grid;
    grid-template-columns: repeat(2, 1fr); /* 항상 2열 */
    gap:20px 24px;                         /* 위아래 20px, 좌우 24px 간격 */
    margin-top:24px;                       /* 위 여백 */
    margin-bottom:16px;                    /* 아래 여백 */

}

/* 글쓰기 도움 박스 */
.tt-help{
  background:#fff; border:1px solid var(--tt-line); border-radius:14px;
  padding:16px; margin-bottom:16px; line-height:1.7; box-shadow:0 6px 14px rgba(0,0,0,.04);
}

/* minimal additions for bulk actions & badges */
.tt-bulkbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px 0}
.tt-bulkbar .tt-bulk-btn,.tt-admin-btn{display:inline-block;padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;background:#fff}
.tt-bulkbar .tt-bulk-btn.danger{border-color:#fca5a5;color:#b91c1c}
.tt-select-wrap{position:absolute;left:10px;top:10px}
.prio{position:absolute;left:10px;top:38px;background:#111827;color:#fff;border-radius:8px;font-size:12px;padding:2px 6px;opacity:.9}

/* =========================
   WRITE 폼 정리 (non-destructive)
   ========================= */

/* 컨테이너 */
.ttw{max-width: 980px; margin: 0 auto; padding: 20px}

/* 입력 가이드 박스 */
.ttw .tt-guide{background:#fafafa;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;margin-bottom:16px}
.ttw .tt-guide h4{margin:0 0 8px;font-size:14px;font-weight:800;color:#111827}
.ttw .tt-guide ul{margin:0;padding-left:18px;color:#6b7280;font-size:13px;line-height:1.55}

/* 한 줄(라벨+필드) 기본 레이아웃 */
.ttw .row{display:grid;grid-template-columns: 180px 1fr;gap:12px;align-items:flex-start;margin:12px 0}
.ttw label{display:block;font-weight:700;color:#111827;padding-top:8px}

/* 인풋/셀렉트/텍스트에어리어 공통 */
.ttw input[type=text],
.ttw input[type=number],
.ttw input[type=url],
.ttw input[type=email],
.ttw select,
.ttw textarea,
.ttw .frm_input{width:100%;box-sizing:border-box;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4;background:#fff}
.ttw textarea{min-height:140px;resize:vertical}
.ttw input:focus,
.ttw select:focus,
.ttw textarea:focus{outline:none;border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}

/* 도움말/설명 텍스트 */
.ttw .help{color:#6b7280;font-size:12.5px;margin-top:6px}

/* CSV / JSON 토글버튼(라디오) pill 느낌 - 라벨만 적용됨 */
.ttw .pill-group{display:flex;flex-wrap:wrap;gap:8px}
.ttw .pill-group label{display:inline-block;border:1px solid #e5e7eb;border-radius:999px;padding:6px 12px;cursor:pointer;background:#fff;font-weight:400;color:#065f46}
.ttw .pill-group input[type=radio]{margin-right:6px}
.ttw .pill-group input[type=radio]:checked + span{color:#fff;background:#16a34a;border-color:#16a34a;border-radius:999px;padding:0 6px}

/* wr_7(스펙) JSON/CSV 입력 큰 박스 느낌 */
.ttw .spec-area textarea{min-height:180px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace}

/* 버튼 하단 영역 */
.ttw .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.ttw .btn{display:inline-block;border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:9px 14px;text-decoration:none}
.ttw .btn.primary{background:#16a34a;border-color:#16a34a;color:#fff}
.ttw .btn.secondary{background:#fff}

/* 모바일 대응 */
@media (max-width: 760px){
  .ttw{padding:14px}
  .ttw .row{grid-template-columns: 1fr;gap:8px}
  .ttw label{padding-top:0}
}
.tt-downloads{margin:16px 0}
.tt-dl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tt-dlcard{display:flex;align-items:center;gap:10px;border:1px solid #e5e7eb;border-radius:12px;padding:12px;text-decoration:none;background:#fff}
.tt-dlcard:hover{filter:brightness(.98)}
.tt-dlicon{font-size:18px;line-height:1}
.tt-dlname{font-weight:700}
@media (max-width:720px){ .tt-dl-grid{grid-template-columns:1fr} }

/* ===== Downloads cards ===== */
.tt-downloads{margin:14px 0}
.tt-downloads .tt-dl-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.tt-downloads a.tt-dlcard{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; text-decoration:none; color:#111827;
  box-shadow:0 1px 0 rgba(17,24,39,.02);
  transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.tt-downloads a.tt-dlcard:hover{
  border-color:#16a34a; box-shadow:0 6px 16px rgba(22,163,74,.08);
  transform:translateY(-1px);
}
.tt-downloads .tt-dlicon{
  width:28px; height:28px; flex:0 0 28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; font-size:14px; line-height:1;
  background:#ecfdf5; color:#059669; border:1px solid #d1fae5;
}
.tt-downloads .tt-dlname{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* 모바일 한 줄 */
@media (max-width: 720px){
  .tt-downloads .tt-dl-grid{grid-template-columns:1fr}
}