/* BASIC css start */
/* ============================================================
   문구대통령 추석 룰렛 - MOBILE
============================================================ */


/* ============================================================
   FONT
============================================================ */

@font-face {
    font-family:'Noto Sans';
    font-style:normal;
    font-weight:100;
    src:url(/images/web-font/NotoSans-Thin.woff2) format('woff2'),
        url(/images/web-font/NotoSans-Thin.woff) format('woff'),
        url(/images/web-font/NotoSans-Thin.otf) format('opentype');
}

@font-face {
    font-family:'Noto Sans';
    font-style:normal;
    font-weight:300;
    src:url(/images/web-font/NotoSans-Light.woff2) format('woff2'),
        url(/images/web-font/NotoSans-Light.woff) format('woff'),
        url(/images/web-font/NotoSans-Light.otf) format('opentype');
}

@font-face {
    font-family:'Noto Sans';
    font-style:normal;
    font-weight:400;
    src:url(/images/web-font/NotoSans-Regular.woff2) format('woff2'),
        url(/images/web-font/NotoSans-Regular.woff) format('woff'),
        url(/images/web-font/NotoSans-Regular.otf) format('opentype');
}

@font-face {
    font-family:'Noto Sans';
    font-style:normal;
    font-weight:500;
    src:url(/images/web-font/NotoSans-Medium.woff2) format('woff2'),
        url(/images/web-font/NotoSans-Medium.woff) format('woff'),
        url(/images/web-font/NotoSans-Medium.otf) format('opentype');
}

@font-face {
    font-family:'Noto Sans';
    font-style:normal;
    font-weight:700;
    src:url(/images/web-font/NotoSans-Bold.woff2) format('woff2'),
        url(/images/web-font/NotoSans-Bold.woff) format('woff'),
        url(/images/web-font/NotoSans-Bold.otf) format('opentype');
}

@font-face {
    font-family:'Noto Sans';
    font-style:normal;
    font-weight:900;
    src:url(/images/web-font/NotoSans-Black.woff2) format('woff2'),
        url(/images/web-font/NotoSans-Black.woff) format('woff'),
        url(/images/web-font/NotoSans-Black.otf) format('opentype');
}


#R_roulette_event_wrap,
#R_roulette_event_wrap * {
    box-sizing:border-box;
    font-family:'Noto Sans',sans-serif;
}


/* ============================================================
   전체
============================================================ */

#R_roulette_event_wrap {
    position:relative;

    width:100%;
    margin:0 auto;

    overflow:hidden;

    background:#fffaf0;

    color:#1d2b44;
}


/* ============================================================
   이벤트 메인
============================================================ */

#R_roulette_event_wrap .R_cont-wrap {
    position:relative;

    width:100%;

    padding:26px 10px 28px;

    background:
        radial-gradient(
            circle at 108% -2%,
            #f6d46f 0,
            #f6d46f 16vw,
            transparent 16.2vw
        ),
        radial-gradient(
            circle at -14% 100%,
            rgba(226,189,103,.12) 0,
            rgba(226,189,103,.12) 32vw,
            transparent 32.2vw
        ),
        linear-gradient(
            180deg,
            #fffaf1 0%,
            #fff8e9 100%
        );
}


/* ============================================================
   TITLE
============================================================ */

#R_roulette_event_wrap .R_title {
    position:relative;
    z-index:5;

    text-align:center;
}


#R_roulette_event_wrap .R_kicker {
    margin:0 0 7px;

    color:#ae751e;

    font-size:10px;
    font-weight:900;

    letter-spacing:1.8px;
}


#R_roulette_event_wrap .R_once {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    height:30px;

    margin:0 auto 10px;
    padding:0 16px;

    border-radius:18px;

    background:#d8992c;

    color:#fff;

    font-size:14px;
    font-weight:900;
}


#R_roulette_event_wrap .R_title h3 {
    margin:0;
    padding:0 7px;

    color:#1d2b44;

    font-size:clamp(27px,7.4vw,35px);
    font-weight:900;

    line-height:1.15;
    letter-spacing:-2px;

    word-break:keep-all;
}


#R_roulette_event_wrap .R_subcopy {
    margin-top:9px;

    color:#655d51;

    font-size:13px;
    font-weight:500;

    line-height:1.45;
    letter-spacing:-.5px;
}


#R_roulette_event_wrap .R_period {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:228px;
    height:45px;

    margin:18px auto 0;
    padding:0 18px;

    border:1px solid #e2bd67;
    border-radius:24px;

    background:rgba(255,255,255,.88);

    color:#1d2b44;

    font-size:15px;
    font-weight:900;

    letter-spacing:-.5px;
}


#R_roulette_event_wrap .R_period span {
    margin:0 10px;

    color:#bf8125;
}


/* ============================================================
   ROULETTE VIEWPORT
============================================================ */

#R_roulette_event_wrap .R_roulette-mobile-viewport {
    position:relative;

    width:calc(100vw - 20px);
    max-width:640px;

    margin:28px auto 0;

    overflow:visible;
}


/* ============================================================
   ROULETTE STAGE

   정상 커스텀 룰렛이 완성될 때까지 숨김
============================================================ */

#R_roulette_event_wrap .R_roulette-stage {
    position:absolute;

    left:50%;
    top:16px;

    width:640px;
    height:640px;

    margin-left:-320px;
    padding:20px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #f8e7ad 0%,
            #d8aa4e 38%,
            #a97328 73%,
            #e1bd67 100%
        );

    box-shadow:
        0 13px 25px rgba(115,75,24,.20),
        0 0 0 5px rgba(236,208,139,.45);

    transform-origin:50% 0;
    -webkit-transform-origin:50% 0;

    visibility:hidden;
    opacity:0;
}


#R_roulette_event_wrap .R_roulette-stage.is-ready {
    visibility:visible;
    opacity:1;
}


/* ============================================================
   POINTER
============================================================ */

#R_roulette_event_wrap .R_roulette-stage::before {
    position:absolute;

    z-index:70;

    left:50%;
    top:-13px;

    width:0;
    height:0;

    border-left:25px solid transparent;
    border-right:25px solid transparent;
    border-top:45px solid #c3653d;

    transform:translateX(-50%);

    content:'';
}


#R_roulette_event_wrap .R_roulette-stage::after {
    position:absolute;

    z-index:71;

    left:50%;
    top:-5px;

    width:15px;
    height:15px;

    border:2px solid #d69a2f;
    border-radius:50%;

    background:#fffdf5;

    transform:translateX(-50%);

    content:'';
}


/* ============================================================
   BULBS
============================================================ */

#R_roulette_event_wrap .R_bulb-ring {
    position:absolute;

    z-index:15;

    left:0;
    top:0;

    width:100%;
    height:100%;

    pointer-events:none;
}


#R_roulette_event_wrap .R_bulb-ring i {
    position:absolute;

    left:50%;
    top:50%;

    width:8px;
    height:8px;

    margin:-4px;

    border-radius:50%;

    background:#fff7ce;

    box-shadow:
        0 0 0 1px rgba(133,92,27,.25),
        0 0 7px rgba(255,245,176,.95);

    transform-origin:4px 4px;
}


/* ============================================================
   ROULETTE
============================================================ */

#R_roulette_event_wrap .R_roulette-wrap {
    position:relative;

    z-index:20;

    width:600px;
    height:600px;

    margin:0 auto;

    overflow:hidden;

    border-radius:50%;

    background:#fff9ea;
}


#R_roulette_event_wrap .dummy-canvas {
    width:600px !important;
    height:600px !important;
    min-height:600px !important;
}


#R_roulette_event_wrap .event-wheel-wrap {
    width:600px !important;
    height:600px !important;

    max-width:none !important;
}


#R_roulette_event_wrap canvas#eventWheel {
    display:block !important;

    width:600px !important;
    height:600px !important;

    max-width:none !important;

    z-index:1;
}


/* ============================================================
   START
============================================================ */

#R_roulette_event_wrap .event-wheel-start {
    position:absolute;

    z-index:30;

    display:flex !important;

    align-items:center;
    justify-content:center;

    width:164px;
    height:164px;

    margin:0;

    border:3px solid #344e77;
    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            #38527d 0%,
            #263b5d 48%,
            #172941 100%
        );

    color:#fff !important;

    font-size:35px;
    font-weight:900;

    line-height:1;

    white-space:nowrap;
    text-align:center;

    text-decoration:none !important;

    box-shadow:
        0 10px 22px rgba(18,32,53,.30),
        inset 0 0 0 6px rgba(255,255,255,.045);

    -webkit-tap-highlight-color:transparent;
}


#R_roulette_event_wrap .event-wheel-start,
#R_roulette_event_wrap .event-wheel-start:hover,
#R_roulette_event_wrap .event-wheel-start:focus,
#R_roulette_event_wrap .event-wheel-start:active {
    transform:none !important;
    -webkit-transform:none !important;
}


#R_roulette_event_wrap .event-wheel-start span {
    display:block;

    color:#fff;

    font-size:35px;
    font-weight:900;

    line-height:1;

    letter-spacing:-1px;

    transform:none !important;
}


/* MakeShop 기본 포인터 숨김 */

#R_roulette_event_wrap .event-wheel-pointer {
    display:none !important;
}


/* ============================================================
   GUIDE
============================================================ */

#R_roulette_event_wrap .R_spin-guide {
    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    margin:17px auto 0;

    color:#514a40;

    font-size:12px;
    font-weight:800;

    line-height:1.45;
    letter-spacing:-.7px;

    text-align:center;
}


#R_roulette_event_wrap .R_spin-dot {
    flex:0 0 4px;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#c88929;
}


/* ============================================================
   NOTICE
============================================================ */

#R_roulette_event_wrap .R_notice {
    margin:15px 8px 20px;
    padding:21px 16px 17px;

    border:1px solid #eadcb8;
    border-radius:13px;

    background:#fffdf7;

    color:#61594e;
}


#R_roulette_event_wrap .R_notice dt {
    margin:0 0 12px;
    padding:0;

    color:#1d2b44;

    font-size:16px;
    font-weight:900;
}


#R_roulette_event_wrap .R_notice dd {
    position:relative;

    margin:0 0 7px;
    padding:0 0 0 12px;

    color:#675f55;

    font-size:12px;

    line-height:1.55;

    word-break:keep-all;
}


#R_roulette_event_wrap .R_notice dd::before {
    position:absolute;

    left:0;
    top:0;

    color:#c4882b;

    content:'·';
}


#R_roulette_event_wrap .R_notice dd:last-child {
    margin-bottom:0;
}


/* ============================================================
   COMMENT
============================================================ */

#R_roulette_event_wrap .R_comment-wrap {
    width:100%;

    padding:22px 8px 30px;

    background:#f8eed6;
}


#R_roulette_event_wrap .R_comment-wrap .inner {
    width:100% !important;

    margin:0 auto;
}


/* ============================================================
   COMMENT INPUT

   메이크샵 form 내부 요소도
   .input-box의 직접 flex item처럼 사용
============================================================ */

#R_roulette_event_wrap .R_comment-wrap .input-box {
    display:flex !important;

    align-items:stretch !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    gap:8px;
}


#R_roulette_event_wrap .R_comment-wrap .input-box form {
    display:contents !important;
}


#R_roulette_event_wrap .R_comment-wrap .input-box label {
    display:contents !important;
}


#R_roulette_event_wrap .R_comment-wrap .input-box .input-text {
    flex:1 1 0 !important;

    display:block !important;

    width:0 !important;
    min-width:0 !important;
    max-width:none !important;

    height:42px !important;

    margin:0 !important;
    padding:0 13px !important;

    border:1px solid #d6c49b !important;
    border-radius:8px !important;

    background:#fff !important;

    color:#333 !important;

    font-size:13px !important;

    box-sizing:border-box !important;
}


#R_roulette_event_wrap .R_comment-wrap .input-box .btn-apply {
    position:static !important;

    flex:0 0 68px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;

    height:42px !important;

    margin:0 !important;
    padding:0 !important;

    float:none !important;

    border-radius:8px;

    background:#1d2b44;

    color:#fff;

    font-size:13px;
    font-weight:800;

    line-height:1;

    white-space:nowrap;

    text-align:center;
}


/* ============================================================
   COMMENT LIST
============================================================ */

#R_roulette_event_wrap .R_comment-wrap .comment-table-list {
    width:100%;

    margin-top:12px;
    padding:6px 15px 22px;

    border:1px solid #e0d3b5;
    border-radius:10px;

    background:#fff;
}


#R_roulette_event_wrap .R_comment-wrap .comment-table-list table {
    width:100%;
}


#R_roulette_event_wrap .R_comment-wrap .comment-table-list caption {
    display:none;
}


#R_roulette_event_wrap .R_comment-wrap .comment-table-list td {
    position:relative;

    padding:14px 0;

    border-bottom:1px solid #eee;

    color:#333;

    font-size:12px;
}


#R_roulette_event_wrap .R_comment-wrap .benefit {
    color:#c17d20;

    font-weight:800;
}


#R_roulette_event_wrap .R_comment-wrap .btn-del {
    float:right;

    color:#777;

    font-size:11px;
}


#R_roulette_event_wrap .R_comment-wrap .content {
    display:block;

    margin:6px 0;

    line-height:1.5;

    word-break:break-all;
}


#R_roulette_event_wrap .R_comment-wrap .name,
#R_roulette_event_wrap .R_comment-wrap .date,
#R_roulette_event_wrap .R_comment-wrap .line {
    color:#aaa;
}


#R_roulette_event_wrap .R_comment-wrap .no-data {
    margin:25px auto 10px;

    color:#999;

    font-size:12px;

    text-align:center;
}


/* ============================================================
   PAGING
============================================================ */

#R_roulette_event_wrap .R_comment-wrap .paging {
    margin-top:20px;

    text-align:center;
}


#R_roulette_event_wrap .R_comment-wrap .paging a {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;

    color:#999;

    font-size:12px;
}


#R_roulette_event_wrap .R_comment-wrap .paging a.now {
    border-radius:4px;

    background:#1d2b44;

    color:#fff;
}


/* ============================================================
   추천상품
============================================================ */

#R_roulette_event_wrap > .list_shopping2x {
    padding:18px 8px 25px;

    background:#fff;
}


#R_roulette_event_wrap > .list_shopping2x ul {
    padding-top:0 !important;
}


#R_roulette_event_wrap > .list_shopping2x li.R_recommend_img {
    width:50% !important;
}


#R_roulette_event_wrap > .list_shopping2x li.R_recommend_img img.listPic {
    width:100%;
    height:auto;
}


#R_roulette_event_wrap > .list_shopping2x li.R_recommend_img .listName {
    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;
}


/* ============================================================
   POPUP
============================================================ */

.R_pop-roulette-layer,
.R_pop-roulette-layer * {
    box-sizing:border-box;

    font-family:'Noto Sans',sans-serif;
}


.R_pop-roulette-layer {
    position:fixed;

    z-index:9999;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(12,23,39,.72);
}


.R_pop-roulette-layer .R_pop-layer {
    position:absolute;

    left:50%;
    top:50%;

    width:calc(100% - 40px);
    max-width:360px;

    padding:0 22px 24px;

    border:1px solid #e0c278;
    border-radius:18px;

    background:#fffaf0;

    text-align:center;

    transform:translate(-50%,-50%);
}


.R_pop-roulette-layer .R_pop-layer .btn-close {
    position:absolute;

    z-index:2;

    top:14px;
    right:14px;
}


.R_pop-roulette-layer .R_pop-layer .R_title {
    padding:28px 0 20px;

    color:#1d2b44;
}


.R_pop-roulette-layer .R_pop-layer .R_title span {
    color:#bd7c20;

    font-size:13px;
    font-weight:900;

    letter-spacing:1.5px;
}


.R_pop-roulette-layer .R_pop-layer .R_title p {
    margin-top:7px;

    font-size:22px;
    font-weight:900;
}


.R_pop-roulette-layer .R_pop-layer .img {
    width:145px;

    margin:0 auto;
}


.R_pop-roulette-layer .R_pop-layer .img img {
    width:100%;
    height:auto;
}


.R_pop-roulette-layer .R_pop-layer .R_pop-benefit {
    margin:12px 10px 0;
    padding:10px 8px;

    border:2px solid #d4a54c;
    border-radius:25px;

    background:#fff;

    color:#1d2b44;

    font-size:15px;
    font-weight:900;
}


.R_pop-roulette-layer .R_pop-layer .R_txt {
    padding:20px 0 10px;

    color:#5c554b;

    font-size:12px;
    font-weight:700;
}


.R_pop-roulette-layer .R_pop-layer textarea {
    width:100%;
    height:75px;

    padding:12px;

    border:1px solid #d8c9a8;
    border-radius:7px;

    font-size:12px;

    resize:none;
}


.R_pop-roulette-layer .R_pop-layer .btn-write {
    display:block;

    margin-top:8px;
    padding:13px;

    border-radius:7px;

    background:#1d2b44;

    color:#fff;

    font-size:14px;
    font-weight:800;
}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width:359px) {

    #R_roulette_event_wrap .R_title h3 {
        font-size:25px;
    }

    #R_roulette_event_wrap .R_subcopy {
        font-size:12px;
    }

    #R_roulette_event_wrap .R_period {
        min-width:210px;

        height:42px;

        font-size:14px;
    }

    #R_roulette_event_wrap .R_roulette-mobile-viewport {
        width:calc(100vw - 12px);
    }

    #R_roulette_event_wrap .R_spin-guide {
        font-size:11px;
    }

}
/* BASIC css end */