/* 동물농장 새 화면 틀(skin). 원작 그림·배치·지도는 그대로 두고, 낡은 틀(메뉴·상자·패널·단추·입력칸)만 요즘 모양으로.
   - 모든 규칙은 html.farm-skin 아래에만 걸린다('원작 그대로'를 누르면 이 클래스가 붙지 않는다).
   - 공통 부품: .fs-card .fs-row .fs-btn .fs-chip .fs-tabs .fs-pager .fs-title .fs-tile .fs-ic  (구역 파일 static/qol/areas/*.css 가 이어 쓴다)
   - 크기는 원작 100% 기준(px). 큰 화면에서는 qol.js 가 화면 전체를 키운다. */
html.farm-skin{
  --fs-green:#43a82b;--fs-green-d:#2f8a1c;--fs-green-l:#eaf8dc;--fs-green-ll:#f4fbea;--fs-lime:#9be22a;
  --fs-blue:#3d8fe0;--fs-blue-d:#2a73c2;--fs-blue-l:#e3f1ff;--fs-yellow:#ffd34d;--fs-yellow-d:#f2b90f;--fs-pink:#ff7fb2;
  --fs-ink:#2b3a1e;--fs-sub:#6c7a60;--fs-line:#e3efd3;--fs-card:#fff;--fs-r:12px;--fs-r-s:8px;
  --fs-sh:0 2px 6px rgba(48,90,0,.14);--fs-sh-l:0 6px 18px rgba(48,90,0,.18);
  --fs-font:"Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR","Nanum Gothic",Dotum,"돋움",sans-serif;
}
/* 새 것으로 바뀔 조각만 잠깐 가린다(화면 전체는 가리지 않는다). 옛 메뉴·상자 표는 display:none 이라 그 안의 그림(loading=lazy)을 내려받지도 않는다.
   :has() 를 모르는 옛 브라우저에서는 이 규칙이 무시되어 옛 메뉴가 잠깐 보였다 바뀐다(동작은 같다). */
html.farm-skin-wait table[width="145"]:has(> tbody > tr > td > a > img[src*="left_btn_myfarm"]),
html.farm-skin-wait table[width="145"]:has(> tbody > tr > td > a > img[src*="left0611_mu_b0"]),
html.farm-skin-wait table[width="145"]:has(> tbody > tr > td > table > tbody > tr > td > #rec1){display:none}
html.farm-skin-wait div.gnb:not(.fs-top){visibility:hidden}
html.farm-skin-wait img[src*="tab_farm_main050512"]{visibility:hidden}

/* --- 글꼴: 돋움·굴림(윈도우 밖에서는 명조로 바뀌던 것) -> 또렷한 고딕. 크기는 원작 그대로 --- */
html.farm-skin body,html.farm-skin td,html.farm-skin th,html.farm-skin font,html.farm-skin div,html.farm-skin span,html.farm-skin p,
html.farm-skin a,html.farm-skin li,html.farm-skin b,html.farm-skin strong,html.farm-skin dt,html.farm-skin dd,html.farm-skin label,
html.farm-skin input,html.farm-skin textarea,html.farm-skin select,html.farm-skin button{font-family:var(--fs-font)!important}
html.farm-skin body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.farm-skin a{text-underline-offset:2px}

/* --- 아이콘 (힉스필드로 새로 그린 묶음: img/icons_menu.png 6x4, img/icons_ui.png 6x4) --- */
.fs-ic{display:inline-block;flex:none;width:18px;height:18px;vertical-align:middle;background:url(img/icons_menu.png) no-repeat;background-size:600% 400%}
.fs-ic.fs-ui{background-image:url(img/icons_ui.png)}
.fs-ic-l{width:24px;height:24px}
.fs-ic-xl{width:36px;height:36px}
.fs-ic-pointshop{background-position:0 0}.fs-ic-itemshop{background-position:20% 0}.fs-ic-sale{background-position:40% 0}
.fs-ic-petshop{background-position:60% 0}.fs-ic-home{background-position:80% 0}.fs-ic-crystal{background-position:100% 0}
.fs-ic-comic{background-position:0 33.333%}.fs-ic-festival{background-position:20% 33.333%}.fs-ic-foodshop{background-position:40% 33.333%}
.fs-ic-alchemy{background-position:60% 33.333%}.fs-ic-merchant{background-position:80% 33.333%}.fs-ic-hospital{background-position:100% 33.333%}
.fs-ic-school{background-position:0 66.667%}.fs-ic-post{background-position:20% 66.667%}.fs-ic-explore{background-position:40% 66.667%}
.fs-ic-village{background-position:60% 66.667%}.fs-ic-work{background-position:80% 66.667%}.fs-ic-bank{background-position:100% 66.667%}
.fs-ic-travel{background-position:0 100%}.fs-ic-castle{background-position:20% 100%}.fs-ic-department{background-position:40% 100%}
.fs-ic-park{background-position:60% 100%}.fs-ic-play{background-position:80% 100%}.fs-ic-library{background-position:100% 100%}
.fs-ui.fs-ic-farm{background-position:0 0}.fs-ui.fs-ic-pet{background-position:20% 0}.fs-ui.fs-ic-box{background-position:40% 0}
.fs-ui.fs-ic-coin{background-position:60% 0}.fs-ui.fs-ic-trophy{background-position:80% 0}.fs-ui.fs-ic-news{background-position:100% 0}
.fs-ui.fs-ic-star{background-position:0 33.333%}.fs-ui.fs-ic-signpost{background-position:20% 33.333%}.fs-ui.fs-ic-friends{background-position:40% 33.333%}
.fs-ui.fs-ic-note{background-position:60% 33.333%}.fs-ui.fs-ic-memo{background-position:80% 33.333%}.fs-ui.fs-ic-album{background-position:100% 33.333%}
.fs-ui.fs-ic-sprout{background-position:0 66.667%}.fs-ui.fs-ic-diary{background-position:20% 66.667%}.fs-ui.fs-ic-idcard{background-position:40% 66.667%}
.fs-ui.fs-ic-gear{background-position:60% 66.667%}.fs-ui.fs-ic-help{background-position:80% 66.667%}.fs-ui.fs-ic-headset{background-position:100% 66.667%}
.fs-ui.fs-ic-logout{background-position:0 100%}.fs-ui.fs-ic-search{background-position:20% 100%}.fs-ui.fs-ic-gift{background-position:40% 100%}
.fs-ui.fs-ic-gavel{background-position:60% 100%}.fs-ui.fs-ic-cart{background-position:80% 100%}.fs-ui.fs-ic-medal{background-position:100% 100%}

/* --- 공통 부품 --- */
.fs-card{background:var(--fs-card);border-radius:var(--fs-r);box-shadow:var(--fs-sh);overflow:hidden;text-align:left;color:var(--fs-ink)}
.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;min-height:24px;padding:3px 12px;border:0;border-radius:999px;
  background:linear-gradient(#5fc23a,#3fa226);color:#fff!important;font-weight:700;font-size:12px;line-height:1.2;text-decoration:none!important;cursor:pointer;
  box-shadow:0 2px 0 #2f8a1c,0 3px 6px rgba(48,90,0,.18);white-space:nowrap;transition:transform .08s,filter .12s}
.fs-btn:hover{filter:brightness(1.06)}
.fs-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #2f8a1c}
.fs-btn:focus-visible{outline:2px solid #1d6fd0;outline-offset:2px}
.fs-btn-w{background:#fff;color:var(--fs-green-d)!important;box-shadow:inset 0 0 0 1.5px #8fd06a,0 2px 4px rgba(48,90,0,.10)}
.fs-btn-y{background:linear-gradient(#ffe684,#ffcd3f);color:#6b4a00!important;box-shadow:0 2px 0 #e0a800,0 3px 6px rgba(120,80,0,.16)}
.fs-btn-b{background:linear-gradient(#e6f4ff,#c3e2ff);color:#1c5a8a!important;box-shadow:0 2px 0 #9ccbf0,0 3px 6px rgba(0,60,120,.12)}
.fs-btn-p{background:linear-gradient(#ff9dc6,#ff6fa8);color:#fff!important;box-shadow:0 2px 0 #e0508a,0 3px 6px rgba(140,0,60,.16)}
.fs-btn-blue{background:linear-gradient(#5aa9f2,#3586dc);color:#fff!important;box-shadow:0 2px 0 #2a6dba,0 3px 6px rgba(0,50,120,.18)}
.fs-btn-s{min-height:20px;padding:2px 9px;font-size:11px}
.fs-btn-l{min-height:30px;padding:5px 18px;font-size:13px}
.fs-chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:var(--fs-green-l);color:var(--fs-green-d);
  font-size:12px;font-weight:700;white-space:nowrap;text-decoration:none!important}
.fs-chip-pt{background:linear-gradient(#5fc23a,#3fa226);color:#fff}
.fs-title{display:flex;align-items:center;gap:6px;margin:0;padding:0;font-size:14px;font-weight:800;color:var(--fs-green-d);letter-spacing:-.3px}
.fs-more{margin-left:auto;font-size:11px;font-weight:400;color:var(--fs-sub)!important;text-decoration:none!important;white-space:nowrap}
.fs-more:hover{color:var(--fs-green-d)!important}
.fs-tabs{display:flex;gap:4px;padding:3px;border-radius:999px;background:var(--fs-green-l)}
.fs-tabs>a,.fs-tabs>button{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-height:24px;border:0;border-radius:999px;background:transparent;
  color:var(--fs-sub)!important;font-size:12px;font-weight:700;text-decoration:none!important;cursor:pointer}
.fs-tabs>.on,.fs-tabs>[aria-current]{background:#fff;color:var(--fs-green-d)!important;box-shadow:0 1px 3px rgba(48,90,0,.18)}
.fs-pager{display:flex;align-items:center;justify-content:center;gap:4px;margin:8px 0;flex-wrap:wrap}
.fs-pager a,.fs-pager b,.fs-pager span.fs-pg{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;
  border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--fs-line);color:var(--fs-ink)!important;font-size:12px;font-weight:700;text-decoration:none!important}
.fs-pager a:hover{background:var(--fs-green-l)}
.fs-pager b,.fs-pager .on{background:var(--fs-green);color:#fff!important;box-shadow:none}
.fs-tile{background:#fff;border-radius:var(--fs-r);box-shadow:0 1px 4px rgba(48,90,0,.12);transition:transform .1s,box-shadow .12s}
a.fs-tile:hover,.fs-tile:has(a:hover){transform:translateY(-1px);box-shadow:var(--fs-sh-l)}
.fs-price{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--fs-green-l);color:var(--fs-green-d);font-size:11px;font-weight:700}
.fs-hide{display:none!important}
.fs-inv{visibility:hidden!important}

/* --- 입력칸·기본 단추(원작 그림 단추가 아닌 것) --- */
html.farm-skin input[type=text],html.farm-skin input[type=password],html.farm-skin input[type=number],html.farm-skin input[type=search],
html.farm-skin input:not([type]),html.farm-skin textarea,html.farm-skin select{box-sizing:border-box;border:1px solid #bfdc9f;border-radius:6px;background:#fff;color:var(--fs-ink);
  outline:none;transition:border-color .12s,box-shadow .12s}
html.farm-skin input[type=text]:focus,html.farm-skin input[type=password]:focus,html.farm-skin input[type=number]:focus,html.farm-skin input:not([type]):focus,
html.farm-skin textarea:focus,html.farm-skin select:focus{border-color:var(--fs-green);box-shadow:0 0 0 2px rgba(67,168,43,.22)}
html.farm-skin input[type=button],html.farm-skin input[type=submit],html.farm-skin input[type=reset],html.farm-skin button:not([class]):not([data-z]){border:0;border-radius:999px;padding:3px 12px;
  background:linear-gradient(#5fc23a,#3fa226);color:#fff;font-weight:700;font-size:12px;cursor:pointer;box-shadow:0 2px 0 #2f8a1c}
html.farm-skin input[type=button]:hover,html.farm-skin input[type=submit]:hover,html.farm-skin button:not([class]):not([data-z]):hover{filter:brightness(1.06)}

/* --- 맨 위 띠(동물농장 온라인 포털 메뉴 자리) --- */
html.farm-skin .gnb.fs-top{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06),0 2px 8px rgba(0,60,120,.06);height:40px;width:100%;text-align:center;position:relative;z-index:30}
.fs-top-in{display:flex;align-items:center;gap:6px;width:750px;max-width:100%;height:40px;margin:0 auto;text-align:left}
.fs-top-home{display:inline-flex;align-items:center;gap:5px;color:var(--fs-green-d)!important;font-size:13px;font-weight:800;text-decoration:none!important;letter-spacing:-.3px}
.fs-top-sp{flex:1}
.fs-top .fs-chip{height:24px}
.fs-top a.fs-chip:hover{background:#dbf3c4}
.fs-top-link{color:var(--fs-sub)!important;font-size:12px;text-decoration:none!important;padding:0 4px}
.fs-top-link:hover{color:var(--fs-green-d)!important}

/* --- 좌측: 내 농장 상자 + 메뉴 --- */
.fs-side{width:145px;text-align:left}
.fs-side .fs-card{margin:0 0 7px}
.fs-my-hd{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;background:linear-gradient(#63c33a,#45a628);color:#fff!important;font-size:12px;font-weight:800;
  text-decoration:none!important;letter-spacing:-.3px}
.fs-my-hd:hover{filter:brightness(1.06)}
.fs-my-hd em{margin-left:auto;font-style:normal;font-size:14px;line-height:1}
.fs-my-pic{display:block;line-height:0;background:#bfeaff}
.fs-my-pic img{display:block;width:145px;height:auto}
.fs-kv{padding:6px 7px 3px 8px}
.fs-kv>div{display:flex;align-items:center;gap:4px;min-height:19px;font-size:12px;white-space:nowrap}
.fs-kv>div>span{flex:none;width:40px;color:#4e9a25;font-size:11px;letter-spacing:-.5px}
.fs-kv>div>b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--fs-ink);letter-spacing:-.4px}
.fs-kv font{color:inherit!important;font-size:inherit!important}
.fs-kv a{color:var(--fs-ink)!important;text-decoration:none}
.fs-kv a:hover{color:var(--fs-green-d)!important;text-decoration:underline}
.fs-kv img{vertical-align:middle;max-height:16px}
.fs-kv .fs-pt{color:var(--fs-green-d);font-weight:800}
.fs-my-msg{padding:8px 10px 2px;font-size:12px;line-height:1.5;color:#3d6a1c;letter-spacing:-.3px}
.fs-my-btns{display:flex;flex-direction:column;gap:5px;padding:5px 9px 10px}
.fs-my-btns .fs-btn{width:100%;min-height:26px;justify-content:flex-start;padding-left:12px}
.fs-menu{padding:5px}
.fs-row{display:flex;align-items:center;gap:6px;min-height:25px;padding:0 6px;border-radius:8px;color:#3b4a2e!important;font-size:12px;text-decoration:none!important;
  letter-spacing:-.3px;white-space:nowrap;position:relative}
.fs-row:hover{background:var(--fs-green-ll);color:var(--fs-green-d)!important}
.fs-row[aria-current]{background:var(--fs-green-l);color:var(--fs-green-d)!important;font-weight:800}
.fs-row[aria-current]:before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:2px;background:var(--fs-green)}
.fs-row:focus-visible{outline:2px solid #1d6fd0;outline-offset:-2px}
.fs-row img{max-width:100%}
.fs-fold-hd{display:flex;align-items:center;gap:5px;width:100%;height:28px;margin:0 0 3px;padding:0 9px;border:0;border-radius:9px;cursor:pointer;
  background:linear-gradient(#63c33a,#45a628);color:#fff;font-size:12px;font-weight:800;letter-spacing:-.3px;text-align:left;box-shadow:0 2px 0 #2f8a1c}
.fs-fold-hd.fs-blue{background:linear-gradient(#5aa9f2,#3586dc);box-shadow:0 2px 0 #2a6dba}
.fs-fold-hd:hover{filter:brightness(1.06)}
.fs-fold-hd:focus-visible{outline:2px solid #ffb300;outline-offset:1px}
.fs-fold-hd em{margin-left:auto;width:7px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.fs-fold.fs-shut .fs-fold-hd em{transform:rotate(-45deg) translate(-2px,-1px)}
.fs-fold.fs-shut .fs-fold-bd{display:none}
.fs-fold+.fs-fold{margin-top:6px}
.fs-all{margin-top:4px;border-top:1px dashed var(--fs-line);padding-top:4px}
.fs-all .fs-row{color:var(--fs-sub)!important;font-size:11px}

/* --- 메인: 아래 세 패널·홍보푯말을 흰 카드로 (원작 표는 그대로 두고 꾸미기만) --- */
html.farm-skin table.fs-panel{background:#fff;border-radius:var(--fs-r);box-shadow:var(--fs-sh);border-collapse:separate;overflow:hidden}
html.farm-skin table.fs-panel td{background:transparent!important}
html.farm-skin table.fs-panel .fs-title{height:34px;padding:0 10px;border-bottom:1px solid var(--fs-line)}
html.farm-skin table.fs-panel .lst_notice{margin:6px 10px 2px;padding:0}
html.farm-skin table.fs-panel .lst_notice li{position:relative;padding:2px 0 2px 10px;font-size:12px;line-height:1.5;background:none;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.farm-skin table.fs-panel .lst_notice li:before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:var(--fs-green)}
html.farm-skin table.fs-panel .lst_notice a{color:var(--fs-ink);text-decoration:none}
html.farm-skin table.fs-panel .lst_notice a:hover{color:var(--fs-green-d);text-decoration:underline}
html.farm-skin .fs-panel-wrap>tbody>tr>td{background:transparent!important}
html.farm-skin #farm_signpost.fs-banner{border-collapse:separate;background:linear-gradient(#f3fbe6,#e6f7cf);border-radius:16px;box-shadow:inset 0 0 0 1.5px #b4e27e,var(--fs-sh)}
html.farm-skin #farm_signpost.fs-banner td{background:transparent!important}

/* --- 오른쪽 아래 띠 --- */
html.farm-skin #__farm_badge,html.farm-skin #__farm_legal{background:rgba(255,255,255,.94)!important;border:1px solid #cfe8b4!important;border-radius:999px!important;
  box-shadow:0 2px 8px rgba(48,90,0,.16)!important;font-family:var(--fs-font)!important;padding:3px 8px!important}

@media print{.fs-top{display:none!important}}