/* =============================================
   fw-common.css
   FEELWAY Common UI Components
   ============================================= */

/* --- Base --- */
strong { font-family: "Pretendard SemiBold"; }

/* --- Container --- */
.fw-container { max-width: 1000px; margin: 0 auto; padding: 30px 0 60px; font-family: "Pretendard", -apple-system, 'Malgun Gothic', sans-serif; }

/* --- Page Title --- */
.fw-pageTitle { font-size: 24px; font-family: "Pretendard Bold"; color: #222; padding-bottom: 16px; border-bottom: 2px solid #222; margin-bottom: 20px; }

/* --- Guide Box --- */
.fw-guide { margin-bottom: 24px; padding: 18px 22px; background: #fafafa; border-radius: 8px; border: 1px solid #eee; font-size: 13px; color: #666; line-height: 1.8; }
.fw-guide-title { font-family: "Pretendard SemiBold"; color: #444; font-size: 14px; margin: 0 0 8px; }
.fw-guide li { list-style: none; padding-left: 16px; position: relative; }
.fw-guide li:before { content: "\2022"; position: absolute; left: 0; color: #999; }

/* --- Card --- */
.fw-card { background: #fff; border: 1px solid #d5d5d5; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.fw-card--accent { border-color: #169dab; }
.fw-card__header { padding: 16px 22px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.fw-card__title { font-size: 16px; font-family: "Pretendard Bold"; color: #222; }

.fw-card__meta { font-size: 12px; color: #aaa; display: flex; align-items: center; gap: 6px; }
.fw-card__body { padding: 16px 22px; }
.fw-card__body--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.fw-card__body--nopad { padding: 0; }
.fw-card__body--nopad .fw-form__row:last-child .fw-form__label { border-bottom-left-radius: 12px; }
.fw-card__col .fw-form__row { border-bottom: none; }
.fw-card__footer { padding: 14px 22px; background: #fafafa; border-top: 1px solid #eee; }

/* --- Form --- */
.fw-form { background: #fff; border: 1px solid #d5d5d5; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.fw-form__row { display: flex; border-bottom: 1px solid #eee; }
.fw-form__row:last-child { border-bottom: none; }
.fw-form__label { width: 180px; flex-shrink: 0; padding: 14px 20px; background: #fafafa; font-size: 13px; font-family: "Pretendard SemiBold"; color: #666; display: flex; align-items: center; }
.fw-form__label .req { color: #d6080e; margin-left: 4px; }
.fw-form__value { flex: 1; padding: 14px 20px; }
.fw-form__value input[type=text],
.fw-form__value input[type=email],
.fw-form__value input[type=password],
.fw-form__value input[type=number] {
    width: 100%; max-width: 400px; padding: 8px 12px; border: 1px solid #d5d5d5; border-radius: 6px; font-size: 14px; outline: none; box-sizing: border-box;
}
.fw-form__value input:focus { border-color: #169dab; }
.fw-form__value input.fw-input-full { max-width: 100%; }
.fw-form__value textarea {
    width: 100%; max-width: 600px; padding: 10px 12px; border: 1px solid #d5d5d5; border-radius: 6px; font-size: 14px; resize: vertical; outline: none; min-height: 120px; box-sizing: border-box;
}
.fw-form__value textarea:focus { border-color: #169dab; }
.fw-form__value select {
    padding: 8px 12px; border: 1px solid #d5d5d5; border-radius: 6px; font-size: 14px; outline: none;
}

/* --- Tab Navigation --- */
.fw-tab { display: flex; gap: 2px; margin-bottom: 16px; }

/* --- Buttons --- */
.fw-btn { display: inline-block; box-sizing: border-box; line-height: 1; vertical-align: middle; padding: 10px 28px; background: #169dab; color: #fff; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-family: "Pretendard SemiBold"; cursor: pointer; text-decoration: none; }
.fw-btn:hover { background: #128a98; }
.fw-btn--sm { padding: 6px 16px; font-size: 12px; border-radius: 4px; }
.fw-btn--gray { background: #8d8d8d; }
.fw-btn--gray:hover { background: #666; }
.fw-btn--outline { background: transparent; border: 1px solid #169dab; color: #169dab; }
.fw-btn--outline:hover { background: #169dab; color: #fff; }
.fw-btn--outline-gray { background: transparent; border: 1px solid #aaa; color: #666; }
.fw-btn--outline-gray:hover { background: #666; color: #fff; }
.fw-btn--outline-light { background: #fff; border: 1px solid #ccc; color: #555; }
.fw-btn--outline-light:hover { background: #f0f0f0; color: #555; }
.fw-btn--red { background: #d6080e; }
.fw-btn--red:hover { background: #b0060b; }

/* --- Status Badge --- */
.fw-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-family: "Pretendard SemiBold"; }
.fw-badge--warning { background: #fdf0e6; color: #ed4e2b; }
.fw-badge--info { background: #e6f2fd; color: #1188ec; }
.fw-badge--success { background: #ebf0fd; color: #2b5fed; }
.fw-badge--muted { background: #eee; color: #8d8d8d; }

/* --- Order Status Dashboard --- */
.fw-dashboard { display: flex; gap: 20px; padding: 14px 20px; background: #fafafa; border: 1px solid #eee; border-radius: 8px; margin-bottom: 16px; }
.fw-dashboard__col { flex: 1; display: flex; flex-direction: column; }
.fw-dashboard__row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; }
.fw-dashboard__row a { text-decoration: none; }
.fw-dashboard__label { display: inline-block; width: 90px; flex-shrink: 0; padding: 2px 8px; border-radius: 3px; text-align: center; font-size: 12px; font-family: "Pretendard SemiBold"; }
.fw-dashboard__label--active { background: #8d8d8d; color: #fff; }
.fw-dashboard__label--muted { background: #d5d5d5; color: #fff; }
.fw-dashboard__count { min-width: 30px; flex-shrink: 0; text-align: center; font-family: "Pretendard Bold"; font-size: 13px; }
.fw-dashboard__count--active { color: #169dab; }
.fw-dashboard__count--muted { color: #999; }
.fw-dashboard__desc { font-size: 12px; color: #999; }
.fw-dashboard__desc--active { color: #169dab; font-family: "Pretendard SemiBold"; }

/* --- Info List (dl) --- */
.fw-info { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: #666; }
.fw-info dt { color: #999; font-size: 12px; }
.fw-info dd { margin: 2px 0 0; }

/* --- Index / Tag List --- */
.fw-index { background: #fff; border: 1px solid #d5d5d5; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; }
.fw-index__section { margin-bottom: 14px; }
.fw-index__section:last-child { margin-bottom: 0; }
.fw-index__label { font-size: 12px; font-family: "Pretendard SemiBold"; color: #999; margin-bottom: 6px; }
.fw-index__items { font-size: 13px; line-height: 2; }
.fw-index__items a { color: #333; text-decoration: none; margin-right: 6px; }
.fw-index__items a:hover { color: #169dab; text-decoration: underline; }
.fw-index__items--accent a { color: #169dab; font-family: "Pretendard Medium"; }
.fw-index__items--muted a { color: #999; }

/* --- Table --- */
.fw-table { width: 100%; border-collapse: collapse; }
.fw-table thead th { padding: 12px 10px; font-size: 13px; font-family: "Pretendard SemiBold"; color: #666; border-bottom: 1px solid #d5d5d5; text-align: left; }
.fw-table thead th.center { text-align: center; }
.fw-table tbody tr { transition: background 0.15s; }
.fw-table tbody tr:hover { background: #fafafa; }
.fw-table tbody td { padding: 14px 10px; font-size: 14px; color: #333; border-bottom: 1px solid #eee; }
.fw-table--nowrap-th th { white-space: nowrap; }

/* --- Reply / Comment --- */
.fw-reply { padding: 8px 0; border-bottom: 1px dashed #eee; font-size: 13px; }
.fw-reply:last-child { border-bottom: none; }
.fw-reply__author { font-family: "Pretendard SemiBold"; color: #333; }
.fw-reply__date { font-size: 11px; color: #aaa; margin-left: 6px; }
.fw-reply__text { color: #666; margin-top: 4px; }

/* --- Chat (판매자와 대화) --- */
.fw-chat { width: 100%; border-collapse: collapse; }
.fw-chat__msg { padding: 8px 0; border-bottom: 1px dotted #ddd; font-size: 13px; line-height: 1.6; }
tr:nth-last-child(2) .fw-chat__msg { border-bottom: 0; }
.fw-chat__buyer { color: #f35822; font-family: "Pretendard SemiBold"; }
.fw-chat__seller { color: #169dab; font-family: "Pretendard SemiBold"; }
.fw-chat__date { font-size: 11px; color: #aaa; margin-left: 4px; }
.fw-chat__img { max-width: 400px; max-height: 100px; cursor: pointer; border-radius: 4px; }
.fw-chat__del { display: inline-block; width: 18px; height: 18px; vertical-align: middle; cursor: pointer;background-image: url('//icon.feelway.com/recent/common/icon/spIcon_commons_v2.png'); background-repeat: no-repeat; background-size: 180px; background-position: -62px -109px}
.fw-chat__del:hover { opacity: 0.7; }
.fw-chat__input-wrap { padding: 10px 0; }
.fw-chat__input { border: 1px solid #d5d5d5; border-radius: 4px; font-size: 13px; height: 28px; color: #333; width: 500px; padding: 0 8px; outline: none; }
.fw-chat__input:focus { border-color: #169dab; }
.fw-chat__notice { font-size: 12px; color: #999; margin-top: 6px; line-height: 1.6; }

/* --- Ship Today Override --- */
.fw-form__value .shipToday { margin-top: 12px; }

/* --- Section Divider --- */
.fw-divider { height: 1px; background: #eee; margin: 20px 0; }

/* --- Empty State --- */
.fw-empty { text-align: center; padding: 60px 0; color: #999; font-size: 14px; }

/* --- Input --- */
.fw-input { width: 100%; padding: 8px 12px; border: 1px solid #d5d5d5; border-radius: 6px; font-size: 14px; outline: none; box-sizing: border-box; }
.fw-input:focus { border-color: #169dab; }

/* --- Select --- */
select.fw-select { font-size: 14px; color: #333; padding: 8px 36px 8px 12px; border: 1px solid #d5d5d5; border-radius: 6px; outline: none; appearance: none; -webkit-appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px; }
.fw-select:focus { border-color: #169dab; }
select.fw-select[size] { background-image: none; }
.fw-select option { padding: 4px 2px; }

/* --- Checkbox --- */
.fw-checkbox { display: inline-flex; align-items: center; cursor: pointer; line-height: 1; }
.fw-checkbox input[type=checkbox] { display: none; }
.fw-checkbox::before { content: ''; width: 16px; height: 16px; border: 1px solid #d5d5d5; border-radius: 3px; margin-right: 6px; background: #fff; flex-shrink: 0; }
.fw-checkbox:hover::before { border-color: #169dab; }
.fw-checkbox:has(input:checked)::before { background: #169dab; border-color: #169dab; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5L11 5l1 1z' fill='%23fff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; }

/* --- Field Description --- */
.fw-field-desc { font-size: 12px; color: #333; margin-top: 0; line-height: 1.8; list-style: none; padding: 0; }
input + .fw-field-desc,
select + .fw-field-desc,
textarea + .fw-field-desc { margin-top: 5px; }

/* --- Link Color --- */
.fw-link { color: #169dab; text-decoration: none; }
.fw-link:hover { text-decoration: underline; }

/* --- Popup Notice --- */
.fw-popup { min-width: 417px; min-height: 500px; font-family: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif; display: flex; flex-direction: column; }
.fw-popup__header { padding: 18px 20px; background: #169dab; color: #fff; }
.fw-popup__header__title { font-size: 14px; font-family: "Pretendard SemiBold"; letter-spacing: -0.02em; }
.fw-popup__body { flex: 1; padding: 20px; overflow-y: auto; }
.fw-popup__body__title { font-size: 16px; font-family: "Pretendard Bold"; color: #222; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.fw-popup__body__content { font-size: 13px; color: #333; line-height: 1.8; word-break: keep-all; }
.fw-popup__body__file { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eee; }
.fw-popup__body__file a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: #f5f5f5; border: 1px solid #d5d5d5; border-radius: 4px; font-size: 12px; color: #666; text-decoration: none; }
.fw-popup__body__file a:hover { background: #eee; }
.fw-popup__body__date { margin-top: 16px; text-align: right; font-size: 12px; color: #aaa; }
.fw-popup__footer { padding: 10px 16px; background: #fafafa; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.fw-popup__footer label { font-size: 12px; color: #8d8d8d; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.fw-popup__footer label input[type=checkbox] { width: 14px; height: 14px; margin: 0; }
.fw-popup__footer__close { padding: 6px 16px; background: #169dab; color: #fff; border: none; border-radius: 4px; font-size: 12px; font-family: "Pretendard SemiBold"; cursor: pointer; }
.fw-popup__footer__close:hover { background: #128a98; }

/* --- Pagination --- */
.fw-pagination { margin-top: 55px; text-align: center; }
.fw-pagination a { display: inline-block; min-width: 40px; height: 30px; padding: 0 4px; box-sizing: border-box; margin: 0 3px; color: #fff; font-size: 13px; line-height: 30px; text-align: center; text-decoration: none; vertical-align: middle; background: #8d8d8d; border-radius: 4px; }
.fw-pagination a:hover { background: #666; }
.fw-pagination a:has(b) { background: transparent; padding: 0; }
.fw-pagination a b { display: inline-block; min-width: 40px; height: 100%; padding: 0 4px; box-sizing: border-box; line-height: 30px; background: #169dab; color: #fff; font-weight: normal; border-radius: 4px; }
.commonPaging.fw-pagination .item { display: inline-block; min-width: 40px; height: 30px; padding: 0 4px; box-sizing: border-box; margin: 0 3px; color: #fff; font-size: 13px; line-height: 30px; text-align: center; vertical-align: middle; background: #8d8d8d; border-radius: 4px; }
.commonPaging.fw-pagination .item:hover { background: #666; }
.commonPaging.fw-pagination .item[aria-current="active"] { background: #169dab; color: #fff; }
.fw-pagination__text { display: inline-block; margin: 0 3px; font-size: 13px; line-height: 30px; vertical-align: middle; color: #555; }
.fw-pagination a.fw-pagination__prev,
.fw-pagination a.fw-pagination__next { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; margin: 0 3px; background: #8d8d8d; border-radius: 4px; vertical-align: middle; cursor: pointer; text-decoration: none; padding: 0; }
.fw-pagination a.fw-pagination__prev:hover,
.fw-pagination a.fw-pagination__next:hover { background: #666; }
.fw-pagination__prev::before,
.fw-pagination__next::before { content: ''; display: block; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.fw-pagination__prev::before { transform: rotate(-135deg); margin-left: 2px; }
.fw-pagination__next::before { transform: rotate(45deg); margin-right: 2px; }

.fw-btn-group { display: flex; gap: 6px; align-items: center; }
.fw-btn-group .buyerTooltip { top: -25px; left: 0; }

/* --- Text Color Utilities --- */
.fw-text--primary { color: #169dab; }
.fw-text--info { color: #1188ec; }
.fw-text--success { color: #2b5fed; }
.fw-text--accent { color: #ed4e2b; }
.fw-text--danger { color: #d6080e; }
.fw-text--sub { font-size: 12px; color: #999; }
.fw-text--muted { color: #8d8d8d; }
.fw-text--emp { color: #d6080e; }
.fw-text--break { word-break: break-all; }

/* --- Spacing Utilities --- */
.fw-ml-4 { margin-left: 4px; }
.fw-ml-6 { margin-left: 6px; }
.fw-ml-8 { margin-left: 8px; }
.fw-mt-4 { margin-top: 4px; }
.fw-mt-6 { margin-top: 6px; }
.fw-mt-8 { margin-top: 8px; }
.fw-mt-10 { margin-top: 10px; }
.fw-mt-12 { margin-top: 12px; }
.fw-mt-16 { margin-top: 16px; }
.fw-mb-4 { margin-bottom: 4px; }
.fw-mb-6 { margin-bottom: 6px; }
.fw-mb-8 { margin-bottom: 8px; }
.fw-mb-10 { margin-bottom: 10px; }
.fw-mb-12 { margin-bottom: 12px; }
.fw-mb-16 { margin-bottom: 16px; }

/* --- Notice Box --- */
.fw-notice-box {
    max-width: 1000px;
    margin: 0 auto 12px;
    padding: 14px 16px;
    background-color: #fafafa;
    font-size: 13px;
    line-height: 1.8;
}