/* 한울타리: 기존 직원·PIN 폼을 감싸는 농장 풍경. */
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) {
  --ld-bg:#15382f; --ld-panel:#fffdf6; --ld-input:#f5f6ef; --ld-ink:#203c31;
  --ld-muted:#52674f; --ld-line:#cbd4c5; --ld-accent:#294f3c; --ld-accent-ink:#fff9e9;
  --ld-error:#9b382c; color-scheme:light; background:#15382f;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-shell {
  position:relative; isolation:isolate; width:100%; max-width:1180px; margin:24px auto;
  border-radius:22px; background:#15382f; overflow:hidden;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-effects-layer { z-index:0; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-backdrop { position:absolute; inset:0; overflow:hidden; background:#16382e; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-scene {
  display:block; width:100%; height:100%; object-fit:cover; object-position:center 62%;
  transform:scale(1.035) translate(var(--hfence-dx,0px),var(--hfence-dy,0px)); filter:saturate(.85);
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-shade {
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,34,28,.65),rgba(8,34,28,.2) 38%,rgba(6,30,24,.14) 69%,rgba(6,30,24,.72));
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-glow {
  position:absolute; left:50%; top:46%; width:78%; height:46%; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,214,132,.15),rgba(255,205,107,.06) 52%,transparent 72%);
  animation:hfence-breathe 8s ease-in-out infinite;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-header {
  position:relative; z-index:2; color:#fff9e7; border:0; padding:22px 28px; gap:12px;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-wordmark { color:#fff9e7; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-wordmark>span { color:#f3d59b; background:#183d32; border-color:#688268; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-wordmark small { color:#ebdec1; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .time-display { align-items:center; color:#ebdec1; font-size:11px; gap:10px; }
/* PC 는 화면이 넓어 11px 가 작다. 날짜·시간만 조금 키운다.
   760px 이하(휴대폰·작은 태블릿)는 그대로 11px 다 — 머리글이 좁아 키우면 줄이 넘친다. */
@media(min-width:761px) {
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .time-display { font-size:13px; }
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .time { color:#fff9e7; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .preview-notice {
  position:relative; z-index:2; color:#f5e9cf; background:#234a3e; border-color:#476f5a;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-layout {
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  max-width:none; margin:0; padding:2px 28px 30px; gap:0;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-story { display:block; width:100%; min-width:0; order:0; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-intro {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin:6px 0 25px; color:#fffbed; text-shadow:0 2px 16px rgba(8,28,21,.75);
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-since {
  margin:0 0 7px; font-family:'Gowun Batang',Batang,Georgia,serif; font-size:12px;
  letter-spacing:.23em; color:#f5d49a;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-name {
  margin:0 0 13px; color:#fffbed!important; font-family:'Gowun Batang',Batang,Georgia,serif;
  font-size:38px; line-height:1.35; font-weight:700; letter-spacing:.06em;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-tagline {
  margin:0; max-width:100%; color:#f8edcf;
  font-family:'Gowun Batang',Batang,Georgia,serif; font-size:17px; line-height:1.75;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-tagline span { display:block; overflow-wrap:anywhere; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-container { width:100%; min-width:0; max-width:370px; margin:0 auto; order:1; }
/* 하얀 상자 없이 농장 그림 위에 바로 올린다. 입력칸만 반투명 유리로 남긴다. */
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-login {
  position:relative; padding:0; background:none; border:0; border-radius:0; box-shadow:none;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .logo-section { text-align:center; margin-bottom:15px; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .logo-icon { display:none; }
/* 제목과 입력칸 이름은 화면에서만 감춘다. 읽어 주는 기기에는 그대로 전달된다. */
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .logo-text,
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .form-label {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; white-space:nowrap; clip-path:inset(50%);
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .logo-subtitle {
  margin:0; color:#dfe6d8; font-size:13px; line-height:1.65; text-shadow:0 2px 12px rgba(6,26,21,.85);
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .lang-toggle {
  display:flex; width:fit-content; margin:0 auto 16px; padding:0; gap:0;
  background:none; border:1px solid rgba(255,250,235,.4); border-radius:22px; overflow:hidden;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .lang-btn {
  min-height:38px; padding:0 15px; font-size:12px; border-radius:0;
  background:none!important; color:#f2ecda!important;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .lang-btn.active { background:#f4e5c2!important; color:#20372c!important; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .form-group { margin-bottom:18px; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .form-select,
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .pin-input {
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24); color:#f4f7ef;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .form-select { min-height:56px; font-size:16px; border-radius:15px; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .pin-input { height:60px; border-radius:15px; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .pin-input.filled { background:rgba(244,229,194,.92); border-color:#f4e5c2; color:#20372c; box-shadow:none; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .pin-input.error { border-color:#f0a99c; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .auto-login-wrapper { margin-bottom:20px; min-height:24px; color:#cfd8c9; text-shadow:0 1px 8px rgba(6,26,21,.8); }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .error-message { color:#ffd9d0; background:rgba(120,36,26,.5); border-color:#e2a091; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-btn {
  /* 색은 배경색으로도 적어 둔다. 무늬만 넣으면 대비 검사가 바탕색을 못 읽는다. */
  background-color:#eed6a0!important; background-image:linear-gradient(#f3e0b4,#e6cb8f)!important;
  border-radius:15px; min-height:56px; box-shadow:0 10px 26px rgba(4,20,15,.45);
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-btn,
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-btn .btn-text { color:#1d3529!important; }
/* 들어가기 — 평소에는 로그인 칸이 접혀 있고, 누르면 문이 열리듯 펼쳐진다.
   접는 것은 자바스크립트가 data-fence-gate 를 달았을 때뿐이다. 실패하면 칸이 그대로 보인다. */
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-container { position:relative; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-enter {
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  min-height:50px; padding:0 30px; white-space:nowrap;
  font-family:'Gowun Batang',Batang,Georgia,serif; font-size:17px; letter-spacing:.1em;
  color:#f6e7c4; background:rgba(255,255,255,.06);
  border:1px solid rgba(244,229,194,.62); border-radius:26px;
  box-shadow:0 0 22px rgba(224,183,98,.16),inset 0 0 18px rgba(224,183,98,.07);
  transition:opacity .2s ease,transform .3s ease,letter-spacing .3s ease;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-enter:focus-visible { outline:2px solid #f4e5c2; outline-offset:3px; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-gateline {
  position:absolute; left:50%; top:24px; height:2px; width:0; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#ffe7b0,transparent);
  box-shadow:0 0 22px 5px rgba(249,205,114,.6); opacity:0; pointer-events:none;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"])[data-fence-gate="closed"] .hfence-container { min-height:50px; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"])[data-fence-gate="closed"] .hfence-login {
  max-height:0; overflow:hidden; visibility:hidden; opacity:0; clip-path:inset(50% 0 50% 0);
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"])[data-fence-gate="open"] .hfence-enter {
  opacity:0; pointer-events:none; letter-spacing:.9em; transform:translateX(-50%) scale(1.06);
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"])[data-fence-gate="open"] .hfence-gateline {
  animation:hfence-gateline .76s cubic-bezier(.2,.7,.3,1) both;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"])[data-fence-gate="open"] .hfence-login {
  animation:hfence-door .52s cubic-bezier(.2,.72,.28,1) .26s both;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"])[data-fence-gate="open"] .hfence-fx {
  animation:hfence-flash .8s ease .2s;
}
@keyframes hfence-gateline { 0% { width:0; opacity:0 } 45% { width:100%; opacity:1 } 100% { width:100%; opacity:0 } }
@keyframes hfence-door { from { clip-path:inset(50% 0 50% 0); opacity:.2 } to { clip-path:inset(0 0 0 0); opacity:1 } }
@keyframes hfence-flash { 0% { filter:none; transform:none } 35% { filter:brightness(1.5); transform:scale(1.04) } 100% { filter:none; transform:none } }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-footer {
  position:relative; z-index:2; border:0; color:#f5e9cf; padding:16px 28px 22px;
  text-shadow:0 2px 7px #18332a;
}
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"])[data-login-effects-playing="false"] .hfence-scene { transform:scale(1.035); }
@keyframes hfence-breathe {
  0%,100% { opacity:.5; transform:translate(-50%,-50%) scale(.96); }
  50% { opacity:.78; transform:translate(-50%,-50%) scale(1.05); }
}
@media(max-width:760px) {
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-shell { margin:0 auto; border-radius:0; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-header { padding:16px 20px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .time-display .time { display:none; }
}
@media(max-width:640px) {
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-header { padding:15px 17px; gap:10px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-wordmark { font-size:16px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .time-display { font-size:11px; gap:9px; }
  /* 그림이 화면 끝까지 내려간다. 예전에는 337px 에서 끊겨 아래가 단색으로 찼다. */
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-shell { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-layout { flex:1 1 auto; min-height:0; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-scene { object-position:20% 60%; transform:none; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-shade {
    background:linear-gradient(180deg,#15382f 0,rgba(10,38,30,.88) 38px,rgba(8,34,28,.34) 118px,rgba(8,34,28,.14) 22%,rgba(7,30,24,.42) 52%,rgba(5,24,19,.7) 76%,rgba(4,20,16,.86));
  }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-layout { padding:0 18px 24px; gap:0; }
  /* 글귀 덩어리를 금빛 타원 한가운데(그림 위에서 232px)에 둔다. 머리글 75px + 92px = 167px 에서 시작한다.
     로그인 칸은 447px 에서 시작한다. 타원 아래끝 337px 에서 110px 아래다. */
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-intro { min-height:372px; margin:0; padding-top:92px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-since { font-size:11px; margin-bottom:4px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-name { font-size:32px; margin-bottom:8px; letter-spacing:.07em; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-tagline { font-size:14px; line-height:1.7; margin-top:10px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-glow { top:220px; width:110%; height:240px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-container { max-width:370px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-enter { font-size:16px; padding:0 26px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-footer { padding:15px 20px 24px; font-size:11px; }
}
@media(max-width:389px) {
  /* 머리글이 두 줄이 되어 27px 내려앉는 기기. 글귀가 타원 가운데에 그대로 오도록 맞춘다. */
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-intro { padding-top:65px; }
}
@media(max-width:350px) {
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-layout { padding-left:13px; padding-right:13px; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-header { padding-left:14px; padding-right:14px; }
}
@media(prefers-reduced-motion:reduce) {
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) *,#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) *:before,#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) *:after { animation:none!important; transition:none!important; }
}

/* PC 에서는 그림이 화면을 꽉 채운다.
   좁은 창에 갇혀 좌우에 빈 여백만 남던 것을 없앤다. 로그인 상자는 제 폭을 지킨다.
   모바일에서 이미 쓰는 '가장자리까지 붙이기' 를 큰 쪽에도 그대로 적용한다. */
@media(min-width:761px) {
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-shell {
    max-width:none; margin:0; border-radius:0; border-left:0; border-right:0;
    min-height:100vh; min-height:100dvh;
  }

  /* 본문이 남는 높이를 채운다 (그러지 않으면 아래가 크게 빈다) */
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-shell { display:flex; flex-direction:column; }
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .login-layout { flex:1 1 auto; min-height:0; }
}

/* 세로로 넉넉한 PC 화면에서는 로그인 상자를 금빛 타원 한가운데 둔다.
   타원 중심은 그림 높이의 53.5% 지점이다 (login-fx-fence.js 의 cy).
   .hfence-layout 은 머리글 91px 아래에서 시작하고 아래로 58px 을 남기므로
   같은 지점이 layout 기준으로는 53.5% 에서 11px 위가 된다.
   한울축산 글귀는 지금 자리 그대로 둔다. 세로가 좁으면 글귀와 겹치므로 적용하지 않는다 (980px 미만). */
@media(min-width:761px) and (min-height:980px) {
  #loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]) .hfence-container {
    position:absolute; left:50%; top:calc(53.5% - 11px); transform:translate(-50%,-50%);
  }
}

/* 같은 한울타리 구도에 햇살과 밝은 유리 입력칸을 얹는다. */
/* 로그인 성공 화면: 밤은 바탕이 깊은 초록인데 글자(--ld-ink)도 짙은 초록이라 안 보였다. 밤에만 크림 글자.
   차오르는 한울 표시도 마찬가지다. 밤의 --ld-accent(#294f3c)는 바탕(#15382f)과 대비가 1.4뿐이라
   그대로 두면 표시가 안 보인다. 밤은 금빛으로, 낮은 짙은 초록으로 채운다. */
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]):not([data-fence-lighting="day"]) .success-text { color:#fff9e7; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]):not([data-fence-lighting="day"]) .success-subtext { color:#ebdec1; }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]):not([data-fence-lighting="day"]) .success-mark { color:rgba(255,249,231,.26); }
#loginPage:is([data-login-design="fence"],[data-login-design="fence-day"],[data-login-design="fence-auto"]):not([data-fence-lighting="day"]) .success-fill { color:#eacb8b; }
/* 낮은 연두 바탕이라 금빛이 묻힌다. 짙은 초록으로 채운다. */
#loginPage[data-fence-lighting="day"] .success-mark { color:rgba(37,71,53,.24); }
#loginPage[data-fence-lighting="day"] .success-fill { color:#294f3c; }

#loginPage[data-fence-lighting="day"] {
  --ld-bg:#e4ecd9; --ld-panel:#f7f5e6; --ld-input:#edf0df; --ld-ink:#254735;
  --ld-muted:#435b42; --ld-line:#92a17e; --ld-accent:#eacb8b; --ld-accent-ink:#2d472f;
  --ld-error:#7f322a; background:#e4ecd9; color-scheme:light;
}
#loginPage[data-fence-lighting="day"] .hfence-shell,
#loginPage[data-fence-lighting="day"] .hfence-backdrop { background:#e4ecd9; }
#loginPage[data-fence-lighting="day"] .hfence-scene { filter:saturate(.91); }
#loginPage[data-fence-lighting="day"] .hfence-shade {
  background:linear-gradient(180deg,rgba(237,247,236,.38),transparent 28%,transparent 80%,rgba(232,236,194,.56));
}
#loginPage .hfence-sun { display:none; }
#loginPage[data-fence-lighting="day"] .hfence-sun {
  display:block; position:absolute; inset:-40% -30%; pointer-events:none;
  background:linear-gradient(115deg,transparent 39%,rgba(255,247,191,0) 43%,rgba(255,249,214,.21) 47%,rgba(255,255,213,.31) 48%,rgba(255,247,190,.13) 50%,transparent 55%);
  animation:hfence-sunpass 16s ease-in-out infinite alternate;
}
#loginPage[data-fence-lighting="day"] .hfence-glow {
  background:radial-gradient(ellipse,rgba(255,244,180,.2),rgba(255,235,165,.08) 52%,transparent 72%);
}
#loginPage[data-fence-lighting="day"] .hfence-header,
#loginPage[data-fence-lighting="day"] .login-wordmark { color:#234836; }
#loginPage[data-fence-lighting="day"] .login-wordmark>span {
  background:#edf2df; color:#34583e; border-color:#608164; box-shadow:inset 0 1px #fffff1;
}
#loginPage[data-fence-lighting="day"] .login-wordmark small { color:#49624b; }
#loginPage[data-fence-lighting="day"] .time-display,
#loginPage[data-fence-lighting="day"] .time { color:#37533c; text-shadow:0 1px 4px #ffffda; }
#loginPage[data-fence-lighting="day"] .hfence-intro { color:#214935; text-shadow:0 1px 5px rgba(255,255,230,.55); }
#loginPage[data-fence-lighting="day"] .hfence-name { color:#214935!important; }
#loginPage[data-fence-lighting="day"] .hfence-since { color:#725621; }
#loginPage[data-fence-lighting="day"] .hfence-tagline { color:#314c33; }
#loginPage[data-fence-lighting="day"] .preview-notice { color:#314b34; background:#f0f3df; border-color:#81916d; }
#loginPage[data-fence-lighting="day"] .hfence-login { isolation:isolate; }
#loginPage[data-fence-lighting="day"] .hfence-login:before {
  content:''; position:absolute; z-index:-1; inset:-30px -45px; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(244,245,223,.87),rgba(244,245,223,.68) 38%,rgba(244,245,223,.4) 60%,transparent 76%);
  filter:blur(13px);
}
#loginPage[data-fence-lighting="day"] .logo-subtitle {
  color:#314a31; text-shadow:0 1px 5px #ffffe5;
}
#loginPage[data-fence-lighting="day"] .lang-toggle { border-color:#80936c; background:#eff0dd; }
#loginPage[data-fence-lighting="day"] .lang-btn { background:#eff0dd!important; color:#39503a!important; }
#loginPage[data-fence-lighting="day"] .lang-btn.active { background:#3d6246!important; color:#fff9e3!important; }
#loginPage[data-fence-lighting="day"] .form-select,
#loginPage[data-fence-lighting="day"] .pin-input {
  background-color:#edf0df; background-image:linear-gradient(145deg,#fbf8e9,#e5ebd9);
  color:#254735; border-color:#92a17e; box-shadow:inset 0 1px #fffff0,0 3px 14px rgba(53,93,50,.11);
}
#loginPage[data-fence-lighting="day"] .form-select option { background:#edf0df; color:#254735; }
#loginPage[data-fence-lighting="day"] .pin-input.filled {
  background:#e9d3a1; border-color:#ac843c; color:#2d4933; box-shadow:inset 0 1px #fff4d2;
}
#loginPage[data-fence-lighting="day"] .pin-input.error { border-color:#a04d3c; }
#loginPage[data-fence-lighting="day"] .auto-login-wrapper,
#loginPage[data-fence-lighting="day"] .auto-login-label { color:#314b34; text-shadow:0 1px 5px #ffffdb; }
#loginPage[data-fence-lighting="day"] .auto-login-checkbox { accent-color:#486a49; }
#loginPage[data-fence-lighting="day"] .error-message { color:#7f322a; background:#fff0dc; border-color:#bb8161; }
#loginPage[data-fence-lighting="day"] .login-btn {
  background-color:#eacb8b!important; background-image:linear-gradient(#f6e5b8,#e4c483)!important;
  box-shadow:0 7px 20px rgba(98,70,24,.2),inset 0 1px #fff9db;
}
#loginPage[data-fence-lighting="day"] .login-btn,
#loginPage[data-fence-lighting="day"] .login-btn .btn-text { color:#2d472f!important; }
#loginPage[data-fence-lighting="day"] .hfence-enter {
  background-color:#efecd4; background-image:linear-gradient(145deg,#fff6db,#e9e8cf);
  color:#2a4b36; border-color:#9e7b3c; box-shadow:0 4px 20px rgba(119,82,26,.15),inset 0 1px #fffceb;
}
#loginPage[data-fence-lighting="day"] .hfence-enter:focus-visible { outline-color:#34583e; }
#loginPage[data-fence-lighting="day"] .hfence-gateline {
  background:linear-gradient(90deg,transparent,#b18338 22%,#fff6cc 50%,#b18338 78%,transparent);
  box-shadow:0 0 19px 3px rgba(255,225,155,.47);
}
#loginPage[data-fence-lighting="day"] .login-footer { color:#324e35; text-shadow:0 1px 5px #ffffd7; }
@keyframes hfence-sunpass {
  from { transform:translateX(-7%); opacity:.45; }
  to { transform:translateX(8%); opacity:.9; }
}
@media(max-width:640px) {
  #loginPage[data-fence-lighting="day"] .hfence-shade {
    background:linear-gradient(180deg,#e4ecd9 0,rgba(232,242,223,.77) 38px,rgba(232,242,223,.2) 118px,transparent 30%,rgba(237,241,214,.3) 67%,rgba(230,237,206,.75));
  }
  #loginPage[data-fence-lighting="day"] .hfence-login:before { inset:-28px -24px; filter:blur(11px); }
}