/* 우리 동네 텃밭 — E6 '반반' 디자인
   왼쪽 색 기둥(날짜·절기, 상세에서는 한 해 달력) + 오른쪽 종이 위 본문.
   그림·아이콘 없이 색과 글자(Pretendard)만 쓴다. */
:root {
  --bg: #f6f4ef;
  --ink: #22201c;
  --sub: #6f6c65;
  --muted: #85827a;
  --faint: #b9b5ac;
  --line: #e3e0d9;
  --on-side: #fbf9f4;
  --side: #8b9579;       /* 기둥 색: 화면마다 JS가 바꾼다 */
  --side-w: 92px;
  --rain-bg: #e3e8ee; --rain: #3d5873;
  --frost-bg: #f1e3dc; --frost: #8a3f27;
  --heat-bg: #f3ead6; --heat: #7a5a1c;
  --mark: #efe3c4;
  --card: #fffdf8;
  --soil-bg: #efe8de; --soil-ink: #6b4f37; --soil-line: #e2d8c9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1b19; --ink: #ebe8e1; --sub: #b5b0a6; --muted: #9a958b; --faint: #67635c; --line: #33332f;
    --rain-bg: #253140; --rain: #b7cbe0; --frost-bg: #3a2620; --frost: #f0b9a3; --heat-bg: #352d1c; --heat: #e6c98a;
    --mark: #4a4231; --card: #242422;
    --soil-bg: #2c2620; --soil-ink: #dcc3a8; --soil-line: #3d342b;
  }
  .side { filter: brightness(.82); }
}
@media (max-width: 350px) { :root { --side-w: 76px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 휴대폰에서 화면이 옆으로 밀리거나 두 번 눌러 확대되지 않게 (손가락으로 벌려 확대하는 건 그대로 된다) */
html, body { overflow-x: clip; }
button, a, input, select { touch-action: manipulation; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  font-size: 15px; line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; }
.main { padding: max(24px, env(safe-area-inset-top)) 20px env(safe-area-inset-bottom); min-width: 0; }

/* ---------- 왼쪽 기둥 ---------- */
.side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--side); color: var(--on-side); transition: background-color .4s;
  display: flex; flex-direction: column; align-items: center;
  padding: max(24px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
}
.side small { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-align: center; }
.s-date { font-size: 46px; font-weight: 100; line-height: 1; letter-spacing: -.04em; text-align: center; }
.s-date small { margin-top: 4px; }
.s-term { writing-mode: vertical-rl; margin-top: 30px; font-size: 22px; font-weight: 200; letter-spacing: .1em; }
.s-term small { display: inline; font-size: 12px; font-weight: 400; letter-spacing: .05em; margin-inline-start: 10px; opacity: .85; }
.s-temp { margin-top: auto; font-size: 30px; font-weight: 200; text-align: center; line-height: 1.2; }
.s-temp small { font-size: 11px; }
.s-back { color: var(--on-side); font-size: 13px; font-weight: 500; display: flex; align-items: center; padding: 6px 8px; margin-bottom: 18px; max-width: 100%; }
.s-back::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); margin-right: 5px; flex: none; }
.s-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-home { flex: none; width: 56px; height: 56px; margin-top: auto; border-radius: 50%; display: grid; place-items: center; text-align: center; color: var(--on-side); font-size: 15px; font-weight: 600; background: rgba(251, 249, 244, .16); border: 1.5px solid rgba(251, 249, 244, .75); }
.s-home:active { background: rgba(251, 249, 244, .3); }
.key + .s-home { margin-top: 14px; }
.s-word { writing-mode: vertical-rl; font-size: 30px; font-weight: 200; letter-spacing: .08em; margin-top: 8px; }
.s-sub { margin-top: 14px; font-size: 12px; font-weight: 500; opacity: .85; }
.s-word small { display: inline; font-size: 12px; font-weight: 500; margin-inline-start: 12px; opacity: .85; }

/* 상세: 기둥 = 한 해 달력 */
.yr { list-style: none; margin: 0; padding: 0; width: 100%; }
.yr li { display: grid; grid-template-columns: 30px 1fr; align-items: center; height: min(34px, 5.4vh); padding-right: 16px; font-size: 12px; position: relative; }
.yr li span { text-align: right; padding-right: 8px; opacity: .7; }
.yr li i { height: 100%; position: relative; }
.yr li.h i::before { content: ""; position: absolute; inset: 0; border-left: 2px solid var(--on-side); border-right: 2px solid var(--on-side); background: rgba(251, 249, 244, .22); }
.yr li.h.first i::before { border-top: 2px solid var(--on-side); top: 4px; }
.yr li.h.last i::before { border-bottom: 2px solid var(--on-side); bottom: 4px; }
.yr li.p i::after { content: ""; position: absolute; left: 5px; right: 5px; top: 28%; bottom: 28%; background: var(--on-side); }
.yr li.now span { opacity: 1; font-weight: 700; }
.yr li.now::after { content: "오늘"; position: absolute; right: 2px; font-size: 10px; font-weight: 600; background: var(--ink); color: var(--bg); padding: 1px 4px; }
.key { margin-top: auto; font-size: 11px; line-height: 1.8; padding: 0 14px; align-self: stretch; }
.key i { display: inline-block; width: 12px; height: 8px; margin-right: 5px; background: var(--on-side); }
.key i.h { background: rgba(251, 249, 244, .22); border: 1.5px solid var(--on-side); }

/* ---------- 본문 공통 ---------- */
.meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 500; color: var(--sub); }
.place { font-size: 13px; font-weight: 500; border-bottom: 1px solid currentColor; padding: 4px 0 1px; color: var(--ink); }
.sh { font-size: 12.5px; font-weight: 600; margin: 30px 0 6px; display: flex; justify-content: space-between; gap: 10px; }
.sh span { font-weight: 400; color: var(--muted); }
.note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.empty { padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* 홈 */
.headline { font-size: 28px; font-weight: 200; line-height: 1.32; letter-spacing: -.035em; margin: 26px 0 0; }
.alert { margin-top: 12px; font-size: 13px; line-height: 1.5; padding: 10px 12px; background: var(--frost-bg); color: var(--frost); }
.alert b { font-weight: 600; display: block; }
.alert.rain { background: var(--rain-bg); color: var(--rain); }
.alert.heat { background: var(--heat-bg); color: var(--heat); }
.filters { display: flex; gap: 14px; margin: 26px -20px 0 0; padding-right: 20px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; font-size: 13.5px; color: var(--muted); padding: 6px 0; }
.filters button.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -1.5px 0 var(--ink); }

.it { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 11px 0; border-top: 1px solid var(--line); }
.it i { height: 34px; }
.it b { font-size: 17px; font-weight: 500; display: block; overflow-wrap: anywhere; }
.it em { font-style: normal; font-size: 12px; color: var(--muted); display: block; }
.it small { font-size: 12px; color: var(--muted); text-align: right; }
.it.dim b, .it.dim i { opacity: .45; }
.it.stop em { color: var(--frost); }
.names { font-size: 15px; line-height: 1.9; margin: 8px 0 0; }
.names button { border-bottom: 1px solid var(--line); line-height: 1.3; }
.names .more { font-weight: 600; border-bottom-color: var(--ink); }

.search { margin-top: 30px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 300; padding: 12px 0; outline: none; border-radius: 0; }
.search input::placeholder { color: var(--muted); }
.search button { font-size: 13px; font-weight: 600; padding: 8px 0 8px 8px; }

.foot { padding: 40px 0 36px; font-size: 11px; color: var(--muted); line-height: 1.8; }
.foot p { margin: 2px 0; }

/* ---------- 작물 상세 ---------- */
.ctitle { font-size: 52px; font-weight: 100; letter-spacing: -.05em; line-height: 1.05; margin: 18px 0 8px; }
.ctitle.long { font-size: 40px; }
.ctitle.longer { font-size: 32px; letter-spacing: -.03em; }
.tags { font-size: 12.5px; color: var(--muted); }
/* 지금 한 문장 + 지금 볼 카드 + 다른 때 볼 것(접기) */
.say { margin: 18px 0 0; font-size: 24px; font-weight: 200; line-height: 1.4; letter-spacing: -.03em; }
.say b { font-weight: 500; color: var(--crop, var(--ink)); }
.card { margin-top: 16px; background: var(--card); border-left: 3px solid var(--crop, var(--ink)); padding: 14px 14px 12px; scroll-margin-top: 16px; }
.card + .card { margin-top: 10px; }
.card h3, .later-body h3 { margin: 0 0 8px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.card .k, .later-body .k { font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.card > .k:first-of-type, .later-body > .k:first-child { margin-top: 0; }
.card p, .later-body p { margin: 0; font-size: 15px; line-height: 1.65; }
.card .big, .later-body .big { font-size: 22px; font-weight: 200; letter-spacing: -.03em; }
.card .muted, .later-body .muted { color: var(--muted); }
.steps { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.steps li + li { margin-top: 6px; }
.later { margin-top: 10px; }
.later .sh { padding-bottom: 6px; border-bottom: 1px solid var(--ink); margin-bottom: 0; }
.later-row { border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.later-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 13px 0; font-size: 16px; }
.later-head.go { border-bottom: 1px solid var(--line); }
.later-note { display: flex; align-items: center; gap: 8px; }
.later-note small { font-size: 12.5px; color: var(--muted); }
.chev { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin-bottom: 3px; transition: transform .2s; }
.later-head[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-bottom: -3px; }
.later-head.go .chev { transform: rotate(-45deg); margin: 0; }
.later-body { padding: 0 0 14px; }
.yr li.tap { cursor: pointer; }
.yr li.tap:active i { opacity: .7; }
.fact { padding: 12px 0; border-top: 1px solid var(--line); }
.fact .k { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.fact p { margin: 0; font-size: 15px; line-height: 1.65; }
.fact .big { font-size: 24px; font-weight: 200; letter-spacing: -.03em; }
.fact .muted { color: var(--muted); }
.probs { margin: 0; padding: 0; list-style: none; }
.probs li + li { margin-top: 10px; }
.probs b { font-weight: 500; font-size: 15px; display: block; }
.probs span { display: block; font-size: 13px; color: var(--sub); line-height: 1.55; }
.sources { margin-top: 16px; font-size: 12px; color: var(--muted); }
.sources summary { cursor: pointer; list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
.sources ul { margin: 8px 0 0; padding-left: 16px; word-break: break-all; }

/* 먹는 법 */
.utitle { font-size: 34px; font-weight: 200; letter-spacing: -.04em; line-height: 1.2; margin: 18px 0 0; }
.recipe { padding: 16px 0 6px; border-top: 1px solid var(--line); }
.recipe h3 { margin: 0; font-size: 19px; font-weight: 500; }
.recipe .rm { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; }
.recipe .ing { font-size: 13.5px; color: var(--sub); margin: 0 0 10px; }
.recipe .ing b { font-weight: 600; color: var(--ink); margin-right: 6px; }
.recipe ol { margin: 0; padding-left: 20px; }
.recipe ol li + li { margin-top: 4px; }

/* 검색 */
.result { padding: 14px 0; border-top: 1px solid var(--line); }
.result .who { display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 600; }
.result .who::before { content: ""; width: 6px; height: 14px; background: var(--c, var(--ink)); flex: none; align-self: center; }
.result .who small { font-size: 12px; font-weight: 400; color: var(--muted); }
.result p { margin: 6px 0 0; }
.result mark { background: var(--mark); color: inherit; padding: 0 2px; }
.result .more { margin-top: 6px; font-size: 12.5px; color: var(--sub); border-bottom: 1px solid var(--line); }

/* 위치 고르기 */
.sheet { border: 0; border-left: 10px solid var(--side); padding: 24px 22px 20px; width: min(92vw, 400px); background: var(--bg); color: var(--ink); }
.sheet::backdrop { background: rgba(20, 20, 18, .45); }
.sheet h2 { margin: 0 0 18px; font-size: 24px; font-weight: 200; letter-spacing: -.03em; }
.sheet label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.sheet select { display: block; width: 100%; margin-top: 4px; min-height: 44px; font: inherit; font-size: 16px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); }
.sheet .note { margin: 0 0 18px; }
.sheet-actions { display: flex; gap: 10px; }
.sheet-actions button { flex: 1; min-height: 46px; text-align: center; font-size: 14px; font-weight: 600; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); }
.sheet-actions .ghost { background: transparent; color: var(--ink); border-color: var(--line); }

/* ---------- 흙 돌보기 ---------- */
.soilbox { margin-top: 18px; background: var(--soil-bg); padding: 2px 14px 4px; }
.soilbox .sh { margin: 12px 0 4px; color: var(--soil-ink); }
.soilbox .it { border-top-color: var(--soil-line); }
.soilbox .empty { border-top-color: var(--soil-line); font-size: 13.5px; }
.soilbox .more { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 0 9px; border-top: 1px solid var(--soil-line); font-size: 13.5px; font-weight: 500; color: var(--soil-ink); }
.chev.go { transform: rotate(-45deg); margin: 0; }
.lead { font-size: 17px; font-weight: 300; line-height: 1.6; margin: 12px 0 0; }
.soil-now { margin-top: 16px; background: var(--soil-bg); border-left: 3px solid var(--crop, var(--ink)); padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.soil-now b { display: block; font-weight: 600; color: var(--soil-ink); }
.soil-now span { display: block; }
.guides { margin-top: 18px; }
.g { display: block; width: 100%; padding: 14px 0; border-top: 1px solid var(--line); }
.g .gt { display: flex; align-items: center; gap: 8px; }
.g .gt b { font-size: 19px; font-weight: 400; letter-spacing: -.02em; }
.g .gt em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #fbf9f4; background: #8a6a4c; padding: 1px 6px; }
.g .gt .chev { margin-left: auto; }
.g .gs { display: block; font-size: 13px; color: var(--sub); margin-top: 3px; line-height: 1.5; }
.it.past b, .it.past i:first-child { opacity: .55; }
.it i.chev { height: 7px; width: 7px; }

.all-link { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 500; }
.all-link small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.all-link small::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); vertical-align: 1px; }
.all-link[hidden] { display: none; }