/* blog.gomgom.xyz — 곰곰 리더 톤 사본.
   원본: theme/smartcompanytheme/css/gomgom_compact_tokens.css, gomgom_compact_reader.css
   링크가 아니라 사본이다. 앱 UI가 바뀌어도 지난 일기는 그때 화면으로 남는다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --bg:        #EEE9E3;   /* app canvas */
  --card:      #FFFFFF;   /* reader bg */
  --ink:       #111111;   /* reader text */
  --muted:     rgba(17,17,17,.56);
  --subtle:    rgba(17,17,17,.38);
  --rule:      rgba(17,17,17,.10);
  --gold:      #B49C72;   /* section title */
  --accent:    #A0B058;   /* logo / active */
  --radius:    18px;
  --shadow:    0 12px 34px rgba(0,0,0,.05);
  --sans:      "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #171614;
    --card:   #111111;
    --ink:    #F7F7F7;
    --muted:  rgba(255,255,255,.62);
    --subtle: rgba(255,255,255,.42);
    --rule:   rgba(255,255,255,.14);
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 머리 ───────────────────────────────── */
.site {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 20px 26px;
  text-align: center;
}
.site-name {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}
.site-tagline {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: -.01em;
}

/* ── 타임라인 ───────────────────────────── */
.wrap { max-width: 560px; margin: 0 auto; padding: 0 20px 40px; }

.entry {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 24px 28px;
  margin: 0 0 18px;
}
.entry.is-future { opacity: .5; outline: 1px dashed var(--rule); }

.entry-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
}
.entry-date {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--gold);
  text-decoration: none;
}
.entry-ep {
  font-size: 10px;
  letter-spacing: .10em;
  color: var(--subtle);
  margin-left: auto;
}
.entry-flag {
  font-size: 10px;
  letter-spacing: .10em;
  color: var(--accent);
}

.entry-body {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.94;
  letter-spacing: -.014em;
}
.entry-body p { margin: 0 0 1.32em; }
.entry-body p:last-child { margin-bottom: 0; }
.entry-body blockquote {
  margin: 0 0 1.32em;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  color: var(--muted);
}
.entry-body strong { font-weight: 600; }

.entry-shot { margin: 22px 0 0; }
.entry-shot img {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--rule);
}

/* ── 개별 글 ────────────────────────────── */
.entry.is-single { padding: 32px 24px 34px; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 2px 0;
  font-size: 11px;
  letter-spacing: .06em;
}
.pager a { color: var(--muted); text-decoration: none; }
.pager-next { margin-left: auto; }

/* ── 꼬리 ───────────────────────────────── */
.site-foot {
  max-width: 560px;
  margin: 0 auto;
  padding: 34px 20px 70px;
  text-align: center;
  font-size: 12px;
  color: var(--subtle);
  border-top: 1px solid var(--rule);
}
.site-foot p { margin: 0 0 6px; }
.site-foot a { color: var(--gold); text-decoration: none; }

.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 40px 0; }

/* ── 마이크로블로그 장치 ─────────────────── */
.season {
  display: flex; align-items: center; gap: 7px;
  max-width: 560px; margin: 0 auto; padding: 0 4px 22px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); display: block; }
.dot.is-on { background: var(--gold); }
.season-count { margin-left: auto; font-size: 10px; letter-spacing: .12em; color: var(--subtle); }

.entry-time { font-size: 10px; letter-spacing: .06em; color: var(--subtle); }
.entry-mark {
  display: block; margin: 18px 0 0; text-align: right;
  font-size: 12px; color: var(--subtle); text-decoration: none;
}
/* 시안 B — 마이크로블로그 문법.
   카드를 걷어내고 한 장의 종이에 날짜만으로 끊는다.
   글 길이가 제각각인 게 그대로 보이는 게 이 형식의 핵심이다. */

:root { --bg: #FAF5EF; }                     /* 종이 한 장 */
@media (prefers-color-scheme: dark) { :root { --bg: #111111; --card: #111111; } }

.site { padding: 64px 20px 30px; text-align: left; max-width: 620px; }
.site-name { font-size: 14px; letter-spacing: -.005em; }
.site-tagline { font-size: 12px; }

.wrap { max-width: 620px; padding: 0 20px 30px; }
.season { max-width: 620px; padding: 0 20px 30px; }

.entry {
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--rule);
  padding: 30px 0 34px;
  margin: 0;
  position: relative;
}
.entry.is-future { opacity: .38; outline: none; }

.entry-head { gap: 8px; margin: 0 0 12px; }
.entry-date { font-size: 10px; letter-spacing: .12em; }
.entry-time { margin-left: 2px; }
.entry-ep { margin-left: auto; }

.entry-body { font-size: 16px; line-height: 1.88; }
.entry-body p { margin: 0 0 1.15em; }

/* 스샷은 종이 밖으로 살짝 밀어낸다 — 첨부한 티가 나야 한다 */
.entry-shot { margin: 20px -6px 0; }
.entry-shot img { border-radius: 6px; }

.entry-mark { margin: 14px 0 0; opacity: .55; }

/* .wrap 안에 들어 있다. 바깥 폭·여백을 또 잡으면 본문 열과 어긋난다. */
.pager { max-width: none; margin: 22px 0 0; padding: 0; }
.site-foot { max-width: 620px; text-align: left; padding-top: 30px; }

/* 넓은 화면에서는 날짜를 왼쪽 여백으로 뺀다 */
@media (min-width: 900px) {
  .site, .wrap, .season, .site-foot { max-width: 760px; }
  .entry-head {
    position: absolute;
    left: -150px;
    width: 132px;
    display: block;
    text-align: right;
    margin: 4px 0 0;
  }
  .entry-head > * { display: block; margin: 0 0 4px; }
  .entry-ep { margin-left: 0; }
  .wrap { padding-left: 170px; }
}

/* ── 스샷 보완 ───────────────────────────
   1080×1920을 그대로 흘리면 글보다 이미지가 커진다.
   폭을 본문보다 좁혀 첨부물처럼 두고, 높이를 잘라 크롭한 스샷처럼 보이게 한다.
   전체는 그날 글에서 본다 — 타임라인의 리듬을 지키면서 개별 글로 밀어주는 셈. */
.entry-shots { display: flex; gap: 10px; margin: 20px 0 0; }
.entry-shots.is-pair .entry-shot { flex: 1 1 0; }

.entry-shot {
  margin: 0;
  flex: 0 0 62%;
  max-width: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--rule);
}
.entry-shot a { display: block; }
.entry-shot img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: top;      /* 아래(입력창)부터 잘린다 — 사람이 자르는 자리와 같다 */
  border: 0;
  border-radius: 0;
}
/* 잘린 티를 숨기지 않고 부드럽게 끊는다 */
.entry-shot::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.entry-shots.is-pair .entry-shot { flex: 1 1 0; max-width: none; }
.entry-shots.is-pair .entry-shot img { max-height: 300px; }

/* 개별 글에서는 자르지 않는다 */
.entry.is-single .entry-shot { flex: none; max-width: none; }
.entry.is-single .entry-shot img { max-height: none; object-fit: fill; }
.entry.is-single .entry-shot::after { display: none; }
.entry.is-single .entry-shot { margin: 20px 0 0; }

/* 넓은 화면: 제목·점·꼬리도 본문 열에 맞춘다. 축이 하나여야 한다. */
@media (min-width: 900px) {
  .site, .season, .site-foot { padding-left: 190px; }
  .wrap { padding-left: 190px; }
  .entry-head { left: -170px; width: 148px; }
  .site { padding-top: 76px; }
}

/* ── 스샷 비율 고정 ──────────────────────
   img 의 width/height 속성은 자리를 미리 잡아 주지만, 작성자 CSS 가 width 만 잡으면
   height 힌트가 남아 세로로 늘어날 수 있다. height 를 명시해 그 경로를 끊는다.
   타임라인은 max-height 가 가려 줬을 뿐 같은 문제였다. */
.entry-shot img { height: auto; }

/* 하루치 화면에서 스샷이 화면 폭을 다 먹지 않게.
   원본이 폰 스크린샷이라 폰보다 크게 띄울 이유가 없다. */
.entry.is-single .entry-shot { max-width: 360px; }
.entry.is-single .entry-shot img { object-fit: contain; }

/* ── 스샷 크게 보기 ──────────────────────
   하루치 화면의 스샷은 360px 로 묶여 있어 PC 에서 읽히지 않는다.
   누르면 원본 폭(1080)으로 펼치고 세로로 스크롤한다. 라이브러리는 쓰지 않는다. */
.entry-shot.is-zoomable { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  padding: 20px;
  background: rgba(23, 22, 20, .9);
  cursor: zoom-out;
  overscroll-behavior: contain;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  width: min(1080px, 100%);
  max-width: none;
  max-height: none;
  height: auto;
  border: 0;
  border-radius: 8px;
  object-fit: contain;
}