/* =========================================================
   wm_base.css (Unified)
   - Common: Tokens/Base/Layout/Header(v2/v1)/Footer/Popover
   - Modules: Help(.wh-), Questions(.wq-), Senior(.wm-senior-), Wisdom(.wl-)
========================================================= */

/* =========================
   TOKENS / BASE (GLOBAL)
========================= */
:root{
    --wm-font: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;

    /* Figma tokens */
    --wm-gray-400: #C4C4C4;
    --wm-black: #000000;
    --wm-ink: #33363F;

    --wm-footer-bg: #1C1C1C;
    --wm-footer-text: #BBBBBB;
    --wm-white: #FFFFFF;

    /* Layout */
    --wm-header-pad-x: 100px;
    --wm-header-max: 1152px; /* Figma header inner max */
    --wm-page-max: 1440px;   /* 컨텐츠 폭 */
}

*{ box-sizing: border-box; }

html, body{ height:100%; }

body{
    margin:0;
    font-family: var(--wm-font);
    background:#FFFFFF;
    color:#111;
}

/* =========================
   PAGE WRAPPER (COMMON)
========================= */
.wm-page{ width:100%; }

.wm-page-inner{
    max-width: var(--wm-page-max);
    margin: 0 auto;
    padding: 0 44px;
}

/* =========================================================
   HEADER v2 ONLY
   - 반드시 .wm-header--v2 범위 안에서만 스타일 적용
========================================================= */
:root{
    --wm-header-canvas: 1920px; /* Figma frame width */
    --wm-header-left: 360px;    /* left block x */
    --wm-header-right-x: 1409px;/* right block x */
    --wm-header-h: 60px;
}

/* 헤더 바 */
.wm-header.wm-header--v2{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 50;
}

/* 1920 캔버스 래퍼 */
.wm-header.wm-header--v2 .wm-header-inner.wm-header-inner--v2{
    width: 100%;
    max-width: var(--wm-header-canvas);
    margin: 0 auto;
    height: var(--wm-header-h);
    position: relative;
    display: block;
    padding: 0;
}

/* Center: 로고 + GNB */
.wm-header.wm-header--v2 .wm-header-center{
    position: absolute;
    left: var(--wm-header-left);
    top: 0;
    height: var(--wm-header-h);

    display: inline-flex;
    align-items: center;
    gap: 40px;
}

/* Right: icons + login + menu */
.wm-header.wm-header--v2 .wm-header-right.wm-header-right--v2{
    position: absolute;
    left: var(--wm-header-right-x);
    top: 12px;

    display: inline-flex;
    align-items: center;
    gap: 16px;

    right: auto;
    transform: none;
}

/* 로고 */
.wm-header.wm-header--v2 .wm-brand--v2{
    display: inline-flex;
    align-items: center;
    height: var(--wm-header-h);
}
.wm-header.wm-header--v2 .wm-brand-logo--v2{
    height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* GNB */
.wm-header.wm-header--v2 .wm-gnb--v2{
    display: inline-flex;
    align-items: center;
    gap: 32px;
}
.wm-header.wm-header--v2 .wm-gnb-link--v2{
    height: var(--wm-header-h);
    padding: 19px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #0F172A;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    text-decoration: none;
    border-radius: 10px;
}
.wm-header.wm-header--v2 .wm-gnb-link--v2:hover{
    background: rgba(15, 23, 42, 0.04);
}

/* 우측 24px 아이콘 버튼 */
.wm-header.wm-header--v2 .wm-icon-btn--v2{
    width: 24px;
    height: 24px;
    border-radius: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.wm-header.wm-header--v2 .wm-icon-btn--v2:hover{
    background: rgba(15, 23, 42, 0.06);
}
.wm-header.wm-header--v2 .wm-icon-img--v2{
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

/* 로그인 pill */
.wm-header.wm-header--v2 .wm-login-pill{
    height: 36px;
    padding: 0 16px;
    border-radius: 1000px;
    background: #7CC8C3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    text-decoration: none;
    white-space: nowrap;
}
.wm-header.wm-header--v2 .wm-login-pill:hover{
    filter: brightness(0.97);
}

/* v2 헤더 안에서 v1 클래스 섞여도 안전하게 */
.wm-header.wm-header--v2 .wm-login-btn{ all: unset; }

/* 1440 이하: 좌/우 고정 좌표 붕괴 방지 */
@media (max-width: 1440px){
    :root{ --wm-header-left: 24px; }

    .wm-header.wm-header--v2 .wm-header-center{ left: 24px; }

    .wm-header.wm-header--v2 .wm-header-right.wm-header-right--v2{
        left: auto;
        right: 24px;
        top: 12px;
    }
}

/* 모바일/태블릿 */
@media (max-width: 992px){
    .wm-header.wm-header--v2 .wm-gnb--v2{ display: none !important; }

    .wm-header.wm-header--v2 .wm-header-inner.wm-header-inner--v2{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
    }
    .wm-header.wm-header--v2 .wm-header-center{
        position: static;
        gap: 12px;
    }
    .wm-header.wm-header--v2 .wm-header-right.wm-header-right--v2{
        position: static;
        margin-left: auto;
    }
    .wm-header.wm-header--v2 .wm-brand-logo--v2{ height: 28px; }
}

/* =========================================================
   HEADER v1 (기존)
========================================================= */
.wm-brand{
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.wm-brand-logo{
    width: 204px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.wm-gnb{
    display: flex;
    align-items: center;
    gap: 0;
}
.wm-gnb-link{
    padding: 11px 12px;
    border-radius: 13px;

    color: var(--wm-gray-400);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.wm-gnb-link:hover{
    color: #8f8f8f;
    text-decoration: none;
}
.wm-gnb-link.is-active{ color:#111; }

.wm-header-right{
    display: flex;
    align-items: center;
    gap: 8px;
}
.wm-icon-btn{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}
.wm-icon-btn:hover{ background: rgba(0,0,0,0.04); }
.wm-icon-img{
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.wm-login-btn{
    height: 24px;
    min-height: 24px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--wm-black);
    background: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--wm-black);
    font-size: 20px;
    font-weight: 300;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}
.wm-login-btn:hover{
    background: rgba(0,0,0,0.03);
    text-decoration: none;
}

/* Mobile nav (공통) */
.wm-mobile-toggle{
    border: 0;
    background: transparent;
    padding: 0;
    margin-left: 4px;
}
.wm-mobile-nav{
    border-top: 1px solid rgba(0,0,0,0.06);
}
.wm-mobile-nav-inner{
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wm-mobile-link{
    padding: 12px 10px;
    border-radius: 12px;
    color: var(--wm-gray-400);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.wm-mobile-link:hover{
    background: rgba(0,0,0,0.04);
    color: #777;
    text-decoration: none;
}

/* =========================================================
   FOOTER v3 (Figma 1920 x 380)
   - BG: #0F172A
   - Left block x=360, top=60
   - Right block x=1160, top=60 (2 cols each 200)
========================================================= */
:root{
    --wm-footer-bg-v3: #0F172A;
    --wm-footer-text-v3: #FFFFFF;
    --wm-footer-h: 380px;

    --wm-footer-canvas: 1920px;
    --wm-footer-left-x: 360px;
    --wm-footer-top: 60px;
    --wm-footer-right-x: 1160px;

    --wm-footer-col-w: 200px;
    --wm-footer-col-gap: 0px; /* 피그마는 딱 붙어있음 */
}

/* wrapper */
.wm-footer.wm-footer--v3{
    width: 100%;
    background: var(--wm-footer-bg-v3);
    position: relative;
    overflow: hidden;
}

/* 1920 canvas */
.wm-footer.wm-footer--v3 .wm-footer__canvas{
    width: 100%;
    max-width: var(--wm-footer-canvas);
    margin: 0 auto;
    height: var(--wm-footer-h);
    position: relative;
}

/* LEFT */
.wm-footer.wm-footer--v3 .wm-footer__left{
    position: absolute;
    left: var(--wm-footer-left-x);
    top: var(--wm-footer-top);
    width: 395px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--wm-footer-text-v3);
}

.wm-footer.wm-footer--v3 .wm-footer__company{
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 25.2px;
}

.wm-footer.wm-footer--v3 .wm-footer__info{
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    word-wrap: break-word;
}

/* RIGHT (2 columns group) */
.wm-footer.wm-footer--v3 .wm-footer__right{
    position: absolute;
    left: var(--wm-footer-right-x);
    top: var(--wm-footer-top);
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    background: var(--wm-footer-bg-v3);
}

.wm-footer.wm-footer--v3 .wm-footer__col{
    width: var(--wm-footer-col-w);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.wm-footer.wm-footer--v3 .wm-footer__head{
    height: 44px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 25.2px;
}

.wm-footer.wm-footer--v3 .wm-footer__list{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.wm-footer.wm-footer--v3 .wm-footer__list li{
    height: 36px;
    display: flex;
    align-items: center;
}

.wm-footer.wm-footer--v3 .wm-footer__link{
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    text-decoration: none;
}
.wm-footer.wm-footer--v3 .wm-footer__link:hover{
    text-decoration: underline;
}

/* 기존 v1/v2 footer 스타일과 충돌 방지: wm-footer--v3에서만 적용 */
.wm-footer:not(.wm-footer--v3) .wm-footer__canvas,
.wm-footer:not(.wm-footer--v3) .wm-footer__left,
.wm-footer:not(.wm-footer--v3) .wm-footer__right{}

/* responsive: 1440 이하에서 좌우 좌표가 화면 밖으로 나가지 않게 */
@media (max-width: 1440px){
    :root{
        --wm-footer-left-x: 24px;
        --wm-footer-right-x: auto;
    }

    .wm-footer.wm-footer--v3 .wm-footer__right{
        left: auto;
        right: 24px;
    }
}

/* mobile: 세로 스택 */
@media (max-width: 768px){
    .wm-footer.wm-footer--v3 .wm-footer__canvas{
        height: auto;
        padding: 40px 16px 40px;
    }

    .wm-footer.wm-footer--v3 .wm-footer__left,
    .wm-footer.wm-footer--v3 .wm-footer__right{
        position: static;
        width: 100%;
    }

    .wm-footer.wm-footer--v3 .wm-footer__right{
        margin-top: 28px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .wm-footer.wm-footer--v3 .wm-footer__col{
        width: 100%;
    }
}
/* =========================================================
   MENU POPOVER (ID 기반, 헤더 밖 영향 최소화)
========================================================= */
/* =========================================================
   MENU POPOVER (Figma v2)
   - Size: 200 x 448
   - Position: fixed (JS가 left/top 지정)
========================================================= */
#wmMenuPopover[hidden], #wmMenuBackdrop[hidden]{ display:none !important; }

#wmMenuPopover.wm-menu-pop{
    width: 200px;
    height: 448px;
    position: fixed;

    background: #FFFFFF;
    border-radius: 20px;

    /* outline: 1px #E2E8F0 solid; outline-offset:-1px; */
    border: 1px solid #E2E8F0;

    box-shadow: 4px 4px 10px rgba(0,0,0,0.05);

    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    z-index: 2000;
    font-family: var(--wm-font);
}

/* head */
#wmMenuPopover .wm-menu-pop__head{
    height: 44px;
    padding: 12px 20px 12px 24px;
    border-bottom: 1px solid #E2E8F0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#wmMenuPopover .wm-menu-pop__title{
    color: #0F172A;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
}

#wmMenuPopover .wm-menu-pop__close{
    width: 20px;
    height: 20px;
    border: 0;
    padding: 0;
    background: transparent;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#wmMenuPopover .wm-menu-pop__close img{
    width: 20px;
    height: 20px;
    display: block;
}

#wmMenuPopover .wm-menu-pop__close:hover{
    background: rgba(15,23,42,0.06);
}

/* list */
#wmMenuPopover .wm-menu-pop__list{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 6px 0; /* 아이템 높이 36에 맞추기 위한 여백 */
}

/* item */
#wmMenuPopover .wm-menu-pop__item{
    height: 36px;
    padding: 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;   /* 피그마: justify-content center */
}

#wmMenuPopover .wm-menu-pop__item{
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-decoration: none;
    cursor: pointer;

    /* left align 느낌 원하면 아래로 변경:
       justify-content:flex-start;
    */
    justify-content: flex-start;
}

#wmMenuPopover .wm-menu-pop__item:hover{
    background: rgba(15,23,42,0.04);
}

/* focus */
#wmMenuPopover .wm-menu-pop__item:focus-visible,
#wmMenuPopover .wm-menu-pop__logout:focus-visible{
    outline: 2px solid rgba(77,100,173,0.35);
    outline-offset: -2px;
    border-radius: 10px;
}

/* footer */
#wmMenuPopover .wm-menu-pop__foot{
    height: 56px;
    border-top: 1px solid #E2E8F0;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
}

#wmMenuPopover .wm-menu-pop__logout{
    width: 100%;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    color: #475569;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-decoration: none;
}

#wmMenuPopover .wm-menu-pop__logout:hover{
    background: rgba(15,23,42,0.04);
    border-radius: 10px;
}

/* backdrop (기존 로직 유지) */
#wmMenuBackdrop.wm-menu-backdrop{
    position: fixed;
    inset: 0;
    background: transparent;
    display: none;
    z-index: 1999;
}
#wmMenuBackdrop.wm-menu-backdrop.is-open{ display:block; }



/* =========================================================
   MODULE: QUESTIONS (wm_question.css)
   - 헤더/푸터/공통 토큰은 base로 통합 → wq-*만 유지
========================================================= */
.wq-wrap{
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 20px 56px;
}

.wq-head{ padding: 18px 0 10px; }
.wq-head__title{
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.5;
    color: #555;
}
.wq-head__desc{
    margin-top: 2px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: rgba(34,34,34,.6);
}

.wq-toolbar{
    margin-top: 18px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.wq-ask-btn{
    width: 150px;
    height: 44px;
    border-radius: 13px;
    background: #1554f6;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size: 20px;
    font-weight: 700;
}

.wq-grid{
    margin-top: 22px;
    display:grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.wq-card{
    box-shadow: 0 8px 32px rgba(74,144,226,.12), 0 4px 16px rgba(74,144,226,.08);
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(74,144,226,.1);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.wq-card__top{
    padding: 21px 21px 0;
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 12px;
}
.wq-user{
    display:flex;
    align-items:center;
    gap: 12px;
    flex-wrap: wrap;
}
.wq-avatar{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
}
.wq-avatar--fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight: 800;
}

.wq-user__meta{
    display:flex;
    flex-direction:column;
    gap: 4px;
    min-width: 110px;
}
.wq-user__name{
    font-size: 16px;
    line-height: 1.6;
    color:#1e2939;
    font-weight: 700;
}
.wq-user__date{
    display:flex;
    align-items:center;
    gap: 4px;
    font-size: 11.1px;
    color:#6a7282;
}
.wq-ico{ width:16px; height:16px; object-fit: contain; }

.wq-pill{
    border-radius: 8px;
    background: #e0e8ff;
    padding: 6px 12px;
    display:flex;
    align-items:center;
    gap: 10px;
}
.wq-pill__k{ font-size: 12px; color:#6a7282; font-weight: 600; }
.wq-pill__v{ font-size: 12px; color:#494949; font-weight: 700; }

.wq-status__badge{
    height: 28px;
    border-radius: 4px;
    padding: 4px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size: 12px;
    font-weight: 700;
    color:#fff;
}
.wq-status__badge--waiting{ background:#8652ff; }
.wq-status__badge--done{ background:#d9dde6; color:#4a5565; }

.wq-card__body{ padding: 24px 21px 18px; }
.wq-title{
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color:#1e2939;
    margin: 0 0 8px;
}
.wq-desc{
    font-size: 14px;
    line-height: 22.75px;
    color:#4a5565;
    margin: 0;
    display:-webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
}

.wq-card__foot{
    margin-top:auto;
    border-top: 1px solid #f3f4f6;
    padding: 14px 21px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
}
.wq-foot__left{
    color:#000;
    font-family: var(--wm-font);
    font-size: 16px;
}
.wq-foot__left b{ font-weight: 800; }

.wq-metrics{
    display:flex;
    align-items:center;
    gap: 16px;
    color:#6a7282;
    font-size: 14px;
}
.wq-metric{ display:flex; align-items:center; gap: 6px; }
.wq-empty{ margin-top: 24px; color:#6a7282; }

.wq-pager{
    margin-top: 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
}
.wq-page{
    padding: 8px 12px;
    border-radius: 10px;
    border:1px solid #e5e7eb;
    text-decoration:none;
    color:#374151;
    background:#fff;
}
.wq-page--now{
    border-color: transparent;
    background: #f3f4f6;
}

/* modal */
.wq-modal-overlay,
.wq-cat-overlay{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(17,24,39,.45);
    backdrop-filter: blur(2px);
}
.wq-modal-overlay.is-open,
.wq-cat-overlay.is-open{ display:flex; }

.wq-modal{
    width: 720px;
    max-width: 100%;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15,23,42,.18);
    overflow: hidden;
    font-family: var(--wm-font);
}
.wq-modal__head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 18px 18px 12px;
    border-bottom: 1px solid #f3f4f6;
}
.wq-modal__title{ font-size: 18px; font-weight: 800; color: #111827; }
.wq-modal__close{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: #f3f4f6;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* highlight */
.wq-highlight{
    width: 100%;
    position: relative;
    border-radius: 20px;
    background-color: rgba(239, 67, 59, 0.09);
    border: 2px dashed rgba(239, 67, 59, 0.6);
    padding: 22px;
}
.wq-highlight-no{
    width: 40px;
    height: 40px;
    position: absolute;
    top: -10px;
    left: -10px;
    border-radius: 30px;
    background-color: #ed2024;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size: 26px;
    font-weight: 900;
}
.wq-highlight-body{ padding-top: 8px; }
.wq-highlight-title{
    font-size: 18px;
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.02em;
}
.wq-highlight-desc{
    margin-top: 6px;
    font-size: 14px;
    color: rgba(17,24,39,.65);
    line-height: 1.5;
}
.wq-highlight-grid{
    margin-top: 16px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.wq-field{
    background:#fff;
    border: 1px solid rgba(74,144,226,.12);
    border-radius: 14px;
    padding: 12px;
}
.wq-label{
    font-size: 12px;
    color: rgba(17,24,39,.65);
    font-weight: 700;
    margin-bottom: 6px;
}
.wq-select{
    width: 100%;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 0 12px;
    font-size: 14px;
    background:#fff;
}
.wq-selected{
    margin-top: 14px;
    display:flex;
    gap: 8px;
    align-items:center;
    font-size: 14px;
}
.wq-selected__k{ color: rgba(17,24,39,.65); font-weight: 800; }
.wq-selected__v{ color:#111827; font-weight: 800; }

.wq-modal-actions{ margin-top: 18px; display:flex; gap: 10px; }
.wq-modal-btn{
    flex:1 1 0;
    height: 48px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
}
.wq-modal-btn--line{
    background:#fff;
    border: 1px solid #1554f6;
    color:#1554f6;
}
.wq-modal-btn--primary{ background:#1554f6; color:#fff; }

/* category modal card */
.wq-cat-modal{ width: 720px; max-width: 100%; }

.wq-cat-card{
    width: 100%;
    position: relative;
    box-shadow: 0px 8px 32px rgba(74, 144, 226, 0.12), 0px 4px 16px rgba(74, 144, 226, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    gap: 16px;
    text-align: left;
    font-size: 16px;
    color: #000;
    font-family: var(--wm-font);
}

.wq-cat-title{
    align-self: stretch;
    letter-spacing: -0.02em;
    line-height: 150%;
    font-weight: 800;
}
.wq-cat-chips{
    align-self: stretch;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    font-size: 14px;
    color: #727272;
}
.wq-cat-chip{
    border-radius: 20px;
    border: 1px solid #727272;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: #fff;
    color: #727272;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 150%;
    cursor: pointer;
}
.wq-cat-chip:hover{
    background: rgba(76,154,242,0.03);
    border-color:#4c9af2;
    color:#4c9af2;
}
.wq-cat-chip.is-selected{
    background: rgba(76,154,242,0.08);
    border-color: #1554f6;
    color: #1554f6;
    font-weight: 700;
}

.wq-cat-actions{
    width: 100%;
    display:flex;
    gap: 10px;
    margin-top: 8px;
}
.wq-cat-btn{
    flex:1 1 0;
    height: 48px;
    border-radius: 14px;
    border:none;
    font-size: 15px;
    font-weight: 800;
    cursor:pointer;
}
.wq-cat-btn--line{
    background:#fff;
    border: 1px solid #1554f6;
    color:#1554f6;
}
.wq-cat-btn--primary{ background:#1554f6; color:#fff; }

.wq-cat-close{
    width: 24px;
    height: 24px;
    position: absolute;
    top: 32px;
    right: 32px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.wq-cat-close img{ width: 24px; height: 24px; display:block; }


/* =========================================================
   MODULE: QUESTIONS (wm_question.css)
   - 상단 헤더/툴바(인기/최신/카테고리/질문하기) 피그마 정렬
   - 기능(JS) 변경 없음: 기존 클래스 그대로 사용
========================================================= */

/* page width = 1000px */
.wq-wrap{
    width: min(1000px, 100%);
    margin: 0 auto;
    padding: 16px 0 56px;
}

/* header */
.wq-head{
    padding: 0;
    margin: 0;
}
.wq-head__title{
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #0F172A;
    letter-spacing: 0;
}
.wq-head__desc{
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    color: #475569;
    letter-spacing: 0;
}

/* toolbar row */
.wq-toolbar{
    margin-top: 16px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

/* 최신 링크는 기존 wq-chip--line 클래스를 쓰지만,
   피그마에서는 아웃라인이 아니라 캡슐 내부 텍스트라서 무력화 */
.wq-chip--line{
    border: 0 !important;
    background: transparent !important;
    color: #334155 !important;
    font-weight: 500 !important;
}
.wq-chip--line.is-active{
    background: transparent !important;
    color: #334155 !important;
    font-weight: 500 !important;
}

/* ===== 카테고리 선택 버튼 ===== */
.wq-chip--blue{
    height: 38px;
    padding: 6px 16px 6px 12px; /* left 12 / right 16 */
    border-radius: 1000px;
    background: #FFFFFF;
    border: 1.5px solid #4D64AD;
    color: #4D64AD;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    gap: 6px;
}

/* "+ 카테고리 선택" 버튼의 '+' 제거는 HTML 변경 없이 어렵기 때문에
   기존 문구 유지. (피그마와 완전 동일 문구까지 맞추려면 텍스트만 수정 필요)
*/

/* right CTA: 질문하기 */
.wq-ask-btn{
    width: 100px;
    height: 52px;
    padding: 15px 20px;
    border-radius: 1000px;
    background: #7CC8C3;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:#FFFFFF;
    text-decoration:none;

    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    white-space: nowrap;
}

/* hover/focus */
.wq-ask-btn:hover{ filter: brightness(0.98); }
.wq-ask-btn:focus-visible{
    outline: 2px solid rgba(77, 100, 173, 0.35);
    outline-offset: 2px;
}

/* ===== 아래부터는 기존 리스트/카드 스타일 유지(필요 시 그대로 두세요) ===== */
.wq-grid{
    margin-top: 22px;
    display:grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.wq-like-btn{
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
}

/* responsive */
@media (max-width: 1024px){
    .wq-wrap{
        padding: 16px 16px 56px;
    }
    .wq-toolbar{
        flex-wrap: wrap;
    }
    .wq-ask-btn{
        margin-left: auto;
    }
}


@media (max-width: 900px){
    .wq-toolbar{
        align-items: stretch;
        gap: 10px;
    }
    .wq-chips{
        flex-wrap: wrap;
    }
    .wq-ask-btn{
        width: 100%;
    }
}


/* =========================================================
   MODULE: SENIOR CHALLENGE (Common)
   - ws-hero / ws-steps 공통 (step1~6)
   - container width default: 916px (override 가능)
========================================================= */
:root{
    /* Layout (override-friendly) */
    --ws-page-bg: #F8FAFC;
    --ws-container-w: 916px;        /* ✅ 기본 916 */

    /* Steps */
    --ws-steps-h: 158px;
    --ws-steps-pad-y: 40px;
    --ws-steps-pad-x: 48px;
    --ws-steps-line-inset: 103px;   /* 좌우 라인 inset (Figma) */
    --ws-steps-line-top: 61px;

    /* Colors */
    --ws-card-bg: #FFFFFF;
    --ws-text-900: #0F172A;
    --ws-text-600: #94A3B8;
    --ws-line-200: #E2E8F0;

    --ws-primary: #4D64AD;          /* active circle */
    --ws-step-off-bg: #F1F5F9;

    /* Radius */
    --ws-radius-24: 24px;

    --ws-bottom-border: #F1F5F9;

    --ws-btn-h: 44px;
    --ws-btn-radius: 1000px;
    --ws-btn-pad-x: 20px;
    --ws-btn-pad-y: 15px;

    --ws-tertiary-bg: #F1F5F9; /* 이전 */
    --ws-tertiary-fg: #334155;

    --ws-secondary-bg: #F2F9F9; /* 임시 저장 */
    --ws-secondary-fg: #4EB4AD;

    --ws-primary-bg: #4EB4AD;   /* 다음(활성 시) */
    --ws-primary-fg: #FFFFFF;

    --ws-disabled-bg: #CBD5E1;  /* 다음(비활성) */
}

.ws-bottom-bar{
    width: 100%;
    background:#FFFFFF;
    border-top: 1px solid var(--ws-bottom-border);
}

/* inner layout (기본: 좌=이전 / 우=임시저장+다음) */
.ws-bottom-bar__inner{
    max-width: 1200px; /* 기존에 ws-container 폭 토큰 쓰면 자동 연동 */
    margin: 0 auto;
    padding: 16px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
}

/* right group */
.ws-bottom-bar__right{
    display:flex;
    align-items:flex-start;
    gap: 8px;
}

/* common button base */
.ws-bottom-bar .ws-btn{
    width: 100px;
    height: var(--ws-btn-h);
    padding: var(--ws-btn-pad-y) var(--ws-btn-pad-x);
    border-radius: var(--ws-btn-radius);
    border: 0;
    text-decoration:none;

    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;

    font-family: var(--wm-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;

    cursor:pointer;
    box-sizing:border-box;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
}

/* variants */
.ws-bottom-bar .ws-btn--tertiary,
.ws-bottom-bar .ws-btn--ghost{
    background: var(--ws-tertiary-bg);
    color: var(--ws-tertiary-fg);
}

.ws-bottom-bar .ws-btn--secondary{
    background: var(--ws-secondary-bg);
    color: var(--ws-secondary-fg);
}

.ws-bottom-bar .ws-btn--primary{
    background: var(--ws-primary-bg);
    color: var(--ws-primary-fg);
}

/* disabled state (for <a> or <button>) */
.ws-bottom-bar .ws-btn.is-disabled,
.ws-bottom-bar .ws-btn[disabled],
.ws-bottom-bar .ws-btn[aria-disabled="true"]{
    background: var(--ws-disabled-bg);
    color: var(--ws-primary-fg);
    cursor: not-allowed;
    pointer-events: none;
}

/* focus */
.ws-bottom-bar .ws-btn:focus-visible{
    outline: 2px solid rgba(78, 180, 173, 0.35);
    outline-offset: 2px;
}

/* mobile */
@media (max-width: 1024px){
    .ws-bottom-bar__inner{
        padding: 12px 16px;
    }
}

/* page/frame */
.ws-page{
    background: var(--ws-page-bg);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 24px 0 80px;
}
.ws-container{
    width: min(var(--ws-container-w), 100%);
    margin: 0 auto;
}

/* HERO (공통) */
.ws-hero{
    margin: 0 0 20px;
}
.ws-hero__title{
    margin: 0;
    font-size: 40px;
    font-weight: 900;
    line-height: 56px;
    color: var(--ws-text-900);
}
.ws-hero__desc{
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #334155;
}

/* STEPS (공통) */
.ws-steps{
    position: relative;
    background: var(--ws-card-bg);
    border-radius: var(--ws-radius-24);
    overflow: hidden;

    height: var(--ws-steps-h);
    padding: var(--ws-steps-pad-y) var(--ws-steps-pad-x);

    border: 1px solid var(--ws-line-200);
}

/* 가로 라인 */
.ws-steps::before{
    content:"";
    position:absolute;
    left: var(--ws-steps-line-inset);
    right: var(--ws-steps-line-inset);
    top: var(--ws-steps-line-top);
    height: 1px;
    background: var(--ws-line-200);
}

/* step item (PC: absolute 배치) */
.ws-step{
    position: absolute;
    top: var(--ws-steps-pad-y);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.ws-step__badge{
    width: 40px;
    height: 40px;
    border-radius: 1000px;
    display:flex;
    align-items:center;
    justify-content:center;

    font-size: 18px;
    font-weight: 700;
    line-height: 25.2px;
}

.ws-step__label{
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    color: var(--ws-text-600);
    white-space: nowrap;
}
.ws-step__label small{
    font-size: 13px;
    font-weight: 500;
    line-height: 18.2px;
    color: var(--ws-text-600);
}

.ws-step--done .ws-step__badge{
    background: #7CC8C3;
    color: #fff;
}
.ws-step--done .ws-step__label{
    color: var(--ws-text-900);
}

/* 완료 체크 아이콘 크기 */
.ws-step__badge img{
    width: 24px;
    height: 24px;
    display:block;
}

/* states */
.ws-step--active .ws-step__badge{ background: var(--ws-primary); color:#fff; }
.ws-step--active .ws-step__label{ color: var(--ws-text-900); }

.ws-step--idle .ws-step__badge{ background: var(--ws-step-off-bg); color: var(--ws-text-600); }
.ws-step--idle .ws-step__label{ color: var(--ws-text-600); }

/* 반응형: absolute → flex 전환 */
@media (max-width: 1024px){
    .ws-steps{
        height: auto;
        padding: 20px 16px;
    }
    .ws-steps::before{ display:none; }

    .ws-steps{
        display:flex;
        gap: 14px;
        justify-content: space-between;
        align-items: flex-start;
    }
    .ws-step{
        position: static;
        top: auto;
        flex: 1 1 0;
    }
    .ws-step__label{
        white-space: normal;
    }
}

/* =========================================================
   MODULE: WISDOM LIST (wm_wisdom.css의 wl-* 부분)
   - 기존 --wm-bg 등 변수 충돌 방지: --wis-*로 통일
========================================================= */
:root{
    --wis-bg: #f7f9ff;
    --wis-card: #ffffff;
    --wis-text: #1e2939;
    --wis-sub: rgba(34,34,34,.6);
    --wis-line: rgba(74,144,226,.10);
    --wis-blue: #1554f6;
    --wis-blue-weak: rgba(76,154,242,.03);
    --wis-chip-bg: #7CC8C3;
    --wis-chip-text: #494949;

    --wis-shadow-1: 0px 8px 32px rgba(74, 144, 226, 0.12);
    --wis-shadow-2: 0px 4px 16px rgba(74, 144, 226, 0.08);
    --wis-radius: 20px;
}

/* (권장) 지혜 페이지에서 body 배경이 필요하면, 템플릿에서 body에 클래스 주고 쓰세요:
   <body class="wisdom-body"> ... */
body.wisdom-body{ background: var(--wis-bg); color: var(--wis-text); }

/* hero */
.wl-hero{
    background:#fff;
    padding: 16px 160px 12px;
}
.wl-hero__title{
    margin:0;
    font-size:24px;
    font-weight:900;
    letter-spacing:-0.02em;
    line-height:150%;
    color:#555;
}
.wl-hero__desc{
    margin:2px 0 0;
    font-size:16px;
    letter-spacing:-0.02em;
    line-height:150%;
    color: var(--wis-sub);
}

/* filter */
.wl-filter{
    background:#fff;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 158px;
}
.wl-filter__inner{
    width:100%;
    max-width: 1440px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.wl-filter__left{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.wl-chip{
    border-radius:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    font-size:14px;
    font-weight:500;
    letter-spacing:-0.02em;
    line-height:150%;
    text-decoration:none;
    user-select:none;
    border:1px solid transparent;
}
.wl-chip--active{ background:#7CC8C3; color:#fff; }
.wl-chip--ghost{
    border:1px solid #727272;
    color:#727272;
    background:#fff;
}
.wl-chip--outline{
    background: var(--wis-blue-weak);
    border:1px solid #4c9af2;
    color:#4c9af2;
}
.wl-write-btn{
    width:150px;
    height:40px;
    border-radius:13px;
    background: #7CC8C3;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:20px;
    font-weight:600;
    padding:8px 12px;
}

/* grid */
.wl-grid-wrap{ padding: 24px 0 80px; }
.wl-grid{
    max-width: 1120px;
    margin: 0 auto;
    display:grid;
    grid-template-columns: 1fr;
    gap:24px;
}

/* card */
.wl-card{
    border-radius: var(--wis-radius);
    background: var(--wis-card);
    border: 1px solid var(--wis-line);
    box-shadow: var(--wis-shadow-1), var(--wis-shadow-2);
    backdrop-filter: blur(10px);
    overflow:hidden;
    padding: 21px;
    display:flex;
    flex-direction:column;
    gap:24px;
    min-height:240px;
    cursor:pointer;
}
.wl-card:hover{ transform: translateY(-1px); }

/* header */
.wl-card__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.wl-author{ display:flex; align-items:center; gap:12px; }
.wl-avatar{
    width:40px;
    height:40px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.wl-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.wl-author-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
}
.wl-author-row{ display:flex; align-items:center; gap:8px; }
.wl-author-name{ font-size:16px; font-weight:700; color:#1e2939; }

.wl-rank{
    font-size:10px;
    font-weight:600;
    padding:2px 4px;
    border-radius:4px;
    background: linear-gradient(94.55deg, #c5c5c5, #e9e9e9 26.6%, #f1f1f1 52.65%, #c5c5c5);
    color:#00175b;
}
.wl-rank--gold{
    background: linear-gradient(94.55deg, #f5ca2f, #ffdd63 26.6%, #ffeca8 52.65%, #eab300);
    color:#755000;
}
.wl-date{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:12px;
    color:#6a7282;
}
.wl-date i{ font-size:16px; color:#6a7282; }

.wl-meta-chips{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.wl-meta-chip{
    border-radius:8px;
    background: var(--wis-chip-bg);
    padding:6px 12px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:#6a7282;
}
.wl-meta-chip b{
    color: var(--wis-chip-text);
    font-weight:600;
}

/* body */
.wl-card__mid{ display:flex; align-items:flex-start; gap:12px; }
.wl-thumb{
    width:100px;
    height:100px;
    border-radius:13px;
    background:#e5e7eb;
    flex:0 0 auto;
    overflow:hidden;
}
.wl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.wl-body{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}
.wl-title{
    font-size:20px;
    font-weight:800;
    line-height:22px;
    color:#1e2939;
    margin:0;
}
.wl-excerpt{
    font-size:14px;
    line-height:22.75px;
    color:#4a5565;
    margin:0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wl-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.wl-tag{ font-size:16px; color: var(--wis-blue); }

/* footer */
.wl-card__bottom{
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.wl-stats{
    display:flex;
    align-items:center;
    gap:16px;
    padding: 0 24px;
    font-size:14px;
    color:#6a7282;
}
.wl-stat{ display:flex; align-items:center; gap:6px; }
.wl-stat i{ font-size:16px; color:#6a7282; }


.need-login-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(17,24,39,.45);
    backdrop-filter: blur(2px);
}
.need-login-overlay.is-open{ display:flex; !important; }

#needLoginOverlay{
    position: fixed !important;
    inset: 0 !important;

    /* ✅ 최상단 보장 */
    z-index: 2147483647 !important;

    /* ✅ 기본은 숨김 */
    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;
    background: rgba(17,24,39,.45);

    /* backdrop-filter가 일부 환경에서 문제면 아래 2줄 중 1줄만 남기세요 */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
#needLoginOverlay.is-open{
    display: flex !important;
}


.need-login-modal{
    width:564px;
    max-width:100%;
    height:312px;
    position:relative;
    background:#fff;
    box-shadow:0px 4px 16px rgba(74, 144, 226, 0.08);
    border-radius:20px;
    backdrop-filter: blur(5px);
    overflow:hidden;
    font-family:Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.need-login-title{
    position:absolute; left:0; right:0; top:40px;
    text-align:center; color:#222;
    font-size:24px; font-weight:700; line-height:36px;
}
.need-login-desc-wrap{
    position:absolute; left:0; right:0; top:116px;
    display:flex; justify-content:center;
}
.need-login-desc{
    text-align:center; color:#222;
    font-size:24px; font-weight:400; line-height:36px;
}
.need-login-actions{
    width:564px; max-width:100%;
    position:absolute;
    left:0;
    bottom:0;              /* ✅ 추가 */
    top:auto;              /* ✅ 추가(기존 top 무효화) */
    padding:24px 30px;     /* 아래 여백 유지 */
    display:flex;
    gap:10px;
}
.need-login-btn{
    flex:1 1 0;
    height:60px;
    padding:12px 16px;
    border-radius:24px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    border:none;
    background:transparent;
}
.need-login-btn:focus{
    outline:3px solid rgba(21,84,246,.18);
    outline-offset:2px;
}
.need-login-btn--cancel{
    outline:1px solid #F1F5F9;
    outline-offset:-1px;
    background:#F1F5F9;
}
.need-login-btn--cancel span{
    color:#334155;
    font-size:24px; font-weight:500; line-height:36px;
}
.need-login-btn--login{ background:#7CC8C3; }
.need-login-btn--login span{
    color:#fff;
    font-size:24px; font-weight:500; line-height:36px;
}

/* =========================================================
   RESPONSIVE (COMMON + MODULE PATCHES)
========================================================= */
@media (max-width: 1200px){
    :root{ --wm-header-pad-x: 22px; }
    .wm-page-inner{ padding-left: 0px; padding-right: 0px; }

    /* help */
    .wh-actions{ padding-left: 22px; padding-right: 22px; }
    .wh-head{ padding-left: 22px; padding-right: 22px; }
    .wh-block, .wh-form{ width: 100%; padding-left: 22px; padding-right: 22px; }
    .wh-card{ padding: 32px 22px; }
    .wh-file-label, .wh-file-list{ width: 100%; }

    /* wisdom */
    .wl-hero{ padding: 16px 24px 12px; }
    .wl-filter{ padding: 0 24px; }
    .wl-grid{ padding: 0 24px; }
}

@media (max-width: 900px){
    .wq-grid{ grid-template-columns: 1fr; }
    .wq-ask-btn{ width: 100%; }
}

@media (max-width: 768px){
    .wm-footer-inner{ grid-template-columns: 1fr; gap: 26px; }

    /* v1 login only */
    .wm-login-btn{
        font-size: 18px;
        line-height: 24px;
        height: 40px;
        min-height: 40px;
    }

    /* help */
    .wh-card__kicker{ font-size: 26px; line-height: 38px; }
    .wh-field__label{ font-size: 18px; line-height: 28px; }
    .wh-btn{ font-size: 18px; line-height: 28px; height: 54px; }

    /* wisdom */
    .wl-grid{ grid-template-columns: 1fr; }
    .wl-write-btn{ width:auto; font-size:16px; padding:8px 12px; }

    /* questions */
    .wq-highlight-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
    .wq-cat-card{ padding: 22px; }
    .wq-cat-close{ top: 22px; right: 22px; }
}

@media (max-width: 1200px){
    /* senior */
    .wm-senior-container{ width: calc(100% - 32px); }
    .wm-senior-steps{ padding:12px 20px; overflow:auto; justify-content:flex-start; }
    .wm-senior-card{ padding:32px; }
    .wm-senior-formrow{ flex-direction:column; }
    .wm-senior-submit{ width:100%; }
}


/* overlay */
.wm-report-overlay{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.35);
    z-index: 2147483647;
    padding: 24px;
}
.wm-report-overlay.is-open{ display:flex; }

/* modal */
.wm-report-modal{
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 36px;
    padding: 40px 48px 44px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.wm-report-title{
    text-align:center;
    color:#0F172A;
    font-size:24px;
    font-weight:700;
    line-height:33.6px;
}

/* section */
.wm-report-section{ width:100%; display:flex; flex-direction:column; gap:12px; }
.wm-report-label{
    color:#4EB4AD;
    font-size:16px;
    font-weight:600;
    line-height:22.4px;
}
.wm-report-options{ display:flex; flex-direction:column; gap:16px; }

.wm-report-option{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    user-select:none;
}
.wm-report-radio{
    width:24px; height:24px; flex:0 0 24px;
    display:inline-flex; align-items:center; justify-content:center;
}
.wm-report-radio img{ width:24px; height:24px; display:block; }
.wm-report-option-text{
    flex:1 1 0;
    color:#0F172A;
    font-size:16px;
    font-weight:500;
    line-height:22.4px;
}

/* other input */
.wm-report-other{ width:100%; }
.wm-report-input{
    width: 400px;
    max-width: 100%;
    height: 52px;
    padding: 16px 20px;
    border-radius: 12px;
    border: 0;
    outline: 1px solid #E2E8F0;
    outline-offset: -1px;
    font-size: 15px;
    line-height: 21px;
    color:#0F172A;
}
.wm-report-input::placeholder{ color:#94A3B8; }

/* actions */
.wm-report-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
}
.wm-report-btn{
    width:120px;
    height:52px;
    border-radius:1000px;
    border:0;
    font-size:16px;
    font-weight:600;
    line-height:22.4px;
    cursor:pointer;
}
.wm-report-btn--cancel{
    background:#F1F5F9;
    color:#334155;
}
.wm-report-btn--submit{
    background:#CBD5E1;
    color:#fff;
    cursor:not-allowed;
}
.wm-report-btn--submit.is-enabled{
    background:#7CC8C3;
    cursor:pointer;
}