/* 농장마을: 기존 흐름 탭의 노란색 계열 유지 → 전신 아바타 대기실 → 실제 업무 메뉴.
   이동 크기/대기실 높이는 아래 변수, 이미지 주소와 주기는 avatar-flow.js CONFIG로 관리한다. */
#flow-screen.af-enabled{--af-ink:#183f33;--af-sub:#526d5e;--af-edge:#ccd9c5;--af-green:#206c4b;--af-paper:#fffdf3;--af-tint:#e5f0e2;--af-ground:#d9e8ca;--af-shadow:#294c3420;background:var(--af-paper)}
#flow-screen.af-enabled>.flow-grid,#flow-screen.af-enabled>.flow-wires,#flow-screen.af-enabled>#flow-current{display:none!important}
#flow-screen .af-village{color:var(--af-ink);max-width:500px;margin:0 auto;font:14px/1.45 -apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
#flow-screen .af-village *{box-sizing:border-box}
#flow-screen .af-room-title,#flow-screen .af-map-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:7px 0;font-size:13px}
#flow-screen .af-room-title>span,#flow-screen .af-map-title>span{font-size:11px;color:var(--af-sub)}
#flow-screen .af-map-title h2{font-size:17px;margin:4px 0;font-weight:800}
#flow-screen .af-room{height:218px;background:linear-gradient(#fff,#eef5eb);border:1px solid var(--af-edge);border-radius:16px;position:relative;overflow:hidden}
#flow-screen .af-room::before{content:'DUNG LOUNGE';position:absolute;top:8px;left:12px;font-size:10px;letter-spacing:1.3px;color:var(--af-sub);pointer-events:none}
#flow-screen button.af-role{position:absolute;transform:translateX(-50%);width:70px;min-height:74px;height:74px;display:flex;flex-direction:column;align-items:center;gap:1px;border:0;padding:0;background:transparent;color:var(--af-ink);box-shadow:none;font:700 11px/1.4 -apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;cursor:pointer;white-space:nowrap}
#flow-screen button.af-role[hidden],#flow-screen .af-avatar[hidden]{display:none}
#flow-screen button.af-role>span:last-child{font-size:11px;line-height:18px;background:#ffffffed;border-radius:5px;padding:2px 4px}
#flow-screen button.af-role:disabled{opacity:.45}
#flow-screen .af-person{width:28px;height:52px;display:block;flex:none;background-image:var(--af-atlas);background-size:400% 100%;background-position:0 0;background-repeat:no-repeat;transform-origin:center bottom}
#flow-screen .af-person[data-person=buyer]{background-position:33.333333% 0}
#flow-screen .af-person[data-person=broker]{background-position:66.666667% 0}
#flow-screen .af-person[data-person=institution]{background-position:100% 0}
#flow-screen .af-room-caption{position:absolute;bottom:7px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--af-sub)}
#flow-screen button.af-pause{min-height:34px;border:1px solid var(--af-edge);border-radius:7px;background:var(--af-paper);color:var(--af-sub);padding:5px 8px;font-size:11px;box-shadow:none;cursor:pointer}
#flow-screen .af-world{height:340px;background:linear-gradient(145deg,transparent 59%,#d9eff3 59%,#d9eff3 72%,transparent 72%),var(--af-ground);position:relative;border-radius:17px;overflow:hidden;isolation:isolate}
#flow-screen .af-world::before{content:'🌳';position:absolute;left:3%;top:45%;font-size:27px;pointer-events:none}
#flow-screen .af-world::after{content:'🌾';position:absolute;left:46%;top:80%;font-size:26px;pointer-events:none}
#flow-screen .af-roads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#flow-screen .af-road,#flow-screen .af-route{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#flow-screen .af-road{stroke:#f4e3ad;stroke-width:10}#flow-screen .af-route{stroke:var(--af-green);stroke-width:3}
#flow-screen .af-map-stamp{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);font-size:10px;letter-spacing:1px;color:var(--af-sub);white-space:nowrap;pointer-events:none}
#flow-screen button.af-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;width:90px;min-height:64px;padding:5px 2px;background:transparent;border:0;border-radius:7px;box-shadow:none;color:var(--af-ink);font:700 12px/1.35 -apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;z-index:2;cursor:pointer}
#flow-screen .af-building{position:relative;display:flex;justify-content:center;align-items:center;width:45px;height:44px;border:1px solid var(--af-edge);border-bottom:5px solid var(--af-edge);border-radius:4px 4px 7px 7px;background:#fff;box-shadow:5px 4px 0 var(--af-shadow);color:var(--af-green);font-size:25px;line-height:1}
#flow-screen .af-building::before{content:'';position:absolute;top:-9px;left:-4px;width:51px;height:12px;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);background:var(--af-green)}
#flow-screen .af-node-label{background:var(--af-paper);border-radius:5px;padding:1px 4px;white-space:normal;word-break:keep-all;font-size:12px;text-align:center}
#flow-screen button.af-node[aria-pressed=true] .af-building{background:var(--af-tint);border-color:var(--af-green);box-shadow:0 0 0 3px #206c4b25}
#flow-screen button.af-node:disabled{opacity:.55;cursor:default}
#flow-screen .af-node.af-next .af-node-label::before{content:'● ';color:#237b46}
#flow-screen .af-avatar{position:absolute;transform:translate(-50%,-110%);width:28px;height:52px;z-index:4;pointer-events:none}
#flow-screen .af-avatar::after{content:'';position:absolute;left:1px;bottom:0;width:26px;height:6px;border-radius:50%;background:var(--af-shadow);z-index:-1}
#flow-screen .af-walking>.af-person{animation:af-step .4s ease-in-out infinite}
#flow-screen .af-bottom{padding:12px 0 4px}
#flow-screen .af-current{font-weight:750;font-size:14px;overflow-wrap:anywhere}
#flow-screen .af-settings{font-size:12px;color:var(--af-sub);margin:5px 0 10px;overflow-wrap:anywhere;min-height:18px}
#flow-screen button.af-enter{width:100%;min-height:45px;padding:10px;border:1px solid #145236;border-bottom-width:3px;border-radius:9px;background:var(--af-green);color:white;font-size:15px;font-weight:750;cursor:pointer}
#flow-screen button.af-enter:disabled{background:#e2e9df;color:#61735f;border-color:#c2cfba;cursor:default}
#flow-screen .af-village button:focus-visible{outline:3px solid #cd9525;outline-offset:2px}
#flow-screen.af-enabled>#flow-status{font-size:12px;margin-top:8px;color:var(--af-sub)}
@keyframes af-step{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-1px) rotate(1deg)}}
@media(max-width:350px){#flow-screen button.af-node{width:80px;font-size:11px}#flow-screen .af-node-label{font-size:11px}#flow-screen .af-room-title>span{display:none}#flow-screen .af-world{height:335px}}
@media(prefers-reduced-motion:reduce){#flow-screen .af-walking>.af-person{animation:none}}
@media(pointer:coarse){#flow-screen .af-room{height:232px}#flow-screen button.af-pause{min-height:44px}}
/* 모든 유형에 동일한 8프레임 보행과 좌우 방향을 적용하고 정지하면 기존 이미지로 복귀한다. */
#flow-screen .af-person{transform:scaleX(var(--af-facing,1))}
#flow-screen .af-village.af-walk-ready-producer .af-walking>.af-person[data-person=producer]{background-image:var(--af-producer-walk);background-size:400% 200%;animation:af-a5-walk var(--af-a5-cycle,.8889s) steps(1,end) infinite;transform:scaleX(var(--af-facing,1))}
@media(prefers-reduced-motion:reduce){#flow-screen .af-village.af-walk-ready-producer .af-walking>.af-person[data-person=producer]{animation:none;background-image:var(--af-atlas);background-size:400% 100%;background-position:0% 0%}}
#flow-screen .af-village.af-walk-ready-buyer .af-walking>.af-person[data-person=buyer]{background-image:var(--af-buyer-walk);background-size:400% 200%;animation:af-a5-walk var(--af-a5-cycle,.8889s) steps(1,end) infinite;transform:scaleX(var(--af-facing,1))}
@media(prefers-reduced-motion:reduce){#flow-screen .af-village.af-walk-ready-buyer .af-walking>.af-person[data-person=buyer]{animation:none;background-image:var(--af-atlas);background-size:400% 100%;background-position:33.333333% 0%}}
#flow-screen .af-village.af-walk-ready-broker .af-walking>.af-person[data-person=broker]{background-image:var(--af-broker-walk);background-size:400% 200%;animation:af-a5-walk var(--af-a5-cycle,.8889s) steps(1,end) infinite;transform:scaleX(var(--af-facing,1))}
@media(prefers-reduced-motion:reduce){#flow-screen .af-village.af-walk-ready-broker .af-walking>.af-person[data-person=broker]{animation:none;background-image:var(--af-atlas);background-size:400% 100%;background-position:66.666667% 0%}}
#flow-screen .af-village.af-walk-ready-institution .af-walking>.af-person[data-person=institution]{background-image:var(--af-institution-walk);background-size:400% 200%;animation:af-a5-walk var(--af-a5-cycle,.8889s) steps(1,end) infinite;transform:scaleX(var(--af-facing,1))}
@media(prefers-reduced-motion:reduce){#flow-screen .af-village.af-walk-ready-institution .af-walking>.af-person[data-person=institution]{animation:none;background-image:var(--af-atlas);background-size:400% 100%;background-position:100% 0%}}
@keyframes af-a5-walk{0%{background-position:0% 0%}12.5%{background-position:33.333333% 0%}25%{background-position:66.666667% 0%}37.5%{background-position:100% 0%}50%{background-position:0% 100%}62.5%{background-position:33.333333% 100%}75%{background-position:66.666667% 100%}87.5%{background-position:100% 100%}100%{background-position:0% 0%}}

/* 기본 모습의 신장과 발 위치를 유지한다. 걷기 이미지의 실제 셀 비율을 사용하여 몸이 눌리는 현상을 방지한다. */
#flow-screen .af-village.af-walk-ready-producer .af-walking>.af-person[data-person=producer]{width:24.7380px;height:49.4760px;margin-top:2.2710px;margin-bottom:0.2530px}
#flow-screen .af-village.af-walk-ready-producer .af-avatar.af-walking>.af-person[data-person=producer]{margin-left:1.6310px}
@media(prefers-reduced-motion:reduce){#flow-screen .af-village.af-walk-ready-producer .af-walking>.af-person[data-person=producer]{width:28px;height:52px;margin:0}}
#flow-screen .af-village.af-walk-ready-buyer .af-walking>.af-person[data-person=buyer]{width:43.7500px;height:43.7500px;margin-top:5.1263px;margin-bottom:3.1237px}
#flow-screen .af-village.af-walk-ready-buyer .af-avatar.af-walking>.af-person[data-person=buyer]{margin-left:-7.8750px}
@media(prefers-reduced-motion:reduce){#flow-screen .af-village.af-walk-ready-buyer .af-walking>.af-person[data-person=buyer]{width:28px;height:52px;margin:0}}
#flow-screen .af-village.af-walk-ready-broker .af-walking>.af-person[data-person=broker]{width:43.3948px;height:43.3948px;margin-top:5.2948px;margin-bottom:3.3104px}
#flow-screen .af-village.af-walk-ready-broker .af-avatar.af-walking>.af-person[data-person=broker]{margin-left:-7.6974px}
@media(prefers-reduced-motion:reduce){#flow-screen .af-village.af-walk-ready-broker .af-walking>.af-person[data-person=broker]{width:28px;height:52px;margin:0}}
#flow-screen .af-village.af-walk-ready-institution .af-walking>.af-person[data-person=institution]{width:42.5851px;height:42.5851px;margin-top:5.7705px;margin-bottom:3.6444px}
#flow-screen .af-village.af-walk-ready-institution .af-avatar.af-walking>.af-person[data-person=institution]{margin-left:-7.2926px}
@media(prefers-reduced-motion:reduce){#flow-screen .af-village.af-walk-ready-institution .af-walking>.af-person[data-person=institution]{width:28px;height:52px;margin:0}}

/* 선택된 상담센터 초안: 실내 바닥, 넓은 복도, 안내 창구를 표시한다. 아바타/메뉴 선택자는 유지한다. */
#flow-screen .af-world{background:repeating-linear-gradient(0deg,transparent,transparent 30px,var(--af-shadow) 31px),repeating-linear-gradient(90deg,#fffdf3,#fffdf3 30px,var(--af-shadow) 31px);border:1px solid var(--af-edge)}
#flow-screen .af-world::before,#flow-screen .af-world::after{content:none}
#flow-screen .af-road{stroke:#f4e3ad;stroke-width:32}
#flow-screen .af-building{width:66px;height:47px;border-radius:3px;background:#fff;border:1px solid var(--af-edge);border-bottom:3px solid var(--af-edge);box-shadow:3px 3px 0 var(--af-shadow)}
#flow-screen .af-building::before{content:none}
#flow-screen .af-map-stamp{top:50%;background:#fffdf3;padding:3px 7px;letter-spacing:1px}

/* 대기실 출입 통로와 중앙 허브: 바닥 선 위로만 선택 아바타가 이동한다. */
#flow-screen .af-village{position:relative;isolation:isolate}
#flow-screen .af-room,#flow-screen .af-world{z-index:1}
#flow-screen .af-room-roads{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#flow-screen .af-room-roads path{fill:none;stroke:#f4e3ad;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
#flow-screen .af-transfer-roads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
#flow-screen .af-connector{fill:none;stroke:#f4e3ad;stroke-width:32}
#flow-screen .af-travel-route{fill:none;stroke:transparent;stroke-width:3}
#flow-screen .af-avatar{z-index:5;transform:translate(-50%,-100%)}
#flow-screen .af-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:62px;border:2px solid #c4a654;border-radius:12px;background:#fff5cf;box-shadow:0 2px 5px #77652a18;text-align:center;pointer-events:none}
#flow-screen .af-hub span{font-size:10px;color:#735b20;position:absolute;bottom:4px;left:0;right:0}
#flow-screen .af-road{stroke-width:32}
#flow-screen .af-map-title{position:relative;z-index:2}
#flow-screen .af-map-title h2,#flow-screen .af-map-title>span{background:var(--af-paper)}
#flow-screen .af-guide{position:relative;z-index:6;margin:8px 0;padding:12px;border:2px solid #c4a654;border-radius:14px;background:#fff5cf;color:#3e401c;font-size:14px;line-height:1.5;box-shadow:0 3px 9px #77652a15}
#flow-screen .af-guide::before{content:'';position:absolute;top:-8px;left:30px;width:12px;height:12px;background:#fff5cf;border-left:2px solid #c4a654;border-top:2px solid #c4a654;transform:rotate(45deg)}
#flow-screen .af-guide[hidden]{display:none}
#flow-screen .af-guide>span{display:block;padding-right:20px}
#flow-screen .af-guide button{font-size:12px;border:1px solid #c4a654;border-radius:6px;background:#fffdf3;padding:6px 9px;margin-top:6px;cursor:pointer}
#flow-screen .af-guide .af-guide-close{position:absolute;top:0;right:5px;border:0;background:transparent;font-size:20px;margin:0}

/* 각 창구의 중앙과 허브만 개별 연결한다. 색상은 설정/예측/경매/비교/기록/요청의 의미를 구분한다. */
#flow-screen .af-world{height:400px}
#flow-screen .af-road{stroke:#e7d9b9;stroke-width:24}
#flow-screen button.af-node{width:96px;height:90px;padding:8px 3px;gap:3px;border:1px solid var(--station-edge);border-bottom-width:4px;border-radius:13px;background:var(--station-bg);color:var(--station-ink);box-shadow:0 3px 5px #243e3012}
#flow-screen .af-building{width:42px;height:36px;background:transparent!important;border:0;box-shadow:none!important;color:inherit}
#flow-screen .af-building svg{width:32px;height:32px}
#flow-screen .af-node-label{background:transparent;color:inherit;font-size:12px;line-height:1.25}
#flow-screen [data-af-menu="0"]{--station-bg:#e0f1e5;--station-edge:#5b9273;--station-ink:#25513a}
#flow-screen [data-af-menu="1"]{--station-bg:#dfeefe;--station-edge:#6193bd;--station-ink:#254f78}
#flow-screen [data-af-menu="2"]{--station-bg:#fff0d7;--station-edge:#c89c47;--station-ink:#805b1d}
#flow-screen [data-af-menu="3"]{--station-bg:#e5f3ef;--station-edge:#62a894;--station-ink:#285f50}
#flow-screen [data-af-menu="4"]{--station-bg:#eee6f7;--station-edge:#a58abd;--station-ink:#61437c}
#flow-screen [data-af-menu="5"]{--station-bg:#fbe6e3;--station-edge:#c08a81;--station-ink:#7e463f}
#flow-screen button.af-node[aria-pressed=true]{outline:3px solid var(--station-edge);outline-offset:2px}
#flow-screen .af-hub{width:66px;height:70px;border-color:#8790bb;background:#eef0fb;color:#47517f}
#flow-screen .af-hub::before{content:'✥';position:absolute;top:5px;left:0;right:0;text-align:center;font-size:26px;color:#6977a8}
#flow-screen .af-hub span{color:#47517f;font-weight:700}
@media(max-width:350px){#flow-screen .af-world{height:400px}#flow-screen button.af-node{width:92px}}

/* 기관은 상단 고정, 세 이용자의 말풍선은 대기실 보행 중에만 표시한다. */
#flow-screen .af-room{height:320px}
#flow-screen .af-role .af-room-bubble{display:none;position:absolute;top:-24px;left:50%;transform:translateX(-50%);padding:4px 9px;border:1px solid #c4a654;border-radius:10px;background:#fff5cf;color:#4b481c;font-size:12px;font-weight:700;line-height:1.4;box-shadow:0 2px 4px #77652a15;white-space:nowrap;z-index:2}
#flow-screen .af-role .af-room-bubble::after{content:'';position:absolute;bottom:-5px;left:50%;width:7px;height:7px;background:#fff5cf;border-right:1px solid #c4a654;border-bottom:1px solid #c4a654;transform:translateX(-50%) rotate(45deg)}
#flow-screen .af-role.af-walking .af-room-bubble,#flow-screen .af-role[data-af-role=institution] .af-room-bubble{display:block}
#flow-screen .af-role[data-af-role=institution]{opacity:1;cursor:default}
#flow-screen .af-role[data-af-role=institution] .af-room-bubble{top:0;left:100%;transform:none;background:#eef0fb;border-color:#8790bb;color:#47517f}
#flow-screen .af-role[data-af-role=institution] .af-room-bubble::after{background:#eef0fb;border-color:#8790bb}
#flow-screen button.af-room-voice{min-height:34px;border:1px solid var(--af-edge);border-radius:7px;background:var(--af-paper);color:var(--af-sub);padding:5px 8px;font-size:11px;box-shadow:none;cursor:pointer}
@media(pointer:coarse){#flow-screen .af-room{height:320px}#flow-screen button.af-room-voice{min-height:44px}}
#flow-screen button.af-role[data-af-role=institution]:disabled{opacity:1}

/* 우측 고정 기관의 말풍선은 왼쪽으로 펼쳐 모바일 영역 밖으로 잘리지 않게 한다. */
#flow-screen .af-role[data-af-role=institution] .af-room-bubble{left:auto;right:100%}