/* --- 1. 브랜드 가이드라인 및 디자인 시스템 정의 --- */
:root {
    --primary-color: #FFB7B2;
    /* 베이비 파스텔 핑크 */
    --secondary-color: #E2F0CB;
    /* 소프트 민트/메론 */
    --accent-color: #B5EAD7;
    /* 파스텔 시안 */
    --accent-orange: #FFDAC1;
    /* 부드러운 살구색 */
    --bg-white: #FFFFFF;
    /* 순백색 */
    --bg-warm-cream: #FDFBF7;
    /* 아주 연한 웜 크림 */

    --text-dark: #333333;
    --text-light: #888888;
    --border-color: #EFEFEF;

    --partner-color: #4A90E2;
    /* 파트너 센터 전용 식별 컬러 */
    --admin-color: #2C3E50;
    /* 어드민 전용 식별 컬러 */
}

/* --- 2. 초기화 및 앱 전체 레이아웃 세팅 --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', sans-serif;
    /* 피그마 분위기와 획 매칭 */
}

body {
    background-color: #E9ECEF;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--text-dark);
}

/* 모바일 전용 뷰포트 고정형 프레임워크 크기 */
.app-viewport {
    width: 100%;
    max-width: 430px;
    height: 100vh;
    max-height: 932px;
    background-color: var(--bg-warm-cream);
    /* 웜 크림 레이어 적용 */
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 외부 프레임은 hidden 유지 */
    border-radius: 20px;
    /* 피그마 라운딩 스타일링 고정 */
}

/* 스크롤 가능한 메인 콘텐츠 영역 */
.main-content-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* 각 view-page는 스크롤 컨테이너 안에서 자연스럽게 흐름 */
.view-page {
    display: none;
    min-height: 100%;
}

.view-page.active {
    display: block;
}

/* 시뮬레이션 바 스타일 */
.simulation-bar {
    background: #1e1e24;
    color: #fff;
    padding: 6px 12px;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.simulation-bar select {
    background: #3a3a44;
    color: #fff;
    border: none;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

/* --- 3. 피그마 컴포넌트: 헤더 & 카테고리 탭 --- */
.brand-header {
    background-color: var(--bg-white);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-avatar {
    width: 28px;
    height: 28px;
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.brand-title {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #111;
}

.icon-btn {
    background: none;
    border: none;
    font-size: 17px;
    color: var(--text-dark);
    cursor: pointer;
}

.category-quick-bar {
    display: flex;
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.category-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-light);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.category-item.active {
    border-bottom: 3px solid var(--primary-color);
    color: var(--text-dark);
}

/* --- 4. 메인 콘텐츠 스크롤 구조 --- */
.main-content-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 84px 16px;
    position: relative;
}

.main-content-scroll::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.view-page {
    display: none;
}

.view-page.active {
    display: block;
}

/* --- 5. [01] 메인 홈 세부 컴포넌트 스타일링 --- */
.home-hero-banner {
    background: linear-gradient(140deg, #FFEBE9 0%, var(--accent-orange) 100%);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.hero-sub {
    font-size: 11px;
    font-weight: bold;
    color: #7f6461;
    margin-bottom: 8px;
}

.hero-action-btn {
    background-color: var(--bg-white);
    border: none;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    color: var(--text-dark);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.hero-img-box {
    width: 100%;
    height: 140px;
    margin-top: 15px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-fallback-icon {
    position: absolute;
    font-size: 48px;
    opacity: 0.2;
}

.section-title {
    font-size: 15px;
    font-weight: 800;
    margin: 24px 0 12px 0;
    letter-spacing: -0.3px;
}

/* 피그마의 와이드형 메인 스토어 카드 레이아웃 */
.product-main-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.2s;
}

.product-main-card:active {
    transform: scale(0.99);
}

.main-card-img {
    height: 160px;
    background-color: #fafafa;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.main-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-card-img span {
    position: absolute;
    font-size: 40px;
    opacity: 0.15;
}

.main-card-info {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.m-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.m-price {
    font-size: 14px;
    font-weight: 800;
    color: #ff6b6b;
}

.discover-joy-banner {
    background-color: var(--secondary-color);
    color: #4b5d32;
    padding: 16px;
    border-radius: 12px;
    margin: 20px 0;
}

.discover-joy-banner h3 {
    font-size: 14px;
    font-weight: bold;
}

.discover-joy-banner p {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
}

.daily-life-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.daily-life-grid img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: block;
}

.app-footer {
    margin-top: 40px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
    font-size: 10px;
    color: var(--text-light);
    line-height: 1.6;
}

/* --- 6. [02, 03] 상품 상세 뷰 스타일링 --- */

/* 상세 페이지: 하단 플로팅 바(~110px) + 네비(60px) + 여유(20px) 확보 */
#page-detail {
    padding-bottom: 190px;
}

.review-box-layout {
    margin-bottom: 8px;
}

/* ── 포카 대형 인형 리치 상세 전용 스타일 ── */

/* 컬렉션 태그 */
.detail-collection-tag {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* 스펙 테이블 */
.detail-spec-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}

.detail-spec-table {
    border-top: 1px solid var(--border-color);
    margin: 10px 0 14px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
}

.spec-label {
    color: #999;
    font-weight: 600;
    min-width: 70px;
}

.spec-value {
    color: #333;
    font-weight: 700;
    text-align: right;
}

.detail-product-intro {
    font-size: 12px;
    color: #666;
    line-height: 1.75;
}

/* ── 포카 하드커버 다이어리 리치 상세 전용 스타일 ── */

/* 썸네일 갤러리 */
.diary-thumb-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.diary-thumb-row img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    background: #F5F0E8;
    display: block;
}

/* 제품 정보 박스 */
.diary-product-info {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}

/* 큰 가격 표시 */
.diary-price-large {
    font-size: 30px;
    font-weight: 900;
    color: #ff4757;
    margin: 10px 0 18px;
    letter-spacing: -0.5px;
}

/* 제품 정보 헤더 */
.diary-info-header {
    font-size: 13px;
    font-weight: 800;
    color: #333;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

/* 설명 텍스트 */
.diary-desc-text {
    font-size: 12px;
    color: #555;
    line-height: 1.85;
    margin-top: 14px;
    margin-bottom: 18px;
}

/* 수량 선택 */
.diary-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.diary-qty-label {
    font-size: 13px;
    font-weight: 700;
    color: #555;
}

.qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.qty-btn {
    background: #f7f7f7;
    border: none;
    width: 34px;
    height: 34px;
    font-size: 17px;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.qty-btn:hover {
    background: #efefef;
}

.qty-input {
    width: 42px;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    height: 34px;
    -moz-appearance: textfield;
    color: #333;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Collectors' Reviews */
.diary-reviews-section {
    margin-bottom: 20px;
}

.diary-reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.diary-reviews-title {
    font-size: 18px;
    font-weight: 900;
    color: #333;
    letter-spacing: -0.3px;
}

.diary-more-link {
    font-size: 12px;
    color: #aaa;
    text-decoration: none;
    font-weight: 600;
}

/* 리뷰 큰 이미지 */
.diary-review-img-large {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 8px;
    background: #F5F0E8;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diary-review-img-large img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* 리뷰 2열 소이미지 */
.diary-review-img-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.diary-review-img-row img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    background: #F5F0E8;
    display: block;
}

/* 컬렉터 텍스트 블록 */
.diary-review-text-block {
    background: #F9F6F0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
}

.diary-collector-count {
    font-size: 13px;
    font-weight: 800;
    color: #7f6461;
    margin-bottom: 6px;
}

.diary-collector-desc {
    font-size: 12px;
    color: #8E877E;
    line-height: 1.65;
}

/* 왜 포카여야 할까요? */
.detail-why-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 16px;
    margin-bottom: 14px;
    text-align: center;
}

.why-divider-line {
    width: 32px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
    margin: 0 auto 14px;
}

.why-title {
    font-size: 16px;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.why-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.7;
    margin-bottom: 14px;
}

.see-post-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 1px;
}

/* 와이드 배너 */
.detail-wide-banner {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #FFEBE9 0%, #FFD4C8 100%);
}

.detail-wide-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
    color: #fff;
}

.banner-sub {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 4px;
}

.banner-main {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* 소재 섹션 */
.detail-material-section {
    background: #F9F6F0;
    border-radius: 16px;
    padding: 24px 16px;
    margin-bottom: 14px;
    text-align: center;
}

.material-icon-wrap {
    font-size: 28px;
    margin-bottom: 10px;
}

.material-title {
    font-size: 17px;
    font-weight: 800;
    color: #4A453F;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.material-desc {
    font-size: 12px;
    color: #8E877E;
    line-height: 1.7;
    margin-bottom: 16px;
}

.material-img-frame {
    border-radius: 12px;
    overflow: hidden;
    background: #eee;
    max-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.material-img-frame img {
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Fans of Poka 포토 그리드 */
.detail-fans-section {
    padding: 4px 0 0;
    margin-bottom: 20px;
}

.fans-title {
    font-size: 17px;
    font-weight: 800;
    color: #333;
    letter-spacing: -0.3px;
    margin-bottom: 6px;
}

.fans-subtitle {
    font-size: 11px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 14px;
}

.fans-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.fans-photo-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* 상세 페이지 전용 푸터 */
.detail-page-footer {
    text-align: center;
    padding: 20px 0 8px;
    border-top: 1px solid var(--border-color);
}

.footer-brand-name {
    font-size: 13px;
    font-weight: 800;
    color: #7f6461;
    margin-bottom: 8px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 10px;
    color: #A09A93;
    margin-bottom: 6px;
}

.footer-links .sep {
    color: #ccc;
}

.footer-copy {
    font-size: 9px;
    color: #B5B0AA;
}

.back-to-shop-btn {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 14px;
    text-align: left;
    color: #555;
}

.detail-main-image-frame {
    height: 240px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.detail-main-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-big-icon {
    position: absolute;
    font-size: 64px;
    opacity: 0.15;
}

.detail-meta-container {
    padding: 16px 4px;
}

.detail-brand {
    font-size: 11px;
    font-weight: bold;
    color: var(--primary-color);
}

.detail-goods-title {
    font-size: 19px;
    font-weight: 800;
    margin-top: 4px;
}

.detail-goods-price {
    font-size: 20px;
    font-weight: 800;
    color: #ff6b6b;
    margin-top: 4px;
}

.detail-desc-box {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 16px;
}

.detail-desc-box h3 {
    font-size: 13px;
    margin-bottom: 8px;
}

.detail-desc-box p {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
}

.desc-info-img {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
    display: flex;
    justify-content: center;
}

.desc-info-img img {
    max-width: 100%;
}

.fan-review-card {
    background: white;
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 10px;
    margin-top: 8px;
}

.rev-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 6px;
}

.rev-report-btn {
    background: none;
    border: none;
    color: #ff4d4f;
    font-weight: bold;
    cursor: pointer;
}

.fan-review-card p {
    font-size: 12px;
    color: #444;
}

/* --- 7. 주문서 및 공통 폼 양식 스타일링 --- */
.page-main-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
}

.order-box-card {
    background: white;
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 12px;
}

.order-box-card h3 {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 12px;
    border-left: 3px solid var(--primary-color);
    padding-left: 6px;
}

.form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 8px;
    background: #fff;
}

.address-api-flex {
    display: flex;
    gap: 6px;
}

.sub-action-btn {
    background: #333;
    color: white;
    border: none;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 11px;
    cursor: pointer;
    margin-bottom: 8px;
}

.order-product-summary-slot {
    background: #fafafa;
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 10px;
}

.total-calc-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 6px;
    color: #666;
}

.total-calc-row.target-bold {
    font-weight: bold;
    color: #111;
    font-size: 14px;
    border-top: 1px dashed #eee;
    padding-top: 8px;
    margin-top: 10px;
}

.pink-accent {
    color: #ff5252;
}

.toss-pay-radio-wrapper {
    background: #f2f6ff;
    border: 1px solid #ccdaff;
    padding: 12px;
    border-radius: 8px;
}

.toss-custom-label {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.toss-brand-accent {
    font-weight: 900;
    color: #0050ff;
    font-style: italic;
    font-size: 14px;
}

.execute-payment-btn {
    width: 100%;
    background: #0050ff;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 13px;
    margin-top: 12px;
    cursor: pointer;
}

/* 실시간 배송추적 타임라인 박스 컴포넌트 */
.tracking-timeline-bar {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    position: relative;
}

.tracking-timeline-bar::before {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    top: 10px;
    height: 2px;
    background: #eee;
    z-index: 1;
}

.time-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 60px;
    font-size: 10px;
    color: #aaa;
}

.node-dot {
    width: 22px;
    height: 22px;
    background: #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #999;
}

.time-step.active {
    color: var(--text-dark);
    font-weight: bold;
}

.time-step.active .node-dot {
    background-color: var(--primary-color);
    color: white;
}

.tracking-meta-info-box {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.5;
}

.invoice-highlight {
    color: #0050ff;
    font-weight: bold;
}

.payment-success-card {
    text-align: center;
    padding: 30px 0;
}

.success-icon-animation {
    font-size: 48px;
    margin-bottom: 10px;
}

/* --- 8. 입점사 & 어드민 가상 백오피스 인터페이스 --- */
.office-banner {
    padding: 12px;
    border-radius: 10px;
    color: white;
    margin-bottom: 14px;
}

.office-banner.theme-partner {
    background: var(--partner-color);
}

.office-banner.theme-admin {
    background: var(--admin-color);
}

.office-banner h3 {
    font-size: 13px;
}

.office-banner p {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 2px;
}

.office-widget-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}

.w-card {
    background: white;
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: 8px;
    text-align: center;
}

.w-lbl {
    font-size: 10px;
    color: var(--text-light);
    display: block;
}

.w-card strong {
    font-size: 15px;
    color: var(--partner-color);
    display: block;
    margin-top: 4px;
}

.office-action-btn {
    width: 100%;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    color: white;
}

.office-action-btn.btn-partner {
    background: var(--partner-color);
}

.office-action-btn.btn-danger {
    background: #ff4d4f;
}

.office-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    text-align: left;
}

.office-data-table th,
.office-data-table td {
    padding: 6px;
    border-bottom: 1px solid var(--border-color);
}

.txt-green {
    color: #2f54eb;
    font-weight: bold;
}

.api-signal-flex {
    display: flex;
    gap: 12px;
    font-size: 11px;
}

.signal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.signal-dot.green {
    background: #52c41a;
    box-shadow: 0 0 4px #52c41a;
}

.admin-approval-item {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-bottom: 6px;
    font-size: 11px;
}

.admin-alert-box {
    background: #fff1f0;
    border: 1px solid #ffa39e;
    padding: 10px;
    border-radius: 8px;
}

.alert-meta {
    font-size: 10px;
    color: #666;
    margin-bottom: 4px;
}

.alert-reason {
    font-size: 12px;
    font-weight: bold;
    color: #cf1322;
    margin-bottom: 8px;
}

/* --- 9. 플로팅 바 및 하단 공통 네비게이션 고정 --- */
.bottom-floating-option-bar {
    position: absolute;
    bottom: 55px;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--border-color);
    padding: 10px 16px;
    z-index: 90;
    display: none;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.floating-btn-group {
    display: flex;
    gap: 6px;
}

.btn-cart-add {
    flex: 1;
    background: #333;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.btn-direct-pay {
    flex: 1;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.bottom-main-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--bg-white);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #8E877E;
    font-weight: 700;
    cursor: pointer;
    flex: 1;
    height: 100%;
    gap: 3px;
    transition: all 0.2s ease;
}

.nav-button i {
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #8E877E;
    transition: all 0.2s ease;
}

.nav-button.active {
    color: var(--primary-color);
}

.nav-button.active i {
    background-color: #FFEBE9; /* Soft coral/pink pill backing */
    color: var(--primary-color);
    transform: scale(1.05);
}

/* --- 10. 피그마 프리미엄 쇼핑숍 (모든 굿즈 뷰) 전용 스타일링 --- */

/* 헤더 스타일링 */
.shop-header {
    background-color: var(--bg-warm-cream);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(142, 135, 126, 0.08);
    height: 56px;
}

.shop-header .back-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #4A453F;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.shop-header .back-btn:active {
    transform: scale(0.9);
}

.shop-header-title {
    font-size: 18px;
    font-weight: 800;
    color: #4A453F;
    flex: 1;
    margin-left: 8px;
    letter-spacing: -0.5px;
}

.shop-header-actions {
    display: flex;
    gap: 8px;
}

.shop-header-actions .icon-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #4A453F;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.shop-header-actions .icon-btn:active {
    background-color: rgba(142, 135, 126, 0.08);
}

/* 가로 스크롤형 카테고리 필터 바 */
.shop-category-bar {
    background-color: var(--bg-warm-cream);
    border-bottom: 1px solid rgba(142, 135, 126, 0.05);
    z-index: 95;
}

.shop-category-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 16px;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
}

.shop-category-scroll::-webkit-scrollbar {
    display: none; /* Safari/Chrome */
}

.shop-category-item {
    background-color: #F3ECE2; /* 부드러운 샌드 베이지 */
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #8E877E;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.shop-category-item.active {
    background-color: var(--primary-color);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(255, 183, 178, 0.4);
}

/* 2열 굿즈 상품 카드 그리드 */
.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
    padding: 8px 4px 24px 4px;
}

.shop-product-card {
    background: none;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease;
}

.shop-product-card:active {
    transform: scale(0.98);
}

.shop-card-image-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background-color: #F7F5F0;
    border: 1px solid rgba(142, 135, 126, 0.06);
    position: relative;
    box-shadow: 0 4px 16px rgba(142, 135, 126, 0.04);
}

.shop-card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.shop-product-card:hover .shop-card-image-box img {
    transform: scale(1.04);
}

/* 찜하기(하트) 플로팅 버튼 */
.shop-card-heart-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: var(--primary-color);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 5;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shop-card-heart-btn:active {
    transform: scale(1.2);
}

.shop-card-heart-btn i {
    transition: transform 0.2s ease;
}

/* 한정수량 등 배지 */
.shop-card-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(181, 234, 215, 0.95); /* --accent-color */
    color: #4b5d32;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    letter-spacing: -0.2px;
}

/* 정보 영역 */
.shop-card-info-box {
    padding: 8px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shop-card-category {
    font-size: 10px;
    color: #A09A93;
    font-weight: 700;
    text-transform: uppercase;
}

.shop-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #4A453F;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-card-price {
    font-size: 14px;
    font-weight: 800;
    color: #8B5E52; /* 고급스러운 브라운 초콜릿 톤 */
    margin-top: 1px;
}

/* 디스커버 배너 (웜 그레이 레이아웃) */
.shop-discover-banner {
    background-color: #F4F1EA;
    border-radius: 20px;
    padding: 28px 20px;
    margin: 24px 0 16px 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    border: 1px solid rgba(142, 135, 126, 0.04);
}

.shop-discover-banner h3 {
    font-size: 20px;
    font-weight: 900;
    color: #6D4C41;
    letter-spacing: -0.5px;
}

.shop-discover-banner p {
    font-size: 11px;
    color: #8D6E63;
    line-height: 1.6;
    word-break: keep-all;
    font-weight: 500;
}

.shop-discover-banner .paw-watermark {
    position: absolute;
    bottom: -15px;
    right: -10px;
    font-size: 80px;
    color: rgba(109, 76, 65, 0.04);
    transform: rotate(-15deg);
    pointer-events: none;
}

/* ── 포카 시그니처 데스크 매트 리치 상세 전용 스타일 ── */

.deskmat-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.discount-badge {
    background: #4caf50;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.deskmat-rating {
    font-size: 14px;
    color: #f0a500;
    margin-bottom: 12px;
}

.deskmat-rating span {
    color: #888;
    font-size: 11px;
    font-weight: 600;
}

/* 피처 섹션 카드 (01/02/03 각 섹션) */
.deskmat-feature-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 16px;
    margin-bottom: 14px;
}

.feature-badge-num {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1.5px solid var(--primary-color);
    padding: 2px 9px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.feature-title {
    font-size: 17px;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.feature-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.75;
    margin-bottom: 14px;
}

.feature-img-frame {
    border-radius: 12px;
    overflow: hidden;
    background: #F5F0E8;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-img-frame img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* ── 포카 모니터 인형 리치 상세 전용 스타일 ── */

.new-product-badge {
    background: #52b788;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.spec-section-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #bbb;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

/* 라이프스타일 이미지 */
.monitor-lifestyle-img {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #F5F0E8;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.monitor-lifestyle-img img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* THE COZY COMPANION 배너 */
.monitor-companion-banner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #FFE8D6 0%, #FFD4C2 100%);
    padding: 40px 24px;
    text-align: center;
}

.monitor-companion-banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.companion-text-overlay {
    position: relative;
    z-index: 2;
}

.companion-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: rgba(90, 60, 40, 0.65);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.companion-title {
    font-size: 22px;
    font-weight: 900;
    color: #5A3C28;
    line-height: 1.45;
    letter-spacing: -0.5px;
}

/* 설명 텍스트 박스 */
.monitor-desc-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 16px;
    margin-bottom: 12px;
}

.monitor-desc-text {
    font-size: 12px;
    color: #555;
    line-height: 1.85;
}

/* 특징 아이템 카드 */
.monitor-feature-item {
    background: #FDFBF7;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 16px;
    margin-bottom: 12px;
    text-align: center;
}

.monitor-feature-icon {
    font-size: 30px;
    margin-bottom: 10px;
}

.monitor-feature-title {
    font-size: 15px;
    font-weight: 800;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.monitor-feature-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.75;
}

/* --- 7. ���������� �ű� ���� �� ������Ʈ ��Ÿ�� --- */

/* ��� ��� ����ġ */
.modern-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.modern-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.modern-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #f0f0f0;
    transition: .3s;
    border-radius: 24px;
}
.modern-toggle .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.modern-toggle input:checked + .slider {
    background-color: var(--primary-color);
}
.modern-toggle input:checked + .slider:before {
    transform: translateX(20px);
}

/* �佺Ʈ �˾� */
.toast-message {
    background: rgba(51, 51, 51, 0.9);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: toastFade 3s ease forwards;
}

@keyframes toastFade {
    0% { opacity: 0; transform: translateY(10px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}