/* 옛날 개인 홈페이지 느낌: 무늬 배경, 검정 밑줄 링크, 들여쓰기 목록, 오른쪽 사이드바 */

:root {
  --heading: Georgia, "Times New Roman", "Batang", serif;
  --text: "Trebuchet MS", "Malgun Gothic", sans-serif;
  --small: Verdana, "Malgun Gothic", sans-serif;
  --mono: "Courier New", Courier, monospace;
}

/* 섹션별 배경. 글자·링크·별은 전부 --ink 한 색 — 링크는 밑줄로만 구분 */
.theme-home   { --paper: #c0c0c0; --ink: #000; --rule: #8a8a8a; --blot: rgba(255, 255, 255, 0.28); }
.theme-music  { --paper: #f3e7c4; --ink: #000; --rule: #c9b98c; --blot: rgba(255, 255, 255, 0.5); }
.theme-film   { --paper: #d5e1ec; --ink: #000; --rule: #9fb2c4; --blot: rgba(255, 255, 255, 0.4); }
.theme-art    { --paper: #dde7d0; --ink: #000; --rule: #a9b897; --blot: rgba(255, 255, 255, 0.4); }
.theme-post   { --paper: #f8f5ec; --ink: #000; --rule: #d6d0c0; --blot: rgba(222, 214, 196, 0.35); }
/* 비밀의 방은 배경이 어두워서 글자만 밝게 */
.theme-secret { --paper: #17111b; --ink: #e9e0e6; --rule: #4a3a4c; --blot: rgba(255, 255, 255, 0.025); }
body { --link: var(--ink); --dim: var(--ink); --star: var(--ink); }

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  /* CSS로 만든 대리석 무늬 타일 */
  background-image:
    radial-gradient(ellipse 60px 40px at 20% 30%, var(--blot), transparent 70%),
    radial-gradient(ellipse 80px 50px at 75% 65%, var(--blot), transparent 70%),
    radial-gradient(ellipse 70px 60px at 55% 15%, rgba(0, 0, 0, 0.04), transparent 70%),
    radial-gradient(ellipse 90px 45px at 10% 85%, rgba(0, 0, 0, 0.035), transparent 70%),
    radial-gradient(ellipse 50px 70px at 90% 20%, var(--blot), transparent 70%);
  background-size: 230px 190px;
  font-family: var(--text);
  font-size: 1.2rem;
  line-height: 1.5;
}

a, a:visited { color: var(--link); text-decoration: underline; }

.wrap {
  display: flex;
  gap: 2rem;
  max-width: 1040px;
  padding: 1.5rem 1rem 0 4rem;
}

main { flex: 1; min-width: 0; }

aside {
  width: 150px;
  flex-shrink: 0;
  text-align: center;
  font-family: var(--small);
  font-size: 0.8rem;
}

.aside-top a {
  font-family: var(--small);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.search input { width: 100%; font-size: 0.85rem; }

.aside-head {
  margin-top: 2rem;
  font-family: var(--heading);
  font-size: 1.3rem;
  font-weight: 700;
}

.aside-cover {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--ink) !important;
}
.aside-cover img {
  display: block;
  width: 113px;
  height: 150px;
  margin: 0 auto 0.2rem;
  object-fit: cover;
}

h1 {
  font-family: var(--heading);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0.5rem 0;
}
h1.site { font-size: 2rem; letter-spacing: 0.02em; }
.branch { font-family: var(--heading); font-weight: 700; font-size: 1.15em; }

.tree { list-style: none; padding-left: 3.75rem; margin: 1rem 0; }
.tree ul { list-style: none; padding-left: 3.75rem; margin: 0 0 0.4rem; }
.tree.flat li { margin: 0.25rem 0; }
.tree.cols { columns: 4 8rem; }

.desc { color: var(--dim); font-size: 0.85em; }
.date { color: var(--dim); font-family: var(--mono); font-size: 0.75em; margin-left: 0.4rem; }
.kind { font-family: var(--mono); font-size: 0.85em; text-transform: lowercase; }
.todo { color: var(--dim); font-style: italic; }
.crumb { font-family: var(--small); font-size: 0.8rem; margin: 0; }
.filter { font-family: var(--small); font-size: 0.85rem; line-height: 2; }

.rank {
  display: inline-block;
  min-width: 2.6rem;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--dim);
}

.rating {
  color: var(--star);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

article .cover {
  float: right;
  width: 220px;
  margin: 0 0 1rem 1.5rem;
  border: 1px solid var(--rule);
}
article .meta { margin-top: 0; color: var(--dim); font-family: var(--small); font-size: 0.9rem; }
article .body { font-family: var(--heading); font-size: 1.15rem; line-height: 1.65; }
article .body img { max-width: 100%; }
article::after { content: ""; display: block; clear: both; }

hr { border: 0; border-top: 1px solid var(--rule); }
footer { padding: 2rem 1rem 1.5rem 4rem; font-family: var(--small); font-size: 0.75rem; color: var(--dim); }

/* 폼 — 일부러 브라우저 기본 모양에 가깝게 */
form.gate { margin: 1.5rem 0; }
.error { color: #b00000; font-weight: 700; }
.theme-secret .error { color: #ff8a8a; }
input, select, textarea, button { font: inherit; font-size: 1rem; }

.editor label { display: block; margin: 0.8rem 0; font-size: 1rem; }
.editor label[hidden] { display: none; }
.editor input:not([type="checkbox"]), .editor select, .editor textarea {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-top: 0.2rem;
}
.editor textarea { font-family: var(--mono); }
.editor label.check, label.check { display: inline-block; }
.current-cover img { width: 90px; vertical-align: middle; margin-right: 1rem; }

.aside-cover .no-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 113px;
  height: 150px;
  margin: 0 auto 0.2rem;
  padding: 0.5rem;
  border: 1px dashed var(--rule);
  font-family: var(--heading);
  font-size: 0.85rem;
  overflow: hidden;
}

.cover-pick { max-width: 640px; border: 1px solid var(--rule); font-size: 1rem; }
.cover-query { display: flex; gap: 0.4rem; }
.cover-query input { flex: 1; min-width: 0; }
.cover-results { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.cover-option {
  width: 120px;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.7rem;
  text-align: left;
}
.cover-option img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cover-option.picked { border-color: var(--link); }
.upload { margin-top: 0.75rem; font-size: 0.9rem; }
button.danger { color: #b00000; margin-top: 1rem; }
form.inline { display: inline; }
button.link {
  background: none; border: 0; padding: 0;
  color: var(--link); text-decoration: underline; cursor: pointer; font-size: inherit;
}
.help { font-size: 0.95rem; margin-top: 2rem; }

table.admin { border-collapse: collapse; font-size: 0.95rem; }
table.admin th, table.admin td { border: 1px solid var(--rule); padding: 0.2rem 0.6rem; text-align: left; }

@media (max-width: 700px) {
  body { font-size: 1.05rem; }
  .wrap { flex-direction: column; padding: 1rem 16px 0; gap: 0; }
  footer { padding: 1.5rem 16px; }
  .tree, .tree ul { padding-left: 1.5rem; }
  aside { width: auto; text-align: left; }
  .aside-cover { display: inline-block; margin-right: 0.75rem; vertical-align: top; text-align: center; }
  .aside-cover img, .aside-cover .no-cover { width: 80px; height: 106px; }
  article .cover { float: none; display: block; width: 100%; max-width: 320px; margin: 0 0 1rem; }
  table.admin { display: block; overflow-x: auto; }
}

/* 홈 맨 위 메뉴 (Reviews / Thoughts) */
.group {
  font-family: var(--heading);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
}
.tree > li + li { margin-top: 1rem; }