/* ====== Modern Categories (TourAPI) ====== */
:root{
  --bg: white;
  --paper: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --brand: #5b8cff;
  --brand-2:#3d74ff;
  --accent:#7b61ff;
  --radius:16px;
  --shadow-1: 0 6px 18px rgba(17, 24, 39, .08);
  --shadow-2: 0 16px 40px rgba(17, 24, 39, .12);
  --ring: 0 0 0 3px rgba(91, 140, 255, .25);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family: ui-sans-serif,-apple-system,Segoe UI,Roboto,Noto Sans KR,Helvetica,Arial,sans-serif}

.tm-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 18px 48px;
}

.tm-head{ text-align:center; margin-bottom: 14px }
.tm-title{
  font-size: 30p;x font-weight: bolder;
  display:inline-flex; align-items:center; gap:10px;
  font-size: 22px; font-weight:800; padding:8px 14px; border-radius: 999px;
}
.tm-sub{ margin: 8px 2px 20px; color: var(--muted) }

/* Grid */
.tm-grid{
  display:grid; gap: 16px;
}

/* 모바일 2열 */
@media (max-width: 479px){
  .tm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* 태블릿 3열 */
@media (min-width:480px) and (max-width:1023px){
  .tm-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* 데스크탑 4열 */
@media (min-width:1024px){
  .tm-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Card */
.tm-card{
  display:flex; flex-direction:column; gap:14px;
  padding:18px; border-radius: var(--radius);
  background: var(--paper);
  border:1px solid #eef2f7;
  text-decoration:none; color:inherit;
  box-shadow: var(--shadow-1);
  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  min-height: 132px;
}
.tm-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color:#e2e8f0;
}
.tm-card:focus-visible{
  outline:none; box-shadow: var(--shadow-1), var(--ring);
}

/* Icon */
.tm-icon{
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center;
  background: #eff4ff; color: var(--brand);
}
.tm-icon svg{ width:26px; height:26px; fill: currentColor }

/* Accent card (맞춤형 검색) */
.tm-accent{
  background: linear-gradient(180deg, #fff, #faf9ff);
  border-color: #eae7ff;
}
.tm-accent .tm-icon{
  background:#efeaff; color: var(--accent);
}

/* Body */
.tm-body h3{
  margin:0 0 6px; font-size: 16px; font-weight:800; letter-spacing:.2px;
}
.tm-body p{
  margin:0; color: var(--muted); font-size: 13px; line-height:1.5;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}