/*
Theme Name: what2buy (GeneratePress Child)
Theme URI: https://what2buy.co.kr/
Description: what2buy.co.kr child theme for GeneratePress. Product ranking / buying-guide site styles.
Author: what2buy
Template: generatepress
Version: 1.1.1
Text Domain: w2b
*/

/* GeneratePress global colors (--contrast, --base, --accent, ...) are set in the Customizer.
   Everything site-specific lives under the w2b- prefix so nothing collides with GP/GB classes. */

:root {
  --w2b-navy: #1f2937;
  --w2b-yellow: #f5b800;
  --w2b-blue: #2563eb;
  --w2b-blue-dark: #1d4ed8;
  --w2b-green: #16a34a;
  --w2b-line: #e5e7eb;
  --w2b-soft: #f3f4f6;
  --w2b-radius: 10px;
}

/* ---------- Header / nav ---------- */
.site-header, .main-navigation { background-color: var(--w2b-navy); }
.main-title a, .main-navigation a { color: #fff; }
.main-title a .w2b-logo-mark {
  display: inline-block; background: var(--w2b-yellow); color: var(--w2b-navy);
  font-weight: 800; border-radius: 6px; padding: 0 .4em; margin-right: .35em; line-height: 1.4;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--w2b-yellow); }

/* ---------- Archive cards (GP Premium blog columns) ---------- */
.generate-columns .inside-article { border: 1px solid var(--w2b-line); border-radius: var(--w2b-radius); overflow: hidden; }
.generate-columns .post-image img { width: 100%; height: auto; }
.generate-columns .entry-title { font-size: 1.1em; line-height: 1.45; }
.generate-columns .entry-title a { color: var(--w2b-navy); }
.generate-columns .entry-meta { font-size: .85em; }

/* ---------- Home hero ---------- */
.w2b-hero { text-align: center; padding: 48px 20px 36px; background: #fff; border-bottom: 1px solid var(--w2b-line); }
.w2b-hero h1 { font-size: 2em; margin: 0 0 .3em; color: var(--w2b-navy); }
.w2b-hero p { color: #4b5563; margin: 0; }
.w2b-hero .wp-block-search { max-width: 520px; margin: 1.2em auto 0; }
.w2b-section-title { display: flex; align-items: center; gap: .4em; font-size: 1.5em; margin: 2em 0 .8em; color: var(--w2b-navy); }
.w2b-section-title::after { content: ""; flex: 1; height: 2px; background: var(--w2b-line); margin-left: .5em; }

/* Query-loop cards on the home page */
.w2b-grid .wp-block-post { border: 1px solid var(--w2b-line); border-radius: var(--w2b-radius); overflow: hidden; background: #fff; }
.w2b-grid .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.w2b-grid .wp-block-post-title { font-size: 1.05em; line-height: 1.45; padding: 12px 14px 16px; margin: 0; }
.w2b-grid .wp-block-post-title a { color: var(--w2b-navy); text-decoration: none; }
.w2b-grid .wp-block-post-title a:hover { color: var(--w2b-blue); }

/* ---------- "Read more" link box used at the top of articles ---------- */
.w2b-linkbox { border: 1px solid #bfdbfe; border-radius: var(--w2b-radius); overflow: hidden; margin: 1.5em 0; }
.w2b-linkbox .w2b-linkbox-title { background: #dbeafe; padding: .6em 1em; font-weight: 700; margin: 0; }
.w2b-linkbox ul { list-style: none; margin: 0; padding: 0; }
.w2b-linkbox li { border-top: 1px solid #e0ecff; }
.w2b-linkbox li a { display: block; padding: .7em 1em; text-decoration: none; }
.w2b-linkbox li a::after { content: "›"; float: right; color: #9ca3af; }

/* ---------- Product card (one per ranked product) ---------- */
/* The card is a Group wrapping a Columns block (image column 220px + text column), so the
   wrapper itself is a plain box and the columns block does the two-column layout. */
.w2b-card { border: 1px solid var(--w2b-line); border-radius: var(--w2b-radius); padding: 20px; margin: 1.2em 0 1.6em; background: #fff; }
.w2b-card .wp-block-columns { gap: 24px; margin-bottom: 0; }
.w2b-card .w2b-card-img { flex-basis: 220px; flex-grow: 0; }
.w2b-card .w2b-card-img figure { margin: 0; }
.w2b-card .w2b-card-img img { width: 100%; height: auto; border-radius: 8px; }
.w2b-card .wp-block-buttons { margin-bottom: 0; }
.w2b-card .w2b-card-label { display: inline-block; font-size: .8em; font-weight: 700; color: var(--w2b-blue-dark);
  background: #dbeafe; border-radius: 999px; padding: .15em .8em; margin-bottom: .5em; }
.w2b-card .w2b-card-name { font-size: 1.15em; font-weight: 700; margin: 0 0 .6em; line-height: 1.4; }
.w2b-card ul.w2b-specs { list-style: none; margin: 0 0 1em; padding: 0; font-size: .95em; }
.w2b-card ul.w2b-specs li { padding-left: 1.4em; position: relative; margin-bottom: .25em; }
.w2b-card ul.w2b-specs li::before { content: "✓"; position: absolute; left: 0; color: var(--w2b-green); font-weight: 700; }
.w2b-btn, .entry-content .w2b-card .wp-block-button__link,
.entry-content .w2b-cta .wp-block-button__link { background-color: var(--w2b-blue) !important; color: #fff !important; border-radius: 8px;
  padding: .6em 1.4em; font-weight: 700; text-decoration: none; display: inline-block; }
.w2b-btn:hover, .entry-content .w2b-card .wp-block-button__link:hover,
.entry-content .w2b-cta .wp-block-button__link:hover { background-color: var(--w2b-blue-dark) !important; }
@media (max-width: 781px) { .w2b-card .wp-block-columns { flex-wrap: wrap !important; } .w2b-card .w2b-card-img { flex-basis: 100% !important; max-width: 260px; margin: 0 auto; } }

/* ---------- Comparison table ---------- */
/* Works for both <table class="w2b-table"> and the block editor's <figure class="wp-block-table w2b-table"><table> */
.entry-content .w2b-table table, .entry-content table.w2b-table { border-collapse: collapse; width: 100%; font-size: .95em; }
.entry-content .w2b-table th { background: var(--w2b-blue); color: #fff; text-align: center; padding: .6em .5em; border: 1px solid var(--w2b-blue); }
.entry-content .w2b-table td { border: 1px solid var(--w2b-line); padding: .6em .5em; text-align: center; vertical-align: middle; }
.entry-content .w2b-table td:first-child { background: var(--w2b-soft); font-weight: 700; }

/* ---------- Single post readability (v1.1.0) ---------- */
.single-post .entry-content { font-size: 17px; line-height: 1.85; color: #27303f; }
.single-post .entry-content > p { margin-bottom: 1.3em; }
.single-post .entry-content h2 { font-size: 1.5em; line-height: 1.35; margin: 2.2em 0 .9em; padding: .35em 0 .35em .75em; border-left: 5px solid var(--w2b-blue); background: linear-gradient(90deg, #eff6ff, #fff 70%); border-radius: 0 8px 8px 0; color: var(--w2b-navy); }
.single-post .entry-content h3 { font-size: 1.15em; margin: 1.8em 0 .6em; color: var(--w2b-navy); }
.single-post .entry-content h3::before { content: ""; display: inline-block; width: .5em; height: .5em; background: var(--w2b-yellow); border-radius: 2px; margin-right: .5em; vertical-align: .1em; }
.single-post .entry-content strong { color: #111827; background: linear-gradient(transparent 60%, #fef3c7 60%); padding: 0 .1em; }
.single-post .entry-content .w2b-card strong, .single-post .entry-content table strong, .single-post .entry-content .w2b-summary strong,
.single-post .entry-content .w2b-proscons strong, .single-post .entry-content .w2b-flow strong, .single-post .entry-content .w2b-verdict strong { background: none; }
.w2b-updated { font-size: .85em; color: #6b7280; margin: -.4em 0 1.2em; }

/* 3줄 요약 */
.w2b-summary { background: var(--w2b-navy); color: #fff; border-radius: var(--w2b-radius); padding: 18px 22px; margin: 1.4em 0 1.8em; }
.w2b-summary .w2b-summary-title { font-weight: 800; font-size: .85em; letter-spacing: .08em; color: var(--w2b-yellow); margin: 0 0 .5em; }
.w2b-summary ul { margin: 0; padding: 0 0 0 1.2em; }
.w2b-summary li { margin: .3em 0; } .w2b-summary li::marker { color: var(--w2b-yellow); }
.w2b-summary a { color: #fde68a; }
.single-post .entry-content .w2b-summary strong { color: var(--w2b-yellow); }

/* 콜아웃 (섹션당 1개) */
.entry-content blockquote.w2b-callout { border-left: 4px solid var(--w2b-yellow); background: #fffbeb; border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 1.4em 0; font-size: 1.02em; font-weight: 600; color: #1f2937; font-style: normal; }
.entry-content blockquote.w2b-callout p { margin: 0; }
.entry-content blockquote.w2b-callout.is-blue { border-left-color: var(--w2b-blue); background: #eff6ff; }

/* 인라인 시각자료: 사실만, 출처는 figcaption */
.entry-content figure.w2b-viz { margin: 1.6em 0; padding: 20px 22px; border: 1px solid var(--w2b-line); border-radius: var(--w2b-radius); background: #fff; }
.w2b-viz-title { font-weight: 800; font-size: 1.05em; color: var(--w2b-navy); margin: 0 0 12px; }
.entry-content figure.w2b-viz figcaption { font-size: .82em; color: #6b7280; margin-top: 12px; text-align: left; }
.w2b-bars .row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 12px; align-items: center; margin: 9px 0; font-size: .95em; line-height: 1.3; }
.w2b-bars .track { background: var(--w2b-soft); border-radius: 6px; height: 22px; overflow: hidden; }
.w2b-bars .fill { display: block; height: 100%; width: var(--w); background: var(--w2b-blue); border-radius: 6px; }
.w2b-bars .fill.is-yellow { background: var(--w2b-yellow); } .w2b-bars .fill.is-green { background: var(--w2b-green); } .w2b-bars .fill.is-gray { background: #9ca3af; }
.w2b-bars .val { font-weight: 700; min-width: 5em; text-align: right; color: #111827; }

/* 단계 흐름 */
.entry-content ol.w2b-flow { list-style: none; padding: 0; margin: 1.4em 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: w2bf; }
.entry-content ol.w2b-flow li { counter-increment: w2bf; margin: 0; border: 1px solid var(--w2b-line); border-radius: var(--w2b-radius); padding: 44px 14px 14px; position: relative; font-size: .95em; line-height: 1.5; background: #fff; }
.entry-content ol.w2b-flow li::before { content: counter(w2bf); position: absolute; top: 12px; left: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--w2b-blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85em; }
.entry-content ol.w2b-flow li strong { display: block; color: var(--w2b-navy); margin-bottom: 3px; }

/* 스펙 칩 */
.w2b-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .8em; }
.w2b-chips span { font-size: .8em; font-weight: 700; background: var(--w2b-soft); color: #374151; border-radius: 999px; padding: .2em .75em; }
.w2b-chips span.is-blue { background: #dbeafe; color: var(--w2b-blue-dark); } .w2b-chips span.is-green { background: #dcfce7; color: #166534; } .w2b-chips span.is-yellow { background: #fef3c7; color: #92400e; }

/* 장단점 */
.w2b-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1em 0 1.2em; }
.w2b-proscons > div { border-radius: var(--w2b-radius); padding: 14px 16px; font-size: .95em; }
.w2b-proscons .pros { background: #f0fdf4; border: 1px solid #bbf7d0; } .w2b-proscons .cons { background: #fef2f2; border: 1px solid #fecaca; }
.w2b-proscons .w2b-pc-title { font-weight: 800; margin: 0 0 .4em; } .w2b-proscons .pros .w2b-pc-title { color: #166534; } .w2b-proscons .cons .w2b-pc-title { color: #991b1b; }
.w2b-proscons ul { margin: 0; padding-left: 1.2em; } .w2b-proscons li { margin: .25em 0; }

/* 결론 한 줄 */
.w2b-verdict { display: flex; gap: 10px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 16px; margin: 0 0 1.4em; font-size: .98em; }
.w2b-verdict::before { content: "👉"; flex: none; }
.w2b-verdict strong { color: var(--w2b-blue-dark); }

/* 모바일 */
@media (max-width: 781px) {
  .single-post .entry-content { font-size: 16.5px; line-height: 1.8; }
  .single-post .entry-content h2 { font-size: 1.3em; }
  .entry-content ol.w2b-flow { grid-template-columns: 1fr 1fr; }
  .w2b-proscons { grid-template-columns: 1fr; }
  .w2b-bars .row { grid-template-columns: 1fr auto; } .w2b-bars .track { grid-column: 1 / -1; grid-row: 2; }
  /* .w2b-table: 각 행을 카드처럼 쌓고 th를 data-label로 보여줌 (functions.php가 data-label을 붙임) */
  .entry-content .w2b-table.is-stack table, .entry-content .w2b-table.is-stack thead, .entry-content .w2b-table.is-stack tbody, .entry-content .w2b-table.is-stack tr, .entry-content .w2b-table.is-stack td { display: block; width: 100%; }
  .entry-content .w2b-table.is-stack thead { position: absolute; left: -9999px; }
  .entry-content .w2b-table.is-stack tr { border: 1px solid var(--w2b-line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
  .entry-content .w2b-table.is-stack td { text-align: left; border: 0; border-bottom: 1px solid var(--w2b-line); padding: .55em .8em .55em 42%; position: relative; min-height: 2.4em; }
  .entry-content .w2b-table.is-stack td:first-child { background: var(--w2b-blue); color: #fff; padding-left: .8em; font-weight: 800; }
  .entry-content .w2b-table.is-stack td:first-child a { color: #fff; }
  .entry-content .w2b-table.is-stack td:not(:first-child)::before { content: attr(data-label); position: absolute; left: .8em; top: .55em; width: 38%; font-weight: 700; color: #6b7280; font-size: .9em; }
  .entry-content .w2b-table:not(.is-stack) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .entry-content .w2b-table:not(.is-stack) table { min-width: 560px; }
}
@media (max-width: 480px) { .entry-content ol.w2b-flow { grid-template-columns: 1fr; } }

/* ---------- Affiliate notice ---------- */
.w2b-notice { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .7em 1em; font-size: .9em; color: #78350f; margin: 1em 0; }

/* ---------- Footer ---------- */
.site-footer .footer-widgets { background: #f9fafb; border-top: 1px solid var(--w2b-line); }
.site-footer .footer-widgets .widget-title { font-size: 1.05em; color: var(--w2b-navy); }
.site-info { background: #fff; border-top: 1px solid var(--w2b-line); font-size: .85em; }