/*
Theme Name: Noritor
Theme URI: https://www.noritor.net
Author: Noritor
Description: Noritor.net의 포토 저널 / 라이프 아카이브 전용 커스텀 테마. 기존 Post/Category 구조를 그대로 사용하며, 디자인·UX만 새로 구성한다.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: noritor
*/

/* ==========================================================================
   Design tokens — generated from the "Noritor" Design System artifact.
   Source of truth: https://claude.ai/artifact/4XEsyb3d2bXT64HU2ogpnk
   Do not hand-edit values here without updating the design system artifact too.
   ========================================================================== */

:root {
  /* Color */
  --surface-page: #faf9f6;
  --surface-raised: #ffffff;
  --ink: #1a1a1a;
  --ink-muted: #6b6b6b;
  --border: #e4e1dc;
  --accent: #9c4a2e;
  --accent-on: #ffffff;
  --accent-100: #f1e4dc;
  --overlay: rgba(26, 26, 26, 0.55);

  /* Typography */
  --font-display: 'Playfair Display', 'Noto Sans KR', serif;
  --font-sans: 'Inter', 'Noto Sans KR', sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-pill: 999px;

  /* Image aspect ratios */
  --aspect-square: 1 / 1;
  --aspect-portrait: 3 / 4;
  --aspect-landscape: 4 / 3;
  --aspect-wide: 16 / 9;

  /* Grid */
  --grid-columns: 12;
  --grid-gutter: var(--space-5);
  --grid-gutter-mobile: var(--space-4);
}

/* ==========================================================================
   Type scale — matches the Design System's "Display" and "Text" groups.
   ========================================================================== */

/* Mobile-first sizes (plan §15.3 "짧은 텍스트" / §16 responsive type);
   desktop restores the full display scale below. */

.display-1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
}

.display-2 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
}

.display-3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .display-1 { font-size: 64px; line-height: 72px; }
  .display-2 { font-size: 40px; line-height: 48px; }
  .display-3 { font-size: 28px; line-height: 36px; }
}

.text-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.text-ui {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.text-caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.text-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Base reset
   ========================================================================== */

* { box-sizing: border-box; }

html { background: var(--surface-page); }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Layout grid
   ========================================================================== */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter-mobile);
}

@media (min-width: 768px) {
  .grid { gap: var(--grid-gutter); }
}

/* ==========================================================================
   Buttons — see Design System "Button" component for guidelines.
   ========================================================================== */

.btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: #823b23; }

.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-text { background: none; border: none; padding: var(--space-1) 0; color: var(--accent); }
.btn-text:hover { text-decoration: underline; }

/* ==========================================================================
   Cards — see Design System "Card" component for guidelines.
   ========================================================================== */

.card { font-family: var(--font-sans); }

.card-media {
  aspect-ratio: var(--aspect-landscape);
  overflow: hidden;
  position: relative;
  background: var(--border);
}

.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }

.card:hover .card-media img { transform: scale(1.045); }

.card-body { padding-top: var(--space-3); }

.card-title { color: var(--ink); margin: var(--space-2) 0 0; font-size: 20px; line-height: 26px; }

.card-caption { color: var(--ink-muted); margin-top: var(--space-1); }

/* ==========================================================================
   Header / Footer — see Design System components for guidelines.
   ========================================================================== */

.site-header {
  height: var(--space-7);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
}

.site-logo { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.08em; color: var(--ink); text-decoration: none; }

.site-nav { display: flex; gap: var(--space-6); }

.site-nav a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }

.site-nav a.active { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

.site-footer {
  background: var(--surface-page);
  border-top: 1px solid var(--border);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.site-footer .site-logo { font-size: 24px; letter-spacing: 0.1em; }

.site-footer .tagline { color: var(--ink-muted); font-size: 12px; letter-spacing: 0.1em; margin-top: var(--space-2); }

.site-footer .footer-meta { color: var(--ink-muted); margin-top: var(--space-6); }

/* Header actions (search / mobile menu) */

.header-actions { display: flex; align-items: center; gap: var(--space-4); }

.header-icon-btn {
  background: none;
  border: none;
  padding: var(--space-3);
  margin: calc(var(--space-3) * -1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-search,
.icon-burger {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
}

.icon-search::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  left: 0;
  top: 0;
}

.icon-search::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 1.5px;
  background: var(--ink);
  transform: rotate(45deg);
  left: 11px;
  top: 12px;
}

.icon-burger::before,
.icon-burger::after,
.icon-burger {
  box-sizing: border-box;
}

.icon-burger { border-top: 1.5px solid var(--ink); }

.icon-burger::before,
.icon-burger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1.5px solid var(--ink);
}

.icon-burger::before { top: 7px; }
.icon-burger::after { top: 14px; }

.site-search-panel {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) var(--space-6);
}

.site-search-input {
  width: 100%;
  max-width: 480px;
  font-family: var(--font-sans);
  font-size: 16px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  color: var(--ink);
}

.site-nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.site-nav-mobile a {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .site-nav-desktop { display: none; }
  .header-menu-toggle { display: inline-flex; }
  .site-nav-mobile:not([hidden]) { display: flex; }
}

@media (min-width: 768px) {
  .header-menu-toggle { display: none; }
}

/* ==========================================================================
   Hero — plan §6: ~70-80% of the viewport, one representative photo.
   ========================================================================== */

/* Mobile (default): photo on top, plain text below — plan §15.2, its own
   UX, not the desktop overlay shrunk down. */

.hero-media {
  aspect-ratio: var(--aspect-wide);
  background-color: var(--border);
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-overlay { display: none; }

.hero-content {
  color: var(--ink);
  background: var(--surface-page);
  padding: var(--space-6);
}

.hero-meta { color: var(--ink-muted); }

.hero-title { color: var(--ink); margin: var(--space-2) 0; }

.hero-excerpt { color: var(--ink); margin-bottom: var(--space-3); }

.hero-date { color: var(--ink-muted); margin-bottom: var(--space-5); }

.hero-cta { background: transparent; color: var(--ink); border-color: var(--border); }
.hero-cta:hover { background: var(--accent-100); border-color: var(--accent); color: var(--accent); }

/* Desktop: text overlaid on the photo — plan §6. */

@media (min-width: 768px) {
  .hero { position: relative; min-height: 80vh; display: flex; align-items: flex-end; }

  .hero-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .hero-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 26, 26, 0) 40%, var(--overlay) 100%);
  }

  .hero-content {
    position: relative;
    z-index: 1;
    color: var(--accent-on);
    background: none;
    padding: var(--space-8) var(--space-6);
    max-width: 640px;
  }

  .hero-meta { color: var(--accent-on); opacity: 0.85; }
  .hero-title { color: var(--accent-on); }
  .hero-excerpt { color: var(--accent-on); opacity: 0.9; }
  .hero-date { color: var(--accent-on); opacity: 0.75; }

  .hero-cta { background: rgba(255, 255, 255, 0.12); color: var(--accent-on); border-color: rgba(255, 255, 255, 0.5); }
  .hero-cta:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--accent-on); color: var(--accent-on); }
}

/* ==========================================================================
   Section layout shared by Latest Stories / Travel / Family / Gallery / Archive
   ========================================================================== */

.section {
  padding: var(--space-7) 0;
}

@media (min-width: 768px) {
  .section { padding: var(--space-8) 0; }
}

.section-title {
  margin: 0 0 var(--space-6);
}

.card-link { text-decoration: none; display: block; }

/* Mobile: horizontal scroll, one card dominant per view (plan §15.3
   "한 화면에 하나의 핵심 콘텐츠", "가로 스크롤 Gallery"). */

.latest-stories-grid,
.family-grid {
  display: flex;
  gap: var(--grid-gutter-mobile);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}

.latest-stories-grid > *,
.family-grid > * {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .latest-stories-grid,
  .family-grid {
    display: grid;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .latest-stories-grid { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
  .family-grid { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }

  .latest-stories-grid > *,
  .family-grid > * { flex: initial; }
}

.latest-story-card,
.family-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.section-alt { background: var(--surface-raised); }

/* ==========================================================================
   Travel — 8 country cards. Plan §8.
   ========================================================================== */

.travel-grid {
  display: flex;
  gap: var(--grid-gutter-mobile);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}

.travel-grid > * {
  flex: 0 0 68%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .travel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gutter);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .travel-grid > * { flex: initial; }
}

.travel-card {
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid var(--border);
}

.travel-card-media {
  aspect-ratio: var(--aspect-landscape);
  background-size: cover;
  background-position: center;
  background-color: var(--border);
  transition: background-size .35s ease;
}

.travel-card:hover .travel-card-media { background-size: 108%; }

.travel-card-body { padding: var(--space-3) var(--space-4); }

.travel-card-name { color: var(--ink); letter-spacing: 0.04em; }

.travel-card-label { color: var(--ink-muted); margin-top: var(--space-1); }

/* ==========================================================================
   Family — large photos, minimal text. Plan §9.
   ========================================================================== */

.family-intro { color: var(--ink-muted); margin: 0 0 var(--space-6); }

.family-card-media { aspect-ratio: var(--aspect-portrait); }

.family-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }

.family-card:hover .family-card-media img { transform: scale(1.045); }

.family-card-title { color: var(--ink); margin-top: var(--space-2); display: block; }

/* ==========================================================================
   Gallery — 10 category tiles, name revealed on hover. Plan §10.
   ========================================================================== */

.gallery-grid {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}

.gallery-grid > * {
  flex: 0 0 38%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .gallery-grid > * { flex: initial; }
}

.gallery-tile {
  position: relative;
  display: block;
  aspect-ratio: var(--aspect-square);
  overflow: hidden;
  text-decoration: none;
}

.gallery-tile-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--border);
  transition: transform .35s ease;
}

.gallery-tile:hover .gallery-tile-media { transform: scale(1.05); }

.gallery-tile-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-on);
  background: var(--overlay);
  opacity: 0;
  transition: opacity .25s ease;
  text-align: center;
  padding: var(--space-2);
}

.gallery-tile:hover .gallery-tile-label,
.gallery-tile:focus-visible .gallery-tile-label { opacity: 1; }

/* ==========================================================================
   Archive timeline — year markers along a horizontal line. Plan §11.
   ========================================================================== */

.archive-timeline {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
}

.archive-year {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.archive-year-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  margin-top: -5px;
  margin-bottom: var(--space-3);
}

.archive-year:hover .archive-year-dot,
.archive-year:focus-visible .archive-year-dot { background: var(--accent); }

.archive-year-label { color: var(--ink); }

.archive-year:hover .archive-year-label { color: var(--accent); }

.archive-year-count { color: var(--ink-muted); margin-top: var(--space-1); }

/* ==========================================================================
   Single post detail — plan §12-13.
   ========================================================================== */

.single-post-header {
  padding-top: var(--space-7);
  padding-bottom: var(--space-5);
  text-align: center;
}

.single-post-title { margin: var(--space-2) 0 0; }

.single-post-date { color: var(--ink-muted); margin-top: var(--space-2); }

.single-post-tagline { color: var(--ink-muted); margin-top: var(--space-3); }

.single-post-hero {
  display: block;
  max-width: 1280px;
  margin: 0 auto var(--space-7);
}

.single-post-hero img { width: 100%; height: auto; }

.single-post-content {
  max-width: 760px;
  padding-bottom: var(--space-7);
}

.single-post-content p { font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--ink); }

.single-post-content img { width: 100%; height: auto; margin: var(--space-5) 0; }

.single-post-content a.lightbox-trigger { display: block; cursor: zoom-in; }

.single-post-tags {
  max-width: 760px;
  padding-bottom: var(--space-6);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tag-chip {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.tag-chip:hover { color: var(--accent); border-color: var(--accent); }

.single-post-comments {
  max-width: 760px;
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
}

/* Movie posts: the oEmbed video carries the media, so give the embed room
   and skip the large static hero. */
.single-post-movie .single-post-content iframe,
.single-post-movie .single-post-content video {
  width: 100%;
  aspect-ratio: var(--aspect-wide);
  height: auto;
}

/* ==========================================================================
   Lightbox — plan §12 "Gallery 기능" (확대/이전·다음/전체화면/설명).
   ========================================================================== */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lightbox-overlay[hidden] { display: none; }

.lightbox-image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
}

.lightbox-caption {
  color: var(--accent-on);
  font-family: var(--font-sans);
  font-size: 13px;
  margin-top: var(--space-4);
  text-align: center;
  max-width: 80vw;
}

.lightbox-close,
.lightbox-fullscreen,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: none;
  border: none;
  color: var(--accent-on);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: var(--space-3);
}

.lightbox-close { top: var(--space-4); right: var(--space-4); }

.lightbox-fullscreen {
  top: var(--space-4);
  right: calc(var(--space-4) + 48px);
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--accent-on);
}

.lightbox-prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }

.lightbox-next { right: var(--space-4); top: 50%; transform: translateY(-50%); }

@media (max-width: 767px) {
  .lightbox-prev, .lightbox-next { font-size: 22px; }
}

/* ==========================================================================
   Category archive — Blog/Voyage/Gallery/Family/Movie listings. Plan §4.
   ========================================================================== */

.category-eyebrow { color: var(--ink-muted); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter-mobile);
}

@media (min-width: 768px) {
  .category-grid { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
}

.category-card { text-decoration: none; color: inherit; display: block; }

.category-card-media { position: relative; aspect-ratio: var(--aspect-landscape); }

.category-archive-gallery .category-card-media,
.category-archive-movie .category-card-media { aspect-ratio: var(--aspect-landscape); }

.category-archive-family .category-grid { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .category-archive-family .category-grid { grid-template-columns: repeat(4, 1fr); }
}

.category-archive-family .category-card-media { aspect-ratio: var(--aspect-portrait); }

.category-archive-gallery .category-grid { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .category-archive-gallery .category-grid { grid-template-columns: repeat(5, 1fr); }
}

.category-archive-gallery .category-card-media { aspect-ratio: var(--aspect-square); }

.play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.55);
}

.play-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--accent-on);
}

.pagination,
.navigation.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  font-family: var(--font-sans);
  font-size: 14px;
}

.pagination .page-numbers { color: var(--ink-muted); text-decoration: none; padding: var(--space-2) var(--space-3); }

.pagination .page-numbers.current { color: var(--accent); font-weight: 600; }

.archive-year.active .archive-year-dot { background: var(--accent); }
.archive-year.active .archive-year-label { color: var(--accent); }

.search-result-count { color: var(--ink-muted); margin-top: var(--space-2); margin-bottom: var(--space-6); }