@charset "utf-8";
/* 사이트맵 페이지 전용 스타일 (공통은 fl-sub.css).
   왼쪽 정렬 제목 → 1차 메뉴별 둥근 카드(번호·메뉴명 + 2차 메뉴 줄 목록). */

#container > #sub-sitemap { background: var(--fl-cream); }
body:has(#sub-sitemap) { background: var(--fl-cream) !important; } /* gw.css 의 body #f8f8f8 !important 를 이 페이지에서만 덮는다 */
body:has(#sub-sitemap) #container_wr, body:has(#sub-sitemap) .gw-footer-container { background: var(--fl-cream); }

#sub-sitemap .fl-sm { padding: clamp(80px, 8vw, 128px) 0 clamp(100px, 10vw, 160px); color: var(--fl-ink); }
#sub-sitemap .fl-sm-en { font-family: var(--fl-font-display); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fl-mango); }
#sub-sitemap .fl-sm-title { margin-top: 12px; font-size: clamp(34px, 4vw, 56px); font-weight: 800; line-height: 1.25; letter-spacing: -0.04em; color: var(--fl-dark); }
#sub-sitemap .fl-sm-lead { margin-top: 20px; font-size: 17px; line-height: 1.85; color: var(--fl-ink-2); }

/* 카드: 1차 메뉴 5개가 한 줄에 → 3열 → 2열 → 1열 */
#sub-sitemap .fl-sm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: clamp(40px, 4vw, 64px) 0 0; padding: 0; list-style: none; }
#sub-sitemap .fl-sm-card { display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px); border-radius: 28px; background: var(--fl-white); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease; }
#sub-sitemap .fl-sm-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(28, 17, 10, .1); }
.fl-reveal-on #sub-sitemap .fl-sm-card[data-fl-reveal] { transition-delay: calc(var(--fl-i, 0) * .06s); }
.fl-reveal-on #sub-sitemap .fl-sm-card[data-fl-reveal].is-in:hover { transition-delay: 0s; }

#sub-sitemap .fl-sm-top { display: flex; flex-direction: column; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--fl-line); text-decoration: none; color: var(--fl-dark); }
#sub-sitemap .fl-sm-num { font-family: var(--fl-font-display); font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--fl-mango); }
#sub-sitemap .fl-sm-top strong { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; transition: color .25s ease; }
#sub-sitemap .fl-sm-top:hover strong { color: var(--fl-primary); }

#sub-sitemap .fl-sm-sub { margin: 10px 0 0; padding: 0; list-style: none; }
#sub-sitemap .fl-sm-sub a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; margin: 0 -12px; border-radius: 12px; font-size: 16px; font-weight: 600; text-decoration: none; color: var(--fl-ink-2); transition: background .25s ease, color .25s ease; }
#sub-sitemap .fl-sm-sub a i { font-size: 14px; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
#sub-sitemap .fl-sm-sub a:hover { background: var(--fl-cream); color: var(--fl-dark); }
#sub-sitemap .fl-sm-sub a:hover i { opacity: 1; transform: none; }

@media screen and (max-width: 1280px) {
    #sub-sitemap .fl-sm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 768px) {
    #sub-sitemap .fl-sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 576px) {
    #sub-sitemap .fl-sm-grid { grid-template-columns: minmax(0, 1fr); }
    #sub-sitemap .fl-sm-sub a i { opacity: 1; transform: none; } /* 터치 화면은 화살표를 늘 보여 준다 */
}