/* =========================================================
   choeis.com 디자인 파일
   색과 글씨체는 맨 위 :root 에서 한 번에 바꿀 수 있습니다.
   ========================================================= */
:root {
  --paper: #fdfdfb;      /* 바탕 */
  --ink: #1a1a18;        /* 글자 */
  --ink-soft: #4a4a44;   /* 보조 글자 (날짜, 부제) */
  --line: #e2e1db;       /* 가는 선 */
  --accent: #1a1a18;     /* 강조 글자색 (소제목·Q&A·링크) — 먹색 */
  --mark: #c6df2f;       /* 형광펜 연두: 선택된 메뉴·탭 밑줄·읽기 막대 */
  --mark-ink: #8fae17;   /* 진한 연두: 따옴표·목록 점처럼 작은 표시 */
  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --wide: 1240px;        /* 페이지 최대 너비 */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { background: var(--paper); color: var(--ink); }
html { overflow-x: hidden; }   /* 옛 사파리용: 화면이 옆으로 밀리지 않게 */
@supports (overflow-x: clip) { html { overflow-x: visible; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 18px 32px;
}

/* ---------- 머리 ----------
   1줄: 홈페이지 주소(누르면 처음 화면) | 메뉴 버튼
   2줄: 가로줄 (아래 그림·목록과 양 끝이 같음)
   3줄: 메뉴 */
.site-head {
  max-width: none;   /* 아래 그림·목록과 양 끝을 맞춤 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 2px auto;
}
.head-top { grid-column: 1; grid-row: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.logo { font-family: "Fraunces Logo", Georgia, "Times New Roman", serif; font-weight: 800; font-optical-sizing: auto; font-size: clamp(23px, 2.2vw, 27px); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); transition: color .2s; }
.logo:hover { color: var(--accent); }
.menu-btn { background: none; border: 0; padding: 6px 2px; cursor: pointer; display: grid; gap: 4px; }
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.head-line { grid-column: 1; grid-row: 2; height: 2px; background: var(--ink); border-radius: 2px; }
.top-nav { grid-column: 1; grid-row: 3; margin-top: 10px; }
.top-nav { display: flex; justify-content: space-between; gap: 8px; }
.top-nav a { font-weight: 700; font-size: clamp(14px, 3.6vw, 17px); letter-spacing: .05em; padding: 2px 0; transition: color .2s; }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--accent); }

/* ---------- 표지 ---------- */
.cover { margin: 32px auto 0; max-width: none; }
.cover-art { position: relative; }
.cover-art > img { display: block; width: 100%; height: auto; }
.spots { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot { cursor: pointer; outline: none; }
.spot rect { fill: transparent; stroke: transparent; stroke-width: 3; transition: stroke .2s, fill .2s; }
.spot:hover rect, .spot:focus-visible rect { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .85); stroke-dasharray: 8 7; }
.spot-tag {
  position: absolute; transform: translate(-50%, -120%);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  background: var(--ink); color: #fff; padding: 2px 10px; border-radius: 999px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s, transform .25s;
}
.spot-tag.on { opacity: 1; transform: translate(-50%, -150%); }

/* ---------- 메뉴 제목과 분류 탭 ---------- */
.section { margin-top: 34px; }
.sec-title { text-align: center; font-weight: 800; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.05; margin: 0; letter-spacing: -.02em; }
/* 분류가 많아 한 줄에 다 안 들어가면 옆으로 밀어서 봅니다 (PC·휴대폰 모두 한 줄) */
.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; gap: 8px clamp(16px, 2.4vw, 26px); margin: 26px 0 36px; padding: 0; list-style: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.scrolls { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.tabs.scrolls.at-end { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); }
.tabs li { flex: none; }
.tabs li:first-child { margin-left: auto; }
.tabs li:last-child { margin-right: auto; }
.tabs button { font-weight: 600; font-size: clamp(15px, 1.4vw, 17px); letter-spacing: -.01em; color: var(--ink); background: none; border: 0; border-bottom: 3px solid transparent; padding: 2px 0 6px; cursor: pointer; }
.tabs button[aria-pressed="true"] { font-weight: 700; color: var(--accent); border-color: var(--accent); }

/* ---------- 글 카드 (디에디트식) ---------- */
/* 카드는 PC·휴대폰 모두 같은 모양이고, 한 줄에 놓이는 개수만 화면 폭에 따라 2개 → 4개로 바뀝니다. */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 50px) clamp(14px, 2.4vw, 30px); }
.card { display: grid; grid-template-columns: 1fr; align-content: start; min-width: 0; }
.pic { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.pic svg, .pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
/* 글 카드 (사진 없는 글) : 줄 노트 위에 본문 첫머리 */
.pic-text {
  --lh: 1.85em;
  background-color: #f8f5ee;
  background-image: linear-gradient(to bottom, transparent calc(var(--lh) - 1px), rgba(26, 26, 24, .09) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
  background-position: 0 clamp(40px, 5vw, 60px);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: clamp(13px, 1.25vw, 16px);
}
.pic-text .q { position: absolute; left: clamp(10px, 1.4vw, 18px); top: clamp(2px, .6vw, 8px); font-size: clamp(36px, 4vw, 54px); font-weight: 800; line-height: 1; color: var(--accent); }
.pic-text .excerpt {
  position: absolute; left: clamp(12px, 1.6vw, 20px); right: clamp(12px, 1.6vw, 20px); top: clamp(40px, 5vw, 60px);
  margin: 0; line-height: var(--lh); color: var(--ink); letter-spacing: -.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden;
}
.pic-text .pic-label { color: var(--ink); text-shadow: none; }
@media (max-width: 699px) { .pic-text .excerpt { -webkit-line-clamp: 4; line-clamp: 4; } }
/* 페이지 번호 */
.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 48px 0 0; }
.pager button { font: inherit; font-size: 15px; font-weight: 600; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 999px; border: 0; background: none; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.pager button:hover:not(:disabled):not([aria-current]) { background: #efede6; }
.pager button[aria-current="page"] { background: var(--ink); color: var(--paper); }
.pager button:disabled { color: #c4c3bc; cursor: default; }
.pager button[aria-label] { font-size: 22px; line-height: 1; }
.pic-label { position: absolute; left: clamp(10px, 1.2vw, 14px); bottom: clamp(8px, 1vw, 10px); font-weight: 800; font-size: clamp(13px, 1.3vw, 16px); letter-spacing: .03em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.meta { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.meta > a { grid-column: 1 / -1; margin-top: clamp(12px, 1.6vw, 18px); }
.card h2 { font-weight: 700; font-size: clamp(17px, 2.1vw, 25px); line-height: 1.42; margin: 0; letter-spacing: -.03em; text-wrap: balance; }
/* 카드 줄 맞춤: 제목·부제는 최대 2줄, 넘치면 … 으로 줄이고, 짧아도 2줄 높이를 차지해서 날짜 줄이 나란히 맞습니다 */
.card h2, .card .dek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }
.card h2 { min-height: calc(2em * 1.42); text-wrap: initial; }
.card .dek { min-height: calc(2em * 1.6); }
.card a:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.dek { font-size: clamp(14px, 1.2vw, 15px); color: var(--ink-soft); margin: 8px 0 0; line-height: 1.6; }
.card .dek { grid-column: 1; }
time { display: block; font-weight: 500; font-size: clamp(13px, 1.1vw, 14px); color: var(--ink-soft); margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.card time { grid-column: 1; }
.kicker { font-weight: 700; font-size: 13px; letter-spacing: .02em; margin: 0 0 6px; }
.empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 글 보기 ---------- */
.article { margin-top: 22px; }
@media (max-width: 899px) { .bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } }
.hero { aspect-ratio: auto; height: min(56.25vw, 520px); }
.hero .pic-label { display: none; }
.band { background: #f3efe6; padding-block: clamp(30px, 4vw, 48px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.band-in { max-width: 900px; margin: 0 auto; }
.band h1 { font-weight: 800; font-size: clamp(28px, 7.4vw, 44px); line-height: 1.4; margin: 8px 0 0; letter-spacing: -.03em; text-wrap: balance; }
.band h1 span { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 7px; }
.band .dek { font-weight: 600; font-size: 18px; color: var(--ink); margin-top: 16px; }
.band .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 16px; }
.body { max-width: 680px; margin: 38px auto 0; }
.body p { font-size: 17px; line-height: 1.9; margin: 0 0 1.3em; letter-spacing: -.015em; }
.body figure { margin: 28px 0; }
.body figure img { width: 100%; display: block; }
/* 본문 속 영상·유튜브·파일·링크 */
.body video { width: 100%; display: block; background: #000; border-radius: 4px; }
.embed-box { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #111; border-radius: 4px; overflow: hidden; }
.embed-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.body figcaption { margin-top: 8px; font-size: 13px; text-align: right; }
/* 글 안에 펼친 내 페이지 (화보 등) — 본문보다 넓게 */
.body figure.page-embed { width: 100%; }
@media (min-width: 760px) { .body figure.page-embed { --pw: min(1100px, calc(100vw - 64px)); width: var(--pw); margin-left: calc(50% - var(--pw) / 2); margin-right: 0; } }
.page-embed iframe { display: block; width: 100%; height: 640px; border: 0; background: transparent; }
.body figcaption a { color: var(--ink-soft); }
.body figcaption a:hover { color: var(--accent); }
.in-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.file-card, .link-card { display: grid; align-items: center; gap: 4px 14px; margin: 24px 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .2s; }
.file-card:hover, .link-card:hover { border-color: var(--accent); }
.file-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.fc-icon { width: 44px; height: 52px; border-radius: 6px; background: #f3efe6; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft); }
.fc-name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.fc-go, .lc-go { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.link-card { grid-template-columns: minmax(0, 1fr) auto; }
.lc-host { grid-column: 1; font-weight: 700; font-size: 15px; }
.lc-url { grid-column: 1; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-go { grid-column: 2; grid-row: 1 / 3; font-size: 18px; }
/* 글 아래: 같은 카테고리 다른 글 */
.more-posts { margin-top: 64px; padding-top: 34px; border-top: 2px solid var(--ink); }
.more-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 26px; }
.more-head h2 { margin: 0; font-size: clamp(19px, 2vw, 22px); font-weight: 800; letter-spacing: -.01em; }
.more-head a { font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.more-head a:hover { color: var(--accent); }
.back { display: inline-block; margin-top: 24px; font-weight: 700; font-size: 15px; }
.back:hover { color: var(--accent); }

/* ---------- 프로필 ---------- */
.profile-body { max-width: 760px; margin: 0 auto; }
.intro { display: block; }
.intro-text p { font-size: 17px; line-height: 1.85; margin: 0 0 .8em; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 22px 0 0; font-size: 15px; border-top: 1px solid var(--line); padding-top: 18px; }
.facts dt { font-weight: 700; }
.facts dd { color: var(--ink-soft); }
.facts dd { margin: 0; min-width: 0; }

.namecard {
  max-width: 440px; margin: 0 auto; aspect-ratio: 9 / 5.4;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(40, 35, 25, .08);
  padding: clamp(18px, 5vw, 28px); display: grid; grid-template-rows: auto auto 1fr; position: relative;
}
.nc-logo { position: absolute; right: clamp(16px, 4.4vw, 26px); top: clamp(16px, 4.4vw, 24px); font-family: "Fraunces Logo", Georgia, serif; font-weight: 800; font-size: clamp(14px, 3.8vw, 16px); letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.nc-name { margin: 0; padding-right: 7.5em; font-size: clamp(20px, 5.6vw, 24px); font-weight: 800; letter-spacing: -.02em; }
.nc-name small { font-size: 14px; font-weight: 500; color: var(--ink-soft); margin-left: 4px; letter-spacing: .04em; }
.nc-role { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.nc-rows { align-self: end; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: clamp(12px, 3.4vw, 14px); line-height: 1.6; }
.nc-rows dt { font-weight: 700; letter-spacing: .02em; }
.nc-rows dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- 전체 메뉴 (디에디트식) ---------- */
/* 메뉴는 화면 오른쪽에서 반쯤 밀려 나오는 패널입니다. 패널 너비는 --panel 로 조절합니다. */
.overlay { --panel: clamp(300px, 50vw, 620px); position: fixed; inset: 0; z-index: 20; background: rgba(26, 26, 24, 0); transition: background .3s; }
.overlay.open { background: rgba(26, 26, 24, .38); }
.overlay > .wrap {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--panel); max-width: 100%; margin: 0;
  background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  padding-top: calc(22px + env(safe-area-inset-top, 0px)); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  padding-left: clamp(20px, 3vw, 40px); padding-right: calc(clamp(20px, 3vw, 40px) + env(safe-area-inset-right, 0px));
  box-shadow: -12px 0 40px rgba(26, 26, 24, .12);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.overlay.open > .wrap { transform: translateX(0); }
html.menu-open { overflow: hidden; }
.ov-top { display: flex; justify-content: space-between; align-items: center; }
.ov-top .name { font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.close-btn { background: none; border: 0; cursor: pointer; font-size: 34px; line-height: 1; padding: 0 4px; color: var(--ink); }
.ov-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ov-list > li > button { font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--ink); text-align: left; letter-spacing: -.01em; }
.ov-list > li.open > button { color: var(--accent); }
.ov-list ul { list-style: none; margin: 6px 0 16px 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ov-list ul a { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.ov-list ul a:hover { color: var(--accent); }

/* ---------- 검색 ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search-form svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.search-form { display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 26px auto 0; border-bottom: 3px solid var(--ink); padding-bottom: 8px; }
.search-form svg { flex: none; width: 24px; height: 24px; }
.search-form input { flex: 1; min-width: 0; font: inherit; font-size: clamp(17px, 2vw, 20px); font-weight: 500; border: 0; background: transparent; color: var(--ink); padding: 6px 0; outline: none; }
.search-form input::placeholder { color: #9a9a92; }
.search-form input::-webkit-search-cancel-button { cursor: pointer; }
.search-form button[type="submit"] { flex: none; font: inherit; font-size: 14px; font-weight: 700; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.search-form button[type="submit"]:hover { background: var(--accent); }
.result-count { text-align: center; color: var(--ink-soft); margin: 22px 0 34px; font-size: 15px; }
.result-count b { color: var(--ink); }
mark { background: #fde3c8; color: inherit; border-radius: 3px; padding: 0 2px; }
.taglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.taglist a { font-size: 14px; font-weight: 500; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: border-color .2s, color .2s; }
.taglist a:hover { border-color: var(--accent); color: var(--accent); }
.tag-box { max-width: 760px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
.tag-title { font-weight: 700; font-size: 15px; margin: 0 0 14px; }
.tag-box .taglist { justify-content: flex-start; }
.article-tags { margin-top: 8px; }
.ov-search { margin-top: 26px; }
.ov-search .search-form { max-width: none; margin: 0; }
.ov-search .quick { margin-top: 16px; }

/* ---------- 관리자에게만 보이는 것 ---------- */
.owner-edit { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 700; padding: 8px 16px; border: 1.5px dashed var(--accent); color: var(--accent); border-radius: 999px; }
.owner-edit small { font-weight: 500; color: var(--ink-soft); }
.owner-edit:hover { background: #fff3e8; }
.profile-owner { text-align: center; margin-top: 28px; }
.owner-link { color: var(--accent); font-weight: 600; }
.site-foot { user-select: none; -webkit-user-select: none; }

/* ---------- 맨 위로 버튼 ---------- */
.to-top {
  position: fixed; z-index: 15;
  right: calc(max(16px, env(safe-area-inset-right, 0px)) + 4px);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(30, 25, 20, .12);
  transition: background .2s, color .2s, transform .2s;
}
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

.site-foot { margin-top: 48px; text-align: center; font-size: 13px; color: var(--ink-soft); letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* 맨 아래 © 줄: 내용이 짧으면 화면 맨 아래, 길면 내용 끝에 (모든 기기 같게) */
body > .wrap { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
body > .wrap > * { width: 100%; }
body > .wrap > main { flex: 1 0 auto; }
body > .wrap > .site-foot { flex: none; padding-top: 48px; margin-top: 0; }

/* 편집기로 꾸민 글 */
.body strong { font-weight: 800; }
.body u { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.body mark { background: linear-gradient(transparent 55%, #ffe27a 55%); color: inherit; padding: 0 1px; }
.body h2.sub { font-size: clamp(20px, 2.4vw, 23px); font-weight: 800; color: var(--accent); line-height: 1.5; letter-spacing: -.02em; margin: 2.2em 0 .9em; }
.body blockquote.quote { margin: 30px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--ink); }
.body blockquote.quote p { margin: 0; color: var(--ink-soft); }
.body .box { background: #fff5c2; padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 30px); margin: 36px 0; text-align: center; }
.body .box p { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.85; }
.body hr.bar { width: 66%; max-width: 420px; height: 4px; border: 0; background: var(--ink); margin: 52px auto; }

/* 편집기에서 고른 글씨 크기 3단계 · 글씨체 2가지 (홈페이지와 편집기 공통) */
.ql-size-small { font-size: .86em; }
.ql-size-large { font-size: 1.25em; line-height: 1.7; }
.ql-size-huge { font-size: 1.6em; line-height: 1.5; letter-spacing: -.02em; }
.ql-font-serif { font-family: "Nanum Myeongjo", "AppleMyungjo", "Batang", serif; }
.ql-font-hand { font-family: "Nanum Pen Script", "Nanum Pen", cursive; font-size: 1.32em; letter-spacing: 0; }
.ql-font-hand.ql-size-small { font-size: 1.12em; }
.ql-font-hand.ql-size-large { font-size: 1.65em; }
.ql-font-hand.ql-size-huge { font-size: 2.1em; }

/* 형광펜·박스 색 (홈페이지) */
.body mark.hl-orange { background: linear-gradient(transparent 55%, #ffc999 55%); }
.body mark.hl-pink { background: linear-gradient(transparent 55%, #ffbfd3 55%); }
.body mark.hl-purple { background: linear-gradient(transparent 55%, #d8c8ff 55%); }
.body mark.hl-blue { background: linear-gradient(transparent 55%, #b8dcff 55%); }
.body mark.hl-green { background: linear-gradient(transparent 55%, #b3ebc9 55%); }
.body .box.box-orange { background: #ffe9d6; }
.body .box.box-pink { background: #ffe5ee; }
.body .box.box-purple { background: #eee8ff; }
.body .box.box-blue { background: #e2f1ff; }
.body .box.box-green { background: #ddf5e7; }
.body .box.box-gray { background: #efeee9; }

/* 줄 정렬 (편집기에서 고른 왼쪽·가운데·오른쪽) */
.body .al-left { text-align: left; }
.body .al-center { text-align: center; }
.body .al-right { text-align: right; }

/* 사진 크기 (편집기에서 고른 작게·중간) — 가운데에 놓임 */
.body figure.img-medium img { width: 66%; margin: 0 auto; }
.body figure.img-small img { width: 42%; margin: 0 auto; }
@media (max-width: 599px) {
  .body figure.img-medium img { width: 82%; }
  .body figure.img-small img { width: 58%; }
}

/* =========================================================
   목록: 디에디트식
   - 휴대폰(600px 미만): 사진 왼쪽 · 글 오른쪽, 한 줄에 하나 / 태블릿(600~899px): 같은 모양 두 칸씩
   - PC(900px 이상): 사진 위 · 글 아래, 한 줄에 4개 (글 아래 '다른 글' 4개도 가로 한 줄)
   ========================================================= */
.ckicker { font-weight: 800; font-size: 13px; letter-spacing: .05em; margin: 2px 0 8px; }
@media (max-width: 899px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .card { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: clamp(16px, 2.4vw, 26px); align-items: start; }
  .card > a { grid-column: 1; grid-row: 1; }
  .card > .meta { grid-column: 2; grid-row: 1; align-content: start; }
  .card .pic-label { display: none; }
  .card .meta > a { margin-top: 0; }
  .card h2 { font-size: 21px; font-weight: 800; line-height: 1.36; letter-spacing: -.04em; -webkit-line-clamp: 3; line-clamp: 3; min-height: 0; }
  .card .dek { min-height: 0; margin-top: 10px; font-size: 15px; }
  .card time { margin-top: 14px; }
}
@media (min-width: 600px) and (max-width: 899px) {   /* 태블릿: 같은 모양을 두 칸씩 */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 28px; }
  .card h2 { font-size: 19px; }
}
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px clamp(18px, 2vw, 30px); }
  .card .ckicker { display: none; }                       /* PC는 사진 위에 CULTURE 글씨 */
  .card .meta > a { margin-top: 18px; }
  .card h2 { font-size: clamp(21px, 1.85vw, 27px); font-weight: 800; line-height: 1.36; letter-spacing: -.04em; min-height: calc(2em * 1.36); }
  .card .dek { font-size: 15px; margin-top: 12px; }
  .card time { margin-top: 12px; }
}

/* 글을 열었을 때 제목 띠 색 (글마다 자동 또는 관리자 화면에서 고른 색) */
.band.bc-yellow { background: #f6cd52; }
.band.bc-apricot { background: #f7bd93; }
.band.bc-pink { background: #f4b8ca; }
.band.bc-lavender { background: #cdc2f2; }
.band.bc-sky { background: #aed4f2; }
.band.bc-mint { background: #acdcc8; }
.band.bc-lime { background: #d3de96; }
.band.bc-beige { background: #efe5d2; }

/* 글 본문 폭: PC에서 넓게 (680 → 860px), 넓어진 만큼 글씨도 살짝 크게 */
.body { max-width: 860px; }
.band-in { max-width: 860px; }
@media (min-width: 900px) {
  .body p { font-size: 18px; line-height: 1.95; }
  .body .box p { font-size: 19px; }
}

/* =========================================================
   목록 카드 아래쪽: 날짜는 사진 아래 선에 맞추고, 오른쪽에 세부분류 배지 (테두리 동그라미)
   ========================================================= */
.card .meta { display: flex; flex-direction: column; align-items: stretch; }
.card .cfoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.card .cfoot time { margin: 0 0 2px; }
.cbadge { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 0 0 1.2px #cfccc2; }
.cbadge svg { width: 22px; height: 22px; display: block; }
@media (max-width: 899px) {
  .card { align-items: stretch; }
  .card .cfoot { padding-top: 10px; }
}
@media (min-width: 900px) {
  .card { grid-template-rows: auto 1fr; }
  .card .cfoot { padding-top: 16px; }
  .cbadge { width: 42px; height: 42px; }
}

/* =========================================================
   목록 카드 높이 고정: 제목·부제가 길어도 카드 간격이 똑같게
   - 제목은 2줄, 부제는 1줄까지 보이고 넘치면 … 으로 줄임
   - 휴대폰·태블릿(사진 왼쪽): 글 칸 높이 = 사진 높이 (날짜·배지가 사진 아래 선에 딱 맞음)
   ========================================================= */
.card h2 { -webkit-line-clamp: 2; line-clamp: 2; }
.card .dek { -webkit-line-clamp: 1; line-clamp: 1; min-height: calc(1em * 1.6); }
@media (max-width: 899px) {
  .card > .meta { min-height: 168px; }
  .card > a { display: block; }
  .card > a > .pic { min-height: 100%; }   /* 글 칸이 사진보다 조금 높을 때는 사진을 늘려 아래 선을 맞춤 */   /* 제목 2줄+부제 1줄+날짜가 들어가는 높이 → 사진이 작아도 카드 높이가 모두 같음 */
  .card h2 { -webkit-line-clamp: 2; line-clamp: 2; }
  .card .ckicker { margin-bottom: 6px; }
  .card .dek { margin-top: 6px; }
}
@media (max-width: 379px) {
  .card > .meta { min-height: 154px; }
  .card h2 { font-size: 18px; }
  .card .dek { font-size: 14px; }
  .card .ckicker { font-size: 12px; margin-bottom: 4px; }
  .cbadge { width: 38px; height: 38px; }
  .cbadge svg { width: 19px; height: 19px; }
}

/* 세로 스크롤 막대 자리를 항상 비워 두기
   (PC에서 글이 짧은 화면—프로필 등—은 스크롤 막대가 없어져 선·메뉴가 몇 픽셀 옆으로 움직이던 문제) */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { html { overflow-y: scroll; } }   /* 마우스 쓰는 PC에만 (휴대폰은 막대가 화면 위에 떠서 필요 없음) */

/* 배지 크기: 동그라미 34px, 아이콘 19px (모든 화면 같음) */
.cbadge { width: 34px; height: 34px; }
.cbadge svg { width: 19px; height: 19px; }
@media (min-width: 900px) { .cbadge { width: 34px; height: 34px; } }
@media (max-width: 379px) { .cbadge { width: 32px; height: 32px; } .cbadge svg { width: 18px; height: 18px; } }

/* =========================================================
   글 읽는 화면 (디에디트식): 메뉴 줄을 숨기고 로고 · 선 · ☰ 만
   - 다른 메뉴는 ☰ 나 로고로, 제목 띠의 'CULTURE · 문예'를 누르면 그 목록으로
   ========================================================= */
body.reading .top-nav { display: none; }
body.reading .article { margin-top: 18px; }
.band .kicker a { color: inherit; text-decoration: none; }
.band .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 스크롤하면 붙는 얇은 머리 + 읽은 만큼 차는 줄 */
.readbar { position: fixed; left: 0; right: 0; top: 0; z-index: 15; background: rgba(253, 253, 251, .96); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  transform: translateY(-100%); transition: transform .25s ease; box-shadow: 0 1px 0 var(--line); }
.readbar.show { transform: none; }
.readbar .rb-in { max-width: var(--wide); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 10px max(16px, env(safe-area-inset-left, 0px)) 10px max(16px, env(safe-area-inset-right, 0px)); }
.readbar .rb-logo { font-family: "Fraunces Logo", Georgia, serif; font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1.2; }
.readbar .rb-fill { display: block; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
body.rb-off .readbar { display: none; }
@media (prefers-reduced-motion: reduce) { .readbar { transition: none; } }

/* =========================================================
   글 화면 PC 반반 (디에디트식): 왼쪽 사진 · 오른쪽 제목
   - 900px 이상에서 모든 글 (휴대폰·태블릿은 위아래 그대로). 사진이 없으면 표지 그림 일부, 글만 있는 글은 줄 노트 '글 카드'
   - 오른쪽 제목 칸은 글마다 정해진 띠 색, 양 끝은 머리의 선과 맞춤
   ========================================================= */
@media (min-width: 900px) {
  .article.split .art-top { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(480px, calc(100vh - 120px), 760px); }   /* 높이 상한 760px (제목이 길면 글씨를 줄여 맞춤) */
  .article.split .art-top .hero { height: auto; min-height: 100%; aspect-ratio: auto; }
  .article.split .art-top .band { display: flex; align-items: center; padding: clamp(40px, 5vw, 80px) clamp(32px, 4.4vw, 72px); }
  .article.split .art-top .band-in { max-width: 600px; margin: 0; width: 100%; }
  .article.split .band h1 { font-size: clamp(34px, 3.3vw, 52px); line-height: 1.32; }   /* 최대 52px, 긴 제목은 app.js 가 28px 까지 줄임 */
  .article.split .band .dek { font-size: 19px; }
}

/* 글만 있는 글의 왼쪽 '글 카드'는 PC 반반에서만 (휴대폰은 바로 제목) */
@media (max-width: 899px) { .art-top .pc-only { display: none; } }
@media (min-width: 900px) {
  .article.split .art-top .hero.pic-text { font-size: clamp(16px, 1.35vw, 19px); background-position: 0 clamp(64px, 6vw, 88px); }
  .article.split .art-top .hero.pic-text .q { left: clamp(24px, 3vw, 44px); top: clamp(10px, 1.4vw, 20px); font-size: clamp(56px, 5vw, 80px); }
  .article.split .art-top .hero.pic-text .excerpt { left: clamp(28px, 3.4vw, 48px); right: clamp(28px, 3.4vw, 48px); top: clamp(64px, 6vw, 88px); -webkit-line-clamp: 14; line-clamp: 14; }
}

/* =========================================================
   사진 묶음 — 배치 7가지 + 칸 비율 · 간격 · 사진 설명
   사진을 누르면 원본이 새 창으로
   ========================================================= */
.body .gal { --g: 8px; --ar-cell: 4 / 5; margin: 28px 0; }
.body .gal.nogap { --g: 0px; }
.body .gal .gal-in { display: grid; gap: var(--g); }
.body .gal .gi { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.body .gal .gi a { display: block; position: relative; overflow: hidden; aspect-ratio: var(--ar-cell); background: #f1efe8; }
.body .gal .gi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.body .gal .gi a:hover img { transform: scale(1.02); }
.body .gal .gi figcaption { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 7px; overflow-wrap: anywhere; }
.body .gal.nogap .gi figcaption { padding: 0 8px 6px; }
/* 1. 나란히 */
.body .gal.gl-row .gal-in { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.body .gal.gl-row.n3, .body .gal.gl-row.n4 { --ar-cell: 3 / 4; }
/* 2. 바둑판 (마지막 줄은 남은 장수만큼 고르게) */
.body .gal.gl-grid { --ar-cell: 1 / 1; }
.body .gal.gl-grid .gal-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.body .gal.gl-grid .gi { grid-column: span var(--sp, 6); }
/* 3. 큰 1 + 옆 작은 */
.body .gal.gl-bigl .gal-in { grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; }
.body .gal.gl-bigl .gi:first-child { grid-row: span calc(var(--n) - 1); }
.body .gal.gl-bigl .gi:first-child a { aspect-ratio: 4 / 5; }
.body .gal.gl-bigl .gi:not(:first-child) a { aspect-ratio: auto; flex: 1; min-height: 0; }
/* 4. 위 큰 1 + 아래 작은 */
.body .gal.gl-bigt { --ar-cell: 1 / 1; }
.body .gal.gl-bigt .gal-in { grid-template-columns: repeat(calc(var(--n) - 1), minmax(0, 1fr)); }
.body .gal.gl-bigt .gi:first-child { grid-column: 1 / -1; }
.body .gal.gl-bigt .gi:first-child a { aspect-ratio: 3 / 2; }
/* 큰 사진이 있는 배치는 설명을 사진 위에 얹음 (칸 높이가 어긋나지 않게) */
.body .gal.gl-bigl .gi, .body .gal.gl-bigt .gi { position: relative; }
.body .gal.gl-bigl .gi figcaption, .body .gal.gl-bigt .gi figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 22px 10px 8px; color: #fff; font-size: 12.5px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
/* 5. 원본 비율 맞춤 (자르지 않음, 줄 높이만 맞춤) */
.body .gal.gl-just .gal-in { display: flex; flex-wrap: wrap; }
.body .gal.gl-just .gi { flex: var(--ar, 1) 1 calc(var(--ar, 1) * 180px); }
.body .gal.gl-just .gi a { aspect-ratio: var(--ar, 1); }
/* 6. 엇갈림 */
.body .gal.gl-stag { --ar-cell: 3 / 4; }
.body .gal.gl-stag .gal-in { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: start; }
.body .gal.gl-stag .gi:nth-child(3n+1) { margin-top: 9%; }
.body .gal.gl-stag .gi:nth-child(3n) { margin-top: 15%; }
.body .gal.gl-stag.n2 .gi:nth-child(2) { margin-top: 14%; }
/* 7. 옆으로 넘기기 */
.body .gal.gl-slide .gal-in { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.body .gal.gl-slide .gal-in::-webkit-scrollbar { display: none; }
.body .gal.gl-slide .gi { flex: 0 0 calc((100% - var(--g) * 2) / 2.35); scroll-snap-align: start; }
.body .gal-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.body .gal-nav button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.body .gal-nav button:hover { border-color: var(--ink); }
.body .gal-count { font-size: 13px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
/* 칸 비율을 직접 고르면 (배치 기본값보다 우선) */
.body .gal.gr-1 { --ar-cell: 1 / 1; } .body .gal.gr-45 { --ar-cell: 4 / 5; } .body .gal.gr-32 { --ar-cell: 3 / 2; }
@media (max-width: 599px) {
  .body .gal { --g: 4px; }
  .body .gal.nogap { --g: 0px; }
  .body .gal.gl-row.n3 .gal-in, .body .gal.gl-row.n4 .gal-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .body .gal.gl-row.n3 .gi:first-child { grid-column: 1 / -1; }
  .body .gal.gl-row.n3:not([class*="gr-"]) .gi:first-child a { aspect-ratio: 4 / 3; }
  .body .gal.gl-row.n4:not([class*="gr-"]) { --ar-cell: 1 / 1; }
  .body .gal.gl-grid .gi { grid-column: span var(--spm, 6); }
  .body .gal.gl-just .gi { flex-basis: calc(var(--ar, 1) * 110px); }
  .body .gal.gl-stag.n4 .gal-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .body .gal.gl-stag .gi:nth-child(n) { margin-top: 0; }
  .body .gal.gl-stag .gi:nth-child(even) { margin-top: 12%; }
  .body .gal.gl-slide .gi { flex-basis: 82%; }
  .body .gal-nav button { display: none; }
  .body .gal .gi figcaption { font-size: 12.5px; }
}

/* =========================================================
   본문 꾸밈 더하기: 목록 · Q&A · 장소 카드 · 정보 표(별점) · 음악 · 목차 · 접기 · 전후 비교
   ========================================================= */
/* 목록 */
.body .list { margin: 0 0 1.3em; padding-left: 1.4em; font-size: 17px; line-height: 1.85; letter-spacing: -.015em; }
.body .list li { margin: .25em 0; padding-left: .2em; }
.body ul.list li::marker { color: var(--accent); }
.body ol.list li::marker { color: var(--accent); font-weight: 800; }
/* Q&A (인터뷰) */
.body .qa-q { color: var(--accent); font-weight: 800; margin: 2em 0 .6em; line-height: 1.7; }
.body .qa-q b { font-weight: 900; margin-right: 2px; }
/* 장소 카드 */
.body .place-card { margin: 30px 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.body .place-card p { margin: 0; }
.body .place-card .pc-kicker { font-size: 12.5px; font-weight: 800; color: var(--accent); letter-spacing: .02em; }
.body .place-card .pc-name { font-size: 20px; font-weight: 800; margin: 4px 0 10px; line-height: 1.4; }
.body .place-card .pc-info { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 15px; line-height: 1.6; }
.body .place-card dt { font-weight: 700; color: var(--ink); }
.body .place-card dd { margin: 0; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.body .place-card .pc-memo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.7; color: var(--ink); }
.body .place-card .pc-maps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.body .place-card .pc-maps a { font-size: 13.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; }
.body .place-card .pc-maps a:first-child { background: #03c75a; border-color: #03c75a; color: #fff; }
.body .place-card .pc-maps a:last-child { background: #fee500; border-color: #fee500; color: #191919; }
/* 정보 표 + 별점 */
.body .spec-card { margin: 30px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 16px 0 6px; }
.body .spec-card p { margin: 0; }
.body .spec-card .sc-title { font-size: 18px; font-weight: 800; }
.body .spec-card .sc-stars { margin-top: 4px; font-size: 20px; letter-spacing: 1px; color: #dcdad2; }
.body .spec-card .sc-stars i { font-style: normal; position: relative; }
.body .spec-card .sc-stars i.f { color: #f2b61c; }
.body .spec-card .sc-stars i.h { background: linear-gradient(90deg, #f2b61c 50%, #dcdad2 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.body .spec-card .sc-stars span { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-left: 6px; letter-spacing: 0; vertical-align: 2px; }
.body .spec-card .sc-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15px; }
.body .spec-card th, .body .spec-card td { text-align: left; padding: 10px 0; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
.body .spec-card th { width: 32%; font-weight: 700; padding-right: 14px; }
.body .spec-card td { color: var(--ink-soft); }
/* 음악 플레이어 */
.body figure.music iframe { display: block; width: 100%; border: 0; border-radius: 12px; background: #f1efe8; }
.body figure.music figcaption { font-size: 13px; margin-top: 6px; text-align: right; }
.body figure.music figcaption a { color: var(--ink-soft); }
/* 목차 */
.body .toc { margin: 0 0 34px; padding: 18px 22px; background: #f6f4ee; border-radius: 12px; }
.body .toc .toc-t { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink-soft); }
.body .toc ol { margin: 0; padding-left: 1.3em; font-size: 15.5px; line-height: 1.9; }
.body .toc li::marker { color: var(--accent); font-weight: 800; }
.body .toc a { text-decoration: none; }
.body .toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 접기 / 펼치기 */
.body details.fold { margin: 26px 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.body details.fold summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.body details.fold summary::-webkit-details-marker { display: none; }
.body details.fold summary::before { content: "▶"; font-size: 11px; color: var(--accent); transition: transform .2s; }
.body details.fold[open] summary::before { transform: rotate(90deg); }
.body details.fold .fold-in { padding: 0 18px 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.body details.fold .fold-in p { font-size: 16px; margin: 0 0 .8em; }
/* 전후 비교 (가운데 막대를 밀어서) */
.body figure.ba .ba-box { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.body figure.ba .ba-box > img { display: block; width: 100%; }
.body figure.ba .ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.body figure.ba .ba-after img { width: 100%; height: 100%; object-fit: cover; display: block; }
.body figure.ba .ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .3); pointer-events: none; }
.body figure.ba .ba-line::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 800; color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.body figure.ba .ba-tag { position: absolute; top: 12px; font-size: 12.5px; font-weight: 800; background: rgba(26, 26, 24, .7); color: #fff; padding: 3px 10px; border-radius: 999px; pointer-events: none; }
.body figure.ba .ba-tag.l { left: 12px; } .body figure.ba .ba-tag.r { right: 12px; }
.body figure.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.body figure.ba figcaption { font-size: 13.5px; color: var(--ink-soft); margin-top: 7px; }
@media (min-width: 900px) { .body .list { font-size: 18px; } }

/* 휴대폰·태블릿 글 화면: 색 띠 높이를 모든 글 똑같이 (긴 제목은 app.js 가 글씨를 줄여 맞춤) */
@media (max-width: 899px) {
  .article.split .art-top .band { min-height: 360px; display: flex; align-items: center; padding-block: 30px; }
  .article.split .art-top .band-in { width: 100%; }
  .article.split .band h1 { font-size: clamp(26px, 8vw, 34px); line-height: 1.36; }
  .article.split .band h1 span { text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .article.split .band .dek { font-size: 17px; line-height: 1.6; margin-top: 14px; }
  .article.split .band .row { margin-top: 14px; }
}

/* =========================================================
   사진 없는 글 카드: 일기 등 = 줄 노트에 한 구절 · 문예 = 원고지
   ========================================================= */
.pic-text.one { --lh: 2.05em; font-size: clamp(15px, 1.55vw, 21px); background-position: 0 calc(clamp(40px, 5vw, 60px) + 2.05em * .15); }
.pic-text.one .excerpt { top: calc(clamp(40px, 5vw, 60px) + 2.05em * .15); left: clamp(14px, 1.8vw, 24px); right: clamp(14px, 1.8vw, 24px);
  font-family: "Nanum Myeongjo", "AppleMyungjo", "Batang", serif; font-weight: 700; letter-spacing: -.02em; -webkit-line-clamp: 3; line-clamp: 3; }
@media (max-width: 699px) { .pic-text.one .excerpt { -webkit-line-clamp: 3; line-clamp: 3; } }
.pic-text.ms { background: #fbf8f1; box-shadow: inset 0 0 0 1px var(--line); }
.pic-text.ms .ms-grid { position: absolute; left: 7%; right: 7%; top: 46%; transform: translateY(-50%); container-type: inline-size; }
.pic-text.ms .ms-grid b { display: grid; grid-template-columns: repeat(8, 1fr); border: 1.5px solid #e8a58c; border-right-width: 1px; font-weight: inherit; }
.pic-text.ms .ms-grid b + b { margin-top: 5.5cqw; }
.pic-text.ms .ms-grid i { height: 12.3cqw; display: grid; place-items: center; font-style: normal; font-family: "Nanum Myeongjo", "AppleMyungjo", "Batang", serif; font-weight: 700; font-size: 7.2cqw; line-height: 1; color: var(--ink); border-right: 1px solid #f0c3b2; white-space: nowrap; }
.pic-text.ms .ms-grid i:last-child { border-right: 0; }
.pic-text.ms .pic-label { background: #fbf8f1; padding: 2px 4px 0 0; }
/* 글 화면(PC 반반) 왼쪽에 들어갈 때 */
@media (min-width: 900px) {
  .article.split .art-top .hero.pic-text.one { font-size: clamp(20px, 1.9vw, 28px); background-position: 0 calc(clamp(64px, 6vw, 88px) + 2.05em * .15); }
  .article.split .art-top .hero.pic-text.one .excerpt { top: calc(clamp(64px, 6vw, 88px) + 2.05em * .15); -webkit-line-clamp: 4; line-clamp: 4; }
  .article.split .art-top .hero.pic-text.ms .ms-grid { left: 12%; right: 12%; top: 50%; }
}
/* 한 구절 카드: 따옴표+글을 한 덩어리로 세로 가운데 (위치는 blocks.js layoutText 가 --top 으로 정함)
   · 줄 노트 줄은 글줄 바로 밑에 맞춰 위아래로 이어짐 · 따옴표는 첫 줄 바로 위에 붙음 */
.pic-text.one { --top: clamp(64px, 30%, 120px); background-position: 0 var(--top); }
.pic-text.one .excerpt { top: var(--top); }
.pic-text.one .q { bottom: auto; top: calc(var(--top) - .62em); font-size: clamp(34px, 3.6vw, 50px); line-height: 1; }
@media (min-width: 900px) {
  .article.split .art-top .hero.pic-text.one { font-size: clamp(22px, 2.1vw, 30px); background-position: 0 var(--top); }
  .article.split .art-top .hero.pic-text.one .excerpt { top: var(--top); left: clamp(56px, 7vw, 104px); right: clamp(48px, 6vw, 88px); -webkit-line-clamp: 5; line-clamp: 5; }
  .article.split .art-top .hero.pic-text.one .q { left: clamp(52px, 6.6vw, 98px); top: calc(var(--top) - .6em); font-size: clamp(64px, 5.6vw, 88px); }
  /* 노트 왼쪽 여백 선 */
  .article.split .art-top .hero.pic-text.one::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(34px, 4.4vw, 66px); width: 1px; background: rgba(26, 26, 24, .2); }
}

/* =========================================================
   색: 먹색 + 연두 형광펜 (아이콘과 같은 조합)
   ========================================================= */
.top-nav a[aria-current="page"] { color: var(--ink); background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 92%, transparent 92%); }
.top-nav a:hover:not([aria-current="page"]) { color: var(--ink); background: linear-gradient(transparent 58%, rgba(198, 223, 47, .45) 58%, rgba(198, 223, 47, .45) 92%, transparent 92%); }
.logo:hover { color: var(--ink); opacity: .75; }
.tabs button[aria-pressed="true"] { color: var(--ink); border-color: var(--mark); }
.tabs button:hover:not([aria-pressed="true"]) { border-color: rgba(198, 223, 47, .5); }
.readbar .rb-fill { background: var(--mark); }
.pic-text .q { color: var(--ink); }   /* 글 카드 따옴표: 먹색 */
.in-link { color: var(--ink); text-decoration-color: var(--mark); text-decoration-thickness: 3px; text-decoration-skip-ink: none; }
.in-link:hover { background: rgba(198, 223, 47, .35); }
.body ul.list li::marker, .body ol.list li::marker, .body .toc li::marker { color: var(--mark-ink); }
.body details.fold summary::before { color: var(--mark-ink); }
.body h2.sub { text-decoration: underline; text-decoration-color: rgba(198, 223, 47, .7); text-decoration-thickness: .38em; text-underline-offset: -.2em; text-decoration-skip-ink: none; }   /* 소제목에 연두 형광펜 */
.file-card:hover, .link-card:hover { border-color: var(--mark-ink); }
.more-head a:hover, .back:hover, .ov-list ul a:hover, .body figcaption a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ov-list > li.open > button { color: var(--ink); background: linear-gradient(transparent 60%, var(--mark) 60%, var(--mark) 90%, transparent 90%); }
.taglist a:hover { color: var(--ink); border-color: var(--mark-ink); background: rgba(198, 223, 47, .25); }
a:focus-visible, button:focus-visible { outline-color: var(--mark-ink); }

/* =========================================================
   사진 지키기 · 크게 보기
   ========================================================= */
.pic img, .body img, .hero img, .card img, .lb img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(16, 16, 14, .97); display: grid; place-items: center; padding: 56px 16px 64px; }
.lb[hidden] { display: none; }
.lb img { max-width: min(100%, 1600px); max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.lb button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; font-size: 40px; line-height: 1; padding: 8px 14px; opacity: .85; }
.lb button:hover { opacity: 1; }
.lb-x { top: 8px; right: 8px; }
.lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 4px; top: 50%; transform: translateY(-50%); }
.lb-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; text-align: center; color: rgba(255, 255, 255, .85); font-size: 14px; }
html.lb-open { overflow: hidden; }

/* =========================================================
   소개: 사진 · 요즘 · 숫자 · 걸어온 길
   ========================================================= */
.profile-body:has(.intro.has-photo) { max-width: 1080px; }
.intro.has-photo { display: grid; gap: 28px; }
@media (min-width: 860px) {
  .intro.has-photo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .intro.has-photo .ab-photo { position: sticky; top: 24px; }
}
.ab-photo { margin: 0; }
.ab-frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #efede5; }
.ab-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s ease; }
.ab-frame img.off { opacity: 0; }
.ab-photo.multi { cursor: pointer; }
.ab-photo.multi:focus-visible { outline: 2px solid var(--mark-ink); outline-offset: 4px; }
.ab-photo figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 1.4em; }
.ab-dots { display: flex; gap: 6px; flex: none; }
.ab-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .4s, transform .4s; }
.ab-dots i.on { background: var(--ink); transform: scale(1.25); }
.intro-main > section { margin-top: 40px; }
.intro-main h2 { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .08em; display: flex; align-items: baseline; gap: 10px; }
.intro-main h2 small { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); }
/* 요즘 */
.ab-now { border-top: 2px solid var(--ink); padding-top: 16px; }
.ab-now dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.ab-now dt { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.ab-now dd { margin: 3px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
@media (max-width: 520px) { .ab-now dl { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
/* 숫자 */
.ab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-stats div { padding: 18px 4px 16px; text-align: center; }
.ab-stats div + div { border-left: 1px solid var(--line); }
.ab-stats b { font-size: clamp(30px, 4.2vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
  background: linear-gradient(transparent 62%, rgba(198, 223, 47, .7) 62%, rgba(198, 223, 47, .7) 90%, transparent 90%); padding: 0 .06em; }
.ab-stats i { font-style: normal; font-size: 15px; font-weight: 700; margin-left: 2px; }
.ab-stats span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
/* 걸어온 길 */
.ab-tl ol { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.ab-tl ol::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.ab-tl li { position: relative; display: flex; gap: 16px; padding: 7px 0; font-size: 16px; line-height: 1.6; }
.ab-tl li::before { content: ""; position: absolute; left: -22px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); box-sizing: border-box; }
.ab-tl li:last-child::before { background: var(--mark); border-color: var(--ink); }
.ab-tl li b { flex: none; width: 3.2em; font-weight: 800; font-variant-numeric: tabular-nums; }
.ab-tl li span { min-width: 0; }
.intro.has-photo .facts { margin-top: 40px; }
.intro.has-photo .intro-text p:first-child { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; line-height: 1.45; letter-spacing: -.02em; margin-bottom: .7em; }

.ab-stats.n1 { grid-template-columns: minmax(0, 1fr); } .ab-stats.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-stats.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 520px) { .ab-stats.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-stats.n4 div:nth-child(3) { border-left: 0; } .ab-stats.n4 div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* =========================================================
   메인 그림: 하루의 빛 + 사계절 (app.js scene 이 0~1 값을 정함)
   --dawn --morning --sunset --night --lamp / --spring --summer --autumn --winter
   그림 위에 빛 막을 겹치고, 잎·바닥·하늘만 고르는 가림판(images/scene/mask-*.png)으로 계절 색을 입혀요.
   ========================================================= */
.cover-art { --dawn: 0; --morning: 0; --sunset: 0; --night: 0; --lamp: 0; --spring: 0; --summer: 0; --autumn: 0; --winter: 0; overflow: hidden; }
.cover-art > img {
  filter: brightness(calc(1 - .34 * var(--night) - .04 * var(--sunset) + .03 * var(--summer)))
          saturate(calc(1 - .35 * var(--night) + .1 * var(--sunset) + .08 * var(--summer) - .22 * var(--winter)))
          contrast(calc(1 - .22 * var(--night) - .12 * var(--dawn)));   /* 해가 없을 땐 명암을 낮춰 그림자가 흐려지게 */
}
.tod, .tod i, .tod canvas { position: absolute; inset: 0; pointer-events: none; }
.tod i { display: block; opacity: 0; }
.tod canvas { width: 100%; height: 100%; }
.tod-now > img, .tod-now .tod i { transition: opacity 60s linear, filter 60s linear; }
/* 해가 만드는 그림자 (바닥 가림판 안에만), 해를 마주 보는 난간 안쪽 면의 그늘 */
.tod .tod-shade { mix-blend-mode: multiply; opacity: 0; }
.tod-now .tod-shade { transition: opacity 60s linear; }
.tod-face { opacity: calc(var(--sun) * var(--face) * .32) !important; mix-blend-mode: multiply; background: #8f8aa8; }
.mk-leaves { -webkit-mask: url(../images/scene/mask-leaves.png?v=3) 0 0 / 100% 100% no-repeat; mask: url(../images/scene/mask-leaves.png?v=3) 0 0 / 100% 100% no-repeat; }
.mk-ground { -webkit-mask: url(../images/scene/mask-ground.png?v=3) 0 0 / 100% 100% no-repeat; mask: url(../images/scene/mask-ground.png?v=3) 0 0 / 100% 100% no-repeat; }
.mk-sea { -webkit-mask: url(../images/scene/mask-sea.png?v=3) 0 0 / 100% 100% no-repeat; mask: url(../images/scene/mask-sea.png?v=3) 0 0 / 100% 100% no-repeat; }
.mk-blossom { -webkit-mask: url(../images/scene/mask-blossom.png?v=3) 0 0 / 100% 100% no-repeat; mask: url(../images/scene/mask-blossom.png?v=3) 0 0 / 100% 100% no-repeat; }
.mk-floor { -webkit-mask: url(../images/scene/mask-floor.png?v=3) 0 0 / 100% 100% no-repeat; mask: url(../images/scene/mask-floor.png?v=3) 0 0 / 100% 100% no-repeat; }
.mk-face { -webkit-mask: url(../images/scene/mask-face.png?v=3) 0 0 / 100% 100% no-repeat; mask: url(../images/scene/mask-face.png?v=3) 0 0 / 100% 100% no-repeat; }
.mk-sky { -webkit-mask: url(../images/scene/mask-sky.png?v=3) 0 0 / 100% 100% no-repeat; mask: url(../images/scene/mask-sky.png?v=3) 0 0 / 100% 100% no-repeat; }

/* ---- 계절 ---- */
/* 봄: 연분홍 기운 */
.s-spring { opacity: calc(var(--spring) * .14) !important; mix-blend-mode: soft-light; background: linear-gradient(to bottom, #ffd6e4, #fff0f4 60%, #ffd9e6); }
/* 여름: 맑고 진한 하늘 */
.s-summer { opacity: calc(var(--summer) * .3) !important; mix-blend-mode: soft-light; background: #5aa8ff; }
/* 가을: 잎만 노랑·주황·붉게 (위쪽 덩굴은 노랑, 아래 덤불은 주황·적갈) */
.s-autumn { opacity: calc(var(--autumn) * .9) !important; mix-blend-mode: color;
  background: radial-gradient(60% 50% at 25% 15%, #e9a92a, rgba(233, 169, 42, 0) 70%), radial-gradient(45% 40% at 85% 80%, #c9522a, rgba(201, 82, 42, 0) 75%),
    linear-gradient(to bottom, #e3a63a 0%, #d9832e 55%, #b9562c 100%); }
.s-autumn2 { opacity: calc(var(--autumn) * .25) !important; mix-blend-mode: soft-light; background: linear-gradient(to bottom, #ffb36b, #ffd09a 50%, #e8925a); }
/* 벚나무: 그림은 봄(벚꽃). 여름엔 초록 잎, 가을엔 단풍, 겨울엔 눈 덮인 가지처럼 */
.s-bloom-summer { opacity: calc(var(--summer) * .92) !important; mix-blend-mode: color; background: linear-gradient(160deg, #4f8f35, #7bb045 55%, #5f9a3a); }
.s-bloom-autumn { opacity: calc(var(--autumn) * .92) !important; mix-blend-mode: color; background: linear-gradient(160deg, #c8462a, #e0862e 50%, #e9b23a); }
.s-bloom-summer2 { opacity: calc(var(--summer) * .75) !important; mix-blend-mode: multiply; background: linear-gradient(160deg, #7fb35a, #9cc96b 60%, #86bb5e); }
.s-bloom-autumn2 { opacity: calc(var(--autumn) * .7) !important; mix-blend-mode: multiply; background: linear-gradient(160deg, #e3794a, #f0a24e 50%, #f2c35a); }
.s-bloom-winter { opacity: calc(var(--winter) * .9) !important; mix-blend-mode: saturation; background: #888; }
.s-bloom-frost { opacity: calc(var(--winter) * .45) !important; background: #f7f9fc; }
/* 겨울: 잎은 빛이 바래고, 바닥엔 눈, 전체는 차갑게 */
.s-winter-leaf { opacity: calc(var(--winter) * .75) !important; mix-blend-mode: saturation; background: #8a8f8a; }
.s-winter-frost { opacity: calc(var(--winter) * .35) !important; background: #f4f8fb; }
.s-winter-ground { opacity: calc(var(--winter) * .78) !important; background: linear-gradient(to bottom, #f7fafd, #ffffff); }
.s-winter { opacity: calc(var(--winter) * .4) !important; mix-blend-mode: soft-light; background: linear-gradient(to bottom, #9fb8d8, #dfe9f5 55%, #b9c8dc); }

/* ---- 하루 ---- */
.tod-dawn { opacity: var(--dawn) !important; mix-blend-mode: soft-light; background: linear-gradient(to bottom, #7d6fb8 0%, #e9a0b3 48%, #ffd3b0 55%, #8a86b8 100%); }
.tod-morning { opacity: calc(var(--morning) * .55) !important; mix-blend-mode: screen; background: radial-gradient(120% 80% at 28% 22%, rgba(255, 250, 230, .55), rgba(255, 250, 230, 0) 70%); }
.tod-sunset { opacity: var(--sunset) !important; mix-blend-mode: soft-light;
  background: linear-gradient(to bottom, #5e4596 0%, #ff7a52 34%, #ffae52 48%, #ff9466 56%, #b8603f 100%); }
.tod-sunset2 { opacity: calc(var(--sunset) * .5) !important; mix-blend-mode: multiply;
  background: radial-gradient(30% 40% at 88% 46%, #ffe0b0, rgba(255, 224, 176, 0) 70%), linear-gradient(to bottom, #f6a3a0 0%, #ffbf8f 38%, #ffd9ae 49%, #f0a888 60%, #d99476 100%); }
.tod-night { opacity: calc(var(--night) * .72) !important; mix-blend-mode: multiply; background: linear-gradient(to bottom, #1b2350 0%, #2a3566 50%, #232a4a 100%); }
/* 해: 시각에 따라 하늘을 가로질러 움직임 (하늘 가림판 안에서만 보여 나뭇잎·산 뒤로 숨음) */
.cover-art { --sx: 22%; --sy: 40%; --sr: 24px; --sc: 255, 248, 225; --sun: 0; --low: 0; --lx: .5; }
.tod-sun { opacity: var(--sun) !important; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--sx) var(--sy), rgb(var(--sc)) 0, rgb(var(--sc)) var(--sr), rgba(var(--sc), .55) calc(var(--sr) * 1.35),
    rgba(var(--sc), .22) calc(var(--sr) * 3.2), rgba(var(--sc), 0) calc(var(--sr) * 9)); }
/* 바다 위 햇빛 길 (해 바로 아래, 해가 낮을수록 길고 진하게) */
.tod-glint { opacity: calc(var(--sun) * (.35 + .5 * var(--low))) !important; mix-blend-mode: screen;
  background: radial-gradient(calc(var(--sr) * 2.4) calc(var(--sr) * 9) at var(--sx) 58%, rgba(255, 246, 220, .8), rgba(255, 236, 200, 0)); }
/* 빛이 오는 쪽은 환하게, 반대쪽은 살짝 어둡게 (해의 방향을 느끼게) */
.tod-light { opacity: calc(var(--sun) * .6) !important; mix-blend-mode: soft-light;
  background: radial-gradient(90% 120% at var(--sx) var(--sy), rgba(255, 238, 205, .9), rgba(255, 238, 205, 0) 70%); }
.tod-dir { opacity: calc(var(--sun) * .55) !important; mix-blend-mode: multiply;
  background: linear-gradient(90deg, rgba(70, 70, 110, calc(.28 * var(--lx))) 0%, rgba(70, 70, 110, 0) 45%, rgba(70, 70, 110, 0) 55%, rgba(70, 70, 110, calc(.28 * (1 - var(--lx)))) 100%); }
/* 달: 파비콘처럼 초승달 + 천천히 반짝이는 연두 별 (밤에만) */
.tod-moon { opacity: var(--night) !important; mix-blend-mode: screen; background:radial-gradient(3.6% 6% at 55.2% 14.8%, rgba(255,244,215,.30), rgba(220,230,255,.10) 55%, rgba(220,230,255,0) 100%) !important}
.tod-moon::before{content:"";position:absolute;left:calc(56% - 2.3%);top:calc(14% - 4.1%);width:4.6%;aspect-ratio:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Ccircle cx='59' cy='38' r='27' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='44' cy='48' r='32' fill='%23fbf3dc' mask='url(%23m)'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 3px rgba(255,248,220,.85)) drop-shadow(0 0 10px rgba(255,240,200,.45))}
.tod-moon::after{content:"";position:absolute;left:calc(58.4% - .85%);top:calc(18.4% - 1.5%);width:1.7%;aspect-ratio:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 Q57.92 42.08 94 50 Q57.92 57.92 50 94 Q42.08 57.92 6 50 Q42.08 42.08 50 6Z' fill='%23e4f27a'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 5px rgba(240,255,190,.85));animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.78)}}
/* 벽등·창문·등대·마을 불빛 */
.tod-lamp { opacity: var(--lamp) !important; mix-blend-mode: screen;
  background:
    radial-gradient(6% 10% at 10% 34.2%, rgba(255, 214, 140, .95), rgba(255, 190, 110, .35) 45%, rgba(255, 170, 90, 0) 100%),
    radial-gradient(18% 30% at 10% 41%, rgba(255, 190, 120, .3), rgba(255, 190, 120, 0) 70%),
    radial-gradient(4% 30% at 1.8% 48%, rgba(255, 200, 130, .55), rgba(255, 200, 130, 0) 80%),
    radial-gradient(.8% 1.3% at 65.8% 51.5%, rgba(255, 220, 150, .85), rgba(255, 220, 150, 0) 100%),
    radial-gradient(.8% 1.3% at 77.2% 52.1%, rgba(255, 220, 150, .8), rgba(255, 220, 150, 0) 100%),
    radial-gradient(.8% 1.3% at 80.5% 53.7%, rgba(255, 220, 150, .8), rgba(255, 220, 150, 0) 100%),
    radial-gradient(.8% 1.3% at 84.4% 52.6%, rgba(255, 220, 150, .75), rgba(255, 220, 150, 0) 100%),
    radial-gradient(.8% 1.3% at 87.7% 54%, rgba(255, 220, 150, .75), rgba(255, 220, 150, 0) 100%),
    radial-gradient(.8% 1.3% at 92.5% 50.5%, rgba(255, 220, 150, .7), rgba(255, 220, 150, 0) 100%); }
/* 등대 불빛: 밤에 천천히 깜빡임 */
.tod-beacon { opacity: var(--lamp) !important; mix-blend-mode: screen;
  background: radial-gradient(1.3% 2.3% at 63.73% 45.16%, rgba(255, 246, 205, 1), rgba(255, 246, 205, 0) 100%), radial-gradient(5% 4% at 63.73% 45.16%, rgba(255, 240, 190, .45), rgba(255, 240, 190, 0) 100%); }
.tod-beacon::after { content: ""; position: absolute; inset: 0; background: radial-gradient(14% 2.6% at 63.73% 45.16%, rgba(255, 244, 200, .55), rgba(255, 244, 200, 0) 100%); animation: beacon 6s ease-in-out infinite; }
@keyframes beacon { 0%, 100% { opacity: .15; } 45% { opacity: 1; } 60% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .tod-now > img, .tod-now .tod i, .tod-now .tod-shade { transition: none; } .tod .tod-fall { display: none; } .tod-beacon::after, .tod-moon::after { animation: none; } }
/* 휴대폰: 가로로 긴 그림이 작게 보이지 않게 크게 키워, 벽등·화분·강아지·탁자부터 바다까지 보여 줌 */
@media (max-width: 700px) {
  .cover { overflow: hidden; }
  .cover-art { width: 150%; margin-left: -11%; }
}
}

/* 검색용 페이지(p/글이름.html)에 미리 들어 있는 글 — 화면이 준비되기 전 잠깐, 또는 자바스크립트 없이 볼 때 */
.seo-article { max-width: 760px; margin: 40px auto; padding: 0 20px; line-height: 1.8; }
.seo-article h1 { font-size: 28px; line-height: 1.35; margin: 8px 0 12px; }
.seo-article img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.seo-article figure { margin: 18px 0; }