/* 기회담 · 2026-09-29 상단 접근 UI (Claude UX). 로그인/회원가입 위치를 한눈에, 로고 한 덩어리 클릭, 작은 브랜드 반응.
   원칙: 황토 #94580B 유지, 캐릭터·지속 흔들림 없음, prefers-reduced-motion 존중, 44px 터치, 상태(확인 중/비로그인/로그인/연결 불가)를 숨기지 않음.
   로드 위치: polish-20260929.css 뒤. 다른 공용 CSS 는 건드리지 않는다. */

/* ── 1. 로고: 심볼+워드마크가 한 클릭 덩어리 ── */
html[data-palette] .topbar .logo.brand-unclipped{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:2px 8px 2px 4px;margin-left:-4px;border-radius:12px;isolation:isolate}
html[data-palette] .topbar .logo .brand-symbol,html[data-palette] .topbar .logo .brand-wordmark{will-change:transform;transform-origin:50% 60%}
html[data-palette] .topbar .logo:focus-visible{outline:2px solid #302c24;outline-offset:3px}
html.access-ui-ready .topbar .logo::after{content:"";position:absolute;inset:0;border-radius:12px;background:#f5e4bf;opacity:0;z-index:-1;transition:opacity .18s}
@media(hover:hover){
 html.access-ui-ready .topbar .logo:hover::after{opacity:.55}
 html.access-ui-ready .topbar .logo:hover .brand-symbol{transform:rotate(-10deg) scale(1.08) translateY(-1px)}
 html.access-ui-ready .topbar .logo:hover .brand-wordmark{transform:translateX(1px)}
}
html.access-ui-ready .topbar .logo:focus-visible .brand-symbol{transform:rotate(-10deg) scale(1.08)}
/* 클릭 순간 한 번만 반짝(별이 살짝 커졌다 돌아옴). 반복·지속 없음 */
@keyframes access-twinkle{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.22) rotate(-14deg)}100%{transform:scale(1) rotate(0)}}
html.access-ui-ready .topbar .logo.access-twinkle .brand-symbol{animation:access-twinkle .36s cubic-bezier(.2,.8,.3,1.2) 1}

/* ── 2. 로그인·회원가입 알약 (top-actions 맨 오른쪽) ── */
html[data-palette] .top-actions{align-items:center}
html[data-palette] .top-actions .access-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
html[data-palette] .top-actions .ad-top-inquiry[data-member-entry]{display:none} /* 13px 글자 링크 대신 아래 알약이 회원 진입점 */
html[data-palette] .top-actions .access-login{--al-bg:#94580b;--al-fg:#fff;--al-line:#94580b;position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:12px;padding:0 16px 0 12px;border-radius:999px;border:1.5px solid var(--al-line);background:var(--al-bg);color:var(--al-fg)!important;font-size:14px;font-weight:700;line-height:1;letter-spacing:-.2px;white-space:nowrap;text-decoration:none!important;box-shadow:0 1px 2px #2a220f14;cursor:pointer;flex-shrink:0}
html[data-palette] .top-actions .access-login svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;flex:0 0 auto}
html[data-palette] .top-actions .access-login .access-label-short{display:none}
html[data-palette] .top-actions .access-login .access-sub{font-size:12px;font-weight:600;opacity:.85;margin-left:2px}
html[data-palette] .top-actions .access-login .access-dot{width:8px;height:8px;border-radius:50%;background:#2f7250;box-shadow:0 0 0 2px #fff;flex:0 0 auto}
html[data-palette] .top-actions .access-login:focus-visible{outline:2px solid #302c24;outline-offset:3px}
html[data-palette] .top-actions .access-login:active{transform:scale(.98)}
/* 상태별 */
html[data-palette] .top-actions .access-login[data-access-state=checking]{--al-bg:#eee9df;--al-fg:#5c5548;--al-line:#e6e0d2;box-shadow:none}
html[data-palette] .top-actions .access-login[data-access-state=member]{--al-bg:#fff;--al-fg:#713e09;--al-line:#b3946c}
html[data-palette] .top-actions .access-login[data-access-state=unavailable]{--al-line:#b3946c}
/* 회원 서비스 응답 불가(503 등)는 숨기지 않고 옆에 작은 상태 칩으로 알린다 */
html[data-palette] .top-actions .access-status{display:none;align-items:center;min-height:28px;margin-left:8px;padding:0 9px;border-radius:999px;background:#fbefda;border:1px solid #e6d3ad;color:#775014;font-size:11px;font-weight:600;line-height:1;white-space:nowrap}
html[data-palette] .top-actions .access-status[data-visible=true]{display:inline-flex}
@media(hover:hover){
 html[data-palette] .top-actions .access-login:hover{--al-bg:#713e09;--al-line:#713e09;box-shadow:0 4px 12px #2a220f1f;transform:translateY(-1px)}
 html[data-palette] .top-actions .access-login[data-access-state=member]:hover{--al-bg:#fbefda;--al-fg:#5b3107}
 html[data-palette] .top-actions .access-login[data-access-state=checking]:hover{--al-bg:#e6e0d2;transform:none}
 html[data-palette] .top-actions .access-login:hover svg{transform:translateY(-1px) rotate(-6deg)}
}
/* ── 3. 반응형 ── */
@media(max-width:899px){
 html[data-palette] .top-actions .access-login{margin-left:8px;padding:0 14px 0 11px}
}
@media(max-width:599px){
 html[data-palette] .top-actions{gap:8px}
 html[data-palette] .top-actions .access-login{margin-left:0;padding:0 13px 0 10px;font-size:13px;gap:6px}
 html[data-palette] .top-actions .access-login .access-label-long{display:none}
 html[data-palette] .top-actions .access-login .access-label-short{display:inline}
 html[data-palette] .top-actions .access-login .access-sub{display:none}
 /* 좁은 폭: 칩 대신 알약 모서리의 주황 점(제목·aria 설명은 그대로) */
 html[data-palette] .top-actions .access-status[data-visible=true]{position:absolute;width:10px;height:10px;min-height:0;padding:0;margin:0;border-radius:50%;background:#e0902a;border:2px solid #fff;overflow:hidden;color:transparent;font-size:0;top:-2px;right:-2px}
 html[data-palette] .top-actions .access-status[data-visible=true]::after{content:none}
 html[data-palette] .topbar .logo.brand-unclipped{padding:2px 4px 2px 2px;margin-left:-2px}
}
@media(max-width:359px){
 html[data-palette] .top-actions .access-login svg{display:none}
 html[data-palette] .top-actions .access-login{padding:0 11px 0 9px;font-size:12px}
}
/* ── 4. 움직임 ── */
@media(prefers-reduced-motion:no-preference){
 html.access-ui-ready .topbar .logo .brand-symbol,html.access-ui-ready .topbar .logo .brand-wordmark{transition:transform .22s cubic-bezier(.2,.8,.3,1.2)}
 html[data-palette] .top-actions .access-login{transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s}
 html[data-palette] .top-actions .access-login svg{transition:transform .2s cubic-bezier(.2,.8,.3,1.2)}
}
@media(prefers-reduced-motion:reduce){
 html.access-ui-ready .topbar .logo .brand-symbol,html.access-ui-ready .topbar .logo .brand-wordmark,html[data-palette] .top-actions .access-login,html[data-palette] .top-actions .access-login svg{transition:none!important;animation:none!important;transform:none!important}
 html.access-ui-ready .topbar .logo:hover .brand-symbol,html.access-ui-ready .topbar .logo:focus-visible .brand-symbol{transform:none!important}
}

/* ── 5. (round02) 모바일 상단 보조 정보 압축 ──
   600px 미만에서 .preview-status(공고 자료 날짜·공고/제도 건수·이용 안내·문의 내용 작성)가 3행 91px 로 상품 CTA 를 밀어냈다.
   요약은 한 줄(320 에서 두 줄)로 이어 붙이고, 이용 안내·문의 내용 작성은 44px 토글 뒤의 접히는 보조행(.access-aux)으로 둔다.
   DOM 이동은 access-ui JS 가 600px 미만에서만 하며, 600px 이상에서는 display:contents 로 원래 흐름을 되살린다. 건수·날짜는 숨기지 않고 12px 유지. */
html.access-ui-ready[data-palette] #main .access-aux-toggle{display:none}
@media(max-width:599px){
 html.access-ui-ready[data-palette] #main .preview-status{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:0;min-height:44px;margin:4px 0 8px;padding:0;font-size:12px;line-height:1.45}
 html.access-ui-ready[data-palette] #main .preview-status .status-summary{flex:1 1 0;min-width:0;display:block;gap:0;font-size:12px;line-height:1.45;color:#66645d}
 html.access-ui-ready[data-palette] #main .preview-status .status-summary>span{display:inline;flex-basis:auto;white-space:nowrap}
 html.access-ui-ready[data-palette] #main .preview-status .status-summary>span:not(:last-child)::after{content:" · ";white-space:normal;color:#b3a992}
 html.access-ui-ready[data-palette] #main .preview-status .status-summary>span:first-child{flex-basis:auto}
 html.access-ui-ready[data-palette] #main .access-aux-toggle{display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:44px;padding:0 10px 0 12px;border:1px solid #dcd5c7;border-radius:999px;background:#fff;color:#4b4437;font-size:12px;font-weight:650;line-height:1;white-space:nowrap;cursor:pointer;flex:0 0 auto}
 html.access-ui-ready[data-palette] #main .access-aux-toggle::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:2px}
 html.access-ui-ready[data-palette] #main .access-aux-toggle[aria-expanded=true]::after{transform:translateY(2px) rotate(-135deg)}
 html.access-ui-ready[data-palette] #main .access-aux-toggle:focus-visible{outline:2px solid #302c24;outline-offset:2px}
 html.access-ui-ready[data-palette] #main .access-aux{flex:1 0 100%;display:flex;gap:8px;padding:6px 0 2px}
 html.access-ui-ready[data-palette] #main .access-aux[hidden]{display:none}
 html.access-ui-ready[data-palette] #main .access-aux>a,html.access-ui-ready[data-palette] #main .access-aux>button{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;margin:0;padding:0 10px;border:1px solid #dcd5c7;border-radius:10px;background:#fff;color:#302c24;font-size:13px;font-weight:600;text-decoration:none}
 html.access-ui-ready[data-palette] #main .access-aux>a svg{width:12px;height:12px}
 html.access-ui-ready[data-palette] #main .access-aux>a:focus-visible,html.access-ui-ready[data-palette] #main .access-aux>button:focus-visible{outline:2px solid #302c24;outline-offset:2px}
}
@media(min-width:600px){
 html.access-ui-ready[data-palette] #main .access-aux,html.access-ui-ready[data-palette] #main .access-aux[hidden]{display:contents}
}
@media(prefers-reduced-motion:no-preference){html.access-ui-ready[data-palette] #main .access-aux-toggle::after{transition:transform .16s}}