/* 헤더 로그인 링크·계정 팝업(js/auth.js)과 로그인·회원가입·비밀번호 찾기 페이지. 색·글꼴은 style.css 변수를 따른다.
   팝업은 가로:세로 = 1:1.618, 최대 폭 380px, 모든 길이를 em 으로 써서 같은 비율로 줄고 늘어난다. 박스 모서리는 8px */
header .a-hl{position:absolute;top:50%;right:calc(max(12px,calc(var(--hero-gutter,24px) - 12px)) + 56px);transform:translateY(-50%);display:flex;align-items:center;gap:24px;color:var(--fg,#26352d);font-size:.94rem;font-weight:560;letter-spacing:-.015em;white-space:nowrap}
header:not([data-surface="solid"]) .a-hl{color:#fff}
header .logo,header .logo:hover{text-decoration:none}  /* 정책 페이지용 css 없이도 로고에 밑줄이 생기지 않게 */
header .a-hl>a{color:inherit;text-decoration:none;line-height:44px}
header .a-hl>a:hover{text-decoration:underline;text-underline-offset:5px}
header .a-hl>i{flex:none;width:1px;height:44px;background:currentColor;opacity:.5}
header .a-av{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -4px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
header .a-hl.on>a,header .a-hl.on>i{display:none}header .a-hl.on .a-av{display:flex}
@media screen and (min-width:761px){header .a-hl{right:calc(var(--hero-gutter,24px) + 64px);transform:translate(2px,-50%)}header[data-surface="pill"] .a-hl{right:80px}}
@media(max-width:760px){.home-page header[data-surface="pill"] .a-hl{right:60px}}
@media(max-width:760px){header .a-hl{transform:translate(1px,-50%)}}
@media(max-width:560px){header .a-hl{gap:18px;font-size:.88rem;transform:translate(5px,-50%)}header .w{justify-content:flex-start;padding-left:18px;padding-right:18px}.home-page header[data-surface="pill"] .w{padding-left:14px}}
@media(max-width:560px){.resource-page header[data-surface="solid"] :is(.a-hl,.hmenu){color:#fff}}
@media(max-width:380px){header .a-hl{gap:14px;transform:translate(9px,-50%)}}
@media print{header .a-hl{display:none}}
.a-dd{position:absolute;top:calc(100% + 14px);right:0;z-index:60;width:min(300px,calc(100vw - 24px));box-sizing:border-box;padding:8px;border:1px solid #e3e5de;border-radius:14px;background:#fff;color:#1f2a24;box-shadow:0 14px 40px rgba(20,28,23,.18);font-size:.95rem;font-weight:500;letter-spacing:0;line-height:1.3;text-align:left;white-space:normal}
.a-dd[hidden]{display:none}
.a-dd hr{height:1px;margin:6px 4px;border:0;background:#e9e8df}
.a-dd>a,.a-dd>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;min-height:44px;margin:0;padding:0 12px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.a-dd>a:hover,.a-dd>button:hover,.a-dd>a:focus-visible,.a-dd>button:focus-visible{background:#f3f4ee;outline:0}
.a-dd em{font-style:normal;font-size:.9em;color:#676d68}
.a-ddh{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:#f3f4ee}
.a-ddh svg{flex:none;color:#26352d}.a-ddh div{min-width:0}
.a-ddh b{display:block;overflow:hidden;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.a-ddh small{display:block;margin-top:2px;color:#676d68;font-size:.82rem;word-break:break-all}
.a-sn{margin:0;line-height:1.7}.a-sn+.a-go{margin-top:38px}
.a-dlg{--s:min(94vw,380px,calc(94vh / 1.618));width:var(--s);aspect-ratio:1/1.618;max-width:none;max-height:none;box-sizing:border-box;font-size:max(12px,calc(var(--s) / 25.5));border:0;padding:0;overflow:auto;border-radius:.5em;background:var(--card,#fffefa);color:var(--fg,#26352d);box-shadow:0 24px 60px rgba(0,0,0,.28);font-family:inherit}
.a-dlg[open]{display:flex;flex-direction:column}
.a-dlg::backdrop{background:rgba(20,28,23,.55)}
.a-hd{position:relative;flex:none;display:flex;justify-content:center;padding:2.9em 1.5em 0}
.a-hd h2{margin:0;font-size:1.4em;font-weight:700;letter-spacing:-.02em;text-align:center}
.a-x{position:absolute;top:.4em;right:.4em;width:2.75em;height:2.75em;border:0;background:none;color:inherit;font-size:1.9em;line-height:1;cursor:pointer}
.a-bd{flex:1 0 auto;display:flex;flex-direction:column;padding:2.6em 2.25em 2.4em}
.a-f{margin:0 0 .8em}
.a-f input{width:100%;box-sizing:border-box;height:3.4em;padding:0 1.1em;border:1px solid #dcdfd8;border-radius:.5em;background:var(--card,#fffefa);color:inherit;font:inherit;font-size:max(16px,1em)}
.a-f input::placeholder{color:#8c918d;opacity:1}
.a-f input:focus{outline:2px solid var(--g,#416b4c);outline-offset:-1px;border-color:transparent}
.a-n{margin:.6em 0 0;font-size:.8em;line-height:1.5;color:var(--mut,#676d68)}
.a-nn{margin:-.2em 0 .9em}
.a-row{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin:1.3em 0 0;font-size:.9em}
.a-k{display:flex;align-items:center;gap:.5em;cursor:pointer}
.a-k input{width:1.15em;height:1.15em;margin:0;accent-color:var(--g,#416b4c)}
.a-m{min-height:0;margin:.9em 0 0;font-size:.9em;line-height:1.45;color:var(--warn,#a33);font-weight:500}
.a-m:empty{margin:0}
.a-m.ok{color:var(--g,#416b4c)}
.a-go,.a-alt{box-shadow:none;display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;height:3.15em;margin:0;padding:0;border-radius:.5em;font:inherit;font-size:1.1em;font-weight:600;cursor:pointer}
form .a-go{margin-top:2em}
.a-go:disabled{opacity:.5;cursor:not-allowed}
.a-alt{text-decoration:none;margin-top:.7em;background:var(--card,#fffefa);color:var(--g,#416b4c);border:1px solid var(--g,#416b4c)}
.a-alt:hover:not(:disabled){background:var(--soft,#eef0e8)}
.a-ic{flex:none;display:block}
.a-ag{margin:.6em 0 0}
.a-all{padding:.2em 0 1em;margin-bottom:.4em;border-bottom:1px solid var(--line,#e9e8df)}
.a-all b{font-size:1.1em;font-weight:600}
.a-all small{display:block;margin-top:.3em;font-size:.82em;line-height:1.5;color:var(--mut,#676d68)}
.a-cr{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:.55em 0}
.a-c{display:flex;align-items:flex-start;gap:.75em;line-height:1.5;cursor:pointer}
.a-c em{font-style:normal;font-size:.9em;color:#9a9e9a}
.a-c input{-webkit-appearance:none;appearance:none;flex:none;width:1.5em;height:1.5em;margin:0;border:1px solid #cfd2cc;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23c4c7c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;cursor:pointer}
.a-c input:checked{background-color:var(--g,#416b4c);border-color:var(--g,#416b4c);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.a-c input:focus-visible{outline:2px solid var(--g,#416b4c);outline-offset:2px}
.a-v{flex:none;padding:.1em .4em;color:#9a9e9a;font-size:1.4em;line-height:1;text-decoration:none}
.a-hdt{margin:-.3em 0 .3em 2.25em;font-size:.85em;line-height:1.55;color:var(--mut,#676d68)}
.a-hdt summary{cursor:pointer;padding:.2em 0}
.a-hdt ul{margin:.4em 0;padding-left:1.2em}
.a-hs{padding:.8em .9em;border:1px solid var(--line,#e9e8df);border-radius:.5em;background:var(--soft,#eef0e8);font-size:.9em}
.a-hs details{margin:.5em 0 0;font-size:.9em;line-height:1.55;color:var(--mut,#676d68)}
.a-hs summary{cursor:pointer;padding:.25em 0}
.a-hs ul{margin:.4em 0;padding-left:1.2em}
.a-hs{margin-top:.4em}.a-hs p{margin:0 0 .4em}.a-hs .a-go{margin-top:.7em}
.a-em{margin:0 0 1em;font-size:1em;font-weight:600;word-break:break-all;text-align:center}
.a-l{display:flex;justify-content:center;margin:1em 0 0}
.a-l button,.a-del{padding:.4em 0;border:0;background:none;color:var(--mut,#676d68);font:inherit;font-size:.9em;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.a-ft{display:grid;gap:.5em;margin-top:.4em}
.a-ft .a-alt{margin-top:0}
.a-del{justify-self:center;margin-top:.5em}
.a-dc{margin-top:.4em;padding:.8em .9em;border:1px solid var(--warn,#a33);border-radius:.5em}
.a-dc p{margin:0 0 .6em;font-size:.9em;line-height:1.5}
.a-danger{background:var(--warn,#a33);color:#fff;border:0}.a-danger:hover:not(:disabled){filter:brightness(.92)}
html:has(.a-dlg[open]){overflow:hidden}
@media print{.a-dlg{display:none}}
/* 이메일·비밀번호 찾기 페이지 */
.a-page{max-width:520px;margin:0 auto;padding:calc(var(--header-height,96px) + 56px) 24px 96px}
.a-page h1{margin:0 0 38px;font-size:2rem;font-weight:500;text-align:center;letter-spacing:-.02em;color:var(--fg,#26352d)}
.a-tabs{margin:0 0 6px;border-bottom:1px solid #e3e3dc}
.a-tabs span{display:block;margin-bottom:-1px;padding:14px 0;text-align:center;font-size:1.1rem;font-weight:500;color:var(--g,#416b4c);border-bottom:3px solid var(--g,#416b4c)}
.a-page .a-lb,.a-page label:not(.a-c){display:block;margin:34px 0 10px;font-size:.95rem;font-weight:600;color:var(--fg,#26352d)}
.a-page input:not([type=checkbox]){width:100%;box-sizing:border-box;height:56px;padding:0 20px;border:1px solid #dcdfd8;border-radius:8px;background:var(--card,#fffefa);color:var(--fg,#26352d);font:inherit;font-size:1.05rem}
.a-page input:not([type=checkbox])::placeholder{color:#8c918d;opacity:1}
.a-page input:not([type=checkbox]):focus{outline:2px solid var(--g,#416b4c);outline-offset:-1px;border-color:transparent}
.a-page .a-m{margin:14px 0 0;font-size:.9rem}
.a-ok{display:block;width:100%;height:60px;margin:44px 0 0;padding:0;border:0;border-radius:8px;background:#ddd;color:#fff;font:inherit;font-size:1.1rem;font-weight:600;cursor:pointer}
.a-ok:disabled{cursor:not-allowed}
.a-ok:not(:disabled){background:var(--g,#416b4c)}
.a-res{margin:22px 0 0;padding:16px 18px;border:1px solid var(--line,#e2e2da);border-radius:8px;background:var(--soft,#eef0e8);font-size:.95rem;text-align:center}
.a-res[hidden]{display:none}
/* 회원가입 페이지 */
.a-sp{max-width:560px}
.a-req{margin:0;padding-bottom:12px;border-bottom:2px solid var(--fg,#26352d);text-align:right;font-size:.85rem;color:var(--mut,#676d68)}
.a-page .a-lb i,.a-req i,.a-agt i{margin-left:2px;font-style:normal;color:#d1453b}
.a-sp .a-lb{margin-top:26px}
.a-sp .a-n{margin:8px 0 0;font-size:.85rem;color:var(--mut,#676d68)}
.a-agt{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--fg,#26352d);font-size:1rem;font-weight:600}
.a-sp .a-ag{font-size:1rem}
.a-sp .a-ok{margin-top:36px}
.a-have{margin:20px 0 0;text-align:center;font-size:.95rem;color:var(--mut,#676d68)}
.a-have a{padding:4px;color:var(--g,#416b4c);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- 로그인 페이지: 왼쪽 폼 + 오른쪽 빈 패널, 헤더 없음. 색은 밝은 화면으로 고정(다크 모드 무시) ---------- */
body.a-lg{--vm:#e34234;--vmd:#cc3a2d;--gr:#416b4c;--grd:#304e38;--ink:#1f2a24;--gray:#66706a;--bd:#dde1db;--lgbg:#fbfaf6;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100dvh;background:var(--lgbg);color:var(--ink);color-scheme:light}
.a-lgl{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(24px,2.6vw,40px) clamp(24px,3vw,48px) clamp(32px,4vw,56px)}
.a-lgl .logo{align-self:flex-start;color:var(--ink);text-decoration:none}
.a-lgl .logo-symbol{width:38px;height:38px;color:#304e38}
.a-lgr{background:#304e38}
.a-lgm{width:100%;max-width:440px;margin:auto;padding-top:clamp(28px,5vh,64px)}
.a-lgm h1{margin:0;font-size:2.5rem;font-weight:700;line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.a-sub{margin:16px 0 0;font-size:.94rem;line-height:1.5;color:var(--gray)}
.a-sub a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.a-lgm form{margin-top:36px}
.a-lgm{font-size:15px}
.a-lgm .a-f{margin:0 0 16px}
.a-lgm .a-f input{height:48px;padding:0 16px;border:1px solid var(--bd);border-radius:10px;background:transparent;color:var(--ink);font-size:15px}
.a-lgm .a-f input::placeholder{color:#8b938d}
.a-lgm .a-f input:focus{outline:2px solid var(--gr);outline-offset:-1px;border-color:transparent}
.a-lgm .a-row{margin:20px 0 0;font-size:14px;color:var(--gray)}
.a-lgm .a-k input{width:16px;height:16px;border-radius:3px;accent-color:var(--gr)}
.a-fp{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.a-lgm .a-m{margin:14px 0 0;font-size:14px}
.a-lgm form .a-go{height:50px;margin-top:26px;border:0;border-radius:12px;background:var(--gr);color:#fff;font-size:16px;font-weight:600}
.a-lgm form .a-go:hover:not(:disabled){background:var(--grd);transform:none;box-shadow:none}
.a-or2{display:flex;align-items:center;gap:16px;margin:36px 0 28px;color:var(--gray);font-size:12px;letter-spacing:.06em}
.a-or2::before,.a-or2::after{content:"";flex:1;height:1px;background:var(--bd)}
.a-scs{display:grid;gap:14px}
.a-sc{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:50px;padding:0 52px;border:1px solid var(--bd);border-radius:999px;background:transparent;color:#56605a;font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.a-sc:hover:not(:disabled){background:#f3f4ef}
.a-sc:disabled{opacity:.5;cursor:not-allowed}
.a-sc>.a-ic,.a-sc>.a-ik{position:absolute;left:22px;top:50%;transform:translateY(-50%)}
.a-ik{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fee500}
.a-ik .a-ic{width:15px;height:15px}
.a-lgm .a-n{font-size:13px}
@media(max-width:860px){
 body.a-lg{display:block}
 .a-lgr{display:none}
 .a-lgl{min-height:100vh;min-height:100dvh;padding:24px 24px 40px}
 .a-lgm{margin:0 auto;padding-top:32px}
 .a-lgm h1{font-size:2rem}
 .a-lgm form{margin-top:28px}
}

/* 오류 문구: 앞에 빨간 x(동그라미 없음) */
.a-m:not(:empty):not(.ok)::before,.a-pe::before{content:"";display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' fill='none' stroke='%23e03131' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.a-m,.a-pe{color:#e03131}
.a-m.ok{color:var(--g,#416b4c)}
.a-pe{margin:10px 0 0;font-size:.85rem;font-weight:500;line-height:1.45}
.a-pe[hidden]{display:none}
/* 비밀번호 칸: 눈 아이콘은 처음부터 보이고 구분선은 없다 */
.a-pwf{position:relative}
.a-pwf input{padding-right:54px!important}
.a-eye{position:absolute;top:0;right:0;bottom:0;display:grid;place-items:center;width:50px;padding:0;border:0;background:none;color:#8b938d;cursor:pointer}
.a-eye.on{color:var(--g,#416b4c)}
.a-eye:focus-visible{outline:2px solid var(--g,#416b4c);outline-offset:-4px;border-radius:6px}
/* 비밀번호 조건: 회색 → 충족하면 밝은 초록 */
.a-pr{margin:12px 0 0;padding:0;list-style:none;font-size:.9rem;line-height:1.4}
.a-pr li{display:flex;align-items:center;gap:8px;padding:3px 0;color:#6b747e;transition:color .15s}
.a-pr svg{flex:none}
.a-pr li.ok{color:#22ad85}
.a-dlg .a-pr{font-size:.85em;margin:.1em 0 .9em}
/* 수집·이용 안내: 전역 details 의 위아래 선을 없앤다 */
.a-hdt{border:0!important;padding:0!important}
.a-have a{color:var(--ink,#1f2a24);font-weight:600}