/* 게코 먹이 급여량 계산기 전용 CSS (2026-10-22). 급여 조건 줄(gkf-in) → [그날 표(gkf-ticket) | 2주 급여 달력(gkf-board)] → 사육장 점검표(gkf-check: 라벨·입력 | 기준 띠 · 판정 줄).
   accent 는 달력에서 고른 날 한 곳(판정 줄의 범위 밖 글자는 오류색). 움직임: 조건이 바뀌면 달력 글리프가 칸 순서대로 떠오르고(28ms 간격), 기준 띠와 내 값 표식이 미끄러진다. 동작 줄이기면 끔.
   툴 폭 640px 이상이면 표 | 달력 두 열, 그 아래는 표 → 달력 → 점검표. 점검표 줄은 560px 이상이면 [라벨·입력 | 띠], 그 아래는 쌓는다. */
.gkf-work{container:gkf / inline-size;display:flex;flex-direction:column}
.gkf-defs{position:absolute;width:0;height:0;overflow:hidden}
.gkf-in{display:flex;flex-direction:column;gap:12px;padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.gkf-in-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.gkf-in-title{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.gkf-in-title .i{width:15px;height:15px;color:var(--accent)}
.gkf-btns{display:flex;flex-wrap:wrap;gap:6px}
.gkf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:end}
.gkf-row--2{grid-template-columns:minmax(0,1fr) auto}
.gkf-in .v2-f>.v2-label{display:block;margin:0 0 5px}
.gkf-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.gkf-seg button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:auto;min-height:var(--v2-ctl,42px);min-width:0;padding:4px 8px;line-height:1.2;white-space:normal;text-align:center}
.gkf-seg button[hidden]{display:none}
.gkf-seg b{font-size:13px;font-weight:700}
.gkf-seg small{font-family:var(--sans);font-size:11px;font-weight:600;opacity:.75}
.gkf-ctl{display:block;width:100%;min-width:170px;height:var(--v2-ctl,42px);margin:0;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;box-sizing:border-box}
.gkf-ctl:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.gkf-ctl[aria-invalid="true"]{border-color:var(--accent)}
.gkf-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.gkf-opt .v2-switch span{line-height:1.45}

/* 그날 표 | 2주 달력 */
.gkf-main{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--soft)}
.gkf-ticket{display:flex;flex-direction:column;gap:9px;padding:16px 18px;min-width:0}
.gkf-big{flex-wrap:wrap;font-size:34px;line-height:1.12}
.gkf-basis{margin:0;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.gkf-rows li{align-items:flex-start}
.gkf-rows li span{flex:0 0 auto}
.gkf-rows li b{white-space:normal;text-align:right;line-height:1.45;font-weight:650}
.gkf-caveat{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.gkf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:auto;padding-top:2px}
.gkf-board{display:flex;flex-direction:column;gap:10px;padding:14px 18px 16px;min-width:0;border-top:1px solid var(--soft)}
.gkf-board-head,.gkf-check-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px}
.gkf-board-head em{font-style:normal;font-weight:600;color:var(--ink);margin-left:4px}
.gkf-track i{font-style:normal}
.gkf-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.gkf-day{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:6px 1px 7px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);color:var(--ink);cursor:pointer;transition:border-color var(--ease),box-shadow var(--ease),background var(--ease)}
.gkf-day>*{pointer-events:none}
.gkf-day:hover{border-color:var(--line)}
.gkf-day:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.gkf-day[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.gkf-day.is-today .gkf-dd{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.gkf-day.is-past{opacity:.55}
.gkf-day.is-rest{background:transparent;border-style:dashed}
.gkf-dw{font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.1}
.gkf-dd{font-size:14.5px;font-weight:750;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.gkf-food{display:flex;align-items:center;justify-content:center;gap:2px;height:14px}
.gkf-food svg{display:none;width:17px;height:12px;fill:currentColor}
.gkf-day.has-ins .g-ins,.gkf-day.has-cgd .g-cgd{display:block}
.gkf-day.has-cgd .g-cgd{color:var(--muted)}
.gkf-day.is-rest .gkf-food::before{content:"";width:10px;height:2px;background:var(--line)}
.gkf-sup{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:30px}
.gkf-sup i,.gkf-keys i{display:none;padding:2px 3px;border:1px solid var(--line);border-radius:3px;font-family:var(--sans);font-size:9.5px;font-style:normal;font-weight:750;line-height:1;color:var(--ink);white-space:nowrap}
.gkf-sup .is-d3,.gkf-keys .is-d3{background:var(--wash)}
.gkf-sup .s-mv,.gkf-keys .s-mv{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.gkf-day.has-ca .s-ca,.gkf-day.has-mv .s-mv{display:block}
.gkf-days.is-off .gkf-day{opacity:.35;pointer-events:none}
.gkf-days.is-pop .gkf-food svg,.gkf-days.is-pop .gkf-sup i{animation:gkf-pop .42s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 28ms)}
@keyframes gkf-pop{from{opacity:0;transform:translateY(4px) scale(.55)}}
.gkf-keys{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.gkf-keys li{display:inline-flex;align-items:center;gap:5px}
.gkf-keys svg{width:17px;height:12px;fill:var(--ink)}
.gkf-keys .k-cgd svg{fill:var(--muted)}
.gkf-keys i{display:inline-block}
.gkf-keys .s-rest{width:12px;height:12px;padding:0;border-style:dashed}
.gkf-work[data-sp="leo"] .gkf-keys .k-cgd,.gkf-work[data-sp="cre"] .gkf-keys .k-rest{display:none} /* 범례는 그 종 달력에 나오는 것만 */
.gkf-sum{margin:0;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.gkf-rules{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink)}
.gkf-rules li{position:relative;padding-left:16px}
.gkf-rules li::before{content:"";position:absolute;left:2px;top:.42em;width:7px;height:4px;border-left:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg)}
.gkf-rules small{font-size:11px;color:var(--muted)}

/* 사육장 점검표: 줄마다 라벨·입력 | 기관별 기준 띠(띠마다 한 줄) + 내 값 표식, 아래 판정 줄 */
.gkf-check{display:flex;flex-direction:column;padding:14px 18px 6px}
.gkf-check-head{margin-bottom:4px}
.gkf-m{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"f" "r" "t";gap:8px;padding:12px 0;border-top:1px solid var(--soft)}
.gkf-check-head+.gkf-m{border-top:0}
.gkf-mf{grid-area:f}
.gkf-mf>.v2-label{display:block;margin:0 0 5px}
.gkf-mf>.v2-label em{display:block;margin:1px 0 0;font-style:normal;font-weight:400}
.gkf-mf .v2-input{max-width:200px}
.gkf-ruler{grid-area:r;min-width:0}
.gkf-read{grid-area:t;margin:0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted)}
.gkf-read b{display:block;color:var(--ink);font-weight:700}
.gkf-read.is-error{color:var(--accent)}
.gkf-src{display:inline;white-space:normal}
.gkf-src+.gkf-src::before{content:" · ";color:var(--line)}
.gkf-src.is-in{color:var(--ink)}
.gkf-src.is-out{color:var(--accent)}
.gkf-track{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:42px;padding:4px 0;border-bottom:1px solid var(--line)}
.gkf-lane{position:relative;height:13px}
.gkf-lane[hidden],.gkf-lane [hidden]{display:none}
.gkf-band{position:absolute;top:0;bottom:0;border-radius:2px;background:color-mix(in srgb,var(--ink) 15%,transparent);transition:left .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1)}
.gkf-band.is-open-r{border-radius:2px 0 0 2px;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 15%,transparent) 60%,transparent)}
.gkf-band.is-open-l{border-radius:0 2px 2px 0;background:linear-gradient(270deg,color-mix(in srgb,var(--ink) 15%,transparent) 60%,transparent)}
.gkf-band span,.gkf-dot span{position:absolute;top:0;font-family:var(--sans);font-size:10px;font-weight:650;line-height:13px;color:var(--ink);white-space:nowrap}
.gkf-band span{left:5px}
.gkf-band.is-open-l span{left:auto;right:5px}
.gkf-band.is-out span{left:calc(100% + 5px);right:auto;color:var(--muted)}
.gkf-band.is-out-l span{left:auto;right:calc(100% + 5px);color:var(--muted)}
.gkf-boost{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 16%,transparent) 0 2px,transparent 2px 5px);transition:left .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1)}
.gkf-dot{position:absolute;top:3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--ink);transition:left .45s cubic-bezier(.22,1,.36,1)}
.gkf-dot span{left:11px;top:-3px;color:var(--muted)}
.gkf-dot.is-out-l span{left:auto;right:11px}
.gkf-you{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink);display:none;transition:left .45s cubic-bezier(.22,1,.36,1)}
.gkf-you::after{content:"";position:absolute;top:-4px;left:-4px;border:5px solid transparent;border-top-color:var(--ink)}
.gkf-you.is-on{display:block}
.gkf-ticks{position:relative;height:15px;font-family:var(--sans);font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.gkf-ticks span{position:absolute;top:2px;transform:translateX(-50%)}
.gkf-ticks span:first-child{transform:none}
.gkf-ticks span:last-child{transform:translateX(-100%)}
.gkf-m.is-none .gkf-ruler{display:none}
.gkf-m.is-none .gkf-read{align-self:center}

@container gkf (min-width:640px){
  .gkf-main{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
  .gkf-board{border-top:0;border-left:1px solid var(--soft)}
}
@container gkf (min-width:560px){
  .gkf-m{grid-template-columns:150px minmax(0,1fr);grid-template-areas:"f r" "f t";gap:6px 18px;align-items:start}
  .gkf-m.is-none{grid-template-areas:"f t"}
}
@container gkf (max-width:559px){
  .gkf-mf{display:grid;grid-template-columns:minmax(0,1fr) 132px;align-items:center;gap:0 12px}
  .gkf-mf>.v2-label{margin:0}
}
@container gkf (max-width:520px){
  .gkf-row,.gkf-row--2{grid-template-columns:minmax(0,1fr)}
  .gkf-big{font-size:30px}
}
@container gkf (max-width:400px){
  .gkf-board{padding-left:12px;padding-right:12px}
  .gkf-days{gap:3px}
  .gkf-food svg{width:13px;height:10px}
  .gkf-sup i{font-size:8.5px;padding:2px 2px}
  .gkf-dd{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .gkf-days.is-pop .gkf-food svg,.gkf-days.is-pop .gkf-sup i{animation:none}
  .gkf-band,.gkf-boost,.gkf-dot,.gkf-you{transition:none}
}