@charset "utf-8";
/* ============================================================
   뷰에 흩어져 있던 <style> 블록을 한곳에 모은 파일 (2026-09-21)
   - 원래 각 .cshtml 안에 하드코딩돼 있던 것을 그대로 옮겨왔다
   - 블록마다 어느 뷰에서 왔는지 주석으로 표시
   - 레이아웃에서 한 번만 불러온다
   - 페이지별 스코프(.renewal-* 등)가 그대로라 다른 화면에 번지지 않는다
   ============================================================ */

/* ==========================================================
   Views/Board/Board.cshtml
   ========================================================== */
    .renewal-board {
        --rb-orange:      #F9781A;
        --rb-orange-deep: #E56610;
        --rb-orange-soft: #FFE8D6;
        --rb-orange-tint: #FFF5EC;
        --rb-gold:        #C89A3D;
        --rb-brown:       #5D4E3D;
        --rb-navy:        #2C3E50;
        --rb-cream:       #FFF8EE;
        --rb-cream-2:     #FEFAF3;
        --rb-line:        #EFE9DA;
        --rb-line-2:      #F5EFE3;
        --rb-ink:         #1F1815;
        --rb-ink-2:       #4A423B;
        --rb-ink-3:       #8A8278;
        --rb-crimson:     #E11D48;

        background: var(--rb-cream);
        min-height: 100vh;
        padding: 12px 0 32px;
        font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
    }
    .renewal-board * { box-sizing: border-box; }
    .renewal-board .rb-wrap {
        max-width: 520px;
        margin: 0 auto;
        padding: 0 12px;
    }

    /* ---- 헤더 (뒤로가기 + 제목) ---- */
    .renewal-board .rb-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 4px 12px;
    }
    .renewal-board .rb-head .rb-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: var(--rb-ink-2);
        border-radius: 50%;
        cursor: pointer;
        font-size: 18px;
        transition: background 0.15s;
        text-decoration: none;
    }
    .renewal-board .rb-head .rb-back:hover { background: #fff; color: var(--rb-orange); }
    .renewal-board .rb-head .rb-title {
        font-size: 17px;
        font-weight: 800;
        color: var(--rb-ink);
        letter-spacing: -0.02em;
        flex: 1;
    }
    .renewal-board .rb-head .rb-total {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 8px;
        background: var(--rb-orange);
        color: #fff;
        border-radius: 11px;
        font-size: 11px;
        font-weight: 800;
    }

    /* ---- 카테고리 필터 (공지사항 전용) - 여러 줄 wrap ---- */
    .renewal-board .rb-filter {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        padding: 4px 0 12px;
    }
    .renewal-board .rb-chip {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #fff;
        border: 1.5px solid var(--rb-line);
        color: var(--rb-ink-2);
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        padding: 7px 14px;
        border-radius: 99px;
        cursor: pointer;
        transition: all 0.15s;
        letter-spacing: -0.02em;
    }
    /* 2026-09-29 : 탭이 button → a(서버 재조회 링크)로 바뀌어 링크 기본 스타일을 지운다 */
    .renewal-board .rb-chip,
    .renewal-board a.rb-chip:hover,
    .renewal-board a.rb-chip:focus { text-decoration: none; }
    .renewal-board a.rb-chip { color: var(--rb-ink-2); }
    .renewal-board a.rb-chip.on { color: #fff; }
    .renewal-board .rb-chip:hover { border-color: var(--rb-orange); }
    .renewal-board .rb-chip .rb-cnt {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        background: var(--rb-line-2);
        color: var(--rb-ink-2);
        border-radius: 9px;
        font-size: 10.5px;
        font-weight: 700;
    }
    .renewal-board .rb-chip.on {
        background: var(--rb-ink);
        border-color: var(--rb-ink);
        color: #fff;
    }
    .renewal-board .rb-chip.on .rb-cnt {
        background: #fff;
        color: var(--rb-ink);
    }

    /* ---- 리스트 ---- */
    .renewal-board .rb-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .renewal-board .rb-row {
        background: #fff;
        border: 1.5px solid var(--rb-line);
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.12s;
        overflow: hidden;
    }
    .renewal-board .rb-row:hover {
        border-color: var(--rb-orange-soft);
        box-shadow: 0 4px 12px rgba(249,120,26,0.06);
    }
    .renewal-board .rb-row.rb-open {
        border-color: var(--rb-orange);
        box-shadow: 0 4px 14px rgba(249,120,26,0.12);
    }
    .renewal-board .rb-row.rb-new {
        background: linear-gradient(135deg, #fff, var(--rb-cream-2));
    }

    .renewal-board .rb-row-head {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 13px 15px;
        cursor: pointer;
    }
    .renewal-board .rb-row-top {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .renewal-board .rb-cat {
        display: inline-flex;
        align-items: center;
        font-size: 10.5px;
        font-weight: 700;
        padding: 2px 9px;
        border-radius: 99px;
        letter-spacing: -0.02em;
    }
    .renewal-board .rb-cat.cat-notice  { background: var(--rb-orange-tint); color: var(--rb-orange-deep); }
    .renewal-board .rb-cat.cat-event   { background: #FFE8D6; color: var(--rb-orange-deep); }
    .renewal-board .rb-cat.cat-check   { background: #E9F0F5; color: var(--rb-navy); }
    .renewal-board .rb-cat.cat-update  { background: #E5F4E7; color: #15803D; }
    .renewal-board .rb-cat.cat-vote    { background: #FDF4DC; color: var(--rb-gold); }
    .renewal-board .rb-cat.cat-etc     { background: var(--rb-line-2); color: var(--rb-ink-3); }
    .renewal-board .rb-cat.cat-faq     { background: var(--rb-orange-tint); color: var(--rb-orange-deep); }
    /* 2026-09-29 : 배지를 게시판 타입(sys_board_type)으로 바꿨다. 클래스는 cat-bt{bt_idx}.
       관리자가 타입을 새로 만들면 아래 기본색으로 나오고, 색을 지정하고 싶으면 한 줄만 추가하면 된다. */
    .renewal-board .rb-cat[class*="cat-bt"] { background: var(--rb-line-2); color: var(--rb-ink-2); }
    .renewal-board .rb-cat.cat-bt1     { background: var(--rb-orange-tint); color: var(--rb-orange-deep); }  /* 공지사항 */
    .renewal-board .rb-cat.cat-bt3     { background: #FFE8D6; color: var(--rb-orange-deep); }                /* 이벤트 */

    .renewal-board .rb-new-badge {
        display: inline-flex;
        align-items: center;
        font-size: 9px;
        color: #fff;
        background: var(--rb-crimson);
        padding: 2px 6px;
        border-radius: 99px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
    .renewal-board .rb-date {
        margin-left: auto;
        font-size: 11px;
        color: var(--rb-ink-3);
        font-weight: 500;
        white-space: nowrap;
    }
    .renewal-board .rb-row-title {
        font-size: 14px;
        color: var(--rb-ink);
        line-height: 1.4;
        letter-spacing: -0.02em;
        font-weight: 600;
        margin: 0;
    }
    .renewal-board .rb-row-caret {
        color: var(--rb-ink-3);
        font-size: 12px;
        margin-left: 4px;
        transition: transform 0.2s;
    }
    .renewal-board .rb-row.rb-open .rb-row-caret { transform: rotate(180deg); color: var(--rb-orange); }

    .renewal-board .rb-row-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding: 0 15px;
        color: var(--rb-ink-2);
        font-size: 13px;
        line-height: 1.7;
        border-top: 1px dashed transparent;
    }
    .renewal-board .rb-row.rb-open .rb-row-body {
        max-height: 2000px;
        padding: 14px 15px 16px;
        border-top: 1px dashed var(--rb-line);
    }
    .renewal-board .rb-row-body img { max-width: 100%; height: auto; border-radius: 8px; }

    /* ---- 빈 상태 ---- */
    .renewal-board .rb-empty {
        text-align: center;
        padding: 60px 20px 40px;
        color: var(--rb-ink-3);
    }
    .renewal-board .rb-empty .rb-empty-ic {
        font-size: 36px;
        margin-bottom: 8px;
        opacity: 0.4;
    }
    .renewal-board .rb-empty .rb-empty-txt {
        font-size: 13px;
        color: var(--rb-ink-3);
    }

    /* ---- 페이징 (기존 paging.js가 <li> 를 뱉음) ---- */
    .renewal-board .rb-pager {
        margin-top: 18px;
        display: flex;
        justify-content: center;
    }
    .renewal-board .rb-pager ul {
        list-style: none !important;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #fff;
        border: 1px solid var(--rb-line);
        border-radius: 12px;
        padding: 4px;
    }
    .renewal-board .rb-pager ul li {
        list-style: none !important;
        display: inline-flex;
        margin: 0;
        padding: 0;
    }
    .renewal-board .rb-pager ul li::before,
    .renewal-board .rb-pager ul li::marker {
        content: none !important;
        display: none !important;
    }
    .renewal-board .rb-pager ul li a,
    .renewal-board .rb-pager ul li span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 30px;
        padding: 0 8px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--rb-ink-2);
        text-decoration: none;
        letter-spacing: -0.02em;
        transition: all 0.15s;
    }
    .renewal-board .rb-pager ul li a:hover {
        background: var(--rb-orange-tint);
        color: var(--rb-orange-deep);
    }
    .renewal-board .rb-pager ul li.active span {
        background: var(--rb-orange);
        color: #fff;
    }

/* ==========================================================
   Views/BuddyEvent/Rules.cshtml
   ========================================================== */
    .renewal-buddy-event-rules {
        --bd-orange:      #F9781A;
        --bd-orange-deep: #E56610;
        --bd-orange-soft: #FFE8D6;
        --bd-orange-tint: #FFF5EC;
        --bd-gold:        #C89A3D;
        --bd-cream:       #FFF8EE;
        --bd-cream-2:     #FEFAF3;
        --bd-line:        #EFE9DA;
        --bd-line-2:      #F5EFE3;
        --bd-ink:         #1F1815;
        --bd-ink-2:       #4A423B;
        --bd-ink-3:       #8A8278;

        background: var(--bd-cream);
        min-height: 100vh;
        padding: 14px 14px 32px;
        font-family: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        color: var(--bd-ink);
        line-height: 1.55;
    }
    .renewal-buddy-event-rules * { box-sizing:border-box; }

    .renewal-buddy-event-rules .r-hero {
        background:linear-gradient(135deg,#FF9945,var(--bd-orange-deep));
        color:#fff; border-radius:14px; padding:20px 20px 22px;
        position:relative; overflow:hidden; margin-bottom:14px;
    }
    .renewal-buddy-event-rules .r-hero h2 { margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; }
    .renewal-buddy-event-rules .r-hero p { margin:6px 0 0; font-size:12.5px; opacity:.94; letter-spacing:-.02em; }
    .renewal-buddy-event-rules .r-hero:before { content:"♥"; position:absolute; top:12px; right:16px; font-size:56px; opacity:.14; }

    .renewal-buddy-event-rules .r-card {
        background:#fff; border:1px solid var(--bd-line); border-radius:12px;
        padding:16px 16px 14px; margin-bottom:12px;
    }
    .renewal-buddy-event-rules .r-card h3 {
        margin:0 0 8px; font-size:14px; font-weight:800; color:var(--bd-ink);
        letter-spacing:-.02em; display:flex; align-items:center; gap:6px;
    }
    .renewal-buddy-event-rules .r-card h3 .badge {
        display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:99px;
        font-weight:800; letter-spacing:-.02em; margin-left:auto;
        background:var(--bd-orange-tint); color:var(--bd-orange-deep);
    }
    .renewal-buddy-event-rules .r-card p, .renewal-buddy-event-rules .r-card li {
        font-size:12.5px; color:var(--bd-ink-2); letter-spacing:-.02em;
    }
    .renewal-buddy-event-rules .r-card ul { list-style:none; padding:0; margin:6px 0 0; }
    .renewal-buddy-event-rules .r-card ul li { padding:5px 0 5px 16px; position:relative; }
    .renewal-buddy-event-rules .r-card ul li:before {
        content:"•"; position:absolute; left:4px; top:5px; color:var(--bd-orange);
    }
    .renewal-buddy-event-rules .r-card ul li b { color:var(--bd-orange-deep); font-weight:700; }

    .renewal-buddy-event-rules .r-example {
        background:var(--bd-orange-tint); border:1px solid var(--bd-orange-soft);
        border-radius:10px; padding:10px 12px; margin-top:10px;
        font-size:12px; color:var(--bd-ink-2); letter-spacing:-.02em;
    }
    .renewal-buddy-event-rules .r-example b { color:var(--bd-orange-deep); }

    .renewal-buddy-event-rules .steps-3 {
        display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:8px;
    }
    .renewal-buddy-event-rules .steps-3 .cell {
        background:#fff; border:1.5px solid var(--bd-line); border-radius:10px;
        padding:12px 8px; text-align:center;
    }
    .renewal-buddy-event-rules .steps-3 .cell.s1 { border-color:#7EC7CE; }
    .renewal-buddy-event-rules .steps-3 .cell.s2 { border-color:var(--bd-orange); }
    .renewal-buddy-event-rules .steps-3 .cell.s3 { border-color:#B0D8AA; }
    .renewal-buddy-event-rules .steps-3 .cell .no {
        font-size:10px; font-weight:800; color:var(--bd-ink-3); letter-spacing:.03em;
    }
    .renewal-buddy-event-rules .steps-3 .cell .lb { font-size:12px; font-weight:800; margin-top:4px; }

    .renewal-buddy-event-rules table.rate-table {
        width:100%; border-collapse:collapse; margin-top:8px; font-size:12px;
    }
    .renewal-buddy-event-rules table.rate-table th, .renewal-buddy-event-rules table.rate-table td {
        border-bottom:1px solid var(--bd-line); padding:8px 6px; text-align:center;
        color:var(--bd-ink-2); font-variant-numeric:tabular-nums;
    }
    .renewal-buddy-event-rules table.rate-table th {
        background:var(--bd-line-2); color:var(--bd-ink); font-weight:800;
    }
    .renewal-buddy-event-rules table.rate-table td.k { color:var(--bd-ink); font-weight:700; text-align:left; padding-left:10px; }
    .renewal-buddy-event-rules table.rate-table td.p { color:var(--bd-orange-deep); font-weight:800; }

    .renewal-buddy-event-rules .warn {
        background:#FFF6E9; border:1px solid #FFD59A; border-radius:10px;
        padding:12px 14px; font-size:12px; color:#8A5000; margin-bottom:12px;
        line-height:1.6;
    }
    .renewal-buddy-event-rules .warn b { color:var(--bd-orange-deep); }

    /* 이미지 단독 모드 */
    .renewal-buddy-event-rules .r-img-only {
        text-align:center; padding:0;
    }
    .renewal-buddy-event-rules .r-img-only img {
        width:100%; max-width:520px; height:auto; display:block; margin:0 auto;
        border-radius:14px;
        box-shadow:0 4px 14px rgba(0,0,0,.08);
    }
    .renewal-buddy-event-rules .r-img-cta {
        display:block; margin:16px auto 0; max-width:520px; padding:14px;
        background:linear-gradient(135deg,#FF9036,var(--bd-orange-deep));
        color:#fff; text-decoration:none; border-radius:99px;
        font-size:14px; font-weight:900; letter-spacing:-.02em;
        box-shadow:0 4px 14px rgba(229,102,16,.28);
    }
    .renewal-buddy-event-rules .r-img-cta:hover,
    .renewal-buddy-event-rules .r-img-cta:focus,
    .renewal-buddy-event-rules .r-img-cta:active {
        color:#fff; text-decoration:none; opacity:.92;
    }

    @media (min-width:768px){
        .renewal-buddy-event-rules { max-width:480px; margin:0 auto; }
        .renewal-buddy-event-rules .r-img-only,
        .renewal-buddy-event-rules .r-img-only img,
        .renewal-buddy-event-rules .r-img-cta { max-width:480px; }
    }

/* ==========================================================
   Views/Event/DrawDetail.cshtml
   ========================================================== */


/* ==========================================================
   Views/Event/Index.cshtml
   ========================================================== */
    .renewal-event {
        --re-orange:      #F9781A;
        --re-orange-deep: #E56610;
        --re-orange-soft: #FFE8D6;
        --re-orange-tint: #FFF5EC;
        --re-gold:        #C89A3D;
        --re-cream:       #FFF8EE;
        --re-cream-2:     #FEFAF3;
        --re-line:        #EFE9DA;
        --re-line-2:      #F5EFE3;
        --re-ink:         #1F1815;
        --re-ink-2:       #4A423B;
        --re-ink-3:       #8A8278;
        --re-navy:        #2C3E50;

        background: var(--re-cream);
        min-height: 100vh;
        padding: 0 0 32px;
        font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
    }
    .renewal-event * { box-sizing: border-box; }

    /* ---- 상단 헤더 (title + sub) ---- */
    .renewal-event .re-head {
        background: #fff;
        padding: 14px 16px 12px;
        border-bottom: 1px solid var(--re-line);
    }
    .renewal-event .re-head h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: var(--re-ink);
        letter-spacing: -0.02em;
    }
    .renewal-event .re-head p {
        margin: 4px 0 0;
        font-size: 12px;
        color: var(--re-ink-3);
        letter-spacing: -0.02em;
    }

    /* ---- 럭키전환소 진입 배너 ---- */
    .renewal-event .re-lucky-banner {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 14px 4px;
        padding: 14px 16px;
        background: linear-gradient(135deg, #FFB055 0%, #F9781A 60%, #E56610 100%);
        border-radius: 14px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 3px 10px rgba(249,120,26,.28);
        position: relative;
        overflow: hidden;
        transition: transform .15s, box-shadow .15s;
    }
    .renewal-event .re-lucky-banner:before {
        content: '✨';
        position: absolute;
        top: 6px;
        right: 40px;
        font-size: 16px;
        opacity: 0.5;
    }
    .renewal-event .re-lucky-banner:after {
        content: '';
        position: absolute;
        right: -30px;
        bottom: -30px;
        width: 100px;
        height: 100px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
    }
    .renewal-event .re-lucky-banner:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(249,120,26,.36);
        color: #fff;
        text-decoration: none;
    }
    .renewal-event .re-lucky-banner .re-lucky-icon {
        font-size: 30px;
        flex-shrink: 0;
        line-height: 1;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    }
    .renewal-event .re-lucky-banner .re-lucky-txt {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        z-index: 1;
    }
    .renewal-event .re-lucky-banner .re-lucky-txt b {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.02em;
    }
    .renewal-event .re-lucky-banner .re-lucky-txt span {
        font-size: 11.5px;
        font-weight: 500;
        opacity: 0.94;
        letter-spacing: -0.02em;
        line-height: 1.35;
    }
    .renewal-event .re-lucky-banner .re-lucky-arrow {
        font-size: 22px;
        font-weight: 700;
        opacity: 0.75;
        flex-shrink: 0;
        z-index: 1;
    }

    /* 럭키전환소 배너 - 이미지 버전 (관리자 업로드) */
    .renewal-event .re-lucky-img-banner {
        display:block; margin: 12px 14px 4px;
        border-radius:14px; overflow:hidden;
        aspect-ratio: 7 / 2;
        box-shadow:0 3px 10px rgba(249,120,26,.28);
        text-decoration:none;
        background: linear-gradient(135deg, #FFB055 0%, #F9781A 60%, #E56610 100%);
    }
    .renewal-event .re-lucky-img-banner img {
        width:100%; height:100%; display:block;
        object-fit:cover;
    }

    /* 짝꿍 이벤트 배너 - 이미지 버전 (관리자 업로드)
       ※ 7:2 비율 고정 · 어떤 이미지든 일관된 사이즈로 표시 (넘치면 자동 crop)
       ※ 좌우 여백은 다른 카드/배너와 동일하게 14px */
    .renewal-event .re-buddy-img-banner {
        display:block; margin: 8px 14px 4px;
        border-radius:14px; overflow:hidden;
        aspect-ratio: 7 / 2;
        box-shadow:0 3px 10px rgba(232,90,135,.22);
        text-decoration:none;
        background: linear-gradient(135deg, #FF7A9E 0%, #E85A87 55%, #C8447B 100%);
    }
    .renewal-event .re-buddy-img-banner img {
        width:100%; height:100%; display:block;
        object-fit:cover;                              /* 비율 유지하며 꽉 채움 */
    }

    /* ---- 배너 종료 상태 (dim) ----
       기간 종료된 배너를 회색조 + 반투명 + '종료' 오버레이 로 표시. 클릭은 여전히 가능 */
    .renewal-event .re-banner-ended {
        position: relative;
        filter: grayscale(0.9);
        opacity: 0.62;
        box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
    }
    .renewal-event .re-banner-ended:hover {
        transform: none;
        opacity: 0.75;
    }
    .renewal-event .re-banner-ended::after {
        content: '종료';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(30,30,30,.72);
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .12em;
        padding: 5px 14px;
        border-radius: 20px;
        pointer-events: none;
        z-index: 2;
    }

    /* 짝꿍 이벤트 배너 (핑크·로즈 그라디언트로 럭키전환소와 구분) */
    .renewal-event .re-lucky-banner.re-buddy-banner {
        background: linear-gradient(135deg, #FF7A9E 0%, #E85A87 55%, #C8447B 100%);
        box-shadow: 0 3px 10px rgba(232,90,135,.28);
        margin-top: 8px;
    }
    .renewal-event .re-lucky-banner.re-buddy-banner:before {
        content: '💕';
    }
    .renewal-event .re-lucky-banner.re-buddy-banner:hover {
        box-shadow: 0 5px 14px rgba(232,90,135,.36);
    }

    /* ---- 카테고리 필터 (sticky) ---- */
    /* 2026-10-01 : 잠시 감춤. 랭킹전 등 새 이벤트가 카테고리에 안 잡혀 필터가 제 구실을 못 한다.
       분류 체계를 다시 잡은 뒤 display:flex 로 되돌린다.
       ※ .re-cats 는 Views/Event/Index.cshtml 한 곳에서만 쓰고 JS 참조도 없어 다른 화면 영향 없음.
         (custom.css 에도 같은 선언이 있으나 이 파일이 뒤에 로드돼 여기 값이 최종이다 — 양쪽 다 맞춰 둔다) */
    .renewal-event .re-cats {
        display: none;
        gap: 6px;
        padding: 10px 12px;
        overflow-x: auto;
        scrollbar-width: none;
        background: #fff;
        border-bottom: 1px solid var(--re-line);
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .renewal-event .re-cats::-webkit-scrollbar { display: none; }
    .renewal-event .re-chip {
        flex: 0 0 auto;
        border: 1.5px solid var(--re-line);
        background: #fff;
        color: var(--re-ink-2);
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        padding: 7px 14px;
        border-radius: 99px;
        cursor: pointer;
        transition: all 0.15s;
        letter-spacing: -0.02em;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .renewal-event .re-chip:hover { border-color: var(--re-orange); }
    .renewal-event .re-chip .re-cnt {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        background: var(--re-line-2);
        color: var(--re-ink-3);
        border-radius: 9px;
        font-size: 10.5px;
        font-weight: 700;
    }
    .renewal-event .re-chip.on {
        background: var(--re-ink);
        border-color: var(--re-ink);
        color: #fff;
    }
    .renewal-event .re-chip.on .re-cnt {
        background: #fff;
        color: var(--re-ink);
    }

    /* ---- Body ---- */
    .renewal-event .re-body {
        padding: 12px 12px 20px;
    }

    /* ---- 상태별 그룹 ---- */
    .renewal-event .re-group {
        margin-bottom: 22px;
    }
    .renewal-event .re-gtitle {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0 4px 10px;
        font-size: 14px;
        font-weight: 800;
        color: var(--re-ink);
        letter-spacing: -0.02em;
    }
    .renewal-event .re-gtitle .re-gcnt {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: var(--re-orange);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .renewal-event .re-group.g-soon .re-gcnt { background: #2F6FD0; }
    .renewal-event .re-group.g-done .re-gcnt { background: #B9BCC4; }
    .renewal-event .re-group.g-done .re-gtitle { color: var(--re-ink-3); }

    /* 지난 이벤트 접기/펼치기 */
    .renewal-event .re-gtitle-toggle {
        cursor: pointer; user-select: none;
        display: flex; align-items: center;
        padding: 8px 12px; margin: 0 -12px 0;
        border-radius: 8px;
        transition: background .15s;
    }
    .renewal-event .re-gtitle-toggle:hover { background: rgba(0,0,0,.03); }
    .renewal-event .re-gcaret {
        margin-left: auto; font-size: 11px; color: var(--re-ink-3);
        transition: transform .25s;
    }
    .renewal-event .re-group.re-collapsed .re-gcaret { transform: rotate(-90deg); }
    .renewal-event .re-group.re-collapsed .re-gbody {
        max-height: 0; overflow: hidden; margin: 0; padding: 0;
    }
    .renewal-event .re-gbody {
        max-height: 5000px; overflow: hidden;
        transition: max-height .4s ease-in-out;
    }

    /* ---- 이벤트 카드 ---- */
    .renewal-event .re-card {
        display: block;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 10px;
        border: 1.5px solid var(--re-line);
        text-decoration: none;
        color: var(--re-ink);
        transition: all 0.15s;
    }
    .renewal-event .re-card:hover {
        border-color: var(--re-orange-soft);
        box-shadow: 0 4px 12px rgba(249,120,26,0.08);
        transform: translateY(-1px);
        color: var(--re-ink);
        text-decoration: none;
    }
    .renewal-event .re-banner {
        position: relative;
        background: #F5EFE3;
        aspect-ratio: 1134/700;
        overflow: hidden;
    }
    .renewal-event .re-banner.empty {
        aspect-ratio: auto;
        height: 88px;
        background: linear-gradient(135deg, var(--re-cream-2), var(--re-orange-tint));
        display: grid;
        place-items: center;
        text-align: center;
    }
    .renewal-event .re-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* 뽑기 이벤트 배너는 가로로 긴 이미지(예: 1000x263) → 자르지 않고 원래 비율 그대로 (2026-09-17) */
    .renewal-event .re-card[data-cat="뽑기"] .re-banner:not(.empty) { aspect-ratio: auto; }
    .renewal-event .re-card[data-cat="뽑기"] .re-banner img { height: auto; object-fit: contain; }
    /* 뽑기 카드는 배너에 내용이 다 있어서 아래 태그·제목·문구·상태는 숨김 (이미지가 깨지면 다시 보임) */
    .renewal-event .re-card[data-cat="뽑기"] .re-banner:not(.empty) + .re-info { display: none; }
    .renewal-event .re-banner .re-ph {
        font-size: 13px;
        font-weight: 700;
        color: var(--re-orange);
        letter-spacing: -0.02em;
    }
    .renewal-event .re-card.done .re-banner img { filter: grayscale(1); opacity: 0.5; }
    .renewal-event .re-card.done .re-banner::after {
        content: '종료';
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: rgba(0,0,0,0.35);
        color: #fff;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    /* ---- 카드 내부 정보 ---- */
    .renewal-event .re-info {
        padding: 11px 13px 13px;
    }
    .renewal-event .re-tags {
        display: flex;
        gap: 5px;
        margin-bottom: 6px;
        flex-wrap: wrap;
    }
    .renewal-event .re-tag {
        font-size: 10.5px;
        font-weight: 700;
        border-radius: 5px;
        padding: 3px 7px;
        background: var(--re-orange-tint);
        color: var(--re-orange-deep);
        letter-spacing: -0.02em;
    }
    .renewal-event .re-tag.tag-rank    { background: #FFE4CC; color: var(--re-orange-deep); }
    .renewal-event .re-tag.tag-payback { background: #FDF4DC; color: var(--re-gold); }
    .renewal-event .re-tag.tag-partic  { background: #E9F0F5; color: var(--re-navy); }
    .renewal-event .re-tag.tag-coll    { background: #E5F4E7; color: #15803D; }
    .renewal-event .re-tag.tag-draw    { background: #F1E6FA; color: #7B3FAA; }
    .renewal-event .re-tag.tag-default { background: var(--re-line-2); color: var(--re-ink-2); }

    .renewal-event .re-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--re-ink);
        line-height: 1.35;
        letter-spacing: -0.02em;
    }
    .renewal-event .re-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 9px;
    }
    .renewal-event .re-date {
        font-size: 11.5px;
        color: var(--re-ink-3);
        letter-spacing: -0.02em;
    }
    .renewal-event .re-date b {
        color: var(--re-orange);
        font-weight: 700;
    }
    .renewal-event .re-btn {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        background: var(--re-orange);
        border-radius: 8px;
        padding: 7px 14px;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.15s;
    }
    .renewal-event .re-btn:hover { background: var(--re-orange-deep); color: #fff; text-decoration: none; }
    .renewal-event .re-btn.off {
        background: #E2E2E8;
        color: #A2A5AD;
        cursor: not-allowed;
    }
    .renewal-event .re-chip-status {
        display: inline-flex;
        align-items: center;
        border-radius: 20px;
        padding: 4px 11px;
        font-size: 11px;
        font-weight: 700;
        border: 1.5px solid var(--re-orange);
        color: var(--re-orange);
        background: #fff;
        white-space: nowrap;
    }
    .renewal-event .re-chip-status.wait { border-color: #C89A3D; color: #C89A3D; }
    .renewal-event .re-chip-status.soon { border-color: #2F6FD0; color: #2F6FD0; }
    .renewal-event .re-chip-status.done { border-color: #D0D2D8; color: #A2A5AD; }

    /* ---- 빈 상태 ---- */
    .renewal-event .re-empty {
        padding: 60px 20px 40px;
        text-align: center;
        color: var(--re-ink-3);
    }
    .renewal-event .re-empty .re-empty-ic {
        font-size: 40px;
        margin-bottom: 8px;
        opacity: 0.5;
    }
    .renewal-event .re-empty .re-empty-txt {
        font-size: 13px;
        color: var(--re-ink-2);
        letter-spacing: -0.02em;
    }

/* ==========================================================
   Views/Event/Ranking.cshtml
   ========================================================== */
    .renewal-ranking {
        --re-orange:      #F9781A;
        --re-orange-deep: #E56610;
        --re-orange-soft: #FFE8D6;
        --re-orange-tint: #FFF5EC;
        --re-cream:       #FFF8EE;
        --re-line:        #EFE9DA;
        --re-line-2:      #F5EFE3;
        --re-ink:         #1F1815;
        --re-ink-2:       #4A423B;
        --re-ink-3:       #8A8278;
        background: var(--re-cream);
        min-height: 100vh;
        padding: 0 0 32px;
        font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
    }
    .renewal-ranking * { box-sizing: border-box; }
    .renewal-ranking .re-head { background:#fff; padding:14px 16px 12px; border-bottom:1px solid var(--re-line); }
    .renewal-ranking .re-head h1 { margin:0; font-size:18px; font-weight:800; color:var(--re-ink); letter-spacing:-0.02em; }
    .renewal-ranking .re-head p  { margin:4px 0 0; font-size:12px; color:var(--re-ink-3); letter-spacing:-0.02em; }

    .renewal-ranking .re-body { padding:12px 12px 20px; }
    .renewal-ranking .re-group { margin-bottom:22px; }
    .renewal-ranking .re-gtitle {
        display:flex; align-items:center; gap:7px; margin:0 4px 10px;
        font-size:14px; font-weight:800; color:var(--re-ink); letter-spacing:-0.02em;
    }
    .renewal-ranking .re-gtitle .re-gcnt {
        min-width:20px; height:20px; padding:0 6px; border-radius:10px;
        background:var(--re-orange); color:#fff; font-size:11px; font-weight:800;
        display:inline-flex; align-items:center; justify-content:center;
    }
    .renewal-ranking .re-group.g-soon .re-gcnt { background:#2F6FD0; }
    .renewal-ranking .re-group.g-done .re-gcnt { background:#B9BCC4; }
    .renewal-ranking .re-group.g-done .re-gtitle { color:var(--re-ink-3); }

    .renewal-ranking .re-card {
        display:block; background:#fff; border-radius:14px; overflow:hidden;
        margin-bottom:10px; border:1.5px solid var(--re-line);
        text-decoration:none; color:var(--re-ink); transition:all .15s;
    }
    .renewal-ranking .re-card:hover {
        border-color:var(--re-orange-soft);
        box-shadow:0 4px 12px rgba(249,120,26,0.08);
        transform:translateY(-1px); color:var(--re-ink); text-decoration:none;
    }
    .renewal-ranking .re-banner { position:relative; background:#F5EFE3; aspect-ratio:1134/700; overflow:hidden; }
    .renewal-ranking .re-banner.empty {
        aspect-ratio:auto; height:88px;
        background:linear-gradient(135deg, #FEFAF3, var(--re-orange-tint));
        display:grid; place-items:center; text-align:center;
    }
    .renewal-ranking .re-banner img { width:100%; height:100%; object-fit:cover; display:block; }
    .renewal-ranking .re-banner .re-ph { font-size:13px; font-weight:700; color:var(--re-orange); letter-spacing:-0.02em; }
    .renewal-ranking .re-card.done .re-banner img { filter:grayscale(1); opacity:0.5; }
    .renewal-ranking .re-card.done .re-banner::after {
        content:'종료'; position:absolute; inset:0; display:grid; place-items:center;
        background:rgba(0,0,0,0.35); color:#fff; font-size:20px; font-weight:800; letter-spacing:0.08em;
    }
    .renewal-ranking .re-info { padding:11px 13px 13px; }
    .renewal-ranking .re-tags { display:flex; gap:5px; margin-bottom:6px; }
    .renewal-ranking .re-tag {
        font-size:10.5px; font-weight:700; border-radius:5px; padding:3px 7px;
        background:#FFE4CC; color:var(--re-orange-deep); letter-spacing:-0.02em;
    }
    .renewal-ranking .re-name { font-size:14px; font-weight:700; color:var(--re-ink); line-height:1.35; letter-spacing:-0.02em; }
    .renewal-ranking .re-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; }
    .renewal-ranking .re-date { font-size:11.5px; color:var(--re-ink-3); letter-spacing:-0.02em; }
    .renewal-ranking .re-date b { color:var(--re-orange); font-weight:700; }
    .renewal-ranking .re-chip-status {
        display:inline-flex; align-items:center; border-radius:20px; padding:4px 11px;
        font-size:11px; font-weight:700; border:1.5px solid var(--re-orange);
        color:var(--re-orange); background:#fff; white-space:nowrap;
    }
    .renewal-ranking .re-chip-status.soon { border-color:#2F6FD0; color:#2F6FD0; }
    .renewal-ranking .re-chip-status.done { border-color:#D0D2D8; color:#A2A5AD; }

    .renewal-ranking .re-empty { padding:60px 20px 40px; text-align:center; color:var(--re-ink-3); }
    .renewal-ranking .re-empty .re-empty-ic { font-size:40px; margin-bottom:8px; opacity:0.5; }
    .renewal-ranking .re-empty .re-empty-txt { font-size:13px; color:var(--re-ink-2); letter-spacing:-0.02em; }

/* ==========================================================
   Views/Home/Index.cshtml
   ========================================================== */
    /* ========== 메인페이지 리뉴얼 (scoped: .renewal-main) ========== */
    /* v3(2026-09-14): 헤더와 살짝 붙지 않게 상단 8px 확보 */
    .renewal-main {
        max-width: 480px;
        margin: 0 auto;
        padding: 8px 10px 20px;
    }
    .renewal-main .rm-section { margin-bottom: 14px; }
    .renewal-main .rm-section-hdr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        padding: 0 2px;
    }
    .renewal-main .rm-section-hdr .rm-title {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #333;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .renewal-main .rm-section-hdr .rm-more {
        font-size: 11px;
        color: #999;
        text-decoration: none;
    }
    .renewal-main .rm-section-hdr .rm-more:hover { color: #FF6B1F; }
    .renewal-main .rm-badge-live {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #E11D48;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 3px;
        letter-spacing: 0.06em;
    }
    .renewal-main .rm-badge-live::before {
        content: "";
        width: 5px; height: 5px;
        background: #fff;
        border-radius: 50%;
        animation: rm-pulse 1.4s ease-in-out infinite;
    }
    @keyframes rm-pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

    /* --- 1. 진행중 이벤트 (세로 스와이프 - 아래에서 위로) --- */
    .renewal-main .rm-event-banner {
        border-radius: 10px;
        overflow: hidden;
        aspect-ratio: 7 / 2;                 /* 가로:세로 = 7:2 */
        background: linear-gradient(135deg, #FF6B1F, #FF9036);
        position: relative;
        box-shadow: 0 3px 10px rgba(255,107,31,0.2);
    }
    .renewal-main .rm-eb-vslide {
        position: absolute;
        top: 0; left: 0; right: 0;
        display: flex;
        flex-direction: column;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        /* 2026-09-22 손으로 위/아래 스와이프 (가로 스크롤/확대는 브라우저에 맡김) */
        touch-action: pan-x pinch-zoom;
        cursor: grab;
        -webkit-user-select: none; user-select: none;
    }
    .renewal-main .rm-eb-vslide:active { cursor: grabbing; }
    .renewal-main .rm-eb-vslide img { -webkit-user-drag: none; user-drag: none; }
    .renewal-main .rm-eb-item {
        flex-shrink: 0;
        width: 100%;
        aspect-ratio: 7 / 2;                 /* 카드 안 각 아이템도 동일 비율 */
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        color: #fff;
        text-decoration: none;
        position: relative;
    }
    .renewal-main .rm-eb-item:hover,
    .renewal-main .rm-eb-item:focus { color: #fff; text-decoration: none; }
    /* 기본: 56x56 아이콘 (이미지 없을 때 fallback UI) */
    .renewal-main .rm-eb-thumb {
        width: 56px; height: 56px;
        border-radius: 8px;
        object-fit: cover;
        flex-shrink: 0;
        background: rgba(255,255,255,0.15);
    }
    /* 이미지 업로드된 배너: 전체 카드를 이미지로 꽉 채움
       ※ object-fit: contain 으로 잘림 없이 전체 표시 (7:2 가 아닌 이미지도 잘림 없음) */
    .renewal-main .rm-eb-item.rm-eb-full { padding: 0; gap: 0; }
    .renewal-main .rm-eb-item.rm-eb-full .rm-eb-thumb {
        width: 100%; height: 100%;
        border-radius: 0;
        object-fit: contain;
        object-position: center;
        position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(135deg, #FF6B1F, #FF9036);
    }
    /* 이미지 배너에는 텍스트 오버레이가 겹치지 않게 숨김 (텍스트는 이미지에 포함) */
    .renewal-main .rm-eb-item.rm-eb-full .rm-eb-txt { display: none; }
    .renewal-main .rm-eb-icon-fallback {
        width: 56px; height: 56px;
        border-radius: 8px;
        background: rgba(255,255,255,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        flex-shrink: 0;
    }
    .renewal-main .rm-eb-txt { flex: 1; min-width: 0; overflow: hidden; }
    .renewal-main .rm-eb-title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-shadow: 0 1px 2px rgba(0,0,0,0.15);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .renewal-main .rm-eb-sub {
        font-size: 11px;
        opacity: 0.9;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* v3(2026-09-11): 배너 페이지 인디케이터(1/2) 숨김 */
    .renewal-main .rm-eb-indicator { display: none; }

    /* --- 2. 실시간 뽑힘 (가로 스와이프 우→좌, 큰 이미지) --- */
    /* v3(2026-09-12): 바깥으로 퍼지는 오렌지 글로우 (보더 대신 box-shadow 로 확산) */
    .renewal-main .rm-live-section {
        border: none;
        border-radius: 12px;
        padding: 8px 10px 10px;
        background: #fff;
        box-shadow:
            0 0 0 1px rgba(249,120,26,.18),
            0 0 8px 2px rgba(249,120,26,.18),
            0 3px 10px 2px rgba(249,120,26,.10);
    }
    .renewal-main .rm-live-section .rm-section-hdr { margin-bottom: 6px; }
    .renewal-main .rm-live {
        overflow: hidden;
        position: relative;
        padding: 0;
    }
    /* 2026-09-22 손으로 좌/우 스와이프 : JS(home-swipe.js)가 scrollLeft 로 굴리고
       사용자가 만지면 멈춘다. CSS 애니메이션(transform)은 JS 에서 해제한다 */
    .renewal-main .rm-live.rm-live-swipe {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;               /* Firefox */
        -ms-overflow-style: none;            /* IE/Edge */
        touch-action: pan-x;
        cursor: grab;
    }
    .renewal-main .rm-live.rm-live-swipe::-webkit-scrollbar { display: none; }
    .renewal-main .rm-live.rm-live-swipe:active { cursor: grabbing; }
    .renewal-main .rm-live-track {
        display: flex;
        gap: 8px;
        width: max-content;
        animation: rm-scroll-left 60s linear infinite;
    }
    .renewal-main .rm-live-track:hover { animation-play-state: paused; }
    @keyframes rm-scroll-left {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .renewal-main .rm-live-card {
        flex: 0 0 auto;
        width: 140px;   /* 컴팩트 - 아이폰SE 기준 2.4개 정도 살짝 노출 */
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        text-decoration: none;
        color: #333;
        display: flex;
        flex-direction: column;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .renewal-main .rm-live-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(255,107,31,0.18);
        color: #333;
        text-decoration: none;
    }
    .renewal-main .rm-live-card .rm-lc-imgbox {
        width: 100%;
        aspect-ratio: 5 / 4;                 /* 세로 7% 확대 (4:3 → 5:4) */
        background: #F5F5F5;
        overflow: hidden;
        position: relative;
    }
    .renewal-main .rm-live-card .rm-lc-imgbox img {
        width: 100%; height: 100%;
        object-fit: cover;
    }
    .renewal-main .rm-live-card .rm-lc-user-tag {
        position: absolute;
        top: 6px;
        left: 6px;
        background: rgba(0,0,0,0.55);
        color: #fff;
        font-size: 9.5px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 10px;
        max-width: calc(100% - 12px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .renewal-main .rm-live-card .rm-lc-body {
        padding: 8px 10px 10px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-height: 58px;
    }
    .renewal-main .rm-live-card .rm-lc-price {
        font-size: 14px;
        font-weight: 800;
        color: #FF6B1F;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
    }
    .renewal-main .rm-live-card .rm-lc-name {
        font-size: 11px;
        color: #666;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .renewal-main .rm-live-card .rm-lc-user-tag {
        font-size: 10px;
        padding: 2px 7px;
    }

    /* --- 3~5. 3열 퀵메뉴 (→ 4열로 확장, 4번째: 가자 라운지)
       화면 폭에 비례해서 4등분 (SE와 같은 스케일 비율) --- */
    .renewal-main .rm-quick-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }
    .renewal-main .rm-quick {
        background: transparent;
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        text-decoration: none;
        color: #333;
        box-shadow: none;
        transition: transform 0.15s;
        border: none;
    }
    .renewal-main .rm-quick:hover,
    .renewal-main .rm-quick:focus {
        transform: translateY(-2px);
        color: #333;
        text-decoration: none;
    }
    .renewal-main .rm-quick:active { transform: translateY(0) scale(0.97); }
    .renewal-main .rm-quick .rm-q-icon {
        width: 100%; aspect-ratio: 1 / 1;
        display: flex; align-items: center; justify-content: center;
        font-size: 44px;
        line-height: 1;
        background: transparent;
        border-radius: 16px;
        overflow: hidden;
    }
    .renewal-main .rm-quick .rm-q-icon img {
        width: 100%; height: 100%; object-fit: contain;
        display: block;
        border-radius: 16px;
    }
    .renewal-main .rm-quick .rm-q-label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: #333;
    }
    .renewal-main .rm-quick .rm-q-sub {
        font-size: 9.5px;
        color: #999;
        letter-spacing: -0.03em;
    }

    /* --- 6~7. 상품 리스트 (5000 / 10000) --- */
    .renewal-main .rm-prod-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .renewal-main .rm-prod-row::-webkit-scrollbar { height: 4px; }
    .renewal-main .rm-prod-row::-webkit-scrollbar-thumb { background: #E5E5E5; border-radius: 2px; }
    .renewal-main .rm-prod-card {
        flex: 0 0 auto;
        width: 140px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        text-decoration: none;
        color: #333;
        scroll-snap-align: start;
        transition: transform 0.15s;
    }
    .renewal-main .rm-prod-card:hover { transform: translateY(-2px); color: #333; text-decoration: none; }
    .renewal-main .rm-prod-card .rm-pc-imgbox {
        width: 100%; aspect-ratio: 1/1;
        background: #F5F5F5;
        overflow: hidden;
    }
    .renewal-main .rm-prod-card .rm-pc-imgbox img {
        width: 100%; height: 100%;
        object-fit: cover;
    }
    .renewal-main .rm-prod-card .rm-pc-body {
        padding: 8px 10px 10px;
    }
    .renewal-main .rm-prod-card .rm-pc-price {
        font-size: 13px;
        font-weight: 800;
        color: #FF6B1F;
        font-variant-numeric: tabular-nums;
    }
    .renewal-main .rm-prod-card .rm-pc-name {
        font-size: 10.5px;
        color: #666;
        line-height: 1.3;
        margin-top: 3px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 27px;
    }

    /* --- 접기/펼치기 토글 (가자박스 오렌지 톤) --- */
    .renewal-main .rm-collapse-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #FFF5EC;
        color: #FF6B1F;
        border: 1px solid #FFCBA0;
        font-size: 11px;
        cursor: pointer;
        margin-left: 6px;
        padding: 0;
        line-height: 1;
        transition: all 0.15s;
    }
    .renewal-main .rm-collapse-toggle:hover { background: #FFE8D6; }
    .renewal-main .rm-collapse-toggle .caret {
        display: inline-block;
        transition: transform 0.25s;
        font-size: 9px;
        line-height: 1;
    }
    .renewal-main .rm-collapsible.collapsed .rm-collapse-toggle .caret {
        transform: rotate(-90deg);
    }
    .renewal-main .rm-collapsible-body {
        overflow: hidden;
        max-height: 400px;
        transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.25s ease;
        opacity: 1;
    }
    .renewal-main .rm-collapsible.collapsed .rm-collapsible-body {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
    }
    .renewal-main .rm-section-hdr .rm-hdr-left {
        display: flex;
        align-items: center;
        gap: 0;
    }

    /* 빈 데이터 */
    .renewal-main .rm-empty {
        color: #bbb;
        font-size: 11px;
        text-align: center;
        padding: 30px 10px;
        background: #fff;
        border-radius: 10px;
    }

    /* ═══ GAZABOX 섹션 (₩5,000 / ₩10,000 개별 컬러 카드) ═══ */
    .renewal-main .rm-gzbox-wrap {
        margin: 0;
        display: flex; flex-direction: column; gap: 10px;
    }
    .renewal-main .rm-gzbox {
        border-radius: 16px;
        overflow: hidden;
        transition: box-shadow .2s, background .2s;
    }
    /* ── ₩5,000 : 피치 크림 ── */
    .renewal-main .rm-gzbox.gz-5k {
        background: #FBEEDD;
        --gz-accent: #F9781A;
        --gz-accent-dark: #C94E00;
    }
    .renewal-main .rm-gzbox.gz-5k.expanded {
        background: linear-gradient(135deg, #FFE4CB 0%, #FFD3B0 100%);
        box-shadow: 0 6px 18px rgba(249,120,26,.20);
    }
    /* ── ₩10,000 : 골드 크림 ── */
    .renewal-main .rm-gzbox.gz-10k {
        background: #F8E9D0;
        --gz-accent: #C99829;
        --gz-accent-dark: #8B6314;
    }
    .renewal-main .rm-gzbox.gz-10k.expanded {
        background: linear-gradient(135deg, #FBE0AC 0%, #F0C572 100%);
        box-shadow: 0 6px 18px rgba(201,152,41,.22);
    }
    .renewal-main .rm-gzbox-toggle {
        width: 100%; display: flex; align-items: center; gap: 12px;
        padding: 6px 14px;
        background: transparent; border: none; cursor: pointer;
        text-align: left;
        /* 2026-09-29 : 누르면 카드에 검은 테두리가 생기던 문제.
           브라우저가 button 에 붙이는 기본 포커스 링이었다.
           카드(.rm-gzbox)가 overflow:hidden + radius 16px 라 그 사각 링이 잘려
           "모서리가 안 둥글고 색도 엉뚱한" 모양으로 보였다. */
        -webkit-tap-highlight-color: transparent;   /* 모바일 탭 순간의 회색 박스 */
        -webkit-appearance: none; appearance: none;
        border-radius: 16px;                        /* 카드와 같은 곡률 (링이 생겨도 어긋나지 않게) */
    }
    .renewal-main .rm-gzbox-toggle:focus { outline: none; box-shadow: none; }
    .renewal-main .rm-gzbox-toggle::-moz-focus-inner { border: 0; }
    /* 키보드로 이동했을 때만 브랜드 색 링. 마우스·터치로 누를 때는 나오지 않는다 */
    .renewal-main .rm-gzbox-toggle:focus-visible {
        outline: 2px solid var(--gz-accent, #F9781A);
        outline-offset: -2px;
    }
    .renewal-main .rm-gzbox-toggle:active { filter: brightness(0.97); }
    .renewal-main .rm-gzbox-toggle .rm-gzbox-icon {
        flex: 0 0 auto; width: 50px; height: 50px;
        display: flex; align-items: center; justify-content: center;
        font-size: 34px; line-height: 1;
    }
    .renewal-main .rm-gzbox-toggle .rm-gzbox-icon img {
        width: 100%; height: 100%; object-fit: contain; display: block;
    }
    .renewal-main .rm-gzbox-toggle .rm-gzbox-label {
        flex: 1; display: flex; flex-direction: column; gap: 0;
        min-width: 0;
    }
    .renewal-main .rm-gzbox-toggle .rm-gzbox-title {
        font-size: 16px; font-weight: 800; color: var(--gz-accent-dark, #1F1815);
        letter-spacing: -.03em; line-height: 1.2;
    }
    .renewal-main .rm-gzbox-toggle .rm-gzbox-sub {
        font-size: 12px; color: #8A7768; font-weight: 400;
        letter-spacing: -.02em; line-height: 1.3; margin-top: 3px;
    }
    .renewal-main .rm-gzbox-toggle .rm-gzbox-caret {
        flex: 0 0 auto; width: 28px; height: 28px;
        border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--gz-accent, #F9781A); color: #fff;
        border: none;
        font-size: 11px; font-weight: 900; line-height: 1;
        box-shadow: 0 2px 5px rgba(0,0,0,.10);
        transition: transform .25s;
    }
    .renewal-main .rm-gzbox.expanded .rm-gzbox-caret {
        transform: rotate(180deg);
    }
    .renewal-main .rm-gzbox-body {
        max-height: 0; overflow: hidden;
        transition: max-height .3s ease, opacity .2s ease, padding .25s ease;
        opacity: 0;
        padding: 0 12px;
    }
    .renewal-main .rm-gzbox.expanded .rm-gzbox-body {
        max-height: 2000px; opacity: 1;
        padding: 2px 12px 14px;
    }
    .renewal-main .rm-gzbox-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .renewal-main .rm-gzbox-card {
        display: block;
        border-radius: 10px; overflow: hidden;
        background: #fff; text-decoration: none; color: #333;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
        transition: transform .15s;
        min-width: 0;
    }
    .renewal-main .rm-gzbox-card:hover { transform: translateY(-2px); color: #333; text-decoration: none; }
    .renewal-main .rm-gzbox-card .rm-gzc-imgbox {
        width: 100%; aspect-ratio: 1/1; background: #F5F5F5; overflow: hidden;
    }
    .renewal-main .rm-gzbox-card .rm-gzc-imgbox img {
        width: 100%; height: 100%; object-fit: cover;
    }
    .renewal-main .rm-gzbox-card .rm-gzc-body {
        padding: 8px 10px 10px;
    }
    .renewal-main .rm-gzbox-card .rm-gzc-price {
        font-size: 12.5px; font-weight: 900; color: var(--gz-accent-dark, #FF6B1F);
        font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    }
    .renewal-main .rm-gzbox-card .rm-gzc-name {
        font-size: 10.5px; color: #666; line-height: 1.3; margin-top: 2px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; min-height: 27px;
        letter-spacing: -.02em;
    }
    .renewal-main .rm-gzbox-more {
        display: block; margin-top: 10px; padding: 9px;
        text-align: center; font-size: 12px; font-weight: 800;
        color: var(--gz-accent-dark, #FF6B1F); text-decoration: none;
        background: rgba(255,255,255,.75); border-radius: 10px;
        letter-spacing: -.02em;
    }
    .renewal-main .rm-gzbox-empty {
        color: #8A6A50; font-size: 11.5px; text-align: center;
        padding: 20px 8px; font-weight: 600;
    }

    /* ---------- 하단 회사정보 푸터 (2026-09-29) ----------
       위쪽 카드들과 같은 언어(흰 배경·10px 라운드·옅은 그림자)를 쓰되,
       읽을 거리가 아니라 고지 영역이라 글자를 작고 흐리게 해 아래로 가라앉힌다. */
    .renewal-main .rm-footer {
        margin-top: 22px;
        padding-top: 16px;
        border-top: 1px solid rgba(0,0,0,.07);
        text-align: center;
    }
    /* 약관 링크 줄 — 가운뎃점 대신 얇은 세로선으로 구분 */
    .renewal-main .rm-ft-links {
        display: flex; align-items: center; justify-content: center;
        flex-wrap: wrap; gap: 0 10px;
    }
    .renewal-main .rm-ft-links a {
        font-size: 11.5px; font-weight: 700; color: #6B6B6B;
        text-decoration: none; letter-spacing: -.02em; padding: 4px 2px;
    }
    /* 개인정보처리방침은 법적으로 눈에 띄게 두는 것이 관례라 한 단계 진하게 */
    .renewal-main .rm-ft-links a.is-strong { color: #3D3D3D; font-weight: 800; }
    .renewal-main .rm-ft-links a:hover { color: var(--gz-accent-dark, #FF6B1F); text-decoration: none; }
    .renewal-main .rm-ft-links .rm-ft-bar {
        width: 1px; height: 10px; background: rgba(0,0,0,.15);
    }

    /* 사업자 정보 펼치기 버튼 */
    .renewal-main .rm-ft-toggle {
        display: inline-flex; align-items: center; gap: 5px;
        margin-top: 10px; padding: 7px 14px;
        border: 1px solid rgba(0,0,0,.1); border-radius: 99px;
        background: #fff; color: #555;
        font-size: 11.5px; font-weight: 700; letter-spacing: -.02em;
        cursor: pointer;
    }
    .renewal-main .rm-ft-toggle .rm-ft-caret {
        font-size: 8px; line-height: 1; color: #AAA; transition: transform .2s;
    }
    .renewal-main .rm-ft-toggle[aria-expanded="true"] .rm-ft-caret { transform: rotate(180deg); }

    /* 사업자 정보 본문 */
    .renewal-main .rm-ft-info {
        margin: 10px 0 0; padding: 12px 14px;
        background: #fff; border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
        text-align: left;
    }
    .renewal-main .rm-ft-info[hidden] { display: none; }
    .renewal-main .rm-ft-info .rm-ft-row {
        display: flex; gap: 8px; padding: 3px 0;
        font-size: 11px; line-height: 1.55;
    }
    .renewal-main .rm-ft-info dt {
        flex: 0 0 74px; margin: 0; color: #9A9A9A; font-weight: 700;
    }
    .renewal-main .rm-ft-info dd {
        flex: 1 1 auto; margin: 0; color: #555; word-break: break-all;
    }
    .renewal-main .rm-ft-info dd a { color: #555; text-decoration: none; }

    /* 통신판매중개자 고지문 — 길어서 가장 흐리게 둔다 */
    .renewal-main .rm-ft-notice {
        margin: 12px 4px 0; font-size: 10.5px; line-height: 1.6;
        color: #9A9A9A; letter-spacing: -.02em;
    }
    .renewal-main .rm-ft-copy {
        margin: 8px 0 0; font-size: 10px; color: #B5B5B5; letter-spacing: .02em;
    }

    /* 2026-09-17: 큰 화면 카드 폭 미디어쿼리 제거 → SE 통스케일(data-se-scale)로 통째로 확대 */

/* ==========================================================
   Views/Home/Index.cshtml
   ========================================================== */
    .footer_bottom_height {
        height: 108px !important;
    }

/* ==========================================================
   Views/Home/Login.cshtml
   ========================================================== */
        .lr-modal {
            position: fixed; inset: 0; z-index: 99999;
            background: rgba(31, 24, 21, 0.55);
            display: flex; align-items: center; justify-content: center;
            padding: 24px;
            animation: lrFadeIn .22s ease;
            font-family: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
            /* SE(375px) 기준 · 화면 커지면 통짜로 확대 · 최대 30% */
            zoom: var(--gz-zoom, 1);   /* 2026-09-18 : vw 순환참조 → gz-modal-zoom.js 가 계산 */
        }
        @keyframes lrFadeIn { from { opacity: 0; } to { opacity: 1; } }
        .lr-modal-body {
            background: #fff; border-radius: 18px;
            padding: 28px 22px 22px;
            max-width: 340px; width: 100%;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0,0,0,.35);
            animation: lrPop .32s cubic-bezier(.34,1.56,.64,1) both;
        }
        @keyframes lrPop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        /* 3D 자물쇠 이미지 (v2 2026-09-16) */
        .lr-modal-icon {
            width: 110px; height: 110px;
            margin: 0 auto 13px;
            background-image: url('/Payment/login-lock.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: drop-shadow(0 10px 12px rgba(249,120,26,.35));
        }
        .lr-modal-title {
            font-size: 25px; font-weight: 700; color: #1F1815;
            letter-spacing: -.03em; margin: 0; line-height: 1.1;
            white-space: nowrap;
        }
        .lr-modal-desc {
            font-size: 13px; color: #9A928A; font-weight: 500;
            line-height: 15px; letter-spacing: -.02em;
            margin: 6px 4px 15px;
        }
        .lr-modal-btn {
            width: 100%; padding: 7px;
            border: none;
            background: linear-gradient(135deg, #FF9036, #E56610);
            color: #fff; border-radius: 14px;
            font-size: 15px; font-weight: 800; letter-spacing: -.02em; cursor: pointer;
            box-shadow: 0 6px 16px rgba(229,102,16,.28);
        }
        .lr-modal-btn:active { transform: translateY(1px); }

/* ==========================================================
   Views/Home/ProductList.cshtml
   ========================================================== */
    .renewal-plist {
        --rp-ink:#1F1815; --rp-ink-2:#4A423B; --rp-ink-3:#8A8278;
        --rp-line:#EFE9DA; --rp-bg:#FFFCF3;
        background: var(--rp-bg); min-height: 100vh;
        font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        color: var(--rp-ink); padding-bottom: 32px;
    }
    .renewal-plist *, .renewal-plist *::before, .renewal-plist *::after { box-sizing: border-box; }
    .renewal-plist a { text-decoration: none; color: inherit; }

    /* ── 헤더 ── */
    .renewal-plist .rp-hdr {
        display: flex; align-items: center; justify-content: space-between;
        margin: 12px; padding: 14px 16px;
        background: var(--rp-cream); border-radius: 14px;
        border-left: 4px solid var(--rp-accent);
    }
    .renewal-plist .rp-hdr-info { display: flex; flex-direction: column; gap: 4px; }
    .renewal-plist .rp-hdr-badge {
        font-size: 16px; font-weight: 900; color: var(--rp-accent-dark);
        letter-spacing: -.02em;
    }
    .renewal-plist .rp-hdr-cnt {
        font-size: 12px; color: var(--rp-ink-2); font-weight: 600;
    }
    .renewal-plist .rp-hdr-cnt b { color: var(--rp-accent-dark); font-weight: 900; font-size: 14px; }
    .renewal-plist .rp-hdr-search {
        border: none; padding: 8px 16px; border-radius: 99px;
        background: #fff; color: var(--rp-accent-dark);
        border: 1.5px solid var(--rp-accent);
        font-size: 12px; font-weight: 800; cursor: pointer;
        letter-spacing: -.02em;
    }
    .renewal-plist .rp-hdr-search:active { transform: translateY(1px); }

    /* ── 그리드 ── */
    .renewal-plist .rp-grid {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
        padding: 0 12px;
    }
    .renewal-plist .rp-card {
        display: block; background: #fff; border-radius: 12px; overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        transition: transform .15s, box-shadow .15s;
        min-width: 0;
    }
    .renewal-plist .rp-card:hover, .renewal-plist .rp-card:focus {
        transform: translateY(-2px); box-shadow: 0 6px 16px rgba(249,120,26,.18);
    }
    .renewal-plist .rp-imgbox {
        position: relative; width: 100%; aspect-ratio: 1/1;
        background: #F5F5F5; overflow: hidden;
    }
    /* 2026-09-29 : 워터마크를 박스보관함(.rbp-wm)과 같은 이미지로 통일.
       상품 이미지와 워터마크가 같은 <img> 라서, 예전처럼 img 를 통째로 잡으면
       워터마크까지 100% 로 늘어난다. 그래서 둘을 클래스로 나눠 지정한다.
       ※ custom.css 에도 옛 `.renewal-plist .rp-imgbox img` 규칙이 남아 있어
          (0,2,1) 보다 높은 (0,3,1) 로 써야 확실히 이긴다. */
    .renewal-plist .rp-imgbox img.rp-img {
        width: 100%; height: 100%; object-fit: cover;
    }
    .renewal-plist .rp-imgbox img.rp-wm {
        position: absolute; left: 0; bottom: 0;
        width: 50%; height: auto; opacity: .7; z-index: 1;
        /* 옛 텍스트 배지 스타일(custom.css) 무력화 */
        right: auto; padding: 0; border-radius: 0;
        background: none; box-shadow: none; object-fit: contain;
    }
    .renewal-plist .rp-soldout {
        position: absolute; inset: 0; z-index: 5;
        background: rgba(0,0,0,.55); color: #fff;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        font-size: 15px; font-weight: 800; text-align: center;
    }
    .renewal-plist .rp-soldout span {
        font-size: 10px; font-weight: 500; opacity: .8; margin-top: 4px;
    }
    .renewal-plist .rp-body {
        padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px;
    }
    .renewal-plist .rp-name {
        font-size: 12px; color: var(--rp-ink-2); line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; min-height: 32px;
        letter-spacing: -.02em;
    }
    .renewal-plist .rp-price {
        font-size: 15px; font-weight: 900; color: var(--rp-accent-dark);
        text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35);
        letter-spacing: -.02em; margin-top: 2px;
    }
    .renewal-plist .rp-open {
        margin-top: 4px; padding: 3px 8px; align-self: flex-start;
        background: var(--rp-cream); border-radius: 6px;
        font-size: 10.5px; font-weight: 700; color: var(--rp-accent-dark);
        letter-spacing: -.02em;
    }

    /* ── 빈 상태 ── */
    .renewal-plist .rp-empty {
        grid-column: 1 / -1;
        padding: 60px 20px; text-align: center;
        background: #fff; border-radius: 14px;
    }
    .renewal-plist .rp-empty-mark { font-size: 48px; opacity: .35; }
    .renewal-plist .rp-empty-txt {
        margin-top: 12px; font-size: 13px; color: var(--rp-ink-3); font-weight: 600;
    }

    /* ── 페이징 ── */
    .renewal-plist .rp-paging { padding: 20px 12px 0; text-align: center; }

/* ==========================================================
   Views/Lounge/Attend.cshtml
   ========================================================== */
    .renewal-attend {
        --at-orange:#F9781A; --at-orange-deep:#E56610; --at-orange-lt:#FFB055;
        --at-orange-tint:#FFF5EC; --at-orange-soft:#FFE8D6;
        --at-cream:#FFF8EE; --at-cream-2:#FFFCF3;
        --at-line:#EFE9DA;
        --at-ink:#1F1815; --at-ink-2:#4A423B; --at-ink-3:#8A8278;
        --at-gold:#E5B547; --at-gold-lt:#F5DFAA; --at-gold-dark:#B58730;
        --at-brown:#8B4A00; --at-brown-lt:#5A3E14;
        --at-stamp-red:#E85A87; --at-stamp-red-dark:#B93865;
        --at-success:#2E7D32;

        background: var(--at-cream); min-height:100vh; padding-bottom:40px;
        font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        color: var(--at-ink);
    }
    .renewal-attend *, .renewal-attend *:before, .renewal-attend *:after { box-sizing:border-box; }

    .renewal-attend .lg-banner { width:100%; aspect-ratio:7/2; overflow:hidden; background:#F5F5F5; }
    .renewal-attend .lg-banner img { width:100%; height:100%; object-fit:cover; display:block; }

    /* ═══ 스탬프 카드 (쿠폰 감성) ═══ */
    .renewal-attend .at-card {
        margin:16px; padding:14px 14px 16px;
        background: #FFFCF3;
        border:2px dashed #C89A5D; border-radius:16px;
        position:relative;
        box-shadow: 0 2px 8px rgba(184,138,58,.08);
    }
    /* 헤더 (뱃지 + 카운터 + 다음 목표 콤팩트 배치) */
    .renewal-attend .at-card-hdr {
        display:flex; flex-direction:column; align-items:center; gap:8px;
        padding-bottom:12px; margin-bottom:14px;
        border-bottom:1px dashed #C89A5D;
    }
    .renewal-attend .at-card-badge {
        display:inline-block; background:#fff; color:var(--at-gold-dark);
        padding:3px 12px; border-radius:99px;
        font-size:9.5px; font-weight:900; letter-spacing:.1em;
        border:1.5px solid var(--at-gold);
    }
    .renewal-attend .at-card-info {
        display:flex; align-items:baseline; justify-content:center; gap:12px;
        flex-wrap:wrap;
    }
    .renewal-attend .at-card-count {
        font-size:20px; font-weight:900; color:var(--at-brown); letter-spacing:-.02em;
        display:inline-flex; align-items:baseline;
    }
    .renewal-attend .at-c-num { font-size:26px; color:var(--at-orange-deep); }
    .renewal-attend .at-c-slash { opacity:.35; margin:0 3px; font-weight:600; }
    .renewal-attend .at-c-max { opacity:.7; font-size:18px; }
    .renewal-attend .at-card-count small { font-size:12px; font-weight:700; opacity:.7; margin-left:4px; }
    .renewal-attend .at-card-next {
        font-size:11.5px; font-weight:700; color:var(--at-brown); opacity:.85;
        padding:4px 10px; background:rgba(255,255,255,.6); border-radius:99px;
    }
    .renewal-attend .at-card-next b { color:var(--at-orange-deep); font-weight:900; }
    .renewal-attend .at-card::before,
    .renewal-attend .at-card::after {
        content:''; position:absolute; top:50%; transform:translateY(-50%);
        width:24px; height:24px; border-radius:50%;
        background:var(--at-cream);
        box-shadow: inset 0 2px 5px rgba(0,0,0,.15);
    }
    .renewal-attend .at-card::before { left:-12px; }
    .renewal-attend .at-card::after  { right:-12px; }
    .renewal-attend .at-stamps {
        display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
    }
    .renewal-attend .at-stamp {
        aspect-ratio:1/1; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        font-size:11px; color:#B48450; font-weight:700;
        background:#fff; border:2px dashed #E7D0B4;
        position:relative;
    }
    /* 도장 찍힘 */
    .renewal-attend .at-stamp.stamped {
        background:radial-gradient(circle at 30% 30%, var(--at-stamp-red), var(--at-stamp-red-dark));
        color:transparent; border:none;
        transform:rotate(-8deg);
        box-shadow: inset 0 -3px 6px rgba(0,0,0,.15), 0 2px 6px rgba(184,56,101,.35);
    }
    .renewal-attend .at-stamp.stamped::before {
        content:'GAZA'; position:absolute; inset:0;
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-size:8px; font-weight:900; letter-spacing:.5px;
        text-shadow:0 1px 2px rgba(0,0,0,.35);
    }
    /* 마일스톤 (금색 별) */
    .renewal-attend .at-stamp.milestone {
        background:radial-gradient(circle at 30% 30%, #fff, var(--at-gold-lt));
        border:2px solid var(--at-gold); color:var(--at-orange-deep);
        font-weight:900; box-shadow: 0 2px 6px rgba(229,181,71,.35);
    }
    .renewal-attend .at-stamp.milestone::after {
        content:'★'; position:absolute; top:-6px; right:-3px;
        font-size:13px; color:var(--at-gold-dark);
        text-shadow:0 1px 2px rgba(0,0,0,.15);
    }
    /* 마일스톤 && 도장 찍힘 = 우선 도장, 별은 유지 */
    .renewal-attend .at-stamp.milestone.stamped {
        border:none;
        background:radial-gradient(circle at 30% 30%, var(--at-stamp-red), var(--at-stamp-red-dark));
    }
    .renewal-attend .at-stamp.milestone.stamped::after {
        content:'★'; color:var(--at-gold); z-index:2;
    }
    /* 오늘 자리 (아직 찍지 않은 오늘 위치) */
    .renewal-attend .at-stamp.today {
        border:2px solid var(--at-orange); color:var(--at-orange-deep); font-weight:800;
        background:radial-gradient(circle at 30% 30%, #fff, var(--at-orange-tint));
        animation: at-bob 1.6s ease-in-out infinite;
    }
    .renewal-attend .at-stamp.today.milestone { border-color:var(--at-gold); box-shadow:0 0 0 3px rgba(229,181,71,.2); }
    @keyframes at-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
    /* 빈 자리 (미래) */
    .renewal-attend .at-stamp.empty { opacity:.7; }

    /* ═══ Legend ═══ */
    .renewal-attend .at-legend {
        margin-top:14px; padding-top:12px; border-top:1px dashed #C89A5D;
        display:flex; justify-content:space-around; font-size:10.5px; color:var(--at-brown); font-weight:700;
    }
    .renewal-attend .at-legend span { display:inline-flex; align-items:center; gap:5px; }
    .renewal-attend .lg-swatch { width:12px; height:12px; border-radius:50%; display:inline-block; }
    .renewal-attend .lg-swatch.stamped {
        background:radial-gradient(circle at 30% 30%, var(--at-stamp-red), var(--at-stamp-red-dark));
        transform:rotate(-8deg);
    }
    .renewal-attend .lg-swatch.milestone {
        background:radial-gradient(circle at 30% 30%, #fff, var(--at-gold-lt));
        border:1.5px solid var(--at-gold);
    }
    .renewal-attend .lg-swatch.today {
        background:radial-gradient(circle at 30% 30%, #fff, var(--at-orange-tint));
        border:1.5px solid var(--at-orange);
    }

    /* ═══ 마일스톤 티켓 (하단, 빈티지 감성) ═══ */
    .renewal-attend .at-ms-strip {
        margin:16px 16px 0;       /* 좌우 스탬프카드와 동일 */
        padding:14px 0 4px; text-align:center;
    }
    .renewal-attend .at-ms-strip-title {
        display:inline-block; padding:4px 16px;
        font-size:11.5px; font-weight:800; color:var(--at-gold-dark);
        letter-spacing:.12em; margin-bottom:12px;
        background:linear-gradient(90deg, transparent, rgba(229,181,71,.15), transparent);
    }
    .renewal-attend .at-ms-list {
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(0, 1fr));   /* 컨테이너 폭에 맞춰 균등 분배, 잘림 없음 */
        gap:8px;
        padding:6px 0 8px;
    }
    /* 티켓 카드 (빈티지 쿠폰) */
    .renewal-attend .at-ms-ticket {
        background:
            radial-gradient(circle at 50% 50%, transparent 6px, var(--at-cream-2) 6px),
            var(--at-cream-2);
        border:1.5px dashed #C89A5D;
        border-radius:10px;
        overflow:hidden;
        position:relative;
        padding:0;
        min-width:0;              /* grid 자식이 컨테이너 폭을 초과하지 않도록 */
        min-height:96px;
        display:flex; flex-direction:column;
        box-shadow: 0 2px 6px rgba(90,62,20,.10);
        transition: transform .2s;
    }
    .renewal-attend .at-ms-ticket:active { transform:scale(0.97); }
    /* 좌우 반원 홈 (실제 쿠폰 티어아웃 느낌) */
    .renewal-attend .at-ms-ticket::before,
    .renewal-attend .at-ms-ticket::after {
        content:''; position:absolute; top:50%; transform:translateY(-50%);
        width:12px; height:12px; border-radius:50%;
        background:var(--at-cream);
        box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
    }
    .renewal-attend .at-ms-ticket::before { left:-6px; }
    .renewal-attend .at-ms-ticket::after  { right:-6px; }

    .renewal-attend .at-ms-ticket-top {
        padding:10px 4px 6px; text-align:center;
        color:var(--at-gold-dark);
    }
    .renewal-attend .at-ms-days-num { display:block; font-size:20px; font-weight:900; letter-spacing:-.03em; line-height:1; }
    .renewal-attend .at-ms-days-unit { display:block; font-size:8.5px; font-weight:800; opacity:.75; letter-spacing:.1em; margin-top:2px; }
    .renewal-attend .at-ms-ticket-divider {
        border-top:1px dashed #C89A5D; margin:0 8px;
    }
    .renewal-attend .at-ms-ticket-bottom {
        flex:1; padding:8px 4px; text-align:center;
        display:flex; flex-direction:column; justify-content:center; align-items:center;
    }
    .renewal-attend .at-ms-p {
        font-size:13px; font-weight:900; color:var(--at-orange-deep);
        letter-spacing:-.03em; white-space:nowrap;
    }
    .renewal-attend .at-ms-p small { font-size:9px; margin-left:1px; opacity:.85; }
    .renewal-attend .at-ms-locked { font-size:9.5px; color:var(--at-ink-3); font-weight:600; margin-top:3px; letter-spacing:.05em; }
    .renewal-attend .at-ms-stamp {
        margin-top:4px; padding:2px 8px;
        background:linear-gradient(135deg, var(--at-stamp-red), var(--at-stamp-red-dark));
        color:#fff; font-size:9.5px; font-weight:900; letter-spacing:.06em;
        border-radius:99px; transform:rotate(-4deg);
        box-shadow: inset 0 -1px 2px rgba(0,0,0,.2), 0 2px 4px rgba(184,56,101,.35);
        text-shadow:0 1px 1px rgba(0,0,0,.25);
    }

    /* 획득한 티켓 = 색 반전 (골드 배경) */
    .renewal-attend .at-ms-ticket.achieved {
        background:
            radial-gradient(circle at 50% 50%, transparent 6px, #F5DFAA 6px),
            linear-gradient(135deg, #F5DFAA, #E7BE7B);
        border-color:var(--at-gold);
        box-shadow: 0 4px 12px rgba(229,181,71,.28);
    }
    .renewal-attend .at-ms-ticket.achieved::before,
    .renewal-attend .at-ms-ticket.achieved::after { background:var(--at-cream); }
    .renewal-attend .at-ms-ticket.achieved .at-ms-ticket-top { color:var(--at-brown); }
    .renewal-attend .at-ms-ticket.achieved .at-ms-ticket-divider { border-top-color:var(--at-gold-dark); }
    .renewal-attend .at-ms-ticket.achieved .at-ms-p { color:var(--at-brown); }

    /* ═══ CTA ═══ */
    .renewal-attend .at-cta {
        display:block; width:calc(100% - 32px); margin:16px auto 0; padding:15px;
        text-align:center; border:none;
        background:linear-gradient(135deg, var(--at-stamp-red), var(--at-stamp-red-dark)); color:#fff;
        border-radius:12px; font-size:15px; font-weight:900; letter-spacing:.03em;
        box-shadow:0 6px 20px rgba(184,56,101,.35);
        cursor:pointer;
    }
    .renewal-attend .at-cta:active { transform:translateY(1px); box-shadow:0 3px 10px rgba(184,56,101,.35); }

    /* v3(2026-09-13): 최근 14일 출석 이력 스트립 */
    .renewal-attend .at-history {
        margin: 14px 16px 0;
        background: #fff;
        border: 1.5px solid var(--at-line);
        border-radius: 14px;
        padding: 12px 12px 10px;
    }
    .renewal-attend .at-history-head {
        display: flex; justify-content: space-between; align-items: baseline;
        margin-bottom: 8px;
    }
    .renewal-attend .at-history-title {
        font-size: 12.5px; font-weight: 900; color: var(--at-ink); letter-spacing: -0.02em;
    }
    .renewal-attend .at-history-sub {
        font-size: 10px; color: var(--at-ink-3); font-weight: 600; letter-spacing: -0.02em;
    }
    .renewal-attend .at-history-strip {
        display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
    }
    /* v3(2026-09-14): 기종별 마크·날짜 정렬 통일 - 폰트 clamp 로 셀 크기 비례 스케일 */
    .renewal-attend .at-hs-cell {
        box-sizing: border-box;
        aspect-ratio: 1 / 1;
        min-width: 0;
        display: grid;
        grid-template-rows: 1fr auto;
        place-items: center;
        row-gap: 2px;
        padding: clamp(4px, 1.4vw, 8px) 2px;
        border-radius: 10px;
        font-weight: 700;
    }
    .renewal-attend .at-hs-cell .hs-mark {
        font-size: clamp(13px, 3.9vw, 17px);
        line-height: 1;
        display: block;
        align-self: end;
    }
    .renewal-attend .at-hs-cell .hs-day {
        font-size: clamp(9.5px, 2.8vw, 12px);
        line-height: 1;
        display: block;
        opacity: 0.85;
    }
    .renewal-attend .at-hs-cell.done  {
        background: #FFF3E1; color: #C55210; border: 1px solid #FFCE8F;
    }
    .renewal-attend .at-hs-cell.miss  {
        background: #F5F1EB; color: #B9B0A2; border: 1px solid #E7E0D3;
    }
    .renewal-attend .at-hs-cell.today {
        background: linear-gradient(135deg, #FFB055, var(--at-orange));
        color: #fff; border: 1px solid var(--at-orange-deep);
        box-shadow: 0 2px 6px rgba(229, 102, 16, 0.28);
    }
    .renewal-attend .at-hs-cell.today .hs-day { color: #fff; opacity: 1; }

    /* 통계 한 줄 — 2026-10-01 : "이번달 N일" 항목만 빼고 연속·최근 40일은 그대로 둔다 */
    .renewal-attend .at-stats-row {
        display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
        margin:10px 16px 0; padding:10px 12px;
        background:#FFF8EE; border-radius:12px;
        font-size:11.5px; color:var(--at-ink-2); letter-spacing:-.02em;
    }
    .renewal-attend .at-stats-item { font-weight:700; }
    .renewal-attend .at-stats-item b { color:var(--at-orange-deep); font-weight:900; }
    .renewal-attend .at-stats-sep { color:var(--at-ink-3); font-weight:400; }

    .renewal-attend .at-done {
        margin:16px; padding:14px; text-align:center;
        background:#EEF7EE; border:1.5px solid #C7E4C9; border-radius:12px;
        font-size:13.5px; font-weight:800; color:var(--at-success);
    }
    .renewal-attend .at-back {
        display:block; text-align:center; margin:14px 16px 0; padding:12px;
        background:#fff; border:1.5px solid var(--at-line); border-radius:99px;
        font-size:13px; font-weight:700; color:var(--at-ink-2); text-decoration:none;
    }

    /* ═══════════════════════════════════════════════════════════════
       가자 라운지 - 유의사항 아코디언 (공통)   2026-10-01
       ---------------------------------------------------------------
       쓰는 곳 : /Lounge/Attend · Recommend · Fortune · Puzzle · Review
       관리자  : /Event/LoungeSetting 활동 카드의 [유의사항] textarea

       · 2026-09-29 에는 출석 전용(.renewal-attend .at-notice)이었는데,
         2026-10-01 에 5개 활동으로 넓히면서 화면에 안 매인 .lg-notice 로 바꿨다.
         그래서 여기에는 --at-* 같은 화면 전용 변수를 쓰지 않는다.
       · 여는 높이는 lounge-notice.js 가 scrollHeight 로 잡는다
         (관리자 글 길이를 모르므로 CSS 에 고정값을 두면 잘린다).
       ═══════════════════════════════════════════════════════════════ */
    .lg-notice {
        margin: 14px 16px 0; background: #fff;
        border: 1.5px solid #EFE9DA; border-radius: 14px; overflow: hidden;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    }
    .lg-notice-head {
        width: 100%; display: flex; align-items: center; gap: 8px;
        padding: 13px 14px; background: transparent; border: none; cursor: pointer;
        font-family: inherit; text-align: left;
        -webkit-tap-highlight-color: transparent;
    }
    .lg-notice-head:focus { outline: none; }
    .lg-notice-title {
        flex: 1 1 auto; font-size: 13px; font-weight: 800; color: #1F1815;
        letter-spacing: -.02em;
    }
    .lg-notice-caret {
        flex: 0 0 auto; font-size: 10px; color: #8A8278;
        transition: transform .25s;
    }
    .lg-notice.on .lg-notice-caret { transform: rotate(180deg); }
    .lg-notice-body {
        max-height: 0; overflow: hidden; transition: max-height .28s ease;
    }
    .lg-notice-inner {
        padding: 12px 14px 14px; border-top: 1px solid #EFE9DA;
        font-size: 12.5px; line-height: 1.7; color: #4A423B; letter-spacing: -.02em;
        word-break: break-word;
        /* 관리자가 textarea 에 친 줄바꿈을 그대로 살린다 (HTML 태그도 함께 쓸 수 있다) */
        white-space: pre-line;
    }
    /* 관리자가 넣은 태그가 화면 톤과 어긋나지 않게 최소한만 맞춘다.
       블록 태그 안에서는 pre-line 을 풀어야 태그로 만든 줄바꿈이 두 번 먹지 않는다 */
    .lg-notice-inner p,
    .lg-notice-inner ul,
    .lg-notice-inner ol,
    .lg-notice-inner li,
    .lg-notice-inner table { white-space: normal; }
    .lg-notice-inner p { margin: 0 0 8px; }
    .lg-notice-inner p:last-child { margin-bottom: 0; }
    .lg-notice-inner ul,
    .lg-notice-inner ol { margin: 0 0 8px; padding-left: 18px; }
    .lg-notice-inner li { margin: 2px 0; }
    .lg-notice-inner b,
    .lg-notice-inner strong { color: #1F1815; font-weight: 800; }
    .lg-notice-inner a { color: #E56610; text-decoration: underline; }
    .lg-notice-inner img { max-width: 100%; height: auto; border-radius: 8px; }
    .lg-notice-inner table { width: 100%; border-collapse: collapse; }
    .lg-notice-inner td,
    .lg-notice-inner th { border: 1px solid #EFE9DA; padding: 6px 8px; }

    /* ═══ 확인 팝업 (스탬프 카드 톤) ═══ */
    .at-modal {
        position:fixed; inset:0; z-index:9999;
        background:rgba(31,24,21,0.55);
        display:flex; align-items:center; justify-content:center; padding:20px;
        animation: at-modal-fade .22s ease;
        font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    }
    @keyframes at-modal-fade { from{opacity:0} to{opacity:1} }
    .at-modal-body {
        background:#FFFCF3; border:2px dashed #C89A5D; border-radius:16px;
        padding:22px 20px 18px; text-align:center;
        max-width:320px; width:100%;
        box-shadow:0 20px 50px rgba(0,0,0,.35);
        animation: at-modal-pop .3s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes at-modal-pop { 0%{transform:scale(.85);opacity:0} 100%{transform:scale(1);opacity:1} }
    .at-modal-mark { font-size:42px; line-height:1; }
    .at-modal-title {
        font-size:17px; font-weight:900; margin-top:8px; letter-spacing:-.02em;
        color:#1F1815;
    }
    .at-modal-sub {
        font-size:12.5px; margin-top:8px; color:#4A423B; letter-spacing:-.01em;
    }
    .at-modal-sub b { color:#E56610; font-weight:900; }
    .at-modal-bonus {
        margin:10px auto 0; padding:6px 14px;
        display:inline-block;
        background:linear-gradient(135deg, #F5DFAA, #E7BE7B);
        color:#5A3E14; border-radius:99px;
        font-size:12px; font-weight:900; letter-spacing:.03em;
        box-shadow:0 3px 8px rgba(229,181,71,.35);
    }
    .at-modal-btn {
        margin-top:16px; width:100%; padding:12px;
        border:none;
        background:linear-gradient(135deg, #F9781A, #E56610); color:#fff;
        border-radius:99px;
        font-size:14px; font-weight:900; letter-spacing:.02em; cursor:pointer;
        box-shadow:0 6px 16px rgba(249,120,26,.28);
    }
    .at-modal-btn:active { transform:translateY(1px); }

/* ==========================================================
   Views/Lounge/Fortune.cshtml
   ========================================================== */
    .renewal-fortune {
        --ft-navy:#1B1436; --ft-navy-2:#2D2154; --ft-navy-3:#3E2E7A;
        --ft-gold:#E5B547; --ft-gold-lt:#F5DE9F; --ft-gold-glow:#FFD54F;
        --ft-purple:#7B60B4; --ft-purple-lt:#B497E5;
        --ft-parchment:#F5E9CC; --ft-parchment-dark:#D4C08A;
        --ft-brown:#5A3E14; --ft-ink:#1F1815; --ft-ink-2:#4A423B; --ft-ink-3:#8A8278;
        --ft-cream:#FFF8EE;
        --ft-gold-dark:#B58730;
        --ft-orange:#F9781A; --ft-orange-deep:#E56610; --ft-orange-tint:#FFF5EC; --ft-orange-soft:#FFE8D6;

        background: var(--ft-cream);
        min-height:100vh; padding-bottom:40px;
        font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        color: var(--ft-ink);
    }
    .renewal-fortune *, .renewal-fortune *:before, .renewal-fortune *:after { box-sizing:border-box; }

    .renewal-fortune .lg-banner { width:100%; aspect-ratio:7/2; overflow:hidden; background:#F5F5F5; }
    .renewal-fortune .lg-banner img { width:100%; height:100%; object-fit:cover; display:block; }

    /* ═══ 타로 카드 (콤팩트 · 헤더+메인+색숫자 통합) ═══ */
    .renewal-fortune .ft-tarot {
        margin:16px; height:auto;
        perspective:1200px; position:relative; z-index:2;
    }
    .renewal-fortune .ft-tarot-back {
        position:absolute; inset:0;
        backface-visibility:hidden;
        border-radius:14px; overflow:hidden;
        background:
            radial-gradient(circle at 30% 30%, rgba(229,181,71,.15) 0, transparent 40%),
            linear-gradient(135deg, var(--ft-navy-2), var(--ft-navy-3));
        border:2px solid var(--ft-gold);
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        padding:24px 16px; min-height:200px;
        color:var(--ft-gold); text-align:center;
        box-shadow: 0 6px 18px rgba(0,0,0,.25);
        transition: transform 1s cubic-bezier(.4,.2,.3,1);
    }
    .renewal-fortune .ft-tarot-eye {
        font-size:36px; margin-bottom:8px;
        filter: drop-shadow(0 0 16px rgba(229,181,71,.5));
        animation: rotate 6s linear infinite;
    }
    @keyframes rotate { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
    .renewal-fortune .ft-tarot-back-txt {
        font-size:11px; font-weight:900; letter-spacing:.2em;
    }
    /* 앞면 (미스틱 보라 · 콤팩트) */
    .renewal-fortune .ft-tarot-front {
        border-radius:14px; overflow:hidden;
        background:
            radial-gradient(circle at 15% 20%, rgba(229,181,71,.20) 0, transparent 45%),
            radial-gradient(circle at 85% 75%, rgba(180,151,229,.22) 0, transparent 45%),
            linear-gradient(160deg, var(--ft-navy) 0%, var(--ft-navy-2) 60%, var(--ft-navy-3) 100%);
        border:2px solid var(--ft-gold);
        backface-visibility:hidden;
        box-shadow: 0 8px 22px rgba(27,20,54,.35);
        color:#fff;
        transform: rotateY(180deg);
        transition: transform 1s cubic-bezier(.4,.2,.3,1);
        position:relative;
    }
    /* 코너 별 장식 */
    .renewal-fortune .ft-tarot-front::before,
    .renewal-fortune .ft-tarot-front::after {
        content:'✦'; position:absolute; color:var(--ft-gold); font-size:14px; opacity:.5;
        pointer-events:none;
    }
    .renewal-fortune .ft-tarot-front::before { top:6px; left:8px; }
    .renewal-fortune .ft-tarot-front::after  { bottom:6px; right:8px; }

    .renewal-fortune .ft-tarot.loading .ft-tarot-back  { transform: rotateY(0deg); }
    .renewal-fortune .ft-tarot.loading .ft-tarot-front { transform: rotateY(180deg); position:absolute; inset:0; }
    .renewal-fortune .ft-tarot:not(.loading) .ft-tarot-back  { display:none; }
    .renewal-fortune .ft-tarot:not(.loading) .ft-tarot-front { transform: rotateY(0deg); position:relative; }

    /* 앞면 헤더 (뱃지 + 날짜) - 미스틱 골드 스트립 */
    .renewal-fortune .ft-tarot-hdr {
        display:flex; align-items:center; justify-content:space-between; gap:8px;
        padding:10px 14px; flex-wrap:wrap;
        background:linear-gradient(135deg, rgba(229,181,71,.15), rgba(180,151,229,.10));
        border-bottom:1px solid rgba(229,181,71,.3);
    }
    .renewal-fortune .ft-tarot-badge {
        display:inline-block; padding:3px 10px; border-radius:99px;
        background:linear-gradient(135deg, var(--ft-gold), var(--ft-gold-dark));
        color:var(--ft-navy);
        font-size:9.5px; font-weight:900; letter-spacing:.12em;
        box-shadow:0 2px 6px rgba(229,181,71,.35);
    }
    .renewal-fortune .ft-tarot-date {
        font-size:10.5px; font-weight:700; color:var(--ft-gold-lt); letter-spacing:.03em;
    }

    /* 앞면 메인 (헤드라인 한 줄) */
    .renewal-fortune .ft-tarot-main {
        padding:22px 18px;
        text-align:center;
    }
    .renewal-fortune .ft-tarot-title {
        font-size:16px; font-weight:900; letter-spacing:-.02em; line-height:1.5;
        color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35);
    }

    /* 앞면 하단 (색 + 숫자) */
    .renewal-fortune .ft-tarot-info {
        display:flex; align-items:center; justify-content:space-around;
        padding:12px 14px;
        background:rgba(0,0,0,.2);
        border-top:1px dashed var(--ft-gold);
    }
    .renewal-fortune .ft-info-item {
        display:flex; align-items:center; gap:8px; flex:1; justify-content:center;
    }
    .renewal-fortune .ft-info-k {
        font-size:10.5px; font-weight:700; letter-spacing:.05em;
        color:var(--ft-gold-lt); opacity:.85;
    }
    .renewal-fortune .ft-info-v {
        font-size:14px; font-weight:900; color:#fff;
        text-shadow:0 1px 3px rgba(0,0,0,.35);
    }
    .renewal-fortune .ft-info-divider {
        width:1px; height:22px; background:var(--ft-gold); opacity:.4;
    }

    /* ═══ 안내 문구 ═══ */
    .renewal-fortune .ft-open-hint {
        margin:0 16px 10px; text-align:center;
        font-size:12px; font-weight:700; color:var(--ft-brown);
        padding:8px 12px; background:rgba(229,181,71,.15);
        border:1px dashed var(--ft-gold); border-radius:99px;
        letter-spacing:-.01em;
    }
    /* v5 (2026-09-28) 오늘 이미 확인한 날 : 카드를 펼쳐 둔 상태의 안내 */
    .renewal-fortune .ft-open-hint.ft-open-hint-done {
        background: #EAF5EB; color: #2E7D32; border-color: #BEE0C0;
    }

    .renewal-fortune .ft-open-hint b { color:var(--ft-orange-deep); font-weight:900; }
    .renewal-fortune .ft-open-hint.hidden { display:none; }

    /* ═══ 3장의 타로 카드 (탭하여 오픈) ═══ */
    .renewal-fortune .ft-scrolls {
        padding:0 16px;
        display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:8px;
    }
    .renewal-fortune .ft-scroll {
        min-height:220px;
        border-radius:10px;
        perspective:1000px;
        position:relative;
        cursor:pointer;
        transition:transform .2s;
    }
    .renewal-fortune .ft-scroll:active { transform:scale(0.98); }
    .renewal-fortune .ft-scroll.opened { cursor:default; }

    /* 뒷면 (초기 상태) */
    .renewal-fortune .ft-scroll-back,
    .renewal-fortune .ft-scroll-front {
        position:absolute; inset:0;
        border-radius:10px; overflow:hidden;
        backface-visibility:hidden;
        transition: transform .8s cubic-bezier(.4,.2,.3,1);
        box-shadow: 0 6px 18px rgba(27,20,54,.25);
    }
    .renewal-fortune .ft-scroll-back {
        background:
            radial-gradient(circle at 30% 30%, rgba(229,181,71,.20) 0, transparent 45%),
            repeating-linear-gradient(45deg, rgba(229,181,71,.05) 0 4px, transparent 4px 12px),
            linear-gradient(160deg, var(--ft-navy) 0%, var(--ft-navy-3) 100%);
        border:2px solid var(--ft-gold);
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        padding:14px 8px; color:var(--ft-gold);
        gap:2px;
    }
    .renewal-fortune .ft-back-symbol {
        font-size:32px; line-height:1;
        filter:drop-shadow(0 0 12px rgba(229,181,71,.5));
        animation:tarot-pulse 2s ease-in-out infinite;
    }
    @keyframes tarot-pulse { 0%,100%{ transform:scale(1);opacity:.9; } 50%{ transform:scale(1.08);opacity:1; } }
    .renewal-fortune .ft-back-txt {
        font-size:9.5px; font-weight:900; letter-spacing:.15em; text-align:center;
        margin-top:4px; opacity:.85;
    }
    .renewal-fortune .ft-back-name {
        font-size:13px; font-weight:900; color:#fff; margin-top:6px;
        text-shadow:0 1px 3px rgba(0,0,0,.4);
    }
    .renewal-fortune .ft-back-hint {
        font-size:9px; font-weight:800; letter-spacing:.25em;
        padding:3px 8px; border:1px solid var(--ft-gold); border-radius:99px;
        margin-top:6px; opacity:.85;
        animation:tap-bob 1.4s ease-in-out infinite;
    }
    @keyframes tap-bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }

    /* 앞면 (기본 뒤집힘, opened 시 나타남) */
    .renewal-fortune .ft-scroll-front {
        background:
            radial-gradient(circle at 25% 15%, rgba(229,181,71,.20) 0, transparent 50%),
            radial-gradient(circle at 75% 85%, rgba(180,151,229,.22) 0, transparent 50%),
            linear-gradient(160deg, var(--ft-navy) 0%, var(--ft-navy-2) 60%, var(--ft-navy-3) 100%);
        border:2px solid var(--ft-gold);
        padding:14px 8px 12px;
        color:#fff;
        display:flex; flex-direction:column; align-items:center;
        transform: rotateY(180deg);
    }
    .renewal-fortune .ft-scroll.opened .ft-scroll-back  { transform: rotateY(180deg); }
    .renewal-fortune .ft-scroll.opened .ft-scroll-front { transform: rotateY(0deg); }
    .renewal-fortune .ft-scroll-corner {
        position:absolute; color:var(--ft-gold); font-size:9px; opacity:.55;
        pointer-events:none;
    }
    .renewal-fortune .ft-scroll-corner.tl { top:5px; left:5px; }
    .renewal-fortune .ft-scroll-corner.tr { top:5px; right:5px; }
    .renewal-fortune .ft-scroll-corner.bl { bottom:5px; left:5px; }
    .renewal-fortune .ft-scroll-corner.br { bottom:5px; right:5px; }
    .renewal-fortune .ft-scroll-hdr {
        display:flex; flex-direction:column; align-items:center; gap:4px;
        margin-bottom:4px;
    }
    .renewal-fortune .ft-scroll-icon {
        font-size:26px; line-height:1;
        filter: drop-shadow(0 0 8px rgba(229,181,71,.35));
    }
    .renewal-fortune .ft-scroll-title {
        font-size:10.5px; font-weight:900; letter-spacing:.03em; text-align:center;
        background:linear-gradient(135deg, var(--ft-gold-lt), var(--ft-gold));
        -webkit-background-clip:text; background-clip:text; color:transparent;
        text-transform:uppercase; line-height:1.2;
    }
    .renewal-fortune .ft-scroll-divider {
        text-align:center; color:var(--ft-gold); font-size:9px;
        letter-spacing:.3em; opacity:.65;
        margin:2px 0 6px;
    }
    .renewal-fortune .ft-scroll p {
        margin:0; font-size:11px; line-height:1.5;
        letter-spacing:-.01em; font-weight:500;
        color:rgba(255,255,255,.92); text-align:center;
        text-shadow:0 1px 2px rgba(0,0,0,.3);
        word-break:keep-all;
    }
    /* 카드 별 액센트 (앞면/뒷면 테두리 서브 컬러) */
    .renewal-fortune .ft-card-love .ft-scroll-back,
    .renewal-fortune .ft-card-love .ft-scroll-front { border-color:#E6A5C5; }
    .renewal-fortune .ft-card-love .ft-scroll-corner,
    .renewal-fortune .ft-card-love .ft-scroll-divider,
    .renewal-fortune .ft-card-love .ft-back-symbol,
    .renewal-fortune .ft-card-love .ft-back-hint { color:#E6A5C5; }
    .renewal-fortune .ft-card-love .ft-scroll-title {
        background:linear-gradient(135deg, #FFB8D3, #E6A5C5);
        -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .renewal-fortune .ft-card-money .ft-scroll-back,
    .renewal-fortune .ft-card-money .ft-scroll-front { border-color:#F5DE9F; }
    .renewal-fortune .ft-card-money .ft-scroll-corner,
    .renewal-fortune .ft-card-money .ft-scroll-divider,
    .renewal-fortune .ft-card-money .ft-back-symbol { color:#F5DE9F; }

    /* v3(2026-09-13): 통합 하단 안내 카드 (완료 + 포인트 + 이미확인 3상태를 하나로) */
    .renewal-fortune .ft-bottom-info {
        margin:14px 16px 0; padding:14px 16px;
        background:linear-gradient(135deg, var(--ft-gold), var(--ft-gold-dark));
        color:var(--ft-navy); border-radius:12px; text-align:center;
        box-shadow:0 6px 16px rgba(229,181,71,.35);
        animation: reveal-done .5s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes reveal-done {
        0%   { transform: scale(0.6); opacity: 0; }
        100% { transform: scale(1);   opacity: 1; }
    }
    .renewal-fortune .ft-bottom-info .ft-bi-main {
        font-size:13.5px; font-weight:900; letter-spacing:.02em;
        line-height:1.35;
    }
    .renewal-fortune .ft-bottom-info .ft-bi-sub {
        margin-top:6px;
        font-size:12px; font-weight:700; letter-spacing:.01em;
        opacity:.92;
    }
    .renewal-fortune .ft-bottom-info .ft-bi-sub b {
        font-size:16px; font-weight:900;
        color:var(--ft-navy);
    }
    /* 이미 확인 상태 (조금 톤 다운) */
    .renewal-fortune .ft-bottom-info.state-already {
        background:rgba(0,0,0,.06);
        color:var(--ft-ink-3);
        border:1px dashed var(--ft-parchment-dark);
        box-shadow:none;
    }
    .renewal-fortune .ft-bottom-info.state-already .ft-bi-sub b {
        color:var(--ft-brown);
    }
    .renewal-fortune .ft-back {
        display:block; text-align:center; margin:14px 16px 0; padding:12px;
        background:#fff; border:1.5px solid var(--ft-parchment-dark);
        border-radius:99px; font-size:13px; font-weight:700;
        color:var(--ft-brown); text-decoration:none;
    }

    /* 최초 진입 안내 팝업 (2026-09-11) */
    .renewal-fortune .ft-info-modal {
        position:fixed; inset:0; z-index:9999;
        background:rgba(27,20,54,.58);
        display:flex; align-items:center; justify-content:center;
        padding:24px;
    }
    .renewal-fortune .ft-info-body {
        position:relative;
        width:min(320px, 92%);
        background:linear-gradient(180deg, #FFF9EE 0%, #FFF3DC 100%);
        border:1.5px solid var(--ft-gold-lt);
        border-radius:18px;
        padding:22px 20px 16px;
        text-align:center;
        box-shadow:0 12px 30px rgba(27,20,54,.35);
    }
    .renewal-fortune .ft-info-close {
        position:absolute; top:10px; right:12px;
        width:26px; height:26px; border-radius:50%;
        display:grid; place-items:center;
        color:var(--ft-brown); font-size:14px; cursor:pointer;
        background:rgba(0,0,0,0.04);
    }
    .renewal-fortune .ft-info-icon {
        font-size:36px; margin-bottom:6px; line-height:1;
    }
    .renewal-fortune .ft-info-title {
        font-size:16px; font-weight:900; color:var(--ft-navy);
        letter-spacing:-.02em; margin-bottom:10px;
    }
    .renewal-fortune .ft-info-msg {
        font-size:13px; color:var(--ft-ink-2); line-height:1.6; letter-spacing:-.02em;
        margin:0 0 16px;
    }
    .renewal-fortune .ft-info-msg b {
        color:var(--ft-gold-dark);
    }
    .renewal-fortune .ft-info-cta {
        width:100%; padding:12px;
        background:linear-gradient(135deg, var(--ft-gold), var(--ft-gold-dark));
        color:#fff; font-size:13.5px; font-weight:900; letter-spacing:-.02em;
        border:0; border-radius:12px; cursor:pointer;
        box-shadow:0 4px 10px rgba(181,135,48,.35);
    }
    .renewal-fortune .ft-info-nomore {
        display:flex; align-items:center; justify-content:center; gap:6px;
        margin-top:10px; font-size:11.5px; color:var(--ft-ink-3);
        letter-spacing:-.02em; cursor:pointer; user-select:none;
    }
    .renewal-fortune .ft-info-nomore input {
        margin:0; accent-color:var(--ft-gold-dark);
    }

/* ==========================================================
   Views/Lounge/Index.cshtml
   ========================================================== */
    .renewal-lounge {
        --lg-orange:#F9781A; --lg-orange-deep:#E56610;
        --lg-ink:#1F1815; --lg-ink-2:#4A423B; --lg-ink-3:#8A8278;
        /* v3(2026-09-11): 배경을 좀 더 연한 주황톤으로 (기존 #FFF8EE → #FFE4C7) */
        --lg-cream:#FFE4C7;

        background:var(--lg-cream); min-height:100vh; padding-bottom:32px;
        font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        color:var(--lg-ink);
        /* v3(2026-09-14): 상단 흰 여백 제거 - 헤더 바로 아래에서 배너 시작 */
        margin: 0; padding-top: 0;
    }
    .renewal-lounge .lg-banner { margin: 0; }
    .renewal-lounge *, .renewal-lounge *:before, .renewal-lounge *:after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

    /* v3(2026-09-14): 배너 이미지 상하 여백(투명) 감추기 - 헤더와 이어지는 오렌지 그라디언트로 브릿지
       v4(2026-09-29): 이미지가 잘리던 문제 수정.
         예전에는 영역을 5:2 로 고정하고 object-fit:cover 로 채워서,
         비율이 다른 배너(가로로 긴 것)를 올리면 좌우가 잘려 나갔다.
         배너는 그 자체로 완성된 이미지라 잘리면 안 된다.
         → 높이 고정을 없애고 원본 비율 그대로 폭에 맞춘다(height:auto).
         이러면 어떤 비율의 이미지를 넣어도 전부 보이고 여백도 생기지 않는다. */
    .renewal-lounge .lg-banner {
        width:100%;
        overflow:hidden;
        background: linear-gradient(180deg, #ff7000 0%, #ff8f2b 30%, #ffb673 65%, var(--lg-cream) 100%);
        margin: 0;
        /* 세로로 아주 긴 이미지를 잘못 올렸을 때 화면을 다 먹지 않도록 상한만 둔다 */
        max-height: 70vh;
    }
    .renewal-lounge .lg-banner img {
        width:100%; height:auto; display:block;
        max-height: 70vh; object-fit:contain;
    }
    .renewal-lounge .lg-hero {
        background:linear-gradient(135deg, #FFB055, #E56610);
        color:#fff; padding:22px 20px; text-align:center;
    }
    .renewal-lounge .lg-hero-title { font-size:20px; font-weight:900; letter-spacing:-.02em; }
    .renewal-lounge .lg-hero-sub { font-size:12px; opacity:.94; margin-top:4px; letter-spacing:-.02em; }

    .renewal-lounge .lg-cards { padding:14px; display:flex; flex-direction:column; gap:10px; }

    .renewal-lounge .lg-card {
        /* v5 (2026-09-28) 세 번째 열을 auto 로. 56px 고정이라 '오늘은 이용 불가' 같은
           긴 문구가 카드 밖으로 삐져나왔다. 폭은 .lg-card-status 의 min-width 로 잡는다 */
        display:grid; grid-template-columns:82px 1fr auto;
        align-items:center; gap:10px;
        padding:12px 14px 12px 10px;
        background:#fff;
        border-radius:16px;
        text-decoration:none; color:var(--lg-ink);
        position:relative;
        transition: transform .15s, box-shadow .15s;
        box-shadow: 0 3px 10px rgba(0,0,0,.06);
    }
    .renewal-lounge .lg-card:hover,
    .renewal-lounge .lg-card:active {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(249,120,26,.14);
        text-decoration:none; color:var(--lg-ink);
    }

    .renewal-lounge .lg-card-icon {
        display:flex; align-items:center; justify-content:center;
        width:82px; height:82px;
        flex-shrink:0;
        border-radius:20px;
        overflow:hidden;
    }
    .renewal-lounge .lg-card-icon img {
        width:100%; height:100%; object-fit:cover;
        display:block;
    }
    .renewal-lounge .lg-card-icon .icon-emoji {
        font-size:52px; line-height:1;
    }

    .renewal-lounge .lg-card-body {
        display:flex; flex-direction:column;
        min-width:0;
    }
    .renewal-lounge .lg-card-title {
        font-size:17px; font-weight:900; letter-spacing:-.03em;
        color:#1F1815; line-height:1.15;
    }
    .renewal-lounge .lg-card-desc {
        font-size:12px; color:var(--lg-ink-3); font-weight:500;
        letter-spacing:-.02em; line-height:1.3;
        margin-top:3px;
    }
    .renewal-lounge .lg-card-reward {
        font-size:13px; font-weight:800; color:var(--lg-ink);
        letter-spacing:-.02em; margin-top:2px;
    }
    .renewal-lounge .lg-card-reward b { color:var(--lg-orange-deep); font-weight:900; }

    .renewal-lounge .lg-card-status {
        display:inline-flex; align-items:center; justify-content:center;
        font-weight:900; letter-spacing:-.02em;
        flex-shrink:0;
            min-width: 56px;   /* 화살표(원형)일 때의 기존 폭. 글자가 길면 이보다 넓어진다 */
    }
    .renewal-lounge .lg-card-status.ready {
        width:32px; height:32px;
        background:#FFF5EC; color:var(--lg-orange-deep);
        border-radius:50%;
        font-size:18px; line-height:1;
        border:1.5px solid #FFD8B8;
    }
    .renewal-lounge .lg-card-status.done {
        padding:6px 12px;
        background:linear-gradient(135deg, #FF9036, #E56610);
        color:#fff;
        border-radius:99px;
        font-size:11.5px;
        box-shadow:0 2px 6px rgba(229,102,16,.25);
    }

    /* v3(2026-09-14): 게이트 안내 토스트 (5초 후 자동 사라짐) */
    .renewal-lounge .lg-gate-toast {
        margin: 14px 14px 0;
        padding: 10px 14px;
        background: #FFF6E9;
        border: 1px solid #FFD8B8;
        border-radius: 10px;
        color: #8A5000;
        font-size: 12.5px;
        font-weight: 700;
        text-align: center;
        letter-spacing: -0.02em;
        animation: lg-gate-fade 5s ease-in-out forwards;
    }
    @keyframes lg-gate-fade {
        0%, 70% { opacity: 1; transform: translateY(0); max-height: 60px; padding-top:10px; padding-bottom:10px; margin-top:14px; }
        100%    { opacity: 0; transform: translateY(-4px); max-height: 0; padding-top:0; padding-bottom:0; margin-top:0; }
    }

    /* v3(2026-09-14): 준비중 카드 (opacity + grayscale + 클릭 불가) */
    .renewal-lounge .lg-card-locked {
        opacity: 0.55;
        filter: grayscale(0.6);
        pointer-events: none;
        user-select: none;
        cursor: not-allowed;
    }
    .renewal-lounge .lg-card-status.locked {
        padding: 6px 10px;
        text-align: center;
        line-height: 1.25;
        background: #EFE9DA;
        color: #8A7B6A;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .renewal-lounge .lg-foot {
        text-align:center; padding:14px 20px 0;
        font-size:11px; color:var(--lg-ink-3); letter-spacing:.02em;
    }
    .renewal-lounge .lg-foot p { margin:0; }

/* ----------------------------------------------------------
   2026-09-28 : 내 라운지 포인트 내역 (Views/Lounge/PointLog.cshtml)
   라운지에서 받은 포인트만 모아 보는 페이지. 허브 하단 링크로 들어온다.
   ---------------------------------------------------------- */
    .renewal-lounge .lg-pointlog-link {
        display:block; text-align:center;
        padding:12px 14px;
        background:#fff; border-radius:14px;
        font-size:13.5px; font-weight:800; letter-spacing:-.02em;
        color:var(--lg-orange-deep); text-decoration:none;
        box-shadow:0 3px 10px rgba(0,0,0,.06);
    }
    .renewal-lounge .lg-pointlog-link:active { transform:translateY(1px); }

    .renewal-lounge .lp-summary {
        display:flex; gap:8px; padding:14px 14px 0;
    }
    .renewal-lounge .lp-sum-box {
        flex:1 1 0; min-width:0;
        background:#fff; border-radius:14px;
        padding:12px 10px; text-align:center;
        box-shadow:0 3px 10px rgba(0,0,0,.06);
    }
    .renewal-lounge .lp-sum-label {
        display:block; font-size:11px; color:var(--lg-ink-3);
        font-weight:600; letter-spacing:-.02em; margin-bottom:3px;
    }
    .renewal-lounge .lp-sum-value {
        font-size:15px; font-weight:900; letter-spacing:-.03em;
        color:var(--lg-ink); white-space:nowrap;
    }
    .renewal-lounge .lp-plus  { color:var(--lg-orange-deep); }
    .renewal-lounge .lp-minus { color:#C0392B; }

    .renewal-lounge .lp-list { padding:14px; display:flex; flex-direction:column; gap:8px; }
    .renewal-lounge .lp-item {
        display:flex; align-items:center; gap:10px;
        background:#fff; border-radius:14px; padding:12px 14px;
        box-shadow:0 3px 10px rgba(0,0,0,.06);
    }
    .renewal-lounge .lp-item-main { flex:1 1 auto; min-width:0; }
    .renewal-lounge .lp-item-type {
        font-size:14px; font-weight:900; letter-spacing:-.03em; color:var(--lg-ink);
    }
    .renewal-lounge .lp-item-memo {
        font-size:11.5px; color:var(--lg-ink-3); font-weight:500;
        margin-top:2px; letter-spacing:-.02em;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .renewal-lounge .lp-item-date {
        font-size:11px; color:var(--lg-ink-3); margin-top:3px; letter-spacing:.01em;
    }
    /* 금액은 줄바꿈되면 읽기 나빠서 고정 폭을 주고 넘치면 넓어지게 한다 */
    .renewal-lounge .lp-item-point {
        flex:0 0 auto; min-width:78px; text-align:right;
        font-size:15px; font-weight:900; letter-spacing:-.03em; white-space:nowrap;
    }
    .renewal-lounge .lp-empty {
        text-align:center; padding:40px 20px;
        font-size:13px; color:var(--lg-ink-3); font-weight:600; line-height:1.6;
    }

    /* 2026-09-29 : 활동·지급/회수 검색 */
    /* 2026-09-30 : 요약 카드에 바짝 붙어 있던 셀렉트 두 개를,
       다른 페이지의 검색 바처럼 흰 카드 하나로 묶고 위아래 간격을 줬다.
       (라벨 한 줄을 얹어 무엇을 고르는 자리인지 바로 보이게 한다) */
    .renewal-lounge .lp-filter {
        margin:12px 14px 0;
        padding:11px 11px 12px;
        background:#fff; border-radius:14px;
        box-shadow:0 3px 10px rgba(0,0,0,.06);
    }
    .renewal-lounge .lp-filter-label {
        display:block;
        margin:0 2px 7px;
        font-size:11.5px; font-weight:800; letter-spacing:-.02em;
        color:var(--lg-orange-deep);
    }
    .renewal-lounge .lp-filter-row {
        display:flex; gap:7px;
    }
    .renewal-lounge .lp-select {
        flex:1 1 0; min-width:0; height:38px;
        background:#FFFCF6; border:1px solid #F0E3D2; border-radius:10px;
        padding:0 30px 0 11px; font-size:12.5px; font-weight:700; color:var(--lg-ink);
        font-family:inherit; cursor:pointer;
        -webkit-appearance:none; appearance:none;
        /* 기본 화살표를 지운 자리에 직접 그린다 */
        background-image:linear-gradient(45deg, transparent 50%, var(--lg-orange-deep) 50%),
                         linear-gradient(135deg, var(--lg-orange-deep) 50%, transparent 50%);
        background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
        background-size:5px 5px, 5px 5px;
        background-repeat:no-repeat;
    }
    .renewal-lounge .lp-select:focus {
        outline:1.5px solid var(--lg-orange-deep);
        outline-offset:-1.5px;
        border-color:var(--lg-orange-deep);
        background-color:#fff;
    }

    .renewal-lounge .lp-paging {
        display:flex; align-items:center; justify-content:center; gap:5px;
        padding:4px 14px; flex-wrap:wrap;
    }
    .renewal-lounge .lp-page-btn {
        background:#fff; border-radius:99px;
        min-width:34px; height:34px;
        display:inline-flex; align-items:center; justify-content:center;
        font-size:14px; font-weight:800; color:var(--lg-orange-deep);
        text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.06);
    }
    /* 페이지 번호 — 현재 페이지는 주황색으로 채운다 */
    .renewal-lounge .lp-page-num {
        background:#fff; border-radius:99px;
        min-width:34px; height:34px;
        display:inline-flex; align-items:center; justify-content:center;
        font-size:13px; font-weight:800; color:var(--lg-ink-2);
        text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.06);
    }
    .renewal-lounge .lp-page-num.is-on {
        background:linear-gradient(135deg,#FF9036,#E56610); color:#fff;
        box-shadow:0 3px 10px rgba(229,102,16,.28);
    }
    .renewal-lounge .lp-paging-info {
        text-align:center; padding:8px 14px 0;
        font-size:11.5px; font-weight:600; color:var(--lg-ink-3);
    }
    .renewal-lounge .lp-page-now { font-size:12.5px; font-weight:700; color:var(--lg-ink-3); }

    .renewal-lounge .lp-back {
        display:block; text-align:center;
        padding:14px; background:#fff; border-radius:14px;
        font-size:13.5px; font-weight:800; color:var(--lg-ink-2);
        text-decoration:none; box-shadow:0 3px 10px rgba(0,0,0,.06);
    }

/* ==========================================================
   Views/Lounge/Puzzle.cshtml
   ========================================================== */
    .renewal-puzzle {
        --pz-orange:      #F9781A;
        --pz-orange-deep: #E56610;
        --pz-orange-lt:   #FFB055;
        --pz-orange-tint: #FFF5EC;
        --pz-orange-soft: #FFE8D6;
        --pz-cream:       #FFF8EE;
        --pz-line:        #EFE9DA;
        --pz-ink:         #1F1815;
        --pz-ink-2:       #4A423B;
        --pz-ink-3:       #8A8278;

        background: var(--pz-cream); min-height: 100vh; padding-bottom: 40px;
        font-family: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        color: var(--pz-ink);
    }
    .renewal-puzzle *, .renewal-puzzle *:before, .renewal-puzzle *:after {
        box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
    }

    .renewal-puzzle .lg-banner { width:100%; aspect-ratio: 7/2; overflow:hidden; background:#F5F5F5; }
    .renewal-puzzle .lg-banner img { width:100%; height:100%; object-fit:cover; display:block; }

    .renewal-puzzle .pz-hero {
        background: linear-gradient(135deg, var(--pz-orange-lt), var(--pz-orange-deep));
        color: #fff; padding: 22px 20px 16px; text-align: center;
    }
    .renewal-puzzle .pz-hero-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
    .renewal-puzzle .pz-hero-sub   { font-size: 12px; opacity: 0.9; margin-top: 4px; }

    .renewal-puzzle .pz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px 0; }
    .renewal-puzzle .pz-stat { background: #fff; border: 1.5px solid var(--pz-line); border-radius: 10px; padding: 5px 6px 7px; text-align: center; }
    .renewal-puzzle .pz-stat .k { font-size: 10.5px; color: var(--pz-ink-3); font-weight: 700; }
    .renewal-puzzle .pz-stat .v { font-size: 18px; font-weight: 800; margin-top: 1px; color: var(--pz-ink); line-height: 1; }
    .renewal-puzzle .pz-stat .v.warn { color: #E85A87; }

    /* ═══ 스피드 메달 카드 (금/은/동/참가) ═══ */
    .renewal-puzzle .pz-milestones { padding: 16px 16px 0; }
    .renewal-puzzle .pz-milestones-hdr {
        font-size: 12.5px; font-weight: 800; color: var(--pz-ink);
        margin-bottom: 10px; letter-spacing: -.02em;
        display:flex; align-items:center; gap:6px;
    }
    .renewal-puzzle .pz-ms-hint {
        font-size:10.5px; font-weight:700; color:var(--pz-ink-3);
        padding:2px 8px; border-radius:99px; background:var(--pz-orange-tint); border:1px solid var(--pz-orange-soft);
    }
    /* 어려움 아닐 때 메달 dim */
    .renewal-puzzle .pz-milestones.dim .pz-medal { opacity:.4; filter:grayscale(.4); }
    .renewal-puzzle .pz-milestones-hdr::after {
        content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--pz-orange-soft), transparent);
    }
    .renewal-puzzle .pz-ms-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 8px;
    }
    .renewal-puzzle .pz-medal {
        background:#fff; border-radius:14px; padding:12px 6px 10px;
        text-align:center; position:relative; overflow:hidden;
        min-width:0;
        box-shadow: 0 3px 10px rgba(60,50,40,.10);
        border-top:4px solid transparent;
        transition: transform .2s;
    }
    .renewal-puzzle .pz-medal:active { transform: scale(0.96); }
    .renewal-puzzle .pz-medal::before {
        content:''; position:absolute; top:0; left:0; right:0; height:52px;
        opacity:.15; pointer-events:none;
    }
    /* 티어별 컬러 */
    .renewal-puzzle .pz-medal.gold   { border-top-color:#E5B547; }
    .renewal-puzzle .pz-medal.silver { border-top-color:#B0BEC5; }
    .renewal-puzzle .pz-medal.bronze { border-top-color:#B87333; }
    .renewal-puzzle .pz-medal.part   { border-top-color:#8A8278; }
    .renewal-puzzle .pz-medal.gold::before   { background:linear-gradient(180deg, #FFE07A, transparent); }
    .renewal-puzzle .pz-medal.silver::before { background:linear-gradient(180deg, #E0EAF0, transparent); }
    .renewal-puzzle .pz-medal.bronze::before { background:linear-gradient(180deg, #E9C6A0, transparent); }
    .renewal-puzzle .pz-medal.part::before   { background:linear-gradient(180deg, #E0DDD5, transparent); }

    .renewal-puzzle .pz-medal-badge {
        display:flex; flex-direction:column; align-items:center; gap:2px;
        position:relative; z-index:2; margin-bottom:6px;
    }
    .renewal-puzzle .pz-medal-icon { font-size:26px; line-height:1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
    .renewal-puzzle .pz-medal-tier {
        font-size:8.5px; font-weight:900; letter-spacing:.12em;
        padding:2px 6px; border-radius:99px; color:#fff;
    }
    .renewal-puzzle .pz-medal.gold   .pz-medal-tier { background:linear-gradient(135deg, #F5C544, #B58730); }
    .renewal-puzzle .pz-medal.silver .pz-medal-tier { background:linear-gradient(135deg, #C7D3DA, #7F8E96); }
    .renewal-puzzle .pz-medal.bronze .pz-medal-tier { background:linear-gradient(135deg, #D48C50, #7A4A1F); }
    .renewal-puzzle .pz-medal.part   .pz-medal-tier { background:linear-gradient(135deg, #B0A99A, #6D6558); }

    .renewal-puzzle .pz-medal-time {
        font-size:12px; font-weight:800; color:var(--pz-ink); letter-spacing:-.02em; white-space:nowrap;
    }
    .renewal-puzzle .pz-medal-time small { font-size:9.5px; color:var(--pz-ink-3); font-weight:600; margin-left:1px; }
    .renewal-puzzle .pz-medal-point {
        font-size:14px; font-weight:900; color:var(--pz-orange-deep);
        margin-top:3px; letter-spacing:-.03em; white-space:nowrap;
    }
    .renewal-puzzle .pz-medal-point small { font-size:9.5px; margin-left:1px; opacity:.85; }
    .renewal-puzzle .pz-medal-label {
        display:none;  /* 티어명이 이미 있어서 라벨 숨김 (원하시면 표시 전환) */
    }

    .renewal-puzzle .pz-difficulty { display: flex; gap: 6px; padding: 12px 16px 4px; }
    .renewal-puzzle .pz-chip { flex: 1; padding: 9px; border-radius: 99px; border: 1.5px solid var(--pz-line); background: #fff; font-size: 11.5px; font-weight: 700; color: var(--pz-ink-2); text-align: center; cursor: pointer; }
    .renewal-puzzle .pz-chip.on { background: var(--pz-orange); border-color: var(--pz-orange); color: #fff; }

    .renewal-puzzle .pz-board-wrap { padding: 8px 16px 0; }
    .renewal-puzzle .pz-board { background: #fff; border: 1.5px solid var(--pz-line); border-radius: 14px; padding: 14px; position: relative; }
    .renewal-puzzle .pz-stage { position: relative; margin: 0 auto; background: #F5F5F5; border-radius: 8px; overflow: hidden; }
    .renewal-puzzle .pz-preview { position: absolute; inset: 14px; z-index: 5; background-size: cover; background-position: center; border-radius: 8px; opacity: 0; transition: opacity .18s; pointer-events: none; }
    .renewal-puzzle .pz-preview.on { opacity: 1; }
    .renewal-puzzle .pz-tile { position: absolute; left: 0; top: 0; border-radius: 6px; overflow: hidden; background-color: #EDE7E0; background-repeat: no-repeat; transition: transform .18s cubic-bezier(.2,.7,.3,1); cursor: grab; touch-action: none; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
    .renewal-puzzle .pz-tile.dragging { transition: none; cursor: grabbing; z-index: 10; box-shadow: 0 6px 18px rgba(249,120,26,.28); }
    .renewal-puzzle .pz-tile.home { outline: 2px solid rgba(249,120,26,.35); outline-offset: -2px; }
    .renewal-puzzle .pz-tile .num { position: absolute; top: 3px; left: 4px; font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); opacity: .75; }
    .renewal-puzzle .pz-stage.solved .pz-tile { outline: none; }

    .renewal-puzzle .pz-controls { display: flex; gap: 6px; margin-top: 12px; }
    .renewal-puzzle .pz-btn { flex: 1; padding: 10px; border-radius: 8px; border: 1.5px solid var(--pz-line); background: #fff; font-size: 12px; font-weight: 800; color: var(--pz-ink-2); cursor: pointer; }

    /* 완성 팝업 (모달 오버레이) */
    .renewal-puzzle .pz-done {
        display: none;
        position: fixed; inset: 0; z-index: 9999;
        background: rgba(31,24,21,0.6);
        align-items: center; justify-content: center;
        padding: 24px;
        animation: pzFadeIn .22s ease;
    }
    .renewal-puzzle .pz-done.on { display: flex; }
    @keyframes pzFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .renewal-puzzle .pz-done-body {
        position: relative;
        background: #fff; border-radius: 18px;
        padding: 26px 22px 20px;
        text-align: center;
        max-width: 320px; width: 100%;
        box-shadow: 0 20px 50px rgba(0,0,0,.35);
        animation: pzPop .32s cubic-bezier(.34,1.56,.64,1) both;
    }
    .renewal-puzzle .pz-done-close {
        position: absolute; top: 10px; right: 12px;
        width: 28px; height: 28px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: #F5F1EA; color: var(--pz-ink-3);
        font-size: 18px; font-weight: 700; line-height: 1;
        border: none; cursor: pointer;
    }
    .renewal-puzzle .pz-done-close:hover { background: #EBE4D6; color: var(--pz-ink-2); }
    .renewal-puzzle .pz-done-mark { font-size: 52px; line-height: 1; }
    .renewal-puzzle .pz-done-title {
        font-size: 20px; font-weight: 900; margin-top: 8px;
        color: var(--pz-orange-deep); letter-spacing: -.02em;
    }
    .renewal-puzzle .pz-done-sub {
        font-size: 13px; color: var(--pz-ink-2); margin-top: 8px;
        font-weight: 600; letter-spacing: -.02em;
    }
    .renewal-puzzle .pz-done-p {
        margin-top: 14px; padding: 12px;
        background: linear-gradient(135deg, var(--pz-orange-tint), var(--pz-orange-soft));
        border-radius: 12px; font-size: 20px; font-weight: 900;
        color: var(--pz-orange-deep); letter-spacing: -.02em;
    }
    .renewal-puzzle .pz-done-actions {
        display: flex; gap: 8px; margin-top: 16px;
    }
    .renewal-puzzle .pz-done-btn {
        flex: 1; padding: 12px 8px; border: none;
        background: linear-gradient(135deg, var(--pz-orange-lt), var(--pz-orange-deep));
        color: #fff; border-radius: 99px;
        font-size: 13px; font-weight: 900; letter-spacing: -.02em;
        text-decoration: none; text-align: center; cursor: pointer;
        box-shadow: 0 4px 12px rgba(249,120,26,.28);
    }
    .renewal-puzzle .pz-done-btn:active { transform: translateY(1px); }
    .renewal-puzzle .pz-done-btn-secondary {
        background: #fff; color: var(--pz-orange-deep);
        border: 1.5px solid var(--pz-orange);
        box-shadow: none;
    }
    @keyframes pzPop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
    @keyframes pzPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    .renewal-puzzle .pz-empty { margin: 32px 16px; padding: 32px 20px; text-align: center; background: #fff; border: 1.5px dashed var(--pz-line); border-radius: 14px; font-size: 13px; color: var(--pz-ink-3); font-weight: 700; letter-spacing: -.02em; line-height: 1.6; }

    /* 랭킹 */
    .renewal-puzzle .pz-rank-section { margin: 20px 16px 0; background: #fff; border: 1.5px solid var(--pz-line); border-radius: 14px; padding: 14px; }
    .renewal-puzzle .pz-rank-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .renewal-puzzle .pz-rank-title { font-size: 14px; font-weight: 800; color: var(--pz-ink); }
    .renewal-puzzle .pz-rank-refresh { background: none; border: 1px solid var(--pz-line); border-radius: 99px; padding: 4px 10px; font-size: 11px; color: var(--pz-ink-3); cursor: pointer; }
    .renewal-puzzle .pz-rank-list { display: flex; flex-direction: column; gap: 6px; }
    .renewal-puzzle .pz-rank-empty { padding: 24px; text-align: center; font-size: 12px; color: var(--pz-ink-3); }
    .renewal-puzzle .pz-rank-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; background: #fff; border: 1px solid var(--pz-line); border-radius: 8px; }
    .renewal-puzzle .pz-rank-item.me { background: var(--pz-orange-tint); border-color: var(--pz-orange-soft); }
    .renewal-puzzle .pz-rank-no { font-size: 14px; font-weight: 800; text-align: center; }
    .renewal-puzzle .pz-rank-name { font-size: 12px; font-weight: 700; color: var(--pz-ink); }
    .renewal-puzzle .pz-rank-info { grid-column: 2 / 3; grid-row: 2; font-size: 10.5px; color: var(--pz-ink-3); }
    .renewal-puzzle .pz-rank-time { color: var(--pz-orange-deep); font-weight: 800; margin-right: 6px; }
    .renewal-puzzle .pz-rank-point { font-size: 12px; font-weight: 800; color: var(--pz-orange-deep); }

    .renewal-puzzle .pz-back { display: block; text-align: center; margin: 14px 16px 0; padding: 12px; background: #fff; border: 1.5px solid var(--pz-line); border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--pz-ink-2); text-decoration: none; }

    /* ═══ 블라인드 시작 오버레이 ═══ */
    .renewal-puzzle .pz-blind {
        position:absolute; inset:14px; z-index:20;
        background:
            radial-gradient(circle at 30% 30%, rgba(255,255,255,.1) 0, transparent 60%),
            linear-gradient(135deg, #2A2338, #1B1436);
        border-radius:8px;
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        color:#fff; text-align:center; padding:16px;
        transition:opacity .3s;
    }
    .renewal-puzzle .pz-blind.hidden { opacity:0; pointer-events:none; }
    .renewal-puzzle .pz-blind-lock { font-size:44px; margin-bottom:12px; opacity:.85; }
    .renewal-puzzle .pz-blind-title { font-size:15px; font-weight:900; letter-spacing:-.02em; }
    .renewal-puzzle .pz-blind-desc { font-size:12px; margin-top:6px; opacity:.8; line-height:1.5; letter-spacing:-.02em; }
    .renewal-puzzle .pz-blind-btn {
        margin-top:20px; padding:12px 28px; border:none;
        background:linear-gradient(135deg, var(--pz-orange-lt), var(--pz-orange-deep));
        color:#fff; border-radius:99px;
        font-size:14px; font-weight:900; letter-spacing:.05em; cursor:pointer;
        box-shadow:0 6px 20px rgba(249,120,26,.4);
        animation:pz-blind-pulse 2s ease-in-out infinite;
    }
    @keyframes pz-blind-pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }

    /* ═══ 매크로 경고 모달 ═══ */
    .renewal-puzzle .pz-warn-modal {
        position:fixed; inset:0; z-index:10000;
        background:rgba(31,24,21,0.75);
        display:flex; align-items:center; justify-content:center; padding:16px;
        animation: pz-fadein .25s ease;
    }
    .renewal-puzzle .pz-warn-body {
        background:#fff; border-radius:18px; padding:26px 22px 20px;
        max-width:320px; width:100%; text-align:center; position:relative;
        border-top:8px solid #E85A87;
        animation: pz-popin .3s cubic-bezier(.34,1.56,.64,1);
    }
    .renewal-puzzle .pz-warn-icon { font-size:52px; line-height:1; }
    .renewal-puzzle .pz-warn-title {
        font-size:17px; font-weight:900; margin-top:10px; color:#B93865; letter-spacing:-.02em;
    }
    .renewal-puzzle .pz-warn-desc {
        font-size:13px; margin-top:8px; color:var(--pz-ink-2); line-height:1.5; letter-spacing:-.02em;
    }
    .renewal-puzzle .pz-warn-code {
        display:inline-block; margin-top:12px; padding:4px 12px;
        background:#FBE7E7; color:#B54141; border-radius:99px;
        font-size:11px; font-weight:800; letter-spacing:.05em;
    }
    .renewal-puzzle .pz-warn-btn {
        margin-top:18px; padding:12px 28px; border:none;
        background:linear-gradient(135deg, #B93865, #7A2445); color:#fff;
        border-radius:99px; font-size:14px; font-weight:900; cursor:pointer;
        width:100%;
    }

    /* ═══ 난이도 잠금 안내 모달 (브랜드 오렌지) ═══ */
    .renewal-puzzle .pz-lock-modal {
        position:fixed; inset:0; z-index:10000;
        background:rgba(31,24,21,0.65);
        display:flex; align-items:center; justify-content:center; padding:16px;
        animation: pz-fadein .22s ease;
    }
    .renewal-puzzle .pz-lock-body {
        background:#fff; border-radius:18px; padding:28px 22px 20px;
        max-width:320px; width:100%; text-align:center; position:relative;
        border-top:8px solid var(--pz-orange);
        animation: pz-popin .28s cubic-bezier(.34,1.56,.64,1);
    }
    .renewal-puzzle .pz-lock-icon { font-size:48px; line-height:1; }
    .renewal-puzzle .pz-lock-title {
        font-size:17px; font-weight:900; margin-top:10px;
        color:var(--pz-orange-deep); letter-spacing:-.02em;
    }
    .renewal-puzzle .pz-lock-desc {
        font-size:13px; margin-top:10px; color:var(--pz-ink-2);
        line-height:1.6; letter-spacing:-.02em; white-space:pre-line;
    }
    .renewal-puzzle .pz-lock-btn {
        margin-top:20px; padding:12px 28px; border:none;
        background:linear-gradient(135deg, var(--pz-orange), var(--pz-orange-deep)); color:#fff;
        border-radius:99px; font-size:14px; font-weight:900; cursor:pointer;
        width:100%;
    }

    /* ═══ 최초 진입 안내 팝업 ═══ */
    .renewal-puzzle .pz-info-modal {
        position:fixed; inset:0; z-index:9999;
        background:rgba(31,24,21,0.68);
        display:flex; align-items:center; justify-content:center; padding:16px;
        animation: pz-fadein .25s ease;
    }
    @keyframes pz-fadein { from{opacity:0} to{opacity:1} }
    .renewal-puzzle .pz-info-body {
        background:#fff; border-radius:18px; padding:24px 20px 18px;
        max-width:340px; width:100%; text-align:center; position:relative;
        box-shadow:0 20px 50px rgba(0,0,0,.35);
        animation: pz-popin .3s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes pz-popin { 0%{transform:scale(.85);opacity:0} 100%{transform:scale(1);opacity:1} }
    .renewal-puzzle .pz-info-close {
        position:absolute; top:12px; right:14px;
        width:26px; height:26px; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        color:var(--pz-ink-3); font-size:14px; cursor:pointer;
        background:#F5F1EA;
    }
    .renewal-puzzle .pz-info-icon { font-size:44px; line-height:1; }
    .renewal-puzzle .pz-info-title {
        font-size:20px; font-weight:900; margin-top:8px; letter-spacing:-.02em;
        color:var(--pz-ink);
    }
    .renewal-puzzle .pz-info-list { text-align:left; margin:16px 0 14px; }
    .renewal-puzzle .pz-info-row {
        display:grid; grid-template-columns:28px 1fr; gap:10px;
        padding:10px 0; border-bottom:1px dashed var(--pz-line);
    }
    .renewal-puzzle .pz-info-row:last-child { border-bottom:none; }
    .renewal-puzzle .pz-info-badge {
        display:flex; align-items:center; justify-content:center;
        width:28px; height:28px; border-radius:50%;
        color:#fff; font-size:12px; font-weight:900;
    }
    .renewal-puzzle .pz-info-badge.b1 { background:linear-gradient(135deg,#7ABEE5,#4A90E2); }
    .renewal-puzzle .pz-info-badge.b2 { background:linear-gradient(135deg,#FFB055,var(--pz-orange-deep)); }
    .renewal-puzzle .pz-info-badge.b3 { background:linear-gradient(135deg,#E85A87,#B93865); }
    .renewal-puzzle .pz-info-badge.b4 { background:linear-gradient(135deg,#F5DE9F,#B58730); }
    .renewal-puzzle .pz-info-row b {
        display:block; font-size:15.5px; font-weight:800; color:var(--pz-ink);
        letter-spacing:-.02em; line-height:1.3;
    }
    .renewal-puzzle .pz-info-row p {
        margin:2px 0 0; font-size:13px; color:var(--pz-ink-3);
        letter-spacing:-.02em; line-height:1.4;
    }
    .renewal-puzzle .pz-info-row p b {
        display:inline; color:var(--pz-orange-deep); font-size:13px; font-weight:800;
    }
    .renewal-puzzle .pz-info-cta {
        width:100%; padding:12px; border:none;
        background:linear-gradient(135deg, var(--pz-orange-lt), var(--pz-orange-deep));
        color:#fff; border-radius:99px;
        font-size:14px; font-weight:900; letter-spacing:.02em; cursor:pointer;
        box-shadow:0 6px 16px rgba(249,120,26,.28);
    }
    .renewal-puzzle .pz-info-cta:active { transform:translateY(1px); }
    .renewal-puzzle .pz-info-nomore {
        display:flex; align-items:center; justify-content:center; gap:6px;
        margin-top:10px; font-size:11px; color:var(--pz-ink-3); font-weight:600; cursor:pointer;
    }
    .renewal-puzzle .pz-info-nomore input { width:14px; height:14px; }

    .renewal-puzzle .pz-already-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(31,24,21,0.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
    .renewal-puzzle .pz-am-body { background: #fff; border-radius: 16px; padding: 26px 22px; text-align: center; max-width: 320px; width: 100%; }
    .renewal-puzzle .pz-am-mark { font-size: 44px; color: #2E7D32; }
    .renewal-puzzle .pz-am-title { font-size: 16px; font-weight: 800; margin-top: 6px; }
    .renewal-puzzle .pz-am-sub { font-size: 12.5px; color: var(--pz-ink-3); margin-top: 4px; }
    .renewal-puzzle .pz-am-sub b { color: var(--pz-orange-deep); }
    .renewal-puzzle .pz-am-btn { display: block; margin-top: 14px; padding: 11px; background: var(--pz-orange); color: #fff; border-radius: 99px; font-size: 13px; font-weight: 800; text-decoration: none; }
    .renewal-puzzle .pz-am-link { display: block; margin: 8px auto 0; padding: 6px 8px; background: none; border: none; color: var(--pz-ink-3); font-size: 11.5px; text-decoration: underline; }

/* ==========================================================
   Views/Lounge/Recommend.cshtml
   ========================================================== */
    .renewal-recommend {
        --rc-orange:#F9781A; --rc-orange-deep:#E56610; --rc-orange-lt:#FFB055;
        --rc-orange-tint:#FFF5EC; --rc-orange-soft:#FFE8D6; --rc-orange-dark:#8B4A00;
        --rc-parchment:#FFFCF3; --rc-parchment-dark:#E7D0B4;
        --rc-cream:#FFF8EE; --rc-line:#EFE9DA;
        --rc-ink:#1F1815; --rc-ink-2:#4A423B; --rc-ink-3:#8A8278;
        --rc-brown:#5A3E14;
        --rc-success:#2E7D32; --rc-warn:#B48450; --rc-danger:#B54141;
        --rc-tape:#F5DFAA;

        background:var(--rc-cream); min-height:100vh; padding-bottom:40px;
        font-family:'Pretendard','Malgun Gothic',sans-serif; color:var(--rc-ink);
    }
    .renewal-recommend *, .renewal-recommend *:before, .renewal-recommend *:after { box-sizing:border-box; }
    .renewal-recommend .lg-banner { width:100%; aspect-ratio:7/2; overflow:hidden; background:#F5F5F5; }
    .renewal-recommend .lg-banner img { width:100%; height:100%; object-fit:cover; display:block; }

    /* ═══ 콤팩트 헤더 (Hero + Stats 통합) ═══ */
    .renewal-recommend .rc-compact {
        margin:12px 16px 0; padding:12px 14px;
        background:linear-gradient(135deg, #fff, var(--rc-orange-tint));
        border:1.5px solid var(--rc-orange-soft); border-radius:12px;
        box-shadow:0 4px 12px rgba(249,120,26,.10);
    }
    .renewal-recommend .rc-compact-top {
        display:flex; align-items:center; justify-content:space-between; gap:8px;
        padding-bottom:10px; margin-bottom:10px; border-bottom:1px dashed var(--rc-orange-soft);
    }
    .renewal-recommend .rc-compact-title {
        font-size:15px; font-weight:900; color:var(--rc-ink); letter-spacing:-.02em;
        display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    }
    .renewal-recommend .rc-compact-tag {
        font-size:8.5px; font-weight:900; letter-spacing:.12em;
        padding:2px 7px; border-radius:99px;
        background:var(--rc-orange-deep); color:#fff;
    }
    .renewal-recommend .rc-compact-reward {
        font-size:11.5px; font-weight:700; color:var(--rc-ink-2); white-space:nowrap;
    }
    .renewal-recommend .rc-compact-reward b { color:var(--rc-orange-deep); font-weight:900; font-size:13px; }
    .renewal-recommend .rc-compact-stats {
        display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
    }
    .renewal-recommend .rc-chip {
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        padding:6px 4px; border-radius:8px;
        background:#fff; border:1px solid var(--rc-line); min-width:0;
    }
    .renewal-recommend .rc-chip b { font-size:14px; font-weight:900; color:var(--rc-ink); letter-spacing:-.02em; line-height:1.1; }
    .renewal-recommend .rc-chip span { font-size:9.5px; font-weight:700; color:var(--rc-ink-3); margin-top:2px; white-space:nowrap; }
    .renewal-recommend .rc-chip.approved { background:#EEF7EE; border-color:#C7E4C9; }
    .renewal-recommend .rc-chip.approved b { color:var(--rc-success); }
    .renewal-recommend .rc-chip.pending  { background:#FFF7DE; border-color:#F3D89E; }
    .renewal-recommend .rc-chip.pending b { color:#B48450; }
    .renewal-recommend .rc-chip.point    { background:var(--rc-orange-tint); border-color:var(--rc-orange-soft); }
    .renewal-recommend .rc-chip.point b { color:var(--rc-orange-deep); }

    /* ═══ 노트 (쇼핑 리스트 감성) ═══ */
    .renewal-recommend .rc-note {
        margin:16px; background:var(--rc-parchment);
        background-image: repeating-linear-gradient(180deg, transparent 0 32px, rgba(90,62,20,.06) 32px 33px);
        border:1px solid var(--rc-parchment-dark);
        border-radius:8px 12px 8px 12px;
        padding:22px 18px 18px; position:relative;
        box-shadow: 0 4px 12px rgba(90,62,20,.10);
    }
    .renewal-recommend .rc-note-tape {
        position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-2deg);
        width:80px; height:20px; background:var(--rc-tape); opacity:.85;
        box-shadow:0 2px 4px rgba(0,0,0,.15);
    }
    .renewal-recommend .rc-note-hdr {
        display:flex; align-items:center; gap:8px; margin-bottom:16px;
        padding-bottom:10px; border-bottom:2px dashed var(--rc-parchment-dark);
    }
    .renewal-recommend .rc-note-icon { font-size:18px; }
    .renewal-recommend .rc-note-title {
        font-size:12px; font-weight:900; color:var(--rc-brown);
        letter-spacing:.15em;
    }
    .renewal-recommend .rc-note-line { flex:1; height:1px; background:linear-gradient(90deg, var(--rc-parchment-dark), transparent); }

    .renewal-recommend .rc-field { margin-bottom:14px; }
    .renewal-recommend .rc-lbl {
        display:flex; align-items:center; gap:6px; margin-bottom:6px;
        font-size:12px; font-weight:800; color:var(--rc-brown);
    }
    .renewal-recommend .rc-lbl-num {
        display:inline-flex; align-items:center; justify-content:center;
        width:22px; height:22px; border-radius:50%;
        background:var(--rc-orange); color:#fff; font-size:10px; font-weight:900;
    }
    .renewal-recommend .rc-opt { color:var(--rc-ink-3); font-weight:600; font-size:10.5px; }
    .renewal-recommend .rc-field input,
    .renewal-recommend .rc-field textarea {
        width:100%; background:rgba(255,255,255,.75); border:1.5px solid var(--rc-parchment-dark);
        border-radius:8px; padding:10px 12px; font-size:13px; font-family:inherit;
        color:var(--rc-ink);
    }
    .renewal-recommend .rc-field input:focus,
    .renewal-recommend .rc-field textarea:focus {
        outline:none; border-color:var(--rc-orange); background:#fff;
        box-shadow:0 0 0 3px rgba(249,120,26,.12);
    }
    .renewal-recommend .rc-field textarea { min-height:80px; resize:vertical; }
    .renewal-recommend .rc-hint { font-size:10.5px; color:var(--rc-ink-3); margin-top:4px; }

    .renewal-recommend .rc-submit {
        width:100%; margin-top:8px; padding:13px 16px;
        background:linear-gradient(135deg, var(--rc-orange-lt), var(--rc-orange-deep));
        color:#fff; border:none; border-radius:99px;
        font-size:14px; font-weight:900; cursor:pointer;
        display:flex; align-items:center; justify-content:center; gap:8px;
        box-shadow:0 6px 16px rgba(249,120,26,.28);
    }
    .renewal-recommend .rc-submit:active { transform:translateY(1px); }
    .renewal-recommend .rc-submit:disabled { opacity:.6; cursor:default; }
    .renewal-recommend .rc-submit-icon {
        display:inline-flex; align-items:center; justify-content:center;
        width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.25);
        font-size:12px;
    }
    .renewal-recommend .rc-submit-p {
        background:#fff; color:var(--rc-orange-deep);
        padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:900;
    }

    /* ═══ 이력 (스탬프 뱃지) ═══ */
    .renewal-recommend .rc-history {
        margin:16px; padding:14px 0 4px;
        background:#fff; border:1px solid var(--rc-line); border-radius:14px;
    }
    .renewal-recommend .rc-history-hdr {
        display:flex; align-items:center; gap:8px; padding:0 14px 12px;
        border-bottom:1px solid var(--rc-line);
    }
    .renewal-recommend .rc-history-icon { font-size:16px; }
    .renewal-recommend .rc-history-title { font-size:12.5px; font-weight:800; color:var(--rc-ink); flex:1; }
    .renewal-recommend .rc-history-count {
        font-size:11px; font-weight:800; color:var(--rc-ink-3);
        background:#F4EFE7; padding:2px 8px; border-radius:99px;
    }
    .renewal-recommend .rc-empty { padding:32px 16px; text-align:center; }
    .renewal-recommend .rc-empty-icon { font-size:40px; margin-bottom:8px; opacity:.4; }
    .renewal-recommend .rc-empty-t { font-size:13px; font-weight:700; color:var(--rc-ink-2); }
    .renewal-recommend .rc-empty-s { font-size:11px; color:var(--rc-ink-3); margin-top:2px; }

    .renewal-recommend .rc-item {
        display:grid; grid-template-columns:60px 1fr; gap:12px;
        padding:14px; border-bottom:1px dashed var(--rc-line);
        align-items:center;
    }
    .renewal-recommend .rc-item:last-child { border-bottom:none; }

    .renewal-recommend .rc-item-stamp {
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        width:60px; padding:6px 4px;
        border:2px solid; border-radius:8px;
        transform: rotate(-4deg);
        font-weight:900; letter-spacing:.05em;
    }
    .renewal-recommend .rc-stamp-icon { font-size:20px; line-height:1; }
    .renewal-recommend .rc-stamp-txt { font-size:8px; margin-top:2px; }
    .renewal-recommend .rc-item.approved .rc-item-stamp { color:var(--rc-success); border-color:var(--rc-success); background:rgba(46,125,50,.05); }
    .renewal-recommend .rc-item.pending  .rc-item-stamp { color:#B48450; border-color:#B48450; background:rgba(180,132,80,.05); }
    .renewal-recommend .rc-item.rejected .rc-item-stamp { color:var(--rc-danger); border-color:var(--rc-danger); background:rgba(181,65,65,.05); }

    .renewal-recommend .rc-item-title {
        font-size:13.5px; font-weight:800; color:var(--rc-ink); letter-spacing:-.02em;
    }
    .renewal-recommend .rc-item-meta {
        font-size:10.5px; color:var(--rc-ink-3); margin-top:2px;
    }
    /* v3(2026-09-12): 지급/처리 라벨 - 살짝 진하게 강조 */
    .renewal-recommend .rc-item-meta .rc-meta-lbl {
        font-weight:800; color:var(--rc-ink-2); margin-right:4px;
    }
    .renewal-recommend .rc-item-pt {
        font-size:12px; font-weight:900; color:var(--rc-success); margin-top:6px;
        display:inline-block; padding:2px 8px; border-radius:6px; background:#EEF7EE;
    }
    .renewal-recommend .rc-item-memo {
        font-size:11px; color:var(--rc-danger); margin-top:4px; font-style:italic;
    }


    /* v5 (2026-09-28) 상품추천 승인 알림 모달 */
    .renewal-recommend .rc-approved-scrim {
        position: fixed; inset: 0; z-index: 9998;
        background: rgba(31,24,21,.62);
        display: flex; align-items: center; justify-content: center; padding: 24px;
    }
    .renewal-recommend .rc-approved-box {
        width: 100%; max-width: 320px;
        background: #fff; border-radius: 18px;
        padding: 26px 22px 20px; text-align: center;
        box-shadow: 0 16px 44px rgba(0,0,0,.28);
    }
    .renewal-recommend .rc-approved-icon { font-size: 46px; line-height: 1; margin-bottom: 8px; }
    .renewal-recommend .rc-approved-title {
        font-size: 17px; font-weight: 900; letter-spacing: -.03em; color: var(--rc-ink);
    }
    .renewal-recommend .rc-approved-name {
        margin-top: 10px; padding: 9px 12px;
        background: var(--rc-orange-tint); border: 1px solid var(--rc-orange-soft);
        border-radius: 10px;
        font-size: 13px; font-weight: 700; color: var(--rc-ink);
        word-break: break-all; line-height: 1.4;
    }
    .renewal-recommend .rc-approved-more {
        margin-top: 6px; font-size: 11.5px; color: var(--rc-ink-3); font-weight: 600;
    }
    .renewal-recommend .rc-approved-point {
        margin-top: 12px; font-size: 20px; font-weight: 900;
        color: var(--rc-orange-deep); letter-spacing: -.02em;
    }
    .renewal-recommend .rc-approved-point.zero {
        font-size: 13px; color: var(--rc-ink-2); font-weight: 700;
    }
    .renewal-recommend .rc-approved-point.zero small {
        display: block; margin-top: 3px; font-size: 11px; color: var(--rc-ink-3); font-weight: 600;
    }
    .renewal-recommend .rc-approved-btn {
        width: 100%; margin-top: 18px; padding: 13px;
        background: linear-gradient(135deg, var(--rc-orange-lt), var(--rc-orange-deep));
        color: #fff; border: 0; border-radius: 99px;
        font-family: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
        box-shadow: 0 6px 16px rgba(249,120,26,.28);
    }
    .renewal-recommend .rc-back {
        display:block; text-align:center; margin:14px 16px 0; padding:12px;
        background:#fff; border:1.5px solid var(--rc-line);
        border-radius:99px; font-size:13px; font-weight:700;
        color:var(--rc-ink-2); text-decoration:none;
    }

/* ==========================================================
   Views/Lounge/Review.cshtml
   ========================================================== */
    .renewal-review {
        --rv-orange:#F9781A; --rv-orange-deep:#E56610; --rv-orange-lt:#FFB055;
        --rv-orange-tint:#FFF5EC; --rv-orange-soft:#FFE8D6;
        --rv-cream:#FFF8EE; --rv-line:#EFE9DA;
        --rv-ink:#1F1815; --rv-ink-2:#4A423B; --rv-ink-3:#8A8278;
        --rv-brown:#5A3E14;
        --rv-success:#2E7D32; --rv-danger:#B54141;

        background:var(--rv-cream); min-height:100vh; padding-bottom:40px;
        font-family:'Pretendard','Malgun Gothic',sans-serif; color:var(--rv-ink);
    }
    .renewal-review *, .renewal-review *:before, .renewal-review *:after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    .renewal-review .lg-banner { width:100%; aspect-ratio:7/2; overflow:hidden; background:#F5F5F5; }
    .renewal-review .lg-banner img { width:100%; height:100%; object-fit:cover; display:block; }

    /* Hero */
    .renewal-review .rv-hero {
        background:linear-gradient(135deg, var(--rv-orange-lt), var(--rv-orange-deep));
        color:#fff; padding:22px 20px 24px; text-align:center;
    }
    .renewal-review .rv-hero-badge {
        display:inline-block; font-size:10px; font-weight:900; letter-spacing:.15em;
        padding:3px 10px; border-radius:99px; background:rgba(255,255,255,.22); color:#fff;
        margin-bottom:6px;
    }
    .renewal-review .rv-hero-title { font-size:22px; font-weight:900; letter-spacing:-.02em; }
    .renewal-review .rv-hero-sub { font-size:12px; opacity:.95; margin-top:4px; }
    .renewal-review .rv-hero-sub b { background:#fff; color:var(--rv-orange-deep); padding:1px 8px; border-radius:99px; font-weight:900; }

    /* 폼 */
    .renewal-review .rv-form-wrap {
        margin:14px 16px 0; background:#fff; border:1.5px solid var(--rv-line);
        border-radius:14px; padding:16px 16px 18px;
        box-shadow:0 4px 14px rgba(90,62,20,.08);
    }
    .renewal-review .rv-form-hdr {
        display:flex; align-items:center; gap:8px; padding-bottom:12px;
        border-bottom:1px dashed var(--rv-orange-soft); margin-bottom:14px;
    }
    .renewal-review .rv-form-icon {
        display:inline-flex; align-items:center; justify-content:center;
        width:28px; height:28px; border-radius:50%; background:var(--rv-orange); color:#fff;
        font-size:14px; font-weight:900;
    }
    .renewal-review .rv-form-title { flex:1; font-size:14px; font-weight:900; color:var(--rv-ink); }
    .renewal-review .rv-form-p { font-size:11.5px; color:var(--rv-ink-2); font-weight:700; }
    .renewal-review .rv-form-p b { color:var(--rv-orange-deep); font-weight:900; }

    .renewal-review .rv-field { margin-bottom:14px; }
    .renewal-review .rv-lbl {
        display:flex; align-items:center; gap:6px; margin-bottom:6px;
        font-size:12.5px; font-weight:800; color:var(--rv-brown);
    }
    .renewal-review .rv-lbl-num {
        display:inline-flex; align-items:center; justify-content:center;
        width:22px; height:22px; border-radius:50%;
        background:var(--rv-orange); color:#fff; font-size:10px; font-weight:900;
    }
    .renewal-review .rv-opt { color:var(--rv-ink-3); font-weight:600; font-size:10.5px; }
    .renewal-review .rv-counter {
        margin-left:auto; font-size:11px; color:var(--rv-ink-3); font-weight:700;
    }
    .renewal-review .rv-counter b { color:var(--rv-orange-deep); font-size:12px; }
    .renewal-review .rv-counter.ok b { color:var(--rv-success); }

    .renewal-review .rv-select, .renewal-review .rv-textarea {
        width:100%; background:#fff; border:1.5px solid var(--rv-line);
        border-radius:10px; padding:10px 12px; font-size:13px; font-family:inherit;
        color:var(--rv-ink);
    }
    .renewal-review .rv-textarea { min-height:120px; resize:vertical; line-height:1.5; }
    .renewal-review .rv-select:focus, .renewal-review .rv-textarea:focus {
        outline:none; border-color:var(--rv-orange);
        box-shadow:0 0 0 3px rgba(249,120,26,.12);
    }

    /* 이미지 슬롯 */
    .renewal-review .rv-imgs { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
    .renewal-review .rv-img-slot {
        position:relative; aspect-ratio:1/1;
        background:var(--rv-orange-tint); border:1.5px dashed var(--rv-orange-lt);
        border-radius:10px; overflow:hidden; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
    }
    .renewal-review .rv-img-slot input {
        position:absolute; inset:0; opacity:0; cursor:pointer;
    }
    .renewal-review .rv-img-plus {
        font-size:28px; color:var(--rv-orange); font-weight:300; pointer-events:none;
    }
    .renewal-review .rv-img-slot.filled {
        border-style:solid; border-color:var(--rv-orange); background:#fff;
    }
    .renewal-review .rv-img-slot.filled .rv-img-plus { display:none; }
    .renewal-review .rv-img-slot img.rv-img-preview {
        position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    }
    .renewal-review .rv-img-remove {
        position:absolute; top:4px; right:4px; z-index:3;
        width:22px; height:22px; border-radius:50%;
        background:rgba(0,0,0,.6); color:#fff; border:none; font-size:12px; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
    }
    .renewal-review .rv-img-slot.uploading { opacity:.5; pointer-events:none; }
    .renewal-review .rv-img-slot.uploading:after {
        content:'업로드 중'; position:absolute; inset:0;
        display:flex; align-items:center; justify-content:center;
        color:var(--rv-orange-deep); font-size:11px; font-weight:900; z-index:2;
    }

    /* 제출 버튼 */
    .renewal-review .rv-submit {
        width:100%; margin-top:8px; padding:14px 16px;
        background:linear-gradient(135deg, var(--rv-orange-lt), var(--rv-orange-deep));
        color:#fff; border:none; border-radius:99px;
        font-size:14px; font-weight:900; cursor:pointer;
        display:flex; align-items:center; justify-content:center; gap:8px;
        box-shadow:0 6px 16px rgba(249,120,26,.28);
    }
    .renewal-review .rv-submit:active { transform:translateY(1px); }
    .renewal-review .rv-submit:disabled { opacity:.6; cursor:default; box-shadow:none; }
    .renewal-review .rv-submit-icon {
        display:inline-flex; align-items:center; justify-content:center;
        width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.25);
        font-size:12px;
    }
    .renewal-review .rv-submit-p {
        background:#fff; color:var(--rv-orange-deep);
        padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:900;
    }

    /* 로그인/빈상태 - 컴팩트 (2026-09-11) */
    .renewal-review .rv-login-need, .renewal-review .rv-empty-eligible {
        text-align:center; padding:14px 16px 16px;
    }
    .renewal-review .rv-login-icon, .renewal-review .rv-empty-icon {
        font-size:24px; margin-bottom:2px; opacity:.55;
    }
    .renewal-review .rv-login-txt, .renewal-review .rv-empty-t {
        font-size:12.5px; font-weight:700; color:var(--rv-ink-2);
    }
    .renewal-review .rv-empty-s {
        font-size:11px; color:var(--rv-ink-3); margin-top:2px;
    }
    .renewal-review .rv-login-btn {
        display:inline-block; margin-top:14px; padding:10px 24px;
        background:var(--rv-orange); color:#fff; text-decoration:none;
        border-radius:99px; font-size:13px; font-weight:800;
    }

    /* 필터 */
    .renewal-review .rv-filter {
        margin:10px 16px 0; display:flex; align-items:center; gap:10px;
        padding:8px 12px; background:#fff; border:1px solid var(--rv-line); border-radius:10px;
    }
    .renewal-review .rv-filter label { font-size:12px; font-weight:800; color:var(--rv-brown); white-space:nowrap; }

    /* 리뷰 목록 */
    .renewal-review .rv-list-wrap {
        margin:16px; background:#fff; border:1px solid var(--rv-line); border-radius:14px;
    }
    .renewal-review .rv-list-hdr {
        display:flex; align-items:center; gap:8px;
        padding:12px 14px; border-bottom:1px solid var(--rv-line);
    }
    .renewal-review .rv-list-icon { font-size:16px; }
    .renewal-review .rv-list-title { font-size:13px; font-weight:800; color:var(--rv-ink); }

    .renewal-review .rv-item {
        padding:14px; border-bottom:1px dashed var(--rv-line);
    }
    .renewal-review .rv-item:last-child { border-bottom:none; }
    .renewal-review .rv-item-hdr {
        display:flex; align-items:center; gap:10px; margin-bottom:8px;
    }
    .renewal-review .rv-item-prod {
        display:flex; align-items:center; gap:8px; flex:1; min-width:0;
    }
    .renewal-review .rv-item-thumb {
        width:38px; height:38px; border-radius:8px; overflow:hidden; background:var(--rv-orange-tint);
        display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .renewal-review .rv-item-thumb img { width:100%; height:100%; object-fit:cover; }
    .renewal-review .rv-item-thumb .rv-item-thumb-fb { font-size:16px; opacity:.5; }
    .renewal-review .rv-item-prod-info { min-width:0; }
    .renewal-review .rv-item-prod-name {
        font-size:12.5px; font-weight:800; color:var(--rv-ink);
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .renewal-review .rv-item-meta { font-size:10.5px; color:var(--rv-ink-3); margin-top:2px; }
    .renewal-review .rv-item-meta .rv-mine {
        display:inline-block; margin-left:6px; padding:1px 6px; border-radius:99px;
        background:var(--rv-orange); color:#fff; font-size:9px; font-weight:900;
    }
    .renewal-review .rv-item-body {
        font-size:13px; line-height:1.55; color:var(--rv-ink-2); white-space:pre-wrap;
        word-break:break-word;
    }
    .renewal-review .rv-item-imgs {
        display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;
    }
    .renewal-review .rv-item-img {
        width:calc((100% - 12px) / 3); aspect-ratio:1/1; border-radius:8px; overflow:hidden;
        background:#F5F5F5;
    }
    .renewal-review .rv-item-img img { width:100%; height:100%; object-fit:cover; cursor:zoom-in; }

    /* v5 (2026-09-28) 리뷰 사진 확대 보기 */
    .renewal-review .rv-zoom {
        position: fixed; inset: 0; z-index: 9999;
        background: rgba(0,0,0,.88);
        display: flex; align-items: center; justify-content: center;
        padding: 20px;
    }
    .renewal-review .rv-zoom img {
        max-width: 100%; max-height: 100%;
        object-fit: contain; border-radius: 6px;
        box-shadow: 0 10px 40px rgba(0,0,0,.5);
    }
    .renewal-review .rv-zoom-close {
        position: absolute; top: 14px; right: 14px;
        width: 38px; height: 38px; border-radius: 50%;
        background: rgba(255,255,255,.14); color: #fff;
        border: 1px solid rgba(255,255,255,.25);
        font-size: 16px; font-weight: 700; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    .renewal-review .rv-zoom-close:hover { background: rgba(255,255,255,.24); }

    .renewal-review .rv-empty {
        padding:16px 16px 18px; text-align:center;
    }
    .renewal-review .rv-empty .rv-item-thumb-fb {
        font-size:24px !important;
    }
    .renewal-review .rv-list-wrap {
        margin-top:10px !important;
    }

    .renewal-review .rv-loadmore {
        display:block; width:calc(100% - 28px); margin:12px 14px; padding:12px;
        background:#fff; border:1.5px solid var(--rv-line); color:var(--rv-ink-2);
        border-radius:99px; font-size:12.5px; font-weight:800; cursor:pointer;
    }

    /* ---- 리뷰 목록 하단 페이징 (2026-09-29, '더 보기' 대체) ---- */
    .renewal-review .rv-pager {
        display:flex; justify-content:center;
        padding:14px 10px 16px;
        border-top:1px solid var(--rv-line);
    }
    .renewal-review .rv-pager ul {
        list-style:none !important; margin:0; padding:4px;
        display:inline-flex; align-items:center; gap:4px;
        background:#fff; border:1px solid var(--rv-line); border-radius:12px;
    }
    .renewal-review .rv-pager ul li {
        list-style:none !important; display:inline-flex; margin:0; padding:0;
    }
    .renewal-review .rv-pager ul li::before,
    .renewal-review .rv-pager ul li::marker { content:none !important; display:none !important; }
    .renewal-review .rv-pager ul li a,
    .renewal-review .rv-pager ul li span {
        display:inline-flex; align-items:center; justify-content:center;
        min-width:30px; height:30px; padding:0 8px;
        border-radius:8px; font-size:12.5px; font-weight:700;
        color:var(--rv-ink-2); text-decoration:none; letter-spacing:-.02em;
        transition:all .15s;
    }
    .renewal-review .rv-pager ul li a:hover {
        background:var(--rv-orange-tint); color:var(--rv-orange-deep);
    }
    .renewal-review .rv-pager ul li.active span {
        background:var(--rv-orange); color:#fff;
    }
    .renewal-review .rv-pager ul li.off span { color:var(--rv-ink-3); opacity:.4; }

    .renewal-review .rv-back {
        display:block; text-align:center; margin:14px 16px 0; padding:12px;
        background:#fff; border:1.5px solid var(--rv-line);
        border-radius:99px; font-size:13px; font-weight:700;
        color:var(--rv-ink-2); text-decoration:none;
    }

    /* 모달 - 스코프 밖(.renewal-review 형제)에 있으므로 언스코프 규칙 필요 */
    #rvModal.rv-modal {
        position:fixed; inset:0; z-index:9999;
        display:none; align-items:center; justify-content:center;
    }
    #rvModal.rv-modal.on { display:flex; }
    .renewal-review .rv-modal {
        position:fixed; inset:0; z-index:9999;
        display:none; align-items:center; justify-content:center;
    }
    .renewal-review .rv-modal.on { display:flex; }
    .renewal-review .rv-modal-bg { position:absolute; inset:0; background:rgba(0,0,0,.5); }
    .renewal-review .rv-modal-card {
        position:relative; z-index:2; width:min(88%, 320px);
        background:#fff; border-radius:16px; padding:24px 20px 20px; text-align:center;
        box-shadow:0 12px 30px rgba(0,0,0,.25);
    }
    .renewal-review .rv-modal-icon {
        width:56px; height:56px; border-radius:50%; margin:0 auto 12px;
        display:flex; align-items:center; justify-content:center;
        background:linear-gradient(135deg, var(--rv-orange-lt), var(--rv-orange-deep));
        color:#fff; font-size:28px; font-weight:900;
    }
    .renewal-review .rv-modal.err .rv-modal-icon {
        background:linear-gradient(135deg, #E97878, var(--rv-danger));
    }
    .renewal-review .rv-modal-title { font-size:15px; font-weight:900; color:var(--rv-ink); margin-bottom:6px; }
    .renewal-review .rv-modal-msg { font-size:12.5px; color:var(--rv-ink-2); line-height:1.55; margin-bottom:16px; }
    .renewal-review .rv-modal-btn {
        width:100%; padding:12px; border:none; border-radius:99px; cursor:pointer;
        background:var(--rv-orange); color:#fff; font-size:13px; font-weight:900;
    }

/* ==========================================================
   Views/LuckyBoard/Play.cshtml
   ========================================================== */
    .lb-slot.lb-closed { background:#3a3a44 !important; color:#8a8a95 !important; cursor:not-allowed; opacity:.55; display:flex; align-items:center; justify-content:center; }
    .lb-mini.closed { opacity:.5; filter:grayscale(.7); }
    .lb-mini.closed .lb-mini-hd { color:#ff9a9a; }
    .lb-room-btn.closed { opacity:.55; filter:grayscale(.6); }

/* ==========================================================
   Views/LuckyConvert/Rules.cshtml
   ========================================================== */
    .renewal-lucky-convert-rules {
        --lc-orange:      #F9781A;
        --lc-orange-deep: #E56610;
        --lc-orange-soft: #FFE8D6;
        --lc-orange-tint: #FFF5EC;
        --lc-gold:        #C89A3D;
        --lc-cream:       #FFF8EE;
        --lc-cream-2:     #FEFAF3;
        --lc-line:        #EFE9DA;
        --lc-line-2:      #F5EFE3;
        --lc-ink:         #1F1815;
        --lc-ink-2:       #4A423B;
        --lc-ink-3:       #8A8278;

        background: var(--lc-cream);
        min-height: 100vh;
        padding: 14px 14px 32px;
        font-family: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        color: var(--lc-ink);
        line-height: 1.55;
    }
    .renewal-lucky-convert-rules * { box-sizing: border-box; }

    .renewal-lucky-convert-rules .r-hero {
        background: linear-gradient(135deg, #FF9945, var(--lc-orange-deep));
        color:#fff; border-radius:14px; padding:20px 20px 22px; position:relative; overflow:hidden;
        margin-bottom:14px;
    }
    .renewal-lucky-convert-rules .r-hero h2 { margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; }
    .renewal-lucky-convert-rules .r-hero p  { margin:6px 0 0; font-size:12.5px; opacity:.94; letter-spacing:-.02em; }

    .renewal-lucky-convert-rules .r-card {
        background:#fff; border:1px solid var(--lc-line); border-radius:12px;
        padding:16px 16px 14px; margin-bottom:12px;
    }
    .renewal-lucky-convert-rules .r-card h3 {
        margin:0 0 8px; font-size:14px; font-weight:800; color:var(--lc-ink);
        letter-spacing:-.02em; display:flex; align-items:center; gap:6px;
    }
    .renewal-lucky-convert-rules .r-card h3 .badge-mode {
        display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:99px;
        font-weight:800; letter-spacing:-.02em; margin-left:auto;
    }
    .renewal-lucky-convert-rules .r-card h3 .badge-a { background:#FFE8D6; color:var(--lc-orange-deep); }
    .renewal-lucky-convert-rules .r-card h3 .badge-b { background:#FDF4DC; color:var(--lc-gold); }
    .renewal-lucky-convert-rules .r-card p, .renewal-lucky-convert-rules .r-card li {
        font-size:12.5px; color:var(--lc-ink-2); letter-spacing:-.02em;
    }
    .renewal-lucky-convert-rules .r-card ul {
        list-style:none; padding:0; margin:6px 0 0;
    }
    .renewal-lucky-convert-rules .r-card ul li {
        padding:5px 0 5px 16px; position:relative;
    }
    .renewal-lucky-convert-rules .r-card ul li:before {
        content:"•"; position:absolute; left:4px; top:5px; color:var(--lc-orange);
    }
    .renewal-lucky-convert-rules .r-example {
        background: var(--lc-orange-tint); border:1px solid var(--lc-orange-soft);
        border-radius:10px; padding:10px 12px; margin-top:10px;
        font-size:12px; color:var(--lc-ink-2); letter-spacing:-.02em;
    }
    .renewal-lucky-convert-rules .r-example b { color:var(--lc-orange-deep); }

    .renewal-lucky-convert-rules table.rate-table {
        width:100%; border-collapse:collapse; margin-top:8px; font-size:12px;
    }
    .renewal-lucky-convert-rules table.rate-table th, .renewal-lucky-convert-rules table.rate-table td {
        border-bottom:1px solid var(--lc-line); padding:8px 6px; text-align:center;
        color:var(--lc-ink-2); font-variant-numeric:tabular-nums;
    }
    .renewal-lucky-convert-rules table.rate-table th { background:var(--lc-line-2); color:var(--lc-ink); font-weight:800; }
    .renewal-lucky-convert-rules table.rate-table td.k { color:var(--lc-ink); font-weight:700; text-align:left; padding-left:10px; }
    .renewal-lucky-convert-rules table.rate-table td.p { color:var(--lc-orange-deep); font-weight:800; }

    .renewal-lucky-convert-rules .warn {
        background:#FFF6E9; border:1px solid #FFD59A; border-radius:10px;
        padding:12px 14px; font-size:12px; color:#8A5000; margin-bottom:12px;
        line-height:1.6;
    }
    .renewal-lucky-convert-rules .warn b { color:var(--lc-orange-deep); }

    @media (min-width:768px){
        .renewal-lucky-convert-rules { max-width:480px; margin:0 auto; }
    }

/* ==========================================================
   Views/Payment/HectofinancialComplate.cshtml
   ========================================================== */
    /* ============================================================
       결제 완료 페이지 리뉴얼 v2 (2026-09-11)
       가자박스 브랜드 오렌지 톤 · 크림 배경 · 모바일 프레임
       스코프: .renewal-pay-result
       ============================================================ */
    .renewal-pay-result {
        --pr-orange:      #F9781A;
        --pr-orange-deep: #E56610;
        --pr-orange-lt:   #FFB055;
        --pr-orange-soft: #FFE8D6;
        --pr-orange-tint: #FFF5EC;
        --pr-cream:       #FFF8EE;
        --pr-cream-2:     #FEFAF3;
        --pr-line:        #EFE9DA;
        --pr-ink:         #1F1815;
        --pr-ink-2:       #4A423B;
        --pr-ink-3:       #8A8278;
        --pr-warn:        #E9962F;
        --pr-warn-deep:   #C77317;

        background: var(--pr-cream);
        min-height: 100vh;
        font-family: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        color: var(--pr-ink);
        padding: 0 0 32px;
    }
    /* SE(375px) 기준 · JS 로 zoom 적용 (CSS zoom + calc/clamp 조합이 일부 브라우저에서 안먹혀서 JS 우회) */
    .renewal-pay-result *, .renewal-pay-result *:before, .renewal-pay-result *:after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    /* ── 상단 헤더 (오렌지 그라디언트) ── */
    .renewal-pay-result .pr-head {
        position:relative; overflow:hidden;
        background: linear-gradient(135deg, #FF9945 0%, var(--pr-orange-deep) 100%);
        color: #fff;
        padding: 16px 16px 60px;
        display: flex; align-items: center; gap: 8px;
    }
    .renewal-pay-result .pr-head:before {
        content:""; position:absolute; right:-30px; top:-40px;
        width:160px; height:160px; border-radius:50%;
        background: rgba(255,255,255,0.10);
        pointer-events:none;
    }
    .renewal-pay-result .pr-head:after {
        content:""; position:absolute; right:30px; bottom:-50px;
        width:100px; height:100px; border-radius:50%;
        background: rgba(255,255,255,0.08);
        pointer-events:none;
    }
    .renewal-pay-result .pr-back {
        display:inline-flex; align-items:center; justify-content:center;
        width:34px; height:34px; border-radius:50%;
        background: rgba(255,255,255,.16);
        color:#fff; text-decoration:none; font-size:18px; font-weight:800;
        z-index:2;
    }
    .renewal-pay-result .pr-back:hover { background: rgba(255,255,255,.28); color:#fff; }
    .renewal-pay-result .pr-title {
        flex:1; text-align:center;
        font-size:16px; font-weight:800; letter-spacing:-.02em;
        margin-right:34px;   /* 백 버튼 대칭 상쇄 */
        z-index:2;
    }

    /* ── 결과 카드 (헤더와 살짝 겹침) ── */
    .renewal-pay-result .pr-card-wrap {
        max-width: 430px;
        margin: -46px auto 0;
        padding: 0 16px;
        position: relative; z-index: 2;
    }
    .renewal-pay-result .pr-card {
        background: #fff;
        border-radius: 20px;
        padding: 26px 22px 22px;
        box-shadow: 0 8px 28px rgba(120,60,10,.10);
        text-align: center;
        border: 1px solid var(--pr-line);
    }

    /* ── 아이콘 뱃지 (v2 2026-09-16: 성공은 3D 선물상자 이미지) ── */
    .renewal-pay-result .pr-icon {
        width: 110px; height: 110px;
        margin: 0 auto 13px;
        display: grid; place-items: center;
        color: transparent;
        font-size: 0;
        position: relative;
    }
    .renewal-pay-result .pr-icon:not(.warn) {
        background-image: url('/Payment/pay-success.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        filter: drop-shadow(0 10px 12px rgba(249,120,26,.35));
    }
    .renewal-pay-result .pr-icon.warn {
        width: 82px; height: 82px; border-radius: 50%;
        background: linear-gradient(135deg, #FFC48A, var(--pr-warn));
        color: #fff; font-size: 40px;
        box-shadow: 0 8px 20px rgba(201,120,25,.35);
    }
    @keyframes pr-pulse {
        0%   { transform:scale(1);   opacity:1; }
        70%  { transform:scale(1.28); opacity:0; }
        100% { transform:scale(1.28); opacity:0; }
    }

    /* ── 텍스트 (v2 2026-09-16 시안 매칭) ── */
    .renewal-pay-result .pr-status-title {
        font-size: 18px; font-weight: 900; letter-spacing: -.02em;
        color: var(--pr-ink); margin: 4px 0 6px; line-height: 1.2;
    }
    .renewal-pay-result .pr-status-title.warn { color: var(--pr-warn-deep); }
    .renewal-pay-result .pr-msg {
        font-size: 13px; line-height: 1.5; letter-spacing: -.02em;
        color: var(--pr-ink-2); margin: 8px 4px 20px; font-weight: 500;
        white-space: pre-line;
    }

    /* ── CTA 버튼 ── */
    .renewal-pay-result .pr-cta {
        display: block; width: 100%;
        padding: 7px;
        background: linear-gradient(135deg, var(--pr-orange-lt), var(--pr-orange));
        color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.02em;
        border: 0; border-radius: 14px;
        text-decoration: none; text-align: center;
        box-shadow: 0 6px 18px rgba(249,120,26,.35), inset 0 -2px 6px rgba(255,255,255,.25);
        cursor: pointer;
    }
    .renewal-pay-result .pr-cta:hover {
        background: linear-gradient(135deg, #FF9036, var(--pr-orange-deep));
        color: #fff; text-decoration: none;
    }
    .renewal-pay-result .pr-cta:active { transform: translateY(1px); }
    .renewal-pay-result .pr-cta.warn {
        background: linear-gradient(135deg, #FFC48A, var(--pr-warn));
        box-shadow: 0 6px 18px rgba(201,120,25,.35);
    }
    .renewal-pay-result .pr-cta.warn:hover {
        background: linear-gradient(135deg, #F0A857, var(--pr-warn-deep));
    }

    /* v3 (2026-09-16) 기준값 = SE(375px) 크기 · JS zoom 으로 큰 화면 자동 확대 */

/* ==========================================================
   Views/Payment/Index.cshtml
   ========================================================== */
/* ====================================================================
   박스 구매 페이지 리뉴얼 CSS (컴팩트 버전 - v2)
   - 스코프: .renewal-buy 하위에서만 적용 (다른 페이지에 영향 없음)
   - 참고: gazabox_clone_1.html 의 viewBuy 섹션
   - v2 변경: 전체 여백 축소, 결제수단 4열 1행, 박스 이미지 정상 표시
   ==================================================================== */


.renewal-buy{
    /* ================================================================
       가자박스 브랜드 팔레트 (DESIGN_STYLE_GUIDE.md 기반)
       - 오렌지 #F9781A 중심 · 크림/골드 조화 · 진중한 프리미엄 톤
       ================================================================ */
    --rb-brand:#F9781A;                  /* 메인 오렌지 (대표 확정) */
    --rb-brand-fill:#F9781A;             /* Primary CTA fill */
    --rb-brand-fill-hover:#E56610;       /* hover/active */
    --rb-brand-deep:#C55C15;             /* 강조 딥 오렌지 */
    --rb-brand-weak:#FFF5EC;             /* Accent tint (배경/약알림) */
    --rb-brand-line:#FFCBA0;             /* 옅은 오렌지 테두리 */
    --rb-gold:#C89A3D;                   /* 앤티크 골드 (₩10,000 액센트) */
    --rb-gold-deep:#A97F28;              /* 골드 hover */
    --rb-brown:#5D4E3D;                  /* 딥 브라운 (텍스트) */
    --rb-inv:#F9781A;
    --rb-on-inv:#fff;
    /* 텍스트 (웜 뉴트럴) */
    --rb-ink:#1F1815;                    /* 웜 near-black */
    --rb-ink2:#4A423B;                   /* 웜 그레이 */
    --rb-ink3:#8A8278;                   /* 웜 뮤트 */
    /* 배경/구조 - 크림 계열로 통일 */
    --rb-bpage:#FFF8EE;                  /* 페이지 크림 배경 (차가운 회색 → 웜 크림) */
    --rb-bline:#EFE9DA;                  /* 웜 아이보리 라인 */
    --rb-card:#FFFFFF;                   /* 카드는 순수 화이트 */
    --rb-input:#F7F1E5;                  /* 입력 필드 웜 배경 */
    background:var(--rb-bpage);
    padding:8px 0 18px;
    min-height:60vh;
}
.renewal-buy *{box-sizing:border-box}
.renewal-buy .rb-wrap{max-width:550px;margin:0 auto;padding:0 10px}

/* 헤더 */
.renewal-buy .buy-head{
    background:transparent;border:0;
    display:flex;align-items:center;justify-content:center;
    padding:6px 12px 10px;margin-bottom:0;
}
.renewal-buy .buy-head h1{margin:0;font-size:16px;font-weight:800;color:var(--rb-ink);letter-spacing:-.01em}

/* 카드 공통 - 웜톤 그림자, 테두리 없음 (컴팩트) */
.renewal-buy .buy-body{display:flex;flex-direction:column;gap:6px}
.renewal-buy .bcard{
    background:var(--rb-card);border-radius:12px;padding:10px 12px;
    box-shadow:0 2px 8px rgba(93,78,61,.06),0 0.5px 1px rgba(93,78,61,.04);
}
/* 섹션 타이틀 - 굵고 크게 (위계 최상위) */
.renewal-buy .blab{
    display:flex;align-items:baseline;gap:6px;margin:0 0 8px;
    font-size:13px;font-weight:800;color:var(--rb-ink);letter-spacing:-.01em;
}
.renewal-buy .blab .sub{font-size:10.5px;font-weight:400;color:var(--rb-ink3)}

/* 결제 긴급 알림 */
.renewal-buy .rb-emergency{
    background:#fff3ea;border:1px solid #ffd3b0;border-radius:12px;padding:10px 12px;
    margin-bottom:6px;
}
.renewal-buy .rb-emergency h4{margin:0 0 4px;color:#d33b34;font-size:12.5px;font-weight:800}
.renewal-buy .rb-emergency pre{margin:0;font-family:inherit;white-space:pre-wrap;font-size:11.5px;color:var(--rb-ink2)}

/* 박스 안내 문구 (regular, 가벼운 톤) */
.renewal-buy .box-note{
    text-align:center;font-size:11px;color:var(--rb-ink3);font-weight:400;margin-bottom:8px;
}

/* 박스 선택 - 컨테이너 여유 큼, 이미지에 안전 마진 */
.renewal-buy .buy-boxes{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    margin-bottom:8px;padding:14px 0;                  /* 확대 시 상하 여유 큼 */
}
.renewal-buy .buy-box{
    position:relative;border:0;background:transparent;padding:0;text-align:center;
    cursor:pointer;transition:transform .22s cubic-bezier(.34,1.15,.64,1),opacity .16s;
    transform-origin:center center;
    overflow:visible;
}
.renewal-buy .buy-box .art{
    height:170px;width:100%;                           /* 컨테이너 크게 */
    display:flex;align-items:center;justify-content:center;
    padding:6px;overflow:visible;
}
.renewal-buy .buy-box .art img{
    max-height:150px;                                  /* 이미지 크게 (상하 10px 여유) */
    max-width:94%;                                     /* 좌우 여유 최소화 */
    width:auto;height:auto;
    object-fit:contain;display:block;transition:.16s;
}
/* 미선택된 박스: 조금 축소 + 살짝 흐림 */
.renewal-buy .buy-box:not(.gazabox_buy_activ){transform:scale(.9);opacity:.72}
.renewal-buy .buy-box:not(.gazabox_buy_activ) .art img{filter:grayscale(.25)}
.renewal-buy .buy-box:not(.gazabox_buy_activ):hover{transform:scale(.94);opacity:.85}
/* 선택된 박스: 원래 크기 (100%) */
.renewal-buy .buy-box.gazabox_buy_activ{transform:scale(1)}
/* 작은 알약 (박스 이미지에 이미 금액이 있으므로 최소한만) */
.renewal-buy .buy-box .pill{
    display:block;padding:6px 4px;background:#eaeaee;color:var(--rb-ink3);
    border-radius:8px;font-size:11px;font-weight:700;transition:.16s;
    letter-spacing:.01em;
}
.renewal-buy .buy-box.gazabox_buy_activ .pill{
    background:var(--rb-brand-fill);color:#fff;
    box-shadow:0 4px 12px rgba(201,79,29,.28);
}
.renewal-buy .buy-box .tick{
    position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
    background:var(--rb-brand-fill);color:#fff;display:none;place-items:center;font-size:11px;font-weight:800;
    box-shadow:0 2px 6px rgba(201,79,29,.35);z-index:2;
}
.renewal-buy .buy-box.gazabox_buy_activ .tick{display:grid}

/* 수량 라인 (박스 카드 안, "수량선택 [−]1[+]") - 중앙 정렬 */
.renewal-buy .qty-inline{
    display:flex;align-items:center;gap:10px;padding-top:6px;
}
.renewal-buy .qty-inline .qty-lab{
    flex:0 0 auto;font-size:12px;font-weight:500;color:var(--rb-ink2);
}
.renewal-buy .qty-inline .stepper-inline{
    flex:1;justify-content:space-between;
}

/* 수량 하단 (안내문 + 퀵 칩) - 좌우 분할 */
.renewal-buy .qty-foot{
    display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap;
}
.renewal-buy .box-note-inline{
    flex:1;min-width:0;font-size:10.5px;color:var(--rb-ink3);font-weight:400;
}
.renewal-buy .qty-foot .qty-chips-inline{flex:0 0 auto;gap:5px}
.renewal-buy .stepper-inline{
    flex:0 0 auto;background:transparent;padding:0;gap:2px;
}
.renewal-buy .stepper-inline button{
    width:26px;height:26px;background:transparent;border:1px solid var(--rb-bline);
    border-radius:50%;color:var(--rb-brand-fill);font-weight:800;font-size:14px;
}
.renewal-buy .stepper-inline button:hover{background:var(--rb-brand-weak);border-color:var(--rb-brand-fill)}
.renewal-buy .stepper-inline button:active{background:var(--rb-brand-fill);color:#fff}
.renewal-buy .stepper-inline input{
    flex:0 0 44px;font-size:16px;font-weight:800;color:var(--rb-brand-fill);text-align:center;
    background:transparent;line-height:1;
}
.renewal-buy .qty-chips-inline{
    flex:1;display:flex;justify-content:flex-end;gap:5px;
}
.renewal-buy .qty-chips-inline button{
    border:1px solid var(--rb-bline);background:transparent;color:var(--rb-ink2);
    border-radius:14px;padding:5px 10px;font-size:11px;font-weight:500;
    cursor:pointer;white-space:nowrap;transition:.14s;
}
.renewal-buy .qty-chips-inline button:hover{border-color:var(--rb-brand-fill);color:var(--rb-brand-fill)}

/* 포인트 사용 (한 줄 압축 - 헤더 인라인 + 입력+버튼 한 줄) */
.renewal-buy .point-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px;
    flex-wrap:wrap;
}
.renewal-buy .point-avail-inline{
    font-size:11px;color:var(--rb-ink3);font-weight:400;
}
.renewal-buy .point-avail-inline b{color:var(--rb-ink);font-weight:800;font-size:12px}

/* 한 줄 압축: [input] [전액] [해제] [최대구매] */
.renewal-buy .point-row-compact{display:flex;align-items:stretch;gap:4px}
.renewal-buy .point-input{
    flex:1;min-width:0;border:0;background:#f4f4f7;border-radius:9px;
    padding:9px 12px;font-size:13px;color:var(--rb-ink);font-family:inherit;font-weight:700;
    text-align:right;letter-spacing:-.01em;
}
.renewal-buy .point-input::placeholder{color:var(--rb-ink3);font-weight:400;font-size:11.5px}
.renewal-buy .point-input:focus{outline:1.5px solid var(--rb-brand-fill);outline-offset:-1.5px;background:#fff}

.renewal-buy .pill-mini{
    flex:0 0 auto;border:1.5px solid var(--rb-brand-fill);background:#fff;color:var(--rb-brand-fill);
    border-radius:9px;padding:6px 10px;font-size:11px;font-weight:700;
    cursor:pointer;white-space:nowrap;transition:.14s;font-family:inherit;
}
.renewal-buy .pill-mini:hover{background:var(--rb-brand-fill);color:#fff}
.renewal-buy .pill-mini-ghost{border-color:var(--rb-bline);color:var(--rb-ink3)}
.renewal-buy .pill-mini-ghost:hover{background:var(--rb-ink);color:#fff;border-color:var(--rb-ink)}
.renewal-buy .pill-max{
    flex:0 0 auto;border:0;background:#1a1a1c;color:#fff;
    border-radius:9px;padding:6px 12px;font-size:11px;font-weight:700;
    cursor:pointer;transition:.16s;font-family:inherit;letter-spacing:-.01em;white-space:nowrap;
}
.renewal-buy .pill-max:hover{background:#000}

/* 알약 버튼 (톤다운 오렌지 아웃라인, 참고 앱 스타일) */
.renewal-buy .pill-btn{
    flex:0 0 auto;border:1.5px solid var(--rb-brand-fill);background:#fff;color:var(--rb-brand-fill);
    border-radius:22px;padding:8px 14px;font-size:12px;font-weight:700;
    cursor:pointer;white-space:nowrap;transition:.16s;line-height:1.2;text-align:center;
    font-family:inherit;letter-spacing:-.01em;
}
.renewal-buy .pill-btn:hover{background:var(--rb-brand-fill);color:#fff}
.renewal-buy .pill-btn-ghost{
    flex:0 0 auto;border:1px solid var(--rb-bline);background:#fff;color:var(--rb-ink3);
    border-radius:20px;padding:6px 12px;font-size:11px;font-weight:500;
    cursor:pointer;white-space:nowrap;transition:.16s;font-family:inherit;
}
.renewal-buy .pill-btn-ghost:hover{border-color:var(--rb-brand-fill);color:var(--rb-brand-fill)}

/* 수량 스테퍼 (컴팩트, qty-row 안에 배치) */
.renewal-buy .stepper{
    display:flex;align-items:center;justify-content:center;gap:4px;
    border:0;background:#f4f4f7;border-radius:10px;padding:3px 5px;
    flex:0 0 auto;
}
.renewal-buy .stepper button{
    width:28px;height:28px;border-radius:8px;background:#fff;color:var(--rb-ink);
    font-size:15px;line-height:1;display:grid;place-items:center;font-weight:700;
    border:0;cursor:pointer;transition:.14s;
}
.renewal-buy .stepper button:hover{color:var(--rb-brand)}
.renewal-buy .stepper button:active{background:var(--rb-brand);color:#fff}
.renewal-buy .stepper input{
    flex:0 0 50px;text-align:center;border:0;background:transparent;
    font-size:13px;font-weight:700;color:var(--rb-ink);font-family:inherit;padding:2px 0;
    -moz-appearance:textfield;
}

/* 수량+포인트 통합 행 (기본: 모바일 - 스텝퍼 위 / 액션 아래로 스택) */
.renewal-buy .qty-row{
    display:flex;flex-direction:column;gap:5px;margin-top:5px;
}
.renewal-buy .qty-row:first-child{margin-top:0}
.renewal-buy .qty-row .stepper{width:100%;justify-content:space-between}
.renewal-buy .qty-row .stepper input{flex:1;min-width:0}
.renewal-buy .qty-row .qty-actions{
    display:grid;gap:4px;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.renewal-buy .qty-row .qty-actions.qa-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.renewal-buy .qty-row .qty-actions button{
    border:0;background:#f4f4f7;border-radius:9px;padding:7px 2px;
    font-size:11.5px;font-weight:600;color:var(--rb-ink2);transition:.14s;
    cursor:pointer;white-space:nowrap;
}
.renewal-buy .qty-row .qty-actions button:hover{background:var(--rb-brand-weak);color:var(--rb-brand)}

/* 넓은 화면 (480px 이상) - 스텝퍼 + 액션 한 줄 배치 */
@media (min-width: 480px){
    .renewal-buy .qty-row{
        flex-direction:row;align-items:center;gap:7px;
    }
    .renewal-buy .qty-row .stepper{
        width:auto;flex:0 0 auto;min-width:120px;justify-content:center;gap:4px;
    }
    .renewal-buy .qty-row .stepper input{flex:0 0 50px}
    .renewal-buy .qty-row .qty-actions{
        flex:1;
    }
}

/* 통합 카드 안의 미니 라벨 (수량 / 포인트) */
.renewal-buy .qp-mini-lab{
    font-size:11px;font-weight:700;color:var(--rb-ink);
    margin:6px 0 3px;
}
.renewal-buy .qp-mini-lab:first-child{margin-top:0}
.renewal-buy .qp-divider{height:1px;background:var(--rb-bline);margin:8px 0 0}

/* 구 chips 클래스 (혹시 남아있으면) */
.renewal-buy .chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:5px}
.renewal-buy .chips button{
    border:1px solid var(--rb-bline);border-radius:8px;padding:6px 2px;
    font-size:11px;font-weight:600;color:var(--rb-ink2);background:#fff;transition:.14s;
    cursor:pointer;
}
.renewal-buy .chips button:hover{border-color:var(--rb-inv);color:var(--rb-ink)}

/* 쿠폰 필드 */
.renewal-buy .brow{display:flex;gap:6px;align-items:center}
.renewal-buy .brow + .brow{margin-top:6px}
.renewal-buy .bfield{
    flex:1;min-width:0;border:0;background:#f4f4f7;border-radius:10px;
    padding:12px 14px;font-size:12px;color:var(--rb-ink3);font-weight:500;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.renewal-buy .bfield.amt{text-align:right;font-weight:700;color:var(--rb-ink)}
.renewal-buy input.bfield{font-family:inherit;color:var(--rb-ink)}
.renewal-buy .bmini{
    flex:0 0 auto;border:0;background:var(--rb-brand-weak);border-radius:9px;padding:8px 12px;
    font-size:11.5px;font-weight:700;color:var(--rb-brand);transition:.14s;
    cursor:pointer;white-space:nowrap;
}
.renewal-buy .bmini:hover{background:var(--rb-brand);color:#fff}
.renewal-buy .pt-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px;flex-wrap:wrap}
.renewal-buy .bhint{margin:0;font-size:10.5px;color:var(--rb-ink3);line-height:1.4}
.renewal-buy .bhint b{color:var(--rb-ink);font-weight:700}
.renewal-buy .pt-foot .bhint{flex:1 1 auto;min-width:0}
.renewal-buy .pt-foot .bmini{padding:6px 9px;font-size:10.5px;flex:0 0 auto;white-space:nowrap}

/* 결제 수단 - 얇은 텍스트 알약형 (모든 화면 한 줄 4개) */
.renewal-buy .pays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.renewal-buy .pay{
    display:flex;align-items:center;justify-content:center;position:relative;
    border:0;background:#f4f4f7;border-radius:9px;padding:10px 3px;
    transition:.16s;text-align:center;min-width:0;cursor:pointer;margin:0;
    font-size:12px;font-weight:500;color:var(--rb-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    letter-spacing:-.01em;
}
.renewal-buy .pay input{position:absolute;opacity:0;pointer-events:none}
.renewal-buy .pay:hover{background:var(--rb-brand-weak);color:var(--rb-brand-fill)}
.renewal-buy .pay:has(input:checked){
    background:var(--rb-brand-fill);color:#fff;font-weight:700;
    box-shadow:0 3px 8px rgba(201,79,29,.22);
}

/* 연락처 - 라벨 인라인 + 얇게 */
.renewal-buy .contact-row{display:flex;align-items:center;gap:10px}
.renewal-buy .contact-lab{
    flex:0 0 auto;font-size:13px;font-weight:800;color:var(--rb-ink);white-space:nowrap;letter-spacing:-.01em;
}
.renewal-buy .contact-row .tel{flex:1}
.renewal-buy .tel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.renewal-buy .tel input{
    width:100%;border:0;background:#f4f4f7;border-radius:8px;padding:9px 4px;
    font-size:13px;text-align:center;font-family:inherit;color:var(--rb-ink);font-weight:700;
}
.renewal-buy .tel input:focus{outline:1.5px solid var(--rb-brand-fill);outline-offset:-1.5px;background:#fff}
.renewal-buy .contact-hint{margin:8px 0 0;font-size:10px;color:var(--rb-ink3);font-weight:400}

/* 약관 동의 - 얇게 */
.renewal-buy .agree{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;margin:0}
.renewal-buy .agree .chk{
    flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--rb-bline);
    display:grid;place-items:center;color:transparent;font-size:11px;font-weight:800;transition:.14s;
    background:#fff;
}
.renewal-buy .agree input{position:absolute;opacity:0;width:0;height:0}
.renewal-buy .agree input:checked + .chk{background:var(--rb-brand-fill);border-color:var(--rb-brand-fill);color:#fff}
.renewal-buy .agree .tx{flex:1;min-width:0;font-size:12px;color:var(--rb-ink);font-weight:500}
.renewal-buy .agree .go{flex:0 0 auto;color:var(--rb-brand);font-size:11px;font-weight:700;padding:4px 6px;background:var(--rb-brand-weak);border-radius:6px}

/* 필수 동의 강조 (2026-09-29)
   동의하지 않으면 결제가 막히는 항목이라 눈에 띄어야 한다 → 붉은 테두리 원 + 붉은 문구.
   ※ 예전엔 custom.css 에 같은 규칙이 있었는데, _Layout 이 custom.css → view-styles.css 순으로
     읽는 탓에 이 파일의 옛 규칙(.agree .chk 회색 테두리 / .tx 검정)이 뒤늦게 덮어써서 사라졌다.
     그래서 여기에 클래스 2개짜리 전용 규칙으로 다시 정의한다. (custom.css 쪽은 건드리지 않아도 이게 이긴다) */
.renewal-buy .agree.agree-required .chk{border-color:#E03131}
.renewal-buy .agree.agree-required .tx{color:#E03131;font-weight:700}
.renewal-buy .agree.agree-required input:checked + .chk{background:#E03131;border-color:#E03131;color:#fff}
.renewal-buy .rb-terms{margin-top:8px;border-top:1px dashed var(--rb-bline);padding-top:6px}
.renewal-buy .rb-term-item{margin-bottom:5px}
.renewal-buy .rb-term-title{font-size:11.5px;font-weight:700;color:var(--rb-ink);margin-bottom:2px;cursor:pointer;padding:4px 0}
.renewal-buy .rb-term-title::before{content:"▸ ";color:var(--rb-brand)}
.renewal-buy .rb-term-title.on::before{content:"▾ "}
.renewal-buy .rb-term-body{font-size:11px;line-height:1.55;color:var(--rb-ink2);padding:3px 0 6px 10px;display:none}
.renewal-buy .rb-term-title.on + .rb-term-body{display:block}

/* 금액 요약 */
.renewal-buy .sum-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;font-size:12.5px}
.renewal-buy .sum-row .k{color:var(--rb-ink2);font-weight:500}
.renewal-buy .sum-row .v{font-weight:700;color:var(--rb-ink);display:flex;align-items:baseline;gap:2px}
.renewal-buy .sum-row .v input{
    border:0;background:transparent;text-align:right;font:inherit;color:inherit;padding:0;width:100px;
}
.renewal-buy .sum-row .v.minus,.renewal-buy .sum-row .v.minus input{color:var(--rb-brand-fill)}
.renewal-buy .sum-div{height:1px;background:var(--rb-bline);margin:8px 0}
.renewal-buy .sum-row.total{padding:2px 0 0}
.renewal-buy .sum-row.total .k{font-size:13.5px;font-weight:700;color:var(--rb-ink)}
.renewal-buy .sum-row.total .v{font-size:18px;font-weight:800;color:var(--rb-brand-fill);gap:3px}
.renewal-buy .sum-row.total .v input{font-size:20px;font-weight:800;color:var(--rb-brand-fill);width:130px}

/* 결제 CTA - 다른 액센트와 통일감 있게 (같은 fill 컬러) */
.renewal-buy .buy-cta{margin-top:10px;padding:0 2px}
.renewal-buy .buy-cta button,
.renewal-buy .buy-cta a.buy-btn{
    display:block;width:100%;padding:15px 0;border-radius:12px;text-align:center;
    background:var(--rb-brand-fill);color:#fff !important;font-size:15px;font-weight:800;
    transition:.16s;border:0;cursor:pointer;text-decoration:none;font-family:inherit;
    box-shadow:0 6px 16px rgba(229,102,0,.28);letter-spacing:-.01em;
}
.renewal-buy .buy-cta button:hover,
.renewal-buy .buy-cta a.buy-btn:hover{background:var(--rb-brand-fill-hover);box-shadow:0 8px 20px rgba(229,102,0,.35)}
.renewal-buy .buy-cta button:disabled{background:#d5d5da;color:#fff;cursor:not-allowed;box-shadow:none}
.renewal-buy .buy-cta .buy-warn{margin:8px 8px 0;font-size:9.5px;line-height:1.6;color:var(--rb-ink3);text-align:center}

/* 숫자 입력 스핀버튼 제거 */
.renewal-buy input.num::-webkit-outer-spin-button,
.renewal-buy input.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ==========================================================
   Views/Shared/_Layout_Footer.cshtml
   ========================================================== */
    /* ================================================================
       하단 네비게이션 v6 - 뷰포트 비례 스케일링 (2026-09-07)
       - 기준: iPhone 16 Pro Max (430px viewport) = 100% (상한값)
       - 그 이하 화면 (SE 375px, 미니 320px 등) 은 vw 단위로 자동 축소
       - min() 함수로 상한 캡 + 하한은 자연 스케일 (부드럽게 작아짐)
       - 데스크탑 (>430px) 은 상한값에서 고정 (더 커지지 않음)
       ================================================================ */
    .mobile_footer_menu_container {
        background-image: url(/images/bg-footer.png) !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        /* height: 114px at 430px viewport → 26.5vw, cap 114px */
        height: min(26.5vw, 114px) !important;
    }

    .mobile_footer_menu_container .rb-nav-row {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        /* padding: 4px 8px 22px at 430 → 0.93vw 1.86vw 5.1vw */
        padding: min(0.93vw, 4px) min(1.86vw, 8px) min(5.1vw, 22px) !important;
        margin: 0;
        gap: 0;
    }

    /* 각 네비 아이템 - 하단 정렬 (아이콘+라벨 세로 스택) */
    .mobile_footer_menu_container .rb-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        /* gap: 8px → 1.86vw */
        gap: min(1.86vw, 8px);
        color: #fff;
        text-decoration: none !important;
        cursor: pointer;
        padding: 0;
        transition: opacity .15s, transform .15s;
        min-width: 0;
        max-width: 20%;
    }

    .mobile_footer_menu_container .rb-nav-item:hover,
    .mobile_footer_menu_container .rb-nav-item:focus {
        opacity: 0.9;
        color: #fff;
        text-decoration: none;
    }

    .mobile_footer_menu_container .rb-nav-item:active {
        transform: scale(0.95);
    }

    /* 4개 외곽 아이콘: 56px at 430 → 13vw */
    .mobile_footer_menu_container .rb-nav-item .rb-nav-img {
        width: min(13vw, 56px);
        height: min(13vw, 56px);
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,.18));
    }

    /* 4개 외곽 라벨: 11px at 430 → 2.56vw */
    .mobile_footer_menu_container .rb-nav-item .rb-nav-label {
        display: block;
        font-size: min(2.56vw, 11px);
        font-weight: 700;
        letter-spacing: -.03em;
        text-shadow: 0 1px 2px rgba(0,0,0,.3);
        color: #fff;
        line-height: 1;
        white-space: nowrap;
        margin: 0;
    }

    /* 중앙 박스구매: 82px at 430 → 19vw */
    .mobile_footer_menu_container .rb-nav-item.rb-nav-center {
        flex: 1;
        max-width: 20%;
    }
    .mobile_footer_menu_container .rb-nav-item.rb-nav-center .rb-nav-img {
        width: min(19vw, 82px);
        height: min(19vw, 82px);
        /* margin-top: -8px → -1.86vw */
        margin-top: max(-1.86vw, -8px);
        margin-bottom: 0;
        filter: drop-shadow(0 3px 10px rgba(255,140,60,.65)) drop-shadow(0 2px 4px rgba(0,0,0,.25));
    }

    /* 중앙은 이미지 안에 이미 "박스구매" 텍스트가 있으므로 라벨 숨김 */
    .mobile_footer_menu_container .rb-nav-item.rb-nav-center .rb-nav-label {
        display: none;
    }

    /* v3(2026-09-13): 박스구매 애니메이션 - wrapper 기반 정확한 정렬
       - 이미지의 margin-top(-8px)을 wrapper 로 이동
       - ::after 가 wrapper 크기 100% 일치 → 어떤 화면에서도 어긋남 없음 */
    .mobile_footer_menu_container .rb-nav-item.rb-nav-center .rb-nav-img-wrap {
        position: relative;
        display: block;
        width: min(19vw, 82px);
        height: min(19vw, 82px);
        margin-top: max(-1.86vw, -8px);
        border-radius: 18px;
        isolation: isolate;
        animation: box-buy-pulse 3s ease-in-out infinite;
    }
    /* wrapper 안에서 이미지는 margin-top 없이 꽉 차게 */
    .mobile_footer_menu_container .rb-nav-item.rb-nav-center .rb-nav-img-wrap .rb-nav-img {
        width: 100% !important;
        height: 100% !important;
        margin-top: 0 !important;
        display: block;
    }
    /* 테두리 안쪽으로만 흐르는 흰빛 - wrapper 크기와 100% 일치 */
    .mobile_footer_menu_container .rb-nav-item.rb-nav-center .rb-nav-img-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px;
        border-radius: 18px;
        pointer-events: none;

        background: linear-gradient(
            115deg,
            transparent 25%,
            rgba(255, 255, 255, 0.55) 42%,
            #fff 50%,
            rgba(255, 255, 255, 0.55) 58%,
            transparent 75%
        );
        background-size: 250% 100%;

        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;

        animation: box-buy-border-shine 3s ease-in-out infinite;
    }
    @keyframes box-buy-pulse {
        0%, 30%, 100% { transform: scale(1); }
        12%           { transform: scale(1.04); }
    }
    /* 3초 주기 중 1.5초 동안 슥 지나감 (3s * 50% = 1.5s) */
    @keyframes box-buy-border-shine {
        0%       { opacity: 0; background-position: 100% 50%; }
        3%       { opacity: 1; background-position: 100% 50%; }
        53%      { opacity: 1; background-position: 0% 50%; }
        56%, 100% { opacity: 0; background-position: 0% 50%; }
    }
    @media (prefers-reduced-motion: reduce) {
        .mobile_footer_menu_container .rb-nav-item.rb-nav-center,
        .mobile_footer_menu_container .rb-nav-item.rb-nav-center::after {
            animation: none;
        }
        .mobile_footer_menu_container .rb-nav-item.rb-nav-center::after { display: none; }
    }

    /* 상단 body 겹치지 않도록 여백 확보 - 컨테이너와 동일 높이 */
    .footer_bottom_height { height: min(26.5vw, 114px) !important; }

/* ==========================================================
   Views/Shared/_Layout_Top.cshtml
   ========================================================== */
    /* ========== 상단 헤더 리뉴얼 (배경 이미지) ========== */
    .ftco-navbar-light {
        background-image: url(/images/bg-header.png) !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    @media (max-width: 991.98px) {
        .ftco-navbar-light {
            background-image: url(/images/bg-header.png) !important;
            background-size: cover !important;
            background-position: center !important;
        }
    }
    /* 로고/아이콘 텍스트 그림자로 가독성 유지 */
    .top_container .navbar-brand img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
    .top_container .icon,
    .top_container .navbar-toggler .oi { text-shadow: 0 1px 2px rgba(0,0,0,.2); }

    /* v3(2026-09-13): 좁은 화면에서 랭킹전 버튼이 다음 줄로 떨어지지 않도록 강제 nowrap */
    /* 좌우 패딩 축소해 아래 배너 카드들의 좌우 폭과 시각적 정렬 통일 */
    /* 상하 패딩은 이미지 잘림 방지를 위해 유지 */
    /* v3(2026-09-14): 하단 잘림 방지 - 패딩 확대 + min-height 확보 */
    .top_container .navbar { padding-left: 0; padding-right: 0; padding-top: 12px; padding-bottom: 5px; min-height: 62px; }
    /* v3(2026-09-14): 헤더 좌우 여백을 아래 콘텐츠(메인/라운지/교환소 등) 폭과 맞춤 → 우측 오버플로 제거 */
    .top_container .navbar > .container {
        flex-wrap: nowrap !important;
        gap: 2px;
        max-width: none;
        padding-left: 12px;
        padding-right: 12px;   /* 아래 카드/배너 우측 라인과 동일 */
    }
    /* 햄버거 버튼 우측 여백 최소화 → 배너 카드 우측 끝과 시각적 정렬 */
    .top_container .navbar-toggler {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    /* 랭킹전 이미지: 가로세로 비율 3:1 유지 */
    @media (max-width: 430px) {
        .top_container a[href="/Event/Ranking"] img {
            max-width: 90px !important;
            height: 30px !important;
        }
    }
    @media (max-width: 375px) {
        .top_container a[href="/Event/Ranking"] img {
            max-width: 78px !important;
            height: 26px !important;
        }
    }

    /* ═══ 햄버거 드로어 리뉴얼 (가자 스타일) — 풀스크린 오버레이 ═══ */
    .top_container .navbar-collapse#ftco-nav.show,
    .top_container .navbar-collapse#ftco-nav.collapsing {
        position: fixed;
        top: var(--header-h, 72px);  /* JS 로 실제 헤더 높이 세팅 */
        /* 2026-09-18 : 본문(.main_container)은 550px 로 묶여 있는데 드로어만 left:0/right:0 이라
           넓은 화면에서 화면 전체로 퍼져 헤더와 어긋나 보였다 → 본문과 같은 폭으로 가운데 정렬 */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: 550px;
        bottom: 0;
        margin: 0;
        padding: 10px 12px 100px;
        background: #FFF8EE;
        background-image: none !important;
        border-top: 2px solid #E56610;   /* 헤더와 시각적 분리 */
        box-shadow: inset 0 6px 12px rgba(0,0,0,.03);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 900;                    /* 헤더(nav) 보다 낮게 */
    }
    .top_container .navbar-collapse#ftco-nav.show ul.top_menu_ui_container,
    .top_container .navbar-collapse#ftco-nav.collapsing ul.top_menu_ui_container {
        zoom: 0.8;   /* 내부만 축소 → 부모(nav)에 영향 없음 */
    }
    /* 상단 네비 항상 드로어 위에 */
    .top_container #ftco-navbar { position: relative; z-index: 1000; }
    /* zoom 미지원 대비 폴백 */
    @supports not (zoom: 0.8) {
        .top_container .navbar-collapse#ftco-nav.show ul.top_menu_ui_container,
        .top_container .navbar-collapse#ftco-nav.collapsing ul.top_menu_ui_container {
            transform: scale(0.8);
            transform-origin: top left;
            width: 125%;
        }
    }
    /* 드로어 열림 시 body 스크롤 잠금 (Bootstrap 자동 처리 안 되므로 간단 처리) */
    body.is-drawer-open { overflow: hidden; }
    .top_container .navbar-collapse#ftco-nav ul.top_menu_ui_container {
        padding: 0 !important;   /* custom.css 의 padding-left:20px !important 를 눌러 좌우 대칭 (2026-09-29) */
        margin: 0;
        position: relative;   /* 하위 abs 배치의 기준 */
    }

    /* 상단 프로필 카드 (닉네임 + 등급 아이콘 + 포인트 배지 인라인) */
    .top_container .navbar-collapse#ftco-nav .is-member .nav_menu_li:first-child {
        background: #fff;
        border-radius: 14px;
        margin: 6px 0 4px;
        padding: 12px 12px 12px 14px;
        border: 1.5px solid #FFE8D6;
        box-shadow: 0 2px 8px rgba(249,120,26,.08);
        list-style: none;
        position: relative;
    }
    .top_container .navbar-collapse#ftco-nav .is-member .nav_menu_li:first-child .nav-link { padding: 0 !important; }
    .top_container .navbar-collapse#ftco-nav .top_menu_nick_txt_box { padding-left: 4px; }
    .top_container .navbar-collapse#ftco-nav .top_menu_li_name_txt_1 {
        font-size: 9.5px; font-weight: 800; color: #E56610; letter-spacing: .08em;
    }
    .top_container .navbar-collapse#ftco-nav .top_menu_li_name_txt_2 {
        font-size: 32px; font-weight: 700; color: #1F1815; letter-spacing: -.02em; margin-top: 1px !important; line-height: 1.15;
    }
    .top_container .navbar-collapse#ftco-nav .top_menu_li_name_txt_2 span { color: #1F1815 !important; }
    .top_container .navbar-collapse#ftco-nav .header-grade-icon img { width: 32px; height: 32px; object-fit: contain; }

    /* 포인트 배지 — 프로필 카드 안, 한탕주의 하단 라인에 정렬 (ul 기준 abs) */
    .top_container .navbar-collapse#ftco-nav ul.top_menu_ui_container.is-member > li:nth-child(2) {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 38px;     /* 한탕주의 baseline 근처 (드로어 상단 → 프로필 padding → GAZABOX ID → 이름 중하단) */
        right: 22px;
        bottom: auto;
        z-index: 3;
    }
    .top_container .navbar-collapse#ftco-nav .top_menu_li_point_div {
        background: #F9781A;   /* 가자 오렌지 단색 */
        color: #fff;
        padding: 9px 19px;
        border-radius: 99px;
        font-size: 15px; font-weight: 800; letter-spacing: -.01em;
        display: inline-flex; align-items: center; gap: 5px;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(249,120,26,.25);
    }
    .top_container .navbar-collapse#ftco-nav .top_menu_li_point_div .icon { font-size: 14px; }
    /* 프로필 카드 우측에 포인트 배지 자리 확보 */
    .top_container .navbar-collapse#ftco-nav .is-member .nav_menu_li:first-child { padding-right: 130px; }

    /* 2026-09-18 : 비로그인 드로어의 LogIn 항목이 옛 장식 글꼴(ncaa-washington-st)로 남아
       나머지 항목과 따로 놀아서 같은 글꼴로 맞춤 (로그인 상태 LogOut 은 기존 유지) */
    .top_container .navbar-collapse#ftco-nav .is-guest .nav_menu_li_logout {
        font-family: inherit;
        font-size: inherit;
    }

    /* 섹션 헤더 (분류제목: 나의 활동 등) */
    .top_container .navbar-collapse#ftco-nav .nav_menu_section_hdr {
        margin: 14px 0 4px;
        pointer-events: none;
        background: transparent !important;
        border: none;
        padding: 0;
        list-style: none;
    }
    .top_container .navbar-collapse#ftco-nav .nav_menu_section_label {
        color: #1F1815;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: -.02em;
        padding: 4px 6px 6px;
        border: none;
        margin: 0;
        background: transparent;
    }

    /* 메뉴 리스트 — 항목별 개별 라운드 카드 (섹션 안에 간격 있음) */
    .top_container .navbar-collapse#ftco-nav .is-member .nav_menu_li:not(:first-child):not(.nav_menu_section_hdr):not(:empty):not(:last-child):not(:nth-child(2)),
    .top_container .navbar-collapse#ftco-nav .is-guest .nav_menu_li:not(:empty) {
        background: #fff;
        border-radius: 12px;
        list-style: none;
        margin: 5px 0 0;
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .top_container .navbar-collapse#ftco-nav .nav_menu_section_hdr + .nav_menu_li {
        margin-top: 2px !important;
    }
    .top_container .navbar-collapse#ftco-nav .nav_menu_li .nav-link {
        display: flex; align-items: center; gap: 10px;
        padding: 11px 14px !important;
        color: #1F1815 !important;
        font-size: 11px; font-weight: 700; letter-spacing: -.02em;
    }
    .top_container .navbar-collapse#ftco-nav .nav_menu_li .nav-link:hover,
    .top_container .navbar-collapse#ftco-nav .nav_menu_li .nav-link:focus {
        background: #FFF5EC;
        color: #E56610 !important;
        border-radius: 12px;
    }
    .top_container .navbar-collapse#ftco-nav .nav_menu_li .nav-link > span:first-child {
        width: 22px; height: 22px;
        display: inline-flex; align-items: center; justify-content: center;
        background: transparent; color: #E56610;
        border-radius: 6px; font-size: 15px;
        flex-shrink: 0;
        text-shadow: none;
    }
    .top_container .navbar-collapse#ftco-nav .nav_menu_li .nav-link > span:first-child .icon { text-shadow: none; }

    /* 빈 li 스페이서 숨기기 */
    .top_container .navbar-collapse#ftco-nav .is-member .nav_menu_li:empty,
    .top_container .navbar-collapse#ftco-nav .is-member .nav_menu_li:nth-last-child(2) {
        display: none !important;
    }

    /* 로그아웃 */
    .top_container .navbar-collapse#ftco-nav .is-member .nav_menu_li:last-child {
        background: transparent !important;
        margin-top: 14px;
        border: none;
    }
    .top_container .navbar-collapse#ftco-nav .is-member .nav_menu_li:last-child .nav-link {
        background: #fff;
        border: 1.5px solid #EFE9DA;
        border-radius: 99px;
        text-align: center;
        justify-content: center;
        color: #8A8278 !important;
        font-weight: 800;
        padding: 10px 14px !important;
    }
    .top_container .navbar-collapse#ftco-nav .is-member .nav_menu_li:last-child .nav-link > span:first-child {
        background: transparent; color: #8A8278;
    }

    /* 원본 fallback (드로어 미열림 시) */
    .nav_menu_section_hdr {
        margin-top: 14px;
        pointer-events: none;
    }
    .nav_menu_section_label {
        color: rgba(255,255,255,.72);
        font-size: 0.72em;
        font-weight: 700;
        letter-spacing: 0.03em;
        padding: 4px 14px 6px;
        border-bottom: 1px solid rgba(255,255,255,.18);
        margin: 0 6px;
    }

    /* 상단 헤더 wrap 방지 - collapse 메뉴는 제외 */
    .top_container .navbar-brand { flex-shrink: 0; }
    .top_container .top_clear { flex: 1 1 auto; min-width: 0; }
    .top_container .navbar-toggler { flex-shrink: 0; }
    /* collapse(모바일 메뉴)는 wrap 허용 - 모바일에서 열릴 때 아래로 전개돼야 함 */
    .top_container .container > .navbar-collapse { flex-basis: 100%; }

    /* ================================================================
       Pattern B (hero-wrap.hero-bread) 서브바 → 상단 네비 통합
       - 하위 페이지의 큰 흰색 [← 페이지제목] 바를 전역으로 숨김
       - 대신 상단 오렌지 네비 안에 [← 페이지제목] 표시
       ================================================================ */
    .hero-wrap.hero-bread { display: none !important; }

    /* 2026-09-29 : 단, _Layout_Null 을 쓰는 페이지(이벤트 상세·결제 콜백 등)는
       위 상단 오렌지 네비가 아예 없어 대체 표시가 되지 않는다.
       숨기기만 하면 뒤로가기가 통째로 사라지므로, 이 레이아웃에서는 원래 바를 그대로 보여 준다.
       (.d-none 으로 일부러 숨긴 페이지는 건드리지 않는다) */
    body.layout-null .hero-wrap.hero-bread:not(.d-none) { display: block !important; }

    /* 상단 서브페이지 헤더 (JS 로 sub_page_hdr 활성 시 표시) */
    .top_sub_page_hdr {
        display: none;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
    }
    body.is-sub-page .navbar-brand { display: none !important; }
    body.is-sub-page .top_sub_page_hdr { display: flex; }

    .top_sub_page_hdr .top_back_btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-right: 2px;
        color: #fff;
        background: transparent;
        border-radius: 50%;
        text-decoration: none;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        transition: background 0.15s;
        flex-shrink: 0;
    }
    .top_sub_page_hdr .top_back_btn:hover { background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; }
    .top_sub_page_hdr .top_back_btn:active { background: rgba(255,255,255,0.25); }
    .top_sub_page_hdr .top_page_title {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-shadow: 0 1px 2px rgba(0,0,0,0.15);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }
    /* v3(2026-09-14): 서브페이지 모드에서 필러(top_clear) 숨김 → 타이틀이 가용 폭 전부 사용 */
    body.is-sub-page .top_clear { display: none !important; }

/* ==========================================================
   Views/UserOrder/Alarm.cshtml
   ========================================================== */
    .renewal-alarm {
        --ra-orange:      #F9781A;
        --ra-orange-deep: #E56610;
        --ra-orange-soft: #FFE8D6;
        --ra-orange-tint: #FFF5EC;
        --ra-gold:        #C89A3D;
        --ra-brown:       #5D4E3D;
        --ra-navy:        #2C3E50;
        --ra-cream:       #FFF8EE;
        --ra-cream-2:     #FEFAF3;
        --ra-line:        #EFE9DA;
        --ra-line-2:      #F5EFE3;
        --ra-ink:         #1F1815;
        --ra-ink-2:       #4A423B;
        --ra-ink-3:       #8A8278;
        --ra-crimson:     #E11D48;

        background: var(--ra-cream);
        min-height: 100vh;
        padding: 12px 0 24px;
        font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
    }
    .renewal-alarm * { box-sizing: border-box; }
    .renewal-alarm .ra-wrap {
        max-width: 520px;
        margin: 0 auto;
        padding: 0 12px;
    }

    /* ---- 헤더 ---- */
    .renewal-alarm .ra-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 4px 10px;
    }
    .renewal-alarm .ra-title {
        font-size: 17px;
        font-weight: 800;
        color: var(--ra-ink);
        letter-spacing: -0.02em;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .renewal-alarm .ra-title .ra-total-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 8px;
        background: var(--ra-orange);
        color: #fff;
        border-radius: 11px;
        font-size: 11px;
        font-weight: 800;
        font-family: 'Pretendard', sans-serif;
    }
    .renewal-alarm .ra-actions { display: flex; gap: 6px; }
    .renewal-alarm .ra-action {
        border: 1px solid var(--ra-line);
        background: #fff;
        color: var(--ra-ink-2);
        font-size: 11px;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 14px;
        cursor: pointer;
        letter-spacing: -0.02em;
        transition: all 0.15s;
    }
    .renewal-alarm .ra-action:hover { border-color: var(--ra-orange); color: var(--ra-orange); }

    /* ---- 카테고리 필터 칩 (여러 줄 wrap) ---- */
    .renewal-alarm .ra-filter {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;         /* 화면 좁으면 다음 줄로 */
        padding: 4px 0 10px;
    }
    .renewal-alarm .ra-chip {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #fff;
        border: 1.5px solid var(--ra-line);
        color: var(--ra-ink-2);
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        padding: 7px 14px;
        border-radius: 99px;
        cursor: pointer;
        transition: all 0.15s;
        letter-spacing: -0.02em;
    }
    .renewal-alarm .ra-chip:hover { border-color: var(--ra-orange); }
    .renewal-alarm .ra-chip .ra-cnt {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        background: var(--ra-line-2);
        color: var(--ra-ink-2);
        border-radius: 9px;
        font-size: 10.5px;
        font-weight: 700;
    }
    .renewal-alarm .ra-chip.on {
        background: var(--ra-ink);
        border-color: var(--ra-ink);
        color: #fff;
    }
    .renewal-alarm .ra-chip.on .ra-cnt {
        background: #fff;
        color: var(--ra-ink);
    }

    /* ---- 알람 리스트 ---- */
    .renewal-alarm .ra-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .renewal-alarm .ra-row {
        background: #fff;
        border: 1.5px solid var(--ra-line);
        border-radius: 14px;
        padding: 13px 15px;
        cursor: pointer;
        transition: all 0.12s;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .renewal-alarm .ra-row:hover {
        border-color: var(--ra-orange-soft);
        box-shadow: 0 4px 12px rgba(249,120,26,0.08);
        transform: translateY(-1px);
    }
    .renewal-alarm .ra-row:active { transform: translateY(0) scale(0.99); }
    .renewal-alarm .ra-row.unread {
        background: linear-gradient(135deg, #fff, var(--ra-cream-2));
        border-color: var(--ra-orange-soft);
    }
    .renewal-alarm .ra-row.unread .ra-title-txt { font-weight: 700; }

    .renewal-alarm .ra-row-top {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .renewal-alarm .ra-cat {
        display: inline-flex;
        align-items: center;
        font-size: 10.5px;
        font-weight: 700;
        padding: 2px 9px;
        border-radius: 99px;
        letter-spacing: -0.02em;
    }
    .renewal-alarm .ra-cat.cat-friend  { background: var(--ra-orange-tint); color: var(--ra-orange-deep); }
    .renewal-alarm .ra-cat.cat-gift    { background: #FDF4DC; color: var(--ra-gold); }
    .renewal-alarm .ra-cat.cat-ship    { background: #E9F0F5; color: var(--ra-navy); }
    .renewal-alarm .ra-cat.cat-pay     { background: #F0EBE2; color: var(--ra-brown); }
    .renewal-alarm .ra-cat.cat-event   { background: #FFE8D6; color: var(--ra-orange-deep); }
    .renewal-alarm .ra-cat.cat-system  { background: var(--ra-line-2); color: var(--ra-ink-2); }
    .renewal-alarm .ra-cat.cat-lucky   { background: #E5F4E7; color: #15803D; }
    .renewal-alarm .ra-cat.cat-etc     { background: var(--ra-line-2); color: var(--ra-ink-3); }

    .renewal-alarm .ra-new {
        display: inline-flex;
        align-items: center;
        font-size: 9px;
        color: #fff;
        background: var(--ra-crimson);
        padding: 2px 6px;
        border-radius: 99px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
    .renewal-alarm .ra-date {
        margin-left: auto;
        font-size: 11px;
        color: var(--ra-ink-3);
        font-weight: 500;
        white-space: nowrap;
    }
    .renewal-alarm .ra-title-txt {
        font-size: 13.5px;
        color: var(--ra-ink);
        line-height: 1.4;
        letter-spacing: -0.02em;
    }

    /* ---- 빈 상태 ---- */
    .renewal-alarm .ra-empty {
        text-align: center;
        padding: 60px 20px 40px;
        color: var(--ra-ink-3);
    }
    .renewal-alarm .ra-empty .ra-empty-ic {
        font-size: 36px;
        margin-bottom: 8px;
        opacity: 0.4;
    }
    .renewal-alarm .ra-empty .ra-empty-txt {
        font-size: 13px;
        color: var(--ra-ink-3);
        letter-spacing: -0.02em;
    }

/* ==========================================================
   Views/UserOrder/BuyBoxList.cshtml
   ========================================================== */
    /* ===== 더가자박스 카드 (기존 gaza_buybox_img_box 와 가로 사이즈 통일) ===== */
    .gs-card {
        position: relative; background:#fff; border:2px solid #C89A3D;
        border-radius:8px; padding:10px 4px 8px; text-align:center;
        box-shadow:0 4px 12px rgba(200,154,61,.15);
    }
    .gs-card.silver { border-color:#B0B0B0; box-shadow:0 4px 12px rgba(120,120,120,.12); }
    .gs-card.expired { opacity:.55; filter:grayscale(1); }
    .gs-card .gs-badge { display:none; }   /* 상단 알약 뱃지 제거 */
    .gs-card .gs-vis {
        width:65%; margin:0 auto; aspect-ratio:1/1;
        display:flex; align-items:center; justify-content:center;
        border-radius:6px; overflow:hidden;
        font-size:44px;
    }
    .gs-card .gs-vis img {
        width:100%; height:100%; object-fit:contain; display:block;
    }
    .gs-card .gs-name {
        font-size:12.5px; font-weight:800; color:#1F1815; letter-spacing:-.02em;
        line-height:1.25; margin-top:6px; padding:0 4px;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .gs-card .gs-cd {
        font-size:11px; font-weight:800; margin-top:2px; padding:0 4px;
        display:flex; align-items:center; justify-content:center; gap:3px;
    }
    .gs-card .gs-cd.safe { color:#C89A3D; }
    .gs-card .gs-cd.warn { color:#B54141; }
    .gs-card .gs-cd.dim  { color:#8A8278; }
    .gs-card .gs-open-btn {
        display:inline-block; margin:6px 8px 0; padding:5px 18px;
        background:#F9781A; color:#fff; border:none; border-radius:99px;
        font-size:11px; font-weight:800; text-decoration:none; letter-spacing:-.02em; cursor:pointer;
    }
    .gs-card.expired .gs-open-btn { background:#B0B0B0; cursor:default; }
    .gs-card .gs-open-btn.done { background:#B0B0B0; cursor:default; }
    .gs-card .gs-del-btn {
        position:absolute; top:4px; right:4px; z-index:3;
        width:22px; height:22px; border:none; border-radius:50%;
        background:rgba(0,0,0,.35); color:#fff; font-size:12px;
        line-height:1; cursor:pointer; padding:0;
    }
    .gs-card .gs-del-btn:hover { background:#B54141; }

    /* ===== 더가자박스 확인/이펙트/결과 - 기존 가자박스 오픈 UX 재현 ===== */

    /* [1] 확인 모달 - 기존 가자박스와 동일한 오렌지 배경 */
    #gsConfirmModal {
        display:none; position:fixed; inset:0; z-index:2000;
        background:linear-gradient(180deg, #FF9F5A 0%, #F9781A 40%, #E56610 100%);
        flex-direction:column; align-items:center; justify-content:center;
        color:#fff; padding:24px 20px;
    }
    #gsConfirmModal.show { display:flex; }
    #gsConfirmModal .gs-cf-tip {
        background:rgba(0,0,0,.25); color:#fff; padding:14px 16px;
        border-radius:12px; font-size:12.5px; line-height:1.55; letter-spacing:-.02em;
        max-width:320px; text-align:left;
        position:relative;
    }
    #gsConfirmModal .gs-cf-tip::after {
        content:''; position:absolute; bottom:-8px; left:32px;
        border-left:8px solid transparent; border-right:8px solid transparent;
        border-top:8px solid rgba(0,0,0,.25);
    }
    #gsConfirmModal .gs-cf-tip b { color:#FFEDA0; font-weight:800; }
    #gsConfirmModal .gs-cf-icon {
        margin:24px 0 10px; font-size:110px; line-height:1;
        filter:drop-shadow(0 6px 16px rgba(0,0,0,.25));
    }
    #gsConfirmModal .gs-cf-title { font-size:28px; font-weight:900; letter-spacing:.05em; margin-top:8px; }
    #gsConfirmModal .gs-cf-desc { font-size:12px; opacity:.9; text-align:center; margin-top:6px; letter-spacing:-.02em; line-height:1.5; }
    #gsConfirmModal .gs-cf-agree {
        margin-top:18px; font-size:12.5px; color:#fff; display:flex; align-items:center; gap:6px;
    }
    #gsConfirmModal .gs-cf-agree input { transform:scale(1.15); }
    #gsConfirmModal .gs-cf-btns { display:flex; gap:10px; margin-top:16px; }
    #gsConfirmModal .gs-cf-btns button {
        min-width:110px; padding:11px 22px; border-radius:99px;
        border:none; font-size:14px; font-weight:800; letter-spacing:-.02em; cursor:pointer;
    }
    #gsConfirmModal .gs-cf-open  { background:#fff; color:#E56610; }
    #gsConfirmModal .gs-cf-close { background:#fff; color:#4A423B; }

    /* [2] 이펙트 오버레이 - 검은 배경 (이펙트가 돋보이도록) */
    #gsOpenOverlay {
        display:none; position:fixed; inset:0; z-index:2000;
        background:#0A0A0C;   /* 이펙트 영상 뒤 배경 (기본 검정). 필요시 변경 */
        flex-direction:column; align-items:center; justify-content:center;
        color:#fff;
    }
    #gsOpenOverlay .gs-skip-btn {
        position:absolute; top:16px; left:16px; z-index:2;
        background:rgba(220,53,69,.9); color:#fff; border:none;
        padding:6px 16px; border-radius:99px; font-size:12px; font-weight:800; cursor:pointer;
    }
    #gsOpenOverlay .gs-fx-img { max-width:80%; max-height:60%; margin:10px 0; filter:drop-shadow(0 0 30px rgba(255,255,255,.4)); border-radius:12px; }
    #gsOpenOverlay .gs-fx-icon { font-size:120px; margin:10px 0 8px; filter:drop-shadow(0 4px 20px rgba(0,0,0,.25));
        animation:gsPulse 1.4s ease-in-out infinite; }
    @keyframes gsPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
    #gsOpenOverlay .gs-msg { font-size:14px; color:#fff; font-weight:700; margin-top:10px; opacity:.95; letter-spacing:-.02em; }

    /* [3] 결과 화면 - 화려한 배경 + 큰 상품 이미지 */
    #gsResultOverlay {
        display:none; position:fixed; inset:0; z-index:2001;
        background:radial-gradient(ellipse at center, #6B2A1A 0%, #3A140B 100%);
        flex-direction:column; align-items:center; justify-content:center;
        padding:20px;
    }
    #gsResultOverlay.show { display:flex; }
    #gsResultOverlay::before {
        content:''; position:absolute; inset:0; pointer-events:none;
        background:
            radial-gradient(circle at 20% 30%, rgba(255,180,80,.35) 0px, transparent 4px),
            radial-gradient(circle at 80% 20%, rgba(255,215,120,.35) 0px, transparent 3px),
            radial-gradient(circle at 60% 70%, rgba(255,150,50,.30) 0px, transparent 5px),
            radial-gradient(circle at 30% 80%, rgba(255,200,100,.25) 0px, transparent 3px),
            radial-gradient(circle at 90% 60%, rgba(255,220,140,.30) 0px, transparent 4px);
        background-size: 240px 240px, 320px 320px, 300px 300px, 280px 280px, 260px 260px;
    }
    #gsResultOverlay .gs-res-skip {
        position:absolute; top:16px; left:16px; z-index:2;
        background:rgba(220,53,69,.9); color:#fff; border:none;
        padding:6px 16px; border-radius:99px; font-size:12px; font-weight:800; cursor:pointer;
    }
    #gsResultOverlay .gs-res-thumb {
        width:88%; max-width:320px; aspect-ratio:1/1;
        background:#fff; border-radius:14px;
        display:flex; align-items:center; justify-content:center;
        overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.4); position:relative; z-index:1;
    }
    #gsResultOverlay .gs-res-thumb img { width:100%; height:100%; object-fit:contain; }
    #gsResultOverlay .gs-res-thumb .gs-res-placeholder { color:#B4A48B; font-size:14px; font-weight:700; }
    #gsResultOverlay .gs-res-info {
        width:88%; max-width:320px; margin-top:14px; text-align:left; position:relative; z-index:1;
    }
    #gsResultOverlay .gs-res-name { font-size:15px; font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1.35; }
    #gsResultOverlay .gs-res-price { font-size:16px; font-weight:900; color:#FFB055; margin-top:6px; }
    #gsResultOverlay .gs-res-grade {
        display:inline-block; font-size:11px; font-weight:800; padding:3px 10px; border-radius:99px;
        background:#FFF3D9; color:#C89A3D; margin-top:6px;
    }
    #gsResultOverlay .gs-res-actions {
        display:flex; gap:10px; margin-top:20px; justify-content:center; position:relative; z-index:1;
    }
    #gsResultOverlay .gs-res-actions button {
        min-width:110px; padding:11px 22px; border-radius:99px;
        border:none; font-size:14px; font-weight:800; letter-spacing:-.02em; cursor:pointer;
    }
    #gsResultOverlay .gs-res-primary { background:#F9781A; color:#fff; }
    #gsResultOverlay .gs-res-close   { background:#fff; color:#4A423B; }
    #gsResultOverlay .gs-res-note {
        font-size:11px; color:#EED9BF; text-align:center; margin-top:12px;
        padding:6px 14px; background:rgba(0,0,0,.25); border-radius:99px; position:relative; z-index:1;
    }

    /* ══════════════════════════════════════════════════════════
       박스 오픈 전 확인 모달 (v4 2026-09-16 시안 리뉴얼)
    ══════════════════════════════════════════════════════════ */
    /* 모달 배경: 오렌지 → 크림톤 (기존 .gazabox_open_bg 완전 override) */
    /* 프리오픈 모드(.gzo-preopen-mode) 일 때만 크림톤 리뉴얼 스타일 적용 · 이펙트/결과창은 원본 유지 */
    #gazaboxOpenMultiModal.gzo-preopen-mode .modal-dialog {
        max-width: 360px !important;
        width: calc(100% - 32px);
        margin: 2vh auto !important;
    }
    #gazaboxOpenMultiModal.gzo-preopen-mode .modal-content {
        background: #FEFCF9 !important; border: 0 !important; border-radius: 24px !important;
        box-shadow: 0 20px 60px rgba(120,60,10,.25) !important;
        overflow: hidden !important;
        height: auto !important;
        max-height: calc(100vh - 100px);
        top: 0 !important;
        background-image: none !important;
    }
    #gazaboxOpenMultiModal.gzo-preopen-mode .modal-body {
        padding: 0 !important;
        max-height: calc(100vh - 100px);
        height: auto !important;
        overflow-x: hidden; overflow-y: auto;
        scrollbar-width: none;
    }
    #gazaboxOpenMultiModal.gzo-preopen-mode .modal-body::-webkit-scrollbar { display: none; }
    #gazaboxOpenMultiModal.gzo-preopen-mode .gazabox_open_img_container {
        height: auto !important; padding: 0 !important;
    }
    #gazaboxOpenMultiModal.gzo-preopen-mode .gazabox_open_img_box {
        position: static !important; top: 0 !important; height: auto !important;
    }

    /* v7 (2026-09-16) 모든 상태(프리오픈·이펙트·결과) 모달 크기·형태 통일 */
    #gazaboxOpenMultiModal .modal-dialog {
        max-width: 375px !important;
        width: calc(100% - 24px) !important;
        margin: 8px auto !important;
    }
    /* 이펙트/결과 상태 (프리오픈 아님): 고정 높이 · 이펙트 재생 시 어둠 · 결과창은 크림 */
    #gazaboxOpenMultiModal:not(.gzo-preopen-mode) .modal-content.gazabox_open_bg {
        height: calc(100vh - 100px) !important;
        max-height: calc(100vh - 100px);
        top: 0 !important;
        border-radius: 24px !important;
        background-color: #1F1815 !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        display: flex; flex-direction: column;
        overflow: hidden;
    }
    /* postopen: 배경 단색 검정 · 버튼 영역도 단색 검정 · 레이아웃은 이펙트 상태 동일 */
    #gazaboxOpenMultiModal.gzo-postopen-mode .modal-content.gazabox_open_bg {
        background-color: #000 !important;
        background-image: none !important;
    }
    #gazaboxOpenMultiModal.gzo-postopen-mode .gazabox_open_img_box_img_layer {
        background: #000 !important;
    }
    #gazaboxOpenMultiModal.gzo-postopen-mode .gazabox_open_btn_box {
        background: #000 !important;
        backdrop-filter: none !important;
    }
    /* 그 gap 정체 = .gazabox_open_text_box (50px 고정 · 다중 오픈에선 비어있음) */
    #gazaboxOpenMultiModal.gzo-postopen-mode .gazabox_open_text_box {
        display: none !important;
    }
    #gazaboxOpenMultiModal:not(.gzo-preopen-mode) .modal-body {
        height: auto !important; flex: 1 1 auto; min-height: 0;
        display: flex; flex-direction: column;
        overflow: hidden !important; padding: 0 !important;
        position: relative;
    }
    #gazaboxOpenMultiModal:not(.gzo-preopen-mode) .gazabox_open_bg .modal-body { height: auto !important; }
    #gazaboxOpenMultiModal:not(.gzo-preopen-mode) .row {
        margin: 0 !important; flex: 1 1 auto; min-height: 0; display: flex;
    }
    #gazaboxOpenMultiModal:not(.gzo-preopen-mode) .gazabox_open_img_container {
        height: auto !important; flex: 1 1 auto; min-height: 0;
        padding: 0 !important; display: flex; flex-direction: column;
    }
    #gazaboxOpenMultiModal:not(.gzo-preopen-mode) .gazabox_open_img_box {
        flex: 1 1 auto; min-height: 0; height: auto !important; top: 0 !important;
        display: flex; flex-direction: column; overflow: hidden;
    }
    /* 상품리스트: img_box 를 완전히 채움 + 넘치면 스크롤 (검정 gap 없음 + 스크롤 동작) */
    #gazaboxOpenMultiModal:not(.gzo-preopen-mode) .gazabox_open_img_box_img_layer {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: 100% !important;   /* 부모(img_box) 를 완전히 채움 */
        overflow-y: auto !important; overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #gazaboxOpenMultiModal:not(.gzo-preopen-mode) .gazabox_open_img_box_img_layer::-webkit-scrollbar { display: none; }

    /* 하단 버튼 영역: 오픈 이펙트 종료 후에만 노출 (기본 hidden · JS 로 gzo-postopen-mode 클래스 붙이면 표시) */
    #gazaboxOpenMultiModal:not(.gzo-preopen-mode) .gazabox_open_btn_box {
        display: none !important;
    }
    #gazaboxOpenMultiModal.gzo-postopen-mode .gazabox_open_btn_box {
        position: sticky !important;
        bottom: 0 !important;
        left: 0 !important; right: 0 !important;
        transform: none !important; width: 100% !important;
        padding: 12px 16px !important; margin: 0 !important;
        display: flex !important; gap: 8px; justify-content: center; align-items: center;
        background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.4));
        backdrop-filter: blur(6px);
        border-radius: 0 0 24px 24px;
        z-index: 20;
        flex: 0 0 auto;
        min-height: 60px;
    }
    #gazaboxOpenMultiModal.gzo-postopen-mode .gazabox_open_btn_box .btn {
        display: inline-block !important;
        min-width: 70px;
    }

    /* Skip 버튼: 가자박스 스타일 (오렌지) · 이펙트 중에만 노출 · 상품리스트 뜨면 자동 hide */
    #gazaboxOpenMultiModal .gazabox_btn_skip {
        background: linear-gradient(135deg, #FFB055, #E56610) !important;
        color: #fff !important; border: 0 !important;
        border-radius: 99px !important;
        padding: 6px 16px !important;
        font-size: 12px !important; font-weight: 800 !important;
        letter-spacing: -.02em !important;
        box-shadow: 0 3px 10px rgba(229,102,16,.35);
        position: absolute; z-index: 10;
    }
    #gazaboxOpenMultiModal .gazabox_btn_skip_container {
        padding: 10px 14px !important;
    }
    #gazaboxOpenMultiModal .gazabox_open_img_container {
        height: auto !important; padding: 0 !important;
    }
    #gazaboxOpenMultiModal .gazabox_open_img_box {
        position: static !important; top: 0 !important; height: auto !important;
    }

    /* pre-open 컨테이너 · SE 기준 · 화면 커지면 통짜로 확대 */
    .gzo-preopen {
        display: flex; flex-direction: column; align-items: stretch;
        padding: 0 22px 22px;
        font-family: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        zoom: var(--gz-zoom, 1);   /* 2026-09-18 : vw 순환참조 → gz-modal-zoom.js 가 계산 */
    }
    .gzo-hero {
        display: block; width: 100%; height: auto;
        max-height: 42vh; object-fit: contain;   /* 화면 세로 42% 이내 — SE 도 닫기까지 다 보이게 */
        margin: 0 auto 8px; user-select: none; pointer-events: none;
    }
    /* 선택한 박스 X개 pill */
    .gzo-count-pill {
        align-self: center;
        padding: 6px 22px;
        background: #FDE8D2; color: #6E5A48;
        border-radius: 99px;
        font-size: 14px; font-weight: 600; letter-spacing: -.02em;
        margin: 4px 0 10px;
    }
    .gzo-count-pill b { color: #E56610; font-size: 16px; font-weight: 800; margin-left: 4px; }

    /* 경고 박스 (v2: 아이콘을 텍스트 인라인으로 · 폭 축소) */
    .gzo-warning {
        background: #FDE8D2; border-radius: 14px;
        padding: 10px 14px; margin: 0 auto 10px;
        max-width: 88%;
        text-align: center;
    }
    .gzo-warning-icon {
        display: inline-grid; place-items: center;
        width: 18px; height: 18px; border-radius: 50%;
        background: #E56610; color: #fff;
        font-size: 12px; font-weight: 900; line-height: 1;
        vertical-align: -3px; margin-right: 6px;
    }
    .gzo-warning-msg {
        font-size: 13px; color: #4A423B; font-weight: 600;
        line-height: 1.5; letter-spacing: -.02em;
    }

    /* 동의 체크박스 (v3: 체크박스+글씨를 중앙에 붙여서 배치) */
    .gzo-agree {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 6px 4px 10px; margin: 0; cursor: pointer; user-select: none;
    }
    .gzo-agree input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
    .gzo-agree-box {
        flex: 0 0 22px; width: 22px; height: 22px; border: 2px solid #D6C9B8;
        border-radius: 6px; background: #fff; position: relative; transition: .15s;
    }
    .gzo-agree input:checked + .gzo-agree-box { background: #E56610; border-color: #E56610; }
    .gzo-agree input:checked + .gzo-agree-box::after {
        content: ""; position: absolute; left: 6px; top: 2px;
        width: 6px; height: 12px; border: solid #fff;
        border-width: 0 2.5px 2.5px 0;
        transform: rotate(45deg);
    }
    .gzo-agree-text {
        font-size: 13.5px; color: #4A423B; font-weight: 600;
        letter-spacing: -.02em;
    }

    /* 열기 버튼 */
    .gzo-open-btn {
        display: block; width: 100%; padding: 8px;
        background: linear-gradient(135deg, #FF9036, #E56610);
        color: #fff; border: 0; border-radius: 14px;
        font-size: 17px; font-weight: 800; letter-spacing: -.02em;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(229,102,16,.30);
        transition: .12s;
    }
    .gzo-open-btn:hover { background: linear-gradient(135deg, #FF7A15, #C55210); color:#fff; }
    .gzo-open-btn:active { transform: translateY(1px); }
    .gzo-open-btn[disabled], .gzo-open-btn:disabled { opacity: .55; cursor: not-allowed; }

    /* 닫기 링크 */
    .gzo-close-link {
        display: block; text-align: center;
        margin-top: 9px; padding: 5px 0;
        color: #9A928A; font-size: 14px; font-weight: 600; letter-spacing: -.02em;
        text-decoration: none;
    }
    .gzo-close-link:hover { color: #4A423B; text-decoration: none; }

/* ==========================================================
   Views/UserOrder/BuyList.cshtml
   ========================================================== */
/* ==================================================================
   최근구매(BuyList) 리뉴얼 - 가자박스 브랜드 톤
   스코프: .renewal-buylist 이하에서만 적용 (다른 페이지 영향 없음)
   토큰: 오렌지 #F9781A / 크림 #FFF8EE / 골드 #C89A3D / line #EFE9DA / ink #1F1815
   참고: BuyOpenBoxList / LuckyConvert / Synthesis Calculator
   ================================================================== */
.renewal-buylist{
    --brand-orange:#F9781A;
    --brand-orange-dk:#E56610;
    --brand-cream:#FFF8EE;
    --brand-cream-lt:#FFFDF8;
    --brand-gold:#C89A3D;
    --brand-line:#EFE9DA;
    --brand-ink:#1F1815;
    --brand-ink-sub:#6B5F55;
    --brand-mute:#9C918A;

    font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
    color:var(--brand-ink);
    padding:12px 12px 96px;
    background:linear-gradient(#FFFDF8 0%, #FFF8EE 400px, #FFF8EE 100%);
    min-height:calc(100vh - 60px);
}
.renewal-buylist *{box-sizing:border-box}

/* -------- 1. 안내 카드 (복구 안내) -------- */
.renewal-buylist .rb-notice{
    background:#fff;
    border:1px solid var(--brand-line);
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:10px;
    box-shadow:0 2px 8px rgba(200,154,61,.06);
    display:flex;align-items:flex-start;gap:12px;
}
.renewal-buylist .rb-notice-ico{
    flex-shrink:0;width:36px;height:36px;border-radius:50%;
    background:linear-gradient(135deg,#FFB055,#F9781A);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:18px;font-weight:800;letter-spacing:-.02em;
    box-shadow:0 2px 6px rgba(249,120,26,.35);
}
.renewal-buylist .rb-notice-body{flex:1;min-width:0}
.renewal-buylist .rb-notice-title{
    font-size:13px;font-weight:800;color:var(--brand-ink);
    letter-spacing:-.02em;margin-bottom:4px;
}
.renewal-buylist .rb-notice-desc{
    font-size:11.5px;color:var(--brand-ink-sub);
    letter-spacing:-.01em;line-height:1.5;margin-bottom:6px;
}
.renewal-buylist .rb-notice-count{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--brand-cream);
    border:1px solid var(--brand-line);
    border-radius:99px;padding:4px 10px;
    font-size:11.5px;font-weight:700;color:var(--brand-ink-sub);
    letter-spacing:-.01em;
}
.renewal-buylist .rb-notice-count b{color:var(--brand-orange);font-weight:800}
.renewal-buylist .rb-notice-count .rb-left{color:var(--brand-gold);font-weight:800}

/* -------- 2. 필터바 -------- */
.renewal-buylist .rb-filter{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    background:#fff;border:1px solid var(--brand-line);border-radius:12px;
    padding:8px;margin-bottom:10px;
}
@media(min-width:480px){
    .renewal-buylist .rb-filter{grid-template-columns:1.2fr 1.4fr 1.2fr auto}
}
.renewal-buylist .rb-filter select,
.renewal-buylist .rb-filter input[type=text],
.renewal-buylist .rb-filter input[type=date]{
    width:100%;height:34px;
    border:1px solid var(--brand-line);background:var(--brand-cream-lt);
    border-radius:8px;padding:0 10px;font-size:12px;
    color:var(--brand-ink);font-family:inherit;letter-spacing:-.01em;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
}
.renewal-buylist .rb-filter select{
    padding-right:24px;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpolygon points='0,0 10,0 5,6' fill='%23C89A3D'/%3e%3c/svg%3e");
    background-repeat:no-repeat;background-position:right 8px center;background-size:8px;
}
.renewal-buylist .rb-filter select:focus,
.renewal-buylist .rb-filter input:focus{
    outline:1.5px solid var(--brand-orange);outline-offset:-1.5px;
    border-color:var(--brand-orange);background:#fff;
}
.renewal-buylist .rb-filter .rb-search-btn{
    grid-column:span 2;
    height:34px;border:0;border-radius:8px;
    background:linear-gradient(135deg,#FFB055,#F9781A);color:#fff;
    font-size:12px;font-weight:800;letter-spacing:-.02em;
    cursor:pointer;transition:.14s;font-family:inherit;
    box-shadow:0 2px 6px rgba(249,120,26,.28);
    display:inline-flex;align-items:center;justify-content:center;gap:4px;
}
@media(min-width:480px){
    .renewal-buylist .rb-filter .rb-search-btn{grid-column:auto;padding:0 18px}
}
.renewal-buylist .rb-filter .rb-search-btn:hover{
    background:linear-gradient(135deg,#F9781A,#E56610);
    box-shadow:0 3px 10px rgba(249,120,26,.4);
}
.renewal-buylist .rb-filter .rb-search-btn:active{transform:translateY(1px)}

/* -------- 3. 리스트 (카드) -------- */
.renewal-buylist .rb-list{display:flex;flex-direction:column;gap:8px}

.renewal-buylist .rb-card{
    background:#fff;border:1px solid var(--brand-line);
    border-radius:14px;padding:12px 14px;
    box-shadow:0 2px 8px rgba(200,154,61,.06);
    transition:transform .12s ease, box-shadow .12s ease;
}
.renewal-buylist .rb-card:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(200,154,61,.12);
}

.renewal-buylist .rb-card-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
    margin-bottom:8px;
}
.renewal-buylist .rb-card-title{
    flex:1;min-width:0;
    font-size:13.5px;font-weight:800;color:var(--brand-ink);
    letter-spacing:-.02em;line-height:1.4;
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.renewal-buylist .rb-card-title .rb-gbox-thumb{
    display:inline-flex;align-items:center;gap:4px;
    background:var(--brand-cream);border:1px solid var(--brand-line);
    border-radius:8px;padding:2px 6px 2px 2px;
}
.renewal-buylist .rb-card-title .rb-gbox-thumb img{
    width:22px;height:22px;object-fit:contain;display:block;
}
.renewal-buylist .rb-card-title .rb-gbox-thumb .rb-gbox-cnt{
    font-size:11px;font-weight:800;color:var(--brand-gold);letter-spacing:-.01em;
}
.renewal-buylist .rb-card-title .rb-cancel-tag{
    font-size:10.5px;font-weight:800;
    background:#F4E3D3;color:#C4692D;
    padding:2px 7px;border-radius:99px;letter-spacing:-.01em;
}
.renewal-buylist .rb-card-date{
    font-size:11px;color:var(--brand-mute);
    letter-spacing:-.01em;font-weight:600;white-space:nowrap;
    flex-shrink:0;
}

/* 메타 행: 금액/할인/포인트 */
.renewal-buylist .rb-card-meta{
    display:flex;flex-wrap:wrap;gap:10px 14px;
    padding:8px 10px;background:var(--brand-cream-lt);
    border:1px solid var(--brand-line);border-radius:10px;
    margin-bottom:6px;
}
.renewal-buylist .rb-meta-item{
    display:inline-flex;align-items:baseline;gap:4px;
    font-size:11.5px;color:var(--brand-ink-sub);letter-spacing:-.01em;
}
.renewal-buylist .rb-meta-item .rb-lbl{font-weight:600;color:var(--brand-mute)}
.renewal-buylist .rb-meta-item .rb-val{
    font-weight:800;color:var(--brand-ink);font-size:12.5px;
}
.renewal-buylist .rb-meta-item.rb-point .rb-val{color:var(--brand-orange)}
.renewal-buylist .rb-meta-item.rb-discount .rb-val{color:#C4692D}
/* 2026-09-28 즉시전환(박스오픈 보너스)에서 기본 전환액과 나눠 보여 주는 보너스분 */
.renewal-buylist .rb-meta-item.rb-bonus .rb-val{color:#1F8A4C}

/* 2026-09-28 어떤 전환인지 제목 옆에 표시 (럭키전환 / 즉시전환).
   기록은 셋 다 pu_type=8 이라 화면에서만 구분된다 */
.renewal-buylist .rb-card-title .rb-way-tag{
    font-size:10.5px;font-weight:800;
    padding:2px 7px;border-radius:99px;letter-spacing:-.01em;
    white-space:nowrap;
}
.renewal-buylist .rb-card-title .rb-way-lucky{background:#EFE3F6;color:#6B3FA0}
.renewal-buylist .rb-card-title .rb-way-instant{background:#DFF3E6;color:#1F8A4C}

/* 하위(sub) 라인: 복구/럭키/전환 상세 */
.renewal-buylist .rb-card-sub{
    border-top:1px dashed var(--brand-line);
    margin-top:8px;padding-top:10px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.renewal-buylist .rb-sub-info{
    flex:1;min-width:0;
    display:flex;flex-direction:column;gap:2px;
}
.renewal-buylist .rb-sub-info .rb-sub-name{
    font-size:12.5px;font-weight:700;color:var(--brand-ink);letter-spacing:-.02em;
    line-height:1.3;
}
.renewal-buylist .rb-sub-info .rb-sub-meta{
    font-size:11px;color:var(--brand-ink-sub);letter-spacing:-.01em;
}
.renewal-buylist .rb-sub-info .rb-sub-meta b{color:var(--brand-ink);font-weight:700}

/* 뱃지/버튼 pill */
.renewal-buylist .rb-pill{
    display:inline-flex;align-items:center;gap:4px;
    padding:7px 14px;border-radius:99px;
    font-size:11.5px;font-weight:800;letter-spacing:-.02em;
    border:0;cursor:pointer;transition:.14s;
    font-family:inherit;white-space:nowrap;
}
.renewal-buylist .rb-pill.rb-primary{
    background:linear-gradient(135deg,#FFB055,#F9781A);color:#fff;
    box-shadow:0 2px 6px rgba(249,120,26,.28);
}
.renewal-buylist .rb-pill.rb-primary:hover{
    background:linear-gradient(135deg,#F9781A,#E56610);
    box-shadow:0 3px 10px rgba(249,120,26,.4);
}
.renewal-buylist .rb-pill.rb-primary::after{content:"›";font-size:14px;margin-left:2px;line-height:1}
.renewal-buylist .rb-pill.rb-disabled{
    background:#F4F1EB;color:#9C918A;cursor:not-allowed;
    border:1px solid var(--brand-line);
}
.renewal-buylist .rb-pill.rb-info{
    background:var(--brand-cream);color:var(--brand-gold);
    border:1px solid var(--brand-line);cursor:default;
}

/* 럭키보드 태그 */
.renewal-buylist .rb-lucky-tag{
    display:inline-flex;align-items:center;gap:4px;
    background:linear-gradient(135deg,#FFF3D9,#FFE5A5);
    color:#8B6914;border:1px solid #E5C877;
    padding:2px 8px;border-radius:99px;
    font-size:10.5px;font-weight:800;letter-spacing:-.01em;margin-right:4px;
}

/* -------- 4. 빈 상태 -------- */
.renewal-buylist .rb-empty{
    background:#fff;border:2px dashed var(--brand-line);
    border-radius:14px;padding:44px 20px;text-align:center;
    color:var(--brand-ink-sub);
}
.renewal-buylist .rb-empty .rb-empty-ico{
    font-size:38px;margin-bottom:8px;line-height:1;color:var(--brand-gold);opacity:.5;
}
.renewal-buylist .rb-empty .rb-empty-title{
    font-size:14px;font-weight:800;color:var(--brand-ink);letter-spacing:-.02em;margin-bottom:4px;
}
.renewal-buylist .rb-empty .rb-empty-desc{
    font-size:12px;color:var(--brand-mute);letter-spacing:-.01em;
}

/* -------- 5. 페이징 여백 -------- */
.renewal-buylist .rb-paging{margin-top:14px}
.renewal-buylist .rb-paging .block-27 ul{margin:0;padding:0;text-align:center}

/* -------- 6. 복구 모달: v2(2026-09-17) 공통 확인 모달(gz-confirm) + css/renewal-modals.css 로 이동 -------- */

/* ==========================================================
   Views/UserOrder/BuyOpenBoxList.cshtml
   ========================================================== */
/* ==================================================================
   상품보관함 리뉴얼 - 인라인 필터바 (모달 → 상시 노출)
   - 스코프: .rb-filter-bar 하위에서만 적용
   - 참고: 사용자 UX 개선 요청 - 클릭 절약, 필터 즉시 반영
   ================================================================== */
/* 필터 토글 헤더 (기본 접힘 상태에서 보임) */
.rb-filter-toggle{
    display:flex;align-items:center;justify-content:space-between;
    padding:9px 14px;background:#f5f5f7;border-radius:10px;
    margin-bottom:6px;cursor:pointer;user-select:none;
    border:0;width:100%;font-family:inherit;
    transition:.14s;
}
.rb-filter-toggle:hover{background:#eeeef2}
.rb-filter-toggle .rb-toggle-label{
    font-size:12px;font-weight:700;color:#333;display:flex;align-items:center;gap:6px;
}
.rb-filter-toggle .rb-toggle-label::before{content:"🔍";font-size:13px}
.rb-filter-toggle .rb-toggle-count{
    font-size:11px;color:#999;font-weight:500;margin-left:6px;
}
.rb-filter-toggle .rb-toggle-arrow{
    font-size:12px;color:#666;transition:transform .2s;
}
.rb-filter-toggle.open .rb-toggle-arrow{transform:rotate(180deg)}

/* 필터바 - 접혀있을 때는 안 보임 */
.rb-filter-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:5px;
    padding:8px 10px;background:#f5f5f7;border-radius:10px;
    margin-bottom:6px;align-items:stretch;
    max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;margin-bottom:0;
    opacity:0;
    transition:max-height .3s ease-out, opacity .2s ease-out, padding .3s ease-out, margin-bottom .3s ease-out;
}
.rb-filter-bar.open{
    max-height:400px;padding-top:10px;padding-bottom:10px;margin-bottom:6px;opacity:1;
}
@media (min-width: 480px){
    .rb-filter-bar{grid-template-columns:repeat(4,1fr)}
    .rb-filter-bar .rb-search-wrap{grid-column:span 4}
}
.rb-filter-bar select{
    width:100%;border:1px solid #e0e0e5;background:#fff;border-radius:8px;
    padding:8px 24px 8px 10px;font-size:12px;color:#333;font-family:inherit;
    cursor:pointer;height:34px;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpolygon points='0,0 10,0 5,6' fill='%23888'/%3e%3c/svg%3e");
    background-repeat:no-repeat;background-position:right 8px center;background-size:8px;
}
.rb-filter-bar select:focus{
    outline:1.5px solid #FF7000;outline-offset:-1.5px;border-color:#FF7000;
}
.rb-filter-bar .rb-search-wrap{
    grid-column:span 2;display:flex;gap:5px;
}
.rb-filter-bar .rb-search-input{
    flex:1;min-width:0;border:1px solid #e0e0e5;background:#fff;border-radius:8px;
    padding:8px 12px;font-size:12px;color:#333;font-family:inherit;height:34px;
}
.rb-filter-bar .rb-search-input:focus{
    outline:1.5px solid #FF7000;outline-offset:-1.5px;border-color:#FF7000;
}
.rb-filter-bar .rb-search-input::placeholder{color:#999}
.rb-filter-bar .rb-search-btn{
    flex:0 0 auto;background:#FF7000;color:#fff;border:0;border-radius:8px;
    padding:0 16px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
    font-family:inherit;height:34px;transition:.14s;
}
.rb-filter-bar .rb-search-btn:hover{background:#e56600}
/* 2026-09-30 : 버튼 글자를 '리셋'(2자) → '초기화'(3자) 로 바꾸면서
   폭이 모자라 글자가 끼어 보였다. 좌우 여백과 글자 크기를 검색 버튼과 맞춘다 */
.rb-filter-bar .rb-reset-btn{
    flex:0 0 auto;background:#fff;color:#666;border:1px solid #e0e0e5;border-radius:8px;
    padding:0 14px;font-size:12px;cursor:pointer;font-family:inherit;height:34px;transition:.14s;
    white-space:nowrap;
}
.rb-filter-bar .rb-reset-btn:hover{border-color:#FF7000;color:#FF7000}

/* ==================================================================
   액션 버튼 리뉴얼 (선택배송/금고이동/포인트전환 등)
   - 기존 노란 배경 스타일 → 필터바 톤과 통일된 오렌지 아웃라인 알약
   - 스코프: .rb-action-btns 안의 버튼만 (다른 페이지 영향 없음)
   ================================================================== */
.rb-action-btns{
    display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
    padding:8px 2px 4px;text-align:center !important;
}
/* 기존 노란 스타일 완전 오버라이드 */
.rb-action-btns .gazabox_sub_main_btn,
.rb-action-btns .gazabox_sub_main_btn_x{
    display:inline-flex;align-items:center;gap:2px;
    background:#fff;color:#FF7000;
    border:1.5px solid #FF7000;border-radius:20px;
    padding:6px 12px;font-size:11.5px;font-weight:700;
    cursor:pointer;transition:.16s;white-space:nowrap;
    width:auto !important;height:auto !important;line-height:1.2;
    letter-spacing:-.02em;
}
.rb-action-btns .gazabox_sub_main_btn:hover{
    background:#FF7000;color:#fff;
}
.rb-action-btns .gazabox_sub_main_btn::after{
    content:"›";font-size:14px;margin-left:2px;font-weight:600;
}
/* 비활성(배송불가) 스타일 */
.rb-action-btns .gazabox_sub_main_btn_x{
    background:#f4f4f7;color:#999;border-color:#e0e0e5;cursor:not-allowed;
}
.rb-action-btns .gazabox_sub_main_btn_x::after{
    content:"›";font-size:14px;margin-left:2px;opacity:.5;
}
/* 기존 이미지 화살표 숨김 (혹시 남아있는 경우) */
.rb-action-btns .gazabox_sub_main_btn img,
.rb-action-btns .gazabox_sub_main_btn_x img{display:none !important}

/* ==========================================================
   Views/UserOrder/CouponSendList.cshtml
   ========================================================== */
    .renewal-shipping {
        --rs-orange:      #F9781A;
        --rs-orange-deep: #E56610;
        --rs-orange-soft: #FFE8D6;
        --rs-orange-tint: #FFF5EC;
        --rs-cream:       #FFF8EE;
        --rs-line:        #EFE9DA;
        --rs-line-2:      #F5EFE3;
        --rs-ink:         #1F1815;
        --rs-ink-2:       #4A423B;
        --rs-ink-3:       #8A8278;
        background: var(--rs-cream);
        min-height: 100vh; padding: 12px 0 40px;
        font-family: 'Pretendard','Malgun Gothic',sans-serif;
    }
    .renewal-shipping * { box-sizing: border-box; }
    .renewal-shipping .rs-wrap { max-width: 520px; margin: 0 auto; padding: 0 12px; }

    /* 탭 (ShippingMain 과 동일) */
    .renewal-shipping .rs-tabs {
        display: flex; gap: 6px; padding: 4px;
        background: #fff; border: 1.5px solid var(--rs-line);
        border-radius: 99px; margin-bottom: 12px;
    }
    .renewal-shipping .rs-tab {
        flex: 1; text-align: center; padding: 8px 14px;
        font-size: 12.5px; font-weight: 700; color: var(--rs-ink-3);
        letter-spacing: -0.02em; text-decoration: none;
        border-radius: 99px; transition: all 0.15s;
    }
    .renewal-shipping .rs-tab.active {
        background: var(--rs-orange); color: #fff;
        box-shadow: 0 2px 6px rgba(249,120,26,.25);
    }
    .renewal-shipping .rs-tab:hover:not(.active) {
        background: var(--rs-orange-tint); color: var(--rs-orange-deep); text-decoration: none;
    }

    /* 카드 */
    .renewal-shipping .rs-list { display: flex; flex-direction: column; gap: 8px; }
    .renewal-shipping .rs-card {
        background: #fff; border: 1.5px solid var(--rs-line);
        border-radius: 14px; padding: 12px;
        display: grid; grid-template-columns: 76px 1fr; gap: 12px;
        transition: all 0.15s;
    }
    .renewal-shipping .rs-card:hover {
        border-color: var(--rs-orange-soft);
        box-shadow: 0 6px 16px rgba(249,120,26,.10);
    }
    .renewal-shipping .rs-thumb {
        width: 76px; height: 76px; border-radius: 10px;
        background: var(--rs-line-2); overflow: hidden;
        display: flex; align-items: center; justify-content: center;
    }
    .renewal-shipping .rs-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .renewal-shipping .rs-info { min-width: 0; display: flex; flex-direction: column; }
    .renewal-shipping .rs-name {
        font-size: 13.5px; font-weight: 700; color: var(--rs-ink);
        letter-spacing: -0.02em; line-height: 1.35; margin-bottom: 5px;
        overflow: hidden; text-overflow: ellipsis;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .renewal-shipping .rs-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
    .renewal-shipping .rs-meta .rs-mi { font-size: 11.5px; color: var(--rs-ink-3); letter-spacing: -0.02em; }
    .renewal-shipping .rs-meta .rs-mi b { color: var(--rs-ink); font-weight: 700; }
    .renewal-shipping .rs-meta .rs-mi.rs-phone b { color: var(--rs-orange-deep); }
    .renewal-shipping .rs-meta .rs-mi .rs-carrier {
        display: inline-block; padding: 1px 6px; border-radius: 4px;
        background: var(--rs-orange-tint); color: var(--rs-orange-deep);
        font-weight: 800; font-size: 10.5px; margin-right: 3px;
    }
    .renewal-shipping .rs-sendkey {
        display: inline-block; margin-top: 2px; padding: 2px 6px;
        background: var(--rs-line-2); border-radius: 4px;
        font-size: 10.5px; font-family: 'Consolas','Menlo',monospace;
        color: var(--rs-ink-2); letter-spacing: -0.01em;
        word-break: break-all;
    }
    .renewal-shipping .rs-foot {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        margin-top: auto; padding-top: 6px;
    }
    .renewal-shipping .rs-date { font-size: 11px; color: var(--rs-ink-3); letter-spacing: -0.02em; }
    .renewal-shipping .rs-status {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 4px 10px; border-radius: 99px;
        font-size: 11px; font-weight: 800; letter-spacing: -0.02em;
        background: #EEF7EE; color: #2E7D32; border: 1.5px solid #C7E4C9;
        white-space: nowrap;
    }

    .renewal-shipping .rs-empty {
        background: #fff; border: 2px dashed var(--rs-line);
        border-radius: 14px; padding: 44px 20px; text-align: center;
        color: var(--rs-ink-2);
    }
    .renewal-shipping .rs-empty .rs-empty-ic { font-size: 40px; margin-bottom: 6px; opacity: 0.5; }
    .renewal-shipping .rs-empty .rs-empty-t { font-size: 13.5px; font-weight: 800; color: var(--rs-ink); letter-spacing: -0.02em; margin-bottom: 3px; }
    .renewal-shipping .rs-empty .rs-empty-d { font-size: 11.5px; color: var(--rs-ink-3); letter-spacing: -0.02em; }

    .renewal-shipping .rs-paging { margin-top: 14px; }
    .renewal-shipping .rs-paging .block-27 ul { margin: 0; padding: 0; text-align: center; }

/* ==========================================================
   Views/UserOrder/Index.cshtml
   ========================================================== */
    /* ========== 마이페이지 리뉴얼 (scoped: .renewal-my) ========== */
    .renewal-my {
        max-width: 480px;
        margin: 0 auto;
        padding: 10px 10px 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* ---- 공통 섹션 카드 ---- */
    .renewal-my .rm-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    /* ---- 1. 상단 요약 (프로필 + 포인트 + 회원정보) ---- */
    .renewal-my .rm-top {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        min-height: 68px;
    }
    .renewal-my .rm-top .t-profile {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        text-decoration: none;
        color: #1F1815;
    }
    .renewal-my .rm-top .t-profile:hover { color: #1F1815; text-decoration: none; }
    .renewal-my .rm-top .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FFE8D6, #F9781A);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(249,120,26,0.25);
    }
    .renewal-my .rm-top .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .renewal-my .rm-top .u-name {
        font-size: 13px;
        font-weight: 700;
        color: #1F1815;
        letter-spacing: -0.02em;
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .renewal-my .rm-top .u-grade {
        font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
        font-size: 9px;
        color: #F9781A;
        letter-spacing: 0.04em;
        font-weight: 700;
        margin-top: 1px;
        white-space: nowrap;
    }
    /* 중: 포인트 */
    .renewal-my .rm-top .t-point {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        padding: 6px 8px;
        border-left: 1px dashed #E8E2D6;
        border-right: 1px dashed #E8E2D6;
        text-align: right;
        min-width: 0;
    }
    .renewal-my .rm-top .p-lbl {
        font-size: 10px;
        color: #8A8278;
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .renewal-my .rm-top .p-value {
        font-size: 14px;
        font-weight: 800;
        color: #F9781A;
        letter-spacing: -0.02em;
        line-height: 1.1;
        white-space: nowrap;
        margin-top: 2px;
    }
    .renewal-my .rm-top .p-value .u { font-size: 10px; margin-left: 1px; opacity: 0.85; }
    .renewal-my .rm-top .p-swap {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        background: #F9781A;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 10px;
        text-decoration: none;
        margin-top: 3px;
        line-height: 1;
    }
    .renewal-my .rm-top .p-swap:hover { background: #E56610; color: #fff; text-decoration: none; }
    /* 우: 회원정보 */
    .renewal-my .rm-top .t-member {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        cursor: pointer;
        padding: 4px 2px;
        text-decoration: none;
        color: #1F1815;
    }
    .renewal-my .rm-top .t-member:hover { color: #F9781A; text-decoration: none; }
    .renewal-my .rm-top .t-member .m-ico {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFF5EC;
        color: #F9781A;
        border-radius: 50%;
        font-size: 15px;
        border: 1px solid #FFCBA0;
    }
    .renewal-my .rm-top .t-member .m-lbl { font-size: 9.5px; color: #4A423B; font-weight: 600; }

    /* =====================================================
       v2 새 스타일: Featured hero + Compact cluster + List
       ===================================================== */

    /* ---- Featured 2 hero cards (컴팩트 - icon 좌 · 텍스트 우) ---- */
    .renewal-my .rm-heros {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .renewal-my .rm-hero {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        padding: 12px 12px 12px 14px;
        text-decoration: none;
        display: flex;
        flex-direction: row;      /* 가로 배치 */
        align-items: center;
        gap: 10px;
        min-height: 62px;         /* 110px → 62px (약 절반) */
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .renewal-my .rm-hero:hover { transform: translateY(-2px); text-decoration: none; }
    .renewal-my .rm-hero:active { transform: translateY(0); }
    /* 첫번째 hero (박스보관함) - 오렌지 톤 */
    .renewal-my .rm-hero.h-store {
        background: linear-gradient(140deg, #FF8547 0%, #F9781A 100%);
        color: #fff;
        box-shadow: 0 6px 16px rgba(249,120,26,0.28);
    }
    /* 두번째 hero (이벤트) - 앤티크 골드 톤 (이벤트=혜택=골드 연상) */
    .renewal-my .rm-hero.h-event {
        background: linear-gradient(140deg, #F5E0A8 0%, #C89A3D 100%);
        color: #fff;
        box-shadow: 0 6px 16px rgba(200,154,61,0.32);
    }
    .renewal-my .rm-hero .h-ic {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }
    /* Chunky filled PNG 아이콘 (하단 네비와 동일 톤) */
    .renewal-my .rm-hero .h-ic img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
    }
    /* 기존 SVG 아이콘 사용 시 폴백 (필요 시) */
    .renewal-my .rm-hero .h-ic svg {
        width: 32px;
        height: 32px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .renewal-my .rm-hero .h-txt {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
        flex: 1;
    }
    .renewal-my .rm-hero.h-store .h-ic svg { color: #fff; opacity: 0.95; }
    .renewal-my .rm-hero.h-event .h-ic svg { color: #fff; opacity: 0.95; }
    .renewal-my .rm-hero .h-title {
        font-size: 14px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }
    .renewal-my .rm-hero .h-sub {
        font-size: 10.5px;
        opacity: 0.85;
        letter-spacing: -0.02em;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .renewal-my .rm-hero.h-store .h-sub { color: rgba(255,255,255,0.9); }
    .renewal-my .rm-hero.h-event .h-sub { color: rgba(255,255,255,0.92); }
    /* 데코 오브젝트 (컴팩트 카드는 데코 숨김 - 좁으니까) */
    .renewal-my .rm-hero .h-deco {
        display: none;
    }
    .renewal-my .rm-hero.h-store .h-deco { color: #fff; }
    .renewal-my .rm-hero.h-event .h-deco { color: #fff; opacity: 0.16; }
    .renewal-my .rm-hero .h-deco svg {
        width: 100%;
        height: 100%;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.5;
    }

    /* ---- 통합 컴팩트 그리드 3x2 (모든 서브 메뉴 - 네모 카드 스타일) ---- */
    .renewal-my .rm-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .renewal-my .rm-grid .g-btn {
        background: #fff;
        border-radius: 12px;
        padding: 12px 6px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: #1F1815;
        box-shadow: 0 1.5px 5px rgba(93,78,61,0.05);
        transition: all 0.15s;
        border: 1.5px solid transparent;
    }
    .renewal-my .rm-grid .g-btn:hover {
        background: #FFF8EE;
        border-color: #FFCBA0;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(249,120,26,0.1);
        text-decoration: none;
        color: #1F1815;
    }
    .renewal-my .rm-grid .g-btn:active { transform: translateY(0); }
    .renewal-my .rm-grid .g-ic {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    /* 각 아이템 다른 warm-tint 배경 (오렌지·크림·골드 계열 통일) */
    .renewal-my .rm-grid .g-ship    .g-ic { background: linear-gradient(135deg, #FFF5EC, #FFE0B8); color: #E56610; }
    .renewal-my .rm-grid .g-recent  .g-ic { background: linear-gradient(135deg, #FFF8EE, #FFEDD5); color: #E85D00; }
    .renewal-my .rm-grid .g-grade   .g-ic { background: linear-gradient(135deg, #FDF4DC, #F5E0A8); color: #A97F28; }
    .renewal-my .rm-grid .g-inquiry .g-ic { background: linear-gradient(135deg, #FFF5EC, #FFE8D6); color: #E56610; }
    .renewal-my .rm-grid .g-friend  .g-ic { background: linear-gradient(135deg, #FFEDD5, #FFCBA0); color: #C55C15; }
    .renewal-my .rm-grid .g-coupon  .g-ic { background: linear-gradient(135deg, #FDF4DC, #F5E0A8); color: #A97F28; }
    /* v3(2026-09-14): 친구초대 - 오렌지-핑크 강조 (7번째 아이템, 전체 폭) */
    .renewal-my .rm-grid .g-referral { grid-column: 1 / -1; flex-direction: row; padding: 12px; gap: 12px; background: linear-gradient(135deg, #FFF5EC, #FFE0B8); border-color: #FFCBA0; }
    .renewal-my .rm-grid .g-referral .g-ic { background: linear-gradient(135deg, #FF8F2B, #E56610); color: #fff; width: 44px; height: 44px; border-radius: 12px; }
    .renewal-my .rm-grid .g-referral .g-ic svg { width: 26px; height: 26px; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.2)); }
    .renewal-my .rm-grid .g-referral .g-lbl { font-size: 14px; font-weight: 800; color: #E56610; flex: 1; text-align: left; }
    .renewal-my .rm-grid .g-referral::after { content: "친구 초대하고 +2,000P ›"; font-size: 11px; color: #B8541A; font-weight: 700; margin-right: 4px; }
    /* Chunky filled 스타일 - stroke → fill 로 전환 + 드롭섀도우 */
    .renewal-my .rm-grid .g-ic svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
        stroke: none;
        filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.12));
    }
    .renewal-my .rm-grid .g-lbl {
        font-size: 11px;
        color: #4A423B;
        font-weight: 700;
        letter-spacing: -0.03em;
    }

    /* 1:1문의 미확인 답변 배지 */
    .renewal-my .rm-grid .g-btn .g-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #E11D48;
        color: #fff;
        border-radius: 8px;
        font-size: 9.5px;
        font-weight: 800;
        line-height: 16px;
        text-align: center;
        border: 1.5px solid #fff;
        box-shadow: 0 1px 3px rgba(225,29,72,0.35);
        letter-spacing: -0.02em;
    }

/* ==========================================================
   Views/UserOrder/ShippingMain.cshtml
   ========================================================== */
    .renewal-shipping {
        --rs-orange:      #F9781A;
        --rs-orange-deep: #E56610;
        --rs-orange-soft: #FFE8D6;
        --rs-orange-tint: #FFF5EC;
        --rs-cream:       #FFF8EE;
        --rs-line:        #EFE9DA;
        --rs-line-2:      #F5EFE3;
        --rs-ink:         #1F1815;
        --rs-ink-2:       #4A423B;
        --rs-ink-3:       #8A8278;
        background: var(--rs-cream);
        min-height: 100vh;
        padding: 12px 0 40px;
        font-family: 'Pretendard','Malgun Gothic',sans-serif;
    }
    .renewal-shipping * { box-sizing: border-box; }
    .renewal-shipping .rs-wrap { max-width: 520px; margin: 0 auto; padding: 0 12px; }

    /* 탭 (pill 형태) */
    .renewal-shipping .rs-tabs {
        display: flex; gap: 6px; padding: 4px;
        background: #fff; border: 1.5px solid var(--rs-line);
        border-radius: 99px; margin-bottom: 12px;
    }
    .renewal-shipping .rs-tab {
        flex: 1; text-align: center; padding: 8px 14px;
        font-size: 12.5px; font-weight: 700; color: var(--rs-ink-3);
        letter-spacing: -0.02em; text-decoration: none;
        border-radius: 99px; transition: all 0.15s;
    }
    .renewal-shipping .rs-tab.active {
        background: var(--rs-orange); color: #fff;
        box-shadow: 0 2px 6px rgba(249,120,26,.25);
    }
    .renewal-shipping .rs-tab:hover:not(.active) {
        background: var(--rs-orange-tint); color: var(--rs-orange-deep); text-decoration: none;
    }

    /* 리스트 */
    .renewal-shipping .rs-list { display: flex; flex-direction: column; gap: 8px; }

    .renewal-shipping .rs-card {
        background: #fff; border: 1.5px solid var(--rs-line);
        border-radius: 14px; padding: 12px; cursor: pointer;
        display: grid; grid-template-columns: 76px 1fr; gap: 12px;
        transition: all 0.15s;
    }
    .renewal-shipping .rs-card:hover {
        border-color: var(--rs-orange-soft);
        box-shadow: 0 6px 16px rgba(249,120,26,.10);
        transform: translateY(-1px);
    }
    .renewal-shipping .rs-thumb {
        width: 76px; height: 76px; border-radius: 10px;
        background: var(--rs-line-2); overflow: hidden;
        display: flex; align-items: center; justify-content: center;
    }
    .renewal-shipping .rs-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .renewal-shipping .rs-info { min-width: 0; display: flex; flex-direction: column; }
    .renewal-shipping .rs-name {
        font-size: 13.5px; font-weight: 700; color: var(--rs-ink);
        letter-spacing: -0.02em; line-height: 1.35;
        overflow: hidden; text-overflow: ellipsis;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        margin-bottom: 5px;
    }
    .renewal-shipping .rs-name .rs-extra {
        display: inline-block; margin-left: 2px; font-size: 11px;
        color: var(--rs-orange-deep); font-weight: 800;
    }
    .renewal-shipping .rs-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
    .renewal-shipping .rs-meta .rs-mi {
        font-size: 11.5px; color: var(--rs-ink-3); letter-spacing: -0.02em;
    }
    .renewal-shipping .rs-meta .rs-mi b {
        color: var(--rs-ink); font-weight: 700;
    }
    .renewal-shipping .rs-meta .rs-mi.rs-ship b {
        color: var(--rs-orange-deep);
    }
    .renewal-shipping .rs-foot {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        margin-top: auto; padding-top: 4px;
    }
    .renewal-shipping .rs-date {
        font-size: 11px; color: var(--rs-ink-3); letter-spacing: -0.02em;
    }
    .renewal-shipping .rs-status {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 4px 10px; border-radius: 99px;
        font-size: 11px; font-weight: 800; letter-spacing: -0.02em;
        background: var(--rs-orange-tint); color: var(--rs-orange-deep);
        border: 1.5px solid var(--rs-orange-soft); white-space: nowrap;
    }
    .renewal-shipping .rs-status::after { content: "›"; margin-left: 2px; font-size: 13px; }
    .renewal-shipping .rs-status.s-ready { background: #FFF8EE; color: #8B6914; border-color: #F0E4C7; }
    .renewal-shipping .rs-status.s-going { background: var(--rs-orange-tint); color: var(--rs-orange-deep); border-color: var(--rs-orange-soft); }
    .renewal-shipping .rs-status.s-done  { background: #EEF7EE; color: #2E7D32; border-color: #C7E4C9; }
    .renewal-shipping .rs-status.s-cancel{ background: #F4F1EB; color: #8A8278; border-color: #E5DFD1; }

    /* 빈 상태 */
    .renewal-shipping .rs-empty {
        background: #fff; border: 2px dashed var(--rs-line);
        border-radius: 14px; padding: 44px 20px; text-align: center;
        color: var(--rs-ink-2);
    }
    .renewal-shipping .rs-empty .rs-empty-ic {
        font-size: 40px; margin-bottom: 6px; opacity: 0.5;
    }
    .renewal-shipping .rs-empty .rs-empty-t {
        font-size: 13.5px; font-weight: 800; color: var(--rs-ink);
        letter-spacing: -0.02em; margin-bottom: 3px;
    }
    .renewal-shipping .rs-empty .rs-empty-d {
        font-size: 11.5px; color: var(--rs-ink-3); letter-spacing: -0.02em;
    }

    /* 페이징 */
    .renewal-shipping .rs-paging { margin-top: 14px; }
    .renewal-shipping .rs-paging .block-27 ul { margin: 0; padding: 0; text-align: center; }

/* ==========================================================
   Views/UserOrder/ShippingMainDetail.cshtml
   ========================================================== */
    .renewal-shipping-detail {
        --rd-orange:      #F9781A;
        --rd-orange-deep: #E56610;
        --rd-orange-soft: #FFE8D6;
        --rd-orange-tint: #FFF5EC;
        --rd-cream:       #FFF8EE;
        --rd-line:        #EFE9DA;
        --rd-line-2:      #F5EFE3;
        --rd-ink:         #1F1815;
        --rd-ink-2:       #4A423B;
        --rd-ink-3:       #8A8278;
        --rd-blue:        #2F6FD0;
        --rd-red:         #C4692D;
        background: var(--rd-cream);
        min-height: 100vh; padding: 12px 0 60px;
        font-family: 'Pretendard','Malgun Gothic',sans-serif;
    }
    .renewal-shipping-detail * { box-sizing: border-box; }
    .renewal-shipping-detail .rd-wrap { max-width: 520px; margin: 0 auto; padding: 0 12px; }

    /* 섹션 카드 */
    .renewal-shipping-detail .rd-sec {
        background: #fff; border: 1.5px solid var(--rd-line);
        border-radius: 14px; padding: 14px 14px 12px; margin-bottom: 10px;
    }
    .renewal-shipping-detail .rd-sec-title {
        font-size: 13px; font-weight: 800; color: var(--rd-ink);
        letter-spacing: -0.02em; margin: 0 0 10px;
        display: flex; align-items: center; gap: 6px;
    }
    .renewal-shipping-detail .rd-sec-title .rd-sec-chip {
        display: inline-flex; align-items: center; padding: 3px 9px;
        background: var(--rd-orange-tint); color: var(--rd-orange-deep);
        border-radius: 99px; font-size: 10.5px; font-weight: 800;
        margin-left: auto;
    }

    /* 배송상태 큰 배너 */
    .renewal-shipping-detail .rd-status-hero {
        background: linear-gradient(135deg,#FFB055,#F9781A);
        color: #fff; border-radius: 14px; padding: 14px 16px;
        margin-bottom: 10px;
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .renewal-shipping-detail .rd-status-hero .rd-status-l small {
        display: block; opacity: 0.85; font-size: 11px; letter-spacing: -0.02em; margin-bottom: 3px;
    }
    .renewal-shipping-detail .rd-status-hero .rd-status-l b {
        font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
    }
    .renewal-shipping-detail .rd-status-hero .rd-status-r {
        text-align: right;
    }
    .renewal-shipping-detail .rd-status-hero .rd-status-r .rd-date {
        font-size: 11px; opacity: 0.9; letter-spacing: -0.02em;
    }
    .renewal-shipping-detail .rd-status-hero .rd-cancel-btn {
        display: inline-block; margin-top: 5px; padding: 5px 10px;
        background: rgba(255,255,255,0.92); color: var(--rd-orange-deep);
        border: none; border-radius: 99px;
        font-size: 11px; font-weight: 800; cursor: pointer;
        text-decoration: none;
    }
    .renewal-shipping-detail .rd-status-hero .rd-cancel-btn:hover { background: #fff; text-decoration: none; }

    /* 제품 카드 (리스트) */
    .renewal-shipping-detail .rd-prod {
        display: grid; grid-template-columns: 68px 1fr auto; gap: 10px;
        padding: 10px 0; border-top: 1px dashed var(--rd-line);
    }
    .renewal-shipping-detail .rd-prod:first-child { border-top: none; padding-top: 0; }
    .renewal-shipping-detail .rd-prod-thumb {
        width: 68px; height: 68px; border-radius: 10px;
        background: var(--rd-line-2); overflow: hidden;
        display: flex; align-items: center; justify-content: center;
    }
    .renewal-shipping-detail .rd-prod-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .renewal-shipping-detail .rd-prod-info { min-width: 0; }
    .renewal-shipping-detail .rd-prod-name {
        font-size: 12.5px; font-weight: 700; color: var(--rd-ink);
        letter-spacing: -0.02em; line-height: 1.4; margin-bottom: 4px;
        overflow: hidden; text-overflow: ellipsis;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .renewal-shipping-detail .rd-prod-price {
        font-size: 12px; color: var(--rd-orange-deep); font-weight: 800; letter-spacing: -0.01em;
    }
    .renewal-shipping-detail .rd-prod-qty {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 36px; height: 26px; padding: 0 8px;
        background: var(--rd-orange-tint); color: var(--rd-orange-deep);
        border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: -0.01em;
        align-self: flex-start;
    }

    /* 정보 리스트 (배송정보) */
    .renewal-shipping-detail .rd-list-row {
        display: grid; grid-template-columns: 78px 1fr; gap: 8px;
        padding: 7px 0; font-size: 12.5px; letter-spacing: -0.02em;
        border-top: 1px dashed var(--rd-line);
    }
    .renewal-shipping-detail .rd-list-row:first-child { border-top: none; padding-top: 0; }
    .renewal-shipping-detail .rd-list-row .rd-lbl { color: var(--rd-ink-3); font-weight: 600; }
    .renewal-shipping-detail .rd-list-row .rd-val { color: var(--rd-ink); font-weight: 700; word-break: break-all; }

    /* 결제금액 */
    .renewal-shipping-detail .rd-pay-row {
        display: flex; justify-content: space-between; align-items: baseline;
        padding: 6px 0; font-size: 12.5px; letter-spacing: -0.02em;
    }
    .renewal-shipping-detail .rd-pay-row .rd-pay-lbl { color: var(--rd-ink-3); font-weight: 600; }
    .renewal-shipping-detail .rd-pay-row .rd-pay-val { color: var(--rd-ink); font-weight: 800; }
    .renewal-shipping-detail .rd-pay-row.rd-pay-discount .rd-pay-val { color: var(--rd-red); }
    .renewal-shipping-detail .rd-pay-row.rd-pay-total {
        border-top: 1.5px solid var(--rd-line); margin-top: 6px; padding-top: 10px;
    }
    .renewal-shipping-detail .rd-pay-row.rd-pay-total .rd-pay-lbl {
        font-size: 13px; font-weight: 800; color: var(--rd-ink);
    }
    .renewal-shipping-detail .rd-pay-row.rd-pay-total .rd-pay-val {
        font-size: 16px; font-weight: 800; color: var(--rd-orange-deep);
    }
    .renewal-shipping-detail .rd-coupon-name {
        margin-top: -2px; margin-bottom: 4px; text-align: right;
        font-size: 10.5px; color: var(--rd-ink-3); letter-spacing: -0.02em;
    }

    /* 문의 채팅 */
    .renewal-shipping-detail .rd-chat-form { display: flex; gap: 6px; margin-bottom: 12px; }
    .renewal-shipping-detail .rd-chat-form input {
        flex: 1; min-width: 0; height: 40px;
        border: 1.5px solid var(--rd-line); background: var(--rd-cream);
        border-radius: 99px; padding: 0 14px; font-size: 13px; color: var(--rd-ink);
        font-family: inherit; transition: border-color 0.15s;
    }
    .renewal-shipping-detail .rd-chat-form input:focus {
        outline: none; border-color: var(--rd-orange); background: #fff;
        box-shadow: 0 0 0 3px rgba(249,120,26,.15);
    }
    .renewal-shipping-detail .rd-chat-form button {
        flex-shrink: 0; width: 40px; height: 40px; border: none;
        background: var(--rd-orange); color: #fff; border-radius: 50%;
        cursor: pointer; box-shadow: 0 2px 6px rgba(249,120,26,.28);
        transition: all 0.15s;
    }
    .renewal-shipping-detail .rd-chat-form button:hover { background: var(--rd-orange-deep); }
    .renewal-shipping-detail .rd-chat-list { display: flex; flex-direction: column; gap: 6px; }
    .renewal-shipping-detail .rd-chat-msg {
        max-width: 78%; padding: 8px 12px; border-radius: 12px;
        font-size: 12.5px; line-height: 1.45; letter-spacing: -0.02em;
        word-break: break-all;
    }
    .renewal-shipping-detail .rd-chat-msg.rd-chat-me {
        align-self: flex-end; background: var(--rd-orange); color: #fff;
        border-bottom-right-radius: 4px;
    }
    .renewal-shipping-detail .rd-chat-msg.rd-chat-admin {
        align-self: flex-start; background: #fff; color: var(--rd-ink);
        border: 1px solid var(--rd-line); border-bottom-left-radius: 4px;
    }
    .renewal-shipping-detail .rd-chat-empty {
        padding: 24px 12px; text-align: center; color: var(--rd-ink-3);
        font-size: 12px; letter-spacing: -0.02em;
    }

    /* 빈 페이지 */
    .renewal-shipping-detail .rd-page-empty {
        background: #fff; border: 2px dashed var(--rd-line);
        border-radius: 14px; padding: 60px 20px; text-align: center;
        color: var(--rd-ink-2);
    }
    .renewal-shipping-detail .rd-page-empty .rd-ic { font-size: 44px; margin-bottom: 8px; opacity: 0.5; }
    .renewal-shipping-detail .rd-page-empty .rd-t { font-size: 14px; font-weight: 800; color: var(--rd-ink); margin-bottom: 4px; letter-spacing: -0.02em; }
    .renewal-shipping-detail .rd-page-empty .rd-d { font-size: 12px; color: var(--rd-ink-3); letter-spacing: -0.02em; }
    .renewal-shipping-detail .rd-page-empty .rd-back {
        display: inline-block; margin-top: 14px; padding: 8px 18px;
        background: var(--rd-orange); color: #fff; border-radius: 99px;
        font-size: 12px; font-weight: 800; text-decoration: none; letter-spacing: -0.02em;
    }

/* ==========================================================
   Views/UserOrder/UserFriends.cshtml
   ========================================================== */
    .renewal-friends {
        --rf-orange:      #F9781A;
        --rf-orange-deep: #E56610;
        --rf-orange-soft: #FFE8D6;
        --rf-orange-tint: #FFF5EC;
        --rf-cream:       #FFF8EE;
        --rf-cream-2:     #FEFAF3;
        --rf-line:        #EFE9DA;
        --rf-line-2:      #F5EFE3;
        --rf-ink:         #1F1815;
        --rf-ink-2:       #4A423B;
        --rf-ink-3:       #8A8278;

        background: var(--rf-cream);
        min-height: 100vh;
        padding: 12px 0 40px;
        font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
    }
    .renewal-friends * { box-sizing: border-box; }
    .renewal-friends .rf-wrap {
        max-width: 520px;
        margin: 0 auto;
        padding: 0 12px;
    }

    /* ---- 액션 바: 한 줄에 [검색 input] [+친구추가] [요청목록] ---- */
    .renewal-friends .rf-action-bar {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 6px;
        align-items: center;
        margin-bottom: 12px;
    }
    .renewal-friends .rf-search-box {
        position: relative;
        min-width: 0;
    }
    .renewal-friends .rf-search-box input {
        width: 100%;
        border: 1.5px solid var(--rf-line);
        background: #fff;
        border-radius: 99px;
        /* 좌: input padding, 우: X + 검색버튼 공간 */
        padding: 10px 44px 10px 16px;
        font-size: 13px;
        color: var(--rf-ink);
        font-family: inherit;
        transition: border-color 0.15s;
    }
    .renewal-friends .rf-search-box input:focus {
        outline: none;
        border-color: var(--rf-orange);
        box-shadow: 0 0 0 3px var(--rf-orange-tint);
    }
    .renewal-friends .rf-search-box input::placeholder { color: var(--rf-ink-3); font-weight: 400; }
    /* input 안쪽 우측: X 초기화 (텍스트 있을 때만) */
    .renewal-friends .rf-search-box .rf-search-clear {
        position: absolute;
        right: 38px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: var(--rf-ink-3);
        font-size: 14px;
        cursor: pointer;
        border-radius: 50%;
        transition: background 0.15s;
    }
    .renewal-friends .rf-search-box .rf-search-clear:hover { background: var(--rf-line-2); color: var(--rf-ink); }
    /* input 안쪽 우측: 검색 버튼 (항상 표시, 오렌지 아이콘) */
    /* 검색 라인: [닉네임 입력 (flex:1)] [🔍 버튼] 한 줄 */
    .renewal-friends .rf-search-row {
        display: flex;
        gap: 6px;
        align-items: center;
        margin-bottom: 10px;
    }
    .renewal-friends .rf-search-row .rf-search-box {
        flex: 1;
        min-width: 0;
    }
    .renewal-friends .rf-search-row .rf-search-box input {
        padding: 10px 40px 10px 14px;  /* 오른쪽엔 X clear 공간만 */
    }
    .renewal-friends .rf-search-row .rf-search-submit {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--rf-orange);
        color: #fff;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 16px;
        box-shadow: 0 2px 6px rgba(249,120,26,.28);
        transition: all 0.15s;
    }
    .renewal-friends .rf-search-row .rf-search-submit:hover {
        background: var(--rf-orange-deep);
        transform: translateY(-1px);
    }
    /* X 초기화 버튼 위치 조정 (submit 이 외부로 나갔으니 X 는 오른쪽 끝) */
    .renewal-friends .rf-search-row .rf-search-clear {
        right: 10px;
    }

    .renewal-friends .rf-quick-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1.5px solid var(--rf-line);
        background: #fff;
        color: var(--rf-ink-2);
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        padding: 8px 12px;
        border-radius: 99px;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;
        transition: all 0.15s;
    }
    .renewal-friends .rf-quick-btn:hover {
        border-color: var(--rf-orange);
        color: var(--rf-orange);
        text-decoration: none;
    }
    .renewal-friends .rf-quick-btn.primary {
        background: var(--rf-orange);
        color: #fff;
        border-color: var(--rf-orange);
    }
    .renewal-friends .rf-quick-btn.primary:hover {
        background: var(--rf-orange-deep);
        border-color: var(--rf-orange-deep);
        color: #fff;
    }
    .renewal-friends .rf-quick-btn .rf-qb-ic { font-size: 14px; line-height: 1; }
    .renewal-friends .rf-quick-btn .rf-qb-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 5px;
        background: #E11D48;
        color: #fff;
        font-size: 9.5px;
        font-weight: 700;
        border-radius: 8px;
    }

    /* ---- 친구 리스트 ---- */
    .renewal-friends .rf-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .renewal-friends .rf-card {
        background: #fff;
        border: 1.5px solid var(--rf-line);
        border-radius: 14px;
        padding: 12px 14px;
        display: grid;
        grid-template-columns: 42px 1fr auto;
        gap: 10px;
        align-items: center;
        transition: all 0.15s;
    }
    .renewal-friends .rf-card:hover {
        border-color: var(--rf-orange-soft);
        box-shadow: 0 4px 12px rgba(249,120,26,0.08);
        transform: translateY(-1px);
    }
    .renewal-friends .rf-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--rf-orange-soft), var(--rf-orange));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 800;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        box-shadow: 0 2px 6px rgba(249,120,26,0.25);
    }
    .renewal-friends .rf-info { min-width: 0; }
    .renewal-friends .rf-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--rf-ink);
        letter-spacing: -0.02em;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .renewal-friends .rf-date {
        font-size: 11px;
        color: var(--rf-ink-3);
        font-weight: 500;
    }
    .renewal-friends .rf-gift-btn {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        border: 1.5px solid var(--rf-orange);
        background: #fff;
        color: var(--rf-orange);
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        padding: 7px 14px;
        border-radius: 99px;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s;
        white-space: nowrap;
    }
    .renewal-friends .rf-gift-btn:hover {
        background: var(--rf-orange);
        color: #fff;
        text-decoration: none;
    }

    /* ---- 빈 상태 ---- */
    .renewal-friends .rf-empty {
        text-align: center;
        padding: 60px 20px 40px;
        color: var(--rf-ink-3);
    }
    .renewal-friends .rf-empty .rf-empty-ic {
        font-size: 40px;
        margin-bottom: 8px;
        opacity: 0.5;
    }
    .renewal-friends .rf-empty .rf-empty-txt {
        font-size: 13px;
        color: var(--rf-ink-2);
        letter-spacing: -0.02em;
        margin-bottom: 4px;
    }
    .renewal-friends .rf-empty .rf-empty-hint {
        font-size: 11.5px;
        color: var(--rf-ink-3);
    }
    .renewal-friends .rf-empty-lock .rf-empty-ic { opacity: 0.4; }

    /* ---- 필터 chip (전체 / 숨긴 친구) ---- */
    .renewal-friends .rf-filter-row {
        display: flex; gap: 6px; margin: 6px 0 10px; align-items: center;
    }
    .renewal-friends .rf-filter-chip {
        display: inline-flex; align-items: center; gap: 4px;
        border: 1.5px solid var(--rf-line); background: #fff;
        color: var(--rf-ink-2);
        font-family: inherit; font-size: 12px; font-weight: 700;
        padding: 6px 12px; border-radius: 99px; cursor: pointer;
        text-decoration: none; transition: all 0.15s;
    }
    .renewal-friends .rf-filter-chip:hover {
        border-color: var(--rf-orange); color: var(--rf-orange); text-decoration: none;
    }
    .renewal-friends .rf-filter-chip.active {
        background: var(--rf-orange); color: #fff; border-color: var(--rf-orange);
        box-shadow: 0 2px 6px rgba(249,120,26,.25);
    }
    .renewal-friends .rf-filter-chip .rf-fc-cnt {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
        background: rgba(0,0,0,.08); border-radius: 9px;
        font-size: 10.5px; font-weight: 800;
    }
    .renewal-friends .rf-filter-chip.active .rf-fc-cnt {
        background: rgba(255,255,255,.28); color: #fff;
    }

    /* ---- 4열: 아바타 + 정보 + 선물 + 숨김 ---- */
    .renewal-friends .rf-card {
        grid-template-columns: 42px 1fr auto auto;
    }
    /* 2026-09-30 : 원형 아이콘 버튼(이모지) → [선물] 과 같은 알약 버튼.
       다만 선물이 주 액션이므로 숨김은 회색 계열로 낮춰 위계를 준다. */
    .renewal-friends .rf-hide-btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 52px; padding: 7px 13px; border-radius: 99px;
        background: #F7F4EF; border: 1.5px solid var(--rf-line);
        color: var(--rf-ink-3);
        font-family: inherit; font-size: 12px; font-weight: 700;
        letter-spacing: -.02em; line-height: 1; white-space: nowrap;
        cursor: pointer; transition: all 0.15s;
    }
    .renewal-friends .rf-hide-btn:hover {
        background: #EFEAE2; border-color: #DCD3C5; color: var(--rf-ink-2);
    }
    .renewal-friends .rf-hide-btn:active { transform: translateY(1px); }
    /* 숨긴 친구만 볼 때 = 되돌리는 [취소] 버튼. 되돌리기임을 알 수 있게 살짝 오렌지 기운만 */
    .renewal-friends .rf-hide-btn.on {
        background: #fff; border-color: var(--rf-orange-soft); color: var(--rf-orange-deep);
    }
    .renewal-friends .rf-hide-btn.on:hover {
        background: var(--rf-orange-tint); border-color: var(--rf-orange); color: var(--rf-orange-deep);
    }

    /* 빈 상태 아이콘을 선형 SVG 로 바꾸면서 크기 지정 (기존 font-size 40px 은 이모지용) */
    .renewal-friends .rf-empty .rf-empty-ic svg {
        width: 42px; height: 42px; color: var(--rf-ink-3);
    }

    /* 검색 버튼도 이모지 → SVG */
    .renewal-friends .rf-search-row .rf-search-submit svg {
        width: 19px; height: 19px;
    }

    /* 숨김 카드는 살짝 반투명 */
    .renewal-friends .rf-card.hidden-friend { opacity: 0.7; }

    /* ---- 친구추가 · 받은 요청 · 선물보내기 모달: v2(2026-09-17) 공통 목록 모달(gz-list) + css/renewal-modals.css 로 이동 ---- */

/* ==========================================================
   Views/UserOrder/UserInfo.cshtml
   ========================================================== */
    .renewal-userinfo {
        --ru-orange: #F9781A;
        --ru-orange-deep: #E56610;
        --ru-orange-tint: #FFF5EC;
        --ru-orange-soft: #FFE8D6;
        --ru-cream: #FFF8EE;
        --ru-line: #EFE9DA;
        --ru-line-2: #F5EFE3;
        --ru-ink: #1F1815;
        --ru-ink-2: #4A423B;
        --ru-ink-3: #8A8278;
        --ru-success: #2E7D32;
        --ru-danger: #B93865;

        background: var(--ru-cream);
        min-height: 100vh;
        padding: 16px 14px 40px;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
        color: var(--ru-ink);
    }
    .renewal-userinfo *, .renewal-userinfo *:before, .renewal-userinfo *:after { box-sizing: border-box; }
    .renewal-userinfo a { text-decoration: none; color: inherit; }

    /* ═══ 프로필 카드 ═══ */
    .renewal-userinfo .ru-profile {
        display: flex; align-items: center; gap: 14px;
        background: #fff;
        border-radius: 14px;
        padding: 18px 18px;
        border: 1.5px solid var(--ru-orange-soft);
        box-shadow: 0 3px 10px rgba(249,120,26,.08);
        margin-bottom: 14px;
    }
    .renewal-userinfo .ru-profile-icon {
        width: 48px; height: 48px;
        display: flex; align-items: center; justify-content: center;
        background: var(--ru-orange-tint);
        border-radius: 12px;
        flex-shrink: 0;
    }
    .renewal-userinfo .ru-profile-icon img { width: 32px; height: 32px; object-fit: contain; }
    .renewal-userinfo .ru-profile-emoji { font-size: 26px; line-height: 1; }
    .renewal-userinfo .ru-profile-body { flex: 1; min-width: 0; }
    .renewal-userinfo .ru-profile-label {
        font-size: 10.5px; font-weight: 800; color: var(--ru-orange-deep);
        letter-spacing: .1em;
    }
    .renewal-userinfo .ru-profile-name {
        font-size: 17px; font-weight: 900; color: var(--ru-ink);
        letter-spacing: -.02em; margin-top: 2px;
    }

    /* ═══ 메뉴 리스트 ═══ */
    .renewal-userinfo .ru-menu {
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 14px;
        box-shadow: 0 3px 10px rgba(0,0,0,.04);
    }
    .renewal-userinfo .ru-item {
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 14px;
        border-bottom: 1px solid var(--ru-line-2);
        color: var(--ru-ink);
        font-size: 14px; font-weight: 600;
        letter-spacing: -.02em;
        transition: background .15s;
    }
    .renewal-userinfo .ru-item:last-child { border-bottom: none; }
    .renewal-userinfo .ru-item:active { background: var(--ru-orange-tint); }
    .renewal-userinfo .ru-item-txt { flex: 1; }
    .renewal-userinfo .ru-item-arr {
        color: var(--ru-ink-3); font-size: 18px; line-height: 1;
        margin-left: 8px;
    }
    .renewal-userinfo .ru-item-right {
        display: inline-flex; align-items: center; gap: 6px;
    }
    .renewal-userinfo .ru-item-danger .ru-item-txt { color: var(--ru-danger); }

    .renewal-userinfo .ru-badge {
        display: inline-flex; align-items: center;
        padding: 4px 10px; border-radius: 99px;
        font-size: 10.5px; font-weight: 800;
        letter-spacing: -.02em;
    }
    .renewal-userinfo .ru-badge-primary { background: var(--ru-orange); color: #fff; }
    .renewal-userinfo .ru-badge-success { background: #E7F5EA; color: var(--ru-success); border: 1px solid #C7E4C9; }
    .renewal-userinfo .ru-badge-dark    { background: #F0EDE8; color: var(--ru-ink-2); }

    /* ═══ 알림 · 수신동의 ═══ */
    .renewal-userinfo .ru-agree {
        background: #fff;
        border-radius: 14px;
        padding: 3px 14px;
        box-shadow: 0 3px 10px rgba(0,0,0,.04);
    }
    .renewal-userinfo .ru-agree-item {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--ru-line-2);
    }
    .renewal-userinfo .ru-agree-item:last-child { border-bottom: none; }
    .renewal-userinfo .ru-agree-body { flex: 1; min-width: 0; padding-top: 2px; }
    .renewal-userinfo .ru-agree-title {
        font-size: 13.5px; font-weight: 700; color: var(--ru-ink);
        letter-spacing: -.02em;
    }
    .renewal-userinfo .ru-agree-desc {
        font-size: 11px; color: var(--ru-ink-3);
        margin-top: 4px; line-height: 1.4;
        letter-spacing: -.02em;
    }

    /* ═══ 토글 스위치 ═══ */
    .renewal-userinfo .ru-switch {
        position: relative;
        display: inline-block;
        width: 44px; height: 24px;
        flex-shrink: 0;
    }
    .renewal-userinfo .ru-switch input { opacity: 0; width: 0; height: 0; }
    .renewal-userinfo .ru-switch-slider {
        position: absolute; cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #E5DFD3;
        transition: .25s;
        border-radius: 24px;
    }
    .renewal-userinfo .ru-switch-slider:before {
        position: absolute;
        content: "";
        height: 18px; width: 18px;
        left: 3px; bottom: 3px;
        background-color: white;
        transition: .25s;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .renewal-userinfo .ru-switch input:checked + .ru-switch-slider {
        background: linear-gradient(135deg, #FFB055, var(--ru-orange-deep));
    }
    .renewal-userinfo .ru-switch input:checked + .ru-switch-slider:before {
        transform: translateX(20px);
    }

/* ==========================================================
   공용 리뉴얼 페이저 (.gz-pager)                2026-09-29
   ----------------------------------------------------------
   paging.js 가 뱉는 <li><a>…</a></li> 를 그대로 받아
   게시판(.rb-pager)·상품리뷰(.rv-pager) 와 같은 모양으로 그린다.
   옛 부트스트랩 템플릿 클래스(.block-27)를 대신하는 자리.
   새 페이지는 <div class="gz-pager"><ul id="pageing"></ul></div> 만 쓰면 된다.
   ========================================================== */
    .gz-pager {
        --gzp-orange: #F9781A;
        --gzp-orange-deep: #E56610;
        --gzp-orange-tint: #FFF5EC;
        --gzp-line: #EFE9DA;
        --gzp-ink-2: #4A423B;
        --gzp-ink-3: #8A8278;
        margin-top: 14px;
        display: flex;
        justify-content: center;
    }
    .gz-pager ul {
        list-style: none !important;
        margin: 0;
        padding: 4px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #fff;
        border: 1px solid var(--gzp-line);
        border-radius: 12px;
    }
    .gz-pager ul li {
        list-style: none !important;
        display: inline-flex;
        margin: 0;
        padding: 0;
    }
    .gz-pager ul li::before,
    .gz-pager ul li::marker {
        content: none !important;
        display: none !important;
    }
    .gz-pager ul li a,
    .gz-pager ul li span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 30px;
        padding: 0 8px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--gzp-ink-2);
        text-decoration: none;
        letter-spacing: -0.02em;
        transition: all 0.15s;
    }
    .gz-pager ul li a:hover {
        background: var(--gzp-orange-tint);
        color: var(--gzp-orange-deep);
        text-decoration: none;
    }
    .gz-pager ul li.active span {
        background: var(--gzp-orange);
        color: #fff;
    }
    /* paging.js 는 첫/끝 블록에서도 <a href="javascript:void(0);"> 를 그린다 → 눌러도 반응 없게 */
    .gz-pager ul li a[href="javascript:void(0);"] {
        color: var(--gzp-ink-3);
        opacity: .4;
        pointer-events: none;
    }
    /* 목록이 0건이면 paging.js 가 빈 문자열을 돌려준다 → 빈 박스가 남지 않게 */
    .gz-pager ul:empty { display: none; }

/* ==========================================================
   팝업 레이아웃 상단바 (.gz-popup-top)          2026-09-29
   ----------------------------------------------------------
   _Layout_Popup.cshtml 전용. 하단 탭바 없이 상단에 닫기(✕) 하나만 둔다.
   window.open / target="_blank" 로 뜬 창에서 유저가 다른 데로 새지 않게 하는 것이 목적.
   ========================================================== */
    .gz-popup-top {
        position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
        height: 52px;
        display: flex; align-items: center; gap: 6px;
        padding: 0 8px;
        background: linear-gradient(135deg, #FFB055, #E56610);
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }
    .gz-popup-top .gz-popup-title {
        flex: 1; min-width: 0;
        padding-left: 6px;
        color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.02em;
        text-shadow: 0 1px 2px rgba(0,0,0,.15);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .gz-popup-top .gz-popup-back,
    .gz-popup-top .gz-popup-close {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        border: none; border-radius: 50%;
        background: transparent; color: #fff;
        font-size: 20px; line-height: 1; cursor: pointer; text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s;
    }
    .gz-popup-top .gz-popup-back:hover,
    .gz-popup-top .gz-popup-close:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
    .gz-popup-top .gz-popup-back:active,
    .gz-popup-top .gz-popup-close:active { background: rgba(255,255,255,.25); }
    /* 포커스 링 제거 (부트스트랩 reboot 의 button:focus 가 검은 사각 테두리를 그린다) */
    .gz-popup-top .gz-popup-close:focus { outline: none; box-shadow: none; }
    .gz-popup-top .gz-popup-close::-moz-focus-inner { border: 0; }
    .gz-popup-top .gz-popup-close:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

    /* 고정 상단바 높이만큼 본문을 내린다 */
    body.layout-popup { padding-top: 52px; }
    /* 하단 탭바가 없으므로 그 자리만큼 비워 둘 필요도 없다 */
    body.layout-popup .footer_bottom_height,
    body.layout-popup .mobile_footer_menu_container { display: none !important; }

/* 마이페이지 - 히어로 1칸(전체폭) 2026-09-29
   이벤트 카드를 햄버거로 옮기면서 '나의 보관함'만 남아 전체폭으로 키운다 */
.renewal-my .rm-heros.rm-heros-1 { grid-template-columns: 1fr; }

/* ══════════════════════════════════════════════════════════
   마이페이지 2열 가로형 카드 (2026-09-29 확정 구조)
   - 3열 세로 배치 → 2열 가로 배치로 전환
   - 아이콘 왼쪽 / 라벨 오른쪽, 카드를 크게 키워 터치 영역 확보
   ══════════════════════════════════════════════════════════ */
.renewal-my .rm-grid.rm-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}
.renewal-my .rm-grid.rm-grid-2 .g-btn {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 17px 13px;
    border-radius: 15px;
}
.renewal-my .rm-grid.rm-grid-2 .g-ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: 0 0 42px;
}
.renewal-my .rm-grid.rm-grid-2 .g-ic svg { width: 23px; height: 23px; }
.renewal-my .rm-grid.rm-grid-2 .g-lbl {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.03em;
    text-align: left;
    line-height: 1.25;
}
.renewal-my .rm-grid.rm-grid-2 .g-badge { top: -3px; right: -3px; }

/* ══════════════════════════════════════════════════════════
   마이페이지 v2 — 리스트형 재구성 (2026-09-29 대표 시안)
   프로필 카드 / 친구초대 배너 / 섹션별 리스트
   ══════════════════════════════════════════════════════════ */
.renewal-my .rm-profile {
    background: #fff;
    border-radius: 16px;
    padding: 15px 14px 13px;
    box-shadow: 0 2px 10px rgba(93,78,61,.06);
    margin-bottom: 14px;
}
.renewal-my .rp-head { display: flex; align-items: center; gap: 13px; }
.renewal-my .rp-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
    background: linear-gradient(135deg, #FB8A2E, #E5590A);
    display: flex; align-items: center; justify-content: center;
}
.renewal-my .rp-avatar svg { width: 28px; height: 28px; fill: #fff; }
.renewal-my .rp-who { flex: 1; min-width: 0; }
.renewal-my .rp-nick {
    font-size: 17.5px; font-weight: 700; color: #1F1815;
    letter-spacing: -.04em; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.renewal-my .rp-id { font-size: 13px; color: #9A9089; font-weight: 500; margin-top: 2px; }
.renewal-my .rp-setting {
    display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
    background: #FFF3E9; border-radius: 22px; padding: 7px 12px;
    font-size: 13px; font-weight: 600; color: #C24C06; text-decoration: none;
}
.renewal-my .rp-setting:hover { background: #FFE7D3; color: #C24C06; text-decoration: none; }
.renewal-my .rp-setting svg { width: 16px; height: 16px; fill: #E5590A; }

.renewal-my .rp-line { height: 1px; background: #F1EBE4; margin: 12px 0 11px; }

.renewal-my .rp-point { display: flex; align-items: center; gap: 13px; }
.renewal-my .rp-coin {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
    background: linear-gradient(135deg, #FFF5EC, #FFE0B8);
    display: flex; align-items: center; justify-content: center;
}
.renewal-my .rp-coin svg { width: 22px; height: 22px; fill: #E56610; }
.renewal-my .rp-plabel { font-size: 13px; color: #8A8178; font-weight: 500; }
.renewal-my .rp-pvalue {
    font-size: 22px; font-weight: 700; color: #E5590A;
    letter-spacing: -.04em; line-height: 1.2; margin-top: 1px;
}
.renewal-my .rp-pvalue .u { font-size: 17px; }

/* ── 친구 초대 배너 ── */
.renewal-my .rm-invite {
    display: flex; align-items: center; gap: 13px;
    background: linear-gradient(135deg, #FFF0E0, #FFE1C4);
    border-radius: 14px; padding: 12px 13px;
    text-decoration: none; margin-bottom: 16px;
}
.renewal-my .rm-invite:hover { text-decoration: none; filter: brightness(1.02); }
.renewal-my .ri-ic {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center;
}
.renewal-my .ri-ic img { width: 100%; height: 100%; object-fit: contain; }
.renewal-my .ri-ic svg { width: 33px; height: 33px; fill: #E5590A; }
.renewal-my .ri-txt { flex: 1; min-width: 0; }
.renewal-my .ri-t1 { font-size: 14px; font-weight: 600; color: #7A5230; letter-spacing: -.03em; }
.renewal-my .ri-t2 {
    font-size: 20px; font-weight: 700; color: #E5590A;
    letter-spacing: -.04em; line-height: 1.25; margin-top: 1px;
}
.renewal-my .ri-ar { font-size: 25px; color: #E5590A; font-weight: 400; flex: 0 0 auto; }

/* ── 섹션 제목 ── */
.renewal-my .rm-sec {
    font-size: 15px; font-weight: 700; color: #2B2520;
    letter-spacing: -.03em; margin: 0 2px 7px;
}

/* ── 리스트 ── */
.renewal-my .rm-list {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(93,78,61,.06); margin-bottom: 15px;
}
.renewal-my .rl-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 13px; text-decoration: none; color: #1F1815;
}
.renewal-my .rl-item + .rl-item { border-top: 1px solid #F5F0EA; }
.renewal-my .rl-item:hover { background: #FFFAF5; text-decoration: none; color: #1F1815; }
.renewal-my .rl-ic {
    width: 35px; height: 35px; border-radius: 10px; flex: 0 0 35px;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.renewal-my .rl-ic svg { width: 20px; height: 20px; }
.renewal-my .i-coupon  .rl-ic { background: linear-gradient(135deg,#FFF5EC,#FFE0B8); }
.renewal-my .i-coupon  .rl-ic svg { fill: #E56610; }
.renewal-my .i-recent  .rl-ic { background: linear-gradient(135deg,#FFF2E6,#FFDCBA); }
.renewal-my .i-recent  .rl-ic svg { fill: #D9600F; color: #D9600F; }
.renewal-my .i-ship    .rl-ic { background: linear-gradient(135deg,#FFF5EC,#FFE0B8); }
.renewal-my .i-ship    .rl-ic svg { fill: #E56610; }
.renewal-my .i-friend  .rl-ic { background: linear-gradient(135deg,#FFF3E8,#FFDEBE); }
.renewal-my .i-friend  .rl-ic svg { fill: #DD6410; }
.renewal-my .i-inquiry .rl-ic { background: linear-gradient(135deg,#FFF1E2,#FFD9B2); }
.renewal-my .i-inquiry .rl-ic svg { fill: #E5590A; }
.renewal-my .rl-lbl { flex: 1; font-size: 14.5px; font-weight: 600; letter-spacing: -.03em; }
.renewal-my .rl-ar { font-size: 20px; color: #C6BCB1; font-weight: 400; flex: 0 0 auto; }
.renewal-my .rl-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 17px; padding: 1px 5px; border-radius: 9px;
    background: #E5590A; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}

/* ══════════════════════════════════════════════════════════
   계정설정 v2 — 섹션 분리 (2026-09-29)
   마이페이지와 같은 톤: 섹션 제목 + 흰 카드 리스트
   ══════════════════════════════════════════════════════════ */
.renewal-userinfo .ru-idbar {
    display: flex; align-items: baseline; gap: 9px;
    padding: 1px 4px 11px;
}
.renewal-userinfo .ru-idbar-lbl {
    font-size: 11px; font-weight: 700; color: #C9A98C; letter-spacing: .06em;
}
.renewal-userinfo .ru-idbar-name {
    font-size: 17px; font-weight: 700; color: #1F1815; letter-spacing: -.04em;
}
.renewal-userinfo .ru-sec {
    font-size: 15px; font-weight: 700; color: #2B2520;
    letter-spacing: -.03em; margin: 0 2px 7px;
}
.renewal-userinfo .ru-menu { margin-bottom: 14px; }
.renewal-userinfo .ru-agree { margin-bottom: 14px; }
.renewal-userinfo .ru-menu-out { margin-top: 4px; }
.renewal-userinfo .ru-item-right { display: flex; align-items: center; gap: 8px; }

/* 마이페이지 상단 — 대표 시안 반영 (2026-09-29)
   · 아바타를 오렌지 채움 → 연한 중립 톤으로 (닉네임/계정설정이 주인공)
   · 보유 포인트를 좌(라벨) 우(금액) 한 줄 배치, 코인 아이콘 제거 */
.renewal-my .rp-avatar { background: #F2EFEB; }
.renewal-my .rp-avatar svg { fill: #B7ADA3; }

.renewal-my .rp-point {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.renewal-my .rp-plabel { font-size: 13.5px; color: #8A8178; font-weight: 500; }
.renewal-my .rp-pvalue {
    font-size: 22px; font-weight: 700; color: #E5590A;
    letter-spacing: -.04em; line-height: 1.2; margin-top: 0;
    text-align: right;
}
.renewal-my .rp-pvalue .u { font-size: 17px; margin-left: 1px; }

/* ==========================================================
   ViewBag.BodyClass = "no-tabbar"              2026-09-29
   ----------------------------------------------------------
   자체 하단 고정바가 있어 하단 탭바를 깔면 두 겹이 되는 화면용.
   (럭키보드 뽑기 = .lb-multibar)
   상단 리뉴얼 네비는 그대로 쓰고 하단만 뺀다.
   ========================================================== */
    body.no-tabbar .mobile_footer_menu_container { display: none !important; }
    body.no-tabbar .footer_bottom_height { display: none !important; height: 0 !important; }

/* ==========================================================
   버튼 포커스 링 제거 (전역)                    2026-09-30
   ----------------------------------------------------------
   style.css(부트스트랩 reboot)의
       button:focus { outline: 5px auto -webkit-focus-ring-color; }
   때문에 버튼을 누를 때마다 검은 사각 테두리가 남는다.
   border 를 지워도 안 없어져서 페이지마다(메인 아코디언·친구초대 탭·
   럭키전환소 정렬칩 …) 같은 지적이 반복됐다. 여기서 한 번에 끊는다.

   · 마우스·터치로 누를 때 : 링 없음
   · 키보드(Tab)로 이동했을 때 : 브랜드 색 링 유지 (접근성)
     ※ :focus-visible 미지원 구형 웹뷰는 위 규칙만 적용돼 링이 안 생긴다
   · 개별 페이지에서 이미 같은 처리를 해둔 곳이 있어도 서로 부딪히지 않는다
   ========================================================== */
    button:focus,
    [role="button"]:focus,
    summary:focus { outline: none; }
    button::-moz-focus-inner { border: 0; }

    button:focus-visible,
    [role="button"]:focus-visible,
    summary:focus-visible {
        outline: 2px solid var(--gz-accent, #F9781A);
        outline-offset: -2px;
    }

    /* 모바일에서 탭하는 순간 생기는 회색 박스 */
    button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* ==========================================================
   페이징 — 래퍼와 무관하게 모양·위치를 하나로   2026-09-30
   ----------------------------------------------------------
   페이징 래퍼가 페이지마다 제각각(.gz-pager / .rb-pager / .rv-pager /
   .rp-paging / .rs-paging / .rb-paging / .block-27)이라
   같은 페이징인데도 어디는 왼쪽, 어디는 오른쪽, 어디는 숫자가 위로 뜨고
   현재 페이지가 주황으로 안 칠해지는 등 제각각이었다.

   래퍼에 기대지 않고 #pageing 자체가 모양을 전부 책임지게 한다.
   · width:fit-content + margin:auto  → 부모가 block 이든 flex 든 가운데
   · 칸마다 고정 높이 + align-items:center → 숫자가 위로 밀리지 않음
   · li.active 는 어디서든 주황
   ※ paging.js 가 <li><a> / <li class="active"><span> 를 뱉는 구조는 어느 페이지나 같다.
   ========================================================== */
    .gz-pager, .rb-pager, .rv-pager,
    .rp-paging, .rs-paging, .rb-paging, .block-27 {
        display: block;
        text-align: center;
    }

    ul#pageing {
        list-style: none !important;
        /* 내용 폭만 차지하게 한 뒤 좌우 auto 로 가운데.
           부모가 flex 여도 margin:auto 가 가운데로 밀어 준다 */
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto !important;
        padding: 4px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: #fff;
        border: 1px solid #EFE9DA;
        border-radius: 12px;
        float: none !important;
        text-align: center;
    }
    ul#pageing > li {
        list-style: none !important;
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 0;
        float: none !important;
    }
    ul#pageing > li::before,
    ul#pageing > li::marker {
        content: none !important;
        display: none !important;
    }
    /* 칸 크기는 custom.css 의 전역 #pageing 규칙(28px)과 맞춘다.
       현재 페이지(주황)·비활성 화살표 표시도 그쪽에서 전역으로 처리한다 */
    ul#pageing > li > a,
    ul#pageing > li > span {
        display: inline-flex;
        align-items: center;      /* 숫자 세로 가운데 */
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 0 7px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1;
        color: #4A423B;
        text-decoration: none;
        letter-spacing: -0.02em;
        transition: all 0.15s;
    }
    ul#pageing > li > a:hover {
        background: #FFF5EC;
        color: #E56610;
        text-decoration: none;
    }
    ul#pageing:empty { display: none !important; }

/* ==========================================================
   페이징 가운데 — 최종 확정                     2026-09-30
   ----------------------------------------------------------
   custom.css 의 `.buy_box_container #pageing` 규칙이
   (id1+class1) 로 이 파일의 `ul#pageing` (id1+type1) 보다 우선순위가 높아
   위치 지정이 계속 덮여 왔다. 같은 선택자 형태로 맞춰 확실히 이기게 한다.
   · 래퍼 : flex + center (래퍼가 무엇이든)
   · 목록 : 위치 관련 속성을 전부 초기화하고 width:fit-content + margin auto
     → 부모가 block 이든 flex 든, 예전 left:50%/transform 잔재가 있든 가운데로 온다
   ========================================================== */
    .gz-pager, .rb-pager, .rv-pager,
    .rp-paging, .rs-paging, .rb-paging, .block-27,
    .buy_box_container .gz-pager,
    .buy_box_container .block-27 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    ul#pageing,
    .block-27 ul#pageing,
    .buy_box_container ul#pageing,
    .buy_box_container .block-27 ul#pageing {
        position: static !important;
        top: auto !important; left: auto !important; right: auto !important;
        transform: none !important;
        float: none !important;
        margin: 0 auto !important;
        width: -moz-fit-content !important;
        width: fit-content !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

/* ==========================================================
   Views/UserOrder/UserFriendsRequestList.cshtml  2026-09-30
   친구요청관리 — 부트스트랩 row/col + btn-success/danger →
   다른 리뉴얼 화면과 같은 흰 카드 + 오렌지 액션 언어로 통일
   ========================================================== */
    .renewal-friendreq {
        --fr-o:#F9781A; --fr-od:#E56610;
        --fr-cream:#FFF8EE; --fr-apricot:#FFF0E4;
        --fr-line:#EFE9DA; --fr-line2:#F5F0EA;
        --fr-ink:#1F1815; --fr-ink2:#4A423B; --fr-ink3:#8A8278;
        background:var(--fr-cream);
        min-height:100vh;
        /* 2026-09-30 : 카드가 화면 끝까지 붙어 보여서 좌우 여백을 키움 */
        padding:16px 18px 40px;
        font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
        color:var(--fr-ink);
        letter-spacing:-.02em;
    }
    .renewal-friendreq *{box-sizing:border-box;}

    /* 헤더 */
    .renewal-friendreq .fr-head{
        display:flex; align-items:center; gap:7px;
        margin:2px 2px 10px;
    }
    .renewal-friendreq .fr-title{font-size:15px; font-weight:800; color:#2B2520;}
    .renewal-friendreq .fr-cnt{
        display:inline-flex; align-items:center; justify-content:center;
        min-width:20px; height:20px; padding:0 6px;
        border-radius:99px; background:var(--fr-o); color:#fff;
        font-size:11.5px; font-weight:800;
    }

    /* 목록 */
    .renewal-friendreq .fr-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
    .renewal-friendreq .fr-list > li{list-style:none; margin:0;}
    .renewal-friendreq .fr-list > li::before,
    .renewal-friendreq .fr-list > li::marker{content:none !important; display:none !important;}

    .renewal-friendreq .fr-item{
        display:flex; align-items:center; gap:11px;
        background:#fff; border-radius:14px;
        padding:12px 13px;
        box-shadow:0 2px 10px rgba(93,78,61,.06);
    }
    .renewal-friendreq .fr-avatar{
        flex:0 0 auto; width:42px; height:42px; border-radius:50%;
        background:var(--fr-apricot); color:var(--fr-od);
        display:flex; align-items:center; justify-content:center;
        font-size:17px; font-weight:800; line-height:1;
    }
    .renewal-friendreq .fr-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
    .renewal-friendreq .fr-name{
        font-size:14.5px; font-weight:700; color:var(--fr-ink);
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .renewal-friendreq .fr-sub{font-size:11.5px; color:var(--fr-ink3); font-weight:500;}

    /* 버튼 — 수락은 채움, 거절은 선 (위계 구분) */
    .renewal-friendreq .fr-acts{flex:0 0 auto; display:flex; gap:6px;}
    .renewal-friendreq .fr-btn{
        min-width:52px; height:32px; padding:0 13px;
        border-radius:9px; border:1.5px solid transparent;
        font-family:inherit; font-size:12.5px; font-weight:800;
        letter-spacing:-.02em; cursor:pointer; line-height:1;
        transition:all .15s;
    }
    .renewal-friendreq .fr-btn.is-accept{
        background:var(--fr-o); border-color:var(--fr-o); color:#fff;
        box-shadow:0 2px 6px rgba(249,120,26,.26);
    }
    .renewal-friendreq .fr-btn.is-accept:hover{background:var(--fr-od); border-color:var(--fr-od);}
    .renewal-friendreq .fr-btn.is-reject{
        background:#fff; border-color:var(--fr-line); color:var(--fr-ink3);
    }
    .renewal-friendreq .fr-btn.is-reject:hover{border-color:#DCD3C5; color:var(--fr-ink2);}
    .renewal-friendreq .fr-btn:active{transform:translateY(1px);}

    .renewal-friendreq .fr-guide{
        margin:12px 4px 0; font-size:11.5px; line-height:1.6;
        color:var(--fr-ink3); font-weight:500;
    }

    /* 빈 상태 */
    .renewal-friendreq .fr-empty{
        display:flex; flex-direction:column; align-items:center;
        background:#fff; border:2px dashed var(--fr-line);
        border-radius:16px; padding:42px 20px 30px; text-align:center;
        margin-top:6px;
    }
    .renewal-friendreq .fr-empty-ic{
        width:52px; height:52px; border-radius:50%;
        background:var(--fr-apricot); color:var(--fr-od);
        display:flex; align-items:center; justify-content:center;
        margin-bottom:12px;
    }
    .renewal-friendreq .fr-empty-ic svg{width:26px; height:26px;}
    .renewal-friendreq .fr-empty-t{font-size:14.5px; font-weight:800; color:var(--fr-ink);}
    .renewal-friendreq .fr-empty-d{font-size:12px; color:var(--fr-ink3); margin-top:4px;}
    .renewal-friendreq .fr-empty-btn{
        display:inline-block; margin-top:16px; padding:10px 22px;
        background:var(--fr-o); color:#fff; text-decoration:none;
        border-radius:99px; font-size:13px; font-weight:800;
        box-shadow:0 3px 10px rgba(249,120,26,.26);
    }
    .renewal-friendreq .fr-empty-btn:hover{background:var(--fr-od); color:#fff; text-decoration:none;}

/* ==========================================================
   친구관리 상단 조작부 한 줄로              2026-09-30
   [+ 친구추가] [요청목록] │ [친구 목록] [숨긴 친구만]
   기존 .rf-quick-row / .rf-filter-row 두 줄을 .rf-toolbar 하나로 합쳤다.
   375px 에서도 한 줄에 들어가도록 글자·여백을 조금 줄이고,
   그래도 넘치는 기기에서는 가로 스크롤로 흘린다(줄바꿈 금지).
   ========================================================== */
    .renewal-friends .rf-toolbar {
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 6px 0 10px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .renewal-friends .rf-toolbar::-webkit-scrollbar { display: none; }

    /* 동작 버튼 / 보기 전환 사이 구분선 */
    .renewal-friends .rf-toolbar .rf-tb-sep {
        flex: 0 0 auto;
        width: 1px; height: 16px;
        background: var(--rf-line);
        margin: 0 2px;
    }

    /* 한 줄에 4개가 들어가도록 살짝 압축 (두 줄일 때보다 여백만 줄인다) */
    .renewal-friends .rf-toolbar .rf-quick-btn,
    .renewal-friends .rf-toolbar .rf-filter-chip {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 11.5px;
        padding: 7px 11px;
    }
    .renewal-friends .rf-toolbar .rf-quick-btn .rf-qb-ic {
        font-size: 13px;
        margin-right: 1px;
    }

/* ==========================================================
   상단 네비 고정                                2026-09-30
   ----------------------------------------------------------
   하단 탭바(.mobile_footer_menu_container, fixed/z-index:1040)와 짝을 맞춰
   상단 오렌지 네비도 화면에 붙여 둔다. 스크롤해도 [← 제목]·알림·햄버거가 항상 보인다.

   · body.has-fixed-top 은 _Layout_Top partial 이 JS 로 붙인다
     → 그 partial 을 쓰지 않는 _Layout_Null / _Layout_Login / _Layout_Popup 은 영향 없음
   · 헤더 높이는 가변(로고·랭킹전 이미지)이라 JS 가 --header-h 에 실측값을 넣는다
   · z-index 는 하단 탭바(1040)보다 살짝 아래, 부트스트랩 모달(1050)보다 아래
   ========================================================== */
    /* !important 를 쓰는 이유 :
       custom1.css 가 이 파일보다 뒤에 로드되면서
       `.top_container { position: relative !important; }` 로 고정을 막고 있다.
       (옛 부트스트랩 템플릿의 스크롤 고정을 끄려고 넣었던 한 줄)
       선택자 강도는 이쪽이 높지만 !important 끼리 붙어야 이긴다. */
    body.has-fixed-top .top_container {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 1035;
    }
    /* 고정된 높이만큼 본문을 내린다 (JS 가 재기 전에도 깨지지 않게 62px 기본값) */
    body.has-fixed-top .main_container {
        padding-top: var(--header-h, 62px);
    }
    /* 넓은 화면에서도 하단 탭바와 같은 폭·같은 가운데 정렬
       (custom1.css 의 .mobile_footer_menu_container 규칙과 동일하게 맞춘다) */
    body.has-fixed-top .top_container {
        max-width: 550px;
        margin: 0 auto;
    }

/* ============================================================
   2026-10-01 : 상품 이미지 위 가자박스 워터마크 감춤
   ------------------------------------------------------------
   대상 클래스 3종 (전부 /images/water_mark.png · water_mark_2.png 를 얹는 <img>)
     .water-mark  → 상품상세 / 실시간뉴스·명예의전당 / 쿠폰함
     .rp-wm       → 상품리스트
     .rbp-wm      → 박스보관함 / 선물함

   마크업은 그대로 두고 CSS 로만 감춘다. 되살릴 때 이 블록만 지우면 된다.
   선언이 custom.css · news-hall.css · renewal-pages.css · storage-card.css 에
   흩어져 있어(로드 순서가 파일마다 다름) !important 로 한 번에 덮는다.
   ※ 기존 규칙 어디에도 display 선언이 없어 이 한 줄이면 충분하다.
   ============================================================ */
.water-mark,
.rp-wm,
.rbp-wm {
    display: none !important;
}