/* 1.51 화면 틀: 왼쪽 세로 메뉴(사이드바, 글자 약 120%) + 축종 사진 배너(시안 B) + 굵은 두 톤 아이콘(Phosphor, MIT) + 웃는 소 로고.
   style.css(파스텔 포인트) 위에 덧씌움. 옛 위쪽 메뉴(header a::before/::after 아이콘 칸)는 이 틀에서 쓰지 않음. */
:root{--sw:252px;--bh:184px}
body.lay{margin:0;background:var(--bg)}
/* ---- 머리 배너 ---- */
body.lay>header.banner{position:relative;top:auto;display:flex;align-items:center;gap:14px;height:var(--bh);padding:0 26px;box-sizing:border-box;border:0;box-shadow:none;
  background:linear-gradient(90deg,#f3f5ff 0%,#eef1ff 40%,#f6f1ff 100%);overflow:hidden;flex-wrap:nowrap;color:var(--h);z-index:auto}
body.lay>header.banner a{padding:0;border-radius:0;font-size:inherit;white-space:nowrap}
body.lay>header.banner a::before,body.lay>header.banner a::after,body.lay>header.banner button::before,body.lay>header.banner button::after{content:none!important;display:none!important}
body.lay>header.banner a:hover{background:none}
header.banner .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--h);margin-right:auto;padding:0}
header.banner .logo{width:58px;height:58px;object-fit:contain;border-radius:0;margin:0;box-shadow:none;background:none;padding:0;filter:drop-shadow(0 3px 8px rgba(40,50,120,.18))}
header.banner .bt{display:flex;flex-direction:column;line-height:1.2}
header.banner .bt b{font-size:25px;font-weight:800;letter-spacing:-.6px;color:#1d2140;text-shadow:0 1px 0 rgba(255,255,255,.7)}
header.banner .bt small{font-size:13.5px;color:#4a5270;font-weight:600;margin-top:3px}
.hright{display:flex;align-items:center;gap:10px}
body.lay .hright .who{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border-radius:999px;padding:5px 12px 5px 5px;text-decoration:none;color:var(--h);
  box-shadow:0 2px 10px rgba(40,50,120,.12);font-weight:700;font-size:15px}
.hright .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#8ea0ff,#c8a8ff);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex:0 0 32px}
.hright .badge{font-size:12px}.badge.role-worker{background:#e9f7ee;color:#2f7d4a}
body.lay .hright .outbtn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border:0;border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;
  font-size:15px;color:#3f53d6;cursor:pointer;box-shadow:0 2px 10px rgba(40,50,120,.12)}
.hright .outbtn:hover{background:#fff}
body.lay .hlink{background:rgba(255,255,255,.88);border-radius:999px;padding:8px 14px;font-weight:700;text-decoration:none;color:#3f53d6}
.burger{display:none}
/* 축종 사진 순환: 한우→젖소→돼지→산란계→육계→오리, 각 7초, 1.5초 겹쳐 바뀜(한 바퀴 42초). 사진은 배너 오른쪽 절반. */
.slides{position:absolute;top:0;bottom:0;right:0;left:50%;z-index:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
.slide{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;animation:sfade 42s linear infinite;animation-delay:calc(var(--i) * 7s - 1.5s);will-change:opacity}
.s-hanwoo{background-image:url(/static/banner/hanwoo.jpg);background-position:center 50%}
.s-dairy{background-image:url(/static/banner/dairy.jpg);background-position:center 40%}
.s-pig{background-image:url(/static/banner/pig.jpg);background-position:center 45%}
.s-layer{background-image:url(/static/banner/layer.jpg);background-position:center 30%}
.s-broiler{background-image:url(/static/banner/broiler.jpg);background-position:center 50%}
.s-duck{background-image:url(/static/banner/duck.jpg);background-position:center 50%}
@keyframes sfade{0%{opacity:0}3.571%{opacity:1}16.667%{opacity:1}20.238%{opacity:0}100%{opacity:0}}
header.banner::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(0deg,rgba(79,99,230,.08),rgba(255,255,255,0) 50%)}
header.banner>*:not(.slides){position:relative;z-index:1}
.stag{position:absolute;right:14px;bottom:10px;z-index:2;background:rgba(255,255,255,.84);color:#3343c4;font-weight:800;font-size:12.5px;padding:3px 10px;border-radius:999px;box-shadow:0 1px 6px rgba(40,50,120,.15)}
header.banner:hover .slide{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.slide{animation:none;opacity:0}.slide.s-hanwoo{opacity:1}}
/* ---- 왼쪽 메뉴 ---- */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - var(--bh))}
.side{position:sticky;top:0;flex:0 0 var(--sw);width:var(--sw);height:100vh;max-height:100vh;overflow-y:auto;box-sizing:border-box;padding:16px 12px 18px;
  background:#fff;border-right:1px solid #e7e9f3;box-shadow:2px 0 14px rgba(40,50,120,.04)}
.snav{display:flex;flex-direction:column;gap:2px;min-height:100%}
.snav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;color:#2c3250;text-decoration:none;font-size:16.2px;font-weight:600;letter-spacing:-.2px;line-height:1.3}
.snav a:hover{background:#f3f5ff;text-decoration:none}
.snav a.on{background:var(--g2,#eceffe);color:#3343c4;font-weight:800;box-shadow:inset 3px 0 0 #4f63e6}
.snav .star{color:#f2a900;margin-right:3px;font-size:14px}
.snav .sh{margin:14px 12px 4px;font-size:12.5px;font-weight:800;color:#9aa1bf;letter-spacing:.4px}
.snav .shs{font-weight:600;color:#c0a24a;margin-left:4px}
.snav .sfoot{margin-top:16px;padding-top:12px;border-top:1px solid #eef0f7}
.snav .priv{font-size:13px;font-weight:500;color:#8a90aa;padding:6px 12px}
/* 아이콘: 굵은 윤곽 + 연한 면, 메뉴마다 색 */
.ib{display:inline-grid;place-items:center;flex:0 0 auto;color:var(--ic,#56607a)}
.ib .si{display:block;width:28px;height:28px;color:inherit;flex:none}
.ib-home{--ic:#4f63e6}.ib-diary{--ic:#e8730c}.ib-book{--ic:#2f9e5a}.ib-lib{--ic:#d49b00}.ib-farm{--ic:#d9443a}.ib-rule{--ic:#5a6585}.ib-backup{--ic:#1c8ad6}
.ib-update{--ic:#13a085}.ib-members{--ic:#8a4fd8}.ib-shield{--ic:#3d55c9}.ib-diag{--ic:#d6336c}.ib-me{--ic:#56607a}
.ib-menu,.ib-out{--ic:currentColor}
.snav a.on .ib{filter:saturate(1.2)}
.burger .ib .si{width:22px;height:22px}.outbtn .ib .si{width:19px;height:19px}
.content{flex:1 1 auto;min-width:0}
.content main{max-width:1180px;margin:0 auto;padding:22px 30px 40px}
.content .upbar{margin:0}
.scrim{display:none}
body.anon .shell{display:block}
@media (max-width:900px){:root{--sw:224px}.snav a{font-size:15.5px}}
/* ---- 휴대폰: 메뉴는 서랍(☰) ---- */
@media (max-width:700px){
 :root{--bh:110px}
 body.lay>header.banner{padding:0 14px;gap:10px}
 .slides{left:54%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
 .stag{right:8px;bottom:6px;font-size:11px}
 body.lay .burger{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:0;background:rgba(255,255,255,.92);color:#3343c4;box-shadow:0 2px 10px rgba(40,50,120,.14);flex:0 0 42px;padding:0;cursor:pointer}
 header.banner .brand{gap:8px;min-width:0}
 header.banner .logo{width:40px;height:40px;flex:0 0 40px}
 header.banner .bt{min-width:0}
 header.banner .bt b{font-size:16.5px;letter-spacing:-.7px;white-space:nowrap;text-shadow:0 0 6px #f3f5ff,0 0 10px #f3f5ff}header.banner .bt small{display:none}
 .hright{gap:6px}
 .hright .wn,.hright .badge,.hright .outbtn span:not(.ib){display:none}
 body.lay .hright .who{width:42px;height:42px;padding:5px;gap:0;justify-content:center;box-sizing:border-box;flex:0 0 42px}
 body.lay .hright .outbtn{padding:11px}
 .side{position:fixed;left:0;top:0;bottom:0;height:auto;max-height:none;z-index:50;width:min(84vw,300px);flex:none;transform:translateX(-105%);transition:transform .22s ease;box-shadow:8px 0 30px rgba(20,30,80,.22);padding-top:20px}
 body.drawer .side{transform:none}
 .scrim{display:block;position:fixed;inset:0;background:rgba(20,26,60,.38);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
 body.drawer .scrim{opacity:1;pointer-events:auto}
 body.drawer{overflow:hidden}
 .snav a{font-size:17px;padding:11px 12px}
 .snav .sfoot{margin-top:auto}
 .shell{display:block}.content main{padding:16px 14px 30px}
}
@media print{header.banner,.side,.scrim{display:none!important}.shell{display:block}}
/* 미리보기 구성요소 받기 진행 막대 */
progress.compbar[hidden]{display:none}
progress.compbar{display:block;width:100%;max-width:520px;height:12px;margin:6px 0 4px;accent-color:#4f63e6}