/* ==========================================================================
   모아콕 Global CSS (jl.css)
   jl-styles 플러그인이 Pretendard와 함께 Elementor kit 뒤에 불러온다. WPCode에는 넣지 않는다.

   디자인 시스템 요약 (확정 값은 파일 끝 "13. 최종 디자인 오버라이드" 기준)
   - 액센트: 딥 틸 1색만 사용. 뉴트럴도 액센트 쪽으로 미세하게 기울여 한 세트로 읽히게 함.
   - 모서리: 8px 단일 스케일. 버튼·태그도 동일(알약 모양 없음).
   - 카드: 클릭 대상(카테고리/사이트/블로그)에만 사용. 나머지 섹션은 헤어라인과 여백으로 구분.
   - 모션: 호버/포커스 전환만. prefers-reduced-motion 준수.
   ========================================================================== */

/* ---------- 1. 토큰 ---------- */
:root {
    color-scheme: light;

    /* 배경 / 표면 */
    --jl-bg: #efedf0;
    --jl-card: #ffffff;
    --jl-surface-sub: #e6e3e9;
    --jl-header-bg: #ffffff;
    --jl-footer-bg: #191419;
    --jl-footer-text: #e0e9e8;

    /* 텍스트 */
    --jl-text: #102629;
    --jl-text-sub: #344b4e;
    --jl-text-muted: #4b6264;

    /* 액센트 (단일) */
    --jl-primary: #5e2750;
    --jl-primary-hover: #471c3c;
    --jl-primary-soft: #eee6ec;
    --jl-on-primary: #ffffff;

    /* 선 / 태그 */
    --jl-border: #dcd7de;
    --jl-border-strong: #102629;
    --jl-tag-bg: #e6e3e9;
    --jl-tag-text: #344b4e;

    /* 형태 */
    --jl-radius: 3px;
    --jl-shadow: none;
    --jl-shadow-hover: 0 6px 18px rgba(26, 22, 28, 0.08);

    --jl-header-h: 64px;

    /* 타이포 */
    --jl-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    /* 도메인·날짜·수치는 모노. URL의 l/1, 0/O 혼동을 줄이고 목록 스캔을 돕기 위함. */
    --jl-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo,
        Consolas, "D2Coding", monospace;
}



/* ---------- 2. 리셋 / 전역 기본값 ---------- */
* {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--jl-bg);
    color: var(--jl-text);
    word-break: keep-all;
    font-family: var(--jl-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--jl-primary);
    outline-offset: 2px;
}

/* 헤더 하단으로 앵커 섹션이 가려지지 않도록 */
#address-list,
#address-update,
#log,
#latest,
#usage-guide {
    scroll-margin-top: calc(var(--jl-header-h) + 24px);
}

/* ---------- 3. 컨테이너 / 섹션 ---------- */
.jl-wrap {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

@media (max-width: 768px) {
    .jl-wrap {
        width: min(100% - 32px, 1180px);
    }
}

.jl-section {
    padding: 88px 0;
}

@media (max-width: 768px) {
    .jl-section {
        padding: 56px 0;
    }
}

/* 섹션 헤드: 좌측 정렬 + 상단 헤어라인. 중앙 정렬 헤딩 반복을 없앰. */
.jl-section__head {
    margin-bottom: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--jl-border-strong);
    max-width: 720px;
}

.jl-section__title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--jl-text);
}

.jl-section__desc {
    font-size: 15px;
    color: var(--jl-text-sub);
    margin: 0;
    max-width: 60ch;
}

.jl-section--alt {
    background: var(--jl-card);
    border-top: 1px solid var(--jl-border);
    border-bottom: 1px solid var(--jl-border);
}

/* 섹션 안쪽 소제목. jl-section__head보다 가벼워 구분선을 반복하지 않음. */
.jl-subtitle {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--jl-text);
    margin: 0 0 20px;
}

/* ---------- 4. 버튼 ---------- */
.jl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: var(--jl-radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    background: var(--jl-primary);
    color: var(--jl-on-primary);
    border: 1px solid var(--jl-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.jl-btn:hover {
    background: var(--jl-primary-hover);
    border-color: var(--jl-primary-hover);
}

.jl-btn:active {
    transform: translateY(1px);
}

/* ---------- 5. HERO ---------- */
/* 좌측 정렬 비대칭 구성. 중앙 정렬 히어로(§AI 기본값)를 피함. */
.jl-hero {
    padding: 72px 0 80px;
    border-bottom: 1px solid var(--jl-border);
}

@media (max-width: 768px) {
    .jl-hero {
        padding: 48px 0 56px;
    }
}

.jl-hero .jl-wrap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: 48px;
    align-items: end;
}

@media (max-width: 900px) {
    .jl-hero .jl-wrap {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }
}

.jl-hero__title {
    grid-column: 1;
    font-size: clamp(32px, 5.2vw, 58px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.12;
    margin: 0;
    color: var(--jl-text);
    max-width: 15ch;
}

.jl-hero__desc {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 15px;
    line-height: 1.7;
    color: var(--jl-text-sub);
    max-width: 46ch;
    margin: 0;
}

@media (max-width: 900px) {
    .jl-hero__desc {
        grid-column: 1;
        grid-row: auto;
        max-width: 60ch;
    }
}

.jl-hero__cta {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* ---------- 6. 카테고리 카드 (분야별 링크모음) ---------- */
/* 아이콘 대신 등록 수를 앞세우고 대표 사이트와 확인 시점을 함께 노출.
   목록만 나열하는 일반적인 디렉터리 카드와 구조를 다르게 가져감. */
.jl-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--jl-border);
    border: 1px solid var(--jl-border);
}

@media (max-width: 1000px) {
    .jl-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .jl-category-grid {
        grid-template-columns: 1fr;
    }
}

.jl-category-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
    background: var(--jl-card);
    transition: background 0.15s ease;
}

.jl-category-card:hover {
    background: var(--jl-primary-soft);
}

/* 등록 수: 카드에서 가장 먼저 읽히는 요소 */
.jl-category-card__count {
    display: block;
    font-family: var(--jl-mono);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--jl-primary);
    margin-bottom: 2px;
}

.jl-category-card__unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--jl-text-muted);
    margin-left: 3px;
    letter-spacing: 0;
}

.jl-category-card__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 10px 0 8px;
    padding-top: 10px;
    border-top: 1px solid var(--jl-border);
    color: var(--jl-text);
}

/* 대표 사이트 미리보기 */
.jl-category-card__sites {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--jl-text-sub);
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

.jl-category-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
}

.jl-category-card__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--jl-primary);
    text-align: right;
}

.jl-category-card:hover .jl-category-card__link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 6-0. 분야별 전체 색인 (링크모음 허브 전용) ---------- */
/* 메인의 요약 카드와 달리 등록 사이트를 전부 펼쳐 보여줌.
   방문자가 찾는 서비스가 있는지 한 페이지에서 확인할 수 있게 하는 것이 목적. */
.jl-index {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--jl-border-strong);
}

.jl-index__item {
    padding: 24px 4px 26px;
    border-bottom: 1px solid var(--jl-border);
}

.jl-index__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 12px;
}

.jl-index__name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--jl-text);
    margin: 0;
}

.jl-index__count {
    font-family: var(--jl-mono);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--jl-primary);
    white-space: nowrap;
}

.jl-index__date {
    font-family: var(--jl-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--jl-text-muted);
    white-space: nowrap;
    margin-left: auto;
}

.jl-index__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--jl-primary);
    white-space: nowrap;
}

.jl-index__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 등록 사이트 전체 나열 */
.jl-index__sites {
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--jl-text-sub);
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .jl-index__date {
        margin-left: 0;
        width: 100%;
        order: 3;
    }
}

/* ---------- 6-1. 용어 설명 (주소모음 / 링크모음이란?) ---------- */
/* 박스 제거. 좌측 굵은 규칙선으로 2열 대비. */
.jl-terms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

/* 3항목이라 2열로 접으면 한 칸이 비므로 곧바로 1열로 내림 */
@media (max-width: 900px) {
    .jl-terms {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.jl-terms__item {
    padding: 0 0 0 20px;
    border-left: 2px solid var(--jl-primary);
}

.jl-terms__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--jl-text);
    margin: 0 0 10px;
}

.jl-terms__desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--jl-text-sub);
    margin: 0;
    max-width: 46ch;
}

/* 용어 설명 하단 2단 이미지. .jl-terms와 동일한 그리드/브레이크포인트를 따라
   주소모음 아래 1장, 링크모음 아래 1장이 나란히 놓임. */
.jl-terms-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-top: 40px;
}

@media (max-width: 700px) {
    .jl-terms-media {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 28px;
    }
}

/* ---------- 7-0a. 이미지 프레임 (전 섹션 공용) ---------- */
/* 고정 비율 프레임: 원본 크기가 달라도 칸 높이가 어긋나지 않고,
   로드 전에 자리를 잡아 레이아웃 이동(CLS)을 막음.
   비율은 --jl-frame-ratio로 문맥마다 바꿈. */
.jl-figure {
    margin: 0;
}

.jl-figure__frame {
    --jl-frame-ratio: 16 / 10;
    display: block;
    aspect-ratio: var(--jl-frame-ratio);
    width: 100%;
    overflow: hidden;
    background: var(--jl-surface-sub);
    border: 1px solid var(--jl-border);
    border-radius: var(--jl-radius);
}

.jl-figure__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 도식 이미지는 눌러서 원본 크기로 열 수 있음 (별도 안내 표시 없음) */
a.jl-figure__frame {
    position: relative;
    cursor: zoom-in;
}

/* ---------- 7-0b. 좌측 콘텐츠 + 우측 이미지 2단 ---------- */
.jl-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .jl-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.jl-split__body {
    min-width: 0;
}

/* 좁아진 칸에 맞춰 더 세로로 긴 비율 사용 */
.jl-split .jl-figure__frame {
    --jl-frame-ratio: 4 / 3;
}

/* 이미지가 목록 옆에서 같이 스크롤되도록 상단 정렬 유지 */
.jl-split__media {
    position: sticky;
    top: calc(var(--jl-header-h) + 24px);
}

@media (max-width: 900px) {
    .jl-split__media {
        position: static;
    }
}

/* ---------- 6-2. 집계·기준 안내문 (분야 페이지 상단) ---------- */
/* 등록 수와 확인 기준일을 담은 한 문단. 검색엔진·생성형 검색이 이 문단만
   떼어가도 뜻이 통하도록 사이트명·분야명·수치를 모두 포함시킴. */
.jl-note {
    margin: 0 0 32px;
    padding: 16px 18px;
    background: var(--jl-primary-soft);
    border-left: 2px solid var(--jl-primary);
    border-radius: 0 var(--jl-radius) var(--jl-radius) 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--jl-text-sub);
    max-width: 70ch;
}

.jl-note strong {
    color: var(--jl-text);
    font-weight: 600;
}

/* ---------- 7. 사이트 카드 (주소모음 / 링크모음 하위 페이지 공통) ---------- */
/* 페이지의 주요 스캔 단위라 카드 유지. 그림자 제거, 헤어라인 격자. */
.jl-site-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--jl-border);
    border: 1px solid var(--jl-border);
}

@media (max-width: 900px) {
    .jl-site-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .jl-site-grid {
        grid-template-columns: 1fr;
    }
}

.jl-site-card {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: var(--jl-card);
    height: 100%;
    transition: background 0.15s ease;
}

.jl-site-card:hover {
    background: var(--jl-surface-sub);
}

.jl-site-card__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--jl-text);
}

.jl-site-card__domain {
    display: inline-block;
    font-family: var(--jl-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--jl-primary);
    margin-bottom: 12px;
    overflow-wrap: anywhere;
    width: fit-content;
}

.jl-site-card__domain:hover {
    color: var(--jl-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-site-card__desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--jl-text-sub);
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

.jl-site-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.jl-site-card__tags span {
    font-size: 11px;
    font-weight: 600;
    color: var(--jl-tag-text);
    background: var(--jl-tag-bg);
    border-radius: var(--jl-radius);
    padding: 4px 8px;
}

/* ---------- 7-1. 순위 리스트 (인기 사이트) ---------- */
.jl-rank-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--jl-border-strong);
}

.jl-rank-list__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--jl-border);
}

.jl-rank-list__num {
    flex: 0 0 auto;
    font-family: var(--jl-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--jl-text-muted);
    font-variant-numeric: tabular-nums;
}

.jl-rank-list__body {
    flex: 1;
    min-width: 0;
}

.jl-rank-list__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--jl-text);
}

.jl-rank-list__domain {
    font-family: var(--jl-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--jl-primary);
    overflow-wrap: anywhere;
}

.jl-rank-list__domain:hover {
    color: var(--jl-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-rank-list__desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--jl-text-sub);
}

/* ---------- 7-2. 확인일 리스트 (최신주소) ---------- */
.jl-latest-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--jl-border-strong);
}

.jl-latest-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--jl-border);
}

.jl-latest-list__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--jl-text);
    margin-right: 12px;
}

.jl-latest-list__domain {
    font-family: var(--jl-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--jl-primary);
    overflow-wrap: anywhere;
}

.jl-latest-list__domain:hover {
    color: var(--jl-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 알약 배지 제거. 모노 텍스트만. */
.jl-latest-list__date {
    flex: 0 0 auto;
    font-family: var(--jl-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--jl-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- 7-3. 단계 리스트 (이용방법) ---------- */
.jl-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--jl-border-strong);
}

.jl-steps__item {
    display: flex;
    gap: 24px;
    padding: 24px 4px;
    border-bottom: 1px solid var(--jl-border);
}

.jl-steps__num {
    flex: 0 0 auto;
    font-family: var(--jl-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--jl-primary);
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
}

.jl-steps__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--jl-text);
}

.jl-steps__desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--jl-text-sub);
    margin: 0;
    max-width: 60ch;
}

/* ---------- 7-4. 기본 리스트 (선정기준 등 텍스트 위주 섹션) ---------- */
.jl-plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--jl-text-sub);
}

.jl-plain-list li {
    padding-top: 18px;
    border-top: 1px solid var(--jl-border);
}

@media (max-width: 900px) {
    .jl-plain-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ---------- 7-4a. 특징 카드 (모아콕의 특징) ---------- */
/* 박스 제거. 상단 규칙선 3열. */
.jl-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

@media (max-width: 900px) {
    .jl-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .jl-feature-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.jl-feature-card {
    padding: 20px 0 0;
    background: transparent;
    border: none;
    border-top: 2px solid var(--jl-border-strong);
}

.jl-feature-card__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--jl-text);
    margin: 0 0 8px;
}

.jl-feature-card__desc {
    font-size: 15px;
    color: var(--jl-text-sub);
    line-height: 1.7;
    margin: 0;
}

/* ---------- 7-4d. 확인·변경 이력 ---------- */
.jl-log {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--jl-border-strong);
}

.jl-log__item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 20px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--jl-border);
}

@media (max-width: 600px) {
    .jl-log__item {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

.jl-log__date {
    font-family: var(--jl-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--jl-text-muted);
    white-space: nowrap;
}

.jl-log__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--jl-text-sub);
    margin: 0;
}

.jl-log__body strong {
    color: var(--jl-text);
    font-weight: 600;
}

/* 도메인 문자열은 본문 안에서도 모노 유지 */
.jl-log__body code,
.jl-article code {
    font-family: var(--jl-mono);
    font-size: 0.92em;
    background: var(--jl-tag-bg);
    border-radius: var(--jl-radius);
    padding: 2px 6px;
    overflow-wrap: anywhere;
}

/* ---------- 7-5. 블로그 카드 (블로그 목록) ---------- */
.jl-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

@media (max-width: 900px) {
    .jl-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .jl-blog-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.jl-blog-card {
    display: flex;
    flex-direction: column;
    padding: 20px 0 0;
    background: transparent;
    border: none;
    border-top: 2px solid var(--jl-border-strong);
}

.jl-blog-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border: 1px solid var(--jl-border);
    border-radius: var(--jl-radius);
    margin: 0 0 16px;
}

.jl-blog-card__meta {
    font-family: var(--jl-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--jl-text-muted);
    margin: 0 0 12px;
}

.jl-blog-card__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.4;
    color: var(--jl-text);
    margin: 0 0 10px;
}

.jl-blog-card:hover .jl-blog-card__title {
    color: var(--jl-primary);
}

.jl-blog-card__excerpt {
    font-size: 14px;
    line-height: 1.7;
    color: var(--jl-text-sub);
    margin: 0 0 16px;
}

.jl-blog-card__link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--jl-primary);
}

.jl-blog-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 7-6. 블로그 글 본문 ---------- */
.jl-article {
    max-width: 68ch;
}

.jl-article__meta {
    font-family: var(--jl-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--jl-text-muted);
    margin: 0 0 12px;
}

.jl-article__body {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--jl-border);
}

.jl-article h2,
.jl-article__body h2 {
    font-size: clamp(21px, 2.6vw, 27px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--jl-text);
    margin: 48px 0 14px;
}

.jl-article h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--jl-text);
    margin: 32px 0 10px;
}

.jl-article p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--jl-text-sub);
    margin: 0 0 18px;
}

.jl-article ul,
.jl-article ol {
    font-size: 16px;
    line-height: 1.8;
    color: var(--jl-text-sub);
    padding-left: 20px;
    margin: 0 0 18px;
}

.jl-article li {
    margin-bottom: 8px;
}

.jl-article a {
    color: var(--jl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 8. FAQ ---------- */
/* 박스 제거. 구분선 리스트. */
.jl-faq {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--jl-border-strong);
    max-width: 780px;
}

.jl-faq__item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--jl-border);
    border-radius: 0;
    padding: 24px 4px;
}

.jl-faq__q {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    color: var(--jl-text);
}

.jl-faq__a {
    font-size: 15px;
    line-height: 1.75;
    color: var(--jl-text-sub);
    margin: 0;
}

/* ---------- 9. 내부링크 리스트(관련 카테고리 등) ---------- */
.jl-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jl-related-links a {
    font-size: 13px;
    font-weight: 600;
    color: var(--jl-text);
    background: transparent;
    border: 1px solid var(--jl-border);
    border-radius: var(--jl-radius);
    padding: 9px 14px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.jl-related-links a:hover {
    border-color: var(--jl-primary);
    color: var(--jl-primary);
}

/* ---------- 10. 브레드크럼 ---------- */
.jl-breadcrumb {
    font-size: 13px;
    color: var(--jl-text-muted);
    margin-bottom: 16px;
}

.jl-breadcrumb a {
    color: var(--jl-text-muted);
}

.jl-breadcrumb a:hover {
    color: var(--jl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 11. HEADER ---------- */
.jl-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--jl-header-h);
    background: var(--jl-header-bg);
    border-bottom: 1px solid var(--jl-border);
}

.jl-header__inner {
    height: var(--jl-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jl-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--jl-text);
}

/* 표적과 포인터: 여러 링크 가운데 필요한 주소를 콕 고르는 모아콕 심벌 */
.jl-logo__mark {
    display: block;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    overflow: visible;
}

.jl-logo__disc {
    fill: var(--jl-primary-soft);
    stroke: var(--jl-primary);
    stroke-width: 4;
}

.jl-logo__ring {
    fill: none;
    stroke: var(--jl-primary);
    stroke-width: 4;
}

.jl-logo__core {
    fill: var(--jl-primary);
}

.jl-logo__cursor {
    fill: var(--jl-text);
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.jl-logo__words {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    line-height: 1;
}

.jl-logo__text {
    display: block;
    color: inherit;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.jl-logo__accent {
    color: #c74432;
}

.jl-logo__tagline {
    display: block;
    color: var(--jl-text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.jl-logo--footer {
    color: #fff;
    margin: 0 0 14px;
}

.jl-logo--footer .jl-logo__disc {
    fill: rgba(255, 255, 255, 0.08);
    stroke: #8fc1b8;
}

.jl-logo--footer .jl-logo__ring {
    stroke: #8fc1b8;
}

.jl-logo--footer .jl-logo__core {
    fill: #8fc1b8;
}

.jl-logo--footer .jl-logo__cursor {
    fill: #ffffff;
    stroke: var(--jl-footer-bg);
}

.jl-logo--footer .jl-logo__accent {
    color: #ef765f;
}

.jl-logo--footer .jl-logo__tagline {
    color: var(--jl-footer-text);
}

.jl-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.jl-nav a {
    font-size: 14px;
    font-weight: 600;
    color: var(--jl-text-sub);
    transition: color 0.15s ease;
}

.jl-nav a:hover {
    color: var(--jl-primary);
}

.jl-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.jl-nav-toggle span,
.jl-nav-toggle span::before,
.jl-nav-toggle span::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--jl-text);
    position: relative;
    transition: transform 0.15s ease;
}

.jl-nav-toggle span::before {
    position: absolute;
    top: -7px;
}

.jl-nav-toggle span::after {
    position: absolute;
    top: 7px;
}

@media (max-width: 860px) {
    .jl-nav {
        position: absolute;
        top: var(--jl-header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--jl-header-bg);
        border-bottom: 1px solid var(--jl-border);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease;
    }

    .jl-nav.is-open {
        max-height: 320px;
    }

    .jl-nav a {
        width: 100%;
        padding: 14px min(24px, 5%);
        border-top: 1px solid var(--jl-border);
    }

    .jl-nav-toggle {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jl-nav {
        transition: none;
    }
}

.jl-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.jl-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--jl-text-sub);
    cursor: pointer;
    transition: color 0.15s ease;
}

.jl-menu__toggle:hover {
    color: var(--jl-primary);
}

.jl-menu__toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}

.jl-menu.is-open .jl-menu__toggle::after {
    transform: translateY(1px) rotate(-135deg);
}

.jl-menu__panel {
    display: none;
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    width: 304px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 18px 0 10px;
    background: var(--jl-header-bg);
    border: 1px solid var(--jl-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 38, 41, 0.13);
    z-index: 120;
}

.jl-menu.is-open .jl-menu__panel {
    display: block;
}

.jl-menu__title {
    margin: 0 0 8px;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--jl-text-muted);
}

.jl-menu__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 20px;
    transition: background 0.12s ease;
}

.jl-menu__item:hover {
    background: var(--jl-surface-sub);
}

.jl-menu__name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.jl-menu__hint {
    font-size: 12px;
    color: var(--jl-text-muted);
    text-align: right;
}

.jl-menu__more {
    display: block;
    margin-top: 8px;
    padding: 14px 20px 4px;
    border-top: 1px solid var(--jl-border);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 860px) {
    .jl-nav.is-open {
        max-height: calc(100vh - var(--jl-header-h));
        overflow-y: auto;
    }

    .jl-menu {
        display: block;
        width: 100%;
        border-top: 1px solid var(--jl-border);
    }

    .jl-menu__toggle {
        width: 100%;
        justify-content: space-between;
        padding: 14px min(24px, 5%);
    }

    .jl-menu__panel {
        position: static;
        transform: none;
        width: 100%;
        max-height: none;
        padding: 0 0 8px;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .jl-menu__item {
        padding: 11px min(24px, 5%);
    }

    .jl-menu__title {
        padding: 0 min(24px, 5%) 0;
    }

    .jl-menu__more {
        padding: 13px min(24px, 5%) 4px;
        text-align: left;
    }
}

/* ---------- 12. FOOTER ---------- */
.jl-footer {
    background: var(--jl-footer-bg);
    color: var(--jl-footer-text);
    padding: 64px 0 32px;
    margin-top: 0;
}

.jl-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

@media (max-width: 700px) {
    .jl-footer__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.jl-footer__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 14px;
}

.jl-footer__desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--jl-footer-text);
    margin: 0;
    max-width: 46ch;
}

.jl-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jl-footer__links a {
    font-size: 14px;
    color: var(--jl-footer-text);
    transition: color 0.15s ease;
}

.jl-footer__links a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 20px;
    font-size: 13px;
    color: #bcc9c8;
}
/* ==========================================================================
   13. 최종 디자인 오버라이드 (딥 틸 확정 시안)
   위 기본 규칙 뒤에서 색상 토큰, 여백, 카테고리 4열/2열 그리드를 덮어쓴다.
   색상·그리드를 판단할 때는 이 구간을 기준으로 본다.
   ========================================================================== */
:root {
    color-scheme: light;
    --jl-bg: #f5f7f7;
    --jl-card: #ffffff;
    --jl-surface-sub: #edf2f1;
    --jl-header-bg: #ffffff;
    --jl-footer-bg: #152b2b;
    --jl-footer-text: #e0e9e8;
    --jl-text: #102629;
    --jl-text-sub: #344b4e;
    --jl-text-muted: #4b6264;
    --jl-primary: #176b63;
    --jl-primary-hover: #10554e;
    --jl-primary-soft: #eaf4f1;
    --jl-on-primary: #fff;
    --jl-border: #dce5e3;
    --jl-border-strong: #254e4b;
    --jl-tag-bg: #edf3f1;
    --jl-tag-text: #435f5b;
    --jl-radius: 8px;
}

body {
    background: var(--jl-bg);
}

.jl-wrap {
    max-width: 1200px;
    width: calc(100% - 64px);
}

.jl-header {
    border-bottom: 1px solid var(--jl-border);
    background: #fff;
}

.jl-logo__text {
    letter-spacing: -1px;
}

.jl-nav a {
    font-size: 14px;
}

.jl-hero {
    background: #edf4f2;
    padding: 64px 0 54px;
    border: 0;
}

.jl-hero .jl-wrap {
    display: block;
}

.jl-hero__title {
    font-size: clamp(32px,4vw,52px);
    line-height: 1.24;
    max-width: none;
    letter-spacing: -.045em;
}

.jl-hero__desc {
    margin-top: 20px;
    max-width: 650px;
    font-size: 16px;
    line-height: 1.8;
}

.jl-hero__cta {
    margin-top: 28px;
}

.jl-btn {
    padding: 17px 24px;
    border-radius: 6px;
}

.jl-section {
    padding: 60px 0;
    border-bottom: 1px solid var(--jl-border);
    background: #fff;
}

.jl-section--alt {
    background: #f5f7f7;
}

.jl-section__head {
    margin-bottom: 28px;
}

.jl-section__title {
    font-size: 27px;
    letter-spacing: -.035em;
    line-height: 1.4;
}

.jl-section__desc {
    max-width: 820px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--jl-text-sub);
}

#address-list {
    background: #fff;
    padding-top: 42px;
}

.jl-category-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    background: transparent;
    gap: 12px;
    border: 0;
}

.jl-category-card {
    border: 1px solid var(--jl-border);
    border-radius: 8px;
    padding: 22px 20px;
    position: relative;
    min-height: 182px;
}

.jl-category-card:hover {
    background: #f1f8f5;
    border-color: #77a79b;
}

.jl-category-card__title {
    order: 0;
    border: 0;
    padding: 0;
    margin: 0 0 10px;
    font-size: 19px;
}

.jl-category-card__count {
    order: 1;
    font-size: 12px;
    margin: 0 0 12px;
    color: var(--jl-text-muted);
    letter-spacing: 0;
}

.jl-category-card__unit {
    font-size: 12px;
}

.jl-category-card__sites {
    order: 2;
    font-size: 13px;
    line-height: 1.7;
}

.jl-category-card__foot {
    order: 3;
    padding-top: 14px;
    border-top: 1px solid var(--jl-border);
}

.jl-category-card__link {
    font-size: 12px;
}

.jl-terms {
    gap: 28px;
}

.jl-terms__item {
    border-left: 2px solid #8dafaa;
    padding-left: 18px;
}

.jl-terms__desc {
    line-height: 1.95;
    font-size: 14px;
}

.jl-terms__title {
    font-size: 17px;
    line-height: 1.6;
}

.jl-terms-media {
    gap: 24px;
}

.jl-figure__frame {
    background: #fff;
}

.jl-figure__frame img {
    object-fit: contain;
}

.jl-footer {
    padding-top: 44px;
}

.jl-blog-card {
    box-shadow: none;
    border-radius: 8px;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid #176b63;
    outline-offset: 4px;
}

@media (max-width:700px) {
    .jl-wrap {
        width: calc(100% - 32px);
    }

    .jl-hero {
        padding: 38px 0;
    }

    .jl-section {
        padding: 36px 0;
    }

    .jl-category-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 9px;
    }

    .jl-category-card {
        padding: 16px 12px;
    }

    .jl-category-card__title {
        font-size: 17px;
    }

    .jl-category-card__foot {
        flex-wrap: wrap;
    }

    .jl-category-card__sites {
        font-size: 12px;
    }

    .jl-section__title {
        font-size: 23px;
    }

    .jl-terms {
        grid-template-columns: 1fr;
    }
}

/* 하위 페이지 첫 섹션: 브레드크럼이 헤더에 붙지 않도록 상단 여백만 줄임 (모바일 포함 40px 고정) */
.jl-section--first {
    padding-top: 40px;
}

/* 표: 용어 비교, 분야별 요약, 변경 기록 공용. 좁은 화면에서는 가로 스크롤 */
.jl-table-wrap {
    overflow-x: auto;
    margin: 0 0 8px;
}

.jl-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    border-top: 1px solid var(--jl-border-strong);
    font-size: 14px;
    line-height: 1.6;
}

.jl-table th,
.jl-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--jl-border);
    text-align: left;
    vertical-align: top;
    color: var(--jl-text-sub);
}

.jl-table th {
    color: var(--jl-text);
    font-weight: 700;
    white-space: nowrap;
    background: var(--jl-primary-soft);
}

.jl-table td:first-child {
    color: var(--jl-text);
    font-weight: 600;
}

.jl-table__domain {
    font-family: var(--jl-mono);
    font-size: 13px;
    white-space: nowrap;
}

.jl-table a {
    color: var(--jl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-latest-list + .jl-copy {
    margin-top: 24px;
}

/* ---------- 박스형 카드 (번호·제목·설명) ---------- */
/* 메인의 설명·단계·상황·실수 목록. 기본 2열, --3은 3열, --1은 세로 나열. */
.jl-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--jl-primary);
    margin: 0 0 8px;
}

.jl-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.jl-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jl-cards--1 {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .jl-cards--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .jl-cards,
    .jl-cards--3 {
        grid-template-columns: 1fr;
    }
}

.jl-card {
    display: flex;
    gap: 16px;
    background: var(--jl-card);
    border: 1px solid var(--jl-border);
    border-radius: 12px;
    padding: 22px;
}

.jl-section--alt .jl-card {
    background: var(--jl-bg);
}

.jl-card__num {
    flex: 0 0 auto;
    min-width: 30px;
    font-family: var(--jl-mono);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--jl-primary);
    font-variant-numeric: tabular-nums;
}

.jl-card__body {
    min-width: 0;
}

.jl-card__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--jl-text);
    margin: 0 0 6px;
}

.jl-card__desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--jl-text-sub);
    margin: 0;
}

.jl-card__desc a {
    color: var(--jl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-copy + .jl-cards,
.jl-subtitle + .jl-cards {
    margin-top: 20px;
}

.jl-cards + .jl-copy,
.jl-cards + .jl-subtitle {
    margin-top: 32px;
}

@media (max-width: 640px) {
    .jl-card {
        padding: 18px;
        gap: 12px;
    }
}

/* 히어로 보조 버튼: 외부 최신주소 링크는 테두리형 */
.jl-btn--ghost {
    background: transparent;
    color: var(--jl-primary);
    border-color: var(--jl-primary);
}

.jl-btn--ghost:hover {
    background: var(--jl-primary-soft);
    border-color: var(--jl-primary-hover);
    color: var(--jl-primary-hover);
}

.jl-category-grid + .jl-copy,
.jl-feature-grid + .jl-copy,
.jl-stats + .jl-copy,
.jl-table-wrap + .jl-copy {
    margin-top: 24px;
}

.jl-latest-list__date a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-faq + .jl-note {
    margin-top: 28px;
    max-width: none;
}

/* 메인 구성 현황: 숫자 4칸 */
.jl-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 760px) {
    .jl-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.jl-latest-list + .jl-subtitle,
.jl-table-wrap + .jl-subtitle,
.jl-site-grid + .jl-subtitle,
.jl-terms + .jl-subtitle,
.jl-cards + .jl-subtitle {
    margin-top: 48px;
}

.jl-stats + .jl-table-wrap,
.jl-stats + .jl-copy,
.jl-cards + .jl-note,
p + .jl-blog-grid,
.jl-article + .jl-note {
    margin-top: 28px;
}

.jl-stats__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 18px;
    background: var(--jl-card);
    border: 1px solid var(--jl-border);
    border-radius: var(--jl-radius);
}

.jl-stats__num {
    font-family: var(--jl-mono);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--jl-primary);
    font-variant-numeric: tabular-nums;
}

.jl-stats__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--jl-text);
}

.jl-stats__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--jl-text-sub);
}

.jl-stats__desc a {
    color: var(--jl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 메인 주소 변경 확인 단계는 2단 안에서 위 여백 없이 시작 */
.jl-split__body .jl-steps {
    border-top: 0;
}

.jl-split__body .jl-steps__item:first-child {
    padding-top: 0;
}

/* 하위 페이지 선택 기준 섹션 안의 소제목 간격 */
.jl-section p + .jl-subtitle,
.jl-section ul + .jl-subtitle {
    margin-top: 32px;
}

.jl-copy {
    max-width: 850px;
    color: var(--jl-text-sub);
    font-size: 16px;
    line-height: 1.9;
}

.jl-copy p {
    margin: 0 0 19px;
}

.jl-copy h3 {
    font-size: 19px;
    color: var(--jl-text);
    margin: 30px 0 12px;
    line-height: 1.5;
}

.jl-copy h3:first-child {
    margin-top: 0;
}

.jl-faq {
    max-width: none;
}

.jl-faq__item {
    padding: 24px 0;
}

.jl-faq__q {
    line-height: 1.55;
}

#address-guide,
#usage-guide,
#faq {
    background: #f5f7f7;
}
/* Shared responsive category layout. */
@media(max-width:1000px){.jl-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- 12-1. 공통 푸터 전체 주소모음 ---------- */
.jl-home-directory {
    background: var(--jl-footer-bg);
    color: var(--jl-footer-text);
    margin-bottom: 40px;
}

.jl-home-directory__panel {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.jl-home-directory__title {
    list-style: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    cursor: default;
    pointer-events: none;
}

.jl-home-directory__title::-webkit-details-marker {
    display: none;
}

.jl-home-directory__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
}

.jl-home-directory__links a {
    color: var(--jl-footer-text);
    font-size: 13px;
    line-height: 1.6;
    transition: color 0.15s ease;
}

.jl-home-directory__links a:hover {
    color: #ffffff;
}

@media (max-width: 700px) {
    .jl-home-directory__panel {
        display: block;
        padding: 0;
    }

    .jl-home-directory__title {
        position: relative;
        padding: 18px 34px 18px 0;
        cursor: pointer;
        pointer-events: auto;
    }

    .jl-home-directory__title::after {
        content: "↓";
        position: absolute;
        top: 11px;
        right: 0;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        font-size: 19px;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
    }

    .jl-home-directory__panel[open] .jl-home-directory__title::after {
        content: "↑";
    }

    .jl-home-directory__links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
        padding: 0 0 20px;
    }

    .jl-home-directory__links a {
        padding: 8px 0;
    }
}


/* Main text clarity */
.jl-hero__desc,
#address-list .jl-category-card__sites {
    color: #2f474a;
    font-weight: 450;
}

/* ==========================================================================
   14. Elementor 캔버스 여백 제거
   HTML 위젯 주변에 Elementor가 주는 기본 여백·최대폭을 없앤다.
   ========================================================================== */
body.elementor-template-canvas {
    margin: 0;
    background: var(--jl-bg);
    color: var(--jl-text);
}

.elementor-template-canvas .e-con,
.elementor-template-canvas .e-con-inner {
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --margin-top: 0;
    --margin-bottom: 0;
    max-width: none;
}

.elementor-template-canvas .elementor-section .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
    padding: 0;
}

.elementor-template-canvas .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: none;
}

.elementor-template-canvas .elementor-widget-html {
    margin: 0;
}

.elementor-template-canvas .elementor-widget-html .elementor-widget-container {
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   15. Elementor 전역 색(kit)·테마 덮어쓰기 방지
   .elementor-kit-N h1 / a 규칙(특이성 0,1,1)보다 높은 특이성으로 색과 크기를 고정한다.
   ========================================================================== */
body .jl-page h1,
body .jl-page h2,
body .jl-page h3 {
    color: var(--jl-text);
}

body .jl-page .jl-hero__title {
    font-size: clamp(26px, 2.8vw, 38px);
    max-width: 13.5em;
}

body .jl-page .jl-section__title {
    font-size: 27px;
}

body .jl-page .jl-subtitle,
body .jl-page .jl-copy h3 {
    font-size: 19px;
}

body .jl-page .jl-category-card__title,
body .jl-page .jl-index__name {
    font-size: 19px;
}

body .jl-page .jl-site-card__title {
    font-size: 17px;
}

body .jl-page .jl-faq__q,
body .jl-page .jl-steps__title,
body .jl-page .jl-card__title {
    font-size: 16px;
}

body .jl-page a {
    color: inherit;
    text-decoration: none;
}

body .jl-page .jl-copy a,
body .jl-page .jl-article__body a,
body .jl-page .jl-note a,
body .jl-page .jl-table a,
body .jl-page .jl-stats__desc a,
body .jl-page .jl-feature-card__desc a,
body .jl-page .jl-card__desc a,
body .jl-page .jl-steps__desc a,
body .jl-page .jl-plain-list a,
body .jl-page .jl-faq__a a {
    color: var(--jl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body .jl-page .jl-category-card__link,
body .jl-page .jl-site-card__domain,
body .jl-page .jl-index__link,
body .jl-page .jl-latest-list__domain,
body .jl-page .jl-index__count {
    color: var(--jl-primary);
}

body .jl-page a.jl-btn {
    color: var(--jl-on-primary);
    text-decoration: none;
}

body .jl-page a.jl-btn--ghost {
    color: var(--jl-primary);
}

body .jl-page .jl-latest-list__date a {
    color: inherit;
    text-decoration: underline;
}

body .jl-page .jl-related-links a {
    color: var(--jl-text);
    text-decoration: none;
}

body .jl-page .jl-related-links a:hover {
    color: var(--jl-primary);
}

body .jl-page .jl-breadcrumb a {
    color: var(--jl-text-muted);
}

body .jl-header a.jl-logo,
body .jl-footer .jl-logo {
    color: inherit;
}

body .jl-header .jl-nav a {
    color: var(--jl-text-sub);
}

body .jl-header .jl-nav a:hover {
    color: var(--jl-primary);
}

body .jl-header .jl-nav .jl-menu__item {
    color: var(--jl-text);
}

body .jl-header .jl-nav .jl-menu__item:hover {
    color: var(--jl-primary);
}

body .jl-header .jl-nav .jl-menu__more {
    color: var(--jl-primary);
}

body .jl-header .jl-menu__toggle,
body .jl-header .jl-menu__toggle:hover,
body .jl-header .jl-menu__toggle:focus,
body .jl-header .jl-menu__toggle:active,
body .jl-header .jl-nav-toggle,
body .jl-header .jl-nav-toggle:hover,
body .jl-header .jl-nav-toggle:focus,
body .jl-header .jl-nav-toggle:active {
    background: transparent;
    border: none;
    box-shadow: none;
}

body .jl-header .jl-menu__toggle,
body .jl-header .jl-menu__toggle:focus,
body .jl-header .jl-menu__toggle:active {
    color: var(--jl-text-sub);
}

body .jl-header .jl-menu__toggle:hover,
body .jl-header .jl-menu.is-open .jl-menu__toggle {
    color: var(--jl-primary);
}

body .jl-footer a {
    color: var(--jl-footer-text);
    text-decoration: none;
}

body .jl-footer a:hover {
    color: #ffffff;
}

.jl-wrap--article {
    width: min(760px, calc(100% - 32px));
}

.jl-wrap--article .jl-article {
    max-width: none;
}

@media (max-width: 700px) {
    body .jl-page .jl-section__title {
        font-size: 23px;
    }
}