/* 로그인·가입·인증 화면 새 카드 틀 (2026-11-12, 시안: 05_화면시안/9차_로그인화면/login_a.png).
   짝: src/templates/core.js authLayout() · authHead(), src/templates/identity.js (authPage).
   원본은 brand/overrides/static/css/farm-auth.css — 빌드(tools/brand/apply.mjs)가 public/ 으로 덮어쓴다(둘을 같게 둘 것).
   - 인라인 style·스크립트 없이(CSP app 프로필) 이 파일로만 꾸민다. 그림 기호는 data: SVG(img-src 'self' data:).
   - 다크 모드: 기기 설정(prefers-color-scheme) + html[data-theme] (/static/js/farm-theme.js 가 게임 화면의 farm_theme 값을 붙임).
   - 주아체(KS X 1001 2,350자 + 영문)는 제목·단추에만. 없는 글자(「」· 등)는 다음 글꼴로 넘어간다. 본문은 고딕 계열.
   - 카카오 단추: 카카오 디자인 가이드(바탕 #FEE500, 검은 말풍선 심볼, 글자 검정 85%, 모서리 12px)는 밝게·어둡게 모두 그대로. */
@font-face { font-family: "FaJua"; src: url(/static/qol/fonts/jua-ksx.woff2) format("woff2"); font-display: swap; }

/* ---------- 색·글꼴 토큰 (밝게) ---------- */
:root {
  --fa-font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Nanum Gothic", "돋움", Dotum, sans-serif;
  --fa-jua: "FaJua", var(--fa-font);
  --fa-ink: #27322b; --fa-ink2: #5d6873; --fa-ink3: #87919a;
  --fa-green: #4fa80b; --fa-green-hi: #5bb716; --fa-green-d: #3b8405; --fa-title: #22650b; --fa-link: #2f8410;
  --fa-card: #ffffff; --fa-card-ring: rgba(255, 255, 255, .55); --fa-card-shadow: 0 18px 44px rgba(22, 104, 160, .22);
  --fa-line: #e1e5e9; --fa-field: #ffffff; --fa-field-line: #dde2e7; --fa-ph: #9aa1a8;
  --fa-top: #ffffff; --fa-top-ink: #2c7a19; --fa-top-line: #e4e8ec; --fa-top-shadow: 0 2px 12px rgba(20, 90, 140, .10);
  --fa-sky-bg: #d9f4fd;
  --fa-sky: linear-gradient(180deg, #3ac2fb 0, #78d4fc 30%, #b2e8fd 62%, #dcf5fd 100%);
  --fa-cloud-op: 1;
  --fa-note-bg: #fff8dc; --fa-note-line: #f0da86; --fa-note-ink: #57470f;
  --fa-ok-bg: #edf9e0; --fa-ok-line: #a7da74; --fa-ok-ink: #2b5807;
  --fa-err-bg: #fff1ec; --fa-err-line: #f1ac96; --fa-err-ink: #b0371a;
  --fa-box: #f5faef; --fa-box-line: #d8eac6; --fa-th: #ebf6df;
  --fa-foot: #4c6274; --fa-foot-link: #2c7d14;
  --fa-hero-fill: #a3d81c; --fa-hero-dim: transparent;
  color-scheme: light;
}
/* 어둡게: 기기 설정이 어둡고 게임 화면에서 '밝게'를 고르지 않았을 때, 또는 '어둡게'를 골랐을 때 (두 덩어리 값은 같게 둘 것) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fa-ink: #eef3fb; --fa-ink2: #b4c0d2; --fa-ink3: #8f9cb2;
    --fa-title: #b6ea72; --fa-link: #a4e066; --fa-green-d: #2f6d03;
    --fa-card: #1c2742; --fa-card-ring: rgba(255, 255, 255, .06); --fa-card-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    --fa-line: rgba(255, 255, 255, .13); --fa-field: #243151; --fa-field-line: #3a4a72; --fa-ph: #8d9ab0;
    --fa-top: #151e35; --fa-top-ink: #b6ea72; --fa-top-line: rgba(255, 255, 255, .1); --fa-top-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    --fa-sky-bg: #121a2f;
    --fa-sky: radial-gradient(1.5px 1.5px at 12% 14%, rgba(255, 255, 255, .7), transparent 60%),
      radial-gradient(1.2px 1.2px at 31% 8%, rgba(255, 255, 255, .55), transparent 60%),
      radial-gradient(1.6px 1.6px at 67% 12%, rgba(255, 255, 255, .7), transparent 60%),
      radial-gradient(1.3px 1.3px at 88% 20%, rgba(255, 255, 255, .6), transparent 60%),
      radial-gradient(1.2px 1.2px at 6% 58%, rgba(255, 255, 255, .5), transparent 60%),
      radial-gradient(1.4px 1.4px at 95% 64%, rgba(255, 255, 255, .55), transparent 60%),
      radial-gradient(900px 520px at 72% -8%, #2a3a66 0, transparent 70%),
      linear-gradient(180deg, #0e1424 0, #141d35 55%, #1a2644 100%);
    --fa-cloud-op: .07;
    --fa-note-bg: rgba(255, 206, 84, .12); --fa-note-line: rgba(255, 206, 84, .34); --fa-note-ink: #ffe2a0;
    --fa-ok-bg: rgba(126, 210, 72, .13); --fa-ok-line: rgba(126, 210, 72, .4); --fa-ok-ink: #c6f19c;
    --fa-err-bg: rgba(255, 112, 82, .14); --fa-err-line: rgba(255, 112, 82, .45); --fa-err-ink: #ffb9a6;
    --fa-box: #212d4c; --fa-box-line: #33426a; --fa-th: #283760;
    --fa-foot: #9fb0c6; --fa-foot-link: #a4e066;
    --fa-hero-fill: #557f17; --fa-hero-dim: rgba(10, 16, 34, .26);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fa-ink: #eef3fb; --fa-ink2: #b4c0d2; --fa-ink3: #8f9cb2;
  --fa-title: #b6ea72; --fa-link: #a4e066; --fa-green-d: #2f6d03;
  --fa-card: #1c2742; --fa-card-ring: rgba(255, 255, 255, .06); --fa-card-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  --fa-line: rgba(255, 255, 255, .13); --fa-field: #243151; --fa-field-line: #3a4a72; --fa-ph: #8d9ab0;
  --fa-top: #151e35; --fa-top-ink: #b6ea72; --fa-top-line: rgba(255, 255, 255, .1); --fa-top-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --fa-sky-bg: #121a2f;
  --fa-sky: radial-gradient(1.5px 1.5px at 12% 14%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.2px 1.2px at 31% 8%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.6px 1.6px at 67% 12%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 20%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 58%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.4px 1.4px at 95% 64%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(900px 520px at 72% -8%, #2a3a66 0, transparent 70%),
    linear-gradient(180deg, #0e1424 0, #141d35 55%, #1a2644 100%);
  --fa-cloud-op: .07;
  --fa-note-bg: rgba(255, 206, 84, .12); --fa-note-line: rgba(255, 206, 84, .34); --fa-note-ink: #ffe2a0;
  --fa-ok-bg: rgba(126, 210, 72, .13); --fa-ok-line: rgba(126, 210, 72, .4); --fa-ok-ink: #c6f19c;
  --fa-err-bg: rgba(255, 112, 82, .14); --fa-err-line: rgba(255, 112, 82, .45); --fa-err-ink: #ffb9a6;
  --fa-box: #212d4c; --fa-box-line: #33426a; --fa-th: #283760;
  --fa-foot: #9fb0c6; --fa-foot-link: #a4e066;
  --fa-hero-fill: #557f17; --fa-hero-dim: rgba(10, 16, 34, .26);
  color-scheme: dark;
}

/* ---------- 바탕 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html.fa, .fa-body { margin: 0; padding: 0; }
.fa-body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--fa-sky-bg); color: var(--fa-ink);
  font: 15px/1.6 var(--fa-font); -webkit-text-size-adjust: 100%; overflow-x: hidden;
}
.fa-body a { color: var(--fa-link); }
.fa-body img { border: 0; }

/* 하늘(화면에 고정) + 구름 */
.fa-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--fa-sky); }
.fa-cloud {
  position: absolute; display: block; aspect-ratio: 200 / 110; opacity: var(--fa-cloud-op);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='110'%3E%3Cstop offset='.45' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23dcf0fa'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Ccircle cx='58' cy='66' r='30'/%3E%3Ccircle cx='98' cy='46' r='38'/%3E%3Ccircle cx='143' cy='60' r='30'/%3E%3Ccircle cx='170' cy='80' r='22'/%3E%3Ccircle cx='32' cy='82' r='22'/%3E%3Crect x='30' y='70' width='142' height='34' rx='17'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.fa-c1 { width: 210px; left: -56px; top: 160px; }
.fa-c2 { width: 150px; left: -34px; top: 318px; }
.fa-c3 { width: 230px; right: -64px; top: 150px; }
.fa-c4 { width: 170px; right: -40px; top: 64%; }

/* ---------- 상단바 ---------- */
.fa-top { position: relative; z-index: 2; background: var(--fa-top); box-shadow: var(--fa-top-shadow); }
.fa-top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1072px, 88vw + 32px); height: 60px; margin: 0 auto; padding: 0; }
.fa-body .fa-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--fa-top-ink); font: 400 23px/1 var(--fa-jua); text-decoration: none; white-space: nowrap; }
.fa-brand img { flex: none; width: 36px; height: 36px; object-fit: contain; }
.fa-top-r { display: flex; align-items: center; gap: 14px; color: var(--fa-ink2); font-size: 14px; white-space: nowrap; }
.fa-me b { color: var(--fa-ink); }
.fa-body .fa-map { display: flex; align-items: center; height: 32px; padding-left: 14px; border-left: 1px solid var(--fa-top-line); color: var(--fa-top-ink); font: 400 18px/1 var(--fa-jua); text-decoration: none; }
.fa-map-ic { display: flex; align-items: center; height: 32px; margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--fa-top-line); }
.fa-map-ic svg { display: block; }
.fa-brand:hover span, .fa-map:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.fa-brand:focus-visible, .fa-map:focus-visible { outline: 3px solid var(--fa-green); outline-offset: 3px; border-radius: 8px; }

/* ---------- 무대: 카드 + 꼬리말을 남은 높이 가운데에 ---------- */
.fa-stage { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px 24px 0; }
.fa-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; max-width: min(1040px, 88vw); min-height: calc(min(1040px, 88vw) * .56);   /* 시안 비율(894×507) */
  border-radius: 26px; background: var(--fa-card);
  box-shadow: 0 0 0 5px var(--fa-card-ring), var(--fa-card-shadow);
  overflow: hidden; overflow: clip;   /* clip: 안쪽 삽화가 아래로 따라 내려오게(sticky). 못 쓰는 브라우저는 hidden */
}

/* 왼쪽 삽화: 그림 위쪽 3분의 1 빈 하늘에 제목을 올린다. 그림은 칸 너비에 맞춰 아래에 붙이고, 칸이 그림보다 길면 위는 같은 하늘색.
   오른쪽 칸이 길면(가입·동의 화면) 삽화는 화면 높이까지만 그리고 스크롤을 따라 내려온다(sticky). 그 아래 남는 칸은 풀밭 색 */
.fa-hero { position: relative; min-width: 0; background: var(--fa-hero-fill) linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 60, 0, .14)); }
.fa-hero-in {
  position: sticky; top: 0; display: flex; flex-direction: column; align-items: center;
  height: 100%; min-height: 480px; max-height: calc(100vh - 94px); padding: clamp(24px, 2.4vw, 34px) 20px 0;
  background: linear-gradient(var(--fa-hero-dim), var(--fa-hero-dim)), url(/static/img/login_hero.jpg) center bottom / 100% auto no-repeat, #15b6fc;
}
.fa-hero-t { position: relative; z-index: 1; margin: 0; font: 400 clamp(44px, 5.2vw, 64px)/1.12 var(--fa-jua); letter-spacing: 1px; text-align: center; white-space: nowrap; }
.fa-hero-t > span { position: relative; z-index: 2; color: #e3f52c; background: linear-gradient(180deg, #fbff86 0, #e6f62e 48%, #bfe31b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* 진한 초록 테두리(가운데) + 흰 바깥 테두리·그림자(맨 아래): 같은 글자를 겹쳐 그린다 */
.fa-hero-t::before, .fa-hero-t::after { content: attr(data-t); position: absolute; left: 0; right: 0; top: 0; }
.fa-hero-t::before { z-index: 1; color: #22610a; -webkit-text-stroke: 11px #22610a; }
.fa-hero-t::after { z-index: 0; color: #fff; -webkit-text-stroke: 20px #fff; filter: drop-shadow(0 6px 6px rgba(12, 74, 128, .32)); }
.fa-spark {
  position: absolute; z-index: 3; left: -44px; top: -16px; width: 44px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-linecap='round'%3E%3Cg stroke='%23fff' stroke-width='9'%3E%3Cpath d='M31 15 27 5'/%3E%3Cpath d='M24 21 13 12'/%3E%3Cpath d='M20 29 8 27'/%3E%3C/g%3E%3Cg stroke='%23ffa516' stroke-width='5'%3E%3Cpath d='M31 15 27 5'/%3E%3Cpath d='M24 21 13 12'/%3E%3Cpath d='M20 29 8 27'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.fa-hero-s {
  position: relative; z-index: 1; margin: 8px 0 0; padding-bottom: 12px; color: #fff; font: 400 clamp(18px, 2vw, 23px)/1.3 var(--fa-jua); text-align: center;
  text-shadow: 0 2px 0 rgba(16, 96, 150, .5), 0 0 10px rgba(16, 96, 160, .35);
}
.fa-hero-s::after { content: ""; position: absolute; left: 20%; right: 34%; bottom: 0; height: 6px; border-radius: 6px; background: linear-gradient(90deg, rgba(222, 248, 70, .35), #dcf63c 26%, #cdef2f); box-shadow: 0 0 8px rgba(226, 252, 90, .75); }

/* ---------- 오른쪽 칸 ---------- */
.fa-panel { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 38px 54px 36px; color: var(--fa-ink); word-break: keep-all; overflow-wrap: anywhere; }
.fa-panel > :last-child { margin-bottom: 0; }
.fa-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.fa-h { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 20px; color: var(--fa-title); font: 400 44px/1.15 var(--fa-jua); letter-spacing: -.5px; text-align: center; }
.fa-h > span { min-width: 0; }
.fa-h::before, .fa-h::after {
  content: ""; flex: none; width: 28px; height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32' fill='none' stroke='%23ffa516' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M17 10 9 4.5'/%3E%3Cpath d='M16 16H4'/%3E%3Cpath d='M17 22 9 27.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fa-h::after { transform: scaleX(-1); }
.fa-h.fa-h-long { gap: 12px; font-size: 31px; }
.fa-h.fa-h-long::before, .fa-h.fa-h-long::after { width: 20px; height: 26px; }
.fa-sub { margin: -12px 0 22px; color: var(--fa-ink2); font-size: 14.5px; line-height: 1.65; text-align: center; }
.fa-sub b { color: var(--fa-ink); }

/* 카카오 단추(farm-id.css 위에 덮어씀: 심볼 왼쪽, 글자 가운데) */
.fa-panel .farm-kakao {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 8px 58px;
  border: 0; border-radius: 12px; background: #FEE500; color: rgba(0, 0, 0, 0.85);
  font: 400 21px/1.2 var(--fa-jua); text-decoration: none; cursor: pointer; transition: filter .15s;
}
.fa-panel .farm-kakao svg { position: absolute; left: 24px; top: 50%; width: 28px; height: 28px; margin-top: -14px; }
.fa-panel .farm-kakao:hover { background: #FEE500; color: rgba(0, 0, 0, 0.85); filter: brightness(.97); outline: 0; }
.fa-panel .farm-kakao:focus { outline: 0; }
.fa-panel .farm-kakao:focus-visible { outline: 3px solid #3c1e1e; outline-offset: 2px; }

/* 「또는 아이디로」 구분선 */
.fa-or { display: flex; align-items: center; gap: 16px; margin: 18px 0 16px; color: var(--fa-ink2); font-size: 15px; font-weight: 700; }
.fa-or::before, .fa-or::after { content: ""; flex: 1; height: 1px; background: var(--fa-line); }

/* 폼 */
.fa-panel .farm-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.fa-panel .farm-form > label:not(.farm-check) { display: flex; flex-direction: column; gap: 7px; color: var(--fa-ink); font-size: 14px; font-weight: 700; }
.fa-panel .farm-form > label.fa-field { gap: 0; }
.fa-panel input[type=text], .fa-panel input[type=password], .fa-panel input[inputmode=numeric] {
  display: block; width: 100%; height: 54px; margin: 0; padding: 0 18px;
  border: 1.5px solid var(--fa-field-line); border-radius: 12px; background-color: var(--fa-field); color: var(--fa-ink);
  font-family: var(--fa-font); font-size: 16px; font-weight: 400; letter-spacing: 0; text-align: left;
  outline: 0; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.fa-panel input::placeholder { color: var(--fa-ph); opacity: 1; }
.fa-panel input[type=text]:focus, .fa-panel input[type=password]:focus { border-color: var(--fa-green); box-shadow: 0 0 0 4px rgba(79, 168, 11, .18); outline: 0; }
.fa-panel input.fa-in-id, .fa-panel input.fa-in-pw { padding-left: 54px; background-repeat: no-repeat; background-position: 18px 50%; background-size: 22px 22px; }
.fa-panel input.fa-in-id { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b929a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c.8-4 3.9-6.2 7.5-6.2s6.7 2.2 7.5 6.2z'/%3E%3C/svg%3E"); }
.fa-panel input.fa-in-pw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b929a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 15v2.4'/%3E%3C/svg%3E"); }
.fa-panel .farm-code input[name=code] { height: 60px; font-size: 26px; font-weight: 700; letter-spacing: 10px; text-align: center; }
.fa-panel .farm-hint { display: block; margin: -7px 0 0; color: var(--fa-ink3); font-size: 12.5px; font-weight: 400; line-height: 1.5; }
.fa-panel .fa-login { gap: 12px; }

/* 초록 단추 */
.fa-panel .farm-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; margin: 4px 0 0; padding: 10px 16px;
  border: 0; border-radius: 12px; background: var(--fa-green); color: #fff; box-shadow: 0 3px 0 var(--fa-green-d);
  font: 400 23px/1.2 var(--fa-jua); text-shadow: none; cursor: pointer; transition: background-color .15s, transform .1s, box-shadow .1s;
}
.fa-panel .farm-btn:hover { background: var(--fa-green-hi); }
.fa-panel .farm-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--fa-green-d); }
.fa-panel .farm-btn:focus-visible { outline: 3px solid var(--fa-title); outline-offset: 3px; }

/* 아래 링크 줄 */
.fa-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 0; margin: 20px 0 0; color: var(--fa-ink2); font-size: 15px; text-align: center; }
.fa-body .fa-links a { color: var(--fa-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.fa-body .fa-links a.fa-strong { color: var(--fa-link); }
.fa-bar { display: inline-block; width: 1px; height: 15px; margin: 0 22px; background: var(--fa-line); }
.fa-panel .farm-alt { margin: 20px 0 0; color: var(--fa-ink2); font-size: 14px; line-height: 1.8; text-align: center; }
.fa-panel .farm-alt a, .fa-panel .farm-linkbtn { color: var(--fa-link); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fa-panel .farm-inline { display: inline; margin: 0; }
.fa-panel .farm-linkbtn { padding: 0 2px; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }
.fa-panel .farm-alt + .fa-or { margin-top: 24px; }

/* 알림 상자 */
.fa-panel .farm-note, .fa-panel .farm-ok, .fa-panel .farm-err { margin: 0 0 16px; padding: 11px 15px; border: 1px solid; border-radius: 12px; font-size: 13.5px; line-height: 1.65; }
.fa-panel .farm-note { background: var(--fa-note-bg); border-color: var(--fa-note-line); color: var(--fa-note-ink); }
.fa-panel .farm-ok { background: var(--fa-ok-bg); border-color: var(--fa-ok-line); color: var(--fa-ok-ink); }
.fa-panel .farm-err { background: var(--fa-err-bg); border-color: var(--fa-err-line); color: var(--fa-err-ink); }
.fa-panel ul.farm-err { padding-left: 32px; }
.fa-panel .farm-found { color: var(--fa-title); font-size: 18px; }

/* 동의 칸 + 안내 표 */
.fa-panel .farm-consent { min-width: 0; margin: 4px 0 0; padding: 12px 16px 10px; border: 1px solid var(--fa-box-line); border-radius: 14px; background: var(--fa-box); }
.fa-panel .farm-consent legend { padding: 0 6px; color: var(--fa-ink); font-size: 14px; font-weight: 700; }
.fa-panel label.farm-check { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; margin: 7px 0; color: var(--fa-ink); font-size: 14px; font-weight: 400; line-height: 1.55; }
.fa-panel .farm-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--fa-green); }
.fa-panel .farm-check a { color: var(--fa-link); font-weight: 700; }
.fa-panel .farm-table { width: 100%; margin: 10px 0 6px; border: 1px solid var(--fa-box-line); border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; background: var(--fa-card); font-size: 12.5px; }
.fa-panel .farm-table th, .fa-panel .farm-table td { padding: 7px 10px; border-bottom: 1px solid var(--fa-box-line); text-align: left; vertical-align: top; line-height: 1.55; }
.fa-panel .farm-table tr:last-child > * { border-bottom: 0; }
.fa-panel .farm-table th { width: 6.4em; background: var(--fa-th); color: var(--fa-ink); font-weight: 700; white-space: nowrap; }
.fa-panel .farm-table td { color: var(--fa-ink2); }
.fa-panel .farm-consent .farm-hint { margin: 6px 0 2px; }

/* 목록 · 찾기 고르기 */
.fa-panel .farm-list { margin: 0 0 16px; padding-left: 22px; font-size: 14px; line-height: 1.75; }
.fa-panel .farm-list a { color: var(--fa-link); font-weight: 700; }
.fa-panel .farm-list.fa-choices { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.fa-panel .fa-choices .fa-choice {
  position: relative; display: block; padding: 15px 18px 15px 66px; border: 1.5px solid var(--fa-field-line); border-radius: 14px;
  background: var(--fa-field); color: var(--fa-ink2); font-size: 13.5px; font-weight: 400; line-height: 1.55; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.fa-choice::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  background: var(--fa-th) center / 20px 20px no-repeat;
}
.fa-ch-id::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fa80b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c.8-4 3.9-6.2 7.5-6.2s6.7 2.2 7.5 6.2z'/%3E%3C/svg%3E"); }
.fa-ch-pw::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fa80b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 15v2.4'/%3E%3C/svg%3E"); }
.fa-choice b { display: block; margin-bottom: 2px; color: var(--fa-title); font: 400 19px/1.3 var(--fa-jua); }
.fa-choice:hover { border-color: var(--fa-green); transform: translateY(-1px); }
.fa-choice:focus-visible { outline: 3px solid var(--fa-green); outline-offset: 2px; }

/* ---------- 꼬리말 ---------- */
.fa-foot { width: 100%; max-width: min(1040px, 88vw); padding: 22px 8px 30px; text-align: center; }
.fa-foot-t { margin: 0 auto 8px; max-width: 980px; color: var(--fa-foot); font-size: 13px; line-height: 1.65; word-break: keep-all; }
.fa-foot-t span { display: inline-block; }
.fa-legal { margin: 0; color: var(--fa-foot); font-size: 14px; }
.fa-legal span { margin: 0 9px; }
.fa-body .fa-legal a { color: var(--fa-foot-link); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 960px) {
  .fa-panel { padding: 34px 34px 32px; }
}
/* 모바일: 카드가 위아래로 쌓이고 삽화는 짧게 잘려 위에 */
@media (max-width: 760px) {
  .fa-top-in { width: auto; height: 54px; padding: 0 16px; }
  .fa-body .fa-brand { gap: 8px; font-size: 19px; }
  .fa-brand img { width: 30px; height: 30px; }
  .fa-me { display: none; }
  .fa-body .fa-map { height: 28px; padding-left: 10px; font-size: 16px; }
  .fa-map-ic { height: 28px; margin-right: 8px; padding-right: 8px; }
  .fa-map-ic svg { width: 24px; height: 24px; }
  .fa-stage { justify-content: flex-start; padding: 16px 16px 0; }
  .fa-card { grid-template-columns: minmax(0, 1fr); max-width: none; min-height: 0; border-radius: 22px; box-shadow: 0 0 0 4px var(--fa-card-ring), var(--fa-card-shadow); }
  .fa-hero-in { position: relative; height: 210px; min-height: 0; max-height: none; padding-top: 18px; background-size: cover; background-position: center 38%; }
  .fa-hero-t { font-size: 40px; }
  .fa-hero-t::before { -webkit-text-stroke-width: 8px; }
  .fa-hero-t::after { -webkit-text-stroke-width: 15px; }
  .fa-spark { left: -32px; top: -10px; width: 32px; height: 32px; }
  .fa-hero-s { margin-top: 8px; padding-bottom: 10px; font-size: 16px; }
  .fa-hero-s::after { height: 5px; }
  .fa-panel { padding: 26px 20px 28px; }
  .fa-h { margin-bottom: 20px; font-size: 36px; }
  .fa-h.fa-h-long { font-size: 25px; }
  .fa-sub { margin-top: -10px; font-size: 14px; }
  .fa-panel .farm-kakao { min-height: 54px; font-size: 19px; }
  .fa-panel .farm-btn { min-height: 54px; font-size: 21px; }
  .fa-panel input[type=text], .fa-panel input[type=password], .fa-panel input[inputmode=numeric] { height: 52px; }
  .fa-or { margin: 18px 0 16px; }
  .fa-bar { margin: 0 16px; }
  .fa-panel .farm-table th { width: 5.6em; white-space: normal; }
  .fa-foot { max-width: none; padding: 18px 4px 26px; }
  .fa-c1, .fa-c3 { width: 160px; }
  .fa-foot-t span { display: inline; }
  .fa-c2, .fa-c4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-body *, .fa-body *::before, .fa-body *::after { transition: none !important; }
}