@charset "utf-8";

/* 팝업 창의 공통 껍데기.

   그누보드는 별창으로 뜨는 화면을 다 같은 모양으로 짠다.

       .new_win > #win_title  +  본문  +  .win_btn

   커뮤니티(프로필 · 추천메일 · 본인확인 · 비밀번호 재설정 · 설문 결과)와
   쇼핑몰(사용후기 쓰기 · 상품문의 쓰기 · 쿠폰 내역 · 상품 추천 · 재입고
   알림 · 큰 이미지)이 같은 뼈대를 쓰므로 한 벌로 덮는다. 창마다 다른
   것만 아래 "창별로 다른 것"에 적는다.

   쪽지 · 포인트 · 스크랩 세 창은 각자 제 스타일시트(memo.css · point.css ·
   scrap.css)를 갖고 있고 그쪽이 이 파일보다 먼저 실린다. 껍데기를 여기서
   덮으면 그 손질이 지워진다 — 제목의 실선, 바닥의 회색 버튼 띠가 그렇게
   덧그려졌다. 그래서 껍데기를 통째로 중첩 블록 하나에 넣고, 바깥 선택자의
   :not() 이 세 창을 한 번에 비켜 가게 한다. 새 창을 그렇게 따로 꾸미면
   그 이름도 목록에 더한다.

   skins.css 의 공통 다리에서 `.new_win` 을 뺐다. 그쪽은 `:is(#bo_list, …)`
   안에 두어 id 무게를 갖는데, 팝업 껍데기는 이제 이 파일이 통째로
   맡으므로 두 곳이 겹칠 이유가 없다. */

/* 쇼핑몰은 온담을 따라 모서리를 굴리지 않는다. 규칙을 하나 더 얹어
   덮으려 하면 카드 규칙의 :not() 세 개에 밀리므로 토큰으로 넘긴다. */
body.clarity-shop-page { --clarity-popup-radius: 0; }

/* skins.css 의 공통 다리가 하던 글꼴·제목색 몫. 아래 껍데기는 세 창을
   비켜 가므로, 이것만은 모든 팝업에 그대로 남긴다. */
body.clarity-page .new_win,
body.clarity-page .new_win :is(h1, h2, h3, h4, h5) {
    color: var(--clarity-text);
    font-family: var(--clarity-font);
}

/* --- 창 바탕 --- */

/* 팝업은 브라우저 창 하나를 통째로 쓴다. 본문 페이지와 달리 헤더도
   푸터도 없어, 카드를 가운데 세우는 일을 body 가 해야 한다.

   .new_win 이 팝업에만 나오는 것은 아니다 — 아이디·비밀번호 찾기처럼
   헤더와 사이드바를 낀 보통 페이지 안에도 들어간다. 그런 화면의 바탕까지
   바꾸면 안 되므로, 사이트 헤더가 없을 때만 건다. */
body.clarity-page:not(:has(.clarity-community-header-sticky, .clarity-shop-header-sticky)):has(.new_win:not(.clarity-memo-page, .clarity-point-page, .clarity-scrap-page)) {
    margin: 0;
    min-height: 100vh;
    background: var(--clarity-surface-soft);
}

/* --- 껍데기 --- */

body.clarity-page .new_win:not(.clarity-memo-page, .clarity-point-page, .clarity-scrap-page) {
    width: min(100% - 2rem, 46rem);
    margin: clamp(.75rem, 3vw, 2rem) auto;
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-popup-radius, var(--clarity-radius-lg));
    background: var(--clarity-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--clarity-text) 6%, transparent);
    color: var(--clarity-text);
    text-align: left;

    /* 제목.
       코어는 여기에 높이 50px 과 후광 그림자를 박아 둔다. 그림자 대신
       실선 한 줄로 머리와 몸을 가른다. */
    & #win_title {
        height: auto;
        margin: 0;
        border-bottom: 1px solid var(--clarity-border);
        background: var(--clarity-surface);
        box-shadow: none;
        color: var(--clarity-text);
        padding: 1.15rem 1.5rem;
        font-size: 1.25rem;
        font-weight: 900;
        letter-spacing: -.04em;
        line-height: 1.3;
    }

    & #win_title .win_total {
        border-radius: 0;
        background: var(--clarity-surface-soft);
        color: var(--clarity-text-soft);
    }

    /* 본문 상자는 창마다 이름이 다르다(new_win_con · form_01 · tbl_wrap).
       여백은 한 곳에서만 준다 — 겹쳐 붙으면 창마다 안쪽 폭이 달라진다. */
    & > form > :is(.new_win_con, .form_01, .tbl_wrap),
    & > :is(.new_win_con, .form_01, .tbl_wrap, ul) {
        margin: 0;
        padding: 1.5rem;
    }

    & :is(.new_win_con, .form_01) > ul {
        display: grid;
        gap: 1.1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & :is(.new_win_con, .form_01) > ul > li {
        margin: 0;
        min-width: 0;
    }

    & .frm_info {
        display: block;
        margin-top: .35rem;
        color: var(--clarity-muted);
        font-size: .78rem;
        line-height: 1.5;
    }

    /* 입력칸. 모서리를 굴리지 않고 테두리 한 줄로 둔다. */
    & :is(.frm_input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select) {
        width: 100%;
        border: 1px solid var(--clarity-border-strong);
        border-radius: var(--clarity-popup-radius, var(--clarity-radius-sm));
        background: var(--clarity-surface);
        color: var(--clarity-text);
        padding: .6rem .8rem;
        font: inherit;
        font-size: .9rem;
    }

    /* 한 줄짜리 입력만 44px 를 보장한다. 높이를 위 규칙에 함께 두면 :is()
       가 속성 선택자 무게를 얻어 아래 textarea 규칙을 눌러 버린다.
       textarea 도 .frm_input 을 달고 있어 여기서 따로 빼 준다. */
    & :is(.frm_input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select):not(textarea) {
        min-height: 2.75rem;
    }

    & textarea {
        min-height: 8rem;
        line-height: 1.6;
        resize: vertical;
    }

    & :is(.frm_input, textarea, select):focus {
        border-color: var(--clarity-primary);
        box-shadow: none !important;
        outline: 2px solid color-mix(in srgb, var(--clarity-primary) 45%, transparent);
        outline-offset: 1px;
    }

    & ::placeholder { color: var(--clarity-muted-soft); }

    /* 좌우 두 칸짜리 줄(상품문의의 이메일 · 휴대폰). 코어는 float 로 띄운다. */
    & li:has(> .form_left) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
    }

    & :is(.form_left, .form_right) {
        float: none;
        width: auto;
        min-width: 0;
    }

    /* 체크상자.
       코어 스킨은 label 안의 빈 span 을 배경 이미지로 칠해 표식을 만든다.
       그 이미지는 파란색이라 팔레트에서 겉돈다. 진짜 입력을 보이게
       되돌리고 accent-color 로 색만 맞춘다. */
    & .chk_box label > span { display: none !important; }

    & .chk_box :is(input[type="checkbox"], input[type="radio"]) {
        position: static;
        width: 1.05rem;
        height: 1.05rem;
        margin: 0;
        accent-color: var(--clarity-primary);
        opacity: 1;
    }

    & .chk_box > label {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        gap: .5rem;
        color: var(--clarity-text-soft);
        font-size: .9rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* 바닥 버튼.
       쿠폰 내역만 .btn_close 가 .win_btn 없이 창의 직계다. 버튼 규칙을
       .win_btn 안쪽으로 좁히지 않고 둘 다 잡는 이유다. */
    & .win_btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .5rem;
        margin: 0;
        border-top: 1px solid var(--clarity-border);
        background: var(--clarity-surface-soft);
        padding: 1rem 1.5rem;
        text-align: right;
    }

    /* 창 안 어디에 있든 잡는다. 본인확인처럼 .win_btn 도 .new_win_con 도
       아닌 .cert_btn 안에 버튼을 두는 스킨이 있다. */
    & :is(.btn_submit, #btn_submit, .btn_close) {
        display: inline-flex;
        min-width: 6.5rem;
        min-height: 2.75rem;
        align-items: center;
        justify-content: center;
        /* 카드와 같은 결로. 쇼핑몰은 0, 커뮤니티는 살짝 둥글다. */
        border-radius: var(--clarity-popup-radius, var(--clarity-radius-sm));
        padding: 0 1.25rem;
        font-size: .9rem;
        font-weight: 800;
        letter-spacing: -.02em;
        cursor: pointer;
    }

    /* 추천메일만 보내기 단추에 .btn_submit 대신 id 를 쓴다
       (btn_b02 reply_btn + #btn_submit). 그래서 둘 다 잡는다. */
    & :is(.btn_submit, #btn_submit) {
        order: 2;
        border: 1px solid var(--clarity-primary);
        background: var(--clarity-primary);
        color: var(--color-primary-content, #fff);
    }

    & :is(.btn_submit, #btn_submit):hover {
        border-color: var(--clarity-primary-hover);
        background: var(--clarity-primary-hover);
    }

    & .btn_close {
        order: 1;
        border: 1px solid var(--clarity-border-strong);
        background: var(--clarity-surface);
        color: var(--clarity-text-soft);
    }

    & .btn_close:hover {
        border-color: var(--clarity-text-soft);
        color: var(--clarity-text);
    }

    & :is(.btn_submit, #btn_submit, .btn_close):focus-visible {
        outline: 2px solid var(--clarity-primary);
        outline-offset: 2px;
    }

    /* 빈 상태는 본문(위시리스트 · 쿠폰존)과 같은 점선 상자로. */
    & :is(.empty_li, .empty_list) {
        display: block;
        border: 1px dashed var(--clarity-border-strong);
        color: var(--clarity-muted);
        padding: 2.5rem 1rem;
        text-align: center;
        font-size: .9rem;
    }

    /* 팝업 폭은 window.open 이 정하지만 사용자가 줄일 수 있다. */
    @media (max-width: 640px) {
        width: 100%;
        margin: 0;
        border-inline: 0;

        & > form > :is(.new_win_con, .form_01, .tbl_wrap),
        & > :is(.new_win_con, .form_01, .tbl_wrap, ul) {
            padding: 1.15rem;
        }

        & #win_title { padding: 1rem 1.15rem; }
        & .win_btn { padding: .85rem 1.15rem; }
        & li:has(> .form_left) { grid-template-columns: minmax(0, 1fr); }
    }
}

/* --- 헤더가 있는 페이지 안의 .new_win --- */

/* 아이디·비밀번호 찾기, 본인인증 다시 하기처럼 헤더와 사이드바를 낀 보통
   페이지 안에도 .new_win 이 들어간다. 이때는 창을 가운데 세울 이유가 없다.
   46rem 로 묶어 두면 같은 페이지의 다른 카드보다 좁아 단이 어긋난다.
   본인인증 화면에서 위아래 두 카드의 폭이 달랐다. 겉모습은 그대로 두고
   폭만 본문에 맡긴다. */
body.clarity-page:has(.clarity-community-header-sticky, .clarity-shop-header-sticky) .new_win {
    width: auto;
    margin-inline: 0;
}

/* 본인인증의 인증수단 상자는 스킨이 #find_info 로 모서리를 3px 로 못 박아
   둔다. 같은 페이지의 다른 카드와 어긋나므로 무게를 맞춰 되돌린다. */
body.clarity-page #find_info.new_win {
    border-radius: var(--clarity-popup-radius, var(--clarity-radius-lg));
}

/* 동의 체크상자. 스킨은 안내 카드 오른쪽 끝에 띄워 두는데, 문구를 드러내고
   나면 제목과 떨어져 읽힌다. 표 아래 한 줄로 내린다. */
body.clarity-page .member_cert_refresh_agree {
    position: static;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid var(--clarity-border);
    margin: 0 1.25rem 1.25rem;
    padding: 1rem 0 0;
}

body.clarity-page .member_cert_refresh_agree label {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .5rem;
    color: var(--clarity-text-soft);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

body.clarity-page .member_cert_refresh_agree label > span { display: none; }

body.clarity-page .member_cert_refresh_agree b { font-weight: 600; }

body.clarity-page .member_cert_refresh_agree input[type="checkbox"] {
    position: static;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--clarity-primary);
    opacity: 1;
}

/* 인증수단 단추 세 개는 한 줄로. */
body.clarity-page .cert_btn {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* --- 창별로 다른 것 --- */

/* 프로필 — 이름 띠 · 표 · 인사말.
   스킨은 이름 자리에 큰 프로필 사진과 get_sideview() 를 나란히 찍는다.
   sideview 안에도 22px 사진이 들어 있어 같은 얼굴이 두 번 나온다.
   큰 것만 남기고 sideview 쪽 사진은 접는다. 제목의 sideview 도 같다. */
body.clarity-page #profile :is(#win_title, .profile_name) .sv_wrap .profile_img { display: none; }

body.clarity-page #profile #win_title .sv_wrap a {
    color: inherit;
    font: inherit;
    cursor: default;
}

body.clarity-page #profile .profile_name {
    display: flex;
    align-items: center;
    gap: .9rem;
    border-bottom: 1px solid var(--clarity-border);
    background: var(--clarity-surface-soft);
    padding: 1.25rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

body.clarity-page #profile .my_profile_img img {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--clarity-border);
    border-radius: 50%;
    object-fit: cover;
}

/* 표는 라벨·값이 번갈아 나오는 네 칸짜리다. 좁은 창에서 라벨이 눌려
   "회원가입 / 일" 처럼 글자가 끊기므로, 칸을 풀어 두 쌍씩 세운다. */
body.clarity-page #profile .tbl_head02 { border: 0; }

body.clarity-page #profile .tbl_head02 table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

body.clarity-page #profile .tbl_head02 :is(tbody, tr) { display: block; }

body.clarity-page #profile .tbl_head02 tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem 1.25rem;
}

body.clarity-page #profile .tbl_head02 :is(th, td) {
    display: block;
    width: auto;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    white-space: nowrap;
}

body.clarity-page #profile .tbl_head02 th {
    grid-row: 1;
    color: var(--clarity-muted);
    font-size: .8rem;
    font-weight: 700;
}

body.clarity-page #profile .tbl_head02 td {
    grid-row: 2;
    margin-bottom: 1rem;
    color: var(--clarity-text);
    font-size: .95rem;
    font-weight: 700;
}

/* 홈페이지 줄은 colspan 으로 한 칸을 다 쓴다. */
body.clarity-page #profile .tbl_head02 td[colspan] {
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.clarity-page #profile .tbl_head02 th i {
    margin-right: .3rem;
    color: var(--clarity-muted-soft);
}

body.clarity-page #profile .new_win_con > section {
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-popup-radius, var(--clarity-radius-md));
    background: var(--clarity-surface-soft);
    padding: 1rem 1.15rem;
}

body.clarity-page #profile .new_win_con > section h2 {
    margin: 0 0 .4rem;
    color: var(--clarity-muted);
    font-size: .8rem;
    font-weight: 800;
}

body.clarity-page #profile .new_win_con > section p {
    margin: 0;
    color: var(--clarity-text-soft);
    font-size: .9rem;
    line-height: 1.65;
}


/* 사용후기 쓰기 — 평점.
   스킨은 li 를 33.333% 로 띄워 다섯 줄이 3열 두 줄로 접힌다. 다섯을 한
   줄에 늘어놓고 각각을 고를 수 있는 칸으로 만든다. */
body.clarity-shop-page #sit_use_write #sit_use_write_star {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.clarity-shop-page #sit_use_write #sit_use_write_star:after { display: none; }

body.clarity-shop-page #sit_use_write #sit_use_write_star > li {
    position: relative;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--clarity-border);
    background: var(--clarity-surface);
    padding: .85rem .5rem;
    text-align: center;
    transition: border-color .15s, background .15s;
}

body.clarity-shop-page #sit_use_write #sit_use_write_star > li:has(:checked) {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
}

/* 라디오를 칸 전체에 깔아 어디를 눌러도 골라지게 한다. 화면에서 지우지
   않고 투명하게만 두어 키보드 초점과 낭독기 이름은 그대로 남는다. */
body.clarity-shop-page #sit_use_write #sit_use_write_star input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

body.clarity-shop-page #sit_use_write #sit_use_write_star label {
    display: block;
    min-height: 0;
    color: var(--clarity-text-soft);
    font-size: .82rem;
    font-weight: 700;
    pointer-events: none;
}

body.clarity-shop-page #sit_use_write #sit_use_write_star > li:has(:checked) label {
    color: var(--clarity-primary);
}

body.clarity-shop-page #sit_use_write #sit_use_write_star img {
    display: block;
    width: 5.3rem;
    max-width: 100%;
    height: auto;
    margin: .4rem auto 0;
}

/* 라디오가 칸 전체를 덮고 있어 키보드 초점 링은 칸에 그린다. */
body.clarity-shop-page #sit_use_write #sit_use_write_star > li:has(:focus-visible) {
    outline: 2px solid var(--clarity-primary);
    outline-offset: 2px;
}

/* 재입고 알림 — 상품 이름 띠와 약관 상자. */
body.clarity-shop-page #sit_sms_new .form_01 { padding: 1.5rem; }

body.clarity-shop-page #sit_sms_new .prd_name {
    border-left: 3px solid var(--clarity-primary);
    background: var(--clarity-surface-soft);
    color: var(--clarity-text);
    padding: .9rem 1rem;
    font-size: 1rem;
    font-weight: 800;
}

body.clarity-shop-page #sit_sms_new li > strong {
    display: block;
    margin: 0 0 .5rem;
    color: var(--clarity-text-soft);
    font-size: .85rem;
    font-weight: 800;
}

body.clarity-shop-page #sit_sms_new textarea {
    min-height: 9rem;
    background: var(--clarity-surface-soft);
    color: var(--clarity-text-soft);
    font-size: .82rem;
}

body.clarity-shop-page #sit_sms_new #sms_agree { padding: 0; }

/* 상품 추천 — 표를 라벨 위 · 입력 아래로 편다. 두 칸짜리 표는 좁은
   창에서 라벨 칸이 눌려 글자가 세로로 쌓인다. */
body.clarity-shop-page #sit_rec_new .tbl_wrap { margin: 0; }

body.clarity-shop-page #sit_rec_new table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

body.clarity-shop-page #sit_rec_new :is(tbody, tr) { display: block; }

body.clarity-shop-page #sit_rec_new tr + tr { margin-top: 1.1rem; }

body.clarity-shop-page #sit_rec_new :is(th, td) {
    display: block;
    width: auto;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
}

body.clarity-shop-page #sit_rec_new th {
    margin-bottom: .4rem;
    color: var(--clarity-text-soft);
    font-size: .85rem;
    font-weight: 800;
}

/* 쿠폰 내역 — 쿠폰 한 장을 카드로. 오른쪽 끝에 할인값을 크게 둔다. */
body.clarity-shop-page #coupon > ul {
    display: grid;
    gap: .6rem;
    list-style: none;
}

/* 빈 상태 줄은 쿠폰 카드가 아니다. 아래 .empty_li 규칙에 넘긴다. */
body.clarity-shop-page #coupon > ul > li:not(.empty_li) {
    display: grid;
    gap: .5rem;
    border: 1px solid var(--clarity-border);
    background: var(--clarity-surface);
    padding: 1rem 1.15rem;
}

body.clarity-shop-page #coupon .cou_top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

body.clarity-shop-page #coupon .cou_tit {
    color: var(--clarity-text);
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

body.clarity-shop-page #coupon .cou_pri {
    flex: none;
    color: var(--ondam-sale, var(--clarity-primary));
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

body.clarity-shop-page #coupon .cou_top + div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: var(--clarity-muted);
    font-size: .8rem;
}

/* 쿠폰 내역은 .win_btn 없이 창닫기가 직계라 바닥 띠를 직접 만든다. */
body.clarity-shop-page #coupon > .btn_close {
    display: block;
    width: calc(100% - 3rem);
    margin: 0 1.5rem 1.5rem;
}

/* 큰 이미지 보기 — 창 크기를 스크립트가 이미지에 맞춰 다시 잡는다.
   카드 폭을 좁히면 그 계산과 어긋나므로 여기서는 폭을 풀어 둔다. */
body.clarity-shop-page #sit_pvi_nw.new_win {
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--clarity-surface);
    box-shadow: none;
}

body.clarity-shop-page #sit_pvi_nw #sit_pvi_nwbig img {
    max-width: 100%;
    height: auto;
}

body.clarity-shop-page #sit_pvi_nw ul { padding: 0 1.5rem; }

body.clarity-shop-page #sit_pvi_nw li img {
    border: 1px solid var(--clarity-border);
    object-fit: cover;
}

body.clarity-shop-page #sit_pvi_nw .img_thumb:hover img,
body.clarity-shop-page #sit_pvi_nw .img_thumb:focus-visible img {
    border-color: var(--clarity-primary);
}

/* --- 좁은 창 --- */

/* 공통 껍데기 몫은 위 중첩 블록 안에 있다. 여기는 창별 예외만 남긴다. */
@media (max-width: 640px) {
    body.clarity-shop-page #sit_sms_new .form_01 { padding: 1.15rem; }

    body.clarity-shop-page #sit_use_write #sit_use_write_star {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.clarity-shop-page #coupon > .btn_close {
        width: calc(100% - 2.3rem);
        margin: 0 1.15rem 1.15rem;
    }
}