@charset "utf-8";
/*
|--------------------------------------------------------------------------
| WOOKLE RESPONSIVE (PC / TABLET) v1 - 2026-10-18
|--------------------------------------------------------------------------
| - 모바일(767px 이하)은 기존 화면을 그대로 유지합니다.
|   레이아웃 규칙은 모두 768px 이상 미디어쿼리 안에만 있습니다.
| - 페이지마다 인라인 <style>이 이 파일보다 뒤에 출력되므로
|   폭/위치처럼 반드시 적용돼야 하는 속성에만 !important를 사용합니다.
| - 색상은 우클 기존 팔레트(#fdc204 / #e9ae00 / #fff8d8)를 사용합니다.
|
| 구간
|   태블릿 : 768px ~ 1023px
|   PC     : 1024px 이상 (콘텐츠 최대 1152px)
|
| 목차
|   0. 디자인 값
|   1. 공통 래퍼 / 하단 내비게이션 / 맨위로 버튼
|   2. 홈
|   2-1. 홈 시안 v2 (마이스터 · 스포트라이트 · 온라인 학습)
|   3. 홈 검색 패널 (js/wookle-search-sheet.js)
|   4. 목록 (/classes/, /culture/)
|   5. 상세 (/classes/번호, /class/번호)
|   6. 게시판·서브 페이지 보조
|   7. 푸터
|--------------------------------------------------------------------------
*/

/* ======================================================================
   0. 디자인 값
   ====================================================================== */
:root {
    --wk-yellow: #fdc204;
    --wk-yellow-deep: #e9ae00;
    --wk-yellow-soft: #fff8d8;
    --wk-ink: #222;
    --wk-ink-3: #777;
    --wk-line: #ececec;
    --wk-bg: #ffffff; /* PC·태블릿 양옆 배경 (2026-10-18 흰색으로 변경) */
    --wk-media-bg: #f3f4f6;
    --wk-radius: 16px;
    --wk-gutter: 24px;
    --wk-wide: 1152px;
    --wk-narrow: 1152px; /* 2026-10-19: 서브페이지도 메인과 같은 1200px(1152 + 여백 48) */
    --wk-read: 820px;    /* 긴 글 본문 읽기 폭 (매거진·게시글 상세) */
    --wk-side: 360px;
}

/* 검색 패널 버튼은 768px 이상에서만 보입니다 */
.wk-search-trigger {
    display: none;
}

/* ======================================================================
   1. 공통 래퍼 / 하단 내비게이션 / 맨위로 버튼
   ====================================================================== */
@media (min-width: 768px) {

    /* 양옆 배경: 페이지별 인라인 스타일(html,body{background:#f4f4f4})보다
       우선하도록 :root 선택자 사용 */
    html:root,
    html:root body,
    html:root body.wookle-ui-body,
    html:root body .wookle-wrapper,
    html:root body .wookle-container-wr,
    html:root body #wrapper,
    html:root body #container_wr,
    html:root body #container,
    html:root body .wookle-sub-page {
        background: var(--wk-bg) !important;
    }

    /* 넓은 레이아웃: 홈 / 목록 / 상세 / 마이스터 / 찜 / 최근 본 */
    html body .wookle-app,
    html body .wookle-result-page,
    html body .wookle-meister-wrap,
    html body .wookle-like-page,
    html body .wookle-recent-page,
    html body .class-view-wrap {
        max-width: calc(var(--wk-wide) + var(--wk-gutter) * 2) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-left: 0 !important;
        border-right: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    /* 읽기 중심 레이아웃: 게시판 / 회원 / 고객센터 / 작성 폼 */
    html body .wookle-sub-page,
    html.wookle-ui-page body .wookle-sub-page,
    html.wookle-ui-page body #container {
        max-width: calc(var(--wk-narrow) + var(--wk-gutter) * 2) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-left: 0 !important;
        border-right: 0 !important;
        box-shadow: none !important;
    }

    /* 문화센터 상세를 감싸는 서브 페이지는 넓은 레이아웃 */
    html body .wookle-sub-page:has(.wookle-culture-view-page) {
        max-width: calc(var(--wk-wide) + var(--wk-gutter) * 2) !important;
    }

    /* 래퍼 안쪽의 430px 고정 폭 해제: 부모 폭을 따라감 */
    html body .wookle-main,
    html body .wookle-filter,
    html body .proud-banner,
    html body .proud-banner h2,
    html body .wookle-culture-page,
    html body .wookle-culture-view-page,
    html body .wookle-community-list,
    html body .wookle-community-detail,
    html body .wookle-board-list,
    html body .wookle-notice-page,
    html body .wookle-notice-view,
    html body .wookle-notice-write-wrap,
    html body .wookle-customer-page,
    html body .wookle-partner-page,
    html body .wookle-sp-partner,
    html body .wookle-write-wrap,
    html body .wookle-culture-write-page,
    html body .wookle-wait-page,
    html body .event-banner-list-wrap,
    html body .event-view-wrap,
    html body .event-write-wrap,
    html body .wmm-list,
    html body .mbskin,
    html body #bo_w,
    html body .wookle-result,
    html body .wookle-social-register,
    html body .wookle-community-wrap,
    html body .wookle-site-footer {
        max-width: none !important;
    }

    /* 하단 탭바 → 화면 아래 가운데에 떠 있는 둥근 내비게이션 */
    html body .wookle-bottom-nav {
        left: 50% !important;
        right: auto !important;
        bottom: 16px !important;
        transform: translateX(-50%) !important;
        width: 480px !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        border: 1px solid var(--wk-line) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10) !important;
        overflow: hidden;
    }

    body {
        padding-bottom: 96px !important;
    }

    /* 맨 위로 버튼: 화면 오른쪽 아래 */
    html body .wookle-top-btn,
    html body #topBtn.top-btn {
        left: auto !important;
        right: 24px !important;
        bottom: 96px !important;
        transform: none !important;
    }
}

/* ======================================================================
   2. 홈
   ====================================================================== */
@media (min-width: 768px) {

    /* 대표 제목(H1): 모바일은 sound_only로 숨김, 768px 이상은 노출 */
    html body .wookle-home-title.sound_only {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 10px 0 6px !important;
        padding: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal;
        color: var(--wk-ink);
    }

    .wookle-home-title-main {
        display: block;
        font-size: 30px;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -0.02em;
    }

    .wookle-home-title-sub {
        display: block;
        margin-top: 6px;
        color: var(--wk-ink-3);
        font-size: 15px;
        font-weight: 500;
    }

    html body .wookle-main-header {
        padding: 18px var(--wk-gutter) 10px !important;
    }

    /* 홈 본문: 12칸 그리드 */
    html body .wookle-main {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 8px;
        align-items: start;
        padding: 0 var(--wk-gutter) 24px !important;
    }

    html body .wookle-main > * {
        grid-column: 1 / -1;
        min-width: 0;
    }

    html body .wookle-main > section {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 지역·연령 선택: 한 줄 두 칸 (검색 패널이 꺼져 있을 때 대비) */
    html body .wookle-filter {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100% !important;
        margin: 4px 0 0 !important;
    }

    html body .wookle-filter .filter-open-btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 우리동네 클래스: 기본 12개 + 더보기 목록을 하나의 그리드로 연결 */
    html body .wookle-category {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        column-gap: 6px;
        row-gap: 18px;
    }

    html body .wookle-category > * {
        grid-column: 1 / -1;
    }

    html body .wookle-category > .category-grid,
    html body .wookle-category > .more-content.is-open,
    html body .wookle-category > .more-content.is-open > .category-grid {
        display: contents !important;
    }

    /* 마이스터고 + 스포트라이트 배너: 반반 */
    html body .wookle-main > .wookle-meister-main {
        grid-column: 1 / span 6;
        width: auto !important;
        margin: 0 !important;
    }

    html body .wookle-main > .proud-banner {
        grid-column: 7 / span 6;
        width: auto !important;
        margin: 0 !important;
    }

    /* 온라인 학습 브랜드: 3열 → 6열 */
    html body .brand-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    /* 인기 클래스: 한 페이지 4장을 한 줄로 */
    html body .wookle-popular .popular-page-view {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    html body .wookle-seo-region-hub {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 1024px) {

    /* 헤더 한 줄: 로고 | 검색 | 버튼 */
    html body .wookle-main-header {
        display: flex !important;
        align-items: center;
        gap: 28px;
        padding: 16px var(--wk-gutter) !important;
        border-bottom: 1px solid var(--wk-line);
    }

    html body .wookle-main-header-inner {
        display: contents !important;
    }

    html body .wookle-main-logo {
        order: 1;
    }

    html body .wookle-main-search-area {
        order: 2;
        flex: 1 1 auto;
        max-width: 620px;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    html body .wookle-main-header-actions {
        order: 3;
        flex: 0 0 auto;
    }

    html body .wookle-main {
        padding-top: 20px !important;
    }

    /* 카테고리 12열 (기본 12개가 한 줄) */
    html body .wookle-category {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
}

/* ======================================================================
   2-1. 홈 시안 v2 (2026-10-18): 마이스터 · 스포트라이트 · 온라인 학습
   - 마이스터: 베이지 배경 제거(흰색), 카드 3개를 우클 연노랑으로
   - 두 칸 제목줄 / 설명줄 / 박스 윗선·아랫선 정렬
   - 온라인 학습: 6열 2줄 + 마지막 칸 "우리 학원 등록하기"
   ====================================================================== */
@media (min-width: 768px) {

    /* --- 마이스터고 정보·소통 --- */
    html body .wookle-main > .wookle-meister-main {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    html body .wookle-meister-main-head {
        align-items: flex-end !important;
        height: 28px;
        margin: 0 0 8px !important;
    }

    html body .wookle-meister-main-title {
        font-size: 20px !important;
        font-weight: 800 !important;
        line-height: 28px !important;
        letter-spacing: -0.02em !important;
    }

    html body .wookle-meister-main-title em {
        color: var(--wk-yellow-deep) !important;
    }

    html body .wookle-meister-main-more {
        color: #888 !important;
        font-size: 13px !important;
        line-height: 28px !important;
    }

    html body .wookle-meister-main-more::after {
        content: " \203A";
    }

    html body .wookle-meister-main-box {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    html body .wookle-meister-main-copy {
        height: 18px;
        margin: 0 0 14px !important;
        overflow: hidden;
        color: #888 !important;
        font-size: 13px !important;
        line-height: 18px !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    html body .wookle-meister-main-grid {
        flex: 1 1 auto;
        gap: 12px !important;
    }

    html body .wookle-meister-main-card {
        position: relative;
        min-height: 150px !important;
        padding: 18px 18px 20px !important;
        border-radius: var(--wk-radius) !important;
        background: var(--wk-yellow-soft) !important;
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    html body .wookle-meister-main-card:hover,
    html body .wookle-meister-main-card:focus {
        background: #fff1bf !important;
    }

    html body .wookle-meister-main-card::after {
        content: "\203A";
        position: absolute;
        top: 16px;
        right: 16px;
        color: #c9a227;
        font-size: 20px;
        line-height: 1;
    }

    html body .wookle-meister-main-icon {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        background: #fff !important;
        color: var(--wk-yellow-deep) !important;
    }

    html body .wookle-meister-main-card strong {
        margin-top: auto;
        font-size: 17px !important;
        font-weight: 800 !important;
    }

    html body .wookle-meister-main-card small {
        margin-top: 6px !important;
        color: #7d6a20 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    /* --- 우클 스포트라이트: 제목줄·설명줄을 마이스터와 같은 규격으로 --- */
    html body .wookle-main > .proud-banner {
        display: flex !important;
        flex-direction: column;
        align-self: stretch;
        left: auto !important;
        width: auto !important;
        margin: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    html body .proud-banner > .banner-title-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "t a m" "d d d";
        align-items: end;
        column-gap: 12px;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .proud-banner .proud-banner-title {
        grid-area: t;
        height: 28px;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        line-height: 28px !important;
        letter-spacing: -0.02em;
    }

    html body .proud-banner .proud-banner-title .brand_cr {
        color: var(--wk-yellow-deep) !important;
    }

    html body .proud-banner .banner-title-actions {
        grid-area: a;
    }

    html body .proud-banner .banner-title-more[hidden] {
        grid-area: m;
        display: inline-block !important;
        color: #888;
        font-size: 13px;
        line-height: 28px;
        text-decoration: none;
    }

    html body .proud-banner .banner-title-more::after {
        content: " \203A";
    }

    html body .proud-banner .banner-title-desc[hidden] {
        grid-area: d;
        display: block !important;
        height: 18px;
        margin: 8px 0 14px;
        overflow: hidden;
        color: #888;
        font-size: 13px;
        line-height: 18px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* 배너는 원본 비율(430x200) 그대로: 글자가 들어간 배너가 잘리지 않게 */
    html body .proud-banner .proud-banner-viewport {
        border-radius: var(--wk-radius);
        overflow: hidden;
    }

    html body .proud-banner .proud-banner-slide img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 43 / 20;
        object-fit: cover;
    }

    /* --- 온라인 · 방문 학습 · 태블릿: 태블릿 4열 3줄 / PC 6열 2줄 --- */
    html body .wookle-main > .wookle-brand {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-top: 28px !important;
    }

    html body .wookle-brand > * {
        grid-column: 1 / -1;
    }

    html body .wookle-brand > h2 {
        margin: 0 0 2px !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em;
    }

    /* 기본 6개 + 더보기 목록을 하나의 그리드로 (PC/태블릿은 항상 전부 노출) */
    html body .wookle-brand > .brand-grid,
    html body .wookle-brand > #brandMore,
    html body .wookle-brand > #brandMore > .brand-grid {
        display: contents !important;
    }

    html body .wookle-brand > #brandMore {
        visibility: visible !important;
    }

    html body .wookle-brand > .button_more_right {
        display: none !important;
    }

    html body .wookle-brand .brand-grid > li {
        grid-column: auto;
        min-width: 0;
        margin: 0 !important;
        list-style: none;
    }

    html body .wookle-brand .brand-grid > li > a,
    html body .wookle-brand > .wookle-brand-cta {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: 64px !important;
        padding: 0 12px !important;
        overflow: hidden;
        border: 1px solid var(--wk-line) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: #333 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-decoration: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-shadow: none !important;
    }

    html body .wookle-brand .brand-grid > li > a:hover {
        border-color: #f0cf55 !important;
    }

    html body .wookle-brand .brand-grid > li > a img {
        max-width: 80%;
        max-height: 28px;
        object-fit: contain;
    }

    html body .wookle-brand > .wookle-brand-cta {
        grid-column: auto;
        border: 1.5px dashed #f0cf55 !important;
        background: #fffcf0 !important;
        color: #8a6d00 !important;
        font-size: 14px !important;
    }
}

@media (min-width: 1024px) {

    /* PC: 마이스터 7칸 + 스포트라이트 5칸 (배너를 원본 폭 430px에 가깝게) */
    html body .wookle-main > .wookle-meister-main {
        grid-column: 1 / span 7;
    }

    html body .wookle-main > .proud-banner {
        grid-column: 8 / span 5;
    }

    html body .wookle-main > .wookle-brand {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* 태블릿 전용: 마이스터 카드 글자 크기 조정 (카드 폭이 좁음) */
@media (min-width: 768px) and (max-width: 1023px) {

    html body .wookle-meister-main-card {
        padding: 14px 14px 16px !important;
    }

    html body .wookle-meister-main-icon {
        width: 38px !important;
        height: 38px !important;
    }

    html body .wookle-meister-main-card strong {
        font-size: 15px !important;
    }

    html body .wookle-meister-main-card small {
        font-size: 12px !important;
        word-break: keep-all;
    }
}

/* ======================================================================
   3. 홈 검색 패널 (js/wookle-search-sheet.js)
   ====================================================================== */
@media (min-width: 768px) {

    html body .wk-search-trigger {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 50px;
        padding: 0 8px 0 20px;
        border: 1.5px solid var(--wk-yellow);
        border-radius: 999px;
        background: #fff;
        color: #999;
        font-family: inherit;
        font-size: 15px;
        text-align: left;
        cursor: pointer;
        transition: box-shadow 0.2s ease;
    }

    html body .wk-search-trigger:hover,
    html body .wk-search-trigger:focus-visible {
        box-shadow: 0 4px 16px rgba(253, 194, 4, 0.28);
        outline: none;
    }

    html body .wk-search-trigger.has-keyword {
        color: var(--wk-ink);
    }

    html body .wk-search-trigger svg {
        flex: 0 0 auto;
        color: var(--wk-yellow-deep);
    }

    .wk-search-trigger-text {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .wk-search-trigger-meta {
        flex: 0 0 auto;
        padding: 7px 14px;
        border-radius: 999px;
        background: var(--wk-yellow-soft);
        color: #6b5a12;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* 패널 (지역 선택창 z-index 6000보다 아래) */
    .wk-search-sheet {
        position: fixed;
        inset: 0;
        z-index: 5000;
        display: none;
    }

    .wk-search-sheet.is-open {
        display: block;
    }

    .wk-search-dim {
        position: absolute;
        inset: 0;
        background: rgba(17, 17, 17, 0.42);
        animation: wkSheetFade 0.2s ease;
    }

    .wk-search-panel {
        position: absolute;
        top: 24px;
        left: 50%;
        width: min(760px, calc(100vw - 32px));
        max-height: calc(100vh - 48px);
        overflow: auto;
        transform: translateX(-50%);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
        animation: wkSheetDrop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .wk-search-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px 6px;
        background: #fff;
    }

    .wk-search-head strong {
        color: var(--wk-ink);
        font-size: 19px;
        font-weight: 800;
    }

    .wk-search-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        background: #f4f4f4;
        color: #333;
        cursor: pointer;
    }

    .wk-search-body {
        padding: 6px 24px 28px;
    }

    html body .wk-search-body #wookleMainSearchForm {
        position: relative;
        margin: 6px 0 4px;
    }

    html body .wk-search-body #wookleMainSearchForm input[type="search"] {
        box-sizing: border-box;
        width: 100%;
        height: 56px;
        padding: 0 56px 0 48px; /* 왼쪽 돋보기 아이콘 자리 */
        border: 2px solid var(--wk-yellow);
        border-radius: 16px;
        background: #fff;
        font-size: 16px;
    }

    .wk-search-label {
        margin: 22px 0 10px;
        color: var(--wk-ink);
        font-size: 14px;
        font-weight: 700;
    }

    html body .wk-search-body .wookle-filter {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .wk-search-body .wookle-category {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 패널 안에서는 섹션 제목 대신 패널 라벨 사용 */
    html body .wk-search-body .wookle-category > .category_wookle01 {
        display: none !important;
    }

    html.wk-sheet-open,
    html.wk-sheet-open body {
        overflow: hidden !important;
    }

    @keyframes wkSheetFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes wkSheetDrop {
        from { opacity: 0; transform: translate(-50%, -10px); }
        to { opacity: 1; transform: translate(-50%, 0); }
    }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {

    .wk-search-dim,
    .wk-search-panel {
        animation: none;
    }
}

/* ======================================================================
   4. 목록 (/classes/, /culture/)
   ====================================================================== */
@media (min-width: 768px) {

    html body .result-header,
    html body .category-tabs-wrap,
    html body .age-tabs-wrap,
    html body .result-summary {
        padding-left: var(--wk-gutter) !important;
        padding-right: var(--wk-gutter) !important;
    }

    /* 학원·클래스 목록: 2열 */
    html body main.class-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 20px;
        padding-left: var(--wk-gutter) !important;
        padding-right: var(--wk-gutter) !important;
    }

    html body main.class-list > .class-item {
        width: auto !important;
        margin: 0 !important;
    }

    /* 문화센터 목록: 2열 */
    html body .wookle-culture-content-card {
        max-width: none !important;
        margin-left: var(--wk-gutter) !important;
        margin-right: var(--wk-gutter) !important;
    }

    html body .wookle-culture-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    html body .wookle-culture-list > .wookle-culture-card {
        width: auto !important;
        margin: 0 !important;
    }

    html body .class-result-pagination-wrap,
    html body .wookle-culture-pagination {
        grid-column: 1 / -1;
    }
}

/* (2026-10-18) PC에서도 2열 유지 — 3열 규칙 삭제 */

/* ======================================================================
   5. 상세 (/classes/번호 문화센터, /class/번호 학원)
   ====================================================================== */
@media (min-width: 1024px) {

    /* --- 스크롤 고정(sticky) 살리기 ---
       기존 CSS의 overflow-x:hidden 때문에 본문 영역이 스크롤 박스가 되어
       오른쪽 요약이 고정되지 않았습니다. clip은 가로 넘침은 그대로 자르면서
       스크롤 박스를 만들지 않습니다. (clip 미지원 구형 브라우저는 기존처럼 동작) */
    html body:has(.wookle-culture-view-page, .class-view-wrap),
    html body .wookle-sub-page:has(.wookle-culture-view-page),
    html body .wookle-culture-view-page,
    html body #wrapper:has(.class-view-wrap),
    html body #container:has(.class-view-wrap),
    html body .class-view-wrap {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    /* --- 문화센터 상세: 왼쪽 본문 + 오른쪽 요약(스크롤 고정) --- */
    html body .wookle-culture-view-page {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--wk-side);
        column-gap: 40px;
        align-items: start;
        padding: 20px var(--wk-gutter) 120px !important;
    }

    html body .wookle-culture-view-page > * {
        grid-column: 1;
        min-width: 0;
    }

    html body .wookle-culture-view-page > .wookle-detail-breadcrumb {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body .wookle-culture-view-page > .wookle-view-hero {
        grid-row: 2;
        height: auto !important;
        max-height: 520px;
        aspect-ratio: 4 / 3 !important;
        border-radius: var(--wk-radius);
        background: var(--wk-media-bg) !important;
        overflow: hidden;
    }

    /* 롯데·현대 포스터처럼 글자가 들어간 이미지가 잘리지 않게 contain */
    html body .wookle-culture-view-page .wookle-view-thumb,
    html body .wookle-culture-view-page .wookle-view-thumb img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }

    html body .wookle-culture-view-page > .wookle-view-summary {
        grid-column: 2;
        grid-row: 2 / span 40;
        position: sticky;
        top: 24px;
        align-self: start;
        padding: 24px !important;
        border: 1px solid var(--wk-line);
        border-radius: var(--wk-radius);
        background: #fff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    }

    /* 신청 버튼 바: 오른쪽 요약 칸 아래에 떠 있게 */
    html body .wookle-fixed-action {
        left: auto !important;
        right: max(var(--wk-gutter), calc((100vw - var(--wk-wide)) / 2)) !important;
        bottom: 24px !important;
        transform: none !important;
        width: var(--wk-side) !important;
        max-width: var(--wk-side) !important;
        border: 1px solid var(--wk-line) !important;
        border-radius: var(--wk-radius) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10) !important;
    }

    /* --- 학원 상세: 같은 2단 구조 --- */
    html body .class-view-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--wk-side);
        column-gap: 40px;
        align-items: start;
        padding: 20px var(--wk-gutter) 120px !important;
    }

    html body .class-view-wrap > * {
        grid-column: 1;
        min-width: 0;
    }

    html body .class-view-wrap > .class-seo-breadcrumb {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body .class-view-wrap > .class-view-header {
        grid-row: 2;
        height: auto !important;
        max-height: 460px;
        aspect-ratio: 16 / 9;
        border-radius: var(--wk-radius);
        background: var(--wk-media-bg) !important;
        overflow: hidden;
    }

    html body .class-view-wrap > .class-view-header .thumb,
    html body .class-view-wrap > .class-view-header .thumb a,
    html body .class-view-wrap > .class-view-header .thumb img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }

    html body .class-view-wrap > .class-title-area {
        grid-column: 2;
        grid-row: 2 / span 40;
        position: sticky;
        top: 24px;
        align-self: start;
        padding: 24px !important;
        border: 1px solid var(--wk-line);
        border-radius: var(--wk-radius);
        background: #fff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    }

    html body .class-bottom-contact {
        left: auto !important;
        right: max(var(--wk-gutter), calc((100vw - var(--wk-wide)) / 2)) !important;
        bottom: 24px !important;
        transform: none !important;
        width: var(--wk-side) !important;
        max-width: var(--wk-side) !important;
        border: 1px solid var(--wk-line) !important;
        border-radius: var(--wk-radius) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10) !important;
    }

    html body .class-related-seo-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ======================================================================
   6. 게시판·서브 페이지 보조
   ====================================================================== */
@media (min-width: 768px) {

    /* 게시판 검색 버튼(떠 있는 돋보기): 읽기 폭 오른쪽 끝에 맞춤 */
    html body .wookle-search-toggle {
        left: auto !important;
        right: max(24px, calc((100vw - var(--wk-narrow)) / 2)) !important;
        transform: none !important;
    }
}

/* ======================================================================
   7. 푸터
   ====================================================================== */
@media (min-width: 768px) {

    html body .wookle-site-footer {
        padding-left: var(--wk-gutter) !important;
        padding-right: var(--wk-gutter) !important;
    }
}

@media (min-width: 1024px) {

    html body .wookle-site-footer {
        max-width: calc(var(--wk-wide) + var(--wk-gutter) * 2) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ======================================================================
   3-1. 지역 선택창 (PC/태블릿) — 시·도 | 시·군·구 | 동 3단 목록
   ----------------------------------------------------------------------
   - 가로 스크롤 탭을 세로 목록으로 바꿔 마우스 휠로 바로 스크롤됩니다.
   - 기존 버튼/스크립트(지역 선택·저장·초기화)는 그대로 사용합니다.
   - 767px 이하(모바일)는 기존 화면 그대로입니다.
   ====================================================================== */
@media (min-width: 768px) {

    html body #regionPanel .layer-dim {
        background: rgba(17, 17, 17, 0.45) !important;
    }

    html body #regionPanel .region-box {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        display: grid !important;
        grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 60px 38px minmax(0, 1fr);
        grid-template-areas:
            "head head head"
            "l1 l2 l3"
            "tabs left right";
        width: min(760px, calc(100vw - 48px)) !important;
        max-width: none !important;
        height: min(620px, calc(100vh - 80px)) !important;
        max-height: none !important;
        overflow: hidden !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18) !important;
    }

    /* 머리 */
    html body #regionPanel .region-head {
        grid-area: head;
        height: 60px !important;
        min-height: 60px !important;
        border-bottom: 1px solid var(--wk-line) !important;
    }

    html body #regionPanel .region-head .layer-close-btn {
        left: 10px !important;
        right: auto !important;
        width: 44px !important;
        height: 44px !important;
    }

    html body #regionPanel .region-head strong {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: var(--wk-ink) !important;
    }

    html body #regionPanel .region-head-actions .region-save-btn {
        height: 34px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        background: var(--wk-yellow) !important;
        color: #222 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    /* 열 제목 */
    html body #regionPanel .region-box::before,
    html body #regionPanel .region-box::after,
    html body #regionPanel .region-select-area::before {
        display: flex;
        align-items: center;
        padding: 0 18px;
        border-bottom: 1px solid var(--wk-line);
        background: #fafafa;
        color: #8a8a8a;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    html body #regionPanel .region-box::before {
        content: "시·도";
        grid-area: l1;
        border-right: 1px solid var(--wk-line);
    }

    html body #regionPanel .region-select-area::before {
        content: "시·군·구";
        grid-area: l2;
        border-right: 1px solid var(--wk-line);
    }

    html body #regionPanel .region-box::after {
        content: "읍·면·동";
        grid-area: l3;
    }

    /* 시·도: 가로 탭 → 세로 목록 */
    html body #regionPanel .region-tabs {
        grid-area: tabs;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 0 !important;
        border-right: 1px solid var(--wk-line) !important;
        background: #fafafa !important;
        cursor: auto !important;
        touch-action: pan-y !important;
        white-space: normal !important;
    }

    html body #regionPanel .region-tab {
        display: flex !important;
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 18px !important;
        border: 0 !important;
        background: transparent !important;
        color: #4a4a4a !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 40px !important;
        text-align: left !important;
    }

    html body #regionPanel .region-tab::after {
        display: none !important;
    }

    html body #regionPanel .region-tab:hover {
        background: #f1f1f1 !important;
    }

    html body #regionPanel .region-tab.active {
        position: relative;
        background: #fff !important;
        color: #222 !important;
        font-weight: 800 !important;
        box-shadow: inset 3px 0 0 var(--wk-yellow);
    }

    /* 시·군·구 / 동 목록 */
    html body #regionPanel .region-select-area {
        display: contents !important;
    }

    html body #regionPanel .region-list {
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }

    html body #regionPanel .region-list::-webkit-scrollbar {
        display: block !important;
        width: 6px !important;
    }

    html body #regionPanel .region-list::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: #e2e2e2;
    }

    html body #regionPanel .region-list-left {
        grid-area: left;
        border-right: 1px solid var(--wk-line) !important;
    }

    html body #regionPanel .region-list-right {
        grid-area: right;
    }

    html body #regionPanel .region-list button,
    html body #regionPanel .region-option,
    html body #regionPanel .dong-option {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 18px !important;
        background: #fff !important;
        color: #333 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 38px !important;
    }

    html body #regionPanel .region-option:hover,
    html body #regionPanel .dong-option:hover {
        background: #fffaf0 !important;
    }

    html body #regionPanel .region-option.active,
    html body #regionPanel .dong-option.active {
        background: var(--wk-yellow-soft) !important;
        color: #222 !important;
        font-weight: 800 !important;
    }

    html body #regionPanel .region-placeholder,
    html body #regionPanel .loading-text {
        margin: 0 !important;
        padding: 28px 18px !important;
        color: #a2a5aa !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    html body #regionPanel .region-apply-btn {
        display: none !important;
    }
}

/* ======================================================================
   3-2. 연령 선택창 (PC/태블릿)
   - 검색 패널(z-index 5000) 위로 올라오도록 지역 선택창과 같은 6000
   - 배경 흐림·카드 모양을 지역 선택창과 통일
   ====================================================================== */
@media (min-width: 768px) {

    html body #agePanel {
        z-index: 6000 !important;
    }

    html body #agePanel .layer-dim {
        background: rgba(17, 17, 17, 0.45) !important;
    }

    html body #agePanel .age-box {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(440px, calc(100vw - 48px)) !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100vh - 80px) !important;
        overflow: hidden auto !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18) !important;
    }

    html body #agePanel .age-head {
        height: 60px !important;
        min-height: 60px !important;
        border-bottom: 1px solid var(--wk-line) !important;
    }

    html body #agePanel .age-head strong {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: var(--wk-ink) !important;
    }

    html body #agePanel .age-head .layer-close-btn {
        left: 10px !important;
        right: auto !important;
        width: 44px !important;
        height: 44px !important;
    }

    html body #agePanel .age-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        margin: 0 !important;
        padding: 18px !important;
        list-style: none !important;
    }

    html body #agePanel .age-list li {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html body #agePanel .age-option {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 12px !important;
        border: 1px solid var(--wk-line) !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: #333 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    html body #agePanel .age-option:hover {
        border-color: #f0cf55 !important;
        background: #fffcf0 !important;
    }

    html body #agePanel .age-option.active {
        border-color: var(--wk-yellow) !important;
        background: var(--wk-yellow-soft) !important;
        color: #222 !important;
        font-weight: 800 !important;
    }
}


/* ======================================================================
   2026-10-18: 이벤트 + 인기 클래스 가로 2단 배치
   - 기존 각 섹션의 PHP/슬라이드/탭/AJAX 코드는 유지합니다.
   - 모바일(767px 이하)은 이벤트 위, 인기 클래스 아래 기존 순서입니다.
   ====================================================================== */
@media (min-width: 768px) {
    html body .wookle-main > .wookle-home-feature-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
        gap: 20px;
        width: 100%;
        min-width: 0;
        margin-top: 24px;
    }

    html body .wookle-home-feature-row > .event-banner,
    html body .wookle-home-feature-row > .wookle-popular {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: hidden;
    }

    /* 스포트라이트 섹션과 동일하게 제목/보조설명 레이아웃 정렬 */
    html body .wookle-home-feature-row .event-banner > .banner-title-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "title action" "desc desc";
        align-items: end;
        gap: 0 10px;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body .wookle-home-feature-row .event-banner .event-banner-title {
        grid-area: title;
        width: auto;
        max-width: none !important;
        height: 28px;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        line-height: 28px;
    }
    html body .wookle-home-feature-row .event-banner .banner-title-actions {
        grid-area: action;
    }
    html body .wookle-home-feature-row .event-banner .banner-title-desc[hidden] {
        grid-area: desc;
        display: block !important;
        height: 18px;
        margin: 8px 0 14px;
        overflow: hidden;
        color: #888;
        font-size: 13px;
        line-height: 18px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    html body .wookle-home-feature-row .event-banner .event-banner-viewport {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
    }
    html body .wookle-home-feature-row .event-banner .event-banner-slide {
        width: 100%;
        aspect-ratio: 430 / 300;
    }

    /* 오른쪽: 인기 탭/카드의 기존 동작은 유지하고 폭만 줄입니다. */
    html body .wookle-home-feature-row .wookle-popular .popular-title-row {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
    }
    html body .wookle-home-feature-row .wookle-popular .popular-title-row h2 {
        font-size: 20px !important;
        line-height: 1.3;
        letter-spacing: -0.02em;
        word-break: keep-all;
    }
    html body .wookle-home-feature-row .wookle-popular .popular-tabs {
        gap: 12px;
        margin-bottom: 16px;
    }
    html body .wookle-home-feature-row .wookle-popular .popular-tabs button {
        font-size: 13px;
    }
    html body .wookle-home-feature-row .wookle-popular .popular-page-view {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px 10px;
    }
    html body .wookle-home-feature-row .wookle-popular .class-card {
        min-width: 0;
    }
    html body .wookle-home-feature-row .wookle-popular .class-card h3 {
        font-size: 13px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* 태블릿에서는 카드 가독성을 위해 2열 2행으로 전환합니다. */
    html body .wookle-home-feature-row .wookle-popular .popular-page-view {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ======================================================================
   8. 2026-10-18 3차: 나머지 페이지 반응형 + 푸터 전체 폭 라인
   ----------------------------------------------------------------------
   - 찜 / 마이페이지 / 내 강좌 / 내 활동 / 내 커뮤니티 / 회사소개 /
     개인정보·약관 / 입점 안내 / 로그인·회원 화면
   - 모두 768px 이상에서만 적용 (모바일은 기존 화면 그대로)
   ====================================================================== */
@media (min-width: 768px) {

    /* 찜 페이지 바깥 회색 배경 → 흰색 */
    html:root body .wookle-like-wrap {
        background: var(--wk-bg) !important;
    }

    /* 회원·내 정보·안내 페이지 (2026-10-19 메인과 같은 1200px) */
    html body .wookle-mypage,
    html body .wookle-my-classes,
    html body .wookle-my-activity,
    html body .wookle-mc,
    html body .wookle-company,
    html body .wookle-legal-page,
    html body .wookle-partner-guide,
    html body .wookle-customer-page {
        width: 100% !important;
        max-width: calc(var(--wk-narrow) + var(--wk-gutter) * 2) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--wk-gutter) !important;
        padding-right: var(--wk-gutter) !important;
        box-sizing: border-box !important;
    }

    /* 찜 목록: 2열 카드 */
    html body .wookle-like-page .like-header-inner,
    html body .wookle-like-page .like-summary {
        padding-left: var(--wk-gutter) !important;
        padding-right: var(--wk-gutter) !important;
    }

    html body .wookle-like-page .like-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        padding: 0 var(--wk-gutter) !important;
    }

    html body .wookle-like-page .like-item {
        min-width: 0;
    }

    html body .wookle-like-page .like-empty {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    /* 로그인·회원 화면: 가운데 카드 */
    html body .wookle-login-page {
        display: flex !important;
        align-items: flex-start;
        justify-content: center;
        min-height: calc(100vh - 40px);
        padding: 64px var(--wk-gutter) 120px !important;
        background: #fff !important;
        box-sizing: border-box;
    }

    html body .wookle-login-inner {
        width: 100% !important;
        max-width: 440px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 40px 36px 36px !important;
        border: 1px solid var(--wk-line) !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box;
    }

    /* 푸터: 위 경계선을 화면 끝까지 (wookle.footer.php의 스크립트가
       768px 이상에서 푸터를 본문 밖 body 바로 아래로 옮깁니다) */
    html body > .wookle-site-footer {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: max(var(--wk-gutter), calc((100% - var(--wk-wide)) / 2)) !important;
        padding-right: max(var(--wk-gutter), calc((100% - var(--wk-wide)) / 2)) !important;
        border-top: 1px solid #eceef1 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
}

/* (2026-10-19) 찜 목록 PC 3열 → 2열: 25번 섹션에서 클래스 목록과 통일 */


/* ======================================================================
   9. 검색창 - 모바일(767px 이하) 전체 화면 / 연령창 층 순서
   ----------------------------------------------------------------------
   - 다른 페이지의 돋보기(/#search)를 누르면 열리는 전체 화면 검색창
   - 평소 모바일 홈 화면에는 영향이 없습니다 (.is-open일 때만 표시)
   ====================================================================== */

/* 연령 선택창도 검색창(5000) 위로 - 모든 화면 크기 */
html body #agePanel {
    z-index: 6000 !important;
}

@media (max-width: 767px) {

    .wk-search-sheet {
        position: fixed;
        inset: 0;
        z-index: 5000;
        display: none;
    }

    .wk-search-sheet.is-open {
        display: block;
    }

    .wk-search-dim {
        position: absolute;
        inset: 0;
        background: rgba(17, 17, 17, 0.42);
    }

    .wk-search-panel {
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        width: 100%;
        max-width: 430px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(-50%);
        background: #fff;
        animation: wkSheetUp 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .wk-search-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 8px 0 16px;
        border-bottom: 1px solid #f1f1f1;
        background: #fff;
    }

    .wk-search-head strong {
        color: #222;
        font-size: 17px;
        font-weight: 800;
    }

    .wk-search-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #333;
        cursor: pointer;
    }

    .wk-search-body {
        padding: 16px 16px calc(32px + env(safe-area-inset-bottom));
    }

    html body .wk-search-body #wookleMainSearchForm {
        position: relative;
        width: 100% !important;
        margin: 0 !important;
    }

    html body .wk-search-body #wookleMainSearchForm input[type="search"] {
        box-sizing: border-box;
        width: 100% !important;
        height: 50px !important;
        border: 2px solid #fdc204 !important;
        border-radius: 14px !important;
        background: #fff !important;
        padding: 0 14px 0 46px !important;
        line-height: 46px !important;
        font-size: 16px !important; /* iOS 확대 방지 */
    }

    html body .wk-search-body #wookleMainSearchForm::before {
        left: 14px !important;
    }

    .wk-search-label {
        margin: 22px 0 10px;
        color: #222;
        font-size: 14px;
        font-weight: 800;
    }

    html body .wk-search-body .wookle-filter {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .wk-search-body .wookle-category {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 패널 안에서는 섹션 제목 대신 패널 라벨 사용 */
    html body .wk-search-body .wookle-category > .category_wookle01 {
        display: none !important;
    }

    html.wk-sheet-open,
    html.wk-sheet-open body {
        overflow: hidden !important;
    }

    @keyframes wkSheetUp {
        from { opacity: 0; transform: translate(-50%, 16px); }
        to { opacity: 1; transform: translate(-50%, 0); }
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .wk-search-panel {
        animation: none;
    }
}


/* ======================================================================
   10. 우클 문의함 (/inquiry/ 목록, /inquiry/room/번호 대화방)
   - 768px 이상에서만 적용 (모바일은 기존 화면 그대로)
   ====================================================================== */
@media (min-width: 768px) {

    /* 바깥 회색 → 흰색 */
    html body .wookle-sub-page:has(.wookle-inquiry-list-page),
    html body .wookle-sub-page:has(.wookle-inquiry-room) {
        background: #fff !important;
    }

    /* 목록: 본문 폭 1200px(메인과 동일), 카드 2열 */
    html body .wookle-inquiry-list-page {
        max-width: calc(var(--wk-narrow) + var(--wk-gutter) * 2) !important;
        min-height: 0 !important;
        padding: 24px var(--wk-gutter) 140px !important;
        background: #fff !important;
        box-sizing: border-box;
    }

    html body .wookle-inquiry-list-summary {
        margin-bottom: 18px !important;
    }

    html body .wookle-inquiry-list-summary strong {
        font-size: 22px !important;
        font-weight: 800;
    }

    html body .wookle-inquiry-tabs {
        max-width: 420px;
        margin-bottom: 22px !important;
    }

    html body .wookle-inquiry-room-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px !important;
    }

    html body .wookle-inquiry-room-card {
        height: 100%;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    html body .wookle-inquiry-room-card:hover {
        border-color: #f0cf55 !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    }

    html body .wookle-inquiry-pagination,
    html body .wookle-inquiry-empty-list {
        grid-column: 1 / -1;
    }

    /* 대화방: 가운데 760px 채팅 카드 */
    html body .wookle-inquiry-room {
        max-width: 760px !important;
        min-height: calc(100vh - 140px) !important;
        margin: 16px auto 0 !important;
        padding-bottom: 190px !important;
        border: 1px solid var(--wk-line);
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
        overflow: clip;
    }

    html body .wookle-inquiry-room-head {
        padding: 22px 24px 18px !important;
    }

    html body .wookle-inquiry-room-head h1 {
        font-size: 21px !important;
    }

    html body .wookle-inquiry-message-list {
        padding: 24px 24px 30px !important;
    }

    html body .wookle-inquiry-message-bubble {
        max-width: min(440px, 60vw) !important;
    }

    html body .wookle-inquiry-message.is-mine .wookle-inquiry-message-bubble {
        max-width: min(480px, 64vw) !important;
    }

    /* 입력창: 채팅 카드와 같은 폭으로, 하단 내비게이션 위에 고정 */
    html body .wookle-inquiry-compose {
        left: 50% !important;
        right: auto !important;
        bottom: 88px !important;
        width: min(760px, calc(100vw - 48px)) !important;
        max-width: none !important;
        padding: 12px 14px !important;
        transform: translateX(-50%);
        border: 1px solid var(--wk-line) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
    }
}

@media (min-width: 1024px) {
    html body .wookle-inquiry-room-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ======================================================================
   11. PC/태블릿 상단 고정 (서브 헤더 / 목록 헤더+카테고리)
   ----------------------------------------------------------------------
   - 기존 CSS의 overflow-x:hidden 때문에 sticky가 동작하지 않던 문제를
     overflow-x:clip으로 바꿔 해결 (가로 넘침은 그대로 잘림)
   - 목록 페이지: 헤더 → 카테고리 탭 → 세부 카테고리 선택까지 고정
     (높이 값은 wookle.result.header.php 하단 스크립트가 맞춤)
   ====================================================================== */
@media (min-width: 768px) {

    html:root body,
    html body #wrapper,
    html body #container,
    html body .wookle-wrapper,
    html body .wookle-container-wr,
    html body .wookle-container,
    html body .wookle-sub-page,
    html body .wookle-result-page,
    html body .wookle-like-wrap,
    html body .wookle-like-page {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    html body .wookle-sub-header,
    html body .like-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
        background: #fff !important;
    }

    html body .result-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
        background: #fff !important;
    }

    html body .category-tabs-wrap {
        position: sticky !important;
        top: var(--wk-rh1, 52px) !important;
        z-index: 899 !important;
        background: #fff !important;
    }

    html body .subcategory-tabs-wrap {
        position: sticky !important;
        top: var(--wk-rh2, 96px) !important;
        z-index: 898 !important;
        background: #fff !important;
    }

    /* 문의 대화방 제목 영역은 서브 헤더 아래에서 함께 스크롤 */
    html body .wookle-inquiry-room-head {
        position: static !important;
    }
}


/* ======================================================================
   12. 상세 페이지 상단 헤더 + 모든 페이지 헤더 하단 라인 통일 (PC/태블릿)
   ----------------------------------------------------------------------
   - 학원 상세(/class/번호): PC 전용 헤더(.wk-detail-topbar) 표시
   - 문화센터 상세(/classes/번호): 모바일에서 숨겨둔 서브 헤더를 PC에서 표시
   - 헤더 아래 경계선을 콘텐츠 폭이 아니라 화면 끝까지 그립니다.
     (선 위치 --wk-hdr-h 는 각 헤더 파일의 스크립트가 실제 높이로 맞춤)
   ====================================================================== */
@media (min-width: 768px) {

    /* 학원 상세 PC 헤더 */
    html body .wk-detail-topbar[hidden] {
        display: block !important;
    }

    html body .wk-detail-topbar {
        position: sticky;
        top: 0;
        z-index: 900;
        width: 100%;
        max-width: calc(var(--wk-wide) + var(--wk-gutter) * 2);
        margin: 0 auto;
        background: #fff;
        box-sizing: border-box;
    }

    html body .wk-detail-topbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 calc(var(--wk-gutter) - 8px);
    }

    html body .wk-detail-topbar-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        color: #111;
        font-size: 17px;
        font-weight: 800;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    html body .wk-detail-topbar-btn {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: #222;
    }

    /* PC 헤더에 뒤로가기가 있으므로 사진 위 '뒤로' 버튼은 숨김 (공유·찜은 유지) */
    html body .class-view-wrap .class-back,
    html body .wookle-culture-view-page .wookle-view-back {
        display: none !important;
    }

    /* 문화센터 상세: 서브 헤더 표시 */
    html body .wookle-sub-page:has(.wookle-culture-view-page) > .wookle-sub-header {
        display: block !important;
    }

    /* 헤더 하단 라인: 화면 끝까지 (헤더가 있는 페이지에만) */
    html body:has(.wk-detail-topbar) {
        --wk-hdr-h: 52px;
    }

    html body:has(.like-header) {
        --wk-hdr-h: 50px;
    }

    html body:has(.wookle-sub-header, .result-header, .wk-detail-topbar, .like-header)::after {
        content: "";
        position: fixed;
        top: calc(var(--wk-hdr-h, 52px) - 1px);
        left: 0;
        right: 0;
        z-index: 950;
        height: 1px;
        background: #ececec;
        pointer-events: none;
    }

    /* 상세 오른쪽 요약 카드: 고정 헤더 아래에 붙도록 */
    html body .class-view-wrap > .class-title-area,
    html body .wookle-culture-view-page > .wookle-view-summary {
        top: calc(var(--wk-hdr-h, 52px) + 20px) !important;
    }

    /* 헤더 자체의 콘텐츠 폭 라인은 위 전체 폭 라인과 겹치므로 정리 */
    html body .wookle-sub-header,
    html body .result-header,
    html body .like-header {
        border-bottom-color: #ececec !important;
    }
}


/* ======================================================================
   13. 상단 헤더 줄 전체 폭 흰 배경 (PC/태블릿)
   - 페이지 배경이 종이색·회색인 곳(예: 마이스터고 매거진 글 보기)에서도
     상단 헤더 줄만 화면 끝까지 흰색으로 보이게 합니다.
   - 본문 배경색은 각 페이지 원래 색 그대로입니다.
   - 높이 --wk-hdr-h 는 각 헤더 스크립트가 실제 높이로 맞춤
   ====================================================================== */
@media (min-width: 768px) {
    html body:has(.wookle-sub-header, .result-header, .wk-detail-topbar, .like-header)::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 880;
        height: var(--wk-hdr-h, 52px);
        background: #fff;
        pointer-events: none;
    }
}


/* ======================================================================
   14. 모바일 홈 검색 버튼 (PC/태블릿과 같은 모양)
   - 지역·연령·카테고리는 검색창(전체 화면) 안으로 이동
   ====================================================================== */
@media (max-width: 767px) {

    html body .wk-search-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 46px;
        margin: 6px 0 10px;
        padding: 0 6px 0 16px;
        border: 1.5px solid #fdc204;
        border-radius: 999px;
        background: #fff;
        color: #999;
        font-family: inherit;
        font-size: 15px;
        text-align: left;
        cursor: pointer;
        box-sizing: border-box;
    }

    html body .wk-search-trigger.has-keyword {
        color: #222;
    }

    html body .wk-search-trigger svg {
        flex: 0 0 auto;
        color: #e9ae00;
    }

    html body .wk-search-trigger .wk-search-trigger-text {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    html body .wk-search-trigger .wk-search-trigger-meta {
        flex: 0 0 auto;
        max-width: 48%;
        overflow: hidden;
        padding: 7px 11px;
        border-radius: 999px;
        background: #fff8d8;
        color: #6b5a12;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}


/* ======================================================================
   15. 클래스·문화센터 목록 카드형 2열 + 배경 #fdfdfd (PC/태블릿)
   - /classes/…, /culture/ 목록: 흰 카드(테두리·둥근 모서리)를 2열로
   - 페이지 배경과 푸터 배경 #fdfdfd (상단 헤더 줄은 흰색 유지)
   ====================================================================== */
@media (min-width: 768px) {

    html:root:has(main.class-list, .wookle-culture-list) {
        --wk-bg: #fdfdfd;
    }

    html body .wookle-result-page:has(main.class-list),
    html body .wookle-culture-page,
    html body .wookle-culture-content-card {
        background: #fdfdfd !important;
    }

    html body main.class-list,
    html body .wookle-culture-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        border: 0 !important;
    }

    html body main.class-list > .class-item,
    html body .wookle-culture-list > .wookle-culture-card {
        box-sizing: border-box;
        padding: 16px !important;
        border: 1px solid #ececec !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    html body main.class-list > .class-item:hover,
    html body .wookle-culture-list > .wookle-culture-card:hover {
        border-color: #f0cf55 !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    }

    html body .wookle-site-footer,
    html body > .wookle-site-footer {
        background: #fdfdfd !important;
    }
}


/* ======================================================================
   16. 상세 페이지 정리
   - 학원 상세 PC 헤더(.wk-detail-topbar)는 모바일에서 절대 표시 안 함
   - 상세 경로(홈 › 문화센터 › …)와 사진 사이 여백
   ====================================================================== */
@media (max-width: 767px) {
    html body .wk-detail-topbar {
        display: none !important;
    }
}

@media (min-width: 768px) {
    html body .wookle-culture-view-page > .wookle-detail-breadcrumb,
    html body .class-view-wrap > .class-seo-breadcrumb {
        margin: 6px 0 16px !important;
    }
}


/* ======================================================================
   17. 클래스·문화센터 목록 UI 통일 (모바일 + PC/태블릿 공통)
   - 페이지 바탕 #fdfdfd (양옆과 같은 색) / 카드만 흰색 + 테두리 + 둥근 모서리
   - 목록 안의 흰 띠(요약줄·정렬줄·목록·페이지 번호 영역) 제거
   - 문화센터 찜 하트를 클래스 목록과 같은 모양으로
   - 상단 헤더·카테고리 탭은 흰색 그대로
   ====================================================================== */
html body .wookle-result-page:has(main.class-list, .wookle-culture-list),
html body .wookle-result-page:has(main.class-list, .wookle-culture-list) .wookle-culture-page,
html body .wookle-culture-content-card,
html body .wookle-culture-category-showcase,
html body .wookle-culture-summary,
html body .wookle-culture-result-head,
html body .wookle-culture-list,
html body .wookle-culture-pagination,
html body .wookle-result-page:has(main.class-list) .result-summary,
html body .wookle-result-page:has(main.class-list) main.class-list,
html body .class-result-pagination-wrap {
    background: #fdfdfd !important;
}

html body .wookle-culture-pagination,
html body .wookle-culture-content-card {
    border: 0 !important;
    box-shadow: none !important;
}

/* 카드 */
html body main.class-list > .class-item,
html body .wookle-culture-list > .wookle-culture-card {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #ececec !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* 찜 하트: 문화센터를 클래스 목록과 동일하게 */
html body .wookle-culture-like-btn {
    width: 36px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .wookle-culture-like-btn:not(.is-liked) {
    color: #555 !important;
}

html body .wookle-culture-like-btn svg {
    width: 23px !important;
    height: 20px !important;
}

html body .wookle-culture-like-btn path {
    stroke-width: 1.7 !important;
}

/* 모바일: 1열 카드 */
@media (max-width: 767px) {

    html body main.class-list,
    html body .wookle-culture-list {
        display: flex !important;
        flex-direction: column;
        gap: 10px !important;
        padding: 10px 14px 24px !important;
        border: 0 !important;
    }

    html body main.class-list > .class-item,
    html body .wookle-culture-list > .wookle-culture-card {
        margin: 0 !important;
        padding: 14px !important;
    }

    html body main.class-list > .class-item .class-like {
        top: 12px !important;
        right: 8px !important;
    }

    html body .wookle-culture-like-btn {
        top: 12px !important;
        right: 8px !important;
    }
}

/* PC/태블릿: 하트 위치를 클래스 카드와 같게 */
@media (min-width: 768px) {
    html body .wookle-culture-like-btn {
        top: 14px !important;
        right: 10px !important;
    }

    html body main.class-list > .class-item .class-like {
        top: 14px !important;
        right: 10px !important;
    }
}

/* 17-1. 썸네일·제목 크기 통일 (클래스 = 문화센터, 모든 화면) */
html body main.class-list > .class-item .class-thumb {
    flex: 0 0 112px !important;
    width: 112px !important;
    height: 84px !important;
    border-radius: 10px !important;
    overflow: hidden;
}

html body .wookle-culture-card .wookle-culture-card-link {
    grid-template-columns: 112px minmax(0, 1fr) !important;
}

html body .wookle-culture-card .wookle-culture-thumb {
    width: 112px !important;
    height: 84px !important;
    border-radius: 10px !important;
    overflow: hidden;
}

html body main.class-list > .class-item .class-thumb img,
html body .wookle-culture-card .wookle-culture-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

html body main.class-list > .class-item .class-name,
html body .wookle-culture-card .wookle-culture-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* 제목이 하트와 겹치지 않게 */
html body main.class-list > .class-item .class-info,
html body .wookle-culture-card .wookle-culture-card-body {
    padding-right: 30px !important;
    min-width: 0;
}


/* ======================================================================
   18. 클래스·문화센터 목록 상단까지 배경 통일 (#fdfdfd, 모든 화면)
   - 헤더 · 카테고리 탭 · 세부 카테고리 · 연령 탭 · 강좌/클래스 등록 줄
   - PC/태블릿 상단 고정 띠(body::before)도 같은 색
   ====================================================================== */
html body .wookle-result-page:has(main.class-list, .wookle-culture-list) .result-header,
html body .wookle-result-page:has(main.class-list, .wookle-culture-list) .category-tabs-wrap,
html body .wookle-result-page:has(main.class-list, .wookle-culture-list) .category-tabs,
html body .wookle-result-page:has(main.class-list, .wookle-culture-list) .subcategory-tabs-wrap,
html body .wookle-result-page:has(main.class-list, .wookle-culture-list) .age-tabs-wrap,
html body .wookle-result-page:has(main.class-list, .wookle-culture-list) .age-tabs,
html body .wookle-culture-write-link-wrap,
html body .class-register-bar {
    background: #fdfdfd !important;
}

@media (min-width: 768px) {
    html body:has(main.class-list, .wookle-culture-list)::before {
        background: #fdfdfd !important;
    }
}


/* ======================================================================
   19. 푸터 아래 빈 공간 제거 (PC/태블릿)
   - 떠 있는 하단 메뉴에 가리지 않도록 body에 주던 아래 여백(96px)을
     푸터 안쪽 여백으로 옮깁니다. → 푸터 색이 화면 맨 아래까지 이어짐
   - 푸터가 없는 페이지는 기존처럼 body 여백 유지
   ====================================================================== */
@media (min-width: 768px) {
    html body:has(.wookle-site-footer) {
        padding-bottom: 0 !important;
    }

    html body .wookle-site-footer {
        padding-bottom: 124px !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   20. 홈 "온라인 · 방문 학습 · 태블릿" 섹션 박스 (PC/태블릿) - 2026-10-18
   - 배경 #f8f7f4 + 라운드 + 안쪽 여백. 제목도 박스 안으로.
   ========================================================================== */
@media (min-width: 768px) {
    html body .wookle-main > .wookle-brand {
        padding: 24px 24px 24px !important;
        border-radius: 20px !important;
        background: #f8f7f4 !important;
        box-shadow: none !important;
        overflow: hidden;
    }

    html body .wookle-brand > h2 {
        margin: 0 0 6px !important;
        padding: 0 !important;
    }
}

@media (min-width: 1024px) {
    html body .wookle-main > .wookle-brand {
        padding: 28px 28px 28px !important;
    }
}

/* ==========================================================================
   21. 홈 "마이스터고 정보·소통" 이미지 카드 (PC/태블릿) - 2026-10-18
   - 카드 상단 일러스트 + 겹친 아이콘 칩 + 하단 제목/설명
   - 일러스트: /theme/basic/img/meister/meister-*.svg
   ========================================================================== */
@media (min-width: 768px) {
    html body .wookle-meister-main-card.has-art {
        padding: 0 0 18px !important;
        overflow: hidden;
        border: 1px solid #ece7dc !important;
        background: #fff !important;
    }

    html body .wookle-meister-main-card.has-art:hover,
    html body .wookle-meister-main-card.has-art:focus {
        border-color: #f0cf55 !important;
        background: #fff !important;
    }

    html body .wookle-meister-main-card.has-art::after {
        display: none;
    }

    html body .wookle-meister-main-card.has-art .wookle-meister-main-art {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 96px;
        margin: 0;
    }

    html body .wookle-meister-main-card.has-art .wookle-meister-main-icon {
        position: relative;
        z-index: 1;
        display: flex !important;
        flex: none;
        width: 42px !important;
        height: 42px !important;
        margin: -21px 0 10px 16px !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
        color: var(--wk-yellow-deep) !important;
    }

    html body .wookle-meister-main-card.has-art strong,
    html body .wookle-meister-main-card.has-art small {
        padding: 0 16px;
    }

    html body .wookle-meister-main-card.has-art strong {
        margin-top: 0 !important;
        font-size: 16px !important;
    }

    html body .wookle-meister-main-card.has-art small {
        overflow: hidden;
        max-width: 100%;
        color: #888 !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    html body .wookle-meister-main-card.has-art {
        padding: 0 0 14px !important;
    }

    html body .wookle-meister-main-card.has-art strong,
    html body .wookle-meister-main-card.has-art small {
        padding: 0 12px;
    }

    html body .wookle-meister-main-card.has-art .wookle-meister-main-icon {
        width: 36px !important;
        height: 36px !important;
        margin: -18px 0 8px 12px !important;
    }
}

/* ==========================================================================
   22. 우클 스포트라이트 (목록 / 상세) PC·태블릿 반응형 - 2026-10-19
   - 스킨: /theme/basic/skin/board/wookle_spotlight/style.css (430px 고정) 위에 덮어씀
   - 모바일(767px 이하)은 기존 그대로
   ========================================================================== */
@media (min-width: 768px) {

    /* --- 공통 폭 --- */
    html body .wookle-spotlight-page,
    html body .wookle-spotlight-view {
        max-width: calc(var(--wk-wide) + var(--wk-gutter) * 2) !important;
        padding-bottom: 56px !important;
        background: transparent !important;
    }

    html body .wookle-spotlight-page {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* --- 목록: 머리 --- */
    html body .wookle-spotlight-head {
        padding: 44px 0 28px !important;
    }

    html body .wookle-spotlight-head h1 {
        font-size: 34px !important;
        line-height: 1.28 !important;
    }

    html body .wookle-spotlight-head p {
        margin-top: 12px !important;
        font-size: 15px !important;
    }

    /* --- 목록: 지역 필터 --- */
    html body .wookle-spotlight-filter {
        max-width: 520px;
        gap: 10px !important;
        padding: 24px 0 10px !important;
    }

    html body .wookle-spotlight-filter select {
        height: 48px !important;
        font-size: 14px !important;
    }

    html body .wookle-spotlight-result-meta {
        padding: 16px 2px 14px !important;
        font-size: 12px !important;
    }

    html body .wookle-spotlight-result-meta strong {
        font-size: 14px !important;
    }

    /* --- 목록: 카드 그리드 (태블릿 3열) --- */
    html body .wookle-spotlight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 32px 18px !important;
    }

    html body .wookle-spotlight-card-link:hover .wookle-spotlight-card-thumb img {
        transform: scale(1.03) !important;
    }

    html body .wookle-spotlight-card-thumb img {
        transition: transform .25s ease;
    }

    html body .wookle-spotlight-ad-badge {
        left: 10px !important;
        top: 10px !important;
        height: 23px !important;
        font-size: 10px !important;
    }

    html body .wookle-spotlight-card-body {
        padding: 12px 2px 0 !important;
    }

    html body .wookle-spotlight-card-category {
        font-size: 11px !important;
    }

    html body .wookle-spotlight-card h2 {
        font-size: 16px !important;
    }

    html body .wookle-spotlight-card-academy {
        margin-top: 8px !important;
        font-size: 13px !important;
    }

    html body .wookle-spotlight-card-region {
        font-size: 12px !important;
    }

    html body .wookle-spotlight-more {
        max-width: 360px;
        margin: 36px auto 0 !important;
    }

    html body .wookle-spotlight-empty {
        padding: 64px 24px !important;
    }

    html body .wookle-spotlight-apply-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 44px !important;
        padding: 28px 32px !important;
        text-align: left !important;
    }

    html body .wookle-spotlight-apply-cta p {
        margin: 6px 0 0 !important;
        font-size: 13px !important;
    }

    html body .wookle-spotlight-apply-cta a {
        flex: none;
        min-height: 46px !important;
        padding: 0 22px !important;
        font-size: 14px !important;
    }

    /* --- 상세: 태블릿은 640px 한 단 --- */
    html body .wookle-spotlight-view {
        max-width: 640px !important;
        padding-top: 8px !important;
    }

    html body .wookle-spotlight-view-hero {
        padding: 32px 0 24px !important;
    }

    html body .wookle-spotlight-view-hero h1 {
        font-size: 30px !important;
    }

    html body .wookle-spotlight-view-summary {
        font-size: 15px !important;
    }

    html body .wookle-spotlight-view-meta span {
        min-height: 29px !important;
        padding: 0 11px !important;
        font-size: 11px !important;
    }

    html body .wookle-spotlight-hero-image {
        border-radius: 20px;
    }

    html body .wookle-spotlight-keyword,
    html body .wookle-spotlight-proof,
    html body .wookle-spotlight-class-box {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body .wookle-spotlight-keyword strong {
        font-size: 20px !important;
    }

    html body .wookle-spotlight-article {
        padding: 34px 4px !important;
        font-size: 16px !important;
        line-height: 1.9 !important;
    }

    html body .wookle-spotlight-proof {
        font-size: 12px !important;
    }

    html body .wookle-spotlight-class-box strong {
        font-size: 19px !important;
    }

    html body .wookle-spotlight-class-box p {
        font-size: 13px !important;
    }

    html body .wookle-spotlight-view-actions {
        margin: 20px 0 0 !important;
    }

    html body .wookle-spotlight-view-actions a {
        min-height: 46px !important;
        font-size: 13px !important;
    }
}

@media (min-width: 1024px) {

    /* --- 목록: PC 4열 --- */
    html body .wookle-spotlight-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    /* --- 상세: PC 2단 (왼쪽 대표 이미지 고정 / 오른쪽 본문) --- */
    html body .wookle-spotlight-view {
        display: grid !important;
        grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
        column-gap: 56px;
        align-items: start;
        max-width: calc(var(--wk-wide) + var(--wk-gutter) * 2) !important;
        padding: 36px 24px 64px !important;
    }

    html body .wookle-spotlight-view > * {
        grid-column: 2;
        min-width: 0;
    }

    html body .wookle-spotlight-view > .wookle-spotlight-hero-image {
        position: sticky;
        top: calc(var(--wk-hdr-h, 64px) + 24px);
        grid-column: 1;
        grid-row: 1 / span 20;
        align-self: start;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
    }

    html body .wookle-spotlight-view-hero {
        padding: 4px 0 24px !important;
    }

    html body .wookle-spotlight-keyword {
        margin-top: 4px !important;
        text-align: left !important;
    }

    html body .wookle-spotlight-article {
        padding: 30px 2px !important;
    }
}

/* ==========================================================================
   23. 메인 스포트라이트 배너 내비게이션 ‹ 1 / 2 › (전체 화면) - 2026-10-19
   - js/wookle-banner-nav.js 가 .proud-banner-viewport 안에 생성
   ========================================================================== */
html body .proud-banner .proud-banner-viewport {
    position: relative;
}

.wk-banner-nav {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 24px;
    padding: 0 2px;
    border-radius: 0;
    background: transparent;
    color: #fff;
    text-shadow: none;
    filter: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    user-select: none;
}

.wk-banner-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.wk-banner-nav-btn:hover,
.wk-banner-nav-btn:focus-visible {
    background: rgba(255, 255, 255, .22);
    outline: none;
}

.wk-banner-nav-btn svg {
    display: block;
}

.wk-banner-nav-count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 0 1px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.wk-banner-nav-count strong {
    color: #fff;
    font-weight: 800;
}

.wk-banner-nav-count > span {
    color: rgba(255, 255, 255, .85);
}

@media (min-width: 768px) {
    .wk-banner-nav {
        right: 14px;
        bottom: 14px;
        height: 26px;
        padding: 0 2px;
        font-size: 12px;
    }

    .wk-banner-nav-btn {
        width: 22px;
        height: 22px;
    }
}

/* ==========================================================================
   24. 서브페이지 폭 1200px 통일 보정 - 2026-10-19
   - 바깥 틀(헤더·탭·목록)은 메인과 같은 1200px
   - 긴 글 본문(매거진·소통방 상세)만 읽기 편한 820px로 가운데 정렬
     (한 줄이 1100px 넘게 길어지면 다음 줄 찾기가 어려워 가독성이 떨어짐)
   ========================================================================== */
@media (min-width: 768px) {
    html body .wookle-community-detail {
        max-width: var(--wk-read) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html body #bo_v_con {
        max-width: var(--wk-read);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   25. 찜한 클래스 / 최근 본 강좌 → 클래스·문화센터 목록과 같은 카드 UI - 2026-10-19
   - 바탕 #fdfdfd(양옆·헤더 띠·푸터 같은 색), 흰 카드 + 테두리 + 둥근 모서리 14px
   - PC/태블릿 2열, 모바일 1열 / 썸네일 112x84 / 제목 15px / 하트 모양 통일
   - 두 페이지 모두 인라인 <style>이 뒤에 있어 !important 사용
   ========================================================================== */
html:root:has(.wookle-like-page, .wookle-recent-page) {
    --wk-bg: #fdfdfd;
}

html body:has(.wookle-like-page, .wookle-recent-page),
html body .wookle-like-wrap,
html body .wookle-like-page,
html body .wookle-like-page .like-header,
html body .wookle-like-page .like-summary,
html body .wookle-like-page .like-list,
html body .wookle-sub-page:has(.wookle-recent-page),
html body .wookle-sub-page:has(.wookle-recent-page) .wookle-sub-header,
html body .wookle-recent-page {
    background: #fdfdfd !important;
}

/* 목록 */
html body .wookle-like-page .like-list,
html body .wookle-recent-page .wookle-recent-list {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    border: 0 !important;
}

html body .wookle-like-page .like-list {
    padding: 4px 14px 24px !important;
}

html body .wookle-recent-page .wookle-recent-list {
    padding: 12px 0 0 !important;
}

/* 카드 */
html body .wookle-like-page .like-item,
html body .wookle-recent-page .wookle-recent-row {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid #ececec !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: border-color .2s ease, box-shadow .2s ease;
}

html body .wookle-like-page .like-item {
    align-items: center;
    gap: 14px !important;
}

html body .wookle-recent-page .wookle-recent-row {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 14px !important;
}

/* 썸네일 */
html body .wookle-like-page .like-thumb,
html body .wookle-recent-page .wookle-recent-thumb {
    flex: 0 0 112px !important;
    width: 112px !important;
    height: 84px !important;
    border-radius: 10px !important;
    overflow: hidden;
    background: #f3f4f6 !important;
}

/* 글자 */
html body .wookle-like-page .like-info,
html body .wookle-recent-page .wookle-recent-info {
    min-width: 0;
    padding-right: 30px !important;
}

html body .wookle-like-page .like-category,
html body .wookle-recent-page .wookle-recent-type {
    margin: 0 0 4px !important;
    color: #888 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

html body .wookle-like-page .like-name,
html body .wookle-recent-page .wookle-recent-title {
    margin: 0 0 6px !important;
    color: #222 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.02em !important;
}

html body .wookle-like-page .like-desc,
html body .wookle-recent-page .wookle-recent-location,
html body .wookle-recent-page .wookle-recent-age {
    color: #777 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* 하트: 클래스 목록과 같은 위치·크기 */
html body .wookle-like-page .like-remove-btn,
html body .wookle-recent-page .wookle-recent-like {
    position: absolute !important;
    top: 12px !important;
    right: 8px !important;
    width: 36px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body .wookle-like-page .like-remove-btn svg,
html body .wookle-recent-page .wookle-recent-like svg {
    width: 23px !important;
    height: 20px !important;
}

html body .wookle-like-page .like-remove-btn path,
html body .wookle-recent-page .wookle-recent-like path {
    stroke-width: 1.7 !important;
}

html body .wookle-recent-page .wookle-recent-like:not(.is-liked) {
    color: #555 !important;
}

html body .wookle-recent-page .wookle-recent-like.is-liked {
    color: #fdc204 !important;
}

/* 요약줄 */
html body .wookle-recent-page .wookle-recent-summary {
    border-bottom: 0 !important;
}

/* 모바일: 최근 본 강좌 좌우 여백을 목록과 같게 */
@media (max-width: 767px) {
    html body .wookle-recent-page {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* PC/태블릿: 2열 + 마우스 올림 */
@media (min-width: 768px) {
    html body .wookle-like-page .like-list,
    html body .wookle-recent-page .wookle-recent-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    html body .wookle-like-page .like-list {
        padding: 8px var(--wk-gutter) 40px !important;
    }

    html body .wookle-recent-page .wookle-recent-list {
        padding: 16px 0 0 !important;
    }

    html body .wookle-like-page .like-item,
    html body .wookle-recent-page .wookle-recent-row {
        padding: 16px !important;
    }

    html body .wookle-like-page .like-item:hover,
    html body .wookle-recent-page .wookle-recent-row:hover {
        border-color: #f0cf55 !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    }

    html body .wookle-like-page .like-remove-btn,
    html body .wookle-recent-page .wookle-recent-like {
        top: 14px !important;
        right: 10px !important;
    }

    /* 상단 고정 띠·푸터도 같은 색 */
    html body:has(.wookle-like-page, .wookle-recent-page)::before {
        background: #fdfdfd !important;
    }

    html body:has(.wookle-like-page, .wookle-recent-page) .wookle-site-footer {
        background: #fdfdfd !important;
    }
}

/* ==========================================================================
   26. 마이스터고 목록(소통방 · 학교찾기 · 매거진) 디자인 통일 - 2026-10-19
   - 바탕 #fdfdfd(클래스 목록과 같은 색) / 항목은 흰 카드 + 테두리 + 둥근 모서리
   - 상단 메뉴 탭 3종(소통방 전환·학교찾기 탭·매거진 탭)을 같은 모양으로
   - 한 줄 목록(1열)은 그대로, 모바일 포함 모든 화면
   - 매거진·소통방 "글 상세" 화면은 제외 (기존 읽기 화면 유지)
   ========================================================================== */
html:root:has(.wookle-community-list, .wookle-meister-wrap, .wmm-list) {
    --wk-bg: #fdfdfd;
}

html body:has(.wookle-community-list, .wookle-meister-wrap, .wmm-list),
html body:has(.wookle-community-list, .wookle-meister-wrap, .wmm-list) .wookle-wrapper,
html body:has(.wookle-community-list, .wookle-meister-wrap, .wmm-list) .wookle-container-wr,
html body:has(.wookle-community-list, .wookle-meister-wrap, .wmm-list) .wookle-container,
html body .wookle-sub-page:has(.wookle-community-list, .wookle-meister-wrap, .wmm-list),
html body .wookle-sub-page:has(.wookle-community-list, .wookle-meister-wrap, .wmm-list) .wookle-sub-header,
html body .wookle-community-list,
html body .wookle-meister-wrap,
html body .wmm-list,
html body .wmm-items,
html body .wmm-hero,
html body .wmm-toolbar,
html body .wookle-community-items {
    background: #fdfdfd !important;
}

/* --- 메뉴 탭: 세 페이지 같은 모양 --- */
html body .wookle-meister-tabs,
html body .wmm-tabs,
html body .wookle-community-switcher {
    display: grid !important;
    gap: 8px !important;
    margin: 4px 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .wookle-meister-tabs,
html body .wmm-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body .wookle-community-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .wookle-meister-tabs > a,
html body .wmm-tabs > a,
html body .wookle-community-switcher > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 42px !important;
    padding: 0 8px !important;
    border: 1px solid #ececec !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

html body .wookle-meister-tabs > a.active,
html body .wmm-tabs > a.active,
html body .wookle-community-switcher > a.active {
    border-color: #f0cf55 !important;
    background: #fff8d8 !important;
    color: #222 !important;
    font-weight: 800 !important;
}

/* --- 학교찾기 검색 박스 --- */
html body .wookle-meister-filter {
    border: 1px solid #ececec !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* --- 매거진 카테고리 칩 --- */
html body .wmm-categories a {
    border-color: #ececec !important;
    background: #fff !important;
    color: #555 !important;
}

html body .wmm-categories a.active {
    border-color: #f0cf55 !important;
    background: #fff8d8 !important;
    color: #222 !important;
}

/* --- 목록 묶음: 줄 구분선 대신 카드 간격 --- */
html body .wookle-community-items,
html body .wmm-items {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px !important;
    border: 0 !important;
}

html body .wmm-toolbar,
html body .wookle-community-top {
    border-bottom: 0 !important;
}

html body:has(.wookle-meister-school-card) .wookle-meister-school-card + .wookle-meister-school-card {
    margin-top: 10px !important;
}

/* --- 카드 --- */
html body .wookle-community-card,
html body .wookle-meister-school-card,
html body .wmm-item {
    box-sizing: border-box;
    margin: 0;
    padding: 16px !important;
    border: 1px solid #ececec !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

html body .wmm-item > a {
    padding: 0 !important;
}

@media (hover: hover) {
    html body .wookle-community-card:hover,
    html body .wookle-meister-school-card:hover,
    html body .wmm-item:hover {
        border-color: #f0cf55 !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
    }
}

/* 학교 로고·매거진 썸네일 바탕 */
html body .wookle-meister-school-thumb {
    background: #fff !important;
}

html body .wmm-thumb {
    border-radius: 10px !important;
    overflow: hidden;
}

@media (max-width: 767px) {
    html body .wookle-community-card,
    html body .wookle-meister-school-card,
    html body .wmm-item {
        padding: 14px !important;
    }
}

/* PC/태블릿: 상단 고정 띠·푸터 같은 색 */
@media (min-width: 768px) {
    html body:has(.wookle-community-list, .wookle-meister-wrap, .wmm-list)::before {
        background: #fdfdfd !important;
    }

    html body:has(.wookle-community-list, .wookle-meister-wrap, .wmm-list) .wookle-site-footer {
        background: #fdfdfd !important;
    }
}

/* ==========================================================================
   27. 홈 모바일: 마이스터고 영역 - 2026-10-19
   - 헤더(검색창)와 마이스터고 영역 사이 빈 공간 제거
   - 베이지(#f0ece4) 바탕 → 온라인·방문 학습 박스와 같은 밝은 웜그레이 #f8f7f4
   ========================================================================== */
@media (max-width: 767px) {
    html body .wookle-main > .wookle-meister-main {
        margin-top: 0 !important;
        background: #f8f7f4 !important;
    }
}

/* ==========================================================================
   28. 서브 헤더 경로줄(마이스터고 > 학교찾기) 흰 띠 제거 - 2026-10-19
   - 경로줄이 흰색으로 고정돼 있어 #fdfdfd 페이지에서 흰 띠로 보이던 문제
   - 투명 처리 → 헤더 색을 그대로 따라감 (흰 헤더 페이지는 기존과 동일)
   ========================================================================== */
html body .wookle-sub-header .wookle-sub-path {
    background: transparent !important;
}

/* ==========================================================================
   29. 학교찾기 2열 / 홈 섹션 구분선 - 2026-10-19
   - 학교찾기: PC·태블릿 2열 카드 (클래스·문화센터 목록과 같은 방식), 모바일 1열
   - 홈: 최근 본 강좌 · 문화센터 신규 강좌 · 내가 찜한 클래스 · 이벤트/인기 · 지역 안내
     사이에 얇은 구분선 (PC·태블릿)
   - 배너 내비게이션 배경 제거는 23번 섹션에서 처리
   ========================================================================== */
@media (min-width: 768px) {
    html body .wookle-meister-wrap div:has(> .wookle-meister-school-card) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    html body .wookle-meister-wrap div:has(> .wookle-meister-school-card) > .wookle-meister-school-card {
        min-width: 0;
        margin: 0 !important;
    }

    html body .wookle-meister-school-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html body #wookleMain > .wookle-section,
    html body #wookleMain > .wookle-home-feature-row,
    html body #wookleMain > .wookle-seo-region-hub {
        margin-top: 36px !important;
        padding-top: 36px !important;
        border-top: 1px solid #ececec !important;
    }
}

/* ==========================================================================
   30. 홈 모바일 세로 여백 통일 + 섹션 구분선 - 2026-10-19
   - 모든 섹션: 위아래 20px 같은 간격, 섹션 사이 1px 선(#ececec)
   - 마이스터고 영역(회색 띠) 바로 아래 스포트라이트는 선 없이 20px
   ========================================================================== */
@media (max-width: 767px) {
    html body #wookleMain > .wookle-meister-main {
        margin-bottom: 0 !important;
    }

    html body #wookleMain > .proud-banner,
    html body #wookleMain > .wookle-brand,
    html body #wookleMain > .wookle-section,
    html body #wookleMain > .wookle-home-feature-row > *,
    html body #wookleMain > .wookle-seo-region-hub {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        border-top: 1px solid #ececec !important;
    }

    html body #wookleMain > .proud-banner {
        border-top: 0 !important;
    }

    html body #wookleMain > .wookle-home-feature-row {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* 섹션 제목줄 위쪽 여백은 섹션 여백(20px)으로만 */
    html body #wookleMain .section-title-row,
    html body #wookleMain > .wookle-brand > h2 {
        margin-top: 0 !important;
    }

    html body #wookleMain > .wookle-section:last-child,
    html body #wookleMain > .wookle-seo-region-hub {
        padding-bottom: 28px !important;
    }
}

/* ==========================================================================
   31. 지역별 학원·문화센터 찾기 (홈 하단) 디자인 정리 - 2026-10-19
   - 회색 박스 → 다른 섹션과 같은 일반 섹션 (제목 크기도 동일)
   - 크기가 제각각이던 알약 버튼 → 같은 크기 버튼 격자
     (모바일 2열 / 태블릿 4열 / PC 6열), 지역명은 오른쪽 작은 태그
   - 링크·주소는 그대로 (SEO 내부 링크 영향 없음)
   ========================================================================== */
html body .wookle-seo-region-hub {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body .wookle-seo-region-hub h2 {
    margin: 0 0 4px !important;
    color: #222 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

html body .wookle-seo-region-hub > p {
    margin: 0 0 18px !important;
    color: #888 !important;
    font-size: 13px !important;
}

html body .wookle-seo-region-group + .wookle-seo-region-group {
    margin-top: 20px !important;
}

html body .wookle-seo-region-group h3 {
    margin: 0 0 10px !important;
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

html body .wookle-seo-region-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
}

html body .wookle-seo-region-links a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    height: 42px;
    min-height: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #ececec !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color .2s ease, background-color .2s ease;
}

html body .wookle-seo-region-links a:hover,
html body .wookle-seo-region-links a:focus-visible {
    border-color: #f0cf55 !important;
    background: #fffcf0 !important;
    color: #222 !important;
}

html body .wookle-seo-region-links small {
    flex: none;
    margin: 0 !important;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f4f4f5;
    color: #888 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.4;
}

@media (min-width: 768px) {
    html body .wookle-seo-region-hub h2 {
        font-size: 20px !important;
        font-weight: 800 !important;
        letter-spacing: -0.4px;
    }

    html body .wookle-seo-region-links {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px !important;
    }
}

@media (min-width: 1024px) {
    html body .wookle-seo-region-links {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ==========================================================================
   32. 문화센터 상세필터 디자인 (모바일 · 태블릿 · PC) - 2026-10-19
   - HTML·폼 이름·스크립트는 그대로, CSS만 변경 (필터 동작 영향 없음)
   - 흰 카드 + 테두리 / 선택 칩은 우클 연노랑 / 셀렉트 화살표 통일
   - PC: 지역·연령 4칸 한 줄, 모집상태·요일 나란히, 운영기관 + 적용 버튼 한 줄
   ========================================================================== */

/* 상세필터 버튼: 테두리 알약, 열렸을 때 노란색 */
html body .wookle-culture-filter-mini-toggle {
    height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

html body .wookle-culture-filter-mini-toggle svg {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
}

html body .wookle-culture-summary:has(+ .wookle-culture-filter.is-open) .wookle-culture-filter-mini-toggle {
    border-color: #f0cf55 !important;
    background: #fff8d8 !important;
    color: #222 !important;
}

/* 패널 */
html body .wookle-culture-filter {
    padding: 12px 14px 4px !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

html body .wookle-culture-filter-box {
    padding: 18px 16px !important;
    border: 1px solid #ececec !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

html body .wookle-culture-filter-group {
    margin-bottom: 18px !important;
}

html body .wookle-culture-filter-title {
    margin-bottom: 10px !important;
    color: #222 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* 셀렉트 */
html body .wookle-culture-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body .wookle-culture-filter .wookle-culture-select {
    -webkit-appearance: none;
    appearance: none;
    height: 44px !important;
    padding: 0 34px 0 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 16px 16px !important;
    color: #333 !important;
    font-size: 13px !important;
    cursor: pointer;
}

html body .wookle-culture-filter .wookle-culture-select:focus {
    border-color: #f0cf55 !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(253, 194, 4, .15);
}

html body .wookle-culture-filter .wookle-culture-select:disabled {
    background-color: #f7f7f8 !important;
    color: #aaa !important;
    cursor: default;
}

/* 칩 */
html body .wookle-culture-chip-list {
    gap: 6px !important;
}

html body .wookle-culture-chip span {
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #555 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: border-color .15s ease, background-color .15s ease;
}

@media (hover: hover) {
    html body .wookle-culture-chip:hover span {
        border-color: #f0cf55 !important;
    }
}

html body .wookle-culture-chip input:checked + span {
    border-color: #f0cf55 !important;
    background: #fff8d8 !important;
    color: #222 !important;
    font-weight: 700 !important;
}

html body .wookle-culture-chip input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(253, 194, 4, .25);
}

/* 적용 버튼 */
html body .wookle-culture-apply {
    height: 48px !important;
    margin-top: 2px !important;
    border-radius: 12px !important;
    background: #fdc204 !important;
    color: #111 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

html body .wookle-culture-apply:hover {
    background: #f4b800 !important;
}

/* 태블릿 */
@media (min-width: 768px) {
    html body .wookle-culture-filter {
        padding: 14px 0 6px !important;
    }

    html body .wookle-culture-filter-box {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 24px;
        padding: 22px 24px !important;
    }

    html body .wookle-culture-filter-box > .wookle-culture-filter-group {
        min-width: 0;
        margin: 0 !important;
    }

    /* 지역·연령은 한 줄 전체 */
    html body .wookle-culture-filter-box > .wookle-culture-filter-group:first-of-type {
        grid-column: 1 / -1;
    }

    html body .wookle-culture-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* 운영기관 옆에 적용 버튼 */
    html body .wookle-culture-filter-box > .wookle-culture-apply {
        align-self: end;
        width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
    }
}

/* PC: 모집상태 · 요일 · 운영기관을 3칸, 버튼은 오른쪽 아래 */
@media (min-width: 1024px) {
    html body .wookle-culture-filter-box {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr);
    }

    html body .wookle-culture-filter-box > .wookle-culture-apply {
        grid-column: 3;
        justify-self: stretch;
    }
}

/* ==========================================================================
   33. 모바일 목록 좌우 여백 축소 (문화센터 · 클래스 공통) - 2026-10-19
   - 문화센터 카드 바깥 여백 25px → 10px, 클래스 15px → 10px 로 통일
   - 페이지 테두리선(좌우 1px) 제거
   ========================================================================== */
@media (max-width: 767px) {
    html body .wookle-result-page {
        border-left: 0 !important;
        border-right: 0 !important;
    }

    html body .wookle-culture-page .wookle-culture-list {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body .wookle-culture-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    html body main.class-list {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    html body .wookle-culture-filter {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}