:root {
  --bg: #f5f6f1;
  --surface: #fff;
  --ink: #18261c;
  --ink-2: #4c5a50;
  --ink-3: #6a776e;
  --line: #dde2d8;
  --field: #b9c2b6;
  --green: #24572f;
  --green-2: #3c7d4a;
  --green-soft: #e4efe2;
  --amber: #8a5300;
  --amber-soft: #fbeed6;
  --blue: #1f4f86;
  --blue-soft: #e3edf8;
  --red: #a82a22;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
[lang="th"] { line-height: 1.7; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
small { color: var(--ink-3); font-size: 13px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--green-2); outline-offset: 2px; }

/* 상단 */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--green); color: #fff;
}
.brand { font-weight: 700; font-size: 17px; }
.top nav { display: flex; gap: 4px; }
.top nav a { padding: 8px 12px; border-radius: 8px; font-size: 15px; opacity: .85; }
.top nav a.on { background: rgba(255, 255, 255, .16); opacity: 1; font-weight: 600; }

main { max-width: 1180px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
main.single { max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
main.center { min-height: 80dvh; display: grid; place-items: center; }
.home .left, .home .right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.home .right { margin-top: 20px; }
@media (min-width: 900px) {
  .home { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .home .left { position: sticky; top: 72px; max-height: calc(100dvh - 88px); overflow-y: auto; padding: 2px; }
  .home .right { margin-top: 0; }
}

/* 공통 요소 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.danger { color: var(--red); border-color: var(--red); }
.btn.small { min-height: 38px; padding: 4px 12px; font-size: 14px; }
.btn.wide { width: 100%; }
.link { border: 0; background: none; color: var(--green); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 4px; }
.hint { font-size: 14px; color: var(--ink-2); }
.empty { padding: 24px 8px; text-align: center; color: var(--ink-3); }

input, select, textarea {
  width: 100%; min-height: 46px; padding: 9px 12px;
  border: 1px solid var(--field); border-radius: 10px; background: #fff; color: var(--ink);
  font: inherit; font-size: 16px;
}
textarea { resize: vertical; }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--green); }
.missing { border-color: var(--amber); background: var(--amber-soft); }
.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.check { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; align-items: start; }
.pair { display: grid; grid-template-columns: 1fr 76px; gap: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.actions .btn { flex: 1 1 auto; }

/* 입력창 */
.composer { display: flex; gap: 8px; align-items: stretch; }
.composer textarea { flex: 1; min-height: 64px; font-size: 17px; border: 2px solid var(--green-2); }
.composer .btn { min-width: 72px; }
.composer-hint { font-size: 13px; color: var(--ink-3); margin-top: -4px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip { flex: none; padding: 6px 12px; min-height: 38px; border: 1px solid var(--field); border-radius: 999px; background: var(--surface); font: inherit; font-size: 14px; cursor: pointer; }

/* 확인 카드 */
.confirm form { display: flex; flex-direction: column; gap: 12px; }
.confirm { border: 2px solid var(--green-2); }
.card-title { display: flex; flex-direction: column; gap: 2px; }
.card-title h2 { font-size: 18px; }
.raw { font-style: italic; }
.said { color: var(--amber); }
.sub { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--bg); border-radius: 10px; }
.sub-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mat-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 64px auto; gap: 6px; align-items: start; }
.mat-pick { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.none { padding: 4px 0; }
.thinking { color: var(--ink-2); text-align: center; padding: 24px; }
.message p { font-size: 16px; }
.back { display: block; margin-top: 2px; padding: 6px 10px; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.ok { color: var(--green); }
.stale { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); font-size: 14px; }

/* 기록 목록 */
.feed { display: flex; flex-direction: column; gap: 14px; }
.feed-head, .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feed-head h2, .sec-head h2 { font-size: 17px; }
.feed-head select { width: auto; min-width: 140px; }
.sec-head { margin-bottom: 8px; }
.day h3 { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; font-weight: 600; }
.rows { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card .rows { border: 0; border-radius: 0; }
.row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 14px;
  border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.card .row { padding-left: 0; padding-right: 0; }
.row:last-child { border-bottom: 0; }
.row:disabled { cursor: default; opacity: 1; }
.row.event { cursor: default; }
.row-main { display: flex; flex-direction: column; min-width: 0; }
.row-main small { display: block; }
.row-main .note { color: var(--ink-2); }
.tag { flex: none; min-width: 48px; padding: 2px 8px; border-radius: 999px; text-align: center; font-size: 13px; font-weight: 600; background: var(--green-soft); color: var(--green); }
.tag.harvest { background: var(--green); color: #fff; }
.tag.order { background: var(--blue-soft); color: var(--blue); }
.tag.cycle { background: var(--amber-soft); color: var(--amber); }

/* 관리 */
.account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.account .spacer { flex: 1; }
.login { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.login h1 { font-size: 22px; color: var(--green); }

dialog#sheet { width: min(560px, 100% - 24px); max-height: 90dvh; padding: 0; border: 0; border-radius: 16px; }
dialog#sheet::backdrop { background: rgba(15, 25, 18, .45); }
.sheet-form { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.sheet-form h2 { font-size: 18px; }

#toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 100;
  max-width: 480px; margin: 0 auto; padding: 12px 14px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 14px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
#toast.show { opacity: 1; }
#toast.error { background: var(--red); }

/* 2단계: 판매·지출·손익 */
.tag.sale { background: #e3f1ea; color: #1b6b45; }
.tag.expense { background: #f6e6e4; color: #8f2c22; }
.answer p { white-space: pre-wrap; font-size: 16px; line-height: 1.7; }
.warn-card { background: var(--amber-soft); border-color: #eed8ad; color: var(--amber); }
.warn-card ul { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.hint.warn { color: var(--amber); }
main.single.wide { max-width: 1000px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.stat { padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.stat span { display: block; font-size: 13px; color: var(--ink-3); }
.stat strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.cat-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.cat-list b { color: var(--ink); font-weight: 600; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table.pnl { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.pnl th, table.pnl td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.pnl thead th { font-size: 12px; color: var(--ink-3); font-weight: 600; }
table.pnl tbody th { text-align: left; position: sticky; left: 0; background: var(--surface); }
table.pnl thead th:first-child { text-align: left; }

/* 3단계: 보고서 */
.report-tools { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.two-col { display: grid; gap: 12px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.small-table { min-width: 420px; }
table.pnl td.best { font-weight: 700; background: var(--green-soft); }
table.pnl a { color: var(--green); text-decoration: underline; }
.hbar { display: grid; grid-template-columns: 88px 1fr 76px; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0; color: var(--ink-2); }
.hbar .track { height: 12px; }
.hbar i { display: block; height: 100%; background: var(--green-2); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbar b { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sub-head.mt { margin-top: 12px; }
.stat small { display: block; font-size: 12px; margin-top: 2px; }
.advice { white-space: pre-wrap; line-height: 1.7; margin-bottom: 10px; }

/* PDF로 저장·인쇄: 메뉴와 버튼을 빼고 표만 */
@media print {
  .top, .no-print, #toast, .composer, .composer-hint, .chips { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .card { border: 1px solid #ccc; break-inside: avoid; }
  .table-wrap { overflow: visible; }
  table.pnl { min-width: 0; font-size: 11px; }
  table.pnl tbody th { position: static; }
}

/* 양액 */
.tag.hydro { background: var(--blue-soft); color: var(--blue); }
fieldset.lines { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 0 14px; }
fieldset.lines.missing { border-color: var(--amber); background: var(--amber-soft); }
fieldset.lines legend { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 4px; }
.daily-line.off .daily-grid { opacity: .45; }
.daily-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.daily-grid input { min-height: 40px; padding: 6px 8px; font-size: 15px; }
@media (max-width: 520px) { .daily-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quick-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
table.hydro td { text-align: left; line-height: 1.35; }
table.hydro td small { display: block; color: var(--ink-3); font-size: 12px; }
table.hydro td.warn { background: var(--amber-soft); }
.daily-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.daily-grid .f > span em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 11px; }
details.more { margin-top: 6px; }
details.more summary { font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 4px 0; }
@media (max-width: 520px) { .daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 영수증·정산서 사진 */
.photo-btn { cursor: pointer; }
.receipt { display: flex; flex-direction: column; gap: 6px; }
.receipt img { max-height: 260px; width: auto; max-width: 100%; align-self: flex-start; border-radius: 10px; border: 1px solid var(--line, #ddd); }
.photo-sheet img { width: 100%; height: auto; max-height: 70dvh; object-fit: contain; border-radius: 10px; }

/* 양액 하루 기록: 급액할 때마다 한 줄 (시간 · EC · pH · 양) */
.feed-table { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.feed-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 32px; gap: 4px; align-items: center; }
.feed-row input { min-height: 40px; padding: 6px; font-size: 15px; min-width: 0; width: 100%; }
.feed-head span { font-size: 12px; font-weight: 600; color: var(--ink-2); padding-left: 2px; }
.feed-del { min-height: 36px; border: 0; background: none; color: var(--ink-3); font-size: 16px; cursor: pointer; }
.sub-title { font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 14px 0 6px; }

/* 1년 밭 계획 */
@media (max-width: 420px) { .top nav { gap: 0; } .top nav a { padding: 8px 8px; } .brand { font-size: 16px; } }
.plan { display: flex; flex-direction: column; gap: 12px; }
.plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.plan-year { display: flex; align-items: center; gap: 8px; }
.plan-year h2 { font-size: 18px; }
.seg { display: inline-flex; border: 1px solid var(--field); border-radius: 10px; overflow: hidden; }
.seg button { min-height: 38px; padding: 4px 12px; border: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.seg button.on { background: var(--green); color: #fff; font-weight: 600; }
.brushes { display: flex; flex-wrap: wrap; gap: 6px; }
.brush { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 10px; border: 1px solid var(--field); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.brush.on { border: 2px solid var(--green); background: var(--green-soft); font-weight: 700; padding: 3px 9px; }
.swatch { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.plan-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-tools .btn { flex: none; }

.st-grow { background: #3c7d4a; color: #fff; }
.st-rest { background: #d3d8cf; color: var(--ink); }
.st-work { background: #6a4fa3; color: #fff; }
.st-planned { background: repeating-linear-gradient(135deg, #cfe0f2 0 4px, #f2f7fc 4px 8px); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.st-clear { background: #9a6b35; color: #fff; }
.st-plant { background: #2f6fb0; color: #fff; }
.st-fert { background: #e9ae2c; color: var(--ink); }
.st-harvest { background: #c8502e; color: #fff; }
.st-erase { background: #fff; box-shadow: inset 0 0 0 2px var(--red); }

.pt { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 10px 10px; }
.pt-months { position: sticky; top: calc(54px + env(safe-area-inset-top)); z-index: 3; height: 28px; background: var(--surface); }
.pt-months span { position: absolute; top: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; }
.pt-row { margin-top: 6px; }
.pt-name { display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.3; }
.pt-name small { font-size: 12px; }
.pt-track { position: relative; height: 36px; background: var(--bg); border-radius: 6px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pt:not(.readonly) .pt-track { cursor: crosshair; }
.pt-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }
.pt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 2; pointer-events: none; }
.pt-bar, .pt-ghost { position: absolute; top: 3px; bottom: 3px; min-width: 3px; border-radius: 3px; overflow: hidden; pointer-events: none; }
.pt-bar { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pt-bar span { overflow: hidden; padding: 0 2px; }
.pt-ghost { opacity: .7; z-index: 1; }

.back-plan { display: flex; flex-direction: column; gap: 12px; }
.back-plan h3 { font-size: 17px; }
.field-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pick { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 0 10px; border: 1px solid var(--field); border-radius: 10px; background: var(--surface); font-size: 15px; cursor: pointer; }
.pick.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.tpl-grid { margin-top: 8px; }
.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.step-list li:last-child { border-bottom: 0; }
.step-name { font-weight: 600; }
.step-date { color: var(--ink-2); text-align: right; }
.warn-line { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); font-size: 14px; }
.stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 6px; }
.stepper input { text-align: center; font-weight: 700; }
.stepper .btn { padding: 0; font-size: 22px; }

/* 종구 재고 · 메모 · 기능 요청 */
.tag.seed { background: #efe6d8; color: #6b4a1f; }
.tag.memo { background: #ecebf5; color: #4a3f86; }
.memo-text { font-weight: 500; white-space: pre-wrap; }
.seed-rows { display: flex; flex-direction: column; gap: 8px; }
.seed-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .9fr) 32px; gap: 6px; align-items: end; padding: 8px; background: var(--bg); border-radius: 10px; }
.seed-row .seed-field { grid-column: 1 / 4; order: 5; }
.row.request { align-items: center; }
.row.request.done strong { color: var(--ink-3); text-decoration: line-through; }
.message .actions { flex-wrap: wrap; }
.seed-row select, .seed-row input { padding: 6px 6px; min-width: 0; }

/* 밭 하나 — 하루 단위 달력 */
a.pt-name { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.pt-go { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--green); }
.back-link { align-self: flex-start; text-decoration: none; }
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-week span { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 2px 0 4px; }
.cal-week span:first-child { color: var(--red); }
.cal-grid { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cal-day:not([class*="st-"]) { background: var(--bg); }
.cal-day { min-height: 54px; padding: 3px 4px; border-radius: 6px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; cursor: pointer; }
.cal-grid.readonly .cal-day { cursor: default; }
.cal-day b { font-size: 13px; font-weight: 600; }
.cal-day.sun:not([class*="st-"]) b { color: var(--red); }
.cal-day small { font-size: 10px; line-height: 1.2; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--red); }
.cal-day.sel { box-shadow: inset 0 0 0 3px var(--ink); filter: brightness(.92); }
.tag.plan-tag { min-width: 72px; display: inline-flex; align-items: center; gap: 4px; background: var(--bg); color: var(--ink); }
.pt-rec { position: absolute; bottom: 1px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px #fff; z-index: 2; pointer-events: none; }
.cal-day small.rec { font-weight: 700; }