/* ===== 1-1_channel-select ===== */
.channel-hero {
    text-align: center;
    padding: 75px 0 0;
}

.channel-hero .logo-img {
    width: 150px;
    height: 40px;
    margin: 0 auto 40px;
}

.channel-hero .hero-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
    margin-bottom: 14px;
}

.channel-hero .hero-desc {
    font-size: 16px;
    color: #222;
    line-height: 1.5;
}

.channel-info {
    width: 100%;
    max-width: 420px;
    display: flex;
    gap: 15px;
    margin: 40px auto;
}

.channel-info .info-card {
    flex: 1;
    background: #F9F9F9;
    border-radius: 4px;
    padding: 24px 10px 20px;
    text-align: center;
}

.channel-info .info-card .card-icon {
    height: 35px;
    object-fit: contain;
    margin: 0 auto 15px;
}

.channel-info .info-card .card-icon img,
.channel-info .info-card .card-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.channel-info .info-card .card-label {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 1.6;
}

.channel-info .info-card .card-value {
    font-size: 16px;
    color: #222;
    line-height: 1.6;
}

.channel-info .info-card .card-value.red-color {
    color: #D91C1C;
}

.channel-info .info-card .card-contrast {
    font-size: 22px;
    color: #222;
    font-weight: 700;
}

.channel-buttons {
    padding: 60px 0;
}


/* ===== 1-3_signup ===== */
/* 스텝 아이콘 */
.step-num svg,
.step-num img {
    width: 24px;
    height: 24px;
    display: block;
}

.step-item.active .step-num svg {
    color: #fff;
}

.section-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}

.section-header .section-desc {
    font-size: 16px;
}

.form-input-wrap .icon-calendar {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.form-input-wrap .icon-calendar svg {
    width: 18px;
    height: 18px;
    stroke: #999;
    stroke-width: 1.5;
    fill: none;
}

/* 유효성 에러 */
.form-input.error {
    border-color: #d91c1c;
}

.form-error {
    font-size: 13px;
    color: #d91c1c;
    margin-top: 6px;
    display: none;
}

.form-error.show {
    display: block;
}

/* 약관 펼침 내용 */
.agree-content {
    display: none;
    background: #f9f9f9;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    padding: 16px;
    margin: 8px 0 4px 32px;
    font-size: 12px;
    color: #666;
    line-height: 1.7;
    max-height: 200px;
    overflow-y: auto;
}

.agree-content h2,
.agree-content h3,
.agree-content p,
.agree-content li,
.agree-content ul,
.agree-content ol,
.agree-content strong,
.agree-content a,
.agree-content td,
.agree-content th,
.agree-content div,
.agree-content .doc-intro {
    font-size: inherit !important;
}

.agree-content h2,
.agree-content h3 {
    margin: 6px 0 3px;
}

.agree-content .doc-section {
    margin-bottom: 6px;
}

.agree-content .doc-version {
    margin-top: 6px;
}

.agree-content.open {
    display: block;
}

.agree-item .btn-arrow {
    transition: transform 0.2s;
}

.agree-item .btn-arrow.open {
    transform: rotate(90deg);
}

/* info-box nowrap for values */
.info-box .info-text .value {
    white-space: nowrap;
}

/* 커스텀 달력 - 모던 콤팩트 */
.custom-calendar {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 70%;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 12px;
    z-index: 50;
}

.custom-calendar.open {
    display: block;
}

.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cal-title {
    font-size: 13px;
    font-weight: 700;
    color: #222;
}

.cal-prev, .cal-next {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}

.cal-prev:hover, .cal-next:hover {
    background: #f0f0f0;
}

.cal-prev svg, .cal-next svg {
    width: 5px;
    height: 9px;
    stroke: #555;
    stroke-width: 2;
    fill: none;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 2px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 4px;
}

.cal-weekdays span {
    font-size: 10px;
    font-weight: 600;
    color: #aaa;
    padding: 2px 0;
}

.cal-weekdays span:first-child {
    color: #d91c1c;
}

.cal-weekdays span:last-child {
    color: #4a7cc9;
}

.cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 1px;
}

.cal-day {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 400;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s;
    position: relative;
}

.cal-day:hover {
    background: #f5f5f5;
}

.cal-day.other {
    color: #d0d0d0;
    pointer-events: none;
}

.cal-day.today {
    font-weight: 700;
    color: #333;
    position: relative;
}

.cal-day.today::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #2e7d32;
}

.cal-day.selected {
    background: rgba(217, 28, 28, 0.1);
    color: #d91c1c;
    font-weight: 600;
    border: 1.5px solid #d91c1c;
    border-radius: 50%;
}

.cal-day.sun, .cal-day.holiday {
    color: #d91c1c;
}

.cal-day.sat {
    color: #4a7cc9;
}

.cal-day.sun.other, .cal-day.holiday.other {
    color: rgba(217, 28, 28, 0.25);
}

.cal-day.sat.other {
    color: rgba(74, 124, 201, 0.25);
}

.cal-day.selected.sun, .cal-day.selected.holiday {
    color: #d91c1c;
}

.cal-day.selected.sat {
    color: #4a7cc9;
}

/* 커스텀 달력 - Multi-range */
.slider-picker {
    position: absolute;
    top: 100%;
    right: 0;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: 320px;
}

.hidden {
    display: none;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
}

#apply-btn {
    padding: 4px 12px;
    background: #5CB92226;
    color: #5CB922;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 슬라이더 영역 */
.slider-container {
    position: relative;
    height: 10px;
    width: 100%;
}

/* 배경 바 */
.slider-track {
    position: absolute;
    height: 6px;
    width: 100%;
    background-color: #ddd;
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
}

/* 선택된 범위 바 */
.slider-range {
    position: absolute;
    height: 6px;
    background-color: #d7282f;
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* 커서(Thumb) 공통 스타일 */
.thumb {
    position: absolute;
    width: 100%;
    height: 10px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* 웹킷 브라우저(Chrome, Safari) 커서 */
.thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #d7282f;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 파이어폭스 커서 */
.thumb::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #d7282f;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 카카오 주소 팝업 */
.addr-layer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.addr-layer.open {
    display: flex;
}

.addr-layer-inner {
    background: #fff;
    border-radius: 12px;
    width: calc(100% - 40px);
    min-width: 300px;
    max-width: 480px;
    max-height: 80vh;
    overflow: hidden;
    position: relative;
}

.addr-layer-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    z-index: 10;
}

.addr-layer-close svg {
    width: 14px;
    height: 14px;
    stroke: #333;
    stroke-width: 2;
    fill: none;
}


/* ===== 1-4_login ===== */
.login-title {
    font-size: 30px;
    font-weight: 700;
    color: #222;
    text-align: center;
    padding: 88px 0 40px;
    line-height: 1.2;
}

.login-form {
    margin-bottom: 16px;
}

.login-form .form-input-wrap {
    position: relative;
    margin: 12px 0;
}

.login-form .form-input-wrap .btn-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.login-form .form-input-wrap .btn-eye svg,
.login-form .form-input-wrap .btn-eye img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.login-error {
    display: none;
    font-size: 12px;
    color: #E53935;
    margin: 4px 0 0;
    line-height: 1.4;
}

.login-error.show {
    display: block;
}

.login-checks {
    display: flex;
    gap: 24px;
    margin-bottom: 30px;
}

.login-checks .form-check .check-text {
    font-size: 14px;
}

/* 간편 로그인 묶음 — 아이디 로그인 구분선 위에 온다.
   .btn 에는 자체 여백이 없어서 버튼을 쌓으면 붙는다. 간격은 여기서 준다. */
.login-sns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

/* "아이디 로그인" 구분선 — 글자 양옆으로 선이 늘어난다.
   선 위에 글자를 얹는 방식(배경색으로 선을 가리는)은 배경이 흰색이 아닌 곳에서 티가 난다. */
.login-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #999;
}

.login-sep::before,
.login-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e2e2;
}

.login-buttons {
    margin-bottom: 20px;
}

.login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 24px;
}

.login-links a {
    font-size: 14px;
    color: #999;
}

.login-links .divider {
    width: 1px;
    height: 12px;
    background: #e6e6e6;
}

.login-signup {
    text-align: center;
    margin-bottom: 40px;
}

.login-signup span {
    font-size: 14px;
    color: #999;
}

.login-signup a {
    font-size: 14px;
    color: #222;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 8px;
}

.login-cs {
    margin-bottom: 30px;
}

.login-cs .btn-outline {
    gap: 8px;
    color: #999;
    font-weight: 400;
}

.login-cs .btn-outline svg,
.login-cs .btn-outline img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}


/* ===== 1-4_signup-complete ===== */
.complete-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 68px - 68px);
    padding: 0 30px;
    text-align: center;
}

.welcome-text {
    font-size: 50px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.welcome-text .welcome-icon {
    width: 182px;
    object-fit: contain;
}

.cscenter-icon {
    width: 115px;
    object-fit: contain;
}

.complete-title {
    font-size: 30px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
    margin-bottom: 16px;
}

.complete-desc {
    font-size: 16px;
    color: #222;
    line-height: 1.55;
    margin-bottom: 170px;
}

.complete-btn {
    width: 100%;
    max-width: 420px;
}

.cscenter-btn {
    width: 100%;
    max-width: 420px;
    margin-top: 60px;
}

.withdraw-after-login-btn {
    width: 100%;
    max-width: 420px;
    margin-top: 60px;
}


/* ===== 1-6_social-info ===== */
.kakao-desc {
    font-size: 16px;
    color: #222;
    line-height: 1.55;
    margin-bottom: 40px;
}

.form-input-wrap .icon-calendar {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-input-wrap .icon-calendar svg {
    width: 18px;
    height: 18px;
    stroke: #999;
    stroke-width: 1.5;
    fill: none;
}


/* ===== 1-7_mypage ===== */
.user-banner {
    background: rgba(183, 147, 105, 0.1);
    padding: 0 30px;
    height: 174px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-banner .user-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-banner .user-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #b79369;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-banner .user-avatar svg,
.user-banner .user-avatar img {
    width: 40px;
    height: 40px;
}

.user-banner .user-name {
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #222;
    line-height: 120%;
}

/* 사용자 배너 - 이름 아래 보유 포인트 (포인트 내역 진입) */
.user-banner .user-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-banner .user-point-link {
    font-size: 14px;
    color: #666;
    text-decoration: none;
}

.user-banner .user-point-link strong {
    color: #b79369;
    font-weight: 700;
}

.user-banner .btn-myinfo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 107px;
    height: 36px;
    padding: 0;
    background: #b79369;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 24px 0 16px;
    border-bottom: 1px solid #222;
    margin-bottom: 0;
}

.section-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    line-height: 1.1;
    margin-bottom: 0;
}

.section-header .btn-viewall {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #777;
    background: #EEEEEE;
    border-radius: 20px;
    padding: 8px 14px;
}

/* 마이페이지 쿠폰 카드 - 컴팩트 */
.mypage-coupon.coupon-list {
    padding: 20px 0 0;
}

.mypage-coupon .coupon-card {
    padding: 12px 16px;
    margin-bottom: 8px;
}

.mypage-coupon .coupon-badge {
    padding: 2px 8px;
    font-size: 12px;
    margin-bottom: 6px;
}

.mypage-coupon .coupon-name {
    font-size: 14px !important;
    margin-bottom: 2px !important;
}

.mypage-coupon .coupon-condition {
    font-size: 12px !important;
}

.mypage-coupon .coupon-expiry {
    font-size: 12px !important;
    padding-left: 14px !important;
    margin-left: 12px !important;
}

/* 행사 */
.event-item {
    padding: 16px 0;
    border-bottom: 1px solid #e6e6e6;
}

.event-item .content {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.event-item .badge {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.event-item .badge.wait {
    background-color: #F5A623CC;
}

.event-item .badge.live {
    background-color: #5CB922CC;
}

.event-item .badge.end {
    background-color: #999999CC;
}

.event-item .title {
    font-size: 22px;
    font-weight: 600;
}

/* 스탬프는 한 줄에 5개 (2026-09-28 요청). flex 로 두면 개수가 늘 때 원의 폭만 줄어들어 타원이 됐다 —
   높이는 60px 고정인데 폭은 flex-shrink 로 눌렸기 때문이다. 5칸 격자에 정사각(aspect-ratio)으로 두면
   칸 폭에 따라 원이 같이 줄고, 안의 체크 그림(width:100%)과 테두리가 항상 같은 원이 된다. 6개부터는 다음 줄. */
.event-item .check-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 60px));
    gap: 12px;
    padding-bottom: 10px;
}

.event-item .circle {
    position: relative;
    width: 100%;
    max-width: 60px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #999;
    border: 1px dashed #bbb;
    background: #F9F9F9;
}

.event-item .circle img {
    width: 100%;
}

.event-item .circle.checked {
    border: 2px solid #5CB922;
}

.event-item .circle .circle-num {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 11px;
    background: #5CB922;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* 구매내역 */
.purchase-wrap {
    margin-bottom: 100px;
}

.purchase-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #e6e6e6;
}

/* 주문 상태 — 전체보기 목록(.purchase-card .purchase-status)과 같은 크기·색으로 맞춘다 */
.purchase-item .purchase-info .purchase-status {
    font-size: 16px;
    margin-bottom: 4px;
}

.purchase-item .purchase-info .purchase-status .status {
    font-weight: 500;
    color: #222;
}

.purchase-item .purchase-info .purchase-name {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    line-height: 1.5;
}

.purchase-item .purchase-info .purchase-date {
    font-size: 16px;
    color: #999;
    line-height: 1.6;
}

.purchase-item .purchase-price {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    text-align: right;
    white-space: nowrap;
}

.item-empty {
    width: 100%;
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid #e6e6e6;
}

.item-empty .empty-info {
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    color: #BBBBBB;
}


/* ===== 2-2_password-confirm ===== */
.pw-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 130px;
}

.pw-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
}

.pw-title {
    font-size: 30px;
    font-weight: 700;
    color: #222;
    text-align: center;
    line-height: 1.2;
    padding: 45px 0 20px;
    margin-bottom: 0;
}

.pw-desc {
    font-size: 15px;
    color: #666;
    text-align: center;
    line-height: 1.55;
    margin-bottom: 40px;
}

.pw-form {
    width: 100%;
}

.pw-form .form-input-wrap {
    position: relative;
    margin-bottom: 16px;
}

.pw-form .form-input-wrap .btn-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.pw-form .form-input-wrap .btn-eye svg {
    width: 24px;
    height: 24px;
    stroke: #bbb;
    stroke-width: 1.5;
    fill: none;
}

.pw-forgot {
    text-align: center;
    margin-top: 90px;
}

.pw-forgot a {
    font-size: 14px;
    color: #999;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ===== 2-3_myinfo ===== */
.info-section {
    margin-bottom: 30px;
}

.info-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #222;
    margin-bottom: 0;
}

.info-section-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
}

.info-row {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row .form-input {
    height: 32px;
    margin-right: 10px;
}

.info-row .info-label {
    /* PC 에서 '나를 추천한 회원'·'내가 추천한 회원'(8자) 이 100px 에 두 줄로 꺾였다 — 한 줄에 들어가게 (2026-10-19 요청).
       모바일은 아래 미디어 쿼리에서 width:auto 로 따로 둔다 */
    width: 132px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 500;
    color: #222;
    line-height: 1.6;
}

.info-row .info-label .required {
    color: #d91c1c;
}

.info-row .info-value {
    flex: 1;
    font-size: 16px;
    color: #999;
    line-height: 1.6;
}

.info-row .info-value.dark {
    color: #222;
}

.info-section .btn-change {
    flex-shrink: 0;
    margin-left: auto;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #222;
}

.info-section .btn-change.confirm {
    border: 1px solid #222;
    background: #222;
    color: #fff;
}

.info-group {
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-group .form-label {
    font-size: 16px;
    font-weight: 500;
}

.info-group .btn-group {
    text-align: right;
}

/* 부가정보 라디오 인라인 */
.info-radio-inline {
    display: flex;
    gap: 8px;
}

.info-radio-inline .radio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 36px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    font-size: 16px;
    color: #bbb;
    cursor: pointer;
}

.info-radio-inline .radio-btn.active {
    border-color: #d91c1c;
    color: #d91c1c;
}

.info-date {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    flex: 1;
    min-width: 0;
}

.info-date .icon-calendar {
    width: 24px;
    height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-date .icon-calendar[style*="display: none"] {
    display: none;
}

.info-date .icon-calendar.visible {
    display: flex;
}

.info-date .icon-calendar img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.info-date .custom-calendar {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    width: 260px;
    min-width: 260px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 동의 정보 */
.agree-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.info-section .agree-item {
    padding: 10px 0;
}

.info-section .agree-item > .check-text {
    font-size: 16px;
    color: #222;
}

.agree-info-item .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.agree-info-item .btn-arrow svg {
    width: 8px;
    height: 14px;
    stroke: #999;
    stroke-width: 2;
    fill: none;
}

.agree-info-all {
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 10px;
}

.agree-sub-inline {
    display: flex;
    gap: 20px;
    padding: 6px 0 0 32px;
}

.withdraw-link {
    text-align: center;
    padding-bottom: 30px;
}

.withdraw-link a {
    font-size: 14px;
    color: #999;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ===== 2-4_kakao-reauth ===== */
.reauth-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 130px;
    text-align: center;
}

.reauth-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
}

.reauth-title {
    font-size: 30px;
    font-weight: 700;
    color: #222;
    text-align: center;
    line-height: 1.2;
    padding: 45px 0 20px;
    margin-bottom: 0;
}

.reauth-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.55;
    margin-bottom: 140px;
}

.reauth-btn {
    width: 100%;
    max-width: 420px;
}


/* ===== 2-5_withdraw-popup ===== */
/* 삭제 안내 */
.withdraw-info {
    margin-bottom: 50px;
}

.withdraw-info .info-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
    padding-bottom: 20px;
    border-bottom: 1px solid #222;
    margin-bottom: 20px;
}

.withdraw-info .delete-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.withdraw-info .delete-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.withdraw-info .delete-item .check-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.withdraw-info .delete-item span {
    font-size: 16px;
    color: #222;
}

.withdraw-info .warning-text {
    font-size: 14px;
    color: #999;
    line-height: 1.5;
}

/* 구분선 */
.section-divider {
    height: 1px;
    background: #222;
    margin-bottom: 24px;
}

/* 탈퇴 사유 */
.reason-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 16px;
}

.reason-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.reason-btn {
    height: 48px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 14px;
    color: #999;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reason-btn.selected {
    border-color: #d91c1c;
    color: #d91c1c;
    font-weight: 500;
}

.reason-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* 기타 직접 입력 */
.etc-section {
    margin-bottom: 20px;
}

.etc-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 4px 4px 0 0;
    border: 1px solid #e2e2e2;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
}

.etc-label.selected {
    border-color: #d91c1c;
    color: #d91c1c;
    font-weight: 500;
}

.etc-textarea {
    display: block;
    width: 100%;
    height: 100px;
    padding: 14px 16px;
    border: 1px solid #e2e2e2;
    border-top: none;
    border-radius: 0 0 4px 4px;
    font-size: 14px;
    color: #222;
    resize: none;
    font-family: inherit;
}

.etc-textarea::placeholder {
    color: #bbb;
}

.etc-textarea.show {
    display: block;
}

.etc-textarea:focus {
    border-color: #222;
    outline: none;
}

/* 하단 버튼 */
.btn-row {
    display: flex;
    gap: 10px;
    padding: 16px 30px 30px;
    align-items: stretch;
}

.btn-row .btn {
    flex: 1;
    height: 56px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.btn-row .btn-cancel {
    background: #fff;
    color: #222;
    border: 1px solid #e2e2e2;
}

.btn-row .btn-next {
    background: #222;
    color: #fff;
}

/* ===== 2-7_withdraw-complete ===== */
.result-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 68px - 68px);
    padding: 0 30px;
    text-align: center;
}

.result-icon {
    width: 104px;
    height: 104px;
    margin-bottom: 30px;
}

.result-icon img {
    width: 100%;
    object-fit: contain;
}

.result-title {
    font-size: 30px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
    margin-bottom: 16px;
}

.result-desc {
    font-size: 16px;
    color: #222;
    line-height: 1.55;
    margin-bottom: 170px;
}

.result-btn {
    width: 100%;
    max-width: 420px;
}


/* ===== 3-1_purchase ===== */
.filter-tabs {
    display: flex;
    border-bottom: 1px solid #e2e2e2;
}

.filter-tabs .tab-item {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 500;
    color: #999;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.filter-tabs .tab-item.active {
    color: #d7282f;
    font-weight: 600;
}

.filter-tabs .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #d7282f;
}

.period-filter {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 16px 30px;
    background: #fafafa;
    border-bottom: 1px solid #e2e2e2;
}

.period-filter .period-btn {
    /* a 와 button 이 섞여 있다 — button 은 글자가 저절로 가운데지만 a 는 아니라,
       폭이 늘어나면(모바일 4등분) 글자가 왼쪽에 붙었다. 여기서 한 번에 맞춘다. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #bbb;
    white-space: nowrap;
    cursor: pointer;
}

.period-filter .period-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.month-group {
    padding: 10px 30px;
    border-bottom: 5px solid #E2E2E2;
}

.month-group:last-child {
    border-bottom: none;
    margin-bottom: 20px;
}

.month-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
}

.month-title h3 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
}

.month-title .btn-detail {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #777;
    background: #EEEEEE;
    border-radius: 20px;
    padding: 4px 12px;
}

.purchase-card {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.purchase-card:hover {
    cursor: pointer;
}

.purchase-card .purchase-status {
    font-size: 16px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.purchase-card .purchase-status .status {
    font-weight: 500;
    color: #222;
}

.purchase-card .purchase-status .date {
    color: #999;
    margin-left: 8px;
}

.purchase-card .purchase-name {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    line-height: 1.5;
}

.purchase-card .purchase-store {
    font-size: 16px;
    color: #222;
    line-height: 1.6;
}

.purchase-card .purchase-price {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-top: 4px;
}


/* ===== 3-2_purchase-detail ===== */
.detail-section {
    border-bottom: 1px solid #E2E2E2;
    margin-bottom: 55px;
}

.detail-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    padding-bottom: 12px;
    border-bottom: 2px solid #222;
    margin-bottom: 0;
}

/* 주문 요약 테이블 */
.detail-row-wrap {
    padding: 10px 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.summary-row:first-child {
    margin-top: 8px;
}

.summary-row .label {
    font-size: 14px;
    color: #999;
}

.summary-row .value {
    font-size: 14px;
    color: #222;
}

.order-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    background: #5687B41A;
    color: #5687B4;
}

/* 주문 상품 */
.product-wrap {
    padding: 10px 0;
}

.product-wrap:not(:last-child) {
    border-bottom: 1px solid #E2E2E2;
}

.product-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.product-row .product-name {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    flex: 1;
}

.product-row .product-price {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    margin-left: 16px;
}

.product-option {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin-top: 2px;
}

.product-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 14px 0 0;
}

/* 섹션 구분 */
.section-divider {
    height: 10px;
    background: #f5f5f5;
    margin: 0 -30px;
}

/* 결제 정보 */
.payment-row-wrap {
    padding: 10px 0;
}

.payment-row-wrap:not(:last-child) {
    border-bottom: 1px solid #E2E2E2;
}

.payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.payment-row:first-child {
    margin-top: 8px;
}

.payment-row .label {
    font-size: 14px;
    color: #666;
}

.payment-row .value {
    font-size: 14px;
    color: #222;
}

.payment-row.discount .value {
    color: #d91c1c;
}

.payment-row.total .label {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

.payment-row.total .value {
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

/* 배송 정보 */
.delivery-info {
    display: flex;
    gap: 12px;
    padding: 20px 0;
}

.delivery-icon {
    width: 24px;
    flex-shrink: 0;
}

.delivery-icon img {
    width: 100%;
    object-fit: contain;
}

.delivery-label {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    margin-bottom: 6px;
}

.delivery-text {
    font-size: 16px;
    color: #999;
    line-height: 1.6;
}


/* ===== 3-4_coupon ===== */
.coupon-tabs {
    display: flex;
    border-bottom: 1px solid #e2e2e2;
}

.coupon-tabs .tab-item {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 500;
    color: #999;
    position: relative;
    cursor: pointer;
}

.coupon-tabs .tab-item.active {
    color: #d7282f;
    font-weight: 600;
}

.coupon-tabs .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #d7282f;
}

.coupon-count {
    padding: 16px 30px 0;
    font-size: 16px;
    color: #222;
    font-weight: 500;
}

.coupon-count strong {
    color: #d91c1c;
}

/* 더보기 — 구매내역·쿠폰함·포인트 내역 공용. 목록 아래 한 줄, 남은 건수를 함께 보인다.
   .in-list 는 목록 컨테이너 안에 놓인 경우 — 좌우 여백은 컨테이너가 이미 갖고 있다. */
.mp-load-more-wrap {
    padding: 8px 30px 24px;
}

.mp-load-more-wrap.in-list {
    padding: 8px 0 0;
}

.mp-load-more-wrap[hidden] {
    display: none;
}

.mp-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mp-load-more:disabled {
    opacity: .5;
    cursor: default;
}

.mp-load-more-rest {
    color: #8a6f4d;
    font-weight: 500;
}

.coupon-list {
    padding: 12px 30px 30px;
}

.coupon-list .coupon-card {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.coupon-list .coupon-card .coupon-info {
    flex: 1;
}

.coupon-list .coupon-card .coupon-expiry {
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin-left: 16px;
    border-left: 1px dashed #ccc;
    font-size: 13px;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}

.coupon-card .coupon-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(92, 185, 34, 0.15);
    color: #5cb922;
    margin-bottom: 10px;
}

.coupon-list .coupon-card .coupon-name {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 4px;
}

.coupon-list .coupon-card .coupon-condition {
    font-size: 13px;
    color: #999;
    line-height: 1.5;
}

/* 사용완료/만료 상태 */
.coupon-card.used,
.coupon-card.expired {
    position: relative;
}

.coupon-card.used .coupon-name,
.coupon-card.expired .coupon-name {
    color: #999;
}

.coupon-card.used .coupon-download svg,
.coupon-card.expired .coupon-download svg {
    stroke: #ddd;
}

/* 도장이 카드 밖으로 나가지 않게 가둔다 — 카드와 같은 모서리로 잘라낸다.
   불투명도는 아래 글자가 도장과 겹쳐 읽히지 않을 만큼 올린다 (이미 쓴 쿠폰이라 글자를 읽을 일이 없다) */
.coupon-status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border-radius: inherit;
    overflow: hidden;
    z-index: 2;
}

/* 크기는 카드 높이(약 100px)에 맞춘다 — 기울이면 사방으로 22% 더 커지므로(72 → 88)
   100px 로 두면 122px 이 되어 카드 위아래로 삐져나오고 쿠폰명을 덮는다 */
.coupon-status-stamp {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transform: rotate(-15deg);
}

.coupon-status-stamp.stamp-used {
    border-color: #999;
    color: #999;
}

.coupon-status-stamp.stamp-expired {
    border-color: #bbb;
    color: #bbb;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


/* ===== change-password ===== */
.pw-section {
    margin-top: 10px;
}

.pw-section .form-group {
    margin-bottom: 20px;
}

.form-error {
    font-size: 13px;
    color: #d91c1c;
    margin-top: 6px;
    display: none;
}

.form-error.show {
    display: block;
}

.form-desc {
    font-size: 16px;
    color: #777;
    line-height: 1.5;
    margin-top: 6px;
    font-weight: 600;
}

.form-desc.success {
    color: #2e7d32;
}

.form-desc.error {
    color: #d91c1c;
}

.form-input-wrap .btn-eye svg,
.form-input-wrap .btn-eye img {
    width: 24px;
    height: 24px;
    stroke: #bbb;
    stroke-width: 1.5;
    fill: none;
}

.pw-success {
    display: none;
    text-align: center;
    padding: 60px 0;
}

.pw-success .success-icon {
    width: 104px;
    height: 104px;
    margin: 0 auto 24px;
}

.pw-success .success-icon svg,
.pw-success .success-icon img {
    width: 104px;
    height: 104px;
}

.pw-success .success-title {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
}

.pw-success .success-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 40px;
}


/* ===== find-id ===== */
.find-form {
    margin-top: 10px;
}

.result-box {
    display: none;
    text-align: center;
    padding: 40px 0;
}

.result-box .id-text {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
}

.result-box .join-date {
    font-size: 15px;
    color: #999;
    margin-bottom: 40px;
}

.form-error {
    font-size: 13px;
    color: #d91c1c;
    margin-top: 6px;
    display: none;
}

.form-error.show {
    display: block;
}

.timer-text {
    font-size: 13px;
    color: #d91c1c;
    margin-top: 6px;
    display: none;
}

.timer-text.show {
    display: block;
}


/* ===== find-password ===== */
.find-form {
    margin-top: 10px;
}

.btn-area {
    padding: 30px 0 60px;
}

.btn-area.mt170 {
    margin-top: 170px;
}

.pw-rules {
    font-size: 13px;
    color: #999;
    margin-top: 6px;
    line-height: 1.5;
}

.form-input-wrap {
    position: relative;
}

.form-input-wrap .btn-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.form-input-wrap .timer-text {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    margin-top: 0;
}

.result-wrap {
    display: none;
    text-align: center;
    padding: 40px 0;
}

.result-wrap .result-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.result-wrap .result-title {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
}

.result-wrap .result-desc {
    font-size: 16px;
    color: #666;
    line-height: 155%;
    margin-bottom: 40px;
}

.form-error {
    font-size: 13px;
    color: #d91c1c;
    margin-top: 6px;
    text-align: left;
    display: none;
}

.form-error.show {
    display: block;
}

.timer-text {
    font-size: 13px;
    color: #d91c1c;
    margin-top: 6px;
    display: none;
}

.timer-text.show {
    display: block;
}


/* ===== privacy-policy ===== */
.doc-title {
    font-size: 30px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    margin: 45px 0 20px;
    text-align: center;
}

.doc-intro {
    font-size: 16px;
    color: #222;
    line-height: 1.5;
    margin-bottom: 40px;
    text-align: center;
}

.doc-section {
    margin-bottom: 28px;
}

.doc-section .chapter {
    font-size: 13px;
    color: #999;
    margin-bottom: 4px;
}

.doc-section h3 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    padding-bottom: 15px;
    border-bottom: 1px solid #222;
    margin-bottom: 15px;
}

.doc-section p {
    font-size: 16px;
    color: #999;
    line-height: 25px;
    margin-bottom: 20px;
}

.doc-section ol {
    padding-left: 20px;
    margin-bottom: 8px;
    list-style-type: decimal;
}

.doc-section ol li {
    font-size: 16px;
    color: #999;
    line-height: 25px;
}

.doc-section ul {
    padding-left: 10px;
    margin-bottom: 8px;
}

.doc-section ul li {
    position: relative;
    font-size: 16px;
    color: #999;
    line-height: 25px;
    list-style: none;
}

.doc-section ul li::before {
    content: "·";
    position: absolute;
    left: -10px;
    font-weight: bold;
}

/* 약관관리(DB) 등록 본문 보정: CKEditor 콘텐츠 이미지/표 안전 처리 */
.doc-db-content img { max-width: 100%; height: auto; }
.doc-db-content table { max-width: 100%; }

.doc-version {
    position: relative;
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid #e2e2e2;
    margin-top: 40px;
}

.doc-version .date {
    font-size: 14px;
    font-weight: 400;
    color: #222;
    margin-bottom: 7px;
}

.doc-version .note {
    font-size: 14px;
    color: #999;
}

.btn-top {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    cursor: pointer;
}

.btn-top svg {
    width: 100%;
    object-fit: contain;
}

/* ===== _sitemap ===== */
.index-wrap {
    padding: 0 30px 40px;
}

.index-section {
    margin-bottom: 30px;
}

.index-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    padding-bottom: 10px;
    border-bottom: 2px solid #222;
    margin-bottom: 0;
}

.index-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.index-link a {
    font-size: 16px;
    color: #222;
    text-decoration: none;
    font-weight: 500;
}

.index-link a:hover {
    color: #d91c1c;
}

.index-link .file-name {
    font-size: 13px;
    color: #999;
}

/* [메인 카드] 현재 행사 */
.main-card {
    background: var(--card-bg);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border);
    position: relative;
    z-index: 2;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.date-label {
    font-size: 0.7rem;
    color: var(--text-sub);
    font-weight: 500;
}

.event-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.stamp-row {
    display: flex;
    gap: 6px;
}

.dot {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #cbd5e1;
    font-weight: 600;
}

.dot.on {
    background: #4f46e5;
    color: white;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
}

.dot.on::after {
    content: '✓';
}


@media (max-width: 959px) {
    .user-banner {
        padding: 0 20px;
    }

    .user-banner .user-avatar {
        width: 60px;
        height: 60px;
    }

    .user-banner .user-name {
        font-size: 25px;
    }

    .detail-section {
        padding: 0 20px;
    }

    .filter-tabs .tab-item {
        font-size: 16px;
    }

    .page-content {
        padding: 0 20px;
    }

    .coupon-count {
        padding: 16px 0 0;
    }

    .coupon-list {
        padding: 12px 0 30px;
    }

    .period-filter {
        justify-content: center;
        padding: 16px 0;
    }

    .month-group {
        padding: 20px 0;
    }

    .pw-forgot {
        margin: 30px 0 90px;
    }

    .cscenter-btn {
        display: contents;
        width: 100%;
        max-width: 420px;
        margin-top: 60px;
    }

    /* 모바일: 결혼기념일 달력 팝업이 화면 밖으로 안 나가도록 우측 정렬 + 폭 제한 */
    .info-date .custom-calendar {
        left: auto;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: calc(100vw - 40px);
    }

    /* 모바일: 1줄 유지하면서 라벨 폭을 자연 텍스트 폭으로 축소해 input·달력 아이콘·저장 버튼이
       한 줄에 모두 들어가도록 보정 */
    .info-row .info-label {
        width: auto;
        flex-shrink: 0;
        min-width: 0;
        margin-right: 8px;
    }

    .info-section .btn-change {
        padding: 0 10px;
    }
}

/* ============================================================
   Dark Mode (자동 인식: prefers-color-scheme)
   - 사용자 페이지별 위젯 오버라이드
   ============================================================ */
@media (prefers-color-scheme: dark) {

    /* ========== 채널 선택 / 로그인 / 찾기 / 고객센터 ========== */
    .channel-hero .hero-title,
    .channel-hero .hero-desc {
        color: #ececec;
    }

    .channel-info .info-card {
        background: #1e1e1e;
    }

    .channel-info .info-card .card-icon img,
    .channel-info .info-card .card-icon svg {
        filter: invert(1) hue-rotate(180deg);
    }

    .channel-info .info-card .card-label,
    .channel-info .info-card .card-value,
    .channel-info .info-card .card-contrast {
        color: #ececec;
    }

    .channel-info .info-card .card-value.red-color {
        color: #ff5e5e;
    }

    /* 고객센터·완료 화면 공통 */
    .welcome-text,
    .complete-title, .result-title {
        color: #ececec;
    }

    .complete-desc,
    .result-desc {
        color: #a8a8a8;
    }

    /* call.svg 등 컬러 일러스트 아이콘은 이미 밝은 톤이라 필터 적용 시
       오히려 어두워지므로 원본 색상을 그대로 사용.
       반대로 welcome-text.svg / logo.svg는 검정 텍스트가 메인이라
       순백 실루엣으로 가시화 */
    .welcome-text .welcome-icon,
    .channel-hero .logo-img img {
        filter: brightness(0) invert(1);
    }

    .login-title,
    .login-subtitle {
        color: #ececec;
    }

    /* 로그인 페이지: 회원가입 안내·비밀번호 찾기·푸터 링크 */
    .login-signup span {
        color: #a8a8a8;
    }

    .login-signup a {
        color: #ececec;
    }

    .pw-forgot a {
        color: #a8a8a8;
    }

    .footer-links a {
        color: #a8a8a8;
    }

    .footer-links-divider {
        background: #3a3a3a;
    }

    /* ========== 회원가입 ========== */
    .step-item .step-text {
        color: #a8a8a8;
    }

    .step-item.active .step-text,
    .step-item.completed .step-text {
        color: #ececec;
    }

    .step-item .step-num-pending {
        background: #242424;
        border-color: #3a3a3a;
        color: #6a6a6a;
    }

    .step-connector {
        background: #3a3a3a;
    }

    .section-header .section-desc {
        color: #a8a8a8;
    }

    .form-input.error {
        border-color: #ff5e5e;
    }

    .form-error {
        color: #ff5e5e;
    }

    .agree-content {
        background: #1e1e1e;
        border-color: #3a3a3a;
        color: #a8a8a8;
    }

    /* 약관/개인정보 펼침 본문 — doc-* 셀렉터들이 #222 로 명시되어
       다크에서 보이지 않으므로 강제 오버라이드 */
    .agree-content .doc-intro,
    .agree-content .doc-section h2,
    .agree-content .doc-section h3,
    .agree-content .doc-section h4,
    .agree-content .doc-section strong,
    .agree-content .doc-version .date {
        color: #ececec;
    }

    .agree-content .doc-section p,
    .agree-content .doc-section ol li,
    .agree-content .doc-section ul li,
    .agree-content .doc-section .chapter,
    .agree-content .doc-version .note {
        color: #a8a8a8;
    }

    .agree-content .doc-section h3 {
        border-bottom-color: #3a3a3a;
    }

    .agree-content .doc-version {
        border-top-color: #3a3a3a;
    }

    .agree-content table th,
    .agree-content table td {
        color: #a8a8a8;
        border-color: #3a3a3a !important;
    }

    /* 약관/개인정보 standalone 페이지 (terms.jsp, privacypolicy.jsp) */
    .doc-title,
    .doc-intro,
    .doc-section h2,
    .doc-section h3,
    .doc-section h4,
    .doc-section strong,
    .doc-version .date {
        color: #ececec;
    }

    .doc-section p,
    .doc-section ol li,
    .doc-section ul li,
    .doc-section .chapter,
    .doc-version .note {
        color: #a8a8a8;
    }

    .doc-section h3 {
        border-bottom-color: #3a3a3a;
    }

    .doc-version {
        border-top-color: #3a3a3a;
    }

    .doc-section table th,
    .doc-section table td {
        color: #a8a8a8;
        border-color: #3a3a3a !important;
    }

    .btn-top img {
        filter: invert(1) hue-rotate(180deg);
    }

    /* 약관/개인정보 본문의 인라인 라이트 배경·테두리·회색 텍스트
       (인라인 스타일이라 attribute selector + !important 필요)
       - 박스 자체에 color: #ececec 를 강제해 자식 텍스트가 또렷하게 상속되도록 */
    .doc-section [style*="background: #f9f9f9"],
    .doc-section [style*="background:#f9f9f9"],
    .doc-section [style*="background: #f8f9fa"],
    .doc-section [style*="background:#f8f9fa"],
    .doc-section [style*="background-color: #f8f9fa"],
    .doc-section [style*="background-color:#f8f9fa"] {
        background: #242424 !important;
        color: #ececec !important;
    }

    /* 스마트에디터로 등록한 약관 본문 대응.
       에디터는 배경을 background 가 아니라 background-color 로 저장하기 때문에
       위쪽 background 셀렉터들에 걸리지 않는다. 표 머리글은 인라인 배경이 무엇이든
       어두운 배경으로 덮어 흰 배경 위 회색 글자가 되는 것을 막는다. */
    .doc-section table th {
        background: #242424 !important;
        color: #ececec !important;
    }

    .doc-section [style*="background-color: #f9f9f9"],
    .doc-section [style*="background-color:#f9f9f9"] {
        background: #242424 !important;
        color: #ececec !important;
    }

    .doc-section [style*="background-color: #FFFDE7"],
    .doc-section [style*="background-color:#FFFDE7"] {
        background: #3a3320 !important;
        color: #f0e8c8 !important;
    }

    .doc-section [style*="background-color: #EBF3FB"],
    .doc-section [style*="background-color:#EBF3FB"] {
        background: #1f3245 !important;
        color: #cfe5ff !important;
    }

    .doc-section [style*="background-color: #fdf2f2"],
    .doc-section [style*="background-color:#fdf2f2"] {
        background: #3a2222 !important;
        color: #f5d5d5 !important;
    }

    .doc-section [style*="background: #FFFDE7"],
    .doc-section [style*="background:#FFFDE7"] {
        background: #3a3320 !important;
        color: #f0e8c8 !important;
    }

    .doc-section [style*="background: #EBF3FB"],
    .doc-section [style*="background:#EBF3FB"] {
        background: #1f3245 !important;
        color: #cfe5ff !important;
    }

    .doc-section [style*="background: #fdf2f2"],
    .doc-section [style*="background:#fdf2f2"] {
        background: #3a2222 !important;
        color: #f5d5d5 !important;
    }

    .doc-section [style*="border: 1px solid #ddd"],
    .doc-section [style*="border:1px solid #ddd"] {
        border-color: #3a3a3a !important;
    }

    .doc-section [style*="border: 1px solid #f5c6cb"],
    .doc-section [style*="border:1px solid #f5c6cb"] {
        border-color: #5a3535 !important;
    }

    .doc-section [style*="border-left: 3px solid #ccc"],
    .doc-section [style*="border-left:3px solid #ccc"] {
        border-left-color: #4a4a4a !important;
    }

    .doc-section [style*="color: #666"],
    .doc-section [style*="color:#666"] {
        color: #a8a8a8 !important;
    }

    .doc-section [style*="color: #888"],
    .doc-section [style*="color:#888"] {
        color: #a8a8a8 !important;
    }

    .doc-section [style*="color: #333"],
    .doc-section [style*="color:#333"] {
        color: #ececec !important;
    }

    .doc-section [style*="color: #d9534f"],
    .doc-section [style*="color:#d9534f"] {
        color: #ff7878 !important;
    }

    .doc-section [style*="color: #d93025"],
    .doc-section [style*="color:#d93025"] {
        color: #ff7878 !important;
    }

    .doc-section [style*="color: #007bff"],
    .doc-section [style*="color:#007bff"] {
        color: #79b8ff !important;
    }

    .form-input-wrap .icon-calendar svg {
        stroke: #a8a8a8;
    }

    /* ========== 마이페이지 메인 / 회원정보 ========== */
    .user-banner .user-name {
        color: #ececec;
    }

    .user-banner .btn-myinfo {
        color: #fff;
    }

    /* 행사 방문 횟수 원 (1회/2회/3회) */
    .event-item .circle {
        background: #1e1e1e;
        color: #a8a8a8;
        border-color: #505050;
    }

    .event-item .circle.checked {
        border-color: #5cc870;
    }

    .event-item .title {
        color: #ececec;
    }

    .item-empty .empty-info {
        color: #a8a8a8;
    }

    .section-header h2 {
        color: #ececec;
        border-bottom-color: #ececec;
    }

    .section-header .btn-viewall {
        background: #2d2d2d;
        color: #a8a8a8;
    }

    .info-section-header {
        border-bottom-color: #ececec;
    }

    .info-section-header h2 {
        color: #ececec;
    }

    .info-row {
        border-color: #333;
    }

    .info-row .info-label {
        color: #ececec;
    }

    .info-row .info-label .required {
        color: #ff5e5e;
    }

    .info-row .info-value {
        color: #a8a8a8;
    }

    .info-row .info-value.dark {
        color: #ececec;
    }

    /* 변경 버튼 */
    .info-section .btn-change {
        background: transparent;
        border-color: #3a3a3a;
        color: #ececec;
    }

    .info-section .btn-change.confirm {
        background: #ececec;
        border-color: #ececec;
        color: #121212;
    }

    /* info-group 구분선·라벨 */
    .info-group {
        border-bottom-color: #333;
    }

    .info-group .form-label {
        color: #ececec;
    }

    /* 부가정보 라디오 버튼 */
    .info-radio-inline .radio-btn {
        background: #242424;
        border-color: #3a3a3a;
        color: #a8a8a8;
    }

    .info-radio-inline .radio-btn.active {
        border-color: #ff5e5e;
        color: #ff5e5e;
    }

    /* 결혼기념일 달력 아이콘 (검정 SVG) */
    .info-date .icon-calendar img {
        filter: invert(1) hue-rotate(180deg);
    }

    /* info-date 내부 달력 — specificity 보정 */
    .info-date .custom-calendar {
        background: #2a2a2a;
        border-color: #3a3a3a;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    }

    /* 동의정보 (이용약관·개인정보처리방침·마케팅) */
    .info-section .agree-item > .check-text {
        color: #ececec;
    }

    .agree-item .btn-arrow svg,
    .agree-info-item .btn-arrow svg {
        stroke: #a8a8a8;
    }

    .agree-item .btn-arrow img {
        filter: invert(1) hue-rotate(180deg);
    }

    .agree-info-all {
        border-bottom-color: #3a3a3a;
    }

    /* 회원탈퇴 링크 */
    .withdraw-link a {
        color: #a8a8a8;
    }

    /* 회원탈퇴 안내 박스 */
    .withdraw-info .info-title {
        color: #ececec;
        border-bottom-color: #ececec;
    }

    .withdraw-info .delete-item span {
        color: #ececec;
    }

    .withdraw-info .delete-item .check-circle img {
        filter: invert(1) hue-rotate(180deg);
    }

    .withdraw-info .warning-text {
        color: #a8a8a8;
    }

    .section-divider {
        background: #3a3a3a;
    }

    /* 회원탈퇴 사유 */
    .reason-section-title,
    .detail-section-title {
        color: #ececec;
    }

    /* 기타 직접 입력 textarea — 다크모드에서 글자 안 보이던 문제 */
    .etc-label {
        background: #1e1e1e;
        border-color: #3a3a3a;
        color: #a8a8a8;
    }

    .etc-label.selected {
        background: #1e1e1e;
        border-color: #ff5e5e;
        color: #ff5e5e;
    }

    .etc-textarea {
        background: #1e1e1e;
        border-color: #3a3a3a;
        color: #ececec;
    }

    .etc-textarea::placeholder {
        color: #6a6a6a;
    }

    .etc-textarea:focus {
        border-color: #ececec;
    }

    /* 확인 팝업 */
    .popup-box-confirm .popup-desc {
        color: #a8a8a8;
    }

    .popup-box-confirm .popup-btns .btn-cancel {
        background: transparent;
        color: #ececec;
        border-color: #3a3a3a;
    }

    .popup-box-confirm .popup-btns .btn-confirm {
        background: #ececec;
        color: #121212;
    }

    /* ========== 보유쿠폰 ========== */
    .coupon-list .coupon-card {
        background: #1e1e1e;
        border-color: #3a3a3a;
    }

    .coupon-list .coupon-card .coupon-expiry {
        color: #a8a8a8;
    }

    .coupon-list .coupon-card .coupon-name {
        color: #ececec;
    }

    .coupon-list .coupon-card .coupon-condition {
        color: #a8a8a8;
    }

    .coupon-card.used,
    .coupon-card.expired {
        opacity: 0.6;
    }

    .coupon-card.used .coupon-name,
    .coupon-card.expired .coupon-name {
        color: #767676;
    }

    .mypage-coupon .coupon-card {
        background: #1e1e1e;
        border-color: #3a3a3a;
    }

    .mypage-coupon .coupon-name {
        color: #ececec;
    }

    .mypage-coupon .coupon-condition {
        color: #a8a8a8;
    }

    /* ========== 구매내역 (purchase / purchasedetail) ========== */
    .purchase-item .purchase-info .purchase-status .status {
        color: #ececec;
    }

    .purchase-item .purchase-info .purchase-name {
        color: #ececec;
    }

    .purchase-item .purchase-info .purchase-date {
        color: #a8a8a8;
    }

    .purchase-item .purchase-price {
        color: #ececec;
    }

    .filter-tabs .tab-item {
        color: #a8a8a8;
    }

    .filter-tabs .tab-item.active {
        color: #ff6b6b;
    }

    .filter-tabs .tab-item.active::after {
        background: #ff6b6b;
    }

    /* 총 N건/장 카운트 (쿠폰함·포인트 내역 공용) */
    .coupon-count {
        color: #ececec;
    }

    .mp-load-more {
        background: #1e1e1e;
        border-color: #3a3a3a;
        color: #ececec;
    }

    .mp-load-more-rest {
        color: #c9a97e;
    }

    /* 필터 줄 자체 — 라이트의 #fafafa 가 그대로 남아 어두운 화면에 흰 띠로 떴다.
       .mypage-refined 쪽에 transparent 규칙이 있지만 그건 max-width:959px 라
       PC(좌우 여백 있는 넓은 화면)에서는 걸리지 않는다. */
    .period-filter {
        background: transparent;
        border-bottom-color: #3a3a3a;
    }

    .period-filter .period-btn {
        background: transparent;
        border-color: #3a3a3a;
        color: #a8a8a8;
    }

    .period-filter .period-btn.active {
        background: #ececec;
        color: #121212;
        border-color: #ececec;
    }

    .month-group {
        background: #1e1e1e;
        border-bottom-color: #3a3a3a;
    }

    .month-title h3 {
        color: #ececec;
    }

    .purchase-card {
        background: #1e1e1e;
        border-color: #3a3a3a;
    }

    .purchase-card:hover {
        background: #242424;
    }

    .purchase-card .purchase-status .status {
        color: #ececec;
    }

    .purchase-card .purchase-status .date {
        color: #a8a8a8;
    }

    .purchase-card .purchase-name,
    .purchase-card .purchase-store,
    .purchase-card .purchase-price {
        color: #ececec;
    }

    .order-status-badge {
        background: rgba(100, 150, 200, 0.2);
        color: #90c4ff;
    }

    /* 구매 상세 내역 — 섹션 제목과 상태 배지만 다크 대응이 있었고 본문 라벨·값이 빠져
       어두운 배경에 어두운 글씨가 겹쳐 안 보였다. 라이트 모드의 명암 관계를 그대로 뒤집는다.
       (#222 본문 → #ececec, #666·#999 보조 → #a8a8a8) */
    .summary-row .value,
    .payment-row .value,
    .payment-row.total .label,
    .payment-row.total .value,
    .product-row .product-name,
    .product-row .product-price,
    .delivery-label {
        color: #ececec;
    }

    .summary-row .label,
    .payment-row .label,
    .product-option,
    .delivery-text {
        color: #a8a8a8;
    }

    /* 할인 금액은 라이트에서도 강조색 — 어두운 배경에서 읽히도록 밝은 빨강으로 */
    .payment-row.discount .value {
        color: #ff5e5e;
    }

    /* 구분선 — 밝은 회색 그대로 두면 띠처럼 도드라진다 */
    .payment-row-wrap:not(:last-child) {
        border-bottom-color: #3a3a3a;
    }

    .product-divider,
    .section-divider {
        background: #3a3a3a;
    }

    /* 배송/매장 아이콘은 검은 선화라 어두운 배경에서 사라진다 */
    .delivery-icon img {
        filter: brightness(0) invert(1);
    }

    /* ========== 커스텀 달력 ========== */
    .custom-calendar {
        background: #2a2a2a;
        border-color: #3a3a3a;
    }

    .cal-title {
        color: #ececec;
    }

    .cal-prev:hover, .cal-next:hover {
        background: #2d2d2d;
    }

    .cal-prev svg, .cal-next svg {
        stroke: #a8a8a8;
    }

    .cal-weekdays {
        border-bottom-color: #3a3a3a;
    }

    .cal-weekdays span {
        color: #767676;
    }

    .cal-weekdays span:first-child {
        color: #ff5e5e;
    }

    .cal-weekdays span:last-child {
        color: #7eb3ff;
    }

    .cal-day {
        color: #ececec;
    }

    .cal-day:hover {
        background: #2d2d2d;
    }

    .cal-day.other {
        color: #4a4a4a;
    }

    .cal-day.today {
        color: #ececec;
    }

    .cal-day.today::before {
        background: #5cc870;
    }

    .cal-day.selected {
        background: rgba(255, 94, 94, 0.18);
        color: #ff5e5e;
        border-color: #ff5e5e;
    }

    .cal-day.sun, .cal-day.holiday {
        color: #ff5e5e;
    }

    .cal-day.sat {
        color: #7eb3ff;
    }

    .cal-day.sun.other, .cal-day.holiday.other {
        color: rgba(255, 94, 94, 0.25);
    }

    .cal-day.sat.other {
        color: rgba(126, 179, 255, 0.25);
    }

    .cal-day.selected.sun, .cal-day.selected.holiday {
        color: #ff5e5e;
    }

    .cal-day.selected.sat {
        color: #7eb3ff;
    }

    .cal-day.holiday::after {
        background: #ff5e5e;
    }

    .cal-day.selected.holiday::after {
        background: #ececec;
    }

    /* ========== Multi-range 슬라이더 ========== */
    .slider-picker {
        background: #1e1e1e;
        border-color: #3a3a3a;
    }

    .recommender-popup-header {
        border-bottom-color: #3a3a3a;
    }

    .recommender-popup-close {
        background: #3a3a3a;
    }

    .recommender-popup-close img {
        filter: invert(1) hue-rotate(180deg);
    }

    .recommender-search-row .btn-inline {
        color: #ececec;
        border-color: #3a3a3a;
        background: #242424;
    }

    .recommender-popup-btns .btn-cancel {
        background: #242424;
        color: #ececec;
        border-color: #3a3a3a;
    }

    .recommender-popup-btns .btn-confirm {
        background: #ececec;
        color: #121212;
        border-color: #ececec;
    }

    #recommenderResult.success {
        color: #72d987;
    }

    #recommenderResult.error {
        color: #ff7b7b;
    }
}

/* 추천인 추가 팝업 */
.recommender-popup {
    z-index: 1000;
}

.recommender-popup-box {
    position: relative;
    padding: 0;
    text-align: left;
    overflow: hidden;
}

.recommender-popup-header {
    position: relative;
    padding: 24px 56px 18px 24px;
    border-bottom: 1px solid #e2e2e2;
}

.recommender-popup-header .popup-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.recommender-popup-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
    padding: 0;
}

.recommender-popup-close img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.recommender-popup-desc {
    padding: 22px 24px 0;
    margin: 0 0 14px;
    text-align: left;
}

.recommender-search-row {
    display: flex;
    gap: 8px;
    padding: 0 24px;
}

.recommender-search-row .form-input {
    flex: 1;
}

.recommender-search-row .btn-inline {
    width: 96px;
    height: 48px;
    flex-shrink: 0;
}

#recommenderResult {
    min-height: 24px;
    padding: 0 24px;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

#recommenderResult.success {
    color: #1a7f37;
}

#recommenderResult.error {
    color: #d91c1c;
}

.recommender-popup-btns {
    display: flex;
    gap: 8px;
    padding: 24px;
}

.recommender-popup-btns .btn {
    flex: 1;
    height: 48px;
    margin: 0;
}

.recommender-popup-btns .btn-cancel {
    background: #fff;
    color: #222;
    border: 1px solid #e2e2e2;
}

.recommender-popup-btns .btn-confirm {
    background: #222;
    color: #fff;
    border: 1px solid #222;
}

/* ============================================================================
 * 마이페이지 모바일 정리 (구 member-mypage-refined.css 를 여기로 합침)
 *
 *   별도 파일로 두던 것을 style.css 로 옮겼다. 로드 순서가
 *   common.css → style.css 였고 이 규칙들이 그 뒤에 실려 있었으므로,
 *   같은 우선순위를 유지하려면 style.css 의 맨 끝이어야 한다.
 * ========================================================================== */
/*
 * 마이페이지 모바일 화면 정리
 * 기존 색상과 콘텐츠 구성은 유지하고 여백·정렬·터치 영역만 일관되게 맞춘다.
 */

@media (min-width: 960px) {
    /* PC 재인증 화면은 공통 제목 아래 여백이 과도하게 벌어지지 않도록 본문 폭과 시작점을 맞춘다. */
    .mypage-auth-refined .pw-wrap,
    .mypage-auth-refined .reauth-wrap {
        width: calc(100% - 60px);
        max-width: 420px;
        margin: 0 auto;
        padding-top: 28px;
    }

    .mypage-auth-refined .pw-icon,
    .mypage-auth-refined .reauth-icon {
        margin-bottom: 20px;
    }

    .mypage-auth-refined .pw-desc,
    .mypage-auth-refined .reauth-desc {
        margin-bottom: 32px;
    }

    /* PC 내 정보 화면은 다른 하위 메뉴와 같은 30px 콘텐츠 기준선을 사용한다. */
    .mypage-info-refined .page-content > form {
        padding-right: 30px;
        padding-left: 30px;
    }

    .mypage-info-refined .page-content > form > .page-title {
        margin-right: -30px;
        margin-left: -30px;
    }

    /* PC 구매 상세는 섹션 내용이 패널 양 끝에 붙지 않도록 목록 화면의 여백과 맞춘다. */
    .mypage-order-detail-refined .detail-section {
        margin-right: 30px;
        margin-left: 30px;
    }

    /* PC 회원 탈퇴 화면의 입력 영역과 하단 버튼을 동일한 30px 선에 정렬한다. */
    .mypage-leave-refined .page-content {
        padding-right: 30px;
        padding-left: 30px;
    }

    .mypage-leave-refined .page-title {
        margin-right: -30px;
        margin-left: -30px;
    }
}

@media (max-width: 959px) {
    /* 상단 헤더를 화면에 붙여 둔다 — 사용자 화면 전부.
       화면마다 body 클래스를 붙이다 보니 새로 만든 화면에서 계속 빠졌다.
       .page-wrap 의 직계 자식만 잡는다 — 헤더가 .page-content 안으로 들어가면
       sticky 기준 상자가 그쪽으로 바뀌어 어차피 고정이 안 걸린다(구조 오류 표시).

       배경을 반드시 지정한다 — .header 에는 원래 배경이 없고 흰 .page-wrap 이
       비쳐 보이던 것이라, 고정한 뒤에는 스크롤되는 본문이 헤더를 통과해 보인다.
       (다크 모드는 common.css 가 .header 에 #1e1e1e 를 주지만 이 규칙이 더
        구체적이라 아래 다크 블록에서 다시 지정한다)

       960px 이상에서는 이 헤더가 display:none 이고 .desktop-header 가 대신 쓰인다.
       그쪽은 .page-wrap 이 overflow-y:auto 로 자체 스크롤하므로 고정이 필요 없다. */
    .page-wrap > .header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #fff;
    }

    /* 공통 제목과 본문 여백을 모바일 화면에 맞게 줄인다. */
    .mypage-refined .page-title {
        padding: 28px 0 20px;
        font-size: 24px;
        line-height: 1.25;
    }

    .mypage-refined .page-content {
        padding-right: 20px;
        padding-left: 20px;
    }

    /* 탭은 기존 활성 색상을 유지하면서 누르기 쉬운 높이로 통일한다. */
    .mypage-refined .coupon-tabs .tab-item,
    .mypage-refined .filter-tabs .tab-item {
        min-height: 46px;
        padding: 13px 4px;
        font-size: 15px;
        line-height: 1.25;
    }

    .mypage-refined .period-filter {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 14px 0;
        background: transparent;
    }

    .mypage-refined .period-filter .period-btn {
        width: 100%;
        min-width: 0;
        height: 42px;
        padding: 0 4px;
        border-radius: 8px;
        font-size: 13px;
    }

    .mypage-refined .period-filter .slider-picker {
        grid-column: 1 / -1;
    }

    .mypage-refined .coupon-count {
        padding-top: 16px;
        font-size: 14px;
    }

    /* 구매내역의 월 묶음(.month-group)이 좌우 0 이라 더보기도 맞춘다 */
    .mypage-refined .mp-load-more-wrap {
        padding: 8px 0 24px;
    }

    .mypage-refined .mp-load-more-wrap.in-list {
        padding: 8px 0 0;
    }

    /* 쿠폰은 기존 흰 배경·초록 배지를 유지하고 모서리와 간격만 정돈한다. */
    .mypage-refined .coupon-list {
        padding-top: 10px;
    }

    .mypage-refined .coupon-list .coupon-card {
        min-height: 112px;
        padding: 16px 18px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .mypage-refined .coupon-list .coupon-card .coupon-expiry {
        padding-left: 16px;
        margin-left: 12px;
    }

    /* 구매 목록은 카드 내부 정보 간격과 월 구분만 가볍게 정리한다. */
    .mypage-refined .month-group {
        padding: 18px 0;
        border-bottom-width: 8px;
    }

    .mypage-refined .month-title {
        padding-bottom: 12px;
    }

    .mypage-refined .month-title h3 {
        font-size: 18px;
    }

    .mypage-refined .purchase-card {
        padding: 16px 18px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .mypage-refined .purchase-card .purchase-status {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .mypage-refined .purchase-card .purchase-name {
        font-size: 16px;
    }

    .mypage-refined .purchase-card .purchase-store {
        font-size: 14px;
    }

    .mypage-refined .purchase-card .purchase-price {
        margin-top: 8px;
        font-size: 16px;
        text-align: right;
    }

    /* 구매 상세는 기존 표 구조를 유지하면서 섹션 사이 구분과 행 높이를 맞춘다. */
    .mypage-order-detail-refined .detail-section {
        padding: 20px 0;
        margin-bottom: 0;
        border-bottom: 8px solid #f5f5f5;
    }

    .mypage-order-detail-refined .detail-section:first-of-type {
        padding-top: 4px;
    }

    .mypage-order-detail-refined .detail-section-title {
        padding-bottom: 12px;
        border-bottom-width: 1px;
        font-size: 17px;
    }

    .mypage-order-detail-refined .summary-row,
    .mypage-order-detail-refined .payment-row {
        min-height: 38px;
        margin-bottom: 0;
    }

    /* 마이페이지 메인은 원래 배치와 색상을 유지하고 세로 공간만 줄인다. */
    .mypage-main-refined .user-banner {
        min-height: 132px;
        height: auto;
        padding: 20px;
    }

    .mypage-main-refined .user-banner .user-avatar {
        width: 56px;
        height: 56px;
    }

    .mypage-main-refined .user-banner .user-avatar img,
    .mypage-main-refined .user-banner .user-avatar svg {
        width: 30px;
        height: 30px;
    }

    .mypage-main-refined .user-banner .user-name {
        font-size: 22px;
    }

    .mypage-main-refined .user-banner .user-point-link {
        font-size: 13px;
    }

    .mypage-main-refined .user-banner .btn-myinfo {
        width: 100px;
        min-height: 40px;
    }

    .mypage-main-refined .m-grade-card {
        margin: 12px 20px 16px;
        padding: 16px 18px;
    }

    /* 공지사항은 제목 아래 기존 본문 미리보기가 충분히 보이도록 높이를 확보한다. */
    .mypage-main-refined .m-notice-slider {
        padding: 17px 20px 14px;
        margin-bottom: 0;
    }

    .mypage-main-refined .m-notice-slider-viewport,
    .mypage-main-refined .m-notice-slide {
        height: 118px;
    }

    .mypage-main-refined .m-notice-slide-title {
        font-size: 15px;
    }

    .mypage-main-refined .m-notice-slide-body {
        font-size: 13px;
        line-height: 1.55;
    }

    .mypage-main-refined .section-header {
        align-items: center;
        padding: 22px 0 14px;
    }

    .mypage-main-refined .section-header h2 {
        font-size: 19px;
    }

    .mypage-main-refined .section-header .btn-viewall {
        min-height: 40px;
        padding: 0 14px;
    }

    .mypage-main-refined .mypage-coupon .coupon-card {
        min-height: 94px;
        padding: 14px 16px;
        border-radius: 10px;
    }

    /* 포인트 목록은 금액·사유·연결 주문의 위계를 유지하며 좌우 정렬을 맞춘다. */
    .mypage-points-refined .pt-balance {
        margin: 4px 0 16px;
        padding: 16px 18px;
    }

    .mypage-points-refined .pt-item {
        padding: 16px 0;
    }

    .mypage-points-refined .pt-order-link {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
    }

    /* 공지 목록·상세는 기존 제목과 본문을 유지하고 모바일 좌우 여백만 통일한다. */
    .mypage-notice-list-refined .m-notice-list {
        padding-top: 4px;
    }

    .mypage-notice-list-refined .m-notice-item {
        min-height: 76px;
        padding: 17px 0;
    }

    .mypage-notice-list-refined .m-notice-title {
        font-size: 15px;
    }

    .mypage-notice-detail-refined .m-notice-detail {
        padding: 4px 0 36px;
    }

    .mypage-notice-detail-refined .m-notice-detail-title {
        padding-bottom: 17px;
        margin-bottom: 17px;
        font-size: 19px;
    }

    .mypage-notice-detail-refined .m-notice-detail-body {
        font-size: 14px;
        line-height: 1.75;
    }

    /* 내 정보 관리도 다른 하위 화면과 같은 섹션 간격을 사용한다. */
    .mypage-info-refined .info-section-header {
        margin-top: 22px;
    }

    .mypage-info-refined .info-row {
        min-height: 52px;
    }

    /* 추천 회원 목록은 다른 목록 화면과 같은 좌우 기준선과 행 간격을 사용한다. */
    .mypage-referral-refined .rf-desc {
        margin: 4px 0 16px;
        padding: 14px 16px;
    }

    .mypage-referral-refined .rf-list {
        padding: 4px 0 36px;
    }

    .mypage-referral-refined .rf-item {
        min-height: 58px;
        padding: 16px 0;
    }

    /* 재인증 화면도 공통 페이지 제목 아래에서 동일한 간격으로 시작한다. */
    .mypage-auth-refined .pw-wrap,
    .mypage-auth-refined .reauth-wrap {
        max-width: 420px;
        margin: 0 auto;
        padding-top: 28px;
    }

    .mypage-auth-refined .pw-icon,
    .mypage-auth-refined .reauth-icon {
        margin-bottom: 20px;
    }

    .mypage-auth-refined .pw-desc,
    .mypage-auth-refined .reauth-desc {
        margin-bottom: 32px;
    }

    .mypage-auth-refined .reauth-btn {
        margin-top: 0;
    }

    /* 회원 탈퇴 화면의 섹션과 하단 버튼을 다른 하위 화면의 20px 기준선에 맞춘다. */
    .mypage-leave-refined .withdraw-info {
        margin-bottom: 32px;
    }

    .mypage-leave-refined .withdraw-info .info-title {
        padding-bottom: 14px;
        margin-bottom: 16px;
        font-size: 17px;
    }

    .mypage-leave-refined .reason-section-title {
        font-size: 17px;
    }

    .mypage-leave-refined .reason-btn,
    .mypage-leave-refined .etc-label {
        min-height: 48px;
        border-radius: 8px;
    }

    .mypage-leave-refined .etc-label {
        border-radius: 8px 8px 0 0;
    }

    .mypage-leave-refined .etc-textarea {
        border-radius: 0 0 8px 8px;
    }

    .mypage-leave-refined .btn-row {
        padding: 16px 20px 30px;
    }

    /* 탈퇴 완료 화면도 다른 완료 화면과 같은 모바일 본문 폭을 사용한다. */
    .mypage-complete-refined .complete-wrap {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 359px) {
    /* 아주 좁은 기기에서는 회원 버튼을 다음 줄로 내려 겹침을 막는다. */
    .mypage-main-refined .user-banner {
        flex-wrap: wrap;
    }

    .mypage-main-refined .user-banner .btn-myinfo {
        width: 100%;
        margin-left: 70px;
    }

    .mypage-refined .period-filter .period-btn {
        font-size: 12px;
    }
}

@media (prefers-color-scheme: dark) and (max-width: 959px) {
    /* 고정 헤더의 배경 — 위 밝은 모드 규칙이 .header 공통값(#1e1e1e)보다 구체적이라
       여기서 다시 지정해야 한다. 색은 common.css 의 헤더 색과 같은 값이다.
       대상은 위 고정 규칙과 같아야 한다 — 한쪽만 늘리면 그 화면만 다크에서 본문이 비친다. */
    .page-wrap > .header {
        background: #1e1e1e;
    }

    /* 다크 모드에서는 기존 팔레트를 그대로 사용하고 새 구분선만 맞춘다. */
    .mypage-order-detail-refined .detail-section {
        border-bottom-color: #2a2a2a;
    }

    /* 재인증 안내 문구는 다크 모드의 공통 보조 문구 색상을 사용한다. */
    .mypage-auth-refined .pw-desc,
    .mypage-auth-refined .reauth-desc {
        color: #a8a8a8;
    }
}

/* 구매 상세 > 포인트 영역 */
.payment-row .value.point-earned { color: #d91c1c; }
.payment-row .value.point-expected { color: #d91c1c; }
.point-rate {
    margin-left: 6px;
    font-style: normal;
    font-size: 12px;
    color: #999;
}
.point-note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    word-break: keep-all;
}
.point-note strong {
    font-weight: 600;
    color: #333;
}
/* 단서는 한 단 아래로 — 적립일이 먼저 읽히게 */
.point-note-sub {
    display: block;
    margin-top: 3px;
    color: #999;
}
@media (prefers-color-scheme: dark) {
    /* 어두운 배경에서 읽히는 강조 빨강 — 결제 정보의 할인 금액과 같은 톤 */
    /* .payment-row .value 가 명시도에서 이기므로 같은 깊이로 맞춘다 */
    .payment-row .value.point-earned,
    .payment-row .value.point-expected { color: #ff5e5e; }
    .point-rate, .point-note-sub { color: #a8a8a8; }
    .point-note { color: #c9c9c9; }
    .point-note strong { color: #ececec; }
}

/* 구매 상세 > 할인 금액 아래 내역 (2026-10-06, 쿠폰 중복 사용) — 쓴 쿠폰 한 장씩, 그다음 W포인트·상시·기타.
   합계 줄보다 한 단 들여 쓰고 작게 — 쿠폰이 여러 장이어도 결제 정보가 합계보다 도드라지지 않게 */
.payment-row.payment-row-sub {
    margin-top: -4px;
    padding-left: 10px;
}
.payment-row.payment-row-sub .label,
.payment-row.payment-row-sub .value {
    font-size: 13px;
    color: #999;
}
@media (max-width: 959px) {
    /* 좁은 화면은 결제 정보 줄마다 최소 높이(38px)를 둔다 — 내역 줄까지 그러면 쿠폰 10장이 한 화면을 넘는다 */
    .mypage-order-detail-refined .payment-row.payment-row-sub {
        min-height: 0;
        margin-top: 0;
        margin-bottom: 6px;
    }
}
@media (prefers-color-scheme: dark) {
    /* .payment-row .value 의 다크 색보다 명시도가 높아 여기서 다시 잡는다 */
    .payment-row.payment-row-sub .label,
    .payment-row.payment-row-sub .value { color: #a8a8a8; }
}


/* ============================================================
   회원 오류 화면 (common/error.jsp)
   ============================================================ */
.user-error-wrapper { padding:40px 0 24px; text-align:center; }
.user-error-icon { margin:0 auto 24px; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
.user-error-title { font-size:20px; font-weight:700; color:#222; margin:0 0 12px; }
.user-error-description { font-size:14px; color:#666; line-height:1.6; margin:0 0 32px; white-space:pre-line; }
.user-error-actions { display:flex; gap:8px; flex-direction:column; }
.user-error-actions .user-error-btn { width:100%; height:56px; border-radius:4px; font-size:15px; font-weight:600; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; box-sizing:border-box; }
.user-error-actions .user-error-btn-primary,
.user-error-actions a.user-error-btn-primary { background:#222; color:#fff; }
.user-error-actions .user-error-btn-primary:hover,
.user-error-actions a.user-error-btn-primary:hover { background:#000; color:#fff; }
.user-error-actions .user-error-btn-outline,
.user-error-actions a.user-error-btn-outline { background:#fff; color:#222; border-color:#e2e2e2; }
.user-error-actions .user-error-btn-outline:hover,
.user-error-actions a.user-error-btn-outline:hover { background:#f5f5f5; color:#222; }


/* ============================================================
   등급 안내 (member/gradeguide/gradeguide.jsp)
   ============================================================ */
/* 멤버십 등급 안내 — 시안 색을 우리 토큰으로 (골드 #b79369, 본문 #222, 선 #ECEAE6) */
.gd-hero { background: #FAF8F5; border-top: 1px solid #ECEAE6; border-bottom: 1px solid #ECEAE6; padding: 34px 20px 30px; text-align: center; }
.gd-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: #b79369; margin-bottom: 11px; }
.gd-hero h2 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; color: #222; margin: 0; }
/* page-content 는 PC 에서 좌우 여백이 없어 본문이 직접 준다 (모바일은 page-content 20px) */
.gd-body { padding: 28px 30px 8px; word-break: keep-all; overflow-wrap: anywhere; }

.gd-table { display: grid; border-top: 2px solid #222; }
.gd-table > div { border-bottom: 1px solid #F2EFEB; padding: 14px 4px; font-size: 11.5px; line-height: 1.5; color: #4d4945; text-align: center; }
.gd-table .gd-corner { text-align: left; padding: 13px 8px; font-size: 10.5px; color: #a8a39c; border-bottom-color: #ECEAE6; }
.gd-table .gd-th { padding: 12px 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; border-bottom-color: #ECEAE6; color: #4d4945; }
.gd-table .gd-row { text-align: left; padding: 14px 8px; font-size: 12px; font-weight: 500; background: #FCFBF9; }
.gd-table .gd-big { font-size: 15px; font-weight: 600; }
.gd-table .gd-sub { color: #a8a39c; }
.gd-table .gd-none { color: #C4BFB7; }
.gd-table .gd-strong { font-weight: 500; color: #222; }
.gd-table .gd-last { border-bottom-color: #222; }
/* 등급 대표 컬러 (2026-09-04 확정) — 마이페이지 등급 카드(main.jsp)·관리자 등급 배지와 같은 값을 쓴다.
   등급명과 상시 할인율이 같이 쓰므로 색만 갖는 클래스로 둔다 (타이포는 .gd-th / .gd-big 이 담당).
   .gd-big 보다 뒤에 와야 색이 덮이지 않는다. */
.gd-table .gd-c-gold  { color: #7E756B; }
.gd-table .gd-c-prime { color: #3E7480; }
.gd-table .gd-c-vvip  { color: #1B2440; }
.gd-table .gd-c-wclub { color: #6B2436; }
/* 4열(임직원)은 모바일 폭에서 열이 좁아 글자·여백을 한 단계 줄인다 */
.gd-cols-4 > div { padding-left: 2px; padding-right: 2px; }
.gd-cols-4 .gd-th { font-size: 11px; letter-spacing: .02em; }
.gd-cols-4 .gd-corner, .gd-cols-4 .gd-row { padding-left: 6px; padding-right: 6px; }

.gd-notes { margin-top: 26px; border-top: 1px solid #ECEAE6; padding-top: 22px; display: flex; flex-direction: column; gap: 20px; }
.gd-notes h3 { font-size: 12.5px; font-weight: 600; color: #4d4945; margin: 0 0 9px; }
.gd-notes ul, .gd-event ul { margin: 0; padding-left: 12px; display: flex; flex-direction: column; gap: 5px; }
/* 글머리(·)는 내어쓰기, 본문은 어절 단위로만 줄바꿈 */
.gd-notes li, .gd-event li { font-size: 11.5px; line-height: 1.7; color: #9b968f; text-indent: -12px; }

.gd-event { margin: 36px 0 4px; border-top: 2px solid #222; padding-top: 22px; }
.gd-event-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.gd-event-head .gd-eyebrow { margin: 0; }
.gd-event-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #222; margin: 0; }
.gd-event-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gd-event-card { border: 1px solid #EBE7E1; border-radius: 8px; padding: 18px 20px; }
.gd-event-card .lbl { font-size: 11.5px; color: #8d8a85; margin-bottom: 10px; }
.gd-event-card .val { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #222; }
.gd-event ul { margin-top: 14px; }

@media (max-width: 959px) {
    .gd-body { padding: 24px 0 8px; }
    .gd-table > div { font-size: 10.5px; }
    .gd-table .gd-th { font-size: 12px; }
    .gd-table .gd-row { font-size: 11.5px; }
    .gd-event-cards { grid-template-columns: 1fr; }
}

/* Dark Mode (common.css 팔레트 준수) */
@media (prefers-color-scheme: dark) {
    .gd-hero { background: #1e1e1e; border-color: #3a3a3a; }
    .gd-hero h2, .gd-event-head h3, .gd-event-card .val, .gd-notes h3 { color: #ececec; }
    .gd-table, .gd-event { border-top-color: #ececec; }
    .gd-table > div { border-bottom-color: #2a2a2a; color: #a8a8a8; }
    .gd-table .gd-corner, .gd-table .gd-th { border-bottom-color: #3a3a3a; }
    .gd-table .gd-row { background: #1a1a1a; color: #ececec; }
    .gd-table .gd-big, .gd-table .gd-strong { color: #ececec; }
    .gd-table .gd-none { color: #555; }
    /* 대표 컬러는 어두워서 다크 배경에서 묻힌다 — 색상 유지한 밝은 톤 (main.jsp 와 같은 값).
       .gd-big 뒤에 와야 상시 할인율이 등급 색을 유지한다 */
    .gd-table .gd-c-gold  { color: #C4A882; }
    .gd-table .gd-c-prime { color: #62B0B8; }
    .gd-table .gd-c-vvip  { color: #98A4E6; }
    .gd-table .gd-c-wclub { color: #E08DA3; }
    .gd-table .gd-last { border-bottom-color: #ececec; }
    .gd-notes { border-top-color: #3a3a3a; }
    .gd-notes li, .gd-event li, .gd-event-card .lbl { color: #a8a8a8; }
    .gd-event-card { border-color: #3a3a3a; background: #1e1e1e; }
}


/* ============================================================
   로그인 — 혜택 안내 (member/login/login.jsp)
   ============================================================ */
/* 멤버십 혜택 안내 (시안 1a) — 로그인 폼 위 아이콘 4종.
   색은 우리 토큰(골드 #b79369 / 본문 #222 / 보조 #999)을 쓰고, 로그인 타이틀 여백만 줄인다. */
.lb-benefits { padding: 40px 0 0; text-align: center; word-break: keep-all; }
.lb-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: #b79369; margin-bottom: 10px; }
.lb-benefits h2 { font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: #222; margin-bottom: 26px; }
.lb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lb-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.lb-icon { width: 64px; height: 64px; border-radius: 50%; background: #F7F5F1; display: flex; align-items: center; justify-content: center; }
.lb-icon svg { width: 36px; height: 36px; }
.lb-name { font-size: 13px; font-weight: 600; color: #222; letter-spacing: -.01em; line-height: 1.4; }
.lb-desc { font-size: 11.5px; color: #999; margin-top: 4px; }
.lb-divider { height: 1px; background: #F2EFEB; margin-top: 32px; }
/* 혜택 섹션이 위에 오므로 로그인 타이틀의 큰 상단 여백(88px)은 줄인다 */
.lb-benefits + .login-title { padding-top: 36px; }

/* 좁은 화면에서는 4열이 글자를 쪼개므로 2열로 접는다 */
@media (max-width: 400px) {
    .lb-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}

/* Dark Mode (common.css 팔레트 준수).
   아이콘 선(#2f2c28)은 그대로 둔다 — 선이 모두 베이지 면 위에 놓여 있어 밝게 바꾸면 오히려 면에 묻힌다.
   원 배경만 어둡게 해 베이지 면이 드러나게 한다. */
@media (prefers-color-scheme: dark) {
    .lb-benefits h2, .lb-name { color: #ececec; }
    .lb-desc { color: #a8a8a8; }
    .lb-icon { background: #2a2a2a; }
    .lb-divider { background: #3a3a3a; }
}


/* ============================================================
   내 정보 — 수정 버튼 줄 (member/mypage/info.jsp)
   ============================================================ */
.info-row.no-border-bottom {
    border-bottom: none !important;
}

.info-row > .btn-group {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

#marriageEditBtnRow {
    padding-top: 0;
    border-top: none !important;
}

#marriageEditBtnRow .btn-group {
    display: flex;
    gap: 8px;
}

#childEditBtnRow {
    padding-top: 0;
    border-top: none !important;
}


/* ============================================================
   추천 내역 (member/mypage/referral.jsp)
   ============================================================ */
/* 내가 추천한 회원 (W포인트 내역과 동일한 베이지/골드 테마) */
.rf-desc {
    margin: 8px 30px 16px;
    padding: 12px 14px;
    background: #F7F3EC;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    /* 한글은 기본값이 어절 중간에서도 끊긴다 — .point-note 와 같이 어절 단위로 끊는다 */
    word-break: keep-all;
}

/* 총 인원 옆 탈퇴 인원 — 보조 정보라 한 톤 흐리게 */
.rf-withdrawn { color: #999; font-weight: 400; }

.rf-list { padding: 4px 0 40px; }
.rf-item {
    padding: 16px 30px;
    border-bottom: 1px solid #f0f0f0;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rf-item:first-child { border-top: 1px solid #f0f0f0; }
.rf-name { font-size: 15px; font-weight: 600; color: #222; }
/* 탈퇴·마스킹된 회원 */
.rf-name.unknown { font-weight: 500; color: #999; }
.rf-date { font-size: 13px; color: #999; flex: none; }

/* Dark Mode (common.css 팔레트 준수) */
@media (prefers-color-scheme: dark) {
    .rf-desc { background: #1e1e1e; color: #a8a8a8; }
    .rf-item, .rf-item:first-child { border-color: #3a3a3a; }
    .rf-name { color: #ececec; }
    .rf-name.unknown, .rf-date, .rf-withdrawn { color: #a8a8a8; }
}


/* ============================================================
   NEW 배지 (공지 목록 · 마이페이지 공지 슬라이드 공용)
   두 화면에 같은 값이 복사돼 있던 것을 한 벌로 합쳤다.
   ============================================================ */
.m-badge-new {
    background: #b79369; color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 9px; letter-spacing: 0.02em;
}
/* 마이페이지 공지 슬라이드에서만 — 제목이 길어도 배지가 눌리지 않게.
   :where() 라 명시도는 .m-badge-new 와 같다 (합치기 전 동작 그대로). */
:where(.mypage-main-refined) .m-badge-new { flex-shrink: 0; }


/* ============================================================
   공지 구분 태그 (공지 목록 · 공지 상세 공용)
   두 화면에 같은 값이 복사돼 있던 것을 한 벌로 합쳤다.
   구분 태그는 지금 마크업에서 주석 처리돼 있다 (2026-08 요청) — 되살릴 때 쓴다.
   ============================================================ */
.m-notice-cat {
    font-size: 11px; font-weight: 600; color: #b79369;
    padding: 2px 8px; border-radius: 9px;
    flex-shrink: 0;
}
/* 구분별 태그 색상 (기획 팔레트) */
.m-cat-general { background: #eaf1ff; color: #2f6fed; }
.m-cat-terms { background: #f3e8fd; color: #8a3fd9; }
.m-cat-event { background: #fff4e5; color: #c17a10; }
.m-cat-maintenance { background: #fdeceb; color: #d94a3d; }

/* Dark Mode (common.css 팔레트 준수) */
@media (prefers-color-scheme: dark) {
    .m-cat-general { background: rgba(47,111,237,0.18); color: #7eb3ff; }
    .m-cat-terms { background: rgba(138,63,217,0.18); color: #c99df2; }
    .m-cat-event { background: rgba(193,122,16,0.18); color: #e8b25f; }
    .m-cat-maintenance { background: rgba(217,74,61,0.18); color: #ff8d84; }
}


/* ============================================================
   공지 목록 (member/notice/list.jsp)
   ============================================================ */
    /* 사용자 공지 목록 (베이지/골드 테마) */
    .m-notice-list { padding: 8px 0 40px; }
    /* 목록 안에 있는 버튼이라 좌우 여백을 항목(.m-notice-item)과 맞춘다 */
    .m-notice-list .mp-load-more-wrap { padding: 14px 30px 0; }
    .m-notice-item {
        display: block;
        padding: 18px 30px;
        border-bottom: 1px solid #f0f0f0;
    }
    .m-notice-item:first-child { border-top: 1px solid #f0f0f0; }
    .m-notice-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
    .m-notice-date { font-size: 13px; color: #999; }
    .m-notice-title { font-size: 16px; font-weight: 600; color: #222; line-height: 1.4; }

    /* Dark Mode (common.css 팔레트 준수) */
@media (prefers-color-scheme: dark){
        .m-notice-item,
        .m-notice-item:first-child { border-color: #3a3a3a; }
        .m-notice-title { color: #ececec; }
        .m-notice-date { color: #a8a8a8; }
    }


/* ============================================================
   공지 상세 (member/notice/detail.jsp)
   ============================================================ */
    /* 사용자 공지 상세 (베이지/골드 테마) */
    .m-notice-detail { padding: 8px 30px 40px; }
    .m-notice-detail-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .m-notice-detail-date { font-size: 13px; color: #999; }

    /* 제목 오른쪽 끝의 전체목록 링크 (#17)
       float 로 두면 가운데 정렬된 제목의 줄 상자를 그만큼 좁혀서 "공지사항" 이 왼쪽으로 밀린다.
       흐름에서 완전히 빼내야 제목이 화면 가운데를 유지한다.
       top 보정: .page-title 은 위·아래 padding 이 달라서 50% 가 글자 중앙이 아니다.
                 차이의 절반만큼 내린다 (모바일 28/20 → +4px, PC 45/30 → +7.5px) */
:where(.mypage-notice-detail-refined) .page-title{ position: relative; }

    .m-notice-list-link {
        position: absolute;
        right: 0;
        top: calc(50% + 4px);
        transform: translateY(-50%);
        font-size: 13px; font-weight: 400; color: #8a6f4d; text-decoration: none;
    }

@media (min-width: 960px){
        .m-notice-list-link { top: calc(50% + 7.5px); }
    }

    .m-notice-detail-title {
        font-size: 20px; font-weight: 700; color: #222; line-height: 1.4;
        margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #222;
    }
    .m-notice-detail-body { font-size: 15px; color: #444; line-height: 1.8; word-break: break-word; }
    .m-notice-detail-empty { color: #999; text-align: center; padding: 48px 0; }
    .m-notice-detail-body img { max-width: 100%; height: auto; }
    .m-notice-detail-body p { margin: 0 0 12px; }

    /* Dark Mode (common.css 팔레트 준수) */
@media (prefers-color-scheme: dark){
        .m-notice-detail-title { color: #ececec; border-bottom-color: #3a3a3a; }
        .m-notice-detail-date { color: #a8a8a8; }
        .m-notice-detail-body { color: #c9c9c9; }
        .m-notice-detail-empty { color: #767676; }
    }


/* ============================================================
   마이페이지 메인 (member/mypage/main.jsp)
   ============================================================ */
    /* ============================================================
       마이페이지 개편안 1B (2026-09) — 프로필 카드 · 등급 트래커 · 공지 카드 · 회원 바코드 시트
       시안 색은 우리 토큰으로: 골드 면 #b79369 / 골드 글자 #8a6f4d / 본문 #222 / 카드 베이지 #F1EAE0 / 선 #EDE7DE
       카드가 page-content 안에 있어 좌우 여백은 page-content(모바일 20px)가 준다. 한글은 어절 단위로만 줄바꿈.
       ============================================================ */
    .mp-profile, .mp-grade-card, .mp-notice, .mp-sheet-box { word-break: keep-all; overflow-wrap: anywhere; }

    /* 프로필 카드 */
    .mp-profile { background: #F1EAE0; border-radius: 12px; padding: 20px; margin-top: 4px; display: flex; align-items: center; gap: 16px; }
    .mp-profile-body { flex: 1; min-width: 0; }
    .mp-profile-head { display: flex; align-items: center; gap: 9px; }
    /* 아바타 = 등급 이니셜. 누르면 등급 안내로 */
    .mp-grade-avatar {
        width: 26px; height: 26px; border-radius: 50%; background: #b79369; color: #fff;
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        font-size: 13px; font-weight: 800; letter-spacing: .02em; text-decoration: none;
    }
    /* ===== 등급 대표 컬러 (2026-09-04 확정) — 아래 4색이 정본 =====
       GOLD #7E756B · PRIME #3E7480 · VVIP #1B2440 · W-CLUB #6B2436
       같은 값을 쓰는 곳: 등급 안내 화면(gradeguide.jsp), 관리자 등급 배지(admin-common.css .badge-grade-*).
       색을 바꿀 때 세 곳을 함께 고쳐야 한다. */
    .mp-grade-avatar.mp-grade-gold  { background: #7E756B; }
    .mp-grade-avatar.mp-grade-prime { background: #3E7480; }
    .mp-grade-avatar.mp-grade-vvip  { background: #1B2440; }
    .mp-grade-avatar.mp-grade-wclub { background: #6B2436; }
    /* .mp-grade-name 이 뒤에서 자기 색(#8a6f4d)을 칠하는데 클래스 하나끼리는 우선순위가 같아
       나중에 오는 쪽이 이긴다 — 등급 색이 전부 묻혔다. 두 클래스를 겹쳐 우선순위를 올린다. */
    .mp-grade-name.mp-grade-text-gold  { color: #7E756B; }
    .mp-grade-name.mp-grade-text-prime { color: #3E7480; }
    .mp-grade-name.mp-grade-text-vvip  { color: #1B2440; }
    .mp-grade-name.mp-grade-text-wclub { color: #6B2436; }
    .mp-profile-name { font-size: 19px; font-weight: 700; color: #222; line-height: 1.2; }
    .mp-profile-point { display: block; font-size: 13px; color: #666; margin-top: 10px; }
    .mp-profile-point strong { color: #222; font-weight: 700; }
    .mp-profile-myinfo {
        display: inline-flex; align-items: center; margin-top: 14px; background: #b79369; color: #fff;
        border-radius: 18px; padding: 8px 15px; font-size: 12px; font-weight: 600; white-space: nowrap;
    }
    /* 회원 QR 썸네일 — 누르면 아래 시트 */
    .mp-qr-thumb { flex: none; background: none; border: none; padding: 0; text-align: center; cursor: pointer; }
    /* 여는 버튼의 타일 — 흰 바탕에 검정 코드로 테마와 무관하게 고정한다.
       QR 은 흑백이라는 인식이 강해서, 다크에서 색을 뒤집으면 코드가 아닌 다른 것으로 읽힌다.
       테두리는 두지 않는다 — 흰 바탕 자체가 이미 카드와 구분된다. */
    .mp-qr-box {
        display: flex; align-items: center; justify-content: center;
        width: 86px; height: 86px; box-sizing: border-box;
        border-radius: 12px;
        background: #fff;
        color: #222;
    }
    /* 86px 타일에 64px — 사방 11px 여백. 아이콘 자체에는 여백이 없으므로(장식이라 quiet zone 이
       필요 없다) 타일 안에서 너무 작아 보이지 않게 채운다. */
    .mp-qr-box svg { width: 64px; height: 40px; display: block; }   /* 1D 바코드 아이콘 (2026-09-28) */
    /* 색은 .mp-qr-box 의 color 하나로 정한다 — 테두리·눈·칸이 전부 currentColor 를 따라간다 */
    .mp-qr-frame { stroke: currentColor; }
    .mp-qr-eye,
    .mp-qr-cell { fill: currentColor; }

    /* 시트의 QR 은 <canvas> 다 (drawQr 주석 참고). 물리 픽셀 크기로 그려 두므로 CSS 는 박스에 맞추기만 한다.
       dpr 이 소수(2.625 등)면 반올림만큼 미세하게 늘어나는데, pixelated 가 그 경계를 회색으로 다듬지 않게 한다. */
    .mp-sheet-qr canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
    .mp-qr-caption { display: block; font-size: 11.5px; font-weight: 800; color: #9A8F7C; margin-top: 7px; }

    /* 회원 QR 시트 */
    .mp-sheet { position: fixed; inset: 0; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; justify-content: center; z-index: 1000; }
    .mp-sheet[hidden] { display: none; }
    .mp-sheet-box { width: 100%; max-width: 480px; background: #fff; border-radius: 18px 18px 0 0; padding: 22px 20px 28px; text-align: center; color-scheme: light; }
    .mp-sheet-head { display: flex; align-items: center; justify-content: space-between; }
    .mp-sheet-title { font-size: 15px; font-weight: 700; color: #222; }
    .mp-sheet-close { background: none; border: none; font-size: 22px; color: #9a9a9a; padding: 2px 6px; line-height: 1; cursor: pointer; }
    .mp-sheet-qr { width: 100%; height: 112px; margin: 18px auto 0; padding: 0; background: #fff; border: none; border-radius: 12px; overflow: hidden; }   /* 1D 바코드: 가로로 넓고 낮게, 테두리 없음 (2026-09-28 요청) */
    .mp-sheet-code { font-size: 18px; font-weight: 800; letter-spacing: 2px; color: #222; margin: 16px 0 0; }

    /* 남은 시간 + 새로고침 */
    .mp-qr-refresh { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
    /* 초가 9→10 처럼 자릿수가 바뀔 때 버튼이 흔들리지 않게 폭을 고정한다 */
    .mp-qr-timer { font-size: 12px; color: #8a8a8a; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
    .mp-qr-renew {
        background: #fff; border: 1px solid #d8d8d8; border-radius: 16px; padding: 6px 14px;
        font-size: 12px; font-weight: 600; color: #444; cursor: pointer;
    }
    .mp-qr-renew:active { background: #f2f2f2; }
    .mp-sheet-desc { font-size: 12px; color: #8a8a8a; margin: 8px 0 0; }

    /* 등급 트래커 카드 */
    .mp-grade-card { border: 1px solid #EDE7DE; border-radius: 12px; margin-top: 14px; padding: 22px 20px 24px; background: #fff; }
    .mp-grade-head { display: flex; align-items: center; justify-content: space-between; }
    .mp-grade-now { display: flex; align-items: center; gap: 8px; }
    .mp-grade-caption { font-size: 11px; color: #a5a5a5; }
    .mp-grade-name { font-size: 17px; font-weight: 800; letter-spacing: .03em; color: #8a6f4d; }
    .mp-grade-link { color: #a5a5a5; font-size: 12px; }
    .mp-tracker { margin-top: 22px; position: relative; padding-top: 50px; }
    /* 말풍선: left 를 마커 위치(%)와 같게 주고 꼬리 중심(9.5px)만큼 당긴다.
       마커가 트랙 가운데·오른쪽이면 카드 밖으로 나가므로 .center / .right 로 펼치는 방향을 바꾼다. */
    .mp-callout { position: absolute; top: 0; display: flex; flex-direction: column; align-items: flex-start; transform: translateX(-9.5px); }
    .mp-callout.center { align-items: center; transform: translateX(-50%); }
    .mp-callout.right { align-items: flex-end; transform: translateX(calc(-100% + 9.5px)); }
    .mp-callout-bubble {
        color: #fff; font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 9px;
        white-space: nowrap;
    }
    .mp-callout-bubble strong { font-weight: 800; }
    .mp-callout-tip { width: 9px; height: 9px; transform: rotate(45deg); margin: -5px 0 0 5px; border-radius: 1px; }
    .mp-callout.center .mp-callout-tip { margin: -5px 0 0; }
    .mp-callout.right .mp-callout-tip { margin: -5px 5px 0 0; }
    .mp-track { position: relative; height: 6px; background: #F1ECE4; border-radius: 3px; }
    .mp-track-fill { position: absolute; left: 0; top: 0; height: 6px; border-radius: 3px; }
    /* 아직 지나지 않은 정거장. 지나온 정거장은 .on 이 붙어 등급 색으로 칠해진다 */
    .mp-track-stop { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #E2DED6; transform: translate(-50%,-50%); }
    .mp-track-marker {
        position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid;
        transform: translate(-50%,-50%);
    }
    .mp-track-labels { position: relative; height: 18px; margin-top: 16px; }
    .mp-track-labels span { position: absolute; font-size: 12px; font-weight: 600; color: #C2BDB4; }
    /* 4단(임직원)에서는 라벨 4개가 좁은 폭에 들어가야 해 한 단계 줄인다 */
    .mp-stops-4 .mp-track-labels span { font-size: 11.5px; }
    .mp-track-labels span.c { transform: translateX(-50%); }
    .mp-track-labels span.on { font-weight: 800; }

    /* 트래커 색 = 현재 등급의 대표 컬러 (시안 v2). 트랙·지나온 정거장·마커·말풍선을 한 색으로 묶는다 */
    .mp-track-gold  .mp-track-fill, .mp-track-gold  .mp-track-stop.on,
    .mp-track-gold  .mp-callout-bubble, .mp-track-gold  .mp-callout-tip { background: #7E756B; }
    .mp-track-gold  .mp-track-marker { border-color: #7E756B; box-shadow: 0 0 0 4px rgba(126,117,107,.20); }
    .mp-track-gold  .mp-track-labels span.on { color: #7E756B; }

    .mp-track-prime .mp-track-fill, .mp-track-prime .mp-track-stop.on,
    .mp-track-prime .mp-callout-bubble, .mp-track-prime .mp-callout-tip { background: #3E7480; }
    .mp-track-prime .mp-track-marker { border-color: #3E7480; box-shadow: 0 0 0 4px rgba(62,116,128,.20); }
    .mp-track-prime .mp-track-labels span.on { color: #3E7480; }

    .mp-track-vvip  .mp-track-fill, .mp-track-vvip  .mp-track-stop.on,
    .mp-track-vvip  .mp-callout-bubble, .mp-track-vvip  .mp-callout-tip { background: #1B2440; }
    .mp-track-vvip  .mp-track-marker { border-color: #1B2440; box-shadow: 0 0 0 4px rgba(27,36,64,.20); }
    .mp-track-vvip  .mp-track-labels span.on { color: #1B2440; }

    .mp-track-wclub .mp-track-fill, .mp-track-wclub .mp-track-stop.on,
    .mp-track-wclub .mp-callout-bubble, .mp-track-wclub .mp-callout-tip { background: #6B2436; }
    .mp-track-wclub .mp-track-marker { border-color: #6B2436; box-shadow: 0 0 0 4px rgba(107,36,54,.20); }
    .mp-track-wclub .mp-track-labels span.on { color: #6B2436; }
    .mp-grade-msg { font-size: 13px; color: #444; margin: 16px 0 0; }
    .mp-grade-note { font-size: 11.5px; color: #999; margin: 14px 0 0; }

    /* 공지사항 카드 캐러셀 */
    .mp-notice { background: #F8F5F0; border: 1px solid #EDE7DE; border-radius: 12px; margin-top: 14px; padding: 16px; }
    .mp-notice-head { display: flex; align-items: center; justify-content: space-between; }
    .mp-notice-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #222; }
    .mp-notice-more { font-size: 12px; color: #8a6f4d; }
    .mp-notice-viewport { overflow: hidden; margin-top: 10px; }
    .mp-notice-track { display: flex; transition: transform .45s ease; }
    .mp-notice-slide { width: 100%; flex-shrink: 0; min-width: 0; display: block; text-decoration: none; }
    /* NEW(있을 때) · 제목 · 날짜. 제목만 늘어나고 줄어들어, 길면 제목이 말줄임 되고
       NEW 와 날짜는 온전히 남는다. 날짜는 제목 바로 뒤가 아니라 오른쪽 끝에 붙는다. */
    .mp-notice-slide-head { display: flex; align-items: center; gap: 8px; }
    .mp-notice-date { font-size: 12px; color: #999; white-space: nowrap; }
    .mp-notice-slide-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* 날짜를 오른쪽 끝으로 — 제목이 짧아도 자리가 흔들리지 않는다 */
    .mp-notice-slide-head .mp-notice-date { margin-left: auto; }
    .mp-notice-slide-body {
        font-size: 13px; color: #777; margin-top: 4px; line-height: 1.55;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .mp-notice-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
    .mp-notice-arrow { background: none; border: none; color: #999; font-size: 15px; padding: 2px 6px; line-height: 1; cursor: pointer; }
    .mp-notice-dots { display: flex; gap: 5px; }
    .mp-notice-dot { width: 5px; height: 5px; border-radius: 50%; background: #D8CDB9; }
    .mp-notice-dot.on { background: #b79369; }

    /* Dark Mode (common.css 팔레트 준수) — 바코드 시트는 스캐너용이라 항상 밝게 둔다 */
@media (prefers-color-scheme: dark){
        .mp-profile { background: #1e1e1e; }
        .mp-profile-name { color: #ececec; }
        .mp-profile-point { color: #a8a8a8; }
        .mp-profile-point strong { color: #E8D6AE; }
        .mp-qr-caption { color: #a8a8a8; }
        /* .mp-qr-box 는 여기서 뒤집지 않는다 — QR 은 흑백이라는 인식이 강해서
           다크에서도 흰 바탕·검정 코드를 유지한다 (밝은 테마 규칙 그대로 쓴다). */
        .mp-grade-card { background: #1e1e1e; border-color: #3a3a3a; }
        /* 등급 대표 컬러는 어두운 색이라 다크 배경(#1e1e1e)에서 글자로 쓰면 묻힌다.
           색상(hue)은 유지하고 밝기와 함께 <b>채도를 올린</b> 톤으로 바꾼다 —
           단순히 흰색을 섞어 밝히면 GOLD(채도 8%)·PRIME 이 회백색이 되어 서로 구별되지 않는다.
           GOLD #7E756B→#C4A882(탠) · PRIME #3E7480→#62B0B8(틸) · VVIP #1B2440→#98A4E6(페리윙클) · W-CLUB #6B2436→#E08DA3(로즈) */
        /* 밝은 화면 규칙과 같은 우선순위여야 한다 — 한쪽만 두 클래스로 두면 다크에서 색이 안 바뀐다 */
        .mp-grade-name.mp-grade-text-gold  { color: #C4A882; }
        .mp-grade-name.mp-grade-text-prime { color: #62B0B8; }
        .mp-grade-name.mp-grade-text-vvip  { color: #98A4E6; }
        .mp-grade-name.mp-grade-text-wclub { color: #E08DA3; }
        /* 아바타도 같은 이유로 뒤집는다 — 밝은 톤 원 + 어두운 글자 */
        .mp-grade-avatar { color: #1F1F1F; }
        .mp-grade-avatar.mp-grade-gold  { background: #C4A882; }
        .mp-grade-avatar.mp-grade-prime { background: #62B0B8; }
        .mp-grade-avatar.mp-grade-vvip  { background: #98A4E6; }
        .mp-grade-avatar.mp-grade-wclub { background: #E08DA3; }
        .mp-grade-caption, .mp-grade-link, .mp-grade-note, .mp-grade-msg { color: #a8a8a8; }
        .mp-track { background: #2a2a2a; }
        .mp-track-stop { background: #3a3a3a; }
        .mp-track-marker { background: #1e1e1e; }
        .mp-track-labels span { color: #6a6a6a; }
        /* 트래커도 같은 밝은 톤으로 — 대표 컬러 그대로면 트랙(#2a2a2a)·카드와 구별되지 않는다.
           말풍선은 면이 밝아지므로 글자를 어둡게 뒤집는다. */
        .mp-callout-bubble { color: #1F1F1F; }
        .mp-track-gold  .mp-track-fill, .mp-track-gold  .mp-track-stop.on,
        .mp-track-gold  .mp-callout-bubble, .mp-track-gold  .mp-callout-tip { background: #C4A882; }
        .mp-track-gold  .mp-track-marker { border-color: #C4A882; box-shadow: 0 0 0 4px rgba(196,168,130,.18); }
        .mp-track-gold  .mp-track-labels span.on { color: #C4A882; }

        .mp-track-prime .mp-track-fill, .mp-track-prime .mp-track-stop.on,
        .mp-track-prime .mp-callout-bubble, .mp-track-prime .mp-callout-tip { background: #62B0B8; }
        .mp-track-prime .mp-track-marker { border-color: #62B0B8; box-shadow: 0 0 0 4px rgba(98,176,184,.18); }
        .mp-track-prime .mp-track-labels span.on { color: #62B0B8; }

        .mp-track-vvip  .mp-track-fill, .mp-track-vvip  .mp-track-stop.on,
        .mp-track-vvip  .mp-callout-bubble, .mp-track-vvip  .mp-callout-tip { background: #98A4E6; }
        .mp-track-vvip  .mp-track-marker { border-color: #98A4E6; box-shadow: 0 0 0 4px rgba(152,164,230,.18); }
        .mp-track-vvip  .mp-track-labels span.on { color: #98A4E6; }

        .mp-track-wclub .mp-track-fill, .mp-track-wclub .mp-track-stop.on,
        .mp-track-wclub .mp-callout-bubble, .mp-track-wclub .mp-callout-tip { background: #E08DA3; }
        .mp-track-wclub .mp-track-marker { border-color: #E08DA3; box-shadow: 0 0 0 4px rgba(224,141,163,.18); }
        .mp-track-wclub .mp-track-labels span.on { color: #E08DA3; }
        .mp-notice { background: #1e1e1e; border-color: #3a3a3a; }
        .mp-notice-title, .mp-notice-slide-title { color: #ececec; }
        .mp-notice-date, .mp-notice-slide-body, .mp-notice-arrow { color: #a8a8a8; }
        .mp-notice-more { color: #E8D6AE; }
        .mp-notice-dot { background: #3a3a3a; }
        .mp-notice-dot.on { background: #b79369; }
    }


/* ============================================================
   마이페이지 포인트 (member/mypage/point.jsp)
   ============================================================ */
    /* W포인트 내역 (베이지/골드 테마) */
    .pt-balance {
        display: flex; align-items: center; justify-content: space-between;
        margin: 8px 30px 16px;
        padding: 16px 18px;
        background: #F7F3EC;
        border-radius: 10px;
    }
    .pt-balance-label { font-size: 14px; font-weight: 600; color: #666; }
    .pt-balance-value { font-size: 20px; font-weight: 700; color: #b79369; }

    .pt-list { padding: 4px 0 40px; }
    .pt-list .mp-load-more-wrap { padding: 8px 30px 0; }
    .pt-item {
        padding: 16px 30px;
        border-bottom: 1px solid #f0f0f0;
        display: flex; flex-direction: column; gap: 6px;
    }
    .pt-item:first-child { border-top: 1px solid #f0f0f0; }
    .pt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .pt-date { font-size: 13px; color: #999; }
    .pt-amount { font-size: 16px; font-weight: 700; }
    .pt-amount.plus { color: #D6362B; }
    .pt-amount.minus { color: #999; }
    .pt-type { font-size: 15px; font-weight: 600; color: #222; }
    .pt-expiry { font-size: 12px; color: #999; }

    /* 탭을 링크로 쓰는 경우 밑줄 제거 */
:where(.mypage-points-refined) .coupon-tabs a.tab-item{ text-decoration: none; }

    /* 기간 버튼을 링크로 쓰므로 버튼과 같은 모양 유지 */
:where(.mypage-points-refined) .period-filter a.period-btn{ text-decoration: none; }

    /* 기간조회 — 프리셋 버튼 줄 아래에 펼쳐진다. 다크모드에서도 읽히도록 색을 같이 정한다 */
    .pt-range { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
    .pt-range input[type="date"] {
        flex: 1 1 132px; min-width: 0; height: 40px; padding: 0 10px;
        border: 1px solid #E2E2E2; border-radius: 6px;
        background: #fff; color: #222; font-size: 14px;
    }
    .pt-range-dash { color: #999; }
    .pt-range-btn {
        height: 40px; padding: 0 16px; border: 0; border-radius: 6px;
        background: #222; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
    }
@media (prefers-color-scheme: dark){
        .pt-range input[type="date"] { background: #1e1e1e; border-color: #3a3a3a; color: #ececec; }
        .pt-range-dash { color: #a8a8a8; }
        .pt-range-btn { background: #ececec; color: #121212; }
    }

    /* 구매 연동 내역의 주문 링크 (#19) */
    .pt-order-link { font-size: 12.5px; color: #8a6f4d; text-decoration: none; }
    .pt-order-link:active { opacity: .7; }

    /* Dark Mode (common.css 팔레트 준수) */
@media (prefers-color-scheme: dark){
        .pt-balance { background: #1e1e1e; }
        .pt-balance-label { color: #a8a8a8; }
        .pt-item, .pt-item:first-child { border-color: #3a3a3a; }
        .pt-type { color: #ececec; }
        .pt-date, .pt-expiry { color: #a8a8a8; }
        .pt-amount.minus { color: #a8a8a8; }
        .pt-order-link { color: #c9a97e; }
    }

/* ============================================================
   마이페이지 임직원 리워드 (member/mypage/employeereward.jsp, main.jsp 프로필 한 줄) — 2026-10-07
   퍼블리싱 reward.zip(reward-pub.css 의 [회원 본문])에서 이 화면이 쓰는 규칙만 옮겼다.
   W포인트(베이지 #F7F3EC / 골드 #b79369)와 구분되는 초록 — 포인트가 아니라 현금이라는 것이 색으로도 읽히게.
   라이트 #EEF7F0 · #1F8A4C / 다크 #1b2a20 · #7fd19a. 지급 예정은 호박(#FFF4E5 · #B26A00).
   ============================================================ */
    /* 메인 프로필 — 줄 끝의 › (누르면 내역으로 간다는 표시). 임직원 리워드 줄은 금액만 리워드 색 */
    .mp-profile-point .mp-profile-arrow { margin-left: 3px; color: #9A8F7C; font-size: 15px; line-height: 1; }
    .mp-profile-point.mp-profile-reward strong { color: #1F8A4C; }

    /* 위 요약 — W포인트 내역의 .pt-balance 와 같은 자리·모양. 가장 최근 행사의 지급 예정 */
    .cr-balance {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        margin: 8px 30px 16px;
        padding: 16px 18px;
        background: #EEF7F0;
        border-radius: 10px;
    }
    .cr-balance-label { font-size: 14px; font-weight: 600; color: #3d6b4b; word-break: keep-all; }
    .cr-balance-value { font-size: 20px; font-weight: 700; color: #1F8A4C; white-space: nowrap; }

    /* 행사 목록 — 한 줄 = 행사 하나. 누르면 아래로 건별 내역이 펼쳐진다 (아코디언) */
    .cr-events { margin: 4px 30px 40px; }
    .cr-event { border-bottom: 1px solid #f0f0f0; }
    .cr-event:first-child { border-top: 1px solid #f0f0f0; }
    .cr-event-head {
        display: flex; align-items: center; gap: 12px;
        width: 100%; min-height: 64px; padding: 14px 0;
        border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
    }
    .cr-event-main { flex: 1; min-width: 0; }
    .cr-event-name { display: block; font-size: 15px; font-weight: 700; color: #222; word-break: keep-all; }
    .cr-event-period { display: block; margin-top: 3px; font-size: 12px; color: #999; }
    .cr-event-sum { flex: none; text-align: right; }
    .cr-event-sum b { display: block; font-size: 15px; font-weight: 700; color: #1F8A4C; white-space: nowrap; }
    .cr-event-sum.is-paid b { color: #555; }
    .cr-event-state { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 5px; }
    .cr-event-sub { font-size: 11.5px; color: #999; white-space: nowrap; }
    /* 화살표 — 펼치면 뒤집힌다 */
    .cr-event-arrow { flex: none; width: 8px; height: 8px; margin: -4px 4px 0 2px; border-right: 1.5px solid #999; border-bottom: 1.5px solid #999; transform: rotate(45deg); transition: transform .15s; }
    .cr-event.is-open .cr-event-arrow { transform: rotate(225deg); margin-top: 4px; }
    .cr-event-body { padding: 0 0 6px 12px; border-left: 2px solid #EEF7F0; margin-bottom: 10px; }
    .cr-event .pt-item { padding: 12px 0; }
    .cr-event .pt-item:first-child { border-top: 0; }
    .cr-event .pt-item:last-child { border-bottom: 0; }
    .cr-empty { padding: 14px 0; font-size: 13px; color: #999; }

    /* 건별 줄 — .pt-item/.pt-row/.pt-date/.pt-type 재사용. 금액 색만 리워드용으로 바꾼다 */
    .pt-amount.cr-plus { color: #1F8A4C; }                  /* 지급 예정 — 받을 돈 */
    .pt-amount.cr-paid { color: #555; }                     /* 지급 완료 — 끝난 건 */
    .pt-amount.cr-muted { color: #bbb; font-weight: 600; }  /* 확정 대기 — 아직 확정 아님, 합계 미포함 */
    .pt-amount.cr-strike { color: #bbb; font-weight: 600; text-decoration: line-through; }   /* 취소 — 합계 미포함 (시안) */

    /* 상태 칩 — 행사 줄 오른쪽, 건별 줄 둘째 줄 오른쪽 (.pt-expiry 자리) */
    .cr-chip {
        display: inline-flex; align-items: center;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 11.5px;
        font-weight: 600;
        white-space: nowrap;
    }
    .cr-chip.is-unpaid { background: #FFF4E5; color: #B26A00; }
    .cr-chip.is-paid { background: #EEF7F0; color: #1F8A4C; }
    .cr-chip.is-pending { background: #f0f0f0; color: #777; }
    .cr-chip.is-canceled { background: #f0f0f0; color: #999; text-decoration: line-through; }

    /* 모바일 — page-content 가 좌우 20px 을 주므로 안쪽 여백을 뺀다 (.mypage-points-refined .pt-balance 와 같은 보정) */
@media (max-width: 959px) {
        .mypage-points-refined .cr-balance { margin: 4px 0 16px; }
        .mypage-points-refined .cr-events { margin: 4px 0 32px; }
        .mypage-points-refined .cr-event .pt-item { padding: 12px 0; }
    }

    /* Dark Mode (common.css 팔레트 준수) */
@media (prefers-color-scheme: dark) {
        .mp-profile-point .mp-profile-arrow { color: #a8a8a8; }
        .mp-profile-point.mp-profile-reward strong { color: #7fd19a; }
        .cr-balance { background: #1b2a20; }
        .cr-balance-label { color: #a8c7b0; }
        .cr-balance-value { color: #7fd19a; }
        .cr-event, .cr-event:first-child { border-color: #3a3a3a; }
        .cr-event-name { color: #ececec; }
        .cr-event-period, .cr-event-sub, .cr-empty { color: #a8a8a8; }
        .cr-event-sum b { color: #7fd19a; }
        .cr-event-sum.is-paid b { color: #cfcfcf; }
        .cr-event-arrow { border-color: #a8a8a8; }
        .cr-event-body { border-left-color: #1b2a20; }
        .pt-amount.cr-plus { color: #7fd19a; }
        .pt-amount.cr-paid { color: #cfcfcf; }
        .pt-amount.cr-muted, .pt-amount.cr-strike { color: #6a6a6a; }
        .cr-chip.is-unpaid { background: #3a2e1a; color: #f0b35a; }
        .cr-chip.is-paid { background: #1b2a20; color: #7fd19a; }
        .cr-chip.is-pending, .cr-chip.is-canceled { background: #2a2a2a; color: #a8a8a8; }
    }

/* ============================================================================
   마이페이지 인라인 style 속성 정리 (2026-09-28) — 마크업에 있던 선언을 옮겼다.
   처음 숨김은 공통 .d-none (common.css, !important) 으로 두고 스크립트가 클래스를 켜고 끈다.
   인라인은 어떤 규칙보다 우선했으므로, 여기 규칙이 다른 규칙에 밀리지 않는지 계산된 스타일로 대조했다.
   ============================================================================ */

/* 회원정보 — 아이디가 길어도 칸 안에서 줄을 바꾼다 */
.info-value--break-all { word-break: break-all; }

/* 마이페이지 등급 막대 — 위치는 서버가 계산한 퍼센트라 마크업에는 값(--mp-pos)만 남긴다 */
.mp-callout,
.mp-track-stop,
.mp-track-marker,
.mp-track-labels span.c { left: var(--mp-pos, 0); }
.mp-track-fill { width: var(--mp-pos, 0); }
.mp-track-labels span.start { left: 0; }
.mp-track-labels span.end { right: 0; }

/* 쿠폰 바코드 전체 화면 (마이페이지 메인·쿠폰함 공용, coupon_barcode.jspf) — 다크모드에서도 밝게 */
.barcode-overlay {
    position: fixed; inset: 0; z-index: 10000; background: #fff; color-scheme: light;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px; text-align: center;
}
.barcode-close {
    position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: none;
    background: none; font-size: 28px; line-height: 1; color: #666; cursor: pointer;
}
.barcode-coupon-name { margin: 0 0 20px; font-size: 16px; color: #333; word-break: keep-all; }
.barcode-canvas { display: block; width: 100%; max-width: 480px; height: 120px; image-rendering: pixelated; }
.barcode-serial { margin: 14px 0 0; font-size: 20px; letter-spacing: 2px; color: #111; }
.barcode-hint { margin: 32px 0 0; font-size: 13px; color: #999; }