:root {
  color-scheme: dark;
  --ink: #f0efec;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --hair: rgba(255, 255, 255, 0.1);
  --glass: rgba(20, 21, 20, 0.66);
  --card: #1a1a19;
  --grid: #2c2c2a;
  --axis: #383835;
  --accent: #3987e5;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --good-ink: #6fd58b;
  --warn-ink: #f7c04a;
  --bad-ink: #ff6f61;
  --font: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: #0d0d0d; color: var(--ink);
  font: 13px/1.45 var(--font); -webkit-font-smoothing: antialiased;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h2 { margin: 0 0 6px; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
h3 { margin: 16px 0 6px; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; transition: opacity 0.9s ease; }
body.booting #scene { opacity: 0; }

.glass {
  background: var(--glass); border: 1px solid var(--hair); border-radius: 14px;
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

/* ── 위 막대 ── */
.top {
  position: fixed; top: 8px; left: 12px; right: 12px; height: 58px; z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 0 12px 14px 14px; overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; }
.brand .mark { width: 22px; height: 22px; flex: none; }
.brand b { font-weight: 700; }
.brand span { margin-right: 6px; font-weight: 450; color: var(--muted); font-size: 12px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--hair); white-space: nowrap; color: var(--ink-2);
}
.pill { min-width: 0; }
.pill #scenarioName { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill .mode, .pill .burger { flex: none; }
.top > :not(.pill):not(.spacer) { flex-shrink: 0; }
.pill:hover, .ghost:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.burger { position: relative; width: 12px; height: 9px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: 0.8; flex: none; }
.burger::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid currentColor; }
.clock { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock b { font-size: 15px; font-weight: 600; }
.clock span { color: var(--ink-2); }
.clock .sep { width: 1px; height: 11px; background: var(--hair); align-self: center; }
.speed { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); }
.speed button { height: 24px; min-width: 30px; padding: 0 9px; border-radius: 7px; color: var(--ink-2); white-space: nowrap; }
.speed button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
.speed .per { color: var(--muted); padding: 0 7px 0 3px; font-size: 11px; white-space: nowrap; }
.spacer { flex: 1; }
.ghost { height: 28px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); white-space: nowrap; }
.icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); font-weight: 650; flex: none; }
.icon:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.icon[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.icon .mute { display: none; }
.icon.muted .wave { display: none; }
.icon.muted .mute { display: inline; }
#guideBtn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hair); font-size: 13px; }
/* 작기 막대: 달 이름과 가는 진행선. 경영 실습에서는 눌러서 앞날로 건너뛴다 */
.timeline { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; }
.timeline.jump { cursor: pointer; }
.tl-months { position: absolute; left: 0; right: 0; bottom: 3px; height: 10px; pointer-events: none; }
.tl-months span { position: absolute; bottom: 0; padding-left: 4px; border-left: 1px solid rgba(255, 255, 255, 0.24); color: var(--muted); font-size: 9.5px; line-height: 10px; white-space: nowrap; }
.tl-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.07); }
.tl-track i { position: relative; display: block; height: 100%; width: 0; background: var(--accent); opacity: 0.9; }
.timeline.jump .tl-track i::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #f0efec; }
.timeline.jump:hover .tl-track { background: rgba(255, 255, 255, 0.16); }
.tl-tip { position: fixed; z-index: 9; padding: 4px 9px; border-radius: 7px; background: rgba(22, 26, 24, 0.97); border: 1px solid var(--hair); color: var(--ink-2); font-size: 11.5px; white-space: nowrap; pointer-events: none; }
.tl-tip[hidden] { display: none; }
.pop.skip { right: auto; width: 304px; z-index: 9; }
.pop.skip p { margin: 6px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.55; }
.pop.skip .btnrow { margin-top: 10px; }

/* ── 양쪽 패널 ── */
.panel { position: fixed; top: 74px; bottom: 12px; z-index: 4; display: flex; flex-direction: column; overflow: hidden; }
.left { left: 12px; width: 292px; }
.right { right: 12px; width: 348px; padding: 12px; gap: 10px; }
.tabs { display: flex; gap: 2px; padding: 8px 8px 0; }
.tabs button { flex: 1; height: 30px; border-radius: 8px; color: var(--muted); font-weight: 550; }
.tabs button[aria-selected="true"] { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.tabs.small { padding: 0; margin-bottom: 6px; }
.tabs.small button { flex: none; height: 24px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.tabs.small .tablebtn { margin-left: auto; color: var(--muted); border: 1px solid var(--hair); }
.tabbody { flex: 1; overflow-y: auto; padding: 10px 14px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); }
.seg button { height: 28px; border-radius: 7px; color: var(--ink-2); font-size: 12px; }
.seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
.seg button:disabled { opacity: 0.35; cursor: default; }
.modeseg { flex: none; margin: 10px 10px 2px; }
.modeseg button { height: 30px; font-size: 12.5px; font-weight: 550; }
.modenote { margin: 0 2px; color: var(--muted); font-size: 11px; line-height: 1.45; height: 2.9em;      /* 글이 한 줄이든 두 줄이든 높이는 같게(아래 조작판이 오르내리지 않게) */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.group { margin-top: 9px; }
.group.off .field { opacity: 0.42; }      /* 꺼 둔 장치의 기준: 자리는 두고 흐리게 */
.group > header { display: flex; align-items: center; justify-content: space-between; min-height: 20px; margin-bottom: 1px; }
.group > header b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 1px 0; }
.field > span { color: var(--ink-2); }
/* 자동 재배가 경보에 대응해 방금 고친 칸: 가는 겨자색 테와 옅은 바탕이 잠깐 켜졌다 꺼진다 */
.field.autoset { border-radius: 7px; outline: 1px solid transparent; outline-offset: 4px; animation: autoset 6s ease-out; }
.field.autoset output { color: #f0b94b; }
.switch.autoset { outline: 1px solid transparent; outline-offset: 3px; animation: autosw 6s ease-out; }
@keyframes autoset { 0%, 55% { outline-color: rgba(240, 185, 75, 0.8); background-color: rgba(240, 185, 75, 0.09); box-shadow: 0 0 0 4px rgba(240, 185, 75, 0.09); } 100% { outline-color: transparent; background-color: transparent; box-shadow: 0 0 0 4px transparent; } }
@keyframes autosw { 0%, 55% { outline-color: rgba(240, 185, 75, 0.8); } 100% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .field.autoset, .switch.autoset { animation: none; outline-color: rgba(240, 185, 75, 0.8); } }
.field output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 62px; text-align: right; }
.field output small { font-weight: 400; color: var(--muted); margin-left: 2px; }
.field > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
/* 슬라이더: 회색 길 위에 권장 범위를 초록 구간으로 얹는다(--lo, --hi 는 0~1) */
.field input[type="range"] {
  grid-column: 1 / -1; width: 100%; margin: 0; height: 14px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  --lo: 0; --hi: 0;
  --band: linear-gradient(to right, rgba(255, 255, 255, 0.16) 0 calc(7px + (100% - 14px) * var(--lo)), rgba(12, 163, 12, 0.6) calc(7px + (100% - 14px) * var(--lo)) calc(7px + (100% - 14px) * var(--hi)), rgba(255, 255, 255, 0.16) calc(7px + (100% - 14px) * var(--hi)) 100%);
}
.field input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--band); }
.field input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--band); }
.field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--accent); border: 2px solid #f0efec; }
.field input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid #f0efec; }
/* 신호등: 적정 · 주의 · 부적합 */
.lt { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.lt i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex: none; }      /* 신호등 점: 색이 먼저 보이게 크게 */
.lt.ok i { background: var(--good); }
.lt.warn i { background: var(--warning); }
.lt.bad i { background: var(--critical); }
.lt.none { color: var(--muted); }
.rec { color: var(--muted); font-size: 11px; white-space: nowrap; }
.hintbox { display: inline-flex; align-items: baseline; gap: 5px; }
.ghint { margin-left: auto; margin-right: 8px; }
.group > header .lt { margin-left: auto; margin-right: 8px; }
.field.sel { margin-top: 14px; }
.field select, .field.sel select {
  height: 26px; border-radius: 7px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.05); padding: 0 6px; max-width: 150px;
}
select option { background: #1a1a19; }
.off .field:not(.toggle) { opacity: 0.38; }
[data-locked="1"] .field input[type="range"], [data-locked="1"] select, [data-locked="1"] .switch { pointer-events: none; opacity: 0.55; }

.switch { position: relative; width: 32px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, 0.16); transition: background 0.15s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #f0efec; transition: transform 0.15s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }

/* 작물 상태 */
.crop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.stat .k { color: var(--muted); font-size: 11px; display: flex; justify-content: space-between; gap: 4px; }
.stat .v { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.stat .v small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.meter { height: 4px; border-radius: 2px; background: rgba(57, 135, 229, 0.2); margin-top: 4px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.meter.warn { background: rgba(250, 178, 25, 0.2); } .meter.warn i { background: var(--warning); }
.meter.bad { background: rgba(208, 59, 59, 0.24); } .meter.bad i { background: var(--critical); }
.now { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.now button { height: 30px; border-radius: 8px; border: 1px solid var(--hair); color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.now button:hover { background: rgba(255, 255, 255, 0.1); }
.now button:active { transform: translateY(1px); }

/* 오른쪽: 현재 값 */
/* ── 계기판: 계기 넷(이름 · 판정 · 큰 숫자 · 현장 값 · 지난 72시간 그래프)을 2×2 로. 남는 높이는 그래프가 가져간다 ── */
.board { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-height: 0; }
:is(.board, .trade) > header { display: flex; align-items: center; gap: 8px; }
:is(.board, .trade) > header b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
:is(.board, .trade) > header span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.trade > header span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.board > header .sp { flex: 1; }
/* 범례: 선(내 온실 · 현장 · 외기)과 바탕 음영(밤의 시간대: 전야 · 후야 · 새벽) */
.board > .lg { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; margin: -3px 0 -2px; color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.board > .lg span { display: inline-flex; align-items: center; gap: 4px; }
.board > .lg i { width: 12px; height: 3px; border-radius: 2px; background: var(--series-1); }
.board > .lg i.farm { height: 1.5px; background: var(--series-2); } .board > .lg i.out { height: 1.5px; background: var(--series-3); }
.board > .lg i.z { width: 9px; height: 9px; border: 1px solid rgba(255, 255, 255, 0.16); }
.board > .lg i.eve { background: rgba(126, 152, 255, 0.2); } .board > .lg i.late { background: rgba(126, 152, 255, 0.42); } .board > .lg i.dawn { background: rgba(240, 185, 75, 0.3); }
.board > .lg .gapl { margin-left: auto; }
.gauges { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); gap: 6px; }
.gauge { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 5px 10px 4px; border-radius: 10px; background: var(--card); border: 1px solid var(--hair); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.gauge:hover, .gauge:focus-visible { background: #212120; border-color: rgba(255, 255, 255, 0.24); outline: none; }
.gauge .gh { display: flex; align-items: baseline; gap: 7px; min-height: 25px; }
.gauge .nm { flex: none; color: var(--ink); font-size: 12.5px; font-weight: 650; white-space: nowrap; }      /* 어떤 계기인지 먼저 보이게 밝고 진하게 */
.gauge .ltbox { flex: none; align-self: center; }
.gauge .v { flex: none; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gauge .v b { font-weight: inherit; }
.gauge .v small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.gauge .d { flex: 1 1 0; min-width: 0; text-align: right; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauge .spark { position: relative; flex: 1 1 40px; min-height: 30px; max-height: 190px; margin-top: 1px; }
.gauge .spark canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 판정이 있는 계기는 숫자도 신호등 색으로(어두운 바탕에서 읽히게 밝힌 색). 단위는 그대로 둔다 */
.gauge .v.ok, .stat .v.ok { color: var(--good-ink); }
.gauge .v.warn, .stat .v.warn { color: var(--warn-ink); }
.gauge .v.bad, .stat .v.bad { color: var(--bad-ink); }
/* 바깥 날씨 한 줄 */
/* 그래프 위에 올린 자리의 값 */
.sparktip { position: fixed; z-index: 25; padding: 7px 10px; border-radius: 8px; background: rgba(22, 26, 24, 0.97); border: 1px solid var(--hair); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); font-size: 11.5px; pointer-events: none; }
.sparktip .h { color: var(--muted); margin-bottom: 3px; } .sparktip .r + .h { margin: 3px 0 0; }
.sparktip .r { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sparktip .r i { width: 10px; height: 2px; border-radius: 1px; flex: none; }
.sparktip .r b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .sparktip .r span { color: var(--muted); }

.chartcard { background: var(--card); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px 6px; }
.viz-root { position: relative; }
.viz-root canvas { display: block; width: 100%; height: 172px; outline: none; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; min-height: 18px; margin-bottom: 2px; color: var(--ink-2); font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 2px; border-radius: 1px; }
.legend i.dash { width: 14px; height: 0; background: none !important; border-top: 2px dashed; border-radius: 0; }
.tip {
  position: absolute; pointer-events: none; z-index: 3; min-width: 120px; padding: 7px 9px; border-radius: 8px;
  background: #242422; border: 1px solid var(--hair); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); font-size: 11px;
}
.tip .h { color: var(--muted); margin-bottom: 3px; }
.tip .r { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tip .r i { width: 10px; height: 2px; border-radius: 1px; flex: none; }
.tip .r b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.tip .r span { color: var(--muted); }

/* ── 전광판: 출하량 · 손익은 큰 숫자와 오르내림 화살표로, 나머지 돈의 흐름은 아래 줄에서 왼쪽으로 흘러간다 ── */
.trade { flex: none; display: flex; flex-direction: column; gap: 7px; }
.ticker { flex: none; border-radius: 10px; background: #0e100f; border: 1px solid var(--hair); overflow: hidden; }
.quotes { display: grid; grid-template-columns: 1fr 1fr; }
.quote { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; padding: 8px 10px 6px; cursor: pointer; transition: background 0.15s; }
.quote + .quote { border-left: 1px solid var(--hair); }
.quote:hover, .quote:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.quote .k { color: var(--muted); font-size: 11px; }
.quote .v { text-align: right; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote .v b { font-weight: inherit; } .quote .v small { font-size: 10.5px; font-weight: 400; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.quote .chg { grid-column: 1 / -1; text-align: right; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quote .chg i { font-style: normal; font-size: 9px; }
.quote .chg.up { color: var(--good-ink); } .quote .chg.down { color: var(--bad-ink); }
.tape { display: flex; align-items: center; height: 27px; border-top: 1px solid var(--hair); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.tape .run { flex: none; display: inline-flex; white-space: nowrap; animation: tape 46s linear infinite; }
.tape:hover .run { animation-play-state: paused; }
.tape .it { display: inline-flex; align-items: baseline; gap: 5px; padding: 0 13px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tape .it i { font-style: normal; color: var(--muted); } .tape .it b { font-weight: 600; color: var(--ink); } .tape .it small { color: var(--muted); font-size: 10.5px; }
@keyframes tape { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape { height: auto; padding: 5px 0; -webkit-mask-image: none; mask-image: none; } .tape .run { flex: 1; flex-wrap: wrap; white-space: normal; row-gap: 3px; animation: none; } .tape .it[aria-hidden] { display: none; } }
/* 계기판 표: 판정이 붙은 칸은 숫자도 신호등 색으로 */
#table.boardtable .lt { font-size: inherit; font-variant-numeric: tabular-nums; color: var(--ink); gap: 6px; }
#table.boardtable .lt.ok { color: var(--good-ink); } #table.boardtable .lt.warn { color: var(--warn-ink); } #table.boardtable .lt.bad { color: var(--bad-ink); }
/* 큰 그래프 창 */
/* ── 실제 농가와 견주기: 지표 넷을 2×2 로. 회색 막대 = 실제 농가의 가운데 절반, 파란 선 = 내 온실, 주황 선 = 이 농가의 기록 ── */
.opssheet .lead { margin-bottom: 10px; font-size: 13px; }
.opslg { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px; color: var(--ink-2); font-size: 12px; }
.opslg span { display: inline-flex; align-items: center; gap: 7px; }
.opslg i, .opstip .r i { flex: none; }
.opslg i.bd, .opstip .r i.bd { width: 8px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.24); }
.opslg i.me, .opstip .r i.me { width: 14px; height: 2px; border-radius: 1px; background: var(--series-1); }
.opslg i.fm, .opstip .r i.fm { width: 14px; height: 1.5px; border-radius: 1px; background: var(--series-2); }
.opsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opsfig { margin: 0; min-width: 0; padding: 8px 12px 4px; border-radius: 10px; background: var(--card); border: 1px solid var(--hair); }
.opsfig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.opsfig figcaption b { font-size: 12.5px; font-weight: 600; }
.opsfig figcaption span { color: var(--muted); font-size: 11px; }
.opsfig figcaption em { flex-basis: 100%; font-style: normal; color: var(--ink-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.opsfig svg { display: block; width: 100%; height: auto; margin-top: 4px; touch-action: pan-y; }
.opsfig .gr { stroke: var(--grid); stroke-width: 1; }
.opsfig .yt, .opsfig .xt { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.opsfig .xt.now { fill: var(--ink); font-weight: 650; }
.opsfig .yr { font-size: 8.5px; font-weight: 400; fill: var(--muted); }
.opsfig rect.bd { fill: rgba(255, 255, 255, 0.2); }
.opsfig .md { stroke: rgba(240, 239, 236, 0.8); stroke-width: 1.5; }
.opsfig path.me { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.opsfig circle.me { fill: var(--series-1); stroke: var(--card); stroke-width: 2; }
.opsfig path.fm { fill: none; stroke: var(--series-2); stroke-width: 1.5; stroke-linejoin: round; }
.opsfig circle.fm { fill: var(--series-2); stroke: var(--card); stroke-width: 1.5; }
.opsfig .hit { fill: transparent; }
.opsfig .hit:hover { fill: rgba(255, 255, 255, 0.045); }
.opstip { position: absolute; z-index: 2; }
.opssheet .hint { margin: 8px 0 0; line-height: 1.5; }
.opssheet .dlghead form { display: flex; gap: 6px; }
.opssheet .tablewrap { max-height: 60vh; }
#opsTable tr.cur td { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
#opsTable th[colspan] { text-align: center; }
@media (max-width: 720px) { .opsgrid { grid-template-columns: 1fr; } }
/* 영농일지 */
table.diary td, table.diary th { text-align: left; white-space: normal; vertical-align: top; }
table.diary td:nth-child(1), table.diary td:nth-child(2) { white-space: nowrap; color: var(--ink-2); }
table.diary tr.sale td:nth-child(2) { color: var(--ink); font-weight: 600; }
/* 작업 종류 이름표: 수확 · 출하(금빛) · 방제(빨강) · 적엽(초록) · 유인(파랑) */
table.diary .kind { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.6; }
table.diary .kind.harvest { background: rgba(240, 185, 75, 0.2); color: #ffdf9c; } table.diary .kind.spray { background: rgba(208, 59, 59, 0.26); color: #ffd0c9; }
table.diary .kind.clear { background: rgba(243, 239, 228, 0.16); color: #f3efe4; }
table.diary .kind.prune { background: rgba(12, 163, 12, 0.22); color: #c9f0d0; } table.diary .kind.train { background: rgba(57, 135, 229, 0.22); color: #cfe2fb; }
#diaryDlg .kv { margin-bottom: 10px; }
#diaryDlg .dlghead form { display: flex; gap: 6px; }
.salesline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 병해충 정보(병 발생도 칸을 누르면): 습할 때 번지는 병 / 건조할 때 느는 병해충 */
.stat.link { cursor: pointer; border-radius: 8px; }
.stat.link:hover, .stat.link:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.pests { margin-top: 10px; padding: 10px 14px 6px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.03); }
.pests.on { border-color: rgba(250, 178, 25, 0.55); }
.moldbox { margin-top: 10px; padding: 10px 14px 8px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.03); }
.moldbox.warn { border-color: rgba(250, 178, 25, 0.55); }
.moldbox.bad { border-color: rgba(240, 90, 80, 0.6); }
.moldbox h3 { margin: 0 0 8px; font-size: 12px; color: var(--ink-2); letter-spacing: 0; }
.moldbox .hint { margin: 8px 0 0; }
.moldrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 18px; }
@media (max-width: 640px) { .moldrow { grid-template-columns: minmax(0, 1fr); } }
.pests h3 { margin: 0 0 6px; font-size: 12px; color: var(--ink-2); letter-spacing: 0; }
.pest { padding: 6px 0; border-top: 1px solid var(--grid); }
.pest b { font-size: 13.5px; }
.pest dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 4px 0 0; }
.pest dt { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.pest dd { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.pest .drugs { margin: 6px 0 2px; font-size: 12px; }
.pest .drugs summary { color: var(--ink-2); }
.druglist { max-height: 210px; overflow: auto; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--grid); }
.druglist .dg { display: grid; grid-template-columns: 74px 1fr; gap: 0 8px; padding: 2px 0; color: var(--ink-2); }
.druglist .dg b { color: var(--ink); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.druglist .dg small { color: var(--muted); font-size: 11px; }
.chartsheet { width: min(820px, calc(100vw - 32px)); }
/* 출하 · 손익 창 */
.tradesheet { width: min(900px, calc(100vw - 32px)); }
.tq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 10px; }
.tq > div { min-width: 0; padding: 9px 12px 9px; border-radius: 10px; background: #0e100f; border: 1px solid var(--hair); font-variant-numeric: tabular-nums; }
.tq .k { color: var(--muted); font-size: 11px; }
.tq .v { font-size: 25px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; }
.tq .v small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.tq .chg { font-size: 12px; color: var(--muted); white-space: nowrap; } .tq .chg i { font-style: normal; font-size: 10px; }
.tq .chg.up { color: var(--good-ink); } .tq .chg.down { color: var(--bad-ink); }
.tq .d { margin-top: 2px; color: var(--ink-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tradeviz { position: relative; }
.tradeviz canvas { display: block; width: 100%; height: min(360px, 38vh); outline: none; }
.tradeviz .sparktip { position: absolute; z-index: 2; }
.tcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4px 18px; margin-top: 4px; }
.tcols h3 { margin: 12px 0 6px; }
.tcols table { font-size: 12px; }
.tcols th, .tcols td { padding: 4px 8px; }
table.money td:nth-child(2) { font-weight: 600; }
table.money tr.sum td { border-top: 1px solid var(--axis); border-bottom: 0; color: var(--ink); font-weight: 650; }
table.money td.note, table.ships td.note { color: var(--muted); text-align: left; white-space: normal; }
table.money .share { display: inline-block; width: 44px; height: 4px; margin-right: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); vertical-align: middle; overflow: hidden; }
table.money .share i { display: block; height: 100%; border-radius: 2px; background: var(--muted); }
table.ships tr.none td { color: var(--muted); text-align: left; }
@media (max-width: 720px) { .tq, .tcols { grid-template-columns: 1fr; } .tq .v { font-size: 21px; } }
.chartsheet .chartcard { margin-top: 4px; }
.chartsheet .viz-root canvas { height: min(340px, 46vh); }

/* 화면 위 보조 표시 */
.actuators {
  position: fixed; left: 316px; right: 372px; bottom: 16px; z-index: 3; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; pointer-events: none;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; white-space: nowrap;
  background: rgba(20, 21, 20, 0.58); border: 1px solid var(--hair); color: var(--muted);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums;
}
.chip.on { color: var(--ink); }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.chip.on i { background: var(--accent); }
/* 과실 생육 띠: 시점 단추 아래. 화방을 오래된 것부터 — 꽃 · 풋과실 · 착색 · 수확 대기 */
.fruitbar { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px 0 10px; border-radius: 16px; background: rgba(20, 21, 20, 0.5); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.fruitbar b { font-weight: 600; color: var(--muted); }
.fruitbar .row { display: inline-flex; align-items: center; gap: 1px; }
.fruitbar .row i { display: block; width: 22px; height: 22px; }
.fruitbar .row i svg { display: block; width: 100%; height: 100%; }
.fruitbar .row i.ripe { filter: drop-shadow(0 0 4px rgba(240, 120, 90, 0.75)); }
.fruitbar .txt { font-variant-numeric: tabular-nums; } .fruitbar .txt.ripe { color: #ffb4a6; font-weight: 600; }
body.lite .fruitbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(22, 23, 22, 0.92); }
.hud { position: fixed; right: 372px; top: 74px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.hud > * { pointer-events: auto; }
/* 바깥 날씨 현황판: 하늘 그림 · 외기온 · 날씨를 크게, 아래 줄에 일사 · 바람 · 비, 그 아래에 오늘의 일사 합 */
.wxboard { box-sizing: border-box; width: 318px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; row-gap: 7px; align-items: center; padding: 9px 12px 9px 10px; border-radius: 12px; background: rgba(20, 21, 20, 0.6); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 칸마다 폭을 정해 둔다: 날씨 글이나 자릿수가 바뀌어도 상자와 다른 글자가 움직이지 않는다 */
.wxboard .sky { width: 44px; height: 44px; }
.wxboard .sky svg { display: block; width: 100%; height: 100%; }
.wxboard .now { display: grid; grid-template-columns: 88px 66px minmax(0, 1fr); align-items: baseline; }
.wxboard .now .t { color: var(--ink); font-size: 25px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.wxboard .now .t small { font-size: 13px; font-weight: 400; color: var(--ink-2); margin-left: 2px; letter-spacing: 0; }
.wxboard .now .st { color: var(--ink); font-size: 14px; font-weight: 600; }
.wxboard .now .rng { text-align: right; color: var(--ink-2); font-size: 12.5px; }
.wxboard .wxgrid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; padding-top: 7px; border-top: 1px solid var(--hair); }
.wxboard .wxgrid > div { min-width: 0; display: grid; gap: 1px; }
.wxboard .wxgrid .k { color: var(--muted); font-size: 11.5px; }
.wxboard .wxgrid .v b { color: var(--ink); font-size: 15px; font-weight: 600; }
.wxboard .wxgrid .v small { margin-left: 3px; color: var(--ink-2); font-size: 11px; }
.wxboard .wxgrid .wet .v b { color: #8dbcf0; }
body.lite .wxboard { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(22, 23, 22, 0.92); }
.wxboard .wxmore { display: none; }      /* 접고 펴는 표시: 좁은 화면에서만 보인다 */
.views { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(20, 21, 20, 0.5); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.views button { height: 24px; padding: 0 9px; border-radius: 7px; color: var(--ink-2); font-size: 12px; }
.views button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
.alerts { position: fixed; left: 316px; top: 74px; z-index: 6; display: flex; flex-direction: column; gap: 6px; width: 380px; max-width: max(230px, calc(100vw - 1080px)); pointer-events: none; }
.toasts, .incidents { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.incidents:empty { display: none; }
/* 돌발 상황: 조치할 때까지 떠 있는 카드 */
.inc { pointer-events: auto; align-self: stretch; display: grid; grid-template-columns: auto 1fr auto; gap: 1px 10px; align-items: center; padding: 9px 10px 9px 11px; border-radius: 12px; background: rgba(36, 22, 22, 0.94); border: 1px solid rgba(208, 59, 59, 0.6); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); animation: in 0.25s ease-out; }
.inc .ic { grid-row: 1 / 3; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--critical); color: #fff; font-size: 11px; font-weight: 800; }
.inc b { font-weight: 650; }
.inc b small { margin-left: 6px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.inc p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: 12px; }
.inc button { grid-column: 3; grid-row: 1 / 3; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; white-space: nowrap; }
.inc button small { margin-left: 5px; font-weight: 400; opacity: 0.85; }
.toast {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; background: rgba(20, 21, 20, 0.72);
  border: 1px solid var(--hair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: in 0.25s ease-out; transition: opacity 0.6s;
}
.toast .ic { width: 16px; height: 16px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #0b0b0b; }
.toast.bad .ic { background: var(--critical); color: #fff; }
.toast.warn .ic { background: var(--warning); }
.toast.work .ic, .toast.wx .ic { background: rgba(255, 255, 255, 0.3); color: #fff; }
.toast.inc .ic { background: var(--critical); color: #fff; }
.toast.auto .ic { background: rgba(57, 135, 229, 0.6); color: #fff; }
.toast small { color: var(--muted); margin-right: 2px; }
@keyframes in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── 교관 ── */
.coach { position: fixed; left: 316px; bottom: 52px; width: 400px; z-index: 4; padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.coach header { display: flex; align-items: center; gap: 8px; padding-left: 66px; min-height: 24px; }
/* 교관 아바타: 창 왼쪽 위에 걸쳐 놓는다. 눈은 가끔 깜박이고, 말하는 동안(body.talking) 입이 움직인다 */
.avatar {
  position: absolute; top: -28px; left: 12px; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; z-index: 1;
  background: #22302a; border: 1.5px solid rgba(243, 239, 228, 0.75); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.avatar svg { display: block; width: 100%; height: 100%; }
.avatar .eye, .avatar .talk { transform-box: fill-box; transform-origin: center; }
.avatar .eye { animation: blink 4.6s infinite; }
.avatar .talk { display: none; }
body.talking .avatar .smile { display: none; }
body.talking .avatar .talk { display: block; animation: talk 0.26s ease-in-out infinite alternate; }
body.talking .avatar { border-color: #f0b94b; }
@keyframes talk { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@media (prefers-reduced-motion: reduce) { .avatar .eye, body.talking .avatar .talk { animation: none; } }
.coach header b { font-size: 14px; font-weight: 650; }
.badge { height: 20px; padding: 0 8px; border-radius: 10px; background: rgba(57, 135, 229, 0.22); color: #cfe2fb; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.remain { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coachbody { color: var(--ink-2); font-size: 13px; line-height: 1.55; max-height: 30vh; overflow-y: auto; }
.coachbody p { margin: 0 0 6px; }
.coachbody .step { color: var(--ink); }
.coachbody .step small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.coachbody .say { display: flex; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); color: var(--ink); }
.coachbody .say i { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--warning); color: #0b0b0b; display: grid; place-items: center; font: 800 10px/1 var(--font); font-style: normal; }
.coachbody .say.bad i { background: var(--critical); color: #fff; }
.goals { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.goals:empty { display: none; }
.goals .g { color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.goals .g::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--muted); }
.goals .g.ok::before { background: var(--good); border-color: var(--good); }
.goals .g.no::before { background: var(--critical); border-color: var(--critical); }
.goals .gv { font-weight: 600; white-space: nowrap; }
.goals .t { color: var(--muted); font-size: 11px; text-align: right; }
.coachbtns { display: flex; align-items: center; gap: 6px; }
.coachbtns .primary { margin-top: 0; height: 30px; }
.coachbtns .ghost { margin-left: auto; }
.coachbtns .ghost:not([hidden]) ~ .ghost { margin-left: 0; }
/* 교관이 짚는 곳: 움직이지 않는 가는 테(애니메이션은 화면 갱신에 부담이라 쓰지 않는다) */
.hl { outline: 2px solid #f0b94b; outline-offset: 4px; border-radius: 8px; background-color: rgba(240, 185, 75, 0.13); }      /* 지금 만질 곳: 노란 테 + 옅은 바탕(번쩍이는 테와 손가락은 #hlRing · #hlHand) */
body.lite .glass, body.lite .chip, body.lite .views, body.lite .toast { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(22, 23, 22, 0.92); }
.pill .mode { color: var(--ink); font-weight: 600; padding-right: 8px; border-right: 1px solid var(--hair); }
.ghost[aria-pressed="true"] { background: rgba(57, 135, 229, 0.22); color: var(--ink); }

/* ── 세부 창 ── */
dialog.sheet {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 26px 28px 22px; border-radius: 18px; color: var(--ink);
  background: rgba(22, 23, 22, 0.94); border: 1px solid var(--hair); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
dialog.sheet::backdrop { background: rgba(6, 8, 10, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lead { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; }
.lessons { display: grid; gap: 6px; }
.lesson { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.03); }
.lesson:hover { background: rgba(255, 255, 255, 0.08); }
.lesson .no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font-weight: 650; font-size: 12px; }
.lesson.pass .no { background: var(--good); color: #fff; }
/* 한 과정이 한 줄: 번호 · 이름 · 설명(넘치면 줄임) · 기간. 아홉 과정이 한 화면에 들어온다 */
.lesson > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lesson b { flex: none; font-weight: 600; font-size: 14px; }
.lesson span { color: var(--muted); font-size: 12px; }
.lesson > div span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson .st { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.lesson .st em { font-style: normal; height: 20px; padding: 0 8px; border-radius: 10px; display: inline-flex; align-items: center; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; }
@media (max-width: 640px) { .lesson > div { display: block; } .lesson b { display: block; } .lesson > div span { white-space: normal; } }
.card .best { margin-top: 8px; color: var(--ink-2); font-size: 12px; }
.grade { display: flex; align-items: center; gap: 18px; margin: 6px 0 14px; }
.grade .letter { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; font-size: 44px; font-weight: 750; background: rgba(57, 135, 229, 0.2); color: #dbe9fc; }
/* 등급 글자: 등급마다 색이 다르다(S 금빛 · A 초록 · B 파랑 · C 주황 · D 빨강) */
.grade .letter.gS { background: rgba(240, 185, 75, 0.24); color: #ffe3a6; } .grade .letter.gA { background: rgba(12, 163, 12, 0.24); color: #c9f0d0; }
.grade .letter.gC { background: rgba(236, 131, 90, 0.24); color: #ffd9c8; } .grade .letter.gD { background: rgba(208, 59, 59, 0.3); color: #ffd3cd; }
.grade .tt { font-size: 20px; font-weight: 650; }
.grade .pt { color: var(--ink-2); }
.eval { display: grid; grid-template-columns: auto 90px auto 1fr; gap: 8px 14px; align-items: center; margin: 10px 0 12px; }
.eval .lb { font-weight: 600; }
.eval .sc { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.eval .nt { color: var(--ink-2); }
.eval .nt small { display: block; color: var(--muted); }
.res { width: 100%; margin: 8px 0 12px; }
.res th, .res td { text-align: left; white-space: normal; }
.res td.ok { color: var(--ink); } .res .mark { font-weight: 700; }
.verdict { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 13px; font-weight: 650; margin-bottom: 8px; }
.verdict.pass { background: rgba(12, 163, 12, 0.2); } .verdict.fail { background: rgba(208, 59, 59, 0.22); }
.verdict::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.verdict.fail::before { background: var(--critical); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.card {
  text-align: left; padding: 14px 14px 12px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.03);
  display: flex; flex-direction: column; gap: 2px; transition: background 0.15s, transform 0.15s;
}
.card:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
.card b { font-size: 15px; font-weight: 650; }
/* 농가 카드의 머리: 작목 그림 · 이름 · 지역(왼쪽)과 시군 자리를 찍은 작은 지도(오른쪽). 그림은 js/cropart.js, 지도는 js/region.js 의 regionThumb */
.card .fig { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.card .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.card .art { display: block; width: 54px; height: 54px; margin: 0 0 5px -2px; transform-origin: 50% 12%; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card .art svg { display: block; width: 100%; height: 100%; }
.card:hover .art, .card:focus-visible .art { transform: rotate(-5deg) scale(1.06); }
.card .crop { font-size: 11.5px; font-weight: 600; line-height: 16px; color: var(--ink-2); white-space: nowrap; }
.card .thumbmap { flex: none; display: block; height: 96px; aspect-ratio: 0.507; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%); mask-image: linear-gradient(180deg, transparent 0, #000 13%); }
.thumbmap .far { fill: #1c2e25; }
.thumbmap .land { fill: #2b4a3a; stroke: #8cc7a1; stroke-opacity: 0.75; stroke-width: 0.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.thumbmap .dot { fill: #f0b94b; }
.thumbmap .ring { fill: rgba(240, 185, 75, 0.14); stroke: #f0b94b; stroke-opacity: 0.8; stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.card:hover .thumbmap .ring, .card:focus-visible .thumbmap .ring { animation: thumbring 1.5s ease-out infinite; }
@keyframes thumbring { from { transform: scale(0.55); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .card .art { transition: none; } .card:hover .art, .card:focus-visible .art { transform: none; } .card:hover .thumbmap .ring, .card:focus-visible .thumbmap .ring { animation: none; } }
.card .s { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-variant-numeric: tabular-nums; }
.card dt { color: var(--muted); } .card dd { margin: 0; text-align: right; font-weight: 550; }
.primary { margin-top: 18px; height: 34px; padding: 0 18px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 600; }
.primary + .primary, .primary.alt { background: rgba(255, 255, 255, 0.1); margin-left: 6px; }
.sheet p { color: var(--ink-2); margin: 6px 0; }
.sheet ul { margin: 6px 0; padding-left: 18px; color: var(--ink-2); }
.sheet li { margin: 3px 0; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; margin: 16px 0; }
.kv .k { color: var(--muted); font-size: 11px; }
.kv .v { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.kv .v small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.kv .d { font-size: 12px; color: var(--ink-2); }
/* 평가서의 큰 숫자: 값에 색 + 기준과의 차이(▲ 초록 · ▼ 빨강) */
.kv .tone-yield .v { color: #8fdca4; } .kv .tone-rev .v { color: #f3cd7a; } .kv .tone-gain .v { color: var(--good-ink); } .kv .tone-loss .v { color: var(--bad-ink); } .kv .tone-heat .v { color: #f2a37f; } .kv .tone-feed .v { color: #8ebdf2; }
.kv [class^="tone-"] .v small { color: var(--muted); }
.kv .gap { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); } .kv .gap i { font-style: normal; font-size: 10px; }
.kv .gap.up { color: var(--good-ink); } .kv .gap.down { color: var(--bad-ink); }
/* 세부 창으로 가는 색 단추: 출하 · 손익(금빛) · 영농일지(초록) */
.reportlinks { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 4px; }
.linkbtn { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 16px 6px 10px; border-radius: 11px; border: 1px solid transparent; text-align: left; transition: background 0.15s, border-color 0.15s; }
.linkbtn i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; } .linkbtn i svg { width: 18px; height: 18px; }
.linkbtn b { display: block; font-size: 13.5px; font-weight: 650; } .linkbtn small { display: block; margin-top: 1px; font-size: 11px; color: var(--ink-2); }
.linkbtn.money { background: rgba(240, 185, 75, 0.13); border-color: rgba(240, 185, 75, 0.42); } .linkbtn.money b { color: #ffdf9c; } .linkbtn.money i { background: rgba(240, 185, 75, 0.24); color: #ffd685; }
.linkbtn.money:hover, .linkbtn.money:focus-visible { background: rgba(240, 185, 75, 0.22); border-color: rgba(240, 185, 75, 0.7); }
.linkbtn.diary { background: rgba(63, 143, 102, 0.17); border-color: rgba(111, 213, 139, 0.4); } .linkbtn.diary b { color: #c4efd0; } .linkbtn.diary i { background: rgba(63, 143, 102, 0.36); color: #a8e6ba; }
.linkbtn.diary:hover, .linkbtn.diary:focus-visible { background: rgba(63, 143, 102, 0.28); border-color: rgba(111, 213, 139, 0.7); }
.tablewrap { max-height: 56vh; overflow: auto; border: 1px solid var(--hair); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 5px 10px; text-align: right; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th { position: sticky; top: 0; background: #1f1f1e; color: var(--ink-2); font-weight: 600; }
th:first-child, td:first-child { text-align: left; }
.log { max-height: 56vh; overflow: auto; display: grid; gap: 4px; }
.log div { display: flex; gap: 10px; color: var(--ink-2); }
.log time { color: var(--muted); min-width: 74px; font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; align-items: center; gap: 5px; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.tag.bad::before, .tag.inc::before { background: var(--critical); } .tag.warn::before { background: var(--warning); } .tag.auto::before { background: var(--accent); }
.tag { white-space: nowrap; min-width: 44px; }
.slowchk { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; white-space: nowrap; cursor: pointer; }
.slowchk input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }
.speed.slowed button[aria-pressed="true"] { background: rgba(250, 178, 25, 0.28); }
td .lt { justify-content: flex-end; }
.inclist { display: grid; grid-template-columns: auto auto 1fr; gap: 3px 14px; margin: 6px 0 4px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fold { margin: 6px 0 10px; color: var(--ink-2); }
.fold summary { cursor: pointer; }

/* ── 소리 설정 ── */
.pop { position: fixed; top: 70px; right: 12px; width: 240px; z-index: 8; padding: 12px 14px; background: rgba(24, 25, 24, 0.97); }
.pop > b, .soundpick > b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.soundrows { display: grid; gap: 2px; margin-top: 6px; }
.soundrows .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 30px; cursor: pointer; }
.soundrows .row span { color: var(--ink); }
.field.vol { margin-top: 6px; }
.hint { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.hint:empty { display: none; }

/* ── 예상 성적표 ── */
/* 계기판 왼쪽 아래에 떠 있다. 접으면(기본) 등급 · 수량 · 손익만 한 줄, 펴면 현장과 견준 내용까지 */
:root { --fcw: clamp(264px, calc(100vw - 1096px), 300px); }
/* 두 카드는 한 기둥에 위아래로 쌓인다(서로 겹칠 수 없다). 접으면 한 줄, 펴면 내용만큼 위로 자란다 */
.dock { position: fixed; right: 372px; bottom: 52px; z-index: 4; width: var(--fcw); display: flex; flex-direction: column; gap: 6px; }
.fcard { padding: 9px 11px 10px; border-radius: 12px; }
.fcard:not(.open) { padding: 5px 6px 5px 7px; }
.fcard:not(.open) > header { margin: 0; }
.fcard:not(.open) > header > :is(b, span, .mini:not(.foldbtn)), .fcard:not(.open) > .fcbody { display: none; }
.fcard.open .fcmini { display: none; }
.fcmini { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 26px; color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left; }
.fcmini .gr { flex: none; display: inline-flex; align-items: baseline; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; background: rgba(57, 135, 229, 0.22); color: #dbe9fc; line-height: 24px; }
.fcmini .gr b { font-size: 15px; font-weight: 750; } .fcmini .gr small { font-size: 11px; color: #b9d2f5; }
.fcmini .it i { font-style: normal; color: var(--muted); font-size: 11px; margin-right: 4px; }
.fcmini .it b { color: var(--ink); font-weight: 650; }
.fcmini .dl { color: var(--ink-2); font-size: 11px; }
.fcmini .dl.up { color: var(--good-ink); } .fcmini .dl.down { color: var(--bad-ink); }
.fcmini .verdict { margin: 0; height: 24px; }
.fcard .goals { grid-template-columns: auto auto 1fr; gap: 3px 8px; font-size: 12px; }
.fcard .goals .g { white-space: nowrap; } .fcard .goals .t { white-space: normal; }
.fcmini .wait { color: var(--muted); padding-left: 3px; }
.mini.foldbtn { flex: none; width: 24px; padding: 0; display: inline-grid; place-items: center; }
.mini.foldbtn svg { width: 12px; height: 12px; transition: transform 0.2s; }
.fcard.open .mini.foldbtn svg { transform: rotate(180deg); }
.coach { max-width: calc(100vw - 316px - 372px - var(--fcw) - 8px); }
/* 창이 좁아 교관 상자와 겹칠 때는 과실 띠 아래(오른쪽 위)로 올린다 */
@media (min-width: 1081px) and (max-width: 1259px) { .dock { bottom: auto; top: 270px; } .coach { max-width: none; } }
/* 그 폭에서는 날씨 현황판도 줄인다(오늘 최저~최고 기온과 일사 합은 뺀다): 왼쪽 알림이 설 자리를 남긴다 */
@media (min-width: 1081px) and (max-width: 1239px) { .wxboard { width: 250px; } .wxboard .now { grid-template-columns: 88px minmax(0, 1fr); } .wxboard .now .rng, .wxboard .wxgrid > div:nth-child(4) { display: none; } .wxboard .wxgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .alerts { max-width: max(230px, calc(100vw - 950px)); } }
.fcard > header { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.fcard > header b { font-size: 13px; font-weight: 650; white-space: nowrap; }
.fcard > header > span { color: var(--muted); font-size: 11px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--hair); color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.mini:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.mini.gold { border-color: rgba(226, 192, 106, 0.7); color: #ffdf9c; } .mini.gold:hover { background: rgba(210, 171, 76, 0.24); color: #ffe9b8; }
.fcbody { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; transition: opacity 0.2s; }
.fcbody.wait { opacity: 0.55; }
.fgrade { width: 56px; height: 58px; border-radius: 12px; display: grid; place-items: center; align-content: center; background: rgba(57, 135, 229, 0.2); color: #dbe9fc; }
.fgrade b { font-size: 28px; font-weight: 750; line-height: 1; }
.fgrade small { font-size: 11px; color: #b9d2f5; margin-top: 4px; font-variant-numeric: tabular-nums; }
.frows { display: grid; gap: 3px; font-variant-numeric: tabular-nums; min-width: 0; }
.frow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; white-space: nowrap; }
.frow .k { color: var(--ink-2); font-size: 12px; }
.frow b { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.frow b small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
.frow .ref { margin-left: auto; color: var(--muted); font-size: 11px; }
.fbar { position: relative; height: 4px; border-radius: 2px; background: rgba(57, 135, 229, 0.2); margin: 1px 0 3px; }
.fbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); }
.fbar u { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--ink-2); }
.fdelta { grid-column: 1 / -1; color: var(--ink-2); font-size: 11px; margin-top: -2px; font-variant-numeric: tabular-nums; }
.fmsg { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.fcbody .goals, .fcbody .verdict { grid-column: 1 / -1; }
.fcbody .verdict { margin: 0; height: 24px; justify-self: start; }
.tips { margin: 4px 0 10px; }

/* ── 길잡이 ── */
.tour { position: fixed; inset: 0; z-index: 30; }
.tour-hole {
  position: fixed; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(6, 8, 10, 0.68); outline: 1.5px solid rgba(255, 255, 255, 0.5);
  transition: left 0.28s ease, top 0.28s ease, width 0.28s ease, height 0.28s ease;
}
.tour-hole.none { outline: none; }
/* 설명 상자는 뒤의 어두운 판들과 뚜렷이 갈리게 밝은 크림색 바탕에 짙은 초록 글, 금빛 테(첫 화면의 시작 단추와 같은 색) */
.tour-card { position: fixed; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; background: #f6f1e3; color: #1f3a2e; border: 1px solid #e2c06a; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(240, 185, 75, 0.3); -webkit-backdrop-filter: none; backdrop-filter: none; transition: left 0.28s ease, top 0.28s ease; }
.tour-card .badge { background: #3f8f66; color: #fff; }
.tour-card .remain { color: #6b7a70; }
.tour-card .ghost { color: #4c6a5c; } .tour-card .ghost:hover { background: rgba(31, 58, 46, 0.1); color: #1f3a2e; }
.tour-card .tourbtns .primary.alt { background: rgba(31, 58, 46, 0.12); color: #1f3a2e; } .tour-card .tourbtns .primary.alt:hover { background: rgba(31, 58, 46, 0.2); }
.tour-card .tourbtns .primary:not(.alt) { background: #2f7d58; color: #fff; } .tour-card .tourbtns .primary:not(.alt):hover { background: #37916a; }
.tour-card header { display: flex; align-items: center; gap: 8px; padding-left: 66px; min-height: 24px; }
.tour-card header b { font-size: 15px; font-weight: 700; color: #17352a; }
.tour-card p { margin: 0; color: #24382e; font-size: 14px; line-height: 1.6; }
.tourbtns { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.tourbtns .primary { margin-top: 0; height: 32px; }
.tourbtns .primary + .primary { background: var(--accent); margin-left: 0; }

/* ── 첫 방문 안내 · 다음 추천 ── */
dialog.sheet.narrow { width: min(760px, calc(100vw - 32px)); }
.path { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sheet .path li { margin: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.03); display: grid; gap: 2px; align-content: start; }
.path li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(57, 135, 229, 0.25); color: #dbe9fc; font-style: normal; font-weight: 650; font-size: 12px; margin-bottom: 6px; }
.path li b { font-size: 14px; font-weight: 650; color: var(--ink); }
.path li span { color: var(--muted); font-size: 12px; }
.soundpick { border-top: 1px solid var(--hair); padding-top: 12px; }
.soundpick .soundrows { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 26px; }
.btnrow { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.btnrow .primary { margin-top: 0; }
.dlghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dlghead .ghost { border: 1px solid var(--hair); }
.nextup { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 16px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.04); }
.nextup:empty { display: none; }
.cropseg { margin: 0 0 12px; } .cropseg button { height: 32px; font-size: 13px; }
.nextup .t { flex: 1; min-width: 0; }
.nextup .t small { display: block; color: var(--muted); font-size: 11px; }
.nextup .t b { font-size: 15px; font-weight: 650; }
.nextup .t span { color: var(--ink-2); margin-left: 8px; font-size: 12px; }
.nextup .primary { margin-top: 0; white-space: nowrap; }
.lesson.next { border-color: rgba(57, 135, 229, 0.75); background: rgba(57, 135, 229, 0.1); }
.lesson.next .st { color: #cfe2fb; }

/* ── 앞 화면: 타이틀 · 메인 메뉴 ── */
/* 온실은 뒤에서 그대로 돌고, 글 쪽(왼쪽)과 바닥만 어둡게 덮는다. 끌어서 돌릴 수 있게 덮개는 누름을 받지 않는다 */
.front {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s 0.4s;
  background: linear-gradient(90deg, rgba(8, 10, 12, 0.84) 0, rgba(8, 10, 12, 0.66) 32%, rgba(8, 10, 12, 0) 66%), linear-gradient(0deg, rgba(8, 10, 12, 0.55) 0, rgba(8, 10, 12, 0) 20%);
}
body.front-on .front { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
body.front-on :is(.top, .panel, .coach, .actuators, .hud, .fcard, .alerts, .pop, .stage) { opacity: 0; visibility: hidden; pointer-events: none; }
:is(.top, .panel, .coach, .actuators, .hud, .fcard) { transition: opacity 0.45s ease; }
.front-col {
  position: absolute; left: clamp(28px, 6vw, 104px); top: 0; bottom: 34px; width: min(720px, calc(100vw - 56px));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.front-col > *, .front-foot button { pointer-events: auto; }
/* 제목: 엠블럼 아래에 직접 그린 글자(벡터). 글자색은 크림, 작은 줄은 세이지, 동그라미 하나는 해의 겨자색 */
.logo { width: min(540px, 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; transition: width 0.3s ease; animation: rise 0.8s 0.1s backwards cubic-bezier(0.2, 0.7, 0.2, 1); }
.logo .emblem { width: clamp(56px, 5vw, 76px); height: auto; margin-left: -7px; }
.logo h1 { margin: 0; width: 100%; line-height: 0; color: #f3efe4; }
.logo h1 svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.4)); }
.tagline { margin: 20px 0 0; max-width: 28em; font-size: 15.5px; line-height: 1.65; letter-spacing: 0.01em; color: var(--ink-2); word-break: keep-all; text-wrap: balance; animation: rise 0.8s 0.3s backwards cubic-bezier(0.2, 0.7, 0.2, 1); }
/* 시작 단추: 크림색 알약 + 그린 글자 + 겨자색 화살표 */
.go {
  margin-top: 32px; display: inline-flex; align-items: center; gap: 16px; height: 58px; padding: 0 10px 0 28px; border-radius: 29px;
  background: #f3efe4; color: #24493a; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); transition: transform 0.15s, background 0.15s;
  animation: rise 0.8s 0.5s backwards cubic-bezier(0.2, 0.7, 0.2, 1);
}
.go-label svg { display: block; height: 22px; width: auto; }
.go-arrow { width: 38px; height: 38px; border-radius: 50%; background: #f0b94b; display: grid; place-items: center; transition: transform 0.2s; }
.go-arrow svg { width: 16px; height: 16px; }
.go:not(:disabled) { animation: rise 0.8s 0.5s backwards cubic-bezier(0.2, 0.7, 0.2, 1), breathe 2.8s 1.5s ease-in-out infinite; }
.go:not(:disabled):hover { background: #fff; transform: translateY(-1px); }
.go:not(:disabled):hover .go-arrow { transform: translateX(3px); }
.go:not(:disabled):active { transform: scale(0.97); }
.go:disabled { opacity: 0.6; cursor: default; }
.go:disabled .go-arrow svg { display: none; }      /* 불러오는 동안에는 화살표 자리에 도는 고리 */
.go:disabled .go-arrow::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #24493a; border-right-color: transparent; animation: spin 0.9s linear infinite; }
.go-msg { margin: 12px 4px 0; color: var(--ink-2); font-size: 12px; }
.go-msg:empty { display: none; }
/* 브라우저가 누르기 전에는 소리를 막으므로, 첫 화면 곡이 아직 못 나고 있을 때만 알려 준다 */
.front-sound { display: flex; align-items: center; gap: 7px; margin: 16px 4px 0; color: var(--ink-2); font-size: 12.5px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); animation: rise 0.8s 0.9s backwards; }
.front-sound svg { width: 17px; height: 17px; flex: none; }
.front[data-stage="menu"] .front-sound { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.front[data-stage="menu"] .front-actions, .front[data-stage="menu"] .go-msg, .front[data-stage="title"] .front-menu, .front[data-stage="title"] .front-note { display: none; }
.front-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.front-actions .go { margin-top: 0; }
/* 소개 영상 보기: 시작 단추 옆의 가벼운 단추 */
.film-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 14px; border-radius: 23px; color: #f3efe4; font-size: 14.5px; font-weight: 550;
  border: 1px solid rgba(243, 239, 228, 0.45); background: rgba(16, 20, 18, 0.35); transition: background 0.15s, border-color 0.15s, transform 0.15s;
  animation: rise 0.8s 0.62s backwards cubic-bezier(0.2, 0.7, 0.2, 1);
}
.film-btn svg { width: 22px; height: 22px; color: #f0b94b; }
.film-btn:hover, .film-btn:focus-visible { background: rgba(243, 239, 228, 0.16); border-color: #f0b94b; transform: translateY(-1px); outline: none; }

/* ── 소개 영상 ── */
/* 위아래 검은 띠(영화 화면비), 아래쪽 자막, 맨 아래 진행 줄. 뒤의 온실은 그대로 보인다 */
.film { position: fixed; inset: 0; z-index: 40; color: #f3efe4; animation: fade 0.5s ease-out; }
.film::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 6, 0.8) 0, rgba(5, 6, 6, 0.25) 48%, rgba(5, 6, 6, 0) 70%); }
.film-bar { position: absolute; left: 0; right: 0; height: 10vh; background: #050606; }
.film-bar.top { top: 0; } .film-bar.bottom { bottom: 0; }
/* 위쪽: 검은 띠 대신 위에서 아래로 옅어지는 그늘만 깔아 제목이 잘 보이게 한다. 화면 머리(.top)의 규칙(좁은 화면의 여백 · 높이 포함)에 휘둘리지 않게 자리와 크기를 모두 적는다 */
.film .film-bar.top { display: block; left: 0; right: 0; top: 0; height: clamp(96px, 18vh, 170px); min-height: 0; opacity: 1; visibility: visible; padding: 0; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: auto; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 6, 0.7) 0, rgba(5, 6, 6, 0.4) 50%, rgba(5, 6, 6, 0) 100%); }
.film-cap { position: absolute; left: clamp(26px, 7vw, 120px); right: clamp(26px, 7vw, 120px); bottom: calc(10vh + 30px); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.film-cap.in { animation: capin 0.7s both cubic-bezier(0.2, 0.7, 0.2, 1); }
.film-cap small { font-size: 12px; letter-spacing: 0.16em; color: #f0b94b; font-variant-numeric: tabular-nums; }
.film-cap h2 { margin: 6px 0 8px; font-size: clamp(26px, 3.6vw, 48px); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; word-break: keep-all; }
.film-cap p { margin: 0; max-width: 36em; font-size: clamp(14px, 1.5vw, 19px); line-height: 1.6; color: rgba(243, 239, 228, 0.9); word-break: keep-all; }
/* 로고: 위쪽 검은 띠 안, 왼쪽. 자막은 아래에만 둔다 */
.film-logo { position: absolute; left: clamp(26px, 7vw, 120px); right: clamp(26px, 7vw, 120px); top: 0; height: max(10vh, 68px); display: flex; align-items: center; }
.film-logo svg { display: block; height: min(50px, 6.8vh); max-width: 100%; width: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7)); }
.film-art:empty { min-height: 0; margin-bottom: 0; }
.film-art { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 58px; margin-bottom: 16px; text-shadow: none; }
.film-art > svg, .film-art .pic svg { display: block; width: 58px; height: 58px; }
.film-art .wm svg { display: block; width: min(360px, 60vw); height: auto; }
.film-art .pill2 { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 15px; background: rgba(16, 20, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 13.5px; }
.film-art .pill2 i { width: 8px; height: 8px; border-radius: 50%; background: #d9785a; }
.film-art .pill2.soon { color: #ff6b5e; border-color: rgba(255, 107, 94, 0.6); }
.film-art .dotno { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 239, 228, 0.92); color: #24493a; font-weight: 700; font-size: 13.5px; }
.film-art .face { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: #22302a; border: 1.5px solid rgba(243, 239, 228, 0.75); margin-right: 6px; }
.film-art .face svg { width: 100%; height: 100%; }
.film-art .gradebox { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; background: rgba(57, 135, 229, 0.3); font-size: 32px; font-weight: 750; }
.film-art .bars { display: grid; gap: 4px; width: 150px; } .film-art .bars i { display: block; height: 4px; border-radius: 2px; background: #f0b94b; animation: grow 1.2s both ease-out; transform-origin: left; }
.film-ctrl { position: absolute; left: clamp(26px, 7vw, 120px); right: clamp(26px, 7vw, 120px); bottom: calc(5vh - 15px); display: flex; align-items: center; gap: 16px; }
.film-ctrl { gap: 10px; }
.film-ctrl .fbtn { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #f3efe4; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); transition: background 0.15s; }
.film-ctrl .fbtn:hover, .film-ctrl .fbtn:focus-visible { background: rgba(255, 255, 255, 0.2); outline: none; }
.film-ctrl .fbtn svg { display: block; width: 18px; height: 18px; }
.film-ctrl .fbtn.main { width: 40px; height: 40px; background: #f0b94b; border-color: #f0b94b; color: #1d1d1c; }
.film-ctrl .fbtn.main:hover, .film-ctrl .fbtn.main:focus-visible { background: #f7cd72; }
.film-ctrl .fbtn.main svg { width: 20px; height: 20px; }
.film-ctrl .ftime { flex: none; min-width: 84px; color: rgba(243, 239, 228, 0.85); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center; }
/* 재생 위치 막대: 누르기 쉽게 위아래로 넉넉한 자리를 두고, 가는 줄과 장면 경계 눈금을 그린다 */
.film-prog { position: relative; flex: 1; height: 22px; cursor: pointer; touch-action: none; }
.film-prog::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
.film-prog > i { position: absolute; left: 0; top: 9px; height: 4px; width: 0; border-radius: 2px; background: #f0b94b; }
.film-prog > i::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #f0b94b; box-shadow: 0 0 0 3px rgba(240, 185, 75, 0.25); }
.film-prog .marks i { position: absolute; top: 7px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: rgba(5, 6, 6, 0.9); }
.film-prog:focus-visible { outline: 1px solid rgba(240, 185, 75, 0.7); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) { .film-ctrl { gap: 6px; } .film-ctrl .ftime { min-width: 70px; font-size: 11.5px; } .film-ctrl .fbtn { width: 30px; height: 30px; } .film-ctrl .fbtn.main { width: 36px; height: 36px; } }
body.film-on .front { opacity: 0; visibility: hidden; }
@keyframes capin { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .film-cap.in, .film-art .bars i { animation: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes breathe { 50% { box-shadow: 0 10px 46px rgba(240, 185, 75, 0.5); } }

/* ── 메인 메뉴: 이어하기(크림 알약) · 모드 카드 셋 · 보조 단추 ── */
.front[data-stage="menu"] .logo { width: min(450px, 100%); }
.front-menu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-self: stretch; margin-top: 22px; max-width: 690px; }      /* 칸의 최소 폭을 0 으로: 긴 글(이어하기의 작기 이름)이 메뉴 전체를 화면 밖으로 밀어내지 않게 */
.resume {
  display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 9px 0 24px; border-radius: 28px; text-align: left;
  background: #f3efe4; color: #24493a; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); transition: transform 0.15s, background 0.15s;
  animation: rise 0.3s backwards cubic-bezier(0.2, 0.7, 0.2, 1);
}
.resume .name svg { display: block; height: 20px; width: auto; }
.resume .sub { flex: 1; min-width: 0; text-align: right; font-size: 12.5px; color: #4c6a5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.resume:hover, .resume:focus-visible { background: #fff; transform: translateY(-1px); outline: none; }
.resume:hover .go-arrow, .resume:focus-visible .go-arrow { transform: translateX(3px); }
.resume:active { transform: scale(0.985); }
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* 모드 카드: 뒤의 온실이 비치는 반투명 유리. 넷 다 같은 모양이고, 올라갔을 때만 떠오르며 테가 겨자색으로 바뀐다 */
.mcard {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; aspect-ratio: 1 / 1.07; padding: 13px 14px 13px; border-radius: 18px; text-align: left;
  color: #f3efe4; background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.2); --card: #1c231f;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  transition: transform 0.16s, background 0.16s, border-color 0.16s, box-shadow 0.16s;
  animation: rise 0.34s backwards cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mcard:nth-child(2) { animation-delay: 0.04s; } .mcard:nth-child(3) { animation-delay: 0.08s; } .mcard:nth-child(4) { animation-delay: 0.12s; }
.mcard .no { font-size: 11px; letter-spacing: 0.08em; color: rgba(243, 239, 228, 0.55); font-variant-numeric: tabular-nums; }
.mcard .art { flex: 1 0 46px; display: flex; align-items: center; }
.mcard .art svg { display: block; width: 46px; height: 46px; margin-left: -3px; }
.mcard .name svg { display: block; height: 18px; width: auto; margin-top: 3px; }
.mcard .sub { margin-top: 8px; font-size: 12px; line-height: 1.4; color: rgba(243, 239, 228, 0.82); white-space: nowrap; }
.mcard .stat { margin-top: 2px; font-size: 12px; font-weight: 600; color: #f0b94b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcard .stat.trial { color: #f7c04a; }                /* 시험운영 */
.mcard:hover, .mcard:focus-visible { transform: translateY(-6px); border-color: #f0b94b; background: rgba(255, 255, 255, 0.15); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36), 0 0 0 1px #f0b94b; outline: none; }
.mcard:active { transform: translateY(-2px) scale(0.985); }
/* 지금 할 차례: 카드 색은 그대로 두고 오른쪽 위에 작은 글만 붙인다 */
.mcard .pick { position: absolute; top: 12px; right: 13px; font-size: 11px; font-weight: 600; font-style: normal; color: #f0b94b; white-space: nowrap; }
.soonmark { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin-bottom: 8px; border-radius: 11px; background: rgba(255, 107, 94, 0.16); color: #ff6b5e; font-size: 12px; font-weight: 650; }
.extras { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0 0 -6px; animation: rise 0.34s 0.14s backwards cubic-bezier(0.2, 0.7, 0.2, 1); }
.extra { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); font-size: 13px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); transition: background 0.15s, color 0.15s; }
.extra .ic svg { display: block; width: 18px; height: 18px; --knob: #1a1f1c; }
.extra:hover, .extra:focus-visible { background: rgba(255, 255, 255, 0.14); color: var(--ink); outline: none; }
.extra.reset b { font-weight: inherit; } .extra.reset[data-arm="1"] { color: #f0b94b; }

/* 일시정지 메뉴의 줄 */
.menulist { display: grid; gap: 2px; align-self: stretch; }
.mi {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; text-align: left; padding: 9px 14px; border-radius: 10px;
  border: 1px solid transparent; transition: background 0.15s, transform 0.15s;
}
.mi b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.mi span { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi:hover, .mi:focus-visible { background: rgba(255, 255, 255, 0.09); transform: translateX(4px); outline: none; }
.mi:hover span, .mi:focus-visible span { color: var(--ink-2); }
.mi:active { background: rgba(255, 255, 255, 0.16); transform: translateX(4px) scale(0.99); }
.mi.rec { border-color: rgba(57, 135, 229, 0.75); background: rgba(57, 135, 229, 0.1); }
.front-note { margin: 10px 14px 0; min-height: 18px; color: var(--ink-2); font-size: 12px; }
.front-foot {
  position: absolute; left: clamp(28px, 6vw, 104px); right: clamp(28px, 6vw, 104px); bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  color: var(--muted); font-size: 12px;
}
.front-foot .sp { flex: 1; }
/* 이름표(만든이 · 자료)와 내용을 다르게: 이름표는 가는 테의 작은 알약, 이름은 밝고 굵게, 덧붙임은 옅게 */
.lbl { display: inline-block; margin-right: 8px; padding: 1px 7px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 9px; font-style: normal; font-size: 11px; line-height: 1.5; color: var(--muted); }
.front-foot button b, .infomaker b { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.front-foot button span, .infomaker .who span { margin-left: 9px; color: var(--ink-2); }      /* 이름과 직함 사이는 넉넉히 띄운다 */
.front-foot button:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-height: 760px) { .front[data-stage="menu"] .tagline, .front[data-stage="menu"] .emblem { display: none; } .front-menu { margin-top: 18px; } .mi { padding: 6px 14px; } }
@media (max-height: 640px) and (min-width: 1081px) { .front-menu { max-width: 610px; } .mcard { padding: 10px 12px 11px; } .mcard .art svg { width: 42px; height: 42px; } .mcard .name svg { height: 17px; } }
@media (max-height: 560px) and (min-width: 1081px) { .mcard .sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .front *, .mi { animation: none !important; transition: none !important; } }
body.lite .mcard { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(22, 27, 24, 0.7); }


/* ── 일시정지 · 설정 · 기록 · 만든이 ── */
dialog.sheet.menu { width: min(430px, calc(100vw - 32px)); }
.setrow { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 18px; padding: 13px 0; border-top: 1px solid var(--hair); }
.setrow > b { font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 6px; }
.setrow .soundrows { margin-top: 0; }
.setrow .seg { max-width: 280px; }
.ghost.line { border: 1px solid var(--hair); }
.rectabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 26px; align-items: start; }
.rectabs h3 { margin: 0 0 2px; }
.res td .lt { justify-content: flex-start; }
.maker { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 26px; align-items: center; margin: 0 0 2px; }
.maker img { display: block; width: 200px; height: auto; }
.maker figcaption { display: grid; gap: 7px; }
.maker p { margin: 0; font-size: 13.5px; line-height: 1.65; word-break: keep-all; }
.maker .mk-kicker { color: var(--muted); font-size: 12px; }
.maker .mk-name { font-size: 23px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; }
.maker .mk-name span { margin-left: 8px; font-size: 14px; font-weight: 600; color: #9cc3f3; }
.maker .mk-field b { margin-right: 6px; font-weight: 600; color: var(--ink); }
.maker .mk-msg { margin-top: 4px; }
.maker a { justify-self: start; font-size: 14px; color: #9cc3f3; text-decoration: none; }
.maker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.infomaker { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  .maker { grid-template-columns: 1fr; justify-items: center; text-align: center; } .maker img { width: 150px; } .maker a { justify-self: center; }
  .rectabs { grid-template-columns: 1fr; } .setrow { grid-template-columns: 1fr; } .setrow > b { padding-top: 0; }
}

@media (max-width: 1500px) { .brand span { display: none; } }
@media (max-width: 1420px) { .brand b { display: none; } }
@media (max-height: 800px) and (min-width: 1081px) { .right { gap: 8px; } .gauge { padding: 4px 9px 3px; } .gauge .gh { min-height: 23px; } .gauge .v { font-size: 18px; } }

/* ── 좁은 화면 ── */
@media (max-width: 1080px) {
  html, body { height: auto; }             /* 본문이 내용만큼 길어져야 온실 화면이 끝까지 따라온다 */
  body { overflow: visible; min-height: 100vh; }
  #scene { position: sticky; top: 0; height: 52vh; z-index: 0; }
  .top { top: 8px; left: 8px; right: 8px; height: auto; min-height: 46px; flex-wrap: wrap; padding: 8px 10px 20px; gap: 6px; }
  .brand, #logBtn, .speed .per, .top .spacer { display: none; }
  .pill { order: 1; max-width: 100%; overflow: hidden; }
  .clock { order: 2; margin-right: auto; }
  #soundBtn { order: 3; }
  #guideBtn, #quitBtn { order: 4; }
  .speed { order: 5; margin-right: auto; }
  .speed button { min-width: 26px; padding: 0 7px; }
  #adviceBtn, #diaryBtn { order: 6; }
  #infoBtn { order: 7; }
  .panel, .coach { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: auto; margin: 10px 8px; }
  .coach { margin-top: 38px; }               /* 위로 걸친 교관 아바타 자리 */
  .tabbody, .coachbody { max-height: none; }
  .actuators { position: absolute; left: 8px; right: 8px; bottom: auto; top: calc(52vh - 34px); flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
  .hud { display: contents; }
  .views { position: absolute; z-index: 3; right: 12px; top: calc(52vh - 70px); }
  .fruitbar { position: absolute; z-index: 3; left: 8px; right: auto; top: calc(52vh - 108px); }
  .wxboard { position: absolute; z-index: 3; left: 8px; top: calc(52vh - 230px); max-width: calc(100vw - 16px); cursor: pointer; }
  /* 날씨 현황판: 좁은 화면에서는 온실을 가리지 않게 한 줄(하늘 그림 · 외기온 · 날씨)로 접어 과실 띠 바로 위에 둔다. 누르면 펼쳐진다(.open) */
  .wxboard:not(.open) { top: calc(52vh - 151px); width: auto; grid-template-columns: 26px auto 14px; column-gap: 7px; row-gap: 0; padding: 4px 9px 4px 8px; border-radius: 18px; }
  .wxboard:not(.open) .sky { width: 26px; height: 26px; }
  .wxboard:not(.open) .now { grid-template-columns: 60px 52px; }
  .wxboard:not(.open) .now .t { font-size: 17px; } .wxboard:not(.open) .now .t small { font-size: 11px; }
  .wxboard:not(.open) .now .st { font-size: 12.5px; }
  .wxboard:not(.open) .now .rng, .wxboard:not(.open) .wxgrid { display: none; }
  .wxboard .wxmore { display: grid; place-items: center; width: 14px; height: 14px; color: var(--ink-2); } .wxboard .wxmore svg { width: 12px; height: 12px; }
  .wxboard.open { grid-template-columns: 44px minmax(0, 1fr) 14px; } .wxboard.open .wxmore { transform: rotate(180deg); align-self: start; margin-top: 4px; }
  .dock { display: contents; }
  .stage { left: 50%; top: 27vh; }
  .stagecard { max-width: calc(100vw - 24px); }
  .fcard, .fcard:not(.open) { position: relative; right: auto; bottom: auto; width: auto; max-width: none; margin: 10px 8px; padding: 9px 11px 10px; }
  .fcard:not(.open) > header { margin: 0; }
  .coach { max-width: none; }
  .gauge { min-height: 104px; }
  .alerts { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; flex-direction: column-reverse; }
  /* 알림: 아래쪽 조작판 위에 겹쳐 뜨므로, 어두운 판과 뚜렷이 갈리게 밝은 바탕에 짙은 글 + 종류마다 다른 색 테 */
  body .alerts .toast { padding: 9px 13px; background: #f6f1e3; color: #1c2b23; border: 1.5px solid rgba(31, 58, 46, 0.32); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 13.5px; font-weight: 550; }
  body .alerts .toast small { color: #5d6b62; }
  body .alerts .toast.bad, body .alerts .toast.inc { background: #fce8e3; border-color: #d03b3b; }
  body .alerts .toast.warn { background: #fcf1cc; border-color: #d99a0b; }
  body .alerts .toast.work .ic, body .alerts .toast.wx .ic { background: #3f8f66; color: #fff; }
  body .alerts .toast.auto .ic { background: #3987e5; color: #fff; }
  body .alerts .inc { background: #4d1712; border: 1.5px solid #ff7a6c; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); } body .alerts .inc p { color: #ffd9d3; }
  .slowchk { order: 5; }
  .pop { top: 124px; right: 8px; }
  .path, .soundpick .soundrows { grid-template-columns: 1fr; }
  .gauge .spark { flex-basis: 60px; }
  .nextup { flex-wrap: wrap; }
  /* 앞 화면: 온실을 화면 가득 깔고, 글은 아래쪽에 모은다 */
  body.front-on { overflow: hidden; height: 100dvh; min-height: 0; }
  body.front-on #scene { position: fixed; top: 0; height: 100%; }
  .front { background: linear-gradient(0deg, rgba(8, 10, 12, 0.9) 0, rgba(8, 10, 12, 0.7) 52%, rgba(8, 10, 12, 0.18) 100%); }
  .front-col { left: 20px; right: 20px; width: auto; bottom: 62px; justify-content: flex-end; }
  .logo { gap: 10px; } .logo .emblem { width: 50px; }
  .tagline { margin-top: 12px; font-size: 14px; }
  .front-menu { margin-top: 14px; gap: 8px; }
  .front[data-stage="menu"] .tagline { display: none; }
  .modes { grid-template-columns: 1fr; gap: 8px; }
  .mcard { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; aspect-ratio: auto; padding: 10px 14px 11px 10px; border-radius: 16px; }
  .mcard .no { display: none; }
  .mcard .art { grid-row: 1 / 3; display: block; } .mcard .art svg { width: 50px; height: 50px; margin: 0; }
  .mcard .name { align-self: end; display: flex; flex-wrap: wrap; gap: 0 9px; } .mcard .name svg { height: 18px; margin-top: 0; }
  .mcard .sub { margin-top: 4px; align-self: start; font-size: 12px; }
  .front[data-stage="menu"] .logo { width: 100%; }
  .mcard .stat { position: absolute; right: 14px; bottom: 10px; margin: 0; font-size: 11.5px; }
  .mcard .pick { top: 9px; right: 12px; }
  .mcard .sub { white-space: normal; }
  .resume { height: 50px; } .resume .name svg { height: 18px; }
  .mi { padding: 8px 12px; } .mi b { font-size: 17px; }
  .front-foot { left: 20px; right: 20px; bottom: 14px; font-size: 11px; gap: 2px 12px; }
  .front-foot .sp { display: none; }
}

/* ── 용어 풀이: 점선 밑줄 낱말 + 떠 있는 풀이 ───────────────────────── */
.term { border-bottom: 1px dotted rgba(255, 255, 255, 0.45); cursor: help; }
.term:hover, .term:focus-visible { border-bottom-color: var(--ink); outline: none; }
.tip { position: fixed; z-index: 60; max-width: 260px; padding: 9px 11px; border-radius: 10px; background: rgba(22, 26, 24, 0.97); border: 1px solid var(--hair); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); color: var(--ink-2); font-size: 12px; line-height: 1.55; pointer-events: none; }
.tip b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 12.5px; font-weight: 650; }

/* ── 과정별로 쓰는 조작만 보이기 ─────────────────────────────────────── */
.focusnote { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 12px 10px; padding-top: 9px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 11px; }
.focusnote[hidden] { display: none; }
.lessonhead { margin: 6px 2px 0; color: var(--muted); font-size: 11.5px; }
.coachbody .check { margin-top: 6px; color: var(--ink-2); font-size: 12px; }

/* ── 시간대별 난방: 켜고 끄는 줄 + 하루 흐름 ─────────────────────────── */
.field.toggle { grid-template-columns: 1fr auto; padding: 3px 0 2px; }
.field.toggle .rec { color: var(--muted); font-size: 11px; }
.zonegraph { margin: 3px 0 0; }
.zonegraph[hidden] { display: none; }
.zonegraph svg { display: block; width: 100%; height: auto; overflow: visible; }
.zonegraph .ax { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.zonegraph .mk { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; stroke-dasharray: 2 3; }
.zonegraph .ln { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.zonegraph .at { fill: #f0efec; stroke: var(--accent); stroke-width: 1.5; }
.zonegraph text { fill: var(--muted); font-size: 9.5px; }
.zonegraph .tm { fill: var(--ink-2); font-size: 9px; }

/* ── 양액 탭 ─────────────────────────────────────────────────────────── */
.tabbody[data-body="feed"] .seg { grid-template-columns: repeat(2, 1fr); margin-top: 14px; }
.tabbody[data-body="feed"] #feedFields { margin-top: 10px; }
.stat .k > span:first-child { min-width: 0; }

/* ── 지역 안내: 한반도 윤곽에서 그 시군으로 다가간다 ─────────────────── */
.region { position: fixed; inset: 0; z-index: 30; overflow: hidden; opacity: 0; transition: opacity 0.4s ease; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 46%, #15251e 0, #0d1613 72%); }
.region[hidden] { display: none; }
.region.in { opacity: 1; }
.region.out { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.region-map { position: absolute; inset: 0; }
.region-map svg { display: block; width: 100%; height: 100%; }
/* 지도: 통계지역경계에서 뽑은 뭍과 시도 경계선(region.js). 경위선, 이북의 흐린 뭍, 해안의 얕은 물빛, 땅의 그림자, 서쪽이 조금 밝은 뭍, 가는 경계선 — 겹쳐 그리기만 하고 필터는 쓰지 않는다 */
.region-map .grat line { stroke: rgba(255, 255, 255, 0.045); stroke-width: 1; vector-effect: non-scaling-stroke; }
.region-map .far { fill: #17271f; stroke: rgba(165, 216, 184, 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.region-map .shelf { fill: none; stroke: rgba(130, 205, 210, 0.1); stroke-width: 9; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.region-map .shade { fill: rgba(0, 0, 0, 0.36); }
.region-map .land { fill: url(#rgLand); stroke: #a5d8b8; stroke-opacity: 0.8; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.region-map .sido { fill: none; stroke: #dcefd0; stroke-opacity: 0.5; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.region-map .city { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; margin: -8px 0 0 -2px; color: rgba(243, 239, 228, 0.5); font-size: 11.5px; white-space: nowrap; will-change: transform; }
.region-map .city i { width: 4px; height: 4px; border-radius: 50%; background: rgba(243, 239, 228, 0.55); }
.region-map .spot { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; --r: 12px; }
.region-map .spot::before { content: ""; position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: #f0b94b; }
.region-map .spot::after { content: ""; position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; border: 1px solid rgba(240, 185, 75, 0.85); animation: spotring 1.8s ease-out infinite; }
@keyframes spotring { 0% { transform: scale(0.72); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
.region-cap { position: absolute; left: 50%; top: 50%; width: min(520px, 86vw); margin-top: 78px; transform: translate(-50%, 10px); text-align: center; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.region.named .region-cap { opacity: 1; transform: translate(-50%, 0); }
.region-cap small { display: block; color: #a8d5b7; font-size: 12.5px; letter-spacing: 0.04em; }
.region-cap h2 { margin: 6px 0 4px; color: #f3efe4; font-size: clamp(30px, 4.2vw, 46px); font-weight: 750; letter-spacing: -0.01em; }
.region-cap p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.region-src { position: absolute; right: 16px; bottom: 12px; color: rgba(243, 239, 228, 0.35); font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) { .region-map .spot::after { animation: none; } }

/* 난방 열원: 난방 묶음의 머리에 작게 */
.group > header #heatSource { margin-left: auto; height: 21px; max-width: 168px; padding: 0 4px; border-radius: 6px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.05); color: var(--ink-2); font-size: 11px; }
.group > header #heatSource[hidden] { display: none; }

/* ── 첫 화면의 교관: 시작 단추 옆에서 손을 흔든다 ─────────────────────── */
.guide { align-self: flex-end; flex: none; width: 104px; margin: -64px 0 -5px 2px; pointer-events: none; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)); animation: rise 0.8s 0.75s backwards cubic-bezier(0.2, 0.7, 0.2, 1); }
.guide svg { display: block; width: 100%; height: auto; overflow: visible; }
.guide .bob { animation: gbob 3.4s ease-in-out infinite alternate; }
.guide .head { transform-origin: 60px 74px; animation: gnod 5.6s ease-in-out infinite alternate; }
.guide .arm { transform-origin: 84px 89px; animation: gwave 5.4s ease-in-out infinite; }
.guide .leaf { transform-origin: 46px 104px; animation: gsway 2.8s ease-in-out infinite alternate; }
.guide .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.front-actions:has(.go:hover) .guide .arm, .front-actions:has(.go:focus-visible) .guide .arm { animation: gcheer 0.62s ease-in-out infinite alternate; }
@keyframes gbob { from { transform: translateY(0); } to { transform: translateY(-1.8px); } }
@keyframes gnod { from { transform: rotate(-2.2deg); } to { transform: rotate(2.6deg); } }
@keyframes gwave { 0%, 36%, 100% { transform: rotate(0deg); } 6% { transform: rotate(-17deg); } 12% { transform: rotate(8deg); } 18% { transform: rotate(-15deg); } 24% { transform: rotate(7deg); } 30% { transform: rotate(-6deg); } }
@keyframes gcheer { from { transform: rotate(-18deg); } to { transform: rotate(9deg); } }
@keyframes gsway { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@media (max-width: 640px) { .guide { display: none; } }
@media (prefers-reduced-motion: reduce) { .guide, .guide * { animation: none !important; } }

/* ── 메인 메뉴: 이어하기(2/3) + 저장 초기화(1/3) ──────────────────────── */
.resumerow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.resume { min-width: 0; }
.resume.reset { justify-content: center; padding: 0 14px; background: rgba(243, 239, 228, 0.12); color: #f3efe4; border: 1px solid rgba(243, 239, 228, 0.32); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; }
.resume.reset b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.resume.reset:hover, .resume.reset:focus-visible { background: rgba(243, 239, 228, 0.22); }
.resume.reset[data-arm="1"] { border-color: #f0b94b; color: #f0b94b; }
.resume.reset[data-arm="1"] b { font-size: 12.5px; }

/* 계기 이름은 줄을 바꾸지 않는다 */
/* 왼쪽 조작판의 줄 간격: 상자에 남는 높이를 줄마다 고르게 나눠 갖는다. --fit 은 줄당 더하는 px 이고 main.js 의 fitLeft 가 탭마다 잰다(0~10px, 상자를 넘지 않는다) */
.left .tabbody { --fit: 0px; padding: 8px 14px 8px; }
.left .tabbody.tight .zonegraph { display: none; }
.left .field { padding-block: calc(1px + var(--fit) * 0.5); }
.left .field.toggle { padding-block: calc(3px + var(--fit) * 0.5) calc(2px + var(--fit) * 0.5); }
.left .group { margin-top: calc(9px + var(--fit)); }
.left .crop { row-gap: calc(10px + var(--fit)); }
.left .now { margin-top: calc(14px + var(--fit)); }
.left .tabbody h3 { margin-top: calc(16px + var(--fit)); }
.left .tabbody[data-body="feed"] .seg { margin-top: calc(14px + var(--fit)); }
.left .tabbody[data-body="feed"] #feedFields { margin-top: calc(10px + var(--fit)); }
@media (max-width: 1080px) { .left .tabbody { --fit: 4px; } }      /* 좁은 화면은 상자 높이가 정해져 있지 않으니 넉넉한 값으로 둔다 */
/* 낮은 화면: 조작판이 세로로 넘치지 않게 시간대 그림을 접고 간격을 더 줄인다 */
@media (max-height: 740px) and (min-width: 1081px) {
  .zonegraph { display: none; }
  .left .group { margin-top: calc(6px + var(--fit)); }
  .modenote { -webkit-line-clamp: 1; height: 1.45em; }
  .left .crop { gap: calc(5px + var(--fit)) 14px; }
  .left .stat .v { font-size: 15px; line-height: 1.25; }
  .left .now { margin-top: calc(8px + var(--fit)); gap: 5px; }
  .left .now button { height: 26px; }
  .left .tabbody h3 { margin: calc(8px + var(--fit)) 0 2px; }
}

/* ── 관리 방식(알약 모양)과 탭(밑줄): 위아래 두 줄이 서로 다른 것임이 한눈에 보이게 ── */
.modebar { flex: none; display: flex; align-items: center; gap: 9px; margin: 10px 10px 4px; }
.modebar > small { flex: none; color: var(--muted); font-size: 11px; white-space: nowrap; }
.modebar .modeseg { flex: 1; margin: 0; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--hair); }
.modebar .modeseg button { height: 26px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.modebar .modeseg button[aria-pressed="true"] { background: #2f7a58; color: #fff; }
.left .tabs { gap: 0; padding: 0 12px; border-bottom: 1px solid var(--hair); }
.left .tabs button { position: relative; height: 34px; border-radius: 0; background: none; font-size: 13px; font-weight: 600; }
.left .tabs button:hover { color: var(--ink-2); }
.left .tabs button[aria-selected="true"] { background: none; color: var(--ink); }
.left .tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 46px; height: 2px; margin-left: -23px; border-radius: 2px 2px 0 0; background: var(--ink); }

/* ── 자리 확보: 글자 수가 바뀌어도 상자가 흔들리지 않게 가장 긴 글만큼 폭을 잡아 둔다(main.js 의 steady) ── */
.steady { display: inline-grid; }
.steady > span { grid-area: 1 / 1; }
.steady::after { content: attr(data-w); grid-area: 1 / 1; visibility: hidden; }
.chip .steady { justify-items: center; }
.fruitbar { cursor: pointer; transition: border-color 0.15s; }
.fruitbar:hover, .fruitbar:focus-visible { border-color: rgba(255, 255, 255, 0.3); outline: none; }
.fruitbar .row { min-width: 160px; }                 /* 과실 일곱 칸 자리 */
.clock #dap { display: inline-block; min-width: 6.6em; }
/* 계기의 머리줄: 이름 · 숫자 · 판정 · 현장 값의 자리를 정해 둔다(숫자의 자릿수가 바뀌어도 판정이 움직이지 않는다) */
.gauge .gh { display: grid; grid-template-columns: 58px 80px auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px; }
.gauge .d { flex: none; }
.gauge .gx { align-self: center; height: 20px; padding: 0 7px; margin-left: 2px; }
.gauge .gx[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--ink); }

/* ── 양액 카드(계기판 왼쪽, 예상 성적표 위) ── */
.fcmini > b { flex: none; color: var(--ink); font-weight: 650; margin: 0 1px 0 4px; }
.fcmini .lt { font-size: 11.5px; color: var(--ink-2); }
.fdbody { grid-template-columns: minmax(0, 1fr) auto 76px; gap: 6px 10px; align-items: center; font-variant-numeric: tabular-nums; }
.fdbody .k { display: grid; gap: 0; color: var(--ink-2); font-size: 12px; white-space: nowrap; line-height: 1.3; }
.fdbody .k.main { color: var(--ink-2); font-size: 12px; }
.fdbody b { font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }
.fdbody b.main { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.fdbody b small { font-size: 10.5px; font-weight: 400; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.fdbody .rg { color: var(--muted); font-size: 10.5px; }

/* ── 화방별 생육 · 수확 기록 ── */
.trussfig { margin: 12px 0 10px; padding: 10px 12px 8px; border-radius: 10px; background: #0e100f; border: 1px solid var(--hair); }
.trussfig figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 6px; color: var(--ink-2); font-size: 11.5px; }
.trussfig figcaption span { display: inline-flex; align-items: center; gap: 5px; }
.trussfig figcaption i { width: 14px; height: 7px; border-radius: 3px; }
.trussfig figcaption i.grow { background: var(--series-3); } .trussfig figcaption i.pick { background: var(--series-2); }
.trussfig figcaption i.now { width: 0; height: 12px; border-left: 1px dashed var(--ink-2); border-radius: 0; }
.trussfig figcaption em { flex-basis: 100%; font-style: normal; color: var(--muted); font-size: 11px; }
.trussfig svg { display: block; width: 100%; height: auto; }
.trussfig .gl { stroke: var(--grid); }
.trussfig line.now { stroke: var(--ink-2); stroke-dasharray: 3 3; }
.trussfig text { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.trussfig text.kg { fill: var(--ink-2); }
.trussfig rect.grow { fill: var(--series-3); } .trussfig rect.grow.live { opacity: 0.6; }
.trussfig rect.pick { fill: var(--series-2); } .trussfig rect.pick.live { opacity: 0.68; }
.trussfig .hit { fill: transparent; } .trussfig g:hover .hit { fill: rgba(255, 255, 255, 0.07); }
.trusstable th, .trusstable td { white-space: nowrap; text-align: right; }
.trusstable th:first-child, .trusstable td:first-child, .trusstable th:last-child, .trusstable td:last-child { text-align: left; }
.trusstable td.st.done { color: var(--muted); }

/* ── 온실 화면 가운데에 잠깐 뜨는 카드: 병해충 안내 · 수확과 출하 장면 ── */
.stage { position: fixed; z-index: 6; left: calc((316px + 100vw - 372px) / 2); top: 53%; transform: translate(-50%, -50%); display: grid; pointer-events: none; }      /* 온실 화면(두 패널 사이)의 한가운데 */
.stagecard { grid-area: 1 / 1; position: relative; pointer-events: auto; box-sizing: border-box; width: 404px; max-width: calc(100vw - 316px - 372px - 24px); padding: 12px 14px 13px; border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); animation: stagein 0.28s ease both; transition: opacity 0.3s, transform 0.3s; }
.stagecard.out { opacity: 0; transform: translateY(6px) scale(0.98); }
@keyframes stagein { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.stagecard .life { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.2); transform-origin: left; animation: life var(--life, 10s) linear forwards; }
.stagecard.held .life { animation-play-state: paused; }
@keyframes life { to { transform: scaleX(0); } }
.stagecard .btns { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.stagecard .btns .primary { margin-top: 0; height: 30px; } .stagecard .btns .sp { flex: 1; }
.badge.bad { background: rgba(208, 59, 59, 0.3); color: #ffd3cd; } .badge.warn { background: rgba(250, 178, 25, 0.22); color: #fbe1a5; } .badge.sale { background: rgba(12, 163, 12, 0.24); color: #c9f0d0; }
.pestcard header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pestcard header b { font-size: 15px; font-weight: 650; }
.pestcard header small { margin-left: auto; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pestcard .pc { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: start; }
.pestcard .pc.nophoto { grid-template-columns: 1fr; }
.pestcard figure { margin: 0; }
.pestcard img { display: block; width: 128px; height: 100px; object-fit: cover; border-radius: 9px; background: #111; }
.pestcard figcaption { margin-top: 3px; color: var(--muted); font-size: 10px; }
.pestcard .tx { color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.pestcard .why { margin: 0 0 5px; color: var(--ink); }
.pestcard dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 7px; margin: 0; }
.pestcard dt { color: var(--muted); } .pestcard dd { margin: 0; }
.pestcard .drug { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--hair); color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.pestcard .drug i { font-style: normal; color: var(--muted); margin-right: 7px; } .pestcard .drug b { color: var(--ink); font-weight: 600; } .pestcard .drug small { color: var(--muted); }
.pestcard .plan { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.stagecard.harvest { width: 364px; padding: 8px 14px 14px; }
.hv-art svg { display: block; width: 100%; height: auto; overflow: hidden; }
.hv-art text { fill: #1d1d1c; font-size: 14px; font-weight: 750; letter-spacing: -0.02em; }
.harvest p { display: flex; align-items: baseline; gap: 7px; margin: 5px 0 0; color: var(--ink-2); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.harvest p .badge { align-self: center; }
.harvest p b { color: var(--ink); font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.harvest p small { margin-left: -4px; color: var(--muted); font-size: 11px; }
.harvest p span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.harvest .h2 b { color: var(--good-ink); }
.harvest .h3 { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; white-space: normal; }
/* 장면: 과실이 차례로 상자에 떨어지고(0~1.5초) → 상자가 짐칸에 실리고(1.7~2.5초) → 트럭이 달려 온실은 뒤로 밀려나고 시장이 다가오고(2.8~4.1초) → 출하 줄이 뜬다 */
.harvest .fr { animation: hvdrop 0.5s cubic-bezier(0.5, 0, 0.9, 0.6) both; animation-delay: calc(0.15s + var(--k) * 0.24s); }
@keyframes hvdrop { from { transform: translateY(-70px); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(0); } 90% { transform: translateY(-3px); } to { transform: translateY(0); } }
.harvest .crate { animation: hvload 0.8s ease-in-out 1.7s both; }
@keyframes hvload { from { transform: translate(0, 0); } 45% { transform: translate(46px, -48px); } to { transform: translate(102px, -23px); } }
.harvest .pan { animation: hvpan 1.3s cubic-bezier(0.45, 0, 0.3, 1) 2.8s both; }
@keyframes hvpan { from { transform: translateX(0); } to { transform: translateX(-146px); } }
.harvest .wheel { animation: hvwheel 1.3s cubic-bezier(0.45, 0, 0.3, 1) 2.8s both; }
@keyframes hvwheel { from { transform: rotate(0); } to { transform: rotate(1000deg); } }
.harvest .h2 { animation: hvsale 0.4s ease 4s both; }
.harvest .h3 { animation: hvsale 0.4s ease 4.3s both; }
/* 받은 돈: 시장에 닿으면(4.1초~) 동전이 한 닢씩 떨어져 쌓인다 */
.harvest .coin { animation: hvcoin 0.34s cubic-bezier(0.5, 0, 0.9, 0.6) both; animation-delay: calc(4.15s + var(--c) * 0.075s); }
@keyframes hvcoin { from { transform: translateY(-46px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(0); } 90% { transform: translateY(-2px); } to { transform: translateY(0); } }
@keyframes hvsale { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .stagecard, .harvest .fr, .harvest .crate, .harvest .pan, .harvest .wheel, .harvest .h2, .harvest .h3, .harvest .coin { animation: none; } .harvest .coin { opacity: 0; } .stagecard .life { animation: none; opacity: 0; } }
@media (max-width: 1080px) { .stage { left: 50%; top: 27vh; } .stagecard { max-width: calc(100vw - 24px); } .gauge .gh { grid-template-columns: 58px 80px auto minmax(0, 1fr) auto; } }
.fruitbar { gap: 7px; padding-right: 5px; }
.fruitbar .more { height: 22px; padding: 0 8px; border-radius: 11px; border: 1px solid var(--hair); color: var(--ink-2); font-size: 11px; line-height: 20px; }
.fruitbar:hover .more, .fruitbar:focus-visible .more { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
/* 돌발 상황: 조치는 가운데 카드에서 하고, 왼쪽 위에는 한 줄만 남긴다 */
.inc.mini { grid-template-columns: auto 1fr auto; padding: 6px 7px 6px 10px; }
.inc.mini .ic { grid-row: auto; }
.inc.mini button { grid-row: auto; height: 26px; padding: 0 11px; }
.inccard { width: 392px; border-color: rgba(224, 88, 74, 0.45); }
.inccard header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.inccard header b { font-size: 15px; font-weight: 650; }
.inccard header small { margin-left: auto; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.inccard .pc { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: center; }
.inccard figure { margin: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--hair); }
.inccard figure svg { display: block; width: 128px; height: 100px; }
.inccard .tx { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.inccard .tx p { margin: 0 0 4px; }
.inccard .why { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.inccard .live { color: var(--warn-ink); font-variant-numeric: tabular-nums; }
.inccard .note { color: var(--muted); font-size: 11.5px; }
.inccard .btns .primary small { font-weight: 400; opacity: 0.85; }
.inccard .chkhead { margin: 10px 0 5px; font-size: 11.5px; color: var(--muted); }
.inccard .chk { list-style: none; counter-reset: chk; margin: 0; padding: 0; display: grid; gap: 3px; }
.inccard .chk li { counter-increment: chk; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.03); }
.inccard .chk li::before { content: counter(chk); grid-row: 1 / 3; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--ink-2); background: rgba(255, 255, 255, 0.1); }
.inccard .chk b { grid-column: 2; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.inccard .chk small { grid-column: 2; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.inccard .chk i { grid-column: 3; grid-row: 1 / 3; font-style: normal; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.inccard .chk li.now { border-color: rgba(90, 160, 255, 0.7); background: rgba(90, 160, 255, 0.1); }
.inccard .chk li.now::before { background: #3b82e0; color: #fff; }
.inccard .chk li.ok { opacity: 0.75; } .inccard .chk li.ok i { color: #5fd08a; } .inccard .chk li.ok::before { content: '✓'; background: rgba(95, 208, 138, 0.25); color: #5fd08a; }
.inccard .chk li.hit { border-color: rgba(250, 178, 25, 0.75); background: rgba(250, 178, 25, 0.12); } .inccard .chk li.hit i { color: #fab219; } .inccard .chk li.hit::before { content: '!'; background: #fab219; color: #201400; }
.inccard .found { margin: 7px 0 0; font-size: 13px; font-weight: 600; color: #fab219; }
.inccard.repair .btns { flex-wrap: wrap; }
.inccard .chk li.ok small { display: none; }                      /* 지나온 점검은 한 줄로 접는다 */
.inccard.repair { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; }
@media (max-width: 1080px) {                                      /* 좁은 화면: 키 큰 점검 카드는 위에서부터 놓아 머리글이 잘리지 않게 한다 */
  .stage:has(.inccard.repair) { top: 8px; transform: translateX(-50%); }
  .inccard.repair { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
}
/* 일시정지 메뉴: 줄 앞의 그림 */
.mi:has(> .ico) { grid-template-columns: 24px auto 1fr; align-items: center; gap: 12px; }
.mi .ico { width: 24px; height: 24px; color: var(--ink-2); }
.mi .ico svg { display: block; width: 100%; height: 100%; }
.mi:hover .ico, .mi:focus-visible .ico, .mi.rec .ico { color: var(--ink); }
/* 멈춰 있을 때의 재생 단추 */
#pauseBtn.play { color: #fff; background: #2f7a58; }
/* 온실 면적: 아래 줄 맨 앞, 출하 · 손익 창의 머리 */
.chip.area { gap: 6px; color: var(--ink-2); }
.chip.area small { color: var(--muted); font-size: 11px; }
.chip.area b { color: var(--ink); font-weight: 600; }
.dlghead .area { margin-right: auto; margin-left: 12px; color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.actuators.tight { gap: 5px; }
.actuators.tight .chip { padding: 0 8px; font-size: 11.5px; }
/* 소개 영상의 새 그림: 수확 · 출하 장면과 병해충 사진 */
.film-art .filmhv { width: min(330px, 62vw); padding: 4px 10px 6px; border-radius: 14px; background: rgba(16, 20, 18, 0.62); border: 1px solid rgba(255, 255, 255, 0.2); }
.film-art .filmhv svg { display: block; width: 100%; height: auto; overflow: hidden; }
.film-art .photo { position: relative; display: block; width: 104px; height: 78px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.28); }
.film-art .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-art .photo small { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 7px 4px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); font-size: 11px; color: #fff; }
.film-art .photo small { letter-spacing: 0; }
.hintbox .lt { font-size: 11px; gap: 4px; }          /* 조작판의 좁은 줄에서는 글자만 조금 작게(점은 그대로 크게) */
.fcmini { overflow: hidden; }                          /* 접힌 줄의 글이 접기 단추 밑으로 넘어가지 않게 */
.film-ctrl { bottom: calc(5vh - 20px); }               /* 아래 띠의 한가운데(단추 높이 40px) */
/* 훈련 과정 목록의 작목 단추: 작목 그림을 앞에 둔다 */
.cropseg .cropbtn { height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; text-align: left; }
.cropseg .cropbtn .art { flex: none; width: 40px; height: 40px; }
.cropseg .cropbtn .art svg { display: block; width: 100%; height: 100%; }
.cropseg .cropbtn span { display: grid; line-height: 1.25; }
.cropseg .cropbtn b { font-size: 14px; font-weight: 650; }
.cropseg .cropbtn small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cropseg .cropbtn:not([aria-pressed="true"]) .art { opacity: 0.75; }

/* ── 소개 영상 2판(시연): 실제 화면을 드러내고 강조 테로 짚는다 ── */
body.front-on.film-ui :is(.panel, .hud, .actuators, .stage), body.front-on.film-stage .stage { opacity: 1; visibility: visible; }
body.film-ui .dock, body.film-stage .dock { display: none; }          /* 배경 온실에는 예상 성적이 없다 */
body.film-ui .stage { top: 43%; }
.film .film-bar { transition: height 0.5s ease; }
.film.ui .film-bar.top { height: 104px; }                              /* 화면을 드러낸 장면: 그늘을 얕게 */
.film.ui .film-bar.bottom { height: 56px; }
.film.ui .film-ctrl { bottom: 8px; }
.film-spot { position: fixed; z-index: 1; left: 40vw; top: 40vh; width: 20vw; height: 20vh; border-radius: 16px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 200vmax rgba(4, 6, 5, 0.6); outline: 2px solid rgba(240, 185, 75, 0.95);
  transition: left 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), top 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.45s; }
.film-spot.on { opacity: 1; }
.film-cap, .film-ctrl, .film-logo { z-index: 2; }
.film.ui .film-cap { left: 330px; right: 386px; bottom: 72px; padding: 11px 18px 13px; border-radius: 16px; background: rgba(8, 11, 10, 0.8); border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: center; text-shadow: none; }
.film.ui .film-cap h2 { margin: 2px 0 4px; font-size: clamp(20px, 2.2vw, 30px); }
.film.ui .film-cap p { max-width: none; font-size: 14px; }
.film.ui .film-cap small { font-size: 11px; }
.film.ui .film-art { display: none; }
/* 제목의 낱말이 차례로 떠오른다 */
.film-cap h2 .kw { display: inline-block; white-space: pre; animation: kwin 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes kwin { from { opacity: 0; transform: translateY(0.55em) scale(0.96); } }
/* 그림이 차례로 튀어나온다 */
.film-art .pop { animation: popin 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes popin { from { opacity: 0; transform: translateY(10px) scale(0.7); } }
.film-art .brk { flex-basis: 100%; height: 0; }
.film-art .bigcrop { display: grid; justify-items: center; gap: 2px; width: 104px; padding: 10px 6px 9px; border-radius: 18px; background: rgba(16, 20, 18, 0.62); border: 1px solid rgba(255, 255, 255, 0.2); }
.film-art .bigcrop svg { display: block; width: 62px; height: 62px; }
.film-art .bigcrop b { font-size: 14px; font-weight: 650; }
.film-art .bigcrop small { font-size: 11.5px; letter-spacing: 0; color: rgba(243, 239, 228, 0.7); }
.film-art .gradecard { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 14px; border-radius: 18px; background: rgba(16, 20, 18, 0.66); border: 1px solid rgba(255, 255, 255, 0.2); }
.film-art .gradecard > b { width: 78px; height: 78px; border-radius: 18px; display: grid; place-items: center; background: rgba(57, 135, 229, 0.34); font-size: 46px; font-weight: 750; }
.film-art .gradecard .rows { display: grid; gap: 4px; }
.film-art .gradecard .row { display: grid; grid-template-columns: 76px 190px; align-items: center; gap: 10px; }
.film-art .gradecard em { font-style: normal; font-size: 12.5px; color: rgba(243, 239, 228, 0.86); }
.film-art .gradecard .row i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.film-art .gradecard .row u { display: block; height: 100%; border-radius: 3px; background: #f0b94b; transform-origin: left; animation: barin 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes barin { from { transform: scaleX(0); } }
.film-art .dotno.adv { background: #f0b94b; color: #1d1d1c; }
@media (prefers-reduced-motion: reduce) { .film-cap h2 .kw, .film-art .pop, .film-art .gradecard .row u { animation: none; } .film-spot { transition: opacity 0.3s; } }
@media (max-width: 1080px) { body.front-on.film-stage .stage { left: 50%; top: 30vh; } .film-art .gradecard .row { grid-template-columns: 70px 120px; } .film-art .bigcrop { width: 88px; } .film-art .bigcrop svg { width: 50px; height: 50px; } }
.film.ui .film-logo { height: 66px; }
/* 닫기 단추를 머리에 둔 창(화방별 기록): 아래쪽 닫기는 감추고, 머리는 내려 읽는 동안에도 위에 붙어 있게 한다 */
dialog.topclose > form { display: none; }
dialog.topclose .dlghead { position: sticky; top: -26px; z-index: 2; margin: -26px -28px 6px; padding: 20px 28px 10px; background: rgb(22, 23, 22); }
dialog.topclose .dlghead h2 { margin: 0; }
/* 소득분석표(출하 · 손익 창): 농산물소득자료집의 비목 순서. 들여 쓴 줄은 중간재비의 세부 비목, ‘자료’는 전국 평균을 넣은 비목 */
table.money th:nth-child(2), table.money th:nth-child(3), table.money td:nth-child(2), table.money td.avg { text-align: right; white-space: nowrap; }
table.money td.avg { color: var(--muted); font-weight: 400; }
table.money td:first-child { white-space: nowrap; }
table.money tr.in td:first-child { padding-left: 20px; color: var(--ink-2); }
table.money tr.sub td { color: var(--ink); font-weight: 600; background: rgba(255, 255, 255, 0.03); }
table.money tr.rev td { color: var(--ink); font-weight: 650; }
table.money .tag { margin-left: 6px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--hair); color: var(--muted); font-style: normal; font-size: 10px; font-weight: 400; }
.tcols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.tcols .hint { margin: 6px 0 0; font-size: 11px; }
table.money th small { display: block; margin-top: 1px; color: var(--muted); font-size: 10.5px; font-weight: 400; }
.tcols h3 .unit { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 400; }
/* 소득(손익) 줄: 표의 결론이므로 가장 눈에 띄게 — 옅은 바탕, 큰 숫자, 이익은 초록 · 손실은 빨강 */
table.money tr.key td { padding-top: 9px; padding-bottom: 9px; background: rgba(240, 185, 75, 0.11); border-top: 1px solid rgba(240, 185, 75, 0.45); border-bottom: 1px solid rgba(240, 185, 75, 0.45); color: #fff; font-size: 13px; font-weight: 700; }
table.money tr.key td:first-child { font-size: 14px; }
table.money tr.key td:nth-child(2) { font-size: 17px; letter-spacing: -0.01em; color: var(--good-ink); }
table.money tr.key.neg td:nth-child(2) { color: var(--bad-ink); }
table.money tr.key td.avg { color: var(--ink-2); font-size: 13px; font-weight: 600; }
table.money tr.key td.note { color: var(--ink); font-weight: 600; }

/* ── 훈련 과정: 지금 만질 곳을 가리키는 표시 ── */
.hlring { position: fixed; z-index: 7; pointer-events: none; border-radius: 12px; border: 2px solid #f0b94b; box-shadow: 0 0 14px rgba(240, 185, 75, 0.55); animation: hlring 1.15s ease-out infinite; }
@keyframes hlring { from { opacity: 0.95; transform: scale(1); } 70% { opacity: 0; transform: scale(1.08, 1.3); } to { opacity: 0; transform: scale(1.08, 1.3); } }
.hlring.flash { animation: hlflash 0.9s ease-out 1, hlring 1.15s ease-out 0.9s infinite; }
@keyframes hlflash { from { opacity: 0; transform: scale(1.5, 2.6); border-width: 5px; } 35% { opacity: 1; } to { opacity: 0.95; transform: scale(1); border-width: 2px; } }
.hlhand { position: fixed; z-index: 8; width: 54px; height: 38px; pointer-events: none; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55)); }
.hlhand[data-side="left"] { transform: scaleX(-1); }      /* 왼쪽을 가리킨다 */
.hlhand[data-side="up"] { transform: rotate(-90deg); }   /* 위를 가리킨다 */
.hlhand svg { display: block; width: 100%; height: 100%; animation: hlbob 0.5s ease-in-out infinite alternate; }
@keyframes hlbob { from { transform: translateX(-3px); opacity: 0.8; } to { transform: translateX(9px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hlring, .hlring.flash, .hlhand svg { animation: none; } }
/* “지금 평가받기” 옆의 합격 · 불합격 예상 신호 */
.coachbtns .cv { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; font-weight: 650; white-space: nowrap; background: rgba(255, 255, 255, 0.07); color: var(--ink-2); }
.coachbtns .cv::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.coachbtns .cv.pass { background: rgba(12, 163, 12, 0.2); color: #d5f3db; } .coachbtns .cv.pass::before { background: var(--good); }
.coachbtns .cv.fail { background: rgba(208, 59, 59, 0.24); color: #ffd6d1; } .coachbtns .cv.fail::before { background: var(--critical); }
.coachbtns { flex-wrap: wrap; row-gap: 6px; }
.coachbtns .primary { white-space: nowrap; }
/* 정식 장면: 모종이 차례로 배지에 놓이고(0.2초~), 잎이 펴지고, 첫 물방울이 떨어진다 */
.stagecard.planting { width: 364px; padding: 8px 14px 14px; }
.planting p { display: flex; align-items: baseline; gap: 7px; margin: 5px 0 0; color: var(--ink-2); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.planting p .badge { align-self: center; }
.planting p b { color: var(--ink); font-size: 16px; font-weight: 650; }
.planting p span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.planting .sd { animation: sddrop 0.55s cubic-bezier(0.4, 0, 0.8, 0.5) both; animation-delay: calc(0.2s + var(--k) * 0.32s); }
@keyframes sddrop { from { transform: translateY(-74px); opacity: 0; } 20% { opacity: 1; } 78% { transform: translateY(0); } 88% { transform: translateY(-3px); } to { transform: translateY(0); } }
.planting .lf { transform-box: fill-box; transform-origin: 50% 100%; animation: lfgrow 0.6s ease-out both; animation-delay: calc(0.75s + var(--k) * 0.32s); }
@keyframes lfgrow { from { transform: scale(0.5); } }
.planting .dp { animation: dpfall 1.1s ease-in infinite; animation-delay: calc(2.6s + var(--k) * 0.14s); opacity: 0; }
@keyframes dpfall { from { opacity: 0; transform: translate(15px, -30px); } 25% { opacity: 1; } to { opacity: 0; transform: translate(15px, -12px); } }
@media (prefers-reduced-motion: reduce) { .planting .sd, .planting .lf, .planting .dp { animation: none; } }

/* ── 수료증(js/cert.js): 대학의 학위증 같은 꼴. A4 가로(1123×794)를 기준으로 그리고, 크기는 모두 증서 폭에 비례한다(--u = 폭의 1/1123) ── */
dialog.certdlg { width: min(1060px, calc(100vw - 24px), calc((100vh - 118px) * 1.414)); max-width: none; max-height: calc(100vh - 16px); padding: 16px; border: 1px solid var(--hair); border-radius: 16px; background: rgb(22, 23, 22); color: var(--ink); overflow: auto; }
dialog.certdlg::backdrop { background: rgba(6, 8, 10, 0.66); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.certpaper { container-type: inline-size; width: 100%; aspect-ratio: 1123 / 794; border-radius: 3px; overflow: hidden; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55); }
.cert { --u: calc(100cqw / 1123); position: relative; box-sizing: border-box; width: 100%; height: 100%; padding: calc(var(--u) * 54) calc(var(--u) * 96) calc(var(--u) * 54); display: flex; flex-direction: column; align-items: center; text-align: center;
  background: radial-gradient(120% 95% at 50% 38%, #fffdf6 0, #f7f0dc 100%); color: #1b2a22; font-family: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cert .c-layer, .cert .c-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cert .c-mark { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 440); transform: translate(-50%, -47%); opacity: 0.06; } .cert .c-mark svg { display: block; width: 100%; }
.cert .c-no { position: absolute; left: calc(var(--u) * 112); top: calc(var(--u) * 60); font-size: calc(var(--u) * 15); letter-spacing: 0.06em; color: #3b4a41; }
.cert .c-head { position: relative; display: flex; flex-direction: column; align-items: center; }
.cert .c-emblem svg { display: block; width: calc(var(--u) * 60); height: calc(var(--u) * 60); }
.cert .c-en { margin-top: calc(var(--u) * 5); padding-left: 0.46em; font-family: Georgia, "Times New Roman", serif; font-size: calc(var(--u) * 11.5); letter-spacing: 0.46em; color: #a8842f; }
.cert .c-title { margin: calc(var(--u) * 4) 0 0; padding-left: 0.6em; font-size: calc(var(--u) * 68); font-weight: 900; letter-spacing: 0.6em; line-height: 1.22; color: #17352a; }
.cert .c-course { display: flex; align-items: center; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 4); padding-left: 0.2em; font-size: calc(var(--u) * 21); font-weight: 700; letter-spacing: 0.2em; color: #8a6a1f; }
.cert .c-course::before, .cert .c-course::after { content: ""; width: calc(var(--u) * 78); height: 1px; background: #b08d3c; }
.cert .c-fields { position: relative; display: grid; gap: calc(var(--u) * 8); width: calc(var(--u) * 660); margin: calc(var(--u) * 24) 0 0; text-align: left; }
.cert .c-fields > div { display: grid; grid-template-columns: calc(var(--u) * 82) 1fr; column-gap: calc(var(--u) * 26); align-items: baseline; }
.cert .c-fields dt { display: flex; justify-content: space-between; font-size: calc(var(--u) * 17); font-weight: 700; color: #3b4a41; }
.cert .c-fields dd { margin: 0; padding: 0 calc(var(--u) * 6) calc(var(--u) * 3); border-bottom: 1px solid rgba(27, 42, 34, 0.26); font-size: calc(var(--u) * 18.5); font-weight: 600; }
.cert .c-name dd { min-height: 1.5em; font-size: calc(var(--u) * 30); font-weight: 900; letter-spacing: 0.08em; }
.cert .c-blank { font-family: var(--font); font-style: normal; font-size: calc(var(--u) * 14); font-weight: 400; letter-spacing: 0; color: rgba(27, 42, 34, 0.42); }
.cert .c-body { position: relative; max-width: calc(var(--u) * 780); margin: calc(var(--u) * 24) 0 0; font-size: calc(var(--u) * 21); font-weight: 600; line-height: 1.85; word-break: keep-all; text-wrap: balance; color: #1b2a22; }
.cert .c-date { position: relative; margin-top: calc(var(--u) * 18); padding-left: 0.22em; font-size: calc(var(--u) * 20); font-weight: 700; letter-spacing: 0.22em; }
.cert .c-issuer { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); margin-top: auto; }
.cert .c-wm { color: #17352a; } .cert .c-wm svg { display: block; width: calc(var(--u) * 300); height: auto; filter: none; }
.cert .c-wm path[stroke="#a8d5b7"] { stroke: #3f8f66; }
.cert .c-sign { position: relative; display: flex; align-items: baseline; gap: calc(var(--u) * 16); padding: 0 calc(var(--u) * 62); }
.cert .c-role { font-size: calc(var(--u) * 19); font-weight: 600; }
.cert .c-who { padding-left: 0.1em; font-size: calc(var(--u) * 37); font-weight: 900; letter-spacing: 0.1em; color: #17352a; }
.cert .c-seal { position: absolute; right: calc(var(--u) * -22); top: 50%; width: calc(var(--u) * 84); transform: translateY(-60%); opacity: 0.93; mix-blend-mode: multiply; } .cert .c-seal svg { display: block; width: 100%; }      /* 이름 끝 글자 옆에 반듯하게 찍힌다(기울이지 않는다) */
.cert .c-medal { position: absolute; left: calc(var(--u) * 138); bottom: calc(var(--u) * 66); width: calc(var(--u) * 122); } .cert .c-medal svg { display: block; width: 100%; filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(80, 60, 10, 0.3)); }
.certbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .certbar .sp { flex: 1; }
.certbar .primary { margin: 0; } .certbar .ghost { height: 34px; padding: 0 14px; }
.certmsg { margin: 0; color: var(--ink-2); font-size: 13px; }
.certform { display: flex; align-items: center; gap: 8px; } .certform[hidden] { display: none; }
.certform label { color: var(--ink-2); font-size: 13px; }
.certform input { width: 190px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(240, 185, 75, 0.65); background: rgba(255, 255, 255, 0.07); color: var(--ink); font: inherit; font-size: 15px; }
.certform input:focus { outline: 2px solid rgba(240, 185, 75, 0.5); outline-offset: 1px; }
.primary.gold { background: #d2ab4c; color: #1d1706; } .primary.gold:hover { background: #e0bb5e; }
.primary.keep { background: var(--accent); }      /* 앞에 다른 단추가 와도 주된 단추의 색을 지킨다 */
/* 수료증으로 가는 단추(평가서 · 과정 결과 · 과정 목록): 금빛 */
.linkbtn.award { background: rgba(210, 171, 76, 0.2); border-color: rgba(226, 192, 106, 0.7); } .linkbtn.award b { color: #ffe7ad; } .linkbtn.award i { background: #d2ab4c; color: #1d1706; }
.linkbtn.award:hover, .linkbtn.award:focus-visible { background: rgba(210, 171, 76, 0.32); border-color: #e2c06a; }
.certline { display: flex; margin: 14px 0 2px; }
/* 인쇄: 증서만 한 장(A4 가로)으로 */
#printArea { display: none; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  html.print-cert, html.print-cert body { width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
  html.print-cert body > * { display: none !important; }
  html.print-cert body > #printArea { display: block !important; width: 100%; }
  html.print-cert #printArea .certpaper { width: 100%; aspect-ratio: 1123 / 790; border-radius: 0; box-shadow: none; break-inside: avoid; }
  html.print-cert .c-blank { display: none; }
}

.mi.phone { display: none; }      /* 일시정지 메뉴의 폰 전용 줄(영농일지 · 모형과 자료) */
/* ── 폰(폭 640px 이하, 접은 폴드 344px 포함): 한 화면에 다 올리지 않는다 — 온실이 보이게 꼭 필요한 것만 남긴다 ── */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  /* 위 막대는 두 줄: [메뉴 · 방식] 날짜 시각 [소리] / 속도 단추. 나가기 · 길잡이 · 일지 · 자료는 메뉴(≡) 안에 있다 */
  .top { padding: 6px 8px 18px; gap: 5px 6px; }
  .top #scenarioName, .top .clock .sep, .top #dap, .top #guideBtn, .top #quitBtn, .top .slowchk, .top #adviceBtn, .top #diaryBtn, .top #infoBtn { display: none !important; }
  .top .speed { flex: 1 1 100%; margin-right: 0; } .top .speed button { flex: 1; min-width: 0; padding: 0 4px; height: 28px; }
  /* 온실 위에는 세 줄만: 과실 그림 / 날씨 한 줄 + 시점 단추 / 장치 상태(옆으로 넘김) */
  .fruitbar { top: calc(52vh - 110px); max-width: calc(100vw - 16px); height: 30px; padding: 0 8px; }
  .fruitbar > b, .fruitbar .txt, .fruitbar .more { display: none; }
  .views { right: 8px; top: calc(52vh - 72px); } .views button { padding: 0 7px; }
  .wxboard:not(.open) { top: calc(52vh - 73px); grid-template-columns: 24px auto; column-gap: 6px; padding: 2px 9px 2px 6px; }
  .wxboard:not(.open) .sky { width: 24px; height: 24px; }
  .wxboard:not(.open) .now { grid-template-columns: 54px 40px; }
  .wxboard:not(.open) .now .t { font-size: 15.5px; } .wxboard:not(.open) .now .st { font-size: 12px; }
  .wxboard:not(.open) .wxmore { display: none; }
  .wxboard.open { top: calc(52vh - 200px); }
  .mi.phone { display: grid; }
  /* 첫 화면: 제목이 폭 안에 다 들어오게 */
  .front-col { left: 16px; right: 16px; }
  .logo { width: 100%; }
  /* 이어하기: 이름 아래에 작기를 한 줄 더 쌓고, 저장 초기화는 글 폭만큼만 */
  .resumerow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .resume { height: 58px; }
  .resume:not(.reset) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; gap: 0 10px; padding: 0 8px 0 20px; }
  .resume:not(.reset) .name svg { height: 17px; }
  .resume:not(.reset) .sub { grid-column: 1; margin-top: 4px; text-align: left; font-size: 11.5px; }
  .resume:not(.reset) .go-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .resume.reset { padding: 0 13px; max-width: 108px; } .resume.reset b { font-size: 12.5px; white-space: nowrap; }
  .resume.reset[data-arm="1"] b { font-size: 11px; white-space: normal; }
  /* 훈련 과정의 작목 고르기: 그림을 위에, 이름과 과정 수를 아래에(옆에 두면 이름이 세 줄로 꺾인다) */
  .cropseg .cropbtn { height: auto; flex-direction: column; gap: 3px; padding: 8px 4px 9px; text-align: center; }
  .cropseg .cropbtn .art { width: 44px; height: 44px; }
  .cropseg .cropbtn span { justify-items: center; }
  .cropseg .cropbtn b { font-size: 13.5px; white-space: nowrap; }
  .cropseg .cropbtn small { white-space: nowrap; }
  .lesson .st { flex-direction: column; align-items: flex-end; gap: 3px; }      /* “여기부터” 표식은 날짜 위에 쌓아 설명 글의 자리를 넓힌다 */
  /* 평가 항목: 이름 · 막대 · 점수를 한 줄에 두고, 풀이 글은 그 아래 줄에 폭 가득 */
  .eval { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; }
  .eval .meter { margin-top: 0; height: 6px; border-radius: 3px; }
  .eval .nt { grid-column: 1 / -1; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--hair); line-height: 1.5; }
  .eval .nt:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .eval .nt small { margin-top: 1px; }
  /* 기록 창: 과정 × 작목 표는 칸을 좁혀 그대로, 시도 기록 · 경영 실습은 줄마다 카드로(칸 이름은 값 앞에 작게) */
  .res.res-tight th, .res.res-tight td { padding: 7px 4px; font-size: 12.5px; }
  .res.res-tight th { white-space: nowrap; font-size: 12px; }
  .res.res-tight th:first-child, .res.res-tight td:first-child { padding-left: 8px; }
  .res.res-tight .lt { gap: 5px; font-size: 12px; white-space: nowrap; }
  .res.res-cards { display: block; }
  .res.res-cards tr:first-child { display: block; margin: 14px 0 6px; } .res.res-cards tr:first-child th { display: none; }
  .res.res-cards tr:first-child th:first-child { display: block; padding: 0; background: none; border: 0; font-size: 13px; color: var(--ink-2); }
  .res.res-cards tr:not(:first-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 16px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
  .res.res-cards td { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; font-size: 12.5px; text-align: right; }
  .res.res-cards td::before { content: attr(data-k); flex: none; color: var(--muted); font-size: 11.5px; }
  .res.res-cards td:first-child { grid-column: 1 / -1; justify-content: flex-start; padding-bottom: 3px; font-size: 13.5px; font-weight: 600; text-align: left; }
  .res.res-cards td:first-child::before { content: none; }
  .res.res-cards td:last-child { grid-column: 1 / -1; }
  .res.res-cards td .lt { justify-content: flex-end; }
  .res.res-cards tr.empty { padding: 8px 12px; } .res.res-cards tr.empty td:not(:first-child) { display: none; }
  .res.res-cards tr.empty td:first-child { padding: 0; font-weight: 500; color: var(--ink-2); justify-content: space-between; }
  .res.res-cards tr.empty td:first-child::after { content: "기록 없음"; flex: none; color: var(--muted); font-size: 11.5px; font-weight: 400; }
  /* 출하 · 손익 창: 두 단을 한 단으로. 소득분석표는 비목 · 내 온실 · 전국 평균을 한 줄에 두고 비고는 그 아래 줄에 작게 */
  .tcols { grid-template-columns: minmax(0, 1fr); }
  .tcols h3 .unit { display: block; margin: 2px 0 0; }
  .tradesheet .dlghead { flex-wrap: wrap; gap: 4px 10px; } .tradesheet .dlghead h2 { white-space: nowrap; margin-right: auto; }
  .tradesheet .dlghead form { display: flex; gap: 6px; }
  .dlghead .area { order: 3; flex-basis: 100%; margin: 0; white-space: normal; font-size: 11.5px; }
  table.money { display: block; }
  table.money tr { display: grid; grid-template-columns: minmax(0, 1fr) 76px 68px; align-items: center; border-bottom: 1px solid var(--grid); }
  table.money th, table.money td { padding: 6px 6px; border: 0; }
  table.money th:nth-child(4) { display: none; }
  table.money td:first-child { white-space: normal; }
  table.money tr.in td:first-child { padding-left: 14px; }
  table.money td.note { grid-column: 1 / -1; padding-top: 0; padding-bottom: 7px; font-size: 11px; line-height: 1.45; }
  table.money tr.in td.note { padding-left: 14px; }
  table.money td.note:empty { display: none; }
  table.money tr.sum { border-top: 1px solid var(--axis); } table.money tr.sum td { border: 0; }
  table.money tr.key { border: 1px solid rgba(240, 185, 75, 0.45); border-radius: 8px; background: rgba(240, 185, 75, 0.11); }
  table.money tr.key td { border: 0; background: none; padding-top: 8px; padding-bottom: 6px; } table.money tr.key td.note { padding-top: 0; padding-bottom: 8px; }
  table.ships th, table.ships td { padding: 5px 4px; font-size: 11.5px; letter-spacing: -0.01em; }
  table.ships th:first-child, table.ships td:first-child { padding-left: 2px; text-align: left; } table.ships th:last-child, table.ships td:last-child { padding-right: 2px; }
  /* 영농일지: 날짜와 작업 이름표를 한 줄에, 내용은 그 아래에 폭 가득 */
  table.diary { display: block; }
  table.diary tr:first-child { display: none; }
  table.diary tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--grid); }
  table.diary td { padding: 0; border: 0; }
  table.diary td:nth-child(3) { grid-column: 1 / -1; line-height: 1.5; }
}
/* 모바일 접속 안내(index.html 의 #pcNote): 화면 가운데에 크게 떴다가 3초 뒤 사라진다 */
.pcnote { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(6, 8, 10, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade 0.25s ease-out; transition: opacity 0.3s ease; }
.pcnote[hidden] { display: none; }
.pcnote.out { opacity: 0; pointer-events: none; }
.pcnote-card { position: relative; overflow: hidden; width: min(340px, 100%); padding: 26px 22px 24px; border-radius: 22px; background: #f6f1e3; color: #1f3a2e; border: 1px solid #e2c06a; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(240, 185, 75, 0.3); text-align: center; animation: pcpop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1); }
.pcnote-card svg { width: 76px; height: 76px; color: #1f3a2e; }
.pcnote-card b { display: block; margin-top: 8px; font-size: 25px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: #17352a; }
.pcnote-card p { margin: 10px 0 16px; font-size: 13.5px; line-height: 1.6; color: #41574b; word-break: keep-all; }
.pcnote-card button { height: 40px; padding: 0 30px; border-radius: 20px; background: #2f7d58; color: #fff; font-size: 15px; font-weight: 650; }
.pcnote-time { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #f0b94b; transform-origin: left; animation: pctime 3s linear forwards; }
@keyframes pcpop { from { transform: scale(0.8) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pctime { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* 접은 폴드처럼 아주 좁은 화면: 최근 출하 표의 다섯 칸이 창 안에 들어오게 */
@media (max-width: 360px) { table.ships th, table.ships td { padding: 5px 2px; font-size: 10.5px; letter-spacing: -0.02em; } }