/* =============================================================
   Trendall - aagag.com 스타일 심플 리스트
   라이트/다크 테마, 모바일 우선
   ============================================================= */

:root {
  --bg:        #ffffff;
  --bg-soft:   #f7f8fa;
  --fg:        #1f2328;
  --muted:     #6a737d;
  --border:    #e5e7eb;
  --accent:    #e8344e;
  --accent-bg: #fdecef;
  --link:      #1f6feb;
  --shadow:    0 1px 2px rgba(0,0,0,.04);
  --radius:    10px;
}
[data-theme="dark"] {
  --bg:        #16181c;
  --bg-soft:   #1e2126;
  --fg:        #e6e6e6;
  --muted:     #8b9199;
  --border:    #2a2d33;
  --accent:    #ff5e74;
  --accent-bg: #321a20;
  --link:      #79b8ff;
  --shadow:    0 1px 2px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR",
        "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.3; }
img { max-width: 100%; height: auto; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(180%) blur(6px);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 16px;
  height: 52px;
}
.logo {
  font-weight: 800; font-size: 18px; color: var(--fg);
}
.logo:hover { text-decoration: none; color: var(--accent); }
.gnb { display: flex; gap: 14px; flex: 0 0 auto; }
.gnb a { color: var(--fg); font-weight: 600; padding: 6px 4px; }
.gnb a:hover { color: var(--accent); text-decoration: none; }
.search-form { flex: 1; min-width: 0; }
.search-form input[type="search"] {
  width: 100%; max-width: 260px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--fg);
  font: inherit; font-size: 13px;
  outline: none;
}
.search-form input[type="search"]:focus { border-color: var(--accent); }
@media (max-width: 540px) {
  .search-form input[type="search"] { max-width: 100%; }
}
.theme-toggle {
  background: none; border: 1px solid var(--border); color: var(--fg);
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
}
.theme-toggle:hover { background: var(--bg-soft); }

.main { padding: 16px 16px 48px; }

/* ---- Home grid ---- */
.home-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .home-grid { grid-template-columns: 1fr 1fr; }
}
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.card-head h2 { font-size: 14px; margin: 0; }
.card-head .more { font-size: 12px; color: var(--muted); }

/* ---- Post list ---- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.post-list li:first-child { border-top: 0; }
.post-list .title {
  display: block;
  color: var(--fg);
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-list .title:hover { color: var(--accent); text-decoration: none; }
.post-list .title.visited { color: var(--muted); }
.post-list .meta { font-size: 12px; color: var(--muted); }
.post-list .meta .dot { margin: 0 4px; opacity: .5; }

/* cards : 모든 목록 공통 — 좌측 정사각 썸네일 + 우측 본문 */
.post-list.cards li { display: flex; gap: 10px; padding: 10px 14px; align-items: flex-start; }
.post-list.cards .body { min-width: 0; flex: 1; }
.post-list.cards .title { white-space: normal; font-size: 14px; line-height: 1.4; }
.post-list.cards .thumb {
  flex: 0 0 56px; width: 56px; aspect-ratio: 1 / 1;
  border-radius: 6px; overflow: hidden;
  background: var(--bg-soft);
  display: block; position: relative;
}
.post-list.cards .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.post-list.cards .thumb.empty,
.post-list.cards .thumb.broken { background: var(--bg-soft); }
.post-list.cards .thumb.empty::after,
.post-list.cards .thumb.broken::after {
  content: "·"; color: var(--border); position: absolute;
  inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
}

/* big list (Mirror, Deal 목록) - 더 큰 썸네일 */
.post-list.big li, .post-list.cards.big li { padding: 14px; }
.post-list.big .thumb, .post-list.cards.big .thumb {
  flex: 0 0 80px; width: 80px; aspect-ratio: 1 / 1;
}
.post-list.big .title, .post-list.cards.big .title { font-size: 15px; }

/* 출처 한 글자 라벨 - 제목 앞에 인라인 */
.src {
  display: inline-block;
  font-style: normal; font-weight: 700;
  width: 18px; height: 18px;
  line-height: 18px; text-align: center;
  border-radius: 4px;
  background: var(--accent-bg); color: var(--accent);
  font-size: 11px;
  vertical-align: 1px;
  margin-right: 4px;
  flex-shrink: 0;
}
/* 사이트별 색상 톤 */
.src-clien      { background:#e8eefa; color:#1a55c9; }
.src-ruliweb    { background:#fde9e3; color:#c84217; }
.src-bobaedream { background:#e6f4ea; color:#1d7f3a; }
.src-todayhumor { background:#fff3d6; color:#a36a00; }
.src-ddanzi     { background:#ffe1ec; color:#b6175e; }
.src-inven      { background:#e2eef9; color:#1561a3; }
.src-mlbpark    { background:#e3edff; color:#1f4ec3; }
.src-ppomppu    { background:#ffe5e0; color:#c33621; }
.src-quasarzone { background:#e8e6ff; color:#4b39c3; }
.src-82cook     { background:#fee9d5; color:#a04500; }
.src-fmkorea    { background:#dde7ff; color:#1a3aa5; }
.src-etoland    { background:#dff3df; color:#187018; }
[data-theme="dark"] .src-clien      { background:#1c2c4f; color:#7aa8ef; }
[data-theme="dark"] .src-ruliweb    { background:#3a2419; color:#ff8967; }
[data-theme="dark"] .src-bobaedream { background:#173a23; color:#6cd394; }
[data-theme="dark"] .src-todayhumor { background:#3a2a10; color:#e6b34a; }
[data-theme="dark"] .src-ddanzi     { background:#3a1a2b; color:#ff7eb1; }
[data-theme="dark"] .src-inven      { background:#1a2c44; color:#6ab1f0; }
[data-theme="dark"] .src-mlbpark    { background:#1e2e54; color:#789cf0; }
[data-theme="dark"] .src-ppomppu    { background:#3c2017; color:#ff8a73; }
[data-theme="dark"] .src-quasarzone { background:#26224f; color:#9d8df0; }
[data-theme="dark"] .src-82cook     { background:#3a2410; color:#f0a763; }
[data-theme="dark"] .src-fmkorea    { background:#1c294b; color:#7c9bf0; }
[data-theme="dark"] .src-etoland    { background:#1a3a1a; color:#6ed26e; }

/* deal */
.deal-list .price { color: var(--accent); }
.deal-list .expired { opacity: .55; }
.badge {
  display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: var(--muted); color: #fff; vertical-align: middle;
}
.badge.expired { background: var(--accent); }

/* ---- List header / filters ---- */
.list-head {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
}
@media (min-width: 760px) {
  .list-head { flex-direction: row; align-items: center; justify-content: space-between; }
}
.list-head h1 { font-size: 22px; margin: 0; }
.filter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-form select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}
.chip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}
.chip.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.chip:hover { text-decoration: none; }

/* ---- Post view ---- */
.post {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.post-head { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.post-head .src-line { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.post-head h1 { font-size: 22px; line-height: 1.3; }
.post-head .meta { font-size: 13px; color: var(--muted); }
.post-body { word-break: break-word; line-height: 1.7; }
.post-body img { display: block; max-width: 100%; height: auto; margin: 12px auto; border-radius: 6px; }
.post-body img[loading] { background: var(--bg-soft); }
.post-body p { margin: 0 0 1em; }
.post-body .yt-embed {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  margin: 16px auto; border-radius: 8px; overflow: hidden;
  background: #000;
}
.post-body .yt-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.post-body blockquote {
  border-left: 3px solid var(--border); padding: 6px 12px; color: var(--muted);
  margin: 1em 0;
}
.post-foot {
  display: flex; gap: 8px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-soft); color: var(--fg);
  font-size: 13px; cursor: pointer;
}
.btn:hover { background: var(--border); text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent); filter: brightness(.92); }

/* ---- Pager ---- */
.pager { display: flex; gap: 4px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.pager a, .pager strong {
  min-width: 32px; height: 32px; line-height: 30px; text-align: center;
  display: inline-block; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; color: var(--fg);
}
.pager strong { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager a:hover { background: var(--bg-soft); text-decoration: none; }

/* ---- Forms ---- */
.form-page { max-width: 600px; margin: 0 auto; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.form input, .form select, .form textarea {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  padding: 10px; border-radius: 6px; font: inherit;
}
.alert { padding: 10px 14px; border-radius: 6px; margin: 12px 0; }
.alert.ok  { background: #e6ffed; color: #064b14; border: 1px solid #b6efc5; }
.alert.err { background: #ffeef0; color: #86181d; border: 1px solid #fdb8c0; }
[data-theme="dark"] .alert.ok  { background: #0f2e15; color: #b1e7be; border-color: #1f5c2c; }
[data-theme="dark"] .alert.err { background: #3a151a; color: #ffb1b9; border-color: #6a1b22; }

.empty { color: var(--muted); padding: 20px; text-align: center; }

/* ---- Footer ---- */
.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 20px 0;
  font-size: 13px;
  color: var(--muted);
}
.site-footer p { margin: .3em 0; }

/* ---- Admin ---- */
.admin .topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.admin .topbar .gnb a { font-size: 13px; }
.admin .table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.admin .table th, .admin .table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left;
}
.admin .table th { background: var(--bg-soft); font-weight: 600; font-size: 12px; }
.admin .table tr:last-child td { border-bottom: 0; }
.admin .pill { padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.admin .pill.on  { background: #def7ec; color: #03543f; }
.admin .pill.off { background: #f3f4f6; color: #6b7280; }
[data-theme="dark"] .admin .pill.on  { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .admin .pill.off { background: #374151; color: #9ca3af; }