/*
Theme Name: Nexterr Living
Theme URI: https://nexterr.com/
Author: 넥스터리빙
Description: 주방·소형가전 비교·리뷰 전용 커스텀 테마. 단일 컬럼, CLS 0, 경량(무 프레임워크·무 웹폰트).
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nexterr
*/

/* ==========================================================================
   1. 디자인 토큰 — 이 블록이 사이트 내 유일한 색상 리터럴 정의부.
      이하 모든 규칙은 반드시 var() 경유. (CLAUDE.md PHASE 2)
   ========================================================================== */
:root {
  /* 주색 — 웜 오렌지 */
  --nx-primary:        #E8734A;
  --nx-primary-dark:   #C4552F;
  --nx-primary-soft:   #FBE7DE;

  /* 보조 — 크림 / 월넛 */
  --nx-cream:          #FDF9F4;
  --nx-cream-deep:     #F4EBE0;
  --nx-walnut:         #5B4636;
  --nx-walnut-soft:    #8C7461;

  /* 텍스트 / 면 */
  --nx-ink:            #2B211A;
  --nx-ink-mute:       #5F564E;
  --nx-ink-faint:      #8B8078;
  --nx-surface:        #FFFFFF;
  --nx-line:           #E7DCCE;
  --nx-line-strong:    #D3C3B0;

  /* 상태색 */
  --nx-sale:           #D8392B;   /* 할인 */
  --nx-save:           #1F8A46;   /* 절약 */
  --nx-star:           #E9A020;   /* 평점 */
  --nx-warn-bg:        #FFF7E6;
  --nx-warn-line:      #E8C978;
  --nx-dead:           #6B6560;   /* 판매 종료 */

  /* 그림자 (색상 리터럴 포함 — 토큰부 안에서만) */
  --nx-shadow-sm:      0 1px 2px rgba(43, 33, 26, .06);
  --nx-shadow-md:      0 2px 8px rgba(43, 33, 26, .08);
  --nx-focus:          #1A73E8;

  /* 치수 */
  --nx-wrap:           800px;
  --nx-gap:            16px;
  --nx-radius:         10px;
  --nx-radius-sm:      6px;

  /* 타이포 — 웹폰트 0개(성능·CLS) */
  --nx-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
             "맑은 고딕", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
  --nx-font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ==========================================================================
   2. 리셋 · 기본
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--nx-font);
  font-size: 17px;
  line-height: 1.75;
  color: var(--nx-ink);
  background: var(--nx-cream);
  word-break: keep-all;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--nx-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--nx-focus); outline-offset: 2px;
}
h1, h2, h3, h4 { line-height: 1.4; margin: 2em 0 .6em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.65rem; margin-top: 0; }
h2 { font-size: 1.3rem; padding-bottom: .35em; border-bottom: 2px solid var(--nx-primary-soft); }
h3 { font-size: 1.12rem; }
p, ul, ol { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--nx-line); margin: 2.5em 0; }
small { font-size: .82rem; color: var(--nx-ink-mute); }
.nx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--nx-surface); color: var(--nx-ink); padding: 10px 16px;
}
.nx-skip:focus { left: 0; }

/* ==========================================================================
   3. 레이아웃 — 단일 컬럼 800px
   ========================================================================== */
.nx-wrap { width: 100%; max-width: var(--nx-wrap); margin: 0 auto; padding: 0 18px; }
.nx-main { padding: 22px 0 40px; }

/* 헤더 */
.nx-header {
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-line);
}
.nx-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 58px;
}
.nx-brand {
  font-size: 1.16rem; font-weight: 800; color: var(--nx-walnut);
  letter-spacing: -.02em; white-space: nowrap;
}
.nx-brand:hover { text-decoration: none; color: var(--nx-primary-dark); }
.nx-brand__mark { color: var(--nx-primary); }
.nx-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nx-nav::-webkit-scrollbar { display: none; }
.nx-nav ul { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.nx-nav a {
  font-size: .88rem; color: var(--nx-ink-mute); white-space: nowrap;
  padding: 6px 0; display: block;
}
.nx-nav a:hover { color: var(--nx-primary-dark); }
.nx-nav .current-menu-item > a { color: var(--nx-primary-dark); font-weight: 700; }

/* 브레드크럼 */
.nx-crumb { font-size: .8rem; color: var(--nx-ink-faint); padding: 12px 0 0; }
.nx-crumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nx-crumb li { margin: 0; }
.nx-crumb li + li::before { content: "›"; margin-right: 6px; color: var(--nx-line-strong); }
.nx-crumb a { color: var(--nx-ink-mute); }

/* 푸터 */
.nx-footer {
  background: var(--nx-walnut); color: var(--nx-cream-deep);
  margin-top: 48px; padding: 28px 0 34px; font-size: .85rem; line-height: 1.7;
}
.nx-footer a { color: var(--nx-cream); text-decoration: underline; }
.nx-footer__nav ul {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  list-style: none; margin: 0 0 14px; padding: 0;
}
.nx-footer__nav li { margin: 0; }
.nx-footer__disc {
  border-top: 1px solid var(--nx-walnut-soft); padding-top: 14px;
  color: var(--nx-cream-deep); font-size: .8rem;
}

/* ==========================================================================
   4. 글 목록 카드
   ========================================================================== */
.nx-list { display: grid; gap: var(--nx-gap); margin: 0; padding: 0; list-style: none; }
.nx-card {
  background: var(--nx-surface); border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius); overflow: hidden; box-shadow: var(--nx-shadow-sm);
  display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: start;
  margin: 0;
}
.nx-card__thumb {
  /* CLS 0 — 종횡비 예약 */
  aspect-ratio: 4 / 3; width: 116px; background: var(--nx-cream-deep);
  display: block; overflow: hidden;
}
.nx-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.nx-card__body { padding: 12px 14px 12px 0; min-width: 0; }
.nx-card__cat {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--nx-primary-dark); background: var(--nx-primary-soft);
  padding: 2px 7px; border-radius: 999px; margin-bottom: 6px;
}
.nx-card__title { font-size: 1rem; font-weight: 700; line-height: 1.45; margin: 0 0 5px; }
.nx-card__title a { color: var(--nx-ink); }
.nx-card__excerpt {
  font-size: .84rem; color: var(--nx-ink-mute); line-height: 1.6; margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nx-card__meta { font-size: .74rem; color: var(--nx-ink-faint); }

/* ==========================================================================
   5. 공시 블록 (§1-5 / G7)
   ========================================================================== */
.nx-disclosure {
  background: var(--nx-warn-bg); border: 1px solid var(--nx-warn-line);
  border-radius: var(--nx-radius-sm); padding: 11px 14px; margin: 0 0 22px;
  font-size: .82rem; line-height: 1.65; color: var(--nx-ink-mute);
}
.nx-disclosure strong { color: var(--nx-ink); font-weight: 700; }

/* 가격 변동 고지 (G6) */
.nx-pricenote {
  font-size: .76rem; color: var(--nx-ink-faint); line-height: 1.55;
  margin: 6px 0 0;
}

/* ==========================================================================
   6. 상품 카드
   ========================================================================== */
.nx-product {
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  background: var(--nx-surface); box-shadow: var(--nx-shadow-sm);
  margin: 20px 0; overflow: hidden;
}
.nx-product__head {
  display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 14px;
}
.nx-product__fig {
  aspect-ratio: 1 / 1; width: 104px; background: var(--nx-cream-deep);
  border-radius: var(--nx-radius-sm); overflow: hidden; margin: 0;
}
.nx-product__fig img { width: 100%; height: 100%; object-fit: contain; }
.nx-product__info { min-width: 0; }
.nx-product__rank {
  display: inline-block; font-size: .72rem; font-weight: 800;
  color: var(--nx-surface); background: var(--nx-primary);
  padding: 2px 8px; border-radius: 999px; margin-bottom: 6px;
}
.nx-product__name { font-size: .98rem; font-weight: 700; line-height: 1.45; margin: 0 0 6px; }
.nx-product__rating {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: .82rem; color: var(--nx-ink-mute); margin-bottom: 6px;
}
.nx-star { color: var(--nx-star); font-weight: 700; letter-spacing: -.02em; }
.nx-product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.nx-price {
  font-family: var(--nx-font-num); font-size: 1.14rem; font-weight: 800;
  color: var(--nx-ink); letter-spacing: -.02em;
}
.nx-badge-sale {
  font-size: .76rem; font-weight: 800; color: var(--nx-surface);
  background: var(--nx-sale); padding: 1px 6px; border-radius: var(--nx-radius-sm);
}
.nx-badge-save {
  font-size: .76rem; font-weight: 700; color: var(--nx-save);
}
.nx-badge-dead {
  font-size: .76rem; font-weight: 700; color: var(--nx-surface);
  background: var(--nx-dead); padding: 1px 6px; border-radius: var(--nx-radius-sm);
}
.nx-asof { font-size: .74rem; color: var(--nx-ink-faint); white-space: nowrap; }

.nx-product__specs {
  list-style: none; margin: 0; padding: 0 14px 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px;
  font-size: .82rem; color: var(--nx-ink-mute);
}
.nx-product__specs li { margin: 0; display: flex; gap: 6px; }
.nx-product__specs b { color: var(--nx-ink-faint); font-weight: 600; flex: none; }

.nx-pros { padding: 0 14px 12px; font-size: .86rem; }
.nx-pros ul { list-style: none; margin: 0; padding: 0; }
.nx-pros li { display: flex; gap: 7px; margin-bottom: 3px; line-height: 1.6; }
.nx-pros li::before { flex: none; font-weight: 800; }
.nx-pros .is-pro::before { content: "＋"; color: var(--nx-save); }
.nx-pros .is-con::before { content: "－"; color: var(--nx-sale); }

/* CTA */
.nx-cta {
  display: block; margin: 0 14px 14px; padding: 13px 16px; text-align: center;
  background: var(--nx-primary); color: var(--nx-surface);
  font-weight: 800; font-size: .95rem; border-radius: var(--nx-radius-sm);
  min-height: 46px;
}
.nx-cta:hover { background: var(--nx-primary-dark); color: var(--nx-surface); text-decoration: none; }
.nx-cta--dead { background: var(--nx-dead); pointer-events: none; }
.nx-cta__sub { display: block; font-size: .72rem; font-weight: 500; opacity: .92; margin-top: 2px; }

/* ==========================================================================
   7. 비교표 — 모바일 가로스크롤
   ========================================================================== */
.nx-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  background: var(--nx-surface); margin: 18px 0 6px;
}
.nx-table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .86rem; }
.nx-table th, .nx-table td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--nx-line);
  vertical-align: middle; white-space: nowrap;
}
.nx-table thead th {
  background: var(--nx-cream-deep); color: var(--nx-walnut);
  font-weight: 700; font-size: .8rem; position: sticky; top: 0;
}
.nx-table tbody tr:last-child th, .nx-table tbody tr:last-child td { border-bottom: 0; }
.nx-table tbody tr:nth-child(even) { background: var(--nx-cream); }
.nx-table th[scope="row"] {
  font-weight: 700; white-space: normal; min-width: 190px; max-width: 240px;
}
.nx-table .nx-c-price { font-family: var(--nx-font-num); font-weight: 700; }
.nx-table .nx-c-num { font-family: var(--nx-font-num); text-align: right; }
.nx-scrollhint {
  font-size: .74rem; color: var(--nx-ink-faint); margin: 0 0 18px; text-align: right;
}
@media (min-width: 700px) { .nx-scrollhint { display: none; } }

/* ==========================================================================
   8. FAQ 아코디언 (details/summary — JS 0)
   ========================================================================== */
.nx-faq { border: 1px solid var(--nx-line); border-radius: var(--nx-radius); background: var(--nx-surface); margin: 18px 0; }
.nx-faq__item { border-bottom: 1px solid var(--nx-line); }
.nx-faq__item:last-child { border-bottom: 0; }
.nx-faq__q {
  cursor: pointer; list-style: none; padding: 13px 42px 13px 15px;
  font-weight: 700; font-size: .92rem; position: relative; line-height: 1.55;
}
.nx-faq__q::-webkit-details-marker { display: none; }
.nx-faq__q::after {
  content: "+"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; font-weight: 400; color: var(--nx-primary); line-height: 1;
}
.nx-faq__item[open] > .nx-faq__q::after { content: "−"; }
.nx-faq__item[open] > .nx-faq__q { color: var(--nx-primary-dark); }
.nx-faq__a { padding: 0 15px 14px; font-size: .88rem; color: var(--nx-ink-mute); }
.nx-faq__a > :last-child { margin-bottom: 0; }

/* ==========================================================================
   9. 단일 글
   ========================================================================== */
.nx-entry__head { margin-bottom: 18px; }
.nx-entry__title { font-size: 1.62rem; margin: 6px 0 8px; }
.nx-entry__meta { font-size: .8rem; color: var(--nx-ink-faint); display: flex; flex-wrap: wrap; gap: 10px; }
.nx-hero {
  aspect-ratio: 16 / 9; width: 100%; background: var(--nx-cream-deep);
  border-radius: var(--nx-radius); overflow: hidden; margin: 0 0 20px;
}
.nx-hero img { width: 100%; height: 100%; object-fit: cover; }

/* 본문 섹션 무드컷(§7) — 히어로와 같은 16:9로 높이를 예약해 CLS 0을 지킨다. */
.nx-bodyimg {
  aspect-ratio: 16 / 9; width: 100%; background: var(--nx-cream-deep);
  border-radius: var(--nx-radius); overflow: hidden; margin: 20px 0 24px;
}
.nx-bodyimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-entry__content > :first-child { margin-top: 0; }

/* 관련 글 */
.nx-related { margin-top: 40px; }
.nx-related h2 { font-size: 1.1rem; }
.nx-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nx-related li { margin: 0; }
.nx-related a {
  display: block; padding: 11px 13px; background: var(--nx-surface);
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius-sm);
  font-size: .89rem; font-weight: 600; color: var(--nx-ink); line-height: 1.5;
}
.nx-related a:hover { border-color: var(--nx-primary); text-decoration: none; }

/* 허브(카테고리) 개요 */
.nx-hub {
  background: var(--nx-surface); border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius); padding: 16px 18px; margin-bottom: 24px;
}
.nx-hub h1 { font-size: 1.42rem; margin-bottom: 8px; }
.nx-hub > :last-child { margin-bottom: 0; }

/* 페이지네이션 */
.nx-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 0; justify-content: center; }
.nx-pager .page-numbers {
  min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border: 1px solid var(--nx-line); border-radius: var(--nx-radius-sm);
  background: var(--nx-surface); font-size: .88rem; color: var(--nx-ink-mute);
}
.nx-pager .page-numbers.current { background: var(--nx-primary); border-color: var(--nx-primary); color: var(--nx-surface); font-weight: 700; }
.nx-pager a.page-numbers:hover { border-color: var(--nx-primary); text-decoration: none; }

/* 검색 폼 */
.nx-search { display: flex; gap: 8px; margin: 18px 0; }
.nx-search input[type="search"] {
  flex: 1; min-width: 0; padding: 11px 13px; font-size: .92rem; font-family: inherit;
  border: 1px solid var(--nx-line-strong); border-radius: var(--nx-radius-sm);
  background: var(--nx-surface); color: var(--nx-ink);
}
.nx-search button {
  padding: 11px 18px; font-size: .92rem; font-weight: 700; font-family: inherit;
  border: 0; border-radius: var(--nx-radius-sm); cursor: pointer;
  background: var(--nx-primary); color: var(--nx-surface);
}
.nx-empty { padding: 30px 0; color: var(--nx-ink-mute); }

/* ==========================================================================
   10. 반응형
   ========================================================================== */
@media (max-width: 520px) {
  body { font-size: 16px; }
  h1, .nx-entry__title { font-size: 1.36rem; }
  h2 { font-size: 1.16rem; }
  .nx-card { grid-template-columns: 96px 1fr; gap: 11px; }
  .nx-card__thumb { width: 96px; }
  .nx-card__body { padding: 10px 12px 10px 0; }
  .nx-product__head { grid-template-columns: 84px 1fr; gap: 11px; padding: 12px; }
  .nx-product__fig { width: 84px; }
  .nx-product__specs { grid-template-columns: 1fr; padding: 0 12px 10px; }
  .nx-pros, .nx-cta { margin-inline: 12px; padding-inline: 0; }
  .nx-cta { padding: 13px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .nx-header, .nx-footer, .nx-related, .nx-cta, .nx-pager { display: none; }
  body { background: var(--nx-surface); }
}