/* Pretendard @font-face는 /static/fonts/pretendard.css(dynamic-subset 92 chunk)로 이관.
   동일 family 'Pretendard'을 unicode-range별 woff2 청크에서 lazy-load 한다. */

:root {
    /* brand */
    --primary: #5b4058;
    --primary-sub: #9d6ca2;
    --primary-50: #fef4ff;
    --primary-100: #ffeffe;
    --primary-150: #fef7ff;
    --primary-200: #ffebef;

    /* accent */
    --accent-red: #FF0000;

    /* grey scale */
    --grey-900: #141519;
    --grey-700: #212121;
    --grey-600: #767676;
    --grey-500: #8e8e8e;
    --grey-400: #9e9e9e;
    --grey-300: #bdbdbd;
    --grey-250: #c5c7c8;
    --grey-200: #e0e0e0;
    --grey-180: #e7e7e7;
    --grey-150: #ebebeb;
    --grey-130: #d9d9d9;
    --grey-100: #eeeeee;
    --grey-80: #f3f3f3;
    --grey-60: #f5f5f5;
    --white: #ffffff;

    /* typography */
    --font-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;

    /* radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-pill: 100px;

    /* height */
    --btn-h-s: 40px;
    --btn-h-m: 46px;
    --btn-h-l: 50px;

    /* layout */
    --frame-max: 500px;
    --frame-base: 360px;

    /* radio (공통) */
    --radio-svg-off: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7.25' stroke='%23BDBDBD' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    --radio-svg-on: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8' fill='%239D6CA2'/%3E%3Ccircle cx='10' cy='10' r='4' fill='white'/%3E%3C/svg%3E");
}

/* reset */
* { box-sizing: border-box; }
html, body {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background: #f2f2f2;
}
body {
    display: flex;
    justify-content: center;
    font-family: var(--font-base);
    color: var(--grey-700);
    font-size: 16px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: transparent; cursor: pointer; padding: 0; }
input, textarea, select { font-family: inherit; }
img { display: block; max-width: 100%; }

/* mobile frame */
.mobile_frame {
    position: relative;
    width: 100%;
    max-width: var(--frame-max);
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--white);
    overflow-x: clip;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* skip nav */
.skip_nav {
    position: absolute;
    top: -9999px;
    left: 0;
}
.skip_nav:focus {
    top: 0;
    z-index: 9999;
    padding: 8px 16px;
    background: #000;
    color: #fff;
}
.sr_only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* =========================
   Typography
========================= */
.heading_04 { font-size: 20px; line-height: 30px; font-weight: 700; }
.subtitle_01 { font-size: 16px; line-height: 24px; font-weight: 700; }
.subtitle_02 { font-size: 14px; line-height: 21px; font-weight: 700; }
.body_02 { font-size: 16px; line-height: 24px; font-weight: 400; }
.body_02--semi { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.32px; }
.body_03 { font-size: 14px; line-height: 21px; font-weight: 400; }
.body_04 { font-size: 12px; line-height: 18px; font-weight: 400; }
.txt_primary { color: var(--primary-sub); }
.txt_accent { color: var(--accent-red); }
.txt_grey { color: var(--grey-600); }

/* =========================
   Header (상단 바)
========================= */
.app_header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    background: var(--white);
}
.app_header__back {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
}
.app_header__title {
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: var(--grey-700);
    margin-left: 12px;
}
.app_header--center .app_header__title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    pointer-events: none;
}
/* 이벤트 상세 — 풀 와이드 이미지 */
.event_detail__img { width: 100%; }
.event_detail__img img { display: block; width: 100%; height: auto; }
.app_header__right {
    margin-left: auto;
    display: inline-flex; gap: 16px; align-items: center;
}

/* =========================
   Bottom Tab Bar
========================= */
.tab_bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--frame-max);
    height: 60px;
    background: var(--white);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -1px 10.6px rgba(88, 88, 88, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 90;
}
.tab_bar__item {
    flex: 1;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--grey-700);
    font-size: 12px;
    line-height: 18px;
}
.tab_bar__item.is-active { color: var(--primary); }
.tab_bar__icon { width: 20px; height: 20px; position: relative; }
.tab_bar__dot {
    /* 주문내역 아이콘 기준 left:-7 top:-4 (좌상단 바깥) */
    position: absolute;
    top: -4px;
    left: -7px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--primary-sub);
}

/* =========================
   Buttons
========================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.btn--block { width: 100%; }
.btn--m { height: var(--btn-h-m); padding: 0 20px; font-size: 16px; }
.btn--l { height: var(--btn-h-l); padding: 0 20px; font-size: 16px; }
.btn--s { height: var(--btn-h-s); padding: 0 12px; font-size: 14px; }

.btn-primary {
    background: var(--primary);
    color: var(--white);
}
.btn-primary:disabled, .btn-primary.is-disabled {
    background: #d9d9d9;
    color: var(--white);
    cursor: not-allowed;
}
.btn-outline-primary {
    background: var(--white);
    color: var(--primary);
    border: 1px solid var(--primary);
}
.btn-outline-primary-fill {
    background: var(--primary-100);
    color: var(--grey-700);
    border: 1px solid transparent;
    font-weight: 400;
}
.btn-outline-grey {
    background: var(--white);
    color: var(--grey-700);
    border: 1px solid var(--grey-300);
    font-weight: 400;
}
.btn-filled-dark {
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-xs);
}
.btn-dark {
    background: #212121;
    color: var(--white);
}
.btn-dark:disabled, .btn-dark.is-disabled {
    background: #d9d9d9;
    color: var(--white);
    cursor: not-allowed;
}
.btn-outline-card {
    background: var(--white);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-xs);
    height: 40px;
    font-weight: 400;
    font-size: 14px;
}

/* =========================
   Badges
========================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
}
.badge--discount { background: var(--accent-red); color: var(--white); }
.badge--people { background: var(--primary-200); color: var(--primary); }
.badge--dday {
    background: var(--white);
    color: var(--accent-red);
    border: 1px solid var(--grey-200);
    padding: 4px 8px;
}
.badge--status {
    background: var(--grey-700);
    color: var(--white);
    border-radius: var(--radius-xs);
    padding: 1px 6px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

/* =========================
   Input / Textarea
========================= */
.input-label {
    display: block;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    margin-bottom: 6px;
}
.input-field {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    outline: none;
}
.input-field::placeholder { color: var(--grey-300); }
.input-field:focus { border-color: var(--primary-sub); }
.input-field.is-error { border-color: var(--accent-red); }
.textarea-field:focus,
.rv_field__textarea:focus,
.return_reason__textarea:focus,
.cf_reason__textarea:focus { border-color: var(--primary-sub); outline: none; }

.input-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.textarea-field {
    width: 100%;
    min-height: 300px;
    padding: 12px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 16px;
    line-height: 24px;
    resize: none;
    outline: none;
}
.textarea-field::placeholder { color: #a2a2a2; }

.form-text { display: block; margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--grey-600); }
.form-text--error { color: var(--accent-red); }
.form-text--success { color: var(--primary-sub); }

/* =========================
   Checkbox / Radio
========================= */
.form-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
}
.form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border: 1.5px solid var(--grey-300);
    border-radius: 4px;
    background: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.form-check-input:checked {
    background: #f0c34c;
    border-color: #f0c34c;
}
.form-check-input:checked::after {
    content: "";
    width: 10px; height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.form-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border: none;
    background: var(--radio-svg-off) no-repeat center / 16px 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.form-radio:checked {
    background: var(--radio-svg-on) no-repeat center / 16px 16px;
}

/* =========================
   Tag (filter)
========================= */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: var(--white);
    border: 1px solid var(--grey-180);
    font-size: 16px;
    color: var(--grey-700);
}
.tag.is-active {
    background: var(--primary-150);
    border-color: var(--primary-sub);
}
.tag__caret { width: 20px; height: 20px; transform: rotate(-90deg); display: inline-block; }

/* =========================
   Toggle
========================= */
.toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__slider {
    position: absolute; inset: 0;
    background: var(--grey-200);
    border-radius: var(--radius-pill);
    transition: background .2s;
}
.toggle__slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 16px; height: 16px;
    background: var(--white);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: left .2s;
}
.toggle input:checked + .toggle__slider { background: var(--primary-sub); }
.toggle input:checked + .toggle__slider::before { left: 22px; }

/* =========================
   Divider
========================= */
.divider_block {
    height: 10px;
    background: var(--grey-80);
    width: 100%;
}
.divider_line {
    height: 1px;
    background: var(--grey-130);
    width: 100%;
}
.divider_dashed {
    height: 0;
    border-top: 1px dashed var(--grey-600);
    width: 100%;
}

/* =========================
   Section head
========================= */
.section_head {
    height: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
}
.section_head__title { font-size: 20px; line-height: 30px; font-weight: 700; color: var(--grey-700); }
.section_head__count { color: var(--primary-sub); font-weight: 700; margin-left: 8px; }

/* =========================
   Product card (detail list)
========================= */
.prod_card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.prod_card__thumb {
    position: relative;
    width: 100%;
    height: 170px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--grey-500);
}
.prod_card__thumb > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.prod_card__overlay {
    position: absolute;
    left: 10px; top: 6px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.prod_card__actions {
    position: absolute;
    right: 10px; bottom: 10px;
    display: flex;
    gap: 12px;
}
.prod_card__actions .ic {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 6px rgba(0,0,0,.4));
}
.prod_card__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.32px;
    color: var(--grey-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod_card__price {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.prod_card__price_now {
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
}
.prod_card__price_origin {
    font-size: 14px; line-height: 21px;
    color: var(--accent-red);
    text-decoration: line-through;
}

/* =========================
   Category circles (menu_01)
========================= */
.cate_list {
    display: flex;
    gap: 20px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cate_list::-webkit-scrollbar { display: none; }
.cate_item {
    flex: 0 0 auto;
    width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.cate_item__thumb {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--white);
    overflow: hidden;
    position: relative;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
}
.cate_item__thumb img {
    position: absolute;
    top: 50%; left: 50%;
    width: 56px; height: 56px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    object-fit: cover;
}
.cate_item__label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px; line-height: 21px;
    font-weight: 400;
    text-align: center;
    color: var(--grey-700);
}
.cate_item.is-active .cate_item__thumb {
    border: 1.5px solid transparent;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(125.56deg, #ffebef 1.85%, #c93778 41.22%, #631b3b 91.43%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.cate_item.is-active .cate_item__label {
    color: #80244d;
    font-weight: 700;
}

/* julgitalk variant — active item(전체)만 #FFB740 outline, 홈 cate 그라데이션 보더와 분리 */
.cate_list--julgi .cate_item__thumb {
    outline: none;
    border: 1px solid #ebebeb;
    background: var(--white);
    background-image: none;
}
.cate_list--julgi .cate_item.is-active .cate_item__thumb {
    border: 1.5px solid transparent;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(135deg, #fff302 0%, #ffb740 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    outline: none;
}
.cate_list--julgi .cate_item__label {
    color: var(--grey-700);
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    text-align: center;
}
.cate_list--julgi .cate_item.is-active .cate_item__label {
    color: #FFB740;
    font-weight: 700;
}

/* =========================
   Dropdown list (sort menu)
========================= */
.dropdown_list {
    width: 200px;
    background: var(--white);
    border: 1px solid var(--grey-180);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 11.2px rgba(0,0,0,0.25);
    overflow: hidden;
}
.dropdown_list__item {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--grey-700);
    background: transparent;
    text-align: left;
    border: 0;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.dropdown_list__item:hover,
.dropdown_list__item.is-active {
    background: var(--primary-50);
    color: var(--primary);
    font-weight: 700;
}
/* 고객 6.8 F1: 정렬 드롭다운은 적용된(선택) 항목도 기본 흰색 유지하고, 마우스 오버 시에만 분홍.
   (#sortDropdown=홈/공구예정 정렬, #julgiSortDropdown=줄기톡 리스트 정렬) */
#sortDropdown .dropdown_list__item.is-active:not(:hover),
#julgiSortDropdown .dropdown_list__item.is-active:not(:hover) {
    background: transparent;
    color: var(--grey-700);
    font-weight: 400;
}

/* =========================
   Option row (상품 옵션 표시)
========================= */
.option_row {
    width: 320px;
    height: 48px;
    padding: 0 12px;
    background: var(--grey-60);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}
.option_row__label { font-weight: 700; color: var(--grey-700); flex-shrink: 0; }
.option_row__value {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--grey-700);
    flex: 1;
    min-width: 0;
}
.option_row__value > :first-child {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.option_row__sep { color: #d4d4d4; }
.option_row__more { color: #aaa; flex-shrink: 0; font-weight: 400; }
.option_row__arrow {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--grey-700);
    transition: transform 0.15s ease;
}
.option_row__arrow.is-open { transform: rotate(180deg); }
.option_row.is-open {
    height: auto;
    min-height: 48px;
    align-items: flex-start;
    padding: 12px;
}
.option_row.is-open .option_row__label { line-height: 24px; }
.option_row.is-open .option_row__value {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.option_row.is-open .option_row__value > :first-child {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.option_row__line {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    color: var(--grey-700);
    font-weight: 400;
}
.option_row__line > .option_row__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.option_row__line > .option_row__qty { flex-shrink: 0; }
/* 펼침 첫 행만 옵션명 2줄까지 wrap */
.option_row.is-open .option_row__line--head { align-items: flex-start; }
.option_row.is-open .option_row__line--head > .option_row__name {
    white-space: normal;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 24px;
    max-height: 48px;
}
.option_row.is-open .option_row__line--head > .option_row__arrow { margin-top: 4px; }
/* sub-line의 우측이 head의 qty(=arrow 앞)와 정렬되도록 arrow(16px)+gap(12px) 만큼 우측 여백 */
.option_row.is-open .option_row__line:not(.option_row__line--head) { padding-right: 28px; }

/* =========================
   Payment method (결제수단)
========================= */
.pay_option { display: flex; align-items: center; gap: 8px; }
.pay_option__btn {
    width: 155px;
    height: 40px;
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 700;
}
.pay_option__btn--toss { background: #dae9fe; color: #000; justify-content: center; }
.pay_option__btn--naver { background: #00de5a; color: #000; justify-content: center; }
.pay_option__btn--samsung { background: #0c4dac; color: #fff; justify-content: center; }
.pay_option__btn--kakao { background: #ffe000; color: #000; justify-content: center; }
.pay_option__btn--img {
    background: transparent;
    padding: 0;
    width: 155px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--radius-xs);
}
.pay_option__btn--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pay_option_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pay_option_card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
}
.pay_option_card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pay_option_card__change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    background: var(--white);
    border: 1px solid #e0dddd;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    cursor: pointer;
    text-decoration: none;
}
.pay_option_card__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pay_option_card__num {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}
.pay_option_card__brand {
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    margin: 0;
}
.pay_option_card__alias {
    color: var(--primary-sub);
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    margin: 0;
}
.pay_option_card__body {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.pay_option_card__thumb {
    width: 80px;
    height: 50px;
    border-radius: var(--radius-xs);
    background: linear-gradient(117.6deg, #8bb9fc 4.96%, #215ec6 95.53%);
    position: relative;
    flex-shrink: 0;
    display: block;
}
.pay_option_card__thumb svg {
    position: absolute;
    right: 9px;
    bottom: 5px;
}
.pay_option_card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 2px;
}

/* =========================
   Step progress (반품요청 스텝)
========================= */
.steps {
    display: flex;
    justify-content: space-between;
    gap: 3px;
    padding: 0 20px;
}
.steps__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.steps__bar {
    width: 100%;
    height: 5px;
    background: var(--grey-200);
    border-radius: var(--radius-pill);
}
.steps__item.is-active .steps__bar { background: var(--primary-sub); }
.steps__label {
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-600);
}
.steps__item.is-active .steps__label { color: var(--grey-700); }

/* =========================
   Photo upload thumb
========================= */
.photo_add {
    width: 100%;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--primary-sub);
    background: var(--white);
    border-radius: var(--radius-sm);
    font-size: 16px;
    color: var(--grey-700);
}
.photo_thumb_list { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.photo_thumb_list::-webkit-scrollbar { display: none; }
.photo_thumb_list .photo_thumb { flex: 0 0 100px; }
.photo_thumb {
    position: relative;
    width: 100px; height: 100px;
    border-radius: var(--radius-sm);
    background: #dcdcdc;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #000;
    font-size: 16px;
}
.photo_thumb__del {
    position: absolute; right: 4px; top: 4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}

/* =========================
   Setting row
========================= */
.setting_row {
    width: 100%;
    height: 60px;
    padding: 0 19px;
    border: 1px solid var(--grey-130);
    border-radius: var(--radius-lg);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.setting_row__label { font-size: 14px; line-height: 21px; font-weight: 700; color: var(--grey-700); }
.setting_row__sub { font-size: 12px; line-height: 18px; color: var(--grey-700); }

/* =========================
   Order status card
========================= */
.order_card { width: calc(100% - 40px); display: flex; flex-direction: column; gap: 12px; }
.order_card .option_row { width: 100%; }
.od_product .option_row { width: 100%; }
.pay_confirm__option .option_row { width: 100%; }
.rv_mg_card .option_row { width: 100%; }
.order_card__head {
    display: flex; justify-content: space-between; align-items: flex-end;
}
.order_card__date { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--grey-700); }
.order_card__brand { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--grey-700); }
.order_card__delivery { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--primary-sub); }
.order_card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.order_card__actions--3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.order_card__chips { display: flex; align-items: center; gap: 8px; }
.order_card__dday { width: auto; }
.dday_chip.order_card__dday {
    display: inline-flex;
    width: auto;
    height: 32px;
    padding: 4px 8px;
    align-items: center;
    gap: 4px;
    border-radius: 100px;
    border: 1px solid var(--grey-200);
    background: #fff;
}
.dday_chip.order_card__dday .dday_chip__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.dday_chip.order_card__dday .dday_chip__label svg {
    width: 18px;
    height: 18px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.dday_chip.order_card__dday .dday_chip__dday {
    color: var(--accent-red);
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.dday_chip.order_card__dday .dday_chip__time {
    color: var(--grey-700);
    font-family: var(--font-base);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
}
.order_card__product { display: flex; gap: 10px; align-items: flex-start; }
.order_card__thumb {
    flex-shrink: 0;
    width: 80px; height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #d0d0d0;
}
.order_card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order_card__info { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.order_card__title {
    color: var(--grey-700);
    letter-spacing: -0.32px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.order_card__price_row { display: flex; align-items: flex-end; gap: 2px; flex-wrap: wrap; }
.order_card__price_row .prod_card__price_origin { font-size: 12px; }

/* =========================
   Order list (주문내역)
========================= */
.order_filters {
    display: flex;
    gap: 8px;
    padding: 10px 20px;
}
.order_list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}
.order_list > .divider_block { align-self: stretch; }

/* 주문내역 필터 칩 — 드롭다운 caret은 아래 방향으로 고정, 활성 시 위로 회전 */
.order_filters .tag__caret { transform: none; transition: transform .15s; }
.order_filters .tag.is-active {
    border-radius: 100px;
    border: 1px solid var(--primary-sub);
    background: var(--primary-150);
}
/* caret 회전 없음 — 열림/닫힘 시 SVG path 자체를 교체 */

/* 주문내역 공용 바텀시트 (주문상태·조회기간·달력) */
.order_sheet_backdrop { display: flex; }
.order_sheet_backdrop[hidden] { display: none; }
/* 바텀시트가 열렸을 때 하단 탭바를 숨김 (CTA 버튼 가림 방지) */
body.has-sheet-open .tab_bar { display: none; }
.order_sheet {
    width: 100%;
    max-width: var(--frame-max);
    margin: 0 auto;
    transform: translateY(100%);
    transition: transform .2s ease-out;
}
.order_sheet_backdrop.is-open .order_sheet { transform: translateY(0); }
.order_sheet_backdrop.is-closing .order_sheet { transform: translateY(100%); }
.order_sheet__head { padding: 4px 20px 29px; }
.order_sheet__head--with-back { display: flex; align-items: center; gap: 8px; padding-left: 12px; }
.order_sheet__back {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0;
    color: var(--grey-700); cursor: pointer;
}
.order_sheet__title { font-size: 18px; line-height: 27px; font-weight: 700; color: var(--grey-700); margin: 0; }
.order_sheet__body { padding-top: 0; }
.order_sheet__section { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--grey-700); margin: 4px 0 26px; }
.order_sheet__check_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.order_sheet__check_list li { min-height: 24px; display: flex; align-items: center; }
.order_sheet__check_list .form-check { gap: 10px; min-height: 24px; line-height: 24px; }
.order_sheet__check_list .form-check-input { flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--grey-700); border-radius: 2px; background: var(--white); }
.order_sheet__check_list .form-check-input:checked {
    background: var(--primary-sub);
    border-color: var(--primary-sub);
}
/* 체크 표시 — 박스 내 absolute 정렬 (체크박스 높이 변동 방지) */
.order_sheet__check_list .form-check-input::after { content: none; }
.order_sheet__check_list .form-check-input:checked::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -65%) rotate(-45deg);
    margin: 0;
}
.order_sheet__cta {
    display: flex;
    gap: 15px;
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    background: var(--white);
    flex-shrink: 0;
}
.order_sheet__cta .btn { flex: 1; height: 50px; border-radius: var(--radius-sm); font-size: 16px; font-weight: 700; }
.order_sheet__cta .btn-outline-grey { flex: 0 0 40%; }
/* 바텀시트 초기화 버튼(공용) — 보더·텍스트 #5B4058 (primary) */
.order_sheet__cta .btn-outline-grey,
.btn[data-sheet-reset] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--white);
}

/* 조회기간 탭 — 4개 버튼 단일 그룹(보더 #9d6ca2, 활성 bg #fdeeff) */
.period_tabs {
    display: flex;
    margin-bottom: 20px; /* 고객 6.8 F11: 필터 탭과 직접설정/날짜선택 영역 사이 간격 확대(14→20) */
}
.period_tab {
    flex: 1;
    height: 40px;
    border: 1px solid var(--primary-sub);
    background: var(--white);
    font-size: 13px;
    line-height: 20px;
    color: var(--grey-700);
    cursor: pointer;
    padding: 0 6px;
}
.period_tab + .period_tab { margin-left: -1px; }
.period_tab:first-child { border-top-left-radius: var(--radius-xs); border-bottom-left-radius: var(--radius-xs); }
.period_tab:last-child { border-top-right-radius: var(--radius-xs); border-bottom-right-radius: var(--radius-xs); }
.period_tab.is-active {
    background: var(--primary-150);
    color: var(--grey-700);
    z-index: 1;
}
.period_range { display: flex; align-items: center; gap: 14px; }
.period_range__input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--primary-sub);
    border-radius: var(--radius-sm);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    cursor: pointer;
}
.period_range__input svg { color: var(--grey-700); }
.period_range__sep { color: var(--grey-700); font-size: 18px; }
/* 프리셋(최대~1년) 선택 시 — 날짜 박스 클릭 비활성 */
.period_range.is-disabled .period_range__input {
    pointer-events: none;
    border-color: var(--grey-200);
    background: var(--grey-60);
    color: var(--grey-400);
}
.period_range.is-disabled .period_range__input svg { color: var(--grey-300); }
.period_range.is-disabled .period_range__sep { color: var(--grey-400); }
.period_help { margin: 16px 0 0; font-size: 12px; color: #a9a9a9; text-align: center; }

/* 달력 — Figma 1:6399 매칭 */
.cal_nav { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 0 8px; }
.cal_nav__btn { background: transparent; border: 0; color: #000; cursor: pointer; display: inline-flex; padding: 4px; }
.cal_nav__label { font-size: 20px; font-weight: 700; color: #000; line-height: 30px; min-width: 100px; text-align: center; }
.cal_grid__head,
.cal_grid__body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}
.cal_grid__dow {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    height: 40px;
    line-height: 40px;
}
.cal_grid__dow--sun,
.cal_grid__dow--sat { color: #000; }
/* 셀은 가로/세로 동일 비율로 정사각형 → 원이 찌그러지지 않게 */
.cal_day {
    position: relative;
    height: 40px;
    width: 100%;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}
/* 선택 원형 표시(32×32) — Figma 매칭 */
.cal_day::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
    z-index: -1;
}
.cal_day.is-muted { color: #a2a9be; cursor: default; }
/* 범위 하이라이트 바 — 30px 높이, 셀 가운데 정렬 (Figma 매칭) */
.cal_day.is-range::after,
.cal_day.is-range-start::after,
.cal_day.is-range-end::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 30px;
    transform: translateY(-50%);
    background: #fdeeff;
    z-index: -2;
}
.cal_day.is-range::after { left: 0; right: 0; }
.cal_day.is-range-start::after { left: 50%; right: 0; }
.cal_day.is-range-end::after { left: 0; right: 50%; }
.cal_day.is-range-start.is-range-end::after { display: none; }
.cal_day.is-range-start::before,
.cal_day.is-range-end::before {
    background: var(--primary-sub);
}
.cal_day.is-range-start,
.cal_day.is-range-end { color: var(--white); }

/* 전체 상태 미리보기 (?state=all) */
.order_preview_head {
    align-self: center;
    width: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--primary-150);
    border-radius: var(--radius-sm);
}
.order_preview_head__label {
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}
.order_preview_head__param {
    font-size: 12px;
    line-height: 18px;
    color: var(--primary-sub);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Order status row (날짜 + 배송 노트 + 상태 배지) */
.order_card__date_row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}
.order_card__date_right {
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
}
.order_card__date_note {
    color: var(--primary-sub);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    white-space: nowrap;
}
.order_status_badge {
    display: inline-flex;
    align-items: center;
    height: 25px;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    background: var(--white);
    border: 1px solid var(--grey-200);
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    white-space: nowrap;
}
.order_card--delivered .order_status_badge,
.order_card--cancel-done .order_status_badge,
.order_card--cancel-done-fixed .order_status_badge,
.order_card--return .order_status_badge,
.order_card--return-done .order_status_badge {
    background: var(--grey-700);
    border: 0;
    color: var(--white);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action grids */
.order_card__actions--1 { grid-template-columns: 1fr; }
/* 결제대기 때 취소 — 단일 풀폭 버튼은 16px (Figma 133:6014) */
.order_card--cancel-done .order_card__actions--1 > .btn-outline-card { font-size: 16px; }
.order_card__actions--2 { grid-template-columns: 1fr 1fr; }
.order_card__actions--2x2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40px 40px;
    gap: 10px;
}
.order_card__actions--2x2 > .btn--s { height: 40px; font-size: 14px; border-radius: var(--radius-xs); }
.order_card__btn--filled {
    border-radius: var(--radius-xs);
    height: 40px;
    font-size: 14px;
    font-weight: 400;
}

/* Order modal (공용 중앙 모달) */
.order_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    max-width: calc(100% - 40px);
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 12.2px 2px rgba(189,189,189,0.25);
    padding: 35px 12px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.order_modal__title + .order_modal__desc {
    margin-top: -14px;
}
#orderCancelModal .order_modal__title + .order_modal__desc {
    margin-top: -24px;
}
.order_modal__title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
    text-align: center;
    margin: 0;
}
.order_modal__desc,
.modal__desc {
    margin: 0;
    overflow: hidden;
    color: var(--grey-700);
    text-align: center;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.order_modal__actions {
    display: flex;
    gap: 10px;
    width: 100%;
}
.order_modal__actions--1 > .btn { width: 100%; height: 50px; border-radius: var(--radius-sm); }
.order_modal__actions--2 > .btn { flex: 1; height: 50px; border-radius: var(--radius-sm); }
.order_modal__btn--cancel {
    overflow: hidden;
    color: var(--primary);
    text-overflow: ellipsis;
    font-family: var(--font-base);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* =========================
   Bottom fixed CTA area
========================= */
.bottom_cta {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--white);
    padding: 10px 20px;
    z-index: 80;
}
.bottom_cta .btn { width: 100%; }
/* 콘텐츠와 간격을 더 넓게 확보하는 변형 (온보딩 등) */
.bottom_cta--flat {
    padding-top: 40px;
}
.julgi_write + .bottom_cta--flat {
    padding-top: 20px;
}
/* 결과 페이지용: 2버튼 가로 배치 */
.bottom_cta--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.bottom_cta--split .btn { width: 100%; }
/* 모바일 프레임 하단에 실제로 고정되는 CTA */
.bottom_cta--fixed {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: var(--frame-max);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
body:has(.bottom_cta--fixed) .mobile_frame {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

/* =========================
   Password stage (pw_set / pw_input 공통)
========================= */
.pw_stage {
    padding: 60px 20px 260px;
    text-align: center;
}
.pw_stage__title {
    margin: 0 0 28px;
    color: var(--grey-700);
}
.pw_stage__reset {
    margin: 50px 0 0;
    display: flex;
    justify-content: center;
}
.pw_stage__error {
    color: #FF0000;
    font-size: 12px;
    line-height: 18px;
    margin: 12px 0 0;
}
.pw_stage__help {
    color: #212121;
    font-size: 12px;
    line-height: 18px;
    margin: 16px 0 0;
}

/* =========================
   Result stage (참여 완료 / 참여 실패)
========================= */
.result_stage {
    padding: 40px 20px;
    text-align: center;
    min-height: calc(100dvh - 56px - 100px - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.result_stage__icon {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 56px;
}
.result_stage__icon img { width: 56px; height: 56px; }
.result_stage__title {
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-base);
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    color: var(--grey-700);
}
.result_stage__desc {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--grey-700);
}
.result_stage__notice {
    margin-top: 24px;
    padding: 14px 16px;
    background: var(--grey-80);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 20px;
    color: var(--grey-700);
}
.result_stage__notice strong { font-weight: 700; }

/* =========================
   Modal / Info banner
========================= */
.info_banner {
    background: var(--grey-700);
    color: var(--white);
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    line-height: 21px;
}

/* =========================
   Empty state
========================= */
.no-data {
    width: 100%;
    padding: 60px 20px;
    text-align: center;
    color: var(--grey-400);
    font-size: 14px;
    line-height: 21px;
}

/* =========================
   Pill Action (알림받기 · 찜하기)
========================= */
.pill_action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 29px;
    padding: 4px 8px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-pill);
    color: var(--grey-700);
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
}
.pill_action__icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pill_action__icon img { width: 16px; height: 16px; object-fit: contain; }
.pill_action.is-active {
    background: var(--grey-700);
    border-color: #af5396;
    color: var(--white);
    font-weight: 400;
}

/* =========================
   Product overlay (공구예정 D-3)
========================= */
.prod_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    border-radius: var(--radius-md);
}
.prod_overlay__center {
    position: absolute;
    left: 50%;
    top: calc(50% - 17px);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}
.prod_overlay__badge {
    background: var(--primary-sub);
    color: var(--white);
    font-size: 14px;
    line-height: 21px;
    padding: 2px 4px;
    border-radius: var(--radius-pill);
    min-width: 60px;
    text-align: center;
    box-shadow: 0 0 11.2px rgba(0,0,0,0.8);
}
.prod_overlay__dday {
    font-size: 28px;
    line-height: 42px;
    font-weight: 700;
    color: #eee430;
    text-shadow: 0 0 11.2px rgba(0,0,0,0.9);
}
.prod_overlay__date {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--white);
    text-shadow: 0 0 11.2px rgba(0,0,0,0.9);
}
.prod_overlay__actions {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

/* =========================
   Modal dialog
========================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(33,33,33,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.modal-backdrop.is-open { display: flex; }
.modal-backdrop--clear { background: transparent; }
/* Confirm/alert modal — Figma 1:25275 표준 */
.modal {
    width: 100%;
    max-width: 320px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 0 12.2px 2px rgba(189, 189, 189, 0.25);
    padding: 35px 12px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.modal__title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: #212121;
    text-align: center;
}
.modal__title p {
    margin: 0;
    align-self: stretch;
    overflow: hidden;
    color: #212121;
    text-align: center;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--font-base);
}
.modal__title p:first-child {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}
.modal__title p + p,
.modal__title .modal__desc,
.modal__title .cf_modal__desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 0;
}
.modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 296px;
    align-self: center;
}
.modal__actions .btn {
    flex: 1;
    min-width: 0;
    height: 50px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
}

/* =========================
   Toast bar
========================= */
.toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 320px;
    height: 71px;
    padding: 10px 40px 10px 12px;
    background: var(--grey-700);
    border-radius: var(--radius-sm);
    color: var(--white);
    z-index: 1100;
    display: none;
}
.toast.is-open { display: block; animation: toastFadeIn .2s ease-out; }
.toast--single { height: auto; min-height: 41px; padding: 10px 40px 10px 12px; display: none; }
.toast--single.is-open { display: flex; align-items: center; }
.toast--single .toast__icon { position: static; }
.toast--single .toast__title { padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast.is-stack-top { bottom: 85px; }
@keyframes toastFadeIn {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.toast__icon {
    position: absolute;
    left: 12px; top: 10px;
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}
.toast__title {
    padding-left: 28px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
}
.toast__desc {
    margin-top: 8px;
    padding-left: 28px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}
.toast__close {
    position: absolute;
    top: 10px; right: 8px;
    width: 24px; height: 24px;
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.toast__close img { width: 16px; height: 16px; object-fit: contain; display: block; }
.toast__icon img { width: 24px; height: 24px; object-fit: contain; display: block; }

/* Figma 1:13456 — 성공 토스트 (연그린 배경) */
.toast--success {
    height: 45px;
    min-height: 45px;
    padding: 10px 40px 10px 8px;
    background: #e1ffe2;
    border-radius: 8px;
    color: #000;
}
.toast--success .toast__title {
    padding-left: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    color: #000;
}
.toast--success .toast__icon {
    position: static;
    width: 24px; height: 24px;
}
.toast--success .toast__close {
    color: #000;
}

/* 에러 토스트 (연레드 배경) — success와 동일 구조, 컬러만 스왑 */
.toast--error {
    height: 45px;
    min-height: 45px;
    padding: 10px 40px 10px 8px;
    background: #ffe1e1;
    border-radius: 8px;
    color: #000;
}
.toast--error .toast__title {
    padding-left: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    color: #000;
}
.toast--error .toast__icon {
    position: static;
    width: 24px; height: 24px;
}
.toast--error .toast__close {
    color: #000;
}

/* =========================
   Password dots (결제비밀번호)
========================= */
.pw_dots {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 24px 0;
}
.pw_dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--grey-200);
}
.pw_dot.is-filled { background: var(--primary-sub); }

/* =========================
   Numpad (3x4 keypad)
========================= */
.numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    background: var(--white);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 90;
}
.numpad__key {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
    background: transparent;
    border: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.numpad__key--empty { pointer-events: none; }

/* =========================
   Address chip (배송지 목록)
========================= */
.address_chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    background: var(--white);
    border: 1px solid var(--primary-sub);
    border-radius: var(--radius-pill);
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: var(--primary-sub);
}
.address_chip__icon { width: 14px; height: 14px; }

/* =========================
   Order Product Summary (결제 주문상품)
========================= */
.order_summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}
.order_summary__brand {
    align-self: stretch;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--grey-700);
}
.order_summary__body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.order_summary__thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    background: var(--grey-60);
    overflow: hidden;
    flex-shrink: 0;
}
.order_summary__thumb img { width: 100%; height: 100%; object-fit: cover; }
.order_summary__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.order_summary__title {
    align-self: stretch;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.32px;
    color: var(--grey-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.order_summary__price { display: flex; align-items: center; gap: 6px; }
.order_summary__discount {
    display: inline-flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #FF0000;
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}
.order_summary__now {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--grey-700);
}
.order_summary__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px;
    background: var(--grey-60);
    border-radius: var(--radius-sm);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--grey-700);
}

/* =========================
   Point Row (포인트 사용)
========================= */
.point_row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.point_row__input_wrap {
    position: relative;
    flex: 1;
    display: flex;
}
.point_row__input_wrap .input-field {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 9px;
    border: 1px solid #d4d9e6;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    color: #9d6ca2;
}
.point_row__input_wrap .input-field::placeholder { color: #9d6ca2; }
.point_row__clear {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.point_row__clear svg { display: block; }
.point_row .btn {
    width: 98px;
    height: 40px;
    flex-shrink: 0;
}
.point_row__btn {
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.point_row__btn:disabled {
    background: var(--grey-100);
    color: var(--grey-400);
    cursor: default;
}
.point_row__help {
    margin-top: 8px;
    align-self: stretch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--grey-700);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}
.point_row__help b {
    color: #9D6CA2;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
}

/* =========================
   Payment Summary (결제 금액)
========================= */
.pay_summary { display: flex; flex-direction: column; gap: 10px; }
.pay_summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #767676;
}
.pay_summary__row--sub {
    color: #212121;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.pay_summary__label {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #767676;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.pay_summary__value {
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.pay_summary__accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    background: transparent;
    color: #212121;
}
.pay_summary__accordion_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pay_summary__accordion_toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
}
.pay_summary__accordion_toggle .pay_summary__label {
    color: #212121;
}
.pay_summary__accordion_sep {
    margin: 10px 0 0;
    max-height: 1px;
    opacity: 1;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.pay_summary__accordion_body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    max-height: 200px;
    margin-top: 10px;
    opacity: 1;
    transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.pay_summary__accordion:not(.is-open) .pay_summary__accordion_body,
.pay_summary__accordion:not(.is-open) .pay_summary__accordion_sep {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}
.pay_summary__accordion_toggle .caret {
    transition: transform .2s;
}
.pay_summary__accordion.is-open .pay_summary__accordion_toggle .caret {
    transform: rotate(180deg);
}
.pay_summary__accordion .caret {
    width: 16px; height: 16px;
    transition: transform .2s;
}
.pay_summary__accordion.is-open .caret { transform: rotate(180deg); }
.pay_summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212121;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.pay_summary__total .amount {
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    color: #F00;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

/* =========================
   Card Select (카드 선택 +)
========================= */
.card_select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--btn-h-m);
    padding: 0 16px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--grey-700);
}
.card_select__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    color: var(--grey-600);
}
.card_select__plus img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pay_card_block__empty,
.pay_card_block__selected { display: none; }
.pay_card_block:not(.has-card) .pay_card_block__empty { display: inline-flex; }
.pay_card_block.has-card .pay_card_block__selected { display: flex; }

/* =========================
   카드 선택 바텀시트 (Figma 1:17522)
========================= */
.card_sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 16px;
}
.card_sheet__title { font-size: 20px; font-weight: 700; line-height: 30px; color: var(--grey-700); }
.card_sheet__close {
    width: 24px; height: 24px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--grey-700);
    display: inline-flex; align-items: center; justify-content: center;
}
.card_sheet__list {
    padding: 13px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.card_sheet_item {
    width: 100%;
    height: 70px;
    background: var(--white);
    border: 1px solid var(--grey-130);
    border-radius: 10px;
    padding: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
}
.card_sheet_item.is-active { border-color: var(--primary-sub); }
.card_sheet_item__thumb {
    width: 80px;
    height: 50px;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(117.6deg, #8bb9fc 4.96%, #215ec6 95.53%);
}
.card_sheet_item__thumb--visa {
    background: linear-gradient(-61.66deg, #272727 6.17%, #7e7e7e 100%);
}
.card_sheet_item__thumb_logo {
    position: absolute;
    right: 6px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.card_sheet_item__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.card_sheet_item__num {
    font-size: 16px;
    line-height: 24px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card_sheet_item__alias {
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    color: var(--primary-sub);
}
.card_sheet__add {
    width: 100%;
    height: 50px;
    margin-top: 26px;
    border: 1px solid var(--primary-sub);
    border-radius: 8px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    text-decoration: none;
    box-sizing: border-box;
}
.card_sheet__add_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.card_sheet__add_icon img { width: 100%; height: 100%; object-fit: contain; }

/* =========================
   Payment Page Section (결제 페이지 공용)
========================= */
.pay_section {
    padding: 20px;
}
.pay_section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.payment_addr_card {
    margin-bottom: 12px;
}
.payment_addr_request {
    width: 100%;
}
.payment_addr_request .caret {
    width: 16px;
    height: 16px;
    transition: transform .2s;
}
.payment_addr_request.is-open .caret {
    transform: rotate(180deg);
}
.payment_addr_request_wrap {
    position: relative;
}
.payment_addr_request_drop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    width: auto;
    z-index: 25;
    display: none;
}
.payment_addr_request_drop.is-open {
    display: block;
}
.payment_coupon_card {
    margin-top: 12px;
}
.join_confirm_modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 20px 20px;
}
.join_confirm_modal__icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.join_confirm_modal__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.join_confirm_modal__title {
    align-self: stretch;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    color: var(--grey-700);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}
.join_confirm_modal__desc {
    margin: 0;
    align-self: stretch;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    color: var(--grey-700);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.join_confirm_modal__actions {
    width: 100%;
    margin-top: 8px;
}

/* =========================
   Card Change Bottom Sheet (카드 변경)
========================= */
.card_sheet_backdrop[hidden] { display: none; }
.card_sheet_backdrop {
    display: flex;
}
.card_sheet__head {
    position: relative;
    padding: 4px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card_sheet__title {
    margin: 0;
    font-size: 18px;
    line-height: 27px;
    font-weight: 700;
    color: var(--grey-900);
}
.card_sheet__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
}
.card_sheet__body {
    padding: 4px 20px 16px;
}
.card_sheet__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.card_sheet__item {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
}
.card_sheet__item.is-active {
    border-color: var(--primary);
}
.card_sheet__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.card_sheet__thumb {
    width: 56px;
    height: 36px;
    border-radius: var(--radius-xs);
    background: linear-gradient(117.6deg, #8bb9fc 4.96%, #215ec6 95.53%);
    position: relative;
    flex-shrink: 0;
    display: block;
}
.card_sheet__thumb svg {
    position: absolute;
    right: 6px;
    bottom: 6px;
}
.card_sheet__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card_sheet__num {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}
.card_sheet__brand {
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
}
.card_sheet__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border: 1px solid var(--primary-sub);
    border-radius: 8px;
    background: var(--white);
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    box-sizing: border-box;
}
.card_sheet__add_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.card_sheet__add_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card_sheet__cta { padding-top: 10px; }
.coupon_select_btn {
    display: flex;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary);
    background: var(--white);
    color: #212121;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.order_summary__origin {
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    color: #FF0000;
    text-decoration-line: line-through;
}
.order_summary__opt {
    justify-content: space-between;
}
.order_summary__opt_val {
    color: var(--grey-700);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.order_summary__opt_sep {
    color: var(--grey-130);
    margin: 0 8px;
}
.pay_option--block {
    width: 100%;
}
.pay_card_block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}
.pay_card_block .card_select {
    display: flex;
    width: 100%;
    height: var(--btn-h-l);
    border-color: var(--primary-sub);
    color: var(--grey-900);
    font-size: 16px;
    font-weight: 400;
}
.pay_summary__accordion_val {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* =========================
   Card Register (카드 등록)
========================= */
.card_form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.card_form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.card_form__input {
    height: 50px;
}
.modal__title p.card_fail__desc {
    overflow: visible;
    text-overflow: clip;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    color: var(--grey-700);
    text-align: center;
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}
.terms_box {
    border: 1px solid var(--grey-130);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 20px;
}
.terms_box__title {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--grey-130);
    font-size: 16px;
    font-weight: 700;
    color: var(--grey-700);
    margin: 0;
}
.terms_box__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.terms_box__list li + li .terms_box__item {
    border-top: 1px solid var(--grey-130);
}
.terms_box__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    text-decoration: none;
}
.terms_box__item .caret {
    width: 20px;
    height: 20px;
    color: var(--grey-600);
}

/* =========================
   Address List (배송지 목록)
========================= */
.addr_list_wrap {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.addr_add_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    background: var(--white);
    border: 1px solid var(--primary);
    border-radius: var(--radius-pill);
    color: var(--grey-900);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.addr_card_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.addr_card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 10px;
    background: var(--white);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}
.addr_card.is-active {
    border-color: var(--primary-sub);
}
.addr_card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.addr_card__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-sub);
}
.addr_card__tel,
.addr_card__addr,
.addr_card__recipient {
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-900);
}
.addr_card__memo {
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-400);
}
.addr_card__contact {
    display: flex;
    align-items: center;
    gap: 8px;
}
.addr_card__recipient {
    position: relative;
    padding-left: 9px;
}
.addr_card__recipient::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: var(--grey-200);
}
.addr_card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.addr_card__actions {
    display: flex;
    gap: 8px;
}
.addr_card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    background: var(--white);
    border: 1px solid var(--grey-180);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--grey-700);
    text-decoration: none;
    cursor: pointer;
}
.addr_card__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--grey-700);
}
.addr_card__flag--default {
    background: var(--primary-150);
    border: 1px solid var(--primary-sub);
}
.addr_card__flag--select {
    background: var(--primary-100);
    border: none;
    cursor: pointer;
}
.addr_card__select {
    position: absolute;
    top: 12px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--grey-600);
    cursor: pointer;
    z-index: 1;
}
.addr_card.is-active .addr_card__select {
    background: var(--primary-100);
    border-color: var(--primary-sub);
    color: var(--primary-sub);
    cursor: default;
}

/* =========================
   Coupon Card (쿠폰 선택)
========================= */
.coupon_list {
    list-style: none;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.coupon_card {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 14px;
    padding: 20px 40px 20px 20px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.coupon_card__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.coupon_card--manage {
    cursor: default;
}
.coupon_card__radio_ui {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--radio-svg-off) no-repeat center / 20px 20px;
}
.coupon_card:has(.coupon_card__radio:checked) .coupon_card__radio_ui {
    background: var(--radio-svg-on) no-repeat center / 24px 24px;
}
.coupon_card__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--grey-250);
    background: var(--white);
    color: transparent;
    flex-shrink: 0;
    transition: all .2s;
}
.coupon_card__check svg {
    width: 14px;
    height: 14px;
}
.coupon_card.is-active {
    border-color: var(--primary);
}
.coupon_card:has(.coupon_card__radio:checked) {
    border-color: var(--primary);
}
.coupon_card.is-active .coupon_card__check {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.coupon_card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.coupon_card__amount {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    color: var(--primary-sub);
}
.coupon_card__title {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #000;
}
.coupon_card__cond,
.coupon_card__period {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #000;
}

/* =========================
   Helpers
========================= */
.container_20 { padding-left: 20px; padding-right: 20px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap_4 { gap: 4px; }
.gap_8 { gap: 8px; }
.gap_10 { gap: 10px; }
.gap_12 { gap: 12px; }
.gap_20 { gap: 20px; }
.mt_10 { margin-top: 10px; }
.mt_20 { margin-top: 20px; }

/* =========================
   Splash (앱 첫 진입)
========================= */
.splash {
    min-height: calc(100dvh - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.splash__logo {
    width: 227px;
    height: 227px;
    margin-bottom: 32px;
    object-fit: contain;
}
.splash__title {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--grey-700);
    line-height: 1.2;
    margin: 0;
}
.splash__sub {
    font-size: 20px;
    font-weight: 700;
    color: var(--grey-700);
    margin-top: 20px;
}

/* =========================
   Onboarding
========================= */
.onboarding_top {
    height: 50px;
    padding: 0 15px 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
}
.onboarding_top__skip {
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-500);
    text-decoration: underline;
    padding: 4px 8px;
}
.onboarding_progress {
    display: flex;
    gap: 3px;
    padding: 0 20px;
    margin-top: 20px;
}
.onboarding_progress__bar {
    flex: 1;
    height: 5px;
    background: var(--grey-200);
    border-radius: var(--radius-pill);
}
.onboarding_progress__bar.is-active {
    background: var(--primary-sub);
}
.onboarding_illust {
    position: relative;
    margin-top: 65px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onboarding_illust::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    width: 266px;
    height: 67px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #fff3b8 0%, rgba(255,243,184,0) 70%);
    z-index: 0;
    pointer-events: none;
}
.onboarding_illust img {
    position: relative;
    z-index: 1;
    max-height: 280px;
    width: auto;
    max-width: 80%;
    object-fit: contain;
}
.onboarding_text {
    margin: 16px 20px 0;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
    word-break: keep-all;
}
.onboarding_hero {
    position: relative;
    height: 470px;
    margin: 0 auto;
    overflow: hidden;
}
.onboarding_hero img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
}

/* =========================
   Social login
========================= */
.social_btn {
    width: 100%;
    height: 50px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
}
.social_btn--naver { background: #1dc300; color: var(--white); }
.social_btn--kakao { background: #ffe600; color: #371d1e; }
.social_btn--apple { background: #0c0c0c; color: var(--white); }
.social_btn__ico {
    width: 30px; height: 30px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.social_btn__ico svg { width: 100%; height: 100%; }
.social_btn__ico--naver img {
    width: 12.5px; height: 11.96px;
    display: block;
}
.social_btn__ico--kakao img {
    width: 18px; height: 17px;
    display: block;
}
.social_btn__ico--apple img {
    position: absolute;
    left: 8px; top: 6px;
    width: 15px; height: 19px;
    display: block;
}

/* =========================
   Login layout
========================= */
.login_hero {
    margin-top: 39px;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.login_hero__img {
    width: 222px;
    height: 222px;
    object-fit: contain;
}
.login_hero__logo {
    width: 301px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: 8px;
}
.login_social {
    margin-top: 40px;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* =========================
   Terms Agreement
========================= */
.terms_agree {
    padding: 20px;
}
.terms_agree__all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    cursor: pointer;
}
.terms_agree__sep {
    height: 1px;
    background: var(--grey-130);
    margin: 15px 0 20px;
}
.terms_agree__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.terms_agree__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.terms_agree__item .form-check-input {
    margin-top: 2px;
    flex-shrink: 0;
}
.terms_agree__label {
    flex: 1;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    word-break: keep-all;
}
.terms_agree__more {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--grey-400);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   Terms Detail
========================= */
.terms_detail {
    padding: 20px;
}
.terms_detail__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--grey-700);
    margin-bottom: 20px;
}
.terms_detail__article {
    font-size: 14px;
    line-height: 24px;
    color: var(--grey-700);
    margin-bottom: 20px;
    white-space: pre-line;
    word-break: keep-all;
}

/* =========================
   Address form
========================= */
.addr_form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.addr_field {
    display: grid;
    /* 라벨 열: 정적 퍼블은 55px이나 "배송메세지"(5자)/"배송지명"(4자)가 14px에서
       두 줄로 찌그러져, 한 줄에 들어가도록 72px로 확대(퍼블 픽셀과 의도적 차이). */
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 15px;
}
.addr_field__label {
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
}
.addr_field--stack {
    align-items: start;
}
.addr_field--stack .addr_field__label { padding-top: 11px; }
.addr_field__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.addr_field__row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.addr_field__row .input-field { flex: 1; min-width: 0; }
.addr_field__row .btn { flex-shrink: 0; }
.addr_field__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 14px;
    color: var(--grey-700);
    text-align: left;
}
.addr_field__select .caret {
    width: 20px; height: 20px;
    color: var(--grey-400);
    flex-shrink: 0;
}
.addr_basic_check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    cursor: pointer;
    padding: 0 20px;
}
.addr_basic_check input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border: 1.5px solid var(--grey-300);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: var(--white);
    flex-shrink: 0;
}
.addr_basic_check input:checked { border-color: var(--primary-sub); }
.addr_basic_check input:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--primary-sub);
}

/* =========================
   Home — Header (title left + bell right)
========================= */
.home_header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
}
.home_header__title {
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: var(--grey-700);
}
.home_header__right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.home_header__bell {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--grey-700);
}

/* =========================
   Home — Hero banner (carousel, 4 dots)
========================= */
.hero_banner {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
    background: var(--primary-100);
}
.hero_banner__slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
.hero_banner__slide {
    opacity: 0;
    transition: opacity .4s ease;
}
.hero_banner__slide.is-active { opacity: 1; }
.hero_banner__title {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding: 0 60px;
    color: var(--white);
    font-size: 16px; line-height: 24px; font-weight: 800;
    text-shadow: 0 0 7px rgba(0,0,0,0.9);
}
.hero_banner__dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
    display: flex; gap: 10px;
}
.hero_banner__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    border: 1px solid #ba8fbf;
}
.hero_banner__dot.is-active {
    background: var(--primary-sub);
    border-color: var(--white);
}

/* =========================
   Home — Filter bar (sort + tag scroll)
========================= */
.filter_bar {
    position: sticky;
    top: 65px;
    z-index: 31;
    height: 50px;
    display: flex;
    align-items: center;
}
.filter_bar__sort {
    position: relative;
    height: 50px;
    padding: 0 10px 0 20px;
    background: var(--white);
    border-radius: 0 30px 30px 0;
    box-shadow: 2px 0 7.3px rgba(0,0,0,0.15);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px; line-height: 24px;
    color: var(--grey-700);
    flex-shrink: 0;
    z-index: 2;
}
.filter_bar__sort .caret {
    width: 20px; height: 20px;
    transition: transform 0.2s;
}
.filter_bar__sort.is-open .caret { transform: rotate(180deg); }
.filter_bar__tags {
    flex: 1;
    padding: 0 20px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.filter_bar__tags::-webkit-scrollbar { display: none; }

/* =========================
   Home — Product card chips
========================= */
.dday_chip {
    width: auto;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-pill);
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    font-size: 14px; line-height: 21px;
    gap: 10px;
}
.dday_chip__label {
    display: inline-flex; align-items: center; gap: 4px;
    color: #F34829;
    font-weight: 700;
    flex-shrink: 0;
}
.dday_chip__time {
    color: var(--grey-700);
    font-size: 14px; line-height: 21px;
    font-variant-numeric: tabular-nums;
}
.people_chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 2px 8px;
    background: var(--primary-200);
    color: var(--primary);
    border-radius: var(--radius-pill);
    font-size: 16px; line-height: 24px;
    font-weight: 700;
    flex-shrink: 0;
}
.people_chip__label {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    line-height: 0;
    flex-shrink: 0;
    overflow: hidden;
}
.people_chip__count {
    font-variant-numeric: tabular-nums;
}
.people_chip svg,
.people_chip img { width: 20px; height: 20px; display: block; flex-shrink: 0; object-fit: contain; }
.price_discount {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--accent-red);
    color: var(--white);
    font-size: 14px; line-height: 21px;
    font-weight: 700;
    border-radius: var(--radius-pill);
}
.prod_card__meta {
    font-size: 12px; line-height: 18px;
    color: #c5c5c5;
    text-align: right;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}
.prod_card__row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* =========================
   Home — Floating action stack (right bottom)
========================= */
.fab_stack {
    position: fixed;
    right: max(20px, calc((100vw - var(--frame-max)) / 2 + 20px));
    bottom: 80px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 42px;
}
.fab_stack__recent {
    width: 42px; height: 58px;
    background: var(--white);
    border: 1px solid #d6d6d6;
    border-radius: var(--radius-md);
    box-shadow: 0 0 11.2px rgba(0,0,0,0.5);
    overflow: hidden;
    position: relative;
    font-size: 12px; line-height: 18px;
    color: #000;
}
.fab_stack__recent__thumb {
    width: 42px; height: 38px;
    background: var(--grey-150) center/cover;
    position: absolute;
    top: 0; left: 0;
}
.fab_stack__recent__label {
    position: absolute;
    left: 0; right: 0;
    top: 38px; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.fab_stack__top {
    width: 42px; height: 42px;
    background: var(--white);
    border: 1px solid #d6d6d6;
    border-radius: 50%;
    box-shadow: 0 0 11.2px rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   Home — Upcoming card pill actions (알림받기·찜하기)
========================= */
.upcoming_pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-pill);
    font-size: 14px; line-height: 16px;
    font-weight: 700;
    color: var(--grey-700);
    white-space: nowrap;
}
.upcoming_pill__icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.upcoming_pill__icon img { width: 16px; height: 16px; object-fit: contain; display: block; }
.upcoming_pill.is-active {
    background: var(--grey-700);
    border-color: #af5396;
    color: var(--white);
    font-weight: 400;
}
.upcoming_pill.is-active .upcoming_pill__icon img { filter: brightness(0) invert(1); }

/* =========================
   Product Detail (상품 상세)
========================= */
.pd_gallery {
    position: relative;
    width: 100%;
    height: 360px;
    background: var(--grey-200);
    overflow: hidden;
}
.pd_gallery__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .3s ease;
}
.pd_gallery__slide.is-active { opacity: 1; }
.pd_gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.pd_gallery__header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
}
.pd_gallery__right { display: inline-flex; align-items: center; gap: 0; }
.pd_gallery__ic {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.pd_gallery__ic--share {
    width: 32px; height: 32px;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: transparent;
    border: 0;
}
.pd_gallery__ic--share img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd_gallery__ic--wish {
    width: 32px; height: 32px;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: transparent;
    border: 0;
}
.pd_gallery__ic--wish img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd_gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-700);
    z-index: 3;
}
.pd_gallery__arrow--prev { left: 10px; }
.pd_gallery__arrow--next { right: 10px; }
.pd_gallery__count {
    position: absolute;
    left: 20px;
    bottom: 14px;
    padding: 2px 10px;
    background: rgba(0,0,0,0.5);
    color: var(--white);
    border-radius: var(--radius-pill);
    font-size: 13px;
    line-height: 20px;
    z-index: 3;
    font-variant-numeric: tabular-nums;
}
.pd_gallery__count b { font-weight: 700; }
.pd_gallery__dday {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 3;
    width: auto;
}

/* 상품 타이틀·가격·할인 영역 */
.pd_title_area { padding: 20px 20px 0; }
.pd_title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: var(--grey-700);
    word-break: keep-all;
}
.pd_discount_badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 15px;
    padding: 0;
    background: transparent;
    color: var(--grey-700);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
}
.pd_discount_badge__ic {
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-sub);
    flex-shrink: 0;
}
.pd_discount_badge__ic img { width: 100%; height: 100%; object-fit: contain; }
.pd_discount_badge__caret { width: 20px; height: 20px; color: var(--grey-600); margin-left: 2px; }

.pd_price_row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 15px;
}
.pd_price_now {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
}
.pd_price_origin {
    font-size: 16px;
    line-height: 24px;
    color: var(--accent-red);
    text-decoration: line-through;
}

/* 참여 인원 · 할인 안내 행 */
.pd_people_row {
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
}
.pd_people_chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    background: var(--white);
    border: 1px solid #dbdbdb;
    border-radius: var(--radius-pill);
    color: var(--grey-700);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    flex-shrink: 0;
    white-space: nowrap;
}
.pd_people_chip svg { width: 24px; height: 24px; color: var(--accent-red); }
.pd_people_chip img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.pd_gallery__ic.wish-toggle[aria-pressed="true"] svg { fill: var(--accent-red); color: var(--accent-red); stroke: var(--accent-red); }
.pd_people_text {
    font-size: clamp(11px, 3.6vw, 16px);
    line-height: 1.4;
    color: var(--grey-700);
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}
.pd_people_text b { font-weight: 700; }

/* 진행률 */
.pd_progress { padding: 30px 20px 0; }
.pd_progress__done {
    font-size: 12px;
    line-height: 18px;
    color: var(--grey-700);
}
.pd_progress__done b { font-weight: 700; }
.pd_progress__bar {
    position: relative;
    height: 12px;
    background: #f4c7d8;
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.pd_progress__fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #ffebef 10%, #c93778 56%, #631b3b 110%);
    border-radius: var(--radius-pill);
    transition: width .3s ease;
}

/* 메인 CTA */
.pd_cta_area { padding: 50px 20px 0; }
.pd_cta_area .btn {
    height: 45px;
    font-size: 24px;
    font-weight: 700;
    border-radius: 8px;
}

/* 리뷰어 카드 */
.pd_reviewer {
    margin: 50px 20px 40px;
    padding: 15px 14px;
    height: 70px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 0 13.6px -2px rgba(109, 109, 109, 0.25);
    color: var(--grey-700);
}
.pd_reviewer__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #bdbdbd;
    color: var(--grey-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.pd_reviewer__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pd_reviewer__avatar.no_img_avatar svg { width: 28px; height: 28px; color: var(--white); }
.pd_reviewer__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd_reviewer__name { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--grey-700); }
.pd_reviewer__rating {
    font-family: Pretendard, var(--font-base);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pd_reviewer__rating b { color: #212121; font-weight: 400; }
.pd_reviewer__star { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.pd_reviewer__caret { color: #212121; flex-shrink: 0; width: 20px; height: 20px; }

/* 배송 정보 블록 */
.pd_info_section { padding: 0 20px 20px; }
.pd_info_section__title {
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
    margin: 0 -20px 10px;
    padding: 0 20px;
}
.pd_info_row {
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: start;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
}
.pd_info_row dt { color: var(--grey-700); }
.pd_info_row dd { color: var(--grey-700); word-break: keep-all; }
.pd_info_row dd .pd_info_row__sub { display: block; color: #626060; margin-top: 4px; }
.pd_info_row + .pd_info_row { margin-top: 10px; }

/* 경고 배너 (결제/개인정보 유도 경고) */
.pd_notice {
    margin: 0 20px 30px;
    padding: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    background: #fef7ff;
    border: 1.3px solid var(--primary-sub);
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 18px;
    color: var(--grey-700);
}
.pd_notice__icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    color: var(--accent-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pd_notice strong { color: #d32f2f; font-weight: 400; }

/* 상품 상세 — 스크롤 시 상단 고정 헤더 */
.pd_gallery__header.is-scrolled {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--frame-max);
    height: 50px;
    background: var(--white);
    z-index: 30;
}
.pd_gallery__header.is-scrolled .pd_gallery__ic {
    color: var(--grey-700);
    filter: none;
}
.pd_gallery__header.is-scrolled .pd_gallery__ic--share img,
.pd_gallery__header.is-scrolled .pd_gallery__ic--wish img {
    filter: brightness(0);
}

/* 상품설명 / 할인정보 탭 (Pill 형태) */
.pd_tabs {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--white);
    padding: 10px 20px;
}
.pd_tabs__item {
    height: 40px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--grey-180);
    border-radius: var(--radius-pill);
    font-family: 'Pretendard', var(--font-base);
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.pd_tabs__item.is-active {
    padding: 8px 16px;
    color: var(--primary);
    font-weight: 700;
    border-color: var(--primary);
}
/* 상품 설명·스펙 표 */
.pd_spec { padding: 0 20px 20px; }
.pd_spec__title {
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
    margin: 0 -20px 10px;
    padding: 0 20px;
}
.pd_spec__row {
    display: grid;
    grid-template-columns: 74px 1fr;
    align-items: start;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
}
.pd_spec__row + .pd_spec__row { margin-top: 10px; }
.pd_spec__row dt { color: var(--grey-600); }
.pd_spec__row dd { color: var(--grey-700); text-align: right; word-break: keep-all; }

/* 상품 상세 이미지 영역 — 좌우 여백 없이 모바일 프레임 전체 폭 */
.pd_detail_img {
    margin: 0 0 20px;
    width: 100%;
    background: var(--grey-150);
    color: var(--grey-600);
}
/* 판매자가 등록한 이미지/HTML — 컨테이너 폭에 꽉 차도록 */
.pd_detail_img .editor_wr,
.pd_detail_img__content {
    width: 100%;
}
.pd_detail_img img,
.pd_detail_img .editor_wr img {
    display: block;
    width: 100%;
    height: auto;
}
/* 등록 이미지가 없을 때 placeholder */
.pd_detail_img--placeholder {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.pd_detail_img__label {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--grey-500);
}
.pd_detail_img__caption {
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
}
/* 상품 상세 이미지와 다음 섹션 사이 10px 회색 구분선 */
.pd_detail_img__divider {
    height: 10px;
    background: #f3f3f3;
    width: 100%;
}

/* 할인 정보 블록 */
.pd_discount_block { padding: 0 20px 20px; }
.pd_discount_block__title {
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    margin: 0 -20px 10px;
    padding: 0 20px;
    color: var(--grey-700);
}
.pd_discount_table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    margin-top: 10px;
    background: var(--white);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    border: 1px solid var(--grey-200);
    border-top: 0;
}
.pd_discount_table--3col { table-layout: fixed; }
.pd_discount_table caption {
    caption-side: top;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    color: var(--white);
    background: var(--grey-700);
    padding: 4px 8px;
    border-radius: 8px 8px 0 0;
    height: 30px;
    border: 1px solid var(--grey-700);
    border-bottom: 0;
}
.pd_discount_block .pd_spec__row { grid-template-columns: 120px 1fr; }
.pd_discount_block .pd_spec__row dt { white-space: nowrap; }
.pd_discount_table th,
.pd_discount_table td {
    border-right: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
    padding: 4px 6px;
    height: 30px;
    color: var(--grey-700);
}
.pd_discount_table tr > :last-child { border-right: 0; }
.pd_discount_table tbody tr:last-child > td { border-bottom: 0; }
.pd_discount_table thead th {
    background: var(--white);
    color: var(--grey-700);
    font-weight: 700;
}
.pd_discount_table tbody th {
    font-weight: 400;
}
.pd_discount_table tbody td { color: var(--grey-700); font-weight: 400; }
.pd_discount_block > .pd_discount_table:last-of-type { margin-bottom: 40px; }

/* 상세 하단 CTA (공유 + 공동구매 참여) — 뷰포트 하단 고정 */
.pd_bottom_cta {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--frame-max);
    background: var(--white);
    border-top: 1px solid #d9d9d9;
    box-shadow: 0 -1px 10.6px 0 rgba(88, 88, 88, 0.25);
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 33px;
    z-index: 50;
}
.pd_bottom_cta__share {
    width: 40px; height: 40px;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-700);
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.pd_bottom_cta__share svg {
    width: 22px;
    height: 22px;
    display: block;
}
.pd_bottom_cta .btn {
    display: flex;
    flex: 1;
    height: 56px;
    padding: 15px 51px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #5B4058;
    overflow: hidden;
    color: #FFF;
    text-overflow: ellipsis;
    font-family: Pretendard, var(--font-base);
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: 0;
}
.pd_bottom_cta .btn:disabled,
.pd_bottom_cta .btn.is-disabled {
    background: #d9d9d9;
    color: #fff;
    cursor: not-allowed;
}
.pd_bottom_cta__state {
    flex: 1;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px dashed var(--primary-sub);
    background: var(--primary-50);
    color: var(--primary);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
}

/* 이웃과 함께 할수록 저렴해요! 말풍선 */
.pd_tip {
    position: absolute;
    left: 9px;
    bottom: 100%;
    margin-bottom: 2px;
    background: #212121;
    color: var(--white);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.pd_tip::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 100%;
    border: 5px solid transparent;
    border-top-color: #212121;
    border-bottom: 0;
}
/* 하단 고정 CTA 만큼 본문 하단 여백 확보 */
.pd_bottom_cta__spacer { height: calc(76px + env(safe-area-inset-bottom)); }
.pd_main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.pd_bottom_cta__state .dday_chip__time { color: var(--accent-red); margin-left: 8px; }

/* 할인정보 모달 (Figma 440:3841) — 공동구매 참여 전 노출 */
.pd_discount_modal {
    width: 320px;
    max-width: calc(100% - 40px);
    padding: 12px;
    gap: 10px;
    max-height: calc(100dvh - 80px);
}
.pd_discount_modal__title {
    margin: 0;
    padding: 0 0 10px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
    text-align: center;
    border-bottom: 1px solid var(--grey-200);
}
.pd_discount_modal__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.pd_dm_info { margin: 0; padding: 0; }
.pd_dm_info__row {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    font-size: 14px;
    line-height: 21px;
    padding: 0;
}
.pd_dm_info__row + .pd_dm_info__row { margin-top: 10px; }
.pd_dm_info__row dt { color: var(--grey-600); font-weight: 400; }
.pd_dm_info__row dd { margin: 0; color: var(--grey-700); text-align: right; }
.pd_discount_modal .pd_discount_table { margin-top: 0; }
.pd_discount_modal .pd_discount_table th,
.pd_discount_modal .pd_discount_table td { height: 30px; padding: 4px 6px; }
.pd_discount_modal__actions {
    padding-top: 2px;
}
.pd_discount_modal__actions .btn {
    width: 100%;
    height: 50px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
}

/* 현재 적용 할인 항목 모달 본문 (modal 기본 골격 재사용) */
.pd_dm_modal { max-width: 320px; padding: 24px 20px 20px; }
.pd_dm_modal__title {
    text-align: center;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--grey-700);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--grey-150);
    margin: 0 0 4px;
}
.pd_dm { padding: 0; }
.pd_dm__row {
    display: flex;
    align-items: center;
    padding: 16px 4px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--grey-700);
}
.pd_dm__row + .pd_dm__row { border-top: 1px dashed var(--grey-200); }
.pd_dm__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #212121;
    font-family: Pretendard, var(--font-base);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.pd_dm__rate {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--grey-600);
    margin-right: 10px;
}
.pd_dm__amount {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--grey-700);
}
.pd_dm__row--total .pd_dm__rate,
.pd_dm__row--total .pd_dm__amount { color: #FF0000; }
.pd_dm_modal__actions { margin-top: 8px; }

/* =========================
   Option Sheet — 상품 옵션선택 바텀시트
========================= */
.opt_backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: var(--frame-max);
    margin: 0 auto;
    left: 0; right: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}
.opt_backdrop.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.opt_sheet {
    position: relative;
    background: var(--white);
    border-radius: 20px 20px 0 0;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.opt_backdrop.is-open .opt_sheet { transform: translateY(0); }
.opt_sheet__handle {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.opt_sheet__handle::before {
    content: "";
    width: 36px;
    height: 4px;
    background: #000;
    border-radius: 4px;
}
.opt_sheet__body {
    padding: 0 20px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}
.opt_sheet__cta {
    padding: 6px 20px calc(10px + env(safe-area-inset-bottom));
    background: var(--white);
    flex-shrink: 0;
}
.opt_sheet__cta .btn {
    height: 54px;
    font-size: 18px;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

/* 옵션 선택 드롭다운 */
.opt_select {
    position: relative;
    margin-bottom: 20px;
}
.opt_select__head {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border: 1px solid var(--primary);
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    cursor: pointer;
}
.opt_select__head svg { transition: transform .2s; color: var(--grey-700); }
.opt_select.is-open .opt_select__head {
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
}
.opt_select.is-open .opt_select__head svg { transform: rotate(180deg); }
.opt_select__list {
    display: none;
    border: 1px solid var(--primary);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
    background: var(--white);
}
.opt_select.is-open .opt_select__list { display: block; }
.opt_select__item {
    height: 50px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    cursor: pointer;
    border-top: 1px solid var(--grey-150);
}
.opt_select__item:first-child { border-top: 0; }
.opt_select__item:hover,
.opt_select__item.is-active { background: var(--primary-50); }
.opt_select__item.is-disabled { color: var(--grey-400); cursor: not-allowed; background: var(--grey-60); }
.opt_select__stock { color: var(--grey-700); }
.opt_select__item.is-low .opt_select__stock { color: #FF0000; font-weight: 700; }

/* 선택된 옵션 카드 */
.opt_cart_list { display: flex; flex-direction: column; gap: 12px; }
.opt_cart_item {
    position: relative;
    padding: 14px 16px;
    background: var(--grey-60);
    border-radius: var(--radius-md);
}
.opt_cart_item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.opt_cart_item__label { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--grey-700); }
.opt_cart_item__close {
    width: 24px; height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.opt_cart_item__close img { width: 24px; height: 24px; object-fit: contain; }
.opt_cart_item__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    line-height: 22px;
    color: var(--grey-700);
    margin-bottom: 12px;
}
.opt_cart_item__meta { color: var(--grey-700); }
.opt_cart_item__meta .opt_cart_item__sep { color: var(--grey-300); margin: 0 8px; }
.opt_cart_item__price { font-weight: 400; font-size: 16px; line-height: 24px; color: var(--grey-700); }

/* 수량 스테퍼 */
.opt_stepper {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 137px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-pill);
    background: var(--white);
}
.opt_stepper button {
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    color: #000;
    cursor: pointer;
}
.opt_stepper button svg { width: 14px; height: 14px; }
.opt_stepper button:disabled { color: var(--grey-300); cursor: not-allowed; box-shadow: none; }
.opt_stepper__count { font-size: 16px; line-height: 19px; font-weight: 700; min-width: 24px; text-align: center; color: #000; }

/* 총 합계 */
.opt_total {
    margin-top: 16px;
    padding: 14px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
}
.opt_total__label b { color: #9D6CA2; font-weight: 700; margin: 0 2px; }
.opt_total__amount { font-weight: 700; font-size: 18px; }

/* 더 담아 할인 적용 배너 */
.opt_notice {
    position: relative;
    margin-top: 10px;
    padding: 12px 14px;
    background: #fff1ce;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 20px;
    color: var(--grey-700);
}
.opt_notice--max { background: #f7d6ff; }
.opt_notice__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 2px;
}
.opt_notice__label { display: inline-flex; align-items: center; gap: 4px; color: var(--grey-700); }
.opt_notice__info_ic {
    width: 14px; height: 14px; flex-shrink: 0;
    padding: 0; border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.opt_notice__info_ic img { width: 100%; height: 100%; object-fit: contain; }
.opt_notice__tip_box {
    display: none;
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: calc(100% - 6px);
    z-index: 20;
    background: var(--white);
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    overflow: hidden;
}
.opt_notice__tip_box::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 24px;
    border: 6px solid transparent;
    border-top-color: var(--white);
}
.opt_notice.is-tip-open .opt_notice__tip_box { display: block; }
.opt_notice__tip_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 24px;
    color: #212121;
}
.opt_notice__tip_table th,
.opt_notice__tip_table td {
    height: 30px;
    padding: 0 12px;
    text-align: center;
}
.opt_notice__tip_table thead th {
    background: #212121;
    font-weight: 700;
    color: var(--white);
}
.opt_notice__tip_table tbody td { border-bottom: 1px solid #e4e4e4; }
.opt_notice__tip_table tbody td:first-child { border-right: 1px solid #e4e4e4; }
.opt_notice__tip_table tbody tr:last-child td { border-bottom: 0; }
.opt_notice__tip_cell { display: inline-flex; align-items: center; gap: 10px; }
.opt_notice__tip_num { font-weight: 400; }
.opt_notice__tip_unit { font-weight: 700; }
.opt_notice__stepnum { font-style: normal; color: #9D6CA2; font-weight: 700; margin-left: 2px; }
.opt_notice__amount { color: var(--grey-700); font-weight: 400; font-size: 14px; }
.opt_notice__step--max { display: inline-flex; align-items: center; gap: 4px; }
.opt_notice__max_ic { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.opt_notice__step { margin: 0; font-size: 13px; line-height: 20px; color: #212121; }
.opt_notice__tip { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: #212121; }

/* 가결제 약관 상세 (terms_detail 재사용) */
.terms_detail__list {
    list-style: disc outside;
    padding: 0 0 0 20px;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 16px;
    line-height: 24px;
    color: #212121;
    word-break: keep-all;
}
.terms_detail__list li { padding-left: 4px; }
.terms_detail__list strong { font-weight: 700; }
.terms_detail__notice {
    margin-top: 20px;
    padding: 12px 10px;
    background: var(--grey-200);
    border-radius: 10px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
}

/* =========================
   결제수단 관리 (payment_methods)
========================= */
.pay_methods { padding: 10px 20px 40px; display: flex; flex-direction: column; gap: 10px; }
.pay_methods__head { display: flex; align-items: center; height: 50px; }
.pay_methods__head .heading_04 { display: flex; align-items: center; gap: 12px; }
.pay_methods__head .heading_04 .txt_primary { margin-left: 0; }
.pay_methods__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border: 1px solid var(--primary-sub);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.pay_methods__add_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.pay_methods__add_icon img { width: 100%; height: 100%; display: block; }
.card_list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.card_row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    height: 100px;
    padding: 9px;
    border: 1px solid #d9d9d9;
    border-radius: var(--radius-md);
    background: var(--white);
}
.card_row__thumb {
    width: 80px;
    height: 50px;
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 4px 4px 0;
    flex-shrink: 0;
    overflow: hidden;
}
.card_row__thumb--woori {
    background: linear-gradient(117.6deg, #8bb9fc 4.96%, #215ec6 95.53%);
}
.card_row__thumb--shinhan {
    background: linear-gradient(-61.66deg, #272727 6.17%, #7e7e7e 100%);
    color: #fff;
}
.card_row__brand {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-style: italic;
    color: #fff;
}
.card_row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 0; }
.card_row__title { font-size: 16px; line-height: 24px; color: #000; font-weight: 400; }
.card_row__sub { font-size: 14px; line-height: 21px; color: var(--primary-sub); font-weight: 700; }
.card_row__del {
    position: absolute;
    right: 9px;
    bottom: 9px;
    height: 30px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0dddd;
    border-radius: var(--radius-md);
    background: var(--white);
    color: #212121;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

/* =========================
   주문취소 완료 (order_cancel)
========================= */
.result_stage--cancel { padding: 120px 20px 40px; }
.result_stage--cancel .result_stage__icon { color: var(--grey-700); min-height: 80px; }
.result_stage--cancel .result_stage__icon svg { color: var(--grey-700); }
.result_stage--cancel .result_stage__title { font-size: 20px; line-height: 30px; }

/* =========================
   확정가격 결제 동의 (payment_confirm)
========================= */
.pay_confirm { padding: 10px 20px 150px; display: flex; flex-direction: column; gap: 12px; }
.pay_confirm__banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--primary-sub);
    margin: 8px 0 0;
}
.pay_confirm__banner > span[aria-hidden="true"] {
    font-size: 24px;
    line-height: 24px;
}
.pay_confirm__banner strong { font-weight: 700; color: var(--primary-sub); }
.pay_confirm__chips {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
.pay_confirm__chips .people_chip strong { font-weight: 700; color: var(--primary); }

.pay_confirm__product {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 4px 0;
}
.pay_confirm__product_thumb {
    width: 80px; height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--grey-100);
    flex-shrink: 0;
}
.pay_confirm__product_thumb img { width: 100%; height: 100%; object-fit: cover; }
.pay_confirm__product_info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 0; }
.pay_confirm__product_title {
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.pay_confirm__product_price { display: flex; align-items: flex-end; gap: 2px; flex-wrap: wrap; }
.pay_confirm__product_price strong { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--grey-700); }
.pay_confirm__product_price s { font-size: 12px; line-height: 21px; color: var(--accent-red); text-decoration-line: line-through; }

.opt_accordion {
    background: var(--grey-60);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.opt_accordion__head {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    background: transparent;
}
.opt_accordion__label { font-weight: 700; }
.opt_accordion__value {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--grey-700);
    font-weight: 400;
}
.opt_accordion__value .caret {
    width: 16px; height: 16px;
    transition: transform .15s;
}
.opt_accordion__sep { color: var(--grey-130); margin: 0 8px; }
.opt_accordion.is-open .opt_accordion__value .caret { transform: rotate(180deg); }
.opt_accordion__body {
    display: none;
    padding: 0 12px 12px;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    flex-direction: column;
    gap: 8px;
}
.opt_accordion.is-open .opt_accordion__body { display: flex; }
.opt_accordion__item { display: flex; justify-content: space-between; }

.pay_confirm__notice {
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    color: var(--grey-700);
    font-weight: 400;
}

/* =========================
   딜 성사 안내 모달 (home ?event=deal-success)
========================= */
.deal_success_modal {
    position: relative;
    padding: 25px 12px 12px;
    gap: 0;
    max-width: 320px;
}
.deal_success_modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--grey-700);
}
.deal_success_modal__close svg { pointer-events: none; }
.deal_success_modal__title {
    margin: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--grey-180);
}
.deal_success_modal__title img { width: 24px; height: 24px; }
.deal_success_modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0 12px;
}
.deal_success_modal__cta {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
}
.deal_success_modal__cta:hover { color: var(--white); }
.deal_success_modal .pay_confirm__product { padding: 0; }
.deal_success_modal .pay_confirm__product_thumb { width: 76px; height: 76px; }

.pay_confirm_card {
    border: 1px solid var(--grey-130);
    border-radius: var(--radius-md);
    background: var(--white);
    overflow: hidden;
}
.pay_confirm_card__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 9px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    background: transparent;
}
.pay_confirm_card__title { font-weight: 700; }
.pay_confirm_card__head_right { display: inline-flex; align-items: center; gap: 10px; }
.pay_confirm_card__amount { font-weight: 400; color: var(--grey-700); }
.pay_confirm_card__head .caret {
    width: 16px; height: 16px;
    transition: transform .15s;
    color: var(--grey-700);
}
.pay_confirm_card--accordion {
    background: var(--primary-150);
    border-color: var(--primary-sub);
    margin: 8px 0; /* 컨테이너 gap 12px + 8px = 상하 여백 20px */
}
.pay_confirm_card--accordion .pay_confirm_card__head { padding: 10px 9px 10px 20px; }
.pay_confirm_card--accordion .pay_confirm_card__head .caret { transform: rotate(0deg); }
.pay_confirm_card--accordion.is-open .pay_confirm_card__head .caret { transform: rotate(180deg); }

.pay_confirm_card--accordion .pay_confirm_card__body { display: none; }
.pay_confirm_card--accordion.is-open .pay_confirm_card__body { display: flex; }

.pay_confirm_card__body {
    padding: 9px 20px 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
}
.pay_confirm_card--accordion .pay_confirm_card__body { border-top: 1px solid var(--primary-sub); }
.pay_confirm_card__head--static { padding-top: 8px; }
.pay_confirm_card__body--text {
    border-top: 0;
    padding: 0 9px 8px;
    font-size: 14px;
    line-height: 21px;
}
.pay_confirm_card__body--inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.pay_confirm__banner_icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
.pay_confirm_card__row { display: flex; justify-content: space-between; gap: 20px; }
.pay_confirm_card__row span:first-child { color: var(--grey-600); }
.pay_confirm_card__row span:last-child { color: var(--grey-700); }
.pay_confirm_card__change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 8px 12px;
    border: 1px solid var(--grey-180);
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    color: var(--grey-700);
    background: var(--white);
}

.pay_confirm__cancel {
    align-self: flex-start;
    color: var(--grey-700);
    font-size: 14px;
    line-height: 21px;
    text-decoration: underline;
    padding: 0;
}
/* 주문취소 + 결제하기 하단 고정 (Figma 370:2641): 배경 FFFFFF 80%, 세로 20px 간격.
   .mobile_frame이 overflow-x:clip이라 sticky가 안 먹어 fixed로 고정 (pd_bottom_cta 패턴). */
.pay_confirm__cta {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--frame-max);
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(255, 255, 255, 0.8);
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    z-index: 80;
}

/* =========================
   Wishlist — Segmented tabs (공구중 · 공구예정)
========================= */
.wish_tabs {
    display: flex;
    width: 100%;
    background: var(--white);
    position: sticky;
    top: 50px;
    z-index: 10;
}
.wish_tabs__item {
    flex: 1 1 50%;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-400);
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
}
.wish_tabs__item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--grey-150);
}
.wish_tabs__item.is-active {
    color: var(--primary);
    font-weight: 700;
}
.wish_tabs__item.is-active::after {
    background: var(--primary);
}

.wish_empty {
    min-height: calc(100vh - 50px - 60px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.wish_empty__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-700);
}
.wish_empty__text {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
    text-align: center;
}

/* =========================
   Order Detail (주문상세 내역)
========================= */
.od_page { padding-bottom: 20px; }
.od_date_head {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.od_date_head__title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
}
.od_date_head__sub {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--grey-700);
}
.od_actions .btn-outline-primary {
    color: var(--primary);
    text-align: center;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.od_section {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.od_section__head {
    height: 44px; /* QA0608 #8: 50→44 섹션 제목 행 여백 살짝 축소(모바일 톤) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -20px;
    padding: 0 20px;
}
.od_section__title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
}
.od_section__right {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-600);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.od_section__caret {
    width: 20px;
    height: 20px;
    color: var(--grey-700);
    transform: rotate(90deg);
    transition: transform .2s;
}
.od_section__caret.is-open { transform: rotate(-90deg); }

.od_delivery_card {
    padding: 12px 10px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: 0 0 10.5px 0 rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    line-height: 1.4;
}
.od_delivery_card__name {
    font-weight: 700;
    color: var(--primary-sub);
}
.od_delivery_card__line {
    color: var(--grey-700);
}
.od_delivery_card__memo {
    color: var(--grey-400);
}

.od_product {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.od_product__brand {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--grey-700);
}
.od_product__chips {
    display: flex;
    align-items: center;
    gap: 8px;
}
.od_product__time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 4px 8px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-pill);
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
}
.od_product__time svg { width: 18px; height: 18px; color: #F34829; flex-shrink: 0; }
.od_product__people {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 2px 8px;
    background: var(--primary-200);
    border-radius: var(--radius-pill);
    font-size: 16px;
    line-height: 24px;
    color: var(--primary);
}
.od_product__people svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; }
.od_product__people b { font-weight: 700; margin-left: 2px; }

.od_product__body {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.od_product__thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    background: #d0d0d0;
    overflow: hidden;
}
.od_product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.od_product__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.od_product__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.32px;
    color: var(--grey-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.od_product__price_row {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex-wrap: wrap;
}

.od_product__option {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    background: var(--grey-60);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
}
.od_product__option_label { font-weight: 700; }
.od_product__option_value {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.od_product__option_value .sep { color: #d4d4d4; }

.od_actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.od_actions--2 { grid-template-columns: 1fr 1fr; }
.od_actions .btn { width: 100%; }

.od_pay_summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    line-height: 24px;
}
.od_pay_summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    color: var(--grey-600);
}
.od_pay_summary__row .val {
    color: var(--grey-900);
    font-weight: 400;
}
.od_pay_summary__row--group .label {
    color: var(--grey-700);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.od_pay_summary__accordion {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: var(--grey-700);
}
.od_pay_summary__accordion svg {
    width: 24px; height: 24px;
    transition: transform .2s;
}
.od_pay_summary__accordion.is-open svg { transform: rotate(180deg); }
.od_pay_summary__sub {
    padding-left: 0;
}
.od_pay_summary__dashed {
    height: 0;
    border-top: 1px dashed var(--grey-600);
    margin: 2px 0;
}
.od_pay_summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}
.od_pay_summary__total .label { color: var(--grey-700); }
.od_pay_summary__total .val { color: #ff0000; }

.od_pay_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 20px;
    margin: 0 -20px;
}
.od_pay_head__title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
}
.od_pay_head__receipt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-600);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

.od_notice_bar {
    margin-top: 10px;
    background: var(--grey-700);
    color: var(--white);
    padding: 10px 20px;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
}

.od_delete_btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--grey-600);
    cursor: pointer;
}

/* =========================
   Review Write (리뷰 작성)
========================= */
.rv_page { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.rv_product {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rv_product__brand {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--grey-700);
}
.rv_product__body {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.rv_product__thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    background: #d0d0d0;
    overflow: hidden;
}
.rv_product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv_product__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rv_product__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.32px;
    color: var(--grey-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rv_rating {
    height: 44px;
    border: 1px solid var(--grey-250);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.rv_rating__star {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-300);
    cursor: pointer;
}
.rv_rating__star.is-active { color: #f5a623; }

.rv_field { display: flex; flex-direction: column; gap: 10px; }
.rv_field__label {
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
}
.rv_field__textarea_wrap { position: relative; }
.rv_field__textarea {
    width: 100%;
    height: 300px;
    padding: 12px 12px 36px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    resize: none;
}
.rv_field__textarea::placeholder { color: #a2a2a2; }
.rv_field__counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 14px;
    line-height: 21px;
    color: #a2a2a2;
    pointer-events: none;
}

.rv_photo_add {
    width: 100%;
    height: 50px;
    border: 1px solid var(--primary-sub);
    border-radius: var(--radius-sm);
    background: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-900);
    cursor: pointer;
}
.rv_photo_add svg { width: 20px; height: 20px; }
.rv_photo_add img { width: 20px; height: 20px; object-fit: contain; }
.rv_rating__star img { width: 24px; height: 24px; object-fit: contain; display: block; }
.rv_photo_add__count { font-size: 14px; color: var(--grey-900); }

.rv_photo_list {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.rv_photo_list::-webkit-scrollbar { display: none; }
.rv_photo_list .rv_photo_item { flex: 0 0 100px; }
.rv_photo_item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    background: #dcdcdc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-700);
    font-size: 16px;
}
.rv_photo_item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv_photo_item__del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--grey-700);
    cursor: pointer;
}

/* =========================
   Seller Detail — Hero(cover + profile card)
========================= */
.seller_hero {
    position: relative;
    background: var(--white);
}
.seller_hero__cover {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--grey-100);
}
.seller_hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.seller_hero__back {
    position: absolute;
    top: 13px;
    left: 12px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--white);
    z-index: 3;
}
.seller_hero__back img { width: 32px; height: 32px; object-fit: contain; }

/* 판매자 소개 — 스크롤 시 상단 고정 헤더 (상품상세 패턴) */
.seller_hero__header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    z-index: 5;
    background: transparent;
}
.seller_hero__header_back {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.seller_hero__header.is-scrolled .seller_hero__header_back { filter: none; }
.seller_hero__header_back img { width: 32px; height: 32px; object-fit: contain; }
.seller_hero__header_title {
    flex: 1;
    margin: 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--grey-900, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.seller_hero__header.is-scrolled {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--frame-max);
    height: 50px;
    background: var(--white);
    z-index: 30;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.seller_hero__card {
    position: relative;
    margin: -32px 20px 0;
    padding: 15px 9px 18px;
    background: var(--white);
    border: 1px solid var(--grey-80);
    border-radius: 10px;
    box-shadow: 0 0 11.2px rgba(0,0,0,0.05);
    z-index: 2;
}
.seller_hero__profile {
    display: flex;
    align-items: center;
    gap: 8px;
}
.seller_hero__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #bdbdbd;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.seller_hero__avatar.no_img_avatar svg { width: 28px; height: 28px; color: var(--white); }
.seller_hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.seller_hero__name {
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
}
.seller_hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--grey-700);
    font-size: 16px;
    line-height: 24px;
}
.seller_hero__rating svg { color: #f6b72b; width: 16px; height: 16px; }
.seller_hero__rating img { width: 16px; height: 16px; }
.seller_hero__rating .txt_grey { color: var(--grey-700); }
.seller_hero__divider {
    margin: 14px -9px 0;
    height: 1px;
    background: var(--grey-130);
}
.seller_hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 11px;
}
.seller_hero__tag {
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    background: var(--primary-200);
    border-radius: var(--radius-pill);
    color: var(--primary);
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}
.seller_hero__stats {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.seller_hero__stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
}
.seller_hero__stat__ico {
    width: 16px; height: 16px;
    color: var(--primary-sub);
    flex-shrink: 0;
    object-fit: contain;
}
.seller_hero__stat__label { color: var(--grey-700); }
.seller_hero__stat__sep {
    width: 1px; height: 8px;
    background: #d8d8d8;
    margin: 0 4px;
    display: inline-block;
}
.seller_hero__stat__value { color: var(--primary); font-weight: 700; }

/* Tabs */
.seller_tabs {
    display: flex;
    align-items: center;
    background: var(--white);
    margin-top: 20px;
    position: sticky;
    top: 50px;
    z-index: 10;
}
.seller_tabs__item {
    flex: 1;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 0;
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-300);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.seller_tabs__item::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--grey-300);
}
.seller_tabs__item.is-active {
    color: var(--primary);
}
.seller_tabs__item.is-active::after {
    background: var(--primary);
}

/* Panels */
.seller_panel { display: none; padding: 20px 20px 0; }
.seller_panel.is-active { display: block; }
.seller_panel__title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
    margin: 0 0 14px;
}

/* Info panel */
.seller_info_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}
.seller_info_row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 14px;
    line-height: 21px;
}
.seller_info_row dt {
    color: var(--grey-700);
    font-weight: 700;
    flex-shrink: 0;
    margin: 0;
}
.seller_info_row dd {
    color: var(--grey-700);
    font-weight: 400;
    margin: 0;
}
.seller_info_notice {
    margin: 30px -20px 0;
    padding: 20px;
    background: var(--grey-80);
    color: var(--grey-600);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

/* Notice list */
.seller_notice_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
}
.seller_notice_row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border: 0;
    text-align: left;
    background: transparent;
    width: 100%;
}
.seller_notice_row::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--grey-200);
}
.seller_notice_row__date {
    color: var(--grey-400);
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}
.seller_notice_row__title {
    color: var(--grey-700);
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}

/* Notice detail */
.seller_notice_detail__title {
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
    margin: 0;
}
.seller_notice_detail__date {
    margin-top: 6px;
    color: var(--grey-500);
    font-size: 12px; line-height: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--grey-150);
}
.seller_notice_detail__body {
    margin-top: 16px;
    color: var(--grey-700);
    font-size: 14px; line-height: 21px;
}
.seller_notice_detail__img {
    margin-top: 16px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--grey-100);
}
.seller_notice_detail__img img { width: 100%; display: block; }

/* Review filters */
.seller_review_filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.seller_review_filter {
    height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid #e0dddd;
    color: var(--grey-700);
    font-size: 14px;
    line-height: 21px;
}
.seller_review_filter.is-active {
    background: var(--primary-150);
    border-color: var(--primary-sub);
    color: var(--grey-700);
}

/* Review card */
.seller_review_list { display: flex; flex-direction: column; gap: 20px; }
.seller_review_card {
    padding: 11px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--grey-150);
    box-shadow: 0 0 12.3px 3px rgba(205, 205, 205, 0.25);
}
.seller_review_card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.seller_review_card__avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    background: #bdbdbd;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.seller_review_card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seller_review_card__avatar.no_img_avatar svg { width: 20px; height: 20px; color: var(--white); }
.seller_review_card__nick {
    font-size: 14px; line-height: 21px; font-weight: 700; color: var(--grey-700);
}
.seller_review_card__date {
    margin-left: auto;
    color: #aaa;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}
.seller_review_card__prod {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.seller_review_card__prod img {
    width: 64px; height: 64px; border-radius: 8px; object-fit: cover;
    background: var(--grey-300);
    flex-shrink: 0;
}
.seller_review_card__prod_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* 작성한 리뷰 / 판매자 소개 리뷰 카드: 옵션+별점(meta)을 좌측 썸네일(64px) 하단에 맞춤 */
.rv_mg_written .seller_review_card__prod_info,
.seller_review_list .seller_review_card__prod_info {
    min-height: 64px;
    justify-content: space-between;
}
.seller_review_card__prod_title {
    font-size: 14px; line-height: 21px;
    color: #000;
    font-weight: 600;
    letter-spacing: -0.28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.seller_review_card__prod_meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    width: 100%;
    min-width: 0;
}
/* 판매자 리뷰 카드 컨텍스트에서는 옵션이 남는 가로폭을 가득 채우도록
   기본 rv_mg_written 스타일의 152px 제한을 해제 */
.seller_review_card__prod_meta .rv_mg_written__option_wrap {
    display: flex;
    /* 짧을 땐 콘텐츠 폭만, 길어서 공간이 부족하면 줄어들어 ellipsis (grow 안 함) */
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
}
.seller_review_card__prod_meta .rv_mg_written__option {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
}
.seller_review_card__prod_meta .rv_mg_written__option_toggle {
    width: 19px;
    height: 13px;
    flex-shrink: 0;
}
.seller_review_card__prod_meta_sep {
    color: #aaa;
}
.seller_review_card__rating {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--grey-700);
    font-size: 14px;
    line-height: 21px;
}
.seller_review_card__rating svg { color: #f6b72b; }
.seller_review_card__rating img {
    width: 16px; height: 16px;
    background: none;
    border-radius: 0;
    flex-shrink: 0;
}
.seller_review_card__divider {
    margin: 12px 0;
    height: 1px;
    background: var(--grey-150);
}
.seller_review_card__text {
    color: #000;
    font-size: 14px; line-height: 21px;
    white-space: pre-line;
    word-break: break-all;
}
.seller_review_card__photo {
    margin-top: 10px;
    position: relative;
    width: 100%;
    aspect-ratio: 296 / 190;
    border-radius: 8px;
    overflow: hidden;
    background: var(--grey-100);
    padding: 0;
    border: 0;
    display: block;
    cursor: pointer;
}
.seller_review_card__photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.seller_review_card__photo_count {
    position: absolute;
    left: 10px;
    bottom: 10px;
    height: 20px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: rgba(0,0,0,0.4);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    line-height: 12px;
    color: var(--white);
}
.seller_review_card__photo_count em { font-weight: 400; font-style: normal; color: var(--white); }
.seller_review_card__photo_count span { color: var(--grey-130); font-weight: 300; }
.seller_review_card__reactions {
    margin-top: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.seller_review_card__report {
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--grey-500);
    font-size: 12px;
    line-height: 18px;
    text-decoration: underline;
    cursor: pointer;
}
.seller_review_card__reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 25px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--white);
    border: 1px solid #dedede;
    font-size: 14px;
    line-height: 21px;
    color: #000;
}
.seller_review_card__reaction__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    line-height: 1;
}
.seller_review_card__reaction__count {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}

/* Inquiry accordion form */
.seller_inquiry_form__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: 0 0 14px;
    background: transparent;
    border: 0;
    color: var(--grey-700);
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.seller_inquiry_form__caret {
    width: 24px; height: 24px;
    color: var(--grey-700);
    flex-shrink: 0;
    transition: transform .2s ease;
}
.seller_inquiry_form__head[aria-expanded="true"] .seller_inquiry_form__caret {
    transform: rotate(180deg);
}
.seller_inquiry_form {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}
.seller_inquiry_form .input-field {
    height: 50px;
    padding: 0 12px;
    font-size: 16px;
    line-height: 24px;
}
.seller_inquiry_form .input-field::placeholder { color: #a2a2a2; }
.seller_inquiry_form .julgi_cate_select,
.seller_inquiry_form .julgi_cate_select.is-placeholder {
    background: var(--white);
    border-color: var(--grey-300);
}
.seller_inquiry_form .julgi_write__textarea_wrap .textarea-field {
    min-height: 300px;
    padding: 12px;
}
.seller_inquiry_form__submit { margin-top: 10px; }

/* Inquiry history */
.seller_inquiry_history {
    border-top: 10px solid var(--grey-80);
    margin: 0 -20px;
    padding: 30px 20px 0;
}
.seller_inquiry_history__title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--grey-700);
    margin: 0 0 20px;
}
.seller_inquiry_card {
    background: var(--white);
    border: 1px solid var(--grey-130);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.seller_inquiry_card__q_box {
    background: var(--white);
    transition: background .15s ease;
    width: 100%;
    text-align: left;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: block;
}
.seller_inquiry_card.is-open .seller_inquiry_card__q_box { background: var(--grey-80); }
.seller_inquiry_card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 0;
}
.seller_inquiry_card__cate {
    background: #424242;
    color: var(--white);
    font-size: 12px; line-height: 18px; font-weight: 400;
    height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    display: inline-flex; align-items: center;
}
.seller_inquiry_card__date {
    margin-left: auto;
    color: var(--grey-400);
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}
.seller_inquiry_card__state {
    display: inline-flex;
    align-items: center;
    background: transparent;
    padding: 0;
    height: auto;
    color: #ffcc4d;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    border-radius: 0;
}
.seller_inquiry_card__state.is-done { color: var(--primary-sub); }
.seller_inquiry_card__title_row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
}
.seller_inquiry_card__q {
    margin: 0;
    flex: 1;
    font-size: 16px; line-height: 24px;
    font-weight: 700;
    color: var(--grey-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.seller_inquiry_card__caret {
    width: 24px; height: 24px;
    color: var(--grey-700);
    flex-shrink: 0;
    transition: transform .2s ease;
}
.seller_inquiry_card.is-open .seller_inquiry_card__caret { transform: rotate(180deg); }
.seller_inquiry_card__body {
    display: none;
    padding: 0 10px 10px;
    color: var(--grey-700);
    font-size: 16px;
    line-height: 24px;
}
.seller_inquiry_card.is-open .seller_inquiry_card__body { display: block; }
.seller_inquiry_card__answer {
    display: none;
    background: var(--white);
    padding: 10px 10px 10px;
}
.seller_inquiry_card.is-open .seller_inquiry_card__answer { display: block; }
.seller_inquiry_card__answer_head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.seller_inquiry_card__answer_label {
    background: var(--primary);
    color: var(--white);
    font-size: 12px; line-height: 18px; font-weight: 400;
    height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    display: inline-flex; align-items: center;
}
.seller_inquiry_card__answer_date {
    margin-left: auto;
    color: var(--grey-400);
    font-size: 14px; line-height: 21px;
}
.seller_inquiry_card__a {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--grey-700);
    font-size: 16px;
    line-height: 24px;
}
.seller_inquiry_card__a--pending {
    font-size: 16px;
    line-height: 24px;
}

/* Brand footer + floating bar */
.seller_footer {
    margin-top: 30px;
    padding: 32px 20px 110px;
    background: var(--grey-60);
}
.seller_footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}
.seller_footer__logo {
    width: 120px; height: 50px;
    background: #cacaca;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 30px; font-weight: 700; color: var(--grey-700);
    overflow: hidden;
}
.seller_footer__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seller_footer__brand_name {
    font-size: 14px; line-height: 21px; color: var(--grey-700); font-weight: 400;
    text-align: center;
}
.seller_footer__brand_desc {
    font-size: 14px; line-height: 21px; color: var(--grey-700); font-weight: 400; margin: 0;
    text-align: center;
}
.seller_floating_bar {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 50;
}
.seller_floating_bar__btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-600);
    pointer-events: auto;
}


/* =========================
   줄기톡 (community)
========================= */
.julgi_header {
    position: sticky; top: 0; z-index: 30;
    height: 50px; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--white);
}
.julgi_header__title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 20px; line-height: 30px; font-weight: 700; color: var(--grey-700);
}
.julgi_header__title img { width: 24px; height: 24px; }
.julgi_header__right { display: inline-flex; align-items: center; gap: 12px; }
.julgi_header__right a { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--grey-700); }
.julgi_header__right a img { width: 24px; height: 24px; }

.julgi_search {
    margin: 8px 20px 0;
    height: 40px; padding: 8px 20px;
    background: var(--grey-60);
    border-radius: var(--radius-pill);
    display: flex; align-items: center; gap: 10px;
    color: var(--grey-400);
    font-size: 14px; line-height: 24px;
}
.julgi_search input {
    flex: 1; border: 0; background: transparent; outline: none;
    color: var(--grey-700); font-size: 14px; line-height: 24px;
    font-family: var(--font-base);
}
.julgi_search input::placeholder { color: var(--grey-400); }

.julgi_promo {
    margin: 14px 20px 0;
    height: 80px; padding: 19px 10px;
    background: var(--primary-100);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; gap: 10px;
}
.julgi_promo__icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.julgi_promo__icon img { width: 40px; height: 40px; object-fit: contain; }
.julgi_promo__text { display: flex; flex-direction: column; gap: 4px; }
.julgi_promo__text strong { font-size: 14px; line-height: 21px; font-weight: 700; color: var(--grey-700); }
.julgi_promo__text span { font-size: 12px; line-height: 18px; color: var(--grey-600); }

.julgi_cate {
    display: flex; gap: 14px;
    padding: 16px 20px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.julgi_cate::-webkit-scrollbar { display: none; }
.julgi_cate__item {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--grey-600);
}
.julgi_cate__thumb {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--grey-80);
    overflow: hidden;
    border: 2px solid transparent;
    display: inline-flex; align-items: center; justify-content: center;
}
.julgi_cate__thumb img { width: 100%; height: 100%; object-fit: cover; }
.julgi_cate__label { font-size: 12px; line-height: 18px; font-weight: 500; }
.julgi_cate__item.is-active .julgi_cate__thumb { border-color: var(--primary-sub); }
.julgi_cate__item.is-active .julgi_cate__label { color: var(--primary-sub); font-weight: 700; }

.julgi_filter {
    padding: 12px 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.julgi_filter__sort {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 14px; font-weight: 400; color: var(--grey-700);
    background: transparent; border: 0;
}
.julgi_filter__sort svg { width: 16px; height: 16px; }
.julgi_filter__tag {
    height: 30px; padding: 4px 12px;
    border: 1px solid var(--primary-sub);
    border-radius: var(--radius-pill);
    color: var(--primary-sub);
    font-size: 14px; line-height: 21px; font-weight: 500;
    background: var(--white);
}
.julgi_filter__tag.is-active { background: var(--primary-sub); color: var(--white); }

.julgi_list { padding: 16px 20px 100px; display: flex; flex-direction: column; gap: 20px; }
.julgi_card {
    background: var(--white);
    border: 0;
    border-radius: var(--radius-sm);
    padding: 13px 12px 18px;
    display: flex; flex-direction: column; gap: 9px;
    box-shadow: 0 0 4.5px rgba(182, 182, 182, 0.5);
}
.julgi_card__head {
    display: flex; align-items: center; justify-content: space-between;
}
.julgi_card__badge {
    display: inline-flex; align-items: center;
    height: 20px; padding: 1px 8px; border-radius: var(--radius-xs);
    background: #424242;
    color: var(--white);
    font-size: 12px; line-height: 18px; font-weight: 400;
}
.julgi_card__date { font-size: 14px; line-height: 21px; font-weight: 400; color: #AAA; }
.julgi_card__user { display: inline-flex; align-items: center; gap: 8px; }
.julgi_card__avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: #bdbdbd;
    overflow: hidden; flex-shrink: 0;
}
.julgi_card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.julgi_card__nick { font-size: 12px; line-height: 18px; color: var(--grey-600); }
.julgi_card__body { display: flex; gap: 8px; align-items: flex-start; }
.julgi_card__text {
    flex: 1; display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
}
.julgi_card__title {
    font-size: 14px; line-height: 21px; font-weight: 600; color: #000;
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}
.julgi_card__desc {
    font-size: 12px; line-height: 18px; font-weight: 400; color: #000;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.julgi_card__thumb {
    width: 80px; height: 80px; flex-shrink: 0;
    border-radius: var(--radius-xs); overflow: hidden;
    background: var(--grey-100);
}
.julgi_card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.julgi_card__meta {
    display: flex; gap: 8px; align-items: center;
    font-size: 14px; line-height: 21px; color: #000;
}
.julgi_card__meta--pills span,
.julgi_card__meta--pills .julgi_card__like {
    height: 25px;
    border: 1px solid #dedede;
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    background: var(--white);
}
.julgi_card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.julgi_card__meta svg { width: 20px; height: 20px; }
.julgi_card__meta img { width: 20px; height: 20px; object-fit: contain; }
.julgi_card__like {
    display: inline-flex; align-items: center; gap: 4px;
    font: inherit; color: inherit; cursor: pointer;
    border: 0; background: transparent;
}
.julgi_card__like.is-liked img {
    filter: brightness(0) saturate(100%) invert(38%) sepia(93%) saturate(7471%) hue-rotate(355deg) brightness(101%) contrast(112%);
}

.julgi_fab {
    position: fixed;
    right: max(20px, calc((100vw - var(--frame-max)) / 2 + 20px));
    bottom: 80px;
    height: 40px; padding: 0 12px;
    background: var(--primary-sub); color: #FFF;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 12px rgba(91,64,88,0.3);
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 16px; line-height: 24px; font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    z-index: 40;
}
.julgi_fab svg { width: 18px; height: 18px; }

/* bottomsheet modal — 제안하기 (Figma node 1:2941) */
.julgi_sheet { border-radius: 24px 24px 0 0; }
.julgi_sheet__body {
    padding: 47px 20px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 0;
}
.julgi_sheet__close {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px;
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    padding: 0;
}
.julgi_sheet__close img { width: 100%; height: 100%; object-fit: contain; }
.julgi_sheet__coin {
    height: 182px;
    flex-shrink: 0;
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.julgi_sheet__coin img { max-width: 100%; max-height: 100%; object-fit: contain; }
.julgi_sheet__title {
    font-size: 20px; line-height: 30px; font-weight: 700; color: var(--grey-700);
    text-align: center; margin: 0 0 4px;
}
.julgi_sheet__desc {
    font-size: 16px; line-height: 24px; font-weight: 400; color: var(--grey-700);
    text-align: center; margin: 0;
}
.julgi_sheet__cta_wrap { padding: 6px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 0; }
.julgi_sheet__cta_btn {
    height: 52px;
    font-size: 20px; line-height: 30px; font-weight: 700;
    border-radius: var(--radius-sm);
}

/* 상세 — 게시글 본문 */
.post_view { padding: 0 20px 120px; }
.post_view__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0 20px;
}
.post_view__head_left { display: inline-flex; align-items: center; gap: 8px; }
.post_view__badge {
    padding: 3px 8px; border-radius: var(--radius-xs);
    background: #424242; color: var(--white);
    font-size: 12px; line-height: 18px; font-weight: 500;
}
.post_view__meta { font-size: 14px; line-height: 21px; font-weight: 400; color: #aaa; }
.post_view__user {
    display: flex; align-items: center; gap: 10px; padding-bottom: 12px;
}
.post_view__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #bdbdbd; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.post_view__avatar img { width: 100%; height: 100%; object-fit: cover; }
.no_img_avatar svg { width: 24px; height: 24px; color: var(--white); }
.post_view__nick { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--grey-700); }
.post_view__title { font-size: 16px; line-height: 24px; font-weight: 700; color: #000; margin: 0 0 20px; }
.post_view__product {
    display: inline-flex; padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: #e1e1e1;
    color: var(--grey-700);
    font-size: 12px; line-height: 18px; font-weight: 400;
    margin-bottom: 8px;
}
.post_view__product_name {
    font-size: 12px; line-height: 18px; font-weight: 400; color: #000;
    margin: 0 0 10px;
}
.post_view__body {
    font-size: 14px; line-height: 21px; font-weight: 400; color: #000;
    margin: 0 0 14px; white-space: pre-line;
}
.post_view__photo {
    width: 100%; aspect-ratio: 320/150;
    border-radius: var(--radius-sm);
    background: var(--grey-100);
    overflow: hidden;
    position: relative;
}
.post_view__photo img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; touch-action: pan-y; }
.post_view__photo { touch-action: pan-y; }
.post_view__photo_track {
    position: absolute; inset: 0;
    display: flex;
    transition: transform .3s ease;
    will-change: transform;
    touch-action: pan-y;
}
.post_view__photo_slide {
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
}
.post_view__photo_count {
    position: absolute; left: 10px; bottom: 10px;
    height: 20px; padding: 0 8px; gap: 2px;
    background: rgba(0,0,0,0.4);
    color: var(--white); font-size: 10px; line-height: 12px; font-weight: 400;
    border-radius: var(--radius-pill);
    display: inline-flex; align-items: center;
}
.post_view__photo_count em { color: #d9d9d9; font-style: normal; font-weight: 300; }
.post_view__actions {
    display: flex;
    height: 50px;
    background: #fbfbfd;
    margin: 36px -20px 0;
    border-top: 1px solid var(--grey-80);
    border-bottom: 1px solid var(--grey-80);
}
.post_view__photo { display: block; padding: 0; border: 0; cursor: pointer; }
.post_view__act {
    flex: 1;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    color: #000; font-size: 14px; line-height: 21px; font-weight: 400;
    background: #fbfbfd; border: 0;
}
.post_view__act::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 21px;
    background: #d8d8d8;
}
.post_view__act:last-child::after { display: none; }
.post_view__act--static { cursor: default; }
.post_view__act svg { width: 20px; height: 20px; }
.post_view__act_ico {
    width: 20px; height: 20px; aspect-ratio: 1/1;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.post_view__act_ico img { width: 100%; height: 100%; object-fit: contain; }
.post_view__act { color: #000; }
.post_view__act span { color: #000; }
.post_view__more_btn {
    background: transparent; border: 0; padding: 0;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--grey-700);
    flex: none;
}

.post_menu {
    position: absolute;
    right: 10px;
    top: 30px;
    min-width: 88px;
    padding: 8px 0;
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(33,33,33,0.12);
    z-index: 20;
    display: none;
}
.post_menu.is-open { display: block; }
.post_menu { min-width: 121px; padding: 0; border: 1px solid var(--grey-200); box-shadow: none; }
.post_menu button {
    width: 100%; height: 50px;
    padding: 0 8px;
    background: transparent; border: 0;
    text-align: left;
    font-size: 16px; line-height: 24px; color: var(--grey-700);
}
.post_menu button + button { border-top: 0; }
.post_menu button:hover,
.post_menu button:focus-visible { background: #f7d6ff; outline: 0; }

/* 댓글 */
.comment_list { display: flex; flex-direction: column; padding: 14px 0 0; }
.comment_group { padding: 20px 0; }
.comment_group > * + * { margin-top: 20px; }
.comment_item { padding: 0; position: relative; }
.comment_item + .comment_item { border-top: 0; }
.comment_item--reply { padding-left: 40px; }
.comment_item__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.comment_item__user { display: inline-flex; align-items: center; gap: 8px; }
.comment_item__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.comment_item__user { display: inline-flex; align-items: flex-start; gap: 10px; }
.comment_item__user > span:not(.comment_item__avatar) { display: inline-block; }
.comment_item__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #bdbdbd; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.comment_item__avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment_item__nick { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--grey-700); display: block; }
.comment_item__date { font-size: 12px; line-height: 18px; font-weight: 400; color: #aaa; display: block; }
.comment_item__edited { color: #aaa; margin-left: 2px; }
.comment_item__more {
    background: transparent; border: 0;
    width: 16px; height: 16px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--grey-600);
}
.comment_item__more svg { width: 16px; height: 16px; }
.comment_item__more_wrap { position: relative; }
.comment_menu {
    position: absolute; right: 0; top: 22px;
    min-width: 121px; padding: 0;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-sm);
    z-index: 20;
    display: none;
}
.comment_menu.is-open { display: block; }
.comment_menu button {
    width: 100%; height: 50px;
    padding: 0 8px;
    background: transparent; border: 0;
    text-align: left;
    font-size: 16px; line-height: 24px; color: var(--grey-700);
}
.comment_menu button:hover,
.comment_menu button:focus-visible { background: #f7d6ff; outline: 0; }
.comment_item__body {
    font-size: 12px; line-height: 18px; color: var(--grey-700);
    margin: 0 0 8px; padding-left: 42px;
}
.comment_item__actions { display: flex; gap: 8px; padding-left: 42px; }
.comment_item__act {
    height: 25px; padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: #000;
    font-size: 14px; line-height: 21px; font-weight: 400;
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid #dedede;
}
.comment_item__act svg { width: 20px; height: 20px; }
.comment_item__act_ico {
    width: 20px; height: 20px; aspect-ratio: 1/1;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.comment_item__act_ico img { width: 100%; height: 100%; object-fit: contain; }
.comment_item__user_meta { display: inline-flex; flex-direction: column; }
.comment_item__act em { color: var(--primary-sub); font-style: normal; }
.comment_item__act.is-active { color: #000; background: var(--white); border-color: #dedede; }
.comment_item__more_replies {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: 0;
    font-size: 12px; line-height: 18px; color: var(--grey-700); font-weight: 400;
    padding: 6px 0 2px; margin-left: 42px;
}
.comment_item__more_replies svg { width: 20px; height: 20px; }
.comment_item__reply_form {
    display: flex; gap: 6px;
    margin: 12px 0 0 42px;
}
.comment_item__reply_input {
    flex: 1;
    height: 40px;
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid #e7e7e7;
    border-radius: var(--radius-sm);
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
    font-family: var(--font-base);
    outline: none;
    min-width: 0;
}
.comment_item__reply_input::placeholder { color: var(--grey-400); }
.comment_item__reply_submit {
    height: 40px; padding: 8px 12px;
    background: var(--white); color: var(--grey-700);
    border: 1px solid #e7e7e7;
    border-radius: var(--radius-sm);
    font-size: 14px; line-height: 21px; font-weight: 400;
    flex: none;
    cursor: pointer;
}
.comment_item__reply_submit.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.comment_item__replies { display: none; }
.comment_item__replies.is-open { display: block; }

.comment_bar_wrap {
    position: fixed; left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 100%; max-width: 500px;
    z-index: 50;
    background: var(--white);
}
.comment_bar {
    position: relative;
    width: 100%;
    min-height: 60px;
    padding: 10px 20px;
    background: var(--white);
    border-top: 1px solid #ececec;
    box-sizing: border-box;
    display: flex; align-items: center; gap: 10px;
}
.comment_bar__input {
    flex: 1;
    min-height: 24px; max-height: 120px; padding: 0;
    background: transparent;
    border: 0; outline: none;
    font-size: 16px; line-height: 24px; color: var(--grey-700);
    font-family: var(--font-base);
    resize: none;
    vertical-align: middle;
    overflow-y: auto;
}
.comment_bar__input::placeholder { color: #b7b7b7; }
.comment_bar__submit {
    height: 40px; padding: 8px 12px;
    background: var(--white); color: var(--grey-700);
    border: 1px solid #e7e7e7;
    border-radius: var(--radius-sm);
    font-size: 16px; line-height: 24px; font-weight: 400;
    cursor: pointer;
}
.comment_bar__submit.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.comment_bar__submit:disabled, .comment_bar__submit.is-disabled {
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: var(--white);
    cursor: not-allowed;
}

.comment_edit_bar {
    position: relative;
    width: 100%;
    height: 32px;
    padding: 0 20px;
    background: var(--white);
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    box-sizing: border-box;
    display: none;
    align-items: center; justify-content: space-between;
}
.comment_edit_bar.is-open { display: flex; }
.comment_edit_bar__label {
    font-size: 14px; line-height: 30px; font-weight: 600; color: var(--grey-700);
}
.comment_edit_bar__close {
    width: 30px; height: 30px; padding: 0;
    background: transparent; border: 0;
    color: var(--grey-700);
    display: inline-flex; align-items: center; justify-content: center;
}

/* 원본 이미지 확대 팝업 */
.photo_viewer {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 200;
    display: none;
}
.photo_viewer.is-open { display: block; }
.photo_viewer__close {
    position: absolute; top: 31px; right: 16px;
    width: 36px; height: 36px;
    background: transparent; border: 0;
    color: var(--white);
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
}
.photo_viewer__count {
    position: absolute; top: 35px; left: 50%; transform: translateX(-50%);
    height: 28px;
    padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    background: rgba(0,0,0,0.4);
    border-radius: 100px;
    color: var(--white);
    font-size: 16px; line-height: 24px;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}
.photo_viewer__count__current { font-weight: 600; color: var(--white); }
.photo_viewer__count__sep,
.photo_viewer__count__total { font-weight: 300; color: var(--grey-130); }
.photo_viewer__track {
    position: absolute; inset: 0;
    display: flex;
    transition: transform .3s ease;
    will-change: transform;
    touch-action: pan-y;
}
.photo_viewer__slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 0;
}
.photo_viewer__slide img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: pan-y;
}
.photo_viewer__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    background: rgba(0,0,0,0.4); color: var(--white);
    border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 2;
}
.photo_viewer__nav--prev { left: 12px; }
.photo_viewer__nav--next { right: 12px; }
.photo_viewer__dots {
    position: absolute; bottom: 28px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px;
    z-index: 2;
}
.photo_viewer__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.4);
}
.photo_viewer__dot.is-active { background: var(--white); width: 18px; border-radius: 3px; }

/* 신고하기 */
.report_list {
    padding: 0;
    display: flex; flex-direction: column; gap: 0;
}
.report_list__title {
    height: 50px; padding: 0 20px;
    display: flex; align-items: center;
    font-size: 20px; line-height: 30px; font-weight: 700; color: var(--grey-700);
    margin: 0;
}
.report_item {
    height: 50px; padding: 13px 20px;
    display: flex; align-items: center; gap: 4px;
    background: var(--white);
    cursor: pointer;
}
.report_item input { position: absolute; opacity: 0; pointer-events: none; }
.report_item__radio {
    width: 24px; height: 24px;
    background: var(--radio-svg-off) no-repeat center / 24px 24px;
    flex-shrink: 0;
}
.report_item input:checked + .report_item__radio {
    background: var(--radio-svg-on) no-repeat center / 24px 24px;
}
.report_item__label { font-size: 16px; line-height: 24px; color: var(--grey-700); }

.report_confirm_text {
    overflow: hidden;
    color: var(--grey-700);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-base);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 4px;
}

/* 줄기톡 작성/수정 */
.julgi_write { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 20px; position: relative; }
.julgi_write__field { position: relative; }
.julgi_cate_select {
    width: 100%;
    height: 50px;
    padding: 0 10px;
    background: var(--primary-150);
    border: 1px solid var(--primary-sub);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 16px; font-weight: 400; color: var(--grey-700);
    font-family: var(--font-base);
    line-height: 24px;
}
.julgi_cate_select.is-placeholder {
    background: var(--white);
    border-color: var(--grey-300);
    color: #a2a2a2;
}
.julgi_write__field > .dropdown_list,
.addr_dropdown_wrap > .dropdown_list {
    position: absolute; left: 0; right: 0; top: 54px;
    width: 100%;
    z-index: 25;
}
.addr_dropdown_wrap > .julgi_cate_select {
    height: 40px;
    font-size: 14px;
    font-weight: 400;
}
.addr_dropdown_wrap > .dropdown_list {
    top: 44px;
}
.addr_dropdown_wrap .dropdown_list__item {
    font-size: 14px;
}
.addr_dropdown_wrap { position: relative; }
.julgi_write .input-field {
    height: 50px;
    padding: 0 12px;
    font-size: 16px;
    line-height: 24px;
}
.julgi_write .input-field::placeholder { color: #a2a2a2; }
.julgi_write__textarea_wrap { position: relative; }
.julgi_write__textarea_wrap .textarea-field { min-height: 300px; padding: 12px 12px 32px; }
.julgi_write__counter {
    position: absolute; right: 14px; bottom: 12px;
    font-size: 14px; line-height: 21px; color: #a2a2a2;
}
.julgi_write .photo_add {
    color: #000;
    font-size: 16px;
    font-weight: 400;
}
.julgi_write .photo_add__count {
    font-size: 14px;
    color: #000;
}
.julgi_write .form-text--error {
    display: flex; align-items: center; gap: 8px;
    justify-content: center;
    font-size: 14px; line-height: 21px;
    color: var(--accent-red);
    margin-top: 12px;
}
.julgi_write .form-text--error img { width: 24px; height: 24px; flex-shrink: 0; }

/* =========================
   반품요청 (return request)
   ========================= */
.return_page {
    padding-bottom: 0px;
    background: var(--white);
}
.return_steps {
    padding: 20px;
}
.return_section {
    padding: 0 20px 20px;
}
.return_section__head {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -20px 10px;
    padding: 0 20px;
    border-bottom: 1px solid var(--grey-150);
}
.return_section__title {
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: var(--grey-700);
}
.return_section__amount {
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: #ff0000;
}
.return_section__notice {
    height: 50px;
    display: flex; align-items: center;
    margin: 0 -20px 10px;
    padding: 0 20px;
    border-bottom: 1px solid var(--grey-150);
    font-size: 14px; line-height: 21px;
    color: var(--primary-sub);
    font-weight: 700;
}
.return_reason_group {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 10px;
}
.return_reason_group + .return_reason_group { margin-top: 20px; }
.return_reason_group__label {
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
}
.return_reason_list {
    display: flex; flex-direction: column; gap: 10px;
}
.return_reason {
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    background: transparent; border: 0;
    padding: 0; cursor: pointer;
    text-align: left;
}
.return_reason__icon {
    flex: 0 0 24px;
    width: 24px; height: 24px;
    background: var(--radio-svg-off) no-repeat center / 20px 20px;
}
.return_reason.is-active .return_reason__icon {
    background: var(--radio-svg-on) no-repeat center / 24px 24px;
}
.return_reason__box {
    flex: 1;
    height: 40px;
    padding: 0 10px;
    background: var(--grey-60);
    border-radius: var(--radius-sm);
    display: flex; align-items: center;
    font-size: 16px; line-height: 24px;
    color: var(--grey-700);
}
.return_reason__detail_label {
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
    margin-top: 10px;
}
.return_reason__textarea {
    width: 100%;
    min-height: 300px;
    padding: 12px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    font: inherit;
    font-size: 16px; line-height: 24px;
    color: var(--grey-700);
    resize: vertical;
    margin-top: 10px;
    font-family: var(--font-base);
}
.return_reason__textarea::placeholder { color: #a2a2a2; }
.return_reason__photo_wrap {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 10px;
}

.return_deduct_row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 5px;
    font-size: 16px; line-height: 24px;
}
.return_deduct_row .label { color: var(--grey-600); }
.return_deduct_row .val { color: var(--grey-700); }
.return_section--compact { padding-bottom: 10px; }
/* 차감 반품비용: 구분선 ↔ 행 간격 10px(Figma). row margin-top 5px와 상쇄돼 10px 유지 */
.return_section--compact .return_section__head { margin-bottom: 10px; }
.bottom_cta--compact { padding: 5px 20px; }

/* FAQ 아코디언 */
.faq_list {
    display: flex; flex-direction: column;
    margin-top: 10px;
}
.faq_item + .faq_item { margin-top: 12px; } /* QA0608 #10: 20→12, 간격 축소(모바일 톤) */
.faq_item.is-open { border-radius: 0; }
.faq_item.is-open .faq_item__q { background: var(--grey-80); border-radius: 0; }
.faq_item.is-open .faq_item__a { border-radius: 0; }
.faq_item {
    background: var(--white);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.faq_item__q {
    width: 100%;
    min-height: 70px;
    padding: 10px;
    background: var(--white);
    border: 0;
    border-radius: var(--radius-sm);
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 10px;
    font-size: 16px; line-height: 24px;
    color: var(--grey-700);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-base);
}
.faq_item__q svg {
    width: 24px; height: 24px;
    flex-shrink: 0;
    transition: transform .2s;
    color: var(--grey-700);
}
.faq_item.is-open .faq_item__q svg { transform: rotate(180deg); }
.faq_item__a {
    display: none;
    padding: 10px;
    font-size: 16px; line-height: 24px;
    color: var(--grey-700);
    background: var(--white);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.faq_item.is-open .faq_item__a { display: block; }

/* 회수지 / 반품수거지 정보 */
.return_pickup {
    display: flex; flex-direction: column; gap: 5px;
    padding-top: 10px;
}
.return_pickup__label {
    font-size: 14px; line-height: 21px; font-weight: 700;
    color: var(--grey-700);
}
.return_pickup__line {
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
}
.return_pickup__change {
    align-self: flex-start;
    background: none; border: 0; padding: 0;
    font-size: 12px; line-height: 18px;
    color: var(--grey-700);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--font-base);
}

/* 반품 포장 유의사항 */
.return_warning {
    display: flex; flex-direction: column; gap: 5px;
    padding-top: 10px;
}
.return_warning__title {
    font-size: 14px; line-height: 21px; font-weight: 700;
    color: var(--primary-sub);
}
.return_warning__body {
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
}

/* 환불금액 세부 — od_pay_summary 확장: 액센트 total 색상은 재사용 */

/* 반품 상세 내역 상단 (신청일시/주문번호) */
.return_detail_head {
    padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.return_detail_head__date {
    display: flex; align-items: center; gap: 10px;
    color: var(--grey-700);
    margin: 0;
}
.return_detail_head__order {
    font-size: 16px; line-height: 24px;
    color: var(--grey-700);
    margin: 0;
}

/* 반품요청 완료 헤더 */
.return_complete_head {
    padding: 10px 20px;
    display: flex; flex-direction: column; gap: 5px; align-items: center;
    border-bottom: 1px solid var(--grey-150);
}
.return_complete_head__title {
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
}
.return_complete_head__meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
}
.return_complete_head__meta .sep { color: var(--grey-300); }

/* 완료 화면 CTA 2버튼(카드 아래) */
.return_complete_actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}
.return_complete_actions .btn { width: 100%; }

/* 반품요청 완료 하단 안내 박스 */
.return_notice_box {
    margin: 0;
    padding: 20px;
    background: var(--grey-80);
    color: var(--grey-600);
    font-size: 16px; line-height: 24px;
    display: flex; flex-direction: column; gap: 10px;
}
.return_notice_box h3 {
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-600);
    margin: 0;
}
.return_notice_box ul {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
}
.return_notice_box li + li { margin-top: 2px; }

/* =========================
   주문취소 폼 / 취소 상세 내역 (order_cancel_form / order_cancel_detail)
========================= */
.cf_reason { padding: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.cf_select_wrap {
    position: relative;
    width: 100%;
}
.cf_select_wrap > .dropdown_list {
    position: absolute; left: 0; right: 0; top: 54px;
    width: 100%;
    z-index: 25;
}
.cf_reason__textarea {
    display: block;
    width: 100%;
    min-height: 220px;
    padding: 14px 16px;
    font-size: 14px; line-height: 21px;
    resize: none;
}
.cf_reason__textarea_wrap { display: flex; flex-direction: column; }
.cf_reason__counter {
    margin-top: 6px;
    text-align: right;
    font-size: 12px; line-height: 18px; color: var(--grey-500);
}
.cf_reason__error {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0 0 10px;
    font-size: 13px; line-height: 19px; color: #f00;
}
.cf_reason__error_icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: #f00; color: #fff;
    font-size: 11px; font-weight: 700;
}

.cf_refund__total {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0 2px;
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
}
.cf_refund__total .val {
    overflow: hidden;
    color: #f00;
    text-align: right;
    text-overflow: ellipsis;
    font-family: var(--font-base);
    font-size: 16px; font-weight: 700; line-height: 24px;
}
.cf_refund__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-base);
    font-size: 16px; line-height: 24px; font-weight: 400;
}
.cf_refund__sub .label {
    overflow: hidden;
    color: var(--grey-600);
    text-overflow: ellipsis;
    font-family: var(--font-base);
    font-size: 16px; line-height: 24px; font-weight: 400;
}
.cf_refund__sub .val {
    overflow: hidden;
    color: var(--grey-700);
    text-align: right;
    text-overflow: ellipsis;
    font-family: var(--font-base);
    font-size: 16px; line-height: 24px; font-weight: 400;
}
.cf_refund__sub--bold,
.cf_refund__sub--bold .label,
.cf_refund__sub--bold .val {
    font-weight: 700;
    color: var(--grey-700);
}

.cf_notice {
    margin: 20px -20px 0;
    padding: 20px;
    background: #f3f3f3;
    color: #767676;
    font-size: 16px; line-height: 24px;
    display: flex; flex-direction: column; gap: 10px;
}
.cf_notice__title {
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: #767676;
    margin: 0;
}
.cf_notice__list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    color: #767676;
    font-weight: 400;
}
.cf_notice__list li + li { margin-top: 10px; }

/* .cf_modal__desc 는 .modal__title p + p 규칙으로 통일 */


/* 취소 상세 내역: 날짜 시간 나란히 */
.od_date_head__title .cd_time {
    margin-left: 10px;
    color: var(--grey-700);
    font-weight: 400;
}

/* 주문취소 완료 (order_cancel) — Figma 프레임 */
.cancel_done_head {
    padding: 20px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cancel_done_head__title {
    margin: 0;
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
}
.cancel_done_head__order {
    margin: 0;
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
}
.cancel_done_cta { margin-top: 8px; }
.cancel_done_reason {
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
}
.cancel_done_reason__row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 16px; line-height: 24px;
}
.cancel_done_reason__label {
    font-weight: 700;
    color: var(--grey-700);
}
.cancel_done_reason__value {
    color: var(--grey-700);
}
.cancel_done_reason__detail { display: flex; flex-direction: column; gap: 6px; }
.cancel_done_reason__detail_label {
    margin: 0;
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
}
.cancel_done_reason__detail_text {
    margin: 0;
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
}

/* 확정가격 결제 동의 — 주문 취소 완료 (payment_confirm_cancel_done) */
body:has(.pc_cancel_done) { overflow: hidden; }
body:has(.pc_cancel_done) .mobile_frame {
    height: 100dvh;
    min-height: 100dvh;
    padding-bottom: 0;
    overflow: hidden;
}
.pc_cancel_done {
    height: calc(100dvh - 50px - 80px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.pc_cancel_done__center {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pc_cancel_done__icon { width: 40px; height: 40px; }
.pc_cancel_done__title {
    margin: 0;
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: var(--grey-700);
    text-align: center;
}

/* =========================
   Order done (주문완료)
========================= */
.order_done_page { display: flex; flex-direction: column; }
.order_done_head {
    padding: 20px 20px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    text-align: center;
}
.order_done_head__title {
    margin: 0;
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
}
.order_done_head__no {
    margin: 0;
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
}
.order_done_addr {
    padding: 20px;
    display: flex; flex-direction: column; gap: 5px;
    border-top: 1px solid var(--grey-180);
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
}
.order_done_addr p { margin: 0; }
.order_done_addr__change {
    align-self: flex-start;
    font-size: 12px; line-height: 18px;
    color: var(--grey-700);
    text-decoration: underline;
    margin-top: 5px;
}
.order_done_cta {
    display: flex; gap: 10px;
    padding: 0 20px 20px;
}
.order_done_cta .btn {
    flex: 1;
    height: 40px;
    border-radius: var(--radius-xs);
    font-size: 14px;
    font-weight: 400;
}
.order_done_accordion__head {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background: var(--white);
    border: 0;
    border-bottom: 1px solid var(--grey-180);
    display: flex; align-items: center; gap: 4px;
    font-size: 16px; line-height: 24px;
    color: var(--grey-700);
    cursor: pointer;
    font-family: var(--font-base);
}
.order_done_accordion__label {
    font-weight: 700;
    flex-shrink: 0;
}
.order_done_accordion__summary {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.order_done_accordion__caret {
    width: 24px; height: 24px;
    flex-shrink: 0;
    color: var(--grey-700);
    transition: transform .2s;
}
.order_done_accordion.is-open .order_done_accordion__caret { transform: rotate(180deg); }
.order_done_accordion__body {
    display: none;
    padding: 20px;
}
.order_done_accordion.is-open .order_done_accordion__body { display: block; }
.order_done_accordion__body .order_card { width: 100%; }
.order_done_pay {
    height: 50px;
    padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--grey-180);
    font-size: 16px; line-height: 24px;
    color: var(--grey-700);
}
.order_done_pay__left { display: inline-flex; align-items: center; gap: 4px; }
.order_done_pay__label { font-weight: 700; }
.order_done_pay__method { color: var(--grey-700); }

/* =========================
   Delivery tracking (배송조회)
========================= */
.dt_page { display: flex; flex-direction: column; }
.dt_head {
    padding: 20px 20px 30px;
    display: flex; flex-direction: column; gap: 20px;
}
.dt_head__title {
    margin: 0;
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: var(--grey-700);
}
.dt_section { padding: 30px 20px; }
.dt_section__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.dt_section__title {
    margin: 0;
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: var(--grey-700);
}
.dt_section__title .dt_section__count { color: var(--primary-sub); margin-left: 8px; }
.dt_section__link {
    font-size: 12px; line-height: 18px;
    color: var(--grey-700);
    text-decoration: underline;
}
.dt_info {
    display: flex; flex-direction: column; gap: 10px;
}
.dt_info__row {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; line-height: 24px;
}
.dt_info__label {
    flex-shrink: 0;
    width: 74px;
    color: var(--grey-600);
}
.dt_info__value {
    flex: 1;
    display: flex; align-items: center; justify-content: flex-end; gap: 4px;
    color: var(--grey-700);
    text-align: right;
}
.dt_info__value--link { text-decoration: underline; }
.dt_info__icon_btn {
    width: 16px; height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--grey-700);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dt_info__icon_btn svg { width: 16px; height: 16px; display: block; }
.dt_notice {
    padding: 30px 20px 40px;
    background: var(--grey-80);
    font-size: 14px; line-height: 21px;
    color: var(--grey-600);
}
/* FAQ 질문 버튼: Figma 실측 box(상하 13 / 좌우 10 패딩 → 1줄 50px, 텍스트 세로중앙).
   패딩만으로 정확히 50px가 나오므로 min-height 불필요. 제목이 길어지면 그대로 확장 */
.dt_page .faq_item__q,
.return_page .faq_item__q { align-items: center; padding: 13px 10px; }
/* 배송조회 진행 스텝: dt_head 패딩과 중복되어 들어가는 좌우 여백 제거 */
.dt_page .dt_head .steps { padding: 0; }
/* 배송조회: 진행 스텝 ↔ 주문상품 사이 간격 40px(20+20) */
.dt_page .dt_head { padding-bottom: 20px; }
.dt_page .dt_head + .dt_section { padding-top: 20px; }

/* =========================
   Profile edit (내 정보 수정)
========================= */
.profile_edit_list {
    padding: 10px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile_edit_avatar_row {
    height: 84px; /* QA0608 #2: 60→84 (아바타 확대 수용) */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.profile_edit_avatar {
    width: 72px; height: 72px; /* QA0608 #2: 50→72 (프로필 이미지 확대) */
    border-radius: 50%;
    background: #bdbdbd;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    color: var(--white);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.profile_edit_avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile_edit_avatar svg { width: 44px; height: 44px; color: var(--white); } /* QA0608 #2: 32→44(아바타 비례) */
.profile_edit_camera {
    position: absolute;
    top: 54px; /* QA0608 #2: 아바타 확대(72px)에 맞춰 우하단 배지 위치 조정 */
    left: 50%;
    margin-left: 18px;
    width: 24px; height: 24px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--grey-700);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.profile_edit_camera svg,
.profile_edit_camera img { width: 24px; height: 24px; }
.profile_edit_row {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 13px 0 19px;
    background: var(--white);
    border: 1px solid var(--grey-130);
    border-radius: var(--radius-lg);
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--grey-700);
}
.profile_edit_row--static { cursor: default; }
.profile_edit_row__info {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
}
.profile_edit_row__label { font-size: 12px; line-height: 18px; color: var(--grey-700); }
.profile_edit_row__value {
    font-size: 14px; line-height: 21px; font-weight: 700; color: var(--grey-700);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile_edit_row__value--placeholder { color: var(--grey-300); }
.profile_edit_row__arrow {
    width: 24px; height: 24px;
    color: var(--grey-300);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.profile_edit_row__arrow svg { width: 24px; height: 24px; }

.profile_edit_account {
    background: var(--white);
    border: 1px solid var(--grey-130);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.profile_edit_account__head {
    display: flex; align-items: flex-start;
    height: 33px;
    padding: 10px 20px 0;
    box-sizing: border-box;
    font-size: 12px; line-height: 18px; color: var(--grey-700);
    border-bottom: 1px solid var(--grey-130);
}
.profile_edit_account__row {
    display: flex; align-items: center; gap: 10px;
    height: 60px;
    padding: 0 20px;
}
.profile_edit_account__icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #03c75a;
    color: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.profile_edit_account__email { font-size: 12px; line-height: 18px; color: var(--grey-700); }

.profile_edit_photo_menu {
    position: absolute;
    top: 43px;
    left: calc(50% + 16px);
    width: 160px;
    z-index: 50;
    display: none;
}
.profile_edit_photo_menu.is-open { display: block; }
.profile_edit_photo_menu .dropdown_list {
    width: 160px;
    border: 1px solid var(--grey-130);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 11.2px rgba(0,0,0,0.15);
}
.profile_edit_photo_menu .dropdown_list__item {
    height: 30px;
    padding: 5px 10px;
    justify-content: center;
    font-size: 16px; line-height: 20px;
    color: var(--grey-700);
}
.profile_edit_photo_menu .dropdown_list li + li .dropdown_list__item {
    border-top: 1px solid var(--grey-130);
}

.profile_edit_foot {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--frame-max);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    background: var(--white);
    color: var(--grey-700);
    font-family: 'Pretendard';
    font-size: 14px; font-weight: 400; line-height: 21px;
    z-index: 80;
}
.profile_edit_foot a { color: var(--grey-700); }
.profile_edit_foot__sep { color: var(--grey-200); }

/* 정보 입력폼 (닉네임 · 휴대폰번호) */
.profile_input_page {
    padding: 10px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profile_input_page__title {
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: var(--grey-700);
}
.profile_input_box { position: relative; }
.profile_input_box .input-field { height: 50px; padding-right: 40px; font-size: 16px; line-height: 24px; color: var(--grey-700); }
.profile_input_box.is-filled .input-field { border-color: #ffcc4d; color: var(--grey-700); }
.profile_input_box__clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--grey-700);
    cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
}
.profile_input_box.is-filled .profile_input_box__clear { display: inline-flex; }

/* =========================
   Review Manage (리뷰 관리) — 탭 · 작성가능 카드 · 작성한 리뷰 카드 · 케밥 메뉴 · 반응 배지
========================= */
.rv_mg_tabs {
    display: flex;
    width: 100%;
    background: var(--white);
    position: sticky;
    top: 50px;
    z-index: 10;
}
.rv_mg_tabs__item {
    flex: 1 1 50%;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-400);
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
}
.rv_mg_tabs__item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--grey-150);
}
.rv_mg_tabs__item.is-active {
    color: var(--primary);
    font-weight: 700;
}
.rv_mg_tabs__item.is-active::after {
    background: var(--primary);
}

.rv_mg_list { background: var(--white); }

/* 작성 가능 리뷰 카드 */
.rv_mg_card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--white);
}
.rv_mg_card__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rv_mg_card__date {
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    font-weight: 700;
}
.rv_mg_card__brand {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-900);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rv_mg_card__product {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.rv_mg_card__thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    background: var(--grey-100);
    overflow: hidden;
    display: block;
}
.rv_mg_card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv_mg_card__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rv_mg_card__title {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
.rv_mg_card__price_row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rv_mg_card__option_row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--grey-60);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 21px;
}
.rv_mg_card__option_label {
    color: var(--grey-500);
    flex: 0 0 auto;
}
.rv_mg_card__option_value {
    color: var(--grey-900);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.rv_mg_card__option_sep { color: var(--grey-200); }
.rv_mg_card__cta {
    margin-top: 4px;
    text-decoration: none;
    border-radius: 8px;
    background: #5B4058;
    color: #FFF;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}

/* 작성한 리뷰 카드 */
.rv_mg_written {
    padding: 20px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Figma 1:11736 기준 행간:
   date 4 brand 11 product 11 divider 20 text 20 photo 20 reactions */
.rv_mg_written__head { margin: 0; }
.rv_mg_written > .rv_mg_written__brand { margin-top: 4px; }
.rv_mg_written > .seller_review_card__prod { margin-top: 11px; }
.rv_mg_written > .seller_review_card__divider { margin: 11px 0 0; }
.rv_mg_written > .seller_review_card__text { margin-top: 20px; }
.rv_mg_written > .post_view__photo { margin-top: 20px; }
.rv_mg_written > .seller_review_card__reactions { margin-top: 20px; }
.rv_mg_written__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rv_mg_written__date {
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-500);
}
.rv_mg_written__kebab_wrap {
    position: relative;
}
.rv_mg_written__kebab {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--grey-700);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rv_mg_menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 121px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 20;
    display: none;
    overflow: hidden;
}
.rv_mg_menu.is-open { display: block; }
.rv_mg_menu__item {
    width: 100%;
    height: 50px;
    padding: 0 8px;
    background: var(--white);
    border: 0;
    border-bottom: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}
.rv_mg_menu__item:last-child { border-bottom: 0; }
.rv_mg_menu__item:hover,
.rv_mg_menu__item:focus-visible,
.rv_mg_menu__item:active { background: #f7d6ff; outline: none; }
.rv_mg_written__brand {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-900);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rv_mg_written__product {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 2px;
}
.rv_mg_written__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background: var(--grey-100);
    overflow: hidden;
    display: block;
}
.rv_mg_written__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv_mg_written__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}
.rv_mg_written__title {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
.rv_mg_written__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-600);
}
.rv_mg_written__sep { color: #aaa; }
.rv_mg_written__option_wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--grey-700);
}
.rv_mg_written__option {
    max-width: 152px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rv_mg_written__option_toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--grey-700);
    cursor: pointer;
}
.rv_mg_written__option_pop {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 5;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 9px 15px;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.07);
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
    width: 289px;
    white-space: normal;
}
.rv_mg_written__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--grey-900);
}
.rv_mg_written__rating svg { color: #ffb400; }
.rv_mg_written__divider {
    height: 1px;
    border: 0;
    background: var(--grey-150);
    margin: 8px 0 0;
}
.rv_mg_written__text {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-700);
}
.rv_mg_written__photo {
    width: 100%;
    aspect-ratio: 320 / 190;
    border-radius: var(--radius-sm);
    background: var(--grey-100);
    overflow: hidden;
}
.rv_mg_written__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 반응 배지 (🍠 / 😍 / 😭) */
.rv_mg_reactions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.rv_mg_reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 25px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--grey-60);
    font-size: 12px;
    line-height: 18px;
    color: var(--grey-700);
}
.rv_mg_reaction__emoji { font-size: 14px; line-height: 1; }
.rv_mg_reaction__count { font-weight: 600; }

/* 줄기톡 관리 */
.julgi_mg_list {
    padding: 16px 20px 100px;
    display: flex; flex-direction: column; gap: 12px;
}
.julgi_mg_card { padding: 14px 14px 0; overflow: hidden; }
.julgi_mg_card--actions { padding: 14px 14px 0; }
.julgi_mg_card .julgi_card__meta { margin-top: 8px; padding-bottom: 14px; } /* 고객 6.8 F11: 좋아요·댓글 행 위 간격 확대(피그마 기준) */
.julgi_mg_card--actions .julgi_card__meta { padding-bottom: 14px; }
.julgi_mg_actions {
    margin: 0 -14px;
    border-top: 1px solid var(--grey-150);
    background: #fbfbfd;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    display: flex; align-items: stretch;
}
.julgi_mg_action {
    flex: 1;
    height: 50px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    font-size: 14px; line-height: 21px; font-weight: 500;
    color: var(--grey-700);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}
.julgi_mg_action + .julgi_mg_action::before {
    content: "";
    position: absolute;
    left: 0; top: 15px; bottom: 15px;
    width: 1px;
    background: var(--grey-150);
}

/* =========================
   Point history
========================= */
.point_balance {
    margin: 20px 20px 0;
    height: 134px;
    border-radius: var(--radius-sm);
    background: var(--white);
    border: 1px solid var(--grey-250);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 20px 0;
}
.point_balance__icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.point_balance__icon img { width: 32px; height: 32px; display: block; }
.point_balance__value {
    font-family: var(--font-base);
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: var(--grey-700);
}
.point_balance__label {
    font-family: var(--font-base);
    font-size: 16px; line-height: 24px; font-weight: 400;
    color: #626060;
}

.point_tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 0;
}
.point_tabs__item {
    flex: 1 1 0;
    height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--white);
    border: 1px solid var(--grey-180);
    border-radius: var(--radius-sm);
    font-family: var(--font-base);
    font-size: 16px; line-height: 24px; font-weight: 400;
    color: var(--grey-700);
    cursor: pointer;
}
.point_tabs__item.is-active {
    background: var(--primary-100);
    border-color: var(--primary-sub);
    color: var(--grey-700);
    font-weight: 400;
}

.point_summary {
    display: flex; align-items: center; justify-content: flex-start;
    padding: 20px 20px 10px;
}
.point_period_range {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
}
.point_period_range__input {
    flex: 1;
    height: 50px;
    padding: 13px 12px;
    border: 1px solid var(--grey-180);
    border-radius: var(--radius-sm);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--grey-700);
    cursor: pointer;
}
.point_period_range__input svg { width: 20px; height: 20px; color: var(--grey-700); flex-shrink: 0; }
.point_period_range__sep {
    font-family: var(--font-base);
    font-size: 20px;
    line-height: 30px;
    color: var(--grey-700);
}
.point_period_help {
    margin: 16px 0 30px;
    text-align: center;
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    color: #a9a9a9;
}
.point_summary__title {
    font-family: var(--font-base);
    font-size: 20px; line-height: 30px; font-weight: 700;
    color: var(--grey-700);
    margin: 0;
}
.point_summary__title em {
    font-style: normal;
    color: var(--primary-sub);
    margin-left: 8px;
}
.point_summary__filter.tag {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 21px;
    gap: 2px;
}
.point_summary__filter.tag .tag__caret { width: 16px; height: 16px; transform: none; transition: transform .15s; }
.point_summary__filter.tag.is-active {
    background: var(--primary-150);
    border-color: var(--primary-sub);
    color: var(--grey-700);
}
.point_summary__filter.tag.is-active .tag__caret,
.point_summary__filter.tag[aria-expanded="true"] .tag__caret { transform: rotate(180deg); }

.point_divider_block {
    height: 10px;
    background: var(--grey-80);
}

.point_list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.point_item {
    padding: 20px;
    border-bottom: 1px solid var(--grey-200);
}
.point_item__row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.point_item__type {
    font-family: var(--font-base);
    font-size: 14px; line-height: 21px; font-weight: 700;
    color: var(--grey-700);
}
.point_item__amt {
    font-family: var(--font-base);
    font-size: 14px; line-height: 21px; font-weight: 700;
    color: var(--accent-red);
}
.point_item__amt.is-plus { color: var(--primary-sub); }
.point_item__name {
    font-family: var(--font-base);
    font-size: 14px; line-height: 21px; font-weight: 400;
    color: var(--grey-700);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
}
.point_item__date {
    font-family: var(--font-base);
    font-size: 14px; line-height: 21px; font-weight: 400;
    color: var(--grey-400);
    margin: 0;
}

.point_empty {
    padding: 80px 20px 20px;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
}
.point_empty__icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
}
.point_empty__icon img { width: 40px; height: 40px; display: block; }
.point_empty__icon svg { width: 40px; height: 40px; }
.point_empty__text {
    overflow: hidden;
    color: var(--grey-700);
    text-align: center;
    text-overflow: ellipsis;
    font-family: var(--font-base);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    margin: 0;
}

/* =========================
   고객만족센터 (1:1 문의 / FAQ / 공지사항 / 약관 및 정책)
========================= */

/* 1:1 문의 — 상단 카테고리·정렬 드롭다운 필터 */
.inquiry_filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
    gap: 10px;
}
.inquiry_filter__select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
    cursor: pointer;
}
.inquiry_filter__select svg {
    width: 16px; height: 16px;
    color: var(--grey-500);
}
.inquiry_filter__sort {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
    background: transparent; border: 0; padding: 0;
    cursor: pointer;
}
.inquiry_filter__sort svg { width: 16px; height: 16px; color: var(--grey-500); }

/* 1:1 문의 카드 — 판매자명 라벨·확장 애니메이션은 .seller_inquiry_card 재사용 */
.seller_inquiry_card__seller {
    margin-top: 8px;
    font-size: 12px; line-height: 18px;
    color: var(--grey-500);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 1:1 문의 — 좌측 플로팅 정렬 칩 + 드롭다운 */
.inquiry_sort_wrap {
    position: relative;
    padding: 10px 0 20px;
}
.inquiry_sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 50px;
    padding: 8px 10px 8px 20px;
    background: var(--white);
    border: 0;
    border-radius: 0 30px 30px 0;
    box-shadow: 2px 0 3.65px rgba(0, 0, 0, 0.15);
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    font-family: var(--font-base);
    cursor: pointer;
}
.inquiry_sort svg {
    width: 20px; height: 20px;
    color: var(--grey-700);
    transition: transform .2s ease;
}
.inquiry_sort.is-open svg { transform: rotate(180deg); }
.inquiry_sort_menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 10px;
    width: 200px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    box-shadow: 0 0 11.2px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 10;
    padding: 0;
    margin: 0;
    list-style: none;
}
.inquiry_sort_menu.is-open { display: block; }
.inquiry_sort_menu__item {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background: var(--white);
    border: 0;
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-700);
    font-family: var(--font-base);
    cursor: pointer;
}
.inquiry_sort_menu__item.is-active {
    background: var(--primary-50);
    color: var(--primary);
}

/* 1:1 문의 — 카드 상단 판매자 행 + 본문 영역 */
.seller_inquiry_card__seller_head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: var(--white);
}
.seller_inquiry_card__seller_avatar {
    width: 30px; height: 30px;
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--grey-100);
}
.seller_inquiry_card__seller_avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.seller_inquiry_card__seller_name {
    flex: 1;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--grey-700);
}
.seller_inquiry_card__seller_link {
    width: 28px;
    height: 28px;
    border: 1px solid var(--grey-250);
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-700);
    background: var(--white);
    flex-shrink: 0;
}
.seller_inquiry_card__seller_link svg { width: 16px; height: 16px; }
.seller_inquiry_card__divider {
    height: 1px;
    background: var(--grey-130);
    width: 100%;
}

/* FAQ — 카테고리 탭 (.seller_tabs 기반 간소형) */
.faq_cate_tabs {
    display: flex;
    gap: 10px;
    padding: 10px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.faq_cate_tabs::-webkit-scrollbar { display: none; }
.faq_cate_tabs__item {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--grey-180);
    background: var(--white);
    font-size: 16px; line-height: 24px;
    font-weight: 400;
    color: var(--grey-700);
    cursor: pointer;
    font-family: var(--font-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.faq_cate_tabs__item.is-active {
    background: var(--primary-150);
    border-color: var(--primary-sub);
    color: var(--grey-700);
}

/* FAQ 아이템 — 카테고리 라벨 */
.faq_item__cate {
    font-size: 14px; line-height: 21px;
    color: var(--grey-400);
    font-weight: 400;
}
.faq_item__q_wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: 1; min-width: 0; }
.faq_item__q_wrap > span:not(.faq_item__cate) {
    color: var(--grey-700);
    font-size: 16px; line-height: 24px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}

/* 공지사항 — 리스트 (Figma 1:22734 1:1) */
.notice_page .seller_notice_list { padding: 20px 20px 0; gap: 0; }
.notice_page .seller_notice_row {
    gap: 10px;
    padding: 0 0 10px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--grey-200);
}
.notice_page .seller_notice_row::after { display: none; }
.notice_page .seller_notice_row:last-child { margin-bottom: 0; }
.notice_page .seller_notice_row__date {
    overflow: hidden;
    color: var(--grey-400);
    text-overflow: ellipsis;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}
.notice_page .seller_notice_row__title {
    overflow: hidden;
    color: var(--grey-700);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
}

/* 공지사항 상세 (Figma 1:22774 1:1) */
.notice_detail {
    padding: 20px;
}
.notice_detail__title {
    font-size: 16px; line-height: 24px;
    font-weight: 700;
    color: var(--grey-700);
    margin: 0;
}
.notice_detail__date {
    font-size: 14px; line-height: 21px;
    color: var(--grey-400);
    font-weight: 400;
    margin: 10px 0 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grey-200);
}
.notice_detail__body {
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
    font-weight: 400;
    margin: 20px 0 0;
    white-space: pre-line;
}
.notice_detail__img {
    margin-top: 20px;
    width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--grey-80);
}
.notice_detail__img img { width: 100%; display: block; }

/* 약관 및 정책 — 메뉴 리스트 (arrow row) */
.policy_list {
    padding: 0 20px;
}
.policy_row {
    width: 100%;
    height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid var(--grey-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border-left: 0; border-right: 0; border-top: 0;
    font-family: var(--font-base);
    text-align: left;
    cursor: pointer;
}
.policy_row__label {
    font-size: 16px; line-height: 24px; font-weight: 700;
    color: var(--grey-700);
}
.policy_row__arrow {
    width: 24px; height: 24px;
    color: var(--grey-700);
    flex-shrink: 0;
}

/* 약관 상세 — 버전 셀렉터 */
.policy_detail__selector_wrap {
    position: relative;
    z-index: 5;
}
.policy_detail__selector {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 44px;
    padding: 0 20px;
    border-top: 1px solid var(--grey-100);
    border-bottom: 1px solid var(--grey-100);
    background: var(--white);
    cursor: pointer;
    font-family: var(--font-base);
}
.policy_detail__selector_label {
    font-size: 16px; line-height: 24px;
    color: var(--grey-700);
}
.policy_detail__selector_arrow {
    width: 24px; height: 24px;
    color: var(--grey-700);
    transition: transform .15s ease;
    flex-shrink: 0;
}
.policy_detail__selector[aria-expanded="true"] {
    border-bottom-color: transparent;
}
.policy_detail__selector[aria-expanded="true"] .policy_detail__selector_arrow {
    transform: rotate(180deg);
}
.policy_detail__versions {
    list-style: none;
    margin: 0;
    padding: 10px 20px 16px;
    background: var(--white);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}
.policy_detail__versions li {
    font-size: 12px; line-height: 18px;
    color: var(--grey-500);
}
.policy_detail__versions li.policy_detail__versions_current {
    font-size: 14px; line-height: 20px;
    color: #9d6ca2;
    margin: 0 0 10px;
}
.policy_detail__versions li + li { margin-top: 10px; }

/* 약관 상세 — 본문 */
.policy_detail {
    padding: 10px 20px 20px;
}
.policy_detail__body {
    font-size: 14px; line-height: 21px;
    color: var(--grey-700);
    margin: 0;
    white-space: pre-line;
}

/* =========================
   Mypage (나의 고구미)
========================= */
.mypage_main { padding-bottom: 80px; }

.my_header { display: flex; align-items: center; height: 50px; padding: 0 20px; background: var(--white); }
.my_header__title { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; line-height: 30px; font-weight: 700; color: var(--grey-700); }
.my_header__title svg { width: 20px; height: 20px; color: var(--grey-700); }
.my_header__right { margin-left: auto; display: inline-flex; gap: 16px; align-items: center; }

.my_profile { padding: 10px 20px 20px; display: flex; align-items: center; gap: 12px; }
.my_profile__avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--grey-130); flex-shrink: 0; overflow: hidden; }
.my_profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.my_profile__name { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--grey-700); flex: 1; }
.my_profile__edit { padding: 0 12px; border-radius: 100px; border: 1px solid var(--grey-300); background: var(--white); color: var(--grey-700); font-size: 14px; line-height: 28px; }

.my_shortcuts { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 20px; gap: 8px; }
.my_shortcut { display: inline-flex; align-items: center; gap: 6px; color: var(--grey-700); text-align: center; font-family: 'Pretendard'; font-size: 16px; font-weight: 500; line-height: 24px; }
.my_shortcut img { width: 20px; height: 20px; }
.my_shortcut svg { width: 20px; height: 20px; color: var(--grey-700); }

.my_kv_card { margin: 0 20px; padding: 8px 0; border: 1px solid var(--grey-130); border-radius: var(--radius-lg); display: flex; align-items: center; } /* QA0608 #13: 12→8 */
/* 그레이바 상단 여백 30px. 카드 영역 숨김 시 쿠폰·포인트 다음, 복원 시 카드 영역 다음에 적용(쿠폰·포인트→카드 사이 20px은 my_pay_cta 마진 유지). */
.my_kv_card + .divider_block,
.my_pay_cta + .divider_block { margin-top: 30px; }
.my_kv_item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; }
.my_kv_item__icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); }
.my_kv_item__value { font-size: 20px; line-height: 30px; font-weight: 700; color: var(--grey-700); }
.my_kv_item__label { color: #626060; text-align: center; font-family: 'Pretendard'; font-size: 16px; font-weight: 400; line-height: 24px; }
.my_kv_card__sep { width: 1px; height: 38px; background: var(--grey-130); }

.my_pay_cta { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 40px); margin: 12px 20px; height: 60px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--primary); color: var(--white); font-size: 16px; line-height: 24px; font-weight: 700; } /* QA0608 #13: 위아래 여백/높이 축소(margin 20→12, height 78→60, padding 24→16) */
.my_pay_cta__left { font-weight: 400; }
.my_pay_cta__right { display: inline-flex; align-items: center; gap: 4px; }

.my_cs { padding-bottom: 40px; }
.my_cs__title { padding: 20px 20px 10px; font-size: 20px; line-height: 30px; font-weight: 700; color: var(--grey-700); }
.my_cs__row { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-size: 16px; line-height: 24px; color: var(--grey-700); }
.my_cs__row svg { width: 20px; height: 20px; color: var(--grey-700); }

/* Skeleton (loading placeholder) */
@keyframes skeleton-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
    display: block;
    background-color: var(--grey-150, #ececec);
    background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,0.6) 50%, transparent 100%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}
.notice_page .seller_notice_row.is-skeleton { pointer-events: none; }
.notice_page .seller_notice_row.is-skeleton .skeleton.s-date { width: 64px; height: 21px; }
.notice_page .seller_notice_row.is-skeleton .skeleton.s-title { width: 80%; height: 21px; }

/* Skeleton — 딜 카드 (홈/공구 목록) */
.prod_card.is-skeleton { pointer-events: none; }
.prod_card.is-skeleton .prod_card__thumb {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: var(--radius-lg, 12px);
    background-color: var(--grey-150, #ececec);
    background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,0.6) 50%, transparent 100%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.prod_card.is-skeleton .skeleton.s-title { width: 85%; height: 18px; margin-top: 2px; }
.prod_card.is-skeleton .skeleton.s-price { width: 55%; height: 22px; }

/* Skeleton — 줄기톡 카드 */
.julgi_card.is-skeleton { pointer-events: none; }
.julgi_card.is-skeleton .skeleton.s-badge { width: 48px; height: 22px; border-radius: 999px; }
.julgi_card.is-skeleton .skeleton.s-date { width: 64px; height: 16px; }
.julgi_card.is-skeleton .skeleton.s-thumb { width: 72px; height: 72px; border-radius: 8px; flex: 0 0 72px; }
.julgi_card.is-skeleton .skeleton.s-title { width: 90%; height: 20px; }
.julgi_card.is-skeleton .skeleton.s-desc { width: 60%; height: 16px; }
.julgi_card.is-skeleton .skeleton.s-pill { width: 56px; height: 22px; border-radius: 999px; }

/* Skeleton — 주문 카드 */
.order_card.is-skeleton { pointer-events: none; padding: 16px 20px; }
.order_card.is-skeleton .skeleton.s-head { width: 40%; height: 22px; margin-bottom: 12px; }
.order_card.is-skeleton .skeleton.s-thumb { width: 80px; height: 80px; border-radius: 8px; }
.order_card.is-skeleton .skeleton.s-title { width: 80%; height: 18px; }
.order_card.is-skeleton .skeleton.s-meta { width: 50%; height: 16px; margin-top: 6px; }
.order_card.is-skeleton .order_card__skeleton_body { display: flex; gap: 12px; }
.order_card.is-skeleton .order_card__skeleton_body > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* Skeleton — 줄기톡 상세 */
.julgi_detail_skeleton { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.julgi_detail_skeleton .skeleton.s-meta { width: 40%; height: 18px; }
.julgi_detail_skeleton .skeleton.s-title { width: 90%; height: 26px; }
.julgi_detail_skeleton .skeleton.s-image { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; }
.julgi_detail_skeleton .skeleton.s-line { width: 100%; height: 16px; }
.julgi_detail_skeleton .skeleton.s-line.short { width: 70%; }
.julgi_detail_skeleton .skeleton.s-comment {
    width: 100%; height: 64px; border-radius: 8px; margin-top: 8px;
}

/* Skeleton — 알림 아이템 */
.noti_item.is-skeleton { pointer-events: none; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; }
.noti_item.is-skeleton .skeleton.s-date { width: 80px; height: 14px; }
.noti_item.is-skeleton .skeleton.s-title { width: 70%; height: 18px; }
.noti_item.is-skeleton .skeleton.s-desc { width: 90%; height: 16px; }

/* Skeleton — 포인트 내역 아이템 */
.point_item.is-skeleton { pointer-events: none; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.point_item.is-skeleton .skeleton.s-row { width: 100%; height: 20px; }
.point_item.is-skeleton .skeleton.s-date { width: 40%; height: 14px; }

/* Skeleton — 1:1 문의 카드 */
.seller_inquiry_card.is-skeleton { pointer-events: none; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.seller_inquiry_card.is-skeleton .skeleton.s-seller { width: 50%; height: 18px; }
.seller_inquiry_card.is-skeleton .skeleton.s-head { width: 30%; height: 16px; }
.seller_inquiry_card.is-skeleton .skeleton.s-q { width: 85%; height: 20px; }

/* Skeleton — 저장 카드 행 */
.card_row.is-skeleton { pointer-events: none; }
.card_row.is-skeleton .skeleton.s-thumb { width: 56px; height: 36px; border-radius: 6px; flex: 0 0 56px; }
.card_row.is-skeleton .card_row__info { gap: 8px; }
.card_row.is-skeleton .skeleton.s-title { width: 70%; height: 20px; }
.card_row.is-skeleton .skeleton.s-sub { width: 35%; height: 16px; }