* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #FAFAFA;
  --card: #FFFFFF;
  --text-1: #1A1A1A;
  --text-2: #6B7280;
  --text-3: #9CA3AF;
  --accent: #1F2937;
  --border: #E5E7EB;
  --highlight: #2563EB;
  --highlight-bg: #EFF6FF;
  --success: #059669;
  --warning: #D97706;
  --warning-bg: #FEF3C7;
  --muted: #F3F4F6;
  --muted-2: #F9FAFB;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(60px + var(--safe-bottom));
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* === Mobile-first base (375px assumed) === */
.container { padding: 0 16px; }

/* Top header — mobile */
header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  padding: 0 16px;
}
.logo { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-1); }
.logo .tag { display: none; }
.nav-links { display: none; }
.menu-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; stroke: var(--text-1); }
.nav-left { display: flex; align-items: center; gap: 6px; }
.back-btn { background: none; border: none; padding: 0; margin: 0; color: var(--text-1); cursor: pointer; display: inline-flex; align-items: center; }
.back-btn svg { width: 24px; height: 24px; stroke: var(--text-1); }
.compare-vs-desktop { display: none; }
/* 빈 링크(준비 중) — 클릭 가능한 것으로 오해하지 않도록 비활성 표시 */
a[href="#"] { opacity: 0.5; cursor: default; pointer-events: none; }
.bottom-tab a.tab-item[href="#"] { opacity: 0.4; }

/* Bottom tab bar — mobile only */
.bottom-tab {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: var(--safe-bottom);
  z-index: 99;
}
.tab-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8px 4px 10px;
  font-size: 11px;
  color: var(--text-3);
  min-height: 56px;
}
.tab-item.active { color: var(--highlight); font-weight: 600; }
.tab-item svg { width: 22px; height: 22px; margin-bottom: 2px; stroke-width: 1.6; }

/* Breadcrumb */
.breadcrumb {
  font-size: 12px;
  color: var(--text-2);
  padding: 14px 0 8px;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb a { color: var(--text-2); }
.breadcrumb .sep { margin: 0 6px; color: var(--text-3); }
.breadcrumb .current { color: var(--text-1); font-weight: 500; }

/* Typography — mobile */
h1 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.4px; margin-bottom: 6px; }
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 12px; letter-spacing: -0.2px; }
h3 { font-size: 15px; font-weight: 600; margin: 18px 0 8px; }
.subtitle { color: var(--text-2); font-size: 14px; margin-bottom: 22px; line-height: 1.55; }
.section-desc { color: var(--text-2); font-size: 13px; margin-bottom: 14px; line-height: 1.55; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  transition: all 0.15s;
  color: inherit;
  display: block;
}
.card:active { background: var(--muted-2); transform: scale(0.98); }
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 28px;
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.card-id { font-size: 11px; color: var(--text-3); letter-spacing: 0.5px; }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.card-sub { font-size: 12px; color: var(--text-3); line-height: 1.45; }
.card-count { font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* Badge */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--muted);
  color: var(--text-2);
  letter-spacing: 0.3px;
}
.badge.featured { background: var(--highlight-bg); color: var(--highlight); }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.badge.phase2 { background: var(--muted); color: var(--text-3); }
.badge.success { background: #D1FAE5; color: var(--success); }

/* Tag list (자주 찾는 소재) */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list a {
  display: inline-block;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-weight: 500;
}
.tag-list a.featured { background: var(--highlight-bg); border-color: transparent; color: var(--highlight); }
.tag-list a:active { background: var(--muted); }

/* Quick info bar (자주 찾는) */
.quick-info {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.quick-info .label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 600; }

/* Stats */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.stat { background: var(--muted-2); padding: 10px 14px; border-radius: 8px; }
.stat-label { font-size: 11px; color: var(--text-2); margin-bottom: 3px; }
.stat-value { font-size: 15px; font-weight: 600; }

/* Spec table — mobile: key-value rows */
table.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.spec-table th, .spec-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table th { background: var(--muted-2); font-weight: 600; font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
.spec-table td.label { color: var(--text-2); width: 38%; font-size: 12px; }
.spec-table td.highlight { color: var(--highlight); font-weight: 600; }

/* Product info row */
.product-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.product-row:last-child { border-bottom: none; }
.product-brand { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.product-name { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-1); }
.product-meta { font-size: 12px; color: var(--text-2); }
.product-price { font-size: 14px; font-weight: 700; color: var(--accent); }
.product-sale { font-size: 12px; color: var(--text-3); text-decoration: line-through; margin-left: 6px; font-weight: 500; }

/* Compare — mobile: horizontal scroll cards */
.compare-mobile {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin: 0 -16px 24px;
  padding-left: 16px; padding-right: 16px;
  scrollbar-width: none;
}
.compare-mobile::-webkit-scrollbar { display: none; }
.compare-mobile > .card {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

/* Note box */
.note-box {
  background: var(--highlight-bg);
  border-left: 3px solid var(--highlight);
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.55;
}
.note-box .note-label { font-size: 10px; color: var(--highlight); font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; display: block; }

/* Curation (매니아 직접 코멘트) */
.curation-note {
  background: #FFFBEB;
  border-left: 3px solid var(--warning);
  padding: 12px 14px;
  border-radius: 6px;
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.55;
}
.curation-note .label { font-size: 10px; color: var(--warning); font-weight: 700; letter-spacing: 0.7px; }
.curation-note .author { font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* Sticky bottom CTA (product pages) */
.cta-bottom {
  position: fixed;
  bottom: calc(56px + var(--safe-bottom));
  left: 0; right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  z-index: 98;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.cta-bottom .price-block { flex: 1; }
.cta-bottom .price-label { font-size: 10px; color: var(--text-3); margin-bottom: 1px; }
.cta-bottom .price-main { font-size: 16px; font-weight: 700; color: var(--accent); }

/* Buttons */
.btn-buy { 
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: white; padding: 12px 18px; 
  border-radius: 8px; font-size: 14px; font-weight: 600; 
  min-height: 44px; border: none; cursor: pointer; 
}
.btn-buy:active { background: #111827; transform: scale(0.98); }
.btn-buy.secondary { background: white; color: var(--accent); border: 1px solid var(--border); }
.btn-buy.full { width: 100%; }
.btn-icon { width: 44px; padding: 12px; }

/* Affiliate disclosure */
.affiliate-disclosure {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--muted-2);
  border-radius: 6px;
}

/* Footer */
footer {
  background: var(--muted-2);
  border-top: 1px solid var(--border);
  padding: 24px 16px;
  font-size: 12px;
  color: var(--text-2);
}
footer .footer-meta { color: var(--text-3); margin-top: 6px; }

/* === Tablet + (≥768px) === */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
  .nav-inner { height: 60px; padding: 0; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
  .logo { font-size: 17px; }
  .logo .tag { display: inline; color: var(--text-3); font-weight: 400; font-size: 12px; margin-left: 8px; }
  .nav-links { display: flex; gap: 28px; list-style: none; }
  .nav-links a { color: var(--text-2); font-size: 14px; font-weight: 500; }
  .nav-links a:hover { color: var(--text-1); }
  .menu-btn { display: none; }
  .bottom-tab { display: none; }
  .cta-bottom { bottom: 0; }
  h1 { font-size: 28px; }
  h2 { font-size: 20px; margin-top: 36px; }
  .subtitle { font-size: 15px; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .card-grid.sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .card-grid.lg { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .stats-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  .compare-mobile { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 16px; overflow: visible; margin: 0 0 24px; padding: 0; }
  .compare-mobile > .card { flex: none; }
  .compare-vs-desktop { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-3); }
  footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; }
  .back-btn { display: none; }
}

/* Positioning chart */
.position-chart {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 14px 14px;
  margin-bottom: 22px;
}
.position-chart .chart-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.position-chart .chart-sub { font-size: 11px; color: var(--text-2); margin-bottom: 12px; }
.position-chart .chart-svg { width: 100%; height: auto; display: block; }
.position-chart .axis-text { font-size: 9px; fill: var(--text-2); }
.position-chart .axis-label { font-size: 10px; fill: var(--text-2); font-weight: 600; }
.position-chart .grid-line { stroke: var(--border); stroke-width: 0.5; }
.position-chart .axis-line { stroke: var(--text-3); stroke-width: 1; }
.position-chart .product-dot { fill: var(--highlight); stroke: white; stroke-width: 1.5; }
.position-chart .product-dot.featured { fill: var(--warning); }
.position-chart .product-dot.reference { fill: var(--text-3); opacity: 0.6; }
.position-chart .product-label { font-size: 9px; fill: var(--text-1); font-weight: 600; }
.position-chart .product-meta { font-size: 8px; fill: var(--text-2); }
.position-chart .quadrant-text { font-size: 9px; fill: var(--text-3); font-style: italic; }
.position-chart .legend { 
  display: flex; gap: 14px; margin-top: 10px; 
  font-size: 11px; color: var(--text-2);
  flex-wrap: wrap;
}
.position-chart .legend-item { display: flex; align-items: center; gap: 5px; }
.position-chart .legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--highlight); }
.position-chart .legend-dot.featured { background: var(--warning); }
.position-chart .legend-dot.reference { background: var(--text-3); opacity: 0.6; }

/* Collapsible (매니아 디테일) */
details.matenia-box { 
  background: var(--muted-2); 
  border: 1px solid var(--border); 
  border-radius: 8px; 
  padding: 0; 
  margin-bottom: 22px;
}
details.matenia-box summary { 
  padding: 12px 16px; 
  cursor: pointer; 
  font-size: 13px; 
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.matenia-box summary::-webkit-details-marker { display: none; }
details.matenia-box summary::after { 
  content: '▾'; 
  color: var(--text-3); 
  font-size: 10px;
  transition: transform 0.15s;
}
details.matenia-box[open] summary::after { transform: rotate(180deg); }
details.matenia-box .matenia-body { padding: 0 16px 14px; font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* Scenario tag chip (활동·계절 진입) */
.scenario-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.scenario-tags a {
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--muted);
  color: var(--text-1);
  font-weight: 500;
  border: 1px solid var(--border);
}
.scenario-tags a:active { background: var(--muted-2); }
.scenario-tags .stag { font-size: 12px; padding: 7px 14px; border-radius: 8px; background: var(--muted); color: var(--text-3); font-weight: 500; border: 1px dashed var(--border); }

/* Numbered dot in chart */
.dot-num { fill: white; font-size: 10px; font-weight: 700; }

/* Chart legend table (그래프 아래 분리) */
.chart-legend-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12px;
}
.chart-legend-table tr { border-bottom: 1px solid var(--border); }
.chart-legend-table tr:last-child { border-bottom: none; }
.chart-legend-table td { padding: 8px 6px; vertical-align: top; }
.chart-legend-table .num-cell { width: 28px; padding-right: 8px; }
.chart-legend-table .num-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: white; font-weight: 700; font-size: 11px;
}
.chart-legend-table .name-cell { font-weight: 600; color: var(--text-1); }
.chart-legend-table .meta-cell { color: var(--text-2); font-size: 11px; }

/* Recommendation card (활동→소재 추천) */
.rec-card {
  display: block;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.rec-card:active { background: var(--muted-2); transform: scale(0.98); }
.rec-scenario {
  font-size: 11px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.rec-arrow {
  font-size: 11px;
  color: var(--text-3);
  margin: 0 4px;
}
.rec-pick {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 5px;
  line-height: 1.3;
}
.rec-reason {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

/* 가로 스크롤 가능한 spec 표 wrap (5컬럼 이상 모바일에서 깨질 때) */
.spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px 22px;
  padding: 0 16px;
  scrollbar-width: thin;
}
.spec-table-wrap::-webkit-scrollbar { height: 4px; }
.spec-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.spec-table-wrap table { min-width: 500px; margin-bottom: 0; }
.spec-table-wrap th, .spec-table-wrap td { white-space: nowrap; }
.scroll-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: -16px;
  margin-bottom: 16px;
  text-align: right;
}

/* "곧 추가" 배지 (placeholder 페이지) */
.badge.coming { background: var(--muted); color: var(--text-3); }
.card.placeholder { opacity: 0.65; }
.card.placeholder:active { transform: none; }

/* Sitemap tree */
.sitemap-section { margin-bottom: 28px; }
.sitemap-section h3 { 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--text-1); 
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sitemap-section .count { font-size: 11px; color: var(--text-3); font-weight: 400; }
.sitemap-list { list-style: none; }
.sitemap-list li {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 14px;
}
.sitemap-list li.done a { color: var(--text-1); flex: 1; text-decoration: none; }
.sitemap-list li.done a:active { color: var(--highlight); }
.sitemap-list li.pending { background: var(--muted-2); color: var(--text-3); }
.sitemap-list li.pending::before { content: ''; }
.sitemap-list .item-status {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 8px;
}
.sitemap-list .item-status.done { background: #D1FAE5; color: var(--success); }
.sitemap-list .item-status.partial { background: var(--warning-bg); color: var(--warning); }
.sitemap-list .item-status.pending { background: var(--muted); color: var(--text-3); }
.sitemap-list .item-arrow { color: var(--text-3); margin-left: auto; padding-left: 8px; }

/* 사이트맵 footer 링크 */
footer a.sitemap-link { color: var(--highlight); text-decoration: none; font-weight: 500; }
footer a.sitemap-link:hover { text-decoration: underline; }

/* 소재 원리 다이어그램 */
.material-diagram {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px 14px;
  margin-bottom: 22px;
}
.material-diagram svg { width: 100%; height: auto; display: block; max-width: 360px; margin: 0 auto; }
.material-diagram .diagram-caption {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 12px;
  text-align: center;
  line-height: 1.5;
}
.material-diagram .dg-label { font-size: 10px; fill: #6B7280; }
.material-diagram .dg-label-dark { font-size: 11px; fill: #1A1A1A; font-weight: 600; }

/* 단계별(step) 안내 — 가이드 절차용 */
.steps-box { border: 1px solid var(--border, #E6E3DA); background: #FAFCFB; border-radius: 14px; padding: 4px 16px 8px; margin: 12px 0 18px; }
.steps-box .steps-h { font-size: 13px; font-weight: 700; color: #0F6E56; padding: 12px 0 2px; }
ol.steps { counter-reset: stp; list-style: none; padding: 0; margin: 6px 0 4px; }
ol.steps > li { counter-increment: stp; position: relative; padding: 10px 0 10px 38px; border-top: 1px solid var(--border, #E6E3DA); font-size: 14px; line-height: 1.55; color: var(--text-1, #1A1A1A); }
ol.steps > li:first-child { border-top: none; }
ol.steps > li::before { content: counter(stp); position: absolute; left: 0; top: 9px; width: 25px; height: 25px; border-radius: 50%; background: #0F6E56; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
ol.steps > li strong { color: #0F6E56; }