/* 기회담 · 2026-09-28 클릭 가능 UI 가시화 (Claude).
   근거: NN/g "Clickable Elements" (누를 수 있는 것은 누를 수 있게 보여야 하고, 아닌 것은 버튼처럼 보이면 안 된다),
   GOV.UK Design System Button (실제 눌림 범위·상태·포커스 링), USWDS Card (카드 하단의 명시적 행동).
   원칙: 클릭면에만 테두리·면·상태를 준다. 균일한 연한 황색 테두리 방식은 쓰지 않는다. 캐릭터·장식 아이콘 없음.
   cascade: editorial-20260928.css 와 같은 html[data-palette] #main 특이도로, 로드 순서(뒤)로 이긴다. */
html[data-palette] #main{--aff-ink:#302c24;--aff-line:#dcd5c7;--aff-line-strong:#a99b83;--aff-paper:#fff;--aff-hover:#faf7f1}

/* ───────── 1. 분야 타일: 버튼 8종, 분야마다 다른 색의 아이콘 메달리온 ───────── */
html[data-palette] #main .categories{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 26px;padding:0;margin:0 0 2px;border:0;background:transparent;overflow:visible;mask-image:none}
html[data-palette] #main .category-group{display:grid;grid-template-columns:repeat(var(--count,4),minmax(0,1fr));gap:10px;flex:var(--count,4) 1 0;min-width:0;align-items:stretch;overflow:visible}
html[data-palette] #main .category-group-label{grid-column:1/-1;min-width:0;margin:0 0 -2px 2px;font-size:11px;line-height:1.4;letter-spacing:.4px;font-weight:700;color:#7a7263}
html[data-palette] #main .category{--tile-tint:#f3f0e9;--tile-deep:#4b4437;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;min-height:94px;padding:12px 8px 11px;border-radius:14px;background:var(--aff-paper);border:1px solid var(--aff-line);box-shadow:0 1px 2px #2a220f0a;color:var(--aff-ink);font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:-.2px;white-space:normal;cursor:pointer}
html[data-palette] #main .category .cat-icon{width:42px;height:42px;flex:0 0 42px;margin:0;border-radius:13px;background:var(--tile-tint);color:var(--tile-deep);display:grid;place-items:center;box-shadow:inset 0 0 0 1px #0000000a}
html[data-palette] #main .category .cat-icon svg{width:23px;height:23px;stroke-width:1.75;fill:none;stroke:currentColor}
html[data-palette] #main .category:active{transform:translateY(0);box-shadow:none;background:var(--aff-hover)}
html[data-palette] #main .category:focus-visible{outline:2px solid var(--aff-ink);outline-offset:2px}
html[data-palette] #main .category.selected,html[data-palette] #main .category[aria-pressed=true]{background:var(--tile-tint);border-color:var(--tile-deep);box-shadow:inset 0 0 0 1px var(--tile-deep);color:var(--tile-deep);font-weight:750}
html[data-palette] #main .category.selected .cat-icon,html[data-palette] #main .category[aria-pressed=true] .cat-icon{background:var(--tile-deep);color:#fff;box-shadow:none}
html[data-palette] #main .category.selected::after,html[data-palette] #main .category[aria-pressed=true]::after{content:"";position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;background:var(--tile-deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7'/></svg>") center/11px 11px no-repeat}
/* 분야별 색: 사업 3종은 흙·황토·청회색, 생활 5종은 초록·하늘·자주·장미·청록. */
html[data-palette] #main .category[data-category="소상공인"]{--tile-tint:#f9e6dc;--tile-deep:#a2502f}
html[data-palette] #main .category[data-category="창업 준비"]{--tile-tint:#f8e9cf;--tile-deep:#94580b}
html[data-palette] #main .category[data-category="법인·중소기업"]{--tile-tint:#e3ebf1;--tile-deep:#3f5d70}
html[data-palette] #main .category[data-category="생활비·금융"]{--tile-tint:#dfefe5;--tile-deep:#2f7250}
html[data-palette] #main .category[data-category="주거"]{--tile-tint:#e1ebf6;--tile-deep:#3f6f9e}
html[data-palette] #main .category[data-category="일·구직"]{--tile-tint:#ebe6f4;--tile-deep:#645390}
html[data-palette] #main .category[data-category="임신·출산·육아"]{--tile-tint:#f9e2e8;--tile-deep:#ad4a64}
html[data-palette] #main .category[data-category="교육"]{--tile-tint:#dceef0;--tile-deep:#2a7479}
html[data-palette] #main .filter-note{margin:10px 0 22px}

/* ───────── 2. 신청 주체 탭: 트랙 위의 세그먼트, 선택은 진한 면 ───────── */
html[data-palette] #main .audience-switch{display:inline-flex;align-items:center;gap:3px;padding:4px;border-radius:12px;border:1px solid #e6e0d2;background:#eee9df;box-shadow:none;max-width:100%}
html[data-palette] #main .audience-switch a{min-height:40px;padding:0 16px;border:1px solid transparent;border-radius:9px;background:transparent;color:#5c5548;font-size:13px;font-weight:600;gap:6px;white-space:nowrap}
html[data-palette] #main .audience-switch a[aria-current=page]{background:var(--aff-ink);border-color:var(--aff-ink);color:#fff;font-weight:750;box-shadow:0 1px 2px #0000002e}
html[data-palette] #main .audience-switch a:focus-visible{outline:2px solid var(--aff-ink);outline-offset:2px}

/* ───────── 3. 추천 검색어: 32px 글자 버튼 → 36px 칩 ───────── */
html[data-palette] #main .trending{align-items:center}
html[data-palette] #main .trending button{min-height:36px;padding:0 13px;border:1px solid var(--aff-line);border-radius:999px;background:var(--aff-paper);color:#4b4437;font-size:12px;font-weight:600}
html[data-palette] #main .trending button:focus-visible{outline:2px solid var(--aff-ink);outline-offset:2px}

/* ───────── 4. 공고 카드: 저장 토글은 글자 있는 알약, 제목 링크에 "자세히 보기" 액션 ───────── */
html[data-palette] #main .notice-card .card-top{padding-right:104px}
html[data-palette] #main .notice-card .save-button{position:absolute;top:14px;right:14px;width:auto;height:36px;min-height:36px;display:inline-flex;align-items:center;gap:5px;padding:0 12px 0 9px;border-radius:999px;border:1px solid var(--aff-line);background:var(--aff-paper);color:#5c5548;font-size:12px;font-weight:650;line-height:1;white-space:nowrap}
html[data-palette] #main .notice-card .save-button svg{width:16px;height:16px;fill:none;stroke-width:1.9}
html[data-palette] #main .notice-card .save-button::after{content:"저장"}
html[data-palette] #main .notice-card .save-button.saved{background:#f8ecd9;border-color:#b3946c;color:#713e09}
html[data-palette] #main .notice-card .save-button.saved svg{fill:currentColor}
html[data-palette] #main .notice-card .save-button.saved::after{content:"저장됨"}
html[data-palette] #main .notice-card .save-button:focus-visible{outline:2px solid var(--aff-ink);outline-offset:2px}
html[data-palette] #main .notice-card .card-link{display:block;padding:12px 0 0;color:inherit;text-decoration:none;border-radius:6px}
html[data-palette] #main .notice-card .card-link h3{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:4px}
html[data-palette] #main .notice-card .card-link:focus-visible{outline:2px solid var(--aff-ink);outline-offset:4px}
html[data-palette] #main .notice-card .card-link:focus-visible h3{color:#713e09;text-decoration-color:#c7a66a}
html[data-palette] #main .notice-card .card-footer{flex-wrap:wrap;align-items:center;min-height:38px;padding-right:118px}
html[data-palette] #main .saved-item .notice-card .card-footer{padding-right:132px}
.aff-view{position:absolute;right:16px;bottom:15px;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px 0 12px;border-radius:9px;border:1px solid var(--aff-line-strong,#a99b83);background:var(--aff-paper,#fff);color:var(--aff-ink,#302c24);font-size:12px;font-weight:700;line-height:1;letter-spacing:-.1px;white-space:nowrap}
.aff-view svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 auto}
html[data-palette] #main .notice-card .card-link:focus-visible .aff-view{background:var(--aff-ink);border-color:var(--aff-ink);color:#fff}

/* ───────── hover: 포인터 기기에서만 ───────── */
@media(hover:hover){
 html[data-palette] #main .category:hover{border-color:var(--tile-deep);box-shadow:0 4px 12px #2a220f14;transform:translateY(-1px);background:var(--aff-paper)}
 html[data-palette] #main .category.selected:hover,html[data-palette] #main .category[aria-pressed=true]:hover{background:var(--tile-tint);box-shadow:inset 0 0 0 1px var(--tile-deep)}
 html[data-palette] #main .audience-switch a:hover{background:var(--aff-paper);color:var(--aff-ink)}
 html[data-palette] #main .audience-switch a[aria-current=page]:hover{background:var(--aff-ink);color:#fff}
 html[data-palette] #main .trending button:hover{border-color:var(--aff-line-strong);background:var(--aff-hover);color:var(--aff-ink)}
 html[data-palette] #main .notice-card .save-button:hover{border-color:var(--aff-line-strong);background:var(--aff-hover);color:var(--aff-ink)}
 html[data-palette] #main .notice-card .save-button.saved:hover{background:#f3e2c6;border-color:#94744b;color:#5b3107}
 html[data-palette] #main .notice-card .card-link:hover h3{color:#713e09;text-decoration-color:#c7a66a}
 html[data-palette] #main .notice-card .card-link:hover .aff-view{background:var(--aff-ink);border-color:var(--aff-ink);color:#fff}
 html[data-palette] #main .notice-card .card-link:hover .aff-view svg{transform:translateX(2px)}
 html[data-palette] #main .notice-card:hover{border-color:#e2ded5}
}
@media(prefers-reduced-motion:no-preference){
 html[data-palette] #main .category{transition:border-color .15s,box-shadow .15s,transform .15s,background-color .15s}
 html[data-palette] #main .category .cat-icon{transition:background-color .15s,color .15s}
 html[data-palette] #main .audience-switch a,html[data-palette] #main .trending button,html[data-palette] #main .notice-card .save-button,.aff-view{transition:background-color .15s,border-color .15s,color .15s}
 .aff-view svg{transition:transform .15s}
 html[data-palette] #main .notice-card .card-link h3{transition:color .15s,text-decoration-color .15s}
}

/* ───────── 태블릿(900~1279): 타일 폭이 줄어 글자만 조정 ───────── */
@media(max-width:1279px){
 html[data-palette] #main .category{font-size:12px;min-height:90px}
}
@media(max-width:899px){
 html[data-palette] #main .categories{gap:12px 18px}
 html[data-palette] #main .category{padding:11px 6px 10px;gap:8px}
 html[data-palette] #main .category .cat-icon{width:40px;height:40px;flex-basis:40px}
}

/* ───────── 모바일(≤599): 분야는 4열 타일, 주체 탭은 4칸 그리드 유지 ───────── */
@media(max-width:599px){
 html[data-palette] #main .categories{display:flex;flex-direction:column;gap:14px;padding:0}
 html[data-palette] #main .category-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-columns:repeat(min(var(--count,4),5),minmax(0,1fr));gap:6px;flex:0 0 auto;width:100%}
 html[data-palette] #main .category-group-label{flex-basis:auto;grid-column:1/-1;min-height:0;font-size:10.5px;margin:0 0 -1px 1px}
 html[data-palette] #main .category{min-height:80px;padding:10px 3px 9px;gap:7px;font-size:11px;letter-spacing:-.4px;border-radius:12px}
 html[data-palette] #main .category .cat-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px}
 html[data-palette] #main .category .cat-icon svg{width:20px;height:20px}
 html[data-palette] #main .category.selected::after,html[data-palette] #main .category[aria-pressed=true]::after{width:16px;height:16px;top:5px;right:5px;background-size:10px 10px}
 html[data-palette] #main .audience-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:3px;padding:3px;border-radius:11px}
 html[data-palette] #main .audience-switch a{min-height:40px;padding:0 4px;font-size:11px;gap:3px;border-radius:8px;justify-content:center}
 html[data-palette] #main .audience-switch svg{width:13px;height:13px}
 html[data-palette] #main .trending button{min-height:36px;padding:0 10px;font-size:11px}
 html[data-palette] #main .notice-card .card-top{padding-right:96px}
 html[data-palette] #main .notice-card .save-button{top:12px;right:12px;height:36px;min-height:36px;padding:0 10px 0 8px;font-size:11px}
 html[data-palette] #main .notice-card .card-footer{padding-right:110px;min-height:36px}
 .aff-view{right:14px;bottom:13px;min-height:36px;font-size:11.5px;padding:0 9px 0 11px}
}
@media(max-width:359px){
 html[data-palette] #main .category-group{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-columns:repeat(min(var(--count,4),4),minmax(0,1fr))}
 html[data-palette] #main .category{font-size:10px;padding:9px 2px 8px}
 html[data-palette] #main .category .cat-icon{width:32px;height:32px;flex-basis:32px}
 html[data-palette] #main .audience-switch a{font-size:10px}
}