/*
Theme Name: 뒤집어봄 (dwijibeobom-theme)
Theme URI: https://dwijibeobom.local
Author: dwijibeobom (local, unattended sprint)
Description: 뒤집어봄 디자인/레이아웃 전용 블록 테마. 계산/데이터 로직은 dwijibeobom-tools 플러그인이 담당하며 이 테마는 절대 그 로직을 포함하지 않는다. DESIGN BASELINE V0 — 확정본 아님, 로컬 미리보기 전용.
Version: 0.1.1-hotfix1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary — 내부 개발용, Production 미배포
Text Domain: dwijibeobom-theme

톤앤매너: 따뜻한 생활잡지(가족 매거진) 느낌. SaaS/AI서비스/쇼핑몰/베이비파스텔 룩 의도적으로 회피.
색상·타이포·간격 토큰은 theme.json에 정의(DESIGN BASELINE V0). 이 파일은 테마 헤더 메타데이터 용도이며
실제 스타일은 theme.json + 블록 자체 스타일로 처리한다(블록 테마 규약).

아래는 theme.json/블록 자체 옵션만으로 표현하기 어려운 최소한의 보조 스타일만 담는다(DESIGN REVIEW CANDIDATE,
사용자 최종 확정 전 — docs/HOMEPAGE_DESIGN_REVIEW.md 참조). SaaS 카드(둥근 사각형+그림자+pill+버튼)
조합을 의도적으로 쓰지 않고, 잡지 기사 미리보기(카테고리/제목/짧은 요약/날짜) 형태로 만든다.
*/

.dwj-local-badge {
  margin: 0 !important;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 3px;
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.dwj-local-preview-notice {
  font-size: 0.82rem;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--wp--preset--color--border);
}

.dwj-article-list {
  display: flex;
  flex-direction: column;
}

.dwj-article-card {
  border-top: 1px solid var(--wp--preset--color--border);
  padding: 1.5rem 0;
}

.dwj-article-card:first-child {
  border-top: none;
  padding-top: 0;
}

.dwj-article-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.dwj-article-card__category {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.dwj-article-card__title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.5rem 0;
  color: var(--wp--preset--color--text);
}

.dwj-article-card a:hover .dwj-article-card__title {
  color: var(--wp--preset--color--accent);
}

.dwj-article-card__deck {
  color: var(--wp--preset--color--text-muted);
  line-height: 1.65;
  margin: 0 0 0.5rem 0;
}

.dwj-article-card__date {
  font-size: 0.8rem;
  color: var(--wp--preset--color--text-muted);
}

.dwj-section-heading {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.dwj-related-articles {
  margin-top: var(--wp--preset--spacing--60, 2.5rem);
  padding-top: var(--wp--preset--spacing--50, 1.5rem);
  border-top: 1px solid var(--wp--preset--color--border);
}

.dwj-section-subheading {
  color: var(--wp--preset--color--text-muted);
  font-size: 0.92rem;
  margin: 0 0 1.25rem 0;
}

.dwj-tool-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dwj-tool-card {
  border-top: 1px solid var(--wp--preset--color--border);
  padding: 1.25rem 0;
  display: block;
  text-decoration: none;
  color: inherit;
}

.dwj-tool-card:first-child {
  border-top: none;
  padding-top: 0;
}

.dwj-tool-card__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent-2);
  margin-bottom: 0.3rem;
  display: block;
}

.dwj-tool-card__title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  margin: 0 0 0.4rem 0;
  color: var(--wp--preset--color--text);
}

.dwj-tool-card__desc {
  color: var(--wp--preset--color--text-muted);
  margin: 0;
}

.dwj-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.dwj-category-list a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--wp--preset--color--text);
  font-size: 0.9rem;
}

.dwj-category-list a:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

.dwj-footer-category-links {
  margin: 0;
}

.dwj-footer-category-links a {
  color: var(--wp--preset--color--text-muted);
}

.dwj-footer-category-links a:hover {
  color: var(--wp--preset--color--accent);
}

/* 비교 콘텐츠(같이 놓고 봄)의 표 — 좁은 화면에서 칸이 짓눌리지 않도록
   테이블 자체를 가로 스크롤시킨다(칸을 억지로 줄이지 않음). */
.entry-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: var(--wp--preset--spacing--40, 1rem) 0;
}

/* 데스크톱처럼 화면이 넓을 때는 굳이 본문 문단 폭(contentSize)에 갇혀
   불필요하게 가로 스크롤할 필요가 없다. .entry-content 자체가 이미
   contentSize(680px)로 고정된 박스라 표에 max-width만 넓혀서는 그
   부모 박스 밖으로 나갈 수 없다 — 그래서 실제로 폭을 넓히고, 음수
   마진으로 부모(680px)를 뚫고 나가 wideSize(1000px) 폭 그대로 같은
   중심선에 정렬되도록 좌우로 당긴다. 좁은 화면에서는 위
   .entry-content table의 max-width:100%가 선택자 구체성이 더 높아
   그대로 이겨, 기존 내부 스크롤 동작이 유지된다(이 규칙 자체가
   무시됨). */
.entry-content table.alignwide {
  max-width: var(--wp--style--global--wide-size, 1000px);
  width: var(--wp--style--global--wide-size, 1000px);
  margin-left: calc((var(--wp--style--global--content-size, 680px) - var(--wp--style--global--wide-size, 1000px)) / 2);
  margin-right: calc((var(--wp--style--global--content-size, 680px) - var(--wp--style--global--wide-size, 1000px)) / 2);
}

.entry-content table th,
.entry-content table td {
  white-space: nowrap;
  padding: 0.5em 0.9em;
  border: 1px solid var(--wp--preset--color--border);
  text-align: left;
}

.entry-content table th {
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--bg-alt);
  font-weight: 600;
}

.entry-content svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--wp--preset--spacing--40, 1rem) 0;
}
