/*
Theme Name: Portable Journal
Description: A Korean-first, reading-focused WordPress journal with portable templates and accessible controls.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portable-journal
Tags: blog, one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
  color-scheme: light;
  --pj-paper: #f8f8f2;
  --pj-surface: #ffffff;
  --pj-ink: #202a25;
  --pj-muted: #59645c;
  --pj-accent: #255641;
  --pj-accent-soft: #e8efe4;
  --pj-line: #d6dcd2;
  --pj-control-line: #7b887d;
  --pj-focus: #254dcc;
  --pj-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --pj-space-1: 0.25rem;
  --pj-space-2: 0.5rem;
  --pj-space-3: 0.75rem;
  --pj-space-4: 1rem;
  --pj-space-5: 1.5rem;
  --pj-space-6: 2rem;
  --pj-space-7: 3rem;
  --pj-space-8: 4.5rem;
  --pj-space-9: 6rem;
  --pj-shell: 70rem;
  --pj-reading: 46rem;
  --pj-control: 2.75rem;
  --pj-radius: 0.375rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: var(--pj-space-6); }
body {
  margin: 0;
  background: var(--pj-paper);
  color: var(--pj-ink);
  font-family: var(--pj-font);
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}
::selection { color: var(--pj-ink); background: var(--pj-accent-soft); }
a { color: var(--pj-accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--pj-focus);
  outline-offset: 4px;
}
#main-content:focus { outline: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, p, figure { margin-block-start: 0; }
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }
figure { margin-inline: 0; }
button, input, textarea, select { font: inherit; }
button, input[type="submit"], .button-link, .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pj-control);
  padding: var(--pj-space-2) var(--pj-space-5);
  border: 1px solid var(--pj-accent);
  border-radius: var(--pj-radius);
  background: var(--pj-accent);
  color: var(--pj-surface);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
button:hover, input[type="submit"]:hover, .button-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select {
  max-width: 100%;
  min-width: 0;
  min-height: var(--pj-control);
  padding: var(--pj-space-2) var(--pj-space-3);
  border: 1px solid var(--pj-control-line);
  border-radius: var(--pj-radius);
  background: var(--pj-surface);
  color: var(--pj-ink);
}
input::placeholder, textarea::placeholder { color: var(--pj-muted); opacity: 1; }
.shell { width: min(var(--pj-shell), calc(100% - 4rem)); margin-inline: auto; }
.reading-width { width: min(var(--pj-reading), 100%); margin-inline: auto; }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  z-index: 100000;
  inset: var(--pj-space-4) auto auto var(--pj-space-4);
  width: auto;
  height: auto;
  min-height: var(--pj-control);
  margin: 0;
  padding: var(--pj-space-3) var(--pj-space-5);
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--pj-surface);
  color: var(--pj-ink);
  white-space: normal;
}

.site-header { border-bottom: 1px solid var(--pj-line); }
.site-header-inner {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto minmax(15rem, 18rem);
  align-items: center;
  gap: var(--pj-space-6);
  min-height: 7rem;
  padding-block: var(--pj-space-4);
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pj-space-3);
  min-height: var(--pj-control);
  color: var(--pj-ink);
  font-size: 1.2rem;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--pj-radius);
  background: var(--pj-accent);
  color: var(--pj-surface);
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}
.menu, .footer-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pj-space-2) var(--pj-space-5); }
.menu { margin: 0; padding: 0; list-style: none; }
.menu a, .footer-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pj-control);
  padding-block: var(--pj-space-2);
  color: var(--pj-ink);
  font-size: 0.9375rem;
  text-decoration: none;
}
.menu a:hover, .footer-navigation a:hover { text-decoration: underline; }
.menu .current-menu-item > a, .menu .current_page_item > a, .menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.search-form label { display: block; margin-bottom: var(--pj-space-1); color: var(--pj-muted); font-size: 0.8125rem; font-weight: 600; }
.search-fields { display: flex; gap: var(--pj-space-2); }
.search-field { flex: 1 1 auto; width: 100%; }
.search-submit { flex: 0 0 auto; padding-inline: var(--pj-space-4); }
.header-search .search-field { font-size: 1rem; }
.site-main { min-height: 55vh; padding-bottom: var(--pj-space-9); }

.journal-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  align-items: end;
  gap: var(--pj-space-7);
  padding-block: var(--pj-space-9) var(--pj-space-8);
}
.eyebrow { margin-bottom: var(--pj-space-4); color: var(--pj-accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em; }
.journal-intro h1 { margin-bottom: var(--pj-space-5); font-size: clamp(2.1rem, 4.5vw, 3.6rem); line-height: 1.32; font-weight: 720; letter-spacing: -0.055em; }
.intro-description { max-width: 42rem; margin-bottom: 0; color: var(--pj-muted); font-size: 1.0625rem; }
.intro-description p:last-child { margin-bottom: 0; }
.journal-index-note { padding-bottom: var(--pj-space-2); color: var(--pj-muted); font-size: 0.9375rem; }
.journal-index-note p { margin: 0; }
.index-rule { display: block; width: 2rem; height: 3px; margin-bottom: var(--pj-space-5); background: var(--pj-accent); }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pj-space-2) var(--pj-space-4); padding-block: var(--pj-space-5); border-bottom: 2px solid var(--pj-ink); }
.section-heading h2 { margin: 0; font-size: 1.0625rem; }
.section-note { color: var(--pj-muted); font-size: 0.875rem; }
.post-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--pj-space-6); padding-block: var(--pj-space-7); border-bottom: 1px solid var(--pj-line); }
.post-card.has-post-thumbnail { grid-template-columns: 8.5rem minmax(0, 1fr) 11rem; }
.post-card-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pj-space-1); }
.post-card-meta time { color: var(--pj-muted); font-size: 0.8125rem; }
.category-link { display: inline-flex; align-items: center; min-height: var(--pj-control); padding: var(--pj-space-2) var(--pj-space-3); border-radius: var(--pj-radius); background: var(--pj-accent-soft); color: var(--pj-accent); font-size: 0.8125rem; font-weight: 650; text-decoration: none; }
.category-link:hover { text-decoration: underline; }
.post-card-title { margin-bottom: var(--pj-space-3); font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -0.035em; }
.post-card-title a { display: flex; justify-content: space-between; align-items: center; gap: var(--pj-space-5); min-height: var(--pj-control); color: var(--pj-ink); text-decoration: none; }
.post-card-title a:hover { text-decoration: underline; }
.post-arrow { flex-shrink: 0; align-self: flex-start; color: var(--pj-accent); font-size: 1.25rem; line-height: 2.1; font-weight: 400; }
.post-card-excerpt { max-width: 47rem; color: var(--pj-muted); }
.post-card-excerpt p { margin: 0; }
.post-card-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pj-radius); }
.post-card-content, .post-card-image { min-width: 0; }
.page-heading { padding-block: var(--pj-space-8) var(--pj-space-7); border-bottom: 2px solid var(--pj-ink); }
.page-heading h1, .not-found h1 { margin-bottom: var(--pj-space-5); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.045em; }
.empty-state { padding-block: var(--pj-space-8); max-width: var(--pj-reading); }
.empty-state h2 { margin-bottom: var(--pj-space-4); font-size: 1.5rem; }
.empty-state p { color: var(--pj-muted); }
.not-found { padding-block: var(--pj-space-9) var(--pj-space-7); }
.not-found .button-link { margin-block: var(--pj-space-6) var(--pj-space-7); }
.not-found .search-form { max-width: 30rem; }

.reading-article { max-width: var(--pj-reading); margin-inline: auto; padding-top: var(--pj-space-8); }
.entry-category { margin-bottom: var(--pj-space-5); }
.entry-title { margin-bottom: var(--pj-space-5); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.4; font-weight: 720; letter-spacing: -0.045em; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pj-space-3); color: var(--pj-muted); font-size: 0.875rem; }
.entry-header { margin-bottom: var(--pj-space-7); }
.entry-image { margin-bottom: var(--pj-space-7); }
.entry-image img { display: block; width: 100%; border-radius: var(--pj-radius); }
.entry-content, .editor-styles-wrapper { font-family: var(--pj-font); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.85; }
:where(.entry-content, .editor-styles-wrapper) > * { max-width: 100%; }
:where(.entry-content, .editor-styles-wrapper) :where(p, ul, ol, figure, table, pre) { margin-block: 0 var(--pj-space-5); }
:where(.entry-content, .editor-styles-wrapper) :where(h2, h3, h4, h5, h6) { margin-block: var(--pj-space-7) var(--pj-space-4); letter-spacing: -0.025em; scroll-margin-top: var(--pj-space-6); }
:where(.entry-content, .editor-styles-wrapper) h2 { font-size: 1.65em; }
:where(.entry-content, .editor-styles-wrapper) h3 { font-size: 1.3em; }
:where(.entry-content, .editor-styles-wrapper) li { padding-inline-start: var(--pj-space-1); }
:where(.entry-content, .editor-styles-wrapper) li + li { margin-top: var(--pj-space-2); }
:where(.entry-content, .editor-styles-wrapper) blockquote { margin: var(--pj-space-7) 0; padding: var(--pj-space-5) var(--pj-space-6); border-inline-start: 3px solid var(--pj-accent); background: var(--pj-accent-soft); }
:where(.entry-content, .editor-styles-wrapper) blockquote p:last-child { margin-bottom: 0; }
:where(.entry-content, .editor-styles-wrapper) :where(pre, code) { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.875em; }
:where(.entry-content, .editor-styles-wrapper) pre { overflow: auto; padding: var(--pj-space-5); border: 1px solid var(--pj-line); border-radius: var(--pj-radius); background: var(--pj-surface); white-space: pre-wrap; overflow-wrap: anywhere; }
:where(.entry-content, .editor-styles-wrapper) :not(pre) > code { padding: 0.125em 0.3em; background: var(--pj-accent-soft); }
:where(.entry-content, .editor-styles-wrapper) table { width: 100%; border-collapse: collapse; table-layout: fixed; }
:where(.entry-content, .editor-styles-wrapper) :where(td, th) { padding: var(--pj-space-3); border: 1px solid var(--pj-control-line); text-align: start; overflow-wrap: anywhere; }
:where(.entry-content, .editor-styles-wrapper) th { background: var(--pj-accent-soft); }
:where(.entry-content, .editor-styles-wrapper) :where(figcaption, .wp-caption-text) { margin-top: var(--pj-space-2); color: var(--pj-muted); font-size: 0.8125rem; text-align: center; }
:where(.entry-content, .editor-styles-wrapper) hr { margin-block: var(--pj-space-7); border: 0; border-top: 1px solid var(--pj-line); }
.alignleft { float: left; margin-inline-end: var(--pj-space-5); }
.alignright { float: right; margin-inline-start: var(--pj-space-5); }
.aligncenter { display: block; margin-inline: auto; }
.entry-content::after { display: table; clear: both; content: ""; }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content .wp-block-button__link { line-height: 1.5; }
.entry-footer { margin-top: var(--pj-space-7); padding-top: var(--pj-space-5); border-top: 1px solid var(--pj-line); }
.tag-links { display: flex; flex-wrap: wrap; gap: var(--pj-space-2); }
.tag-links a { display: inline-flex; align-items: center; min-height: var(--pj-control); padding: var(--pj-space-2) var(--pj-space-3); border: 1px solid var(--pj-control-line); border-radius: var(--pj-radius); font-size: 0.875rem; }
.post-password-form label { display: block; }
.post-password-form input[type="password"] { display: block; width: 100%; margin-block: var(--pj-space-2) var(--pj-space-4); }
.pagination, .post-navigation { margin-top: var(--pj-space-7); }
.pagination .nav-links, .page-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pj-space-2); }
.pagination .page-numbers, .page-links > a, .page-links > span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--pj-control); min-height: var(--pj-control); padding: var(--pj-space-2) var(--pj-space-3); border: 1px solid var(--pj-control-line); border-radius: var(--pj-radius); text-decoration: none; }
.pagination .current, .page-links > span { background: var(--pj-accent); color: var(--pj-surface); border-color: var(--pj-accent); }
.pagination .dots { border-color: transparent; }
.post-navigation { max-width: var(--pj-reading); margin-inline: auto; padding-top: var(--pj-space-6); border-top: 1px solid var(--pj-line); }
.post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pj-space-6); }
.post-navigation a { display: block; min-height: var(--pj-control); padding-block: var(--pj-space-3); color: var(--pj-ink); }
.nav-next { text-align: end; }
.nav-direction { display: block; margin-bottom: var(--pj-space-2); color: var(--pj-muted); font-size: 0.8125rem; }
.nav-title { font-weight: 600; }

.comments-area { margin-top: var(--pj-space-8); padding-top: var(--pj-space-7); border-top: 1px solid var(--pj-line); }
.comments-area h2 { font-size: 1.5rem; }
.comment-list, .comment-list .children { padding: 0; list-style: none; }
.comment-list .children { padding-inline-start: var(--pj-space-5); border-inline-start: 1px solid var(--pj-line); }
.comment-body { padding-block: var(--pj-space-5); }
.comment-author { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pj-space-2); }
.comment-author .avatar { border-radius: 50%; }
.comment-author a, .comment-metadata a, .comment-reply-link, #cancel-comment-reply-link, .comments-area .nav-links a { display: inline-flex; align-items: center; min-height: var(--pj-control); }
.comment-metadata { color: var(--pj-muted); font-size: 0.8125rem; }
.comment-content { margin-block: var(--pj-space-4); }
.comment-content pre { max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
.bypostauthor > .comment-body { border-inline-start: 3px solid var(--pj-accent); padding-inline-start: var(--pj-space-4); }
.comment-respond { margin-top: var(--pj-space-6); }
.comment-form label { display: block; margin-bottom: var(--pj-space-2); }
.comment-form :where(input[type="text"], input[type="email"], input[type="url"], textarea) { width: 100%; }
.comment-form-cookies-consent { display: flex; gap: var(--pj-space-3); align-items: flex-start; }
.comment-form-cookies-consent input { margin-top: var(--pj-space-3); flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; }
.comment-form-cookies-consent label { min-height: var(--pj-control); }
.required-field-message, .comment-notes { color: var(--pj-muted); font-size: 0.875rem; }
.site-footer { padding-block: var(--pj-space-7); border-top: 1px solid var(--pj-line); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--pj-space-6); }
.footer-inner > div { max-width: 35rem; }
.footer-brand { margin-bottom: var(--pj-space-2); font-weight: 700; }
.footer-note { margin-bottom: 0; color: var(--pj-muted); font-size: 0.8125rem; }
.footer-navigation a { color: var(--pj-muted); font-size: 0.875rem; }

@media (min-width: 75rem) {
  .entry-content .alignwide { max-width: calc(100% + 8rem); width: calc(100% + 8rem); margin-inline: -4rem; }
}
@media (max-width: 62rem) {
  .site-header-inner { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: var(--pj-space-4) var(--pj-space-5); }
  .primary-navigation { grid-row: 2; grid-column: 1 / -1; }
  .header-search { grid-column: 2; grid-row: 1; }
  .journal-intro { grid-template-columns: minmax(0, 1fr) 12rem; }
  .post-card.has-post-thumbnail { grid-template-columns: 7rem minmax(0, 1fr) 8rem; }
  .post-card { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--pj-space-5); }
}
@media (max-width: 42rem) {
  .shell { width: calc(100% - 2.5rem); }
  .site-header-inner { grid-template-columns: minmax(0, 1fr); gap: var(--pj-space-3); padding-block: var(--pj-space-5); }
  .site-brand { font-size: 1.125rem; }
  .primary-navigation, .header-search { grid-column: 1; grid-row: auto; }
  .menu { gap: var(--pj-space-2) var(--pj-space-6); }
  .header-search { width: 100%; }
  .journal-intro { grid-template-columns: minmax(0, 1fr); gap: var(--pj-space-5); padding-block: var(--pj-space-7); }
  .journal-index-note { display: none; }
  .section-heading { padding-block: var(--pj-space-4); }
  .section-note { font-size: 0.8125rem; }
  .post-card, .post-card.has-post-thumbnail { grid-template-columns: minmax(0, 1fr); gap: var(--pj-space-4); padding-block: var(--pj-space-5); }
  .post-card-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--pj-space-3); }
  .post-card-title { font-size: 1.375rem; }
  .post-card-title a { gap: var(--pj-space-3); }
  .post-card-image { max-width: 26rem; }
  .post-card-excerpt { font-size: 0.9375rem; }
  .page-heading, .reading-article { padding-top: var(--pj-space-7); }
  .entry-header { margin-bottom: var(--pj-space-6); }
  .entry-title { font-size: 1.875rem; }
  .entry-content :where(h2, h3) { margin-top: var(--pj-space-6); }
  .entry-content blockquote { padding: var(--pj-space-4); }
  .entry-content :where(ul, ol) { padding-inline-start: var(--pj-space-5); }
  .entry-content :where(td, th) { padding: var(--pj-space-2); font-size: 0.9375rem; }
  .alignleft, .alignright { float: none; margin-inline: 0; }
  .site-main { padding-bottom: var(--pj-space-8); }
  .not-found { padding-top: var(--pj-space-7); }
  .footer-inner { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
  button, input, .button-link, .category-link, .page-numbers { border: 1px solid ButtonText; }
  :focus-visible { outline-color: Highlight; }
}
@media print {
  .site-header, .site-footer, .comments-area, .post-navigation { display: none; }
  .shell { width: 100%; }
  body { background: white; color: black; }
  .site-main, .reading-article { padding: 0; }
}