/* ============================================================
   LANDING DESK — pages.css
   페이지별 고유 레이아웃 (대시보드 2분할 · 편집기 3분할 · SEO 2분할
   · 템플릿 갤러리 · 사이트맵)
   ============================================================ */

/* =========================================================
   TEMPLATES — 갤러리
   ========================================================= */
.tpl-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.tpl-tile {
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease-spring),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.tpl-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.tpl-tile .tpl-thumb { height: 120px; margin-bottom: var(--sp-4); transition: transform var(--dur) var(--ease-spring); }
.tpl-tile:hover .tpl-thumb { transform: scale(1.03); }
.tpl-tile .tpl-tile-name { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-strong); }
.tpl-tile .tpl-tile-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.tpl-tile .tpl-tile-foot { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.tpl-tile .tpl-tile-foot .btn { flex: 1; }

/* =========================================================
   DASHBOARD
   ========================================================= */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.dash-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-6);
  align-items: start;
}
.dash-filterbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.dash-filterbar .filter-search { flex: 1; min-width: 160px; max-width: 260px; }
.dash-filterbar .filter-sort { width: 150px; }

/* mini line chart */
.minichart { width: 100%; height: 120px; }
.minichart svg { width: 100%; height: 100%; overflow: visible; }
.minichart .ln {
  fill: none; stroke: var(--color-primary); stroke-width: 2;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: chart-draw 1.1s var(--ease-out) .15s forwards;
}
.minichart .ar { fill: var(--color-primary-soft); opacity: 0; animation: chart-area .6s var(--ease-out) .8s forwards; }
.minichart .dt { fill: var(--color-primary); opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; animation: ld-pop .35s var(--ease-spring) forwards; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-area { to { opacity: .5; } }
.chart-legend { display: flex; justify-content: space-between; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }

/* =========================================================
   EDITOR — 3분할
   ========================================================= */
.editor-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}
.editor-head .eh-title { width: 200px; flex: 1 1 200px; }
.editor-head .eh-slug { width: 320px; flex: 1 1 280px; }
.editor-head .eh-spacer { flex: 1; }
.editor-head .eh-toggle { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-body); }
.editor-head .eh-actions { display: flex; gap: var(--sp-2); }

.editor-grid {
  display: grid;
  grid-template-columns: 230px 1fr 280px;
  gap: var(--sp-5);
  align-items: start;
}

/* block palette (left) */
.block-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.block-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-body);
  background: var(--bg-card);
  cursor: grab;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur) var(--ease-spring),
              box-shadow var(--dur) var(--ease-out);
}
.block-item:hover { border-color: var(--color-primary); background: var(--color-primary-tint); transform: translateX(3px); box-shadow: var(--shadow-sm); }
.block-item:active { cursor: grabbing; transform: scale(.98); }
.block-item .blk-handle { margin-left: auto; color: var(--text-faint); }
.block-item .blk-handle svg { width: 16px; height: 16px; }
.block-item .blk-ico { color: var(--color-primary); display: inline-flex; }
.block-item .blk-ico svg { width: 18px; height: 18px; }

/* canvas (center) */
.canvas-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.device-btn {
  width: 38px; height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: grid; place-items: center;
  background: var(--bg-card);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
.device-btn:hover { color: var(--text-body); transform: translateY(-1px); }
.device-btn:active { transform: scale(.92); transition-duration: .05s; }
.device-btn.is-active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-tint); }
.device-btn svg { width: 17px; height: 17px; }

.canvas-frame {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  transition: max-width var(--dur-slow) var(--ease-spring);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-app);
  overflow: hidden;
}
.canvas-frame[data-device="tablet"] { max-width: 600px; }
.canvas-frame[data-device="mobile"] { max-width: 360px; }

/* mock landing content inside canvas */
.lp-hero {
  background: var(--gradient-top);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
}
.lp-hero h2 { font-size: var(--fs-display); color: var(--text-strong); margin-bottom: var(--sp-3); }
.lp-hero p { color: var(--text-body); margin-bottom: var(--sp-5); }
.lp-block {
  padding: var(--sp-5) var(--sp-6);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.lp-block:hover { background: var(--color-primary-tint); }
.lp-block.is-selected { border-color: var(--color-primary); background: var(--color-primary-tint); animation: ld-tap var(--dur) var(--ease-spring); }
@keyframes ld-tap { 0% { transform: scale(.99); } 60% { transform: scale(1.008); } 100% { transform: scale(1); } }
.lp-img-placeholder {
  height: 150px;
  border-radius: var(--r-md);
  background: var(--bg-muted);
  display: grid; place-items: center;
  color: var(--text-faint);
}
.lp-img-placeholder svg { width: 32px; height: 32px; }

.custom-code-wrap { margin-top: var(--sp-5); }

/* property panel (right) */
.prop-section + .prop-section { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.prop-section-title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); margin-bottom: var(--sp-3); }

/* =========================================================
   SEO — 2분할
   ========================================================= */
.seo-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.seo-topbar .seo-target { width: 280px; flex: 1 1 240px; max-width: 340px; }
.seo-topbar .seo-spacer { flex: 1; }

.seo-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--sp-6);
  align-items: start;
}
.seo-preview { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-5); }

/* faq builder */
.faq-builder { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-row {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--bg-input);
}
.faq-row .faq-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.faq-row .faq-num { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.faq-row .input + .input { margin-top: var(--sp-2); }

/* sitemap status card rows */
.kv-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0; font-size: var(--fs-sm); }
.kv-row + .kv-row { border-top: 1px solid var(--border); }
.kv-row .kv-key { color: var(--text-muted); }
.kv-row .kv-val { color: var(--text-strong); font-weight: var(--fw-medium); }

/* og image preview thumb */
.og-thumb {
  width: 100%;
  height: 120px;
  border-radius: var(--r-md);
  background: var(--gradient-top);
  display: grid; place-items: center;
  color: var(--text-body);
  font-size: var(--fs-xs);
  margin-top: var(--sp-3);
}

/* =========================================================
   SETTINGS
   ========================================================= */
.settings-tabs { margin-bottom: var(--sp-5); }
.set-route {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-input);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px) {
  .seo-grid { grid-template-columns: 1fr 340px; }
  .tpl-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-split { grid-template-columns: 1fr; }
  .editor-grid { grid-template-columns: 1fr; }
  .seo-grid { grid-template-columns: 1fr; }
  .seo-preview { position: static; }
  .tpl-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dash-stats { grid-template-columns: 1fr; }
  .tpl-grid { grid-template-columns: 1fr; }
  .tpl-gallery { grid-template-columns: 1fr; }
  .editor-head .eh-actions { width: 100%; }
}